@univerjs/docs-drawing-ui 0.25.0 → 1.0.0-alpha.0

package/lib/cjs/index.js

@@ -62,7 +62,7 @@ const RemoveDocDrawingCommand = {
 			});
 			memoryCursor.moveCursorTo(startIndex + 1);
 		}
-		const path = (0, _univerjs_docs_ui.getRichTextEditPath)(documentDataModel, segmentId);
+		const path = (0, _univerjs_core.getRichTextEditPath)(documentDataModel, segmentId);
 		rawActions.push(jsonX.editOp(textX.serialize(), path));
 		for (const block of removeCustomBlocks) {
 			var _documentDataModel$ge3;
@@ -196,7 +196,7 @@ const InsertDocDrawingCommand = {
 			},
 			len: drawings.length
 		});
-		const path = (0, _univerjs_docs_ui.getRichTextEditPath)(documentDataModel, segmentId);
+		const path = (0, _univerjs_core.getRichTextEditPath)(documentDataModel, segmentId);
 		const placeHolderAction = jsonX.editOp(textX.serialize(), path);
 		rawActions.push(placeHolderAction);
 		for (const drawing of drawings) {
@@ -223,7 +223,7 @@ const InsertDocDrawingCommand = {
 };
 function getContentInsertRange(accessor, unitId) {
 	try {
-		const range = accessor.get(_univerjs_docs_ui.DocContentInsertService).consumeInsertRange(unitId);
+		const range = accessor.get(_univerjs_docs.DocContentInsertService).consumeInsertRange(unitId);
 		if (range == null) return null;
 		return {
 			startOffset: range.startOffset,
@@ -307,7 +307,7 @@ const UngroupDocDrawingCommand = {
 };
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -318,7 +318,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -331,14 +331,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -361,7 +361,7 @@ var DocRefreshDrawingsService = class {
 };
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -369,7 +369,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -594,6 +594,7 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 					zeroLeft: docsLeft
 				});
 			}
+			this._updateDrawingsEditStatus();
 		}));
 	}
 	_findSegmentIdByDrawingId(drawingId) {
@@ -619,6 +620,7 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 		if (viewModel == null || docDataModel == null) return;
 		const { drawings = {} } = docDataModel.getSnapshot();
 		const isEditBody = viewModel.getEditArea() === _univerjs_engine_render.DocumentEditArea.BODY;
+		const isDocInputFocusing = this._docSelectionRenderService.isFocusing;
 		for (const key of Object.keys(drawings)) {
 			const drawing = drawings[key];
 			const objectKey = (0, _univerjs_drawing.getDrawingShapeKeyByDrawingSearch)({
@@ -630,8 +632,9 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 			if (drawingShapes.length) for (const shape of drawingShapes) {
 				scene.detachTransformerFrom(shape);
 				try {
-					shape.setOpacity(.5);
+					shape.setOpacity(isDocInputFocusing ? .5 : 1);
 				} catch (e) {}
+				if (!isDocInputFocusing) continue;
 				if (isEditBody && drawing.isMultiTransform !== _univerjs_core.BooleanNumber.TRUE || !isEditBody && drawing.isMultiTransform === _univerjs_core.BooleanNumber.TRUE) {
 					if (drawing.allowTransform !== false) scene.attachTransformerTo(shape);
 					try {
@@ -650,6 +653,12 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 		this.disposeWithMe(viewModel.editAreaChange$.subscribe(() => {
 			this._updateDrawingsEditStatus();
 		}));
+		this.disposeWithMe(this._docSelectionRenderService.onFocus$.subscribe(() => {
+			this._updateDrawingsEditStatus();
+		}));
+		this.disposeWithMe(this._docSelectionRenderService.onBlur$.subscribe(() => {
+			this._updateDrawingsEditStatus();
+		}));
 		this.disposeWithMe(this._docRefreshDrawingsService.refreshDrawings$.subscribe((skeleton) => {
 			if (skeleton == null) return;
 			queueMicrotask(() => {
@@ -706,6 +715,69 @@ const InsertDocImageCommand = {
 	}
 };
 
+//#endregion
+//#region src/commands/commands/insert-shape.command.ts
+const DOC_SHAPE_FILL = "#3A60F7";
+const DOC_SHAPE_STROKE = "#1D3EA6";
+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: _univerjs_core.ObjectRelativeFromH.PAGE,
+			posOffset: 0
+		},
+		positionV: {
+			relativeFrom: _univerjs_core.ObjectRelativeFromV.PARAGRAPH,
+			posOffset: 0
+		},
+		angle: 0
+	};
+}
+function createShapeInsertCommand(shape, width, height, id) {
+	return {
+		id,
+		type: _univerjs_core.CommandType.COMMAND,
+		handler: async (accessor) => {
+			var _univerInstanceServic;
+			const commandService = accessor.get(_univerjs_core.ICommandService);
+			const unitId = (_univerInstanceServic = accessor.get(_univerjs_core.IUniverInstanceService).getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC)) === null || _univerInstanceServic === void 0 ? void 0 : _univerInstanceServic.getUnitId();
+			if (!unitId) return false;
+			const docTransform = createDefaultDocTransform(width, height);
+			return commandService.executeCommand(InsertDocDrawingCommand.id, {
+				unitId,
+				drawings: [{
+					unitId,
+					subUnitId: unitId,
+					drawingId: (0, _univerjs_core.generateRandomId)(6),
+					drawingType: _univerjs_core.DrawingTypeEnum.DRAWING_IMAGE,
+					imageSourceType: _univerjs_drawing.ImageSourceType.BASE64,
+					source: createShapeSvgSource(shape, width, height),
+					transform: (0, _univerjs_docs_ui.docDrawingPositionToTransform)(docTransform),
+					docTransform,
+					behindDoc: _univerjs_core.BooleanNumber.FALSE,
+					title: "",
+					description: "",
+					layoutType: _univerjs_core.PositionedObjectLayoutType.INLINE,
+					wrapText: _univerjs_core.WrapTextType.BOTH_SIDES,
+					distB: 0,
+					distL: 0,
+					distR: 0,
+					distT: 0
+				}]
+			});
+		}
+	};
+}
+const InsertDocRectangleShapeCommand = createShapeInsertCommand("rectangle", 144, 96, "doc.command.insert-float-shape.rectangle");
+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 = {
@@ -790,7 +862,7 @@ function getDeleteAndInsertCustomBlockActions(segmentId, oldSegmentId, segmentPa
 			});
 		}
 		if (offset !== oldOffset) {
-			const path = (0, _univerjs_docs_ui.getRichTextEditPath)(documentDataModel, oldSegmentId);
+			const path = (0, _univerjs_core.getRichTextEditPath)(documentDataModel, oldSegmentId);
 			const action = jsonX.editOp(textX.serialize(), path);
 			rawActions.push(action);
 		}
@@ -803,7 +875,7 @@ function getDeleteAndInsertCustomBlockActions(segmentId, oldSegmentId, segmentPa
 			t: _univerjs_core.TextXActionType.DELETE,
 			len: 1
 		});
-		let path = (0, _univerjs_docs_ui.getRichTextEditPath)(documentDataModel, oldSegmentId);
+		let path = (0, _univerjs_core.getRichTextEditPath)(documentDataModel, oldSegmentId);
 		let action = jsonX.editOp(textX.serialize(), path);
 		rawActions.push(action);
 		textX.empty();
@@ -822,7 +894,7 @@ function getDeleteAndInsertCustomBlockActions(segmentId, oldSegmentId, segmentPa
 			},
 			len: 1
 		});
-		path = (0, _univerjs_docs_ui.getRichTextEditPath)(documentDataModel, segmentId);
+		path = (0, _univerjs_core.getRichTextEditPath)(documentDataModel, segmentId);
 		action = jsonX.editOp(textX.serialize(), path);
 		rawActions.push(action);
 		docSelectionRenderManager.setSegment(segmentId);
@@ -1625,23 +1697,95 @@ function ImageMenuFactory(accessor) {
 		icon: "AddImageIcon",
 		tooltip: "docs-drawing-ui.title",
 		disabled$: getDisableWhenSelectionInTableObservable(accessor),
-		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC, void 0, _univerjs_core.DOCS_ZEN_EDITOR_UNIT_ID_KEY)
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC)
 	};
 }
-function UploadFloatImageMenuFactory(_accessor) {
+function UploadFloatImageMenuFactory(accessor) {
 	return {
 		id: IMAGE_MENU_UPLOAD_FLOAT_ID,
 		title: "docs-drawing-ui.upload.float",
 		type: _univerjs_ui.MenuItemType.BUTTON,
 		icon: "AddImageIcon",
-		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(_accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC, void 0, _univerjs_core.DOCS_ZEN_EDITOR_UNIT_ID_KEY)
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC)
+	};
+}
+function UploadFloatImageBelowMenuFactory(accessor) {
+	return {
+		id: `${IMAGE_MENU_UPLOAD_FLOAT_ID}.below`,
+		commandId: IMAGE_MENU_UPLOAD_FLOAT_ID,
+		title: "docs-drawing-ui.upload.float",
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		icon: "AddImageIcon",
+		params: { paragraphMenuPlacement: "below" },
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC)
+	};
+}
+
+//#endregion
+//#region src/menu/shape.menu.ts
+const DOCS_SHAPE_MENU_ID = "doc.command.menu-insert-shape";
+const DOCS_SHAPE_BELOW_MENU_ID = "doc.command.menu-insert-shape.below";
+function ShapeMenuFactory(accessor) {
+	return {
+		id: DOCS_SHAPE_MENU_ID,
+		type: _univerjs_ui.MenuItemType.SUBITEMS,
+		icon: "ShapeIcon",
+		title: "docs-drawing-ui.shape.insert.title",
+		tooltip: "docs-drawing-ui.shape.insert.title",
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC)
+	};
+}
+function ShapeBelowMenuFactory(accessor) {
+	return {
+		id: DOCS_SHAPE_BELOW_MENU_ID,
+		type: _univerjs_ui.MenuItemType.SUBITEMS,
+		icon: "ShapeIcon",
+		title: "docs-drawing-ui.shape.insert.title",
+		tooltip: "docs-drawing-ui.shape.insert.title",
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC)
+	};
+}
+function InsertRectangleShapeMenuFactory(accessor) {
+	return {
+		id: InsertDocRectangleShapeCommand.id,
+		title: "docs-drawing-ui.shape.insert.rectangle",
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC)
+	};
+}
+function InsertEllipseShapeMenuFactory(accessor) {
+	return {
+		id: InsertDocEllipseShapeCommand.id,
+		title: "docs-drawing-ui.shape.insert.ellipse",
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC)
+	};
+}
+function InsertRectangleShapeBelowMenuFactory(accessor) {
+	return {
+		id: `${InsertDocRectangleShapeCommand.id}.below`,
+		commandId: InsertDocRectangleShapeCommand.id,
+		title: "docs-drawing-ui.shape.insert.rectangle",
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		params: { paragraphMenuPlacement: "below" },
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC)
+	};
+}
+function InsertEllipseShapeBelowMenuFactory(accessor) {
+	return {
+		id: `${InsertDocEllipseShapeCommand.id}.below`,
+		commandId: InsertDocEllipseShapeCommand.id,
+		title: "docs-drawing-ui.shape.insert.ellipse",
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		params: { paragraphMenuPlacement: "below" },
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC)
 	};
 }
 
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-drawing-ui";
-var version = "0.25.0";
+var version = "1.0.0-alpha.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -1665,1587 +1809,1782 @@ const configSymbol = Symbol(DOCS_DRAWING_UI_PLUGIN_CONFIG_KEY);
 const defaultPluginConfig = {};
 
 //#endregion
-//#region src/controllers/doc-drawing-notification.controller.ts
-function getAddOrRemoveDrawings(actions) {
-	if (_univerjs_core.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");
-	if (drawingsOp == null || !Array.isArray(drawingsOp) || drawingsOp.length < 3) return null;
-	if (typeof drawingsOp[1] === "string" && typeof drawingsOp[2] !== "object") return null;
-	if (Array.isArray(drawingsOp[1]) && typeof drawingsOp[1][1] !== "object") return null;
-	const drawings = [];
-	if (Array.isArray(drawingsOp === null || drawingsOp === void 0 ? void 0 : drawingsOp[1])) {
-		for (const op of drawingsOp) if (Array.isArray(op)) {
-			var _ref, _ref2;
-			drawings.push({
-				type: (op === null || op === void 0 || (_ref = op[1]) === null || _ref === void 0 ? void 0 : _ref.i) ? "add" : "remove",
-				drawingId: op === null || op === void 0 ? void 0 : op[0],
-				drawing: op === null || op === void 0 || (_ref2 = op[1]) === null || _ref2 === void 0 ? void 0 : _ref2.i
-			});
+//#region src/views/doc-image-panel/DocDrawingPosition.tsx
+const MIN_OFFSET = -1e3;
+const MAX_OFFSET = 1e3;
+const DocDrawingPosition = (props) => {
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const drawingManagerService = (0, _univerjs_ui.useDependency)(_univerjs_drawing.IDrawingManagerService);
+	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService);
+	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
+	const { drawings } = props;
+	const drawingParam = drawings[0];
+	if (drawingParam == null) return;
+	const { unitId } = drawingParam;
+	const documentDataModel = univerInstanceService.getUniverDocInstance(unitId);
+	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(_univerjs_core.ObjectRelativeFromH.COLUMN)
+		},
+		{
+			label: localeService.t("docs-drawing-ui.image-position.page"),
+			value: String(_univerjs_core.ObjectRelativeFromH.PAGE)
+		},
+		{
+			label: localeService.t("docs-drawing-ui.image-position.margin"),
+			value: String(_univerjs_core.ObjectRelativeFromH.MARGIN)
 		}
-	} else {
-		var _drawingsOp$, _drawingsOp$2;
-		drawings.push({
-			type: ((_drawingsOp$ = drawingsOp[2]) === null || _drawingsOp$ === void 0 ? void 0 : _drawingsOp$.i) ? "add" : "remove",
-			drawingId: drawingsOp[1],
-			drawing: (_drawingsOp$2 = drawingsOp[2]) === null || _drawingsOp$2 === void 0 ? void 0 : _drawingsOp$2.i
-		});
-	}
-	return drawings;
-}
-function getReOrderedDrawings(actions) {
-	if (!Array.isArray(actions) || actions.length < 3 || actions[0] !== "drawingsOrder") return [];
-	const drawingIndexes = [];
-	for (let i = 1; i < actions.length; i++) {
-		const action = actions[i];
-		if (Array.isArray(action) && typeof action[0] === "number" && typeof action[1] === "object") drawingIndexes.push(action[0]);
-		else {
-			drawingIndexes.length = 0;
-			break;
+	];
+	const VERTICAL_RELATIVE_FROM = [
+		{
+			label: localeService.t("docs-drawing-ui.image-position.line"),
+			value: String(_univerjs_core.ObjectRelativeFromV.LINE),
+			disabled: documentFlavor === _univerjs_core.DocumentFlavor.MODERN
+		},
+		{
+			label: localeService.t("docs-drawing-ui.image-position.page"),
+			value: String(_univerjs_core.ObjectRelativeFromV.PAGE),
+			disabled: documentFlavor === _univerjs_core.DocumentFlavor.MODERN
+		},
+		{
+			label: localeService.t("docs-drawing-ui.image-position.margin"),
+			value: String(_univerjs_core.ObjectRelativeFromV.MARGIN),
+			disabled: documentFlavor === _univerjs_core.DocumentFlavor.MODERN
+		},
+		{
+			label: localeService.t("docs-drawing-ui.image-position.paragraph"),
+			value: String(_univerjs_core.ObjectRelativeFromV.PARAGRAPH)
 		}
-	}
-	return drawingIndexes;
-}
-let DocDrawingAddRemoveController = class DocDrawingAddRemoveController extends _univerjs_core.Disposable {
-	constructor(_univerInstanceService, _commandService, _drawingManagerService, _docDrawingService, _renderManagerService) {
-		super();
-		this._univerInstanceService = _univerInstanceService;
-		this._commandService = _commandService;
-		this._drawingManagerService = _drawingManagerService;
-		this._docDrawingService = _docDrawingService;
-		this._renderManagerService = _renderManagerService;
-		this._initialize();
-	}
-	_initialize() {
-		this._commandExecutedListener();
-	}
-	_commandExecutedListener() {
-		this.disposeWithMe(this._commandService.beforeCommandExecuted((command) => {
-			if (command.id !== _univerjs_docs.RichTextEditingMutation.id) return;
-			const { unitId, actions, isSync, syncer } = command.params;
-			const addOrRemoveDrawings = getAddOrRemoveDrawings(actions);
-			if (addOrRemoveDrawings != null) for (const { type, drawingId, drawing } of addOrRemoveDrawings) {
-				if (isSync && (drawing === null || drawing === void 0 ? void 0 : drawing.unitId) === syncer) continue;
-				if (type === "add") this._addDrawings(unitId, [drawing]);
-				else this._removeDrawings(unitId, [drawingId]);
-			}
-		}));
-		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
-			if (command.id !== _univerjs_docs.RichTextEditingMutation.id) return;
-			const { unitId, actions } = command.params;
-			if (getReOrderedDrawings(actions).length > 0) this._updateDrawingsOrder(unitId);
-		}));
-		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
-			var _this$_univerInstance;
-			if (command.id !== _univerjs_core.UndoCommand.id && command.id !== _univerjs_core.RedoCommand.id) return;
-			const unitId = (_this$_univerInstance = this._univerInstanceService.getCurrentUniverDocInstance()) === null || _this$_univerInstance === void 0 ? void 0 : _this$_univerInstance.getUnitId();
-			const focusedDrawings = this._drawingManagerService.getFocusDrawings();
-			if (unitId == null || focusedDrawings.length === 0) return;
-			const renderObject = this._renderManagerService.getRenderById(unitId);
-			const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-			if (scene == null) return false;
-			scene.getTransformerByCreate().refreshControls();
-		}));
-	}
-	_addDrawings(unitId, drawings) {
-		const drawingManagerService = this._drawingManagerService;
-		const docDrawingService = this._docDrawingService;
-		const { subUnitId, redo: op, objects } = this._docDrawingService.getBatchAddOp(drawings);
-		drawingManagerService.applyJson1(unitId, subUnitId, op);
-		docDrawingService.applyJson1(unitId, subUnitId, op);
-		drawingManagerService.addNotification(objects);
-		docDrawingService.addNotification(objects);
-	}
-	_removeDrawings(unitId, drawingIds) {
-		const drawingManagerService = this._drawingManagerService;
-		const docDrawingService = this._docDrawingService;
-		const { subUnitId, redo: op, objects } = this._docDrawingService.getBatchRemoveOp(drawingIds.map((drawingId) => {
+	];
+	const [disabled, setDisabled] = (0, react.useState)(true);
+	const [hPosition, setHPosition] = (0, react.useState)({
+		relativeFrom: _univerjs_core.ObjectRelativeFromH.PAGE,
+		posOffset: 0
+	});
+	const [vPosition, setVPosition] = (0, react.useState)({
+		relativeFrom: _univerjs_core.ObjectRelativeFromV.PAGE,
+		posOffset: 0
+	});
+	const [followTextMove, setFollowTextMove] = (0, react.useState)(true);
+	const [showPanel, setShowPanel] = (0, react.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,
-				subUnitId: unitId,
-				drawingId
+				unitId: drawing.unitId,
+				subUnitId: drawing.subUnitId,
+				drawingId: drawing.drawingId
 			};
-		}));
-		drawingManagerService.applyJson1(unitId, subUnitId, op);
-		docDrawingService.applyJson1(unitId, subUnitId, op);
-		drawingManagerService.removeNotification(objects);
-		docDrawingService.removeNotification(objects);
-	}
-	_updateDrawingsOrder(unitId) {
-		const documentDataModel = this._univerInstanceService.getUniverDocInstance(unitId);
-		if (documentDataModel == null) return;
-		const drawingsOrder = documentDataModel.getSnapshot().drawingsOrder;
-		if (drawingsOrder == null) return;
-		const drawingManagerService = this._drawingManagerService;
-		const docDrawingService = this._docDrawingService;
-		drawingManagerService.setDrawingOrder(unitId, unitId, drawingsOrder);
-		docDrawingService.setDrawingOrder(unitId, unitId, drawingsOrder);
-		const objects = {
-			unitId,
-			subUnitId: unitId,
-			drawingIds: drawingsOrder
-		};
-		drawingManagerService.orderNotification(objects);
-		docDrawingService.orderNotification(objects);
+		});
+		commandService.executeCommand(UpdateDrawingDocTransformCommand.id, {
+			unitId: focusDrawings[0].unitId,
+			subUnitId: focusDrawings[0].unitId,
+			drawings: drawings.map((drawing) => ({
+				drawingId: drawing.drawingId,
+				key: direction,
+				value
+			}))
+		});
+		const docSelectionRenderService = (_renderManagerService = renderManagerService.getRenderById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(_univerjs_docs_ui.DocSelectionRenderService);
+		if (docSelectionRenderService) docSelectionRenderService.blur();
+		transformer.refreshControls();
 	}
-};
-DocDrawingAddRemoveController = __decorate([
-	__decorateParam(0, _univerjs_core.IUniverInstanceService),
-	__decorateParam(1, _univerjs_core.ICommandService),
-	__decorateParam(2, _univerjs_drawing.IDrawingManagerService),
-	__decorateParam(3, _univerjs_docs_drawing.IDocDrawingService),
-	__decorateParam(4, _univerjs_engine_render.IRenderManagerService)
-], DocDrawingAddRemoveController);
-
-//#endregion
-//#region src/views/printing-float-dom/index.tsx
-const DocPrintingFloatDom = (props) => {
-	const { floatDomInfos, scene, offset, bound } = props;
-	const width = bound.right - bound.left;
-	const height = bound.bottom - bound.top;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "univer-absolute univer-left-0 univer-top-0",
-		children: (0, react.useMemo)(() => floatDomInfos.map((info) => {
-			const { width = 0, height = 0, left = 0, top = 0 } = info.transform;
-			const domPos = calcDocFloatDomPositionByRect({
-				left,
-				right: left + width,
-				top,
-				bottom: top + height
-			}, scene);
-			const floatDom = {
-				position$: new rxjs.BehaviorSubject(domPos),
-				position: domPos,
-				id: info.drawingId,
-				componentKey: info.componentKey,
-				onPointerMove: () => {},
-				onPointerDown: () => {},
-				onPointerUp: () => {},
-				onWheel: () => {},
-				unitId: info.unitId,
-				data: info.data
-			};
-			return [info.drawingId, floatDom];
-		}).filter(([_, floatDom]) => !(floatDom.position.endX < 0 || floatDom.position.endY < 0 || floatDom.position.startX > width || floatDom.position.startY > height)), [
-			floatDomInfos,
-			scene,
-			offset,
-			width,
-			height
-		]).map(([id, floatDom]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_ui.PrintFloatDomSingle, {
-			layer: floatDom,
-			id,
-			position: floatDom.position
-		}, id))
-	});
-};
-
-//#endregion
-//#region src/controllers/doc-drawing-printing.controller.tsx
-let DocDrawingPrintingController = class DocDrawingPrintingController extends _univerjs_core.Disposable {
-	constructor(_docPrintInterceptorService, _drawingRenderService, _drawingManagerService, _componetManager, _injector) {
-		super();
-		this._docPrintInterceptorService = _docPrintInterceptorService;
-		this._drawingRenderService = _drawingRenderService;
-		this._drawingManagerService = _drawingManagerService;
-		this._componetManager = _componetManager;
-		this._injector = _injector;
-		this._initPrinting();
-		this._initPrintingDom();
-	}
-	_initPrinting() {
-		this.disposeWithMe(this._docPrintInterceptorService.interceptor.intercept(this._docPrintInterceptorService.interceptor.getInterceptPoints().PRINTING_COMPONENT_COLLECT, { handler: (_param, pos, next) => {
-			const { unitId, scene } = pos;
-			const unitData = this._drawingManagerService.getDrawingDataForUnit(unitId);
-			const subUnitData = unitData === null || unitData === void 0 ? void 0 : unitData[unitId];
-			if (subUnitData) subUnitData.order.forEach((id) => {
-				const drawing = subUnitData.data[id];
-				if (drawing.drawingType !== _univerjs_core.DrawingTypeEnum.DRAWING_CHART && drawing.drawingType !== _univerjs_core.DrawingTypeEnum.DRAWING_DOM) this._drawingRenderService.renderDrawing(drawing, scene);
-			});
-			return next();
-		} }));
-	}
-	_initPrintingDom() {
-		this.disposeWithMe(this._docPrintInterceptorService.interceptor.intercept(this._docPrintInterceptorService.interceptor.getInterceptPoints().PRINTING_DOM_COLLECT, { handler: (disposableCollection, pos, next) => {
-			const { unitId } = pos;
-			const unitData = this._drawingManagerService.getDrawingDataForUnit(unitId);
-			const subUnitData = unitData === null || unitData === void 0 ? void 0 : unitData[unitId];
-			if (subUnitData) {
-				const floatDomInfos = subUnitData.order.map((id) => {
-					const drawing = subUnitData.data[id];
-					if (drawing.drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_CHART) return {
-						...drawing,
-						componentKey: this._componetManager.get(_univerjs_core.DOC_DRAWING_PRINTING_COMPONENT_KEY)
-					};
-					if (drawing.drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_DOM) {
-						const printingComponentKey = this._docPrintInterceptorService.getPrintComponent(drawing.componentKey);
-						return {
-							...drawing,
-							componentKey: this._componetManager.get(printingComponentKey || drawing.componentKey)
-						};
-					}
-					return null;
-				}).filter(Boolean);
-				(0, _univerjs_design.render)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)((0, _univerjs_ui.connectInjector)(DocPrintingFloatDom, this._injector), {
-					unitId,
-					floatDomInfos,
-					scene: pos.scene,
-					skeleton: pos.skeleton,
-					offset: pos.offset,
-					bound: pos.bound
-				}), pos.root);
-				disposableCollection === null || disposableCollection === void 0 || disposableCollection.add(() => {
-					(0, _univerjs_design.unmount)(pos.root);
-				});
-				return next(disposableCollection);
-			}
-		} }));
-	}
-};
-DocDrawingPrintingController = __decorate([
-	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_docs_ui.DocPrintInterceptorService)),
-	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_drawing_ui.DrawingRenderService)),
-	__decorateParam(2, _univerjs_drawing.IDrawingManagerService),
-	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)),
-	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_core.Injector))
-], DocDrawingPrintingController);
-
-//#endregion
-//#region src/controllers/render-controllers/doc-drawing-transform-update.controller.ts
-function getDocsTableCellDrawingOffset(unitId, table, row, cell) {
-	const sourceTableId = (0, _univerjs_engine_render.getTableIdAndSliceIndex)(table.tableId).tableId;
-	const viewport = (0, _univerjs_engine_render.getDocsTableRenderViewport)(unitId, sourceTableId);
-	const scrollLeft = viewport && viewport.contentWidth > viewport.viewportWidth ? viewport.scrollLeft : 0;
-	return {
-		left: table.left + cell.left - scrollLeft + cell.marginLeft,
-		top: table.top + row.top + cell.marginTop
-	};
-}
-let DocDrawingTransformUpdateController = class DocDrawingTransformUpdateController extends _univerjs_core.Disposable {
-	constructor(_context, _docSkeletonManagerService, _commandService, _editorService, _drawingManagerService, _docRefreshDrawingsService, _univerInstanceService, _lifecycleService) {
-		super();
-		this._context = _context;
-		this._docSkeletonManagerService = _docSkeletonManagerService;
-		this._commandService = _commandService;
-		this._editorService = _editorService;
-		this._drawingManagerService = _drawingManagerService;
-		this._docRefreshDrawingsService = _docRefreshDrawingsService;
-		this._univerInstanceService = _univerInstanceService;
-		this._lifecycleService = _lifecycleService;
-		_defineProperty(this, "_liquid", new _univerjs_engine_render.Liquid());
-		this._initialize();
-		this._commandExecutedListener();
-	}
-	_initialize() {
-		this._initialRenderRefresh();
-		this._drawingInitializeListener();
-		this._initResize();
-	}
-	_initialRenderRefresh() {
-		this.disposeWithMe(this._docSkeletonManagerService.currentSkeleton$.subscribe((documentSkeleton) => {
-			if (documentSkeleton == null) return;
-			this._refreshDrawing(documentSkeleton);
-		}));
-		this.disposeWithMe(this._docRefreshDrawingsService.refreshDrawings$.subscribe((skeleton) => {
-			if (skeleton == null) return;
-			this._refreshDrawing(skeleton);
-		}));
-	}
-	_commandExecutedListener() {
-		const updateCommandList = [_univerjs_docs.RichTextEditingMutation.id, _univerjs_docs_ui.SetDocZoomRatioOperation.id];
-		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
-			if (updateCommandList.includes(command.id)) {
-				const { unitId: commandUnitId } = command.params;
-				const { unitId, mainComponent } = this._context;
-				if (commandUnitId !== unitId) return;
-				const skeleton = this._docSkeletonManagerService.getSkeleton();
-				if (skeleton == null) return;
-				if (this._editorService.isEditor(unitId) && unitId !== _univerjs_core.DOCS_ZEN_EDITOR_UNIT_ID_KEY) {
-					mainComponent === null || mainComponent === void 0 || mainComponent.makeDirty();
-					return;
-				}
-				this._refreshDrawing(skeleton);
-			}
-		}));
-	}
-	_initResize() {
-		this.disposeWithMe((0, _univerjs_core.fromEventSubject)(this._context.engine.onTransformChange$).pipe((0, rxjs.filter)((evt) => evt.type === _univerjs_engine_render.TRANSFORM_CHANGE_OBSERVABLE_TYPE.resize), (0, rxjs.debounceTime)(16)).subscribe(() => {
-			var _scene$getTransformer;
-			const skeleton = this._docSkeletonManagerService.getSkeleton();
-			const { scene } = this._context;
-			(_scene$getTransformer = scene.getTransformer()) === null || _scene$getTransformer === void 0 || _scene$getTransformer.refreshControls();
-			this._refreshDrawing(skeleton);
-		}));
-	}
-	_refreshDrawing(skeleton) {
+	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(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
 		const skeletonData = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getSkeletonData();
-		const { mainComponent, unitId } = this._context;
-		const documentComponent = mainComponent;
-		if (!skeletonData) return;
-		const { left: docsLeft, top: docsTop, pageLayoutType, pageMarginLeft, pageMarginTop } = documentComponent;
+		if (skeletonData == null) return;
 		const { pages, skeHeaders, skeFooters } = skeletonData;
-		const updateDrawingMap = {};
-		this._liquid.reset();
-		/**
-		* TODO: @DR-Univer We should not refresh all floating elements, but instead make a diff.
-		*/
-		for (let i = 0, len = pages.length; i < len; i++) {
-			const page = pages[i];
-			const { headerId, footerId, pageWidth } = page;
-			if (headerId) {
-				var _skeHeaders$get;
-				const headerPage = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(pageWidth);
-				if (headerPage) {
-					this._calculateDrawingPosition(unitId, headerPage, docsLeft, docsTop, updateDrawingMap, headerPage.marginTop, page.marginLeft);
-					this._calculateTableCellDrawingPositions(unitId, headerPage, docsLeft, docsTop, updateDrawingMap, headerPage.marginTop, page.marginLeft);
-				}
+		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;
 			}
-			if (footerId) {
-				var _skeFooters$get;
-				const footerPage = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(pageWidth);
-				if (footerPage) {
-					const footerTop = page.pageHeight - page.marginBottom + footerPage.marginTop;
-					this._calculateDrawingPosition(unitId, footerPage, docsLeft, docsTop, updateDrawingMap, footerTop, page.marginLeft);
-					this._calculateTableCellDrawingPositions(unitId, footerPage, docsLeft, docsTop, updateDrawingMap, footerTop, page.marginLeft);
-				}
+			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;
 			}
-			this._calculateDrawingPosition(unitId, page, docsLeft, docsTop, updateDrawingMap, page.marginTop, page.marginLeft);
-			this._calculateTableCellDrawingPositions(unitId, page, docsLeft, docsTop, updateDrawingMap, page.marginTop, page.marginLeft);
-			this._liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
 		}
-		const updateDrawings = Object.values(updateDrawingMap);
-		const nonMultiDrawings = updateDrawings.filter((drawing) => !drawing.isMultiTransform);
-		const multiDrawings = updateDrawings.filter((drawing) => drawing.isMultiTransform);
-		if (nonMultiDrawings.length > 0) this._drawingManagerService.refreshTransform(nonMultiDrawings);
-		this._handleMultiDrawingsTransform(multiDrawings);
-	}
-	_handleMultiDrawingsTransform(multiDrawings) {
-		const { scene, unitId } = this._context;
-		const transformer = scene.getTransformerByCreate();
-		multiDrawings.forEach((updateParam) => {
-			const param = this._drawingManagerService.getDrawingByParam(updateParam);
-			if (param == null) return;
-			param.transform = updateParam.transform;
-			param.transforms = updateParam.transforms;
-			param.isMultiTransform = updateParam.isMultiTransform;
+		if (drawing == null) return;
+		let delta = 0;
+		if (prevRelativeFrom === _univerjs_core.ObjectRelativeFromH.COLUMN) delta -= drawing.columnLeft;
+		else if (prevRelativeFrom === _univerjs_core.ObjectRelativeFromH.MARGIN) delta -= pageMarginLeft;
+		if (relativeFrom === _univerjs_core.ObjectRelativeFromH.COLUMN) delta += drawing.columnLeft;
+		else if (relativeFrom === _univerjs_core.ObjectRelativeFromH.MARGIN) delta += pageMarginLeft;
+		else if (relativeFrom === _univerjs_core.ObjectRelativeFromH.PAGE) {}
+		handlePositionChange("positionH", {
+			relativeFrom,
+			posOffset: (prevPosOffset !== null && prevPosOffset !== void 0 ? prevPosOffset : 0) - delta
 		});
-		const selectedObjectKeys = [...transformer.getSelectedObjectMap().keys()];
-		const allMultiDrawings = Object.values(this._drawingManagerService.getDrawingData(unitId, unitId)).filter((drawing) => drawing.isMultiTransform === _univerjs_core.BooleanNumber.TRUE);
-		this._drawingManagerService.removeNotification(allMultiDrawings);
-		if (multiDrawings.length > 0) this._drawingManagerService.addNotification(multiDrawings);
-		for (const key of selectedObjectKeys) {
-			const drawingShape = scene.getObject(key);
-			if (drawingShape) transformer.setSelectedControl(drawingShape);
-		}
 	}
-	_calculateDrawingPosition(unitId, page, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft) {
-		const { skeDrawings } = page;
-		this._liquid.translatePagePadding({
-			marginTop,
-			marginLeft
-		});
-		skeDrawings.forEach((drawing) => {
-			const { aLeft, aTop, height, width, angle, drawingId, drawingOrigin } = drawing;
-			const behindText = drawingOrigin.layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE && drawingOrigin.behindDoc === _univerjs_core.BooleanNumber.TRUE;
-			const { isMultiTransform = _univerjs_core.BooleanNumber.FALSE } = drawingOrigin;
-			const transform = {
-				left: aLeft + docsLeft + this._liquid.x,
-				top: aTop + docsTop + this._liquid.y,
-				width,
-				height,
-				angle
-			};
-			if (updateDrawingMap[drawingId] == null) updateDrawingMap[drawingId] = {
-				unitId,
-				subUnitId: unitId,
-				drawingId,
-				behindText,
-				transform,
-				transforms: [transform],
-				isMultiTransform
-			};
-			else if (isMultiTransform === _univerjs_core.BooleanNumber.TRUE) updateDrawingMap[drawingId].transforms.push(transform);
-		});
-		this._liquid.restorePagePadding({
-			marginTop,
-			marginLeft
+	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];
+		const documentDataModel = univerInstanceService.getUniverDocInstance(unitId);
+		const skeleton = (_renderManagerService3 = renderManagerService.getRenderById(unitId)) === null || _renderManagerService3 === void 0 ? void 0 : _renderManagerService3.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+		const docSelectionRenderService = (_renderManagerService4 = renderManagerService.getRenderById(unitId)) === null || _renderManagerService4 === void 0 ? void 0 : _renderManagerService4.with(_univerjs_docs_ui.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).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 === _univerjs_core.ObjectRelativeFromV.PARAGRAPH) delta -= paragraphStartLine.top;
+		else if (prevRelativeFrom === _univerjs_core.ObjectRelativeFromV.LINE) delta -= line.top;
+		else if (prevRelativeFrom === _univerjs_core.ObjectRelativeFromV.PAGE) delta += page.marginTop;
+		if (relativeFrom === _univerjs_core.ObjectRelativeFromV.PARAGRAPH) delta += paragraphStartLine.top;
+		else if (relativeFrom === _univerjs_core.ObjectRelativeFromV.LINE) delta += line.top;
+		else if (relativeFrom === _univerjs_core.ObjectRelativeFromV.PAGE) delta -= page.marginTop;
+		handlePositionChange("positionV", {
+			relativeFrom,
+			posOffset: (prevPosOffset !== null && prevPosOffset !== void 0 ? prevPosOffset : 0) - delta
 		});
 	}
-	_calculateTableCellDrawingPositions(unitId, page, docsLeft, docsTop, updateDrawingMap, baseMarginTop, baseMarginLeft) {
-		var _page$skeTables;
-		(_page$skeTables = page.skeTables) === null || _page$skeTables === void 0 || _page$skeTables.forEach((table) => {
-			table.rows.forEach((row) => {
-				row.cells.forEach((cell) => {
-					const cellOffset = getDocsTableCellDrawingOffset(unitId, table, row, cell);
-					const marginTop = baseMarginTop + cellOffset.top;
-					const marginLeft = baseMarginLeft + cellOffset.left;
-					this._calculateDrawingPosition(unitId, cell, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft);
-					this._calculateTableCellDrawingPositions(unitId, cell, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft);
-				});
-			});
-		});
+	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 === _univerjs_core.PositionedObjectLayoutType.INLINE);
+		setFollowTextMove(positionV.relativeFrom === _univerjs_core.ObjectRelativeFromV.PARAGRAPH || positionV.relativeFrom === _univerjs_core.ObjectRelativeFromV.LINE);
 	}
-	_drawingInitializeListener() {
-		const init = () => {
-			const skeleton = this._docSkeletonManagerService.getSkeleton();
-			if (skeleton == null) return;
-			this._refreshDrawing(skeleton);
-			this._drawingManagerService.initializeNotification(this._context.unitId);
-		};
-		if (this._lifecycleService.stage >= _univerjs_core.LifecycleStages.Rendered) if (this._docSkeletonManagerService.getSkeleton()) init();
-		else setTimeout(init, 500);
-		else this.disposeWithMe(this._lifecycleService.lifecycle$.pipe((0, rxjs.filter)((stage) => stage === _univerjs_core.LifecycleStages.Rendered)).subscribe(init));
+	function updateFocusDrawingState() {
+		const focusDrawings = drawingManagerService.getFocusDrawings();
+		if (focusDrawings.length === 0) return;
+		updateState(focusDrawings[0]);
+	}
+	function handleFollowTextMoveCheck(val) {
+		setFollowTextMove(val);
+		handleVerticalRelativeFromChange(val ? String(_univerjs_core.ObjectRelativeFromV.PARAGRAPH) : String(_univerjs_core.ObjectRelativeFromV.PAGE));
 	}
+	(0, react.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 === _univerjs_docs.RichTextEditingMutation.id) updateFocusDrawingState();
+		});
+		return () => {
+			subscription.unsubscribe();
+			mutationListener.dispose();
+		};
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _univerjs_design.clsx)("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": !showPanel }),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("docs-drawing-ui.image-position.title") })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("docs-drawing-ui.image-position.horizontal") })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("docs-drawing-ui.image-position.absolutePosition") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+					min: MIN_OFFSET,
+					max: MAX_OFFSET,
+					precision: 1,
+					disabled,
+					value: hPosition.posOffset,
+					onChange: (val) => {
+						handlePositionChange("positionH", {
+							relativeFrom: hPosition.relativeFrom,
+							posOffset: val
+						});
+					}
+				})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("docs-drawing-ui.image-position.toTheRightOf") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
+					value: String(hPosition.relativeFrom),
+					disabled,
+					options: HORIZONTAL_RELATIVE_FROM,
+					onChange: handleHorizontalRelativeFromChange
+				})] })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("docs-drawing-ui.image-position.vertical") })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("docs-drawing-ui.image-position.absolutePosition") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+					min: MIN_OFFSET,
+					max: MAX_OFFSET,
+					precision: 1,
+					disabled,
+					value: vPosition.posOffset,
+					onChange: (val) => {
+						handlePositionChange("positionV", {
+							relativeFrom: vPosition.relativeFrom,
+							posOffset: val
+						});
+					}
+				})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("docs-drawing-ui.image-position.bellow") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
+					disabled,
+					value: String(vPosition.relativeFrom),
+					options: VERTICAL_RELATIVE_FROM,
+					onChange: handleVerticalRelativeFromChange
+				})] })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("docs-drawing-ui.image-position.options") })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
+				disabled,
+				checked: followTextMove,
+				onChange: handleFollowTextMoveCheck,
+				children: localeService.t("docs-drawing-ui.image-position.moveObjectWithText")
+			}) })
+		]
+	});
 };
-DocDrawingTransformUpdateController = __decorate([
-	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_docs.DocSkeletonManagerService)),
-	__decorateParam(2, _univerjs_core.ICommandService),
-	__decorateParam(3, _univerjs_docs_ui.IEditorService),
-	__decorateParam(4, _univerjs_drawing.IDrawingManagerService),
-	__decorateParam(5, (0, _univerjs_core.Inject)(DocRefreshDrawingsService)),
-	__decorateParam(6, _univerjs_core.IUniverInstanceService),
-	__decorateParam(7, (0, _univerjs_core.Inject)(_univerjs_core.LifecycleService))
-], DocDrawingTransformUpdateController);
 
 //#endregion
-//#region src/controllers/doc-drawing-transformer-update.controller.ts
-const INLINE_DRAWING_ANCHOR_KEY_PREFIX = "__InlineDrawingAnchor__";
-function getDocsTableCellAnchorContext(unitId, cell) {
-	var _row$cells;
-	const row = cell.parent;
-	const table = row === null || row === void 0 ? void 0 : row.parent;
-	const hostPage = table === null || table === void 0 ? void 0 : table.parent;
-	if (!row || !table || !hostPage || !((_row$cells = row.cells) === null || _row$cells === void 0 ? void 0 : _row$cells.includes(cell))) return null;
-	return {
-		cell,
-		hostPage,
-		offset: getDocsTableCellDrawingOffset(unitId, table, row, cell),
-		row,
-		table
-	};
-}
-let DocDrawingTransformerController = class DocDrawingTransformerController extends _univerjs_core.Disposable {
-	constructor(_commandService, _univerInstanceService, _drawingManagerService, _renderManagerService) {
-		super();
-		this._commandService = _commandService;
-		this._univerInstanceService = _univerInstanceService;
-		this._drawingManagerService = _drawingManagerService;
-		this._renderManagerService = _renderManagerService;
-		_defineProperty(this, "_liquid", new _univerjs_engine_render.Liquid());
-		_defineProperty(this, "_listenerOnImageMap", /* @__PURE__ */ new Set());
-		_defineProperty(this, "_transformerCache", /* @__PURE__ */ new Map());
-		_defineProperty(this, "_anchorShape", void 0);
-		this._init();
-	}
-	_init() {
-		this._listenDrawingFocus();
-	}
-	_listenDrawingFocus() {
-		this.disposeWithMe(this._drawingManagerService.add$.subscribe((drawingParams) => {
-			if (drawingParams.length === 0) return;
-			for (const drawingParam of drawingParams) {
-				const { unitId } = drawingParam;
-				if (!this._listenerOnImageMap.has(unitId)) {
-					this._listenTransformerChange(unitId);
-					this._listenerOnImageMap.add(unitId);
-				}
-			}
-		}));
-	}
-	_listenTransformerChange(unitId) {
-		var _this$_getSceneAndTra;
-		const transformer = (_this$_getSceneAndTra = this._getSceneAndTransformerByDrawingSearch(unitId)) === null || _this$_getSceneAndTra === void 0 ? void 0 : _this$_getSceneAndTra.transformer;
-		if (transformer == null) return;
-		this.disposeWithMe((0, _univerjs_core.toDisposable)(transformer.changeStart$.subscribe((state) => {
-			this._transformerCache.clear();
-			const { objects } = state;
-			for (const object of objects.values()) {
-				var _documentDataModel$ge;
-				const { oKey, width, height, left, top, angle } = object;
-				const drawing = this._drawingManagerService.getDrawingOKey(oKey);
-				if (drawing == null) continue;
-				const documentDataModel = this._univerInstanceService.getUniverDocInstance(drawing.unitId);
-				const drawingData = documentDataModel === null || documentDataModel === void 0 || (_documentDataModel$ge = documentDataModel.getSnapshot().drawings) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge[drawing.drawingId];
-				if ((drawingData === null || drawingData === void 0 ? void 0 : drawingData.layoutType) === _univerjs_core.PositionedObjectLayoutType.INLINE) try {
-					object.setOpacity(.2);
-				} catch (e) {}
-				if (drawingData != null) this._transformerCache.set(drawing.drawingId, {
-					drawing: drawingData,
-					top,
-					left,
-					width,
-					height,
-					angle
-				});
-			}
-		})));
-		const throttleMultipleDrawingUpdate = (0, _univerjs_core.throttle)(this._updateMultipleDrawingDocTransform.bind(this), 50);
-		(0, _univerjs_core.throttle)(this._nonInlineDrawingTransform.bind(this), 50);
-		this.disposeWithMe((0, _univerjs_core.toDisposable)(transformer.changing$.subscribe((state) => {
-			const { objects, offsetX, offsetY } = state;
-			if (objects.size > 1) throttleMultipleDrawingUpdate(objects);
-			else if (objects.size === 1) {
-				const drawingCache = this._transformerCache.values().next().value;
-				const { width, height, top, left, angle } = objects.values().next().value;
-				if (drawingCache && width === drawingCache.width && height === drawingCache.height && top === drawingCache.top && left === drawingCache.left && angle === drawingCache.angle) return;
-				if (drawingCache && drawingCache.drawing.layoutType !== _univerjs_core.PositionedObjectLayoutType.INLINE) {}
-				if (drawingCache && drawingCache.drawing.layoutType === _univerjs_core.PositionedObjectLayoutType.INLINE && offsetX != null && offsetY != null) this._updateInlineDrawingAnchor(drawingCache.drawing, offsetX, offsetY);
-			}
-		})));
-		this.disposeWithMe((0, _univerjs_core.toDisposable)(transformer.changeEnd$.subscribe((state) => {
-			const { objects, offsetX, offsetY } = state;
-			for (const object of objects.values()) {
-				const drawing = this._drawingManagerService.getDrawingOKey(object.oKey);
-				if (drawing == null) continue;
-				const drawingCache = this._transformerCache.get(drawing === null || drawing === void 0 ? void 0 : drawing.drawingId);
-				if ((drawingCache === null || drawingCache === void 0 ? void 0 : drawingCache.drawing.layoutType) === _univerjs_core.PositionedObjectLayoutType.INLINE) try {
-					object.setOpacity(1);
-				} catch (e) {}
-			}
-			if (this._anchorShape) this._anchorShape.hide();
-			if (objects.size > 1) this._updateMultipleDrawingDocTransform(objects);
-			else if (objects.size === 1) {
-				const drawingCache = this._transformerCache.values().next().value;
-				const object = objects.values().next().value;
-				const { width, height, top, left, angle } = object;
-				if (drawingCache && width === drawingCache.width && height === drawingCache.height && top === drawingCache.top && left === drawingCache.left && angle === drawingCache.angle) return;
-				if (drawingCache && drawingCache.drawing.layoutType === _univerjs_core.PositionedObjectLayoutType.INLINE) {
-					if (width !== drawingCache.width || height !== drawingCache.height || angle !== drawingCache.angle) this._updateDrawingSize(drawingCache, object);
-					else if (offsetX != null && offsetY != null) this._moveInlineDrawing(drawingCache.drawing, offsetX, offsetY);
-				} else if (drawingCache) this._nonInlineDrawingTransform(drawingCache.drawing, object);
-			}
-			this._transformerCache.clear();
-		})));
-	}
-	_updateMultipleDrawingDocTransform(objects) {
-		if (objects.size < 1) return;
-		const drawings = [];
-		let unitId;
-		let subUnitId;
-		for (const object of objects.values()) {
-			const { oKey, left, top, angle } = object;
-			let { width, height } = object;
-			const drawing = this._drawingManagerService.getDrawingOKey(oKey);
-			if (drawing == null) continue;
-			if (unitId == null) unitId = drawing.unitId;
-			if (subUnitId == null) subUnitId = drawing.subUnitId;
-			const drawingCache = this._transformerCache.get(drawing.drawingId);
-			if (drawingCache == null) continue;
-			const { drawing: drawingData, top: oldTop, left: oldLeft, width: oldWidth, height: oldHeight, angle: oldAngle } = drawingCache;
-			const { width: maxWidth, height: maxHeight } = this._getPageContentSize(drawingData);
-			width = Math.min(width, maxWidth);
-			height = Math.min(height, maxHeight);
-			if (oldWidth !== width || oldHeight !== height) drawings.push({
-				drawingId: drawing.drawingId,
-				key: "size",
-				value: {
-					width,
-					height
-				}
-			});
-			if (oldAngle !== angle) drawings.push({
-				drawingId: drawing.drawingId,
-				key: "angle",
-				value: angle
-			});
-			if (oldTop !== top || oldLeft !== left) {
-				const verticalDelta = top - oldTop;
-				const horizontalDelta = left - oldLeft;
-				if (verticalDelta !== 0) drawings.push({
-					drawingId: drawing.drawingId,
-					key: "positionV",
-					value: {
-						relativeFrom: drawingData.docTransform.positionV.relativeFrom,
-						posOffset: drawingData.docTransform.positionV.posOffset + verticalDelta
-					}
-				});
-				if (horizontalDelta !== 0) drawings.push({
-					drawingId: drawing.drawingId,
-					key: "positionH",
-					value: {
-						relativeFrom: drawingData.docTransform.positionH.relativeFrom,
-						posOffset: drawingData.docTransform.positionH.posOffset + horizontalDelta
-					}
-				});
-			}
-		}
-		if (drawings.length > 0 && unitId && subUnitId) this._commandService.executeCommand(UpdateDrawingDocTransformCommand.id, {
+//#region src/views/doc-image-panel/DocDrawingTextWrap.tsx
+const MIN_MARGIN = 0;
+const MAX_MARGIN = 100;
+const DocDrawingTextWrap = (props) => {
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const drawingManagerService = (0, _univerjs_ui.useDependency)(_univerjs_drawing.IDrawingManagerService);
+	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService);
+	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
+	const { drawings } = props;
+	const drawingParam = drawings[0];
+	if (drawingParam == null) return null;
+	const { unitId } = drawingParam;
+	const documentDataModel = univerInstanceService.getUniverDocInstance(unitId);
+	const renderObject = renderManagerService.getRenderById(unitId);
+	if ((renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene) == null) return null;
+	const [disableWrapText, setDisableWrapText] = (0, react.useState)(true);
+	const [disableDistTB, setDisableDistTB] = (0, react.useState)(true);
+	const [disableDistLR, setDisableDistLR] = (0, react.useState)(true);
+	const [wrappingStyle, setWrappingStyle] = (0, react.useState)("inline");
+	const [wrapText, setWrapText] = (0, react.useState)("");
+	const [distToText, setDistToText] = (0, react.useState)({
+		distT: 0,
+		distL: 0,
+		distB: 0,
+		distR: 0
+	});
+	const [showPanel, setShowPanel] = (0, react.useState)(true);
+	function handleWrappingStyleChange(value) {
+		setWrappingStyle(value);
+		const focusDrawings = drawingManagerService.getFocusDrawings();
+		if (focusDrawings.length === 0) return;
+		const { unitId, subUnitId } = focusDrawings[0];
+		const drawings = focusDrawings.map(({ unitId, subUnitId, drawingId }) => ({
 			unitId,
 			subUnitId,
-			drawings
+			drawingId
+		}));
+		commandService.executeCommand(UpdateDocDrawingWrappingStyleCommand.id, {
+			unitId,
+			subUnitId,
+			drawings,
+			wrappingStyle: value
 		});
 	}
-	_updateDrawingAnchor(objects) {
-		if (this._transformerCache.size !== 1) return;
-		const drawingCache = this._transformerCache.values().next().value;
-		const object = objects.values().next().value;
-		this._getDrawingAnchor(drawingCache.drawing, object);
-	}
-	_updateInlineDrawingAnchor(drawing, offsetX, offsetY) {
-		var _this$_getInlineDrawi;
-		if (this._transformerCache.size !== 1) return;
-		const { contentBoxPointGroup } = (_this$_getInlineDrawi = this._getInlineDrawingAnchor(drawing, offsetX, offsetY)) !== null && _this$_getInlineDrawi !== void 0 ? _this$_getInlineDrawi : {};
-		if (contentBoxPointGroup == null) return;
-		this._createOrUpdateInlineAnchor(drawing.unitId, contentBoxPointGroup);
+	function handleWrapTextChange(value) {
+		setWrapText(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(UpdateDocDrawingWrapTextCommand.id, {
+			unitId: focusDrawings[0].unitId,
+			subUnitId: focusDrawings[0].unitId,
+			drawings,
+			wrapText: value
+		});
 	}
-	_getInlineDrawingAnchor(drawing, offsetX, offsetY) {
-		var _this$_renderManagerS, _getOneTextSelectionR;
-		const currentRender = this._renderManagerService.getRenderById(drawing.unitId);
-		const skeleton = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
-		if (currentRender == null) return;
-		const { mainComponent, scene } = currentRender;
-		const documentComponent = mainComponent;
-		const activeViewport = scene.getViewports()[0];
-		const { pageLayoutType = _univerjs_engine_render.PageLayoutType.VERTICAL, pageMarginLeft, pageMarginTop } = documentComponent.getOffsetConfig();
-		let glyphAnchor = null;
-		let isBack = false;
-		let segmentPageIndex = -1;
-		let segmentId = "";
-		const HALF = .5;
-		const coord = this._getTransformCoordForDocumentOffset(documentComponent, activeViewport, offsetX, offsetY);
-		if (coord == null) return;
-		const docSelectionRenderService = (_this$_renderManagerS = this._renderManagerService.getRenderById(drawing.unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(_univerjs_docs_ui.DocSelectionRenderService);
-		if (docSelectionRenderService == null) return;
-		const nodeInfo = skeleton === null || skeleton === void 0 ? void 0 : skeleton.findNodeByCoord(coord, pageLayoutType, pageMarginLeft, pageMarginTop, {
-			strict: false,
-			segmentId: docSelectionRenderService.getSegment(),
-			segmentPage: docSelectionRenderService.getSegmentPage()
+	function handleDistToTextChange(value, direction) {
+		if (value == null) return;
+		setDistToText({
+			...distToText,
+			[direction]: 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(UpdateDocDrawingDistanceCommand.id, {
+			unitId: focusDrawings[0].unitId,
+			subUnitId: focusDrawings[0].unitId,
+			drawings,
+			dist: { [direction]: value }
 		});
-		if (nodeInfo) {
-			const { node, ratioX, segmentPage, segmentId: nodeSegmentId } = nodeInfo;
-			isBack = ratioX < HALF;
-			glyphAnchor = node;
-			segmentPageIndex = segmentPage;
-			segmentId = nodeSegmentId;
-		}
-		if (glyphAnchor == null) return;
-		const nodePosition = skeleton === null || skeleton === void 0 ? void 0 : skeleton.findPositionByGlyph(glyphAnchor, segmentPageIndex);
-		const docObject = this._getDocObject();
-		if (nodePosition == null || skeleton == null || docObject == null) return;
-		const positionWithIsBack = {
-			...nodePosition,
-			isBack
-		};
-		const { cursorList, contentBoxPointGroup } = new _univerjs_docs_ui.NodePositionConvertToCursor(docObject.document.getOffsetConfig(), skeleton).getRangePointData(positionWithIsBack, positionWithIsBack);
-		const { startOffset } = (_getOneTextSelectionR = (0, _univerjs_docs_ui.getOneTextSelectionRange)(cursorList)) !== null && _getOneTextSelectionR !== void 0 ? _getOneTextSelectionR : {};
-		if (startOffset == null) return;
-		return {
-			offset: startOffset,
-			contentBoxPointGroup,
-			segmentId,
-			segmentPage: segmentPageIndex
-		};
 	}
-	_getDrawingAnchor(drawing, object) {
-		var _this$_renderManagerS2, _glyphAnchor$parent, _column$lines$find, _column$parent, _tableCellContext$hos, _getOneTextSelectionR2;
-		const currentRender = this._renderManagerService.getRenderById(drawing.unitId);
-		const skeleton = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
-		const skeletonData = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getSkeletonData();
-		if (skeletonData == null || currentRender == null) return;
-		const { pages, skeHeaders, skeFooters } = skeletonData;
-		const { mainComponent, scene } = currentRender;
-		const documentComponent = mainComponent;
-		const activeViewport = scene.getViewports()[0];
-		const { pageLayoutType = _univerjs_engine_render.PageLayoutType.VERTICAL, pageMarginLeft, pageMarginTop, docsLeft, docsTop } = documentComponent.getOffsetConfig();
-		const { left, top, angle } = object;
-		let { width, height } = object;
-		const { positionV, positionH } = drawing.docTransform;
-		const { width: maxWidth, height: maxHeight } = this._getPageContentSize(drawing);
-		width = Math.min(width, maxWidth);
-		height = Math.min(height, maxHeight);
-		let glyphAnchor = null;
-		let segmentId = "";
-		let segmentPage = -1;
-		const isBack = false;
-		const docTransform = {
-			...drawing.docTransform,
-			size: {
-				width,
-				height
-			},
-			angle
-		};
-		const { x, y } = scene.getViewportScrollXY(activeViewport);
-		const coord = this._getTransformCoordForDocumentOffset(documentComponent, activeViewport, left - x, top - y);
-		if (coord == null) return;
-		const docSelectionRenderService = (_this$_renderManagerS2 = this._renderManagerService.getRenderById(drawing.unitId)) === null || _this$_renderManagerS2 === void 0 ? void 0 : _this$_renderManagerS2.with(_univerjs_docs_ui.DocSelectionRenderService);
-		if (docSelectionRenderService == null) return;
-		const nodeInfo = skeleton === null || skeleton === void 0 ? void 0 : skeleton.findNodeByCoord(coord, pageLayoutType, pageMarginLeft, pageMarginTop, {
-			strict: false,
-			segmentId: docSelectionRenderService.getSegment(),
-			segmentPage: docSelectionRenderService.getSegmentPage()
+	function updateFocusDrawingState() {
+		const focusDrawings = drawingManagerService.getFocusDrawings();
+		if (focusDrawings.length === 0) return;
+		updateState(focusDrawings[0]);
+	}
+	function updateState(drawingParam) {
+		var _documentDataModel$ge;
+		const drawing = documentDataModel === null || documentDataModel === void 0 || (_documentDataModel$ge = documentDataModel.getSnapshot()) === null || _documentDataModel$ge === void 0 || (_documentDataModel$ge = _documentDataModel$ge.drawings) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge[drawingParam.drawingId];
+		if (drawing == null) return;
+		const { distT = 0, distL = 0, distB = 0, distR = 0, layoutType = _univerjs_core.PositionedObjectLayoutType.INLINE, behindDoc = _univerjs_core.BooleanNumber.FALSE, wrapText = _univerjs_core.WrapTextType.BOTH_SIDES } = drawing;
+		setDistToText({
+			distT,
+			distL,
+			distB,
+			distR
 		});
-		if (nodeInfo) {
-			const { node, segmentPage: segmentPageIndex, segmentId: nodeSegmentId } = nodeInfo;
-			glyphAnchor = node;
-			segmentPage = segmentPageIndex;
-			segmentId = nodeSegmentId;
-		}
-		if (glyphAnchor == null) return;
-		const line = (_glyphAnchor$parent = glyphAnchor.parent) === null || _glyphAnchor$parent === void 0 ? void 0 : _glyphAnchor$parent.parent;
-		const column = line === null || line === void 0 ? void 0 : line.parent;
-		const paragraphStartLine = (_column$lines$find = column === null || column === void 0 ? void 0 : column.lines.find((l) => l.paragraphIndex === (line === null || line === void 0 ? void 0 : line.paragraphIndex) && l.paragraphStart)) !== null && _column$lines$find !== void 0 ? _column$lines$find : column === null || column === void 0 ? void 0 : column.lines[0];
-		const page = column === null || column === void 0 || (_column$parent = column.parent) === null || _column$parent === void 0 ? void 0 : _column$parent.parent;
-		if (line == null || column == null || paragraphStartLine == null || page == null) return;
-		this._liquid.reset();
-		const tableCellContext = page.type === _univerjs_engine_render.DocumentSkeletonPageType.CELL ? getDocsTableCellAnchorContext(drawing.unitId, page) : null;
-		const anchorPage = (_tableCellContext$hos = tableCellContext === null || tableCellContext === void 0 ? void 0 : tableCellContext.hostPage) !== null && _tableCellContext$hos !== void 0 ? _tableCellContext$hos : page;
-		const pageType = anchorPage.type;
-		for (const p of pages) {
-			const { headerId, footerId, pageHeight, pageWidth, marginLeft, marginBottom } = p;
-			const pIndex = pages.indexOf(p);
-			if (segmentPage > -1 && pIndex === segmentPage) {
-				switch (pageType) {
-					case _univerjs_engine_render.DocumentSkeletonPageType.HEADER: {
-						var _skeHeaders$get;
-						const headerSke = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(pageWidth);
-						if (headerSke) this._liquid.translatePagePadding({
-							marginTop: headerSke.marginTop,
-							marginLeft
-						});
-						else throw new Error("header skeleton not found");
-						break;
-					}
-					case _univerjs_engine_render.DocumentSkeletonPageType.FOOTER: {
-						var _skeFooters$get;
-						const footerSke = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(pageWidth);
-						if (footerSke) this._liquid.translatePagePadding({
-							marginTop: pageHeight - marginBottom + footerSke.marginTop,
-							marginLeft
-						});
-						else throw new Error("footer skeleton not found");
-						break;
-					}
-					default:
-						this._liquid.translatePagePadding(p);
-						break;
-				}
-				break;
-			}
-			this._liquid.translatePagePadding(p);
-			if (p === anchorPage) break;
-			this._liquid.restorePagePadding(p);
-			this._liquid.translatePage(p, pageLayoutType, pageMarginLeft, pageMarginTop);
-		}
-		if (tableCellContext) this._liquid.translate(tableCellContext.offset.left, tableCellContext.offset.top);
-		if (positionV.relativeFrom === _univerjs_core.ObjectRelativeFromV.LINE) glyphAnchor = line.divides[0].glyphGroup[0];
-		else {
-			var _paragraphStartLine$d, _paragraphStartLine$d2;
-			glyphAnchor = (_paragraphStartLine$d = (_paragraphStartLine$d2 = paragraphStartLine.divides) === null || _paragraphStartLine$d2 === void 0 || (_paragraphStartLine$d2 = _paragraphStartLine$d2[0]) === null || _paragraphStartLine$d2 === void 0 || (_paragraphStartLine$d2 = _paragraphStartLine$d2.glyphGroup) === null || _paragraphStartLine$d2 === void 0 ? void 0 : _paragraphStartLine$d2[0]) !== null && _paragraphStartLine$d !== void 0 ? _paragraphStartLine$d : glyphAnchor;
-		}
-		docTransform.positionH = {
-			relativeFrom: positionH.relativeFrom,
-			posOffset: left - this._liquid.x - docsLeft
-		};
-		switch (positionH.relativeFrom) {
-			case _univerjs_core.ObjectRelativeFromH.MARGIN:
-				docTransform.positionH.posOffset = left - this._liquid.x - docsLeft - page.marginLeft;
-				break;
-			case _univerjs_core.ObjectRelativeFromH.COLUMN:
-				docTransform.positionH.posOffset = left - this._liquid.x - docsLeft - column.left;
-				break;
-		}
-		docTransform.positionV = {
-			relativeFrom: positionV.relativeFrom,
-			posOffset: top - this._liquid.y - docsTop
-		};
-		switch (positionV.relativeFrom) {
-			case _univerjs_core.ObjectRelativeFromV.PAGE:
-				docTransform.positionV.posOffset = top - this._liquid.y - docsTop - page.marginTop;
+		setWrapText(wrapText);
+		setDisableWrapText(layoutType !== _univerjs_core.PositionedObjectLayoutType.WRAP_SQUARE);
+		if (layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE || layoutType === _univerjs_core.PositionedObjectLayoutType.INLINE) setDisableDistTB(true);
+		else setDisableDistTB(false);
+		if (layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE || layoutType === _univerjs_core.PositionedObjectLayoutType.INLINE || layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM) setDisableDistLR(true);
+		else setDisableDistLR(false);
+		if (layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE) if (behindDoc === _univerjs_core.BooleanNumber.TRUE) setWrappingStyle("behindText");
+		else setWrappingStyle("inFrontOfText");
+		else switch (layoutType) {
+			case _univerjs_core.PositionedObjectLayoutType.INLINE:
+				setWrappingStyle("inline");
 				break;
-			case _univerjs_core.ObjectRelativeFromV.LINE:
-				docTransform.positionV.posOffset = top - this._liquid.y - docsTop - line.top;
+			case _univerjs_core.PositionedObjectLayoutType.WRAP_SQUARE:
+				setWrappingStyle("wrapSquare");
 				break;
-			case _univerjs_core.ObjectRelativeFromV.PARAGRAPH:
-				docTransform.positionV.posOffset = top - this._liquid.y - docsTop - paragraphStartLine.top;
+			case _univerjs_core.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM:
+				setWrappingStyle("wrapTopAndBottom");
 				break;
+			default: throw new Error(`Unsupported layout type: ${layoutType}`);
 		}
-		if (glyphAnchor == null) return;
-		const nodePosition = skeleton === null || skeleton === void 0 ? void 0 : skeleton.findPositionByGlyph(glyphAnchor, segmentPage);
-		const docObject = this._getDocObject();
-		if (nodePosition == null || skeleton == null || docObject == null) return;
-		const positionWithIsBack = {
-			...nodePosition,
-			isBack
-		};
-		const { cursorList } = new _univerjs_docs_ui.NodePositionConvertToCursor(docObject.document.getOffsetConfig(), skeleton).getRangePointData(positionWithIsBack, positionWithIsBack);
-		const { startOffset } = (_getOneTextSelectionR2 = (0, _univerjs_docs_ui.getOneTextSelectionRange)(cursorList)) !== null && _getOneTextSelectionR2 !== void 0 ? _getOneTextSelectionR2 : {};
-		if (startOffset == null) return;
-		return {
-			offset: startOffset,
-			docTransform,
-			segmentId,
-			segmentPage
-		};
 	}
-	_updateDrawingSize(drawingCache, object) {
-		const drawings = [];
-		const { drawing, width: oldWidth, height: oldHeight, angle: oldAngle } = drawingCache;
-		const { unitId, subUnitId } = drawing;
-		let { width, height, angle } = object;
-		const { width: maxWidth, height: maxHeight } = this._getPageContentSize(drawing);
-		width = Math.min(maxWidth, width);
-		height = Math.min(maxHeight, height);
-		if (width !== oldWidth || height !== oldHeight) drawings.push({
-			drawingId: drawing.drawingId,
-			key: "size",
-			value: {
-				width,
-				height
+	(0, react.useEffect)(() => {
+		updateFocusDrawingState();
+		const subscription = drawingManagerService.focus$.subscribe((drawingParams) => {
+			if (drawingParams.length === 0) {
+				setShowPanel(false);
+				return;
 			}
+			setShowPanel(true);
+			updateState(drawingParams[0]);
 		});
-		if (angle !== oldAngle) drawings.push({
-			drawingId: drawing.drawingId,
-			key: "angle",
-			value: angle
-		});
-		if (drawings.length > 0 && unitId && subUnitId) this._commandService.executeCommand(UpdateDrawingDocTransformCommand.id, {
-			unitId,
-			subUnitId,
-			drawings
-		});
-	}
-	_moveInlineDrawing(drawing, offsetX, offsetY) {
-		const anchor = this._getInlineDrawingAnchor(drawing, offsetX, offsetY);
-		const { offset, segmentId, segmentPage } = anchor !== null && anchor !== void 0 ? anchor : {};
-		return this._commandService.executeCommand(IMoveInlineDrawingCommand.id, {
-			unitId: drawing.unitId,
-			subUnitId: drawing.unitId,
-			drawing,
-			offset,
-			segmentId,
-			segmentPage,
-			needRefreshDrawings: offset == null
+		const mutationListener = commandService.onCommandExecuted(async (command) => {
+			if (command.id === _univerjs_docs.RichTextEditingMutation.id) updateFocusDrawingState();
 		});
-	}
-	_limitDrawingInPage(drawing, object) {
-		const currentRender = this._renderManagerService.getRenderById(drawing.unitId);
-		const { left, top, width, height, angle } = object;
-		const skeleton = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
-		const skeletonData = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getSkeletonData();
-		const { pages } = skeletonData !== null && skeletonData !== void 0 ? skeletonData : {};
-		if (skeletonData == null || currentRender == null || pages == null) return {
-			left,
-			top,
-			width,
-			height,
-			angle
-		};
-		const { mainComponent } = currentRender;
-		const { top: docsTop, pageLayoutType, pageMarginLeft, pageMarginTop } = mainComponent;
-		let newTop = top;
-		this._liquid.reset();
-		for (const page of pages) {
-			const { marginBottom, pageHeight } = page;
-			const nextPage = pages[pages.indexOf(page) + 1];
-			if (nextPage == null) continue;
-			if (_univerjs_core.Tools.hasIntersectionBetweenTwoRanges(top, top + height, this._liquid.y + docsTop + pageHeight - marginBottom, this._liquid.y + docsTop + pageHeight + pageMarginTop + nextPage.marginTop)) if (top + height / 2 < this._liquid.y + docsTop + pageHeight + pageMarginTop / 2) newTop = Math.min(top, this._liquid.y + docsTop + pageHeight - marginBottom - height);
-			else newTop = Math.max(top, this._liquid.y + docsTop + pageHeight + pageMarginTop + nextPage.marginTop);
-			this._liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
-		}
-		return {
-			left,
-			top: newTop,
-			width,
-			height,
-			angle
+		return () => {
+			subscription.unsubscribe();
+			mutationListener.dispose();
 		};
-	}
-	_nonInlineDrawingTransform(drawing, object, isMoving = false) {
-		const objectPosition = drawing.isMultiTransform === _univerjs_core.BooleanNumber.TRUE ? object : this._limitDrawingInPage(drawing, object);
-		if (isMoving && objectPosition.top !== object.top) return;
-		const anchor = this._getDrawingAnchor(drawing, objectPosition);
-		const { offset, docTransform, segmentId, segmentPage } = anchor !== null && anchor !== void 0 ? anchor : {};
-		if (offset == null || docTransform == null) return this._updateMultipleDrawingDocTransform(new Map([[drawing.drawingId, object]]));
-		return this._commandService.executeCommand(ITransformNonInlineDrawingCommand.id, {
-			unitId: drawing.unitId,
-			subUnitId: drawing.unitId,
-			drawing,
-			offset,
-			docTransform,
-			segmentId,
-			segmentPage
-		});
-	}
-	_getSceneAndTransformerByDrawingSearch(unitId) {
-		if (unitId == null) return;
-		const renderObject = this._renderManagerService.getRenderById(unitId);
-		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-		if (scene == null) return;
-		return {
-			scene,
-			transformer: scene.getTransformerByCreate()
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _univerjs_design.clsx)("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": !showPanel }),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("docs-drawing-ui.image-text-wrap.title") })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("docs-drawing-ui.image-text-wrap.wrappingStyle") })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.RadioGroup, {
+				value: wrappingStyle,
+				onChange: handleWrappingStyleChange,
+				direction: "vertical",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
+						value: "inline",
+						children: localeService.t("docs-drawing-ui.image-text-wrap.inline")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
+						value: "wrapSquare",
+						children: localeService.t("docs-drawing-ui.image-text-wrap.square")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
+						value: "wrapTopAndBottom",
+						children: localeService.t("docs-drawing-ui.image-text-wrap.topAndBottom")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
+						value: "behindText",
+						children: localeService.t("docs-drawing-ui.image-text-wrap.behindText")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
+						value: "inFrontOfText",
+						children: localeService.t("docs-drawing-ui.image-text-wrap.inFrontText")
+					})
+				]
+			}) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("docs-drawing-ui.image-text-wrap.wrapText") })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.RadioGroup, {
+				disabled: disableWrapText,
+				value: wrapText,
+				onChange: handleWrapTextChange,
+				direction: "horizontal",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
+						value: _univerjs_core.WrapTextType.BOTH_SIDES,
+						children: localeService.t("docs-drawing-ui.image-text-wrap.bothSide")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
+						value: _univerjs_core.WrapTextType.LEFT,
+						children: localeService.t("docs-drawing-ui.image-text-wrap.leftOnly")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
+						value: _univerjs_core.WrapTextType.RIGHT,
+						children: localeService.t("docs-drawing-ui.image-text-wrap.rightOnly")
+					})
+				]
+			}) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("docs-drawing-ui.image-text-wrap.distanceFromText") })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("docs-drawing-ui.image-text-wrap.top") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+					min: MIN_MARGIN,
+					max: MAX_MARGIN,
+					disabled: disableDistTB,
+					precision: 1,
+					value: distToText.distT,
+					onChange: (val) => {
+						handleDistToTextChange(val, "distT");
+					}
+				})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("docs-drawing-ui.image-text-wrap.left") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+					min: MIN_MARGIN,
+					max: MAX_MARGIN,
+					disabled: disableDistLR,
+					precision: 1,
+					value: distToText.distL,
+					onChange: (val) => {
+						handleDistToTextChange(val, "distL");
+					}
+				})] })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("docs-drawing-ui.image-text-wrap.bottom") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+					min: MIN_MARGIN,
+					max: MAX_MARGIN,
+					disabled: disableDistTB,
+					precision: 1,
+					value: distToText.distB,
+					onChange: (val) => {
+						handleDistToTextChange(val, "distB");
+					}
+				})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("docs-drawing-ui.image-text-wrap.right") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+					min: MIN_MARGIN,
+					max: MAX_MARGIN,
+					disabled: disableDistLR,
+					precision: 1,
+					value: distToText.distR,
+					onChange: (val) => {
+						handleDistToTextChange(val, "distR");
+					}
+				})] })]
+			})
+		]
+	});
+};
+
+//#endregion
+//#region src/views/doc-image-panel/DocDrawingPanel.tsx
+const DocDrawingPanel = () => {
+	const drawingManagerService = (0, _univerjs_ui.useDependency)(_univerjs_drawing.IDrawingManagerService);
+	const [drawings, setDrawings] = (0, react.useState)(drawingManagerService.getFocusDrawings());
+	(0, react.useEffect)(() => {
+		const focusDispose = drawingManagerService.focus$.subscribe((drawings) => {
+			setDrawings(drawings);
+		});
+		return () => {
+			focusDispose.unsubscribe();
 		};
+	}, []);
+	return !!(drawings === null || drawings === void 0 ? void 0 : drawings.length) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-text-sm",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_drawing_ui.DrawingCommonPanel, {
+				drawings,
+				hasAlign: false,
+				hasCropper: true,
+				hasGroup: false,
+				hasTransform: false
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DocDrawingTextWrap, { drawings }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DocDrawingPosition, { drawings })
+		]
+	});
+};
+
+//#endregion
+//#region src/controllers/components.controller.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+let ComponentsController = class ComponentsController extends _univerjs_core.Disposable {
+	constructor(_componentManager) {
+		super();
+		this._componentManager = _componentManager;
+		this._registerComponents();
 	}
-	_getTransformCoordForDocumentOffset(document, viewport, evtOffsetX, evtOffsetY) {
-		const { documentTransform } = document.getOffsetConfig();
-		const originCoord = viewport.transformVector2SceneCoord(_univerjs_engine_render.Vector2.FromArray([evtOffsetX, evtOffsetY]));
-		if (!originCoord) return;
-		return documentTransform.clone().invert().applyPoint(originCoord);
+	_registerComponents() {
+		this.disposeWithMe(this._componentManager.register(COMPONENT_DOC_DRAWING_PANEL, DocDrawingPanel));
 	}
-	_createOrUpdateInlineAnchor(unitId, pointsGroup) {
-		const currentRender = this._renderManagerService.getRenderById(unitId);
-		if (currentRender == null) return;
-		const { mainComponent, scene } = currentRender;
-		const { docsLeft, docsTop } = mainComponent.getOffsetConfig();
-		const { left: boundingLeft, top: boundingTop, height } = (0, _univerjs_docs_ui.getAnchorBounding)(pointsGroup);
-		const left = boundingLeft + docsLeft;
-		const top = boundingTop + docsTop;
-		if (this._anchorShape) {
-			this._anchorShape.transformByState({
-				left,
-				top,
-				height
+};
+ComponentsController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager))], ComponentsController);
+
+//#endregion
+//#region src/controllers/doc-drawing-notification.controller.ts
+function getAddOrRemoveDrawings(actions) {
+	if (_univerjs_core.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");
+	if (drawingsOp == null || !Array.isArray(drawingsOp) || drawingsOp.length < 3) return null;
+	if (typeof drawingsOp[1] === "string" && typeof drawingsOp[2] !== "object") return null;
+	if (Array.isArray(drawingsOp[1]) && typeof drawingsOp[1][1] !== "object") return null;
+	const drawings = [];
+	if (Array.isArray(drawingsOp === null || drawingsOp === void 0 ? void 0 : drawingsOp[1])) {
+		for (const op of drawingsOp) if (Array.isArray(op)) {
+			var _ref, _ref2;
+			drawings.push({
+				type: (op === null || op === void 0 || (_ref = op[1]) === null || _ref === void 0 ? void 0 : _ref.i) ? "add" : "remove",
+				drawingId: op === null || op === void 0 ? void 0 : op[0],
+				drawing: op === null || op === void 0 || (_ref2 = op[1]) === null || _ref2 === void 0 ? void 0 : _ref2.i
 			});
-			this._anchorShape.show();
-			return;
 		}
-		const anchor = new _univerjs_engine_render.Rect(INLINE_DRAWING_ANCHOR_KEY_PREFIX + (0, _univerjs_core.generateRandomId)(6), {
-			left,
-			top,
-			height,
-			strokeWidth: 2,
-			stroke: (0, _univerjs_engine_render.getColor)(_univerjs_core.COLORS.darkgray, 1),
-			evented: false
+	} else {
+		var _drawingsOp$, _drawingsOp$2;
+		drawings.push({
+			type: ((_drawingsOp$ = drawingsOp[2]) === null || _drawingsOp$ === void 0 ? void 0 : _drawingsOp$.i) ? "add" : "remove",
+			drawingId: drawingsOp[1],
+			drawing: (_drawingsOp$2 = drawingsOp[2]) === null || _drawingsOp$2 === void 0 ? void 0 : _drawingsOp$2.i
 		});
-		this._anchorShape = anchor;
-		scene.addObject(anchor, _univerjs_docs_ui.TEXT_RANGE_LAYER_INDEX);
-	}
-	_getDocObject() {
-		return (0, _univerjs_docs_ui.getDocObject)(this._univerInstanceService, this._renderManagerService);
 	}
-	_getPageContentSize(drawing) {
-		const currentRender = this._renderManagerService.getRenderById(drawing.unitId);
-		const skeleton = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
-		const MAX_WIDTH = 500;
-		const MAX_HEIGHT = 500;
-		const skeletonData = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getSkeletonData();
-		if (skeletonData == null || currentRender == null) return {
-			width: MAX_WIDTH,
-			height: MAX_HEIGHT
-		};
-		const { pages } = skeletonData;
-		let page = null;
-		for (const p of pages) {
-			const { skeDrawings } = p;
-			if (skeDrawings.has(drawing.drawingId)) {
-				page = p;
-				break;
-			}
+	return drawings;
+}
+function getReOrderedDrawings(actions) {
+	if (!Array.isArray(actions) || actions.length < 3 || actions[0] !== "drawingsOrder") return [];
+	const drawingIndexes = [];
+	for (let i = 1; i < actions.length; i++) {
+		const action = actions[i];
+		if (Array.isArray(action) && typeof action[0] === "number" && typeof action[1] === "object") drawingIndexes.push(action[0]);
+		else {
+			drawingIndexes.length = 0;
+			break;
 		}
-		if (page) {
-			const { pageWidth, pageHeight, marginLeft, marginBottom, marginRight, marginTop } = page;
-			return {
-				width: Math.max(MAX_WIDTH, pageWidth - marginLeft - marginRight),
-				height: Math.max(MAX_HEIGHT, pageHeight - marginTop - marginBottom)
+	}
+	return drawingIndexes;
+}
+let DocDrawingAddRemoveController = class DocDrawingAddRemoveController extends _univerjs_core.Disposable {
+	constructor(_univerInstanceService, _commandService, _drawingManagerService, _docDrawingService, _renderManagerService) {
+		super();
+		this._univerInstanceService = _univerInstanceService;
+		this._commandService = _commandService;
+		this._drawingManagerService = _drawingManagerService;
+		this._docDrawingService = _docDrawingService;
+		this._renderManagerService = _renderManagerService;
+		this._initialize();
+	}
+	_initialize() {
+		this._commandExecutedListener();
+	}
+	_commandExecutedListener() {
+		this.disposeWithMe(this._commandService.beforeCommandExecuted((command) => {
+			if (command.id !== _univerjs_docs.RichTextEditingMutation.id) return;
+			const { unitId, actions, isSync, syncer } = command.params;
+			const addOrRemoveDrawings = getAddOrRemoveDrawings(actions);
+			if (addOrRemoveDrawings != null) for (const { type, drawingId, drawing } of addOrRemoveDrawings) {
+				if (isSync && (drawing === null || drawing === void 0 ? void 0 : drawing.unitId) === syncer) continue;
+				if (type === "add") this._addDrawings(unitId, [drawing]);
+				else this._removeDrawings(unitId, [drawingId]);
+			}
+		}));
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (command.id !== _univerjs_docs.RichTextEditingMutation.id) return;
+			const { unitId, actions } = command.params;
+			if (getReOrderedDrawings(actions).length > 0) this._updateDrawingsOrder(unitId);
+		}));
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			var _this$_univerInstance;
+			if (command.id !== _univerjs_core.UndoCommand.id && command.id !== _univerjs_core.RedoCommand.id) return;
+			const unitId = (_this$_univerInstance = this._univerInstanceService.getCurrentUniverDocInstance()) === null || _this$_univerInstance === void 0 ? void 0 : _this$_univerInstance.getUnitId();
+			const focusedDrawings = this._drawingManagerService.getFocusDrawings();
+			if (unitId == null || focusedDrawings.length === 0) return;
+			const renderObject = this._renderManagerService.getRenderById(unitId);
+			const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+			if (scene == null) return false;
+			scene.getTransformerByCreate().refreshControls();
+		}));
+	}
+	_addDrawings(unitId, drawings) {
+		const drawingManagerService = this._drawingManagerService;
+		const docDrawingService = this._docDrawingService;
+		const { subUnitId, redo: op, objects } = this._docDrawingService.getBatchAddOp(drawings);
+		drawingManagerService.applyJson1(unitId, subUnitId, op);
+		docDrawingService.applyJson1(unitId, subUnitId, op);
+		drawingManagerService.addNotification(objects);
+		docDrawingService.addNotification(objects);
+	}
+	_removeDrawings(unitId, drawingIds) {
+		const drawingManagerService = this._drawingManagerService;
+		const docDrawingService = this._docDrawingService;
+		const { subUnitId, redo: op, objects } = this._docDrawingService.getBatchRemoveOp(drawingIds.map((drawingId) => {
+			return {
+				unitId,
+				subUnitId: unitId,
+				drawingId
 			};
-		} else return {
-			width: MAX_WIDTH,
-			height: MAX_HEIGHT
+		}));
+		drawingManagerService.applyJson1(unitId, subUnitId, op);
+		docDrawingService.applyJson1(unitId, subUnitId, op);
+		drawingManagerService.removeNotification(objects);
+		docDrawingService.removeNotification(objects);
+	}
+	_updateDrawingsOrder(unitId) {
+		const documentDataModel = this._univerInstanceService.getUniverDocInstance(unitId);
+		if (documentDataModel == null) return;
+		const { drawings, drawingsOrder } = documentDataModel.getSnapshot();
+		if (drawingsOrder == null) return;
+		const renderOrder = (0, _univerjs_docs_drawing.getDocDrawingRenderOrder)(drawingsOrder, drawings);
+		const drawingManagerService = this._drawingManagerService;
+		const docDrawingService = this._docDrawingService;
+		drawingManagerService.setDrawingOrder(unitId, unitId, renderOrder);
+		docDrawingService.setDrawingOrder(unitId, unitId, drawingsOrder);
+		const objects = {
+			unitId,
+			subUnitId: unitId,
+			drawingIds: renderOrder
 		};
+		drawingManagerService.orderNotification(objects);
+		docDrawingService.orderNotification({
+			unitId,
+			subUnitId: unitId,
+			drawingIds: drawingsOrder
+		});
 	}
 };
-DocDrawingTransformerController = __decorate([
-	__decorateParam(0, _univerjs_core.ICommandService),
-	__decorateParam(1, _univerjs_core.IUniverInstanceService),
+DocDrawingAddRemoveController = __decorate([
+	__decorateParam(0, _univerjs_core.IUniverInstanceService),
+	__decorateParam(1, _univerjs_core.ICommandService),
 	__decorateParam(2, _univerjs_drawing.IDrawingManagerService),
-	__decorateParam(3, _univerjs_engine_render.IRenderManagerService)
-], DocDrawingTransformerController);
+	__decorateParam(3, _univerjs_docs_drawing.IDocDrawingService),
+	__decorateParam(4, _univerjs_engine_render.IRenderManagerService)
+], DocDrawingAddRemoveController);
 
 //#endregion
-//#region src/menu/schema.ts
-const menuSchema = {
-	[_univerjs_ui.RibbonInsertGroup.MEDIA]: { [DOCS_IMAGE_MENU_ID]: {
-		order: 0,
-		menuItemFactory: ImageMenuFactory,
-		[IMAGE_MENU_UPLOAD_FLOAT_ID]: {
-			order: 0,
-			menuItemFactory: UploadFloatImageMenuFactory
-		}
-	} },
-	[_univerjs_ui.ContextMenuPosition.PARAGRAPH]: {
-		[_univerjs_ui.ContextMenuGroup.LAYOUT]: { [_univerjs_docs_ui.INSERT_BELLOW_MENU_ID]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
-			order: 5,
-			menuItemFactory: UploadFloatImageMenuFactory
-		} } },
-		[_univerjs_docs_ui.EMPTY_PARAGRAPH_MENU_ID]: { [_univerjs_ui.ContextMenuGroup.LAYOUT]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
-			order: 5,
-			menuItemFactory: UploadFloatImageMenuFactory
-		} } },
-		[_univerjs_docs_ui.DOC_CONTENT_INSERT_MENU_ID]: { [_univerjs_ui.ContextMenuGroup.LAYOUT]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
-			order: 5,
-			menuItemFactory: UploadFloatImageMenuFactory
-		} } }
+//#region src/views/DocPrintingFloatDom.tsx
+const DocPrintingFloatDom = (props) => {
+	const { floatDomInfos, scene, offset, bound } = props;
+	const width = bound.right - bound.left;
+	const height = bound.bottom - bound.top;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "univer-absolute univer-left-0 univer-top-0",
+		children: (0, react.useMemo)(() => floatDomInfos.map((info) => {
+			const { width = 0, height = 0, left = 0, top = 0 } = info.transform;
+			const domPos = calcDocFloatDomPositionByRect({
+				left,
+				right: left + width,
+				top,
+				bottom: top + height
+			}, scene);
+			const floatDom = {
+				position$: new rxjs.BehaviorSubject(domPos),
+				position: domPos,
+				id: info.drawingId,
+				componentKey: info.componentKey,
+				onPointerMove: () => {},
+				onPointerDown: () => {},
+				onPointerUp: () => {},
+				onWheel: () => {},
+				unitId: info.unitId,
+				data: info.data
+			};
+			return [info.drawingId, floatDom];
+		}).filter(([_, floatDom]) => !(floatDom.position.endX < 0 || floatDom.position.endY < 0 || floatDom.position.startX > width || floatDom.position.startY > height)), [
+			floatDomInfos,
+			scene,
+			offset,
+			width,
+			height
+		]).map(([id, floatDom]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_ui.PrintFloatDomSingle, {
+			layer: floatDom,
+			id,
+			position: floatDom.position
+		}, id))
+	});
+};
+function mountDocPrintingFloatDom(props, root, injector) {
+	(0, _univerjs_design.render)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)((0, _univerjs_ui.connectInjector)(DocPrintingFloatDom, injector), { ...props }), root);
+	return () => (0, _univerjs_design.unmount)(root);
+}
+
+//#endregion
+//#region src/controllers/doc-drawing-printing.controller.ts
+let DocDrawingPrintingController = class DocDrawingPrintingController extends _univerjs_core.Disposable {
+	constructor(_docPrintInterceptorService, _drawingRenderService, _drawingManagerService, _componetManager, _injector) {
+		super();
+		this._docPrintInterceptorService = _docPrintInterceptorService;
+		this._drawingRenderService = _drawingRenderService;
+		this._drawingManagerService = _drawingManagerService;
+		this._componetManager = _componetManager;
+		this._injector = _injector;
+		this._initPrinting();
+		this._initPrintingDom();
+	}
+	_initPrinting() {
+		this.disposeWithMe(this._docPrintInterceptorService.interceptor.intercept(this._docPrintInterceptorService.interceptor.getInterceptPoints().PRINTING_COMPONENT_COLLECT, { handler: (_param, pos, next) => {
+			const { unitId, scene } = pos;
+			const unitData = this._drawingManagerService.getDrawingDataForUnit(unitId);
+			const subUnitData = unitData === null || unitData === void 0 ? void 0 : unitData[unitId];
+			if (subUnitData) subUnitData.order.forEach((id) => {
+				const drawing = subUnitData.data[id];
+				if (drawing.drawingType !== _univerjs_core.DrawingTypeEnum.DRAWING_CHART && drawing.drawingType !== _univerjs_core.DrawingTypeEnum.DRAWING_DOM) this._drawingRenderService.renderDrawing(drawing, scene);
+			});
+			return next();
+		} }));
+	}
+	_initPrintingDom() {
+		this.disposeWithMe(this._docPrintInterceptorService.interceptor.intercept(this._docPrintInterceptorService.interceptor.getInterceptPoints().PRINTING_DOM_COLLECT, { handler: (disposableCollection, pos, next) => {
+			const { unitId } = pos;
+			const unitData = this._drawingManagerService.getDrawingDataForUnit(unitId);
+			const subUnitData = unitData === null || unitData === void 0 ? void 0 : unitData[unitId];
+			if (subUnitData) {
+				const unmountPrintingFloatDom = mountDocPrintingFloatDom({
+					unitId,
+					floatDomInfos: subUnitData.order.map((id) => {
+						const drawing = subUnitData.data[id];
+						if (drawing.drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_CHART) return {
+							...drawing,
+							componentKey: this._componetManager.get(_univerjs_core.DOC_DRAWING_PRINTING_COMPONENT_KEY)
+						};
+						if (drawing.drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_DOM) {
+							const printingComponentKey = this._docPrintInterceptorService.getPrintComponent(drawing.componentKey);
+							return {
+								...drawing,
+								componentKey: this._componetManager.get(printingComponentKey || drawing.componentKey)
+							};
+						}
+						return null;
+					}).filter(Boolean),
+					scene: pos.scene,
+					skeleton: pos.skeleton,
+					offset: pos.offset,
+					bound: pos.bound
+				}, pos.root, this._injector);
+				disposableCollection === null || disposableCollection === void 0 || disposableCollection.add(() => {
+					unmountPrintingFloatDom();
+				});
+				return next(disposableCollection);
+			}
+		} }));
 	}
 };
+DocDrawingPrintingController = __decorate([
+	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_docs_ui.DocPrintInterceptorService)),
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_drawing_ui.DrawingRenderService)),
+	__decorateParam(2, _univerjs_drawing.IDrawingManagerService),
+	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)),
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_core.Injector))
+], DocDrawingPrintingController);
 
 //#endregion
-//#region src/views/doc-image-panel/DocDrawingPosition.tsx
-const MIN_OFFSET = -1e3;
-const MAX_OFFSET = 1e3;
-const DocDrawingPosition = (props) => {
-	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
-	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
-	const drawingManagerService = (0, _univerjs_ui.useDependency)(_univerjs_drawing.IDrawingManagerService);
-	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService);
-	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
-	const { drawings } = props;
-	const drawingParam = drawings[0];
-	if (drawingParam == null) return;
-	const { unitId } = drawingParam;
-	const documentDataModel = univerInstanceService.getUniverDocInstance(unitId);
-	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(_univerjs_core.ObjectRelativeFromH.COLUMN)
-		},
-		{
-			label: localeService.t("docs-drawing-ui.image-position.page"),
-			value: String(_univerjs_core.ObjectRelativeFromH.PAGE)
-		},
-		{
-			label: localeService.t("docs-drawing-ui.image-position.margin"),
-			value: String(_univerjs_core.ObjectRelativeFromH.MARGIN)
-		}
-	];
-	const VERTICAL_RELATIVE_FROM = [
-		{
-			label: localeService.t("docs-drawing-ui.image-position.line"),
-			value: String(_univerjs_core.ObjectRelativeFromV.LINE),
-			disabled: documentFlavor === _univerjs_core.DocumentFlavor.MODERN
-		},
-		{
-			label: localeService.t("docs-drawing-ui.image-position.page"),
-			value: String(_univerjs_core.ObjectRelativeFromV.PAGE),
-			disabled: documentFlavor === _univerjs_core.DocumentFlavor.MODERN
-		},
-		{
-			label: localeService.t("docs-drawing-ui.image-position.margin"),
-			value: String(_univerjs_core.ObjectRelativeFromV.MARGIN),
-			disabled: documentFlavor === _univerjs_core.DocumentFlavor.MODERN
-		},
-		{
-			label: localeService.t("docs-drawing-ui.image-position.paragraph"),
-			value: String(_univerjs_core.ObjectRelativeFromV.PARAGRAPH)
+//#region src/controllers/render-controllers/doc-drawing-transform-update.controller.ts
+function getDocsDrawingPageClipBounds(config) {
+	const { docsLeft, docsTop, pageOffsetLeft, pageOffsetTop, clipOffsetLeft = 0, clipOffsetTop = 0, page } = config;
+	const { pageWidth, pageHeight } = page;
+	if (!Number.isFinite(pageWidth) || !Number.isFinite(pageHeight) || pageWidth <= 0 || pageHeight <= 0) return;
+	return {
+		left: docsLeft + pageOffsetLeft + clipOffsetLeft,
+		top: docsTop + pageOffsetTop + clipOffsetTop,
+		width: pageWidth,
+		height: pageHeight
+	};
+}
+function getDocsDrawingClipPage(config) {
+	const { drawing, hostPage, page } = config;
+	if (hostPage == null || drawing.behindText !== true || drawing.transform == null) return page;
+	const { width, height } = drawing.transform;
+	if (width == null || height == null) return page;
+	if (width > page.pageWidth || height > page.pageHeight) return hostPage;
+	const widthRatio = width / hostPage.pageWidth;
+	const heightRatio = height / hostPage.pageHeight;
+	if (widthRatio >= .8 && heightRatio >= .8) return hostPage;
+	return page;
+}
+function getDocsPageRelativeDrawingLeft(config) {
+	const { hostPage, positionH, width } = config;
+	if (positionH.relativeFrom !== _univerjs_core.ObjectRelativeFromH.PAGE) return;
+	if (positionH.align === _univerjs_core.AlignTypeH.RIGHT) return hostPage.pageWidth - width;
+	if (positionH.align === _univerjs_core.AlignTypeH.CENTER) return hostPage.pageWidth / 2 - width / 2;
+	if (positionH.posOffset != null) return positionH.posOffset;
+	return 0;
+}
+function getDocsPageRelativeDrawingTop(config) {
+	const { hostPage, positionV, height } = config;
+	if (positionV.relativeFrom !== _univerjs_core.ObjectRelativeFromV.PAGE) return;
+	if (positionV.align === _univerjs_core.AlignTypeV.BOTTOM) return hostPage.pageHeight - height;
+	if (positionV.align === _univerjs_core.AlignTypeV.CENTER) return hostPage.pageHeight / 2 - height / 2;
+	if (positionV.posOffset != null) return positionV.posOffset;
+	return 0;
+}
+function getDocsPageRelativeDrawingAnchorPage(config) {
+	const { page, clipPage, hostPage } = config;
+	if (hostPage != null && hostPage === clipPage) return hostPage;
+	if (hostPage == null && page === clipPage) return page;
+}
+function getDocsDrawingBehindText(config) {
+	const { drawingOrigin, hostPage } = config;
+	if (hostPage != null) return true;
+	return drawingOrigin.layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE && drawingOrigin.behindDoc === _univerjs_core.BooleanNumber.TRUE;
+}
+function getDocsTableCellDrawingOffset(unitId, table, row, cell) {
+	const sourceTableId = (0, _univerjs_engine_render.getTableIdAndSliceIndex)(table.tableId).tableId;
+	const viewport = (0, _univerjs_engine_render.getDocsTableRenderViewport)(unitId, sourceTableId);
+	const scrollLeft = hasHorizontalTableViewport(viewport) ? viewport.scrollLeft : 0;
+	return {
+		left: table.left + cell.left - scrollLeft + cell.marginLeft,
+		top: table.top + row.top + cell.marginTop
+	};
+}
+function hasHorizontalTableViewport(viewport) {
+	var _viewport$leadingInse, _viewport$trailingIns;
+	return viewport != null && ((_viewport$leadingInse = viewport.leadingInsetLeft) !== null && _viewport$leadingInse !== void 0 ? _viewport$leadingInse : 0) + viewport.contentWidth + ((_viewport$trailingIns = viewport.trailingInsetRight) !== null && _viewport$trailingIns !== void 0 ? _viewport$trailingIns : 0) > viewport.viewportWidth;
+}
+let DocDrawingTransformUpdateController = class DocDrawingTransformUpdateController extends _univerjs_core.Disposable {
+	constructor(_context, _docSkeletonManagerService, _commandService, _editorService, _drawingManagerService, _docRefreshDrawingsService, _univerInstanceService, _lifecycleService) {
+		super();
+		this._context = _context;
+		this._docSkeletonManagerService = _docSkeletonManagerService;
+		this._commandService = _commandService;
+		this._editorService = _editorService;
+		this._drawingManagerService = _drawingManagerService;
+		this._docRefreshDrawingsService = _docRefreshDrawingsService;
+		this._univerInstanceService = _univerInstanceService;
+		this._lifecycleService = _lifecycleService;
+		_defineProperty(this, "_liquid", new _univerjs_engine_render.Liquid());
+		this._initialize();
+		this._commandExecutedListener();
+	}
+	_initialize() {
+		this._initialRenderRefresh();
+		this._drawingInitializeListener();
+		this._initResize();
+	}
+	_initialRenderRefresh() {
+		this.disposeWithMe(this._docSkeletonManagerService.currentSkeleton$.subscribe((documentSkeleton) => {
+			if (documentSkeleton == null) return;
+			this._refreshDrawing(documentSkeleton);
+		}));
+		this.disposeWithMe(this._docRefreshDrawingsService.refreshDrawings$.subscribe((skeleton) => {
+			if (skeleton == null) return;
+			this._refreshDrawing(skeleton);
+		}));
+	}
+	_commandExecutedListener() {
+		const updateCommandList = [_univerjs_docs.RichTextEditingMutation.id, _univerjs_docs_ui.SetDocZoomRatioOperation.id];
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (updateCommandList.includes(command.id)) {
+				const { unitId: commandUnitId } = command.params;
+				const { unitId, mainComponent } = this._context;
+				if (commandUnitId !== unitId) return;
+				const skeleton = this._docSkeletonManagerService.getSkeleton();
+				if (skeleton == null) return;
+				if (this._editorService.isEditor(unitId)) {
+					mainComponent === null || mainComponent === void 0 || mainComponent.makeDirty();
+					return;
+				}
+				this._refreshDrawing(skeleton);
+			}
+		}));
+	}
+	_initResize() {
+		this.disposeWithMe((0, _univerjs_core.fromEventSubject)(this._context.engine.onTransformChange$).pipe((0, rxjs.filter)((evt) => evt.type === _univerjs_engine_render.TRANSFORM_CHANGE_OBSERVABLE_TYPE.resize), (0, rxjs.debounceTime)(16)).subscribe(() => {
+			var _scene$getTransformer;
+			const skeleton = this._docSkeletonManagerService.getSkeleton();
+			const { scene } = this._context;
+			(_scene$getTransformer = scene.getTransformer()) === null || _scene$getTransformer === void 0 || _scene$getTransformer.refreshControls();
+			this._refreshDrawing(skeleton);
+		}));
+	}
+	_refreshDrawing(skeleton) {
+		const skeletonData = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getSkeletonData();
+		const { mainComponent, unitId } = this._context;
+		const documentComponent = mainComponent;
+		if (!skeletonData) return;
+		const { left: docsLeft, top: docsTop, pageLayoutType, pageMarginLeft, pageMarginTop } = documentComponent;
+		if (docsLeft <= -1e4 || docsTop <= -1e4) return;
+		const { pages, skeHeaders, skeFooters } = skeletonData;
+		const updateDrawingMap = {};
+		this._liquid.reset();
+		/**
+		* TODO: @DR-Univer We should not refresh all floating elements, but instead make a diff.
+		*/
+		for (let i = 0, len = pages.length; i < len; i++) {
+			const page = pages[i];
+			const { headerId, footerId, pageWidth } = page;
+			if (headerId) {
+				var _skeHeaders$get;
+				const headerPage = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(pageWidth);
+				if (headerPage) {
+					this._calculateDrawingPosition(unitId, headerPage, docsLeft, docsTop, updateDrawingMap, headerPage.marginTop, page.marginLeft, page);
+					this._calculateTableCellDrawingPositions(unitId, headerPage, docsLeft, docsTop, updateDrawingMap, headerPage.marginTop, page.marginLeft);
+				}
+			}
+			if (footerId) {
+				var _skeFooters$get;
+				const footerPage = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(pageWidth);
+				if (footerPage) {
+					const footerTop = page.pageHeight - page.marginBottom + footerPage.marginTop;
+					this._calculateDrawingPosition(unitId, footerPage, docsLeft, docsTop, updateDrawingMap, footerTop, page.marginLeft, page);
+					this._calculateTableCellDrawingPositions(unitId, footerPage, docsLeft, docsTop, updateDrawingMap, footerTop, page.marginLeft);
+				}
+			}
+			this._calculateDrawingPosition(unitId, page, docsLeft, docsTop, updateDrawingMap, page.marginTop, page.marginLeft);
+			this._calculateTableCellDrawingPositions(unitId, page, docsLeft, docsTop, updateDrawingMap, page.marginTop, page.marginLeft);
+			this._liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
 		}
-	];
-	const [disabled, setDisabled] = (0, react.useState)(true);
-	const [hPosition, setHPosition] = (0, react.useState)({
-		relativeFrom: _univerjs_core.ObjectRelativeFromH.PAGE,
-		posOffset: 0
-	});
-	const [vPosition, setVPosition] = (0, react.useState)({
-		relativeFrom: _univerjs_core.ObjectRelativeFromV.PAGE,
-		posOffset: 0
-	});
-	const [followTextMove, setFollowTextMove] = (0, react.useState)(true);
-	const [showPanel, setShowPanel] = (0, react.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) => {
+		const updateDrawings = Object.values(updateDrawingMap);
+		for (const drawing of updateDrawings) drawing.hidden = false;
+		const staleNonMultiDrawings = this._getStaleNonMultiDrawings(unitId, updateDrawingMap);
+		const nonMultiDrawings = updateDrawings.filter((drawing) => !drawing.isMultiTransform).concat(staleNonMultiDrawings);
+		const multiDrawings = updateDrawings.filter((drawing) => drawing.isMultiTransform);
+		if (nonMultiDrawings.length > 0) this._drawingManagerService.refreshTransform(nonMultiDrawings);
+		this._handleMultiDrawingsTransform(multiDrawings);
+	}
+	_getStaleNonMultiDrawings(unitId, updateDrawingMap) {
+		var _this$_drawingManager;
+		const drawingData = (_this$_drawingManager = this._drawingManagerService.getDrawingData(unitId, unitId)) !== null && _this$_drawingManager !== void 0 ? _this$_drawingManager : {};
+		return Object.values(drawingData).filter((drawing) => drawing.isMultiTransform !== _univerjs_core.BooleanNumber.TRUE).filter((drawing) => updateDrawingMap[drawing.drawingId] == null).map((drawing) => {
+			var _drawing$transforms, _drawing$isMultiTrans;
 			return {
-				unitId: drawing.unitId,
-				subUnitId: drawing.subUnitId,
-				drawingId: drawing.drawingId
+				unitId,
+				subUnitId: unitId,
+				drawingId: drawing.drawingId,
+				behindText: false,
+				hidden: true,
+				transform: drawing.transform,
+				transforms: (_drawing$transforms = drawing.transforms) !== null && _drawing$transforms !== void 0 ? _drawing$transforms : [],
+				isMultiTransform: (_drawing$isMultiTrans = drawing.isMultiTransform) !== null && _drawing$isMultiTrans !== void 0 ? _drawing$isMultiTrans : _univerjs_core.BooleanNumber.FALSE
 			};
 		});
-		commandService.executeCommand(UpdateDrawingDocTransformCommand.id, {
-			unitId: focusDrawings[0].unitId,
-			subUnitId: focusDrawings[0].unitId,
-			drawings: drawings.map((drawing) => ({
-				drawingId: drawing.drawingId,
-				key: direction,
-				value
-			}))
+	}
+	_handleMultiDrawingsTransform(multiDrawings) {
+		const { scene, unitId } = this._context;
+		const transformer = scene.getTransformerByCreate();
+		multiDrawings.forEach((updateParam) => {
+			const param = this._drawingManagerService.getDrawingByParam(updateParam);
+			if (param == null) return;
+			param.transform = updateParam.transform;
+			param.transforms = updateParam.transforms;
+			param.isMultiTransform = updateParam.isMultiTransform;
 		});
-		const docSelectionRenderService = (_renderManagerService = renderManagerService.getRenderById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(_univerjs_docs_ui.DocSelectionRenderService);
-		if (docSelectionRenderService) docSelectionRenderService.blur();
-		transformer.refreshControls();
+		const selectedObjectKeys = [...transformer.getSelectedObjectMap().keys()];
+		const allMultiDrawings = Object.values(this._drawingManagerService.getDrawingData(unitId, unitId)).filter((drawing) => drawing.isMultiTransform === _univerjs_core.BooleanNumber.TRUE);
+		this._drawingManagerService.removeNotification(allMultiDrawings);
+		if (multiDrawings.length > 0) this._drawingManagerService.addNotification(multiDrawings);
+		for (const key of selectedObjectKeys) {
+			const drawingShape = scene.getObject(key);
+			if (drawingShape) transformer.setSelectedControl(drawingShape);
+		}
 	}
-	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(_univerjs_docs.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;
+	_calculateDrawingPosition(unitId, page, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft, hostPage, clipOffset) {
+		const { skeDrawings } = page;
+		const pageOffsetLeft = this._liquid.x;
+		const pageOffsetTop = this._liquid.y;
+		this._liquid.translatePagePadding({
+			marginTop,
+			marginLeft
+		});
+		skeDrawings.forEach((drawing) => {
+			const { aLeft, aTop, height, width, angle, drawingId, drawingOrigin } = drawing;
+			const behindText = getDocsDrawingBehindText({
+				drawingOrigin,
+				hostPage
+			});
+			const { isMultiTransform = _univerjs_core.BooleanNumber.FALSE } = drawingOrigin;
+			const clipPage = getDocsDrawingClipPage({
+				drawing: {
+					behindText,
+					transform: {
+						width,
+						height
+					}
+				},
+				hostPage,
+				page
+			});
+			const pageClipBounds = getDocsDrawingPageClipBounds({
+				docsLeft,
+				docsTop,
+				pageOffsetLeft,
+				pageOffsetTop,
+				clipOffsetLeft: clipOffset === null || clipOffset === void 0 ? void 0 : clipOffset.left,
+				clipOffsetTop: clipOffset === null || clipOffset === void 0 ? void 0 : clipOffset.top,
+				page: clipPage
+			});
+			const pageRelativeAnchorPage = getDocsPageRelativeDrawingAnchorPage({
+				page,
+				clipPage,
+				hostPage
+			});
+			const pageRelativeLeft = pageRelativeAnchorPage != null ? getDocsPageRelativeDrawingLeft({
+				hostPage: pageRelativeAnchorPage,
+				positionH: drawingOrigin.docTransform.positionH,
+				width
+			}) : void 0;
+			const pageRelativeTop = pageRelativeAnchorPage != null ? getDocsPageRelativeDrawingTop({
+				hostPage: pageRelativeAnchorPage,
+				positionV: drawingOrigin.docTransform.positionV,
+				height
+			}) : void 0;
+			const transform = {
+				left: (pageRelativeLeft !== null && pageRelativeLeft !== void 0 ? pageRelativeLeft : aLeft) + docsLeft + (pageRelativeLeft == null ? this._liquid.x : pageOffsetLeft),
+				top: (pageRelativeTop !== null && pageRelativeTop !== void 0 ? pageRelativeTop : aTop) + docsTop + (pageRelativeTop == null ? this._liquid.y : pageOffsetTop),
+				width,
+				height,
+				angle,
+				clipBounds: pageClipBounds
+			};
+			if (updateDrawingMap[drawingId] == null) updateDrawingMap[drawingId] = {
+				unitId,
+				subUnitId: unitId,
+				drawingId,
+				behindText,
+				transform,
+				transforms: [transform],
+				isMultiTransform
+			};
+			else if (isMultiTransform === _univerjs_core.BooleanNumber.TRUE) updateDrawingMap[drawingId].transforms.push(transform);
+		});
+		this._liquid.restorePagePadding({
+			marginTop,
+			marginLeft
+		});
+	}
+	_calculateTableCellDrawingPositions(unitId, page, docsLeft, docsTop, updateDrawingMap, baseMarginTop, baseMarginLeft) {
+		var _page$skeTables;
+		(_page$skeTables = page.skeTables) === null || _page$skeTables === void 0 || _page$skeTables.forEach((table) => {
+			table.rows.forEach((row) => {
+				row.cells.forEach((cell) => {
+					const cellOffset = getDocsTableCellDrawingOffset(unitId, table, row, cell);
+					const marginTop = baseMarginTop + cellOffset.top;
+					const marginLeft = baseMarginLeft + cellOffset.left;
+					this._calculateDrawingPosition(unitId, cell, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft, void 0, {
+						left: marginLeft,
+						top: marginTop
+					});
+					this._calculateTableCellDrawingPositions(unitId, cell, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft);
+				});
+			});
+		});
+	}
+	_drawingInitializeListener() {
+		const init = () => {
+			const skeleton = this._docSkeletonManagerService.getSkeleton();
+			if (skeleton == null) return;
+			this._drawingManagerService.initializeNotification(this._context.unitId);
+			this._refreshDrawing(skeleton);
+		};
+		if (this._lifecycleService.stage >= _univerjs_core.LifecycleStages.Rendered) if (this._docSkeletonManagerService.getSkeleton()) init();
+		else setTimeout(init, 500);
+		else this.disposeWithMe(this._lifecycleService.lifecycle$.pipe((0, rxjs.filter)((stage) => stage === _univerjs_core.LifecycleStages.Rendered)).subscribe(init));
+	}
+};
+DocDrawingTransformUpdateController = __decorate([
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_docs.DocSkeletonManagerService)),
+	__decorateParam(2, _univerjs_core.ICommandService),
+	__decorateParam(3, _univerjs_docs_ui.IEditorService),
+	__decorateParam(4, _univerjs_drawing.IDrawingManagerService),
+	__decorateParam(5, (0, _univerjs_core.Inject)(DocRefreshDrawingsService)),
+	__decorateParam(6, _univerjs_core.IUniverInstanceService),
+	__decorateParam(7, (0, _univerjs_core.Inject)(_univerjs_core.LifecycleService))
+], DocDrawingTransformUpdateController);
+
+//#endregion
+//#region src/controllers/doc-drawing-transformer-update.controller.ts
+const INLINE_DRAWING_ANCHOR_KEY_PREFIX = "__InlineDrawingAnchor__";
+function getDocsTableCellAnchorContext(unitId, cell) {
+	var _row$cells;
+	const row = cell.parent;
+	const table = row === null || row === void 0 ? void 0 : row.parent;
+	const hostPage = table === null || table === void 0 ? void 0 : table.parent;
+	if (!row || !table || !hostPage || !((_row$cells = row.cells) === null || _row$cells === void 0 ? void 0 : _row$cells.includes(cell))) return null;
+	return {
+		cell,
+		hostPage,
+		offset: getDocsTableCellDrawingOffset(unitId, table, row, cell),
+		row,
+		table
+	};
+}
+let DocDrawingTransformerController = class DocDrawingTransformerController extends _univerjs_core.Disposable {
+	constructor(_commandService, _univerInstanceService, _drawingManagerService, _renderManagerService) {
+		super();
+		this._commandService = _commandService;
+		this._univerInstanceService = _univerInstanceService;
+		this._drawingManagerService = _drawingManagerService;
+		this._renderManagerService = _renderManagerService;
+		_defineProperty(this, "_liquid", new _univerjs_engine_render.Liquid());
+		_defineProperty(this, "_listenerOnImageMap", /* @__PURE__ */ new Set());
+		_defineProperty(this, "_transformerCache", /* @__PURE__ */ new Map());
+		_defineProperty(this, "_anchorShape", void 0);
+		this._init();
+	}
+	_init() {
+		this._listenDrawingFocus();
+	}
+	_listenDrawingFocus() {
+		this.disposeWithMe(this._drawingManagerService.add$.subscribe((drawingParams) => {
+			if (drawingParams.length === 0) return;
+			for (const drawingParam of drawingParams) {
+				const { unitId } = drawingParam;
+				if (!this._listenerOnImageMap.has(unitId)) {
+					this._listenTransformerChange(unitId);
+					this._listenerOnImageMap.add(unitId);
+				}
 			}
-			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;
+		}));
+	}
+	_listenTransformerChange(unitId) {
+		var _this$_getSceneAndTra;
+		const transformer = (_this$_getSceneAndTra = this._getSceneAndTransformerByDrawingSearch(unitId)) === null || _this$_getSceneAndTra === void 0 ? void 0 : _this$_getSceneAndTra.transformer;
+		if (transformer == null) return;
+		this.disposeWithMe((0, _univerjs_core.toDisposable)(transformer.changeStart$.subscribe((state) => {
+			this._transformerCache.clear();
+			const { objects } = state;
+			for (const object of objects.values()) {
+				var _documentDataModel$ge;
+				const { oKey, width, height, left, top, angle } = object;
+				const drawing = this._drawingManagerService.getDrawingOKey(oKey);
+				if (drawing == null) continue;
+				const documentDataModel = this._univerInstanceService.getUniverDocInstance(drawing.unitId);
+				const drawingData = documentDataModel === null || documentDataModel === void 0 || (_documentDataModel$ge = documentDataModel.getSnapshot().drawings) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge[drawing.drawingId];
+				if ((drawingData === null || drawingData === void 0 ? void 0 : drawingData.layoutType) === _univerjs_core.PositionedObjectLayoutType.INLINE) try {
+					object.setOpacity(.2);
+				} catch (e) {}
+				if (drawingData != null) this._transformerCache.set(drawing.drawingId, {
+					drawing: drawingData,
+					top,
+					left,
+					width,
+					height,
+					angle
+				});
 			}
-			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;
+		})));
+		const throttleMultipleDrawingUpdate = (0, _univerjs_core.throttle)(this._updateMultipleDrawingDocTransform.bind(this), 50);
+		(0, _univerjs_core.throttle)(this._nonInlineDrawingTransform.bind(this), 50);
+		this.disposeWithMe((0, _univerjs_core.toDisposable)(transformer.changing$.subscribe((state) => {
+			const { objects, offsetX, offsetY } = state;
+			if (objects.size > 1) throttleMultipleDrawingUpdate(objects);
+			else if (objects.size === 1) {
+				const drawingCache = this._transformerCache.values().next().value;
+				const { width, height, top, left, angle } = objects.values().next().value;
+				if (drawingCache && width === drawingCache.width && height === drawingCache.height && top === drawingCache.top && left === drawingCache.left && angle === drawingCache.angle) return;
+				if (drawingCache && drawingCache.drawing.layoutType !== _univerjs_core.PositionedObjectLayoutType.INLINE) {}
+				if (drawingCache && drawingCache.drawing.layoutType === _univerjs_core.PositionedObjectLayoutType.INLINE && offsetX != null && offsetY != null) this._updateInlineDrawingAnchor(drawingCache.drawing, offsetX, offsetY);
 			}
-		}
-		if (drawing == null) return;
-		let delta = 0;
-		if (prevRelativeFrom === _univerjs_core.ObjectRelativeFromH.COLUMN) delta -= drawing.columnLeft;
-		else if (prevRelativeFrom === _univerjs_core.ObjectRelativeFromH.MARGIN) delta -= pageMarginLeft;
-		if (relativeFrom === _univerjs_core.ObjectRelativeFromH.COLUMN) delta += drawing.columnLeft;
-		else if (relativeFrom === _univerjs_core.ObjectRelativeFromH.MARGIN) delta += pageMarginLeft;
-		else if (relativeFrom === _univerjs_core.ObjectRelativeFromH.PAGE) {}
-		handlePositionChange("positionH", {
-			relativeFrom,
-			posOffset: (prevPosOffset !== null && prevPosOffset !== void 0 ? prevPosOffset : 0) - delta
-		});
+		})));
+		this.disposeWithMe((0, _univerjs_core.toDisposable)(transformer.changeEnd$.subscribe((state) => {
+			const { objects, offsetX, offsetY } = state;
+			for (const object of objects.values()) {
+				const drawing = this._drawingManagerService.getDrawingOKey(object.oKey);
+				if (drawing == null) continue;
+				const drawingCache = this._transformerCache.get(drawing === null || drawing === void 0 ? void 0 : drawing.drawingId);
+				if ((drawingCache === null || drawingCache === void 0 ? void 0 : drawingCache.drawing.layoutType) === _univerjs_core.PositionedObjectLayoutType.INLINE) try {
+					object.setOpacity(1);
+				} catch (e) {}
+			}
+			if (this._anchorShape) this._anchorShape.hide();
+			if (objects.size > 1) this._updateMultipleDrawingDocTransform(objects);
+			else if (objects.size === 1) {
+				const drawingCache = this._transformerCache.values().next().value;
+				const object = objects.values().next().value;
+				const { width, height, top, left, angle } = object;
+				if (drawingCache && width === drawingCache.width && height === drawingCache.height && top === drawingCache.top && left === drawingCache.left && angle === drawingCache.angle) return;
+				if (drawingCache && drawingCache.drawing.layoutType === _univerjs_core.PositionedObjectLayoutType.INLINE) {
+					if (width !== drawingCache.width || height !== drawingCache.height || angle !== drawingCache.angle) this._updateDrawingSize(drawingCache, object);
+					else if (offsetX != null && offsetY != null) this._moveInlineDrawing(drawingCache.drawing, offsetX, offsetY);
+				} else if (drawingCache) this._nonInlineDrawingTransform(drawingCache.drawing, object);
+			}
+			this._transformerCache.clear();
+		})));
 	}
-	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];
-		const documentDataModel = univerInstanceService.getUniverDocInstance(unitId);
-		const skeleton = (_renderManagerService3 = renderManagerService.getRenderById(unitId)) === null || _renderManagerService3 === void 0 ? void 0 : _renderManagerService3.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
-		const docSelectionRenderService = (_renderManagerService4 = renderManagerService.getRenderById(unitId)) === null || _renderManagerService4 === void 0 ? void 0 : _renderManagerService4.with(_univerjs_docs_ui.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).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 === _univerjs_core.ObjectRelativeFromV.PARAGRAPH) delta -= paragraphStartLine.top;
-		else if (prevRelativeFrom === _univerjs_core.ObjectRelativeFromV.LINE) delta -= line.top;
-		else if (prevRelativeFrom === _univerjs_core.ObjectRelativeFromV.PAGE) delta += page.marginTop;
-		if (relativeFrom === _univerjs_core.ObjectRelativeFromV.PARAGRAPH) delta += paragraphStartLine.top;
-		else if (relativeFrom === _univerjs_core.ObjectRelativeFromV.LINE) delta += line.top;
-		else if (relativeFrom === _univerjs_core.ObjectRelativeFromV.PAGE) delta -= page.marginTop;
-		handlePositionChange("positionV", {
-			relativeFrom,
-			posOffset: (prevPosOffset !== null && prevPosOffset !== void 0 ? prevPosOffset : 0) - delta
+	_updateMultipleDrawingDocTransform(objects) {
+		if (objects.size < 1) return;
+		const drawings = [];
+		let unitId;
+		let subUnitId;
+		for (const object of objects.values()) {
+			const { oKey, left, top, angle } = object;
+			let { width, height } = object;
+			const drawing = this._drawingManagerService.getDrawingOKey(oKey);
+			if (drawing == null) continue;
+			if (unitId == null) unitId = drawing.unitId;
+			if (subUnitId == null) subUnitId = drawing.subUnitId;
+			const drawingCache = this._transformerCache.get(drawing.drawingId);
+			if (drawingCache == null) continue;
+			const { drawing: drawingData, top: oldTop, left: oldLeft, width: oldWidth, height: oldHeight, angle: oldAngle } = drawingCache;
+			const { width: maxWidth, height: maxHeight } = this._getPageContentSize(drawingData);
+			width = Math.min(width, maxWidth);
+			height = Math.min(height, maxHeight);
+			if (oldWidth !== width || oldHeight !== height) drawings.push({
+				drawingId: drawing.drawingId,
+				key: "size",
+				value: {
+					width,
+					height
+				}
+			});
+			if (oldAngle !== angle) drawings.push({
+				drawingId: drawing.drawingId,
+				key: "angle",
+				value: angle
+			});
+			if (oldTop !== top || oldLeft !== left) {
+				const verticalDelta = top - oldTop;
+				const horizontalDelta = left - oldLeft;
+				if (verticalDelta !== 0) drawings.push({
+					drawingId: drawing.drawingId,
+					key: "positionV",
+					value: {
+						relativeFrom: drawingData.docTransform.positionV.relativeFrom,
+						posOffset: drawingData.docTransform.positionV.posOffset + verticalDelta
+					}
+				});
+				if (horizontalDelta !== 0) drawings.push({
+					drawingId: drawing.drawingId,
+					key: "positionH",
+					value: {
+						relativeFrom: drawingData.docTransform.positionH.relativeFrom,
+						posOffset: drawingData.docTransform.positionH.posOffset + horizontalDelta
+					}
+				});
+			}
+		}
+		if (drawings.length > 0 && unitId && subUnitId) this._commandService.executeCommand(UpdateDrawingDocTransformCommand.id, {
+			unitId,
+			subUnitId,
+			drawings
 		});
 	}
-	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 === _univerjs_core.PositionedObjectLayoutType.INLINE);
-		setFollowTextMove(positionV.relativeFrom === _univerjs_core.ObjectRelativeFromV.PARAGRAPH || positionV.relativeFrom === _univerjs_core.ObjectRelativeFromV.LINE);
-	}
-	function updateFocusDrawingState() {
-		const focusDrawings = drawingManagerService.getFocusDrawings();
-		if (focusDrawings.length === 0) return;
-		updateState(focusDrawings[0]);
+	_updateDrawingAnchor(objects) {
+		if (this._transformerCache.size !== 1) return;
+		const drawingCache = this._transformerCache.values().next().value;
+		const object = objects.values().next().value;
+		this._getDrawingAnchor(drawingCache.drawing, object);
 	}
-	function handleFollowTextMoveCheck(val) {
-		setFollowTextMove(val);
-		handleVerticalRelativeFromChange(val ? String(_univerjs_core.ObjectRelativeFromV.PARAGRAPH) : String(_univerjs_core.ObjectRelativeFromV.PAGE));
+	_updateInlineDrawingAnchor(drawing, offsetX, offsetY) {
+		var _this$_getInlineDrawi;
+		if (this._transformerCache.size !== 1) return;
+		const { contentBoxPointGroup } = (_this$_getInlineDrawi = this._getInlineDrawingAnchor(drawing, offsetX, offsetY)) !== null && _this$_getInlineDrawi !== void 0 ? _this$_getInlineDrawi : {};
+		if (contentBoxPointGroup == null) return;
+		this._createOrUpdateInlineAnchor(drawing.unitId, contentBoxPointGroup);
 	}
-	(0, react.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 === _univerjs_docs.RichTextEditingMutation.id) updateFocusDrawingState();
+	_getInlineDrawingAnchor(drawing, offsetX, offsetY) {
+		var _this$_renderManagerS, _getOneTextSelectionR;
+		const currentRender = this._renderManagerService.getRenderById(drawing.unitId);
+		const skeleton = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+		if (currentRender == null) return;
+		const { mainComponent, scene } = currentRender;
+		const documentComponent = mainComponent;
+		const activeViewport = scene.getViewports()[0];
+		const { pageLayoutType = _univerjs_engine_render.PageLayoutType.VERTICAL, pageMarginLeft, pageMarginTop } = documentComponent.getOffsetConfig();
+		let glyphAnchor = null;
+		let isBack = false;
+		let segmentPageIndex = -1;
+		let segmentId = "";
+		const HALF = .5;
+		const coord = this._getTransformCoordForDocumentOffset(documentComponent, activeViewport, offsetX, offsetY);
+		if (coord == null) return;
+		const docSelectionRenderService = (_this$_renderManagerS = this._renderManagerService.getRenderById(drawing.unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(_univerjs_docs_ui.DocSelectionRenderService);
+		if (docSelectionRenderService == null) return;
+		const nodeInfo = skeleton === null || skeleton === void 0 ? void 0 : skeleton.findNodeByCoord(coord, pageLayoutType, pageMarginLeft, pageMarginTop, {
+			strict: false,
+			segmentId: docSelectionRenderService.getSegment(),
+			segmentPage: docSelectionRenderService.getSegmentPage()
 		});
-		return () => {
-			subscription.unsubscribe();
-			mutationListener.dispose();
+		if (nodeInfo) {
+			const { node, ratioX, segmentPage, segmentId: nodeSegmentId } = nodeInfo;
+			isBack = ratioX < HALF;
+			glyphAnchor = node;
+			segmentPageIndex = segmentPage;
+			segmentId = nodeSegmentId;
+		}
+		if (glyphAnchor == null) return;
+		const nodePosition = skeleton === null || skeleton === void 0 ? void 0 : skeleton.findPositionByGlyph(glyphAnchor, segmentPageIndex);
+		const docObject = this._getDocObject();
+		if (nodePosition == null || skeleton == null || docObject == null) return;
+		const positionWithIsBack = {
+			...nodePosition,
+			isBack
 		};
-	}, []);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, _univerjs_design.clsx)("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": !showPanel }),
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
-				className: "univer-text-gray-600 dark:!univer-text-gray-200",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("docs-drawing-ui.image-position.title") })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-text-gray-600 dark:!univer-text-gray-200",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("docs-drawing-ui.image-position.horizontal") })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("docs-drawing-ui.image-position.absolutePosition") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
-					min: MIN_OFFSET,
-					max: MAX_OFFSET,
-					precision: 1,
-					disabled,
-					value: hPosition.posOffset,
-					onChange: (val) => {
-						handlePositionChange("positionH", {
-							relativeFrom: hPosition.relativeFrom,
-							posOffset: val
-						});
-					}
-				})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("docs-drawing-ui.image-position.toTheRightOf") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
-					value: String(hPosition.relativeFrom),
-					disabled,
-					options: HORIZONTAL_RELATIVE_FROM,
-					onChange: handleHorizontalRelativeFromChange
-				})] })]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-text-gray-600 dark:!univer-text-gray-200",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("docs-drawing-ui.image-position.vertical") })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("docs-drawing-ui.image-position.absolutePosition") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
-					min: MIN_OFFSET,
-					max: MAX_OFFSET,
-					precision: 1,
-					disabled,
-					value: vPosition.posOffset,
-					onChange: (val) => {
-						handlePositionChange("positionV", {
-							relativeFrom: vPosition.relativeFrom,
-							posOffset: val
-						});
-					}
-				})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("docs-drawing-ui.image-position.bellow") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
-					disabled,
-					value: String(vPosition.relativeFrom),
-					options: VERTICAL_RELATIVE_FROM,
-					onChange: handleVerticalRelativeFromChange
-				})] })]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-text-gray-600 dark:!univer-text-gray-200",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("docs-drawing-ui.image-position.options") })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
-				disabled,
-				checked: followTextMove,
-				onChange: handleFollowTextMoveCheck,
-				children: localeService.t("docs-drawing-ui.image-position.moveObjectWithText")
-			}) })
-		]
-	});
-};
-
-//#endregion
-//#region src/views/doc-image-panel/DocDrawingTextWrap.tsx
-const MIN_MARGIN = 0;
-const MAX_MARGIN = 100;
-const DocDrawingTextWrap = (props) => {
-	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
-	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
-	const drawingManagerService = (0, _univerjs_ui.useDependency)(_univerjs_drawing.IDrawingManagerService);
-	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService);
-	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
-	const { drawings } = props;
-	const drawingParam = drawings[0];
-	if (drawingParam == null) return null;
-	const { unitId } = drawingParam;
-	const documentDataModel = univerInstanceService.getUniverDocInstance(unitId);
-	const renderObject = renderManagerService.getRenderById(unitId);
-	if ((renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene) == null) return null;
-	const [disableWrapText, setDisableWrapText] = (0, react.useState)(true);
-	const [disableDistTB, setDisableDistTB] = (0, react.useState)(true);
-	const [disableDistLR, setDisableDistLR] = (0, react.useState)(true);
-	const [wrappingStyle, setWrappingStyle] = (0, react.useState)("inline");
-	const [wrapText, setWrapText] = (0, react.useState)("");
-	const [distToText, setDistToText] = (0, react.useState)({
-		distT: 0,
-		distL: 0,
-		distB: 0,
-		distR: 0
-	});
-	const [showPanel, setShowPanel] = (0, react.useState)(true);
-	function handleWrappingStyleChange(value) {
-		setWrappingStyle(value);
-		const focusDrawings = drawingManagerService.getFocusDrawings();
-		if (focusDrawings.length === 0) return;
-		const { unitId, subUnitId } = focusDrawings[0];
-		const drawings = focusDrawings.map(({ unitId, subUnitId, drawingId }) => ({
-			unitId,
-			subUnitId,
-			drawingId
-		}));
-		commandService.executeCommand(UpdateDocDrawingWrappingStyleCommand.id, {
+		const { cursorList, contentBoxPointGroup } = new _univerjs_docs_ui.NodePositionConvertToCursor(docObject.document.getOffsetConfig(), skeleton).getRangePointData(positionWithIsBack, positionWithIsBack);
+		const { startOffset } = (_getOneTextSelectionR = (0, _univerjs_docs_ui.getOneTextSelectionRange)(cursorList)) !== null && _getOneTextSelectionR !== void 0 ? _getOneTextSelectionR : {};
+		if (startOffset == null) return;
+		return {
+			offset: startOffset,
+			contentBoxPointGroup,
+			segmentId,
+			segmentPage: segmentPageIndex
+		};
+	}
+	_getDrawingAnchor(drawing, object) {
+		var _this$_renderManagerS2, _glyphAnchor$parent, _column$lines$find, _column$parent, _tableCellContext$hos, _getOneTextSelectionR2;
+		const currentRender = this._renderManagerService.getRenderById(drawing.unitId);
+		const skeleton = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+		const skeletonData = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getSkeletonData();
+		if (skeletonData == null || currentRender == null) return;
+		const { pages, skeHeaders, skeFooters } = skeletonData;
+		const { mainComponent, scene } = currentRender;
+		const documentComponent = mainComponent;
+		const activeViewport = scene.getViewports()[0];
+		const { pageLayoutType = _univerjs_engine_render.PageLayoutType.VERTICAL, pageMarginLeft, pageMarginTop, docsLeft, docsTop } = documentComponent.getOffsetConfig();
+		const { left, top, angle } = object;
+		let { width, height } = object;
+		const { positionV, positionH } = drawing.docTransform;
+		const { width: maxWidth, height: maxHeight } = this._getPageContentSize(drawing);
+		width = Math.min(width, maxWidth);
+		height = Math.min(height, maxHeight);
+		let glyphAnchor = null;
+		let segmentId = "";
+		let segmentPage = -1;
+		const isBack = false;
+		const docTransform = {
+			...drawing.docTransform,
+			size: {
+				width,
+				height
+			},
+			angle
+		};
+		const { x, y } = scene.getViewportScrollXY(activeViewport);
+		const coord = this._getTransformCoordForDocumentOffset(documentComponent, activeViewport, left - x, top - y);
+		if (coord == null) return;
+		const docSelectionRenderService = (_this$_renderManagerS2 = this._renderManagerService.getRenderById(drawing.unitId)) === null || _this$_renderManagerS2 === void 0 ? void 0 : _this$_renderManagerS2.with(_univerjs_docs_ui.DocSelectionRenderService);
+		if (docSelectionRenderService == null) return;
+		const nodeInfo = skeleton === null || skeleton === void 0 ? void 0 : skeleton.findNodeByCoord(coord, pageLayoutType, pageMarginLeft, pageMarginTop, {
+			strict: false,
+			segmentId: docSelectionRenderService.getSegment(),
+			segmentPage: docSelectionRenderService.getSegmentPage()
+		});
+		if (nodeInfo) {
+			const { node, segmentPage: segmentPageIndex, segmentId: nodeSegmentId } = nodeInfo;
+			glyphAnchor = node;
+			segmentPage = segmentPageIndex;
+			segmentId = nodeSegmentId;
+		}
+		if (glyphAnchor == null) return;
+		const line = (_glyphAnchor$parent = glyphAnchor.parent) === null || _glyphAnchor$parent === void 0 ? void 0 : _glyphAnchor$parent.parent;
+		const column = line === null || line === void 0 ? void 0 : line.parent;
+		const paragraphStartLine = (_column$lines$find = column === null || column === void 0 ? void 0 : column.lines.find((l) => l.paragraphIndex === (line === null || line === void 0 ? void 0 : line.paragraphIndex) && l.paragraphStart)) !== null && _column$lines$find !== void 0 ? _column$lines$find : column === null || column === void 0 ? void 0 : column.lines[0];
+		const page = column === null || column === void 0 || (_column$parent = column.parent) === null || _column$parent === void 0 ? void 0 : _column$parent.parent;
+		if (line == null || column == null || paragraphStartLine == null || page == null) return;
+		this._liquid.reset();
+		const tableCellContext = page.type === _univerjs_engine_render.DocumentSkeletonPageType.CELL ? getDocsTableCellAnchorContext(drawing.unitId, page) : null;
+		const anchorPage = (_tableCellContext$hos = tableCellContext === null || tableCellContext === void 0 ? void 0 : tableCellContext.hostPage) !== null && _tableCellContext$hos !== void 0 ? _tableCellContext$hos : page;
+		const pageType = anchorPage.type;
+		for (const p of pages) {
+			const { headerId, footerId, pageHeight, pageWidth, marginLeft, marginBottom } = p;
+			const pIndex = pages.indexOf(p);
+			if (segmentPage > -1 && pIndex === segmentPage) {
+				switch (pageType) {
+					case _univerjs_engine_render.DocumentSkeletonPageType.HEADER: {
+						var _skeHeaders$get;
+						const headerSke = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(pageWidth);
+						if (headerSke) this._liquid.translatePagePadding({
+							marginTop: headerSke.marginTop,
+							marginLeft
+						});
+						else throw new Error("header skeleton not found");
+						break;
+					}
+					case _univerjs_engine_render.DocumentSkeletonPageType.FOOTER: {
+						var _skeFooters$get;
+						const footerSke = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(pageWidth);
+						if (footerSke) this._liquid.translatePagePadding({
+							marginTop: pageHeight - marginBottom + footerSke.marginTop,
+							marginLeft
+						});
+						else throw new Error("footer skeleton not found");
+						break;
+					}
+					default:
+						this._liquid.translatePagePadding(p);
+						break;
+				}
+				break;
+			}
+			this._liquid.translatePagePadding(p);
+			if (p === anchorPage) break;
+			this._liquid.restorePagePadding(p);
+			this._liquid.translatePage(p, pageLayoutType, pageMarginLeft, pageMarginTop);
+		}
+		if (tableCellContext) this._liquid.translate(tableCellContext.offset.left, tableCellContext.offset.top);
+		if (positionV.relativeFrom === _univerjs_core.ObjectRelativeFromV.LINE) glyphAnchor = line.divides[0].glyphGroup[0];
+		else {
+			var _paragraphStartLine$d, _paragraphStartLine$d2;
+			glyphAnchor = (_paragraphStartLine$d = (_paragraphStartLine$d2 = paragraphStartLine.divides) === null || _paragraphStartLine$d2 === void 0 || (_paragraphStartLine$d2 = _paragraphStartLine$d2[0]) === null || _paragraphStartLine$d2 === void 0 || (_paragraphStartLine$d2 = _paragraphStartLine$d2.glyphGroup) === null || _paragraphStartLine$d2 === void 0 ? void 0 : _paragraphStartLine$d2[0]) !== null && _paragraphStartLine$d !== void 0 ? _paragraphStartLine$d : glyphAnchor;
+		}
+		docTransform.positionH = {
+			relativeFrom: positionH.relativeFrom,
+			posOffset: left - this._liquid.x - docsLeft
+		};
+		switch (positionH.relativeFrom) {
+			case _univerjs_core.ObjectRelativeFromH.MARGIN:
+				docTransform.positionH.posOffset = left - this._liquid.x - docsLeft - page.marginLeft;
+				break;
+			case _univerjs_core.ObjectRelativeFromH.COLUMN:
+				docTransform.positionH.posOffset = left - this._liquid.x - docsLeft - column.left;
+				break;
+		}
+		docTransform.positionV = {
+			relativeFrom: positionV.relativeFrom,
+			posOffset: top - this._liquid.y - docsTop
+		};
+		switch (positionV.relativeFrom) {
+			case _univerjs_core.ObjectRelativeFromV.PAGE:
+				docTransform.positionV.posOffset = top - this._liquid.y - docsTop - page.marginTop;
+				break;
+			case _univerjs_core.ObjectRelativeFromV.LINE:
+				docTransform.positionV.posOffset = top - this._liquid.y - docsTop - line.top;
+				break;
+			case _univerjs_core.ObjectRelativeFromV.PARAGRAPH:
+				docTransform.positionV.posOffset = top - this._liquid.y - docsTop - paragraphStartLine.top;
+				break;
+		}
+		if (glyphAnchor == null) return;
+		const nodePosition = skeleton === null || skeleton === void 0 ? void 0 : skeleton.findPositionByGlyph(glyphAnchor, segmentPage);
+		const docObject = this._getDocObject();
+		if (nodePosition == null || skeleton == null || docObject == null) return;
+		const positionWithIsBack = {
+			...nodePosition,
+			isBack
+		};
+		const { cursorList } = new _univerjs_docs_ui.NodePositionConvertToCursor(docObject.document.getOffsetConfig(), skeleton).getRangePointData(positionWithIsBack, positionWithIsBack);
+		const { startOffset } = (_getOneTextSelectionR2 = (0, _univerjs_docs_ui.getOneTextSelectionRange)(cursorList)) !== null && _getOneTextSelectionR2 !== void 0 ? _getOneTextSelectionR2 : {};
+		if (startOffset == null) return;
+		return {
+			offset: startOffset,
+			docTransform,
+			segmentId,
+			segmentPage
+		};
+	}
+	_updateDrawingSize(drawingCache, object) {
+		const drawings = [];
+		const { drawing, width: oldWidth, height: oldHeight, angle: oldAngle } = drawingCache;
+		const { unitId, subUnitId } = drawing;
+		let { width, height, angle } = object;
+		const { width: maxWidth, height: maxHeight } = this._getPageContentSize(drawing);
+		width = Math.min(maxWidth, width);
+		height = Math.min(maxHeight, height);
+		if (width !== oldWidth || height !== oldHeight) drawings.push({
+			drawingId: drawing.drawingId,
+			key: "size",
+			value: {
+				width,
+				height
+			}
+		});
+		if (angle !== oldAngle) drawings.push({
+			drawingId: drawing.drawingId,
+			key: "angle",
+			value: angle
+		});
+		if (drawings.length > 0 && unitId && subUnitId) this._commandService.executeCommand(UpdateDrawingDocTransformCommand.id, {
 			unitId,
 			subUnitId,
-			drawings,
-			wrappingStyle: value
+			drawings
 		});
 	}
-	function handleWrapTextChange(value) {
-		setWrapText(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(UpdateDocDrawingWrapTextCommand.id, {
-			unitId: focusDrawings[0].unitId,
-			subUnitId: focusDrawings[0].unitId,
-			drawings,
-			wrapText: value
+	_moveInlineDrawing(drawing, offsetX, offsetY) {
+		const anchor = this._getInlineDrawingAnchor(drawing, offsetX, offsetY);
+		const { offset, segmentId, segmentPage } = anchor !== null && anchor !== void 0 ? anchor : {};
+		return this._commandService.executeCommand(IMoveInlineDrawingCommand.id, {
+			unitId: drawing.unitId,
+			subUnitId: drawing.unitId,
+			drawing,
+			offset,
+			segmentId,
+			segmentPage,
+			needRefreshDrawings: offset == null
 		});
 	}
-	function handleDistToTextChange(value, direction) {
-		if (value == null) return;
-		setDistToText({
-			...distToText,
-			[direction]: 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(UpdateDocDrawingDistanceCommand.id, {
-			unitId: focusDrawings[0].unitId,
-			subUnitId: focusDrawings[0].unitId,
-			drawings,
-			dist: { [direction]: value }
+	_limitDrawingInPage(drawing, object) {
+		const currentRender = this._renderManagerService.getRenderById(drawing.unitId);
+		const { left, top, width, height, angle } = object;
+		const skeleton = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+		const skeletonData = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getSkeletonData();
+		const { pages } = skeletonData !== null && skeletonData !== void 0 ? skeletonData : {};
+		if (skeletonData == null || currentRender == null || pages == null) return {
+			left,
+			top,
+			width,
+			height,
+			angle
+		};
+		const { mainComponent } = currentRender;
+		const { top: docsTop, pageLayoutType, pageMarginLeft, pageMarginTop } = mainComponent;
+		let newTop = top;
+		this._liquid.reset();
+		for (const page of pages) {
+			const { marginBottom, pageHeight } = page;
+			const nextPage = pages[pages.indexOf(page) + 1];
+			if (nextPage == null) continue;
+			if (_univerjs_core.Tools.hasIntersectionBetweenTwoRanges(top, top + height, this._liquid.y + docsTop + pageHeight - marginBottom, this._liquid.y + docsTop + pageHeight + pageMarginTop + nextPage.marginTop)) if (top + height / 2 < this._liquid.y + docsTop + pageHeight + pageMarginTop / 2) newTop = Math.min(top, this._liquid.y + docsTop + pageHeight - marginBottom - height);
+			else newTop = Math.max(top, this._liquid.y + docsTop + pageHeight + pageMarginTop + nextPage.marginTop);
+			this._liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
+		}
+		return {
+			left,
+			top: newTop,
+			width,
+			height,
+			angle
+		};
+	}
+	_nonInlineDrawingTransform(drawing, object, isMoving = false) {
+		const objectPosition = drawing.isMultiTransform === _univerjs_core.BooleanNumber.TRUE ? object : this._limitDrawingInPage(drawing, object);
+		if (isMoving && objectPosition.top !== object.top) return;
+		const anchor = this._getDrawingAnchor(drawing, objectPosition);
+		const { offset, docTransform, segmentId, segmentPage } = anchor !== null && anchor !== void 0 ? anchor : {};
+		if (offset == null || docTransform == null) return this._updateMultipleDrawingDocTransform(/* @__PURE__ */ new Map([[drawing.drawingId, object]]));
+		return this._commandService.executeCommand(ITransformNonInlineDrawingCommand.id, {
+			unitId: drawing.unitId,
+			subUnitId: drawing.unitId,
+			drawing,
+			offset,
+			docTransform,
+			segmentId,
+			segmentPage
 		});
 	}
-	function updateFocusDrawingState() {
-		const focusDrawings = drawingManagerService.getFocusDrawings();
-		if (focusDrawings.length === 0) return;
-		updateState(focusDrawings[0]);
+	_getSceneAndTransformerByDrawingSearch(unitId) {
+		if (unitId == null) return;
+		const renderObject = this._renderManagerService.getRenderById(unitId);
+		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+		if (scene == null) return;
+		return {
+			scene,
+			transformer: scene.getTransformerByCreate()
+		};
 	}
-	function updateState(drawingParam) {
-		var _documentDataModel$ge;
-		const drawing = documentDataModel === null || documentDataModel === void 0 || (_documentDataModel$ge = documentDataModel.getSnapshot()) === null || _documentDataModel$ge === void 0 || (_documentDataModel$ge = _documentDataModel$ge.drawings) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge[drawingParam.drawingId];
-		if (drawing == null) return;
-		const { distT = 0, distL = 0, distB = 0, distR = 0, layoutType = _univerjs_core.PositionedObjectLayoutType.INLINE, behindDoc = _univerjs_core.BooleanNumber.FALSE, wrapText = _univerjs_core.WrapTextType.BOTH_SIDES } = drawing;
-		setDistToText({
-			distT,
-			distL,
-			distB,
-			distR
-		});
-		setWrapText(wrapText);
-		setDisableWrapText(layoutType !== _univerjs_core.PositionedObjectLayoutType.WRAP_SQUARE);
-		if (layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE || layoutType === _univerjs_core.PositionedObjectLayoutType.INLINE) setDisableDistTB(true);
-		else setDisableDistTB(false);
-		if (layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE || layoutType === _univerjs_core.PositionedObjectLayoutType.INLINE || layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM) setDisableDistLR(true);
-		else setDisableDistLR(false);
-		if (layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE) if (behindDoc === _univerjs_core.BooleanNumber.TRUE) setWrappingStyle("behindText");
-		else setWrappingStyle("inFrontOfText");
-		else switch (layoutType) {
-			case _univerjs_core.PositionedObjectLayoutType.INLINE:
-				setWrappingStyle("inline");
-				break;
-			case _univerjs_core.PositionedObjectLayoutType.WRAP_SQUARE:
-				setWrappingStyle("wrapSquare");
-				break;
-			case _univerjs_core.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM:
-				setWrappingStyle("wrapTopAndBottom");
-				break;
-			default: throw new Error(`Unsupported layout type: ${layoutType}`);
+	_getTransformCoordForDocumentOffset(document, viewport, evtOffsetX, evtOffsetY) {
+		const { documentTransform } = document.getOffsetConfig();
+		const originCoord = viewport.transformVector2SceneCoord(_univerjs_engine_render.Vector2.FromArray([evtOffsetX, evtOffsetY]));
+		if (!originCoord) return;
+		return documentTransform.clone().invert().applyPoint(originCoord);
+	}
+	_createOrUpdateInlineAnchor(unitId, pointsGroup) {
+		const currentRender = this._renderManagerService.getRenderById(unitId);
+		if (currentRender == null) return;
+		const { mainComponent, scene } = currentRender;
+		const { docsLeft, docsTop } = mainComponent.getOffsetConfig();
+		const { left: boundingLeft, top: boundingTop, height } = (0, _univerjs_docs_ui.getAnchorBounding)(pointsGroup);
+		const left = boundingLeft + docsLeft;
+		const top = boundingTop + docsTop;
+		if (this._anchorShape) {
+			this._anchorShape.transformByState({
+				left,
+				top,
+				height
+			});
+			this._anchorShape.show();
+			return;
 		}
+		const anchor = new _univerjs_engine_render.Rect(INLINE_DRAWING_ANCHOR_KEY_PREFIX + (0, _univerjs_core.generateRandomId)(6), {
+			left,
+			top,
+			height,
+			strokeWidth: 2,
+			stroke: (0, _univerjs_engine_render.getColor)(_univerjs_core.COLORS.darkgray, 1),
+			evented: false
+		});
+		this._anchorShape = anchor;
+		scene.addObject(anchor, _univerjs_docs_ui.TEXT_RANGE_LAYER_INDEX);
 	}
-	(0, react.useEffect)(() => {
-		updateFocusDrawingState();
-		const subscription = drawingManagerService.focus$.subscribe((drawingParams) => {
-			if (drawingParams.length === 0) {
-				setShowPanel(false);
-				return;
+	_getDocObject() {
+		return (0, _univerjs_docs_ui.getDocObject)(this._univerInstanceService, this._renderManagerService);
+	}
+	_getPageContentSize(drawing) {
+		const currentRender = this._renderManagerService.getRenderById(drawing.unitId);
+		const skeleton = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+		const MAX_WIDTH = 500;
+		const MAX_HEIGHT = 500;
+		const skeletonData = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getSkeletonData();
+		if (skeletonData == null || currentRender == null) return {
+			width: MAX_WIDTH,
+			height: MAX_HEIGHT
+		};
+		const { pages } = skeletonData;
+		let page = null;
+		for (const p of pages) {
+			const { skeDrawings } = p;
+			if (skeDrawings.has(drawing.drawingId)) {
+				page = p;
+				break;
 			}
-			setShowPanel(true);
-			updateState(drawingParams[0]);
-		});
-		const mutationListener = commandService.onCommandExecuted(async (command) => {
-			if (command.id === _univerjs_docs.RichTextEditingMutation.id) updateFocusDrawingState();
-		});
-		return () => {
-			subscription.unsubscribe();
-			mutationListener.dispose();
+		}
+		if (page) {
+			const { pageWidth, pageHeight, marginLeft, marginBottom, marginRight, marginTop } = page;
+			return {
+				width: Math.max(MAX_WIDTH, pageWidth - marginLeft - marginRight),
+				height: Math.max(MAX_HEIGHT, pageHeight - marginTop - marginBottom)
+			};
+		} else return {
+			width: MAX_WIDTH,
+			height: MAX_HEIGHT
 		};
-	}, []);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, _univerjs_design.clsx)("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": !showPanel }),
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
-				className: "univer-text-gray-600 dark:!univer-text-gray-200",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("docs-drawing-ui.image-text-wrap.title") })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-text-gray-600 dark:!univer-text-gray-200",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("docs-drawing-ui.image-text-wrap.wrappingStyle") })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.RadioGroup, {
-				value: wrappingStyle,
-				onChange: handleWrappingStyleChange,
-				direction: "vertical",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
-						value: "inline",
-						children: localeService.t("docs-drawing-ui.image-text-wrap.inline")
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
-						value: "wrapSquare",
-						children: localeService.t("docs-drawing-ui.image-text-wrap.square")
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
-						value: "wrapTopAndBottom",
-						children: localeService.t("docs-drawing-ui.image-text-wrap.topAndBottom")
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
-						value: "behindText",
-						children: localeService.t("docs-drawing-ui.image-text-wrap.behindText")
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
-						value: "inFrontOfText",
-						children: localeService.t("docs-drawing-ui.image-text-wrap.inFrontText")
-					})
-				]
-			}) }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-text-gray-600 dark:!univer-text-gray-200",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("docs-drawing-ui.image-text-wrap.wrapText") })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.RadioGroup, {
-				disabled: disableWrapText,
-				value: wrapText,
-				onChange: handleWrapTextChange,
-				direction: "horizontal",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
-						value: _univerjs_core.WrapTextType.BOTH_SIDES,
-						children: localeService.t("docs-drawing-ui.image-text-wrap.bothSide")
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
-						value: _univerjs_core.WrapTextType.LEFT,
-						children: localeService.t("docs-drawing-ui.image-text-wrap.leftOnly")
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
-						value: _univerjs_core.WrapTextType.RIGHT,
-						children: localeService.t("docs-drawing-ui.image-text-wrap.rightOnly")
-					})
-				]
-			}) }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-text-gray-600 dark:!univer-text-gray-200",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("docs-drawing-ui.image-text-wrap.distanceFromText") })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("docs-drawing-ui.image-text-wrap.top") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
-					min: MIN_MARGIN,
-					max: MAX_MARGIN,
-					disabled: disableDistTB,
-					precision: 1,
-					value: distToText.distT,
-					onChange: (val) => {
-						handleDistToTextChange(val, "distT");
-					}
-				})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("docs-drawing-ui.image-text-wrap.left") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
-					min: MIN_MARGIN,
-					max: MAX_MARGIN,
-					disabled: disableDistLR,
-					precision: 1,
-					value: distToText.distL,
-					onChange: (val) => {
-						handleDistToTextChange(val, "distL");
-					}
-				})] })]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("docs-drawing-ui.image-text-wrap.bottom") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
-					min: MIN_MARGIN,
-					max: MAX_MARGIN,
-					disabled: disableDistTB,
-					precision: 1,
-					value: distToText.distB,
-					onChange: (val) => {
-						handleDistToTextChange(val, "distB");
-					}
-				})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("docs-drawing-ui.image-text-wrap.right") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
-					min: MIN_MARGIN,
-					max: MAX_MARGIN,
-					disabled: disableDistLR,
-					precision: 1,
-					value: distToText.distR,
-					onChange: (val) => {
-						handleDistToTextChange(val, "distR");
-					}
-				})] })]
-			})
-		]
-	});
+	}
 };
+DocDrawingTransformerController = __decorate([
+	__decorateParam(0, _univerjs_core.ICommandService),
+	__decorateParam(1, _univerjs_core.IUniverInstanceService),
+	__decorateParam(2, _univerjs_drawing.IDrawingManagerService),
+	__decorateParam(3, _univerjs_engine_render.IRenderManagerService)
+], DocDrawingTransformerController);
 
 //#endregion
-//#region src/views/doc-image-panel/DocDrawingPanel.tsx
-const DocDrawingPanel = () => {
-	const drawingManagerService = (0, _univerjs_ui.useDependency)(_univerjs_drawing.IDrawingManagerService);
-	const [drawings, setDrawings] = (0, react.useState)(drawingManagerService.getFocusDrawings());
-	(0, react.useEffect)(() => {
-		const focusDispose = drawingManagerService.focus$.subscribe((drawings) => {
-			setDrawings(drawings);
-		});
-		return () => {
-			focusDispose.unsubscribe();
-		};
-	}, []);
-	return !!(drawings === null || drawings === void 0 ? void 0 : drawings.length) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "univer-text-sm",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_drawing_ui.DrawingCommonPanel, {
-				drawings,
-				hasAlign: false,
-				hasCropper: true,
-				hasGroup: false,
-				hasTransform: false
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DocDrawingTextWrap, { drawings }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DocDrawingPosition, { drawings })
-		]
-	});
+//#region src/menu/schema.ts
+const menuSchema = {
+	[_univerjs_ui.RibbonInsertGroup.MEDIA]: { [DOCS_IMAGE_MENU_ID]: {
+		order: 0,
+		menuItemFactory: ImageMenuFactory,
+		[IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+			order: 0,
+			menuItemFactory: UploadFloatImageMenuFactory
+		}
+	} },
+	[_univerjs_ui.ContextMenuPosition.PARAGRAPH]: {
+		[_univerjs_ui.ContextMenuGroup.LAYOUT]: { [_univerjs_docs_ui.INSERT_BELLOW_MENU_ID]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+			order: 5,
+			menuItemFactory: UploadFloatImageMenuFactory
+		} } },
+		[_univerjs_docs_ui.EMPTY_PARAGRAPH_MENU_ID]: { [_univerjs_ui.ContextMenuGroup.LAYOUT]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+			order: 5,
+			menuItemFactory: UploadFloatImageMenuFactory
+		} } },
+		[_univerjs_docs_ui.DOC_CONTENT_INSERT_MENU_ID]: { [_univerjs_ui.ContextMenuGroup.LAYOUT]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+			order: 5,
+			menuItemFactory: UploadFloatImageMenuFactory
+		} } },
+		[_univerjs_docs_ui.DOC_PARAGRAPH_T_INSERT_MENU_ID]: { insert: {
+			[IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+				order: 1,
+				menuItemFactory: UploadFloatImageMenuFactory
+			},
+			[DOCS_SHAPE_MENU_ID]: {
+				order: 2,
+				menuItemFactory: ShapeMenuFactory
+			}
+		} },
+		[_univerjs_docs_ui.DOC_PARAGRAPH_T_INSERT_BELOW_MENU_ID]: { insert: {
+			[`${IMAGE_MENU_UPLOAD_FLOAT_ID}.below`]: {
+				order: 1,
+				menuItemFactory: UploadFloatImageBelowMenuFactory
+			},
+			[DOCS_SHAPE_BELOW_MENU_ID]: {
+				order: 2,
+				menuItemFactory: ShapeBelowMenuFactory
+			}
+		} },
+		[DOCS_SHAPE_MENU_ID]: { shapes: {
+			order: 0,
+			[InsertDocRectangleShapeCommand.id]: {
+				order: 0,
+				menuItemFactory: InsertRectangleShapeMenuFactory
+			},
+			[InsertDocEllipseShapeCommand.id]: {
+				order: 1,
+				menuItemFactory: InsertEllipseShapeMenuFactory
+			}
+		} },
+		[DOCS_SHAPE_BELOW_MENU_ID]: { shapes: {
+			order: 0,
+			[`${InsertDocRectangleShapeCommand.id}.below`]: {
+				order: 0,
+				menuItemFactory: InsertRectangleShapeBelowMenuFactory
+			},
+			[`${InsertDocEllipseShapeCommand.id}.below`]: {
+				order: 1,
+				menuItemFactory: InsertEllipseShapeBelowMenuFactory
+			}
+		} }
+	}
 };
 
 //#endregion
@@ -3304,7 +3643,7 @@ const DeleteDrawingsShortcutItem = {
 };
 
 //#endregion
-//#region src/controllers/doc-drawing.controller.ts
+//#region src/controllers/ui.controller.ts
 /**
 * Copyright 2023-present DreamNum Co., Ltd.
 *
@@ -3321,24 +3660,22 @@ const DeleteDrawingsShortcutItem = {
 * limitations under the License.
 */
 let DocDrawingUIController = class DocDrawingUIController extends _univerjs_core.Disposable {
-	constructor(_componentManager, _menuManagerService, _commandService, _shortcutService) {
+	constructor(_menuManagerService, _commandService, _shortcutService) {
 		super();
-		this._componentManager = _componentManager;
 		this._menuManagerService = _menuManagerService;
 		this._commandService = _commandService;
 		this._shortcutService = _shortcutService;
 		this._init();
 	}
-	_initCustomComponents() {
-		const componentManager = this._componentManager;
-		this.disposeWithMe(componentManager.register(COMPONENT_DOC_DRAWING_PANEL, DocDrawingPanel));
-	}
+	_initCustomComponents() {}
 	_initMenus() {
 		this._menuManagerService.mergeMenu(menuSchema);
 	}
 	_initCommands() {
 		[
 			InsertDocImageCommand,
+			InsertDocRectangleShapeCommand,
+			InsertDocEllipseShapeCommand,
 			InsertDocDrawingCommand,
 			UpdateDocDrawingWrappingStyleCommand,
 			UpdateDocDrawingDistanceCommand,
@@ -3376,10 +3713,9 @@ let DocDrawingUIController = class DocDrawingUIController extends _univerjs_core
 	}
 };
 DocDrawingUIController = __decorate([
-	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)),
-	__decorateParam(1, _univerjs_ui.IMenuManagerService),
-	__decorateParam(2, _univerjs_core.ICommandService),
-	__decorateParam(3, _univerjs_ui.IShortcutService)
+	__decorateParam(0, _univerjs_ui.IMenuManagerService),
+	__decorateParam(1, _univerjs_core.ICommandService),
+	__decorateParam(2, _univerjs_ui.IShortcutService)
 ], DocDrawingUIController);
 
 //#endregion
@@ -3571,6 +3907,7 @@ let UniverDocsDrawingUIPlugin = class UniverDocsDrawingUIPlugin extends _univerj
 	}
 	onStarting() {
 		[
+			[ComponentsController],
 			[DocDrawingUIController],
 			[DocDrawingPopupMenuController],
 			[DocDrawingTransformerController],
@@ -3579,6 +3916,7 @@ let UniverDocsDrawingUIPlugin = class UniverDocsDrawingUIPlugin extends _univerj
 			[DocFloatDomController],
 			[DocDrawingPrintingController]
 		].forEach((dependency) => this._injector.add(dependency));
+		this._injector.get(ComponentsController);
 	}
 	onReady() {
 		[[DocDrawingUpdateRenderController], [DocDrawingTransformUpdateController]].forEach((m) => this._renderManagerSrv.registerRenderModule(_univerjs_core.UniverInstanceType.UNIVER_DOC, m));
@@ -3606,6 +3944,8 @@ UniverDocsDrawingUIPlugin = __decorate([
 //#endregion
 exports.ClearDocDrawingTransformerOperation = ClearDocDrawingTransformerOperation;
 exports.DOCS_IMAGE_MENU_ID = DOCS_IMAGE_MENU_ID;
+exports.DOCS_SHAPE_BELOW_MENU_ID = DOCS_SHAPE_BELOW_MENU_ID;
+exports.DOCS_SHAPE_MENU_ID = DOCS_SHAPE_MENU_ID;
 exports.DeleteDocDrawingsCommand = DeleteDocDrawingsCommand;
 exports.DocDrawingPosition = DocDrawingPosition;
 exports.DocDrawingTextWrap = DocDrawingTextWrap;
@@ -3618,7 +3958,9 @@ Object.defineProperty(exports, 'DocFloatDomController', {
 exports.EditDocDrawingOperation = EditDocDrawingOperation;
 exports.GroupDocDrawingCommand = GroupDocDrawingCommand;
 exports.InsertDocDrawingCommand = InsertDocDrawingCommand;
+exports.InsertDocEllipseShapeCommand = InsertDocEllipseShapeCommand;
 exports.InsertDocImageCommand = InsertDocImageCommand;
+exports.InsertDocRectangleShapeCommand = InsertDocRectangleShapeCommand;
 exports.MoveDocDrawingsCommand = MoveDocDrawingsCommand;
 exports.RemoveDocDrawingCommand = RemoveDocDrawingCommand;
 exports.SetDocDrawingArrangeCommand = SetDocDrawingArrangeCommand;