fabric
Version:
Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
485 lines (484 loc) • 15.9 kB
JavaScript
import { _defineProperty } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/defineProperty.mjs";
import { log } from "../util/internals/console.mjs";
import { classRegistry } from "../ClassRegistry.mjs";
import { createCollectionMixin } from "../Collection.mjs";
import { invertTransform, multiplyTransformMatrices } from "../util/misc/matrix.mjs";
import { enlivenObjectEnlivables, enlivenObjects } from "../util/misc/objectEnlive.mjs";
import { escapeXml } from "../util/lang_string.mjs";
import { applyTransformToObject } from "../util/misc/objectTransforms.mjs";
import { FabricObject } from "./Object/FabricObject.mjs";
import { Rect } from "./Rect.mjs";
import { LAYOUT_TYPE_ADDED, LAYOUT_TYPE_IMPERATIVE, LAYOUT_TYPE_INITIALIZATION, LAYOUT_TYPE_REMOVED } from "../LayoutManager/constants.mjs";
import { LayoutManager } from "../LayoutManager/LayoutManager.mjs";
//#region src/shapes/Group.ts
/**
* This class handles the specific case of creating a group using {@link Group#fromObject} and is not meant to be used in any other case.
* We could have used a boolean in the constructor, as we did previously, but we think the boolean
* would stay in the group's constructor interface and create confusion, therefore it was removed.
* This layout manager doesn't do anything and therefore keeps the exact layout the group had when {@link Group#toObject} was called.
*/
var NoopLayoutManager = class extends LayoutManager {
performLayout() {}
};
const groupDefaultValues = {
strokeWidth: 0,
subTargetCheck: false,
interactive: false
};
/**
* @fires object:added
* @fires object:removed
* @fires layout:before
* @fires layout:after
*/
var Group = class Group extends createCollectionMixin(FabricObject) {
static getDefaults() {
return {
...super.getDefaults(),
...Group.ownDefaults
};
}
/**
* Constructor
*
* @param {FabricObject[]} [objects] instance objects
* @param {Object} [options] Options object
*/
constructor(objects = [], options = {}) {
super();
_defineProperty(this, "_activeObjects", []);
_defineProperty(this, "__objectSelectionTracker", void 0);
_defineProperty(this, "__objectSelectionDisposer", void 0);
Object.assign(this, Group.ownDefaults);
this.setOptions(options);
this.groupInit(objects, options);
}
/**
* Shared code between group and active selection
* Meant to be used by the constructor.
*/
groupInit(objects, options) {
var _options$layoutManage;
this._objects = [...objects];
this.__objectSelectionTracker = this.__objectSelectionMonitor.bind(this, true);
this.__objectSelectionDisposer = this.__objectSelectionMonitor.bind(this, false);
this.forEachObject((object) => {
this.enterGroup(object, false);
});
this.layoutManager = (_options$layoutManage = options.layoutManager) !== null && _options$layoutManage !== void 0 ? _options$layoutManage : new LayoutManager();
this.layoutManager.performLayout({
type: LAYOUT_TYPE_INITIALIZATION,
target: this,
targets: [...objects],
x: options.left,
y: options.top
});
}
/**
* Checks if object can enter group and logs relevant warnings
* @private
* @param {FabricObject} object
* @returns
*/
canEnterGroup(object) {
if (object === this || this.isDescendantOf(object)) {
log("error", "Group: circular object trees are not supported, this call has no effect");
return false;
} else if (this._objects.indexOf(object) !== -1) {
log("error", "Group: duplicate objects are not supported inside group, this call has no effect");
return false;
}
return true;
}
/**
* Override this method to enhance performance (for groups with a lot of objects).
* If Overriding, be sure not pass illegal objects to group - it will break your app.
* @private
*/
_filterObjectsBeforeEnteringGroup(objects) {
return objects.filter((object, index, array) => {
return this.canEnterGroup(object) && array.indexOf(object) === index;
});
}
/**
* Add objects
* @param {...FabricObject[]} objects
*/
add(...objects) {
const allowedObjects = this._filterObjectsBeforeEnteringGroup(objects);
const size = super.add(...allowedObjects);
this._onAfterObjectsChange(LAYOUT_TYPE_ADDED, allowedObjects);
return size;
}
/**
* Inserts an object into collection at specified index
* @param {FabricObject[]} objects Object to insert
* @param {Number} index Index to insert object at
*/
insertAt(index, ...objects) {
const allowedObjects = this._filterObjectsBeforeEnteringGroup(objects);
const size = super.insertAt(index, ...allowedObjects);
this._onAfterObjectsChange(LAYOUT_TYPE_ADDED, allowedObjects);
return size;
}
/**
* Remove objects
* @param {...FabricObject[]} objects
* @returns {FabricObject[]} removed objects
*/
remove(...objects) {
const removed = super.remove(...objects);
this._onAfterObjectsChange(LAYOUT_TYPE_REMOVED, removed);
return removed;
}
_onObjectAdded(object) {
this.enterGroup(object, true);
this.fire("object:added", { target: object });
object.fire("added", { target: this });
}
/**
* @private
* @param {FabricObject} object
* @param {boolean} [removeParentTransform] true if object should exit group without applying group's transform to it
*/
_onObjectRemoved(object, removeParentTransform) {
this.exitGroup(object, removeParentTransform);
this.fire("object:removed", { target: object });
object.fire("removed", { target: this });
}
/**
* @private
* @param {'added'|'removed'} type
* @param {FabricObject[]} targets
*/
_onAfterObjectsChange(type, targets) {
this.layoutManager.performLayout({
type,
targets,
target: this
});
}
_onStackOrderChanged() {
this._set("dirty", true);
}
/**
* @private
* @param {string} key
* @param {*} value
*/
_set(key, value) {
const prev = this[key];
super._set(key, value);
if (key === "canvas" && prev !== value) (this._objects || []).forEach((object) => {
object._set(key, value);
});
return this;
}
/**
* @private
*/
_shouldSetNestedCoords() {
return this.subTargetCheck;
}
/**
* Remove all objects
* @returns {FabricObject[]} removed objects
*/
removeAll() {
this._activeObjects = [];
return this.remove(...this._objects);
}
/**
* keeps track of the selected objects
* @private
*/
__objectSelectionMonitor(selected, { target: object }) {
const activeObjects = this._activeObjects;
if (selected) {
activeObjects.push(object);
this._set("dirty", true);
} else if (activeObjects.length > 0) {
const index = activeObjects.indexOf(object);
if (index > -1) {
activeObjects.splice(index, 1);
this._set("dirty", true);
}
}
}
/**
* @private
* @param {boolean} watch
* @param {FabricObject} object
*/
_watchObject(watch, object) {
watch && this._watchObject(false, object);
if (watch) {
object.on("selected", this.__objectSelectionTracker);
object.on("deselected", this.__objectSelectionDisposer);
} else {
object.off("selected", this.__objectSelectionTracker);
object.off("deselected", this.__objectSelectionDisposer);
}
}
/**
* @private
* @param {FabricObject} object
* @param {boolean} [removeParentTransform] true if object is in canvas coordinate plane
*/
enterGroup(object, removeParentTransform) {
object.group && object.group.remove(object);
object._set("parent", this);
this._enterGroup(object, removeParentTransform);
}
/**
* @private
* @param {FabricObject} object
* @param {boolean} [removeParentTransform] true if object is in canvas coordinate plane
*/
_enterGroup(object, removeParentTransform) {
if (removeParentTransform) applyTransformToObject(object, multiplyTransformMatrices(invertTransform(this.calcTransformMatrix()), object.calcTransformMatrix()));
this._shouldSetNestedCoords() && object.setCoords();
object._set("group", this);
object._set("canvas", this.canvas);
this._watchObject(true, object);
const activeObject = this.canvas && this.canvas.getActiveObject && this.canvas.getActiveObject();
if (activeObject && (activeObject === object || object.isDescendantOf(activeObject))) this._activeObjects.push(object);
}
/**
* @private
* @param {FabricObject} object
* @param {boolean} [removeParentTransform] true if object should exit group without applying group's transform to it
*/
exitGroup(object, removeParentTransform) {
this._exitGroup(object, removeParentTransform);
object._set("parent", void 0);
object._set("canvas", void 0);
}
/**
* Executes the inner fabric logic of exiting a group.
* - Stop watching the object
* - Remove the object from the optimization map this._activeObjects
* - unset the group property of the object
* @protected
* @param {FabricObject} object
* @param {boolean} [removeParentTransform] true if object should exit group without applying group's transform to it
*/
_exitGroup(object, removeParentTransform) {
object._set("group", void 0);
if (!removeParentTransform) {
applyTransformToObject(object, multiplyTransformMatrices(this.calcTransformMatrix(), object.calcTransformMatrix()));
object.setCoords();
}
this._watchObject(false, object);
const index = this._activeObjects.length > 0 ? this._activeObjects.indexOf(object) : -1;
if (index > -1) this._activeObjects.splice(index, 1);
}
/**
* Decide if the group should cache or not. Create its own cache level
* needsItsOwnCache should be used when the object drawing method requires
* a cache step.
* Generally you do not cache objects in groups because the group is already cached.
* @return {Boolean}
*/
shouldCache() {
const ownCache = FabricObject.prototype.shouldCache.call(this);
if (ownCache) {
for (let i = 0; i < this._objects.length; i++) if (this._objects[i].willDrawShadow()) {
this.ownCaching = false;
return false;
}
}
return ownCache;
}
/**
* Check if this object or a child object will cast a shadow
* @return {Boolean}
*/
willDrawShadow() {
if (super.willDrawShadow()) return true;
for (let i = 0; i < this._objects.length; i++) if (this._objects[i].willDrawShadow()) return true;
return false;
}
/**
* Check if instance or its group are caching, recursively up
* @return {Boolean}
*/
isOnACache() {
return this.ownCaching || !!this.parent && this.parent.isOnACache();
}
/**
* Execute the drawing operation for an object on a specified context
* @param {CanvasRenderingContext2D} ctx Context to render on
*/
drawObject(ctx, forClipping, context) {
this._renderBackground(ctx);
for (let i = 0; i < this._objects.length; i++) {
var _this$canvas;
const obj = this._objects[i];
if (((_this$canvas = this.canvas) === null || _this$canvas === void 0 ? void 0 : _this$canvas.preserveObjectStacking) && obj.group !== this) {
ctx.save();
ctx.transform(...invertTransform(this.calcTransformMatrix()));
obj.render(ctx);
ctx.restore();
} else if (obj.group === this) obj.render(ctx);
}
this._drawClipPath(ctx, this.clipPath, context);
}
/**
* @override
* @return {Boolean}
*/
setCoords() {
super.setCoords();
this._shouldSetNestedCoords() && this.forEachObject((object) => object.setCoords());
}
triggerLayout(options = {}) {
this.layoutManager.performLayout({
target: this,
type: LAYOUT_TYPE_IMPERATIVE,
...options
});
}
/**
* Renders instance on a given context
* @param {CanvasRenderingContext2D} ctx context to render instance on
*/
render(ctx) {
this._transformDone = true;
super.render(ctx);
this._transformDone = false;
}
/**
*
* @private
* @param {'toObject'|'toDatalessObject'} [method]
* @param {string[]} [propertiesToInclude] Any properties that you might want to additionally include in the output
* @returns {FabricObject[]} serialized objects
*/
__serializeObjects(method, propertiesToInclude) {
const _includeDefaultValues = this.includeDefaultValues;
return this._objects.filter(function(obj) {
return !obj.excludeFromExport;
}).map(function(obj) {
const originalDefaults = obj.includeDefaultValues;
obj.includeDefaultValues = _includeDefaultValues;
const data = obj[method || "toObject"](propertiesToInclude);
obj.includeDefaultValues = originalDefaults;
return data;
});
}
/**
* Returns object representation of an instance
* @param {string[]} [propertiesToInclude] Any properties that you might want to additionally include in the output
* @return {Object} object representation of an instance
*/
toObject(propertiesToInclude = []) {
const layoutManager = this.layoutManager.toObject();
return {
...super.toObject([
"subTargetCheck",
"interactive",
...propertiesToInclude
]),
...layoutManager.strategy !== "fit-content" || this.includeDefaultValues ? { layoutManager } : {},
objects: this.__serializeObjects("toObject", propertiesToInclude)
};
}
toString() {
return `#<Group: (${this.complexity()})>`;
}
dispose() {
this.layoutManager.unsubscribeTargets({
targets: this.getObjects(),
target: this
});
this._activeObjects = [];
this.forEachObject((object) => {
this._watchObject(false, object);
object.dispose();
});
super.dispose();
}
/**
* @private
*/
_createSVGBgRect(reviver) {
if (!this.backgroundColor) return "";
const fillStroke = Rect.prototype._toSVG.call(this);
const commons = fillStroke.indexOf("COMMON_PARTS");
fillStroke[commons] = "for=\"group\" ";
const markup = fillStroke.join("");
return reviver ? reviver(markup) : markup;
}
/**
* Returns svg representation of an instance
* @param {TSVGReviver} [reviver] Method for further parsing of svg representation.
* @return {String} svg representation of an instance
*/
_toSVG(reviver) {
const svgString = [
"<g ",
"COMMON_PARTS",
" >\n"
];
const bg = this._createSVGBgRect(reviver);
bg && svgString.push(" ", bg);
for (let i = 0; i < this._objects.length; i++) svgString.push(" ", this._objects[i].toSVG(reviver));
svgString.push("</g>\n");
return svgString;
}
/**
* Returns styles-string for svg-export, specific version for group
* @return {String}
*/
getSvgStyles() {
const opacity = typeof this.opacity !== "undefined" && this.opacity !== 1 ? `opacity: ${escapeXml(this.opacity)};` : "", visibility = this.visible ? "" : " visibility: hidden;";
return [
opacity,
this.getSvgFilter(),
visibility
].join("");
}
/**
* Returns svg clipPath representation of an instance
* @param {Function} [reviver] Method for further parsing of svg representation.
* @return {String} svg representation of an instance
*/
toClipPathSVG(reviver) {
const svgString = [];
const bg = this._createSVGBgRect(reviver);
bg && svgString.push(" ", bg);
for (let i = 0; i < this._objects.length; i++) svgString.push(" ", this._objects[i].toClipPathSVG(reviver));
return this._createBaseClipPathSVGMarkup(svgString, { reviver });
}
/**
* @todo support loading from svg
* @private
* @param {Object} object Object to create a group from
* @returns {Promise<Group>}
*/
static fromObject({ type, objects = [], layoutManager, ...options }, abortable) {
return Promise.all([enlivenObjects(objects, abortable), enlivenObjectEnlivables(options, abortable)]).then(([objects, hydratedOptions]) => {
const group = new this(objects, {
...options,
...hydratedOptions,
layoutManager: new NoopLayoutManager()
});
if (layoutManager) group.layoutManager = new (classRegistry.getClass(layoutManager.type))(new (classRegistry.getClass(layoutManager.strategy))());
else group.layoutManager = new LayoutManager();
group.layoutManager.subscribeTargets({
type: LAYOUT_TYPE_INITIALIZATION,
target: group,
targets: group.getObjects()
});
group.setCoords();
return group;
});
}
};
_defineProperty(Group, "type", "Group");
_defineProperty(Group, "ownDefaults", groupDefaultValues);
classRegistry.setClass(Group);
//#endregion
export { Group };
//# sourceMappingURL=Group.mjs.map