@anu3ev/fabric-image-editor 0.8.9 → 0.8.11

package/dist/main.js

@@ -3322,7 +3322,7 @@ var Nt = class {
 				});
 				let r = new e(t, { canvas: a });
 				a.setActiveObject(r);
-			} else this._fitSingleObject(s, n);
+			} else this._fitSingleObject(s, n), s instanceof e && i && this._materializeFittedSelection({ selection: s });
 			a.renderAll(), r || o.saveState(), a.fire("editor:object-fitted", {
 				object: s,
 				type: n,
@@ -3336,7 +3336,26 @@ var Nt = class {
 		v = t === "contain" ? Math.min(g / m, _ / h) : Math.max(g / m, _ / h), e.set({
 			scaleX: o * v,
 			scaleY: s * v
-		}), n.centerObjectToMontageArea({ object: e });
+		}), n.centerObjectToMontageArea({ object: e }), this._materializeFittedObject({ object: e }) || e.setCoords?.();
+	}
+	_materializeFittedObject({ 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);
+		return i || a;
+	}
+	_requiresFittedObjectMaterialization({ object: e }) {
+		let t = e.type === "textbox" || e.type === "background-textbox", n = "shapeComposite" in e && e.shapeComposite === !0;
+		return t || n;
+	}
+	_materializeFittedSelection({ selection: t }) {
+		let { canvas: n } = this.editor, r = t.getObjects();
+		if (!r.some((e) => this._requiresFittedObjectMaterialization({ object: e }))) return;
+		n.discardActiveObject(), r.forEach((e) => {
+			this._materializeFittedObject({ object: e }) || e.setCoords?.();
+		});
+		let i = new e(r, { canvas: n });
+		n.setActiveObject(i);
 	}
 	resetObjects() {
 		this.editor.canvasManager.getObjects().forEach((e) => {
@@ -10394,16 +10413,16 @@ var ea = class {
 			bounds: m,
 			baseWidth: g,
 			baseHeight: _
-		})), y = {
+		})), y = typeof r.previewId == "string" ? r.previewId : void 0, b = {
 			...r,
 			baseWidth: g,
 			baseHeight: _,
 			positionsNormalized: !0,
-			previewId: n ?? r.previewId
+			previewId: n ?? y
 		};
 		return {
 			id: e ?? `template-${O()}`,
-			meta: y,
+			meta: b,
 			objects: v
 		};
 	}
@@ -10494,17 +10513,20 @@ var ea = class {
 		if (!e) return null;
 		try {
 			e.setCoords();
-			let t = e.getBoundingRect(!1, !0);
+			let n = t._getBoundingRect(e);
 			return {
-				left: t.left,
-				top: t.top,
-				width: t.width,
-				height: t.height
+				left: n.left,
+				top: n.top,
+				width: n.width,
+				height: n.height
 			};
 		} catch {
 			return null;
 		}
 	}
+	static _getBoundingRect(e) {
+		return e.getBoundingRect(!1, !0);
+	}
 	static async _enlivenObjects(e) {
 		return (await Promise.all(e.map(async (e) => {
 			if (t._hasSerializedSvgMarkup(e)) {
@@ -10589,20 +10611,20 @@ var ea = class {
 		return e.format === "svg";
 	}
 	static _extractSvgMarkup(e) {
-		let t = e.toSVG;
-		if (typeof t != "function") return null;
+		let n = e.toSVG;
+		if (typeof n != "function") return null;
 		try {
-			let n = t.call(e);
-			if (!n) return null;
-			if (/<svg[\s>]/i.test(n)) return n;
-			let { width: r, height: i } = e.getBoundingRect(!1, !0), a = r || e.width || 0, o = i || e.height || 0;
+			let r = n.call(e);
+			if (!r) return null;
+			if (/<svg[\s>]/i.test(r)) return r;
+			let { width: i, height: a } = t._getBoundingRect(e), o = i || e.width || 0, s = a || e.height || 0;
 			return `
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          width="${a}"
-          height="${o}"
-          viewBox="0 0 ${a} ${o}">
-            ${n}
+          width="${o}"
+          height="${s}"
+          viewBox="0 0 ${o} ${s}">
+            ${r}
         </svg>
       `;
 		} catch {
@@ -10645,7 +10667,7 @@ var ea = class {
 				originX: _,
 				originY: v
 			}
-		}), delete s[ia], delete s[aa];
+		}), delete s._templateAnchorX, delete s._templateAnchorY;
 	}
 	static _getPositioningBounds({ bounds: e, baseWidth: n, baseHeight: r, scale: i, useRelativePositions: a, anchorX: o, anchorY: s }) {
 		if (!a) return e;
@@ -10698,26 +10720,23 @@ var ea = class {
 		let r = typeof e.text == "string" ? e.text : "";
 		if (!r) return;
 		let i = It({
-			value: this.editor?.montageArea?.width,
-			fallback: 0
-		}), { width: a = 0 } = e, o = It({
 			value: n,
 			fallback: 0
-		}), s = It({
-			value: a,
+		}), a = It({
+			value: e.width,
 			fallback: 0
 		});
-		if (!i || !s || !o) return;
+		if (!i || !a) return;
 		e.setCoords();
-		let c = e, l = t._resolveAnchor(c, ia), u = typeof c.left == "number" ? c.left : null, d = e.originX ?? "center", f = e.originY ?? "center", p = e.getPointByOrigin(d, f), m = e.getBoundingRect(!1, !0), h = m.left + m.width;
+		let o = e, s = t._resolveAnchor(o, ia), c = typeof e.left == "number" ? e.left : null, l = e.originX ?? "center", u = e.originY ?? "center", d = e.getPointByOrigin(l, u), f = t._getBoundingRect(e), p = f.left + f.width / 2, m = f.left + f.width;
 		e.set("width", i), e.initDimensions();
-		let g = t._getLongestLineWidth({
+		let h = t._getLongestLineWidth({
 			textbox: e,
 			text: r
-		}), _ = g > s ? g + 1 : s;
-		if (e.set("width", _), e.initDimensions(), e.setPositionByOrigin(p, d, f), e.setCoords(), u === null) return;
-		let y = e.getBoundingRect(!1, !0), b = y.left + y.width, x = u;
-		l === "start" ? x += (m.left - y.left) / o : l === "end" && (x += (h - b) / o), c.left = x;
+		}), g = h > a ? h + 1 : a;
+		if (e.set("width", g), e.initDimensions(), e.setPositionByOrigin(d, l, u), e.setCoords(), c === null) return;
+		let _ = t._getBoundingRect(e), y = _.left + _.width / 2, b = _.left + _.width, x = c;
+		s === "start" ? x += (f.left - _.left) / i : s === "center" ? x += (p - y) / i : s === "end" && (x += (m - b) / i), e.left = x;
 	}
 	static _getLongestLineWidth({ textbox: e, text: t }) {
 		let { textLines: n } = e, r = Array.isArray(n) && n.length > 0 ? n.length : Math.max(t.split("\n").length, 1), i = 0;
@@ -10734,7 +10753,7 @@ var ea = class {
 			n && (a.svgMarkup = n, delete a.objects, delete a.path);
 		}
 		if (!n) return a;
-		let { left: o, top: s, width: c, height: l } = n, u = e.getBoundingRect(!1, !0), d = r || c || 1, f = i || l || 1, p = this.editor.canvasManager.getObjectPlacement({ object: e }), m = {
+		let { left: o, top: s, width: c, height: l } = n, u = t._getBoundingRect(e), d = r || c || 1, f = i || l || 1, p = this.editor.canvasManager.getObjectPlacement({ object: e }), m = {
 			x: (p.left - o) / d,
 			y: (p.top - s) / f
 		}, h = (u.left - o) / d, g = (u.top - s) / f, _ = h + u.width / d, v = g + u.height / f;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anu3ev/fabric-image-editor",
-  "version": "0.8.9",
+  "version": "0.8.11",
   "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": [