diff options
Diffstat (limited to 'components/tweaks.tsx')
| -rw-r--r-- | components/tweaks.tsx | 212 |
1 files changed, 9 insertions, 203 deletions
diff --git a/components/tweaks.tsx b/components/tweaks.tsx index 1a7e72c..a78c7f4 100644 --- a/components/tweaks.tsx +++ b/components/tweaks.tsx @@ -1,11 +1,4 @@ -import { - CloseIcon, - RepeatClockIcon, - ChevronDownIcon, - SettingsIcon, - RepeatIcon, - ArrowRightIcon, -} from '@chakra-ui/icons' +import { CloseIcon, RepeatClockIcon, SettingsIcon } from '@chakra-ui/icons' import { Accordion, AccordionButton, @@ -14,26 +7,12 @@ import { AccordionPanel, Box, Button, - Flex, IconButton, - Menu, - MenuButton, - MenuItem, - MenuList, - MenuOptionGroup, - MenuItemOption, - Select, - StackDivider, - Switch, - Text, Tooltip, - VStack, Heading, - Collapse, - Portal, } from '@chakra-ui/react' -import React, { useContext, useCallback } from 'react' +import React, { useContext } from 'react' import Scrollbars from 'react-custom-scrollbars-2' import { initialPhysics, @@ -46,15 +25,12 @@ import { } from './config' import FilterPanel from './FilterPanel' -import { ColorMenu } from './ColorMenu' import { ThemeContext } from '../util/themecontext' import { usePersistantState } from '../util/persistant-state' -import { SliderWithInfo } from './SliderWithInfo' -import { EnableSection } from './EnableSection' -import { InfoTooltip } from './InfoTooltip' import { PhysicsPanel } from './PhysicsPanel' import { VisualsPanel } from './VisualsPanel' +import { BehaviorPanel } from './BehaviorPanel' export interface TweakProps { physics: typeof initialPhysics @@ -226,157 +202,12 @@ export const Tweaks = (props: TweakProps) => { <Heading size="sm">Behavior</Heading> </AccordionButton> <AccordionPanel> - <VStack - spacing={2} - justifyContent="flex-start" - divider={<StackDivider borderColor="gray.500" />} - align="stretch" - paddingLeft={7} - color="gray.800" - > - <Flex alignItems="center" justifyContent="space-between"> - <Flex> - <Text>Expand Node</Text> - <InfoTooltip infoText="View only the node and its direct neighbors" /> - </Flex> - <Menu isLazy placement="right"> - <MenuButton - as={Button} - rightIcon={<ChevronDownIcon />} - colorScheme="" - color="black" - > - <Text> - {mouse.local - ? mouse.local[0]!.toUpperCase() + mouse.local!.slice(1) - : 'Never'} - </Text> - </MenuButton> - <Portal> - {' '} - <MenuList zIndex="popover" bgColor="gray.200"> - <MenuItem onClick={() => setMouse({ ...mouse, local: '' })}>Never</MenuItem> - <MenuItem onClick={() => setMouse({ ...mouse, local: 'click' })}> - Click - </MenuItem> - <MenuItem onClick={() => setMouse({ ...mouse, local: 'double' })}> - Double Click - </MenuItem> - <MenuItem onClick={() => setMouse({ ...mouse, local: 'right' })}> - Right Click - </MenuItem> - </MenuList> - </Portal> - </Menu> - </Flex> - <Flex alignItems="center" justifyContent="space-between"> - <Text>Open in Emacs</Text> - <Menu isLazy placement="right"> - <MenuButton - as={Button} - rightIcon={<ChevronDownIcon />} - colorScheme="" - color="black" - > - <Text> - {mouse.follow - ? mouse.follow[0]!.toUpperCase() + mouse.follow!.slice(1) - : 'Never'} - </Text> - </MenuButton> - <Portal> - {' '} - <MenuList bgColor="gray.200" zIndex="popover"> - <MenuItem onClick={() => setMouse({ ...mouse, follow: '' })}> - Never - </MenuItem> - <MenuItem onClick={() => setMouse({ ...mouse, follow: 'click' })}> - Click - </MenuItem> - <MenuItem onClick={() => setMouse({ ...mouse, follow: 'double' })}> - Double Click - </MenuItem> - <MenuItem onClick={() => setMouse({ ...mouse, follow: 'right' })}> - Right Click - </MenuItem> - </MenuList> - </Portal> - </Menu> - </Flex> - <Flex alignItems="center" justifyContent="space-between"> - <Text>Follow Emacs by...</Text> - <Menu isLazy placement="right"> - <MenuButton - as={Button} - rightIcon={<ChevronDownIcon />} - colorScheme="" - color="black" - > - <Text>{behavior.follow[0].toUpperCase() + behavior.follow.slice(1)}</Text> - </MenuButton> - <Portal> - {' '} - <MenuList bgColor="gray.200" zIndex="popover"> - <MenuItem onClick={() => setBehavior({ ...behavior, follow: 'color' })}> - Just coloring the currently opened node - </MenuItem> - <MenuItem onClick={() => setBehavior({ ...behavior, follow: 'local' })}> - Opening the local graph - </MenuItem> - <MenuItem onClick={() => setBehavior({ ...behavior, follow: 'zoom' })}> - Zooming to the current node - </MenuItem> - </MenuList> - </Portal> - </Menu> - </Flex> - <Flex alignItems="center" justifyContent="space-between"> - <Flex> - <Text>Local graph</Text> - <InfoTooltip infoText="When in local mode and clicking a new node, should I add that node's local graph or open the new one?" /> - </Flex> - <Menu isLazy placement="right"> - <MenuButton - as={Button} - rightIcon={<ChevronDownIcon />} - colorScheme="" - color="black" - > - <Text>{behavior.localSame === 'add' ? 'Add' : 'Replace'}</Text> - </MenuButton> - <Portal> - {' '} - <MenuList bgColor="gray.200" zIndex="popover"> - <MenuItem - onClick={() => setBehavior({ ...behavior, localSame: 'replace' })} - > - Open that nodes graph - </MenuItem> - <MenuItem onClick={() => setBehavior({ ...behavior, localSame: 'add' })}> - Add node to local graph - </MenuItem> - </MenuList> - </Portal> - </Menu> - </Flex> - <SliderWithInfo - label="Zoom speed" - value={behavior.zoomSpeed} - min={0} - max={4000} - step={100} - onChange={(value) => setBehavior({ ...behavior, zoomSpeed: value })} - /> - <SliderWithInfo - label="Zoom padding" - value={behavior.zoomPadding} - min={0} - max={400} - step={1} - onChange={(value) => setBehavior({ ...behavior, zoomPadding: value })} - infoText="How much to zoom out to accomodate all nodes when changing the view." - /> - </VStack> + <BehaviorPanel + behavior={behavior} + setBehavior={setBehavior} + mouse={mouse} + setMouse={setMouse} + /> </AccordionPanel> </AccordionItem> </Accordion> @@ -384,28 +215,3 @@ export const Tweaks = (props: TweakProps) => { </Box> ) } - -export interface DropDownMenuProps { - textArray: string[] - onClickArray: (() => void)[] - displayValue: string -} - -export const DropDownMenu = (props: DropDownMenuProps) => { - const { textArray, onClickArray, displayValue } = props - return ( - <Menu isLazy placement="right"> - <MenuButton as={Button} rightIcon={<ChevronDownIcon />}> - {displayValue} - </MenuButton> - <Portal> - {' '} - <MenuList zIndex="popover"> - {textArray.map((option, i) => { - ;<MenuItem onClick={onClickArray[i]}> {option} </MenuItem> - })} - </MenuList> - </Portal> - </Menu> - ) -} |