Merge pull request #866 from rykerwilliams/master

Update Events / Gestures modules with event.js 1.1.3

src/mixins/canvas_events.mixin.js

@@ -31,16 +31,16 @@
      * @private
      */
     _initEvents: function () {
-      var _this = this;
 
       this._onMouseDown = this._onMouseDown.bind(this);
       this._onMouseMove = this._onMouseMove.bind(this);
       this._onMouseUp = this._onMouseUp.bind(this);
       this._onResize = this._onResize.bind(this);
-
-      this._onGesture = function(e, s) {
-        _this.__onTransformGesture(e, s);
-      };
+      this._onGesture = this._onGesture.bind(this);
+      this._onDrag = this._onDrag.bind(this);
+      this._onShake = this._onShake.bind(this);
+      this._onOrientationChange = this._onOrientationChange.bind(this);
+      this._onMouseWheel = this._onMouseWheel.bind(this);
 
       addListener(fabric.window, 'resize', this._onResize);
 
@@ -50,14 +50,63 @@
 
         if (typeof Event !== 'undefined' && 'add' in Event) {
           Event.add(this.upperCanvasEl, 'gesture', this._onGesture);
+          Event.add(this.upperCanvasEl, 'drag', this._onDrag);
+          Event.add(this.upperCanvasEl, 'orientation', this._onOrientationChange);
+          Event.add(this.upperCanvasEl, 'shake', this._onShake);
         }
       }
       else {
         addListener(this.upperCanvasEl, 'mousedown', this._onMouseDown);
         addListener(this.upperCanvasEl, 'mousemove', this._onMouseMove);
+        addListener(this.upperCanvasEl, 'mousewheel', this._onMouseWheel);
       }
     },
 
+    /**
+     * @private
+     * @param {Event} [e] Event object fired on Event.js gesture
+     * @param {Event} [self] Inner Event object
+     */
+    _onGesture: function(e, s) {
+      this.__onTransformGesture(e, s);
+    },
+
+    /**
+     * @private
+     * @param {Event} [e] Event object fired on Event.js drag
+     * @param {Event} [self] Inner Event object
+     */
+    _onDrag: function(e, s) {
+      this.__onDrag(e, s);
+    },
+
+    /**
+     * @private
+     * @param {Event} [e] Event object fired on Event.js wheel event
+     * @param {Event} [self] Inner Event object
+     */
+    _onMouseWheel: function(e, s) {
+      this.__onMouseWheel(e, s);
+    },
+
+    /**
+     * @private
+     * @param {Event} [e] Event object fired on Event.js orientation change
+     * @param {Event} [self] Inner Event object
+     */
+    _onOrientationChange: function(e,s) {
+      this.__onOrientationChange(e,s);
+    },
+
+    /**
+     * @private
+     * @param {Event} [e] Event object fired on Event.js shake
+     * @param {Event} [self] Inner Event object
+     */
+    _onShake: function(e,s) {
+      this.__onShake(e,s);
+    },
+
     /**
      * @private
      * @param {Event} e Event object fired on mousedown

src/mixins/canvas_gestures.mixin.js

@@ -28,6 +28,36 @@
       this.fire('touch:gesture', {target: target, e: e, self: self});
     },
 
+    /**
+     * Method that defines actions when an Event.js drag is detected.
+     *
+     * @param e Event object by Event.js
+     * @param self Event proxy object by Event.js
+     */
+    __onDrag: function(e, self) {
+      this.fire('touch:drag', {e: e, self: self});
+    },
+
+    /**
+     * Method that defines actions when an Event.js orientation event is detected.
+     *
+     * @param e Event object by Event.js
+     * @param self Event proxy object by Event.js
+     */
+    __onOrientationChange: function(e, self) {
+      this.fire('touch:orientation', {e: e, self: self});
+    },
+
+    /**
+     * Method that defines actions when an Event.js shake event is detected.
+     *
+     * @param e Event object by Event.js
+     * @param self Event proxy object by Event.js
+     */
+    __onShake: function(e, self) {
+      this.fire('touch:shake', {e: e, self: self});
+    },
+
     /**
      * Scales an object by a factor
      * @param s {Number} The scale factor to apply to the current scale level

src/static_canvas.class.js

@@ -1044,17 +1044,22 @@
 
       if (!this.interactive) return this;
 
+      removeListener(fabric.window, 'resize', this._onResize);
+      
       if (fabric.isTouchSupported) {
         removeListener(this.upperCanvasEl, 'touchstart', this._onMouseDown);
         removeListener(this.upperCanvasEl, 'touchmove', this._onMouseMove);
         if (typeof Event !== 'undefined' && 'remove' in Event) {
           Event.remove(this.upperCanvasEl, 'gesture', this._onGesture);
+          Event.remove(this.upperCanvasEl, 'drag', this._onDrag);
+          Event.remove(this.upperCanvasEl, 'orientation', this._onOrientationChange);
+          Event.remove(this.upperCanvasEl, 'shake', this._onShake);
         }
       }
       else {
         removeListener(this.upperCanvasEl, 'mousedown', this._onMouseDown);
         removeListener(this.upperCanvasEl, 'mousemove', this._onMouseMove);
-        removeListener(fabric.window, 'resize', this._onResize);
+        removeListener(this.upperCanvasEl, 'mousewheel', this._onMouseWheel);
       }
       return this;
     },