polly-graph 0.1.4 → 0.1.6

package/dist/index.cjs

@@ -3644,68 +3644,6 @@ function manyBody_default() {
   return force;
 }
 
-// node_modules/d3-force/src/x.js
-function x_default2(x3) {
-  var strength = constant_default5(0.1), nodes, strengths, xz;
-  if (typeof x3 !== "function") x3 = constant_default5(x3 == null ? 0 : +x3);
-  function force(alpha) {
-    for (var i = 0, n = nodes.length, node; i < n; ++i) {
-      node = nodes[i], node.vx += (xz[i] - node.x) * strengths[i] * alpha;
-    }
-  }
-  function initialize() {
-    if (!nodes) return;
-    var i, n = nodes.length;
-    strengths = new Array(n);
-    xz = new Array(n);
-    for (i = 0; i < n; ++i) {
-      strengths[i] = isNaN(xz[i] = +x3(nodes[i], i, nodes)) ? 0 : +strength(nodes[i], i, nodes);
-    }
-  }
-  force.initialize = function(_) {
-    nodes = _;
-    initialize();
-  };
-  force.strength = function(_) {
-    return arguments.length ? (strength = typeof _ === "function" ? _ : constant_default5(+_), initialize(), force) : strength;
-  };
-  force.x = function(_) {
-    return arguments.length ? (x3 = typeof _ === "function" ? _ : constant_default5(+_), initialize(), force) : x3;
-  };
-  return force;
-}
-
-// node_modules/d3-force/src/y.js
-function y_default2(y3) {
-  var strength = constant_default5(0.1), nodes, strengths, yz;
-  if (typeof y3 !== "function") y3 = constant_default5(y3 == null ? 0 : +y3);
-  function force(alpha) {
-    for (var i = 0, n = nodes.length, node; i < n; ++i) {
-      node = nodes[i], node.vy += (yz[i] - node.y) * strengths[i] * alpha;
-    }
-  }
-  function initialize() {
-    if (!nodes) return;
-    var i, n = nodes.length;
-    strengths = new Array(n);
-    yz = new Array(n);
-    for (i = 0; i < n; ++i) {
-      strengths[i] = isNaN(yz[i] = +y3(nodes[i], i, nodes)) ? 0 : +strength(nodes[i], i, nodes);
-    }
-  }
-  force.initialize = function(_) {
-    nodes = _;
-    initialize();
-  };
-  force.strength = function(_) {
-    return arguments.length ? (strength = typeof _ === "function" ? _ : constant_default5(+_), initialize(), force) : strength;
-  };
-  force.y = function(_) {
-    return arguments.length ? (y3 = typeof _ === "function" ? _ : constant_default5(+_), initialize(), force) : y3;
-  };
-  return force;
-}
-
 // src/core/create-graph-layers.ts
 function createGraphLayers(host) {
   host.innerHTML = "";
@@ -3814,14 +3752,71 @@ function createGraphSimulation(config) {
   });
   const simulation = simulation_default(config.nodes).alpha(0.9).alphaDecay(0.12).alphaMin(0.03).velocityDecay(0.5).force(
     "link",
-    link_default(config.links).id((d) => d.id).distance(150).strength(0.4)
+    link_default(config.links).id((d) => d.id).distance((d) => {
+      const source = d.source;
+      const target = d.target;
+      const sourceR = source.style?.radius || 20;
+      const targetR = target.style?.radius || 20;
+      const labelBuffer = d.style?.label?.height || 40;
+      return (sourceR + targetR + labelBuffer) * 2;
+    }).strength(0.8)
   ).force("charge", manyBody_default().strength(-220)).force(
     "collide",
-    collide_default().radius((node) => (node.style?.radius ?? 12) + 10).strength(0.9)
+    collide_default().radius((node) => (node.style?.radius ?? 12) + 10).iterations(2)
   ).force("center", center_default(centerX, centerY).strength(0.08));
   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";
@@ -4000,6 +3995,7 @@ var DEFAULT_LINK_STYLE = {
   },
   label: {
     enabled: true,
+    visibility: "always",
     backgroundFill: "color-mix(in srgb, #8E42EE, #FFFFFF 90%)",
     borderColor: "color-mix(in srgb, #8E42EE, #FFFFFF 10%)",
     borderWidth: 1.5,
@@ -4035,6 +4031,7 @@ function mergeLinkStyle(base, override) {
     },
     label: {
       enabled: override?.label?.enabled ?? base.label.enabled,
+      visibility: override?.label?.visibility ?? base.label.visibility,
       backgroundFill: override?.label?.backgroundFill ?? base.label.backgroundFill,
       borderColor: override?.label?.borderColor ?? base.label.borderColor,
       borderWidth: override?.label?.borderWidth ?? base.label.borderWidth,
@@ -4048,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;
@@ -4135,7 +4082,14 @@ function getLinkKey(link) {
 }
 function renderLinks(ctx, links) {
   const renderableLinks = createRenderableLinks(ctx, links);
-  return ctx.root.select('[data-layer="links"]').selectAll("line").data(renderableLinks, (item) => getLinkKey(item.link)).join("line").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);
+  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);
+  }).on("mouseleave.label-hover", (_event, d) => {
+    labelSelection.filter((labelItem) => labelItem.link === d.link && labelItem.style.label.visibility === "hover").interrupt().transition().duration(200).style("opacity", 0);
+  });
+  return linkSelection;
 }
 
 // src/renderer/nodes.ts
@@ -4205,7 +4159,10 @@ function renderNodeLabels(ctx, nodes) {
 // src/renderer/link-labels.ts
 function createRenderableLinks2(params, links) {
   return links.map(
-    (link) => ({ link, style: resolveLinkStyle({ link, interaction: params.interaction }) })
+    (link) => ({
+      link,
+      style: resolveLinkStyle({ link, interaction: params.interaction })
+    })
   ).filter(
     (item) => item.style.label.enabled && Boolean(item.link.label)
   );
@@ -4217,7 +4174,13 @@ function getLinkKey2(link) {
 }
 function renderLinkLabels(params, links) {
   const renderableLinks = createRenderableLinks2(params, links);
-  const labelSelection = params.root.select('[data-layer="link-labels"]').selectAll(".link-label").data(renderableLinks, (item) => getLinkKey2(item.link)).join("g").attr("class", "link-label").attr("pointer-events", "auto").attr("cursor", "pointer");
+  const labelSelection = params.root.select('[data-layer="link-labels"]').selectAll(".link-label").data(renderableLinks, (item) => getLinkKey2(item.link)).join("g").attr("class", "link-label").style("opacity", (item) => {
+    const visibility = item.style.label.visibility ?? "always";
+    return visibility === "always" ? 1 : 0;
+  }).style("pointer-events", (item) => {
+    const visibility = item.style.label.visibility ?? "always";
+    return visibility === "always" ? "auto" : "none";
+  }).style("cursor", "pointer");
   labelSelection.selectAll("rect").data((item) => [item]).join("rect").attr("rx", (item) => item.style.label.borderRadius).attr("ry", (item) => item.style.label.borderRadius).attr("height", (item) => item.style.label.height).attr("fill", (item) => item.style.label.backgroundFill).attr("stroke", (item) => item.style.label.borderColor).attr("stroke-width", (item) => item.style.label.borderWidth);
   labelSelection.selectAll("text").data((item) => [item]).join("text").attr("text-anchor", "middle").attr("dominant-baseline", "middle").attr("font-size", (item) => item.style.label.fontSize).attr("fill", (item) => item.style.label.textColor).text((item) => item.link.label ?? "");
   return labelSelection;
@@ -4246,58 +4209,37 @@ function createDragBehavior(simulation) {
 
 // src/interactions/create-node-hover.ts
 function createNodeHover(nodeSelection, hoverStyle) {
-  if (!hoverStyle) {
-    return;
-  }
-  nodeSelection.on(
-    "mouseenter.hover",
-    function(_event, node) {
+  const firstNode = nodeSelection.node();
+  if (!firstNode) return;
+  if (hoverStyle) {
+    nodeSelection.on("mouseenter.hover", function(_event, node) {
       const circle = this;
-      const hoverStroke = hoverStyle.stroke ?? node.style?.stroke ?? "#ffffff";
-      const hoverStrokeWidth = hoverStyle.strokeWidth ?? node.style?.strokeWidth ?? 1.5;
-      const hoverOpacity = hoverStyle.opacity ?? node.style?.opacity ?? 1;
-      circle.setAttribute(
-        "stroke",
-        hoverStroke
-      );
-      circle.setAttribute(
-        "stroke-width",
-        String(
-          hoverStrokeWidth
-        )
-      );
-      circle.setAttribute(
-        "opacity",
-        String(
-          hoverOpacity
-        )
-      );
-    }
-  ).on(
-    "mouseleave.hover",
-    function(_event, node) {
+      circle.setAttribute("stroke", hoverStyle.stroke ?? node.style?.stroke ?? "#ffffff");
+      circle.setAttribute("stroke-width", String(hoverStyle.strokeWidth ?? node.style?.strokeWidth ?? 1.5));
+      circle.setAttribute("opacity", String(hoverStyle.opacity ?? node.style?.opacity ?? 1));
+    }).on("mouseleave.hover", function(_event, node) {
       const circle = this;
-      const defaultStroke = node.style?.stroke ?? "#ffffff";
-      const defaultStrokeWidth = node.style?.strokeWidth ?? 1.5;
-      const defaultOpacity = node.style?.opacity ?? 1;
-      circle.setAttribute(
-        "stroke",
-        defaultStroke
-      );
-      circle.setAttribute(
-        "stroke-width",
-        String(
-          defaultStrokeWidth
-        )
-      );
-      circle.setAttribute(
-        "opacity",
-        String(
-          defaultOpacity
-        )
-      );
-    }
-  );
+      circle.setAttribute("stroke", node.style?.stroke ?? "#ffffff");
+      circle.setAttribute("stroke-width", String(node.style?.strokeWidth ?? 1.5));
+      circle.setAttribute("opacity", String(node.style?.opacity ?? 1));
+    });
+  }
+  const svgElement = firstNode.ownerSVGElement;
+  if (!svgElement) return;
+  const root2 = select_default2(svgElement);
+  const labelSelection = root2.selectAll(".link-label");
+  nodeSelection.on("mouseenter.labels", (_event, d) => {
+    labelSelection.filter((item) => {
+      if (item.style.label.visibility !== "hover") return false;
+      const s = item.link.source;
+      const t = item.link.target;
+      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(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");
+  });
 }
 
 // src/utils/resolve-tooltip-position.ts
@@ -4589,11 +4531,33 @@ function createGraph(config) {
   let tooltipBinding = null;
   let controls = null;
   let legendCleanup = null;
+  let fitViewTimer = null;
   let dimensions = { width: 0, height: 0 };
   let rootGroup = null;
   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);
@@ -4605,9 +4569,17 @@ function createGraph(config) {
       layers.svg.setAttribute("height", String(height));
       layers.interactionRect.setAttribute("width", String(width));
       layers.interactionRect.setAttribute("height", String(height));
-      simulation?.force("x", x_default2(width / 2).strength(0.03));
-      simulation?.force("y", y_default2(height / 2).strength(0.03));
-      simulation?.alpha(0.25).restart();
+      if (simulation) {
+        simulation.force("center", center_default(width / 2, height / 2));
+        simulation.alpha(0.3).restart();
+      }
+      if (fitViewTimer) {
+        clearTimeout(fitViewTimer);
+      }
+      fitViewTimer = setTimeout(() => {
+        fitView();
+        fitViewTimer = null;
+      }, 150);
     });
     const zoomResult = createZoom({
       svg: layers.svg,
@@ -4625,8 +4597,9 @@ function createGraph(config) {
     const simulationConfig = {
       nodes: config.nodes,
       links: config.links,
-      width: config.container.clientWidth,
-      height: config.container.clientHeight
+      // Uses the observed dimensions to ensure physics are calculated on actual container size
+      width: dimensions.width || config.container.clientWidth,
+      height: dimensions.height || config.container.clientHeight
     };
     const simulationResult = createGraphSimulation(simulationConfig);
     simulation = simulationResult.simulation;
@@ -4668,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();
@@ -4681,25 +4779,35 @@ function createGraph(config) {
     }
   }
   function resetView() {
-    if (!zoomBehavior || !svgElement) return;
-    select_default2(svgElement).transition().call(zoomBehavior.transform, identity2);
+    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;
     const transform2 = identity2.translate(translateX, translateY).scale(scale);
-    select_default2(svgElement).transition().call(zoomBehavior.transform, transform2);
+    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) {
@@ -4711,6 +4819,10 @@ function createGraph(config) {
     });
   }
   function destroy() {
+    if (fitViewTimer) {
+      clearTimeout(fitViewTimer);
+      fitViewTimer = null;
+    }
     if (cleanupResize) {
       cleanupResize();
       cleanupResize = null;
@@ -4742,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

@@ -66,6 +66,7 @@ interface LinkArrowStyle {
 }
 interface LinkLabelStyle {
     readonly enabled?: boolean;
+    readonly visibility?: 'always' | 'hover' | 'selection';
     readonly backgroundFill?: string;
     readonly borderColor?: string;
     readonly borderWidth?: number;
@@ -117,6 +118,13 @@ interface GraphConfig {
     readonly container: HTMLElement;
     readonly nodes: GraphNode[];
     readonly links: GraphLink[];
+    readonly autoFit?: boolean;
+    readonly responsive?: boolean;
+    readonly simulation?: {
+        readonly alpha?: number;
+        readonly gravity?: number;
+        readonly linkDistance?: number | ((link: GraphLink) => number);
+    };
     readonly interaction?: GraphInteractionConfig;
     readonly controls?: GraphControlsConfig;
     readonly legend?: LegendConfig;
@@ -130,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

@@ -66,6 +66,7 @@ interface LinkArrowStyle {
 }
 interface LinkLabelStyle {
     readonly enabled?: boolean;
+    readonly visibility?: 'always' | 'hover' | 'selection';
     readonly backgroundFill?: string;
     readonly borderColor?: string;
     readonly borderWidth?: number;
@@ -117,6 +118,13 @@ interface GraphConfig {
     readonly container: HTMLElement;
     readonly nodes: GraphNode[];
     readonly links: GraphLink[];
+    readonly autoFit?: boolean;
+    readonly responsive?: boolean;
+    readonly simulation?: {
+        readonly alpha?: number;
+        readonly gravity?: number;
+        readonly linkDistance?: number | ((link: GraphLink) => number);
+    };
     readonly interaction?: GraphInteractionConfig;
     readonly controls?: GraphControlsConfig;
     readonly legend?: LegendConfig;
@@ -130,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;