fabric 7.3.1 → 7.5.0-beta.1

package/dist/src/canvas/StaticCanvas.mjs

@@ -1,934 +0,0 @@
-import { _defineProperty } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/defineProperty.mjs";
-import { config } from "../config.mjs";
-import { FabricError, log } from "../util/internals/console.mjs";
-import { getDevicePixelRatio } from "../env/index.mjs";
-import { CENTER, VERSION } from "../constants.mjs";
-import { runningAnimations } from "../util/animation/AnimationRegistry.mjs";
-import { Point } from "../Point.mjs";
-import { createCollectionMixin, isCollection } from "../Collection.mjs";
-import { CommonMethods } from "../CommonMethods.mjs";
-import { cancelAnimFrame, requestAnimFrame } from "../util/animation/AnimationFrameProvider.mjs";
-import { uid } from "../util/internals/uid.mjs";
-import { createCanvasElementFor, toBlob, toDataURL } from "../util/misc/dom.mjs";
-import { invertTransform, transformPoint } from "../util/misc/matrix.mjs";
-import { enlivenObjectEnlivables, enlivenObjects } from "../util/misc/objectEnlive.mjs";
-import { pick } from "../util/misc/pick.mjs";
-import { toFixed } from "../util/misc/toFixed.mjs";
-import { matrixToSVG } from "../util/misc/svgExport.mjs";
-import { isFiller, isPattern, isTextObject } from "../util/typeAssertions.mjs";
-import { StaticCanvasDOMManager } from "./DOMManagers/StaticCanvasDOMManager.mjs";
-import { staticCanvasDefaults } from "./StaticCanvasOptions.mjs";
-import { escapeXml } from "../util/lang_string.mjs";
-//#region src/canvas/StaticCanvas.ts
-/**
-* Static canvas class
-* @see {@link http://fabric5.fabricjs.com/static_canvas|StaticCanvas demo}
-* @fires before:render
-* @fires after:render
-* @fires canvas:cleared
-* @fires object:added
-* @fires object:removed
-*/
-var StaticCanvas = class StaticCanvas extends createCollectionMixin(CommonMethods) {
-	/**
-	* A reference to the canvas actual HTMLCanvasElement.
-	* Can be use to read the raw pixels, but never write or manipulate
-	* @type HTMLCanvasElement
-	*/
-	get lowerCanvasEl() {
-		var _this$elements$lower;
-		return (_this$elements$lower = this.elements.lower) === null || _this$elements$lower === void 0 ? void 0 : _this$elements$lower.el;
-	}
-	get contextContainer() {
-		var _this$elements$lower2;
-		return (_this$elements$lower2 = this.elements.lower) === null || _this$elements$lower2 === void 0 ? void 0 : _this$elements$lower2.ctx;
-	}
-	static getDefaults() {
-		return StaticCanvas.ownDefaults;
-	}
-	constructor(el, options = {}) {
-		super();
-		Object.assign(this, this.constructor.getDefaults());
-		this.set(options);
-		this.initElements(el);
-		this._setDimensionsImpl({
-			width: this.width || this.elements.lower.el.width || 0,
-			height: this.height || this.elements.lower.el.height || 0
-		});
-		this.skipControlsDrawing = false;
-		this.viewportTransform = [...this.viewportTransform];
-		this.calcViewportBoundaries();
-	}
-	initElements(el) {
-		this.elements = new StaticCanvasDOMManager(el);
-	}
-	add(...objects) {
-		const size = super.add(...objects);
-		objects.length > 0 && this.renderOnAddRemove && this.requestRenderAll();
-		return size;
-	}
-	insertAt(index, ...objects) {
-		const size = super.insertAt(index, ...objects);
-		objects.length > 0 && this.renderOnAddRemove && this.requestRenderAll();
-		return size;
-	}
-	remove(...objects) {
-		const removed = super.remove(...objects);
-		removed.length > 0 && this.renderOnAddRemove && this.requestRenderAll();
-		return removed;
-	}
-	_onObjectAdded(obj) {
-		if (obj.canvas && obj.canvas !== this) {
-			log("warn", "Canvas is trying to add an object that belongs to a different canvas.\nResulting to default behavior: removing object from previous canvas and adding to new canvas");
-			obj.canvas.remove(obj);
-		}
-		obj._set("canvas", this);
-		obj.setCoords();
-		this.fire("object:added", { target: obj });
-		obj.fire("added", { target: this });
-	}
-	_onObjectRemoved(obj) {
-		obj._set("canvas", void 0);
-		this.fire("object:removed", { target: obj });
-		obj.fire("removed", { target: this });
-	}
-	_onStackOrderChanged() {
-		this.renderOnAddRemove && this.requestRenderAll();
-	}
-	/**
-	* @private
-	* @see https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/SettingUptheCanvas/SettingUptheCanvas.html
-	* @return {Number} retinaScaling if applied, otherwise 1;
-	*/
-	getRetinaScaling() {
-		return this.enableRetinaScaling ? getDevicePixelRatio() : 1;
-	}
-	/**
-	* Calculates canvas element offset relative to the document
-	* This method is also attached as "resize" event handler of window
-	*/
-	calcOffset() {
-		return this._offset = this.elements.calcOffset();
-	}
-	/**
-	* Returns canvas width (in px)
-	* @return {Number}
-	*/
-	getWidth() {
-		return this.width;
-	}
-	/**
-	* Returns canvas height (in px)
-	* @return {Number}
-	*/
-	getHeight() {
-		return this.height;
-	}
-	/**
-	* Internal use only
-	* @protected
-	*/
-	_setDimensionsImpl(dimensions, { cssOnly = false, backstoreOnly = false } = {}) {
-		if (!cssOnly) {
-			const size = {
-				width: this.width,
-				height: this.height,
-				...dimensions
-			};
-			this.elements.setDimensions(size, this.getRetinaScaling());
-			this.hasLostContext = true;
-			this.width = size.width;
-			this.height = size.height;
-		}
-		if (!backstoreOnly) this.elements.setCSSDimensions(dimensions);
-		this.calcOffset();
-	}
-	setDimensions(dimensions, options) {
-		this._setDimensionsImpl(dimensions, options);
-		if (!options || !options.cssOnly) this.requestRenderAll();
-	}
-	/**
-	* Returns canvas zoom level
-	* @return {Number}
-	*/
-	getZoom() {
-		return this.viewportTransform[0];
-	}
-	/**
-	* Sets viewport transformation of this canvas instance
-	* @param {Array} vpt a Canvas 2D API transform matrix
-	*/
-	setViewportTransform(vpt) {
-		this.viewportTransform = vpt;
-		this.calcViewportBoundaries();
-		this.renderOnAddRemove && this.requestRenderAll();
-	}
-	/**
-	* Sets zoom level of this canvas instance, the zoom centered around point
-	* meaning that following zoom to point with the same point will have the visual
-	* effect of the zoom originating from that point. The point won't move.
-	* It has nothing to do with canvas center or visual center of the viewport.
-	* @param {Point} point to zoom with respect to
-	* @param {Number} value to set zoom to, less than 1 zooms out
-	*/
-	zoomToPoint(point, value) {
-		const before = point, vpt = [...this.viewportTransform];
-		const newPoint = transformPoint(point, invertTransform(vpt));
-		vpt[0] = value;
-		vpt[3] = value;
-		const after = transformPoint(newPoint, vpt);
-		vpt[4] += before.x - after.x;
-		vpt[5] += before.y - after.y;
-		this.setViewportTransform(vpt);
-	}
-	/**
-	* Sets zoom level of this canvas instance
-	* @param {Number} value to set zoom to, less than 1 zooms out
-	*/
-	setZoom(value) {
-		this.zoomToPoint(new Point(0, 0), value);
-	}
-	/**
-	* Pan viewport so as to place point at top left corner of canvas
-	* @param {Point} point to move to
-	*/
-	absolutePan(point) {
-		const vpt = [...this.viewportTransform];
-		vpt[4] = -point.x;
-		vpt[5] = -point.y;
-		return this.setViewportTransform(vpt);
-	}
-	/**
-	* Pans viewpoint relatively
-	* @param {Point} point (position vector) to move by
-	*/
-	relativePan(point) {
-		return this.absolutePan(new Point(-point.x - this.viewportTransform[4], -point.y - this.viewportTransform[5]));
-	}
-	/**
-	* Returns <canvas> element corresponding to this instance
-	* @return {HTMLCanvasElement}
-	*/
-	getElement() {
-		return this.elements.lower.el;
-	}
-	/**
-	* Clears specified context of canvas element
-	* @param {CanvasRenderingContext2D} ctx Context to clear
-	*/
-	clearContext(ctx) {
-		ctx.clearRect(0, 0, this.width, this.height);
-	}
-	/**
-	* Returns context of canvas where objects are drawn
-	* @return {CanvasRenderingContext2D}
-	*/
-	getContext() {
-		return this.elements.lower.ctx;
-	}
-	/**
-	* Clears all contexts (background, main, top) of an instance
-	*/
-	clear() {
-		this.remove(...this.getObjects());
-		this.backgroundImage = void 0;
-		this.overlayImage = void 0;
-		this.backgroundColor = "";
-		this.overlayColor = "";
-		this.clearContext(this.getContext());
-		this.fire("canvas:cleared");
-		this.renderOnAddRemove && this.requestRenderAll();
-	}
-	/**
-	* Renders the canvas
-	*/
-	renderAll() {
-		this.cancelRequestedRender();
-		if (this.destroyed) return;
-		this.renderCanvas(this.getContext(), this._objects);
-	}
-	/**
-	* Function created to be instance bound at initialization
-	* used in requestAnimationFrame rendering
-	* Let the fabricJS call it. If you call it manually you could have more
-	* animationFrame stacking on to of each other
-	* for an imperative rendering, use canvas.renderAll
-	* @private
-	*/
-	renderAndReset() {
-		this.nextRenderHandle = 0;
-		this.renderAll();
-	}
-	/**
-	* Append a renderAll request to next animation frame.
-	* unless one is already in progress, in that case nothing is done
-	* a boolean flag will avoid appending more.
-	*/
-	requestRenderAll() {
-		if (!this.nextRenderHandle && !this.disposed && !this.destroyed) this.nextRenderHandle = requestAnimFrame(() => this.renderAndReset());
-	}
-	/**
-	* Calculate the position of the 4 corner of canvas with current viewportTransform.
-	* helps to determinate when an object is in the current rendering viewport
-	*/
-	calcViewportBoundaries() {
-		const width = this.width, height = this.height, iVpt = invertTransform(this.viewportTransform), a = transformPoint({
-			x: 0,
-			y: 0
-		}, iVpt), b = transformPoint({
-			x: width,
-			y: height
-		}, iVpt), min = a.min(b), max = a.max(b);
-		return this.vptCoords = {
-			tl: min,
-			tr: new Point(max.x, min.y),
-			bl: new Point(min.x, max.y),
-			br: max
-		};
-	}
-	cancelRequestedRender() {
-		if (this.nextRenderHandle) {
-			cancelAnimFrame(this.nextRenderHandle);
-			this.nextRenderHandle = 0;
-		}
-	}
-	drawControls(_ctx) {}
-	/**
-	* Renders background, objects, overlay and controls.
-	* @param {CanvasRenderingContext2D} ctx
-	* @param {Array} objects to render
-	*/
-	renderCanvas(ctx, objects) {
-		if (this.destroyed) return;
-		const v = this.viewportTransform, path = this.clipPath;
-		this.calcViewportBoundaries();
-		this.clearContext(ctx);
-		ctx.imageSmoothingEnabled = this.imageSmoothingEnabled;
-		ctx.patternQuality = this.patternQuality;
-		this.fire("before:render", { ctx });
-		this._renderBackground(ctx);
-		ctx.save();
-		ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
-		this._renderObjects(ctx, objects);
-		ctx.restore();
-		if (!this.controlsAboveOverlay && !this.skipControlsDrawing) this.drawControls(ctx);
-		if (path) {
-			path._set("canvas", this);
-			path.shouldCache();
-			path._transformDone = true;
-			path.renderCache({ forClipping: true });
-			this.drawClipPathOnCanvas(ctx, path);
-		}
-		this._renderOverlay(ctx);
-		if (this.controlsAboveOverlay && !this.skipControlsDrawing) this.drawControls(ctx);
-		this.fire("after:render", { ctx });
-		if (this.__cleanupTask) {
-			this.__cleanupTask();
-			this.__cleanupTask = void 0;
-		}
-	}
-	/**
-	* Paint the cached clipPath on the lowerCanvasEl
-	* @param {CanvasRenderingContext2D} ctx Context to render on
-	*/
-	drawClipPathOnCanvas(ctx, clipPath) {
-		const v = this.viewportTransform;
-		ctx.save();
-		ctx.transform(...v);
-		ctx.globalCompositeOperation = "destination-in";
-		clipPath.transform(ctx);
-		ctx.scale(1 / clipPath.zoomX, 1 / clipPath.zoomY);
-		ctx.drawImage(clipPath._cacheCanvas, -clipPath.cacheTranslationX, -clipPath.cacheTranslationY);
-		ctx.restore();
-	}
-	/**
-	* @private
-	* @param {CanvasRenderingContext2D} ctx Context to render on
-	* @param {Array} objects to render
-	*/
-	_renderObjects(ctx, objects) {
-		for (let i = 0, len = objects.length; i < len; ++i) objects[i] && objects[i].render(ctx);
-	}
-	/**
-	* @private
-	* @param {CanvasRenderingContext2D} ctx Context to render on
-	* @param {string} property 'background' or 'overlay'
-	*/
-	_renderBackgroundOrOverlay(ctx, property) {
-		const fill = this[`${property}Color`], object = this[`${property}Image`], v = this.viewportTransform, needsVpt = this[`${property}Vpt`];
-		if (!fill && !object) return;
-		const isAFiller = isFiller(fill);
-		if (fill) {
-			ctx.save();
-			ctx.beginPath();
-			ctx.moveTo(0, 0);
-			ctx.lineTo(this.width, 0);
-			ctx.lineTo(this.width, this.height);
-			ctx.lineTo(0, this.height);
-			ctx.closePath();
-			ctx.fillStyle = isAFiller ? fill.toLive(ctx) : fill;
-			if (needsVpt) ctx.transform(...v);
-			if (isAFiller) {
-				ctx.transform(1, 0, 0, 1, fill.offsetX || 0, fill.offsetY || 0);
-				const m = fill.gradientTransform || fill.patternTransform;
-				m && ctx.transform(...m);
-			}
-			ctx.fill();
-			ctx.restore();
-		}
-		if (object) {
-			ctx.save();
-			const { skipOffscreen } = this;
-			this.skipOffscreen = needsVpt;
-			if (needsVpt) ctx.transform(...v);
-			object.render(ctx);
-			this.skipOffscreen = skipOffscreen;
-			ctx.restore();
-		}
-	}
-	/**
-	* @private
-	* @param {CanvasRenderingContext2D} ctx Context to render on
-	*/
-	_renderBackground(ctx) {
-		this._renderBackgroundOrOverlay(ctx, "background");
-	}
-	/**
-	* @private
-	* @param {CanvasRenderingContext2D} ctx Context to render on
-	*/
-	_renderOverlay(ctx) {
-		this._renderBackgroundOrOverlay(ctx, "overlay");
-	}
-	/**
-	* Returns coordinates of a center of canvas.
-	* @return {Point}
-	*/
-	getCenterPoint() {
-		return new Point(this.width / 2, this.height / 2);
-	}
-	/**
-	* Centers object horizontally in the canvas
-	*/
-	centerObjectH(object) {
-		return this._centerObject(object, new Point(this.getCenterPoint().x, object.getCenterPoint().y));
-	}
-	/**
-	* Centers object vertically in the canvas
-	* @param {FabricObject} object Object to center vertically
-	*/
-	centerObjectV(object) {
-		return this._centerObject(object, new Point(object.getCenterPoint().x, this.getCenterPoint().y));
-	}
-	/**
-	* Centers object vertically and horizontally in the canvas
-	* @param {FabricObject} object Object to center vertically and horizontally
-	*/
-	centerObject(object) {
-		return this._centerObject(object, this.getCenterPoint());
-	}
-	/**
-	* Centers object vertically and horizontally in the viewport
-	* @param {FabricObject} object Object to center vertically and horizontally
-	*/
-	viewportCenterObject(object) {
-		return this._centerObject(object, this.getVpCenter());
-	}
-	/**
-	* Centers object horizontally in the viewport, object.top is unchanged
-	* @param {FabricObject} object Object to center vertically and horizontally
-	*/
-	viewportCenterObjectH(object) {
-		return this._centerObject(object, new Point(this.getVpCenter().x, object.getCenterPoint().y));
-	}
-	/**
-	* Centers object Vertically in the viewport, object.top is unchanged
-	* @param {FabricObject} object Object to center vertically and horizontally
-	*/
-	viewportCenterObjectV(object) {
-		return this._centerObject(object, new Point(object.getCenterPoint().x, this.getVpCenter().y));
-	}
-	/**
-	* Calculate the point in canvas that correspond to the center of actual viewport.
-	* @return {Point} vpCenter, viewport center
-	*/
-	getVpCenter() {
-		return transformPoint(this.getCenterPoint(), invertTransform(this.viewportTransform));
-	}
-	/**
-	* @private
-	* @param {FabricObject} object Object to center
-	* @param {Point} center Center point
-	*/
-	_centerObject(object, center) {
-		object.setXY(center, CENTER, CENTER);
-		object.setCoords();
-		this.renderOnAddRemove && this.requestRenderAll();
-	}
-	/**
-	* Returns dataless JSON representation of canvas
-	* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
-	* @return {String} json string
-	*/
-	toDatalessJSON(propertiesToInclude) {
-		return this.toDatalessObject(propertiesToInclude);
-	}
-	/**
-	* Returns object representation of canvas
-	* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
-	* @return {Object} object representation of an instance
-	*/
-	toObject(propertiesToInclude) {
-		return this._toObjectMethod("toObject", propertiesToInclude);
-	}
-	/**
-	* Returns Object representation of canvas
-	* this alias is provided because if you call JSON.stringify on an instance,
-	* the toJSON object will be invoked if it exists.
-	* Having a toJSON method means you can do JSON.stringify(myCanvas)
-	* JSON does not support additional properties because toJSON has its own signature
-	* @return {Object} JSON compatible object
-	* @see {@link http://fabric5.fabricjs.com/fabric-intro-part-3#serialization}
-	* @see {@link http://jsfiddle.net/fabricjs/pec86/|jsFiddle demo}
-	* @example <caption>JSON representation of canvas </caption>
-	* const json = canvas.toJSON();
-	* @example <caption>JSON representation of canvas </caption>
-	* const json = JSON.stringify(canvas);
-	*/
-	toJSON() {
-		return this.toObject();
-	}
-	/**
-	* Returns dataless object representation of canvas
-	* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
-	* @return {Object} object representation of an instance
-	*/
-	toDatalessObject(propertiesToInclude) {
-		return this._toObjectMethod("toDatalessObject", propertiesToInclude);
-	}
-	/**
-	* @private
-	*/
-	_toObjectMethod(methodName, propertiesToInclude) {
-		const clipPath = this.clipPath;
-		const clipPathData = clipPath && !clipPath.excludeFromExport ? this._toObject(clipPath, methodName, propertiesToInclude) : null;
-		return {
-			version: VERSION,
-			...pick(this, propertiesToInclude),
-			objects: this._objects.filter((object) => !object.excludeFromExport).map((instance) => this._toObject(instance, methodName, propertiesToInclude)),
-			...this.__serializeBgOverlay(methodName, propertiesToInclude),
-			...clipPathData ? { clipPath: clipPathData } : null
-		};
-	}
-	/**
-	* @private
-	*/
-	_toObject(instance, methodName, propertiesToInclude) {
-		let originalValue;
-		if (!this.includeDefaultValues) {
-			originalValue = instance.includeDefaultValues;
-			instance.includeDefaultValues = false;
-		}
-		const object = instance[methodName](propertiesToInclude);
-		if (!this.includeDefaultValues) instance.includeDefaultValues = !!originalValue;
-		return object;
-	}
-	/**
-	* @private
-	*/
-	__serializeBgOverlay(methodName, propertiesToInclude) {
-		const data = {}, bgImage = this.backgroundImage, overlayImage = this.overlayImage, bgColor = this.backgroundColor, overlayColor = this.overlayColor;
-		if (isFiller(bgColor)) {
-			if (!bgColor.excludeFromExport) data.background = bgColor.toObject(propertiesToInclude);
-		} else if (bgColor) data.background = bgColor;
-		if (isFiller(overlayColor)) {
-			if (!overlayColor.excludeFromExport) data.overlay = overlayColor.toObject(propertiesToInclude);
-		} else if (overlayColor) data.overlay = overlayColor;
-		if (bgImage && !bgImage.excludeFromExport) data.backgroundImage = this._toObject(bgImage, methodName, propertiesToInclude);
-		if (overlayImage && !overlayImage.excludeFromExport) data.overlayImage = this._toObject(overlayImage, methodName, propertiesToInclude);
-		return data;
-	}
-	/**
-	* Returns SVG representation of canvas
-	* @param {Object} [options] Options object for SVG output
-	* @param {Boolean} [options.suppressPreamble=false] If true xml tag is not included
-	* @param {Object} [options.viewBox] SVG viewbox object
-	* @param {Number} [options.viewBox.x] x-coordinate of viewbox
-	* @param {Number} [options.viewBox.y] y-coordinate of viewbox
-	* @param {Number} [options.viewBox.width] Width of viewbox
-	* @param {Number} [options.viewBox.height] Height of viewbox
-	* @param {String} [options.encoding=UTF-8] Encoding of SVG output
-	* @param {String} [options.width] desired width of svg with or without units
-	* @param {String} [options.height] desired height of svg with or without units
-	* @param {Function} [reviver] Method for further parsing of svg elements, called after each fabric object converted into svg representation.
-	* @return {String} SVG string
-	* @see {@link http://fabric5.fabricjs.com/fabric-intro-part-3#serialization}
-	* @see {@link http://jsfiddle.net/fabricjs/jQ3ZZ/|jsFiddle demo}
-	* @example <caption>Normal SVG output</caption>
-	* var svg = canvas.toSVG();
-	* @example <caption>SVG output without preamble (without &lt;?xml ../>)</caption>
-	* var svg = canvas.toSVG({suppressPreamble: true});
-	* @example <caption>SVG output with viewBox attribute</caption>
-	* var svg = canvas.toSVG({
-	*   viewBox: {
-	*     x: 100,
-	*     y: 100,
-	*     width: 200,
-	*     height: 300
-	*   }
-	* });
-	* @example <caption>SVG output with different encoding (default: UTF-8)</caption>
-	* var svg = canvas.toSVG({encoding: 'ISO-8859-1'});
-	* @example <caption>Modify SVG output with reviver function</caption>
-	* var svg = canvas.toSVG(null, function(svg) {
-	*   return svg.replace('stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; ', '');
-	* });
-	*/
-	toSVG(options = {}, reviver) {
-		options.reviver = reviver;
-		const markup = [];
-		this._setSVGPreamble(markup, options);
-		this._setSVGHeader(markup, options);
-		if (this.clipPath) {
-			var _this$clipPath$clipPa;
-			markup.push(`<g clip-path="url(#${escapeXml((_this$clipPath$clipPa = this.clipPath.clipPathId) !== null && _this$clipPath$clipPa !== void 0 ? _this$clipPath$clipPa : "")})" >\n`);
-		}
-		this._setSVGBgOverlayColor(markup, "background");
-		this._setSVGBgOverlayImage(markup, "backgroundImage", reviver);
-		this._setSVGObjects(markup, reviver);
-		if (this.clipPath) markup.push("</g>\n");
-		this._setSVGBgOverlayColor(markup, "overlay");
-		this._setSVGBgOverlayImage(markup, "overlayImage", reviver);
-		markup.push("</svg>");
-		return markup.join("");
-	}
-	/**
-	* @private
-	*/
-	_setSVGPreamble(markup, options) {
-		if (options.suppressPreamble) return;
-		markup.push("<?xml version=\"1.0\" encoding=\"", options.encoding || "UTF-8", "\" standalone=\"no\" ?>\n", "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" ", "\"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n");
-	}
-	/**
-	* @private
-	*/
-	_setSVGHeader(markup, options) {
-		const width = options.width || `${this.width}`, height = options.height || `${this.height}`, NUM_FRACTION_DIGITS = config.NUM_FRACTION_DIGITS, optViewBox = options.viewBox;
-		let viewBox;
-		if (optViewBox) viewBox = `viewBox="${optViewBox.x} ${optViewBox.y} ${optViewBox.width} ${optViewBox.height}" `;
-		else if (this.svgViewportTransformation) {
-			const vpt = this.viewportTransform;
-			viewBox = `viewBox="${toFixed(-vpt[4] / vpt[0], NUM_FRACTION_DIGITS)} ${toFixed(-vpt[5] / vpt[3], NUM_FRACTION_DIGITS)} ${toFixed(this.width / vpt[0], NUM_FRACTION_DIGITS)} ${toFixed(this.height / vpt[3], NUM_FRACTION_DIGITS)}" `;
-		} else viewBox = `viewBox="0 0 ${this.width} ${this.height}" `;
-		markup.push("<svg ", "xmlns=\"http://www.w3.org/2000/svg\" ", "xmlns:xlink=\"http://www.w3.org/1999/xlink\" ", "version=\"1.1\" ", "width=\"", width, "\" ", "height=\"", height, "\" ", viewBox, "xml:space=\"preserve\">\n", "<desc>Created with Fabric.js ", VERSION, "</desc>\n", "<defs>\n", this.createSVGFontFacesMarkup(), this.createSVGRefElementsMarkup(), this.createSVGClipPathMarkup(options), "</defs>\n");
-	}
-	createSVGClipPathMarkup(options) {
-		const clipPath = this.clipPath;
-		if (clipPath) {
-			clipPath.clipPathId = `CLIPPATH_${uid()}`;
-			return `<clipPath id="${clipPath.clipPathId}" >\n${clipPath.toClipPathSVG(options.reviver)}</clipPath>\n`;
-		}
-		return "";
-	}
-	/**
-	* Creates markup containing SVG referenced elements like patterns, gradients etc.
-	* @return {String}
-	*/
-	createSVGRefElementsMarkup() {
-		return ["background", "overlay"].map((prop) => {
-			const fill = this[`${prop}Color`];
-			if (isFiller(fill)) {
-				const shouldTransform = this[`${prop}Vpt`], vpt = this.viewportTransform, object = {
-					isType: () => false,
-					width: this.width / (shouldTransform ? vpt[0] : 1),
-					height: this.height / (shouldTransform ? vpt[3] : 1)
-				};
-				return fill.toSVG(object, { additionalTransform: shouldTransform ? matrixToSVG(vpt) : "" });
-			}
-		}).join("");
-	}
-	/**
-	* Creates markup containing SVG font faces,
-	* font URLs for font faces must be collected by developers
-	* and are not extracted from the DOM by fabricjs
-	* @param {Array} objects Array of fabric objects
-	* @return {String}
-	*/
-	createSVGFontFacesMarkup() {
-		const objects = [], fontList = {}, fontPaths = config.fontPaths;
-		this._objects.forEach(function add(object) {
-			objects.push(object);
-			if (isCollection(object)) object._objects.forEach(add);
-		});
-		objects.forEach((obj) => {
-			if (!isTextObject(obj)) return;
-			const { styles, fontFamily } = obj;
-			if (fontList[fontFamily] || !fontPaths[fontFamily]) return;
-			fontList[fontFamily] = true;
-			if (!styles) return;
-			Object.values(styles).forEach((styleRow) => {
-				Object.values(styleRow).forEach(({ fontFamily = "" }) => {
-					if (!fontList[fontFamily] && fontPaths[fontFamily]) fontList[fontFamily] = true;
-				});
-			});
-		});
-		const fontListMarkup = Object.keys(fontList).map((fontFamily) => `\t\t@font-face {\n\t\t\tfont-family: '${fontFamily}';\n\t\t\tsrc: url('${fontPaths[fontFamily]}');\n\t\t}\n`).join("");
-		if (fontListMarkup) return `\t<style type="text/css"><![CDATA[\n${fontListMarkup}]]></style>\n`;
-		return "";
-	}
-	/**
-	* @private
-	*/
-	_setSVGObjects(markup, reviver) {
-		this.forEachObject((fabricObject) => {
-			if (fabricObject.excludeFromExport) return;
-			this._setSVGObject(markup, fabricObject, reviver);
-		});
-	}
-	/**
-	* This is its own function because the Canvas ( non static ) requires extra code here
-	* @private
-	*/
-	_setSVGObject(markup, instance, reviver) {
-		markup.push(instance.toSVG(reviver));
-	}
-	/**
-	* @private
-	*/
-	_setSVGBgOverlayImage(markup, property, reviver) {
-		const bgOrOverlay = this[property];
-		if (bgOrOverlay && !bgOrOverlay.excludeFromExport && bgOrOverlay.toSVG) markup.push(bgOrOverlay.toSVG(reviver));
-	}
-	/**
-	* @TODO this seems to handle patterns but fail at gradients.
-	* @private
-	*/
-	_setSVGBgOverlayColor(markup, property) {
-		const filler = this[`${property}Color`];
-		if (!filler) return;
-		if (isFiller(filler)) {
-			const repeat = filler.repeat || "", finalWidth = this.width, finalHeight = this.height, additionalTransform = this[`${property}Vpt`] ? matrixToSVG(invertTransform(this.viewportTransform)) : "";
-			markup.push(`<rect transform="${additionalTransform} translate(${finalWidth / 2},${finalHeight / 2})" x="${filler.offsetX - finalWidth / 2}" y="${filler.offsetY - finalHeight / 2}" width="${(repeat === "repeat-y" || repeat === "no-repeat") && isPattern(filler) ? filler.source.width : finalWidth}" height="${(repeat === "repeat-x" || repeat === "no-repeat") && isPattern(filler) ? filler.source.height : finalHeight}" fill="url(#SVGID_${filler.id})"></rect>\n`);
-		} else markup.push("<rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" ", "fill=\"", filler, "\"", "></rect>\n");
-	}
-	/**
-	* Populates canvas with data from the specified JSON.
-	* JSON format must conform to the one of {@link fabric.Canvas#toJSON}
-	*
-	* **IMPORTANT**: It is recommended to abort loading tasks before calling this method to prevent race conditions and unnecessary networking
-	*
-	* @param {String|Object} json JSON string or object
-	* @param {Promise<FabricObject> | Promise<void> | void} [reviver] Method for further parsing of JSON elements, called after each fabric object created with the instance
-	* if creation was successfully or with defined error if not. If a FabricObject is returned in the reviver, and an error occurred, this instance will be used in place of that one witch generated error.
-	* @param {Object} [options] options
-	* @param {AbortSignal} [options.signal] see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
-	* @return {Promise<Canvas | StaticCanvas>} instance
-	* @see {@link http://fabric5.fabricjs.com/fabric-intro-part-3#deserialization}
-	* @see {@link http://jsfiddle.net/fabricjs/fmgXt/|jsFiddle demo}
-	* @example <caption>loadFromJSON</caption>
-	* canvas.loadFromJSON(json).then((canvas) => canvas.requestRenderAll());
-	* @example <caption>loadFromJSON with reviver</caption>
-	* canvas.loadFromJSON(json, function(o, object, error) {
-	*   // `o` = json object
-	*   // `object` = fabric.Object instance or undefined
-	*   // `error` = FabricError or undefined
-	*   // ... do some stuff ...
-	*   if(error){
-	*      return new FabricText('placeholder-object');
-	*   }
-	* }).then((canvas) => {
-	*   ... canvas is restored, add your code.
-	* });
-	*
-	*/
-	loadFromJSON(json, reviver, { signal } = {}) {
-		if (!json) return Promise.reject(new FabricError("`json` is undefined"));
-		const { objects = [], ...serialized } = typeof json === "string" ? JSON.parse(json) : json;
-		const { backgroundImage, background, overlayImage, overlay, clipPath } = serialized;
-		const renderOnAddRemove = this.renderOnAddRemove;
-		this.renderOnAddRemove = false;
-		return Promise.all([enlivenObjects(objects, {
-			reviver,
-			signal
-		}), enlivenObjectEnlivables({
-			backgroundImage,
-			backgroundColor: background,
-			overlayImage,
-			overlayColor: overlay,
-			clipPath
-		}, { signal })]).then(([enlived, enlivedMap]) => {
-			this.clear();
-			this.add(...enlived);
-			this.set(serialized);
-			this.set(enlivedMap);
-			this.renderOnAddRemove = renderOnAddRemove;
-			return this;
-		});
-	}
-	/**
-	* Clones canvas instance
-	* @param {string[]} [properties] Array of properties to include in the cloned canvas and children
-	*/
-	clone(properties) {
-		const data = this.toObject(properties);
-		return this.cloneWithoutData().loadFromJSON(data);
-	}
-	/**
-	* Clones canvas instance without cloning existing data.
-	* This essentially copies canvas dimensions since loadFromJSON does not affect canvas size.
-	*/
-	cloneWithoutData() {
-		const el = createCanvasElementFor(this);
-		return new this.constructor(el);
-	}
-	/**
-	* Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately
-	* @param {Object} [options] Options object
-	* @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png"
-	* @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg.
-	* @param {Number} [options.multiplier=1] Multiplier to scale by, to have consistent
-	* @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14
-	* @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14
-	* @param {Number} [options.width] Cropping width. Introduced in v1.2.14
-	* @param {Number} [options.height] Cropping height. Introduced in v1.2.14
-	* @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 2.0.0
-	* @param {(object: fabric.Object) => boolean} [options.filter] Function to filter objects.
-	* @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format
-	* @see {@link https://jsfiddle.net/xsjua1rd/ demo}
-	* @example <caption>Generate jpeg dataURL with lower quality</caption>
-	* var dataURL = canvas.toDataURL({
-	*   format: 'jpeg',
-	*   quality: 0.8
-	* });
-	* @example <caption>Generate cropped png dataURL (clipping of canvas)</caption>
-	* var dataURL = canvas.toDataURL({
-	*   format: 'png',
-	*   left: 100,
-	*   top: 100,
-	*   width: 200,
-	*   height: 200
-	* });
-	* @example <caption>Generate double scaled png dataURL</caption>
-	* var dataURL = canvas.toDataURL({
-	*   format: 'png',
-	*   multiplier: 2
-	* });
-	* @example <caption>Generate dataURL with objects that overlap a specified object</caption>
-	* var myObject;
-	* var dataURL = canvas.toDataURL({
-	*   filter: (object) => object.isContainedWithinObject(myObject) || object.intersectsWithObject(myObject)
-	* });
-	*/
-	toDataURL(options = {}) {
-		const { format = "png", quality = 1, multiplier = 1, enableRetinaScaling = false } = options;
-		const finalMultiplier = multiplier * (enableRetinaScaling ? this.getRetinaScaling() : 1);
-		return toDataURL(this.toCanvasElement(finalMultiplier, options), format, quality);
-	}
-	toBlob(options = {}) {
-		const { format = "png", quality = 1, multiplier = 1, enableRetinaScaling = false } = options;
-		const finalMultiplier = multiplier * (enableRetinaScaling ? this.getRetinaScaling() : 1);
-		return toBlob(this.toCanvasElement(finalMultiplier, options), format, quality);
-	}
-	/**
-	* Create a new HTMLCanvas element painted with the current canvas content.
-	* No need to resize the actual one or repaint it.
-	* Will transfer object ownership to a new canvas, paint it, and set everything back.
-	* This is an intermediary step used to get to a dataUrl but also it is useful to
-	* create quick image copies of a canvas without passing for the dataUrl string
-	* @param {Number} [multiplier] a zoom factor.
-	* @param {Object} [options] Cropping informations
-	* @param {Number} [options.left] Cropping left offset.
-	* @param {Number} [options.top] Cropping top offset.
-	* @param {Number} [options.width] Cropping width.
-	* @param {Number} [options.height] Cropping height.
-	* @param {(object: fabric.Object) => boolean} [options.filter] Function to filter objects.
-	*/
-	toCanvasElement(multiplier = 1, { width, height, left, top, filter } = {}) {
-		const scaledWidth = (width || this.width) * multiplier, scaledHeight = (height || this.height) * multiplier, zoom = this.getZoom(), originalWidth = this.width, originalHeight = this.height, originalSkipControlsDrawing = this.skipControlsDrawing, newZoom = zoom * multiplier, vp = this.viewportTransform, newVp = [
-			newZoom,
-			0,
-			0,
-			newZoom,
-			(vp[4] - (left || 0)) * multiplier,
-			(vp[5] - (top || 0)) * multiplier
-		], originalRetina = this.enableRetinaScaling, canvasEl = createCanvasElementFor({
-			width: scaledWidth,
-			height: scaledHeight
-		}), objectsToRender = filter ? this._objects.filter((obj) => filter(obj)) : this._objects;
-		this.enableRetinaScaling = false;
-		this.viewportTransform = newVp;
-		this.width = scaledWidth;
-		this.height = scaledHeight;
-		this.skipControlsDrawing = true;
-		this.calcViewportBoundaries();
-		this.renderCanvas(canvasEl.getContext("2d"), objectsToRender);
-		this.viewportTransform = vp;
-		this.width = originalWidth;
-		this.height = originalHeight;
-		this.calcViewportBoundaries();
-		this.enableRetinaScaling = originalRetina;
-		this.skipControlsDrawing = originalSkipControlsDrawing;
-		return canvasEl;
-	}
-	/**
-	* Waits until rendering has settled to destroy the canvas
-	* @returns {Promise<boolean>} a promise resolving to `true` once the canvas has been destroyed or to `false` if the canvas has was already destroyed
-	* @throws if aborted by a consequent call
-	*/
-	dispose() {
-		!this.disposed && this.elements.cleanupDOM({
-			width: this.width,
-			height: this.height
-		});
-		runningAnimations.cancelByCanvas(this);
-		this.disposed = true;
-		return new Promise((resolve, reject) => {
-			const task = () => {
-				this.destroy();
-				resolve(true);
-			};
-			task.kill = reject;
-			if (this.__cleanupTask) this.__cleanupTask.kill("aborted");
-			if (this.destroyed) resolve(false);
-			else if (this.nextRenderHandle) this.__cleanupTask = task;
-			else task();
-		});
-	}
-	/**
-	* Clears the canvas element, disposes objects and frees resources.
-	*
-	* Invoked as part of the **async** operation of {@link dispose}.
-	*
-	* **CAUTION**:
-	*
-	* This method is **UNSAFE**.
-	* You may encounter a race condition using it if there's a requested render.
-	* Call this method only if you are sure rendering has settled.
-	* Consider using {@link dispose} as it is **SAFE**
-	*
-	* @private
-	*/
-	destroy() {
-		this.destroyed = true;
-		this.cancelRequestedRender();
-		this.forEachObject((object) => object.dispose());
-		this._objects = [];
-		if (this.backgroundImage) this.backgroundImage.dispose();
-		this.backgroundImage = void 0;
-		if (this.overlayImage) this.overlayImage.dispose();
-		this.overlayImage = void 0;
-		this.elements.dispose();
-	}
-	/**
-	* Returns a string representation of an instance
-	* @return {String} string representation of an instance
-	*/
-	toString() {
-		return `#<Canvas (${this.complexity()}): { objects: ${this._objects.length} }>`;
-	}
-};
-_defineProperty(StaticCanvas, "ownDefaults", staticCanvasDefaults);
-//#endregion
-export { StaticCanvas };
-
-//# sourceMappingURL=StaticCanvas.mjs.map