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

package/lib/es/index.js

@@ -1,12 +1,12 @@
 import { AlignTypeH, AlignTypeV, BooleanNumber, COLORS, CommandType, DOC_DRAWING_PRINTING_COMPONENT_KEY, DependentOn, Direction, Disposable, DisposableCollection, DocumentFlavor, DrawingTypeEnum, FOCUSING_COMMON_DRAWINGS, FOCUSING_DOC, FOCUSING_UNIVER_EDITOR, ICommandService, IConfigService, IContextService, IImageIoService, IUniverInstanceService, ImageSourceType, ImageUploadStatusType, Inject, Injector, JSONX, LifecycleService, LifecycleStages, LocaleService, ObjectRelativeFromH, ObjectRelativeFromV, Plugin, PositionedObjectLayoutType, RedoCommand, RxDisposable, TextX, TextXActionType, Tools, UndoCommand, UniverInstanceType, WrapTextType, fromEventSubject, generateRandomId, getRichTextEditPath, isInternalEditorID, merge, throttle, toDisposable } from "@univerjs/core";
 import { IDocDrawingAdapterService, IDocDrawingService, InsertDocDrawingCommand, RemoveDocDrawingCommand, SetDocDrawingArrangeCommand, TextWrappingStyle, UniverDocsDrawingPlugin, UpdateDocDrawingWrappingStyleCommand, UpdateDrawingDocTransformCommand, getDocDrawingRenderOrder } from "@univerjs/docs-drawing";
-import { CURSOR_TYPE, DocumentEditArea, DocumentSkeletonPageType, IRenderManagerService, Liquid, PageLayoutType, Rect, TRANSFORM_CHANGE_OBSERVABLE_TYPE, Vector2, getColor, getCurrentTypeOfRenderer, getDocsTableRenderViewport, getTableIdAndSliceIndex } from "@univerjs/engine-render";
+import { CURSOR_TYPE, DocumentEditArea, DocumentSkeletonPageType, IRenderManagerService, Liquid, PageLayoutType, Rect, TRANSFORM_CHANGE_OBSERVABLE_TYPE, UniverRenderEnginePlugin, Vector2, getColor, getCurrentTypeOfRenderer, getDocsTableRenderViewport, getTableIdAndSliceIndex } from "@univerjs/engine-render";
 import { Checkbox, InputNumber, MessageType, Radio, RadioGroup, Select, clsx, render, unmount } from "@univerjs/design";
-import { DocSelectionManagerService, DocSkeletonManagerService, RichTextEditingMutation, buildDocTransform, docDrawingPositionToTransform } from "@univerjs/docs";
-import { DOC_CONTENT_INSERT_MENU_ID, DOC_PARAGRAPH_T_INSERT_BELOW_MENU_ID, DOC_PARAGRAPH_T_INSERT_MENU_ID, DocCanvasPopManagerService, DocPrintInterceptorService, DocSelectionRenderService, EMPTY_PARAGRAPH_MENU_ID, IEditorService, INSERT_BELLOW_MENU_ID, NodePositionConvertToCursor, SetDocZoomRatioOperation, TEXT_RANGE_LAYER_INDEX, VIEWPORT_KEY, getAnchorBounding, getDocObject, getOneTextSelectionRange } from "@univerjs/docs-ui";
+import { DocSelectionManagerService, DocSkeletonManagerService, RichTextEditingMutation, UniverDocsPlugin, buildDocTransform, docDrawingPositionToTransform, isSheetLikeDocsCustomBlockChildType } from "@univerjs/docs";
+import { DOC_CONTENT_INSERT_MENU_ID, DOC_PARAGRAPH_T_INSERT_BELOW_MENU_ID, DOC_PARAGRAPH_T_INSERT_MENU_ID, DocCanvasPopManagerService, DocPrintInterceptorService, DocSelectionRenderService, EMPTY_PARAGRAPH_MENU_ID, IEditorService, INSERT_BELLOW_MENU_ID, NodePositionConvertToCursor, SetDocZoomRatioOperation, TEXT_RANGE_LAYER_INDEX, UniverDocsUIPlugin, VIEWPORT_KEY, getAnchorBounding, getOneTextSelectionRange, neoGetDocObject } from "@univerjs/docs-ui";
 import { DRAWING_IMAGE_ALLOW_IMAGE_LIST, DRAWING_IMAGE_COUNT_LIMIT, DRAWING_IMAGE_HEIGHT_LIMIT, DRAWING_IMAGE_WIDTH_LIMIT, IDrawingManagerService, UniverDrawingPlugin, getDrawingImageAllowSize, getDrawingShapeKeyByDrawingSearch, getImageSize } from "@univerjs/drawing";
-import { CanvasFloatDomService, ComponentManager, ContextMenuGroup, ContextMenuPosition, ILocalFileService, IMenuManagerService, IMessageService, IShortcutService, ISidebarService, KeyCode, MenuItemType, PrintFloatDomSingle, RibbonInsertGroup, UniverUIPlugin, connectInjector, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
-import { BehaviorSubject, Observable, debounceTime, filter, map, of, switchMap, takeUntil } from "rxjs";
+import { CanvasFloatDomService, ComponentManager, ContextMenuGroup, ContextMenuPosition, ILocalFileService, IMenuManagerService, IMessageService, IShortcutService, ISidebarService, KeyCode, MenuItemType, PrintFloatDomSingle, RibbonInsertGroup, connectInjector, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
+import { BehaviorSubject, Observable, debounceTime, filter, map, merge as merge$1, of, switchMap, takeUntil } from "rxjs";
 import { COMPONENT_IMAGE_POPUP_MENU, DrawingCommonPanel, DrawingRenderService, ImageCropperObject, ImageResetSizeOperation, OpenImageCropOperation, UniverDrawingUIPlugin } from "@univerjs/drawing-ui";
 import { useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -73,7 +73,7 @@ const UngroupDocDrawingCommand = {
 };
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -84,7 +84,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -97,14 +97,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.140.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.137.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -127,7 +127,7 @@ var DocRefreshDrawingsService = class {
 };
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -135,7 +135,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.140.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);
@@ -226,7 +226,7 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 				const scaleHeight = DRAWING_IMAGE_HEIGHT_LIMIT / height;
 				scale = Math.min(scaleWidth, scaleHeight);
 			}
-			const imagePosition = insertPosition !== null && insertPosition !== void 0 ? insertPosition : this._getCurrentImageInsertPosition();
+			const imagePosition = insertPosition ?? this._getCurrentImageInsertPosition();
 			const docTransform = this._getImagePosition(width * scale, height * scale, imagePosition);
 			if (docTransform == null) return;
 			const transform = docDrawingPositionToTransform(docTransform);
@@ -264,13 +264,12 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 	_isInsertInHeaderFooter() {
 		var _this$_renderManagerS;
 		const { unitId } = this._context;
-		const viewModel = (_this$_renderManagerS = this._renderManagerSrv.getRenderById(unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(DocSkeletonManagerService).getViewModel();
+		const viewModel = (_this$_renderManagerS = this._renderManagerSrv.getRenderUnitById(unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(DocSkeletonManagerService).getViewModel();
 		const editArea = viewModel === null || viewModel === void 0 ? void 0 : viewModel.getEditArea();
 		return editArea === DocumentEditArea.HEADER || editArea === DocumentEditArea.FOOTER;
 	}
 	_getImagePosition(imageWidth, imageHeight, insertPosition) {
-		var _ref;
-		return buildDocTransform(imageWidth, imageHeight, { left: ((_ref = insertPosition !== null && insertPosition !== void 0 ? insertPosition : this._getCurrentImageInsertPosition()) !== null && _ref !== void 0 ? _ref : {
+		return buildDocTransform(imageWidth, imageHeight, { left: (insertPosition ?? this._getCurrentImageInsertPosition() ?? {
 			left: 0,
 			top: 0
 		}).left });
@@ -324,8 +323,7 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 	}
 	_focusDrawingListener() {
 		this.disposeWithMe(this._drawingManagerService.focus$.subscribe((params) => {
-			var _this$_getCurrentScen;
-			const { transformer, docsLeft, docsTop } = (_this$_getCurrentScen = this._getCurrentSceneAndTransformer()) !== null && _this$_getCurrentScen !== void 0 ? _this$_getCurrentScen : {};
+			const { transformer, docsLeft, docsTop } = this._getCurrentSceneAndTransformer() ?? {};
 			if (params == null || params.length === 0) {
 				this._contextService.setContextValue(FOCUSING_COMMON_DRAWINGS, false);
 				this._docDrawingService.focusDrawing([]);
@@ -349,10 +347,9 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 		}));
 	}
 	_findSegmentIdByDrawingId(drawingId) {
-		var _body$customBlocks;
 		const { unit: DocDataModel } = this._context;
 		const { body, headers = {}, footers = {} } = DocDataModel.getSnapshot();
-		if (((_body$customBlocks = body === null || body === void 0 ? void 0 : body.customBlocks) !== null && _body$customBlocks !== void 0 ? _body$customBlocks : []).some((b) => b.blockId === drawingId)) return "";
+		if (((body === null || body === void 0 ? void 0 : body.customBlocks) ?? []).some((b) => b.blockId === drawingId)) return "";
 		for (const headerId of Object.keys(headers)) {
 			var _headers$headerId$bod;
 			if ((_headers$headerId$bod = headers[headerId].body.customBlocks) === null || _headers$headerId$bod === void 0 ? void 0 : _headers$headerId$bod.some((b) => b.blockId === drawingId)) return headerId;
@@ -367,7 +364,7 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 		var _this$_renderManagerS2;
 		if (!this._context) return;
 		const { unit: docDataModel, scene, unitId } = this._context;
-		const viewModel = (_this$_renderManagerS2 = this._renderManagerSrv.getRenderById(unitId)) === null || _this$_renderManagerS2 === void 0 ? void 0 : _this$_renderManagerS2.with(DocSkeletonManagerService).getViewModel();
+		const viewModel = (_this$_renderManagerS2 = this._renderManagerSrv.getRenderUnitById(unitId)) === null || _this$_renderManagerS2 === void 0 ? void 0 : _this$_renderManagerS2.with(DocSkeletonManagerService).getViewModel();
 		if (viewModel == null || docDataModel == null) return;
 		const { drawings = {} } = docDataModel.getSnapshot();
 		const isEditBody = viewModel.getEditArea() === DocumentEditArea.BODY;
@@ -398,7 +395,7 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 	_editAreaChangeListener() {
 		var _this$_renderManagerS3;
 		const { unitId } = this._context;
-		const viewModel = (_this$_renderManagerS3 = this._renderManagerSrv.getRenderById(unitId)) === null || _this$_renderManagerS3 === void 0 ? void 0 : _this$_renderManagerS3.with(DocSkeletonManagerService).getViewModel();
+		const viewModel = (_this$_renderManagerS3 = this._renderManagerSrv.getRenderUnitById(unitId)) === null || _this$_renderManagerS3 === void 0 ? void 0 : _this$_renderManagerS3.with(DocSkeletonManagerService).getViewModel();
 		if (viewModel == null) return;
 		this._updateDrawingsEditStatus();
 		this.disposeWithMe(viewModel.editAreaChange$.subscribe(() => {
@@ -426,9 +423,9 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 		}));
 	}
 	_setDrawingSelections(params) {
-		var _unit$getSnapshot$bod, _unit$getSnapshot$bod2;
+		var _unit$getSnapshot$bod;
 		const { unit } = this._context;
-		const customBlocks = (_unit$getSnapshot$bod = (_unit$getSnapshot$bod2 = unit.getSnapshot().body) === null || _unit$getSnapshot$bod2 === void 0 ? void 0 : _unit$getSnapshot$bod2.customBlocks) !== null && _unit$getSnapshot$bod !== void 0 ? _unit$getSnapshot$bod : [];
+		const customBlocks = ((_unit$getSnapshot$bod = unit.getSnapshot().body) === null || _unit$getSnapshot$bod === void 0 ? void 0 : _unit$getSnapshot$bod.customBlocks) ?? [];
 		const ranges = params.map((item) => {
 			const id = item.drawingId;
 			const block = customBlocks.find((b) => b.blockId === id);
@@ -462,10 +459,10 @@ const InsertDocImageCommand = {
 	id: "doc.command.insert-float-image",
 	type: CommandType.COMMAND,
 	handler: (accessor) => {
-		var _getCurrentTypeOfRend, _getCurrentTypeOfRend2;
+		var _getCurrentTypeOfRend;
 		const univerInstanceService = accessor.get(IUniverInstanceService);
 		const renderManagerService = accessor.get(IRenderManagerService);
-		return (_getCurrentTypeOfRend = (_getCurrentTypeOfRend2 = getCurrentTypeOfRenderer(UniverInstanceType.UNIVER_DOC, univerInstanceService, renderManagerService)) === null || _getCurrentTypeOfRend2 === void 0 ? void 0 : _getCurrentTypeOfRend2.with(DocDrawingUpdateRenderController).insertDocImage()) !== null && _getCurrentTypeOfRend !== void 0 ? _getCurrentTypeOfRend : false;
+		return ((_getCurrentTypeOfRend = getCurrentTypeOfRenderer(UniverInstanceType.UNIVER_DOC, univerInstanceService, renderManagerService)) === null || _getCurrentTypeOfRend === void 0 ? void 0 : _getCurrentTypeOfRend.with(DocDrawingUpdateRenderController).insertDocImage()) ?? false;
 	}
 };
 
@@ -529,7 +526,7 @@ const MoveDocDrawingsCommand = {
 		const drawings = docDrawingService.getFocusDrawings();
 		if (drawings.length === 0) return false;
 		const unitId = drawings[0].unitId;
-		const renderObject = renderManagerService.getRenderById(unitId);
+		const renderObject = renderManagerService.getRenderUnitById(unitId);
 		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
 		if (scene == null) return false;
 		const transformer = scene.getTransformerByCreate();
@@ -542,19 +539,10 @@ const MoveDocDrawingsCommand = {
 			const { positionH, positionV } = drawingData.docTransform;
 			const newPositionH = { ...positionH };
 			const newPositionV = { ...positionV };
-			if (direction === Direction.UP) {
-				var _newPositionV$posOffs;
-				newPositionV.posOffset = ((_newPositionV$posOffs = newPositionV.posOffset) !== null && _newPositionV$posOffs !== void 0 ? _newPositionV$posOffs : 0) - 2;
-			} else if (direction === Direction.DOWN) {
-				var _newPositionV$posOffs2;
-				newPositionV.posOffset = ((_newPositionV$posOffs2 = newPositionV.posOffset) !== null && _newPositionV$posOffs2 !== void 0 ? _newPositionV$posOffs2 : 0) + 2;
-			} else if (direction === Direction.LEFT) {
-				var _newPositionH$posOffs;
-				newPositionH.posOffset = ((_newPositionH$posOffs = newPositionH.posOffset) !== null && _newPositionH$posOffs !== void 0 ? _newPositionH$posOffs : 0) - 2;
-			} else if (direction === Direction.RIGHT) {
-				var _newPositionH$posOffs2;
-				newPositionH.posOffset = ((_newPositionH$posOffs2 = newPositionH.posOffset) !== null && _newPositionH$posOffs2 !== void 0 ? _newPositionH$posOffs2 : 0) + 2;
-			}
+			if (direction === Direction.UP) newPositionV.posOffset = (newPositionV.posOffset ?? 0) - 2;
+			else if (direction === Direction.DOWN) newPositionV.posOffset = (newPositionV.posOffset ?? 0) + 2;
+			else if (direction === Direction.LEFT) newPositionH.posOffset = (newPositionH.posOffset ?? 0) - 2;
+			else if (direction === Direction.RIGHT) newPositionH.posOffset = (newPositionH.posOffset ?? 0) + 2;
 			return {
 				drawingId,
 				key: direction === Direction.UP || direction === Direction.DOWN ? "positionV" : "positionH",
@@ -581,7 +569,7 @@ const ClearDocDrawingTransformerOperation = {
 		const renderManagerService = accessor.get(IRenderManagerService);
 		params.forEach((unitId) => {
 			var _renderManagerService;
-			(_renderManagerService = renderManagerService.getRenderById(unitId)) === null || _renderManagerService === void 0 || (_renderManagerService = _renderManagerService.scene.getTransformer()) === null || _renderManagerService === void 0 || _renderManagerService.debounceRefreshControls();
+			(_renderManagerService = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService === void 0 || (_renderManagerService = _renderManagerService.scene.getTransformer()) === null || _renderManagerService === void 0 || _renderManagerService.debounceRefreshControls();
 		});
 		return true;
 	}
@@ -669,7 +657,7 @@ function calcDocFloatDomPositionByRect(rect, scene, opacity = 1, angle = 0) {
 			left: false,
 			top: false
 		},
-		opacity: opacity !== null && opacity !== void 0 ? opacity : 1
+		opacity: opacity ?? 1
 	};
 }
 function calcDocFloatDomPosition(object, renderUnit) {
@@ -696,6 +684,9 @@ function pickValidCustomBlockRenderViewport(viewport) {
 	if (isPositiveNumber(viewport === null || viewport === void 0 ? void 0 : viewport.contentHeight)) result.contentHeight = viewport.contentHeight;
 	if (isPositiveNumber(viewport === null || viewport === void 0 ? void 0 : viewport.contentWidth)) result.contentWidth = viewport.contentWidth;
 	if (isPositiveNumber(viewport === null || viewport === void 0 ? void 0 : viewport.height)) result.height = viewport.height;
+	if (isPositiveNumber(viewport === null || viewport === void 0 ? void 0 : viewport.pageContentWidth)) result.pageContentWidth = viewport.pageContentWidth;
+	const viewScale = viewport === null || viewport === void 0 ? void 0 : viewport.viewScale;
+	if (isPositiveNumber(viewScale)) result.viewScale = viewScale;
 	if (isPositiveNumber(viewport === null || viewport === void 0 ? void 0 : viewport.viewportHeight)) result.viewportHeight = viewport.viewportHeight;
 	return Object.keys(result).length ? result : void 0;
 }
@@ -727,7 +718,7 @@ let DocFloatDomController = class DocFloatDomController extends Disposable {
 	}
 	_getSceneAndTransformerByDrawingSearch(unitId) {
 		if (unitId == null) return;
-		const renderObject = this._renderManagerService.getRenderById(unitId);
+		const renderObject = this._renderManagerService.getRenderUnitById(unitId);
 		if (renderObject == null) return null;
 		const scene = renderObject.scene;
 		return {
@@ -782,6 +773,10 @@ let DocFloatDomController = class DocFloatDomController extends Disposable {
 					position$,
 					id: rectParam.drawingId,
 					componentKey: rectParam.componentKey,
+					contentBox: isSheetLikeEmbedFloatDomRuntimeParam(runtimeParam) ? {
+						contentInset: 0,
+						wrapperInset: 0
+					} : void 0,
 					eventPassThrough: preserveRuntimeGeometry ? false : void 0,
 					preserveOnFocusChange: preserveRuntimeGeometry,
 					onPointerDown: (evt) => {
@@ -819,7 +814,7 @@ let DocFloatDomController = class DocFloatDomController extends Disposable {
 			params.forEach((param) => {
 				var _this$_canvasFloatDom;
 				const floatDomInfo = this._domLayerInfoMap.get(param.drawingId);
-				if (!floatDomInfo) return;
+				if (!floatDomInfo || floatDomInfo.unitId !== param.unitId) return;
 				const runtimeParam = param;
 				const runtimeViewport = pickValidCustomBlockRenderViewport(runtimeParam.customBlockRenderViewport);
 				if (runtimeViewport) floatDomInfo.runtimeViewport = runtimeViewport;
@@ -863,7 +858,7 @@ let DocFloatDomController = class DocFloatDomController extends Disposable {
 		this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_DOC).pipe(map((documentDataModel) => {
 			if (!documentDataModel) return null;
 			const unitId = documentDataModel.getUnitId();
-			const render = this._renderManagerService.getRenderById(unitId);
+			const render = this._renderManagerService.getRenderUnitById(unitId);
 			return render ? {
 				render,
 				unitId
@@ -876,12 +871,14 @@ let DocFloatDomController = class DocFloatDomController extends Disposable {
 		this.disposeWithMe(this._commandService.onCommandExecuted((commandInfo) => {
 			if (commandInfo.id === SetDocZoomRatioOperation.id) {
 				const { unitId } = commandInfo.params;
-				updateDoc(unitId);
+				globalThis.queueMicrotask(() => {
+					if (!this._disposed) updateDoc(unitId);
+				});
 			}
 		}));
 	}
 	insertFloatDom(floatDom, opts) {
-		var _skeleton$getSkeleton, _opts$width, _opts$drawingId;
+		var _skeleton$getSkeleton;
 		const currentDoc = this._univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
 		if (!currentDoc) return false;
 		const render = this._getSceneAndTransformerByDrawingSearch(currentDoc.getUnitId());
@@ -892,7 +889,7 @@ let DocFloatDomController = class DocFloatDomController extends Disposable {
 		const width = pageWidth - marginLeft - marginRight;
 		const docTransform = {
 			size: {
-				width: (_opts$width = opts.width) !== null && _opts$width !== void 0 ? _opts$width : width,
+				width: opts.width ?? width,
 				height: opts.height
 			},
 			positionH: {
@@ -905,7 +902,7 @@ let DocFloatDomController = class DocFloatDomController extends Disposable {
 			},
 			angle: 0
 		};
-		const drawingId = (_opts$drawingId = opts.drawingId) !== null && _opts$drawingId !== void 0 ? _opts$drawingId : generateRandomId();
+		const drawingId = opts.drawingId ?? generateRandomId();
 		const params = {
 			unitId: currentDoc.getUnitId(),
 			drawings: [{
@@ -940,20 +937,16 @@ function syncRectWithRuntimeParam(rect, param, fallbackViewport, fallbackTransfo
 	return true;
 }
 function getRuntimeTransform(param, rect, fallbackViewport, fallbackTransform, preserveRuntimeGeometry) {
-	var _param$transform, _param$transforms, _param$customBlockRen, _runtimeViewport$heig2;
-	const transform = (_param$transform = param.transform) !== null && _param$transform !== void 0 ? _param$transform : (_param$transforms = param.transforms) === null || _param$transforms === void 0 ? void 0 : _param$transforms[0];
-	const runtimeViewport = (_param$customBlockRen = param.customBlockRenderViewport) !== null && _param$customBlockRen !== void 0 ? _param$customBlockRen : fallbackViewport;
-	if (!param.customBlockRenderViewport && preserveRuntimeGeometry && fallbackTransform && transform) {
-		var _fallbackTransform$wi, _fallbackTransform$he;
-		return {
-			...transform,
-			width: (_fallbackTransform$wi = fallbackTransform.width) !== null && _fallbackTransform$wi !== void 0 ? _fallbackTransform$wi : transform.width,
-			height: (_fallbackTransform$he = fallbackTransform.height) !== null && _fallbackTransform$he !== void 0 ? _fallbackTransform$he : transform.height
-		};
-	}
+	var _param$transforms;
+	const transform = param.transform ?? ((_param$transforms = param.transforms) === null || _param$transforms === void 0 ? void 0 : _param$transforms[0]);
+	const runtimeViewport = param.customBlockRenderViewport ?? fallbackViewport;
+	if (!param.customBlockRenderViewport && preserveRuntimeGeometry && fallbackTransform && transform) return {
+		...transform,
+		width: fallbackTransform.width ?? transform.width,
+		height: fallbackTransform.height ?? transform.height
+	};
 	if (!transform) {
-		var _runtimeViewport$heig;
-		const height = (_runtimeViewport$heig = runtimeViewport === null || runtimeViewport === void 0 ? void 0 : runtimeViewport.height) !== null && _runtimeViewport$heig !== void 0 ? _runtimeViewport$heig : runtimeViewport === null || runtimeViewport === void 0 ? void 0 : runtimeViewport.contentHeight;
+		const height = (runtimeViewport === null || runtimeViewport === void 0 ? void 0 : runtimeViewport.height) ?? (runtimeViewport === null || runtimeViewport === void 0 ? void 0 : runtimeViewport.contentHeight);
 		if (!isPositiveNumber(height)) return;
 		return {
 			left: rect.left,
@@ -963,7 +956,7 @@ function getRuntimeTransform(param, rect, fallbackViewport, fallbackTransform, p
 			angle: rect.angle
 		};
 	}
-	const height = (_runtimeViewport$heig2 = runtimeViewport === null || runtimeViewport === void 0 ? void 0 : runtimeViewport.height) !== null && _runtimeViewport$heig2 !== void 0 ? _runtimeViewport$heig2 : runtimeViewport === null || runtimeViewport === void 0 ? void 0 : runtimeViewport.contentHeight;
+	const height = (runtimeViewport === null || runtimeViewport === void 0 ? void 0 : runtimeViewport.height) ?? (runtimeViewport === null || runtimeViewport === void 0 ? void 0 : runtimeViewport.contentHeight);
 	if (!isPositiveNumber(height)) return transform;
 	return {
 		...transform,
@@ -976,6 +969,11 @@ function isEmbedFloatDomRuntimeParam(param) {
 	const candidate = data;
 	return candidate.version === 1 && typeof candidate.embedId === "string" && typeof candidate.hostAnchorId === "string";
 }
+function isSheetLikeEmbedFloatDomRuntimeParam(param) {
+	if (!isEmbedFloatDomRuntimeParam(param)) return false;
+	const data = param.data;
+	return !!data && typeof data === "object" && "childType" in data && typeof data.childType === "number" && isSheetLikeDocsCustomBlockChildType(data.childType);
+}
 function createTransformFromRect(rect) {
 	return {
 		angle: rect.angle,
@@ -1196,7 +1194,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-drawing-ui";
-var version = "1.0.0-alpha.7";
+var version = "1.0.0-beta.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -1227,7 +1225,7 @@ const DocDrawingPosition = (props) => {
 	var _renderManagerService;
 	const renderManagerService = useDependency(IRenderManagerService);
 	const drawingParam = props.drawings[0];
-	const scene = drawingParam ? (_renderManagerService = renderManagerService.getRenderById(drawingParam.unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.scene : void 0;
+	const scene = drawingParam ? (_renderManagerService = renderManagerService.getRenderUnitById(drawingParam.unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.scene : void 0;
 	return drawingParam && scene ? /* @__PURE__ */ jsx(DocDrawingPositionContent, { ...props }) : null;
 };
 function DocDrawingPositionContent(props) {
@@ -1240,7 +1238,7 @@ function DocDrawingPositionContent(props) {
 	const { unitId } = drawings[0];
 	const documentDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
 	const documentFlavor = documentDataModel === null || documentDataModel === void 0 ? void 0 : documentDataModel.getSnapshot().documentStyle.documentFlavor;
-	const transformer = renderManagerService.getRenderById(unitId).scene.getTransformerByCreate();
+	const transformer = renderManagerService.getRenderUnitById(unitId).scene.getTransformerByCreate();
 	const HORIZONTAL_RELATIVE_FROM = [
 		{
 			label: localeService.t("docs-drawing-ui.image-position.column"),
@@ -1309,7 +1307,7 @@ function DocDrawingPositionContent(props) {
 				value
 			}))
 		});
-		const docSelectionRenderService = (_renderManagerService2 = renderManagerService.getRenderById(unitId)) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.with(DocSelectionRenderService);
+		const docSelectionRenderService = (_renderManagerService2 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.with(DocSelectionRenderService);
 		if (docSelectionRenderService) docSelectionRenderService.blur();
 		transformer.refreshControls();
 	}
@@ -1325,7 +1323,7 @@ function DocDrawingPositionContent(props) {
 		const unitId = focusDrawings[0].unitId;
 		let drawing = null;
 		let pageMarginLeft = 0;
-		const skeleton = (_renderManagerService3 = renderManagerService.getRenderById(unitId)) === null || _renderManagerService3 === void 0 ? void 0 : _renderManagerService3.with(DocSkeletonManagerService).getSkeleton();
+		const skeleton = (_renderManagerService3 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService3 === void 0 ? void 0 : _renderManagerService3.with(DocSkeletonManagerService).getSkeleton();
 		const skeletonData = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getSkeletonData();
 		if (skeletonData == null) return;
 		const { pages, skeHeaders, skeFooters } = skeletonData;
@@ -1359,7 +1357,7 @@ function DocDrawingPositionContent(props) {
 		else if (relativeFrom === ObjectRelativeFromH.PAGE) {}
 		handlePositionChange("positionH", {
 			relativeFrom,
-			posOffset: (prevPosOffset !== null && prevPosOffset !== void 0 ? prevPosOffset : 0) - delta
+			posOffset: (prevPosOffset ?? 0) - delta
 		});
 	}
 	function handleVerticalRelativeFromChange(value) {
@@ -1394,7 +1392,7 @@ function DocDrawingPositionContent(props) {
 		else if (relativeFrom === ObjectRelativeFromV.PAGE) delta -= page.marginTop;
 		handlePositionChange("positionV", {
 			relativeFrom,
-			posOffset: (prevPosOffset !== null && prevPosOffset !== void 0 ? prevPosOffset : 0) - delta
+			posOffset: (prevPosOffset ?? 0) - delta
 		});
 	}
 	function updateState(drawingParam) {
@@ -1706,7 +1704,7 @@ const IMoveInlineDrawingCommand = {
 	id: "doc.command.move-inline-drawing",
 	type: CommandType.COMMAND,
 	handler: (accessor, params) => {
-		var _renderManagerService, _docSelectionRenderSe;
+		var _renderManagerService;
 		if (params == null) return false;
 		const { drawing, unitId, offset, segmentId: newSegmentId, segmentPage, needRefreshDrawings } = params;
 		const renderManagerService = accessor.get(IRenderManagerService);
@@ -1727,7 +1725,7 @@ const IMoveInlineDrawingCommand = {
 		}
 		const rawActions = [];
 		const { drawingId } = drawing;
-		const actions = getDeleteAndInsertCustomBlockActions(newSegmentId, (_docSelectionRenderSe = docSelectionRenderService.getSegment()) !== null && _docSelectionRenderSe !== void 0 ? _docSelectionRenderSe : "", segmentPage, offset, drawingId, documentDataModel, docSelectionRenderService);
+		const actions = getDeleteAndInsertCustomBlockActions(newSegmentId, docSelectionRenderService.getSegment() ?? "", segmentPage, offset, drawingId, documentDataModel, docSelectionRenderService);
 		if (actions == null || actions.length === 0) {
 			docRefreshDrawingsService.refreshDrawings(skeleton);
 			transformer.refreshControls();
@@ -1757,7 +1755,7 @@ const ITransformNonInlineDrawingCommand = {
 	id: "doc.command.transform-non-inline-drawing",
 	type: CommandType.COMMAND,
 	handler: (accessor, params) => {
-		var _renderManagerService2, _docSelectionRenderSe2;
+		var _renderManagerService2;
 		if (params == null) return false;
 		const { drawing, unitId, offset, docTransform, segmentId: newSegmentId, segmentPage } = params;
 		const renderManagerService = accessor.get(IRenderManagerService);
@@ -1771,7 +1769,7 @@ const ITransformNonInlineDrawingCommand = {
 		if (documentDataModel == null) return false;
 		const rawActions = [];
 		const { drawingId } = drawing;
-		const actions = getDeleteAndInsertCustomBlockActions(newSegmentId, (_docSelectionRenderSe2 = docSelectionRenderService.getSegment()) !== null && _docSelectionRenderSe2 !== void 0 ? _docSelectionRenderSe2 : "", segmentPage, offset, drawingId, documentDataModel, docSelectionRenderService);
+		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 = JSONX.getInstance();
@@ -1901,10 +1899,11 @@ function DocDrawingTextWrapContent(props) {
 	}
 	function handleDistToTextChange(value, direction) {
 		if (value == null) return;
-		setDistToText({
+		const newDistToText = {
 			...distToText,
 			[direction]: value
-		});
+		};
+		setDistToText(newDistToText);
 		const focusDrawings = drawingManagerService.getFocusDrawings();
 		if (focusDrawings.length === 0) return;
 		const drawings = focusDrawings.map((drawing) => {
@@ -2266,7 +2265,7 @@ let DocDrawingAddRemoveController = class DocDrawingAddRemoveController extends
 		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
 			if (command.id !== UpdateDrawingDocTransformCommand.id && command.id !== UpdateDocDrawingWrappingStyleCommand.id) return;
 			const { unitId } = command.params;
-			const renderObject = this._renderManagerService.getRenderById(unitId);
+			const renderObject = this._renderManagerService.getRenderUnitById(unitId);
 			const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
 			if (renderObject == null || scene == null) return;
 			this._docRefreshDrawingsService.refreshDrawings(renderObject.with(DocSkeletonManagerService).getSkeleton());
@@ -2280,23 +2279,23 @@ let DocDrawingAddRemoveController = class DocDrawingAddRemoveController extends
 			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 (scene == null) return false;
+			if (renderObject == null || scene == null) return false;
+			this._docRefreshDrawingsService.refreshDrawings(renderObject.with(DocSkeletonManagerService).getSkeleton());
 			scene.getTransformerByCreate().refreshControls();
 		}));
 	}
 	_preserveWrappingStylePosition(params) {
-		var _documentDataModel$ge;
 		if (params.wrappingStyle === TextWrappingStyle.INLINE) return;
 		const { unitId } = params;
 		const documentDataModel = this._univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
-		const renderObject = this._renderManagerService.getRenderById(unitId);
+		const renderObject = this._renderManagerService.getRenderUnitById(unitId);
 		const skeletonManager = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(DocSkeletonManagerService);
 		const skeletonData = skeletonManager === null || skeletonManager === void 0 ? void 0 : skeletonManager.getSkeleton().getSkeletonData();
 		const viewModel = skeletonManager === null || skeletonManager === void 0 ? void 0 : skeletonManager.getViewModel();
 		if (!documentDataModel || !skeletonData || !viewModel) return;
 		const editArea = viewModel.getEditArea();
 		const { pages, skeHeaders, skeFooters } = skeletonData;
-		const oldDrawings = (_documentDataModel$ge = documentDataModel.getDrawings()) !== null && _documentDataModel$ge !== void 0 ? _documentDataModel$ge : {};
+		const oldDrawings = documentDataModel.getDrawings() ?? {};
 		params.drawings = params.drawings.map((drawing) => {
 			const oldDrawing = oldDrawings[drawing.drawingId];
 			if (!oldDrawing) return drawing;
@@ -2594,8 +2593,7 @@ function getDocsTableCellDrawingOffset(unitId, table, row, cell) {
 	};
 }
 function hasHorizontalTableViewport(viewport) {
-	var _viewport$leadingInse, _viewport$trailingIns;
-	return viewport != null && ((_viewport$leadingInse = viewport.leadingInsetLeft) !== null && _viewport$leadingInse !== void 0 ? _viewport$leadingInse : 0) + viewport.contentWidth + ((_viewport$trailingIns = viewport.trailingInsetRight) !== null && _viewport$trailingIns !== void 0 ? _viewport$trailingIns : 0) > viewport.viewportWidth;
+	return viewport != null && (viewport.leadingInsetLeft ?? 0) + viewport.contentWidth + (viewport.trailingInsetRight ?? 0) > viewport.viewportWidth;
 }
 let DocDrawingTransformUpdateController = class DocDrawingTransformUpdateController extends Disposable {
 	constructor(_context, _docSkeletonManagerService, _commandService, _editorService, _drawingManagerService, _docRefreshDrawingsService, _univerInstanceService, _lifecycleService) {
@@ -2615,7 +2613,7 @@ let DocDrawingTransformUpdateController = class DocDrawingTransformUpdateControl
 	_initialize() {
 		this._initialRenderRefresh();
 		this._drawingInitializeListener();
-		this._initResize();
+		this._initTransformRefresh();
 	}
 	_initialRenderRefresh() {
 		this.disposeWithMe(this._docSkeletonManagerService.currentSkeleton$.subscribe((documentSkeleton) => {
@@ -2644,8 +2642,8 @@ let DocDrawingTransformUpdateController = class DocDrawingTransformUpdateControl
 			}
 		}));
 	}
-	_initResize() {
-		this.disposeWithMe(fromEventSubject(this._context.engine.onTransformChange$).pipe(filter((evt) => evt.type === TRANSFORM_CHANGE_OBSERVABLE_TYPE.resize), debounceTime(16)).subscribe(() => {
+	_initTransformRefresh() {
+		this.disposeWithMe(merge$1(fromEventSubject(this._context.engine.onTransformChange$).pipe(filter((evt) => evt.type === TRANSFORM_CHANGE_OBSERVABLE_TYPE.resize)), fromEventSubject(this._context.scene.onTransformChange$).pipe(filter((evt) => evt.type === TRANSFORM_CHANGE_OBSERVABLE_TYPE.scale))).pipe(debounceTime(16)).subscribe(() => {
 			var _scene$getTransformer;
 			const skeleton = this._docSkeletonManagerService.getSkeleton();
 			const { scene } = this._context;
@@ -2699,21 +2697,17 @@ let DocDrawingTransformUpdateController = class DocDrawingTransformUpdateControl
 		this._handleMultiDrawingsTransform(multiDrawings);
 	}
 	_getStaleNonMultiDrawings(unitId, updateDrawingMap) {
-		var _this$_drawingManager;
-		const drawingData = (_this$_drawingManager = this._drawingManagerService.getDrawingData(unitId, unitId)) !== null && _this$_drawingManager !== void 0 ? _this$_drawingManager : {};
-		return Object.values(drawingData).filter((drawing) => drawing.isMultiTransform !== BooleanNumber.TRUE).filter((drawing) => updateDrawingMap[drawing.drawingId] == null).map((drawing) => {
-			var _drawing$transforms, _drawing$isMultiTrans;
-			return {
-				unitId,
-				subUnitId: unitId,
-				drawingId: drawing.drawingId,
-				behindText: false,
-				hidden: true,
-				transform: drawing.transform,
-				transforms: (_drawing$transforms = drawing.transforms) !== null && _drawing$transforms !== void 0 ? _drawing$transforms : [],
-				isMultiTransform: (_drawing$isMultiTrans = drawing.isMultiTransform) !== null && _drawing$isMultiTrans !== void 0 ? _drawing$isMultiTrans : BooleanNumber.FALSE
-			};
-		});
+		const drawingData = this._drawingManagerService.getDrawingData(unitId, unitId) ?? {};
+		return Object.values(drawingData).filter((drawing) => drawing.isMultiTransform !== BooleanNumber.TRUE).filter((drawing) => updateDrawingMap[drawing.drawingId] == null).map((drawing) => ({
+			unitId,
+			subUnitId: unitId,
+			drawingId: drawing.drawingId,
+			behindText: false,
+			hidden: true,
+			transform: drawing.transform,
+			transforms: drawing.transforms ?? [],
+			isMultiTransform: drawing.isMultiTransform ?? BooleanNumber.FALSE
+		}));
 	}
 	_handleMultiDrawingsTransform(multiDrawings) {
 		const { scene, unitId } = this._context;
@@ -2785,8 +2779,8 @@ let DocDrawingTransformUpdateController = class DocDrawingTransformUpdateControl
 				height
 			}) : void 0;
 			const transform = {
-				left: (pageRelativeLeft !== null && pageRelativeLeft !== void 0 ? pageRelativeLeft : aLeft) + docsLeft + (pageRelativeLeft == null ? this._liquid.x : pageOffsetLeft),
-				top: (pageRelativeTop !== null && pageRelativeTop !== void 0 ? pageRelativeTop : aTop) + docsTop + (pageRelativeTop == null ? this._liquid.y : pageOffsetTop),
+				left: (pageRelativeLeft ?? aLeft) + docsLeft + (pageRelativeLeft == null ? this._liquid.x : pageOffsetLeft),
+				top: (pageRelativeTop ?? aTop) + docsTop + (pageRelativeTop == null ? this._liquid.y : pageOffsetTop),
 				width,
 				height,
 				angle,
@@ -2867,6 +2861,28 @@ function getDocsTableCellAnchorContext(unitId, cell) {
 		table
 	};
 }
+function shouldUseDocsDrawingOuterPageOrigin(config) {
+	const { drawing, height, hostPage, page, width } = config;
+	if (drawing.layoutType !== PositionedObjectLayoutType.WRAP_NONE) return false;
+	return getDocsPageRelativeDrawingAnchorPage({
+		page,
+		clipPage: getDocsDrawingClipPage({
+			drawing: {
+				behindText: getDocsDrawingBehindText({
+					drawingOrigin: drawing,
+					hostPage
+				}),
+				transform: {
+					width,
+					height
+				}
+			},
+			hostPage,
+			page
+		}),
+		hostPage
+	}) != null;
+}
 let DocDrawingTransformerController = class DocDrawingTransformerController extends Disposable {
 	constructor(_commandService, _univerInstanceService, _drawingManagerService, _renderManagerService) {
 		super();
@@ -2923,7 +2939,6 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 			}
 		})));
 		const throttleMultipleDrawingUpdate = throttle(this._updateMultipleDrawingDocTransform.bind(this), 50);
-		throttle(this._nonInlineDrawingTransform.bind(this), 50);
 		this.disposeWithMe(toDisposable(transformer.changing$.subscribe((state) => {
 			const { objects, offsetX, offsetY } = state;
 			if (objects.size > 1) throttleMultipleDrawingUpdate(objects);
@@ -2931,7 +2946,6 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 				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 !== PositionedObjectLayoutType.INLINE) {}
 				if (drawingCache && drawingCache.drawing.layoutType === PositionedObjectLayoutType.INLINE && offsetX != null && offsetY != null) this._updateInlineDrawingAnchor(drawingCache.drawing, offsetX, offsetY);
 			}
 		})));
@@ -3025,15 +3039,14 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 		this._getDrawingAnchor(drawingCache.drawing, object);
 	}
 	_updateInlineDrawingAnchor(drawing, offsetX, offsetY) {
-		var _this$_getInlineDrawi;
 		if (this._transformerCache.size !== 1) return;
-		const { contentBoxPointGroup } = (_this$_getInlineDrawi = this._getInlineDrawingAnchor(drawing, offsetX, offsetY)) !== null && _this$_getInlineDrawi !== void 0 ? _this$_getInlineDrawi : {};
+		const { contentBoxPointGroup } = this._getInlineDrawingAnchor(drawing, offsetX, offsetY) ?? {};
 		if (contentBoxPointGroup == null) return;
 		this._createOrUpdateInlineAnchor(drawing.unitId, contentBoxPointGroup);
 	}
 	_getInlineDrawingAnchor(drawing, offsetX, offsetY) {
-		var _this$_renderManagerS, _getOneTextSelectionR;
-		const currentRender = this._renderManagerService.getRenderById(drawing.unitId);
+		var _this$_renderManagerS;
+		const currentRender = this._renderManagerService.getRenderUnitById(drawing.unitId);
 		const skeleton = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(DocSkeletonManagerService).getSkeleton();
 		if (currentRender == null) return;
 		const { mainComponent, scene } = currentRender;
@@ -3047,7 +3060,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.getRenderById(drawing.unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(DocSelectionRenderService);
+		const docSelectionRenderService = (_this$_renderManagerS = this._renderManagerService.getRenderUnitById(drawing.unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(DocSelectionRenderService);
 		if (docSelectionRenderService == null) return;
 		const nodeInfo = skeleton === null || skeleton === void 0 ? void 0 : skeleton.findNodeByCoord(coord, pageLayoutType, pageMarginLeft, pageMarginTop, {
 			strict: false,
@@ -3063,14 +3076,14 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 		}
 		if (glyphAnchor == null) return;
 		const nodePosition = skeleton === null || skeleton === void 0 ? void 0 : skeleton.findPositionByGlyph(glyphAnchor, segmentPageIndex);
-		const docObject = this._getDocObject();
-		if (nodePosition == null || skeleton == null || docObject == null) return;
+		const docObject = neoGetDocObject(currentRender);
+		if (nodePosition == null || skeleton == null) return;
 		const positionWithIsBack = {
 			...nodePosition,
 			isBack
 		};
 		const { cursorList, contentBoxPointGroup } = new NodePositionConvertToCursor(docObject.document.getOffsetConfig(), skeleton).getRangePointData(positionWithIsBack, positionWithIsBack);
-		const { startOffset } = (_getOneTextSelectionR = getOneTextSelectionRange(cursorList)) !== null && _getOneTextSelectionR !== void 0 ? _getOneTextSelectionR : {};
+		const { startOffset } = getOneTextSelectionRange(cursorList) ?? {};
 		if (startOffset == null) return;
 		return {
 			offset: startOffset,
@@ -3080,8 +3093,8 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 		};
 	}
 	_getDrawingAnchor(drawing, object) {
-		var _this$_renderManagerS2, _glyphAnchor$parent, _column$parent$top, _column$parent, _column$lines$find, _column$parent2, _tableCellContext$hos, _getOneTextSelectionR2;
-		const currentRender = this._renderManagerService.getRenderById(drawing.unitId);
+		var _this$_renderManagerS2, _glyphAnchor$parent, _column$parent, _column$parent2;
+		const currentRender = this._renderManagerService.getRenderUnitById(drawing.unitId);
 		const skeleton = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(DocSkeletonManagerService).getSkeleton();
 		const skeletonData = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getSkeletonData();
 		if (skeletonData == null || currentRender == null) return;
@@ -3111,7 +3124,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.getRenderById(drawing.unitId)) === null || _this$_renderManagerS2 === void 0 ? void 0 : _this$_renderManagerS2.with(DocSelectionRenderService);
+		const docSelectionRenderService = (_this$_renderManagerS2 = this._renderManagerService.getRenderUnitById(drawing.unitId)) === null || _this$_renderManagerS2 === void 0 ? void 0 : _this$_renderManagerS2.with(DocSelectionRenderService);
 		if (docSelectionRenderService == null) return;
 		const nodeInfo = skeleton === null || skeleton === void 0 ? void 0 : skeleton.findNodeByCoord(coord, pageLayoutType, pageMarginLeft, pageMarginTop, {
 			strict: false,
@@ -3127,18 +3140,30 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 		if (glyphAnchor == null) return;
 		const line = (_glyphAnchor$parent = glyphAnchor.parent) === null || _glyphAnchor$parent === void 0 ? void 0 : _glyphAnchor$parent.parent;
 		const column = line === null || line === void 0 ? void 0 : line.parent;
-		const sectionTop = (_column$parent$top = column === null || column === void 0 || (_column$parent = column.parent) === null || _column$parent === void 0 ? void 0 : _column$parent.top) !== null && _column$parent$top !== void 0 ? _column$parent$top : 0;
-		const paragraphStartLine = (_column$lines$find = column === null || column === void 0 ? void 0 : column.lines.find((l) => l.paragraphIndex === (line === null || line === void 0 ? void 0 : line.paragraphIndex) && l.paragraphStart)) !== null && _column$lines$find !== void 0 ? _column$lines$find : column === null || column === void 0 ? void 0 : column.lines[0];
+		const sectionTop = (column === null || column === void 0 || (_column$parent = column.parent) === null || _column$parent === void 0 ? void 0 : _column$parent.top) ?? 0;
+		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)) ?? (column === null || column === void 0 ? void 0 : column.lines[0]);
 		const page = column === null || column === void 0 || (_column$parent2 = column.parent) === null || _column$parent2 === void 0 ? void 0 : _column$parent2.parent;
 		if (line == null || column == null || paragraphStartLine == null || page == null) return;
 		this._liquid.reset();
 		const tableCellContext = page.type === DocumentSkeletonPageType.CELL ? getDocsTableCellAnchorContext(drawing.unitId, page) : null;
-		const anchorPage = (_tableCellContext$hos = tableCellContext === null || tableCellContext === void 0 ? void 0 : tableCellContext.hostPage) !== null && _tableCellContext$hos !== void 0 ? _tableCellContext$hos : page;
+		const anchorPage = (tableCellContext === null || tableCellContext === void 0 ? void 0 : tableCellContext.hostPage) ?? page;
 		const pageType = anchorPage.type;
+		const drawingHostPage = (page.type === DocumentSkeletonPageType.HEADER || page.type === DocumentSkeletonPageType.FOOTER) && segmentPage > -1 ? pages[segmentPage] : void 0;
+		const useOuterPageOrigin = shouldUseDocsDrawingOuterPageOrigin({
+			drawing,
+			height: object.height,
+			hostPage: drawingHostPage,
+			page,
+			width: object.width
+		});
+		let pageOffsetLeft = this._liquid.x;
+		let pageOffsetTop = this._liquid.y;
 		for (const p of pages) {
 			const { headerId, footerId, pageHeight, pageWidth, marginLeft, marginBottom } = p;
 			const pIndex = pages.indexOf(p);
 			if (segmentPage > -1 && pIndex === segmentPage) {
+				pageOffsetLeft = this._liquid.x;
+				pageOffsetTop = this._liquid.y;
 				switch (pageType) {
 					case DocumentSkeletonPageType.HEADER: {
 						var _skeHeaders$get;
@@ -3166,6 +3191,10 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 				}
 				break;
 			}
+			if (p === anchorPage) {
+				pageOffsetLeft = this._liquid.x;
+				pageOffsetTop = this._liquid.y;
+			}
 			this._liquid.translatePagePadding(p);
 			if (p === anchorPage) break;
 			this._liquid.restorePagePadding(p);
@@ -3174,14 +3203,17 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 		if (tableCellContext) this._liquid.translate(tableCellContext.offset.left, tableCellContext.offset.top);
 		if (positionV.relativeFrom === ObjectRelativeFromV.LINE) glyphAnchor = line.divides[0].glyphGroup[0];
 		else {
-			var _paragraphStartLine$d, _paragraphStartLine$d2;
-			glyphAnchor = (_paragraphStartLine$d = (_paragraphStartLine$d2 = paragraphStartLine.divides) === null || _paragraphStartLine$d2 === void 0 || (_paragraphStartLine$d2 = _paragraphStartLine$d2[0]) === null || _paragraphStartLine$d2 === void 0 || (_paragraphStartLine$d2 = _paragraphStartLine$d2.glyphGroup) === null || _paragraphStartLine$d2 === void 0 ? void 0 : _paragraphStartLine$d2[0]) !== null && _paragraphStartLine$d !== void 0 ? _paragraphStartLine$d : glyphAnchor;
+			var _paragraphStartLine$d;
+			glyphAnchor = ((_paragraphStartLine$d = paragraphStartLine.divides) === null || _paragraphStartLine$d === void 0 || (_paragraphStartLine$d = _paragraphStartLine$d[0]) === null || _paragraphStartLine$d === void 0 || (_paragraphStartLine$d = _paragraphStartLine$d.glyphGroup) === null || _paragraphStartLine$d === void 0 ? void 0 : _paragraphStartLine$d[0]) ?? glyphAnchor;
 		}
 		docTransform.positionH = {
 			relativeFrom: positionH.relativeFrom,
 			posOffset: left - this._liquid.x - docsLeft
 		};
 		switch (positionH.relativeFrom) {
+			case ObjectRelativeFromH.PAGE:
+				if (useOuterPageOrigin) docTransform.positionH.posOffset = left - pageOffsetLeft - docsLeft;
+				break;
 			case ObjectRelativeFromH.MARGIN:
 				docTransform.positionH.posOffset = left - this._liquid.x - docsLeft - page.marginLeft;
 				break;
@@ -3195,7 +3227,7 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 		};
 		switch (positionV.relativeFrom) {
 			case ObjectRelativeFromV.PAGE:
-				docTransform.positionV.posOffset = top - this._liquid.y - docsTop - page.marginTop;
+				docTransform.positionV.posOffset = useOuterPageOrigin ? top - pageOffsetTop - docsTop : top - this._liquid.y - docsTop + page.marginTop;
 				break;
 			case ObjectRelativeFromV.LINE:
 				docTransform.positionV.posOffset = top - this._liquid.y - docsTop - sectionTop - line.top;
@@ -3206,14 +3238,14 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 		}
 		if (glyphAnchor == null) return;
 		const nodePosition = skeleton === null || skeleton === void 0 ? void 0 : skeleton.findPositionByGlyph(glyphAnchor, segmentPage);
-		const docObject = this._getDocObject();
-		if (nodePosition == null || skeleton == null || docObject == null) return;
+		const docObject = neoGetDocObject(currentRender);
+		if (nodePosition == null || skeleton == null) return;
 		const positionWithIsBack = {
 			...nodePosition,
 			isBack
 		};
 		const { cursorList } = new NodePositionConvertToCursor(docObject.document.getOffsetConfig(), skeleton).getRangePointData(positionWithIsBack, positionWithIsBack);
-		const { startOffset } = (_getOneTextSelectionR2 = getOneTextSelectionRange(cursorList)) !== null && _getOneTextSelectionR2 !== void 0 ? _getOneTextSelectionR2 : {};
+		const { startOffset } = getOneTextSelectionRange(cursorList) ?? {};
 		if (startOffset == null) return;
 		return {
 			offset: startOffset,
@@ -3250,8 +3282,7 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 		});
 	}
 	_moveInlineDrawing(drawing, offsetX, offsetY) {
-		const anchor = this._getInlineDrawingAnchor(drawing, offsetX, offsetY);
-		const { offset, segmentId, segmentPage } = anchor !== null && anchor !== void 0 ? anchor : {};
+		const { offset, segmentId, segmentPage } = this._getInlineDrawingAnchor(drawing, offsetX, offsetY) ?? {};
 		return this._commandService.executeCommand(IMoveInlineDrawingCommand.id, {
 			unitId: drawing.unitId,
 			subUnitId: drawing.unitId,
@@ -3263,11 +3294,11 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 		});
 	}
 	_limitDrawingInPage(drawing, object) {
-		const currentRender = this._renderManagerService.getRenderById(drawing.unitId);
+		const currentRender = this._renderManagerService.getRenderUnitById(drawing.unitId);
 		const { left, top, width, height, angle } = object;
 		const skeleton = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(DocSkeletonManagerService).getSkeleton();
 		const skeletonData = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getSkeletonData();
-		const { pages } = skeletonData !== null && skeletonData !== void 0 ? skeletonData : {};
+		const { pages } = skeletonData ?? {};
 		if (skeletonData == null || currentRender == null || pages == null) return {
 			left,
 			top,
@@ -3298,8 +3329,7 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 	_nonInlineDrawingTransform(drawing, object, isMoving = false) {
 		const objectPosition = drawing.isMultiTransform === BooleanNumber.TRUE ? object : this._limitDrawingInPage(drawing, object);
 		if (isMoving && objectPosition.top !== object.top) return;
-		const anchor = this._getDrawingAnchor(drawing, objectPosition);
-		const { offset, docTransform, segmentId, segmentPage } = anchor !== null && anchor !== void 0 ? anchor : {};
+		const { offset, docTransform, segmentId, segmentPage } = this._getDrawingAnchor(drawing, objectPosition) ?? {};
 		if (offset == null || docTransform == null) return this._updateMultipleDrawingDocTransform(/* @__PURE__ */ new Map([[drawing.drawingId, object]]));
 		return this._commandService.executeCommand(ITransformNonInlineDrawingCommand.id, {
 			unitId: drawing.unitId,
@@ -3313,7 +3343,7 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 	}
 	_getSceneAndTransformerByDrawingSearch(unitId) {
 		if (unitId == null) return;
-		const renderObject = this._renderManagerService.getRenderById(unitId);
+		const renderObject = this._renderManagerService.getRenderUnitById(unitId);
 		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
 		if (scene == null) return;
 		return {
@@ -3328,7 +3358,7 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 		return documentTransform.clone().invert().applyPoint(originCoord);
 	}
 	_createOrUpdateInlineAnchor(unitId, pointsGroup) {
-		const currentRender = this._renderManagerService.getRenderById(unitId);
+		const currentRender = this._renderManagerService.getRenderUnitById(unitId);
 		if (currentRender == null) return;
 		const { mainComponent, scene } = currentRender;
 		const { docsLeft, docsTop } = mainComponent.getOffsetConfig();
@@ -3355,11 +3385,8 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 		this._anchorShape = anchor;
 		scene.addObject(anchor, TEXT_RANGE_LAYER_INDEX);
 	}
-	_getDocObject() {
-		return getDocObject(this._univerInstanceService, this._renderManagerService);
-	}
 	_getPageContentSize(drawing) {
-		const currentRender = this._renderManagerService.getRenderById(drawing.unitId);
+		const currentRender = this._renderManagerService.getRenderUnitById(drawing.unitId);
 		const skeleton = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(DocSkeletonManagerService).getSkeleton();
 		const MAX_WIDTH = 500;
 		const MAX_HEIGHT = 500;
@@ -3606,7 +3633,7 @@ let DocDrawingPopupMenuController = class DocDrawingPopupMenuController extends
 	}
 	_popupMenuListener(unitId) {
 		var _this$_renderManagerS;
-		const scene = (_this$_renderManagerS = this._renderManagerService.getRenderById(unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.scene;
+		const scene = (_this$_renderManagerS = this._renderManagerService.getRenderUnitById(unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.scene;
 		if (!scene) return;
 		const transformer = scene.getTransformerByCreate();
 		if (!transformer) return;
@@ -3662,7 +3689,6 @@ let DocDrawingPopupMenuController = class DocDrawingPopupMenuController extends
 		}));
 	}
 	_getDrawingPopupMenuItems(unitId, subUnitId, drawingId, drawingType) {
-		var _editCommandInfo$labe, _editCommandInfo$comm, _editCommandInfo$comm2, _editCommandInfo$disa;
 		const drawing = this._drawingManagerService.getDrawingByParam({
 			unitId,
 			subUnitId,
@@ -3681,15 +3707,15 @@ let DocDrawingPopupMenuController = class DocDrawingPopupMenuController extends
 		}) : null;
 		return [
 			{
-				label: (_editCommandInfo$labe = editCommandInfo === null || editCommandInfo === void 0 ? void 0 : editCommandInfo.label) !== null && _editCommandInfo$labe !== void 0 ? _editCommandInfo$labe : "docs-drawing-ui.image-popup.edit",
+				label: (editCommandInfo === null || editCommandInfo === void 0 ? void 0 : editCommandInfo.label) ?? "docs-drawing-ui.image-popup.edit",
 				index: 0,
-				commandId: (_editCommandInfo$comm = editCommandInfo === null || editCommandInfo === void 0 ? void 0 : editCommandInfo.commandId) !== null && _editCommandInfo$comm !== void 0 ? _editCommandInfo$comm : EditDocDrawingOperation.id,
-				commandParams: (_editCommandInfo$comm2 = editCommandInfo === null || editCommandInfo === void 0 ? void 0 : editCommandInfo.commandParams) !== null && _editCommandInfo$comm2 !== void 0 ? _editCommandInfo$comm2 : {
+				commandId: (editCommandInfo === null || editCommandInfo === void 0 ? void 0 : editCommandInfo.commandId) ?? EditDocDrawingOperation.id,
+				commandParams: (editCommandInfo === null || editCommandInfo === void 0 ? void 0 : editCommandInfo.commandParams) ?? {
 					unitId,
 					subUnitId,
 					drawingId
 				},
-				disable: (_editCommandInfo$disa = editCommandInfo === null || editCommandInfo === void 0 ? void 0 : editCommandInfo.disable) !== null && _editCommandInfo$disa !== void 0 ? _editCommandInfo$disa : drawingType === DrawingTypeEnum.DRAWING_DOM,
+				disable: (editCommandInfo === null || editCommandInfo === void 0 ? void 0 : editCommandInfo.disable) ?? drawingType === DrawingTypeEnum.DRAWING_DOM,
 				hideOnClick: true,
 				icon: "DrawingEditIcon"
 			},
@@ -3788,7 +3814,7 @@ _defineProperty(UniverDocsDrawingUIPlugin, "pluginName", "DOC_DRAWING_UI_PLUGIN"
 _defineProperty(UniverDocsDrawingUIPlugin, "packageName", name);
 _defineProperty(UniverDocsDrawingUIPlugin, "version", version);
 UniverDocsDrawingUIPlugin = __decorate([
-	DependentOn(UniverDrawingUIPlugin, UniverDrawingPlugin, UniverDocsDrawingPlugin, UniverUIPlugin),
+	DependentOn(UniverDocsPlugin, UniverDrawingPlugin, UniverRenderEnginePlugin, UniverDocsDrawingPlugin, UniverDocsUIPlugin, UniverDrawingUIPlugin),
 	__decorateParam(1, Inject(Injector)),
 	__decorateParam(2, IRenderManagerService),
 	__decorateParam(3, IConfigService)