summaryrefslogtreecommitdiff
path: root/components/Tweaks/BehaviorPanel.tsx
diff options
context:
space:
mode:
authorThomas F. K. Jorna <[email protected]>2021-09-25 16:11:31 +0200
committerThomas F. K. Jorna <[email protected]>2021-09-25 16:11:31 +0200
commitee8539a9351374a719c9026f85d85e7b4ea6e8f5 (patch)
treef9220fd304bd3669523df39ddaa0992919ccc4a6 /components/Tweaks/BehaviorPanel.tsx
parent075d3831ffae63f128bcaabf9fc5e70ade41ad33 (diff)
chore: move tweaks to separate subfolder
Diffstat (limited to 'components/Tweaks/BehaviorPanel.tsx')
-rw-r--r--components/Tweaks/BehaviorPanel.tsx148
1 files changed, 148 insertions, 0 deletions
diff --git a/components/Tweaks/BehaviorPanel.tsx b/components/Tweaks/BehaviorPanel.tsx
new file mode 100644
index 0000000..8edb986
--- /dev/null
+++ b/components/Tweaks/BehaviorPanel.tsx
@@ -0,0 +1,148 @@
+import { ChevronDownIcon } from '@chakra-ui/icons'
+import {
+ Button,
+ Flex,
+ Menu,
+ MenuButton,
+ MenuItem,
+ MenuList,
+ Portal,
+ StackDivider,
+ VStack,
+ Text,
+} 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">
+ <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>
+ )
+}