polly-graph 0.1.5 → 0.1.6

package/dist/index.cjs

@@ -3767,6 +3767,56 @@ function createGraphSimulation(config) {
   return { simulation };
 }
 
+// src/utils/get-link-marker-id.ts
+function getLinkMarkerId(style) {
+  const markerStyle = {
+    stroke: style.stroke ?? "#94a3b8",
+    strokeWidth: style.strokeWidth ?? 2,
+    arrowFill: style.arrow?.fill ?? style.stroke ?? "#94a3b8",
+    arrowSize: style.arrow?.size ?? 6
+  };
+  const serializedStyle = JSON.stringify(markerStyle);
+  const hash = createHash(serializedStyle);
+  return `graph-arrow-${hash}`;
+}
+function createHash(value) {
+  let hash = 0;
+  for (let index2 = 0; index2 < value.length; index2 += 1) {
+    const charCode = value.charCodeAt(index2);
+    hash = (hash << 5) - hash + charCode;
+    hash |= 0;
+  }
+  return Math.abs(hash).toString(36);
+}
+
+// src/core/create-arrow-marker.ts
+function createArrowMarker(params) {
+  const markerId = getLinkMarkerId(params.style);
+  const existingMarker = params.svg.querySelector(`#${markerId}`);
+  if (existingMarker) {
+    return markerId;
+  }
+  const arrowSize = params.style.arrow?.size ?? 6;
+  const fill = params.style.arrow?.fill ?? params.style.stroke ?? "#94a3b8";
+  const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+  const marker = document.createElementNS("http://www.w3.org/2000/svg", "marker");
+  marker.setAttribute("id", markerId);
+  marker.setAttribute("viewBox", "0 0 20 20");
+  marker.setAttribute("refX", "0");
+  marker.setAttribute("refY", "10");
+  marker.setAttribute("markerWidth", String(arrowSize * 2));
+  marker.setAttribute("markerHeight", String(arrowSize * 2));
+  marker.setAttribute("orient", "auto");
+  marker.setAttribute("markerUnits", "userSpaceOnUse");
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute("d", "M 0 0 L 20 10 L 0 20 z");
+  path.setAttribute("fill", fill);
+  marker.appendChild(path);
+  defs.appendChild(marker);
+  params.svg.insertBefore(defs, params.svg.firstChild);
+  return markerId;
+}
+
 // src/controls/graph-controls.utils.ts
 function resolveControlsPosition(position) {
   return position ?? "bottom-left";
@@ -3995,56 +4045,6 @@ function mergeLinkStyle(base, override) {
   };
 }
 
-// src/utils/get-link-marker-id.ts
-function getLinkMarkerId(style) {
-  const markerStyle = {
-    stroke: style.stroke ?? "#94a3b8",
-    strokeWidth: style.strokeWidth ?? 2,
-    arrowFill: style.arrow?.fill ?? style.stroke ?? "#94a3b8",
-    arrowSize: style.arrow?.size ?? 6
-  };
-  const serializedStyle = JSON.stringify(markerStyle);
-  const hash = createHash(serializedStyle);
-  return `graph-arrow-${hash}`;
-}
-function createHash(value) {
-  let hash = 0;
-  for (let index2 = 0; index2 < value.length; index2 += 1) {
-    const charCode = value.charCodeAt(index2);
-    hash = (hash << 5) - hash + charCode;
-    hash |= 0;
-  }
-  return Math.abs(hash).toString(36);
-}
-
-// src/core/create-arrow-marker.ts
-function createArrowMarker(params) {
-  const markerId = getLinkMarkerId(params.style);
-  const existingMarker = params.svg.querySelector(`#${markerId}`);
-  if (existingMarker) {
-    return markerId;
-  }
-  const arrowSize = params.style.arrow?.size ?? 6;
-  const fill = params.style.arrow?.fill ?? params.style.stroke ?? "#94a3b8";
-  const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-  const marker = document.createElementNS("http://www.w3.org/2000/svg", "marker");
-  marker.setAttribute("id", markerId);
-  marker.setAttribute("viewBox", "0 0 20 20");
-  marker.setAttribute("refX", "0");
-  marker.setAttribute("refY", "10");
-  marker.setAttribute("markerWidth", String(arrowSize * 2));
-  marker.setAttribute("markerHeight", String(arrowSize * 2));
-  marker.setAttribute("orient", "auto");
-  marker.setAttribute("markerUnits", "userSpaceOnUse");
-  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  path.setAttribute("d", "M 0 0 L 20 10 L 0 20 z");
-  path.setAttribute("fill", fill);
-  marker.appendChild(path);
-  defs.appendChild(marker);
-  params.svg.insertBefore(defs, params.svg.firstChild);
-  return markerId;
-}
-
 // src/renderer/links.ts
 function getShortenedTargetPoint(link, style) {
   const source = link.source;
@@ -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");
   });
 }
 
@@ -4535,6 +4537,27 @@ function createGraph(config) {
   let svgElement = null;
   let zoomBehavior = null;
   let simulation = null;
+  const nodeSelectHandlers = /* @__PURE__ */ new Set();
+  const linkSelectHandlers = /* @__PURE__ */ new Set();
+  function on(event, handler) {
+    if (event === "nodeSelect") {
+      nodeSelectHandlers.add(handler);
+      return () => {
+        nodeSelectHandlers.delete(handler);
+      };
+    }
+    linkSelectHandlers.add(handler);
+    return () => {
+      linkSelectHandlers.delete(handler);
+    };
+  }
+  function off(event, handler) {
+    if (event === "nodeSelect") {
+      nodeSelectHandlers.delete(handler);
+    } else {
+      linkSelectHandlers.delete(handler);
+    }
+  }
   function render() {
     destroy();
     const layers = createGraphLayers(config.container);
@@ -4618,10 +4641,135 @@ 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"));
+      });
+      const deselectNode = () => {
+        if (!selectedNodeElement) {
+          return;
+        }
+        const nodeElement = selectedNodeElement;
+        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");
+        selectedNodeElement = null;
+      };
+      const deselectLink = () => {
+        if (!selectedLinkElement) {
+          return;
+        }
+        const linkElement = selectedLinkElement;
+        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");
+        }
+        selectedLinkElement = null;
+      };
+      nodeSelection.on("click.select", function(event, node) {
+        event.stopPropagation();
+        const nodeElement = this;
+        if (selectedNodeElement === nodeElement) {
+          deselectNode();
+          return;
+        }
+        deselectNode();
+        deselectLink();
+        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));
+      });
+      const selectLink = (event, renderableLink, linkElement) => {
+        event.stopPropagation();
+        if (selectedLinkElement === linkElement) {
+          deselectLink();
+          return;
+        }
+        deselectLink();
+        deselectNode();
+        selectedLinkElement = linkElement;
+        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));
+      };
+      linkSelection.on("click.select", function(event, renderableLink) {
+        selectLink(event, renderableLink, this);
+      });
+      const linkHitAreaSelection = 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);
+      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) {
+          selectLink(event, renderableLink, visibleLinkNode);
+        }
+      });
+      select_default2(layers.svg).on("click.deselect", () => {
+        deselectNode();
+        deselectLink();
+      });
+    }
     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 +4779,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 +4799,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 +4854,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,10 @@ interface GraphInstance {
     fitView(): void;
     destroy(): void;
     exportGraph(fileName?: string): void;
+    on(event: 'nodeSelect', handler: (node: GraphNode, element: SVGCircleElement) => void): () => void;
+    on(event: 'linkSelect', handler: (link: GraphLink, element: SVGLineElement) => void): () => void;
+    off(event: 'nodeSelect', handler: (node: GraphNode, element: SVGCircleElement) => void): void;
+    off(event: 'linkSelect', handler: (link: GraphLink, element: SVGLineElement) => void): void;
 }
 
 declare function createGraph(config: GraphConfig): GraphInstance;

package/dist/index.d.ts

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

package/dist/index.js

@@ -3731,6 +3731,56 @@ function createGraphSimulation(config) {
   return { simulation };
 }
 
+// src/utils/get-link-marker-id.ts
+function getLinkMarkerId(style) {
+  const markerStyle = {
+    stroke: style.stroke ?? "#94a3b8",
+    strokeWidth: style.strokeWidth ?? 2,
+    arrowFill: style.arrow?.fill ?? style.stroke ?? "#94a3b8",
+    arrowSize: style.arrow?.size ?? 6
+  };
+  const serializedStyle = JSON.stringify(markerStyle);
+  const hash = createHash(serializedStyle);
+  return `graph-arrow-${hash}`;
+}
+function createHash(value) {
+  let hash = 0;
+  for (let index2 = 0; index2 < value.length; index2 += 1) {
+    const charCode = value.charCodeAt(index2);
+    hash = (hash << 5) - hash + charCode;
+    hash |= 0;
+  }
+  return Math.abs(hash).toString(36);
+}
+
+// src/core/create-arrow-marker.ts
+function createArrowMarker(params) {
+  const markerId = getLinkMarkerId(params.style);
+  const existingMarker = params.svg.querySelector(`#${markerId}`);
+  if (existingMarker) {
+    return markerId;
+  }
+  const arrowSize = params.style.arrow?.size ?? 6;
+  const fill = params.style.arrow?.fill ?? params.style.stroke ?? "#94a3b8";
+  const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+  const marker = document.createElementNS("http://www.w3.org/2000/svg", "marker");
+  marker.setAttribute("id", markerId);
+  marker.setAttribute("viewBox", "0 0 20 20");
+  marker.setAttribute("refX", "0");
+  marker.setAttribute("refY", "10");
+  marker.setAttribute("markerWidth", String(arrowSize * 2));
+  marker.setAttribute("markerHeight", String(arrowSize * 2));
+  marker.setAttribute("orient", "auto");
+  marker.setAttribute("markerUnits", "userSpaceOnUse");
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute("d", "M 0 0 L 20 10 L 0 20 z");
+  path.setAttribute("fill", fill);
+  marker.appendChild(path);
+  defs.appendChild(marker);
+  params.svg.insertBefore(defs, params.svg.firstChild);
+  return markerId;
+}
+
 // src/controls/graph-controls.utils.ts
 function resolveControlsPosition(position) {
   return position ?? "bottom-left";
@@ -3959,56 +4009,6 @@ function mergeLinkStyle(base, override) {
   };
 }
 
-// src/utils/get-link-marker-id.ts
-function getLinkMarkerId(style) {
-  const markerStyle = {
-    stroke: style.stroke ?? "#94a3b8",
-    strokeWidth: style.strokeWidth ?? 2,
-    arrowFill: style.arrow?.fill ?? style.stroke ?? "#94a3b8",
-    arrowSize: style.arrow?.size ?? 6
-  };
-  const serializedStyle = JSON.stringify(markerStyle);
-  const hash = createHash(serializedStyle);
-  return `graph-arrow-${hash}`;
-}
-function createHash(value) {
-  let hash = 0;
-  for (let index2 = 0; index2 < value.length; index2 += 1) {
-    const charCode = value.charCodeAt(index2);
-    hash = (hash << 5) - hash + charCode;
-    hash |= 0;
-  }
-  return Math.abs(hash).toString(36);
-}
-
-// src/core/create-arrow-marker.ts
-function createArrowMarker(params) {
-  const markerId = getLinkMarkerId(params.style);
-  const existingMarker = params.svg.querySelector(`#${markerId}`);
-  if (existingMarker) {
-    return markerId;
-  }
-  const arrowSize = params.style.arrow?.size ?? 6;
-  const fill = params.style.arrow?.fill ?? params.style.stroke ?? "#94a3b8";
-  const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-  const marker = document.createElementNS("http://www.w3.org/2000/svg", "marker");
-  marker.setAttribute("id", markerId);
-  marker.setAttribute("viewBox", "0 0 20 20");
-  marker.setAttribute("refX", "0");
-  marker.setAttribute("refY", "10");
-  marker.setAttribute("markerWidth", String(arrowSize * 2));
-  marker.setAttribute("markerHeight", String(arrowSize * 2));
-  marker.setAttribute("orient", "auto");
-  marker.setAttribute("markerUnits", "userSpaceOnUse");
-  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  path.setAttribute("d", "M 0 0 L 20 10 L 0 20 z");
-  path.setAttribute("fill", fill);
-  marker.appendChild(path);
-  defs.appendChild(marker);
-  params.svg.insertBefore(defs, params.svg.firstChild);
-  return markerId;
-}
-
 // src/renderer/links.ts
 function getShortenedTargetPoint(link, style) {
   const source = link.source;
@@ -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");
   });
 }
 
@@ -4499,6 +4501,27 @@ function createGraph(config) {
   let svgElement = null;
   let zoomBehavior = null;
   let simulation = null;
+  const nodeSelectHandlers = /* @__PURE__ */ new Set();
+  const linkSelectHandlers = /* @__PURE__ */ new Set();
+  function on(event, handler) {
+    if (event === "nodeSelect") {
+      nodeSelectHandlers.add(handler);
+      return () => {
+        nodeSelectHandlers.delete(handler);
+      };
+    }
+    linkSelectHandlers.add(handler);
+    return () => {
+      linkSelectHandlers.delete(handler);
+    };
+  }
+  function off(event, handler) {
+    if (event === "nodeSelect") {
+      nodeSelectHandlers.delete(handler);
+    } else {
+      linkSelectHandlers.delete(handler);
+    }
+  }
   function render() {
     destroy();
     const layers = createGraphLayers(config.container);
@@ -4582,10 +4605,135 @@ 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"));
+      });
+      const deselectNode = () => {
+        if (!selectedNodeElement) {
+          return;
+        }
+        const nodeElement = selectedNodeElement;
+        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");
+        selectedNodeElement = null;
+      };
+      const deselectLink = () => {
+        if (!selectedLinkElement) {
+          return;
+        }
+        const linkElement = selectedLinkElement;
+        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");
+        }
+        selectedLinkElement = null;
+      };
+      nodeSelection.on("click.select", function(event, node) {
+        event.stopPropagation();
+        const nodeElement = this;
+        if (selectedNodeElement === nodeElement) {
+          deselectNode();
+          return;
+        }
+        deselectNode();
+        deselectLink();
+        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));
+      });
+      const selectLink = (event, renderableLink, linkElement) => {
+        event.stopPropagation();
+        if (selectedLinkElement === linkElement) {
+          deselectLink();
+          return;
+        }
+        deselectLink();
+        deselectNode();
+        selectedLinkElement = linkElement;
+        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));
+      };
+      linkSelection.on("click.select", function(event, renderableLink) {
+        selectLink(event, renderableLink, this);
+      });
+      const linkHitAreaSelection = 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);
+      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) {
+          selectLink(event, renderableLink, visibleLinkNode);
+        }
+      });
+      select_default2(layers.svg).on("click.deselect", () => {
+        deselectNode();
+        deselectLink();
+      });
+    }
     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 +4743,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 +4763,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 +4818,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.6",
   "description": "Reusable D3-based graph visualization SDK with configurable nodes, links, labels, interactions, and layout behaviors.",
   "license": "MIT",
   "author": "Badal",