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

package/lib/cjs/index.js

@@ -20,8 +20,10 @@ const RemoveDocDrawingCommand = {
 	id: "doc.command.remove-doc-image",
 	type: _univerjs_core.CommandType.COMMAND,
 	handler: (accessor, params) => {
-		var _docSelectionRenderSe, _documentDataModel$ge, _documentDataModel$ge2;
+		var _docSelectionRenderSe, _documentDataModel$ge, _documentDataModel$ge2, _removeDrawings$, _documentDataModel$ge3;
 		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const undoRedoService = accessor.get(_univerjs_core.IUndoRedoService);
+		const drawingAdapterService = accessor.get(_univerjs_docs_drawing.IDocDrawingAdapterService);
 		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
 		const renderManagerService = accessor.get(_univerjs_engine_render.IRenderManagerService);
 		const documentDataModel = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
@@ -33,7 +35,43 @@ const RemoveDocDrawingCommand = {
 		const jsonX = _univerjs_core.JSONX.getInstance();
 		const customBlocks = (_documentDataModel$ge = (_documentDataModel$ge2 = documentDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _documentDataModel$ge2 === void 0 || (_documentDataModel$ge2 = _documentDataModel$ge2.getBody()) === null || _documentDataModel$ge2 === void 0 ? void 0 : _documentDataModel$ge2.customBlocks) !== null && _documentDataModel$ge !== void 0 ? _documentDataModel$ge : [];
 		const removeCustomBlocks = removeDrawings.map((drawing) => customBlocks.find((customBlock) => customBlock.blockId === drawing.drawingId)).filter((block) => !!block).sort((a, b) => a.startIndex > b.startIndex ? 1 : -1);
-		const unitId = removeDrawings[0].unitId;
+		const unitId = (_removeDrawings$ = removeDrawings[0]) === null || _removeDrawings$ === void 0 ? void 0 : _removeDrawings$.unitId;
+		if (unitId == null || removeCustomBlocks.length === 0) return false;
+		const drawings = (_documentDataModel$ge3 = documentDataModel.getDrawings()) !== null && _documentDataModel$ge3 !== void 0 ? _documentDataModel$ge3 : {};
+		const removeDrawingParamById = new Map(removeDrawings.map((drawing) => [drawing.drawingId, drawing]));
+		const removeDrawingSnapshots = removeCustomBlocks.map((block) => drawings[block.blockId]).filter((drawing) => drawing != null);
+		const resourceRedoMutations = [];
+		const resourceUndoMutations = [];
+		const resourceMutationGroups = [];
+		for (const block of removeCustomBlocks) {
+			var _removeDrawingParam$s;
+			const { blockId } = block;
+			const drawing = drawings[blockId];
+			if (drawing == null) continue;
+			const removeDrawingParam = removeDrawingParamById.get(blockId);
+			const mutationInfos = drawingAdapterService.getRemoveDrawingMutationInfos({
+				unitId,
+				subUnitId: (_removeDrawingParam$s = removeDrawingParam === null || removeDrawingParam === void 0 ? void 0 : removeDrawingParam.subUnitId) !== null && _removeDrawingParam$s !== void 0 ? _removeDrawingParam$s : unitId,
+				drawing,
+				removeDrawings: removeDrawingSnapshots
+			});
+			if (mutationInfos.redoMutations.length === 0 && mutationInfos.undoMutations.length === 0) continue;
+			resourceRedoMutations.push(...mutationInfos.redoMutations);
+			resourceUndoMutations.push(...mutationInfos.undoMutations);
+			resourceMutationGroups.push(mutationInfos);
+		}
+		if (!executeResourceMutationGroups(resourceMutationGroups, commandService)) return false;
+		const historyId = `doc-drawing-remove-resource:${unitId}:${removeCustomBlocks.map((block) => block.blockId).join(",")}`;
+		let batchingDisposable = null;
+		if (resourceRedoMutations.length > 0 || resourceUndoMutations.length > 0) {
+			batchingDisposable = undoRedoService.__tempBatchingUndoRedo(unitId);
+			undoRedoService.pushUndoRedo({
+				unitID: unitId,
+				redoMutations: resourceRedoMutations,
+				undoMutations: resourceUndoMutations,
+				id: historyId
+			});
+		}
 		const memoryCursor = new _univerjs_core.MemoryCursor();
 		memoryCursor.reset();
 		const cursorIndex = removeCustomBlocks[0].startIndex;
@@ -65,11 +103,9 @@ const RemoveDocDrawingCommand = {
 		const path = (0, _univerjs_core.getRichTextEditPath)(documentDataModel, segmentId);
 		rawActions.push(jsonX.editOp(textX.serialize(), path));
 		for (const block of removeCustomBlocks) {
-			var _documentDataModel$ge3;
 			const { blockId } = block;
-			const drawing = ((_documentDataModel$ge3 = documentDataModel.getDrawings()) !== null && _documentDataModel$ge3 !== void 0 ? _documentDataModel$ge3 : {})[blockId];
 			const drawingIndex = documentDataModel.getDrawingsOrder().indexOf(blockId);
-			const removeDrawingAction = jsonX.removeOp(["drawings", blockId], drawing);
+			const removeDrawingAction = jsonX.removeOp(["drawings", blockId], drawings[blockId]);
 			const removeDrawingOrderAction = jsonX.removeOp(["drawingsOrder", drawingIndex], blockId);
 			rawActions.push(removeDrawingAction);
 			rawActions.push(removeDrawingOrderAction);
@@ -78,9 +114,35 @@ const RemoveDocDrawingCommand = {
 			return _univerjs_core.JSONX.compose(acc, cur);
 		}, null);
 		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		if (!result && batchingDisposable != null) {
+			batchingDisposable.dispose();
+			undoRedoService.rollback(historyId, unitId);
+			return false;
+		}
+		batchingDisposable === null || batchingDisposable === void 0 || batchingDisposable.dispose();
 		return Boolean(result);
 	}
 };
+function executeResourceMutationGroups(mutationGroups, commandService) {
+	const executedUndoGroups = [];
+	for (const mutationGroup of mutationGroups) {
+		if (!executeMutations(mutationGroup.redoMutations, commandService)) {
+			executeMutationGroups([...executedUndoGroups].reverse(), commandService);
+			return false;
+		}
+		executedUndoGroups.push(mutationGroup.undoMutations);
+	}
+	return true;
+}
+function executeMutationGroups(mutationGroups, commandService) {
+	mutationGroups.forEach((mutations) => {
+		executeMutations(mutations, commandService);
+	});
+}
+function executeMutations(mutations, commandService) {
+	for (const mutation of mutations) if (!commandService.syncExecuteCommand(mutation.id, mutation.params)) return false;
+	return true;
+}
 
 //#endregion
 //#region src/commands/commands/delete-doc-drawing.command.ts
@@ -139,7 +201,8 @@ const InsertDocDrawingCommand = {
 		const documentDataModel = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
 		if (documentDataModel == null) return false;
 		const unitId = documentDataModel.getUnitId();
-		const contentInsertRange = getContentInsertRange(accessor, unitId);
+		const explicitTextRange = params.textRange == null ? null : normalizeTextRange(params.textRange);
+		const contentInsertRange = explicitTextRange !== null && explicitTextRange !== void 0 ? explicitTextRange : getContentInsertRange(accessor, unitId);
 		const targetTextRange = contentInsertRange ? {
 			...activeTextRange,
 			startOffset: contentInsertRange.startOffset,
@@ -235,6 +298,16 @@ function getContentInsertRange(accessor, unitId) {
 		return null;
 	}
 }
+function normalizeTextRange(textRange) {
+	var _textRange$endOffset, _textRange$collapsed, _textRange$segmentId;
+	const endOffset = (_textRange$endOffset = textRange.endOffset) !== null && _textRange$endOffset !== void 0 ? _textRange$endOffset : textRange.startOffset;
+	return {
+		...textRange,
+		endOffset,
+		collapsed: (_textRange$collapsed = textRange.collapsed) !== null && _textRange$collapsed !== void 0 ? _textRange$collapsed : textRange.startOffset === endOffset,
+		segmentId: (_textRange$segmentId = textRange.segmentId) !== null && _textRange$segmentId !== void 0 ? _textRange$segmentId : ""
+	};
+}
 
 //#endregion
 //#region src/commands/commands/set-drawing-arrange.command.ts
@@ -430,13 +503,13 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 			const type = error.message;
 			let content = "";
 			switch (type) {
-				case _univerjs_drawing.ImageUploadStatusType.ERROR_EXCEED_SIZE:
+				case _univerjs_core.ImageUploadStatusType.ERROR_EXCEED_SIZE:
 					content = this._localeService.t("docs-drawing-ui.update-status.exceedMaxSize", String((0, _univerjs_drawing.getDrawingImageAllowSize)() / (1024 * 1024)));
 					break;
-				case _univerjs_drawing.ImageUploadStatusType.ERROR_IMAGE_TYPE:
+				case _univerjs_core.ImageUploadStatusType.ERROR_IMAGE_TYPE:
 					content = this._localeService.t("docs-drawing-ui.update-status.invalidImageType");
 					break;
-				case _univerjs_drawing.ImageUploadStatusType.ERROR_IMAGE:
+				case _univerjs_core.ImageUploadStatusType.ERROR_IMAGE:
 					content = this._localeService.t("docs-drawing-ui.update-status.invalidImage");
 					break;
 				default: break;
@@ -666,7 +739,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();
 			});
 		}));
@@ -691,7 +767,7 @@ DocDrawingUpdateRenderController = __decorate([
 	__decorateParam(1, _univerjs_core.ICommandService),
 	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_docs.DocSelectionManagerService)),
 	__decorateParam(3, _univerjs_engine_render.IRenderManagerService),
-	__decorateParam(4, _univerjs_drawing.IImageIoService),
+	__decorateParam(4, _univerjs_core.IImageIoService),
 	__decorateParam(5, _univerjs_docs_drawing.IDocDrawingService),
 	__decorateParam(6, _univerjs_drawing.IDrawingManagerService),
 	__decorateParam(7, _univerjs_core.IContextService),
@@ -757,7 +833,7 @@ function createShapeInsertCommand(shape, width, height, id) {
 					subUnitId: unitId,
 					drawingId: (0, _univerjs_core.generateRandomId)(6),
 					drawingType: _univerjs_core.DrawingTypeEnum.DRAWING_IMAGE,
-					imageSourceType: _univerjs_drawing.ImageSourceType.BASE64,
+					imageSourceType: _univerjs_core.ImageSourceType.BASE64,
 					source: createShapeSvgSource(shape, width, height),
 					transform: (0, _univerjs_docs_ui.docDrawingPositionToTransform)(docTransform),
 					docTransform,
@@ -1163,6 +1239,11 @@ const UpdateDrawingDocTransformCommand = {
 			return _univerjs_core.JSONX.compose(acc, cur);
 		}, null);
 		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		if (accessor.has(DocRefreshDrawingsService)) {
+			var _renderObject$with$ge;
+			const skeleton = (_renderObject$with$ge = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton()) !== null && _renderObject$with$ge !== void 0 ? _renderObject$with$ge : null;
+			accessor.get(DocRefreshDrawingsService).refreshDrawings(skeleton);
+		}
 		transformer.refreshControls();
 		return Boolean(result);
 	}
@@ -1465,6 +1546,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();
@@ -1482,6 +1587,7 @@ let DocFloatDomController = class DocFloatDomController extends _univerjs_core.D
 	}
 	_initialize() {
 		this._drawingAddRemoveListener();
+		this._drawingRuntimePropsListener();
 		this._initScrollAndZoomEvent();
 	}
 	_getSceneAndTransformerByDrawingSearch(unitId) {
@@ -1517,6 +1623,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));
@@ -1524,7 +1636,10 @@ let DocFloatDomController = class DocFloatDomController extends _univerjs_core.D
 				const data = rectParam.data;
 				const info = {
 					dispose: disposableCollection,
+					preserveRuntimeGeometry,
 					rect,
+					runtimeTransform,
+					runtimeViewport,
 					position$,
 					unitId
 				};
@@ -1532,6 +1647,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));
 					},
@@ -1545,20 +1662,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;
@@ -1659,6 +1798,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,10 +1989,79 @@ function InsertEllipseShapeBelowMenuFactory(accessor) {
 	};
 }
 
+//#endregion
+//#region src/menu/schema.ts
+const menuSchema = {
+	[_univerjs_ui.RibbonInsertGroup.MEDIA]: { [DOCS_IMAGE_MENU_ID]: {
+		order: 0,
+		menuItemFactory: ImageMenuFactory,
+		[IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+			order: 0,
+			menuItemFactory: UploadFloatImageMenuFactory
+		}
+	} },
+	[_univerjs_ui.ContextMenuPosition.PARAGRAPH]: {
+		[_univerjs_ui.ContextMenuGroup.LAYOUT]: { [_univerjs_docs_ui.INSERT_BELLOW_MENU_ID]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+			order: 5,
+			menuItemFactory: UploadFloatImageMenuFactory
+		} } },
+		[_univerjs_docs_ui.EMPTY_PARAGRAPH_MENU_ID]: { [_univerjs_ui.ContextMenuGroup.LAYOUT]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+			order: 5,
+			menuItemFactory: UploadFloatImageMenuFactory
+		} } },
+		[_univerjs_docs_ui.DOC_CONTENT_INSERT_MENU_ID]: { [_univerjs_ui.ContextMenuGroup.LAYOUT]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+			order: 5,
+			menuItemFactory: UploadFloatImageMenuFactory
+		} } },
+		[_univerjs_docs_ui.DOC_PARAGRAPH_T_INSERT_MENU_ID]: { insert: {
+			[IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+				order: 1,
+				menuItemFactory: UploadFloatImageMenuFactory
+			},
+			[DOCS_SHAPE_MENU_ID]: {
+				order: 2,
+				menuItemFactory: ShapeMenuFactory
+			}
+		} },
+		[_univerjs_docs_ui.DOC_PARAGRAPH_T_INSERT_BELOW_MENU_ID]: { insert: {
+			[`${IMAGE_MENU_UPLOAD_FLOAT_ID}.below`]: {
+				order: 1,
+				menuItemFactory: UploadFloatImageBelowMenuFactory
+			},
+			[DOCS_SHAPE_BELOW_MENU_ID]: {
+				order: 2,
+				menuItemFactory: ShapeBelowMenuFactory
+			}
+		} },
+		[DOCS_SHAPE_MENU_ID]: { shapes: {
+			order: 0,
+			[InsertDocRectangleShapeCommand.id]: {
+				order: 0,
+				menuItemFactory: InsertRectangleShapeMenuFactory
+			},
+			[InsertDocEllipseShapeCommand.id]: {
+				order: 1,
+				menuItemFactory: InsertEllipseShapeMenuFactory
+			}
+		} },
+		[DOCS_SHAPE_BELOW_MENU_ID]: { shapes: {
+			order: 0,
+			[`${InsertDocRectangleShapeCommand.id}.below`]: {
+				order: 0,
+				menuItemFactory: InsertRectangleShapeBelowMenuFactory
+			},
+			[`${InsertDocEllipseShapeCommand.id}.below`]: {
+				order: 1,
+				menuItemFactory: InsertEllipseShapeBelowMenuFactory
+			}
+		} }
+	}
+};
+
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-drawing-ui";
-var version = "1.0.0-alpha.2";
+var version = "1.0.0-alpha.3";
 
 //#endregion
 //#region src/config/config.ts
@@ -2451,6 +2724,24 @@ function getReOrderedDrawings(actions) {
 	}
 	return drawingIndexes;
 }
+function collectUpdatedDrawingIds(actions, drawingIds = /* @__PURE__ */ new Set()) {
+	if (_univerjs_core.JSONX.isNoop(actions) || !Array.isArray(actions)) return drawingIds;
+	if (actions[0] === "drawings") {
+		const drawingKeyOrOps = actions[1];
+		if (typeof drawingKeyOrOps === "string") {
+			drawingIds.add(drawingKeyOrOps);
+			return drawingIds;
+		}
+		actions.slice(1).forEach((action) => {
+			if (Array.isArray(action) && typeof action[0] === "string") drawingIds.add(action[0]);
+		});
+		return drawingIds;
+	}
+	actions.forEach((action) => {
+		if (Array.isArray(action)) collectUpdatedDrawingIds(action, drawingIds);
+	});
+	return drawingIds;
+}
 let DocDrawingAddRemoveController = class DocDrawingAddRemoveController extends _univerjs_core.Disposable {
 	constructor(_univerInstanceService, _commandService, _drawingManagerService, _docDrawingService, _renderManagerService) {
 		super();
@@ -2479,6 +2770,8 @@ let DocDrawingAddRemoveController = class DocDrawingAddRemoveController extends
 			if (command.id !== _univerjs_docs.RichTextEditingMutation.id) return;
 			const { unitId, actions } = command.params;
 			if (getReOrderedDrawings(actions).length > 0) this._updateDrawingsOrder(unitId);
+			const updatedDrawingIds = [...collectUpdatedDrawingIds(actions)];
+			if (updatedDrawingIds.length > 0) this._syncDrawingDataFromSnapshot(unitId, updatedDrawingIds);
 		}));
 		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
 			var _this$_univerInstance;
@@ -2538,6 +2831,25 @@ let DocDrawingAddRemoveController = class DocDrawingAddRemoveController extends
 			drawingIds: drawingsOrder
 		});
 	}
+	_syncDrawingDataFromSnapshot(unitId, drawingIds) {
+		const documentDataModel = this._univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
+		if (documentDataModel == null) return;
+		const { drawings = {}, drawingsOrder = [] } = documentDataModel.getSnapshot();
+		const drawingData = drawings;
+		const renderOrder = (0, _univerjs_docs_drawing.getDocDrawingRenderOrder)(drawingsOrder, drawings);
+		this._docDrawingService.setDrawingData(unitId, unitId, drawingData);
+		this._drawingManagerService.setDrawingData(unitId, unitId, drawingData);
+		this._docDrawingService.setDrawingOrder(unitId, unitId, drawingsOrder);
+		this._drawingManagerService.setDrawingOrder(unitId, unitId, renderOrder);
+		const objects = drawingIds.filter((drawingId) => drawingData[drawingId] != null).map((drawingId) => ({
+			unitId,
+			subUnitId: unitId,
+			drawingId
+		}));
+		if (objects.length === 0) return;
+		this._docDrawingService.updateNotification(objects);
+		this._drawingManagerService.updateNotification(objects);
+	}
 };
 DocDrawingAddRemoveController = __decorate([
 	__decorateParam(0, _univerjs_core.IUniverInstanceService),
@@ -2928,6 +3240,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);
@@ -3521,75 +3834,6 @@ DocDrawingTransformerController = __decorate([
 	__decorateParam(3, _univerjs_engine_render.IRenderManagerService)
 ], DocDrawingTransformerController);
 
-//#endregion
-//#region src/menu/schema.ts
-const menuSchema = {
-	[_univerjs_ui.RibbonInsertGroup.MEDIA]: { [DOCS_IMAGE_MENU_ID]: {
-		order: 0,
-		menuItemFactory: ImageMenuFactory,
-		[IMAGE_MENU_UPLOAD_FLOAT_ID]: {
-			order: 0,
-			menuItemFactory: UploadFloatImageMenuFactory
-		}
-	} },
-	[_univerjs_ui.ContextMenuPosition.PARAGRAPH]: {
-		[_univerjs_ui.ContextMenuGroup.LAYOUT]: { [_univerjs_docs_ui.INSERT_BELLOW_MENU_ID]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
-			order: 5,
-			menuItemFactory: UploadFloatImageMenuFactory
-		} } },
-		[_univerjs_docs_ui.EMPTY_PARAGRAPH_MENU_ID]: { [_univerjs_ui.ContextMenuGroup.LAYOUT]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
-			order: 5,
-			menuItemFactory: UploadFloatImageMenuFactory
-		} } },
-		[_univerjs_docs_ui.DOC_CONTENT_INSERT_MENU_ID]: { [_univerjs_ui.ContextMenuGroup.LAYOUT]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
-			order: 5,
-			menuItemFactory: UploadFloatImageMenuFactory
-		} } },
-		[_univerjs_docs_ui.DOC_PARAGRAPH_T_INSERT_MENU_ID]: { insert: {
-			[IMAGE_MENU_UPLOAD_FLOAT_ID]: {
-				order: 1,
-				menuItemFactory: UploadFloatImageMenuFactory
-			},
-			[DOCS_SHAPE_MENU_ID]: {
-				order: 2,
-				menuItemFactory: ShapeMenuFactory
-			}
-		} },
-		[_univerjs_docs_ui.DOC_PARAGRAPH_T_INSERT_BELOW_MENU_ID]: { insert: {
-			[`${IMAGE_MENU_UPLOAD_FLOAT_ID}.below`]: {
-				order: 1,
-				menuItemFactory: UploadFloatImageBelowMenuFactory
-			},
-			[DOCS_SHAPE_BELOW_MENU_ID]: {
-				order: 2,
-				menuItemFactory: ShapeBelowMenuFactory
-			}
-		} },
-		[DOCS_SHAPE_MENU_ID]: { shapes: {
-			order: 0,
-			[InsertDocRectangleShapeCommand.id]: {
-				order: 0,
-				menuItemFactory: InsertRectangleShapeMenuFactory
-			},
-			[InsertDocEllipseShapeCommand.id]: {
-				order: 1,
-				menuItemFactory: InsertEllipseShapeMenuFactory
-			}
-		} },
-		[DOCS_SHAPE_BELOW_MENU_ID]: { shapes: {
-			order: 0,
-			[`${InsertDocRectangleShapeCommand.id}.below`]: {
-				order: 0,
-				menuItemFactory: InsertRectangleShapeBelowMenuFactory
-			},
-			[`${InsertDocEllipseShapeCommand.id}.below`]: {
-				order: 1,
-				menuItemFactory: InsertEllipseShapeBelowMenuFactory
-			}
-		} }
-	}
-};
-
 //#endregion
 //#region src/controllers/shortcuts/drawing.shortcut.ts
 function whenDocDrawingFocused(contextService) {
@@ -3721,16 +3965,40 @@ DocDrawingUIController = __decorate([
 	__decorateParam(2, _univerjs_ui.IShortcutService)
 ], DocDrawingUIController);
 
+//#endregion
+//#region src/services/doc-drawing-floating-toolbar-adapter.service.ts
+var DocDrawingFloatingToolbarAdapterService = class {
+	constructor() {
+		_defineProperty(this, "_adapters", []);
+	}
+	registerAdapter(adapter) {
+		this._adapters.push(adapter);
+		return (0, _univerjs_core.toDisposable)(() => {
+			const index = this._adapters.indexOf(adapter);
+			if (index >= 0) this._adapters.splice(index, 1);
+		});
+	}
+	getItems(params) {
+		for (const adapter of this._adapters) {
+			const items = adapter.getItems(params);
+			if (items) return [...items].sort((a, b) => a.index - b.index);
+		}
+		return null;
+	}
+};
+
 //#endregion
 //#region src/menu/drawing-popup-menu.controller.ts
 let DocDrawingPopupMenuController = class DocDrawingPopupMenuController extends _univerjs_core.RxDisposable {
-	constructor(_drawingManagerService, _canvasPopManagerService, _renderManagerService, _univerInstanceService, _contextService, _commandService) {
+	constructor(_drawingManagerService, _canvasPopManagerService, _renderManagerService, _univerInstanceService, _contextService, _drawingAdapterService, _floatingToolbarAdapterService, _commandService) {
 		super();
 		this._drawingManagerService = _drawingManagerService;
 		this._canvasPopManagerService = _canvasPopManagerService;
 		this._renderManagerService = _renderManagerService;
 		this._univerInstanceService = _univerInstanceService;
 		this._contextService = _contextService;
+		this._drawingAdapterService = _drawingAdapterService;
+		this._floatingToolbarAdapterService = _floatingToolbarAdapterService;
 		this._commandService = _commandService;
 		_defineProperty(this, "_initImagePopupMenu", /* @__PURE__ */ new Set());
 		_defineProperty(this, "_disposePopups", []);
@@ -3800,13 +4068,14 @@ let DocDrawingPopupMenuController = class DocDrawingPopupMenuController extends
 			if (!drawingParam || drawingParam.drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_DOM || drawingParam.drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_SHAPE) return;
 			const { unitId, subUnitId, drawingId, drawingType } = drawingParam;
 			const isImage = drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_IMAGE;
+			const isChart = drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_CHART;
 			const popup = this._canvasPopManagerService.attachPopupToObject(object, {
 				componentKey: _univerjs_drawing_ui.COMPONENT_IMAGE_POPUP_MENU,
-				direction: isImage ? "top-center" : "horizontal",
-				offset: isImage ? [0, 8] : [2, 0],
+				direction: isImage || isChart ? "top-center" : "horizontal",
+				offset: isImage || isChart ? [0, 8] : [2, 0],
 				extraProps: {
-					menuItems: this._getImageMenuItems(unitId, subUnitId, drawingId, drawingType),
-					variant: isImage ? "doc-floating-toolbar" : void 0,
+					menuItems: this._getDrawingPopupMenuItems(unitId, subUnitId, drawingId, drawingType),
+					variant: isImage ? "doc-floating-toolbar" : isChart ? "doc-chart-floating-toolbar" : void 0,
 					unitId,
 					subUnitId,
 					drawingId
@@ -3835,18 +4104,35 @@ let DocDrawingPopupMenuController = class DocDrawingPopupMenuController extends
 			disposePopups.length = 0;
 		}));
 	}
-	_getImageMenuItems(unitId, subUnitId, drawingId, drawingType) {
+	_getDrawingPopupMenuItems(unitId, subUnitId, drawingId, drawingType) {
+		var _editCommandInfo$labe, _editCommandInfo$comm, _editCommandInfo$comm2, _editCommandInfo$disa;
+		const drawing = this._drawingManagerService.getDrawingByParam({
+			unitId,
+			subUnitId,
+			drawingId
+		});
+		const floatingToolbarMenuItems = drawing ? this._floatingToolbarAdapterService.getItems({
+			unitId,
+			subUnitId,
+			drawing
+		}) : null;
+		if (floatingToolbarMenuItems) return floatingToolbarMenuItems;
+		const editCommandInfo = drawing ? this._drawingAdapterService.getEditDrawingCommandInfo({
+			unitId,
+			subUnitId,
+			drawing
+		}) : null;
 		return [
 			{
-				label: "docs-drawing-ui.image-popup.edit",
+				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",
 				index: 0,
-				commandId: EditDocDrawingOperation.id,
-				commandParams: {
+				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 : {
 					unitId,
 					subUnitId,
 					drawingId
 				},
-				disable: drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_DOM
+				disable: (_editCommandInfo$disa = editCommandInfo === null || editCommandInfo === void 0 ? void 0 : editCommandInfo.disable) !== null && _editCommandInfo$disa !== void 0 ? _editCommandInfo$disa : drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_DOM
 			},
 			{
 				label: "docs-drawing-ui.image-popup.delete",
@@ -3893,7 +4179,9 @@ DocDrawingPopupMenuController = __decorate([
 	__decorateParam(2, _univerjs_engine_render.IRenderManagerService),
 	__decorateParam(3, _univerjs_core.IUniverInstanceService),
 	__decorateParam(4, _univerjs_core.IContextService),
-	__decorateParam(5, _univerjs_core.ICommandService)
+	__decorateParam(5, _univerjs_docs_drawing.IDocDrawingAdapterService),
+	__decorateParam(6, (0, _univerjs_core.Inject)(DocDrawingFloatingToolbarAdapterService)),
+	__decorateParam(7, _univerjs_core.ICommandService)
 ], DocDrawingPopupMenuController);
 
 //#endregion
@@ -3916,6 +4204,7 @@ let UniverDocsDrawingUIPlugin = class UniverDocsDrawingUIPlugin extends _univerj
 			[DocDrawingTransformerController],
 			[DocDrawingAddRemoveController],
 			[DocRefreshDrawingsService],
+			[DocDrawingFloatingToolbarAdapterService],
 			[DocFloatDomController],
 			[DocDrawingPrintingController]
 		].forEach((dependency) => this._injector.add(dependency));
@@ -3950,6 +4239,7 @@ exports.DOCS_IMAGE_MENU_ID = DOCS_IMAGE_MENU_ID;
 exports.DOCS_SHAPE_BELOW_MENU_ID = DOCS_SHAPE_BELOW_MENU_ID;
 exports.DOCS_SHAPE_MENU_ID = DOCS_SHAPE_MENU_ID;
 exports.DeleteDocDrawingsCommand = DeleteDocDrawingsCommand;
+exports.DocDrawingFloatingToolbarAdapterService = DocDrawingFloatingToolbarAdapterService;
 exports.DocDrawingPosition = DocDrawingPosition;
 exports.DocDrawingTextWrap = DocDrawingTextWrap;
 Object.defineProperty(exports, 'DocFloatDomController', {
@@ -3958,6 +4248,7 @@ Object.defineProperty(exports, 'DocFloatDomController', {
     return DocFloatDomController;
   }
 });
+exports.DocsDrawingUIMenuSchema = menuSchema;
 exports.EditDocDrawingOperation = EditDocDrawingOperation;
 exports.GroupDocDrawingCommand = GroupDocDrawingCommand;
 exports.InsertDocDrawingCommand = InsertDocDrawingCommand;
@@ -3974,4 +4265,5 @@ Object.defineProperty(exports, 'UniverDocsDrawingUIPlugin', {
   get: function () {
     return UniverDocsDrawingUIPlugin;
   }
-});
+});
+exports.UpdateDrawingDocTransformCommand = UpdateDrawingDocTransformCommand;