@univerjs/docs-drawing-ui 1.0.0-alpha.3 → 1.0.0-alpha.4

package/lib/es/index.js

@@ -1,149 +1,16 @@
-import { AlignTypeH, AlignTypeV, ArrangeTypeEnum, BooleanNumber, BuildTextUtils, COLORS, CommandType, DOC_DRAWING_PRINTING_COMPONENT_KEY, DependentOn, Direction, Disposable, DisposableCollection, DocumentFlavor, DrawingTypeEnum, FOCUSING_COMMON_DRAWINGS, FOCUSING_DOC, FOCUSING_UNIVER_EDITOR, ICommandService, IConfigService, IContextService, IImageIoService, IUndoRedoService, IUniverInstanceService, ImageSourceType, ImageUploadStatusType, Inject, Injector, JSONX, LifecycleService, LifecycleStages, LocaleService, MemoryCursor, ObjectRelativeFromH, ObjectRelativeFromV, Plugin, PositionedObjectLayoutType, RedoCommand, RxDisposable, TextX, TextXActionType, Tools, UndoCommand, UniverInstanceType, WrapTextType, fromEventSubject, generateRandomId, getRichTextEditPath, isInternalEditorID, merge, throttle, toDisposable } from "@univerjs/core";
-import { IDocDrawingAdapterService, IDocDrawingService, UniverDocsDrawingPlugin, getDocDrawingRenderOrder } from "@univerjs/docs-drawing";
-import { DocContentInsertService, DocSelectionManagerService, DocSkeletonManagerService, RichTextEditingMutation } from "@univerjs/docs";
-import { DOC_CONTENT_INSERT_MENU_ID, DOC_PARAGRAPH_T_INSERT_BELOW_MENU_ID, DOC_PARAGRAPH_T_INSERT_MENU_ID, DocCanvasPopManagerService, DocPrintInterceptorService, DocSelectionRenderService, EMPTY_PARAGRAPH_MENU_ID, IEditorService, INSERT_BELLOW_MENU_ID, NodePositionConvertToCursor, SetDocZoomRatioOperation, TEXT_RANGE_LAYER_INDEX, VIEWPORT_KEY, docDrawingPositionToTransform, getAnchorBounding, getCustomBlockIdsInSelections, getDocObject, getOneTextSelectionRange } from "@univerjs/docs-ui";
+import { AlignTypeH, AlignTypeV, BooleanNumber, COLORS, CommandType, DOC_DRAWING_PRINTING_COMPONENT_KEY, DependentOn, Direction, Disposable, DisposableCollection, DocumentFlavor, DrawingTypeEnum, FOCUSING_COMMON_DRAWINGS, FOCUSING_DOC, FOCUSING_UNIVER_EDITOR, ICommandService, IConfigService, IContextService, IImageIoService, IUniverInstanceService, ImageSourceType, ImageUploadStatusType, Inject, Injector, JSONX, LifecycleService, LifecycleStages, LocaleService, ObjectRelativeFromH, ObjectRelativeFromV, Plugin, PositionedObjectLayoutType, RedoCommand, RxDisposable, TextX, TextXActionType, Tools, UndoCommand, UniverInstanceType, WrapTextType, fromEventSubject, generateRandomId, getRichTextEditPath, isInternalEditorID, merge, throttle, toDisposable } from "@univerjs/core";
+import { IDocDrawingAdapterService, IDocDrawingService, InsertDocDrawingCommand, RemoveDocDrawingCommand, SetDocDrawingArrangeCommand, TextWrappingStyle, UniverDocsDrawingPlugin, UpdateDocDrawingWrappingStyleCommand, UpdateDrawingDocTransformCommand, getDocDrawingRenderOrder } from "@univerjs/docs-drawing";
 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 { DocSelectionManagerService, DocSkeletonManagerService, RichTextEditingMutation, buildDocTransform, docDrawingPositionToTransform } from "@univerjs/docs";
+import { DOC_CONTENT_INSERT_MENU_ID, DOC_PARAGRAPH_T_INSERT_BELOW_MENU_ID, DOC_PARAGRAPH_T_INSERT_MENU_ID, DocCanvasPopManagerService, DocPrintInterceptorService, DocSelectionRenderService, EMPTY_PARAGRAPH_MENU_ID, IEditorService, INSERT_BELLOW_MENU_ID, NodePositionConvertToCursor, SetDocZoomRatioOperation, TEXT_RANGE_LAYER_INDEX, VIEWPORT_KEY, getAnchorBounding, getDocObject, getOneTextSelectionRange } from "@univerjs/docs-ui";
 import { DRAWING_IMAGE_ALLOW_IMAGE_LIST, DRAWING_IMAGE_COUNT_LIMIT, DRAWING_IMAGE_HEIGHT_LIMIT, DRAWING_IMAGE_WIDTH_LIMIT, IDrawingManagerService, UniverDrawingPlugin, getDrawingImageAllowSize, getDrawingShapeKeyByDrawingSearch, getImageSize } from "@univerjs/drawing";
-import { CanvasFloatDomService, ComponentManager, ContextMenuGroup, ContextMenuPosition, 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, useObservable } 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";
 import { jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/commands/commands/remove-doc-drawing.command.ts
-/**
-* The command to remove new sheet image
-*/
-const RemoveDocDrawingCommand = {
-	id: "doc.command.remove-doc-image",
-	type: CommandType.COMMAND,
-	handler: (accessor, params) => {
-		var _docSelectionRenderSe, _documentDataModel$ge, _documentDataModel$ge2, _removeDrawings$, _documentDataModel$ge3;
-		const commandService = accessor.get(ICommandService);
-		const undoRedoService = accessor.get(IUndoRedoService);
-		const drawingAdapterService = accessor.get(IDocDrawingAdapterService);
-		const univerInstanceService = accessor.get(IUniverInstanceService);
-		const renderManagerService = accessor.get(IRenderManagerService);
-		const documentDataModel = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
-		if (params == null || documentDataModel == null) return false;
-		const docSelectionRenderService = renderManagerService.getRenderById(params.unitId).with(DocSelectionRenderService);
-		const { drawings: removeDrawings } = params;
-		const segmentId = (_docSelectionRenderSe = docSelectionRenderService.getSegment()) !== null && _docSelectionRenderSe !== void 0 ? _docSelectionRenderSe : "";
-		const textX = new TextX();
-		const jsonX = JSONX.getInstance();
-		const customBlocks = (_documentDataModel$ge = (_documentDataModel$ge2 = documentDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _documentDataModel$ge2 === void 0 || (_documentDataModel$ge2 = _documentDataModel$ge2.getBody()) === null || _documentDataModel$ge2 === void 0 ? void 0 : _documentDataModel$ge2.customBlocks) !== null && _documentDataModel$ge !== void 0 ? _documentDataModel$ge : [];
-		const removeCustomBlocks = removeDrawings.map((drawing) => customBlocks.find((customBlock) => customBlock.blockId === drawing.drawingId)).filter((block) => !!block).sort((a, b) => a.startIndex > b.startIndex ? 1 : -1);
-		const unitId = (_removeDrawings$ = removeDrawings[0]) === null || _removeDrawings$ === void 0 ? void 0 : _removeDrawings$.unitId;
-		if (unitId == null || removeCustomBlocks.length === 0) return false;
-		const drawings = (_documentDataModel$ge3 = documentDataModel.getDrawings()) !== null && _documentDataModel$ge3 !== void 0 ? _documentDataModel$ge3 : {};
-		const removeDrawingParamById = new Map(removeDrawings.map((drawing) => [drawing.drawingId, drawing]));
-		const removeDrawingSnapshots = removeCustomBlocks.map((block) => drawings[block.blockId]).filter((drawing) => drawing != null);
-		const resourceRedoMutations = [];
-		const resourceUndoMutations = [];
-		const resourceMutationGroups = [];
-		for (const block of removeCustomBlocks) {
-			var _removeDrawingParam$s;
-			const { blockId } = block;
-			const drawing = drawings[blockId];
-			if (drawing == null) continue;
-			const removeDrawingParam = removeDrawingParamById.get(blockId);
-			const mutationInfos = drawingAdapterService.getRemoveDrawingMutationInfos({
-				unitId,
-				subUnitId: (_removeDrawingParam$s = removeDrawingParam === null || removeDrawingParam === void 0 ? void 0 : removeDrawingParam.subUnitId) !== null && _removeDrawingParam$s !== void 0 ? _removeDrawingParam$s : unitId,
-				drawing,
-				removeDrawings: removeDrawingSnapshots
-			});
-			if (mutationInfos.redoMutations.length === 0 && mutationInfos.undoMutations.length === 0) continue;
-			resourceRedoMutations.push(...mutationInfos.redoMutations);
-			resourceUndoMutations.push(...mutationInfos.undoMutations);
-			resourceMutationGroups.push(mutationInfos);
-		}
-		if (!executeResourceMutationGroups(resourceMutationGroups, commandService)) return false;
-		const historyId = `doc-drawing-remove-resource:${unitId}:${removeCustomBlocks.map((block) => block.blockId).join(",")}`;
-		let batchingDisposable = null;
-		if (resourceRedoMutations.length > 0 || resourceUndoMutations.length > 0) {
-			batchingDisposable = undoRedoService.__tempBatchingUndoRedo(unitId);
-			undoRedoService.pushUndoRedo({
-				unitID: unitId,
-				redoMutations: resourceRedoMutations,
-				undoMutations: resourceUndoMutations,
-				id: historyId
-			});
-		}
-		const memoryCursor = new MemoryCursor();
-		memoryCursor.reset();
-		const cursorIndex = removeCustomBlocks[0].startIndex;
-		const textRanges = [{
-			startOffset: cursorIndex,
-			endOffset: cursorIndex
-		}];
-		const doMutation = {
-			id: RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges
-			}
-		};
-		const rawActions = [];
-		for (const block of removeCustomBlocks) {
-			const { startIndex } = block;
-			if (startIndex > memoryCursor.cursor) textX.push({
-				t: TextXActionType.RETAIN,
-				len: startIndex - memoryCursor.cursor
-			});
-			textX.push({
-				t: TextXActionType.DELETE,
-				len: 1
-			});
-			memoryCursor.moveCursorTo(startIndex + 1);
-		}
-		const path = getRichTextEditPath(documentDataModel, segmentId);
-		rawActions.push(jsonX.editOp(textX.serialize(), path));
-		for (const block of removeCustomBlocks) {
-			const { blockId } = block;
-			const drawingIndex = documentDataModel.getDrawingsOrder().indexOf(blockId);
-			const removeDrawingAction = jsonX.removeOp(["drawings", blockId], drawings[blockId]);
-			const removeDrawingOrderAction = jsonX.removeOp(["drawingsOrder", drawingIndex], blockId);
-			rawActions.push(removeDrawingAction);
-			rawActions.push(removeDrawingOrderAction);
-		}
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return JSONX.compose(acc, cur);
-		}, null);
-		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-		if (!result && batchingDisposable != null) {
-			batchingDisposable.dispose();
-			undoRedoService.rollback(historyId, unitId);
-			return false;
-		}
-		batchingDisposable === null || batchingDisposable === void 0 || batchingDisposable.dispose();
-		return Boolean(result);
-	}
-};
-function executeResourceMutationGroups(mutationGroups, commandService) {
-	const executedUndoGroups = [];
-	for (const mutationGroup of mutationGroups) {
-		if (!executeMutations(mutationGroup.redoMutations, commandService)) {
-			executeMutationGroups([...executedUndoGroups].reverse(), commandService);
-			return false;
-		}
-		executedUndoGroups.push(mutationGroup.undoMutations);
-	}
-	return true;
-}
-function executeMutationGroups(mutationGroups, commandService) {
-	mutationGroups.forEach((mutations) => {
-		executeMutations(mutations, commandService);
-	});
-}
-function executeMutations(mutations, commandService) {
-	for (const mutation of mutations) if (!commandService.syncExecuteCommand(mutation.id, mutation.params)) return false;
-	return true;
-}
-
-//#endregion
 //#region src/commands/commands/delete-doc-drawing.command.ts
 const DeleteDocDrawingsCommand = {
 	id: "doc.command.delete-drawing",
@@ -182,179 +49,6 @@ const GroupDocDrawingCommand = {
 	}
 };
 
-//#endregion
-//#region src/commands/commands/insert-doc-drawing.command.ts
-/**
-* The command to insert new drawings
-*/
-const InsertDocDrawingCommand = {
-	id: "doc.command.insert-doc-image",
-	type: CommandType.COMMAND,
-	handler: (accessor, params) => {
-		var _ref, _contentInsertRange$s, _documentDataModel$ge, _documentDataModel$ge2, _documentDataModel$ge3;
-		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.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null) return false;
-		const unitId = documentDataModel.getUnitId();
-		const explicitTextRange = params.textRange == null ? null : normalizeTextRange(params.textRange);
-		const contentInsertRange = explicitTextRange !== null && explicitTextRange !== void 0 ? explicitTextRange : 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 = "" } = targetTextRange;
-		const body = (_documentDataModel$ge = documentDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge.getBody();
-		if (body == null) return false;
-		const textX = new TextX();
-		const jsonX = JSONX.getInstance();
-		const rawActions = [];
-		const drawingOrderLength = (_documentDataModel$ge2 = (_documentDataModel$ge3 = documentDataModel.getSnapshot().drawingsOrder) === null || _documentDataModel$ge3 === void 0 ? void 0 : _documentDataModel$ge3.length) !== null && _documentDataModel$ge2 !== void 0 ? _documentDataModel$ge2 : 0;
-		let removeDrawingLen = 0;
-		if (collapsed) {
-			if (startOffset > 0) textX.push({
-				t: TextXActionType.RETAIN,
-				len: startOffset
-			});
-		} else {
-			var _documentDataModel$ge4, _documentDataModel$ge5;
-			const dos = BuildTextUtils.selection.delete([targetTextRange], body, 0, null, false);
-			textX.push(...dos);
-			const removedCustomBlockIds = getCustomBlockIdsInSelections(body, [targetTextRange]);
-			const drawings = (_documentDataModel$ge4 = documentDataModel.getDrawings()) !== null && _documentDataModel$ge4 !== void 0 ? _documentDataModel$ge4 : {};
-			const drawingOrder = (_documentDataModel$ge5 = documentDataModel.getDrawingsOrder()) !== null && _documentDataModel$ge5 !== void 0 ? _documentDataModel$ge5 : [];
-			const sortedRemovedCustomBlockIds = removedCustomBlockIds.sort((a, b) => {
-				if (drawingOrder.indexOf(a) > drawingOrder.indexOf(b)) return -1;
-				else if (drawingOrder.indexOf(a) < drawingOrder.indexOf(b)) return 1;
-				return 0;
-			});
-			if (sortedRemovedCustomBlockIds.length > 0) for (const blockId of sortedRemovedCustomBlockIds) {
-				const drawing = drawings[blockId];
-				const drawingIndex = drawingOrder.indexOf(blockId);
-				if (drawing == null || drawingIndex < 0) continue;
-				const removeDrawingAction = jsonX.removeOp(["drawings", blockId], drawing);
-				const removeDrawingOrderAction = jsonX.removeOp(["drawingsOrder", drawingIndex], blockId);
-				rawActions.push(removeDrawingAction);
-				rawActions.push(removeDrawingOrderAction);
-				removeDrawingLen++;
-			}
-		}
-		textX.push({
-			t: TextXActionType.INSERT,
-			body: {
-				dataStream: "\b".repeat(drawings.length),
-				customBlocks: drawings.map((drawing, i) => ({
-					startIndex: i,
-					blockId: drawing.drawingId
-				}))
-			},
-			len: drawings.length
-		});
-		const path = getRichTextEditPath(documentDataModel, segmentId);
-		const placeHolderAction = jsonX.editOp(textX.serialize(), path);
-		rawActions.push(placeHolderAction);
-		for (const drawing of drawings) {
-			const { drawingId } = drawing;
-			const addDrawingAction = jsonX.insertOp(["drawings", drawingId], drawing);
-			const addDrawingOrderAction = jsonX.insertOp(["drawingsOrder", drawingOrderLength - removeDrawingLen], drawingId);
-			rawActions.push(addDrawingAction);
-			rawActions.push(addDrawingOrderAction);
-		}
-		const doMutation = {
-			id: RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: []
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return JSONX.compose(acc, cur);
-		}, null);
-		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-		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;
-	}
-}
-function normalizeTextRange(textRange) {
-	var _textRange$endOffset, _textRange$collapsed, _textRange$segmentId;
-	const endOffset = (_textRange$endOffset = textRange.endOffset) !== null && _textRange$endOffset !== void 0 ? _textRange$endOffset : textRange.startOffset;
-	return {
-		...textRange,
-		endOffset,
-		collapsed: (_textRange$collapsed = textRange.collapsed) !== null && _textRange$collapsed !== void 0 ? _textRange$collapsed : textRange.startOffset === endOffset,
-		segmentId: (_textRange$segmentId = textRange.segmentId) !== null && _textRange$segmentId !== void 0 ? _textRange$segmentId : ""
-	};
-}
-
-//#endregion
-//#region src/commands/commands/set-drawing-arrange.command.ts
-/**
-* The command to arrange drawings.
-*/
-const SetDocDrawingArrangeCommand = {
-	id: "doc.command.set-drawing-arrange",
-	type: CommandType.COMMAND,
-	handler: (accessor, params) => {
-		const commandService = accessor.get(ICommandService);
-		const docDrawingService = accessor.get(IDocDrawingService);
-		if (params == null) return false;
-		const { unitId, subUnitId, drawingIds, arrangeType } = params;
-		const drawingOrderMapParam = {
-			unitId,
-			subUnitId,
-			drawingIds
-		};
-		let jsonOp;
-		if (arrangeType === ArrangeTypeEnum.forward) jsonOp = docDrawingService.getForwardDrawingsOp(drawingOrderMapParam);
-		else if (arrangeType === ArrangeTypeEnum.backward) jsonOp = docDrawingService.getBackwardDrawingOp(drawingOrderMapParam);
-		else if (arrangeType === ArrangeTypeEnum.front) jsonOp = docDrawingService.getFrontDrawingsOp(drawingOrderMapParam);
-		else if (arrangeType === ArrangeTypeEnum.back) jsonOp = docDrawingService.getBackDrawingsOp(drawingOrderMapParam);
-		if (jsonOp == null) return false;
-		const { redo } = jsonOp;
-		if (redo == null) return false;
-		const rawActions = [];
-		let redoCopy = Tools.deepClone(redo);
-		redoCopy = redoCopy.slice(3);
-		redoCopy.unshift("drawingsOrder");
-		rawActions.push(redoCopy);
-		const doMutation = {
-			id: RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return JSONX.compose(acc, cur);
-		}, null);
-		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-		return Boolean(result);
-	}
-};
-
 //#endregion
 //#region src/commands/commands/ungroup-doc-drawing.command.ts
 /**
@@ -576,25 +270,10 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 	}
 	_getImagePosition(imageWidth, imageHeight, insertPosition) {
 		var _ref;
-		const position = (_ref = insertPosition !== null && insertPosition !== void 0 ? insertPosition : this._getCurrentImageInsertPosition()) !== null && _ref !== void 0 ? _ref : {
+		return buildDocTransform(imageWidth, imageHeight, { left: ((_ref = insertPosition !== null && insertPosition !== void 0 ? insertPosition : this._getCurrentImageInsertPosition()) !== null && _ref !== void 0 ? _ref : {
 			left: 0,
 			top: 0
-		};
-		return {
-			size: {
-				width: imageWidth,
-				height: imageHeight
-			},
-			positionH: {
-				relativeFrom: ObjectRelativeFromH.PAGE,
-				posOffset: position.left
-			},
-			positionV: {
-				relativeFrom: ObjectRelativeFromV.PARAGRAPH,
-				posOffset: 0
-			},
-			angle: 0
-		};
+		}).left });
 	}
 	_getCurrentImageInsertPosition() {
 		var _this$_docSelectionRe;
@@ -798,23 +477,6 @@ function createShapeSvgSource(shape, width, height) {
 	const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" fill="none">${shape === "ellipse" ? `<ellipse cx="${width / 2}" cy="${height / 2}" rx="${(width - 8) / 2}" ry="${(height - 8) / 2}" fill="${DOC_SHAPE_FILL}" stroke="${DOC_SHAPE_STROKE}" stroke-width="4" />` : `<rect x="4" y="4" width="${width - 8}" height="${height - 8}" rx="14" fill="${DOC_SHAPE_FILL}" stroke="${DOC_SHAPE_STROKE}" stroke-width="4" />`}</svg>`;
 	return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
 }
-function createDefaultDocTransform(width, height) {
-	return {
-		size: {
-			width,
-			height
-		},
-		positionH: {
-			relativeFrom: ObjectRelativeFromH.PAGE,
-			posOffset: 0
-		},
-		positionV: {
-			relativeFrom: ObjectRelativeFromV.PARAGRAPH,
-			posOffset: 0
-		},
-		angle: 0
-	};
-}
 function createShapeInsertCommand(shape, width, height, id) {
 	return {
 		id,
@@ -824,7 +486,7 @@ function createShapeInsertCommand(shape, width, height, id) {
 			const commandService = accessor.get(ICommandService);
 			const unitId = (_univerInstanceServic = accessor.get(IUniverInstanceService).getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC)) === null || _univerInstanceServic === void 0 ? void 0 : _univerInstanceServic.getUnitId();
 			if (!unitId) return false;
-			const docTransform = createDefaultDocTransform(width, height);
+			const docTransform = buildDocTransform(width, height);
 			return commandService.executeCommand(InsertDocDrawingCommand.id, {
 				unitId,
 				drawings: [{
@@ -854,662 +516,136 @@ const InsertDocRectangleShapeCommand = createShapeInsertCommand("rectangle", 144
 const InsertDocEllipseShapeCommand = createShapeInsertCommand("ellipse", 112, 112, "doc.command.insert-float-shape.ellipse");
 
 //#endregion
-//#region src/commands/commands/update-doc-drawing.command.ts
-const WRAPPING_STYLE_TO_LAYOUT_TYPE = {
-	["inline"]: PositionedObjectLayoutType.INLINE,
-	["wrapSquare"]: PositionedObjectLayoutType.WRAP_SQUARE,
-	["wrapTopAndBottom"]: PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM,
-	["inFrontOfText"]: PositionedObjectLayoutType.WRAP_NONE,
-	["behindText"]: PositionedObjectLayoutType.WRAP_NONE
+//#region src/commands/commands/move-drawings.command.ts
+const MoveDocDrawingsCommand = {
+	id: "doc.command.move-drawing",
+	type: CommandType.COMMAND,
+	handler: (accessor, params) => {
+		const commandService = accessor.get(ICommandService);
+		const docDrawingService = accessor.get(IDocDrawingService);
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const renderManagerService = accessor.get(IRenderManagerService);
+		const { direction } = params;
+		const drawings = docDrawingService.getFocusDrawings();
+		if (drawings.length === 0) return false;
+		const unitId = drawings[0].unitId;
+		const renderObject = renderManagerService.getRenderById(unitId);
+		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+		if (scene == null) return false;
+		const transformer = scene.getTransformerByCreate();
+		const documentDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
+		const newDrawings = drawings.map((drawing) => {
+			var _documentDataModel$ge;
+			const { drawingId } = drawing;
+			const drawingData = documentDataModel === null || documentDataModel === void 0 || (_documentDataModel$ge = documentDataModel.getSnapshot().drawings) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge[drawingId];
+			if (drawingData == null || drawingData.layoutType === PositionedObjectLayoutType.INLINE) return null;
+			const { positionH, positionV } = drawingData.docTransform;
+			const newPositionH = { ...positionH };
+			const newPositionV = { ...positionV };
+			if (direction === Direction.UP) {
+				var _newPositionV$posOffs;
+				newPositionV.posOffset = ((_newPositionV$posOffs = newPositionV.posOffset) !== null && _newPositionV$posOffs !== void 0 ? _newPositionV$posOffs : 0) - 2;
+			} else if (direction === Direction.DOWN) {
+				var _newPositionV$posOffs2;
+				newPositionV.posOffset = ((_newPositionV$posOffs2 = newPositionV.posOffset) !== null && _newPositionV$posOffs2 !== void 0 ? _newPositionV$posOffs2 : 0) + 2;
+			} else if (direction === Direction.LEFT) {
+				var _newPositionH$posOffs;
+				newPositionH.posOffset = ((_newPositionH$posOffs = newPositionH.posOffset) !== null && _newPositionH$posOffs !== void 0 ? _newPositionH$posOffs : 0) - 2;
+			} else if (direction === Direction.RIGHT) {
+				var _newPositionH$posOffs2;
+				newPositionH.posOffset = ((_newPositionH$posOffs2 = newPositionH.posOffset) !== null && _newPositionH$posOffs2 !== void 0 ? _newPositionH$posOffs2 : 0) + 2;
+			}
+			return {
+				drawingId,
+				key: direction === Direction.UP || direction === Direction.DOWN ? "positionV" : "positionH",
+				value: direction === Direction.UP || direction === Direction.DOWN ? newPositionV : newPositionH
+			};
+		}).filter((drawing) => drawing != null);
+		if (newDrawings.length === 0) return false;
+		const result = commandService.syncExecuteCommand(UpdateDrawingDocTransformCommand.id, {
+			unitId,
+			subUnitId: unitId,
+			drawings: newDrawings
+		});
+		transformer.refreshControls();
+		return Boolean(result);
+	}
 };
-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;
+
+//#endregion
+//#region src/commands/operations/clear-drawing-transformer.operation.ts
+const ClearDocDrawingTransformerOperation = {
+	id: "doc.operation.clear-drawing-transformer",
+	type: CommandType.MUTATION,
+	handler: (accessor, params) => {
+		const renderManagerService = accessor.get(IRenderManagerService);
+		params.forEach((unitId) => {
+			var _renderManagerService;
+			(_renderManagerService = renderManagerService.getRenderById(unitId)) === null || _renderManagerService === void 0 || (_renderManagerService = _renderManagerService.scene.getTransformer()) === null || _renderManagerService === void 0 || _renderManagerService.debounceRefreshControls();
+		});
+		return true;
 	}
-	return null;
-}
-function getDeleteAndInsertCustomBlockActions(segmentId, oldSegmentId, segmentPage, offset, drawingId, documentDataModel, docSelectionRenderManager) {
-	var _documentDataModel$ge, _documentDataModel$ge2, _oldBody$customBlocks;
-	const textX = new TextX();
-	const jsonX = JSONX.getInstance();
-	const rawActions = [];
-	const oldBody = (_documentDataModel$ge = documentDataModel.getSelfOrHeaderFooterModel(oldSegmentId)) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge.getBody();
-	const body = (_documentDataModel$ge2 = documentDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _documentDataModel$ge2 === void 0 ? void 0 : _documentDataModel$ge2.getBody();
-	if (oldBody == null || body == null) return;
-	const oldOffset = (_oldBody$customBlocks = oldBody.customBlocks) === null || _oldBody$customBlocks === void 0 || (_oldBody$customBlocks = _oldBody$customBlocks.find((block) => block.blockId === drawingId)) === null || _oldBody$customBlocks === void 0 ? void 0 : _oldBody$customBlocks.startIndex;
-	if (oldOffset == null) return;
-	offset = Math.min(body.dataStream.length - 2, offset);
-	if (segmentId === oldSegmentId) {
-		if (offset < oldOffset) {
-			if (offset > 0) textX.push({
-				t: TextXActionType.RETAIN,
-				len: offset
-			});
-			textX.push({
-				t: TextXActionType.INSERT,
-				body: {
-					dataStream: "\b",
-					customBlocks: [{
-						startIndex: 0,
-						blockId: drawingId
-					}]
-				},
-				len: 1
-			});
-			textX.push({
-				t: TextXActionType.RETAIN,
-				len: oldOffset - offset
-			});
-			textX.push({
-				t: TextXActionType.DELETE,
-				len: 1
-			});
-		} else {
-			if (oldOffset > 0) textX.push({
-				t: TextXActionType.RETAIN,
-				len: oldOffset
-			});
-			textX.push({
-				t: TextXActionType.DELETE,
-				len: 1
-			});
-			if (offset - oldOffset - 1 > 0) textX.push({
-				t: TextXActionType.RETAIN,
-				len: offset - oldOffset - 1
-			});
-			textX.push({
-				t: TextXActionType.INSERT,
-				body: {
-					dataStream: "\b",
-					customBlocks: [{
-						startIndex: 0,
-						blockId: drawingId
-					}]
-				},
-				len: 1
-			});
-		}
-		if (offset !== oldOffset) {
-			const path = getRichTextEditPath(documentDataModel, oldSegmentId);
-			const action = jsonX.editOp(textX.serialize(), path);
-			rawActions.push(action);
-		}
-	} else {
-		if (oldOffset > 0) textX.push({
-			t: TextXActionType.RETAIN,
-			len: oldOffset
-		});
-		textX.push({
-			t: TextXActionType.DELETE,
-			len: 1
-		});
-		let path = getRichTextEditPath(documentDataModel, oldSegmentId);
-		let action = jsonX.editOp(textX.serialize(), path);
-		rawActions.push(action);
-		textX.empty();
-		if (offset > 0) textX.push({
-			t: TextXActionType.RETAIN,
-			len: offset
-		});
-		textX.push({
-			t: TextXActionType.INSERT,
-			body: {
-				dataStream: "\b",
-				customBlocks: [{
-					startIndex: 0,
-					blockId: drawingId
-				}]
-			},
-			len: 1
-		});
-		path = getRichTextEditPath(documentDataModel, segmentId);
-		action = jsonX.editOp(textX.serialize(), path);
-		rawActions.push(action);
-		docSelectionRenderManager.setSegment(segmentId);
-		docSelectionRenderManager.setSegmentPage(segmentPage);
-	}
-	return rawActions;
-}
+};
+
+//#endregion
+//#region src/views/doc-image-panel/component-name.ts
 /**
-* The command to update drawing wrapping style.
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
 */
-const UpdateDocDrawingWrappingStyleCommand = {
-	id: "doc.command.update-doc-drawing-wrapping-style",
+const COMPONENT_DOC_DRAWING_PANEL = "COMPONENT_DOC_DRAWING_PANEL";
+
+//#endregion
+//#region src/commands/operations/open-drawing-panel.operation.ts
+const SidebarDocDrawingOperation = {
+	id: "sidebar.operation.doc-image",
 	type: CommandType.COMMAND,
-	handler: (accessor, params) => {
-		if (params == null) return false;
-		const { drawings, wrappingStyle, unitId } = params;
-		const commandService = accessor.get(ICommandService);
-		const univerInstanceService = accessor.get(IUniverInstanceService);
-		const renderObject = accessor.get(IRenderManagerService).getRenderById(unitId);
-		const skeletonData = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(DocSkeletonManagerService).getSkeleton().getSkeletonData();
-		const viewModel = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(DocSkeletonManagerService).getViewModel();
-		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-		const documentDataModel = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null || skeletonData == null || scene == null || viewModel == null) return false;
-		const editArea = viewModel.getEditArea();
-		const transformer = scene.getTransformerByCreate();
-		const { pages, skeHeaders, skeFooters } = skeletonData;
-		const jsonX = JSONX.getInstance();
-		const rawActions = [];
-		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
-		for (const drawing of drawings) {
-			const { drawingId } = drawing;
-			const oldLayoutType = oldDrawings[drawingId].layoutType;
-			const newLayoutType = WRAPPING_STYLE_TO_LAYOUT_TYPE[wrappingStyle];
-			if (oldLayoutType !== newLayoutType) {
-				const updateLayoutTypeAction = jsonX.replaceOp([
-					"drawings",
-					drawingId,
-					"layoutType"
-				], oldLayoutType, newLayoutType);
-				rawActions.push(updateLayoutTypeAction);
-			}
-			if (wrappingStyle === "behindText" || wrappingStyle === "inFrontOfText") {
-				const oldBehindDoc = oldDrawings[drawingId].behindDoc;
-				const newBehindDoc = wrappingStyle === "behindText" ? BooleanNumber.TRUE : BooleanNumber.FALSE;
-				if (oldBehindDoc !== newBehindDoc) {
-					const updateBehindDocAction = jsonX.replaceOp([
-						"drawings",
-						drawingId,
-						"behindDoc"
-					], oldBehindDoc, newBehindDoc);
-					rawActions.push(updateBehindDocAction);
-				}
-			}
-			if (wrappingStyle === "inline") continue;
-			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) 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) drawingAnchor = findDrawingAnchorInPage(footerSke, drawingId, pageHeight - marginBottom + footerSke.marginTop, marginLeft);
-						break;
-					}
-					case DocumentEditArea.BODY:
-						drawingAnchor = findDrawingAnchorInPage(page, drawingId, marginTop, marginLeft);
-						break;
-				}
-				if (drawingAnchor != null) break;
-			}
-			if (drawingAnchor != null) {
-				const { skeDrawing, pageMarginTop, pageMarginLeft } = drawingAnchor;
-				const { aTop, aLeft } = skeDrawing;
-				const oldPositionH = oldDrawings[drawingId].docTransform.positionH;
-				let posOffsetH = aLeft;
-				if (oldPositionH.relativeFrom === ObjectRelativeFromH.MARGIN) posOffsetH -= pageMarginLeft;
-				else if (oldPositionH.relativeFrom === ObjectRelativeFromH.COLUMN) posOffsetH -= skeDrawing.columnLeft;
-				const newPositionH = {
-					relativeFrom: oldPositionH.relativeFrom,
-					posOffset: posOffsetH
-				};
-				if (oldPositionH.posOffset !== newPositionH.posOffset) {
-					const action = jsonX.replaceOp([
-						"drawings",
-						drawingId,
-						"docTransform",
-						"positionH"
-					], oldPositionH, newPositionH);
-					rawActions.push(action);
-				}
-				const oldPositionV = oldDrawings[drawingId].docTransform.positionV;
-				let posOffsetV = aTop;
-				if (oldPositionV.relativeFrom === ObjectRelativeFromV.PAGE) posOffsetV += pageMarginTop;
-				else if (oldPositionV.relativeFrom === ObjectRelativeFromV.LINE) posOffsetV -= skeDrawing.lineTop;
-				else if (oldPositionV.relativeFrom === ObjectRelativeFromV.PARAGRAPH) posOffsetV -= skeDrawing.blockAnchorTop;
-				const newPositionV = {
-					relativeFrom: oldPositionV.relativeFrom,
-					posOffset: posOffsetV
-				};
-				if (oldPositionV.posOffset !== newPositionV.posOffset) {
-					const action = jsonX.replaceOp([
-						"drawings",
-						drawingId,
-						"docTransform",
-						"positionV"
-					], oldPositionV, newPositionV);
-					rawActions.push(action);
-				}
-			}
+	handler: async (accessor, params) => {
+		const sidebarService = accessor.get(ISidebarService);
+		const localeService = accessor.get(LocaleService);
+		const drawingManagerService = accessor.get(IDrawingManagerService);
+		switch (params.value) {
+			case "open":
+				sidebarService.open({
+					header: { title: localeService.t("docs-drawing-ui.panel.title") },
+					children: { label: COMPONENT_DOC_DRAWING_PANEL },
+					onClose: () => {
+						drawingManagerService.focusDrawing(null);
+					},
+					width: 360
+				});
+				break;
+			default:
+				sidebarService.close();
+				break;
 		}
-		const doMutation = {
-			id: RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return JSONX.compose(acc, cur);
-		}, null);
-		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-		transformer.refreshControls();
-		return Boolean(result);
+		return true;
 	}
 };
-/**
-* The command to update drawing wrap text.
-*/
-const UpdateDocDrawingDistanceCommand = {
-	id: "doc.command.update-doc-drawing-distance",
-	type: CommandType.COMMAND,
+
+//#endregion
+//#region src/commands/operations/edit-doc-drawing.operation.ts
+const EditDocDrawingOperation = {
+	id: "doc.operation.edit-doc-image",
+	type: CommandType.OPERATION,
 	handler: (accessor, params) => {
-		if (params == null) return false;
+		const drawingManagerService = accessor.get(IDrawingManagerService);
 		const commandService = accessor.get(ICommandService);
-		const univerInstanceService = accessor.get(IUniverInstanceService);
-		const { drawings, dist, unitId } = params;
-		const documentDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null) return false;
-		const jsonX = JSONX.getInstance();
-		const rawActions = [];
-		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
-		for (const drawing of drawings) {
-			const { drawingId } = drawing;
-			for (const [key, value] of Object.entries(dist)) {
-				const oldValue = oldDrawings[drawingId][key];
-				if (oldValue !== value) {
-					const action = jsonX.replaceOp([
-						"drawings",
-						drawingId,
-						key
-					], oldValue, value);
-					rawActions.push(action);
-				}
-			}
-		}
-		const doMutation = {
-			id: RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return JSONX.compose(acc, cur);
-		}, null);
-		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-		return Boolean(result);
-	}
-};
-/**
-* The command to update drawing wrap text.
-*/
-const UpdateDocDrawingWrapTextCommand = {
-	id: "doc.command.update-doc-drawing-wrap-text",
-	type: CommandType.COMMAND,
-	handler: (accessor, params) => {
-		if (params == null) return false;
-		const commandService = accessor.get(ICommandService);
-		const univerInstanceService = accessor.get(IUniverInstanceService);
-		const { drawings, wrapText, unitId } = params;
-		const documentDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null) return false;
-		const jsonX = JSONX.getInstance();
-		const rawActions = [];
-		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
-		for (const drawing of drawings) {
-			const { drawingId } = drawing;
-			const oldWrapText = oldDrawings[drawingId].wrapText;
-			if (oldWrapText !== wrapText) {
-				const action = jsonX.replaceOp([
-					"drawings",
-					drawingId,
-					"wrapText"
-				], oldWrapText, wrapText);
-				rawActions.push(action);
-			}
-		}
-		const doMutation = {
-			id: RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return JSONX.compose(acc, cur);
-		}, null);
-		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-		return Boolean(result);
-	}
-};
-/**
-* The command to update drawing position.
-*/
-const UpdateDrawingDocTransformCommand = {
-	id: "doc.command.update-drawing-doc-transform",
-	type: CommandType.COMMAND,
-	handler: (accessor, params) => {
-		if (params == null) return false;
-		const commandService = accessor.get(ICommandService);
-		const univerInstanceService = accessor.get(IUniverInstanceService);
-		const renderManagerService = accessor.get(IRenderManagerService);
-		const { drawings, unitId } = params;
-		const renderObject = renderManagerService.getRenderUnitById(unitId);
-		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-		if (scene == null) return false;
-		const transformer = scene.getTransformerByCreate();
-		const documentDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null) return false;
-		const jsonX = JSONX.getInstance();
-		const rawActions = [];
-		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
-		for (const drawing of drawings) {
-			const { drawingId, key, value } = drawing;
-			const oldValue = oldDrawings[drawingId].docTransform[key];
-			if (!Tools.diffValue(oldValue, value)) {
-				const action = jsonX.replaceOp([
-					"drawings",
-					drawingId,
-					"docTransform",
-					key
-				], oldValue, value);
-				rawActions.push(action);
-			}
-		}
-		const doMutation = {
-			id: RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null,
-				debounce: true
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return JSONX.compose(acc, cur);
-		}, null);
-		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-		if (accessor.has(DocRefreshDrawingsService)) {
-			var _renderObject$with$ge;
-			const skeleton = (_renderObject$with$ge = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(DocSkeletonManagerService).getSkeleton()) !== null && _renderObject$with$ge !== void 0 ? _renderObject$with$ge : null;
-			accessor.get(DocRefreshDrawingsService).refreshDrawings(skeleton);
-		}
-		transformer.refreshControls();
-		return Boolean(result);
-	}
-};
-/**
-* The command to move inline drawing.
-*/
-const IMoveInlineDrawingCommand = {
-	id: "doc.command.move-inline-drawing",
-	type: CommandType.COMMAND,
-	handler: (accessor, params) => {
-		var _renderManagerService, _docSelectionRenderSe;
-		if (params == null) return false;
-		const { drawing, unitId, offset, segmentId: newSegmentId, segmentPage, needRefreshDrawings } = params;
-		const renderManagerService = accessor.get(IRenderManagerService);
-		const docSelectionRenderService = (_renderManagerService = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(DocSelectionRenderService);
-		const docRefreshDrawingsService = accessor.get(DocRefreshDrawingsService);
-		const renderObject = renderManagerService.getRenderUnitById(unitId);
-		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-		const skeleton = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(DocSkeletonManagerService).getSkeleton();
-		if (scene == null || docSelectionRenderService == null) return false;
-		const transformer = scene.getTransformerByCreate();
-		const commandService = accessor.get(ICommandService);
-		const documentDataModel = accessor.get(IUniverInstanceService).getUnit(unitId, UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null) return false;
-		if (needRefreshDrawings) {
-			docRefreshDrawingsService.refreshDrawings(skeleton);
-			transformer.refreshControls();
-			return true;
-		}
-		const rawActions = [];
-		const { drawingId } = drawing;
-		const actions = getDeleteAndInsertCustomBlockActions(newSegmentId, (_docSelectionRenderSe = docSelectionRenderService.getSegment()) !== null && _docSelectionRenderSe !== void 0 ? _docSelectionRenderSe : "", segmentPage, offset, drawingId, documentDataModel, docSelectionRenderService);
-		if (actions == null || actions.length === 0) {
-			docRefreshDrawingsService.refreshDrawings(skeleton);
-			transformer.refreshControls();
-			return false;
-		}
-		rawActions.push(...actions);
-		const doMutation = {
-			id: RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return JSONX.compose(acc, cur);
-		}, null);
-		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-		transformer.refreshControls();
-		return Boolean(result);
-	}
-};
-/**
-* The command to transform non-inline drawing.
-*/
-const ITransformNonInlineDrawingCommand = {
-	id: "doc.command.transform-non-inline-drawing",
-	type: CommandType.COMMAND,
-	handler: (accessor, params) => {
-		var _renderManagerService2, _docSelectionRenderSe2;
-		if (params == null) return false;
-		const { drawing, unitId, offset, docTransform, segmentId: newSegmentId, segmentPage } = params;
-		const renderManagerService = accessor.get(IRenderManagerService);
-		const docSelectionRenderService = (_renderManagerService2 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.with(DocSelectionRenderService);
-		const renderObject = renderManagerService.getRenderUnitById(unitId);
-		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-		if (scene == null || docSelectionRenderService == null) return false;
-		const transformer = scene.getTransformerByCreate();
-		const commandService = accessor.get(ICommandService);
-		const documentDataModel = accessor.get(IUniverInstanceService).getUnit(unitId, UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null) return false;
-		const rawActions = [];
-		const { drawingId } = drawing;
-		const actions = getDeleteAndInsertCustomBlockActions(newSegmentId, (_docSelectionRenderSe2 = docSelectionRenderService.getSegment()) !== null && _docSelectionRenderSe2 !== void 0 ? _docSelectionRenderSe2 : "", segmentPage, offset, drawingId, documentDataModel, docSelectionRenderService);
-		if (actions == null) return false;
-		if (actions.length > 0) rawActions.push(...actions);
-		const jsonX = JSONX.getInstance();
-		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
-		const { positionH: oldPositionH, positionV: oldPositionV, size: oldSize, angle: oldAngle } = oldDrawings[drawingId].docTransform;
-		if (!Tools.diffValue(oldPositionH, docTransform.positionH)) {
-			const updateAction = jsonX.replaceOp([
-				"drawings",
-				drawingId,
-				"docTransform",
-				"positionH"
-			], oldPositionH, docTransform.positionH);
-			rawActions.push(updateAction);
-		}
-		if (!Tools.diffValue(oldPositionV, docTransform.positionV)) {
-			const updateAction = jsonX.replaceOp([
-				"drawings",
-				drawingId,
-				"docTransform",
-				"positionV"
-			], oldPositionV, docTransform.positionV);
-			rawActions.push(updateAction);
-		}
-		if (!Tools.diffValue(oldSize, docTransform.size)) {
-			const updateAction = jsonX.replaceOp([
-				"drawings",
-				drawingId,
-				"docTransform",
-				"size"
-			], oldSize, docTransform.size);
-			rawActions.push(updateAction);
-		}
-		if (!Tools.diffValue(oldAngle, docTransform.angle)) {
-			const updateAction = jsonX.replaceOp([
-				"drawings",
-				drawingId,
-				"docTransform",
-				"angle"
-			], oldAngle, docTransform.angle);
-			rawActions.push(updateAction);
-		}
-		const doMutation = {
-			id: RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null,
-				debounce: true
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return JSONX.compose(acc, cur);
-		}, null);
-		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-		transformer.refreshControls();
-		return Boolean(result);
-	}
-};
-
-//#endregion
-//#region src/commands/commands/move-drawings.command.ts
-const MoveDocDrawingsCommand = {
-	id: "doc.command.move-drawing",
-	type: CommandType.COMMAND,
-	handler: (accessor, params) => {
-		const commandService = accessor.get(ICommandService);
-		const docDrawingService = accessor.get(IDocDrawingService);
-		const univerInstanceService = accessor.get(IUniverInstanceService);
-		const renderManagerService = accessor.get(IRenderManagerService);
-		const { direction } = params;
-		const drawings = docDrawingService.getFocusDrawings();
-		if (drawings.length === 0) return false;
-		const unitId = drawings[0].unitId;
-		const renderObject = renderManagerService.getRenderById(unitId);
-		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-		if (scene == null) return false;
-		const transformer = scene.getTransformerByCreate();
-		const documentDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
-		const newDrawings = drawings.map((drawing) => {
-			var _documentDataModel$ge;
-			const { drawingId } = drawing;
-			const drawingData = documentDataModel === null || documentDataModel === void 0 || (_documentDataModel$ge = documentDataModel.getSnapshot().drawings) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge[drawingId];
-			if (drawingData == null || drawingData.layoutType === PositionedObjectLayoutType.INLINE) return null;
-			const { positionH, positionV } = drawingData.docTransform;
-			const newPositionH = { ...positionH };
-			const newPositionV = { ...positionV };
-			if (direction === Direction.UP) {
-				var _newPositionV$posOffs;
-				newPositionV.posOffset = ((_newPositionV$posOffs = newPositionV.posOffset) !== null && _newPositionV$posOffs !== void 0 ? _newPositionV$posOffs : 0) - 2;
-			} else if (direction === Direction.DOWN) {
-				var _newPositionV$posOffs2;
-				newPositionV.posOffset = ((_newPositionV$posOffs2 = newPositionV.posOffset) !== null && _newPositionV$posOffs2 !== void 0 ? _newPositionV$posOffs2 : 0) + 2;
-			} else if (direction === Direction.LEFT) {
-				var _newPositionH$posOffs;
-				newPositionH.posOffset = ((_newPositionH$posOffs = newPositionH.posOffset) !== null && _newPositionH$posOffs !== void 0 ? _newPositionH$posOffs : 0) - 2;
-			} else if (direction === Direction.RIGHT) {
-				var _newPositionH$posOffs2;
-				newPositionH.posOffset = ((_newPositionH$posOffs2 = newPositionH.posOffset) !== null && _newPositionH$posOffs2 !== void 0 ? _newPositionH$posOffs2 : 0) + 2;
-			}
-			return {
-				drawingId,
-				key: direction === Direction.UP || direction === Direction.DOWN ? "positionV" : "positionH",
-				value: direction === Direction.UP || direction === Direction.DOWN ? newPositionV : newPositionH
-			};
-		}).filter((drawing) => drawing != null);
-		if (newDrawings.length === 0) return false;
-		const result = commandService.syncExecuteCommand(UpdateDrawingDocTransformCommand.id, {
-			unitId,
-			subUnitId: unitId,
-			drawings: newDrawings
-		});
-		transformer.refreshControls();
-		return Boolean(result);
-	}
-};
-
-//#endregion
-//#region src/commands/operations/clear-drawing-transformer.operation.ts
-const ClearDocDrawingTransformerOperation = {
-	id: "doc.operation.clear-drawing-transformer",
-	type: CommandType.MUTATION,
-	handler: (accessor, params) => {
-		const renderManagerService = accessor.get(IRenderManagerService);
-		params.forEach((unitId) => {
-			var _renderManagerService;
-			(_renderManagerService = renderManagerService.getRenderById(unitId)) === null || _renderManagerService === void 0 || (_renderManagerService = _renderManagerService.scene.getTransformer()) === null || _renderManagerService === void 0 || _renderManagerService.debounceRefreshControls();
-		});
-		return true;
-	}
-};
-
-//#endregion
-//#region src/views/doc-image-panel/component-name.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-const COMPONENT_DOC_DRAWING_PANEL = "COMPONENT_DOC_DRAWING_PANEL";
-
-//#endregion
-//#region src/commands/operations/open-drawing-panel.operation.ts
-const SidebarDocDrawingOperation = {
-	id: "sidebar.operation.doc-image",
-	type: CommandType.COMMAND,
-	handler: async (accessor, params) => {
-		const sidebarService = accessor.get(ISidebarService);
-		const localeService = accessor.get(LocaleService);
-		const drawingManagerService = accessor.get(IDrawingManagerService);
-		switch (params.value) {
-			case "open":
-				sidebarService.open({
-					header: { title: localeService.t("docs-drawing-ui.panel.title") },
-					children: { label: COMPONENT_DOC_DRAWING_PANEL },
-					onClose: () => {
-						drawingManagerService.focusDrawing(null);
-					},
-					width: 360
-				});
-				break;
-			default:
-				sidebarService.close();
-				break;
-		}
-		return true;
-	}
-};
-
-//#endregion
-//#region src/commands/operations/edit-doc-drawing.operation.ts
-const EditDocDrawingOperation = {
-	id: "doc.operation.edit-doc-image",
-	type: CommandType.OPERATION,
-	handler: (accessor, params) => {
-		const drawingManagerService = accessor.get(IDrawingManagerService);
-		const commandService = accessor.get(ICommandService);
-		if (params == null) return false;
-		drawingManagerService.focusDrawing([params]);
-		commandService.executeCommand(SidebarDocDrawingOperation.id, { value: "open" });
-		return true;
+		if (params == null) return false;
+		drawingManagerService.focusDrawing([params]);
+		commandService.executeCommand(SidebarDocDrawingOperation.id, { value: "open" });
+		return true;
 	}
 };
 
@@ -2055,318 +1191,644 @@ const menuSchema = {
 			}
 		} }
 	}
-};
-
-//#endregion
-//#region package.json
-var name = "@univerjs/docs-drawing-ui";
-var version = "1.0.0-alpha.3";
-
-//#endregion
-//#region src/config/config.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-const DOCS_DRAWING_UI_PLUGIN_CONFIG_KEY = "docs-drawing-ui.config";
-const configSymbol = Symbol(DOCS_DRAWING_UI_PLUGIN_CONFIG_KEY);
-const defaultPluginConfig = {};
+};
+
+//#endregion
+//#region package.json
+var name = "@univerjs/docs-drawing-ui";
+var version = "1.0.0-alpha.4";
+
+//#endregion
+//#region src/config/config.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const DOCS_DRAWING_UI_PLUGIN_CONFIG_KEY = "docs-drawing-ui.config";
+const configSymbol = Symbol(DOCS_DRAWING_UI_PLUGIN_CONFIG_KEY);
+const defaultPluginConfig = {};
+
+//#endregion
+//#region src/views/doc-image-panel/DocDrawingPosition.tsx
+const MIN_OFFSET = -1e3;
+const MAX_OFFSET = 1e3;
+const DocDrawingPosition = (props) => {
+	var _renderManagerService;
+	const renderManagerService = useDependency(IRenderManagerService);
+	const drawingParam = props.drawings[0];
+	const scene = drawingParam ? (_renderManagerService = renderManagerService.getRenderById(drawingParam.unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.scene : void 0;
+	return drawingParam && scene ? /* @__PURE__ */ jsx(DocDrawingPositionContent, { ...props }) : null;
+};
+function DocDrawingPositionContent(props) {
+	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
+	const drawingManagerService = useDependency(IDrawingManagerService);
+	const renderManagerService = useDependency(IRenderManagerService);
+	const univerInstanceService = useDependency(IUniverInstanceService);
+	const { drawings } = props;
+	const { unitId } = drawings[0];
+	const documentDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
+	const documentFlavor = documentDataModel === null || documentDataModel === void 0 ? void 0 : documentDataModel.getSnapshot().documentStyle.documentFlavor;
+	const transformer = renderManagerService.getRenderById(unitId).scene.getTransformerByCreate();
+	const HORIZONTAL_RELATIVE_FROM = [
+		{
+			label: localeService.t("docs-drawing-ui.image-position.column"),
+			value: String(ObjectRelativeFromH.COLUMN)
+		},
+		{
+			label: localeService.t("docs-drawing-ui.image-position.page"),
+			value: String(ObjectRelativeFromH.PAGE)
+		},
+		{
+			label: localeService.t("docs-drawing-ui.image-position.margin"),
+			value: String(ObjectRelativeFromH.MARGIN)
+		}
+	];
+	const VERTICAL_RELATIVE_FROM = [
+		{
+			label: localeService.t("docs-drawing-ui.image-position.line"),
+			value: String(ObjectRelativeFromV.LINE),
+			disabled: documentFlavor === DocumentFlavor.MODERN
+		},
+		{
+			label: localeService.t("docs-drawing-ui.image-position.page"),
+			value: String(ObjectRelativeFromV.PAGE),
+			disabled: documentFlavor === DocumentFlavor.MODERN
+		},
+		{
+			label: localeService.t("docs-drawing-ui.image-position.margin"),
+			value: String(ObjectRelativeFromV.MARGIN),
+			disabled: documentFlavor === DocumentFlavor.MODERN
+		},
+		{
+			label: localeService.t("docs-drawing-ui.image-position.paragraph"),
+			value: String(ObjectRelativeFromV.PARAGRAPH)
+		}
+	];
+	const [disabled, setDisabled] = useState(true);
+	const [hPosition, setHPosition] = useState({
+		relativeFrom: ObjectRelativeFromH.PAGE,
+		posOffset: 0
+	});
+	const [vPosition, setVPosition] = useState({
+		relativeFrom: ObjectRelativeFromV.PAGE,
+		posOffset: 0
+	});
+	const [followTextMove, setFollowTextMove] = useState(true);
+	const [showPanel, setShowPanel] = useState(true);
+	function handlePositionChange(direction, value) {
+		var _renderManagerService2;
+		if (direction === "positionH") setHPosition(value);
+		else setVPosition(value);
+		const focusDrawings = drawingManagerService.getFocusDrawings();
+		if (focusDrawings.length === 0) return;
+		const drawings = focusDrawings.map((drawing) => {
+			return {
+				unitId: drawing.unitId,
+				subUnitId: drawing.subUnitId,
+				drawingId: drawing.drawingId
+			};
+		});
+		commandService.executeCommand(UpdateDrawingDocTransformCommand.id, {
+			unitId: focusDrawings[0].unitId,
+			subUnitId: focusDrawings[0].unitId,
+			drawings: drawings.map((drawing) => ({
+				drawingId: drawing.drawingId,
+				key: direction,
+				value
+			}))
+		});
+		const docSelectionRenderService = (_renderManagerService2 = renderManagerService.getRenderById(unitId)) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.with(DocSelectionRenderService);
+		if (docSelectionRenderService) docSelectionRenderService.blur();
+		transformer.refreshControls();
+	}
+	function handleHorizontalRelativeFromChange(value) {
+		var _renderManagerService3;
+		const prevRelativeFrom = hPosition.relativeFrom;
+		const prevPosOffset = hPosition.posOffset;
+		const relativeFrom = Number(value);
+		if (prevRelativeFrom === relativeFrom) return;
+		const focusDrawings = drawingManagerService.getFocusDrawings();
+		if (focusDrawings.length === 0) return;
+		const drawingId = focusDrawings[0].drawingId;
+		const unitId = focusDrawings[0].unitId;
+		let drawing = null;
+		let pageMarginLeft = 0;
+		const skeleton = (_renderManagerService3 = renderManagerService.getRenderById(unitId)) === null || _renderManagerService3 === void 0 ? void 0 : _renderManagerService3.with(DocSkeletonManagerService).getSkeleton();
+		const skeletonData = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getSkeletonData();
+		if (skeletonData == null) return;
+		const { pages, skeHeaders, skeFooters } = skeletonData;
+		for (const page of pages) {
+			var _skeHeaders$get, _skeFooters$get;
+			const { marginLeft, skeDrawings, headerId, footerId, pageWidth } = page;
+			if (skeDrawings.has(drawingId)) {
+				drawing = skeDrawings.get(drawingId);
+				pageMarginLeft = marginLeft;
+				break;
+			}
+			const headerPage = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(pageWidth);
+			if (headerPage === null || headerPage === void 0 ? void 0 : headerPage.skeDrawings.has(drawingId)) {
+				drawing = headerPage === null || headerPage === void 0 ? void 0 : headerPage.skeDrawings.get(drawingId);
+				pageMarginLeft = marginLeft;
+				break;
+			}
+			const footerPage = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(pageWidth);
+			if (footerPage === null || footerPage === void 0 ? void 0 : footerPage.skeDrawings.has(drawingId)) {
+				drawing = footerPage === null || footerPage === void 0 ? void 0 : footerPage.skeDrawings.get(drawingId);
+				pageMarginLeft = marginLeft;
+				break;
+			}
+		}
+		if (drawing == null) return;
+		let delta = 0;
+		if (prevRelativeFrom === ObjectRelativeFromH.COLUMN) delta -= drawing.columnLeft;
+		else if (prevRelativeFrom === ObjectRelativeFromH.MARGIN) delta -= pageMarginLeft;
+		if (relativeFrom === ObjectRelativeFromH.COLUMN) delta += drawing.columnLeft;
+		else if (relativeFrom === ObjectRelativeFromH.MARGIN) delta += pageMarginLeft;
+		else if (relativeFrom === ObjectRelativeFromH.PAGE) {}
+		handlePositionChange("positionH", {
+			relativeFrom,
+			posOffset: (prevPosOffset !== null && prevPosOffset !== void 0 ? prevPosOffset : 0) - delta
+		});
+	}
+	function handleVerticalRelativeFromChange(value) {
+		var _renderManagerService4, _renderManagerService5, _documentDataModel$ge, _glyph$parent, _column$parent;
+		const prevRelativeFrom = vPosition.relativeFrom;
+		const prevPosOffset = vPosition.posOffset;
+		const relativeFrom = Number(value);
+		if (prevRelativeFrom === relativeFrom) return;
+		const focusDrawings = drawingManagerService.getFocusDrawings();
+		if (focusDrawings.length === 0) return;
+		const { drawingId, unitId } = focusDrawings[0];
+		const documentDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
+		const skeleton = (_renderManagerService4 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService4 === void 0 ? void 0 : _renderManagerService4.with(DocSkeletonManagerService).getSkeleton();
+		const docSelectionRenderService = (_renderManagerService5 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService5 === void 0 ? void 0 : _renderManagerService5.with(DocSelectionRenderService);
+		const segmentId = docSelectionRenderService === null || docSelectionRenderService === void 0 ? void 0 : docSelectionRenderService.getSegment();
+		const segmentPage = docSelectionRenderService === null || docSelectionRenderService === void 0 ? void 0 : docSelectionRenderService.getSegmentPage();
+		const drawing = documentDataModel === null || documentDataModel === void 0 || (_documentDataModel$ge = documentDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _documentDataModel$ge === void 0 || (_documentDataModel$ge = _documentDataModel$ge.getBody()) === null || _documentDataModel$ge === void 0 || (_documentDataModel$ge = _documentDataModel$ge.customBlocks) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge.find((c) => c.blockId === drawingId);
+		if (drawing == null || skeleton == null || docSelectionRenderService == null) return;
+		const { startIndex } = drawing;
+		const glyph = skeleton.findNodeByCharIndex(startIndex, segmentId, segmentPage);
+		const line = glyph === null || glyph === void 0 || (_glyph$parent = glyph.parent) === null || _glyph$parent === void 0 ? void 0 : _glyph$parent.parent;
+		const column = line === null || line === void 0 ? void 0 : line.parent;
+		const paragraphStartLine = column === null || column === void 0 ? void 0 : column.lines.find((l) => l.paragraphIndex === (line === null || line === void 0 ? void 0 : line.paragraphIndex) && l.paragraphStart);
+		const page = column === null || column === void 0 || (_column$parent = column.parent) === null || _column$parent === void 0 ? void 0 : _column$parent.parent;
+		if (glyph == null || line == null || paragraphStartLine == null || column == null || page == null) return;
+		let delta = 0;
+		if (prevRelativeFrom === ObjectRelativeFromV.PARAGRAPH) delta -= paragraphStartLine.top;
+		else if (prevRelativeFrom === ObjectRelativeFromV.LINE) delta -= line.top;
+		else if (prevRelativeFrom === ObjectRelativeFromV.PAGE) delta += page.marginTop;
+		if (relativeFrom === ObjectRelativeFromV.PARAGRAPH) delta += paragraphStartLine.top;
+		else if (relativeFrom === ObjectRelativeFromV.LINE) delta += line.top;
+		else if (relativeFrom === ObjectRelativeFromV.PAGE) delta -= page.marginTop;
+		handlePositionChange("positionV", {
+			relativeFrom,
+			posOffset: (prevPosOffset !== null && prevPosOffset !== void 0 ? prevPosOffset : 0) - delta
+		});
+	}
+	function updateState(drawingParam) {
+		var _snapshot$drawings;
+		const snapshot = documentDataModel === null || documentDataModel === void 0 ? void 0 : documentDataModel.getSnapshot();
+		const drawing = snapshot === null || snapshot === void 0 || (_snapshot$drawings = snapshot.drawings) === null || _snapshot$drawings === void 0 ? void 0 : _snapshot$drawings[drawingParam.drawingId];
+		if (drawing == null) return;
+		const { layoutType } = drawing;
+		const { positionH, positionV } = drawing.docTransform;
+		setHPosition(positionH);
+		setVPosition(positionV);
+		setDisabled(layoutType === PositionedObjectLayoutType.INLINE);
+		setFollowTextMove(positionV.relativeFrom === ObjectRelativeFromV.PARAGRAPH || positionV.relativeFrom === ObjectRelativeFromV.LINE);
+	}
+	function updateFocusDrawingState() {
+		const focusDrawings = drawingManagerService.getFocusDrawings();
+		if (focusDrawings.length === 0) return;
+		updateState(focusDrawings[0]);
+	}
+	function handleFollowTextMoveCheck(val) {
+		setFollowTextMove(val);
+		handleVerticalRelativeFromChange(val ? String(ObjectRelativeFromV.PARAGRAPH) : String(ObjectRelativeFromV.PAGE));
+	}
+	useEffect(() => {
+		updateFocusDrawingState();
+		const subscription = drawingManagerService.focus$.subscribe((drawingParams) => {
+			if (drawingParams.length === 0) {
+				setShowPanel(false);
+				return;
+			}
+			setShowPanel(true);
+			updateState(drawingParams[0]);
+		});
+		const mutationListener = commandService.onCommandExecuted(async (command) => {
+			if (command.id === RichTextEditingMutation.id) updateFocusDrawingState();
+		});
+		return () => {
+			subscription.unsubscribe();
+			mutationListener.dispose();
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": !showPanel }),
+		children: [
+			/* @__PURE__ */ jsx("header", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				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("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("docs-drawing-ui.image-position.absolutePosition") }), /* @__PURE__ */ jsx(InputNumber, {
+					min: MIN_OFFSET,
+					max: MAX_OFFSET,
+					precision: 1,
+					disabled,
+					value: hPosition.posOffset,
+					onChange: (val) => {
+						handlePositionChange("positionH", {
+							relativeFrom: hPosition.relativeFrom,
+							posOffset: val
+						});
+					}
+				})] }), /* @__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,
+					onChange: handleHorizontalRelativeFromChange
+				})] })]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				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("docs-drawing-ui.image-position.absolutePosition") }), /* @__PURE__ */ jsx(InputNumber, {
+					min: MIN_OFFSET,
+					max: MAX_OFFSET,
+					precision: 1,
+					disabled,
+					value: vPosition.posOffset,
+					onChange: (val) => {
+						handlePositionChange("positionV", {
+							relativeFrom: vPosition.relativeFrom,
+							posOffset: val
+						});
+					}
+				})] }), /* @__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,
+					onChange: handleVerticalRelativeFromChange
+				})] })]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				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("docs-drawing-ui.image-position.moveObjectWithText")
+			}) })
+		]
+	});
+}
 
 //#endregion
-//#region src/views/doc-image-panel/DocDrawingPosition.tsx
-const MIN_OFFSET = -1e3;
-const MAX_OFFSET = 1e3;
-const DocDrawingPosition = (props) => {
-	const commandService = useDependency(ICommandService);
-	const localeService = useDependency(LocaleService);
-	const drawingManagerService = useDependency(IDrawingManagerService);
-	const renderManagerService = useDependency(IRenderManagerService);
-	const univerInstanceService = useDependency(IUniverInstanceService);
-	const { drawings } = props;
-	const drawingParam = drawings[0];
-	if (drawingParam == null) return;
-	const { unitId } = drawingParam;
-	const documentDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
-	const documentFlavor = documentDataModel === null || documentDataModel === void 0 ? void 0 : documentDataModel.getSnapshot().documentStyle.documentFlavor;
-	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 HORIZONTAL_RELATIVE_FROM = [
-		{
-			label: localeService.t("docs-drawing-ui.image-position.column"),
-			value: String(ObjectRelativeFromH.COLUMN)
-		},
-		{
-			label: localeService.t("docs-drawing-ui.image-position.page"),
-			value: String(ObjectRelativeFromH.PAGE)
-		},
-		{
-			label: localeService.t("docs-drawing-ui.image-position.margin"),
-			value: String(ObjectRelativeFromH.MARGIN)
+//#region src/commands/commands/update-doc-drawing.command.ts
+function getDeleteAndInsertCustomBlockActions(segmentId, oldSegmentId, segmentPage, offset, drawingId, documentDataModel, docSelectionRenderManager) {
+	var _documentDataModel$ge, _documentDataModel$ge2, _oldBody$customBlocks;
+	const textX = new TextX();
+	const jsonX = JSONX.getInstance();
+	const rawActions = [];
+	const oldBody = (_documentDataModel$ge = documentDataModel.getSelfOrHeaderFooterModel(oldSegmentId)) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge.getBody();
+	const body = (_documentDataModel$ge2 = documentDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _documentDataModel$ge2 === void 0 ? void 0 : _documentDataModel$ge2.getBody();
+	if (oldBody == null || body == null) return;
+	const oldOffset = (_oldBody$customBlocks = oldBody.customBlocks) === null || _oldBody$customBlocks === void 0 || (_oldBody$customBlocks = _oldBody$customBlocks.find((block) => block.blockId === drawingId)) === null || _oldBody$customBlocks === void 0 ? void 0 : _oldBody$customBlocks.startIndex;
+	if (oldOffset == null) return;
+	offset = Math.min(body.dataStream.length - 2, offset);
+	if (segmentId === oldSegmentId) {
+		if (offset < oldOffset) {
+			if (offset > 0) textX.push({
+				t: TextXActionType.RETAIN,
+				len: offset
+			});
+			textX.push({
+				t: TextXActionType.INSERT,
+				body: {
+					dataStream: "\b",
+					customBlocks: [{
+						startIndex: 0,
+						blockId: drawingId
+					}]
+				},
+				len: 1
+			});
+			textX.push({
+				t: TextXActionType.RETAIN,
+				len: oldOffset - offset
+			});
+			textX.push({
+				t: TextXActionType.DELETE,
+				len: 1
+			});
+		} else {
+			if (oldOffset > 0) textX.push({
+				t: TextXActionType.RETAIN,
+				len: oldOffset
+			});
+			textX.push({
+				t: TextXActionType.DELETE,
+				len: 1
+			});
+			if (offset - oldOffset - 1 > 0) textX.push({
+				t: TextXActionType.RETAIN,
+				len: offset - oldOffset - 1
+			});
+			textX.push({
+				t: TextXActionType.INSERT,
+				body: {
+					dataStream: "\b",
+					customBlocks: [{
+						startIndex: 0,
+						blockId: drawingId
+					}]
+				},
+				len: 1
+			});
 		}
-	];
-	const VERTICAL_RELATIVE_FROM = [
-		{
-			label: localeService.t("docs-drawing-ui.image-position.line"),
-			value: String(ObjectRelativeFromV.LINE),
-			disabled: documentFlavor === DocumentFlavor.MODERN
-		},
-		{
-			label: localeService.t("docs-drawing-ui.image-position.page"),
-			value: String(ObjectRelativeFromV.PAGE),
-			disabled: documentFlavor === DocumentFlavor.MODERN
-		},
-		{
-			label: localeService.t("docs-drawing-ui.image-position.margin"),
-			value: String(ObjectRelativeFromV.MARGIN),
-			disabled: documentFlavor === DocumentFlavor.MODERN
-		},
-		{
-			label: localeService.t("docs-drawing-ui.image-position.paragraph"),
-			value: String(ObjectRelativeFromV.PARAGRAPH)
+		if (offset !== oldOffset) {
+			const path = getRichTextEditPath(documentDataModel, oldSegmentId);
+			const action = jsonX.editOp(textX.serialize(), path);
+			rawActions.push(action);
 		}
-	];
-	const [disabled, setDisabled] = useState(true);
-	const [hPosition, setHPosition] = useState({
-		relativeFrom: ObjectRelativeFromH.PAGE,
-		posOffset: 0
-	});
-	const [vPosition, setVPosition] = useState({
-		relativeFrom: ObjectRelativeFromV.PAGE,
-		posOffset: 0
-	});
-	const [followTextMove, setFollowTextMove] = useState(true);
-	const [showPanel, setShowPanel] = useState(true);
-	function handlePositionChange(direction, value) {
-		var _renderManagerService;
-		if (direction === "positionH") setHPosition(value);
-		else setVPosition(value);
-		const focusDrawings = drawingManagerService.getFocusDrawings();
-		if (focusDrawings.length === 0) return;
-		const drawings = focusDrawings.map((drawing) => {
-			return {
-				unitId: drawing.unitId,
-				subUnitId: drawing.subUnitId,
-				drawingId: drawing.drawingId
-			};
+	} else {
+		if (oldOffset > 0) textX.push({
+			t: TextXActionType.RETAIN,
+			len: oldOffset
 		});
-		commandService.executeCommand(UpdateDrawingDocTransformCommand.id, {
-			unitId: focusDrawings[0].unitId,
-			subUnitId: focusDrawings[0].unitId,
-			drawings: drawings.map((drawing) => ({
-				drawingId: drawing.drawingId,
-				key: direction,
-				value
-			}))
+		textX.push({
+			t: TextXActionType.DELETE,
+			len: 1
 		});
-		const docSelectionRenderService = (_renderManagerService = renderManagerService.getRenderById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(DocSelectionRenderService);
-		if (docSelectionRenderService) docSelectionRenderService.blur();
-		transformer.refreshControls();
+		let path = getRichTextEditPath(documentDataModel, oldSegmentId);
+		let action = jsonX.editOp(textX.serialize(), path);
+		rawActions.push(action);
+		textX.empty();
+		if (offset > 0) textX.push({
+			t: TextXActionType.RETAIN,
+			len: offset
+		});
+		textX.push({
+			t: TextXActionType.INSERT,
+			body: {
+				dataStream: "\b",
+				customBlocks: [{
+					startIndex: 0,
+					blockId: drawingId
+				}]
+			},
+			len: 1
+		});
+		path = getRichTextEditPath(documentDataModel, segmentId);
+		action = jsonX.editOp(textX.serialize(), path);
+		rawActions.push(action);
+		docSelectionRenderManager.setSegment(segmentId);
+		docSelectionRenderManager.setSegmentPage(segmentPage);
 	}
-	function handleHorizontalRelativeFromChange(value) {
-		var _renderManagerService2;
-		const prevRelativeFrom = hPosition.relativeFrom;
-		const prevPosOffset = hPosition.posOffset;
-		const relativeFrom = Number(value);
-		if (prevRelativeFrom === relativeFrom) return;
-		const focusDrawings = drawingManagerService.getFocusDrawings();
-		if (focusDrawings.length === 0) return;
-		const drawingId = focusDrawings[0].drawingId;
-		const unitId = focusDrawings[0].unitId;
-		let drawing = null;
-		let pageMarginLeft = 0;
-		const skeleton = (_renderManagerService2 = renderManagerService.getRenderById(unitId)) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.with(DocSkeletonManagerService).getSkeleton();
-		const skeletonData = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getSkeletonData();
-		if (skeletonData == null) return;
-		const { pages, skeHeaders, skeFooters } = skeletonData;
-		for (const page of pages) {
-			var _skeHeaders$get, _skeFooters$get;
-			const { marginLeft, skeDrawings, headerId, footerId, pageWidth } = page;
-			if (skeDrawings.has(drawingId)) {
-				drawing = skeDrawings.get(drawingId);
-				pageMarginLeft = marginLeft;
-				break;
-			}
-			const headerPage = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(pageWidth);
-			if (headerPage === null || headerPage === void 0 ? void 0 : headerPage.skeDrawings.has(drawingId)) {
-				drawing = headerPage === null || headerPage === void 0 ? void 0 : headerPage.skeDrawings.get(drawingId);
-				pageMarginLeft = marginLeft;
-				break;
-			}
-			const footerPage = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(pageWidth);
-			if (footerPage === null || footerPage === void 0 ? void 0 : footerPage.skeDrawings.has(drawingId)) {
-				drawing = footerPage === null || footerPage === void 0 ? void 0 : footerPage.skeDrawings.get(drawingId);
-				pageMarginLeft = marginLeft;
-				break;
+	return rawActions;
+}
+/**
+* The command to update drawing wrap text.
+*/
+const UpdateDocDrawingDistanceCommand = {
+	id: "doc.command.update-doc-drawing-distance",
+	type: CommandType.COMMAND,
+	handler: (accessor, params) => {
+		if (params == null) return false;
+		const commandService = accessor.get(ICommandService);
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const { drawings, dist, unitId } = params;
+		const documentDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
+		if (documentDataModel == null) return false;
+		const jsonX = JSONX.getInstance();
+		const rawActions = [];
+		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
+		for (const drawing of drawings) {
+			const { drawingId } = drawing;
+			for (const [key, value] of Object.entries(dist)) {
+				const oldValue = oldDrawings[drawingId][key];
+				if (oldValue !== value) {
+					const action = jsonX.replaceOp([
+						"drawings",
+						drawingId,
+						key
+					], oldValue, value);
+					rawActions.push(action);
+				}
 			}
 		}
-		if (drawing == null) return;
-		let delta = 0;
-		if (prevRelativeFrom === ObjectRelativeFromH.COLUMN) delta -= drawing.columnLeft;
-		else if (prevRelativeFrom === ObjectRelativeFromH.MARGIN) delta -= pageMarginLeft;
-		if (relativeFrom === ObjectRelativeFromH.COLUMN) delta += drawing.columnLeft;
-		else if (relativeFrom === ObjectRelativeFromH.MARGIN) delta += pageMarginLeft;
-		else if (relativeFrom === ObjectRelativeFromH.PAGE) {}
-		handlePositionChange("positionH", {
-			relativeFrom,
-			posOffset: (prevPosOffset !== null && prevPosOffset !== void 0 ? prevPosOffset : 0) - delta
-		});
+		const doMutation = {
+			id: RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: null
+			}
+		};
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return JSONX.compose(acc, cur);
+		}, null);
+		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		return Boolean(result);
 	}
-	function handleVerticalRelativeFromChange(value) {
-		var _renderManagerService3, _renderManagerService4, _documentDataModel$ge, _glyph$parent, _column$parent;
-		const prevRelativeFrom = vPosition.relativeFrom;
-		const prevPosOffset = vPosition.posOffset;
-		const relativeFrom = Number(value);
-		if (prevRelativeFrom === relativeFrom) return;
-		const focusDrawings = drawingManagerService.getFocusDrawings();
-		if (focusDrawings.length === 0) return;
-		const { drawingId, unitId } = focusDrawings[0];
+};
+/**
+* The command to update drawing wrap text.
+*/
+const UpdateDocDrawingWrapTextCommand = {
+	id: "doc.command.update-doc-drawing-wrap-text",
+	type: CommandType.COMMAND,
+	handler: (accessor, params) => {
+		if (params == null) return false;
+		const commandService = accessor.get(ICommandService);
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const { drawings, wrapText, unitId } = params;
 		const documentDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
-		const skeleton = (_renderManagerService3 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService3 === void 0 ? void 0 : _renderManagerService3.with(DocSkeletonManagerService).getSkeleton();
-		const docSelectionRenderService = (_renderManagerService4 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService4 === void 0 ? void 0 : _renderManagerService4.with(DocSelectionRenderService);
-		const segmentId = docSelectionRenderService === null || docSelectionRenderService === void 0 ? void 0 : docSelectionRenderService.getSegment();
-		const segmentPage = docSelectionRenderService === null || docSelectionRenderService === void 0 ? void 0 : docSelectionRenderService.getSegmentPage();
-		const drawing = documentDataModel === null || documentDataModel === void 0 || (_documentDataModel$ge = documentDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _documentDataModel$ge === void 0 || (_documentDataModel$ge = _documentDataModel$ge.getBody()) === null || _documentDataModel$ge === void 0 || (_documentDataModel$ge = _documentDataModel$ge.customBlocks) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge.find((c) => c.blockId === drawingId);
-		if (drawing == null || skeleton == null || docSelectionRenderService == null) return;
-		const { startIndex } = drawing;
-		const glyph = skeleton.findNodeByCharIndex(startIndex, segmentId, segmentPage);
-		const line = glyph === null || glyph === void 0 || (_glyph$parent = glyph.parent) === null || _glyph$parent === void 0 ? void 0 : _glyph$parent.parent;
-		const column = line === null || line === void 0 ? void 0 : line.parent;
-		const paragraphStartLine = column === null || column === void 0 ? void 0 : column.lines.find((l) => l.paragraphIndex === (line === null || line === void 0 ? void 0 : line.paragraphIndex) && l.paragraphStart);
-		const page = column === null || column === void 0 || (_column$parent = column.parent) === null || _column$parent === void 0 ? void 0 : _column$parent.parent;
-		if (glyph == null || line == null || paragraphStartLine == null || column == null || page == null) return;
-		let delta = 0;
-		if (prevRelativeFrom === ObjectRelativeFromV.PARAGRAPH) delta -= paragraphStartLine.top;
-		else if (prevRelativeFrom === ObjectRelativeFromV.LINE) delta -= line.top;
-		else if (prevRelativeFrom === ObjectRelativeFromV.PAGE) delta += page.marginTop;
-		if (relativeFrom === ObjectRelativeFromV.PARAGRAPH) delta += paragraphStartLine.top;
-		else if (relativeFrom === ObjectRelativeFromV.LINE) delta += line.top;
-		else if (relativeFrom === ObjectRelativeFromV.PAGE) delta -= page.marginTop;
-		handlePositionChange("positionV", {
-			relativeFrom,
-			posOffset: (prevPosOffset !== null && prevPosOffset !== void 0 ? prevPosOffset : 0) - delta
-		});
-	}
-	function updateState(drawingParam) {
-		var _snapshot$drawings;
-		const snapshot = documentDataModel === null || documentDataModel === void 0 ? void 0 : documentDataModel.getSnapshot();
-		const drawing = snapshot === null || snapshot === void 0 || (_snapshot$drawings = snapshot.drawings) === null || _snapshot$drawings === void 0 ? void 0 : _snapshot$drawings[drawingParam.drawingId];
-		if (drawing == null) return;
-		const { layoutType } = drawing;
-		const { positionH, positionV } = drawing.docTransform;
-		setHPosition(positionH);
-		setVPosition(positionV);
-		setDisabled(layoutType === PositionedObjectLayoutType.INLINE);
-		setFollowTextMove(positionV.relativeFrom === ObjectRelativeFromV.PARAGRAPH || positionV.relativeFrom === ObjectRelativeFromV.LINE);
-	}
-	function updateFocusDrawingState() {
-		const focusDrawings = drawingManagerService.getFocusDrawings();
-		if (focusDrawings.length === 0) return;
-		updateState(focusDrawings[0]);
+		if (documentDataModel == null) return false;
+		const jsonX = JSONX.getInstance();
+		const rawActions = [];
+		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
+		for (const drawing of drawings) {
+			const { drawingId } = drawing;
+			const oldWrapText = oldDrawings[drawingId].wrapText;
+			if (oldWrapText !== wrapText) {
+				const action = jsonX.replaceOp([
+					"drawings",
+					drawingId,
+					"wrapText"
+				], oldWrapText, wrapText);
+				rawActions.push(action);
+			}
+		}
+		const doMutation = {
+			id: RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: null
+			}
+		};
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return JSONX.compose(acc, cur);
+		}, null);
+		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		return Boolean(result);
 	}
-	function handleFollowTextMoveCheck(val) {
-		setFollowTextMove(val);
-		handleVerticalRelativeFromChange(val ? String(ObjectRelativeFromV.PARAGRAPH) : String(ObjectRelativeFromV.PAGE));
+};
+/**
+* The command to move inline drawing.
+*/
+const IMoveInlineDrawingCommand = {
+	id: "doc.command.move-inline-drawing",
+	type: CommandType.COMMAND,
+	handler: (accessor, params) => {
+		var _renderManagerService, _docSelectionRenderSe;
+		if (params == null) return false;
+		const { drawing, unitId, offset, segmentId: newSegmentId, segmentPage, needRefreshDrawings } = params;
+		const renderManagerService = accessor.get(IRenderManagerService);
+		const docSelectionRenderService = (_renderManagerService = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(DocSelectionRenderService);
+		const docRefreshDrawingsService = accessor.get(DocRefreshDrawingsService);
+		const renderObject = renderManagerService.getRenderUnitById(unitId);
+		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+		const skeleton = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(DocSkeletonManagerService).getSkeleton();
+		if (scene == null || docSelectionRenderService == null) return false;
+		const transformer = scene.getTransformerByCreate();
+		const commandService = accessor.get(ICommandService);
+		const documentDataModel = accessor.get(IUniverInstanceService).getUnit(unitId, UniverInstanceType.UNIVER_DOC);
+		if (documentDataModel == null) return false;
+		if (needRefreshDrawings) {
+			docRefreshDrawingsService.refreshDrawings(skeleton);
+			transformer.refreshControls();
+			return true;
+		}
+		const rawActions = [];
+		const { drawingId } = drawing;
+		const actions = getDeleteAndInsertCustomBlockActions(newSegmentId, (_docSelectionRenderSe = docSelectionRenderService.getSegment()) !== null && _docSelectionRenderSe !== void 0 ? _docSelectionRenderSe : "", segmentPage, offset, drawingId, documentDataModel, docSelectionRenderService);
+		if (actions == null || actions.length === 0) {
+			docRefreshDrawingsService.refreshDrawings(skeleton);
+			transformer.refreshControls();
+			return false;
+		}
+		rawActions.push(...actions);
+		const doMutation = {
+			id: RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: null
+			}
+		};
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return JSONX.compose(acc, cur);
+		}, null);
+		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		transformer.refreshControls();
+		return Boolean(result);
 	}
-	useEffect(() => {
-		updateFocusDrawingState();
-		const subscription = drawingManagerService.focus$.subscribe((drawingParams) => {
-			if (drawingParams.length === 0) {
-				setShowPanel(false);
-				return;
+};
+/**
+* The command to transform non-inline drawing.
+*/
+const ITransformNonInlineDrawingCommand = {
+	id: "doc.command.transform-non-inline-drawing",
+	type: CommandType.COMMAND,
+	handler: (accessor, params) => {
+		var _renderManagerService2, _docSelectionRenderSe2;
+		if (params == null) return false;
+		const { drawing, unitId, offset, docTransform, segmentId: newSegmentId, segmentPage } = params;
+		const renderManagerService = accessor.get(IRenderManagerService);
+		const docSelectionRenderService = (_renderManagerService2 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.with(DocSelectionRenderService);
+		const renderObject = renderManagerService.getRenderUnitById(unitId);
+		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+		if (scene == null || docSelectionRenderService == null) return false;
+		const transformer = scene.getTransformerByCreate();
+		const commandService = accessor.get(ICommandService);
+		const documentDataModel = accessor.get(IUniverInstanceService).getUnit(unitId, UniverInstanceType.UNIVER_DOC);
+		if (documentDataModel == null) return false;
+		const rawActions = [];
+		const { drawingId } = drawing;
+		const actions = getDeleteAndInsertCustomBlockActions(newSegmentId, (_docSelectionRenderSe2 = docSelectionRenderService.getSegment()) !== null && _docSelectionRenderSe2 !== void 0 ? _docSelectionRenderSe2 : "", segmentPage, offset, drawingId, documentDataModel, docSelectionRenderService);
+		if (actions == null) return false;
+		if (actions.length > 0) rawActions.push(...actions);
+		const jsonX = JSONX.getInstance();
+		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
+		const { positionH: oldPositionH, positionV: oldPositionV, size: oldSize, angle: oldAngle } = oldDrawings[drawingId].docTransform;
+		if (!Tools.diffValue(oldPositionH, docTransform.positionH)) {
+			const updateAction = jsonX.replaceOp([
+				"drawings",
+				drawingId,
+				"docTransform",
+				"positionH"
+			], oldPositionH, docTransform.positionH);
+			rawActions.push(updateAction);
+		}
+		if (!Tools.diffValue(oldPositionV, docTransform.positionV)) {
+			const updateAction = jsonX.replaceOp([
+				"drawings",
+				drawingId,
+				"docTransform",
+				"positionV"
+			], oldPositionV, docTransform.positionV);
+			rawActions.push(updateAction);
+		}
+		if (!Tools.diffValue(oldSize, docTransform.size)) {
+			const updateAction = jsonX.replaceOp([
+				"drawings",
+				drawingId,
+				"docTransform",
+				"size"
+			], oldSize, docTransform.size);
+			rawActions.push(updateAction);
+		}
+		if (!Tools.diffValue(oldAngle, docTransform.angle)) {
+			const updateAction = jsonX.replaceOp([
+				"drawings",
+				drawingId,
+				"docTransform",
+				"angle"
+			], oldAngle, docTransform.angle);
+			rawActions.push(updateAction);
+		}
+		const doMutation = {
+			id: RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: null,
+				debounce: true
 			}
-			setShowPanel(true);
-			updateState(drawingParams[0]);
-		});
-		const mutationListener = commandService.onCommandExecuted(async (command) => {
-			if (command.id === RichTextEditingMutation.id) updateFocusDrawingState();
-		});
-		return () => {
-			subscription.unsubscribe();
-			mutationListener.dispose();
 		};
-	}, []);
-	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": !showPanel }),
-		children: [
-			/* @__PURE__ */ jsx("header", {
-				className: "univer-text-gray-600 dark:!univer-text-gray-200",
-				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("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("docs-drawing-ui.image-position.absolutePosition") }), /* @__PURE__ */ jsx(InputNumber, {
-					min: MIN_OFFSET,
-					max: MAX_OFFSET,
-					precision: 1,
-					disabled,
-					value: hPosition.posOffset,
-					onChange: (val) => {
-						handlePositionChange("positionH", {
-							relativeFrom: hPosition.relativeFrom,
-							posOffset: val
-						});
-					}
-				})] }), /* @__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,
-					onChange: handleHorizontalRelativeFromChange
-				})] })]
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "univer-text-gray-600 dark:!univer-text-gray-200",
-				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("docs-drawing-ui.image-position.absolutePosition") }), /* @__PURE__ */ jsx(InputNumber, {
-					min: MIN_OFFSET,
-					max: MAX_OFFSET,
-					precision: 1,
-					disabled,
-					value: vPosition.posOffset,
-					onChange: (val) => {
-						handlePositionChange("positionV", {
-							relativeFrom: vPosition.relativeFrom,
-							posOffset: val
-						});
-					}
-				})] }), /* @__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,
-					onChange: handleVerticalRelativeFromChange
-				})] })]
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "univer-text-gray-600 dark:!univer-text-gray-200",
-				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("docs-drawing-ui.image-position.moveObjectWithText")
-			}) })
-		]
-	});
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return JSONX.compose(acc, cur);
+		}, null);
+		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		transformer.refreshControls();
+		return Boolean(result);
+	}
 };
 
 //#endregion
@@ -2374,22 +1836,24 @@ const DocDrawingPosition = (props) => {
 const MIN_MARGIN = 0;
 const MAX_MARGIN = 100;
 const DocDrawingTextWrap = (props) => {
+	var _renderManagerService;
+	const renderManagerService = useDependency(IRenderManagerService);
+	const drawingParam = props.drawings[0];
+	const scene = drawingParam ? (_renderManagerService = renderManagerService.getRenderUnitById(drawingParam.unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.scene : void 0;
+	return drawingParam && scene ? /* @__PURE__ */ jsx(DocDrawingTextWrapContent, { ...props }) : null;
+};
+function DocDrawingTextWrapContent(props) {
 	const commandService = useDependency(ICommandService);
 	const localeService = useDependency(LocaleService);
 	const drawingManagerService = useDependency(IDrawingManagerService);
-	const renderManagerService = useDependency(IRenderManagerService);
 	const univerInstanceService = useDependency(IUniverInstanceService);
 	const { drawings } = props;
-	const drawingParam = drawings[0];
-	if (drawingParam == null) return null;
-	const { unitId } = drawingParam;
+	const { unitId } = drawings[0];
 	const documentDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
-	const renderObject = renderManagerService.getRenderUnitById(unitId);
-	if ((renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene) == null) return null;
 	const [disableWrapText, setDisableWrapText] = useState(true);
 	const [disableDistTB, setDisableDistTB] = useState(true);
 	const [disableDistLR, setDisableDistLR] = useState(true);
-	const [wrappingStyle, setWrappingStyle] = useState("inline");
+	const [wrappingStyle, setWrappingStyle] = useState(TextWrappingStyle.INLINE);
 	const [wrapText, setWrapText] = useState("");
 	const [distToText, setDistToText] = useState({
 		distT: 0,
@@ -2477,17 +1941,17 @@ const DocDrawingTextWrap = (props) => {
 		else setDisableDistTB(false);
 		if (layoutType === PositionedObjectLayoutType.WRAP_NONE || layoutType === PositionedObjectLayoutType.INLINE || layoutType === PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM) setDisableDistLR(true);
 		else setDisableDistLR(false);
-		if (layoutType === PositionedObjectLayoutType.WRAP_NONE) if (behindDoc === BooleanNumber.TRUE) setWrappingStyle("behindText");
-		else setWrappingStyle("inFrontOfText");
+		if (layoutType === PositionedObjectLayoutType.WRAP_NONE) if (behindDoc === BooleanNumber.TRUE) setWrappingStyle(TextWrappingStyle.BEHIND_TEXT);
+		else setWrappingStyle(TextWrappingStyle.IN_FRONT_OF_TEXT);
 		else switch (layoutType) {
 			case PositionedObjectLayoutType.INLINE:
-				setWrappingStyle("inline");
+				setWrappingStyle(TextWrappingStyle.INLINE);
 				break;
 			case PositionedObjectLayoutType.WRAP_SQUARE:
-				setWrappingStyle("wrapSquare");
+				setWrappingStyle(TextWrappingStyle.WRAP_SQUARE);
 				break;
 			case PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM:
-				setWrappingStyle("wrapTopAndBottom");
+				setWrappingStyle(TextWrappingStyle.WRAP_TOP_AND_BOTTOM);
 				break;
 			default: throw new Error(`Unsupported layout type: ${layoutType}`);
 		}
@@ -2527,23 +1991,23 @@ const DocDrawingTextWrap = (props) => {
 				direction: "vertical",
 				children: [
 					/* @__PURE__ */ jsx(Radio, {
-						value: "inline",
+						value: TextWrappingStyle.INLINE,
 						children: localeService.t("docs-drawing-ui.image-text-wrap.inline")
 					}),
 					/* @__PURE__ */ jsx(Radio, {
-						value: "wrapSquare",
+						value: TextWrappingStyle.WRAP_SQUARE,
 						children: localeService.t("docs-drawing-ui.image-text-wrap.square")
 					}),
 					/* @__PURE__ */ jsx(Radio, {
-						value: "wrapTopAndBottom",
+						value: TextWrappingStyle.WRAP_TOP_AND_BOTTOM,
 						children: localeService.t("docs-drawing-ui.image-text-wrap.topAndBottom")
 					}),
 					/* @__PURE__ */ jsx(Radio, {
-						value: "behindText",
+						value: TextWrappingStyle.BEHIND_TEXT,
 						children: localeService.t("docs-drawing-ui.image-text-wrap.behindText")
 					}),
 					/* @__PURE__ */ jsx(Radio, {
-						value: "inFrontOfText",
+						value: TextWrappingStyle.IN_FRONT_OF_TEXT,
 						children: localeService.t("docs-drawing-ui.image-text-wrap.inFrontText")
 					})
 				]
@@ -2622,21 +2086,28 @@ const DocDrawingTextWrap = (props) => {
 			})
 		]
 	});
-};
+}
 
 //#endregion
 //#region src/views/doc-image-panel/DocDrawingPanel.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
 const DocDrawingPanel = () => {
 	const drawingManagerService = useDependency(IDrawingManagerService);
-	const [drawings, setDrawings] = useState(drawingManagerService.getFocusDrawings());
-	useEffect(() => {
-		const focusDispose = drawingManagerService.focus$.subscribe((drawings) => {
-			setDrawings(drawings);
-		});
-		return () => {
-			focusDispose.unsubscribe();
-		};
-	}, []);
+	const drawings = useObservable(() => drawingManagerService.focus$, drawingManagerService.getFocusDrawings(), false, [drawingManagerService]);
 	return !!(drawings === null || drawings === void 0 ? void 0 : drawings.length) && /* @__PURE__ */ jsxs("div", {
 		className: "univer-text-sm",
 		children: [
@@ -2684,6 +2155,19 @@ ComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager))]
 
 //#endregion
 //#region src/controllers/doc-drawing-notification.controller.ts
+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 getAddOrRemoveDrawings(actions) {
 	if (JSONX.isNoop(actions) || !Array.isArray(actions)) return null;
 	const drawingsOp = actions.find((action) => Array.isArray(action) && (action === null || action === void 0 ? void 0 : action[0]) === "drawings");
@@ -2742,13 +2226,14 @@ function collectUpdatedDrawingIds(actions, drawingIds = /* @__PURE__ */ new Set(
 	return drawingIds;
 }
 let DocDrawingAddRemoveController = class DocDrawingAddRemoveController extends Disposable {
-	constructor(_univerInstanceService, _commandService, _drawingManagerService, _docDrawingService, _renderManagerService) {
+	constructor(_univerInstanceService, _commandService, _drawingManagerService, _docDrawingService, _renderManagerService, _docRefreshDrawingsService) {
 		super();
 		this._univerInstanceService = _univerInstanceService;
 		this._commandService = _commandService;
 		this._drawingManagerService = _drawingManagerService;
 		this._docDrawingService = _docDrawingService;
 		this._renderManagerService = _renderManagerService;
+		this._docRefreshDrawingsService = _docRefreshDrawingsService;
 		this._initialize();
 	}
 	_initialize() {
@@ -2765,6 +2250,10 @@ let DocDrawingAddRemoveController = class DocDrawingAddRemoveController extends
 				else this._removeDrawings(unitId, [drawingId]);
 			}
 		}));
+		this.disposeWithMe(this._commandService.beforeCommandExecuted((command) => {
+			if (command.id !== UpdateDocDrawingWrappingStyleCommand.id) return;
+			this._preserveWrappingStylePosition(command.params);
+		}));
 		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
 			if (command.id !== RichTextEditingMutation.id) return;
 			const { unitId, actions } = command.params;
@@ -2772,6 +2261,15 @@ let DocDrawingAddRemoveController = class DocDrawingAddRemoveController extends
 			const updatedDrawingIds = [...collectUpdatedDrawingIds(actions)];
 			if (updatedDrawingIds.length > 0) this._syncDrawingDataFromSnapshot(unitId, updatedDrawingIds);
 		}));
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (command.id !== UpdateDrawingDocTransformCommand.id && command.id !== UpdateDocDrawingWrappingStyleCommand.id) return;
+			const { unitId } = command.params;
+			const renderObject = this._renderManagerService.getRenderById(unitId);
+			const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+			if (renderObject == null || scene == null) return;
+			this._docRefreshDrawingsService.refreshDrawings(renderObject.with(DocSkeletonManagerService).getSkeleton());
+			scene.getTransformerByCreate().refreshControls();
+		}));
 		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
 			var _this$_univerInstance;
 			if (command.id !== UndoCommand.id && command.id !== RedoCommand.id) return;
@@ -2784,6 +2282,65 @@ let DocDrawingAddRemoveController = class DocDrawingAddRemoveController extends
 			scene.getTransformerByCreate().refreshControls();
 		}));
 	}
+	_preserveWrappingStylePosition(params) {
+		var _documentDataModel$ge;
+		if (params.wrappingStyle === TextWrappingStyle.INLINE) return;
+		const { unitId } = params;
+		const documentDataModel = this._univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
+		const renderObject = this._renderManagerService.getRenderById(unitId);
+		const skeletonManager = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(DocSkeletonManagerService);
+		const skeletonData = skeletonManager === null || skeletonManager === void 0 ? void 0 : skeletonManager.getSkeleton().getSkeletonData();
+		const viewModel = skeletonManager === null || skeletonManager === void 0 ? void 0 : skeletonManager.getViewModel();
+		if (!documentDataModel || !skeletonData || !viewModel) return;
+		const editArea = viewModel.getEditArea();
+		const { pages, skeHeaders, skeFooters } = skeletonData;
+		const oldDrawings = (_documentDataModel$ge = documentDataModel.getDrawings()) !== null && _documentDataModel$ge !== void 0 ? _documentDataModel$ge : {};
+		params.drawings = params.drawings.map((drawing) => {
+			const oldDrawing = oldDrawings[drawing.drawingId];
+			if (!oldDrawing) return drawing;
+			let drawingAnchor = null;
+			for (const page of pages) {
+				const { headerId, footerId, marginTop, marginLeft, marginBottom, pageWidth, pageHeight } = page;
+				if (editArea === DocumentEditArea.HEADER) {
+					var _skeHeaders$get;
+					const header = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(pageWidth);
+					if (header) drawingAnchor = findDrawingAnchorInPage(header, drawing.drawingId, header.marginTop, marginLeft);
+				} else if (editArea === DocumentEditArea.FOOTER) {
+					var _skeFooters$get;
+					const footer = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(pageWidth);
+					if (footer) drawingAnchor = findDrawingAnchorInPage(footer, drawing.drawingId, pageHeight - marginBottom + footer.marginTop, marginLeft);
+				} else drawingAnchor = findDrawingAnchorInPage(page, drawing.drawingId, marginTop, marginLeft);
+				if (drawingAnchor) break;
+			}
+			if (!drawingAnchor) return drawing;
+			const { skeDrawing, pageMarginTop, pageMarginLeft } = drawingAnchor;
+			const oldPositionH = oldDrawing.docTransform.positionH;
+			const oldPositionV = oldDrawing.docTransform.positionV;
+			let posOffsetH = skeDrawing.aLeft;
+			let posOffsetV = skeDrawing.aTop;
+			if (oldPositionH.relativeFrom === ObjectRelativeFromH.MARGIN) posOffsetH -= pageMarginLeft;
+			else if (oldPositionH.relativeFrom === ObjectRelativeFromH.COLUMN) posOffsetH -= skeDrawing.columnLeft;
+			if (oldPositionV.relativeFrom === ObjectRelativeFromV.PAGE) posOffsetV += pageMarginTop;
+			else if (oldPositionV.relativeFrom === ObjectRelativeFromV.LINE) posOffsetV -= skeDrawing.lineTop;
+			else if (oldPositionV.relativeFrom === ObjectRelativeFromV.PARAGRAPH) posOffsetV -= skeDrawing.blockAnchorTop;
+			return {
+				...oldDrawing,
+				...drawing,
+				docTransform: {
+					...oldDrawing.docTransform,
+					...drawing.docTransform,
+					positionH: {
+						relativeFrom: oldPositionH.relativeFrom,
+						posOffset: posOffsetH
+					},
+					positionV: {
+						relativeFrom: oldPositionV.relativeFrom,
+						posOffset: posOffsetV
+					}
+				}
+			};
+		});
+	}
 	_addDrawings(unitId, drawings) {
 		const drawingManagerService = this._drawingManagerService;
 		const docDrawingService = this._docDrawingService;
@@ -2855,7 +2412,8 @@ DocDrawingAddRemoveController = __decorate([
 	__decorateParam(1, ICommandService),
 	__decorateParam(2, IDrawingManagerService),
 	__decorateParam(3, IDocDrawingService),
-	__decorateParam(4, IRenderManagerService)
+	__decorateParam(4, IRenderManagerService),
+	__decorateParam(5, Inject(DocRefreshDrawingsService))
 ], DocDrawingAddRemoveController);
 
 //#endregion
@@ -3230,6 +2788,8 @@ let DocDrawingTransformUpdateController = class DocDrawingTransformUpdateControl
 				width,
 				height,
 				angle,
+				flipX: drawingOrigin.docTransform.flipX,
+				flipY: drawingOrigin.docTransform.flipY,
 				clipBounds: pageClipBounds
 			};
 			if (updateDrawingMap[drawingId] == null) updateDrawingMap[drawingId] = {
@@ -3922,22 +3482,17 @@ let DocDrawingUIController = class DocDrawingUIController extends Disposable {
 			InsertDocImageCommand,
 			InsertDocRectangleShapeCommand,
 			InsertDocEllipseShapeCommand,
-			InsertDocDrawingCommand,
-			UpdateDocDrawingWrappingStyleCommand,
 			UpdateDocDrawingDistanceCommand,
 			UpdateDocDrawingWrapTextCommand,
-			UpdateDrawingDocTransformCommand,
 			IMoveInlineDrawingCommand,
 			ITransformNonInlineDrawingCommand,
-			RemoveDocDrawingCommand,
 			SidebarDocDrawingOperation,
 			ClearDocDrawingTransformerOperation,
 			EditDocDrawingOperation,
 			GroupDocDrawingCommand,
 			UngroupDocDrawingCommand,
 			MoveDocDrawingsCommand,
-			DeleteDocDrawingsCommand,
-			SetDocDrawingArrangeCommand
+			DeleteDocDrawingsCommand
 		].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
 	}
 	_initShortcuts() {
@@ -4131,32 +3686,36 @@ let DocDrawingPopupMenuController = class DocDrawingPopupMenuController extends
 					subUnitId,
 					drawingId
 				},
-				disable: (_editCommandInfo$disa = editCommandInfo === null || editCommandInfo === void 0 ? void 0 : editCommandInfo.disable) !== null && _editCommandInfo$disa !== void 0 ? _editCommandInfo$disa : drawingType === DrawingTypeEnum.DRAWING_DOM
+				disable: (_editCommandInfo$disa = editCommandInfo === null || editCommandInfo === void 0 ? void 0 : editCommandInfo.disable) !== null && _editCommandInfo$disa !== void 0 ? _editCommandInfo$disa : drawingType === DrawingTypeEnum.DRAWING_DOM,
+				hideOnClick: true,
+				icon: "DrawingEditIcon"
 			},
 			{
-				label: "docs-drawing-ui.image-popup.delete",
+				label: "docs-drawing-ui.image-popup.crop",
 				index: 1,
-				commandId: RemoveDocDrawingCommand.id,
+				commandId: OpenImageCropOperation.id,
 				commandParams: {
 					unitId,
-					drawings: [{
-						unitId,
-						subUnitId,
-						drawingId
-					}]
+					subUnitId,
+					drawingId
 				},
-				disable: false
+				disable: drawingType === DrawingTypeEnum.DRAWING_DOM,
+				icon: "DrawingCropIcon"
 			},
 			{
-				label: "docs-drawing-ui.image-popup.crop",
+				label: "docs-drawing-ui.image-popup.delete",
 				index: 2,
-				commandId: OpenImageCropOperation.id,
+				commandId: RemoveDocDrawingCommand.id,
 				commandParams: {
 					unitId,
-					subUnitId,
-					drawingId
+					drawings: [{
+						unitId,
+						subUnitId,
+						drawingId
+					}]
 				},
-				disable: drawingType === DrawingTypeEnum.DRAWING_DOM
+				disable: false,
+				icon: "DrawingDeleteIcon"
 			},
 			{
 				label: "docs-drawing-ui.image-popup.reset",
@@ -4233,4 +3792,4 @@ UniverDocsDrawingUIPlugin = __decorate([
 ], UniverDocsDrawingUIPlugin);
 
 //#endregion
-export { ClearDocDrawingTransformerOperation, DOCS_IMAGE_MENU_ID, DOCS_SHAPE_BELOW_MENU_ID, DOCS_SHAPE_MENU_ID, DeleteDocDrawingsCommand, DocDrawingFloatingToolbarAdapterService, DocDrawingPosition, DocDrawingTextWrap, DocFloatDomController, menuSchema as DocsDrawingUIMenuSchema, EditDocDrawingOperation, GroupDocDrawingCommand, InsertDocDrawingCommand, InsertDocEllipseShapeCommand, InsertDocImageCommand, InsertDocRectangleShapeCommand, MoveDocDrawingsCommand, RemoveDocDrawingCommand, SetDocDrawingArrangeCommand, SidebarDocDrawingOperation, UngroupDocDrawingCommand, UniverDocsDrawingUIPlugin, UpdateDrawingDocTransformCommand };
+export { ClearDocDrawingTransformerOperation, DOCS_IMAGE_MENU_ID, DOCS_SHAPE_BELOW_MENU_ID, DOCS_SHAPE_MENU_ID, DeleteDocDrawingsCommand, DocDrawingFloatingToolbarAdapterService, DocDrawingPosition, DocDrawingTextWrap, DocFloatDomController, menuSchema as DocsDrawingUIMenuSchema, EditDocDrawingOperation, GroupDocDrawingCommand, InsertDocEllipseShapeCommand, InsertDocImageCommand, InsertDocRectangleShapeCommand, MoveDocDrawingsCommand, SidebarDocDrawingOperation, UngroupDocDrawingCommand, UniverDocsDrawingUIPlugin };