fix(Canvas): Change registration API. Pass config instead of simple f…

…unction to enable `retainState` use case (fix `Group` translate() use case). Return `unregister` function
techniq · Jan 10, 2025 · 6e91781 · 6e91781
1 parent a9c16ba
commit 6e91781
Show file tree

Hide file tree

Showing 13 changed files with 62 additions and 39 deletions.
diff --git a/packages/layerchart/src/lib/components/Arc.svelte b/packages/layerchart/src/lib/components/Arc.svelte
@@ -216,8 +216,9 @@
     });
   }
 
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    canvasContext.register(render);
+    canvasUnregister = canvasContext.register({ name: 'Arc', render });
   }
 
   $: if (renderContext === 'canvas') {
@@ -228,7 +229,7 @@
 
   onDestroy(() => {
     if (renderContext === 'canvas') {
-      canvasContext.deregister(render);
+      canvasUnregister();
     }
   });
 </script>

diff --git a/packages/layerchart/src/lib/components/Area.svelte b/packages/layerchart/src/lib/components/Area.svelte
@@ -142,8 +142,9 @@
     });
   }
 
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    canvasContext.register(render);
+    canvasUnregister = canvasContext.register({ name: 'Area', render });
 
     tweened_d.subscribe(() => {
       canvasContext.invalidate();
@@ -152,7 +153,7 @@
 
   onDestroy(() => {
     if (renderContext === 'canvas') {
-      canvasContext.deregister(render);
+      canvasUnregister();
     }
   });
 </script>

diff --git a/packages/layerchart/src/lib/components/Circle.svelte b/packages/layerchart/src/lib/components/Circle.svelte
@@ -45,8 +45,9 @@
     });
   }
 
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    canvasContext.register(render);
+    canvasUnregister = canvasContext.register({ name: 'Circle', render });
   }
 
   $: if (renderContext === 'canvas') {
@@ -57,7 +58,7 @@
 
   onDestroy(() => {
     if (renderContext === 'canvas') {
-      canvasContext.deregister(render);
+      canvasUnregister();
     }
   });
 </script>

diff --git a/packages/layerchart/src/lib/components/GeoPath.svelte b/packages/layerchart/src/lib/components/GeoPath.svelte
@@ -89,8 +89,9 @@
     }
   }
 
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    canvasContext.register(_render);
+    canvasUnregister = canvasContext.register({ name: 'GeoPath', render: _render });
   }
 
   $: if (renderContext === 'canvas') {
@@ -101,7 +102,7 @@
 
   onDestroy(() => {
     if (renderContext === 'canvas') {
-      canvasContext.deregister(_render);
+      canvasUnregister();
     }
   });
 </script>

diff --git a/packages/layerchart/src/lib/components/GeoPoint.svelte b/packages/layerchart/src/lib/components/GeoPoint.svelte
@@ -28,13 +28,14 @@
     render(ctx, { x, y });
   }
 
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    canvasContext.register(_render);
+    canvasUnregister = canvasContext.register({ name: 'GeoPoint', render: _render });
   }
 
   onDestroy(() => {
     if (renderContext === 'canvas') {
-      canvasContext.deregister(_render);
+      canvasUnregister();
     }
   });
 </script>

diff --git a/packages/layerchart/src/lib/components/GeoTile.svelte b/packages/layerchart/src/lib/components/GeoTile.svelte
@@ -46,8 +46,9 @@
     });
   }
 
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    canvasContext.register(render);
+    canvasUnregister = canvasContext.register({ name: 'GeoTile', render });
   }
 
   $: if (renderContext === 'canvas') {
@@ -57,7 +58,7 @@
 
   onDestroy(() => {
     if (renderContext === 'canvas') {
-      canvasContext.deregister(render);
+      canvasUnregister();
     }
   });
 </script>

diff --git a/packages/layerchart/src/lib/components/Group.svelte b/packages/layerchart/src/lib/components/Group.svelte
@@ -53,8 +53,9 @@
     ctx.translate($tweened_x ?? 0, $tweened_y ?? 0);
   }
 
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    canvasContext.register(render);
+    canvasUnregister = canvasContext.register({ name: 'Group', render, retainState: true });
   }
 
   $: if (renderContext === 'canvas') {
@@ -64,7 +65,7 @@
 
   onDestroy(() => {
     if (renderContext === 'canvas') {
-      canvasContext.deregister(render);
+      canvasUnregister();
     }
   });
 </script>

diff --git a/packages/layerchart/src/lib/components/Line.svelte b/packages/layerchart/src/lib/components/Line.svelte
@@ -65,8 +65,9 @@
     });
   }
 
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    canvasContext.register(render);
+    canvasUnregister = canvasContext.register({ name: 'Line', render });
   }
 
   $: if (renderContext === 'canvas') {
@@ -77,7 +78,7 @@
 
   onDestroy(() => {
     if (renderContext === 'canvas') {
-      canvasContext.deregister(render);
+      canvasUnregister();
     }
   });
 </script>

diff --git a/packages/layerchart/src/lib/components/Points.svelte b/packages/layerchart/src/lib/components/Points.svelte
@@ -169,13 +169,14 @@
     }
   }
 
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    canvasContext.register(_render);
+    canvasUnregister = canvasContext.register({ name: 'Points', render: _render });
   }
 
   onDestroy(() => {
     if (renderContext === 'canvas') {
-      canvasContext.deregister(_render);
+      canvasUnregister();
     }
   });
 </script>

diff --git a/packages/layerchart/src/lib/components/Rect.svelte b/packages/layerchart/src/lib/components/Rect.svelte
@@ -56,8 +56,9 @@
     );
   }
 
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    canvasContext.register(render);
+    canvasUnregister = canvasContext.register({ name: 'Rect', render });
   }
 
   $: if (renderContext === 'canvas') {
@@ -68,7 +69,7 @@
 
   onDestroy(() => {
     if (renderContext === 'canvas') {
-      canvasContext.deregister(render);
+      canvasUnregister();
     }
   });
 </script>

diff --git a/packages/layerchart/src/lib/components/Spline.svelte b/packages/layerchart/src/lib/components/Spline.svelte
@@ -170,8 +170,9 @@
     });
   }
 
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    canvasContext.register(render);
+    canvasUnregister = canvasContext.register({ name: 'Spline', render });
 
     tweened_d.subscribe(() => {
       canvasContext.invalidate();
@@ -180,7 +181,7 @@
 
   onDestroy(() => {
     if (renderContext === 'canvas') {
-      canvasContext.deregister(render);
+      canvasUnregister();
     }
   });
 

diff --git a/packages/layerchart/src/lib/components/Text.svelte b/packages/layerchart/src/lib/components/Text.svelte
@@ -193,8 +193,9 @@
     });
   }
 
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    canvasContext.register(render);
+    canvasUnregister = canvasContext.register({ name: 'Text', render });
   }
 
   $: if (renderContext === 'canvas') {
@@ -205,7 +206,7 @@
 
   onDestroy(() => {
     if (renderContext === 'canvas') {
-      canvasContext.deregister(render);
+      canvasUnregister();
     }
   });
 </script>

diff --git a/packages/layerchart/src/lib/components/layout/Canvas.svelte b/packages/layerchart/src/lib/components/layout/Canvas.svelte
@@ -1,11 +1,15 @@
 <script lang="ts" context="module">
   import { getContext, onDestroy, setContext } from 'svelte';
 
-  type DrawFunction = (ctx: CanvasRenderingContext2D) => any;
+  type ComponentRender = {
+    name: string;
+    render: (ctx: CanvasRenderingContext2D) => any;
+    retainState?: boolean;
+  };
 
   export type CanvasContext = {
-    register(fn: DrawFunction): void;
-    deregister(fn: DrawFunction): void;
+    /** Register component to render.  Returns method to unregister on component destory */
+    register(component: ComponentRender): () => void;
     invalidate(): void;
   };
 
@@ -64,7 +68,7 @@
    */
   export let center: boolean | 'x' | 'y' = false;
 
-  const drawFunctions: DrawFunction[] = [];
+  let components = new Map<Symbol, ComponentRender>();
   let pendingInvalidation = false;
   let frameId: number | undefined;
 
@@ -106,24 +110,31 @@
       context.scale($scale, $scale);
     }
 
-    drawFunctions.forEach((fn) => {
-      // TODO: `.save()` / `.restore()`  breaks `Group`.  Is this needed for resetting styles or other unidentified cases?
-      // context.save();
-      fn(context);
-      // context.restore();
+    components.forEach((c) => {
+      if (c.retainState) {
+        // Do not call save/restore canvas draw state (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save) (ex. Group ctx.translate() affecting children)
+        c.render(context);
+      } else {
+        context.save();
+        c.render(context);
+        context.restore();
+      }
     });
 
     pendingInvalidation = false;
   }
 
   const canvasContext: CanvasContext = {
-    register(fn) {
-      drawFunctions.push(fn);
-      this.invalidate();
-    },
-    deregister(fn) {
-      drawFunctions.splice(drawFunctions.indexOf(fn), 1);
+    register(component) {
+      const key = Symbol();
+      components.set(key, component);
       this.invalidate();
+
+      // Unregister
+      return () => {
+        components.delete(key);
+        this.invalidate();
+      };
     },
     invalidate() {
       if (pendingInvalidation) return;