From 15fdbd4e9e36c858709651e035fe1339dba3a1e9 Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <hello@tefkah.com>
Date: Sat, 16 Oct 2021 22:21:24 +0200
Subject: feat(labels): better ui for labels

---
 components/Tweaks/LabelsPanel.tsx | 217 +++++++++++++++++++++-----------------
 1 file changed, 120 insertions(+), 97 deletions(-)

(limited to 'components/Tweaks/LabelsPanel.tsx')

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>
   )
 }
-- 
cgit v1.2.3