@emailmaker/filemanager 1.1.95 → 1.1.102

package/file-manager-FilerobotEditor.js

@@ -0,0 +1,576 @@
+import { Ct as e, D as t, E as n, L as r, T as i, V as a, ct as o, f as s, ot as c, tt as l, y as u } from "./file-manager-hooks-BDRRCedE.js";
+import { i as d, n as f, t as p } from "./file-manager-imageEditorCropPresets-en0_jYEY.js";
+import m from "react";
+import { Button as h, InputNumber as g, Modal as _, Tooltip as ee } from "antd";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import te, { TABS as b, TOOLS as ne } from "react-filerobot-image-editor";
+import x from "konva";
+import { TABS_TOOLS as S, TOOLS_ITEMS as C } from "react-filerobot-image-editor/lib/components/tools/tools.constants";
+import { useStore as w } from "react-filerobot-image-editor/lib/hooks";
+import { UPDATE_EXTRA_STATE as T } from "react-filerobot-image-editor/lib/actions";
+import re from "react-filerobot-image-editor/lib/components/common/Slider";
+import E from "react-filerobot-image-editor/lib/components/ToolsBar/ToolsBarItemButton";
+var D = {
+	"em-filemanager": "em-filemanager",
+	emFilemanager: "em-filemanager",
+	filerobotEditorModal: "filerobotEditorModal",
+	filerobotEditorContainer: "filerobotEditorContainer",
+	filerobotEditorBody: "filerobotEditorBody"
+}, O = "CornerRadius", k = "ellipse", A = "Crop";
+function j(e, t) {
+	return Math.max(0, Math.floor(Math.min(e, t) / 2));
+}
+function M(e, t, n) {
+	let r = typeof e == "number" ? e : Number(e);
+	return Number.isFinite(r) ? Math.min(Math.max(Math.round(r), 0), j(t, n)) : 0;
+}
+function N(e, t, n) {
+	return n > 0 ? e * t / n : 0;
+}
+function P(e, t, n, r, i, a) {
+	let o = Math.min(a, r / 2, i / 2);
+	if (!(o > 0)) return !1;
+	let s = t + r, c = n + i;
+	return e.moveTo(t, n), e.lineTo(t + o, n), e.arcTo(t, n, t, n + o, o), e.closePath(), e.moveTo(s, n), e.lineTo(s, n + o), e.arcTo(s, n, s - o, n, o), e.closePath(), e.moveTo(s, c), e.lineTo(s - o, c), e.arcTo(s, c, s, c - o, o), e.closePath(), e.moveTo(t, c), e.lineTo(t, c - o), e.arcTo(t, c, t + o, c, o), e.closePath(), !0;
+}
+function F(e) {
+	let t = e;
+	return {
+		radius: t?.extra?.cornerRadius ?? 0,
+		isEllipse: t?.adjustments?.crop?.ratio === k,
+		resizeWidth: t?.resize?.width ?? 0,
+		isCropping: t?.toolId === A
+	};
+}
+function I(e, t, n) {
+	let r = e.filter((e) => e !== n), i = r.indexOf(t);
+	return i < 0 ? [...r, n] : [
+		...r.slice(0, i + 1),
+		n,
+		...r.slice(i + 1)
+	];
+}
+//#endregion
+//#region packages/file-manager/src/components/FilerobotEditor/cornerRadius/cornerRadiusEraser.ts
+var L = ["FIE_base-layer", "FIE_design-layer"], R = "em-corner-radius-eraser";
+function z(e, t) {
+	let n = t.getLayer(), r = Number(t.getAttr("emRadius")) || 0;
+	if (!n || r <= 0 || t.getAttr("emSuspended") && !n.getAttr("isSaving")) return;
+	let i = Number(n.getAttr("clipWidth")) || 0, a = Number(n.getAttr("clipHeight")) || 0, o = Number(n.getAttr("originalSourceInitialScale")) || 1, s = Number(t.getAttr("emResizeWidth")) || i / o;
+	e.beginPath(), P(e, Number(n.getAttr("clipX")) || 0, Number(n.getAttr("clipY")) || 0, i, a, N(r, i, s)) && e.fillShape(t);
+}
+function B(e) {
+	if (e) return x.stages.find((t) => e.contains(t.container()));
+}
+function V(e, t) {
+	for (let n of L) {
+		let r = e.findOne(`#${n}`);
+		if (!r) continue;
+		let i = r.findOne(`.${R}`);
+		i || (i = new x.Shape({
+			name: R,
+			listening: !1,
+			fill: "#000",
+			globalCompositeOperation: "destination-out",
+			sceneFunc: z
+		}), r.add(i)), i.setAttrs({
+			emRadius: t.radius,
+			emResizeWidth: t.resizeWidth,
+			emSuspended: t.suspended
+		}), i.moveToTop(), r.batchDraw();
+	}
+}
+//#endregion
+//#region packages/file-manager/src/components/FilerobotEditor/cornerRadius/CornerRadiusTool.tsx
+var H = 400, U = ({ size: e = 16 }) => /* @__PURE__ */ v("svg", {
+	width: e,
+	height: e,
+	viewBox: "0 0 16 16",
+	fill: "none",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ v("path", {
+		d: "M2.5 14V8.5a6 6 0 0 1 6-6H14",
+		stroke: "currentColor",
+		strokeWidth: "1.4",
+		strokeLinecap: "round"
+	})
+});
+function W(e) {
+	let t = e.shownImageDimensions ?? {}, n = e.adjustments?.crop ?? {}, r = t.originalSourceInitialScale || 1;
+	return {
+		width: e.resize?.width || (n.width || t.width || 0) / r,
+		height: e.resize?.height || (n.height || t.height || 0) / r
+	};
+}
+var G = ({ selectTool: e, t, isSelected: n }) => {
+	let r = w(), { radius: i, isEllipse: a, resizeWidth: o, isCropping: s } = F(r), c = r.config?.[O]?.onChange, l = m.useRef({
+		radius: i,
+		isEllipse: a,
+		resizeWidth: o,
+		isCropping: s
+	});
+	return l.current = {
+		radius: i,
+		isEllipse: a,
+		resizeWidth: o,
+		isCropping: s
+	}, m.useEffect(() => {
+		c?.({
+			radius: i,
+			isEllipse: a,
+			resizeWidth: o,
+			isCropping: s
+		});
+	}, [
+		c,
+		i,
+		a,
+		o,
+		s
+	]), m.useEffect(() => () => c?.({
+		...l.current,
+		isCropping: !1
+	}), [c]), /* @__PURE__ */ v(E, {
+		className: "FIE_corner-radius-tool-button",
+		id: O,
+		label: t("cornerRadiusTool"),
+		Icon: U,
+		onClick: e,
+		isSelected: n
+	});
+}, K = ({ t: e }) => {
+	let t = w(), { dispatch: n } = t, { radius: r, isEllipse: i } = F(t), { width: a, height: o } = W(t), s = j(a, o), c = Math.min(r, s), [l, u] = m.useState(null), d = m.useRef(!1), f = m.useRef(void 0);
+	m.useEffect(() => () => clearTimeout(f.current), []);
+	let p = (e, t) => {
+		let i = M(e, a, o);
+		i !== r && n({
+			type: T,
+			payload: {
+				cornerRadius: i,
+				dismissHistory: !t
+			}
+		});
+	}, h = (e) => {
+		p(e, !d.current), d.current = !0, clearTimeout(f.current), f.current = setTimeout(() => {
+			d.current = !1;
+		}, H);
+	}, _ = () => {
+		l !== null && (p(l, !0), u(null));
+	};
+	return i ? /* @__PURE__ */ v("span", {
+		className: "FIE_corner-radius-hint",
+		children: e("cornerRadiusEllipseHint")
+	}) : /* @__PURE__ */ y("div", {
+		className: "FIE_corner-radius-options",
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: 12
+		},
+		children: [/* @__PURE__ */ v(re, {
+			min: 0,
+			max: s,
+			step: 1,
+			value: c,
+			width: "160px",
+			style: { margin: 0 },
+			onChange: h
+		}), /* @__PURE__ */ v(g, {
+			size: "small",
+			min: 0,
+			max: s,
+			precision: 0,
+			value: l ?? c,
+			suffix: "px",
+			style: { width: 96 },
+			onChange: (e) => u(e === null ? 0 : Number(e)),
+			onBlur: _,
+			onPressEnter: _
+		})]
+	});
+}, q = {
+	...C,
+	[O]: {
+		id: O,
+		Item: G,
+		ItemOptions: K
+	}
+}, J = {
+	...S,
+	[b.ADJUST]: I(S[b.ADJUST] ?? [], ne.CROP, O)
+};
+//#endregion
+//#region packages/file-manager/src/components/FilerobotEditor/cornerRadius/useCornerRadiusSync.ts
+function Y(e) {
+	let [t, n] = m.useState(!1), r = m.useCallback((t) => {
+		let r = B(e.current);
+		r && V(r, {
+			radius: t.isEllipse ? 0 : t.radius,
+			resizeWidth: t.resizeWidth,
+			suspended: t.isCropping
+		}), n(t.radius > 0 && !t.isEllipse);
+	}, [e]);
+	return {
+		isRounded: t,
+		editorConfig: m.useMemo(() => ({
+			tools: q,
+			tabsToolsIds: J,
+			onModify: (e) => r(F(e)),
+			[O]: { onChange: r }
+		}), [r])
+	};
+}
+//#endregion
+//#region packages/file-manager/src/components/FilerobotEditor/cornerRadius/cornerRadiusOutput.ts
+function X(e) {
+	return e.isRounded ? {
+		forcePng: !0,
+		canOverwrite: !!e.sourceMimeType && o(e.sourceMimeType) === "image/png"
+	} : {
+		forcePng: !1,
+		canOverwrite: !0
+	};
+}
+function ie(e) {
+	let t = e.lastIndexOf(".");
+	return `${t > 0 ? e.slice(0, t) : e}.png`;
+}
+//#endregion
+//#region packages/file-manager/src/components/FilerobotEditor/FilerobotEditor.tsx
+var ae = {
+	container: D.filerobotEditorContainer,
+	body: D.filerobotEditorBody
+}, oe = { presetsItems: p }, Z = (e, t = "image/png") => fetch(`data:${t};base64,${e}`).then((e) => e.blob());
+function se(e, t) {
+	if (e === "json") return new Blob([t], { type: "application/json" });
+	if (e === "svg") return new Blob([t], { type: "image/svg+xml" });
+	let n = `image/${e}`;
+	if (t.startsWith("data:")) {
+		let e = c(t);
+		return e && e.startsWith("image/") && (n = e), Z(t.replace(/data:image\/[^;]+;base64,/, ""), o(n));
+	}
+	return Z(t, o(n));
+}
+function ce(e) {
+	return new Promise((t, n) => {
+		let r = new FileReader();
+		r.onload = () => t(r.result), r.onerror = () => n(r.error ?? /* @__PURE__ */ Error("Failed to convert blob to data URL")), r.readAsDataURL(e);
+	});
+}
+var le = [
+	{
+		label: "Arial",
+		value: "Arial"
+	},
+	{
+		label: "Helvetica",
+		value: "Helvetica"
+	},
+	{
+		label: "Verdana",
+		value: "Verdana"
+	},
+	{
+		label: "Tahoma",
+		value: "Tahoma"
+	},
+	{
+		label: "Trebuchet MS",
+		value: "Trebuchet MS"
+	},
+	{
+		label: "Times New Roman",
+		value: "Times New Roman"
+	},
+	{
+		label: "Georgia",
+		value: "Georgia"
+	},
+	{
+		label: "Courier New",
+		value: "Courier New"
+	},
+	{
+		label: "Impact",
+		value: "Impact"
+	},
+	{
+		label: "Comic Sans MS",
+		value: "Comic Sans MS"
+	}
+], Q = ({ visible: c, onClose: p, file: g, onSave: ne, onSaveCopy: x }) => {
+	let { t: S } = l(), C = r(), w = s(), { options: T } = a(), { i18n: re } = l(), { config: E } = T, { getFileData: O, resolveFileForEditByUrl: k } = w, [A, j] = m.useState(!1), [M, N] = m.useState(null), [P, F] = m.useState(""), [I, L] = m.useState(!1), [R, z] = m.useState(null), [B, V] = m.useState(null), H = m.useRef(void 0), U = m.useRef(void 0), W = m.useRef(void 0), G = m.useRef(void 0), K = m.useRef(null), q = Y(K);
+	H.current = ne, U.current = x, m.useEffect(() => {
+		g && (async () => {
+			if (G.current !== g) {
+				if (typeof g == "object") {
+					z(g);
+					return;
+				}
+				G.current = g, j(!0);
+				try {
+					if (g.startsWith("data:")) z({
+						thumbnail: g,
+						saveWithoutFolder: !0
+					});
+					else {
+						let e = await k(g);
+						G.current === g && z(e);
+					}
+				} catch (e) {
+					console.error("Failed to load file for editor:", e), G.current === g && (G.current = null), p?.();
+				} finally {
+					j(!1);
+				}
+			}
+		})();
+	}, [
+		g,
+		p,
+		k
+	]);
+	let J = m.useCallback(async (e) => {
+		if (typeof e.thumbnail == "string" && e.thumbnail.startsWith("data:")) return e.thumbnail;
+		let t = await O(e.id, !0);
+		if (!t) throw Error(S("Error loading image"));
+		return new Promise((e) => {
+			let n = new FileReader();
+			n.onload = () => e(n.result), n.readAsDataURL(t);
+		});
+	}, [O, S]);
+	m.useEffect(() => {
+		if (!M && c && R) {
+			let e = !1;
+			return (async () => {
+				j(!0);
+				try {
+					let t = await J(R);
+					if (!e) {
+						N(t);
+						let e = n(R, "image/png");
+						F(e.mimeType);
+					}
+				} catch (t) {
+					e || (C.error({
+						id: "IMAGE_DOWNLOAD_FAILED",
+						innerException: t,
+						message: S("Error loading image"),
+						placement: "bottomRight",
+						data: {}
+					}), p?.());
+				} finally {
+					j(!1);
+				}
+			})(), () => {
+				e = !0;
+			};
+		}
+	}, [
+		R,
+		J,
+		M,
+		p,
+		S,
+		c
+	]);
+	let Z = m.useCallback(async (e, n, r) => {
+		let i = await se(r, e), a = o(i.type || `image/${r}`), s = E?.compessorUrl ?? E?.compressorUrl;
+		if (a.startsWith("image/")) try {
+			let e = new File([i], n, { type: a }), r = await u(e, {
+				maxSizeMB: E?.compressMaxSize,
+				maxWidthOrHeight: E?.compressMaxWidthOrHeight,
+				mimeType: a,
+				fileName: n,
+				libURL: s,
+				enableCompression: t(E, a),
+				compressBySize: E?.compressEditedImages === !0
+			});
+			i = r, a = r.type;
+		} catch (e) {
+			console.warn("Image preparation failed, using original:", e);
+		}
+		return {
+			blob: i,
+			mimeType: a,
+			thumbnailDataUrl: await ce(i)
+		};
+	}, [E]), Q = m.useCallback(async (e, t, n, r, i = !1) => {
+		let a = r === "save" ? H.current : U.current;
+		if (R && a) try {
+			j(!0);
+			let { blob: o, mimeType: s, thumbnailDataUrl: c } = await Z(e, t, n), l = await a({
+				...R,
+				thumbnail: c,
+				size: o.size,
+				date: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
+				type: s,
+				folderId: R.folderId || "",
+				name: i ? t : R.name || t,
+				extension: i ? n : R.extension || (R.name || t).split(".").pop()?.toLowerCase() || ""
+			}, {
+				blob: o,
+				mimeType: s,
+				thumbnail: c,
+				mode: r
+			});
+			return j(!1), l;
+		} catch (e) {
+			console.error("Error saving:", e), V(String(e?.message || e)), j(!1);
+		}
+	}, [R, Z]), ue = m.useCallback((e) => {
+		if (!W.current || !R) {
+			console.error("FIE getCurrentImgData недоступен или файл не загружен");
+			return;
+		}
+		let t = n(R, P), r = X({
+			sourceMimeType: t.mimeType,
+			isRounded: q.isRounded
+		});
+		if (e === "save" && !r.canOverwrite) return;
+		let a = r.forcePng ? {
+			extension: "png",
+			mimeType: "image/png"
+		} : t, o = r.forcePng ? ie(R.name || "edited-image") : R.name || "edited-image";
+		try {
+			let { imageData: t, designState: n } = W.current({
+				name: o.replace(/\.[^/.]+$/, ""),
+				extension: a.extension,
+				quality: i.QUALITY
+			}, void 0, !1);
+			console.log("[FIE PoC] getCurrentImgData ->", t, n);
+			let s = t.imageBase64 ?? (t.imageCanvas ? t.imageCanvas.toDataURL(a.mimeType) : void 0);
+			if (!s) throw Error("FIE не вернул ни imageBase64, ни imageCanvas");
+			Q(s, o, a.extension, e, r.forcePng);
+		} catch (e) {
+			console.error("🎨 Ошибка получения данных из FIE:", e), V(String(e?.message || e));
+		}
+	}, [
+		q.isRounded,
+		R,
+		P,
+		Q
+	]), $ = E?.locale ? E?.locale.replace("_", "-") : "en", de = m.useMemo(() => f($), [$]);
+	matchMedia(e).matches, E?.theme === "system" || E?.theme;
+	let fe = {
+		theme: void 0,
+		useBackendTranslations: !1,
+		language: $.split("-")[0] || "en",
+		translations: de,
+		tabsIds: [
+			b.ADJUST,
+			b.FINETUNE,
+			b.FILTERS,
+			b.ANNOTATE,
+			b.RESIZE
+		],
+		defaultTabId: b.ADJUST,
+		savingPixelRatio: 1,
+		previewPixelRatio: 1,
+		avoidChangesNotSavedAlertOnLeave: !0,
+		defaultSavedImageName: R?.name?.replace(/\.[^/.]+$/, "") || "image",
+		removeSaveButton: !0,
+		observePluginContainerSize: !0,
+		Crop: oe,
+		Text: {
+			fontFamily: "Arial",
+			fonts: le
+		},
+		getCurrentImgDataFnRef: W,
+		...q.editorConfig
+	}, pe = !!R?.id && E?.features?.enableUpdateFile !== !1, { canOverwrite: me } = X({
+		sourceMimeType: R ? n(R, P).mimeType : "",
+		isRounded: q.isRounded
+	});
+	return /* @__PURE__ */ v(_, {
+		title: R?.name ? S("Editing: {{name}}", { name: R.name }) : S("Editing image"),
+		open: c,
+		closeIcon: null,
+		onCancel: p,
+		afterOpenChange: (e) => L(e),
+		forceRender: !0,
+		width: "100%",
+		getContainer: T.getModalContainer,
+		className: D.filerobotEditorModal,
+		classNames: ae,
+		footer: [
+			/* @__PURE__ */ v(h, {
+				onClick: p,
+				disabled: !I || A,
+				children: S("Cancel")
+			}, "cancel"),
+			/* @__PURE__ */ v(h, {
+				type: "primary",
+				onClick: () => ue("saveCopy"),
+				loading: A,
+				children: S("Save as copy and choose")
+			}, "save-copy"),
+			...pe ? [/* @__PURE__ */ v(ee, {
+				title: me ? void 0 : S("Rounded corners are saved as a PNG copy: the original format has no transparency"),
+				children: /* @__PURE__ */ v(h, {
+					type: "primary",
+					onClick: () => ue("save"),
+					loading: A,
+					disabled: !me,
+					children: S("Save and choose")
+				})
+			}, "save")] : []
+		],
+		mask: { closable: !1 },
+		destroyOnHidden: !1,
+		children: /* @__PURE__ */ y("div", {
+			ref: K,
+			style: {
+				position: "relative",
+				width: "100%",
+				height: "100%"
+			},
+			children: [
+				c && I && M ? /* @__PURE__ */ v(te, {
+					source: M,
+					...fe
+				}) : /* @__PURE__ */ v("div", {
+					style: {
+						position: "absolute",
+						inset: 0,
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center"
+					},
+					children: /* @__PURE__ */ v("span", {
+						style: {
+							fontSize: 14,
+							color: "#555"
+						},
+						children: S("Loading editor...")
+					})
+				}),
+				B && /* @__PURE__ */ y("div", {
+					style: {
+						position: "absolute",
+						bottom: 8,
+						left: 8,
+						right: 8,
+						background: "#fff1f0",
+						border: "1px solid #ffa39e",
+						color: "#a8071a",
+						padding: 8,
+						fontSize: 12,
+						zIndex: 100
+					},
+					children: ["[FIE PoC] ", B]
+				}),
+				A && /* @__PURE__ */ v(d, { style: {
+					position: "absolute",
+					top: 0,
+					background: "var(--em-colorBgLayout)",
+					zIndex: 100,
+					opacity: .7
+				} })
+			]
+		})
+	});
+};
+//#endregion
+export { Q as FilerobotEditor, Y as useCornerRadiusSync };
+
+//# sourceMappingURL=file-manager-FilerobotEditor.js.map