From 03e504303c4e216b520b1d6486606010ea610d8b Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Mon, 3 Jul 2017 15:10:49 +0200 Subject: [PATCH] Cursors not allowed (#4064) * what so far * not-allowed cursor --- src/canvas.class.js | 17 +- src/mixins/canvas_events.mixin.js | 34 +++- src/mixins/object_interactivity.mixin.js | 2 +- test/unit/canvas.js | 247 +++++++++++++++++++++++ 4 files changed, 280 insertions(+), 20 deletions(-) diff --git a/src/canvas.class.js b/src/canvas.class.js index 31370da4..0a126a3d 100644 --- a/src/canvas.class.js +++ b/src/canvas.class.js @@ -210,6 +210,14 @@ */ rotationCursor: 'crosshair', + /** + * Cursor value used for disabled elements ( corners with disabled action ) + * @type String + * @since 2.0.0 + * @default + */ + notAllowedCursor: 'not-allowed', + /** * Default element class that's given to wrapper (div) element of canvas * @type String @@ -1703,13 +1711,4 @@ /** @ignore */ fabric.Canvas.prototype._setCursorFromEvent = function() { }; } - - /** - * @ignore - * @class fabric.Element - * @alias fabric.Canvas - * @deprecated Use {@link fabric.Canvas} instead. - * @constructor - */ - fabric.Element = fabric.Canvas; })(); diff --git a/src/mixins/canvas_events.mixin.js b/src/mixins/canvas_events.mixin.js index 3e759b3c..9ac4ce2c 100644 --- a/src/mixins/canvas_events.mixin.js +++ b/src/mixins/canvas_events.mixin.js @@ -806,26 +806,40 @@ this.setCursor(hoverCursor); } else { - this._setCornerCursor(corner, target, e); + this.setCursor(this.getCornerCursor(corner, target, e)); } - //actually unclear why it should return something - //is never evaluated - return true; }, /** * @private */ - _setCornerCursor: function(corner, target, e) { - if (corner in cursorOffset) { - this.setCursor(this._getRotatedCornerCursor(corner, target, e)); + getCornerCursor: function(corner, target, e) { + if (this.actionIsDisabled(corner, target, e)) { + return this.notAllowedCursor; + } + else if (corner in cursorOffset) { + return this._getRotatedCornerCursor(corner, target, e); } else if (corner === 'mtr' && target.hasRotatingPoint) { - this.setCursor(this.rotationCursor); + return this.rotationCursor; } else { - this.setCursor(this.defaultCursor); - return false; + return this.defaultCursor; + } + }, + + actionIsDisabled: function(corner, target, e) { + if (corner === 'mt' || corner === 'mb') { + return e[this.altActionKey] ? target.lockSkewingX : target.lockScalingY; + } + else if (corner === 'ml' || corner === 'mr') { + return e[this.altActionKey] ? target.lockSkewingY : target.lockScalingX; + } + else if (corner === 'mtr') { + return target.lockRotation; + } + else { + return target.lockScalingX && target.lockScalingY; } }, diff --git a/src/mixins/object_interactivity.mixin.js b/src/mixins/object_interactivity.mixin.js index 03e5a117..14ecfc13 100644 --- a/src/mixins/object_interactivity.mixin.js +++ b/src/mixins/object_interactivity.mixin.js @@ -164,7 +164,7 @@ height ); - if (drawRotatingPoint && this.isControlVisible('mtr') && !this.get('lockRotation') && hasControls) { + if (drawRotatingPoint && this.isControlVisible('mtr') && hasControls) { var rotateHeight = -height / 2; diff --git a/test/unit/canvas.js b/test/unit/canvas.js index 42241ca1..8201bf27 100644 --- a/test/unit/canvas.js +++ b/test/unit/canvas.js @@ -1984,4 +1984,251 @@ equal(counter, 1, 'listener on window executed once'); fabric.Canvas.prototype._onResize = originalResize; }); + + + test('actionIsDisabled ', function() { + ok(typeof fabric.Canvas.prototype.actionIsDisabled === 'function', 'actionIsDisabled is a function'); + var key = canvas.altActionKey; + var target = { + + }; + var e = { }; + e[key] = false; + equal(!!canvas.actionIsDisabled('mt', target, e), false, 'action is not disabled'); + equal(!!canvas.actionIsDisabled('mb', target, e), false, 'action is not disabled'); + equal(!!canvas.actionIsDisabled('ml', target, e), false, 'action is not disabled'); + equal(!!canvas.actionIsDisabled('mr', target, e), false, 'action is not disabled'); + equal(!!canvas.actionIsDisabled('tl', target, e), false, 'action is not disabled'); + equal(!!canvas.actionIsDisabled('tr', target, e), false, 'action is not disabled'); + equal(!!canvas.actionIsDisabled('bl', target, e), false, 'action is not disabled'); + equal(!!canvas.actionIsDisabled('br', target, e), false, 'action is not disabled'); + equal(!!canvas.actionIsDisabled('mtr', target, e), false, 'action is not disabled'); + var target = { + lockScalingX: true + }; + equal(!!canvas.actionIsDisabled('mt', target, e), false, 'mt action is not disabled'); + equal(!!canvas.actionIsDisabled('mb', target, e), false, 'mb action is not disabled'); + equal(!!canvas.actionIsDisabled('ml', target, e), true, 'ml action is disabled'); + equal(!!canvas.actionIsDisabled('mr', target, e), true, 'mr action is disabled'); + equal(!!canvas.actionIsDisabled('tl', target, e), false, 'tl action is not disabled'); + equal(!!canvas.actionIsDisabled('tr', target, e), false, 'tr action is not disabled'); + equal(!!canvas.actionIsDisabled('bl', target, e), false, 'bl action is not disabled'); + equal(!!canvas.actionIsDisabled('br', target, e), false, 'br action is not disabled'); + equal(!!canvas.actionIsDisabled('mtr', target, e), false, 'mtr action is not disabled'); + var target = { + lockScalingY: true + }; + equal(!!canvas.actionIsDisabled('mt', target, e), true, 'mt action is disabled'); + equal(!!canvas.actionIsDisabled('mb', target, e), true, 'mb action is disabled'); + equal(!!canvas.actionIsDisabled('ml', target, e), false, 'ml action is not disabled'); + equal(!!canvas.actionIsDisabled('mr', target, e), false, 'mr action is not disabled'); + equal(!!canvas.actionIsDisabled('tl', target, e), false, 'tl action is not disabled'); + equal(!!canvas.actionIsDisabled('tr', target, e), false, 'tr action is not disabled'); + equal(!!canvas.actionIsDisabled('bl', target, e), false, 'bl action is not disabled'); + equal(!!canvas.actionIsDisabled('br', target, e), false, 'br action is not disabled'); + equal(!!canvas.actionIsDisabled('mtr', target, e), false, 'mtr action is not disabled'); + var target = { + lockScalingY: true, + lockScalingX: true + }; + equal(!!canvas.actionIsDisabled('mt', target, e), true, 'mt action is disabled'); + equal(!!canvas.actionIsDisabled('mb', target, e), true, 'mb action is disabled'); + equal(!!canvas.actionIsDisabled('ml', target, e), true, 'ml action is disabled'); + equal(!!canvas.actionIsDisabled('mr', target, e), true, 'mr action is disabled'); + equal(!!canvas.actionIsDisabled('tl', target, e), true, 'tl action is disabled'); + equal(!!canvas.actionIsDisabled('tr', target, e), true, 'tr action is disabled'); + equal(!!canvas.actionIsDisabled('bl', target, e), true, 'bl action is disabled'); + equal(!!canvas.actionIsDisabled('br', target, e), true, 'br action is disabled'); + equal(!!canvas.actionIsDisabled('mtr', target, e), false, 'mtr action is not disabled'); + var target = { + lockRotation: true + }; + equal(!!canvas.actionIsDisabled('mt', target, e), false, 'mt action is not disabled'); + equal(!!canvas.actionIsDisabled('mb', target, e), false, 'mb action is not disabled'); + equal(!!canvas.actionIsDisabled('ml', target, e), false, 'ml action is not disabled'); + equal(!!canvas.actionIsDisabled('mr', target, e), false, 'mr action is not disabled'); + equal(!!canvas.actionIsDisabled('tl', target, e), false, 'tl action is not disabled'); + equal(!!canvas.actionIsDisabled('tr', target, e), false, 'tr action is not disabled'); + equal(!!canvas.actionIsDisabled('bl', target, e), false, 'bl action is not disabled'); + equal(!!canvas.actionIsDisabled('br', target, e), false, 'br action is not disabled'); + equal(!!canvas.actionIsDisabled('mtr', target, e), true, 'mtr action is disabled'); + var target = { + lockSkewingX: true, + lockSkewingY: true + }; + equal(!!canvas.actionIsDisabled('mt', target, e), false, 'mt action is not disabled'); + equal(!!canvas.actionIsDisabled('mb', target, e), false, 'mb action is not disabled'); + equal(!!canvas.actionIsDisabled('ml', target, e), false, 'ml action is not disabled'); + equal(!!canvas.actionIsDisabled('mr', target, e), false, 'mr action is not disabled'); + equal(!!canvas.actionIsDisabled('tl', target, e), false, 'tl action is not disabled'); + equal(!!canvas.actionIsDisabled('tr', target, e), false, 'tr action is not disabled'); + equal(!!canvas.actionIsDisabled('bl', target, e), false, 'bl action is not disabled'); + equal(!!canvas.actionIsDisabled('br', target, e), false, 'br action is not disabled'); + equal(!!canvas.actionIsDisabled('mtr', target, e), false, 'mtr action is not disabled'); + + e[key] = true; + var target = { + lockSkewingY: true + }; + equal(!!canvas.actionIsDisabled('mt', target, e), false, 'mt action is not disabled'); + equal(!!canvas.actionIsDisabled('mb', target, e), false, 'mb action is not disabled'); + equal(!!canvas.actionIsDisabled('ml', target, e), true, 'ml action is disabled'); + equal(!!canvas.actionIsDisabled('mr', target, e), true, 'mr action is disabled'); + equal(!!canvas.actionIsDisabled('tl', target, e), false, 'tl action is not disabled'); + equal(!!canvas.actionIsDisabled('tr', target, e), false, 'tr action is not disabled'); + equal(!!canvas.actionIsDisabled('bl', target, e), false, 'bl action is not disabled'); + equal(!!canvas.actionIsDisabled('br', target, e), false, 'br action is not disabled'); + equal(!!canvas.actionIsDisabled('mtr', target, e), false, 'mtr action is not disabled'); + + e[key] = true; + var target = { + lockSkewingX: true + }; + equal(!!canvas.actionIsDisabled('mt', target, e), true, 'mt action is disabled'); + equal(!!canvas.actionIsDisabled('mb', target, e), true, 'mb action is disabled'); + equal(!!canvas.actionIsDisabled('ml', target, e), false, 'ml action is not disabled'); + equal(!!canvas.actionIsDisabled('mr', target, e), false, 'mr action is not disabled'); + equal(!!canvas.actionIsDisabled('tl', target, e), false, 'tl action is not disabled'); + equal(!!canvas.actionIsDisabled('tr', target, e), false, 'tr action is not disabled'); + equal(!!canvas.actionIsDisabled('bl', target, e), false, 'bl action is not disabled'); + equal(!!canvas.actionIsDisabled('br', target, e), false, 'br action is not disabled'); + equal(!!canvas.actionIsDisabled('mtr', target, e), false, 'mtr action is not disabled'); + }); + + test('getCornerCursor ', function() { + ok(typeof fabric.Canvas.prototype.getCornerCursor === 'function', 'actionIsDisabled is a function'); + var key = canvas.altActionKey; + var target = { + getAngle: function() { return 0; }, + hasRotatingPoint: true, + }; + var e = { }; + e[key] = false; + equal(canvas.getCornerCursor('mt', target, e), 'n-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('mb', target, e), 's-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('ml', target, e), 'w-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('mr', target, e), 'e-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('tl', target, e), 'nw-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('tr', target, e), 'ne-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('bl', target, e), 'sw-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('br', target, e), 'se-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('mtr', target, e), 'crosshair', 'action is not disabled'); + + var target = { + getAngle: function() { return 0; }, + hasRotatingPoint: false, + }; + var e = { }; + e[key] = false; + equal(canvas.getCornerCursor('mtr', target, e), 'default', 'action is not disabled'); + + var target = { + lockScalingX: true, + hasRotatingPoint: true, + getAngle: function() { return 0; } + }; + equal(canvas.getCornerCursor('mt', target, e), 'n-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('mb', target, e), 's-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('ml', target, e), 'not-allowed', 'action is disabled'); + equal(canvas.getCornerCursor('mr', target, e), 'not-allowed', 'action is disabled'); + equal(canvas.getCornerCursor('tl', target, e), 'nw-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('tr', target, e), 'ne-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('bl', target, e), 'sw-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('br', target, e), 'se-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('mtr', target, e), 'crosshair', 'action is not disabled'); + + var target = { + getAngle: function() { return 0; }, + hasRotatingPoint: true, + lockScalingY: true + }; + equal(canvas.getCornerCursor('mt', target, e), 'not-allowed', 'action is disabled'); + equal(canvas.getCornerCursor('mb', target, e), 'not-allowed', 'action is disabled'); + equal(canvas.getCornerCursor('ml', target, e), 'w-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('mr', target, e), 'e-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('tl', target, e), 'nw-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('tr', target, e), 'ne-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('bl', target, e), 'sw-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('br', target, e), 'se-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('mtr', target, e), 'crosshair', 'action is not disabled'); + + var target = { + getAngle: function() { return 0; }, + hasRotatingPoint: true, + lockScalingY: true, + lockScalingX: true + }; + equal(canvas.getCornerCursor('mt', target, e), 'not-allowed', 'action is disabled'); + equal(canvas.getCornerCursor('mb', target, e), 'not-allowed', 'action is disabled'); + equal(canvas.getCornerCursor('ml', target, e), 'not-allowed', 'action is disabled'); + equal(canvas.getCornerCursor('mr', target, e), 'not-allowed', 'action is disabled'); + equal(canvas.getCornerCursor('tl', target, e), 'not-allowed', 'action is disabled'); + equal(canvas.getCornerCursor('tr', target, e), 'not-allowed', 'action is disabled'); + equal(canvas.getCornerCursor('bl', target, e), 'not-allowed', 'action is disabled'); + equal(canvas.getCornerCursor('br', target, e), 'not-allowed', 'action is disabled'); + equal(canvas.getCornerCursor('mtr', target, e), 'crosshair', 'action is not disabled'); + + var target = { + getAngle: function() { return 0; }, + hasRotatingPoint: true, + lockRotation: true + }; + equal(canvas.getCornerCursor('mt', target, e), 'n-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('mb', target, e), 's-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('ml', target, e), 'w-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('mr', target, e), 'e-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('tl', target, e), 'nw-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('tr', target, e), 'ne-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('bl', target, e), 'sw-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('br', target, e), 'se-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('mtr', target, e), 'not-allowed', 'action is disabled'); + + var target = { + getAngle: function() { return 0; }, + hasRotatingPoint: true, + lockSkewingX: true, + lockSkewingY: true + }; + equal(canvas.getCornerCursor('mt', target, e), 'n-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('mb', target, e), 's-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('ml', target, e), 'w-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('mr', target, e), 'e-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('tl', target, e), 'nw-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('tr', target, e), 'ne-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('bl', target, e), 'sw-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('br', target, e), 'se-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('mtr', target, e), 'crosshair', 'action is not disabled'); + + e[key] = true; + var target = { + getAngle: function() { return 0; }, + hasRotatingPoint: true, + lockSkewingY: true + }; + equal(canvas.getCornerCursor('mt', target, e), 'e-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('mb', target, e), 'w-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('ml', target, e), 'not-allowed', 'action is disabled'); + equal(canvas.getCornerCursor('mr', target, e), 'not-allowed', 'action is disabled'); + equal(canvas.getCornerCursor('tl', target, e), 'nw-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('tr', target, e), 'ne-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('bl', target, e), 'sw-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('br', target, e), 'se-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('mtr', target, e), 'crosshair', 'action is not disabled'); + + e[key] = true; + var target = { + getAngle: function() { return 0; }, + hasRotatingPoint: true, + lockSkewingX: true + }; + equal(canvas.getCornerCursor('mt', target, e), 'not-allowed', 'action is disabled'); + equal(canvas.getCornerCursor('mb', target, e), 'not-allowed', 'action is disabled'); + equal(canvas.getCornerCursor('ml', target, e), 'n-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('mr', target, e), 's-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('tl', target, e), 'nw-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('tr', target, e), 'ne-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('bl', target, e), 'sw-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('br', target, e), 'se-resize', 'action is not disabled'); + equal(canvas.getCornerCursor('mtr', target, e), 'crosshair', 'action is not disabled'); + }); })();