fix bug: cannot remove wheel event

PengJiyuan · Apr 28, 2018 · ed06ae3 · ed06ae3
1 parent a3c8f92
commit ed06ae3
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 17 deletions.
diff --git a/dist/omg.js b/dist/omg.js
@@ -301,8 +301,19 @@ var createClass = function () {
 
 var Event = function () {
   function Event(_this) {
+    var _this2 = this;
+
     classCallCheck(this, Event);
 
+    this.mouseWheel = function (e) {
+      if (e.deltaY && e.deltaY > 0) {
+        _this2._.scale = _this2._.scale - 0.01 >= _this2._.minDeviceScale ? _this2._.scale - 0.01 : _this2._.minDeviceScale;
+      } else if (e.deltaY && e.deltaY < 0) {
+        _this2._.scale = _this2._.scale + 0.01 <= _this2._.maxDeviceScale ? _this2._.scale + 0.01 : _this2._.maxDeviceScale;
+      }
+      _this2._.redraw();
+    };
+
     // global this
     this._ = _this;
     this.triggeredMouseDown = false;
@@ -357,22 +368,12 @@ var Event = function () {
   }, {
     key: 'bindMouseWheel',
     value: function bindMouseWheel() {
-      bind(this._.element, 'wheel', this.mouseWheel.bind(this));
+      bind(this._.element, 'wheel', this.mouseWheel);
     }
   }, {
     key: 'unBindMouseWheel',
     value: function unBindMouseWheel() {
-      unbind(this._.element, 'wheel', this.mouseWheel.bind(this));
-    }
-  }, {
-    key: 'mouseWheel',
-    value: function mouseWheel(e) {
-      if (e.deltaY && e.deltaY > 0) {
-        this._.scale = this._.scale - 0.01 >= this._.minDeviceScale ? this._.scale - 0.01 : this._.minDeviceScale;
-      } else if (e.deltaY && e.deltaY < 0) {
-        this._.scale = this._.scale + 0.01 <= this._.maxDeviceScale ? this._.scale + 0.01 : this._.maxDeviceScale;
-      }
-      this._.redraw();
+      unbind(this._.element, 'wheel', this.mouseWheel);
     }
   }, {
     key: 'bindMouseMove',

diff --git a/dist/omg.min.js b/dist/omg.min.js
diff --git a/examples/matrix.html b/examples/matrix.html
@@ -22,6 +22,12 @@
 <div class="container">
 		<canvas id="canvas"></canvas>
 </div>
+<button id="translateReverseBtn" type="button" onclick="translateReverse()" class="btn btn-info btn-rounded">
+	关闭拖拽
+</button>
+<button id="scaleeReverseBtn" type="button" onclick="scaleeReverse()" class="btn btn-info btn-rounded">
+	关闭缩放
+</button>
 <script src="./omg.min.js"></script>
 <script>
 	var stage = omg({
@@ -84,6 +90,32 @@
 
 	stage.show();
 
+    // 全局拖拽设置
+    function translateReverse() {
+        let translateBtn = document.getElementById("translateReverseBtn");
+        if (stage.enableGlobalTranslate) {
+            translateBtn.innerHTML = "开启拖拽";
+            stage.enableGlobalTranslate = false;
+        } else {
+            translateBtn.innerHTML = "关闭拖拽";
+            stage.enableGlobalTranslate = true;
+				}
+				stage._event.triggerEvents();
+    }
+
+    // 缩放设置
+    function scaleeReverse() {
+        let scaleeBtn = document.getElementById("scaleeReverseBtn");
+        if (stage.enableGlobalScale) {
+            scaleeBtn.innerHTML = "开启缩放";
+            stage.enableGlobalScale = false;
+        } else {
+            scaleeBtn.innerHTML = "关闭缩放";
+            stage.enableGlobalScale = true;
+        }
+        stage._event.triggerEvents();
+    }
+
 </script>
 </body>
 </html>
diff --git a/examples/omg.min.js b/examples/omg.min.js
diff --git a/src/event.js b/src/event.js
@@ -66,14 +66,14 @@ export class Event {
   }
 
   bindMouseWheel() {
-    utils.bind(this._.element, 'wheel', this.mouseWheel.bind(this));
+    utils.bind(this._.element, 'wheel', this.mouseWheel);
   }
 
   unBindMouseWheel() {
-    utils.unbind(this._.element, 'wheel', this.mouseWheel.bind(this));
+    utils.unbind(this._.element, 'wheel', this.mouseWheel);
   }
 
-  mouseWheel(e: WheelEvent) {
+  mouseWheel = (e: WheelEvent) => {
     if(e.deltaY && e.deltaY > 0) {
       this._.scale = this._.scale - 0.01 >= this._.minDeviceScale ? this._.scale - 0.01 : this._.minDeviceScale;
     } else if(e.deltaY && e.deltaY < 0) {