fix: the mutual exclusion problem between drag-zoom and brush-select

src/behavior/brush-select.js

@@ -1,7 +1,7 @@
 const min = Math.min;
 const max = Math.max;
 const abs = Math.abs;
-const hypot = Math.hypot;
+// const hypot = Math.hypot;
 
 module.exports = {
   getDefaultCfg() {
@@ -14,6 +14,7 @@ module.exports = {
       },
       onSelect() {},
       onDeselect() {},
+      keyCode: 17,
       selectedState: 'selected',
       includeEdges: true,
       selectedEdges: [],
@@ -25,10 +26,18 @@ module.exports = {
       mousedown: 'onMouseDown',
       mousemove: 'onMouseMove',
       mouseup: 'onMouseUp',
-      'canvas:click': 'clearStates'
+      'canvas:click': 'clearStates',
+      keyup: 'onKeyUp',
+      keydown: 'onKeyDown'
     };
   },
   onMouseDown(e) {
+
+    /** 与drag-canvas 互斥 */
+    if (!this.keydown) {
+      return;
+    }
+
     // 按在node上面拖动时候不应该是框选
     const { item } = e;
     if (item) {
@@ -49,15 +58,18 @@ module.exports = {
     this.dragging = true;
   },
   onMouseMove(e) {
-    const originPoint = this.originPoint;
-    if (!this.dragging || hypot(originPoint.x - e.canvasX, originPoint.y - e.canvasY) < 10) {
+    // const originPoint = this.originPoint;
+    if (!this.dragging
+      // || hypot(originPoint.x - e.canvasX, originPoint.y - e.canvasY) < 10
+      ) {
       return;
     }
     this._updateBrush(e);
     this.graph.paint();
   },
   onMouseUp(e) {
-    if (!this.brush) {
+    /** 与drag-canvas 互斥 */
+    if (!this.keydown || !this.brush) {
       return;
     }
     const graph = this.graph;
@@ -155,5 +167,20 @@ module.exports = {
       x: min(e.canvasX, originPoint.x),
       y: min(e.canvasY, originPoint.y)
     });
+  },
+  onKeyDown(e) {
+    const code = e.keyCode || e.which;
+    if (code === this.keyCode) {
+      this.keydown = true;
+    } else {
+      this.keydown = false;
+    }
+  },
+  onKeyUp() {
+    if (this.brush) {
+      this.brush.hide();
+      this.dragging = false;
+    }
+    this.keydown = false;
   }
 };

src/behavior/drag-canvas.js

@@ -6,6 +6,7 @@ const body = document.body;
 module.exports = {
   getDefaultCfg() {
     return {
+      keyCode: 17,
       direction: 'both'
     };
   },
@@ -15,7 +16,9 @@ module.exports = {
       'canvas:mousemove': 'onMouseMove',
       'canvas:mouseup': 'onMouseUp',
       'canvas:click': 'onMouseUp',
-      'canvas:mouseleave': 'onOutOfRange'
+      'canvas:mouseleave': 'onOutOfRange',
+      keyup: 'onKeyUp',
+      keydown: 'onKeyDown'
     };
   },
   updateViewport(e) {
@@ -40,10 +43,16 @@ module.exports = {
     this.graph.paint();
   },
   onMouseDown(e) {
+    if (this.keydown) {
+      return;
+    }
     this.origin = { x: e.clientX, y: e.clientY };
     this.dragging = false;
   },
   onMouseMove(e) {
+    if (this.keydown) {
+      return;
+    }
     e = Util.cloneEvent(e);
     const graph = this.graph;
     if (!this.origin) { return; }
@@ -66,6 +75,9 @@ module.exports = {
     }
   },
   onMouseUp(e) {
+    if (this.keydown) {
+      return;
+    }
     if (!this.dragging) {
       this.origin = null;
       return;
@@ -104,5 +116,16 @@ module.exports = {
       this.fn = fn;
       body.addEventListener('mouseup', fn, false);
     }
+  },
+  onKeyDown(e) {
+    const code = e.keyCode || e.which;
+    if (code === this.keyCode) {
+      this.keydown = true;
+    } else {
+      this.keydown = false;
+    }
+  },
+  onKeyUp() {
+    this.keydown = false;
   }
 };