persist doodles (#7)

* persist doodles

* minor changes

Author: WiFuchs

.eslintcache

@@ -74,6 +74,8 @@ ToolbarButton.propTypes = {
  *   Callback to toggle the visibility of the sidebar.
  * @prop {(object) => any} setDoodleOptions
  *   Callback to set the options of the doodle canvas
+ * @prop {() => any} saveDoodle
+ *   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
@@ -101,6 +103,7 @@ export default function Toolbar({
   toggleHighlights,
   toggleSidebar,
   setDoodleOptions,
+  saveDoodle,
   toggleSidebarRef,
   useMinimalControls = false,
   drawingToolbarActivated,
@@ -191,6 +194,11 @@ export default function Toolbar({
               icon="erase"
               onClick={() => setDoodleOptions({ tool: 'eraser', size: 25 })}
             />
+            <ToolbarButton
+              label="Save"
+              icon="erase"
+              onClick={() => saveDoodle()}
+            />
           </div>
         )}
       </div>
@@ -212,4 +220,5 @@ Toolbar.propTypes = {
   drawingToolbarActivated: propTypes.bool,
   drawingToolbarToggle: propTypes.func.isRequired,
   setDoodleOptions: propTypes.func.isRequired,
+  saveDoodle: propTypes.func.isRequired,
 };

src/annotator/components/toolbar.js

@@ -360,6 +360,10 @@ export default class Guest extends Delegator {
     crossframe.on('setDoodleOptions', state => {
       this.setDoodleOptions(state);
     });
+
+    crossframe.on('saveCurrentDoodle', () => {
+      this.saveCurrentDoodle();
+    });
   }
 
   destroy() {
@@ -585,6 +589,18 @@ export default class Guest extends Delegator {
     const setTargets = ([info, selectors]) => {
       // `selectors` is an array of arrays: each item is an array of selectors
       // identifying a distinct target.
+
+      // If the annotation is a doodle, add a target for the doodle lines
+      if (annotation.$doodle && annotation.doodleLines) {
+        selectors = [
+          ...selectors,
+          annotation.doodleLines.map(curLine => ({
+            type: 'DoodleSelector',
+            line: curLine,
+          })),
+        ];
+      }
+
       const source = info.uri;
       annotation.target = selectors.map(selector => ({
         source,
@@ -749,4 +765,16 @@ export default class Guest extends Delegator {
       }
     }
   }
+
+  /**
+   * Save the doodle
+   */
+  saveCurrentDoodle() {
+    if (this.doodleCanvasController) {
+      this.createAnnotation({
+        $doodle: true,
+        doodleLines: this.doodleCanvasController.lines,
+      });
+    }
+  }
 }

src/annotator/guest.js

@@ -137,6 +137,7 @@ export default class Sidebar extends Guest {
       setHighlightsVisible: show => this.setAllVisibleHighlights(show),
       setUserCanDoodle: show => this.setAllDoodleability(show),
       setDoodleOptions: options => this.setAllDoodleOptions(options),
+      saveDoodle: () => this.saveDoodle(),
     });
     this.toolbar.useMinimalControls = config.theme === 'clean';
 
@@ -439,4 +440,11 @@ export default class Sidebar extends Guest {
   setAllDoodleOptions(options) {
     this.crossframe.call('setDoodleOptions', options);
   }
+
+  /**
+   * (CreativeNTR) Save the doodle
+   */
+  saveDoodle() {
+    this.crossframe.call('saveCurrentDoodle');
+  }
 }

src/annotator/sidebar.js

@@ -9,6 +9,7 @@ import Toolbar from './components/toolbar';
  * @prop {(visible: boolean) => any} setHighlightsVisible
  * @prop {(doodleable: boolean) => any} setUserCanDoodle
  * @prop {(doodleable: boolean) => any} setDoodleOptions
+ * @prop {() => any} saveDoodle
  */
 
 /**
@@ -29,6 +30,7 @@ export class ToolbarController {
       setHighlightsVisible,
       setUserCanDoodle,
       setDoodleOptions,
+      saveDoodle,
     } = options;
 
     this._container = container;
@@ -62,6 +64,9 @@ export class ToolbarController {
       createAnnotation();
       setSidebarOpen(true);
     };
+    this._saveDoodle = () => {
+      saveDoodle();
+    };
 
     /** Reference to the sidebar toggle button. */
     this._sidebarToggleButton = createRef();
@@ -148,6 +153,7 @@ export class ToolbarController {
         setDoodleOptions={this._setDoodleOptions}
         drawingToolbarActivated={this._drawingToolbar}
         drawingToolbarToggle={this._toggleDoodleToolbar}
+        saveDoodle={this._saveDoodle}
       />,
       this._container
     );

src/annotator/toolbar.js

@@ -9,6 +9,8 @@ import propTypes from 'prop-types';
  * @prop {number} size - The size of the brush.
  * @prop {boolean} active - Whether the canvas can be doodled on at this time
  * @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
  */
 
 /**
@@ -20,8 +22,14 @@ import propTypes from 'prop-types';
  *
  * @param {DoodleCanvasProps} props
  */
-const DoodleCanvas = ({ tool, size, active, attachedElement }) => {
-  const [lines, setLines] = useState(/** @type {array} */ ([]));
+const DoodleCanvas = ({
+  tool,
+  size,
+  active,
+  attachedElement,
+  lines,
+  setLines,
+}) => {
   const [isDrawing, setIsDrawing] = useState(false);
 
   const handleMouseDown = e => {
@@ -103,6 +111,8 @@ DoodleCanvas.propTypes = {
   tool: propTypes.string.isRequired,
   size: propTypes.number.isRequired,
   active: propTypes.bool.isRequired,
+  lines: propTypes.array.isRequired,
+  setLines: propTypes.func.isRequired,
   attachedElement: propTypes.any.isRequired,
 };
 

src/doodle/doodleCanvas.js

@@ -8,6 +8,7 @@ export class DoodleController {
    */
   constructor(container, options) {
     const { tool, size } = options;
+    this._lines = [];
 
     this._container = container === null ? document.body : container;
     this._tool = tool;
@@ -30,6 +31,18 @@ export class DoodleController {
     return this._tool;
   }
 
+  /**
+   * Update the lines and re-render on change
+   */
+  set lines(newLines) {
+    this._lines = newLines;
+    this.render();
+  }
+
+  get lines() {
+    return this._lines;
+  }
+
   /**
    * 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
@@ -58,12 +71,17 @@ export class DoodleController {
   }
 
   render() {
+    const setLines = newLines => {
+      this.lines = newLines;
+    };
     render(
       <DoodleCanvas
         attachedElement={this._container}
         size={this._size}
         tool={this._tool}
         active={this._doodleable}
+        lines={this._lines}
+        setLines={setLines}
       />,
       document.body
     );

src/doodle/doodleController.js

@@ -170,7 +170,6 @@ export default function annotationsService(api, store) {
     let saved;
 
     const annotationWithChanges = applyDraftChanges(annotation);
-
     if (metadata.isNew(annotation)) {
       saved = api.annotation.create({}, annotationWithChanges);
     } else {

src/sidebar/services/annotations.js

@@ -182,6 +182,9 @@ export default function FrameSync(annotationsService, bridge, store) {
     bridge.on('setDoodleOptions', function (state) {
       bridge.call('setDoodleOptions', state);
     });
+    bridge.on('saveCurrentDoodle', function (state) {
+      bridge.call('saveCurrentDoodle', state);
+    });
   }
 
   /**

src/sidebar/services/frame-sync.js

@@ -21,6 +21,7 @@
 /**
  * @typedef {import("./api").Selector} Selector
  * @typedef {import("./api").Target} Target
+ * @typedef {import("./api").DoodleLine} DoodleLine
  */
 
 /**
@@ -30,6 +31,10 @@
  * @prop {string} uri
  * @prop {Target[]} target
  * @prop {string} $tag
+ * @prop {boolean} [$doodle] -
+ *   Flag indicating that this annotation is a doodle
+ * @prop {DoodleLine[]} [doodleLines] -
+ *   Array of lines that compose the doodle
  * @prop {boolean} [$highlight] -
  *   Flag indicating that this annotation was created using the "Highlight" button,
  *   as opposed to "Annotate".