Use EllipseTool instead of Circle fixes #3

package.json

@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@psychobolt/react-paperjs": "0.0.56",
-    "@psychobolt/react-paperjs-editor": "0.0.10",
+    "@psychobolt/react-paperjs-editor": "0.0.11",
     "draft-js": "^0.11.5",
     "draft-js-export-html": "^1.4.1",
     "draft-js-import-html": "^1.4.1",

src/AnnotationCreation.js

@@ -217,7 +217,7 @@ class AnnotationCreation extends Component {
                   <ToggleButton value="rectangle" aria-label="add a rectangle">
                     <RectangleIcon />
                   </ToggleButton>
-                  <ToggleButton value="circle" aria-label="add a circle">
+                  <ToggleButton value="ellipse" aria-label="add a circle">
                     <CircleIcon />
                   </ToggleButton>
                   <ToggleButton value="polygon" aria-label="add a polygon">

src/AnnotationDrawing.js

@@ -3,7 +3,7 @@ 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 { CircleTool, PolygonTool, RectangleTool } from '@psychobolt/react-paperjs-editor';
+import { EllipseTool, PolygonTool, RectangleTool } from '@psychobolt/react-paperjs-editor';
 import { Point } from 'paper';
 import flatten from 'lodash/flatten';
 
@@ -80,8 +80,8 @@ class AnnotationDrawing extends Component {
       case 'rectangle':
         ActiveTool = RectangleTool;
         break;
-      case 'circle':
-        ActiveTool = CircleTool;
+      case 'ellipse':
+        ActiveTool = EllipseTool;
         break;
       case 'polygon':
         ActiveTool = PolygonTool;
@@ -113,6 +113,7 @@ class AnnotationDrawing extends Component {
                   strokeColor,
                   strokeWidth: strokeWidth / paper.view.zoom,
                 }}
+                paper={paper}
               />
             );
           })}