@opendata-ai/openchart-vanilla 6.1.1 → 6.1.3

package/dist/index.d.ts

@@ -79,21 +79,11 @@ declare function exportCSV(data: Record<string, unknown>[]): string;
 /**
  * Creates a Web Worker running the force simulation.
  *
- * Uses the `new URL` + `import.meta.url` pattern recognized by Vite, Webpack 5,
- * Parcel, and esbuild. The bundler resolves the worker file path at build time
- * and handles the asset accordingly.
- *
- * - Vite dev (Ladle): resolves src/graph/simulation-worker.ts directly, serves
- *   it as a native ES module worker with on-the-fly TypeScript transform.
- * - Production (tsup + bun build): dist/simulation-worker.js is a self-contained
- *   IIFE produced by `bun build`. The consuming app's bundler copies it as an
- *   asset and rewrites the URL.
- *
- * Usage:
- *   import { createSimulationWorker } from '@opendata-ai/openchart-vanilla';
- *   const worker = createSimulationWorker();
- *   worker.postMessage({ type: 'init', nodes, links, width: 800, height: 600 });
- *   worker.onmessage = (e) => console.log(e.data);
+ * References the built .js file via `new URL` + `import.meta.url`.
+ * The consuming app's bundler resolves the worker path at build time.
+ *
+ * Note: SimulationManager handles .js/.ts fallback internally. This
+ * helper is exported for consumers who want to manage the worker directly.
  */
 declare function createSimulationWorker(): Worker;
 

package/dist/index.js

@@ -230,15 +230,15 @@ function csvEscape(value) {
 }
 
 // src/graph/simulation-worker-url.ts
-var workerUrl = new URL("./simulation-worker.ts", import.meta.url);
 function createSimulationWorker() {
-  return new Worker(workerUrl, { type: "module" });
+  return new Worker(new URL("./simulation-worker.js", import.meta.url), { type: "module" });
 }
 
 // src/graph-mount.ts
 import { compileGraph } from "@opendata-ai/openchart-engine";
 
 // src/graph/canvas-renderer.ts
+import { BRAND_FONT_SIZE, BRAND_MIN_WIDTH } from "@opendata-ai/openchart-core";
 var LABEL_FONT_MIN = 8;
 var LABEL_FONT_MAX = 12;
 var EDGE_ALPHA_DEFAULT = 0.35;
@@ -251,7 +251,6 @@ var GLOW_ALPHA = 0.15;
 var CULL_MARGIN = 50;
 var TWO_PI = Math.PI * 2;
 var MIN_SCREEN_RADIUS = 2.5;
-var BRAND_MIN_WIDTH = 120;
 function labelThreshold(zoom) {
   const t = Math.max(0, Math.min(1, (zoom - 0.2) / 1.8));
   return 1 - t;
@@ -386,7 +385,7 @@ var GraphCanvasRenderer = class {
     const padding = theme.spacing.padding;
     const x3 = w - padding;
     const y3 = h - padding;
-    ctx.font = `600 20px ${theme.fonts.family}`;
+    ctx.font = `600 ${BRAND_FONT_SIZE}px ${theme.fonts.family}`;
     ctx.fillStyle = theme.colors.axis;
     ctx.globalAlpha = 0.55;
     ctx.textAlign = "right";
@@ -2172,8 +2171,8 @@ function y_default2(y3) {
 }
 
 // src/graph/simulation.ts
-var SYNC_THRESHOLD = 200;
 var SYNC_MAX_TICKS = 300;
+var SYNC_TICKS_PER_BATCH = 15;
 function forceCluster(nodes, strength) {
   return (alpha) => {
     const cx = /* @__PURE__ */ new Map();
@@ -2208,6 +2207,7 @@ var SimulationManager = class _SimulationManager {
   tickCb = null;
   settledCb = null;
   destroyed = false;
+  syncRafId = null;
   // Stored for worker->sync fallback
   initNodes = [];
   initEdges = [];
@@ -2220,7 +2220,7 @@ var SimulationManager = class _SimulationManager {
    */
   static create(nodes, edges, config) {
     const mgr = new _SimulationManager();
-    const useWorker = typeof Worker !== "undefined" && nodes.length >= SYNC_THRESHOLD;
+    const useWorker = typeof Worker !== "undefined";
     if (useWorker) {
       mgr.initWorker(nodes, edges, config);
     } else {
@@ -2259,7 +2259,7 @@ var SimulationManager = class _SimulationManager {
       }
     }
   }
-  /** Unpin a node (free it from fixed position). */
+  /** Unpin a node and reheat so forces settle it into equilibrium. */
   unpinNode(id) {
     if (this.destroyed) return;
     if (this.worker) {
@@ -2270,6 +2270,10 @@ var SimulationManager = class _SimulationManager {
         node.fx = null;
         node.fy = null;
       }
+      if (this.syncSim && this.syncSim.alpha() < 0.1) {
+        this.syncSim.alpha(0.1).restart();
+        this.runSyncTicks();
+      }
     }
   }
   /** Drag a node (pins it and reheats slightly). */
@@ -2292,6 +2296,10 @@ var SimulationManager = class _SimulationManager {
   /** Tear down the simulation and release resources. */
   destroy() {
     this.destroyed = true;
+    if (this.syncRafId !== null) {
+      cancelAnimationFrame(this.syncRafId);
+      this.syncRafId = null;
+    }
     if (this.worker) {
       this.worker.postMessage({ type: "stop" });
       this.worker.terminate();
@@ -2311,37 +2319,56 @@ var SimulationManager = class _SimulationManager {
     this.initNodes = nodes;
     this.initEdges = edges;
     this.initConfig = config;
+    const initMsg = { type: "init", nodes, edges, config };
+    const wireWorker = (worker) => {
+      this.worker = worker;
+      worker.onmessage = (event) => {
+        if (this.destroyed) return;
+        const msg = event.data;
+        switch (msg.type) {
+          case "positions":
+            this.tickCb?.(msg.nodes, msg.alpha);
+            break;
+          case "settled":
+            this.settledCb?.();
+            break;
+          case "error":
+            console.error("[SimulationManager] Worker error:", msg.message);
+            break;
+        }
+      };
+      worker.postMessage(initMsg);
+    };
     try {
-      const workerUrl2 = new URL("./simulation-worker.ts", import.meta.url);
-      this.worker = new Worker(workerUrl2, { type: "module" });
+      const w = new Worker(new URL("./simulation-worker.js", import.meta.url), {
+        type: "module"
+      });
+      w.onerror = () => {
+        if (this.destroyed) return;
+        w.terminate();
+        this.worker = null;
+        try {
+          const w2 = new Worker(new URL("./simulation-worker.ts", import.meta.url), {
+            type: "module"
+          });
+          w2.onerror = () => {
+            if (this.destroyed) return;
+            console.warn("[SimulationManager] Worker failed to load, falling back to sync");
+            w2.terminate();
+            this.worker = null;
+            this.initSync(this.initNodes, this.initEdges, this.initConfig);
+          };
+          wireWorker(w2);
+        } catch {
+          console.warn("[SimulationManager] Worker creation failed, using sync fallback");
+          this.initSync(this.initNodes, this.initEdges, this.initConfig);
+        }
+      };
+      wireWorker(w);
     } catch {
       console.warn("[SimulationManager] Worker creation failed, using sync fallback");
       this.initSync(nodes, edges, config);
-      return;
     }
-    this.worker.onmessage = (event) => {
-      if (this.destroyed) return;
-      const msg = event.data;
-      switch (msg.type) {
-        case "positions":
-          this.tickCb?.(msg.nodes, msg.alpha);
-          break;
-        case "settled":
-          this.settledCb?.();
-          break;
-        case "error":
-          console.error("[SimulationManager] Worker error:", msg.message);
-          break;
-      }
-    };
-    this.worker.onerror = () => {
-      if (this.destroyed) return;
-      console.warn("[SimulationManager] Worker failed to load, falling back to sync");
-      this.worker?.terminate();
-      this.worker = null;
-      this.initSync(this.initNodes, this.initEdges, this.initConfig);
-    };
-    this.worker.postMessage({ type: "init", nodes, edges, config });
   }
   // -------------------------------------------------------------------------
   // Synchronous fallback
@@ -2374,36 +2401,52 @@ var SimulationManager = class _SimulationManager {
     this.runSyncTicks(true);
   }
   /**
-   * Run ticks synchronously and fire callbacks.
-   * @param deferred - When true, deliver results via microtask. Used for the
-   *   initial run where callbacks haven't been registered yet. Subsequent
-   *   calls (reheat, drag) fire synchronously since callbacks are already set.
+   * Run simulation ticks in batches, yielding to the main thread between
+   * batches via requestAnimationFrame. This prevents a multi-second freeze
+   * when the sync fallback handles large graphs (1k+ nodes).
+   *
+   * Each batch runs SYNC_TICKS_PER_BATCH ticks, emits positions for
+   * progressive rendering, then schedules the next batch.
+   *
+   * @param deferred - When true, start via microtask (initial run where
+   *   callbacks aren't wired yet). Otherwise start immediately.
    */
   runSyncTicks(deferred = false) {
     if (!this.syncSim || this.destroyed) return;
-    const sim = this.syncSim;
-    for (let i = 0; i < SYNC_MAX_TICKS; i++) {
-      sim.tick();
-      if (sim.alpha() < 1e-3) break;
+    if (this.syncRafId !== null) {
+      cancelAnimationFrame(this.syncRafId);
+      this.syncRafId = null;
     }
-    const positions = this.syncNodes.map((n) => ({
-      id: n.id,
-      x: n.x ?? 0,
-      y: n.y ?? 0
-    }));
-    const alpha = sim.alpha();
-    const settled = alpha < 1e-3;
-    const deliver = () => {
-      if (this.destroyed) return;
+    const sim = this.syncSim;
+    let tickCount = 0;
+    const runBatch = () => {
+      if (this.destroyed || !this.syncSim) return;
+      this.syncRafId = null;
+      for (let i = 0; i < SYNC_TICKS_PER_BATCH && tickCount < SYNC_MAX_TICKS; i++, tickCount++) {
+        sim.tick();
+        if (sim.alpha() < 1e-3) {
+          tickCount = SYNC_MAX_TICKS;
+          break;
+        }
+      }
+      const positions = this.syncNodes.map((n) => ({
+        id: n.id,
+        x: n.x ?? 0,
+        y: n.y ?? 0
+      }));
+      const alpha = sim.alpha();
+      const settled = alpha < 1e-3 || tickCount >= SYNC_MAX_TICKS;
       this.tickCb?.(positions, alpha);
       if (settled) {
         this.settledCb?.();
+      } else {
+        this.syncRafId = requestAnimationFrame(runBatch);
       }
     };
     if (deferred) {
-      queueMicrotask(deliver);
+      queueMicrotask(runBatch);
     } else {
-      deliver();
+      runBatch();
     }
   }
 };
@@ -2815,6 +2858,7 @@ function createGraph(container, spec, options) {
       linkStrength: config.linkStrength,
       centerForce: config.centerForce
     });
+    let initialSettleDone = false;
     simulation.onTick((positions, _alpha) => {
       if (destroyed) return;
       const posMap = /* @__PURE__ */ new Map();
@@ -2837,17 +2881,17 @@ function createGraph(container, spec, options) {
         };
       });
       spatialIndex.rebuild(positionedNodes);
-      needsRender = true;
-      scheduleRender();
-    });
-    simulation.onSettled(() => {
-      if (canvas && positionedNodes.length > 0 && interactionManager && renderer) {
+      if (!initialSettleDone && positionedNodes.length > 0 && interactionManager) {
         const { width: cw, height: ch } = getCanvasDimensions();
         const { transform: fitTransform } = ZoomTransform.fitBounds(positionedNodes, cw, ch);
         interactionManager.setTransform(fitTransform);
-        needsRender = true;
-        scheduleRender();
       }
+      needsRender = true;
+      scheduleRender();
+    });
+    simulation.onSettled(() => {
+      if (initialSettleDone) return;
+      initialSettleDone = true;
     });
   }
   function getCanvasDimensions() {
@@ -3214,7 +3258,7 @@ import { isLayerSpec } from "@opendata-ai/openchart-core";
 import { compileChart, compileLayer } from "@opendata-ai/openchart-engine";
 
 // src/svg-renderer.ts
-import { estimateTextWidth } from "@opendata-ai/openchart-core";
+import { BRAND_FONT_SIZE as BRAND_FONT_SIZE2, BRAND_MIN_WIDTH as BRAND_MIN_WIDTH2, estimateTextWidth } from "@opendata-ai/openchart-core";
 var SVG_NS = "http://www.w3.org/2000/svg";
 function computeXAxisExtent(layout) {
   const xAxis = layout.axes.x;
@@ -4025,8 +4069,6 @@ function renderLegend(parent, legend) {
   }
   parent.appendChild(g);
 }
-var BRAND_FONT_SIZE = 20;
-var BRAND_MIN_WIDTH2 = 120;
 var BRAND_URL = "https://tryopendata.ai";
 var XLINK_NS = "http://www.w3.org/1999/xlink";
 function renderBrand(parent, layout) {
@@ -4052,7 +4094,7 @@ function renderBrand(parent, layout) {
     y: chromeY,
     "dominant-baseline": "hanging",
     "font-family": layout.theme.fonts.family,
-    "font-size": BRAND_FONT_SIZE,
+    "font-size": BRAND_FONT_SIZE2,
     "text-anchor": "end",
     "fill-opacity": 0.55
   });
@@ -5851,8 +5893,8 @@ import { getBreakpoint } from "@opendata-ai/openchart-core";
 import { compileTable } from "@opendata-ai/openchart-engine";
 
 // src/table-renderer.ts
+import { BRAND_FONT_SIZE as BRAND_FONT_SIZE3 } from "@opendata-ai/openchart-core";
 var BRAND_URL2 = "https://tryopendata.ai";
-var BRAND_FONT_SIZE2 = 20;
 function renderChromeBlock(layout, position) {
   const chrome = layout.chrome;
   if (position === "header") {
@@ -6099,7 +6141,7 @@ function renderTable(layout, container) {
   brandLink.href = BRAND_URL2;
   brandLink.target = "_blank";
   brandLink.rel = "noopener";
-  brandLink.style.cssText = `font-size: ${BRAND_FONT_SIZE2}px; font-weight: 600; color: ${brandColor}; opacity: 0.55; text-decoration: none; font-family: ${theme ? theme.fonts.family : "sans-serif"};`;
+  brandLink.style.cssText = `font-size: ${BRAND_FONT_SIZE3}px; font-weight: 600; color: ${brandColor}; opacity: 0.55; text-decoration: none; font-family: ${theme ? theme.fonts.family : "sans-serif"};`;
   brandLink.textContent = "OpenData";
   brand.appendChild(brandLink);
   wrapper.appendChild(brand);