summaryrefslogtreecommitdiff
path: root/components/Tweaks/LabelsPanel.tsx
diff options
context:
space:
mode:
authorThomas F. K. Jorna <[email protected]>2022-01-03 17:21:18 +0100
committerGitHub <[email protected]>2022-01-03 17:21:18 +0100
commitdad03e3be5b0a7c1159e0207cce11540ca830359 (patch)
tree4ae4e0a40c578e12b6d4f11a3f785c8190865f8b /components/Tweaks/LabelsPanel.tsx
parent9ed0c5705a302a91fab2b8bcc777a12dcf9b3682 (diff)
feat(filter): add option to filter by subdirectory (#190)
Diffstat (limited to 'components/Tweaks/LabelsPanel.tsx')
-rw-r--r--components/Tweaks/LabelsPanel.tsx162
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>
- )
-}