mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-05-04 03:44:45 +00:00
Refactor fabric.Group
This commit is contained in:
kangax
parent
1183464dde
commit
ffa794ed54
5 changed files with 224 additions and 138 deletions
119
dist/all.js
vendored
119
dist/all.js
vendored
|
|
@ -2463,6 +2463,7 @@ fabric.Collection = {
|
|||
|
||||
// Generous contribution by Raph Levien, from libsvg-0.1.0.tar.gz
|
||||
function arcToSegments(x, y, rx, ry, large, sweep, rotateX, ox, oy) {
|
||||
|
||||
argsString = _join.call(arguments);
|
||||
|
||||
if (arcToSegmentsCache[argsString]) {
|
||||
|
|
@ -16446,26 +16447,28 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
|
|||
* @private
|
||||
*/
|
||||
_updateObjectsCoords: function() {
|
||||
var groupDeltaX = this.left,
|
||||
groupDeltaY = this.top;
|
||||
this.forEachObject(this._updateObjectCoords, this);
|
||||
},
|
||||
|
||||
this.forEachObject(function(object) {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_updateObjectCoords: function(object) {
|
||||
var objectLeft = object.getLeft(),
|
||||
objectTop = object.getTop();
|
||||
|
||||
var objectLeft = object.get('left'),
|
||||
objectTop = object.get('top');
|
||||
object.set({
|
||||
originalLeft: objectLeft,
|
||||
originalTop: objectTop,
|
||||
left: objectLeft - this.left,
|
||||
top: objectTop - this.top
|
||||
});
|
||||
|
||||
object.set('originalLeft', objectLeft);
|
||||
object.set('originalTop', objectTop);
|
||||
object.setCoords();
|
||||
|
||||
object.set('left', objectLeft - groupDeltaX);
|
||||
object.set('top', objectTop - groupDeltaY);
|
||||
|
||||
object.setCoords();
|
||||
|
||||
// do not display corners of objects enclosed in a group
|
||||
object.__origHasControls = object.hasControls;
|
||||
object.hasControls = false;
|
||||
}, this);
|
||||
// do not display corners of objects enclosed in a group
|
||||
object.__origHasControls = object.hasControls;
|
||||
object.hasControls = false;
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -16487,12 +16490,20 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
|
|||
this._objects.push(object);
|
||||
object.group = this;
|
||||
// since _restoreObjectsState set objects inactive
|
||||
this.forEachObject(function(o){ o.set('active', true); o.group = this; }, this);
|
||||
this.forEachObject(this._setObjectActive, this);
|
||||
this._calcBounds();
|
||||
this._updateObjectsCoords();
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_setObjectActive: function(object) {
|
||||
object.set('active', true);
|
||||
object.group = this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Removes an object from a group; Then recalculates group's dimension, position.
|
||||
* @param {Object} object
|
||||
|
|
@ -16502,12 +16513,14 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
|
|||
removeWithUpdate: function(object) {
|
||||
this._moveFlippedObject(object);
|
||||
this._restoreObjectsState();
|
||||
|
||||
// since _restoreObjectsState set objects inactive
|
||||
this.forEachObject(function(o){ o.set('active', true); o.group = this; }, this);
|
||||
this.forEachObject(this._setObjectActive, this);
|
||||
|
||||
this.remove(object);
|
||||
this._calcBounds();
|
||||
this._updateObjectsCoords();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
|
@ -16582,28 +16595,13 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
|
|||
ctx.save();
|
||||
this.transform(ctx);
|
||||
|
||||
var groupScaleFactor = Math.max(this.scaleX, this.scaleY);
|
||||
|
||||
this.clipTo && fabric.util.clipContext(this, ctx);
|
||||
|
||||
//The array is now sorted in order of highest first, so start from end.
|
||||
// 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++) {
|
||||
|
||||
var object = this._objects[i],
|
||||
originalScaleFactor = object.borderScaleFactor,
|
||||
originalHasRotatingPoint = object.hasRotatingPoint;
|
||||
|
||||
// do not render if object is not visible
|
||||
if (!object.visible) continue;
|
||||
|
||||
object.borderScaleFactor = groupScaleFactor;
|
||||
object.hasRotatingPoint = false;
|
||||
|
||||
object.render(ctx);
|
||||
|
||||
object.borderScaleFactor = originalScaleFactor;
|
||||
object.hasRotatingPoint = originalHasRotatingPoint;
|
||||
this._renderObject(this._objects[i], ctx);
|
||||
}
|
||||
|
||||
this.clipTo && ctx.restore();
|
||||
|
||||
if (!noTransform && this.active) {
|
||||
|
|
@ -16614,6 +16612,27 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
|
|||
this.setCoords();
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_renderObject: function(object, ctx) {
|
||||
|
||||
var originalScaleFactor = object.borderScaleFactor,
|
||||
originalHasRotatingPoint = object.hasRotatingPoint,
|
||||
groupScaleFactor = Math.max(this.scaleX, this.scaleY);
|
||||
|
||||
// do not render if object is not visible
|
||||
if (!object.visible) return;
|
||||
|
||||
object.borderScaleFactor = groupScaleFactor;
|
||||
object.hasRotatingPoint = false;
|
||||
|
||||
object.render(ctx);
|
||||
|
||||
object.borderScaleFactor = originalScaleFactor;
|
||||
object.hasRotatingPoint = originalHasRotatingPoint;
|
||||
},
|
||||
|
||||
/**
|
||||
* Retores original state of each of group objects (original state is that which was before group was created).
|
||||
* @private
|
||||
|
|
@ -16635,6 +16654,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
|
|||
var oldOriginX = object.get('originX');
|
||||
var oldOriginY = object.get('originY');
|
||||
var center = object.getCenterPoint();
|
||||
|
||||
object.set({
|
||||
originX: 'center',
|
||||
originY: 'center',
|
||||
|
|
@ -16642,6 +16662,24 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
|
|||
top: center.y
|
||||
});
|
||||
|
||||
this._toggleFlipping(object);
|
||||
|
||||
var newOrigin = object.getPointByOrigin(oldOriginX, oldOriginY);
|
||||
|
||||
object.set({
|
||||
originX: oldOriginX,
|
||||
originY: oldOriginY,
|
||||
left: newOrigin.x,
|
||||
top: newOrigin.y
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_toggleFlipping: function(object) {
|
||||
if (this.flipX) {
|
||||
object.toggle('flipX');
|
||||
object.set('left', -object.get('left'));
|
||||
|
|
@ -16652,15 +16690,6 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
|
|||
object.set('top', -object.get('top'));
|
||||
object.setAngle(-object.getAngle());
|
||||
}
|
||||
|
||||
var newOrigin = object.getPointByOrigin(oldOriginX, oldOriginY);
|
||||
object.set({
|
||||
originX: oldOriginX,
|
||||
originY: oldOriginY,
|
||||
left: newOrigin.x,
|
||||
top: newOrigin.y
|
||||
});
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
6
dist/all.min.js
vendored
6
dist/all.min.js
vendored
File diff suppressed because one or more lines are too long
BIN
dist/all.min.js.gz
vendored
BIN
dist/all.min.js.gz
vendored
Binary file not shown.
119
dist/all.require.js
vendored
119
dist/all.require.js
vendored
|
|
@ -2463,6 +2463,7 @@ fabric.Collection = {
|
|||
|
||||
// Generous contribution by Raph Levien, from libsvg-0.1.0.tar.gz
|
||||
function arcToSegments(x, y, rx, ry, large, sweep, rotateX, ox, oy) {
|
||||
|
||||
argsString = _join.call(arguments);
|
||||
|
||||
if (arcToSegmentsCache[argsString]) {
|
||||
|
|
@ -16446,26 +16447,28 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
|
|||
* @private
|
||||
*/
|
||||
_updateObjectsCoords: function() {
|
||||
var groupDeltaX = this.left,
|
||||
groupDeltaY = this.top;
|
||||
this.forEachObject(this._updateObjectCoords, this);
|
||||
},
|
||||
|
||||
this.forEachObject(function(object) {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_updateObjectCoords: function(object) {
|
||||
var objectLeft = object.getLeft(),
|
||||
objectTop = object.getTop();
|
||||
|
||||
var objectLeft = object.get('left'),
|
||||
objectTop = object.get('top');
|
||||
object.set({
|
||||
originalLeft: objectLeft,
|
||||
originalTop: objectTop,
|
||||
left: objectLeft - this.left,
|
||||
top: objectTop - this.top
|
||||
});
|
||||
|
||||
object.set('originalLeft', objectLeft);
|
||||
object.set('originalTop', objectTop);
|
||||
object.setCoords();
|
||||
|
||||
object.set('left', objectLeft - groupDeltaX);
|
||||
object.set('top', objectTop - groupDeltaY);
|
||||
|
||||
object.setCoords();
|
||||
|
||||
// do not display corners of objects enclosed in a group
|
||||
object.__origHasControls = object.hasControls;
|
||||
object.hasControls = false;
|
||||
}, this);
|
||||
// do not display corners of objects enclosed in a group
|
||||
object.__origHasControls = object.hasControls;
|
||||
object.hasControls = false;
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -16487,12 +16490,20 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
|
|||
this._objects.push(object);
|
||||
object.group = this;
|
||||
// since _restoreObjectsState set objects inactive
|
||||
this.forEachObject(function(o){ o.set('active', true); o.group = this; }, this);
|
||||
this.forEachObject(this._setObjectActive, this);
|
||||
this._calcBounds();
|
||||
this._updateObjectsCoords();
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_setObjectActive: function(object) {
|
||||
object.set('active', true);
|
||||
object.group = this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Removes an object from a group; Then recalculates group's dimension, position.
|
||||
* @param {Object} object
|
||||
|
|
@ -16502,12 +16513,14 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
|
|||
removeWithUpdate: function(object) {
|
||||
this._moveFlippedObject(object);
|
||||
this._restoreObjectsState();
|
||||
|
||||
// since _restoreObjectsState set objects inactive
|
||||
this.forEachObject(function(o){ o.set('active', true); o.group = this; }, this);
|
||||
this.forEachObject(this._setObjectActive, this);
|
||||
|
||||
this.remove(object);
|
||||
this._calcBounds();
|
||||
this._updateObjectsCoords();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
|
@ -16582,28 +16595,13 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
|
|||
ctx.save();
|
||||
this.transform(ctx);
|
||||
|
||||
var groupScaleFactor = Math.max(this.scaleX, this.scaleY);
|
||||
|
||||
this.clipTo && fabric.util.clipContext(this, ctx);
|
||||
|
||||
//The array is now sorted in order of highest first, so start from end.
|
||||
// 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++) {
|
||||
|
||||
var object = this._objects[i],
|
||||
originalScaleFactor = object.borderScaleFactor,
|
||||
originalHasRotatingPoint = object.hasRotatingPoint;
|
||||
|
||||
// do not render if object is not visible
|
||||
if (!object.visible) continue;
|
||||
|
||||
object.borderScaleFactor = groupScaleFactor;
|
||||
object.hasRotatingPoint = false;
|
||||
|
||||
object.render(ctx);
|
||||
|
||||
object.borderScaleFactor = originalScaleFactor;
|
||||
object.hasRotatingPoint = originalHasRotatingPoint;
|
||||
this._renderObject(this._objects[i], ctx);
|
||||
}
|
||||
|
||||
this.clipTo && ctx.restore();
|
||||
|
||||
if (!noTransform && this.active) {
|
||||
|
|
@ -16614,6 +16612,27 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
|
|||
this.setCoords();
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_renderObject: function(object, ctx) {
|
||||
|
||||
var originalScaleFactor = object.borderScaleFactor,
|
||||
originalHasRotatingPoint = object.hasRotatingPoint,
|
||||
groupScaleFactor = Math.max(this.scaleX, this.scaleY);
|
||||
|
||||
// do not render if object is not visible
|
||||
if (!object.visible) return;
|
||||
|
||||
object.borderScaleFactor = groupScaleFactor;
|
||||
object.hasRotatingPoint = false;
|
||||
|
||||
object.render(ctx);
|
||||
|
||||
object.borderScaleFactor = originalScaleFactor;
|
||||
object.hasRotatingPoint = originalHasRotatingPoint;
|
||||
},
|
||||
|
||||
/**
|
||||
* Retores original state of each of group objects (original state is that which was before group was created).
|
||||
* @private
|
||||
|
|
@ -16635,6 +16654,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
|
|||
var oldOriginX = object.get('originX');
|
||||
var oldOriginY = object.get('originY');
|
||||
var center = object.getCenterPoint();
|
||||
|
||||
object.set({
|
||||
originX: 'center',
|
||||
originY: 'center',
|
||||
|
|
@ -16642,6 +16662,24 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
|
|||
top: center.y
|
||||
});
|
||||
|
||||
this._toggleFlipping(object);
|
||||
|
||||
var newOrigin = object.getPointByOrigin(oldOriginX, oldOriginY);
|
||||
|
||||
object.set({
|
||||
originX: oldOriginX,
|
||||
originY: oldOriginY,
|
||||
left: newOrigin.x,
|
||||
top: newOrigin.y
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_toggleFlipping: function(object) {
|
||||
if (this.flipX) {
|
||||
object.toggle('flipX');
|
||||
object.set('left', -object.get('left'));
|
||||
|
|
@ -16652,15 +16690,6 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
|
|||
object.set('top', -object.get('top'));
|
||||
object.setAngle(-object.getAngle());
|
||||
}
|
||||
|
||||
var newOrigin = object.getPointByOrigin(oldOriginX, oldOriginY);
|
||||
object.set({
|
||||
originX: oldOriginX,
|
||||
originY: oldOriginY,
|
||||
left: newOrigin.x,
|
||||
top: newOrigin.y
|
||||
});
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -74,26 +74,28 @@
|
|||
* @private
|
||||
*/
|
||||
_updateObjectsCoords: function() {
|
||||
var groupDeltaX = this.left,
|
||||
groupDeltaY = this.top;
|
||||
this.forEachObject(this._updateObjectCoords, this);
|
||||
},
|
||||
|
||||
this.forEachObject(function(object) {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_updateObjectCoords: function(object) {
|
||||
var objectLeft = object.getLeft(),
|
||||
objectTop = object.getTop();
|
||||
|
||||
var objectLeft = object.get('left'),
|
||||
objectTop = object.get('top');
|
||||
object.set({
|
||||
originalLeft: objectLeft,
|
||||
originalTop: objectTop,
|
||||
left: objectLeft - this.left,
|
||||
top: objectTop - this.top
|
||||
});
|
||||
|
||||
object.set('originalLeft', objectLeft);
|
||||
object.set('originalTop', objectTop);
|
||||
object.setCoords();
|
||||
|
||||
object.set('left', objectLeft - groupDeltaX);
|
||||
object.set('top', objectTop - groupDeltaY);
|
||||
|
||||
object.setCoords();
|
||||
|
||||
// do not display corners of objects enclosed in a group
|
||||
object.__origHasControls = object.hasControls;
|
||||
object.hasControls = false;
|
||||
}, this);
|
||||
// do not display corners of objects enclosed in a group
|
||||
object.__origHasControls = object.hasControls;
|
||||
object.hasControls = false;
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -115,12 +117,20 @@
|
|||
this._objects.push(object);
|
||||
object.group = this;
|
||||
// since _restoreObjectsState set objects inactive
|
||||
this.forEachObject(function(o){ o.set('active', true); o.group = this; }, this);
|
||||
this.forEachObject(this._setObjectActive, this);
|
||||
this._calcBounds();
|
||||
this._updateObjectsCoords();
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_setObjectActive: function(object) {
|
||||
object.set('active', true);
|
||||
object.group = this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Removes an object from a group; Then recalculates group's dimension, position.
|
||||
* @param {Object} object
|
||||
|
|
@ -130,12 +140,14 @@
|
|||
removeWithUpdate: function(object) {
|
||||
this._moveFlippedObject(object);
|
||||
this._restoreObjectsState();
|
||||
|
||||
// since _restoreObjectsState set objects inactive
|
||||
this.forEachObject(function(o){ o.set('active', true); o.group = this; }, this);
|
||||
this.forEachObject(this._setObjectActive, this);
|
||||
|
||||
this.remove(object);
|
||||
this._calcBounds();
|
||||
this._updateObjectsCoords();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
|
@ -210,28 +222,13 @@
|
|||
ctx.save();
|
||||
this.transform(ctx);
|
||||
|
||||
var groupScaleFactor = Math.max(this.scaleX, this.scaleY);
|
||||
|
||||
this.clipTo && fabric.util.clipContext(this, ctx);
|
||||
|
||||
//The array is now sorted in order of highest first, so start from end.
|
||||
// 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++) {
|
||||
|
||||
var object = this._objects[i],
|
||||
originalScaleFactor = object.borderScaleFactor,
|
||||
originalHasRotatingPoint = object.hasRotatingPoint;
|
||||
|
||||
// do not render if object is not visible
|
||||
if (!object.visible) continue;
|
||||
|
||||
object.borderScaleFactor = groupScaleFactor;
|
||||
object.hasRotatingPoint = false;
|
||||
|
||||
object.render(ctx);
|
||||
|
||||
object.borderScaleFactor = originalScaleFactor;
|
||||
object.hasRotatingPoint = originalHasRotatingPoint;
|
||||
this._renderObject(this._objects[i], ctx);
|
||||
}
|
||||
|
||||
this.clipTo && ctx.restore();
|
||||
|
||||
if (!noTransform && this.active) {
|
||||
|
|
@ -242,6 +239,27 @@
|
|||
this.setCoords();
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_renderObject: function(object, ctx) {
|
||||
|
||||
var originalScaleFactor = object.borderScaleFactor,
|
||||
originalHasRotatingPoint = object.hasRotatingPoint,
|
||||
groupScaleFactor = Math.max(this.scaleX, this.scaleY);
|
||||
|
||||
// do not render if object is not visible
|
||||
if (!object.visible) return;
|
||||
|
||||
object.borderScaleFactor = groupScaleFactor;
|
||||
object.hasRotatingPoint = false;
|
||||
|
||||
object.render(ctx);
|
||||
|
||||
object.borderScaleFactor = originalScaleFactor;
|
||||
object.hasRotatingPoint = originalHasRotatingPoint;
|
||||
},
|
||||
|
||||
/**
|
||||
* Retores original state of each of group objects (original state is that which was before group was created).
|
||||
* @private
|
||||
|
|
@ -263,6 +281,7 @@
|
|||
var oldOriginX = object.get('originX');
|
||||
var oldOriginY = object.get('originY');
|
||||
var center = object.getCenterPoint();
|
||||
|
||||
object.set({
|
||||
originX: 'center',
|
||||
originY: 'center',
|
||||
|
|
@ -270,6 +289,24 @@
|
|||
top: center.y
|
||||
});
|
||||
|
||||
this._toggleFlipping(object);
|
||||
|
||||
var newOrigin = object.getPointByOrigin(oldOriginX, oldOriginY);
|
||||
|
||||
object.set({
|
||||
originX: oldOriginX,
|
||||
originY: oldOriginY,
|
||||
left: newOrigin.x,
|
||||
top: newOrigin.y
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_toggleFlipping: function(object) {
|
||||
if (this.flipX) {
|
||||
object.toggle('flipX');
|
||||
object.set('left', -object.get('left'));
|
||||
|
|
@ -280,15 +317,6 @@
|
|||
object.set('top', -object.get('top'));
|
||||
object.setAngle(-object.getAngle());
|
||||
}
|
||||
|
||||
var newOrigin = object.getPointByOrigin(oldOriginX, oldOriginY);
|
||||
object.set({
|
||||
originX: oldOriginX,
|
||||
originY: oldOriginY,
|
||||
left: newOrigin.x,
|
||||
top: newOrigin.y
|
||||
});
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in a new issue