fix pausing logic

Author: g-harel

demo/content.ts

@@ -638,6 +638,10 @@ addCanvas(
 );
 
 addCanvas(1.8, (ctx, width, height) => {
+    // Only animate in the most recent painter call.
+    const animationID = Math.random();
+    const wasReplaced = () => (ctx.canvas as any).animationID !== animationID;
+
     const period = Math.PI * 1000;
     const center: Coord = {x: width * 0.5, y: height * 0.5};
     const size = Math.min(width, height) * 0.8;
@@ -657,13 +661,17 @@ addCanvas(1.8, (ctx, width, height) => {
     )();
 
     const renderFrame = () => {
+        if (wasReplaced()) return;
         ctx.clearRect(0, 0, width, height);
         animation.renderFrame();
         requestAnimationFrame(renderFrame);
     };
     requestAnimationFrame(renderFrame);
 
-    const loopAnimation = (): void => animation.transition(genFrame());
+    const loopAnimation = (): void => {
+        if (wasReplaced()) return;
+        animation.transition(genFrame());
+    };
 
     let frameCount = -1;
     const genFrame = (overrides: Partial<CanvasKeyframe> = {}): CanvasKeyframe => {
@@ -684,7 +692,12 @@ addCanvas(1.8, (ctx, width, height) => {
 
     animation.transition(genFrame({duration: 0}));
 
-    ctx.canvas.onclick = animation.playPause;
+    ctx.canvas.onclick = () => {
+        if (wasReplaced()) return;
+        animation.playPause();
+    };
+
+    (ctx.canvas as any).animationID = animationID;
 
     return `Points can be removed at the end of animations as the target shape has been reached.
         However if the animation is interrupted during interpolation there is no opportunity to

demo/index.html

@@ -147,5 +147,6 @@
         </main>
         <script src="./example.ts"></script>
         <script src="./content.ts"></script>
+        <!-- TODO fix unexpanded landing alignment -->
     </body>
 </html>

index.html

@@ -19,34 +19,35 @@ export const statefulAnimationGenerator = <K extends CallbackKeyframe, T>(
     let callbackStore: CallbackStore = {};
 
     // Keep track of paused state.
-    // TODO fix
     let pausedAt = 0;
     let pauseOffset = 0;
+    const getAnimationTimestamp = () => Date.now() - pauseOffset;
+    const isPaused = () => pausedAt !== 0;
 
     const play = () => {
-        console.log("play");
-        if (pausedAt === 0) return;
-        pauseOffset += Date.now() - pausedAt;
+        if (!isPaused()) return;
+        pauseOffset += getAnimationTimestamp() - pausedAt;
         pausedAt = 0;
     };
 
     const pause = () => {
-        console.log("pause");
-        pausedAt = Date.now();
+        if (isPaused()) return;
+        pausedAt = getAnimationTimestamp();
     };
 
     const playPause = () => {
-        if (pausedAt === 0) {
-            pause();
-        } else {
+        ``;
+        if (isPaused()) {
             play();
+        } else {
+            pause();
         }
     };
 
     const renderFrame = (): T => {
         const renderOutput = renderFramesAt({
             renderCache: renderCache,
-            timestamp: pausedAt === 0 ? Date.now() - pauseOffset : pausedAt,
+            timestamp: isPaused() ? pausedAt : getAnimationTimestamp(),
             currentFrames: internalFrames,
         });
 
@@ -70,7 +71,7 @@ export const statefulAnimationGenerator = <K extends CallbackKeyframe, T>(
 
         const transitionOutput = transitionFrames<K>({
             renderCache: renderCache,
-            timestamp: Date.now() - pauseOffset,
+            timestamp: getAnimationTimestamp(),
             currentFrames: internalFrames,
             newFrames: keyframes,
             shapeGenerator: generator,