@univerjs/drawing-ui 0.24.0 → 0.25.0

package/lib/cjs/index.js

@@ -322,7 +322,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
@@ -354,7 +354,7 @@ function DrawingAlignContextMenuItemFactory(accessor) {
 		id: DRAWING_ALIGN_CONTEXT_MENU_ID,
 		type: _univerjs_ui.MenuItemType.SUBITEMS,
 		icon: "HorizontallyIcon",
-		title: "image-panel.align.title",
+		title: "drawing-ui.image-panel.align.title",
 		hidden$: getMenuStateByDrawingFocusChangedObservable$$1(accessor)
 	};
 }
@@ -363,7 +363,7 @@ function SetDrawingAlignLeftMenuItemFactory() {
 		id: SetDrawingAlignLeftOperation.id,
 		type: _univerjs_ui.MenuItemType.BUTTON,
 		icon: "LeftJustifyingIcon",
-		title: "image-panel.align.left"
+		title: "drawing-ui.image-panel.align.left"
 	};
 }
 function SetDrawingAlignCenterMenuItemFactory() {
@@ -371,7 +371,7 @@ function SetDrawingAlignCenterMenuItemFactory() {
 		id: SetDrawingAlignCenterOperation.id,
 		type: _univerjs_ui.MenuItemType.BUTTON,
 		icon: "HorizontallyIcon",
-		title: "image-panel.align.center"
+		title: "drawing-ui.image-panel.align.center"
 	};
 }
 function SetDrawingAlignRightMenuItemFactory() {
@@ -379,7 +379,7 @@ function SetDrawingAlignRightMenuItemFactory() {
 		id: SetDrawingAlignRightOperation.id,
 		type: _univerjs_ui.MenuItemType.BUTTON,
 		icon: "RightJustifyingIcon",
-		title: "image-panel.align.right"
+		title: "drawing-ui.image-panel.align.right"
 	};
 }
 function SetDrawingAlignTopMenuItemFactory() {
@@ -387,7 +387,7 @@ function SetDrawingAlignTopMenuItemFactory() {
 		id: SetDrawingAlignTopOperation.id,
 		type: _univerjs_ui.MenuItemType.BUTTON,
 		icon: "AlignTopIcon",
-		title: "image-panel.align.top"
+		title: "drawing-ui.image-panel.align.top"
 	};
 }
 function SetDrawingAlignMiddleMenuItemFactory() {
@@ -395,7 +395,7 @@ function SetDrawingAlignMiddleMenuItemFactory() {
 		id: SetDrawingAlignMiddleOperation.id,
 		type: _univerjs_ui.MenuItemType.BUTTON,
 		icon: "VerticalCenterIcon",
-		title: "image-panel.align.middle"
+		title: "drawing-ui.image-panel.align.middle"
 	};
 }
 function SetDrawingAlignBottomMenuItemFactory() {
@@ -403,7 +403,7 @@ function SetDrawingAlignBottomMenuItemFactory() {
 		id: SetDrawingAlignBottomOperation.id,
 		type: _univerjs_ui.MenuItemType.BUTTON,
 		icon: "AlignBottomIcon",
-		title: "image-panel.align.bottom"
+		title: "drawing-ui.image-panel.align.bottom"
 	};
 }
 function SetDrawingAlignHorizonMenuItemFactory() {
@@ -411,7 +411,7 @@ function SetDrawingAlignHorizonMenuItemFactory() {
 		id: SetDrawingAlignHorizonOperation.id,
 		type: _univerjs_ui.MenuItemType.BUTTON,
 		icon: "HorizontallyIcon",
-		title: "image-panel.align.horizon"
+		title: "drawing-ui.image-panel.align.horizon"
 	};
 }
 function SetDrawingAlignVerticalMenuItemFactory() {
@@ -419,7 +419,7 @@ function SetDrawingAlignVerticalMenuItemFactory() {
 		id: SetDrawingAlignVerticalOperation.id,
 		type: _univerjs_ui.MenuItemType.BUTTON,
 		icon: "VerticalCenterIcon",
-		title: "image-panel.align.vertical"
+		title: "drawing-ui.image-panel.align.vertical"
 	};
 }
 
@@ -431,7 +431,7 @@ function DrawingArrangeContextMenuItemFactory() {
 		id: DRAWING_ARRANGE_CONTEXT_MENU_ID,
 		type: _univerjs_ui.MenuItemType.SUBITEMS,
 		icon: "TopmostIcon",
-		title: "image-panel.arrange.title"
+		title: "drawing-ui.image-panel.arrange.title"
 	};
 }
 function SetDrawingArrangeFrontMenuItemFactory() {
@@ -439,7 +439,7 @@ function SetDrawingArrangeFrontMenuItemFactory() {
 		id: SetDrawingArrangeFrontOperation.id,
 		type: _univerjs_ui.MenuItemType.BUTTON,
 		icon: "TopmostIcon",
-		title: "image-panel.arrange.front"
+		title: "drawing-ui.image-panel.arrange.front"
 	};
 }
 function SetDrawingArrangeForwardMenuItemFactory() {
@@ -447,7 +447,7 @@ function SetDrawingArrangeForwardMenuItemFactory() {
 		id: SetDrawingArrangeForwardOperation.id,
 		type: _univerjs_ui.MenuItemType.BUTTON,
 		icon: "MoveUpIcon",
-		title: "image-panel.arrange.forward"
+		title: "drawing-ui.image-panel.arrange.forward"
 	};
 }
 function SetDrawingArrangeBackMenuItemFactory() {
@@ -455,7 +455,7 @@ function SetDrawingArrangeBackMenuItemFactory() {
 		id: SetDrawingArrangeBackOperation.id,
 		type: _univerjs_ui.MenuItemType.BUTTON,
 		icon: "BottomIcon",
-		title: "image-panel.arrange.back"
+		title: "drawing-ui.image-panel.arrange.back"
 	};
 }
 function SetDrawingArrangeBackwardMenuItemFactory() {
@@ -463,7 +463,7 @@ function SetDrawingArrangeBackwardMenuItemFactory() {
 		id: SetDrawingArrangeBackwardOperation.id,
 		type: _univerjs_ui.MenuItemType.BUTTON,
 		icon: "MoveDownIcon",
-		title: "image-panel.arrange.backward"
+		title: "drawing-ui.image-panel.arrange.backward"
 	};
 }
 
@@ -496,7 +496,7 @@ function DrawingGroupContextMenuItemFactory(accessor) {
 		id: DRAWING_GROUP_CONTEXT_MENU_ID,
 		type: _univerjs_ui.MenuItemType.SUBITEMS,
 		icon: "GroupIcon",
-		title: "image-panel.group.title",
+		title: "drawing-ui.image-panel.group.title",
 		hidden$: getMenuStateByDrawingFocusChangedObservable$(accessor)
 	};
 }
@@ -505,7 +505,7 @@ function SetDrawingGroupMenuItemFactory(accessor) {
 		id: SetDrawingGroupOperation.id,
 		type: _univerjs_ui.MenuItemType.BUTTON,
 		icon: "GroupIcon",
-		title: "image-panel.group.group",
+		title: "drawing-ui.image-panel.group.group",
 		disabled$: getMenuStateByDrawingFocusChangedObservable$(accessor, "group")
 	};
 }
@@ -514,7 +514,7 @@ function CancelDrawingGroupMenuItemFactory(accessor) {
 		id: CancelDrawingGroupOperation.id,
 		type: _univerjs_ui.MenuItemType.BUTTON,
 		icon: "UngroupIcon",
-		title: "image-panel.group.unGroup",
+		title: "drawing-ui.image-panel.group.unGroup",
 		disabled$: getMenuStateByDrawingFocusChangedObservable$(accessor, "unGroup")
 	};
 }
@@ -614,10 +614,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__ */ (0, react_jsx_runtime.jsx)(DocImageFloatingToolbar, {
+		menuItems,
+		unitId: popup.extraProps.unitId,
+		subUnitId: popup.extraProps.subUnitId,
+		drawingId: popup.extraProps.drawingId
+	});
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const [visible, setVisible] = (0, react.useState)(false);
@@ -659,9 +665,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 === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE) return drawing.behindDoc === _univerjs_core.BooleanNumber.TRUE ? "behindText" : "inFrontOfText";
+	if (drawing.layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_SQUARE) return "wrapSquare";
+	if (drawing.layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM) return "wrapTopAndBottom";
+	return "inline";
+}
+function Divider() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
+		title: props.title,
+		placement: "bottom",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			disabled: props.disabled,
+			onClick: props.onClick,
+			className: (0, _univerjs_design.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__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		viewBox: "0 0 20 20",
+		width: "1em",
+		height: "1em",
+		fill: "none",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: "M2.5 4.5H8.2",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: "M11.8 4.5H17.5",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: "M2.5 10H5.7",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: "M14.3 10H17.5",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: "M2.5 15.5H8.2",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: "M11.8 15.5H17.5",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+				x: "6.8",
+				y: "7",
+				width: "6.4",
+				height: "6",
+				rx: "1",
+				stroke: "currentColor",
+				strokeWidth: "1.4"
+			})
+		]
+	});
+}
+function CropIcon() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		viewBox: "0 0 20 20",
+		width: "1em",
+		height: "1em",
+		fill: "none",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: "M5 2.8V12.5C5 13.9 6.1 15 7.5 15H17.2",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: "M2.8 5H12.5C13.9 5 15 6.1 15 7.5V17.2",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.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] = (0, react.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
+		open,
+		onOpenChange: setOpen,
+		overlay: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				onClick: () => {
+					props.onChange(option.value);
+					setOpen(false);
+				},
+				className: (0, _univerjs_design.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__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "univer-flex univer-size-4 univer-items-center univer-justify-center",
+					children: option.icon
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "univer-flex-1",
+					children: option.label
+				})]
+			}, option.value))
+		}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
+			title: props.title,
+			placement: "bottom",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				className: (0, _univerjs_design.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "univer-text-xs" })]
+			})
+		}) })
+	});
+}
+function DocImageFloatingToolbar(props) {
+	var _univerInstanceServic, _wrappingStyleOptions, _wrappingStyleOptions2;
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const documentDataModel = (_univerInstanceServic = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService).getUnit(props.unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC)) !== null && _univerInstanceServic !== void 0 ? _univerInstanceServic : void 0;
+	const [wrappingStyle, setWrappingStyle] = (0, react.useState)(() => getWrappingStyle(documentDataModel, props.drawingId));
+	const [hidden, setHidden] = (0, react.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__ */ (0, react_jsx_runtime.jsx)(TextWrapShapeIcon, {})
+		},
+		{
+			label: localeService.t("drawing-ui.image-text-wrap.square"),
+			value: "wrapSquare",
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextWrapShapeIcon, {})
+		},
+		{
+			label: localeService.t("drawing-ui.image-text-wrap.topAndBottom"),
+			value: "wrapTopAndBottom",
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextWrapShapeIcon, {})
+		},
+		{
+			label: localeService.t("drawing-ui.image-text-wrap.behindText"),
+			value: "behindText",
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextWrapShapeIcon, {})
+		},
+		{
+			label: localeService.t("drawing-ui.image-text-wrap.inFrontText"),
+			value: "inFrontOfText",
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-u-comp": "doc-image-floating-toolbar",
+		onMouseDown: (event) => {
+			event.stopPropagation();
+			event.preventDefault();
+		},
+		className: (0, _univerjs_design.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", _univerjs_design.borderClassName),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(Divider, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToolbarGroup, { children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DocSettingIcon, {})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+				title: cropItem ? localeService.t(cropItem.label) : localeService.t("drawing-ui.image-popup.crop"),
+				disabled: !cropItem || cropItem.disable,
+				onClick: () => executeMenuItem(cropItem),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CropIcon, {})
+			})] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Divider, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+				title: deleteItem ? localeService.t(deleteItem.label) : localeService.t("drawing-ui.image-popup.delete"),
+				disabled: !deleteItem || deleteItem.disable,
+				onClick: () => executeMenuItem(deleteItem),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.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);
@@ -669,7 +922,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);
@@ -786,7 +1039,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) {
@@ -797,7 +1050,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];
@@ -810,14 +1063,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,
@@ -1499,7 +1752,7 @@ let ImageCropperController = class ImageCropperController extends _univerjs_core
 			if (!(imageShape instanceof _univerjs_engine_render.Image)) {
 				this._messageService.show({
 					type: _univerjs_design.MessageType.Error,
-					content: this._localeService.t("image-cropper.error")
+					content: this._localeService.t("drawing-ui.image-cropper.error")
 				});
 				return;
 			}
@@ -1600,7 +1853,7 @@ let ImageCropperController = class ImageCropperController extends _univerjs_core
 			if (!(imageShape instanceof _univerjs_engine_render.Image)) {
 				this._messageService.show({
 					type: _univerjs_design.MessageType.Error,
-					content: this._localeService.t("image-cropper.error")
+					content: this._localeService.t("drawing-ui.image-cropper.error")
 				});
 				return;
 			}
@@ -2199,42 +2452,42 @@ const DrawingAlign = (props) => {
 	const [alignValue, setAlignValue] = (0, react.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"
 		}] }
 	];
@@ -2249,7 +2502,7 @@ const DrawingAlign = (props) => {
 		className: (0, _univerjs_design.clsx)("univer-relative univer-w-full", { "univer-hidden": !alignShow }),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
 			className: "univer-text-gray-600 dark:!univer-text-gray-200",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("image-panel.align.title") })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("drawing-ui.image-panel.align.title") })
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-relative univer-mt-2.5 univer-flex univer-h-full",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2295,7 +2548,7 @@ const DrawingArrange = (props) => {
 		className: (0, _univerjs_design.clsx)("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": !arrangeShow }),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
 			className: "univer-text-gray-600 dark:!univer-text-gray-200",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("image-panel.arrange.title") })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("drawing-ui.image-panel.arrange.title") })
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "univer-grid univer-grid-cols-2 univer-gap-2",
 			children: [
@@ -2303,25 +2556,25 @@ const DrawingArrange = (props) => {
 					onClick: () => {
 						onArrangeBtnClick(_univerjs_core.ArrangeTypeEnum.forward);
 					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoveUpIcon, {}), localeService.t("image-panel.arrange.forward")]
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoveUpIcon, {}), localeService.t("drawing-ui.image-panel.arrange.forward")]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
 					onClick: () => {
 						onArrangeBtnClick(_univerjs_core.ArrangeTypeEnum.backward);
 					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoveDownIcon, {}), localeService.t("image-panel.arrange.backward")]
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoveDownIcon, {}), localeService.t("drawing-ui.image-panel.arrange.backward")]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
 					onClick: () => {
 						onArrangeBtnClick(_univerjs_core.ArrangeTypeEnum.front);
 					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopmostIcon, {}), localeService.t("image-panel.arrange.front")]
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopmostIcon, {}), localeService.t("drawing-ui.image-panel.arrange.front")]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
 					onClick: () => {
 						onArrangeBtnClick(_univerjs_core.ArrangeTypeEnum.back);
 					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BottomIcon, {}), localeService.t("image-panel.arrange.back")]
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BottomIcon, {}), localeService.t("drawing-ui.image-panel.arrange.back")]
 				})
 			]
 		})]
@@ -2380,17 +2633,17 @@ const DrawingGroup = (props) => {
 		className: (0, _univerjs_design.clsx)("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": hasGroup === true && groupShow === false || hasGroup === false }),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
 			className: "univer-text-gray-600 dark:!univer-text-gray-200",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("image-panel.group.title") })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("drawing-ui.image-panel.group.title") })
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "univer-flex univer-items-center univer-justify-center univer-gap-2",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
 				className: (0, _univerjs_design.clsx)({ "univer-hidden": !groupBtnShow }),
 				onClick: onGroupBtnClick,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupIcon, {}), localeService.t("image-panel.group.group")]
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupIcon, {}), localeService.t("drawing-ui.image-panel.group.group")]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
 				className: (0, _univerjs_design.clsx)({ "univer-hidden": !ungroupBtnShow }),
 				onClick: onUngroupBtnClick,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UngroupIcon, {}), localeService.t("image-panel.group.unGroup")]
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UngroupIcon, {}), localeService.t("drawing-ui.image-panel.group.unGroup")]
 			})]
 		})]
 	});
@@ -2589,12 +2842,12 @@ const DrawingTransform = (props) => {
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
 				className: "univer-text-gray-600 dark:!univer-text-gray-200",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("image-panel.transform.title") })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("drawing-ui.image-panel.transform.title") })
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "univer-grid univer-grid-cols-3 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("image-panel.transform.width") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("drawing-ui.image-panel.transform.width") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
 						precision: 1,
 						value: width,
 						min: 20,
@@ -2602,7 +2855,7 @@ const DrawingTransform = (props) => {
 							handleWidthChange(val);
 						}
 					})] }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("image-panel.transform.height") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("drawing-ui.image-panel.transform.height") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
 						precision: 1,
 						value: height,
 						min: 20,
@@ -2610,7 +2863,7 @@ const DrawingTransform = (props) => {
 							handleHeightChange(val);
 						}
 					})] }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("image-panel.transform.lock") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("drawing-ui.image-panel.transform.lock") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "univer-text-center",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
 							checked: lockRatio,
@@ -2622,21 +2875,21 @@ const DrawingTransform = (props) => {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "univer-grid univer-grid-cols-3 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("image-panel.transform.x") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("drawing-ui.image-panel.transform.x") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
 						precision: 1,
 						value: xPosition,
 						onChange: (val) => {
 							handleXChange(val);
 						}
 					})] }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("image-panel.transform.y") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("drawing-ui.image-panel.transform.y") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
 						precision: 1,
 						value: yPosition,
 						onChange: (val) => {
 							handleYChange(val);
 						}
 					})] }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("image-panel.transform.rotate") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("drawing-ui.image-panel.transform.rotate") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
 						precision: 1,
 						value: rotation,
 						min: RANGE_DRAWING_ROTATION_LIMIT[0],
@@ -2663,7 +2916,7 @@ const ImageCropper = (props) => {
 	const cropStateRef = (0, react.useRef)(false);
 	const cropOptions = [
 		{
-			label: localeService.t("image-panel.crop.mode"),
+			label: localeService.t("drawing-ui.image-panel.crop.mode"),
 			value: "0"
 		},
 		{
@@ -2727,7 +2980,7 @@ const ImageCropper = (props) => {
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
 				className: "univer-text-gray-600 dark:!univer-text-gray-200",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("image-panel.crop.title") })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("drawing-ui.image-panel.crop.title") })
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "univer-flex univer-items-center univer-justify-center univer-gap-2",
@@ -2735,7 +2988,7 @@ const ImageCropper = (props) => {
 					onClick: () => {
 						onCropperBtnClick(cropValue);
 					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CreateCopyIcon, {}), localeService.t("image-panel.crop.start")]
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CreateCopyIcon, {}), localeService.t("drawing-ui.image-panel.crop.start")]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
 					value: cropValue,
 					options: cropOptions,
@@ -2834,7 +3087,7 @@ const DrawingCommonPanel = (props) => {
 			className: (0, _univerjs_design.clsx)("univer-h-full", { "univer-hidden": !nullShow }),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "univer-flex univer-h-full univer-items-center univer-justify-center",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("image-panel.null") })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("drawing-ui.image-panel.null") })
 			})
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawingArrange, {