Moved props in story to local variables so they aren't reinitialized every time effectively clearing out the canvas

Author: Kevin Busch

src/atoms/forms/canvas-sketch/react-canvas-sketch.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { text, number, select, boolean } from "@storybook/addon-knobs";
-import { ReactCanvasSketch } from "./react-canvas-sketch";
+import { ReactCanvasSketch, ReactCanvasSketchValue } from "./react-canvas-sketch";
 import { CanvasDrawToolSettings } from "./tools/base-canvas-draw-tool";
 import { CanvasToolType } from "./enums/canvas-tool-type";
 
@@ -9,6 +9,14 @@ export default {
     title: "Atoms | Forms / Canvas Sketch",
 };
 
+const value: ReactCanvasSketchValue = {
+    currentObjectIndex: -1,
+    objects: []
+}
+
+const onAddedStroke: (strokeSettings: CanvasDrawToolSettings) => void =
+    (strokeSettings: CanvasDrawToolSettings) => { console.log(`STORYBOOK MESSAGE - onAddedStroke: ${JSON.stringify(strokeSettings)}`) };
+
 const canvasToolTypes = [
     CanvasToolType.line,
     CanvasToolType.pan,
@@ -23,12 +31,12 @@ export const reactCanvasSketch = () => (
         className={text("Class Name", "")}
         containerHeight={number("Container Height", 700)}
         containerWidth={number("Container Width", 700)}
-        onAddedStroke={(strokeSettings: CanvasDrawToolSettings) => { console.log(`STORYBOOK - onAddedStroke: ${JSON.stringify(strokeSettings)}`) }}
+        onAddedStroke={onAddedStroke}
         redrawIncrement={number("Redraw Trigger Increment", 1)}
         canvasToolType={select("Tool Type", canvasToolTypes, CanvasToolType.pencil)}
         showCanvasBorder={boolean("Show Border", true)}
         toolWidth={number("Tool Width", 1)}
         toolColor={text("Tool Color", "#000000")}
-        value={{ currentObjectIndex: -1, objects: [] }}
+        value={value}
     />
 );

src/atoms/forms/canvas-sketch/react-canvas-sketch.tsx

@@ -120,6 +120,7 @@ const ReactCanvasSketch: React.FunctionComponent<ReactCanvasSketchProps> = (
             // already initialized, bail
             return;
         }
+        console.log("useEffect: Initializing");
 
         const {
             backgroundImageUrl,
@@ -167,6 +168,7 @@ const ReactCanvasSketch: React.FunctionComponent<ReactCanvasSketchProps> = (
         if (canvasSketch == null) {
             return;
         }
+        console.log("useEffect: dimensions of container or canvas change");
         canvasSketch.redrawCurrentState();
     }, [
         canvasSketch,
@@ -181,32 +183,32 @@ const ReactCanvasSketch: React.FunctionComponent<ReactCanvasSketchProps> = (
         if (canvasSketch == null) {
             return;
         }
-
+        console.log("useEffect: current object index or objects changes");
         canvasSketch.redrawSketchAt(props.value.objects, props.value.currentObjectIndex);
     }, [
         canvasSketch,
         props.value.currentObjectIndex,
         props.value.objects,
     ]);
 
-    const { redrawIncrement } = props;
     // redraw the sketch canvas when redraw increment changes
     useEffect(() => {
         if (canvasSketch == null) {
             return;
         }
-
+        console.log("useEffect: redrawIncrement changes");
         canvasSketch.redrawSketch();
     }, [
         canvasSketch,
-        redrawIncrement,
+        props.redrawIncrement,
     ]);
 
     // redraw the background image when it changes
     useEffect(() => {
         if (canvasSketch == null) {
             return;
         }
+        console.log("useEffect: background image when it changes");
         canvasSketch.redrawBackgroundImageUsing(props.backgroundImageUrl);
     }, [
         props.backgroundImageUrl,
@@ -218,6 +220,7 @@ const ReactCanvasSketch: React.FunctionComponent<ReactCanvasSketchProps> = (
         if (canvasSketch == null) {
             return;
         }
+        console.log("useEffect: on added stroke when changes");
         canvasSketch.setOnAddedToolStroke(props.onAddedStroke);
     }, [
         props.onAddedStroke,
@@ -229,6 +232,7 @@ const ReactCanvasSketch: React.FunctionComponent<ReactCanvasSketchProps> = (
         if (canvasSketch == null) {
             return;
         }
+        console.log("useEffect: tool color when it changes");
         canvasSketch.setToolColor(props.toolColor);
     }, [
         props.toolColor,
@@ -240,6 +244,7 @@ const ReactCanvasSketch: React.FunctionComponent<ReactCanvasSketchProps> = (
         if (canvasSketch == null) {
             return;
         }
+        console.log("useEffect: tool width when it changes");
         canvasSketch.setToolWidth(props.toolWidth);
     }, [
         props.toolWidth,
@@ -251,6 +256,7 @@ const ReactCanvasSketch: React.FunctionComponent<ReactCanvasSketchProps> = (
         if (canvasSketch == null) {
             return;
         }
+        console.log("useEffect: selected tool when it changes");
         canvasSketch.setSelectedTool(props.canvasToolType);
     }, [
         props.canvasToolType,