diff options
| author | Thomas F. K. Jorna <[email protected]> | 2021-08-07 14:29:01 +0200 |
|---|---|---|
| committer | Thomas F. K. Jorna <[email protected]> | 2021-08-07 14:29:01 +0200 |
| commit | 132a16503c3c813dbd28b58c286ebb02bfd2d802 (patch) | |
| tree | 266d0c213a246171759aae2f21bb48f5f552a9e8 | |
| parent | 872be7c3631895d951e1991b0bcbd4d164941dab (diff) | |
feat: configurable label size and length
| -rw-r--r-- | components/config.ts | 2 | ||||
| -rw-r--r-- | components/tweaks.tsx | 16 | ||||
| -rw-r--r-- | 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, |