SDA-2533 Add clear, erase and done functionality. Further optimizations of logic.

spec/__snapshots__/snippingTool.spec.tsx.snap

@@ -63,19 +63,19 @@ exports[`Snipping Tool should render correctly 1`] = `
     >
       <AnnotateArea
         chosenTool="PEN"
-        data-testid="annotate-component"highlightColor="rgba(0, 142, 255, 0.64)"
-        imageDimensions={
-          Object {
-            "height": 600,
-            "width": 800,
-          }
+        data-testid="annotate-component"
+      highlightColor="rgba(0, 142, 255, 0.64)"
+      imageDimensions={
+        Object {
+          "height": 600,
+          "width": 800,
         }
-        onChange={[Function]}
-        paths={Array []}
-        penColor="rgba(0, 142, 255, 1)"
-        screenSnippetPath="Screen-Snippet"
-      />
-    </div>
+      }
+      onChange={[Function]}
+      paths={Array []}
+      penColor="rgba(0, 142, 255, 1)"
+      screenSnippetPath="Screen-Snippet"
+    /></div>
   </main>
   <footer>
     <button

src/app/window-handler.ts

@@ -961,7 +961,6 @@ export class WindowHandler {
     const parentWindow = BrowserWindow.getFocusedWindow();
     const MIN_HEIGHT = 312;
     const MIN_WIDTH = 320;
-    const OS_PADDING = 25;
     const CONTAINER_HEIGHT = 175;
     const OS_PADDING = 25;
     let height: number = dimensions?.height || 0;

src/renderer/components/snipping-tool.tsx

@@ -304,8 +304,9 @@ const SnippingTool: React.FunctionComponent<ISnippingToolProps> = ({ existingPat
       <main>
         <div className='imageContainer'>
           <AnnotateArea
-            data-testid='annotate-component'paths={paths}
-            highlightColor={highlightColor.rgbaColor}
+            data-testid='annotate-component'
+          paths={paths}
+          highlightColor={highlightColor.rgbaColor}
             penColor={penColor.rgbaColor}
             onChange={setPaths}
             imageDimensions={imageDimensions}