@anu3ev/fabric-image-editor 0.8.22 → 0.8.24

package/dist/main.js

@@ -10785,11 +10785,14 @@ var pa = {
 		});
 	}
 	_applyPostStyleLayout({ textbox: e, placement: t, style: n, styleMaps: r, contentUpdate: i, contentPlacement: a, syncLineStylesWithText: o }) {
-		let s = e.text ?? "", c = this._hasBackgroundStyleUpdate({ style: n }), l = this._resolveShouldAutoExpand({
+		let s = e.text ?? "", c = this._hasBackgroundStyleUpdate({ style: n }), l = this._shouldRefreshDimensions({
+			contentUpdate: i,
+			styleMaps: r
+		}), u = this._resolveShouldAutoExpand({
 			textbox: e,
 			style: n,
 			styleMaps: r,
-			contentUpdate: i
+			shouldRefreshDimensions: l
 		});
 		c && (e.dirty = !0), this._applyAutoExpandPreference({
 			textbox: e,
@@ -10802,7 +10805,8 @@ var pa = {
 		}), this.runtime.normalizeTextboxAfterContentChange({
 			textbox: e,
 			placement: t,
-			shouldAutoExpand: l
+			shouldAutoExpand: u,
+			shouldRefreshDimensions: l
 		}), a && this.runtime.restoreTextboxContentPlacement({
 			textbox: e,
 			contentPlacement: a
@@ -10822,14 +10826,16 @@ var pa = {
 			e.radiusBottomLeft
 		].some((e) => e !== void 0);
 	}
-	_resolveShouldAutoExpand({ textbox: e, style: t, styleMaps: n, contentUpdate: r }) {
-		let i = t.autoExpand ?? e.autoExpand, a = aa({ stylesList: [
-			n.updates,
-			n.selectionStyles,
-			n.lineSelectionStyles,
-			n.wholeTextStyles
+	_resolveShouldAutoExpand({ textbox: e, style: t, styleMaps: n, shouldRefreshDimensions: r }) {
+		return (t.autoExpand ?? e.autoExpand) !== !1 && !Object.prototype.hasOwnProperty.call(n.updates, "width") && r;
+	}
+	_shouldRefreshDimensions({ contentUpdate: e, styleMaps: t }) {
+		return e.hasTextUpdate || e.uppercaseChanged || aa({ stylesList: [
+			t.updates,
+			t.selectionStyles,
+			t.lineSelectionStyles,
+			t.wholeTextStyles
 		] });
-		return i !== !1 && !Object.prototype.hasOwnProperty.call(n.updates, "width") && (r.hasTextUpdate || r.uppercaseChanged || a);
 	}
 	_applyAutoExpandPreference({ textbox: e, autoExpand: t }) {
 		if (t !== void 0) {
@@ -11176,11 +11182,12 @@ var Wa = class {
 				this._syncLineStylesWithText({ textbox: n });
 				return;
 			}
-			this._normalizeTextboxAfterContentChange({
+			this._syncLineStylesWithText({ textbox: n }), this._normalizeTextboxAfterContentChange({
 				textbox: n,
 				placement: u,
-				shouldAutoExpand: c
-			}), this._syncLineStylesWithText({ textbox: n });
+				shouldAutoExpand: c,
+				shouldRefreshDimensions: !0
+			});
 		}, this._handleTextEditingExited = (t) => {
 			let { target: n } = t;
 			if (!e._isTextbox(n)) return;
@@ -11371,19 +11378,23 @@ var Wa = class {
 		let n = t.split("\n").length, { textLines: r } = e;
 		return Array.isArray(r) && r.length > n;
 	}
-	_normalizeTextboxAfterContentChange({ textbox: e, placement: t, shouldAutoExpand: n, clampToMontage: r = !0 }) {
-		let i = !1;
-		n && (i = this._autoExpandTextboxWidth(e, {
+	_normalizeTextboxAfterContentChange({ textbox: e, placement: t, shouldAutoExpand: n, clampToMontage: r = !0, shouldRefreshDimensions: i = !1 }) {
+		let a = !1;
+		n && (a = this._autoExpandTextboxWidth(e, {
 			placement: t ?? void 0,
 			clampToMontage: r
 		}));
-		let a = !1;
-		i || (a = oa({ textbox: e }));
-		let o = !1;
-		return !i && t && (this.editor.canvasManager.applyObjectPlacement({
+		let o = !1, s = !1;
+		if (!a && i) {
+			let t = e.width ?? 0, n = e.height ?? 0;
+			e.initDimensions(), o = Math.abs((e.width ?? 0) - t) > .01 || Math.abs((e.height ?? 0) - n) > .01;
+		}
+		a || (s = oa({ textbox: e }));
+		let c = !1;
+		return !a && t && (this.editor.canvasManager.applyObjectPlacement({
 			object: e,
 			placement: t
-		}), o = !0), (i || a) && (e.dirty = !0), (i || a || o) && e.setCoords(), i || a;
+		}), c = !0), (a || o || s) && (e.dirty = !0), (a || o || s || c) && e.setCoords(), a || o || s;
 	}
 	_restoreTextboxContentPlacement({ textbox: e, contentPlacement: t }) {
 		let n = na({
@@ -11588,7 +11599,12 @@ var Wa = class {
 		}), g = !!m.positionsNormalized, _ = !1, v = !1;
 		i.suspendHistory();
 		try {
-			let r = await t._enlivenObjects(l);
+			let r = await t._enlivenObjects({
+				objects: l,
+				baseWidth: m.baseWidth,
+				baseHeight: m.baseHeight,
+				useRelativePositions: g
+			});
 			if (!r.length) return a.emitWarning({
 				origin: "TemplateManager",
 				method: "applyTemplate",
@@ -11659,63 +11675,184 @@ var Wa = class {
 	static _getBoundingRect(e) {
 		return e.getBoundingRect(!1, !0);
 	}
-	static async _enlivenObjects(e) {
+	static async _enlivenObjects({ objects: e, baseWidth: n, baseHeight: r, useRelativePositions: i }) {
 		return (await Promise.all(e.map(async (e) => {
 			if (t._hasSerializedSvgMarkup(e)) {
-				let n = await t._reviveSvgObject(e);
-				if (n) return t._restoreImageScale({
-					revived: n,
-					serialized: e
-				}), n;
-			}
-			let n = (await w.enlivenObjects([e]))?.[0];
-			return n ? (t._restoreImageScale({
-				revived: n,
-				serialized: e
-			}), n) : null;
+				let a = await t._reviveSvgObject(e);
+				if (a) return t._restoreImageScale({
+					revived: a,
+					serialized: e,
+					baseWidth: n,
+					baseHeight: r,
+					useRelativePositions: i
+				}), a;
+			}
+			let a = (await w.enlivenObjects([e]))?.[0];
+			return a ? (t._restoreImageScale({
+				revived: a,
+				serialized: e,
+				baseWidth: n,
+				baseHeight: r,
+				useRelativePositions: i
+			}), a) : null;
 		}))).filter((e) => !!e);
 	}
-	static _restoreImageScale({ revived: e, serialized: n }) {
+	static _restoreImageScale({ revived: e, serialized: n, baseWidth: r, baseHeight: i, useRelativePositions: a }) {
 		if ((typeof e.type == "string" ? e.type.toLowerCase() : "") !== "image") return;
-		let { width: r, height: i, scaleX: a, scaleY: o, customData: s } = n, c = e, l = "getElement" in c && typeof c.getElement == "function" ? c.getElement() : null, { naturalWidth: u = 0, naturalHeight: d = 0, width: f = 0, height: p = 0 } = l instanceof HTMLImageElement ? l : {
+		let o = e, s = t._createImageRestorePlan({
+			image: o,
+			serialized: n
+		});
+		if (!s.hasIntrinsicSize) {
+			o.set(s.nextProps);
+			return;
+		}
+		let c = t._resolveImageTemplateCenter({
+			image: o,
+			serialized: n,
+			plan: s,
+			baseWidth: r,
+			baseHeight: i,
+			useRelativePositions: a
+		});
+		o.set(s.nextProps), t._restoreImageTemplateCenter({
+			image: o,
+			center: c,
+			baseWidth: r,
+			baseHeight: i,
+			useRelativePositions: a
+		});
+	}
+	static _createImageRestorePlan({ image: e, serialized: n }) {
+		let { width: r, height: i } = t._getImageIntrinsicSize({ image: e }), { width: a, height: o, scaleX: s, scaleY: c, customData: l } = n, u = W({
+			value: a,
+			fallback: r
+		}), d = W({
+			value: o,
+			fallback: i
+		}), f = W({
+			value: s,
+			fallback: e.scaleX || 1
+		}), p = W({
+			value: c,
+			fallback: e.scaleY || 1
+		}), m = t._resolveImageFit({ customData: l });
+		return {
+			nextProps: t._resolveImageRestoreProps({
+				imageFit: m,
+				intrinsicWidth: r,
+				intrinsicHeight: i,
+				targetWidth: u,
+				targetHeight: d,
+				baseScaleX: f,
+				baseScaleY: p
+			}),
+			targetWidth: u,
+			targetHeight: d,
+			baseScaleX: f,
+			baseScaleY: p,
+			hasIntrinsicSize: r > 0 && i > 0
+		};
+	}
+	static _getImageIntrinsicSize({ image: e }) {
+		let t = "getElement" in e && typeof e.getElement == "function" ? e.getElement() : null, { naturalWidth: n = 0, naturalHeight: r = 0, width: i = 0, height: a = 0 } = t instanceof HTMLImageElement ? t : {
 			naturalWidth: 0,
 			naturalHeight: 0,
 			width: 0,
 			height: 0
-		}, m = W({
-			value: u || f || c.width,
-			fallback: 0
-		}), h = W({
-			value: d || p || c.height,
-			fallback: 0
-		}), g = W({
-			value: r,
-			fallback: m
-		}), _ = W({
-			value: i,
-			fallback: h
-		}), v = W({
-			value: a,
-			fallback: c.scaleX || 1
-		}), y = W({
-			value: o,
-			fallback: c.scaleY || 1
-		}), b = g * v, x = _ * y, S = m > 0, C = h > 0, w = b > 0, T = x > 0, E = t._resolveImageFit({ customData: s }), D = {};
-		if (S && (D.width = m), C && (D.height = h), !S || !C) {
-			c.set(D);
-			return;
-		}
-		if (E === "stretch") {
-			let e = w ? b / m : null, t = T ? x / h : null;
-			e && e > 0 && (D.scaleX = e), t && t > 0 && (D.scaleY = t), c.set(D);
-			return;
-		}
-		if (!w || !T) {
-			c.set(D);
-			return;
-		}
-		let O = Math.min(b / m, x / h);
-		Number.isFinite(O) && O > 0 && (D.scaleX = O, D.scaleY = O), c.set(D);
+		};
+		return {
+			width: W({
+				value: n || i || e.width,
+				fallback: 0
+			}),
+			height: W({
+				value: r || a || e.height,
+				fallback: 0
+			})
+		};
+	}
+	static _resolveImageRestoreProps({ imageFit: e, intrinsicWidth: n, intrinsicHeight: r, targetWidth: i, targetHeight: a, baseScaleX: o, baseScaleY: s }) {
+		let c = i * o, l = a * s, u = n > 0, d = r > 0, f = {};
+		return u && (f.width = n), d && (f.height = r), !u || !d ? f : e === "stretch" ? (t._applyStretchedImageScale({
+			nextProps: f,
+			intrinsicWidth: n,
+			intrinsicHeight: r,
+			targetDisplayWidth: c,
+			targetDisplayHeight: l
+		}), f) : (t._applyContainedImageScale({
+			nextProps: f,
+			intrinsicWidth: n,
+			intrinsicHeight: r,
+			targetDisplayWidth: c,
+			targetDisplayHeight: l
+		}), f);
+	}
+	static _applyStretchedImageScale({ nextProps: e, intrinsicWidth: t, intrinsicHeight: n, targetDisplayWidth: r, targetDisplayHeight: i }) {
+		let a = r > 0 ? r / t : null, o = i > 0 ? i / n : null;
+		a && a > 0 && (e.scaleX = a), o && o > 0 && (e.scaleY = o);
+	}
+	static _applyContainedImageScale({ nextProps: e, intrinsicWidth: t, intrinsicHeight: n, targetDisplayWidth: r, targetDisplayHeight: i }) {
+		if (r <= 0 || i <= 0) return;
+		let a = Math.min(r / t, i / n);
+		Number.isFinite(a) && a > 0 && (e.scaleX = a, e.scaleY = a);
+	}
+	static _resolveImageTemplateCenter({ image: e, serialized: n, plan: r, baseWidth: i, baseHeight: a, useRelativePositions: o }) {
+		let s = {
+			left: e.left,
+			top: e.top,
+			width: e.width,
+			height: e.height,
+			scaleX: e.scaleX,
+			scaleY: e.scaleY
+		}, c = t._resolveTemplatePlacement({
+			image: e,
+			serialized: n,
+			baseWidth: i,
+			baseHeight: a,
+			useRelativePositions: o
+		});
+		e.set({
+			left: c.x,
+			top: c.y,
+			width: r.targetWidth,
+			height: r.targetHeight,
+			scaleX: r.baseScaleX,
+			scaleY: r.baseScaleY
+		});
+		let l = e.getPointByOrigin("center", "center");
+		return e.set(s), {
+			x: l.x,
+			y: l.y
+		};
+	}
+	static _resolveTemplatePlacement({ image: e, serialized: t, baseWidth: n, baseHeight: r, useRelativePositions: i }) {
+		let a = W({
+			value: t.left,
+			fallback: e.left || 0
+		}), o = W({
+			value: t.top,
+			fallback: e.top || 0
+		});
+		return i ? {
+			x: a * (n || 1),
+			y: o * (r || 1)
+		} : {
+			x: a,
+			y: o
+		};
+	}
+	static _restoreImageTemplateCenter({ image: e, center: t, baseWidth: n, baseHeight: r, useRelativePositions: i }) {
+		e.setPositionByOrigin(new m(t.x, t.y), "center", "center"), i && e.set({
+			left: W({
+				value: e.left,
+				fallback: 0
+			}) / (n || 1),
+			top: W({
+				value: e.top,
+				fallback: 0
+			}) / (r || 1)
+		});
 	}
 	static _resolveImageFit({ customData: e }) {
 		if (!e || typeof e != "object") return "contain";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anu3ev/fabric-image-editor",
-  "version": "0.8.22",
+  "version": "0.8.24",
   "description": "TypeScript image editor library built on FabricJS, allowing you to create instances with an integrated montage area and providing an API to modify and manage state.",
   "module": "dist/main.js",
   "files": [