fix(drag): stop dragging when mouse out of range

src/behavior/drag-canvas.js

@@ -1,6 +1,7 @@
 const Util = require('../util');
 const abs = Math.abs;
 const DRAG_OFFSET = 10;
+const body = document.body;
 
 module.exports = {
   getDefaultCfg() {
@@ -13,7 +14,8 @@ module.exports = {
       'canvas:mousedown': 'onMouseDown',
       'canvas:mousemove': 'onMouseMove',
       'canvas:mouseup': 'onMouseUp',
-      'canvas:click': 'onClick'
+      'canvas:click': 'onClick',
+      'canvas:mouseleave': 'onOutOfRange'
     };
   },
   updateViewport(e) {
@@ -81,5 +83,16 @@ module.exports = {
   onClick() {
     this.origin = null;
     this.dragging = false;
+  },
+  onOutOfRange(e) {
+    const self = this;
+    const canvasElement = self.graph.get('canvas').get('el');
+    const fn = ev => {
+      body.removeEventListener('click', fn, false);
+      if (ev.target !== canvasElement) {
+        self.onMouseUp(e);
+      }
+    };
+    body.addEventListener('click', fn, false);
   }
 };

src/behavior/drag-node.js

@@ -1,25 +1,22 @@
 const { mix } = require('../util');
 const { delegateStyle } = require('../global');
+const body = document.body;
 
 module.exports = {
   getDefaultCfg() {
     return {
       updateEdge: true,
       delegate: true,
-      validOutOfRange: false,
       delegateStyle: {}
     };
   },
   getEvents() {
-    const events = {
+    return {
       'node:dragstart': 'onDragStart',
       'node:drag': 'onDrag',
-      'node:dragend': 'onDragEnd'
+      'node:dragend': 'onDragEnd',
+      'canvas:mouseleave': 'onOutOfRange'
     };
-    if (!this.validOutOfRange) {
-      events['canvas:mouseleave'] = 'onDragEnd';
-    }
-    return events;
   },
   onDragStart(e) {
     if (!this.shouldBegin.call(this, e)) {
@@ -56,6 +53,17 @@ module.exports = {
     this.point = null;
     this.origin = null;
   },
+  onOutOfRange(e) {
+    const self = this;
+    const canvasElement = self.graph.get('canvas').get('el');
+    const fn = ev => {
+      body.removeEventListener('click', fn, false);
+      if (ev.target !== canvasElement) {
+        self.onDragEnd(e);
+      }
+    };
+    body.addEventListener('click', fn, false);
+  },
   _update(item, e, force) {
     const origin = this.origin;
     const model = item.get('model');