Extract AnnotationDrawing component

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 { Point } from 'paper';
+import AnnotationDrawing from './AnnotationDrawing';
 import WebAnnotation from './WebAnnotation';
 /** */
 class AnnotationCreation extends Component {
@@ -17,24 +13,15 @@ class AnnotationCreation extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      activeTool: null, annoBody: '', svg: null, xywh: '0,0,1000,1000',
+      activeTool: null, annoBody: '', svg: null, xywh: null,
     };
 
-    this.paperScope = null;
-    this.OSDReference = null;
-
     this.submitForm = this.submitForm.bind(this);
     this.updateBody = this.updateBody.bind(this);
-    this.addPath = this.addPath.bind(this);
+    this.updateGeometry = this.updateGeometry.bind(this);
     this.addBox = this.addBox.bind(this);
   }
 
-  /** */
-  componentDidMount() {
-    const { windowId } = this.props;
-    this.OSDReference = OSDReferences.get(windowId).current;
-  }
-
   /** */
   submitForm(e) {
     e.preventDefault();
@@ -70,68 +57,25 @@ class AnnotationCreation extends Component {
   }
 
   /** */
-  addPath(path) {
-    const { bounds } = path;
-    const {
-      x, y, width, height,
-    } = bounds;
-
+  updateGeometry({ svg, xywh }) {
     this.setState({
-      svg: path.exportSVG({
-        asString: true,
-      }),
-      xywh: [
-        Math.floor(x),
-        Math.floor(y),
-        Math.floor(width),
-        Math.floor(height),
-      ].join(','),
+      svg, xywh,
     });
   }
 
-  /** */
-  paperThing() {
-    const { activeTool } = this.state;
-    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);
-    const image1 = this.OSDReference.viewer.world.getItemAt(0);
-    const center = this.OSDReference.viewer.viewport.viewportToImageCoordinates(
-      this.OSDReference.viewer.viewport.getCenter(true),
-    );
-    const viewProps = {
-      center: new Point(center.x, center.y),
-      zoom: image1.viewportToImageZoom(viewportZoom),
-    };
-
-    return (
-      <div
-        className="foo"
-        style={{
-          height: '100%', left: 0, position: 'absolute', top: 0, width: '100%',
-        }}
-      >
-        <PaperContainer
-          canvasProps={{ style: { height: '100%', width: '100%' } }}
-          viewProps={viewProps}
-        >
-          <RectangleTool
-            onPathAdd={this.addPath}
-            pathProps={{ fillColor: null, strokeColor: '#00BFFF' }}
-          />
-        </PaperContainer>
-      </div>
-    );
-  }
-
   /** */
   render() {
-    const { annoBody } = this.state;
     const { windowId } = this.props;
-    this.OSDReference = OSDReferences.get(windowId).current;
+    const { activeTool, annoBody } = this.state;
     return (
       <div>
-        {ReactDOM.createPortal(this.paperThing(), this.OSDReference.viewer.element)}
+        { activeTool && (
+          <AnnotationDrawing
+            activeTool={activeTool}
+            updateGeometry={this.updateGeometry}
+            windowId={windowId}
+          />
+        )}
         <form onSubmit={this.submitForm}>
           <MiradorMenuButton
             aria-label="Add Box"

src/AnnotationDrawing.js

+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 { Point } from 'paper';
+
+/** */
+class AnnotationDrawing extends Component {
+  /** */
+  constructor(props) {
+    super(props);
+
+    this.addPath = this.addPath.bind(this);
+  }
+
+  /** */
+  componentDidMount() {
+    const { windowId } = this.props;
+    this.OSDReference = OSDReferences.get(windowId).current;
+  }
+
+  /** */
+  addPath(path) {
+    const { updateGeometry } = this.props;
+    const { bounds } = path;
+    const {
+      x, y, width, height,
+    } = bounds;
+
+    updateGeometry({
+      svg: path.exportSVG({
+        asString: true,
+      }),
+      xywh: [
+        Math.floor(x),
+        Math.floor(y),
+        Math.floor(width),
+        Math.floor(height),
+      ].join(','),
+    });
+  }
+
+
+  /** */
+  paperThing() {
+    const { activeTool } = 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);
+    const image1 = this.OSDReference.viewer.world.getItemAt(0);
+    const center = this.OSDReference.viewer.viewport.viewportToImageCoordinates(
+      this.OSDReference.viewer.viewport.getCenter(true),
+    );
+    const viewProps = {
+      center: new Point(center.x, center.y),
+      zoom: image1.viewportToImageZoom(viewportZoom),
+    };
+
+    return (
+      <div
+        className="foo"
+        style={{
+          height: '100%', left: 0, position: 'absolute', top: 0, width: '100%',
+        }}
+      >
+        <PaperContainer
+          canvasProps={{ style: { height: '100%', width: '100%' } }}
+          viewProps={viewProps}
+        >
+          <RectangleTool
+            onPathAdd={this.addPath}
+            pathProps={{ fillColor: null, strokeColor: '#00BFFF' }}
+          />
+        </PaperContainer>
+      </div>
+    );
+  }
+
+  /** */
+  render() {
+    const { windowId } = this.props;
+    this.OSDReference = OSDReferences.get(windowId).current;
+    return (
+      <>
+        {ReactDOM.createPortal(this.paperThing(), this.OSDReference.viewer.element)}
+      </>
+    );
+  }
+}
+
+AnnotationDrawing.propTypes = {
+  activeTool: PropTypes.string,
+  updateGeometry: PropTypes.func.isRequired,
+  windowId: PropTypes.string.isRequired,
+};
+
+AnnotationDrawing.defaultProps = {
+  activeTool: null,
+};
+
+
+export default AnnotationDrawing;