polly-graph 0.1.10 → 0.1.11

package/README.md

@@ -1,5 +1,9 @@
 # polly-graph
 
+[![npm version](https://img.shields.io/npm/v/polly-graph)](https://www.npmjs.com/package/polly-graph)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
 A framework-independent TypeScript-based D3 graph visualization SDK that provides a comprehensive, reusable solution for creating interactive network graphs. Designed to work seamlessly across React, Angular, Vue, Svelte, or vanilla JavaScript applications.
 
 ## Features

package/dist/index.cjs

@@ -5107,6 +5107,258 @@ 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);
+}
+function applySelectionStyles(element, node, selectionStyle) {
+  nodeStyleManager.initializeNode(element, node);
+  nodeStyleManager.applyPermanentStyles(element, selectionStyle);
+  nodeStyleManager.setState(element, "selected", true);
+}
+function removeSelectionStyles(element, node) {
+  nodeStyleManager.initializeNode(element, node);
+  nodeStyleManager.resetToOriginal(element);
+  nodeStyleManager.setState(element, "selected", false);
+}
+
 // src/interactions/create-node-hover.ts
 function createNodeHover(nodeSelection, hoverStyle) {
   const firstNode = nodeSelection.node();
@@ -5114,35 +5366,10 @@ function createNodeHover(nodeSelection, hoverStyle) {
   if (hoverStyle) {
     nodeSelection.on("mouseenter.hover", function(_event, node) {
       const circle = this;
-      if (circle.dataset.selected === "true") {
-        return;
-      }
-      circle.setAttribute("stroke", hoverStyle.stroke ?? node.style?.stroke ?? "#ffffff");
-      circle.setAttribute("stroke-width", String(hoverStyle.strokeWidth ?? node.style?.strokeWidth ?? 1.5));
-      circle.setAttribute("opacity", String(hoverStyle.opacity ?? node.style?.opacity ?? 1));
+      applyHoverStyles(circle, node, hoverStyle);
     }).on("mouseleave.hover", function(_event, node) {
       const circle = this;
-      if (circle.dataset.selected === "true") {
-        return;
-      }
-      circle.style.stroke = "";
-      circle.style.strokeWidth = "";
-      circle.style.opacity = "";
-      if (!node.style?.stroke) {
-        circle.setAttribute("stroke", "#ffffff");
-      } else {
-        circle.setAttribute("stroke", node.style.stroke);
-      }
-      if (!node.style?.strokeWidth) {
-        circle.setAttribute("stroke-width", "1.5");
-      } else {
-        circle.setAttribute("stroke-width", String(node.style.strokeWidth));
-      }
-      if (!node.style?.opacity) {
-        circle.setAttribute("opacity", "1");
-      } else {
-        circle.setAttribute("opacity", String(node.style.opacity));
-      }
+      removeHoverStyles(circle, node);
     });
   }
   const svgElement = firstNode.ownerSVGElement;
@@ -5842,12 +6069,7 @@ var SelectionManager = class {
     this.clearSelection();
     this.bringNodeToFront(nodeElement, nodeData);
     if (this.config.nodeStyle) {
-      const style = this.config.nodeStyle;
-      if (style.fill !== void 0) nodeElement.style.fill = style.fill;
-      if (style.stroke !== void 0) nodeElement.style.stroke = style.stroke;
-      if (style.strokeWidth !== void 0) nodeElement.style.strokeWidth = String(style.strokeWidth);
-      if (style.opacity !== void 0) nodeElement.style.opacity = String(style.opacity);
-      if (style.radius !== void 0) nodeElement.style.setProperty("r", String(style.radius));
+      applySelectionStyles(nodeElement, nodeData, this.config.nodeStyle);
     }
     this.root.selectAll(".link-label").filter((item) => {
       if (item.style.label.visibility !== "hover") return false;
@@ -5898,12 +6120,7 @@ var SelectionManager = class {
     if (!this.state.selectedNode) return;
     const { element, data } = this.state.selectedNode;
     this.restoreSelectedElements(data);
-    element.style.fill = "";
-    element.style.stroke = "";
-    element.style.strokeWidth = "";
-    element.style.opacity = "";
-    element.style.removeProperty("r");
-    delete element.dataset.selected;
+    removeSelectionStyles(element, data);
     this.root.selectAll(".link-label.label-selection-pinned").classed("label-selection-pinned", false).interrupt().transition().duration(200).style("opacity", 0).style("pointer-events", "none");
     this.state.selectedNode = null;
     this.eventEmitter.emit("nodeDeselect", { node: data, element });
@@ -6128,18 +6345,42 @@ var DEFAULT_NODE_HOVER_STYLE = {
 };
 function resolveNodeStyle(params) {
   if (params.isSelected) {
-    return mergeNodeStyle(DEFAULT_NODE_HOVER_STYLE, params.interaction?.selection?.nodeStyle);
+    return mergeNodeStyleSmart(DEFAULT_NODE_HOVER_STYLE, params.interaction?.selection?.nodeStyle);
   }
   if (params.isHovered) {
-    return mergeNodeStyle(DEFAULT_NODE_HOVER_STYLE, params.interaction?.hover?.nodeStyle);
+    return mergeNodeStyleSmart(DEFAULT_NODE_HOVER_STYLE, params.interaction?.hover?.nodeStyle);
   }
   return void 0;
 }
-function mergeNodeStyle(base, override) {
-  return {
-    ...base,
-    ...override
-  };
+function mergeNodeStyleSmart(base, override) {
+  if (!override) return base;
+  const result = { ...override };
+  if (override.strokeWidth !== void 0 && override.stroke === void 0 && base.stroke !== void 0) {
+    result.stroke = base.stroke;
+  }
+  const baseKeys = Object.keys(base);
+  baseKeys.forEach((key) => {
+    if (key !== "stroke" && override[key] === void 0 && base[key] !== void 0) {
+      switch (key) {
+        case "fill":
+          result.fill = base.fill;
+          break;
+        case "strokeWidth":
+          result.strokeWidth = base.strokeWidth;
+          break;
+        case "opacity":
+          result.opacity = base.opacity;
+          break;
+        case "radius":
+          result.radius = base.radius;
+          break;
+        case "textColor":
+          result.textColor = base.textColor;
+          break;
+      }
+    }
+  });
+  return result;
 }
 
 // src/core/interaction-manager.ts

package/dist/index.js

@@ -5075,6 +5075,258 @@ 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);
+}
+function applySelectionStyles(element, node, selectionStyle) {
+  nodeStyleManager.initializeNode(element, node);
+  nodeStyleManager.applyPermanentStyles(element, selectionStyle);
+  nodeStyleManager.setState(element, "selected", true);
+}
+function removeSelectionStyles(element, node) {
+  nodeStyleManager.initializeNode(element, node);
+  nodeStyleManager.resetToOriginal(element);
+  nodeStyleManager.setState(element, "selected", false);
+}
+
 // src/interactions/create-node-hover.ts
 function createNodeHover(nodeSelection, hoverStyle) {
   const firstNode = nodeSelection.node();
@@ -5082,35 +5334,10 @@ function createNodeHover(nodeSelection, hoverStyle) {
   if (hoverStyle) {
     nodeSelection.on("mouseenter.hover", function(_event, node) {
       const circle = this;
-      if (circle.dataset.selected === "true") {
-        return;
-      }
-      circle.setAttribute("stroke", hoverStyle.stroke ?? node.style?.stroke ?? "#ffffff");
-      circle.setAttribute("stroke-width", String(hoverStyle.strokeWidth ?? node.style?.strokeWidth ?? 1.5));
-      circle.setAttribute("opacity", String(hoverStyle.opacity ?? node.style?.opacity ?? 1));
+      applyHoverStyles(circle, node, hoverStyle);
     }).on("mouseleave.hover", function(_event, node) {
       const circle = this;
-      if (circle.dataset.selected === "true") {
-        return;
-      }
-      circle.style.stroke = "";
-      circle.style.strokeWidth = "";
-      circle.style.opacity = "";
-      if (!node.style?.stroke) {
-        circle.setAttribute("stroke", "#ffffff");
-      } else {
-        circle.setAttribute("stroke", node.style.stroke);
-      }
-      if (!node.style?.strokeWidth) {
-        circle.setAttribute("stroke-width", "1.5");
-      } else {
-        circle.setAttribute("stroke-width", String(node.style.strokeWidth));
-      }
-      if (!node.style?.opacity) {
-        circle.setAttribute("opacity", "1");
-      } else {
-        circle.setAttribute("opacity", String(node.style.opacity));
-      }
+      removeHoverStyles(circle, node);
     });
   }
   const svgElement = firstNode.ownerSVGElement;
@@ -5810,12 +6037,7 @@ var SelectionManager = class {
     this.clearSelection();
     this.bringNodeToFront(nodeElement, nodeData);
     if (this.config.nodeStyle) {
-      const style = this.config.nodeStyle;
-      if (style.fill !== void 0) nodeElement.style.fill = style.fill;
-      if (style.stroke !== void 0) nodeElement.style.stroke = style.stroke;
-      if (style.strokeWidth !== void 0) nodeElement.style.strokeWidth = String(style.strokeWidth);
-      if (style.opacity !== void 0) nodeElement.style.opacity = String(style.opacity);
-      if (style.radius !== void 0) nodeElement.style.setProperty("r", String(style.radius));
+      applySelectionStyles(nodeElement, nodeData, this.config.nodeStyle);
     }
     this.root.selectAll(".link-label").filter((item) => {
       if (item.style.label.visibility !== "hover") return false;
@@ -5866,12 +6088,7 @@ var SelectionManager = class {
     if (!this.state.selectedNode) return;
     const { element, data } = this.state.selectedNode;
     this.restoreSelectedElements(data);
-    element.style.fill = "";
-    element.style.stroke = "";
-    element.style.strokeWidth = "";
-    element.style.opacity = "";
-    element.style.removeProperty("r");
-    delete element.dataset.selected;
+    removeSelectionStyles(element, data);
     this.root.selectAll(".link-label.label-selection-pinned").classed("label-selection-pinned", false).interrupt().transition().duration(200).style("opacity", 0).style("pointer-events", "none");
     this.state.selectedNode = null;
     this.eventEmitter.emit("nodeDeselect", { node: data, element });
@@ -6096,18 +6313,42 @@ var DEFAULT_NODE_HOVER_STYLE = {
 };
 function resolveNodeStyle(params) {
   if (params.isSelected) {
-    return mergeNodeStyle(DEFAULT_NODE_HOVER_STYLE, params.interaction?.selection?.nodeStyle);
+    return mergeNodeStyleSmart(DEFAULT_NODE_HOVER_STYLE, params.interaction?.selection?.nodeStyle);
   }
   if (params.isHovered) {
-    return mergeNodeStyle(DEFAULT_NODE_HOVER_STYLE, params.interaction?.hover?.nodeStyle);
+    return mergeNodeStyleSmart(DEFAULT_NODE_HOVER_STYLE, params.interaction?.hover?.nodeStyle);
   }
   return void 0;
 }
-function mergeNodeStyle(base, override) {
-  return {
-    ...base,
-    ...override
-  };
+function mergeNodeStyleSmart(base, override) {
+  if (!override) return base;
+  const result = { ...override };
+  if (override.strokeWidth !== void 0 && override.stroke === void 0 && base.stroke !== void 0) {
+    result.stroke = base.stroke;
+  }
+  const baseKeys = Object.keys(base);
+  baseKeys.forEach((key) => {
+    if (key !== "stroke" && override[key] === void 0 && base[key] !== void 0) {
+      switch (key) {
+        case "fill":
+          result.fill = base.fill;
+          break;
+        case "strokeWidth":
+          result.strokeWidth = base.strokeWidth;
+          break;
+        case "opacity":
+          result.opacity = base.opacity;
+          break;
+        case "radius":
+          result.radius = base.radius;
+          break;
+        case "textColor":
+          result.textColor = base.textColor;
+          break;
+      }
+    }
+  });
+  return result;
 }
 
 // src/core/interaction-manager.ts

package/package.json

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