mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-04-11 01:40:59 +00:00
ce4809d1e8
Conflicts: dist/all.js dist/all.require.js src/brushes/circle_brush.class.js src/brushes/spray_brush.class.js src/canvas.class.js src/mixins/canvas_events.mixin.js src/mixins/object_interactivity.mixin.js src/shapes/group.class.js src/shapes/image.class.js src/shapes/object.class.js src/util/misc.js
552 lines
14 KiB
JavaScript
552 lines
14 KiB
JavaScript
(function(global){
|
|
|
|
"use strict";
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
extend = fabric.util.object.extend,
|
|
min = fabric.util.array.min,
|
|
max = fabric.util.array.max,
|
|
invoke = fabric.util.array.invoke,
|
|
degreesToRadians = fabric.util.degreesToRadians;
|
|
|
|
if (fabric.Group) {
|
|
return;
|
|
}
|
|
|
|
// lock-related properties, for use in fabric.Group#get
|
|
// to enable locking behavior on group
|
|
// when one of its objects has lock-related properties set
|
|
var _lockProperties = {
|
|
lockMovementX: true,
|
|
lockMovementY: true,
|
|
lockRotation: true,
|
|
lockScalingX: true,
|
|
lockScalingY: true,
|
|
lockUniScaling: true
|
|
};
|
|
|
|
/**
|
|
* Group class
|
|
* @class fabric.Group
|
|
* @extends fabric.Object
|
|
* @mixes fabric.Collection
|
|
* @tutorial {@link http://fabricjs.com/fabric-intro-part-3/#groups}
|
|
* @see {@link fabric.Group#initialize} for constructor definition
|
|
*/
|
|
fabric.Group = fabric.util.createClass(fabric.Object, fabric.Collection, /** @lends fabric.Group.prototype */ {
|
|
|
|
/**
|
|
* Type of an object
|
|
* @type String
|
|
* @default
|
|
*/
|
|
type: 'group',
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {Object} objects Group objects
|
|
* @param {Object} [options] Options object
|
|
* @return {Object} thisArg
|
|
*/
|
|
initialize: function(objects, options) {
|
|
options = options || { };
|
|
|
|
// NOTE: all the coords calculations need to have a canvas before they make sense
|
|
this._objects = objects || [];
|
|
for (var i = this._objects.length; i--; ) {
|
|
this._objects[i].group = this;
|
|
//this._objects[i].setCoords();
|
|
}
|
|
|
|
this.originalState = { };
|
|
this.callSuper('initialize');
|
|
|
|
//this._calcBounds();
|
|
//this._updateObjectsCoords();
|
|
|
|
if (options) {
|
|
extend(this, options);
|
|
}
|
|
this._setOpacityIfSame();
|
|
|
|
//this.setCoords(true);
|
|
//this.saveCoords();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_updateObjectsCoords: function() {
|
|
this.forEachObject(this._updateObjectCoords, this);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_updateObjectCoords: function(object) {
|
|
var objectLeft = object.getLeft(),
|
|
objectTop = object.getTop();
|
|
|
|
object.set({
|
|
originalLeft: objectLeft,
|
|
originalTop: objectTop,
|
|
left: objectLeft - this.left,
|
|
top: objectTop - this.top
|
|
});
|
|
|
|
object.setCoords();
|
|
|
|
// do not display corners of objects enclosed in a group
|
|
object.__origHasControls = object.hasControls;
|
|
object.hasControls = false;
|
|
},
|
|
|
|
/**
|
|
* Returns string represenation of a group
|
|
* @return {String}
|
|
*/
|
|
toString: function() {
|
|
return '#<fabric.Group: (' + this.complexity() + ')>';
|
|
},
|
|
|
|
/**
|
|
* Adds an object to a group; Then recalculates group's dimension, position.
|
|
* @param {Object} object
|
|
* @return {fabric.Group} thisArg
|
|
* @chainable
|
|
*/
|
|
addWithUpdate: function(object) {
|
|
this._restoreObjectsState();
|
|
this._objects.push(object);
|
|
object.group = this;
|
|
// since _restoreObjectsState set objects inactive
|
|
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
|
|
* @return {fabric.Group} thisArg
|
|
* @chainable
|
|
*/
|
|
removeWithUpdate: function(object) {
|
|
this._moveFlippedObject(object);
|
|
this._restoreObjectsState();
|
|
|
|
// since _restoreObjectsState set objects inactive
|
|
this.forEachObject(this._setObjectActive, this);
|
|
|
|
this.remove(object);
|
|
this._calcBounds();
|
|
this._updateObjectsCoords();
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_onObjectAdded: function(object) {
|
|
object.group = this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_onObjectRemoved: function(object) {
|
|
delete object.group;
|
|
object.set('active', false);
|
|
},
|
|
|
|
/**
|
|
* Properties that are delegated to group objects when reading/writing
|
|
* @param {Object} delegatedProperties
|
|
*/
|
|
delegatedProperties: {
|
|
fill: true,
|
|
opacity: true,
|
|
fontFamily: true,
|
|
fontWeight: true,
|
|
fontSize: true,
|
|
fontStyle: true,
|
|
lineHeight: true,
|
|
textDecoration: true,
|
|
textAlign: true,
|
|
backgroundColor: true
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_set: function(key, value) {
|
|
if (key in this.delegatedProperties) {
|
|
var i = this._objects.length;
|
|
this[key] = value;
|
|
while (i--) {
|
|
this._objects[i].set(key, value);
|
|
}
|
|
}
|
|
else {
|
|
this[key] = value;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of an instance
|
|
* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
|
|
* @return {Object} object representation of an instance
|
|
*/
|
|
toObject: function(propertiesToInclude) {
|
|
return extend(this.callSuper('toObject', propertiesToInclude), {
|
|
objects: invoke(this._objects, 'toObject', propertiesToInclude)
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Renders instance on a given context
|
|
* @param {CanvasRenderingContext2D} ctx context to render instance on
|
|
* @param {Boolean} [noTransform] When true, context is not transformed
|
|
*/
|
|
render: function(ctx, noTransform) {
|
|
// do not render if object is not visible
|
|
if (!this.visible) return;
|
|
|
|
ctx.save();
|
|
this.clipTo && fabric.util.clipContext(this, ctx);
|
|
|
|
// 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();
|
|
|
|
this.callSuper('_renderControls', ctx, noTransform);
|
|
ctx.restore();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_renderObject: function(object, ctx) {
|
|
var v = this.canvas.viewportTransform,
|
|
sxy = fabric.util.transformPoint(
|
|
new fabric.Point(this.scaleX, this.scaleY),
|
|
v,
|
|
true
|
|
);
|
|
|
|
var originalScaleFactor = object.borderScaleFactor,
|
|
originalHasRotatingPoint = object.hasRotatingPoint,
|
|
groupScaleFactor = Math.max(sxy.x, sxy.y);
|
|
|
|
// 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
|
|
* @return {fabric.Group} thisArg
|
|
* @chainable
|
|
*/
|
|
_restoreObjectsState: function() {
|
|
this._objects.forEach(this._restoreObjectState, this);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Moves a flipped object to the position where it's displayed
|
|
* @private
|
|
* @param {fabric.Object} object
|
|
* @return {fabric.Group} thisArg
|
|
*/
|
|
_moveFlippedObject: function(object) {
|
|
var oldOriginX = object.get('originX'),
|
|
oldOriginY = object.get('originY'),
|
|
center = object.getCenterPoint();
|
|
|
|
object.set({
|
|
originX: 'center',
|
|
originY: 'center',
|
|
left: center.x,
|
|
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'));
|
|
object.setAngle(-object.getAngle());
|
|
}
|
|
if (this.flipY) {
|
|
object.toggle('flipY');
|
|
object.set('top', -object.get('top'));
|
|
object.setAngle(-object.getAngle());
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Restores original state of a specified object in group
|
|
* @private
|
|
* @param {fabric.Object} object
|
|
* @return {fabric.Group} thisArg
|
|
*/
|
|
_restoreObjectState: function(object) {
|
|
this._setObjectPosition(object);
|
|
|
|
object.setCoords();
|
|
object.hasControls = object.__origHasControls;
|
|
delete object.__origHasControls;
|
|
object.set('active', false);
|
|
object.setCoords();
|
|
delete object.group;
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_setObjectPosition: function(object) {
|
|
var groupLeft = this.getLeft(),
|
|
groupTop = this.getTop(),
|
|
rotated = this._getRotatedLeftTop(object);
|
|
|
|
object.set({
|
|
angle: object.getAngle() + this.getAngle(),
|
|
left: groupLeft + rotated.left,
|
|
top: groupTop + rotated.top,
|
|
scaleX: object.get('scaleX') * this.get('scaleX'),
|
|
scaleY: object.get('scaleY') * this.get('scaleY')
|
|
});
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_getRotatedLeftTop: function(object) {
|
|
var groupAngle = this.getAngle() * (Math.PI / 180);
|
|
return {
|
|
left: (-Math.sin(groupAngle) * object.getTop() * this.get('scaleY') +
|
|
Math.cos(groupAngle) * object.getLeft() * this.get('scaleX')),
|
|
|
|
top: (Math.cos(groupAngle) * object.getTop() * this.get('scaleY') +
|
|
Math.sin(groupAngle) * object.getLeft() * this.get('scaleX'))
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Destroys a group (restoring state of its objects)
|
|
* @return {fabric.Group} thisArg
|
|
* @chainable
|
|
*/
|
|
destroy: function() {
|
|
this._objects.forEach(this._moveFlippedObject, this);
|
|
return this._restoreObjectsState();
|
|
},
|
|
|
|
/**
|
|
* Saves coordinates of this instance (to be used together with `hasMoved`)
|
|
* @saveCoords
|
|
* @return {fabric.Group} thisArg
|
|
* @chainable
|
|
*/
|
|
saveCoords: function() {
|
|
this._originalLeft = this.get('left');
|
|
this._originalTop = this.get('top');
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Checks whether this group was moved (since `saveCoords` was called last)
|
|
* @return {Boolean} true if an object was moved (since fabric.Group#saveCoords was called)
|
|
*/
|
|
hasMoved: function() {
|
|
return this._originalLeft !== this.get('left') ||
|
|
this._originalTop !== this.get('top');
|
|
},
|
|
|
|
/**
|
|
* Sets coordinates of all group objects
|
|
* @return {fabric.Group} thisArg
|
|
* @chainable
|
|
*/
|
|
setObjectsCoords: function() {
|
|
this.forEachObject(function(object) {
|
|
object.setCoords();
|
|
});
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_setOpacityIfSame: function() {
|
|
var objects = this.getObjects(),
|
|
firstValue = objects[0] ? objects[0].get('opacity') : 1;
|
|
|
|
var isSameOpacity = objects.every(function(o) {
|
|
return o.get('opacity') === firstValue;
|
|
});
|
|
|
|
if (isSameOpacity) {
|
|
this.opacity = firstValue;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_calcBounds: function() {
|
|
var aX = [],
|
|
aY = [],
|
|
o;
|
|
|
|
for (var i = 0, len = this._objects.length; i < len; ++i) {
|
|
o = this._objects[i];
|
|
o.setCoords();
|
|
for (var prop in o.oCoords) {
|
|
aX.push(o.oCoords[prop].x);
|
|
aY.push(o.oCoords[prop].y);
|
|
}
|
|
}
|
|
|
|
this.set(this._getBounds(aX, aY));
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_getBounds: function(aX, aY) {
|
|
var ivt;
|
|
if (this.canvas) {
|
|
ivt = fabric.util.invertTransform(this.canvas.viewportTransform);
|
|
}
|
|
else { // BUG: this always happens when new groups are created
|
|
ivt = [1, 0, 0, 1, 0, 0];
|
|
console.log('no canvas');
|
|
}
|
|
var minXY = fabric.util.transformPoint(new fabric.Point(min(aX), min(aY)), ivt),
|
|
maxXY = fabric.util.transformPoint(new fabric.Point(max(aX), max(aY)), ivt);
|
|
|
|
return {
|
|
width: (maxXY.x - minXY.x) || 0,
|
|
height: (maxXY.y - minXY.y) || 0,
|
|
left: (minXY.x + maxXY.x) / 2 || 0,
|
|
top: (minXY.y + maxXY.y) / 2 || 0,
|
|
};
|
|
},
|
|
|
|
/* _TO_SVG_START_ */
|
|
/**
|
|
* Returns svg representation of an instance
|
|
* @param {Function} [reviver] Method for further parsing of svg representation.
|
|
* @return {String} svg representation of an instance
|
|
*/
|
|
toSVG: function(reviver) {
|
|
var markup = [
|
|
'<g ',
|
|
'transform="', this.getSvgTransform(),
|
|
'">'
|
|
];
|
|
|
|
for (var i = 0, len = this._objects.length; i < len; i++) {
|
|
markup.push(this._objects[i].toSVG(reviver));
|
|
}
|
|
|
|
markup.push('</g>');
|
|
|
|
return reviver ? reviver(markup.join('')) : markup.join('');
|
|
},
|
|
/* _TO_SVG_END_ */
|
|
|
|
/**
|
|
* Returns requested property
|
|
* @param {String} prop Property to get
|
|
* @return {Any}
|
|
*/
|
|
get: function(prop) {
|
|
if (prop in _lockProperties) {
|
|
if (this[prop]) {
|
|
return this[prop];
|
|
}
|
|
else {
|
|
for (var i = 0, len = this._objects.length; i < len; i++) {
|
|
if (this._objects[i][prop]) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
}
|
|
else {
|
|
if (prop in this.delegatedProperties) {
|
|
return this._objects[0] && this._objects[0].get(prop);
|
|
}
|
|
return this[prop];
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Returns {@link fabric.Group} instance from an object representation
|
|
* @static
|
|
* @memberOf fabric.Group
|
|
* @param {Object} object Object to create a group from
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.Group} An instance of fabric.Group
|
|
*/
|
|
fabric.Group.fromObject = function(object, callback) {
|
|
fabric.util.enlivenObjects(object.objects, function(enlivenedObjects) {
|
|
delete object.objects;
|
|
callback && callback(new fabric.Group(enlivenedObjects, object));
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Indicates that instances of this type are async
|
|
* @static
|
|
* @memberOf fabric.Group
|
|
* @type Boolean
|
|
* @default
|
|
*/
|
|
fabric.Group.async = true;
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|