From 41704ace786870c48d008f3a87ed13881a171e4a Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sun, 16 Feb 2020 19:17:59 +0100 Subject: [PATCH] feat(controls): Adds control mousedown and mouseup (#6158) --- CHANGELOG.md | 1 + HEADER.js | 2 +- package.json | 2 +- src/canvas.class.js | 3 +-- src/control.class.js | 22 ++++++++++++++++++++++ src/mixins/canvas_events.mixin.js | 22 ++++++++++++++++++++-- test/unit/canvas.js | 13 ++++++++++++- 7 files changed, 58 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6e4bf2fe9ee..d57d43bbbfa 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/HEADER.js b/HEADER.js index 21b754e2dc3..c83e45bc6cb 100644 --- a/HEADER.js +++ b/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; } diff --git a/package.json b/package.json index 18e81c3da7d..d29abc65237 100644 --- a/package.json +++ b/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 ", "contributors": [ { diff --git a/src/canvas.class.js b/src/canvas.class.js index 824b58124ac..cdab11679cd 100644 --- a/src/canvas.class.js +++ b/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), diff --git a/src/control.class.js b/src/control.class.js index 06ab76cad42..f673394cf48 100644 --- a/src/control.class.js +++ b/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 diff --git a/src/mixins/canvas_events.mixin.js b/src/mixins/canvas_events.mixin.js index 42ec3ac1f3e..3f6f4ca4f95 100644 --- a/src/mixins/canvas_events.mixin.js +++ b/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); } } diff --git a/test/unit/canvas.js b/test/unit/canvas.js index 6c4f8466c90..95c48678d2b 100644 --- a/test/unit/canvas.js +++ b/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');