Load doodles (#11)

* janky but functional saving

* added a test

* switch to save icon

* 2 controllers

* refactor into one controller

* janky but functional saving

* added a test

* switch to save icon

* 2 controllers

* refactor into one controller

* canvas clearing bug found

* fix canvas rendering issues

Author: WiFuchs

src/annotator/components/toolbar.js

@@ -196,7 +196,7 @@ export default function Toolbar({
             />
             <ToolbarButton
               label="Save"
-              icon="erase"
+              icon="save"
               onClick={() => saveDoodle()}
             />
           </div>

src/annotator/guest.js

@@ -306,6 +306,7 @@ export default class Guest extends Delegator {
     });
 
     this.subscribe('annotationsLoaded', annotations => {
+      this.loadDoodles(annotations.filter(this.isDoodleAnnotation));
       annotations.map(annotation => this.anchor(annotation));
     });
   }
@@ -364,6 +365,10 @@ export default class Guest extends Delegator {
     crossframe.on('saveCurrentDoodle', () => {
       this.saveCurrentDoodle();
     });
+
+    crossframe.on('clearDoodleCanvas', () => {
+      this.clearDoodleCanvas();
+    });
   }
 
   destroy() {
@@ -773,9 +778,64 @@ export default class Guest extends Delegator {
     if (this.doodleCanvasController) {
       this.createAnnotation({
         $doodle: true,
-        doodleLines: this.doodleCanvasController.lines,
+        doodleLines: this.doodleCanvasController.newLines,
       });
-      this.doodleCanvasController.lines = [];
+      // removed clearing lines from here because of bug when you try to save unsuccessfully (b/c not logged in) clearing your doodle
+    }
+  }
+
+  /**
+   * Clear the doodle canvas
+   */
+  clearDoodleCanvas() {
+    if (this.doodleCanvasController) {
+      this.doodleCanvasController.saveLines();
+    }
+  }
+
+  /**
+   *
+   * @param {*} annotation
+   * @returns true if the annotation is a doodleAnnotation
+   */
+
+  isDoodleAnnotation(annotation) {
+    // If any of the targets have a DoodleSelector, this is a doodle annotation. Otherwise, it is not.
+    if (annotation.target) {
+      for (let targ of annotation.target) {
+        // not all targets have selectors at this point
+        if (targ.selector) {
+          for (let selector of targ.selector) {
+            if (selector.type === 'DoodleSelector') {
+              return true;
+            }
+          }
+        }
+      }
+    }
+    return false;
+  }
+
+  loadDoodles(doodleAnnotations) {
+    // First, make sure there are doodleAnnotations and a Controller
+    if (!doodleAnnotations.length || !this.doodleCanvasController) {
+      return;
+    }
+
+    // Then, load the lines into our doodleCanvasController.
+    let newLines = [];
+    for (let doodle of doodleAnnotations) {
+      for (let targ of doodle.target) {
+        for (let sel of targ.selector) {
+          if (sel.type === 'DoodleSelector') {
+            newLines = [...newLines, sel.line];
+          }
+        }
+      }
     }
+    this.doodleCanvasController.savedLines = [
+      ...this.doodleCanvasController.savedLines,
+      ...newLines,
+    ];
   }
 }

src/annotator/icons.js

@@ -19,4 +19,5 @@ export default {
   close: require('../images/icons/close.svg'),
   pen: require('../images/icons/pen.svg'),
   erase: require('../images/icons/erase.svg'),
+  save: require('../images/icons/save.svg'),
 };

src/annotator/sidebar.js

@@ -141,6 +141,7 @@ export default class Sidebar extends Guest {
     });
     this.toolbar.useMinimalControls = config.theme === 'clean';
 
+    // Set up the canvases for displaying and creating doodles
     this.doodleCanvasController = new DoodleController(
       document.getElementById('main-content'),
       {

src/annotator/test/guest-test.js

@@ -184,6 +184,7 @@ describe('Guest', () => {
 
       beforeEach(() => {
         guest = createGuest();
+        guest.loadDoodles = sinon.stub();
         options = CrossFrame.lastCall.args[1];
       });
 
@@ -205,6 +206,36 @@ describe('Guest', () => {
         assert.calledWith(guest.anchor, ann2);
       });
 
+      it('calls loadDoodles with only doodle annotations on "annotationsLoaded"', () => {
+        const ann1 = {
+          id: 1,
+          $tag: 'tag1',
+          target: [
+            {
+              selector: [
+                {
+                  type: 'DoodleSelector',
+                  line: {
+                    points: [
+                      [1, 1],
+                      [2, 2],
+                    ],
+                    size: 5,
+                    color: '#FF0000',
+                    tool: 'pen',
+                  },
+                },
+              ],
+            },
+          ],
+        };
+        const ann2 = { id: 2, $tag: 'tag2' };
+        sandbox.stub(guest, 'anchor');
+        options.emit('annotationsLoaded', [ann1, ann2]);
+        assert.calledOnce(guest.loadDoodles);
+        assert.calledWith(guest.loadDoodles, [ann1]);
+      });
+
       it('proxies all other events into the annotator event system', () => {
         const fooHandler = sandbox.stub();
         const barHandler = sandbox.stub();

src/doodle/canvas.js

@@ -42,6 +42,7 @@ const Canvas = ({
   useEffect(() => {
     const canvas = canvasRef.current;
     const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
     // Draw all of the lines (reverse order so that erasing works)
     for (let i = lines.length - 1; i >= 0; i--) {

src/doodle/displayCanvas.js

@@ -0,0 +1,40 @@
+import { createElement } from 'preact';
+import { Canvas } from './canvas';
+import propTypes from 'prop-types';
+
+const DisplayCanvas = ({ container, lines }) => {
+  const boundingRect = container.getBoundingClientRect();
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: boundingRect.top + window.scrollY,
+        left: boundingRect.left + window.scrollX,
+        zIndex: 9998,
+        pointerEvents: 'none',
+      }}
+    >
+      <Canvas
+        width={boundingRect.width}
+        height={
+          Math.min(
+            boundingRect.height,
+            10000
+          ) /*Canvas starts to lag over 10k, doesnt work over 32k*/
+        }
+        handleMouseDown={() => {}}
+        handleMouseUp={() => {}}
+        handleMouseLeave={() => {}}
+        handleMouseMove={() => {}}
+        lines={lines}
+      />
+    </div>
+  );
+};
+
+DisplayCanvas.propTypes = {
+  lines: propTypes.array.isRequired,
+  container: propTypes.object.isRequired,
+};
+
+export { DisplayCanvas };

src/doodle/doodleCanvas.js

@@ -31,11 +31,6 @@ const DoodleCanvas = ({
   setLines,
 }) => {
   const [isDrawing, setIsDrawing] = useState(false);
-  const [everActive, setEverActive] = useState(false);
-
-  if (active && !everActive) {
-    setEverActive(true);
-  }
 
   useEffect(() => {
     if (lines.length === 0) {
@@ -96,10 +91,6 @@ const DoodleCanvas = ({
     setLines([newLine, ...rest]);
   };
 
-  if (!everActive) {
-    return null;
-  }
-
   return (
     <div
       style={{

src/doodle/doodleController.js

@@ -1,4 +1,5 @@
-import { render, createElement } from 'preact';
+import { render, createElement, Fragment } from 'preact';
+import { DisplayCanvas } from './displayCanvas';
 import { DoodleCanvas } from './doodleCanvas';
 
 export class DoodleController {
@@ -9,13 +10,18 @@ export class DoodleController {
   constructor(container, options) {
     const { tool, size } = options;
     this._lines = [];
+    this._savedLines = [];
+    this._newLines = [];
 
     this._container = container === null ? document.body : container;
     this._tool = tool;
     this._size = size;
 
     this._doodleable = false;
 
+    // create a new element to render into, to avoid overwriting the main page content.
+    this.target = document.body.appendChild(document.createElement('div'));
+
     this.render();
   }
 
@@ -34,20 +40,24 @@ export class DoodleController {
   /**
    * Update the lines and re-render on change
    */
-  set lines(newLines) {
-    this._lines = newLines;
+  set savedLines(lines) {
+    this._savedLines = lines;
     this.render();
   }
 
-  get lines() {
-    return this._lines;
+  get savedLines() {
+    return this._savedLines;
+  }
+
+  set newLines(lines) {
+    this._newLines = lines;
+    this.render();
+  }
+
+  get newLines() {
+    return this._newLines;
   }
 
-  /**
-   * Update the toolbar to reflect whether the "Create annotation" button will
-   * create a page note (if there is no selection) or an annotation (if there is
-   * a selection).
-   */
   set size(newSize) {
     this._size = newSize;
     this.render();
@@ -70,20 +80,29 @@ export class DoodleController {
     return this._doodleable;
   }
 
+  saveLines() {
+    this._savedLines = [...this._newLines, ...this._savedLines];
+    this._newLines = [];
+    this.render();
+  }
+
   render() {
-    const setLines = newLines => {
-      this.lines = newLines;
+    const setLines = lines => {
+      this.newLines = lines;
     };
     render(
-      <DoodleCanvas
-        attachedElement={this._container}
-        size={this._size}
-        tool={this._tool}
-        active={this._doodleable}
-        lines={this._lines}
-        setLines={setLines}
-      />,
-      document.body
+      <Fragment>
+        <DoodleCanvas
+          attachedElement={this._container}
+          size={this._size}
+          tool={this._tool}
+          active={this._doodleable}
+          lines={this.newLines}
+          setLines={setLines}
+        />
+        <DisplayCanvas lines={this.savedLines} container={this._container} />
+      </Fragment>,
+      this.target
     );
   }
 }