Setup additional tools to be used and a toggle button group

package.json

@@ -28,6 +28,7 @@
   "peerDependencies": {
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.52",
     "lodash": "^4.17.11",
     "mirador": "^3.0.0-beta.8",
     "prop-types": "^15.7.2",
@@ -41,6 +42,7 @@
     "@babel/preset-react": "^7.9.4",
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.52",
     "babel-eslint": "^10.1.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",

src/AnnotationCreation.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Button from '@material-ui/core/Button';
-import { MiradorMenuButton } from 'mirador/dist/es/src/components/MiradorMenuButton';
-import AddBoxIcon from '@material-ui/icons/AddBox';
+import ToggleButton from '@material-ui/lab/ToggleButton';
+import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import RectangleIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+import CircleIcon from '@material-ui/icons/RadioButtonUnchecked';
+import PolygonIcon from '@material-ui/icons/Timeline';
 import TextField from '@material-ui/core/TextField';
 import { v4 as uuid } from 'uuid';
 import AnnotationDrawing from './AnnotationDrawing';
@@ -19,7 +22,7 @@ class AnnotationCreation extends Component {
     this.submitForm = this.submitForm.bind(this);
     this.updateBody = this.updateBody.bind(this);
     this.updateGeometry = this.updateGeometry.bind(this);
-    this.addBox = this.addBox.bind(this);
+    this.changeTool = this.changeTool.bind(this);
   }
 
   /** */
@@ -45,9 +48,9 @@ class AnnotationCreation extends Component {
   }
 
   /** */
-  addBox() {
+  changeTool(e, tool) {
     this.setState({
-      activeTool: 'rectangle',
+      activeTool: tool,
     });
   }
 
@@ -77,12 +80,23 @@ class AnnotationCreation extends Component {
           />
         )}
         <form onSubmit={this.submitForm}>
-          <MiradorMenuButton
-            aria-label="Add Box"
-            onClick={this.addBox}
+          <ToggleButtonGroup
+            value={activeTool}
+            exclusive
+            onChange={this.changeTool}
+            aria-label="tool selection"
+            size="small"
           >
-            <AddBoxIcon />
-          </MiradorMenuButton>
+            <ToggleButton value="rectangle" aria-label="add a rectangle">
+              <RectangleIcon />
+            </ToggleButton>
+            <ToggleButton value="circle" aria-label="add a circle">
+              <CircleIcon />
+            </ToggleButton>
+            <ToggleButton value="polygon" aria-label="add a polygon">
+              <PolygonIcon />
+            </ToggleButton>
+          </ToggleButtonGroup>
           <TextField
             multiline
             rows={6}

src/AnnotationDrawing.js

@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { OSDReferences } from 'mirador/dist/es/src/plugins/OSDReferences';
-import { PaperContainer } from '@psychobolt/react-paperjs';
-import { RectangleTool } from '@psychobolt/react-paperjs-editor';
+import { renderWithPaperScope, PaperContainer } from '@psychobolt/react-paperjs';
+import { CircleTool, PolygonTool, RectangleTool } from '@psychobolt/react-paperjs-editor';
 import { Point } from 'paper';
 
 /** */
@@ -23,14 +23,18 @@ class AnnotationDrawing extends Component {
 
   /** */
   addPath(path) {
-    const { updateGeometry } = this.props;
+    const { strokeWidth, updateGeometry } = this.props;
     const { bounds } = path;
     const {
       x, y, width, height,
     } = bounds;
 
+    // Reset strokeWidth for persistence
+    const pathClone = path.clone();
+    pathClone.strokeWidth = strokeWidth; // eslint-disable-line no-param-reassign
+
     updateGeometry({
-      svg: path.exportSVG({
+      svg: pathClone.exportSVG({
         asString: true,
       }),
       xywh: [
@@ -45,7 +49,7 @@ class AnnotationDrawing extends Component {
 
   /** */
   paperThing() {
-    const { activeTool } = this.props;
+    const { activeTool, strokeWidth } = this.props;
     if (!activeTool) return null;
     // Setup Paper View to have the same center and zoom as the OSD Viewport
     const viewportZoom = this.OSDReference.viewer.viewport.getZoom(true);
@@ -58,6 +62,21 @@ class AnnotationDrawing extends Component {
       zoom: image1.viewportToImageZoom(viewportZoom),
     };
 
+    let ActiveTool = RectangleTool;
+    switch (activeTool) {
+      case 'rectangle':
+        ActiveTool = RectangleTool;
+        break;
+      case 'circle':
+        ActiveTool = CircleTool;
+        break;
+      case 'polygon':
+        ActiveTool = PolygonTool;
+        break;
+      default:
+        break;
+    }
+
     return (
       <div
         className="foo"
@@ -69,10 +88,12 @@ class AnnotationDrawing extends Component {
           canvasProps={{ style: { height: '100%', width: '100%' } }}
           viewProps={viewProps}
         >
-          <RectangleTool
+          {renderWithPaperScope((paper) => (
+            <ActiveTool
               onPathAdd={this.addPath}
-            pathProps={{ fillColor: null, strokeColor: '#00BFFF' }}
+              pathProps={{ fillColor: null, strokeColor: '#00BFFF', strokeWidth: strokeWidth / paper.view.zoom }}
             />
+          ))}
         </PaperContainer>
       </div>
     );
@@ -93,11 +114,13 @@ class AnnotationDrawing extends Component {
 AnnotationDrawing.propTypes = {
   activeTool: PropTypes.string,
   updateGeometry: PropTypes.func.isRequired,
+  strokeWidth: PropTypes.number,
   windowId: PropTypes.string.isRequired,
 };
 
 AnnotationDrawing.defaultProps = {
   activeTool: null,
+  strokeWidth: 1,
 };