graphein 0.20.0 → 0.22.0

package/dist/runtime/chartAnimation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/runtime/chartAnimation.ts"],
-  "sourcesContent": ["import type { ChartSpec } from '../spec/types';\nimport type { Size } from '../types';\nimport { drawAxesUnderlay } from '../axes';\nimport { drawAnnotations, drawTrendlines, type CartesianRenderer, type CustomRenderer, type RenderContext } from '../charts';\nimport type { CanvasLayer } from '../render/canvasLayer';\nimport type { Surface } from '../render/surface';\nimport type { ThemeTokens } from '../theme';\nimport { animate, type AnimationHandle, type ResolvedEntrance } from '../animation';\nimport type { CartesianModel } from './cartesian';\nimport { paintBackground } from './runtimeShared';\n\n/**\n * Cartesian entrance. Two modes: a left-to-right `wipe` with a brief fade\n * (line/area/scatter/box), or `grow` where the renderer re-runs each frame with\n * an `entranceProgress` so bars rise out of the value baseline. Gridlines + axis\n * baselines stay fully drawn throughout; the final frame is pixel-identical to a\n * static draw.\n */\nexport function runCartesianEntrance(\n  surface: Surface,\n  model: CartesianModel,\n  renderer: CartesianRenderer,\n  tokens: ThemeTokens,\n  background: string | undefined,\n  anim: ResolvedEntrance,\n  onDone: () => void,\n  mode: 'wipe' | 'grow' = 'wipe',\n): AnimationHandle {\n  const ctx = surface.marks.ctx;\n  const { plot } = model;\n  const bg = background ?? tokens.color.background;\n  const paintFrame = (t: number): void => {\n    surface.marks.clear();\n    surface.evidence.reset({ width: surface.width, height: surface.height }, model.spec.data?.length ?? 0, bg);\n    ctx.save();\n    ctx.fillStyle = bg;\n    ctx.fillRect(0, 0, surface.width, surface.height);\n    ctx.restore();\n    drawAxesUnderlay(surface, model);\n    if (mode === 'grow') return paintGrowFrame(surface, model, renderer, t);\n    if (t <= 0) return;\n    ctx.save();\n    ctx.globalAlpha = Math.min(1, 0.2 + 0.8 * t);\n    ctx.beginPath();\n    ctx.rect(plot.x, plot.y, plot.width * t, plot.height + 1);\n    ctx.clip();\n    renderer(surface, model);\n    ctx.restore();\n    drawTrendlines(surface, model);\n    drawAnnotations(surface, model);\n  };\n  paintFrame(0);\n  return animate({ duration: anim.duration, easing: anim.easing, onUpdate: paintFrame,\n    onComplete: () => { paintFrame(1); onDone(); } });\n}\n\nfunction paintGrowFrame(surface: Surface, model: CartesianModel, renderer: CartesianRenderer, t: number): void {\n  // Marks grow from the baseline; leave the shared model clean afterwards so\n  // interaction/report code always sees the fully-drawn state.\n  model.entranceProgress = t;\n  renderer(surface, model);\n  model.entranceProgress = undefined;\n  drawTrendlines(surface, model);\n  drawAnnotations(surface, model);\n}\n\n/**\n * Custom-chart entrance that re-renders the visual each frame with an\n * interpolation progress (0..1) mixed into its RenderContext \u2014 the number\n * roll-up (kpi) and arc sweep (pie/gauge). `paint` clears the layers and\n * repaints; the final frame (t=1) is pixel-identical to a static draw.\n *\n * Note we do *not* paint frame 0 synchronously: the caller already rendered the\n * final state, and `animate()` schedules the first frame via rAF (which runs\n * before the browser's first paint, so the roll still starts from ~0 with no\n * flash). This keeps the synchronous DOM \u2014 and thus SSR / no-rAF / test reads \u2014\n * showing the final value rather than 0.\n */\nfunction runCustomProgress(\n  anim: ResolvedEntrance,\n  onDone: () => void,\n  paint: (t: number) => void,\n): AnimationHandle {\n  return animate({ duration: anim.duration, easing: anim.easing, onUpdate: paint,\n    onComplete: () => { paint(1); onDone(); } });\n}\n\nexport function runCustomRendererProgress(\n  surface: Surface,\n  renderer: CustomRenderer,\n  spec: ChartSpec,\n  tokens: ThemeTokens,\n  size: Size,\n  options: {\n    anim: ResolvedEntrance;\n    onDone: () => void;\n    dataLength: number;\n    background?: string;\n    context: RenderContext;\n    progressKey: 'valueProgress' | 'sweepProgress';\n    extraContext?: Partial<RenderContext>;\n  },\n): AnimationHandle {\n  return runCustomProgress(options.anim, options.onDone, (t) => {\n    surface.overlay.replaceChildren();\n    surface.marks.clear();\n    surface.labels.clear();\n    surface.evidence.reset(size, options.dataLength, options.background ?? tokens.color.background);\n    paintBackground(surface, tokens, options.background);\n    renderer(surface, spec, tokens, size, { ...options.context, ...options.extraContext, [options.progressKey]: t });\n  });\n}\n\n/**\n * Custom-chart entrance: a compositor-friendly opacity + slight upward rise of\n * the whole surface. Used for charts whose content is already fully painted\n * (pie/heatmap canvas, kpi/table/matrix DOM), so re-running the renderer per\n * frame isn't needed.\n */\nexport function runFadeEntrance(surface: Surface, anim: ResolvedEntrance, onDone: () => void): AnimationHandle {\n  const apply = (t: number): void => {\n    surface.root.style.opacity = String(t);\n    const dy = (1 - t) * 8;\n    surface.root.style.transform = dy > 0.02 ? `translateY(${dy.toFixed(2)}px)` : '';\n  };\n  apply(0);\n  return animate({ duration: anim.duration, easing: anim.easing, onUpdate: apply,\n    onComplete: () => { surface.root.style.opacity = ''; surface.root.style.transform = ''; onDone(); } });\n}\n\n/**\n * Copy a canvas layer's current backing store into a detached canvas so it can\n * be composited later (used to cross-fade the previous frame on update()).\n */\nexport function snapshotLayer(layer: CanvasLayer): HTMLCanvasElement {\n  const off = document.createElement('canvas');\n  off.width = layer.canvas.width;\n  off.height = layer.canvas.height;\n  if (off.width > 0 && off.height > 0) off.getContext('2d')?.drawImage(layer.canvas, 0, 0);\n  return off;\n}\n\n/**\n * Update transition: cross-fade the marks layer from the previous frame to the\n * freshly drawn one. The new frame is already live on the canvas when this runs,\n * so we snapshot it and composite `new` under `old` with `old` fading out. The\n * final frame is pixel-identical to the static (instant) draw.\n */\nexport function runUpdateCrossfade(surface: Surface, before: HTMLCanvasElement, anim: ResolvedEntrance): AnimationHandle {\n  const after = snapshotLayer(surface.marks);\n  const ctx = surface.marks.ctx;\n  const w = surface.marks.width;\n  const h = surface.marks.height;\n  const paint = (t: number): void => {\n    surface.marks.clear();\n    ctx.save();\n    ctx.globalAlpha = 1;\n    ctx.drawImage(after, 0, 0, w, h);\n    if (t < 1) {\n      ctx.globalAlpha = 1 - t;\n      ctx.drawImage(before, 0, 0, w, h);\n    }\n    ctx.restore();\n  };\n  paint(0);\n  return animate({ duration: anim.duration, easing: anim.easing, onUpdate: paint, onComplete: () => paint(1) });\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { ChartSpec, CurveType } from '../spec/types';\nimport type { Size } from '../types';\nimport { drawAxesUnderlay, drawOverlay } from '../axes';\nimport {\n  drawAnnotationLabels,\n  drawAnnotations,\n  drawTrendlineLabels,\n  drawTrendlines,\n  type CartesianRenderer,\n  type CustomRenderer,\n  type RenderContext,\n} from '../charts';\nimport { paintGeometry, transientSurface } from '../charts/geometry';\nimport type { CanvasLayer } from '../render/canvasLayer';\nimport { CHROME_IN_FLIGHT, fadeChrome, revealAt, setChromeEntrance, setChromeMorph, type ChromeSnapshot } from '../render/chromeMotion';\nimport { ANNOTATION_LABELS } from '../charts/annotations';\nimport { TREND_LABELS } from '../charts/trendline';\nimport { PathSampler } from '../render/pathSample';\nimport type { Surface } from '../render/surface';\nimport { line } from '../shape';\nimport type { ThemeTokens } from '../theme';\nimport { withAlpha } from '../color';\nimport { animate, linear, type AnimationHandle, type ResolvedEntrance } from '../animation';\nimport { resolveCurve, type CartesianModel } from './cartesian';\nimport type { GeometryMorph } from './morph';\nimport { paintBackground } from './runtimeShared';\n\n/** Label stashes an entrance fades in place (their DOM is drawn once, then faded). */\nconst LATE_LABEL_STASHES = [ANNOTATION_LABELS, TREND_LABELS];\n\n/** Fraction of a staggered entrance spread across marks as a wave. */\nconst ENTRANCE_STAGGER = 0.4;\n/** Staggered entrances run a little longer so each mark keeps a full ease. */\nconst STAGGER_STRETCH = 1.35;\n\n/**\n * Cartesian entrance. Two modes:\n * - `wipe`: a left-to-right reveal. Lines and areas draw on at full strength\n *   with a glowing head riding each series' leading edge; other charts (box)\n *   reveal with a brief fade.\n * - `grow`: the renderer re-runs each frame with an `entranceProgress`, so bars\n *   rise out of the value baseline and scatter points pop in \u2014 staggered as a\n *   left-to-right wave, each mark easing on its own schedule.\n * Gridlines + axis baselines stay fully drawn throughout. Reference lines,\n * bands and trendlines draw in once the marks have mostly arrived, and their\n * labels (`lateLabels`) fade in last. The final frame is pixel-identical to a\n * static draw.\n */\nexport function runCartesianEntrance(\n  surface: Surface,\n  model: CartesianModel,\n  renderer: CartesianRenderer,\n  tokens: ThemeTokens,\n  background: string | undefined,\n  anim: ResolvedEntrance,\n  onDone: () => void,\n  mode: 'wipe' | 'grow' = 'wipe',\n  lateLabels: readonly HTMLElement[] = [],\n): AnimationHandle {\n  const ctx = surface.marks.ctx;\n  const { plot } = model;\n  const bg = background ?? tokens.color.background;\n  const drawOn = model.spec.type === 'line' || model.spec.type === 'area';\n  const staggered = mode === 'grow' && staggerable(model);\n  // Chrome timing only moves forward and finishes with the entrance, so an\n  // overshooting easing (backOut, elasticOut) can't flicker reference lines or labels.\n  let shown = 0;\n  const paintFrame = (t: number, done = false): void => {\n    shown = done ? 1 : Math.min(CHROME_IN_FLIGHT, Math.max(shown, t));\n    setChromeEntrance(surface, done ? null : shown);\n    const labelReveal = done ? 1 : revealAt(shown, 0.78, 1);\n    for (const el of lateLabels) el.style.opacity = done ? '' : String(labelReveal);\n    // The late labels fade in place; an update that interrupts captures them as shown.\n    for (const name of LATE_LABEL_STASHES) fadeChrome(surface, name, labelReveal);\n    surface.marks.clear();\n    surface.evidence.reset({ width: surface.width, height: surface.height }, model.spec.data?.length ?? 0, bg);\n    ctx.save();\n    ctx.fillStyle = bg;\n    ctx.fillRect(0, 0, surface.width, surface.height);\n    ctx.restore();\n    drawAxesUnderlay(surface, model);\n    if (mode === 'grow') return paintGrowFrame(surface, model, renderer, t, staggered ? anim.easing : undefined);\n    if (t <= 0) return;\n    ctx.save();\n    ctx.globalAlpha = drawOn ? 1 : Math.min(1, 0.2 + 0.8 * t);\n    ctx.beginPath();\n    ctx.rect(plot.x, plot.y, plot.width * t, plot.height + 1);\n    ctx.clip();\n    renderer(surface, model);\n    ctx.restore();\n    if (drawOn) paintDrawOnHeads(ctx, model, bg, t);\n    drawTrendlines(surface, model);\n    drawAnnotations(surface, model);\n  };\n  paintFrame(0);\n  // A staggered grow runs on a linear clock; each mark applies the easing itself.\n  return animate({\n    duration: staggered ? anim.duration * STAGGER_STRETCH : anim.duration,\n    easing: staggered ? linear : anim.easing,\n    onUpdate: (t, raw) => paintFrame(t, raw >= 1),\n    onComplete: () => { paintFrame(1, true); onDone(); },\n  });\n}\n\n/** Staggering needs a few marks to read as a wave (and never applies to sketches). */\nfunction staggerable(model: CartesianModel): boolean {\n  if (model.sketch) return false;\n  if (model.spec.type === 'scatter') return true;\n  return (model.x.categories?.length ?? 0) >= 3;\n}\n\nfunction paintGrowFrame(\n  surface: Surface,\n  model: CartesianModel,\n  renderer: CartesianRenderer,\n  t: number,\n  staggerEase?: (t: number) => number,\n): void {\n  // Marks grow from the baseline; leave the shared model clean afterwards so\n  // interaction/report code always sees the fully-drawn state.\n  model.entranceProgress = t;\n  if (staggerEase) {\n    model.entranceStagger = ENTRANCE_STAGGER;\n    model.entranceEase = staggerEase;\n  }\n  try {\n    renderer(surface, model);\n  } finally {\n    model.entranceProgress = undefined;\n    model.entranceStagger = undefined;\n    model.entranceEase = undefined;\n  }\n  drawTrendlines(surface, model);\n  drawAnnotations(surface, model);\n}\n\n/**\n * Glowing heads that ride each line/area series' leading edge during the\n * draw-on reveal. They sit exactly on the stroke (sampled from the same curve\n * the renderer drew) and fade out before the final frame, which stays the\n * static draw.\n */\nfunction paintDrawOnHeads(ctx: CanvasRenderingContext2D, model: CartesianModel, background: string, t: number): void {\n  const geometry = model.geometry;\n  if (!geometry || (geometry.kind !== 'line' && geometry.kind !== 'area') || model.sketch) return;\n  const fade = t < 0.72 ? 1 : Math.max(0, (1 - t) / 0.28);\n  if (!(fade > 0)) return;\n  const x = model.plot.x + model.plot.width * t;\n  const path = line({ curve: resolveCurve((model.spec as { curve?: CurveType }).curve) });\n  const strokeWidth = geometry.metrics.strokeWidth;\n  const tracks =\n    geometry.kind === 'line'\n      ? geometry.series.map((s) => ({ color: s.series.color, alpha: s.alpha, points: s.points }))\n      : geometry.bands.map((b) => ({ color: b.series.color, alpha: b.alpha, points: b.points.map((p) => ({ x: p.x, y: p.y1 })) }));\n  ctx.save();\n  for (const track of tracks) {\n    const sampler = new PathSampler();\n    path(track.points, sampler);\n    const y = sampler.yAt(x);\n    if (y === undefined || !Number.isFinite(y)) continue;\n    const alpha = fade * track.alpha;\n    const glow = strokeWidth * 5;\n    const halo = ctx.createRadialGradient(x, y, 0, x, y, glow);\n    halo.addColorStop(0, withAlpha(track.color, 0.45 * alpha));\n    halo.addColorStop(1, withAlpha(track.color, 0));\n    ctx.fillStyle = halo;\n    ctx.beginPath();\n    ctx.arc(x, y, glow, 0, Math.PI * 2);\n    ctx.fill();\n    ctx.globalAlpha = alpha;\n    ctx.beginPath();\n    ctx.arc(x, y, strokeWidth * 1.6, 0, Math.PI * 2);\n    ctx.fillStyle = background;\n    ctx.fill();\n    ctx.beginPath();\n    ctx.arc(x, y, strokeWidth * 1.05, 0, Math.PI * 2);\n    ctx.fillStyle = track.color;\n    ctx.fill();\n    ctx.globalAlpha = 1;\n  }\n  ctx.restore();\n}\n\n/**\n * Custom-chart entrance that re-renders the visual each frame with an\n * interpolation progress (0..1) mixed into its RenderContext \u2014 the number\n * roll-up (kpi) and arc sweep (pie/gauge). `paint` clears the layers and\n * repaints; the final frame (t=1) is pixel-identical to a static draw.\n *\n * Note we do *not* paint frame 0 synchronously: the caller already rendered the\n * final state, and `animate()` schedules the first frame via rAF (which runs\n * before the browser's first paint, so the roll still starts from ~0 with no\n * flash). This keeps the synchronous DOM \u2014 and thus SSR / no-rAF / test reads \u2014\n * showing the final value rather than 0.\n */\nexport function runCustomRendererProgress(\n  surface: Surface,\n  renderer: CustomRenderer,\n  spec: ChartSpec,\n  tokens: ThemeTokens,\n  size: Size,\n  options: {\n    anim: ResolvedEntrance;\n    onDone: () => void;\n    dataLength: number;\n    background?: string;\n    context: RenderContext;\n    progressKey: 'valueProgress' | 'sweepProgress' | 'morphProgress' | 'entranceProgress';\n    extraContext?: Partial<RenderContext>;\n    /**\n     * Paint frames on a transient view so they never reach the evidence ledger\n     * (update transitions, whose static final frame was already drawn and reported).\n     */\n    transient?: boolean;\n    /**\n     * Paint the t = 0 frame synchronously, replacing the static final frame\n     * before the browser can present it (update morphs start from what was on\n     * screen, so showing the destination for a frame would flash).\n     */\n    paintInitial?: boolean;\n    /** The chrome on screen when an update morph began, so axes and annotations glide too. */\n    chrome?: ChromeSnapshot;\n    /** An entrance: reference lines, trendlines and their labels draw in after the marks. */\n    entranceChrome?: boolean;\n  },\n): AnimationHandle {\n  const target = options.transient ? transientSurface(surface) : surface;\n  let shown = 0;\n  const paint = (t: number, done = false): void => {\n    // Chrome stays mid-morph / mid-entrance until the animation completes, even\n    // when an overshooting easing passes 1 on the way.\n    if (options.chrome) setChromeMorph(target, options.chrome, done ? 1 : Math.min(CHROME_IN_FLIGHT, t));\n    if (options.entranceChrome) {\n      shown = done ? 1 : Math.min(CHROME_IN_FLIGHT, Math.max(shown, t));\n      setChromeEntrance(surface, done ? null : shown);\n    }\n    surface.overlay.replaceChildren();\n    surface.marks.clear();\n    target.labels.clear();\n    if (!options.transient) surface.evidence.reset(size, options.dataLength, options.background ?? tokens.color.background);\n    paintBackground(surface, tokens, options.background);\n    renderer(target, spec, tokens, size, { ...options.context, ...options.extraContext, [options.progressKey]: t });\n  };\n  if (options.paintInitial) paint(0);\n  return animate({ duration: options.anim.duration, easing: options.anim.easing, onUpdate: (t, raw) => paint(t, raw >= 1),\n    onComplete: () => { paint(1, true); options.onDone(); } });\n}\n\n/**\n * Custom-chart entrance: a compositor-friendly opacity + slight upward rise of\n * the whole surface. Used for charts whose content is already fully painted\n * (pie/heatmap canvas, kpi/table/matrix DOM), so re-running the renderer per\n * frame isn't needed.\n */\nexport function runFadeEntrance(surface: Surface, anim: ResolvedEntrance, onDone: () => void): AnimationHandle {\n  const apply = (t: number): void => {\n    surface.root.style.opacity = String(t);\n    const dy = (1 - t) * 8;\n    surface.root.style.transform = dy > 0.02 ? `translateY(${dy.toFixed(2)}px)` : '';\n  };\n  apply(0);\n  return animate({ duration: anim.duration, easing: anim.easing, onUpdate: apply,\n    onComplete: () => { surface.root.style.opacity = ''; surface.root.style.transform = ''; onDone(); } });\n}\n\n/**\n * Update morph: repaint the marks layer each frame with geometry interpolated\n * from the outgoing frame to the incoming one. With the outgoing frame's\n * `chrome`, the axes, gridlines, tick labels, annotations and trendlines glide\n * from where they were too (the overlay text is rebuilt each frame); without it\n * they sit at the incoming frame's positions. The incoming frame has already\n * been drawn statically (so reports, SSR and test reads see the final state),\n * and the transient surface keeps tween frames out of the render-evidence\n * ledger. The last frame repaints the incoming frame itself, so it is the\n * static draw.\n */\nexport function runCartesianMorph(\n  surface: Surface,\n  model: CartesianModel,\n  morph: GeometryMorph,\n  tokens: ThemeTokens,\n  background: string | undefined,\n  anim: ResolvedEntrance,\n  onFrame: (t: number) => void,\n  onDone: () => void,\n  chrome?: ChromeSnapshot,\n): AnimationHandle {\n  const ctx = surface.marks.ctx;\n  const bg = background ?? tokens.color.background;\n  const transient = transientSurface(surface);\n  const moveChrome = !!chrome && chrome.size > 0;\n  const paint = (t: number, done = false): void => {\n    onFrame(t);\n    // Chrome stays mid-morph until the animation completes, even when an\n    // overshooting easing passes 1 on the way; the final paint is the static chrome.\n    setChromeMorph(transient, chrome, done ? 1 : Math.min(CHROME_IN_FLIGHT, t));\n    surface.marks.clear();\n    ctx.save();\n    ctx.fillStyle = bg;\n    ctx.fillRect(0, 0, surface.width, surface.height);\n    ctx.restore();\n    drawAxesUnderlay(transient, model);\n    paintGeometry(transient, model, morph.at(t));\n    drawTrendlines(transient, model);\n    drawAnnotations(transient, model);\n    if (!moveChrome) return;\n    surface.overlay.replaceChildren();\n    transient.labels.clear();\n    drawOverlay(transient, model);\n    drawAnnotationLabels(transient, model);\n    drawTrendlineLabels(transient, model);\n  };\n  paint(0);\n  return animate({ duration: anim.duration, easing: anim.easing, onUpdate: (t, raw) => paint(t, raw >= 1),\n    onComplete: () => { paint(1, true); onDone(); } });\n}\n\n/**\n * Copy a canvas layer's current backing store into a detached canvas so it can\n * be composited later (used to cross-fade the previous frame on update()).\n */\nexport function snapshotLayer(layer: CanvasLayer): HTMLCanvasElement {\n  const off = document.createElement('canvas');\n  off.width = layer.canvas.width;\n  off.height = layer.canvas.height;\n  if (off.width > 0 && off.height > 0) off.getContext('2d')?.drawImage(layer.canvas, 0, 0);\n  return off;\n}\n\n/**\n * Update transition: cross-fade the marks layer from the previous frame to the\n * freshly drawn one. The new frame is already live on the canvas when this runs,\n * so we snapshot it and composite `new` under `old` with `old` fading out. The\n * final frame is pixel-identical to the static (instant) draw.\n */\nexport function runUpdateCrossfade(surface: Surface, before: HTMLCanvasElement, anim: ResolvedEntrance): AnimationHandle {\n  const after = snapshotLayer(surface.marks);\n  const ctx = surface.marks.ctx;\n  const w = surface.marks.width;\n  const h = surface.marks.height;\n  const paint = (t: number): void => {\n    surface.marks.clear();\n    ctx.save();\n    ctx.globalAlpha = 1;\n    ctx.drawImage(after, 0, 0, w, h);\n    if (t < 1) {\n      ctx.globalAlpha = 1 - t;\n      ctx.drawImage(before, 0, 0, w, h);\n    }\n    ctx.restore();\n  };\n  paint(0);\n  return animate({ duration: anim.duration, easing: anim.easing, onUpdate: paint, onComplete: () => paint(1) });\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/runtime/chartRuntime.d.ts

@@ -14,6 +14,12 @@ export declare class ChartRuntime {
     private interaction?;
     private entrance?;
     private updateTransition?;
+    private lastModel?;
+    private morphState?;
+    private pendingMorph?;
+    private pendingSliceMorph?;
+    private pendingCustomMorph?;
+    private pendingChrome?;
     private preview?;
     private destroyed;
     private lastValue;
@@ -55,7 +61,43 @@ export declare class ChartRuntime {
     private dispatchDebug;
     private dispatchFacet;
     private dispatchCartesian;
+    /**
+     * Start an update morph from `from` (the outgoing frame's geometry) to the
+     * frame just drawn statically. A no-op when the pair can't be morphed, which
+     * leaves update() free to fall back to its cross-fade.
+     */
+    private startMorph;
+    /** Update-transition timing for `spec` under the current motion environment. */
+    private updateMotion;
+    /**
+     * The geometry an update from `prev` to `next` should morph from — what is on
+     * screen right now, including a partially-played morph — or undefined when the
+     * transition shouldn't morph (different or non-cartesian types, sketch/facet/
+     * debug compositions, or motion disabled).
+     */
+    private morphSource;
     private dispatchCustom;
+    /**
+     * Custom-chart update morph: the renderer re-runs each frame with the marks
+     * that were on screen (`morphFrom`) and a morph progress, so bars, tiles,
+     * cells, nodes and links travel to the new data. The static draw above is
+     * the final frame; tween frames are transient, so reports stay on it.
+     */
+    private startCustomMorph;
+    /**
+     * The marks a custom chart's update from `prev` to `next` should travel from
+     * (including a partially-played morph), or undefined when it can't morph:
+     * a type change, pie (which re-balances slices instead), sketch/debug, or
+     * motion disabled. Renderers opt in by stashing their marks.
+     */
+    private customMorphSource;
+    /**
+     * Re-balance pie/donut slices from the ones on screen: the renderer re-runs
+     * each frame with a morph progress (the static draw above is the final frame).
+     */
+    private startSliceMorph;
+    /** The pie/donut slices an update from `prev` to `next` should re-balance from. */
+    private sliceMorphSource;
     private dispatchPlaceholder;
     private customContext;
     private startCustomEntrance;

package/dist/runtime/chartRuntime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chartRuntime.d.ts","sourceRoot":"","sources":["../../src/runtime/chartRuntime.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"chartRuntime.d.ts","sourceRoot":"","sources":["../../src/runtime/chartRuntime.ts"],"names":[],"mappings":"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"}

package/dist/runtime/chartRuntime.js

@@ -48,7 +48,13 @@ import {
   specLegendParam,
   SWEEP_TYPES
 } from "./runtimeShared.js";
-import { runCartesianEntrance, runCustomRendererProgress, runFadeEntrance, runUpdateCrossfade, snapshotLayer } from "./chartAnimation.js";
+import { runCartesianEntrance, runCartesianMorph, runCustomRendererProgress, runFadeEntrance, runUpdateCrossfade, snapshotLayer } from "./chartAnimation.js";
+import { planGeometryMorph } from "./morph.js";
+import { pieStateOf } from "../charts/pieState.js";
+import { clearMorphFrame, morphFrameOf } from "../charts/morphFrame.js";
+import { captureChrome, clearChrome, setChromeEntrance } from "../render/chromeMotion.js";
+const MORPH_TYPES = /* @__PURE__ */ new Set(["bar", "line", "area", "scatter", "box"]);
+const CUSTOM_MORPH_ROW_LIMIT = 5e3;
 class ChartRuntime {
   constructor(container, spec, options = {}) {
     __publicField(this, "container", container);
@@ -60,6 +66,22 @@ class ChartRuntime {
     __publicField(this, "interaction");
     __publicField(this, "entrance");
     __publicField(this, "updateTransition");
+    // The cartesian model behind the frame on screen; its `geometry` is where an
+    // update morph starts from. Cleared whenever a non-cartesian frame is drawn.
+    __publicField(this, "lastModel");
+    // The in-flight update morph and its latest eased progress, so an update that
+    // interrupts it morphs onward from what is actually on screen.
+    __publicField(this, "morphState");
+    // Outgoing geometry handed from update()/selection redraws to the next draw.
+    __publicField(this, "pendingMorph");
+    // Outgoing pie/donut slices handed to the next draw so slices re-balance.
+    __publicField(this, "pendingSliceMorph");
+    // Outgoing keyed marks (see charts/morphFrame) a custom renderer stashed,
+    // handed to the next draw so its marks travel instead of cross-fading.
+    __publicField(this, "pendingCustomMorph");
+    // The axes, annotations and trendlines on screen when an update began, so a
+    // morph moves them with the marks (see render/chromeMotion).
+    __publicField(this, "pendingChrome");
     // The nested chart instance backing the debug view's live preview (when
     // spec.debug is set). Destroyed and recreated on every draw() so it never
     // leaks observers/rAF when the overlay is cleared.
@@ -204,6 +226,8 @@ class ChartRuntime {
     this.entrance = void 0;
     this.updateTransition?.cancel();
     this.updateTransition = void 0;
+    this.morphState = void 0;
+    setChromeEntrance(this.surface, null);
     this.preview?.destroy();
     this.preview = void 0;
   }
@@ -246,6 +270,9 @@ class ChartRuntime {
     this.lastSparkline = prepared.type === "kpi" ? kpiSparklineSeries(prepared.effectiveSpec, data) : null;
   }
   dispatch(frame, prepared, valueFrom, compareFrom, sparklineFrom) {
+    this.lastModel = void 0;
+    clearMorphFrame(this.surface);
+    clearChrome(this.surface);
     const facet = !this.currentSpec.debug && isFaceted(prepared.effectiveSpec) ? buildFacetModels(prepared.effectiveSpec, frame.tokens, frame.size, prepared.colorDomain) : null;
     if (this.currentSpec.debug) return this.dispatchDebug(frame, prepared);
     if (facet) return this.dispatchFacet(frame, prepared, facet);
@@ -285,8 +312,7 @@ class ChartRuntime {
       drawAnnotations(this.surface, model);
     }
     drawOverlay(this.surface, model);
-    drawAnnotationLabels(this.surface, model);
-    drawTrendlineLabels(this.surface, model);
+    const lateLabels = [...drawAnnotationLabels(this.surface, model), ...drawTrendlineLabels(this.surface, model)];
     const override = cartesianInteractionBuilders[prepared.type];
     const interactionModel = override ? override(model) ?? null : buildCartesianInteraction(model);
     if (frame.anim.enabled && renderer) this.entrance = runCartesianEntrance(
@@ -297,19 +323,143 @@ class ChartRuntime {
       this.currentSpec.background,
       frame.anim,
       () => this.finishEntrance(),
-      chartDefinition(prepared.type).entrance === "grow" ? "grow" : "wipe"
+      chartDefinition(prepared.type).entrance === "grow" ? "grow" : "wipe",
+      lateLabels
     );
+    this.lastModel = model;
+    const morphFrom = this.pendingMorph;
+    this.pendingMorph = void 0;
+    if (morphFrom && !frame.anim.enabled) this.startMorph(frame, model, morphFrom);
     return { interactionModel, reportModel: model, legendSelect };
   }
+  /**
+   * Start an update morph from `from` (the outgoing frame's geometry) to the
+   * frame just drawn statically. A no-op when the pair can't be morphed, which
+   * leaves update() free to fall back to its cross-fade.
+   */
+  startMorph(frame, model, from) {
+    const to = model.geometry;
+    const anim = this.updateMotion(this.currentSpec);
+    if (!to || !anim.enabled) return;
+    const morph = planGeometryMorph(from, to);
+    if (!morph) return;
+    const timing = morph.durationScale ? { ...anim, duration: anim.duration * morph.durationScale } : anim;
+    this.updateTransition = runCartesianMorph(
+      this.surface,
+      model,
+      morph,
+      frame.tokens,
+      this.currentSpec.background,
+      timing,
+      (t) => {
+        this.morphState = { morph, t };
+      },
+      () => {
+        this.morphState = void 0;
+        this.updateTransition = void 0;
+        this.interaction?.refresh();
+      },
+      this.pendingChrome
+    );
+  }
+  /** Update-transition timing for `spec` under the current motion environment. */
+  updateMotion(spec) {
+    return resolveUpdate(spec.animation, {
+      reducedMotion: prefersReducedMotion(),
+      disabled: this.options.synchronous === true || globalThis.__GRAPHEIN_DISABLE_ANIM === true
+    });
+  }
+  /**
+   * The geometry an update from `prev` to `next` should morph from — what is on
+   * screen right now, including a partially-played morph — or undefined when the
+   * transition shouldn't morph (different or non-cartesian types, sketch/facet/
+   * debug compositions, or motion disabled).
+   */
+  morphSource(prev, next) {
+    if (prev.type !== next.type || !MORPH_TYPES.has(next.type)) return void 0;
+    if (prev.debug || next.debug || isFaceted(prev) || isFaceted(next)) return void 0;
+    if (resolveSketch(prev) || resolveSketch(next)) return void 0;
+    if (!this.updateMotion(next).enabled) return void 0;
+    if (this.morphState) return this.morphState.morph.at(this.morphState.t);
+    return this.lastModel?.geometry;
+  }
   dispatchCustom(frame, prepared, valueFrom, compareFrom, sparklineFrom) {
     const renderer = customRenderers[prepared.type];
     if (!renderer) return this.dispatchPlaceholder(frame, prepared.type);
     const ctx = this.customContext(frame, prepared);
     const interactionModel = renderer(this.surface, prepared.effectiveSpec, frame.tokens, frame.size, ctx) ?? null;
+    const sliceFrom = this.pendingSliceMorph;
+    this.pendingSliceMorph = void 0;
+    const morphFrom = this.pendingCustomMorph;
+    this.pendingCustomMorph = void 0;
     if (frame.anim.enabled) this.startCustomEntrance(frame, prepared, renderer, ctx);
-    else this.startValueTween(frame, prepared, renderer, ctx, valueFrom, compareFrom, sparklineFrom);
+    else if (sliceFrom && prepared.type === "pie") this.startSliceMorph(frame, prepared, renderer, ctx, sliceFrom);
+    else if (morphFrom !== void 0 && morphFrameOf(this.surface, prepared.type) !== void 0) {
+      this.startCustomMorph(frame, prepared, renderer, ctx, morphFrom);
+    } else this.startValueTween(frame, prepared, renderer, ctx, valueFrom, compareFrom, sparklineFrom);
     return { interactionModel };
   }
+  /**
+   * Custom-chart update morph: the renderer re-runs each frame with the marks
+   * that were on screen (`morphFrom`) and a morph progress, so bars, tiles,
+   * cells, nodes and links travel to the new data. The static draw above is
+   * the final frame; tween frames are transient, so reports stay on it.
+   */
+  startCustomMorph(frame, prepared, renderer, ctx, morphFrom) {
+    const tween = this.updateMotion(this.currentSpec);
+    if (!tween.enabled) return;
+    this.entrance = runCustomRendererProgress(this.surface, renderer, prepared.effectiveSpec, frame.tokens, frame.size, {
+      anim: tween,
+      onDone: () => this.finishEntrance(),
+      dataLength: prepared.filtered.length,
+      background: this.currentSpec.background,
+      context: ctx,
+      progressKey: "morphProgress",
+      extraContext: { morphFrom },
+      transient: true,
+      paintInitial: true,
+      chrome: this.pendingChrome
+    });
+  }
+  /**
+   * The marks a custom chart's update from `prev` to `next` should travel from
+   * (including a partially-played morph), or undefined when it can't morph:
+   * a type change, pie (which re-balances slices instead), sketch/debug, or
+   * motion disabled. Renderers opt in by stashing their marks.
+   */
+  customMorphSource(prev, next) {
+    if (prev.type !== next.type || next.type === "pie" || CARTESIAN_TYPES.has(next.type)) return void 0;
+    if (prev.debug || next.debug || resolveSketch(prev) || resolveSketch(next)) return void 0;
+    if ((prev.data?.length ?? 0) > CUSTOM_MORPH_ROW_LIMIT || (next.data?.length ?? 0) > CUSTOM_MORPH_ROW_LIMIT) return void 0;
+    if (!this.updateMotion(next).enabled) return void 0;
+    return morphFrameOf(this.surface, next.type);
+  }
+  /**
+   * Re-balance pie/donut slices from the ones on screen: the renderer re-runs
+   * each frame with a morph progress (the static draw above is the final frame).
+   */
+  startSliceMorph(frame, prepared, renderer, ctx, sliceFrom) {
+    const tween = this.updateMotion(this.currentSpec);
+    if (!tween.enabled) return;
+    this.entrance = runCustomRendererProgress(this.surface, renderer, prepared.effectiveSpec, frame.tokens, frame.size, {
+      anim: tween,
+      onDone: () => this.finishEntrance(),
+      dataLength: prepared.filtered.length,
+      background: this.currentSpec.background,
+      context: ctx,
+      progressKey: "morphProgress",
+      extraContext: { sliceFrom },
+      transient: true,
+      paintInitial: true
+    });
+  }
+  /** The pie/donut slices an update from `prev` to `next` should re-balance from. */
+  sliceMorphSource(prev, next) {
+    if (prev.type !== "pie" || next.type !== "pie" || prev.debug || next.debug) return void 0;
+    if (resolveSketch(prev) || resolveSketch(next) || !this.updateMotion(next).enabled) return void 0;
+    const slices = pieStateOf(this.surface);
+    return slices?.length ? slices : void 0;
+  }
   dispatchPlaceholder(frame, type) {
     drawPlaceholder(this.surface, frame.tokens, `\u201C${type}\u201D renderer not yet registered`);
     if (frame.anim.enabled) this.entrance = runFadeEntrance(this.surface, frame.anim, () => this.finishEntrance());
@@ -330,26 +480,24 @@ class ChartRuntime {
     };
   }
   startCustomEntrance(frame, prepared, renderer, ctx) {
-    if (!COUNT_UP_TYPES.has(prepared.type) && !SWEEP_TYPES.has(prepared.type)) {
+    const key = COUNT_UP_TYPES.has(prepared.type) ? "valueProgress" : SWEEP_TYPES.has(prepared.type) ? "sweepProgress" : chartDefinition(prepared.type).entrance === "grow" ? "entranceProgress" : null;
+    if (!key) {
       this.entrance = runFadeEntrance(this.surface, frame.anim, () => this.finishEntrance());
       return;
     }
-    const key = COUNT_UP_TYPES.has(prepared.type) ? "valueProgress" : "sweepProgress";
     this.entrance = runCustomRendererProgress(this.surface, renderer, prepared.effectiveSpec, frame.tokens, frame.size, {
       anim: frame.anim,
       onDone: () => this.finishEntrance(),
       dataLength: prepared.filtered.length,
       background: this.currentSpec.background,
       context: ctx,
-      progressKey: key
+      progressKey: key,
+      entranceChrome: true
     });
   }
   startValueTween(frame, prepared, renderer, ctx, valueFrom, compareFrom, sparklineFrom) {
     if (valueFrom === void 0 && sparklineFrom === void 0 || !COUNT_UP_TYPES.has(prepared.type) && !SWEEP_TYPES.has(prepared.type)) return;
-    const tween = resolveUpdate(this.currentSpec.animation, {
-      reducedMotion: prefersReducedMotion(),
-      disabled: this.options.synchronous === true || globalThis.__GRAPHEIN_DISABLE_ANIM === true
-    });
+    const tween = this.updateMotion(this.currentSpec);
     if (!tween.enabled) return;
     const key = COUNT_UP_TYPES.has(prepared.type) ? "valueProgress" : "sweepProgress";
     this.entrance = runCustomRendererProgress(this.surface, renderer, prepared.effectiveSpec, frame.tokens, frame.size, {
@@ -403,6 +551,7 @@ class ChartRuntime {
   finishEntrance() {
     if (this.refreshReport) this.lastReport = this.refreshReport();
     signalReady(this.surface);
+    this.interaction?.refresh();
     if (this.pendingFontRefresh && !this.destroyed) {
       this.pendingFontRefresh = false;
       this.draw(false);
@@ -467,6 +616,9 @@ class ChartRuntime {
     this.invalidateTransforms();
     this.seedParams(next);
     const prevType = this.currentSpec.type;
+    const morphFrom = this.morphSource(this.currentSpec, next);
+    const sliceFrom = this.sliceMorphSource(this.currentSpec, next);
+    const customFrom = this.customMorphSource(this.currentSpec, next);
     const before = this.updateSnapshot(prevType, next);
     const prevW = this.surface.width;
     const prevH = this.surface.height;
@@ -474,29 +626,32 @@ class ChartRuntime {
     this.currentSpec = next;
     const wantValue = prevType === next.type && (COUNT_UP_TYPES.has(next.type) || SWEEP_TYPES.has(next.type)) && prev.value != null;
     const wantSparkline = prevType === next.type && next.type === "kpi" && !!prev.sparkline?.length;
-    this.draw(
-      false,
-      wantValue ? prev.value ?? void 0 : void 0,
-      wantValue ? prev.compare ?? void 0 : void 0,
-      wantValue || wantSparkline ? prev.sparkline ?? void 0 : void 0
-    );
-    this.startUpdateCrossfade(before, prevW, prevH, next);
+    this.pendingMorph = morphFrom;
+    this.pendingSliceMorph = sliceFrom;
+    this.pendingCustomMorph = customFrom;
+    this.pendingChrome = captureChrome(this.surface);
+    try {
+      this.draw(
+        false,
+        wantValue ? prev.value ?? void 0 : void 0,
+        wantValue ? prev.compare ?? void 0 : void 0,
+        wantValue || wantSparkline ? prev.sparkline ?? void 0 : void 0
+      );
+    } finally {
+      this.pendingMorph = void 0;
+      this.pendingSliceMorph = void 0;
+      this.pendingCustomMorph = void 0;
+      this.pendingChrome = void 0;
+    }
+    if (!this.morphState && !this.entrance) this.startUpdateCrossfade(before, prevW, prevH, next);
   }
   updateSnapshot(prevType, next) {
-    const anim = resolveUpdate(next.animation, {
-      reducedMotion: prefersReducedMotion(),
-      disabled: this.options.synchronous === true || globalThis.__GRAPHEIN_DISABLE_ANIM === true
-    });
-    const wantFade = anim.enabled && CANVAS_MARK_TYPES.has(prevType) && CANVAS_MARK_TYPES.has(next.type);
+    const wantFade = this.updateMotion(next).enabled && CANVAS_MARK_TYPES.has(prevType) && CANVAS_MARK_TYPES.has(next.type);
     return wantFade ? snapshotLayer(this.surface.marks) : void 0;
   }
   startUpdateCrossfade(before, prevW, prevH, next) {
     if (!before || this.surface.width !== prevW || this.surface.height !== prevH || this.surface.marks.canvas.width !== before.width || this.surface.marks.canvas.height !== before.height) return;
-    const anim = resolveUpdate(next.animation, {
-      reducedMotion: prefersReducedMotion(),
-      disabled: this.options.synchronous === true || globalThis.__GRAPHEIN_DISABLE_ANIM === true
-    });
-    this.updateTransition = runUpdateCrossfade(this.surface, before, anim);
+    this.updateTransition = runUpdateCrossfade(this.surface, before, this.updateMotion(next));
   }
   resize() {
     if (!this.destroyed) this.draw(false);
@@ -556,7 +711,18 @@ class ChartRuntime {
     if (!this.pendingSelectionRedraw || this.destroyed) return;
     this.pendingSelectionRedraw = false;
     this.selectionRedrawQueued = false;
-    this.draw(false);
+    this.pendingMorph = this.morphSource(this.currentSpec, this.currentSpec);
+    this.pendingSliceMorph = this.sliceMorphSource(this.currentSpec, this.currentSpec);
+    this.pendingCustomMorph = this.customMorphSource(this.currentSpec, this.currentSpec);
+    this.pendingChrome = captureChrome(this.surface);
+    try {
+      this.draw(false);
+    } finally {
+      this.pendingMorph = void 0;
+      this.pendingSliceMorph = void 0;
+      this.pendingCustomMorph = void 0;
+      this.pendingChrome = void 0;
+    }
   }
   applyExternalEdit(config) {
     if (this.destroyed) return;