@anu3ev/fabric-image-editor 0.7.16 → 0.7.17

package/dist/main.js

@@ -1493,7 +1493,7 @@ var z = {
 			bottom: .28
 		}
 	}
-], se = "circle", G = "center", ce = "middle", le = {};
+], G = "circle", se = "center", ce = "middle", le = {};
 for (let e = 0; e < oe.length; e += 1) {
 	let t = oe[e];
 	le[t.key] = t;
@@ -1737,7 +1737,7 @@ var Be = class e extends l {
 		this.set({
 			objectCaching: !1,
 			shapeComposite: !0
-		}), this.shapeTextAutoExpand === void 0 && (this.shapeTextAutoExpand = !0), this.shapeAlignHorizontal === void 0 && (this.shapeAlignHorizontal = G), this.shapeAlignVertical === void 0 && (this.shapeAlignVertical = ce);
+		}), this.shapeTextAutoExpand === void 0 && (this.shapeTextAutoExpand = !0), this.shapeAlignHorizontal === void 0 && (this.shapeAlignHorizontal = se), this.shapeAlignVertical === void 0 && (this.shapeAlignVertical = ce);
 		let e = xe({ padding: {
 			top: this.shapePaddingTop,
 			right: this.shapePaddingRight,
@@ -6142,108 +6142,132 @@ var pr = ({ group: e, shape: t, text: n, layout: r, alignH: i, scaleX: a, scaleY
 			this.lifecycleController.finishTextUpdate({ textNode: n });
 		}, this.editor = e, Ve(), this.scalingController = new hr({ canvas: e.canvas }), this.editingController = new gr({ canvas: e.canvas }), this.editingPlacements = /* @__PURE__ */ new WeakMap(), this.lifecycleController = new _r({ canvas: e.canvas }), this.internalTextUpdates = /* @__PURE__ */ new WeakSet(), this._bindEvents();
 	}
-	async add({ presetKey: e = se, options: t = {} } = {}) {
+	async add({ presetKey: e = G, options: t = {} } = {}) {
 		let n = de({ presetKey: e });
 		if (!n) return null;
-		let { width: r, height: i, shapeTextAutoExpand: a, left: o, top: s, originX: c, originY: l, text: u, textStyle: d, alignH: f, alignV: p, textPadding: m, rounding: h, withoutAdding: g, withoutSelection: _, withoutSave: v, id: y } = t, b = de({ presetKey: fe({
-			preset: n,
-			rounding: h
-		}) }) ?? n, x = Math.max(1, r ?? b.width), S = Math.max(1, i ?? b.height), C = a !== !1, w = this._resolveHorizontalAlign({
-			explicitAlign: f,
-			textStyle: d
-		}), T = p ?? "middle", E = this._resolveShapeStyle({
-			options: t,
-			fallback: null
-		}), O = xe({ padding: m }), k = ({ width: e, height: t }) => Te({
-			baseInset: me({
-				preset: b,
-				width: e,
-				height: t
-			}),
-			stroke: E.stroke,
-			strokeWidth: E.strokeWidth
-		}), A = Te({
-			baseInset: me({
-				preset: b,
-				width: x,
-				height: S
-			}),
-			stroke: E.stroke,
-			strokeWidth: E.strokeWidth
-		}), j = we({
-			base: A,
-			addition: O
-		}), M = Ee({ padding: m }), N = this._createTextNode({
-			text: u,
-			textStyle: d,
-			width: x,
-			align: w,
-			opacity: E.opacity
-		}), P = this._resolveShapeLayoutWidth({
-			text: N,
-			currentWidth: x,
-			manualWidth: x,
-			shapeTextAutoExpandEnabled: C,
-			padding: j,
-			resolvePaddingForWidth: ({ width: e }) => we({
-				base: k({
-					width: e,
-					height: S
-				}),
-				addition: O
-			})
-		}), F = await un({
-			preset: b,
-			width: P,
-			height: S,
-			style: E,
-			rounding: h
-		}), I = this._createShapeGroup({
-			id: y ?? `shape-${D()}`,
-			presetKey: b.key,
-			presetCanRound: ge({ preset: b }),
-			shape: F,
-			text: N,
-			width: P,
-			height: S,
-			manualWidth: x,
-			manualHeight: S,
-			shapeTextAutoExpand: C,
-			alignH: w,
-			alignV: T,
-			padding: O,
-			internalShapeTextInset: A,
-			changedPadding: M,
-			style: E,
-			rounding: h
-		}), L = {
-			shape: I,
-			presetKey: b.key,
+		let { left: r, top: i, originX: a, originY: o, withoutAdding: s, withoutSelection: c, withoutSave: l } = t, u = await this._createShapeGroupForAdd({
+			basePreset: n,
+			options: t
+		}), d = {
+			shape: u,
+			presetKey: u.shapePresetKey ?? n.key,
 			options: t
 		};
-		if (o === void 0 && s === void 0) this.editor.canvasManager.centerObjectToMontageArea({ object: I });
+		if (r === void 0 && i === void 0) this.editor.canvasManager.centerObjectToMontageArea({ object: u });
 		else {
 			let e = this.editor.canvasManager.resolveObjectPlacement({
-				object: I,
-				left: o,
-				top: s,
-				originX: c,
-				originY: l,
+				object: u,
+				left: r,
+				top: i,
+				originX: a,
+				originY: o,
 				fallbackPoint: this.editor.canvasManager.getMontageAreaSceneCenter()
 			});
 			this.editor.canvasManager.applyObjectPlacement({
-				object: I,
+				object: u,
 				placement: e
 			});
 		}
-		if (g) return this.editor.canvas.fire("editor:shape-added", L), I;
+		if (s) return this.editor.canvas.fire("editor:shape-added", d), u;
 		this._beginMutation();
 		try {
-			this.editor.canvas.add(I), _ || this.editor.canvas.setActiveObject(I), this.editor.canvas.requestRenderAll();
+			this.editor.canvas.add(u), c || this.editor.canvas.setActiveObject(u), this.editor.canvas.requestRenderAll();
 		} finally {
-			this._endMutation({ withoutSave: v });
+			this._endMutation({ withoutSave: l });
+		}
+		return this.editor.canvas.fire("editor:shape-added", d), u;
+	}
+	async _createShapeGroupForAdd({ basePreset: e, options: t }) {
+		let { width: n, height: r, preserveAspectRatio: i, shapeTextAutoExpand: a, text: o, textStyle: s, alignH: c, alignV: l, textPadding: u, rounding: d, id: f } = t, p = de({ presetKey: fe({
+			preset: e,
+			rounding: d
+		}) }) ?? e, { width: m, height: h } = p, g = !!i, _ = Math.max(1, n ?? m), v = Math.max(1, r ?? h), y, b;
+		if (g) {
+			y = n === void 0 ? void 0 : Math.max(1, n), b = r === void 0 ? void 0 : Math.max(1, r);
+			let e = this._resolveAspectRatioFittedDimensions({
+				targetWidth: y,
+				targetHeight: b,
+				aspectWidth: m,
+				aspectHeight: h
+			});
+			_ = e.width, v = e.height;
 		}
-		return this.editor.canvas.fire("editor:shape-added", L), I;
+		let x = a !== !1, S = this._resolveHorizontalAlign({
+			explicitAlign: c,
+			textStyle: s
+		}), C = l ?? "middle", w = this._resolveShapeStyle({
+			options: t,
+			fallback: null
+		}), T = xe({ padding: u }), E = ({ width: e, height: t }) => Te({
+			baseInset: me({
+				preset: p,
+				width: e,
+				height: t
+			}),
+			stroke: w.stroke,
+			strokeWidth: w.strokeWidth
+		}), O = Te({
+			baseInset: me({
+				preset: p,
+				width: _,
+				height: v
+			}),
+			stroke: w.stroke,
+			strokeWidth: w.strokeWidth
+		}), k = we({
+			base: O,
+			addition: T
+		}), A = Ee({ padding: u }), j = this._createTextNode({
+			text: o,
+			textStyle: s,
+			width: _,
+			align: S,
+			opacity: w.opacity
+		}), M = _;
+		g || (M = this._resolveShapeLayoutWidth({
+			text: j,
+			currentWidth: _,
+			manualWidth: _,
+			shapeTextAutoExpandEnabled: x,
+			padding: k,
+			resolvePaddingForWidth: ({ width: e }) => we({
+				base: E({
+					width: e,
+					height: v
+				}),
+				addition: T
+			})
+		}));
+		let N = await un({
+			preset: p,
+			width: M,
+			height: v,
+			style: w,
+			rounding: d
+		});
+		return this._createShapeGroup({
+			id: f ?? `shape-${D()}`,
+			presetKey: p.key,
+			presetCanRound: ge({ preset: p }),
+			shape: N,
+			text: j,
+			width: M,
+			height: v,
+			manualWidth: _,
+			manualHeight: v,
+			replaceBoxWidth: y,
+			replaceBoxHeight: b,
+			preserveAspectRatio: g,
+			shapeTextAutoExpand: x,
+			alignH: S,
+			alignV: C,
+			padding: T,
+			internalShapeTextInset: O,
+			resolveInternalShapeTextInset: E,
+			changedPadding: A,
+			style: w,
+			rounding: d
+		});
 	}
 	async update({ target: e, presetKey: t, options: n = {} } = {}) {
 		let r = this._resolveShapeGroup({ target: e });
@@ -6314,21 +6338,21 @@ var pr = ({ group: e, shape: t, text: n, layout: r, alignH: i, scaleX: a, scaleY
 			top: 0,
 			originX: "left",
 			originY: "top"
-		}, oe = U, se = this._createTextNode({
+		}, oe = U, G = this._createTextNode({
 			text: oe.textCaseRaw ?? U.text ?? "",
 			textStyle: this._resolveCurrentTextStyle({ textNode: U }),
 			width: Math.max(1, U.width ?? S.width),
 			align: L
 		});
-		se.set(ae), this._applyTextUpdates({
-			textNode: se,
+		G.set(ae), this._applyTextUpdates({
+			textNode: G,
 			text: p,
 			textStyle: m,
 			align: L
 		});
-		let G = l === void 0 && u === void 0 && t === void 0 && f === void 0 && v === void 0 && p === void 0 && !this._hasShapeTextSizeAffectingStyleChanges({ textStyle: m }), ce = _ !== void 0 && G, le = F, ue = I;
-		G ? (le = S.width, ue = S.height) : N || (le = this._resolveShapeLayoutWidth({
-			text: se,
+		let se = l === void 0 && u === void 0 && t === void 0 && f === void 0 && v === void 0 && p === void 0 && !this._hasShapeTextSizeAffectingStyleChanges({ textStyle: m }), ce = _ !== void 0 && se, le = F, ue = I;
+		se ? (le = S.width, ue = S.height) : N || (le = this._resolveShapeLayoutWidth({
+			text: G,
 			currentWidth: F,
 			manualWidth: V,
 			shapeTextAutoExpandEnabled: E,
@@ -6489,27 +6513,27 @@ var pr = ({ group: e, shape: t, text: n, layout: r, alignH: i, scaleX: a, scaleY
 		}
 		return this.lifecycleController.fireUpdated({ lifecycle: c }), a;
 	}
-	setOpacity({ target: e, opacity: t, withoutSave: n }) {
-		let r = this._resolveShapeGroup({ target: e });
-		if (!r) return null;
-		let { shape: i, text: a } = q({ group: r });
+	setOpacity({ target: e, opacity: t, applyToText: n = !0, withoutSave: r }) {
+		let i = this._resolveShapeGroup({ target: e });
 		if (!i) return null;
-		let o = this.lifecycleController.createContext({
-			group: r,
+		let { shape: a, text: o } = q({ group: i });
+		if (!a) return null;
+		let s = this.lifecycleController.createContext({
+			group: i,
 			source: "opacity",
 			target: e,
-			withoutSave: n
+			withoutSave: r
 		});
 		this._beginMutation();
 		try {
 			Zt({
-				shape: i,
+				shape: a,
 				style: { opacity: t }
-			}), a && (a.set({ opacity: t }), a.setCoords()), r.shapeOpacity = t, r.setCoords(), this.lifecycleController.fireBefore({ lifecycle: o }), this.editor.canvas.requestRenderAll();
+			}), n && o && (o.set({ opacity: t }), o.setCoords()), i.shapeOpacity = t, i.setCoords(), this.lifecycleController.fireBefore({ lifecycle: s }), this.editor.canvas.requestRenderAll();
 		} finally {
-			this._endMutation({ withoutSave: n });
+			this._endMutation({ withoutSave: r });
 		}
-		return this.lifecycleController.fireUpdated({ lifecycle: o }), r;
+		return this.lifecycleController.fireUpdated({ lifecycle: s }), i;
 	}
 	getTextNode({ target: e } = {}) {
 		let t = this._resolveShapeGroup({ target: e });
@@ -6604,8 +6628,8 @@ var pr = ({ group: e, shape: t, text: n, layout: r, alignH: i, scaleX: a, scaleY
 		let { canvas: e } = this.editor;
 		e.on("object:scaling", this._handleObjectScaling), e.on("object:modified", this._handleObjectModified), e.on("mouse:move", this._handleMouseMove), e.on("mouse:down", this._handleMouseDown), e.on("mouse:up", this._handleMouseUp), e.on("text:editing:entered", this._handleTextEditingEntered), e.on("text:editing:exited", this._handleTextEditingExited), e.on("text:changed", this._handleTextChanged), e.on("editor:before:text-updated", this._handleBeforeTextUpdated), e.on("editor:text-updated", this._handleTextUpdated);
 	}
-	_createShapeGroup({ id: e, presetKey: t, presetCanRound: n, shape: r, text: i, width: a, height: o, manualWidth: s, manualHeight: c, shapeTextAutoExpand: l, alignH: u, alignV: d, padding: f, internalShapeTextInset: p, resolveInternalShapeTextInset: m, changedPadding: h, style: g, rounding: _ }) {
-		let v = new Be([r, i], {
+	_createShapeGroup({ id: e, presetKey: t, presetCanRound: n, shape: r, text: i, width: a, height: o, manualWidth: s, manualHeight: c, replaceBoxWidth: l, replaceBoxHeight: u, preserveAspectRatio: d, shapeTextAutoExpand: f, alignH: p, alignV: m, padding: h, internalShapeTextInset: g, resolveInternalShapeTextInset: _, changedPadding: v, style: y, rounding: b }) {
+		let x = new Be([r, i], {
 			originX: "center",
 			originY: "center",
 			left: 0,
@@ -6613,35 +6637,37 @@ var pr = ({ group: e, shape: t, text: n, layout: r, alignH: i, scaleX: a, scaleY
 			lockScalingFlip: !0,
 			centeredScaling: !1,
 			objectCaching: !1
-		}), y = v;
-		return y.id = e, this._applyShapeGroupMetadata({
-			group: v,
+		}), S = x;
+		return S.id = e, this._applyShapeGroupMetadata({
+			group: x,
 			presetKey: t,
 			presetCanRound: n,
 			width: a,
 			height: o,
 			manualWidth: s,
 			manualHeight: c,
-			shapeTextAutoExpand: l,
-			alignH: u,
-			alignV: d,
-			padding: f,
-			style: g,
-			rounding: _
-		}), v.rehydrateRuntimeState(), Ge({ group: v }), Oe({ text: i }), On({
-			group: v,
+			shapeTextAutoExpand: f,
+			alignH: p,
+			alignV: m,
+			padding: h,
+			style: y,
+			rounding: b
+		}), x.rehydrateRuntimeState(), Ge({ group: x }), Oe({ text: i }), On({
+			group: x,
 			shape: r,
 			text: i,
 			width: a,
 			height: o,
-			alignH: u,
-			alignV: d,
-			padding: f,
-			shapeTextAutoExpandEnabled: l,
-			internalShapeTextInset: p,
-			resolveInternalShapeTextInset: m,
-			changedPadding: h
-		}), v.shapeReplaceBoxWidth = Math.max(1, v.shapeBaseWidth ?? a), v.shapeReplaceBoxHeight = Math.max(1, v.shapeBaseHeight ?? o), this._detachShapeGroupAutoLayout({ group: v }), v;
+			alignH: p,
+			alignV: m,
+			padding: h,
+			shapeTextAutoExpandEnabled: f,
+			preserveAspectRatio: d,
+			internalShapeTextInset: g,
+			resolveInternalShapeTextInset: _,
+			montageAreaWidth: d ? this._resolveMontageAreaWidth() : void 0,
+			changedPadding: v
+		}), d && (x.shapeManualBaseWidth = Math.max(1, x.shapeBaseWidth ?? a), x.shapeManualBaseHeight = Math.max(1, x.shapeBaseHeight ?? o)), x.shapeReplaceBoxWidth = Math.max(1, l ?? 0, x.shapeBaseWidth ?? a), x.shapeReplaceBoxHeight = Math.max(1, u ?? 0, x.shapeBaseHeight ?? o), this._detachShapeGroupAutoLayout({ group: x }), x;
 	}
 	_applyShapeGroupMetadata({ group: e, presetKey: t, presetCanRound: n, width: r, height: i, manualWidth: a, manualHeight: o, replaceBoxWidth: s, replaceBoxHeight: c, shapeTextAutoExpand: l, alignH: u, alignV: d, padding: f, style: p, rounding: m }) {
 		let h = p.strokeDashArray ? p.strokeDashArray.slice() : p.strokeDashArray ?? null;
@@ -6906,7 +6932,7 @@ var pr = ({ group: e, shape: t, text: n, layout: r, alignH: i, scaleX: a, scaleY
 	_resolveHorizontalAlign({ explicitAlign: e, textStyle: t }) {
 		if (e) return e;
 		let n = t?.align;
-		return n === "left" || n === "center" || n === "right" || n === "justify" ? n : G;
+		return n === "left" || n === "center" || n === "right" || n === "justify" ? n : se;
 	}
 	_hasShapeTextSizeAffectingStyleChanges({ textStyle: e }) {
 		if (!e) return !1;
@@ -8745,16 +8771,16 @@ var ci = class {
 		}) : null, H = {}, ie = {}, U = {}, W, ae, oe = Mr({
 			textbox: s,
 			range: B
-		}), se = !B || oe, G = !B;
-		if (h !== void 0 && (V && (ie.fontFamily = h), se && (z.fontFamily = h, G && (U.fontFamily = h))), g !== void 0 && (V && (ie.fontSize = g), se && (z.fontSize = g, G && (U.fontSize = g))), _ !== void 0) {
+		}), G = !B || oe, se = !B;
+		if (h !== void 0 && (V && (ie.fontFamily = h), G && (z.fontFamily = h, se && (U.fontFamily = h))), g !== void 0 && (V && (ie.fontSize = g), G && (z.fontSize = g, se && (U.fontSize = g))), _ !== void 0) {
 			let e = _ ? "bold" : "normal";
-			B && (H.fontWeight = e), se && (z.fontWeight = e, G && (U.fontWeight = e));
+			B && (H.fontWeight = e), G && (z.fontWeight = e, se && (U.fontWeight = e));
 		}
 		if (v !== void 0) {
 			let e = v ? "italic" : "normal";
-			B && (H.fontStyle = e), se && (z.fontStyle = e, G && (U.fontStyle = e));
+			B && (H.fontStyle = e), G && (z.fontStyle = e, se && (U.fontStyle = e));
 		}
-		if (y !== void 0 && (B && (H.underline = y), se && (z.underline = y, G && (U.underline = y))), x !== void 0 && (B && (H.linethrough = x), se && (z.linethrough = x, G && (U.linethrough = x))), S !== void 0 && (z.textAlign = S), C !== void 0 && (B && (H.fill = C), se && (z.fill = C, G && (U.fill = C))), w !== void 0 || T !== void 0) {
+		if (y !== void 0 && (B && (H.underline = y), G && (z.underline = y, se && (U.underline = y))), x !== void 0 && (B && (H.linethrough = x), G && (z.linethrough = x, se && (U.linethrough = x))), S !== void 0 && (z.textAlign = S), C !== void 0 && (B && (H.fill = C), G && (z.fill = C, se && (U.fill = C))), w !== void 0 || T !== void 0) {
 			let e = B ? Pr({
 				textbox: s,
 				range: B,
@@ -8767,7 +8793,7 @@ var ci = class {
 			ae = Ir({ width: T ?? e ?? s.strokeWidth ?? 0 }), W = Fr({
 				strokeColor: w ?? t ?? s.stroke ?? void 0,
 				width: ae
-			}), B && (H.stroke = W, H.strokeWidth = ae), se && (z.stroke = W, z.strokeWidth = ae, G && (U.stroke = W, U.strokeWidth = ae));
+			}), B && (H.stroke = W, H.strokeWidth = ae), G && (z.stroke = W, z.strokeWidth = ae, se && (U.stroke = W, U.strokeWidth = ae));
 		}
 		E !== void 0 && (z.opacity = E), D !== void 0 && (z.backgroundColor = D), O !== void 0 && (z.backgroundOpacity = O), k !== void 0 && (z.paddingTop = k), A !== void 0 && (z.paddingRight = A), j !== void 0 && (z.paddingBottom = j), M !== void 0 && (z.paddingLeft = M), N !== void 0 && (z.radiusTopLeft = N), P !== void 0 && (z.radiusTopRight = P), F !== void 0 && (z.radiusBottomRight = F), I !== void 0 && (z.radiusBottomLeft = I);
 		let ce = s.textCaseRaw ?? c, le = !!s.uppercase, ue = p !== void 0, de = ue ? p ?? "" : ce, fe = b ?? le, pe = fe !== le;

package/package.json

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