@univerjs/drawing-ui 0.25.0 → 1.0.0-alpha.0

package/lib/index.js

@@ -1,12 +1,12 @@
 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, 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, Dropdown, DropdownMenu, InputNumber, MessageType, Select, Tooltip, borderClassName, clsx } from "@univerjs/design";
+import { AutofillDoubleIcon, BottomIcon, CreateCopyIcon, CropIcon, DeleteIcon, DocSettingIcon, GroupIcon, MoreDownIcon, MoveDownIcon, MoveUpIcon, TextWrapShapeIcon, TopmostIcon, UngroupIcon } from "@univerjs/icons";
+import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IDialogService, IGalleryService, IMenuManagerService, IMessageService, IconManager, MenuItemType, useDependency, useObservable } from "@univerjs/ui";
+import { Button, Checkbox, Dropdown, DropdownMenu, InputNumber, MessageType, Select, Separator, Tooltip, borderClassName, clsx } from "@univerjs/design";
 import { useEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { BehaviorSubject, Observable, bufferTime, filter, map, of, switchMap } from "rxjs";
 
 //#region src/commands/operations/drawing-align.operation.ts
 /**
@@ -321,7 +321,7 @@ function getCurrentUnitInfo(currentUniverService, propUnitId) {
 //#endregion
 //#region package.json
 var name = "@univerjs/drawing-ui";
-var version = "0.25.0";
+var version = "1.0.0-alpha.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -330,269 +330,258 @@ const configSymbol = Symbol(DRAWING_UI_PLUGIN_CONFIG_KEY);
 const defaultPluginConfig = {};
 
 //#endregion
-//#region src/menu/align.menu.ts
-const getMenuStateByDrawingFocusChangedObservable$$1 = (accessor) => {
-	const drawingManagerService = accessor.get(IDrawingManagerService);
-	return new Observable((subscriber) => {
-		const update = (drawings) => {
-			if (!drawings || drawings.length === 0) return subscriber.next(true);
-			if (drawings.length < 2) return subscriber.next(true);
-			subscriber.next(false);
-		};
-		const subscription = drawingManagerService.focus$.subscribe((drawings) => {
-			if (!drawings || drawings.length === 0) return subscriber.next(true);
-			update(drawings);
-		});
-		update(drawingManagerService.getFocusDrawings());
-		return () => subscription.unsubscribe();
+//#region src/views/image-popup-menu/component-name.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const COMPONENT_IMAGE_POPUP_MENU = "COMPONENT_IMAGE_POPUP_MENU";
+
+//#endregion
+//#region src/views/image-popup-menu/ImagePopupMenu.tsx
+function ImagePopupMenu(props) {
+	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 DRAWING_ALIGN_CONTEXT_MENU_ID = "contextMenu.drawing-align";
-function DrawingAlignContextMenuItemFactory(accessor) {
-	return {
-		id: DRAWING_ALIGN_CONTEXT_MENU_ID,
-		type: MenuItemType.SUBITEMS,
-		icon: "HorizontallyIcon",
-		title: "drawing-ui.image-panel.align.title",
-		hidden$: getMenuStateByDrawingFocusChangedObservable$$1(accessor)
+	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
+	const [visible, setVisible] = useState(false);
+	const [isHovered, setHovered] = useState(false);
+	const handleMouseEnter = () => {
+		setHovered(true);
 	};
-}
-function SetDrawingAlignLeftMenuItemFactory() {
-	return {
-		id: SetDrawingAlignLeftOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "LeftJustifyingIcon",
-		title: "drawing-ui.image-panel.align.left"
+	const handleMouseLeave = () => {
+		setHovered(false);
 	};
-}
-function SetDrawingAlignCenterMenuItemFactory() {
-	return {
-		id: SetDrawingAlignCenterOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "HorizontallyIcon",
-		title: "drawing-ui.image-panel.align.center"
+	const onVisibleChange = (visible) => {
+		setVisible(visible);
 	};
-}
-function SetDrawingAlignRightMenuItemFactory() {
-	return {
-		id: SetDrawingAlignRightOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "RightJustifyingIcon",
-		title: "drawing-ui.image-panel.align.right"
+	const handleClick = (item) => {
+		commandService.executeCommand(item.commandId, item.commandParams);
+		setVisible(false);
 	};
+	const showMore = visible || isHovered;
+	return /* @__PURE__ */ jsx("div", {
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		children: /* @__PURE__ */ jsx(DropdownMenu, {
+			align: "start",
+			items: menuItems.map((item) => ({
+				type: "item",
+				children: localeService.t(item.label),
+				disabled: item.disable,
+				onSelect: () => handleClick(item)
+			})),
+			open: visible,
+			onOpenChange: onVisibleChange,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: clsx("univer-flex univer-items-center univer-gap-2 univer-rounded univer-p-1 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-800", borderClassName, {
+					"univer-bg-gray-100 dark:!univer-bg-gray-800": visible,
+					"univer-bg-white dark:!univer-bg-gray-900": !visible
+				}),
+				children: [/* @__PURE__ */ jsx(AutofillDoubleIcon, { className: "univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-white" }), showMore && /* @__PURE__ */ jsx(MoreDownIcon, { className: "dark:!univer-text-white" })]
+			})
+		})
+	});
 }
-function SetDrawingAlignTopMenuItemFactory() {
-	return {
-		id: SetDrawingAlignTopOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "AlignTopIcon",
-		title: "drawing-ui.image-panel.align.top"
-	};
+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 SetDrawingAlignMiddleMenuItemFactory() {
-	return {
-		id: SetDrawingAlignMiddleOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "VerticalCenterIcon",
-		title: "drawing-ui.image-panel.align.middle"
-	};
+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 SetDrawingAlignBottomMenuItemFactory() {
-	return {
-		id: SetDrawingAlignBottomOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "AlignBottomIcon",
-		title: "drawing-ui.image-panel.align.bottom"
-	};
+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 SetDrawingAlignHorizonMenuItemFactory() {
-	return {
-		id: SetDrawingAlignHorizonOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "HorizontallyIcon",
-		title: "drawing-ui.image-panel.align.horizon"
-	};
+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 SetDrawingAlignVerticalMenuItemFactory() {
-	return {
-		id: SetDrawingAlignVerticalOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "VerticalCenterIcon",
-		title: "drawing-ui.image-panel.align.vertical"
+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);
 	};
-}
-
-//#endregion
-//#region src/menu/arrange.menu.ts
-const DRAWING_ARRANGE_CONTEXT_MENU_ID = "contextMenu.drawing-arrange";
-function DrawingArrangeContextMenuItemFactory() {
-	return {
-		id: DRAWING_ARRANGE_CONTEXT_MENU_ID,
-		type: MenuItemType.SUBITEMS,
-		icon: "TopmostIcon",
-		title: "drawing-ui.image-panel.arrange.title"
-	};
-}
-function SetDrawingArrangeFrontMenuItemFactory() {
-	return {
-		id: SetDrawingArrangeFrontOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "TopmostIcon",
-		title: "drawing-ui.image-panel.arrange.front"
-	};
-}
-function SetDrawingArrangeForwardMenuItemFactory() {
-	return {
-		id: SetDrawingArrangeForwardOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "MoveUpIcon",
-		title: "drawing-ui.image-panel.arrange.forward"
-	};
-}
-function SetDrawingArrangeBackMenuItemFactory() {
-	return {
-		id: SetDrawingArrangeBackOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "BottomIcon",
-		title: "drawing-ui.image-panel.arrange.back"
-	};
-}
-function SetDrawingArrangeBackwardMenuItemFactory() {
-	return {
-		id: SetDrawingArrangeBackwardOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "MoveDownIcon",
-		title: "drawing-ui.image-panel.arrange.backward"
+	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(Separator, { orientation: "vertical" }),
+			/* @__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(Separator, { orientation: "vertical" }),
+			/* @__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 src/menu/group.menu.ts
-const getMenuStateByDrawingFocusChangedObservable$ = (accessor, type) => {
-	const drawingManagerService = accessor.get(IDrawingManagerService);
-	return new Observable((subscriber) => {
-		const update = (drawings) => {
-			if (!drawings || drawings.length === 0) return subscriber.next(true);
-			if (type === "group") {
-				if (drawings.length < 2) return subscriber.next(true);
-				if (!drawings.every((drawing) => DRAWING_GROUP_TYPES.includes(drawing.drawingType))) return subscriber.next(true);
-			} else if (type === "unGroup") {
-				if (drawings.filter((drawing) => drawing.drawingType === DrawingTypeEnum.DRAWING_GROUP).length === 0) return subscriber.next(true);
-			} else if (!drawings.every((drawing) => DRAWING_GROUP_TYPES.includes(drawing.drawingType))) return subscriber.next(true);
-			subscriber.next(false);
-		};
-		const subscription = drawingManagerService.focus$.subscribe((drawings) => {
-			if (!drawings || drawings.length === 0) return subscriber.next(true);
-			update(drawings);
-		});
-		update(drawingManagerService.getFocusDrawings());
-		return () => subscription.unsubscribe();
-	});
-};
-const DRAWING_GROUP_CONTEXT_MENU_ID = "contextMenu.drawing-group";
-function DrawingGroupContextMenuItemFactory(accessor) {
-	return {
-		id: DRAWING_GROUP_CONTEXT_MENU_ID,
-		type: MenuItemType.SUBITEMS,
-		icon: "GroupIcon",
-		title: "drawing-ui.image-panel.group.title",
-		hidden$: getMenuStateByDrawingFocusChangedObservable$(accessor)
-	};
-}
-function SetDrawingGroupMenuItemFactory(accessor) {
-	return {
-		id: SetDrawingGroupOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "GroupIcon",
-		title: "drawing-ui.image-panel.group.group",
-		disabled$: getMenuStateByDrawingFocusChangedObservable$(accessor, "group")
-	};
-}
-function CancelDrawingGroupMenuItemFactory(accessor) {
-	return {
-		id: CancelDrawingGroupOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "UngroupIcon",
-		title: "drawing-ui.image-panel.group.unGroup",
-		disabled$: getMenuStateByDrawingFocusChangedObservable$(accessor, "unGroup")
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
+function __decorateParam(paramIndex, decorator) {
+	return function(target, key) {
+		decorator(target, key, paramIndex);
 	};
 }
 
 //#endregion
-//#region src/menu/schema.ts
-const menuSchema = { [ContextMenuPosition.DRAWING]: { [ContextMenuGroup.OTHERS]: {
-	[DRAWING_GROUP_CONTEXT_MENU_ID]: {
-		order: 1,
-		menuItemFactory: DrawingGroupContextMenuItemFactory,
-		[SetDrawingGroupOperation.id]: {
-			order: 0,
-			menuItemFactory: SetDrawingGroupMenuItemFactory
-		},
-		[CancelDrawingGroupOperation.id]: {
-			order: 1,
-			menuItemFactory: CancelDrawingGroupMenuItemFactory
-		}
-	},
-	[DRAWING_ARRANGE_CONTEXT_MENU_ID]: {
-		order: 2,
-		menuItemFactory: DrawingArrangeContextMenuItemFactory,
-		[SetDrawingArrangeFrontOperation.id]: {
-			order: 0,
-			menuItemFactory: SetDrawingArrangeFrontMenuItemFactory
-		},
-		[SetDrawingArrangeForwardOperation.id]: {
-			order: 1,
-			menuItemFactory: SetDrawingArrangeForwardMenuItemFactory
-		},
-		[SetDrawingArrangeBackOperation.id]: {
-			order: 2,
-			menuItemFactory: SetDrawingArrangeBackMenuItemFactory
-		},
-		[SetDrawingArrangeBackwardOperation.id]: {
-			order: 3,
-			menuItemFactory: SetDrawingArrangeBackwardMenuItemFactory
-		}
-	},
-	[DRAWING_ALIGN_CONTEXT_MENU_ID]: {
-		order: 3,
-		menuItemFactory: DrawingAlignContextMenuItemFactory,
-		[SetDrawingAlignLeftOperation.id]: {
-			order: 0,
-			menuItemFactory: SetDrawingAlignLeftMenuItemFactory
-		},
-		[SetDrawingAlignCenterOperation.id]: {
-			order: 1,
-			menuItemFactory: SetDrawingAlignCenterMenuItemFactory
-		},
-		[SetDrawingAlignRightOperation.id]: {
-			order: 2,
-			menuItemFactory: SetDrawingAlignRightMenuItemFactory
-		},
-		[SetDrawingAlignTopOperation.id]: {
-			order: 3,
-			menuItemFactory: SetDrawingAlignTopMenuItemFactory
-		},
-		[SetDrawingAlignMiddleOperation.id]: {
-			order: 4,
-			menuItemFactory: SetDrawingAlignMiddleMenuItemFactory
-		},
-		[SetDrawingAlignBottomOperation.id]: {
-			order: 5,
-			menuItemFactory: SetDrawingAlignBottomMenuItemFactory
-		},
-		[SetDrawingAlignHorizonOperation.id]: {
-			order: 6,
-			menuItemFactory: SetDrawingAlignHorizonMenuItemFactory
-		},
-		[SetDrawingAlignVerticalOperation.id]: {
-			order: 7,
-			menuItemFactory: SetDrawingAlignVerticalMenuItemFactory
-		}
-	}
-} } };
+//#region \0@oxc-project+runtime@0.137.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);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
 
 //#endregion
-//#region src/views/image-popup-menu/component-name.ts
+//#region src/controllers/components.controller.ts
 /**
 * Copyright 2023-present DreamNum Co., Ltd.
 *
@@ -608,403 +597,315 @@ const menuSchema = { [ContextMenuPosition.DRAWING]: { [ContextMenuGroup.OTHERS]:
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-const COMPONENT_IMAGE_POPUP_MENU = "COMPONENT_IMAGE_POPUP_MENU";
+let ComponentsController = class ComponentsController extends Disposable {
+	constructor(_componentManager, _iconManager) {
+		super();
+		this._componentManager = _componentManager;
+		this._iconManager = _iconManager;
+		this._registerComponents();
+		this._registerIcons();
+	}
+	_registerComponents() {
+		[[COMPONENT_IMAGE_POPUP_MENU, ImagePopupMenu]].forEach(([key, component]) => {
+			this.disposeWithMe(this._componentManager.register(key, component));
+		});
+	}
+	_registerIcons() {
+		this.disposeWithMe(this._iconManager.register({
+			BottomIcon,
+			GroupIcon,
+			MoveDownIcon,
+			MoveUpIcon,
+			TopmostIcon,
+			UngroupIcon
+		}));
+	}
+};
+ComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager)), __decorateParam(1, Inject(IconManager))], ComponentsController);
 
 //#endregion
-//#region src/views/image-popup-menu/ImagePopupMenu.tsx
-function ImagePopupMenu(props) {
-	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);
-	const [isHovered, setHovered] = useState(false);
-	const handleMouseEnter = () => {
-		setHovered(true);
-	};
-	const handleMouseLeave = () => {
-		setHovered(false);
-	};
-	const onVisibleChange = (visible) => {
-		setVisible(visible);
-	};
-	const handleClick = (item) => {
-		commandService.executeCommand(item.commandId, item.commandParams);
-		setVisible(false);
-	};
-	const showMore = visible || isHovered;
-	return /* @__PURE__ */ jsx("div", {
-		onMouseEnter: handleMouseEnter,
-		onMouseLeave: handleMouseLeave,
-		children: /* @__PURE__ */ jsx(DropdownMenu, {
-			align: "start",
-			items: menuItems.map((item) => ({
-				type: "item",
-				children: localeService.t(item.label),
-				disabled: item.disable,
-				onSelect: () => handleClick(item)
-			})),
-			open: visible,
-			onOpenChange: onVisibleChange,
-			children: /* @__PURE__ */ jsxs("div", {
-				className: clsx("univer-flex univer-items-center univer-gap-2 univer-rounded univer-p-1 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-800", borderClassName, {
-					"univer-bg-gray-100 dark:!univer-bg-gray-800": visible,
-					"univer-bg-white dark:!univer-bg-gray-900": !visible
-				}),
-				children: [/* @__PURE__ */ jsx(AutofillDoubleIcon, { className: "univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-white" }), showMore && /* @__PURE__ */ jsx(MoreDownIcon, { className: "dark:!univer-text-white" })]
-			})
-		})
-	});
-}
-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" })]
-			})
-		}) })
-	});
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
 }
-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.137.0/helpers/esm/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorateParam.js
-function __decorateParam(paramIndex, decorator) {
-	return function(target, key) {
-		decorator(target, key, paramIndex);
-	};
+//#region \0@oxc-project+runtime@0.137.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.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);
-	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-	return c > 3 && r && Object.defineProperty(target, key, r), r;
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
 }
 
 //#endregion
-//#region src/controllers/drawing-ui.controller.ts
+//#region src/services/drawing-image-clip.service.ts
+const IMAGE_CLIP_SHAPE_PICKER_COMPONENT = "sheet.image-clip.shape.picker.component";
 /**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
+* Bridge service that enables shape-based image clipping.
+* This service lives in the open-source drawing-ui package and delegates
+* to a registered clip implementation (provided by pro engine-shape package).
 *
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
+* When no delegate is registered, applyShapeClip returns false and images render normally without shape clipping.
 */
-let DrawingUIController = class DrawingUIController extends Disposable {
-	constructor(_componentManager, _commandService, _menuManagerService) {
+var DrawingImageClipService = class extends Disposable {
+	constructor() {
 		super();
-		this._componentManager = _componentManager;
-		this._commandService = _commandService;
-		this._menuManagerService = _menuManagerService;
-		this._init();
+		_defineProperty(this, "_clipDelegate", null);
+		_defineProperty(this, "_canUseShapeClip$", new BehaviorSubject(false));
+		_defineProperty(this, "canUseShapeClip$", this._canUseShapeClip$.asObservable());
 	}
-	_init() {
-		this._initMenus();
-		this._initCommands();
-		this._initComponents();
+	setCanUseShapeClip(canUse) {
+		this._canUseShapeClip$.next(canUse);
 	}
-	_initMenus() {
-		this._menuManagerService.mergeMenu(menuSchema);
+	/**
+	* Register a clip delegate that knows how to build shape clip paths.
+	* Typically called by the pro-side plugin with a ShapeModel-based implementation.
+	* @returns IDisposable to unregister the delegate
+	*/
+	registerClipDelegate(delegate) {
+		this._clipDelegate = delegate;
+		return toDisposable(() => {
+			if (this._clipDelegate === delegate) this._clipDelegate = null;
+		});
 	}
-	_initCommands() {
-		[
-			OpenImageCropOperation,
-			CloseImageCropOperation,
-			ImageResetSizeOperation,
-			SetDrawingAlignOperation,
-			SetDrawingAlignLeftOperation,
-			SetDrawingAlignCenterOperation,
-			SetDrawingAlignRightOperation,
-			SetDrawingAlignTopOperation,
-			SetDrawingAlignMiddleOperation,
-			SetDrawingAlignBottomOperation,
-			SetDrawingAlignHorizonOperation,
-			SetDrawingAlignVerticalOperation,
-			AutoImageCropOperation,
-			SetDrawingGroupOperation,
-			CancelDrawingGroupOperation,
-			SetDrawingArrangeOperation,
-			SetDrawingArrangeFrontOperation,
-			SetDrawingArrangeForwardOperation,
-			SetDrawingArrangeBackOperation,
-			SetDrawingArrangeBackwardOperation
-		].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
+	applyShapeClip(ctx, prstGeom, width, height, adjustValues) {
+		if (this._clipDelegate) return this._clipDelegate(ctx, prstGeom, width, height, adjustValues);
+		return false;
 	}
-	_initComponents() {
-		[
-			[COMPONENT_IMAGE_POPUP_MENU, ImagePopupMenu],
-			["BottomIcon", BottomIcon],
-			["GroupIcon", GroupIcon],
-			["MoveDownIcon", MoveDownIcon],
-			["MoveUpIcon", MoveUpIcon],
-			["TopmostIcon", TopmostIcon],
-			["UngroupIcon", UngroupIcon]
-		].forEach(([key, component]) => {
-			this.disposeWithMe(this._componentManager.register(key, component));
+	dispose() {
+		this._clipDelegate = null;
+		this._canUseShapeClip$.complete();
+		super.dispose();
+	}
+};
+
+//#endregion
+//#region src/services/drawing-render.service.ts
+const DOC_DRAWING_BEHIND_TEXT_LAYER_INDEX = 1;
+function getDrawingRenderLayerIndex(param) {
+	return param.behindText === true || param.behindText === BooleanNumber.TRUE ? 1 : DRAWING_OBJECT_LAYER_INDEX;
+}
+function ensureDrawingRenderLayer(scene, object, param) {
+	const layerIndex = getDrawingRenderLayerIndex(param);
+	if (object.layer == null || object.layer.zIndex === layerIndex) return;
+	scene.removeObject(object);
+	scene.addObject(object, layerIndex);
+}
+function isRenderableImageCache(image) {
+	return (image === null || image === void 0 ? void 0 : image.complete) === true && image.naturalWidth > 0 && image.naturalHeight > 0;
+}
+let DrawingRenderService = class DrawingRenderService {
+	constructor(_drawingManagerService, _imageIoService, _galleryService, _urlImageService, _univerInstanceService, _drawingImageClipService) {
+		this._drawingManagerService = _drawingManagerService;
+		this._imageIoService = _imageIoService;
+		this._galleryService = _galleryService;
+		this._urlImageService = _urlImageService;
+		this._univerInstanceService = _univerInstanceService;
+		this._drawingImageClipService = _drawingImageClipService;
+	}
+	async renderImages(imageParam, scene) {
+		const { transform: singleTransform, drawingType, source, imageSourceType, srcRect, prstGeom, groupId, unitId, subUnitId, drawingId, isMultiTransform, transforms: multiTransforms, adjustValues, hidden } = imageParam;
+		if (drawingType !== DrawingTypeEnum.DRAWING_IMAGE) return;
+		if (!this._drawingManagerService.getDrawingVisible()) return;
+		if (this._univerInstanceService.getUnitType(unitId) === UniverInstanceType.UNIVER_SHEET && subUnitId !== this._getActiveSheetId()) return;
+		if (singleTransform == null) return;
+		const transforms = isMultiTransform && multiTransforms ? multiTransforms : [singleTransform];
+		const images = [];
+		for (const transform of transforms) {
+			const { left, top, width, height, angle, flipX, flipY, skewX, skewY } = transform;
+			const index = transforms.indexOf(transform);
+			const imageShapeKey = getDrawingShapeKeyByDrawingSearch({
+				unitId,
+				subUnitId,
+				drawingId
+			}, isMultiTransform ? index : void 0);
+			const imageShape = scene.getObject(imageShapeKey);
+			if (imageShape != null) {
+				var _setClipBounds;
+				imageShape.transformByState({
+					left,
+					top,
+					width,
+					height,
+					angle,
+					flipX,
+					flipY,
+					skewX,
+					skewY
+				});
+				(_setClipBounds = imageShape.setClipBounds) === null || _setClipBounds === void 0 || _setClipBounds.call(imageShape, transform.clipBounds);
+				if ("hidden" in imageParam) hidden ? imageShape.hide() : imageShape.show();
+				ensureDrawingRenderLayer(scene, imageShape, imageParam);
+				continue;
+			}
+			const orders = this._drawingManagerService.getDrawingOrder(unitId, subUnitId);
+			const zIndex = orders.indexOf(drawingId);
+			const imageConfig = {
+				...transform,
+				zIndex: zIndex === -1 ? orders.length - 1 : zIndex
+			};
+			const imageNativeCache = this._imageIoService.getImageSourceCache(source, imageSourceType);
+			let shouldBeCache = false;
+			if (isRenderableImageCache(imageNativeCache)) imageConfig.image = imageNativeCache;
+			else if (imageSourceType === ImageSourceType$1.UUID) try {
+				imageConfig.url = await this._imageIoService.getImage(source);
+			} catch (error) {
+				console.error(error);
+				continue;
+			}
+			else if (imageSourceType === ImageSourceType$1.URL) {
+				try {
+					imageConfig.url = await this._urlImageService.getImage(source);
+				} catch (error) {
+					console.error(error);
+					imageConfig.url = source;
+				}
+				shouldBeCache = true;
+			} else {
+				imageConfig.url = source;
+				shouldBeCache = true;
+			}
+			if (hidden) imageConfig.visible = false;
+			if (scene.getObject(imageShapeKey)) continue;
+			imageConfig.printable = true;
+			const image = new Image(imageShapeKey, imageConfig);
+			image.setClipService(this._drawingImageClipService);
+			if (shouldBeCache) this._imageIoService.addImageSourceCache(source, imageSourceType, image.getNative());
+			scene.addObject(image, getDrawingRenderLayerIndex(imageParam));
+			if (this._drawingManagerService.getDrawingEditable()) scene.attachTransformerTo(image);
+			groupId && insertGroupObject({
+				drawingId: groupId,
+				unitId,
+				subUnitId
+			}, image, scene, this._drawingManagerService);
+			if (prstGeom != null) image.setPrstGeom(prstGeom);
+			if (adjustValues != null) image.setPrstGeomAdjValues(adjustValues);
+			if (srcRect != null) image.setSrcRect(srcRect);
+			images.push(image);
+		}
+		return images;
+	}
+	_getActiveSheetId() {
+		var _this$_univerInstance;
+		return (_this$_univerInstance = this._univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_SHEET)) === null || _this$_univerInstance === void 0 || (_this$_univerInstance = _this$_univerInstance.getActiveSheet()) === null || _this$_univerInstance === void 0 ? void 0 : _this$_univerInstance.getSheetId();
+	}
+	renderFloatDom(param, scene) {
+		const { transform: singleTransform, drawingType, groupId, unitId, subUnitId, drawingId, isMultiTransform, transforms: multiTransforms } = param;
+		if (drawingType !== DrawingTypeEnum.DRAWING_DOM) return;
+		if (!this._drawingManagerService.getDrawingVisible()) return;
+		if (singleTransform == null) return;
+		const transforms = isMultiTransform && multiTransforms ? multiTransforms : [singleTransform];
+		const rects = [];
+		for (const transform of transforms) {
+			const { left, top, width, height, angle, flipX, flipY, skewX, skewY } = transform;
+			const index = transforms.indexOf(transform);
+			const imageShapeKey = getDrawingShapeKeyByDrawingSearch({
+				unitId,
+				subUnitId,
+				drawingId
+			}, isMultiTransform ? index : void 0);
+			const imageShape = scene.getObject(imageShapeKey);
+			if (imageShape != null) {
+				imageShape.transformByState({
+					left,
+					top,
+					width,
+					height,
+					angle,
+					flipX,
+					flipY,
+					skewX,
+					skewY
+				});
+				continue;
+			}
+			const orders = this._drawingManagerService.getDrawingOrder(unitId, subUnitId);
+			const zIndex = orders.indexOf(drawingId);
+			const rectConfig = {
+				...transform,
+				zIndex: zIndex === -1 ? orders.length - 1 : zIndex
+			};
+			if (scene.getObject(imageShapeKey)) continue;
+			rectConfig.printable = false;
+			const rect = new Rect(imageShapeKey, rectConfig);
+			if (!this._drawingManagerService.getDrawingVisible()) continue;
+			scene.addObject(rect, DRAWING_OBJECT_LAYER_INDEX);
+			if (this._drawingManagerService.getDrawingEditable() && param.allowTransform !== false) scene.attachTransformerTo(rect);
+			groupId && insertGroupObject({
+				drawingId: groupId,
+				unitId,
+				subUnitId
+			}, rect, scene, this._drawingManagerService);
+			rects.push(rect);
+		}
+		return rects;
+	}
+	renderDrawing(param, scene) {
+		const drawingParam = this._drawingManagerService.getDrawingByParam(param);
+		if (drawingParam == null) return;
+		switch (drawingParam.drawingType) {
+			case DrawingTypeEnum.DRAWING_IMAGE: return this.renderImages(drawingParam, scene);
+			default:
+		}
+	}
+	previewImage(key, src, width, height) {
+		this._galleryService.open({
+			images: [src],
+			onOpenChange: (open) => {
+				if (!open) this._galleryService.close();
+			}
 		});
 	}
+	_adjustImageSize(nativeWidth, nativeHeight, screenWidth, screenHeight) {
+		if (nativeWidth <= screenWidth && nativeHeight <= screenHeight) return {
+			width: nativeWidth,
+			height: nativeHeight
+		};
+		const widthRatio = screenWidth / nativeWidth;
+		const heightRatio = screenHeight / nativeHeight;
+		const scale = Math.min(widthRatio, heightRatio);
+		return {
+			width: Math.floor(nativeWidth * scale),
+			height: Math.floor(nativeHeight * scale)
+		};
+	}
 };
-DrawingUIController = __decorate([
-	__decorateParam(0, Inject(ComponentManager)),
-	__decorateParam(1, ICommandService),
-	__decorateParam(2, IMenuManagerService)
-], DrawingUIController);
+DrawingRenderService = __decorate([
+	__decorateParam(0, IDrawingManagerService),
+	__decorateParam(1, IImageIoService),
+	__decorateParam(2, IGalleryService),
+	__decorateParam(3, IURLImageService),
+	__decorateParam(4, IUniverInstanceService),
+	__decorateParam(5, Inject(DrawingImageClipService))
+], DrawingRenderService);
 
 //#endregion
 //#region src/utils/get-update-params.ts
@@ -1038,49 +939,19 @@ function getUpdateParams(objects, drawingManagerService) {
 }
 
 //#endregion
-//#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) {
-		return typeof o;
-	} : function(o) {
-		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-	}, _typeof(o);
+//#region src/controllers/drawing-update.controller.ts
+function syncDrawingHiddenState(shape, drawingParam) {
+	if (!("hidden" in drawingParam)) return;
+	drawingParam.hidden === true ? shape.hide() : shape.show();
 }
-
-//#endregion
-//#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];
-	if (void 0 !== e) {
-		var i = e.call(t, r || "default");
-		if ("object" != _typeof(i)) return i;
-		throw new TypeError("@@toPrimitive must return a primitive value.");
-	}
-	return ("string" === r ? String : Number)(t);
-}
-
-//#endregion
-//#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.133.0/helpers/esm/defineProperty.js
-function _defineProperty(e, r, t) {
-	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-		value: t,
-		enumerable: !0,
-		configurable: !0,
-		writable: !0
-	}) : e[r] = t, e;
+function mergeRefreshMetadata(drawingParam, refreshParam) {
+	const metadata = refreshParam;
+	if (!("hidden" in metadata) && !("behindText" in metadata)) return drawingParam;
+	return {
+		...drawingParam,
+		...metadata
+	};
 }
-
-//#endregion
-//#region src/controllers/drawing-update.controller.ts
 let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 	constructor(_currentUniverService, _commandService, _renderManagerService, _drawingManagerService) {
 		super();
@@ -1414,7 +1285,7 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 	_drawingUpdateListener() {
 		this.disposeWithMe(this._drawingManagerService.update$.subscribe((params) => {
 			params.forEach((param) => {
-				var _scene$getTransformer2;
+				var _setClipBounds, _scene$getTransformer2;
 				const { unitId, subUnitId, drawingId } = param;
 				const drawingParam = this._drawingManagerService.getDrawingByParam(param);
 				if (drawingParam == null) return;
@@ -1442,6 +1313,9 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 					skewX,
 					skewY
 				});
+				(_setClipBounds = drawingShape.setClipBounds) === null || _setClipBounds === void 0 || _setClipBounds.call(drawingShape, transform.clipBounds);
+				syncDrawingHiddenState(drawingShape, drawingParam);
+				ensureDrawingRenderLayer(scene, drawingShape, drawingParam);
 				(_scene$getTransformer2 = scene.getTransformer()) === null || _scene$getTransformer2 === void 0 || _scene$getTransformer2.debounceRefreshControls();
 			});
 		}));
@@ -1449,6 +1323,7 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 	_drawingRefreshListener() {
 		this.disposeWithMe(this._drawingManagerService.refreshTransform$.subscribe((params) => {
 			params.forEach((param) => {
+				var _setClipBounds2;
 				const { unitId, subUnitId, drawingId } = param;
 				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
 				if (renderObject == null) return;
@@ -1456,13 +1331,23 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 				if (drawingParam == null) return;
 				const { transform } = drawingParam;
 				const { scene } = renderObject;
+				if (transform == null) return true;
 				const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({
 					unitId,
 					subUnitId,
 					drawingId
 				});
 				const drawingShape = scene.getObject(drawingShapeKey);
-				if (drawingShape == null || transform == null) return true;
+				const drawingParamWithRefreshMetadata = mergeRefreshMetadata(drawingParam, param);
+				if (drawingShape == null) {
+					if (drawingParamWithRefreshMetadata.hidden === true) return true;
+					this._drawingManagerService.addNotification([{
+						unitId,
+						subUnitId,
+						drawingId
+					}]);
+					return true;
+				}
 				const { left = 0, top = 0, width = 0, height = 0, angle = 0, flipX = false, flipY = false, skewX = 0, skewY = 0 } = transform;
 				drawingShape.transformByState({
 					left,
@@ -1475,6 +1360,9 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 					skewX,
 					skewY
 				});
+				(_setClipBounds2 = drawingShape.setClipBounds) === null || _setClipBounds2 === void 0 || _setClipBounds2.call(drawingShape, transform.clipBounds);
+				syncDrawingHiddenState(drawingShape, drawingParamWithRefreshMetadata);
+				ensureDrawingRenderLayer(scene, drawingShape, drawingParamWithRefreshMetadata);
 			});
 		}));
 	}
@@ -2024,386 +1912,485 @@ ImageCropperController = __decorate([
 ], ImageCropperController);
 
 //#endregion
-//#region src/services/drawing-image-clip.service.ts
-const IMAGE_CLIP_SHAPE_PICKER_COMPONENT = "sheet.image-clip.shape.picker.component";
-/**
-* Bridge service that enables shape-based image clipping.
-* This service lives in the open-source drawing-ui package and delegates
-* to a registered clip implementation (provided by pro engine-shape package).
-*
-* When no delegate is registered, applyShapeClip returns false and images render normally without shape clipping.
-*/
-var DrawingImageClipService = class extends Disposable {
-	constructor() {
+//#region src/controllers/image-update.controller.ts
+let ImageUpdateController = class ImageUpdateController extends Disposable {
+	constructor(_commandService, _renderManagerService, _drawingManagerService, _dialogService, _imageIoService, _currentUniverService, _drawingRenderService) {
 		super();
-		_defineProperty(this, "_clipDelegate", null);
-		_defineProperty(this, "_canUseShapeClip$", new BehaviorSubject(false));
-		_defineProperty(this, "canUseShapeClip$", this._canUseShapeClip$.asObservable());
-	}
-	setCanUseShapeClip(canUse) {
-		this._canUseShapeClip$.next(canUse);
-	}
-	/**
-	* Register a clip delegate that knows how to build shape clip paths.
-	* Typically called by the pro-side plugin with a ShapeModel-based implementation.
-	* @returns IDisposable to unregister the delegate
-	*/
-	registerClipDelegate(delegate) {
-		this._clipDelegate = delegate;
-		return toDisposable(() => {
-			if (this._clipDelegate === delegate) this._clipDelegate = null;
-		});
-	}
-	applyShapeClip(ctx, prstGeom, width, height, adjustValues) {
-		if (this._clipDelegate) return this._clipDelegate(ctx, prstGeom, width, height, adjustValues);
-		return false;
+		this._commandService = _commandService;
+		this._renderManagerService = _renderManagerService;
+		this._drawingManagerService = _drawingManagerService;
+		this._dialogService = _dialogService;
+		this._imageIoService = _imageIoService;
+		this._currentUniverService = _currentUniverService;
+		this._drawingRenderService = _drawingRenderService;
+		this._initialize();
 	}
 	dispose() {
-		this._clipDelegate = null;
-		this._canUseShapeClip$.complete();
 		super.dispose();
 	}
-};
-
-//#endregion
-//#region src/services/drawing-render.service.ts
-let DrawingRenderService = class DrawingRenderService {
-	constructor(_drawingManagerService, _imageIoService, _galleryService, _urlImageService, _univerInstanceService, _drawingImageClipService) {
-		this._drawingManagerService = _drawingManagerService;
-		this._imageIoService = _imageIoService;
-		this._galleryService = _galleryService;
-		this._urlImageService = _urlImageService;
-		this._univerInstanceService = _univerInstanceService;
-		this._drawingImageClipService = _drawingImageClipService;
+	_initialize() {
+		this._drawingAddListener();
+		this._commandExecutedListener();
+		this._imageUpdateListener();
 	}
-	async renderImages(imageParam, scene) {
-		const { transform: singleTransform, drawingType, source, imageSourceType, srcRect, prstGeom, groupId, unitId, subUnitId, drawingId, isMultiTransform, transforms: multiTransforms, adjustValues, hidden } = imageParam;
-		if (drawingType !== DrawingTypeEnum.DRAWING_IMAGE) return;
-		if (!this._drawingManagerService.getDrawingVisible()) return;
-		if (this._univerInstanceService.getUnitType(unitId) === UniverInstanceType.UNIVER_SHEET && subUnitId !== this._getActiveSheetId()) return;
-		if (singleTransform == null) return;
-		const transforms = isMultiTransform && multiTransforms ? multiTransforms : [singleTransform];
-		const images = [];
-		for (const transform of transforms) {
-			const { left, top, width, height, angle, flipX, flipY, skewX, skewY } = transform;
-			const index = transforms.indexOf(transform);
-			const imageShapeKey = getDrawingShapeKeyByDrawingSearch({
-				unitId,
-				subUnitId,
-				drawingId
-			}, isMultiTransform ? index : void 0);
-			const imageShape = scene.getObject(imageShapeKey);
-			if (imageShape != null) {
-				imageShape.transformByState({
-					left,
-					top,
-					width,
-					height,
-					angle,
-					flipX,
-					flipY,
-					skewX,
-					skewY
-				});
-				continue;
-			}
-			const orders = this._drawingManagerService.getDrawingOrder(unitId, subUnitId);
-			const zIndex = orders.indexOf(drawingId);
-			const imageConfig = {
-				...transform,
-				zIndex: zIndex === -1 ? orders.length - 1 : zIndex
-			};
-			const imageNativeCache = this._imageIoService.getImageSourceCache(source, imageSourceType);
-			let shouldBeCache = false;
-			if (imageNativeCache != null) imageConfig.image = imageNativeCache;
-			else if (imageSourceType === ImageSourceType$1.UUID) try {
-				imageConfig.url = await this._imageIoService.getImage(source);
-			} catch (error) {
-				console.error(error);
-				continue;
-			}
-			else if (imageSourceType === ImageSourceType$1.URL) {
-				try {
-					imageConfig.url = await this._urlImageService.getImage(source);
-				} catch (error) {
-					console.error(error);
-					imageConfig.url = source;
-				}
-				shouldBeCache = true;
-			} else {
-				imageConfig.url = source;
-				shouldBeCache = true;
+	_commandExecutedListener() {
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (command.id === ImageResetSizeOperation.id) {
+				const params = command.params;
+				if (params == null) return;
+				this._resetImageSize(params);
 			}
-			if (hidden) imageConfig.visible = false;
-			if (scene.getObject(imageShapeKey)) continue;
-			imageConfig.printable = true;
-			const image = new Image(imageShapeKey, imageConfig);
-			image.setClipService(this._drawingImageClipService);
-			if (shouldBeCache) this._imageIoService.addImageSourceCache(source, imageSourceType, image.getNative());
-			scene.addObject(image, DRAWING_OBJECT_LAYER_INDEX);
-			if (this._drawingManagerService.getDrawingEditable()) scene.attachTransformerTo(image);
-			groupId && insertGroupObject({
-				drawingId: groupId,
-				unitId,
-				subUnitId
-			}, image, scene, this._drawingManagerService);
-			if (prstGeom != null) image.setPrstGeom(prstGeom);
-			if (adjustValues != null) image.setPrstGeomAdjValues(adjustValues);
-			if (srcRect != null) image.setSrcRect(srcRect);
-			images.push(image);
-		}
-		return images;
+		}));
 	}
-	_getActiveSheetId() {
-		var _this$_univerInstance;
-		return (_this$_univerInstance = this._univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_SHEET)) === null || _this$_univerInstance === void 0 || (_this$_univerInstance = _this$_univerInstance.getActiveSheet()) === null || _this$_univerInstance === void 0 ? void 0 : _this$_univerInstance.getSheetId();
+	_getSceneAndTransformerByDrawingSearch(unitId) {
+		if (unitId == null) return;
+		const renderObject = this._renderManagerService.getRenderById(unitId);
+		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+		if (scene == null) return null;
+		return {
+			scene,
+			transformer: scene.getTransformerByCreate()
+		};
 	}
-	renderFloatDom(param, scene) {
-		const { transform: singleTransform, drawingType, groupId, unitId, subUnitId, drawingId, isMultiTransform, transforms: multiTransforms } = param;
-		if (drawingType !== DrawingTypeEnum.DRAWING_DOM) return;
-		if (!this._drawingManagerService.getDrawingVisible()) return;
-		if (singleTransform == null) return;
-		const transforms = isMultiTransform && multiTransforms ? multiTransforms : [singleTransform];
-		const rects = [];
-		for (const transform of transforms) {
-			const { left, top, width, height, angle, flipX, flipY, skewX, skewY } = transform;
-			const index = transforms.indexOf(transform);
+	_resetImageSize(params) {
+		const updateParams = [];
+		const sceneList = [];
+		params.forEach((param) => {
+			const { unitId, subUnitId, drawingId } = param;
+			const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+			if (renderObject == null) return;
+			const { scene } = renderObject;
 			const imageShapeKey = getDrawingShapeKeyByDrawingSearch({
 				unitId,
 				subUnitId,
 				drawingId
-			}, isMultiTransform ? index : void 0);
+			});
 			const imageShape = scene.getObject(imageShapeKey);
-			if (imageShape != null) {
-				imageShape.transformByState({
-					left,
-					top,
-					width,
+			if (imageShape == null) return true;
+			const imageData = this._drawingManagerService.getDrawingByParam(param);
+			if (imageData == null) return true;
+			if (imageData.drawingType !== DrawingTypeEnum.DRAWING_IMAGE) return;
+			imageShape.resetSize();
+			const { width, height } = imageShape.getNativeSize();
+			if (sceneList.includes(scene) === false) sceneList.push(scene);
+			updateParams.push({
+				...imageData,
+				transform: {
+					...imageData.transform,
 					height,
-					angle,
-					flipX,
-					flipY,
-					skewX,
-					skewY
-				});
-				continue;
-			}
-			const orders = this._drawingManagerService.getDrawingOrder(unitId, subUnitId);
-			const zIndex = orders.indexOf(drawingId);
-			const rectConfig = {
-				...transform,
-				zIndex: zIndex === -1 ? orders.length - 1 : zIndex
-			};
-			if (scene.getObject(imageShapeKey)) continue;
-			rectConfig.printable = false;
-			const rect = new Rect(imageShapeKey, rectConfig);
-			if (!this._drawingManagerService.getDrawingVisible()) continue;
-			scene.addObject(rect, DRAWING_OBJECT_LAYER_INDEX);
-			if (this._drawingManagerService.getDrawingEditable() && param.allowTransform !== false) scene.attachTransformerTo(rect);
-			groupId && insertGroupObject({
-				drawingId: groupId,
-				unitId,
-				subUnitId
-			}, rect, scene, this._drawingManagerService);
-			rects.push(rect);
-		}
-		return rects;
-	}
-	renderDrawing(param, scene) {
-		const drawingParam = this._drawingManagerService.getDrawingByParam(param);
-		if (drawingParam == null) return;
-		switch (drawingParam.drawingType) {
-			case DrawingTypeEnum.DRAWING_IMAGE: return this.renderImages(drawingParam, scene);
-			default:
+					width,
+					angle: 0
+				},
+				srcRect: null,
+				prstGeom: null
+			});
+		});
+		this._drawingManagerService.featurePluginUpdateNotification(updateParams);
+		sceneList.forEach((scene) => {
+			scene.getTransformerByCreate().refreshControls().changeNotification();
+		});
+		this._commandService.syncExecuteCommand(SetDrawingSelectedOperation.id, params);
+	}
+	_drawingAddListener() {
+		this.disposeWithMe(this._drawingManagerService.add$.pipe(bufferTime(33), filter((batches) => batches.length > 0), map((batches) => batches.flat()), map((items) => {
+			const map = /* @__PURE__ */ new Map();
+			for (const it of items) map.set(`${it.unitId}|${it.subUnitId}|${it.drawingId}`, it);
+			return [...map.values()];
+		}), filter((items) => items.length > 0)).subscribe((uniqueParams) => {
+			this._insertImages(uniqueParams);
+		}));
+	}
+	_insertImages(params) {
+		params.forEach(async (param) => {
+			var _getCurrentUnitInfo;
+			const { unitId, subUnitId } = param;
+			const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+			const currentSubUnitId = (_getCurrentUnitInfo = getCurrentUnitInfo(this._currentUniverService, unitId)) === null || _getCurrentUnitInfo === void 0 ? void 0 : _getCurrentUnitInfo.subUnitId;
+			if (renderObject == null || currentSubUnitId !== subUnitId) return;
+			const imageParam = this._drawingManagerService.getDrawingByParam(param);
+			if (imageParam == null) return;
+			const images = await this._drawingRenderService.renderImages(imageParam, renderObject.scene);
+			this._drawingManagerService.refreshTransform([imageParam]);
+			if (images == null || images.length === 0) return;
+			for (const image of images) {
+				this._addHoverForImage(image);
+				this._addDialogForImage(image);
+			}
+		});
+	}
+	_imageUpdateListener() {
+		this.disposeWithMe(this._drawingManagerService.update$.subscribe((params) => {
+			params.forEach((param) => {
+				var _setClipBounds;
+				const { unitId, subUnitId, drawingId } = param;
+				const drawingParam = this._drawingManagerService.getDrawingByParam(param);
+				if (drawingParam == null) return;
+				const { transform, drawingType, srcRect, prstGeom, source, imageSourceType } = drawingParam;
+				if (drawingType !== DrawingTypeEnum.DRAWING_IMAGE) return;
+				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+				if (renderObject == null) return;
+				const { scene, transformer } = renderObject;
+				if (transform == null) return true;
+				const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({
+					unitId,
+					subUnitId,
+					drawingId
+				});
+				const imageShape = scene.getObject(drawingShapeKey);
+				if (imageShape == null) return true;
+				imageShape.transformByState(transform);
+				(_setClipBounds = imageShape.setClipBounds) === null || _setClipBounds === void 0 || _setClipBounds.call(imageShape, transform.clipBounds);
+				ensureDrawingRenderLayer(scene, imageShape, drawingParam);
+				imageShape.setSrcRect(srcRect);
+				imageShape.setPrstGeom(prstGeom);
+				if (source != null && source.length > 0 && (imageSourceType === ImageSourceType.BASE64 || imageSourceType === ImageSourceType.URL)) imageShape.changeSource(source);
+			});
+		}));
+	}
+	_addHoverForImage(o) {
+		this.disposeWithMe(toDisposable(o.onPointerEnter$.subscribeEvent(() => {
+			o.cursor = CURSOR_TYPE.GRAB;
+		})));
+		this.disposeWithMe(toDisposable(o.onPointerLeave$.subscribeEvent(() => {
+			o.cursor = CURSOR_TYPE.DEFAULT;
+		})));
+	}
+	_addDialogForImage(o) {
+		this.disposeWithMe(toDisposable(o.onDblclick$.subscribeEvent(() => {
+			const dialogId = `${o.oKey}-viewer-dialog`;
+			this._drawingRenderService.previewImage(dialogId, o.getNative().src, o.getNativeSize().width, o.getNativeSize().height);
+		})));
+	}
+};
+ImageUpdateController = __decorate([
+	__decorateParam(0, ICommandService),
+	__decorateParam(1, IRenderManagerService),
+	__decorateParam(2, IDrawingManagerService),
+	__decorateParam(3, IDialogService),
+	__decorateParam(4, IImageIoService),
+	__decorateParam(5, IUniverInstanceService),
+	__decorateParam(6, Inject(DrawingRenderService))
+], ImageUpdateController);
+
+//#endregion
+//#region src/menu/align.menu.ts
+const getMenuStateByDrawingFocusChangedObservable$$1 = (accessor) => {
+	const drawingManagerService = accessor.get(IDrawingManagerService);
+	return new Observable((subscriber) => {
+		const update = (drawings) => {
+			if (!drawings || drawings.length === 0) return subscriber.next(true);
+			if (drawings.length < 2) return subscriber.next(true);
+			subscriber.next(false);
+		};
+		const subscription = drawingManagerService.focus$.subscribe((drawings) => {
+			if (!drawings || drawings.length === 0) return subscriber.next(true);
+			update(drawings);
+		});
+		update(drawingManagerService.getFocusDrawings());
+		return () => subscription.unsubscribe();
+	});
+};
+const DRAWING_ALIGN_CONTEXT_MENU_ID = "contextMenu.drawing-align";
+function DrawingAlignContextMenuItemFactory(accessor) {
+	return {
+		id: DRAWING_ALIGN_CONTEXT_MENU_ID,
+		type: MenuItemType.SUBITEMS,
+		icon: "HorizontallyIcon",
+		title: "drawing-ui.image-panel.align.title",
+		hidden$: getMenuStateByDrawingFocusChangedObservable$$1(accessor)
+	};
+}
+function SetDrawingAlignLeftMenuItemFactory() {
+	return {
+		id: SetDrawingAlignLeftOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "LeftJustifyingIcon",
+		title: "drawing-ui.image-panel.align.left"
+	};
+}
+function SetDrawingAlignCenterMenuItemFactory() {
+	return {
+		id: SetDrawingAlignCenterOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "HorizontallyIcon",
+		title: "drawing-ui.image-panel.align.center"
+	};
+}
+function SetDrawingAlignRightMenuItemFactory() {
+	return {
+		id: SetDrawingAlignRightOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "RightJustifyingIcon",
+		title: "drawing-ui.image-panel.align.right"
+	};
+}
+function SetDrawingAlignTopMenuItemFactory() {
+	return {
+		id: SetDrawingAlignTopOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "AlignTopIcon",
+		title: "drawing-ui.image-panel.align.top"
+	};
+}
+function SetDrawingAlignMiddleMenuItemFactory() {
+	return {
+		id: SetDrawingAlignMiddleOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "VerticalCenterIcon",
+		title: "drawing-ui.image-panel.align.middle"
+	};
+}
+function SetDrawingAlignBottomMenuItemFactory() {
+	return {
+		id: SetDrawingAlignBottomOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "AlignBottomIcon",
+		title: "drawing-ui.image-panel.align.bottom"
+	};
+}
+function SetDrawingAlignHorizonMenuItemFactory() {
+	return {
+		id: SetDrawingAlignHorizonOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "HorizontallyIcon",
+		title: "drawing-ui.image-panel.align.horizon"
+	};
+}
+function SetDrawingAlignVerticalMenuItemFactory() {
+	return {
+		id: SetDrawingAlignVerticalOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "VerticalCenterIcon",
+		title: "drawing-ui.image-panel.align.vertical"
+	};
+}
+
+//#endregion
+//#region src/menu/arrange.menu.ts
+const DRAWING_ARRANGE_CONTEXT_MENU_ID = "contextMenu.drawing-arrange";
+function DrawingArrangeContextMenuItemFactory() {
+	return {
+		id: DRAWING_ARRANGE_CONTEXT_MENU_ID,
+		type: MenuItemType.SUBITEMS,
+		icon: "TopmostIcon",
+		title: "drawing-ui.image-panel.arrange.title"
+	};
+}
+function SetDrawingArrangeFrontMenuItemFactory() {
+	return {
+		id: SetDrawingArrangeFrontOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "TopmostIcon",
+		title: "drawing-ui.image-panel.arrange.front"
+	};
+}
+function SetDrawingArrangeForwardMenuItemFactory() {
+	return {
+		id: SetDrawingArrangeForwardOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "MoveUpIcon",
+		title: "drawing-ui.image-panel.arrange.forward"
+	};
+}
+function SetDrawingArrangeBackMenuItemFactory() {
+	return {
+		id: SetDrawingArrangeBackOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "BottomIcon",
+		title: "drawing-ui.image-panel.arrange.back"
+	};
+}
+function SetDrawingArrangeBackwardMenuItemFactory() {
+	return {
+		id: SetDrawingArrangeBackwardOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "MoveDownIcon",
+		title: "drawing-ui.image-panel.arrange.backward"
+	};
+}
+
+//#endregion
+//#region src/menu/group.menu.ts
+function getMenuStateByDrawingFocusChangedObservable$(accessor, type) {
+	const drawingManagerService = accessor.get(IDrawingManagerService);
+	return new Observable((subscriber) => {
+		const update = (drawings) => {
+			if (!drawings || drawings.length === 0) return subscriber.next(true);
+			if (type === "group") {
+				if (drawings.length < 2) return subscriber.next(true);
+				if (!drawings.every((drawing) => DRAWING_GROUP_TYPES.includes(drawing.drawingType))) return subscriber.next(true);
+			} else if (type === "unGroup") {
+				if (drawings.filter((drawing) => drawing.drawingType === DrawingTypeEnum.DRAWING_GROUP).length === 0) return subscriber.next(true);
+			} else if (!drawings.every((drawing) => DRAWING_GROUP_TYPES.includes(drawing.drawingType))) return subscriber.next(true);
+			subscriber.next(false);
+		};
+		const subscription = drawingManagerService.focus$.subscribe((drawings) => {
+			if (!drawings || drawings.length === 0) return subscriber.next(true);
+			update(drawings);
+		});
+		update(drawingManagerService.getFocusDrawings());
+		return () => subscription.unsubscribe();
+	});
+}
+const DRAWING_GROUP_CONTEXT_MENU_ID = "contextMenu.drawing-group";
+function DrawingGroupContextMenuItemFactory(accessor) {
+	return {
+		id: DRAWING_GROUP_CONTEXT_MENU_ID,
+		type: MenuItemType.SUBITEMS,
+		icon: "GroupIcon",
+		title: "drawing-ui.image-panel.group.title",
+		hidden$: getMenuStateByDrawingFocusChangedObservable$(accessor)
+	};
+}
+function SetDrawingGroupMenuItemFactory(accessor) {
+	return {
+		id: SetDrawingGroupOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "GroupIcon",
+		title: "drawing-ui.image-panel.group.group",
+		disabled$: getMenuStateByDrawingFocusChangedObservable$(accessor, "group")
+	};
+}
+function CancelDrawingGroupMenuItemFactory(accessor) {
+	return {
+		id: CancelDrawingGroupOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "UngroupIcon",
+		title: "drawing-ui.image-panel.group.unGroup",
+		disabled$: getMenuStateByDrawingFocusChangedObservable$(accessor, "unGroup")
+	};
+}
+
+//#endregion
+//#region src/menu/schema.ts
+const menuSchema = { [ContextMenuPosition.DRAWING]: { [ContextMenuGroup.OTHERS]: {
+	[DRAWING_GROUP_CONTEXT_MENU_ID]: {
+		order: 1,
+		menuItemFactory: DrawingGroupContextMenuItemFactory,
+		[SetDrawingGroupOperation.id]: {
+			order: 0,
+			menuItemFactory: SetDrawingGroupMenuItemFactory
+		},
+		[CancelDrawingGroupOperation.id]: {
+			order: 1,
+			menuItemFactory: CancelDrawingGroupMenuItemFactory
+		}
+	},
+	[DRAWING_ARRANGE_CONTEXT_MENU_ID]: {
+		order: 2,
+		menuItemFactory: DrawingArrangeContextMenuItemFactory,
+		[SetDrawingArrangeFrontOperation.id]: {
+			order: 0,
+			menuItemFactory: SetDrawingArrangeFrontMenuItemFactory
+		},
+		[SetDrawingArrangeForwardOperation.id]: {
+			order: 1,
+			menuItemFactory: SetDrawingArrangeForwardMenuItemFactory
+		},
+		[SetDrawingArrangeBackOperation.id]: {
+			order: 2,
+			menuItemFactory: SetDrawingArrangeBackMenuItemFactory
+		},
+		[SetDrawingArrangeBackwardOperation.id]: {
+			order: 3,
+			menuItemFactory: SetDrawingArrangeBackwardMenuItemFactory
+		}
+	},
+	[DRAWING_ALIGN_CONTEXT_MENU_ID]: {
+		order: 3,
+		menuItemFactory: DrawingAlignContextMenuItemFactory,
+		[SetDrawingAlignLeftOperation.id]: {
+			order: 0,
+			menuItemFactory: SetDrawingAlignLeftMenuItemFactory
+		},
+		[SetDrawingAlignCenterOperation.id]: {
+			order: 1,
+			menuItemFactory: SetDrawingAlignCenterMenuItemFactory
+		},
+		[SetDrawingAlignRightOperation.id]: {
+			order: 2,
+			menuItemFactory: SetDrawingAlignRightMenuItemFactory
+		},
+		[SetDrawingAlignTopOperation.id]: {
+			order: 3,
+			menuItemFactory: SetDrawingAlignTopMenuItemFactory
+		},
+		[SetDrawingAlignMiddleOperation.id]: {
+			order: 4,
+			menuItemFactory: SetDrawingAlignMiddleMenuItemFactory
+		},
+		[SetDrawingAlignBottomOperation.id]: {
+			order: 5,
+			menuItemFactory: SetDrawingAlignBottomMenuItemFactory
+		},
+		[SetDrawingAlignHorizonOperation.id]: {
+			order: 6,
+			menuItemFactory: SetDrawingAlignHorizonMenuItemFactory
+		},
+		[SetDrawingAlignVerticalOperation.id]: {
+			order: 7,
+			menuItemFactory: SetDrawingAlignVerticalMenuItemFactory
 		}
 	}
-	previewImage(key, src, width, height) {
-		this._galleryService.open({
-			images: [src],
-			onOpenChange: (open) => {
-				if (!open) this._galleryService.close();
-			}
-		});
-	}
-	_adjustImageSize(nativeWidth, nativeHeight, screenWidth, screenHeight) {
-		if (nativeWidth <= screenWidth && nativeHeight <= screenHeight) return {
-			width: nativeWidth,
-			height: nativeHeight
-		};
-		const widthRatio = screenWidth / nativeWidth;
-		const heightRatio = screenHeight / nativeHeight;
-		const scale = Math.min(widthRatio, heightRatio);
-		return {
-			width: Math.floor(nativeWidth * scale),
-			height: Math.floor(nativeHeight * scale)
-		};
-	}
-};
-DrawingRenderService = __decorate([
-	__decorateParam(0, IDrawingManagerService),
-	__decorateParam(1, IImageIoService),
-	__decorateParam(2, IGalleryService),
-	__decorateParam(3, IURLImageService),
-	__decorateParam(4, IUniverInstanceService),
-	__decorateParam(5, Inject(DrawingImageClipService))
-], DrawingRenderService);
+} } };
 
 //#endregion
-//#region src/controllers/image-update.controller.ts
-let ImageUpdateController = class ImageUpdateController extends Disposable {
-	constructor(_commandService, _renderManagerService, _drawingManagerService, _dialogService, _imageIoService, _currentUniverService, _drawingRenderService) {
+//#region src/controllers/ui.controller.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+let DrawingUIController = class DrawingUIController extends Disposable {
+	constructor(_commandService, _menuManagerService) {
 		super();
 		this._commandService = _commandService;
-		this._renderManagerService = _renderManagerService;
-		this._drawingManagerService = _drawingManagerService;
-		this._dialogService = _dialogService;
-		this._imageIoService = _imageIoService;
-		this._currentUniverService = _currentUniverService;
-		this._drawingRenderService = _drawingRenderService;
-		this._initialize();
-	}
-	dispose() {
-		super.dispose();
-	}
-	_initialize() {
-		this._drawingAddListener();
-		this._commandExecutedListener();
-		this._imageUpdateListener();
-	}
-	_commandExecutedListener() {
-		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
-			if (command.id === ImageResetSizeOperation.id) {
-				const params = command.params;
-				if (params == null) return;
-				this._resetImageSize(params);
-			}
-		}));
-	}
-	_getSceneAndTransformerByDrawingSearch(unitId) {
-		if (unitId == null) return;
-		const renderObject = this._renderManagerService.getRenderById(unitId);
-		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-		if (scene == null) return null;
-		return {
-			scene,
-			transformer: scene.getTransformerByCreate()
-		};
-	}
-	_resetImageSize(params) {
-		const updateParams = [];
-		const sceneList = [];
-		params.forEach((param) => {
-			const { unitId, subUnitId, drawingId } = param;
-			const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
-			if (renderObject == null) return;
-			const { scene } = renderObject;
-			const imageShapeKey = getDrawingShapeKeyByDrawingSearch({
-				unitId,
-				subUnitId,
-				drawingId
-			});
-			const imageShape = scene.getObject(imageShapeKey);
-			if (imageShape == null) return true;
-			const imageData = this._drawingManagerService.getDrawingByParam(param);
-			if (imageData == null) return true;
-			if (imageData.drawingType !== DrawingTypeEnum.DRAWING_IMAGE) return;
-			imageShape.resetSize();
-			const { width, height } = imageShape.getNativeSize();
-			if (sceneList.includes(scene) === false) sceneList.push(scene);
-			updateParams.push({
-				...imageData,
-				transform: {
-					...imageData.transform,
-					height,
-					width,
-					angle: 0
-				},
-				srcRect: null,
-				prstGeom: null
-			});
-		});
-		this._drawingManagerService.featurePluginUpdateNotification(updateParams);
-		sceneList.forEach((scene) => {
-			scene.getTransformerByCreate().refreshControls().changeNotification();
-		});
-		this._commandService.syncExecuteCommand(SetDrawingSelectedOperation.id, params);
-	}
-	_drawingAddListener() {
-		this.disposeWithMe(this._drawingManagerService.add$.pipe(bufferTime(33), filter((batches) => batches.length > 0), map((batches) => batches.flat()), map((items) => {
-			const map = /* @__PURE__ */ new Map();
-			for (const it of items) map.set(`${it.unitId}|${it.subUnitId}|${it.drawingId}`, it);
-			return [...map.values()];
-		}), filter((items) => items.length > 0)).subscribe((uniqueParams) => {
-			this._insertImages(uniqueParams);
-		}));
-	}
-	_insertImages(params) {
-		params.forEach(async (param) => {
-			var _getCurrentUnitInfo;
-			const { unitId, subUnitId } = param;
-			const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
-			const currentSubUnitId = (_getCurrentUnitInfo = getCurrentUnitInfo(this._currentUniverService, unitId)) === null || _getCurrentUnitInfo === void 0 ? void 0 : _getCurrentUnitInfo.subUnitId;
-			if (renderObject == null || currentSubUnitId !== subUnitId) return;
-			const imageParam = this._drawingManagerService.getDrawingByParam(param);
-			if (imageParam == null) return;
-			const images = await this._drawingRenderService.renderImages(imageParam, renderObject.scene);
-			this._drawingManagerService.refreshTransform([imageParam]);
-			if (images == null || images.length === 0) return;
-			for (const image of images) {
-				this._addHoverForImage(image);
-				this._addDialogForImage(image);
-			}
-		});
+		this._menuManagerService = _menuManagerService;
+		this._init();
 	}
-	_imageUpdateListener() {
-		this.disposeWithMe(this._drawingManagerService.update$.subscribe((params) => {
-			params.forEach((param) => {
-				const { unitId, subUnitId, drawingId } = param;
-				const drawingParam = this._drawingManagerService.getDrawingByParam(param);
-				if (drawingParam == null) return;
-				const { transform, drawingType, srcRect, prstGeom, source, imageSourceType } = drawingParam;
-				if (drawingType !== DrawingTypeEnum.DRAWING_IMAGE) return;
-				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
-				if (renderObject == null) return;
-				const { scene, transformer } = renderObject;
-				if (transform == null) return true;
-				const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({
-					unitId,
-					subUnitId,
-					drawingId
-				});
-				const imageShape = scene.getObject(drawingShapeKey);
-				if (imageShape == null) return true;
-				imageShape.setSrcRect(srcRect);
-				imageShape.setPrstGeom(prstGeom);
-				if (source != null && source.length > 0 && (imageSourceType === ImageSourceType.BASE64 || imageSourceType === ImageSourceType.URL)) imageShape.changeSource(source);
-			});
-		}));
+	_init() {
+		this._initMenus();
+		this._initCommands();
 	}
-	_addHoverForImage(o) {
-		this.disposeWithMe(toDisposable(o.onPointerEnter$.subscribeEvent(() => {
-			o.cursor = CURSOR_TYPE.GRAB;
-		})));
-		this.disposeWithMe(toDisposable(o.onPointerLeave$.subscribeEvent(() => {
-			o.cursor = CURSOR_TYPE.DEFAULT;
-		})));
+	_initMenus() {
+		this._menuManagerService.mergeMenu(menuSchema);
 	}
-	_addDialogForImage(o) {
-		this.disposeWithMe(toDisposable(o.onDblclick$.subscribeEvent(() => {
-			const dialogId = `${o.oKey}-viewer-dialog`;
-			this._drawingRenderService.previewImage(dialogId, o.getNative().src, o.getNativeSize().width, o.getNativeSize().height);
-		})));
+	_initCommands() {
+		[
+			OpenImageCropOperation,
+			CloseImageCropOperation,
+			ImageResetSizeOperation,
+			SetDrawingAlignOperation,
+			SetDrawingAlignLeftOperation,
+			SetDrawingAlignCenterOperation,
+			SetDrawingAlignRightOperation,
+			SetDrawingAlignTopOperation,
+			SetDrawingAlignMiddleOperation,
+			SetDrawingAlignBottomOperation,
+			SetDrawingAlignHorizonOperation,
+			SetDrawingAlignVerticalOperation,
+			AutoImageCropOperation,
+			SetDrawingGroupOperation,
+			CancelDrawingGroupOperation,
+			SetDrawingArrangeOperation,
+			SetDrawingArrangeFrontOperation,
+			SetDrawingArrangeForwardOperation,
+			SetDrawingArrangeBackOperation,
+			SetDrawingArrangeBackwardOperation
+		].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
 	}
 };
-ImageUpdateController = __decorate([
-	__decorateParam(0, ICommandService),
-	__decorateParam(1, IRenderManagerService),
-	__decorateParam(2, IDrawingManagerService),
-	__decorateParam(3, IDialogService),
-	__decorateParam(4, IImageIoService),
-	__decorateParam(5, IUniverInstanceService),
-	__decorateParam(6, Inject(DrawingRenderService))
-], ImageUpdateController);
+DrawingUIController = __decorate([__decorateParam(0, ICommandService), __decorateParam(1, IMenuManagerService)], DrawingUIController);
 
 //#endregion
 //#region src/plugin.ts
@@ -2418,6 +2405,8 @@ let UniverDrawingUIPlugin = class UniverDrawingUIPlugin extends Plugin {
 		this._configService.setConfig(DRAWING_UI_PLUGIN_CONFIG_KEY, rest);
 	}
 	onStarting() {
+		this._injector.add([ComponentsController]);
+		this._injector.get(ComponentsController);
 		this._initDependencies();
 	}
 	onRendered() {
@@ -2523,11 +2512,11 @@ const DrawingArrange = (props) => {
 	const localeService = useDependency(LocaleService);
 	const drawingManagerService = useDependency(IDrawingManagerService);
 	const commandService = useDependency(ICommandService);
-	const componentManager = useDependency(ComponentManager);
-	const MoveUpIcon = componentManager.get("MoveUpIcon");
-	const MoveDownIcon = componentManager.get("MoveDownIcon");
-	const TopmostIcon = componentManager.get("TopmostIcon");
-	const BottomIcon = componentManager.get("BottomIcon");
+	const iconManager = useDependency(IconManager);
+	const MoveUpIcon = iconManager.get("MoveUpIcon");
+	const MoveDownIcon = iconManager.get("MoveDownIcon");
+	const TopmostIcon = iconManager.get("TopmostIcon");
+	const BottomIcon = iconManager.get("BottomIcon");
 	const [drawings, setDrawings] = useState(focusDrawings);
 	useEffect(() => {
 		const focusDispose = drawingManagerService.focus$.subscribe((drawings) => {
@@ -2587,10 +2576,10 @@ const DrawingGroup = (props) => {
 	const renderManagerService = useDependency(IRenderManagerService);
 	const drawingManagerService = useDependency(IDrawingManagerService);
 	const commandService = useDependency(ICommandService);
-	const componentManager = useDependency(ComponentManager);
+	const iconManager = useDependency(IconManager);
 	const { hasGroup, drawings } = props;
-	const GroupIcon = componentManager.get("GroupIcon");
-	const UngroupIcon = componentManager.get("UngroupIcon");
+	const GroupIcon = iconManager.get("GroupIcon");
+	const UngroupIcon = iconManager.get("UngroupIcon");
 	const [groupShow, setGroupShow] = useState(false);
 	const [groupBtnShow, setGroupBtnShow] = useState(true);
 	const [ungroupBtnShow, setUngroupBtnShow] = useState(true);
@@ -3004,6 +2993,29 @@ const ImageCropper = (props) => {
 
 //#endregion
 //#region src/views/panel/DrawingCommonPanel.tsx
+function getPanelShowState(drawings) {
+	if (drawings.length === 0) return {
+		arrangeShow: false,
+		transformShow: false,
+		alignShow: false,
+		cropperShow: false,
+		nullShow: true
+	};
+	if (drawings.length === 1) return {
+		arrangeShow: true,
+		transformShow: true,
+		alignShow: false,
+		cropperShow: true,
+		nullShow: false
+	};
+	return {
+		arrangeShow: true,
+		transformShow: false,
+		alignShow: true,
+		cropperShow: false,
+		nullShow: false
+	};
+}
 const DrawingCommonPanel = (props) => {
 	const drawingManagerService = useDependency(IDrawingManagerService);
 	const renderManagerService = useDependency(IRenderManagerService);
@@ -3016,11 +3028,12 @@ const DrawingCommonPanel = (props) => {
 	const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
 	if (scene == null) return;
 	const transformer = scene.getTransformerByCreate();
-	const [arrangeShow, setArrangeShow] = useState(true);
-	const [transformShow, setTransformShow] = useState(true);
-	const [alignShow, setAlignShow] = useState(false);
-	const [cropperShow, setCropperShow] = useState(true);
-	const [nullShow, setNullShow] = useState(false);
+	const initialShowState = getPanelShowState(drawings);
+	const [arrangeShow, setArrangeShow] = useState(initialShowState.arrangeShow);
+	const [transformShow, setTransformShow] = useState(initialShowState.transformShow);
+	const [alignShow, setAlignShow] = useState(initialShowState.alignShow);
+	const [cropperShow, setCropperShow] = useState(initialShowState.cropperShow);
+	const [nullShow, setNullShow] = useState(initialShowState.nullShow);
 	useEffect(() => {
 		const clearControlSub = transformer.clearControl$.subscribe((changeSelf) => {
 			if (changeSelf === true) {
@@ -3113,4 +3126,4 @@ const DrawingCommonPanel = (props) => {
 };
 
 //#endregion
-export { AutoImageCropOperation, COMPONENT_IMAGE_POPUP_MENU, CancelDrawingGroupOperation, CloseImageCropOperation, DRAWING_GROUP_TYPES, DrawingCommonPanel, DrawingImageClipService, DrawingRenderService, IMAGE_CLIP_SHAPE_PICKER_COMPONENT, ImageCropperObject, ImagePopupMenu, ImageResetSizeOperation, OpenImageCropOperation, SetDrawingAlignOperation, SetDrawingArrangeOperation, SetDrawingGroupOperation, UniverDrawingUIPlugin, getCurrentUnitInfo, getUpdateParams, insertGroupObject };
+export { AutoImageCropOperation, COMPONENT_IMAGE_POPUP_MENU, CancelDrawingGroupOperation, CloseImageCropOperation, DRAWING_GROUP_TYPES, DrawingCommonPanel, DrawingImageClipService, DrawingRenderService, IMAGE_CLIP_SHAPE_PICKER_COMPONENT, ImageCropperObject, ImageResetSizeOperation, OpenImageCropOperation, SetDrawingAlignOperation, SetDrawingArrangeOperation, SetDrawingGroupOperation, UniverDrawingUIPlugin, getCurrentUnitInfo, getUpdateParams, insertGroupObject };