@apollo-office/drawing-ui 1.0.0

package/lib/es/index.js

@@ -0,0 +1,3116 @@
+import { ArrangeTypeEnum, BooleanNumber, CommandType, Disposable, DrawingTypeEnum, ICommandService, IConfigService, IURLImageService, IUniverInstanceService, ImageSourceType, Inject, Injector, LocaleService, Plugin, PositionedObjectLayoutType, UniverInstanceType, checkIfMove, debounce, generateRandomId, merge, toDisposable } from "@apollo-office/core";
+import { IDrawingManagerService, IImageIoService, ImageSourceType as ImageSourceType$1, SetDrawingSelectedOperation, getDrawingShapeKeyByDrawingSearch } from "@apollo-office/drawing";
+import { CURSOR_TYPE, Canvas, DRAWING_OBJECT_LAYER_INDEX, DrawingGroupObject, Group, IRenderManagerService, Image, RENDER_CLASS_TYPE, Rect, Shape, Vector2, degToRad, getGroupState, precisionTo, transformObjectOutOfGroup } from "@apollo-office/engine-render";
+import { AutofillDoubleIcon, BottomIcon, CreateCopyIcon, DeleteIcon, DocSettingIcon, GroupIcon, MoreDownIcon, MoveDownIcon, MoveUpIcon, TopmostIcon, UngroupIcon } from "@univerjs/icons";
+import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IDialogService, IGalleryService, IMenuManagerService, IMessageService, MenuItemType, useDependency, useObservable } from "@apollo-office/ui";
+import { BehaviorSubject, Observable, bufferTime, filter, map, of, switchMap } from "rxjs";
+import { Button, Checkbox, Dropdown, DropdownMenu, InputNumber, MessageType, Select, Tooltip, borderClassName, clsx } from "@apollo-office/design";
+import { useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/commands/operations/drawing-align.operation.ts
+/**
+* Set drawing align operation, including left, center, right, top, middle, bottom, horizon and vertical align.
+*/
+const SetDrawingAlignOperation = {
+	id: "sheet.operation.set-image-align",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		return true;
+	}
+};
+const SetDrawingAlignLeftOperation = {
+	id: "sheet.operation.set-drawing-align-left",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "1" });
+	}
+};
+const SetDrawingAlignCenterOperation = {
+	id: "sheet.operation.set-drawing-align-center",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "2" });
+	}
+};
+const SetDrawingAlignRightOperation = {
+	id: "sheet.operation.set-drawing-align-right",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "3" });
+	}
+};
+const SetDrawingAlignTopOperation = {
+	id: "sheet.operation.set-drawing-align-top",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "4" });
+	}
+};
+const SetDrawingAlignMiddleOperation = {
+	id: "sheet.operation.set-drawing-align-middle",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "5" });
+	}
+};
+const SetDrawingAlignBottomOperation = {
+	id: "sheet.operation.set-drawing-align-bottom",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "6" });
+	}
+};
+const SetDrawingAlignHorizonOperation = {
+	id: "sheet.operation.set-drawing-align-horizon",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "7" });
+	}
+};
+const SetDrawingAlignVerticalOperation = {
+	id: "sheet.operation.set-drawing-align-vertical",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "8" });
+	}
+};
+
+//#endregion
+//#region src/commands/operations/drawing-arrange.operation.ts
+/**
+* Set the layer of the drawing, including forward, backward, front, and back
+*/
+const SetDrawingArrangeOperation = {
+	id: "drawing.operation.set-drawing-arrange",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		const drawingManagerService = accessor.get(IDrawingManagerService);
+		const { arrangeType } = params;
+		const drawings = params.drawings || drawingManagerService.getFocusDrawings();
+		const { unitId, subUnitId } = drawings[0];
+		const drawingIds = drawings.map((drawing) => drawing.drawingId);
+		drawingManagerService.featurePluginOrderUpdateNotification({
+			unitId,
+			subUnitId,
+			drawingIds,
+			arrangeType
+		});
+		return true;
+	}
+};
+const SetDrawingArrangeFrontOperation = {
+	id: "drawing.operation.set-drawing-arrange-front",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingArrangeOperation.id, { arrangeType: ArrangeTypeEnum.front });
+	}
+};
+const SetDrawingArrangeForwardOperation = {
+	id: "drawing.operation.set-drawing-arrange-forward",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingArrangeOperation.id, { arrangeType: ArrangeTypeEnum.forward });
+	}
+};
+const SetDrawingArrangeBackOperation = {
+	id: "drawing.operation.set-drawing-arrange-back",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingArrangeOperation.id, { arrangeType: ArrangeTypeEnum.back });
+	}
+};
+const SetDrawingArrangeBackwardOperation = {
+	id: "drawing.operation.set-drawing-arrange-backward",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingArrangeOperation.id, { arrangeType: ArrangeTypeEnum.backward });
+	}
+};
+
+//#endregion
+//#region src/commands/operations/drawing-group.operation.ts
+/**
+* Now only support grouping images, shapes, and groups.
+*/
+const DRAWING_GROUP_TYPES = [
+	DrawingTypeEnum.DRAWING_IMAGE,
+	DrawingTypeEnum.DRAWING_SHAPE,
+	DrawingTypeEnum.DRAWING_GROUP
+];
+/**
+* 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.
+*/
+const SetDrawingGroupOperation = {
+	id: "drawing.operation.set-drawing-group",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		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;
+		const { unitId, subUnitId } = drawings[0];
+		const groupId = generateRandomId(10);
+		const groupTransform = getGroupState(0, 0, drawings.map((o) => o.transform || {}));
+		const groupParam = {
+			unitId,
+			subUnitId,
+			drawingId: groupId,
+			drawingType: DrawingTypeEnum.DRAWING_GROUP,
+			transform: groupTransform,
+			groupBaseBound: {
+				left: groupTransform.left,
+				top: groupTransform.top,
+				width: groupTransform.width,
+				height: groupTransform.height
+			}
+		};
+		const children = drawings.map((drawing) => {
+			const transform = drawing.transform || {
+				left: 0,
+				top: 0
+			};
+			const { unitId, subUnitId, drawingId } = drawing;
+			return {
+				unitId,
+				subUnitId,
+				drawingId,
+				transform: { ...transform },
+				groupId
+			};
+		});
+		drawingManagerService.featurePluginGroupUpdateNotification([{
+			parent: groupParam,
+			children
+		}]);
+		return true;
+	}
+};
+/**
+* Ungroup the selected groups. The selected drawings must be at least 1 group selected.
+*/
+const CancelDrawingGroupOperation = {
+	id: "drawing.operation.cancel-drawing-group",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		const drawingManagerService = accessor.get(IDrawingManagerService);
+		const groupParams = (params.drawings || drawingManagerService.getFocusDrawings()).map((drawing) => {
+			if (drawing.drawingType !== DrawingTypeEnum.DRAWING_GROUP) return null;
+			const { unitId, subUnitId, drawingId, transform: groupTransform = {
+				width: 0,
+				height: 0
+			}, groupBaseBound } = drawing;
+			if (groupTransform === null) return null;
+			const objects = drawingManagerService.getDrawingsByGroup({
+				unitId,
+				subUnitId,
+				drawingId
+			});
+			if (objects.length === 0) return null;
+			return {
+				parent: drawing,
+				children: objects.map((object) => {
+					const { transform } = object;
+					const { unitId, subUnitId, drawingId } = object;
+					const newTransform = transformObjectOutOfGroup(transform || {}, groupTransform, groupTransform.width || 0, groupTransform.height || 0, groupBaseBound);
+					return {
+						unitId,
+						subUnitId,
+						drawingId,
+						transform: {
+							...transform,
+							...newTransform
+						},
+						groupId: void 0
+					};
+				})
+			};
+		}).filter((o) => o !== null);
+		if (groupParams.length === 0) return false;
+		drawingManagerService.featurePluginUngroupUpdateNotification(groupParams);
+		return true;
+	}
+};
+
+//#endregion
+//#region src/commands/operations/image-crop.operation.ts
+const OpenImageCropOperation = {
+	id: "sheet.operation.open-image-crop",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		return true;
+	}
+};
+const CloseImageCropOperation = {
+	id: "sheet.operation.close-image-crop",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		return true;
+	}
+};
+const AutoImageCropOperation = {
+	id: "sheet.operation.Auto-image-crop",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		return true;
+	}
+};
+
+//#endregion
+//#region src/commands/operations/image-reset-size.operation.ts
+const ImageResetSizeOperation = {
+	id: "sheet.operation.image-reset-size",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		return true;
+	}
+};
+
+//#endregion
+//#region src/controllers/utils.ts
+function insertGroupObject(objectParam, object, scene, drawingManagerService) {
+	const groupParam = drawingManagerService.getDrawingByParam(objectParam);
+	if (groupParam == null) return;
+	const groupKey = getDrawingShapeKeyByDrawingSearch(objectParam);
+	const groupObject = scene.getObjectIncludeInGroup(groupKey);
+	if (groupObject && !(groupObject instanceof Group)) return;
+	if (groupObject != null) {
+		const objects = groupObject.getObjects();
+		for (const obj of objects) if (obj.oKey === object.oKey) return;
+		groupObject.addObject(object);
+		return;
+	}
+	const group = new DrawingGroupObject(groupKey);
+	scene.addObject(group, DRAWING_OBJECT_LAYER_INDEX).attachTransformerTo(group);
+	group.addObject(object);
+	const { transform, groupBaseBound } = groupParam;
+	if (groupBaseBound) group.setBaseBound(groupBaseBound);
+	if (groupParam.groupId) {
+		group.isInGroup = true;
+		insertGroupObject({
+			drawingId: groupParam.groupId,
+			unitId: objectParam.unitId,
+			subUnitId: objectParam.subUnitId
+		}, group, scene, drawingManagerService);
+	}
+	transform && group.transformByState({
+		left: transform.left,
+		top: transform.top,
+		angle: transform.angle,
+		width: transform.width,
+		height: transform.height
+	});
+}
+function getCurrentUnitInfo(currentUniverService, propUnitId) {
+	const current = propUnitId ? currentUniverService.getUnit(propUnitId) : currentUniverService.getFocusedUnit();
+	if (current == null) return;
+	const unitId = current.getUnitId();
+	let subUnitId;
+	if (current.type === UniverInstanceType.UNIVER_SHEET) {
+		var _getActiveSheet;
+		subUnitId = (_getActiveSheet = current.getActiveSheet()) === null || _getActiveSheet === void 0 ? void 0 : _getActiveSheet.getSheetId();
+	} else if (current.type === UniverInstanceType.UNIVER_DOC) subUnitId = unitId;
+	else if (current.type === UniverInstanceType.UNIVER_SLIDE) subUnitId = unitId;
+	return {
+		unitId,
+		subUnitId,
+		current
+	};
+}
+
+//#endregion
+//#region package.json
+var name = "@apollo-office/drawing-ui";
+var version = "0.25.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/menu/align.menu.ts
+const getMenuStateByDrawingFocusChangedObservable$$1 = (accessor) => {
+	const drawingManagerService = accessor.get(IDrawingManagerService);
+	return new Observable((subscriber) => {
+		const update = (drawings) => {
+			if (!drawings || drawings.length === 0) return subscriber.next(true);
+			if (drawings.length < 2) return subscriber.next(true);
+			subscriber.next(false);
+		};
+		const subscription = drawingManagerService.focus$.subscribe((drawings) => {
+			if (!drawings || drawings.length === 0) return subscriber.next(true);
+			update(drawings);
+		});
+		update(drawingManagerService.getFocusDrawings());
+		return () => subscription.unsubscribe();
+	});
+};
+const DRAWING_ALIGN_CONTEXT_MENU_ID = "contextMenu.drawing-align";
+function DrawingAlignContextMenuItemFactory(accessor) {
+	return {
+		id: DRAWING_ALIGN_CONTEXT_MENU_ID,
+		type: MenuItemType.SUBITEMS,
+		icon: "HorizontallyIcon",
+		title: "drawing-ui.image-panel.align.title",
+		hidden$: getMenuStateByDrawingFocusChangedObservable$$1(accessor)
+	};
+}
+function SetDrawingAlignLeftMenuItemFactory() {
+	return {
+		id: SetDrawingAlignLeftOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "LeftJustifyingIcon",
+		title: "drawing-ui.image-panel.align.left"
+	};
+}
+function SetDrawingAlignCenterMenuItemFactory() {
+	return {
+		id: SetDrawingAlignCenterOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "HorizontallyIcon",
+		title: "drawing-ui.image-panel.align.center"
+	};
+}
+function SetDrawingAlignRightMenuItemFactory() {
+	return {
+		id: SetDrawingAlignRightOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "RightJustifyingIcon",
+		title: "drawing-ui.image-panel.align.right"
+	};
+}
+function SetDrawingAlignTopMenuItemFactory() {
+	return {
+		id: SetDrawingAlignTopOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "AlignTopIcon",
+		title: "drawing-ui.image-panel.align.top"
+	};
+}
+function SetDrawingAlignMiddleMenuItemFactory() {
+	return {
+		id: SetDrawingAlignMiddleOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "VerticalCenterIcon",
+		title: "drawing-ui.image-panel.align.middle"
+	};
+}
+function SetDrawingAlignBottomMenuItemFactory() {
+	return {
+		id: SetDrawingAlignBottomOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "AlignBottomIcon",
+		title: "drawing-ui.image-panel.align.bottom"
+	};
+}
+function SetDrawingAlignHorizonMenuItemFactory() {
+	return {
+		id: SetDrawingAlignHorizonOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "HorizontallyIcon",
+		title: "drawing-ui.image-panel.align.horizon"
+	};
+}
+function SetDrawingAlignVerticalMenuItemFactory() {
+	return {
+		id: SetDrawingAlignVerticalOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "VerticalCenterIcon",
+		title: "drawing-ui.image-panel.align.vertical"
+	};
+}
+
+//#endregion
+//#region src/menu/arrange.menu.ts
+const DRAWING_ARRANGE_CONTEXT_MENU_ID = "contextMenu.drawing-arrange";
+function DrawingArrangeContextMenuItemFactory() {
+	return {
+		id: DRAWING_ARRANGE_CONTEXT_MENU_ID,
+		type: MenuItemType.SUBITEMS,
+		icon: "TopmostIcon",
+		title: "drawing-ui.image-panel.arrange.title"
+	};
+}
+function SetDrawingArrangeFrontMenuItemFactory() {
+	return {
+		id: SetDrawingArrangeFrontOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "TopmostIcon",
+		title: "drawing-ui.image-panel.arrange.front"
+	};
+}
+function SetDrawingArrangeForwardMenuItemFactory() {
+	return {
+		id: SetDrawingArrangeForwardOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "MoveUpIcon",
+		title: "drawing-ui.image-panel.arrange.forward"
+	};
+}
+function SetDrawingArrangeBackMenuItemFactory() {
+	return {
+		id: SetDrawingArrangeBackOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "BottomIcon",
+		title: "drawing-ui.image-panel.arrange.back"
+	};
+}
+function SetDrawingArrangeBackwardMenuItemFactory() {
+	return {
+		id: SetDrawingArrangeBackwardOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "MoveDownIcon",
+		title: "drawing-ui.image-panel.arrange.backward"
+	};
+}
+
+//#endregion
+//#region src/menu/group.menu.ts
+const getMenuStateByDrawingFocusChangedObservable$ = (accessor, type) => {
+	const drawingManagerService = accessor.get(IDrawingManagerService);
+	return new Observable((subscriber) => {
+		const update = (drawings) => {
+			if (!drawings || drawings.length === 0) return subscriber.next(true);
+			if (type === "group") {
+				if (drawings.length < 2) return subscriber.next(true);
+				if (!drawings.every((drawing) => DRAWING_GROUP_TYPES.includes(drawing.drawingType))) return subscriber.next(true);
+			} else if (type === "unGroup") {
+				if (drawings.filter((drawing) => drawing.drawingType === DrawingTypeEnum.DRAWING_GROUP).length === 0) return subscriber.next(true);
+			} else if (!drawings.every((drawing) => DRAWING_GROUP_TYPES.includes(drawing.drawingType))) return subscriber.next(true);
+			subscriber.next(false);
+		};
+		const subscription = drawingManagerService.focus$.subscribe((drawings) => {
+			if (!drawings || drawings.length === 0) return subscriber.next(true);
+			update(drawings);
+		});
+		update(drawingManagerService.getFocusDrawings());
+		return () => subscription.unsubscribe();
+	});
+};
+const DRAWING_GROUP_CONTEXT_MENU_ID = "contextMenu.drawing-group";
+function DrawingGroupContextMenuItemFactory(accessor) {
+	return {
+		id: DRAWING_GROUP_CONTEXT_MENU_ID,
+		type: MenuItemType.SUBITEMS,
+		icon: "GroupIcon",
+		title: "drawing-ui.image-panel.group.title",
+		hidden$: getMenuStateByDrawingFocusChangedObservable$(accessor)
+	};
+}
+function SetDrawingGroupMenuItemFactory(accessor) {
+	return {
+		id: SetDrawingGroupOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "GroupIcon",
+		title: "drawing-ui.image-panel.group.group",
+		disabled$: getMenuStateByDrawingFocusChangedObservable$(accessor, "group")
+	};
+}
+function CancelDrawingGroupMenuItemFactory(accessor) {
+	return {
+		id: CancelDrawingGroupOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "UngroupIcon",
+		title: "drawing-ui.image-panel.group.unGroup",
+		disabled$: getMenuStateByDrawingFocusChangedObservable$(accessor, "unGroup")
+	};
+}
+
+//#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
+		}
+	}
+} } };
+
+//#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
+	});
+	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
+	const [visible, setVisible] = useState(false);
+	const [isHovered, setHovered] = useState(false);
+	const handleMouseEnter = () => {
+		setHovered(true);
+	};
+	const handleMouseLeave = () => {
+		setHovered(false);
+	};
+	const onVisibleChange = (visible) => {
+		setVisible(visible);
+	};
+	const handleClick = (item) => {
+		commandService.executeCommand(item.commandId, item.commandParams);
+		setVisible(false);
+	};
+	const showMore = visible || isHovered;
+	return /* @__PURE__ */ jsx("div", {
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		children: /* @__PURE__ */ jsx(DropdownMenu, {
+			align: "start",
+			items: menuItems.map((item) => ({
+				type: "item",
+				children: localeService.t(item.label),
+				disabled: item.disable,
+				onSelect: () => handleClick(item)
+			})),
+			open: visible,
+			onOpenChange: onVisibleChange,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: clsx("univer-flex univer-items-center univer-gap-2 univer-rounded univer-p-1 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-800", borderClassName, {
+					"univer-bg-gray-100 dark:!univer-bg-gray-800": visible,
+					"univer-bg-white dark:!univer-bg-gray-900": !visible
+				}),
+				children: [/* @__PURE__ */ jsx(AutofillDoubleIcon, { className: "univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-white" }), showMore && /* @__PURE__ */ jsx(MoreDownIcon, { className: "dark:!univer-text-white" })]
+			})
+		})
+	});
+}
+const UPDATE_DOC_DRAWING_WRAPPING_STYLE_COMMAND_ID = "doc.command.update-doc-drawing-wrapping-style";
+function getWrappingStyle(documentDataModel, drawingId) {
+	var _documentDataModel$ge;
+	const drawing = documentDataModel === null || documentDataModel === void 0 || (_documentDataModel$ge = documentDataModel.getSnapshot().drawings) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge[drawingId];
+	if (!drawing) return "inline";
+	if (drawing.layoutType === PositionedObjectLayoutType.WRAP_NONE) return drawing.behindDoc === BooleanNumber.TRUE ? "behindText" : "inFrontOfText";
+	if (drawing.layoutType === PositionedObjectLayoutType.WRAP_SQUARE) return "wrapSquare";
+	if (drawing.layoutType === PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM) return "wrapTopAndBottom";
+	return "inline";
+}
+function Divider() {
+	return /* @__PURE__ */ jsx("span", { className: "\r\n              univer-h-5 univer-w-px univer-bg-gray-200\r\n              dark:!univer-bg-gray-700\r\n            " });
+}
+function ToolbarGroup(props) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "univer-flex univer-h-7 univer-items-center univer-gap-1 univer-px-1",
+		children: props.children
+	});
+}
+function ToolbarButton(props) {
+	return /* @__PURE__ */ jsx(Tooltip, {
+		title: props.title,
+		placement: "bottom",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			disabled: props.disabled,
+			onClick: props.onClick,
+			className: clsx("univer-flex univer-h-6 univer-w-6 univer-items-center univer-justify-center univer-rounded-md univer-border-none univer-bg-transparent univer-p-0 univer-text-sm univer-text-gray-700 univer-transition-colors hover:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-opacity-40 dark:!univer-text-gray-100 dark:hover:!univer-bg-gray-700", { "univer-bg-gray-100 univer-text-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-primary-300": props.active }),
+			children: props.children
+		})
+	});
+}
+function TextWrapShapeIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 20 20",
+		width: "1em",
+		height: "1em",
+		fill: "none",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M2.5 4.5H8.2",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M11.8 4.5H17.5",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M2.5 10H5.7",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14.3 10H17.5",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M2.5 15.5H8.2",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M11.8 15.5H17.5",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "6.8",
+				y: "7",
+				width: "6.4",
+				height: "6",
+				rx: "1",
+				stroke: "currentColor",
+				strokeWidth: "1.4"
+			})
+		]
+	});
+}
+function CropIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 20 20",
+		width: "1em",
+		height: "1em",
+		fill: "none",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M5 2.8V12.5C5 13.9 6.1 15 7.5 15H17.2",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M2.8 5H12.5C13.9 5 15 6.1 15 7.5V17.2",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M8.3 8.3H11.7V11.7H8.3V8.3Z",
+				stroke: "currentColor",
+				strokeWidth: "1.2"
+			})
+		]
+	});
+}
+function ToolbarDropdownButton(props) {
+	var _props$options$find;
+	const [open, setOpen] = useState(false);
+	const activeOption = (_props$options$find = props.options.find((option) => option.value === props.value)) !== null && _props$options$find !== void 0 ? _props$options$find : props.options[0];
+	return /* @__PURE__ */ jsx(Dropdown, {
+		open,
+		onOpenChange: setOpen,
+		overlay: /* @__PURE__ */ jsx("div", {
+			className: "univer-min-w-32 univer-rounded-lg univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-p-1 univer-shadow-lg dark:!univer-border-gray-700 dark:!univer-bg-gray-900",
+			children: props.options.map((option) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => {
+					props.onChange(option.value);
+					setOpen(false);
+				},
+				className: clsx("univer-flex univer-h-8 univer-w-full univer-items-center univer-gap-2 univer-rounded-md univer-border-none univer-bg-transparent univer-px-2 univer-text-left univer-text-sm univer-text-gray-700 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-gray-100 dark:hover:!univer-bg-gray-800", { "univer-bg-primary-50 univer-text-primary-600 dark:!univer-bg-gray-800 dark:!univer-text-primary-300": option.value === props.value }),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "univer-flex univer-size-4 univer-items-center univer-justify-center",
+					children: option.icon
+				}), /* @__PURE__ */ jsx("span", {
+					className: "univer-flex-1",
+					children: option.label
+				})]
+			}, option.value))
+		}),
+		children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Tooltip, {
+			title: props.title,
+			placement: "bottom",
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: clsx("univer-flex univer-h-6 univer-min-w-9 univer-items-center univer-justify-center univer-gap-1 univer-rounded-md univer-border-none univer-bg-transparent univer-px-1.5 univer-text-sm univer-text-gray-700 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-gray-100 dark:hover:!univer-bg-gray-700", { "univer-bg-gray-100 univer-text-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-primary-300": open }),
+				children: [activeOption.icon, /* @__PURE__ */ jsx(MoreDownIcon, { className: "univer-text-xs" })]
+			})
+		}) })
+	});
+}
+function DocImageFloatingToolbar(props) {
+	var _univerInstanceServic, _wrappingStyleOptions, _wrappingStyleOptions2;
+	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
+	const documentDataModel = (_univerInstanceServic = useDependency(IUniverInstanceService).getUnit(props.unitId, UniverInstanceType.UNIVER_DOC)) !== null && _univerInstanceServic !== void 0 ? _univerInstanceServic : void 0;
+	const [wrappingStyle, setWrappingStyle] = useState(() => getWrappingStyle(documentDataModel, props.drawingId));
+	const [hidden, setHidden] = useState(false);
+	const getMenuItem = (label) => props.menuItems.find((item) => item.label === label);
+	const editItem = getMenuItem("drawing-ui.image-popup.edit");
+	const cropItem = getMenuItem("drawing-ui.image-popup.crop");
+	const deleteItem = getMenuItem("drawing-ui.image-popup.delete");
+	const wrappingStyleOptions = [
+		{
+			label: localeService.t("drawing-ui.image-text-wrap.inline"),
+			value: "inline",
+			icon: /* @__PURE__ */ jsx(TextWrapShapeIcon, {})
+		},
+		{
+			label: localeService.t("drawing-ui.image-text-wrap.square"),
+			value: "wrapSquare",
+			icon: /* @__PURE__ */ jsx(TextWrapShapeIcon, {})
+		},
+		{
+			label: localeService.t("drawing-ui.image-text-wrap.topAndBottom"),
+			value: "wrapTopAndBottom",
+			icon: /* @__PURE__ */ jsx(TextWrapShapeIcon, {})
+		},
+		{
+			label: localeService.t("drawing-ui.image-text-wrap.behindText"),
+			value: "behindText",
+			icon: /* @__PURE__ */ jsx(TextWrapShapeIcon, {})
+		},
+		{
+			label: localeService.t("drawing-ui.image-text-wrap.inFrontText"),
+			value: "inFrontOfText",
+			icon: /* @__PURE__ */ jsx(TextWrapShapeIcon, {})
+		}
+	];
+	const executeMenuItem = (item) => {
+		if (!item || item.disable) return;
+		commandService.executeCommand(item.commandId, item.commandParams);
+	};
+	const updateWrappingStyle = (value) => {
+		setWrappingStyle(value);
+		commandService.executeCommand(UPDATE_DOC_DRAWING_WRAPPING_STYLE_COMMAND_ID, {
+			unitId: props.unitId,
+			subUnitId: props.subUnitId,
+			drawings: [{
+				unitId: props.unitId,
+				subUnitId: props.subUnitId,
+				drawingId: props.drawingId
+			}],
+			wrappingStyle: value
+		});
+	};
+	if (hidden) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-u-comp": "doc-image-floating-toolbar",
+		onMouseDown: (event) => {
+			event.stopPropagation();
+			event.preventDefault();
+		},
+		className: clsx("univer-box-border univer-flex univer-items-center univer-rounded univer-bg-white univer-px-1 univer-py-1 univer-shadow-sm dark:!univer-border-gray-700 dark:!univer-bg-gray-900", borderClassName),
+		children: [
+			/* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(ToolbarDropdownButton, {
+				title: (_wrappingStyleOptions = (_wrappingStyleOptions2 = wrappingStyleOptions.find((option) => option.value === wrappingStyle)) === null || _wrappingStyleOptions2 === void 0 ? void 0 : _wrappingStyleOptions2.label) !== null && _wrappingStyleOptions !== void 0 ? _wrappingStyleOptions : localeService.t("drawing-ui.image-text-wrap.inline"),
+				value: wrappingStyle,
+				options: wrappingStyleOptions,
+				onChange: updateWrappingStyle
+			}) }),
+			/* @__PURE__ */ jsx(Divider, {}),
+			/* @__PURE__ */ jsxs(ToolbarGroup, { children: [/* @__PURE__ */ jsx(ToolbarButton, {
+				title: editItem ? localeService.t(editItem.label) : localeService.t("drawing-ui.image-popup.edit"),
+				disabled: !editItem || editItem.disable,
+				onClick: () => {
+					setHidden(true);
+					executeMenuItem(editItem);
+				},
+				children: /* @__PURE__ */ jsx(DocSettingIcon, {})
+			}), /* @__PURE__ */ jsx(ToolbarButton, {
+				title: cropItem ? localeService.t(cropItem.label) : localeService.t("drawing-ui.image-popup.crop"),
+				disabled: !cropItem || cropItem.disable,
+				onClick: () => executeMenuItem(cropItem),
+				children: /* @__PURE__ */ jsx(CropIcon, {})
+			})] }),
+			/* @__PURE__ */ jsx(Divider, {}),
+			/* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(ToolbarButton, {
+				title: deleteItem ? localeService.t(deleteItem.label) : localeService.t("drawing-ui.image-popup.delete"),
+				disabled: !deleteItem || deleteItem.disable,
+				onClick: () => executeMenuItem(deleteItem),
+				children: /* @__PURE__ */ jsx(DeleteIcon, {})
+			}) })
+		]
+	});
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorateParam.js
+function __decorateParam(paramIndex, decorator) {
+	return function(target, key) {
+		decorator(target, key, paramIndex);
+	};
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+//#endregion
+//#region src/controllers/drawing-ui.controller.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+let DrawingUIController = class DrawingUIController extends Disposable {
+	constructor(_componentManager, _commandService, _menuManagerService) {
+		super();
+		this._componentManager = _componentManager;
+		this._commandService = _commandService;
+		this._menuManagerService = _menuManagerService;
+		this._init();
+	}
+	_init() {
+		this._initMenus();
+		this._initCommands();
+		this._initComponents();
+	}
+	_initMenus() {
+		this._menuManagerService.mergeMenu(menuSchema);
+	}
+	_initCommands() {
+		[
+			OpenImageCropOperation,
+			CloseImageCropOperation,
+			ImageResetSizeOperation,
+			SetDrawingAlignOperation,
+			SetDrawingAlignLeftOperation,
+			SetDrawingAlignCenterOperation,
+			SetDrawingAlignRightOperation,
+			SetDrawingAlignTopOperation,
+			SetDrawingAlignMiddleOperation,
+			SetDrawingAlignBottomOperation,
+			SetDrawingAlignHorizonOperation,
+			SetDrawingAlignVerticalOperation,
+			AutoImageCropOperation,
+			SetDrawingGroupOperation,
+			CancelDrawingGroupOperation,
+			SetDrawingArrangeOperation,
+			SetDrawingArrangeFrontOperation,
+			SetDrawingArrangeForwardOperation,
+			SetDrawingArrangeBackOperation,
+			SetDrawingArrangeBackwardOperation
+		].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
+	}
+	_initComponents() {
+		[
+			[COMPONENT_IMAGE_POPUP_MENU, ImagePopupMenu],
+			["BottomIcon", BottomIcon],
+			["GroupIcon", GroupIcon],
+			["MoveDownIcon", MoveDownIcon],
+			["MoveUpIcon", MoveUpIcon],
+			["TopmostIcon", TopmostIcon],
+			["UngroupIcon", UngroupIcon]
+		].forEach(([key, component]) => {
+			this.disposeWithMe(this._componentManager.register(key, component));
+		});
+	}
+};
+DrawingUIController = __decorate([
+	__decorateParam(0, Inject(ComponentManager)),
+	__decorateParam(1, ICommandService),
+	__decorateParam(2, IMenuManagerService)
+], DrawingUIController);
+
+//#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 \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+
+//#endregion
+//#region src/controllers/drawing-update.controller.ts
+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
+					}]);
+				});
+			});
+		});
+	}
+	_commandExecutedListener() {
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (command.id === SetDrawingAlignOperation.id) {
+				const params = command.params;
+				if (params == null) return;
+				this._drawingAlign(params);
+			}
+		}));
+	}
+	_drawingGroupListener() {
+		this.disposeWithMe(this._drawingManagerService.group$.subscribe((params) => {
+			this._groupDrawings(params);
+		}));
+		this.disposeWithMe(this._drawingManagerService.ungroup$.subscribe((params) => {
+			this._ungroupDrawings(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()
+		};
+	}
+	_groupDrawings(drawings) {
+		drawings.forEach((drawing) => {
+			this._groupDrawing(drawing);
+		});
+	}
+	_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
+		});
+		transformer.clearSelectedObjects();
+		transformer.setSelectedControl(group);
+	}
+	_ungroupDrawings(drawings) {
+		drawings.forEach((drawing) => {
+			this._ungroupDrawing(drawing);
+		});
+	}
+	_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();
+	}
+	_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
+			});
+			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 (newLeft !== left || newTop !== top) updateParams.push({
+				unitId,
+				subUnitId,
+				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);
+		}));
+	}
+	_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 _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({
+					left,
+					top,
+					width,
+					height,
+					angle,
+					flipX,
+					flipY,
+					skewX,
+					skewY
+				});
+				(_scene$getTransformer2 = scene.getTransformer()) === null || _scene$getTransformer2 === void 0 || _scene$getTransformer2.debounceRefreshControls();
+			});
+		}));
+	}
+	_drawingRefreshListener() {
+		this.disposeWithMe(this._drawingManagerService.refreshTransform$.subscribe((params) => {
+			params.forEach((param) => {
+				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;
+				const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({
+					unitId,
+					subUnitId,
+					drawingId
+				});
+				const drawingShape = scene.getObject(drawingShapeKey);
+				if (drawingShape == null || transform == null) 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
+				});
+			});
+		}));
+	}
+	_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();
+			});
+		}));
+	}
+	_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);
+		})));
+	}
+};
+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
+		};
+		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;
+	}
+	render(mainCtx, bounds) {
+		if (!this.visible) {
+			this.makeDirty(false);
+			return this;
+		}
+		mainCtx.save();
+		this._draw(mainCtx);
+		mainCtx.restore();
+		this.makeDirty(false);
+		return this;
+	}
+	_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)"
+		});
+		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
+		});
+	}
+	_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);
+		});
+	}
+};
+
+//#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({
+				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)
+		};
+	}
+	_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
+		});
+	}
+	_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/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
+let DrawingRenderService = class DrawingRenderService {
+	constructor(_drawingManagerService, _imageIoService, _galleryService, _urlImageService, _univerInstanceService, _drawingImageClipService) {
+		this._drawingManagerService = _drawingManagerService;
+		this._imageIoService = _imageIoService;
+		this._galleryService = _galleryService;
+		this._urlImageService = _urlImageService;
+		this._univerInstanceService = _univerInstanceService;
+		this._drawingImageClipService = _drawingImageClipService;
+	}
+	async renderImages(imageParam, scene) {
+		const { transform: singleTransform, drawingType, source, imageSourceType, srcRect, prstGeom, groupId, unitId, subUnitId, drawingId, isMultiTransform, transforms: multiTransforms, adjustValues, hidden } = imageParam;
+		if (drawingType !== DrawingTypeEnum.DRAWING_IMAGE) return;
+		if (!this._drawingManagerService.getDrawingVisible()) return;
+		if (this._univerInstanceService.getUnitType(unitId) === UniverInstanceType.UNIVER_SHEET && subUnitId !== this._getActiveSheetId()) return;
+		if (singleTransform == null) return;
+		const transforms = isMultiTransform && multiTransforms ? multiTransforms : [singleTransform];
+		const images = [];
+		for (const transform of transforms) {
+			const { left, top, width, height, angle, flipX, flipY, skewX, skewY } = transform;
+			const index = transforms.indexOf(transform);
+			const imageShapeKey = getDrawingShapeKeyByDrawingSearch({
+				unitId,
+				subUnitId,
+				drawingId
+			}, isMultiTransform ? index : void 0);
+			const imageShape = scene.getObject(imageShapeKey);
+			if (imageShape != null) {
+				imageShape.transformByState({
+					left,
+					top,
+					width,
+					height,
+					angle,
+					flipX,
+					flipY,
+					skewX,
+					skewY
+				});
+				continue;
+			}
+			const orders = this._drawingManagerService.getDrawingOrder(unitId, subUnitId);
+			const zIndex = orders.indexOf(drawingId);
+			const imageConfig = {
+				...transform,
+				zIndex: zIndex === -1 ? orders.length - 1 : zIndex
+			};
+			const imageNativeCache = this._imageIoService.getImageSourceCache(source, imageSourceType);
+			let shouldBeCache = false;
+			if (imageNativeCache != null) imageConfig.image = imageNativeCache;
+			else if (imageSourceType === ImageSourceType$1.UUID) try {
+				imageConfig.url = await this._imageIoService.getImage(source);
+			} catch (error) {
+				console.error(error);
+				continue;
+			}
+			else if (imageSourceType === ImageSourceType$1.URL) {
+				try {
+					imageConfig.url = await this._urlImageService.getImage(source);
+				} catch (error) {
+					console.error(error);
+					imageConfig.url = source;
+				}
+				shouldBeCache = true;
+			} else {
+				imageConfig.url = source;
+				shouldBeCache = true;
+			}
+			if (hidden) imageConfig.visible = false;
+			if (scene.getObject(imageShapeKey)) continue;
+			imageConfig.printable = true;
+			const image = new Image(imageShapeKey, imageConfig);
+			image.setClipService(this._drawingImageClipService);
+			if (shouldBeCache) this._imageIoService.addImageSourceCache(source, imageSourceType, image.getNative());
+			scene.addObject(image, DRAWING_OBJECT_LAYER_INDEX);
+			if (this._drawingManagerService.getDrawingEditable()) scene.attachTransformerTo(image);
+			groupId && insertGroupObject({
+				drawingId: groupId,
+				unitId,
+				subUnitId
+			}, image, scene, this._drawingManagerService);
+			if (prstGeom != null) image.setPrstGeom(prstGeom);
+			if (adjustValues != null) image.setPrstGeomAdjValues(adjustValues);
+			if (srcRect != null) image.setSrcRect(srcRect);
+			images.push(image);
+		}
+		return images;
+	}
+	_getActiveSheetId() {
+		var _this$_univerInstance;
+		return (_this$_univerInstance = this._univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_SHEET)) === null || _this$_univerInstance === void 0 || (_this$_univerInstance = _this$_univerInstance.getActiveSheet()) === null || _this$_univerInstance === void 0 ? void 0 : _this$_univerInstance.getSheetId();
+	}
+	renderFloatDom(param, scene) {
+		const { transform: singleTransform, drawingType, groupId, unitId, subUnitId, drawingId, isMultiTransform, transforms: multiTransforms } = param;
+		if (drawingType !== DrawingTypeEnum.DRAWING_DOM) return;
+		if (!this._drawingManagerService.getDrawingVisible()) return;
+		if (singleTransform == null) return;
+		const transforms = isMultiTransform && multiTransforms ? multiTransforms : [singleTransform];
+		const rects = [];
+		for (const transform of transforms) {
+			const { left, top, width, height, angle, flipX, flipY, skewX, skewY } = transform;
+			const index = transforms.indexOf(transform);
+			const imageShapeKey = getDrawingShapeKeyByDrawingSearch({
+				unitId,
+				subUnitId,
+				drawingId
+			}, isMultiTransform ? index : void 0);
+			const imageShape = scene.getObject(imageShapeKey);
+			if (imageShape != null) {
+				imageShape.transformByState({
+					left,
+					top,
+					width,
+					height,
+					angle,
+					flipX,
+					flipY,
+					skewX,
+					skewY
+				});
+				continue;
+			}
+			const orders = this._drawingManagerService.getDrawingOrder(unitId, subUnitId);
+			const zIndex = orders.indexOf(drawingId);
+			const rectConfig = {
+				...transform,
+				zIndex: zIndex === -1 ? orders.length - 1 : zIndex
+			};
+			if (scene.getObject(imageShapeKey)) continue;
+			rectConfig.printable = false;
+			const rect = new Rect(imageShapeKey, rectConfig);
+			if (!this._drawingManagerService.getDrawingVisible()) continue;
+			scene.addObject(rect, DRAWING_OBJECT_LAYER_INDEX);
+			if (this._drawingManagerService.getDrawingEditable() && param.allowTransform !== false) scene.attachTransformerTo(rect);
+			groupId && insertGroupObject({
+				drawingId: groupId,
+				unitId,
+				subUnitId
+			}, rect, scene, this._drawingManagerService);
+			rects.push(rect);
+		}
+		return rects;
+	}
+	renderDrawing(param, scene) {
+		const drawingParam = this._drawingManagerService.getDrawingByParam(param);
+		if (drawingParam == null) return;
+		switch (drawingParam.drawingType) {
+			case DrawingTypeEnum.DRAWING_IMAGE: return this.renderImages(drawingParam, scene);
+			default:
+		}
+	}
+	previewImage(key, src, width, height) {
+		this._galleryService.open({
+			images: [src],
+			onOpenChange: (open) => {
+				if (!open) this._galleryService.close();
+			}
+		});
+	}
+	_adjustImageSize(nativeWidth, nativeHeight, screenWidth, screenHeight) {
+		if (nativeWidth <= screenWidth && nativeHeight <= screenHeight) return {
+			width: nativeWidth,
+			height: nativeHeight
+		};
+		const widthRatio = screenWidth / nativeWidth;
+		const heightRatio = screenHeight / nativeHeight;
+		const scale = Math.min(widthRatio, heightRatio);
+		return {
+			width: Math.floor(nativeWidth * scale),
+			height: Math.floor(nativeHeight * scale)
+		};
+	}
+};
+DrawingRenderService = __decorate([
+	__decorateParam(0, IDrawingManagerService),
+	__decorateParam(1, IImageIoService),
+	__decorateParam(2, IGalleryService),
+	__decorateParam(3, IURLImageService),
+	__decorateParam(4, IUniverInstanceService),
+	__decorateParam(5, Inject(DrawingImageClipService))
+], DrawingRenderService);
+
+//#endregion
+//#region src/controllers/image-update.controller.ts
+let ImageUpdateController = class ImageUpdateController extends Disposable {
+	constructor(_commandService, _renderManagerService, _drawingManagerService, _dialogService, _imageIoService, _currentUniverService, _drawingRenderService) {
+		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) => {
+				const { unitId, subUnitId, drawingId } = param;
+				const drawingParam = this._drawingManagerService.getDrawingByParam(param);
+				if (drawingParam == null) return;
+				const { transform, drawingType, srcRect, prstGeom, source, imageSourceType } = drawingParam;
+				if (drawingType !== DrawingTypeEnum.DRAWING_IMAGE) return;
+				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+				if (renderObject == null) return;
+				const { scene, transformer } = renderObject;
+				if (transform == null) return true;
+				const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({
+					unitId,
+					subUnitId,
+					drawingId
+				});
+				const imageShape = scene.getObject(drawingShapeKey);
+				if (imageShape == null) return true;
+				imageShape.setSrcRect(srcRect);
+				imageShape.setPrstGeom(prstGeom);
+				if (source != null && source.length > 0 && (imageSourceType === ImageSourceType.BASE64 || imageSourceType === ImageSourceType.URL)) imageShape.changeSource(source);
+			});
+		}));
+	}
+	_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/plugin.ts
+let UniverDrawingUIPlugin = class UniverDrawingUIPlugin extends Plugin {
+	constructor(_config = defaultPluginConfig, _injector, _configService) {
+		super();
+		this._config = _config;
+		this._injector = _injector;
+		this._configService = _configService;
+		const { menu, ...rest } = merge({}, defaultPluginConfig, this._config);
+		if (menu) this._configService.setConfig("menu", menu, { merge: true });
+		this._configService.setConfig(DRAWING_UI_PLUGIN_CONFIG_KEY, rest);
+	}
+	onStarting() {
+		this._initDependencies();
+	}
+	onRendered() {
+		this._injector.get(DrawingUpdateController);
+		this._injector.get(DrawingUIController);
+		this._injector.get(ImageCropperController);
+		this._injector.get(ImageUpdateController);
+	}
+	_initDependencies() {
+		[
+			[DrawingImageClipService],
+			[DrawingRenderService],
+			[DrawingUpdateController],
+			[DrawingUIController],
+			[ImageCropperController],
+			[ImageUpdateController]
+		].forEach((dependency) => this._injector.add(dependency));
+	}
+};
+_defineProperty(UniverDrawingUIPlugin, "pluginName", "UNIVER_DRAWING_UI_PLUGIN");
+_defineProperty(UniverDrawingUIPlugin, "packageName", name);
+_defineProperty(UniverDrawingUIPlugin, "version", version);
+UniverDrawingUIPlugin = __decorate([__decorateParam(1, Inject(Injector)), __decorateParam(2, IConfigService)], UniverDrawingUIPlugin);
+
+//#endregion
+//#region src/views/panel/DrawingAlign.tsx
+const DrawingAlign = (props) => {
+	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
+	const { drawings, alignShow } = props;
+	const [alignValue, setAlignValue] = useState("0");
+	const alignOptions = [
+		{
+			label: localeService.t("drawing-ui.image-panel.align.default"),
+			value: "0"
+		},
+		{ options: [
+			{
+				label: localeService.t("drawing-ui.image-panel.align.left"),
+				value: "1"
+			},
+			{
+				label: localeService.t("drawing-ui.image-panel.align.center"),
+				value: "2"
+			},
+			{
+				label: localeService.t("drawing-ui.image-panel.align.right"),
+				value: "3"
+			}
+		] },
+		{ options: [
+			{
+				label: localeService.t("drawing-ui.image-panel.align.top"),
+				value: "4"
+			},
+			{
+				label: localeService.t("drawing-ui.image-panel.align.middle"),
+				value: "5"
+			},
+			{
+				label: localeService.t("drawing-ui.image-panel.align.bottom"),
+				value: "6"
+			}
+		] },
+		{ options: [{
+			label: localeService.t("drawing-ui.image-panel.align.horizon"),
+			value: "7"
+		}, {
+			label: localeService.t("drawing-ui.image-panel.align.vertical"),
+			value: "8"
+		}] }
+	];
+	function handleAlignChange(value) {
+		setAlignValue(value);
+		commandService.executeCommand(SetDrawingAlignOperation.id, {
+			alignType: value,
+			drawings
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("univer-relative univer-w-full", { "univer-hidden": !alignShow }),
+		children: [/* @__PURE__ */ jsx("header", {
+			className: "univer-text-gray-600 dark:!univer-text-gray-200",
+			children: /* @__PURE__ */ jsx("div", { children: localeService.t("drawing-ui.image-panel.align.title") })
+		}), /* @__PURE__ */ jsx("div", {
+			className: "univer-relative univer-mt-2.5 univer-flex univer-h-full",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "univer-w-full univer-text-gray-900 dark:!univer-text-white",
+				children: /* @__PURE__ */ jsx(Select, {
+					value: alignValue,
+					options: alignOptions,
+					onChange: handleAlignChange
+				})
+			})
+		})]
+	});
+};
+
+//#endregion
+//#region src/views/panel/DrawingArrange.tsx
+const DrawingArrange = (props) => {
+	const { arrangeShow, drawings: focusDrawings } = props;
+	const localeService = useDependency(LocaleService);
+	const drawingManagerService = useDependency(IDrawingManagerService);
+	const commandService = useDependency(ICommandService);
+	const componentManager = useDependency(ComponentManager);
+	const MoveUpIcon = componentManager.get("MoveUpIcon");
+	const MoveDownIcon = componentManager.get("MoveDownIcon");
+	const TopmostIcon = componentManager.get("TopmostIcon");
+	const BottomIcon = componentManager.get("BottomIcon");
+	const [drawings, setDrawings] = useState(focusDrawings);
+	useEffect(() => {
+		const focusDispose = drawingManagerService.focus$.subscribe((drawings) => {
+			setDrawings(drawings);
+		});
+		return () => {
+			focusDispose.unsubscribe();
+		};
+	}, []);
+	const onArrangeBtnClick = (arrangeType) => {
+		commandService.syncExecuteCommand(SetDrawingArrangeOperation.id, {
+			arrangeType,
+			drawings
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": !arrangeShow }),
+		children: [/* @__PURE__ */ jsx("header", {
+			className: "univer-text-gray-600 dark:!univer-text-gray-200",
+			children: /* @__PURE__ */ jsx("div", { children: localeService.t("drawing-ui.image-panel.arrange.title") })
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "univer-grid univer-grid-cols-2 univer-gap-2",
+			children: [
+				/* @__PURE__ */ jsxs(Button, {
+					onClick: () => {
+						onArrangeBtnClick(ArrangeTypeEnum.forward);
+					},
+					children: [/* @__PURE__ */ jsx(MoveUpIcon, {}), localeService.t("drawing-ui.image-panel.arrange.forward")]
+				}),
+				/* @__PURE__ */ jsxs(Button, {
+					onClick: () => {
+						onArrangeBtnClick(ArrangeTypeEnum.backward);
+					},
+					children: [/* @__PURE__ */ jsx(MoveDownIcon, {}), localeService.t("drawing-ui.image-panel.arrange.backward")]
+				}),
+				/* @__PURE__ */ jsxs(Button, {
+					onClick: () => {
+						onArrangeBtnClick(ArrangeTypeEnum.front);
+					},
+					children: [/* @__PURE__ */ jsx(TopmostIcon, {}), localeService.t("drawing-ui.image-panel.arrange.front")]
+				}),
+				/* @__PURE__ */ jsxs(Button, {
+					onClick: () => {
+						onArrangeBtnClick(ArrangeTypeEnum.back);
+					},
+					children: [/* @__PURE__ */ jsx(BottomIcon, {}), localeService.t("drawing-ui.image-panel.arrange.back")]
+				})
+			]
+		})]
+	});
+};
+
+//#endregion
+//#region src/views/panel/DrawingGroup.tsx
+const DrawingGroup = (props) => {
+	const localeService = useDependency(LocaleService);
+	const renderManagerService = useDependency(IRenderManagerService);
+	const drawingManagerService = useDependency(IDrawingManagerService);
+	const commandService = useDependency(ICommandService);
+	const componentManager = useDependency(ComponentManager);
+	const { hasGroup, drawings } = props;
+	const GroupIcon = componentManager.get("GroupIcon");
+	const UngroupIcon = componentManager.get("UngroupIcon");
+	const [groupShow, setGroupShow] = useState(false);
+	const [groupBtnShow, setGroupBtnShow] = useState(true);
+	const [ungroupBtnShow, setUngroupBtnShow] = useState(true);
+	const onGroupBtnClick = () => {
+		commandService.syncExecuteCommand(SetDrawingGroupOperation.id, { drawings });
+	};
+	const onUngroupBtnClick = () => {
+		commandService.syncExecuteCommand(CancelDrawingGroupOperation.id, { drawings });
+	};
+	useEffect(() => {
+		const drawingParam = drawings[0];
+		if (drawingParam == null) return;
+		const { unitId } = drawingParam;
+		const renderObject = renderManagerService.getRenderById(unitId);
+		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+		if (scene == null) return;
+		const transformer = scene.getTransformerByCreate();
+		const onClearControlObserver = transformer.clearControl$.subscribe((changeSelf) => {
+			if (changeSelf === true) setGroupShow(false);
+		});
+		const onChangeStartObserver = transformer.changeStart$.subscribe((state) => {
+			const { objects } = state;
+			const params = getUpdateParams(objects, drawingManagerService);
+			const groupParams = params.filter((o) => (o === null || o === void 0 ? void 0 : o.drawingType) === DrawingTypeEnum.DRAWING_GROUP);
+			let groupBtnShow = false;
+			let ungroupBtnShow = false;
+			if (params.length > 1) groupBtnShow = true;
+			if (groupParams.length > 0) ungroupBtnShow = true;
+			setGroupShow(groupBtnShow || ungroupBtnShow);
+			setGroupBtnShow(groupBtnShow);
+			setUngroupBtnShow(ungroupBtnShow);
+		});
+		return () => {
+			onChangeStartObserver.unsubscribe();
+			onClearControlObserver.unsubscribe();
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": hasGroup === true && groupShow === false || hasGroup === false }),
+		children: [/* @__PURE__ */ jsx("header", {
+			className: "univer-text-gray-600 dark:!univer-text-gray-200",
+			children: /* @__PURE__ */ jsx("div", { children: localeService.t("drawing-ui.image-panel.group.title") })
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "univer-flex univer-items-center univer-justify-center univer-gap-2",
+			children: [/* @__PURE__ */ jsxs(Button, {
+				className: clsx({ "univer-hidden": !groupBtnShow }),
+				onClick: onGroupBtnClick,
+				children: [/* @__PURE__ */ jsx(GroupIcon, {}), localeService.t("drawing-ui.image-panel.group.group")]
+			}), /* @__PURE__ */ jsxs(Button, {
+				className: clsx({ "univer-hidden": !ungroupBtnShow }),
+				onClick: onUngroupBtnClick,
+				children: [/* @__PURE__ */ jsx(UngroupIcon, {}), localeService.t("drawing-ui.image-panel.group.unGroup")]
+			})]
+		})]
+	});
+};
+
+//#endregion
+//#region src/utils/config.ts
+const RANGE_DRAWING_ROTATION_LIMIT = [-360, 360];
+
+//#endregion
+//#region src/views/panel/DrawingTransform.tsx
+const INPUT_DEBOUNCE_TIME = 300;
+const DrawingTransform = (props) => {
+	var _scene$getEngine;
+	const localeService = useDependency(LocaleService);
+	const drawingManagerService = useDependency(IDrawingManagerService);
+	const renderManagerService = useDependency(IRenderManagerService);
+	const { drawings, transformShow } = props;
+	const drawingParam = drawings[0];
+	if (drawingParam == null) return;
+	const transform = drawingParam.transform;
+	if (transform == null) return;
+	const { unitId, subUnitId, drawingId, drawingType } = drawingParam;
+	const renderObject = renderManagerService.getRenderById(unitId);
+	const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+	if (scene == null) return;
+	const topScene = (_scene$getEngine = scene.getEngine()) === null || _scene$getEngine === void 0 ? void 0 : _scene$getEngine.activeScene;
+	if (topScene == null) return;
+	const transformer = scene.getTransformerByCreate();
+	const { width: originWidth = 0, height: originHeight = 0, left: originX = 0, top: originY = 0, angle: originRotation = 0 } = transform;
+	const [width, setWidth] = useState(originWidth);
+	const [height, setHeight] = useState(originHeight);
+	const [xPosition, setXPosition] = useState(originX);
+	const [yPosition, setYPosition] = useState(originY);
+	const [rotation, setRotation] = useState(originRotation);
+	const [lockRatio, setLockRatio] = useState(transformer.keepRatio);
+	const checkMoveBoundary = (left, top, width, height) => {
+		const { width: topSceneWidth, height: topSceneHeight } = topScene;
+		const { ancestorLeft, ancestorTop } = scene;
+		let limitLeft = left;
+		let limitTop = top;
+		let limitWidth = width;
+		let limitHeight = height;
+		if (left + ancestorLeft < 0) limitLeft = -ancestorLeft;
+		if (top + ancestorTop < 0) limitTop = -ancestorTop;
+		limitWidth = topSceneWidth - limitLeft - ancestorLeft;
+		if (limitWidth < 20) limitWidth = 20;
+		limitHeight = topSceneHeight - limitTop - ancestorTop;
+		if (limitHeight < 20) limitHeight = 20;
+		if (left + limitWidth + ancestorLeft > topSceneWidth) limitLeft = topSceneWidth - width - ancestorLeft;
+		if (top + limitHeight + ancestorTop > topSceneHeight) limitTop = topSceneHeight - height - ancestorTop;
+		return {
+			limitLeft,
+			limitTop,
+			limitWidth,
+			limitHeight
+		};
+	};
+	const changeObs = (state) => {
+		const { objects } = state;
+		const params = getUpdateParams(objects, drawingManagerService);
+		if (params.length !== 1) return;
+		const drawingParam = params[0];
+		if (drawingParam == null) return;
+		const { transform } = drawingParam;
+		if (transform == null) return;
+		const { width: originWidth, height: originHeight, left: originX, top: originY, angle: originRotation } = transform;
+		if (originWidth != null) setWidth(originWidth);
+		if (originHeight != null) setHeight(originHeight);
+		if (originX != null) setXPosition(originX);
+		if (originY != null) setYPosition(originY);
+		if (originRotation != null) setRotation(originRotation);
+	};
+	useEffect(() => {
+		const subscriptions = [
+			transformer.changeStart$.subscribe((state) => {
+				changeObs(state);
+			}),
+			transformer.changing$.subscribe((state) => {
+				changeObs(state);
+			}),
+			transformer.changeEnd$.subscribe((state) => {
+				changeObs(state);
+			}),
+			drawingManagerService.focus$.subscribe((drawings) => {
+				if (drawings.length !== 1) return;
+				const drawingParam = drawingManagerService.getDrawingByParam(drawings[0]);
+				if (drawingParam == null) return;
+				const transform = drawingParam.transform;
+				if (transform == null) return;
+				const { width: originWidth, height: originHeight, left: originX, top: originY, angle: originRotation } = transform;
+				if (originWidth != null) setWidth(originWidth);
+				if (originHeight != null) setHeight(originHeight);
+				if (originX != null) setXPosition(originX);
+				if (originY != null) setYPosition(originY);
+				if (originRotation != null) setRotation(originRotation);
+			})
+		];
+		return () => {
+			subscriptions.forEach((sub) => sub.unsubscribe());
+		};
+	}, []);
+	const handleWidthChange = debounce((val) => {
+		if (val == null) return;
+		const { limitWidth, limitHeight } = checkMoveBoundary(xPosition, yPosition, val, height);
+		val = Math.min(val, limitWidth);
+		const updateParam = {
+			unitId,
+			subUnitId,
+			drawingId,
+			drawingType,
+			transform: { width: val }
+		};
+		if (lockRatio) {
+			let heightFix = val / width * height;
+			heightFix = Math.max(heightFix, 20);
+			if (heightFix > limitHeight) return;
+			setHeight(heightFix);
+			updateParam.transform.height = heightFix;
+		}
+		setWidth(val);
+		drawingManagerService.featurePluginUpdateNotification([updateParam]);
+		transformer.refreshControls().changeNotification();
+	}, INPUT_DEBOUNCE_TIME);
+	const handleHeightChange = debounce((val) => {
+		if (val == null) return;
+		const { limitHeight, limitWidth } = checkMoveBoundary(xPosition, yPosition, width, val);
+		val = Math.min(val, limitHeight);
+		const updateParam = {
+			unitId,
+			subUnitId,
+			drawingId,
+			drawingType,
+			transform: { height: val }
+		};
+		if (lockRatio) {
+			let widthFix = val / height * width;
+			widthFix = Math.max(widthFix, 20);
+			if (widthFix > limitWidth) return;
+			setWidth(widthFix);
+			updateParam.transform.width = widthFix;
+		}
+		setHeight(val);
+		drawingManagerService.featurePluginUpdateNotification([updateParam]);
+		transformer.refreshControls().changeNotification();
+	}, INPUT_DEBOUNCE_TIME);
+	const handleXChange = debounce((val) => {
+		if (val == null) return;
+		const { limitLeft } = checkMoveBoundary(val, yPosition, width, height);
+		val = limitLeft;
+		const updateParam = {
+			unitId,
+			subUnitId,
+			drawingId,
+			drawingType,
+			transform: { left: val }
+		};
+		setXPosition(val);
+		drawingManagerService.featurePluginUpdateNotification([updateParam]);
+		transformer.refreshControls().changeNotification();
+	}, INPUT_DEBOUNCE_TIME);
+	const handleYChange = debounce((val) => {
+		if (val == null) return;
+		const { limitTop } = checkMoveBoundary(xPosition, val, width, height);
+		val = limitTop;
+		const updateParam = {
+			unitId,
+			subUnitId,
+			drawingId,
+			drawingType,
+			transform: { top: val }
+		};
+		setYPosition(val);
+		drawingManagerService.featurePluginUpdateNotification([updateParam]);
+		transformer.refreshControls().changeNotification();
+	}, INPUT_DEBOUNCE_TIME);
+	const handleRotationChange = (val) => {
+		if (val == null) return;
+		const updateParam = {
+			unitId,
+			subUnitId,
+			drawingId,
+			drawingType,
+			transform: { angle: val }
+		};
+		setRotation(val);
+		drawingManagerService.featurePluginUpdateNotification([updateParam]);
+		transformer.refreshControls().changeNotification();
+	};
+	const handleLockRatioChange = (val) => {
+		setLockRatio(val);
+		transformer.keepRatio = val;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": !transformShow }),
+		children: [
+			/* @__PURE__ */ jsx("header", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ jsx("div", { children: localeService.t("drawing-ui.image-panel.transform.title") })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "univer-grid univer-grid-cols-3 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
+				children: [
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("drawing-ui.image-panel.transform.width") }), /* @__PURE__ */ jsx(InputNumber, {
+						precision: 1,
+						value: width,
+						min: 20,
+						onChange: (val) => {
+							handleWidthChange(val);
+						}
+					})] }),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("drawing-ui.image-panel.transform.height") }), /* @__PURE__ */ jsx(InputNumber, {
+						precision: 1,
+						value: height,
+						min: 20,
+						onChange: (val) => {
+							handleHeightChange(val);
+						}
+					})] }),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("drawing-ui.image-panel.transform.lock") }), /* @__PURE__ */ jsx("div", {
+						className: "univer-text-center",
+						children: /* @__PURE__ */ jsx(Checkbox, {
+							checked: lockRatio,
+							onChange: handleLockRatioChange
+						})
+					})] })
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "univer-grid univer-grid-cols-3 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
+				children: [
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("drawing-ui.image-panel.transform.x") }), /* @__PURE__ */ jsx(InputNumber, {
+						precision: 1,
+						value: xPosition,
+						onChange: (val) => {
+							handleXChange(val);
+						}
+					})] }),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("drawing-ui.image-panel.transform.y") }), /* @__PURE__ */ jsx(InputNumber, {
+						precision: 1,
+						value: yPosition,
+						onChange: (val) => {
+							handleYChange(val);
+						}
+					})] }),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("drawing-ui.image-panel.transform.rotate") }), /* @__PURE__ */ jsx(InputNumber, {
+						precision: 1,
+						value: rotation,
+						min: RANGE_DRAWING_ROTATION_LIMIT[0],
+						max: RANGE_DRAWING_ROTATION_LIMIT[1],
+						onChange: handleRotationChange
+					})] })
+				]
+			})
+		]
+	});
+};
+
+//#endregion
+//#region src/views/panel/ImageCropper.tsx
+const ImageCropper = (props) => {
+	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
+	const clipService = useDependency(DrawingImageClipService);
+	const componentManager = useDependency(ComponentManager);
+	const canUseShapeClip = useObservable(clipService.canUseShapeClip$, false);
+	const { drawings, cropperShow } = props;
+	if (drawings[0] == null) return;
+	const [cropValue, setCropValue] = useState("0");
+	const cropStateRef = useRef(false);
+	const cropOptions = [
+		{
+			label: localeService.t("drawing-ui.image-panel.crop.mode"),
+			value: "0"
+		},
+		{
+			label: "1:1",
+			value: "1"
+		},
+		{
+			label: "16:9",
+			value: "2"
+		},
+		{
+			label: "9:16",
+			value: "3"
+		},
+		{
+			label: "5:4",
+			value: "4"
+		},
+		{
+			label: "4:5",
+			value: "5"
+		},
+		{
+			label: "4:3",
+			value: "6"
+		},
+		{
+			label: "3:4",
+			value: "7"
+		},
+		{
+			label: "3:2",
+			value: "8"
+		},
+		{
+			label: "2:3",
+			value: "9"
+		}
+	];
+	useEffect(() => {
+		const onChangeStartObserver = commandService.onCommandExecuted((command) => {
+			if (command.id === CloseImageCropOperation.id) {
+				const params = command.params;
+				if (!(params === null || params === void 0 ? void 0 : params.isAuto)) cropStateRef.current = false;
+			}
+		});
+		return () => {
+			onChangeStartObserver === null || onChangeStartObserver === void 0 || onChangeStartObserver.dispose();
+		};
+	}, []);
+	function handleCropChange(value) {
+		setCropValue(value);
+		if (cropStateRef.current) commandService.executeCommand(AutoImageCropOperation.id, { cropType: value });
+	}
+	const onCropperBtnClick = (val) => {
+		commandService.executeCommand(AutoImageCropOperation.id, { cropType: val });
+		cropStateRef.current = true;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": !cropperShow }),
+		children: [
+			/* @__PURE__ */ jsx("header", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ jsx("div", { children: localeService.t("drawing-ui.image-panel.crop.title") })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "univer-flex univer-items-center univer-justify-center univer-gap-2",
+				children: [/* @__PURE__ */ jsxs(Button, {
+					onClick: () => {
+						onCropperBtnClick(cropValue);
+					},
+					children: [/* @__PURE__ */ jsx(CreateCopyIcon, {}), localeService.t("drawing-ui.image-panel.crop.start")]
+				}), /* @__PURE__ */ jsx(Select, {
+					value: cropValue,
+					options: cropOptions,
+					onChange: handleCropChange
+				})]
+			}),
+			canUseShapeClip && (() => {
+				const ShapeClipPicker = componentManager.get("sheet.image-clip.shape.picker.component");
+				return ShapeClipPicker ? /* @__PURE__ */ jsx(ShapeClipPicker, {}) : null;
+			})()
+		]
+	});
+};
+
+//#endregion
+//#region src/views/panel/DrawingCommonPanel.tsx
+const DrawingCommonPanel = (props) => {
+	const drawingManagerService = useDependency(IDrawingManagerService);
+	const renderManagerService = useDependency(IRenderManagerService);
+	const localeService = useDependency(LocaleService);
+	const { drawings, hasArrange = true, hasTransform = true, hasAlign = true, hasCropper = true, hasGroup = true } = props;
+	const drawingParam = drawings[0];
+	if (drawingParam == null) return;
+	const { unitId } = drawingParam;
+	const renderObject = renderManagerService.getRenderById(unitId);
+	const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+	if (scene == null) return;
+	const transformer = scene.getTransformerByCreate();
+	const [arrangeShow, setArrangeShow] = useState(true);
+	const [transformShow, setTransformShow] = useState(true);
+	const [alignShow, setAlignShow] = useState(false);
+	const [cropperShow, setCropperShow] = useState(true);
+	const [nullShow, setNullShow] = useState(false);
+	useEffect(() => {
+		const clearControlSub = transformer.clearControl$.subscribe((changeSelf) => {
+			if (changeSelf === true) {
+				setArrangeShow(false);
+				setTransformShow(false);
+				setAlignShow(false);
+				setCropperShow(false);
+				setNullShow(true);
+			}
+		});
+		const changeStartSub = transformer.changeStart$.subscribe((state) => {
+			const { objects } = state;
+			const params = getUpdateParams(objects, drawingManagerService);
+			if (params.length === 0) {
+				setArrangeShow(false);
+				setTransformShow(false);
+				setAlignShow(false);
+				setCropperShow(false);
+				setNullShow(true);
+			} else if (params.length === 1) {
+				setArrangeShow(true);
+				setTransformShow(true);
+				setAlignShow(false);
+				setCropperShow(true);
+				setNullShow(false);
+			} else {
+				setArrangeShow(true);
+				setTransformShow(false);
+				setAlignShow(true);
+				setCropperShow(false);
+				setNullShow(false);
+			}
+		});
+		const focusSub = drawingManagerService.focus$.subscribe((drawings) => {
+			if (drawings.length === 0) {
+				setArrangeShow(false);
+				setTransformShow(false);
+				setAlignShow(false);
+				setCropperShow(false);
+				setNullShow(true);
+			} else if (drawings.length === 1) {
+				setArrangeShow(true);
+				setTransformShow(true);
+				setAlignShow(false);
+				setCropperShow(true);
+				setNullShow(false);
+			} else {
+				setArrangeShow(true);
+				setTransformShow(false);
+				setAlignShow(true);
+				setCropperShow(false);
+				setNullShow(false);
+			}
+		});
+		return () => {
+			changeStartSub.unsubscribe();
+			clearControlSub.unsubscribe();
+			focusSub.unsubscribe();
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("div", {
+			className: clsx("univer-h-full", { "univer-hidden": !nullShow }),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "univer-flex univer-h-full univer-items-center univer-justify-center",
+				children: /* @__PURE__ */ jsx("span", { children: localeService.t("drawing-ui.image-panel.null") })
+			})
+		}),
+		/* @__PURE__ */ jsx(DrawingArrange, {
+			arrangeShow: hasArrange === true ? arrangeShow : false,
+			drawings
+		}),
+		/* @__PURE__ */ jsx(DrawingTransform, {
+			transformShow: hasTransform === true ? transformShow : false,
+			drawings
+		}),
+		/* @__PURE__ */ jsx(DrawingAlign, {
+			alignShow: hasAlign === true ? alignShow : false,
+			drawings
+		}),
+		/* @__PURE__ */ jsx(ImageCropper, {
+			cropperShow: hasCropper === true ? cropperShow : false,
+			drawings
+		}),
+		/* @__PURE__ */ jsx(DrawingGroup, {
+			hasGroup,
+			drawings
+		})
+	] });
+};
+
+//#endregion
+export { AutoImageCropOperation, COMPONENT_IMAGE_POPUP_MENU, CancelDrawingGroupOperation, CloseImageCropOperation, DRAWING_GROUP_TYPES, DrawingCommonPanel, DrawingImageClipService, DrawingRenderService, IMAGE_CLIP_SHAPE_PICKER_COMPONENT, ImageCropperObject, ImagePopupMenu, ImageResetSizeOperation, OpenImageCropOperation, SetDrawingAlignOperation, SetDrawingArrangeOperation, SetDrawingGroupOperation, UniverDrawingUIPlugin, getCurrentUnitInfo, getUpdateParams, insertGroupObject };