@univerjs/docs-drawing-ui 1.0.0-beta.1 → 1.0.0-beta.2

package/lib/index.js

@@ -162,6 +162,7 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 		this._docRefreshDrawingsService = _docRefreshDrawingsService;
 		this._fileOpenerService = _fileOpenerService;
 		this._updateOrderListener();
+		this._updateImageCropListener();
 		this._groupDrawingListener();
 		this._focusDrawingListener();
 		this._transformDrawingListener();
@@ -173,10 +174,12 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 	}
 	async insertDocImage() {
 		const insertPosition = this._getCurrentImageInsertPosition();
+		const textRange = this._getCurrentImageInsertTextRange();
 		const files = await this._fileOpenerService.openFile({
 			multiple: true,
 			accept: DRAWING_IMAGE_ALLOW_IMAGE_LIST.map((image) => `.${image.replace("image/", "")}`).join(",")
 		});
+		if (this._disposed) return false;
 		const fileLength = files.length;
 		if (fileLength > DRAWING_IMAGE_COUNT_LIMIT) {
 			this._messageService.show({
@@ -185,10 +188,9 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 			});
 			return false;
 		} else if (fileLength === 0) return false;
-		await this._insertFloatImages(files, insertPosition);
-		return true;
+		return await this._insertFloatImages(files, insertPosition, textRange);
 	}
-	async _insertFloatImages(files, insertPosition) {
+	async _insertFloatImages(files, insertPosition, textRange) {
 		let imageParams = [];
 		try {
 			imageParams = await Promise.all(files.map((file) => this._imageIoService.saveImage(file)));
@@ -212,13 +214,14 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 				content
 			});
 		}
-		if (imageParams.length === 0) return;
+		if (this._disposed || imageParams.length === 0) return false;
 		const { unitId } = this._context;
 		const docDrawingParams = [];
 		for (const imageParam of imageParams) {
 			if (imageParam == null) continue;
 			const { imageId, imageSourceType, source, base64Cache } = imageParam;
 			const { width, height, image } = await getImageSize(base64Cache || "");
+			if (this._disposed) return false;
 			this._imageIoService.addImageSourceCache(imageId, imageSourceType, image);
 			let scale = 1;
 			if (width > DRAWING_IMAGE_WIDTH_LIMIT || height > DRAWING_IMAGE_HEIGHT_LIMIT) {
@@ -228,7 +231,7 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 			}
 			const imagePosition = insertPosition ?? this._getCurrentImageInsertPosition();
 			const docTransform = this._getImagePosition(width * scale, height * scale, imagePosition);
-			if (docTransform == null) return;
+			if (docTransform == null) return false;
 			const transform = docDrawingPositionToTransform(docTransform);
 			if (transform != null && imagePosition != null) transform.top = imagePosition.top;
 			const docDrawingParam = {
@@ -256,9 +259,10 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 			}
 			docDrawingParams.push(docDrawingParam);
 		}
-		this._commandService.executeCommand(InsertDocDrawingCommand.id, {
+		return await this._commandService.executeCommand(InsertDocDrawingCommand.id, {
 			unitId,
-			drawings: docDrawingParams
+			drawings: docDrawingParams,
+			textRange: textRange ?? void 0
 		});
 	}
 	_isInsertInHeaderFooter() {
@@ -283,6 +287,9 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 			top: position.top
 		};
 	}
+	_getCurrentImageInsertTextRange() {
+		return this._docSelectionRenderService.getAllTextRanges().find((range) => range.isActive) ?? this._docSelectionManagerService.getActiveTextRange();
+	}
 	_updateOrderListener() {
 		this.disposeWithMe(this._drawingManagerService.featurePluginOrderUpdate$.subscribe((params) => {
 			const { unitId, subUnitId, drawingIds, arrangeType } = params;
@@ -294,6 +301,73 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 			});
 		}));
 	}
+	_updateImageCropListener() {
+		this.disposeWithMe(this._drawingManagerService.featurePluginUpdate$.subscribe((params) => {
+			const drawings = params.flatMap((param) => this._getImageCropUpdates(param));
+			if (drawings.length > 0) {
+				const { unitId } = this._context;
+				this._commandService.executeCommand(UpdateDrawingDocTransformCommand.id, {
+					unitId,
+					subUnitId: unitId,
+					drawings
+				});
+			}
+		}));
+	}
+	_getImageCropUpdates(param) {
+		const { unitId, subUnitId, drawingId, transform } = param;
+		if ([unitId, subUnitId].some((id) => id !== this._context.unitId)) return [];
+		if (transform == null || !Object.prototype.hasOwnProperty.call(param, "srcRect")) return [];
+		const docDrawing = this._getDocDrawing(drawingId);
+		const renderDrawing = this._drawingManagerService.getDrawingByParam({
+			unitId,
+			subUnitId,
+			drawingId
+		});
+		if ((docDrawing === null || docDrawing === void 0 ? void 0 : docDrawing.drawingType) !== DrawingTypeEnum.DRAWING_IMAGE || (renderDrawing === null || renderDrawing === void 0 ? void 0 : renderDrawing.transform) == null) return [];
+		const nextTransform = {
+			...renderDrawing.transform,
+			...transform
+		};
+		const drawings = [{
+			drawingId,
+			key: "srcRect",
+			value: param.srcRect
+		}];
+		if (nextTransform.width != null && nextTransform.height != null) drawings.push({
+			drawingId,
+			key: "size",
+			value: {
+				width: nextTransform.width,
+				height: nextTransform.height
+			}
+		});
+		if (docDrawing.layoutType === PositionedObjectLayoutType.INLINE || renderDrawing.isMultiTransform === BooleanNumber.TRUE) return drawings;
+		const horizontalDelta = (nextTransform.left ?? 0) - (renderDrawing.transform.left ?? 0);
+		const verticalDelta = (nextTransform.top ?? 0) - (renderDrawing.transform.top ?? 0);
+		const { positionH, positionV } = docDrawing.docTransform;
+		if (horizontalDelta !== 0 && positionH.posOffset != null) drawings.push({
+			drawingId,
+			key: "positionH",
+			value: {
+				relativeFrom: positionH.relativeFrom,
+				posOffset: positionH.posOffset + horizontalDelta
+			}
+		});
+		if (verticalDelta !== 0 && positionV.posOffset != null) drawings.push({
+			drawingId,
+			key: "positionV",
+			value: {
+				relativeFrom: positionV.relativeFrom,
+				posOffset: positionV.posOffset + verticalDelta
+			}
+		});
+		return drawings;
+	}
+	_getDocDrawing(drawingId) {
+		var _this$_context$unit$g;
+		return (_this$_context$unit$g = this._context.unit.getDrawings()) === null || _this$_context$unit$g === void 0 ? void 0 : _this$_context$unit$g[drawingId];
+	}
 	_groupDrawingListener() {
 		this.disposeWithMe(this._drawingManagerService.featurePluginGroupUpdate$.subscribe((params) => {
 			this._commandService.executeCommand(GroupDocDrawingCommand.id, params);
@@ -316,7 +390,7 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 	}
 	_transformDrawingListener() {
 		const res = this._getCurrentSceneAndTransformer();
-		if (res && res.transformer) this.disposeWithMe(res.transformer.changeEnd$.pipe(debounceTime(30)).subscribe((params) => {
+		if (res && res.transformer) this.disposeWithMe(res.transformer.changeEnd$.pipe(debounceTime(30)).subscribe(() => {
 			this._docSelectionManagerService.refreshSelection();
 		}));
 		else throw new Error("transformer is not init");
@@ -381,13 +455,13 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 				scene.detachTransformerFrom(shape);
 				try {
 					shape.setOpacity(isDocInputFocusing ? .5 : 1);
-				} catch (e) {}
+				} catch {}
 				if (!isDocInputFocusing) continue;
 				if (isEditBody && drawing.isMultiTransform !== BooleanNumber.TRUE || !isEditBody && drawing.isMultiTransform === BooleanNumber.TRUE) {
 					if (drawing.allowTransform !== false) scene.attachTransformerTo(shape);
 					try {
 						shape.setOpacity(1);
-					} catch (e) {}
+					} catch {}
 				}
 			}
 		}
@@ -1191,7 +1265,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-drawing-ui";
-var version = "1.0.0-beta.1";
+var version = "1.0.0-beta.2";
 
 //#endregion
 //#region src/config/config.ts
@@ -3602,6 +3676,8 @@ let DocDrawingPopupMenuController = class DocDrawingPopupMenuController extends
 		this._floatingToolbarAdapterService = _floatingToolbarAdapterService;
 		this._commandService = _commandService;
 		_defineProperty(this, "_initImagePopupMenu", /* @__PURE__ */ new Set());
+		_defineProperty(this, "_embeddedRenderUnits", /* @__PURE__ */ new Set());
+		_defineProperty(this, "_popupMenuListeners", /* @__PURE__ */ new Map());
 		_defineProperty(this, "_disposePopups", []);
 		_defineProperty(this, "_isDrawingPanelOpen", false);
 		this._init();
@@ -3623,11 +3699,21 @@ let DocDrawingPopupMenuController = class DocDrawingPopupMenuController extends
 		}));
 		this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_DOC).pipe(takeUntil(this.dispose$)).subscribe((documentDataModel) => this._create(documentDataModel)));
 		this.disposeWithMe(this._univerInstanceService.getTypeOfUnitDisposed$(UniverInstanceType.UNIVER_DOC).pipe(takeUntil(this.dispose$)).subscribe((documentDataModel) => this._dispose(documentDataModel)));
+		this.disposeWithMe(this._renderManagerService.created$.pipe(takeUntil(this.dispose$)).subscribe((render) => {
+			if (render.type !== UniverInstanceType.UNIVER_DOC || render.isMainScene) return;
+			this._embeddedRenderUnits.add(render.unitId);
+			this._create(this._univerInstanceService.getUnit(render.unitId, UniverInstanceType.UNIVER_DOC));
+		}));
+		this.disposeWithMe(this._renderManagerService.disposed$.pipe(takeUntil(this.dispose$)).subscribe((unitId) => {
+			if (!this._embeddedRenderUnits.delete(unitId)) return;
+			this._disposePopupMenuListener(unitId);
+		}));
 		this._univerInstanceService.getAllUnitsForType(UniverInstanceType.UNIVER_DOC).forEach((documentDataModel) => this._create(documentDataModel));
 	}
 	_dispose(documentDataModel) {
 		const unitId = documentDataModel.getUnitId();
 		this._clearPopups();
+		this._disposePopupMenuListener(unitId);
 		this._renderManagerService.removeRender(unitId);
 	}
 	_clearPopups() {
@@ -3639,10 +3725,20 @@ let DocDrawingPopupMenuController = class DocDrawingPopupMenuController extends
 		const unitId = documentDataModel.getUnitId();
 		if (isInternalEditorID(unitId)) return;
 		if (this._renderManagerService.has(unitId) && !this._initImagePopupMenu.has(unitId)) {
-			this._popupMenuListener(unitId);
-			this._initImagePopupMenu.add(unitId);
+			const listener = this._popupMenuListener(unitId);
+			if (listener) {
+				this._popupMenuListeners.set(unitId, listener);
+				this._initImagePopupMenu.add(unitId);
+			}
 		}
 	}
+	_disposePopupMenuListener(unitId) {
+		var _this$_popupMenuListe;
+		(_this$_popupMenuListe = this._popupMenuListeners.get(unitId)) === null || _this$_popupMenuListe === void 0 || _this$_popupMenuListe.dispose();
+		this._popupMenuListeners.delete(unitId);
+		this._initImagePopupMenu.delete(unitId);
+		this._clearPopups();
+	}
 	_hasCropObject(scene) {
 		const objects = scene.getAllObjects();
 		for (const object of objects) if (object instanceof ImageCropperObject) return true;
@@ -3655,55 +3751,57 @@ let DocDrawingPopupMenuController = class DocDrawingPopupMenuController extends
 		const transformer = scene.getTransformerByCreate();
 		if (!transformer) return;
 		const disposePopups = this._disposePopups;
-		this.disposeWithMe(transformer.createControl$.subscribe(() => {
-			if (this._hasCropObject(scene)) return;
-			const selectedObjects = transformer.getSelectedObjectMap();
-			disposePopups.forEach((dispose) => dispose.dispose());
-			disposePopups.length = 0;
-			if (this._isDrawingPanelOpen) return;
-			if (selectedObjects.size > 1) return;
-			const object = selectedObjects.values().next().value;
-			if (!object) return;
-			const oKey = object.oKey;
-			const drawingParam = this._drawingManagerService.getDrawingOKey(oKey);
-			if (!drawingParam || drawingParam.drawingType === DrawingTypeEnum.DRAWING_DOM || drawingParam.drawingType === DrawingTypeEnum.DRAWING_SHAPE) return;
-			const { unitId, subUnitId, drawingId, drawingType } = drawingParam;
-			const isImage = drawingType === DrawingTypeEnum.DRAWING_IMAGE;
-			const isChart = drawingType === DrawingTypeEnum.DRAWING_CHART;
-			const popup = this._canvasPopManagerService.attachPopupToObject(object, {
-				componentKey: COMPONENT_IMAGE_POPUP_MENU,
-				direction: isImage || isChart ? "top-center" : "horizontal",
-				offset: isImage || isChart ? [0, 8] : [2, 0],
-				extraProps: {
-					menuItems: this._getDrawingPopupMenuItems(unitId, subUnitId, drawingId, drawingType),
-					variant: isImage ? "doc-floating-toolbar" : isChart ? "doc-chart-floating-toolbar" : void 0,
+		const subscriptions = [
+			transformer.createControl$.subscribe(() => {
+				if (this._hasCropObject(scene)) return;
+				const selectedObjects = transformer.getSelectedObjectMap();
+				disposePopups.forEach((dispose) => dispose.dispose());
+				disposePopups.length = 0;
+				if (this._isDrawingPanelOpen || selectedObjects.size > 1) return;
+				const object = selectedObjects.values().next().value;
+				if (!object) return;
+				const drawingParam = this._drawingManagerService.getDrawingOKey(object.oKey);
+				if (!drawingParam || drawingParam.drawingType === DrawingTypeEnum.DRAWING_DOM || drawingParam.drawingType === DrawingTypeEnum.DRAWING_SHAPE) return;
+				const { unitId, subUnitId, drawingId, drawingType } = drawingParam;
+				const isImage = drawingType === DrawingTypeEnum.DRAWING_IMAGE;
+				const isChart = drawingType === DrawingTypeEnum.DRAWING_CHART;
+				const popup = this._canvasPopManagerService.attachPopupToObject(object, {
+					componentKey: COMPONENT_IMAGE_POPUP_MENU,
+					direction: isImage || isChart ? "top-center" : "horizontal",
+					offset: isImage || isChart ? [0, 8] : [2, 0],
+					extraProps: {
+						menuItems: this._getDrawingPopupMenuItems(unitId, subUnitId, drawingId, drawingType),
+						variant: isImage ? "doc-floating-toolbar" : isChart ? "doc-chart-floating-toolbar" : void 0,
+						unitId,
+						subUnitId,
+						drawingId
+					}
+				}, unitId);
+				disposePopups.push(this.disposeWithMe(popup));
+				if (!this._drawingManagerService.getFocusDrawings().find((drawing) => drawing.unitId === unitId && drawing.subUnitId === subUnitId && drawing.drawingId === drawingId)) this._drawingManagerService.focusDrawing([{
 					unitId,
 					subUnitId,
 					drawingId
-				}
-			}, unitId);
-			disposePopups.push(this.disposeWithMe(popup));
-			if (this._drawingManagerService.getFocusDrawings().find((drawing) => drawing.unitId === unitId && drawing.subUnitId === subUnitId && drawing.drawingId === drawingId)) return;
-			this._drawingManagerService.focusDrawing([{
-				unitId,
-				subUnitId,
-				drawingId
-			}]);
-		}));
-		this.disposeWithMe(transformer.clearControl$.subscribe(() => {
-			disposePopups.forEach((dispose) => dispose.dispose());
-			disposePopups.length = 0;
-			this._contextService.setContextValue(FOCUSING_COMMON_DRAWINGS, false);
-			this._drawingManagerService.focusDrawing(null);
-		}));
-		this.disposeWithMe(transformer.changing$.subscribe(() => {
-			disposePopups.forEach((dispose) => dispose.dispose());
-			disposePopups.length = 0;
-		}));
-		this.disposeWithMe(transformer.changeStart$.subscribe(() => {
-			disposePopups.forEach((dispose) => dispose.dispose());
-			disposePopups.length = 0;
-		}));
+				}]);
+			}),
+			transformer.clearControl$.subscribe(() => {
+				disposePopups.forEach((dispose) => dispose.dispose());
+				disposePopups.length = 0;
+				this._contextService.setContextValue(FOCUSING_COMMON_DRAWINGS, false);
+				this._drawingManagerService.focusDrawing(null);
+			}),
+			transformer.changing$.subscribe(() => {
+				disposePopups.forEach((dispose) => dispose.dispose());
+				disposePopups.length = 0;
+			}),
+			transformer.changeStart$.subscribe(() => {
+				disposePopups.forEach((dispose) => dispose.dispose());
+				disposePopups.length = 0;
+			})
+		];
+		const disposable = toDisposable(() => subscriptions.forEach((subscription) => subscription.unsubscribe()));
+		this.disposeWithMe(disposable);
+		return disposable;
 	}
 	_getDrawingPopupMenuItems(unitId, subUnitId, drawingId, drawingType) {
 		const drawing = this._drawingManagerService.getDrawingByParam({

package/lib/types/controllers/render-controllers/doc-drawing-update.render-controller.d.ts

@@ -44,7 +44,11 @@ export declare class DocDrawingUpdateRenderController extends Disposable impleme
     private _isInsertInHeaderFooter;
     private _getImagePosition;
     private _getCurrentImageInsertPosition;
+    private _getCurrentImageInsertTextRange;
     private _updateOrderListener;
+    private _updateImageCropListener;
+    private _getImageCropUpdates;
+    private _getDocDrawing;
     private _groupDrawingListener;
     private _getCurrentSceneAndTransformer;
     private _transformDrawingListener;

package/lib/types/menu/drawing-popup-menu.controller.d.ts

@@ -29,6 +29,8 @@ export declare class DocDrawingPopupMenuController extends RxDisposable {
     private readonly _floatingToolbarAdapterService;
     private readonly _commandService;
     private _initImagePopupMenu;
+    private _embeddedRenderUnits;
+    private _popupMenuListeners;
     private _disposePopups;
     private _isDrawingPanelOpen;
     constructor(_drawingManagerService: IDrawingManagerService, _canvasPopManagerService: DocCanvasPopManagerService, _renderManagerService: IRenderManagerService, _univerInstanceService: IUniverInstanceService, _contextService: IContextService, _drawingAdapterService: IDocDrawingAdapterService, _floatingToolbarAdapterService: DocDrawingFloatingToolbarAdapterService, _commandService: ICommandService);
@@ -36,6 +38,7 @@ export declare class DocDrawingPopupMenuController extends RxDisposable {
     private _dispose;
     private _clearPopups;
     private _create;
+    private _disposePopupMenuListener;
     private _hasCropObject;
     private _popupMenuListener;
     private _getDrawingPopupMenuItems;