@univerjs/docs-drawing-ui 1.0.0-alpha.1 → 1.0.0-insiders.20260701-0ef51b0

package/lib/cjs/index.js

@@ -666,7 +666,10 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 			});
 		}));
 		this.disposeWithMe(this._commandService.onCommandExecuted(async (command) => {
-			if (command.id === _univerjs_docs.RichTextEditingMutation.id) queueMicrotask(() => {
+			if (command.id !== _univerjs_docs.RichTextEditingMutation.id) return;
+			const params = command.params;
+			if ((params === null || params === void 0 ? void 0 : params.unitId) && params.unitId !== this._context.unitId) return;
+			queueMicrotask(() => {
 				this._updateDrawingsEditStatus();
 			});
 		}));
@@ -1462,6 +1465,30 @@ function calcDocFloatDomPosition(object, renderUnit) {
 		right: left + width
 	}, renderUnit.scene, opacity, angle);
 }
+function mergeDocFloatDomRuntimeProps(existingProps, param) {
+	const customBlockRenderViewport = pickValidCustomBlockRenderViewport(param.customBlockRenderViewport);
+	if (!customBlockRenderViewport) return existingProps;
+	return {
+		...existingProps,
+		customBlockRenderViewport
+	};
+}
+function pickValidCustomBlockRenderViewport(viewport) {
+	const result = {};
+	if (isNonNegativeNumber(viewport === null || viewport === void 0 ? void 0 : viewport.bleedLeft)) result.bleedLeft = viewport.bleedLeft;
+	if (isPositiveNumber(viewport === null || viewport === void 0 ? void 0 : viewport.bleedWidth)) result.bleedWidth = viewport.bleedWidth;
+	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.viewportHeight)) result.viewportHeight = viewport.viewportHeight;
+	return Object.keys(result).length ? result : void 0;
+}
+function isPositiveNumber(value) {
+	return typeof value === "number" && Number.isFinite(value) && value > 0;
+}
+function isNonNegativeNumber(value) {
+	return typeof value === "number" && Number.isFinite(value) && value >= 0;
+}
 let DocFloatDomController = class DocFloatDomController extends _univerjs_core.Disposable {
 	constructor(_renderManagerService, _drawingManagerService, _drawingRenderService, _canvasFloatDomService, _univerInstanceService, _commandService) {
 		super();
@@ -1479,6 +1506,7 @@ let DocFloatDomController = class DocFloatDomController extends _univerjs_core.D
 	}
 	_initialize() {
 		this._drawingAddRemoveListener();
+		this._drawingRuntimePropsListener();
 		this._initScrollAndZoomEvent();
 	}
 	_getSceneAndTransformerByDrawingSearch(unitId) {
@@ -1514,6 +1542,12 @@ let DocFloatDomController = class DocFloatDomController extends _univerjs_core.D
 			const rects = await this._drawingRenderService.renderFloatDom(rectParam, renderObject.scene);
 			if (rects == null || rects.length === 0) return;
 			for (const rect of rects) {
+				var _renderObject$scene$g;
+				const runtimeParam = rectParam;
+				const runtimeViewport = pickValidCustomBlockRenderViewport(runtimeParam.customBlockRenderViewport);
+				const preserveRuntimeGeometry = isEmbedFloatDomRuntimeParam(runtimeParam);
+				syncRectWithRuntimeParam(rect, runtimeParam, runtimeViewport, void 0, preserveRuntimeGeometry);
+				const runtimeTransform = runtimeViewport || preserveRuntimeGeometry ? createTransformFromRect(rect) : void 0;
 				this._addHoverForRect(rect);
 				const disposableCollection = new _univerjs_core.DisposableCollection();
 				const position$ = new rxjs.BehaviorSubject(calcDocFloatDomPosition(rect, renderObject.renderUnit));
@@ -1521,7 +1555,10 @@ let DocFloatDomController = class DocFloatDomController extends _univerjs_core.D
 				const data = rectParam.data;
 				const info = {
 					dispose: disposableCollection,
+					preserveRuntimeGeometry,
 					rect,
+					runtimeTransform,
+					runtimeViewport,
 					position$,
 					unitId
 				};
@@ -1529,6 +1566,8 @@ let DocFloatDomController = class DocFloatDomController extends _univerjs_core.D
 					position$,
 					id: rectParam.drawingId,
 					componentKey: rectParam.componentKey,
+					eventPassThrough: preserveRuntimeGeometry ? false : void 0,
+					preserveOnFocusChange: preserveRuntimeGeometry,
 					onPointerDown: (evt) => {
 						canvas.dispatchEvent(new PointerEvent(evt.type, evt));
 					},
@@ -1542,20 +1581,42 @@ let DocFloatDomController = class DocFloatDomController extends _univerjs_core.D
 						canvas.dispatchEvent(new WheelEvent(evt.type, evt));
 					},
 					data,
+					props: mergeDocFloatDomRuntimeProps(void 0, rectParam),
 					unitId
 				});
 				const listener = rect.onTransformChange$.subscribeEvent(() => {
 					const newPosition = calcDocFloatDomPosition(rect, renderObject.renderUnit);
 					position$.next(newPosition);
 				});
+				const scrollListener = subscribeViewportScrollAfter((_renderObject$scene$g = renderObject.scene.getViewport(_univerjs_docs_ui.VIEWPORT_KEY.VIEW_MAIN)) === null || _renderObject$scene$g === void 0 ? void 0 : _renderObject$scene$g.onScrollAfter$, () => position$.next(calcDocFloatDomPosition(rect, renderObject.renderUnit)));
 				disposableCollection.add(() => {
 					this._canvasFloatDomService.removeFloatDom(rectParam.drawingId);
 				});
 				listener && disposableCollection.add(listener);
+				scrollListener && disposableCollection.add(scrollListener);
 				this._domLayerInfoMap.set(rectParam.drawingId, info);
 			}
 		});
 	}
+	_drawingRuntimePropsListener() {
+		this.disposeWithMe(this._drawingManagerService.refreshTransform$.subscribe((params) => {
+			params.forEach((param) => {
+				var _this$_canvasFloatDom;
+				const floatDomInfo = this._domLayerInfoMap.get(param.drawingId);
+				if (!floatDomInfo) return;
+				const runtimeParam = param;
+				const runtimeViewport = pickValidCustomBlockRenderViewport(runtimeParam.customBlockRenderViewport);
+				if (runtimeViewport) floatDomInfo.runtimeViewport = runtimeViewport;
+				if (syncRectWithRuntimeParam(floatDomInfo.rect, runtimeParam, floatDomInfo.runtimeViewport, floatDomInfo.runtimeTransform, floatDomInfo.preserveRuntimeGeometry)) {
+					if (runtimeViewport || floatDomInfo.preserveRuntimeGeometry) floatDomInfo.runtimeTransform = createTransformFromRect(floatDomInfo.rect);
+					const renderObject = this._getSceneAndTransformerByDrawingSearch(floatDomInfo.unitId);
+					if (renderObject) floatDomInfo.position$.next(calcDocFloatDomPosition(floatDomInfo.rect, renderObject.renderUnit));
+				}
+				const currentProps = (_this$_canvasFloatDom = this._canvasFloatDomService.domLayers.find(([id]) => id === param.drawingId)) === null || _this$_canvasFloatDom === void 0 ? void 0 : _this$_canvasFloatDom[1].props;
+				this._canvasFloatDomService.updateFloatDom(param.drawingId, { props: mergeDocFloatDomRuntimeProps(currentProps, param) });
+			});
+		}));
+	}
 	_addHoverForRect(o) {
 		this.disposeWithMe((0, _univerjs_core.toDisposable)(o.onPointerEnter$.subscribeEvent(() => {
 			o.cursor = _univerjs_engine_render.CURSOR_TYPE.GRAB;
@@ -1656,6 +1717,71 @@ DocFloatDomController = __decorate([
 	__decorateParam(4, _univerjs_core.IUniverInstanceService),
 	__decorateParam(5, _univerjs_core.ICommandService)
 ], DocFloatDomController);
+function syncRectWithRuntimeParam(rect, param, fallbackViewport, fallbackTransform, preserveRuntimeGeometry) {
+	const transform = getRuntimeTransform(param, rect, fallbackViewport, fallbackTransform, preserveRuntimeGeometry);
+	if (!transform) return false;
+	rect.transformByState(transform);
+	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
+		};
+	}
+	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;
+		if (!isPositiveNumber(height)) return;
+		return {
+			left: rect.left,
+			top: rect.top,
+			width: rect.width,
+			height,
+			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;
+	if (!isPositiveNumber(height)) return transform;
+	return {
+		...transform,
+		height
+	};
+}
+function isEmbedFloatDomRuntimeParam(param) {
+	const data = param.data;
+	if (!data || typeof data !== "object") return false;
+	const candidate = data;
+	return candidate.version === 1 && typeof candidate.embedId === "string" && typeof candidate.hostAnchorId === "string";
+}
+function createTransformFromRect(rect) {
+	return {
+		angle: rect.angle,
+		height: rect.height,
+		left: rect.left,
+		top: rect.top,
+		width: rect.width
+	};
+}
+function subscribeViewportScrollAfter(scrollEvent, callback) {
+	if (!scrollEvent || typeof scrollEvent !== "object") return;
+	const eventSubject = scrollEvent;
+	if (typeof eventSubject.subscribeEvent === "function") return eventSubject.subscribeEvent(callback);
+	const observable = scrollEvent;
+	if (typeof observable.subscribe === "function") {
+		const subscription = observable.subscribe(callback);
+		return (0, _univerjs_core.toDisposable)(() => {
+			var _subscription$unsubsc;
+			return (_subscription$unsubsc = subscription.unsubscribe) === null || _subscription$unsubsc === void 0 ? void 0 : _subscription$unsubsc.call(subscription);
+		});
+	}
+}
 
 //#endregion
 //#region src/menu/image.menu.ts
@@ -1785,7 +1911,7 @@ function InsertEllipseShapeBelowMenuFactory(accessor) {
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-drawing-ui";
-var version = "1.0.0-alpha.1";
+var version = "1.0.0-insiders.20260701-0ef51b0";
 
 //#endregion
 //#region src/config/config.ts
@@ -2925,6 +3051,7 @@ let DocDrawingTransformUpdateController = class DocDrawingTransformUpdateControl
 				behindText,
 				transform,
 				transforms: [transform],
+				customBlockRenderViewport: drawing.customBlockRenderViewport,
 				isMultiTransform
 			};
 			else if (isMultiTransform === _univerjs_core.BooleanNumber.TRUE) updateDrawingMap[drawingId].transforms.push(transform);

package/lib/es/index.js

@@ -665,7 +665,10 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 			});
 		}));
 		this.disposeWithMe(this._commandService.onCommandExecuted(async (command) => {
-			if (command.id === RichTextEditingMutation.id) queueMicrotask(() => {
+			if (command.id !== RichTextEditingMutation.id) return;
+			const params = command.params;
+			if ((params === null || params === void 0 ? void 0 : params.unitId) && params.unitId !== this._context.unitId) return;
+			queueMicrotask(() => {
 				this._updateDrawingsEditStatus();
 			});
 		}));
@@ -1461,6 +1464,30 @@ function calcDocFloatDomPosition(object, renderUnit) {
 		right: left + width
 	}, renderUnit.scene, opacity, angle);
 }
+function mergeDocFloatDomRuntimeProps(existingProps, param) {
+	const customBlockRenderViewport = pickValidCustomBlockRenderViewport(param.customBlockRenderViewport);
+	if (!customBlockRenderViewport) return existingProps;
+	return {
+		...existingProps,
+		customBlockRenderViewport
+	};
+}
+function pickValidCustomBlockRenderViewport(viewport) {
+	const result = {};
+	if (isNonNegativeNumber(viewport === null || viewport === void 0 ? void 0 : viewport.bleedLeft)) result.bleedLeft = viewport.bleedLeft;
+	if (isPositiveNumber(viewport === null || viewport === void 0 ? void 0 : viewport.bleedWidth)) result.bleedWidth = viewport.bleedWidth;
+	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.viewportHeight)) result.viewportHeight = viewport.viewportHeight;
+	return Object.keys(result).length ? result : void 0;
+}
+function isPositiveNumber(value) {
+	return typeof value === "number" && Number.isFinite(value) && value > 0;
+}
+function isNonNegativeNumber(value) {
+	return typeof value === "number" && Number.isFinite(value) && value >= 0;
+}
 let DocFloatDomController = class DocFloatDomController extends Disposable {
 	constructor(_renderManagerService, _drawingManagerService, _drawingRenderService, _canvasFloatDomService, _univerInstanceService, _commandService) {
 		super();
@@ -1478,6 +1505,7 @@ let DocFloatDomController = class DocFloatDomController extends Disposable {
 	}
 	_initialize() {
 		this._drawingAddRemoveListener();
+		this._drawingRuntimePropsListener();
 		this._initScrollAndZoomEvent();
 	}
 	_getSceneAndTransformerByDrawingSearch(unitId) {
@@ -1513,6 +1541,12 @@ let DocFloatDomController = class DocFloatDomController extends Disposable {
 			const rects = await this._drawingRenderService.renderFloatDom(rectParam, renderObject.scene);
 			if (rects == null || rects.length === 0) return;
 			for (const rect of rects) {
+				var _renderObject$scene$g;
+				const runtimeParam = rectParam;
+				const runtimeViewport = pickValidCustomBlockRenderViewport(runtimeParam.customBlockRenderViewport);
+				const preserveRuntimeGeometry = isEmbedFloatDomRuntimeParam(runtimeParam);
+				syncRectWithRuntimeParam(rect, runtimeParam, runtimeViewport, void 0, preserveRuntimeGeometry);
+				const runtimeTransform = runtimeViewport || preserveRuntimeGeometry ? createTransformFromRect(rect) : void 0;
 				this._addHoverForRect(rect);
 				const disposableCollection = new DisposableCollection();
 				const position$ = new BehaviorSubject(calcDocFloatDomPosition(rect, renderObject.renderUnit));
@@ -1520,7 +1554,10 @@ let DocFloatDomController = class DocFloatDomController extends Disposable {
 				const data = rectParam.data;
 				const info = {
 					dispose: disposableCollection,
+					preserveRuntimeGeometry,
 					rect,
+					runtimeTransform,
+					runtimeViewport,
 					position$,
 					unitId
 				};
@@ -1528,6 +1565,8 @@ let DocFloatDomController = class DocFloatDomController extends Disposable {
 					position$,
 					id: rectParam.drawingId,
 					componentKey: rectParam.componentKey,
+					eventPassThrough: preserveRuntimeGeometry ? false : void 0,
+					preserveOnFocusChange: preserveRuntimeGeometry,
 					onPointerDown: (evt) => {
 						canvas.dispatchEvent(new PointerEvent(evt.type, evt));
 					},
@@ -1541,20 +1580,42 @@ let DocFloatDomController = class DocFloatDomController extends Disposable {
 						canvas.dispatchEvent(new WheelEvent(evt.type, evt));
 					},
 					data,
+					props: mergeDocFloatDomRuntimeProps(void 0, rectParam),
 					unitId
 				});
 				const listener = rect.onTransformChange$.subscribeEvent(() => {
 					const newPosition = calcDocFloatDomPosition(rect, renderObject.renderUnit);
 					position$.next(newPosition);
 				});
+				const scrollListener = subscribeViewportScrollAfter((_renderObject$scene$g = renderObject.scene.getViewport(VIEWPORT_KEY.VIEW_MAIN)) === null || _renderObject$scene$g === void 0 ? void 0 : _renderObject$scene$g.onScrollAfter$, () => position$.next(calcDocFloatDomPosition(rect, renderObject.renderUnit)));
 				disposableCollection.add(() => {
 					this._canvasFloatDomService.removeFloatDom(rectParam.drawingId);
 				});
 				listener && disposableCollection.add(listener);
+				scrollListener && disposableCollection.add(scrollListener);
 				this._domLayerInfoMap.set(rectParam.drawingId, info);
 			}
 		});
 	}
+	_drawingRuntimePropsListener() {
+		this.disposeWithMe(this._drawingManagerService.refreshTransform$.subscribe((params) => {
+			params.forEach((param) => {
+				var _this$_canvasFloatDom;
+				const floatDomInfo = this._domLayerInfoMap.get(param.drawingId);
+				if (!floatDomInfo) return;
+				const runtimeParam = param;
+				const runtimeViewport = pickValidCustomBlockRenderViewport(runtimeParam.customBlockRenderViewport);
+				if (runtimeViewport) floatDomInfo.runtimeViewport = runtimeViewport;
+				if (syncRectWithRuntimeParam(floatDomInfo.rect, runtimeParam, floatDomInfo.runtimeViewport, floatDomInfo.runtimeTransform, floatDomInfo.preserveRuntimeGeometry)) {
+					if (runtimeViewport || floatDomInfo.preserveRuntimeGeometry) floatDomInfo.runtimeTransform = createTransformFromRect(floatDomInfo.rect);
+					const renderObject = this._getSceneAndTransformerByDrawingSearch(floatDomInfo.unitId);
+					if (renderObject) floatDomInfo.position$.next(calcDocFloatDomPosition(floatDomInfo.rect, renderObject.renderUnit));
+				}
+				const currentProps = (_this$_canvasFloatDom = this._canvasFloatDomService.domLayers.find(([id]) => id === param.drawingId)) === null || _this$_canvasFloatDom === void 0 ? void 0 : _this$_canvasFloatDom[1].props;
+				this._canvasFloatDomService.updateFloatDom(param.drawingId, { props: mergeDocFloatDomRuntimeProps(currentProps, param) });
+			});
+		}));
+	}
 	_addHoverForRect(o) {
 		this.disposeWithMe(toDisposable(o.onPointerEnter$.subscribeEvent(() => {
 			o.cursor = CURSOR_TYPE.GRAB;
@@ -1655,6 +1716,71 @@ DocFloatDomController = __decorate([
 	__decorateParam(4, IUniverInstanceService),
 	__decorateParam(5, ICommandService)
 ], DocFloatDomController);
+function syncRectWithRuntimeParam(rect, param, fallbackViewport, fallbackTransform, preserveRuntimeGeometry) {
+	const transform = getRuntimeTransform(param, rect, fallbackViewport, fallbackTransform, preserveRuntimeGeometry);
+	if (!transform) return false;
+	rect.transformByState(transform);
+	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
+		};
+	}
+	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;
+		if (!isPositiveNumber(height)) return;
+		return {
+			left: rect.left,
+			top: rect.top,
+			width: rect.width,
+			height,
+			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;
+	if (!isPositiveNumber(height)) return transform;
+	return {
+		...transform,
+		height
+	};
+}
+function isEmbedFloatDomRuntimeParam(param) {
+	const data = param.data;
+	if (!data || typeof data !== "object") return false;
+	const candidate = data;
+	return candidate.version === 1 && typeof candidate.embedId === "string" && typeof candidate.hostAnchorId === "string";
+}
+function createTransformFromRect(rect) {
+	return {
+		angle: rect.angle,
+		height: rect.height,
+		left: rect.left,
+		top: rect.top,
+		width: rect.width
+	};
+}
+function subscribeViewportScrollAfter(scrollEvent, callback) {
+	if (!scrollEvent || typeof scrollEvent !== "object") return;
+	const eventSubject = scrollEvent;
+	if (typeof eventSubject.subscribeEvent === "function") return eventSubject.subscribeEvent(callback);
+	const observable = scrollEvent;
+	if (typeof observable.subscribe === "function") {
+		const subscription = observable.subscribe(callback);
+		return toDisposable(() => {
+			var _subscription$unsubsc;
+			return (_subscription$unsubsc = subscription.unsubscribe) === null || _subscription$unsubsc === void 0 ? void 0 : _subscription$unsubsc.call(subscription);
+		});
+	}
+}
 
 //#endregion
 //#region src/menu/image.menu.ts
@@ -1784,7 +1910,7 @@ function InsertEllipseShapeBelowMenuFactory(accessor) {
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-drawing-ui";
-var version = "1.0.0-alpha.1";
+var version = "1.0.0-insiders.20260701-0ef51b0";
 
 //#endregion
 //#region src/config/config.ts
@@ -2924,6 +3050,7 @@ let DocDrawingTransformUpdateController = class DocDrawingTransformUpdateControl
 				behindText,
 				transform,
 				transforms: [transform],
+				customBlockRenderViewport: drawing.customBlockRenderViewport,
 				isMultiTransform
 			};
 			else if (isMultiTransform === BooleanNumber.TRUE) updateDrawingMap[drawingId].transforms.push(transform);

package/lib/index.js

@@ -665,7 +665,10 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 			});
 		}));
 		this.disposeWithMe(this._commandService.onCommandExecuted(async (command) => {
-			if (command.id === RichTextEditingMutation.id) queueMicrotask(() => {
+			if (command.id !== RichTextEditingMutation.id) return;
+			const params = command.params;
+			if ((params === null || params === void 0 ? void 0 : params.unitId) && params.unitId !== this._context.unitId) return;
+			queueMicrotask(() => {
 				this._updateDrawingsEditStatus();
 			});
 		}));
@@ -1461,6 +1464,30 @@ function calcDocFloatDomPosition(object, renderUnit) {
 		right: left + width
 	}, renderUnit.scene, opacity, angle);
 }
+function mergeDocFloatDomRuntimeProps(existingProps, param) {
+	const customBlockRenderViewport = pickValidCustomBlockRenderViewport(param.customBlockRenderViewport);
+	if (!customBlockRenderViewport) return existingProps;
+	return {
+		...existingProps,
+		customBlockRenderViewport
+	};
+}
+function pickValidCustomBlockRenderViewport(viewport) {
+	const result = {};
+	if (isNonNegativeNumber(viewport === null || viewport === void 0 ? void 0 : viewport.bleedLeft)) result.bleedLeft = viewport.bleedLeft;
+	if (isPositiveNumber(viewport === null || viewport === void 0 ? void 0 : viewport.bleedWidth)) result.bleedWidth = viewport.bleedWidth;
+	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.viewportHeight)) result.viewportHeight = viewport.viewportHeight;
+	return Object.keys(result).length ? result : void 0;
+}
+function isPositiveNumber(value) {
+	return typeof value === "number" && Number.isFinite(value) && value > 0;
+}
+function isNonNegativeNumber(value) {
+	return typeof value === "number" && Number.isFinite(value) && value >= 0;
+}
 let DocFloatDomController = class DocFloatDomController extends Disposable {
 	constructor(_renderManagerService, _drawingManagerService, _drawingRenderService, _canvasFloatDomService, _univerInstanceService, _commandService) {
 		super();
@@ -1478,6 +1505,7 @@ let DocFloatDomController = class DocFloatDomController extends Disposable {
 	}
 	_initialize() {
 		this._drawingAddRemoveListener();
+		this._drawingRuntimePropsListener();
 		this._initScrollAndZoomEvent();
 	}
 	_getSceneAndTransformerByDrawingSearch(unitId) {
@@ -1513,6 +1541,12 @@ let DocFloatDomController = class DocFloatDomController extends Disposable {
 			const rects = await this._drawingRenderService.renderFloatDom(rectParam, renderObject.scene);
 			if (rects == null || rects.length === 0) return;
 			for (const rect of rects) {
+				var _renderObject$scene$g;
+				const runtimeParam = rectParam;
+				const runtimeViewport = pickValidCustomBlockRenderViewport(runtimeParam.customBlockRenderViewport);
+				const preserveRuntimeGeometry = isEmbedFloatDomRuntimeParam(runtimeParam);
+				syncRectWithRuntimeParam(rect, runtimeParam, runtimeViewport, void 0, preserveRuntimeGeometry);
+				const runtimeTransform = runtimeViewport || preserveRuntimeGeometry ? createTransformFromRect(rect) : void 0;
 				this._addHoverForRect(rect);
 				const disposableCollection = new DisposableCollection();
 				const position$ = new BehaviorSubject(calcDocFloatDomPosition(rect, renderObject.renderUnit));
@@ -1520,7 +1554,10 @@ let DocFloatDomController = class DocFloatDomController extends Disposable {
 				const data = rectParam.data;
 				const info = {
 					dispose: disposableCollection,
+					preserveRuntimeGeometry,
 					rect,
+					runtimeTransform,
+					runtimeViewport,
 					position$,
 					unitId
 				};
@@ -1528,6 +1565,8 @@ let DocFloatDomController = class DocFloatDomController extends Disposable {
 					position$,
 					id: rectParam.drawingId,
 					componentKey: rectParam.componentKey,
+					eventPassThrough: preserveRuntimeGeometry ? false : void 0,
+					preserveOnFocusChange: preserveRuntimeGeometry,
 					onPointerDown: (evt) => {
 						canvas.dispatchEvent(new PointerEvent(evt.type, evt));
 					},
@@ -1541,20 +1580,42 @@ let DocFloatDomController = class DocFloatDomController extends Disposable {
 						canvas.dispatchEvent(new WheelEvent(evt.type, evt));
 					},
 					data,
+					props: mergeDocFloatDomRuntimeProps(void 0, rectParam),
 					unitId
 				});
 				const listener = rect.onTransformChange$.subscribeEvent(() => {
 					const newPosition = calcDocFloatDomPosition(rect, renderObject.renderUnit);
 					position$.next(newPosition);
 				});
+				const scrollListener = subscribeViewportScrollAfter((_renderObject$scene$g = renderObject.scene.getViewport(VIEWPORT_KEY.VIEW_MAIN)) === null || _renderObject$scene$g === void 0 ? void 0 : _renderObject$scene$g.onScrollAfter$, () => position$.next(calcDocFloatDomPosition(rect, renderObject.renderUnit)));
 				disposableCollection.add(() => {
 					this._canvasFloatDomService.removeFloatDom(rectParam.drawingId);
 				});
 				listener && disposableCollection.add(listener);
+				scrollListener && disposableCollection.add(scrollListener);
 				this._domLayerInfoMap.set(rectParam.drawingId, info);
 			}
 		});
 	}
+	_drawingRuntimePropsListener() {
+		this.disposeWithMe(this._drawingManagerService.refreshTransform$.subscribe((params) => {
+			params.forEach((param) => {
+				var _this$_canvasFloatDom;
+				const floatDomInfo = this._domLayerInfoMap.get(param.drawingId);
+				if (!floatDomInfo) return;
+				const runtimeParam = param;
+				const runtimeViewport = pickValidCustomBlockRenderViewport(runtimeParam.customBlockRenderViewport);
+				if (runtimeViewport) floatDomInfo.runtimeViewport = runtimeViewport;
+				if (syncRectWithRuntimeParam(floatDomInfo.rect, runtimeParam, floatDomInfo.runtimeViewport, floatDomInfo.runtimeTransform, floatDomInfo.preserveRuntimeGeometry)) {
+					if (runtimeViewport || floatDomInfo.preserveRuntimeGeometry) floatDomInfo.runtimeTransform = createTransformFromRect(floatDomInfo.rect);
+					const renderObject = this._getSceneAndTransformerByDrawingSearch(floatDomInfo.unitId);
+					if (renderObject) floatDomInfo.position$.next(calcDocFloatDomPosition(floatDomInfo.rect, renderObject.renderUnit));
+				}
+				const currentProps = (_this$_canvasFloatDom = this._canvasFloatDomService.domLayers.find(([id]) => id === param.drawingId)) === null || _this$_canvasFloatDom === void 0 ? void 0 : _this$_canvasFloatDom[1].props;
+				this._canvasFloatDomService.updateFloatDom(param.drawingId, { props: mergeDocFloatDomRuntimeProps(currentProps, param) });
+			});
+		}));
+	}
 	_addHoverForRect(o) {
 		this.disposeWithMe(toDisposable(o.onPointerEnter$.subscribeEvent(() => {
 			o.cursor = CURSOR_TYPE.GRAB;
@@ -1655,6 +1716,71 @@ DocFloatDomController = __decorate([
 	__decorateParam(4, IUniverInstanceService),
 	__decorateParam(5, ICommandService)
 ], DocFloatDomController);
+function syncRectWithRuntimeParam(rect, param, fallbackViewport, fallbackTransform, preserveRuntimeGeometry) {
+	const transform = getRuntimeTransform(param, rect, fallbackViewport, fallbackTransform, preserveRuntimeGeometry);
+	if (!transform) return false;
+	rect.transformByState(transform);
+	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
+		};
+	}
+	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;
+		if (!isPositiveNumber(height)) return;
+		return {
+			left: rect.left,
+			top: rect.top,
+			width: rect.width,
+			height,
+			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;
+	if (!isPositiveNumber(height)) return transform;
+	return {
+		...transform,
+		height
+	};
+}
+function isEmbedFloatDomRuntimeParam(param) {
+	const data = param.data;
+	if (!data || typeof data !== "object") return false;
+	const candidate = data;
+	return candidate.version === 1 && typeof candidate.embedId === "string" && typeof candidate.hostAnchorId === "string";
+}
+function createTransformFromRect(rect) {
+	return {
+		angle: rect.angle,
+		height: rect.height,
+		left: rect.left,
+		top: rect.top,
+		width: rect.width
+	};
+}
+function subscribeViewportScrollAfter(scrollEvent, callback) {
+	if (!scrollEvent || typeof scrollEvent !== "object") return;
+	const eventSubject = scrollEvent;
+	if (typeof eventSubject.subscribeEvent === "function") return eventSubject.subscribeEvent(callback);
+	const observable = scrollEvent;
+	if (typeof observable.subscribe === "function") {
+		const subscription = observable.subscribe(callback);
+		return toDisposable(() => {
+			var _subscription$unsubsc;
+			return (_subscription$unsubsc = subscription.unsubscribe) === null || _subscription$unsubsc === void 0 ? void 0 : _subscription$unsubsc.call(subscription);
+		});
+	}
+}
 
 //#endregion
 //#region src/menu/image.menu.ts
@@ -1784,7 +1910,7 @@ function InsertEllipseShapeBelowMenuFactory(accessor) {
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-drawing-ui";
-var version = "1.0.0-alpha.1";
+var version = "1.0.0-insiders.20260701-0ef51b0";
 
 //#endregion
 //#region src/config/config.ts
@@ -2924,6 +3050,7 @@ let DocDrawingTransformUpdateController = class DocDrawingTransformUpdateControl
 				behindText,
 				transform,
 				transforms: [transform],
+				customBlockRenderViewport: drawing.customBlockRenderViewport,
 				isMultiTransform
 			};
 			else if (isMultiTransform === BooleanNumber.TRUE) updateDrawingMap[drawingId].transforms.push(transform);

package/lib/types/controllers/doc-float-dom.controller.d.ts

@@ -13,8 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import type { ITransformState } from '@univerjs/core';
+import type { IDocFloatDom } from '@univerjs/docs-drawing';
 import type { IDocFloatDomDataBase } from '@univerjs/drawing';
-import type { IBoundRectNoAngle, Scene } from '@univerjs/engine-render';
+import type { IBoundRectNoAngle, IDocsCustomBlockRenderViewport, Scene } from '@univerjs/engine-render';
 import type { IFloatDomLayout } from '@univerjs/ui';
 import { Disposable, ICommandService, IUniverInstanceService } from '@univerjs/core';
 import { IDrawingManagerService } from '@univerjs/drawing';
@@ -24,6 +26,13 @@ import { CanvasFloatDomService } from '@univerjs/ui';
 export declare function calcDocFloatDomPositionByRect(rect: IBoundRectNoAngle, scene: Scene, opacity?: number, angle?: number): IFloatDomLayout;
 interface IDocFloatDomParams extends IDocFloatDomDataBase {
 }
+type IDocFloatDomRuntimeViewport = Partial<Pick<IDocsCustomBlockRenderViewport, 'bleedLeft' | 'bleedWidth' | 'contentHeight' | 'contentWidth' | 'height' | 'viewportHeight'>>;
+interface IDocFloatDomRuntimeParam extends IDocFloatDom {
+    customBlockRenderViewport?: IDocFloatDomRuntimeViewport;
+    transform?: Partial<ITransformState>;
+    transforms?: Array<Partial<ITransformState>>;
+}
+export declare function mergeDocFloatDomRuntimeProps(existingProps: Record<string, unknown> | undefined, param: IDocFloatDomRuntimeParam): Record<string, unknown> | undefined;
 export declare class DocFloatDomController extends Disposable {
     private readonly _renderManagerService;
     private readonly _drawingManagerService;
@@ -38,6 +47,7 @@ export declare class DocFloatDomController extends Disposable {
     private _getSceneAndTransformerByDrawingSearch;
     private _drawingAddRemoveListener;
     private _insertRects;
+    private _drawingRuntimePropsListener;
     private _addHoverForRect;
     private _removeDom;
     private _initScrollAndZoomEvent;