@opendata-ai/openchart-vanilla 8.0.0-rc.13 → 8.0.0-rc.15

package/dist/index.d.ts

@@ -219,6 +219,10 @@ interface GraphInstance {
     getHighlight(): string[] | null;
     /** Headless snapshot of the legend (node categories + edge categories). */
     getLegend(): GraphLegendData;
+    /** Set the active category filter declaratively (replaces legend toggle state). */
+    setActiveCategories(values: string[]): void;
+    /** Current active category values (empty = all active, no filter). */
+    getActiveCategories(): string[];
     resize(): void;
     destroy(): void;
 }

package/dist/index.js

@@ -570,6 +570,7 @@ var ZoomTransform = class _ZoomTransform {
     if (nodes.length === 0) {
       return { transform: _ZoomTransform.identity(), contentHeight: canvasH };
     }
+    const insetTop = Math.min(Math.max(0, opts?.insetTop ?? 0), canvasH * 0.4);
     let minX = Infinity;
     let minY = Infinity;
     let maxX = -Infinity;
@@ -585,8 +586,12 @@ var ZoomTransform = class _ZoomTransform {
     let graphH = maxY - minY;
     if (graphW === 0 && graphH === 0) {
       return {
-        transform: new _ZoomTransform(canvasW / 2 - minX, canvasH / 2 - minY, 1),
-        contentHeight: padding * 2
+        transform: new _ZoomTransform(
+          canvasW / 2 - minX,
+          insetTop + (canvasH - insetTop) / 2 - minY,
+          1
+        ),
+        contentHeight: padding * 2 + insetTop
       };
     }
     if (opts?.spread !== false && nodes.length > 50) {
@@ -601,13 +606,13 @@ var ZoomTransform = class _ZoomTransform {
       maxY = cy2 + graphH / 2;
     }
     const availW = canvasW - padding * 2;
-    const availH = canvasH - padding * 2;
+    const availH = canvasH - insetTop - padding * 2;
     const k = Math.min(1, availW / graphW, availH / graphH);
     const cx = (minX + maxX) / 2;
     const cy = (minY + maxY) / 2;
     const tx = canvasW / 2 - cx * k;
-    const ty = canvasH / 2 - cy * k;
-    const contentHeight = graphH * k + padding * 2;
+    const ty = insetTop + (canvasH - insetTop) / 2 - cy * k;
+    const contentHeight = graphH * k + padding * 2 + insetTop;
     return {
       transform: new _ZoomTransform(tx, ty, k),
       contentHeight
@@ -727,6 +732,62 @@ function nodeEnterProgress(globalT, index2, total, buckets = 8) {
   return Math.round(clamped * b) / b;
 }
 var ENTRANCE_STAGGER_MAX_NODES = 3e3;
+var ENTRANCE_DRIFT_PX = 16;
+function centroid(nodes) {
+  let cx = 0;
+  let cy = 0;
+  for (const n of nodes) {
+    cx += n.x;
+    cy += n.y;
+  }
+  cx /= nodes.length;
+  cy /= nodes.length;
+  return { cx, cy };
+}
+function entranceOrder(nodes) {
+  const rank = /* @__PURE__ */ new Map();
+  if (nodes.length === 0) return rank;
+  const { cx, cy } = centroid(nodes);
+  const sorted = [...nodes].sort((a2, b) => {
+    const da = (a2.x - cx) * (a2.x - cx) + (a2.y - cy) * (a2.y - cy);
+    const db = (b.x - cx) * (b.x - cx) + (b.y - cy) * (b.y - cy);
+    return da - db;
+  });
+  for (let i = 0; i < sorted.length; i++) rank.set(sorted[i].id, i);
+  return rank;
+}
+function entranceOffsets(nodes, dist = ENTRANCE_DRIFT_PX) {
+  const offsets = /* @__PURE__ */ new Map();
+  if (nodes.length === 0) return offsets;
+  const { cx, cy } = centroid(nodes);
+  for (const n of nodes) {
+    const dx = n.x - cx;
+    const dy = n.y - cy;
+    const len = Math.sqrt(dx * dx + dy * dy);
+    if (len < 1e-6) {
+      offsets.set(n.id, { x: 0, y: -dist });
+    } else {
+      offsets.set(n.id, { x: dx / len * dist, y: dy / len * dist });
+    }
+  }
+  return offsets;
+}
+function popScale(t) {
+  if (t <= 0) return 0;
+  if (t >= 1) return 1;
+  const c1 = 1.70158;
+  const c3 = c1 + 1;
+  const u = t - 1;
+  return 1 + c3 * u * u * u + c1 * u * u;
+}
+function popAlpha(t) {
+  const a2 = t / 0.6;
+  return a2 >= 1 ? 1 : a2 <= 0 ? 0 : a2;
+}
+function driftFactor(t) {
+  const u = 1 - (t <= 0 ? 0 : t >= 1 ? 1 : t);
+  return u * u;
+}
 
 // src/graph/canvas-renderer.ts
 var LABEL_FONT_MIN = 8;
@@ -765,12 +826,24 @@ function nodeTierAlpha(tier, dimOpacity) {
 function lerp(a2, b, t) {
   return a2 + (b - a2) * t;
 }
+var ZERO_SHIFT = { x: 0, y: 0 };
 function makeEntranceReveal(entrance, total) {
   const g = entrance.t;
-  const ramp = (nodeT) => 0.6 + 0.4 * nodeT;
+  const { stagger, order, offsets } = entrance;
+  const rankOf = (node) => order?.get(node.id) ?? node.index;
+  const nodeT = (node) => stagger ? nodeEnterProgress(g, rankOf(node), total) : g;
   const edgeAlpha = Math.max(0, (g - 0.3) / 0.7);
+  const globalRamp = 0.6 + 0.4 * g;
   return {
-    nodeRamp: (node) => ramp(entrance.stagger ? nodeEnterProgress(g, node.index, total) : g),
+    nodeAlpha: (node) => stagger ? popAlpha(nodeT(node)) : globalRamp,
+    nodeScale: (node) => stagger ? popScale(nodeT(node)) : globalRamp,
+    shift: (id) => {
+      if (!stagger || !offsets || !order) return ZERO_SHIFT;
+      const off = offsets.get(id);
+      if (!off) return ZERO_SHIFT;
+      const f = driftFactor(nodeEnterProgress(g, order.get(id) ?? 0, total));
+      return f > 0 ? { x: off.x * f, y: off.y * f } : ZERO_SHIFT;
+    },
     edgeAlpha,
     labelAlpha: g
   };
@@ -1131,8 +1204,10 @@ var GraphCanvasRenderer = class {
       return nodeTierAlpha(nodeTier(node, nextFocus), dimOpacity);
     };
     const searchAlpha = (node) => searchMatches !== null && !searchMatches.has(node.id) ? SEARCH_NON_MATCH_ALPHA : 1;
-    const entranceRamp = (node) => entrance ? entrance.nodeRamp(node) : 1;
-    const effectiveAlpha = (node) => focusAlpha(node) * searchAlpha(node) * entranceRamp(node) * enterAlphaFor(node.id);
+    const entranceAlpha = (node) => entrance ? entrance.nodeAlpha(node) : 1;
+    const entranceScale = (node) => entrance ? entrance.nodeScale(node) : 1;
+    const entranceShift = (node) => entrance ? entrance.shift(node.id) : ZERO_SHIFT;
+    const effectiveAlpha = (node) => focusAlpha(node) * searchAlpha(node) * entranceAlpha(node) * enterAlphaFor(node.id);
     const bulkNodes = [];
     const specialNodes = [];
     for (const node of nodes) {
@@ -1142,8 +1217,8 @@ var GraphCanvasRenderer = class {
         bulkNodes.push(node);
       }
     }
-    const r = (node) => Math.max(node.radius, minRadius) * entranceRamp(node);
-    if (showGlow) {
+    const r = (node) => Math.max(node.radius, minRadius) * entranceScale(node);
+    if (showGlow && !entrance) {
       this.drawGlowBatched(ctx, bulkNodes, searchMatches, minRadius);
     }
     const fillGroups = /* @__PURE__ */ new Map();
@@ -1163,8 +1238,10 @@ var GraphCanvasRenderer = class {
       ctx.beginPath();
       for (const node of group) {
         const nr = r(node);
-        ctx.moveTo(node.x + nr, node.y);
-        ctx.arc(node.x, node.y, nr, 0, TWO_PI);
+        if (nr <= 0) continue;
+        const s = entranceShift(node);
+        ctx.moveTo(node.x + s.x + nr, node.y + s.y);
+        ctx.arc(node.x + s.x, node.y + s.y, nr, 0, TWO_PI);
       }
       ctx.fill();
     }
@@ -1186,8 +1263,10 @@ var GraphCanvasRenderer = class {
       ctx.beginPath();
       for (const node of group) {
         const nr = r(node);
-        ctx.moveTo(node.x + nr, node.y);
-        ctx.arc(node.x, node.y, nr, 0, TWO_PI);
+        if (nr <= 0) continue;
+        const s = entranceShift(node);
+        ctx.moveTo(node.x + s.x + nr, node.y + s.y);
+        ctx.arc(node.x + s.x, node.y + s.y, nr, 0, TWO_PI);
       }
       ctx.stroke();
     }
@@ -1199,17 +1278,20 @@ var GraphCanvasRenderer = class {
       const hoverScale = hoverRadiusScale?.get(node.id) ?? (isHovered ? 1.15 : 1);
       const radius = baseRadius * hoverScale;
       const brightened = isHovered && hoverScale >= 1.075;
+      const s = entranceShift(node);
+      const nx = node.x + s.x;
+      const ny = node.y + s.y;
       ctx.globalAlpha = dimmed ? SEARCH_NON_MATCH_ALPHA : 1;
       if (showGlow && !dimmed) {
         ctx.beginPath();
-        ctx.arc(node.x, node.y, radius * GLOW_RADIUS_MULTIPLIER, 0, TWO_PI);
+        ctx.arc(nx, ny, radius * GLOW_RADIUS_MULTIPLIER, 0, TWO_PI);
         ctx.fillStyle = node.fill;
         ctx.globalAlpha = GLOW_ALPHA;
         ctx.fill();
         ctx.globalAlpha = dimmed ? SEARCH_NON_MATCH_ALPHA : 1;
       }
       ctx.beginPath();
-      ctx.arc(node.x, node.y, radius, 0, TWO_PI);
+      ctx.arc(nx, ny, radius, 0, TWO_PI);
       ctx.fillStyle = brightened ? brighten(node.fill) : node.fill;
       ctx.fill();
       ctx.strokeStyle = node.stroke;
@@ -1217,7 +1299,7 @@ var GraphCanvasRenderer = class {
       ctx.stroke();
       if (isSelected) {
         ctx.beginPath();
-        ctx.arc(node.x, node.y, radius + 3, 0, TWO_PI);
+        ctx.arc(nx, ny, radius + 3, 0, TWO_PI);
         ctx.strokeStyle = theme.colors.categorical[0] ?? "#3b82f6";
         ctx.lineWidth = 2;
         ctx.stroke();
@@ -3531,10 +3613,21 @@ function diffGraphUpdate(prevNodes, prevEdges, next, prevConfig, seed) {
   const exitingNodes = prevNodes.filter((n) => !nextIds.has(n.id));
   const nextEdgeKeys = new Set(next.edges.map((e) => `${e.source} ${e.target}`));
   const exitingEdges = prevEdges.filter((e) => !nextEdgeKeys.has(`${e.source} ${e.target}`));
-  const prevEdgeKeys = new Set(prevEdges.map((e) => `${e.source} ${e.target}`));
+  const prevEdgeCounts = /* @__PURE__ */ new Map();
+  for (const e of prevEdges) {
+    const k = `${e.source} ${e.target}`;
+    prevEdgeCounts.set(k, (prevEdgeCounts.get(k) ?? 0) + 1);
+  }
   let enteringEdgeCount = 0;
+  const remainingPrev = new Map(prevEdgeCounts);
   for (const e of next.edges) {
-    if (!prevEdgeKeys.has(`${e.source} ${e.target}`)) enteringEdgeCount++;
+    const k = `${e.source} ${e.target}`;
+    const c2 = remainingPrev.get(k);
+    if (c2 && c2 > 0) {
+      remainingPrev.set(k, c2 - 1);
+    } else {
+      enteringEdgeCount++;
+    }
   }
   const sameNodes = prevIds.size === nextIds.size && enteringIds.length === 0;
   const sameEdges = edgeSetsEqual(prevEdges, next.edges);
@@ -3668,6 +3761,8 @@ function createGraph(container, spec, options) {
   let entranceProgress = 1;
   let entranceActive = false;
   let entranceStagger = false;
+  let entranceOrderMap = null;
+  let entranceOffsetMap = null;
   let entranceFitInFlight = false;
   let entranceReveal = null;
   let suppressEntranceOnce = options?.suppressEntrance ?? false;
@@ -3807,6 +3902,7 @@ function createGraph(container, spec, options) {
       wrapper.appendChild(legendEl);
     }
     container.appendChild(wrapper);
+    syncChromeInset();
     const canvasHeight = Math.max(height, 200);
     renderer = new GraphCanvasRenderer(canvas);
     renderer.resize(width, canvasHeight);
@@ -3856,6 +3952,16 @@ function createGraph(container, spec, options) {
   }
   function syncLegendActiveState() {
     if (legendController) legendController.update(legendViewData());
+    syncChromeInset();
+  }
+  function syncChromeInset() {
+    if (!chromeEl) return;
+    const legendW = legendEl?.offsetWidth ?? 0;
+    chromeEl.style.right = legendW > 0 ? `${legendW + 24}px` : "";
+  }
+  function chromeInsetTop() {
+    if (!chromeEl || chromeEl.style.display === "none") return 0;
+    return chromeEl.offsetHeight;
   }
   function springyDragEnabled() {
     return compilation.interaction.springyDrag && compilation.nodes.length <= SPRINGY_DRAG_MAX_NODES;
@@ -3943,7 +4049,8 @@ function createGraph(container, spec, options) {
     const { width: cw, height: ch } = getCanvasDimensions();
     const warmed = (compilation.simulationConfig.warmupTicks ?? 0) > 0;
     const { transform } = ZoomTransform.fitBounds(positionedNodes, cw, ch, void 0, {
-      spread: !warmed
+      spread: !warmed,
+      insetTop: chromeInsetTop()
     });
     return transform;
   }
@@ -3961,12 +4068,19 @@ function createGraph(container, spec, options) {
       return;
     }
     const { width: cw, height: ch } = getCanvasDimensions();
-    const pulledBack = fit.zoomAt(fit.k * 0.92, cw / 2, ch / 2);
+    const pulledBack = fit.zoomAt(fit.k * 0.85, cw / 2, ch / 2);
     interactionManager.setTransform(pulledBack);
     cameraChangePending = true;
     entranceActive = true;
     entranceProgress = 0;
     entranceStagger = enter.stagger && positionedNodes.length <= ENTRANCE_STAGGER_MAX_NODES;
+    if (entranceStagger) {
+      entranceOrderMap = entranceOrder(positionedNodes);
+      entranceOffsetMap = entranceOffsets(positionedNodes);
+    } else {
+      entranceOrderMap = null;
+      entranceOffsetMap = null;
+    }
     if (enter.cameraFit) {
       entranceFitInFlight = true;
       flyCamera(fit, { duration: enter.duration + 100 }, () => {
@@ -4182,7 +4296,12 @@ function createGraph(container, spec, options) {
       focus: focus ?? { t: 1, prev: settledNext, next: settledNext },
       hoverRadiusScale,
       dimOpacity: highlightDimOpacity ?? compilation.interaction.dimOpacity,
-      entrance: entranceActive && entranceProgress < 1 ? { t: entranceProgress, stagger: entranceStagger } : void 0,
+      entrance: entranceActive && entranceProgress < 1 ? {
+        t: entranceProgress,
+        stagger: entranceStagger,
+        order: entranceOrderMap ?? void 0,
+        offsets: entranceOffsetMap ?? void 0
+      } : void 0,
       enterAlpha: enterAlphaMap ?? void 0,
       exiting: exitingGhosts ?? void 0
     };
@@ -4421,7 +4540,10 @@ function createGraph(container, spec, options) {
       positionedNodes,
       cw,
       ch,
-      opts?.padding
+      opts?.padding,
+      {
+        insetTop: chromeInsetTop()
+      }
     );
     flyCamera(fitTransform, opts);
   }
@@ -4501,6 +4623,18 @@ function createGraph(container, spec, options) {
       }))
     };
   }
+  function setActiveCategories(values) {
+    if (destroyed) return;
+    activeCategories = new Set(values);
+    highlightSet = categoryHighlightSet();
+    highlightDimOpacity = null;
+    syncLegendActiveState();
+    refreshFocus();
+    emitHighlightChange();
+  }
+  function getActiveCategories() {
+    return [...activeCategories];
+  }
   function toggleLegendCategory(value) {
     if (activeCategories.has(value)) activeCategories.delete(value);
     else activeCategories.add(value);
@@ -4516,6 +4650,7 @@ function createGraph(container, spec, options) {
     const { width, height } = getContainerDimensions();
     const canvasHeight = Math.max(height, 200);
     renderer.resize(width, canvasHeight);
+    syncChromeInset();
     if (entranceFitInFlight && interactionManager) {
       cancelFlight();
       entranceFitInFlight = false;
@@ -4787,6 +4922,9 @@ function createGraph(container, spec, options) {
       },
       getHighlight: () => null,
       getLegend: () => ({ field: null, nodes: [], edges: [] }),
+      setActiveCategories() {
+      },
+      getActiveCategories: () => [],
       resize() {
       },
       destroy() {
@@ -4815,6 +4953,8 @@ function createGraph(container, spec, options) {
     clearHighlight,
     getHighlight,
     getLegend,
+    setActiveCategories,
+    getActiveCategories,
     resize: doResize,
     destroy
   };