@univerjs/sheets-drawing-ui 0.25.1 → 1.0.0-alpha.1

package/lib/cjs/index.js

@@ -10,9 +10,9 @@ let _univerjs_sheets_ui = require("@univerjs/sheets-ui");
 let _univerjs_ui = require("@univerjs/ui");
 let _univerjs_docs_drawing = require("@univerjs/docs-drawing");
 let _univerjs_drawing_ui = require("@univerjs/drawing-ui");
-let rxjs = require("rxjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let rxjs = require("rxjs");
 
 //#region src/commands/commands/delete-drawings.command.ts
 const DeleteDrawingsCommand = {
@@ -292,7 +292,7 @@ const UngroupSheetDrawingCommand = {
 };
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
+//#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) {
@@ -303,7 +303,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPrimitive.js
+//#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];
@@ -316,14 +316,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/defineProperty.js
+//#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,
@@ -334,7 +334,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -342,7 +342,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
+//#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);
@@ -1660,27 +1660,27 @@ function ImageMenuFactory(accessor) {
 		})
 	};
 }
-function UploadFloatImageMenuFactory(_accessor) {
+function UploadFloatImageMenuFactory(accessor) {
 	return {
 		id: InsertFloatImageCommand.id,
 		title: "sheets-drawing-ui.upload.float",
 		type: _univerjs_ui.MenuItemType.BUTTON,
-		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(_accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET)
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET)
 	};
 }
-function UploadCellImageMenuFactory(_accessor) {
+function UploadCellImageMenuFactory(accessor) {
 	return {
 		id: InsertCellImageCommand.id,
 		title: "sheets-drawing-ui.upload.cell",
 		type: _univerjs_ui.MenuItemType.BUTTON,
-		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(_accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET)
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET)
 	};
 }
 
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-drawing-ui";
-var version = "0.25.1";
+var version = "1.0.0-alpha.1";
 
 //#endregion
 //#region src/config/config.ts
@@ -1688,6 +1688,282 @@ const SHEETS_DRAWING_UI_PLUGIN_CONFIG_KEY = "sheets-drawing-ui.config";
 const configSymbol = Symbol(SHEETS_DRAWING_UI_PLUGIN_CONFIG_KEY);
 const defaultPluginConfig = {};
 
+//#endregion
+//#region src/views/batch-save-images/BatchSaveImagesDialog.tsx
+function BatchSaveImagesDialog() {
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const dialogService = (0, _univerjs_ui.useDependency)(_univerjs_ui.IDialogService);
+	const batchSaveService = (0, _univerjs_ui.useDependency)(IBatchSaveImagesService);
+	const [fileNameParts, setFileNameParts] = (0, react.useState)(["cellAddress"]);
+	const [saving, setSaving] = (0, react.useState)(false);
+	const [error, setError] = (0, react.useState)(null);
+	const images = (0, react.useMemo)(() => batchSaveService.getCellImagesInSelection(), [batchSaveService]);
+	const dataColumns = (0, react.useMemo)(() => batchSaveService.getDataColumns(), [batchSaveService]);
+	const rowRange = (0, react.useMemo)(() => batchSaveService.getSelectionRowRange(), [batchSaveService]);
+	const hasAvailableColumns = dataColumns.length > 0;
+	const columnOptions = (0, react.useMemo)(() => {
+		return dataColumns.map((col) => ({
+			label: col.label,
+			value: String(col.index)
+		}));
+	}, [dataColumns]);
+	const [selectedColumn, setSelectedColumn] = (0, react.useState)(() => columnOptions.length > 0 ? columnOptions[0].value : "0");
+	(0, _univerjs_sheets_ui.useHighlightRange)((0, react.useMemo)(() => {
+		if (!fileNameParts.includes("columnValue") || !rowRange) return [];
+		const colIndex = Number(selectedColumn);
+		return [{
+			startRow: rowRange.startRow,
+			endRow: rowRange.endRow,
+			startColumn: colIndex,
+			endColumn: colIndex
+		}];
+	}, [
+		fileNameParts,
+		selectedColumn,
+		rowRange
+	]));
+	const handleFileNamePartsChange = (0, react.useCallback)((value) => {
+		if (value.length === 0) return;
+		setFileNameParts(value);
+	}, []);
+	const handleColumnChange = (0, react.useCallback)((value) => {
+		setSelectedColumn(String(value));
+	}, []);
+	const handleCancel = (0, react.useCallback)(() => {
+		dialogService.close(BATCH_SAVE_IMAGES_DIALOG_ID);
+	}, [dialogService]);
+	const handleConfirm = (0, react.useCallback)(async () => {
+		if (images.length === 0) return;
+		setSaving(true);
+		setError(null);
+		try {
+			await batchSaveService.saveImages(images, {
+				fileNameParts,
+				columnIndex: fileNameParts.includes("columnValue") ? Number(selectedColumn) : void 0
+			});
+			dialogService.close(BATCH_SAVE_IMAGES_DIALOG_ID);
+		} catch (err) {
+			console.error("Failed to save images:", err);
+			setError(localeService.t("sheets-drawing-ui.save.error"));
+		} finally {
+			setSaving(false);
+		}
+	}, [
+		batchSaveService,
+		images,
+		fileNameParts,
+		selectedColumn,
+		dialogService,
+		localeService
+	]);
+	const showColumnSelect = fileNameParts.includes("columnValue");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-flex univer-flex-col",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.FormLayout, {
+				label: localeService.t("sheets-drawing-ui.save.imageCount"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-text-sm univer-text-gray-600",
+					children: images.length
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.FormLayout, {
+				label: localeService.t("sheets-drawing-ui.save.fileNameConfig"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.CheckboxGroup, {
+					value: fileNameParts,
+					onChange: handleFileNamePartsChange,
+					direction: "vertical",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
+						value: "cellAddress",
+						disabled: !hasAvailableColumns,
+						children: localeService.t("sheets-drawing-ui.save.useRowCol")
+					}), hasAvailableColumns && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
+						value: "columnValue",
+						children: localeService.t("sheets-drawing-ui.save.useColumnValue")
+					})]
+				})
+			}),
+			showColumnSelect && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.FormLayout, {
+				label: localeService.t("sheets-drawing-ui.save.selectColumn"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
+					value: selectedColumn,
+					options: columnOptions,
+					onChange: handleColumnChange
+				})
+			}),
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-text-xs univer-text-red-500",
+				children: error
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-flex univer-justify-end univer-gap-2 univer-border-t univer-border-gray-200 univer-pt-3",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+					onClick: handleCancel,
+					disabled: saving,
+					children: localeService.t("sheets-drawing-ui.save.cancel")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+					variant: "primary",
+					onClick: handleConfirm,
+					disabled: saving || images.length === 0,
+					children: saving ? localeService.t("sheets-drawing-ui.save.saving") : localeService.t("sheets-drawing-ui.save.confirm")
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/views/sheet-image-panel/SheetDrawingAnchor.tsx
+const SheetDrawingAnchor = (props) => {
+	var _drawingParam$anchorT;
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const drawingManagerService = (0, _univerjs_ui.useDependency)(_univerjs_drawing.IDrawingManagerService);
+	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService);
+	const { drawings } = props;
+	const drawingParam = drawings[0];
+	if (drawingParam == null) return;
+	const { unitId } = drawingParam;
+	const renderObject = renderManagerService.getRenderById(unitId);
+	const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+	if (scene == null) return;
+	const transformer = scene.getTransformerByCreate();
+	const [anchorShow, setAnchorShow] = (0, react.useState)(true);
+	const [value, setValue] = (0, react.useState)((_drawingParam$anchorT = drawingParam.anchorType) !== null && _drawingParam$anchorT !== void 0 ? _drawingParam$anchorT : _univerjs_sheets_drawing.SheetDrawingAnchorType.Position);
+	function getUpdateParams(objects, drawingManagerService) {
+		const params = [];
+		objects.forEach((object) => {
+			const { oKey } = object;
+			const searchParam = drawingManagerService.getDrawingOKey(oKey);
+			if (searchParam == null) {
+				params.push(null);
+				return true;
+			}
+			const { unitId, subUnitId, drawingId, drawingType, anchorType, sheetTransform, axisAlignSheetTransform } = searchParam;
+			params.push({
+				unitId,
+				subUnitId,
+				drawingId,
+				anchorType,
+				sheetTransform,
+				drawingType,
+				axisAlignSheetTransform
+			});
+		});
+		return params;
+	}
+	(0, react.useEffect)(() => {
+		const onClearControlObserver = transformer.clearControl$.subscribe((changeSelf) => {
+			if (changeSelf === true) setAnchorShow(false);
+		});
+		const onChangeStartObserver = transformer.changeStart$.subscribe((state) => {
+			const { objects } = state;
+			const params = getUpdateParams(objects, drawingManagerService);
+			if (params.length === 0) setAnchorShow(false);
+			else if (params.length >= 1) {
+				var _params$;
+				setAnchorShow(true);
+				setValue(((_params$ = params[0]) === null || _params$ === void 0 ? void 0 : _params$.anchorType) || _univerjs_sheets_drawing.SheetDrawingAnchorType.Position);
+			}
+		});
+		return () => {
+			onChangeStartObserver.unsubscribe();
+			onClearControlObserver.unsubscribe();
+		};
+	}, []);
+	function handleChange(value) {
+		setValue(value);
+		const focusDrawings = drawingManagerService.getFocusDrawings();
+		if (focusDrawings.length === 0) return;
+		const updateParams = focusDrawings.map((drawing) => {
+			return {
+				unitId: drawing.unitId,
+				subUnitId: drawing.subUnitId,
+				drawingId: drawing.drawingId,
+				anchorType: value
+			};
+		});
+		commandService.executeCommand(_univerjs_sheets_drawing.SetSheetDrawingCommand.id, {
+			unitId: focusDrawings[0].unitId,
+			drawings: updateParams
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _univerjs_design.clsx)("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": !anchorShow }),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+			className: "univer-text-gray-600 dark:!univer-text-gray-200",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("sheets-drawing-ui.drawing-anchor.title") })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.RadioGroup, {
+			value,
+			onChange: handleChange,
+			direction: "vertical",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
+					value: _univerjs_sheets_drawing.SheetDrawingAnchorType.Both,
+					children: localeService.t("sheets-drawing-ui.drawing-anchor.both")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
+					value: _univerjs_sheets_drawing.SheetDrawingAnchorType.Position,
+					children: localeService.t("sheets-drawing-ui.drawing-anchor.position")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
+					value: _univerjs_sheets_drawing.SheetDrawingAnchorType.None,
+					children: localeService.t("sheets-drawing-ui.drawing-anchor.none")
+				})
+			]
+		}) })]
+	});
+};
+
+//#endregion
+//#region src/views/sheet-image-panel/SheetDrawingPanel.tsx
+const SheetDrawingPanel = () => {
+	const drawingManagerService = (0, _univerjs_ui.useDependency)(_univerjs_drawing.IDrawingManagerService);
+	const [drawings, setDrawings] = (0, react.useState)(drawingManagerService.getFocusDrawings());
+	(0, react.useEffect)(() => {
+		const focusDispose = drawingManagerService.focus$.subscribe((drawings) => {
+			setDrawings(drawings);
+		});
+		return () => {
+			focusDispose.unsubscribe();
+		};
+	}, []);
+	return !!(drawings === null || drawings === void 0 ? void 0 : drawings.length) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-text-sm",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_drawing_ui.DrawingCommonPanel, { drawings }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetDrawingAnchor, { drawings })]
+	});
+};
+
+//#endregion
+//#region src/controllers/components.controller.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+let ComponentsController = class ComponentsController extends _univerjs_core.Disposable {
+	constructor(_componentManager) {
+		super();
+		this._componentManager = _componentManager;
+		this._registerComponents();
+	}
+	_registerComponents() {
+		this.disposeWithMe(this._componentManager.register(COMPONENT_SHEET_DRAWING_PANEL, SheetDrawingPanel));
+		this.disposeWithMe(this._componentManager.register(BATCH_SAVE_IMAGES_DIALOG_ID, BatchSaveImagesDialog));
+	}
+};
+ComponentsController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager))], ComponentsController);
+
 //#endregion
 //#region src/controllers/drawing-context-menu.controller.ts
 let DrawingContextMenuController = class DrawingContextMenuController extends _univerjs_core.RxDisposable {
@@ -1745,12 +2021,21 @@ let SheetCellImageHoverRenderController = class SheetCellImageHoverRenderControl
 	}
 	_initHover() {
 		this.disposeWithMe(this._hoverManagerService.currentRichTextNoDistinct$.pipe((0, rxjs.throttleTime)(33)).subscribe((richText) => {
-			var _currentSelections$0$, _currentSelections$0$2;
 			let currentSelections = [];
 			if (richText !== null) currentSelections = this._selectionsService.getWorkbookSelections(this._context.unitId).getCurrentSelections();
-			if (currentSelections.length > 0 && (richText === null || richText === void 0 ? void 0 : richText.unitId) === this._context.unitId && (richText === null || richText === void 0 ? void 0 : richText.drawing) && currentSelections.length === 1 && ((_currentSelections$0$ = currentSelections[0].primary) === null || _currentSelections$0$ === void 0 ? void 0 : _currentSelections$0$.actualRow) === richText.row && ((_currentSelections$0$2 = currentSelections[0].primary) === null || _currentSelections$0$2 === void 0 ? void 0 : _currentSelections$0$2.actualColumn) === richText.col) {
-				this._isSetCursor = true;
-				this._context.scene.setCursor(_univerjs_engine_render.CURSOR_TYPE.ZOOM_IN);
+			if ((richText === null || richText === void 0 ? void 0 : richText.unitId) === this._context.unitId && (richText === null || richText === void 0 ? void 0 : richText.drawing) && currentSelections.length === 1 && currentSelections[0].primary) {
+				const { row, col } = richText;
+				const { actualRow, actualColumn, startRow, startColumn, endRow, endColumn, isMerged, isMergedMainCell } = currentSelections[0].primary;
+				if ((isMerged || isMergedMainCell) && row >= startRow && row <= endRow && col >= startColumn && col <= endColumn) {
+					this._isSetCursor = true;
+					this._context.scene.setCursor(_univerjs_engine_render.CURSOR_TYPE.ZOOM_IN);
+				} else if (row === actualRow && col === actualColumn) {
+					this._isSetCursor = true;
+					this._context.scene.setCursor(_univerjs_engine_render.CURSOR_TYPE.ZOOM_IN);
+				} else if (this._isSetCursor) {
+					this._isSetCursor = false;
+					this._context.scene.resetCursor();
+				}
 			} else if (this._isSetCursor) {
 				this._isSetCursor = false;
 				this._context.scene.resetCursor();
@@ -1843,9 +2128,8 @@ function resizeImageByCell(injector, location, cell) {
 	return false;
 }
 let SheetCellImageController = class SheetCellImageController extends _univerjs_core.Disposable {
-	constructor(_commandService, _sheetInterceptorService, _injector, _drawingManagerService, _docDrawingController, _editorBridgeService) {
+	constructor(_sheetInterceptorService, _injector, _drawingManagerService, _docDrawingController, _editorBridgeService) {
 		super();
-		this._commandService = _commandService;
 		this._sheetInterceptorService = _sheetInterceptorService;
 		this._injector = _injector;
 		this._drawingManagerService = _drawingManagerService;
@@ -1863,15 +2147,6 @@ let SheetCellImageController = class SheetCellImageController extends _univerjs_
 				this._drawingManagerService.initializeNotification(_univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY);
 			}
 		}));
-		this.disposeWithMe(this._commandService.onCommandExecuted((commandInfo) => {
-			if (commandInfo.id === _univerjs_docs_ui.ReplaceSnapshotCommand.id) {
-				if (commandInfo.params.unitId === _univerjs_core.DOCS_ZEN_EDITOR_UNIT_ID_KEY) {
-					this._drawingManagerService.removeDrawingDataForUnit(_univerjs_core.DOCS_ZEN_EDITOR_UNIT_ID_KEY);
-					this._docDrawingController.loadDrawingDataForUnit(_univerjs_core.DOCS_ZEN_EDITOR_UNIT_ID_KEY);
-					this._drawingManagerService.initializeNotification(_univerjs_core.DOCS_ZEN_EDITOR_UNIT_ID_KEY);
-				}
-			}
-		}));
 	}
 	_initCellContentInterceptor() {
 		this.disposeWithMe(this._sheetInterceptorService.intercept(_univerjs_sheets.INTERCEPTOR_POINT.CELL_CONTENT, {
@@ -1896,12 +2171,11 @@ let SheetCellImageController = class SheetCellImageController extends _univerjs_
 	}
 };
 SheetCellImageController = __decorate([
-	__decorateParam(0, _univerjs_core.ICommandService),
-	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetInterceptorService)),
-	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
-	__decorateParam(3, _univerjs_drawing.IDrawingManagerService),
-	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_docs_drawing.DocDrawingController)),
-	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.IEditorBridgeService))
+	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetInterceptorService)),
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
+	__decorateParam(2, _univerjs_drawing.IDrawingManagerService),
+	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_docs_drawing.DocDrawingController)),
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.IEditorBridgeService))
 ], SheetCellImageController);
 
 //#endregion
@@ -1948,11 +2222,7 @@ SheetCellImageAutofillController = __decorate([__decorateParam(0, (0, _univerjs_
 
 //#endregion
 //#region src/controllers/sheet-cell-image-copy-paste.controller.ts
-const DISABLE_UNITS = [
-	_univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY,
-	_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY,
-	_univerjs_core.DOCS_ZEN_EDITOR_UNIT_ID_KEY
-];
+const DISABLE_UNITS = [_univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY, _univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY];
 let SheetCellImageCopyPasteController = class SheetCellImageCopyPasteController extends _univerjs_core.Disposable {
 	constructor(_commandService, _univerInstanceService, _dialogService, _renderManagerService, _localeService) {
 		super();
@@ -1990,31 +2260,29 @@ let SheetCellImageCopyPasteController = class SheetCellImageCopyPasteController
 				if (currentDoc == null || !Object.keys((_doc$drawings = doc.drawings) !== null && _doc$drawings !== void 0 ? _doc$drawings : {}).length) return;
 				const docUnitId = currentDoc.getUnitId();
 				if (DISABLE_UNITS.includes(docUnitId)) {
-					if (docUnitId !== _univerjs_core.DOCS_ZEN_EDITOR_UNIT_ID_KEY) {
-						var _currentDoc$getBody;
-						const handleCloseDialog = () => {
-							this._dialogService.close("sheet-cell-image-copy-paste");
-							this._commandService.syncExecuteCommand(_univerjs_sheets_ui.SetCellEditVisibleOperation.id, { visible: false });
-						};
-						if (((_currentDoc$getBody = currentDoc.getBody()) === null || _currentDoc$getBody === void 0 ? void 0 : _currentDoc$getBody.dataStream) === "\r\n") {
-							this._commandService.syncExecuteCommand(_univerjs_sheets_ui.SetCellEditVisibleOperation.id, { visible: false });
+					var _currentDoc$getBody;
+					const handleCloseDialog = () => {
+						this._dialogService.close("sheet-cell-image-copy-paste");
+						this._commandService.syncExecuteCommand(_univerjs_sheets_ui.SetCellEditVisibleOperation.id, { visible: false });
+					};
+					if (((_currentDoc$getBody = currentDoc.getBody()) === null || _currentDoc$getBody === void 0 ? void 0 : _currentDoc$getBody.dataStream) === "\r\n") {
+						this._commandService.syncExecuteCommand(_univerjs_sheets_ui.SetCellEditVisibleOperation.id, { visible: false });
+						this._setCellImage(Object.values(doc.drawings)[0]);
+					} else this._dialogService.open({
+						id: "sheet-cell-image-copy-paste",
+						title: { label: this._localeService.t("sheets-drawing-ui.cell-image.pasteTitle") },
+						children: { label: this._localeService.t("sheets-drawing-ui.cell-image.pasteContent") },
+						width: 320,
+						destroyOnClose: true,
+						onClose: handleCloseDialog,
+						showOk: true,
+						showCancel: true,
+						onOk: () => {
+							handleCloseDialog();
 							this._setCellImage(Object.values(doc.drawings)[0]);
-						} else this._dialogService.open({
-							id: "sheet-cell-image-copy-paste",
-							title: { label: this._localeService.t("sheets-drawing-ui.cell-image.pasteTitle") },
-							children: { label: this._localeService.t("sheets-drawing-ui.cell-image.pasteContent") },
-							width: 320,
-							destroyOnClose: true,
-							onClose: handleCloseDialog,
-							showOk: true,
-							showCancel: true,
-							onOk: () => {
-								handleCloseDialog();
-								this._setCellImage(Object.values(doc.drawings)[0]);
-							},
-							onCancel: handleCloseDialog
-						});
-					}
+						},
+						onCancel: handleCloseDialog
+					});
 				}
 			}
 		}));
@@ -3687,7 +3955,7 @@ function calculateOffset(value, rangeWidth) {
 }
 
 //#endregion
-//#region src/views/printing-float-dom/index.tsx
+//#region src/views/PrintingFloatDom.tsx
 const PrintingFloatDom = (props) => {
 	const { floatDomInfos, scene, skeleton, worksheet } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -3740,17 +4008,20 @@ const PrintingFloatDom = (props) => {
 		}, id))
 	});
 };
+function mountPrintingFloatDom(props, root, injector) {
+	(0, _univerjs_design.render)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)((0, _univerjs_ui.connectInjector)(PrintingFloatDom, injector), { ...props }), root);
+	return () => (0, _univerjs_design.unmount)(root);
+}
 
 //#endregion
-//#region src/controllers/sheet-drawing-printing.controller.tsx
+//#region src/controllers/sheet-drawing-printing.controller.ts
 let SheetDrawingPrintingController = class SheetDrawingPrintingController extends _univerjs_core.Disposable {
-	constructor(_sheetPrintInterceptorService, _drawingRenderService, _drawingManagerService, _renderManagerService, _canvasFloatDomManagerService, _componetManager, _injector) {
+	constructor(_sheetPrintInterceptorService, _drawingRenderService, _drawingManagerService, _renderManagerService, _componetManager, _injector) {
 		super();
 		this._sheetPrintInterceptorService = _sheetPrintInterceptorService;
 		this._drawingRenderService = _drawingRenderService;
 		this._drawingManagerService = _drawingManagerService;
 		this._renderManagerService = _renderManagerService;
-		this._canvasFloatDomManagerService = _canvasFloatDomManagerService;
 		this._componetManager = _componetManager;
 		this._injector = _injector;
 		this._initPrinting();
@@ -3812,29 +4083,28 @@ let SheetDrawingPrintingController = class SheetDrawingPrintingController extend
 			const unitData = this._drawingManagerService.getDrawingDataForUnit(unitId);
 			const subUnitData = unitData === null || unitData === void 0 ? void 0 : unitData[subUnitId];
 			if (subUnitData) {
-				const floatDomInfos = subUnitData.order.map((id) => {
-					const drawing = subUnitData.data[id];
-					if (drawing.drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_CHART) return {
-						...drawing,
-						componentKey: this._componetManager.get(_univerjs_core.PRINT_CHART_COMPONENT_KEY)
-					};
-					if (drawing.drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_DOM) {
-						const printingComponentKey = this._sheetPrintInterceptorService.getPrintComponent(drawing.componentKey);
-						return {
+				const unmountPrintingFloatDom = mountPrintingFloatDom({
+					floatDomInfos: subUnitData.order.map((id) => {
+						const drawing = subUnitData.data[id];
+						if (drawing.drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_CHART) return {
 							...drawing,
-							componentKey: this._componetManager.get(printingComponentKey || drawing.componentKey)
+							componentKey: this._componetManager.get(_univerjs_core.PRINT_CHART_COMPONENT_KEY)
 						};
-					}
-					return null;
-				}).filter(Boolean);
-				(0, _univerjs_design.render)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)((0, _univerjs_ui.connectInjector)(PrintingFloatDom, this._injector), {
-					floatDomInfos,
+						if (drawing.drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_DOM) {
+							const printingComponentKey = this._sheetPrintInterceptorService.getPrintComponent(drawing.componentKey);
+							return {
+								...drawing,
+								componentKey: this._componetManager.get(printingComponentKey || drawing.componentKey)
+							};
+						}
+						return null;
+					}).filter(Boolean),
 					scene: pos.scene,
 					skeleton: pos.skeleton,
 					worksheet: pos.worksheet
-				}), pos.root);
+				}, pos.root, this._injector);
 				disposableCollection === null || disposableCollection === void 0 || disposableCollection.add(() => {
-					(0, _univerjs_design.unmount)(pos.root);
+					unmountPrintingFloatDom();
 				});
 				return next(disposableCollection);
 			}
@@ -3846,9 +4116,8 @@ SheetDrawingPrintingController = __decorate([
 	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_drawing_ui.DrawingRenderService)),
 	__decorateParam(2, _univerjs_drawing.IDrawingManagerService),
 	__decorateParam(3, _univerjs_engine_render.IRenderManagerService),
-	__decorateParam(4, (0, _univerjs_core.Inject)(SheetCanvasFloatDomManagerService)),
-	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)),
-	__decorateParam(6, (0, _univerjs_core.Inject)(_univerjs_core.Injector))
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)),
+	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_core.Injector))
 ], SheetDrawingPrintingController);
 
 //#endregion
@@ -5509,252 +5778,6 @@ const menuSchema = {
 	} } }
 };
 
-//#endregion
-//#region src/views/batch-save-images/BatchSaveImagesDialog.tsx
-function BatchSaveImagesDialog() {
-	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
-	const dialogService = (0, _univerjs_ui.useDependency)(_univerjs_ui.IDialogService);
-	const batchSaveService = (0, _univerjs_ui.useDependency)(IBatchSaveImagesService);
-	const [fileNameParts, setFileNameParts] = (0, react.useState)(["cellAddress"]);
-	const [saving, setSaving] = (0, react.useState)(false);
-	const [error, setError] = (0, react.useState)(null);
-	const images = (0, react.useMemo)(() => batchSaveService.getCellImagesInSelection(), [batchSaveService]);
-	const dataColumns = (0, react.useMemo)(() => batchSaveService.getDataColumns(), [batchSaveService]);
-	const rowRange = (0, react.useMemo)(() => batchSaveService.getSelectionRowRange(), [batchSaveService]);
-	const hasAvailableColumns = dataColumns.length > 0;
-	const columnOptions = (0, react.useMemo)(() => {
-		return dataColumns.map((col) => ({
-			label: col.label,
-			value: String(col.index)
-		}));
-	}, [dataColumns]);
-	const [selectedColumn, setSelectedColumn] = (0, react.useState)(() => columnOptions.length > 0 ? columnOptions[0].value : "0");
-	(0, _univerjs_sheets_ui.useHighlightRange)((0, react.useMemo)(() => {
-		if (!fileNameParts.includes("columnValue") || !rowRange) return [];
-		const colIndex = Number(selectedColumn);
-		return [{
-			startRow: rowRange.startRow,
-			endRow: rowRange.endRow,
-			startColumn: colIndex,
-			endColumn: colIndex
-		}];
-	}, [
-		fileNameParts,
-		selectedColumn,
-		rowRange
-	]));
-	const handleFileNamePartsChange = (0, react.useCallback)((value) => {
-		if (value.length === 0) return;
-		setFileNameParts(value);
-	}, []);
-	const handleColumnChange = (0, react.useCallback)((value) => {
-		setSelectedColumn(String(value));
-	}, []);
-	const handleCancel = (0, react.useCallback)(() => {
-		dialogService.close(BATCH_SAVE_IMAGES_DIALOG_ID);
-	}, [dialogService]);
-	const handleConfirm = (0, react.useCallback)(async () => {
-		if (images.length === 0) return;
-		setSaving(true);
-		setError(null);
-		try {
-			await batchSaveService.saveImages(images, {
-				fileNameParts,
-				columnIndex: fileNameParts.includes("columnValue") ? Number(selectedColumn) : void 0
-			});
-			dialogService.close(BATCH_SAVE_IMAGES_DIALOG_ID);
-		} catch (err) {
-			console.error("Failed to save images:", err);
-			setError(localeService.t("sheets-drawing-ui.save.error"));
-		} finally {
-			setSaving(false);
-		}
-	}, [
-		batchSaveService,
-		images,
-		fileNameParts,
-		selectedColumn,
-		dialogService,
-		localeService
-	]);
-	const showColumnSelect = fileNameParts.includes("columnValue");
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "univer-flex univer-flex-col",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.FormLayout, {
-				label: localeService.t("sheets-drawing-ui.save.imageCount"),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "univer-text-sm univer-text-gray-600",
-					children: images.length
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.FormLayout, {
-				label: localeService.t("sheets-drawing-ui.save.fileNameConfig"),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.CheckboxGroup, {
-					value: fileNameParts,
-					onChange: handleFileNamePartsChange,
-					direction: "vertical",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
-						value: "cellAddress",
-						disabled: !hasAvailableColumns,
-						children: localeService.t("sheets-drawing-ui.save.useRowCol")
-					}), hasAvailableColumns && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
-						value: "columnValue",
-						children: localeService.t("sheets-drawing-ui.save.useColumnValue")
-					})]
-				})
-			}),
-			showColumnSelect && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.FormLayout, {
-				label: localeService.t("sheets-drawing-ui.save.selectColumn"),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
-					value: selectedColumn,
-					options: columnOptions,
-					onChange: handleColumnChange
-				})
-			}),
-			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-text-xs univer-text-red-500",
-				children: error
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-flex univer-justify-end univer-gap-2 univer-border-t univer-border-gray-200 univer-pt-3",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
-					onClick: handleCancel,
-					disabled: saving,
-					children: localeService.t("sheets-drawing-ui.save.cancel")
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
-					variant: "primary",
-					onClick: handleConfirm,
-					disabled: saving || images.length === 0,
-					children: saving ? localeService.t("sheets-drawing-ui.save.saving") : localeService.t("sheets-drawing-ui.save.confirm")
-				})]
-			})
-		]
-	});
-}
-
-//#endregion
-//#region src/views/sheet-image-panel/SheetDrawingAnchor.tsx
-const SheetDrawingAnchor = (props) => {
-	var _drawingParam$anchorT;
-	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
-	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
-	const drawingManagerService = (0, _univerjs_ui.useDependency)(_univerjs_drawing.IDrawingManagerService);
-	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService);
-	const { drawings } = props;
-	const drawingParam = drawings[0];
-	if (drawingParam == null) return;
-	const { unitId } = drawingParam;
-	const renderObject = renderManagerService.getRenderById(unitId);
-	const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-	if (scene == null) return;
-	const transformer = scene.getTransformerByCreate();
-	const [anchorShow, setAnchorShow] = (0, react.useState)(true);
-	const [value, setValue] = (0, react.useState)((_drawingParam$anchorT = drawingParam.anchorType) !== null && _drawingParam$anchorT !== void 0 ? _drawingParam$anchorT : _univerjs_sheets_drawing.SheetDrawingAnchorType.Position);
-	function getUpdateParams(objects, drawingManagerService) {
-		const params = [];
-		objects.forEach((object) => {
-			const { oKey } = object;
-			const searchParam = drawingManagerService.getDrawingOKey(oKey);
-			if (searchParam == null) {
-				params.push(null);
-				return true;
-			}
-			const { unitId, subUnitId, drawingId, drawingType, anchorType, sheetTransform, axisAlignSheetTransform } = searchParam;
-			params.push({
-				unitId,
-				subUnitId,
-				drawingId,
-				anchorType,
-				sheetTransform,
-				drawingType,
-				axisAlignSheetTransform
-			});
-		});
-		return params;
-	}
-	(0, react.useEffect)(() => {
-		const onClearControlObserver = transformer.clearControl$.subscribe((changeSelf) => {
-			if (changeSelf === true) setAnchorShow(false);
-		});
-		const onChangeStartObserver = transformer.changeStart$.subscribe((state) => {
-			const { objects } = state;
-			const params = getUpdateParams(objects, drawingManagerService);
-			if (params.length === 0) setAnchorShow(false);
-			else if (params.length >= 1) {
-				var _params$;
-				setAnchorShow(true);
-				setValue(((_params$ = params[0]) === null || _params$ === void 0 ? void 0 : _params$.anchorType) || _univerjs_sheets_drawing.SheetDrawingAnchorType.Position);
-			}
-		});
-		return () => {
-			onChangeStartObserver.unsubscribe();
-			onClearControlObserver.unsubscribe();
-		};
-	}, []);
-	function handleChange(value) {
-		setValue(value);
-		const focusDrawings = drawingManagerService.getFocusDrawings();
-		if (focusDrawings.length === 0) return;
-		const updateParams = focusDrawings.map((drawing) => {
-			return {
-				unitId: drawing.unitId,
-				subUnitId: drawing.subUnitId,
-				drawingId: drawing.drawingId,
-				anchorType: value
-			};
-		});
-		commandService.executeCommand(_univerjs_sheets_drawing.SetSheetDrawingCommand.id, {
-			unitId: focusDrawings[0].unitId,
-			drawings: updateParams
-		});
-	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, _univerjs_design.clsx)("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": !anchorShow }),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
-			className: "univer-text-gray-600 dark:!univer-text-gray-200",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("sheets-drawing-ui.drawing-anchor.title") })
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.RadioGroup, {
-			value,
-			onChange: handleChange,
-			direction: "vertical",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
-					value: _univerjs_sheets_drawing.SheetDrawingAnchorType.Both,
-					children: localeService.t("sheets-drawing-ui.drawing-anchor.both")
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
-					value: _univerjs_sheets_drawing.SheetDrawingAnchorType.Position,
-					children: localeService.t("sheets-drawing-ui.drawing-anchor.position")
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
-					value: _univerjs_sheets_drawing.SheetDrawingAnchorType.None,
-					children: localeService.t("sheets-drawing-ui.drawing-anchor.none")
-				})
-			]
-		}) })]
-	});
-};
-
-//#endregion
-//#region src/views/sheet-image-panel/SheetDrawingPanel.tsx
-const SheetDrawingPanel = () => {
-	const drawingManagerService = (0, _univerjs_ui.useDependency)(_univerjs_drawing.IDrawingManagerService);
-	const [drawings, setDrawings] = (0, react.useState)(drawingManagerService.getFocusDrawings());
-	(0, react.useEffect)(() => {
-		const focusDispose = drawingManagerService.focus$.subscribe((drawings) => {
-			setDrawings(drawings);
-		});
-		return () => {
-			focusDispose.unsubscribe();
-		};
-	}, []);
-	return !!(drawings === null || drawings === void 0 ? void 0 : drawings.length) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "univer-text-sm",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_drawing_ui.DrawingCommonPanel, { drawings }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetDrawingAnchor, { drawings })]
-	});
-};
-
 //#endregion
 //#region src/controllers/shortcuts/drawing.shortcut.ts
 function whenSheetDrawingFocused(contextService) {
@@ -5812,7 +5835,7 @@ const DeleteDrawingsShortcutItem = {
 };
 
 //#endregion
-//#region src/controllers/sheet-drawing.controller.ts
+//#region src/controllers/ui.controller.ts
 /**
 * Copyright 2023-present DreamNum Co., Ltd.
 *
@@ -5829,19 +5852,14 @@ const DeleteDrawingsShortcutItem = {
 * limitations under the License.
 */
 let SheetDrawingUIController = class SheetDrawingUIController extends _univerjs_core.Disposable {
-	constructor(_componentManager, _menuManagerService, _commandService, _shortcutService) {
+	constructor(_menuManagerService, _commandService, _shortcutService) {
 		super();
-		this._componentManager = _componentManager;
 		this._menuManagerService = _menuManagerService;
 		this._commandService = _commandService;
 		this._shortcutService = _shortcutService;
 		this._init();
 	}
-	_initCustomComponents() {
-		const componentManager = this._componentManager;
-		this.disposeWithMe(componentManager.register(COMPONENT_SHEET_DRAWING_PANEL, SheetDrawingPanel));
-		this.disposeWithMe(componentManager.register(BATCH_SAVE_IMAGES_DIALOG_ID, BatchSaveImagesDialog));
-	}
+	_initCustomComponents() {}
 	_initMenus() {
 		this._menuManagerService.mergeMenu(menuSchema);
 	}
@@ -5878,10 +5896,9 @@ let SheetDrawingUIController = class SheetDrawingUIController extends _univerjs_
 	}
 };
 SheetDrawingUIController = __decorate([
-	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)),
-	__decorateParam(1, _univerjs_ui.IMenuManagerService),
-	__decorateParam(2, _univerjs_core.ICommandService),
-	__decorateParam(3, _univerjs_ui.IShortcutService)
+	__decorateParam(0, _univerjs_ui.IMenuManagerService),
+	__decorateParam(1, _univerjs_core.ICommandService),
+	__decorateParam(2, _univerjs_ui.IShortcutService)
 ], SheetDrawingUIController);
 
 //#endregion
@@ -5915,7 +5932,7 @@ let DrawingPopupMenuController = class DrawingPopupMenuController extends _unive
 			if (status > 0 && !messageDisposable) messageDisposable = this._messageService.show({
 				id: MESSAGE_ID,
 				type: _univerjs_design.MessageType.Loading,
-				content: `${this._localeService.t("sheets-ui.uploadLoading.loading")}: ${status}`,
+				content: `${this._localeService.t("sheets-drawing-ui.uploadLoading.loading")}: ${status}`,
 				duration: 0
 			});
 			else if (status === 0) {
@@ -5962,7 +5979,7 @@ let DrawingPopupMenuController = class DrawingPopupMenuController extends _unive
 			if (!object) return;
 			const oKey = object.oKey;
 			const drawingParam = this._drawingManagerService.getDrawingOKey(oKey);
-			if (!drawingParam) return;
+			if (!drawingParam || drawingParam.drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_SHAPE) return;
 			const { unitId, subUnitId, drawingId, drawingType } = drawingParam;
 			const data = drawingParam.data;
 			if (data && data.disablePopup) return;
@@ -6097,6 +6114,7 @@ let UniverSheetsDrawingUIPlugin = class UniverSheetsDrawingUIPlugin extends _uni
 	}
 	onStarting() {
 		(0, _univerjs_core.registerDependencies)(this._injector, [
+			[ComponentsController],
 			[SheetCanvasFloatDomManagerService],
 			[SheetDrawingUIController],
 			[DrawingPopupMenuController],
@@ -6111,6 +6129,7 @@ let UniverSheetsDrawingUIPlugin = class UniverSheetsDrawingUIPlugin extends _uni
 			[DrawingContextMenuController]
 		]);
 		(0, _univerjs_core.touchDependencies)(this._injector, [[SheetCanvasFloatDomManagerService]]);
+		this._injector.get(ComponentsController);
 	}
 	onReady() {
 		(0, _univerjs_core.touchDependencies)(this._injector, [