Add doodlin controls (#4)

* add basic doodlability

* tweak css

* remove logs and bad comments

* small format change

* test prettier

* test prettier

* test prettier

* test prettier

* pre commit hooks are running

* small change to format file

* pass linter

* so thats how type checking works

* Doodlintoolbar (#3)

* added drawing toolbar

* Eraser and back button now turn off doodlin

* link up erasing

* remove dead code

* update gitignore

* prettify

Co-authored-by: Nut <[email protected]>

Author: WiFuchs

.eslintcache

@@ -1 +0,0 @@
-[{"/Users/willfuchs/Documents/Cal Poly 20-21/csc 402/client/src/annotator/components/toolbar.js":"1","/Users/willfuchs/Documents/Cal Poly 20-21/csc 402/client/src/annotator/guest.js":"2","/Users/willfuchs/Documents/Cal Poly 20-21/csc 402/client/src/annotator/toolbar.js":"3","/Users/willfuchs/Documents/Cal Poly 20-21/csc 402/client/src/doodle/doodleCanvas.js":"4"},{"size":5021,"mtime":1614880460577,"results":"5","hashOfConfig":"6"},{"size":22213,"mtime":1614880828948,"results":"7","hashOfConfig":"6"},{"size":3684,"mtime":1614881067711,"results":"8","hashOfConfig":"6"},{"size":2861,"mtime":1614880967602,"results":"9","hashOfConfig":"10"},{"filePath":"11","messages":"12","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"zv3vgn",{"filePath":"13","messages":"14","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"itfxzx","/Users/willfuchs/Documents/Cal Poly 20-21/csc 402/client/src/annotator/components/toolbar.js",[],"/Users/willfuchs/Documents/Cal Poly 20-21/csc 402/client/src/annotator/guest.js",[],"/Users/willfuchs/Documents/Cal Poly 20-21/csc 402/client/src/annotator/toolbar.js",[],"/Users/willfuchs/Documents/Cal Poly 20-21/csc 402/client/src/doodle/doodleCanvas.js",[]]

.gitignore

@@ -11,3 +11,5 @@ package-lock.json
 .tlskey.pem
 
 .tox
+
+.eslintcache

src/annotator/components/toolbar.js

@@ -72,15 +72,18 @@ ToolbarButton.propTypes = {
  *   Callback to toggle visibility of highlights in the document.
  * @prop {() => any} toggleSidebar -
  *   Callback to toggle the visibility of the sidebar.
- * @prop {() => any} toggleDoodleability -
- *   Callback to toggle visibility of highlights in the document.
+ * @prop {(object) => any} setDoodleOptions
+ *   Callback to set the options of the doodle canvas
  * @prop {import("preact").Ref<HTMLButtonElement>} [toggleSidebarRef] -
  *   Ref that gets set to the toolbar button for toggling the sidebar.
  *   This is exposed to enable the drag-to-resize functionality of this
  *   button.
  * @prop {boolean} [useMinimalControls] -
  *   If true, all controls are hidden except for the "Close sidebar" button
  *   when the sidebar is open.
+ * @prop {boolean} [drawingToolbarActivated]
+ *
+ * @prop {() => any} drawingToolbarToggle
  */
 
 /**
@@ -97,54 +100,102 @@ export default function Toolbar({
   showHighlights,
   toggleHighlights,
   toggleSidebar,
-  toggleDoodleability,
+  setDoodleOptions,
   toggleSidebarRef,
   useMinimalControls = false,
+  drawingToolbarActivated,
+  drawingToolbarToggle,
 }) {
-  return (
-    <div>
-      {useMinimalControls && isSidebarOpen && (
-        <ToolbarButton
-          className="annotator-toolbar__sidebar-close"
-          label="Close annotation sidebar"
-          icon="cancel"
-          onClick={closeSidebar}
-        />
-      )}
-      {!useMinimalControls && (
-        <ToolbarButton
-          className="annotator-toolbar__sidebar-toggle"
-          buttonRef={toggleSidebarRef}
-          label="Annotation sidebar"
-          icon={isSidebarOpen ? 'caret-right' : 'caret-left'}
-          expanded={isSidebarOpen}
-          onClick={toggleSidebar}
-        />
-      )}
-      {!useMinimalControls && (
-        <div className="annotator-toolbar-buttonbar">
+  if (!drawingToolbarActivated) {
+    return (
+      <div>
+        {useMinimalControls && isSidebarOpen && (
           <ToolbarButton
-            label="Show highlights"
-            icon={showHighlights ? 'show' : 'hide'}
-            selected={showHighlights}
-            onClick={toggleHighlights}
+            className="annotator-toolbar__sidebar-close"
+            label="Close annotation sidebar"
+            icon="cancel"
+            onClick={closeSidebar}
           />
+        )}
+        {!useMinimalControls && (
           <ToolbarButton
-            label={
-              newAnnotationType === 'note' ? 'New page note' : 'New annotation'
-            }
-            icon={newAnnotationType === 'note' ? 'note' : 'annotate'}
-            onClick={createAnnotation}
+            className="annotator-toolbar__sidebar-toggle"
+            buttonRef={toggleSidebarRef}
+            label="Annotation sidebar"
+            icon={isSidebarOpen ? 'caret-right' : 'caret-left'}
+            expanded={isSidebarOpen}
+            onClick={toggleSidebar}
           />
+        )}
+        {!useMinimalControls && (
+          <div className="annotator-toolbar-buttonbar">
+            <ToolbarButton
+              label="Show highlights"
+              icon={showHighlights ? 'show' : 'hide'}
+              selected={showHighlights}
+              onClick={toggleHighlights}
+            />
+            <ToolbarButton
+              label={
+                newAnnotationType === 'note'
+                  ? 'New page note'
+                  : 'New annotation'
+              }
+              icon={newAnnotationType === 'note' ? 'note' : 'annotate'}
+              onClick={createAnnotation}
+            />
+            <ToolbarButton
+              label="New Doodle"
+              icon="doodle"
+              onClick={drawingToolbarToggle}
+            />
+          </div>
+        )}
+      </div>
+    );
+  } else {
+    return (
+      <div>
+        {useMinimalControls && isSidebarOpen && (
           <ToolbarButton
-            label={'New Doodle'}
-            icon={'doodle'}
-            onClick={toggleDoodleability}
+            className="annotator-toolbar__sidebar-close"
+            label="Close annotation sidebar"
+            icon="cancel"
+            onClick={closeSidebar}
           />
-        </div>
-      )}
-    </div>
-  );
+        )}
+        {!useMinimalControls && (
+          <ToolbarButton
+            className="annotator-toolbar__sidebar-toggle"
+            buttonRef={toggleSidebarRef}
+            label="Annotation sidebar"
+            icon={isSidebarOpen ? 'caret-right' : 'caret-left'}
+            expanded={isSidebarOpen}
+            onClick={toggleSidebar}
+          />
+        )}
+        {!useMinimalControls && (
+          <div className="annotator-toolbar-buttonbar">
+            <ToolbarButton
+              label="Stop doodle"
+              icon="close"
+              onClick={drawingToolbarToggle}
+            />
+            <ToolbarButton
+              label="Pen"
+              icon="pen"
+              onClick={() => setDoodleOptions({ tool: 'pen', size: 7 })}
+            />
+            <ToolbarButton
+              label="Eraser"
+              icon="erase"
+              onClick={() => setDoodleOptions({ tool: 'eraser', size: 25 })}
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
 }
 
 Toolbar.propTypes = {
@@ -158,4 +209,7 @@ Toolbar.propTypes = {
   toggleDoodleability: propTypes.func.isRequired,
   toggleSidebarRef: propTypes.any,
   useMinimalControls: propTypes.bool,
+  drawingToolbarActivated: propTypes.bool,
+  drawingToolbarToggle: propTypes.func.isRequired,
+  setDoodleOptions: propTypes.func.isRequired,
 };

src/annotator/guest.js

@@ -356,6 +356,10 @@ export default class Guest extends Delegator {
     crossframe.on('setDoodleability', state => {
       this.setDoodleability(state);
     });
+
+    crossframe.on('setDoodleOptions', state => {
+      this.setDoodleOptions(state);
+    });
   }
 
   destroy() {
@@ -729,4 +733,20 @@ export default class Guest extends Delegator {
       this.doodleCanvasController.doodleable = shouldBeDoodleable;
     }
   }
+
+  /**
+   * Set the brush options for doodlin
+   *
+   * @param {object} options
+   */
+  setDoodleOptions(options) {
+    if (this.doodleCanvasController) {
+      if (options.hasOwnProperty('tool')) {
+        this.doodleCanvasController.tool = options.tool;
+      }
+      if (options.hasOwnProperty('size')) {
+        this.doodleCanvasController.size = options.size;
+      }
+    }
+  }
 }

src/annotator/icons.js

@@ -16,4 +16,7 @@ export default {
   pointer: require('../images/icons/pointer.svg'),
   show: require('../images/icons/show.svg'),
   doodle: require('../images/icons/doodle.svg'),
+  close: require('../images/icons/close.svg'),
+  pen: require('../images/icons/pen.svg'),
+  erase: require('../images/icons/erase.svg'),
 };

src/annotator/sidebar.js

@@ -136,6 +136,7 @@ export default class Sidebar extends Guest {
       setSidebarOpen: open => (open ? this.show() : this.hide()),
       setHighlightsVisible: show => this.setAllVisibleHighlights(show),
       setUserCanDoodle: show => this.setAllDoodleability(show),
+      setDoodleOptions: options => this.setAllDoodleOptions(options),
     });
     this.toolbar.useMinimalControls = config.theme === 'clean';
 
@@ -429,4 +430,13 @@ export default class Sidebar extends Guest {
   setAllDoodleability(shouldBeDoodleable) {
     this.crossframe.call('setDoodleability', shouldBeDoodleable);
   }
+
+  /**
+   * (CreativeNTR) Set the doodle options
+   *
+   * @param {object} options
+   */
+  setAllDoodleOptions(options) {
+    this.crossframe.call('setDoodleOptions', options);
+  }
 }

src/annotator/toolbar.js

@@ -8,6 +8,7 @@ import Toolbar from './components/toolbar';
  * @prop {(open: boolean) => any} setSidebarOpen
  * @prop {(visible: boolean) => any} setHighlightsVisible
  * @prop {(doodleable: boolean) => any} setUserCanDoodle
+ * @prop {(doodleable: boolean) => any} setDoodleOptions
  */
 
 /**
@@ -27,13 +28,16 @@ export class ToolbarController {
       setSidebarOpen,
       setHighlightsVisible,
       setUserCanDoodle,
+      setDoodleOptions,
     } = options;
 
     this._container = container;
     this._container.className = 'annotator-toolbar';
 
     this._useMinimalControls = false;
 
+    this._drawingToolbar = false;
+
     /** @type {'annotation'|'note'} */
     this._newAnnotationType = 'note';
 
@@ -45,9 +49,14 @@ export class ToolbarController {
     this._toggleSidebar = () => setSidebarOpen(!this._sidebarOpen);
     this._toggleHighlights = () =>
       setHighlightsVisible(!this._highlightsVisible);
-    this._toggleDoodleability = () => {
-      this._doodleable = !this._doodleable;
+    this._toggleDoodleToolbar = () => {
+      this._drawingToolbar = !this._drawingToolbar;
+      this._doodleable = this._drawingToolbar;
       setUserCanDoodle(this._doodleable);
+      this.render();
+    };
+    this._setDoodleOptions = options => {
+      setDoodleOptions(options);
     };
     this._createAnnotation = () => {
       createAnnotation();
@@ -136,7 +145,9 @@ export class ToolbarController {
         toggleSidebar={this._toggleSidebar}
         toggleSidebarRef={this._sidebarToggleButton}
         useMinimalControls={this.useMinimalControls}
-        toggleDoodleability={this._toggleDoodleability}
+        setDoodleOptions={this._setDoodleOptions}
+        drawingToolbarActivated={this._drawingToolbar}
+        drawingToolbarToggle={this._toggleDoodleToolbar}
       />,
       this._container
     );

src/doodle/canvas.js

@@ -2,13 +2,6 @@ import { createElement } from 'preact';
 import { useRef, useEffect } from 'preact/hooks';
 import propTypes from 'prop-types';
 
-//TODO not sure how to enforce this type...
-/**
- * @typedef Line
- * @property {string} tool - The tool used to draw this line.
- * @property {any} points
- */
-
 const Canvas = ({
   width,
   height,
@@ -28,14 +21,13 @@ const Canvas = ({
     // Move to the first point, begin the line
     ctx.beginPath();
     ctx.moveTo(startX, startY);
+    ctx.lineWidth = line.size;
 
     if (line.tool === 'pen') {
       ctx.globalCompositeOperation = 'source-over';
-      ctx.lineWidth = line.size;
       ctx.strokeStyle = line.color;
     } else {
       ctx.globalCompositeOperation = 'destination-out';
-      ctx.lineWidth = 25;
     }
 
     // Draw the rest of the lines
@@ -48,7 +40,6 @@ const Canvas = ({
   };
 
   useEffect(() => {
-    // for testing
     const canvas = canvasRef.current;
     const ctx = canvas.getContext('2d');
 

src/doodle/doodleCanvas.js

@@ -59,6 +59,7 @@ const DoodleCanvas = ({ tool, size, active, attachedElement }) => {
     const newLine = {
       tool: curLine.tool,
       color: curLine.color,
+      size: curLine.size,
       points: [[xPos, yPos], ...curLine.points],
     };
 

src/doodle/doodleController.js

@@ -23,6 +23,7 @@ export class DoodleController {
    */
   set tool(toolType) {
     this._tool = toolType;
+    this.render();
   }
 
   get tool() {
@@ -36,6 +37,7 @@ export class DoodleController {
    */
   set size(newSize) {
     this._size = newSize;
+    this.render();
   }
 
   get size() {