Increase the handle size and provide better experience for resizing and moving shapes

src/AnnotationDrawing.js

@@ -106,6 +106,8 @@ class AnnotationDrawing extends Component {
             if (svg && paths.length === 0) {
               paper.project.importSVG(svg);
             }
+            paper.settings.handleSize = 10; // eslint-disable-line no-param-reassign
+            paper.settings.hitTolerance = 10; // eslint-disable-line no-param-reassign
             return (
               <ActiveTool
                 onPathAdd={this.addPath}

src/EditTool.js

@@ -29,7 +29,7 @@ class EditTool extends Component {
         path.data.state = 'moving'; // eslint-disable-line no-param-reassign
         return;
       }
-      if (path.hitTest(e.point, { segments: true, tolerance: 8 })) {
+      if (path.hitTest(e.point, { segments: true, tolerance: 15 })) {
         path.data.state = 'resizing'; // eslint-disable-line no-param-reassign
         path.data.bounds = path.bounds.clone(); // eslint-disable-line no-param-reassign
         path.data.scaleBase = e.point.subtract( // eslint-disable-line no-param-reassign
@@ -78,11 +78,42 @@ class EditTool extends Component {
 
     project.activeLayer.selected = false;
 
+    let anySelected = false;
     paths.forEach((path) => {
-      if (path.contains(e.point)) {
+      if (path.contains(e.point) || path.hitTest(e.point, { segments: true, tolerance: 15 })) {
+        const hitTest = path.hitTest(e.point, { segments: true, tolerance: 15 });
+        let cursor = 'move';
+        if (hitTest && hitTest.type === 'segment') {
+          const difference = path.position.subtract(hitTest.segment.point);
+          // Find the angle from the center of the path to the handle.
+          const roundedAngle = Math.round(
+            Math.atan(difference.y / difference.x) * 180 / Math.PI / 45,
+          ) * 45;
+          switch (true) {
+            case (roundedAngle === 45):
+              cursor = 'nwse-resize';
+              break;
+            case (roundedAngle === -45):
+              cursor = 'nesw-resize';
+              break;
+            case (roundedAngle === 0):
+              cursor = 'ew-resize';
+              break;
+            case (Math.abs(roundedAngle) === 90):
+              cursor = 'ns-resize';
+              break;
+            default:
+              return;
+          }
+        }
+        paper.view.getElement().style.cursor = cursor;
+        anySelected = true;
         path.selected = true; // eslint-disable-line no-param-reassign
       }
     });
+    if (!anySelected) {
+      paper.view.getElement().style.cursor = 'auto';
+    }
   }
 
   /** */
@@ -97,6 +128,7 @@ class EditTool extends Component {
       path.data.state = null; // eslint-disable-line no-param-reassign
       onPathAdd(path);
     });
+    paper.view.getElement().style.cursor = 'auto';
   }
 
   /** */