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

package/lib/es/index.js

@@ -1,12 +1,12 @@
-import { ArrangeTypeEnum, BooleanNumber, CommandType, Disposable, DrawingTypeEnum, ICommandService, IConfigService, IURLImageService, IUniverInstanceService, ImageSourceType, Inject, Injector, LocaleService, Plugin, PositionedObjectLayoutType, UniverInstanceType, checkIfMove, debounce, generateRandomId, merge, toDisposable } from "@univerjs/core";
-import { 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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { BehaviorSubject, Observable, bufferTime, filter, map, of, switchMap } from "rxjs";
+import { ArrowDownIcon, ArrowUpIcon, AutofillDoubleIcon, BottomIcon, ChartIcon, CreateCopyIcon, CropIcon, DeleteIcon, DocSettingIcon, EyeIcon, EyelashIcon, GroupIcon, LocateFixedIcon, LockIcon, MoreDownIcon, MoreRightIcon, MoveDownIcon, MoveUpIcon, TextWrapShapeIcon, TopmostIcon, UngroupIcon } from "@univerjs/icons";
+import { Button, Checkbox, Dropdown, DropdownMenu, Input, InputNumber, MessageType, Select, Separator, Tooltip, borderClassName, clsx } from "@univerjs/design";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/commands/operations/drawing-align.operation.ts
 /**
@@ -360,195 +360,458 @@ 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"
+	};
+}
+
+//#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
+		}
+	}
+} } };
+
+//#endregion
+//#region package.json
+var name = "@univerjs/drawing-ui";
+var version = "1.0.0-alpha.3";
+
+//#endregion
+//#region src/config/config.ts
+const DRAWING_UI_PLUGIN_CONFIG_KEY = "drawing-ui.config";
+const configSymbol = Symbol(DRAWING_UI_PLUGIN_CONFIG_KEY);
+const defaultPluginConfig = {};
+
+//#endregion
+//#region src/views/image-popup-menu/component-name.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* 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, _popup$extraProps3;
+	const { popup } = props;
+	const menuItems = popup === null || popup === void 0 || (_popup$extraProps = popup.extraProps) === null || _popup$extraProps === void 0 ? void 0 : _popup$extraProps.menuItems;
+	if (!menuItems) return null;
+	if (((_popup$extraProps2 = popup.extraProps) === null || _popup$extraProps2 === void 0 ? void 0 : _popup$extraProps2.variant) === "doc-floating-toolbar" && popup.extraProps.unitId && popup.extraProps.subUnitId && popup.extraProps.drawingId) return /* @__PURE__ */ jsx(DocImageFloatingToolbar, {
+		menuItems,
+		unitId: popup.extraProps.unitId,
+		subUnitId: popup.extraProps.subUnitId,
+		drawingId: popup.extraProps.drawingId
+	});
+	if (((_popup$extraProps3 = popup.extraProps) === null || _popup$extraProps3 === void 0 ? void 0 : _popup$extraProps3.variant) === "doc-chart-floating-toolbar") return /* @__PURE__ */ jsx(DocChartFloatingToolbar, { menuItems });
+	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
+	const [visible, setVisible] = useState(false);
+	const [isHovered, setHovered] = useState(false);
+	const handleMouseEnter = () => {
+		setHovered(true);
+	};
+	const handleMouseLeave = () => {
+		setHovered(false);
+	};
+	const onVisibleChange = (visible) => {
+		setVisible(visible);
+	};
+	const handleClick = (item) => {
+		commandService.executeCommand(item.commandId, item.commandParams);
+		setVisible(false);
+	};
+	const showMore = visible || isHovered;
+	return /* @__PURE__ */ jsx("div", {
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		children: /* @__PURE__ */ jsx(DropdownMenu, {
+			align: "start",
+			items: menuItems.map((item) => ({
+				type: "item",
+				children: localeService.t(item.label),
+				disabled: item.disable,
+				onSelect: () => handleClick(item)
+			})),
+			open: visible,
+			onOpenChange: onVisibleChange,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: clsx("univer-flex univer-items-center univer-gap-2 univer-rounded univer-p-1 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-800", borderClassName, {
+					"univer-bg-gray-100 dark:!univer-bg-gray-800": visible,
+					"univer-bg-white dark:!univer-bg-gray-900": !visible
+				}),
+				children: [/* @__PURE__ */ jsx(AutofillDoubleIcon, { className: "univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-white" }), showMore && /* @__PURE__ */ jsx(MoreDownIcon, { className: "dark:!univer-text-white" })]
+			})
+		})
+	});
+}
+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, _editItem$label, _cropItem$label, _deleteItem$label;
+	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
+	const documentDataModel = (_univerInstanceServic = useDependency(IUniverInstanceService).getUnit(props.unitId, UniverInstanceType.UNIVER_DOC)) !== null && _univerInstanceServic !== void 0 ? _univerInstanceServic : void 0;
+	const [wrappingStyle, setWrappingStyle] = useState(() => getWrappingStyle(documentDataModel, props.drawingId));
+	const [hidden, setHidden] = useState(false);
+	const getMenuItem = (label) => props.menuItems.find((item) => item.label === label);
+	const editItem = getMenuItem("drawing-ui.image-popup.edit");
+	const cropItem = getMenuItem("drawing-ui.image-popup.crop");
+	const deleteItem = getMenuItem("drawing-ui.image-popup.delete");
+	const wrappingStyleOptions = [
+		{
+			label: localeService.t("drawing-ui.image-text-wrap.inline"),
+			value: "inline",
+			icon: /* @__PURE__ */ jsx(TextWrapShapeIcon, {})
+		},
+		{
+			label: localeService.t("drawing-ui.image-text-wrap.square"),
+			value: "wrapSquare",
+			icon: /* @__PURE__ */ jsx(TextWrapShapeIcon, {})
+		},
+		{
+			label: localeService.t("drawing-ui.image-text-wrap.topAndBottom"),
+			value: "wrapTopAndBottom",
+			icon: /* @__PURE__ */ jsx(TextWrapShapeIcon, {})
+		},
+		{
+			label: localeService.t("drawing-ui.image-text-wrap.behindText"),
+			value: "behindText",
+			icon: /* @__PURE__ */ jsx(TextWrapShapeIcon, {})
+		},
+		{
+			label: localeService.t("drawing-ui.image-text-wrap.inFrontText"),
+			value: "inFrontOfText",
+			icon: /* @__PURE__ */ jsx(TextWrapShapeIcon, {})
+		}
+	];
+	const executeMenuItem = (item) => {
+		if (!item || item.disable) return;
+		commandService.executeCommand(item.commandId, item.commandParams);
 	};
 	const updateWrappingStyle = (value) => {
 		setWrappingStyle(value);
@@ -580,7 +843,7 @@ function DocImageFloatingToolbar(props) {
 			}) }),
 			/* @__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"),
+				titleKey: (_editItem$label = editItem === null || editItem === void 0 ? void 0 : editItem.label) !== null && _editItem$label !== void 0 ? _editItem$label : "drawing-ui.image-popup.edit",
 				disabled: !editItem || editItem.disable,
 				onClick: () => {
 					setHidden(true);
@@ -588,14 +851,14 @@ function DocImageFloatingToolbar(props) {
 				},
 				children: /* @__PURE__ */ jsx(DocSettingIcon, {})
 			}), /* @__PURE__ */ jsx(ToolbarButton, {
-				title: cropItem ? localeService.t(cropItem.label) : localeService.t("drawing-ui.image-popup.crop"),
+				titleKey: (_cropItem$label = cropItem === null || cropItem === void 0 ? void 0 : cropItem.label) !== null && _cropItem$label !== void 0 ? _cropItem$label : "drawing-ui.image-popup.crop",
 				disabled: !cropItem || cropItem.disable,
 				onClick: () => executeMenuItem(cropItem),
 				children: /* @__PURE__ */ jsx(CropIcon, {})
 			})] }),
 			/* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
 			/* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(ToolbarButton, {
-				title: deleteItem ? localeService.t(deleteItem.label) : localeService.t("drawing-ui.image-popup.delete"),
+				titleKey: (_deleteItem$label = deleteItem === null || deleteItem === void 0 ? void 0 : deleteItem.label) !== null && _deleteItem$label !== void 0 ? _deleteItem$label : "drawing-ui.image-popup.delete",
 				disabled: !deleteItem || deleteItem.disable,
 				onClick: () => executeMenuItem(deleteItem),
 				children: /* @__PURE__ */ jsx(DeleteIcon, {})
@@ -603,6 +866,52 @@ function DocImageFloatingToolbar(props) {
 		]
 	});
 }
+function DocChartFloatingToolbar(props) {
+	var _chartTypeItem$option, _ref, _chartTypeItem$value, _chartTypeOptions$;
+	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
+	const chartTypeItem = props.menuItems.find((item) => item.type === "select");
+	const editItem = props.menuItems.find((item) => item.icon === "edit");
+	const deleteItem = props.menuItems.find((item) => item.icon === "delete");
+	const chartTypeOptions = ((_chartTypeItem$option = chartTypeItem === null || chartTypeItem === void 0 ? void 0 : chartTypeItem.options) !== null && _chartTypeItem$option !== void 0 ? _chartTypeItem$option : []).map((option) => ({
+		label: String(option.label),
+		value: option.value,
+		icon: /* @__PURE__ */ jsx(ChartIcon, {})
+	}));
+	const executeMenuItem = (item) => {
+		if (!item || item.disable) return;
+		commandService.executeCommand(item.commandId, item.commandParams);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-u-comp": "doc-chart-floating-toolbar",
+		onMouseDown: (event) => {
+			event.stopPropagation();
+			event.preventDefault();
+		},
+		className: clsx("univer-box-border univer-flex univer-items-center univer-rounded univer-bg-white univer-px-1 univer-py-1 univer-shadow-sm dark:!univer-border-gray-700 dark:!univer-bg-gray-900", borderClassName),
+		children: [chartTypeItem && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(ToolbarDropdownButton, {
+			title: localeService.t(chartTypeItem.label),
+			value: (_ref = (_chartTypeItem$value = chartTypeItem.value) !== null && _chartTypeItem$value !== void 0 ? _chartTypeItem$value : (_chartTypeOptions$ = chartTypeOptions[0]) === null || _chartTypeOptions$ === void 0 ? void 0 : _chartTypeOptions$.value) !== null && _ref !== void 0 ? _ref : "",
+			options: chartTypeOptions,
+			onChange: (value) => {
+				if (!chartTypeItem.disable) {
+					var _chartTypeItem$comman;
+					commandService.executeCommand(chartTypeItem.commandId, (_chartTypeItem$comman = chartTypeItem.commandParamsFactory) === null || _chartTypeItem$comman === void 0 ? void 0 : _chartTypeItem$comman.call(chartTypeItem, value));
+				}
+			}
+		}) }), (editItem || deleteItem) && /* @__PURE__ */ jsx(Separator, { orientation: "vertical" })] }), (editItem || deleteItem) && /* @__PURE__ */ jsxs(ToolbarGroup, { children: [editItem && /* @__PURE__ */ jsx(ToolbarButton, {
+			titleKey: editItem.label,
+			disabled: editItem.disable,
+			onClick: () => executeMenuItem(editItem),
+			children: /* @__PURE__ */ jsx(DocSettingIcon, {})
+		}), deleteItem && /* @__PURE__ */ jsx(ToolbarButton, {
+			titleKey: deleteItem.label,
+			disabled: deleteItem.disable,
+			onClick: () => executeMenuItem(deleteItem),
+			children: /* @__PURE__ */ jsx(DeleteIcon, {})
+		})] })]
+	});
+}
 
 //#endregion
 //#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
@@ -752,7 +1061,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 +1081,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 +1126,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 +1220,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:
 		}
 	}
@@ -2044,338 +2353,76 @@ let ImageUpdateController = class ImageUpdateController extends Disposable {
 		}));
 	}
 	_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);
+		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);
+			}
 		});
-		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
-		}
 	}
-} } };
+	_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 +2521,482 @@ _defineProperty(UniverDrawingUIPlugin, "packageName", name);
 _defineProperty(UniverDrawingUIPlugin, "version", version);
 UniverDrawingUIPlugin = __decorate([__decorateParam(1, Inject(Injector)), __decorateParam(2, IConfigService)], UniverDrawingUIPlugin);
 
+//#endregion
+//#region src/views/object-list-panel/object-list-panel-layer.ts
+const OBJECT_LIST_FLOATING_SECTION_ID = "floating";
+const OBJECT_LIST_CANVAS_SECTION_ID = "canvas";
+function isFloatingObjectListDrawingType(drawingType) {
+	return drawingType === DrawingTypeEnum.DRAWING_CHART || drawingType === DrawingTypeEnum.DRAWING_DOM || drawingType === DrawingTypeEnum.DRAWING_UNIT;
+}
+function getObjectListPanelSectionIdForDrawingType(drawingType) {
+	return isFloatingObjectListDrawingType(drawingType) ? OBJECT_LIST_FLOATING_SECTION_ID : OBJECT_LIST_CANVAS_SECTION_ID;
+}
+
+//#endregion
+//#region src/views/object-list-panel/ObjectListPanelBase.tsx
+const objectListPanelLabelKeys = {
+	title: "drawing-ui.objectListPanel.title",
+	empty: "drawing-ui.objectListPanel.empty",
+	showAll: "drawing-ui.objectListPanel.showAll",
+	hideAll: "drawing-ui.objectListPanel.hideAll",
+	moveForward: "drawing-ui.objectListPanel.moveForward",
+	moveBackward: "drawing-ui.objectListPanel.moveBackward",
+	close: "drawing-ui.objectListPanel.close",
+	show: "drawing-ui.objectListPanel.show",
+	hide: "drawing-ui.objectListPanel.hide",
+	lock: "drawing-ui.objectListPanel.lock",
+	unlock: "drawing-ui.objectListPanel.unlock",
+	name: "drawing-ui.objectListPanel.name",
+	nameInput: "drawing-ui.objectListPanel.nameInput",
+	description: "drawing-ui.objectListPanel.description",
+	descriptionPlaceholder: "drawing-ui.objectListPanel.descriptionPlaceholder",
+	details: "drawing-ui.objectListPanel.details",
+	noSelection: "drawing-ui.objectListPanel.noSelection",
+	locate: "drawing-ui.objectListPanel.locate",
+	expand: "drawing-ui.objectListPanel.expand",
+	collapse: "drawing-ui.objectListPanel.collapse",
+	dragToReorder: "drawing-ui.objectListPanel.dragToReorder",
+	search: "drawing-ui.objectListPanel.search",
+	filterAll: "drawing-ui.objectListPanel.filterAll",
+	filterHidden: "drawing-ui.objectListPanel.filterHidden",
+	filterLocked: "drawing-ui.objectListPanel.filterLocked",
+	sectionCanvas: "drawing-ui.objectListPanel.sectionCanvas",
+	sectionFloating: "drawing-ui.objectListPanel.sectionFloating"
+};
+function getObjectListPanelLabels(localeService) {
+	return Object.fromEntries(Object.entries(objectListPanelLabelKeys).map(([labelKey, localeKey]) => [labelKey, localeService.t(localeKey)]));
+}
+function getObjectListPanelTypeName(localeService, typeName) {
+	return localeService.t(`drawing-ui.objectListPanel.typeNames.${typeName}`);
+}
+const iconButtonClassName = `
+  univer-flex univer-size-7 univer-shrink-0 univer-items-center univer-justify-center univer-rounded-md
+  univer-border-0 univer-bg-transparent univer-p-0 univer-text-gray-500 univer-outline-none univer-transition-colors
+  hover:univer-bg-gray-100 hover:univer-text-gray-900
+  disabled:univer-cursor-not-allowed disabled:univer-opacity-40
+  dark:!univer-text-gray-300 dark:hover:!univer-bg-gray-800 dark:hover:!univer-text-gray-100
+`;
+const sectionOrder = /* @__PURE__ */ new Map([
+	[OBJECT_LIST_FLOATING_SECTION_ID, 0],
+	[OBJECT_LIST_CANVAS_SECTION_ID, 1],
+	["", 2]
+]);
+function normalizeText(value) {
+	return value.trim();
+}
+function hasCapability(panelCapabilities, item, key, fallback = true) {
+	var _ref, _item$capabilities$ke, _item$capabilities;
+	return (_ref = (_item$capabilities$ke = item === null || item === void 0 || (_item$capabilities = item.capabilities) === null || _item$capabilities === void 0 ? void 0 : _item$capabilities[key]) !== null && _item$capabilities$ke !== void 0 ? _item$capabilities$ke : panelCapabilities === null || panelCapabilities === void 0 ? void 0 : panelCapabilities[key]) !== null && _ref !== void 0 ? _ref : fallback;
+}
+function ObjectListPanelBase(props) {
+	var _selectedItem$canMove, _selectedItem$canMove2, _capabilities$reorder;
+	const { items, selectedIds, allObjectIds, focusedId, labels, showHeader = true, capabilities, onSelect, onSetVisible, onCommitName, onCommitDescription, onMoveForward, onMoveBackward, onToggleExpanded, onToggleSelectable, onLocate, onReorder } = props;
+	const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+	const [draggingId, setDraggingId] = useState(null);
+	const [searchQuery, setSearchQuery] = useState("");
+	const [filterMode, setFilterMode] = useState("all");
+	const [collapsedSectionIds, setCollapsedSectionIds] = useState(() => /* @__PURE__ */ new Set());
+	const selectedItem = useMemo(() => {
+		var _ref2, _items$find;
+		return (_ref2 = (_items$find = items.find((item) => item.id === focusedId)) !== null && _items$find !== void 0 ? _items$find : items.find((item) => selectedIdSet.has(item.id))) !== null && _ref2 !== void 0 ? _ref2 : null;
+	}, [
+		focusedId,
+		items,
+		selectedIdSet
+	]);
+	const visibleItems = useMemo(() => {
+		const normalizedQuery = normalizeText(searchQuery).toLocaleLowerCase();
+		return items.filter((item) => {
+			var _item$description;
+			if (filterMode === "hidden" && item.visible !== false) return false;
+			if (filterMode === "locked" && item.selectable !== false) return false;
+			if (!normalizedQuery) return true;
+			return item.name.toLocaleLowerCase().includes(normalizedQuery) || ((_item$description = item.description) !== null && _item$description !== void 0 ? _item$description : "").toLocaleLowerCase().includes(normalizedQuery);
+		});
+	}, [
+		filterMode,
+		items,
+		searchQuery
+	]);
+	const visibleItemSections = useMemo(() => {
+		const sectionMap = /* @__PURE__ */ new Map();
+		visibleItems.forEach((item) => {
+			var _item$sectionId, _item$sectionTitle;
+			const sectionId = (_item$sectionId = item.sectionId) !== null && _item$sectionId !== void 0 ? _item$sectionId : "";
+			const existingSection = sectionMap.get(sectionId);
+			if (existingSection) {
+				existingSection.items.push(item);
+				return;
+			}
+			sectionMap.set(sectionId, {
+				id: sectionId,
+				title: (_item$sectionTitle = item.sectionTitle) !== null && _item$sectionTitle !== void 0 ? _item$sectionTitle : "",
+				items: [item]
+			});
+		});
+		return [...sectionMap.values()].sort((a, b) => {
+			var _sectionOrder$get, _sectionOrder$get2;
+			return ((_sectionOrder$get = sectionOrder.get(a.id)) !== null && _sectionOrder$get !== void 0 ? _sectionOrder$get : 3) - ((_sectionOrder$get2 = sectionOrder.get(b.id)) !== null && _sectionOrder$get2 !== void 0 ? _sectionOrder$get2 : 3);
+		});
+	}, [visibleItems]);
+	const showSectionHeaders = visibleItemSections.length > 1 || visibleItemSections.some((section) => section.id === "floating");
+	const allIds = useMemo(() => allObjectIds !== null && allObjectIds !== void 0 ? allObjectIds : items.map((item) => item.id), [allObjectIds, items]);
+	const selectedIndex = selectedItem ? items.findIndex((item) => item.id === selectedItem.id) : -1;
+	const canMoveForward = !!selectedItem && !!onMoveForward && !selectedItem.disabled && ((_selectedItem$canMove = selectedItem.canMoveForward) !== null && _selectedItem$canMove !== void 0 ? _selectedItem$canMove : selectedIndex > 0) && hasCapability(capabilities, selectedItem, "arrange");
+	const canMoveBackward = !!selectedItem && !!onMoveBackward && !selectedItem.disabled && ((_selectedItem$canMove2 = selectedItem.canMoveBackward) !== null && _selectedItem$canMove2 !== void 0 ? _selectedItem$canMove2 : selectedIndex >= 0 && selectedIndex < items.length - 1) && hasCapability(capabilities, selectedItem, "arrange");
+	const showArrangeControls = hasCapability(capabilities, selectedItem, "arrange") && (!!onMoveForward || !!onMoveBackward);
+	const showLocateControl = !!onLocate && hasCapability(capabilities, selectedItem, "locate");
+	const canReorder = !!onReorder && ((_capabilities$reorder = capabilities === null || capabilities === void 0 ? void 0 : capabilities.reorder) !== null && _capabilities$reorder !== void 0 ? _capabilities$reorder : true);
+	const findItem = (objectId) => {
+		var _items$find2;
+		return objectId ? (_items$find2 = items.find((item) => item.id === objectId)) !== null && _items$find2 !== void 0 ? _items$find2 : null : null;
+	};
+	const handleDrop = (targetId) => {
+		var _source$parentId, _target$parentId, _source$sectionId, _target$sectionId;
+		const source = findItem(draggingId);
+		const target = findItem(targetId);
+		setDraggingId(null);
+		if (!source || !target || source.id === target.id || source.disabled || target.disabled) return;
+		if (((_source$parentId = source.parentId) !== null && _source$parentId !== void 0 ? _source$parentId : "") !== ((_target$parentId = target.parentId) !== null && _target$parentId !== void 0 ? _target$parentId : "")) return;
+		if (((_source$sectionId = source.sectionId) !== null && _source$sectionId !== void 0 ? _source$sectionId : "") !== ((_target$sectionId = target.sectionId) !== null && _target$sectionId !== void 0 ? _target$sectionId : "")) return;
+		if (source.canReorder === false || target.canReorder === false) return;
+		onReorder === null || onReorder === void 0 || onReorder(source.id, target.id);
+	};
+	const toggleSectionCollapsed = (sectionId) => {
+		if (!sectionId) return;
+		setCollapsedSectionIds((current) => {
+			const next = new Set(current);
+			if (next.has(sectionId)) next.delete(sectionId);
+			else next.add(sectionId);
+			return next;
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "univer-box-border univer-flex univer-size-full univer-min-w-0 univer-max-w-full univer-flex-col univer-gap-3 univer-overflow-hidden univer-text-gray-700 dark:!univer-text-gray-200",
+		"data-drawing-object-list-panel": "true",
+		children: [
+			showHeader && /* @__PURE__ */ jsx("div", {
+				className: "univer-flex univer-h-8 univer-shrink-0 univer-items-center univer-gap-2",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "univer-min-w-0 univer-flex-1 univer-truncate univer-text-sm univer-font-semibold univer-text-gray-900 dark:!univer-text-gray-100",
+					children: labels.title
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "univer-flex univer-min-w-0 univer-items-center univer-justify-between univer-gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "univer-flex univer-min-w-0 univer-gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						size: "small",
+						disabled: items.length === 0,
+						onClick: () => onSetVisible(allIds, true),
+						children: labels.showAll
+					}), /* @__PURE__ */ jsx(Button, {
+						size: "small",
+						disabled: items.length === 0,
+						onClick: () => onSetVisible(allIds, false),
+						children: labels.hideAll
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "univer-flex univer-shrink-0 univer-gap-1",
+					children: [showLocateControl && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: iconButtonClassName,
+						title: labels.locate,
+						"aria-label": labels.locate,
+						disabled: !(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id),
+						onClick: () => selectedItem && (onLocate === null || onLocate === void 0 ? void 0 : onLocate(selectedItem.id)),
+						children: /* @__PURE__ */ jsx(LocateFixedIcon, {})
+					}), showArrangeControls && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: iconButtonClassName,
+						title: labels.moveForward,
+						"aria-label": labels.moveForward,
+						disabled: !canMoveForward,
+						onClick: () => selectedItem && (onMoveForward === null || onMoveForward === void 0 ? void 0 : onMoveForward(selectedItem.id)),
+						children: /* @__PURE__ */ jsx(ArrowUpIcon, {})
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: iconButtonClassName,
+						title: labels.moveBackward,
+						"aria-label": labels.moveBackward,
+						disabled: !canMoveBackward,
+						onClick: () => selectedItem && (onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward(selectedItem.id)),
+						children: /* @__PURE__ */ jsx(ArrowDownIcon, {})
+					})] })]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "univer-flex univer-shrink-0 univer-flex-col univer-gap-2",
+				children: [/* @__PURE__ */ jsx(Input, {
+					value: searchQuery,
+					"aria-label": labels.search,
+					placeholder: labels.search,
+					onChange: setSearchQuery
+				}), /* @__PURE__ */ jsx("div", {
+					className: "univer-flex univer-min-w-0 univer-gap-1",
+					children: [
+						["all", labels.filterAll],
+						["hidden", labels.filterHidden],
+						["locked", labels.filterLocked]
+					].map(([mode, label]) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: clsx("univer-h-7 univer-min-w-0 univer-flex-1 univer-rounded-md univer-border univer-border-solid univer-px-2 univer-text-xs univer-outline-none univer-transition-colors dark:!univer-border-gray-700", filterMode === mode ? "dark:!univer-bg-primary-900/30 univer-border-primary-500 univer-bg-primary-50 univer-text-primary-600 dark:!univer-text-primary-200" : "univer-border-gray-200 univer-bg-white univer-text-gray-600 hover:univer-bg-gray-50 dark:!univer-bg-gray-900 dark:!univer-text-gray-300 dark:hover:!univer-bg-gray-800"),
+						"aria-pressed": filterMode === mode,
+						onClick: () => setFilterMode(mode),
+						children: /* @__PURE__ */ jsx("span", {
+							className: "univer-block univer-truncate",
+							children: label
+						})
+					}, mode))
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "univer-min-h-0 univer-flex-1 univer-overflow-y-auto univer-overflow-x-hidden",
+				children: visibleItems.length === 0 ? /* @__PURE__ */ jsx("div", {
+					className: "univer-py-6 univer-text-center univer-text-sm univer-text-gray-500",
+					children: labels.empty
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "univer-flex univer-min-w-0 univer-flex-col univer-gap-0.5",
+					children: visibleItemSections.map((section) => /* @__PURE__ */ jsxs("div", {
+						className: "univer-flex univer-min-w-0 univer-flex-col univer-gap-0.5",
+						children: [showSectionHeaders && section.title && (() => {
+							const sectionCollapsed = !!section.id && collapsedSectionIds.has(section.id);
+							return /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								className: "univer-box-border univer-flex univer-h-7 univer-w-full univer-items-center univer-gap-1 univer-rounded-md univer-border-0 univer-bg-transparent univer-px-2 univer-pt-1 univer-text-xs univer-font-semibold univer-uppercase univer-text-gray-400 univer-outline-none hover:univer-bg-gray-50 hover:univer-text-gray-600 disabled:univer-cursor-default disabled:hover:univer-bg-transparent dark:!univer-text-gray-500 dark:hover:!univer-bg-gray-800 dark:hover:!univer-text-gray-300",
+								"aria-label": sectionCollapsed ? labels.expand : labels.collapse,
+								disabled: !section.id,
+								onClick: () => toggleSectionCollapsed(section.id),
+								children: [
+									section.id ? /* @__PURE__ */ jsx("span", {
+										className: "univer-flex univer-size-4 univer-shrink-0 univer-items-center univer-justify-center",
+										children: sectionCollapsed ? /* @__PURE__ */ jsx(MoreRightIcon, {}) : /* @__PURE__ */ jsx(MoreDownIcon, {})
+									}) : /* @__PURE__ */ jsx("span", { className: "univer-size-4 univer-shrink-0" }),
+									/* @__PURE__ */ jsx("span", {
+										className: "univer-min-w-0 univer-flex-1 univer-truncate univer-text-left",
+										children: section.title
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "univer-shrink-0 univer-text-[10px] univer-font-medium univer-text-gray-400 dark:!univer-text-gray-500",
+										children: section.items.length
+									})
+								]
+							});
+						})(), (!section.id || !collapsedSectionIds.has(section.id)) && section.items.map((item) => /* @__PURE__ */ jsx(ObjectListRow, {
+							item,
+							selected: selectedIdSet.has(item.id),
+							labels,
+							showLock: !!onToggleSelectable && hasCapability(capabilities, item, "selectable"),
+							showName: hasCapability(capabilities, item, "name"),
+							showVisible: hasCapability(capabilities, item, "visible"),
+							draggable: canReorder && hasCapability(capabilities, item, "reorder") && !item.disabled && item.canReorder !== false,
+							dragging: draggingId === item.id,
+							onSelect: (multiSelect) => onSelect(item.id, multiSelect),
+							onToggleExpanded: () => onToggleExpanded === null || onToggleExpanded === void 0 ? void 0 : onToggleExpanded(item.id),
+							onToggleVisible: () => onSetVisible([item.id], !item.visible),
+							onToggleSelectable: () => onToggleSelectable === null || onToggleSelectable === void 0 ? void 0 : onToggleSelectable(item.id),
+							onCommitName: (value) => onCommitName(item.id, value),
+							onDragStart: () => setDraggingId(item.id),
+							onDragEnd: () => setDraggingId(null),
+							onDrop: () => handleDrop(item.id)
+						}, item.id))]
+					}, section.id || "default"))
+				})
+			}),
+			/* @__PURE__ */ jsx(ObjectDetailsEditor, {
+				item: selectedItem,
+				labels,
+				showName: hasCapability(capabilities, selectedItem, "name"),
+				showDescription: hasCapability(capabilities, selectedItem, "description"),
+				onCommitName: (value) => selectedItem && onCommitName(selectedItem.id, value),
+				onCommitDescription: (value) => selectedItem && onCommitDescription(selectedItem.id, value)
+			})
+		]
+	});
+}
+function ObjectListRow(props) {
+	var _item$level;
+	const { item, selected, labels, showLock, showName, showVisible, draggable, dragging, onSelect, onToggleExpanded, onToggleVisible, onToggleSelectable, onCommitName, onDragStart, onDragEnd, onDrop } = props;
+	const [draftName, setDraftName] = useState(item.name);
+	const skipCommitOnBlurRef = useRef(false);
+	const disabled = item.disabled === true;
+	const level = (_item$level = item.level) !== null && _item$level !== void 0 ? _item$level : 0;
+	const locked = item.selectable === false;
+	useEffect(() => {
+		setDraftName(item.name);
+	}, [item.name]);
+	const handleBlur = (event) => {
+		if (disabled) return;
+		if (skipCommitOnBlurRef.current) {
+			skipCommitOnBlurRef.current = false;
+			return;
+		}
+		if (event.currentTarget.value !== item.name) onCommitName(event.currentTarget.value);
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter") {
+			event.currentTarget.blur();
+			return;
+		}
+		if (event.key === "Escape") {
+			skipCommitOnBlurRef.current = true;
+			setDraftName(item.name);
+			event.currentTarget.blur();
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("univer-box-border univer-flex univer-h-8 univer-w-full univer-min-w-0 univer-max-w-full univer-items-center univer-gap-1.5 univer-overflow-hidden univer-rounded-md univer-pr-1.5 univer-transition-colors", !disabled && "hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-800", selected && "univer-bg-gray-100 dark:!univer-bg-gray-800", disabled && "univer-text-gray-400 dark:!univer-text-gray-500", dragging && "univer-opacity-50"),
+		style: { paddingLeft: level * 14 + 4 },
+		draggable,
+		title: draggable ? labels.dragToReorder : void 0,
+		onClick: disabled ? void 0 : (event) => onSelect(event.ctrlKey || event.metaKey),
+		onDragStart: (event) => {
+			if (!draggable) {
+				event.preventDefault();
+				return;
+			}
+			event.dataTransfer.effectAllowed = "move";
+			event.dataTransfer.setData("text/plain", item.id);
+			onDragStart();
+		},
+		onDragEnd,
+		onDragOver: (event) => {
+			if (draggable) {
+				event.preventDefault();
+				event.dataTransfer.dropEffect = "move";
+			}
+		},
+		onDrop: (event) => {
+			event.preventDefault();
+			onDrop();
+		},
+		children: [
+			item.isGroup ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "univer-flex univer-size-5 univer-shrink-0 univer-items-center univer-justify-center univer-rounded univer-border-0 univer-bg-transparent univer-p-0 univer-text-gray-500 univer-outline-none univer-transition-transform hover:univer-bg-gray-100 hover:univer-text-gray-900 dark:!univer-text-gray-300 dark:hover:!univer-bg-gray-800 dark:hover:!univer-text-gray-100",
+				title: item.expanded ? labels.collapse : labels.expand,
+				"aria-label": item.expanded ? labels.collapse : labels.expand,
+				onClick: (event) => {
+					event.stopPropagation();
+					onToggleExpanded();
+				},
+				children: item.expanded ? /* @__PURE__ */ jsx(MoreDownIcon, {}) : /* @__PURE__ */ jsx(MoreRightIcon, {})
+			}) : /* @__PURE__ */ jsx("span", { className: "univer-size-5 univer-shrink-0" }),
+			showName ? /* @__PURE__ */ jsx(Input, {
+				className: clsx("univer-h-7 univer-w-0 univer-min-w-0 univer-flex-1", disabled && "univer-cursor-not-allowed"),
+				inputClass: clsx("!univer-h-7 univer-min-w-0 univer-overflow-hidden univer-text-ellipsis univer-whitespace-nowrap !univer-rounded !univer-border-transparent !univer-bg-transparent !univer-px-1 univer-text-sm univer-text-gray-900 !univer-shadow-none focus:!univer-border-primary-500 focus:!univer-bg-white focus:!univer-ring-1 focus:!univer-ring-primary-100 disabled:!univer-bg-transparent disabled:univer-opacity-100 dark:!univer-text-gray-100 dark:focus:!univer-bg-gray-900 dark:focus:!univer-ring-primary-900", disabled && "univer-text-gray-400 dark:!univer-text-gray-500"),
+				inputStyle: {
+					maxWidth: "100%",
+					boxSizing: "border-box"
+				},
+				value: draftName,
+				disabled,
+				"aria-label": labels.nameInput,
+				onChange: setDraftName,
+				onBlur: handleBlur,
+				onKeyDown: handleKeyDown,
+				onClick: (event) => {
+					event.stopPropagation();
+					if (!disabled) onSelect(event.ctrlKey || event.metaKey);
+				}
+			}, item.name) : /* @__PURE__ */ jsx("span", {
+				className: "univer-min-w-0 univer-flex-1 univer-truncate univer-px-1 univer-text-sm",
+				children: item.name
+			}),
+			showLock && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: clsx(iconButtonClassName, !locked && "univer-opacity-70"),
+				disabled,
+				title: locked ? labels.unlock : labels.lock,
+				"aria-label": locked ? labels.unlock : labels.lock,
+				onClick: (event) => {
+					event.stopPropagation();
+					onToggleSelectable();
+				},
+				children: /* @__PURE__ */ jsx(LockIcon, {})
+			}),
+			showVisible && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: iconButtonClassName,
+				disabled,
+				title: item.visible ? labels.hide : labels.show,
+				"aria-label": item.visible ? labels.hide : labels.show,
+				onClick: (event) => {
+					event.stopPropagation();
+					onToggleVisible();
+				},
+				children: item.visible ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyelashIcon, {})
+			})
+		]
+	});
+}
+function ObjectDetailsEditor(props) {
+	var _item$name, _item$description2;
+	const { item, labels, showName, showDescription, onCommitName, onCommitDescription } = props;
+	const [draftName, setDraftName] = useState((_item$name = item === null || item === void 0 ? void 0 : item.name) !== null && _item$name !== void 0 ? _item$name : "");
+	const [draftDescription, setDraftDescription] = useState((_item$description2 = item === null || item === void 0 ? void 0 : item.description) !== null && _item$description2 !== void 0 ? _item$description2 : "");
+	const disabled = (item === null || item === void 0 ? void 0 : item.disabled) === true;
+	useEffect(() => {
+		var _item$name2, _item$description3;
+		setDraftName((_item$name2 = item === null || item === void 0 ? void 0 : item.name) !== null && _item$name2 !== void 0 ? _item$name2 : "");
+		setDraftDescription((_item$description3 = item === null || item === void 0 ? void 0 : item.description) !== null && _item$description3 !== void 0 ? _item$description3 : "");
+	}, [
+		item === null || item === void 0 ? void 0 : item.description,
+		item === null || item === void 0 ? void 0 : item.id,
+		item === null || item === void 0 ? void 0 : item.name
+	]);
+	if (!item) return /* @__PURE__ */ jsx("div", {
+		className: "univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-p-3 univer-text-sm univer-text-gray-500 dark:!univer-border-gray-700 dark:!univer-text-gray-400",
+		children: labels.noSelection
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "univer-flex univer-shrink-0 univer-flex-col univer-gap-2 univer-border-0 univer-border-t univer-border-solid univer-border-gray-200 univer-pt-3 dark:!univer-border-gray-700",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "univer-text-xs univer-font-semibold univer-uppercase univer-text-gray-500 dark:!univer-text-gray-400",
+				children: labels.details
+			}),
+			showName && /* @__PURE__ */ jsxs("label", {
+				className: "univer-flex univer-flex-col univer-gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "univer-text-xs univer-text-gray-500 dark:!univer-text-gray-400",
+					children: labels.name
+				}), /* @__PURE__ */ jsx(Input, {
+					value: draftName,
+					"aria-label": labels.nameInput,
+					disabled,
+					onChange: setDraftName,
+					onBlur: () => {
+						if (!disabled && normalizeText(draftName) !== item.name) onCommitName(draftName);
+					},
+					onKeyDown: (event) => {
+						if (event.key === "Enter") event.currentTarget.blur();
+					}
+				})]
+			}),
+			showDescription && /* @__PURE__ */ jsxs("label", {
+				className: "univer-flex univer-flex-col univer-gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "univer-text-xs univer-text-gray-500 dark:!univer-text-gray-400",
+					children: labels.description
+				}), /* @__PURE__ */ jsx("textarea", {
+					className: "univer-box-border univer-min-h-16 univer-w-full univer-resize-none univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-p-2 univer-text-sm univer-text-gray-900 univer-outline-none focus:univer-border-primary-500 focus:univer-ring-1 focus:univer-ring-primary-100 disabled:univer-cursor-not-allowed disabled:univer-opacity-70 dark:!univer-border-gray-700 dark:!univer-bg-gray-900 dark:!univer-text-gray-100 dark:focus:!univer-ring-primary-900",
+					value: draftDescription,
+					disabled,
+					placeholder: labels.descriptionPlaceholder,
+					"aria-label": labels.description,
+					onChange: (event) => setDraftDescription(event.currentTarget.value),
+					onBlur: () => {
+						var _item$description4;
+						if (!disabled && normalizeText(draftDescription) !== ((_item$description4 = item.description) !== null && _item$description4 !== void 0 ? _item$description4 : "")) onCommitDescription(draftDescription);
+					}
+				})]
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/views/panel/DrawingAlign.tsx
 const DrawingAlign = (props) => {
@@ -3194,4 +3717,4 @@ const DrawingCommonPanel = (props) => {
 };
 
 //#endregion
-export { AutoImageCropOperation, COMPONENT_IMAGE_POPUP_MENU, CancelDrawingGroupOperation, CloseImageCropOperation, DRAWING_GROUP_TYPES, DrawingCommonPanel, DrawingImageClipService, DrawingRenderService, IMAGE_CLIP_SHAPE_PICKER_COMPONENT, ImageCropperObject, ImageResetSizeOperation, OpenImageCropOperation, SetDrawingAlignOperation, SetDrawingArrangeOperation, SetDrawingGroupOperation, UniverDrawingUIPlugin, 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 };