feature: added slider for node scale

3 files changed, 19 insertions, 1 deletions

diff --git a/components/config.ts b/components/config.ts
index daf548c..2487168 100644
--- a/components/config.ts
+++ b/components/config.ts
@@ -95,6 +95,7 @@ export const initialVisuals = {
   refLinkColor: 'gray.400',
   refLinkHighlightColor: '',
   refNodeColor: 'black',
+  nodeSizeLinks: 2,
 }
 
 export interface TagColors {
diff --git a/components/tweaks.tsx b/components/tweaks.tsx
index 9ff994e..bed075f 100644
--- a/components/tweaks.tsx
+++ b/components/tweaks.tsx
@@ -711,6 +711,13 @@ export const Tweaks = (props: TweakProps) => {
                         value={visuals.nodeRel}
                         onChange={(value) => setVisuals({ ...visuals, nodeRel: value })}
                       />
+                      <SliderWithInfo
+                        label="Node connections size scale"
+                        value={visuals.nodeSizeLinks}
+                        min={0}
+                        max={2}
+                        onChange={(value) => setVisuals({ ...visuals, nodeSizeLinks: value })}
+                      />
                       {threeDim && (
                         <>
                           <SliderWithInfo
diff --git a/pages/index.tsx b/pages/index.tsx
index c521741..3dd0e9a 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -722,6 +722,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
       visuals.refNodeColor || [],
       visuals.refLinkColor || [],
       visuals.refLinkHighlightColor || [],
+      visuals.backgroundColor || [],
     )
 
     return Object.fromEntries(
@@ -745,6 +746,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
     visuals.refLinkHighlightColor,
     visuals.citeLinkHighlightColor,
     visuals.citeLinkColor,
+    visuals.backgroundColor,
     emacsTheme,
   ])
 
@@ -810,6 +812,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
   }
 
   const getNodeColor = (node: OrgRoamNode) => {
+    const isHighlightingHappening = !!highlightedNodes.length
     const needsHighlighting = highlightedNodes[node.id!] || previouslyHighlightedNodes[node.id!]
     // if we are matching the node color and don't have a highlight color
     // or we don't have our own scheme and we're not being highlighted
@@ -879,7 +882,11 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
       const parentNeighbors = links.length
         ? links.filter((link) => link.type === 'parent').length
         : 0
-      const basicSize = 3 + links.length - (!filter.parents ? parentNeighbors : 0)
+      const basicSize =
+        3 + links.length * visuals.nodeSizeLinks - (!filter.parents ? parentNeighbors : 0)
+      if (visuals.highlightNodeSize === 1) {
+        return basicSize
+      }
       const highlightSize =
         highlightedNodes[node.id!] || previouslyHighlightedNodes[node.id!]
           ? 1 + opacity * (visuals.highlightNodeSize - 1)
@@ -983,6 +990,9 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
       return getLinkColor(sourceId as string, targetId as string, needsHighlighting)
     },
     linkWidth: (link) => {
+      if (visuals.highlightLinkSize === 1) {
+        return visuals.linkWidth
+      }
       const linkIsHighlighted = isLinkRelatedToNode(link, centralHighlightedNode.current)
       const linkWasHighlighted = isLinkRelatedToNode(link, lastHoverNode.current)