graphein 0.20.0 → 0.21.0

package/dist/animation/animate.d.ts

@@ -1,7 +1,12 @@
 export interface AnimateOptions {
     duration: number;
     easing?: (t: number) => number;
-    onUpdate: (t: number) => void;
+    /**
+     * Called each frame with the eased progress and the raw (linear) clock. Eased
+     * progress may pass 1 mid-flight with overshooting easings; `raw` reaches 1
+     * only on the final frame.
+     */
+    onUpdate: (t: number, raw: number) => void;
     onComplete?: () => void;
     now?: () => number;
     raf?: (cb: (t: number) => void) => number;

package/dist/animation/animate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["../../src/animation/animate.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,KAAK,MAAM,CAAC;IAC1C,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,IAAI,IAAI,CAAC;CAChB;AA2BD,wBAAgB,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,eAAe,CAmD7D"}
+{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["../../src/animation/animate.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,KAAK,MAAM,CAAC;IAC1C,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,IAAI,IAAI,CAAC;CAChB;AA2BD,wBAAgB,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,eAAe,CAmD7D"}

package/dist/animation/animate.js

@@ -21,7 +21,7 @@ function clamp01(value) {
 function animate(opts) {
   const easing = opts.easing ?? linear;
   if (opts.duration <= 0) {
-    opts.onUpdate(easing(1));
+    opts.onUpdate(easing(1), 1);
     opts.onComplete?.();
     return {
       cancel() {
@@ -41,7 +41,7 @@ function animate(opts) {
       return;
     }
     const rawT = clamp01((now() - start) / opts.duration);
-    opts.onUpdate(easing(rawT));
+    opts.onUpdate(easing(rawT), rawT);
     if (rawT >= 1) {
       completed = true;
       opts.onComplete?.();

package/dist/animation/animate.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/animation/animate.ts"],
-  "sourcesContent": ["import { linear } from './easing';\n\nexport interface AnimateOptions {\n  duration: number;\n  easing?: (t: number) => number;\n  onUpdate: (t: number) => void;\n  onComplete?: () => void;\n  now?: () => number;\n  raf?: (cb: (t: number) => void) => number;\n  cancelRaf?: (handle: number) => void;\n}\n\nexport interface AnimationHandle {\n  cancel(): void;\n}\n\nfunction defaultNow(): number {\n  return globalThis.performance?.now() ?? Date.now();\n}\n\nfunction defaultRaf(cb: (t: number) => void): number {\n  if (globalThis.requestAnimationFrame !== undefined) {\n    return globalThis.requestAnimationFrame(cb);\n  }\n\n  return globalThis.setTimeout(() => cb(defaultNow()), 16) as unknown as number;\n}\n\nfunction defaultCancelRaf(handle: number): void {\n  if (globalThis.cancelAnimationFrame !== undefined) {\n    globalThis.cancelAnimationFrame(handle);\n    return;\n  }\n\n  globalThis.clearTimeout(handle);\n}\n\nfunction clamp01(value: number): number {\n  return Math.min(1, Math.max(0, value));\n}\n\nexport function animate(opts: AnimateOptions): AnimationHandle {\n  const easing = opts.easing ?? linear;\n\n  if (opts.duration <= 0) {\n    opts.onUpdate(easing(1));\n    opts.onComplete?.();\n    return {\n      cancel(): void {\n        return;\n      },\n    };\n  }\n\n  const now = opts.now ?? defaultNow;\n  const raf = opts.raf ?? defaultRaf;\n  const cancelRaf = opts.cancelRaf ?? defaultCancelRaf;\n  const start = now();\n  let cancelled = false;\n  let completed = false;\n  let frame: number | undefined;\n\n  const step = (): void => {\n    if (cancelled || completed) {\n      return;\n    }\n\n    const rawT = clamp01((now() - start) / opts.duration);\n    opts.onUpdate(easing(rawT));\n\n    if (rawT >= 1) {\n      completed = true;\n      opts.onComplete?.();\n      return;\n    }\n\n    frame = raf(step);\n  };\n\n  frame = raf(step);\n\n  return {\n    cancel(): void {\n      if (cancelled || completed) {\n        return;\n      }\n      cancelled = true;\n      if (frame !== undefined) {\n        cancelRaf(frame);\n      }\n    },\n  };\n}\n"],
-  "mappings": "AAAA,SAAS,cAAc;AAgBvB,SAAS,aAAqB;AAC5B,SAAO,WAAW,aAAa,IAAI,KAAK,KAAK,IAAI;AACnD;AAEA,SAAS,WAAW,IAAiC;AACnD,MAAI,WAAW,0BAA0B,QAAW;AAClD,WAAO,WAAW,sBAAsB,EAAE;AAAA,EAC5C;AAEA,SAAO,WAAW,WAAW,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;AACzD;AAEA,SAAS,iBAAiB,QAAsB;AAC9C,MAAI,WAAW,yBAAyB,QAAW;AACjD,eAAW,qBAAqB,MAAM;AACtC;AAAA,EACF;AAEA,aAAW,aAAa,MAAM;AAChC;AAEA,SAAS,QAAQ,OAAuB;AACtC,SAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,CAAC;AACvC;AAEO,SAAS,QAAQ,MAAuC;AAC7D,QAAM,SAAS,KAAK,UAAU;AAE9B,MAAI,KAAK,YAAY,GAAG;AACtB,SAAK,SAAS,OAAO,CAAC,CAAC;AACvB,SAAK,aAAa;AAClB,WAAO;AAAA,MACL,SAAe;AACb;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,MAAM,KAAK,OAAO;AACxB,QAAM,MAAM,KAAK,OAAO;AACxB,QAAM,YAAY,KAAK,aAAa;AACpC,QAAM,QAAQ,IAAI;AAClB,MAAI,YAAY;AAChB,MAAI,YAAY;AAChB,MAAI;AAEJ,QAAM,OAAO,MAAY;AACvB,QAAI,aAAa,WAAW;AAC1B;AAAA,IACF;AAEA,UAAM,OAAO,SAAS,IAAI,IAAI,SAAS,KAAK,QAAQ;AACpD,SAAK,SAAS,OAAO,IAAI,CAAC;AAE1B,QAAI,QAAQ,GAAG;AACb,kBAAY;AACZ,WAAK,aAAa;AAClB;AAAA,IACF;AAEA,YAAQ,IAAI,IAAI;AAAA,EAClB;AAEA,UAAQ,IAAI,IAAI;AAEhB,SAAO;AAAA,IACL,SAAe;AACb,UAAI,aAAa,WAAW;AAC1B;AAAA,MACF;AACA,kBAAY;AACZ,UAAI,UAAU,QAAW;AACvB,kBAAU,KAAK;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { linear } from './easing';\n\nexport interface AnimateOptions {\n  duration: number;\n  easing?: (t: number) => number;\n  /**\n   * Called each frame with the eased progress and the raw (linear) clock. Eased\n   * progress may pass 1 mid-flight with overshooting easings; `raw` reaches 1\n   * only on the final frame.\n   */\n  onUpdate: (t: number, raw: number) => void;\n  onComplete?: () => void;\n  now?: () => number;\n  raf?: (cb: (t: number) => void) => number;\n  cancelRaf?: (handle: number) => void;\n}\n\nexport interface AnimationHandle {\n  cancel(): void;\n}\n\nfunction defaultNow(): number {\n  return globalThis.performance?.now() ?? Date.now();\n}\n\nfunction defaultRaf(cb: (t: number) => void): number {\n  if (globalThis.requestAnimationFrame !== undefined) {\n    return globalThis.requestAnimationFrame(cb);\n  }\n\n  return globalThis.setTimeout(() => cb(defaultNow()), 16) as unknown as number;\n}\n\nfunction defaultCancelRaf(handle: number): void {\n  if (globalThis.cancelAnimationFrame !== undefined) {\n    globalThis.cancelAnimationFrame(handle);\n    return;\n  }\n\n  globalThis.clearTimeout(handle);\n}\n\nfunction clamp01(value: number): number {\n  return Math.min(1, Math.max(0, value));\n}\n\nexport function animate(opts: AnimateOptions): AnimationHandle {\n  const easing = opts.easing ?? linear;\n\n  if (opts.duration <= 0) {\n    opts.onUpdate(easing(1), 1);\n    opts.onComplete?.();\n    return {\n      cancel(): void {\n        return;\n      },\n    };\n  }\n\n  const now = opts.now ?? defaultNow;\n  const raf = opts.raf ?? defaultRaf;\n  const cancelRaf = opts.cancelRaf ?? defaultCancelRaf;\n  const start = now();\n  let cancelled = false;\n  let completed = false;\n  let frame: number | undefined;\n\n  const step = (): void => {\n    if (cancelled || completed) {\n      return;\n    }\n\n    const rawT = clamp01((now() - start) / opts.duration);\n    opts.onUpdate(easing(rawT), rawT);\n\n    if (rawT >= 1) {\n      completed = true;\n      opts.onComplete?.();\n      return;\n    }\n\n    frame = raf(step);\n  };\n\n  frame = raf(step);\n\n  return {\n    cancel(): void {\n      if (cancelled || completed) {\n        return;\n      }\n      cancelled = true;\n      if (frame !== undefined) {\n        cancelRaf(frame);\n      }\n    },\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,cAAc;AAqBvB,SAAS,aAAqB;AAC5B,SAAO,WAAW,aAAa,IAAI,KAAK,KAAK,IAAI;AACnD;AAEA,SAAS,WAAW,IAAiC;AACnD,MAAI,WAAW,0BAA0B,QAAW;AAClD,WAAO,WAAW,sBAAsB,EAAE;AAAA,EAC5C;AAEA,SAAO,WAAW,WAAW,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;AACzD;AAEA,SAAS,iBAAiB,QAAsB;AAC9C,MAAI,WAAW,yBAAyB,QAAW;AACjD,eAAW,qBAAqB,MAAM;AACtC;AAAA,EACF;AAEA,aAAW,aAAa,MAAM;AAChC;AAEA,SAAS,QAAQ,OAAuB;AACtC,SAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,CAAC;AACvC;AAEO,SAAS,QAAQ,MAAuC;AAC7D,QAAM,SAAS,KAAK,UAAU;AAE9B,MAAI,KAAK,YAAY,GAAG;AACtB,SAAK,SAAS,OAAO,CAAC,GAAG,CAAC;AAC1B,SAAK,aAAa;AAClB,WAAO;AAAA,MACL,SAAe;AACb;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,MAAM,KAAK,OAAO;AACxB,QAAM,MAAM,KAAK,OAAO;AACxB,QAAM,YAAY,KAAK,aAAa;AACpC,QAAM,QAAQ,IAAI;AAClB,MAAI,YAAY;AAChB,MAAI,YAAY;AAChB,MAAI;AAEJ,QAAM,OAAO,MAAY;AACvB,QAAI,aAAa,WAAW;AAC1B;AAAA,IACF;AAEA,UAAM,OAAO,SAAS,IAAI,IAAI,SAAS,KAAK,QAAQ;AACpD,SAAK,SAAS,OAAO,IAAI,GAAG,IAAI;AAEhC,QAAI,QAAQ,GAAG;AACb,kBAAY;AACZ,WAAK,aAAa;AAClB;AAAA,IACF;AAEA,YAAQ,IAAI,IAAI;AAAA,EAClB;AAEA,UAAQ,IAAI,IAAI;AAEhB,SAAO;AAAA,IACL,SAAe;AACb,UAAI,aAAa,WAAW;AAC1B;AAAA,MACF;AACA,kBAAY;AACZ,UAAI,UAAU,QAAW;AACvB,kBAAU,KAAK;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/animation/env.d.ts

@@ -1,2 +1,7 @@
 export declare function prefersReducedMotion(): boolean;
+/**
+ * Interaction motion (hover glides, tooltip transitions) follows the OS
+ * reduced-motion setting and the global screenshot/automation kill-switch.
+ */
+export declare function interactionMotionDisabled(): boolean;
 //# sourceMappingURL=env.d.ts.map

package/dist/animation/env.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"env.d.ts","sourceRoot":"","sources":["../../src/animation/env.ts"],"names":[],"mappings":"AAAA,wBAAgB,oBAAoB,IAAI,OAAO,CAE9C"}
+{"version":3,"file":"env.d.ts","sourceRoot":"","sources":["../../src/animation/env.ts"],"names":[],"mappings":"AAAA,wBAAgB,oBAAoB,IAAI,OAAO,CAE9C;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,IAAI,OAAO,CAEnD"}

package/dist/animation/env.js

@@ -1,7 +1,11 @@
 function prefersReducedMotion() {
   return globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
 }
+function interactionMotionDisabled() {
+  return prefersReducedMotion() || globalThis.__GRAPHEIN_DISABLE_ANIM === true;
+}
 export {
+  interactionMotionDisabled,
   prefersReducedMotion
 };
 //# sourceMappingURL=env.js.map

package/dist/animation/env.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/animation/env.ts"],
-  "sourcesContent": ["export function prefersReducedMotion(): boolean {\n  return globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\n}\n"],
-  "mappings": "AAAO,SAAS,uBAAgC;AAC9C,SAAO,WAAW,aAAa,kCAAkC,EAAE,WAAW;AAChF;",
+  "sourcesContent": ["export function prefersReducedMotion(): boolean {\n  return globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\n}\n\n/**\n * Interaction motion (hover glides, tooltip transitions) follows the OS\n * reduced-motion setting and the global screenshot/automation kill-switch.\n */\nexport function interactionMotionDisabled(): boolean {\n  return prefersReducedMotion() || globalThis.__GRAPHEIN_DISABLE_ANIM === true;\n}\n"],
+  "mappings": "AAAO,SAAS,uBAAgC;AAC9C,SAAO,WAAW,aAAa,kCAAkC,EAAE,WAAW;AAChF;AAMO,SAAS,4BAAqC;AACnD,SAAO,qBAAqB,KAAK,WAAW,4BAA4B;AAC1E;",
   "names": []
 }

package/dist/animation/index.d.ts

@@ -3,5 +3,6 @@ export * from './easing.js';
 export * from './entrance.js';
 export * from './env.js';
 export * from './interpolate.js';
+export * from './stagger.js';
 export * from './transition.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/animation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/animation/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/animation/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}

package/dist/animation/index.js

@@ -3,5 +3,6 @@ export * from "./easing.js";
 export * from "./entrance.js";
 export * from "./env.js";
 export * from "./interpolate.js";
+export * from "./stagger.js";
 export * from "./transition.js";
 //# sourceMappingURL=index.js.map

package/dist/animation/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/animation/index.ts"],
-  "sourcesContent": ["export * from './animate';\nexport * from './easing';\nexport * from './entrance';\nexport * from './env';\nexport * from './interpolate';\nexport * from './transition';\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export * from './animate';\nexport * from './easing';\nexport * from './entrance';\nexport * from './env';\nexport * from './interpolate';\nexport * from './stagger';\nexport * from './transition';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/dist/animation/stagger.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Staggered entrance timing.
+ *
+ * A staggered entrance drives every item from one raw (linear) clock but starts
+ * each item a little later than the previous one, so marks arrive as a wave
+ * rather than all at once. Item `index` of `count` begins at
+ * `stagger * index / (count - 1)` of the clock and runs for the remaining
+ * `1 - stagger`, eased individually. The clock reaching 1 always yields exactly
+ * 1 for every item, so the final frame is the static draw.
+ */
+import type { EasingFunction } from './easing.js';
+export declare function staggerProgress(raw: number, index: number, count: number, stagger: number, ease?: EasingFunction): number;
+//# sourceMappingURL=stagger.d.ts.map

package/dist/animation/stagger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stagger.d.ts","sourceRoot":"","sources":["../../src/animation/stagger.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAI/C,wBAAgB,eAAe,CAC7B,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,MAAM,EACf,IAAI,CAAC,EAAE,cAAc,GACpB,MAAM,CAOR"}

package/dist/animation/stagger.js

@@ -0,0 +1,13 @@
+const MAX_STAGGER = 0.9;
+function staggerProgress(raw, index, count, stagger, ease) {
+  if (raw >= 1) return 1;
+  if (raw <= 0) return 0;
+  const spread = Math.min(MAX_STAGGER, Math.max(0, stagger));
+  const offset = count > 1 ? spread * Math.min(index, count - 1) / (count - 1) : 0;
+  const local = Math.min(1, Math.max(0, (raw - offset) / (1 - spread)));
+  return ease ? ease(local) : local;
+}
+export {
+  staggerProgress
+};
+//# sourceMappingURL=stagger.js.map

package/dist/animation/stagger.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/animation/stagger.ts"],
+  "sourcesContent": ["/**\n * Staggered entrance timing.\n *\n * A staggered entrance drives every item from one raw (linear) clock but starts\n * each item a little later than the previous one, so marks arrive as a wave\n * rather than all at once. Item `index` of `count` begins at\n * `stagger * index / (count - 1)` of the clock and runs for the remaining\n * `1 - stagger`, eased individually. The clock reaching 1 always yields exactly\n * 1 for every item, so the final frame is the static draw.\n */\n\nimport type { EasingFunction } from './easing';\n\nconst MAX_STAGGER = 0.9;\n\nexport function staggerProgress(\n  raw: number,\n  index: number,\n  count: number,\n  stagger: number,\n  ease?: EasingFunction,\n): number {\n  if (raw >= 1) return 1;\n  if (raw <= 0) return 0;\n  const spread = Math.min(MAX_STAGGER, Math.max(0, stagger));\n  const offset = count > 1 ? (spread * Math.min(index, count - 1)) / (count - 1) : 0;\n  const local = Math.min(1, Math.max(0, (raw - offset) / (1 - spread)));\n  return ease ? ease(local) : local;\n}\n"],
+  "mappings": "AAaA,MAAM,cAAc;AAEb,SAAS,gBACd,KACA,OACA,OACA,SACA,MACQ;AACR,MAAI,OAAO,EAAG,QAAO;AACrB,MAAI,OAAO,EAAG,QAAO;AACrB,QAAM,SAAS,KAAK,IAAI,aAAa,KAAK,IAAI,GAAG,OAAO,CAAC;AACzD,QAAM,SAAS,QAAQ,IAAK,SAAS,KAAK,IAAI,OAAO,QAAQ,CAAC,KAAM,QAAQ,KAAK;AACjF,QAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,MAAM,WAAW,IAAI,OAAO,CAAC;AACpE,SAAO,OAAO,KAAK,KAAK,IAAI;AAC9B;",
+  "names": []
+}

package/dist/axes/draw.d.ts

@@ -11,6 +11,10 @@ import type { CartesianModel } from '../runtime/cartesian.js';
 export { drawOverlay } from './overlay.js';
 export { drawLegend } from './legend.js';
 export { drawTitle } from './title.js';
-/** Draw gridlines + axis baselines + tick marks on the marks canvas (behind marks). */
+/**
+ * Draw gridlines + axis baselines + tick marks on the marks canvas (behind marks).
+ * While a morph is drawing (see axes/morph.ts) the lines glide from the outgoing
+ * frame's positions instead of jumping to the new scale.
+ */
 export declare function drawAxesUnderlay(surface: Surface, model: CartesianModel): void;
 //# sourceMappingURL=draw.d.ts.map

package/dist/axes/draw.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"draw.d.ts","sourceRoot":"","sources":["../../src/axes/draw.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAGjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAI3D,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AA8BpC,uFAAuF;AACvF,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,GAAG,IAAI,CAwF9E"}
+{"version":3,"file":"draw.d.ts","sourceRoot":"","sources":["../../src/axes/draw.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAGjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAM3D,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AA8BpC;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,GAAG,IAAI,CAiG9E"}

package/dist/axes/draw.js

@@ -1,7 +1,9 @@
 import { crisp } from "../util/math.js";
 import { TICK_SIZE } from "../layout/index.js";
 import { RoughPen } from "../rough/index.js";
+import { chromeMorph, stashChrome } from "../render/chromeMotion.js";
 import { resolveXLabels } from "./tickLabels.js";
+import { AXIS_UNDERLAY, blendUnderlay, paintUnderlay, trackScales, underlayFrameOf } from "./morph.js";
 import { drawOverlay } from "./overlay.js";
 import { drawLegend } from "./legend.js";
 import { drawTitle } from "./title.js";
@@ -28,6 +30,17 @@ function axisSegment(pen, model, sx0, sy0, sx1, sy1, stroke) {
   );
 }
 function drawAxesUnderlay(surface, model) {
+  const scales = trackScales(surface, model);
+  const xPlaced = model.orientation === "horizontal" ? [] : resolveXLabels(model);
+  const frame = underlayFrameOf(model, xPlaced, { x: xGridEnabled(model), y: yGridEnabled(model) });
+  const morph = scales && !model.sketch ? chromeMorph(surface, AXIS_UNDERLAY) : null;
+  if (scales && morph) {
+    const blended = blendUnderlay(morph.from, frame, morph.t, scales.from, model);
+    paintUnderlay(surface.marks.ctx, blended, { grid: model.tokens.color.grid, axis: model.tokens.color.axis }, TICK_SIZE);
+    stashChrome(surface, AXIS_UNDERLAY, blended);
+    return;
+  }
+  stashChrome(surface, AXIS_UNDERLAY, frame);
   if (model.orientation === "horizontal") {
     drawHorizontalAxesUnderlay(surface, model);
     return;
@@ -40,7 +53,6 @@ function drawAxesUnderlay(surface, model) {
   const y1 = plot.y + plot.height;
   ctx.save();
   ctx.lineWidth = 1;
-  const xPlaced = resolveXLabels(model);
   const pen = model.sketch ? new RoughPen(ctx, model.sketch) : null;
   const seg = (sx0, sy0, sx1, sy1, stroke) => axisSegment(pen, model, sx0, sy0, sx1, sy1, stroke);
   if (yGridEnabled(model)) {

package/dist/axes/draw.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/axes/draw.ts"],
-  "sourcesContent": ["/**\n * Axis, gridline, legend, and title rendering for cartesian charts.\n *\n * Marks (gridlines, tick marks, axis baselines) are drawn on the canvas; text\n * (tick labels, axis titles, chart title, legend) lives in the HTML overlay for\n * crisp, accessible, selectable typography. Geometry comes from the already\n * computed `CartesianModel` / `Frame`, so this module is pure presentation.\n */\n\nimport type { Surface } from '../render/surface';\nimport { crisp } from '../util/math';\nimport { TICK_SIZE } from '../layout';\nimport type { CartesianModel } from '../runtime/cartesian';\nimport { RoughPen } from '../rough';\nimport { resolveXLabels } from './tickLabels';\n\nexport { drawOverlay } from './overlay';\nexport { drawLegend } from './legend';\nexport { drawTitle } from './title';\n\n// Gridlines, tick marks and baselines stay in this facade because they are the\n// canvas underlay paired with the overlay text exported above.\n\nfunction xGridEnabled(model: CartesianModel): boolean {\n  const cfg = model.spec.axes?.x;\n  if (cfg?.grid !== undefined) return cfg.grid;\n  return model.x.kind === 'linear' || model.x.kind === 'time' || model.spec.type === 'scatter';\n}\n\nfunction yGridEnabled(model: CartesianModel): boolean {\n  return model.spec.axes?.y?.grid !== false;\n}\n\nfunction axisSegment(pen: RoughPen, model: CartesianModel, sx0: number, sy0: number, sx1: number, sy1: number, stroke: string): void {\n  pen.polyline(\n    [\n      { x: sx0, y: sy0 },\n      { x: sx1, y: sy1 },\n    ],\n    {\n      stroke,\n      strokeWidth: 1,\n      roughness: model.sketch!.roughness * 0.5,\n      bowing: model.sketch!.bowing * 0.55,\n    },\n  );\n}\n\n/** Draw gridlines + axis baselines + tick marks on the marks canvas (behind marks). */\nexport function drawAxesUnderlay(surface: Surface, model: CartesianModel): void {\n  if (model.orientation === 'horizontal') {\n    drawHorizontalAxesUnderlay(surface, model);\n    return;\n  }\n  const ctx = surface.marks.ctx;\n  const { plot, tokens } = model;\n  const x0 = plot.x;\n  const x1 = plot.x + plot.width;\n  const y0 = plot.y;\n  const y1 = plot.y + plot.height;\n\n  ctx.save();\n  ctx.lineWidth = 1;\n\n  // The labelled x-tick subset drives gridlines, tick marks and labels alike so\n  // a dense axis never shows more gridlines than it has room to label.\n  const xPlaced = resolveXLabels(model);\n\n  // When sketching, gridlines/ticks are drawn as gently wavy hand-drawn segments\n  // (reduced roughness keeps them subtle behind the bolder data marks).\n  const pen = model.sketch ? new RoughPen(ctx, model.sketch) : null;\n  const seg = (sx0: number, sy0: number, sx1: number, sy1: number, stroke: string): void =>\n    axisSegment(pen!, model, sx0, sy0, sx1, sy1, stroke);\n\n  // Horizontal y gridlines.\n  if (yGridEnabled(model)) {\n    if (pen) {\n      for (const t of model.yTicks) seg(x0, t.pos, x1, t.pos, tokens.color.grid);\n    } else {\n      ctx.strokeStyle = tokens.color.grid;\n      ctx.beginPath();\n      for (const t of model.yTicks) {\n        const y = crisp(t.pos);\n        ctx.moveTo(x0, y);\n        ctx.lineTo(x1, y);\n      }\n      ctx.stroke();\n    }\n  }\n\n  // Vertical x gridlines (aligned to the labelled ticks for a clean read).\n  if (xGridEnabled(model)) {\n    if (pen) {\n      for (const p of xPlaced) seg(p.pos, y0, p.pos, y1, tokens.color.grid);\n    } else {\n      ctx.strokeStyle = tokens.color.grid;\n      ctx.beginPath();\n      for (const p of xPlaced) {\n        const x = crisp(p.pos);\n        ctx.moveTo(x, y0);\n        ctx.lineTo(x, y1);\n      }\n      ctx.stroke();\n    }\n  }\n\n  // Axis baselines. The y axis relies on horizontal gridlines + labels (no\n  // vertical domain line) for a cleaner, more modern read; only the x baseline\n  // is drawn to anchor the marks.\n  if (model.spec.axes?.x?.show !== false) {\n    if (pen) {\n      seg(x0, y1, x1, y1, tokens.color.axis);\n    } else {\n      ctx.strokeStyle = tokens.color.axis;\n      ctx.beginPath();\n      ctx.moveTo(x0, crisp(y1));\n      ctx.lineTo(x1, crisp(y1));\n      ctx.stroke();\n    }\n  }\n\n  // X tick marks (subtle), drawn only where labels sit.\n  if (model.spec.axes?.x?.show !== false) {\n    if (pen) {\n      for (const p of xPlaced) seg(p.pos, y1, p.pos, y1 + TICK_SIZE, tokens.color.axis);\n    } else {\n      ctx.strokeStyle = tokens.color.axis;\n      ctx.beginPath();\n      for (const p of xPlaced) {\n        const x = crisp(p.pos);\n        ctx.moveTo(x, y1);\n        ctx.lineTo(x, y1 + TICK_SIZE);\n      }\n      ctx.stroke();\n    }\n  }\n  ctx.restore();\n}\n\n/**\n * Horizontal-bar axis underlay: the value axis runs along the bottom (vertical\n * gridlines at each value tick) and the category axis is a left spine with\n * outward tick marks that anchors the bars. Mirror of the vertical layout.\n */\nfunction drawHorizontalAxesUnderlay(surface: Surface, model: CartesianModel): void {\n  const ctx = surface.marks.ctx;\n  const { plot, tokens } = model;\n  const x0 = plot.x;\n  const y0 = plot.y;\n  const y1 = plot.y + plot.height;\n\n  ctx.save();\n  ctx.lineWidth = 1;\n\n  const pen = model.sketch ? new RoughPen(ctx, model.sketch) : null;\n  const seg = (sx0: number, sy0: number, sx1: number, sy1: number, stroke: string): void =>\n    axisSegment(pen!, model, sx0, sy0, sx1, sy1, stroke);\n\n  // Vertical value gridlines (the value axis runs horizontally).\n  if (yGridEnabled(model)) {\n    if (pen) {\n      for (const t of model.yTicks) seg(t.pos, y0, t.pos, y1, tokens.color.grid);\n    } else {\n      ctx.strokeStyle = tokens.color.grid;\n      ctx.beginPath();\n      for (const t of model.yTicks) {\n        const x = crisp(t.pos);\n        ctx.moveTo(x, y0);\n        ctx.lineTo(x, y1);\n      }\n      ctx.stroke();\n    }\n  }\n\n  // Left category spine + outward tick marks anchor the bars.\n  if (model.spec.axes?.x?.show !== false) {\n    if (pen) {\n      seg(x0, y0, x0, y1, tokens.color.axis);\n      for (const t of model.xTicks) seg(x0 - TICK_SIZE, t.pos, x0, t.pos, tokens.color.axis);\n    } else {\n      ctx.strokeStyle = tokens.color.axis;\n      ctx.beginPath();\n      ctx.moveTo(crisp(x0), y0);\n      ctx.lineTo(crisp(x0), y1);\n      ctx.stroke();\n      ctx.beginPath();\n      for (const t of model.xTicks) {\n        const y = crisp(t.pos);\n        ctx.moveTo(x0 - TICK_SIZE, y);\n        ctx.lineTo(x0, y);\n      }\n      ctx.stroke();\n    }\n  }\n\n  ctx.restore();\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * Axis, gridline, legend, and title rendering for cartesian charts.\n *\n * Marks (gridlines, tick marks, axis baselines) are drawn on the canvas; text\n * (tick labels, axis titles, chart title, legend) lives in the HTML overlay for\n * crisp, accessible, selectable typography. Geometry comes from the already\n * computed `CartesianModel` / `Frame`, so this module is pure presentation.\n */\n\nimport type { Surface } from '../render/surface';\nimport { crisp } from '../util/math';\nimport { TICK_SIZE } from '../layout';\nimport type { CartesianModel } from '../runtime/cartesian';\nimport { RoughPen } from '../rough';\nimport { chromeMorph, stashChrome } from '../render/chromeMotion';\nimport { resolveXLabels } from './tickLabels';\nimport { AXIS_UNDERLAY, blendUnderlay, paintUnderlay, trackScales, underlayFrameOf, type UnderlayFrame } from './morph';\n\nexport { drawOverlay } from './overlay';\nexport { drawLegend } from './legend';\nexport { drawTitle } from './title';\n\n// Gridlines, tick marks and baselines stay in this facade because they are the\n// canvas underlay paired with the overlay text exported above.\n\nfunction xGridEnabled(model: CartesianModel): boolean {\n  const cfg = model.spec.axes?.x;\n  if (cfg?.grid !== undefined) return cfg.grid;\n  return model.x.kind === 'linear' || model.x.kind === 'time' || model.spec.type === 'scatter';\n}\n\nfunction yGridEnabled(model: CartesianModel): boolean {\n  return model.spec.axes?.y?.grid !== false;\n}\n\nfunction axisSegment(pen: RoughPen, model: CartesianModel, sx0: number, sy0: number, sx1: number, sy1: number, stroke: string): void {\n  pen.polyline(\n    [\n      { x: sx0, y: sy0 },\n      { x: sx1, y: sy1 },\n    ],\n    {\n      stroke,\n      strokeWidth: 1,\n      roughness: model.sketch!.roughness * 0.5,\n      bowing: model.sketch!.bowing * 0.55,\n    },\n  );\n}\n\n/**\n * Draw gridlines + axis baselines + tick marks on the marks canvas (behind marks).\n * While a morph is drawing (see axes/morph.ts) the lines glide from the outgoing\n * frame's positions instead of jumping to the new scale.\n */\nexport function drawAxesUnderlay(surface: Surface, model: CartesianModel): void {\n  const scales = trackScales(surface, model);\n  // The labelled x-tick subset drives gridlines, tick marks and labels alike so\n  // a dense axis never shows more gridlines than it has room to label.\n  const xPlaced = model.orientation === 'horizontal' ? [] : resolveXLabels(model);\n  const frame = underlayFrameOf(model, xPlaced, { x: xGridEnabled(model), y: yGridEnabled(model) });\n  const morph = scales && !model.sketch ? chromeMorph<UnderlayFrame>(surface, AXIS_UNDERLAY) : null;\n  if (scales && morph) {\n    const blended = blendUnderlay(morph.from, frame, morph.t, scales.from, model);\n    paintUnderlay(surface.marks.ctx, blended, { grid: model.tokens.color.grid, axis: model.tokens.color.axis }, TICK_SIZE);\n    stashChrome(surface, AXIS_UNDERLAY, blended);\n    return;\n  }\n  stashChrome(surface, AXIS_UNDERLAY, frame);\n  if (model.orientation === 'horizontal') {\n    drawHorizontalAxesUnderlay(surface, model);\n    return;\n  }\n  const ctx = surface.marks.ctx;\n  const { plot, tokens } = model;\n  const x0 = plot.x;\n  const x1 = plot.x + plot.width;\n  const y0 = plot.y;\n  const y1 = plot.y + plot.height;\n\n  ctx.save();\n  ctx.lineWidth = 1;\n\n  // When sketching, gridlines/ticks are drawn as gently wavy hand-drawn segments\n  // (reduced roughness keeps them subtle behind the bolder data marks).\n  const pen = model.sketch ? new RoughPen(ctx, model.sketch) : null;\n  const seg = (sx0: number, sy0: number, sx1: number, sy1: number, stroke: string): void =>\n    axisSegment(pen!, model, sx0, sy0, sx1, sy1, stroke);\n\n  // Horizontal y gridlines.\n  if (yGridEnabled(model)) {\n    if (pen) {\n      for (const t of model.yTicks) seg(x0, t.pos, x1, t.pos, tokens.color.grid);\n    } else {\n      ctx.strokeStyle = tokens.color.grid;\n      ctx.beginPath();\n      for (const t of model.yTicks) {\n        const y = crisp(t.pos);\n        ctx.moveTo(x0, y);\n        ctx.lineTo(x1, y);\n      }\n      ctx.stroke();\n    }\n  }\n\n  // Vertical x gridlines (aligned to the labelled ticks for a clean read).\n  if (xGridEnabled(model)) {\n    if (pen) {\n      for (const p of xPlaced) seg(p.pos, y0, p.pos, y1, tokens.color.grid);\n    } else {\n      ctx.strokeStyle = tokens.color.grid;\n      ctx.beginPath();\n      for (const p of xPlaced) {\n        const x = crisp(p.pos);\n        ctx.moveTo(x, y0);\n        ctx.lineTo(x, y1);\n      }\n      ctx.stroke();\n    }\n  }\n\n  // Axis baselines. The y axis relies on horizontal gridlines + labels (no\n  // vertical domain line) for a cleaner, more modern read; only the x baseline\n  // is drawn to anchor the marks.\n  if (model.spec.axes?.x?.show !== false) {\n    if (pen) {\n      seg(x0, y1, x1, y1, tokens.color.axis);\n    } else {\n      ctx.strokeStyle = tokens.color.axis;\n      ctx.beginPath();\n      ctx.moveTo(x0, crisp(y1));\n      ctx.lineTo(x1, crisp(y1));\n      ctx.stroke();\n    }\n  }\n\n  // X tick marks (subtle), drawn only where labels sit.\n  if (model.spec.axes?.x?.show !== false) {\n    if (pen) {\n      for (const p of xPlaced) seg(p.pos, y1, p.pos, y1 + TICK_SIZE, tokens.color.axis);\n    } else {\n      ctx.strokeStyle = tokens.color.axis;\n      ctx.beginPath();\n      for (const p of xPlaced) {\n        const x = crisp(p.pos);\n        ctx.moveTo(x, y1);\n        ctx.lineTo(x, y1 + TICK_SIZE);\n      }\n      ctx.stroke();\n    }\n  }\n  ctx.restore();\n}\n\n/**\n * Horizontal-bar axis underlay: the value axis runs along the bottom (vertical\n * gridlines at each value tick) and the category axis is a left spine with\n * outward tick marks that anchors the bars. Mirror of the vertical layout.\n */\nfunction drawHorizontalAxesUnderlay(surface: Surface, model: CartesianModel): void {\n  const ctx = surface.marks.ctx;\n  const { plot, tokens } = model;\n  const x0 = plot.x;\n  const y0 = plot.y;\n  const y1 = plot.y + plot.height;\n\n  ctx.save();\n  ctx.lineWidth = 1;\n\n  const pen = model.sketch ? new RoughPen(ctx, model.sketch) : null;\n  const seg = (sx0: number, sy0: number, sx1: number, sy1: number, stroke: string): void =>\n    axisSegment(pen!, model, sx0, sy0, sx1, sy1, stroke);\n\n  // Vertical value gridlines (the value axis runs horizontally).\n  if (yGridEnabled(model)) {\n    if (pen) {\n      for (const t of model.yTicks) seg(t.pos, y0, t.pos, y1, tokens.color.grid);\n    } else {\n      ctx.strokeStyle = tokens.color.grid;\n      ctx.beginPath();\n      for (const t of model.yTicks) {\n        const x = crisp(t.pos);\n        ctx.moveTo(x, y0);\n        ctx.lineTo(x, y1);\n      }\n      ctx.stroke();\n    }\n  }\n\n  // Left category spine + outward tick marks anchor the bars.\n  if (model.spec.axes?.x?.show !== false) {\n    if (pen) {\n      seg(x0, y0, x0, y1, tokens.color.axis);\n      for (const t of model.xTicks) seg(x0 - TICK_SIZE, t.pos, x0, t.pos, tokens.color.axis);\n    } else {\n      ctx.strokeStyle = tokens.color.axis;\n      ctx.beginPath();\n      ctx.moveTo(crisp(x0), y0);\n      ctx.lineTo(crisp(x0), y1);\n      ctx.stroke();\n      ctx.beginPath();\n      for (const t of model.xTicks) {\n        const y = crisp(t.pos);\n        ctx.moveTo(x0 - TICK_SIZE, y);\n        ctx.lineTo(x0, y);\n      }\n      ctx.stroke();\n    }\n  }\n\n  ctx.restore();\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/axes/morph.d.ts

@@ -0,0 +1,111 @@
+/**
+ * Axis motion — gridlines, tick marks and tick labels glide with the scale.
+ *
+ * Each axis draw stashes what it drew (see render/chromeMotion). When a morph
+ * redraws a chart on a tween view, the axis modules blend the outgoing frame
+ * with the incoming one: a tick present in both glides between its positions,
+ * a new tick slides in from where its value sat on the old scale while fading
+ * in, and a tick that is gone slides toward where its value lands on the new
+ * scale while fading out — so the axis moves exactly with the marks, which
+ * interpolate between the same two pixel mappings.
+ */
+import type { Rect } from '../types.js';
+import type { CartesianModel, Tick } from '../runtime/cartesian.js';
+import type { Surface } from '../render/surface.js';
+/** Chrome stash names shared by the axis, annotation and trendline modules. */
+export declare const AXIS_SCALES = "axes:scales";
+export declare const AXIS_UNDERLAY = "axes:underlay";
+export declare const AXIS_LABELS = "axes:labels";
+export type TickValue = Tick['value'];
+/** Value → pixel mappings of one drawn frame. */
+export interface ScaleMaps {
+    xAt(value: unknown): number | undefined;
+    yAt(value: unknown): number | undefined;
+}
+/** A frame's plot rect and value → pixel mappings, for placing the other frame's ticks. */
+export interface ScaleFrame extends ScaleMaps {
+    plot: Rect;
+    /**
+     * The static frames this one mixes, with weights summing to 1. However many
+     * morphs interrupt one another, a blend stays this flat list — never a chain
+     * of nested closures — and frames whose weight has decayed away are dropped.
+     */
+    parts: ReadonlyArray<{
+        weight: number;
+        maps: ScaleMaps;
+    }>;
+}
+/** One drawn axis element, keyed by its tick value. */
+export interface AxisItem {
+    key: string;
+    value: TickValue;
+    /** Pixel position along its axis. */
+    pos: number;
+    alpha: number;
+}
+/** The axis lines one frame drew (see drawAxesUnderlay). */
+export interface UnderlayFrame {
+    orientation: 'vertical' | 'horizontal';
+    plot: Rect;
+    /** Gridlines at value (y) ticks: horizontal lines, or vertical ones for horizontal bars. */
+    valueGrid: AxisItem[];
+    /** Vertical gridlines at the labelled x ticks (vertical orientation). */
+    xGrid: AxisItem[];
+    /** Tick marks on the category/x axis. */
+    xMarks: AxisItem[];
+    /** Whether the x baseline (or the horizontal-bar spine) is drawn. */
+    axisLine: boolean;
+}
+export declare const lerp: (a: number, b: number, t: number) => number;
+export declare function lerpRect(a: Rect, b: Rect, t: number): Rect;
+/** A stable key for a tick value (numbers and strings never collide). */
+export declare function tickKey(value: TickValue): string;
+/**
+ * Blend two frames' items: shared ones (same key, and `same` agrees) glide and
+ * keep the incoming item; new ones start where their value sat on the outgoing
+ * scale and fade in; departing ones head to where their value lands on the
+ * incoming scale and fade out. Departing items come first so they paint beneath.
+ */
+export declare function blendItems<T extends AxisItem>(from: readonly T[], to: readonly T[], t: number, fromAt: (value: TickValue) => number | undefined, toAt: (value: TickValue) => number | undefined, same?: (a: T, b: T) => boolean): Array<{
+    item: T;
+    pos: number;
+    alpha: number;
+}>;
+/** The current frame's mappings, as stashed for the next morph. */
+export declare function scaleFrameOf(model: CartesianModel): ScaleFrame;
+/** `from` mixed `t` of the way into `model`'s mappings. */
+export declare function blendScales(from: ScaleFrame, model: CartesianModel, t: number): ScaleFrame;
+/**
+ * Stash this frame's mappings and return the outgoing ones while morphing (null
+ * otherwise). Call once per axis draw, before anything uses {@link morphedModel}.
+ * `name` lets a secondary axis (combo's right axis) track its own scale.
+ */
+export declare function trackScales(surface: Surface, model: CartesianModel, name?: string): {
+    from: ScaleFrame;
+    t: number;
+} | null;
+/**
+ * `model` with its plot and value → pixel mappings mixed from the outgoing
+ * frame's while a morph is drawing (so annotations and trendlines move with the
+ * axes); `model` itself otherwise.
+ */
+export declare function morphedModel(surface: Surface, model: CartesianModel): CartesianModel;
+/** The axis lines a static draw of `model` produces (`xPlaced` = the labelled x ticks). */
+export declare function underlayFrameOf(model: CartesianModel, xPlaced: ReadonlyArray<{
+    value: TickValue;
+    pos: number;
+}>, grid: {
+    x: boolean;
+    y: boolean;
+}): UnderlayFrame;
+/** `to` blended from `from`: what a tween frame paints (and stashes). */
+export declare function blendUnderlay(from: UnderlayFrame, to: UnderlayFrame, t: number, scales: ScaleFrame, model: CartesianModel): UnderlayFrame;
+/**
+ * Paint a blended underlay: gridlines clipped to the (moving) plot, each at its
+ * own opacity, then the axis line and tick marks.
+ */
+export declare function paintUnderlay(ctx: CanvasRenderingContext2D, frame: UnderlayFrame, colors: {
+    grid: string;
+    axis: string;
+}, tickSize: number): void;
+//# sourceMappingURL=morph.d.ts.map

package/dist/axes/morph.d.ts.map

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

package/dist/axes/morph.js

@@ -0,0 +1,207 @@
+import { chromeMorph, stashChrome, visibleItems } from "../render/chromeMotion.js";
+import { crisp } from "../util/math.js";
+const AXIS_SCALES = "axes:scales";
+const AXIS_UNDERLAY = "axes:underlay";
+const AXIS_LABELS = "axes:labels";
+const MIN_PART_WEIGHT = 1e-3;
+const MAX_PARTS = 12;
+const lerp = (a, b, t) => a + (b - a) * t;
+function lerpRect(a, b, t) {
+  return { x: lerp(a.x, b.x, t), y: lerp(a.y, b.y, t), width: lerp(a.width, b.width, t), height: lerp(a.height, b.height, t) };
+}
+function tickKey(value) {
+  return `${typeof value === "number" ? "n" : "s"}:${value}`;
+}
+function finiteOr(value, fallback) {
+  return value !== void 0 && Number.isFinite(value) ? value : fallback;
+}
+function blendItems(from, to, t, fromAt, toAt, same = () => true) {
+  const byKey = /* @__PURE__ */ new Map();
+  for (const a of from) byKey.set(a.key, a);
+  const kept = /* @__PURE__ */ new Set();
+  const entering = [];
+  for (const b of to) {
+    const a = byKey.get(b.key);
+    if (a && !kept.has(a) && same(a, b)) {
+      kept.add(a);
+      entering.push({ item: b, pos: lerp(a.pos, b.pos, t), alpha: lerp(a.alpha, b.alpha, t) });
+    } else {
+      entering.push({ item: b, pos: lerp(finiteOr(fromAt(b.value), b.pos), b.pos, t), alpha: b.alpha * t });
+    }
+  }
+  const leaving = from.filter((a) => !kept.has(a)).map((a) => ({ item: a, pos: lerp(a.pos, finiteOr(toAt(a.value), a.pos), t), alpha: a.alpha * (1 - t) }));
+  return [...leaving, ...entering];
+}
+function mixedAt(parts, axis) {
+  if (parts.length === 1) return parts[0].maps[axis];
+  return (value) => {
+    let sum = 0;
+    let total = 0;
+    for (const { weight, maps } of parts) {
+      if (!(weight > 0)) continue;
+      const p = maps[axis](value);
+      if (p === void 0 || !Number.isFinite(p)) continue;
+      sum += weight * p;
+      total += weight;
+    }
+    if (total > 0) return sum / total;
+    for (let i = parts.length - 1; i >= 0; i--) {
+      const p = parts[i].maps[axis](value);
+      if (p !== void 0 && Number.isFinite(p)) return p;
+    }
+    return void 0;
+  };
+}
+function scaleFrameOf(model) {
+  const maps = { xAt: (v) => model.x.pixel(v), yAt: (v) => model.y.pixel(v) };
+  return { plot: model.plot, xAt: maps.xAt, yAt: maps.yAt, parts: [{ weight: 1, maps }] };
+}
+function blendScales(from, model, t) {
+  const to = scaleFrameOf(model);
+  const w = Math.min(1, Math.max(0, t));
+  const incoming = { weight: w, maps: to.parts[0].maps };
+  let outgoing = from.parts.map((part) => ({ weight: part.weight * (1 - w), maps: part.maps })).filter((part) => part.weight >= MIN_PART_WEIGHT);
+  if (outgoing.length > MAX_PARTS - 1) outgoing = outgoing.sort((a, b) => b.weight - a.weight).slice(0, MAX_PARTS - 1);
+  const total = outgoing.reduce((sum, part) => sum + part.weight, incoming.weight);
+  const parts = total > 0 ? [...outgoing, incoming].map((part) => ({ weight: part.weight / total, maps: part.maps })) : [{ weight: 1, maps: incoming.maps }];
+  return { plot: lerpRect(from.plot, to.plot, t), xAt: mixedAt(parts, "xAt"), yAt: mixedAt(parts, "yAt"), parts };
+}
+function trackScales(surface, model, name = AXIS_SCALES) {
+  const morph = chromeMorph(surface, name);
+  stashChrome(surface, name, morph ? blendScales(morph.from, model, morph.t) : scaleFrameOf(model));
+  return morph;
+}
+function morphedModel(surface, model) {
+  const morph = chromeMorph(surface, AXIS_SCALES);
+  if (!morph) return model;
+  const blended = blendScales(morph.from, model, morph.t);
+  return {
+    ...model,
+    plot: blended.plot,
+    x: { ...model.x, pixel: blended.xAt },
+    y: {
+      ...model.y,
+      baseline: lerp(finiteOr(morph.from.yAt(0), model.y.baseline), model.y.baseline, morph.t),
+      pixel: (v) => blended.yAt(v) ?? NaN
+    }
+  };
+}
+function underlayFrameOf(model, xPlaced, grid) {
+  const item = (value, pos) => ({ key: tickKey(value), value, pos, alpha: 1 });
+  const axisLine = model.spec.axes?.x?.show !== false;
+  if (model.orientation === "horizontal") {
+    return {
+      orientation: "horizontal",
+      plot: model.plot,
+      valueGrid: grid.y ? model.yTicks.map((tick) => item(tick.value, tick.pos)) : [],
+      xGrid: [],
+      xMarks: axisLine ? model.xTicks.map((tick) => item(tick.value, tick.pos)) : [],
+      axisLine
+    };
+  }
+  return {
+    orientation: "vertical",
+    plot: model.plot,
+    valueGrid: grid.y ? model.yTicks.map((tick) => item(tick.value, tick.pos)) : [],
+    xGrid: grid.x ? xPlaced.map((p) => item(p.value, p.pos)) : [],
+    xMarks: axisLine ? xPlaced.map((p) => item(p.value, p.pos)) : [],
+    axisLine
+  };
+}
+function blendUnderlay(from, to, t, scales, model) {
+  const xAt = (v) => model.x.pixel(v);
+  const yAt = (v) => model.y.pixel(v);
+  const settle = (items) => visibleItems(items.map(({ item, pos, alpha }) => ({ ...item, pos, alpha })));
+  const flipped = from.orientation !== to.orientation;
+  const fromOf = (items) => flipped ? [] : items;
+  return {
+    orientation: to.orientation,
+    plot: lerpRect(from.plot, to.plot, t),
+    valueGrid: settle(blendItems(fromOf(from.valueGrid), to.valueGrid, t, scales.yAt, yAt)),
+    xGrid: settle(blendItems(fromOf(from.xGrid), to.xGrid, t, scales.xAt, xAt)),
+    xMarks: settle(blendItems(fromOf(from.xMarks), to.xMarks, t, scales.xAt, xAt)),
+    axisLine: to.axisLine
+  };
+}
+function paintUnderlay(ctx, frame, colors, tickSize) {
+  const { plot } = frame;
+  const x0 = plot.x;
+  const x1 = plot.x + plot.width;
+  const y0 = plot.y;
+  const y1 = plot.y + plot.height;
+  const stroke = (alpha, color, path) => {
+    if (!(alpha > 2e-3)) return;
+    ctx.globalAlpha = Math.min(1, alpha);
+    ctx.strokeStyle = color;
+    ctx.beginPath();
+    path();
+    ctx.stroke();
+  };
+  const horizontal = frame.orientation === "horizontal";
+  ctx.save();
+  ctx.lineWidth = 1;
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(x0 - 0.5, y0 - 0.5, plot.width + 1, plot.height + 1);
+  ctx.clip();
+  for (const line of frame.valueGrid) {
+    stroke(line.alpha, colors.grid, () => {
+      if (horizontal) {
+        ctx.moveTo(crisp(line.pos), y0);
+        ctx.lineTo(crisp(line.pos), y1);
+      } else {
+        ctx.moveTo(x0, crisp(line.pos));
+        ctx.lineTo(x1, crisp(line.pos));
+      }
+    });
+  }
+  for (const line of frame.xGrid) {
+    stroke(line.alpha, colors.grid, () => {
+      ctx.moveTo(crisp(line.pos), y0);
+      ctx.lineTo(crisp(line.pos), y1);
+    });
+  }
+  ctx.restore();
+  if (frame.axisLine) {
+    stroke(1, colors.axis, () => {
+      if (horizontal) {
+        ctx.moveTo(crisp(x0), y0);
+        ctx.lineTo(crisp(x0), y1);
+      } else {
+        ctx.moveTo(x0, crisp(y1));
+        ctx.lineTo(x1, crisp(y1));
+      }
+    });
+    for (const mark of frame.xMarks) {
+      const inside = horizontal ? mark.pos >= y0 - 1 && mark.pos <= y1 + 1 : mark.pos >= x0 - 1 && mark.pos <= x1 + 1;
+      if (!inside) continue;
+      stroke(mark.alpha, colors.axis, () => {
+        if (horizontal) {
+          ctx.moveTo(x0 - tickSize, crisp(mark.pos));
+          ctx.lineTo(x0, crisp(mark.pos));
+        } else {
+          ctx.moveTo(crisp(mark.pos), y1);
+          ctx.lineTo(crisp(mark.pos), y1 + tickSize);
+        }
+      });
+    }
+  }
+  ctx.restore();
+}
+export {
+  AXIS_LABELS,
+  AXIS_SCALES,
+  AXIS_UNDERLAY,
+  blendItems,
+  blendScales,
+  blendUnderlay,
+  lerp,
+  lerpRect,
+  morphedModel,
+  paintUnderlay,
+  scaleFrameOf,
+  tickKey,
+  trackScales,
+  underlayFrameOf
+};
+//# sourceMappingURL=morph.js.map