add callback store and integration points to read/write it

Author: g-harel

internal/animate/state.ts

@@ -16,6 +16,7 @@ export interface InternalKeyframe {
     timestamp: number;
     timingFunction: TimingFunc;
     initialPoints: Point[];
+    transitionSourceFrameIndex: number | null;
 }
 
 export interface RenderCache {
@@ -26,7 +27,7 @@ export interface RenderCache {
 }
 
 export interface RenderInput {
-    keyframes: InternalKeyframe[];
+    currentFrames: InternalKeyframe[];
     timestamp: number;
     cache: RenderCache;
 }
@@ -42,7 +43,7 @@ export interface TransitionInput extends RenderInput {
 }
 
 export interface TransitionOutput {
-    frames: InternalKeyframe[];
+    newFrames: InternalKeyframe[];
     cache: RenderCache;
 }
 
@@ -61,25 +62,25 @@ export const removeStaleFrames = (
 };
 
 export const renderFramesAt = (input: RenderInput): RenderOutput => {
-    const {cache, keyframes} = input;
+    const {cache, currentFrames} = input;
 
-    if (keyframes.length === 0) {
+    if (currentFrames.length === 0) {
         return {cache, lastFrameId: null, points: []};
     }
 
     // Animation freezes at the final shape if there are no more keyframes.
-    if (keyframes.length === 1) {
-        const first = keyframes[0];
+    if (currentFrames.length === 1) {
+        const first = currentFrames[0];
         return {cache, lastFrameId: first.id, points: first.initialPoints};
     }
 
     // Find the start/end keyframes according to the timestamp.
-    let startKeyframe = keyframes[0];
-    let endKeyframe = keyframes[1];
-    for (let i = 2; i < keyframes.length; i++) {
+    let startKeyframe = currentFrames[0];
+    let endKeyframe = currentFrames[1];
+    for (let i = 2; i < currentFrames.length; i++) {
         if (endKeyframe.timestamp < input.timestamp) break;
-        startKeyframe = keyframes[i - 1];
-        endKeyframe = keyframes[i];
+        startKeyframe = currentFrames[i - 1];
+        endKeyframe = currentFrames[i];
     }
 
     // Use and cache prepared points for current interpolation.
@@ -108,15 +109,22 @@ export const renderFramesAt = (input: RenderInput): RenderOutput => {
         cache,
         lastFrameId: startKeyframe.id,
         points: interpolateBetween(adjustedProgress, preparedStartPoints, preparedEndPoints),
-    }
+    };
 };
 
+// TODO render cache cleaner.
+
 // TODO generate internal frames. Delayed frames can just copy the previous one.
 // TODO store current blob when interrupts happen to use as source.
 // TODO don't remove any frames.
 export const transitionFrames = (input: TransitionInput): TransitionOutput => {
     const {cache, timestamp, newFrames} = input;
 
+    // Wipe animation when given no keyframes.
+    if (input.newFrames.length === 0) {
+        return {cache: input.cache, newFrames: []};
+    }
+
     // Add current state as initial frame.
     const currentState = renderFramesAt(input);
     let internalFrames: InternalKeyframe[] = [
@@ -125,6 +133,7 @@ export const transitionFrames = (input: TransitionInput): TransitionOutput => {
             initialPoints: currentState.points,
             timestamp: timestamp,
             timingFunction: (p) => p,
+            transitionSourceFrameIndex: null,
         },
     ];
 
@@ -135,5 +144,5 @@ export const transitionFrames = (input: TransitionInput): TransitionOutput => {
         }
     }
 
-    return {cache, frames: internalFrames};
+    return {cache, newFrames: internalFrames};
 };

public/animate.ts

@@ -9,14 +9,19 @@ import {
     transitionFrames,
     Keyframe,
     removeStaleFrames,
+    RenderCache,
 } from "../internal/animate/state";
 
 // TODO copy keyframes as soon as possible to make sure they aren't modified afterwards.
 // TODO make sure callbacks don't fill up the stack.
 // TODO defend against "bad" keyframes like negative timing.
 // TODO keyframe callbacks
 
-export interface CanvasKeyframe extends Keyframe {
+interface CallbackKeyframe extends Keyframe {
+    callback?: () => void;
+}
+
+export interface CanvasKeyframe extends CallbackKeyframe {
     canvasOptions?: CanvasOptions;
 }
 
@@ -27,32 +32,70 @@ export interface CanvasAnimation {
     transition(...keyframes: CanvasKeyframe[]): void;
 }
 
+interface CallbackStore {
+    [frameId: string]: () => void;
+}
+
+const removeExpiredFrameCallbacks = (
+    oldStore: CallbackStore,
+    frames: InternalKeyframe[],
+): CallbackStore => {
+    const newStore: CallbackStore = {};
+    for (const frame of frames) {
+        newStore[frame.id] = oldStore[frame.id];
+    }
+    return newStore;
+};
+
 export const canvasPath = (): CanvasAnimation => {
     let internalFrames: InternalKeyframe[] = [];
-
-    const genBlob = (keyframe: CanvasKeyframe): Point[] =>
-        mapPoints(genFromOptions(keyframe.blobOptions), ({curr}) => {
-            curr.x += keyframe?.canvasOptions?.offsetX || 0;
-            curr.y += keyframe?.canvasOptions?.offsetY || 0;
-            return curr;
-        });
+    let renderCache: RenderCache = {};
+    let callbackStore: CallbackStore = {};
 
     const renderFrame: CanvasAnimation["renderFrame"] = () => {
         const renderTime = Date.now();
         internalFrames = removeStaleFrames(internalFrames, renderTime);
-        return renderPath2D(renderFramesAt(internalFrames, renderTime));
+        const renderOutput = renderFramesAt({
+            cache: renderCache,
+            timestamp: renderTime,
+            currentFrames: internalFrames,
+        });
+        renderCache = renderOutput.cache;
+        if (renderOutput.lastFrameId && callbackStore[renderOutput.lastFrameId]) {
+            callbackStore[renderOutput.lastFrameId]();
+            delete callbackStore[renderOutput.lastFrameId];
+        }
+        return renderPath2D(renderOutput.points);
     };
 
+    const genBlob = (keyframe: CanvasKeyframe): Point[] => {
+        return mapPoints(genFromOptions(keyframe.blobOptions), ({curr}) => {
+            curr.x += keyframe?.canvasOptions?.offsetX || 0;
+            curr.y += keyframe?.canvasOptions?.offsetY || 0;
+            return curr;
+        });
+    }
+
     const transition: CanvasAnimation["transition"] = (...keyframes) => {
         const transitionTime = Date.now();
+        const transitionOutput = transitionFrames({
+            cache: renderCache,
+            timestamp: transitionTime,
+            currentFrames: internalFrames,
+            newFrames: keyframes,
+        });
+        renderCache = transitionOutput.cache;
+        internalFrames = transitionOutput.newFrames;
 
-        // Immediately wipe animation when given no keyframes.
-        if (keyframes.length === 0) {
-            internalFrames = [];
-            return;
-        }
+        // Remove callbacks that are no longer associated with a known frame.
+        callbackStore = removeExpiredFrameCallbacks(callbackStore, internalFrames);
 
-        internalFrames = transitionFrames(internalFrames, keyframes, transitionTime);
+        // Populate the callback using returned frame ids.
+        for (const newFrame of internalFrames) {
+            if (newFrame.transitionSourceFrameIndex === null) continue;
+            const {callback} = keyframes[newFrame.transitionSourceFrameIndex];
+            if (callback) callbackStore[newFrame.id] = callback;
+        }
     };
 
     return {renderFrame, transition};