fix: visual indicators for double-click-to-expand feature weren't working (fixes #25 and #27)

* Initial plan

* feat: add zoom-in cursor as visual indicator for double-click-to-expand nodes

Co-authored-by: MathiasVDA <15101339+MathiasVDA@users.noreply.github.com>

* fix: colors of buttons were styled wrong when embedded in yasgui (fixes #27)

* fix: ensure loading/expanded border indicators are visible in all node states

Co-authored-by: MathiasVDA <15101339+MathiasVDA@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: MathiasVDA <15101339+MathiasVDA@users.noreply.github.com>
Co-authored-by: Mathias Vanden Auweele <mathias@matdata.eu>

Author: Copilot

src/GraphPlugin.ts

@@ -739,18 +739,24 @@ class GraphPlugin {
         originalColor = node.color;
         originalBorderWidth = node.borderWidth;
       }
+      // Apply loading indicator: orange border, visible in all node states (normal, selected, hover)
+      const loadingBackground = typeof originalColor === 'string' ? originalColor : undefined;
       this.nodesDataSet.update({
         id: nodeId,
         borderWidth: LOADING_BORDER_WIDTH,
-        color: typeof originalColor === 'object' && originalColor !== null
-          ? { ...originalColor, border: LOADING_BORDER_COLOR }
-          : { border: LOADING_BORDER_COLOR, background: originalColor ?? undefined },
+        borderWidthSelected: LOADING_BORDER_WIDTH,
+        color: {
+          border: LOADING_BORDER_COLOR,
+          background: loadingBackground,
+          highlight: { border: LOADING_BORDER_COLOR, background: loadingBackground },
+          hover: { border: LOADING_BORDER_COLOR, background: loadingBackground },
+        },
       });
     }
 
     const restoreNode = (borderWidth: number) => {
       if (nodeId !== undefined) {
-        this.nodesDataSet.update({ id: nodeId, borderWidth, color: originalColor });
+        this.nodesDataSet.update({ id: nodeId, borderWidth, borderWidthSelected: borderWidth, color: originalColor });
       }
     };
 

styles/_variables.css

@@ -15,9 +15,10 @@
 
   /* UI elements - using YASGUI variables with fallbacks */
   --yasgui-graph-canvas-bg: var(--yasgui-bg-primary, #ffffff);
-  --yasgui-graph-button-bg: var(--yasgui-accent-color, #4caf50);
-  --yasgui-graph-button-hover: var(--yasgui-link-hover, #45a049);
-  --yasgui-graph-button-text: var(--yasgui-button-text, #ffffff);
+  --yasgui-graph-button-bg: var(--yasgui-bg-secondary, #f0f0f0);
+  --yasgui-graph-button-hover: var(--yasgui-button-hover, #e0e0e0);
+  --yasgui-graph-button-text: var(--yasgui-text-primary, #333333);
+  --yasgui-graph-button-border: var(--yasgui-border-color, #cccccc);
   --yasgui-graph-empty-text: var(--yasgui-text-secondary, #666666);
   --yasgui-graph-error-text: #f44336;
 
@@ -66,4 +67,10 @@
   --yasgui-graph-background: var(--yasgui-bg-primary, #1e1e1e);
   --yasgui-graph-canvas-bg: var(--yasgui-bg-primary, #1e1e1e);
   --yasgui-graph-empty-text: var(--yasgui-text-secondary, #cccccc);
+
+  /* UI controls - dark mode fallbacks for when YASGUI variables are not in scope */
+  --yasgui-graph-button-bg: var(--yasgui-bg-secondary, #2a2a2a);
+  --yasgui-graph-button-hover: var(--yasgui-button-hover, #3a3a3a);
+  --yasgui-graph-button-text: var(--yasgui-text-primary, #e0e0e0);
+  --yasgui-graph-button-border: var(--yasgui-border-color, #555555);
 }

styles/graph-plugin.css

@@ -37,7 +37,7 @@
   padding: 8px 12px;
   background: var(--yasgui-graph-button-bg);
   color: var(--yasgui-graph-button-text);
-  border: none;
+  border: 1px solid var(--yasgui-graph-button-border);
   border-radius: 4px;
   cursor: pointer;
   font-size: 14px;
@@ -59,10 +59,9 @@
   top: 50px;
   right: 10px;
   z-index: 10001;
-  background: var(--yasgui-graph-button-bg, #4caf50);
-  background: var(--yasgui-bg-primary, #ffffff);
-  color: var(--yasgui-graph-text, #333333);
-  border: 1px solid var(--yasgui-border-color, #cccccc);
+  background: var(--yasgui-graph-button-bg);
+  color: var(--yasgui-graph-button-text);
+  border: 1px solid var(--yasgui-graph-button-border, #cccccc);
   border-radius: 6px;
   padding: 12px 14px;
   min-width: 240px;