add util to cleanup render cache

Author: g-harel

internal/animate/state.ts

@@ -61,6 +61,17 @@ export const removeStaleFrames = (
     return keyframes.slice(staleCount - 1);
 };
 
+export const cleanRenderCache = (
+    keyframes: InternalKeyframe[],
+    renderCache: RenderCache,
+): RenderCache => {
+    const newCache: RenderCache = {};
+    for (const frame of keyframes) {
+        newCache[frame.id] = renderCache[frame.id];
+    }
+    return newCache;
+}
+
 export const renderFramesAt = (input: RenderInput): RenderOutput => {
     const {cache, currentFrames} = input;
 
@@ -112,8 +123,6 @@ export const renderFramesAt = (input: RenderInput): RenderOutput => {
     };
 };
 
-// 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.

public/animate.ts

@@ -10,6 +10,7 @@ import {
     Keyframe,
     removeStaleFrames,
     RenderCache,
+    cleanRenderCache,
 } from "../internal/animate/state";
 
 // TODO copy keyframes as soon as possible to make sure they aren't modified afterwards.
@@ -37,8 +38,8 @@ interface CallbackStore {
 }
 
 const removeExpiredFrameCallbacks = (
-    oldStore: CallbackStore,
     frames: InternalKeyframe[],
+    oldStore: CallbackStore,
 ): CallbackStore => {
     const newStore: CallbackStore = {};
     for (const frame of frames) {
@@ -88,7 +89,8 @@ export const canvasPath = (): CanvasAnimation => {
         internalFrames = transitionOutput.newFrames;
 
         // Remove callbacks that are no longer associated with a known frame.
-        callbackStore = removeExpiredFrameCallbacks(callbackStore, internalFrames);
+        callbackStore = removeExpiredFrameCallbacks(internalFrames, callbackStore);
+        renderCache = cleanRenderCache(internalFrames, renderCache);
 
         // Populate the callback using returned frame ids.
         for (const newFrame of internalFrames) {