polly-graph 0.1.13 → 0.1.14

package/dist/index.cjs

@@ -5117,34 +5117,294 @@ function createDragBehavior(simulation, onDragStart, canvasBounds) {
   });
 }
 
+// src/utils/node-style-manager.ts
+var NodeStyleManager = class {
+  styleStates = /* @__PURE__ */ new Map();
+  /**
+   * Initialize a node's style state by capturing its original styles
+   */
+  initializeNode(element, node) {
+    if (this.styleStates.has(element)) {
+      return;
+    }
+    const domBackup = {
+      stroke: element.getAttribute("stroke"),
+      strokeWidth: element.getAttribute("stroke-width"),
+      opacity: element.getAttribute("opacity"),
+      fill: element.getAttribute("fill")
+    };
+    const originalStyle = {
+      stroke: node.style?.stroke || void 0,
+      strokeWidth: node.style?.strokeWidth || void 0,
+      opacity: node.style?.opacity || void 0,
+      fill: node.style?.fill || void 0
+    };
+    this.styleStates.set(element, {
+      original: originalStyle,
+      current: { ...originalStyle },
+      domBackup
+    });
+  }
+  /**
+   * Apply temporary styles (e.g., hover effects) that will be reset later
+   */
+  applyTemporaryStyles(element, styles) {
+    this.applyStylesToDOM(element, styles);
+  }
+  /**
+   * Apply permanent styles that become the new base styles
+   */
+  applyPermanentStyles(element, styles) {
+    const state = this.styleStates.get(element);
+    if (!state) {
+      console.warn("[NodeStyleManager] Node not initialized, cannot apply permanent styles");
+      return;
+    }
+    this.applyStylesToDOM(element, styles);
+    Object.assign(state.current, styles);
+  }
+  /**
+   * Reset node to its current base styles (removes temporary styles)
+   */
+  resetToBase(element) {
+    const state = this.styleStates.get(element);
+    if (!state) {
+      this.clearAllStyles(element);
+      return;
+    }
+    this.clearAllStyles(element);
+    this.applyStylesToDOM(element, state.current);
+  }
+  /**
+   * Reset node to its original styles (as captured during initialization)
+   */
+  resetToOriginal(element) {
+    const state = this.styleStates.get(element);
+    if (!state) {
+      this.clearAllStyles(element);
+      return;
+    }
+    this.clearAllStyles(element);
+    this.restoreOriginalDOM(element, state.domBackup);
+    state.current = { ...state.original };
+  }
+  /**
+   * Check if node is in a specific state (selected, hovered, etc.)
+   */
+  hasState(element, stateName) {
+    return element.dataset[stateName] === "true";
+  }
+  /**
+   * Set state marker on node
+   */
+  setState(element, stateName, value) {
+    if (value) {
+      element.dataset[stateName] = "true";
+    } else {
+      delete element.dataset[stateName];
+    }
+  }
+  /**
+   * Get the original styles for a node
+   */
+  getOriginalStyles(element) {
+    const state = this.styleStates.get(element);
+    return state ? { ...state.original } : null;
+  }
+  /**
+   * Get the current base styles for a node
+   */
+  getCurrentStyles(element) {
+    const state = this.styleStates.get(element);
+    return state ? { ...state.current } : null;
+  }
+  /**
+   * Remove a node from management (cleanup)
+   */
+  removeNode(element) {
+    this.styleStates.delete(element);
+  }
+  /**
+   * Clear all managed nodes (for cleanup)
+   */
+  clear() {
+    this.styleStates.clear();
+  }
+  /**
+   * Private: Apply styles to DOM element
+   */
+  applyStylesToDOM(element, styles) {
+    if (styles.stroke !== void 0) {
+      if (styles.stroke === null || styles.stroke === "") {
+        element.removeAttribute("stroke");
+        element.style.stroke = "";
+      } else {
+        element.style.stroke = styles.stroke;
+      }
+    }
+    if (styles.strokeWidth !== void 0) {
+      if (styles.strokeWidth === null || styles.strokeWidth === 0) {
+        element.removeAttribute("stroke-width");
+        element.style.strokeWidth = "";
+      } else {
+        element.style.strokeWidth = String(styles.strokeWidth);
+      }
+    }
+    if (styles.opacity !== void 0) {
+      if (styles.opacity === null || styles.opacity === 1) {
+        element.removeAttribute("opacity");
+        element.style.opacity = "";
+      } else {
+        element.style.opacity = String(styles.opacity);
+      }
+    }
+    if (styles.fill !== void 0) {
+      if (styles.fill === null || styles.fill === "") {
+        element.removeAttribute("fill");
+        element.style.fill = "";
+      } else {
+        element.style.fill = styles.fill;
+      }
+    }
+    if (styles.radius !== void 0) {
+      if (styles.radius === null || styles.radius === 0) {
+        element.removeAttribute("r");
+        element.style.removeProperty("r");
+      } else {
+        element.setAttribute("r", String(styles.radius));
+      }
+    }
+  }
+  /**
+   * Private: Clear all inline styles and remove hover-related attributes
+   */
+  clearAllStyles(element) {
+    element.style.stroke = "";
+    element.style.strokeWidth = "";
+    element.style.opacity = "";
+    element.style.fill = "";
+    element.style.removeProperty("r");
+    this.removeIfHoverAttribute(element, "stroke");
+    this.removeIfHoverAttribute(element, "stroke-width");
+    this.removeIfHoverAttribute(element, "opacity");
+  }
+  /**
+   * Private: Restore original DOM attributes
+   */
+  restoreOriginalDOM(element, domBackup) {
+    if (domBackup.stroke !== void 0) {
+      if (domBackup.stroke === null) {
+        element.removeAttribute("stroke");
+      } else {
+        element.setAttribute("stroke", domBackup.stroke);
+      }
+    }
+    if (domBackup.strokeWidth !== void 0) {
+      if (domBackup.strokeWidth === null) {
+        element.removeAttribute("stroke-width");
+      } else {
+        element.setAttribute("stroke-width", domBackup.strokeWidth);
+      }
+    }
+    if (domBackup.opacity !== void 0) {
+      if (domBackup.opacity === null) {
+        element.removeAttribute("opacity");
+      } else {
+        element.setAttribute("opacity", domBackup.opacity);
+      }
+    }
+    if (domBackup.fill !== void 0) {
+      if (domBackup.fill === null) {
+        element.removeAttribute("fill");
+      } else {
+        element.setAttribute("fill", domBackup.fill);
+      }
+    }
+  }
+  /**
+   * Private: Remove attribute only if it looks like it was set by hover/interaction
+   */
+  removeIfHoverAttribute(element, attr) {
+    const value = element.getAttribute(attr);
+    if (!value) return;
+    const hoverPatterns = {
+      "stroke": ["#6366f1", "#8b5cf6", "#3b82f6", "#ffffff", "#fff", "white"],
+      // Common hover stroke colors
+      "stroke-width": ["2", "2.5", "3", "4"],
+      // Common hover stroke widths
+      "opacity": ["0.8", "0.9", "0.7"]
+      // Common hover opacity values
+    };
+    const patterns = hoverPatterns[attr];
+    if (patterns && patterns.includes(value)) {
+      element.removeAttribute(attr);
+    }
+  }
+};
+var nodeStyleManager = new NodeStyleManager();
+function applyHoverStyles(element, node, hoverStyle) {
+  if (nodeStyleManager.hasState(element, "selected")) {
+    return;
+  }
+  nodeStyleManager.initializeNode(element, node);
+  nodeStyleManager.applyTemporaryStyles(element, hoverStyle);
+  nodeStyleManager.setState(element, "hovered", true);
+}
+function removeHoverStyles(element, node) {
+  if (nodeStyleManager.hasState(element, "selected")) {
+    return;
+  }
+  nodeStyleManager.initializeNode(element, node);
+  nodeStyleManager.resetToBase(element);
+  nodeStyleManager.setState(element, "hovered", false);
+}
+
 // src/interactions/create-node-hover.ts
-function createNodeHover(nodeSelection, hoverStyle) {
+var currentHoveredNode = null;
+var hoverTimerManager = new TimerManager();
+function createNodeHover(nodeSelection, hoverStyle, options) {
   const firstNode = nodeSelection.node();
   if (!firstNode) return;
+  const {
+    enableDebouncing = false,
+    enterDelay = 16,
+    // ~1 frame at 60fps
+    leaveDelay = 50
+    // Longer delay for smoother transitions
+  } = options || {};
   if (hoverStyle) {
-    nodeSelection.on("mouseenter.hover", function(_event, _node) {
+    nodeSelection.on("mouseenter.hover", function(_event, node) {
       const circle = this;
-      if (circle.dataset.selected === "true") {
-        return;
-      }
-      if (hoverStyle.stroke !== void 0) {
-        circle.style.stroke = hoverStyle.stroke;
-      }
-      if (hoverStyle.strokeWidth !== void 0) {
-        circle.style.strokeWidth = String(hoverStyle.strokeWidth);
-      }
-      if (hoverStyle.opacity !== void 0) {
-        circle.style.opacity = String(hoverStyle.opacity);
+      const applyHover = () => {
+        if (currentHoveredNode && currentHoveredNode.element !== circle) {
+          removeHoverStyles(currentHoveredNode.element, currentHoveredNode.node);
+          clearAllHoverLayers();
+        }
+        currentHoveredNode = { element: circle, node };
+        applyHoverStyles(circle, node, hoverStyle);
+      };
+      if (enableDebouncing) {
+        hoverTimerManager.clearTimer("hover-enter");
+        hoverTimerManager.clearTimer("hover-leave");
+        hoverTimerManager.debounce("hover-enter", applyHover, enterDelay);
+      } else {
+        applyHover();
       }
-    }).on("mouseleave.hover", function(_event, _node) {
+    }).on("mouseleave.hover", function(_event, node) {
       const circle = this;
-      clearAllHoverLayers();
-      if (circle.dataset.selected === "true") {
-        return;
+      const removeHover = () => {
+        if (currentHoveredNode?.element === circle) {
+          currentHoveredNode = null;
+          removeHoverStyles(circle, node);
+          clearAllHoverLayers();
+        }
+      };
+      if (enableDebouncing) {
+        hoverTimerManager.clearTimer("hover-enter");
+        hoverTimerManager.debounce("hover-leave", removeHover, leaveDelay);
+      } else {
+        removeHover();
       }
-      circle.style.stroke = "";
-      circle.style.strokeWidth = "";
-      circle.style.opacity = "";
     });
   }
   const svgElement = firstNode.ownerSVGElement;
@@ -5198,6 +5458,9 @@ function createNodeHover(nodeSelection, hoverStyle) {
     if (hoveredNodeElement.dataset.selected === "true") {
       return;
     }
+    if (!currentHoveredNode || currentHoveredNode.element !== hoveredNodeElement) {
+      return;
+    }
     clearAllHoverLayers();
     const hoverNodesLayer = root2.select('[data-layer="hover-nodes"]').node();
     if (hoverNodesLayer) {
@@ -5244,7 +5507,10 @@ function createNodeHover(nodeSelection, hoverStyle) {
       }
     });
   }).on("mouseleave.links", function(_event, _hoveredNode) {
-    clearAllHoverLayers();
+    const hoveredNodeElement = this;
+    if (currentHoveredNode?.element === hoveredNodeElement) {
+      clearAllHoverLayers();
+    }
   });
 }
 

package/dist/index.js

@@ -5085,34 +5085,294 @@ function createDragBehavior(simulation, onDragStart, canvasBounds) {
   });
 }
 
+// src/utils/node-style-manager.ts
+var NodeStyleManager = class {
+  styleStates = /* @__PURE__ */ new Map();
+  /**
+   * Initialize a node's style state by capturing its original styles
+   */
+  initializeNode(element, node) {
+    if (this.styleStates.has(element)) {
+      return;
+    }
+    const domBackup = {
+      stroke: element.getAttribute("stroke"),
+      strokeWidth: element.getAttribute("stroke-width"),
+      opacity: element.getAttribute("opacity"),
+      fill: element.getAttribute("fill")
+    };
+    const originalStyle = {
+      stroke: node.style?.stroke || void 0,
+      strokeWidth: node.style?.strokeWidth || void 0,
+      opacity: node.style?.opacity || void 0,
+      fill: node.style?.fill || void 0
+    };
+    this.styleStates.set(element, {
+      original: originalStyle,
+      current: { ...originalStyle },
+      domBackup
+    });
+  }
+  /**
+   * Apply temporary styles (e.g., hover effects) that will be reset later
+   */
+  applyTemporaryStyles(element, styles) {
+    this.applyStylesToDOM(element, styles);
+  }
+  /**
+   * Apply permanent styles that become the new base styles
+   */
+  applyPermanentStyles(element, styles) {
+    const state = this.styleStates.get(element);
+    if (!state) {
+      console.warn("[NodeStyleManager] Node not initialized, cannot apply permanent styles");
+      return;
+    }
+    this.applyStylesToDOM(element, styles);
+    Object.assign(state.current, styles);
+  }
+  /**
+   * Reset node to its current base styles (removes temporary styles)
+   */
+  resetToBase(element) {
+    const state = this.styleStates.get(element);
+    if (!state) {
+      this.clearAllStyles(element);
+      return;
+    }
+    this.clearAllStyles(element);
+    this.applyStylesToDOM(element, state.current);
+  }
+  /**
+   * Reset node to its original styles (as captured during initialization)
+   */
+  resetToOriginal(element) {
+    const state = this.styleStates.get(element);
+    if (!state) {
+      this.clearAllStyles(element);
+      return;
+    }
+    this.clearAllStyles(element);
+    this.restoreOriginalDOM(element, state.domBackup);
+    state.current = { ...state.original };
+  }
+  /**
+   * Check if node is in a specific state (selected, hovered, etc.)
+   */
+  hasState(element, stateName) {
+    return element.dataset[stateName] === "true";
+  }
+  /**
+   * Set state marker on node
+   */
+  setState(element, stateName, value) {
+    if (value) {
+      element.dataset[stateName] = "true";
+    } else {
+      delete element.dataset[stateName];
+    }
+  }
+  /**
+   * Get the original styles for a node
+   */
+  getOriginalStyles(element) {
+    const state = this.styleStates.get(element);
+    return state ? { ...state.original } : null;
+  }
+  /**
+   * Get the current base styles for a node
+   */
+  getCurrentStyles(element) {
+    const state = this.styleStates.get(element);
+    return state ? { ...state.current } : null;
+  }
+  /**
+   * Remove a node from management (cleanup)
+   */
+  removeNode(element) {
+    this.styleStates.delete(element);
+  }
+  /**
+   * Clear all managed nodes (for cleanup)
+   */
+  clear() {
+    this.styleStates.clear();
+  }
+  /**
+   * Private: Apply styles to DOM element
+   */
+  applyStylesToDOM(element, styles) {
+    if (styles.stroke !== void 0) {
+      if (styles.stroke === null || styles.stroke === "") {
+        element.removeAttribute("stroke");
+        element.style.stroke = "";
+      } else {
+        element.style.stroke = styles.stroke;
+      }
+    }
+    if (styles.strokeWidth !== void 0) {
+      if (styles.strokeWidth === null || styles.strokeWidth === 0) {
+        element.removeAttribute("stroke-width");
+        element.style.strokeWidth = "";
+      } else {
+        element.style.strokeWidth = String(styles.strokeWidth);
+      }
+    }
+    if (styles.opacity !== void 0) {
+      if (styles.opacity === null || styles.opacity === 1) {
+        element.removeAttribute("opacity");
+        element.style.opacity = "";
+      } else {
+        element.style.opacity = String(styles.opacity);
+      }
+    }
+    if (styles.fill !== void 0) {
+      if (styles.fill === null || styles.fill === "") {
+        element.removeAttribute("fill");
+        element.style.fill = "";
+      } else {
+        element.style.fill = styles.fill;
+      }
+    }
+    if (styles.radius !== void 0) {
+      if (styles.radius === null || styles.radius === 0) {
+        element.removeAttribute("r");
+        element.style.removeProperty("r");
+      } else {
+        element.setAttribute("r", String(styles.radius));
+      }
+    }
+  }
+  /**
+   * Private: Clear all inline styles and remove hover-related attributes
+   */
+  clearAllStyles(element) {
+    element.style.stroke = "";
+    element.style.strokeWidth = "";
+    element.style.opacity = "";
+    element.style.fill = "";
+    element.style.removeProperty("r");
+    this.removeIfHoverAttribute(element, "stroke");
+    this.removeIfHoverAttribute(element, "stroke-width");
+    this.removeIfHoverAttribute(element, "opacity");
+  }
+  /**
+   * Private: Restore original DOM attributes
+   */
+  restoreOriginalDOM(element, domBackup) {
+    if (domBackup.stroke !== void 0) {
+      if (domBackup.stroke === null) {
+        element.removeAttribute("stroke");
+      } else {
+        element.setAttribute("stroke", domBackup.stroke);
+      }
+    }
+    if (domBackup.strokeWidth !== void 0) {
+      if (domBackup.strokeWidth === null) {
+        element.removeAttribute("stroke-width");
+      } else {
+        element.setAttribute("stroke-width", domBackup.strokeWidth);
+      }
+    }
+    if (domBackup.opacity !== void 0) {
+      if (domBackup.opacity === null) {
+        element.removeAttribute("opacity");
+      } else {
+        element.setAttribute("opacity", domBackup.opacity);
+      }
+    }
+    if (domBackup.fill !== void 0) {
+      if (domBackup.fill === null) {
+        element.removeAttribute("fill");
+      } else {
+        element.setAttribute("fill", domBackup.fill);
+      }
+    }
+  }
+  /**
+   * Private: Remove attribute only if it looks like it was set by hover/interaction
+   */
+  removeIfHoverAttribute(element, attr) {
+    const value = element.getAttribute(attr);
+    if (!value) return;
+    const hoverPatterns = {
+      "stroke": ["#6366f1", "#8b5cf6", "#3b82f6", "#ffffff", "#fff", "white"],
+      // Common hover stroke colors
+      "stroke-width": ["2", "2.5", "3", "4"],
+      // Common hover stroke widths
+      "opacity": ["0.8", "0.9", "0.7"]
+      // Common hover opacity values
+    };
+    const patterns = hoverPatterns[attr];
+    if (patterns && patterns.includes(value)) {
+      element.removeAttribute(attr);
+    }
+  }
+};
+var nodeStyleManager = new NodeStyleManager();
+function applyHoverStyles(element, node, hoverStyle) {
+  if (nodeStyleManager.hasState(element, "selected")) {
+    return;
+  }
+  nodeStyleManager.initializeNode(element, node);
+  nodeStyleManager.applyTemporaryStyles(element, hoverStyle);
+  nodeStyleManager.setState(element, "hovered", true);
+}
+function removeHoverStyles(element, node) {
+  if (nodeStyleManager.hasState(element, "selected")) {
+    return;
+  }
+  nodeStyleManager.initializeNode(element, node);
+  nodeStyleManager.resetToBase(element);
+  nodeStyleManager.setState(element, "hovered", false);
+}
+
 // src/interactions/create-node-hover.ts
-function createNodeHover(nodeSelection, hoverStyle) {
+var currentHoveredNode = null;
+var hoverTimerManager = new TimerManager();
+function createNodeHover(nodeSelection, hoverStyle, options) {
   const firstNode = nodeSelection.node();
   if (!firstNode) return;
+  const {
+    enableDebouncing = false,
+    enterDelay = 16,
+    // ~1 frame at 60fps
+    leaveDelay = 50
+    // Longer delay for smoother transitions
+  } = options || {};
   if (hoverStyle) {
-    nodeSelection.on("mouseenter.hover", function(_event, _node) {
+    nodeSelection.on("mouseenter.hover", function(_event, node) {
       const circle = this;
-      if (circle.dataset.selected === "true") {
-        return;
-      }
-      if (hoverStyle.stroke !== void 0) {
-        circle.style.stroke = hoverStyle.stroke;
-      }
-      if (hoverStyle.strokeWidth !== void 0) {
-        circle.style.strokeWidth = String(hoverStyle.strokeWidth);
-      }
-      if (hoverStyle.opacity !== void 0) {
-        circle.style.opacity = String(hoverStyle.opacity);
+      const applyHover = () => {
+        if (currentHoveredNode && currentHoveredNode.element !== circle) {
+          removeHoverStyles(currentHoveredNode.element, currentHoveredNode.node);
+          clearAllHoverLayers();
+        }
+        currentHoveredNode = { element: circle, node };
+        applyHoverStyles(circle, node, hoverStyle);
+      };
+      if (enableDebouncing) {
+        hoverTimerManager.clearTimer("hover-enter");
+        hoverTimerManager.clearTimer("hover-leave");
+        hoverTimerManager.debounce("hover-enter", applyHover, enterDelay);
+      } else {
+        applyHover();
       }
-    }).on("mouseleave.hover", function(_event, _node) {
+    }).on("mouseleave.hover", function(_event, node) {
       const circle = this;
-      clearAllHoverLayers();
-      if (circle.dataset.selected === "true") {
-        return;
+      const removeHover = () => {
+        if (currentHoveredNode?.element === circle) {
+          currentHoveredNode = null;
+          removeHoverStyles(circle, node);
+          clearAllHoverLayers();
+        }
+      };
+      if (enableDebouncing) {
+        hoverTimerManager.clearTimer("hover-enter");
+        hoverTimerManager.debounce("hover-leave", removeHover, leaveDelay);
+      } else {
+        removeHover();
       }
-      circle.style.stroke = "";
-      circle.style.strokeWidth = "";
-      circle.style.opacity = "";
     });
   }
   const svgElement = firstNode.ownerSVGElement;
@@ -5166,6 +5426,9 @@ function createNodeHover(nodeSelection, hoverStyle) {
     if (hoveredNodeElement.dataset.selected === "true") {
       return;
     }
+    if (!currentHoveredNode || currentHoveredNode.element !== hoveredNodeElement) {
+      return;
+    }
     clearAllHoverLayers();
     const hoverNodesLayer = root2.select('[data-layer="hover-nodes"]').node();
     if (hoverNodesLayer) {
@@ -5212,7 +5475,10 @@ function createNodeHover(nodeSelection, hoverStyle) {
       }
     });
   }).on("mouseleave.links", function(_event, _hoveredNode) {
-    clearAllHoverLayers();
+    const hoveredNodeElement = this;
+    if (currentHoveredNode?.element === hoveredNodeElement) {
+      clearAllHoverLayers();
+    }
   });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polly-graph",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "Reusable D3-based graph visualization SDK with configurable nodes, links, labels, interactions, and layout behaviors.",
   "license": "MIT",
   "author": "Badal",