@univerjs/docs-drawing-ui 1.0.4 → 1.2.0

package/lib/cjs/index.js

@@ -272,7 +272,7 @@ const UngroupDocDrawingCommand = {
 };
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -283,7 +283,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -296,14 +296,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.153.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.149.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -325,6 +325,60 @@ var DocRefreshDrawingsService = class {
 	}
 };
 
+//#endregion
+//#region src/utils/drawing-text-anchor.ts
+/** Locate the persisted object character without consulting the active text selection. */
+function findDrawingTextAnchor(snapshot, drawingId) {
+	const segments = [
+		{
+			segmentId: "",
+			body: snapshot.body
+		},
+		...Object.entries(snapshot.headers ?? {}).map(([segmentId, segment]) => ({
+			segmentId,
+			body: segment.body
+		})),
+		...Object.entries(snapshot.footers ?? {}).map(([segmentId, segment]) => ({
+			segmentId,
+			body: segment.body
+		})),
+		...Object.entries(snapshot.notes ?? {}).map(([segmentId, segment]) => ({
+			segmentId,
+			body: segment.body
+		}))
+	];
+	for (const { segmentId, body } of segments) {
+		var _body$customBlocks;
+		const block = body === null || body === void 0 || (_body$customBlocks = body.customBlocks) === null || _body$customBlocks === void 0 ? void 0 : _body$customBlocks.find((item) => item.blockId === drawingId);
+		if (block) return {
+			offset: block.startIndex,
+			segmentId
+		};
+	}
+	return null;
+}
+/** Preserve keyboard/clipboard object ranges while replacing floating selection paint with an anchor icon. */
+function getDrawingTextRanges(snapshot, drawingIds) {
+	return drawingIds.flatMap((drawingId) => {
+		var _findDocDrawing;
+		const anchor = findDrawingTextAnchor(snapshot, drawingId);
+		if (!anchor) return [];
+		const drawing = (_findDocDrawing = (0, _univerjs_docs_drawing.findDocDrawing)(snapshot, drawingId)) === null || _findDocDrawing === void 0 ? void 0 : _findDocDrawing.drawing;
+		const floating = drawing && drawing.layoutType !== _univerjs_core.PositionedObjectLayoutType.INLINE;
+		return [{
+			startOffset: anchor.offset,
+			endOffset: anchor.offset + 1,
+			segmentId: anchor.segmentId,
+			...floating ? { style: {
+				fill: "transparent",
+				stroke: "transparent",
+				strokeActive: "transparent",
+				strokeWidth: 1
+			} } : {}
+		}];
+	});
+}
+
 //#endregion
 //#region src/controllers/render-controllers/doc-drawing-crop.ts
 function getDocImageCropUpdates(param, docDrawing, renderDrawing) {
@@ -407,7 +461,7 @@ function getDocMutationAffectedDrawingIds(actions) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -415,7 +469,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.153.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);
@@ -719,7 +773,7 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 					const fadeBody = isDocInteractionFocusing && drawing.isMultiTransform !== _univerjs_core.BooleanNumber.TRUE;
 					shape.setOpacity(fadeBody ? .5 : 1);
 				} catch {}
-				if (!isDocInteractionFocusing) continue;
+				if (!isDocInteractionFocusing && !this._context.isMainScene) continue;
 				if (isEditBody && drawing.isMultiTransform !== _univerjs_core.BooleanNumber.TRUE || !isEditBody && drawing.isMultiTransform === _univerjs_core.BooleanNumber.TRUE) {
 					this._attachTransformerIfEditable(shape, editable, drawing.allowTransform);
 					try {
@@ -844,17 +898,7 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 	}
 	_setDrawingSelections(params) {
 		const { unit } = this._context;
-		const ranges = params.flatMap((item) => {
-			var _unit$getSelfOrHeader, _body$customBlocks;
-			const segmentId = (0, _univerjs_docs.getDocumentDrawingSegmentId)(unit, item.drawingId);
-			const body = (_unit$getSelfOrHeader = unit.getSelfOrHeaderFooterModel(segmentId)) === null || _unit$getSelfOrHeader === void 0 ? void 0 : _unit$getSelfOrHeader.getBody();
-			const block = body === null || body === void 0 || (_body$customBlocks = body.customBlocks) === null || _body$customBlocks === void 0 ? void 0 : _body$customBlocks.find((block) => block.blockId === item.drawingId);
-			return block ? [{
-				startOffset: block.startIndex,
-				endOffset: block.startIndex + 1,
-				segmentId
-			}] : [];
-		});
+		const ranges = getDrawingTextRanges(unit.getSnapshot(), params.map(({ drawingId }) => drawingId));
 		this._docSelectionManagerService.replaceDocRanges(ranges);
 	}
 };
@@ -993,7 +1037,7 @@ const MoveDocDrawingsCommand = {
 			const anchorLookup = skeletonData == null ? {
 				anchor: null,
 				previewOnly: false
-			} : findDrawingAnchor(skeletonData, drawingId);
+			} : findDrawingAnchor$1(skeletonData, drawingId);
 			if (anchorLookup.previewOnly) return null;
 			const { anchor } = anchorLookup;
 			const offsets = anchor == null ? {
@@ -1028,7 +1072,7 @@ const MoveDocDrawingsCommand = {
 		return Boolean(result);
 	}
 };
-function findDrawingAnchor(skeletonData, drawingId) {
+function findDrawingAnchor$1(skeletonData, drawingId) {
 	let foundInPreview = false;
 	for (const page of skeletonData.pages) {
 		var _skeletonData$skeHead, _skeletonData$skeFoot;
@@ -1762,7 +1806,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-drawing-ui";
-var version = "1.0.4";
+var version = "1.2.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -1787,1351 +1831,1572 @@ 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)) return null;
-	const drawings = [];
-	const cursor = _univerjs_core.JSON1.type.readCursor(actions);
-	cursor.traverse(null, () => {
-		const path = cursor.getPath();
-		if (path.length !== 2 || path[0] !== "drawings" || typeof path[1] !== "string") return;
-		const component = cursor.getComponent();
-		if ((component === null || component === void 0 ? void 0 : component.r) !== void 0) drawings.push({
-			type: "remove",
-			drawingId: path[1]
+//#region src/controllers/render-controllers/doc-drawing-transform-update.controller.ts
+function mergePublishedDrawing(drawings, next) {
+	const current = drawings[next.drawingId];
+	if (current == null) {
+		drawings[next.drawingId] = next;
+		return;
+	}
+	if (next.selectable && !current.selectable) {
+		current.selectable = true;
+		current.transform = next.transform;
+	}
+	if (next.isMultiTransform === _univerjs_core.BooleanNumber.TRUE) current.transforms.push(next.transform);
+}
+function isSameTransformValue(left, right) {
+	return left === right || JSON.stringify(left) === JSON.stringify(right);
+}
+function shouldRefreshDocDrawingTransform(current, next) {
+	if (!current || next.customBlockRenderViewport != null) return true;
+	return !isSameTransformValue(current.transform, next.transform) || !isSameTransformValue(current.transforms, next.transforms) || current.isMultiTransform !== next.isMultiTransform || current.hidden !== next.hidden || current.behindText !== next.behindText || current.selectable !== next.selectable;
+}
+/**
+* Overlay drawings do not participate in text layout. While their skeleton
+* anchor remains valid, use the latest model transform so drag/resize/front-
+* behind changes can paint immediately without rebuilding document pages.
+*/
+function getDocsOverlayRuntimeDrawing(skeletonDrawing, currentDrawing, measuredSize) {
+	if (skeletonDrawing.layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE && (currentDrawing === null || currentDrawing === void 0 ? void 0 : currentDrawing.layoutType) === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE) return currentDrawing;
+	return measuredSize ? {
+		...skeletonDrawing,
+		docTransform: {
+			...skeletonDrawing.docTransform,
+			size: measuredSize
+		}
+	} : skeletonDrawing;
+}
+var DocDrawingPublicationTracker = class {
+	constructor() {
+		_defineProperty(this, "_generation", -1);
+		_defineProperty(this, "_publishedPageCount", 0);
+		_defineProperty(this, "_drawingOccurrenceCount", 0);
+	}
+	reset() {
+		this._generation = -1;
+		this._publishedPageCount = 0;
+		this._drawingOccurrenceCount = 0;
+	}
+	shouldRefresh(skeleton, progress) {
+		if (!progress.didPublish && !progress.complete) return false;
+		const isNewGeneration = progress.generation !== this._generation;
+		if (isNewGeneration) {
+			this._generation = progress.generation;
+			this._publishedPageCount = 0;
+			this._drawingOccurrenceCount = 0;
+		}
+		const skeletonData = skeleton.getSkeletonData();
+		if (skeletonData == null) return false;
+		const previousPublishedPageCount = this._publishedPageCount;
+		const publishedPageCount = Math.min(progress.publishedPageCount, skeletonData.pages.length);
+		this._publishedPageCount = Math.max(previousPublishedPageCount, publishedPageCount);
+		const drawingOccurrenceCount = countPublishedDrawingOccurrences(skeletonData, publishedPageCount);
+		const didDrawingOccurrencesChange = !(isNewGeneration && progress.reason === "edit") && drawingOccurrenceCount !== this._drawingOccurrenceCount;
+		this._drawingOccurrenceCount = drawingOccurrenceCount;
+		if (progress.complete || progress.didPublishAnchor || didDrawingOccurrencesChange) return true;
+		if (isNewGeneration && progress.reason === "edit") return false;
+		return hasNewPublishedPageDrawings(skeletonData, previousPublishedPageCount, publishedPageCount);
+	}
+};
+function getDocsDrawingPageClipBounds(config) {
+	const { docsLeft, docsTop, pageOffsetLeft, pageOffsetTop, clipOffsetLeft = 0, clipOffsetTop = 0, page } = config;
+	if (page.type === _univerjs_engine_render.DocumentSkeletonPageType.CELL && config.drawingLayoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE && config.overflowClipBounds != null) return config.overflowClipBounds;
+	const { pageWidth, pageHeight } = page;
+	if (!Number.isFinite(pageWidth) || !Number.isFinite(pageHeight) || pageWidth <= 0 || pageHeight <= 0) return;
+	const cellInsetLeft = page.type === _univerjs_engine_render.DocumentSkeletonPageType.CELL ? page.marginLeft ?? 0 : 0;
+	const cellInsetTop = page.type === _univerjs_engine_render.DocumentSkeletonPageType.CELL ? page.marginTop ?? 0 : 0;
+	return {
+		left: docsLeft + pageOffsetLeft + clipOffsetLeft - cellInsetLeft,
+		top: docsTop + pageOffsetTop + clipOffsetTop - cellInsetTop,
+		width: pageWidth,
+		height: pageHeight
+	};
+}
+function getDocsDrawingClipPage(config) {
+	const { drawing, hostPage, page } = config;
+	if (hostPage && (page.type === _univerjs_engine_render.DocumentSkeletonPageType.HEADER || page.type === _univerjs_engine_render.DocumentSkeletonPageType.FOOTER)) return hostPage;
+	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.align != null) return 0;
+	if (positionH.posOffset != null) return positionH.posOffset;
+	return positionH.percent ? positionH.percent * hostPage.pageWidth : 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.align != null) return 0;
+	if (positionV.posOffset != null) return positionV.posOffset;
+	return positionV.percent ? positionV.percent * hostPage.pageHeight : 0;
+}
+function getDocsPageRelativeDrawingAnchorPage(config) {
+	const { page, clipPage, hostPage } = config;
+	if (config.drawingLayoutType === _univerjs_core.PositionedObjectLayoutType.INLINE) return;
+	if (hostPage != null && hostPage === clipPage) return hostPage;
+	if (hostPage == null && page === clipPage && page.type !== _univerjs_engine_render.DocumentSkeletonPageType.CELL) 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) {
+	return viewport != null && (viewport.leadingInsetLeft ?? 0) + viewport.contentWidth + (viewport.trailingInsetRight ?? 0) > viewport.viewportWidth;
+}
+function hasSkeletonPageDrawings(page) {
+	var _page$notes, _page$skeTables, _page$skeColumnGroups;
+	if (page.skeDrawings.size > 0 || ((_page$notes = page.notes) === null || _page$notes === void 0 ? void 0 : _page$notes.some((note) => hasSkeletonPageDrawings(note.page)))) return true;
+	let hasDrawings = false;
+	(_page$skeTables = page.skeTables) === null || _page$skeTables === void 0 || _page$skeTables.forEach((table) => {
+		table.rows.forEach((row) => {
+			row.cells.forEach((cell) => {
+				if (hasSkeletonPageDrawings(cell)) hasDrawings = true;
+			});
 		});
-		if ((component === null || component === void 0 ? void 0 : component.i) !== void 0) drawings.push({
-			type: "add",
-			drawingId: path[1],
-			drawing: component.i
+	});
+	(_page$skeColumnGroups = page.skeColumnGroups) === null || _page$skeColumnGroups === void 0 || _page$skeColumnGroups.forEach((columnGroup) => {
+		columnGroup.columns.forEach((column) => {
+			if (hasSkeletonPageDrawings(column.page)) hasDrawings = true;
 		});
 	});
-	return drawings.length ? drawings : null;
+	return hasDrawings;
 }
-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;
-		}
+function countSkeletonPageDrawings(page) {
+	var _page$notes2, _page$skeTables2, _page$skeColumnGroups2;
+	let count = page.skeDrawings.size;
+	(_page$notes2 = page.notes) === null || _page$notes2 === void 0 || _page$notes2.forEach((note) => {
+		count += countSkeletonPageDrawings(note.page);
+	});
+	(_page$skeTables2 = page.skeTables) === null || _page$skeTables2 === void 0 || _page$skeTables2.forEach((table) => {
+		table.rows.forEach((row) => {
+			row.cells.forEach((cell) => {
+				count += countSkeletonPageDrawings(cell);
+			});
+		});
+	});
+	(_page$skeColumnGroups2 = page.skeColumnGroups) === null || _page$skeColumnGroups2 === void 0 || _page$skeColumnGroups2.forEach((columnGroup) => {
+		columnGroup.columns.forEach((column) => {
+			count += countSkeletonPageDrawings(column.page);
+		});
+	});
+	return count;
+}
+function countPublishedDrawingOccurrences(skeletonData, publishedPageCount) {
+	let count = 0;
+	for (let index = 0; index < publishedPageCount; index++) {
+		var _skeletonData$skeHead, _skeletonData$skeFoot;
+		const page = skeletonData.pages[index];
+		count += countSkeletonPageDrawings(page);
+		const header = page.headerId == null ? void 0 : (_skeletonData$skeHead = skeletonData.skeHeaders.get(page.headerId)) === null || _skeletonData$skeHead === void 0 ? void 0 : _skeletonData$skeHead.get(page.headerLayoutKey ?? page.pageWidth);
+		if (header != null) count += countSkeletonPageDrawings(header);
+		const footer = page.footerId == null ? void 0 : (_skeletonData$skeFoot = skeletonData.skeFooters.get(page.footerId)) === null || _skeletonData$skeFoot === void 0 ? void 0 : _skeletonData$skeFoot.get(page.footerLayoutKey ?? page.pageWidth);
+		if (footer != null) count += countSkeletonPageDrawings(footer);
 	}
-	return drawingIndexes;
+	return count;
 }
-function collectUpdatedDrawingIds(actions, drawingIds = /* @__PURE__ */ new Set()) {
-	if (_univerjs_core.JSONX.isNoop(actions) || !Array.isArray(actions)) return drawingIds;
-	if (actions[0] === "drawings") {
-		const drawingKeyOrOps = actions[1];
-		if (typeof drawingKeyOrOps === "string") {
-			drawingIds.add(drawingKeyOrOps);
-			return drawingIds;
-		}
-		actions.slice(1).forEach((action) => {
-			if (Array.isArray(action) && typeof action[0] === "string") drawingIds.add(action[0]);
-		});
-		return drawingIds;
+function hasNewPublishedPageDrawings(skeletonData, startPageIndex, publishedPageCount) {
+	for (let index = startPageIndex; index < publishedPageCount; index++) {
+		var _skeletonData$skeHead2, _skeletonData$skeFoot2;
+		const page = skeletonData.pages[index];
+		if (hasSkeletonPageDrawings(page)) return true;
+		const header = page.headerId == null ? void 0 : (_skeletonData$skeHead2 = skeletonData.skeHeaders.get(page.headerId)) === null || _skeletonData$skeHead2 === void 0 ? void 0 : _skeletonData$skeHead2.get(page.headerLayoutKey ?? page.pageWidth);
+		if (header != null && hasSkeletonPageDrawings(header)) return true;
+		const footer = page.footerId == null ? void 0 : (_skeletonData$skeFoot2 = skeletonData.skeFooters.get(page.footerId)) === null || _skeletonData$skeFoot2 === void 0 ? void 0 : _skeletonData$skeFoot2.get(page.footerLayoutKey ?? page.pageWidth);
+		if (footer != null && hasSkeletonPageDrawings(footer)) return true;
 	}
-	actions.forEach((action) => {
-		if (Array.isArray(action)) collectUpdatedDrawingIds(action, drawingIds);
-	});
-	return drawingIds;
+	return false;
 }
-let DocDrawingAddRemoveController = class DocDrawingAddRemoveController extends _univerjs_core.Disposable {
-	constructor(_univerInstanceService, _commandService, _drawingManagerService, _docDrawingService, _renderManagerService, _docRefreshDrawingsService) {
+let DocDrawingTransformUpdateController = class DocDrawingTransformUpdateController extends _univerjs_core.Disposable {
+	constructor(_context, _docSkeletonManagerService, _commandService, _editorService, _drawingManagerService, _docRefreshDrawingsService, _univerInstanceService, _lifecycleService) {
 		super();
-		this._univerInstanceService = _univerInstanceService;
+		this._context = _context;
+		this._docSkeletonManagerService = _docSkeletonManagerService;
 		this._commandService = _commandService;
+		this._editorService = _editorService;
 		this._drawingManagerService = _drawingManagerService;
-		this._docDrawingService = _docDrawingService;
-		this._renderManagerService = _renderManagerService;
 		this._docRefreshDrawingsService = _docRefreshDrawingsService;
+		this._univerInstanceService = _univerInstanceService;
+		this._lifecycleService = _lifecycleService;
+		_defineProperty(this, "_liquid", new _univerjs_engine_render.Liquid());
+		_defineProperty(this, "_changesetDrawingRefreshScheduled", false);
+		_defineProperty(this, "_pendingMultiDrawingSelection", /* @__PURE__ */ new Set());
+		_defineProperty(this, "_pendingMultiDrawingSelectionSubscription", void 0);
+		_defineProperty(this, "_publicationTracker", new DocDrawingPublicationTracker());
 		this._initialize();
+		this._commandExecutedListener();
+		this.disposeWithMe((0, _univerjs_core.toDisposable)(() => this._clearPendingMultiDrawingSelection()));
 	}
 	_initialize() {
-		this._commandExecutedListener();
+		this._initialRenderRefresh();
+		this._drawingInitializeListener();
+		this._initTransformRefresh();
 	}
-	_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]);
-			}
+	_initialRenderRefresh() {
+		this.disposeWithMe(this._docSkeletonManagerService.currentSkeleton$.pipe((0, rxjs.switchMap)((documentSkeleton) => {
+			this._publicationTracker.reset();
+			if (documentSkeleton == null) return rxjs.EMPTY;
+			this._refreshDrawing(documentSkeleton);
+			const positionRefresh$ = (0, rxjs.animationFrames)().pipe((0, rxjs.startWith)(null), (0, rxjs.map)(() => this._context.mainComponent), (0, rxjs.filter)((documentComponent) => documentComponent instanceof _univerjs_engine_render.Documents && documentComponent.left > -1e4 && documentComponent.top > -1e4), (0, rxjs.take)(1), (0, rxjs.switchMap)((documentComponent) => (0, _univerjs_core.fromEventSubject)(documentComponent.onTransformChange$).pipe((0, rxjs.filter)((evt) => evt.type === _univerjs_engine_render.TRANSFORM_CHANGE_OBSERVABLE_TYPE.translate && "left" in evt.value && "left" in evt.preValue && (evt.value.left !== evt.preValue.left || evt.value.top !== evt.preValue.top)), (0, rxjs.map)(() => ({
+				documentSkeleton,
+				progress: null
+			})), (0, rxjs.startWith)({
+				documentSkeleton,
+				progress: null
+			}))));
+			return (0, rxjs.merge)(documentSkeleton.layoutProgress$.pipe((0, rxjs.map)((progress) => ({
+				documentSkeleton,
+				progress
+			}))), documentSkeleton.layoutPageMaterialized$.pipe((0, rxjs.map)(() => ({
+				documentSkeleton,
+				progress: null
+			}))), positionRefresh$);
+		})).subscribe(({ documentSkeleton, progress }) => {
+			if (progress == null || this._publicationTracker.shouldRefresh(documentSkeleton, progress)) this._refreshDrawing(documentSkeleton);
 		}));
-		this.disposeWithMe(this._commandService.beforeCommandExecuted((command) => {
-			if (command.id !== _univerjs_docs_drawing.UpdateDocDrawingWrappingStyleCommand.id) return;
-			this._preserveWrappingStylePosition(command.params);
+		this.disposeWithMe(this._docRefreshDrawingsService.refreshDrawings$.subscribe((skeleton) => {
+			if (skeleton == null) return;
+			this._refreshDrawing(skeleton);
 		}));
-		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
-			if (command.id !== _univerjs_docs.RichTextEditingMutation.id) return;
-			const { unitId, actions } = command.params;
-			let changedNotes = false;
-			if (!_univerjs_core.JSONX.isNoop(actions)) {
-				const cursor = _univerjs_core.JSON1.type.readCursor(actions);
-				cursor.traverse(null, () => {
-					changedNotes ||= cursor.getPath()[0] === "notes";
-				});
+	}
+	_commandExecutedListener() {
+		const updateCommandList = [_univerjs_docs.RichTextEditingMutation.id, _univerjs_docs_ui.SetDocZoomRatioOperation.id];
+		this.disposeWithMe(this._commandService.onCommandExecuted((command, options) => {
+			if (updateCommandList.includes(command.id)) {
+				const params = command.params;
+				const { unitId: commandUnitId } = params;
+				const { unitId } = this._context;
+				if (commandUnitId !== unitId) return;
+				const drawingIds = command.id === _univerjs_docs.RichTextEditingMutation.id ? getDocMutationAffectedDrawingIds(params.actions) : null;
+				if ((drawingIds === null || drawingIds === void 0 ? void 0 : drawingIds.size) === 0) return;
+				if (command.id === _univerjs_docs.RichTextEditingMutation.id && (options === null || options === void 0 ? void 0 : options.fromChangeset)) {
+					this._scheduleChangesetDrawingRefresh();
+					return;
+				}
+				this._refreshCurrentDrawing(drawingIds ?? void 0, command.id === _univerjs_docs.RichTextEditingMutation.id);
 			}
-			if (changedNotes) this._syncNoteDrawings(unitId);
-			if (getReOrderedDrawings(actions).length > 0) this._updateDrawingsOrder(unitId);
-			const updatedDrawingIds = [...collectUpdatedDrawingIds(actions)];
-			if (updatedDrawingIds.length > 0) this._syncDrawingDataFromSnapshot(unitId, updatedDrawingIds);
-		}));
-		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
-			if (command.id !== _univerjs_docs_drawing.UpdateDrawingDocTransformCommand.id && command.id !== _univerjs_docs_drawing.UpdateDocDrawingWrappingStyleCommand.id) return;
-			const { unitId } = command.params;
-			const renderObject = this._renderManagerService.getRenderUnitById(unitId);
-			const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-			if (renderObject == null || scene == null) return;
-			if (command.id === _univerjs_docs_drawing.UpdateDocDrawingWrappingStyleCommand.id) this._docRefreshDrawingsService.refreshDrawings(renderObject.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton());
-			scene.getTransformerByCreate().refreshControls();
-		}));
-		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.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC)) === 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.getRenderUnitById(unitId);
-			const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-			if (renderObject == null || scene == null) return false;
-			this._docRefreshDrawingsService.refreshDrawings(renderObject.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton());
-			scene.getTransformerByCreate().refreshControls();
 		}));
 	}
-	_preserveWrappingStylePosition(params) {
-		if (params.wrappingStyle === _univerjs_docs_drawing.TextWrappingStyle.INLINE) return;
-		const { unitId } = params;
-		const documentDataModel = this._univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
-		const renderObject = this._renderManagerService.getRenderUnitById(unitId);
-		const skeletonManager = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(_univerjs_docs.DocSkeletonManagerService);
-		const skeletonData = skeletonManager === null || skeletonManager === void 0 ? void 0 : skeletonManager.getSkeleton().getSkeletonData();
-		const viewModel = skeletonManager === null || skeletonManager === void 0 ? void 0 : skeletonManager.getViewModel();
-		if (!documentDataModel || !skeletonData || !viewModel) return;
-		const editArea = viewModel.getEditArea();
-		const { pages, skeHeaders, skeFooters } = skeletonData;
-		const oldDrawings = documentDataModel.getDrawings() ?? {};
-		params.drawings = params.drawings.map((drawing) => {
-			const oldDrawing = oldDrawings[drawing.drawingId];
-			if (!oldDrawing) return drawing;
-			let drawingAnchor = null;
-			for (const page of pages) {
-				const { headerId, footerId, marginTop, marginLeft, marginBottom, pageWidth, pageHeight } = page;
-				if (editArea === _univerjs_engine_render.DocumentEditArea.HEADER) {
-					var _skeHeaders$get;
-					const header = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(page.headerLayoutKey ?? pageWidth);
-					if (header) drawingAnchor = findDrawingAnchorInPage(header, drawing.drawingId, header.marginTop, marginLeft);
-				} else if (editArea === _univerjs_engine_render.DocumentEditArea.FOOTER) {
-					var _skeFooters$get;
-					const footer = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(page.footerLayoutKey ?? pageWidth);
-					if (footer) drawingAnchor = findDrawingAnchorInPage(footer, drawing.drawingId, pageHeight - marginBottom + footer.marginTop, marginLeft);
-				} else drawingAnchor = findDrawingAnchorInPage(page, drawing.drawingId, marginTop, marginLeft);
-				if (drawingAnchor) break;
-			}
-			if (!drawingAnchor) return drawing;
-			const oldPositionH = oldDrawing.docTransform.positionH;
-			const oldPositionV = oldDrawing.docTransform.positionV;
-			const { horizontal: posOffsetH, vertical: posOffsetV } = resolveDrawingAnchorOffsets(drawingAnchor, oldPositionH, oldPositionV);
-			return {
-				...oldDrawing,
-				...drawing,
-				docTransform: {
-					...oldDrawing.docTransform,
-					...drawing.docTransform,
-					positionH: {
-						relativeFrom: oldPositionH.relativeFrom,
-						posOffset: posOffsetH
-					},
-					positionV: {
-						relativeFrom: oldPositionV.relativeFrom,
-						posOffset: posOffsetV
-					}
-				}
-			};
+	_scheduleChangesetDrawingRefresh() {
+		if (this._changesetDrawingRefreshScheduled) return;
+		this._changesetDrawingRefreshScheduled = true;
+		queueMicrotask(() => {
+			queueMicrotask(() => {
+				this._changesetDrawingRefreshScheduled = false;
+				if (this._disposed) return;
+				this._refreshCurrentDrawing(void 0, true);
+			});
 		});
 	}
-	_addDrawings(unitId, drawings) {
-		const drawingManagerService = this._drawingManagerService;
-		const docDrawingService = this._docDrawingService;
-		const { subUnitId, redo: op, objects } = this._docDrawingService.getBatchAddOp(drawings.map((drawing) => ({
-			...drawing,
-			unitId,
-			subUnitId: unitId
-		})));
-		drawingManagerService.applyJson1(unitId, subUnitId, op);
-		docDrawingService.applyJson1(unitId, subUnitId, op);
-		drawingManagerService.addNotification(objects);
-		docDrawingService.addNotification(objects);
+	_refreshCurrentDrawing(drawingIds, forceRecreateMultiDrawings = false) {
+		const skeleton = this._docSkeletonManagerService.getSkeleton();
+		if (skeleton == null) return;
+		const { unitId, mainComponent } = this._context;
+		if (this._editorService.isEditor(unitId)) {
+			mainComponent === null || mainComponent === void 0 || mainComponent.makeDirty();
+			return;
+		}
+		this._refreshDrawing(skeleton, drawingIds, forceRecreateMultiDrawings);
 	}
-	_removeDrawings(unitId, drawingIds) {
-		const drawingManagerService = this._drawingManagerService;
-		const docDrawingService = this._docDrawingService;
-		const existingDrawingIds = drawingIds.filter((drawingId) => docDrawingService.getDrawingByParam({
+	_initTransformRefresh() {
+		this.disposeWithMe((0, rxjs.merge)((0, _univerjs_core.fromEventSubject)(this._context.engine.onTransformChange$).pipe((0, rxjs.filter)((evt) => evt.type === _univerjs_engine_render.TRANSFORM_CHANGE_OBSERVABLE_TYPE.resize)), (0, _univerjs_core.fromEventSubject)(this._context.scene.onTransformChange$).pipe((0, rxjs.filter)((evt) => evt.type === _univerjs_engine_render.TRANSFORM_CHANGE_OBSERVABLE_TYPE.scale))).pipe((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, drawingIds, forceRecreateMultiDrawings = false) {
+		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];
+			this._collectPublishedPageDrawingPositions(unitId, page, skeHeaders, skeFooters, docsLeft, docsTop, updateDrawingMap);
+			this._liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
+		}
+		const affectedDrawingIds = this._includeGroupChildren(drawingIds);
+		const updateDrawings = Object.values(updateDrawingMap).filter((drawing) => affectedDrawingIds == null || affectedDrawingIds.has(drawing.drawingId));
+		for (const drawing of updateDrawings) drawing.hidden = false;
+		const staleNonMultiDrawings = this._getStaleNonMultiDrawings(unitId, updateDrawingMap, affectedDrawingIds);
+		const nonMultiDrawings = updateDrawings.filter((drawing) => !drawing.isMultiTransform).concat(staleNonMultiDrawings).filter((drawing) => shouldRefreshDocDrawingTransform(this._drawingManagerService.getDrawingByParam({
 			unitId,
 			subUnitId: unitId,
-			drawingId
-		}));
-		if (existingDrawingIds.length === 0) return;
-		const { subUnitId, redo: op, objects } = this._docDrawingService.getBatchRemoveOp(existingDrawingIds.map((drawingId) => {
-			return {
+			drawingId: drawing.drawingId
+		}), drawing));
+		if (nonMultiDrawings.length > 0) this._drawingManagerService.refreshTransform(nonMultiDrawings);
+		const targetedMultiDrawing = affectedDrawingIds != null && [...affectedDrawingIds].some((drawingId) => {
+			var _updateDrawingMap$dra, _this$_drawingManager;
+			return ((_updateDrawingMap$dra = updateDrawingMap[drawingId]) === null || _updateDrawingMap$dra === void 0 ? void 0 : _updateDrawingMap$dra.isMultiTransform) === _univerjs_core.BooleanNumber.TRUE || ((_this$_drawingManager = this._drawingManagerService.getDrawingByParam({
 				unitId,
 				subUnitId: unitId,
 				drawingId
-			};
-		}));
-		drawingManagerService.applyJson1(unitId, subUnitId, op);
-		docDrawingService.applyJson1(unitId, subUnitId, op);
-		drawingManagerService.removeNotification(objects);
-		docDrawingService.removeNotification(objects);
-	}
-	_updateDrawingsOrder(unitId) {
-		const documentDataModel = this._univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null) return;
-		const { drawings, drawingsOrder } = (0, _univerjs_docs_drawing.collectDocDrawings)(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
+			})) === null || _this$_drawingManager === void 0 ? void 0 : _this$_drawingManager.isMultiTransform) === _univerjs_core.BooleanNumber.TRUE;
 		});
+		if (affectedDrawingIds == null || targetedMultiDrawing) {
+			const allMultiDrawings = Object.values(updateDrawingMap).filter((drawing) => drawing.isMultiTransform);
+			this._handleMultiDrawingsTransform(allMultiDrawings, forceRecreateMultiDrawings);
+		}
 	}
-	_syncNoteDrawings(unitId) {
-		const model = this._univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
-		if (!model) return;
-		const { drawings } = (0, _univerjs_docs_drawing.collectDocDrawings)(model.getSnapshot());
-		const previous = this._docDrawingService.getDrawingData(unitId, unitId) ?? {};
-		const added = Object.keys(drawings).filter((id) => !previous[id]);
-		const removed = Object.keys(previous).filter((id) => !drawings[id]);
-		const changed = Object.keys(drawings).filter((id) => drawings[id] !== previous[id]);
-		if (added.length > 0) this._addDrawings(unitId, added.map((id) => ({
-			...drawings[id],
-			unitId,
-			subUnitId: unitId
-		})));
-		if (removed.length > 0) this._removeDrawings(unitId, removed);
-		if (changed.length > 0) this._syncDrawingDataFromSnapshot(unitId, changed);
+	_includeGroupChildren(drawingIds) {
+		if (drawingIds == null) return;
+		const affected = new Set(drawingIds);
+		const { drawings } = (0, _univerjs_docs_drawing.collectDocDrawings)(this._context.unit.getSnapshot());
+		let previousSize = -1;
+		while (previousSize !== affected.size) {
+			previousSize = affected.size;
+			for (const drawing of Object.values(drawings)) if (drawing.groupId && affected.has(drawing.groupId)) affected.add(drawing.drawingId);
+		}
+		return affected;
 	}
-	_syncDrawingDataFromSnapshot(unitId, drawingIds) {
-		const documentDataModel = this._univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null) return;
-		const { drawings, drawingsOrder } = (0, _univerjs_docs_drawing.collectDocDrawings)(documentDataModel.getSnapshot());
-		const drawingData = Object.fromEntries(Object.entries(drawings).map(([id, drawing]) => [id, {
-			...drawing,
-			unitId,
-			subUnitId: unitId
-		}]));
-		const previousDrawings = this._docDrawingService.getDrawingData(unitId, unitId);
-		const previousRendered = this._drawingManagerService.getDrawingData(unitId, unitId);
-		const missingIds = Object.keys(drawingData).filter((id) => !previousRendered[id]);
-		const synchronizedDrawingIds = [.../* @__PURE__ */ new Set([...drawingIds, ...missingIds])];
-		const orderChanged = drawingsOrder !== this._docDrawingService.getDrawingOrder(unitId, unitId) || synchronizedDrawingIds.some((drawingId) => {
-			const previous = previousDrawings[drawingId];
-			const current = drawingData[drawingId];
-			return ((previous === null || previous === void 0 ? void 0 : previous.layoutType) === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE && previous.behindDoc === _univerjs_core.BooleanNumber.TRUE) !== ((current === null || current === void 0 ? void 0 : current.layoutType) === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE && current.behindDoc === _univerjs_core.BooleanNumber.TRUE);
+	_collectPublishedPageDrawingPositions(unitId, page, skeHeaders, skeFooters, docsLeft, docsTop, updateDrawingMap) {
+		var _skeHeaders$get, _skeFooters$get;
+		const selectable = !page.isLayoutPlaceholder && !page.isMaterializationPlaceholder;
+		const { headerId, footerId, pageWidth } = page;
+		const headerPage = headerId ? (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(page.headerLayoutKey ?? pageWidth) : void 0;
+		if (headerPage != null) this._collectSegmentDrawingPositions(unitId, headerPage, docsLeft, docsTop, updateDrawingMap, headerPage.marginTop, page.marginLeft, page, selectable);
+		const footerPage = footerId ? (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(page.footerLayoutKey ?? pageWidth) : void 0;
+		if (footerPage != null) {
+			const footerTop = page.pageHeight - footerPage.height - footerPage.marginBottom;
+			this._collectSegmentDrawingPositions(unitId, footerPage, docsLeft, docsTop, updateDrawingMap, footerTop, page.marginLeft, page, selectable);
+		}
+		this._collectSegmentDrawingPositions(unitId, page, docsLeft, docsTop, updateDrawingMap, page.marginTop, page.marginLeft, void 0, selectable);
+		for (const note of page.notes ?? []) this._collectSegmentDrawingPositions(unitId, note.page, docsLeft, docsTop, updateDrawingMap, note.top, note.left, void 0, selectable, {
+			top: note.top,
+			left: note.left
 		});
-		const hierarchyChanged = synchronizedDrawingIds.some((id) => {
-			var _previousDrawings$id, _drawingData$id;
-			return ((_previousDrawings$id = previousDrawings[id]) === null || _previousDrawings$id === void 0 ? void 0 : _previousDrawings$id.groupId) !== ((_drawingData$id = drawingData[id]) === null || _drawingData$id === void 0 ? void 0 : _drawingData$id.groupId);
+	}
+	_collectSegmentDrawingPositions(unitId, page, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft, hostPage, selectable, clipOffset) {
+		const overflowClipBounds = getDocsDrawingPageClipBounds({
+			docsLeft,
+			docsTop,
+			pageOffsetLeft: this._liquid.x,
+			pageOffsetTop: this._liquid.y,
+			page: hostPage ?? page
 		});
-		if (hierarchyChanged) this._drawingManagerService.removeNotification(Object.values(this._drawingManagerService.getDrawingData(unitId, unitId)));
-		const renderedDrawings = { ...this._drawingManagerService.getDrawingData(unitId, unitId) };
-		for (const drawingId of synchronizedDrawingIds) {
-			const current = drawingData[drawingId];
-			if (current) {
-				var _renderedDrawings$dra;
-				renderedDrawings[drawingId] = {
-					...current,
-					transform: ((_renderedDrawings$dra = renderedDrawings[drawingId]) === null || _renderedDrawings$dra === void 0 ? void 0 : _renderedDrawings$dra.transform) ?? current.transform
-				};
-			} else delete renderedDrawings[drawingId];
-		}
-		this._docDrawingService.setDrawingData(unitId, unitId, drawingData);
-		this._drawingManagerService.setDrawingData(unitId, unitId, renderedDrawings);
-		if (orderChanged) {
-			this._docDrawingService.setDrawingOrder(unitId, unitId, drawingsOrder);
-			this._drawingManagerService.setDrawingOrder(unitId, unitId, (0, _univerjs_docs_drawing.getDocDrawingRenderOrder)(drawingsOrder, drawings));
-		}
-		const objects = synchronizedDrawingIds.filter((drawingId) => drawingData[drawingId] != null).map((drawingId) => ({
+		this._calculateDrawingPosition(unitId, page, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft, hostPage, selectable, clipOffset, overflowClipBounds);
+		this._calculateTableCellDrawingPositions(unitId, page, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft, selectable, overflowClipBounds);
+		this._calculateColumnGroupDrawingPositions(unitId, page, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft, selectable, overflowClipBounds);
+	}
+	_getStaleNonMultiDrawings(unitId, updateDrawingMap, drawingIds) {
+		const drawingData = this._drawingManagerService.getDrawingData(unitId, unitId) ?? {};
+		return Object.values(drawingData).filter((drawing) => drawing.isMultiTransform !== _univerjs_core.BooleanNumber.TRUE).filter((drawing) => drawingIds == null || drawingIds.has(drawing.drawingId)).filter((drawing) => updateDrawingMap[drawing.drawingId] == null).map((drawing) => ({
 			unitId,
 			subUnitId: unitId,
-			drawingId
+			drawingId: drawing.drawingId,
+			behindText: false,
+			hidden: true,
+			selectable: true,
+			transform: drawing.transform,
+			transforms: drawing.transforms ?? [],
+			isMultiTransform: drawing.isMultiTransform ?? _univerjs_core.BooleanNumber.FALSE
 		}));
-		if (objects.length === 0) return;
-		if (hierarchyChanged) this._drawingManagerService.addNotification(Object.values(renderedDrawings));
-		this._docDrawingService.updateNotification(objects);
-		this._drawingManagerService.updateNotification(objects);
-	}
-};
-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),
-	__decorateParam(5, (0, _univerjs_core.Inject)(DocRefreshDrawingsService))
-], DocDrawingAddRemoveController);
-
-//#endregion
-//#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;
-	const floatDomParams = (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
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "univer-absolute univer-left-0 univer-top-0",
-		children: floatDomParams.map(([id, floatDom]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_ui.PrintFloatDomSingle, {
-			layer: floatDom,
-			id,
-			position: floatDom.position
-		}, id))
-	});
-};
-function mountDocPrintingFloatDom(props, root, injector) {
-	const PrintingFloatDomInjector = (0, _univerjs_ui.connectInjector)(DocPrintingFloatDom, injector);
-	(0, _univerjs_design.render)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrintingFloatDomInjector, { ...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, skeleton, pageIndex } = pos;
-			const unitData = this._drawingManagerService.getDrawingDataForUnit(unitId);
-			const subUnitData = unitData === null || unitData === void 0 ? void 0 : unitData[unitId];
-			const visibleDrawingIds = this._docPrintInterceptorService.getPageDrawingIds(skeleton, pageIndex);
-			if (subUnitData) subUnitData.order.forEach((id) => {
-				if (visibleDrawingIds && !visibleDrawingIds.has(id)) return;
-				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, skeleton, pageIndex } = pos;
-			const unitData = this._drawingManagerService.getDrawingDataForUnit(unitId);
-			const subUnitData = unitData === null || unitData === void 0 ? void 0 : unitData[unitId];
-			const visibleDrawingIds = this._docPrintInterceptorService.getPageDrawingIds(skeleton, pageIndex);
-			if (subUnitData) {
-				const floatDomInfos = subUnitData.order.filter((id) => !visibleDrawingIds || visibleDrawingIds.has(id)).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);
-				const unmountPrintingFloatDom = mountDocPrintingFloatDom({
-					unitId,
-					floatDomInfos,
-					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);
+	_handleMultiDrawingsTransform(multiDrawings, forceRecreate = false) {
+		const { scene, unitId } = this._context;
+		const changedDrawings = multiDrawings.filter((drawing) => forceRecreate || shouldRefreshDocDrawingTransform(this._drawingManagerService.getDrawingByParam(drawing) ?? void 0, drawing));
+		const publishedDrawingIds = new Set(multiDrawings.map((drawing) => drawing.drawingId));
+		const removedDrawings = Object.values(this._drawingManagerService.getDrawingData(unitId, unitId)).filter((drawing) => drawing.isMultiTransform === _univerjs_core.BooleanNumber.TRUE && (forceRecreate || !publishedDrawingIds.has(drawing.drawingId) && drawing.hidden !== true));
+		if (changedDrawings.length === 0 && removedDrawings.length === 0) return;
+		const transformer = scene.getTransformer();
+		const selectedObjectKeys = forceRecreate ? [.../* @__PURE__ */ new Set([...this._pendingMultiDrawingSelection, ...(transformer === null || transformer === void 0 ? void 0 : transformer.getSelectedObjectMap().keys()) ?? []])] : [];
+		if (forceRecreate) this._clearPendingMultiDrawingSelection();
+		changedDrawings.forEach((updateParam) => {
+			var _updateParam$transfor, _param$transforms;
+			const param = this._drawingManagerService.getDrawingByParam(updateParam);
+			if (param == null) return;
+			for (let index = ((_updateParam$transfor = updateParam.transforms) === null || _updateParam$transfor === void 0 ? void 0 : _updateParam$transfor.length) ?? 0; index < (((_param$transforms = param.transforms) === null || _param$transforms === void 0 ? void 0 : _param$transforms.length) ?? 0); index++) {
+				var _scene$getObjectInclu;
+				const key = (0, _univerjs_drawing.getDrawingShapeKeyByDrawingSearch)(param, index);
+				transformer === null || transformer === void 0 || transformer.clearControlByIds([key]);
+				(_scene$getObjectInclu = scene.getObjectIncludeInGroup(key)) === null || _scene$getObjectInclu === void 0 || _scene$getObjectInclu.dispose();
 			}
-		} }));
+			Object.assign(param, updateParam);
+		});
+		if (removedDrawings.length > 0) {
+			this._drawingManagerService.removeNotification(removedDrawings);
+			for (const drawing of removedDrawings) if (!publishedDrawingIds.has(drawing.drawingId)) drawing.hidden = true;
+		}
+		if (changedDrawings.length > 0) {
+			if (forceRecreate) this._drawingManagerService.addNotification(changedDrawings);
+			else this._drawingManagerService.refreshTransform(changedDrawings);
+		}
+		if (forceRecreate) this._restoreMultiDrawingSelection(selectedObjectKeys);
+		else if (this._pendingMultiDrawingSelection.size > 0) this._restoreMultiDrawingSelection([...this._pendingMultiDrawingSelection]);
+		else transformer === null || transformer === void 0 || transformer.refreshControls();
+	}
+	_clearPendingMultiDrawingSelection() {
+		var _this$_pendingMultiDr;
+		(_this$_pendingMultiDr = this._pendingMultiDrawingSelectionSubscription) === null || _this$_pendingMultiDr === void 0 || _this$_pendingMultiDr.dispose();
+		this._pendingMultiDrawingSelectionSubscription = void 0;
+		this._pendingMultiDrawingSelection.clear();
+	}
+	_restoreMultiDrawingSelection(selectedKeys) {
+		this._clearPendingMultiDrawingSelection();
+		const { scene, unitId } = this._context;
+		const transformer = scene.getTransformer();
+		if (!transformer || this._disposed) return;
+		const publishedKeys = new Set(Object.values(this._drawingManagerService.getDrawingData(unitId, unitId)).filter((drawing) => drawing.isMultiTransform === _univerjs_core.BooleanNumber.TRUE && drawing.hidden !== true && drawing.selectable !== false).flatMap((drawing) => (drawing.transforms ?? []).map((_, index) => (0, _univerjs_drawing.getDrawingShapeKeyByDrawingSearch)(drawing, index))));
+		for (const key of selectedKeys) {
+			const drawingShape = scene.getObjectIncludeInGroup(key);
+			if ((drawingShape === null || drawingShape === void 0 ? void 0 : drawingShape.visible) && drawingShape.evented) transformer.setSelectedControl(drawingShape);
+			else if (!drawingShape && publishedKeys.has(key)) this._pendingMultiDrawingSelection.add(key);
+		}
+		transformer.refreshControls();
+		if (this._pendingMultiDrawingSelection.size === 0) return;
+		const subscriptions = new rxjs.Subscription();
+		this._pendingMultiDrawingSelectionSubscription = this.disposeWithMe(subscriptions);
+		const allowedSelectionKeys = /* @__PURE__ */ new Set([...selectedKeys, ...transformer.getSelectedObjectMap().keys()]);
+		const pendingDrawingIds = this._includeGroupChildren(new Set([...this._pendingMultiDrawingSelection].flatMap((key) => {
+			const drawing = this._drawingManagerService.getDrawingOKey(key);
+			return drawing ? [drawing.drawingId] : [];
+		})));
+		subscriptions.add(this._drawingManagerService.refreshTransform$.subscribe((drawings) => {
+			if (drawings.some((drawing) => drawing.unitId === unitId && (pendingDrawingIds === null || pendingDrawingIds === void 0 ? void 0 : pendingDrawingIds.has(drawing.drawingId)))) this._restoreMultiDrawingSelection([...this._pendingMultiDrawingSelection]);
+		}));
+		subscriptions.add(this._drawingManagerService.remove$.subscribe((drawings) => {
+			const removedKeys = drawings.map((drawing) => (0, _univerjs_drawing.getDrawingShapeKeyByDrawingSearch)(drawing));
+			const remainingKeys = [...this._pendingMultiDrawingSelection].filter((key) => !removedKeys.some((removedKey) => key === removedKey || key.startsWith(`${removedKey}#-#`)));
+			if (remainingKeys.length !== this._pendingMultiDrawingSelection.size) this._restoreMultiDrawingSelection(remainingKeys);
+		}));
+		subscriptions.add((0, rxjs.merge)(transformer.clearControl$, transformer.changeStart$).subscribe(() => {
+			this._clearPendingMultiDrawingSelection();
+		}));
+		subscriptions.add(transformer.createControl$.subscribe(() => {
+			if ([...transformer.getSelectedObjectMap().keys()].some((key) => !allowedSelectionKeys.has(key))) this._clearPendingMultiDrawingSelection();
+		}));
 	}
-};
-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/commands/commands/update-doc-drawing.command.ts
-function getDeleteAndInsertCustomBlockActions(segmentId, oldSegmentId, segmentPage, offset, drawingId, documentDataModel, docSelectionRenderManager) {
-	var _documentDataModel$ge, _documentDataModel$ge2, _oldBody$customBlocks;
-	const textX = new _univerjs_core.TextX();
-	const jsonX = _univerjs_core.JSONX.getInstance();
-	const rawActions = [];
-	const oldBody = (_documentDataModel$ge = documentDataModel.getSelfOrHeaderFooterModel(oldSegmentId)) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge.getBody();
-	const body = (_documentDataModel$ge2 = documentDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _documentDataModel$ge2 === void 0 ? void 0 : _documentDataModel$ge2.getBody();
-	if (oldBody == null || body == null) return;
-	const oldOffset = (_oldBody$customBlocks = oldBody.customBlocks) === null || _oldBody$customBlocks === void 0 || (_oldBody$customBlocks = _oldBody$customBlocks.find((block) => block.blockId === drawingId)) === null || _oldBody$customBlocks === void 0 ? void 0 : _oldBody$customBlocks.startIndex;
-	if (oldOffset == null) return;
-	offset = Math.min(body.dataStream.length - 2, offset);
-	if (segmentId === oldSegmentId) {
-		if (offset < oldOffset) {
-			if (offset > 0) textX.push({
-				t: _univerjs_core.TextXActionType.RETAIN,
-				len: offset
-			});
-			textX.push({
-				t: _univerjs_core.TextXActionType.INSERT,
-				body: {
-					dataStream: "\b",
-					customBlocks: [{
-						startIndex: 0,
-						blockId: drawingId
-					}]
-				},
-				len: 1
-			});
-			textX.push({
-				t: _univerjs_core.TextXActionType.RETAIN,
-				len: oldOffset - offset
-			});
-			textX.push({
-				t: _univerjs_core.TextXActionType.DELETE,
-				len: 1
-			});
-		} else {
-			if (oldOffset > 0) textX.push({
-				t: _univerjs_core.TextXActionType.RETAIN,
-				len: oldOffset
-			});
-			textX.push({
-				t: _univerjs_core.TextXActionType.DELETE,
-				len: 1
-			});
-			if (offset - oldOffset - 1 > 0) textX.push({
-				t: _univerjs_core.TextXActionType.RETAIN,
-				len: offset - oldOffset - 1
-			});
-			textX.push({
-				t: _univerjs_core.TextXActionType.INSERT,
-				body: {
-					dataStream: "\b",
-					customBlocks: [{
-						startIndex: 0,
-						blockId: drawingId
-					}]
-				},
-				len: 1
-			});
-		}
-		if (offset !== oldOffset) {
-			const path = (0, _univerjs_core.getRichTextEditPath)(documentDataModel, oldSegmentId);
-			const action = jsonX.editOp(textX.serialize(), path);
-			rawActions.push(action);
-		}
-	} else {
-		if (oldOffset > 0) textX.push({
-			t: _univerjs_core.TextXActionType.RETAIN,
-			len: oldOffset
+	_calculateDrawingPosition(unitId, page, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft, hostPage, selectable = true, clipOffset, overflowClipBounds) {
+		const { skeDrawings } = page;
+		const pageOffsetLeft = this._liquid.x;
+		const pageOffsetTop = this._liquid.y;
+		this._liquid.translatePagePadding({
+			marginTop,
+			marginLeft
 		});
-		textX.push({
-			t: _univerjs_core.TextXActionType.DELETE,
-			len: 1
+		const drawingPositionContext = {
+			unitId,
+			page,
+			docsLeft,
+			docsTop,
+			pageOffsetLeft,
+			pageOffsetTop,
+			updateDrawingMap,
+			hostPage,
+			selectable,
+			clipOffset,
+			overflowClipBounds
+		};
+		skeDrawings.forEach((drawing) => this._collectDrawingPosition(drawing, drawingPositionContext));
+		this._liquid.restorePagePadding({
+			marginTop,
+			marginLeft
 		});
-		let path = (0, _univerjs_core.getRichTextEditPath)(documentDataModel, oldSegmentId);
-		let action = jsonX.editOp(textX.serialize(), path);
-		rawActions.push(action);
-		textX.empty();
-		if (offset > 0) textX.push({
-			t: _univerjs_core.TextXActionType.RETAIN,
-			len: offset
+	}
+	_collectDrawingPosition(drawing, context) {
+		var _this$_context$unit, _this$_context$unit$g;
+		const { aLeft, aTop, angle: skeletonAngle, drawingId, drawingOrigin, height: skeletonHeight, width: skeletonWidth } = drawing;
+		const runtimeDrawing = getDocsOverlayRuntimeDrawing(drawingOrigin, (_this$_context$unit = this._context.unit) === null || _this$_context$unit === void 0 || (_this$_context$unit$g = _this$_context$unit.getSnapshot) === null || _this$_context$unit$g === void 0 || (_this$_context$unit$g = _this$_context$unit$g.call(_this$_context$unit).drawings) === null || _this$_context$unit$g === void 0 ? void 0 : _this$_context$unit$g[drawingId], drawing.customBlockRenderViewport ? {
+			width: skeletonWidth,
+			height: skeletonHeight
+		} : void 0);
+		const { angle = skeletonAngle, size } = runtimeDrawing.docTransform;
+		const height = (size === null || size === void 0 ? void 0 : size.height) ?? skeletonHeight;
+		const width = (size === null || size === void 0 ? void 0 : size.width) ?? skeletonWidth;
+		const { left: clipOffsetLeft, top: clipOffsetTop } = context.clipOffset ?? {};
+		const behindText = getDocsDrawingBehindText({
+			drawingOrigin: runtimeDrawing,
+			hostPage: context.hostPage
 		});
-		textX.push({
-			t: _univerjs_core.TextXActionType.INSERT,
-			body: {
-				dataStream: "\b",
-				customBlocks: [{
-					startIndex: 0,
-					blockId: drawingId
-				}]
+		const { isMultiTransform = _univerjs_core.BooleanNumber.FALSE } = runtimeDrawing;
+		const clipPage = getDocsDrawingClipPage({
+			drawing: {
+				behindText,
+				transform: {
+					width,
+					height
+				}
 			},
-			len: 1
+			hostPage: context.hostPage,
+			page: context.page
 		});
-		path = (0, _univerjs_core.getRichTextEditPath)(documentDataModel, segmentId);
-		action = jsonX.editOp(textX.serialize(), path);
-		rawActions.push(action);
-		docSelectionRenderManager.setSegment(segmentId);
-		docSelectionRenderManager.setSegmentPage(segmentPage);
+		const clipBounds = getDocsDrawingPageClipBounds({
+			docsLeft: context.docsLeft,
+			docsTop: context.docsTop,
+			pageOffsetLeft: context.pageOffsetLeft,
+			pageOffsetTop: context.pageOffsetTop,
+			clipOffsetLeft,
+			clipOffsetTop,
+			page: clipPage,
+			drawingLayoutType: runtimeDrawing.layoutType,
+			overflowClipBounds: context.overflowClipBounds
+		});
+		const anchorPage = getDocsPageRelativeDrawingAnchorPage({
+			page: context.page,
+			clipPage,
+			hostPage: context.hostPage,
+			drawingLayoutType: runtimeDrawing.layoutType
+		});
+		const pageRelativeLeft = anchorPage == null ? void 0 : getDocsPageRelativeDrawingLeft({
+			hostPage: anchorPage,
+			positionH: runtimeDrawing.docTransform.positionH,
+			width
+		});
+		const pageRelativeTop = anchorPage == null ? void 0 : getDocsPageRelativeDrawingTop({
+			hostPage: anchorPage,
+			positionV: runtimeDrawing.docTransform.positionV,
+			height
+		});
+		const transform = {
+			left: (pageRelativeLeft ?? aLeft) + context.docsLeft + (pageRelativeLeft == null ? this._liquid.x : context.pageOffsetLeft),
+			top: (pageRelativeTop ?? aTop) + context.docsTop + (pageRelativeTop == null ? this._liquid.y : context.pageOffsetTop),
+			width,
+			height,
+			angle,
+			flipX: runtimeDrawing.docTransform.flipX,
+			flipY: runtimeDrawing.docTransform.flipY,
+			clipBounds
+		};
+		mergePublishedDrawing(context.updateDrawingMap, {
+			unitId: context.unitId,
+			subUnitId: context.unitId,
+			drawingId,
+			behindText,
+			selectable: context.selectable,
+			transform,
+			transforms: [transform],
+			customBlockRenderViewport: drawing.customBlockRenderViewport,
+			isMultiTransform
+		});
+		if (runtimeDrawing.drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_GROUP) this._collectGroupChildren(drawingId, context, behindText, isMultiTransform, /* @__PURE__ */ new Set([drawingId]));
 	}
-	return rawActions;
-}
-/**
-* The command to update drawing wrap text.
-*/
-const UpdateDocDrawingDistanceCommand = {
-	id: "doc.command.update-doc-drawing-distance",
-	type: _univerjs_core.CommandType.COMMAND,
-	handler: (accessor, params) => {
-		if (params == null) return false;
-		const commandService = accessor.get(_univerjs_core.ICommandService);
-		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
-		const { drawings, dist, unitId } = params;
-		const documentDataModel = univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null) return false;
-		const jsonX = _univerjs_core.JSONX.getInstance();
-		const rawActions = [];
-		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
-		for (const drawing of drawings) {
-			const { drawingId } = drawing;
-			for (const [key, value] of Object.entries(dist)) {
-				const oldValue = oldDrawings[drawingId][key];
-				if (oldValue !== value) {
-					const action = jsonX.replaceOp([
-						"drawings",
-						drawingId,
-						key
-					], oldValue, value);
-					rawActions.push(action);
-				}
-			}
+	_collectGroupChildren(groupId, context, behindText, isMultiTransform, visited) {
+		const { drawings } = (0, _univerjs_docs_drawing.collectDocDrawings)(this._context.unit.getSnapshot());
+		for (const child of Object.values(drawings)) {
+			if (child.groupId !== groupId || visited.has(child.drawingId)) continue;
+			visited.add(child.drawingId);
+			const { size, positionH, positionV, angle, flipX, flipY } = child.docTransform;
+			const transform = {
+				left: positionH.posOffset ?? 0,
+				top: positionV.posOffset ?? 0,
+				width: size.width,
+				height: size.height,
+				angle,
+				flipX,
+				flipY
+			};
+			mergePublishedDrawing(context.updateDrawingMap, {
+				unitId: context.unitId,
+				subUnitId: context.unitId,
+				drawingId: child.drawingId,
+				behindText,
+				selectable: context.selectable,
+				transform,
+				transforms: [transform],
+				isMultiTransform
+			});
+			this._collectGroupChildren(child.drawingId, context, behindText, isMultiTransform, visited);
 		}
-		const doMutation = {
-			id: _univerjs_docs.RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return _univerjs_core.JSONX.compose(acc, cur);
-		}, null);
-		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-		return Boolean(result);
 	}
-};
-/**
-* The command to update drawing wrap text.
-*/
-const UpdateDocDrawingWrapTextCommand = {
-	id: "doc.command.update-doc-drawing-wrap-text",
-	type: _univerjs_core.CommandType.COMMAND,
-	handler: (accessor, params) => {
-		if (params == null) return false;
-		const commandService = accessor.get(_univerjs_core.ICommandService);
-		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
-		const { drawings, wrapText, unitId } = params;
-		const documentDataModel = univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null) return false;
-		const jsonX = _univerjs_core.JSONX.getInstance();
-		const rawActions = [];
-		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
-		for (const drawing of drawings) {
-			const { drawingId } = drawing;
-			const oldWrapText = oldDrawings[drawingId].wrapText;
-			if (oldWrapText !== wrapText) {
-				const action = jsonX.replaceOp([
-					"drawings",
-					drawingId,
-					"wrapText"
-				], oldWrapText, wrapText);
-				rawActions.push(action);
-			}
-		}
-		const doMutation = {
-			id: _univerjs_docs.RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null
-			}
+	_calculateTableCellDrawingPositions(unitId, page, docsLeft, docsTop, updateDrawingMap, baseMarginTop, baseMarginLeft, selectable, overflowClipBounds) {
+		var _page$skeTables3;
+		(_page$skeTables3 = page.skeTables) === null || _page$skeTables3 === void 0 || _page$skeTables3.forEach((table) => {
+			table.rows.forEach((row) => {
+				row.cells.forEach((cell) => {
+					var _cell$skeDrawings, _cell$skeTables, _cell$skeColumnGroups;
+					if ((((_cell$skeDrawings = cell.skeDrawings) === null || _cell$skeDrawings === void 0 ? void 0 : _cell$skeDrawings.size) ?? 0) === 0 && (((_cell$skeTables = cell.skeTables) === null || _cell$skeTables === void 0 ? void 0 : _cell$skeTables.size) ?? 0) === 0 && (((_cell$skeColumnGroups = cell.skeColumnGroups) === null || _cell$skeColumnGroups === void 0 ? void 0 : _cell$skeColumnGroups.size) ?? 0) === 0) return;
+					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, selectable, {
+						left: marginLeft,
+						top: marginTop
+					}, overflowClipBounds);
+					this._calculateTableCellDrawingPositions(unitId, cell, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft, selectable, overflowClipBounds);
+					this._calculateColumnGroupDrawingPositions(unitId, cell, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft, selectable, overflowClipBounds);
+				});
+			});
+		});
+	}
+	_calculateColumnGroupDrawingPositions(unitId, page, docsLeft, docsTop, updateDrawingMap, baseMarginTop, baseMarginLeft, selectable, overflowClipBounds) {
+		var _page$skeColumnGroups3;
+		(_page$skeColumnGroups3 = page.skeColumnGroups) === null || _page$skeColumnGroups3 === void 0 || _page$skeColumnGroups3.forEach((columnGroup) => {
+			columnGroup.columns.forEach((column) => {
+				const nestedPage = column.page;
+				const marginTop = baseMarginTop + columnGroup.top + column.top + nestedPage.marginTop;
+				const marginLeft = baseMarginLeft + columnGroup.left + column.left + nestedPage.marginLeft;
+				const clipOffset = {
+					left: marginLeft,
+					top: marginTop
+				};
+				this._calculateDrawingPosition(unitId, nestedPage, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft, void 0, selectable, clipOffset, overflowClipBounds);
+				this._calculateTableCellDrawingPositions(unitId, nestedPage, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft, selectable, overflowClipBounds);
+				this._calculateColumnGroupDrawingPositions(unitId, nestedPage, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft, selectable, overflowClipBounds);
+			});
+		});
+	}
+	_drawingInitializeListener() {
+		const init = () => {
+			const skeleton = this._docSkeletonManagerService.getSkeleton();
+			if (skeleton == null) return;
+			this._drawingManagerService.initializeNotification(this._context.unitId);
+			this._refreshDrawing(skeleton);
 		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return _univerjs_core.JSONX.compose(acc, cur);
-		}, null);
-		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-		return Boolean(result);
+		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));
 	}
 };
-/**
-* The command to move inline drawing.
-*/
-const IMoveInlineDrawingCommand = {
-	id: "doc.command.move-inline-drawing",
-	type: _univerjs_core.CommandType.COMMAND,
-	handler: (accessor, params) => {
-		var _renderManagerService;
-		if (params == null) return false;
-		const { drawing, unitId, offset, segmentId: newSegmentId, segmentPage, needRefreshDrawings } = params;
-		const renderManagerService = accessor.get(_univerjs_engine_render.IRenderManagerService);
-		const docSelectionRenderService = (_renderManagerService = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(_univerjs_docs_ui.DocSelectionRenderService);
-		const docRefreshDrawingsService = accessor.get(DocRefreshDrawingsService);
-		const renderObject = renderManagerService.getRenderUnitById(unitId);
-		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-		const skeleton = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
-		if (scene == null || docSelectionRenderService == null) return false;
-		const transformer = scene.getTransformerByCreate();
-		const commandService = accessor.get(_univerjs_core.ICommandService);
-		const documentDataModel = accessor.get(_univerjs_core.IUniverInstanceService).getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null) return false;
-		if (needRefreshDrawings) {
-			docRefreshDrawingsService.refreshDrawings(skeleton);
-			transformer.refreshControls();
-			return true;
+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/utils/drawing-wrapping-position.ts
+function findDrawingAnchor(unitId, drawingId, skeleton, editArea, currentDrawing) {
+	function findInPage(page, pageMarginLeft, pageMarginTop, hostPage) {
+		var _page$skeColumnGroups;
+		const cachedDrawing = page.skeDrawings.get(drawingId);
+		const skeDrawing = cachedDrawing && currentDrawing ? {
+			...cachedDrawing,
+			drawingOrigin: currentDrawing
+		} : cachedDrawing;
+		if (skeDrawing) return {
+			skeDrawing,
+			page,
+			hostPage,
+			pageMarginLeft,
+			pageMarginTop
+		};
+		for (const table of page.skeTables.values()) for (const row of table.rows) for (const cell of row.cells) {
+			const offset = getDocsTableCellDrawingOffset(unitId, table, row, cell);
+			const found = findInPage(cell, pageMarginLeft + offset.left, pageMarginTop + offset.top);
+			if (found) return found;
 		}
-		const rawActions = [];
-		const { drawingId } = drawing;
-		const actions = getDeleteAndInsertCustomBlockActions(newSegmentId, docSelectionRenderService.getSegment() ?? "", segmentPage, offset, drawingId, documentDataModel, docSelectionRenderService);
-		if (actions == null || actions.length === 0) {
-			docRefreshDrawingsService.refreshDrawings(skeleton);
-			transformer.refreshControls();
-			return false;
+		for (const group of ((_page$skeColumnGroups = page.skeColumnGroups) === null || _page$skeColumnGroups === void 0 ? void 0 : _page$skeColumnGroups.values()) ?? []) for (const column of group.columns) {
+			const found = findInPage(column.page, pageMarginLeft + group.left + column.left + column.page.marginLeft, pageMarginTop + group.top + column.top + column.page.marginTop);
+			if (found) return found;
 		}
-		rawActions.push(...actions);
-		const doMutation = {
-			id: _univerjs_docs.RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return _univerjs_core.JSONX.compose(acc, cur);
-		}, null);
-		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-		transformer.refreshControls();
-		return Boolean(result);
+		return null;
 	}
-};
-/**
-* The command to transform non-inline drawing.
-*/
-const ITransformNonInlineDrawingCommand = {
-	id: "doc.command.transform-non-inline-drawing",
-	type: _univerjs_core.CommandType.COMMAND,
-	handler: (accessor, params) => {
-		var _renderManagerService2;
-		if (params == null) return false;
-		const { drawing, unitId, offset, docTransform, segmentId: newSegmentId, segmentPage } = params;
-		const renderManagerService = accessor.get(_univerjs_engine_render.IRenderManagerService);
-		const docSelectionRenderService = (_renderManagerService2 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.with(_univerjs_docs_ui.DocSelectionRenderService);
-		const renderObject = renderManagerService.getRenderUnitById(unitId);
-		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-		if (renderObject == null || scene == null || docSelectionRenderService == null) return false;
-		const transformer = scene.getTransformerByCreate();
-		const commandService = accessor.get(_univerjs_core.ICommandService);
-		const documentDataModel = accessor.get(_univerjs_core.IUniverInstanceService).getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null) return false;
-		const rawActions = [];
-		const { drawingId } = drawing;
-		const actions = getDeleteAndInsertCustomBlockActions(newSegmentId, docSelectionRenderService.getSegment() ?? "", segmentPage, offset, drawingId, documentDataModel, docSelectionRenderService);
-		if (actions == null) return false;
-		if (actions.length > 0) rawActions.push(...actions);
-		const jsonX = _univerjs_core.JSONX.getInstance();
-		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
-		const { positionH: oldPositionH, positionV: oldPositionV, size: oldSize, angle: oldAngle } = oldDrawings[drawingId].docTransform;
-		if (!_univerjs_core.Tools.diffValue(oldPositionH, docTransform.positionH)) {
-			const updateAction = jsonX.replaceOp([
-				"drawings",
-				drawingId,
-				"docTransform",
-				"positionH"
-			], oldPositionH, docTransform.positionH);
-			rawActions.push(updateAction);
-		}
-		if (!_univerjs_core.Tools.diffValue(oldPositionV, docTransform.positionV)) {
-			const updateAction = jsonX.replaceOp([
-				"drawings",
-				drawingId,
-				"docTransform",
-				"positionV"
-			], oldPositionV, docTransform.positionV);
-			rawActions.push(updateAction);
+	for (const page of skeleton.pages) {
+		const { headerId, footerId, marginLeft, marginTop, pageWidth, pageHeight } = page;
+		let found = null;
+		if (editArea === _univerjs_engine_render.DocumentEditArea.HEADER) {
+			var _skeleton$skeHeaders$;
+			const header = (_skeleton$skeHeaders$ = skeleton.skeHeaders.get(headerId)) === null || _skeleton$skeHeaders$ === void 0 ? void 0 : _skeleton$skeHeaders$.get(page.headerLayoutKey ?? pageWidth);
+			if (header) found = findInPage(header, marginLeft, header.marginTop, page);
+		} else if (editArea === _univerjs_engine_render.DocumentEditArea.FOOTER) {
+			var _skeleton$skeFooters$;
+			const footer = (_skeleton$skeFooters$ = skeleton.skeFooters.get(footerId)) === null || _skeleton$skeFooters$ === void 0 ? void 0 : _skeleton$skeFooters$.get(page.footerLayoutKey ?? pageWidth);
+			if (footer) found = findInPage(footer, marginLeft, pageHeight - footer.height - footer.marginBottom, page);
+		} else {
+			found = findInPage(page, marginLeft, marginTop);
+			if (!found) for (const note of page.notes ?? []) {
+				found = findInPage(note.page, note.left, note.top);
+				if (found) break;
+			}
 		}
-		if (!_univerjs_core.Tools.diffValue(oldSize, docTransform.size)) {
-			const updateAction = jsonX.replaceOp([
-				"drawings",
-				drawingId,
-				"docTransform",
-				"size"
-			], oldSize, docTransform.size);
-			rawActions.push(updateAction);
+		if (found) return found;
+	}
+	return null;
+}
+function getColumnOrigin(anchor, relativeFromV) {
+	const { skeDrawing, page } = anchor;
+	let origin = skeDrawing.isPageBreak ? 0 : skeDrawing.columnLeft;
+	if ((skeDrawing.blockAnchorLeft ?? 0) > 0 && relativeFromV !== _univerjs_core.ObjectRelativeFromV.LINE) {
+		origin += skeDrawing.blockAnchorLeft - (skeDrawing.isPageBreak ? 0 : skeDrawing.columnLeft || page.marginLeft);
+		if (skeDrawing.normalizeTraditionalColumnAnchor && relativeFromV === _univerjs_core.ObjectRelativeFromV.PARAGRAPH) origin -= page.marginLeft;
+	}
+	return origin;
+}
+/** Resolve a text-relative origin before committing a wrapping reference change. */
+function resolveDrawingWrappingPosition(anchor, position, snapshot, localeService, editArea) {
+	var _findDocDrawing;
+	const drawing = anchor.skeDrawing.drawingOrigin;
+	const relativeFrom = position.positionV.relativeFrom;
+	if (drawing.layoutType !== _univerjs_core.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM && drawing.layoutType !== _univerjs_core.PositionedObjectLayoutType.WRAP_SQUARE || relativeFrom !== _univerjs_core.ObjectRelativeFromV.PARAGRAPH && relativeFrom !== _univerjs_core.ObjectRelativeFromV.LINE || drawing.docTransform.positionV.relativeFrom === relativeFrom) return position;
+	const model = new _univerjs_core.DocumentDataModel(_univerjs_core.Tools.deepClone(snapshot));
+	const previewDrawing = (_findDocDrawing = (0, _univerjs_docs_drawing.findDocDrawing)(model.getSnapshot(), drawing.drawingId)) === null || _findDocDrawing === void 0 ? void 0 : _findDocDrawing.drawing;
+	if (!previewDrawing) {
+		model.dispose();
+		return null;
+	}
+	const viewModel = new _univerjs_engine_render.DocumentViewModel(model);
+	const skeleton = _univerjs_engine_render.DocumentSkeleton.create(viewModel, localeService);
+	let candidate = {
+		...position,
+		positionV: {
+			relativeFrom,
+			posOffset: 0
 		}
-		if (!_univerjs_core.Tools.diffValue(oldAngle, docTransform.angle)) {
-			const updateAction = jsonX.replaceOp([
-				"drawings",
-				drawingId,
-				"docTransform",
-				"angle"
-			], oldAngle, docTransform.angle);
-			rawActions.push(updateAction);
+	};
+	const targetTop = anchor.skeDrawing.aTop + anchor.pageMarginTop;
+	let previous;
+	try {
+		for (let attempt = 0; attempt < 8; attempt++) {
+			previewDrawing.docTransform = candidate;
+			skeleton.makeDirty(true);
+			skeleton.calculate();
+			const resolved = findDrawingAnchor(snapshot.id, drawing.drawingId, skeleton.getSkeletonData(), editArea, previewDrawing);
+			if (!resolved) return null;
+			const delta = targetTop - resolved.skeDrawing.aTop - resolved.pageMarginTop;
+			if (Math.abs(delta) < .01) return candidate;
+			const offset = candidate.positionV.posOffset ?? 0;
+			const nextOffset = previous && Math.abs(previous.delta - delta) > .01 ? offset - delta * (offset - previous.offset) / (delta - previous.delta) : offset + delta;
+			previous = {
+				offset,
+				delta
+			};
+			candidate = {
+				...candidate,
+				positionV: {
+					relativeFrom,
+					posOffset: nextOffset
+				}
+			};
 		}
-		const doMutation = {
-			id: _univerjs_docs.RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null,
-				debounce: true
+		return null;
+	} finally {
+		skeleton.dispose();
+		viewModel.dispose();
+		model.dispose();
+	}
+}
+/** Preserve the rendered position when text wrapping or a positioning reference changes. */
+function getDrawingWrappingPosition(anchor, layoutType, relativeFromH = anchor.skeDrawing.drawingOrigin.docTransform.positionH.relativeFrom, relativeFromV = anchor.skeDrawing.drawingOrigin.docTransform.positionV.relativeFrom, offset) {
+	const { skeDrawing, page, hostPage, pageMarginLeft, pageMarginTop } = anchor;
+	const { drawingOrigin, width, height, aLeft, aTop } = skeDrawing;
+	const { positionH, positionV } = drawingOrigin.docTransform;
+	const clipPage = getDocsDrawingClipPage({
+		drawing: {
+			behindText: getDocsDrawingBehindText({
+				drawingOrigin,
+				hostPage
+			}),
+			transform: {
+				width,
+				height
 			}
+		},
+		page,
+		hostPage
+	});
+	const anchorPage = getDocsPageRelativeDrawingAnchorPage({
+		page,
+		clipPage,
+		hostPage
+	});
+	const wasPageRelative = drawingOrigin.layoutType !== _univerjs_core.PositionedObjectLayoutType.INLINE && anchorPage != null;
+	const isPageRelative = layoutType !== _univerjs_core.PositionedObjectLayoutType.INLINE && anchorPage != null;
+	const wasInline = drawingOrigin.layoutType === _univerjs_core.PositionedObjectLayoutType.INLINE;
+	const result = { ...drawingOrigin.docTransform };
+	const columnOriginChanged = relativeFromH === _univerjs_core.ObjectRelativeFromH.COLUMN && (skeDrawing.blockAnchorLeft ?? 0) > 0 && relativeFromV !== positionV.relativeFrom;
+	if ((offset === null || offset === void 0 ? void 0 : offset.left) || wasInline || columnOriginChanged || relativeFromH !== positionH.relativeFrom || positionH.relativeFrom === _univerjs_core.ObjectRelativeFromH.PAGE && wasPageRelative !== isPageRelative) {
+		const left = (wasPageRelative ? getDocsPageRelativeDrawingLeft({
+			hostPage: anchorPage,
+			positionH,
+			width
+		}) : void 0) ?? aLeft + pageMarginLeft;
+		const origins = {
+			[_univerjs_core.ObjectRelativeFromH.PAGE]: isPageRelative ? 0 : pageMarginLeft - (skeDrawing.pageAnchorLeft ?? 0),
+			[_univerjs_core.ObjectRelativeFromH.MARGIN]: pageMarginLeft + page.marginLeft - (skeDrawing.pageAnchorLeft ?? 0),
+			[_univerjs_core.ObjectRelativeFromH.COLUMN]: pageMarginLeft + getColumnOrigin(anchor, relativeFromV)
+		};
+		result.positionH = {
+			relativeFrom: relativeFromH,
+			posOffset: left + ((offset === null || offset === void 0 ? void 0 : offset.left) ?? 0) - (origins[relativeFromH] ?? pageMarginLeft)
 		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return _univerjs_core.JSONX.compose(acc, cur);
-		}, null);
-		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-		const skeleton = renderObject.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
-		accessor.get(DocRefreshDrawingsService).refreshDrawings(skeleton);
-		transformer.refreshControls();
-		return Boolean(result);
-	}
-};
-
-//#endregion
-//#region src/controllers/render-controllers/doc-drawing-transform-update.controller.ts
-function mergePublishedDrawing(drawings, next) {
-	const current = drawings[next.drawingId];
-	if (current == null) {
-		drawings[next.drawingId] = next;
-		return;
 	}
-	if (next.selectable && !current.selectable) {
-		current.selectable = true;
-		current.transform = next.transform;
+	if ((offset === null || offset === void 0 ? void 0 : offset.top) || wasInline || relativeFromV !== positionV.relativeFrom || positionV.relativeFrom === _univerjs_core.ObjectRelativeFromV.PAGE && wasPageRelative !== isPageRelative) {
+		const top = (wasPageRelative ? getDocsPageRelativeDrawingTop({
+			hostPage: anchorPage,
+			positionV,
+			height
+		}) : void 0) ?? aTop + pageMarginTop;
+		const origins = {
+			[_univerjs_core.ObjectRelativeFromV.PAGE]: isPageRelative ? 0 : pageMarginTop - page.marginTop,
+			[_univerjs_core.ObjectRelativeFromV.LINE]: pageMarginTop + skeDrawing.lineTop,
+			[_univerjs_core.ObjectRelativeFromV.PARAGRAPH]: pageMarginTop + (skeDrawing.isPageBreak ? 0 : skeDrawing.blockAnchorTop)
+		};
+		result.positionV = {
+			relativeFrom: relativeFromV,
+			posOffset: top + ((offset === null || offset === void 0 ? void 0 : offset.top) ?? 0) - (origins[relativeFromV] ?? pageMarginTop)
+		};
 	}
-	if (next.isMultiTransform === _univerjs_core.BooleanNumber.TRUE) current.transforms.push(next.transform);
+	return result;
 }
-function isSameTransformValue(left, right) {
-	return left === right || JSON.stringify(left) === JSON.stringify(right);
-}
-function shouldRefreshDocDrawingTransform(current, next) {
-	if (!current || next.customBlockRenderViewport != null) return true;
-	return !isSameTransformValue(current.transform, next.transform) || !isSameTransformValue(current.transforms, next.transforms) || current.isMultiTransform !== next.isMultiTransform || current.hidden !== next.hidden || current.behindText !== next.behindText || current.selectable !== next.selectable;
-}
-/**
-* Overlay drawings do not participate in text layout. While their skeleton
-* anchor remains valid, use the latest model transform so drag/resize/front-
-* behind changes can paint immediately without rebuilding document pages.
-*/
-function getDocsOverlayRuntimeDrawing(skeletonDrawing, currentDrawing, measuredSize) {
-	if (skeletonDrawing.layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE && (currentDrawing === null || currentDrawing === void 0 ? void 0 : currentDrawing.layoutType) === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE) return currentDrawing;
-	return measuredSize ? {
-		...skeletonDrawing,
-		docTransform: {
-			...skeletonDrawing.docTransform,
-			size: measuredSize
-		}
-	} : skeletonDrawing;
-}
-var DocDrawingPublicationTracker = class {
-	constructor() {
-		_defineProperty(this, "_generation", -1);
-		_defineProperty(this, "_publishedPageCount", 0);
-		_defineProperty(this, "_drawingOccurrenceCount", 0);
-	}
-	reset() {
-		this._generation = -1;
-		this._publishedPageCount = 0;
-		this._drawingOccurrenceCount = 0;
-	}
-	shouldRefresh(skeleton, progress) {
-		if (!progress.didPublish && !progress.complete) return false;
-		const isNewGeneration = progress.generation !== this._generation;
-		if (isNewGeneration) {
-			this._generation = progress.generation;
-			this._publishedPageCount = 0;
-			this._drawingOccurrenceCount = 0;
-		}
-		const skeletonData = skeleton.getSkeletonData();
-		if (skeletonData == null) return false;
-		const previousPublishedPageCount = this._publishedPageCount;
-		const publishedPageCount = Math.min(progress.publishedPageCount, skeletonData.pages.length);
-		this._publishedPageCount = Math.max(previousPublishedPageCount, publishedPageCount);
-		const drawingOccurrenceCount = countPublishedDrawingOccurrences(skeletonData, publishedPageCount);
-		const didDrawingOccurrencesChange = !(isNewGeneration && progress.reason === "edit") && drawingOccurrenceCount !== this._drawingOccurrenceCount;
-		this._drawingOccurrenceCount = drawingOccurrenceCount;
-		if (progress.complete || progress.didPublishAnchor || didDrawingOccurrencesChange) return true;
-		if (isNewGeneration && progress.reason === "edit") return false;
-		return hasNewPublishedPageDrawings(skeletonData, previousPublishedPageCount, publishedPageCount);
-	}
-};
-function getDocsDrawingPageClipBounds(config) {
-	const { docsLeft, docsTop, pageOffsetLeft, pageOffsetTop, clipOffsetLeft = 0, clipOffsetTop = 0, page } = config;
-	if (page.type === _univerjs_engine_render.DocumentSkeletonPageType.CELL && config.drawingLayoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE && config.overflowClipBounds != null) return config.overflowClipBounds;
-	const { pageWidth, pageHeight } = page;
-	if (!Number.isFinite(pageWidth) || !Number.isFinite(pageHeight) || pageWidth <= 0 || pageHeight <= 0) return;
-	const cellInsetLeft = page.type === _univerjs_engine_render.DocumentSkeletonPageType.CELL ? page.marginLeft ?? 0 : 0;
-	const cellInsetTop = page.type === _univerjs_engine_render.DocumentSkeletonPageType.CELL ? page.marginTop ?? 0 : 0;
-	return {
-		left: docsLeft + pageOffsetLeft + clipOffsetLeft - cellInsetLeft,
-		top: docsTop + pageOffsetTop + clipOffsetTop - cellInsetTop,
-		width: pageWidth,
-		height: pageHeight
-	};
-}
-function getDocsDrawingClipPage(config) {
-	const { drawing, hostPage, page } = config;
-	if (hostPage && (page.type === _univerjs_engine_render.DocumentSkeletonPageType.HEADER || page.type === _univerjs_engine_render.DocumentSkeletonPageType.FOOTER)) return hostPage;
-	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 (config.drawingLayoutType === _univerjs_core.PositionedObjectLayoutType.INLINE) return;
-	if (hostPage != null && hostPage === clipPage) return hostPage;
-	if (hostPage == null && page === clipPage && page.type !== _univerjs_engine_render.DocumentSkeletonPageType.CELL) 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) {
-	return viewport != null && (viewport.leadingInsetLeft ?? 0) + viewport.contentWidth + (viewport.trailingInsetRight ?? 0) > viewport.viewportWidth;
-}
-function hasSkeletonPageDrawings(page) {
-	var _page$notes, _page$skeTables, _page$skeColumnGroups;
-	if (page.skeDrawings.size > 0 || ((_page$notes = page.notes) === null || _page$notes === void 0 ? void 0 : _page$notes.some((note) => hasSkeletonPageDrawings(note.page)))) return true;
-	let hasDrawings = false;
-	(_page$skeTables = page.skeTables) === null || _page$skeTables === void 0 || _page$skeTables.forEach((table) => {
-		table.rows.forEach((row) => {
-			row.cells.forEach((cell) => {
-				if (hasSkeletonPageDrawings(cell)) hasDrawings = true;
-			});
-		});
-	});
-	(_page$skeColumnGroups = page.skeColumnGroups) === null || _page$skeColumnGroups === void 0 || _page$skeColumnGroups.forEach((columnGroup) => {
-		columnGroup.columns.forEach((column) => {
-			if (hasSkeletonPageDrawings(column.page)) hasDrawings = true;
-		});
-	});
-	return hasDrawings;
-}
-function countSkeletonPageDrawings(page) {
-	var _page$notes2, _page$skeTables2, _page$skeColumnGroups2;
-	let count = page.skeDrawings.size;
-	(_page$notes2 = page.notes) === null || _page$notes2 === void 0 || _page$notes2.forEach((note) => {
-		count += countSkeletonPageDrawings(note.page);
-	});
-	(_page$skeTables2 = page.skeTables) === null || _page$skeTables2 === void 0 || _page$skeTables2.forEach((table) => {
-		table.rows.forEach((row) => {
-			row.cells.forEach((cell) => {
-				count += countSkeletonPageDrawings(cell);
-			});
+
+//#endregion
+//#region src/controllers/doc-drawing-notification.controller.ts
+function getAddOrRemoveDrawings(actions) {
+	if (_univerjs_core.JSONX.isNoop(actions)) return null;
+	const drawings = [];
+	const cursor = _univerjs_core.JSON1.type.readCursor(actions);
+	cursor.traverse(null, () => {
+		const path = cursor.getPath();
+		if (path.length !== 2 || path[0] !== "drawings" || typeof path[1] !== "string") return;
+		const component = cursor.getComponent();
+		if ((component === null || component === void 0 ? void 0 : component.r) !== void 0) drawings.push({
+			type: "remove",
+			drawingId: path[1]
 		});
-	});
-	(_page$skeColumnGroups2 = page.skeColumnGroups) === null || _page$skeColumnGroups2 === void 0 || _page$skeColumnGroups2.forEach((columnGroup) => {
-		columnGroup.columns.forEach((column) => {
-			count += countSkeletonPageDrawings(column.page);
+		if ((component === null || component === void 0 ? void 0 : component.i) !== void 0) drawings.push({
+			type: "add",
+			drawingId: path[1],
+			drawing: component.i
 		});
 	});
-	return count;
+	return drawings.length ? drawings : null;
 }
-function countPublishedDrawingOccurrences(skeletonData, publishedPageCount) {
-	let count = 0;
-	for (let index = 0; index < publishedPageCount; index++) {
-		var _skeletonData$skeHead, _skeletonData$skeFoot;
-		const page = skeletonData.pages[index];
-		count += countSkeletonPageDrawings(page);
-		const header = page.headerId == null ? void 0 : (_skeletonData$skeHead = skeletonData.skeHeaders.get(page.headerId)) === null || _skeletonData$skeHead === void 0 ? void 0 : _skeletonData$skeHead.get(page.headerLayoutKey ?? page.pageWidth);
-		if (header != null) count += countSkeletonPageDrawings(header);
-		const footer = page.footerId == null ? void 0 : (_skeletonData$skeFoot = skeletonData.skeFooters.get(page.footerId)) === null || _skeletonData$skeFoot === void 0 ? void 0 : _skeletonData$skeFoot.get(page.footerLayoutKey ?? page.pageWidth);
-		if (footer != null) count += countSkeletonPageDrawings(footer);
+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;
+		}
 	}
-	return count;
+	return drawingIndexes;
 }
-function hasNewPublishedPageDrawings(skeletonData, startPageIndex, publishedPageCount) {
-	for (let index = startPageIndex; index < publishedPageCount; index++) {
-		var _skeletonData$skeHead2, _skeletonData$skeFoot2;
-		const page = skeletonData.pages[index];
-		if (hasSkeletonPageDrawings(page)) return true;
-		const header = page.headerId == null ? void 0 : (_skeletonData$skeHead2 = skeletonData.skeHeaders.get(page.headerId)) === null || _skeletonData$skeHead2 === void 0 ? void 0 : _skeletonData$skeHead2.get(page.headerLayoutKey ?? page.pageWidth);
-		if (header != null && hasSkeletonPageDrawings(header)) return true;
-		const footer = page.footerId == null ? void 0 : (_skeletonData$skeFoot2 = skeletonData.skeFooters.get(page.footerId)) === null || _skeletonData$skeFoot2 === void 0 ? void 0 : _skeletonData$skeFoot2.get(page.footerLayoutKey ?? page.pageWidth);
-		if (footer != null && hasSkeletonPageDrawings(footer)) return true;
+function collectUpdatedDrawingIds(actions, drawingIds = /* @__PURE__ */ new Set()) {
+	if (_univerjs_core.JSONX.isNoop(actions) || !Array.isArray(actions)) return drawingIds;
+	if (actions[0] === "drawings") {
+		const drawingKeyOrOps = actions[1];
+		if (typeof drawingKeyOrOps === "string") {
+			drawingIds.add(drawingKeyOrOps);
+			return drawingIds;
+		}
+		actions.slice(1).forEach((action) => {
+			if (Array.isArray(action) && typeof action[0] === "string") drawingIds.add(action[0]);
+		});
+		return drawingIds;
 	}
-	return false;
+	actions.forEach((action) => {
+		if (Array.isArray(action)) collectUpdatedDrawingIds(action, drawingIds);
+	});
+	return drawingIds;
 }
-let DocDrawingTransformUpdateController = class DocDrawingTransformUpdateController extends _univerjs_core.Disposable {
-	constructor(_context, _docSkeletonManagerService, _commandService, _editorService, _drawingManagerService, _docRefreshDrawingsService, _univerInstanceService, _lifecycleService) {
+let DocDrawingAddRemoveController = class DocDrawingAddRemoveController extends _univerjs_core.Disposable {
+	constructor(_univerInstanceService, _commandService, _drawingManagerService, _docDrawingService, _renderManagerService, _docRefreshDrawingsService) {
 		super();
-		this._context = _context;
-		this._docSkeletonManagerService = _docSkeletonManagerService;
+		this._univerInstanceService = _univerInstanceService;
 		this._commandService = _commandService;
-		this._editorService = _editorService;
 		this._drawingManagerService = _drawingManagerService;
+		this._docDrawingService = _docDrawingService;
+		this._renderManagerService = _renderManagerService;
 		this._docRefreshDrawingsService = _docRefreshDrawingsService;
-		this._univerInstanceService = _univerInstanceService;
-		this._lifecycleService = _lifecycleService;
-		_defineProperty(this, "_liquid", new _univerjs_engine_render.Liquid());
-		_defineProperty(this, "_changesetDrawingRefreshScheduled", false);
-		_defineProperty(this, "_publicationTracker", new DocDrawingPublicationTracker());
 		this._initialize();
-		this._commandExecutedListener();
 	}
 	_initialize() {
-		this._initialRenderRefresh();
-		this._drawingInitializeListener();
-		this._initTransformRefresh();
+		this._commandExecutedListener();
 	}
-	_initialRenderRefresh() {
-		this.disposeWithMe(this._docSkeletonManagerService.currentSkeleton$.pipe((0, rxjs.switchMap)((documentSkeleton) => {
-			this._publicationTracker.reset();
-			if (documentSkeleton == null) return rxjs.EMPTY;
-			this._refreshDrawing(documentSkeleton);
-			const positionRefresh$ = (0, rxjs.animationFrames)().pipe((0, rxjs.startWith)(null), (0, rxjs.map)(() => this._context.mainComponent), (0, rxjs.filter)((documentComponent) => documentComponent instanceof _univerjs_engine_render.Documents && documentComponent.left > -1e4 && documentComponent.top > -1e4), (0, rxjs.take)(1), (0, rxjs.switchMap)((documentComponent) => (0, _univerjs_core.fromEventSubject)(documentComponent.onTransformChange$).pipe((0, rxjs.filter)((evt) => evt.type === _univerjs_engine_render.TRANSFORM_CHANGE_OBSERVABLE_TYPE.translate && "left" in evt.value && "left" in evt.preValue && (evt.value.left !== evt.preValue.left || evt.value.top !== evt.preValue.top)), (0, rxjs.map)(() => ({
-				documentSkeleton,
-				progress: null
-			})), (0, rxjs.startWith)({
-				documentSkeleton,
-				progress: null
-			}))));
-			return (0, rxjs.merge)(documentSkeleton.layoutProgress$.pipe((0, rxjs.map)((progress) => ({
-				documentSkeleton,
-				progress
-			}))), documentSkeleton.layoutPageMaterialized$.pipe((0, rxjs.map)(() => ({
-				documentSkeleton,
-				progress: null
-			}))), positionRefresh$);
-		})).subscribe(({ documentSkeleton, progress }) => {
-			if (progress == null || this._publicationTracker.shouldRefresh(documentSkeleton, progress)) this._refreshDrawing(documentSkeleton);
+	_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._docRefreshDrawingsService.refreshDrawings$.subscribe((skeleton) => {
-			if (skeleton == null) return;
-			this._refreshDrawing(skeleton);
+		this.disposeWithMe(this._commandService.beforeCommandExecuted((command) => {
+			if (command.id !== _univerjs_docs_drawing.UpdateDocDrawingWrappingStyleCommand.id) return;
+			this._preserveWrappingStylePosition(command.params);
 		}));
-	}
-	_commandExecutedListener() {
-		const updateCommandList = [_univerjs_docs.RichTextEditingMutation.id, _univerjs_docs_ui.SetDocZoomRatioOperation.id];
-		this.disposeWithMe(this._commandService.onCommandExecuted((command, options) => {
-			if (updateCommandList.includes(command.id)) {
-				const params = command.params;
-				const { unitId: commandUnitId } = params;
-				const { unitId } = this._context;
-				if (commandUnitId !== unitId) return;
-				const drawingIds = command.id === _univerjs_docs.RichTextEditingMutation.id ? getDocMutationAffectedDrawingIds(params.actions) : null;
-				if ((drawingIds === null || drawingIds === void 0 ? void 0 : drawingIds.size) === 0) return;
-				if (command.id === _univerjs_docs.RichTextEditingMutation.id && (options === null || options === void 0 ? void 0 : options.fromChangeset)) {
-					this._scheduleChangesetDrawingRefresh();
-					return;
-				}
-				this._refreshCurrentDrawing(drawingIds ?? void 0);
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (command.id !== _univerjs_docs.RichTextEditingMutation.id) return;
+			const { unitId, actions } = command.params;
+			let changedNotes = false;
+			if (!_univerjs_core.JSONX.isNoop(actions)) {
+				const cursor = _univerjs_core.JSON1.type.readCursor(actions);
+				cursor.traverse(null, () => {
+					changedNotes ||= cursor.getPath()[0] === "notes";
+				});
 			}
+			if (changedNotes) this._syncNoteDrawings(unitId);
+			if (getReOrderedDrawings(actions).length > 0) this._updateDrawingsOrder(unitId);
+			const updatedDrawingIds = [...collectUpdatedDrawingIds(actions)];
+			if (updatedDrawingIds.length > 0) this._syncDrawingDataFromSnapshot(unitId, updatedDrawingIds);
+		}));
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (command.id !== _univerjs_docs_drawing.UpdateDrawingDocTransformCommand.id && command.id !== _univerjs_docs_drawing.UpdateDocDrawingWrappingStyleCommand.id) return;
+			const { unitId } = command.params;
+			const renderObject = this._renderManagerService.getRenderUnitById(unitId);
+			const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+			if (renderObject == null || scene == null) return;
+			if (command.id === _univerjs_docs_drawing.UpdateDocDrawingWrappingStyleCommand.id) this._docRefreshDrawingsService.refreshDrawings(renderObject.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton());
+			scene.getTransformerByCreate().refreshControls();
+		}));
+		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.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC)) === 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.getRenderUnitById(unitId);
+			const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+			if (renderObject == null || scene == null) return false;
+			this._docRefreshDrawingsService.refreshDrawings(renderObject.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton());
+			scene.getTransformerByCreate().refreshControls();
 		}));
 	}
-	_scheduleChangesetDrawingRefresh() {
-		if (this._changesetDrawingRefreshScheduled) return;
-		this._changesetDrawingRefreshScheduled = true;
-		queueMicrotask(() => {
-			queueMicrotask(() => {
-				this._changesetDrawingRefreshScheduled = false;
-				if (this._disposed) return;
-				this._refreshCurrentDrawing();
-			});
+	_preserveWrappingStylePosition(params) {
+		if (params.wrappingStyle === _univerjs_docs_drawing.TextWrappingStyle.INLINE) return;
+		const { unitId } = params;
+		const documentDataModel = this._univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
+		const renderObject = this._renderManagerService.getRenderUnitById(unitId);
+		const skeletonManager = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(_univerjs_docs.DocSkeletonManagerService);
+		const skeletonData = skeletonManager === null || skeletonManager === void 0 ? void 0 : skeletonManager.getSkeleton().getSkeletonData();
+		const viewModel = skeletonManager === null || skeletonManager === void 0 ? void 0 : skeletonManager.getViewModel();
+		if (!documentDataModel || !skeletonData || !viewModel) return;
+		const editArea = viewModel.getEditArea();
+		const oldDrawings = (0, _univerjs_docs_drawing.collectDocDrawings)(documentDataModel.getSnapshot()).drawings;
+		params.drawings = params.drawings.map((drawing) => {
+			const oldDrawing = oldDrawings[drawing.drawingId];
+			if (!oldDrawing) return drawing;
+			const drawingAnchor = findDrawingAnchor(unitId, drawing.drawingId, skeletonData, editArea, oldDrawing);
+			if (!drawingAnchor) return drawing;
+			const docTransform = getDrawingWrappingPosition(drawingAnchor, _univerjs_docs_drawing.WRAPPING_STYLE_TO_LAYOUT_TYPE[params.wrappingStyle]);
+			for (const key of ["positionH", "positionV"]) {
+				var _drawing$docTransform;
+				const requested = (_drawing$docTransform = drawing.docTransform) === null || _drawing$docTransform === void 0 ? void 0 : _drawing$docTransform[key];
+				if (requested && !_univerjs_core.Tools.diffValue(requested, oldDrawing.docTransform[key])) Object.assign(docTransform, { [key]: requested });
+			}
+			return {
+				...oldDrawing,
+				...drawing,
+				docTransform: {
+					...docTransform,
+					...drawing.docTransform,
+					positionH: docTransform.positionH,
+					positionV: docTransform.positionV
+				}
+			};
 		});
 	}
-	_refreshCurrentDrawing(drawingIds) {
-		const skeleton = this._docSkeletonManagerService.getSkeleton();
-		if (skeleton == null) return;
-		const { unitId, mainComponent } = this._context;
-		if (this._editorService.isEditor(unitId)) {
-			mainComponent === null || mainComponent === void 0 || mainComponent.makeDirty();
-			return;
-		}
-		this._refreshDrawing(skeleton, drawingIds);
-	}
-	_initTransformRefresh() {
-		this.disposeWithMe((0, rxjs.merge)((0, _univerjs_core.fromEventSubject)(this._context.engine.onTransformChange$).pipe((0, rxjs.filter)((evt) => evt.type === _univerjs_engine_render.TRANSFORM_CHANGE_OBSERVABLE_TYPE.resize)), (0, _univerjs_core.fromEventSubject)(this._context.scene.onTransformChange$).pipe((0, rxjs.filter)((evt) => evt.type === _univerjs_engine_render.TRANSFORM_CHANGE_OBSERVABLE_TYPE.scale))).pipe((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);
-		}));
+	_addDrawings(unitId, drawings) {
+		const drawingManagerService = this._drawingManagerService;
+		const docDrawingService = this._docDrawingService;
+		const { subUnitId, redo: op, objects } = this._docDrawingService.getBatchAddOp(drawings.map((drawing) => ({
+			...drawing,
+			unitId,
+			subUnitId: unitId
+		})));
+		drawingManagerService.applyJson1(unitId, subUnitId, op);
+		docDrawingService.applyJson1(unitId, subUnitId, op);
+		drawingManagerService.addNotification(objects);
+		docDrawingService.addNotification(objects);
 	}
-	_refreshDrawing(skeleton, drawingIds) {
-		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];
-			this._collectPublishedPageDrawingPositions(unitId, page, skeHeaders, skeFooters, docsLeft, docsTop, updateDrawingMap);
-			this._liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
-		}
-		const affectedDrawingIds = this._includeGroupChildren(drawingIds);
-		const updateDrawings = Object.values(updateDrawingMap).filter((drawing) => affectedDrawingIds == null || affectedDrawingIds.has(drawing.drawingId));
-		for (const drawing of updateDrawings) drawing.hidden = false;
-		const staleNonMultiDrawings = this._getStaleNonMultiDrawings(unitId, updateDrawingMap, affectedDrawingIds);
-		const nonMultiDrawings = updateDrawings.filter((drawing) => !drawing.isMultiTransform).concat(staleNonMultiDrawings).filter((drawing) => shouldRefreshDocDrawingTransform(this._drawingManagerService.getDrawingByParam({
+	_removeDrawings(unitId, drawingIds) {
+		const drawingManagerService = this._drawingManagerService;
+		const docDrawingService = this._docDrawingService;
+		const existingDrawingIds = drawingIds.filter((drawingId) => docDrawingService.getDrawingByParam({
 			unitId,
 			subUnitId: unitId,
-			drawingId: drawing.drawingId
-		}), drawing));
-		if (nonMultiDrawings.length > 0) this._drawingManagerService.refreshTransform(nonMultiDrawings);
-		const targetedMultiDrawing = affectedDrawingIds != null && [...affectedDrawingIds].some((drawingId) => {
-			var _updateDrawingMap$dra, _this$_drawingManager;
-			return ((_updateDrawingMap$dra = updateDrawingMap[drawingId]) === null || _updateDrawingMap$dra === void 0 ? void 0 : _updateDrawingMap$dra.isMultiTransform) === _univerjs_core.BooleanNumber.TRUE || ((_this$_drawingManager = this._drawingManagerService.getDrawingByParam({
+			drawingId
+		}));
+		if (existingDrawingIds.length === 0) return;
+		const { subUnitId, redo: op, objects } = this._docDrawingService.getBatchRemoveOp(existingDrawingIds.map((drawingId) => {
+			return {
 				unitId,
 				subUnitId: unitId,
 				drawingId
-			})) === null || _this$_drawingManager === void 0 ? void 0 : _this$_drawingManager.isMultiTransform) === _univerjs_core.BooleanNumber.TRUE;
-		});
-		if (affectedDrawingIds == null || targetedMultiDrawing) {
-			const allMultiDrawings = Object.values(updateDrawingMap).filter((drawing) => drawing.isMultiTransform);
-			this._handleMultiDrawingsTransform(allMultiDrawings);
-		}
-	}
-	_includeGroupChildren(drawingIds) {
-		if (drawingIds == null) return;
-		const affected = new Set(drawingIds);
-		const { drawings } = (0, _univerjs_docs_drawing.collectDocDrawings)(this._context.unit.getSnapshot());
-		let previousSize = -1;
-		while (previousSize !== affected.size) {
-			previousSize = affected.size;
-			for (const drawing of Object.values(drawings)) if (drawing.groupId && affected.has(drawing.groupId)) affected.add(drawing.drawingId);
-		}
-		return affected;
-	}
-	_collectPublishedPageDrawingPositions(unitId, page, skeHeaders, skeFooters, docsLeft, docsTop, updateDrawingMap) {
-		var _skeHeaders$get, _skeFooters$get;
-		const selectable = !page.isLayoutPlaceholder && !page.isMaterializationPlaceholder;
-		const { headerId, footerId, pageWidth } = page;
-		const headerPage = headerId ? (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(page.headerLayoutKey ?? pageWidth) : void 0;
-		if (headerPage != null) this._collectSegmentDrawingPositions(unitId, headerPage, docsLeft, docsTop, updateDrawingMap, headerPage.marginTop, page.marginLeft, page, selectable);
-		const footerPage = footerId ? (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(page.footerLayoutKey ?? pageWidth) : void 0;
-		if (footerPage != null) {
-			const footerTop = page.pageHeight - footerPage.height - footerPage.marginBottom;
-			this._collectSegmentDrawingPositions(unitId, footerPage, docsLeft, docsTop, updateDrawingMap, footerTop, page.marginLeft, page, selectable);
-		}
-		this._collectSegmentDrawingPositions(unitId, page, docsLeft, docsTop, updateDrawingMap, page.marginTop, page.marginLeft, void 0, selectable);
-		for (const note of page.notes ?? []) this._collectSegmentDrawingPositions(unitId, note.page, docsLeft, docsTop, updateDrawingMap, note.top, note.left, void 0, selectable, {
-			top: note.top,
-			left: note.left
-		});
-	}
-	_collectSegmentDrawingPositions(unitId, page, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft, hostPage, selectable, clipOffset) {
-		const overflowClipBounds = getDocsDrawingPageClipBounds({
-			docsLeft,
-			docsTop,
-			pageOffsetLeft: this._liquid.x,
-			pageOffsetTop: this._liquid.y,
-			page: hostPage ?? page
-		});
-		this._calculateDrawingPosition(unitId, page, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft, hostPage, selectable, clipOffset, overflowClipBounds);
-		this._calculateTableCellDrawingPositions(unitId, page, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft, selectable, overflowClipBounds);
-		this._calculateColumnGroupDrawingPositions(unitId, page, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft, selectable, overflowClipBounds);
+			};
+		}));
+		drawingManagerService.applyJson1(unitId, subUnitId, op);
+		docDrawingService.applyJson1(unitId, subUnitId, op);
+		drawingManagerService.removeNotification(objects);
+		docDrawingService.removeNotification(objects);
 	}
-	_getStaleNonMultiDrawings(unitId, updateDrawingMap, drawingIds) {
-		const drawingData = this._drawingManagerService.getDrawingData(unitId, unitId) ?? {};
-		return Object.values(drawingData).filter((drawing) => drawing.isMultiTransform !== _univerjs_core.BooleanNumber.TRUE).filter((drawing) => drawingIds == null || drawingIds.has(drawing.drawingId)).filter((drawing) => updateDrawingMap[drawing.drawingId] == null).map((drawing) => ({
+	_updateDrawingsOrder(unitId) {
+		const documentDataModel = this._univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
+		if (documentDataModel == null) return;
+		const { drawings, drawingsOrder } = (0, _univerjs_docs_drawing.collectDocDrawings)(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,
-			drawingId: drawing.drawingId,
-			behindText: false,
-			hidden: true,
-			selectable: true,
-			transform: drawing.transform,
-			transforms: drawing.transforms ?? [],
-			isMultiTransform: drawing.isMultiTransform ?? _univerjs_core.BooleanNumber.FALSE
-		}));
-	}
-	_handleMultiDrawingsTransform(multiDrawings) {
-		const { scene, unitId } = this._context;
-		const transformer = scene.getTransformerByCreate();
-		multiDrawings.forEach((updateParam) => {
-			const param = this._drawingManagerService.getDrawingByParam(updateParam);
-			if (param == null) return;
-			Object.assign(param, updateParam);
+			drawingIds: renderOrder
+		};
+		drawingManagerService.orderNotification(objects);
+		docDrawingService.orderNotification({
+			unitId,
+			subUnitId: unitId,
+			drawingIds: drawingsOrder
 		});
-		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, hostPage, selectable = true, clipOffset, overflowClipBounds) {
-		const { skeDrawings } = page;
-		const pageOffsetLeft = this._liquid.x;
-		const pageOffsetTop = this._liquid.y;
-		this._liquid.translatePagePadding({
-			marginTop,
-			marginLeft
-		});
-		const drawingPositionContext = {
+	_syncNoteDrawings(unitId) {
+		const model = this._univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
+		if (!model) return;
+		const { drawings } = (0, _univerjs_docs_drawing.collectDocDrawings)(model.getSnapshot());
+		const previous = this._docDrawingService.getDrawingData(unitId, unitId) ?? {};
+		const added = Object.keys(drawings).filter((id) => !previous[id]);
+		const removed = Object.keys(previous).filter((id) => !drawings[id]);
+		const changed = Object.keys(drawings).filter((id) => drawings[id] !== previous[id]);
+		if (added.length > 0) this._addDrawings(unitId, added.map((id) => ({
+			...drawings[id],
 			unitId,
-			page,
-			docsLeft,
-			docsTop,
-			pageOffsetLeft,
-			pageOffsetTop,
-			updateDrawingMap,
-			hostPage,
-			selectable,
-			clipOffset,
-			overflowClipBounds
-		};
-		skeDrawings.forEach((drawing) => this._collectDrawingPosition(drawing, drawingPositionContext));
-		this._liquid.restorePagePadding({
-			marginTop,
-			marginLeft
-		});
+			subUnitId: unitId
+		})));
+		if (removed.length > 0) this._removeDrawings(unitId, removed);
+		if (changed.length > 0) this._syncDrawingDataFromSnapshot(unitId, changed);
 	}
-	_collectDrawingPosition(drawing, context) {
-		var _this$_context$unit, _this$_context$unit$g;
-		const { aLeft, aTop, angle: skeletonAngle, drawingId, drawingOrigin, height: skeletonHeight, width: skeletonWidth } = drawing;
-		const runtimeDrawing = getDocsOverlayRuntimeDrawing(drawingOrigin, (_this$_context$unit = this._context.unit) === null || _this$_context$unit === void 0 || (_this$_context$unit$g = _this$_context$unit.getSnapshot) === null || _this$_context$unit$g === void 0 || (_this$_context$unit$g = _this$_context$unit$g.call(_this$_context$unit).drawings) === null || _this$_context$unit$g === void 0 ? void 0 : _this$_context$unit$g[drawingId], drawing.customBlockRenderViewport ? {
-			width: skeletonWidth,
-			height: skeletonHeight
-		} : void 0);
-		const { angle = skeletonAngle, size } = runtimeDrawing.docTransform;
-		const height = (size === null || size === void 0 ? void 0 : size.height) ?? skeletonHeight;
-		const width = (size === null || size === void 0 ? void 0 : size.width) ?? skeletonWidth;
-		const { left: clipOffsetLeft, top: clipOffsetTop } = context.clipOffset ?? {};
-		const behindText = getDocsDrawingBehindText({
-			drawingOrigin: runtimeDrawing,
-			hostPage: context.hostPage
+	_syncDrawingDataFromSnapshot(unitId, drawingIds) {
+		const documentDataModel = this._univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
+		if (documentDataModel == null) return;
+		const { drawings, drawingsOrder } = (0, _univerjs_docs_drawing.collectDocDrawings)(documentDataModel.getSnapshot());
+		const drawingData = Object.fromEntries(Object.entries(drawings).map(([id, drawing]) => [id, {
+			...drawing,
+			unitId,
+			subUnitId: unitId
+		}]));
+		const previousDrawings = this._docDrawingService.getDrawingData(unitId, unitId);
+		const previousRendered = this._drawingManagerService.getDrawingData(unitId, unitId);
+		const missingIds = Object.keys(drawingData).filter((id) => !previousRendered[id]);
+		const synchronizedDrawingIds = [.../* @__PURE__ */ new Set([...drawingIds, ...missingIds])];
+		const orderChanged = drawingsOrder !== this._docDrawingService.getDrawingOrder(unitId, unitId) || synchronizedDrawingIds.some((drawingId) => {
+			const previous = previousDrawings[drawingId];
+			const current = drawingData[drawingId];
+			return ((previous === null || previous === void 0 ? void 0 : previous.layoutType) === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE && previous.behindDoc === _univerjs_core.BooleanNumber.TRUE) !== ((current === null || current === void 0 ? void 0 : current.layoutType) === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE && current.behindDoc === _univerjs_core.BooleanNumber.TRUE);
 		});
-		const { isMultiTransform = _univerjs_core.BooleanNumber.FALSE } = runtimeDrawing;
-		const clipPage = getDocsDrawingClipPage({
-			drawing: {
-				behindText,
-				transform: {
-					width,
-					height
-				}
-			},
-			hostPage: context.hostPage,
-			page: context.page
+		const hierarchyChanged = synchronizedDrawingIds.some((id) => {
+			var _previousDrawings$id, _drawingData$id;
+			return ((_previousDrawings$id = previousDrawings[id]) === null || _previousDrawings$id === void 0 ? void 0 : _previousDrawings$id.groupId) !== ((_drawingData$id = drawingData[id]) === null || _drawingData$id === void 0 ? void 0 : _drawingData$id.groupId);
 		});
-		const clipBounds = getDocsDrawingPageClipBounds({
-			docsLeft: context.docsLeft,
-			docsTop: context.docsTop,
-			pageOffsetLeft: context.pageOffsetLeft,
-			pageOffsetTop: context.pageOffsetTop,
-			clipOffsetLeft,
-			clipOffsetTop,
-			page: clipPage,
-			drawingLayoutType: runtimeDrawing.layoutType,
-			overflowClipBounds: context.overflowClipBounds
+		if (hierarchyChanged) this._drawingManagerService.removeNotification(Object.values(this._drawingManagerService.getDrawingData(unitId, unitId)));
+		const renderedDrawings = { ...this._drawingManagerService.getDrawingData(unitId, unitId) };
+		for (const drawingId of synchronizedDrawingIds) {
+			const current = drawingData[drawingId];
+			if (current) {
+				var _renderedDrawings$dra;
+				renderedDrawings[drawingId] = {
+					...current,
+					transform: ((_renderedDrawings$dra = renderedDrawings[drawingId]) === null || _renderedDrawings$dra === void 0 ? void 0 : _renderedDrawings$dra.transform) ?? current.transform
+				};
+			} else delete renderedDrawings[drawingId];
+		}
+		this._docDrawingService.setDrawingData(unitId, unitId, drawingData);
+		this._drawingManagerService.setDrawingData(unitId, unitId, renderedDrawings);
+		if (orderChanged) {
+			this._docDrawingService.setDrawingOrder(unitId, unitId, drawingsOrder);
+			this._drawingManagerService.setDrawingOrder(unitId, unitId, (0, _univerjs_docs_drawing.getDocDrawingRenderOrder)(drawingsOrder, drawings));
+		}
+		const objects = synchronizedDrawingIds.filter((drawingId) => drawingData[drawingId] != null).map((drawingId) => ({
+			unitId,
+			subUnitId: unitId,
+			drawingId
+		}));
+		if (objects.length === 0) return;
+		if (hierarchyChanged) this._drawingManagerService.addNotification(Object.values(renderedDrawings));
+		this._docDrawingService.updateNotification(objects);
+		this._drawingManagerService.updateNotification(objects);
+	}
+};
+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),
+	__decorateParam(5, (0, _univerjs_core.Inject)(DocRefreshDrawingsService))
+], DocDrawingAddRemoveController);
+
+//#endregion
+//#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;
+	const floatDomParams = (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
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "univer-absolute univer-left-0 univer-top-0",
+		children: floatDomParams.map(([id, floatDom]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_ui.PrintFloatDomSingle, {
+			layer: floatDom,
+			id,
+			position: floatDom.position
+		}, id))
+	});
+};
+function mountDocPrintingFloatDom(props, root, injector) {
+	const PrintingFloatDomInjector = (0, _univerjs_ui.connectInjector)(DocPrintingFloatDom, injector);
+	(0, _univerjs_design.render)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrintingFloatDomInjector, { ...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, skeleton, pageIndex } = pos;
+			const unitData = this._drawingManagerService.getDrawingDataForUnit(unitId);
+			const subUnitData = unitData === null || unitData === void 0 ? void 0 : unitData[unitId];
+			const visibleDrawingIds = this._docPrintInterceptorService.getPageDrawingIds(skeleton, pageIndex);
+			if (subUnitData) subUnitData.order.forEach((id) => {
+				if (visibleDrawingIds && !visibleDrawingIds.has(id)) return;
+				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, skeleton, pageIndex } = pos;
+			const unitData = this._drawingManagerService.getDrawingDataForUnit(unitId);
+			const subUnitData = unitData === null || unitData === void 0 ? void 0 : unitData[unitId];
+			const visibleDrawingIds = this._docPrintInterceptorService.getPageDrawingIds(skeleton, pageIndex);
+			if (subUnitData) {
+				const floatDomInfos = subUnitData.order.filter((id) => !visibleDrawingIds || visibleDrawingIds.has(id)).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);
+				const unmountPrintingFloatDom = mountDocPrintingFloatDom({
+					unitId,
+					floatDomInfos,
+					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/commands/commands/update-doc-drawing.command.ts
+function getDeleteAndInsertCustomBlockActions(segmentId, oldSegmentId, segmentPage, offset, drawingId, documentDataModel, docSelectionRenderManager) {
+	var _documentDataModel$ge, _documentDataModel$ge2, _oldBody$customBlocks;
+	const textX = new _univerjs_core.TextX();
+	const jsonX = _univerjs_core.JSONX.getInstance();
+	const rawActions = [];
+	const oldBody = (_documentDataModel$ge = documentDataModel.getSelfOrHeaderFooterModel(oldSegmentId)) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge.getBody();
+	const body = (_documentDataModel$ge2 = documentDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _documentDataModel$ge2 === void 0 ? void 0 : _documentDataModel$ge2.getBody();
+	if (oldBody == null || body == null) return;
+	const oldOffset = (_oldBody$customBlocks = oldBody.customBlocks) === null || _oldBody$customBlocks === void 0 || (_oldBody$customBlocks = _oldBody$customBlocks.find((block) => block.blockId === drawingId)) === null || _oldBody$customBlocks === void 0 ? void 0 : _oldBody$customBlocks.startIndex;
+	if (oldOffset == null) return;
+	offset = Math.min(body.dataStream.length - 2, offset);
+	if (segmentId === oldSegmentId) {
+		if (offset < oldOffset) {
+			if (offset > 0) textX.push({
+				t: _univerjs_core.TextXActionType.RETAIN,
+				len: offset
+			});
+			textX.push({
+				t: _univerjs_core.TextXActionType.INSERT,
+				body: {
+					dataStream: "\b",
+					customBlocks: [{
+						startIndex: 0,
+						blockId: drawingId
+					}]
+				},
+				len: 1
+			});
+			textX.push({
+				t: _univerjs_core.TextXActionType.RETAIN,
+				len: oldOffset - offset
+			});
+			textX.push({
+				t: _univerjs_core.TextXActionType.DELETE,
+				len: 1
+			});
+		} else {
+			if (oldOffset > 0) textX.push({
+				t: _univerjs_core.TextXActionType.RETAIN,
+				len: oldOffset
+			});
+			textX.push({
+				t: _univerjs_core.TextXActionType.DELETE,
+				len: 1
+			});
+			if (offset - oldOffset - 1 > 0) textX.push({
+				t: _univerjs_core.TextXActionType.RETAIN,
+				len: offset - oldOffset - 1
+			});
+			textX.push({
+				t: _univerjs_core.TextXActionType.INSERT,
+				body: {
+					dataStream: "\b",
+					customBlocks: [{
+						startIndex: 0,
+						blockId: drawingId
+					}]
+				},
+				len: 1
+			});
+		}
+		if (offset !== oldOffset) {
+			const path = (0, _univerjs_core.getRichTextEditPath)(documentDataModel, oldSegmentId);
+			const action = jsonX.editOp(textX.serialize(), path);
+			rawActions.push(action);
+		}
+	} else {
+		if (oldOffset > 0) textX.push({
+			t: _univerjs_core.TextXActionType.RETAIN,
+			len: oldOffset
 		});
-		const anchorPage = getDocsPageRelativeDrawingAnchorPage({
-			page: context.page,
-			clipPage,
-			hostPage: context.hostPage,
-			drawingLayoutType: runtimeDrawing.layoutType
+		textX.push({
+			t: _univerjs_core.TextXActionType.DELETE,
+			len: 1
 		});
-		const pageRelativeLeft = anchorPage == null ? void 0 : getDocsPageRelativeDrawingLeft({
-			hostPage: anchorPage,
-			positionH: runtimeDrawing.docTransform.positionH,
-			width
+		let path = (0, _univerjs_core.getRichTextEditPath)(documentDataModel, oldSegmentId);
+		let action = jsonX.editOp(textX.serialize(), path);
+		rawActions.push(action);
+		textX.empty();
+		if (offset > 0) textX.push({
+			t: _univerjs_core.TextXActionType.RETAIN,
+			len: offset
 		});
-		const pageRelativeTop = anchorPage == null ? void 0 : getDocsPageRelativeDrawingTop({
-			hostPage: anchorPage,
-			positionV: runtimeDrawing.docTransform.positionV,
-			height
+		textX.push({
+			t: _univerjs_core.TextXActionType.INSERT,
+			body: {
+				dataStream: "\b",
+				customBlocks: [{
+					startIndex: 0,
+					blockId: drawingId
+				}]
+			},
+			len: 1
 		});
-		const transform = {
-			left: (pageRelativeLeft ?? aLeft) + context.docsLeft + (pageRelativeLeft == null ? this._liquid.x : context.pageOffsetLeft),
-			top: (pageRelativeTop ?? aTop) + context.docsTop + (pageRelativeTop == null ? this._liquid.y : context.pageOffsetTop),
-			width,
-			height,
-			angle,
-			flipX: runtimeDrawing.docTransform.flipX,
-			flipY: runtimeDrawing.docTransform.flipY,
-			clipBounds
+		path = (0, _univerjs_core.getRichTextEditPath)(documentDataModel, segmentId);
+		action = jsonX.editOp(textX.serialize(), path);
+		rawActions.push(action);
+		docSelectionRenderManager.setSegment(segmentId);
+		docSelectionRenderManager.setSegmentPage(segmentPage);
+	}
+	return rawActions;
+}
+/**
+* The command to update drawing wrap text.
+*/
+const UpdateDocDrawingDistanceCommand = {
+	id: "doc.command.update-doc-drawing-distance",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor, params) => {
+		if (params == null) return false;
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+		const { drawings, dist, unitId } = params;
+		const documentDataModel = univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
+		if (documentDataModel == null) return false;
+		const jsonX = _univerjs_core.JSONX.getInstance();
+		const rawActions = [];
+		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
+		for (const drawing of drawings) {
+			const { drawingId } = drawing;
+			for (const [key, value] of Object.entries(dist)) {
+				const oldValue = oldDrawings[drawingId][key];
+				if (oldValue !== value) {
+					const action = jsonX.replaceOp([
+						"drawings",
+						drawingId,
+						key
+					], oldValue, value);
+					rawActions.push(action);
+				}
+			}
+		}
+		const doMutation = {
+			id: _univerjs_docs.RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: null
+			}
+		};
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return _univerjs_core.JSONX.compose(acc, cur);
+		}, null);
+		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		return Boolean(result);
+	}
+};
+/**
+* The command to update drawing wrap text.
+*/
+const UpdateDocDrawingWrapTextCommand = {
+	id: "doc.command.update-doc-drawing-wrap-text",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor, params) => {
+		if (params == null) return false;
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+		const { drawings, wrapText, unitId } = params;
+		const documentDataModel = univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
+		if (documentDataModel == null) return false;
+		const jsonX = _univerjs_core.JSONX.getInstance();
+		const rawActions = [];
+		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
+		for (const drawing of drawings) {
+			const { drawingId } = drawing;
+			const oldWrapText = oldDrawings[drawingId].wrapText;
+			if (oldWrapText !== wrapText) {
+				const action = jsonX.replaceOp([
+					"drawings",
+					drawingId,
+					"wrapText"
+				], oldWrapText, wrapText);
+				rawActions.push(action);
+			}
+		}
+		const doMutation = {
+			id: _univerjs_docs.RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: null
+			}
+		};
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return _univerjs_core.JSONX.compose(acc, cur);
+		}, null);
+		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		return Boolean(result);
+	}
+};
+/**
+* The command to move inline drawing.
+*/
+const IMoveInlineDrawingCommand = {
+	id: "doc.command.move-inline-drawing",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor, params) => {
+		var _renderManagerService;
+		if (params == null) return false;
+		const { drawing, unitId, offset, segmentId: newSegmentId, segmentPage, needRefreshDrawings } = params;
+		const renderManagerService = accessor.get(_univerjs_engine_render.IRenderManagerService);
+		const docSelectionRenderService = (_renderManagerService = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(_univerjs_docs_ui.DocSelectionRenderService);
+		const docRefreshDrawingsService = accessor.get(DocRefreshDrawingsService);
+		const renderObject = renderManagerService.getRenderUnitById(unitId);
+		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+		const skeleton = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+		if (scene == null || docSelectionRenderService == null) return false;
+		const transformer = scene.getTransformerByCreate();
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const documentDataModel = accessor.get(_univerjs_core.IUniverInstanceService).getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
+		if (documentDataModel == null) return false;
+		if (needRefreshDrawings) {
+			docRefreshDrawingsService.refreshDrawings(skeleton);
+			transformer.refreshControls();
+			return true;
+		}
+		const rawActions = [];
+		const { drawingId } = drawing;
+		const actions = getDeleteAndInsertCustomBlockActions(newSegmentId, docSelectionRenderService.getSegment() ?? "", segmentPage, offset, drawingId, documentDataModel, docSelectionRenderService);
+		if (actions == null || actions.length === 0) {
+			docRefreshDrawingsService.refreshDrawings(skeleton);
+			transformer.refreshControls();
+			return false;
+		}
+		rawActions.push(...actions);
+		const doMutation = {
+			id: _univerjs_docs.RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: null
+			}
 		};
-		mergePublishedDrawing(context.updateDrawingMap, {
-			unitId: context.unitId,
-			subUnitId: context.unitId,
-			drawingId,
-			behindText,
-			selectable: context.selectable,
-			transform,
-			transforms: [transform],
-			customBlockRenderViewport: drawing.customBlockRenderViewport,
-			isMultiTransform
-		});
-		if (runtimeDrawing.drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_GROUP) this._collectGroupChildren(drawingId, context, behindText, isMultiTransform, /* @__PURE__ */ new Set([drawingId]));
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return _univerjs_core.JSONX.compose(acc, cur);
+		}, null);
+		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		transformer.refreshControls();
+		return Boolean(result);
 	}
-	_collectGroupChildren(groupId, context, behindText, isMultiTransform, visited) {
-		const { drawings } = (0, _univerjs_docs_drawing.collectDocDrawings)(this._context.unit.getSnapshot());
-		for (const child of Object.values(drawings)) {
-			if (child.groupId !== groupId || visited.has(child.drawingId)) continue;
-			visited.add(child.drawingId);
-			const { size, positionH, positionV, angle, flipX, flipY } = child.docTransform;
-			const transform = {
-				left: positionH.posOffset ?? 0,
-				top: positionV.posOffset ?? 0,
-				width: size.width,
-				height: size.height,
-				angle,
-				flipX,
-				flipY
-			};
-			mergePublishedDrawing(context.updateDrawingMap, {
-				unitId: context.unitId,
-				subUnitId: context.unitId,
-				drawingId: child.drawingId,
-				behindText,
-				selectable: context.selectable,
-				transform,
-				transforms: [transform],
-				isMultiTransform
-			});
-			this._collectGroupChildren(child.drawingId, context, behindText, isMultiTransform, visited);
+};
+/**
+* The command to transform non-inline drawing.
+*/
+const ITransformNonInlineDrawingCommand = {
+	id: "doc.command.transform-non-inline-drawing",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor, params) => {
+		var _renderManagerService2;
+		if (params == null) return false;
+		const { drawing, unitId, offset, docTransform, segmentId: newSegmentId, segmentPage } = params;
+		const renderManagerService = accessor.get(_univerjs_engine_render.IRenderManagerService);
+		const docSelectionRenderService = (_renderManagerService2 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.with(_univerjs_docs_ui.DocSelectionRenderService);
+		const renderObject = renderManagerService.getRenderUnitById(unitId);
+		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+		if (renderObject == null || scene == null || docSelectionRenderService == null) return false;
+		const transformer = scene.getTransformerByCreate();
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const documentDataModel = accessor.get(_univerjs_core.IUniverInstanceService).getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
+		if (documentDataModel == null) return false;
+		const rawActions = [];
+		const { drawingId } = drawing;
+		const actions = getDeleteAndInsertCustomBlockActions(newSegmentId, docSelectionRenderService.getSegment() ?? "", segmentPage, offset, drawingId, documentDataModel, docSelectionRenderService);
+		if (actions == null) return false;
+		if (actions.length > 0) rawActions.push(...actions);
+		const jsonX = _univerjs_core.JSONX.getInstance();
+		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
+		const { positionH: oldPositionH, positionV: oldPositionV, size: oldSize, angle: oldAngle } = oldDrawings[drawingId].docTransform;
+		if (!_univerjs_core.Tools.diffValue(oldPositionH, docTransform.positionH)) {
+			const updateAction = jsonX.replaceOp([
+				"drawings",
+				drawingId,
+				"docTransform",
+				"positionH"
+			], oldPositionH, docTransform.positionH);
+			rawActions.push(updateAction);
 		}
-	}
-	_calculateTableCellDrawingPositions(unitId, page, docsLeft, docsTop, updateDrawingMap, baseMarginTop, baseMarginLeft, selectable, overflowClipBounds) {
-		var _page$skeTables3;
-		(_page$skeTables3 = page.skeTables) === null || _page$skeTables3 === void 0 || _page$skeTables3.forEach((table) => {
-			table.rows.forEach((row) => {
-				row.cells.forEach((cell) => {
-					var _cell$skeDrawings, _cell$skeTables, _cell$skeColumnGroups;
-					if ((((_cell$skeDrawings = cell.skeDrawings) === null || _cell$skeDrawings === void 0 ? void 0 : _cell$skeDrawings.size) ?? 0) === 0 && (((_cell$skeTables = cell.skeTables) === null || _cell$skeTables === void 0 ? void 0 : _cell$skeTables.size) ?? 0) === 0 && (((_cell$skeColumnGroups = cell.skeColumnGroups) === null || _cell$skeColumnGroups === void 0 ? void 0 : _cell$skeColumnGroups.size) ?? 0) === 0) return;
-					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, selectable, {
-						left: marginLeft,
-						top: marginTop
-					}, overflowClipBounds);
-					this._calculateTableCellDrawingPositions(unitId, cell, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft, selectable, overflowClipBounds);
-					this._calculateColumnGroupDrawingPositions(unitId, cell, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft, selectable, overflowClipBounds);
-				});
-			});
-		});
-	}
-	_calculateColumnGroupDrawingPositions(unitId, page, docsLeft, docsTop, updateDrawingMap, baseMarginTop, baseMarginLeft, selectable, overflowClipBounds) {
-		var _page$skeColumnGroups3;
-		(_page$skeColumnGroups3 = page.skeColumnGroups) === null || _page$skeColumnGroups3 === void 0 || _page$skeColumnGroups3.forEach((columnGroup) => {
-			columnGroup.columns.forEach((column) => {
-				const nestedPage = column.page;
-				const marginTop = baseMarginTop + columnGroup.top + column.top + nestedPage.marginTop;
-				const marginLeft = baseMarginLeft + columnGroup.left + column.left + nestedPage.marginLeft;
-				const clipOffset = {
-					left: marginLeft,
-					top: marginTop
-				};
-				this._calculateDrawingPosition(unitId, nestedPage, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft, void 0, selectable, clipOffset, overflowClipBounds);
-				this._calculateTableCellDrawingPositions(unitId, nestedPage, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft, selectable, overflowClipBounds);
-				this._calculateColumnGroupDrawingPositions(unitId, nestedPage, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft, selectable, overflowClipBounds);
-			});
-		});
-	}
-	_drawingInitializeListener() {
-		const init = () => {
-			const skeleton = this._docSkeletonManagerService.getSkeleton();
-			if (skeleton == null) return;
-			this._drawingManagerService.initializeNotification(this._context.unitId);
-			this._refreshDrawing(skeleton);
+		if (!_univerjs_core.Tools.diffValue(oldPositionV, docTransform.positionV)) {
+			const updateAction = jsonX.replaceOp([
+				"drawings",
+				drawingId,
+				"docTransform",
+				"positionV"
+			], oldPositionV, docTransform.positionV);
+			rawActions.push(updateAction);
+		}
+		if (!_univerjs_core.Tools.diffValue(oldSize, docTransform.size)) {
+			const updateAction = jsonX.replaceOp([
+				"drawings",
+				drawingId,
+				"docTransform",
+				"size"
+			], oldSize, docTransform.size);
+			rawActions.push(updateAction);
+		}
+		if (!_univerjs_core.Tools.diffValue(oldAngle, docTransform.angle)) {
+			const updateAction = jsonX.replaceOp([
+				"drawings",
+				drawingId,
+				"docTransform",
+				"angle"
+			], oldAngle, docTransform.angle);
+			rawActions.push(updateAction);
+		}
+		const doMutation = {
+			id: _univerjs_docs.RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: null,
+				debounce: true
+			}
 		};
-		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));
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return _univerjs_core.JSONX.compose(acc, cur);
+		}, null);
+		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		const skeleton = renderObject.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+		accessor.get(DocRefreshDrawingsService).refreshDrawings(skeleton);
+		transformer.refreshControls();
+		return Boolean(result);
 	}
 };
-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
@@ -3182,12 +3447,26 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 		this._drawingManagerService = _drawingManagerService;
 		this._renderManagerService = _renderManagerService;
 		_defineProperty(this, "_liquid", new _univerjs_engine_render.Liquid());
-		_defineProperty(this, "_listenerOnImageMap", /* @__PURE__ */ new Set());
+		_defineProperty(this, "_listenerOnImageMap", /* @__PURE__ */ new Map());
 		_defineProperty(this, "_transformerCache", /* @__PURE__ */ new Map());
 		_defineProperty(this, "_anchorShape", void 0);
 		this._init();
 	}
+	dispose() {
+		var _this$_anchorShape;
+		for (const listener of this._listenerOnImageMap.values()) listener.dispose();
+		this._listenerOnImageMap.clear();
+		this._transformerCache.clear();
+		(_this$_anchorShape = this._anchorShape) === null || _this$_anchorShape === void 0 || _this$_anchorShape.dispose();
+		this._anchorShape = null;
+		super.dispose();
+	}
 	_init() {
+		this.disposeWithMe(this._renderManagerService.disposed$.subscribe((unitId) => {
+			var _this$_listenerOnImag;
+			(_this$_listenerOnImag = this._listenerOnImageMap.get(unitId)) === null || _this$_listenerOnImag === void 0 || _this$_listenerOnImag.dispose();
+			this._listenerOnImageMap.delete(unitId);
+		}));
 		this._listenDrawingFocus();
 	}
 	_listenDrawingFocus() {
@@ -3196,17 +3475,25 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 			for (const drawingParam of drawingParams) {
 				const { unitId } = drawingParam;
 				if (!this._listenerOnImageMap.has(unitId)) {
-					this._listenTransformerChange(unitId);
-					this._listenerOnImageMap.add(unitId);
+					const listener = this._listenTransformerChange(unitId);
+					if (listener) this._listenerOnImageMap.set(unitId, listener);
 				}
 			}
 		}));
 	}
 	_listenTransformerChange(unitId) {
-		var _this$_getSceneAndTra;
-		const transformer = (_this$_getSceneAndTra = this._getSceneAndTransformerByDrawingSearch(unitId)) === null || _this$_getSceneAndTra === void 0 ? void 0 : _this$_getSceneAndTra.transformer;
+		const context = this._getSceneAndTransformerByDrawingSearch(unitId);
+		const transformer = context === null || context === void 0 ? void 0 : context.transformer;
 		if (transformer == null) return;
-		this.disposeWithMe((0, _univerjs_core.toDisposable)(transformer.changeStart$.subscribe((state) => {
+		const listeners = new _univerjs_core.DisposableCollection();
+		listeners.add((0, _univerjs_core.toDisposable)(() => {
+			for (const [id, cached] of this._transformerCache) if (cached.drawing.unitId === unitId) this._transformerCache.delete(id);
+			if (this._anchorShape && this._anchorShape.getScene() === (context === null || context === void 0 ? void 0 : context.scene)) {
+				this._anchorShape.dispose();
+				this._anchorShape = null;
+			}
+		}));
+		listeners.add((0, _univerjs_core.toDisposable)(transformer.changeStart$.subscribe((state) => {
 			this._transformerCache.clear();
 			const { objects } = state;
 			for (const object of objects.values()) {
@@ -3218,7 +3505,7 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 				const drawingData = documentDataModel ? (_findDocDrawing = (0, _univerjs_docs_drawing.findDocDrawing)(documentDataModel.getSnapshot(), drawing.drawingId)) === null || _findDocDrawing === void 0 ? void 0 : _findDocDrawing.drawing : void 0;
 				if ((drawingData === null || drawingData === void 0 ? void 0 : drawingData.layoutType) === _univerjs_core.PositionedObjectLayoutType.INLINE) try {
 					object.setOpacity(.2);
-				} catch (e) {}
+				} catch {}
 				if (drawingData != null) this._transformerCache.set(drawing.drawingId, {
 					drawing: drawingData,
 					top,
@@ -3229,18 +3516,20 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 				});
 			}
 		})));
-		const throttleMultipleDrawingUpdate = (0, _univerjs_core.throttle)(this._updateMultipleDrawingDocTransform.bind(this), 50);
-		this.disposeWithMe((0, _univerjs_core.toDisposable)(transformer.changing$.subscribe((state) => {
+		listeners.add((0, _univerjs_core.toDisposable)(transformer.changeStart$.pipe((0, rxjs.switchMap)(() => transformer.changing$.pipe((0, rxjs.filter)(({ objects }) => objects.size > 1), (0, rxjs.throttleTime)(50, void 0, {
+			leading: true,
+			trailing: true
+		}), (0, rxjs.takeUntil)(transformer.changeEnd$)))).subscribe(({ objects }) => this._updateMultipleDrawingDocTransform(objects))));
+		listeners.add((0, _univerjs_core.toDisposable)(transformer.changing$.subscribe((state) => {
 			const { objects, offsetX, offsetY } = state;
-			if (objects.size > 1) throttleMultipleDrawingUpdate(objects);
-			else if (objects.size === 1) {
+			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 && offsetX != null && offsetY != null) this._updateInlineDrawingAnchor(drawingCache.drawing, offsetX, offsetY);
 			}
 		})));
-		this.disposeWithMe((0, _univerjs_core.toDisposable)(transformer.changeEnd$.subscribe((state) => {
+		listeners.add((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);
@@ -3248,7 +3537,7 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 				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) {}
+				} catch {}
 			}
 			if (this._anchorShape) this._anchorShape.hide();
 			if (objects.size > 1) this._updateMultipleDrawingDocTransform(objects);
@@ -3264,6 +3553,7 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 			}
 			this._transformerCache.clear();
 		})));
+		return listeners;
 	}
 	_updateMultipleDrawingDocTransform(objects) {
 		if (objects.size < 1) return;
@@ -3299,20 +3589,37 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 			if (oldTop !== top || oldLeft !== left) {
 				const verticalDelta = top - oldTop;
 				const horizontalDelta = left - oldLeft;
-				if (verticalDelta !== 0) drawings.push({
+				const { positionH, positionV } = drawingData.docTransform;
+				let resolvedPosition;
+				const hasHorizontalOffset = positionH.posOffset != null && positionH.align == null;
+				const hasVerticalOffset = positionV.posOffset != null && positionV.align == null;
+				if (!hasHorizontalOffset || !hasVerticalOffset) {
+					var _this$_renderManagerS;
+					const manager = (_this$_renderManagerS = this._renderManagerService.getRenderUnitById(unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(_univerjs_docs.DocSkeletonManagerService);
+					const skeleton = manager === null || manager === void 0 ? void 0 : manager.getSkeleton().getSkeletonData();
+					const viewModel = manager === null || manager === void 0 ? void 0 : manager.getViewModel();
+					const anchor = skeleton && viewModel ? findDrawingAnchor(unitId, drawing.drawingId, skeleton, viewModel.getEditArea(), drawingData) : null;
+					if (anchor) resolvedPosition = getDrawingWrappingPosition(anchor, drawingData.layoutType, void 0, void 0, {
+						left: horizontalDelta,
+						top: verticalDelta
+					});
+				}
+				const posOffsetV = hasVerticalOffset ? positionV.posOffset + verticalDelta : resolvedPosition === null || resolvedPosition === void 0 ? void 0 : resolvedPosition.positionV.posOffset;
+				const posOffsetH = hasHorizontalOffset ? positionH.posOffset + horizontalDelta : resolvedPosition === null || resolvedPosition === void 0 ? void 0 : resolvedPosition.positionH.posOffset;
+				if (verticalDelta !== 0 && posOffsetV != null) drawings.push({
 					drawingId: drawing.drawingId,
 					key: "positionV",
 					value: {
-						relativeFrom: drawingData.docTransform.positionV.relativeFrom,
-						posOffset: drawingData.docTransform.positionV.posOffset + verticalDelta
+						relativeFrom: positionV.relativeFrom,
+						posOffset: posOffsetV
 					}
 				});
-				if (horizontalDelta !== 0) drawings.push({
+				if (horizontalDelta !== 0 && posOffsetH != null) drawings.push({
 					drawingId: drawing.drawingId,
 					key: "positionH",
 					value: {
-						relativeFrom: drawingData.docTransform.positionH.relativeFrom,
-						posOffset: drawingData.docTransform.positionH.posOffset + horizontalDelta
+						relativeFrom: positionH.relativeFrom,
+						posOffset: posOffsetH
 					}
 				});
 			}
@@ -3323,12 +3630,6 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 			drawings
 		});
 	}
-	_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) {
 		if (this._transformerCache.size !== 1) return;
 		const { contentBoxPointGroup } = this._getInlineDrawingAnchor(drawing, offsetX, offsetY) ?? {};
@@ -3336,7 +3637,7 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 		this._createOrUpdateInlineAnchor(drawing.unitId, contentBoxPointGroup);
 	}
 	_getInlineDrawingAnchor(drawing, offsetX, offsetY) {
-		var _this$_renderManagerS;
+		var _this$_renderManagerS2;
 		const currentRender = this._renderManagerService.getRenderUnitById(drawing.unitId);
 		const skeleton = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
 		if (currentRender == null) return;
@@ -3351,7 +3652,7 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 		const HALF = .5;
 		const coord = this._getTransformCoordForDocumentOffset(documentComponent, activeViewport, offsetX, offsetY);
 		if (coord == null) return;
-		const docSelectionRenderService = (_this$_renderManagerS = this._renderManagerService.getRenderUnitById(drawing.unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(_univerjs_docs_ui.DocSelectionRenderService);
+		const docSelectionRenderService = (_this$_renderManagerS2 = this._renderManagerService.getRenderUnitById(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,
@@ -3385,7 +3686,7 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 		};
 	}
 	_getDrawingAnchor(drawing, object) {
-		var _this$_renderManagerS2, _glyphAnchor$parent, _column$parent, _column$parent2;
+		var _this$_renderManagerS3, _glyphAnchor$parent, _column$parent, _column$parent2;
 		const currentRender = this._renderManagerService.getRenderUnitById(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();
@@ -3416,7 +3717,7 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 		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.getRenderUnitById(drawing.unitId)) === null || _this$_renderManagerS2 === void 0 ? void 0 : _this$_renderManagerS2.with(_univerjs_docs_ui.DocSelectionRenderService);
+		const docSelectionRenderService = (_this$_renderManagerS3 = this._renderManagerService.getRenderUnitById(drawing.unitId)) === null || _this$_renderManagerS3 === void 0 ? void 0 : _this$_renderManagerS3.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,
@@ -3727,7 +4028,8 @@ function useDocDrawingPosition(props) {
 	const { unitId } = drawings[0];
 	const documentDataModel = univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
 	const documentFlavor = documentDataModel === null || documentDataModel === void 0 ? void 0 : documentDataModel.getSnapshot().documentStyle.documentFlavor;
-	const transformer = renderManagerService.getRenderUnitById(unitId).scene.getTransformerByCreate();
+	const renderObject = renderManagerService.getRenderUnitById(unitId);
+	const transformer = renderObject.scene.getTransformerByCreate();
 	const HORIZONTAL_RELATIVE_FROM = [
 		{
 			label: localeService.t("docs-drawing-ui.image-position.column"),
@@ -3774,7 +4076,7 @@ function useDocDrawingPosition(props) {
 	});
 	const [followTextMove, setFollowTextMove] = (0, react.useState)(true);
 	const [showPanel, setShowPanel] = (0, react.useState)(true);
-	function handlePositionChange(direction, value) {
+	function handlePositionChange(direction, value, positionH) {
 		var _renderManagerService;
 		const focusDrawings = drawingManagerService.getFocusDrawings();
 		if (focusDrawings.length === 0) return;
@@ -3788,74 +4090,43 @@ function useDocDrawingPosition(props) {
 		commandService.executeCommand(_univerjs_docs_drawing.UpdateDrawingDocTransformCommand.id, {
 			unitId: focusDrawings[0].unitId,
 			subUnitId: focusDrawings[0].subUnitId,
-			drawings: drawings.map((drawing) => ({
+			drawings: drawings.flatMap((drawing) => [{
 				drawingId: drawing.drawingId,
 				key: direction,
 				value
-			}))
+			}, ...positionH ? [{
+				drawingId: drawing.drawingId,
+				key: "positionH",
+				value: positionH
+			}] : []])
 		});
 		const docSelectionRenderService = (_renderManagerService = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(_univerjs_docs_ui.DocSelectionRenderService);
 		if (docSelectionRenderService) docSelectionRenderService.blur();
 		transformer.refreshControls();
 	}
+	function getFocusedDrawingAnchor() {
+		var _renderManagerService2, _findDocDrawing;
+		const drawing = drawingManagerService.getFocusDrawings()[0];
+		if (!drawing) return null;
+		const manager = (_renderManagerService2 = renderManagerService.getRenderUnitById(drawing.unitId)) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.with(_univerjs_docs.DocSkeletonManagerService);
+		const skeleton = manager === null || manager === void 0 ? void 0 : manager.getSkeleton().getSkeletonData();
+		const viewModel = manager === null || manager === void 0 ? void 0 : manager.getViewModel();
+		const snapshot = documentDataModel === null || documentDataModel === void 0 ? void 0 : documentDataModel.getSnapshot();
+		return skeleton && viewModel ? findDrawingAnchor(drawing.unitId, drawing.drawingId, skeleton, viewModel.getEditArea(), snapshot && ((_findDocDrawing = (0, _univerjs_docs_drawing.findDocDrawing)(snapshot, drawing.drawingId)) === null || _findDocDrawing === void 0 ? void 0 : _findDocDrawing.drawing)) : null;
+	}
 	function handleHorizontalRelativeFromChange(value) {
-		var _renderManagerService2;
-		const prevRelativeFrom = hPosition.relativeFrom;
-		const prevPosOffset = hPosition.posOffset;
 		const relativeFrom = [
 			_univerjs_core.ObjectRelativeFromH.COLUMN,
 			_univerjs_core.ObjectRelativeFromH.PAGE,
 			_univerjs_core.ObjectRelativeFromH.MARGIN
 		].find((reference) => String(reference) === value);
 		if (relativeFrom == null) return;
-		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.getRenderUnitById(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;
-			}
-			const headerPage = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(page.headerLayoutKey ?? 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(page.footerLayoutKey ?? pageWidth);
-			if (footerPage === null || footerPage === void 0 ? void 0 : footerPage.skeDrawings.has(drawingId)) {
-				drawing = footerPage === null || footerPage === void 0 ? void 0 : footerPage.skeDrawings.get(drawingId);
-				pageMarginLeft = marginLeft;
-				break;
-			}
-		}
-		if (drawing == null) return;
-		let delta = 0;
-		if (prevRelativeFrom === _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 ?? 0) - delta
-		});
+		if (hPosition.relativeFrom === relativeFrom) return;
+		const anchor = getFocusedDrawingAnchor();
+		if (!anchor) return;
+		handlePositionChange("positionH", getDrawingWrappingPosition(anchor, anchor.skeDrawing.drawingOrigin.layoutType, relativeFrom).positionH);
 	}
 	function handleVerticalRelativeFromChange(value) {
-		var _renderManagerService3, _renderManagerService4, _documentDataModel$ge, _glyph$parent, _column$parent;
-		const prevRelativeFrom = vPosition.relativeFrom;
-		const prevPosOffset = vPosition.posOffset;
 		const relativeFrom = [
 			_univerjs_core.ObjectRelativeFromV.LINE,
 			_univerjs_core.ObjectRelativeFromV.PAGE,
@@ -3863,44 +4134,22 @@ function useDocDrawingPosition(props) {
 			_univerjs_core.ObjectRelativeFromV.PARAGRAPH
 		].find((reference) => String(reference) === value);
 		if (relativeFrom == null) return;
-		if (prevRelativeFrom === relativeFrom) return;
-		const focusDrawings = drawingManagerService.getFocusDrawings();
-		if (focusDrawings.length === 0) return;
-		const { drawingId, unitId } = focusDrawings[0];
-		const documentDataModel = univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
-		const skeleton = (_renderManagerService3 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService3 === void 0 ? void 0 : _renderManagerService3.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
-		const docSelectionRenderService = (_renderManagerService4 = renderManagerService.getRenderUnitById(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)) === null || _documentDataModel$ge === void 0 || (_documentDataModel$ge = _documentDataModel$ge.getBody()) === null || _documentDataModel$ge === void 0 || (_documentDataModel$ge = _documentDataModel$ge.customBlocks) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge.find((c) => c.blockId === drawingId);
-		if (drawing == null || skeleton == null || docSelectionRenderService == null) return;
-		const { startIndex } = drawing;
-		const glyph = skeleton.findNodeByCharIndex(startIndex, segmentId, segmentPage);
-		const line = glyph === null || glyph === void 0 || (_glyph$parent = glyph.parent) === null || _glyph$parent === void 0 ? void 0 : _glyph$parent.parent;
-		const column = line === null || line === void 0 ? void 0 : line.parent;
-		const paragraphStartLine = column === null || column === void 0 ? void 0 : column.lines.find((l) => l.paragraphIndex === (line === null || line === void 0 ? void 0 : line.paragraphIndex) && l.paragraphStart);
-		const page = column === null || column === void 0 || (_column$parent = column.parent) === null || _column$parent === void 0 ? void 0 : _column$parent.parent;
-		if (glyph == null || line == null || paragraphStartLine == null || column == null || page == null) return;
-		let delta = 0;
-		if (prevRelativeFrom === _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 ?? 0) - delta
-		});
+		if (vPosition.relativeFrom === relativeFrom) return;
+		const anchor = getFocusedDrawingAnchor();
+		if (!anchor) return;
+		const initialPosition = getDrawingWrappingPosition(anchor, anchor.skeDrawing.drawingOrigin.layoutType, void 0, relativeFrom);
+		const position = documentDataModel ? resolveDrawingWrappingPosition(anchor, initialPosition, documentDataModel.getSnapshot(), localeService, renderObject.with(_univerjs_docs.DocSkeletonManagerService).getViewModel().getEditArea()) : initialPosition;
+		if (!position) return;
+		handlePositionChange("positionV", position.positionV, position.positionH);
 	}
 	function handleFollowTextMoveCheck(val) {
 		handleVerticalRelativeFromChange(val ? String(_univerjs_core.ObjectRelativeFromV.PARAGRAPH) : String(_univerjs_core.ObjectRelativeFromV.PAGE));
 	}
 	(0, react.useEffect)(() => {
 		function updateState(drawingParam) {
-			var _snapshot$drawings;
+			var _findDocDrawing2;
 			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];
+			const drawing = snapshot && ((_findDocDrawing2 = (0, _univerjs_docs_drawing.findDocDrawing)(snapshot, drawingParam.drawingId)) === null || _findDocDrawing2 === void 0 ? void 0 : _findDocDrawing2.drawing);
 			if (drawing == null) return;
 			const { layoutType } = drawing;
 			const { positionH, positionV } = drawing.docTransform;
@@ -5223,6 +5472,105 @@ let ComponentsController = class ComponentsController extends _univerjs_core.Dis
 };
 ComponentsController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager))], ComponentsController);
 
+//#endregion
+//#region src/controllers/render-controllers/doc-drawing-anchor.render-controller.ts
+const ANCHOR_PATH = "M 8 4 C 9.104 4 10 3.104 10 2 C 10 0.896 9.104 0 8 0 C 6.896 0 6 0.896 6 2 C 6 3.104 6.896 4 8 4 Z M 8 4 L 8 16 M 5 7.2 L 11 7.2 M 1 9.5 L 1 10.5 C 1 13.5 4.25 16 8 16 C 11.75 16 15 13.5 15 10.5 L 15 9.5 M 1 9.5 L 3.25 11 M 15 9.5 L 12.75 11";
+let DocDrawingAnchorRenderController = class DocDrawingAnchorRenderController extends _univerjs_core.Disposable {
+	constructor(_context, drawingManager, _skeletonManager, _selectionRender, _themeService) {
+		super();
+		this._context = _context;
+		this._skeletonManager = _skeletonManager;
+		this._selectionRender = _selectionRender;
+		this._themeService = _themeService;
+		_defineProperty(this, "_stroke", "");
+		_defineProperty(this, "_focused", []);
+		_defineProperty(this, "_markers", /* @__PURE__ */ new Map());
+		this.disposeWithMe(drawingManager.focus$.subscribe((drawings) => {
+			this._focused = (drawings ?? []).filter((drawing) => drawing.unitId === this._context.unitId);
+			this._updateMarkers();
+		}));
+		this.disposeWithMe(this._context.scene.beforeRender$.subscribe(() => this._updateMarkers()));
+		this.disposeWithMe(this._themeService.currentTheme$.subscribe(() => {
+			this._stroke = this._themeService.getColorFromTheme("gray.500");
+			this._updateMarkers();
+		}));
+		this.disposeWithMe({ dispose: () => {
+			this._markers.forEach((marker) => marker.dispose());
+			this._markers.clear();
+		} });
+	}
+	_updateMarkers() {
+		const { scene, unit, mainComponent } = this._context;
+		const snapshot = unit.getSnapshot();
+		const skeleton = this._skeletonManager.getSkeleton();
+		const active = /* @__PURE__ */ new Set();
+		const document = mainComponent;
+		if (skeleton && document) {
+			const config = document.getOffsetConfig();
+			const converter = new _univerjs_docs_ui.NodePositionConvertToCursor(config, skeleton);
+			const scale = scene.getAncestorScale();
+			for (const { drawingId } of this._focused) {
+				var _findDocDrawing, _glyph$parent, _line$parent, _startLine$divides$;
+				const drawing = (_findDocDrawing = (0, _univerjs_docs_drawing.findDocDrawing)(snapshot, drawingId)) === null || _findDocDrawing === void 0 ? void 0 : _findDocDrawing.drawing;
+				const anchor = findDrawingTextAnchor(snapshot, drawingId);
+				if (!drawing || drawing.layoutType === _univerjs_core.PositionedObjectLayoutType.INLINE || !anchor) continue;
+				if (anchor.segmentId !== this._selectionRender.getSegment()) continue;
+				const position = skeleton.findNodePositionByCharIndex(anchor.offset, true, anchor.segmentId, this._selectionRender.getSegmentPage());
+				const glyph = skeleton.findGlyphByPosition(position);
+				const line = glyph === null || glyph === void 0 || (_glyph$parent = glyph.parent) === null || _glyph$parent === void 0 ? void 0 : _glyph$parent.parent;
+				const startLine = (line === null || line === void 0 || (_line$parent = line.parent) === null || _line$parent === void 0 ? void 0 : _line$parent.lines.find((item) => item.paragraphIndex === line.paragraphIndex && item.paragraphStart)) ?? line;
+				const startGlyph = startLine === null || startLine === void 0 || (_startLine$divides$ = startLine.divides[0]) === null || _startLine$divides$ === void 0 ? void 0 : _startLine$divides$.glyphGroup[0];
+				const paragraphPosition = startGlyph && skeleton.findPositionByGlyph(startGlyph, this._selectionRender.getSegmentPage());
+				if (!paragraphPosition) continue;
+				const caret = {
+					...paragraphPosition,
+					isBack: true
+				};
+				const { contentBoxPointGroup } = converter.getRangePointData(caret, caret);
+				if (!contentBoxPointGroup.length) continue;
+				const bounds = (0, _univerjs_docs_ui.getAnchorBounding)(contentBoxPointGroup);
+				const left = config.docsLeft + bounds.left - 22 / scale.scaleX;
+				const top = config.docsTop + bounds.top;
+				let marker = this._markers.get(drawingId);
+				const stroke = this._stroke;
+				if (!marker) {
+					marker = new _univerjs_engine_render.Path(`__DocDrawingAnchor__${drawingId}`, {
+						data: ANCHOR_PATH,
+						width: 14,
+						height: 16,
+						stroke,
+						strokeWidth: 1.25,
+						strokeLineCap: "round",
+						strokeLineJoin: "round",
+						evented: false,
+						debounceParentDirty: false
+					});
+					this._markers.set(drawingId, marker);
+					scene.addObject(marker, _univerjs_docs_ui.TEXT_RANGE_LAYER_INDEX);
+				}
+				if (marker.left !== left || marker.top !== top || marker.scaleX !== 1 / scale.scaleX || marker.scaleY !== 1 / scale.scaleY) marker.transformByState({
+					left,
+					top,
+					scaleX: 1 / scale.scaleX,
+					scaleY: 1 / scale.scaleY
+				});
+				if (marker.stroke !== stroke) marker.setProps({ stroke });
+				active.add(drawingId);
+			}
+		}
+		for (const [id, marker] of this._markers) if (!active.has(id)) {
+			marker.dispose();
+			this._markers.delete(id);
+		}
+	}
+};
+DocDrawingAnchorRenderController = __decorate([
+	__decorateParam(1, _univerjs_drawing.IDrawingManagerService),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_docs.DocSkeletonManagerService)),
+	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_docs_ui.DocSelectionRenderService)),
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_core.ThemeService))
+], DocDrawingAnchorRenderController);
+
 //#endregion
 //#region src/controllers/shortcuts/drawing.shortcut.ts
 function whenDocDrawingFocused(contextService) {
@@ -5702,7 +6050,11 @@ let UniverDocsDrawingUIPlugin = class UniverDocsDrawingUIPlugin extends _univerj
 		this._injector.get(ComponentsController);
 	}
 	onReady() {
-		[[DocDrawingUpdateRenderController], [DocDrawingTransformUpdateController]].forEach((m) => this._renderManagerSrv.registerRenderModule(_univerjs_core.UniverInstanceType.UNIVER_DOC, m));
+		[
+			[DocDrawingUpdateRenderController],
+			[DocDrawingTransformUpdateController],
+			[DocDrawingAnchorRenderController]
+		].forEach((m) => this._renderManagerSrv.registerRenderModule(_univerjs_core.UniverInstanceType.UNIVER_DOC, m));
 		this._injector.get(DocDrawingAddRemoveController);
 		this._injector.get(DocDrawingUIController);
 		this._injector.get(DocDrawingTransformerController);
@@ -5733,7 +6085,7 @@ exports.DeleteDocDrawingsCommand = DeleteDocDrawingsCommand;
 exports.DocDrawingFloatingToolbarAdapterService = DocDrawingFloatingToolbarAdapterService;
 exports.DocDrawingPosition = DocDrawingPosition;
 exports.DocDrawingTextWrap = DocDrawingTextWrap;
-Object.defineProperty(exports, 'DocFloatDomController', {
+Object.defineProperty(exports, "DocFloatDomController", {
   enumerable: true,
   get: function () {
     return DocFloatDomController;
@@ -5750,13 +6102,13 @@ exports.MobileDocDrawingTextWrap = MobileDocDrawingTextWrap;
 exports.MoveDocDrawingsCommand = MoveDocDrawingsCommand;
 exports.SidebarDocDrawingOperation = SidebarDocDrawingOperation;
 exports.UngroupDocDrawingCommand = UngroupDocDrawingCommand;
-Object.defineProperty(exports, 'UniverDocsDrawingMobileUIPlugin', {
+Object.defineProperty(exports, "UniverDocsDrawingMobileUIPlugin", {
   enumerable: true,
   get: function () {
     return UniverDocsDrawingMobileUIPlugin;
   }
 });
-Object.defineProperty(exports, 'UniverDocsDrawingUIPlugin', {
+Object.defineProperty(exports, "UniverDocsDrawingUIPlugin", {
   enumerable: true,
   get: function () {
     return UniverDocsDrawingUIPlugin;