Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-04-13 02:40:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Cursors not allowed (#4064)

Browse source 
* what so far
* not-allowed cursor
This commit is contained in:
Andrea Bogazzi 2017-07-03 15:10:49 +02:00 committed by GitHub
parent b841be66de
commit 03e504303c
4 changed files with 280 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/canvas.class.js
View file

@ -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;
})();

34
src/mixins/canvas_events.mixin.js
View file

@ -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;
}
},

2
src/mixins/object_interactivity.mixin.js
View file

@ -164,7 +164,7 @@
height
);
if (drawRotatingPoint && this.isControlVisible('mtr') && !this.get('lockRotation') && hasControls) {
if (drawRotatingPoint && this.isControlVisible('mtr') && hasControls) {
var rotateHeight = -height / 2;

247
test/unit/canvas.js
View file

@ -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');
});
})();