First version of freehand drawing mode based on the FreeformPathTool from @psychobolt/react-paperjs

src/AnnotationCreation.js

@@ -9,6 +9,9 @@ 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 GestureIcon from '@material-ui/icons/Gesture';
+import ClosedPolygonIcon from '@material-ui/icons/ChangeHistory';
+import OpenPolygonIcon from '@material-ui/icons/ShowChart';
 import FormatColorFillIcon from '@material-ui/icons/FormatColorFill';
 import StrokeColorIcon from '@material-ui/icons/BorderColor';
 import LineWeightIcon from '@material-ui/icons/LineWeight';
@@ -41,6 +44,7 @@ class AnnotationCreation extends Component {
     this.state = {
       activeTool: 'cursor',
       annoBody: '',
+      closedMode: 'closed',
       colorPopoverOpen: false,
       currentColorType: false,
       fillColor: null,
@@ -58,6 +62,7 @@ class AnnotationCreation extends Component {
     this.updateBody = this.updateBody.bind(this);
     this.updateGeometry = this.updateGeometry.bind(this);
     this.changeTool = this.changeTool.bind(this);
+    this.changeClosedMode = this.changeClosedMode.bind(this);
     this.openChooseColor = this.openChooseColor.bind(this);
     this.openChooseLineWeight = this.openChooseLineWeight.bind(this);
     this.handleLineWeightSelect = this.handleLineWeightSelect.bind(this);
@@ -156,6 +161,13 @@ class AnnotationCreation extends Component {
     });
   }
 
+  /** */
+  changeClosedMode(e) {
+    this.setState({
+      closedMode: e.currentTarget.value,
+    });
+  }
+
   /** */
   updateBody(annoBody) {
     this.setState({ annoBody });
@@ -176,7 +188,7 @@ class AnnotationCreation extends Component {
 
     const {
       activeTool, colorPopoverOpen, currentColorType, fillColor, popoverAnchorEl, strokeColor,
-      popoverLineWeightAnchorEl, lineWeightPopoverOpen, strokeWidth, annoBody, svg,
+      popoverLineWeightAnchorEl, lineWeightPopoverOpen, strokeWidth, closedMode, annoBody, svg,
     } = this.state;
     return (
       <CompanionWindow
@@ -189,6 +201,7 @@ class AnnotationCreation extends Component {
           fillColor={fillColor}
           strokeColor={strokeColor}
           strokeWidth={strokeWidth}
+          closed={closedMode === 'closed'}
           svg={svg}
           updateGeometry={this.updateGeometry}
           windowId={windowId}
@@ -235,6 +248,9 @@ class AnnotationCreation extends Component {
                   <ToggleButton value="polygon" aria-label="add a polygon">
                     <PolygonIcon />
                   </ToggleButton>
+                  <ToggleButton value="freehand" aria-label="free hand polygon">
+                    <GestureIcon />
+                  </ToggleButton>
                 </ToggleButtonGroup>
               </Paper>
             </Grid>
@@ -275,6 +291,27 @@ class AnnotationCreation extends Component {
                   <ArrowDropDownIcon />
                 </ToggleButton>
               </ToggleButtonGroup>
+
+              <Divider flexItem orientation="vertical" className={classes.divider} />
+              { /* close / open polygon mode only for freehand drawing mode. */
+                activeTool === 'freehand'
+                  ? (
+                    <ToggleButtonGroup
+                      size="small"
+                      value={closedMode}
+                      onChange={this.changeClosedMode}
+                    >
+                      <ToggleButton value="closed">
+                        <ClosedPolygonIcon />
+                      </ToggleButton>
+                      <ToggleButton value="open">
+                        <OpenPolygonIcon />
+                      </ToggleButton>
+                    </ToggleButtonGroup>
+                  )
+                  : null
+              }
+
             </Grid>
           </Grid>
           <Grid container>

src/AnnotationDrawing.js

@@ -3,7 +3,14 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { OSDReferences } from 'mirador/dist/es/src/plugins/OSDReferences';
 import { renderWithPaperScope, PaperContainer } from '@psychobolt/react-paperjs';
-import { EllipseTool, PolygonTool, RectangleTool } from '@psychobolt/react-paperjs-editor';
+import
+{
+  EllipseTool,
+  PolygonTool,
+  RectangleTool,
+  FreeformPathTool,
+}
+  from '@psychobolt/react-paperjs-editor';
 import { Point } from 'paper';
 import flatten from 'lodash/flatten';
 import EditTool from './EditTool';
@@ -26,13 +33,13 @@ class AnnotationDrawing extends Component {
 
   /** */
   addPath(path) {
-    const { strokeWidth, updateGeometry } = this.props;
+    const { closed, strokeWidth, updateGeometry } = this.props;
     // TODO: Compute xywh of bounding container of layers
     const { bounds } = path;
     const {
       x, y, width, height,
     } = bounds;
-
+    path.closed = closed; // eslint-disable-line no-param-reassign
     // Reset strokeWidth for persistence
     path.strokeWidth = strokeWidth; // eslint-disable-line no-param-reassign
     path.data.state = null; // eslint-disable-line no-param-reassign
@@ -84,6 +91,9 @@ class AnnotationDrawing extends Component {
       case 'polygon':
         ActiveTool = PolygonTool;
         break;
+      case 'freehand':
+        ActiveTool = FreeformPathTool;
+        break;
       case 'edit':
         ActiveTool = EditTool;
         break;
@@ -140,6 +150,7 @@ class AnnotationDrawing extends Component {
 
 AnnotationDrawing.propTypes = {
   activeTool: PropTypes.string,
+  closed: PropTypes.bool,
   fillColor: PropTypes.string,
   strokeColor: PropTypes.string,
   strokeWidth: PropTypes.number,
@@ -150,6 +161,7 @@ AnnotationDrawing.propTypes = {
 
 AnnotationDrawing.defaultProps = {
   activeTool: null,
+  closed: true,
   fillColor: null,
   strokeColor: '#00BFFF',
   strokeWidth: 1,