polly-graph 0.1.4 → 0.1.5

package/README.md

@@ -4,14 +4,10 @@ Reusable D3-based graph visualization SDK with configurable nodes, links, labels
 
 ## Features
 
-* Interactive force-directed graph rendering
-* Configurable nodes, links, and labels
-* Hover states with tooltip support
-* Node selection support
-* Drag and zoom interactions
-* Arrow markers and relationship visualization
-* Framework-agnostic API
-* Angular and React compatible
+* **Managed Root Architecture**: Provide one host element; the SDK internally manages the SVG canvas and the HTML UI overlay.
+* **Smart Positioning**: Controls and legends use a class-based system (`pg-pos-top-right`) with CSS variable overrides for precision offsets.
+* **Declarative Styling**: Fully customizable node and link aesthetics via style objects.
+* **Animated UI**: Legends feature directional "retraction" animations that sync with their anchor position.
 
 ---
 
@@ -21,89 +17,46 @@ Reusable D3-based graph visualization SDK with configurable nodes, links, labels
 npm install polly-graph
 ```
 
-No separate D3 installation is required.
-
 ---
 
 ## Basic Usage
 
 ### HTML
-
 ```html
-<div class="graph-wrapper">
-  <svg id="graph-container"></svg>
-</div>
+<div id="graph-viewport" style="position: relative; width: 100%; height: 600px;"></div>
 ```
 
 ### TypeScript
-
 ```ts
-import {
-  createGraph,
-  GraphNode,
-  GraphLink,
-} from 'polly-graph';
-
-const container = document.getElementById(
-  'graph-container',
-) as SVGSVGElement;
-
-const nodes: GraphNode[] = [
-  {
-    id: 'users',
-    label: 'Users',
-    style: {
-      radius: 24,
-      fill: '#7c3aed',
-      stroke: '#6d28d9',
-      strokeWidth: 2,
-      textColor: '#ffffff',
-    },
-  },
-  {
-    id: 'orders',
-    label: 'Orders',
-    style: {
-      radius: 24,
-      fill: '#2563eb',
-      stroke: '#1d4ed8',
-      strokeWidth: 2,
-      textColor: '#ffffff',
-    },
-  },
-];
-
-const links: GraphLink[] = [
-  {
-    source: 'users',
-    target: 'orders',
-    label: 'has_many',
-    style: {
-      stroke: '#94a3b8',
-      strokeWidth: 2,
-      opacity: 1,
-    },
-  },
-];
+import { createGraph } from 'polly-graph';
+
+const viewport = document.getElementById('graph-viewport') as HTMLElement;
 
 const graph = createGraph({
-  container,
-  nodes,
-  links,
-  interaction: {
-    drag: {
-      enabled: true,
-    },
-    hover: {
-      enabled: true,
-      tooltip: {
-        enabled: true,
-      },
-    },
-    selection: {
-      enabled: true,
-    },
-  },
+  container: viewport,
+  nodes: [
+    { 
+      id: 'n1', 
+      label: 'Core Service', 
+      style: { 
+        radius: 30, 
+        fill: '#7c3aed', 
+        stroke: '#5b21b6', 
+        strokeWidth: 2,
+        textColor: '#ffffff',
+        fontSize: 12
+      } 
+    }
+  ],
+  links: [
+    { 
+      source: 'n1', 
+      target: 'n2', 
+      style: { stroke: '#94a3b8', strokeWidth: 2, opacity: 0.6 } 
+    }
+  ],
+  controls: { enabled: true, position: 'top-right' },
+  legend: { enabled: true, position: 'bottom-left' }
 });
 
 graph.render();
@@ -111,107 +64,77 @@ graph.render();
 
 ---
 
-## Hover + Tooltip Example
-
-```ts
-interaction: {
-  hover: {
-    enabled: true,
-    tooltip: {
-      enabled: true,
-      theme: 'dark',
-    },
-    nodeStyle: {
-      stroke: '#16a34a',
-      strokeWidth: 3,
-      opacity: 1,
-    },
-  },
-}
-```
-
----
+## Styling & Customization
 
-## Selection Example
+### Node Styles
+Every node can have a unique appearance defined in its `style` object.
+| Property | Type | Description |
+| :--- | :--- | :--- |
+| `radius` | `number` | The size of the node. |
+| `fill` | `string` | Background color (hex/rgb). |
+| `stroke` | `string` | Border color. |
+| `strokeWidth`| `number` | Thickness of the border. |
+| `textColor` | `string` | Label color. |
 
+### Link Styles
+Links support custom coloring, thickness, and arrow markers.
 ```ts
-selection: {
-  enabled: true,
-  multiSelect: false,
-  nodeStyle: {
-    stroke: '#f59e0b',
-    strokeWidth: 4,
-    opacity: 1,
-  },
+style: {
+  stroke: '#cbd5e1',
+  strokeWidth: 1.5,
+  opacity: 0.8,
+  dashed: false // Coming soon
 }
 ```
 
 ---
 
-## Angular Example
+## Positioning Logic
 
-### Template
+The UI components (Controls & Legend) use a hybrid positioning system.
 
-```html
-<div class="graph-wrapper">
-  <svg #svgRef></svg>
-</div>
-```
+### 1. Corner Anchoring
+Use the `position` property to anchor elements to viewport corners. The SDK applies classes like `.pg-pos-top-right` which handles the layout logic.
 
-### Component
+Available positions:
+* `top-left`
+* `top-right`
+* `bottom-left`
+* `bottom-right`
 
-```ts
-this.graph = createGraph({
-  container: this.svgRef.nativeElement,
-  nodes,
-  links,
-  interaction,
-});
+### 2. Custom Offsets
+While the corners provide the anchor, you can use the `offset` object for fine-tuning. This values are passed into CSS variables `--pg-offset-x` and `--pg-offset-y` internally.
 
-this.graph.render();
+```ts
+controls: {
+  position: 'top-right',
+  offset: { x: 24, y: 24 } // 24px away from the top and right edges
+}
 ```
 
----
-
-## Public API
-
-### Main Exports
-
-* `createGraph`
-* `GraphInstance`
-* `GraphNode`
-* `GraphLink`
-* `GraphConfig`
-* `GraphInteractionConfig`
+### 3. Directional Legend Retraction
+The Legend component is aware of its position.
+* If anchored **Left**: It collapses to the left; the toggle icon points **Right** to expand.
+* If anchored **Right**: It collapses to the right; the toggle icon points **Left** to expand.
 
 ---
 
-## Development
+## Framework Integration
 
-```bash
-npm install
-npm run dev
-npm run build
-npm run lint
-npm run typecheck
-npm run test
+### Angular
+```ts
+@ViewChild('viewport') viewport!: ElementRef;
+
+ngAfterViewInit() {
+  this.graph = createGraph({
+    container: this.viewport.nativeElement,
+    // ... config
+  });
+  this.graph.render();
+}
 ```
 
 ---
 
-## Publish Checklist
-
-* Package name available on npm
-* README completed
-* LICENSE added
-* Build succeeds
-* Tests pass
-* npm token configured
-* GitHub workflow passes
-* Repository is public
-
----
-
 ## License
-
-MIT
+MIT

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,10 +3752,17 @@ 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 };
 }
@@ -4000,6 +3945,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 +3981,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,
@@ -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");
+  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,35 @@ 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((item) => item.style.label.visibility === "hover").interrupt().transition().duration(200).style("opacity", 0).style("pointer-events", "none");
+  });
 }
 
 // src/utils/resolve-tooltip-position.ts
@@ -4589,6 +4529,7 @@ 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;
@@ -4605,9 +4546,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 +4574,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;
@@ -4682,7 +4632,7 @@ function createGraph(config) {
   }
   function resetView() {
     if (!zoomBehavior || !svgElement) return;
-    select_default2(svgElement).transition().call(zoomBehavior.transform, identity2);
+    select_default2(svgElement).transition().duration(400).call(zoomBehavior.transform, identity2);
   }
   function fitView() {
     if (!zoomBehavior || !rootGroup || !svgElement || dimensions.width === 0 || dimensions.height === 0) return;
@@ -4692,7 +4642,7 @@ function createGraph(config) {
     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;
@@ -4711,6 +4661,10 @@ function createGraph(config) {
     });
   }
   function destroy() {
+    if (fitViewTimer) {
+      clearTimeout(fitViewTimer);
+      fitViewTimer = null;
+    }
     if (cleanupResize) {
       cleanupResize();
       cleanupResize = null;

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;

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;

package/dist/index.js

@@ -3608,68 +3608,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 = "";
@@ -3778,10 +3716,17 @@ 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 };
 }
@@ -3964,6 +3909,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,
@@ -3999,6 +3945,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,
@@ -4099,7 +4046,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");
+  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
@@ -4169,7 +4123,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)
   );
@@ -4181,7 +4138,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;
@@ -4210,58 +4173,35 @@ 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((item) => item.style.label.visibility === "hover").interrupt().transition().duration(200).style("opacity", 0).style("pointer-events", "none");
+  });
 }
 
 // src/utils/resolve-tooltip-position.ts
@@ -4553,6 +4493,7 @@ 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;
@@ -4569,9 +4510,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,
@@ -4589,8 +4538,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;
@@ -4646,7 +4596,7 @@ function createGraph(config) {
   }
   function resetView() {
     if (!zoomBehavior || !svgElement) return;
-    select_default2(svgElement).transition().call(zoomBehavior.transform, identity2);
+    select_default2(svgElement).transition().duration(400).call(zoomBehavior.transform, identity2);
   }
   function fitView() {
     if (!zoomBehavior || !rootGroup || !svgElement || dimensions.width === 0 || dimensions.height === 0) return;
@@ -4656,7 +4606,7 @@ function createGraph(config) {
     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;
@@ -4675,6 +4625,10 @@ function createGraph(config) {
     });
   }
   function destroy() {
+    if (fitViewTimer) {
+      clearTimeout(fitViewTimer);
+      fitViewTimer = null;
+    }
     if (cleanupResize) {
       cleanupResize();
       cleanupResize = null;

package/package.json

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