diff options
author | Thomas F. K. Jorna <[email protected]> | 2021-10-16 23:07:19 +0200 |
---|---|---|
committer | GitHub <[email protected]> | 2021-10-16 23:07:19 +0200 |
commit | ca2fa3dc8d405d0ec451f16b9fcc72cde6bbf470 (patch) | |
tree | a98c1af5379688b57985eebe051ffdb9422dbbb5 /components/Tweaks/LabelsPanel.tsx | |
parent | eb794cc2183595a4f42be393db6b52478053000c (diff) | |
parent | 677702087e7b1e001a489412f4ed26dfaa138df6 (diff) |
Merge pull request #117 from org-roam/feat/better-labels
Feat/better labels
Diffstat (limited to 'components/Tweaks/LabelsPanel.tsx')
-rw-r--r-- | components/Tweaks/LabelsPanel.tsx | 217 |
1 files changed, 120 insertions, 97 deletions
diff --git a/components/Tweaks/LabelsPanel.tsx b/components/Tweaks/LabelsPanel.tsx index 013409e..c40b689 100644 --- a/components/Tweaks/LabelsPanel.tsx +++ b/components/Tweaks/LabelsPanel.tsx @@ -28,112 +28,135 @@ export const LabelsPanel = (props: LabelsPanelProps) => { <VStack spacing={2} justifyContent="flex-start" - divider={<StackDivider borderColor="gray.500" />} + divider={<StackDivider borderColor="gray.400" />} align="stretch" color="gray.800" > - <Box> - <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> - <VStack - spacing={1} - justifyContent="flex-start" - divider={<StackDivider borderColor="gray.400" />} - align="stretch" - paddingLeft={2} - color="gray.800" - > - <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 })} - /> + <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="Max. label line length" - value={visuals.labelWordWrap} - min={10} - max={100} - step={1} - onChange={(value) => setVisuals({ ...visuals, labelWordWrap: value })} + label="Label Appearance Scale" + value={visuals.labelScale * 2} + onChange={(value) => setVisuals({ ...visuals, labelScale: value / 2 })} /> + </Box> + <Box paddingTop={2}> <SliderWithInfo - label="Space between label lines" - value={visuals.labelLineSpace} - min={0.2} - max={3} - step={0.1} - onChange={(value) => setVisuals({ ...visuals, labelLineSpace: value })} + 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, + })) + } /> - <ColorMenu - colorList={colorList} - label="Text" - setVisuals={setVisuals} - value="labelTextColor" - visValue={visuals.labelTextColor} - /> - <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 in={visuals.labelDynamicStrength > 0}> + <SliderWithInfo + label="Dynamic zoom degree cap" + 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.labelDynamicDegree} + min={1} + max={15} + step={1} + onChange={(value) => + setVisuals((curr: typeof initialVisuals) => ({ + ...curr, + labelDynamicDegree: value, + })) + } + /> </Collapse> - <Collapse in={visuals.labels > 1} animateOpacity> - <Box paddingTop={2}> - <SliderWithInfo - label="Label Appearance Scale" - value={visuals.labelScale * 5} - onChange={(value) => setVisuals({ ...visuals, labelScale: value / 5 })} - /> - </Box> - </Collapse> - </VStack> + </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> ) } |