polly-graph 0.1.15 → 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;
@@ -5407,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;
@@ -5459,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;
@@ -5477,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,
@@ -5494,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) {
@@ -5882,11 +5884,15 @@ 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 linkPadding = Math.max(item.style.strokeWidth || 2, item.style.arrow.size) * 2;
-  let width = linkPadding;
-  let height = linkPadding;
+  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) {
@@ -5897,23 +5903,27 @@ function updateHitAreaDimensions(rectElement, item, root2) {
           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);
+          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 + 10;
+        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, estimatedWidth);
-        height = Math.max(height, estimatedHeight);
+        width = Math.max(width, estimatedHeight);
+        length = Math.max(length, estimatedWidth);
       }
     }
   }
-  rectElement.setAttribute("x", String(midX - width / 2));
-  rectElement.setAttribute("y", String(midY - height / 2));
-  rectElement.setAttribute("width", String(width));
-  rectElement.setAttribute("height", String(height));
+  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
@@ -6152,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;
@@ -6209,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;
@@ -6221,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);
@@ -6291,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);
@@ -6307,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);
@@ -6319,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);
@@ -6330,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);
@@ -6340,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);
@@ -6356,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
@@ -6419,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
    */
@@ -6585,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();
@@ -6630,12 +6661,17 @@ var InteractionManager = class {
             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})`);
           });
         });
       }

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;
@@ -5375,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;
@@ -5427,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;
@@ -5445,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,
@@ -5462,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) {
@@ -5850,11 +5852,15 @@ 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 linkPadding = Math.max(item.style.strokeWidth || 2, item.style.arrow.size) * 2;
-  let width = linkPadding;
-  let height = linkPadding;
+  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) {
@@ -5865,23 +5871,27 @@ function updateHitAreaDimensions(rectElement, item, root2) {
           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);
+          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 + 10;
+        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, estimatedWidth);
-        height = Math.max(height, estimatedHeight);
+        width = Math.max(width, estimatedHeight);
+        length = Math.max(length, estimatedWidth);
       }
     }
   }
-  rectElement.setAttribute("x", String(midX - width / 2));
-  rectElement.setAttribute("y", String(midY - height / 2));
-  rectElement.setAttribute("width", String(width));
-  rectElement.setAttribute("height", String(height));
+  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
@@ -6120,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;
@@ -6177,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;
@@ -6189,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);
@@ -6259,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);
@@ -6275,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);
@@ -6287,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);
@@ -6298,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);
@@ -6308,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);
@@ -6324,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
@@ -6387,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
    */
@@ -6553,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();
@@ -6598,12 +6629,17 @@ var InteractionManager = class {
             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})`);
           });
         });
       }

package/package.json

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