@univerjs/docs-drawing-ui 0.24.0 → 0.25.0

package/lib/index.js

@@ -1,11 +1,11 @@
 import { ArrangeTypeEnum, BooleanNumber, BuildTextUtils, COLORS, CommandType, DOCS_ZEN_EDITOR_UNIT_ID_KEY, DOC_DRAWING_PRINTING_COMPONENT_KEY, DependentOn, Direction, Disposable, DisposableCollection, DocumentFlavor, DrawingTypeEnum, FOCUSING_COMMON_DRAWINGS, FOCUSING_DOC, FOCUSING_UNIVER_EDITOR, ICommandService, IConfigService, IContextService, IUniverInstanceService, Inject, Injector, JSONX, LifecycleService, LifecycleStages, LocaleService, MemoryCursor, ObjectRelativeFromH, ObjectRelativeFromV, Plugin, PositionedObjectLayoutType, RedoCommand, RxDisposable, TextX, TextXActionType, Tools, UndoCommand, UniverInstanceType, WrapTextType, fromEventSubject, generateRandomId, isInternalEditorID, merge, throttle, toDisposable } from "@univerjs/core";
 import { IDocDrawingService, UniverDocsDrawingPlugin } from "@univerjs/docs-drawing";
 import { DocSelectionManagerService, DocSkeletonManagerService, RichTextEditingMutation } from "@univerjs/docs";
-import { DocCanvasPopManagerService, DocPrintInterceptorService, DocSelectionRenderService, IEditorService, NodePositionConvertToCursor, SetDocZoomRatioOperation, TEXT_RANGE_LAYER_INDEX, VIEWPORT_KEY, docDrawingPositionToTransform, getAnchorBounding, getCustomBlockIdsInSelections, getDocObject, getOneTextSelectionRange, getRichTextEditPath } from "@univerjs/docs-ui";
-import { CURSOR_TYPE, DocumentEditArea, DocumentSkeletonPageType, IRenderManagerService, Liquid, PageLayoutType, Rect, TRANSFORM_CHANGE_OBSERVABLE_TYPE, Vector2, getColor, getCurrentTypeOfRenderer } from "@univerjs/engine-render";
+import { DOC_CONTENT_INSERT_MENU_ID, DocCanvasPopManagerService, DocContentInsertService, DocPrintInterceptorService, DocSelectionRenderService, EMPTY_PARAGRAPH_MENU_ID, IEditorService, INSERT_BELLOW_MENU_ID, NodePositionConvertToCursor, SetDocZoomRatioOperation, TEXT_RANGE_LAYER_INDEX, VIEWPORT_KEY, docDrawingPositionToTransform, getAnchorBounding, getCustomBlockIdsInSelections, getDocObject, getOneTextSelectionRange, getRichTextEditPath } from "@univerjs/docs-ui";
+import { CURSOR_TYPE, DocumentEditArea, DocumentSkeletonPageType, IRenderManagerService, Liquid, PageLayoutType, Rect, TRANSFORM_CHANGE_OBSERVABLE_TYPE, Vector2, getColor, getCurrentTypeOfRenderer, getDocsTableRenderViewport, getTableIdAndSliceIndex } from "@univerjs/engine-render";
 import { Checkbox, InputNumber, MessageType, Radio, RadioGroup, Select, clsx, render, unmount } from "@univerjs/design";
 import { DRAWING_IMAGE_ALLOW_IMAGE_LIST, DRAWING_IMAGE_COUNT_LIMIT, DRAWING_IMAGE_HEIGHT_LIMIT, DRAWING_IMAGE_WIDTH_LIMIT, IDrawingManagerService, IImageIoService, ImageUploadStatusType, UniverDrawingPlugin, getDrawingImageAllowSize, getDrawingShapeKeyByDrawingSearch, getImageSize } from "@univerjs/drawing";
-import { CanvasFloatDomService, ComponentManager, ILocalFileService, IMenuManagerService, IMessageService, IShortcutService, ISidebarService, KeyCode, MenuItemType, PrintFloatDomSingle, RibbonInsertGroup, UniverUIPlugin, connectInjector, getMenuHiddenObservable, useDependency } from "@univerjs/ui";
+import { CanvasFloatDomService, ComponentManager, ContextMenuGroup, ContextMenuPosition, ILocalFileService, IMenuManagerService, IMessageService, IShortcutService, ISidebarService, KeyCode, MenuItemType, PrintFloatDomSingle, RibbonInsertGroup, UniverUIPlugin, connectInjector, getMenuHiddenObservable, useDependency } from "@univerjs/ui";
 import { BehaviorSubject, Observable, debounceTime, filter, map, of, switchMap, takeUntil } from "rxjs";
 import { COMPONENT_IMAGE_POPUP_MENU, DrawingCommonPanel, DrawingRenderService, ImageCropperObject, ImageResetSizeOperation, OpenImageCropOperation, UniverDrawingUIPlugin } from "@univerjs/drawing-ui";
 import { useEffect, useMemo, useState } from "react";
@@ -129,17 +129,26 @@ const InsertDocDrawingCommand = {
 	id: "doc.command.insert-doc-image",
 	type: CommandType.COMMAND,
 	handler: (accessor, params) => {
-		var _documentDataModel$ge, _documentDataModel$ge2;
+		var _ref, _contentInsertRange$s, _documentDataModel$ge, _documentDataModel$ge2;
 		if (params == null) return false;
 		const commandService = accessor.get(ICommandService);
 		const docSelectionManagerService = accessor.get(DocSelectionManagerService);
 		const univerInstanceService = accessor.get(IUniverInstanceService);
 		const activeTextRange = docSelectionManagerService.getActiveTextRange();
 		const documentDataModel = univerInstanceService.getCurrentUniverDocInstance();
-		if (activeTextRange == null || documentDataModel == null) return false;
+		if (documentDataModel == null) return false;
 		const unitId = documentDataModel.getUnitId();
+		const contentInsertRange = getContentInsertRange(accessor, unitId);
+		const targetTextRange = contentInsertRange ? {
+			...activeTextRange,
+			startOffset: contentInsertRange.startOffset,
+			endOffset: contentInsertRange.endOffset,
+			collapsed: contentInsertRange.startOffset === contentInsertRange.endOffset,
+			segmentId: (_ref = (_contentInsertRange$s = contentInsertRange.segmentId) !== null && _contentInsertRange$s !== void 0 ? _contentInsertRange$s : activeTextRange === null || activeTextRange === void 0 ? void 0 : activeTextRange.segmentId) !== null && _ref !== void 0 ? _ref : ""
+		} : activeTextRange;
+		if (targetTextRange == null) return false;
 		const { drawings } = params;
-		const { collapsed, startOffset, segmentId } = activeTextRange;
+		const { collapsed, startOffset, segmentId = "" } = targetTextRange;
 		const body = documentDataModel.getSelfOrHeaderFooterModel(segmentId).getBody();
 		if (body == null) return false;
 		const textX = new TextX();
@@ -154,9 +163,9 @@ const InsertDocDrawingCommand = {
 			});
 		} else {
 			var _documentDataModel$ge3, _documentDataModel$ge4;
-			const dos = BuildTextUtils.selection.delete([activeTextRange], body, 0, null, false);
+			const dos = BuildTextUtils.selection.delete([targetTextRange], body, 0, null, false);
 			textX.push(...dos);
-			const removedCustomBlockIds = getCustomBlockIdsInSelections(body, [activeTextRange]);
+			const removedCustomBlockIds = getCustomBlockIdsInSelections(body, [targetTextRange]);
 			const drawings = (_documentDataModel$ge3 = documentDataModel.getDrawings()) !== null && _documentDataModel$ge3 !== void 0 ? _documentDataModel$ge3 : {};
 			const drawingOrder = (_documentDataModel$ge4 = documentDataModel.getDrawingsOrder()) !== null && _documentDataModel$ge4 !== void 0 ? _documentDataModel$ge4 : [];
 			const sortedRemovedCustomBlockIds = removedCustomBlockIds.sort((a, b) => {
@@ -211,6 +220,20 @@ const InsertDocDrawingCommand = {
 		return Boolean(result);
 	}
 };
+function getContentInsertRange(accessor, unitId) {
+	try {
+		const range = accessor.get(DocContentInsertService).consumeInsertRange(unitId);
+		if (range == null) return null;
+		return {
+			startOffset: range.startOffset,
+			endOffset: range.endOffset,
+			collapsed: range.startOffset === range.endOffset,
+			segmentId: range.segmentId
+		};
+	} catch {
+		return null;
+	}
+}
 
 //#endregion
 //#region src/commands/commands/set-drawing-arrange.command.ts
@@ -283,7 +306,7 @@ const UngroupDocDrawingCommand = {
 };
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/typeof.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -294,7 +317,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/toPrimitive.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -307,14 +330,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/defineProperty.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -337,7 +360,7 @@ var DocRefreshDrawingsService = class {
 };
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/decorateParam.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -345,7 +368,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/decorate.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -382,6 +405,7 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 		delete this._context;
 	}
 	async insertDocImage() {
+		const insertPosition = this._getCurrentImageInsertPosition();
 		const files = await this._fileOpenerService.openFile({
 			multiple: true,
 			accept: DRAWING_IMAGE_ALLOW_IMAGE_LIST.map((image) => `.${image.replace("image/", "")}`).join(",")
@@ -390,14 +414,14 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 		if (fileLength > DRAWING_IMAGE_COUNT_LIMIT) {
 			this._messageService.show({
 				type: MessageType.Error,
-				content: this._localeService.t("update-status.exceedMaxCount", String(DRAWING_IMAGE_COUNT_LIMIT))
+				content: this._localeService.t("docs-drawing-ui.update-status.exceedMaxCount", String(DRAWING_IMAGE_COUNT_LIMIT))
 			});
 			return false;
 		} else if (fileLength === 0) return false;
-		await this._insertFloatImages(files);
+		await this._insertFloatImages(files, insertPosition);
 		return true;
 	}
-	async _insertFloatImages(files) {
+	async _insertFloatImages(files, insertPosition) {
 		let imageParams = [];
 		try {
 			imageParams = await Promise.all(files.map((file) => this._imageIoService.saveImage(file)));
@@ -406,13 +430,13 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 			let content = "";
 			switch (type) {
 				case ImageUploadStatusType.ERROR_EXCEED_SIZE:
-					content = this._localeService.t("update-status.exceedMaxSize", String(getDrawingImageAllowSize() / (1024 * 1024)));
+					content = this._localeService.t("docs-drawing-ui.update-status.exceedMaxSize", String(getDrawingImageAllowSize() / (1024 * 1024)));
 					break;
 				case ImageUploadStatusType.ERROR_IMAGE_TYPE:
-					content = this._localeService.t("update-status.invalidImageType");
+					content = this._localeService.t("docs-drawing-ui.update-status.invalidImageType");
 					break;
 				case ImageUploadStatusType.ERROR_IMAGE:
-					content = this._localeService.t("update-status.invalidImage");
+					content = this._localeService.t("docs-drawing-ui.update-status.invalidImage");
 					break;
 				default: break;
 			}
@@ -435,8 +459,11 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 				const scaleHeight = DRAWING_IMAGE_HEIGHT_LIMIT / height;
 				scale = Math.min(scaleWidth, scaleHeight);
 			}
-			const docTransform = this._getImagePosition(width * scale, height * scale);
+			const imagePosition = insertPosition !== null && insertPosition !== void 0 ? insertPosition : this._getCurrentImageInsertPosition();
+			const docTransform = this._getImagePosition(width * scale, height * scale, imagePosition);
 			if (docTransform == null) return;
+			const transform = docDrawingPositionToTransform(docTransform);
+			if (transform != null && imagePosition != null) transform.top = imagePosition.top;
 			const docDrawingParam = {
 				unitId,
 				subUnitId: unitId,
@@ -444,7 +471,7 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 				drawingType: DrawingTypeEnum.DRAWING_IMAGE,
 				imageSourceType,
 				source,
-				transform: docDrawingPositionToTransform(docTransform),
+				transform,
 				docTransform,
 				behindDoc: BooleanNumber.FALSE,
 				title: "",
@@ -474,9 +501,9 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 		const editArea = viewModel === null || viewModel === void 0 ? void 0 : viewModel.getEditArea();
 		return editArea === DocumentEditArea.HEADER || editArea === DocumentEditArea.FOOTER;
 	}
-	_getImagePosition(imageWidth, imageHeight) {
-		const activeTextRange = this._docSelectionRenderService.getActiveTextRange();
-		const position = (activeTextRange === null || activeTextRange === void 0 ? void 0 : activeTextRange.getAbsolutePosition()) || {
+	_getImagePosition(imageWidth, imageHeight, insertPosition) {
+		var _ref;
+		const position = (_ref = insertPosition !== null && insertPosition !== void 0 ? insertPosition : this._getCurrentImageInsertPosition()) !== null && _ref !== void 0 ? _ref : {
 			left: 0,
 			top: 0
 		};
@@ -496,6 +523,15 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 			angle: 0
 		};
 	}
+	_getCurrentImageInsertPosition() {
+		var _this$_docSelectionRe;
+		const position = (_this$_docSelectionRe = this._docSelectionRenderService.getActiveTextRange()) === null || _this$_docSelectionRe === void 0 ? void 0 : _this$_docSelectionRe.getAbsolutePosition();
+		if (position == null) return null;
+		return {
+			left: position.left,
+			top: position.top
+		};
+	}
 	_updateOrderListener() {
 		this.disposeWithMe(this._drawingManagerService.featurePluginOrderUpdate$.subscribe((params) => {
 			const { unitId, subUnitId, drawingIds, arrangeType } = params;
@@ -678,6 +714,19 @@ const WRAPPING_STYLE_TO_LAYOUT_TYPE = {
 	["inFrontOfText"]: PositionedObjectLayoutType.WRAP_NONE,
 	["behindText"]: PositionedObjectLayoutType.WRAP_NONE
 };
+function findDrawingAnchorInPage(page, drawingId, pageMarginTop, pageMarginLeft) {
+	const skeDrawing = page.skeDrawings.get(drawingId);
+	if (skeDrawing) return {
+		skeDrawing,
+		pageMarginTop,
+		pageMarginLeft
+	};
+	for (const table of page.skeTables.values()) for (const row of table.rows) for (const cell of row.cells) {
+		const cellAnchor = findDrawingAnchorInPage(cell, drawingId, cell.marginTop, cell.marginLeft);
+		if (cellAnchor) return cellAnchor;
+	}
+	return null;
+}
 function getDeleteAndInsertCustomBlockActions(segmentId, oldSegmentId, segmentPage, offset, drawingId, documentDataModel, docSelectionRenderManager) {
 	var _oldBody$customBlocks;
 	const textX = new TextX();
@@ -828,43 +877,30 @@ const UpdateDocDrawingWrappingStyleCommand = {
 				}
 			}
 			if (wrappingStyle === "inline") continue;
-			let skeDrawing = null;
-			let pageMarginTop = 0;
-			let pageMarginLeft = 0;
+			let drawingAnchor = null;
 			for (const page of pages) {
 				const { headerId, footerId, marginTop, marginLeft, marginBottom, pageWidth, pageHeight } = page;
 				switch (editArea) {
 					case DocumentEditArea.HEADER: {
 						var _skeHeaders$get;
 						const headerSke = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(pageWidth);
-						if (headerSke != null && headerSke.skeDrawings.has(drawingId)) {
-							skeDrawing = headerSke.skeDrawings.get(drawingId);
-							pageMarginTop = headerSke.marginTop;
-							pageMarginLeft = marginLeft;
-						}
+						if (headerSke != null) drawingAnchor = findDrawingAnchorInPage(headerSke, drawingId, headerSke.marginTop, marginLeft);
 						break;
 					}
 					case DocumentEditArea.FOOTER: {
 						var _skeFooters$get;
 						const footerSke = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(pageWidth);
-						if (footerSke != null && footerSke.skeDrawings.has(drawingId)) {
-							skeDrawing = footerSke.skeDrawings.get(drawingId);
-							pageMarginTop = pageHeight - marginBottom + footerSke.marginTop;
-							pageMarginLeft = marginLeft;
-						}
+						if (footerSke != null) drawingAnchor = findDrawingAnchorInPage(footerSke, drawingId, pageHeight - marginBottom + footerSke.marginTop, marginLeft);
 						break;
 					}
 					case DocumentEditArea.BODY:
-						if (page.skeDrawings.has(drawingId)) {
-							skeDrawing = page.skeDrawings.get(drawingId);
-							pageMarginTop = marginTop;
-							pageMarginLeft = marginLeft;
-						}
+						drawingAnchor = findDrawingAnchorInPage(page, drawingId, marginTop, marginLeft);
 						break;
 				}
-				if (skeDrawing != null) break;
+				if (drawingAnchor != null) break;
 			}
-			if (skeDrawing != null) {
+			if (drawingAnchor != null) {
+				const { skeDrawing, pageMarginTop, pageMarginLeft } = drawingAnchor;
 				const { aTop, aLeft } = skeDrawing;
 				const oldPositionH = oldDrawings[drawingId].docTransform.positionH;
 				let posOffsetH = aLeft;
@@ -1290,7 +1326,7 @@ const SidebarDocDrawingOperation = {
 		switch (params.value) {
 			case "open":
 				sidebarService.open({
-					header: { title: localeService.t("docImage.panel.title") },
+					header: { title: localeService.t("docs-drawing-ui.panel.title") },
 					children: { label: COMPONENT_DOC_DRAWING_PANEL },
 					onClose: () => {
 						drawingManagerService.focusDrawing(null);
@@ -1586,7 +1622,7 @@ function ImageMenuFactory(accessor) {
 		id: DOCS_IMAGE_MENU_ID,
 		type: MenuItemType.SUBITEMS,
 		icon: "AddImageIcon",
-		tooltip: "docImage.title",
+		tooltip: "docs-drawing-ui.title",
 		disabled$: getDisableWhenSelectionInTableObservable(accessor),
 		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC, void 0, DOCS_ZEN_EDITOR_UNIT_ID_KEY)
 	};
@@ -1594,8 +1630,9 @@ function ImageMenuFactory(accessor) {
 function UploadFloatImageMenuFactory(_accessor) {
 	return {
 		id: IMAGE_MENU_UPLOAD_FLOAT_ID,
-		title: "docImage.upload.float",
+		title: "docs-drawing-ui.upload.float",
 		type: MenuItemType.BUTTON,
+		icon: "AddImageIcon",
 		hidden$: getMenuHiddenObservable(_accessor, UniverInstanceType.UNIVER_DOC, void 0, DOCS_ZEN_EDITOR_UNIT_ID_KEY)
 	};
 }
@@ -1603,7 +1640,7 @@ function UploadFloatImageMenuFactory(_accessor) {
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-drawing-ui";
-var version = "0.24.0";
+var version = "0.25.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -1871,12 +1908,219 @@ DocDrawingPrintingController = __decorate([
 	__decorateParam(4, Inject(Injector))
 ], DocDrawingPrintingController);
 
+//#endregion
+//#region src/controllers/render-controllers/doc-drawing-transform-update.controller.ts
+function getDocsTableCellDrawingOffset(unitId, table, row, cell) {
+	const sourceTableId = getTableIdAndSliceIndex(table.tableId).tableId;
+	const viewport = getDocsTableRenderViewport(unitId, sourceTableId);
+	const scrollLeft = viewport && viewport.contentWidth > viewport.viewportWidth ? viewport.scrollLeft : 0;
+	return {
+		left: table.left + cell.left - scrollLeft + cell.marginLeft,
+		top: table.top + row.top + cell.marginTop
+	};
+}
+let DocDrawingTransformUpdateController = class DocDrawingTransformUpdateController extends Disposable {
+	constructor(_context, _docSkeletonManagerService, _commandService, _editorService, _drawingManagerService, _docRefreshDrawingsService, _univerInstanceService, _lifecycleService) {
+		super();
+		this._context = _context;
+		this._docSkeletonManagerService = _docSkeletonManagerService;
+		this._commandService = _commandService;
+		this._editorService = _editorService;
+		this._drawingManagerService = _drawingManagerService;
+		this._docRefreshDrawingsService = _docRefreshDrawingsService;
+		this._univerInstanceService = _univerInstanceService;
+		this._lifecycleService = _lifecycleService;
+		_defineProperty(this, "_liquid", new Liquid());
+		this._initialize();
+		this._commandExecutedListener();
+	}
+	_initialize() {
+		this._initialRenderRefresh();
+		this._drawingInitializeListener();
+		this._initResize();
+	}
+	_initialRenderRefresh() {
+		this.disposeWithMe(this._docSkeletonManagerService.currentSkeleton$.subscribe((documentSkeleton) => {
+			if (documentSkeleton == null) return;
+			this._refreshDrawing(documentSkeleton);
+		}));
+		this.disposeWithMe(this._docRefreshDrawingsService.refreshDrawings$.subscribe((skeleton) => {
+			if (skeleton == null) return;
+			this._refreshDrawing(skeleton);
+		}));
+	}
+	_commandExecutedListener() {
+		const updateCommandList = [RichTextEditingMutation.id, SetDocZoomRatioOperation.id];
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (updateCommandList.includes(command.id)) {
+				const { unitId: commandUnitId } = command.params;
+				const { unitId, mainComponent } = this._context;
+				if (commandUnitId !== unitId) return;
+				const skeleton = this._docSkeletonManagerService.getSkeleton();
+				if (skeleton == null) return;
+				if (this._editorService.isEditor(unitId) && unitId !== DOCS_ZEN_EDITOR_UNIT_ID_KEY) {
+					mainComponent === null || mainComponent === void 0 || mainComponent.makeDirty();
+					return;
+				}
+				this._refreshDrawing(skeleton);
+			}
+		}));
+	}
+	_initResize() {
+		this.disposeWithMe(fromEventSubject(this._context.engine.onTransformChange$).pipe(filter((evt) => evt.type === TRANSFORM_CHANGE_OBSERVABLE_TYPE.resize), debounceTime(16)).subscribe(() => {
+			var _scene$getTransformer;
+			const skeleton = this._docSkeletonManagerService.getSkeleton();
+			const { scene } = this._context;
+			(_scene$getTransformer = scene.getTransformer()) === null || _scene$getTransformer === void 0 || _scene$getTransformer.refreshControls();
+			this._refreshDrawing(skeleton);
+		}));
+	}
+	_refreshDrawing(skeleton) {
+		const skeletonData = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getSkeletonData();
+		const { mainComponent, unitId } = this._context;
+		const documentComponent = mainComponent;
+		if (!skeletonData) return;
+		const { left: docsLeft, top: docsTop, pageLayoutType, pageMarginLeft, pageMarginTop } = documentComponent;
+		const { pages, skeHeaders, skeFooters } = skeletonData;
+		const updateDrawingMap = {};
+		this._liquid.reset();
+		/**
+		* TODO: @DR-Univer We should not refresh all floating elements, but instead make a diff.
+		*/
+		for (let i = 0, len = pages.length; i < len; i++) {
+			const page = pages[i];
+			const { headerId, footerId, pageWidth } = page;
+			if (headerId) {
+				var _skeHeaders$get;
+				const headerPage = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(pageWidth);
+				if (headerPage) {
+					this._calculateDrawingPosition(unitId, headerPage, docsLeft, docsTop, updateDrawingMap, headerPage.marginTop, page.marginLeft);
+					this._calculateTableCellDrawingPositions(unitId, headerPage, docsLeft, docsTop, updateDrawingMap, headerPage.marginTop, page.marginLeft);
+				}
+			}
+			if (footerId) {
+				var _skeFooters$get;
+				const footerPage = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(pageWidth);
+				if (footerPage) {
+					const footerTop = page.pageHeight - page.marginBottom + footerPage.marginTop;
+					this._calculateDrawingPosition(unitId, footerPage, docsLeft, docsTop, updateDrawingMap, footerTop, page.marginLeft);
+					this._calculateTableCellDrawingPositions(unitId, footerPage, docsLeft, docsTop, updateDrawingMap, footerTop, page.marginLeft);
+				}
+			}
+			this._calculateDrawingPosition(unitId, page, docsLeft, docsTop, updateDrawingMap, page.marginTop, page.marginLeft);
+			this._calculateTableCellDrawingPositions(unitId, page, docsLeft, docsTop, updateDrawingMap, page.marginTop, page.marginLeft);
+			this._liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
+		}
+		const updateDrawings = Object.values(updateDrawingMap);
+		const nonMultiDrawings = updateDrawings.filter((drawing) => !drawing.isMultiTransform);
+		const multiDrawings = updateDrawings.filter((drawing) => drawing.isMultiTransform);
+		if (nonMultiDrawings.length > 0) this._drawingManagerService.refreshTransform(nonMultiDrawings);
+		this._handleMultiDrawingsTransform(multiDrawings);
+	}
+	_handleMultiDrawingsTransform(multiDrawings) {
+		const { scene, unitId } = this._context;
+		const transformer = scene.getTransformerByCreate();
+		multiDrawings.forEach((updateParam) => {
+			const param = this._drawingManagerService.getDrawingByParam(updateParam);
+			if (param == null) return;
+			param.transform = updateParam.transform;
+			param.transforms = updateParam.transforms;
+			param.isMultiTransform = updateParam.isMultiTransform;
+		});
+		const selectedObjectKeys = [...transformer.getSelectedObjectMap().keys()];
+		const allMultiDrawings = Object.values(this._drawingManagerService.getDrawingData(unitId, unitId)).filter((drawing) => drawing.isMultiTransform === BooleanNumber.TRUE);
+		this._drawingManagerService.removeNotification(allMultiDrawings);
+		if (multiDrawings.length > 0) this._drawingManagerService.addNotification(multiDrawings);
+		for (const key of selectedObjectKeys) {
+			const drawingShape = scene.getObject(key);
+			if (drawingShape) transformer.setSelectedControl(drawingShape);
+		}
+	}
+	_calculateDrawingPosition(unitId, page, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft) {
+		const { skeDrawings } = page;
+		this._liquid.translatePagePadding({
+			marginTop,
+			marginLeft
+		});
+		skeDrawings.forEach((drawing) => {
+			const { aLeft, aTop, height, width, angle, drawingId, drawingOrigin } = drawing;
+			const behindText = drawingOrigin.layoutType === PositionedObjectLayoutType.WRAP_NONE && drawingOrigin.behindDoc === BooleanNumber.TRUE;
+			const { isMultiTransform = BooleanNumber.FALSE } = drawingOrigin;
+			const transform = {
+				left: aLeft + docsLeft + this._liquid.x,
+				top: aTop + docsTop + this._liquid.y,
+				width,
+				height,
+				angle
+			};
+			if (updateDrawingMap[drawingId] == null) updateDrawingMap[drawingId] = {
+				unitId,
+				subUnitId: unitId,
+				drawingId,
+				behindText,
+				transform,
+				transforms: [transform],
+				isMultiTransform
+			};
+			else if (isMultiTransform === BooleanNumber.TRUE) updateDrawingMap[drawingId].transforms.push(transform);
+		});
+		this._liquid.restorePagePadding({
+			marginTop,
+			marginLeft
+		});
+	}
+	_calculateTableCellDrawingPositions(unitId, page, docsLeft, docsTop, updateDrawingMap, baseMarginTop, baseMarginLeft) {
+		var _page$skeTables;
+		(_page$skeTables = page.skeTables) === null || _page$skeTables === void 0 || _page$skeTables.forEach((table) => {
+			table.rows.forEach((row) => {
+				row.cells.forEach((cell) => {
+					const cellOffset = getDocsTableCellDrawingOffset(unitId, table, row, cell);
+					const marginTop = baseMarginTop + cellOffset.top;
+					const marginLeft = baseMarginLeft + cellOffset.left;
+					this._calculateDrawingPosition(unitId, cell, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft);
+					this._calculateTableCellDrawingPositions(unitId, cell, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft);
+				});
+			});
+		});
+	}
+	_drawingInitializeListener() {
+		const init = () => {
+			const skeleton = this._docSkeletonManagerService.getSkeleton();
+			if (skeleton == null) return;
+			this._refreshDrawing(skeleton);
+			this._drawingManagerService.initializeNotification(this._context.unitId);
+		};
+		if (this._lifecycleService.stage >= LifecycleStages.Rendered) if (this._docSkeletonManagerService.getSkeleton()) init();
+		else setTimeout(init, 500);
+		else this.disposeWithMe(this._lifecycleService.lifecycle$.pipe(filter((stage) => stage === LifecycleStages.Rendered)).subscribe(init));
+	}
+};
+DocDrawingTransformUpdateController = __decorate([
+	__decorateParam(1, Inject(DocSkeletonManagerService)),
+	__decorateParam(2, ICommandService),
+	__decorateParam(3, IEditorService),
+	__decorateParam(4, IDrawingManagerService),
+	__decorateParam(5, Inject(DocRefreshDrawingsService)),
+	__decorateParam(6, IUniverInstanceService),
+	__decorateParam(7, Inject(LifecycleService))
+], DocDrawingTransformUpdateController);
+
 //#endregion
 //#region src/controllers/doc-drawing-transformer-update.controller.ts
 const INLINE_DRAWING_ANCHOR_KEY_PREFIX = "__InlineDrawingAnchor__";
-function isInTableCell(nodePosition) {
-	const { path } = nodePosition;
-	return path.some((p) => p === "cells");
+function getDocsTableCellAnchorContext(unitId, cell) {
+	var _row$cells;
+	const row = cell.parent;
+	const table = row === null || row === void 0 ? void 0 : row.parent;
+	const hostPage = table === null || table === void 0 ? void 0 : table.parent;
+	if (!row || !table || !hostPage || !((_row$cells = row.cells) === null || _row$cells === void 0 ? void 0 : _row$cells.includes(cell))) return null;
+	return {
+		cell,
+		hostPage,
+		offset: getDocsTableCellDrawingOffset(unitId, table, row, cell),
+		row,
+		table
+	};
 }
 let DocDrawingTransformerController = class DocDrawingTransformerController extends Disposable {
 	constructor(_commandService, _univerInstanceService, _drawingManagerService, _renderManagerService) {
@@ -2076,7 +2320,6 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 		const nodePosition = skeleton === null || skeleton === void 0 ? void 0 : skeleton.findPositionByGlyph(glyphAnchor, segmentPageIndex);
 		const docObject = this._getDocObject();
 		if (nodePosition == null || skeleton == null || docObject == null) return;
-		if (isInTableCell(nodePosition)) return;
 		const positionWithIsBack = {
 			...nodePosition,
 			isBack
@@ -2092,7 +2335,7 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 		};
 	}
 	_getDrawingAnchor(drawing, object) {
-		var _this$_renderManagerS2, _glyphAnchor$parent, _column$lines$find, _column$parent, _getOneTextSelectionR2;
+		var _this$_renderManagerS2, _glyphAnchor$parent, _column$lines$find, _column$parent, _tableCellContext$hos, _getOneTextSelectionR2;
 		const currentRender = this._renderManagerService.getRenderById(drawing.unitId);
 		const skeleton = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(DocSkeletonManagerService).getSkeleton();
 		const skeletonData = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getSkeletonData();
@@ -2143,7 +2386,9 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 		const page = column === null || column === void 0 || (_column$parent = column.parent) === null || _column$parent === void 0 ? void 0 : _column$parent.parent;
 		if (line == null || column == null || paragraphStartLine == null || page == null) return;
 		this._liquid.reset();
-		const pageType = page.type;
+		const tableCellContext = page.type === DocumentSkeletonPageType.CELL ? getDocsTableCellAnchorContext(drawing.unitId, page) : null;
+		const anchorPage = (_tableCellContext$hos = tableCellContext === null || tableCellContext === void 0 ? void 0 : tableCellContext.hostPage) !== null && _tableCellContext$hos !== void 0 ? _tableCellContext$hos : page;
+		const pageType = anchorPage.type;
 		for (const p of pages) {
 			const { headerId, footerId, pageHeight, pageWidth, marginLeft, marginBottom } = p;
 			const pIndex = pages.indexOf(p);
@@ -2169,14 +2414,18 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 						else throw new Error("footer skeleton not found");
 						break;
 					}
+					default:
+						this._liquid.translatePagePadding(p);
+						break;
 				}
 				break;
 			}
 			this._liquid.translatePagePadding(p);
-			if (p === page) break;
+			if (p === anchorPage) break;
 			this._liquid.restorePagePadding(p);
 			this._liquid.translatePage(p, pageLayoutType, pageMarginLeft, pageMarginTop);
 		}
+		if (tableCellContext) this._liquid.translate(tableCellContext.offset.left, tableCellContext.offset.top);
 		if (positionV.relativeFrom === ObjectRelativeFromV.LINE) glyphAnchor = line.divides[0].glyphGroup[0];
 		else {
 			var _paragraphStartLine$d, _paragraphStartLine$d2;
@@ -2213,7 +2462,6 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 		const nodePosition = skeleton === null || skeleton === void 0 ? void 0 : skeleton.findPositionByGlyph(glyphAnchor, segmentPage);
 		const docObject = this._getDocObject();
 		if (nodePosition == null || skeleton == null || docObject == null) return;
-		if (isInTableCell(nodePosition)) return;
 		const positionWithIsBack = {
 			...nodePosition,
 			isBack
@@ -2404,14 +2652,30 @@ DocDrawingTransformerController = __decorate([
 
 //#endregion
 //#region src/menu/schema.ts
-const menuSchema = { [RibbonInsertGroup.MEDIA]: { [DOCS_IMAGE_MENU_ID]: {
-	order: 0,
-	menuItemFactory: ImageMenuFactory,
-	[IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+const menuSchema = {
+	[RibbonInsertGroup.MEDIA]: { [DOCS_IMAGE_MENU_ID]: {
 		order: 0,
-		menuItemFactory: UploadFloatImageMenuFactory
+		menuItemFactory: ImageMenuFactory,
+		[IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+			order: 0,
+			menuItemFactory: UploadFloatImageMenuFactory
+		}
+	} },
+	[ContextMenuPosition.PARAGRAPH]: {
+		[ContextMenuGroup.LAYOUT]: { [INSERT_BELLOW_MENU_ID]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+			order: 5,
+			menuItemFactory: UploadFloatImageMenuFactory
+		} } },
+		[EMPTY_PARAGRAPH_MENU_ID]: { [ContextMenuGroup.LAYOUT]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+			order: 5,
+			menuItemFactory: UploadFloatImageMenuFactory
+		} } },
+		[DOC_CONTENT_INSERT_MENU_ID]: { [ContextMenuGroup.LAYOUT]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+			order: 5,
+			menuItemFactory: UploadFloatImageMenuFactory
+		} } }
 	}
-} } };
+};
 
 //#endregion
 //#region src/views/doc-image-panel/DocDrawingPosition.tsx
@@ -2435,36 +2699,36 @@ const DocDrawingPosition = (props) => {
 	const transformer = scene.getTransformerByCreate();
 	const HORIZONTAL_RELATIVE_FROM = [
 		{
-			label: localeService.t("image-position.column"),
+			label: localeService.t("docs-drawing-ui.image-position.column"),
 			value: String(ObjectRelativeFromH.COLUMN)
 		},
 		{
-			label: localeService.t("image-position.page"),
+			label: localeService.t("docs-drawing-ui.image-position.page"),
 			value: String(ObjectRelativeFromH.PAGE)
 		},
 		{
-			label: localeService.t("image-position.margin"),
+			label: localeService.t("docs-drawing-ui.image-position.margin"),
 			value: String(ObjectRelativeFromH.MARGIN)
 		}
 	];
 	const VERTICAL_RELATIVE_FROM = [
 		{
-			label: localeService.t("image-position.line"),
+			label: localeService.t("docs-drawing-ui.image-position.line"),
 			value: String(ObjectRelativeFromV.LINE),
 			disabled: documentFlavor === DocumentFlavor.MODERN
 		},
 		{
-			label: localeService.t("image-position.page"),
+			label: localeService.t("docs-drawing-ui.image-position.page"),
 			value: String(ObjectRelativeFromV.PAGE),
 			disabled: documentFlavor === DocumentFlavor.MODERN
 		},
 		{
-			label: localeService.t("image-position.margin"),
+			label: localeService.t("docs-drawing-ui.image-position.margin"),
 			value: String(ObjectRelativeFromV.MARGIN),
 			disabled: documentFlavor === DocumentFlavor.MODERN
 		},
 		{
-			label: localeService.t("image-position.paragraph"),
+			label: localeService.t("docs-drawing-ui.image-position.paragraph"),
 			value: String(ObjectRelativeFromV.PARAGRAPH)
 		}
 	];
@@ -2633,15 +2897,15 @@ const DocDrawingPosition = (props) => {
 		children: [
 			/* @__PURE__ */ jsx("header", {
 				className: "univer-text-gray-600 dark:!univer-text-gray-200",
-				children: /* @__PURE__ */ jsx("div", { children: localeService.t("image-position.title") })
+				children: /* @__PURE__ */ jsx("div", { children: localeService.t("docs-drawing-ui.image-position.title") })
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "univer-text-gray-600 dark:!univer-text-gray-200",
-				children: /* @__PURE__ */ jsx("div", { children: localeService.t("image-position.horizontal") })
+				children: /* @__PURE__ */ jsx("div", { children: localeService.t("docs-drawing-ui.image-position.horizontal") })
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
-				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-position.absolutePosition") }), /* @__PURE__ */ jsx(InputNumber, {
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("docs-drawing-ui.image-position.absolutePosition") }), /* @__PURE__ */ jsx(InputNumber, {
 					min: MIN_OFFSET,
 					max: MAX_OFFSET,
 					precision: 1,
@@ -2653,7 +2917,7 @@ const DocDrawingPosition = (props) => {
 							posOffset: val
 						});
 					}
-				})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-position.toTheRightOf") }), /* @__PURE__ */ jsx(Select, {
+				})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("docs-drawing-ui.image-position.toTheRightOf") }), /* @__PURE__ */ jsx(Select, {
 					value: String(hPosition.relativeFrom),
 					disabled,
 					options: HORIZONTAL_RELATIVE_FROM,
@@ -2662,11 +2926,11 @@ const DocDrawingPosition = (props) => {
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "univer-text-gray-600 dark:!univer-text-gray-200",
-				children: /* @__PURE__ */ jsx("div", { children: localeService.t("image-position.vertical") })
+				children: /* @__PURE__ */ jsx("div", { children: localeService.t("docs-drawing-ui.image-position.vertical") })
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
-				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-position.absolutePosition") }), /* @__PURE__ */ jsx(InputNumber, {
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("docs-drawing-ui.image-position.absolutePosition") }), /* @__PURE__ */ jsx(InputNumber, {
 					min: MIN_OFFSET,
 					max: MAX_OFFSET,
 					precision: 1,
@@ -2678,7 +2942,7 @@ const DocDrawingPosition = (props) => {
 							posOffset: val
 						});
 					}
-				})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-position.bellow") }), /* @__PURE__ */ jsx(Select, {
+				})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("docs-drawing-ui.image-position.bellow") }), /* @__PURE__ */ jsx(Select, {
 					disabled,
 					value: String(vPosition.relativeFrom),
 					options: VERTICAL_RELATIVE_FROM,
@@ -2687,13 +2951,13 @@ const DocDrawingPosition = (props) => {
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "univer-text-gray-600 dark:!univer-text-gray-200",
-				children: /* @__PURE__ */ jsx("div", { children: localeService.t("image-position.options") })
+				children: /* @__PURE__ */ jsx("div", { children: localeService.t("docs-drawing-ui.image-position.options") })
 			}),
 			/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Checkbox, {
 				disabled,
 				checked: followTextMove,
 				onChange: handleFollowTextMoveCheck,
-				children: localeService.t("image-position.moveObjectWithText")
+				children: localeService.t("docs-drawing-ui.image-position.moveObjectWithText")
 			}) })
 		]
 	});
@@ -2845,11 +3109,11 @@ const DocDrawingTextWrap = (props) => {
 		children: [
 			/* @__PURE__ */ jsx("header", {
 				className: "univer-text-gray-600 dark:!univer-text-gray-200",
-				children: /* @__PURE__ */ jsx("div", { children: localeService.t("image-text-wrap.title") })
+				children: /* @__PURE__ */ jsx("div", { children: localeService.t("docs-drawing-ui.image-text-wrap.title") })
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "univer-text-gray-600 dark:!univer-text-gray-200",
-				children: /* @__PURE__ */ jsx("div", { children: localeService.t("image-text-wrap.wrappingStyle") })
+				children: /* @__PURE__ */ jsx("div", { children: localeService.t("docs-drawing-ui.image-text-wrap.wrappingStyle") })
 			}),
 			/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(RadioGroup, {
 				value: wrappingStyle,
@@ -2858,29 +3122,29 @@ const DocDrawingTextWrap = (props) => {
 				children: [
 					/* @__PURE__ */ jsx(Radio, {
 						value: "inline",
-						children: localeService.t("image-text-wrap.inline")
+						children: localeService.t("docs-drawing-ui.image-text-wrap.inline")
 					}),
 					/* @__PURE__ */ jsx(Radio, {
 						value: "wrapSquare",
-						children: localeService.t("image-text-wrap.square")
+						children: localeService.t("docs-drawing-ui.image-text-wrap.square")
 					}),
 					/* @__PURE__ */ jsx(Radio, {
 						value: "wrapTopAndBottom",
-						children: localeService.t("image-text-wrap.topAndBottom")
+						children: localeService.t("docs-drawing-ui.image-text-wrap.topAndBottom")
 					}),
 					/* @__PURE__ */ jsx(Radio, {
 						value: "behindText",
-						children: localeService.t("image-text-wrap.behindText")
+						children: localeService.t("docs-drawing-ui.image-text-wrap.behindText")
 					}),
 					/* @__PURE__ */ jsx(Radio, {
 						value: "inFrontOfText",
-						children: localeService.t("image-text-wrap.inFrontText")
+						children: localeService.t("docs-drawing-ui.image-text-wrap.inFrontText")
 					})
 				]
 			}) }),
 			/* @__PURE__ */ jsx("div", {
 				className: "univer-text-gray-600 dark:!univer-text-gray-200",
-				children: /* @__PURE__ */ jsx("div", { children: localeService.t("image-text-wrap.wrapText") })
+				children: /* @__PURE__ */ jsx("div", { children: localeService.t("docs-drawing-ui.image-text-wrap.wrapText") })
 			}),
 			/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(RadioGroup, {
 				disabled: disableWrapText,
@@ -2890,25 +3154,25 @@ const DocDrawingTextWrap = (props) => {
 				children: [
 					/* @__PURE__ */ jsx(Radio, {
 						value: WrapTextType.BOTH_SIDES,
-						children: localeService.t("image-text-wrap.bothSide")
+						children: localeService.t("docs-drawing-ui.image-text-wrap.bothSide")
 					}),
 					/* @__PURE__ */ jsx(Radio, {
 						value: WrapTextType.LEFT,
-						children: localeService.t("image-text-wrap.leftOnly")
+						children: localeService.t("docs-drawing-ui.image-text-wrap.leftOnly")
 					}),
 					/* @__PURE__ */ jsx(Radio, {
 						value: WrapTextType.RIGHT,
-						children: localeService.t("image-text-wrap.rightOnly")
+						children: localeService.t("docs-drawing-ui.image-text-wrap.rightOnly")
 					})
 				]
 			}) }),
 			/* @__PURE__ */ jsx("div", {
 				className: "univer-text-gray-600 dark:!univer-text-gray-200",
-				children: /* @__PURE__ */ jsx("div", { children: localeService.t("image-text-wrap.distanceFromText") })
+				children: /* @__PURE__ */ jsx("div", { children: localeService.t("docs-drawing-ui.image-text-wrap.distanceFromText") })
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
-				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-text-wrap.top") }), /* @__PURE__ */ jsx(InputNumber, {
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("docs-drawing-ui.image-text-wrap.top") }), /* @__PURE__ */ jsx(InputNumber, {
 					min: MIN_MARGIN,
 					max: MAX_MARGIN,
 					disabled: disableDistTB,
@@ -2917,7 +3181,7 @@ const DocDrawingTextWrap = (props) => {
 					onChange: (val) => {
 						handleDistToTextChange(val, "distT");
 					}
-				})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-text-wrap.left") }), /* @__PURE__ */ jsx(InputNumber, {
+				})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("docs-drawing-ui.image-text-wrap.left") }), /* @__PURE__ */ jsx(InputNumber, {
 					min: MIN_MARGIN,
 					max: MAX_MARGIN,
 					disabled: disableDistLR,
@@ -2930,7 +3194,7 @@ const DocDrawingTextWrap = (props) => {
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
-				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-text-wrap.bottom") }), /* @__PURE__ */ jsx(InputNumber, {
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("docs-drawing-ui.image-text-wrap.bottom") }), /* @__PURE__ */ jsx(InputNumber, {
 					min: MIN_MARGIN,
 					max: MAX_MARGIN,
 					disabled: disableDistTB,
@@ -2939,7 +3203,7 @@ const DocDrawingTextWrap = (props) => {
 					onChange: (val) => {
 						handleDistToTextChange(val, "distB");
 					}
-				})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-text-wrap.right") }), /* @__PURE__ */ jsx(InputNumber, {
+				})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("docs-drawing-ui.image-text-wrap.right") }), /* @__PURE__ */ jsx(InputNumber, {
 					min: MIN_MARGIN,
 					max: MAX_MARGIN,
 					disabled: disableDistLR,
@@ -2973,7 +3237,7 @@ const DocDrawingPanel = () => {
 			/* @__PURE__ */ jsx(DrawingCommonPanel, {
 				drawings,
 				hasAlign: false,
-				hasCropper: false,
+				hasCropper: true,
 				hasGroup: false,
 				hasTransform: false
 			}),
@@ -2990,8 +3254,9 @@ function whenDocDrawingFocused(contextService) {
 }
 const MoveDrawingDownShortcutItem = {
 	id: MoveDocDrawingsCommand.id,
-	description: "shortcut.drawing-move-down",
+	description: "docs-drawing-ui.shortcut.drawing-move-down",
 	group: "4_drawing-view",
+	groupTitle: "docs-drawing-ui.shortcut.drawing-view",
 	binding: KeyCode.ARROW_DOWN,
 	priority: 100,
 	preconditions: whenDocDrawingFocused,
@@ -2999,8 +3264,9 @@ const MoveDrawingDownShortcutItem = {
 };
 const MoveDrawingUpShortcutItem = {
 	id: MoveDocDrawingsCommand.id,
-	description: "shortcut.drawing-move-up",
+	description: "docs-drawing-ui.shortcut.drawing-move-up",
 	group: "4_drawing-view",
+	groupTitle: "docs-drawing-ui.shortcut.drawing-view",
 	binding: KeyCode.ARROW_UP,
 	priority: 100,
 	preconditions: whenDocDrawingFocused,
@@ -3008,8 +3274,9 @@ const MoveDrawingUpShortcutItem = {
 };
 const MoveDrawingLeftShortcutItem = {
 	id: MoveDocDrawingsCommand.id,
-	description: "shortcut.drawing-move-left",
+	description: "docs-drawing-ui.shortcut.drawing-move-left",
 	group: "4_drawing-view",
+	groupTitle: "docs-drawing-ui.shortcut.drawing-view",
 	binding: KeyCode.ARROW_LEFT,
 	priority: 100,
 	preconditions: whenDocDrawingFocused,
@@ -3017,8 +3284,9 @@ const MoveDrawingLeftShortcutItem = {
 };
 const MoveDrawingRightShortcutItem = {
 	id: MoveDocDrawingsCommand.id,
-	description: "shortcut.drawing-move-right",
+	description: "docs-drawing-ui.shortcut.drawing-move-right",
 	group: "4_drawing-view",
+	groupTitle: "docs-drawing-ui.shortcut.drawing-view",
 	binding: KeyCode.ARROW_RIGHT,
 	priority: 100,
 	preconditions: whenDocDrawingFocused,
@@ -3026,8 +3294,9 @@ const MoveDrawingRightShortcutItem = {
 };
 const DeleteDrawingsShortcutItem = {
 	id: DeleteDocDrawingsCommand.id,
-	description: "shortcut.drawing-delete",
+	description: "docs-drawing-ui.shortcut.drawing-delete",
 	group: "4_drawing-view",
+	groupTitle: "docs-drawing-ui.shortcut.drawing-view",
 	preconditions: whenDocDrawingFocused,
 	binding: KeyCode.DELETE,
 	mac: KeyCode.BACKSPACE
@@ -3112,199 +3381,50 @@ DocDrawingUIController = __decorate([
 	__decorateParam(3, IShortcutService)
 ], DocDrawingUIController);
 
-//#endregion
-//#region src/controllers/render-controllers/doc-drawing-transform-update.controller.ts
-let DocDrawingTransformUpdateController = class DocDrawingTransformUpdateController extends Disposable {
-	constructor(_context, _docSkeletonManagerService, _commandService, _editorService, _drawingManagerService, _docRefreshDrawingsService, _univerInstanceService, _lifecycleService) {
-		super();
-		this._context = _context;
-		this._docSkeletonManagerService = _docSkeletonManagerService;
-		this._commandService = _commandService;
-		this._editorService = _editorService;
-		this._drawingManagerService = _drawingManagerService;
-		this._docRefreshDrawingsService = _docRefreshDrawingsService;
-		this._univerInstanceService = _univerInstanceService;
-		this._lifecycleService = _lifecycleService;
-		_defineProperty(this, "_liquid", new Liquid());
-		this._initialize();
-		this._commandExecutedListener();
-	}
-	_initialize() {
-		this._initialRenderRefresh();
-		this._drawingInitializeListener();
-		this._initResize();
-	}
-	_initialRenderRefresh() {
-		this.disposeWithMe(this._docSkeletonManagerService.currentSkeleton$.subscribe((documentSkeleton) => {
-			if (documentSkeleton == null) return;
-			this._refreshDrawing(documentSkeleton);
-		}));
-		this.disposeWithMe(this._docRefreshDrawingsService.refreshDrawings$.subscribe((skeleton) => {
-			if (skeleton == null) return;
-			this._refreshDrawing(skeleton);
-		}));
-	}
-	_commandExecutedListener() {
-		const updateCommandList = [RichTextEditingMutation.id, SetDocZoomRatioOperation.id];
-		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
-			if (updateCommandList.includes(command.id)) {
-				const { unitId: commandUnitId } = command.params;
-				const { unitId, mainComponent } = this._context;
-				if (commandUnitId !== unitId) return;
-				const skeleton = this._docSkeletonManagerService.getSkeleton();
-				if (skeleton == null) return;
-				if (this._editorService.isEditor(unitId) && unitId !== DOCS_ZEN_EDITOR_UNIT_ID_KEY) {
-					mainComponent === null || mainComponent === void 0 || mainComponent.makeDirty();
-					return;
-				}
-				this._refreshDrawing(skeleton);
-			}
-		}));
-	}
-	_initResize() {
-		this.disposeWithMe(fromEventSubject(this._context.engine.onTransformChange$).pipe(filter((evt) => evt.type === TRANSFORM_CHANGE_OBSERVABLE_TYPE.resize), debounceTime(16)).subscribe(() => {
-			var _scene$getTransformer;
-			const skeleton = this._docSkeletonManagerService.getSkeleton();
-			const { scene } = this._context;
-			(_scene$getTransformer = scene.getTransformer()) === null || _scene$getTransformer === void 0 || _scene$getTransformer.refreshControls();
-			this._refreshDrawing(skeleton);
-		}));
-	}
-	_refreshDrawing(skeleton) {
-		const skeletonData = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getSkeletonData();
-		const { mainComponent, unitId } = this._context;
-		const documentComponent = mainComponent;
-		if (!skeletonData) return;
-		const { left: docsLeft, top: docsTop, pageLayoutType, pageMarginLeft, pageMarginTop } = documentComponent;
-		const { pages, skeHeaders, skeFooters } = skeletonData;
-		const updateDrawingMap = {};
-		this._liquid.reset();
-		/**
-		* TODO: @DR-Univer We should not refresh all floating elements, but instead make a diff.
-		*/
-		for (let i = 0, len = pages.length; i < len; i++) {
-			const page = pages[i];
-			const { headerId, footerId, pageWidth } = page;
-			if (headerId) {
-				var _skeHeaders$get;
-				const headerPage = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(pageWidth);
-				if (headerPage) this._calculateDrawingPosition(unitId, headerPage, docsLeft, docsTop, updateDrawingMap, headerPage.marginTop, page.marginLeft);
-			}
-			if (footerId) {
-				var _skeFooters$get;
-				const footerPage = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(pageWidth);
-				if (footerPage) this._calculateDrawingPosition(unitId, footerPage, docsLeft, docsTop, updateDrawingMap, page.pageHeight - page.marginBottom + footerPage.marginTop, page.marginLeft);
-			}
-			this._calculateDrawingPosition(unitId, page, docsLeft, docsTop, updateDrawingMap, page.marginTop, page.marginLeft);
-			this._liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
-		}
-		const updateDrawings = Object.values(updateDrawingMap);
-		const nonMultiDrawings = updateDrawings.filter((drawing) => !drawing.isMultiTransform);
-		const multiDrawings = updateDrawings.filter((drawing) => drawing.isMultiTransform);
-		if (nonMultiDrawings.length > 0) this._drawingManagerService.refreshTransform(nonMultiDrawings);
-		this._handleMultiDrawingsTransform(multiDrawings);
-	}
-	_handleMultiDrawingsTransform(multiDrawings) {
-		const { scene, unitId } = this._context;
-		const transformer = scene.getTransformerByCreate();
-		multiDrawings.forEach((updateParam) => {
-			const param = this._drawingManagerService.getDrawingByParam(updateParam);
-			if (param == null) return;
-			param.transform = updateParam.transform;
-			param.transforms = updateParam.transforms;
-			param.isMultiTransform = updateParam.isMultiTransform;
-		});
-		const selectedObjectKeys = [...transformer.getSelectedObjectMap().keys()];
-		const allMultiDrawings = Object.values(this._drawingManagerService.getDrawingData(unitId, unitId)).filter((drawing) => drawing.isMultiTransform === BooleanNumber.TRUE);
-		this._drawingManagerService.removeNotification(allMultiDrawings);
-		if (multiDrawings.length > 0) this._drawingManagerService.addNotification(multiDrawings);
-		for (const key of selectedObjectKeys) {
-			const drawingShape = scene.getObject(key);
-			if (drawingShape) transformer.setSelectedControl(drawingShape);
-		}
-	}
-	_calculateDrawingPosition(unitId, page, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft) {
-		const { skeDrawings } = page;
-		this._liquid.translatePagePadding({
-			marginTop,
-			marginLeft
-		});
-		skeDrawings.forEach((drawing) => {
-			const { aLeft, aTop, height, width, angle, drawingId, drawingOrigin } = drawing;
-			const behindText = drawingOrigin.layoutType === PositionedObjectLayoutType.WRAP_NONE && drawingOrigin.behindDoc === BooleanNumber.TRUE;
-			const { isMultiTransform = BooleanNumber.FALSE } = drawingOrigin;
-			const transform = {
-				left: aLeft + docsLeft + this._liquid.x,
-				top: aTop + docsTop + this._liquid.y,
-				width,
-				height,
-				angle
-			};
-			if (updateDrawingMap[drawingId] == null) updateDrawingMap[drawingId] = {
-				unitId,
-				subUnitId: unitId,
-				drawingId,
-				behindText,
-				transform,
-				transforms: [transform],
-				isMultiTransform
-			};
-			else if (isMultiTransform === BooleanNumber.TRUE) updateDrawingMap[drawingId].transforms.push(transform);
-		});
-		this._liquid.restorePagePadding({
-			marginTop,
-			marginLeft
-		});
-	}
-	_drawingInitializeListener() {
-		const init = () => {
-			const skeleton = this._docSkeletonManagerService.getSkeleton();
-			if (skeleton == null) return;
-			this._refreshDrawing(skeleton);
-			this._drawingManagerService.initializeNotification(this._context.unitId);
-		};
-		if (this._lifecycleService.stage >= LifecycleStages.Rendered) if (this._docSkeletonManagerService.getSkeleton()) init();
-		else setTimeout(init, 500);
-		else this.disposeWithMe(this._lifecycleService.lifecycle$.pipe(filter((stage) => stage === LifecycleStages.Rendered)).subscribe(init));
-	}
-};
-DocDrawingTransformUpdateController = __decorate([
-	__decorateParam(1, Inject(DocSkeletonManagerService)),
-	__decorateParam(2, ICommandService),
-	__decorateParam(3, IEditorService),
-	__decorateParam(4, IDrawingManagerService),
-	__decorateParam(5, Inject(DocRefreshDrawingsService)),
-	__decorateParam(6, IUniverInstanceService),
-	__decorateParam(7, Inject(LifecycleService))
-], DocDrawingTransformUpdateController);
-
 //#endregion
 //#region src/menu/drawing-popup-menu.controller.ts
 let DocDrawingPopupMenuController = class DocDrawingPopupMenuController extends RxDisposable {
-	constructor(_drawingManagerService, _canvasPopManagerService, _renderManagerService, _univerInstanceService, _contextService) {
+	constructor(_drawingManagerService, _canvasPopManagerService, _renderManagerService, _univerInstanceService, _contextService, _commandService) {
 		super();
 		this._drawingManagerService = _drawingManagerService;
 		this._canvasPopManagerService = _canvasPopManagerService;
 		this._renderManagerService = _renderManagerService;
 		this._univerInstanceService = _univerInstanceService;
 		this._contextService = _contextService;
+		this._commandService = _commandService;
 		_defineProperty(this, "_initImagePopupMenu", /* @__PURE__ */ new Set());
 		_defineProperty(this, "_disposePopups", []);
+		_defineProperty(this, "_isDrawingPanelOpen", false);
 		this._init();
 	}
 	_init() {
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (command.id === EditDocDrawingOperation.id) {
+				this._isDrawingPanelOpen = true;
+				this._clearPopups();
+			}
+			if (command.id === SidebarDocDrawingOperation.id) {
+				const params = command.params;
+				this._isDrawingPanelOpen = (params === null || params === void 0 ? void 0 : params.value) === "open";
+				if (this._isDrawingPanelOpen) this._clearPopups();
+			}
+		}));
+		this.disposeWithMe(this._drawingManagerService.focus$.subscribe((params) => {
+			if (params.length === 0) this._isDrawingPanelOpen = false;
+		}));
 		this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_DOC).pipe(takeUntil(this.dispose$)).subscribe((documentDataModel) => this._create(documentDataModel)));
 		this.disposeWithMe(this._univerInstanceService.getTypeOfUnitDisposed$(UniverInstanceType.UNIVER_DOC).pipe(takeUntil(this.dispose$)).subscribe((documentDataModel) => this._dispose(documentDataModel)));
 		this._univerInstanceService.getAllUnitsForType(UniverInstanceType.UNIVER_DOC).forEach((documentDataModel) => this._create(documentDataModel));
 	}
 	_dispose(documentDataModel) {
 		const unitId = documentDataModel.getUnitId();
-		if (this._disposePopups.length) {
-			this._disposePopups.forEach((dispose) => dispose.dispose());
-			this._disposePopups.length = 0;
-		}
+		this._clearPopups();
 		this._renderManagerService.removeRender(unitId);
 	}
+	_clearPopups() {
+		this._disposePopups.forEach((dispose) => dispose.dispose());
+		this._disposePopups.length = 0;
+	}
 	_create(documentDataModel) {
 		if (!documentDataModel) return;
 		const unitId = documentDataModel.getUnitId();
@@ -3331,18 +3451,26 @@ let DocDrawingPopupMenuController = class DocDrawingPopupMenuController extends
 			const selectedObjects = transformer.getSelectedObjectMap();
 			disposePopups.forEach((dispose) => dispose.dispose());
 			disposePopups.length = 0;
+			if (this._isDrawingPanelOpen) return;
 			if (selectedObjects.size > 1) return;
 			const object = selectedObjects.values().next().value;
 			if (!object) return;
 			const oKey = object.oKey;
 			const drawingParam = this._drawingManagerService.getDrawingOKey(oKey);
-			if (!drawingParam || drawingParam.drawingType === DrawingTypeEnum.DRAWING_DOM) return;
+			if (!drawingParam || drawingParam.drawingType === DrawingTypeEnum.DRAWING_DOM || drawingParam.drawingType === DrawingTypeEnum.DRAWING_SHAPE) return;
 			const { unitId, subUnitId, drawingId, drawingType } = drawingParam;
+			const isImage = drawingType === DrawingTypeEnum.DRAWING_IMAGE;
 			const popup = this._canvasPopManagerService.attachPopupToObject(object, {
 				componentKey: COMPONENT_IMAGE_POPUP_MENU,
-				direction: "horizontal",
-				offset: [2, 0],
-				extraProps: { menuItems: this._getImageMenuItems(unitId, subUnitId, drawingId, drawingType) }
+				direction: isImage ? "top-center" : "horizontal",
+				offset: isImage ? [0, 8] : [2, 0],
+				extraProps: {
+					menuItems: this._getImageMenuItems(unitId, subUnitId, drawingId, drawingType),
+					variant: isImage ? "doc-floating-toolbar" : void 0,
+					unitId,
+					subUnitId,
+					drawingId
+				}
 			}, unitId);
 			disposePopups.push(this.disposeWithMe(popup));
 			if (this._drawingManagerService.getFocusDrawings().find((drawing) => drawing.unitId === unitId && drawing.subUnitId === subUnitId && drawing.drawingId === drawingId)) return;
@@ -3370,7 +3498,7 @@ let DocDrawingPopupMenuController = class DocDrawingPopupMenuController extends
 	_getImageMenuItems(unitId, subUnitId, drawingId, drawingType) {
 		return [
 			{
-				label: "image-popup.edit",
+				label: "docs-drawing-ui.image-popup.edit",
 				index: 0,
 				commandId: EditDocDrawingOperation.id,
 				commandParams: {
@@ -3378,10 +3506,10 @@ let DocDrawingPopupMenuController = class DocDrawingPopupMenuController extends
 					subUnitId,
 					drawingId
 				},
-				disable: true
+				disable: drawingType === DrawingTypeEnum.DRAWING_DOM
 			},
 			{
-				label: "image-popup.delete",
+				label: "docs-drawing-ui.image-popup.delete",
 				index: 1,
 				commandId: RemoveDocDrawingCommand.id,
 				commandParams: {
@@ -3395,7 +3523,7 @@ let DocDrawingPopupMenuController = class DocDrawingPopupMenuController extends
 				disable: false
 			},
 			{
-				label: "image-popup.crop",
+				label: "docs-drawing-ui.image-popup.crop",
 				index: 2,
 				commandId: OpenImageCropOperation.id,
 				commandParams: {
@@ -3403,10 +3531,10 @@ let DocDrawingPopupMenuController = class DocDrawingPopupMenuController extends
 					subUnitId,
 					drawingId
 				},
-				disable: true
+				disable: drawingType === DrawingTypeEnum.DRAWING_DOM
 			},
 			{
-				label: "image-popup.reset",
+				label: "docs-drawing-ui.image-popup.reset",
 				index: 3,
 				commandId: ImageResetSizeOperation.id,
 				commandParams: [{
@@ -3424,7 +3552,8 @@ DocDrawingPopupMenuController = __decorate([
 	__decorateParam(1, Inject(DocCanvasPopManagerService)),
 	__decorateParam(2, IRenderManagerService),
 	__decorateParam(3, IUniverInstanceService),
-	__decorateParam(4, IContextService)
+	__decorateParam(4, IContextService),
+	__decorateParam(5, ICommandService)
 ], DocDrawingPopupMenuController);
 
 //#endregion
@@ -3474,4 +3603,4 @@ UniverDocsDrawingUIPlugin = __decorate([
 ], UniverDocsDrawingUIPlugin);
 
 //#endregion
-export { ClearDocDrawingTransformerOperation, DOCS_IMAGE_MENU_ID, DeleteDocDrawingsCommand, DocFloatDomController, EditDocDrawingOperation, GroupDocDrawingCommand, InsertDocDrawingCommand, InsertDocImageCommand, MoveDocDrawingsCommand, RemoveDocDrawingCommand, SetDocDrawingArrangeCommand, SidebarDocDrawingOperation, UngroupDocDrawingCommand, UniverDocsDrawingUIPlugin };
+export { ClearDocDrawingTransformerOperation, DOCS_IMAGE_MENU_ID, DeleteDocDrawingsCommand, DocDrawingPosition, DocDrawingTextWrap, DocFloatDomController, EditDocDrawingOperation, GroupDocDrawingCommand, InsertDocDrawingCommand, InsertDocImageCommand, MoveDocDrawingsCommand, RemoveDocDrawingCommand, SetDocDrawingArrangeCommand, SidebarDocDrawingOperation, UngroupDocDrawingCommand, UniverDocsDrawingUIPlugin };