@logixode/force-graph-lib 0.6.1 → 0.7.0

package/dist/force-graph-lib.js

@@ -1,5 +1,5 @@
-import y from "force-graph";
-import * as g from "d3";
+import C from "force-graph";
+import * as c from "d3";
 class S {
   container;
   graph;
@@ -11,9 +11,10 @@ class S {
   groupHulls = /* @__PURE__ */ new Map();
   nodeGroupsCache = null;
   isFirstRender = !0;
-  autoColorScale = g.scaleOrdinal(g.schemeCategory10);
+  autoColorScale = c.scaleOrdinal(c.schemeCategory10);
+  charCache = /* @__PURE__ */ new Map();
   constructor(t, o = { nodes: [], links: [] }, i = {}) {
-    this.container = t, this.data = o, this.graph = new y(this.container), o.nodes.forEach((r) => {
+    this.container = t, this.data = o, this.graph = new C(this.container), o.nodes.forEach((r) => {
       this.nodesMap.set(r.id.toString(), r);
     });
     const e = {
@@ -71,12 +72,21 @@ class S {
       t.fx = t.x, t.fy = t.y;
     }), this.options.pointerInteraction || this.graph.enablePointerInteraction(!1), this.graph.nodeCanvasObject((t, o, i) => {
       t === this.data.nodes[0] && this.renderGroups(o, i);
-      const e = this.getNodeSize(t) * 2, s = typeof this.options.nodeBorderWidth == "function" ? this.options.nodeBorderWidth(t) : this.options.nodeBorderWidth, r = this.resolveNodeShape(t), l = t.x || 0, n = t.y || 0;
-      this.drawNodeShape(o, l, n, e, r), o.fillStyle = this.getNodeColor(t), o.fill(), s && s > 0 && (this.drawNodeShape(o, l, n, e, r), o.strokeStyle = this.getNodeBorderColor(t), o.lineWidth = s, o.stroke());
-      const a = this.getNodeLabel(t);
-      if (a && this.shouldShowLabel(t, i)) {
-        const h = typeof this.options.nodeLabelColor == "function" ? this.options.nodeLabelColor(t) : this.options.nodeLabelColor ?? "#555", d = (this.options.labelFontSize || 14) / i;
-        o.font = `${d}px Arial`, o.fillStyle = h, o.textAlign = "center", o.textBaseline = "middle", o.fillText(a, t.x || 0, (t.y || 0) + e + d / 2 + 2);
+      const e = this.getNodeSize(t) * 2, s = typeof this.options.nodeBorderWidth == "function" ? this.options.nodeBorderWidth(t) : this.options.nodeBorderWidth, r = this.resolveNodeShape(t), p = t.x || 0, n = t.y || 0;
+      if (this.drawNodeShape(o, p, n, e, r), o.fillStyle = this.getNodeColor(t), o.fill(), s && s > 0 && (this.drawNodeShape(o, p, n, e, r), o.strokeStyle = this.getNodeBorderColor(t), o.lineWidth = s, o.stroke()), this.options.nodeChar) {
+        const a = this.options.nodeChar(t);
+        if (a?.char) {
+          const d = `${a.char}|${a.color ?? "#000"}`, l = this.charCache.get(d);
+          if (l) {
+            const u = a.fontSize ?? e * (this.options.nodeCharSizeRatio ?? 0.8);
+            o.drawImage(l, p - u / 2, n - u / 2, u, u);
+          }
+        }
+      }
+      const h = this.getNodeLabel(t);
+      if (h && this.shouldShowLabel(t, i)) {
+        const a = typeof this.options.nodeLabelColor == "function" ? this.options.nodeLabelColor(t) : this.options.nodeLabelColor ?? "#555", l = (this.options.labelFontSize || 14) / i;
+        o.font = `${l}px Arial`, o.fillStyle = a, o.textAlign = "center", o.textBaseline = "middle", o.fillText(h, t.x || 0, (t.y || 0) + e + l / 2 + 2);
       }
     }), this.applyLinkOptions();
   }
@@ -86,6 +96,25 @@ class S {
   getNodeLabel(t) {
     return typeof this.options.nodeLabel == "function" ? this.options.nodeLabel(t) : t?.label || t.id;
   }
+  /** Render a single char/emoji to a 64×64 OffscreenCanvas and return an ImageBitmap */
+  buildCharBitmap(t, o) {
+    const e = new OffscreenCanvas(64, 64), s = e.getContext("2d");
+    return s.font = `${64 * 0.8}px sans-serif`, s.textAlign = "center", s.textBaseline = "middle", s.fillStyle = o, s.fillText(t, 64 / 2, 64 / 2), e.transferToImageBitmap();
+  }
+  /** Idempotent — only adds cache entries for chars not yet cached */
+  ensureCharCache() {
+    if (this.options.nodeChar)
+      for (const t of this.data.nodes) {
+        const o = this.options.nodeChar(t);
+        if (!o?.char) continue;
+        const i = o.color ?? "#000", e = `${o.char}|${i}`;
+        this.charCache.has(e) || this.charCache.set(e, this.buildCharBitmap(o.char, i));
+      }
+  }
+  /** Release GPU memory and clear the cache */
+  clearCharCache() {
+    this.charCache.forEach((t) => t.close()), this.charCache.clear();
+  }
   /**
    * Check if label should be shown based on threshold logic
    * The threshold determines when labels become too big relative to nodes
@@ -107,7 +136,7 @@ class S {
     this.data = {
       nodes: [...this.data.nodes, ...i],
       links: [...this.data.links, ...s]
-    }, this.refreshGraph();
+    }, this.ensureCharCache(), this.refreshGraph();
   }
   getNodeColor(t) {
     if (typeof this.options.nodeColor == "function") {
@@ -138,18 +167,18 @@ class S {
         break;
       }
       case "star": {
-        const r = e, l = e * 0.4, n = 5;
-        for (let a = 0; a < n * 2; a++) {
-          const h = a % 2 === 0 ? r : l, p = Math.PI / n * a - Math.PI / 2, d = o + h * Math.cos(p), u = i + h * Math.sin(p);
-          a === 0 ? t.moveTo(d, u) : t.lineTo(d, u);
+        const r = e, p = e * 0.4, n = 5;
+        for (let h = 0; h < n * 2; h++) {
+          const a = h % 2 === 0 ? r : p, d = Math.PI / n * h - Math.PI / 2, l = o + a * Math.cos(d), u = i + a * Math.sin(d);
+          h === 0 ? t.moveTo(l, u) : t.lineTo(l, u);
         }
         t.closePath();
         break;
       }
       case "hexagon": {
         for (let r = 0; r < 6; r++) {
-          const l = Math.PI / 3 * r - Math.PI / 6, n = o + e * Math.cos(l), a = i + e * Math.sin(l);
-          r === 0 ? t.moveTo(n, a) : t.lineTo(n, a);
+          const p = Math.PI / 3 * r - Math.PI / 6, n = o + e * Math.cos(p), h = i + e * Math.sin(p);
+          r === 0 ? t.moveTo(n, h) : t.lineTo(n, h);
         }
         t.closePath();
         break;
@@ -189,26 +218,26 @@ class S {
     this.ensureNodeGroupsCache(), this.nodeGroupsCache.forEach((i, e) => {
       if (i.length === 0) return;
       const s = [];
-      let r = 1 / 0, l = 0;
+      let r = 1 / 0, p = 0;
       if (i.forEach((n) => {
         if (n.x !== void 0 && n.y !== void 0) {
-          const h = this.getNodeSize(n) + t;
-          for (let p = 0; p < 8; p++) {
-            const d = p * Math.PI / 4;
+          const a = this.getNodeSize(n) + t;
+          for (let d = 0; d < 8; d++) {
+            const l = d * Math.PI / 4;
             s.push([
-              n.x + h * Math.cos(d),
-              n.y + h * Math.sin(d)
+              n.x + a * Math.cos(l),
+              n.y + a * Math.sin(l)
             ]);
           }
-          n.y - h < r && (r = n.y - h, l = n.x);
+          n.y - a < r && (r = n.y - a, p = n.x);
         }
       }), s.length >= 3) {
-        const n = g.polygonHull(s);
+        const n = c.polygonHull(s);
         if (n) {
-          const a = n.filter((h) => Math.abs(h[1] - r) < t);
-          a.length > 0 && (l = a.reduce((h, p) => h + p[0], 0) / a.length), this.groupHulls.set(e, {
+          const h = n.filter((a) => Math.abs(a[1] - r) < t);
+          h.length > 0 && (p = h.reduce((a, d) => a + d[0], 0) / h.length), this.groupHulls.set(e, {
             points: n,
-            labelX: l,
+            labelX: p,
             labelY: r,
             nodes: i
           });
@@ -241,19 +270,19 @@ class S {
    */
   renderGroups(t, o) {
     if (!this.options.showGroups) return;
-    const i = g.line().curve(g.curveCatmullRomClosed).context(t);
+    const i = c.line().curve(c.curveCatmullRomClosed).context(t);
     this.groupHulls.forEach((e, s) => {
-      const r = this.getGroupFillColor(s), l = this.options.groupFillOpacity ?? 1, n = this.getGroupBorderColor(s), a = this.options.groupBorderWidth ?? 0, h = this.options.groupBorderOpacity ?? 0.3;
-      t.save(), t.beginPath(), i(e.points), r && (t.globalAlpha = l, t.fillStyle = r, t.fill()), a > 0 && n && (t.globalAlpha = h, t.strokeStyle = n, t.lineWidth = a / o, t.setLineDash([]), t.stroke()), t.restore();
-      const p = this.getGroupLabelColor(s), d = (this.options.groupLabelSize || 16) / o;
-      t.save(), t.font = `bold ${d}px Arial`, t.fillStyle = p, t.textAlign = "center", t.textBaseline = "middle";
-      const u = e.labelY - d / 2, f = t.measureText(s).width, c = d;
+      const r = this.getGroupFillColor(s), p = this.options.groupFillOpacity ?? 1, n = this.getGroupBorderColor(s), h = this.options.groupBorderWidth ?? 0, a = this.options.groupBorderOpacity ?? 0.3;
+      t.save(), t.beginPath(), i(e.points), r && (t.globalAlpha = p, t.fillStyle = r, t.fill()), h > 0 && n && (t.globalAlpha = a, t.strokeStyle = n, t.lineWidth = h / o, t.setLineDash([]), t.stroke()), t.restore();
+      const d = this.getGroupLabelColor(s), l = (this.options.groupLabelSize || 16) / o;
+      t.save(), t.font = `bold ${l}px Arial`, t.fillStyle = d, t.textAlign = "center", t.textBaseline = "middle";
+      const u = e.labelY - l / 2, f = t.measureText(s).width, g = l;
       t.globalAlpha = 0.8, t.fillStyle = "rgba(255, 255, 255, 0.9)", t.fillRect(
         e.labelX - f / 2 - 4,
-        u - c / 2 - 2,
+        u - g / 2 - 2,
         f + 8,
-        c + 4
-      ), t.globalAlpha = 1, t.fillStyle = p, t.fillText(s, e.labelX, u), t.restore();
+        g + 4
+      ), t.globalAlpha = 1, t.fillStyle = d, t.fillText(s, e.labelX, u), t.restore();
     });
   }
   /**
@@ -332,13 +361,13 @@ class S {
     }), this.data = {
       nodes: Array.from(this.nodesMap.values()),
       links: Array.from(this.linkMap.values())
-    }, this.graph.cooldownTime(this.getCooldownTime()), this.graph.graphData(this.data);
+    }, this.ensureCharCache(), this.graph.cooldownTime(this.getCooldownTime()), this.graph.graphData(this.data);
   }
   setLabelThreshold(t) {
     this.options.labelThreshold = t, this.render();
   }
   setOptions(t) {
-    this.options = { ...this.options, ...t }, this.applyOptions();
+    this.options = { ...this.options, ...t }, t.nodeChar !== void 0 && (this.clearCharCache(), this.ensureCharCache()), this.applyOptions();
   }
   /**
    * Lightweight refresh - only updates graph data
@@ -353,7 +382,7 @@ class S {
     this.initGraph();
   }
   reset() {
-    this.graph.pauseAnimation(), this.data = { nodes: [], links: [] }, this.nodesMap.clear(), this.graph = new y(this.container), this.initGraph();
+    this.graph.pauseAnimation(), this.data = { nodes: [], links: [] }, this.nodesMap.clear(), this.graph = new C(this.container), this.initGraph();
   }
   getData() {
     return this.data;
@@ -373,7 +402,7 @@ class S {
    * @param data - Graph data to set
    */
   graphData(t) {
-    return this.nodesMap.clear(), this.linkMap.clear(), this.nodeGroupsCache = null, t.nodes.forEach((o) => {
+    return this.nodesMap.clear(), this.linkMap.clear(), this.nodeGroupsCache = null, this.clearCharCache(), t.nodes.forEach((o) => {
       this.nodesMap.has(o.id.toString()) || this.nodesMap.set(o.id.toString(), o);
     }), t.links.forEach((o) => {
       const i = this.createLinkKey(o.source, o.target);
@@ -381,7 +410,7 @@ class S {
     }), this.data = {
       nodes: Array.from(this.nodesMap.values()),
       links: Array.from(this.linkMap.values())
-    }, this.graph.cooldownTime(this.getCooldownTime()), this.graph.graphData(this.data), this;
+    }, this.ensureCharCache(), this.graph.cooldownTime(this.getCooldownTime()), this.graph.graphData(this.data), this;
   }
   /**
    * Enable or disable group visualization
@@ -436,7 +465,7 @@ class S {
     return { ...this.options };
   }
   destroy() {
-    this.worker && (this.worker.terminate(), this.worker = null), this.graph._destructor();
+    this.worker && (this.worker.terminate(), this.worker = null), this.clearCharCache(), this.graph._destructor();
   }
 }
 export {

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

@@ -1 +1 @@
-(function(u,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("force-graph"),require("d3")):typeof define=="function"&&define.amd?define(["exports","force-graph","d3"],f):(u=typeof globalThis<"u"?globalThis:u||self,f(u.ForceGraphLib={},u.ForceGraph,u.d3))})(this,(function(u,f,k){"use strict";function S(c){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const o in c)if(o!=="default"){const i=Object.getOwnPropertyDescriptor(c,o);Object.defineProperty(t,o,i.get?i:{enumerable:!0,get:()=>c[o]})}}return t.default=c,Object.freeze(t)}const g=S(k);class v{container;graph;data={nodes:[],links:[]};nodesMap=new Map;linkMap=new Map;options;worker=null;groupHulls=new Map;nodeGroupsCache=null;isFirstRender=!0;autoColorScale=g.scaleOrdinal(g.schemeCategory10);constructor(t,o={nodes:[],links:[]},i={}){this.container=t,this.data=o,this.graph=new f(this.container),o.nodes.forEach(r=>{this.nodesMap.set(r.id.toString(),r)});const e={labelThreshold:1.5,showGroups:!1,...i},s=e.showGroups?{groupBy:"topic",groupFillColor:"rgba(0, 0, 0, 0.05)",groupFillOpacity:1,groupBorderColor:"#666",groupBorderWidth:2,groupBorderOpacity:.3,groupLabelColor:"#333",groupLabelSize:16,groupPadding:20}:{};this.options={...s,...e},this.initGraph()}initGraph(){this.applyOptions(),this.render(),this.graphData(this.data),this.graph.onEngineStop(()=>{if(!this.data.nodes.length){this.isFirstRender=!0;return}this.isFirstRender?(this.options.onRenderComplete?this.options.onRenderComplete():this.graph.zoomToFit(400),this.isFirstRender=!1):this.options.onGraphUpdated&&this.options.onGraphUpdated()}),this.graph.onEngineTick(()=>{this.calculateGroupHulls()})}renderer(){return this.graph}focusPosition(t={}){if(Object.values(t).length){if(t.id){const{x:o,y:i}=this.nodesMap.get(t.id)??{x:0,y:0};o&&i&&(t={x:o,y:i})}t&&(this.graph.centerAt(t.x,t.y,1e3),this.graph.zoom(8,2e3))}}render(){this.graph.width(this.options.width??800).height(this.options.height??400),this.options.cooldownTicks!==void 0&&this.graph.cooldownTicks(this.options.cooldownTicks)}force(t,o){return this.graph.d3Force(t,o)}applyOptions(){this.options.keepDragPosition&&this.graph.onNodeDragEnd(t=>{t.fx=t.x,t.fy=t.y}),this.options.pointerInteraction||this.graph.enablePointerInteraction(!1),this.graph.nodeCanvasObject((t,o,i)=>{t===this.data.nodes[0]&&this.renderGroups(o,i);const e=this.getNodeSize(t)*2,s=typeof this.options.nodeBorderWidth=="function"?this.options.nodeBorderWidth(t):this.options.nodeBorderWidth,r=this.resolveNodeShape(t),l=t.x||0,n=t.y||0;this.drawNodeShape(o,l,n,e,r),o.fillStyle=this.getNodeColor(t),o.fill(),s&&s>0&&(this.drawNodeShape(o,l,n,e,r),o.strokeStyle=this.getNodeBorderColor(t),o.lineWidth=s,o.stroke());const a=this.getNodeLabel(t);if(a&&this.shouldShowLabel(t,i)){const h=typeof this.options.nodeLabelColor=="function"?this.options.nodeLabelColor(t):this.options.nodeLabelColor??"#555",d=(this.options.labelFontSize||14)/i;o.font=`${d}px Arial`,o.fillStyle=h,o.textAlign="center",o.textBaseline="middle",o.fillText(a,t.x||0,(t.y||0)+e+d/2+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):t?.label||t.id}shouldShowLabel(t,o){const i=this.getNodeSize(t)*2,s=(this.options.labelFontSize||14)/o,r=this.options.labelThreshold||1.5;return s<=i*r}updateData(t){const o=new Set(this.data.nodes.map(r=>r.id.toString())),i=t.nodes.filter(r=>!o.has(r.id.toString()));i.forEach(r=>{this.nodesMap.set(r.id.toString(),r)});const e=new Set(this.data.links.map(r=>this.createLinkKey(r.source,r.target))),s=t.links.filter(r=>!e.has(this.createLinkKey(r.source,r.target)));this.data={nodes:[...this.data.nodes,...i],links:[...this.data.links,...s]},this.refreshGraph()}getNodeColor(t){if(typeof this.options.nodeColor=="function"){const o=this.options.nodeColor(t);if(o)return o}return t?.color??""}getNodeBorderColor(t){return typeof this.options.nodeBorderColor=="function"?this.options.nodeBorderColor(t):this.options.nodeBorderColor||"#333"}resolveNodeShape(t){return t.shape?t.shape:typeof this.options.nodeShape=="function"?this.options.nodeShape(t):this.options.nodeShape??"circle"}drawNodeShape(t,o,i,e,s){switch(t.beginPath(),s){case"square":{t.rect(o-e,i-e,e*2,e*2);break}case"triangle":{const r=e*Math.sqrt(3);t.moveTo(o,i-e),t.lineTo(o+r/2,i+e/2),t.lineTo(o-r/2,i+e/2),t.closePath();break}case"diamond":{t.moveTo(o,i-e),t.lineTo(o+e,i),t.lineTo(o,i+e),t.lineTo(o-e,i),t.closePath();break}case"star":{const r=e,l=e*.4,n=5;for(let a=0;a<n*2;a++){const h=a%2===0?r:l,p=Math.PI/n*a-Math.PI/2,d=o+h*Math.cos(p),y=i+h*Math.sin(p);a===0?t.moveTo(d,y):t.lineTo(d,y)}t.closePath();break}case"hexagon":{for(let r=0;r<6;r++){const l=Math.PI/3*r-Math.PI/6,n=o+e*Math.cos(l),a=i+e*Math.sin(l);r===0?t.moveTo(n,a):t.lineTo(n,a)}t.closePath();break}case"circle":default:t.arc(o,i,e,0,2*Math.PI);break}}applyLinkOptions(){this.graph.linkColor(t=>typeof this.options.linkColor=="function"?this.options.linkColor(t):this.options.linkColor?this.options.linkColor:t.color??""),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,o){return typeof t=="function"?t(o):t}calculateGroupHulls(){if(!this.options.showGroups)return;this.groupHulls.clear();const t=this.options.groupPadding||20;this.ensureNodeGroupsCache(),this.nodeGroupsCache.forEach((i,e)=>{if(i.length===0)return;const s=[];let r=1/0,l=0;if(i.forEach(n=>{if(n.x!==void 0&&n.y!==void 0){const h=this.getNodeSize(n)+t;for(let p=0;p<8;p++){const d=p*Math.PI/4;s.push([n.x+h*Math.cos(d),n.y+h*Math.sin(d)])}n.y-h<r&&(r=n.y-h,l=n.x)}}),s.length>=3){const n=g.polygonHull(s);if(n){const a=n.filter(h=>Math.abs(h[1]-r)<t);a.length>0&&(l=a.reduce((h,p)=>h+p[0],0)/a.length),this.groupHulls.set(e,{points:n,labelX:l,labelY:r,nodes:i})}}})}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]}}ensureNodeGroupsCache(){this.nodeGroupsCache||(this.nodeGroupsCache=new Map,this.data.nodes.forEach(t=>{const o=this.getNodeGroupId(t);o&&(this.nodeGroupsCache.has(o)||this.nodeGroupsCache.set(o,[]),this.nodeGroupsCache.get(o).push(t))}))}renderGroups(t,o){if(!this.options.showGroups)return;const i=g.line().curve(g.curveCatmullRomClosed).context(t);this.groupHulls.forEach((e,s)=>{const r=this.getGroupFillColor(s),l=this.options.groupFillOpacity??1,n=this.getGroupBorderColor(s),a=this.options.groupBorderWidth??0,h=this.options.groupBorderOpacity??.3;t.save(),t.beginPath(),i(e.points),r&&(t.globalAlpha=l,t.fillStyle=r,t.fill()),a>0&&n&&(t.globalAlpha=h,t.strokeStyle=n,t.lineWidth=a/o,t.setLineDash([]),t.stroke()),t.restore();const p=this.getGroupLabelColor(s),d=(this.options.groupLabelSize||16)/o;t.save(),t.font=`bold ${d}px Arial`,t.fillStyle=p,t.textAlign="center",t.textBaseline="middle";const y=e.labelY-d/2,C=t.measureText(s).width,b=d;t.globalAlpha=.8,t.fillStyle="rgba(255, 255, 255, 0.9)",t.fillRect(e.labelX-C/2-4,y-b/2-2,C+8,b+4),t.globalAlpha=1,t.fillStyle=p,t.fillText(s,e.labelX,y),t.restore()})}getGroupFillColor(t){let o;return typeof this.options.groupFillColor=="function"?o=this.options.groupFillColor(t):o=this.options.groupFillColor,o==="auto"?this.autoColorScale(t):o}getGroupBorderColor(t){let o;return typeof this.options.groupBorderColor=="function"?o=this.options.groupBorderColor(t):o=this.options.groupBorderColor,o==="auto"?this.autoColorScale(t):o||"#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())}getCooldownTime(){if(this.options.cooldownTime!==void 0)return this.options.cooldownTime;const o=this.data.nodes.length*(125/100);return Math.max(4e3,o)}getDataSize(){const{nodes:t,links:o}=this.graph.graphData();return{nodes:t.length,links:o.length}}getAllNodeIds(){return Array.from(this.nodesMap.keys())}updateNode(t,o){const i=this.nodesMap.get(t.toString());if(i){Object.assign(i,o);const e=this.data.nodes.findIndex(s=>s.id.toString()===t.toString());return e!==-1&&(this.data.nodes[e]=i),this.refreshGraph(),!0}return!1}removeNode(t){const o=t.toString();return this.nodesMap.has(o)?(this.nodesMap.delete(o),this.data.nodes=this.data.nodes.filter(i=>i.id.toString()!==o),this.data.links=this.data.links.filter(i=>{const e=typeof i.source=="object"?i.source.id:i.source,s=typeof i.target=="object"?i.target.id:i.target;return e?.toString()!==o&&s?.toString()!==o}),this.refreshGraph(),!0):!1}async addData(t){t.nodes.forEach(o=>{this.nodesMap.has(o.id.toString())||this.nodesMap.set(o.id.toString(),o)}),t.links.forEach(o=>{const i=this.createLinkKey(o.source,o.target);this.linkMap.has(i)?console.log("link already exists",o):this.linkMap.set(i,o)}),this.data={nodes:Array.from(this.nodesMap.values()),links:Array.from(this.linkMap.values())},this.graph.cooldownTime(this.getCooldownTime()),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(),this.data={nodes:[],links:[]},this.nodesMap.clear(),this.graph=new f(this.container),this.initGraph()}getData(){return this.data}getNodesData(){return this.data.nodes}getLinksData(){return this.data.links}createLinkKey(t,o){const i=t===void 0?"undefined":typeof t=="object"?t.id:t,e=o===void 0?"undefined":typeof o=="object"?o.id:o;return`${i}-${e}`}graphData(t){return this.nodesMap.clear(),this.linkMap.clear(),this.nodeGroupsCache=null,t.nodes.forEach(o=>{this.nodesMap.has(o.id.toString())||this.nodesMap.set(o.id.toString(),o)}),t.links.forEach(o=>{const i=this.createLinkKey(o.source,o.target);this.linkMap.has(i)||this.linkMap.set(i,o)}),this.data={nodes:Array.from(this.nodesMap.values()),links:Array.from(this.linkMap.values())},this.graph.cooldownTime(this.getCooldownTime()),this.graph.graphData(this.data),this}showGroups(t){return this.options.showGroups=t,t&&Object.entries({groupBy:"topic",groupFillColor:"rgba(0, 0, 0, 0.05)",groupFillOpacity:1,groupBorderColor:"#666",groupBorderWidth:2,groupBorderOpacity:.3,groupLabelColor:"#333",groupLabelSize:16,groupPadding:20}).forEach(([i,e])=>{this.options[i]===void 0&&(this.options[i]=e)}),this.applyOptions(),this.refreshGraph(),this}setGroupBy(t){return this.options.groupBy=t,this.applyOptions(),this.refreshGraph(),this}setGroupOptions(t){return t.fillColor!==void 0&&(this.options.groupFillColor=t.fillColor),t.fillOpacity!==void 0&&(this.options.groupFillOpacity=t.fillOpacity),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.padding!==void 0&&(this.options.groupPadding=t.padding),this.applyOptions(),this.refreshGraph(),this}getGroups(){const t=new Set;return this.data.nodes.forEach(o=>{const i=this.getNodeGroupId(o);i&&t.add(i)}),Array.from(t)}getNodesInGroup(t){return this.data.nodes.filter(o=>this.getNodeGroupId(o)===t)}getOptions(){return{...this.options}}destroy(){this.worker&&(this.worker.terminate(),this.worker=null),this.graph._destructor()}}u.ForceGraph=v,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})}));
+(function(c,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("force-graph"),require("d3")):typeof define=="function"&&define.amd?define(["exports","force-graph","d3"],f):(c=typeof globalThis<"u"?globalThis:c||self,f(c.ForceGraphLib={},c.ForceGraph,c.d3))})(this,(function(c,f,k){"use strict";function S(g){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(g){for(const o in g)if(o!=="default"){const i=Object.getOwnPropertyDescriptor(g,o);Object.defineProperty(t,o,i.get?i:{enumerable:!0,get:()=>g[o]})}}return t.default=g,Object.freeze(t)}const C=S(k);class m{container;graph;data={nodes:[],links:[]};nodesMap=new Map;linkMap=new Map;options;worker=null;groupHulls=new Map;nodeGroupsCache=null;isFirstRender=!0;autoColorScale=C.scaleOrdinal(C.schemeCategory10);charCache=new Map;constructor(t,o={nodes:[],links:[]},i={}){this.container=t,this.data=o,this.graph=new f(this.container),o.nodes.forEach(r=>{this.nodesMap.set(r.id.toString(),r)});const e={labelThreshold:1.5,showGroups:!1,...i},s=e.showGroups?{groupBy:"topic",groupFillColor:"rgba(0, 0, 0, 0.05)",groupFillOpacity:1,groupBorderColor:"#666",groupBorderWidth:2,groupBorderOpacity:.3,groupLabelColor:"#333",groupLabelSize:16,groupPadding:20}:{};this.options={...s,...e},this.initGraph()}initGraph(){this.applyOptions(),this.render(),this.graphData(this.data),this.graph.onEngineStop(()=>{if(!this.data.nodes.length){this.isFirstRender=!0;return}this.isFirstRender?(this.options.onRenderComplete?this.options.onRenderComplete():this.graph.zoomToFit(400),this.isFirstRender=!1):this.options.onGraphUpdated&&this.options.onGraphUpdated()}),this.graph.onEngineTick(()=>{this.calculateGroupHulls()})}renderer(){return this.graph}focusPosition(t={}){if(Object.values(t).length){if(t.id){const{x:o,y:i}=this.nodesMap.get(t.id)??{x:0,y:0};o&&i&&(t={x:o,y:i})}t&&(this.graph.centerAt(t.x,t.y,1e3),this.graph.zoom(8,2e3))}}render(){this.graph.width(this.options.width??800).height(this.options.height??400),this.options.cooldownTicks!==void 0&&this.graph.cooldownTicks(this.options.cooldownTicks)}force(t,o){return this.graph.d3Force(t,o)}applyOptions(){this.options.keepDragPosition&&this.graph.onNodeDragEnd(t=>{t.fx=t.x,t.fy=t.y}),this.options.pointerInteraction||this.graph.enablePointerInteraction(!1),this.graph.nodeCanvasObject((t,o,i)=>{t===this.data.nodes[0]&&this.renderGroups(o,i);const e=this.getNodeSize(t)*2,s=typeof this.options.nodeBorderWidth=="function"?this.options.nodeBorderWidth(t):this.options.nodeBorderWidth,r=this.resolveNodeShape(t),p=t.x||0,n=t.y||0;if(this.drawNodeShape(o,p,n,e,r),o.fillStyle=this.getNodeColor(t),o.fill(),s&&s>0&&(this.drawNodeShape(o,p,n,e,r),o.strokeStyle=this.getNodeBorderColor(t),o.lineWidth=s,o.stroke()),this.options.nodeChar){const a=this.options.nodeChar(t);if(a?.char){const d=`${a.char}|${a.color??"#000"}`,l=this.charCache.get(d);if(l){const u=a.fontSize??e*(this.options.nodeCharSizeRatio??.8);o.drawImage(l,p-u/2,n-u/2,u,u)}}}const h=this.getNodeLabel(t);if(h&&this.shouldShowLabel(t,i)){const a=typeof this.options.nodeLabelColor=="function"?this.options.nodeLabelColor(t):this.options.nodeLabelColor??"#555",l=(this.options.labelFontSize||14)/i;o.font=`${l}px Arial`,o.fillStyle=a,o.textAlign="center",o.textBaseline="middle",o.fillText(h,t.x||0,(t.y||0)+e+l/2+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):t?.label||t.id}buildCharBitmap(t,o){const e=new OffscreenCanvas(64,64),s=e.getContext("2d");return s.font=`${64*.8}px sans-serif`,s.textAlign="center",s.textBaseline="middle",s.fillStyle=o,s.fillText(t,64/2,64/2),e.transferToImageBitmap()}ensureCharCache(){if(this.options.nodeChar)for(const t of this.data.nodes){const o=this.options.nodeChar(t);if(!o?.char)continue;const i=o.color??"#000",e=`${o.char}|${i}`;this.charCache.has(e)||this.charCache.set(e,this.buildCharBitmap(o.char,i))}}clearCharCache(){this.charCache.forEach(t=>t.close()),this.charCache.clear()}shouldShowLabel(t,o){const i=this.getNodeSize(t)*2,s=(this.options.labelFontSize||14)/o,r=this.options.labelThreshold||1.5;return s<=i*r}updateData(t){const o=new Set(this.data.nodes.map(r=>r.id.toString())),i=t.nodes.filter(r=>!o.has(r.id.toString()));i.forEach(r=>{this.nodesMap.set(r.id.toString(),r)});const e=new Set(this.data.links.map(r=>this.createLinkKey(r.source,r.target))),s=t.links.filter(r=>!e.has(this.createLinkKey(r.source,r.target)));this.data={nodes:[...this.data.nodes,...i],links:[...this.data.links,...s]},this.ensureCharCache(),this.refreshGraph()}getNodeColor(t){if(typeof this.options.nodeColor=="function"){const o=this.options.nodeColor(t);if(o)return o}return t?.color??""}getNodeBorderColor(t){return typeof this.options.nodeBorderColor=="function"?this.options.nodeBorderColor(t):this.options.nodeBorderColor||"#333"}resolveNodeShape(t){return t.shape?t.shape:typeof this.options.nodeShape=="function"?this.options.nodeShape(t):this.options.nodeShape??"circle"}drawNodeShape(t,o,i,e,s){switch(t.beginPath(),s){case"square":{t.rect(o-e,i-e,e*2,e*2);break}case"triangle":{const r=e*Math.sqrt(3);t.moveTo(o,i-e),t.lineTo(o+r/2,i+e/2),t.lineTo(o-r/2,i+e/2),t.closePath();break}case"diamond":{t.moveTo(o,i-e),t.lineTo(o+e,i),t.lineTo(o,i+e),t.lineTo(o-e,i),t.closePath();break}case"star":{const r=e,p=e*.4,n=5;for(let h=0;h<n*2;h++){const a=h%2===0?r:p,d=Math.PI/n*h-Math.PI/2,l=o+a*Math.cos(d),u=i+a*Math.sin(d);h===0?t.moveTo(l,u):t.lineTo(l,u)}t.closePath();break}case"hexagon":{for(let r=0;r<6;r++){const p=Math.PI/3*r-Math.PI/6,n=o+e*Math.cos(p),h=i+e*Math.sin(p);r===0?t.moveTo(n,h):t.lineTo(n,h)}t.closePath();break}case"circle":default:t.arc(o,i,e,0,2*Math.PI);break}}applyLinkOptions(){this.graph.linkColor(t=>typeof this.options.linkColor=="function"?this.options.linkColor(t):this.options.linkColor?this.options.linkColor:t.color??""),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,o){return typeof t=="function"?t(o):t}calculateGroupHulls(){if(!this.options.showGroups)return;this.groupHulls.clear();const t=this.options.groupPadding||20;this.ensureNodeGroupsCache(),this.nodeGroupsCache.forEach((i,e)=>{if(i.length===0)return;const s=[];let r=1/0,p=0;if(i.forEach(n=>{if(n.x!==void 0&&n.y!==void 0){const a=this.getNodeSize(n)+t;for(let d=0;d<8;d++){const l=d*Math.PI/4;s.push([n.x+a*Math.cos(l),n.y+a*Math.sin(l)])}n.y-a<r&&(r=n.y-a,p=n.x)}}),s.length>=3){const n=C.polygonHull(s);if(n){const h=n.filter(a=>Math.abs(a[1]-r)<t);h.length>0&&(p=h.reduce((a,d)=>a+d[0],0)/h.length),this.groupHulls.set(e,{points:n,labelX:p,labelY:r,nodes:i})}}})}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]}}ensureNodeGroupsCache(){this.nodeGroupsCache||(this.nodeGroupsCache=new Map,this.data.nodes.forEach(t=>{const o=this.getNodeGroupId(t);o&&(this.nodeGroupsCache.has(o)||this.nodeGroupsCache.set(o,[]),this.nodeGroupsCache.get(o).push(t))}))}renderGroups(t,o){if(!this.options.showGroups)return;const i=C.line().curve(C.curveCatmullRomClosed).context(t);this.groupHulls.forEach((e,s)=>{const r=this.getGroupFillColor(s),p=this.options.groupFillOpacity??1,n=this.getGroupBorderColor(s),h=this.options.groupBorderWidth??0,a=this.options.groupBorderOpacity??.3;t.save(),t.beginPath(),i(e.points),r&&(t.globalAlpha=p,t.fillStyle=r,t.fill()),h>0&&n&&(t.globalAlpha=a,t.strokeStyle=n,t.lineWidth=h/o,t.setLineDash([]),t.stroke()),t.restore();const d=this.getGroupLabelColor(s),l=(this.options.groupLabelSize||16)/o;t.save(),t.font=`bold ${l}px Arial`,t.fillStyle=d,t.textAlign="center",t.textBaseline="middle";const u=e.labelY-l/2,y=t.measureText(s).width,b=l;t.globalAlpha=.8,t.fillStyle="rgba(255, 255, 255, 0.9)",t.fillRect(e.labelX-y/2-4,u-b/2-2,y+8,b+4),t.globalAlpha=1,t.fillStyle=d,t.fillText(s,e.labelX,u),t.restore()})}getGroupFillColor(t){let o;return typeof this.options.groupFillColor=="function"?o=this.options.groupFillColor(t):o=this.options.groupFillColor,o==="auto"?this.autoColorScale(t):o}getGroupBorderColor(t){let o;return typeof this.options.groupBorderColor=="function"?o=this.options.groupBorderColor(t):o=this.options.groupBorderColor,o==="auto"?this.autoColorScale(t):o||"#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())}getCooldownTime(){if(this.options.cooldownTime!==void 0)return this.options.cooldownTime;const o=this.data.nodes.length*(125/100);return Math.max(4e3,o)}getDataSize(){const{nodes:t,links:o}=this.graph.graphData();return{nodes:t.length,links:o.length}}getAllNodeIds(){return Array.from(this.nodesMap.keys())}updateNode(t,o){const i=this.nodesMap.get(t.toString());if(i){Object.assign(i,o);const e=this.data.nodes.findIndex(s=>s.id.toString()===t.toString());return e!==-1&&(this.data.nodes[e]=i),this.refreshGraph(),!0}return!1}removeNode(t){const o=t.toString();return this.nodesMap.has(o)?(this.nodesMap.delete(o),this.data.nodes=this.data.nodes.filter(i=>i.id.toString()!==o),this.data.links=this.data.links.filter(i=>{const e=typeof i.source=="object"?i.source.id:i.source,s=typeof i.target=="object"?i.target.id:i.target;return e?.toString()!==o&&s?.toString()!==o}),this.refreshGraph(),!0):!1}async addData(t){t.nodes.forEach(o=>{this.nodesMap.has(o.id.toString())||this.nodesMap.set(o.id.toString(),o)}),t.links.forEach(o=>{const i=this.createLinkKey(o.source,o.target);this.linkMap.has(i)?console.log("link already exists",o):this.linkMap.set(i,o)}),this.data={nodes:Array.from(this.nodesMap.values()),links:Array.from(this.linkMap.values())},this.ensureCharCache(),this.graph.cooldownTime(this.getCooldownTime()),this.graph.graphData(this.data)}setLabelThreshold(t){this.options.labelThreshold=t,this.render()}setOptions(t){this.options={...this.options,...t},t.nodeChar!==void 0&&(this.clearCharCache(),this.ensureCharCache()),this.applyOptions()}refreshGraph(){this.graphData(this.data)}reinitialize(){this.initGraph()}reset(){this.graph.pauseAnimation(),this.data={nodes:[],links:[]},this.nodesMap.clear(),this.graph=new f(this.container),this.initGraph()}getData(){return this.data}getNodesData(){return this.data.nodes}getLinksData(){return this.data.links}createLinkKey(t,o){const i=t===void 0?"undefined":typeof t=="object"?t.id:t,e=o===void 0?"undefined":typeof o=="object"?o.id:o;return`${i}-${e}`}graphData(t){return this.nodesMap.clear(),this.linkMap.clear(),this.nodeGroupsCache=null,this.clearCharCache(),t.nodes.forEach(o=>{this.nodesMap.has(o.id.toString())||this.nodesMap.set(o.id.toString(),o)}),t.links.forEach(o=>{const i=this.createLinkKey(o.source,o.target);this.linkMap.has(i)||this.linkMap.set(i,o)}),this.data={nodes:Array.from(this.nodesMap.values()),links:Array.from(this.linkMap.values())},this.ensureCharCache(),this.graph.cooldownTime(this.getCooldownTime()),this.graph.graphData(this.data),this}showGroups(t){return this.options.showGroups=t,t&&Object.entries({groupBy:"topic",groupFillColor:"rgba(0, 0, 0, 0.05)",groupFillOpacity:1,groupBorderColor:"#666",groupBorderWidth:2,groupBorderOpacity:.3,groupLabelColor:"#333",groupLabelSize:16,groupPadding:20}).forEach(([i,e])=>{this.options[i]===void 0&&(this.options[i]=e)}),this.applyOptions(),this.refreshGraph(),this}setGroupBy(t){return this.options.groupBy=t,this.applyOptions(),this.refreshGraph(),this}setGroupOptions(t){return t.fillColor!==void 0&&(this.options.groupFillColor=t.fillColor),t.fillOpacity!==void 0&&(this.options.groupFillOpacity=t.fillOpacity),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.padding!==void 0&&(this.options.groupPadding=t.padding),this.applyOptions(),this.refreshGraph(),this}getGroups(){const t=new Set;return this.data.nodes.forEach(o=>{const i=this.getNodeGroupId(o);i&&t.add(i)}),Array.from(t)}getNodesInGroup(t){return this.data.nodes.filter(o=>this.getNodeGroupId(o)===t)}getOptions(){return{...this.options}}destroy(){this.worker&&(this.worker.terminate(),this.worker=null),this.clearCharCache(),this.graph._destructor()}}c.ForceGraph=m,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})}));

package/dist/index.d.ts

@@ -43,6 +43,7 @@ export declare class ForceGraph<TNode extends NodeData & {
     private nodeGroupsCache;
     private isFirstRender;
     private autoColorScale;
+    private charCache;
     constructor(container: HTMLElement, initialData?: GraphData<TNode, TLink>, options?: GraphOptions<TNode, TLink>);
     private initGraph;
     renderer(): default_2<TNode, TLink>;
@@ -56,6 +57,12 @@ export declare class ForceGraph<TNode extends NodeData & {
     private applyOptions;
     private getNodeSize;
     private getNodeLabel;
+    /** Render a single char/emoji to a 64×64 OffscreenCanvas and return an ImageBitmap */
+    private buildCharBitmap;
+    /** Idempotent — only adds cache entries for chars not yet cached */
+    private ensureCharCache;
+    /** Release GPU memory and clear the cache */
+    private clearCharCache;
     /**
      * Check if label should be shown based on threshold logic
      * The threshold determines when labels become too big relative to nodes
@@ -194,6 +201,8 @@ export declare interface GraphOptions<N extends NodeData = NodeData, L extends L
     nodeGap?: number;
     linkLabel?: string | ((link: L) => string);
     nodeIcon?: string | ((node: N) => string);
+    nodeChar?: (node: N) => NodeChar | null | undefined;
+    nodeCharSizeRatio?: number;
     loading?: boolean;
     pointerInteraction?: boolean;
     keepDragPosition?: boolean;
@@ -228,6 +237,15 @@ export declare interface LinkData<N extends NodeData = NodeData> extends LinkObj
     [key: string]: any;
 }
 
+export declare interface NodeChar {
+    /** Character, letter, number, or emoji to display inside the node */
+    char: string;
+    /** Absolute size in world units. If omitted, uses node size * nodeCharSizeRatio */
+    fontSize?: number;
+    /** Fill color. Defaults to '#000' */
+    color?: string;
+}
+
 export declare interface NodeData extends NodeObject {
     id: string | number;
     x?: number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@logixode/force-graph-lib",
   "private": false,
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Force-directed graph visualization library.",
   "author": "Rohmad Kurniadi",
   "license": "MIT",