Added border feature

Author: Kevin Busch

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { text, number, select } from "@storybook/addon-knobs";
+import { text, number, select, boolean } from "@storybook/addon-knobs";
 import { ReactCanvasSketch } from "./react-canvas-sketch";
 import { CanvasDrawToolSettings } from "./tools/base-canvas-draw-tool";
 import { CanvasToolType } from "./enums/canvas-tool-type";
@@ -17,7 +17,7 @@ const canvasToolTypes = [
 
 export const reactCanvasSketch = () => (
     <ReactCanvasSketch
-        backgroundImageUrl={text("Background Image URL", "https://images-na.ssl-images-amazon.com/images/I/51zLZbEVSTL._AC_SL1200_.jpg")}
+        backgroundImageUrl={text("Background Image URL", "https://rlv.zcache.com/yellow_emoji_birthday_party_happy_face_symbol_classic_round_sticker-r821c9ad7d35943228f0f0e973050e063_0ugmm_8byvr_704.jpg")}
         canvasHeight={number("Canvas Height", 500)}
         canvasWidth={number("Canvas Width", 1000)}
         className={text("Class Name", "")}
@@ -26,6 +26,7 @@ export const reactCanvasSketch = () => (
         onAddedStroke={(strokeSettings: CanvasDrawToolSettings) => { console.log(`onAddedStroke: ${JSON.stringify(strokeSettings)}`) }}
         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", "FFFFFF")}
         value={{ currentObjectIndex: -1, objects: [] }}

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

@@ -26,6 +26,7 @@ export interface ReactCanvasSketchProps {
     onAddedStroke: (strokeSettings: CanvasDrawToolSettings) => void;
     redrawIncrement: number;
     canvasToolType: CanvasToolType;
+    showCanvasBorder: boolean;
     toolWidth: number;
     toolColor: string;
     value: ReactCanvasSketchValue;
@@ -187,6 +188,9 @@ const ReactCanvasSketch: React.FunctionComponent<ReactCanvasSketchProps> = (
     const canvasStyles: React.CSSProperties = {
         position: "absolute",
     };
+    if (props.showCanvasBorder) {
+        canvasStyles.border = "1px dashed black";
+    }
 
     return (
         <div