Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-05-20 11:21:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

remove lastRendered logic (#3111)

Browse source
This commit is contained in:
Andrea Bogazzi 2016-07-17 08:35:18 +02:00 committed by GitHub
parent 51995a73d8
commit 72a6c273bf
8 changed files with 76 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
dist/fabric.js vendored
View file

@ -8427,15 +8427,6 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
*/
altActionKey: 'shiftKey',
/**
* Indicates which key enable last rendered selection independently of stack position
* values: altKey, shiftKey, ctrlKey
* @since 1.6.3
* @type String
* @default
*/
lastRenderedKey: 'altKey',
/**
* Indicates that canvas is interactive. This property should not be changed.
* @type Boolean
@ -8676,9 +8667,11 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
isTargetTransparent: function (target, x, y) {
var hasBorders = target.hasBorders,
transparentCorners = target.transparentCorners,
ctx = this.contextCache;
ctx = this.contextCache,
originalColor = target.selectionBackgroundColor;
target.hasBorders = target.transparentCorners = false;
target.selectionBackgroundColor = '';
ctx.save();
ctx.transform.apply(ctx, this.viewportTransform);
@ -8689,6 +8682,7 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
target.hasBorders = hasBorders;
target.transparentCorners = transparentCorners;
target.selectionBackgroundColor = originalColor;
var isTransparent = fabric.util.isTransparent(
ctx, x, y, this.targetFindTolerance);
@ -9257,19 +9251,6 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
}
},
/**
* @private
*/
_isLastRenderedObject: function(pointer, e) {
var lastRendered = this.lastRenderedWithControls;
return (
(this.preserveObjectStacking || e[this.lastRenderedKey]) &&
lastRendered &&
lastRendered.visible &&
(this.containsPoint(null, lastRendered, pointer) ||
lastRendered._findTargetCorner(pointer)));
},
/**
* Method that determines what object we are clicking on
* @param {Event} e mouse event
@ -9281,7 +9262,8 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
}
var pointer = this.getPointer(e, true),
activeGroup = this.getActiveGroup();
activeGroup = this.getActiveGroup(),
activeObject = this.getActiveObject();
// first check current group (if one exists)
// active group does not check sub targets like normal groups.
@ -9290,14 +9272,13 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
return activeGroup;
}
var objects = this._objects;
this.targets = [ ];
if (this._isLastRenderedObject(pointer, e)) {
objects = [this.lastRenderedWithControls];
if (activeObject && this._checkTarget(pointer, activeObject)) {
return activeObject;
}
var target = this._searchPossibleTargets(objects, pointer);
this.targets = [ ];
var target = this._searchPossibleTargets(this._objects, pointer);
this._fireOverOutEvents(target, e);
return target;
},
@ -9694,7 +9675,6 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
continue;
}
this._objects[i]._renderControls(ctx);
this.lastRenderedWithControls = this._objects[i];
}
},
@ -9703,9 +9683,6 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
* @param {fabric.Object} obj Object that was removed
*/
_onObjectRemoved: function(obj) {
if (obj === this.lastRenderedWithControls) {
delete this.lastRenderedWithControls;
}
this.callSuper('_onObjectRemoved', obj);
},
@ -9715,7 +9692,6 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
* @chainable
*/
clear: function () {
delete this.lastRenderedWithControls;
return this.callSuper('clear');
}
});
@ -11998,7 +11974,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
* @param {Boolean} fromLeft When true, context is transformed to object's top/left corner. This is used when rendering text on Node
*/
transform: function(ctx, fromLeft) {
if (this.group && this.canvas.preserveObjectStacking && this.group === this.canvas._activeGroup) {
if (this.group && !this.group._transformDone && this.group === this.canvas._activeGroup) {
this.group.transform(ctx);
}
var center = fromLeft ? this._getLeftTopCoords() : this.getCenterPoint();
@ -17534,14 +17510,15 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
this.transform(ctx);
this._setShadow(ctx);
this.clipTo && fabric.util.clipContext(this, ctx);
this._transformDone = true;
// the array is now sorted in order of highest first, so start from end
for (var i = 0, len = this._objects.length; i < len; i++) {
this._renderObject(this._objects[i], ctx);
}
this.clipTo && ctx.restore();
ctx.restore();
this._transformDone = false;
},
/**

14
dist/fabric.min.js vendored
View file

File diff suppressed because one or more lines are too long

BIN
dist/fabric.min.js.gz vendored
View file

Binary file not shown.

29
dist/fabric.require.js vendored
View file

@ -4197,7 +4197,6 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, {
centeredRotation: false,
centeredKey: "altKey",
altActionKey: "shiftKey",
lastRenderedKey: "altKey",
interactive: true,
selection: true,
selectionKey: "shiftKey",
@ -4287,8 +4286,9 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, {
};
},
isTargetTransparent: function(target, x, y) {
var hasBorders = target.hasBorders, transparentCorners = target.transparentCorners, ctx = this.contextCache;
var hasBorders = target.hasBorders, transparentCorners = target.transparentCorners, ctx = this.contextCache, originalColor = target.selectionBackgroundColor;
target.hasBorders = target.transparentCorners = false;
target.selectionBackgroundColor = "";
ctx.save();
ctx.transform.apply(ctx, this.viewportTransform);
target.render(ctx);
@ -4296,6 +4296,7 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, {
target.active && target._renderControls(ctx);
target.hasBorders = hasBorders;
target.transparentCorners = transparentCorners;
target.selectionBackgroundColor = originalColor;
var isTransparent = fabric.util.isTransparent(ctx, x, y, this.targetFindTolerance);
this.clearContext(ctx);
return isTransparent;
@ -4613,24 +4614,19 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, {
ctx.strokeRect(groupSelector.ex + STROKE_OFFSET - (left > 0 ? 0 : aleft), groupSelector.ey + STROKE_OFFSET - (top > 0 ? 0 : atop), aleft, atop);
}
},
_isLastRenderedObject: function(pointer, e) {
var lastRendered = this.lastRenderedWithControls;
return (this.preserveObjectStacking || e[this.lastRenderedKey]) && lastRendered && lastRendered.visible && (this.containsPoint(null, lastRendered, pointer) || lastRendered._findTargetCorner(pointer));
},
findTarget: function(e, skipGroup) {
if (this.skipTargetFind) {
return;
}
var pointer = this.getPointer(e, true), activeGroup = this.getActiveGroup();
var pointer = this.getPointer(e, true), activeGroup = this.getActiveGroup(), activeObject = this.getActiveObject();
if (activeGroup && !skipGroup && this._checkTarget(pointer, activeGroup)) {
return activeGroup;
}
var objects = this._objects;
this.targets = [];
if (this._isLastRenderedObject(pointer, e)) {
objects = [ this.lastRenderedWithControls ];
if (activeObject && this._checkTarget(pointer, activeObject)) {
return activeObject;
}
var target = this._searchPossibleTargets(objects, pointer);
this.targets = [];
var target = this._searchPossibleTargets(this._objects, pointer);
this._fireOverOutEvents(target, e);
return target;
},
@ -4894,17 +4890,12 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, {
continue;
}
this._objects[i]._renderControls(ctx);
this.lastRenderedWithControls = this._objects[i];
}
},
_onObjectRemoved: function(obj) {
if (obj === this.lastRenderedWithControls) {
delete this.lastRenderedWithControls;
}
this.callSuper("_onObjectRemoved", obj);
},
clear: function() {
delete this.lastRenderedWithControls;
return this.callSuper("clear");
}
});
@ -5792,7 +5783,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
this._initClipping(options);
},
transform: function(ctx, fromLeft) {
if (this.group && this.canvas.preserveObjectStacking && this.group === this.canvas._activeGroup) {
if (this.group && !this.group._transformDone && this.group === this.canvas._activeGroup) {
this.group.transform(ctx);
}
var center = fromLeft ? this._getLeftTopCoords() : this.getCenterPoint();
@ -8378,11 +8369,13 @@ fabric.util.object.extend(fabric.Object.prototype, {
this.transform(ctx);
this._setShadow(ctx);
this.clipTo && fabric.util.clipContext(this, ctx);
this._transformDone = true;
for (var i = 0, len = this._objects.length; i < len; i++) {
this._renderObject(this._objects[i], ctx);
}
this.clipTo && ctx.restore();
ctx.restore();
this._transformDone = false;
},
_renderControls: function(ctx, noTransform) {
this.callSuper("_renderControls", ctx, noTransform);

46
src/canvas.class.js
View file

@ -101,15 +101,6 @@
*/
altActionKey: 'shiftKey',
/**
* Indicates which key enable last rendered selection independently of stack position
* values: altKey, shiftKey, ctrlKey
* @since 1.6.3
* @type String
* @default
*/
lastRenderedKey: 'altKey',
/**
* Indicates that canvas is interactive. This property should not be changed.
* @type Boolean
@ -350,9 +341,11 @@
isTargetTransparent: function (target, x, y) {
var hasBorders = target.hasBorders,
transparentCorners = target.transparentCorners,
ctx = this.contextCache;
ctx = this.contextCache,
originalColor = target.selectionBackgroundColor;
target.hasBorders = target.transparentCorners = false;
target.selectionBackgroundColor = '';
ctx.save();
ctx.transform.apply(ctx, this.viewportTransform);
@ -363,6 +356,7 @@
target.hasBorders = hasBorders;
target.transparentCorners = transparentCorners;
target.selectionBackgroundColor = originalColor;
var isTransparent = fabric.util.isTransparent(
ctx, x, y, this.targetFindTolerance);
@ -931,19 +925,6 @@
}
},
/**
* @private
*/
_isLastRenderedObject: function(pointer, e) {
var lastRendered = this.lastRenderedWithControls;
return (
(this.preserveObjectStacking || e[this.lastRenderedKey]) &&
lastRendered &&
lastRendered.visible &&
(this.containsPoint(null, lastRendered, pointer) ||
lastRendered._findTargetCorner(pointer)));
},
/**
* Method that determines what object we are clicking on
* @param {Event} e mouse event
@ -955,7 +936,8 @@
}
var pointer = this.getPointer(e, true),
activeGroup = this.getActiveGroup();
activeGroup = this.getActiveGroup(),
activeObject = this.getActiveObject();
// first check current group (if one exists)
// active group does not check sub targets like normal groups.
@ -964,14 +946,13 @@
return activeGroup;
}
var objects = this._objects;
this.targets = [ ];
if (this._isLastRenderedObject(pointer, e)) {
objects = [this.lastRenderedWithControls];
if (activeObject && this._checkTarget(pointer, activeObject)) {
return activeObject;
}
var target = this._searchPossibleTargets(objects, pointer);
this.targets = [ ];
var target = this._searchPossibleTargets(this._objects, pointer);
this._fireOverOutEvents(target, e);
return target;
},
@ -1368,7 +1349,6 @@
continue;
}
this._objects[i]._renderControls(ctx);
this.lastRenderedWithControls = this._objects[i];
}
},
@ -1377,9 +1357,6 @@
* @param {fabric.Object} obj Object that was removed
*/
_onObjectRemoved: function(obj) {
if (obj === this.lastRenderedWithControls) {
delete this.lastRenderedWithControls;
}
this.callSuper('_onObjectRemoved', obj);
},
@ -1389,7 +1366,6 @@
* @chainable
*/
clear: function () {
delete this.lastRenderedWithControls;
return this.callSuper('clear');
}
});

3
src/shapes/group.class.js
View file

@ -276,14 +276,15 @@
this.transform(ctx);
this._setShadow(ctx);
this.clipTo && fabric.util.clipContext(this, ctx);
this._transformDone = true;
// the array is now sorted in order of highest first, so start from end
for (var i = 0, len = this._objects.length; i < len; i++) {
this._renderObject(this._objects[i], ctx);
}
this.clipTo && ctx.restore();
ctx.restore();
this._transformDone = false;
},
/**

2
src/shapes/object.class.js
View file

@ -837,7 +837,7 @@
* @param {Boolean} fromLeft When true, context is transformed to object's top/left corner. This is used when rendering text on Node
*/
transform: function(ctx, fromLeft) {
if (this.group && this.canvas.preserveObjectStacking && this.group === this.canvas._activeGroup) {
if (this.group && !this.group._transformDone && this.group === this.canvas._activeGroup) {
this.group.transform(ctx);
}
var center = fromLeft ? this._getLeftTopCoords() : this.getCenterPoint();

45
test/unit/canvas.js
View file

@ -234,23 +234,36 @@
canvas.remove(rect);
});
test('findTarget last rendered', function() {
test('findTarget preserveObjectStacking false', function() {
ok(typeof canvas.findTarget == 'function');
var rect = makeRect({ left: 0, top: 0 }), target;
canvas.preserveObjectStacking = false;
var rect = makeRect({ left: 0, top: 0 }),
rectOver = makeRect({ left: 0, top: 0 }),
target,
pointer = { clientX: 5, clientY: 5 };
canvas.add(rect);
target = canvas.findTarget({
clientX: 5, clientY: 5
});
canvas.setActiveObject(target);
equal(target, rect, 'Should return the rect');
canvas.add(rectOver);
canvas.setActiveObject(rect);
canvas.renderAll();
equal(canvas.lastRenderedWithControls, rect);
canvas.remove(rect);
target = canvas.findTarget({
clientX: 5, clientY: 5
});
equal(target, null, 'Should not find target');
equal(canvas.lastRenderedWithControls, undefined, 'lastRendereWithControls reference should disappear');
target = canvas.findTarget(pointer);
equal(target, rect, 'Should return the rect');
});
test('findTarget preserveObjectStacking true', function() {
ok(typeof canvas.findTarget == 'function');
canvas.preserveObjectStacking = true;
var rect = makeRect({ left: 0, top: 0 }),
rectOver = makeRect({ left: 0, top: 0 }),
target,
pointer = { clientX: 5, clientY: 5 };
canvas.add(rect);
canvas.add(rectOver);
target = canvas.findTarget(pointer);
equal(target, rectOver, 'Should return the rectOver, rect is not considered');
canvas.setActiveObject(rect);
target = canvas.findTarget(pointer);
equal(target, rect, 'Should return the rect, because it is active');
canvas.preserveObjectStacking = false;
});
test('findTarget with subTargetCheck', function() {
@ -344,12 +357,13 @@
var rect1 = makeRect({ left: 0, top: 0 }), target;
var rect2 = makeRect({ left: 20, top: 20 });
canvas.perPixelTargetFind = true;
canvas.preserveObjectStacking = true;
canvas.add(rect1);
canvas.add(rect2);
var group = new fabric.Group([ rect1, rect2 ]);
canvas.setActiveGroup(group);
target = canvas.findTarget({
clientX: 10, clientY: 10
clientX: 8, clientY: 8
});
equal(target, group, 'Should return the activegroup');
@ -358,6 +372,7 @@
});
equal(target, null, 'Should miss the activegroup');
canvas.perPixelTargetFind = false;
canvas.preserveObjectStacking = false;
});
test('activeGroup sendToBack', function() {