polly-graph 0.1.10 → 0.1.12

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

@@ -4816,7 +4816,17 @@ function renderLinks(ctx, links) {
 
 // src/renderer/nodes.ts
 function renderNodes(ctx, nodes) {
-  return ctx.root.select('[data-layer="nodes"]').selectAll("circle").data(nodes, (d) => d.id).join("circle").attr("r", (node) => node.style?.radius ?? 8).attr("fill", (node) => node.style?.fill ?? "#6c5ce7").attr("stroke", (node) => node.style?.stroke ?? "#ffffff").attr("stroke-width", (node) => node.style?.strokeWidth ?? 1.5).attr("opacity", (node) => node.style?.opacity ?? 1).style("cursor", "pointer");
+  return ctx.root.select('[data-layer="nodes"]').selectAll("circle").data(nodes, (d) => d.id).join("circle").attr("r", (node) => node.style?.radius ?? 8).attr("fill", (node) => node.style?.fill ?? "#6c5ce7").call((selection2) => {
+    selection2.each(function(node) {
+      const element = this;
+      if (node.style?.stroke !== void 0) {
+        element.setAttribute("stroke", node.style.stroke);
+      }
+      if (node.style?.strokeWidth !== void 0) {
+        element.setAttribute("stroke-width", String(node.style.strokeWidth));
+      }
+    });
+  }).attr("opacity", (node) => node.style?.opacity ?? 1).style("cursor", "pointer");
 }
 
 // src/renderer/node-labels.ts
@@ -5112,37 +5122,29 @@ function createNodeHover(nodeSelection, hoverStyle) {
   const firstNode = nodeSelection.node();
   if (!firstNode) return;
   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;
       }
-      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));
-    }).on("mouseleave.hover", function(_event, node) {
+      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);
+      }
+    }).on("mouseleave.hover", function(_event, _node) {
       const circle = this;
+      clearAllHoverLayers();
       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));
-      }
     });
   }
   const svgElement = firstNode.ownerSVGElement;
@@ -6128,18 +6130,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

@@ -4784,7 +4784,17 @@ function renderLinks(ctx, links) {
 
 // src/renderer/nodes.ts
 function renderNodes(ctx, nodes) {
-  return ctx.root.select('[data-layer="nodes"]').selectAll("circle").data(nodes, (d) => d.id).join("circle").attr("r", (node) => node.style?.radius ?? 8).attr("fill", (node) => node.style?.fill ?? "#6c5ce7").attr("stroke", (node) => node.style?.stroke ?? "#ffffff").attr("stroke-width", (node) => node.style?.strokeWidth ?? 1.5).attr("opacity", (node) => node.style?.opacity ?? 1).style("cursor", "pointer");
+  return ctx.root.select('[data-layer="nodes"]').selectAll("circle").data(nodes, (d) => d.id).join("circle").attr("r", (node) => node.style?.radius ?? 8).attr("fill", (node) => node.style?.fill ?? "#6c5ce7").call((selection2) => {
+    selection2.each(function(node) {
+      const element = this;
+      if (node.style?.stroke !== void 0) {
+        element.setAttribute("stroke", node.style.stroke);
+      }
+      if (node.style?.strokeWidth !== void 0) {
+        element.setAttribute("stroke-width", String(node.style.strokeWidth));
+      }
+    });
+  }).attr("opacity", (node) => node.style?.opacity ?? 1).style("cursor", "pointer");
 }
 
 // src/renderer/node-labels.ts
@@ -5080,37 +5090,29 @@ function createNodeHover(nodeSelection, hoverStyle) {
   const firstNode = nodeSelection.node();
   if (!firstNode) return;
   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;
       }
-      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));
-    }).on("mouseleave.hover", function(_event, node) {
+      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);
+      }
+    }).on("mouseleave.hover", function(_event, _node) {
       const circle = this;
+      clearAllHoverLayers();
       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));
-      }
     });
   }
   const svgElement = firstNode.ownerSVGElement;
@@ -6096,18 +6098,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.12",
   "description": "Reusable D3-based graph visualization SDK with configurable nodes, links, labels, interactions, and layout behaviors.",
   "license": "MIT",
   "author": "Badal",