@univerjs/drawing-ui 1.0.0-alpha.1 → 1.0.0-alpha.3

package/lib/es/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 { ArrangeTypeEnum, BooleanNumber, CommandType, Disposable, DrawingTypeEnum, ICommandService, IConfigService, IImageIoService, IURLImageService, IUniverInstanceService, ImageSourceType, Inject, Injector, LocaleService, Plugin, PositionedObjectLayoutType, UniverInstanceType, checkIfMove, debounce, generateRandomId, merge, toDisposable } from "@univerjs/core";
+import { DRAWING_GROUPABLE_TYPES, IDrawingManagerService, SetDrawingSelectedOperation, getDrawingShapeKeyByDrawingSearch, isGroupableDrawingType, resolveDrawingRotateEnabled } 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, 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";
+import { ArrowDownIcon, ArrowUpIcon, AutofillDoubleIcon, BottomIcon, ChartIcon, CreateCopyIcon, CropIcon, DeleteIcon, DocSettingIcon, EyeIcon, EyelashIcon, GroupIcon, LocateFixedIcon, LockIcon, MoreDownIcon, MoreRightIcon, MoveDownIcon, MoveUpIcon, TextWrapShapeIcon, TopmostIcon, UngroupIcon } from "@univerjs/icons";
+import { Button, Checkbox, Dropdown, DropdownMenu, Input, InputNumber, MessageType, Select, Separator, Tooltip, borderClassName, clsx } from "@univerjs/design";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/commands/operations/drawing-align.operation.ts
 /**
@@ -131,15 +131,13 @@ const SetDrawingArrangeBackwardOperation = {
 //#endregion
 //#region src/commands/operations/drawing-group.operation.ts
 /**
-* Now only support grouping images, shapes, and groups.
+* Now only support grouping images, shapes, charts, and groups.
 */
-const DRAWING_GROUP_TYPES = [
-	DrawingTypeEnum.DRAWING_IMAGE,
-	DrawingTypeEnum.DRAWING_SHAPE,
-	DrawingTypeEnum.DRAWING_GROUP
-];
+const DRAWING_GROUP_TYPES = DRAWING_GROUPABLE_TYPES;
 /**
-* Group the selected drawings into a new group. The selected drawings must be of type image, shape, or group, and there must be at least 2 drawings selected.
+* Group the selected drawings into a new group. The selected drawings must be
+* of type image, shape, chart, or group, and there must be at least 2 drawings
+* selected.
 */
 const SetDrawingGroupOperation = {
 	id: "drawing.operation.set-drawing-group",
@@ -148,7 +146,7 @@ const SetDrawingGroupOperation = {
 		const drawingManagerService = accessor.get(IDrawingManagerService);
 		const drawings = params.drawings || drawingManagerService.getFocusDrawings();
 		if (drawings.length < 2) return false;
-		if (!drawings.every((drawing) => DRAWING_GROUP_TYPES.includes(drawing.drawingType))) return false;
+		if (!drawings.every((drawing) => isGroupableDrawingType(drawing.drawingType))) return false;
 		const { unitId, subUnitId } = drawings[0];
 		const groupId = generateRandomId(10);
 		const groupTransform = getGroupState(0, 0, drawings.map((o) => o.transform || {}));
@@ -170,11 +168,12 @@ const SetDrawingGroupOperation = {
 				left: 0,
 				top: 0
 			};
-			const { unitId, subUnitId, drawingId } = drawing;
+			const { unitId, subUnitId, drawingId, drawingType } = drawing;
 			return {
 				unitId,
 				subUnitId,
 				drawingId,
+				drawingType,
 				transform: { ...transform },
 				groupId
 			};
@@ -266,8 +265,48 @@ const ImageResetSizeOperation = {
 	}
 };
 
+//#endregion
+//#region src/utils/rotate-enabled.ts
+function isKnownDrawingUINonRotatableType(drawingType) {
+	return drawingType === DrawingTypeEnum.DRAWING_CHART;
+}
+function resolveDrawingUIRotateEnabled(drawing, options = {}) {
+	var _options$isKnownNonRo;
+	return resolveDrawingRotateEnabled(drawing, {
+		...options,
+		isKnownNonRotatableType: (_options$isKnownNonRo = options.isKnownNonRotatableType) !== null && _options$isKnownNonRo !== void 0 ? _options$isKnownNonRo : isKnownDrawingUINonRotatableType
+	});
+}
+
 //#endregion
 //#region src/controllers/utils.ts
+function getDrawingRenderObject(scene, drawingSearch) {
+	var _scene$getObjectInclu;
+	const key = getDrawingShapeKeyByDrawingSearch(drawingSearch);
+	return (_scene$getObjectInclu = scene.getObjectIncludeInGroup(key)) !== null && _scene$getObjectInclu !== void 0 ? _scene$getObjectInclu : null;
+}
+function disposeDrawingRenderObject(scene, drawingSearch) {
+	const object = getDrawingRenderObject(scene, drawingSearch);
+	if (object == null) return false;
+	object.dispose();
+	return true;
+}
+function getRenderObjectForDrawing(scene, drawing) {
+	return getDrawingRenderObject(scene, drawing);
+}
+function syncGroupRotateEnabled(group, groupParam, scene, drawingManagerService, children) {
+	const rotateEnabled = resolveDrawingUIRotateEnabled(groupParam, {
+		getChildren: (drawing) => {
+			if (children && drawing.drawingId === groupParam.drawingId && drawing.unitId === groupParam.unitId && drawing.subUnitId === groupParam.subUnitId) return children;
+			return drawingManagerService.getDrawingsByGroup(drawing);
+		},
+		getRenderObject: (drawing) => getRenderObjectForDrawing(scene, drawing)
+	});
+	group.transformerConfig = {
+		...group.transformerConfig,
+		rotateEnabled
+	};
+}
 function insertGroupObject(objectParam, object, scene, drawingManagerService) {
 	const groupParam = drawingManagerService.getDrawingByParam(objectParam);
 	if (groupParam == null) return;
@@ -278,11 +317,13 @@ function insertGroupObject(objectParam, object, scene, drawingManagerService) {
 		const objects = groupObject.getObjects();
 		for (const obj of objects) if (obj.oKey === object.oKey) return;
 		groupObject.addObject(object);
+		syncGroupRotateEnabled(groupObject, groupParam, scene, drawingManagerService);
 		return;
 	}
 	const group = new DrawingGroupObject(groupKey);
 	scene.addObject(group, DRAWING_OBJECT_LAYER_INDEX).attachTransformerTo(group);
 	group.addObject(object);
+	syncGroupRotateEnabled(group, groupParam, scene, drawingManagerService);
 	const { transform, groupBaseBound } = groupParam;
 	if (groupBaseBound) group.setBaseBound(groupBaseBound);
 	if (groupParam.groupId) {
@@ -319,269 +360,280 @@ function getCurrentUnitInfo(currentUniverService, propUnitId) {
 }
 
 //#endregion
-//#region package.json
-var name = "@univerjs/drawing-ui";
-var version = "1.0.0-alpha.1";
-
-//#endregion
-//#region src/config/config.ts
-const DRAWING_UI_PLUGIN_CONFIG_KEY = "drawing-ui.config";
-const configSymbol = Symbol(DRAWING_UI_PLUGIN_CONFIG_KEY);
-const defaultPluginConfig = {};
-
-//#endregion
-//#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
+//#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 commandService = useDependency(ICommandService);
-	const localeService = useDependency(LocaleService);
-	const [visible, setVisible] = useState(false);
-	const [isHovered, setHovered] = useState(false);
-	const handleMouseEnter = () => {
-		setHovered(true);
+};
+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 handleMouseLeave = () => {
-		setHovered(false);
+}
+function SetDrawingAlignLeftMenuItemFactory() {
+	return {
+		id: SetDrawingAlignLeftOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "LeftJustifyingIcon",
+		title: "drawing-ui.image-panel.align.left"
 	};
-	const onVisibleChange = (visible) => {
-		setVisible(visible);
+}
+function SetDrawingAlignCenterMenuItemFactory() {
+	return {
+		id: SetDrawingAlignCenterOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "HorizontallyIcon",
+		title: "drawing-ui.image-panel.align.center"
 	};
-	const handleClick = (item) => {
-		commandService.executeCommand(item.commandId, item.commandParams);
-		setVisible(false);
+}
+function SetDrawingAlignRightMenuItemFactory() {
+	return {
+		id: SetDrawingAlignRightOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "RightJustifyingIcon",
+		title: "drawing-ui.image-panel.align.right"
 	};
-	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 SetDrawingAlignTopMenuItemFactory() {
+	return {
+		id: SetDrawingAlignTopOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "AlignTopIcon",
+		title: "drawing-ui.image-panel.align.top"
+	};
 }
-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 SetDrawingAlignMiddleMenuItemFactory() {
+	return {
+		id: SetDrawingAlignMiddleOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "VerticalCenterIcon",
+		title: "drawing-ui.image-panel.align.middle"
+	};
 }
-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 SetDrawingAlignBottomMenuItemFactory() {
+	return {
+		id: SetDrawingAlignBottomOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "AlignBottomIcon",
+		title: "drawing-ui.image-panel.align.bottom"
+	};
 }
-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 SetDrawingAlignHorizonMenuItemFactory() {
+	return {
+		id: SetDrawingAlignHorizonOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "HorizontallyIcon",
+		title: "drawing-ui.image-panel.align.horizon"
+	};
 }
-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
-		});
+function SetDrawingAlignVerticalMenuItemFactory() {
+	return {
+		id: SetDrawingAlignVerticalOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "VerticalCenterIcon",
+		title: "drawing-ui.image-panel.align.vertical"
 	};
-	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 \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
-function __decorateParam(paramIndex, decorator) {
-	return function(target, key) {
-		decorator(target, key, paramIndex);
+//#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 \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;
+//#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) => isGroupableDrawingType(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) => isGroupableDrawingType(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/controllers/components.controller.ts
+//#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
+		}
+	}
+} } };
+
+//#endregion
+//#region package.json
+var name = "@univerjs/drawing-ui";
+var version = "1.0.0-alpha.3";
+
+//#endregion
+//#region src/config/config.ts
+const DRAWING_UI_PLUGIN_CONFIG_KEY = "drawing-ui.config";
+const configSymbol = Symbol(DRAWING_UI_PLUGIN_CONFIG_KEY);
+const defaultPluginConfig = {};
+
+//#endregion
+//#region src/views/image-popup-menu/component-name.ts
 /**
 * Copyright 2023-present DreamNum Co., Ltd.
 *
@@ -597,714 +649,544 @@ function __decorate(decorators, target, key, desc) {
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-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 \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);
-}
-
-//#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);
-}
+const COMPONENT_IMAGE_POPUP_MENU = "COMPONENT_IMAGE_POPUP_MENU";
 
 //#endregion
-//#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 + "";
+//#region src/views/image-popup-menu/ImagePopupMenu.tsx
+function ImagePopupMenu(props) {
+	var _popup$extraProps, _popup$extraProps2, _popup$extraProps3;
+	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
+	});
+	if (((_popup$extraProps3 = popup.extraProps) === null || _popup$extraProps3 === void 0 ? void 0 : _popup$extraProps3.variant) === "doc-chart-floating-toolbar") return /* @__PURE__ */ jsx(DocChartFloatingToolbar, { menuItems });
+	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" })]
+			})
+		})
+	});
 }
-
-//#endregion
-//#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;
+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";
 }
-
-//#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() {
-		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;
-	}
-	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 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 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 ToolbarButton(props) {
+	return /* @__PURE__ */ jsx(Tooltip, {
+		title: useDependency(LocaleService).t(props.titleKey),
+		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 isRenderableImageCache(image) {
-	return (image === null || image === void 0 ? void 0 : image.complete) === true && image.naturalWidth > 0 && image.naturalHeight > 0;
+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" })]
+			})
+		}) })
+	});
 }
-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;
-		const { docxHeaderFooterDrawing, layoutType } = 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;
-			}
-			const shouldWaitForInlineTransform = docxHeaderFooterDrawing === true && layoutType === PositionedObjectLayoutType.INLINE;
-			if (hidden || shouldWaitForInlineTransform) 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:
+function DocImageFloatingToolbar(props) {
+	var _univerInstanceServic, _wrappingStyleOptions, _wrappingStyleOptions2, _editItem$label, _cropItem$label, _deleteItem$label;
+	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, {})
 		}
-	}
-	previewImage(key, src, width, height) {
-		this._galleryService.open({
-			images: [src],
-			onOpenChange: (open) => {
-				if (!open) this._galleryService.close();
-			}
+	];
+	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
 		});
-	}
-	_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/utils/get-update-params.ts
-function getUpdateParams(objects, drawingManagerService) {
-	const params = [];
-	objects.forEach((object) => {
-		const { oKey, left, top, height, width, angle } = object;
-		const searchParam = drawingManagerService.getDrawingOKey(oKey);
-		if (searchParam == null) {
-			params.push(null);
-			return true;
-		}
-		const { unitId, subUnitId, drawingId, drawingType } = searchParam;
-		const param = {
-			unitId,
-			subUnitId,
-			drawingId,
-			drawingType,
-			transform: {
-				left,
-				top,
-				height,
-				width,
-				angle
-			}
-		};
-		if (drawingType === DrawingTypeEnum.DRAWING_IMAGE) param.srcRect = object.srcRect;
-		params.push(param);
+	};
+	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, {
+				titleKey: (_editItem$label = editItem === null || editItem === void 0 ? void 0 : editItem.label) !== null && _editItem$label !== void 0 ? _editItem$label : "drawing-ui.image-popup.edit",
+				disabled: !editItem || editItem.disable,
+				onClick: () => {
+					setHidden(true);
+					executeMenuItem(editItem);
+				},
+				children: /* @__PURE__ */ jsx(DocSettingIcon, {})
+			}), /* @__PURE__ */ jsx(ToolbarButton, {
+				titleKey: (_cropItem$label = cropItem === null || cropItem === void 0 ? void 0 : cropItem.label) !== null && _cropItem$label !== void 0 ? _cropItem$label : "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, {
+				titleKey: (_deleteItem$label = deleteItem === null || deleteItem === void 0 ? void 0 : deleteItem.label) !== null && _deleteItem$label !== void 0 ? _deleteItem$label : "drawing-ui.image-popup.delete",
+				disabled: !deleteItem || deleteItem.disable,
+				onClick: () => executeMenuItem(deleteItem),
+				children: /* @__PURE__ */ jsx(DeleteIcon, {})
+			}) })
+		]
+	});
+}
+function DocChartFloatingToolbar(props) {
+	var _chartTypeItem$option, _ref, _chartTypeItem$value, _chartTypeOptions$;
+	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
+	const chartTypeItem = props.menuItems.find((item) => item.type === "select");
+	const editItem = props.menuItems.find((item) => item.icon === "edit");
+	const deleteItem = props.menuItems.find((item) => item.icon === "delete");
+	const chartTypeOptions = ((_chartTypeItem$option = chartTypeItem === null || chartTypeItem === void 0 ? void 0 : chartTypeItem.options) !== null && _chartTypeItem$option !== void 0 ? _chartTypeItem$option : []).map((option) => ({
+		label: String(option.label),
+		value: option.value,
+		icon: /* @__PURE__ */ jsx(ChartIcon, {})
+	}));
+	const executeMenuItem = (item) => {
+		if (!item || item.disable) return;
+		commandService.executeCommand(item.commandId, item.commandParams);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-u-comp": "doc-chart-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: [chartTypeItem && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(ToolbarDropdownButton, {
+			title: localeService.t(chartTypeItem.label),
+			value: (_ref = (_chartTypeItem$value = chartTypeItem.value) !== null && _chartTypeItem$value !== void 0 ? _chartTypeItem$value : (_chartTypeOptions$ = chartTypeOptions[0]) === null || _chartTypeOptions$ === void 0 ? void 0 : _chartTypeOptions$.value) !== null && _ref !== void 0 ? _ref : "",
+			options: chartTypeOptions,
+			onChange: (value) => {
+				if (!chartTypeItem.disable) {
+					var _chartTypeItem$comman;
+					commandService.executeCommand(chartTypeItem.commandId, (_chartTypeItem$comman = chartTypeItem.commandParamsFactory) === null || _chartTypeItem$comman === void 0 ? void 0 : _chartTypeItem$comman.call(chartTypeItem, value));
+				}
+			}
+		}) }), (editItem || deleteItem) && /* @__PURE__ */ jsx(Separator, { orientation: "vertical" })] }), (editItem || deleteItem) && /* @__PURE__ */ jsxs(ToolbarGroup, { children: [editItem && /* @__PURE__ */ jsx(ToolbarButton, {
+			titleKey: editItem.label,
+			disabled: editItem.disable,
+			onClick: () => executeMenuItem(editItem),
+			children: /* @__PURE__ */ jsx(DocSettingIcon, {})
+		}), deleteItem && /* @__PURE__ */ jsx(ToolbarButton, {
+			titleKey: deleteItem.label,
+			disabled: deleteItem.disable,
+			onClick: () => executeMenuItem(deleteItem),
+			children: /* @__PURE__ */ jsx(DeleteIcon, {})
+		})] })]
 	});
-	return params;
 }
 
 //#endregion
-//#region src/controllers/drawing-update.controller.ts
-function syncDrawingHiddenState(shape, drawingParam) {
-	if (!("hidden" in drawingParam)) return;
-	drawingParam.hidden === true ? shape.hide() : shape.show();
-}
-function mergeRefreshMetadata(drawingParam, refreshParam) {
-	const metadata = refreshParam;
-	if (!("hidden" in metadata) && !("behindText" in metadata)) return drawingParam;
-	return {
-		...drawingParam,
-		...metadata
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
+function __decorateParam(paramIndex, decorator) {
+	return function(target, key) {
+		decorator(target, key, paramIndex);
 	};
 }
-let DrawingUpdateController = class DrawingUpdateController extends Disposable {
-	constructor(_currentUniverService, _commandService, _renderManagerService, _drawingManagerService) {
+
+//#endregion
+//#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/controllers/components.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 ComponentsController = class ComponentsController extends Disposable {
+	constructor(_componentManager, _iconManager) {
 		super();
-		this._currentUniverService = _currentUniverService;
-		this._commandService = _commandService;
-		this._renderManagerService = _renderManagerService;
-		this._drawingManagerService = _drawingManagerService;
-		_defineProperty(this, "_sceneListenerOnDrawingMap", /* @__PURE__ */ new WeakSet());
-		this._initialize();
-	}
-	dispose() {
-		super.dispose();
-	}
-	_initialize() {
-		this._recoveryImages();
-		this._drawingAddListener();
-		this._drawingRemoveListener();
-		this._drawingUpdateListener();
-		this._commandExecutedListener();
-		this._drawingArrangeListener();
-		this._drawingGroupListener();
-		this._drawingRefreshListener();
-		this._drawingVisibleListener();
+		this._componentManager = _componentManager;
+		this._iconManager = _iconManager;
+		this._registerComponents();
+		this._registerIcons();
 	}
-	_recoveryImages() {
-		const drawingList = this._drawingManagerService.drawingManagerData;
-		const info = getCurrentUnitInfo(this._currentUniverService);
-		if (info == null) return;
-		const { unitId: currentUnitId, subUnitId: currentSubUnitId } = info;
-		Object.keys(drawingList).forEach((unitId) => {
-			Object.keys(drawingList[unitId]).forEach((subUnitId) => {
-				const drawingMap = drawingList[unitId][subUnitId].data;
-				if (drawingMap == null || unitId !== currentUnitId || subUnitId !== currentSubUnitId) return;
-				Object.keys(drawingMap).forEach((drawingId) => {
-					if (drawingMap[drawingId]) this._insertDrawing([{
-						unitId,
-						subUnitId,
-						drawingId
-					}]);
-				});
-			});
+	_registerComponents() {
+		[[COMPONENT_IMAGE_POPUP_MENU, ImagePopupMenu]].forEach(([key, component]) => {
+			this.disposeWithMe(this._componentManager.register(key, component));
 		});
 	}
-	_commandExecutedListener() {
-		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
-			if (command.id === SetDrawingAlignOperation.id) {
-				const params = command.params;
-				if (params == null) return;
-				this._drawingAlign(params);
-			}
+	_registerIcons() {
+		this.disposeWithMe(this._iconManager.register({
+			BottomIcon,
+			GroupIcon,
+			MoveDownIcon,
+			MoveUpIcon,
+			TopmostIcon,
+			UngroupIcon
 		}));
 	}
-	_drawingGroupListener() {
-		this.disposeWithMe(this._drawingManagerService.group$.subscribe((params) => {
-			this._groupDrawings(params);
-		}));
-		this.disposeWithMe(this._drawingManagerService.ungroup$.subscribe((params) => {
-			this._ungroupDrawings(params);
-		}));
+};
+ComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager)), __decorateParam(1, Inject(IconManager))], ComponentsController);
+
+//#endregion
+//#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);
+}
+
+//#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.");
 	}
-	_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()
-		};
+	return ("string" === r ? String : Number)(t);
+}
+
+//#endregion
+//#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.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/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() {
+		super();
+		_defineProperty(this, "_clipDelegate", null);
+		_defineProperty(this, "_canUseShapeClip$", new BehaviorSubject(false));
+		_defineProperty(this, "canUseShapeClip$", this._canUseShapeClip$.asObservable());
 	}
-	_groupDrawings(drawings) {
-		drawings.forEach((drawing) => {
-			this._groupDrawing(drawing);
-		});
+	setCanUseShapeClip(canUse) {
+		this._canUseShapeClip$.next(canUse);
 	}
-	_groupDrawing(params) {
-		const { parent, children } = params;
-		const { unitId, subUnitId, drawingId } = parent;
-		const renderObject = this._getSceneAndTransformerByDrawingSearch(parent.unitId);
-		if (renderObject == null) return;
-		const { scene, transformer } = renderObject;
-		this._commandService.syncExecuteCommand(CloseImageCropOperation.id);
-		const objects = [];
-		children.forEach((drawing) => {
-			const drawingShapeKey = getDrawingShapeKeyByDrawingSearch(drawing);
-			const object = scene.getObjectIncludeInGroup(drawingShapeKey);
-			if (object == null || objects.includes(object)) return;
-			objects.push(object);
-			const { transform } = drawing;
-			if (transform == null) return;
-			if (object.classType === RENDER_CLASS_TYPE.GROUP) object.transformByState({
-				left: transform.left,
-				top: transform.top
-			});
-			else object.transformByState(transform);
-		});
-		if (objects.length === 0) return;
-		const group = new DrawingGroupObject(getDrawingShapeKeyByDrawingSearch({
-			unitId,
-			subUnitId,
-			drawingId
-		}));
-		scene.addObject(group, DRAWING_OBJECT_LAYER_INDEX).attachTransformerTo(group);
-		group.addObjects(...objects);
-		if (parent.groupBaseBound) group.setBaseBound(parent.groupBaseBound);
-		if (parent.groupId) {
-			group.isInGroup = true;
-			insertGroupObject({
-				drawingId: parent.groupId,
-				unitId,
-				subUnitId
-			}, group, scene, this._drawingManagerService);
-		}
-		parent.transform && group.transformByState({
-			left: parent.transform.left,
-			top: parent.transform.top,
-			width: parent.transform.width,
-			height: parent.transform.height,
-			angle: parent.transform.angle
+	/**
+	* 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;
 		});
-		transformer.clearSelectedObjects();
-		transformer.setSelectedControl(group);
 	}
-	_ungroupDrawings(drawings) {
-		drawings.forEach((drawing) => {
-			this._ungroupDrawing(drawing);
-		});
+	applyShapeClip(ctx, prstGeom, width, height, adjustValues) {
+		if (this._clipDelegate) return this._clipDelegate(ctx, prstGeom, width, height, adjustValues);
+		return false;
 	}
-	_ungroupDrawing(drawing) {
-		const { parent, children } = drawing;
-		const renderObject = this._getSceneAndTransformerByDrawingSearch(parent.unitId);
-		if (renderObject == null) return;
-		const { scene, transformer } = renderObject;
-		children.forEach((drawing) => {
-			const drawingKey = getDrawingShapeKeyByDrawingSearch(drawing);
-			const object = scene.getObjectIncludeInGroup(drawingKey);
-			if (object == null) return true;
-			if (object == null) return;
-			const { transform } = drawing;
-			if (transform == null) return;
-			if (object.classType === RENDER_CLASS_TYPE.GROUP) object.transformByState({
-				left: transform.left,
-				top: transform.top
-			});
-			else object.transformByState(transform);
-		});
-		const groupKey = getDrawingShapeKeyByDrawingSearch(parent);
-		const group = scene.getObject(groupKey);
-		const { width, height } = group;
-		group.getObjects().forEach((object) => {
-			group.removeSelfObjectAndTransform(object.oKey, width, height);
-		});
-		group.dispose();
-		transformer.clearSelectedObjects();
+	dispose() {
+		this._clipDelegate = null;
+		this._canUseShapeClip$.complete();
+		super.dispose();
 	}
-	_drawingAlign(params) {
-		const { alignType } = params;
-		const drawings = params.drawings || this._drawingManagerService.getFocusDrawings();
-		if (alignType === "0") return;
-		const drawingTransformCaches = [];
-		let minLeft = Number.POSITIVE_INFINITY;
-		let minTop = Number.POSITIVE_INFINITY;
-		let maxRight = Number.NEGATIVE_INFINITY;
-		let maxBottom = Number.NEGATIVE_INFINITY;
-		let drawingCount = 0;
-		drawings.forEach((drawing) => {
-			const { unitId, subUnitId, drawingId, drawingType } = drawing;
-			const drawingParam = this._drawingManagerService.getDrawingByParam({
+};
+
+//#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 || param.layoutType === PositionedObjectLayoutType.WRAP_NONE && param.behindDoc === 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, options) {
+		const { transform: singleTransform, drawingType, source, imageSourceType, srcRect, prstGeom, groupId, unitId, subUnitId, drawingId, isMultiTransform, transforms: multiTransforms, adjustValues, hidden } = imageParam;
+		const { docxHeaderFooterDrawing, layoutType } = imageParam;
+		if (drawingType !== DrawingTypeEnum.DRAWING_IMAGE) return;
+		if (!this._drawingManagerService.getDrawingVisible()) return;
+		if (!(options === null || options === void 0 ? void 0 : options.allowInactiveSheet) && 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
-			});
-			if (drawingParam == null || drawingParam.transform == null) return;
-			drawingTransformCaches.push({
-				unitId,
-				subUnitId,
-				drawingId,
-				drawingType,
-				transform: drawingParam.transform
-			});
-			const { left = 0, top = 0, width = 0, height = 0 } = drawingParam.transform;
-			minLeft = Math.min(minLeft, left);
-			minTop = Math.min(minTop, top);
-			maxRight = Math.max(maxRight, left + width);
-			maxBottom = Math.max(maxBottom, top + height);
-			drawingCount++;
-		});
-		if (drawingCount === 0) return;
-		this._sortDrawingTransform(drawingTransformCaches, alignType);
-		this._applyAlignType(drawingTransformCaches, alignType, minLeft, minTop, maxRight, maxBottom, drawingCount);
-	}
-	_applyAlignType(drawingTransformCaches, alignType, minLeft, minTop, maxRight, maxBottom, drawingCount) {
-		const averageHorizon = Math.round((maxRight - minLeft) / drawingCount * 10) / 10;
-		const averageVertical = Math.round((maxBottom - minTop) / drawingCount * 10) / 10;
-		const updateParams = [];
-		const renderObject = this._getSceneAndTransformerByDrawingSearch(drawingTransformCaches[0].unitId);
-		if (renderObject == null) return;
-		const { scene, transformer } = renderObject;
-		drawingTransformCaches.forEach((drawingTransformCache, index) => {
-			const { unitId, subUnitId, drawingId, transform, drawingType } = drawingTransformCache;
-			const { left = 0, top = 0, width = 0, height = 0 } = transform;
-			let newLeft = left;
-			let newTop = top;
-			switch (alignType) {
-				case "1":
-					newLeft = minLeft;
-					break;
-				case "2":
-					newLeft = minLeft + (maxRight - minLeft) / 2 - width / 2;
-					break;
-				case "3":
-					newLeft = maxRight - width;
-					break;
-				case "4":
-					newTop = minTop;
-					break;
-				case "5":
-					newTop = minTop + (maxBottom - minTop) / 2 - height / 2;
-					break;
-				case "6":
-					newTop = maxBottom - height;
-					break;
-				case "7":
-					newLeft = minLeft + averageHorizon * index;
-					break;
-				case "8":
-					newTop = minTop + averageVertical * index;
-					break;
-				default: break;
+			}, 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;
 			}
-			if (newLeft !== left || newTop !== top) updateParams.push({
-				unitId,
-				subUnitId,
-				drawingId,
-				drawingType,
-				transform: {
-					left: newLeft,
-					top: newTop
+			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.UUID) try {
+				imageConfig.url = await this._imageIoService.getImage(source);
+			} catch (error) {
+				console.error(error);
+				continue;
+			}
+			else if (imageSourceType === ImageSourceType.URL) {
+				try {
+					imageConfig.url = await this._urlImageService.getImage(source);
+				} catch (error) {
+					console.error(error);
+					imageConfig.url = source;
 				}
-			});
-		});
-		this._drawingManagerService.featurePluginUpdateNotification(updateParams);
-		transformer.refreshControls().changeNotification();
-	}
-	_sortDrawingTransform(drawingTransformCaches, alignType) {
-		drawingTransformCaches.sort((a, b) => {
-			const aTransform = a.transform;
-			const bTransform = b.transform;
-			const { left: aLeft = 0, top: aTop = 0, width: aWidth = 0, height: aHeight = 0 } = aTransform;
-			const { left: bLeft = 0, top: bTop = 0, width: bWidth = 0, height: bHeight = 0 } = bTransform;
-			switch (alignType) {
-				case "1": return aLeft - bLeft;
-				case "2": return aLeft + aWidth / 2 - (bLeft + bWidth / 2);
-				case "3": return aLeft + aWidth - (bLeft + bWidth);
-				case "4": return aTop - bTop;
-				case "5": return aTop + aHeight / 2 - (bTop + bHeight / 2);
-				case "6": return aTop + aHeight - (bTop + bHeight);
-				case "7": return aLeft + aWidth / 2 - (bLeft + bWidth / 2);
-				case "8": return aTop + aHeight / 2 - (bTop + bHeight / 2);
-				default: return 0;
+				shouldBeCache = true;
+			} else {
+				imageConfig.url = source;
+				shouldBeCache = true;
 			}
-		});
+			const shouldWaitForInlineTransform = docxHeaderFooterDrawing === true && layoutType === PositionedObjectLayoutType.INLINE;
+			if (hidden || shouldWaitForInlineTransform) 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;
 	}
-	_drawingArrangeListener() {
-		this.disposeWithMe(this._drawingManagerService.order$.subscribe((params) => {
-			this._drawingArrange(params);
-		}));
+	_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();
 	}
-	_drawingArrange(params) {
-		const { unitId, subUnitId, drawingIds } = params;
-		const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
-		if (renderObject == null) return;
-		const { scene } = renderObject;
-		drawingIds.forEach((drawingId) => {
-			const oKey = getDrawingShapeKeyByDrawingSearch({
-				unitId,
-				subUnitId,
-				drawingId
-			});
-			const drawingShapes = scene.fuzzyMathObjects(oKey, true);
-			if (drawingShapes == null || drawingShapes.length === 0) return;
-			const index = this._drawingManagerService.getDrawingOrder(unitId, subUnitId).indexOf(drawingId);
-			for (const shape of drawingShapes) {
-				shape.setProps({ zIndex: index });
-				shape.makeDirty();
-			}
-		});
-	}
-	_drawingAddListener() {
-		this.disposeWithMe(this._drawingManagerService.add$.subscribe((params) => {
-			this._insertDrawing(params);
-		}));
-	}
-	_insertDrawing(params) {
-		const sceneList = [];
-		params.forEach((param) => {
-			const { unitId } = param;
-			if (this._drawingManagerService.getDrawingByParam(param) == null) return;
-			const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
-			if (renderObject == null) return;
-			const { scene } = renderObject;
-			if (!sceneList.includes(scene)) sceneList.push(scene);
-		});
-		sceneList.forEach((scene) => {
-			if (this._sceneListenerOnDrawingMap.has(scene)) return;
-			this._addListenerOnDrawing(scene);
-			this._sceneListenerOnDrawingMap.add(scene);
-		});
-	}
-	_drawingRemoveListener() {
-		this.disposeWithMe(this._drawingManagerService.remove$.subscribe((params) => {
-			params.forEach((param) => {
-				const { unitId, subUnitId, drawingId } = param;
-				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
-				if (renderObject == null) return;
-				const { scene } = renderObject;
-				const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({
-					unitId,
-					subUnitId,
-					drawingId
-				});
-				const drawingShapes = scene.fuzzyMathObjects(drawingShapeKey, true);
-				if (drawingShapes.length > 0) {
-					var _scene$getTransformer;
-					for (const drawingShape of drawingShapes) drawingShape.dispose();
-					(_scene$getTransformer = scene.getTransformer()) === null || _scene$getTransformer === void 0 || _scene$getTransformer.clearSelectedObjects();
-				}
-			});
-		}));
-	}
-	_drawingUpdateListener() {
-		this.disposeWithMe(this._drawingManagerService.update$.subscribe((params) => {
-			params.forEach((param) => {
-				var _setClipBounds, _scene$getTransformer2;
-				const { unitId, subUnitId, drawingId } = param;
-				const drawingParam = this._drawingManagerService.getDrawingByParam(param);
-				if (drawingParam == null) return;
-				const { transform, drawingType } = drawingParam;
-				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
-				if (renderObject == null) return;
-				const { scene, transformer } = renderObject;
-				if (transform == null) return true;
-				const { left = 0, top = 0, width = 0, height = 0, angle = 0, flipX = false, flipY = false, skewX = 0, skewY = 0 } = transform;
-				const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({
-					unitId,
-					subUnitId,
-					drawingId
-				});
-				const drawingShape = scene.getObject(drawingShapeKey);
-				if (drawingShape == null) return true;
-				drawingShape.transformByState({
+	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,
@@ -1315,1026 +1197,1232 @@ 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();
-			});
-		}));
+				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;
 	}
-	_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;
-				const drawingParam = this._drawingManagerService.getDrawingByParam(param);
-				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);
-				const drawingParamWithRefreshMetadata = mergeRefreshMetadata(drawingParam, param);
-				if (drawingShape == null) {
-					if (drawingParamWithRefreshMetadata.hidden === true) return true;
-					this._drawingManagerService.addNotification([{
+	renderDrawing(param, scene, options) {
+		const drawingParam = this._drawingManagerService.getDrawingByParam(param);
+		if (drawingParam == null) return;
+		switch (drawingParam.drawingType) {
+			case DrawingTypeEnum.DRAWING_IMAGE: return this.renderImages(drawingParam, scene, options);
+			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)
+		};
+	}
+};
+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
+function getUpdateParams(objects, drawingManagerService) {
+	const params = [];
+	objects.forEach((object) => {
+		const { oKey, left, top, height, width, angle } = object;
+		const searchParam = drawingManagerService.getDrawingOKey(oKey);
+		if (searchParam == null) {
+			params.push(null);
+			return true;
+		}
+		const { unitId, subUnitId, drawingId, drawingType } = searchParam;
+		const param = {
+			unitId,
+			subUnitId,
+			drawingId,
+			drawingType,
+			transform: {
+				left,
+				top,
+				height,
+				width,
+				angle
+			}
+		};
+		if (drawingType === DrawingTypeEnum.DRAWING_IMAGE) param.srcRect = object.srcRect;
+		params.push(param);
+	});
+	return params;
+}
+
+//#endregion
+//#region src/controllers/drawing-update.controller.ts
+function hasRefreshMetadata(refreshParam) {
+	return "hidden" in refreshParam || "behindText" in refreshParam;
+}
+function syncDrawingHiddenState(shape, drawingParam) {
+	if (!("hidden" in drawingParam)) return;
+	drawingParam.hidden === true ? shape.hide() : shape.show();
+}
+function mergeRefreshMetadata(drawingParam, refreshParam) {
+	if (!hasRefreshMetadata(refreshParam)) return drawingParam;
+	return {
+		...drawingParam,
+		...refreshParam
+	};
+}
+let DrawingUpdateController = class DrawingUpdateController extends Disposable {
+	constructor(_currentUniverService, _commandService, _renderManagerService, _drawingManagerService) {
+		super();
+		this._currentUniverService = _currentUniverService;
+		this._commandService = _commandService;
+		this._renderManagerService = _renderManagerService;
+		this._drawingManagerService = _drawingManagerService;
+		_defineProperty(this, "_sceneListenerOnDrawingMap", /* @__PURE__ */ new WeakSet());
+		this._initialize();
+	}
+	dispose() {
+		super.dispose();
+	}
+	_initialize() {
+		this._recoveryImages();
+		this._drawingAddListener();
+		this._drawingRemoveListener();
+		this._drawingUpdateListener();
+		this._commandExecutedListener();
+		this._drawingArrangeListener();
+		this._drawingGroupListener();
+		this._drawingRefreshListener();
+		this._drawingVisibleListener();
+	}
+	_recoveryImages() {
+		const drawingList = this._drawingManagerService.drawingManagerData;
+		const info = getCurrentUnitInfo(this._currentUniverService);
+		if (info == null) return;
+		const { unitId: currentUnitId, subUnitId: currentSubUnitId } = info;
+		Object.keys(drawingList).forEach((unitId) => {
+			Object.keys(drawingList[unitId]).forEach((subUnitId) => {
+				const drawingMap = drawingList[unitId][subUnitId].data;
+				if (drawingMap == null || unitId !== currentUnitId || subUnitId !== currentSubUnitId) return;
+				Object.keys(drawingMap).forEach((drawingId) => {
+					if (drawingMap[drawingId]) this._insertDrawing([{
 						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,
-					top,
-					width,
-					height,
-					angle,
-					flipX,
-					flipY,
-					skewX,
-					skewY
 				});
-				(_setClipBounds2 = drawingShape.setClipBounds) === null || _setClipBounds2 === void 0 || _setClipBounds2.call(drawingShape, transform.clipBounds);
-				syncDrawingHiddenState(drawingShape, drawingParamWithRefreshMetadata);
-				ensureDrawingRenderLayer(scene, drawingShape, drawingParamWithRefreshMetadata);
 			});
-		}));
+		});
 	}
-	_drawingVisibleListener() {
-		this.disposeWithMe(this._drawingManagerService.visible$.subscribe((params) => {
-			params.forEach((param) => {
-				const { unitId, subUnitId, drawingId, visible } = param;
-				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
-				if (renderObject == null) return;
-				const { scene } = renderObject;
-				const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({
-					unitId,
-					subUnitId,
-					drawingId
-				});
-				const drawingShape = scene.getObject(drawingShapeKey);
-				if (drawingShape == null) return true;
-				if (visible) drawingShape.show();
-				else drawingShape.hide();
-			});
+	_commandExecutedListener() {
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (command.id === SetDrawingAlignOperation.id) {
+				const params = command.params;
+				if (params == null) return;
+				this._drawingAlign(params);
+			}
 		}));
 	}
-	_filterUpdateParams(params, startTransforms) {
-		return params.filter((param, index) => {
-			if (param == null) return false;
-			const { transform } = param;
-			return checkIfMove(transform, startTransforms === null || startTransforms === void 0 ? void 0 : startTransforms[index]);
-		});
-	}
-	_addListenerOnDrawing(scene) {
-		const transformer = scene.getTransformerByCreate();
-		let startTransforms = null;
-		this.disposeWithMe(toDisposable(transformer.changeStart$.subscribe((state) => {
-			const { objects } = state;
-			const objectArray = Array.from(objects.values());
-			const drawings = [];
-			startTransforms = objectArray.map((object) => {
-				const { left, top, height, width, angle, oKey, isInGroup } = object;
-				const drawing = this._drawingManagerService.getDrawingOKey(oKey);
-				if (isInGroup || object instanceof Group) {
-					let group = object.ancestorGroup;
-					if (group == null && object instanceof Group) group = object;
-					if (group == null) return null;
-					const groupDrawing = this._drawingManagerService.getDrawingOKey(group.oKey);
-					if (groupDrawing) {
-						const { unitId, subUnitId, drawingId } = groupDrawing;
-						drawings.push({
-							unitId,
-							subUnitId,
-							drawingId
-						});
-						const { left, top, height, width, angle } = group;
-						return {
-							left,
-							top,
-							height,
-							width,
-							angle
-						};
-					}
-				} else if (drawing != null) {
-					const { unitId, subUnitId, drawingId } = drawing;
-					drawings.push({
-						unitId,
-						subUnitId,
-						drawingId
-					});
-					return {
-						left,
-						top,
-						height,
-						width,
-						angle
-					};
-				}
-				return null;
-			}).filter((transform) => transform != null);
-			if (drawings.length > 0) this._commandService.syncExecuteCommand(SetDrawingSelectedOperation.id, drawings);
-			else this._commandService.syncExecuteCommand(SetDrawingSelectedOperation.id, []);
-		})));
-		this.disposeWithMe(toDisposable(transformer.changeEnd$.subscribe((state) => {
-			const { objects } = state;
-			const params = this._filterUpdateParams(getUpdateParams(objects, this._drawingManagerService), startTransforms);
-			if (params.length > 0) this._drawingManagerService.featurePluginUpdateNotification(params);
-		})));
+	_drawingGroupListener() {
+		this.disposeWithMe(this._drawingManagerService.group$.subscribe((params) => {
+			this._groupDrawings(params);
+		}));
+		this.disposeWithMe(this._drawingManagerService.ungroup$.subscribe((params) => {
+			this._ungroupDrawings(params);
+		}));
 	}
-};
-DrawingUpdateController = __decorate([
-	__decorateParam(0, IUniverInstanceService),
-	__decorateParam(1, ICommandService),
-	__decorateParam(2, IRenderManagerService),
-	__decorateParam(3, IDrawingManagerService)
-], DrawingUpdateController);
-
-//#endregion
-//#region src/views/crop/image-cropper-object.ts
-var ImageCropperObject = class extends Shape {
-	constructor(key, props) {
-		if (props == null) props = {};
-		props.transformerConfig = {
-			keepRatio: false,
-			isCropper: true,
-			anchorFill: "rgb(0, 0, 0)",
-			anchorStroke: "rgb(255, 255, 255)",
-			anchorSize: 24
+	_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()
 		};
-		super(key, props);
-		_defineProperty(this, "_srcRect", void 0);
-		_defineProperty(this, "_prstGeom", void 0);
-		_defineProperty(this, "_applyTransform", void 0);
-		_defineProperty(this, "_dragPadding", 8);
-		_defineProperty(this, "_cacheCanvas", void 0);
-		if (props === null || props === void 0 ? void 0 : props.srcRect) this._srcRect = props.srcRect;
-		if (props === null || props === void 0 ? void 0 : props.prstGeom) this._prstGeom = props.prstGeom;
-		if (props === null || props === void 0 ? void 0 : props.applyTransform) this._applyTransform = props.applyTransform;
-		if (props === null || props === void 0 ? void 0 : props.dragPadding) this._dragPadding = props.dragPadding;
-		this._applyProps();
-	}
-	refreshSrcRect(value, transform) {
-		this._srcRect = value;
-		this._applyTransform = transform;
-		this._applyProps();
-	}
-	get srcRect() {
-		return this._srcRect;
-	}
-	dispose() {
-		var _this$_cacheCanvas;
-		super.dispose();
-		(_this$_cacheCanvas = this._cacheCanvas) === null || _this$_cacheCanvas === void 0 || _this$_cacheCanvas.dispose();
-		this._srcRect = null;
-	}
-	isHit(coord) {
-		const oCoord = this.getInverseCoord(coord);
-		if (oCoord.x >= -this.strokeWidth / 2 && oCoord.x <= this.width + this.strokeWidth / 2 && oCoord.y >= -this.strokeWidth / 2 && oCoord.y <= this.height + this.strokeWidth / 2 && !this._inSurround(oCoord)) return true;
-		return false;
 	}
-	_inSurround(oCoord) {
-		const padding = this._dragPadding;
-		if (oCoord.x >= padding - this.strokeWidth / 2 && oCoord.x <= this.width + this.strokeWidth / 2 - padding && oCoord.y >= padding - this.strokeWidth / 2 && oCoord.y <= this.height + this.strokeWidth / 2 - padding) return true;
-		return false;
+	_groupDrawings(drawings) {
+		drawings.forEach((drawing) => {
+			this._groupDrawing(drawing);
+		});
 	}
-	render(mainCtx, bounds) {
-		if (!this.visible) {
-			this.makeDirty(false);
-			return this;
+	_groupDrawing(params) {
+		const { parent, children } = params;
+		const { unitId, subUnitId, drawingId } = parent;
+		const renderObject = this._getSceneAndTransformerByDrawingSearch(parent.unitId);
+		if (renderObject == null) return;
+		const { scene, transformer } = renderObject;
+		this._commandService.syncExecuteCommand(CloseImageCropOperation.id);
+		const objects = [];
+		children.forEach((drawing) => {
+			const drawingShapeKey = getDrawingShapeKeyByDrawingSearch(drawing);
+			const object = scene.getObjectIncludeInGroup(drawingShapeKey);
+			if (object == null || objects.includes(object)) return;
+			objects.push(object);
+			const { transform } = drawing;
+			if (transform == null) return;
+			if (object.classType === RENDER_CLASS_TYPE.GROUP) object.transformByState({
+				left: transform.left,
+				top: transform.top
+			});
+			else object.transformByState(transform);
+		});
+		if (objects.length === 0) return;
+		const group = new DrawingGroupObject(getDrawingShapeKeyByDrawingSearch({
+			unitId,
+			subUnitId,
+			drawingId
+		}));
+		scene.addObject(group, DRAWING_OBJECT_LAYER_INDEX).attachTransformerTo(group);
+		group.addObjects(...objects);
+		syncGroupRotateEnabled(group, parent, scene, this._drawingManagerService, children);
+		if (parent.groupBaseBound) group.setBaseBound(parent.groupBaseBound);
+		if (parent.groupId) {
+			group.isInGroup = true;
+			insertGroupObject({
+				drawingId: parent.groupId,
+				unitId,
+				subUnitId
+			}, group, scene, this._drawingManagerService);
 		}
-		mainCtx.save();
-		this._draw(mainCtx);
-		mainCtx.restore();
-		this.makeDirty(false);
-		return this;
+		parent.transform && group.transformByState({
+			left: parent.transform.left,
+			top: parent.transform.top,
+			width: parent.transform.width,
+			height: parent.transform.height,
+			angle: parent.transform.angle
+		});
+		transformer.clearSelectedObjects();
+		transformer.setSelectedControl(group);
 	}
-	_draw(ctx) {
-		var _this$_cacheCanvas2, _this$_cacheCanvas3;
-		const { width: engineWidth, height: engineHeight } = this.getScene().getEngine();
-		this._initialCacheCanvas();
-		(_this$_cacheCanvas2 = this._cacheCanvas) === null || _this$_cacheCanvas2 === void 0 || _this$_cacheCanvas2.clear();
-		const cacheCtx = (_this$_cacheCanvas3 = this._cacheCanvas) === null || _this$_cacheCanvas3 === void 0 ? void 0 : _this$_cacheCanvas3.getContext();
-		if (cacheCtx == null) return;
-		cacheCtx.save();
-		Rect.drawWith(cacheCtx, {
-			left: 0,
-			top: 0,
-			width: engineWidth,
-			height: engineHeight,
-			fill: "rgba(0, 0, 0, 0.5)"
+	_ungroupDrawings(drawings) {
+		drawings.forEach((drawing) => {
+			this._ungroupDrawing(drawing);
 		});
-		cacheCtx.setTransform(ctx.getTransform());
-		this._clipForApplyObject(cacheCtx);
-		this._applyCache(ctx);
-		cacheCtx.restore();
 	}
-	_clipForApplyObject(cacheCtx) {
-		let objectType = 0;
-		if (this._prstGeom != null) objectType = 1;
-		cacheCtx.globalCompositeOperation = "destination-out";
-		cacheCtx.beginPath();
-		if (objectType === 0) {
-			const m = this.transform.getMatrix();
-			cacheCtx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
-			cacheCtx.rect(0, 0, this.width, this.height);
-			cacheCtx.fill();
-		}
-	}
-	_applyProps() {
-		if (this._applyTransform == null) return;
-		let cropLeft = 0;
-		let cropTop = 0;
-		let cropRight = 0;
-		let cropBottom = 0;
-		const { left: applyLeft = 0, top: applyTop = 0, width: applyWidth = 0, height: applyHeight = 0, angle } = this._applyTransform;
-		if (this._srcRect != null) {
-			const { left = 0, top = 0, right = 0, bottom = 0 } = this._srcRect;
-			cropLeft = left;
-			cropTop = top;
-			cropRight = right;
-			cropBottom = bottom;
-		}
-		const left = applyLeft + cropLeft;
-		const top = applyTop + cropTop;
-		this.transformByState({
-			left,
-			top,
-			width: applyLeft + applyWidth - cropRight - left,
-			height: applyTop + applyHeight - cropBottom - top,
-			angle
+	_ungroupDrawing(drawing) {
+		const { parent, children } = drawing;
+		const renderObject = this._getSceneAndTransformerByDrawingSearch(parent.unitId);
+		if (renderObject == null) return;
+		const { scene, transformer } = renderObject;
+		children.forEach((drawing) => {
+			const drawingKey = getDrawingShapeKeyByDrawingSearch(drawing);
+			const object = scene.getObjectIncludeInGroup(drawingKey);
+			if (object == null) return true;
+			if (object == null) return;
+			const { transform } = drawing;
+			if (transform == null) return;
+			if (object.classType === RENDER_CLASS_TYPE.GROUP) object.transformByState({
+				left: transform.left,
+				top: transform.top
+			});
+			else object.transformByState(transform);
 		});
-	}
-	_applyCache(ctx) {
-		if (!ctx || this._cacheCanvas == null) return;
-		const cacheCtx = this._cacheCanvas.getContext();
-		cacheCtx.save();
-		ctx.save();
-		ctx.setTransform(1, 0, 0, 1, 0, 0);
-		cacheCtx.setTransform(1, 0, 0, 1, 0, 0);
-		ctx.drawImage(this._cacheCanvas.getCanvasEle(), 0, 0);
-		ctx.restore();
-		cacheCtx.restore();
-	}
-	_initialCacheCanvas() {
-		if (this._cacheCanvas != null) return;
-		const scene = this.getScene();
-		if (scene == null) return;
-		this._cacheCanvas = new Canvas();
-		const engine = scene.getEngine();
-		this._cacheCanvas.setSize(engine.width, engine.height);
-		engine.onTransformChange$.subscribeEvent(() => {
-			var _this$_cacheCanvas4;
-			(_this$_cacheCanvas4 = this._cacheCanvas) === null || _this$_cacheCanvas4 === void 0 || _this$_cacheCanvas4.setSize(engine.width, engine.height);
-			this.makeDirty(true);
+		const groupKey = getDrawingShapeKeyByDrawingSearch(parent);
+		const group = scene.getObject(groupKey);
+		const { width, height } = group;
+		group.getObjects().forEach((object) => {
+			group.removeSelfObjectAndTransform(object.oKey, width, height);
 		});
+		group.dispose();
+		transformer.clearSelectedObjects();
 	}
-};
-
-//#endregion
-//#region src/controllers/image-cropper.controller.ts
-let ImageCropperController = class ImageCropperController extends Disposable {
-	constructor(_commandService, _drawingManagerService, _renderManagerService, _univerInstanceService, _messageService, _localeService) {
-		super();
-		this._commandService = _commandService;
-		this._drawingManagerService = _drawingManagerService;
-		this._renderManagerService = _renderManagerService;
-		this._univerInstanceService = _univerInstanceService;
-		this._messageService = _messageService;
-		this._localeService = _localeService;
-		_defineProperty(this, "_sceneListenerOnImageMap", /* @__PURE__ */ new WeakSet());
-		this._init();
-	}
-	_init() {
-		this._initOpenCrop();
-		this._initCloseCrop();
-		this._initAutoCrop();
-	}
-	_initAutoCrop() {
-		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
-			if (command.id !== AutoImageCropOperation.id) return;
-			const params = command.params;
-			if (params == null) return;
-			const { cropType } = params;
-			const drawingParams = this._drawingManagerService.getFocusDrawings();
-			if (drawingParams.length !== 1) return;
-			const { unitId, subUnitId, drawingId } = drawingParams[0];
-			const renderObject = this._renderManagerService.getRenderById(unitId);
-			const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-			if (scene == null) return true;
-			if (this._searchCropObject(scene) != null) this._commandService.syncExecuteCommand(CloseImageCropOperation.id, { isAuto: true });
-			const imageShapeKey = getDrawingShapeKeyByDrawingSearch({
+	_drawingAlign(params) {
+		const { alignType } = params;
+		const drawings = params.drawings || this._drawingManagerService.getFocusDrawings();
+		if (alignType === "0") return;
+		const drawingTransformCaches = [];
+		let minLeft = Number.POSITIVE_INFINITY;
+		let minTop = Number.POSITIVE_INFINITY;
+		let maxRight = Number.NEGATIVE_INFINITY;
+		let maxBottom = Number.NEGATIVE_INFINITY;
+		let drawingCount = 0;
+		drawings.forEach((drawing) => {
+			const { unitId, subUnitId, drawingId, drawingType } = drawing;
+			const drawingParam = this._drawingManagerService.getDrawingByParam({
 				unitId,
 				subUnitId,
 				drawingId
 			});
-			const imageShape = scene.getObject(imageShapeKey);
-			if (!(imageShape instanceof Image)) {
-				this._messageService.show({
-					type: MessageType.Error,
-					content: this._localeService.t("drawing-ui.image-cropper.error")
-				});
-				return;
+			if (drawingParam == null || drawingParam.transform == null) return;
+			drawingTransformCaches.push({
+				unitId,
+				subUnitId,
+				drawingId,
+				drawingType,
+				transform: drawingParam.transform
+			});
+			const { left = 0, top = 0, width = 0, height = 0 } = drawingParam.transform;
+			minLeft = Math.min(minLeft, left);
+			minTop = Math.min(minTop, top);
+			maxRight = Math.max(maxRight, left + width);
+			maxBottom = Math.max(maxBottom, top + height);
+			drawingCount++;
+		});
+		if (drawingCount === 0) return;
+		this._sortDrawingTransform(drawingTransformCaches, alignType);
+		this._applyAlignType(drawingTransformCaches, alignType, minLeft, minTop, maxRight, maxBottom, drawingCount);
+	}
+	_applyAlignType(drawingTransformCaches, alignType, minLeft, minTop, maxRight, maxBottom, drawingCount) {
+		const averageHorizon = Math.round((maxRight - minLeft) / drawingCount * 10) / 10;
+		const averageVertical = Math.round((maxBottom - minTop) / drawingCount * 10) / 10;
+		const updateParams = [];
+		const renderObject = this._getSceneAndTransformerByDrawingSearch(drawingTransformCaches[0].unitId);
+		if (renderObject == null) return;
+		const { scene, transformer } = renderObject;
+		drawingTransformCaches.forEach((drawingTransformCache, index) => {
+			const { unitId, subUnitId, drawingId, transform, drawingType } = drawingTransformCache;
+			const { left = 0, top = 0, width = 0, height = 0 } = transform;
+			let newLeft = left;
+			let newTop = top;
+			switch (alignType) {
+				case "1":
+					newLeft = minLeft;
+					break;
+				case "2":
+					newLeft = minLeft + (maxRight - minLeft) / 2 - width / 2;
+					break;
+				case "3":
+					newLeft = maxRight - width;
+					break;
+				case "4":
+					newTop = minTop;
+					break;
+				case "5":
+					newTop = minTop + (maxBottom - minTop) / 2 - height / 2;
+					break;
+				case "6":
+					newTop = maxBottom - height;
+					break;
+				case "7":
+					newLeft = minLeft + averageHorizon * index;
+					break;
+				case "8":
+					newTop = minTop + averageVertical * index;
+					break;
+				default: break;
 			}
-			if (imageShape == null) return;
-			this._updateCropperObject(cropType, imageShape);
-			this._commandService.executeCommand(OpenImageCropOperation.id, {
+			if (newLeft !== left || newTop !== top) updateParams.push({
 				unitId,
 				subUnitId,
-				drawingId
+				drawingId,
+				drawingType,
+				transform: {
+					left: newLeft,
+					top: newTop
+				}
 			});
+		});
+		this._drawingManagerService.featurePluginUpdateNotification(updateParams);
+		transformer.refreshControls().changeNotification();
+	}
+	_sortDrawingTransform(drawingTransformCaches, alignType) {
+		drawingTransformCaches.sort((a, b) => {
+			const aTransform = a.transform;
+			const bTransform = b.transform;
+			const { left: aLeft = 0, top: aTop = 0, width: aWidth = 0, height: aHeight = 0 } = aTransform;
+			const { left: bLeft = 0, top: bTop = 0, width: bWidth = 0, height: bHeight = 0 } = bTransform;
+			switch (alignType) {
+				case "1": return aLeft - bLeft;
+				case "2": return aLeft + aWidth / 2 - (bLeft + bWidth / 2);
+				case "3": return aLeft + aWidth - (bLeft + bWidth);
+				case "4": return aTop - bTop;
+				case "5": return aTop + aHeight / 2 - (bTop + bHeight / 2);
+				case "6": return aTop + aHeight - (bTop + bHeight);
+				case "7": return aLeft + aWidth / 2 - (bLeft + bWidth / 2);
+				case "8": return aTop + aHeight / 2 - (bTop + bHeight / 2);
+				default: return 0;
+			}
+		});
+	}
+	_drawingArrangeListener() {
+		this.disposeWithMe(this._drawingManagerService.order$.subscribe((params) => {
+			this._drawingArrange(params);
 		}));
 	}
-	_calculateSrcRectByRatio(left, top, width, height, numerator, denominator) {
-		const srcRatio = width / height;
-		const ratio = numerator / denominator;
-		let newWidth = width;
-		let newHeight = height;
-		if (srcRatio > ratio) newWidth = height * ratio;
-		else newHeight = width / ratio;
-		const newLeft = (width - newWidth) / 2;
-		const newTop = (height - newHeight) / 2;
-		return {
-			left: precisionTo(newLeft, 1),
-			top: precisionTo(newTop, 1),
-			right: precisionTo(width - (newLeft + newWidth), 1),
-			bottom: precisionTo(height - (newTop + newHeight), 1)
-		};
+	_drawingArrange(params) {
+		const { unitId, subUnitId, drawingIds } = params;
+		const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+		if (renderObject == null) return;
+		const { scene } = renderObject;
+		drawingIds.forEach((drawingId) => {
+			const oKey = getDrawingShapeKeyByDrawingSearch({
+				unitId,
+				subUnitId,
+				drawingId
+			});
+			const drawingShapes = scene.fuzzyMathObjects(oKey, true);
+			if (drawingShapes == null || drawingShapes.length === 0) return;
+			const index = this._drawingManagerService.getDrawingOrder(unitId, subUnitId).indexOf(drawingId);
+			for (const shape of drawingShapes) {
+				shape.setProps({ zIndex: index });
+				shape.makeDirty();
+			}
+		});
 	}
-	_updateCropperObject(cropType, imageShape) {
-		const { left, top, width, height } = imageShape.calculateTransformWithSrcRect();
-		let newSrcRect;
-		switch (cropType) {
-			case "1":
-				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 1, 1);
-				break;
-			case "2":
-				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 16, 9);
-				break;
-			case "3":
-				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 9, 16);
-				break;
-			case "4":
-				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 5, 4);
-				break;
-			case "5":
-				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 4, 5);
-				break;
-			case "6":
-				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 4, 3);
-				break;
-			case "7":
-				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 3, 4);
-				break;
-			case "8":
-				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 3, 2);
-				break;
-			case "9":
-				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 2, 3);
-				break;
-			case "0":
-			default: break;
-		}
-		if (newSrcRect == null) return;
-		imageShape.setSrcRect(newSrcRect);
-		const { left: newLeft = 0, top: newTop = 0, bottom: newBottom = 0, right: newRight = 0 } = newSrcRect;
-		imageShape.transformByStateCloseCropper({
-			left: left + newLeft,
-			top: top + newTop,
-			width: width - newRight - newLeft,
-			height: height - newBottom - newTop
+	_drawingAddListener() {
+		this.disposeWithMe(this._drawingManagerService.add$.subscribe((params) => {
+			this._insertDrawing(params);
+		}));
+	}
+	_insertDrawing(params) {
+		const sceneList = [];
+		params.forEach((param) => {
+			const { unitId } = param;
+			if (this._drawingManagerService.getDrawingByParam(param) == null) return;
+			const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+			if (renderObject == null) return;
+			const { scene } = renderObject;
+			if (!sceneList.includes(scene)) sceneList.push(scene);
+		});
+		sceneList.forEach((scene) => {
+			if (this._sceneListenerOnDrawingMap.has(scene)) return;
+			this._addListenerOnDrawing(scene);
+			this._sceneListenerOnDrawingMap.add(scene);
 		});
 	}
-	_initOpenCrop() {
-		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
-			if (command.id !== OpenImageCropOperation.id) return;
-			const params = command.params;
-			if (params == null) return;
-			const { unitId, subUnitId, drawingId } = params;
-			const renderObject = this._renderManagerService.getRenderById(unitId);
-			const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-			if (scene == null) return true;
-			if (!this._sceneListenerOnImageMap.has(scene)) {
-				this._addListenerOnImage(scene);
-				this._sceneListenerOnImageMap.add(scene);
-			}
-			if (this._drawingManagerService.getDrawingByParam({
-				unitId,
-				subUnitId,
-				drawingId
-			}) == null) return;
-			const imageShapeKey = getDrawingShapeKeyByDrawingSearch({
-				unitId,
-				subUnitId,
-				drawingId
+	_drawingRemoveListener() {
+		this.disposeWithMe(this._drawingManagerService.remove$.subscribe((params) => {
+			params.forEach((param) => {
+				const { unitId, subUnitId, drawingId } = param;
+				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+				if (renderObject == null) return;
+				const { scene } = renderObject;
+				if (disposeDrawingRenderObject(scene, {
+					unitId,
+					subUnitId,
+					drawingId
+				})) {
+					var _scene$getTransformer;
+					(_scene$getTransformer = scene.getTransformer()) === null || _scene$getTransformer === void 0 || _scene$getTransformer.clearSelectedObjects();
+				}
 			});
-			const imageShape = scene.getObject(imageShapeKey);
-			if (imageShape == null) return;
-			if (!(imageShape instanceof Image)) {
-				this._messageService.show({
-					type: MessageType.Error,
-					content: this._localeService.t("drawing-ui.image-cropper.error")
+		}));
+	}
+	_drawingUpdateListener() {
+		this.disposeWithMe(this._drawingManagerService.update$.subscribe((params) => {
+			params.forEach((param) => {
+				var _setClipBounds, _scene$getTransformer2;
+				const { unitId, subUnitId, drawingId } = param;
+				const drawingParam = this._drawingManagerService.getDrawingByParam(param);
+				if (drawingParam == null) return;
+				const { transform, drawingType } = drawingParam;
+				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+				if (renderObject == null) return;
+				const { scene, transformer } = renderObject;
+				if (transform == null) return true;
+				const { left = 0, top = 0, width = 0, height = 0, angle = 0, flipX = false, flipY = false, skewX = 0, skewY = 0 } = transform;
+				const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({
+					unitId,
+					subUnitId,
+					drawingId
 				});
-				return;
-			}
-			const transformer = scene.getTransformer();
-			transformer === null || transformer === void 0 || transformer.clearControls();
-			const imageCropperObject = new ImageCropperObject(`${imageShapeKey}-crop`, {
-				srcRect: imageShape.srcRect,
-				prstGeom: imageShape.prstGeom,
-				applyTransform: imageShape.calculateTransformWithSrcRect()
+				const drawingShape = scene.getObject(drawingShapeKey);
+				if (drawingShape == null) return true;
+				drawingShape.transformByState({
+					left,
+					top,
+					width,
+					height,
+					angle,
+					flipX,
+					flipY,
+					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();
 			});
-			scene.addObject(imageCropperObject, imageShape.getLayerIndex() + 1).attachTransformerTo(imageCropperObject);
-			transformer === null || transformer === void 0 || transformer.createControlForCopper(imageCropperObject);
-			this._addHoverForImageCopper(imageCropperObject);
-			imageShape.openRenderByCropper();
-			transformer === null || transformer === void 0 || transformer.refreshControls();
-			imageCropperObject.makeDirty(true);
-			this._commandService.syncExecuteCommand(SetDrawingSelectedOperation.id, [{
-				unitId,
-				subUnitId,
-				drawingId
-			}]);
 		}));
 	}
-	_searchCropObject(scene) {
-		const objects = scene.getAllObjectsByOrder();
-		for (const object of objects) if (object instanceof ImageCropperObject) return object;
-	}
-	_initCloseCrop() {
-		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
-			if (command.id !== CloseImageCropOperation.id) return;
-			const currentUnit = this._univerInstanceService.getFocusedUnit();
-			if (currentUnit == null) return;
-			const unitId = currentUnit.getUnitId();
-			const renderObject = this._renderManagerService.getRenderById(unitId);
-			const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-			if (scene == null) return true;
-			const imageCropperObject = this._searchCropObject(scene);
-			if (imageCropperObject == null) return;
-			const imageShape = this._getApplyObjectByCropObject(imageCropperObject);
-			if (imageShape == null) return;
-			const transformer = scene.getTransformerByCreate();
-			transformer.detachFrom(imageCropperObject);
-			transformer.clearCopperControl();
-			const srcRect = this._getSrcRectByTransformState(imageShape, imageCropperObject);
-			const drawingParam = this._drawingManagerService.getDrawingOKey(imageShape.oKey);
-			if (drawingParam != null) {
-				const { left, top, height, width } = imageCropperObject;
-				this._drawingManagerService.featurePluginUpdateNotification([{
-					...drawingParam,
-					transform: {
-						...drawingParam.transform,
-						left,
-						top,
-						height,
-						width
-					},
-					srcRect: srcRect.srcRectAngle
-				}]);
-			}
-			imageShape.setSrcRect({ ...srcRect.srcRectAngle });
-			imageShape.closeRenderByCropper();
-			imageShape.makeDirty(true);
-			imageCropperObject === null || imageCropperObject === void 0 || imageCropperObject.dispose();
-		}));
-		const sheetUnit$ = this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET).pipe(switchMap((workbook) => workbook ? workbook.activeSheet$ : of(null)));
-		this.disposeWithMe(sheetUnit$.subscribe(() => {
-			this._commandService.syncExecuteCommand(CloseImageCropOperation.id);
+	_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;
+				const drawingParam = this._drawingManagerService.getDrawingByParam(param);
+				if (drawingParam == null) return;
+				const { transform } = drawingParam;
+				const { scene } = renderObject;
+				if (transform == null) return true;
+				const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({
+					unitId,
+					subUnitId,
+					drawingId
+				});
+				const drawingShape = scene.getObjectIncludeInGroup(drawingShapeKey);
+				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,
+					top,
+					width,
+					height,
+					angle,
+					flipX,
+					flipY,
+					skewX,
+					skewY
+				});
+				(_setClipBounds2 = drawingShape.setClipBounds) === null || _setClipBounds2 === void 0 || _setClipBounds2.call(drawingShape, transform.clipBounds);
+				syncDrawingHiddenState(drawingShape, drawingParamWithRefreshMetadata);
+				ensureDrawingRenderLayer(scene, drawingShape, drawingParamWithRefreshMetadata);
+			});
 		}));
 	}
-	_getApplyObjectByCropObject(cropObject) {
-		const cropOKey = cropObject.oKey;
-		const applyOKey = cropOKey.slice(0, cropOKey.length - 5);
-		const scene = cropObject.getScene();
-		if (!scene) return null;
-		const applyObject = scene.getObject(applyOKey);
-		if (applyObject == null) return null;
-		return applyObject;
-	}
-	_addListenerOnImage(scene) {
-		const transformer = scene.getTransformerByCreate();
-		let startTransform = null;
-		this.disposeWithMe(transformer.changeStart$.subscribe((state) => {
-			const { objects } = state;
-			const cropObject = objects.values().next().value;
-			if (cropObject == null || !(cropObject instanceof ImageCropperObject)) return;
-			const { left, top, height, width, angle } = cropObject;
-			startTransform = {
-				left,
-				top,
-				height,
-				width,
-				angle
-			};
-			transformer.clearCopperControl();
-		}));
-		this.disposeWithMe(transformer.changeEnd$.subscribe((state) => {
-			const { objects } = state;
-			const cropObject = objects.values().next().value;
-			if (cropObject == null || !(cropObject instanceof ImageCropperObject)) return;
-			const { left, top, height, width, angle } = cropObject;
-			if (!checkIfMove({
-				left,
-				top,
-				height,
-				width,
-				angle
-			}, startTransform)) return;
-			const applyObject = this._getApplyObjectByCropObject(cropObject);
-			if (applyObject == null) return;
-			const srcRect = this._getSrcRectByTransformState(applyObject, cropObject);
-			cropObject.refreshSrcRect(srcRect.srcRect, applyObject.getState());
-			transformer.createControlForCopper(cropObject);
+	_drawingVisibleListener() {
+		this.disposeWithMe(this._drawingManagerService.visible$.subscribe((params) => {
+			params.forEach((param) => {
+				const { unitId, subUnitId, drawingId, visible } = param;
+				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+				if (renderObject == null) return;
+				const { scene } = renderObject;
+				const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({
+					unitId,
+					subUnitId,
+					drawingId
+				});
+				const drawingShape = scene.getObject(drawingShapeKey);
+				if (drawingShape == null) return true;
+				if (visible) drawingShape.show();
+				else drawingShape.hide();
+			});
 		}));
-		this._endCropListener(scene);
 	}
-	_addHoverForImageCopper(o) {
-		this.disposeWithMe(o.onPointerEnter$.subscribeEvent(() => {
-			o.cursor = CURSOR_TYPE.MOVE;
-		}));
-		this.disposeWithMe(o.onPointerLeave$.subscribeEvent(() => {
-			o.cursor = CURSOR_TYPE.DEFAULT;
-		}));
+	_filterUpdateParams(params, startTransforms) {
+		return params.filter((param, index) => {
+			if (param == null) return false;
+			const { transform } = param;
+			return checkIfMove(transform, startTransforms === null || startTransforms === void 0 ? void 0 : startTransforms[index]);
+		});
 	}
-	_endCropListener(scene) {
+	_addListenerOnDrawing(scene) {
 		const transformer = scene.getTransformerByCreate();
-		this.disposeWithMe(transformer.clearControl$.subscribe((changeSelf) => {
-			if (changeSelf === true) this._commandService.syncExecuteCommand(CloseImageCropOperation.id);
-		}));
-	}
-	_getSrcRectByTransformState(applyObject, imageCropperObject) {
-		const { left, top, height, width, strokeWidth, angle: copperAngle } = imageCropperObject;
-		const { left: applyLeft, top: applyTop, width: applyWidth, height: applyHeight, angle: applyAngle, strokeWidth: applyStrokeWidth } = applyObject;
-		const newLeft = left - applyLeft;
-		const newTop = top - applyTop;
-		const srcRect = {
-			left: newLeft,
-			top: newTop,
-			right: applyWidth - newLeft - width,
-			bottom: applyHeight - newTop - height
-		};
-		const srcRectAngle = { ...srcRect };
-		if (applyAngle !== 0) {
-			const centerPoint = new Vector2(left + width / 2, top + height / 2);
-			const newCenterPoint = new Vector2(applyWidth / 2 + applyLeft, applyHeight / 2 + applyTop);
-			const vertexPoint = new Vector2(applyLeft, applyTop);
-			vertexPoint.rotateByPoint(degToRad(applyAngle), newCenterPoint);
-			const applyFinalPoint = vertexPoint.clone();
-			applyFinalPoint.rotateByPoint(degToRad(-applyAngle), centerPoint);
-			const newAngleLeft = left - applyFinalPoint.x;
-			const newAngleTop = top - applyFinalPoint.y;
-			srcRectAngle.left = newAngleLeft;
-			srcRectAngle.top = newAngleTop;
-			srcRectAngle.right = applyWidth - newAngleLeft - width;
-			srcRectAngle.bottom = applyHeight - newAngleTop - height;
-		}
-		return {
-			srcRect,
-			srcRectAngle
-		};
+		let startTransforms = null;
+		this.disposeWithMe(toDisposable(transformer.changeStart$.subscribe((state) => {
+			const { objects } = state;
+			const objectArray = Array.from(objects.values());
+			const drawings = [];
+			startTransforms = objectArray.map((object) => {
+				const { left, top, height, width, angle, oKey, isInGroup } = object;
+				const drawing = this._drawingManagerService.getDrawingOKey(oKey);
+				if (isInGroup || object instanceof Group) {
+					let group = object.ancestorGroup;
+					if (group == null && object instanceof Group) group = object;
+					if (group == null) return null;
+					const groupDrawing = this._drawingManagerService.getDrawingOKey(group.oKey);
+					if (groupDrawing) {
+						const { unitId, subUnitId, drawingId } = groupDrawing;
+						drawings.push({
+							unitId,
+							subUnitId,
+							drawingId
+						});
+						const { left, top, height, width, angle } = group;
+						return {
+							left,
+							top,
+							height,
+							width,
+							angle
+						};
+					}
+				} else if (drawing != null) {
+					const { unitId, subUnitId, drawingId } = drawing;
+					drawings.push({
+						unitId,
+						subUnitId,
+						drawingId
+					});
+					return {
+						left,
+						top,
+						height,
+						width,
+						angle
+					};
+				}
+				return null;
+			}).filter((transform) => transform != null);
+			if (drawings.length > 0) this._commandService.syncExecuteCommand(SetDrawingSelectedOperation.id, drawings);
+			else this._commandService.syncExecuteCommand(SetDrawingSelectedOperation.id, []);
+		})));
+		this.disposeWithMe(toDisposable(transformer.changeEnd$.subscribe((state) => {
+			const { objects } = state;
+			const params = this._filterUpdateParams(getUpdateParams(objects, this._drawingManagerService), startTransforms);
+			if (params.length > 0) this._drawingManagerService.featurePluginUpdateNotification(params);
+		})));
 	}
 };
-ImageCropperController = __decorate([
-	__decorateParam(0, ICommandService),
-	__decorateParam(1, IDrawingManagerService),
+DrawingUpdateController = __decorate([
+	__decorateParam(0, IUniverInstanceService),
+	__decorateParam(1, ICommandService),
 	__decorateParam(2, IRenderManagerService),
-	__decorateParam(3, IUniverInstanceService),
-	__decorateParam(4, IMessageService),
-	__decorateParam(5, Inject(LocaleService))
-], ImageCropperController);
+	__decorateParam(3, IDrawingManagerService)
+], DrawingUpdateController);
 
 //#endregion
-//#region src/controllers/image-update.controller.ts
-let ImageUpdateController = class ImageUpdateController extends Disposable {
-	constructor(_commandService, _renderManagerService, _drawingManagerService, _dialogService, _imageIoService, _currentUniverService, _drawingRenderService) {
-		super();
-		this._commandService = _commandService;
-		this._renderManagerService = _renderManagerService;
-		this._drawingManagerService = _drawingManagerService;
-		this._dialogService = _dialogService;
-		this._imageIoService = _imageIoService;
-		this._currentUniverService = _currentUniverService;
-		this._drawingRenderService = _drawingRenderService;
-		this._initialize();
+//#region src/views/crop/image-cropper-object.ts
+var ImageCropperObject = class extends Shape {
+	constructor(key, props) {
+		if (props == null) props = {};
+		props.transformerConfig = {
+			keepRatio: false,
+			isCropper: true,
+			anchorFill: "rgb(0, 0, 0)",
+			anchorStroke: "rgb(255, 255, 255)",
+			anchorSize: 24
+		};
+		super(key, props);
+		_defineProperty(this, "_srcRect", void 0);
+		_defineProperty(this, "_prstGeom", void 0);
+		_defineProperty(this, "_applyTransform", void 0);
+		_defineProperty(this, "_dragPadding", 8);
+		_defineProperty(this, "_cacheCanvas", void 0);
+		if (props === null || props === void 0 ? void 0 : props.srcRect) this._srcRect = props.srcRect;
+		if (props === null || props === void 0 ? void 0 : props.prstGeom) this._prstGeom = props.prstGeom;
+		if (props === null || props === void 0 ? void 0 : props.applyTransform) this._applyTransform = props.applyTransform;
+		if (props === null || props === void 0 ? void 0 : props.dragPadding) this._dragPadding = props.dragPadding;
+		this._applyProps();
+	}
+	refreshSrcRect(value, transform) {
+		this._srcRect = value;
+		this._applyTransform = transform;
+		this._applyProps();
+	}
+	get srcRect() {
+		return this._srcRect;
 	}
 	dispose() {
+		var _this$_cacheCanvas;
 		super.dispose();
+		(_this$_cacheCanvas = this._cacheCanvas) === null || _this$_cacheCanvas === void 0 || _this$_cacheCanvas.dispose();
+		this._srcRect = null;
 	}
-	_initialize() {
-		this._drawingAddListener();
-		this._commandExecutedListener();
-		this._imageUpdateListener();
+	isHit(coord) {
+		const oCoord = this.getInverseCoord(coord);
+		if (oCoord.x >= -this.strokeWidth / 2 && oCoord.x <= this.width + this.strokeWidth / 2 && oCoord.y >= -this.strokeWidth / 2 && oCoord.y <= this.height + this.strokeWidth / 2 && !this._inSurround(oCoord)) return true;
+		return false;
 	}
-	_commandExecutedListener() {
-		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
-			if (command.id === ImageResetSizeOperation.id) {
-				const params = command.params;
-				if (params == null) return;
-				this._resetImageSize(params);
-			}
-		}));
+	_inSurround(oCoord) {
+		const padding = this._dragPadding;
+		if (oCoord.x >= padding - this.strokeWidth / 2 && oCoord.x <= this.width + this.strokeWidth / 2 - padding && oCoord.y >= padding - this.strokeWidth / 2 && oCoord.y <= this.height + this.strokeWidth / 2 - padding) return true;
+		return false;
 	}
-	_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()
-		};
+	render(mainCtx, bounds) {
+		if (!this.visible) {
+			this.makeDirty(false);
+			return this;
+		}
+		mainCtx.save();
+		this._draw(mainCtx);
+		mainCtx.restore();
+		this.makeDirty(false);
+		return this;
 	}
-	_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();
+	_draw(ctx) {
+		var _this$_cacheCanvas2, _this$_cacheCanvas3;
+		const { width: engineWidth, height: engineHeight } = this.getScene().getEngine();
+		this._initialCacheCanvas();
+		(_this$_cacheCanvas2 = this._cacheCanvas) === null || _this$_cacheCanvas2 === void 0 || _this$_cacheCanvas2.clear();
+		const cacheCtx = (_this$_cacheCanvas3 = this._cacheCanvas) === null || _this$_cacheCanvas3 === void 0 ? void 0 : _this$_cacheCanvas3.getContext();
+		if (cacheCtx == null) return;
+		cacheCtx.save();
+		Rect.drawWith(cacheCtx, {
+			left: 0,
+			top: 0,
+			width: engineWidth,
+			height: engineHeight,
+			fill: "rgba(0, 0, 0, 0.5)"
 		});
-		this._commandService.syncExecuteCommand(SetDrawingSelectedOperation.id, params);
+		cacheCtx.setTransform(ctx.getTransform());
+		this._clipForApplyObject(cacheCtx);
+		this._applyCache(ctx);
+		cacheCtx.restore();
 	}
-	_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);
-		}));
+	_clipForApplyObject(cacheCtx) {
+		let objectType = 0;
+		if (this._prstGeom != null) objectType = 1;
+		cacheCtx.globalCompositeOperation = "destination-out";
+		cacheCtx.beginPath();
+		if (objectType === 0) {
+			const m = this.transform.getMatrix();
+			cacheCtx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
+			cacheCtx.rect(0, 0, this.width, this.height);
+			cacheCtx.fill();
+		}
 	}
-	_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);
-			}
+	_applyProps() {
+		if (this._applyTransform == null) return;
+		let cropLeft = 0;
+		let cropTop = 0;
+		let cropRight = 0;
+		let cropBottom = 0;
+		const { left: applyLeft = 0, top: applyTop = 0, width: applyWidth = 0, height: applyHeight = 0, angle } = this._applyTransform;
+		if (this._srcRect != null) {
+			const { left = 0, top = 0, right = 0, bottom = 0 } = this._srcRect;
+			cropLeft = left;
+			cropTop = top;
+			cropRight = right;
+			cropBottom = bottom;
+		}
+		const left = applyLeft + cropLeft;
+		const top = applyTop + cropTop;
+		this.transformByState({
+			left,
+			top,
+			width: applyLeft + applyWidth - cropRight - left,
+			height: applyTop + applyHeight - cropBottom - top,
+			angle
 		});
 	}
-	_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;
-		})));
+	_applyCache(ctx) {
+		if (!ctx || this._cacheCanvas == null) return;
+		const cacheCtx = this._cacheCanvas.getContext();
+		cacheCtx.save();
+		ctx.save();
+		ctx.setTransform(1, 0, 0, 1, 0, 0);
+		cacheCtx.setTransform(1, 0, 0, 1, 0, 0);
+		ctx.drawImage(this._cacheCanvas.getCanvasEle(), 0, 0);
+		ctx.restore();
+		cacheCtx.restore();
 	}
-	_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);
-		})));
+	_initialCacheCanvas() {
+		if (this._cacheCanvas != null) return;
+		const scene = this.getScene();
+		if (scene == null) return;
+		this._cacheCanvas = new Canvas();
+		const engine = scene.getEngine();
+		this._cacheCanvas.setSize(engine.width, engine.height);
+		engine.onTransformChange$.subscribeEvent(() => {
+			var _this$_cacheCanvas4;
+			(_this$_cacheCanvas4 = this._cacheCanvas) === null || _this$_cacheCanvas4 === void 0 || _this$_cacheCanvas4.setSize(engine.width, engine.height);
+			this.makeDirty(true);
+		});
 	}
 };
-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);
+//#region src/controllers/image-cropper.controller.ts
+let ImageCropperController = class ImageCropperController extends Disposable {
+	constructor(_commandService, _drawingManagerService, _renderManagerService, _univerInstanceService, _messageService, _localeService) {
+		super();
+		this._commandService = _commandService;
+		this._drawingManagerService = _drawingManagerService;
+		this._renderManagerService = _renderManagerService;
+		this._univerInstanceService = _univerInstanceService;
+		this._messageService = _messageService;
+		this._localeService = _localeService;
+		_defineProperty(this, "_sceneListenerOnImageMap", /* @__PURE__ */ new WeakSet());
+		this._init();
+	}
+	_init() {
+		this._initOpenCrop();
+		this._initCloseCrop();
+		this._initAutoCrop();
+	}
+	_initAutoCrop() {
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (command.id !== AutoImageCropOperation.id) return;
+			const params = command.params;
+			if (params == null) return;
+			const { cropType } = params;
+			const drawingParams = this._drawingManagerService.getFocusDrawings();
+			if (drawingParams.length !== 1) return;
+			const { unitId, subUnitId, drawingId } = drawingParams[0];
+			const renderObject = this._renderManagerService.getRenderById(unitId);
+			const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+			if (scene == null) return true;
+			if (this._searchCropObject(scene) != null) this._commandService.syncExecuteCommand(CloseImageCropOperation.id, { isAuto: true });
+			const imageShapeKey = getDrawingShapeKeyByDrawingSearch({
+				unitId,
+				subUnitId,
+				drawingId
+			});
+			const imageShape = scene.getObject(imageShapeKey);
+			if (!(imageShape instanceof Image)) {
+				this._messageService.show({
+					type: MessageType.Error,
+					content: this._localeService.t("drawing-ui.image-cropper.error")
+				});
+				return;
+			}
+			if (imageShape == null) return;
+			this._updateCropperObject(cropType, imageShape);
+			this._commandService.executeCommand(OpenImageCropOperation.id, {
+				unitId,
+				subUnitId,
+				drawingId
+			});
+		}));
+	}
+	_calculateSrcRectByRatio(left, top, width, height, numerator, denominator) {
+		const srcRatio = width / height;
+		const ratio = numerator / denominator;
+		let newWidth = width;
+		let newHeight = height;
+		if (srcRatio > ratio) newWidth = height * ratio;
+		else newHeight = width / ratio;
+		const newLeft = (width - newWidth) / 2;
+		const newTop = (height - newHeight) / 2;
+		return {
+			left: precisionTo(newLeft, 1),
+			top: precisionTo(newTop, 1),
+			right: precisionTo(width - (newLeft + newWidth), 1),
+			bottom: precisionTo(height - (newTop + newHeight), 1)
 		};
-		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);
+	}
+	_updateCropperObject(cropType, imageShape) {
+		const { left, top, width, height } = imageShape.calculateTransformWithSrcRect();
+		let newSrcRect;
+		switch (cropType) {
+			case "1":
+				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 1, 1);
+				break;
+			case "2":
+				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 16, 9);
+				break;
+			case "3":
+				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 9, 16);
+				break;
+			case "4":
+				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 5, 4);
+				break;
+			case "5":
+				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 4, 5);
+				break;
+			case "6":
+				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 4, 3);
+				break;
+			case "7":
+				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 3, 4);
+				break;
+			case "8":
+				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 3, 2);
+				break;
+			case "9":
+				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 2, 3);
+				break;
+			case "0":
+			default: break;
+		}
+		if (newSrcRect == null) return;
+		imageShape.setSrcRect(newSrcRect);
+		const { left: newLeft = 0, top: newTop = 0, bottom: newBottom = 0, right: newRight = 0 } = newSrcRect;
+		imageShape.transformByStateCloseCropper({
+			left: left + newLeft,
+			top: top + newTop,
+			width: width - newRight - newLeft,
+			height: height - newBottom - newTop
 		});
-		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")
-	};
-}
+	}
+	_initOpenCrop() {
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (command.id !== OpenImageCropOperation.id) return;
+			const params = command.params;
+			if (params == null) return;
+			const { unitId, subUnitId, drawingId } = params;
+			const renderObject = this._renderManagerService.getRenderById(unitId);
+			const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+			if (scene == null) return true;
+			if (!this._sceneListenerOnImageMap.has(scene)) {
+				this._addListenerOnImage(scene);
+				this._sceneListenerOnImageMap.add(scene);
+			}
+			if (this._drawingManagerService.getDrawingByParam({
+				unitId,
+				subUnitId,
+				drawingId
+			}) == null) return;
+			const imageShapeKey = getDrawingShapeKeyByDrawingSearch({
+				unitId,
+				subUnitId,
+				drawingId
+			});
+			const imageShape = scene.getObject(imageShapeKey);
+			if (imageShape == null) return;
+			if (!(imageShape instanceof Image)) {
+				this._messageService.show({
+					type: MessageType.Error,
+					content: this._localeService.t("drawing-ui.image-cropper.error")
+				});
+				return;
+			}
+			const transformer = scene.getTransformer();
+			transformer === null || transformer === void 0 || transformer.clearControls();
+			const imageCropperObject = new ImageCropperObject(`${imageShapeKey}-crop`, {
+				srcRect: imageShape.srcRect,
+				prstGeom: imageShape.prstGeom,
+				applyTransform: imageShape.calculateTransformWithSrcRect()
+			});
+			scene.addObject(imageCropperObject, imageShape.getLayerIndex() + 1).attachTransformerTo(imageCropperObject);
+			transformer === null || transformer === void 0 || transformer.createControlForCopper(imageCropperObject);
+			this._addHoverForImageCopper(imageCropperObject);
+			imageShape.openRenderByCropper();
+			transformer === null || transformer === void 0 || transformer.refreshControls();
+			imageCropperObject.makeDirty(true);
+			this._commandService.syncExecuteCommand(SetDrawingSelectedOperation.id, [{
+				unitId,
+				subUnitId,
+				drawingId
+			}]);
+		}));
+	}
+	_searchCropObject(scene) {
+		const objects = scene.getAllObjectsByOrder();
+		for (const object of objects) if (object instanceof ImageCropperObject) return object;
+	}
+	_initCloseCrop() {
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (command.id !== CloseImageCropOperation.id) return;
+			const currentUnit = this._univerInstanceService.getFocusedUnit();
+			if (currentUnit == null) return;
+			const unitId = currentUnit.getUnitId();
+			const renderObject = this._renderManagerService.getRenderById(unitId);
+			const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+			if (scene == null) return true;
+			const imageCropperObject = this._searchCropObject(scene);
+			if (imageCropperObject == null) return;
+			const imageShape = this._getApplyObjectByCropObject(imageCropperObject);
+			if (imageShape == null) return;
+			const transformer = scene.getTransformerByCreate();
+			transformer.detachFrom(imageCropperObject);
+			transformer.clearCopperControl();
+			const srcRect = this._getSrcRectByTransformState(imageShape, imageCropperObject);
+			const drawingParam = this._drawingManagerService.getDrawingOKey(imageShape.oKey);
+			if (drawingParam != null) {
+				const { left, top, height, width } = imageCropperObject;
+				this._drawingManagerService.featurePluginUpdateNotification([{
+					...drawingParam,
+					transform: {
+						...drawingParam.transform,
+						left,
+						top,
+						height,
+						width
+					},
+					srcRect: srcRect.srcRectAngle
+				}]);
+			}
+			imageShape.setSrcRect({ ...srcRect.srcRectAngle });
+			imageShape.closeRenderByCropper();
+			imageShape.makeDirty(true);
+			imageCropperObject === null || imageCropperObject === void 0 || imageCropperObject.dispose();
+		}));
+		const sheetUnit$ = this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET).pipe(switchMap((workbook) => workbook ? workbook.activeSheet$ : of(null)));
+		this.disposeWithMe(sheetUnit$.subscribe(() => {
+			this._commandService.syncExecuteCommand(CloseImageCropOperation.id);
+		}));
+	}
+	_getApplyObjectByCropObject(cropObject) {
+		const cropOKey = cropObject.oKey;
+		const applyOKey = cropOKey.slice(0, cropOKey.length - 5);
+		const scene = cropObject.getScene();
+		if (!scene) return null;
+		const applyObject = scene.getObject(applyOKey);
+		if (applyObject == null) return null;
+		return applyObject;
+	}
+	_addListenerOnImage(scene) {
+		const transformer = scene.getTransformerByCreate();
+		let startTransform = null;
+		this.disposeWithMe(transformer.changeStart$.subscribe((state) => {
+			const { objects } = state;
+			const cropObject = objects.values().next().value;
+			if (cropObject == null || !(cropObject instanceof ImageCropperObject)) return;
+			const { left, top, height, width, angle } = cropObject;
+			startTransform = {
+				left,
+				top,
+				height,
+				width,
+				angle
+			};
+			transformer.clearCopperControl();
+		}));
+		this.disposeWithMe(transformer.changeEnd$.subscribe((state) => {
+			const { objects } = state;
+			const cropObject = objects.values().next().value;
+			if (cropObject == null || !(cropObject instanceof ImageCropperObject)) return;
+			const { left, top, height, width, angle } = cropObject;
+			if (!checkIfMove({
+				left,
+				top,
+				height,
+				width,
+				angle
+			}, startTransform)) return;
+			const applyObject = this._getApplyObjectByCropObject(cropObject);
+			if (applyObject == null) return;
+			const srcRect = this._getSrcRectByTransformState(applyObject, cropObject);
+			cropObject.refreshSrcRect(srcRect.srcRect, applyObject.getState());
+			transformer.createControlForCopper(cropObject);
+		}));
+		this._endCropListener(scene);
+	}
+	_addHoverForImageCopper(o) {
+		this.disposeWithMe(o.onPointerEnter$.subscribeEvent(() => {
+			o.cursor = CURSOR_TYPE.MOVE;
+		}));
+		this.disposeWithMe(o.onPointerLeave$.subscribeEvent(() => {
+			o.cursor = CURSOR_TYPE.DEFAULT;
+		}));
+	}
+	_endCropListener(scene) {
+		const transformer = scene.getTransformerByCreate();
+		this.disposeWithMe(transformer.clearControl$.subscribe((changeSelf) => {
+			if (changeSelf === true) this._commandService.syncExecuteCommand(CloseImageCropOperation.id);
+		}));
+	}
+	_getSrcRectByTransformState(applyObject, imageCropperObject) {
+		const { left, top, height, width, strokeWidth, angle: copperAngle } = imageCropperObject;
+		const { left: applyLeft, top: applyTop, width: applyWidth, height: applyHeight, angle: applyAngle, strokeWidth: applyStrokeWidth } = applyObject;
+		const newLeft = left - applyLeft;
+		const newTop = top - applyTop;
+		const srcRect = {
+			left: newLeft,
+			top: newTop,
+			right: applyWidth - newLeft - width,
+			bottom: applyHeight - newTop - height
+		};
+		const srcRectAngle = { ...srcRect };
+		if (applyAngle !== 0) {
+			const centerPoint = new Vector2(left + width / 2, top + height / 2);
+			const newCenterPoint = new Vector2(applyWidth / 2 + applyLeft, applyHeight / 2 + applyTop);
+			const vertexPoint = new Vector2(applyLeft, applyTop);
+			vertexPoint.rotateByPoint(degToRad(applyAngle), newCenterPoint);
+			const applyFinalPoint = vertexPoint.clone();
+			applyFinalPoint.rotateByPoint(degToRad(-applyAngle), centerPoint);
+			const newAngleLeft = left - applyFinalPoint.x;
+			const newAngleTop = top - applyFinalPoint.y;
+			srcRectAngle.left = newAngleLeft;
+			srcRectAngle.top = newAngleTop;
+			srcRectAngle.right = applyWidth - newAngleLeft - width;
+			srcRectAngle.bottom = applyHeight - newAngleTop - height;
+		}
+		return {
+			srcRect,
+			srcRectAngle
+		};
+	}
+};
+ImageCropperController = __decorate([
+	__decorateParam(0, ICommandService),
+	__decorateParam(1, IDrawingManagerService),
+	__decorateParam(2, IRenderManagerService),
+	__decorateParam(3, IUniverInstanceService),
+	__decorateParam(4, IMessageService),
+	__decorateParam(5, Inject(LocaleService))
+], ImageCropperController);
 
 //#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 src/controllers/image-update.controller.ts
+let ImageUpdateController = class ImageUpdateController extends Disposable {
+	constructor(_commandService, _renderManagerService, _drawingManagerService, _dialogService, _imageIoService, _currentUniverService, _drawingRenderService) {
+		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);
+			}
+		});
+	}
+	_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/controllers/ui.controller.ts
@@ -2433,6 +2521,482 @@ _defineProperty(UniverDrawingUIPlugin, "packageName", name);
 _defineProperty(UniverDrawingUIPlugin, "version", version);
 UniverDrawingUIPlugin = __decorate([__decorateParam(1, Inject(Injector)), __decorateParam(2, IConfigService)], UniverDrawingUIPlugin);
 
+//#endregion
+//#region src/views/object-list-panel/object-list-panel-layer.ts
+const OBJECT_LIST_FLOATING_SECTION_ID = "floating";
+const OBJECT_LIST_CANVAS_SECTION_ID = "canvas";
+function isFloatingObjectListDrawingType(drawingType) {
+	return drawingType === DrawingTypeEnum.DRAWING_CHART || drawingType === DrawingTypeEnum.DRAWING_DOM || drawingType === DrawingTypeEnum.DRAWING_UNIT;
+}
+function getObjectListPanelSectionIdForDrawingType(drawingType) {
+	return isFloatingObjectListDrawingType(drawingType) ? OBJECT_LIST_FLOATING_SECTION_ID : OBJECT_LIST_CANVAS_SECTION_ID;
+}
+
+//#endregion
+//#region src/views/object-list-panel/ObjectListPanelBase.tsx
+const objectListPanelLabelKeys = {
+	title: "drawing-ui.objectListPanel.title",
+	empty: "drawing-ui.objectListPanel.empty",
+	showAll: "drawing-ui.objectListPanel.showAll",
+	hideAll: "drawing-ui.objectListPanel.hideAll",
+	moveForward: "drawing-ui.objectListPanel.moveForward",
+	moveBackward: "drawing-ui.objectListPanel.moveBackward",
+	close: "drawing-ui.objectListPanel.close",
+	show: "drawing-ui.objectListPanel.show",
+	hide: "drawing-ui.objectListPanel.hide",
+	lock: "drawing-ui.objectListPanel.lock",
+	unlock: "drawing-ui.objectListPanel.unlock",
+	name: "drawing-ui.objectListPanel.name",
+	nameInput: "drawing-ui.objectListPanel.nameInput",
+	description: "drawing-ui.objectListPanel.description",
+	descriptionPlaceholder: "drawing-ui.objectListPanel.descriptionPlaceholder",
+	details: "drawing-ui.objectListPanel.details",
+	noSelection: "drawing-ui.objectListPanel.noSelection",
+	locate: "drawing-ui.objectListPanel.locate",
+	expand: "drawing-ui.objectListPanel.expand",
+	collapse: "drawing-ui.objectListPanel.collapse",
+	dragToReorder: "drawing-ui.objectListPanel.dragToReorder",
+	search: "drawing-ui.objectListPanel.search",
+	filterAll: "drawing-ui.objectListPanel.filterAll",
+	filterHidden: "drawing-ui.objectListPanel.filterHidden",
+	filterLocked: "drawing-ui.objectListPanel.filterLocked",
+	sectionCanvas: "drawing-ui.objectListPanel.sectionCanvas",
+	sectionFloating: "drawing-ui.objectListPanel.sectionFloating"
+};
+function getObjectListPanelLabels(localeService) {
+	return Object.fromEntries(Object.entries(objectListPanelLabelKeys).map(([labelKey, localeKey]) => [labelKey, localeService.t(localeKey)]));
+}
+function getObjectListPanelTypeName(localeService, typeName) {
+	return localeService.t(`drawing-ui.objectListPanel.typeNames.${typeName}`);
+}
+const iconButtonClassName = `
+  univer-flex univer-size-7 univer-shrink-0 univer-items-center univer-justify-center univer-rounded-md
+  univer-border-0 univer-bg-transparent univer-p-0 univer-text-gray-500 univer-outline-none univer-transition-colors
+  hover:univer-bg-gray-100 hover:univer-text-gray-900
+  disabled:univer-cursor-not-allowed disabled:univer-opacity-40
+  dark:!univer-text-gray-300 dark:hover:!univer-bg-gray-800 dark:hover:!univer-text-gray-100
+`;
+const sectionOrder = /* @__PURE__ */ new Map([
+	[OBJECT_LIST_FLOATING_SECTION_ID, 0],
+	[OBJECT_LIST_CANVAS_SECTION_ID, 1],
+	["", 2]
+]);
+function normalizeText(value) {
+	return value.trim();
+}
+function hasCapability(panelCapabilities, item, key, fallback = true) {
+	var _ref, _item$capabilities$ke, _item$capabilities;
+	return (_ref = (_item$capabilities$ke = item === null || item === void 0 || (_item$capabilities = item.capabilities) === null || _item$capabilities === void 0 ? void 0 : _item$capabilities[key]) !== null && _item$capabilities$ke !== void 0 ? _item$capabilities$ke : panelCapabilities === null || panelCapabilities === void 0 ? void 0 : panelCapabilities[key]) !== null && _ref !== void 0 ? _ref : fallback;
+}
+function ObjectListPanelBase(props) {
+	var _selectedItem$canMove, _selectedItem$canMove2, _capabilities$reorder;
+	const { items, selectedIds, allObjectIds, focusedId, labels, showHeader = true, capabilities, onSelect, onSetVisible, onCommitName, onCommitDescription, onMoveForward, onMoveBackward, onToggleExpanded, onToggleSelectable, onLocate, onReorder } = props;
+	const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+	const [draggingId, setDraggingId] = useState(null);
+	const [searchQuery, setSearchQuery] = useState("");
+	const [filterMode, setFilterMode] = useState("all");
+	const [collapsedSectionIds, setCollapsedSectionIds] = useState(() => /* @__PURE__ */ new Set());
+	const selectedItem = useMemo(() => {
+		var _ref2, _items$find;
+		return (_ref2 = (_items$find = items.find((item) => item.id === focusedId)) !== null && _items$find !== void 0 ? _items$find : items.find((item) => selectedIdSet.has(item.id))) !== null && _ref2 !== void 0 ? _ref2 : null;
+	}, [
+		focusedId,
+		items,
+		selectedIdSet
+	]);
+	const visibleItems = useMemo(() => {
+		const normalizedQuery = normalizeText(searchQuery).toLocaleLowerCase();
+		return items.filter((item) => {
+			var _item$description;
+			if (filterMode === "hidden" && item.visible !== false) return false;
+			if (filterMode === "locked" && item.selectable !== false) return false;
+			if (!normalizedQuery) return true;
+			return item.name.toLocaleLowerCase().includes(normalizedQuery) || ((_item$description = item.description) !== null && _item$description !== void 0 ? _item$description : "").toLocaleLowerCase().includes(normalizedQuery);
+		});
+	}, [
+		filterMode,
+		items,
+		searchQuery
+	]);
+	const visibleItemSections = useMemo(() => {
+		const sectionMap = /* @__PURE__ */ new Map();
+		visibleItems.forEach((item) => {
+			var _item$sectionId, _item$sectionTitle;
+			const sectionId = (_item$sectionId = item.sectionId) !== null && _item$sectionId !== void 0 ? _item$sectionId : "";
+			const existingSection = sectionMap.get(sectionId);
+			if (existingSection) {
+				existingSection.items.push(item);
+				return;
+			}
+			sectionMap.set(sectionId, {
+				id: sectionId,
+				title: (_item$sectionTitle = item.sectionTitle) !== null && _item$sectionTitle !== void 0 ? _item$sectionTitle : "",
+				items: [item]
+			});
+		});
+		return [...sectionMap.values()].sort((a, b) => {
+			var _sectionOrder$get, _sectionOrder$get2;
+			return ((_sectionOrder$get = sectionOrder.get(a.id)) !== null && _sectionOrder$get !== void 0 ? _sectionOrder$get : 3) - ((_sectionOrder$get2 = sectionOrder.get(b.id)) !== null && _sectionOrder$get2 !== void 0 ? _sectionOrder$get2 : 3);
+		});
+	}, [visibleItems]);
+	const showSectionHeaders = visibleItemSections.length > 1 || visibleItemSections.some((section) => section.id === "floating");
+	const allIds = useMemo(() => allObjectIds !== null && allObjectIds !== void 0 ? allObjectIds : items.map((item) => item.id), [allObjectIds, items]);
+	const selectedIndex = selectedItem ? items.findIndex((item) => item.id === selectedItem.id) : -1;
+	const canMoveForward = !!selectedItem && !!onMoveForward && !selectedItem.disabled && ((_selectedItem$canMove = selectedItem.canMoveForward) !== null && _selectedItem$canMove !== void 0 ? _selectedItem$canMove : selectedIndex > 0) && hasCapability(capabilities, selectedItem, "arrange");
+	const canMoveBackward = !!selectedItem && !!onMoveBackward && !selectedItem.disabled && ((_selectedItem$canMove2 = selectedItem.canMoveBackward) !== null && _selectedItem$canMove2 !== void 0 ? _selectedItem$canMove2 : selectedIndex >= 0 && selectedIndex < items.length - 1) && hasCapability(capabilities, selectedItem, "arrange");
+	const showArrangeControls = hasCapability(capabilities, selectedItem, "arrange") && (!!onMoveForward || !!onMoveBackward);
+	const showLocateControl = !!onLocate && hasCapability(capabilities, selectedItem, "locate");
+	const canReorder = !!onReorder && ((_capabilities$reorder = capabilities === null || capabilities === void 0 ? void 0 : capabilities.reorder) !== null && _capabilities$reorder !== void 0 ? _capabilities$reorder : true);
+	const findItem = (objectId) => {
+		var _items$find2;
+		return objectId ? (_items$find2 = items.find((item) => item.id === objectId)) !== null && _items$find2 !== void 0 ? _items$find2 : null : null;
+	};
+	const handleDrop = (targetId) => {
+		var _source$parentId, _target$parentId, _source$sectionId, _target$sectionId;
+		const source = findItem(draggingId);
+		const target = findItem(targetId);
+		setDraggingId(null);
+		if (!source || !target || source.id === target.id || source.disabled || target.disabled) return;
+		if (((_source$parentId = source.parentId) !== null && _source$parentId !== void 0 ? _source$parentId : "") !== ((_target$parentId = target.parentId) !== null && _target$parentId !== void 0 ? _target$parentId : "")) return;
+		if (((_source$sectionId = source.sectionId) !== null && _source$sectionId !== void 0 ? _source$sectionId : "") !== ((_target$sectionId = target.sectionId) !== null && _target$sectionId !== void 0 ? _target$sectionId : "")) return;
+		if (source.canReorder === false || target.canReorder === false) return;
+		onReorder === null || onReorder === void 0 || onReorder(source.id, target.id);
+	};
+	const toggleSectionCollapsed = (sectionId) => {
+		if (!sectionId) return;
+		setCollapsedSectionIds((current) => {
+			const next = new Set(current);
+			if (next.has(sectionId)) next.delete(sectionId);
+			else next.add(sectionId);
+			return next;
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "univer-box-border univer-flex univer-size-full univer-min-w-0 univer-max-w-full univer-flex-col univer-gap-3 univer-overflow-hidden univer-text-gray-700 dark:!univer-text-gray-200",
+		"data-drawing-object-list-panel": "true",
+		children: [
+			showHeader && /* @__PURE__ */ jsx("div", {
+				className: "univer-flex univer-h-8 univer-shrink-0 univer-items-center univer-gap-2",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "univer-min-w-0 univer-flex-1 univer-truncate univer-text-sm univer-font-semibold univer-text-gray-900 dark:!univer-text-gray-100",
+					children: labels.title
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "univer-flex univer-min-w-0 univer-items-center univer-justify-between univer-gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "univer-flex univer-min-w-0 univer-gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						size: "small",
+						disabled: items.length === 0,
+						onClick: () => onSetVisible(allIds, true),
+						children: labels.showAll
+					}), /* @__PURE__ */ jsx(Button, {
+						size: "small",
+						disabled: items.length === 0,
+						onClick: () => onSetVisible(allIds, false),
+						children: labels.hideAll
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "univer-flex univer-shrink-0 univer-gap-1",
+					children: [showLocateControl && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: iconButtonClassName,
+						title: labels.locate,
+						"aria-label": labels.locate,
+						disabled: !(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id),
+						onClick: () => selectedItem && (onLocate === null || onLocate === void 0 ? void 0 : onLocate(selectedItem.id)),
+						children: /* @__PURE__ */ jsx(LocateFixedIcon, {})
+					}), showArrangeControls && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: iconButtonClassName,
+						title: labels.moveForward,
+						"aria-label": labels.moveForward,
+						disabled: !canMoveForward,
+						onClick: () => selectedItem && (onMoveForward === null || onMoveForward === void 0 ? void 0 : onMoveForward(selectedItem.id)),
+						children: /* @__PURE__ */ jsx(ArrowUpIcon, {})
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: iconButtonClassName,
+						title: labels.moveBackward,
+						"aria-label": labels.moveBackward,
+						disabled: !canMoveBackward,
+						onClick: () => selectedItem && (onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward(selectedItem.id)),
+						children: /* @__PURE__ */ jsx(ArrowDownIcon, {})
+					})] })]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "univer-flex univer-shrink-0 univer-flex-col univer-gap-2",
+				children: [/* @__PURE__ */ jsx(Input, {
+					value: searchQuery,
+					"aria-label": labels.search,
+					placeholder: labels.search,
+					onChange: setSearchQuery
+				}), /* @__PURE__ */ jsx("div", {
+					className: "univer-flex univer-min-w-0 univer-gap-1",
+					children: [
+						["all", labels.filterAll],
+						["hidden", labels.filterHidden],
+						["locked", labels.filterLocked]
+					].map(([mode, label]) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: clsx("univer-h-7 univer-min-w-0 univer-flex-1 univer-rounded-md univer-border univer-border-solid univer-px-2 univer-text-xs univer-outline-none univer-transition-colors dark:!univer-border-gray-700", filterMode === mode ? "dark:!univer-bg-primary-900/30 univer-border-primary-500 univer-bg-primary-50 univer-text-primary-600 dark:!univer-text-primary-200" : "univer-border-gray-200 univer-bg-white univer-text-gray-600 hover:univer-bg-gray-50 dark:!univer-bg-gray-900 dark:!univer-text-gray-300 dark:hover:!univer-bg-gray-800"),
+						"aria-pressed": filterMode === mode,
+						onClick: () => setFilterMode(mode),
+						children: /* @__PURE__ */ jsx("span", {
+							className: "univer-block univer-truncate",
+							children: label
+						})
+					}, mode))
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "univer-min-h-0 univer-flex-1 univer-overflow-y-auto univer-overflow-x-hidden",
+				children: visibleItems.length === 0 ? /* @__PURE__ */ jsx("div", {
+					className: "univer-py-6 univer-text-center univer-text-sm univer-text-gray-500",
+					children: labels.empty
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "univer-flex univer-min-w-0 univer-flex-col univer-gap-0.5",
+					children: visibleItemSections.map((section) => /* @__PURE__ */ jsxs("div", {
+						className: "univer-flex univer-min-w-0 univer-flex-col univer-gap-0.5",
+						children: [showSectionHeaders && section.title && (() => {
+							const sectionCollapsed = !!section.id && collapsedSectionIds.has(section.id);
+							return /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								className: "univer-box-border univer-flex univer-h-7 univer-w-full univer-items-center univer-gap-1 univer-rounded-md univer-border-0 univer-bg-transparent univer-px-2 univer-pt-1 univer-text-xs univer-font-semibold univer-uppercase univer-text-gray-400 univer-outline-none hover:univer-bg-gray-50 hover:univer-text-gray-600 disabled:univer-cursor-default disabled:hover:univer-bg-transparent dark:!univer-text-gray-500 dark:hover:!univer-bg-gray-800 dark:hover:!univer-text-gray-300",
+								"aria-label": sectionCollapsed ? labels.expand : labels.collapse,
+								disabled: !section.id,
+								onClick: () => toggleSectionCollapsed(section.id),
+								children: [
+									section.id ? /* @__PURE__ */ jsx("span", {
+										className: "univer-flex univer-size-4 univer-shrink-0 univer-items-center univer-justify-center",
+										children: sectionCollapsed ? /* @__PURE__ */ jsx(MoreRightIcon, {}) : /* @__PURE__ */ jsx(MoreDownIcon, {})
+									}) : /* @__PURE__ */ jsx("span", { className: "univer-size-4 univer-shrink-0" }),
+									/* @__PURE__ */ jsx("span", {
+										className: "univer-min-w-0 univer-flex-1 univer-truncate univer-text-left",
+										children: section.title
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "univer-shrink-0 univer-text-[10px] univer-font-medium univer-text-gray-400 dark:!univer-text-gray-500",
+										children: section.items.length
+									})
+								]
+							});
+						})(), (!section.id || !collapsedSectionIds.has(section.id)) && section.items.map((item) => /* @__PURE__ */ jsx(ObjectListRow, {
+							item,
+							selected: selectedIdSet.has(item.id),
+							labels,
+							showLock: !!onToggleSelectable && hasCapability(capabilities, item, "selectable"),
+							showName: hasCapability(capabilities, item, "name"),
+							showVisible: hasCapability(capabilities, item, "visible"),
+							draggable: canReorder && hasCapability(capabilities, item, "reorder") && !item.disabled && item.canReorder !== false,
+							dragging: draggingId === item.id,
+							onSelect: (multiSelect) => onSelect(item.id, multiSelect),
+							onToggleExpanded: () => onToggleExpanded === null || onToggleExpanded === void 0 ? void 0 : onToggleExpanded(item.id),
+							onToggleVisible: () => onSetVisible([item.id], !item.visible),
+							onToggleSelectable: () => onToggleSelectable === null || onToggleSelectable === void 0 ? void 0 : onToggleSelectable(item.id),
+							onCommitName: (value) => onCommitName(item.id, value),
+							onDragStart: () => setDraggingId(item.id),
+							onDragEnd: () => setDraggingId(null),
+							onDrop: () => handleDrop(item.id)
+						}, item.id))]
+					}, section.id || "default"))
+				})
+			}),
+			/* @__PURE__ */ jsx(ObjectDetailsEditor, {
+				item: selectedItem,
+				labels,
+				showName: hasCapability(capabilities, selectedItem, "name"),
+				showDescription: hasCapability(capabilities, selectedItem, "description"),
+				onCommitName: (value) => selectedItem && onCommitName(selectedItem.id, value),
+				onCommitDescription: (value) => selectedItem && onCommitDescription(selectedItem.id, value)
+			})
+		]
+	});
+}
+function ObjectListRow(props) {
+	var _item$level;
+	const { item, selected, labels, showLock, showName, showVisible, draggable, dragging, onSelect, onToggleExpanded, onToggleVisible, onToggleSelectable, onCommitName, onDragStart, onDragEnd, onDrop } = props;
+	const [draftName, setDraftName] = useState(item.name);
+	const skipCommitOnBlurRef = useRef(false);
+	const disabled = item.disabled === true;
+	const level = (_item$level = item.level) !== null && _item$level !== void 0 ? _item$level : 0;
+	const locked = item.selectable === false;
+	useEffect(() => {
+		setDraftName(item.name);
+	}, [item.name]);
+	const handleBlur = (event) => {
+		if (disabled) return;
+		if (skipCommitOnBlurRef.current) {
+			skipCommitOnBlurRef.current = false;
+			return;
+		}
+		if (event.currentTarget.value !== item.name) onCommitName(event.currentTarget.value);
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter") {
+			event.currentTarget.blur();
+			return;
+		}
+		if (event.key === "Escape") {
+			skipCommitOnBlurRef.current = true;
+			setDraftName(item.name);
+			event.currentTarget.blur();
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("univer-box-border univer-flex univer-h-8 univer-w-full univer-min-w-0 univer-max-w-full univer-items-center univer-gap-1.5 univer-overflow-hidden univer-rounded-md univer-pr-1.5 univer-transition-colors", !disabled && "hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-800", selected && "univer-bg-gray-100 dark:!univer-bg-gray-800", disabled && "univer-text-gray-400 dark:!univer-text-gray-500", dragging && "univer-opacity-50"),
+		style: { paddingLeft: level * 14 + 4 },
+		draggable,
+		title: draggable ? labels.dragToReorder : void 0,
+		onClick: disabled ? void 0 : (event) => onSelect(event.ctrlKey || event.metaKey),
+		onDragStart: (event) => {
+			if (!draggable) {
+				event.preventDefault();
+				return;
+			}
+			event.dataTransfer.effectAllowed = "move";
+			event.dataTransfer.setData("text/plain", item.id);
+			onDragStart();
+		},
+		onDragEnd,
+		onDragOver: (event) => {
+			if (draggable) {
+				event.preventDefault();
+				event.dataTransfer.dropEffect = "move";
+			}
+		},
+		onDrop: (event) => {
+			event.preventDefault();
+			onDrop();
+		},
+		children: [
+			item.isGroup ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "univer-flex univer-size-5 univer-shrink-0 univer-items-center univer-justify-center univer-rounded univer-border-0 univer-bg-transparent univer-p-0 univer-text-gray-500 univer-outline-none univer-transition-transform hover:univer-bg-gray-100 hover:univer-text-gray-900 dark:!univer-text-gray-300 dark:hover:!univer-bg-gray-800 dark:hover:!univer-text-gray-100",
+				title: item.expanded ? labels.collapse : labels.expand,
+				"aria-label": item.expanded ? labels.collapse : labels.expand,
+				onClick: (event) => {
+					event.stopPropagation();
+					onToggleExpanded();
+				},
+				children: item.expanded ? /* @__PURE__ */ jsx(MoreDownIcon, {}) : /* @__PURE__ */ jsx(MoreRightIcon, {})
+			}) : /* @__PURE__ */ jsx("span", { className: "univer-size-5 univer-shrink-0" }),
+			showName ? /* @__PURE__ */ jsx(Input, {
+				className: clsx("univer-h-7 univer-w-0 univer-min-w-0 univer-flex-1", disabled && "univer-cursor-not-allowed"),
+				inputClass: clsx("!univer-h-7 univer-min-w-0 univer-overflow-hidden univer-text-ellipsis univer-whitespace-nowrap !univer-rounded !univer-border-transparent !univer-bg-transparent !univer-px-1 univer-text-sm univer-text-gray-900 !univer-shadow-none focus:!univer-border-primary-500 focus:!univer-bg-white focus:!univer-ring-1 focus:!univer-ring-primary-100 disabled:!univer-bg-transparent disabled:univer-opacity-100 dark:!univer-text-gray-100 dark:focus:!univer-bg-gray-900 dark:focus:!univer-ring-primary-900", disabled && "univer-text-gray-400 dark:!univer-text-gray-500"),
+				inputStyle: {
+					maxWidth: "100%",
+					boxSizing: "border-box"
+				},
+				value: draftName,
+				disabled,
+				"aria-label": labels.nameInput,
+				onChange: setDraftName,
+				onBlur: handleBlur,
+				onKeyDown: handleKeyDown,
+				onClick: (event) => {
+					event.stopPropagation();
+					if (!disabled) onSelect(event.ctrlKey || event.metaKey);
+				}
+			}, item.name) : /* @__PURE__ */ jsx("span", {
+				className: "univer-min-w-0 univer-flex-1 univer-truncate univer-px-1 univer-text-sm",
+				children: item.name
+			}),
+			showLock && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: clsx(iconButtonClassName, !locked && "univer-opacity-70"),
+				disabled,
+				title: locked ? labels.unlock : labels.lock,
+				"aria-label": locked ? labels.unlock : labels.lock,
+				onClick: (event) => {
+					event.stopPropagation();
+					onToggleSelectable();
+				},
+				children: /* @__PURE__ */ jsx(LockIcon, {})
+			}),
+			showVisible && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: iconButtonClassName,
+				disabled,
+				title: item.visible ? labels.hide : labels.show,
+				"aria-label": item.visible ? labels.hide : labels.show,
+				onClick: (event) => {
+					event.stopPropagation();
+					onToggleVisible();
+				},
+				children: item.visible ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyelashIcon, {})
+			})
+		]
+	});
+}
+function ObjectDetailsEditor(props) {
+	var _item$name, _item$description2;
+	const { item, labels, showName, showDescription, onCommitName, onCommitDescription } = props;
+	const [draftName, setDraftName] = useState((_item$name = item === null || item === void 0 ? void 0 : item.name) !== null && _item$name !== void 0 ? _item$name : "");
+	const [draftDescription, setDraftDescription] = useState((_item$description2 = item === null || item === void 0 ? void 0 : item.description) !== null && _item$description2 !== void 0 ? _item$description2 : "");
+	const disabled = (item === null || item === void 0 ? void 0 : item.disabled) === true;
+	useEffect(() => {
+		var _item$name2, _item$description3;
+		setDraftName((_item$name2 = item === null || item === void 0 ? void 0 : item.name) !== null && _item$name2 !== void 0 ? _item$name2 : "");
+		setDraftDescription((_item$description3 = item === null || item === void 0 ? void 0 : item.description) !== null && _item$description3 !== void 0 ? _item$description3 : "");
+	}, [
+		item === null || item === void 0 ? void 0 : item.description,
+		item === null || item === void 0 ? void 0 : item.id,
+		item === null || item === void 0 ? void 0 : item.name
+	]);
+	if (!item) return /* @__PURE__ */ jsx("div", {
+		className: "univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-p-3 univer-text-sm univer-text-gray-500 dark:!univer-border-gray-700 dark:!univer-text-gray-400",
+		children: labels.noSelection
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "univer-flex univer-shrink-0 univer-flex-col univer-gap-2 univer-border-0 univer-border-t univer-border-solid univer-border-gray-200 univer-pt-3 dark:!univer-border-gray-700",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "univer-text-xs univer-font-semibold univer-uppercase univer-text-gray-500 dark:!univer-text-gray-400",
+				children: labels.details
+			}),
+			showName && /* @__PURE__ */ jsxs("label", {
+				className: "univer-flex univer-flex-col univer-gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "univer-text-xs univer-text-gray-500 dark:!univer-text-gray-400",
+					children: labels.name
+				}), /* @__PURE__ */ jsx(Input, {
+					value: draftName,
+					"aria-label": labels.nameInput,
+					disabled,
+					onChange: setDraftName,
+					onBlur: () => {
+						if (!disabled && normalizeText(draftName) !== item.name) onCommitName(draftName);
+					},
+					onKeyDown: (event) => {
+						if (event.key === "Enter") event.currentTarget.blur();
+					}
+				})]
+			}),
+			showDescription && /* @__PURE__ */ jsxs("label", {
+				className: "univer-flex univer-flex-col univer-gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "univer-text-xs univer-text-gray-500 dark:!univer-text-gray-400",
+					children: labels.description
+				}), /* @__PURE__ */ jsx("textarea", {
+					className: "univer-box-border univer-min-h-16 univer-w-full univer-resize-none univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-p-2 univer-text-sm univer-text-gray-900 univer-outline-none focus:univer-border-primary-500 focus:univer-ring-1 focus:univer-ring-primary-100 disabled:univer-cursor-not-allowed disabled:univer-opacity-70 dark:!univer-border-gray-700 dark:!univer-bg-gray-900 dark:!univer-text-gray-100 dark:focus:!univer-ring-primary-900",
+					value: draftDescription,
+					disabled,
+					placeholder: labels.descriptionPlaceholder,
+					"aria-label": labels.description,
+					onChange: (event) => setDraftDescription(event.currentTarget.value),
+					onBlur: () => {
+						var _item$description4;
+						if (!disabled && normalizeText(draftDescription) !== ((_item$description4 = item.description) !== null && _item$description4 !== void 0 ? _item$description4 : "")) onCommitDescription(draftDescription);
+					}
+				})]
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/views/panel/DrawingAlign.tsx
 const DrawingAlign = (props) => {
@@ -2643,6 +3207,29 @@ const DrawingGroup = (props) => {
 //#region src/utils/config.ts
 const RANGE_DRAWING_ROTATION_LIMIT = [-360, 360];
 
+//#endregion
+//#region src/views/panel/drawing-transform-rotation.ts
+function isDrawingTransformRotationDisabled(rotateEnabled) {
+	return !rotateEnabled;
+}
+function createDrawingTransformRotationChangeHandler(options) {
+	return (val) => {
+		if (isDrawingTransformRotationDisabled(options.rotateEnabled)) return;
+		if (val == null) return;
+		const { unitId, subUnitId, drawingId, drawingType } = options.drawingParam;
+		const updateParam = {
+			unitId,
+			subUnitId,
+			drawingId,
+			drawingType,
+			transform: { angle: val }
+		};
+		options.setRotation(val);
+		options.emitUpdate([updateParam]);
+		options.notifyChange();
+	};
+}
+
 //#endregion
 //#region src/views/panel/DrawingTransform.tsx
 const INPUT_DEBOUNCE_TIME = 300;
@@ -2670,6 +3257,8 @@ const DrawingTransform = (props) => {
 	const [yPosition, setYPosition] = useState(originY);
 	const [rotation, setRotation] = useState(originRotation);
 	const [lockRatio, setLockRatio] = useState(transformer.keepRatio);
+	const rotateEnabled = resolveDrawingUIRotateEnabled(drawingParam, { getChildren: (drawing) => drawingManagerService.getDrawingsByGroup(drawing) });
+	const rotationDisabled = isDrawingTransformRotationDisabled(rotateEnabled);
 	const checkMoveBoundary = (left, top, width, height) => {
 		const { width: topSceneWidth, height: topSceneHeight } = topScene;
 		const { ancestorLeft, ancestorTop } = scene;
@@ -2810,19 +3399,18 @@ const DrawingTransform = (props) => {
 		drawingManagerService.featurePluginUpdateNotification([updateParam]);
 		transformer.refreshControls().changeNotification();
 	}, INPUT_DEBOUNCE_TIME);
-	const handleRotationChange = (val) => {
-		if (val == null) return;
-		const updateParam = {
+	const handleRotationChange = createDrawingTransformRotationChangeHandler({
+		rotateEnabled,
+		drawingParam: {
 			unitId,
 			subUnitId,
 			drawingId,
-			drawingType,
-			transform: { angle: val }
-		};
-		setRotation(val);
-		drawingManagerService.featurePluginUpdateNotification([updateParam]);
-		transformer.refreshControls().changeNotification();
-	};
+			drawingType
+		},
+		setRotation,
+		emitUpdate: (updateParams) => drawingManagerService.featurePluginUpdateNotification(updateParams),
+		notifyChange: () => transformer.refreshControls().changeNotification()
+	});
 	const handleLockRatioChange = (val) => {
 		setLockRatio(val);
 		transformer.keepRatio = val;
@@ -2884,6 +3472,7 @@ const DrawingTransform = (props) => {
 						value: rotation,
 						min: RANGE_DRAWING_ROTATION_LIMIT[0],
 						max: RANGE_DRAWING_ROTATION_LIMIT[1],
+						disabled: rotationDisabled,
 						onChange: handleRotationChange
 					})] })
 				]
@@ -3128,4 +3717,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, ImageResetSizeOperation, OpenImageCropOperation, SetDrawingAlignOperation, SetDrawingArrangeOperation, SetDrawingGroupOperation, UniverDrawingUIPlugin, getCurrentUnitInfo, getUpdateParams, insertGroupObject };
+export { AutoImageCropOperation, COMPONENT_IMAGE_POPUP_MENU, CancelDrawingGroupOperation, CloseImageCropOperation, DRAWING_GROUP_TYPES, DrawingCommonPanel, DrawingImageClipService, DrawingRenderService, menuSchema as DrawingUIMenuSchema, IMAGE_CLIP_SHAPE_PICKER_COMPONENT, ImageCropperObject, ImageResetSizeOperation, OBJECT_LIST_CANVAS_SECTION_ID, OBJECT_LIST_FLOATING_SECTION_ID, ObjectListPanelBase, OpenImageCropOperation, SetDrawingAlignOperation, SetDrawingArrangeOperation, SetDrawingGroupOperation, UniverDrawingUIPlugin, disposeDrawingRenderObject, getCurrentUnitInfo, getDrawingRenderObject, getObjectListPanelLabels, getObjectListPanelSectionIdForDrawingType, getObjectListPanelTypeName, getUpdateParams, insertGroupObject, isFloatingObjectListDrawingType };