@idraw/board - npm Package Compare versions

Comparing version 0.2.0-alpha.8 to 0.2.0-alpha.9

dist/index.cjs.js

@@ -40,3 +40,3 @@ 'use strict';
 }
-function throttle$1(fn, timeout) {
+function throttle$2(fn, timeout) {
     var timer = -1;
@@ -264,3 +264,3 @@ return function () {
         compose: compose,
-        throttle: throttle$1,
+        throttle: throttle$2,
     },
@@ -341,7 +341,12 @@ loader: {
 
+function createTempData() {
+    return {
+        prevClickPoint: null,
+        isHoverCanvas: false,
+        isDragCanvas: false,
+    };
+}
 var TempData = (function () {
     function TempData() {
-        this._temp = {
-            prevClickPoint: null
-        };
+        this._temp = createTempData();
     }
@@ -355,5 +360,3 @@ TempData.prototype.set = function (name, value) {
     TempData.prototype.clear = function () {
-        this._temp = {
-            prevClickPoint: null,
-        };
+        this._temp = createTempData();
     };
@@ -363,6 +366,8 @@ return TempData;
 
-var Watcher = (function () {
-    function Watcher(canvas) {
+var throttle$1 = index.time.throttle;
+var ScreenWatcher = (function () {
+    function ScreenWatcher(canvas) {
         this._isMoving = false;
         this._temp = new TempData;
+        this._container = window;
         this._canvas = canvas;
@@ -373,23 +378,30 @@ this._isMoving = false;
     }
-    Watcher.prototype.on = function (name, callback) {
+    ScreenWatcher.prototype.on = function (name, callback) {
         this._event.on(name, callback);
     };
-    Watcher.prototype.off = function (name, callback) {
+    ScreenWatcher.prototype.off = function (name, callback) {
         this._event.off(name, callback);
     };
-    Watcher.prototype._initEvent = function () {
+    ScreenWatcher.prototype._initEvent = function () {
         var canvas = this._canvas;
-        canvas.addEventListener('mousemove', this._listenHover.bind(this), true);
-        canvas.addEventListener('mousedown', this._listenMoveStart.bind(this), true);
-        canvas.addEventListener('mousemove', this._listenMove.bind(this), true);
-        canvas.addEventListener('mouseup', this._listenMoveEnd.bind(this), true);
-        canvas.addEventListener('mouseleave', this._listenMoveEnd.bind(this), true);
-        canvas.addEventListener('mouseleave', this._listenLeave.bind(this), true);
-        canvas.addEventListener('click', this._listenClick.bind(this), true);
-        canvas.addEventListener('wheel', this._listenWheel.bind(this), true);
-        canvas.addEventListener('touchstart', this._listenMoveStart.bind(this), true);
-        canvas.addEventListener('touchmove', this._listenMove.bind(this), true);
-        canvas.addEventListener('touchend', this._listenMoveEnd.bind(this), true);
+        var container = this._container;
+        container.addEventListener('mousemove', this._listenWindowMove.bind(this), false);
+        container.addEventListener('mouseup', this._listenWindowMoveEnd.bind(this), false);
+        canvas.addEventListener('mousemove', this._listenHover.bind(this), false);
+        canvas.addEventListener('mousedown', this._listenMoveStart.bind(this), false);
+        canvas.addEventListener('mousemove', this._listenMove.bind(this), false);
+        canvas.addEventListener('mouseup', this._listenMoveEnd.bind(this), false);
+        canvas.addEventListener('click', this._listenCanvasClick.bind(this), false);
+        canvas.addEventListener('wheel', this._listenCanvasWheel.bind(this), false);
+        canvas.addEventListener('mousedown', this._listenCanvasMoveStart.bind(this), true);
+        canvas.addEventListener('mouseup', this._listenCanvasMoveEnd.bind(this), true);
+        canvas.addEventListener('mouseover', this._listenCanvasMoveOver.bind(this), true);
+        canvas.addEventListener('mouseleave', this._listenCanvasMoveLeave.bind(this), true);
+        if (window.self !== window.parent) {
+            if (window.self.origin === window.parent.self.origin) {
+                window.parent.window.addEventListener('mousemove', throttle$1(this._listSameOriginParentWindow.bind(this), 16), false);
+            }
+        }
     };
-    Watcher.prototype._listenHover = function (e) {
+    ScreenWatcher.prototype._listenHover = function (e) {
         e.preventDefault();
@@ -404,10 +416,4 @@ var p = this._getPosition(e);
     };
-    Watcher.prototype._listenLeave = function (e) {
+    ScreenWatcher.prototype._listenMoveStart = function (e) {
         e.preventDefault();
-        if (this._event.has('leave')) {
-            this._event.trigger('leave', undefined);
-        }
-    };
-    Watcher.prototype._listenMoveStart = function (e) {
-        e.preventDefault();
         var p = this._getPosition(e);
@@ -424,3 +430,3 @@ if (this._isVaildPoint(p)) {
     };
-    Watcher.prototype._listenMove = function (e) {
+    ScreenWatcher.prototype._listenMove = function (e) {
         e.preventDefault();
@@ -435,3 +441,3 @@ e.stopPropagation();
     };
-    Watcher.prototype._listenMoveEnd = function (e) {
+    ScreenWatcher.prototype._listenMoveEnd = function (e) {
         e.preventDefault();
@@ -446,4 +452,63 @@ if (this._event.has('moveEnd')) {
     };
-    Watcher.prototype._listenWheel = function (e) {
+    ScreenWatcher.prototype._listSameOriginParentWindow = function () {
+        if (this._temp.get('isHoverCanvas')) {
+            if (this._event.has('leave')) {
+                this._event.trigger('leave', undefined);
+            }
+        }
+        if (this._temp.get('isDragCanvas')) {
+            if (this._event.has('moveEnd')) {
+                this._event.trigger('moveEnd', { x: NaN, y: NaN });
+            }
+        }
+        this._isMoving = false;
+        this._temp.set('isDragCanvas', false);
+        this._temp.set('isHoverCanvas', false);
+    };
+    ScreenWatcher.prototype._listenCanvasMoveStart = function () {
+        if (this._temp.get('isHoverCanvas')) {
+            this._temp.set('isDragCanvas', true);
+        }
+    };
+    ScreenWatcher.prototype._listenCanvasMoveEnd = function () {
+        this._temp.set('isDragCanvas', false);
+    };
+    ScreenWatcher.prototype._listenCanvasMoveOver = function () {
+        this._temp.set('isHoverCanvas', true);
+    };
+    ScreenWatcher.prototype._listenCanvasMoveLeave = function () {
+        this._temp.set('isHoverCanvas', false);
+        if (this._event.has('leave')) {
+            this._event.trigger('leave', undefined);
+        }
+    };
+    ScreenWatcher.prototype._listenWindowMove = function (e) {
+        if (this._temp.get('isDragCanvas') !== true) {
+            return;
+        }
         e.preventDefault();
+        e.stopPropagation();
+        if (this._event.has('move') && this._isMoving === true) {
+            var p = this._getPosition(e);
+            if (this._isVaildPoint(p)) {
+                this._event.trigger('move', p);
+            }
+        }
+    };
+    ScreenWatcher.prototype._listenWindowMoveEnd = function (e) {
+        if (!this._temp.get('isDragCanvas') === true) {
+            return;
+        }
+        e.preventDefault();
+        if (this._event.has('moveEnd')) {
+            var p = this._getPosition(e);
+            if (this._isVaildPoint(p)) {
+                this._event.trigger('moveEnd', p);
+            }
+        }
+        this._temp.set('isDragCanvas', false);
+        this._isMoving = false;
+    };
+    ScreenWatcher.prototype._listenCanvasWheel = function (e) {
+        e.preventDefault();
         if (this._event.has('wheelX') && (e.deltaX > 0 || e.deltaX < 0)) {
@@ -456,3 +521,3 @@ this._event.trigger('wheelX', e.deltaX);
     };
-    Watcher.prototype._listenClick = function (e) {
+    ScreenWatcher.prototype._listenCanvasClick = function (e) {
         e.preventDefault();
@@ -476,3 +541,3 @@ var maxLimitTime = 500;
     };
-    Watcher.prototype._getPosition = function (e) {
+    ScreenWatcher.prototype._getPosition = function (e) {
         var canvas = this._canvas;
@@ -499,7 +564,10 @@ var x = 0;
     };
-    Watcher.prototype._isVaildPoint = function (p) {
-        return (p.x > 0 && p.y > 0);
+    ScreenWatcher.prototype._isVaildPoint = function (p) {
+        return isAvailableNum(p.x) && isAvailableNum(p.y);
     };
-    return Watcher;
+    return ScreenWatcher;
 }());
+function isAvailableNum(num) {
+    return (num > 0 || num < 0 || num === 0);
+}
 
@@ -989,3 +1057,3 @@ function setStyle(dom, style) {
         this[_screen] = new Screen(this[_ctx], this[_opts]);
-        this[_watcher] = new Watcher(this[_displayCanvas]);
+        this[_watcher] = new ScreenWatcher(this[_displayCanvas]);
         this[_scroller] = new Scroller(this[_displayCtx], {
@@ -992,0 +1060,0 @@ width: opts.width,

dist/index.es.js

@@ -38,3 +38,3 @@ var __assign = function() {
 }
-function throttle$1(fn, timeout) {
+function throttle$2(fn, timeout) {
     var timer = -1;
@@ -262,3 +262,3 @@ return function () {
         compose: compose,
-        throttle: throttle$1,
+        throttle: throttle$2,
     },
@@ -339,7 +339,12 @@ loader: {
 
+function createTempData() {
+    return {
+        prevClickPoint: null,
+        isHoverCanvas: false,
+        isDragCanvas: false,
+    };
+}
 var TempData = (function () {
     function TempData() {
-        this._temp = {
-            prevClickPoint: null
-        };
+        this._temp = createTempData();
     }
@@ -353,5 +358,3 @@ TempData.prototype.set = function (name, value) {
     TempData.prototype.clear = function () {
-        this._temp = {
-            prevClickPoint: null,
-        };
+        this._temp = createTempData();
     };
@@ -361,6 +364,8 @@ return TempData;
 
-var Watcher = (function () {
-    function Watcher(canvas) {
+var throttle$1 = index.time.throttle;
+var ScreenWatcher = (function () {
+    function ScreenWatcher(canvas) {
         this._isMoving = false;
         this._temp = new TempData;
+        this._container = window;
         this._canvas = canvas;
@@ -371,23 +376,30 @@ this._isMoving = false;
     }
-    Watcher.prototype.on = function (name, callback) {
+    ScreenWatcher.prototype.on = function (name, callback) {
         this._event.on(name, callback);
     };
-    Watcher.prototype.off = function (name, callback) {
+    ScreenWatcher.prototype.off = function (name, callback) {
         this._event.off(name, callback);
     };
-    Watcher.prototype._initEvent = function () {
+    ScreenWatcher.prototype._initEvent = function () {
         var canvas = this._canvas;
-        canvas.addEventListener('mousemove', this._listenHover.bind(this), true);
-        canvas.addEventListener('mousedown', this._listenMoveStart.bind(this), true);
-        canvas.addEventListener('mousemove', this._listenMove.bind(this), true);
-        canvas.addEventListener('mouseup', this._listenMoveEnd.bind(this), true);
-        canvas.addEventListener('mouseleave', this._listenMoveEnd.bind(this), true);
-        canvas.addEventListener('mouseleave', this._listenLeave.bind(this), true);
-        canvas.addEventListener('click', this._listenClick.bind(this), true);
-        canvas.addEventListener('wheel', this._listenWheel.bind(this), true);
-        canvas.addEventListener('touchstart', this._listenMoveStart.bind(this), true);
-        canvas.addEventListener('touchmove', this._listenMove.bind(this), true);
-        canvas.addEventListener('touchend', this._listenMoveEnd.bind(this), true);
+        var container = this._container;
+        container.addEventListener('mousemove', this._listenWindowMove.bind(this), false);
+        container.addEventListener('mouseup', this._listenWindowMoveEnd.bind(this), false);
+        canvas.addEventListener('mousemove', this._listenHover.bind(this), false);
+        canvas.addEventListener('mousedown', this._listenMoveStart.bind(this), false);
+        canvas.addEventListener('mousemove', this._listenMove.bind(this), false);
+        canvas.addEventListener('mouseup', this._listenMoveEnd.bind(this), false);
+        canvas.addEventListener('click', this._listenCanvasClick.bind(this), false);
+        canvas.addEventListener('wheel', this._listenCanvasWheel.bind(this), false);
+        canvas.addEventListener('mousedown', this._listenCanvasMoveStart.bind(this), true);
+        canvas.addEventListener('mouseup', this._listenCanvasMoveEnd.bind(this), true);
+        canvas.addEventListener('mouseover', this._listenCanvasMoveOver.bind(this), true);
+        canvas.addEventListener('mouseleave', this._listenCanvasMoveLeave.bind(this), true);
+        if (window.self !== window.parent) {
+            if (window.self.origin === window.parent.self.origin) {
+                window.parent.window.addEventListener('mousemove', throttle$1(this._listSameOriginParentWindow.bind(this), 16), false);
+            }
+        }
     };
-    Watcher.prototype._listenHover = function (e) {
+    ScreenWatcher.prototype._listenHover = function (e) {
         e.preventDefault();
@@ -402,10 +414,4 @@ var p = this._getPosition(e);
     };
-    Watcher.prototype._listenLeave = function (e) {
+    ScreenWatcher.prototype._listenMoveStart = function (e) {
         e.preventDefault();
-        if (this._event.has('leave')) {
-            this._event.trigger('leave', undefined);
-        }
-    };
-    Watcher.prototype._listenMoveStart = function (e) {
-        e.preventDefault();
         var p = this._getPosition(e);
@@ -422,3 +428,3 @@ if (this._isVaildPoint(p)) {
     };
-    Watcher.prototype._listenMove = function (e) {
+    ScreenWatcher.prototype._listenMove = function (e) {
         e.preventDefault();
@@ -433,3 +439,3 @@ e.stopPropagation();
     };
-    Watcher.prototype._listenMoveEnd = function (e) {
+    ScreenWatcher.prototype._listenMoveEnd = function (e) {
         e.preventDefault();
@@ -444,4 +450,63 @@ if (this._event.has('moveEnd')) {
     };
-    Watcher.prototype._listenWheel = function (e) {
+    ScreenWatcher.prototype._listSameOriginParentWindow = function () {
+        if (this._temp.get('isHoverCanvas')) {
+            if (this._event.has('leave')) {
+                this._event.trigger('leave', undefined);
+            }
+        }
+        if (this._temp.get('isDragCanvas')) {
+            if (this._event.has('moveEnd')) {
+                this._event.trigger('moveEnd', { x: NaN, y: NaN });
+            }
+        }
+        this._isMoving = false;
+        this._temp.set('isDragCanvas', false);
+        this._temp.set('isHoverCanvas', false);
+    };
+    ScreenWatcher.prototype._listenCanvasMoveStart = function () {
+        if (this._temp.get('isHoverCanvas')) {
+            this._temp.set('isDragCanvas', true);
+        }
+    };
+    ScreenWatcher.prototype._listenCanvasMoveEnd = function () {
+        this._temp.set('isDragCanvas', false);
+    };
+    ScreenWatcher.prototype._listenCanvasMoveOver = function () {
+        this._temp.set('isHoverCanvas', true);
+    };
+    ScreenWatcher.prototype._listenCanvasMoveLeave = function () {
+        this._temp.set('isHoverCanvas', false);
+        if (this._event.has('leave')) {
+            this._event.trigger('leave', undefined);
+        }
+    };
+    ScreenWatcher.prototype._listenWindowMove = function (e) {
+        if (this._temp.get('isDragCanvas') !== true) {
+            return;
+        }
         e.preventDefault();
+        e.stopPropagation();
+        if (this._event.has('move') && this._isMoving === true) {
+            var p = this._getPosition(e);
+            if (this._isVaildPoint(p)) {
+                this._event.trigger('move', p);
+            }
+        }
+    };
+    ScreenWatcher.prototype._listenWindowMoveEnd = function (e) {
+        if (!this._temp.get('isDragCanvas') === true) {
+            return;
+        }
+        e.preventDefault();
+        if (this._event.has('moveEnd')) {
+            var p = this._getPosition(e);
+            if (this._isVaildPoint(p)) {
+                this._event.trigger('moveEnd', p);
+            }
+        }
+        this._temp.set('isDragCanvas', false);
+        this._isMoving = false;
+    };
+    ScreenWatcher.prototype._listenCanvasWheel = function (e) {
+        e.preventDefault();
         if (this._event.has('wheelX') && (e.deltaX > 0 || e.deltaX < 0)) {
@@ -454,3 +519,3 @@ this._event.trigger('wheelX', e.deltaX);
     };
-    Watcher.prototype._listenClick = function (e) {
+    ScreenWatcher.prototype._listenCanvasClick = function (e) {
         e.preventDefault();
@@ -474,3 +539,3 @@ var maxLimitTime = 500;
     };
-    Watcher.prototype._getPosition = function (e) {
+    ScreenWatcher.prototype._getPosition = function (e) {
         var canvas = this._canvas;
@@ -497,7 +562,10 @@ var x = 0;
     };
-    Watcher.prototype._isVaildPoint = function (p) {
-        return (p.x > 0 && p.y > 0);
+    ScreenWatcher.prototype._isVaildPoint = function (p) {
+        return isAvailableNum(p.x) && isAvailableNum(p.y);
     };
-    return Watcher;
+    return ScreenWatcher;
 }());
+function isAvailableNum(num) {
+    return (num > 0 || num < 0 || num === 0);
+}
 
@@ -987,3 +1055,3 @@ function setStyle(dom, style) {
         this[_screen] = new Screen(this[_ctx], this[_opts]);
-        this[_watcher] = new Watcher(this[_displayCanvas]);
+        this[_watcher] = new ScreenWatcher(this[_displayCanvas]);
         this[_scroller] = new Scroller(this[_displayCtx], {
@@ -990,0 +1058,0 @@ width: opts.width,

dist/index.global.js

@@ -41,3 +41,3 @@ var iDrawBoard = (function () {
     }
-    function throttle$1(fn, timeout) {
+    function throttle$2(fn, timeout) {
         var timer = -1;
@@ -265,3 +265,3 @@ return function () {
             compose: compose,
-            throttle: throttle$1,
+            throttle: throttle$2,
         },
@@ -342,7 +342,12 @@ loader: {
 
+    function createTempData() {
+        return {
+            prevClickPoint: null,
+            isHoverCanvas: false,
+            isDragCanvas: false,
+        };
+    }
     var TempData = (function () {
         function TempData() {
-            this._temp = {
-                prevClickPoint: null
-            };
+            this._temp = createTempData();
         }
@@ -356,5 +361,3 @@ TempData.prototype.set = function (name, value) {
         TempData.prototype.clear = function () {
-            this._temp = {
-                prevClickPoint: null,
-            };
+            this._temp = createTempData();
         };
@@ -364,6 +367,8 @@ return TempData;
 
-    var Watcher = (function () {
-        function Watcher(canvas) {
+    var throttle$1 = index.time.throttle;
+    var ScreenWatcher = (function () {
+        function ScreenWatcher(canvas) {
             this._isMoving = false;
             this._temp = new TempData;
+            this._container = window;
             this._canvas = canvas;
@@ -374,23 +379,30 @@ this._isMoving = false;
         }
-        Watcher.prototype.on = function (name, callback) {
+        ScreenWatcher.prototype.on = function (name, callback) {
             this._event.on(name, callback);
         };
-        Watcher.prototype.off = function (name, callback) {
+        ScreenWatcher.prototype.off = function (name, callback) {
             this._event.off(name, callback);
         };
-        Watcher.prototype._initEvent = function () {
+        ScreenWatcher.prototype._initEvent = function () {
             var canvas = this._canvas;
-            canvas.addEventListener('mousemove', this._listenHover.bind(this), true);
-            canvas.addEventListener('mousedown', this._listenMoveStart.bind(this), true);
-            canvas.addEventListener('mousemove', this._listenMove.bind(this), true);
-            canvas.addEventListener('mouseup', this._listenMoveEnd.bind(this), true);
-            canvas.addEventListener('mouseleave', this._listenMoveEnd.bind(this), true);
-            canvas.addEventListener('mouseleave', this._listenLeave.bind(this), true);
-            canvas.addEventListener('click', this._listenClick.bind(this), true);
-            canvas.addEventListener('wheel', this._listenWheel.bind(this), true);
-            canvas.addEventListener('touchstart', this._listenMoveStart.bind(this), true);
-            canvas.addEventListener('touchmove', this._listenMove.bind(this), true);
-            canvas.addEventListener('touchend', this._listenMoveEnd.bind(this), true);
+            var container = this._container;
+            container.addEventListener('mousemove', this._listenWindowMove.bind(this), false);
+            container.addEventListener('mouseup', this._listenWindowMoveEnd.bind(this), false);
+            canvas.addEventListener('mousemove', this._listenHover.bind(this), false);
+            canvas.addEventListener('mousedown', this._listenMoveStart.bind(this), false);
+            canvas.addEventListener('mousemove', this._listenMove.bind(this), false);
+            canvas.addEventListener('mouseup', this._listenMoveEnd.bind(this), false);
+            canvas.addEventListener('click', this._listenCanvasClick.bind(this), false);
+            canvas.addEventListener('wheel', this._listenCanvasWheel.bind(this), false);
+            canvas.addEventListener('mousedown', this._listenCanvasMoveStart.bind(this), true);
+            canvas.addEventListener('mouseup', this._listenCanvasMoveEnd.bind(this), true);
+            canvas.addEventListener('mouseover', this._listenCanvasMoveOver.bind(this), true);
+            canvas.addEventListener('mouseleave', this._listenCanvasMoveLeave.bind(this), true);
+            if (window.self !== window.parent) {
+                if (window.self.origin === window.parent.self.origin) {
+                    window.parent.window.addEventListener('mousemove', throttle$1(this._listSameOriginParentWindow.bind(this), 16), false);
+                }
+            }
         };
-        Watcher.prototype._listenHover = function (e) {
+        ScreenWatcher.prototype._listenHover = function (e) {
             e.preventDefault();
@@ -405,10 +417,4 @@ var p = this._getPosition(e);
         };
-        Watcher.prototype._listenLeave = function (e) {
+        ScreenWatcher.prototype._listenMoveStart = function (e) {
             e.preventDefault();
-            if (this._event.has('leave')) {
-                this._event.trigger('leave', undefined);
-            }
-        };
-        Watcher.prototype._listenMoveStart = function (e) {
-            e.preventDefault();
             var p = this._getPosition(e);
@@ -425,3 +431,3 @@ if (this._isVaildPoint(p)) {
         };
-        Watcher.prototype._listenMove = function (e) {
+        ScreenWatcher.prototype._listenMove = function (e) {
             e.preventDefault();
@@ -436,3 +442,3 @@ e.stopPropagation();
         };
-        Watcher.prototype._listenMoveEnd = function (e) {
+        ScreenWatcher.prototype._listenMoveEnd = function (e) {
             e.preventDefault();
@@ -447,4 +453,63 @@ if (this._event.has('moveEnd')) {
         };
-        Watcher.prototype._listenWheel = function (e) {
+        ScreenWatcher.prototype._listSameOriginParentWindow = function () {
+            if (this._temp.get('isHoverCanvas')) {
+                if (this._event.has('leave')) {
+                    this._event.trigger('leave', undefined);
+                }
+            }
+            if (this._temp.get('isDragCanvas')) {
+                if (this._event.has('moveEnd')) {
+                    this._event.trigger('moveEnd', { x: NaN, y: NaN });
+                }
+            }
+            this._isMoving = false;
+            this._temp.set('isDragCanvas', false);
+            this._temp.set('isHoverCanvas', false);
+        };
+        ScreenWatcher.prototype._listenCanvasMoveStart = function () {
+            if (this._temp.get('isHoverCanvas')) {
+                this._temp.set('isDragCanvas', true);
+            }
+        };
+        ScreenWatcher.prototype._listenCanvasMoveEnd = function () {
+            this._temp.set('isDragCanvas', false);
+        };
+        ScreenWatcher.prototype._listenCanvasMoveOver = function () {
+            this._temp.set('isHoverCanvas', true);
+        };
+        ScreenWatcher.prototype._listenCanvasMoveLeave = function () {
+            this._temp.set('isHoverCanvas', false);
+            if (this._event.has('leave')) {
+                this._event.trigger('leave', undefined);
+            }
+        };
+        ScreenWatcher.prototype._listenWindowMove = function (e) {
+            if (this._temp.get('isDragCanvas') !== true) {
+                return;
+            }
             e.preventDefault();
+            e.stopPropagation();
+            if (this._event.has('move') && this._isMoving === true) {
+                var p = this._getPosition(e);
+                if (this._isVaildPoint(p)) {
+                    this._event.trigger('move', p);
+                }
+            }
+        };
+        ScreenWatcher.prototype._listenWindowMoveEnd = function (e) {
+            if (!this._temp.get('isDragCanvas') === true) {
+                return;
+            }
+            e.preventDefault();
+            if (this._event.has('moveEnd')) {
+                var p = this._getPosition(e);
+                if (this._isVaildPoint(p)) {
+                    this._event.trigger('moveEnd', p);
+                }
+            }
+            this._temp.set('isDragCanvas', false);
+            this._isMoving = false;
+        };
+        ScreenWatcher.prototype._listenCanvasWheel = function (e) {
+            e.preventDefault();
             if (this._event.has('wheelX') && (e.deltaX > 0 || e.deltaX < 0)) {
@@ -457,3 +522,3 @@ this._event.trigger('wheelX', e.deltaX);
         };
-        Watcher.prototype._listenClick = function (e) {
+        ScreenWatcher.prototype._listenCanvasClick = function (e) {
             e.preventDefault();
@@ -477,3 +542,3 @@ var maxLimitTime = 500;
         };
-        Watcher.prototype._getPosition = function (e) {
+        ScreenWatcher.prototype._getPosition = function (e) {
             var canvas = this._canvas;
@@ -500,7 +565,10 @@ var x = 0;
         };
-        Watcher.prototype._isVaildPoint = function (p) {
-            return (p.x > 0 && p.y > 0);
+        ScreenWatcher.prototype._isVaildPoint = function (p) {
+            return isAvailableNum(p.x) && isAvailableNum(p.y);
         };
-        return Watcher;
+        return ScreenWatcher;
     }());
+    function isAvailableNum(num) {
+        return (num > 0 || num < 0 || num === 0);
+    }
 
@@ -990,3 +1058,3 @@ function setStyle(dom, style) {
             this[_screen] = new Screen(this[_ctx], this[_opts]);
-            this[_watcher] = new Watcher(this[_displayCanvas]);
+            this[_watcher] = new ScreenWatcher(this[_displayCanvas]);
             this[_scroller] = new Scroller(this[_displayCtx], {
@@ -993,0 +1061,0 @@ width: opts.width,

package.json

 {
   "name": "@idraw/board",
-  "version": "0.2.0-alpha.8",
+  "version": "0.2.0-alpha.9",
   "description": "",
@@ -26,6 +26,6 @@ "main": "dist/index.cjs.js",
   "devDependencies": {
-    "@idraw/types": "^0.2.0-alpha.8"
+    "@idraw/types": "^0.2.0-alpha.9"
   },
   "dependencies": {
-    "@idraw/util": "^0.2.0-alpha.8"
+    "@idraw/util": "^0.2.0-alpha.9"
   },
@@ -35,3 +35,3 @@ "publishConfig": {
   },
-  "gitHead": "4b1c40b021a1b05056d9e7b929c5909f1cd27246"
+  "gitHead": "5a6f75f6e1ad11b635e1e165c4f826ead00125b3"
 }

No alert changes

Improved metrics

Total package byte prevSize

156567

increased by5.87%

Lines of code

3874

increased by5.56%

Dependency changes

• Updated@idraw/util@^0.2.0-alpha.9