Add undo/redo (#18)

* Add undo/redo

* Remove commented crossframe code

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

Author: fuzzything44

src/annotator/components/toolbar.js

@@ -78,6 +78,10 @@ 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} undoDoodle
+ *   Callback to undo the last drawn line
+ * @prop {() => any} redoDoodle
+ *   Callback to undo the last doodle undo
  * @prop {() => any} saveDoodle
  *   Callback to set the options of the doodle canvas
  * @prop {import("preact").Ref<HTMLButtonElement>} [toggleSidebarRef] -
@@ -109,6 +113,8 @@ export default function Toolbar({
   toggleDoodles,
   toggleSidebar,
   setDoodleOptions,
+  undoDoodle,
+  redoDoodle,
   saveDoodle,
   toggleSidebarRef,
   useMinimalControls = false,
@@ -381,6 +387,8 @@ export default function Toolbar({
                 </div>
               </span>
             </button>
+            <ToolbarButton label="Undo" icon="undo" onClick={undoDoodle} />
+            <ToolbarButton label="Redo" icon="redo" onClick={redoDoodle} />
             <ToolbarButton
               label="Save"
               icon="save"

src/annotator/guest.js

@@ -22,6 +22,7 @@ import { normalizeURI } from './util/url';
  * @typedef {import('../types/annotator').Anchor} Anchor
  * @typedef {import('../types/api').Target} Target
  * @typedef {import('./toolbar').ToolbarController} ToolbarController
+ * @typedef {import('../doodle/doodleController').DoodleController} DoodleController
  */
 
 /**
@@ -124,7 +125,7 @@ export default class Guest extends Delegator {
     /** @type {ToolbarController|null} */
     this.toolbar = null;
 
-    /** TODO add this type back while still passing linter {DoodleController|null}* } */
+    /** @type {DoodleController|null} */
     this.doodleCanvasController = null;
 
     this.adderToolbar = document.createElement('hypothesis-adder');
@@ -806,6 +807,19 @@ export default class Guest extends Delegator {
     }
   }
 
+  /**
+   * Undo a doodle line
+   */
+  undoDoodle() {
+    this.doodleCanvasController?.undo();
+  }
+
+  /**
+   * Re-add a line that was removed with "undo"
+   */
+  redoDoodle() {
+    this.doodleCanvasController?.redo();
+  }
   /**
    * Save the doodle
    */

src/annotator/icons.js

@@ -19,6 +19,8 @@ export default {
   close: require('../images/icons/close.svg'),
   pen: require('../images/icons/pen.svg'),
   erase: require('../images/icons/erase.svg'),
+  undo: require('../images/icons/undo.svg'),
+  redo: require('../images/icons/redo.svg'),
   save: require('../images/icons/save.svg'),
   'circle-small': require('../images/icons/circleSmall.svg'),
   'circle-medium': require('../images/icons/circleMedium.svg'),

src/annotator/sidebar.js

@@ -138,6 +138,8 @@ export default class Sidebar extends Guest {
       setDoodlesVisible: show => this.setAllVisibleDoodles(show),
       setUserCanDoodle: show => this.setAllDoodleability(show),
       setDoodleOptions: options => this.setAllDoodleOptions(options),
+      undoDoodle: () => this.undoDoodle(),
+      redoDoodle: () => this.redoDoodle(),
       saveDoodle: () => this.saveDoodle(),
     });
     this.toolbar.useMinimalControls = config.theme === 'clean';

src/annotator/toolbar.js

@@ -10,6 +10,8 @@ import Toolbar from './components/toolbar';
  * @prop {(visible: boolean) => any} setDoodlesVisible
  * @prop {(doodleable: boolean) => any} setUserCanDoodle
  * @prop {(doodleable: boolean) => any} setDoodleOptions
+ * @prop {() => any} undoDoodle
+ * @prop {() => any} redoDoodle
  * @prop {() => any} saveDoodle
  */
 
@@ -32,6 +34,8 @@ export class ToolbarController {
       setDoodlesVisible,
       setUserCanDoodle,
       setDoodleOptions,
+      undoDoodle,
+      redoDoodle,
       saveDoodle,
     } = options;
 
@@ -68,6 +72,12 @@ export class ToolbarController {
       createAnnotation();
       setSidebarOpen(true);
     };
+    this._undoDoodle = () => {
+      undoDoodle();
+    };
+    this._redoDoodle = () => {
+      redoDoodle();
+    };
     this._saveDoodle = () => {
       saveDoodle();
     };
@@ -171,6 +181,8 @@ export class ToolbarController {
         setDoodleOptions={this._setDoodleOptions}
         drawingToolbarActivated={this._drawingToolbar}
         drawingToolbarToggle={this._toggleDoodleToolbar}
+        undoDoodle={this._undoDoodle}
+        redoDoodle={this._redoDoodle}
         saveDoodle={this._saveDoodle}
       />,
       this._container

src/doodle/doodleCanvas.js

@@ -12,6 +12,8 @@ import propTypes from 'prop-types';
  * @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
  */
 
 /**
@@ -27,6 +29,8 @@ const DoodleCanvas = ({
   attachedElement,
   lines,
   setLines,
+  onUndo,
+  onRedo,
 }) => {
   const [isDrawing, setIsDrawing] = useState(false);
   const [everActive, setEverActive] = useState(false);
@@ -35,6 +39,27 @@ const DoodleCanvas = ({
     setEverActive(true);
   }
 
+  useEffect(() => {
+    const KEY_UNDO = 90; // Code for "Z" key
+    const KEY_REDO = 89; // Code for "Y" key
+    if (!active) {
+      return () => {};
+    }
+    const listener = e => {
+      const key = e.charCode || e.keyCode;
+      if (e.ctrlKey) {
+        if (key === KEY_UNDO) {
+          onUndo();
+        } else if (key === KEY_REDO) {
+          onRedo();
+        }
+      }
+    };
+    document.addEventListener('keydown', listener);
+    return () => {
+      document.removeEventListener('keydown', listener);
+    };
+  }, [active, onUndo, onRedo]);
   useEffect(() => {
     if (lines.length === 0) {
       return () => {};
@@ -50,7 +75,7 @@ const DoodleCanvas = ({
     return () => {
       window.removeEventListener('beforeunload', warn);
     };
-  }, [lines]);
+  }, [lines.length]);
 
   const handleMouseDown = e => {
     setIsDrawing(true);
@@ -137,6 +162,8 @@ DoodleCanvas.propTypes = {
   lines: propTypes.array.isRequired,
   setLines: propTypes.func.isRequired,
   attachedElement: propTypes.any.isRequired,
+  onUndo: propTypes.func.isRequired,
+  onRedo: propTypes.func.isRequired,
 };
 
 export { DoodleCanvas };

src/doodle/doodleController.js

@@ -12,6 +12,7 @@ export class DoodleController {
     this._lines = [];
     this._savedDoodles = [];
     this._newLines = [];
+    this._redoLines = [];
 
     this._container = container === null ? document.body : container;
     this._tool = tool;
@@ -65,6 +66,7 @@ export class DoodleController {
 
   set newLines(lines) {
     this._newLines = lines;
+    this._redoLines = []; // Clear redo queue when doodle changes
     this.render();
   }
 
@@ -103,6 +105,19 @@ export class DoodleController {
     return this._doodleable;
   }
 
+  undo() {
+    if (this._newLines.length) {
+      this._redoLines.push(this._newLines.shift());
+      this.render();
+    }
+  }
+  redo() {
+    if (this._redoLines.length) {
+      this._newLines = [this._redoLines.pop(), ...this._newLines];
+      this.render();
+    }
+  }
+
   render() {
     const setLines = lines => {
       this.newLines = lines;
@@ -117,6 +132,8 @@ export class DoodleController {
           lines={this.newLines}
           setLines={setLines}
           color={this._color}
+          onUndo={this.undo.bind(this)}
+          onRedo={this.redo.bind(this)}
         />
         <DisplayCanvas
           handleDoodleClick={this._handleDoodleClick}