@logixode/force-graph-lib 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Rohmad Kurniadi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,119 @@
+# Force Graph Library
+
+A TypeScript library for creating interactive force-directed graphs with advanced features and optimizations for handling large datasets.
+
+## Features
+
+- 🎯 Dynamic label threshold control
+- 🔄 Multiple layout algorithms (Force-directed and Circle Pack)
+- 🎨 Customizable styling for nodes and edges
+- 📊 Efficient handling of large datasets
+- 🔄 Pagination support for incremental data loading
+- 🔄 Graph refresh and reset capabilities
+- ⚡ Non-blocking calculations using Web Workers
+
+## Installation
+
+```bash
+npm install force-graph-lib
+```
+
+## Usage
+
+```typescript
+import { ForceGraph } from 'force-graph-lib'
+
+// Initialize the graph
+const container = document.getElementById('graph-container')
+const graph = new ForceGraph(
+  container,
+  {
+    nodes: [
+      { id: '1', name: 'Node 1' },
+      { id: '2', name: 'Node 2' },
+    ],
+    links: [{ source: '1', target: '2' }],
+  },
+  {
+    labelThreshold: 1.2,
+    nodeSize: (node) => node.size || 5,
+    nodeLabel: (node) => node.name,
+    nodeIcon: '●',
+  },
+)
+
+// Add more data incrementally
+graph.addData({
+  nodes: [{ id: '3', name: 'Node 3' }],
+  links: [{ source: '2', target: '3' }],
+})
+
+// Change layout
+graph.setLayout('circlepack')
+
+// Update label threshold
+graph.setLabelThreshold(1.5)
+
+// Refresh or reset the graph
+graph.refreshGraph()
+graph.resetGraph()
+
+// Check loading state
+console.log(graph.isLoading())
+
+// Clean up
+graph.destroy()
+```
+
+## API Reference
+
+### Constructor
+
+```typescript
+new ForceGraph(container: HTMLElement, data: GraphData, options?: GraphOptions)
+```
+
+### GraphData Interface
+
+```typescript
+interface GraphData {
+  nodes: Array<{
+    id: string
+    [key: string]: any
+  }>
+  links: Array<{
+    source: string
+    target: string
+    [key: string]: any
+  }>
+}
+```
+
+### GraphOptions Interface
+
+```typescript
+interface GraphOptions {
+  labelThreshold?: number
+  layout?: 'force' | 'circlepack'
+  nodeSize?: number | ((node: any) => number)
+  linkWidth?: number | ((link: any) => number)
+  nodeLabel?: string | ((node: any) => string)
+  linkLabel?: string | ((link: any) => string)
+  nodeIcon?: string | ((node: any) => string)
+}
+```
+
+### Methods
+
+- `addData(newData: GraphData)`: Add new nodes and edges to the graph
+- `setLayout(layout: 'force' | 'circlepack')`: Change the graph layout algorithm
+- `setLabelThreshold(threshold: number)`: Set the zoom threshold for showing labels
+- `updateStyles(options: Partial<GraphOptions>)`: Update graph styling options
+- `refreshGraph()`: Refresh the graph with current data
+- `resetGraph()`: Reset the graph to its initial state
+- `isLoading()`: Check if the graph is currently calculating layout
+- `destroy()`: Clean up resources and remove the graph
+
+## License
+
+MIT

package/dist/force-graph-lib.es.js

@@ -0,0 +1,504 @@
+import S from "force-graph";
+import * as k from "d3";
+function w(o, t) {
+  (t == null || t > o.length) && (t = o.length);
+  for (var i = 0, r = Array(t); i < t; i++) r[i] = o[i];
+  return r;
+}
+function G(o) {
+  if (Array.isArray(o)) return o;
+}
+function A(o) {
+  if (Array.isArray(o)) return w(o);
+}
+function I(o) {
+  if (typeof Symbol < "u" && o[Symbol.iterator] != null || o["@@iterator"] != null) return Array.from(o);
+}
+function P(o, t) {
+  var i = o == null ? null : typeof Symbol < "u" && o[Symbol.iterator] || o["@@iterator"];
+  if (i != null) {
+    var r, n, a, s, h = [], p = !0, e = !1;
+    try {
+      if (a = (i = i.call(o)).next, t !== 0) for (; !(p = (r = a.call(i)).done) && (h.push(r.value), h.length !== t); p = !0) ;
+    } catch (l) {
+      e = !0, n = l;
+    } finally {
+      try {
+        if (!p && i.return != null && (s = i.return(), Object(s) !== s)) return;
+      } finally {
+        if (e) throw n;
+      }
+    }
+    return h;
+  }
+}
+function z() {
+  throw new TypeError(`Invalid attempt to destructure non-iterable instance.
+In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`);
+}
+function N() {
+  throw new TypeError(`Invalid attempt to spread non-iterable instance.
+In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`);
+}
+function M(o, t) {
+  return G(o) || P(o, t) || L(o, t) || z();
+}
+function C(o) {
+  return A(o) || I(o) || L(o) || N();
+}
+function L(o, t) {
+  if (o) {
+    if (typeof o == "string") return w(o, t);
+    var i = {}.toString.call(o).slice(8, -1);
+    return i === "Object" && o.constructor && (i = o.constructor.name), i === "Map" || i === "Set" ? Array.from(o) : i === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i) ? w(o, t) : void 0;
+  }
+}
+function O() {
+  var o = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : function(e) {
+    return e.cluster;
+  }, t, i = [], r = v(1), n = v(0.2), a = 0, s = /* @__PURE__ */ new Map();
+  function h(e) {
+    var l = new Map(C(s.entries()).map(function(u) {
+      var d = M(u, 2), g = d[0], y = d[1];
+      return [g, W(y, r, t)];
+    })), f = new Map(C(s.entries()).map(function(u) {
+      var d = M(u, 2), g = d[0], y = d[1];
+      return [g, n(g, y)];
+    })), c = ["x", t > 1 && "y", t > 2 && "z"].filter(function(u) {
+      return u;
+    }), m = c.map(function(u) {
+      return "v".concat(u);
+    });
+    i.forEach(function(u) {
+      var d = o(u);
+      if (l.has(d)) {
+        var g = l.get(d), y = c.map(function(b) {
+          return g[b] - u[b];
+        });
+        if (!(D.apply(void 0, C(y)) <= a)) {
+          var B = f.get(d) * e;
+          m.forEach(function(b, T) {
+            return u[b] += y[T] * B;
+          });
+        }
+      }
+    });
+  }
+  function p() {
+    s.clear(), i.forEach(function(e) {
+      var l = o(e);
+      s.has(l) || s.set(l, []), s.get(l).push(e);
+    }), s.forEach(function(e, l) {
+      return e.length <= 1 && s.delete(l);
+    });
+  }
+  return h.initialize = function(e) {
+    i = e;
+    for (var l = arguments.length, f = new Array(l > 1 ? l - 1 : 0), c = 1; c < l; c++)
+      f[c - 1] = arguments[c];
+    t = f.find(function(m) {
+      return [1, 2, 3].includes(m);
+    }) || 2, p();
+  }, h.clusterId = function(e) {
+    return arguments.length ? (o = e, p(), h) : o;
+  }, h.weight = function(e) {
+    return arguments.length ? (r = typeof e == "function" ? e : v(+e), h) : r;
+  }, h.strength = function(e) {
+    return arguments.length ? (n = typeof e == "function" ? e : v(+e), h) : n;
+  }, h.distanceMin = function(e) {
+    return arguments.length ? (a = e, h) : a;
+  }, h;
+}
+function D(o) {
+  var t = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, i = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 0;
+  return Math.sqrt(o * o + t * t + i * i);
+}
+function v(o) {
+  return function() {
+    return o;
+  };
+}
+function W(o, t, i) {
+  var r = 0, n = 0, a = 0, s = 0;
+  o.forEach(function(p) {
+    var e = t(p);
+    n += p.x * e, i > 1 && (a += p.y * e), i > 2 && (s += p.z * e), r += e;
+  });
+  var h = {};
+  return h.x = n / r, i > 1 && (h.y = a / r), i > 2 && (h.z = s / r), h;
+}
+class x {
+  container;
+  graph;
+  data = { nodes: [], links: [] };
+  nodesMap = /* @__PURE__ */ new Map();
+  linkMap = /* @__PURE__ */ new Map();
+  options;
+  worker = null;
+  groupBounds = /* @__PURE__ */ new Map();
+  constructor(t, i = { nodes: [], links: [] }, r = {}) {
+    this.container = t, this.data = i, this.graph = new S(this.container), i.nodes.forEach((s) => {
+      this.nodesMap.set(s.id.toString(), s);
+    });
+    const n = {
+      labelThreshold: 1.5,
+      showGroups: !1,
+      ...r
+    }, a = n.showGroups ? {
+      groupBy: "topic",
+      groupBorderColor: "#666",
+      groupBorderWidth: 2,
+      groupBorderOpacity: 0.3,
+      groupLabelColor: "#333",
+      groupLabelSize: 16,
+      groupLabelThreshold: 0.8,
+      groupPadding: 20
+    } : {};
+    this.options = {
+      ...n,
+      ...a
+    }, this.initGraph();
+  }
+  initGraph() {
+    console.log(this.options.width, this.options.width), this.graph.width(this.options.width ?? 800).height(this.options.height ?? 400).onNodeClick((t) => {
+      console.log("Node clicked:", t), this.options.nodeClickHandler && this.options.nodeClickHandler(t), this.focusPosition({ x: t.x, y: t.y });
+    }).cooldownTime(this.calculateCooldownTime()).d3Force(
+      "cluster",
+      this.options.cluster ? O().clusterId(this.options.cluster) : null
+    ).d3Force(
+      "collide",
+      this.options.collide ? k.forceCollide().radius((t) => this.options.collide ? this.options.collide(t) : t.marker.radius) : null
+    ), this.options.keepDragPosition && this.graph.onNodeDragEnd((t) => {
+      t.fx = t.x, t.fy = t.y;
+    }), this.graphData(this.data), this.applyOptions(), this.render(), this.graph.onEngineStop(() => this.graph.zoomToFit(400));
+  }
+  renderer() {
+    return this.graph;
+  }
+  focusPosition(t = {}) {
+    if (Object.values(t).length) {
+      if (t.id) {
+        const { x: i, y: r } = this.nodesMap.get(t.id) ?? { x: 0, y: 0 };
+        i && r && (t = { x: i, y: r });
+      }
+      t && (this.graph.centerAt(t.x, t.y, 1e3), this.graph.zoom(8, 2e3));
+    }
+  }
+  render() {
+    this.graph.d3Force("charge", k.forceManyBody().strength(-100)).d3Force(
+      "link",
+      k.forceLink().id((t) => t.index ?? "").distance(30)
+    ).d3Force("center", k.forceCenter());
+  }
+  applyOptions() {
+    this.graph.nodeCanvasObject((t, i, r) => {
+      t === this.data.nodes[0] && this.renderGroups(i, r);
+      const n = this.getNodeSize(t) * 2, a = typeof this.options.nodeBorderWidth == "function" ? this.options.nodeBorderWidth(t) : this.options.nodeBorderWidth;
+      i.beginPath(), i.arc(t.x || 0, t.y || 0, n, 0, 2 * Math.PI), i.fillStyle = this.getNodeColor(t), i.fill(), a && a > 0 && (i.beginPath(), i.arc(t.x || 0, t.y || 0, n, 0, 2 * Math.PI), i.strokeStyle = this.getNodeBorderColor(t), i.lineWidth = a, i.stroke());
+      const s = this.getNodeLabel(t);
+      if (s && r >= (this.options.labelThreshold || 1.5)) {
+        const h = typeof this.options.nodeLabelColor == "function" ? this.options.nodeLabelColor(t) : this.options.nodeLabelColor ?? "#555";
+        i.font = `${Math.max(n, 8)}px Arial`, i.fillStyle = h, i.textAlign = "center", i.textBaseline = "middle", i.fillText(s, t.x || 0, (t.y || 0) + n + 2);
+      }
+    }), this.applyLinkOptions();
+  }
+  getNodeSize(t) {
+    return typeof this.options.nodeSize == "function" ? this.options.nodeSize(t) || t.marker?.radius : this.options.nodeSize || t.marker?.radius || 1;
+  }
+  getNodeLabel(t) {
+    return typeof this.options.nodeLabel == "function" ? this.options.nodeLabel(t) : this.graph.zoom() < (this.options.labelThreshold || 1.5) ? "" : t.label || t.id;
+  }
+  updateData(t) {
+    const i = new Set(this.data.nodes.map((s) => s.id.toString())), r = t.nodes.filter((s) => !i.has(s.id.toString()));
+    r.forEach((s) => {
+      this.nodesMap.set(s.id.toString(), s);
+    });
+    const n = new Set(
+      this.data.links.map((s) => this.createLinkKey(s.source, s.target))
+    ), a = t.links.filter(
+      (s) => !n.has(this.createLinkKey(s.source, s.target))
+    );
+    this.data = {
+      nodes: [...this.data.nodes, ...r],
+      links: [...this.data.links, ...a]
+    }, this.refreshGraph();
+  }
+  getNodeColor(t) {
+    if (typeof this.options.nodeColor == "function") {
+      const i = this.options.nodeColor(t);
+      if (i) return i;
+    }
+    return t.color ?? "";
+  }
+  getNodeBorderColor(t) {
+    return typeof this.options.nodeBorderColor == "function" ? this.options.nodeBorderColor(t) : this.options.nodeBorderColor || "#333";
+  }
+  applyLinkOptions() {
+    this.options.linkWidth !== void 0 && this.graph.linkWidth((t) => this.getLinkProperty(this.options.linkWidth, t) ?? 1), this.options.linkCurvature !== void 0 && this.graph.linkCurvature(this.getLinkCurvature.bind(this)), this.options.linkDirectionalParticles && this.graph.linkDirectionalParticles(
+      (t) => this.getLinkProperty(this.options.linkDirectionalParticles, t) ?? 0
+    ), this.options.linkDirectionalParticleSpeed !== void 0 && this.graph.linkDirectionalParticleSpeed(
+      (t) => this.getLinkProperty(this.options.linkDirectionalParticleSpeed, t) ?? 0
+    ), this.options.linkDirectionalParticleWidth !== void 0 && this.graph.linkDirectionalParticleWidth(
+      (t) => this.getLinkProperty(this.options.linkDirectionalParticleWidth, t) ?? 0
+    ), this.options.linkDirectionalParticleColor !== void 0 && this.graph.linkDirectionalParticleColor(
+      (t) => this.getLinkProperty(this.options.linkDirectionalParticleColor, t) ?? "#aaa"
+    );
+  }
+  getLinkCurvature(t) {
+    return typeof this.options.linkCurvature == "function" ? this.options.linkCurvature(t) : typeof this.options.linkCurvature == "string" ? t[this.options.linkCurvature] || 0 : typeof this.options.linkCurvature == "number" ? this.options.linkCurvature : t.curvature || 0;
+  }
+  getLinkProperty(t, i) {
+    return typeof t == "function" ? t(i) : t;
+  }
+  /**
+   * Calculate group boundaries based on node positions
+   */
+  calculateGroupBounds() {
+    if (!this.options.showGroups) return;
+    this.groupBounds.clear();
+    const t = this.options.groupPadding || 20, i = /* @__PURE__ */ new Map();
+    this.data.nodes.forEach((r) => {
+      const n = this.getNodeGroupId(r);
+      n && (i.has(n) || i.set(n, []), i.get(n).push(r));
+    }), i.forEach((r, n) => {
+      if (r.length === 0) return;
+      let a = 1 / 0, s = 1 / 0, h = -1 / 0, p = -1 / 0;
+      r.forEach((e) => {
+        if (e.x !== void 0 && e.y !== void 0) {
+          const l = this.getNodeSize(e);
+          a = Math.min(a, e.x - l), s = Math.min(s, e.y - l), h = Math.max(h, e.x + l), p = Math.max(p, e.y + l);
+        }
+      }), a !== 1 / 0 && this.groupBounds.set(n, {
+        minX: a - t,
+        minY: s - t,
+        maxX: h + t,
+        maxY: p + t,
+        nodes: r
+      });
+    });
+  }
+  /**
+   * Get the group ID for a node
+   */
+  getNodeGroupId(t) {
+    if (this.options.groupBy) {
+      if (typeof this.options.groupBy == "function")
+        return this.options.groupBy(t);
+      if (typeof this.options.groupBy == "string")
+        return t[this.options.groupBy];
+    }
+  }
+  /**
+   * Render group borders and labels
+   */
+  renderGroups(t, i) {
+    this.options.showGroups && (this.calculateGroupBounds(), this.groupBounds.forEach((r, n) => {
+      const a = this.getGroupBorderColor(n), s = this.options.groupBorderWidth || 2, h = this.options.groupBorderOpacity || 0.3;
+      t.save(), t.globalAlpha = h, t.strokeStyle = a, t.lineWidth = s / i, t.setLineDash([10 / i, 5 / i]), t.strokeRect(r.minX, r.minY, r.maxX - r.minX, r.maxY - r.minY), t.restore();
+      const p = this.options.groupLabelThreshold || 0.8;
+      if (i <= p) {
+        const e = this.getGroupLabelColor(n), l = (this.options.groupLabelSize || 16) / i;
+        t.save(), t.font = `bold ${l}px Arial`, t.fillStyle = e, t.textAlign = "center", t.textBaseline = "middle";
+        const f = (r.minX + r.maxX) / 2, c = r.minY - l / 2, u = t.measureText(n).width, d = l;
+        t.globalAlpha = 0.8, t.fillStyle = "rgba(255, 255, 255, 0.9)", t.fillRect(
+          f - u / 2 - 4,
+          c - d / 2 - 2,
+          u + 8,
+          d + 4
+        ), t.globalAlpha = 1, t.fillStyle = e, t.fillText(n, f, c), t.restore();
+      }
+    }));
+  }
+  /**
+   * Get group border color
+   */
+  getGroupBorderColor(t) {
+    return typeof this.options.groupBorderColor == "function" ? this.options.groupBorderColor(t) : this.options.groupBorderColor || "#666";
+  }
+  /**
+   * Get group label color
+   */
+  getGroupLabelColor(t) {
+    return typeof this.options.groupLabelColor == "function" ? this.options.groupLabelColor(t) : this.options.groupLabelColor || "#333";
+  }
+  getNodeById(t) {
+    return this.nodesMap.get(t.toString());
+  }
+  hasNode(t) {
+    return this.nodesMap.has(t.toString());
+  }
+  getNodeCount() {
+    return this.nodesMap.size;
+  }
+  /**
+   * Calculate dynamic cooldown time based on node count
+   * Minimum: 2500ms
+   * Normal: node.length * 150ms
+   */
+  calculateCooldownTime() {
+    const t = this.data.nodes.length, i = t * 5 / 2, r = Math.max(2500, i);
+    return console.log(
+      `Dynamic Cooldown Time: ${t} nodes × 150ms = ${i}ms, final: ${r}ms`
+    ), r;
+  }
+  /**
+   * Get the current calculated cooldown time
+   */
+  getCooldownTime() {
+    return this.calculateCooldownTime();
+  }
+  /**
+   * Manually update the cooldown time based on current node count
+   */
+  updateCooldownTime() {
+    this.graph.cooldownTime(this.calculateCooldownTime());
+  }
+  getLinkCount() {
+    return this.graph.graphData().links.length;
+  }
+  getDataSize() {
+    const { nodes: t, links: i } = this.graph.graphData();
+    return {
+      nodes: t.length,
+      links: i.length
+    };
+  }
+  getAllNodeIds() {
+    return Array.from(this.nodesMap.keys());
+  }
+  updateNode(t, i) {
+    const r = this.nodesMap.get(t.toString());
+    if (r) {
+      Object.assign(r, i);
+      const n = this.data.nodes.findIndex((a) => a.id.toString() === t.toString());
+      return n !== -1 && (this.data.nodes[n] = r), this.refreshGraph(), !0;
+    }
+    return !1;
+  }
+  removeNode(t) {
+    const i = t.toString();
+    return this.nodesMap.has(i) ? (this.nodesMap.delete(i), this.data.nodes = this.data.nodes.filter((r) => r.id.toString() !== i), this.data.links = this.data.links.filter((r) => {
+      const n = typeof r.source == "object" ? r.source.id : r.source, a = typeof r.target == "object" ? r.target.id : r.target;
+      return n.toString() !== i && a.toString() !== i;
+    }), this.graph.cooldownTime(this.calculateCooldownTime()), this.refreshGraph(), !0) : !1;
+  }
+  async addData(t) {
+    t.nodes.forEach((i) => {
+      this.nodesMap.has(i.id.toString()) || this.nodesMap.set(i.id.toString(), i);
+    }), t.links.forEach((i) => {
+      const r = this.createLinkKey(i.source, i.target);
+      this.linkMap.has(r) ? console.log("link already exists", i) : this.linkMap.set(r, i);
+    }), this.data = {
+      nodes: Array.from(this.nodesMap.values()),
+      links: Array.from(this.linkMap.values())
+    }, console.log("this.data", this.data, t), this.graph.cooldownTime(this.calculateCooldownTime()), this.graph.graphData(this.data);
+  }
+  setLabelThreshold(t) {
+    this.options.labelThreshold = t, this.render();
+  }
+  setOptions(t) {
+    this.options = { ...this.options, ...t }, this.applyOptions();
+  }
+  /**
+   * Lightweight refresh - only updates graph data
+   */
+  refreshGraph() {
+    this.graphData(this.data);
+  }
+  /**
+   * Complete reinitialization - use when major changes are needed
+   */
+  reinitialize() {
+    this.initGraph();
+  }
+  reset() {
+    this.graph.pauseAnimation();
+    const t = this.graph.d3Force("simulation");
+    t && t.stop(), this.data = { nodes: [], links: [] }, this.nodesMap.clear(), this.graph = new S(this.container), this.initGraph();
+  }
+  getData() {
+    return this.data;
+  }
+  getNodesData() {
+    return this.data.nodes;
+  }
+  getLinksData() {
+    return this.data.links;
+  }
+  createLinkKey(t, i) {
+    const r = typeof t == "object" ? t.id : t, n = typeof i == "object" ? i.id : i;
+    return `${r}-${n}`;
+  }
+  /**
+   * Set graph data (chainable method)
+   * @param data - Graph data to set
+   */
+  graphData(t) {
+    return this.nodesMap.clear(), this.linkMap.clear(), t.nodes.forEach((i) => {
+      this.nodesMap.has(i.id.toString()) || this.nodesMap.set(i.id.toString(), i);
+    }), t.links.forEach((i) => {
+      const r = this.createLinkKey(i.source, i.target);
+      this.linkMap.has(r) || this.linkMap.set(r, i);
+    }), this.data = {
+      nodes: Array.from(this.nodesMap.values()),
+      links: Array.from(this.linkMap.values())
+    }, this.graph.cooldownTime(this.calculateCooldownTime()), this.graph.graphData(this.data), this;
+  }
+  /**
+   * Enable or disable group visualization
+   */
+  showGroups(t) {
+    return this.options.showGroups = t, t && Object.entries({
+      groupBy: "topic",
+      groupBorderColor: "#666",
+      groupBorderWidth: 2,
+      groupBorderOpacity: 0.3,
+      groupLabelColor: "#333",
+      groupLabelSize: 16,
+      groupLabelThreshold: 0.8,
+      groupPadding: 20
+    }).forEach(([r, n]) => {
+      this.options[r] === void 0 && (this.options[r] = n);
+    }), this.applyOptions(), this.refreshGraph(), this;
+  }
+  /**
+   * Set the property to group nodes by
+   */
+  setGroupBy(t) {
+    return this.options.groupBy = t, this.applyOptions(), this.refreshGraph(), this;
+  }
+  /**
+   * Set group visualization options
+   */
+  setGroupOptions(t) {
+    return t.borderColor !== void 0 && (this.options.groupBorderColor = t.borderColor), t.borderWidth !== void 0 && (this.options.groupBorderWidth = t.borderWidth), t.borderOpacity !== void 0 && (this.options.groupBorderOpacity = t.borderOpacity), t.labelColor !== void 0 && (this.options.groupLabelColor = t.labelColor), t.labelSize !== void 0 && (this.options.groupLabelSize = t.labelSize), t.labelThreshold !== void 0 && (this.options.groupLabelThreshold = t.labelThreshold), t.padding !== void 0 && (this.options.groupPadding = t.padding), this.applyOptions(), this.refreshGraph(), this;
+  }
+  /**
+   * Get all available groups
+   */
+  getGroups() {
+    const t = /* @__PURE__ */ new Set();
+    return this.data.nodes.forEach((i) => {
+      const r = this.getNodeGroupId(i);
+      r && t.add(r);
+    }), Array.from(t);
+  }
+  /**
+   * Get nodes in a specific group
+   */
+  getNodesInGroup(t) {
+    return this.data.nodes.filter((i) => this.getNodeGroupId(i) === t);
+  }
+  /**
+   * Get current options
+   */
+  getOptions() {
+    return { ...this.options };
+  }
+  destroy() {
+    this.worker && (this.worker.terminate(), this.worker = null), this.graph._destructor();
+  }
+}
+export {
+  x as ForceGraph
+};

package/dist/force-graph-lib.umd.js

@@ -0,0 +1,3 @@
+(function(f,y){typeof exports=="object"&&typeof module<"u"?y(exports,require("force-graph"),require("d3")):typeof define=="function"&&define.amd?define(["exports","force-graph","d3"],y):(f=typeof globalThis<"u"?globalThis:f||self,y(f.ForceGraphLib={},f.ForceGraph,f.d3))})(this,function(f,y,B){"use strict";function G(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const i in r)if(i!=="default"){const e=Object.getOwnPropertyDescriptor(r,i);Object.defineProperty(t,i,e.get?e:{enumerable:!0,get:()=>r[i]})}}return t.default=r,Object.freeze(t)}const v=G(B);function w(r,t){(t==null||t>r.length)&&(t=r.length);for(var i=0,e=Array(t);i<t;i++)e[i]=r[i];return e}function A(r){if(Array.isArray(r))return r}function I(r){if(Array.isArray(r))return w(r)}function P(r){if(typeof Symbol<"u"&&r[Symbol.iterator]!=null||r["@@iterator"]!=null)return Array.from(r)}function O(r,t){var i=r==null?null:typeof Symbol<"u"&&r[Symbol.iterator]||r["@@iterator"];if(i!=null){var e,n,a,s,h=[],u=!0,o=!1;try{if(a=(i=i.call(r)).next,t!==0)for(;!(u=(e=a.call(i)).done)&&(h.push(e.value),h.length!==t);u=!0);}catch(l){o=!0,n=l}finally{try{if(!u&&i.return!=null&&(s=i.return(),Object(s)!==s))return}finally{if(o)throw n}}return h}}function z(){throw new TypeError(`Invalid attempt to destructure non-iterable instance.
+In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function N(){throw new TypeError(`Invalid attempt to spread non-iterable instance.
+In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function L(r,t){return A(r)||O(r,t)||T(r,t)||z()}function M(r){return I(r)||P(r)||T(r)||N()}function T(r,t){if(r){if(typeof r=="string")return w(r,t);var i={}.toString.call(r).slice(8,-1);return i==="Object"&&r.constructor&&(i=r.constructor.name),i==="Map"||i==="Set"?Array.from(r):i==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?w(r,t):void 0}}function D(){var r=arguments.length>0&&arguments[0]!==void 0?arguments[0]:function(o){return o.cluster},t,i=[],e=k(1),n=k(.2),a=0,s=new Map;function h(o){var l=new Map(M(s.entries()).map(function(p){var d=L(p,2),m=d[0],b=d[1];return[m,E(b,e,t)]})),g=new Map(M(s.entries()).map(function(p){var d=L(p,2),m=d[0],b=d[1];return[m,n(m,b)]})),c=["x",t>1&&"y",t>2&&"z"].filter(function(p){return p}),C=c.map(function(p){return"v".concat(p)});i.forEach(function(p){var d=r(p);if(l.has(d)){var m=l.get(d),b=c.map(function(S){return m[S]-p[S]});if(!(W.apply(void 0,M(b))<=a)){var x=g.get(d)*o;C.forEach(function(S,F){return p[S]+=b[F]*x})}}})}function u(){s.clear(),i.forEach(function(o){var l=r(o);s.has(l)||s.set(l,[]),s.get(l).push(o)}),s.forEach(function(o,l){return o.length<=1&&s.delete(l)})}return h.initialize=function(o){i=o;for(var l=arguments.length,g=new Array(l>1?l-1:0),c=1;c<l;c++)g[c-1]=arguments[c];t=g.find(function(C){return[1,2,3].includes(C)})||2,u()},h.clusterId=function(o){return arguments.length?(r=o,u(),h):r},h.weight=function(o){return arguments.length?(e=typeof o=="function"?o:k(+o),h):e},h.strength=function(o){return arguments.length?(n=typeof o=="function"?o:k(+o),h):n},h.distanceMin=function(o){return arguments.length?(a=o,h):a},h}function W(r){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:0,i=arguments.length>2&&arguments[2]!==void 0?arguments[2]:0;return Math.sqrt(r*r+t*t+i*i)}function k(r){return function(){return r}}function E(r,t,i){var e=0,n=0,a=0,s=0;r.forEach(function(u){var o=t(u);n+=u.x*o,i>1&&(a+=u.y*o),i>2&&(s+=u.z*o),e+=o});var h={};return h.x=n/e,i>1&&(h.y=a/e),i>2&&(h.z=s/e),h}class j{container;graph;data={nodes:[],links:[]};nodesMap=new Map;linkMap=new Map;options;worker=null;groupBounds=new Map;constructor(t,i={nodes:[],links:[]},e={}){this.container=t,this.data=i,this.graph=new y(this.container),i.nodes.forEach(s=>{this.nodesMap.set(s.id.toString(),s)});const n={labelThreshold:1.5,showGroups:!1,...e},a=n.showGroups?{groupBy:"topic",groupBorderColor:"#666",groupBorderWidth:2,groupBorderOpacity:.3,groupLabelColor:"#333",groupLabelSize:16,groupLabelThreshold:.8,groupPadding:20}:{};this.options={...n,...a},this.initGraph()}initGraph(){console.log(this.options.width,this.options.width),this.graph.width(this.options.width??800).height(this.options.height??400).onNodeClick(t=>{console.log("Node clicked:",t),this.options.nodeClickHandler&&this.options.nodeClickHandler(t),this.focusPosition({x:t.x,y:t.y})}).cooldownTime(this.calculateCooldownTime()).d3Force("cluster",this.options.cluster?D().clusterId(this.options.cluster):null).d3Force("collide",this.options.collide?v.forceCollide().radius(t=>this.options.collide?this.options.collide(t):t.marker.radius):null),this.options.keepDragPosition&&this.graph.onNodeDragEnd(t=>{t.fx=t.x,t.fy=t.y}),this.graphData(this.data),this.applyOptions(),this.render(),this.graph.onEngineStop(()=>this.graph.zoomToFit(400))}renderer(){return this.graph}focusPosition(t={}){if(Object.values(t).length){if(t.id){const{x:i,y:e}=this.nodesMap.get(t.id)??{x:0,y:0};i&&e&&(t={x:i,y:e})}t&&(this.graph.centerAt(t.x,t.y,1e3),this.graph.zoom(8,2e3))}}render(){this.graph.d3Force("charge",v.forceManyBody().strength(-100)).d3Force("link",v.forceLink().id(t=>t.index??"").distance(30)).d3Force("center",v.forceCenter())}applyOptions(){this.graph.nodeCanvasObject((t,i,e)=>{t===this.data.nodes[0]&&this.renderGroups(i,e);const n=this.getNodeSize(t)*2,a=typeof this.options.nodeBorderWidth=="function"?this.options.nodeBorderWidth(t):this.options.nodeBorderWidth;i.beginPath(),i.arc(t.x||0,t.y||0,n,0,2*Math.PI),i.fillStyle=this.getNodeColor(t),i.fill(),a&&a>0&&(i.beginPath(),i.arc(t.x||0,t.y||0,n,0,2*Math.PI),i.strokeStyle=this.getNodeBorderColor(t),i.lineWidth=a,i.stroke());const s=this.getNodeLabel(t);if(s&&e>=(this.options.labelThreshold||1.5)){const h=typeof this.options.nodeLabelColor=="function"?this.options.nodeLabelColor(t):this.options.nodeLabelColor??"#555";i.font=`${Math.max(n,8)}px Arial`,i.fillStyle=h,i.textAlign="center",i.textBaseline="middle",i.fillText(s,t.x||0,(t.y||0)+n+2)}}),this.applyLinkOptions()}getNodeSize(t){return typeof this.options.nodeSize=="function"?this.options.nodeSize(t)||t.marker?.radius:this.options.nodeSize||t.marker?.radius||1}getNodeLabel(t){return typeof this.options.nodeLabel=="function"?this.options.nodeLabel(t):this.graph.zoom()<(this.options.labelThreshold||1.5)?"":t.label||t.id}updateData(t){const i=new Set(this.data.nodes.map(s=>s.id.toString())),e=t.nodes.filter(s=>!i.has(s.id.toString()));e.forEach(s=>{this.nodesMap.set(s.id.toString(),s)});const n=new Set(this.data.links.map(s=>this.createLinkKey(s.source,s.target))),a=t.links.filter(s=>!n.has(this.createLinkKey(s.source,s.target)));this.data={nodes:[...this.data.nodes,...e],links:[...this.data.links,...a]},this.refreshGraph()}getNodeColor(t){if(typeof this.options.nodeColor=="function"){const i=this.options.nodeColor(t);if(i)return i}return t.color??""}getNodeBorderColor(t){return typeof this.options.nodeBorderColor=="function"?this.options.nodeBorderColor(t):this.options.nodeBorderColor||"#333"}applyLinkOptions(){this.options.linkWidth!==void 0&&this.graph.linkWidth(t=>this.getLinkProperty(this.options.linkWidth,t)??1),this.options.linkCurvature!==void 0&&this.graph.linkCurvature(this.getLinkCurvature.bind(this)),this.options.linkDirectionalParticles&&this.graph.linkDirectionalParticles(t=>this.getLinkProperty(this.options.linkDirectionalParticles,t)??0),this.options.linkDirectionalParticleSpeed!==void 0&&this.graph.linkDirectionalParticleSpeed(t=>this.getLinkProperty(this.options.linkDirectionalParticleSpeed,t)??0),this.options.linkDirectionalParticleWidth!==void 0&&this.graph.linkDirectionalParticleWidth(t=>this.getLinkProperty(this.options.linkDirectionalParticleWidth,t)??0),this.options.linkDirectionalParticleColor!==void 0&&this.graph.linkDirectionalParticleColor(t=>this.getLinkProperty(this.options.linkDirectionalParticleColor,t)??"#aaa")}getLinkCurvature(t){return typeof this.options.linkCurvature=="function"?this.options.linkCurvature(t):typeof this.options.linkCurvature=="string"?t[this.options.linkCurvature]||0:typeof this.options.linkCurvature=="number"?this.options.linkCurvature:t.curvature||0}getLinkProperty(t,i){return typeof t=="function"?t(i):t}calculateGroupBounds(){if(!this.options.showGroups)return;this.groupBounds.clear();const t=this.options.groupPadding||20,i=new Map;this.data.nodes.forEach(e=>{const n=this.getNodeGroupId(e);n&&(i.has(n)||i.set(n,[]),i.get(n).push(e))}),i.forEach((e,n)=>{if(e.length===0)return;let a=1/0,s=1/0,h=-1/0,u=-1/0;e.forEach(o=>{if(o.x!==void 0&&o.y!==void 0){const l=this.getNodeSize(o);a=Math.min(a,o.x-l),s=Math.min(s,o.y-l),h=Math.max(h,o.x+l),u=Math.max(u,o.y+l)}}),a!==1/0&&this.groupBounds.set(n,{minX:a-t,minY:s-t,maxX:h+t,maxY:u+t,nodes:e})})}getNodeGroupId(t){if(this.options.groupBy){if(typeof this.options.groupBy=="function")return this.options.groupBy(t);if(typeof this.options.groupBy=="string")return t[this.options.groupBy]}}renderGroups(t,i){this.options.showGroups&&(this.calculateGroupBounds(),this.groupBounds.forEach((e,n)=>{const a=this.getGroupBorderColor(n),s=this.options.groupBorderWidth||2,h=this.options.groupBorderOpacity||.3;t.save(),t.globalAlpha=h,t.strokeStyle=a,t.lineWidth=s/i,t.setLineDash([10/i,5/i]),t.strokeRect(e.minX,e.minY,e.maxX-e.minX,e.maxY-e.minY),t.restore();const u=this.options.groupLabelThreshold||.8;if(i<=u){const o=this.getGroupLabelColor(n),l=(this.options.groupLabelSize||16)/i;t.save(),t.font=`bold ${l}px Arial`,t.fillStyle=o,t.textAlign="center",t.textBaseline="middle";const g=(e.minX+e.maxX)/2,c=e.minY-l/2,p=t.measureText(n).width,d=l;t.globalAlpha=.8,t.fillStyle="rgba(255, 255, 255, 0.9)",t.fillRect(g-p/2-4,c-d/2-2,p+8,d+4),t.globalAlpha=1,t.fillStyle=o,t.fillText(n,g,c),t.restore()}}))}getGroupBorderColor(t){return typeof this.options.groupBorderColor=="function"?this.options.groupBorderColor(t):this.options.groupBorderColor||"#666"}getGroupLabelColor(t){return typeof this.options.groupLabelColor=="function"?this.options.groupLabelColor(t):this.options.groupLabelColor||"#333"}getNodeById(t){return this.nodesMap.get(t.toString())}hasNode(t){return this.nodesMap.has(t.toString())}getNodeCount(){return this.nodesMap.size}calculateCooldownTime(){const t=this.data.nodes.length,i=t*5/2,e=Math.max(2500,i);return console.log(`Dynamic Cooldown Time: ${t} nodes × 150ms = ${i}ms, final: ${e}ms`),e}getCooldownTime(){return this.calculateCooldownTime()}updateCooldownTime(){this.graph.cooldownTime(this.calculateCooldownTime())}getLinkCount(){return this.graph.graphData().links.length}getDataSize(){const{nodes:t,links:i}=this.graph.graphData();return{nodes:t.length,links:i.length}}getAllNodeIds(){return Array.from(this.nodesMap.keys())}updateNode(t,i){const e=this.nodesMap.get(t.toString());if(e){Object.assign(e,i);const n=this.data.nodes.findIndex(a=>a.id.toString()===t.toString());return n!==-1&&(this.data.nodes[n]=e),this.refreshGraph(),!0}return!1}removeNode(t){const i=t.toString();return this.nodesMap.has(i)?(this.nodesMap.delete(i),this.data.nodes=this.data.nodes.filter(e=>e.id.toString()!==i),this.data.links=this.data.links.filter(e=>{const n=typeof e.source=="object"?e.source.id:e.source,a=typeof e.target=="object"?e.target.id:e.target;return n.toString()!==i&&a.toString()!==i}),this.graph.cooldownTime(this.calculateCooldownTime()),this.refreshGraph(),!0):!1}async addData(t){t.nodes.forEach(i=>{this.nodesMap.has(i.id.toString())||this.nodesMap.set(i.id.toString(),i)}),t.links.forEach(i=>{const e=this.createLinkKey(i.source,i.target);this.linkMap.has(e)?console.log("link already exists",i):this.linkMap.set(e,i)}),this.data={nodes:Array.from(this.nodesMap.values()),links:Array.from(this.linkMap.values())},console.log("this.data",this.data,t),this.graph.cooldownTime(this.calculateCooldownTime()),this.graph.graphData(this.data)}setLabelThreshold(t){this.options.labelThreshold=t,this.render()}setOptions(t){this.options={...this.options,...t},this.applyOptions()}refreshGraph(){this.graphData(this.data)}reinitialize(){this.initGraph()}reset(){this.graph.pauseAnimation();const t=this.graph.d3Force("simulation");t&&t.stop(),this.data={nodes:[],links:[]},this.nodesMap.clear(),this.graph=new y(this.container),this.initGraph()}getData(){return this.data}getNodesData(){return this.data.nodes}getLinksData(){return this.data.links}createLinkKey(t,i){const e=typeof t=="object"?t.id:t,n=typeof i=="object"?i.id:i;return`${e}-${n}`}graphData(t){return this.nodesMap.clear(),this.linkMap.clear(),t.nodes.forEach(i=>{this.nodesMap.has(i.id.toString())||this.nodesMap.set(i.id.toString(),i)}),t.links.forEach(i=>{const e=this.createLinkKey(i.source,i.target);this.linkMap.has(e)||this.linkMap.set(e,i)}),this.data={nodes:Array.from(this.nodesMap.values()),links:Array.from(this.linkMap.values())},this.graph.cooldownTime(this.calculateCooldownTime()),this.graph.graphData(this.data),this}showGroups(t){return this.options.showGroups=t,t&&Object.entries({groupBy:"topic",groupBorderColor:"#666",groupBorderWidth:2,groupBorderOpacity:.3,groupLabelColor:"#333",groupLabelSize:16,groupLabelThreshold:.8,groupPadding:20}).forEach(([e,n])=>{this.options[e]===void 0&&(this.options[e]=n)}),this.applyOptions(),this.refreshGraph(),this}setGroupBy(t){return this.options.groupBy=t,this.applyOptions(),this.refreshGraph(),this}setGroupOptions(t){return t.borderColor!==void 0&&(this.options.groupBorderColor=t.borderColor),t.borderWidth!==void 0&&(this.options.groupBorderWidth=t.borderWidth),t.borderOpacity!==void 0&&(this.options.groupBorderOpacity=t.borderOpacity),t.labelColor!==void 0&&(this.options.groupLabelColor=t.labelColor),t.labelSize!==void 0&&(this.options.groupLabelSize=t.labelSize),t.labelThreshold!==void 0&&(this.options.groupLabelThreshold=t.labelThreshold),t.padding!==void 0&&(this.options.groupPadding=t.padding),this.applyOptions(),this.refreshGraph(),this}getGroups(){const t=new Set;return this.data.nodes.forEach(i=>{const e=this.getNodeGroupId(i);e&&t.add(e)}),Array.from(t)}getNodesInGroup(t){return this.data.nodes.filter(i=>this.getNodeGroupId(i)===t)}getOptions(){return{...this.options}}destroy(){this.worker&&(this.worker.terminate(),this.worker=null),this.graph._destructor()}}f.ForceGraph=j,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});

package/dist/index.d.ts

@@ -0,0 +1,195 @@
+import { default as default_2 } from 'force-graph';
+import { GraphData as GraphData_2 } from 'force-graph';
+import { LinkObject } from 'force-graph';
+import { NodeObject } from 'force-graph';
+
+export declare class ForceGraph {
+    private container;
+    private graph;
+    private data;
+    private nodesMap;
+    private linkMap;
+    private options;
+    private worker;
+    private groupBounds;
+    constructor(container: HTMLElement, initialData?: GraphData, options?: GraphOptions);
+    private initGraph;
+    renderer(): default_2<NodeData, LinkObject<NodeData>>;
+    focusPosition(nodeData?: {
+        id?: string;
+        x?: number;
+        y?: number;
+    }): void;
+    render(): void;
+    applyOptions(): void;
+    private getNodeSize;
+    private getNodeLabel;
+    updateData(data: GraphData): void;
+    private getNodeColor;
+    private getNodeBorderColor;
+    private applyLinkOptions;
+    private getLinkCurvature;
+    private getLinkProperty;
+    /**
+     * Calculate group boundaries based on node positions
+     */
+    private calculateGroupBounds;
+    /**
+     * Get the group ID for a node
+     */
+    private getNodeGroupId;
+    /**
+     * Render group borders and labels
+     */
+    private renderGroups;
+    /**
+     * Get group border color
+     */
+    private getGroupBorderColor;
+    /**
+     * Get group label color
+     */
+    private getGroupLabelColor;
+    getNodeById(id: string | number): NodeData | undefined;
+    hasNode(id: string | number): boolean;
+    getNodeCount(): number;
+    /**
+     * Calculate dynamic cooldown time based on node count
+     * Minimum: 2500ms
+     * Normal: node.length * 150ms
+     */
+    private calculateCooldownTime;
+    /**
+     * Get the current calculated cooldown time
+     */
+    getCooldownTime(): number;
+    /**
+     * Manually update the cooldown time based on current node count
+     */
+    updateCooldownTime(): void;
+    getLinkCount(): number;
+    getDataSize(): {
+        nodes: number;
+        links: number;
+    };
+    getAllNodeIds(): string[];
+    updateNode(id: string | number, updates: Partial<NodeData>): boolean;
+    removeNode(id: string | number): boolean;
+    addData(newData: GraphData): Promise<void>;
+    setLabelThreshold(threshold: number): void;
+    setOptions(options: Partial<GraphOptions>): void;
+    /**
+     * Lightweight refresh - only updates graph data
+     */
+    refreshGraph(): void;
+    /**
+     * Complete reinitialization - use when major changes are needed
+     */
+    reinitialize(): void;
+    reset(): void;
+    getData(): GraphData;
+    getNodesData(): GraphData['nodes'];
+    getLinksData(): GraphData['links'];
+    private createLinkKey;
+    /**
+     * Set graph data (chainable method)
+     * @param data - Graph data to set
+     */
+    graphData(data: GraphData): ForceGraph;
+    /**
+     * Enable or disable group visualization
+     */
+    showGroups(show: boolean): ForceGraph;
+    /**
+     * Set the property to group nodes by
+     */
+    setGroupBy(groupBy: string | ((node: NodeData) => string | undefined)): ForceGraph;
+    /**
+     * Set group visualization options
+     */
+    setGroupOptions(options: {
+        borderColor?: string | ((groupId: string) => string);
+        borderWidth?: number;
+        borderOpacity?: number;
+        labelColor?: string | ((groupId: string) => string);
+        labelSize?: number;
+        labelThreshold?: number;
+        padding?: number;
+    }): ForceGraph;
+    /**
+     * Get all available groups
+     */
+    getGroups(): string[];
+    /**
+     * Get nodes in a specific group
+     */
+    getNodesInGroup(groupId: string): NodeData[];
+    /**
+     * Get current options
+     */
+    getOptions(): GraphOptions;
+    destroy(): void;
+}
+
+export declare interface GraphData extends GraphData_2<NodeData, LinkData> {
+}
+
+export declare interface GraphOptions {
+    height?: number;
+    width?: number;
+    labelThreshold?: number;
+    nodeSize?: number | ((node: NodeData) => number);
+    linkWidth?: number | ((link: LinkData) => number);
+    nodeLabel?: string | ((node: NodeData) => string);
+    nodeLabelColor?: string | ((node: NodeData) => string);
+    nodeColor?: string | ((node: NodeData) => string);
+    nodeBorderColor?: string | ((node: NodeData) => string);
+    nodeBorderWidth?: number | ((node: NodeData) => number);
+    linkLabel?: string | ((link: LinkData) => string);
+    nodeIcon?: string | ((node: NodeData) => string);
+    cluster?: (node: NodeData) => boolean | undefined | null;
+    collide?: (node: NodeData) => number;
+    loading?: boolean;
+    keepDragPosition?: boolean;
+    nodeClickHandler?: (node: NodeData) => void;
+    linkCurvature?: number | string | ((link: LinkData) => number);
+    linkDirectionalParticles?: number | ((link: LinkData) => number);
+    linkDirectionalParticleSpeed?: number | ((link: LinkData) => number);
+    linkDirectionalParticleWidth?: number | ((link: LinkData) => number);
+    linkDirectionalParticleColor?: string | ((link: LinkData) => string);
+    showGroups?: boolean;
+    groupBy?: string | ((node: NodeData) => string | undefined);
+    groupBorderColor?: string | ((groupId: string) => string);
+    groupBorderWidth?: number;
+    groupBorderOpacity?: number;
+    groupLabelColor?: string | ((groupId: string) => string);
+    groupLabelSize?: number;
+    groupLabelThreshold?: number;
+    groupPadding?: number;
+}
+
+export declare interface LinkData extends LinkObject<NodeData> {
+    source: string | number | NodeData;
+    target: string | number | NodeData;
+    weight?: number;
+    color?: string;
+    curvature?: number;
+    [key: string]: any;
+}
+
+export declare interface NodeData extends NodeObject {
+    id: string | number;
+    x?: number;
+    y?: number;
+    fx?: number;
+    fy?: number;
+    color?: string;
+    value?: number;
+    label?: string;
+    platform?: string;
+    type?: string;
+    topic?: string;
+    [key: string]: any;
+}
+
+export { }

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@logixode/force-graph-lib",
+  "private": false,
+  "version": "0.1.0",
+  "type": "module",
+  "files": [
+    "dist/force-graph-lib.es.js",
+    "dist/force-graph-lib.umd.js",
+    "dist/index.d.ts"
+  ],
+  "main": "./dist/force-graph-lib.umd.js",
+  "module": "./dist/force-graph-lib.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/force-graph-lib.es.js",
+      "require": "./dist/force-graph-lib.umd.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "build:lib": "VITE_BUILD_TARGET=lib vite build && npx tsc --project tsconfig.lib.json --noEmit",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "test:e2e": "playwright test",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint": "eslint . --fix",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "@formkit/auto-animate": "^0.8.2",
+    "@tailwindcss/vite": "^4.1.11",
+    "@tanstack/vue-query": "^5.83.1",
+    "@vueuse/core": "^13.6.0",
+    "axios": "^1.11.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "d3-force-clustering": "^1.0.0",
+    "lucide-vue-next": "^0.525.0",
+    "reka-ui": "^2.4.1",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.11",
+    "tw-animate-css": "^1.3.5",
+    "vue-router": "^4.5.1",
+    "vue-sonner": "^2.0.2"
+  },
+  "peerDependencies": {
+    "d3": "^7.9.0",
+    "force-graph": "^1.50.1",
+    "vue": "^3.5.17"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.53.1",
+    "@tailwindcss/cli": "^4.1.11",
+    "@tsconfig/node22": "^22.0.2",
+    "@types/d3": "^7.4.3",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^22.16.5",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "@vitest/eslint-plugin": "^1.2.7",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.5.1",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.7.0",
+    "eslint": "^9.29.0",
+    "eslint-plugin-playwright": "^2.2.0",
+    "eslint-plugin-vue": "~10.2.0",
+    "jiti": "^2.4.2",
+    "jsdom": "^26.1.0",
+    "npm-run-all2": "^8.0.4",
+    "prettier": "3.5.3",
+    "typescript": "~5.8.0",
+    "unplugin-vue-router": "^0.14.0",
+    "vite": "^7.0.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-vue-devtools": "^7.7.7",
+    "vitest": "^3.2.4",
+    "vue-tsc": "^2.2.10"
+  }
+}