feat(controls): Adds control mousedown and mouseup (#6158)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [4.0.0-beta.7]
 
+feat(controls): Added controls mouseUpHandler and mouseDownHandler [#6158](https://github.com/fabricjs/fabric.js/pull/6158)
 Removal of deprecated methods / patterns. [#6111](https://github.com/fabricjs/fabric.js/pull/6111)
 - removed Object.setShadow, and BaseBrush.setShadow. change `rect.setShadow(options)` to `rect.set('shadow', new fabric.Shadow(options))`
 - removed Object.transformMatrix.

HEADER.js

@@ -1,6 +1,6 @@
 /*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */
 
-var fabric = fabric || { version: '4.0.0-beta.6' };
+var fabric = fabric || { version: '4.0.0-beta.7' };
 if (typeof exports !== 'undefined') {
   exports.fabric = fabric;
 }

package.json

@@ -2,7 +2,7 @@
   "name": "fabric",
   "description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
   "homepage": "http://fabricjs.com/",
-  "version": "4.0.0-beta.6",
+  "version": "4.0.0-beta.7",
   "author": "Juriy Zaytsev <[email protected]>",
   "contributors": [
     {

src/canvas.class.js

@@ -657,8 +657,7 @@
         return;
       }
 
-      var pointer = this.getPointer(e), isTouch = isTouchEvent(e),
-          corner = target._findTargetCorner(this.getPointer(e, true), isTouch),
+      var pointer = this.getPointer(e), corner = target.__corner,
           actionHandler = !!corner && target.controls[corner].getActionHandler(),
           action = this._getActionFromCorner(alreadySelected, corner, e, target),
           origin = this._getOriginFromCorner(target, corner),

src/control.class.js

@@ -127,6 +127,28 @@
       return this.actionHandler;
     },
 
+    /**
+     * Returns control mouseDown handler
+     * @param {Event} eventData the native mouse event
+     * @param {Object} transformData properties of the current transform
+     * @param {fabric.Object} object on which the control is displayed
+     * @return {Function}
+     */
+    getMouseDownHandler: function(/* eventData, fabricObject, control */) {
+      return this.mouseDownHandler;
+    },
+
+    /**
+     * Returns control mouseUp handler
+     * @param {Event} eventData the native mouse event
+     * @param {Object} transformData properties of the current transform
+     * @param {fabric.Object} object on which the control is displayed
+     * @return {Function}
+     */
+    getMouseUpHandler: function(/* eventData, fabricObject, control */) {
+      return this.mouseUpHandler;
+    },
+
     /**
      * Returns control cursorStyle for css using cursorStyle. If you need a more elaborate
      * function you can pass one in the constructor

src/mixins/canvas_events.mixin.js

@@ -440,12 +440,20 @@
         this._finalizeCurrentTransform(e);
         shouldRender = transform.actionPerformed;
       }
-
       if (!isClick) {
         this._maybeGroupObjects(e);
         shouldRender || (shouldRender = this._shouldRender(target));
       }
       if (target) {
+        var corner = target._findTargetCorner(
+          this.getPointer(e, true),
+          fabric.util.isTouchEvent(e)
+        );
+        var control = target.controls[corner],
+            mouseUpHandler = control && control.getMouseUpHandler(e, target, control);
+        if (mouseUpHandler) {
+          mouseUpHandler(e, target, control);
+        }
         target.isMoving = false;
       }
       this._setCursorFromEvent(e, target);
@@ -695,7 +703,17 @@
         if (target.selectable) {
           this.setActiveObject(target, e);
         }
-        if (target === this._activeObject && (target.__corner || !shouldGroup)) {
+        var corner = target._findTargetCorner(
+          this.getPointer(e, true),
+          fabric.util.isTouchEvent(e)
+        );
+        target.__corner = corner;
+        if (target === this._activeObject && (corner || !shouldGroup)) {
+          var control = target.controls[corner],
+              mouseDownHandler = control && control.getMouseDownHandler(e, target, control);
+          if (mouseDownHandler) {
+            mouseDownHandler(e, target, control);
+          }
           this._setupCurrentTransform(e, target, alreadySelected);
         }
       }

test/unit/canvas.js

@@ -2248,6 +2248,9 @@
       target: rect
     };
     canvas.setActiveObject(rect);
+    rect.__corner = rect._findTargetCorner(
+      canvas.getPointer(eventStub, true)
+    );
     canvas._setupCurrentTransform(eventStub, rect);
     var t = canvas._currentTransform;
     assert.equal(t.target, rect, 'should have rect as a target');
@@ -2261,7 +2264,9 @@
       clientY: canvasOffset.top + rect.oCoords.tl.corner.tl.y + 1,
       target: rect
     };
-
+    rect.__corner = rect._findTargetCorner(
+      canvas.getPointer(eventStub, true)
+    );
     canvas._setupCurrentTransform(eventStub, rect, false);
     t = canvas._currentTransform;
     assert.equal(t.target, rect, 'should have rect as a target');
@@ -2270,6 +2275,9 @@
     assert.equal(t.shiftKey, undefined, 'shift was not pressed');
 
     var alreadySelected = true;
+    rect.__corner = rect._findTargetCorner(
+      canvas.getPointer(eventStub, true)
+    );
     canvas._setupCurrentTransform(eventStub, rect, alreadySelected);
     t = canvas._currentTransform;
     assert.equal(t.target, rect, 'should have rect as a target');
@@ -2285,6 +2293,9 @@
       target: rect,
       shiftKey: true
     };
+    rect.__corner = rect._findTargetCorner(
+      canvas.getPointer(eventStub, true)
+    );
     canvas._setupCurrentTransform(eventStub, rect, alreadySelected);
     t = canvas._currentTransform;
     assert.equal(t.target, rect, 'should have rect as a target');