Move mouseMove handler up to the editor. (mozilla-services#4458)

server/src/pages/shot/crop-tool.js

@@ -47,7 +47,6 @@ exports.CropTool = class CropTool extends React.Component {
       ref={this.el}
       className="crop-container centered"
       onMouseDown={this.onMouseDown.bind(this)}
-      onMouseMove={this.onMouseMove.bind(this)}
       style={{height: this.props.baseCanvas.style.height, width: this.props.baseCanvas.style.width}}>
       {cropSelectionBox}
     </div>;
@@ -227,10 +226,10 @@ exports.CropTool = class CropTool extends React.Component {
   getDraggedSelection(e) {
     const currentMousePosition = this.captureMousePosition(e);
     return new Selection(
-      mousedownPosition.x,
-      mousedownPosition.y,
-      currentMousePosition.x,
-      currentMousePosition.y
+      clamp(mousedownPosition.x, 0, this.canvasWidth),
+      clamp(mousedownPosition.y, 0, this.canvasHeight),
+      clamp(currentMousePosition.x, 0, this.canvasWidth),
+      clamp(currentMousePosition.y, 0, this.canvasHeight)
     );
   }
 
@@ -244,7 +243,7 @@ exports.CropTool = class CropTool extends React.Component {
 
   onMouseMove(e) {
     if (!isMousedown) {
-      return;
+      return false;
     }
 
     if (this.state.selectionState === SelectionState.CREATING) {
@@ -253,7 +252,7 @@ exports.CropTool = class CropTool extends React.Component {
       if (cropSelection.width > MIN_WIDTH && cropSelection.height > MIN_HEIGHT) {
         this.setState({cropSelection});
       }
-      return;
+      return true;
     }
 
     let updatedSelection;
@@ -311,6 +310,7 @@ exports.CropTool = class CropTool extends React.Component {
 
     this.setState({cropSelection: updatedSelection});
     this.scrollIfByEdge(e);
+    return true;
   }
 
   scrollIfByEdge(e) {

server/src/pages/shot/drawing-tool.js

@@ -15,7 +15,6 @@ exports.DrawingTool = class DrawingTool extends React.Component {
       ref={this.canvas}
       className={`image-holder centered ${this.state.classNames}`}
       onMouseDown={this.onMouseDown.bind(this)}
-      onMouseMove={this.onMouseMove.bind(this)}
       width={this.props.baseCanvas.width}
       height={this.props.baseCanvas.height}
       style={{width: this.props.baseCanvas.style.width,
@@ -60,12 +59,13 @@ exports.DrawingTool = class DrawingTool extends React.Component {
 
   onMouseMove(e) {
     if (!this.isMousedown) {
-      return;
+      return false;
     }
     e.preventDefault();
     const position = this.captureMousePosition(e);
     this.draw(position);
     this.updateDrawnArea(position);
+    return true;
   }
 
   draw(position) {

server/src/pages/shot/editor.js

@@ -24,14 +24,16 @@ exports.Editor = class Editor extends React.Component {
       actionsDisabled: true
     };
     this.onMouseUp = this.onMouseUp.bind(this);
+    this.onMouseMove = this.onMouseMove.bind(this);
     this.selectedTool = React.createRef();
   }
 
   render() {
     const toolContent = this.renderSelectedTool();
     const toolBar = this.renderToolBar();
     const display = this.loader || this.renderCanvas(toolContent);
-    return <div className="inverse-color-scheme full-height column-space">
+    return <div className="inverse-color-scheme full-height column-space"
+      onMouseMove={this.onMouseMove.bind(this)}>
       { toolBar }
       { display }
     </div>;
@@ -241,6 +243,17 @@ exports.Editor = class Editor extends React.Component {
     }
   }
 
+  onMouseMove(e) {
+    // This is here because we don't want whatever the tool action is to stop
+    // completely as soon as the mouse cursor exits the canvas/tool area (it's
+    // rather jarring).
+    if (this.selectedTool.current
+        && this.selectedTool.current.onMouseMove
+        && this.selectedTool.current.onMouseMove(e)) {
+      e.stopPropagation();
+    }
+  }
+
   renderImage() {
     const imageContext = this.imageCanvas.getContext("2d");
     imageContext.scale(this.devicePixelRatio, this.devicePixelRatio);