polly-graph 0.1.14 → 0.1.15

package/dist/index.cjs

@@ -4868,10 +4868,7 @@ function renderLinkLabels(params, links) {
   const labelSelection = params.root.select('[data-layer="link-labels"]').selectAll(".link-label").data(renderableLinks, (item) => getLinkKey2(item.link)).join("g").attr("class", "link-label").style("opacity", (item) => {
     const visibility = item.style.label.visibility ?? "always";
     return visibility === "always" ? 1 : 0;
-  }).style("pointer-events", (item) => {
-    const visibility = item.style.label.visibility ?? "always";
-    return visibility === "always" ? "auto" : "none";
-  }).style("cursor", "pointer");
+  }).style("pointer-events", "none").style("cursor", "pointer");
   labelSelection.selectAll("rect").data((item) => [item]).join("rect").attr("rx", (item) => item.style.label.borderRadius).attr("ry", (item) => item.style.label.borderRadius).attr("fill", (item) => item.style.label.backgroundFill).attr("stroke", (item) => item.style.label.borderColor).attr("stroke-width", (item) => item.style.label.borderWidth);
   const textSelection = labelSelection.selectAll("text").data((item) => [item]).join("text").attr("text-anchor", "middle").attr("dominant-baseline", "middle").attr("font-size", (item) => item.style.label.fontSize).attr("fill", (item) => item.style.label.textColor).text((item) => item.link.label ?? "");
   textSelection.each(function(item) {
@@ -5579,7 +5576,7 @@ function createLinkHover(linkSelection, hoverStyle) {
       }
     }
     const labelSelection2 = root2.select('[data-layer="link-labels"]').selectAll(".link-label");
-    labelSelection2.filter((item) => item.link === renderableLink.link && item.style.label.visibility === "hover").style("opacity", 1).style("pointer-events", "auto");
+    labelSelection2.filter((item) => item.link === renderableLink.link && item.style.label.visibility === "hover").style("opacity", 1);
   }).on("mouseleave.hover", function(_event, renderableLink) {
     const hoveredElement = this;
     let targetLinkElement;
@@ -5876,7 +5873,47 @@ function getDefaultContent(node) {
 
 // src/utils/node-link-selection.utils.ts
 function createLinkHitArea(root2, linkSelection) {
-  return root2.select('[data-layer="links"]').selectAll("line.link-hit-area").data(linkSelection.data()).join("line").attr("class", "link-hit-area").attr("stroke", "rgba(0,0,0,0)").attr("stroke-width", (item) => item.style.arrow.size * 4).style("pointer-events", "stroke").style("cursor", "pointer").attr("opacity", 0);
+  return root2.select('[data-layer="links"]').selectAll("rect.link-hit-area").data(linkSelection.data()).join("rect").attr("class", "link-hit-area").attr("fill", "rgba(0,0,0,0)").style("pointer-events", "fill").style("cursor", "pointer").attr("opacity", 0).each(function(item) {
+    const rectElement = this;
+    updateHitAreaDimensions(rectElement, item, root2);
+  });
+}
+function updateHitAreaDimensions(rectElement, item, root2) {
+  const source = item.link.source;
+  const target = item.link.target;
+  if (!source.x || !source.y || !target.x || !target.y) return;
+  const midX = (source.x + target.x) / 2;
+  const midY = (source.y + target.y) / 2;
+  const linkPadding = Math.max(item.style.strokeWidth || 2, item.style.arrow.size) * 2;
+  let width = linkPadding;
+  let height = linkPadding;
+  if (item.link.label) {
+    const labelElement = root2.select('[data-layer="link-labels"]').selectAll(".link-label").filter((labelItem) => labelItem.link === item.link).node();
+    if (labelElement) {
+      try {
+        const textElement = labelElement.querySelector("text");
+        const rectElement2 = labelElement.querySelector("rect");
+        if (textElement && rectElement2) {
+          const bbox = textElement.getBBox();
+          const labelWidth = bbox.width + item.style.label.paddingX * 2;
+          const labelHeight = bbox.height + item.style.label.paddingY * 2;
+          width = Math.max(width, labelWidth + 10);
+          height = Math.max(height, labelHeight + 10);
+        }
+      } catch {
+        const text = item.link.label ?? "";
+        const fontSize = item.style.label.fontSize;
+        const estimatedWidth = text.length * fontSize * 0.6 + item.style.label.paddingX * 2 + 10;
+        const estimatedHeight = fontSize + item.style.label.paddingY * 2 + 10;
+        width = Math.max(width, estimatedWidth);
+        height = Math.max(height, estimatedHeight);
+      }
+    }
+  }
+  rectElement.setAttribute("x", String(midX - width / 2));
+  rectElement.setAttribute("y", String(midY - height / 2));
+  rectElement.setAttribute("width", String(width));
+  rectElement.setAttribute("height", String(height));
 }
 
 // src/utils/get-link-target-point.ts
@@ -6588,7 +6625,18 @@ var InteractionManager = class {
       }
       if (this.manager.simulation) {
         this.manager.simulation.on("tick.hitarea", () => {
-          linkHitAreaSelection.attr("x1", (item) => item.link.source.x ?? 0).attr("y1", (item) => item.link.source.y ?? 0).attr("x2", (item) => item.link.target.x ?? 0).attr("y2", (item) => item.link.target.y ?? 0);
+          linkHitAreaSelection.each(function(item) {
+            const source = item.link.source;
+            const target = item.link.target;
+            if (!source.x || !source.y || !target.x || !target.y) return;
+            const rectElement = this;
+            const midX = (source.x + target.x) / 2;
+            const midY = (source.y + target.y) / 2;
+            const width = parseFloat(rectElement.getAttribute("width") || "20");
+            const height = parseFloat(rectElement.getAttribute("height") || "20");
+            rectElement.setAttribute("x", String(midX - width / 2));
+            rectElement.setAttribute("y", String(midY - height / 2));
+          });
         });
       }
       if (this.manager.selectionManager) {

package/dist/index.js

@@ -4836,10 +4836,7 @@ function renderLinkLabels(params, links) {
   const labelSelection = params.root.select('[data-layer="link-labels"]').selectAll(".link-label").data(renderableLinks, (item) => getLinkKey2(item.link)).join("g").attr("class", "link-label").style("opacity", (item) => {
     const visibility = item.style.label.visibility ?? "always";
     return visibility === "always" ? 1 : 0;
-  }).style("pointer-events", (item) => {
-    const visibility = item.style.label.visibility ?? "always";
-    return visibility === "always" ? "auto" : "none";
-  }).style("cursor", "pointer");
+  }).style("pointer-events", "none").style("cursor", "pointer");
   labelSelection.selectAll("rect").data((item) => [item]).join("rect").attr("rx", (item) => item.style.label.borderRadius).attr("ry", (item) => item.style.label.borderRadius).attr("fill", (item) => item.style.label.backgroundFill).attr("stroke", (item) => item.style.label.borderColor).attr("stroke-width", (item) => item.style.label.borderWidth);
   const textSelection = labelSelection.selectAll("text").data((item) => [item]).join("text").attr("text-anchor", "middle").attr("dominant-baseline", "middle").attr("font-size", (item) => item.style.label.fontSize).attr("fill", (item) => item.style.label.textColor).text((item) => item.link.label ?? "");
   textSelection.each(function(item) {
@@ -5547,7 +5544,7 @@ function createLinkHover(linkSelection, hoverStyle) {
       }
     }
     const labelSelection2 = root2.select('[data-layer="link-labels"]').selectAll(".link-label");
-    labelSelection2.filter((item) => item.link === renderableLink.link && item.style.label.visibility === "hover").style("opacity", 1).style("pointer-events", "auto");
+    labelSelection2.filter((item) => item.link === renderableLink.link && item.style.label.visibility === "hover").style("opacity", 1);
   }).on("mouseleave.hover", function(_event, renderableLink) {
     const hoveredElement = this;
     let targetLinkElement;
@@ -5844,7 +5841,47 @@ function getDefaultContent(node) {
 
 // src/utils/node-link-selection.utils.ts
 function createLinkHitArea(root2, linkSelection) {
-  return root2.select('[data-layer="links"]').selectAll("line.link-hit-area").data(linkSelection.data()).join("line").attr("class", "link-hit-area").attr("stroke", "rgba(0,0,0,0)").attr("stroke-width", (item) => item.style.arrow.size * 4).style("pointer-events", "stroke").style("cursor", "pointer").attr("opacity", 0);
+  return root2.select('[data-layer="links"]').selectAll("rect.link-hit-area").data(linkSelection.data()).join("rect").attr("class", "link-hit-area").attr("fill", "rgba(0,0,0,0)").style("pointer-events", "fill").style("cursor", "pointer").attr("opacity", 0).each(function(item) {
+    const rectElement = this;
+    updateHitAreaDimensions(rectElement, item, root2);
+  });
+}
+function updateHitAreaDimensions(rectElement, item, root2) {
+  const source = item.link.source;
+  const target = item.link.target;
+  if (!source.x || !source.y || !target.x || !target.y) return;
+  const midX = (source.x + target.x) / 2;
+  const midY = (source.y + target.y) / 2;
+  const linkPadding = Math.max(item.style.strokeWidth || 2, item.style.arrow.size) * 2;
+  let width = linkPadding;
+  let height = linkPadding;
+  if (item.link.label) {
+    const labelElement = root2.select('[data-layer="link-labels"]').selectAll(".link-label").filter((labelItem) => labelItem.link === item.link).node();
+    if (labelElement) {
+      try {
+        const textElement = labelElement.querySelector("text");
+        const rectElement2 = labelElement.querySelector("rect");
+        if (textElement && rectElement2) {
+          const bbox = textElement.getBBox();
+          const labelWidth = bbox.width + item.style.label.paddingX * 2;
+          const labelHeight = bbox.height + item.style.label.paddingY * 2;
+          width = Math.max(width, labelWidth + 10);
+          height = Math.max(height, labelHeight + 10);
+        }
+      } catch {
+        const text = item.link.label ?? "";
+        const fontSize = item.style.label.fontSize;
+        const estimatedWidth = text.length * fontSize * 0.6 + item.style.label.paddingX * 2 + 10;
+        const estimatedHeight = fontSize + item.style.label.paddingY * 2 + 10;
+        width = Math.max(width, estimatedWidth);
+        height = Math.max(height, estimatedHeight);
+      }
+    }
+  }
+  rectElement.setAttribute("x", String(midX - width / 2));
+  rectElement.setAttribute("y", String(midY - height / 2));
+  rectElement.setAttribute("width", String(width));
+  rectElement.setAttribute("height", String(height));
 }
 
 // src/utils/get-link-target-point.ts
@@ -6556,7 +6593,18 @@ var InteractionManager = class {
       }
       if (this.manager.simulation) {
         this.manager.simulation.on("tick.hitarea", () => {
-          linkHitAreaSelection.attr("x1", (item) => item.link.source.x ?? 0).attr("y1", (item) => item.link.source.y ?? 0).attr("x2", (item) => item.link.target.x ?? 0).attr("y2", (item) => item.link.target.y ?? 0);
+          linkHitAreaSelection.each(function(item) {
+            const source = item.link.source;
+            const target = item.link.target;
+            if (!source.x || !source.y || !target.x || !target.y) return;
+            const rectElement = this;
+            const midX = (source.x + target.x) / 2;
+            const midY = (source.y + target.y) / 2;
+            const width = parseFloat(rectElement.getAttribute("width") || "20");
+            const height = parseFloat(rectElement.getAttribute("height") || "20");
+            rectElement.setAttribute("x", String(midX - width / 2));
+            rectElement.setAttribute("y", String(midY - height / 2));
+          });
         });
       }
       if (this.manager.selectionManager) {

package/package.json

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