Better sync between drawing canvas & video size

Not clear why center is relative to video dimensions but canvas size is
relative to the other canvas (which draw already existing annotations).

There may be some bugs from paperjs, see the following issues
https://github.com/paperjs/paper.js/issues/662
https://github.com/paperjs/paper.js/issues/668
https://github.com/paperjs/paper.js/issues/1757

package.json

@@ -29,7 +29,8 @@
     "draft-js-import-html": "^1.4.1",
     "material-ui-color-components": "^0.3.0",
     "paper": "^0.12.11",
-    "react-color": "^2.18.1"
+    "react-color": "^2.18.1",
+    "react-resize-observer": "^1.1.1"
   },
   "peerDependencies": {
     "@material-ui/core": "^4.9.13",

src/AnnotationDrawing.js

@@ -45,11 +45,12 @@ class AnnotationDrawing extends Component {
   onPaperResize(ev) {
     const { windowId } = this.props;
     if (VideosReferences.get(windowId) && this.paper) {
-      const { canvasOverlay } = VideosReferences.get(windowId);
-      const { height } = canvasOverlay.ref.current;
-      const { width } = canvasOverlay.ref.current;
-      this.paper.view.viewSize = new this.paper.Size(width, height);
+      const { canvasOverlay, video } = VideosReferences.get(windowId);
+      const { height, width } = canvasOverlay.ref.current;
+      const { videoHeight, videoWidth } = video;
+      this.paper.view.center = new Point(videoWidth / 2, videoHeight / 2);
       this.paper.view.zoom = canvasOverlay.scale;
+      this.paper.view.viewSize = new this.paper.Size(width, height);
     }
   }
 
@@ -81,7 +82,14 @@ class AnnotationDrawing extends Component {
     if (videoref) {
       const { height, width } = videoref.canvasOverlay.ref.current;
       return {
-        canvasProps: { height, style: { left: 0, position: 'absolute', top: 0 }, width },
+        canvasProps: {
+          height,
+          resize: 'true',
+          style: {
+            left: 0, position: 'absolute', top: 0,
+          },
+          width,
+        },
         viewProps: {
           center: new Point(width / 2, height / 2),
           height,