import { ChevronDownIcon } from '@chakra-ui/icons' import { Box, Button, Collapse, Flex, Menu, MenuButton, MenuItem, MenuList, Portal, StackDivider, VStack, Text, } from '@chakra-ui/react' import React from 'react' import { ColorMenu } from './ColorMenu' import { colorList, initialVisuals } from '../config' import { SliderWithInfo } from './SliderWithInfo' export interface LabelsPanelProps { visuals: typeof initialVisuals setVisuals: any } export const LabelsPanel = (props: LabelsPanelProps) => { const { visuals, setVisuals } = props return ( <VStack spacing={2} justifyContent="flex-start" divider={<StackDivider borderColor="gray.400" />} align="stretch" color="gray.800" > <Flex alignItems="center" justifyContent="space-between"> <Text>Show labels</Text> <Menu isLazy placement="right"> <MenuButton as={Button} colorScheme="" color="black" rightIcon={<ChevronDownIcon />}> {!visuals.labels ? 'Never' : visuals.labels < 2 ? 'On Highlight' : 'Always'} </MenuButton> <Portal> {' '} <MenuList zIndex="popover" bgColor="gray.200"> <MenuItem onClick={() => setVisuals({ ...visuals, labels: 0 })}>Never</MenuItem> <MenuItem onClick={() => setVisuals({ ...visuals, labels: 1 })}> On Highlight </MenuItem> <MenuItem onClick={() => setVisuals({ ...visuals, labels: 2 })}>Always</MenuItem> <MenuItem onClick={() => setVisuals({ ...visuals, labels: 3 })}> Always (even in 3D) </MenuItem> </MenuList> </Portal> </Menu> </Flex> <Collapse in={visuals.labels > 1} animateOpacity> <Box paddingTop={2}> <SliderWithInfo label="Label Appearance Scale" value={visuals.labelScale * 2} onChange={(value) => setVisuals({ ...visuals, labelScale: value / 2 })} /> </Box> <Box paddingTop={2}> <SliderWithInfo label="Label dynamicity" infoText="By default, labels of nodes with more links will appear earlier than those with fewer. This slider changes the strength of this effect, put it at zero to disable it." value={visuals.labelDynamicStrength} min={0} max={1} step={0.05} onChange={(value) => setVisuals((curr: typeof initialVisuals) => ({ ...curr, labelDynamicStrength: value, })) } /> <Collapse in={visuals.labelDynamicStrength > 0}> <SliderWithInfo label="Dynamic zoom degree cap" infoText="The maximum number of links that is considered for the 'dynamic zoom effect'. Past this number all number of links are treated the same." value={visuals.labelDynamicDegree} min={1} max={15} step={1} onChange={(value) => setVisuals((curr: typeof initialVisuals) => ({ ...curr, labelDynamicDegree: value, })) } /> </Collapse> </Box> </Collapse> <ColorMenu colorList={colorList} label="Text" setVisuals={setVisuals} value="labelTextColor" visValue={visuals.labelTextColor} /> <Box> <ColorMenu colorList={colorList} label="Background" setVisuals={setVisuals} value="labelBackgroundColor" visValue={visuals.labelBackgroundColor} /> <Collapse in={!!visuals.labelBackgroundColor} animateOpacity> <Box paddingTop={2}> <SliderWithInfo label="Background opacity" value={visuals.labelBackgroundOpacity} onChange={(value) => { console.log(visuals.labelBackgroundOpacity) setVisuals({ ...visuals, labelBackgroundOpacity: value }) }} min={0} max={1} step={0.01} /> </Box> </Collapse> </Box> <SliderWithInfo label="Label font size" value={visuals.labelFontSize} min={5} max={20} step={0.5} onChange={(value) => setVisuals({ ...visuals, labelFontSize: value })} /> <SliderWithInfo label="Max. label characters" value={visuals.labelLength} min={10} max={100} step={1} onChange={(value) => setVisuals({ ...visuals, labelLength: value })} /> <SliderWithInfo label="Max. label line length" value={visuals.labelWordWrap} min={10} max={100} step={1} onChange={(value) => setVisuals({ ...visuals, labelWordWrap: value })} /> <SliderWithInfo label="Space between label lines" value={visuals.labelLineSpace} min={0.2} max={3} step={0.1} onChange={(value) => setVisuals({ ...visuals, labelLineSpace: value })} /> </VStack> ) }