polly-graph 0.1.5 → 0.1.7

package/dist/index.cjs

@@ -4082,7 +4082,7 @@ function getLinkKey(link) {
 }
 function renderLinks(ctx, links) {
   const renderableLinks = createRenderableLinks(ctx, links);
-  const linkSelection = ctx.root.select('[data-layer="links"]').selectAll("line").data(renderableLinks, (item) => getLinkKey(item.link)).join("line").attr("class", "graph-link").attr("stroke", (item) => item.style.stroke).attr("stroke-width", (item) => item.style.strokeWidth).attr("opacity", (item) => item.style.opacity).attr("marker-end", (item) => item.markerEnd).style("pointer-events", "stroke");
+  const linkSelection = ctx.root.select('[data-layer="links"]').selectAll("line").data(renderableLinks, (item) => getLinkKey(item.link)).join("line").attr("class", "graph-link").attr("stroke", (item) => item.style.stroke).attr("stroke-width", (item) => item.style.strokeWidth).attr("opacity", (item) => item.style.opacity).attr("marker-end", (item) => item.markerEnd).style("pointer-events", "stroke").style("cursor", "pointer");
   const labelSelection = ctx.root.selectAll(".link-label");
   linkSelection.on("mouseenter.label-hover", (_event, d) => {
     labelSelection.filter((labelItem) => labelItem.link === d.link && labelItem.style.label.visibility === "hover").interrupt().transition().duration(200).style("opacity", 1);
@@ -4236,7 +4236,9 @@ function createNodeHover(nodeSelection, hoverStyle) {
       return s.id === d.id || t.id === d.id;
     }).interrupt().transition().duration(200).style("opacity", 1).style("pointer-events", "auto");
   }).on("mouseleave.labels", (_event) => {
-    labelSelection.filter((item) => item.style.label.visibility === "hover").interrupt().transition().duration(200).style("opacity", 0).style("pointer-events", "none");
+    labelSelection.filter(function(item) {
+      return item.style.label.visibility === "hover" && !this.classList.contains("label-selection-pinned");
+    }).interrupt().transition().duration(200).style("opacity", 0).style("pointer-events", "none");
   });
 }
 
@@ -4522,6 +4524,60 @@ async function captureAndDownloadGraph(container, options = {}) {
   }
 }
 
+// src/utils/node-link-selection.utils.ts
+function deselectNode(nodeElement, root2, nodeSelectHandlers, nodeDeselectHandlers) {
+  nodeElement.style.fill = "";
+  nodeElement.style.stroke = "";
+  nodeElement.style.strokeWidth = "";
+  nodeElement.style.opacity = "";
+  nodeElement.style.removeProperty("r");
+  root2.selectAll(".link-label.label-selection-pinned").classed("label-selection-pinned", false).interrupt().transition().duration(200).style("opacity", 0).style("pointer-events", "none");
+  const nodeData = select_default2(nodeElement).datum();
+  nodeSelectHandlers.clear();
+  nodeDeselectHandlers.forEach((handler) => handler(nodeData, nodeElement));
+}
+function deselectLink(linkElement, linkMarkerSnapshots, linkSelectHandlers, linkDeselectHandlers) {
+  linkElement.style.stroke = "";
+  linkElement.style.strokeWidth = "";
+  linkElement.style.opacity = "";
+  const originalMarkerEnd = linkMarkerSnapshots.get(linkElement);
+  if (originalMarkerEnd) {
+    linkElement.setAttribute("marker-end", originalMarkerEnd);
+  } else {
+    linkElement.removeAttribute("marker-end");
+  }
+  const linkData = select_default2(linkElement).datum().link;
+  linkSelectHandlers.clear();
+  linkDeselectHandlers.forEach((handler) => handler(linkData, linkElement));
+}
+function selectLink(event, renderableLink, linkElement, selectionConfig, layers, linkSelectHandlers) {
+  event.stopPropagation();
+  const linkStyle = selectionConfig.linkStyle;
+  if (linkStyle) {
+    if (linkStyle.stroke !== void 0) {
+      linkElement.style.stroke = linkStyle.stroke;
+    }
+    if (linkStyle.strokeWidth !== void 0) {
+      linkElement.style.strokeWidth = String(linkStyle.strokeWidth);
+    }
+    if (linkStyle.opacity !== void 0) {
+      linkElement.style.opacity = String(linkStyle.opacity);
+    }
+    if (linkStyle.stroke !== void 0 && renderableLink.style.arrow.enabled) {
+      const selectionMarkerStyle = {
+        stroke: linkStyle.stroke,
+        arrow: { fill: linkStyle.stroke, size: renderableLink.style.arrow.size }
+      };
+      const selectionMarkerId = createArrowMarker({ svg: layers.svg, style: selectionMarkerStyle });
+      select_default2(linkElement).attr("marker-end", `url(#${selectionMarkerId})`);
+    }
+  }
+  linkSelectHandlers.forEach((handler) => handler(renderableLink.link, linkElement));
+}
+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);
+}
+
 // src/create-graph.ts
 function createGraph(config) {
   let cleanupResize = null;
@@ -4535,6 +4591,45 @@ function createGraph(config) {
   let svgElement = null;
   let zoomBehavior = null;
   let simulation = null;
+  const nodeSelectHandlers = /* @__PURE__ */ new Set();
+  const nodeDeselectHandlers = /* @__PURE__ */ new Set();
+  const linkSelectHandlers = /* @__PURE__ */ new Set();
+  const linkDeselectHandlers = /* @__PURE__ */ new Set();
+  function on(event, handler) {
+    if (event === "nodeSelect") {
+      nodeSelectHandlers.add(handler);
+      return () => {
+        nodeSelectHandlers.delete(handler);
+      };
+    }
+    if (event === "nodeDeselect") {
+      nodeDeselectHandlers.add(handler);
+      return () => {
+        nodeDeselectHandlers.delete(handler);
+      };
+    }
+    if (event === "linkSelect") {
+      linkSelectHandlers.add(handler);
+      return () => {
+        linkSelectHandlers.delete(handler);
+      };
+    }
+    linkDeselectHandlers.add(handler);
+    return () => {
+      linkDeselectHandlers.delete(handler);
+    };
+  }
+  function off(event, handler) {
+    if (event === "nodeSelect") {
+      nodeSelectHandlers.delete(handler);
+    } else if (event === "nodeDeselect") {
+      nodeDeselectHandlers.delete(handler);
+    } else if (event === "linkSelect") {
+      linkSelectHandlers.delete(handler);
+    } else {
+      linkDeselectHandlers.delete(handler);
+    }
+  }
   function render() {
     destroy();
     const layers = createGraphLayers(config.container);
@@ -4618,10 +4713,117 @@ function createGraph(config) {
     if (config.interaction?.drag?.enabled !== false) {
       nodeSelection.call(createDragBehavior(simulation));
     }
+    const selectionConfig = config.interaction?.selection;
+    if (selectionConfig?.enabled) {
+      let selectedNodeElement = null;
+      let selectedLinkElement = null;
+      const linkMarkerSnapshots = /* @__PURE__ */ new Map();
+      linkSelection.each(function() {
+        const linkElement = this;
+        linkMarkerSnapshots.set(linkElement, linkElement.getAttribute("marker-end"));
+      });
+      nodeSelection.on("click.select", function(event, node) {
+        event.stopPropagation();
+        const nodeElement = this;
+        if (selectedNodeElement === nodeElement) {
+          deselectNode(nodeElement, root2, nodeSelectHandlers, nodeDeselectHandlers);
+          selectedNodeElement = null;
+          return;
+        }
+        if (selectedNodeElement) {
+          deselectNode(selectedNodeElement, root2, nodeSelectHandlers, nodeDeselectHandlers);
+          selectedNodeElement = null;
+        }
+        if (selectedLinkElement) {
+          deselectLink(selectedLinkElement, linkMarkerSnapshots, linkSelectHandlers, linkDeselectHandlers);
+          selectedLinkElement = null;
+        }
+        selectedNodeElement = nodeElement;
+        const nodeStyle = selectionConfig.nodeStyle;
+        if (nodeStyle) {
+          if (nodeStyle.fill !== void 0) {
+            nodeElement.style.fill = nodeStyle.fill;
+          }
+          if (nodeStyle.stroke !== void 0) {
+            nodeElement.style.stroke = nodeStyle.stroke;
+          }
+          if (nodeStyle.strokeWidth !== void 0) {
+            nodeElement.style.strokeWidth = String(nodeStyle.strokeWidth);
+          }
+          if (nodeStyle.opacity !== void 0) {
+            nodeElement.style.opacity = String(nodeStyle.opacity);
+          }
+          if (nodeStyle.radius !== void 0) {
+            nodeElement.style.setProperty("r", String(nodeStyle.radius));
+          }
+        }
+        root2.selectAll(".link-label").filter((item) => {
+          if (item.style.label.visibility !== "hover") {
+            return false;
+          }
+          const source = item.link.source;
+          const target = item.link.target;
+          return source.id === node.id || target.id === node.id;
+        }).classed("label-selection-pinned", true).interrupt().transition().duration(200).style("opacity", 1).style("pointer-events", "auto");
+        nodeSelectHandlers.forEach((handler) => handler(node, nodeElement));
+      });
+      linkSelection.on("click.select", function(event, renderableLink) {
+        const linkElement = this;
+        if (selectedLinkElement === linkElement) {
+          deselectLink(linkElement, linkMarkerSnapshots, linkSelectHandlers, linkDeselectHandlers);
+          selectedLinkElement = null;
+          return;
+        }
+        if (selectedLinkElement) {
+          deselectLink(selectedLinkElement, linkMarkerSnapshots, linkSelectHandlers, linkDeselectHandlers);
+          selectedLinkElement = null;
+        }
+        if (selectedNodeElement) {
+          deselectNode(selectedNodeElement, root2, nodeSelectHandlers, nodeDeselectHandlers);
+          selectedNodeElement = null;
+        }
+        selectedLinkElement = linkElement;
+        selectLink(event, renderableLink, linkElement, selectionConfig, layers, linkSelectHandlers);
+      });
+      const linkHitAreaSelection = createLinkHitArea(root2, linkSelection);
+      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.on("click.select", function(event, renderableLink) {
+        const visibleLinkNode = linkSelection.filter((d) => d === renderableLink).node();
+        if (visibleLinkNode) {
+          if (selectedLinkElement === visibleLinkNode) {
+            deselectLink(visibleLinkNode, linkMarkerSnapshots, linkSelectHandlers, linkDeselectHandlers);
+            selectedLinkElement = null;
+            return;
+          }
+          if (selectedLinkElement) {
+            deselectLink(selectedLinkElement, linkMarkerSnapshots, linkSelectHandlers, linkDeselectHandlers);
+            selectedLinkElement = null;
+          }
+          if (selectedNodeElement) {
+            deselectNode(selectedNodeElement, root2, nodeSelectHandlers, nodeDeselectHandlers);
+            selectedNodeElement = null;
+          }
+          selectedLinkElement = visibleLinkNode;
+          selectLink(event, renderableLink, visibleLinkNode, selectionConfig, layers, linkSelectHandlers);
+        }
+      });
+      select_default2(layers.svg).on("click.deselect", () => {
+        if (selectedNodeElement) {
+          deselectNode(selectedNodeElement, root2, nodeSelectHandlers, nodeDeselectHandlers);
+          selectedNodeElement = null;
+        }
+        if (selectedLinkElement) {
+          deselectLink(selectedLinkElement, linkMarkerSnapshots, linkSelectHandlers, linkDeselectHandlers);
+          selectedLinkElement = null;
+        }
+      });
+    }
     if (config.controls?.enabled) {
       controls = createGraphControls(
         layers.overlay,
-        { zoomIn, zoomOut, resetView, fitView, destroy, render, exportGraph },
+        { zoomIn, zoomOut, resetView, fitView },
         config.controls
       );
       controls.mount();
@@ -4631,13 +4833,19 @@ function createGraph(config) {
     }
   }
   function resetView() {
-    if (!zoomBehavior || !svgElement) return;
+    if (!zoomBehavior || !svgElement) {
+      return;
+    }
     select_default2(svgElement).transition().duration(400).call(zoomBehavior.transform, identity2);
   }
   function fitView() {
-    if (!zoomBehavior || !rootGroup || !svgElement || dimensions.width === 0 || dimensions.height === 0) return;
+    if (!zoomBehavior || !rootGroup || !svgElement || dimensions.width === 0 || dimensions.height === 0) {
+      return;
+    }
     const bounds = rootGroup.getBBox();
-    if (bounds.width === 0 || bounds.height === 0) return;
+    if (bounds.width === 0 || bounds.height === 0) {
+      return;
+    }
     const scale = Math.min(dimensions.width / bounds.width, dimensions.height / bounds.height) * 0.9;
     const translateX = (dimensions.width - bounds.width * scale) / 2 - bounds.x * scale;
     const translateY = (dimensions.height - bounds.height * scale) / 2 - bounds.y * scale;
@@ -4645,11 +4853,15 @@ function createGraph(config) {
     select_default2(svgElement).transition().duration(400).call(zoomBehavior.transform, transform2);
   }
   function zoomIn() {
-    if (!zoomBehavior || !svgElement) return;
+    if (!zoomBehavior || !svgElement) {
+      return;
+    }
     select_default2(svgElement).transition().call(zoomBehavior.scaleBy, 1.2);
   }
   function zoomOut() {
-    if (!zoomBehavior || !svgElement) return;
+    if (!zoomBehavior || !svgElement) {
+      return;
+    }
     select_default2(svgElement).transition().call(zoomBehavior.scaleBy, 0.8);
   }
   async function exportGraph(fileName) {
@@ -4696,7 +4908,7 @@ function createGraph(config) {
       config.container.removeChild(config.container.firstChild);
     }
   }
-  return { render, zoomIn, zoomOut, resetView, fitView, destroy, exportGraph };
+  return { render, zoomIn, zoomOut, resetView, fitView, destroy, exportGraph, on, off };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.d.cts

@@ -138,6 +138,14 @@ interface GraphInstance {
     fitView(): void;
     destroy(): void;
     exportGraph(fileName?: string): void;
+    on(event: 'nodeSelect', handler: (node: GraphNode, element: SVGCircleElement) => void): () => void;
+    on(event: 'nodeDeselect', handler: (node: GraphNode, element: SVGCircleElement) => void): () => void;
+    on(event: 'linkSelect', handler: (link: GraphLink, element: SVGLineElement) => void): () => void;
+    on(event: 'linkDeselect', handler: (link: GraphLink, element: SVGLineElement) => void): () => void;
+    off(event: 'nodeSelect', handler: (node: GraphNode, element: SVGCircleElement) => void): void;
+    off(event: 'nodeDeselect', handler: (node: GraphNode, element: SVGCircleElement) => void): void;
+    off(event: 'linkSelect', handler: (link: GraphLink, element: SVGLineElement) => void): void;
+    off(event: 'linkDeselect', handler: (link: GraphLink, element: SVGLineElement) => void): void;
 }
 
 declare function createGraph(config: GraphConfig): GraphInstance;

package/dist/index.d.ts

@@ -138,6 +138,14 @@ interface GraphInstance {
     fitView(): void;
     destroy(): void;
     exportGraph(fileName?: string): void;
+    on(event: 'nodeSelect', handler: (node: GraphNode, element: SVGCircleElement) => void): () => void;
+    on(event: 'nodeDeselect', handler: (node: GraphNode, element: SVGCircleElement) => void): () => void;
+    on(event: 'linkSelect', handler: (link: GraphLink, element: SVGLineElement) => void): () => void;
+    on(event: 'linkDeselect', handler: (link: GraphLink, element: SVGLineElement) => void): () => void;
+    off(event: 'nodeSelect', handler: (node: GraphNode, element: SVGCircleElement) => void): void;
+    off(event: 'nodeDeselect', handler: (node: GraphNode, element: SVGCircleElement) => void): void;
+    off(event: 'linkSelect', handler: (link: GraphLink, element: SVGLineElement) => void): void;
+    off(event: 'linkDeselect', handler: (link: GraphLink, element: SVGLineElement) => void): void;
 }
 
 declare function createGraph(config: GraphConfig): GraphInstance;

package/dist/index.js

@@ -4046,7 +4046,7 @@ function getLinkKey(link) {
 }
 function renderLinks(ctx, links) {
   const renderableLinks = createRenderableLinks(ctx, links);
-  const linkSelection = ctx.root.select('[data-layer="links"]').selectAll("line").data(renderableLinks, (item) => getLinkKey(item.link)).join("line").attr("class", "graph-link").attr("stroke", (item) => item.style.stroke).attr("stroke-width", (item) => item.style.strokeWidth).attr("opacity", (item) => item.style.opacity).attr("marker-end", (item) => item.markerEnd).style("pointer-events", "stroke");
+  const linkSelection = ctx.root.select('[data-layer="links"]').selectAll("line").data(renderableLinks, (item) => getLinkKey(item.link)).join("line").attr("class", "graph-link").attr("stroke", (item) => item.style.stroke).attr("stroke-width", (item) => item.style.strokeWidth).attr("opacity", (item) => item.style.opacity).attr("marker-end", (item) => item.markerEnd).style("pointer-events", "stroke").style("cursor", "pointer");
   const labelSelection = ctx.root.selectAll(".link-label");
   linkSelection.on("mouseenter.label-hover", (_event, d) => {
     labelSelection.filter((labelItem) => labelItem.link === d.link && labelItem.style.label.visibility === "hover").interrupt().transition().duration(200).style("opacity", 1);
@@ -4200,7 +4200,9 @@ function createNodeHover(nodeSelection, hoverStyle) {
       return s.id === d.id || t.id === d.id;
     }).interrupt().transition().duration(200).style("opacity", 1).style("pointer-events", "auto");
   }).on("mouseleave.labels", (_event) => {
-    labelSelection.filter((item) => item.style.label.visibility === "hover").interrupt().transition().duration(200).style("opacity", 0).style("pointer-events", "none");
+    labelSelection.filter(function(item) {
+      return item.style.label.visibility === "hover" && !this.classList.contains("label-selection-pinned");
+    }).interrupt().transition().duration(200).style("opacity", 0).style("pointer-events", "none");
   });
 }
 
@@ -4486,6 +4488,60 @@ async function captureAndDownloadGraph(container, options = {}) {
   }
 }
 
+// src/utils/node-link-selection.utils.ts
+function deselectNode(nodeElement, root2, nodeSelectHandlers, nodeDeselectHandlers) {
+  nodeElement.style.fill = "";
+  nodeElement.style.stroke = "";
+  nodeElement.style.strokeWidth = "";
+  nodeElement.style.opacity = "";
+  nodeElement.style.removeProperty("r");
+  root2.selectAll(".link-label.label-selection-pinned").classed("label-selection-pinned", false).interrupt().transition().duration(200).style("opacity", 0).style("pointer-events", "none");
+  const nodeData = select_default2(nodeElement).datum();
+  nodeSelectHandlers.clear();
+  nodeDeselectHandlers.forEach((handler) => handler(nodeData, nodeElement));
+}
+function deselectLink(linkElement, linkMarkerSnapshots, linkSelectHandlers, linkDeselectHandlers) {
+  linkElement.style.stroke = "";
+  linkElement.style.strokeWidth = "";
+  linkElement.style.opacity = "";
+  const originalMarkerEnd = linkMarkerSnapshots.get(linkElement);
+  if (originalMarkerEnd) {
+    linkElement.setAttribute("marker-end", originalMarkerEnd);
+  } else {
+    linkElement.removeAttribute("marker-end");
+  }
+  const linkData = select_default2(linkElement).datum().link;
+  linkSelectHandlers.clear();
+  linkDeselectHandlers.forEach((handler) => handler(linkData, linkElement));
+}
+function selectLink(event, renderableLink, linkElement, selectionConfig, layers, linkSelectHandlers) {
+  event.stopPropagation();
+  const linkStyle = selectionConfig.linkStyle;
+  if (linkStyle) {
+    if (linkStyle.stroke !== void 0) {
+      linkElement.style.stroke = linkStyle.stroke;
+    }
+    if (linkStyle.strokeWidth !== void 0) {
+      linkElement.style.strokeWidth = String(linkStyle.strokeWidth);
+    }
+    if (linkStyle.opacity !== void 0) {
+      linkElement.style.opacity = String(linkStyle.opacity);
+    }
+    if (linkStyle.stroke !== void 0 && renderableLink.style.arrow.enabled) {
+      const selectionMarkerStyle = {
+        stroke: linkStyle.stroke,
+        arrow: { fill: linkStyle.stroke, size: renderableLink.style.arrow.size }
+      };
+      const selectionMarkerId = createArrowMarker({ svg: layers.svg, style: selectionMarkerStyle });
+      select_default2(linkElement).attr("marker-end", `url(#${selectionMarkerId})`);
+    }
+  }
+  linkSelectHandlers.forEach((handler) => handler(renderableLink.link, linkElement));
+}
+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);
+}
+
 // src/create-graph.ts
 function createGraph(config) {
   let cleanupResize = null;
@@ -4499,6 +4555,45 @@ function createGraph(config) {
   let svgElement = null;
   let zoomBehavior = null;
   let simulation = null;
+  const nodeSelectHandlers = /* @__PURE__ */ new Set();
+  const nodeDeselectHandlers = /* @__PURE__ */ new Set();
+  const linkSelectHandlers = /* @__PURE__ */ new Set();
+  const linkDeselectHandlers = /* @__PURE__ */ new Set();
+  function on(event, handler) {
+    if (event === "nodeSelect") {
+      nodeSelectHandlers.add(handler);
+      return () => {
+        nodeSelectHandlers.delete(handler);
+      };
+    }
+    if (event === "nodeDeselect") {
+      nodeDeselectHandlers.add(handler);
+      return () => {
+        nodeDeselectHandlers.delete(handler);
+      };
+    }
+    if (event === "linkSelect") {
+      linkSelectHandlers.add(handler);
+      return () => {
+        linkSelectHandlers.delete(handler);
+      };
+    }
+    linkDeselectHandlers.add(handler);
+    return () => {
+      linkDeselectHandlers.delete(handler);
+    };
+  }
+  function off(event, handler) {
+    if (event === "nodeSelect") {
+      nodeSelectHandlers.delete(handler);
+    } else if (event === "nodeDeselect") {
+      nodeDeselectHandlers.delete(handler);
+    } else if (event === "linkSelect") {
+      linkSelectHandlers.delete(handler);
+    } else {
+      linkDeselectHandlers.delete(handler);
+    }
+  }
   function render() {
     destroy();
     const layers = createGraphLayers(config.container);
@@ -4582,10 +4677,117 @@ function createGraph(config) {
     if (config.interaction?.drag?.enabled !== false) {
       nodeSelection.call(createDragBehavior(simulation));
     }
+    const selectionConfig = config.interaction?.selection;
+    if (selectionConfig?.enabled) {
+      let selectedNodeElement = null;
+      let selectedLinkElement = null;
+      const linkMarkerSnapshots = /* @__PURE__ */ new Map();
+      linkSelection.each(function() {
+        const linkElement = this;
+        linkMarkerSnapshots.set(linkElement, linkElement.getAttribute("marker-end"));
+      });
+      nodeSelection.on("click.select", function(event, node) {
+        event.stopPropagation();
+        const nodeElement = this;
+        if (selectedNodeElement === nodeElement) {
+          deselectNode(nodeElement, root2, nodeSelectHandlers, nodeDeselectHandlers);
+          selectedNodeElement = null;
+          return;
+        }
+        if (selectedNodeElement) {
+          deselectNode(selectedNodeElement, root2, nodeSelectHandlers, nodeDeselectHandlers);
+          selectedNodeElement = null;
+        }
+        if (selectedLinkElement) {
+          deselectLink(selectedLinkElement, linkMarkerSnapshots, linkSelectHandlers, linkDeselectHandlers);
+          selectedLinkElement = null;
+        }
+        selectedNodeElement = nodeElement;
+        const nodeStyle = selectionConfig.nodeStyle;
+        if (nodeStyle) {
+          if (nodeStyle.fill !== void 0) {
+            nodeElement.style.fill = nodeStyle.fill;
+          }
+          if (nodeStyle.stroke !== void 0) {
+            nodeElement.style.stroke = nodeStyle.stroke;
+          }
+          if (nodeStyle.strokeWidth !== void 0) {
+            nodeElement.style.strokeWidth = String(nodeStyle.strokeWidth);
+          }
+          if (nodeStyle.opacity !== void 0) {
+            nodeElement.style.opacity = String(nodeStyle.opacity);
+          }
+          if (nodeStyle.radius !== void 0) {
+            nodeElement.style.setProperty("r", String(nodeStyle.radius));
+          }
+        }
+        root2.selectAll(".link-label").filter((item) => {
+          if (item.style.label.visibility !== "hover") {
+            return false;
+          }
+          const source = item.link.source;
+          const target = item.link.target;
+          return source.id === node.id || target.id === node.id;
+        }).classed("label-selection-pinned", true).interrupt().transition().duration(200).style("opacity", 1).style("pointer-events", "auto");
+        nodeSelectHandlers.forEach((handler) => handler(node, nodeElement));
+      });
+      linkSelection.on("click.select", function(event, renderableLink) {
+        const linkElement = this;
+        if (selectedLinkElement === linkElement) {
+          deselectLink(linkElement, linkMarkerSnapshots, linkSelectHandlers, linkDeselectHandlers);
+          selectedLinkElement = null;
+          return;
+        }
+        if (selectedLinkElement) {
+          deselectLink(selectedLinkElement, linkMarkerSnapshots, linkSelectHandlers, linkDeselectHandlers);
+          selectedLinkElement = null;
+        }
+        if (selectedNodeElement) {
+          deselectNode(selectedNodeElement, root2, nodeSelectHandlers, nodeDeselectHandlers);
+          selectedNodeElement = null;
+        }
+        selectedLinkElement = linkElement;
+        selectLink(event, renderableLink, linkElement, selectionConfig, layers, linkSelectHandlers);
+      });
+      const linkHitAreaSelection = createLinkHitArea(root2, linkSelection);
+      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.on("click.select", function(event, renderableLink) {
+        const visibleLinkNode = linkSelection.filter((d) => d === renderableLink).node();
+        if (visibleLinkNode) {
+          if (selectedLinkElement === visibleLinkNode) {
+            deselectLink(visibleLinkNode, linkMarkerSnapshots, linkSelectHandlers, linkDeselectHandlers);
+            selectedLinkElement = null;
+            return;
+          }
+          if (selectedLinkElement) {
+            deselectLink(selectedLinkElement, linkMarkerSnapshots, linkSelectHandlers, linkDeselectHandlers);
+            selectedLinkElement = null;
+          }
+          if (selectedNodeElement) {
+            deselectNode(selectedNodeElement, root2, nodeSelectHandlers, nodeDeselectHandlers);
+            selectedNodeElement = null;
+          }
+          selectedLinkElement = visibleLinkNode;
+          selectLink(event, renderableLink, visibleLinkNode, selectionConfig, layers, linkSelectHandlers);
+        }
+      });
+      select_default2(layers.svg).on("click.deselect", () => {
+        if (selectedNodeElement) {
+          deselectNode(selectedNodeElement, root2, nodeSelectHandlers, nodeDeselectHandlers);
+          selectedNodeElement = null;
+        }
+        if (selectedLinkElement) {
+          deselectLink(selectedLinkElement, linkMarkerSnapshots, linkSelectHandlers, linkDeselectHandlers);
+          selectedLinkElement = null;
+        }
+      });
+    }
     if (config.controls?.enabled) {
       controls = createGraphControls(
         layers.overlay,
-        { zoomIn, zoomOut, resetView, fitView, destroy, render, exportGraph },
+        { zoomIn, zoomOut, resetView, fitView },
         config.controls
       );
       controls.mount();
@@ -4595,13 +4797,19 @@ function createGraph(config) {
     }
   }
   function resetView() {
-    if (!zoomBehavior || !svgElement) return;
+    if (!zoomBehavior || !svgElement) {
+      return;
+    }
     select_default2(svgElement).transition().duration(400).call(zoomBehavior.transform, identity2);
   }
   function fitView() {
-    if (!zoomBehavior || !rootGroup || !svgElement || dimensions.width === 0 || dimensions.height === 0) return;
+    if (!zoomBehavior || !rootGroup || !svgElement || dimensions.width === 0 || dimensions.height === 0) {
+      return;
+    }
     const bounds = rootGroup.getBBox();
-    if (bounds.width === 0 || bounds.height === 0) return;
+    if (bounds.width === 0 || bounds.height === 0) {
+      return;
+    }
     const scale = Math.min(dimensions.width / bounds.width, dimensions.height / bounds.height) * 0.9;
     const translateX = (dimensions.width - bounds.width * scale) / 2 - bounds.x * scale;
     const translateY = (dimensions.height - bounds.height * scale) / 2 - bounds.y * scale;
@@ -4609,11 +4817,15 @@ function createGraph(config) {
     select_default2(svgElement).transition().duration(400).call(zoomBehavior.transform, transform2);
   }
   function zoomIn() {
-    if (!zoomBehavior || !svgElement) return;
+    if (!zoomBehavior || !svgElement) {
+      return;
+    }
     select_default2(svgElement).transition().call(zoomBehavior.scaleBy, 1.2);
   }
   function zoomOut() {
-    if (!zoomBehavior || !svgElement) return;
+    if (!zoomBehavior || !svgElement) {
+      return;
+    }
     select_default2(svgElement).transition().call(zoomBehavior.scaleBy, 0.8);
   }
   async function exportGraph(fileName) {
@@ -4660,7 +4872,7 @@ function createGraph(config) {
       config.container.removeChild(config.container.firstChild);
     }
   }
-  return { render, zoomIn, zoomOut, resetView, fitView, destroy, exportGraph };
+  return { render, zoomIn, zoomOut, resetView, fitView, destroy, exportGraph, on, off };
 }
 export {
   createGraph

package/package.json

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