Move image painting to a context component

blog/2024-11-15-playing-with-fire/1-introduction/Canvas.tsx

@@ -1,34 +0,0 @@
-import {useEffect, useRef} from "react";
-
-interface Props {
-    renderFn: (ImageData) => void
-}
-
-export const Canvas: React.FC<Props> = ({renderFn}: Props) => {
-    const canvasRef = useRef<HTMLCanvasElement | null>(null);
-
-    useEffect(() => {
-        const ctx = canvasRef.current?.getContext("2d");
-        if (!ctx) {
-            console.log("Canvas not ready");
-        }
-
-        const image = ctx.createImageData(canvasRef.current.width, canvasRef.current.height);
-        renderFn(image);
-        ctx.putImageData(image, 0, 0);
-    }, []);
-
-    return (
-        <canvas
-            ref={canvasRef}
-            width={600}
-            height={600}
-            style={{
-                aspectRatio: '1 / 1',
-                width: '100%',
-            }}
-        />
-    );
-};
-
-export default Canvas;

blog/2024-11-15-playing-with-fire/1-introduction/chaosGame.js

@@ -21,4 +21,4 @@ function chaosGame(image) {
     }
 }
 
-render(<Canvas renderFn={chaosGame}/>)
+render(<Gasket renderFn={chaosGame}/>)

blog/2024-11-15-playing-with-fire/1-introduction/index.mdx

@@ -178,9 +178,9 @@ import plotSource from '!!raw-loader!./plot'
 import Playground from '@theme/Playground'
 import Scope from './scope'
 
-import Gasket from '!!raw-loader!./Gasket'
+import chaosGameSource from '!!raw-loader!./chaosGame'
 
-<Playground scope={Scope} noInline={true}>{Gasket}</Playground>
+<Playground scope={Scope} noInline={true}>{chaosGameSource}</Playground>
 
 <hr/>
 

blog/2024-11-15-playing-with-fire/1-introduction/scope.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-
-import randomBiUnit from './biunit';
-import plot from './plot';
-import randomInteger from './randint';
-import Canvas from './Canvas';
-
-const Scope = {
-    React,
-    plot,
-    randomBiUnit,
-    randomInteger,
-    Canvas
-}
-export default Scope;

blog/2024-11-15-playing-with-fire/1-introduction/scope.tsx

@@ -0,0 +1,30 @@
+import React, {useContext, useEffect} from "react";
+import randomBiUnit from './biunit';
+import plot from './plot';
+import randomInteger from './randint';
+import Canvas, {ImageContext} from "../src/Canvas";
+
+interface Props {
+    renderFn: (image: ImageData) => void;
+}
+function Render({renderFn}: Props) {
+    const {width, height, setImage} = useContext(ImageContext);
+    const image = new ImageData(width, height);
+
+    useEffect(() => {
+        renderFn(image);
+        setImage(image);
+    }, []);
+
+    return <></>;
+}
+
+const Scope = {
+    plot,
+    randomBiUnit,
+    randomInteger,
+    Canvas,
+    Gasket: ({renderFn}: Props) =>
+        <Canvas width={600} height={600}><Render renderFn={renderFn}/></Canvas>
+}
+export default Scope;