polly-graph 0.1.14 → 0.1.16

package/dist/index.cjs

@@ -4761,7 +4761,18 @@ function getShortenedSourcePoint(link, style) {
   const dx = targetX - sourceX;
   const dy = targetY - sourceY;
   const distance = Math.sqrt(dx * dx + dy * dy) || 1;
-  const sourceRadius = source.style?.radius ?? 12;
+  let sourceRadius = source.style?.radius ?? 12;
+  if (typeof document !== "undefined") {
+    const circles = Array.from(document.querySelectorAll("circle"));
+    for (const circle of circles) {
+      const boundData = circle.__data__;
+      if (boundData && boundData.id === source.id) {
+        const currentRadius = parseFloat(circle.getAttribute("r") || "12");
+        sourceRadius = currentRadius;
+        break;
+      }
+    }
+  }
   const sourceStrokeWidth = source.style?.strokeWidth ?? 1.5;
   const linkStrokeCompensation = style.strokeWidth / 2;
   const nodeStrokeOffset = sourceStrokeWidth / 2;
@@ -4782,7 +4793,18 @@ function getShortenedTargetPoint(link, style) {
   const dx = targetX - sourceX;
   const dy = targetY - sourceY;
   const distance = Math.sqrt(dx * dx + dy * dy) || 1;
-  const targetRadius = target.style?.radius ?? 12;
+  let targetRadius = target.style?.radius ?? 12;
+  if (typeof document !== "undefined") {
+    const circles = Array.from(document.querySelectorAll("circle"));
+    for (const circle of circles) {
+      const boundData = circle.__data__;
+      if (boundData && boundData.id === target.id) {
+        const currentRadius = parseFloat(circle.getAttribute("r") || "12");
+        targetRadius = currentRadius;
+        break;
+      }
+    }
+  }
   const targetStrokeWidth = target.style?.strokeWidth ?? 1.5;
   const arrowLength = style.arrow.enabled ? style.arrow.size * 2 : 0;
   const linkStrokeCompensation = style.strokeWidth / 2;
@@ -4868,10 +4890,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) {
@@ -5410,48 +5429,38 @@ function createNodeHover(nodeSelection, hoverStyle, options) {
   const svgElement = firstNode.ownerSVGElement;
   if (!svgElement) return;
   const root2 = select_default2(svgElement);
+  const elevatedElements = /* @__PURE__ */ new Set();
   function clearAllHoverLayers() {
-    const hoverNodesLayer = root2.select('[data-layer="hover-nodes"]').node();
-    const nodesLayer = root2.select('[data-layer="nodes"]').node();
-    if (hoverNodesLayer && nodesLayer) {
-      while (hoverNodesLayer.firstChild) {
-        nodesLayer.appendChild(hoverNodesLayer.firstChild);
-      }
-    }
-    const hoverNodeLabelsLayer = root2.select('[data-layer="hover-node-labels"]').node();
-    const nodeLabelsLayer = root2.select('[data-layer="node-labels"]').node();
-    if (hoverNodeLabelsLayer && nodeLabelsLayer) {
-      while (hoverNodeLabelsLayer.firstChild) {
-        nodeLabelsLayer.appendChild(hoverNodeLabelsLayer.firstChild);
-      }
-    }
-    const hoverLinksLayer = root2.select('[data-layer="hover-links"]').node();
-    const linksLayer = root2.select('[data-layer="links"]').node();
-    if (hoverLinksLayer && linksLayer) {
-      while (hoverLinksLayer.firstChild) {
-        const linkElement = hoverLinksLayer.firstChild;
-        linksLayer.appendChild(linkElement);
-        const event = new MouseEvent("mouseleave", {
-          bubbles: true,
-          cancelable: false,
-          view: window
-        });
-        linkElement.dispatchEvent(event);
-      }
-    }
-    const hoverLinkLabelsLayer = root2.select('[data-layer="hover-link-labels"]').node();
-    const linkLabelsLayer = root2.select('[data-layer="link-labels"]').node();
-    if (hoverLinkLabelsLayer && linkLabelsLayer) {
-      while (hoverLinkLabelsLayer.firstChild) {
-        const labelElement = hoverLinkLabelsLayer.firstChild;
-        const labelData = labelElement.__data__;
-        if (labelData && labelData.style.label.visibility === "hover" && !labelElement.classList.contains("label-selection-pinned")) {
-          labelElement.style.opacity = "0";
-          labelElement.style.pointerEvents = "none";
+    elevatedElements.forEach((element) => {
+      element.classList.remove("pg-hover-elevated");
+      element.style.removeProperty("filter");
+      if (element.tagName === "circle") {
+        element.removeAttribute("data-hover-elevated");
+      }
+      if (element.classList.contains("link-label")) {
+        const labelData = element.__data__;
+        if (labelData && labelData.style.label.visibility === "hover" && !element.classList.contains("label-selection-pinned")) {
+          element.style.opacity = "0";
+          element.style.pointerEvents = "none";
         }
-        linkLabelsLayer.appendChild(labelElement);
       }
-    }
+    });
+    elevatedElements.clear();
+    root2.selectAll("line[data-hover-elevated]").each(function() {
+      const linkElement = this;
+      linkElement.removeAttribute("data-hover-elevated");
+      const event = new MouseEvent("mouseleave", {
+        bubbles: true,
+        cancelable: false,
+        view: window
+      });
+      linkElement.dispatchEvent(event);
+    });
+  }
+  function elevateElement(element) {
+    element.classList.add("pg-hover-elevated");
+    element.style.filter = "drop-shadow(0 2px 4px rgba(0,0,0,0.15))";
+    elevatedElements.add(element);
   }
   nodeSelection.on("mouseenter.links", function(_event, hoveredNode) {
     const hoveredNodeElement = this;
@@ -5462,16 +5471,11 @@ function createNodeHover(nodeSelection, hoverStyle, options) {
       return;
     }
     clearAllHoverLayers();
-    const hoverNodesLayer = root2.select('[data-layer="hover-nodes"]').node();
-    if (hoverNodesLayer) {
-      hoverNodesLayer.appendChild(hoveredNodeElement);
-    }
+    elevateElement(hoveredNodeElement);
+    hoveredNodeElement.setAttribute("data-hover-elevated", "true");
     root2.selectAll("text").filter((d) => d.id === hoveredNode.id).each(function() {
       const labelElement = this;
-      const hoverNodeLabelsLayer = root2.select('[data-layer="hover-node-labels"]').node();
-      if (hoverNodeLabelsLayer) {
-        hoverNodeLabelsLayer.appendChild(labelElement);
-      }
+      elevateElement(labelElement);
     });
     const connectedLinks = root2.selectAll("line:not(.link-hit-area)").filter((renderableLink) => {
       const source = renderableLink.link.source;
@@ -5480,10 +5484,8 @@ function createNodeHover(nodeSelection, hoverStyle, options) {
     });
     connectedLinks.each(function(_renderableLink) {
       const linkElement = this;
-      const hoverLinksLayer = root2.select('[data-layer="hover-links"]').node();
-      if (hoverLinksLayer) {
-        hoverLinksLayer.appendChild(linkElement);
-      }
+      elevateElement(linkElement);
+      linkElement.setAttribute("data-hover-elevated", "true");
       const event = new MouseEvent("mouseenter", {
         bubbles: true,
         cancelable: false,
@@ -5497,13 +5499,10 @@ function createNodeHover(nodeSelection, hoverStyle, options) {
       return source.id === hoveredNode.id || target.id === hoveredNode.id;
     }).each(function(item) {
       const labelElement = this;
-      const hoverLinkLabelsLayer = root2.select('[data-layer="hover-link-labels"]').node();
-      if (hoverLinkLabelsLayer) {
-        hoverLinkLabelsLayer.appendChild(labelElement);
-        if (item.style.label.visibility === "hover") {
-          labelElement.style.opacity = "1";
-          labelElement.style.pointerEvents = "auto";
-        }
+      elevateElement(labelElement);
+      if (item.style.label.visibility === "hover") {
+        labelElement.style.opacity = "1";
+        labelElement.style.pointerEvents = "auto";
       }
     });
   }).on("mouseleave.links", function(_event, _hoveredNode) {
@@ -5579,7 +5578,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 +5875,55 @@ 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 dx = target.x - source.x;
+  const dy = target.y - source.y;
+  const linkLength = Math.sqrt(dx * dx + dy * dy);
+  const angle = Math.atan2(dy, dx);
+  const midX = (source.x + target.x) / 2;
+  const midY = (source.y + target.y) / 2;
+  const thickness = Math.max((item.style.strokeWidth || 2) * 4, item.style.arrow.size * 2, 20);
+  let length = linkLength + item.style.arrow.size * 2;
+  let width = thickness;
+  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, labelHeight + 10);
+          length = Math.max(length, labelWidth + 20);
+        }
+      } catch {
+        const text = item.link.label ?? "";
+        const fontSize = item.style.label.fontSize;
+        const estimatedWidth = text.length * fontSize * 0.6 + item.style.label.paddingX * 2 + 20;
+        const estimatedHeight = fontSize + item.style.label.paddingY * 2 + 10;
+        width = Math.max(width, estimatedHeight);
+        length = Math.max(length, estimatedWidth);
+      }
+    }
+  }
+  const rectX = midX - length / 2;
+  const rectY = midY - width / 2;
+  rectElement.setAttribute("width", String(length));
+  rectElement.setAttribute("height", String(width));
+  rectElement.setAttribute("x", String(rectX));
+  rectElement.setAttribute("y", String(rectY));
+  const degrees2 = angle * 180 / Math.PI;
+  rectElement.setAttribute("transform", `rotate(${degrees2}, ${midX}, ${midY})`);
 }
 
 // src/utils/get-link-target-point.ts
@@ -6115,7 +6162,10 @@ var SelectionManager = class {
       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.setAttribute("r", String(style.radius));
+      if (style.radius !== void 0) {
+        nodeElement.setAttribute("r", String(style.radius));
+        this.updateConnectedLinkPositions(nodeData);
+      }
     }
     this.root.selectAll(".link-label").filter((item) => {
       if (item.style.label.visibility !== "hover") return false;
@@ -6172,6 +6222,7 @@ var SelectionManager = class {
     element.style.opacity = "";
     const originalRadius = data.style?.radius ?? 8;
     element.setAttribute("r", String(originalRadius));
+    this.updateConnectedLinkPositions(data);
     delete element.dataset.selected;
     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;
@@ -6184,7 +6235,7 @@ var SelectionManager = class {
     if (!this.state.selectedLink) return;
     const { element, data, originalMarker } = this.state.selectedLink;
     this.layers.links.appendChild(element);
-    this.root.selectAll(".link-label").filter((item) => item.link === data).each((d, i, nodes) => {
+    this.root.selectAll(".link-label").filter((item) => item.link === data).each((_, i, nodes) => {
       const element2 = nodes[i];
       if (element2) {
         this.layers.linkLabels.appendChild(element2);
@@ -6254,13 +6305,13 @@ var SelectionManager = class {
       const target = d.link.target;
       return source.id === nodeData.id || target.id === nodeData.id;
     });
-    connectedLinks.each((d, i, nodes) => {
+    connectedLinks.each((_, i, nodes) => {
       const element = nodes[i];
       if (element) {
         this.layers.selectionLayer.links.appendChild(element);
       }
     });
-    this.root.selectAll("text").filter((d) => d.id === nodeData.id).each((d, i, nodes) => {
+    this.root.selectAll("text").filter((d) => d.id === nodeData.id).each((_, i, nodes) => {
       const element = nodes[i];
       if (element) {
         this.layers.selectionLayer.nodeLabels.appendChild(element);
@@ -6270,7 +6321,7 @@ var SelectionManager = class {
       const source = item.link.source;
       const target = item.link.target;
       return source.id === nodeData.id || target.id === nodeData.id;
-    }).each((d, i, nodes) => {
+    }).each((_, i, nodes) => {
       const element = nodes[i];
       if (element) {
         this.layers.selectionLayer.linkLabels.appendChild(element);
@@ -6282,7 +6333,7 @@ var SelectionManager = class {
    */
   bringLinkToFront(linkElement, renderableLink) {
     this.layers.selectionLayer.links.appendChild(linkElement);
-    this.root.selectAll(".link-label").filter((item) => item.link === renderableLink.link).each((d, i, nodes) => {
+    this.root.selectAll(".link-label").filter((item) => item.link === renderableLink.link).each((_, i, nodes) => {
       const element = nodes[i];
       if (element) {
         this.layers.selectionLayer.linkLabels.appendChild(element);
@@ -6293,7 +6344,7 @@ var SelectionManager = class {
    * Restore elements back to their original layers
    */
   restoreSelectedElements(nodeData) {
-    this.root.selectAll("circle").filter((d) => d.id === nodeData.id).each((d, i, nodes) => {
+    this.root.selectAll("circle").filter((d) => d.id === nodeData.id).each((_, i, nodes) => {
       const element = nodes[i];
       if (element) {
         this.layers.nodes.appendChild(element);
@@ -6303,13 +6354,13 @@ var SelectionManager = class {
       const source = d.link.source;
       const target = d.link.target;
       return source.id === nodeData.id || target.id === nodeData.id;
-    }).each((d, i, nodes) => {
+    }).each((_, i, nodes) => {
       const element = nodes[i];
       if (element) {
         this.layers.links.appendChild(element);
       }
     });
-    this.root.selectAll("text").filter((d) => d.id === nodeData.id).each((d, i, nodes) => {
+    this.root.selectAll("text").filter((d) => d.id === nodeData.id).each((_, i, nodes) => {
       const element = nodes[i];
       if (element) {
         this.layers.nodeLabels.appendChild(element);
@@ -6319,22 +6370,13 @@ var SelectionManager = class {
       const source = item.link.source;
       const target = item.link.target;
       return source.id === nodeData.id || target.id === nodeData.id;
-    }).each((d, i, nodes) => {
+    }).each((_, i, nodes) => {
       const element = nodes[i];
       if (element) {
         this.layers.linkLabels.appendChild(element);
       }
     });
   }
-  /**
-   * Utility method to bring any SVG element to front using appendChild
-   * Based on the reference implementation pattern
-   */
-  bringElementToFront(element) {
-    if (element.parentNode) {
-      element.parentNode.appendChild(element);
-    }
-  }
   /**
    * Clear hover state to prevent conflicts with selection
    * Similar to the clearAllHoverLayers function in create-node-hover.ts
@@ -6382,6 +6424,25 @@ var SelectionManager = class {
       }
     }
   }
+  /**
+   * Immediately update positions of links connected to the specified node
+   * This ensures arrowheads reposition correctly when node radius changes
+   */
+  updateConnectedLinkPositions(nodeData) {
+    this.root.selectAll("line:not(.link-hit-area)").filter((renderableLink) => {
+      const source = renderableLink.link.source;
+      const target = renderableLink.link.target;
+      return source.id === nodeData.id || target.id === nodeData.id;
+    }).each(function(item) {
+      const linkElement = this;
+      const sourcePoint = getShortenedSourcePoint(item.link, item.style);
+      const targetPoint = getShortenedTargetPoint(item.link, item.style);
+      linkElement.setAttribute("x1", String(sourcePoint.x));
+      linkElement.setAttribute("y1", String(sourcePoint.y));
+      linkElement.setAttribute("x2", String(targetPoint.x));
+      linkElement.setAttribute("y2", String(targetPoint.y));
+    });
+  }
   /**
    * Clean up resources
    */
@@ -6548,6 +6609,13 @@ var InteractionManager = class {
       const nodeElement = event.currentTarget;
       this.manager.selectionManager?.selectNode(nodeElement, node);
     });
+    selections.linkSelection.on("click.select", (event, renderableLinkData) => {
+      event.stopPropagation();
+      const linkElement = event.currentTarget;
+      if (this.manager.selectionManager) {
+        this.manager.selectionManager.selectLink(linkElement, renderableLinkData, event);
+      }
+    });
     selections.linkLabelSelection.on("click.select", (event, renderableLinkLabel) => {
       event.stopPropagation();
       const correspondingLink = selections.linkSelection.filter((d) => d.link === renderableLinkLabel.link).node();
@@ -6588,7 +6656,23 @@ 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 dx = target.x - source.x;
+            const dy = target.y - source.y;
+            const angle = Math.atan2(dy, dx);
+            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));
+            const degrees2 = angle * 180 / Math.PI;
+            rectElement.setAttribute("transform", `rotate(${degrees2}, ${midX}, ${midY})`);
+          });
         });
       }
       if (this.manager.selectionManager) {

package/dist/index.css

@@ -320,5 +320,19 @@
   cursor: pointer;
   transition: stroke-opacity 0.2s ease;
 }
+.pg-hover-elevated {
+  paint-order: fill stroke markers;
+  transition: filter 0.15s ease-in-out;
+}
+.pg-hover-elevated.pg-layer-nodes circle,
+.pg-hover-elevated[data-hover-elevated] {
+  paint-order: stroke fill markers;
+}
+svg .pg-hover-elevated {
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
+}
+[data-hover-elevated=true] {
+  opacity: 1 !important;
+}
 
 /* src/styles/main.css */

package/dist/index.d.cts

@@ -616,16 +616,16 @@ declare class SelectionManager {
      * Restore elements back to their original layers
      */
     private restoreSelectedElements;
-    /**
-     * Utility method to bring any SVG element to front using appendChild
-     * Based on the reference implementation pattern
-     */
-    private bringElementToFront;
     /**
      * Clear hover state to prevent conflicts with selection
      * Similar to the clearAllHoverLayers function in create-node-hover.ts
      */
     private clearHoverState;
+    /**
+     * Immediately update positions of links connected to the specified node
+     * This ensures arrowheads reposition correctly when node radius changes
+     */
+    private updateConnectedLinkPositions;
     /**
      * Clean up resources
      */

package/dist/index.d.ts

@@ -616,16 +616,16 @@ declare class SelectionManager {
      * Restore elements back to their original layers
      */
     private restoreSelectedElements;
-    /**
-     * Utility method to bring any SVG element to front using appendChild
-     * Based on the reference implementation pattern
-     */
-    private bringElementToFront;
     /**
      * Clear hover state to prevent conflicts with selection
      * Similar to the clearAllHoverLayers function in create-node-hover.ts
      */
     private clearHoverState;
+    /**
+     * Immediately update positions of links connected to the specified node
+     * This ensures arrowheads reposition correctly when node radius changes
+     */
+    private updateConnectedLinkPositions;
     /**
      * Clean up resources
      */

package/dist/index.js

@@ -4729,7 +4729,18 @@ function getShortenedSourcePoint(link, style) {
   const dx = targetX - sourceX;
   const dy = targetY - sourceY;
   const distance = Math.sqrt(dx * dx + dy * dy) || 1;
-  const sourceRadius = source.style?.radius ?? 12;
+  let sourceRadius = source.style?.radius ?? 12;
+  if (typeof document !== "undefined") {
+    const circles = Array.from(document.querySelectorAll("circle"));
+    for (const circle of circles) {
+      const boundData = circle.__data__;
+      if (boundData && boundData.id === source.id) {
+        const currentRadius = parseFloat(circle.getAttribute("r") || "12");
+        sourceRadius = currentRadius;
+        break;
+      }
+    }
+  }
   const sourceStrokeWidth = source.style?.strokeWidth ?? 1.5;
   const linkStrokeCompensation = style.strokeWidth / 2;
   const nodeStrokeOffset = sourceStrokeWidth / 2;
@@ -4750,7 +4761,18 @@ function getShortenedTargetPoint(link, style) {
   const dx = targetX - sourceX;
   const dy = targetY - sourceY;
   const distance = Math.sqrt(dx * dx + dy * dy) || 1;
-  const targetRadius = target.style?.radius ?? 12;
+  let targetRadius = target.style?.radius ?? 12;
+  if (typeof document !== "undefined") {
+    const circles = Array.from(document.querySelectorAll("circle"));
+    for (const circle of circles) {
+      const boundData = circle.__data__;
+      if (boundData && boundData.id === target.id) {
+        const currentRadius = parseFloat(circle.getAttribute("r") || "12");
+        targetRadius = currentRadius;
+        break;
+      }
+    }
+  }
   const targetStrokeWidth = target.style?.strokeWidth ?? 1.5;
   const arrowLength = style.arrow.enabled ? style.arrow.size * 2 : 0;
   const linkStrokeCompensation = style.strokeWidth / 2;
@@ -4836,10 +4858,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) {
@@ -5378,48 +5397,38 @@ function createNodeHover(nodeSelection, hoverStyle, options) {
   const svgElement = firstNode.ownerSVGElement;
   if (!svgElement) return;
   const root2 = select_default2(svgElement);
+  const elevatedElements = /* @__PURE__ */ new Set();
   function clearAllHoverLayers() {
-    const hoverNodesLayer = root2.select('[data-layer="hover-nodes"]').node();
-    const nodesLayer = root2.select('[data-layer="nodes"]').node();
-    if (hoverNodesLayer && nodesLayer) {
-      while (hoverNodesLayer.firstChild) {
-        nodesLayer.appendChild(hoverNodesLayer.firstChild);
-      }
-    }
-    const hoverNodeLabelsLayer = root2.select('[data-layer="hover-node-labels"]').node();
-    const nodeLabelsLayer = root2.select('[data-layer="node-labels"]').node();
-    if (hoverNodeLabelsLayer && nodeLabelsLayer) {
-      while (hoverNodeLabelsLayer.firstChild) {
-        nodeLabelsLayer.appendChild(hoverNodeLabelsLayer.firstChild);
-      }
-    }
-    const hoverLinksLayer = root2.select('[data-layer="hover-links"]').node();
-    const linksLayer = root2.select('[data-layer="links"]').node();
-    if (hoverLinksLayer && linksLayer) {
-      while (hoverLinksLayer.firstChild) {
-        const linkElement = hoverLinksLayer.firstChild;
-        linksLayer.appendChild(linkElement);
-        const event = new MouseEvent("mouseleave", {
-          bubbles: true,
-          cancelable: false,
-          view: window
-        });
-        linkElement.dispatchEvent(event);
-      }
-    }
-    const hoverLinkLabelsLayer = root2.select('[data-layer="hover-link-labels"]').node();
-    const linkLabelsLayer = root2.select('[data-layer="link-labels"]').node();
-    if (hoverLinkLabelsLayer && linkLabelsLayer) {
-      while (hoverLinkLabelsLayer.firstChild) {
-        const labelElement = hoverLinkLabelsLayer.firstChild;
-        const labelData = labelElement.__data__;
-        if (labelData && labelData.style.label.visibility === "hover" && !labelElement.classList.contains("label-selection-pinned")) {
-          labelElement.style.opacity = "0";
-          labelElement.style.pointerEvents = "none";
+    elevatedElements.forEach((element) => {
+      element.classList.remove("pg-hover-elevated");
+      element.style.removeProperty("filter");
+      if (element.tagName === "circle") {
+        element.removeAttribute("data-hover-elevated");
+      }
+      if (element.classList.contains("link-label")) {
+        const labelData = element.__data__;
+        if (labelData && labelData.style.label.visibility === "hover" && !element.classList.contains("label-selection-pinned")) {
+          element.style.opacity = "0";
+          element.style.pointerEvents = "none";
         }
-        linkLabelsLayer.appendChild(labelElement);
       }
-    }
+    });
+    elevatedElements.clear();
+    root2.selectAll("line[data-hover-elevated]").each(function() {
+      const linkElement = this;
+      linkElement.removeAttribute("data-hover-elevated");
+      const event = new MouseEvent("mouseleave", {
+        bubbles: true,
+        cancelable: false,
+        view: window
+      });
+      linkElement.dispatchEvent(event);
+    });
+  }
+  function elevateElement(element) {
+    element.classList.add("pg-hover-elevated");
+    element.style.filter = "drop-shadow(0 2px 4px rgba(0,0,0,0.15))";
+    elevatedElements.add(element);
   }
   nodeSelection.on("mouseenter.links", function(_event, hoveredNode) {
     const hoveredNodeElement = this;
@@ -5430,16 +5439,11 @@ function createNodeHover(nodeSelection, hoverStyle, options) {
       return;
     }
     clearAllHoverLayers();
-    const hoverNodesLayer = root2.select('[data-layer="hover-nodes"]').node();
-    if (hoverNodesLayer) {
-      hoverNodesLayer.appendChild(hoveredNodeElement);
-    }
+    elevateElement(hoveredNodeElement);
+    hoveredNodeElement.setAttribute("data-hover-elevated", "true");
     root2.selectAll("text").filter((d) => d.id === hoveredNode.id).each(function() {
       const labelElement = this;
-      const hoverNodeLabelsLayer = root2.select('[data-layer="hover-node-labels"]').node();
-      if (hoverNodeLabelsLayer) {
-        hoverNodeLabelsLayer.appendChild(labelElement);
-      }
+      elevateElement(labelElement);
     });
     const connectedLinks = root2.selectAll("line:not(.link-hit-area)").filter((renderableLink) => {
       const source = renderableLink.link.source;
@@ -5448,10 +5452,8 @@ function createNodeHover(nodeSelection, hoverStyle, options) {
     });
     connectedLinks.each(function(_renderableLink) {
       const linkElement = this;
-      const hoverLinksLayer = root2.select('[data-layer="hover-links"]').node();
-      if (hoverLinksLayer) {
-        hoverLinksLayer.appendChild(linkElement);
-      }
+      elevateElement(linkElement);
+      linkElement.setAttribute("data-hover-elevated", "true");
       const event = new MouseEvent("mouseenter", {
         bubbles: true,
         cancelable: false,
@@ -5465,13 +5467,10 @@ function createNodeHover(nodeSelection, hoverStyle, options) {
       return source.id === hoveredNode.id || target.id === hoveredNode.id;
     }).each(function(item) {
       const labelElement = this;
-      const hoverLinkLabelsLayer = root2.select('[data-layer="hover-link-labels"]').node();
-      if (hoverLinkLabelsLayer) {
-        hoverLinkLabelsLayer.appendChild(labelElement);
-        if (item.style.label.visibility === "hover") {
-          labelElement.style.opacity = "1";
-          labelElement.style.pointerEvents = "auto";
-        }
+      elevateElement(labelElement);
+      if (item.style.label.visibility === "hover") {
+        labelElement.style.opacity = "1";
+        labelElement.style.pointerEvents = "auto";
       }
     });
   }).on("mouseleave.links", function(_event, _hoveredNode) {
@@ -5547,7 +5546,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 +5843,55 @@ 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 dx = target.x - source.x;
+  const dy = target.y - source.y;
+  const linkLength = Math.sqrt(dx * dx + dy * dy);
+  const angle = Math.atan2(dy, dx);
+  const midX = (source.x + target.x) / 2;
+  const midY = (source.y + target.y) / 2;
+  const thickness = Math.max((item.style.strokeWidth || 2) * 4, item.style.arrow.size * 2, 20);
+  let length = linkLength + item.style.arrow.size * 2;
+  let width = thickness;
+  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, labelHeight + 10);
+          length = Math.max(length, labelWidth + 20);
+        }
+      } catch {
+        const text = item.link.label ?? "";
+        const fontSize = item.style.label.fontSize;
+        const estimatedWidth = text.length * fontSize * 0.6 + item.style.label.paddingX * 2 + 20;
+        const estimatedHeight = fontSize + item.style.label.paddingY * 2 + 10;
+        width = Math.max(width, estimatedHeight);
+        length = Math.max(length, estimatedWidth);
+      }
+    }
+  }
+  const rectX = midX - length / 2;
+  const rectY = midY - width / 2;
+  rectElement.setAttribute("width", String(length));
+  rectElement.setAttribute("height", String(width));
+  rectElement.setAttribute("x", String(rectX));
+  rectElement.setAttribute("y", String(rectY));
+  const degrees2 = angle * 180 / Math.PI;
+  rectElement.setAttribute("transform", `rotate(${degrees2}, ${midX}, ${midY})`);
 }
 
 // src/utils/get-link-target-point.ts
@@ -6083,7 +6130,10 @@ var SelectionManager = class {
       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.setAttribute("r", String(style.radius));
+      if (style.radius !== void 0) {
+        nodeElement.setAttribute("r", String(style.radius));
+        this.updateConnectedLinkPositions(nodeData);
+      }
     }
     this.root.selectAll(".link-label").filter((item) => {
       if (item.style.label.visibility !== "hover") return false;
@@ -6140,6 +6190,7 @@ var SelectionManager = class {
     element.style.opacity = "";
     const originalRadius = data.style?.radius ?? 8;
     element.setAttribute("r", String(originalRadius));
+    this.updateConnectedLinkPositions(data);
     delete element.dataset.selected;
     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;
@@ -6152,7 +6203,7 @@ var SelectionManager = class {
     if (!this.state.selectedLink) return;
     const { element, data, originalMarker } = this.state.selectedLink;
     this.layers.links.appendChild(element);
-    this.root.selectAll(".link-label").filter((item) => item.link === data).each((d, i, nodes) => {
+    this.root.selectAll(".link-label").filter((item) => item.link === data).each((_, i, nodes) => {
       const element2 = nodes[i];
       if (element2) {
         this.layers.linkLabels.appendChild(element2);
@@ -6222,13 +6273,13 @@ var SelectionManager = class {
       const target = d.link.target;
       return source.id === nodeData.id || target.id === nodeData.id;
     });
-    connectedLinks.each((d, i, nodes) => {
+    connectedLinks.each((_, i, nodes) => {
       const element = nodes[i];
       if (element) {
         this.layers.selectionLayer.links.appendChild(element);
       }
     });
-    this.root.selectAll("text").filter((d) => d.id === nodeData.id).each((d, i, nodes) => {
+    this.root.selectAll("text").filter((d) => d.id === nodeData.id).each((_, i, nodes) => {
       const element = nodes[i];
       if (element) {
         this.layers.selectionLayer.nodeLabels.appendChild(element);
@@ -6238,7 +6289,7 @@ var SelectionManager = class {
       const source = item.link.source;
       const target = item.link.target;
       return source.id === nodeData.id || target.id === nodeData.id;
-    }).each((d, i, nodes) => {
+    }).each((_, i, nodes) => {
       const element = nodes[i];
       if (element) {
         this.layers.selectionLayer.linkLabels.appendChild(element);
@@ -6250,7 +6301,7 @@ var SelectionManager = class {
    */
   bringLinkToFront(linkElement, renderableLink) {
     this.layers.selectionLayer.links.appendChild(linkElement);
-    this.root.selectAll(".link-label").filter((item) => item.link === renderableLink.link).each((d, i, nodes) => {
+    this.root.selectAll(".link-label").filter((item) => item.link === renderableLink.link).each((_, i, nodes) => {
       const element = nodes[i];
       if (element) {
         this.layers.selectionLayer.linkLabels.appendChild(element);
@@ -6261,7 +6312,7 @@ var SelectionManager = class {
    * Restore elements back to their original layers
    */
   restoreSelectedElements(nodeData) {
-    this.root.selectAll("circle").filter((d) => d.id === nodeData.id).each((d, i, nodes) => {
+    this.root.selectAll("circle").filter((d) => d.id === nodeData.id).each((_, i, nodes) => {
       const element = nodes[i];
       if (element) {
         this.layers.nodes.appendChild(element);
@@ -6271,13 +6322,13 @@ var SelectionManager = class {
       const source = d.link.source;
       const target = d.link.target;
       return source.id === nodeData.id || target.id === nodeData.id;
-    }).each((d, i, nodes) => {
+    }).each((_, i, nodes) => {
       const element = nodes[i];
       if (element) {
         this.layers.links.appendChild(element);
       }
     });
-    this.root.selectAll("text").filter((d) => d.id === nodeData.id).each((d, i, nodes) => {
+    this.root.selectAll("text").filter((d) => d.id === nodeData.id).each((_, i, nodes) => {
       const element = nodes[i];
       if (element) {
         this.layers.nodeLabels.appendChild(element);
@@ -6287,22 +6338,13 @@ var SelectionManager = class {
       const source = item.link.source;
       const target = item.link.target;
       return source.id === nodeData.id || target.id === nodeData.id;
-    }).each((d, i, nodes) => {
+    }).each((_, i, nodes) => {
       const element = nodes[i];
       if (element) {
         this.layers.linkLabels.appendChild(element);
       }
     });
   }
-  /**
-   * Utility method to bring any SVG element to front using appendChild
-   * Based on the reference implementation pattern
-   */
-  bringElementToFront(element) {
-    if (element.parentNode) {
-      element.parentNode.appendChild(element);
-    }
-  }
   /**
    * Clear hover state to prevent conflicts with selection
    * Similar to the clearAllHoverLayers function in create-node-hover.ts
@@ -6350,6 +6392,25 @@ var SelectionManager = class {
       }
     }
   }
+  /**
+   * Immediately update positions of links connected to the specified node
+   * This ensures arrowheads reposition correctly when node radius changes
+   */
+  updateConnectedLinkPositions(nodeData) {
+    this.root.selectAll("line:not(.link-hit-area)").filter((renderableLink) => {
+      const source = renderableLink.link.source;
+      const target = renderableLink.link.target;
+      return source.id === nodeData.id || target.id === nodeData.id;
+    }).each(function(item) {
+      const linkElement = this;
+      const sourcePoint = getShortenedSourcePoint(item.link, item.style);
+      const targetPoint = getShortenedTargetPoint(item.link, item.style);
+      linkElement.setAttribute("x1", String(sourcePoint.x));
+      linkElement.setAttribute("y1", String(sourcePoint.y));
+      linkElement.setAttribute("x2", String(targetPoint.x));
+      linkElement.setAttribute("y2", String(targetPoint.y));
+    });
+  }
   /**
    * Clean up resources
    */
@@ -6516,6 +6577,13 @@ var InteractionManager = class {
       const nodeElement = event.currentTarget;
       this.manager.selectionManager?.selectNode(nodeElement, node);
     });
+    selections.linkSelection.on("click.select", (event, renderableLinkData) => {
+      event.stopPropagation();
+      const linkElement = event.currentTarget;
+      if (this.manager.selectionManager) {
+        this.manager.selectionManager.selectLink(linkElement, renderableLinkData, event);
+      }
+    });
     selections.linkLabelSelection.on("click.select", (event, renderableLinkLabel) => {
       event.stopPropagation();
       const correspondingLink = selections.linkSelection.filter((d) => d.link === renderableLinkLabel.link).node();
@@ -6556,7 +6624,23 @@ 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 dx = target.x - source.x;
+            const dy = target.y - source.y;
+            const angle = Math.atan2(dy, dx);
+            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));
+            const degrees2 = angle * 180 / Math.PI;
+            rectElement.setAttribute("transform", `rotate(${degrees2}, ${midX}, ${midY})`);
+          });
         });
       }
       if (this.manager.selectionManager) {

package/package.json

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