@3plate/graph-core 0.1.16 → 0.1.18

package/dist/index.cjs

@@ -2855,6 +2855,10 @@ var Canvas = class {
   curNodes;
   curSegs;
   updating;
+  // Settle check state
+  settleTimer;
+  settleCount = 0;
+  settleMaxRebuilds = 2;
   // Unique marker ID prefix for this canvas instance
   markerPrefix;
   // Dynamic style element for this instance (for cleanup)
@@ -2984,7 +2988,17 @@ var Canvas = class {
         }
       }
     }
-    await new Promise(requestAnimationFrame);
+    await new Promise((resolve) => {
+      let resolved = false;
+      const done = () => {
+        if (!resolved) {
+          resolved = true;
+          resolve();
+        }
+      };
+      requestAnimationFrame(done);
+      setTimeout(done, 50);
+    });
     const isVertical = this.orientation === "TB" || this.orientation === "BT";
     for (const node of newNodes.values()) {
       node.measure(isVertical);
@@ -3510,8 +3524,62 @@ var Canvas = class {
       this.container.classList.add(`g3p-${colorMode}`);
     }
   }
+  /**
+   * Schedule a settle check: periodically re-measure nodes in case
+   * async style injection (e.g. CSS-in-JS) changed their size after
+   * the initial measurement. If any node's size changed, triggers a
+   * rebuild to relayout the graph with correct dimensions.
+   */
+  scheduleSettleCheck() {
+    this.cancelSettleCheck();
+    this.settleCount = 0;
+    this.doSettleCheck();
+  }
+  cancelSettleCheck() {
+    if (this.settleTimer) {
+      clearTimeout(this.settleTimer);
+      this.settleTimer = void 0;
+    }
+  }
+  doSettleCheck() {
+    const delay = this.settleCount === 0 ? 50 : 150;
+    this.settleTimer = setTimeout(() => {
+      this.settleTimer = void 0;
+      if (this.checkNodeSizes()) {
+        if (this.settleCount < this.settleMaxRebuilds) {
+          this.settleCount++;
+          this.api.rebuild();
+        }
+      }
+    }, delay);
+  }
+  /**
+   * Re-measure every live non-dummy node by temporarily moving its
+   * content to the off-screen measurement container (synchronous,
+   * no visual flash). Returns true if any node's size changed.
+   */
+  checkNodeSizes() {
+    if (!this.measurement) return false;
+    const isVertical = this.orientation === "TB" || this.orientation === "BT";
+    let changed = false;
+    for (const node of this.curNodes.values()) {
+      if (node.isDummy || !node.content) continue;
+      const oldDims = node.data?.dims;
+      if (!oldDims) continue;
+      const parent = node.content.parentElement;
+      this.measurement.appendChild(node.content);
+      const rect = node.content.getBoundingClientRect();
+      if (parent) parent.appendChild(node.content);
+      if (Math.abs(oldDims.w - rect.width) > 0.5 || Math.abs(oldDims.h - rect.height) > 0.5) {
+        changed = true;
+        break;
+      }
+    }
+    return changed;
+  }
   /** Cleanup resources when the canvas is destroyed */
   destroy() {
+    this.cancelSettleCheck();
     this.dynamicStyleEl?.remove();
     this.dynamicStyleEl = void 0;
     this.measurement?.remove();
@@ -4229,6 +4297,7 @@ var API = class {
     this.nav("last");
     if (this.events.historyChange)
       this.events.historyChange(this.index, this.seq.length);
+    this.canvas.scheduleSettleCheck();
   }
   setNodePositions() {
     const { graph: graph2 } = this.state;