move animation code to time.js

Author: Fil

src/plot.js

@@ -1,21 +1,21 @@
-import {bisectLeft, cross, difference, easeQuadInOut, extent, group, groups, InternMap, interpolate, interpolateNumber, interpolateRound, interpolateHsl, intersection, scaleLinear, select} from "d3";
+import {cross, difference, group, groups, InternMap, select} from "d3";
 import {Axes, autoAxisTicks, autoScaleLabels} from "./axes.js";
 import {Channel, Channels, channelDomain, valueObject} from "./channel.js";
 import {Context, create} from "./context.js";
 import {defined} from "./defined.js";
 import {Dimensions} from "./dimensions.js";
 import {Legends, exposeLegends} from "./legends.js";
-import {arrayify, constant, isDomainSort, isScaleOptions, keyword, map, maybeNamed, range, second, valueof, where, yes} from "./options.js";
-import {Scales, ScaleFunctions, autoScaleRange, coerceNumbers, exposeScales, isOrdinalScale} from "./scales.js";
+import {arrayify, isDomainSort, isScaleOptions, keyword, map, maybeNamed, range, second, valueof, where, yes} from "./options.js";
+import {Scales, ScaleFunctions, autoScaleRange, exposeScales} from "./scales.js";
 import {position, registry as scaleRegistry} from "./scales/index.js";
 import {applyInlineStyles, maybeClassName, maybeClip, styles} from "./style.js";
-import {maybeTimeFilter, maybeTween, defaultKeys} from "./time.js";
+import {animate, maybeTimeFilter, defaultKey, prepareTimeScale} from "./time.js";
 import {basic, initializer} from "./transforms/basic.js";
 import {maybeInterval} from "./transforms/interval.js";
 import {consumeWarnings} from "./warnings.js";
 
 export function plot(options = {}) {
-  const {facet, time, style, caption, ariaLabel, ariaDescription} = options;
+  const {facet, style, caption, ariaLabel, ariaDescription} = options;
 
   // className for inline styles
   const className = maybeClassName(options.className);
@@ -72,7 +72,7 @@ export function plot(options = {}) {
   }
 
   // Initialize the marks’ state.
-  const markTimes = new Map();
+  let hasTime = !!options.time;
   for (const mark of marks) {
     if (stateByMark.has(mark)) throw new Error("duplicate mark; each mark must be unique");
 
@@ -84,8 +84,12 @@ export function plot(options = {}) {
 
     const {data, facets, channels, time, timeFacets} = mark.initialize(markFacets, facetChannels);
     applyScaleTransforms(channels, options);
-    stateByMark.set(mark, {data, facets, channels});
-    if (timeFacets.length) markTimes.set(mark, {time, timeFacets});
+    if (timeFacets.length) {
+      stateByMark.set(mark, {data, facets, channels, time, timeFacets, layouts: []});
+      hasTime = true;
+    } else {
+      stateByMark.set(mark, {data, facets, channels});
+    }
   }
 
   // Initalize the scales and axes.
@@ -135,79 +139,18 @@ export function plot(options = {}) {
   }
 
   // Infer the time scale
-  let interpolateTime;
-  let timeScale;
-  if (markTimes.size) {
-    ({time: timeScale} = Scales(new Map([["time", Array.from(markTimes, ([, {time}]) => ({value: time}))]]), options));
-    if (isOrdinalScale(timeScale)) {
-      const index = new InternMap(timeScale.domain.map((d, i) => [d, i]));
-      // ordinal times are mapped to their rank in the ordinal domain
-      for (const [, m] of markTimes) {
-        const domain = [...intersection(timeScale.domain, m.time)];
-        m.time = m.time.map(d => index.get(d));
-        m.domain = domain.map(d => index.get(d));
-      }
-    } else {
-      for (const [, m] of markTimes) {
-        m.time = coerceNumbers(m.time);
-        m.domain = [];
-        for (const t of m.time) {
-          if (isNaN(t) || !isFinite(t)) continue;
-          const i = bisectLeft(m.domain, t);
-          if (m.domain[i] === t) continue;
-          m.domain.splice(i, 0, t);
-        }
-      }
-    }
-
-    const {
-      delay = 0,
-      duration = 5000,
-      direction = 1,
-      playbackRate = 1,
-      initial,
-      autoplay = true,
-      iterations = 0,
-      loop = !!iterations,
-      alternate = false,
-      loopDelay = 1000
-    } = time == null ? {} : time;
-    interpolateTime = scaleLinear()
-      .domain(isOrdinalScale(timeScale) ? [0, timeScale.domain.length - 1] : extent(timeScale.domain))
-      .range([0, 1]);
-
-    if (typeof delay !== "number" || delay < 0 || !isFinite(delay)) throw new Error(`Unsupported delay ${delay}.`);
-    if (typeof duration !== "number" || duration < 0 || !isFinite(duration)) throw new Error(`Unsupported duration ${duration}.`);
-    if (![-1, 1, null].includes(direction)) throw new Error(`Unsupported direction ${direction}.`);
-    if (initial != null && Number.isNaN(interpolateTime(initial))) throw new Error(`Unsupported initial time ${initial}.`);
-    if (typeof autoplay !== "boolean") throw new Error(`Unsupported autoplay option ${autoplay}.`);
-    if (typeof loop !== "boolean") throw new Error(`Unsupported loop option ${loop}.`);
-    if (typeof playbackRate !== "number") throw new Error(`Unsupported playback rate ${playbackRate}.`);
-    if (typeof alternate !== "boolean") throw new Error(`Unsupported alternate option ${alternate}.`);
-    if (typeof loopDelay !== "number" || loopDelay < 0) throw new Error(`Unsupported loop delay ${loopDelay}.`);
-    scaleDescriptors.time = {
-      type: timeScale.type,
-      domain: timeScale.domain,
-      delay,
-      duration,
-      direction,
-      playbackRate,
-      initial,
-      autoplay,
-      iterations,
-      loop,
-      alternate,
-      loopDelay,
-      scale: timeScale.scale
-    };
+  const time = hasTime && prepareTimeScale(options, stateByMark);
+  if (time) {
+    scaleDescriptors.time = time;
+    scales.time = time.scale;
   }
 
   for (const [mark, state] of stateByMark) {
     const {facets, values} = state;
 
     // Reassemble time facets
     if (mark.time) {
-      const m = markTimes.get(mark);
+      const m = stateByMark.get(mark);
       const {domain, time, timeFacets} = m;
       if (domain.length <= 1) continue;
 
@@ -226,8 +169,6 @@ export function plot(options = {}) {
     }
   }
 
-  const animateMarks = [];
-
   const {width, height} = dimensions;
 
   const svg = create("svg", context)
@@ -305,14 +246,14 @@ export function plot(options = {}) {
         .attr("transform", facetTranslate(fx, fy))
         .each(function(key) {
           const j = indexByFacet.get(key);
-          for (const [mark, {channels, values, facets}] of stateByMark) {
+          for (const [mark, {channels, values, facets, layouts}] of stateByMark) {
             const facet = facets ? mark.filter(facets[j] ?? facets[0], channels, values) : null;
-            const index = mark.time ? [] : facet;
+            const index = layouts ? [] : facet;
             const node = mark.render(index, scales, values, subdimensions, context);
             if (node != null) {
               this.appendChild(node);
-              if (mark.time) {
-                animateMarks.push({
+              if (layouts) {
+                layouts.push({
                   mark,
                   node,
                   facet,
@@ -323,14 +264,14 @@ export function plot(options = {}) {
           }
         });
   } else {
-    for (const [mark, {channels, values, facets}] of stateByMark) {
+    for (const [mark, {channels, values, facets, layouts}] of stateByMark) {
       const facet = facets ? mark.filter(facets[0], channels, values) : null;
-      const index = mark.time ? [] : facet;
+      const index = layouts ? [] : facet;
       const node = mark.render(index, scales, values, dimensions, context);
       if (node != null) {
         svg.appendChild(node);
         if (mark.time) {
-          animateMarks.push({
+          layouts.push({
             mark,
             node,
             facet,
@@ -373,191 +314,14 @@ export function plot(options = {}) {
         .text(`${w.toLocaleString("en-US")} warning${w === 1 ? "" : "s"}. Please check the console.`);
   }
 
-  if (animateMarks.length > 0) {
-    const {alternate, autoplay, delay, direction, duration, initial, iterations, loopDelay} = scaleDescriptors.time;
-    let {loop, playbackRate} = scaleDescriptors.time;
-    let lastTick;
-    let t1, currentTime, ended = false, paused = !autoplay;
-
-    const timeupdate = (t) => {
-      if (t1 === (t = Math.max(0, Math.min(1, t)))) return;
-      currentTime = interpolateTime.invert(t1 = t);
-      for (const timeMark of animateMarks) {
-        const {mark, facet, dimensions} = timeMark;
-        const {channels: {key}} = stateByMark.get(mark);
-        const {domain} = markTimes.get(mark);
-        const K = key ? key.value : null;
-        const i0 = bisectLeft(domain, currentTime);
-        const time0 = domain[i0 - 1];
-        const time1 = domain[i0] !== undefined ? domain[i0] : time0;
-        const timet = time1 === time0 ? 0 : (t - interpolateTime(time0)) / (interpolateTime(time1) - interpolateTime(time0));
-        const {interp, opacity} = stateByMark.get(mark);
-        const T = interp.time;
-        let timeNode;
-        const I0 = facet.filter(i => T[i] === time0); // preceding keyframe
-        const I1 = facet.filter(i => T[i] === time1); // following keyframe
-        let enter = [], update = [], target = [], exit = [];
-        if (K) {
-          const K0 = new Set(I0.map(i => K[i]));
-          const K1 = new Set(I1.map(i => K[i]));
-          const Kenter = difference(K1, K0);
-          const Kupdate = intersection(K0, K1);
-          const Kexit = difference(K0, K1);
-          enter = I1.filter(i => Kenter.has(K[i]));
-          update = I0.filter(i => Kupdate.has(K[i]));
-          target = update.map(i => I1.find(j => K[i] === K[j])); // TODO: use an index
-          exit = I0.filter(i => Kexit.has(K[i]));
-        } else {
-          enter = I1;
-          exit = I0;
-        }
-        const n = update.length;
-        const nt = n + enter.length + exit.length;
-        const Ii = Uint32Array.from({length: nt}).map((_, i) => i + T.length);
-        if (exit.length || enter.length) interp.opacity = opacity;
-
-        // TODO This is interpolating the already-scaled values, but we
-        // probably want to interpolate in data space instead and then
-        // re-apply the scales. I’m not sure what to do for ordinal data,
-        // but interpolating in data space will ensure that the resulting
-        // instantaneous visualization is meaningful and valid. TODO If the
-        // data is sparse (not all series have values for all times), then
-        // we will need a separate key channel to align the start and end
-        // values for interpolation; this code currently assumes that the
-        // data is complete.
-        for (const k in interp) {
-          if (k === "time") {
-            for (let i = 0; i < nt; ++i) interp[k][Ii[i]] = currentTime;
-          } else if (k === "opacity") {
-            const _exit = easeQuadInOut(1 - timet);
-            const _enter = easeQuadInOut(timet);
-            for (let i = 0; i < exit.length; ++i) interp[k][Ii[i]] = _exit;
-            for (let i = 0; i < n; ++i) interp[k][Ii[exit.length + i]] = 1;
-            for (let i = 0; i < enter.length; ++i) interp[k][Ii[exit.length + n + i]] = _enter;
-          } else {
-            const tween = maybeTween(mark.tween, k);
-            const interpolator = tween ? tween :
-              ["time"].includes(k) ? () => constant(currentTime) :
-              ["x", "x1", "x2", "y", "y1", "y2", "r"].includes(k) ? interpolateNumber :
-              ["fill", "stroke"].includes(k) ? interpolateHsl :
-              ["text"].includes(k) ? (a, b) => typeof a === "number" ? (frac(a) || frac(b) || Math.abs(a-b) < 3) ? interpolateNumber(a, b) : interpolateRound(a, b) : constant(a) :
-              interpolate;
-            for (let i = 0; i < exit.length; ++i) interp[k][Ii[i]] = interp[k][exit[i]];
-            for (let i = 0; i < n; ++i) {
-              const prev = interp[k][update[i]], next = interp[k][target[i]];
-              interp[k][Ii[i + exit.length]] = prev == next ? prev : interpolator(prev, next)(timet);
-            }
-            for (let i = 0; i < enter.length; ++i) interp[k][Ii[i + n + exit.length]] = interp[k][enter[i]];
-          }
-        }
-        const ifacet = [...facet.filter(i => T[i] < time1), ...(currentTime < time1) ? Ii : [], ...facet.filter(i => T[i] >= time1)];
-        const index = mark.timeFilter(ifacet, T, currentTime);
-        timeNode = mark.render(index, scales, interp, dimensions, context);
-        timeMark.node.replaceWith(timeMark.node = timeNode);        
-      }
-
-      // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event
-      if (window.CustomEvent) figure.dispatchEvent(new window.CustomEvent("timeupdate"));
-    };
-
-    let ticker = direction * playbackRate < 0 ? 1 : 0;
-    const tick = function() {
-      if (paused) {
-        lastTick = undefined;
-      } else {
-        // advance (or rewind) the clock by dt
-        const dt = lastTick === undefined
-          ? (lastTick = performance.now(), 0)
-          : performance.now() - lastTick;
-        lastTick += dt;
-        ticker += dt * direction * playbackRate / duration;
-      }
-
-      // t is the projection of the clock to the looping interval
-      let t = ticker;
-
-      if (loop) {
-        const s = 1 + loopDelay / duration;
-        const t0 = Math.floor((0.5 + Math.abs(t - 0.5)) / s);
-        if (iterations && t0 >= iterations) {
-          t = 2; // ends
-        } else {
-          const f = t - s * t0 * Math.sign(t - 0.5);
-          if (alternate) {
-            t = t0 % 2 ? 1 - f : f;
-          } else {
-            t = f;
-          }
-          t = Math.max(0, Math.min(1, t));
-        }
-      }
-      ended = t < 0 || t > 1;
-      if (ended) paused = true;
-
-      timeupdate(t);
-      if (figure.parentElement) requestAnimationFrame(tick);
-    };
-
-    // When using setTime, the argument is in the original time domain
-    const setTime = function(time) {
-      if (isOrdinalScale(timeScale)) {
-        const i = timeScale.domain.indexOf(time);
-        if (i === -1) throw new Error(`unknown time ${time}`);
-        time = i;
-      }
-      ticker = interpolateTime(time);
-      currentTime = interpolateTime.invert(ticker);
-      ended = ticker < 0 || ticker > 1;
-      lastTick = t1 = undefined;
-      timeupdate(Math.max(0, Math.min(1, ticker)));
-    };
-
-    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play
-    figure.play = () => {
-      if (ended) {
-        setTime(initial == null
-          ? timeScale.domain[direction * playbackRate < 0 ? timeScale.domain.length - 1 : 0]
-          : initial
-        );
-      }
-      paused = false;
-      return new Promise(r => r());
-    };
-
-    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause
-    figure.pause = () => {
-      paused = true;
-      t1 = undefined;
-    };
-
-    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration
-    Object.defineProperty(figure, 'duration', {get: () => duration / 1000});
-    
-    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused
-    Object.defineProperty(figure, 'paused', {get: () => paused});
-
-    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended
-    Object.defineProperty(figure, 'ended', {get: () => ended});
-
-    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime
-    Object.defineProperty(figure, 'currentTime', {
-      get: () => isOrdinalScale(timeScale) ? timeScale.domain[Math.floor(currentTime)]
-        : timeScale.type === "utc" || timeScale.type === "time" ? new Date(currentTime)
-        : currentTime,
-      set: setTime
-    });
-
-    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate
-    // https://github.com/whatwg/html/issues/3754
-    Object.defineProperty(figure, 'playbackRate', {get: () => playbackRate, set: (l) => {!isNaN(l = +l) && (playbackRate = l);}});
-
-    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loop
-    Object.defineProperty(figure, 'loop', {get: () => loop, set: (l) => {loop = !!l;}});
-
-    if (initial != null) setTime(initial);
-
-    timeupdate(ticker);
-    setTimeout(tick, delay);
+  if (hasTime) {
+    animate(
+      stateByMark,
+      time,
+      scales,
+      figure,
+      context
+    );
   }
 
   return figure;
@@ -596,7 +360,7 @@ export class Mark {
         group(facet, i => T[i]),
         ([t, I]) => (timeFacets.push(j), time.push(t), I)
       ));
-      this.channels.key = {value: this.key ?? defaultKeys(T), filter: null};
+      this.channels.key = {value: this.key ?? defaultKey(T), filter: null};
     }
     if (this.transform != null) {
       ({data, facets} = this.transform(data, facets)), data = arrayify(data);
@@ -766,7 +530,3 @@ class FacetMap2 extends FacetMap {
     return this;
   }
 }
-
-function frac(x) {
-  return x - Math.floor(x);
-}