Merge pull request #66 from deco-finter/fix/fill-tool-leak

Fix fill tool leak
deco-finter · Oct 16, 2021 · 6a6f22d · 6a6f22d
2 parents 59bda1d + 47180be
commit 6a6f22d
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 20 deletions.
diff --git a/fableous-fe/src/components/canvas/Canvas.tsx b/fableous-fe/src/components/canvas/Canvas.tsx
@@ -14,6 +14,7 @@ import React, {
 } from "react";
 import cloneDeep from "lodash.clonedeep";
 import {
+  clearCanvas,
   convHEXtoRGBA,
   getTextBounds,
   scaleDownXY,
@@ -252,7 +253,7 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
                 expandLeft = false;
               }
             }
-            if (x < width) {
+            if (x < width - 1) {
               if (checkPixel(pixel + 4, startColor) && !expandRight) {
                 stack.push([x + 1, y]);
                 expandRight = true;
@@ -311,8 +312,7 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
       const ctx = canvasRef.current.getContext(
         "2d"
       ) as CanvasRenderingContext2D;
-      const { width, height } = canvasRef.current;
-      ctx.clearRect(0, 0, width, height);
+      clearCanvas(canvasRef);
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
       Object.entries(textShapesRef.current).forEach(([id, shape]) => {
@@ -548,12 +548,7 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
           "2d"
         ) as CanvasRenderingContext2D;
         if (!newCheckpoint) {
-          ctx.clearRect(
-            0,
-            0,
-            canvasRef.current.width,
-            canvasRef.current.height
-          );
+          clearCanvas(canvasRef);
           setTextShapes({});
         } else if (
           newCheckpoint.tool === ToolMode.Paint ||
@@ -608,11 +603,7 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
     );
 
     const resetCanvas = () => {
-      const ctx = canvasRef.current.getContext(
-        "2d"
-      ) as CanvasRenderingContext2D;
-      const { width, height } = canvasRef.current;
-      ctx.clearRect(0, 0, width, height);
+      clearCanvas(canvasRef);
       setAudioPaths([]);
       setTextShapes({});
       setTextId(1);
@@ -865,18 +856,18 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [role, wsConn, adjustCanvasSize]);
 
-    // cleanup before moving to next page
-    useEffect(() => {
-      resetCanvas();
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [pageNum]);
-
     // workaround to recalculate width when canvas appears or becomes hidden
     useEffect(() => {
       adjustCanvasSize();
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [adjustCanvasSize, isShown]);
 
+    // cleanup before moving to next page
+    useEffect(() => {
+      resetCanvas();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pageNum, isShown]);
+
     // initialize text event listener
     useEffect(() => {
       if (isShown && role !== pb.ControllerRole.HUB) {

diff --git a/fableous-fe/src/components/canvas/helpers.ts b/fableous-fe/src/components/canvas/helpers.ts
@@ -68,3 +68,17 @@ export const getTextBounds = (
   }
   return [0, 0, 0, 0];
 };
+
+export const clearCanvas = (canvasRef: MutableRefObject<HTMLCanvasElement>) => {
+  const ctx = canvasRef.current.getContext("2d");
+  if (ctx) {
+    const { width, height } = canvasRef.current;
+    ctx.clearRect(0, 0, width, height);
+    ctx.beginPath();
+    ctx.strokeStyle = "white";
+    ctx.lineWidth = 200;
+    ctx.rect(-100, -100, width + 200, height + 200);
+    ctx.stroke();
+    ctx.closePath();
+  }
+};