summaryrefslogtreecommitdiff
path: root/components/Tweaks/Visual/LabelsPanel.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'components/Tweaks/Visual/LabelsPanel.tsx')
-rw-r--r--components/Tweaks/Visual/LabelsPanel.tsx162
1 files changed, 162 insertions, 0 deletions
diff --git a/components/Tweaks/Visual/LabelsPanel.tsx b/components/Tweaks/Visual/LabelsPanel.tsx
new file mode 100644
index 0000000..b0044f1
--- /dev/null
+++ b/components/Tweaks/Visual/LabelsPanel.tsx
@@ -0,0 +1,162 @@
+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>
+ )
+}