Add workaround for #24 - switch to single view

src/SingleCanvasDialog.js

+import React, { Component } from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Typography from '@material-ui/core/Typography';
+import PropTypes from 'prop-types';
+
+export class SingleCanvasDialog extends Component {
+  constructor(props) {
+    super(props);
+    this.confirm = this.confirm.bind(this);
+  }
+
+  confirm() {
+    this.props.switchToSingleCanvasView();
+    this.props.openCreateAnnotationCompanionWindow();
+    this.props.handleClose();
+  }
+
+  render() {
+    return (
+      <Dialog
+        onClose={this.props.hideDialog}
+        open={this.props.open}
+      >
+        <DialogTitle disableTypography>
+          <Typography variant="h2">
+            Switch view type to single view?
+          </Typography>
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText variant="body2" color="inherit">
+            Annotations can only be edited in single canvas view type. Switch view type to single view now?
+          </DialogContentText>
+          <DialogActions>
+            <Button onClick={this.confirm} variant="contained">
+              Switch and start annotating
+            </Button>
+            <Button onClick={this.props.handleClose} variant="contained">
+              Cancel
+            </Button>
+          </DialogActions>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+}
+
+SingleCanvasDialog.propTypes = {
+  handleClose: PropTypes.func.isRequired,
+  open: PropTypes.bool,
+  openCreateAnnotationCompanionWindow: PropTypes.func.isRequired,
+  switchToSingleCanvasView: PropTypes.func.isRequired,
+}
+
+SingleCanvasDialog.defaultProps = {
+  open: false,
+}

src/plugins/miradorAnnotationPlugin.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 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';
+
 
 /** */
 class MiradorAnnotation extends Component {
   /** */
   constructor(props) {
     super(props);
+    this.state = {
+      singleCanvasDialogOpen: false,
+    };
     this.openCreateAnnotationCompanionWindow = this.openCreateAnnotationCompanionWindow.bind(this);
+    this.toggleSingleCanvasDialogOpen = this.toggleSingleCanvasDialogOpen.bind(this);
   }
 
   /** */
@@ -23,6 +30,12 @@ class MiradorAnnotation extends Component {
     });
   }
 
+  toggleSingleCanvasDialogOpen() {
+    this.setState({
+      singleCanvasDialogOpen: !this.state.singleCanvasDialogOpen,
+    });
+  }
+
   /** */
   render() {
     const { TargetComponent, targetProps } = this.props;
@@ -33,11 +46,21 @@ class MiradorAnnotation extends Component {
         />
         <MiradorMenuButton
           aria-label="Create new annotation"
-          onClick={this.openCreateAnnotationCompanionWindow}
+          onClick={this.props.windowViewType === 'single' ? this.openCreateAnnotationCompanionWindow : this.toggleSingleCanvasDialogOpen}
           size="small"
         >
           <AddBoxIcon />
         </MiradorMenuButton>
+        {
+          this.state.singleCanvasDialogOpen && (
+            <SingleCanvasDialog
+              open={this.state.singleCanvasDialogOpen}
+              handleClose={this.toggleSingleCanvasDialogOpen}
+              openCreateAnnotationCompanionWindow={this.openCreateAnnotationCompanionWindow}
+              switchToSingleCanvasView={this.props.switchToSingleCanvasView}
+            />
+          )
+        }
       </div>
     );
   }
@@ -57,11 +80,19 @@ const mapDispatchToProps = (dispatch, props) => ({
   addCompanionWindow: (content, additionalProps) => dispatch(
     actions.addCompanionWindow(props.targetProps.windowId, { content, ...additionalProps }),
   ),
+  switchToSingleCanvasView: () => dispatch(
+    actions.setWindowViewType(props.targetProps.windowId, 'single')
+  )
+});
+
+const mapStateToProps = (state, props) => ({
+  windowViewType: getWindowViewType(state, { windowId: props.targetProps.windowId }),
 });
 
 export default {
   component: MiradorAnnotation,
   mapDispatchToProps,
+  mapStateToProps,
   mode: 'wrap',
   target: 'AnnotationSettings',
 };