diff options
author | Thomas F. K. Jorna <[email protected]> | 2022-01-03 17:21:18 +0100 |
---|---|---|
committer | GitHub <[email protected]> | 2022-01-03 17:21:18 +0100 |
commit | dad03e3be5b0a7c1159e0207cce11540ca830359 (patch) | |
tree | 4ae4e0a40c578e12b6d4f11a3f785c8190865f8b /components/Tweaks/LabelsPanel.tsx | |
parent | 9ed0c5705a302a91fab2b8bcc777a12dcf9b3682 (diff) |
feat(filter): add option to filter by subdirectory (#190)
Diffstat (limited to 'components/Tweaks/LabelsPanel.tsx')
-rw-r--r-- | components/Tweaks/LabelsPanel.tsx | 162 |
1 files changed, 0 insertions, 162 deletions
diff --git a/components/Tweaks/LabelsPanel.tsx b/components/Tweaks/LabelsPanel.tsx deleted file mode 100644 index 2b66e85..0000000 --- a/components/Tweaks/LabelsPanel.tsx +++ /dev/null @@ -1,162 +0,0 @@ -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> - ) -} |