Added color and size toolbars (#12)

Author: nateirwin25

src/annotator/components/test/toolbar-test.js

@@ -19,6 +19,7 @@ describe('Toolbar', () => {
         showHighlights={false}
         newAnnotationType="note"
         useMinimalControls={false}
+        setDoodleOptions={noop}
         {...props}
       />
     );

src/annotator/components/toolbar.js

@@ -1,6 +1,7 @@
 import { SvgIcon } from '@hypothesis/frontend-shared';
 import propTypes from 'prop-types';
 import { createElement } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
 
 /**
  * @param {Object} props
@@ -109,6 +110,20 @@ export default function Toolbar({
   drawingToolbarActivated,
   drawingToolbarToggle,
 }) {
+  const small = 1;
+  const medium = 5;
+  const large = 10;
+
+  const [toolSize, setToolSize] = useState(medium);
+
+  const [tool, setTool] = useState('pen');
+
+  const [color, setColor] = useState('red');
+
+  useEffect(() => {
+    setDoodleOptions({ tool: tool, size: toolSize, color: color });
+  }, [toolSize, tool, color, setDoodleOptions]);
+
   if (!drawingToolbarActivated) {
     return (
       <div>
@@ -187,13 +202,94 @@ export default function Toolbar({
             <ToolbarButton
               label="Pen"
               icon="pen"
-              onClick={() => setDoodleOptions({ tool: 'pen', size: 7 })}
+              onClick={() => {
+                setTool('pen');
+              }}
             />
             <ToolbarButton
               label="Eraser"
               icon="erase"
-              onClick={() => setDoodleOptions({ tool: 'eraser', size: 25 })}
+              onClick={() => {
+                setTool('eraser');
+              }}
             />
+            <button
+              className="popup annotator-toolbar-button size selected"
+              onClick={e => {
+                //@ts-ignore
+                e.target?.querySelector('#myPopup').classList.toggle('show');
+                //@ts-ignore
+                e.target?.parentElement
+                  .querySelector('.color')
+                  .querySelector('#myPopup')
+                  .classList.remove('show');
+              }}
+              aria-label="Brush Size"
+            >
+              <SvgIcon name="sizes-icon" className="svgicon" />
+              <span className="popuptext" id="myPopup">
+                <ToolbarButton
+                  label="Large"
+                  icon="circle-large"
+                  onClick={() => {
+                    setToolSize(large);
+                  }}
+                />
+                <ToolbarButton
+                  label="Medium"
+                  icon="circle-medium"
+                  onClick={() => {
+                    setToolSize(medium);
+                  }}
+                />
+                <ToolbarButton
+                  label="Small"
+                  icon="circle-small"
+                  className="annotator-toolbar-button smallSelector"
+                  onClick={() => {
+                    setToolSize(small);
+                  }}
+                />
+              </span>
+            </button>
+            <button
+              className="popup annotator-toolbar-button color"
+              onClick={e => {
+                //@ts-ignore
+                e.target?.querySelector('#myPopup').classList.toggle('show');
+                //@ts-ignore
+                e.target?.parentElement
+                  .querySelector('.size')
+                  .querySelector('#myPopup')
+                  .classList.remove('show');
+              }}
+              aria-label="Brush Color"
+            >
+              <SvgIcon name="color-icon" className="svgicon" />
+              <span className="popuptext" id="myPopup">
+                <ToolbarButton
+                  label="Red"
+                  icon="red-icon"
+                  onClick={() => {
+                    setColor('red');
+                  }}
+                />
+                <ToolbarButton
+                  label="Green"
+                  icon="green-icon"
+                  onClick={() => {
+                    setColor('green');
+                  }}
+                />
+                <ToolbarButton
+                  label="Blue"
+                  icon="blue-icon"
+                  onClick={() => {
+                    setColor('blue');
+                  }}
+                />
+              </span>
+            </button>
             <ToolbarButton
               label="Save"
               icon="save"

src/annotator/guest.js

@@ -768,6 +768,9 @@ export default class Guest extends Delegator {
       if (options.hasOwnProperty('size')) {
         this.doodleCanvasController.size = options.size;
       }
+      if (options.hasOwnProperty('color')) {
+        this.doodleCanvasController.color = options.color;
+      }
     }
   }
 

src/annotator/icons.js

@@ -20,4 +20,12 @@ export default {
   pen: require('../images/icons/pen.svg'),
   erase: require('../images/icons/erase.svg'),
   save: require('../images/icons/save.svg'),
+  'circle-small': require('../images/icons/circleSmall.svg'),
+  'circle-medium': require('../images/icons/circleMedium.svg'),
+  'circle-large': require('../images/icons/circleLarge.svg'),
+  'red-icon': require('../images/icons/red.svg'),
+  'blue-icon': require('../images/icons/blue.svg'),
+  'green-icon': require('../images/icons/green.svg'),
+  'color-icon': require('../images/icons/palette.svg'),
+  'sizes-icon': require('../images/icons/sizes.svg'),
 };

src/annotator/sidebar.js

@@ -147,6 +147,7 @@ export default class Sidebar extends Guest {
       {
         tool: 'pen',
         size: 5,
+        color: 'red',
       }
     );
 

src/doodle/doodleCanvas.js

@@ -8,6 +8,7 @@ import propTypes from 'prop-types';
  * @prop {string} tool - The name of the tool that is being used. One of {'pen'|'eraser'}.
  * @prop {number} size - The size of the brush.
  * @prop {boolean} active - Whether the canvas can be doodled on at this time
+ * @prop {string} color - The color of the brush
  * @prop {HTMLElement} attachedElement - Which element the DoodleCanvas should cover.
  * @prop {Array<import('../types/api').DoodleLine>} lines - An array of lines that compose this doodle.
  * @prop {Function} setLines - A function to set the lines
@@ -26,6 +27,7 @@ const DoodleCanvas = ({
   tool,
   size,
   active,
+  color,
   attachedElement,
   lines,
   setLines,
@@ -54,7 +56,7 @@ const DoodleCanvas = ({
     setLines([
       {
         tool: tool,
-        color: 'red',
+        color: color,
         size: size,
         points: [[e.offsetX, e.offsetY]],
       },
@@ -126,6 +128,7 @@ DoodleCanvas.propTypes = {
   active: propTypes.bool.isRequired,
   lines: propTypes.array.isRequired,
   setLines: propTypes.func.isRequired,
+  color: propTypes.string.isRequired,
   attachedElement: propTypes.any.isRequired,
 };
 

src/doodle/doodleController.js

@@ -8,14 +8,15 @@ export class DoodleController {
    * @param {any} options
    */
   constructor(container, options) {
-    const { tool, size } = options;
+    const { tool, size, color } = options;
     this._lines = [];
     this._savedLines = [];
     this._newLines = [];
 
     this._container = container === null ? document.body : container;
     this._tool = tool;
     this._size = size;
+    this._color = color;
 
     this._doodleable = false;
 
@@ -63,6 +64,15 @@ export class DoodleController {
     this.render();
   }
 
+  set color(newColor) {
+    this._color = newColor;
+    this.render();
+  }
+
+  get color() {
+    return this._color;
+  }
+
   get size() {
     return this._size;
   }
@@ -99,6 +109,7 @@ export class DoodleController {
           active={this._doodleable}
           lines={this.newLines}
           setLines={setLines}
+          color={this._color}
         />
         <DisplayCanvas lines={this.savedLines} container={this._container} />
       </Fragment>,