Enable moving of shapes

src/AnnotationCreation.js

@@ -13,6 +13,7 @@ import FormatColorFillIcon from '@material-ui/icons/FormatColorFill';
 import StrokeColorIcon from '@material-ui/icons/BorderColor';
 import LineWeightIcon from '@material-ui/icons/LineWeight';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
+import FormatShapesIcon from '@material-ui/icons/FormatShapes';
 import Popover from '@material-ui/core/Popover';
 import Divider from '@material-ui/core/Divider';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -204,6 +205,9 @@ class AnnotationCreation extends Component {
                   <ToggleButton value="cursor" aria-label="select cursor">
                     <CursorIcon />
                   </ToggleButton>
+                  <ToggleButton value="edit" aria-label="select cursor">
+                    <FormatShapesIcon />
+                  </ToggleButton>
                 </ToggleButtonGroup>
                 <Divider flexItem orientation="vertical" className={classes.divider} />
                 <ToggleButtonGroup

src/AnnotationDrawing.js

@@ -6,6 +6,8 @@ import { renderWithPaperScope, PaperContainer } from '@psychobolt/react-paperjs'
 import { EllipseTool, PolygonTool, RectangleTool } from '@psychobolt/react-paperjs-editor';
 import { Point } from 'paper';
 import flatten from 'lodash/flatten';
+import EditTool from './EditTool';
+import { mapChildren } from './utils';
 
 /** */
 class AnnotationDrawing extends Component {
@@ -31,16 +33,9 @@ class AnnotationDrawing extends Component {
       x, y, width, height,
     } = bounds;
 
-    /** */
-    function mapChildren(layerThing) {
-      if (layerThing.children) {
-        return flatten(layerThing.children.map((child) => mapChildren(child)));
-      }
-      return layerThing;
-    }
-
     // Reset strokeWidth for persistence
     path.strokeWidth = strokeWidth; // eslint-disable-line no-param-reassign
+    path.data.state = null; // eslint-disable-line no-param-reassign
     const svgExports = flatten(path.project.layers.map((layer) => (
       flatten(mapChildren(layer)).map((aPath) => aPath.exportSVG({ asString: true }))
     )));
@@ -86,6 +81,9 @@ class AnnotationDrawing extends Component {
       case 'polygon':
         ActiveTool = PolygonTool;
         break;
+      case 'edit':
+        ActiveTool = EditTool;
+        break;
       default:
         break;
     }

src/EditTool.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Tool } from '@psychobolt/react-paperjs';
+import flatten from 'lodash/flatten';
+import { mapChildren } from './utils';
+/** */
+class EditTool extends Component {
+  /** */
+  constructor(props) {
+    super(props);
+    this.onMouseMove = this.onMouseMove.bind(this);
+    this.onMouseDown = this.onMouseDown.bind(this);
+    this.onMouseDrag = this.onMouseDrag.bind(this);
+    this.onMouseUp = this.onMouseUp.bind(this);
+  }
+
+  /** */
+  onMouseDown(e) {
+    const { paper } = this.props;
+    const { project } = paper;
+
+    const paths = flatten(project.layers.map((layer) => (
+      flatten(mapChildren(layer)).map((aPath) => aPath)
+    )));
+
+    paths.forEach((path) => {
+      if (path.contains(e.point)) {
+        path.data.state = 'moving'; // eslint-disable-line no-param-reassign
+      }
+    });
+  }
+
+  /** */
+  onMouseDrag(e) {
+    const { paper } = this.props;
+    const { project } = paper;
+
+    const paths = flatten(project.layers.map((layer) => (
+      flatten(mapChildren(layer)).map((aPath) => aPath)
+    )));
+
+    paths.forEach((path) => {
+      if (path.data.state === 'moving') {
+        // We need to do the JavaScript version rather than the PaperScript
+        // https://github.com/paperjs/paper.js/issues/1486
+        path.position = path.position.add( // eslint-disable-line no-param-reassign
+          e.point.subtract(e.lastPoint),
+        );
+      }
+    });
+  }
+
+  /** */
+  onMouseMove(e) {
+    const { paper } = this.props;
+    const { project } = paper;
+
+    const paths = flatten(project.layers.map((layer) => (
+      flatten(mapChildren(layer)).map((aPath) => aPath)
+    )));
+
+
+    project.activeLayer.selected = false;
+
+    paths.forEach((path) => {
+      if (path.contains(e.point)) {
+        path.selected = true; // eslint-disable-line no-param-reassign
+      }
+    });
+  }
+
+  /** */
+  onMouseUp(e) {
+    const { paper } = this.props;
+    const { project } = paper;
+
+    const paths = flatten(project.layers.map((layer) => (
+      flatten(mapChildren(layer)).map((aPath) => aPath)
+    )));
+    paths.forEach((path) => {
+      path.data.state = null; // eslint-disable-line no-param-reassign
+    });
+  }
+
+  /** */
+  render() {
+    return (
+      <Tool
+        onMouseDown={this.onMouseDown}
+        onMouseDrag={this.onMouseDrag}
+        onMouseMove={this.onMouseMove}
+        onMouseUp={this.onMouseUp}
+      />
+    );
+  }
+}
+
+EditTool.propTypes = {
+  paper: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
+export default React.forwardRef((props, ref) => <EditTool innerRef={ref} {...props} />); // eslint-disable-line

src/utils.js

+import flatten from 'lodash/flatten';
+
+/** */
+export function mapChildren(layerThing) {
+  if (layerThing.children) {
+    return flatten(layerThing.children.map((child) => mapChildren(child)));
+  }
+  return layerThing;
+}