polly-graph 0.1.2 → 0.1.3

package/dist/index.cjs

@@ -3809,6 +3809,138 @@ function createGraphSimulation(config) {
   return { simulation };
 }
 
+// src/controls/graph-controls.utils.ts
+function resolveControlsPosition(position) {
+  return position ?? "bottom-left";
+}
+function resolveControlsOrientation(orientation) {
+  return orientation ?? "vertical";
+}
+function shouldRenderControl(config, key) {
+  const show = config.show;
+  if (!show) {
+    return true;
+  }
+  const value = show[key];
+  if (value === void 0) {
+    return true;
+  }
+  return value;
+}
+
+// src/assets/plus.svg?raw
+var plus_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M5 12h14m-7-7v14" />\n</svg>';
+
+// src/assets/minus.svg?raw
+var minus_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M19 12H5" />\n</svg>';
+
+// src/assets/fit.svg?raw
+var fit_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M5 9V5H9" />\n  <path d="M19 9V5H15" />\n  <path d="M5 15V19H9" />\n  <path d="M19 15V19H15" />\n</svg>';
+
+// src/assets/reset.svg?raw
+var reset_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M20 12a8 8 0 1 1-2.3-5.7" />\n  <path d="M20 4.5v4h-4" />\n</svg>';
+
+// src/controls/graph-controls.icons.ts
+var ICON_MAP = {
+  "zoom-in": plus_default,
+  "zoom-out": minus_default,
+  fit: fit_default,
+  reset: reset_default
+};
+function getControlIcon(icon) {
+  const raw = ICON_MAP[icon];
+  if (!raw) {
+    throw new Error(`Icon not found: ${icon}`);
+  }
+  return raw.replace("<svg", '<svg class="pg-icon"');
+}
+
+// src/controls/create-graph-controls.ts
+function createGraphControls(container, graph, config) {
+  let root2 = null;
+  function mount() {
+    if (!config.enabled) {
+      return;
+    }
+    const parent = container.parentElement;
+    if (!parent) {
+      return;
+    }
+    root2 = document.createElement("div");
+    root2.className = "pg-controls";
+    applyPosition(root2, config);
+    applyOrientation(root2, config);
+    appendControls(root2, config, graph);
+    parent.appendChild(root2);
+  }
+  function appendControls(root3, config2, graph2) {
+    if (shouldRenderControl(config2, "zoomIn")) {
+      root3.appendChild(createButton("zoom-in", "Zoom in", graph2.zoomIn.bind(graph2)));
+    }
+    if (shouldRenderControl(config2, "zoomOut")) {
+      root3.appendChild(createButton("zoom-out", "Zoom out", graph2.zoomOut.bind(graph2)));
+    }
+    if (shouldRenderControl(config2, "fit")) {
+      root3.appendChild(createButton("fit", "Fit view", graph2.fitView.bind(graph2)));
+    }
+    if (shouldRenderControl(config2, "reset")) {
+      root3.appendChild(createButton("reset", "Reset view", graph2.resetView.bind(graph2)));
+    }
+  }
+  function createButton(type, label, onClick) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.setAttribute("aria-label", label);
+    const wrapper = document.createElement("div");
+    wrapper.innerHTML = getControlIcon(type);
+    const svg = wrapper.querySelector("svg");
+    if (!svg) {
+      throw new Error(`Invalid SVG for icon: ${type}`);
+    }
+    svg.classList.add("pg-icon");
+    button.appendChild(svg);
+    button.addEventListener("click", onClick);
+    return button;
+  }
+  function destroy() {
+    if (!root2) {
+      return;
+    }
+    const clone = root2.cloneNode(true);
+    root2.replaceWith(clone);
+    root2 = null;
+  }
+  return { mount, destroy };
+}
+function applyPosition(el, config) {
+  const position = resolveControlsPosition(config.position);
+  const offset = config.offset ?? { x: 16, y: 16 };
+  el.style.position = "absolute";
+  switch (position) {
+    case "bottom-left":
+      el.style.left = `${offset.x}px`;
+      el.style.bottom = `${offset.y}px`;
+      break;
+    case "bottom-right":
+      el.style.right = `${offset.x}px`;
+      el.style.bottom = `${offset.y}px`;
+      break;
+    case "top-left":
+      el.style.left = `${offset.x}px`;
+      el.style.top = `${offset.y}px`;
+      break;
+    case "top-right":
+      el.style.right = `${offset.x}px`;
+      el.style.top = `${offset.y}px`;
+      break;
+  }
+}
+function applyOrientation(el, config) {
+  const orientation = resolveControlsOrientation(config.orientation);
+  el.style.display = "flex";
+  el.style.flexDirection = orientation === "vertical" ? "column" : "row";
+}
+
 // src/utils/resolve-link-style.ts
 var DEFAULT_LINK_STYLE = {
   stroke: "#94a3b8",
@@ -4365,6 +4497,7 @@ function createGraph(config) {
   let cleanupResize = null;
   let cleanupZoom = null;
   let tooltipBinding = null;
+  let controls = null;
   let dimensions = { width: 0, height: 0 };
   let rootGroup = null;
   let zoomBehavior = null;
@@ -4464,6 +4597,10 @@ function createGraph(config) {
     }
     if (config.interaction?.selection?.enabled) {
     }
+    if (config.controls?.enabled) {
+      controls = createGraphControls(config.container, { zoomIn, zoomOut, resetView, fitView, destroy, render }, config.controls);
+      controls.mount();
+    }
   }
   function resetView() {
     if (!zoomBehavior) {
@@ -4534,6 +4671,10 @@ function createGraph(config) {
       simulation.stop();
       simulation = null;
     }
+    if (controls) {
+      controls.destroy();
+      controls = null;
+    }
     rootGroup = null;
     zoomBehavior = null;
     while (config.container.firstChild) {

package/dist/index.css

@@ -10,6 +10,12 @@
   color: #f8fafc;
   border: 1px solid rgba(255, 255, 255, 0.08);
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
+  font-family:
+    "Inter",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
   font-size: 12px;
   line-height: 1.5;
   opacity: 0;
@@ -72,5 +78,46 @@
   margin-top: 4px;
   font-size: 14px;
   font-weight: 600;
+  line-height: 1.4;
   color: #ffffff;
 }
+
+/* src/styles/graph-controls.css */
+.pg-controls {
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), 0 6px 14px rgba(0, 0, 0, 0.06);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: absolute;
+  z-index: 10;
+}
+.pg-controls button {
+  all: unset;
+  align-items: center;
+  background: transparent;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  transition: background 120ms ease, transform 80ms ease;
+  height: 44px;
+  width: 44px;
+}
+.pg-controls button:last-child {
+  border-bottom: none;
+}
+.pg-controls button:hover {
+  background: #f9fafb;
+}
+.pg-controls button:active {
+  background: #f3f4f6;
+}
+.pg-controls button svg.pg-icon {
+  display: block;
+  fill: none;
+  height: 18px;
+  stroke: currentColor;
+  width: 18px;
+}

package/dist/index.d.cts

@@ -1,5 +1,25 @@
 import { SimulationNodeDatum, SimulationLinkDatum } from 'd3-force';
 
+interface Coordinates {
+    readonly x: number;
+    readonly y: number;
+}
+
+type GraphControlsPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type GraphControlsOrientation = 'vertical' | 'horizontal';
+interface GraphControlsConfig {
+    readonly enabled: boolean;
+    readonly position?: GraphControlsPosition;
+    readonly orientation?: GraphControlsOrientation;
+    readonly offset?: Coordinates;
+    readonly show?: {
+        readonly zoomIn?: boolean;
+        readonly zoomOut?: boolean;
+        readonly reset?: boolean;
+        readonly fit?: boolean;
+    };
+}
+
 interface GraphNode extends SimulationNodeDatum {
     readonly id: string;
     readonly type: string;
@@ -81,6 +101,7 @@ interface GraphConfig {
     readonly nodes: GraphNode[];
     readonly links: GraphLink[];
     readonly interaction?: GraphInteractionConfig;
+    readonly controls?: GraphControlsConfig;
 }
 
 interface GraphInstance {

package/dist/index.d.ts

@@ -1,5 +1,25 @@
 import { SimulationNodeDatum, SimulationLinkDatum } from 'd3-force';
 
+interface Coordinates {
+    readonly x: number;
+    readonly y: number;
+}
+
+type GraphControlsPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type GraphControlsOrientation = 'vertical' | 'horizontal';
+interface GraphControlsConfig {
+    readonly enabled: boolean;
+    readonly position?: GraphControlsPosition;
+    readonly orientation?: GraphControlsOrientation;
+    readonly offset?: Coordinates;
+    readonly show?: {
+        readonly zoomIn?: boolean;
+        readonly zoomOut?: boolean;
+        readonly reset?: boolean;
+        readonly fit?: boolean;
+    };
+}
+
 interface GraphNode extends SimulationNodeDatum {
     readonly id: string;
     readonly type: string;
@@ -81,6 +101,7 @@ interface GraphConfig {
     readonly nodes: GraphNode[];
     readonly links: GraphLink[];
     readonly interaction?: GraphInteractionConfig;
+    readonly controls?: GraphControlsConfig;
 }
 
 interface GraphInstance {

package/dist/index.js

@@ -3783,6 +3783,138 @@ function createGraphSimulation(config) {
   return { simulation };
 }
 
+// src/controls/graph-controls.utils.ts
+function resolveControlsPosition(position) {
+  return position ?? "bottom-left";
+}
+function resolveControlsOrientation(orientation) {
+  return orientation ?? "vertical";
+}
+function shouldRenderControl(config, key) {
+  const show = config.show;
+  if (!show) {
+    return true;
+  }
+  const value = show[key];
+  if (value === void 0) {
+    return true;
+  }
+  return value;
+}
+
+// src/assets/plus.svg?raw
+var plus_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M5 12h14m-7-7v14" />\n</svg>';
+
+// src/assets/minus.svg?raw
+var minus_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M19 12H5" />\n</svg>';
+
+// src/assets/fit.svg?raw
+var fit_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M5 9V5H9" />\n  <path d="M19 9V5H15" />\n  <path d="M5 15V19H9" />\n  <path d="M19 15V19H15" />\n</svg>';
+
+// src/assets/reset.svg?raw
+var reset_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M20 12a8 8 0 1 1-2.3-5.7" />\n  <path d="M20 4.5v4h-4" />\n</svg>';
+
+// src/controls/graph-controls.icons.ts
+var ICON_MAP = {
+  "zoom-in": plus_default,
+  "zoom-out": minus_default,
+  fit: fit_default,
+  reset: reset_default
+};
+function getControlIcon(icon) {
+  const raw = ICON_MAP[icon];
+  if (!raw) {
+    throw new Error(`Icon not found: ${icon}`);
+  }
+  return raw.replace("<svg", '<svg class="pg-icon"');
+}
+
+// src/controls/create-graph-controls.ts
+function createGraphControls(container, graph, config) {
+  let root2 = null;
+  function mount() {
+    if (!config.enabled) {
+      return;
+    }
+    const parent = container.parentElement;
+    if (!parent) {
+      return;
+    }
+    root2 = document.createElement("div");
+    root2.className = "pg-controls";
+    applyPosition(root2, config);
+    applyOrientation(root2, config);
+    appendControls(root2, config, graph);
+    parent.appendChild(root2);
+  }
+  function appendControls(root3, config2, graph2) {
+    if (shouldRenderControl(config2, "zoomIn")) {
+      root3.appendChild(createButton("zoom-in", "Zoom in", graph2.zoomIn.bind(graph2)));
+    }
+    if (shouldRenderControl(config2, "zoomOut")) {
+      root3.appendChild(createButton("zoom-out", "Zoom out", graph2.zoomOut.bind(graph2)));
+    }
+    if (shouldRenderControl(config2, "fit")) {
+      root3.appendChild(createButton("fit", "Fit view", graph2.fitView.bind(graph2)));
+    }
+    if (shouldRenderControl(config2, "reset")) {
+      root3.appendChild(createButton("reset", "Reset view", graph2.resetView.bind(graph2)));
+    }
+  }
+  function createButton(type, label, onClick) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.setAttribute("aria-label", label);
+    const wrapper = document.createElement("div");
+    wrapper.innerHTML = getControlIcon(type);
+    const svg = wrapper.querySelector("svg");
+    if (!svg) {
+      throw new Error(`Invalid SVG for icon: ${type}`);
+    }
+    svg.classList.add("pg-icon");
+    button.appendChild(svg);
+    button.addEventListener("click", onClick);
+    return button;
+  }
+  function destroy() {
+    if (!root2) {
+      return;
+    }
+    const clone = root2.cloneNode(true);
+    root2.replaceWith(clone);
+    root2 = null;
+  }
+  return { mount, destroy };
+}
+function applyPosition(el, config) {
+  const position = resolveControlsPosition(config.position);
+  const offset = config.offset ?? { x: 16, y: 16 };
+  el.style.position = "absolute";
+  switch (position) {
+    case "bottom-left":
+      el.style.left = `${offset.x}px`;
+      el.style.bottom = `${offset.y}px`;
+      break;
+    case "bottom-right":
+      el.style.right = `${offset.x}px`;
+      el.style.bottom = `${offset.y}px`;
+      break;
+    case "top-left":
+      el.style.left = `${offset.x}px`;
+      el.style.top = `${offset.y}px`;
+      break;
+    case "top-right":
+      el.style.right = `${offset.x}px`;
+      el.style.top = `${offset.y}px`;
+      break;
+  }
+}
+function applyOrientation(el, config) {
+  const orientation = resolveControlsOrientation(config.orientation);
+  el.style.display = "flex";
+  el.style.flexDirection = orientation === "vertical" ? "column" : "row";
+}
+
 // src/utils/resolve-link-style.ts
 var DEFAULT_LINK_STYLE = {
   stroke: "#94a3b8",
@@ -4339,6 +4471,7 @@ function createGraph(config) {
   let cleanupResize = null;
   let cleanupZoom = null;
   let tooltipBinding = null;
+  let controls = null;
   let dimensions = { width: 0, height: 0 };
   let rootGroup = null;
   let zoomBehavior = null;
@@ -4438,6 +4571,10 @@ function createGraph(config) {
     }
     if (config.interaction?.selection?.enabled) {
     }
+    if (config.controls?.enabled) {
+      controls = createGraphControls(config.container, { zoomIn, zoomOut, resetView, fitView, destroy, render }, config.controls);
+      controls.mount();
+    }
   }
   function resetView() {
     if (!zoomBehavior) {
@@ -4508,6 +4645,10 @@ function createGraph(config) {
       simulation.stop();
       simulation = null;
     }
+    if (controls) {
+      controls.destroy();
+      controls = null;
+    }
     rootGroup = null;
     zoomBehavior = null;
     while (config.container.firstChild) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polly-graph",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Reusable D3-based graph visualization SDK with configurable nodes, links, labels, interactions, and layout behaviors.",
   "license": "MIT",
   "author": "Badal",
@@ -47,8 +47,8 @@
   },
   "scripts": {
     "clean": "rm -rf dist",
-    "build": "tsup src/index.ts --format esm,cjs --dts --clean",
-    "dev": "tsup src/index.ts --watch --format esm,cjs --dts",
+    "build": "tsup",
+    "dev": "tsup",
     "lint": "eslint \"src/**/*.ts\"",
     "typecheck": "tsc --noEmit",
     "test": "vitest run --passWithNoTests",