Hide doodle button (#17)

* add button to hide doodles

* cant forget tests

* performance boost

Author: WiFuchs

src/annotator/components/toolbar.js

@@ -69,8 +69,11 @@ ToolbarButton.propTypes = {
  *   Icon to show on the "Create annotation" button indicating what kind of annotation
  *   will be created.
  * @prop {boolean} showHighlights - Are highlights currently visible in the document?
+ * @prop {boolean} showDoodles - Are doodles currently visible in the document?
  * @prop {() => any} toggleHighlights -
  *   Callback to toggle visibility of highlights in the document.
+ * @prop {() => any} toggleDoodles -
+ *   Callback to toggle visibility of doodles in the document.
  * @prop {() => any} toggleSidebar -
  *   Callback to toggle the visibility of the sidebar.
  * @prop {(object) => any} setDoodleOptions
@@ -101,7 +104,9 @@ export default function Toolbar({
   isSidebarOpen,
   newAnnotationType,
   showHighlights,
+  showDoodles,
   toggleHighlights,
+  toggleDoodles,
   toggleSidebar,
   setDoodleOptions,
   saveDoodle,
@@ -153,6 +158,12 @@ export default function Toolbar({
               selected={showHighlights}
               onClick={toggleHighlights}
             />
+            <ToolbarButton
+              label="Show Doodles"
+              icon={showDoodles ? 'show' : 'hide'}
+              selected={showDoodles}
+              onClick={toggleDoodles}
+            />
             <ToolbarButton
               label={
                 newAnnotationType === 'note'

src/annotator/guest.js

@@ -119,6 +119,7 @@ export default class Guest extends Delegator {
     super(element, { ...defaultConfig, ...config });
 
     this.visibleHighlights = false;
+    this.visibleDoodles = false;
 
     /** @type {ToolbarController|null} */
     this.toolbar = null;
@@ -298,6 +299,7 @@ export default class Guest extends Delegator {
   _setupInitialState(config) {
     this.publish('panelReady');
     this.setVisibleHighlights(config.showHighlights === 'always');
+    this.setVisibleDoodles(config.showHighlights === 'always');
   }
 
   _connectAnnotationSync() {
@@ -353,6 +355,10 @@ export default class Guest extends Delegator {
       this.setVisibleHighlights(state);
     });
 
+    crossframe.on('setVisibleDoodles', state => {
+      this.setVisibleDoodles(state);
+    });
+
     crossframe.on('setDoodleability', state => {
       this.setDoodleability(state);
     });
@@ -754,6 +760,22 @@ export default class Guest extends Delegator {
     }
   }
 
+  /**
+   * Set whether doodles are visible in the document or not.
+   *
+   * @param {boolean} shouldShowDoodles
+   */
+  setVisibleDoodles(shouldShowDoodles) {
+    if (this.doodleCanvasController) {
+      this.doodleCanvasController.showDoodles = shouldShowDoodles;
+    }
+
+    this.visibleDoodles = shouldShowDoodles;
+    if (this.toolbar) {
+      this.toolbar.doodlesVisible = shouldShowDoodles;
+    }
+  }
+
   /**
    * Set whether the document can be doodled on
    *

src/annotator/sidebar.js

@@ -135,6 +135,7 @@ export default class Sidebar extends Guest {
       createAnnotation: () => this.createAnnotation(),
       setSidebarOpen: open => (open ? this.show() : this.hide()),
       setHighlightsVisible: show => this.setAllVisibleHighlights(show),
+      setDoodlesVisible: show => this.setAllVisibleDoodles(show),
       setUserCanDoodle: show => this.setAllDoodleability(show),
       setDoodleOptions: options => this.setAllDoodleOptions(options),
       saveDoodle: () => this.saveDoodle(),
@@ -429,6 +430,15 @@ export default class Sidebar extends Guest {
     this.crossframe.call('setVisibleHighlights', shouldShowHighlights);
   }
 
+  /**
+   * Hide or show doodles associated with annotations in the document.
+   *
+   * @param {boolean} shouldShowDoodles
+   */
+  setAllVisibleDoodles(shouldShowDoodles) {
+    this.crossframe.call('setVisibleDoodles', shouldShowDoodles);
+  }
+
   /**
    * (CreativeNTR) Toggle doodle ability on and off
    *

src/annotator/test/sidebar-test.js

@@ -553,6 +553,13 @@ describe('Sidebar', () => {
       assert.calledWith(fakeCrossFrame.call, 'setVisibleHighlights', true);
     }));
 
+  describe('#setAllVisibleDoodles', () =>
+    it('sets the doodle state through crossframe and emits', () => {
+      const sidebar = createSidebar({});
+      sidebar.setAllVisibleDoodles(true);
+      assert.calledWith(fakeCrossFrame.call, 'setVisibleDoodles', true);
+    }));
+
   it('hides toolbar controls when using the "clean" theme', () => {
     createSidebar({ theme: 'clean' });
     assert.equal(fakeToolbar.useMinimalControls, true);

src/annotator/toolbar.js

@@ -7,6 +7,7 @@ import Toolbar from './components/toolbar';
  * @prop {() => any} createAnnotation
  * @prop {(open: boolean) => any} setSidebarOpen
  * @prop {(visible: boolean) => any} setHighlightsVisible
+ * @prop {(visible: boolean) => any} setDoodlesVisible
  * @prop {(doodleable: boolean) => any} setUserCanDoodle
  * @prop {(doodleable: boolean) => any} setDoodleOptions
  * @prop {() => any} saveDoodle
@@ -28,6 +29,7 @@ export class ToolbarController {
       createAnnotation,
       setSidebarOpen,
       setHighlightsVisible,
+      setDoodlesVisible,
       setUserCanDoodle,
       setDoodleOptions,
       saveDoodle,
@@ -46,11 +48,13 @@ export class ToolbarController {
     this._highlightsVisible = false;
     this._sidebarOpen = false;
     this._doodleable = false;
+    this._doodlesVisible = false;
 
     this._closeSidebar = () => setSidebarOpen(false);
     this._toggleSidebar = () => setSidebarOpen(!this._sidebarOpen);
     this._toggleHighlights = () =>
       setHighlightsVisible(!this._highlightsVisible);
+    this._toggleDoodles = () => setDoodlesVisible(!this._doodlesVisible);
     this._toggleDoodleToolbar = () => {
       this._drawingToolbar = !this._drawingToolbar;
       this._doodleable = this._drawingToolbar;
@@ -129,6 +133,18 @@ export class ToolbarController {
     return this._highlightsVisible;
   }
 
+  /**
+   * Update the toolbar to reflect whether doodles are currently visible
+   */
+  set doodlesVisible(visible) {
+    this._doodlesVisible = visible;
+    this.render();
+  }
+
+  get doodlesVisible() {
+    return this._doodlesVisible;
+  }
+
   /**
    * Return the DOM element that toggles the sidebar's visibility.
    *
@@ -146,7 +162,9 @@ export class ToolbarController {
         newAnnotationType={this._newAnnotationType}
         isSidebarOpen={this._sidebarOpen}
         showHighlights={this._highlightsVisible}
+        showDoodles={this._doodlesVisible}
         toggleHighlights={this._toggleHighlights}
+        toggleDoodles={this._toggleDoodles}
         toggleSidebar={this._toggleSidebar}
         toggleSidebarRef={this._sidebarToggleButton}
         useMinimalControls={this.useMinimalControls}

src/doodle/displayCanvas.js

@@ -5,6 +5,7 @@ import propTypes from 'prop-types';
  * @typedef DisplayCanvasProps
  * @prop {HTMLElement} container - Which element the DisplayCanvas should cover.
  * @prop {Array<import('../types/api').Doodle>} doodles - An array of Doodles to render
+ * @prop {Boolean} showDoodles - An array of Doodles to render
  * @prop {(String) => any} handleDoodleClick - What to do when a doodle is clicked? Accepts the Doodle's `tag` as a prop
  */
 
@@ -13,7 +14,12 @@ import propTypes from 'prop-types';
  *
  * @param {DisplayCanvasProps} props
  */
-const DisplayCanvas = ({ container, doodles, handleDoodleClick }) => {
+const DisplayCanvas = ({
+  container,
+  doodles,
+  handleDoodleClick,
+  showDoodles,
+}) => {
   const boundingRect = container.getBoundingClientRect();
   return (
     <div
@@ -23,6 +29,7 @@ const DisplayCanvas = ({ container, doodles, handleDoodleClick }) => {
         left: boundingRect.left + window.scrollX,
         zIndex: 9998,
         pointerEvents: 'none',
+        display: showDoodles ? undefined : 'none',
       }}
     >
       <Canvas
@@ -48,6 +55,7 @@ DisplayCanvas.propTypes = {
   doodles: propTypes.array.isRequired,
   container: propTypes.object.isRequired,
   handleDoodleClick: propTypes.func.isRequired,
+  showDoodles: propTypes.bool.isRequired,
 };
 
 export { DisplayCanvas };

src/doodle/doodleController.js

@@ -20,13 +20,25 @@ export class DoodleController {
 
     this._doodleable = false;
     this._handleDoodleClick = handleDoodleClick;
+    this._showDoodles = 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();
   }
 
+  /**
+   * Re-render whenver doodle visibility changes
+   */
+  set showDoodles(shouldShowDoodles) {
+    this._showDoodles = shouldShowDoodles;
+    this.render();
+  }
+  get showDoodles() {
+    return this._showDoodles;
+  }
+
   /**
    * Update the toolbar to reflect whether the sidebar is open or not.
    */
@@ -110,6 +122,7 @@ export class DoodleController {
           handleDoodleClick={this._handleDoodleClick}
           doodles={this.savedDoodles}
           container={this._container}
+          showDoodles={this._showDoodles}
         />
       </Fragment>,
       this.target

src/sidebar/services/frame-sync.js

@@ -191,6 +191,9 @@ export default function FrameSync(annotationsService, bridge, store) {
     bridge.on('setVisibleHighlights', function (state) {
       bridge.call('setVisibleHighlights', state);
     });
+    bridge.on('setVisibleDoodles', function (state) {
+      bridge.call('setVisibleDoodles', state);
+    });
     bridge.on('setDoodleability', function (state) {
       bridge.call('setDoodleability', state);
     });

src/sidebar/services/test/frame-sync-test.js

@@ -407,6 +407,12 @@ describe('sidebar/services/frame-sync', function () {
 
       assert.calledWith(fakeBridge.call, 'setVisibleHighlights');
     });
+
+    it('calls "setVisibleDoodles"', function () {
+      fakeBridge.emit('setVisibleDoodles');
+
+      assert.calledWith(fakeBridge.call, 'setVisibleDoodles');
+    });
   });
 
   describe('when annotations are focused in the sidebar', () => {