@univerjs/drawing-ui 1.0.0-alpha.2 → 1.0.0-alpha.4

package/lib/es/index.js

@@ -1,12 +1,12 @@
-import { ArrangeTypeEnum, BooleanNumber, CommandType, Disposable, DrawingTypeEnum, ICommandService, IConfigService, IURLImageService, IUniverInstanceService, ImageSourceType, Inject, Injector, LocaleService, Plugin, PositionedObjectLayoutType, UniverInstanceType, checkIfMove, debounce, generateRandomId, merge, toDisposable } from "@univerjs/core";
-import { DRAWING_GROUPABLE_TYPES, IDrawingManagerService, IImageIoService, ImageSourceType as ImageSourceType$1, SetDrawingSelectedOperation, getDrawingShapeKeyByDrawingSearch, isGroupableDrawingType, resolveDrawingRotateEnabled } from "@univerjs/drawing";
+import { ArrangeTypeEnum, BooleanNumber, CommandType, Disposable, DrawingTypeEnum, ICommandService, IConfigService, IImageIoService, IURLImageService, IUniverInstanceService, ImageSourceType, Inject, Injector, LocaleService, Plugin, PositionedObjectLayoutType, UniverInstanceType, checkIfMove, debounce, generateRandomId, merge, toDisposable } from "@univerjs/core";
+import { DRAWING_GROUPABLE_TYPES, IDrawingManagerService, SetDrawingSelectedOperation, getDrawingShapeKeyByDrawingSearch, isGroupableDrawingType, resolveDrawingRotateEnabled } from "@univerjs/drawing";
 import { CURSOR_TYPE, Canvas, DRAWING_OBJECT_LAYER_INDEX, DrawingGroupObject, Group, IRenderManagerService, Image, RENDER_CLASS_TYPE, Rect, Shape, Vector2, degToRad, getGroupState, precisionTo, transformObjectOutOfGroup } from "@univerjs/engine-render";
-import { AutofillDoubleIcon, BottomIcon, CreateCopyIcon, CropIcon, DeleteIcon, DocSettingIcon, GroupIcon, MoreDownIcon, MoveDownIcon, MoveUpIcon, TextWrapShapeIcon, TopmostIcon, UngroupIcon } from "@univerjs/icons";
 import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IDialogService, IGalleryService, IMenuManagerService, IMessageService, IconManager, MenuItemType, useDependency, useObservable } from "@univerjs/ui";
-import { Button, Checkbox, Dropdown, DropdownMenu, InputNumber, MessageType, Select, Separator, Tooltip, borderClassName, clsx } from "@univerjs/design";
-import { useEffect, useRef, useState } from "react";
+import { BehaviorSubject, Observable, bufferTime, filter, map, merge as merge$1, of, switchMap } from "rxjs";
+import { ArrowDownIcon, ArrowUpIcon, AutofillDoubleIcon, BottomIcon, ChartIcon, CreateCopyIcon, CropIcon, DeleteIcon, DocSettingIcon, EyeIcon, EyelashIcon, GroupIcon, LocateFixedIcon, LockIcon, MoreDownIcon, MoreRightIcon, MoveDownIcon, MoveUpIcon, TextWrapShapeIcon, TopmostIcon, UngroupIcon } from "@univerjs/icons";
+import { Button, Checkbox, Dropdown, DropdownMenu, Input, InputNumber, MessageType, Select, Separator, Tooltip, borderClassName, clsx } from "@univerjs/design";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { BehaviorSubject, Observable, bufferTime, filter, map, of, switchMap } from "rxjs";
 
 //#region src/commands/operations/drawing-align.operation.ts
 /**
@@ -360,269 +360,280 @@ function getCurrentUnitInfo(currentUniverService, propUnitId) {
 }
 
 //#endregion
-//#region package.json
-var name = "@univerjs/drawing-ui";
-var version = "1.0.0-alpha.2";
-
-//#endregion
-//#region src/config/config.ts
-const DRAWING_UI_PLUGIN_CONFIG_KEY = "drawing-ui.config";
-const configSymbol = Symbol(DRAWING_UI_PLUGIN_CONFIG_KEY);
-const defaultPluginConfig = {};
-
-//#endregion
-//#region src/views/image-popup-menu/component-name.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-const COMPONENT_IMAGE_POPUP_MENU = "COMPONENT_IMAGE_POPUP_MENU";
-
-//#endregion
-//#region src/views/image-popup-menu/ImagePopupMenu.tsx
-function ImagePopupMenu(props) {
-	var _popup$extraProps, _popup$extraProps2;
-	const { popup } = props;
-	const menuItems = popup === null || popup === void 0 || (_popup$extraProps = popup.extraProps) === null || _popup$extraProps === void 0 ? void 0 : _popup$extraProps.menuItems;
-	if (!menuItems) return null;
-	if (((_popup$extraProps2 = popup.extraProps) === null || _popup$extraProps2 === void 0 ? void 0 : _popup$extraProps2.variant) === "doc-floating-toolbar" && popup.extraProps.unitId && popup.extraProps.subUnitId && popup.extraProps.drawingId) return /* @__PURE__ */ jsx(DocImageFloatingToolbar, {
-		menuItems,
-		unitId: popup.extraProps.unitId,
-		subUnitId: popup.extraProps.subUnitId,
-		drawingId: popup.extraProps.drawingId
+//#region src/menu/align.menu.ts
+const getMenuStateByDrawingFocusChangedObservable$$1 = (accessor) => {
+	const drawingManagerService = accessor.get(IDrawingManagerService);
+	return new Observable((subscriber) => {
+		const update = (drawings) => {
+			if (!drawings || drawings.length === 0) return subscriber.next(true);
+			if (drawings.length < 2) return subscriber.next(true);
+			subscriber.next(false);
+		};
+		const subscription = drawingManagerService.focus$.subscribe((drawings) => {
+			if (!drawings || drawings.length === 0) return subscriber.next(true);
+			update(drawings);
+		});
+		update(drawingManagerService.getFocusDrawings());
+		return () => subscription.unsubscribe();
 	});
-	const commandService = useDependency(ICommandService);
-	const localeService = useDependency(LocaleService);
-	const [visible, setVisible] = useState(false);
-	const [isHovered, setHovered] = useState(false);
-	const handleMouseEnter = () => {
-		setHovered(true);
+};
+const DRAWING_ALIGN_CONTEXT_MENU_ID = "contextMenu.drawing-align";
+function DrawingAlignContextMenuItemFactory(accessor) {
+	return {
+		id: DRAWING_ALIGN_CONTEXT_MENU_ID,
+		type: MenuItemType.SUBITEMS,
+		icon: "HorizontallyIcon",
+		title: "drawing-ui.image-panel.align.title",
+		hidden$: getMenuStateByDrawingFocusChangedObservable$$1(accessor)
 	};
-	const handleMouseLeave = () => {
-		setHovered(false);
+}
+function SetDrawingAlignLeftMenuItemFactory() {
+	return {
+		id: SetDrawingAlignLeftOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "LeftJustifyingIcon",
+		title: "drawing-ui.image-panel.align.left"
 	};
-	const onVisibleChange = (visible) => {
-		setVisible(visible);
+}
+function SetDrawingAlignCenterMenuItemFactory() {
+	return {
+		id: SetDrawingAlignCenterOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "HorizontallyIcon",
+		title: "drawing-ui.image-panel.align.center"
 	};
-	const handleClick = (item) => {
-		commandService.executeCommand(item.commandId, item.commandParams);
-		setVisible(false);
+}
+function SetDrawingAlignRightMenuItemFactory() {
+	return {
+		id: SetDrawingAlignRightOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "RightJustifyingIcon",
+		title: "drawing-ui.image-panel.align.right"
 	};
-	const showMore = visible || isHovered;
-	return /* @__PURE__ */ jsx("div", {
-		onMouseEnter: handleMouseEnter,
-		onMouseLeave: handleMouseLeave,
-		children: /* @__PURE__ */ jsx(DropdownMenu, {
-			align: "start",
-			items: menuItems.map((item) => ({
-				type: "item",
-				children: localeService.t(item.label),
-				disabled: item.disable,
-				onSelect: () => handleClick(item)
-			})),
-			open: visible,
-			onOpenChange: onVisibleChange,
-			children: /* @__PURE__ */ jsxs("div", {
-				className: clsx("univer-flex univer-items-center univer-gap-2 univer-rounded univer-p-1 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-800", borderClassName, {
-					"univer-bg-gray-100 dark:!univer-bg-gray-800": visible,
-					"univer-bg-white dark:!univer-bg-gray-900": !visible
-				}),
-				children: [/* @__PURE__ */ jsx(AutofillDoubleIcon, { className: "univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-white" }), showMore && /* @__PURE__ */ jsx(MoreDownIcon, { className: "dark:!univer-text-white" })]
-			})
-		})
-	});
 }
-const UPDATE_DOC_DRAWING_WRAPPING_STYLE_COMMAND_ID = "doc.command.update-doc-drawing-wrapping-style";
-function getWrappingStyle(documentDataModel, drawingId) {
-	var _documentDataModel$ge;
-	const drawing = documentDataModel === null || documentDataModel === void 0 || (_documentDataModel$ge = documentDataModel.getSnapshot().drawings) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge[drawingId];
-	if (!drawing) return "inline";
-	if (drawing.layoutType === PositionedObjectLayoutType.WRAP_NONE) return drawing.behindDoc === BooleanNumber.TRUE ? "behindText" : "inFrontOfText";
-	if (drawing.layoutType === PositionedObjectLayoutType.WRAP_SQUARE) return "wrapSquare";
-	if (drawing.layoutType === PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM) return "wrapTopAndBottom";
-	return "inline";
+function SetDrawingAlignTopMenuItemFactory() {
+	return {
+		id: SetDrawingAlignTopOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "AlignTopIcon",
+		title: "drawing-ui.image-panel.align.top"
+	};
 }
-function ToolbarGroup(props) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "univer-flex univer-h-7 univer-items-center univer-gap-1 univer-px-1",
-		children: props.children
-	});
+function SetDrawingAlignMiddleMenuItemFactory() {
+	return {
+		id: SetDrawingAlignMiddleOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "VerticalCenterIcon",
+		title: "drawing-ui.image-panel.align.middle"
+	};
 }
-function ToolbarButton(props) {
-	return /* @__PURE__ */ jsx(Tooltip, {
-		title: props.title,
-		placement: "bottom",
-		children: /* @__PURE__ */ jsx("button", {
-			type: "button",
-			disabled: props.disabled,
-			onClick: props.onClick,
-			className: clsx("univer-flex univer-h-6 univer-w-6 univer-items-center univer-justify-center univer-rounded-md univer-border-none univer-bg-transparent univer-p-0 univer-text-sm univer-text-gray-700 univer-transition-colors hover:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-opacity-40 dark:!univer-text-gray-100 dark:hover:!univer-bg-gray-700", { "univer-bg-gray-100 univer-text-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-primary-300": props.active }),
-			children: props.children
-		})
-	});
+function SetDrawingAlignBottomMenuItemFactory() {
+	return {
+		id: SetDrawingAlignBottomOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "AlignBottomIcon",
+		title: "drawing-ui.image-panel.align.bottom"
+	};
 }
-function ToolbarDropdownButton(props) {
-	var _props$options$find;
-	const [open, setOpen] = useState(false);
-	const activeOption = (_props$options$find = props.options.find((option) => option.value === props.value)) !== null && _props$options$find !== void 0 ? _props$options$find : props.options[0];
-	return /* @__PURE__ */ jsx(Dropdown, {
-		open,
-		onOpenChange: setOpen,
-		overlay: /* @__PURE__ */ jsx("div", {
-			className: "univer-min-w-32 univer-rounded-lg univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-p-1 univer-shadow-lg dark:!univer-border-gray-700 dark:!univer-bg-gray-900",
-			children: props.options.map((option) => /* @__PURE__ */ jsxs("button", {
-				type: "button",
-				onClick: () => {
-					props.onChange(option.value);
-					setOpen(false);
-				},
-				className: clsx("univer-flex univer-h-8 univer-w-full univer-items-center univer-gap-2 univer-rounded-md univer-border-none univer-bg-transparent univer-px-2 univer-text-left univer-text-sm univer-text-gray-700 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-gray-100 dark:hover:!univer-bg-gray-800", { "univer-bg-primary-50 univer-text-primary-600 dark:!univer-bg-gray-800 dark:!univer-text-primary-300": option.value === props.value }),
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "univer-flex univer-size-4 univer-items-center univer-justify-center",
-					children: option.icon
-				}), /* @__PURE__ */ jsx("span", {
-					className: "univer-flex-1",
-					children: option.label
-				})]
-			}, option.value))
-		}),
-		children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Tooltip, {
-			title: props.title,
-			placement: "bottom",
-			children: /* @__PURE__ */ jsxs("button", {
-				type: "button",
-				className: clsx("univer-flex univer-h-6 univer-min-w-9 univer-items-center univer-justify-center univer-gap-1 univer-rounded-md univer-border-none univer-bg-transparent univer-px-1.5 univer-text-sm univer-text-gray-700 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-gray-100 dark:hover:!univer-bg-gray-700", { "univer-bg-gray-100 univer-text-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-primary-300": open }),
-				children: [activeOption.icon, /* @__PURE__ */ jsx(MoreDownIcon, { className: "univer-text-xs" })]
-			})
-		}) })
-	});
+function SetDrawingAlignHorizonMenuItemFactory() {
+	return {
+		id: SetDrawingAlignHorizonOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "HorizontallyIcon",
+		title: "drawing-ui.image-panel.align.horizon"
+	};
 }
-function DocImageFloatingToolbar(props) {
-	var _univerInstanceServic, _wrappingStyleOptions, _wrappingStyleOptions2;
-	const commandService = useDependency(ICommandService);
-	const localeService = useDependency(LocaleService);
-	const documentDataModel = (_univerInstanceServic = useDependency(IUniverInstanceService).getUnit(props.unitId, UniverInstanceType.UNIVER_DOC)) !== null && _univerInstanceServic !== void 0 ? _univerInstanceServic : void 0;
-	const [wrappingStyle, setWrappingStyle] = useState(() => getWrappingStyle(documentDataModel, props.drawingId));
-	const [hidden, setHidden] = useState(false);
-	const getMenuItem = (label) => props.menuItems.find((item) => item.label === label);
-	const editItem = getMenuItem("drawing-ui.image-popup.edit");
-	const cropItem = getMenuItem("drawing-ui.image-popup.crop");
-	const deleteItem = getMenuItem("drawing-ui.image-popup.delete");
-	const wrappingStyleOptions = [
-		{
-			label: localeService.t("drawing-ui.image-text-wrap.inline"),
-			value: "inline",
-			icon: /* @__PURE__ */ jsx(TextWrapShapeIcon, {})
-		},
-		{
-			label: localeService.t("drawing-ui.image-text-wrap.square"),
-			value: "wrapSquare",
-			icon: /* @__PURE__ */ jsx(TextWrapShapeIcon, {})
-		},
-		{
-			label: localeService.t("drawing-ui.image-text-wrap.topAndBottom"),
-			value: "wrapTopAndBottom",
-			icon: /* @__PURE__ */ jsx(TextWrapShapeIcon, {})
-		},
-		{
-			label: localeService.t("drawing-ui.image-text-wrap.behindText"),
-			value: "behindText",
-			icon: /* @__PURE__ */ jsx(TextWrapShapeIcon, {})
-		},
-		{
-			label: localeService.t("drawing-ui.image-text-wrap.inFrontText"),
-			value: "inFrontOfText",
-			icon: /* @__PURE__ */ jsx(TextWrapShapeIcon, {})
-		}
-	];
-	const executeMenuItem = (item) => {
-		if (!item || item.disable) return;
-		commandService.executeCommand(item.commandId, item.commandParams);
+function SetDrawingAlignVerticalMenuItemFactory() {
+	return {
+		id: SetDrawingAlignVerticalOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "VerticalCenterIcon",
+		title: "drawing-ui.image-panel.align.vertical"
 	};
-	const updateWrappingStyle = (value) => {
-		setWrappingStyle(value);
-		commandService.executeCommand(UPDATE_DOC_DRAWING_WRAPPING_STYLE_COMMAND_ID, {
-			unitId: props.unitId,
-			subUnitId: props.subUnitId,
-			drawings: [{
-				unitId: props.unitId,
-				subUnitId: props.subUnitId,
-				drawingId: props.drawingId
-			}],
-			wrappingStyle: value
-		});
-	};
-	if (hidden) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		"data-u-comp": "doc-image-floating-toolbar",
-		onMouseDown: (event) => {
-			event.stopPropagation();
-			event.preventDefault();
-		},
-		className: clsx("univer-box-border univer-flex univer-items-center univer-rounded univer-bg-white univer-px-1 univer-py-1 univer-shadow-sm dark:!univer-border-gray-700 dark:!univer-bg-gray-900", borderClassName),
-		children: [
-			/* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(ToolbarDropdownButton, {
-				title: (_wrappingStyleOptions = (_wrappingStyleOptions2 = wrappingStyleOptions.find((option) => option.value === wrappingStyle)) === null || _wrappingStyleOptions2 === void 0 ? void 0 : _wrappingStyleOptions2.label) !== null && _wrappingStyleOptions !== void 0 ? _wrappingStyleOptions : localeService.t("drawing-ui.image-text-wrap.inline"),
-				value: wrappingStyle,
-				options: wrappingStyleOptions,
-				onChange: updateWrappingStyle
-			}) }),
-			/* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
-			/* @__PURE__ */ jsxs(ToolbarGroup, { children: [/* @__PURE__ */ jsx(ToolbarButton, {
-				title: editItem ? localeService.t(editItem.label) : localeService.t("drawing-ui.image-popup.edit"),
-				disabled: !editItem || editItem.disable,
-				onClick: () => {
-					setHidden(true);
-					executeMenuItem(editItem);
-				},
-				children: /* @__PURE__ */ jsx(DocSettingIcon, {})
-			}), /* @__PURE__ */ jsx(ToolbarButton, {
-				title: cropItem ? localeService.t(cropItem.label) : localeService.t("drawing-ui.image-popup.crop"),
-				disabled: !cropItem || cropItem.disable,
-				onClick: () => executeMenuItem(cropItem),
-				children: /* @__PURE__ */ jsx(CropIcon, {})
-			})] }),
-			/* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
-			/* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(ToolbarButton, {
-				title: deleteItem ? localeService.t(deleteItem.label) : localeService.t("drawing-ui.image-popup.delete"),
-				disabled: !deleteItem || deleteItem.disable,
-				onClick: () => executeMenuItem(deleteItem),
-				children: /* @__PURE__ */ jsx(DeleteIcon, {})
-			}) })
-		]
-	});
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
-function __decorateParam(paramIndex, decorator) {
-	return function(target, key) {
-		decorator(target, key, paramIndex);
+//#region src/menu/arrange.menu.ts
+const DRAWING_ARRANGE_CONTEXT_MENU_ID = "contextMenu.drawing-arrange";
+function DrawingArrangeContextMenuItemFactory() {
+	return {
+		id: DRAWING_ARRANGE_CONTEXT_MENU_ID,
+		type: MenuItemType.SUBITEMS,
+		icon: "TopmostIcon",
+		title: "drawing-ui.image-panel.arrange.title"
+	};
+}
+function SetDrawingArrangeFrontMenuItemFactory() {
+	return {
+		id: SetDrawingArrangeFrontOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "TopmostIcon",
+		title: "drawing-ui.image-panel.arrange.front"
+	};
+}
+function SetDrawingArrangeForwardMenuItemFactory() {
+	return {
+		id: SetDrawingArrangeForwardOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "MoveUpIcon",
+		title: "drawing-ui.image-panel.arrange.forward"
+	};
+}
+function SetDrawingArrangeBackMenuItemFactory() {
+	return {
+		id: SetDrawingArrangeBackOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "BottomIcon",
+		title: "drawing-ui.image-panel.arrange.back"
+	};
+}
+function SetDrawingArrangeBackwardMenuItemFactory() {
+	return {
+		id: SetDrawingArrangeBackwardOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "MoveDownIcon",
+		title: "drawing-ui.image-panel.arrange.backward"
 	};
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorate.js
-function __decorate(decorators, target, key, desc) {
-	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-	return c > 3 && r && Object.defineProperty(target, key, r), r;
+//#region src/menu/group.menu.ts
+function getMenuStateByDrawingFocusChangedObservable$(accessor, type) {
+	const drawingManagerService = accessor.get(IDrawingManagerService);
+	return new Observable((subscriber) => {
+		const update = (drawings) => {
+			if (!drawings || drawings.length === 0) return subscriber.next(true);
+			if (type === "group") {
+				if (drawings.length < 2) return subscriber.next(true);
+				if (!drawings.every((drawing) => isGroupableDrawingType(drawing.drawingType))) return subscriber.next(true);
+			} else if (type === "unGroup") {
+				if (drawings.filter((drawing) => drawing.drawingType === DrawingTypeEnum.DRAWING_GROUP).length === 0) return subscriber.next(true);
+			} else if (!drawings.every((drawing) => isGroupableDrawingType(drawing.drawingType))) return subscriber.next(true);
+			subscriber.next(false);
+		};
+		const subscription = drawingManagerService.focus$.subscribe((drawings) => {
+			if (!drawings || drawings.length === 0) return subscriber.next(true);
+			update(drawings);
+		});
+		update(drawingManagerService.getFocusDrawings());
+		return () => subscription.unsubscribe();
+	});
+}
+const DRAWING_GROUP_CONTEXT_MENU_ID = "contextMenu.drawing-group";
+function DrawingGroupContextMenuItemFactory(accessor) {
+	return {
+		id: DRAWING_GROUP_CONTEXT_MENU_ID,
+		type: MenuItemType.SUBITEMS,
+		icon: "GroupIcon",
+		title: "drawing-ui.image-panel.group.title",
+		hidden$: getMenuStateByDrawingFocusChangedObservable$(accessor)
+	};
+}
+function SetDrawingGroupMenuItemFactory(accessor) {
+	return {
+		id: SetDrawingGroupOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "GroupIcon",
+		title: "drawing-ui.image-panel.group.group",
+		disabled$: getMenuStateByDrawingFocusChangedObservable$(accessor, "group")
+	};
+}
+function CancelDrawingGroupMenuItemFactory(accessor) {
+	return {
+		id: CancelDrawingGroupOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "UngroupIcon",
+		title: "drawing-ui.image-panel.group.unGroup",
+		disabled$: getMenuStateByDrawingFocusChangedObservable$(accessor, "unGroup")
+	};
 }
 
 //#endregion
-//#region src/controllers/components.controller.ts
+//#region src/menu/schema.ts
+const menuSchema = { [ContextMenuPosition.DRAWING]: { [ContextMenuGroup.OTHERS]: {
+	[DRAWING_GROUP_CONTEXT_MENU_ID]: {
+		order: 1,
+		menuItemFactory: DrawingGroupContextMenuItemFactory,
+		[SetDrawingGroupOperation.id]: {
+			order: 0,
+			menuItemFactory: SetDrawingGroupMenuItemFactory
+		},
+		[CancelDrawingGroupOperation.id]: {
+			order: 1,
+			menuItemFactory: CancelDrawingGroupMenuItemFactory
+		}
+	},
+	[DRAWING_ARRANGE_CONTEXT_MENU_ID]: {
+		order: 2,
+		menuItemFactory: DrawingArrangeContextMenuItemFactory,
+		[SetDrawingArrangeFrontOperation.id]: {
+			order: 0,
+			menuItemFactory: SetDrawingArrangeFrontMenuItemFactory
+		},
+		[SetDrawingArrangeForwardOperation.id]: {
+			order: 1,
+			menuItemFactory: SetDrawingArrangeForwardMenuItemFactory
+		},
+		[SetDrawingArrangeBackOperation.id]: {
+			order: 2,
+			menuItemFactory: SetDrawingArrangeBackMenuItemFactory
+		},
+		[SetDrawingArrangeBackwardOperation.id]: {
+			order: 3,
+			menuItemFactory: SetDrawingArrangeBackwardMenuItemFactory
+		}
+	},
+	[DRAWING_ALIGN_CONTEXT_MENU_ID]: {
+		order: 3,
+		menuItemFactory: DrawingAlignContextMenuItemFactory,
+		[SetDrawingAlignLeftOperation.id]: {
+			order: 0,
+			menuItemFactory: SetDrawingAlignLeftMenuItemFactory
+		},
+		[SetDrawingAlignCenterOperation.id]: {
+			order: 1,
+			menuItemFactory: SetDrawingAlignCenterMenuItemFactory
+		},
+		[SetDrawingAlignRightOperation.id]: {
+			order: 2,
+			menuItemFactory: SetDrawingAlignRightMenuItemFactory
+		},
+		[SetDrawingAlignTopOperation.id]: {
+			order: 3,
+			menuItemFactory: SetDrawingAlignTopMenuItemFactory
+		},
+		[SetDrawingAlignMiddleOperation.id]: {
+			order: 4,
+			menuItemFactory: SetDrawingAlignMiddleMenuItemFactory
+		},
+		[SetDrawingAlignBottomOperation.id]: {
+			order: 5,
+			menuItemFactory: SetDrawingAlignBottomMenuItemFactory
+		},
+		[SetDrawingAlignHorizonOperation.id]: {
+			order: 6,
+			menuItemFactory: SetDrawingAlignHorizonMenuItemFactory
+		},
+		[SetDrawingAlignVerticalOperation.id]: {
+			order: 7,
+			menuItemFactory: SetDrawingAlignVerticalMenuItemFactory
+		}
+	}
+} } };
+
+//#endregion
+//#region package.json
+var name = "@univerjs/drawing-ui";
+var version = "1.0.0-alpha.4";
+
+//#endregion
+//#region src/config/config.ts
+const DRAWING_UI_PLUGIN_CONFIG_KEY = "drawing-ui.config";
+const configSymbol = Symbol(DRAWING_UI_PLUGIN_CONFIG_KEY);
+const defaultPluginConfig = {};
+
+//#endregion
+//#region src/views/image-popup-menu/component-name.ts
 /**
 * Copyright 2023-present DreamNum Co., Ltd.
 *
@@ -638,97 +649,382 @@ function __decorate(decorators, target, key, desc) {
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-let ComponentsController = class ComponentsController extends Disposable {
-	constructor(_componentManager, _iconManager) {
-		super();
-		this._componentManager = _componentManager;
-		this._iconManager = _iconManager;
-		this._registerComponents();
-		this._registerIcons();
-	}
-	_registerComponents() {
-		[[COMPONENT_IMAGE_POPUP_MENU, ImagePopupMenu]].forEach(([key, component]) => {
-			this.disposeWithMe(this._componentManager.register(key, component));
-		});
-	}
-	_registerIcons() {
-		this.disposeWithMe(this._iconManager.register({
-			BottomIcon,
-			GroupIcon,
-			MoveDownIcon,
-			MoveUpIcon,
-			TopmostIcon,
-			UngroupIcon
-		}));
-	}
-};
-ComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager)), __decorateParam(1, Inject(IconManager))], ComponentsController);
-
-//#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
-function _typeof(o) {
-	"@babel/helpers - typeof";
-	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
-		return typeof o;
-	} : function(o) {
-		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-	}, _typeof(o);
-}
-
-//#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
-function toPrimitive(t, r) {
-	if ("object" != _typeof(t) || !t) return t;
-	var e = t[Symbol.toPrimitive];
-	if (void 0 !== e) {
-		var i = e.call(t, r || "default");
-		if ("object" != _typeof(i)) return i;
-		throw new TypeError("@@toPrimitive must return a primitive value.");
-	}
-	return ("string" === r ? String : Number)(t);
-}
+const COMPONENT_IMAGE_POPUP_MENU = "COMPONENT_IMAGE_POPUP_MENU";
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPropertyKey.js
-function toPropertyKey(t) {
-	var i = toPrimitive(t, "string");
-	return "symbol" == _typeof(i) ? i : i + "";
+//#region src/views/image-popup-menu/ImagePopupMenu.tsx
+function ImagePopupMenu(props) {
+	var _popup$extraProps, _popup$extraProps2, _popup$extraProps3;
+	const { popup } = props;
+	const menuItems = popup === null || popup === void 0 || (_popup$extraProps = popup.extraProps) === null || _popup$extraProps === void 0 ? void 0 : _popup$extraProps.menuItems;
+	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
+	const [visible, setVisible] = useState(false);
+	const [isHovered, setIsHovered] = useState(false);
+	if (!menuItems) return null;
+	if (((_popup$extraProps2 = popup.extraProps) === null || _popup$extraProps2 === void 0 ? void 0 : _popup$extraProps2.variant) === "doc-floating-toolbar" && popup.extraProps.unitId && popup.extraProps.subUnitId && popup.extraProps.drawingId) return /* @__PURE__ */ jsx(DocImageFloatingToolbar, {
+		menuItems,
+		unitId: popup.extraProps.unitId,
+		subUnitId: popup.extraProps.subUnitId,
+		drawingId: popup.extraProps.drawingId
+	});
+	if (((_popup$extraProps3 = popup.extraProps) === null || _popup$extraProps3 === void 0 ? void 0 : _popup$extraProps3.variant) === "doc-chart-floating-toolbar") return /* @__PURE__ */ jsx(DocChartFloatingToolbar, { menuItems });
+	const handleMouseEnter = () => {
+		setIsHovered(true);
+	};
+	const handleMouseLeave = () => {
+		setIsHovered(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 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: useDependency(LocaleService).t(props.titleKey),
+		placement: "bottom",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			disabled: props.disabled,
+			onClick: props.onClick,
+			className: clsx("univer-flex univer-h-6 univer-w-6 univer-items-center univer-justify-center univer-rounded-md univer-border-none univer-bg-transparent univer-p-0 univer-text-sm univer-text-gray-700 univer-transition-colors hover:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-opacity-40 dark:!univer-text-gray-100 dark:hover:!univer-bg-gray-700", { "univer-bg-gray-100 univer-text-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-primary-300": props.active }),
+			children: props.children
+		})
+	});
+}
+function 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 iconManager = useDependency(IconManager);
+	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 actionItems = props.menuItems.filter((item) => item.type !== "select" && item.icon).sort((a, b) => a.index - b.index);
+	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;
+		if (item.hideOnClick) setHidden(true);
+		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
+		}) }), actionItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, { orientation: "vertical" }), /* @__PURE__ */ jsx(ToolbarGroup, { children: actionItems.map((item) => {
+			const Icon = iconManager.get(item.icon);
+			return /* @__PURE__ */ jsx(ToolbarButton, {
+				titleKey: item.label,
+				disabled: item.disable,
+				onClick: () => executeMenuItem(item),
+				children: /* @__PURE__ */ jsx(Icon, {})
+			}, `${item.commandId}-${item.index}`);
+		}) })] })]
+	});
+}
+function DocChartFloatingToolbar(props) {
+	var _chartTypeItem$option, _ref, _chartTypeItem$value, _chartTypeOptions$;
+	const commandService = useDependency(ICommandService);
+	const iconManager = useDependency(IconManager);
+	const localeService = useDependency(LocaleService);
+	const [hidden, setHidden] = useState(false);
+	const chartTypeItem = props.menuItems.find((item) => item.type === "select");
+	const actionItems = props.menuItems.filter((item) => item.type !== "select" && item.icon).sort((a, b) => a.index - b.index);
+	const chartTypeOptions = ((_chartTypeItem$option = chartTypeItem === null || chartTypeItem === void 0 ? void 0 : chartTypeItem.options) !== null && _chartTypeItem$option !== void 0 ? _chartTypeItem$option : []).map((option) => ({
+		label: String(option.label),
+		value: option.value,
+		icon: /* @__PURE__ */ jsx(ChartIcon, {})
+	}));
+	const executeMenuItem = (item) => {
+		if (!item || item.disable) return;
+		if (item.hideOnClick) setHidden(true);
+		commandService.executeCommand(item.commandId, item.commandParams);
+	};
+	if (hidden) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-u-comp": "doc-chart-floating-toolbar",
+		onMouseDown: (event) => {
+			event.stopPropagation();
+			event.preventDefault();
+		},
+		className: clsx("univer-box-border univer-flex univer-items-center univer-rounded univer-bg-white univer-px-1 univer-py-1 univer-shadow-sm dark:!univer-border-gray-700 dark:!univer-bg-gray-900", borderClassName),
+		children: [chartTypeItem && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(ToolbarDropdownButton, {
+			title: localeService.t(chartTypeItem.label),
+			value: (_ref = (_chartTypeItem$value = chartTypeItem.value) !== null && _chartTypeItem$value !== void 0 ? _chartTypeItem$value : (_chartTypeOptions$ = chartTypeOptions[0]) === null || _chartTypeOptions$ === void 0 ? void 0 : _chartTypeOptions$.value) !== null && _ref !== void 0 ? _ref : "",
+			options: chartTypeOptions,
+			onChange: (value) => {
+				if (!chartTypeItem.disable) {
+					var _chartTypeItem$comman;
+					commandService.executeCommand(chartTypeItem.commandId, (_chartTypeItem$comman = chartTypeItem.commandParamsFactory) === null || _chartTypeItem$comman === void 0 ? void 0 : _chartTypeItem$comman.call(chartTypeItem, value));
+				}
+			}
+		}) }), actionItems.length > 0 && /* @__PURE__ */ jsx(Separator, { orientation: "vertical" })] }), actionItems.length > 0 && /* @__PURE__ */ jsx(ToolbarGroup, { children: actionItems.map((item) => {
+			const Icon = iconManager.get(item.icon);
+			return /* @__PURE__ */ jsx(ToolbarButton, {
+				titleKey: item.label,
+				disabled: item.disable,
+				onClick: () => executeMenuItem(item),
+				children: /* @__PURE__ */ jsx(Icon, {})
+			}, `${item.commandId}-${item.index}`);
+		}) })]
+	});
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/defineProperty.js
-function _defineProperty(e, r, t) {
-	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-		value: t,
-		enumerable: !0,
-		configurable: !0,
-		writable: !0
-	}) : e[r] = t, e;
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
+function __decorateParam(paramIndex, decorator) {
+	return function(target, key) {
+		decorator(target, key, paramIndex);
+	};
 }
 
 //#endregion
-//#region src/services/drawing-image-clip.service.ts
-const IMAGE_CLIP_SHAPE_PICKER_COMPONENT = "sheet.image-clip.shape.picker.component";
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+//#endregion
+//#region src/controllers/components.controller.ts
 /**
-* 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).
+* Copyright 2023-present DreamNum Co., Ltd.
 *
-* When no delegate is registered, applyShapeClip returns false and images render normally without shape clipping.
+* 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.
 */
-var DrawingImageClipService = class extends Disposable {
-	constructor() {
+let ComponentsController = class ComponentsController extends Disposable {
+	constructor(_componentManager, _iconManager) {
 		super();
-		_defineProperty(this, "_clipDelegate", null);
-		_defineProperty(this, "_canUseShapeClip$", new BehaviorSubject(false));
-		_defineProperty(this, "canUseShapeClip$", this._canUseShapeClip$.asObservable());
+		this._componentManager = _componentManager;
+		this._iconManager = _iconManager;
+		this._registerComponents();
+		this._registerIcons();
 	}
-	setCanUseShapeClip(canUse) {
-		this._canUseShapeClip$.next(canUse);
+	_registerComponents() {
+		[[COMPONENT_IMAGE_POPUP_MENU, ImagePopupMenu]].forEach(([key, component]) => {
+			this.disposeWithMe(this._componentManager.register(key, component));
+		});
 	}
-	/**
-	* Register a clip delegate that knows how to build shape clip paths.
-	* Typically called by the pro-side plugin with a ShapeModel-based implementation.
+	_registerIcons() {
+		this.disposeWithMe(this._iconManager.register({
+			BottomIcon,
+			DrawingCropIcon: CropIcon,
+			DrawingDeleteIcon: DeleteIcon,
+			DrawingEditIcon: DocSettingIcon,
+			GroupIcon,
+			MoveDownIcon,
+			MoveUpIcon,
+			TopmostIcon,
+			UngroupIcon
+		}));
+	}
+};
+ComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager)), __decorateParam(1, Inject(IconManager))], ComponentsController);
+
+//#endregion
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+
+//#endregion
+//#region src/services/drawing-image-clip.service.ts
+const IMAGE_CLIP_SHAPE_PICKER_COMPONENT = "sheet.image-clip.shape.picker.component";
+/**
+* Bridge service that enables shape-based image clipping.
+* This service lives in the open-source drawing-ui package and delegates
+* to a registered clip implementation (provided by pro engine-shape package).
+*
+* When no delegate is registered, applyShapeClip returns false and images render normally without shape clipping.
+*/
+var DrawingImageClipService = class extends Disposable {
+	constructor() {
+		super();
+		_defineProperty(this, "_clipDelegate", null);
+		_defineProperty(this, "_canUseShapeClip$", new BehaviorSubject(false));
+		_defineProperty(this, "canUseShapeClip$", this._canUseShapeClip$.asObservable());
+	}
+	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) {
@@ -752,7 +1048,7 @@ var DrawingImageClipService = class extends Disposable {
 //#region src/services/drawing-render.service.ts
 const DOC_DRAWING_BEHIND_TEXT_LAYER_INDEX = 1;
 function getDrawingRenderLayerIndex(param) {
-	return param.behindText === true || param.behindText === BooleanNumber.TRUE ? 1 : DRAWING_OBJECT_LAYER_INDEX;
+	return param.behindText === true || param.behindText === BooleanNumber.TRUE || param.layoutType === PositionedObjectLayoutType.WRAP_NONE && param.behindDoc === BooleanNumber.TRUE ? 1 : DRAWING_OBJECT_LAYER_INDEX;
 }
 function ensureDrawingRenderLayer(scene, object, param) {
 	const layerIndex = getDrawingRenderLayerIndex(param);
@@ -772,12 +1068,12 @@ let DrawingRenderService = class DrawingRenderService {
 		this._univerInstanceService = _univerInstanceService;
 		this._drawingImageClipService = _drawingImageClipService;
 	}
-	async renderImages(imageParam, scene) {
+	async renderImages(imageParam, scene, options) {
 		const { transform: singleTransform, drawingType, source, imageSourceType, srcRect, prstGeom, groupId, unitId, subUnitId, drawingId, isMultiTransform, transforms: multiTransforms, adjustValues, hidden } = imageParam;
 		const { docxHeaderFooterDrawing, layoutType } = imageParam;
 		if (drawingType !== DrawingTypeEnum.DRAWING_IMAGE) return;
 		if (!this._drawingManagerService.getDrawingVisible()) return;
-		if (this._univerInstanceService.getUnitType(unitId) === UniverInstanceType.UNIVER_SHEET && subUnitId !== this._getActiveSheetId()) return;
+		if (!(options === null || options === void 0 ? void 0 : options.allowInactiveSheet) && this._univerInstanceService.getUnitType(unitId) === UniverInstanceType.UNIVER_SHEET && subUnitId !== this._getActiveSheetId()) return;
 		if (singleTransform == null) return;
 		const transforms = isMultiTransform && multiTransforms ? multiTransforms : [singleTransform];
 		const images = [];
@@ -817,13 +1113,13 @@ let DrawingRenderService = class DrawingRenderService {
 			const imageNativeCache = this._imageIoService.getImageSourceCache(source, imageSourceType);
 			let shouldBeCache = false;
 			if (isRenderableImageCache(imageNativeCache)) imageConfig.image = imageNativeCache;
-			else if (imageSourceType === ImageSourceType$1.UUID) try {
+			else if (imageSourceType === ImageSourceType.UUID) try {
 				imageConfig.url = await this._imageIoService.getImage(source);
 			} catch (error) {
 				console.error(error);
 				continue;
 			}
-			else if (imageSourceType === ImageSourceType$1.URL) {
+			else if (imageSourceType === ImageSourceType.URL) {
 				try {
 					imageConfig.url = await this._urlImageService.getImage(source);
 				} catch (error) {
@@ -911,11 +1207,11 @@ let DrawingRenderService = class DrawingRenderService {
 		}
 		return rects;
 	}
-	renderDrawing(param, scene) {
+	renderDrawing(param, scene, options) {
 		const drawingParam = this._drawingManagerService.getDrawingByParam(param);
 		if (drawingParam == null) return;
 		switch (drawingParam.drawingType) {
-			case DrawingTypeEnum.DRAWING_IMAGE: return this.renderImages(drawingParam, scene);
+			case DrawingTypeEnum.DRAWING_IMAGE: return this.renderImages(drawingParam, scene, options);
 			default:
 		}
 	}
@@ -984,12 +1280,24 @@ function getUpdateParams(objects, drawingManagerService) {
 //#endregion
 //#region src/controllers/drawing-update.controller.ts
 function hasRefreshMetadata(refreshParam) {
-	return "hidden" in refreshParam || "behindText" in refreshParam;
+	return "hidden" in refreshParam || "behindText" in refreshParam || "selectable" in refreshParam;
 }
 function syncDrawingHiddenState(shape, drawingParam) {
 	if (!("hidden" in drawingParam)) return;
 	drawingParam.hidden === true ? shape.hide() : shape.show();
 }
+function syncDrawingSelectableState(shape, drawingParam, scene, drawingManagerService) {
+	var _scene$getTransformer;
+	const previousDrawing = drawingManagerService.getOldDrawingByParam(drawingParam);
+	if (!("selectable" in drawingParam) && (!previousDrawing || !("selectable" in previousDrawing))) return;
+	const selectable = drawingParam.selectable !== false;
+	shape.evented = selectable;
+	if (selectable) return;
+	(_scene$getTransformer = scene.getTransformer()) === null || _scene$getTransformer === void 0 || _scene$getTransformer.clearControlByIds([shape.oKey]);
+	const focusedDrawings = drawingManagerService.getFocusDrawings();
+	const remainingDrawings = focusedDrawings.filter(({ unitId, subUnitId, drawingId }) => unitId !== drawingParam.unitId || subUnitId !== drawingParam.subUnitId || drawingId !== drawingParam.drawingId);
+	if (remainingDrawings.length !== focusedDrawings.length) drawingManagerService.focusDrawing(remainingDrawings);
+}
 function mergeRefreshMetadata(drawingParam, refreshParam) {
 	if (!hasRefreshMetadata(refreshParam)) return drawingParam;
 	return {
@@ -1319,8 +1627,8 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 					subUnitId,
 					drawingId
 				})) {
-					var _scene$getTransformer;
-					(_scene$getTransformer = scene.getTransformer()) === null || _scene$getTransformer === void 0 || _scene$getTransformer.clearSelectedObjects();
+					var _scene$getTransformer2;
+					(_scene$getTransformer2 = scene.getTransformer()) === null || _scene$getTransformer2 === void 0 || _scene$getTransformer2.clearSelectedObjects();
 				}
 			});
 		}));
@@ -1328,7 +1636,7 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 	_drawingUpdateListener() {
 		this.disposeWithMe(this._drawingManagerService.update$.subscribe((params) => {
 			params.forEach((param) => {
-				var _setClipBounds, _scene$getTransformer2;
+				var _setClipBounds, _scene$getTransformer3;
 				const { unitId, subUnitId, drawingId } = param;
 				const drawingParam = this._drawingManagerService.getDrawingByParam(param);
 				if (drawingParam == null) return;
@@ -1343,7 +1651,7 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 					subUnitId,
 					drawingId
 				});
-				const drawingShape = scene.getObject(drawingShapeKey);
+				const drawingShape = scene.getObjectIncludeInGroup(drawingShapeKey);
 				if (drawingShape == null) return true;
 				drawingShape.transformByState({
 					left,
@@ -1358,8 +1666,9 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 				});
 				(_setClipBounds = drawingShape.setClipBounds) === null || _setClipBounds === void 0 || _setClipBounds.call(drawingShape, transform.clipBounds);
 				syncDrawingHiddenState(drawingShape, drawingParam);
+				syncDrawingSelectableState(drawingShape, drawingParam, scene, this._drawingManagerService);
 				ensureDrawingRenderLayer(scene, drawingShape, drawingParam);
-				(_scene$getTransformer2 = scene.getTransformer()) === null || _scene$getTransformer2 === void 0 || _scene$getTransformer2.debounceRefreshControls();
+				(_scene$getTransformer3 = scene.getTransformer()) === null || _scene$getTransformer3 === void 0 || _scene$getTransformer3.debounceRefreshControls();
 			});
 		}));
 	}
@@ -1405,6 +1714,7 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 				});
 				(_setClipBounds2 = drawingShape.setClipBounds) === null || _setClipBounds2 === void 0 || _setClipBounds2.call(drawingShape, transform.clipBounds);
 				syncDrawingHiddenState(drawingShape, drawingParamWithRefreshMetadata);
+				syncDrawingSelectableState(drawingShape, drawingParamWithRefreshMetadata, scene, this._drawingManagerService);
 				ensureDrawingRenderLayer(scene, drawingShape, drawingParamWithRefreshMetadata);
 			});
 		}));
@@ -1421,7 +1731,7 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 					subUnitId,
 					drawingId
 				});
-				const drawingShape = scene.getObject(drawingShapeKey);
+				const drawingShape = scene.getObjectIncludeInGroup(drawingShapeKey);
 				if (drawingShape == null) return true;
 				if (visible) drawingShape.show();
 				else drawingShape.hide();
@@ -1980,402 +2290,141 @@ let ImageUpdateController = class ImageUpdateController extends Disposable {
 		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
 			if (command.id === ImageResetSizeOperation.id) {
 				const params = command.params;
-				if (params == null) return;
-				this._resetImageSize(params);
-			}
-		}));
-	}
-	_getSceneAndTransformerByDrawingSearch(unitId) {
-		if (unitId == null) return;
-		const renderObject = this._renderManagerService.getRenderById(unitId);
-		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-		if (scene == null) return null;
-		return {
-			scene,
-			transformer: scene.getTransformerByCreate()
-		};
-	}
-	_resetImageSize(params) {
-		const updateParams = [];
-		const sceneList = [];
-		params.forEach((param) => {
-			const { unitId, subUnitId, drawingId } = param;
-			const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
-			if (renderObject == null) return;
-			const { scene } = renderObject;
-			const imageShapeKey = getDrawingShapeKeyByDrawingSearch({
-				unitId,
-				subUnitId,
-				drawingId
-			});
-			const imageShape = scene.getObject(imageShapeKey);
-			if (imageShape == null) return true;
-			const imageData = this._drawingManagerService.getDrawingByParam(param);
-			if (imageData == null) return true;
-			if (imageData.drawingType !== DrawingTypeEnum.DRAWING_IMAGE) return;
-			imageShape.resetSize();
-			const { width, height } = imageShape.getNativeSize();
-			if (sceneList.includes(scene) === false) sceneList.push(scene);
-			updateParams.push({
-				...imageData,
-				transform: {
-					...imageData.transform,
-					height,
-					width,
-					angle: 0
-				},
-				srcRect: null,
-				prstGeom: null
-			});
-		});
-		this._drawingManagerService.featurePluginUpdateNotification(updateParams);
-		sceneList.forEach((scene) => {
-			scene.getTransformerByCreate().refreshControls().changeNotification();
-		});
-		this._commandService.syncExecuteCommand(SetDrawingSelectedOperation.id, params);
-	}
-	_drawingAddListener() {
-		this.disposeWithMe(this._drawingManagerService.add$.pipe(bufferTime(33), filter((batches) => batches.length > 0), map((batches) => batches.flat()), map((items) => {
-			const map = /* @__PURE__ */ new Map();
-			for (const it of items) map.set(`${it.unitId}|${it.subUnitId}|${it.drawingId}`, it);
-			return [...map.values()];
-		}), filter((items) => items.length > 0)).subscribe((uniqueParams) => {
-			this._insertImages(uniqueParams);
-		}));
-	}
-	_insertImages(params) {
-		params.forEach(async (param) => {
-			var _getCurrentUnitInfo;
-			const { unitId, subUnitId } = param;
-			const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
-			const currentSubUnitId = (_getCurrentUnitInfo = getCurrentUnitInfo(this._currentUniverService, unitId)) === null || _getCurrentUnitInfo === void 0 ? void 0 : _getCurrentUnitInfo.subUnitId;
-			if (renderObject == null || currentSubUnitId !== subUnitId) return;
-			const imageParam = this._drawingManagerService.getDrawingByParam(param);
-			if (imageParam == null) return;
-			const images = await this._drawingRenderService.renderImages(imageParam, renderObject.scene);
-			this._drawingManagerService.refreshTransform([imageParam]);
-			if (images == null || images.length === 0) return;
-			for (const image of images) {
-				this._addHoverForImage(image);
-				this._addDialogForImage(image);
-			}
-		});
-	}
-	_imageUpdateListener() {
-		this.disposeWithMe(this._drawingManagerService.update$.subscribe((params) => {
-			params.forEach((param) => {
-				var _setClipBounds;
-				const { unitId, subUnitId, drawingId } = param;
-				const drawingParam = this._drawingManagerService.getDrawingByParam(param);
-				if (drawingParam == null) return;
-				const { transform, drawingType, srcRect, prstGeom, source, imageSourceType } = drawingParam;
-				if (drawingType !== DrawingTypeEnum.DRAWING_IMAGE) return;
-				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
-				if (renderObject == null) return;
-				const { scene, transformer } = renderObject;
-				if (transform == null) return true;
-				const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({
-					unitId,
-					subUnitId,
-					drawingId
-				});
-				const imageShape = scene.getObject(drawingShapeKey);
-				if (imageShape == null) return true;
-				imageShape.transformByState(transform);
-				(_setClipBounds = imageShape.setClipBounds) === null || _setClipBounds === void 0 || _setClipBounds.call(imageShape, transform.clipBounds);
-				ensureDrawingRenderLayer(scene, imageShape, drawingParam);
-				imageShape.setSrcRect(srcRect);
-				imageShape.setPrstGeom(prstGeom);
-				if (source != null && source.length > 0 && (imageSourceType === ImageSourceType.BASE64 || imageSourceType === ImageSourceType.URL)) imageShape.changeSource(source);
-			});
-		}));
-	}
-	_addHoverForImage(o) {
-		this.disposeWithMe(toDisposable(o.onPointerEnter$.subscribeEvent(() => {
-			o.cursor = CURSOR_TYPE.GRAB;
-		})));
-		this.disposeWithMe(toDisposable(o.onPointerLeave$.subscribeEvent(() => {
-			o.cursor = CURSOR_TYPE.DEFAULT;
-		})));
-	}
-	_addDialogForImage(o) {
-		this.disposeWithMe(toDisposable(o.onDblclick$.subscribeEvent(() => {
-			const dialogId = `${o.oKey}-viewer-dialog`;
-			this._drawingRenderService.previewImage(dialogId, o.getNative().src, o.getNativeSize().width, o.getNativeSize().height);
-		})));
-	}
-};
-ImageUpdateController = __decorate([
-	__decorateParam(0, ICommandService),
-	__decorateParam(1, IRenderManagerService),
-	__decorateParam(2, IDrawingManagerService),
-	__decorateParam(3, IDialogService),
-	__decorateParam(4, IImageIoService),
-	__decorateParam(5, IUniverInstanceService),
-	__decorateParam(6, Inject(DrawingRenderService))
-], ImageUpdateController);
-
-//#endregion
-//#region src/menu/align.menu.ts
-const getMenuStateByDrawingFocusChangedObservable$$1 = (accessor) => {
-	const drawingManagerService = accessor.get(IDrawingManagerService);
-	return new Observable((subscriber) => {
-		const update = (drawings) => {
-			if (!drawings || drawings.length === 0) return subscriber.next(true);
-			if (drawings.length < 2) return subscriber.next(true);
-			subscriber.next(false);
-		};
-		const subscription = drawingManagerService.focus$.subscribe((drawings) => {
-			if (!drawings || drawings.length === 0) return subscriber.next(true);
-			update(drawings);
-		});
-		update(drawingManagerService.getFocusDrawings());
-		return () => subscription.unsubscribe();
-	});
-};
-const DRAWING_ALIGN_CONTEXT_MENU_ID = "contextMenu.drawing-align";
-function DrawingAlignContextMenuItemFactory(accessor) {
-	return {
-		id: DRAWING_ALIGN_CONTEXT_MENU_ID,
-		type: MenuItemType.SUBITEMS,
-		icon: "HorizontallyIcon",
-		title: "drawing-ui.image-panel.align.title",
-		hidden$: getMenuStateByDrawingFocusChangedObservable$$1(accessor)
-	};
-}
-function SetDrawingAlignLeftMenuItemFactory() {
-	return {
-		id: SetDrawingAlignLeftOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "LeftJustifyingIcon",
-		title: "drawing-ui.image-panel.align.left"
-	};
-}
-function SetDrawingAlignCenterMenuItemFactory() {
-	return {
-		id: SetDrawingAlignCenterOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "HorizontallyIcon",
-		title: "drawing-ui.image-panel.align.center"
-	};
-}
-function SetDrawingAlignRightMenuItemFactory() {
-	return {
-		id: SetDrawingAlignRightOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "RightJustifyingIcon",
-		title: "drawing-ui.image-panel.align.right"
-	};
-}
-function SetDrawingAlignTopMenuItemFactory() {
-	return {
-		id: SetDrawingAlignTopOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "AlignTopIcon",
-		title: "drawing-ui.image-panel.align.top"
-	};
-}
-function SetDrawingAlignMiddleMenuItemFactory() {
-	return {
-		id: SetDrawingAlignMiddleOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "VerticalCenterIcon",
-		title: "drawing-ui.image-panel.align.middle"
-	};
-}
-function SetDrawingAlignBottomMenuItemFactory() {
-	return {
-		id: SetDrawingAlignBottomOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "AlignBottomIcon",
-		title: "drawing-ui.image-panel.align.bottom"
-	};
-}
-function SetDrawingAlignHorizonMenuItemFactory() {
-	return {
-		id: SetDrawingAlignHorizonOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "HorizontallyIcon",
-		title: "drawing-ui.image-panel.align.horizon"
-	};
-}
-function SetDrawingAlignVerticalMenuItemFactory() {
-	return {
-		id: SetDrawingAlignVerticalOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "VerticalCenterIcon",
-		title: "drawing-ui.image-panel.align.vertical"
-	};
-}
-
-//#endregion
-//#region src/menu/arrange.menu.ts
-const DRAWING_ARRANGE_CONTEXT_MENU_ID = "contextMenu.drawing-arrange";
-function DrawingArrangeContextMenuItemFactory() {
-	return {
-		id: DRAWING_ARRANGE_CONTEXT_MENU_ID,
-		type: MenuItemType.SUBITEMS,
-		icon: "TopmostIcon",
-		title: "drawing-ui.image-panel.arrange.title"
-	};
-}
-function SetDrawingArrangeFrontMenuItemFactory() {
-	return {
-		id: SetDrawingArrangeFrontOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "TopmostIcon",
-		title: "drawing-ui.image-panel.arrange.front"
-	};
-}
-function SetDrawingArrangeForwardMenuItemFactory() {
-	return {
-		id: SetDrawingArrangeForwardOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "MoveUpIcon",
-		title: "drawing-ui.image-panel.arrange.forward"
-	};
-}
-function SetDrawingArrangeBackMenuItemFactory() {
-	return {
-		id: SetDrawingArrangeBackOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "BottomIcon",
-		title: "drawing-ui.image-panel.arrange.back"
-	};
-}
-function SetDrawingArrangeBackwardMenuItemFactory() {
-	return {
-		id: SetDrawingArrangeBackwardOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "MoveDownIcon",
-		title: "drawing-ui.image-panel.arrange.backward"
-	};
-}
-
-//#endregion
-//#region src/menu/group.menu.ts
-function getMenuStateByDrawingFocusChangedObservable$(accessor, type) {
-	const drawingManagerService = accessor.get(IDrawingManagerService);
-	return new Observable((subscriber) => {
-		const update = (drawings) => {
-			if (!drawings || drawings.length === 0) return subscriber.next(true);
-			if (type === "group") {
-				if (drawings.length < 2) return subscriber.next(true);
-				if (!drawings.every((drawing) => isGroupableDrawingType(drawing.drawingType))) return subscriber.next(true);
-			} else if (type === "unGroup") {
-				if (drawings.filter((drawing) => drawing.drawingType === DrawingTypeEnum.DRAWING_GROUP).length === 0) return subscriber.next(true);
-			} else if (!drawings.every((drawing) => isGroupableDrawingType(drawing.drawingType))) return subscriber.next(true);
-			subscriber.next(false);
-		};
-		const subscription = drawingManagerService.focus$.subscribe((drawings) => {
-			if (!drawings || drawings.length === 0) return subscriber.next(true);
-			update(drawings);
-		});
-		update(drawingManagerService.getFocusDrawings());
-		return () => subscription.unsubscribe();
-	});
-}
-const DRAWING_GROUP_CONTEXT_MENU_ID = "contextMenu.drawing-group";
-function DrawingGroupContextMenuItemFactory(accessor) {
-	return {
-		id: DRAWING_GROUP_CONTEXT_MENU_ID,
-		type: MenuItemType.SUBITEMS,
-		icon: "GroupIcon",
-		title: "drawing-ui.image-panel.group.title",
-		hidden$: getMenuStateByDrawingFocusChangedObservable$(accessor)
-	};
-}
-function SetDrawingGroupMenuItemFactory(accessor) {
-	return {
-		id: SetDrawingGroupOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "GroupIcon",
-		title: "drawing-ui.image-panel.group.group",
-		disabled$: getMenuStateByDrawingFocusChangedObservable$(accessor, "group")
-	};
-}
-function CancelDrawingGroupMenuItemFactory(accessor) {
-	return {
-		id: CancelDrawingGroupOperation.id,
-		type: MenuItemType.BUTTON,
-		icon: "UngroupIcon",
-		title: "drawing-ui.image-panel.group.unGroup",
-		disabled$: getMenuStateByDrawingFocusChangedObservable$(accessor, "unGroup")
-	};
-}
-
-//#endregion
-//#region src/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
-		}
+				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);
+			const currentImageParam = this._drawingManagerService.getDrawingByParam(param);
+			if (currentImageParam) this._drawingManagerService.refreshTransform([currentImageParam]);
+			if (images == null || images.length === 0) return;
+			for (const image of images) {
+				this._addHoverForImage(image);
+				this._addDialogForImage(image);
+			}
+		});
+	}
+	_imageUpdateListener() {
+		this.disposeWithMe(this._drawingManagerService.update$.subscribe((params) => {
+			params.forEach((param) => {
+				var _setClipBounds;
+				const { unitId, subUnitId, drawingId } = param;
+				const drawingParam = this._drawingManagerService.getDrawingByParam(param);
+				if (drawingParam == null) return;
+				const { transform, drawingType, srcRect, prstGeom, source, imageSourceType } = drawingParam;
+				if (drawingType !== DrawingTypeEnum.DRAWING_IMAGE) return;
+				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+				if (renderObject == null) return;
+				const { scene, transformer } = renderObject;
+				if (transform == null) return true;
+				const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({
+					unitId,
+					subUnitId,
+					drawingId
+				});
+				const imageShape = scene.getObject(drawingShapeKey);
+				if (imageShape == null) return true;
+				imageShape.transformByState(transform);
+				(_setClipBounds = imageShape.setClipBounds) === null || _setClipBounds === void 0 || _setClipBounds.call(imageShape, transform.clipBounds);
+				ensureDrawingRenderLayer(scene, imageShape, drawingParam);
+				imageShape.setSrcRect(srcRect);
+				imageShape.setPrstGeom(prstGeom);
+				if (source != null && source.length > 0 && (imageSourceType === ImageSourceType.BASE64 || imageSourceType === ImageSourceType.URL)) imageShape.changeSource(source);
+			});
+		}));
+	}
+	_addHoverForImage(o) {
+		this.disposeWithMe(toDisposable(o.onPointerEnter$.subscribeEvent(() => {
+			o.cursor = CURSOR_TYPE.GRAB;
+		})));
+		this.disposeWithMe(toDisposable(o.onPointerLeave$.subscribeEvent(() => {
+			o.cursor = CURSOR_TYPE.DEFAULT;
+		})));
+	}
+	_addDialogForImage(o) {
+		this.disposeWithMe(toDisposable(o.onDblclick$.subscribeEvent(() => {
+			const dialogId = `${o.oKey}-viewer-dialog`;
+			this._drawingRenderService.previewImage(dialogId, o.getNative().src, o.getNativeSize().width, o.getNativeSize().height);
+		})));
+	}
+};
+ImageUpdateController = __decorate([
+	__decorateParam(0, ICommandService),
+	__decorateParam(1, IRenderManagerService),
+	__decorateParam(2, IDrawingManagerService),
+	__decorateParam(3, IDialogService),
+	__decorateParam(4, IImageIoService),
+	__decorateParam(5, IUniverInstanceService),
+	__decorateParam(6, Inject(DrawingRenderService))
+], ImageUpdateController);
 
 //#endregion
 //#region src/controllers/ui.controller.ts
@@ -2474,6 +2523,482 @@ _defineProperty(UniverDrawingUIPlugin, "packageName", name);
 _defineProperty(UniverDrawingUIPlugin, "version", version);
 UniverDrawingUIPlugin = __decorate([__decorateParam(1, Inject(Injector)), __decorateParam(2, IConfigService)], UniverDrawingUIPlugin);
 
+//#endregion
+//#region src/views/object-list-panel/object-list-panel-layer.ts
+const OBJECT_LIST_FLOATING_SECTION_ID = "floating";
+const OBJECT_LIST_CANVAS_SECTION_ID = "canvas";
+function isFloatingObjectListDrawingType(drawingType) {
+	return drawingType === DrawingTypeEnum.DRAWING_CHART || drawingType === DrawingTypeEnum.DRAWING_DOM || drawingType === DrawingTypeEnum.DRAWING_UNIT;
+}
+function getObjectListPanelSectionIdForDrawingType(drawingType) {
+	return isFloatingObjectListDrawingType(drawingType) ? OBJECT_LIST_FLOATING_SECTION_ID : OBJECT_LIST_CANVAS_SECTION_ID;
+}
+
+//#endregion
+//#region src/views/object-list-panel/ObjectListPanelBase.tsx
+const objectListPanelLabelKeys = {
+	title: "drawing-ui.objectListPanel.title",
+	empty: "drawing-ui.objectListPanel.empty",
+	showAll: "drawing-ui.objectListPanel.showAll",
+	hideAll: "drawing-ui.objectListPanel.hideAll",
+	moveForward: "drawing-ui.objectListPanel.moveForward",
+	moveBackward: "drawing-ui.objectListPanel.moveBackward",
+	close: "drawing-ui.objectListPanel.close",
+	show: "drawing-ui.objectListPanel.show",
+	hide: "drawing-ui.objectListPanel.hide",
+	lock: "drawing-ui.objectListPanel.lock",
+	unlock: "drawing-ui.objectListPanel.unlock",
+	name: "drawing-ui.objectListPanel.name",
+	nameInput: "drawing-ui.objectListPanel.nameInput",
+	description: "drawing-ui.objectListPanel.description",
+	descriptionPlaceholder: "drawing-ui.objectListPanel.descriptionPlaceholder",
+	details: "drawing-ui.objectListPanel.details",
+	noSelection: "drawing-ui.objectListPanel.noSelection",
+	locate: "drawing-ui.objectListPanel.locate",
+	expand: "drawing-ui.objectListPanel.expand",
+	collapse: "drawing-ui.objectListPanel.collapse",
+	dragToReorder: "drawing-ui.objectListPanel.dragToReorder",
+	search: "drawing-ui.objectListPanel.search",
+	filterAll: "drawing-ui.objectListPanel.filterAll",
+	filterHidden: "drawing-ui.objectListPanel.filterHidden",
+	filterLocked: "drawing-ui.objectListPanel.filterLocked",
+	sectionCanvas: "drawing-ui.objectListPanel.sectionCanvas",
+	sectionFloating: "drawing-ui.objectListPanel.sectionFloating"
+};
+function getObjectListPanelLabels(localeService) {
+	return Object.fromEntries(Object.entries(objectListPanelLabelKeys).map(([labelKey, localeKey]) => [labelKey, localeService.t(localeKey)]));
+}
+function getObjectListPanelTypeName(localeService, typeName) {
+	return localeService.t(`drawing-ui.objectListPanel.typeNames.${typeName}`);
+}
+const iconButtonClassName = `
+  univer-flex univer-size-7 univer-shrink-0 univer-items-center univer-justify-center univer-rounded-md
+  univer-border-0 univer-bg-transparent univer-p-0 univer-text-gray-500 univer-outline-none univer-transition-colors
+  hover:univer-bg-gray-100 hover:univer-text-gray-900
+  disabled:univer-cursor-not-allowed disabled:univer-opacity-40
+  dark:!univer-text-gray-300 dark:hover:!univer-bg-gray-800 dark:hover:!univer-text-gray-100
+`;
+const sectionOrder = /* @__PURE__ */ new Map([
+	[OBJECT_LIST_FLOATING_SECTION_ID, 0],
+	[OBJECT_LIST_CANVAS_SECTION_ID, 1],
+	["", 2]
+]);
+function normalizeText(value) {
+	return value.trim();
+}
+function hasCapability(panelCapabilities, item, key, fallback = true) {
+	var _ref, _item$capabilities$ke, _item$capabilities;
+	return (_ref = (_item$capabilities$ke = item === null || item === void 0 || (_item$capabilities = item.capabilities) === null || _item$capabilities === void 0 ? void 0 : _item$capabilities[key]) !== null && _item$capabilities$ke !== void 0 ? _item$capabilities$ke : panelCapabilities === null || panelCapabilities === void 0 ? void 0 : panelCapabilities[key]) !== null && _ref !== void 0 ? _ref : fallback;
+}
+function ObjectListPanelBase(props) {
+	var _selectedItem$canMove, _selectedItem$canMove2, _capabilities$reorder;
+	const { items, selectedIds, allObjectIds, focusedId, labels, showHeader = true, capabilities, onSelect, onSetVisible, onCommitName, onCommitDescription, onMoveForward, onMoveBackward, onToggleExpanded, onToggleSelectable, onLocate, onReorder } = props;
+	const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+	const [draggingId, setDraggingId] = useState(null);
+	const [searchQuery, setSearchQuery] = useState("");
+	const [filterMode, setFilterMode] = useState("all");
+	const [collapsedSectionIds, setCollapsedSectionIds] = useState(() => /* @__PURE__ */ new Set());
+	const selectedItem = useMemo(() => {
+		var _ref2, _items$find;
+		return (_ref2 = (_items$find = items.find((item) => item.id === focusedId)) !== null && _items$find !== void 0 ? _items$find : items.find((item) => selectedIdSet.has(item.id))) !== null && _ref2 !== void 0 ? _ref2 : null;
+	}, [
+		focusedId,
+		items,
+		selectedIdSet
+	]);
+	const visibleItems = useMemo(() => {
+		const normalizedQuery = normalizeText(searchQuery).toLocaleLowerCase();
+		return items.filter((item) => {
+			var _item$description;
+			if (filterMode === "hidden" && item.visible !== false) return false;
+			if (filterMode === "locked" && item.selectable !== false) return false;
+			if (!normalizedQuery) return true;
+			return item.name.toLocaleLowerCase().includes(normalizedQuery) || ((_item$description = item.description) !== null && _item$description !== void 0 ? _item$description : "").toLocaleLowerCase().includes(normalizedQuery);
+		});
+	}, [
+		filterMode,
+		items,
+		searchQuery
+	]);
+	const visibleItemSections = useMemo(() => {
+		const sectionMap = /* @__PURE__ */ new Map();
+		visibleItems.forEach((item) => {
+			var _item$sectionId, _item$sectionTitle;
+			const sectionId = (_item$sectionId = item.sectionId) !== null && _item$sectionId !== void 0 ? _item$sectionId : "";
+			const existingSection = sectionMap.get(sectionId);
+			if (existingSection) {
+				existingSection.items.push(item);
+				return;
+			}
+			sectionMap.set(sectionId, {
+				id: sectionId,
+				title: (_item$sectionTitle = item.sectionTitle) !== null && _item$sectionTitle !== void 0 ? _item$sectionTitle : "",
+				items: [item]
+			});
+		});
+		return [...sectionMap.values()].sort((a, b) => {
+			var _sectionOrder$get, _sectionOrder$get2;
+			return ((_sectionOrder$get = sectionOrder.get(a.id)) !== null && _sectionOrder$get !== void 0 ? _sectionOrder$get : 3) - ((_sectionOrder$get2 = sectionOrder.get(b.id)) !== null && _sectionOrder$get2 !== void 0 ? _sectionOrder$get2 : 3);
+		});
+	}, [visibleItems]);
+	const showSectionHeaders = visibleItemSections.length > 1 || visibleItemSections.some((section) => section.id === "floating");
+	const allIds = useMemo(() => allObjectIds !== null && allObjectIds !== void 0 ? allObjectIds : items.map((item) => item.id), [allObjectIds, items]);
+	const selectedIndex = selectedItem ? items.findIndex((item) => item.id === selectedItem.id) : -1;
+	const canMoveForward = !!selectedItem && !!onMoveForward && !selectedItem.disabled && ((_selectedItem$canMove = selectedItem.canMoveForward) !== null && _selectedItem$canMove !== void 0 ? _selectedItem$canMove : selectedIndex > 0) && hasCapability(capabilities, selectedItem, "arrange");
+	const canMoveBackward = !!selectedItem && !!onMoveBackward && !selectedItem.disabled && ((_selectedItem$canMove2 = selectedItem.canMoveBackward) !== null && _selectedItem$canMove2 !== void 0 ? _selectedItem$canMove2 : selectedIndex >= 0 && selectedIndex < items.length - 1) && hasCapability(capabilities, selectedItem, "arrange");
+	const showArrangeControls = hasCapability(capabilities, selectedItem, "arrange") && (!!onMoveForward || !!onMoveBackward);
+	const showLocateControl = !!onLocate && hasCapability(capabilities, selectedItem, "locate");
+	const canReorder = !!onReorder && ((_capabilities$reorder = capabilities === null || capabilities === void 0 ? void 0 : capabilities.reorder) !== null && _capabilities$reorder !== void 0 ? _capabilities$reorder : true);
+	const findItem = (objectId) => {
+		var _items$find2;
+		return objectId ? (_items$find2 = items.find((item) => item.id === objectId)) !== null && _items$find2 !== void 0 ? _items$find2 : null : null;
+	};
+	const handleDrop = (targetId) => {
+		var _source$parentId, _target$parentId, _source$sectionId, _target$sectionId;
+		const source = findItem(draggingId);
+		const target = findItem(targetId);
+		setDraggingId(null);
+		if (!source || !target || source.id === target.id || source.disabled || target.disabled) return;
+		if (((_source$parentId = source.parentId) !== null && _source$parentId !== void 0 ? _source$parentId : "") !== ((_target$parentId = target.parentId) !== null && _target$parentId !== void 0 ? _target$parentId : "")) return;
+		if (((_source$sectionId = source.sectionId) !== null && _source$sectionId !== void 0 ? _source$sectionId : "") !== ((_target$sectionId = target.sectionId) !== null && _target$sectionId !== void 0 ? _target$sectionId : "")) return;
+		if (source.canReorder === false || target.canReorder === false) return;
+		onReorder === null || onReorder === void 0 || onReorder(source.id, target.id);
+	};
+	const toggleSectionCollapsed = (sectionId) => {
+		if (!sectionId) return;
+		setCollapsedSectionIds((current) => {
+			const next = new Set(current);
+			if (next.has(sectionId)) next.delete(sectionId);
+			else next.add(sectionId);
+			return next;
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "univer-box-border univer-flex univer-size-full univer-min-w-0 univer-max-w-full univer-flex-col univer-gap-3 univer-overflow-hidden univer-text-gray-700 dark:!univer-text-gray-200",
+		"data-drawing-object-list-panel": "true",
+		children: [
+			showHeader && /* @__PURE__ */ jsx("div", {
+				className: "univer-flex univer-h-8 univer-shrink-0 univer-items-center univer-gap-2",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "univer-min-w-0 univer-flex-1 univer-truncate univer-text-sm univer-font-semibold univer-text-gray-900 dark:!univer-text-gray-100",
+					children: labels.title
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "univer-flex univer-min-w-0 univer-items-center univer-justify-between univer-gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "univer-flex univer-min-w-0 univer-gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						size: "small",
+						disabled: items.length === 0,
+						onClick: () => onSetVisible(allIds, true),
+						children: labels.showAll
+					}), /* @__PURE__ */ jsx(Button, {
+						size: "small",
+						disabled: items.length === 0,
+						onClick: () => onSetVisible(allIds, false),
+						children: labels.hideAll
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "univer-flex univer-shrink-0 univer-gap-1",
+					children: [showLocateControl && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: iconButtonClassName,
+						title: labels.locate,
+						"aria-label": labels.locate,
+						disabled: !(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id),
+						onClick: () => selectedItem && (onLocate === null || onLocate === void 0 ? void 0 : onLocate(selectedItem.id)),
+						children: /* @__PURE__ */ jsx(LocateFixedIcon, {})
+					}), showArrangeControls && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: iconButtonClassName,
+						title: labels.moveForward,
+						"aria-label": labels.moveForward,
+						disabled: !canMoveForward,
+						onClick: () => selectedItem && (onMoveForward === null || onMoveForward === void 0 ? void 0 : onMoveForward(selectedItem.id)),
+						children: /* @__PURE__ */ jsx(ArrowUpIcon, {})
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: iconButtonClassName,
+						title: labels.moveBackward,
+						"aria-label": labels.moveBackward,
+						disabled: !canMoveBackward,
+						onClick: () => selectedItem && (onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward(selectedItem.id)),
+						children: /* @__PURE__ */ jsx(ArrowDownIcon, {})
+					})] })]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "univer-flex univer-shrink-0 univer-flex-col univer-gap-2",
+				children: [/* @__PURE__ */ jsx(Input, {
+					value: searchQuery,
+					"aria-label": labels.search,
+					placeholder: labels.search,
+					onChange: setSearchQuery
+				}), /* @__PURE__ */ jsx("div", {
+					className: "univer-flex univer-min-w-0 univer-gap-1",
+					children: [
+						["all", labels.filterAll],
+						["hidden", labels.filterHidden],
+						["locked", labels.filterLocked]
+					].map(([mode, label]) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: clsx("univer-h-7 univer-min-w-0 univer-flex-1 univer-rounded-md univer-border univer-border-solid univer-px-2 univer-text-xs univer-outline-none univer-transition-colors dark:!univer-border-gray-700", filterMode === mode ? "dark:!univer-bg-primary-900/30 univer-border-primary-500 univer-bg-primary-50 univer-text-primary-600 dark:!univer-text-primary-200" : "univer-border-gray-200 univer-bg-white univer-text-gray-600 hover:univer-bg-gray-50 dark:!univer-bg-gray-900 dark:!univer-text-gray-300 dark:hover:!univer-bg-gray-800"),
+						"aria-pressed": filterMode === mode,
+						onClick: () => setFilterMode(mode),
+						children: /* @__PURE__ */ jsx("span", {
+							className: "univer-block univer-truncate",
+							children: label
+						})
+					}, mode))
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "univer-min-h-0 univer-flex-1 univer-overflow-y-auto univer-overflow-x-hidden",
+				children: visibleItems.length === 0 ? /* @__PURE__ */ jsx("div", {
+					className: "univer-py-6 univer-text-center univer-text-sm univer-text-gray-500",
+					children: labels.empty
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "univer-flex univer-min-w-0 univer-flex-col univer-gap-0.5",
+					children: visibleItemSections.map((section) => /* @__PURE__ */ jsxs("div", {
+						className: "univer-flex univer-min-w-0 univer-flex-col univer-gap-0.5",
+						children: [showSectionHeaders && section.title && (() => {
+							const sectionCollapsed = !!section.id && collapsedSectionIds.has(section.id);
+							return /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								className: "univer-box-border univer-flex univer-h-7 univer-w-full univer-items-center univer-gap-1 univer-rounded-md univer-border-0 univer-bg-transparent univer-px-2 univer-pt-1 univer-text-xs univer-font-semibold univer-uppercase univer-text-gray-400 univer-outline-none hover:univer-bg-gray-50 hover:univer-text-gray-600 disabled:univer-cursor-default disabled:hover:univer-bg-transparent dark:!univer-text-gray-500 dark:hover:!univer-bg-gray-800 dark:hover:!univer-text-gray-300",
+								"aria-label": sectionCollapsed ? labels.expand : labels.collapse,
+								disabled: !section.id,
+								onClick: () => toggleSectionCollapsed(section.id),
+								children: [
+									section.id ? /* @__PURE__ */ jsx("span", {
+										className: "univer-flex univer-size-4 univer-shrink-0 univer-items-center univer-justify-center",
+										children: sectionCollapsed ? /* @__PURE__ */ jsx(MoreRightIcon, {}) : /* @__PURE__ */ jsx(MoreDownIcon, {})
+									}) : /* @__PURE__ */ jsx("span", { className: "univer-size-4 univer-shrink-0" }),
+									/* @__PURE__ */ jsx("span", {
+										className: "univer-min-w-0 univer-flex-1 univer-truncate univer-text-left",
+										children: section.title
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "univer-shrink-0 univer-text-[10px] univer-font-medium univer-text-gray-400 dark:!univer-text-gray-500",
+										children: section.items.length
+									})
+								]
+							});
+						})(), (!section.id || !collapsedSectionIds.has(section.id)) && section.items.map((item) => /* @__PURE__ */ jsx(ObjectListRow, {
+							item,
+							selected: selectedIdSet.has(item.id),
+							labels,
+							showLock: !!onToggleSelectable && hasCapability(capabilities, item, "selectable"),
+							showName: hasCapability(capabilities, item, "name"),
+							showVisible: hasCapability(capabilities, item, "visible"),
+							draggable: canReorder && hasCapability(capabilities, item, "reorder") && !item.disabled && item.canReorder !== false,
+							dragging: draggingId === item.id,
+							onSelect: (multiSelect) => onSelect(item.id, multiSelect),
+							onToggleExpanded: () => onToggleExpanded === null || onToggleExpanded === void 0 ? void 0 : onToggleExpanded(item.id),
+							onToggleVisible: () => onSetVisible([item.id], !item.visible),
+							onToggleSelectable: () => onToggleSelectable === null || onToggleSelectable === void 0 ? void 0 : onToggleSelectable(item.id),
+							onCommitName: (value) => onCommitName(item.id, value),
+							onDragStart: () => setDraggingId(item.id),
+							onDragEnd: () => setDraggingId(null),
+							onDrop: () => handleDrop(item.id)
+						}, item.id))]
+					}, section.id || "default"))
+				})
+			}),
+			/* @__PURE__ */ jsx(ObjectDetailsEditor, {
+				item: selectedItem,
+				labels,
+				showName: hasCapability(capabilities, selectedItem, "name"),
+				showDescription: hasCapability(capabilities, selectedItem, "description"),
+				onCommitName: (value) => selectedItem && onCommitName(selectedItem.id, value),
+				onCommitDescription: (value) => selectedItem && onCommitDescription(selectedItem.id, value)
+			})
+		]
+	});
+}
+function ObjectListRow(props) {
+	var _item$level;
+	const { item, selected, labels, showLock, showName, showVisible, draggable, dragging, onSelect, onToggleExpanded, onToggleVisible, onToggleSelectable, onCommitName, onDragStart, onDragEnd, onDrop } = props;
+	const [draftName, setDraftName] = useState(item.name);
+	const skipCommitOnBlurRef = useRef(false);
+	const disabled = item.disabled === true;
+	const level = (_item$level = item.level) !== null && _item$level !== void 0 ? _item$level : 0;
+	const locked = item.selectable === false;
+	useEffect(() => {
+		setDraftName(item.name);
+	}, [item.name]);
+	const handleBlur = (event) => {
+		if (disabled) return;
+		if (skipCommitOnBlurRef.current) {
+			skipCommitOnBlurRef.current = false;
+			return;
+		}
+		if (event.currentTarget.value !== item.name) onCommitName(event.currentTarget.value);
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter") {
+			event.currentTarget.blur();
+			return;
+		}
+		if (event.key === "Escape") {
+			skipCommitOnBlurRef.current = true;
+			setDraftName(item.name);
+			event.currentTarget.blur();
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("univer-box-border univer-flex univer-h-8 univer-w-full univer-min-w-0 univer-max-w-full univer-items-center univer-gap-1.5 univer-overflow-hidden univer-rounded-md univer-pr-1.5 univer-transition-colors", !disabled && "hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-800", selected && "univer-bg-gray-100 dark:!univer-bg-gray-800", disabled && "univer-text-gray-400 dark:!univer-text-gray-500", dragging && "univer-opacity-50"),
+		style: { paddingLeft: level * 14 + 4 },
+		draggable,
+		title: draggable ? labels.dragToReorder : void 0,
+		onClick: disabled ? void 0 : (event) => onSelect(event.ctrlKey || event.metaKey),
+		onDragStart: (event) => {
+			if (!draggable) {
+				event.preventDefault();
+				return;
+			}
+			event.dataTransfer.effectAllowed = "move";
+			event.dataTransfer.setData("text/plain", item.id);
+			onDragStart();
+		},
+		onDragEnd,
+		onDragOver: (event) => {
+			if (draggable) {
+				event.preventDefault();
+				event.dataTransfer.dropEffect = "move";
+			}
+		},
+		onDrop: (event) => {
+			event.preventDefault();
+			onDrop();
+		},
+		children: [
+			item.isGroup ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "univer-flex univer-size-5 univer-shrink-0 univer-items-center univer-justify-center univer-rounded univer-border-0 univer-bg-transparent univer-p-0 univer-text-gray-500 univer-outline-none univer-transition-transform hover:univer-bg-gray-100 hover:univer-text-gray-900 dark:!univer-text-gray-300 dark:hover:!univer-bg-gray-800 dark:hover:!univer-text-gray-100",
+				title: item.expanded ? labels.collapse : labels.expand,
+				"aria-label": item.expanded ? labels.collapse : labels.expand,
+				onClick: (event) => {
+					event.stopPropagation();
+					onToggleExpanded();
+				},
+				children: item.expanded ? /* @__PURE__ */ jsx(MoreDownIcon, {}) : /* @__PURE__ */ jsx(MoreRightIcon, {})
+			}) : /* @__PURE__ */ jsx("span", { className: "univer-size-5 univer-shrink-0" }),
+			showName ? /* @__PURE__ */ jsx(Input, {
+				className: clsx("univer-h-7 univer-w-0 univer-min-w-0 univer-flex-1", disabled && "univer-cursor-not-allowed"),
+				inputClass: clsx("!univer-h-7 univer-min-w-0 univer-overflow-hidden univer-text-ellipsis univer-whitespace-nowrap !univer-rounded !univer-border-transparent !univer-bg-transparent !univer-px-1 univer-text-sm univer-text-gray-900 !univer-shadow-none focus:!univer-border-primary-500 focus:!univer-bg-white focus:!univer-ring-1 focus:!univer-ring-primary-100 disabled:!univer-bg-transparent disabled:univer-opacity-100 dark:!univer-text-gray-100 dark:focus:!univer-bg-gray-900 dark:focus:!univer-ring-primary-900", disabled && "univer-text-gray-400 dark:!univer-text-gray-500"),
+				inputStyle: {
+					maxWidth: "100%",
+					boxSizing: "border-box"
+				},
+				value: draftName,
+				disabled,
+				"aria-label": labels.nameInput,
+				onChange: setDraftName,
+				onBlur: handleBlur,
+				onKeyDown: handleKeyDown,
+				onClick: (event) => {
+					event.stopPropagation();
+					if (!disabled) onSelect(event.ctrlKey || event.metaKey);
+				}
+			}, item.name) : /* @__PURE__ */ jsx("span", {
+				className: "univer-min-w-0 univer-flex-1 univer-truncate univer-px-1 univer-text-sm",
+				children: item.name
+			}),
+			showLock && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: clsx(iconButtonClassName, !locked && "univer-opacity-70"),
+				disabled,
+				title: locked ? labels.unlock : labels.lock,
+				"aria-label": locked ? labels.unlock : labels.lock,
+				onClick: (event) => {
+					event.stopPropagation();
+					onToggleSelectable();
+				},
+				children: /* @__PURE__ */ jsx(LockIcon, {})
+			}),
+			showVisible && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: iconButtonClassName,
+				disabled,
+				title: item.visible ? labels.hide : labels.show,
+				"aria-label": item.visible ? labels.hide : labels.show,
+				onClick: (event) => {
+					event.stopPropagation();
+					onToggleVisible();
+				},
+				children: item.visible ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyelashIcon, {})
+			})
+		]
+	});
+}
+function ObjectDetailsEditor(props) {
+	var _item$name, _item$description2;
+	const { item, labels, showName, showDescription, onCommitName, onCommitDescription } = props;
+	const [draftName, setDraftName] = useState((_item$name = item === null || item === void 0 ? void 0 : item.name) !== null && _item$name !== void 0 ? _item$name : "");
+	const [draftDescription, setDraftDescription] = useState((_item$description2 = item === null || item === void 0 ? void 0 : item.description) !== null && _item$description2 !== void 0 ? _item$description2 : "");
+	const disabled = (item === null || item === void 0 ? void 0 : item.disabled) === true;
+	useEffect(() => {
+		var _item$name2, _item$description3;
+		setDraftName((_item$name2 = item === null || item === void 0 ? void 0 : item.name) !== null && _item$name2 !== void 0 ? _item$name2 : "");
+		setDraftDescription((_item$description3 = item === null || item === void 0 ? void 0 : item.description) !== null && _item$description3 !== void 0 ? _item$description3 : "");
+	}, [
+		item === null || item === void 0 ? void 0 : item.description,
+		item === null || item === void 0 ? void 0 : item.id,
+		item === null || item === void 0 ? void 0 : item.name
+	]);
+	if (!item) return /* @__PURE__ */ jsx("div", {
+		className: "univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-p-3 univer-text-sm univer-text-gray-500 dark:!univer-border-gray-700 dark:!univer-text-gray-400",
+		children: labels.noSelection
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "univer-flex univer-shrink-0 univer-flex-col univer-gap-2 univer-border-0 univer-border-t univer-border-solid univer-border-gray-200 univer-pt-3 dark:!univer-border-gray-700",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "univer-text-xs univer-font-semibold univer-uppercase univer-text-gray-500 dark:!univer-text-gray-400",
+				children: labels.details
+			}),
+			showName && /* @__PURE__ */ jsxs("label", {
+				className: "univer-flex univer-flex-col univer-gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "univer-text-xs univer-text-gray-500 dark:!univer-text-gray-400",
+					children: labels.name
+				}), /* @__PURE__ */ jsx(Input, {
+					value: draftName,
+					"aria-label": labels.nameInput,
+					disabled,
+					onChange: setDraftName,
+					onBlur: () => {
+						if (!disabled && normalizeText(draftName) !== item.name) onCommitName(draftName);
+					},
+					onKeyDown: (event) => {
+						if (event.key === "Enter") event.currentTarget.blur();
+					}
+				})]
+			}),
+			showDescription && /* @__PURE__ */ jsxs("label", {
+				className: "univer-flex univer-flex-col univer-gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "univer-text-xs univer-text-gray-500 dark:!univer-text-gray-400",
+					children: labels.description
+				}), /* @__PURE__ */ jsx("textarea", {
+					className: "univer-box-border univer-min-h-16 univer-w-full univer-resize-none univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-p-2 univer-text-sm univer-text-gray-900 univer-outline-none focus:univer-border-primary-500 focus:univer-ring-1 focus:univer-ring-primary-100 disabled:univer-cursor-not-allowed disabled:univer-opacity-70 dark:!univer-border-gray-700 dark:!univer-bg-gray-900 dark:!univer-text-gray-100 dark:focus:!univer-ring-primary-900",
+					value: draftDescription,
+					disabled,
+					placeholder: labels.descriptionPlaceholder,
+					"aria-label": labels.description,
+					onChange: (event) => setDraftDescription(event.currentTarget.value),
+					onBlur: () => {
+						var _item$description4;
+						if (!disabled && normalizeText(draftDescription) !== ((_item$description4 = item.description) !== null && _item$description4 !== void 0 ? _item$description4 : "")) onCommitDescription(draftDescription);
+					}
+				})]
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/views/panel/DrawingAlign.tsx
 const DrawingAlign = (props) => {
@@ -2560,15 +3085,7 @@ const DrawingArrange = (props) => {
 	const MoveDownIcon = iconManager.get("MoveDownIcon");
 	const TopmostIcon = iconManager.get("TopmostIcon");
 	const BottomIcon = iconManager.get("BottomIcon");
-	const [drawings, setDrawings] = useState(focusDrawings);
-	useEffect(() => {
-		const focusDispose = drawingManagerService.focus$.subscribe((drawings) => {
-			setDrawings(drawings);
-		});
-		return () => {
-			focusDispose.unsubscribe();
-		};
-	}, []);
+	const drawings = useObservable(() => drawingManagerService.focus$, focusDrawings, false, [drawingManagerService]);
 	const onArrangeBtnClick = (arrangeType) => {
 		commandService.syncExecuteCommand(SetDrawingArrangeOperation.id, {
 			arrangeType,
@@ -2615,6 +3132,7 @@ const DrawingArrange = (props) => {
 //#endregion
 //#region src/views/panel/DrawingGroup.tsx
 const DrawingGroup = (props) => {
+	var _renderManagerService;
 	const localeService = useDependency(LocaleService);
 	const renderManagerService = useDependency(IRenderManagerService);
 	const drawingManagerService = useDependency(IDrawingManagerService);
@@ -2623,43 +3141,32 @@ const DrawingGroup = (props) => {
 	const { hasGroup, drawings } = props;
 	const GroupIcon = iconManager.get("GroupIcon");
 	const UngroupIcon = iconManager.get("UngroupIcon");
-	const [groupShow, setGroupShow] = useState(false);
-	const [groupBtnShow, setGroupBtnShow] = useState(true);
-	const [ungroupBtnShow, setUngroupBtnShow] = useState(true);
+	const drawingParam = drawings[0];
+	const transformer = drawingParam ? (_renderManagerService = renderManagerService.getRenderById(drawingParam.unitId)) === null || _renderManagerService === void 0 || (_renderManagerService = _renderManagerService.scene) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.getTransformerByCreate() : void 0;
+	const { groupShow, groupBtnShow, ungroupBtnShow } = useObservable(transformer ? () => merge$1(transformer.clearControl$.pipe(filter((changeSelf) => changeSelf === true), map(() => ({
+		groupShow: false,
+		groupBtnShow: false,
+		ungroupBtnShow: false
+	}))), transformer.changeStart$.pipe(map((state) => {
+		const params = getUpdateParams(state.objects, drawingManagerService);
+		const groupBtnShow = params.length > 1;
+		const ungroupBtnShow = params.some((item) => (item === null || item === void 0 ? void 0 : item.drawingType) === DrawingTypeEnum.DRAWING_GROUP);
+		return {
+			groupShow: groupBtnShow || ungroupBtnShow,
+			groupBtnShow,
+			ungroupBtnShow
+		};
+	}))) : null, {
+		groupShow: false,
+		groupBtnShow: true,
+		ungroupBtnShow: true
+	}, false, [drawingManagerService, transformer]);
 	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", {
@@ -2711,21 +3218,24 @@ function createDrawingTransformRotationChangeHandler(options) {
 //#region src/views/panel/DrawingTransform.tsx
 const INPUT_DEBOUNCE_TIME = 300;
 const DrawingTransform = (props) => {
-	var _scene$getEngine;
+	var _renderManagerService, _scene$getEngine;
+	const renderManagerService = useDependency(IRenderManagerService);
+	const drawingParam = props.drawings[0];
+	const scene = drawingParam ? (_renderManagerService = renderManagerService.getRenderById(drawingParam.unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.scene : void 0;
+	const topScene = scene === null || scene === void 0 || (_scene$getEngine = scene.getEngine()) === null || _scene$getEngine === void 0 ? void 0 : _scene$getEngine.activeScene;
+	if (!(drawingParam === null || drawingParam === void 0 ? void 0 : drawingParam.transform) || !scene || !topScene) return null;
+	return /* @__PURE__ */ jsx(DrawingTransformContent, { ...props });
+};
+function DrawingTransformContent(props) {
 	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 scene = renderManagerService.getRenderById(unitId).scene;
+	const topScene = scene.getEngine().activeScene;
 	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);
@@ -2956,7 +3466,7 @@ const DrawingTransform = (props) => {
 			})
 		]
 	});
-};
+}
 
 //#endregion
 //#region src/views/panel/ImageCropper.tsx
@@ -2967,7 +3477,7 @@ const ImageCropper = (props) => {
 	const componentManager = useDependency(ComponentManager);
 	const canUseShapeClip = useObservable(clipService.canUseShapeClip$, false);
 	const { drawings, cropperShow } = props;
-	if (drawings[0] == null) return;
+	const drawingParam = drawings[0];
 	const [cropValue, setCropValue] = useState("0");
 	const cropStateRef = useRef(false);
 	const cropOptions = [
@@ -3023,6 +3533,7 @@ const ImageCropper = (props) => {
 			onChangeStartObserver === null || onChangeStartObserver === void 0 || onChangeStartObserver.dispose();
 		};
 	}, []);
+	if (drawingParam == null) return null;
 	function handleCropChange(value) {
 		setCropValue(value);
 		if (cropStateRef.current) commandService.executeCommand(AutoImageCropOperation.id, { cropType: value });
@@ -3090,78 +3601,11 @@ const DrawingCommonPanel = (props) => {
 	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 renderObject = drawingParam ? renderManagerService.getRenderById(drawingParam.unitId) : void 0;
 	const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-	if (scene == null) return;
-	const transformer = scene.getTransformerByCreate();
-	const initialShowState = getPanelShowState(drawings);
-	const [arrangeShow, setArrangeShow] = useState(initialShowState.arrangeShow);
-	const [transformShow, setTransformShow] = useState(initialShowState.transformShow);
-	const [alignShow, setAlignShow] = useState(initialShowState.alignShow);
-	const [cropperShow, setCropperShow] = useState(initialShowState.cropperShow);
-	const [nullShow, setNullShow] = useState(initialShowState.nullShow);
-	useEffect(() => {
-		const clearControlSub = transformer.clearControl$.subscribe((changeSelf) => {
-			if (changeSelf === true) {
-				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();
-		};
-	}, []);
+	const transformer = scene === null || scene === void 0 ? void 0 : scene.getTransformerByCreate();
+	const { arrangeShow, transformShow, alignShow, cropperShow, nullShow } = useObservable(() => merge$1(drawingManagerService.focus$.pipe(map(getPanelShowState)), ...transformer ? [transformer.clearControl$.pipe(filter((changeSelf) => changeSelf === true), map(() => getPanelShowState([]))), transformer.changeStart$.pipe(map((state) => getPanelShowState(getUpdateParams(state.objects, drawingManagerService))))] : []), getPanelShowState(drawings), false, [drawingManagerService, transformer]);
+	if (!drawingParam || !scene || !transformer) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("div", {
 			className: clsx("univer-h-full", { "univer-hidden": !nullShow }),
@@ -3194,4 +3638,4 @@ const DrawingCommonPanel = (props) => {
 };
 
 //#endregion
-export { AutoImageCropOperation, COMPONENT_IMAGE_POPUP_MENU, CancelDrawingGroupOperation, CloseImageCropOperation, DRAWING_GROUP_TYPES, DrawingCommonPanel, DrawingImageClipService, DrawingRenderService, IMAGE_CLIP_SHAPE_PICKER_COMPONENT, ImageCropperObject, ImageResetSizeOperation, OpenImageCropOperation, SetDrawingAlignOperation, SetDrawingArrangeOperation, SetDrawingGroupOperation, UniverDrawingUIPlugin, disposeDrawingRenderObject, getCurrentUnitInfo, getDrawingRenderObject, getUpdateParams, insertGroupObject };
+export { AutoImageCropOperation, COMPONENT_IMAGE_POPUP_MENU, CancelDrawingGroupOperation, CloseImageCropOperation, DRAWING_GROUP_TYPES, DrawingCommonPanel, DrawingImageClipService, DrawingRenderService, menuSchema as DrawingUIMenuSchema, IMAGE_CLIP_SHAPE_PICKER_COMPONENT, ImageCropperObject, ImageResetSizeOperation, OBJECT_LIST_CANVAS_SECTION_ID, OBJECT_LIST_FLOATING_SECTION_ID, ObjectListPanelBase, OpenImageCropOperation, SetDrawingAlignOperation, SetDrawingArrangeOperation, SetDrawingGroupOperation, UniverDrawingUIPlugin, disposeDrawingRenderObject, getCurrentUnitInfo, getDrawingRenderObject, getObjectListPanelLabels, getObjectListPanelSectionIdForDrawingType, getObjectListPanelTypeName, getUpdateParams, insertGroupObject, isFloatingObjectListDrawingType };