@anu3ev/fabric-image-editor 0.8.21 → 0.8.23

package/dist/main.js

@@ -9802,6 +9802,12 @@ var pa = {
 		}
 		return n instanceof l ? [n] : null;
 	}
+	_materializeUngroupedObject({ object: e }) {
+		let { shapeManager: t, textManager: n } = this.editor, r = { target: e };
+		e.shapeComposite === !0 && (r.textScale = Math.abs(e.scaleX ?? 1) || 1);
+		let i = n.commitStandaloneTextScale({ target: e }), a = t.commitRehydratedShapeLayout(r);
+		!i && !a && e.setCoords();
+	}
 	group({ target: e, withoutSave: t = !1 } = {}) {
 		let { canvas: n, historyManager: r } = this.editor, i = this._getObjectsToGroup(e);
 		if (!i) return null;
@@ -9827,7 +9833,7 @@ var pa = {
 			a.forEach((e) => {
 				let n = e.removeAll();
 				r.remove(e), n.forEach((e) => {
-					r.add(e), t.push(e);
+					this._materializeUngroupedObject({ object: e }), r.add(e), t.push(e);
 				});
 			});
 			let o = new e(t, { canvas: r });
@@ -10041,11 +10047,11 @@ var pa = {
 		this.editor = e;
 	}
 	static _isUngroupableGroup(e) {
-		return e.type === "group" && e.format !== "svg";
+		return e instanceof l && e.format !== "svg";
 	}
 	_handleGroupDeletion(e) {
 		let { groupingManager: t } = this.editor, { ungroupedObjects: n = [] } = t.ungroup({
-			object: e,
+			target: e,
 			withoutSave: !0
 		}) ?? {};
 		return this.deleteSelectedObjects({
@@ -11582,7 +11588,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",
@@ -11653,63 +11664,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.21",
+  "version": "0.8.23",
   "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": [