Use 'grab' cursor when moving either end of a line shape [2038]

Author: rmoestl

build/plotcss.js

@@ -30,6 +30,7 @@ var rules = {
     "X .cursor-nw-resize": "cursor:nw-resize;",
     "X .cursor-n-resize": "cursor:n-resize;",
     "X .cursor-ne-resize": "cursor:ne-resize;",
+    "X .cursor-grab": "cursor:-webkit-grab;cursor:grab;",
     "X .modebar": "position:absolute;top:2px;right:2px;z-index:1001;background:rgba(255,255,255,0.7);",
     "X .modebar--hover": "opacity:0;-webkit-transition:opacity 0.3s ease 0s;-moz-transition:opacity 0.3s ease 0s;-ms-transition:opacity 0.3s ease 0s;-o-transition:opacity 0.3s ease 0s;transition:opacity 0.3s ease 0s;",
     "X:hover .modebar--hover": "opacity:1;",

src/components/shapes/draw.js

@@ -181,7 +181,6 @@ function setupDragElement(gd, shapePath, shapeOptions, index, shapeLayer) {
 
         // Helper circles for resizing
         var circleStyle = {
-            'cursor': 'default',
             'fill-opacity': '0' // ensure not visible
         };
         var circleRadius = sensoryWidth / 2 > minSensoryWidth ? sensoryWidth / 2 : minSensoryWidth;
@@ -193,7 +192,8 @@ function setupDragElement(gd, shapePath, shapeOptions, index, shapeLayer) {
               'cy': yPixelSized ? y2p(shapeOptions.yanchor) - shapeOptions.y0 : y2p(shapeOptions.y0),
               'r': circleRadius
           })
-          .style(circleStyle);
+          .style(circleStyle)
+          .classed('cursor-grab', true);
 
         g.append('circle')
           .attr({
@@ -202,7 +202,8 @@ function setupDragElement(gd, shapePath, shapeOptions, index, shapeLayer) {
               'cy': yPixelSized ? y2p(shapeOptions.yanchor) - shapeOptions.y1 : y2p(shapeOptions.y1),
               'r': circleRadius
           })
-          .style(circleStyle);
+          .style(circleStyle)
+          .classed('cursor-grab', true);
 
         return g;
     }

src/css/_cursor.scss

@@ -14,3 +14,7 @@
 .cursor-nw-resize { cursor: nw-resize; }
 .cursor-n-resize { cursor: n-resize; }
 .cursor-ne-resize { cursor: ne-resize; }
+.cursor-grab {
+  cursor: -webkit-grab; // For Chrome
+  cursor: grab;
+}