diff options
Diffstat (limited to 'components/ColorsPanel.tsx')
| -rw-r--r-- | components/ColorsPanel.tsx | 237 |
1 files changed, 237 insertions, 0 deletions
diff --git a/components/ColorsPanel.tsx b/components/ColorsPanel.tsx new file mode 100644 index 0000000..6846a93 --- /dev/null +++ b/components/ColorsPanel.tsx @@ -0,0 +1,237 @@ +import { ArrowRightIcon, ChevronDownIcon, RepeatIcon } from '@chakra-ui/icons' +import { + Text, + Box, + Flex, + IconButton, + StackDivider, + Tooltip, + VStack, + MenuButton, + Menu, + Portal, + MenuList, + MenuOptionGroup, + MenuItemOption, + Button, + MenuItem, +} from '@chakra-ui/react' +import React from 'react' +import { ColorMenu } from './ColorMenu' +import { colorList, initialVisuals } from './config' + +export interface ColorsPanelProps { + visuals: typeof initialVisuals + setVisualsCallback: any + highlightColor: string + setHighlightColor: any +} + +export const ColorsPanel = (props: ColorsPanelProps) => { + const { visuals, setVisualsCallback, highlightColor, setHighlightColor } = props + + return ( + <VStack + spacing={2} + justifyContent="flex-start" + divider={<StackDivider borderColor="gray.500" />} + align="stretch" + color="gray.800" + > + <Box> + <Flex alignItems="center" justifyContent="space-between"> + <Text>Nodes</Text> + <Tooltip label="Shuffle node colors"> + <IconButton + aria-label="Shuffle node colors" + size="sm" + icon={<RepeatIcon />} + variant="ghost" + onClick={() => { + const arr = visuals.nodeColorScheme ?? [] + setVisualsCallback({ + ...visuals, + //shuffle that guy + //definitely thought of this myself + nodeColorScheme: arr + .map((x: any) => [Math.random(), x]) + .sort(([a], [b]) => a - b) + .map(([_, x]) => x), + }) + }} + /> + </Tooltip> + <Tooltip label="Cycle node colors"> + <IconButton + aria-label="Shift node colors" + icon={<ArrowRightIcon />} + size="sm" + variant="ghost" + onClick={() => { + const arr = visuals.nodeColorScheme ?? [] + setVisualsCallback({ + ...visuals, + nodeColorScheme: [...arr.slice(1, arr.length), arr[0]], + }) + }} + /> + </Tooltip> + <Menu isLazy placement="right" closeOnSelect={false} matchWidth> + <MenuButton + width={20} + as={Button} + colorScheme="" + color="black" + rightIcon={<ChevronDownIcon />} + > + <Flex height={6} width={6} flexDirection="column" flexWrap="wrap"> + {visuals.nodeColorScheme.map((color) => ( + <Box key={color} bgColor={color} flex="1 1 8px" borderRadius="2xl"></Box> + ))} + </Flex> + </MenuButton> + <Portal> + {' '} + <MenuList minW={10} zIndex="popover" bgColor="gray.200"> + <MenuOptionGroup + width={500} + type="checkbox" + defaultValue={visuals.nodeColorScheme} + onChange={(colors) => { + if (!colors.length) { + return + } + setVisualsCallback({ ...visuals, nodeColorScheme: colors }) + }} + > + {colorList.map((color) => ( + <MenuItemOption + key={color} + isChecked={visuals.nodeColorScheme.some((c) => c === color)} + value={color} + isDisabled={ + visuals.nodeColorScheme.length === 1 && visuals.nodeColorScheme[0] === color + } + > + <Box justifyContent="space-between" alignItems="center" display="flex"> + <Box bgColor={color} borderRadius="sm" height={6} width={6}></Box> + </Box> + </MenuItemOption> + ))} + </MenuOptionGroup> + </MenuList> + </Portal> + </Menu> + </Flex> + <Flex alignItems="center" justifyContent="space-between"> + <Text>Links</Text> + <Menu isLazy placement="right"> + <MenuButton as={Button} colorScheme="" color="black" rightIcon={<ChevronDownIcon />}> + <Box> + {visuals.linkColorScheme ? ( + <Box + bgColor={visuals.linkColorScheme} + borderRadius="sm" + height={6} + width={6} + ></Box> + ) : ( + <Flex height={6} width={6} flexDirection="column" flexWrap="wrap"> + {visuals.nodeColorScheme.map((color) => ( + <Box key={color} bgColor={color} flex="1 1 8px" borderRadius="2xl"></Box> + ))} + </Flex> + )} + </Box> + </MenuButton> + <Portal> + {' '} + <MenuList minW={10} zIndex="popover" bgColor="gray.200"> + <MenuItem + onClick={() => setVisualsCallback({ ...visuals, linkColorScheme: '' })} + justifyContent="space-between" + alignItems="center" + display="flex" + > + <Flex height={6} width={6} flexDirection="column" flexWrap="wrap"> + {visuals.nodeColorScheme.map((color) => ( + <Box key={color} bgColor={color} flex="1 1 8px" borderRadius="2xl"></Box> + ))} + </Flex> + </MenuItem> + {colorList.map((color) => ( + <MenuItem + key={color} + onClick={() => + setVisualsCallback({ + ...visuals, + linkColorScheme: color, + }) + } + justifyContent="space-between" + alignItems="center" + display="flex" + > + <Box bgColor={color} borderRadius="sm" height={6} width={6}></Box> + </MenuItem> + ))} + </MenuList> + </Portal> + </Menu> + </Flex> + <Flex alignItems="center" justifyContent="space-between"> + <Text>Accent</Text> + <Menu isLazy placement="right"> + <MenuButton as={Button} colorScheme="" color="black" rightIcon={<ChevronDownIcon />}> + {<Box bgColor={highlightColor} borderRadius="sm" height={6} width={6}></Box>} + </MenuButton> + <Portal> + {' '} + <MenuList minW={10} zIndex="popover" bgColor="gray.200"> + {colorList.map((color) => ( + <MenuItem + key={color} + onClick={() => setHighlightColor(color)} + justifyContent="space-between" + alignItems="center" + display="flex" + > + <Box bgColor={color} borderRadius="sm" height={6} width={6}></Box> + </MenuItem> + ))} + </MenuList> + </Portal> + </Menu> + </Flex> + <ColorMenu + colorList={colorList} + label="Link highlight" + setVisuals={setVisualsCallback} + value="linkHighlight" + visValue={visuals.linkHighlight} + /> + <ColorMenu + colorList={colorList} + label="Node highlight" + setVisuals={setVisualsCallback} + value="nodeHighlight" + visValue={visuals.nodeHighlight} + /> + <ColorMenu + colorList={colorList} + label="Background" + setVisuals={setVisualsCallback} + value="backgroundColor" + visValue={visuals.backgroundColor} + /> + <ColorMenu + colorList={colorList} + label="Emacs node" + setVisuals={setVisualsCallback} + value="emacsNodeColor" + visValue={visuals.emacsNodeColor} + /> + </Box> + </VStack> + ) +} |