@opendata-ai/openchart-vanilla 8.5.1 → 8.6.0

package/dist/graph-3d/index.d.ts

@@ -200,10 +200,11 @@ declare const LINK_WIDTH_MAX_EDGES = 2000;
  *    setters.
  *
  * Differences from 2D that are deliberate and documented in RFC 27: no
- * keyboard navigation, no node drag, no cursor repulsion or springy drag, no
- * wall-clock warmup budget, and a structural `update()` reheats globally
- * (`graphData()` restarts the layout at alpha 1) instead of applying 2D's local
- * impulse.
+ * keyboard navigation, no node drag, no cursor repulsion or springy drag, and
+ * no wall-clock warmup budget. A structural `update()` DOES animate like 2D
+ * (enter fade, exit ghosts, churn-scaled local reheat), but it reaches the
+ * impulse indirectly: `graphData()` forces alpha to 1 and the library exposes no
+ * alpha setter, so `beginUpdateReheat` damps it from outside instead.
  */
 
 /**

package/dist/graph-3d/index.js

@@ -11,9 +11,10 @@ import {
   popAlpha,
   popScale,
   registerGraphRenderer,
+  reheatAlpha,
   resolveHighlightTarget,
   seedNodePositions
-} from "../chunk-WOLX5EZT.js";
+} from "../chunk-273EHRBC.js";
 import {
   AnimationScheduler,
   createTween,
@@ -224,7 +225,7 @@ function forceCluster3D(strength) {
   };
   return force;
 }
-function applySimulationConfig(graph, config, nodeCount) {
+function applySimulationConfig(graph, config, nodeCount, opts = {}) {
   const charge = graph.d3Force("charge");
   if (charge && typeof charge.strength === "function") {
     charge.strength(config.chargeStrength);
@@ -247,9 +248,24 @@ function applySimulationConfig(graph, config, nodeCount) {
   );
   graph.d3VelocityDecay(config.velocityDecay);
   graph.d3AlphaDecay(config.alphaDecay);
-  graph.warmupTicks(budgetedWarmupTicks(config.warmupTicks ?? 0, nodeCount, config.warmupBudgetMs));
+  graph.warmupTicks(opts.warmupTicks ?? configuredWarmupTicks(config, nodeCount));
   graph.cooldownTicks(ticksToSettle(config.alphaDecay));
 }
+function configuredWarmupTicks(config, nodeCount) {
+  return budgetedWarmupTicks(config.warmupTicks ?? 0, nodeCount, config.warmupBudgetMs);
+}
+function beginUpdateReheat(graph, config, initialAlpha) {
+  graph.d3Force("center", null);
+  const scale = Math.min(1, Math.max(0, initialAlpha));
+  graph.d3VelocityDecay(1 - (1 - config.velocityDecay) * scale);
+}
+function endUpdateReheat(graph, config, nodeCount) {
+  graph.d3VelocityDecay(config.velocityDecay);
+  graph.warmupTicks(configuredWarmupTicks(config, nodeCount));
+  if (config.centerForce !== false) {
+    graph.d3Force("center", graph.d3Force("center") ?? forceCenter());
+  }
+}
 
 // src/graph-3d/labels.ts
 var LABEL_BUDGET_3D = 40;
@@ -389,6 +405,13 @@ function updateLinkPosition(obj, start, end) {
   if (obj.dashed) obj.object.computeLineDistances();
   return true;
 }
+function placeGhostLink(obj, start, end) {
+  if (updateLinkPosition(obj, start, end)) return;
+  const mesh = obj.object;
+  mesh.position.set(start.x, start.y, start.z);
+  mesh.lookAt(end.x, end.y, end.z);
+  mesh.scale.z = Math.hypot(end.x - start.x, end.y - start.y, end.z - start.z);
+}
 function disposeLinkObject(obj) {
   obj.geometry.dispose();
   obj.material.dispose();
@@ -545,6 +568,8 @@ function createGraph3DRenderer(ctx) {
   const entranceEdgeAlpha = /* @__PURE__ */ new Map();
   let entranceCameraPull = 1;
   let emphasisTween = null;
+  let ghosts = [];
+  let reheatActive = false;
   let pumpId = null;
   const scheduler = new AnimationScheduler(() => pump());
   function pump() {
@@ -620,11 +645,13 @@ function createGraph3DRenderer(ctx) {
       const p = positions.get(node.id) ?? [0, 0, 0];
       return { id: node.id, node, x: p[0], y: p[1], z: p[2] };
     });
+    const keys = edgeKeys(compilation.edges);
     linkData = compilation.edges.map((edge, edgeIndex) => ({
       source: edge.source,
       target: edge.target,
       edge,
-      edgeIndex
+      edgeIndex,
+      key: keys[edgeIndex]
     }));
     nodeById = new Map(nodeData.map((d) => [d.id, d]));
     graph.graphData({ nodes: nodeData, links: linkData });
@@ -647,11 +674,11 @@ function createGraph3DRenderer(ctx) {
   }
   const linkThreeObject = (datum) => linkObjectFor(datum).object;
   function linkObjectFor(datum) {
-    let obj = linkObjects.get(datum.edgeIndex);
+    let obj = linkObjects.get(datum.key);
     if (!obj) {
       const resting = edgeBaseAlpha?.get(datum.edgeIndex) ?? 0.3;
       obj = createLinkObject(datum.edge, useLinkWidth, resting);
-      linkObjects.set(datum.edgeIndex, obj);
+      linkObjects.set(datum.key, obj);
       const base = displayEdgeAlpha.get(datum.edgeIndex) ?? resting;
       obj.material.opacity = entranceActive ? base * (entranceEdgeAlpha.get(datum.edgeIndex) ?? 0) : base;
     }
@@ -700,10 +727,11 @@ function createGraph3DRenderer(ctx) {
         obj.material.opacity = a;
       }
     }
-    for (const [index, obj] of linkObjects) {
-      const a = displayEdgeAlpha.get(index);
-      if (a === void 0) continue;
-      obj.material.opacity = entranceActive ? a * (entranceEdgeAlpha.get(index) ?? 0) : a;
+    for (const datum of linkData) {
+      const obj = linkObjects.get(datum.key);
+      const a = displayEdgeAlpha.get(datum.edgeIndex);
+      if (!obj || a === void 0) continue;
+      obj.material.opacity = entranceActive ? a * (entranceEdgeAlpha.get(datum.edgeIndex) ?? 0) : a;
     }
   }
   function armEmphasis() {
@@ -1204,6 +1232,104 @@ function createGraph3DRenderer(ctx) {
     });
     scheduler.add(tween);
   }
+  function ghostParent() {
+    for (const obj of nodeObjects.values()) {
+      if (obj.group.parent) return obj.group.parent;
+    }
+    return graph.scene() ?? null;
+  }
+  function nodeGhost(node, pos, alpha, withLabel) {
+    const obj = createNodeObject(node, labelColor());
+    obj.group.position.set(pos.x, pos.y, pos.z);
+    obj.material.opacity = alpha;
+    const fades = [{ material: obj.material, base: alpha }];
+    if (withLabel) {
+      const sprite = ensureLabelSprite(obj);
+      if (sprite) {
+        sprite.visible = true;
+        fades.push({
+          material: sprite.material,
+          base: 1
+        });
+      }
+    }
+    return { object: obj.group, fades, dispose: () => disposeNodeObject(obj) };
+  }
+  function linkGhost(edge, start, end, alpha, useWidth) {
+    const obj = createLinkObject(edge, useWidth, alpha);
+    placeGhostLink(obj, start, end);
+    return {
+      object: obj.object,
+      fades: [{ material: obj.material, base: alpha }],
+      dispose: () => disposeLinkObject(obj)
+    };
+  }
+  function startExitFade(pending) {
+    if (pending.length === 0) return;
+    const cfg = compilation.animation?.exit ?? null;
+    const parent = ghostParent();
+    if (!cfg || prefersReducedMotion() || !parent) {
+      for (const g of pending) g.dispose();
+      return;
+    }
+    for (const g of pending) {
+      for (const f of g.fades) f.material.transparent = true;
+      parent.add(g.object);
+    }
+    ghosts = ghosts.concat(pending);
+    scheduler.add(
+      createTween({
+        duration: cfg.duration,
+        ease: resolveEase(cfg.ease),
+        apply: (t) => {
+          for (const g of pending) {
+            for (const f of g.fades) f.material.opacity = f.base * (1 - t);
+          }
+        },
+        onDone: () => removeGhosts(pending)
+      })
+    );
+  }
+  function removeGhosts(list) {
+    for (const g of list) {
+      g.object.parent?.remove(g.object);
+      g.dispose();
+    }
+    const gone = new Set(list);
+    ghosts = ghosts.filter((g) => !gone.has(g));
+  }
+  function startEnterFade(enteringIds, enteringEdgeIndices) {
+    const cfg = compilation.animation?.update ?? null;
+    if (enteringIds.length === 0 && enteringEdgeIndices.length === 0) return;
+    if (!cfg || prefersReducedMotion()) return;
+    entranceActive = true;
+    for (const node of compilation.nodes) {
+      entranceNodeAlpha.set(node.id, 1);
+      entranceNodeScale.set(node.id, 1);
+    }
+    for (let i = 0; i < compilation.edges.length; i++) entranceEdgeAlpha.set(i, 1);
+    for (const id of enteringIds) {
+      entranceNodeAlpha.set(id, 0);
+      entranceNodeScale.set(id, ENTRANCE_MIN_SCALE);
+    }
+    for (const index of enteringEdgeIndices) entranceEdgeAlpha.set(index, 0);
+    paint();
+    scheduler.add(
+      createTween({
+        duration: cfg.duration,
+        ease: resolveEase(cfg.ease),
+        apply: (t) => {
+          for (const id of enteringIds) {
+            entranceNodeAlpha.set(id, popAlpha(t));
+            entranceNodeScale.set(id, Math.max(ENTRANCE_MIN_SCALE, popScale(t)));
+          }
+          for (const index of enteringEdgeIndices) entranceEdgeAlpha.set(index, t);
+          paint();
+        },
+        onDone: endEntrance
+      })
+    );
+  }
   function search(query) {
     if (destroyed) return;
     searchManager.search(query, compilation.nodes);
@@ -1307,7 +1433,7 @@ function createGraph3DRenderer(ctx) {
         const edge = compilation.edges[i];
         linkData[i].edge = edge;
         if (shapeClassChanged) continue;
-        const obj = linkObjects.get(i);
+        const obj = linkObjects.get(linkData[i].key);
         if (obj) applyLinkVisuals(obj, edge, useLinkWidth);
       }
       if (shapeClassChanged) {
@@ -1320,17 +1446,46 @@ function createGraph3DRenderer(ctx) {
       return;
     }
     const nextNodeIds = new Set(compilation.nodes.map((n) => n.id));
+    const keys = edgeKeys(compilation.edges);
+    const nextKeys = new Set(keys);
+    const prevLinkByKey = new Map(linkData.map((d) => [d.key, d]));
+    const pendingGhosts = [];
     for (const [id, obj] of nodeObjects) {
-      if (!nextNodeIds.has(id)) {
-        disposeNodeObject(obj);
-        nodeObjects.delete(id);
-        displayNodeAlpha.delete(id);
-        entranceNodeAlpha.delete(id);
-        entranceNodeScale.delete(id);
+      if (nextNodeIds.has(id)) continue;
+      const datum = nodeById.get(id);
+      if (datum) {
+        pendingGhosts.push(
+          nodeGhost(
+            datum.node,
+            { x: datum.x ?? 0, y: datum.y ?? 0, z: datum.z ?? 0 },
+            displayNodeAlpha.get(id) ?? datum.node.opacity,
+            Boolean(obj.sprite?.visible)
+          )
+        );
       }
+      disposeNodeObject(obj);
+      nodeObjects.delete(id);
+      displayNodeAlpha.delete(id);
+      entranceNodeAlpha.delete(id);
+      entranceNodeScale.delete(id);
+    }
+    for (const [key, obj] of linkObjects) {
+      if (nextKeys.has(key) && !shapeClassChanged) continue;
+      const datum = prevLinkByKey.get(key);
+      if (datum && !nextKeys.has(key)) {
+        pendingGhosts.push(
+          linkGhost(
+            datum.edge,
+            endpointPos(datum.source),
+            endpointPos(datum.target),
+            displayEdgeAlpha.get(datum.edgeIndex) ?? 0.3,
+            prevUseLinkWidth
+          )
+        );
+      }
+      disposeLinkObject(obj);
+      linkObjects.delete(key);
     }
-    for (const obj of linkObjects.values()) disposeLinkObject(obj);
-    linkObjects.clear();
     displayEdgeAlpha.clear();
     entranceEdgeAlpha.clear();
     const survivors = new Map(nodeById);
@@ -1351,15 +1506,33 @@ function createGraph3DRenderer(ctx) {
         z: seedZ(node.id, node.radius, node.community)
       };
     });
-    linkData = compilation.edges.map((edge, edgeIndex) => ({
-      source: edge.source,
-      target: edge.target,
-      edge,
-      edgeIndex
-    }));
+    const enteringEdgeIndices = [];
+    linkData = compilation.edges.map((edge, edgeIndex) => {
+      const key = keys[edgeIndex];
+      const existing = shapeClassChanged ? void 0 : prevLinkByKey.get(key);
+      if (!prevLinkByKey.has(key)) enteringEdgeIndices.push(edgeIndex);
+      if (existing) {
+        existing.edge = edge;
+        existing.edgeIndex = edgeIndex;
+        const obj = linkObjects.get(key);
+        if (obj) applyLinkVisuals(obj, edge, useLinkWidth);
+        return existing;
+      }
+      return { source: edge.source, target: edge.target, edge, edgeIndex, key };
+    });
     nodeById = new Map(nodeData.map((d) => [d.id, d]));
-    applySimulationConfig(graph, compilation.simulationConfig, nodeData.length);
+    applySimulationConfig(graph, compilation.simulationConfig, nodeData.length, {
+      warmupTicks: 0
+    });
+    beginUpdateReheat(
+      graph,
+      compilation.simulationConfig,
+      reheatAlpha(diff, compilation.edges.length)
+    );
+    reheatActive = true;
     graph.graphData({ nodes: nodeData, links: linkData });
+    startEnterFade(diff.enteringIds, enteringEdgeIndices);
+    startExitFade(pendingGhosts);
     pruneInteractionState();
     armEmphasis();
   }
@@ -1381,6 +1554,7 @@ function createGraph3DRenderer(ctx) {
     if (destroyed) return;
     destroyed = true;
     scheduler.cancelAll();
+    removeGhosts(ghosts);
     if (pumpId !== null) {
       cancelAnimationFrame(pumpId);
       pumpId = null;
@@ -1423,7 +1597,7 @@ function createGraph3DRenderer(ctx) {
     graph.backgroundColor(resolvedSurface(compilation.theme));
   }
   graph.showNavInfo(false).enableNodeDrag(false).nodeId("id").nodeLabel("").linkLabel("").nodeVal((d) => d.node.radius).nodeColor((d) => d.node.fill).nodeThreeObject((d) => nodeObjectFor(d).group).linkColor((d) => d.edge.stroke).linkWidth((d) => useLinkWidth ? d.edge.strokeWidth : 0).linkThreeObject(linkThreeObject).linkPositionUpdate((_obj, coords, d) => {
-    const link = linkObjects.get(d.edgeIndex);
+    const link = linkObjects.get(d.key);
     return link ? updateLinkPosition(link, coords.start, coords.end) : false;
   }).linkHoverPrecision(useLinkWidth ? 4 : 8);
   const { width, height } = shell.getSize();
@@ -1484,6 +1658,10 @@ function createGraph3DRenderer(ctx) {
     }
   }).onEngineStop(() => {
     if (destroyed) return;
+    if (reheatActive) {
+      reheatActive = false;
+      endUpdateReheat(graph, compilation.simulationConfig, nodeData.length);
+    }
     if (autoFit && options?.fitOnLoad !== false) {
       autoFit = false;
       fitNow({ duration: 0 });
@@ -1531,6 +1709,15 @@ function createGraph3DRenderer(ctx) {
     destroy
   };
 }
+function edgeKeys(edges) {
+  const seen = /* @__PURE__ */ new Map();
+  return edges.map((edge) => {
+    const base = `${edge.source}\0${edge.target}`;
+    const n = seen.get(base) ?? 0;
+    seen.set(base, n + 1);
+    return `${base}\0${n}`;
+  });
+}
 function themeBackground(theme) {
   const colors = theme?.colors;
   if (!colors || Array.isArray(colors)) return void 0;