@univerjs/drawing-ui 0.24.0 → 0.25.0

package/lib/index.js

@@ -1,10 +1,10 @@
-import { ArrangeTypeEnum, CommandType, Disposable, DrawingTypeEnum, ICommandService, IConfigService, IURLImageService, IUniverInstanceService, ImageSourceType, Inject, Injector, LocaleService, Plugin, UniverInstanceType, checkIfMove, debounce, generateRandomId, merge, toDisposable } from "@univerjs/core";
+import { ArrangeTypeEnum, BooleanNumber, CommandType, Disposable, DrawingTypeEnum, ICommandService, IConfigService, IURLImageService, IUniverInstanceService, ImageSourceType, Inject, Injector, LocaleService, Plugin, PositionedObjectLayoutType, UniverInstanceType, checkIfMove, debounce, generateRandomId, merge, toDisposable } from "@univerjs/core";
 import { IDrawingManagerService, IImageIoService, ImageSourceType as ImageSourceType$1, SetDrawingSelectedOperation, getDrawingShapeKeyByDrawingSearch } from "@univerjs/drawing";
 import { CURSOR_TYPE, Canvas, DRAWING_OBJECT_LAYER_INDEX, DrawingGroupObject, Group, IRenderManagerService, Image, RENDER_CLASS_TYPE, Rect, Shape, Vector2, degToRad, getGroupState, precisionTo, transformObjectOutOfGroup } from "@univerjs/engine-render";
-import { AutofillDoubleIcon, BottomIcon, CreateCopyIcon, GroupIcon, MoreDownIcon, MoveDownIcon, MoveUpIcon, TopmostIcon, UngroupIcon } from "@univerjs/icons";
+import { AutofillDoubleIcon, BottomIcon, CreateCopyIcon, DeleteIcon, DocSettingIcon, GroupIcon, MoreDownIcon, MoveDownIcon, MoveUpIcon, TopmostIcon, UngroupIcon } from "@univerjs/icons";
 import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IDialogService, IGalleryService, IMenuManagerService, IMessageService, MenuItemType, useDependency, useObservable } from "@univerjs/ui";
 import { BehaviorSubject, Observable, bufferTime, filter, map, of, switchMap } from "rxjs";
-import { Button, Checkbox, DropdownMenu, InputNumber, MessageType, Select, borderClassName, clsx } from "@univerjs/design";
+import { Button, Checkbox, Dropdown, DropdownMenu, InputNumber, MessageType, Select, Tooltip, borderClassName, clsx } from "@univerjs/design";
 import { useEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
@@ -321,7 +321,7 @@ function getCurrentUnitInfo(currentUniverService, propUnitId) {
 //#endregion
 //#region package.json
 var name = "@univerjs/drawing-ui";
-var version = "0.24.0";
+var version = "0.25.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -353,7 +353,7 @@ function DrawingAlignContextMenuItemFactory(accessor) {
 		id: DRAWING_ALIGN_CONTEXT_MENU_ID,
 		type: MenuItemType.SUBITEMS,
 		icon: "HorizontallyIcon",
-		title: "image-panel.align.title",
+		title: "drawing-ui.image-panel.align.title",
 		hidden$: getMenuStateByDrawingFocusChangedObservable$$1(accessor)
 	};
 }
@@ -362,7 +362,7 @@ function SetDrawingAlignLeftMenuItemFactory() {
 		id: SetDrawingAlignLeftOperation.id,
 		type: MenuItemType.BUTTON,
 		icon: "LeftJustifyingIcon",
-		title: "image-panel.align.left"
+		title: "drawing-ui.image-panel.align.left"
 	};
 }
 function SetDrawingAlignCenterMenuItemFactory() {
@@ -370,7 +370,7 @@ function SetDrawingAlignCenterMenuItemFactory() {
 		id: SetDrawingAlignCenterOperation.id,
 		type: MenuItemType.BUTTON,
 		icon: "HorizontallyIcon",
-		title: "image-panel.align.center"
+		title: "drawing-ui.image-panel.align.center"
 	};
 }
 function SetDrawingAlignRightMenuItemFactory() {
@@ -378,7 +378,7 @@ function SetDrawingAlignRightMenuItemFactory() {
 		id: SetDrawingAlignRightOperation.id,
 		type: MenuItemType.BUTTON,
 		icon: "RightJustifyingIcon",
-		title: "image-panel.align.right"
+		title: "drawing-ui.image-panel.align.right"
 	};
 }
 function SetDrawingAlignTopMenuItemFactory() {
@@ -386,7 +386,7 @@ function SetDrawingAlignTopMenuItemFactory() {
 		id: SetDrawingAlignTopOperation.id,
 		type: MenuItemType.BUTTON,
 		icon: "AlignTopIcon",
-		title: "image-panel.align.top"
+		title: "drawing-ui.image-panel.align.top"
 	};
 }
 function SetDrawingAlignMiddleMenuItemFactory() {
@@ -394,7 +394,7 @@ function SetDrawingAlignMiddleMenuItemFactory() {
 		id: SetDrawingAlignMiddleOperation.id,
 		type: MenuItemType.BUTTON,
 		icon: "VerticalCenterIcon",
-		title: "image-panel.align.middle"
+		title: "drawing-ui.image-panel.align.middle"
 	};
 }
 function SetDrawingAlignBottomMenuItemFactory() {
@@ -402,7 +402,7 @@ function SetDrawingAlignBottomMenuItemFactory() {
 		id: SetDrawingAlignBottomOperation.id,
 		type: MenuItemType.BUTTON,
 		icon: "AlignBottomIcon",
-		title: "image-panel.align.bottom"
+		title: "drawing-ui.image-panel.align.bottom"
 	};
 }
 function SetDrawingAlignHorizonMenuItemFactory() {
@@ -410,7 +410,7 @@ function SetDrawingAlignHorizonMenuItemFactory() {
 		id: SetDrawingAlignHorizonOperation.id,
 		type: MenuItemType.BUTTON,
 		icon: "HorizontallyIcon",
-		title: "image-panel.align.horizon"
+		title: "drawing-ui.image-panel.align.horizon"
 	};
 }
 function SetDrawingAlignVerticalMenuItemFactory() {
@@ -418,7 +418,7 @@ function SetDrawingAlignVerticalMenuItemFactory() {
 		id: SetDrawingAlignVerticalOperation.id,
 		type: MenuItemType.BUTTON,
 		icon: "VerticalCenterIcon",
-		title: "image-panel.align.vertical"
+		title: "drawing-ui.image-panel.align.vertical"
 	};
 }
 
@@ -430,7 +430,7 @@ function DrawingArrangeContextMenuItemFactory() {
 		id: DRAWING_ARRANGE_CONTEXT_MENU_ID,
 		type: MenuItemType.SUBITEMS,
 		icon: "TopmostIcon",
-		title: "image-panel.arrange.title"
+		title: "drawing-ui.image-panel.arrange.title"
 	};
 }
 function SetDrawingArrangeFrontMenuItemFactory() {
@@ -438,7 +438,7 @@ function SetDrawingArrangeFrontMenuItemFactory() {
 		id: SetDrawingArrangeFrontOperation.id,
 		type: MenuItemType.BUTTON,
 		icon: "TopmostIcon",
-		title: "image-panel.arrange.front"
+		title: "drawing-ui.image-panel.arrange.front"
 	};
 }
 function SetDrawingArrangeForwardMenuItemFactory() {
@@ -446,7 +446,7 @@ function SetDrawingArrangeForwardMenuItemFactory() {
 		id: SetDrawingArrangeForwardOperation.id,
 		type: MenuItemType.BUTTON,
 		icon: "MoveUpIcon",
-		title: "image-panel.arrange.forward"
+		title: "drawing-ui.image-panel.arrange.forward"
 	};
 }
 function SetDrawingArrangeBackMenuItemFactory() {
@@ -454,7 +454,7 @@ function SetDrawingArrangeBackMenuItemFactory() {
 		id: SetDrawingArrangeBackOperation.id,
 		type: MenuItemType.BUTTON,
 		icon: "BottomIcon",
-		title: "image-panel.arrange.back"
+		title: "drawing-ui.image-panel.arrange.back"
 	};
 }
 function SetDrawingArrangeBackwardMenuItemFactory() {
@@ -462,7 +462,7 @@ function SetDrawingArrangeBackwardMenuItemFactory() {
 		id: SetDrawingArrangeBackwardOperation.id,
 		type: MenuItemType.BUTTON,
 		icon: "MoveDownIcon",
-		title: "image-panel.arrange.backward"
+		title: "drawing-ui.image-panel.arrange.backward"
 	};
 }
 
@@ -495,7 +495,7 @@ function DrawingGroupContextMenuItemFactory(accessor) {
 		id: DRAWING_GROUP_CONTEXT_MENU_ID,
 		type: MenuItemType.SUBITEMS,
 		icon: "GroupIcon",
-		title: "image-panel.group.title",
+		title: "drawing-ui.image-panel.group.title",
 		hidden$: getMenuStateByDrawingFocusChangedObservable$(accessor)
 	};
 }
@@ -504,7 +504,7 @@ function SetDrawingGroupMenuItemFactory(accessor) {
 		id: SetDrawingGroupOperation.id,
 		type: MenuItemType.BUTTON,
 		icon: "GroupIcon",
-		title: "image-panel.group.group",
+		title: "drawing-ui.image-panel.group.group",
 		disabled$: getMenuStateByDrawingFocusChangedObservable$(accessor, "group")
 	};
 }
@@ -513,7 +513,7 @@ function CancelDrawingGroupMenuItemFactory(accessor) {
 		id: CancelDrawingGroupOperation.id,
 		type: MenuItemType.BUTTON,
 		icon: "UngroupIcon",
-		title: "image-panel.group.unGroup",
+		title: "drawing-ui.image-panel.group.unGroup",
 		disabled$: getMenuStateByDrawingFocusChangedObservable$(accessor, "unGroup")
 	};
 }
@@ -613,10 +613,16 @@ const COMPONENT_IMAGE_POPUP_MENU = "COMPONENT_IMAGE_POPUP_MENU";
 //#endregion
 //#region src/views/image-popup-menu/ImagePopupMenu.tsx
 function ImagePopupMenu(props) {
-	var _popup$extraProps;
+	var _popup$extraProps, _popup$extraProps2;
 	const { popup } = props;
 	const menuItems = popup === null || popup === void 0 || (_popup$extraProps = popup.extraProps) === null || _popup$extraProps === void 0 ? void 0 : _popup$extraProps.menuItems;
 	if (!menuItems) return null;
+	if (((_popup$extraProps2 = popup.extraProps) === null || _popup$extraProps2 === void 0 ? void 0 : _popup$extraProps2.variant) === "doc-floating-toolbar" && popup.extraProps.unitId && popup.extraProps.subUnitId && popup.extraProps.drawingId) return /* @__PURE__ */ jsx(DocImageFloatingToolbar, {
+		menuItems,
+		unitId: popup.extraProps.unitId,
+		subUnitId: popup.extraProps.subUnitId,
+		drawingId: popup.extraProps.drawingId
+	});
 	const commandService = useDependency(ICommandService);
 	const localeService = useDependency(LocaleService);
 	const [visible, setVisible] = useState(false);
@@ -658,9 +664,256 @@ function ImagePopupMenu(props) {
 		})
 	});
 }
+const UPDATE_DOC_DRAWING_WRAPPING_STYLE_COMMAND_ID = "doc.command.update-doc-drawing-wrapping-style";
+function getWrappingStyle(documentDataModel, drawingId) {
+	var _documentDataModel$ge;
+	const drawing = documentDataModel === null || documentDataModel === void 0 || (_documentDataModel$ge = documentDataModel.getSnapshot().drawings) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge[drawingId];
+	if (!drawing) return "inline";
+	if (drawing.layoutType === PositionedObjectLayoutType.WRAP_NONE) return drawing.behindDoc === BooleanNumber.TRUE ? "behindText" : "inFrontOfText";
+	if (drawing.layoutType === PositionedObjectLayoutType.WRAP_SQUARE) return "wrapSquare";
+	if (drawing.layoutType === PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM) return "wrapTopAndBottom";
+	return "inline";
+}
+function Divider() {
+	return /* @__PURE__ */ jsx("span", { className: "\n              univer-h-5 univer-w-px univer-bg-gray-200\n              dark:!univer-bg-gray-700\n            " });
+}
+function ToolbarGroup(props) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "univer-flex univer-h-7 univer-items-center univer-gap-1 univer-px-1",
+		children: props.children
+	});
+}
+function ToolbarButton(props) {
+	return /* @__PURE__ */ jsx(Tooltip, {
+		title: props.title,
+		placement: "bottom",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			disabled: props.disabled,
+			onClick: props.onClick,
+			className: clsx("univer-flex univer-h-6 univer-w-6 univer-items-center univer-justify-center univer-rounded-md univer-border-none univer-bg-transparent univer-p-0 univer-text-sm univer-text-gray-700 univer-transition-colors hover:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-opacity-40 dark:!univer-text-gray-100 dark:hover:!univer-bg-gray-700", { "univer-bg-gray-100 univer-text-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-primary-300": props.active }),
+			children: props.children
+		})
+	});
+}
+function TextWrapShapeIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 20 20",
+		width: "1em",
+		height: "1em",
+		fill: "none",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M2.5 4.5H8.2",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M11.8 4.5H17.5",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M2.5 10H5.7",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14.3 10H17.5",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M2.5 15.5H8.2",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M11.8 15.5H17.5",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "6.8",
+				y: "7",
+				width: "6.4",
+				height: "6",
+				rx: "1",
+				stroke: "currentColor",
+				strokeWidth: "1.4"
+			})
+		]
+	});
+}
+function CropIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 20 20",
+		width: "1em",
+		height: "1em",
+		fill: "none",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M5 2.8V12.5C5 13.9 6.1 15 7.5 15H17.2",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M2.8 5H12.5C13.9 5 15 6.1 15 7.5V17.2",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M8.3 8.3H11.7V11.7H8.3V8.3Z",
+				stroke: "currentColor",
+				strokeWidth: "1.2"
+			})
+		]
+	});
+}
+function ToolbarDropdownButton(props) {
+	var _props$options$find;
+	const [open, setOpen] = useState(false);
+	const activeOption = (_props$options$find = props.options.find((option) => option.value === props.value)) !== null && _props$options$find !== void 0 ? _props$options$find : props.options[0];
+	return /* @__PURE__ */ jsx(Dropdown, {
+		open,
+		onOpenChange: setOpen,
+		overlay: /* @__PURE__ */ jsx("div", {
+			className: "univer-min-w-32 univer-rounded-lg univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-p-1 univer-shadow-lg dark:!univer-border-gray-700 dark:!univer-bg-gray-900",
+			children: props.options.map((option) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => {
+					props.onChange(option.value);
+					setOpen(false);
+				},
+				className: clsx("univer-flex univer-h-8 univer-w-full univer-items-center univer-gap-2 univer-rounded-md univer-border-none univer-bg-transparent univer-px-2 univer-text-left univer-text-sm univer-text-gray-700 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-gray-100 dark:hover:!univer-bg-gray-800", { "univer-bg-primary-50 univer-text-primary-600 dark:!univer-bg-gray-800 dark:!univer-text-primary-300": option.value === props.value }),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "univer-flex univer-size-4 univer-items-center univer-justify-center",
+					children: option.icon
+				}), /* @__PURE__ */ jsx("span", {
+					className: "univer-flex-1",
+					children: option.label
+				})]
+			}, option.value))
+		}),
+		children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Tooltip, {
+			title: props.title,
+			placement: "bottom",
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: clsx("univer-flex univer-h-6 univer-min-w-9 univer-items-center univer-justify-center univer-gap-1 univer-rounded-md univer-border-none univer-bg-transparent univer-px-1.5 univer-text-sm univer-text-gray-700 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-gray-100 dark:hover:!univer-bg-gray-700", { "univer-bg-gray-100 univer-text-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-primary-300": open }),
+				children: [activeOption.icon, /* @__PURE__ */ jsx(MoreDownIcon, { className: "univer-text-xs" })]
+			})
+		}) })
+	});
+}
+function DocImageFloatingToolbar(props) {
+	var _univerInstanceServic, _wrappingStyleOptions, _wrappingStyleOptions2;
+	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
+	const documentDataModel = (_univerInstanceServic = useDependency(IUniverInstanceService).getUnit(props.unitId, UniverInstanceType.UNIVER_DOC)) !== null && _univerInstanceServic !== void 0 ? _univerInstanceServic : void 0;
+	const [wrappingStyle, setWrappingStyle] = useState(() => getWrappingStyle(documentDataModel, props.drawingId));
+	const [hidden, setHidden] = useState(false);
+	const getMenuItem = (label) => props.menuItems.find((item) => item.label === label);
+	const editItem = getMenuItem("drawing-ui.image-popup.edit");
+	const cropItem = getMenuItem("drawing-ui.image-popup.crop");
+	const deleteItem = getMenuItem("drawing-ui.image-popup.delete");
+	const wrappingStyleOptions = [
+		{
+			label: localeService.t("drawing-ui.image-text-wrap.inline"),
+			value: "inline",
+			icon: /* @__PURE__ */ jsx(TextWrapShapeIcon, {})
+		},
+		{
+			label: localeService.t("drawing-ui.image-text-wrap.square"),
+			value: "wrapSquare",
+			icon: /* @__PURE__ */ jsx(TextWrapShapeIcon, {})
+		},
+		{
+			label: localeService.t("drawing-ui.image-text-wrap.topAndBottom"),
+			value: "wrapTopAndBottom",
+			icon: /* @__PURE__ */ jsx(TextWrapShapeIcon, {})
+		},
+		{
+			label: localeService.t("drawing-ui.image-text-wrap.behindText"),
+			value: "behindText",
+			icon: /* @__PURE__ */ jsx(TextWrapShapeIcon, {})
+		},
+		{
+			label: localeService.t("drawing-ui.image-text-wrap.inFrontText"),
+			value: "inFrontOfText",
+			icon: /* @__PURE__ */ jsx(TextWrapShapeIcon, {})
+		}
+	];
+	const executeMenuItem = (item) => {
+		if (!item || item.disable) return;
+		commandService.executeCommand(item.commandId, item.commandParams);
+	};
+	const updateWrappingStyle = (value) => {
+		setWrappingStyle(value);
+		commandService.executeCommand(UPDATE_DOC_DRAWING_WRAPPING_STYLE_COMMAND_ID, {
+			unitId: props.unitId,
+			subUnitId: props.subUnitId,
+			drawings: [{
+				unitId: props.unitId,
+				subUnitId: props.subUnitId,
+				drawingId: props.drawingId
+			}],
+			wrappingStyle: value
+		});
+	};
+	if (hidden) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-u-comp": "doc-image-floating-toolbar",
+		onMouseDown: (event) => {
+			event.stopPropagation();
+			event.preventDefault();
+		},
+		className: clsx("univer-box-border univer-flex univer-items-center univer-rounded univer-bg-white univer-px-1 univer-py-1 univer-shadow-sm dark:!univer-border-gray-700 dark:!univer-bg-gray-900", borderClassName),
+		children: [
+			/* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(ToolbarDropdownButton, {
+				title: (_wrappingStyleOptions = (_wrappingStyleOptions2 = wrappingStyleOptions.find((option) => option.value === wrappingStyle)) === null || _wrappingStyleOptions2 === void 0 ? void 0 : _wrappingStyleOptions2.label) !== null && _wrappingStyleOptions !== void 0 ? _wrappingStyleOptions : localeService.t("drawing-ui.image-text-wrap.inline"),
+				value: wrappingStyle,
+				options: wrappingStyleOptions,
+				onChange: updateWrappingStyle
+			}) }),
+			/* @__PURE__ */ jsx(Divider, {}),
+			/* @__PURE__ */ jsxs(ToolbarGroup, { children: [/* @__PURE__ */ jsx(ToolbarButton, {
+				title: editItem ? localeService.t(editItem.label) : localeService.t("drawing-ui.image-popup.edit"),
+				disabled: !editItem || editItem.disable,
+				onClick: () => {
+					setHidden(true);
+					executeMenuItem(editItem);
+				},
+				children: /* @__PURE__ */ jsx(DocSettingIcon, {})
+			}), /* @__PURE__ */ jsx(ToolbarButton, {
+				title: cropItem ? localeService.t(cropItem.label) : localeService.t("drawing-ui.image-popup.crop"),
+				disabled: !cropItem || cropItem.disable,
+				onClick: () => executeMenuItem(cropItem),
+				children: /* @__PURE__ */ jsx(CropIcon, {})
+			})] }),
+			/* @__PURE__ */ jsx(Divider, {}),
+			/* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(ToolbarButton, {
+				title: deleteItem ? localeService.t(deleteItem.label) : localeService.t("drawing-ui.image-popup.delete"),
+				disabled: !deleteItem || deleteItem.disable,
+				onClick: () => executeMenuItem(deleteItem),
+				children: /* @__PURE__ */ jsx(DeleteIcon, {})
+			}) })
+		]
+	});
+}
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/decorateParam.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -668,7 +921,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/decorate.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -785,7 +1038,7 @@ function getUpdateParams(objects, drawingManagerService) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/typeof.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -796,7 +1049,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/toPrimitive.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -809,14 +1062,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/defineProperty.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -1498,7 +1751,7 @@ let ImageCropperController = class ImageCropperController extends Disposable {
 			if (!(imageShape instanceof Image)) {
 				this._messageService.show({
 					type: MessageType.Error,
-					content: this._localeService.t("image-cropper.error")
+					content: this._localeService.t("drawing-ui.image-cropper.error")
 				});
 				return;
 			}
@@ -1599,7 +1852,7 @@ let ImageCropperController = class ImageCropperController extends Disposable {
 			if (!(imageShape instanceof Image)) {
 				this._messageService.show({
 					type: MessageType.Error,
-					content: this._localeService.t("image-cropper.error")
+					content: this._localeService.t("drawing-ui.image-cropper.error")
 				});
 				return;
 			}
@@ -2198,42 +2451,42 @@ const DrawingAlign = (props) => {
 	const [alignValue, setAlignValue] = useState("0");
 	const alignOptions = [
 		{
-			label: localeService.t("image-panel.align.default"),
+			label: localeService.t("drawing-ui.image-panel.align.default"),
 			value: "0"
 		},
 		{ options: [
 			{
-				label: localeService.t("image-panel.align.left"),
+				label: localeService.t("drawing-ui.image-panel.align.left"),
 				value: "1"
 			},
 			{
-				label: localeService.t("image-panel.align.center"),
+				label: localeService.t("drawing-ui.image-panel.align.center"),
 				value: "2"
 			},
 			{
-				label: localeService.t("image-panel.align.right"),
+				label: localeService.t("drawing-ui.image-panel.align.right"),
 				value: "3"
 			}
 		] },
 		{ options: [
 			{
-				label: localeService.t("image-panel.align.top"),
+				label: localeService.t("drawing-ui.image-panel.align.top"),
 				value: "4"
 			},
 			{
-				label: localeService.t("image-panel.align.middle"),
+				label: localeService.t("drawing-ui.image-panel.align.middle"),
 				value: "5"
 			},
 			{
-				label: localeService.t("image-panel.align.bottom"),
+				label: localeService.t("drawing-ui.image-panel.align.bottom"),
 				value: "6"
 			}
 		] },
 		{ options: [{
-			label: localeService.t("image-panel.align.horizon"),
+			label: localeService.t("drawing-ui.image-panel.align.horizon"),
 			value: "7"
 		}, {
-			label: localeService.t("image-panel.align.vertical"),
+			label: localeService.t("drawing-ui.image-panel.align.vertical"),
 			value: "8"
 		}] }
 	];
@@ -2248,7 +2501,7 @@ const DrawingAlign = (props) => {
 		className: clsx("univer-relative univer-w-full", { "univer-hidden": !alignShow }),
 		children: [/* @__PURE__ */ jsx("header", {
 			className: "univer-text-gray-600 dark:!univer-text-gray-200",
-			children: /* @__PURE__ */ jsx("div", { children: localeService.t("image-panel.align.title") })
+			children: /* @__PURE__ */ jsx("div", { children: localeService.t("drawing-ui.image-panel.align.title") })
 		}), /* @__PURE__ */ jsx("div", {
 			className: "univer-relative univer-mt-2.5 univer-flex univer-h-full",
 			children: /* @__PURE__ */ jsx("div", {
@@ -2294,7 +2547,7 @@ const DrawingArrange = (props) => {
 		className: clsx("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": !arrangeShow }),
 		children: [/* @__PURE__ */ jsx("header", {
 			className: "univer-text-gray-600 dark:!univer-text-gray-200",
-			children: /* @__PURE__ */ jsx("div", { children: localeService.t("image-panel.arrange.title") })
+			children: /* @__PURE__ */ jsx("div", { children: localeService.t("drawing-ui.image-panel.arrange.title") })
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "univer-grid univer-grid-cols-2 univer-gap-2",
 			children: [
@@ -2302,25 +2555,25 @@ const DrawingArrange = (props) => {
 					onClick: () => {
 						onArrangeBtnClick(ArrangeTypeEnum.forward);
 					},
-					children: [/* @__PURE__ */ jsx(MoveUpIcon, {}), localeService.t("image-panel.arrange.forward")]
+					children: [/* @__PURE__ */ jsx(MoveUpIcon, {}), localeService.t("drawing-ui.image-panel.arrange.forward")]
 				}),
 				/* @__PURE__ */ jsxs(Button, {
 					onClick: () => {
 						onArrangeBtnClick(ArrangeTypeEnum.backward);
 					},
-					children: [/* @__PURE__ */ jsx(MoveDownIcon, {}), localeService.t("image-panel.arrange.backward")]
+					children: [/* @__PURE__ */ jsx(MoveDownIcon, {}), localeService.t("drawing-ui.image-panel.arrange.backward")]
 				}),
 				/* @__PURE__ */ jsxs(Button, {
 					onClick: () => {
 						onArrangeBtnClick(ArrangeTypeEnum.front);
 					},
-					children: [/* @__PURE__ */ jsx(TopmostIcon, {}), localeService.t("image-panel.arrange.front")]
+					children: [/* @__PURE__ */ jsx(TopmostIcon, {}), localeService.t("drawing-ui.image-panel.arrange.front")]
 				}),
 				/* @__PURE__ */ jsxs(Button, {
 					onClick: () => {
 						onArrangeBtnClick(ArrangeTypeEnum.back);
 					},
-					children: [/* @__PURE__ */ jsx(BottomIcon, {}), localeService.t("image-panel.arrange.back")]
+					children: [/* @__PURE__ */ jsx(BottomIcon, {}), localeService.t("drawing-ui.image-panel.arrange.back")]
 				})
 			]
 		})]
@@ -2379,17 +2632,17 @@ const DrawingGroup = (props) => {
 		className: clsx("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": hasGroup === true && groupShow === false || hasGroup === false }),
 		children: [/* @__PURE__ */ jsx("header", {
 			className: "univer-text-gray-600 dark:!univer-text-gray-200",
-			children: /* @__PURE__ */ jsx("div", { children: localeService.t("image-panel.group.title") })
+			children: /* @__PURE__ */ jsx("div", { children: localeService.t("drawing-ui.image-panel.group.title") })
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "univer-flex univer-items-center univer-justify-center univer-gap-2",
 			children: [/* @__PURE__ */ jsxs(Button, {
 				className: clsx({ "univer-hidden": !groupBtnShow }),
 				onClick: onGroupBtnClick,
-				children: [/* @__PURE__ */ jsx(GroupIcon, {}), localeService.t("image-panel.group.group")]
+				children: [/* @__PURE__ */ jsx(GroupIcon, {}), localeService.t("drawing-ui.image-panel.group.group")]
 			}), /* @__PURE__ */ jsxs(Button, {
 				className: clsx({ "univer-hidden": !ungroupBtnShow }),
 				onClick: onUngroupBtnClick,
-				children: [/* @__PURE__ */ jsx(UngroupIcon, {}), localeService.t("image-panel.group.unGroup")]
+				children: [/* @__PURE__ */ jsx(UngroupIcon, {}), localeService.t("drawing-ui.image-panel.group.unGroup")]
 			})]
 		})]
 	});
@@ -2588,12 +2841,12 @@ const DrawingTransform = (props) => {
 		children: [
 			/* @__PURE__ */ jsx("header", {
 				className: "univer-text-gray-600 dark:!univer-text-gray-200",
-				children: /* @__PURE__ */ jsx("div", { children: localeService.t("image-panel.transform.title") })
+				children: /* @__PURE__ */ jsx("div", { children: localeService.t("drawing-ui.image-panel.transform.title") })
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "univer-grid univer-grid-cols-3 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
 				children: [
-					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-panel.transform.width") }), /* @__PURE__ */ jsx(InputNumber, {
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("drawing-ui.image-panel.transform.width") }), /* @__PURE__ */ jsx(InputNumber, {
 						precision: 1,
 						value: width,
 						min: 20,
@@ -2601,7 +2854,7 @@ const DrawingTransform = (props) => {
 							handleWidthChange(val);
 						}
 					})] }),
-					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-panel.transform.height") }), /* @__PURE__ */ jsx(InputNumber, {
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("drawing-ui.image-panel.transform.height") }), /* @__PURE__ */ jsx(InputNumber, {
 						precision: 1,
 						value: height,
 						min: 20,
@@ -2609,7 +2862,7 @@ const DrawingTransform = (props) => {
 							handleHeightChange(val);
 						}
 					})] }),
-					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-panel.transform.lock") }), /* @__PURE__ */ jsx("div", {
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("drawing-ui.image-panel.transform.lock") }), /* @__PURE__ */ jsx("div", {
 						className: "univer-text-center",
 						children: /* @__PURE__ */ jsx(Checkbox, {
 							checked: lockRatio,
@@ -2621,21 +2874,21 @@ const DrawingTransform = (props) => {
 			/* @__PURE__ */ jsxs("div", {
 				className: "univer-grid univer-grid-cols-3 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
 				children: [
-					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-panel.transform.x") }), /* @__PURE__ */ jsx(InputNumber, {
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("drawing-ui.image-panel.transform.x") }), /* @__PURE__ */ jsx(InputNumber, {
 						precision: 1,
 						value: xPosition,
 						onChange: (val) => {
 							handleXChange(val);
 						}
 					})] }),
-					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-panel.transform.y") }), /* @__PURE__ */ jsx(InputNumber, {
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("drawing-ui.image-panel.transform.y") }), /* @__PURE__ */ jsx(InputNumber, {
 						precision: 1,
 						value: yPosition,
 						onChange: (val) => {
 							handleYChange(val);
 						}
 					})] }),
-					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-panel.transform.rotate") }), /* @__PURE__ */ jsx(InputNumber, {
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("drawing-ui.image-panel.transform.rotate") }), /* @__PURE__ */ jsx(InputNumber, {
 						precision: 1,
 						value: rotation,
 						min: RANGE_DRAWING_ROTATION_LIMIT[0],
@@ -2662,7 +2915,7 @@ const ImageCropper = (props) => {
 	const cropStateRef = useRef(false);
 	const cropOptions = [
 		{
-			label: localeService.t("image-panel.crop.mode"),
+			label: localeService.t("drawing-ui.image-panel.crop.mode"),
 			value: "0"
 		},
 		{
@@ -2726,7 +2979,7 @@ const ImageCropper = (props) => {
 		children: [
 			/* @__PURE__ */ jsx("header", {
 				className: "univer-text-gray-600 dark:!univer-text-gray-200",
-				children: /* @__PURE__ */ jsx("div", { children: localeService.t("image-panel.crop.title") })
+				children: /* @__PURE__ */ jsx("div", { children: localeService.t("drawing-ui.image-panel.crop.title") })
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "univer-flex univer-items-center univer-justify-center univer-gap-2",
@@ -2734,7 +2987,7 @@ const ImageCropper = (props) => {
 					onClick: () => {
 						onCropperBtnClick(cropValue);
 					},
-					children: [/* @__PURE__ */ jsx(CreateCopyIcon, {}), localeService.t("image-panel.crop.start")]
+					children: [/* @__PURE__ */ jsx(CreateCopyIcon, {}), localeService.t("drawing-ui.image-panel.crop.start")]
 				}), /* @__PURE__ */ jsx(Select, {
 					value: cropValue,
 					options: cropOptions,
@@ -2833,7 +3086,7 @@ const DrawingCommonPanel = (props) => {
 			className: clsx("univer-h-full", { "univer-hidden": !nullShow }),
 			children: /* @__PURE__ */ jsx("div", {
 				className: "univer-flex univer-h-full univer-items-center univer-justify-center",
-				children: /* @__PURE__ */ jsx("span", { children: localeService.t("image-panel.null") })
+				children: /* @__PURE__ */ jsx("span", { children: localeService.t("drawing-ui.image-panel.null") })
 			})
 		}),
 		/* @__PURE__ */ jsx(DrawingArrange, {