Annotate WIP

src/app/window-handler.ts

@@ -441,7 +441,7 @@ export class WindowHandler {
       } else {
         this.isMana = false;
       }
-      logger.info('window-handler: isMana: ' + this.isMana);
+        logger.info('window-handler: isMana: ' + this.isMana);
 
       // Injects custom title bar and snack bar css into the webContents
       await injectStyles(this.mainWindow, this.isCustomTitleBar);
@@ -963,14 +963,14 @@ export class WindowHandler {
     }
 
     const parentWindow = BrowserWindow.getFocusedWindow();
-    const MIN_HEIGHT = 312;
+    const MIN_HEIGHT = 320;
-    const MIN_WIDTH = 320;
+    const MIN_WIDTH = 312;
-    const CONTAINER_HEIGHT = 124;
+    const CONTAINER_HEIGHT = 120;
 
     let windowHeight = dimensions?.height
       ? dimensions.height + CONTAINER_HEIGHT
-      : 600;
+      : 320;
-    let windowWidth = dimensions?.width || 800;
+    let windowWidth = dimensions?.width || 312;
 
     if (dimensions && dimensions.height && dimensions.height < MIN_HEIGHT) {
       windowHeight = MIN_HEIGHT + CONTAINER_HEIGHT;

src/renderer/components/color-picker-pill.tsx

@@ -38,7 +38,7 @@ const ColorPickerPill = (props: IColorPickerPillProps) => {
     return (
       <div
         key={color.rgbaColor}
-        className='enclosingCircle'
+        className='EnclosingCircle'
         onClick={chooseColor}
         data-testid={'colorDot ' + color.rgbaColor}
       >
@@ -50,14 +50,14 @@ const ColorPickerPill = (props: IColorPickerPillProps) => {
             cursor: 'pointer',
             border: hasOutline ? border : undefined,
           }}
-          className='colorDot'
+          className='ColorDot'
         />
       </div>
     );
   };
 
   return (
-    <div className='colorPicker'>
+    <div className='ColorPicker'>
       {props.availableColors.map((color) => ColorDot(color))}
     </div>
   );

src/renderer/components/snipping-tool.tsx

@@ -1,9 +1,10 @@
 import { ipcRenderer } from 'electron';
+import { LazyBrush } from 'lazy-brush';
 import * as React from 'react';
 import { i18n } from '../../common/i18n-preload';
 import ColorPickerPill, { IColor } from './color-picker-pill';
 
-const { useState, useCallback, useRef, useEffect } = React;
+const { useState, useRef, useEffect } = React;
 
 enum Tool {
   pen = 'PEN',
@@ -32,6 +33,16 @@ export interface ISvgPath {
   shouldShow: boolean;
 }
 
+const lazy = new LazyBrush({
+  radius: 3,
+  enabled: true,
+  initialPoint: { x: 0, y: 0 },
+});
+const TOP_MENU_HEIGHT = 48;
+const MIN_ANNOTATE_AREA_HEIGHT = 200;
+const MIN_ANNOTATE_AREA_WIDTH = 312;
+const PEN_WIDTH = 5;
+const HIGHLIGHT_WIDTH = 28;
 const availablePenColors: IColor[] = [
   { rgbaColor: 'rgba(0, 0, 40, 1)' },
   { rgbaColor: 'rgba(0, 142, 255, 1)' },
@@ -55,12 +66,9 @@ const SnippingTool = () => {
     height: 600,
     width: 800,
   });
+  const [isDrawing, setIsDrawing] = useState(false);
   const [paths, setPaths] = useState<IPath[]>([]);
   const [chosenTool, setChosenTool] = useState(Tool.pen);
-  const [annotateAreaLocation, setAnnotateAreaLocation] = useState({
-    left: 0,
-    top: 0,
-  });
   const [penColor, setPenColor] = useState('rgba(0, 142, 255, 1)');
   const [highlightColor, setHighlightColor] = useState(
     'rgba(0, 142, 255, 0.64)',
@@ -86,12 +94,6 @@ const SnippingTool = () => {
     };
   }, []);
 
-  const annotateRef = useCallback((domNode) => {
-    if (domNode) {
-      setAnnotateAreaLocation(domNode.getBoundingClientRect());
-    }
-  }, []);
-
   // Hook that alerts clicks outside of the passed ref
   const useClickOutsideExaminer = (
     colorPickerRf: React.RefObject<HTMLDivElement>,
@@ -151,21 +153,27 @@ const SnippingTool = () => {
   };
 
   const clear = () => {
-    const updPaths = [...paths];
+    // Clear logic here
-    updPaths.map((p) => {
+  };
-      p.shouldShow = false;
+
-      return p;
+  const maybeErasePath = (key: string) => {
-    });
+    // erase logic here
-    setPaths(updPaths);
+    return key;
+  };
+
+  const stopDrawing = () => {
+    if (isDrawing) {
+      setIsDrawing(false);
+    }
   };
 
   // Utility functions
 
   const getMousePosition = (e: React.MouseEvent) => {
-    return {
+    // We need to offset for elements in the window that is not the annotate area
-      x: e.pageX - annotateAreaLocation.left,
+    const x = imageDimensions.width >= MIN_ANNOTATE_AREA_WIDTH ? e.pageX : e.pageX - (MIN_ANNOTATE_AREA_WIDTH - imageDimensions.width) / 2;
-      y: e.pageY - annotateAreaLocation.top,
+    const y = imageDimensions.height >= MIN_ANNOTATE_AREA_HEIGHT ? (e.pageY - TOP_MENU_HEIGHT) : (e.pageY - ((MIN_ANNOTATE_AREA_HEIGHT - imageDimensions.height) / 2) - TOP_MENU_HEIGHT);
-    };
+    return { x, y };
   };
 
   const markChosenColor = (colors: IColor[], chosenColor: string) => {
@@ -192,11 +200,153 @@ const SnippingTool = () => {
     return undefined;
   };
 
-  const done = (e) => {
+  const done = () => {
-    getMousePosition(e);
     ipcRenderer.send('upload-snippet', screenSnippet);
   };
 
+  // Render and preparing render functions
+
+  const addHighlightPoint = (paths: IPath[], point: IPoint) => {
+    const activePath = paths[paths.length - 1];
+    const shouldShow = true;
+    const key = 'path' + paths.length;
+    if (!isDrawing) {
+      paths.push({
+        points: [point],
+        color: highlightColor,
+        strokeWidth: HIGHLIGHT_WIDTH,
+        shouldShow,
+        key,
+      });
+    } else {
+      activePath.points.push(point);
+    }
+    return paths;
+  };
+
+  const addPenPoint = (paths: IPath[], point: IPoint) => {
+    const activePath = paths[paths.length - 1];
+    const shouldShow = true;
+    const key = 'path' + paths.length;
+    if (!isDrawing) {
+      paths.push({
+        points: [point],
+        color: penColor,
+        strokeWidth: PEN_WIDTH,
+        shouldShow,
+        key,
+      });
+    } else {
+      activePath.points.push(point);
+    }
+    return paths;
+  };
+
+  const addPathPoint = (e: React.MouseEvent) => {
+    const p = [...paths];
+    const mousePos = getMousePosition(e);
+    lazy.update({ x: mousePos.x, y: mousePos.y });
+    const point: IPoint = lazy.getBrushCoordinates();
+    if (chosenTool === Tool.highlight) {
+      setPaths(addHighlightPoint(p, point));
+    } else {
+      setPaths(addPenPoint(p, point));
+    }
+    if (!isDrawing) {
+      setIsDrawing(true);
+    }
+  };
+
+  const renderPath = (path: ISvgPath) => {
+    return (
+      <path
+        pointerEvents={path.shouldShow ? 'visiblePainted' : 'none'}
+        style={{ display: path.shouldShow ? 'block' : 'none' }}
+        key={path.key}
+        stroke={path.color}
+        strokeLinecap='round'
+        strokeWidth={path.strokeWidth || 5}
+        d={path.svgPath}
+        fill='none'
+        onClick={() => maybeErasePath(path.key)}
+      />
+    );
+  };
+
+  const renderPaths = (paths: ISvgPath[]) => {
+    return paths.map((path) => renderPath(path));
+  };
+
+  const getSvgDot = (point: IPoint) => {
+    const { x, y } = point;
+    // This is the SVG path data for a dot at the location of x, y
+    return (
+      'M ' +
+      x +
+      ' ' +
+      y +
+      ' m -0.1, 0 a 0.1,0.1 0 1,0 0.2,0 a 0.1,0.1 0 1,0 -0.2,0'
+    );
+  };
+
+  const getSvgPath = (points: IPoint[]) => {
+    let stroke = '';
+    if (points && points.length > 0) {
+      // Start point of path
+      stroke = `M ${points[0].x} ${points[0].y}`;
+      let p1: IPoint;
+      let p2: IPoint;
+      let end: IPoint;
+      // Adding points from points array to SVG curve path
+      for (let i = 1; i < points.length - 2; i += 2) {
+        p1 = points[i];
+        p2 = points[i + 1];
+        end = points[i + 2];
+        stroke += ` C ${p1.x} ${p1.y}, ${p2.x} ${p2.y}, ${end.x} ${end.y}`;
+      }
+    }
+    return stroke;
+  };
+
+  const getSvgPathData = (path: IPath) => {
+    const points = path.points;
+    const x = points[0].x;
+    const y = points[0].y;
+    let data: string;
+    // Since a path must got from point A to point B, we need at least two X and Y pairs to render something.
+    // Therefore we start with render a dot, so that the user gets visual feedback from only one X and Y pair.
+    data = getSvgDot({ x, y });
+    data += getSvgPath(points);
+
+    return {
+      svgPath: data,
+      key: path && path.key,
+      strokeWidth: path && path.strokeWidth,
+      color: path && path.color,
+      shouldShow: path && path.shouldShow,
+    };
+  };
+
+  const getSvgPathsData = (paths: IPath[]) => {
+    return paths.map((path) => getSvgPathData(path));
+  };
+
+  // Mouse tracking functions
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (chosenTool === Tool.eraser) {
+      return;
+    }
+    addPathPoint(e);
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (!isDrawing || chosenTool === Tool.eraser) {
+      return;
+    }
+    addPathPoint(e);
+  };
+
   return (
     <div className='SnippingTool' lang={i18n.getLocale()}>
       <header>
@@ -205,6 +355,7 @@ const SnippingTool = () => {
             style={getBorderStyle(Tool.pen)}
             className='ActionButton'
             onClick={usePen}
+            title={i18n.t('Pen', SNIPPING_TOOL_NAMESPACE)()}
           >
             <img src='../renderer/assets/snip-draw.svg' />
           </button>
@@ -212,6 +363,7 @@ const SnippingTool = () => {
             style={getBorderStyle(Tool.highlight)}
             className='ActionButton'
             onClick={useHighlight}
+            title={i18n.t('Highlight', SNIPPING_TOOL_NAMESPACE)()}
           >
             <img src='../renderer/assets/snip-highlight.svg' />
           </button>
@@ -219,6 +371,7 @@ const SnippingTool = () => {
             style={getBorderStyle(Tool.eraser)}
             className='ActionButton'
             onClick={useEraser}
+            title={i18n.t('Erase', SNIPPING_TOOL_NAMESPACE)()}
           >
             <img src='../renderer/assets/snip-erase.svg' />
           </button>
@@ -228,7 +381,7 @@ const SnippingTool = () => {
             {i18n.t('Clear', SNIPPING_TOOL_NAMESPACE)()}
           </button>
         </div>
-      </header>;
+      </header>
 
       {
         shouldRenderPenColorPicker && (
@@ -258,20 +411,34 @@ const SnippingTool = () => {
         )
       }
 
-      <main>
+      <main style={{ minHeight: MIN_ANNOTATE_AREA_HEIGHT }}>
-        <div ref={annotateRef}>
+        <div>
-          <img
+          <svg
-            src={screenSnippet}
+            style={{ cursor: 'crosshair' }}
+            id='annotate'
             width={imageDimensions.width}
             height={imageDimensions.height}
-            className='SnippetImage'
+            onMouseDown={handleMouseDown}
-            alt={i18n.t('Screen snippet', SNIPPING_TOOL_NAMESPACE)()}
+            onMouseUp={stopDrawing}
+            onMouseMove={handleMouseMove}
+            onMouseLeave={stopDrawing}
+          >
+            <image
+              x={0}
+              y={0}
+              id='screenSnippet'
+              xlinkHref={screenSnippet}
+              width={imageDimensions.width}
+              height={imageDimensions.height}
+              className='SnippetImage'
           />
+            {renderPaths(getSvgPathsData(paths))}
+          </svg>
         </div>
       </main>
 
       <footer>
-        <button onClick={done}>
+        <button className='DoneButton' onClick={done}>
           {i18n.t('Done', SNIPPING_TOOL_NAMESPACE)()}
         </button>
       </footer>

src/renderer/styles/snipping-tool.less

@@ -15,6 +15,13 @@ body {
   width: 100%;
 }
 
+button {
+  &:focus {
+    user-select: none;
+    outline: none;
+  }
+}
+
 .SnippingTool:lang(ja-JP) {
   font-family: @font-family-ja;
 
@@ -43,8 +50,8 @@ body {
     flex-direction: row;
     justify-content: center;
     text-align: center;
-    padding: 4px 0;
+    align-items: center;
-    max-height: 48px;
+    height: 48px;
 
     .ActionButton {
       width: 24px;
@@ -65,25 +72,21 @@ body {
       &:first-child {
         margin-left: 0;
       }
-
-      &:focus {
-        outline: none;
-      }
     }
 
     .ClearButton {
       display: block;
-      padding: 4px 10px;
       border: 2px solid #7c7f86;
       border-radius: 16px;
       color: #7c7f86;
       font-weight: 600;
       font-size: 12px;
       line-height: 16px;
-      margin-left: 24px;
       text-transform: uppercase;
       cursor: pointer;
       background-color: #ffffff;
+      height: 24px;
+      width: 68px;
     }
 
     .DrawActions {
@@ -95,22 +98,20 @@ body {
 
     .ClearActions {
       display: flex;
+      flex: none;
       flex-direction: row;
       justify-content: center;
       text-align: center;
       position: absolute;
-      right: 24px;
+      right: 20px;
       align-items: center;
-
-      .ActionButton {
-        img {
-          width: 16px;
-        }
-      }
     }
   }
 
   main {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     text-align: center;
     margin: 0;
     background: linear-gradient(
@@ -119,6 +120,8 @@ body {
         rgba(255, 255, 255, 0.96)
       ),
       #525760;
+      height: 100%;
+      width: 100%;
 
       .SnippetImage {
       width: 100%;
@@ -129,18 +132,17 @@ body {
 
   footer {
     display: flex;
+    align-items: center;
     justify-content: flex-end;
-    padding: 2px 32px 4px 0;
+    height: 72px;
-    max-height: 72px;
 
-    button {
+    .DoneButton {
       box-shadow: none;
       border: none;
       border-radius: 16px;
       font-size: 0.75rem;
       font-weight: 600;
       text-align: center;
-      padding: 8px 24px;
       display: inline-block;
       text-decoration: none;
       line-height: 16px;
@@ -148,27 +150,18 @@ body {
       color: rgba(255, 255, 255, 0.96);
       cursor: pointer;
       text-transform: uppercase;
-      margin: 10px 30px 4px 0;
+      margin-right: 32px;
+      height: 32px;
+      width: 80px;
 
       &:focus {
         box-shadow: 0 0 10px rgba(61, 162, 253, 1);
-        outline: none;
-      }
-    }
-  }
-
-  @media only screen and (max-width: 400px) {
-    header {
-      .ClearActions {
-        position: relative;
-        right: auto;
-        margin-left: 24px;
       }
     }
   }
 }
 
-.colorPicker {
+.ColorPicker {
   display: flex;
   flex-direction: row;
   margin: 4px;
@@ -181,7 +174,7 @@ body {
   border-radius: 24px;
   }
 
-.enclosingCircle {
+.EnclosingCircle {
   width: 24px;
   height: 24px;
   background: #FFFFFF;
@@ -196,7 +189,7 @@ body {
   display: flex;
 }
 
-.colorDot {
+.ColorDot {
   border-radius: 50%;
   flex: none;
   order: 0;

tslint.json

@@ -23,6 +23,7 @@
       true,
       650
     ],
+    "no-shadowed-variable": false,
     "no-trailing-whitespace": true,
     "no-duplicate-variable": true,
     "no-var-keyword": true,