Commit 6237563e authored by Grant's avatar Grant
Browse files

fix blank canvas 

(don't abuse refs)
parent 21480eb7

packages/client/src/components/Overlay/BlankOverlay.tsx

+14 −15
Original line number Diff line number Diff line 
import { useEffect, useRef } from "react";

import { useCallback, useEffect, useRef } from "react";

import { useAppContext } from "../../contexts/AppContext";

import { KeybindManager } from "../../lib/keybinds";

import { getRenderer } from "../../lib/utils";



export const BlankOverlay = () => {

  const { blankOverlay, setBlankOverlay } = useAppContext();

  const canvasRef = useRef<HTMLCanvasElement | null>(null);



  useEffect(() => {

    const handleKeybind = () => {
@@ -20,27 +19,27 @@ export const BlankOverlay = () => { 
  }, [setBlankOverlay]);



  useEffect(() => {

    if (!canvasRef.current) {

      return;

    }



    let timeout = setTimeout(() => {

      if (!canvasRef.current) return;



      getRenderer().useCanvas(canvasRef.current, "blank");

    }, 1000);



    return () => {

      clearTimeout(timeout);

      console.log("[BlankOverlay] element unmounted, removing renderer");

      getRenderer().removeCanvas("blank");

    };

  }, [canvasRef.current]);

  }, []);



  const handleBlank = useCallback((node: HTMLCanvasElement | null) => {

    if (node) {

      console.log("[BlankOverlay] attached to ref", node);

      getRenderer().useCanvas(node, "blank");

    } else {

      console.log("[BlankOverlay] detaching from ref");

      getRenderer().removeCanvas("blank");

    }

  }, []);



  return (

    <canvas

      id="blank-overlay"

      className="board-overlay no-interact pixelate"

      ref={(r) => (canvasRef.current = r)}

      ref={handleBlank}

      width="1000"

      height="1000"

      style={{

packages/client/src/lib/renderer.ts

+8 −4
Original line number Diff line number Diff line
@@ -71,10 +71,14 @@ class WorkerRenderer extends Renderer implements ICanvasRenderer { 
  }



  useCanvas(canvas: HTMLCanvasElement, role: CanvasRole): void {

    try {

      const offscreen = canvas.transferControlToOffscreen();

      this.worker.postMessage({ type: "canvas", role, canvas: offscreen }, [

        offscreen,

      ]);

    } catch (e) {

      console.error("Failed to capture canvas", canvas, role, e);

    }

  }



  removeCanvas(role: CanvasRole): void {