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

package/lib/cjs/locale/ru-RU.js

@@ -10,7 +10,6 @@ const locale = { "docs-drawing-ui": {
 	} },
 	panel: { title: "Редактировать изображение" },
 	"image-popup": {
-		replace: "Заменить",
 		delete: "Удалить",
 		edit: "Редактировать",
 		crop: "Обрезать",
@@ -39,9 +38,7 @@ const locale = { "docs-drawing-ui": {
 		horizontal: "По горизонтали",
 		vertical: "По вертикали",
 		absolutePosition: "Абсолютное положение (px)",
-		relativePosition: "Относительное положение",
 		toTheRightOf: "справа от",
-		relativeTo: "относительно",
 		bellow: "снизу",
 		options: "Параметры",
 		moveObjectWithText: "Перемещать объект с текстом",

package/lib/cjs/locale/sk-SK.js

@@ -10,7 +10,6 @@ const locale = { "docs-drawing-ui": {
 	} },
 	panel: { title: "Upraviť obrázok" },
 	"image-popup": {
-		replace: "Nahradiť",
 		delete: "Odstrániť",
 		edit: "Upraviť",
 		crop: "Orezať",
@@ -39,9 +38,7 @@ const locale = { "docs-drawing-ui": {
 		horizontal: "Vodorovne",
 		vertical: "Zvisle",
 		absolutePosition: "Absolútna pozícia (px)",
-		relativePosition: "Relatívna pozícia",
 		toTheRightOf: "vpravo od",
-		relativeTo: "vzhľadom na",
 		bellow: "pod",
 		options: "Možnosti",
 		moveObjectWithText: "Presunúť objekt s textom",

package/lib/cjs/locale/vi-VN.js

@@ -10,7 +10,6 @@ const locale = { "docs-drawing-ui": {
 	} },
 	panel: { title: "Chỉnh sửa hình ảnh" },
 	"image-popup": {
-		replace: "Thay thế",
 		delete: "Xóa",
 		edit: "Chỉnh sửa",
 		crop: "Cắt",
@@ -39,9 +38,7 @@ const locale = { "docs-drawing-ui": {
 		horizontal: "Ngang",
 		vertical: "Dọc",
 		absolutePosition: "Vị trí tuyệt đối (px)",
-		relativePosition: "Vị trí tương đối",
 		toTheRightOf: "ở bên phải",
-		relativeTo: "tương đối với",
 		bellow: "bên dưới",
 		options: "Tùy chọn",
 		moveObjectWithText: "Di chuyển đối tượng cùng văn bản",

package/lib/cjs/locale/zh-CN.js

@@ -10,7 +10,6 @@ const locale = { "docs-drawing-ui": {
 	} },
 	panel: { title: "编辑图片" },
 	"image-popup": {
-		replace: "替换",
 		delete: "删除",
 		edit: "编辑",
 		crop: "裁剪",
@@ -39,9 +38,7 @@ const locale = { "docs-drawing-ui": {
 		horizontal: "水平",
 		vertical: "垂直",
 		absolutePosition: "绝对位置（px）",
-		relativePosition: "相对位置",
 		toTheRightOf: "右侧",
-		relativeTo: "相对于",
 		bellow: "下方",
 		options: "选项",
 		moveObjectWithText: "对象随文字移动",

package/lib/cjs/locale/zh-HK.js

@@ -10,7 +10,6 @@ const locale = { "docs-drawing-ui": {
 	} },
 	panel: { title: "編圖" },
 	"image-popup": {
-		replace: "替換",
 		delete: "刪除",
 		edit: "編輯",
 		crop: "裁切",
@@ -39,9 +38,7 @@ const locale = { "docs-drawing-ui": {
 		horizontal: "水平",
 		vertical: "垂直",
 		absolutePosition: "絕對位置（px）",
-		relativePosition: "相對位置",
 		toTheRightOf: "右側",
-		relativeTo: "相對於",
 		bellow: "下方",
 		options: "選項",
 		moveObjectWithText: "物件隨文字移動",

package/lib/cjs/locale/zh-TW.js

@@ -10,7 +10,6 @@ const locale = { "docs-drawing-ui": {
 	} },
 	panel: { title: "編圖" },
 	"image-popup": {
-		replace: "替換",
 		delete: "刪除",
 		edit: "編輯",
 		crop: "裁切",
@@ -39,9 +38,7 @@ const locale = { "docs-drawing-ui": {
 		horizontal: "水平",
 		vertical: "垂直",
 		absolutePosition: "絕對位置（px）",
-		relativePosition: "相對位置",
 		toTheRightOf: "右側",
-		relativeTo: "相對於",
 		bellow: "下方",
 		options: "選項",
 		moveObjectWithText: "物件隨文字移動",

package/lib/es/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 {}
 				}
 			}
 		}
@@ -1033,7 +1107,8 @@ const getDisableWhenSelectionInTableObservable = (accessor) => {
 function ImageMenuFactory(accessor) {
 	return {
 		id: DOCS_IMAGE_MENU_ID,
-		type: MenuItemType.SUBITEMS,
+		commandId: IMAGE_MENU_UPLOAD_FLOAT_ID,
+		type: MenuItemType.BUTTON,
 		icon: "AddImageIcon",
 		tooltip: "docs-drawing-ui.title",
 		disabled$: getDisableWhenSelectionInTableObservable(accessor),
@@ -1127,11 +1202,7 @@ function InsertEllipseShapeBelowMenuFactory(accessor) {
 const menuSchema = {
 	[RibbonInsertGroup.MEDIA]: { [DOCS_IMAGE_MENU_ID]: {
 		order: 0,
-		menuItemFactory: ImageMenuFactory,
-		[IMAGE_MENU_UPLOAD_FLOAT_ID]: {
-			order: 0,
-			menuItemFactory: UploadFloatImageMenuFactory
-		}
+		menuItemFactory: ImageMenuFactory
 	} },
 	[ContextMenuPosition.PARAGRAPH]: {
 		[ContextMenuGroup.LAYOUT]: { [INSERT_BELLOW_MENU_ID]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
@@ -1194,7 +1265,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-drawing-ui";
-var version = "1.0.0-beta.0";
+var version = "1.0.0-beta.2";
 
 //#endregion
 //#region src/config/config.ts
@@ -2607,6 +2678,7 @@ let DocDrawingTransformUpdateController = class DocDrawingTransformUpdateControl
 		this._univerInstanceService = _univerInstanceService;
 		this._lifecycleService = _lifecycleService;
 		_defineProperty(this, "_liquid", new Liquid());
+		_defineProperty(this, "_changesetDrawingRefreshScheduled", false);
 		this._initialize();
 		this._commandExecutedListener();
 	}
@@ -2627,21 +2699,40 @@ let DocDrawingTransformUpdateController = class DocDrawingTransformUpdateControl
 	}
 	_commandExecutedListener() {
 		const updateCommandList = [RichTextEditingMutation.id, SetDocZoomRatioOperation.id];
-		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+		this.disposeWithMe(this._commandService.onCommandExecuted((command, options) => {
 			if (updateCommandList.includes(command.id)) {
 				const { unitId: commandUnitId } = command.params;
-				const { unitId, mainComponent } = this._context;
+				const { unitId } = this._context;
 				if (commandUnitId !== unitId) return;
-				const skeleton = this._docSkeletonManagerService.getSkeleton();
-				if (skeleton == null) return;
-				if (this._editorService.isEditor(unitId)) {
-					mainComponent === null || mainComponent === void 0 || mainComponent.makeDirty();
+				if (command.id === RichTextEditingMutation.id && (options === null || options === void 0 ? void 0 : options.fromChangeset)) {
+					this._scheduleChangesetDrawingRefresh();
 					return;
 				}
-				this._refreshDrawing(skeleton);
+				this._refreshCurrentDrawing();
 			}
 		}));
 	}
+	_scheduleChangesetDrawingRefresh() {
+		if (this._changesetDrawingRefreshScheduled) return;
+		this._changesetDrawingRefreshScheduled = true;
+		queueMicrotask(() => {
+			queueMicrotask(() => {
+				this._changesetDrawingRefreshScheduled = false;
+				if (this._disposed) return;
+				this._refreshCurrentDrawing();
+			});
+		});
+	}
+	_refreshCurrentDrawing() {
+		const skeleton = this._docSkeletonManagerService.getSkeleton();
+		if (skeleton == null) return;
+		const { unitId, mainComponent } = this._context;
+		if (this._editorService.isEditor(unitId)) {
+			mainComponent === null || mainComponent === void 0 || mainComponent.makeDirty();
+			return;
+		}
+		this._refreshDrawing(skeleton);
+	}
 	_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;
@@ -3585,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();
@@ -3606,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() {
@@ -3622,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;
@@ -3638,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/es/locale/ar-SA.js

@@ -9,7 +9,6 @@ const locale = { "docs-drawing-ui": {
 	} },
 	panel: { title: "تحرير الصورة" },
 	"image-popup": {
-		replace: "استبدال",
 		delete: "حذف",
 		edit: "تحرير",
 		crop: "قص",
@@ -38,9 +37,7 @@ const locale = { "docs-drawing-ui": {
 		horizontal: "أفقي",
 		vertical: "عمودي",
 		absolutePosition: "موضع مطلق(بكسل)",
-		relativePosition: "موضع نسبي",
 		toTheRightOf: "إلى يمين",
-		relativeTo: "بالنسبة إلى",
 		bellow: "أسفل",
 		options: "خيارات",
 		moveObjectWithText: "نقل الكائن مع النص",

package/lib/es/locale/ca-ES.js

@@ -9,7 +9,6 @@ const locale = { "docs-drawing-ui": {
 	} },
 	panel: { title: "Edita la imatge" },
 	"image-popup": {
-		replace: "Reemplaça",
 		delete: "Elimina",
 		edit: "Edita",
 		crop: "Retalla",
@@ -38,9 +37,7 @@ const locale = { "docs-drawing-ui": {
 		horizontal: "Horitzontal",
 		vertical: "Vertical",
 		absolutePosition: "Posició absoluta(px)",
-		relativePosition: "Posició relativa",
 		toTheRightOf: "a la dreta de",
-		relativeTo: "relatiu a",
 		bellow: "a sota",
 		options: "Opcions",
 		moveObjectWithText: "Mou l'objecte amb el text",

package/lib/es/locale/de-DE.js

@@ -9,7 +9,6 @@ const locale = { "docs-drawing-ui": {
 	} },
 	panel: { title: "Bild bearbeiten" },
 	"image-popup": {
-		replace: "Ersetzen",
 		delete: "Löschen",
 		edit: "Bearbeiten",
 		crop: "Zuschneiden",
@@ -38,9 +37,7 @@ const locale = { "docs-drawing-ui": {
 		horizontal: "Horizontal",
 		vertical: "Vertikal",
 		absolutePosition: "Absolute Position(px)",
-		relativePosition: "Relative Position",
 		toTheRightOf: "rechts von",
-		relativeTo: "relativ zu",
 		bellow: "unterhalb",
 		options: "Optionen",
 		moveObjectWithText: "Objekt mit Text verschieben",

package/lib/es/locale/en-US.js

@@ -24,7 +24,6 @@ const locale = { "docs-drawing-ui": {
 	} },
 	panel: { title: "Edit Image" },
 	"image-popup": {
-		replace: "Replace",
 		delete: "Delete",
 		edit: "Edit",
 		crop: "Crop",
@@ -53,9 +52,7 @@ const locale = { "docs-drawing-ui": {
 		horizontal: "Horizontal",
 		vertical: "Vertical",
 		absolutePosition: "Absolute Position(px)",
-		relativePosition: "Relative Position",
 		toTheRightOf: "to the right of",
-		relativeTo: "relative to",
 		bellow: "bellow",
 		options: "Options",
 		moveObjectWithText: "Move object with text",

package/lib/es/locale/es-ES.js

@@ -9,7 +9,6 @@ const locale = { "docs-drawing-ui": {
 	} },
 	panel: { title: "Editar imagen" },
 	"image-popup": {
-		replace: "Reemplazar",
 		delete: "Eliminar",
 		edit: "Editar",
 		crop: "Recortar",
@@ -38,9 +37,7 @@ const locale = { "docs-drawing-ui": {
 		horizontal: "Horizontal",
 		vertical: "Vertical",
 		absolutePosition: "Posición absoluta(px)",
-		relativePosition: "Posición relativa",
 		toTheRightOf: "a la derecha de",
-		relativeTo: "relativo a",
 		bellow: "debajo",
 		options: "Opciones",
 		moveObjectWithText: "Mover objeto con el texto",

package/lib/es/locale/fa-IR.js

@@ -9,7 +9,6 @@ const locale = { "docs-drawing-ui": {
 	} },
 	panel: { title: "ویرایش تصویر" },
 	"image-popup": {
-		replace: "تعویض",
 		delete: "حذف",
 		edit: "ویرایش",
 		crop: "کراپ",
@@ -38,9 +37,7 @@ const locale = { "docs-drawing-ui": {
 		horizontal: "افقی",
 		vertical: "عمودی",
 		absolutePosition: "موقعیت مطلق(px)",
-		relativePosition: "موقعیت نسبی",
 		toTheRightOf: "سمت راست",
-		relativeTo: "نسبت به",
 		bellow: "زیر",
 		options: "گزینه‌ها",
 		moveObjectWithText: "جابه‌جایی شیء با متن",

package/lib/es/locale/fr-FR.js

@@ -9,7 +9,6 @@ const locale = { "docs-drawing-ui": {
 	} },
 	panel: { title: "Modifier l'image" },
 	"image-popup": {
-		replace: "Remplacer",
 		delete: "Supprimer",
 		edit: "Modifier",
 		crop: "Rogner",
@@ -38,9 +37,7 @@ const locale = { "docs-drawing-ui": {
 		horizontal: "Horizontal",
 		vertical: "Vertical",
 		absolutePosition: "Position absolue(px)",
-		relativePosition: "Position relative",
 		toTheRightOf: "à droite de",
-		relativeTo: "par rapport à",
 		bellow: "en dessous",
 		options: "Options",
 		moveObjectWithText: "Déplacer l'objet avec le texte",