Do not open companion window after view type switch

src/CanvasListItem.js

@@ -6,7 +6,6 @@ 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 {
@@ -16,14 +15,11 @@ 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);
   }
 
   /** */
@@ -86,41 +82,11 @@ 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, singleCanvasDialogOpen } = this.state;
-    const { windowViewType, switchToSingleCanvasView } = this.context;
+    const { isHovering } = this.state;
+    const { windowViewType, toggleSingleCanvasDialogOpen } = this.context;
     return (
       <div
         onMouseEnter={this.handleMouseHover}
@@ -144,7 +110,7 @@ class CanvasListItem extends Component {
             >
               <ToggleButton
                 aria-label="Edit"
-                onClick={windowViewType === 'single' ? this.handleEdit : this.toggleSingleCanvasDialogOpen}
+                onClick={windowViewType === 'single' ? this.handleEdit : toggleSingleCanvasDialogOpen}
                 value="edit"
               >
                 <EditIcon />
@@ -155,15 +121,6 @@ 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

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 /**
  * Dialog to enforce single view for annotation creation / editing
  */
-export class SingleCanvasDialog extends Component {
+class SingleCanvasDialog extends Component {
   /** */
   constructor(props) {
     super(props);
@@ -22,13 +22,9 @@ export class SingleCanvasDialog extends Component {
   confirm() {
     const {
       handleClose,
-      openCreateAnnotationCompanionWindow,
-      setCanvas,
       switchToSingleCanvasView,
     } = this.props;
     switchToSingleCanvasView();
-    setCanvas();
-    openCreateAnnotationCompanionWindow();
     handleClose();
   }
 
@@ -55,7 +51,7 @@ export class SingleCanvasDialog extends Component {
           </DialogContentText>
           <DialogActions>
             <Button onClick={this.confirm} variant="contained">
-              Switch and start annotating
+              Switch to single view
             </Button>
             <Button onClick={handleClose} variant="contained">
               Cancel
@@ -70,12 +66,13 @@ export class SingleCanvasDialog extends Component {
 SingleCanvasDialog.propTypes = {
   handleClose: PropTypes.func.isRequired,
   open: PropTypes.bool,
-  openCreateAnnotationCompanionWindow: PropTypes.func.isRequired,
-  setCanvas: PropTypes.func,
+  // openCreateAnnotationCompanionWindow: PropTypes.func.isRequired,
+  // setCanvas: PropTypes.func,
   switchToSingleCanvasView: PropTypes.func.isRequired,
 };
 
 SingleCanvasDialog.defaultProps = {
   open: false,
-  setCanvas: () => undefined,
 };
+
+export default SingleCanvasDialog;

src/plugins/canvasAnnotationsPlugin.js

@@ -5,15 +5,34 @@ 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';
+import SingleCanvasDialog from '../SingleCanvasDialog';
 
 /** */
 class CanvasAnnotationsWrapper extends Component {
+  /** */
+  constructor(props) {
+    super(props);
+    this.state = {
+      singleCanvasDialogOpen: false,
+    };
+    this.toggleSingleCanvasDialogOpen = this.toggleSingleCanvasDialogOpen.bind(this);
+  }
+
+  /** */
+  toggleSingleCanvasDialogOpen() {
+    const { singleCanvasDialogOpen } = this.state;
+    this.setState({
+      singleCanvasDialogOpen: !singleCanvasDialogOpen,
+    });
+  }
+
   /** */
   render() {
     const {
       addCompanionWindow, annotationsOnCanvases, canvases, config, receiveAnnotation,
-      setCanvas, switchToSingleCanvasView, TargetComponent, targetProps, windowViewType,
+      switchToSingleCanvasView, TargetComponent, targetProps, windowViewType,
     } = this.props;
+    const { singleCanvasDialogOpen } = this.state;
     const props = {
       ...targetProps,
       listContainerComponent: CanvasListItem,
@@ -26,9 +45,8 @@ class CanvasAnnotationsWrapper extends Component {
           canvases,
           config,
           receiveAnnotation,
-          setCanvas,
           storageAdapter: config.annotation.adapter,
-          switchToSingleCanvasView,
+          toggleSingleCanvasDialogOpen: this.toggleSingleCanvasDialogOpen,
           windowId: targetProps.windowId,
           windowViewType,
         }}
@@ -36,6 +54,13 @@ class CanvasAnnotationsWrapper extends Component {
         <TargetComponent
           {...props} // eslint-disable-line react/jsx-props-no-spreading
         />
+        {windowViewType !== 'single' && (
+          <SingleCanvasDialog
+            handleClose={this.toggleSingleCanvasDialogOpen}
+            open={singleCanvasDialogOpen}
+            switchToSingleCanvasView={switchToSingleCanvasView}
+          />
+        )}
       </AnnotationActionsContext.Provider>
     );
   }
@@ -53,7 +78,6 @@ CanvasAnnotationsWrapper.propTypes = {
     }),
   }).isRequired,
   receiveAnnotation: PropTypes.func.isRequired,
-  setCanvas: PropTypes.func.isRequired,
   switchToSingleCanvasView: PropTypes.func.isRequired,
   TargetComponent: PropTypes.oneOfType([
     PropTypes.func,
@@ -95,9 +119,6 @@ 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'),
   ),

src/plugins/miradorAnnotationPlugin.js

@@ -4,7 +4,7 @@ import * as actions from 'mirador/dist/es/src/state/actions';
 import { getWindowViewType } from 'mirador/dist/es/src/state/selectors';
 import AddBoxIcon from '@material-ui/icons/AddBox';
 import { MiradorMenuButton } from 'mirador/dist/es/src/components/MiradorMenuButton';
-import { SingleCanvasDialog } from '../SingleCanvasDialog';
+import SingleCanvasDialog from '../SingleCanvasDialog';
 
 /** */
 class MiradorAnnotation extends Component {
@@ -63,7 +63,6 @@ class MiradorAnnotation extends Component {
             <SingleCanvasDialog
               open={singleCanvasDialogOpen}
               handleClose={this.toggleSingleCanvasDialogOpen}
-              openCreateAnnotationCompanionWindow={this.openCreateAnnotationCompanionWindow}
               switchToSingleCanvasView={switchToSingleCanvasView}
             />
           )