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> ) }