Basic way of getting a rectangle annotation

demo/src/index.js

 
 import mirador from 'mirador/dist/es/src/index';
-
+import OSDReferencesPlugin from 'mirador/dist/es/src/plugins/OSDReferences';
 import { miradorAnnotationPlugin, externalStorageAnnotationPlugin, canvasAnnotationsPlugin } from '../../src';
 import LocalStorageAdapter from '../../src/LocalStorageAdapter';
 
@@ -15,6 +15,7 @@ const config = {
 };
 
 mirador.viewer(config, [
+  OSDReferencesPlugin,
   miradorAnnotationPlugin,
   canvasAnnotationsPlugin,
   externalStorageAnnotationPlugin,

package.json

@@ -21,15 +21,19 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "uuid": "^8.0.0"
+    "@psychobolt/react-paperjs": "0.0.56",
+    "@psychobolt/react-paperjs-editor": "0.0.10"
   },
   "peerDependencies": {
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",
     "lodash": "^4.17.11",
     "mirador": "^3.0.0-beta.8",
+    "openseadragon": "^2.4.2",
     "prop-types": "^15.7.2",
-    "react": "16.x"
+    "react": "16.x",
+    "react-dom": "16.x",
+    "uuid": "^8.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.9.6",
@@ -54,7 +58,8 @@
     "nwb": "0.24.x",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react-dom": "^16.13.1",
+    "uuid": "^8.0.0"
   },
   "author": "",
   "homepage": "",

src/AnnotationCreation.js

 import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import Button from '@material-ui/core/Button';
+import { OSDReferences } from 'mirador/dist/es/src/plugins/OSDReferences';
+import { MiradorMenuButton } from 'mirador/dist/es/src/components/MiradorMenuButton';
+import AddBoxIcon from '@material-ui/icons/AddBox';
 import TextField from '@material-ui/core/TextField';
 import { v4 as uuid } from 'uuid';
-
+import { PaperContainer } from '@psychobolt/react-paperjs';
+import { RectangleTool } from '@psychobolt/react-paperjs-editor';
+import OpenSeadragon from 'openseadragon';
 /** */
 class AnnotationCreation extends Component {
   /** */
   constructor(props) {
     super(props);
-    this.state = { annoBody: '', xywh: '0,0,0,0' };
+    this.state = { activeTool: null, annoBody: '', xywh: '0,0,1000,1000' };
+
+    this.paperScope = null;
+    this.OSDReference = null;
 
     this.submitForm = this.submitForm.bind(this);
     this.updateBody = this.updateBody.bind(this);
-    this.updateXywh = this.updateXywh.bind(this);
+    this.addPath = this.addPath.bind(this);
+    this.addBox = this.addBox.bind(this);
+  }
+
+  /** */
+  componentDidMount() {
+    const { windowId } = this.props;
+    this.OSDReference = OSDReferences.get(windowId).current;
   }
 
   /** */
@@ -38,6 +54,16 @@ class AnnotationCreation extends Component {
       const newAnnoPage = localStorageAdapter.create(anno);
       receiveAnnotation(canvas.id, localStorageAdapter.annotationPageId, newAnnoPage);
     });
+    this.setState({
+      activeTool: null,
+    });
+  }
+
+  /** */
+  addBox() {
+    this.setState({
+      activeTool: 'rectangle',
+    });
   }
 
   /** */
@@ -46,21 +72,56 @@ class AnnotationCreation extends Component {
   }
 
   /** */
-  updateXywh(e) {
-    this.setState({ xywh: e.target.value });
+  addPath(path) {
+    // console.log(path);
+    const { bounds } = path;
+    const {
+      x, y, width, height,
+    } = bounds;
+    const point1 = new OpenSeadragon.Point(x, y);
+    const point2 = new OpenSeadragon.Point(x + width, y + height);
+    const viewportPoint1 = this.OSDReference.viewer.viewport.pointFromPixel(point1);
+    const viewportPoint2 = this.OSDReference.viewer.viewport.pointFromPixel(point2);
+    const viewportWidth = viewportPoint2.x - viewportPoint1.x;
+    const viewportHeight = viewportPoint2.y - viewportPoint1.y;
+    this.setState({
+      xywh: [
+        Math.floor(viewportPoint1.x),
+        Math.floor(viewportPoint1.y),
+        Math.floor(viewportWidth),
+        Math.floor(viewportHeight),
+      ].join(','),
+    });
   }
 
   /** */
-  render() {
-    const { annoBody, xywh } = this.state;
+  paperThing() {
+    const { activeTool } = this.state;
+    if (!activeTool) return null;
+    return (
+      <div className="foo" style={{ height: '100%', width: '100%', position: 'absolute', top: 0, left: 0 }}>
+        <PaperContainer canvasProps={{ style: { height: '100%', width: '100%' }}}>
+          <RectangleTool onPathAdd={this.addPath} pathProps={{ fillColor: null, strokeColor: 'blue' }} />
+        </PaperContainer>
+      </div>
+    );
+  }
 
+  /** */
+  render() {
+    const { annoBody } = this.state;
+    const { windowId } = this.props;
+    this.OSDReference = OSDReferences.get(windowId).current;
     return (
       <div>
+        {ReactDOM.createPortal(this.paperThing(), this.OSDReference.viewer.element)}
         <form onSubmit={this.submitForm}>
-          <TextField
-            value={xywh}
-            onChange={this.updateXywh}
-          />
+          <MiradorMenuButton
+            aria-label="Add Box"
+            onClick={this.addBox}
+          >
+            <AddBoxIcon />
+          </MiradorMenuButton>
           <TextField
             multiline
             rows={6}
@@ -89,6 +150,7 @@ AnnotationCreation.propTypes = {
     }),
   }).isRequired,
   receiveAnnotation: PropTypes.func.isRequired,
+  windowId: PropTypes.string.isRequired,
 };
 
 AnnotationCreation.defaultProps = {

src/CanvasListItem.js

@@ -32,6 +32,7 @@ class CanvasListItem extends Component {
     const annoIds = canvases.map((canvas) => {
       const adapter = storageAdapter(canvas.id);
       const annoPage = adapter.all();
+      if (!annoPage) return [];
       return annoPage.items.map((item) => item.id);
     });
     return annoIds.flat().includes(annotationid);

src/plugins/miradorAnnotationPlugin.js

@@ -16,14 +16,16 @@ class MiradorAnnotation extends Component {
   /** */
   openCreateAnnotationCompanionWindow(e) {
     const {
-      addCompanionWindow, canvases, receiveAnnotation, config,
+      addCompanionWindow, canvases, receiveAnnotation, config, targetProps,
     } = this.props;
+    const { windowId } = targetProps;
     addCompanionWindow('custom', {
       children: (
         <AnnotationCreation
           canvases={canvases}
           receiveAnnotation={receiveAnnotation}
           config={config}
+          windowId={windowId}
         />
       ),
       position: 'right',