Add cursor tool and enable multi-polygon annos

src/AnnotationCreation.js

@@ -13,19 +13,22 @@ import FormatColorFillIcon from '@material-ui/icons/FormatColorFill';
 import StrokeColorIcon from '@material-ui/icons/BorderColor';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import Popover from '@material-ui/core/Popover';
+import Divider from '@material-ui/core/Divider';
 import { SketchPicker } from 'react-color';
 import { v4 as uuid } from 'uuid';
 import { withStyles } from '@material-ui/core/styles';
 import AnnotationDrawing from './AnnotationDrawing';
 import TextEditor from './TextEditor';
 import WebAnnotation from './WebAnnotation';
+import CursorIcon from './icons/Cursor';
+
 /** */
 class AnnotationCreation extends Component {
   /** */
   constructor(props) {
     super(props);
     this.state = {
-      activeTool: null,
+      activeTool: 'cursor',
       annoBody: '',
       colorPopoverOpen: false,
       currentColorType: false,
@@ -123,7 +126,6 @@ class AnnotationCreation extends Component {
     } = this.state;
     return (
       <Paper className={classes.root}>
-        { activeTool && (
         <AnnotationDrawing
           activeTool={activeTool}
           fillColor={fillColor}
@@ -131,7 +133,6 @@ class AnnotationCreation extends Component {
           updateGeometry={this.updateGeometry}
           windowId={windowId}
         />
-        )}
         <form onSubmit={this.submitForm}>
           <Grid container>
             <Grid item xs={12}>
@@ -140,7 +141,22 @@ class AnnotationCreation extends Component {
               </Typography>
             </Grid>
             <Grid item xs={12}>
+              <Paper elevation={0} className={classes.paper}>
+                <ToggleButtonGroup
+                  className={classes.grouped}
+                  value={activeTool}
+                  exclusive
+                  onChange={this.changeTool}
+                  aria-label="tool selection"
+                  size="small"
+                >
+                  <ToggleButton value="cursor" aria-label="select cursor">
+                    <CursorIcon />
+                  </ToggleButton>
+                </ToggleButtonGroup>
+                <Divider flexItem orientation="vertical" className={classes.divider} />
                 <ToggleButtonGroup
+                  className={classes.grouped}
                   value={activeTool}
                   exclusive
                   onChange={this.changeTool}
@@ -157,6 +173,7 @@ class AnnotationCreation extends Component {
                     <PolygonIcon />
                   </ToggleButton>
                 </ToggleButtonGroup>
+              </Paper>
             </Grid>
           </Grid>
           <Grid container>
@@ -226,6 +243,23 @@ class AnnotationCreation extends Component {
 
 /** */
 const styles = (theme) => ({
+  divider: {
+    margin: theme.spacing(1, 0.5),
+  },
+  grouped: {
+    '&:first-child': {
+      borderRadius: theme.shape.borderRadius,
+    },
+    '&:not(:first-child)': {
+      borderRadius: theme.shape.borderRadius,
+    },
+    border: 'none',
+    margin: theme.spacing(0.5),
+  },
+  paper: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
   root: {
     padding: theme.spacing(1),
   },
@@ -235,9 +269,7 @@ AnnotationCreation.propTypes = {
   canvases: PropTypes.arrayOf(
     PropTypes.shape({ id: PropTypes.string, index: PropTypes.number }),
   ),
-  classes: PropTypes.shape({
-    root: PropTypes.string,
-  }).isRequired,
+  classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   config: PropTypes.shape({
     annotation: PropTypes.shape({
       adapter: PropTypes.func,

src/AnnotationDrawing.js

@@ -24,17 +24,16 @@ class AnnotationDrawing extends Component {
   /** */
   addPath(path) {
     const { strokeWidth, updateGeometry } = this.props;
+    // TODO: Compute xywh of bounding container of layers
     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
-
+    path.strokeWidth = strokeWidth; // eslint-disable-line no-param-reassign
     updateGeometry({
-      svg: pathClone.exportSVG({
+      svg: path.project.exportSVG({
         asString: true,
       }),
       xywh: [
@@ -52,7 +51,7 @@ class AnnotationDrawing extends Component {
     const {
       activeTool, fillColor, strokeColor, strokeWidth,
     } = this.props;
-    if (!activeTool) return null;
+    if (!activeTool || activeTool === 'cursor') return null;
     // Setup Paper View to have the same center and zoom as the OSD Viewport
     const viewportZoom = this.OSDReference.viewer.viewport.getZoom(true);
     const image1 = this.OSDReference.viewer.world.getItemAt(0);

src/icons/Cursor.js

+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+/**
+ * CursorIcon ~
+*/
+export default function CursorIcon(props) {
+  return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <SvgIcon {...props}>
+      <svg
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        x="0px"
+        y="0px"
+        viewBox="1064.7701 445.5539 419.8101 717.0565"
+        enableBackground="new 1064.7701 445.5539 419.8101 717.0565"
+        xmlSpace="preserve"
+      >
+        <polygon fill="#231F20" points="1283.1857,1127.3097 1406.1421,1077.6322 1314.2406,850.1678 1463.913,852.7823 1093.4828,480.8547 1085.4374,1005.6964 1191.2842,899.8454 " />
+      </svg>
+    </SvgIcon>
+  );
+}