Made canvas sketch's redrawSketch public and updated react component to call it when redraw incrementer changes

Author: Kevin Busch

src/atoms/forms/canvas-sketch/canvas-sketch.ts

@@ -137,7 +137,22 @@ class CanvasSketch {
      */
     public redrawCurrentState(): void {
         this._redrawBackgroundImage();
-        this._redrawSketch();
+        this.redrawSketch();
+    }
+
+    /**
+     * Clears the sketch canvas and redraws all current stack objects to it
+     */
+    public redrawSketch(): void {
+        if (!this._isBrowserSupported) {
+            return;
+        }
+
+        this._clearSketchCanvas();
+
+        const stackToDraw = this._getStackToDraw();
+
+        this._drawObjects(stackToDraw);
     }
 
     /**
@@ -172,7 +187,7 @@ class CanvasSketch {
         this._config.objectStack = objects;
         this._config.currentObjectIndex = newCurrentObjectIndex;
 
-        this._redrawSketch();
+        this.redrawSketch();
     }
 
     /**
@@ -415,14 +430,14 @@ class CanvasSketch {
         this._toolConfig = {
             canvas: this._config.sketchCanvas,
             context: this._sketchContext,
-            redraw: this._redrawSketch,
+            redraw: this.redrawSketch,
         };
         this._drawToolConfig = Object.assign({
             onFinishStroke: (strokeSettings: CanvasDrawToolSettings) => { },
             uiSettings: this._drawToolUiSettings,
         }, this._toolConfig);
 
-        this.imageTool = new ImageCanvasTool(Object.assign({}, this._toolConfig, { redraw: this._redrawSketch }));
+        this.imageTool = new ImageCanvasTool(Object.assign({}, this._toolConfig, { redraw: this.redrawSketch }));
         this.lineDrawTool = new LineCanvasDrawTool(this._drawToolConfig);
         this.pencilDrawTool = new PencilCanvasDrawTool(this._drawToolConfig);
         this.panTool = new PanCanvasTool(Object.assign({}, this._toolConfig, { panTo: this._panTo }));
@@ -471,21 +486,6 @@ class CanvasSketch {
         }
     }
 
-    /**
-     * Clears the sketch canvas and redraws all current stack objects to it
-     */
-    private _redrawSketch(): void {
-        if (!this._isBrowserSupported) {
-            return;
-        }
-
-        this._clearSketchCanvas();
-
-        const stackToDraw = this._getStackToDraw();
-
-        this._drawObjects(stackToDraw);
-    }
-
     /**
      * Clears the background image canvas and redraws the background image to it
      */

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

@@ -191,18 +191,17 @@ const ReactCanvasSketch: React.FunctionComponent<ReactCanvasSketchProps> = (
         props.value.objects,
     ]);
 
+    const { redrawIncrement } = props;
     // redraw the sketch canvas when redraw increment changes
     useEffect(() => {
         if (canvasSketch == null) {
             return;
         }
 
-        const { value } = { ...props };
-
-        canvasSketch.redrawSketchAt(value.objects, value.currentObjectIndex);
+        canvasSketch.redrawSketch();
     }, [
-        props,
-        canvasSketch
+        canvasSketch,
+        redrawIncrement,
     ]);
 
     // redraw the background image when it changes