From 132a16503c3c813dbd28b58c286ebb02bfd2d802 Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <thomasfkjorna@gmail.com>
Date: Sat, 7 Aug 2021 14:29:01 +0200
Subject: feat: configurable label size and length

---
 components/config.ts  |  2 ++
 components/tweaks.tsx | 16 ++++++++++++++++
 pages/index.tsx       |  7 +++++--
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/components/config.ts b/components/config.ts
index ef48973..2636b73 100644
--- a/components/config.ts
+++ b/components/config.ts
@@ -58,6 +58,8 @@ export const initialVisuals = {
   nodeResolution: 12,
   labels: 2,
   labelScale: 1.5,
+  labelFontSize: 13,
+  labelLength: 40,
   highlight: true,
   highlightNodeSize: 2,
   highlightLinkSize: 2,
diff --git a/components/tweaks.tsx b/components/tweaks.tsx
index c62cbd0..ca88d2d 100644
--- a/components/tweaks.tsx
+++ b/components/tweaks.tsx
@@ -850,6 +850,22 @@ export const Tweaks = (props: TweakProps) => {
                         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="Maximum label characters"
+                          value={visuals.labelLength}
+                          min={10}
+                          max={100}
+                          step={1}
+                          onChange={(value) => setVisuals({ ...visuals, labelLength: value })}
+                        />
                         <ColorMenu
                           colorList={colorList}
                           label="Text"
diff --git a/pages/index.tsx b/pages/index.tsx
index 75efbfa..d3d6a44 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -950,9 +950,12 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
       }
 
       const nodeTitle = (node as OrgRoamNode).title!
-      const label = nodeTitle.substring(0, Math.min(nodeTitle.length, 40))
+      const label =
+        nodeTitle.length > visuals.labelLength
+          ? nodeTitle.substring(0, visuals.labelLength) + '...'
+          : nodeTitle
       // const label = 'label'
-      const fontSize = 14 / (0.75 * Math.min(Math.max(0.5, globalScale), 3))
+      const fontSize = visuals.labelFontSize / (0.75 * Math.min(Math.max(0.5, globalScale), 3))
       const textWidth = ctx.measureText(label).width
       const bckgDimensions = [textWidth * 1.1, fontSize].map((n) => n + fontSize * 0.5) as [
         number,
-- 
cgit v1.2.3