import { ChevronDownIcon } from '@chakra-ui/icons' import { Button, Flex, Menu, MenuButton, MenuItem, MenuList, Portal, StackDivider, VStack, Text, Box, Switch, } from '@chakra-ui/react' import React from 'react' import { initialBehavior, initialMouse } from '../config' import { InfoTooltip } from './InfoTooltip' import { SliderWithInfo } from './SliderWithInfo' export interface BehaviorPanelProps { behavior: typeof initialBehavior setBehavior: any mouse: typeof initialMouse setMouse: any } export const BehaviorPanel = (props: BehaviorPanelProps) => { const { behavior, setBehavior, mouse, setMouse } = props return ( <VStack spacing={2} justifyContent="flex-start" divider={<StackDivider borderColor="gray.500" />} align="stretch" paddingLeft={7} color="gray.800" > <Flex alignItems="center" justifyContent="space-between"> <Text>Preview node</Text> <Menu isLazy placement="right"> <MenuButton as={Button} rightIcon={<ChevronDownIcon />} colorScheme="" color="black"> <Text> {mouse.preview ? mouse.preview[0]!.toUpperCase() + mouse.preview!.slice(1) : 'Never'} </Text> </MenuButton> <Portal> {' '} <MenuList bgColor="gray.200" zIndex="popover"> <MenuItem onClick={() => setMouse({ ...mouse, preview: '' })}>Never</MenuItem> <MenuItem onClick={() => setMouse({ ...mouse, preview: 'click' })}>Click</MenuItem> <MenuItem onClick={() => setMouse({ ...mouse, preview: 'double' })}> Double Click </MenuItem> </MenuList> </Portal> </Menu> </Flex> <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> ) }