Attach doodles to elements (#19)

Author: fuzzything44

src/annotator/guest.js

@@ -16,6 +16,8 @@ import {
 import * as rangeUtil from './range-util';
 import { SelectionObserver } from './selection-observer';
 import { normalizeURI } from './util/url';
+import { DoodleElementFinder } from '../doodle/doodledOver';
+import { xpathFromNode, nodeFromXPath } from './anchoring/xpath';
 
 /**
  * @typedef {import('../types/annotator').AnnotationData} AnnotationData
@@ -825,11 +827,29 @@ export default class Guest extends Delegator {
    */
   saveCurrentDoodle() {
     if (this.doodleCanvasController) {
+      const controller = this.doodleCanvasController;
+      const elemFinder = new DoodleElementFinder(controller.container);
+
+      this.doodleCanvasController.newLines.forEach(line => {
+        // Set attached elem info
+        const attachedElem = elemFinder.resolveLine(line);
+        const attachedRect = attachedElem.getBoundingClientRect();
+        line.elem.height = attachedRect.height;
+        line.elem.width = attachedRect.width;
+        line.elem.path = xpathFromNode(attachedElem, controller.container);
+        // Fix line points
+        const topOffset = attachedRect.top + document.documentElement.scrollTop;
+        const leftOffset =
+          attachedRect.left + document.documentElement.scrollLeft;
+        line.points = line.points.map(pts => [
+          pts[0] - leftOffset,
+          pts[1] - topOffset,
+        ]);
+      });
       this.createAnnotation({
         $doodle: true,
         doodleLines: this.doodleCanvasController.newLines,
       });
-      // removed clearing lines from here because of bug when you try to save unsuccessfully (b/c not logged in) clearing your doodle
     }
   }
 
@@ -848,6 +868,7 @@ export default class Guest extends Delegator {
     }
 
     //load the lines into our doodleCanvasController.
+    /** @type {import('../types/api').DoodleLine[]} */
     let newLines = [];
     for (let targ of doodleAnnotation.target) {
       for (let sel of targ.selector) {
@@ -856,6 +877,30 @@ export default class Guest extends Delegator {
         }
       }
     }
+    // Re-calculate global coordinates for new line
+
+    newLines.forEach(line => {
+      const attachedNode = nodeFromXPath(line.elem.path);
+      if (
+        attachedNode === null ||
+        attachedNode.nodeType !== Node.ELEMENT_NODE
+      ) {
+        return;
+      }
+      /** @type{Element} */
+      // @ts-ignore we just checked it's an element
+      const attachedElem = attachedNode;
+      const attachedRect = attachedElem.getBoundingClientRect();
+      const topOffset = attachedRect.top + document.documentElement.scrollTop;
+      const leftOffset =
+        attachedRect.left + document.documentElement.scrollLeft;
+      const xMult = attachedRect.width / line.elem.width;
+      const yMult = attachedRect.height / line.elem.height;
+      line.points = line.points.map(([x, y]) => {
+        return [x * xMult + leftOffset, y * yMult + topOffset];
+      });
+    });
+
     this.doodleCanvasController.savedDoodles = [
       ...this.doodleCanvasController.savedDoodles,
       {

src/doodle/doodleCanvas.js

@@ -11,9 +11,9 @@ import propTypes from 'prop-types';
  * @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
- * @prop {Function} onUndo - a function called when undo key commands pressed
- * @prop {Function} onRedo - a function called when redo key commands pressed
+ * @prop {(lines: import('../types/api').DoodleLine[]) => void} setLines - A function to set the lines
+ * @prop {() => void} onUndo - a function called when undo key commands pressed
+ * @prop {() => void} onRedo - a function called when redo key commands pressed
  */
 
 /**
@@ -84,6 +84,11 @@ const DoodleCanvas = ({
         tool: tool,
         color: color,
         size: size,
+        elem: {
+          path: '',
+          height: 0,
+          width: 0,
+        },
         points: [[e.offsetX, e.offsetY]],
       },
       ...lines,
@@ -109,10 +114,9 @@ const DoodleCanvas = ({
     const xPos = e.offsetX;
     const yPos = e.offsetY;
 
+    /** @type {import('../types/annotator').DoodleLine} */
     const newLine = {
-      tool: curLine.tool,
-      color: curLine.color,
-      size: curLine.size,
+      ...curLine,
       points: [[xPos, yPos], ...curLine.points],
     };
 

src/doodle/doodleController.js

@@ -9,12 +9,19 @@ export class DoodleController {
    */
   constructor(container, options, handleDoodleClick) {
     const { tool, size, color } = options;
+    /** @type {import('../types/api').DoodleLine[]} */
+
     this._lines = [];
+    /** @type {import('../types/api').Doodle[]} */
+
     this._savedDoodles = [];
+    /** @type {import('../types/api').DoodleLine[]} */
     this._newLines = [];
+    /** @type {import('../types/api').DoodleLine[]} */
+
     this._redoLines = [];
 
-    this._container = container === null ? document.body : container;
+    this.container = container === null ? document.body : container;
     this._tool = tool;
     this._size = size;
     this._color = color;
@@ -107,12 +114,14 @@ export class DoodleController {
 
   undo() {
     if (this._newLines.length) {
+      // @ts-ignore shift won't return undefined due to length check
       this._redoLines.push(this._newLines.shift());
       this.render();
     }
   }
   redo() {
     if (this._redoLines.length) {
+      // @ts-ignore pop won't return undefined due to length check
       this._newLines = [this._redoLines.pop(), ...this._newLines];
       this.render();
     }
@@ -125,7 +134,7 @@ export class DoodleController {
     render(
       <Fragment>
         <DoodleCanvas
-          attachedElement={this._container}
+          attachedElement={this.container}
           size={this._size}
           tool={this._tool}
           active={this._doodleable}
@@ -138,7 +147,7 @@ export class DoodleController {
         <DisplayCanvas
           handleDoodleClick={this._handleDoodleClick}
           doodles={this.savedDoodles}
-          container={this._container}
+          container={this.container}
           showDoodles={this._showDoodles}
         />
       </Fragment>,

src/doodle/doodledOver.js

@@ -1,6 +1,19 @@
-const IGNORE_PERCENT_THRESHOLD = 0.8; // Ignore elements that cover at least this % of the region
+const APPEARANCE_THRESHOLD = 0.75; // How much of a line needs to appear in that element to consider it
+
+const IGNORE_PERCENT_THRESHOLD = 0.5; // Ignore elements that cover at least this % of the region
 const SPLIT_SIZE = 10; // Split into 2 sub regions (vertically, horizontal shouldn't be common) when one contains this many elements
 
+/**
+ * Gets the area of the element
+ * @param {Element} elem
+ * @returns {number}
+ */
+function getArea(elem) {
+  return (
+    elem.getBoundingClientRect().width * elem.getBoundingClientRect().height
+  );
+}
+
 /**
  * Gets the top of the element, in pixels relative to the page.
  * @param {Element} elem
@@ -55,22 +68,19 @@ class PointResolver {
     if (minorElems.length < SPLIT_SIZE) {
       this.elements = this.elements.concat(minorElems);
     } else {
-      // Need to go to sub resolvers for minor elements. Just sort + take half in each
-      const sorted = minorElems.sort(
-        (a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top
+      // Need to go to sub resolvers for minor elements.
+      const midpoint = (top + bottom) / 2;
+      const firstHalf = elements.filter(e => elemTop(e) < midpoint);
+      const secondHalf = elements.filter(
+        e =>
+          e.getBoundingClientRect().bottom +
+            document.documentElement.scrollTop >=
+          midpoint
       );
-      const midway = Math.floor(sorted.length / 2);
+
       this.subResolvers = [
-        new PointResolver(
-          sorted.slice(0, midway),
-          top,
-          elemTop(sorted[midway])
-        ),
-        new PointResolver(
-          sorted.slice(midway, sorted.length),
-          elemTop(sorted[midway]) + 1,
-          bottom
-        ),
+        new PointResolver(firstHalf, top, midpoint),
+        new PointResolver(secondHalf, midpoint + 1, bottom),
       ];
     }
   }
@@ -147,16 +157,33 @@ export class DoodleElementFinder {
   /**
    * Returns all Elements that the line overlaps
    * @param {import("../types/api").DoodleLine} line
-   * @returns {Element[]}
+   * @returns {Element}
    */
   resolveLine(line) {
-    // Resolve for each point in the line, removing duplicates.
-    // In a later sprint we can revisit this and potentially ignore some elements that aren't common
-    // but for now, this is good enough.
-    let elems = new Set();
+    // Map from element to count of times that element has been doodled over
+    /** @type {Map<Element, number>}  */
+    let elems = new Map();
     line.points.forEach(point => {
-      this.resolvePoint(point[0], point[1]).forEach(elems.add);
+      this.resolvePoint(point[0], point[1]).forEach(elem => {
+        if (!elems.has(elem)) {
+          elems.set(elem, 0);
+        }
+        // @ts-ignore .get() can't be undefined, as we just set it.
+        elems.set(elem, elems.get(elem) + 1);
+      });
     });
-    return Array.from(elems);
+    // Sort elements by appearance count, largest to smallest
+    const sortedElems = Array.from(elems.entries()).sort((a, b) => b[1] - a[1]);
+    // Get ones that appear enough times, and map back down to only element, removing count
+    const overAppearanceThreshold = sortedElems
+      .filter(entry => entry[1] >= APPEARANCE_THRESHOLD * line.points.length)
+      .map(elem => elem[0]);
+    if (overAppearanceThreshold.length === 0) {
+      return sortedElems[0][0];
+    }
+
+    return overAppearanceThreshold.reduce((prev, curr) => {
+      return getArea(prev) <= getArea(curr) ? prev : curr;
+    }, overAppearanceThreshold[0]);
   }
 }

src/types/api.js

@@ -45,11 +45,18 @@
  * @prop {Selector[]} [selector]
  */
 
+/**
+ * @typedef DoodleElem
+ * @prop {string} path
+ * @prop {number} height
+ * @prop {number} width
+ */
 /**
  * @typedef DoodleLine
  * @prop {string} tool
  * @prop {string} color
- * @prop {string} size
+ * @prop {number} size
+ * @prop {DoodleElem} elem
  * @prop {Array<Array<number>>} points
  */