Open single-view dialog before editing annotations

__tests__/CanvasListItem.test.js

@@ -26,6 +26,7 @@ function createWrapper(props, context = {}) {
         canvases: [],
         receiveAnnotation,
         storageAdapter,
+        switchToSingleCanvasView: () => undefined,
         ...context,
       }}
     >

src/CanvasListItem.js

@@ -6,6 +6,7 @@ import ToggleButton from '@material-ui/lab/ToggleButton';
 import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 import flatten from 'lodash/flatten';
 import AnnotationActionsContext from './AnnotationActionsContext';
+import { SingleCanvasDialog } from './SingleCanvasDialog';
 
 /** */
 class CanvasListItem extends Component {
@@ -15,11 +16,14 @@ class CanvasListItem extends Component {
 
     this.state = {
       isHovering: false,
+      singleCanvasDialogOpen: false,
     };
 
     this.handleMouseHover = this.handleMouseHover.bind(this);
     this.handleDelete = this.handleDelete.bind(this);
     this.handleEdit = this.handleEdit.bind(this);
+    this.toggleSingleCanvasDialogOpen = this.toggleSingleCanvasDialogOpen.bind(this);
+    this.switchCanvas = this.switchCanvas.bind(this);
   }
 
   /** */
@@ -82,10 +86,41 @@ class CanvasListItem extends Component {
     return flatten(annoIds).includes(annotationid);
   }
 
+  /** */
+  switchCanvas() {
+    const { annotationsOnCanvases, canvases, setCanvas } = this.context;
+    const { annotationid } = this.props;
+    let canvasId;
+    canvases.forEach((canvas) => {
+      if (annotationsOnCanvases[canvas.id]) {
+        Object.entries(annotationsOnCanvases[canvas.id]).forEach(([key, value], i) => {
+          if (value.json && value.json.items) {
+            const annotation = value.json.items.find((anno) => anno.id === annotationid);
+            if (annotation) {
+              canvasId = canvas.id;
+            }
+          }
+        });
+      }
+    });
+    if (canvasId) {
+      setCanvas(canvasId);
+    }
+  }
+
+  /** */
+  toggleSingleCanvasDialogOpen() {
+    const { singleCanvasDialogOpen } = this.state;
+    this.setState({
+      singleCanvasDialogOpen: !singleCanvasDialogOpen,
+    });
+  }
+
   /** */
   render() {
     const { children } = this.props;
-    const { isHovering } = this.state;
+    const { isHovering, singleCanvasDialogOpen } = this.state;
+    const { windowViewType, switchToSingleCanvasView } = this.context;
     return (
       <div
         onMouseEnter={this.handleMouseHover}
@@ -107,7 +142,11 @@ class CanvasListItem extends Component {
                 right: 0,
               }}
             >
-              <ToggleButton aria-label="Edit" onClick={this.handleEdit} value="edit">
+              <ToggleButton
+                aria-label="Edit"
+                onClick={windowViewType === 'single' ? this.handleEdit : this.toggleSingleCanvasDialogOpen}
+                value="edit"
+              >
                 <EditIcon />
               </ToggleButton>
               <ToggleButton aria-label="Delete" onClick={this.handleDelete} value="delete">
@@ -116,6 +155,15 @@ class CanvasListItem extends Component {
             </ToggleButtonGroup>
           </div>
         )}
+        {windowViewType !== 'single' && (
+          <SingleCanvasDialog
+            handleClose={this.toggleSingleCanvasDialogOpen}
+            open={singleCanvasDialogOpen}
+            openCreateAnnotationCompanionWindow={this.handleEdit}
+            setCanvas={this.switchCanvas}
+            switchToSingleCanvasView={switchToSingleCanvasView}
+          />
+        )}
         <li
           {...this.props} // eslint-disable-line react/jsx-props-no-spreading
         >

src/SingleCanvasDialog.js

@@ -23,9 +23,11 @@ export class SingleCanvasDialog extends Component {
     const {
       handleClose,
       openCreateAnnotationCompanionWindow,
+      setCanvas,
       switchToSingleCanvasView,
     } = this.props;
     switchToSingleCanvasView();
+    setCanvas();
     openCreateAnnotationCompanionWindow();
     handleClose();
   }
@@ -69,9 +71,11 @@ SingleCanvasDialog.propTypes = {
   handleClose: PropTypes.func.isRequired,
   open: PropTypes.bool,
   openCreateAnnotationCompanionWindow: PropTypes.func.isRequired,
+  setCanvas: PropTypes.func,
   switchToSingleCanvasView: PropTypes.func.isRequired,
 };
 
 SingleCanvasDialog.defaultProps = {
   open: false,
+  setCanvas: () => undefined,
 };

src/plugins/canvasAnnotationsPlugin.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { getVisibleCanvases } from 'mirador/dist/es/src/state/selectors/canvases';
 import * as actions from 'mirador/dist/es/src/state/actions';
+import { getWindowViewType } from 'mirador/dist/es/src/state/selectors';
 import CanvasListItem from '../CanvasListItem';
 import AnnotationActionsContext from '../AnnotationActionsContext';
 
@@ -10,8 +11,8 @@ class CanvasAnnotationsWrapper extends Component {
   /** */
   render() {
     const {
-      addCompanionWindow, canvases, config, receiveAnnotation, TargetComponent,
-      targetProps, annotationsOnCanvases,
+      addCompanionWindow, annotationsOnCanvases, canvases, config, receiveAnnotation,
+      setCanvas, switchToSingleCanvasView, TargetComponent, targetProps, windowViewType,
     } = this.props;
     const props = {
       ...targetProps,
@@ -25,8 +26,11 @@ class CanvasAnnotationsWrapper extends Component {
           canvases,
           config,
           receiveAnnotation,
+          setCanvas,
           storageAdapter: config.annotation.adapter,
+          switchToSingleCanvasView,
           windowId: targetProps.windowId,
+          windowViewType,
         }}
       >
         <TargetComponent
@@ -49,11 +53,14 @@ CanvasAnnotationsWrapper.propTypes = {
     }),
   }).isRequired,
   receiveAnnotation: PropTypes.func.isRequired,
+  setCanvas: PropTypes.func.isRequired,
+  switchToSingleCanvasView: PropTypes.func.isRequired,
   TargetComponent: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.node,
   ]).isRequired,
   targetProps: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  windowViewType: PropTypes.string.isRequired,
 };
 
 CanvasAnnotationsWrapper.defaultProps = {
@@ -65,6 +72,7 @@ CanvasAnnotationsWrapper.defaultProps = {
 function mapStateToProps(state, { targetProps: { windowId } }) {
   const canvases = getVisibleCanvases(state, { windowId });
   const annotationsOnCanvases = {};
+
   canvases.forEach((canvas) => {
     const anno = state.annotations[canvas.id];
     if (anno) {
@@ -75,6 +83,7 @@ function mapStateToProps(state, { targetProps: { windowId } }) {
     annotationsOnCanvases,
     canvases,
     config: state.config,
+    windowViewType: getWindowViewType(state, { windowId }),
   };
 }
 
@@ -86,6 +95,12 @@ const mapDispatchToProps = (dispatch, props) => ({
   receiveAnnotation: (targetId, id, annotation) => dispatch(
     actions.receiveAnnotation(targetId, id, annotation),
   ),
+  setCanvas: (canvasId) => dispatch(
+    actions.setCanvas(props.targetProps.windowId, canvasId),
+  ),
+  switchToSingleCanvasView: () => dispatch(
+    actions.setWindowViewType(props.targetProps.windowId, 'single'),
+  ),
 });
 
 export default {