polly-graph 0.1.6 → 0.1.7

package/dist/index.cjs

@@ -3767,56 +3767,6 @@ 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";
@@ -4045,6 +3995,56 @@ 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;
@@ -4524,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;
@@ -4538,7 +4592,9 @@ function createGraph(config) {
   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);
@@ -4546,16 +4602,32 @@ function createGraph(config) {
         nodeSelectHandlers.delete(handler);
       };
     }
-    linkSelectHandlers.add(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 () => {
-      linkSelectHandlers.delete(handler);
+      linkDeselectHandlers.delete(handler);
     };
   }
   function off(event, handler) {
     if (event === "nodeSelect") {
       nodeSelectHandlers.delete(handler);
-    } else {
+    } else if (event === "nodeDeselect") {
+      nodeDeselectHandlers.delete(handler);
+    } else if (event === "linkSelect") {
       linkSelectHandlers.delete(handler);
+    } else {
+      linkDeselectHandlers.delete(handler);
     }
   }
   function render() {
@@ -4650,44 +4722,22 @@ function createGraph(config) {
         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();
+          deselectNode(nodeElement, root2, nodeSelectHandlers, nodeDeselectHandlers);
+          selectedNodeElement = null;
           return;
         }
-        deselectNode();
-        deselectLink();
+        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) {
@@ -4717,53 +4767,57 @@ function createGraph(config) {
         }).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();
+      linkSelection.on("click.select", function(event, renderableLink) {
+        const linkElement = this;
         if (selectedLinkElement === linkElement) {
-          deselectLink();
+          deselectLink(linkElement, linkMarkerSnapshots, linkSelectHandlers, linkDeselectHandlers);
+          selectedLinkElement = null;
           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})`);
-          }
+        if (selectedLinkElement) {
+          deselectLink(selectedLinkElement, linkMarkerSnapshots, linkSelectHandlers, linkDeselectHandlers);
+          selectedLinkElement = null;
         }
-        linkSelectHandlers.forEach((handler) => handler(renderableLink.link, linkElement));
-      };
-      linkSelection.on("click.select", function(event, renderableLink) {
-        selectLink(event, renderableLink, this);
+        if (selectedNodeElement) {
+          deselectNode(selectedNodeElement, root2, nodeSelectHandlers, nodeDeselectHandlers);
+          selectedNodeElement = null;
+        }
+        selectedLinkElement = linkElement;
+        selectLink(event, renderableLink, linkElement, selectionConfig, layers, linkSelectHandlers);
       });
-      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);
+      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) {
-          selectLink(event, renderableLink, 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", () => {
-        deselectNode();
-        deselectLink();
+        if (selectedNodeElement) {
+          deselectNode(selectedNodeElement, root2, nodeSelectHandlers, nodeDeselectHandlers);
+          selectedNodeElement = null;
+        }
+        if (selectedLinkElement) {
+          deselectLink(selectedLinkElement, linkMarkerSnapshots, linkSelectHandlers, linkDeselectHandlers);
+          selectedLinkElement = null;
+        }
       });
     }
     if (config.controls?.enabled) {

package/dist/index.d.cts

@@ -139,9 +139,13 @@ interface GraphInstance {
     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

@@ -139,9 +139,13 @@ interface GraphInstance {
     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

@@ -3731,56 +3731,6 @@ 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";
@@ -4009,6 +3959,56 @@ 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;
@@ -4488,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;
@@ -4502,7 +4556,9 @@ function createGraph(config) {
   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);
@@ -4510,16 +4566,32 @@ function createGraph(config) {
         nodeSelectHandlers.delete(handler);
       };
     }
-    linkSelectHandlers.add(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 () => {
-      linkSelectHandlers.delete(handler);
+      linkDeselectHandlers.delete(handler);
     };
   }
   function off(event, handler) {
     if (event === "nodeSelect") {
       nodeSelectHandlers.delete(handler);
-    } else {
+    } else if (event === "nodeDeselect") {
+      nodeDeselectHandlers.delete(handler);
+    } else if (event === "linkSelect") {
       linkSelectHandlers.delete(handler);
+    } else {
+      linkDeselectHandlers.delete(handler);
     }
   }
   function render() {
@@ -4614,44 +4686,22 @@ function createGraph(config) {
         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();
+          deselectNode(nodeElement, root2, nodeSelectHandlers, nodeDeselectHandlers);
+          selectedNodeElement = null;
           return;
         }
-        deselectNode();
-        deselectLink();
+        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) {
@@ -4681,53 +4731,57 @@ function createGraph(config) {
         }).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();
+      linkSelection.on("click.select", function(event, renderableLink) {
+        const linkElement = this;
         if (selectedLinkElement === linkElement) {
-          deselectLink();
+          deselectLink(linkElement, linkMarkerSnapshots, linkSelectHandlers, linkDeselectHandlers);
+          selectedLinkElement = null;
           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})`);
-          }
+        if (selectedLinkElement) {
+          deselectLink(selectedLinkElement, linkMarkerSnapshots, linkSelectHandlers, linkDeselectHandlers);
+          selectedLinkElement = null;
         }
-        linkSelectHandlers.forEach((handler) => handler(renderableLink.link, linkElement));
-      };
-      linkSelection.on("click.select", function(event, renderableLink) {
-        selectLink(event, renderableLink, this);
+        if (selectedNodeElement) {
+          deselectNode(selectedNodeElement, root2, nodeSelectHandlers, nodeDeselectHandlers);
+          selectedNodeElement = null;
+        }
+        selectedLinkElement = linkElement;
+        selectLink(event, renderableLink, linkElement, selectionConfig, layers, linkSelectHandlers);
       });
-      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);
+      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) {
-          selectLink(event, renderableLink, 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", () => {
-        deselectNode();
-        deselectLink();
+        if (selectedNodeElement) {
+          deselectNode(selectedNodeElement, root2, nodeSelectHandlers, nodeDeselectHandlers);
+          selectedNodeElement = null;
+        }
+        if (selectedLinkElement) {
+          deselectLink(selectedLinkElement, linkMarkerSnapshots, linkSelectHandlers, linkDeselectHandlers);
+          selectedLinkElement = null;
+        }
       });
     }
     if (config.controls?.enabled) {

package/package.json

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