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

package/lib/index.js

@@ -1,12 +1,12 @@
 import { BooleanNumber, BuildTextUtils, CommandType, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DependentOn, Direction, Disposable, DisposableCollection, DrawingTypeEnum, FOCUSING_COMMON_DRAWINGS, FOCUSING_FX_BAR_EDITOR, FOCUSING_PANEL_EDITOR, FOCUSING_SHAPE_TEXT_EDITOR, FOCUSING_SHEET, ICommandService, IConfigService, IContextService, IImageIoService, IPermissionService, IURLImageService, IUndoRedoService, IUniverInstanceService, ImageSourceType, ImageUploadStatusType, Inject, Injector, InterceptorEffectEnum, LifecycleService, LifecycleStages, LocaleService, ObjectMatrix, Optional, Plugin, PositionedObjectLayoutType, RxDisposable, Tools, UniverInstanceType, UserManagerService, WrapTextType, createDocumentModelWithStyle, createIdentifier, fromEventSubject, generateRandomId, merge, registerDependencies, sequenceExecute, toDisposable, touchDependencies } from "@univerjs/core";
 import { ClearSheetDrawingTransformerOperation, DrawingApplyType, ISheetDrawingService, InsertSheetDrawingCommand, RemoveSheetDrawingCommand, SetDrawingApplyMutation, SetDrawingArrangeCommand, SetSheetDrawingCommand, SetSheetDrawingPlacementCommand, SheetDrawingAnchorType, UniverSheetsDrawingPlugin, drawingPositionToTransform, getSheetDrawingPlacement, transformToAxisAlignPosition, transformToDrawingPosition } from "@univerjs/sheets-drawing";
-import { CURSOR_TYPE, DRAWING_OBJECT_LAYER_INDEX, IRenderManagerService, Image, ObjectType, Rect, SHEET_VIEWPORT_KEY, UniverRenderEnginePlugin, Vector2, getCurrentTypeOfRenderer, getGroupState, transformObjectOutOfGroup } from "@univerjs/engine-render";
+import { CURSOR_TYPE, DEFAULT_TRANSFORMER_CONFIG, DRAWING_OBJECT_LAYER_INDEX, IRenderManagerService, Image, ObjectType, Rect, SHEET_VIEWPORT_KEY, UniverRenderEnginePlugin, Vector2, getCurrentTypeOfRenderer, getGroupState, transformObjectOutOfGroup } from "@univerjs/engine-render";
 import { Button, Checkbox, CheckboxGroup, FormLayout, MessageType, Radio, RadioGroup, Select, clsx, render, unmount } from "@univerjs/design";
 import { buildDocTransform, docDrawingPositionToTransform } from "@univerjs/docs";
 import { DRAWING_IMAGE_ALLOW_IMAGE_LIST, DRAWING_IMAGE_COUNT_LIMIT, DRAWING_IMAGE_HEIGHT_LIMIT, DRAWING_IMAGE_WIDTH_LIMIT, IDrawingManagerService, SetDrawingSelectedOperation, UniverDrawingPlugin, getDrawingImageAllowSize, getDrawingShapeKeyByDrawingSearch, getImageSize } from "@univerjs/drawing";
 import { COMMAND_LISTENER_SKELETON_CHANGE, IAutoFillService, INTERCEPTOR_POINT, InterceptCellContentPriority, RangeProtectionPermissionEditPoint, SetFrozenMutation, SetRangeValuesCommand, SetSelectionsOperation, SetWorksheetActiveOperation, SetWorksheetRowAutoHeightMutation, SheetInterceptorService, SheetPermissionCheckController, SheetSkeletonService, SheetsSelectionsService, UniverSheetsPlugin, WorkbookEditablePermission, WorkbookViewPermission, WorksheetEditPermission, WorksheetViewPermission, attachRangeWithCoord, discreteRangeToRange, getSheetCommandTarget, isCellImage } from "@univerjs/sheets";
 import { COPY_TYPE, EditingRenderController, HoverManagerService, IEditorBridgeService, ISheetClipboardService, ISheetSelectionRenderService, PREDEFINED_HOOK_NAME_PASTE, SetCellEditVisibleOperation, SetScrollOperation, SetZoomRatioOperation, SheetCanvasPopManagerService, SheetPrintInterceptorService, SheetSkeletonManagerService, UniverSheetsUIPlugin, getCurrentRangeDisable$, useHighlightRange, virtualizeDiscreteRanges } from "@univerjs/sheets-ui";
-import { CanvasFloatDomPreviewService, CanvasFloatDomService, ComponentManager, ContextMenuGroup, ContextMenuPosition, IClipboardInterfaceService, IContextMenuService, IDialogService, ILocalFileService, IMenuManagerService, IMessageService, IShortcutService, ISidebarService, KeyCode, MenuItemType, PrintFloatDomSingle, RibbonInsertGroup, connectInjector, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
+import { CanvasFloatDomPreviewService, CanvasFloatDomService, ComponentManager, ContextMenuGroup, ContextMenuPosition, IClipboardInterfaceService, IContextMenuService, IDialogService, ILocalFileService, IMenuManagerService, IMessageService, IShortcutService, ISidebarService, KeyCode, MenuItemType, PrintFloatDomSingle, RibbonInsertGroup, UndoRedoGroupService, connectInjector, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
 import { COMPONENT_IMAGE_POPUP_MENU, DrawingCommonPanel, DrawingRenderService, ImageCropperObject, ImageResetSizeOperation, OpenImageCropOperation, UniverDrawingUIPlugin, disposeDrawingRenderObject, insertGroupObject } from "@univerjs/drawing-ui";
 import { BehaviorSubject, EMPTY, Subject, combineLatest, distinctUntilChanged, filter, map, of, switchMap, take, tap, throttleTime } from "rxjs";
 import { DocDrawingController, UniverDocsDrawingPlugin } from "@univerjs/docs-drawing";
@@ -903,6 +903,7 @@ const MoveDrawingsCommand = {
 		const commandService = accessor.get(ICommandService);
 		const drawingManagerService = accessor.get(ISheetDrawingService);
 		const sheetSkeletonService = accessor.get(SheetSkeletonService);
+		const undoRedoGroupService = accessor.get(UndoRedoGroupService);
 		const { direction } = params;
 		const drawings = drawingManagerService.getFocusDrawings();
 		if (drawings.length === 0) return false;
@@ -924,10 +925,10 @@ const MoveDrawingsCommand = {
 				axisAlignSheetTransform: transformToAxisAlignPosition(newTransform, skeleton)
 			};
 		}).filter((drawing) => drawing != null);
-		if (commandService.syncExecuteCommand(SetSheetDrawingCommand.id, {
+		if (undoRedoGroupService.runTimed(unitId, `sheet-drawing:nudge:${drawings[0].subUnitId}:${drawings.map((drawing) => drawing.drawingId).sort().join(",")}`, () => commandService.syncExecuteCommand(SetSheetDrawingCommand.id, {
 			unitId,
 			drawings: newDrawings
-		})) {
+		}))) {
 			commandService.syncExecuteCommand(ClearSheetDrawingTransformerOperation.id, [unitId]);
 			return true;
 		}
@@ -1374,21 +1375,24 @@ const SidebarSheetDrawingOperation = {
 		const sidebarService = accessor.get(ISidebarService);
 		const localeService = accessor.get(LocaleService);
 		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const drawingManagerService = accessor.get(IDrawingManagerService);
 		const commandService = accessor.get(ICommandService);
 		if (!getSheetCommandTarget(univerInstanceService)) return false;
 		switch (params.value) {
 			case "open":
 				sidebarService.open({
+					id: COMPONENT_SHEET_DRAWING_PANEL,
 					header: { title: localeService.t("sheets-drawing-ui.panel.title") },
 					children: { label: COMPONENT_SHEET_DRAWING_PANEL },
 					onClose: () => {
-						commandService.syncExecuteCommand(SetDrawingSelectedOperation.id, []);
+						const focusedDrawings = drawingManagerService.getFocusDrawings();
+						if (focusedDrawings.length === 1 && focusedDrawings[0].drawingType === DrawingTypeEnum.DRAWING_IMAGE) commandService.syncExecuteCommand(SetDrawingSelectedOperation.id, []);
 					},
 					width: 360
 				});
 				break;
 			default:
-				sidebarService.close();
+				sidebarService.close(COMPONENT_SHEET_DRAWING_PANEL);
 				break;
 		}
 		return true;
@@ -1619,18 +1623,8 @@ function createExternalRuntimeDisposable(owner, id, disposeById) {
 	};
 }
 const SHEET_EMBED_FLOAT_DOM_TRANSFORMER_CONFIG = {
-	borderEnabled: true,
-	borderStroke: "#4086f4",
-	borderStrokeWidth: 1,
-	borderSpacing: 2,
-	anchorFill: "#ffffff",
-	anchorStroke: "#4086f4",
-	anchorStrokeWidth: 1.5,
-	anchorSize: 8,
-	anchorCornerRadius: 2,
-	anchorStyle: "canva",
+	...DEFAULT_TRANSFORMER_CONFIG,
 	rotateEnabled: false,
-	resizeEnabled: true,
 	moveBoundaryEnabled: false
 };
 /**
@@ -1638,18 +1632,8 @@ const SHEET_EMBED_FLOAT_DOM_TRANSFORMER_CONFIG = {
 * Charts retain resize handles but do not expose a rotation control.
 */
 const SHEET_CHART_TRANSFORMER_CONFIG = {
-	borderEnabled: true,
-	borderStroke: "#4086f4",
-	borderStrokeWidth: 1,
-	borderSpacing: 2,
-	anchorFill: "#ffffff",
-	anchorStroke: "#4086f4",
-	anchorStrokeWidth: 1.5,
-	anchorSize: 8,
-	anchorCornerRadius: 2,
-	anchorStyle: "canva",
+	...DEFAULT_TRANSFORMER_CONFIG,
 	rotateEnabled: false,
-	resizeEnabled: true,
 	keepRatio: false,
 	moveBoundaryEnabled: false
 };
@@ -2219,6 +2203,11 @@ let SheetCanvasFloatDomManagerService = _SheetCanvasFloatDomManagerService = cla
 			canvas: renderUnit.engine.getCanvasElement()
 		};
 	}
+	_getDrawingZIndex(unitId, subUnitId, drawingId) {
+		const drawingOrder = this._drawingManagerService.getDrawingOrder(unitId, subUnitId);
+		const drawingIndex = drawingOrder.indexOf(drawingId);
+		return drawingIndex < 0 ? drawingOrder.length - 1 : drawingIndex;
+	}
 	_drawingAddListener() {
 		this.disposeWithMe(this._drawingManagerService.add$.subscribe((params) => {
 			params.forEach((param) => {
@@ -2282,7 +2271,7 @@ let SheetCanvasFloatDomManagerService = _SheetCanvasFloatDomManagerService = cla
 					top,
 					width,
 					height,
-					zIndex: this._drawingManagerService.getDrawingOrder(unitId, subUnitId).length - 1
+					zIndex: this._getDrawingZIndex(unitId, subUnitId, drawingId)
 				};
 				const isChart = drawingType === DrawingTypeEnum.DRAWING_CHART;
 				if (isChart) {
@@ -2497,7 +2486,7 @@ let SheetCanvasFloatDomManagerService = _SheetCanvasFloatDomManagerService = cla
 		this.disposeWithMe(this._commandService.onCommandExecuted((commandInfo) => {
 			if (commandInfo.id === SetZoomRatioOperation.id) {
 				const { unitId } = commandInfo.params;
-				Array.from(this._domLayerInfoMap.values()).filter((info) => info.unitId === unitId).map((info) => info.subUnitId).forEach((subUnitId) => {
+				new Set(Array.from(this._domLayerInfoMap.values()).filter((info) => info.unitId === unitId).map((info) => info.subUnitId)).forEach((subUnitId) => {
 					updateSheet(unitId, subUnitId);
 				});
 			} else if (commandInfo.id === SetFrozenMutation.id) {
@@ -3428,7 +3417,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-drawing-ui";
-var version = "1.0.0-beta.0";
+var version = "1.0.0-beta.2";
 
 //#endregion
 //#region src/config/config.ts
@@ -3820,6 +3809,7 @@ DrawingContextMenuController = __decorate([
 
 //#endregion
 //#region src/controllers/render-controllers/sheet-celll-image-hover.render-controller.ts
+const CELL_IMAGE_PREVIEW_KEY = "preview-cell-image";
 let SheetCellImageHoverRenderController = class SheetCellImageHoverRenderController extends Disposable {
 	constructor(_context, _hoverManagerService, _selectionsService, _drawingRenderService, _sheetSkeletonManagerService) {
 		super();
@@ -3858,15 +3848,31 @@ let SheetCellImageHoverRenderController = class SheetCellImageHoverRenderControl
 	_initImageClick() {
 		this.disposeWithMe(this._hoverManagerService.currentClickedCell$.subscribe((click) => {
 			if ((click === null || click === void 0 ? void 0 : click.drawing) && this._isSetCursor) {
-				var _this$_sheetSkeletonM;
 				const imageDrawing = click.drawing.drawing.drawingOrigin;
-				const imageEle = (_this$_sheetSkeletonM = this._sheetSkeletonManagerService.getCurrentSkeleton()) === null || _this$_sheetSkeletonM === void 0 ? void 0 : _this$_sheetSkeletonM.imageCacheMap.getImage(imageDrawing.imageSourceType, imageDrawing.source);
-				if (!imageEle) return;
-				this._drawingRenderService.previewImage("preview-cell-image", imageEle.src, imageEle.width, imageEle.height);
-				this._context.scene.resetCursor();
-				this._isSetCursor = false;
+				this._previewImage(imageDrawing);
 			}
 		}));
+		const currentDbClickedCell$ = this._hoverManagerService.currentDbClickedCell$;
+		if (!currentDbClickedCell$) return;
+		this.disposeWithMe(currentDbClickedCell$.subscribe(({ location }) => {
+			var _worksheet$getCellRaw, _documentData$drawing, _documentData$drawing2;
+			if (location.unitId !== this._context.unitId) return;
+			const worksheet = this._context.unit.getSheetBySheetId(location.subUnitId);
+			const documentData = worksheet === null || worksheet === void 0 || (_worksheet$getCellRaw = worksheet.getCellRaw(location.row, location.col)) === null || _worksheet$getCellRaw === void 0 ? void 0 : _worksheet$getCellRaw.p;
+			const drawingId = documentData === null || documentData === void 0 || (_documentData$drawing = documentData.drawingsOrder) === null || _documentData$drawing === void 0 ? void 0 : _documentData$drawing[0];
+			const imageDrawing = isCellImage(documentData) && drawingId ? (_documentData$drawing2 = documentData.drawings) === null || _documentData$drawing2 === void 0 ? void 0 : _documentData$drawing2[drawingId] : void 0;
+			if (imageDrawing) this._previewImage(imageDrawing);
+		}));
+	}
+	_previewImage(imageDrawing) {
+		var _this$_sheetSkeletonM;
+		if (this._disposed) return;
+		const imageCacheMap = (_this$_sheetSkeletonM = this._sheetSkeletonManagerService.getCurrentSkeleton()) === null || _this$_sheetSkeletonM === void 0 ? void 0 : _this$_sheetSkeletonM.imageCacheMap;
+		const imageEle = imageCacheMap === null || imageCacheMap === void 0 ? void 0 : imageCacheMap.getImage(imageDrawing.imageSourceType, imageDrawing.source, () => this._previewImage(imageDrawing));
+		if (!imageEle) return;
+		this._drawingRenderService.previewImage(CELL_IMAGE_PREVIEW_KEY, imageEle.src, imageEle.width, imageEle.height);
+		this._context.scene.resetCursor();
+		this._isSetCursor = false;
 	}
 };
 SheetCellImageHoverRenderController = __decorate([
@@ -5192,11 +5198,13 @@ const DeleteDrawingsShortcutItem = {
 * limitations under the License.
 */
 let SheetDrawingUIController = class SheetDrawingUIController extends Disposable {
-	constructor(_menuManagerService, _commandService, _shortcutService) {
+	constructor(_menuManagerService, _commandService, _shortcutService, _drawingManagerService, _sidebarService) {
 		super();
 		this._menuManagerService = _menuManagerService;
 		this._commandService = _commandService;
 		this._shortcutService = _shortcutService;
+		this._drawingManagerService = _drawingManagerService;
+		this._sidebarService = _sidebarService;
 		this._init();
 	}
 	_initCustomComponents() {}
@@ -5228,17 +5236,27 @@ let SheetDrawingUIController = class SheetDrawingUIController extends Disposable
 			this.disposeWithMe(this._shortcutService.registerShortcut(item));
 		});
 	}
+	_initImagePanel() {
+		this.disposeWithMe(this._drawingManagerService.focus$.subscribe((drawings) => {
+			if (!this._sidebarService.visible || this._sidebarService.options.id !== "COMPONENT_SHEET_DRAWING_PANEL") return;
+			if (drawings.length === 1 && drawings[0].drawingType === DrawingTypeEnum.DRAWING_IMAGE) return;
+			this._sidebarService.close(COMPONENT_SHEET_DRAWING_PANEL);
+		}));
+	}
 	_init() {
 		this._initCommands();
 		this._initCustomComponents();
 		this._initMenus();
 		this._initShortcuts();
+		this._initImagePanel();
 	}
 };
 SheetDrawingUIController = __decorate([
 	__decorateParam(0, IMenuManagerService),
 	__decorateParam(1, ICommandService),
-	__decorateParam(2, IShortcutService)
+	__decorateParam(2, IShortcutService),
+	__decorateParam(3, IDrawingManagerService),
+	__decorateParam(4, Inject(ISidebarService))
 ], SheetDrawingUIController);
 
 //#endregion
@@ -5327,6 +5345,7 @@ let DrawingPopupMenuController = class DrawingPopupMenuController extends RxDisp
 			const menus = this._canvasPopManagerService.getFeatureMenu(unitId, subUnitId, drawingId, drawingType);
 			singletonPopupDisposer = this.disposeWithMe(this._canvasPopManagerService.attachPopupToObject(object, {
 				componentKey: COMPONENT_IMAGE_POPUP_MENU,
+				constrainToCanvas: true,
 				direction: this._localeService.getDirection() === "rtl" ? "left" : "horizontal",
 				offset: [2, 0],
 				extraProps: { menuItems: menus || this._getImageMenuItems(unitId, subUnitId, drawingId, drawingType) }

package/lib/locale/ar-SA.js

@@ -21,7 +21,6 @@ const locale = { "sheets-drawing-ui": {
 		error: "فشل في حفظ صور الخلايا"
 	},
 	"image-popup": {
-		replace: "استبدال",
 		delete: "حذف",
 		edit: "تحرير",
 		crop: "قص",
@@ -43,8 +42,7 @@ const locale = { "sheets-drawing-ui": {
 	},
 	"cell-image": {
 		pasteTitle: "لصق كصورة خلية",
-		pasteContent: "سيؤدي لصق صورة خلية إلى استبدال المحتوى الموجود في الخلية، هل تريد المتابعة؟",
-		pasteError: "نسخ ولصق صورة خلية الورقة غير مدعوم في هذه الوحدة"
+		pasteContent: "سيؤدي لصق صورة خلية إلى استبدال المحتوى الموجود في الخلية، هل تريد المتابعة؟"
 	},
 	permission: { dialog: { editErr: "النطاق محمي، وليس لديك إذن التحرير. للتحرير، يرجى التواصل مع المنشئ." } },
 	shortcut: {

package/lib/locale/ca-ES.js

@@ -21,7 +21,6 @@ const locale = { "sheets-drawing-ui": {
 		error: "No s'han pogut desar les imatges de cel·la"
 	},
 	"image-popup": {
-		replace: "Reemplaça",
 		delete: "Elimina",
 		edit: "Edita",
 		crop: "Retalla",
@@ -43,8 +42,7 @@ const locale = { "sheets-drawing-ui": {
 	},
 	"cell-image": {
 		pasteTitle: "Enganxa com a imatge de cel·la",
-		pasteContent: "Enganxar una imatge de cel·la sobreescriurà el contingut existent de la cel·la, continuar enganxant",
-		pasteError: "La còpia i enganxat d’imatges de cel·la de full no està suportada en aquesta unitat"
+		pasteContent: "Enganxar una imatge de cel·la sobreescriurà el contingut existent de la cel·la, continuar enganxant"
 	},
 	permission: { dialog: { editErr: "L'interval està protegit i no teniu permís d'edició. Per editar, contacteu amb el creador." } },
 	shortcut: {

package/lib/locale/de-DE.js

@@ -21,7 +21,6 @@ const locale = { "sheets-drawing-ui": {
 		error: "Zellenbilder konnten nicht gespeichert werden"
 	},
 	"image-popup": {
-		replace: "Ersetzen",
 		delete: "Löschen",
 		edit: "Bearbeiten",
 		crop: "Zuschneiden",
@@ -43,8 +42,7 @@ const locale = { "sheets-drawing-ui": {
 	},
 	"cell-image": {
 		pasteTitle: "Als Zellenbild einfügen",
-		pasteContent: "Das Einfügen eines Zellenbilds überschreibt den bestehenden Inhalt der Zelle, mit dem Einfügen fortfahren?",
-		pasteError: "Kopieren und Einfügen von Zellenbildern wird in dieser Einheit nicht unterstützt"
+		pasteContent: "Das Einfügen eines Zellenbilds überschreibt den bestehenden Inhalt der Zelle, mit dem Einfügen fortfahren?"
 	},
 	permission: { dialog: { editErr: "Der Bereich ist geschützt, und Sie haben keine Bearbeitungsberechtigung. Um zu bearbeiten, wenden Sie sich bitte an den Ersteller." } },
 	shortcut: {

package/lib/locale/en-US.js

@@ -36,7 +36,6 @@ const locale = { "sheets-drawing-ui": {
 		error: "Failed to save cell images"
 	},
 	"image-popup": {
-		replace: "Replace",
 		delete: "Delete",
 		edit: "Edit",
 		crop: "Crop",
@@ -58,8 +57,7 @@ const locale = { "sheets-drawing-ui": {
 	},
 	"cell-image": {
 		pasteTitle: "Paste as cell image",
-		pasteContent: "Pasting a cell image will overwrite the existing content of the cell, continue pasting",
-		pasteError: "Sheet cell image copy paste is not supported in this unit"
+		pasteContent: "Pasting a cell image will overwrite the existing content of the cell, continue pasting"
 	},
 	permission: { dialog: { editErr: "The range is protected, and you do not have edit permission. To edit, please contact the creator." } },
 	shortcut: {

package/lib/locale/es-ES.js

@@ -21,7 +21,6 @@ const locale = { "sheets-drawing-ui": {
 		error: "Error al guardar las imágenes de celda"
 	},
 	"image-popup": {
-		replace: "Reemplazar",
 		delete: "Eliminar",
 		edit: "Editar",
 		crop: "Recortar",
@@ -43,8 +42,7 @@ const locale = { "sheets-drawing-ui": {
 	},
 	"cell-image": {
 		pasteTitle: "Pegar como imagen de celda",
-		pasteContent: "Pegar una imagen de celda sobrescribirá el contenido existente de la celda, continuar pegando",
-		pasteError: "La copia y pegado de imágenes de celda de hoja no está soportada en esta unidad"
+		pasteContent: "Pegar una imagen de celda sobrescribirá el contenido existente de la celda, continuar pegando"
 	},
 	permission: { dialog: { editErr: "El rango está protegido y no tienes permiso de edición. Para editar, contacta al creador." } },
 	shortcut: {

package/lib/locale/fa-IR.js

@@ -21,7 +21,6 @@ const locale = { "sheets-drawing-ui": {
 		error: "ذخیره تصاویر سلول ناموفق بود"
 	},
 	"image-popup": {
-		replace: "تعویض",
 		delete: "حذف",
 		edit: "ویرایش",
 		crop: "کراپ",
@@ -43,8 +42,7 @@ const locale = { "sheets-drawing-ui": {
 	},
 	"cell-image": {
 		pasteTitle: "چسباندن به عنوان تصویر سلول",
-		pasteContent: "چسباندن تصویر سلول محتوای موجود سلول را پاک خواهد کرد، ادامه چسباندن",
-		pasteError: "کپی و چسباندن تصویر سلول در این واحد پشتیبانی نمی‌شود"
+		pasteContent: "چسباندن تصویر سلول محتوای موجود سلول را پاک خواهد کرد، ادامه چسباندن"
 	},
 	permission: { dialog: { editErr: "محدوده محافظت شده است و شما مجوز ویرایش را ندارید. برای ویرایش، لطفا با سازنده تماس بگیرید." } },
 	shortcut: {

package/lib/locale/fr-FR.js

@@ -21,7 +21,6 @@ const locale = { "sheets-drawing-ui": {
 		error: "Échec de l'enregistrement des images de cellule"
 	},
 	"image-popup": {
-		replace: "Remplacer",
 		delete: "Supprimer",
 		edit: "Éditer",
 		crop: "Rogner",
@@ -43,8 +42,7 @@ const locale = { "sheets-drawing-ui": {
 	},
 	"cell-image": {
 		pasteTitle: "Coller comme image de cellule",
-		pasteContent: "Coller une image de cellule écrasera le contenu existant de la cellule, continuer le collage",
-		pasteError: "Le copier-coller d'image de cellule n'est pas pris en charge dans cette unité"
+		pasteContent: "Coller une image de cellule écrasera le contenu existant de la cellule, continuer le collage"
 	},
 	permission: { dialog: { editErr: "La plage est protégée, et vous n'avez pas la permission de modifier. Pour modifier, veuillez contacter le créateur." } },
 	shortcut: {

package/lib/locale/id-ID.js

@@ -21,7 +21,6 @@ const locale = { "sheets-drawing-ui": {
 		error: "Gagal menyimpan gambar sel"
 	},
 	"image-popup": {
-		replace: "Ganti",
 		delete: "Hapus",
 		edit: "Edit",
 		crop: "Pangkas",
@@ -43,8 +42,7 @@ const locale = { "sheets-drawing-ui": {
 	},
 	"cell-image": {
 		pasteTitle: "Tempel sebagai gambar sel",
-		pasteContent: "Menempel gambar sel akan menimpa konten yang ada di sel, lanjutkan menempel",
-		pasteError: "Salin tempel gambar sel lembar kerja tidak didukung dalam unit ini"
+		pasteContent: "Menempel gambar sel akan menimpa konten yang ada di sel, lanjutkan menempel"
 	},
 	permission: { dialog: { editErr: "Rentang ini dilindungi, dan Anda tidak memiliki izin edit. Untuk mengedit, silakan hubungi pembuatnya." } },
 	shortcut: {

package/lib/locale/it-IT.js

@@ -21,7 +21,6 @@ const locale = { "sheets-drawing-ui": {
 		error: "Salvataggio immagini celle non riuscito"
 	},
 	"image-popup": {
-		replace: "Sostituisci",
 		delete: "Elimina",
 		edit: "Modifica",
 		crop: "Ritaglia",
@@ -43,8 +42,7 @@ const locale = { "sheets-drawing-ui": {
 	},
 	"cell-image": {
 		pasteTitle: "Incolla come immagine cella",
-		pasteContent: "L'incollaggio di un'immagine cella sovrascriverà il contenuto esistente della cella, continuare con l'incollaggio",
-		pasteError: "Copia e incolla di immagine cella non supportato in questa unità"
+		pasteContent: "L'incollaggio di un'immagine cella sovrascriverà il contenuto esistente della cella, continuare con l'incollaggio"
 	},
 	permission: { dialog: { editErr: "L'intervallo è protetto e non hai l'autorizzazione di modifica. Per modificare, contatta il creatore." } },
 	shortcut: {

package/lib/locale/ja-JP.js

@@ -21,7 +21,6 @@ const locale = { "sheets-drawing-ui": {
 		error: "セル画像の保存に失敗しました"
 	},
 	"image-popup": {
-		replace: "画像の変更",
 		delete: "削除",
 		edit: "編集",
 		crop: "トリミング",
@@ -43,8 +42,7 @@ const locale = { "sheets-drawing-ui": {
 	},
 	"cell-image": {
 		pasteTitle: "セル内画像として貼り付け",
-		pasteContent: "セル内画像を貼り付けると、既存のセル内容が上書きされます。続行しますか？",
-		pasteError: "この箇所では、シートのセル内画像のコピー＆ペーストはサポートされていません"
+		pasteContent: "セル内画像を貼り付けると、既存のセル内容が上書きされます。続行しますか？"
 	},
 	permission: { dialog: { editErr: "この範囲は保護されており、編集権限がありません。編集するには作成者に連絡してください。" } },
 	shortcut: {

package/lib/locale/ko-KR.js

@@ -21,7 +21,6 @@ const locale = { "sheets-drawing-ui": {
 		error: "셀 이미지 저장 실패"
 	},
 	"image-popup": {
-		replace: "바꾸기",
 		delete: "삭제",
 		edit: "편집",
 		crop: "자르기",
@@ -43,8 +42,7 @@ const locale = { "sheets-drawing-ui": {
 	},
 	"cell-image": {
 		pasteTitle: "셀 이미지로 붙여넣기",
-		pasteContent: "셀 이미지 붙여넣기는 기존 셀 내용을 덮어씁니다. 계속 진행하시겠습니까?",
-		pasteError: "이 단위에서는 시트 셀 이미지 복사 붙여넣기를 지원하지 않습니다"
+		pasteContent: "셀 이미지 붙여넣기는 기존 셀 내용을 덮어씁니다. 계속 진행하시겠습니까?"
 	},
 	permission: { dialog: { editErr: "해당 범위는 보호되어 있어 편집 권한이 없습니다. 편집하려면 작성자에게 문의하세요." } },
 	shortcut: {

package/lib/locale/pl-PL.js

@@ -21,7 +21,6 @@ const locale = { "sheets-drawing-ui": {
 		error: "Nie udało się zapisać obrazów w komórkach"
 	},
 	"image-popup": {
-		replace: "Zamień",
 		delete: "Usuń",
 		edit: "Edytuj",
 		crop: "Przytnij",
@@ -43,8 +42,7 @@ const locale = { "sheets-drawing-ui": {
 	},
 	"cell-image": {
 		pasteTitle: "Wklej jako obraz w komórce",
-		pasteContent: "Wklejenie obrazu w komórce spowoduje zastąpienie istniejącej zawartości komórki, kontynuować wklejanie",
-		pasteError: "Kopiowanie i wklejanie obrazu w komórce arkusza nie jest obsługiwane w tej jednostce"
+		pasteContent: "Wklejenie obrazu w komórce spowoduje zastąpienie istniejącej zawartości komórki, kontynuować wklejanie"
 	},
 	permission: { dialog: { editErr: "Zakres jest chroniony i nie masz uprawnień do edycji. Aby edytować, skontaktuj się z twórcą." } },
 	shortcut: {

package/lib/locale/pt-BR.js

@@ -21,7 +21,6 @@ const locale = { "sheets-drawing-ui": {
 		error: "Falha ao salvar imagens de célula"
 	},
 	"image-popup": {
-		replace: "Substituir",
 		delete: "Excluir",
 		edit: "Editar",
 		crop: "Cortar",
@@ -43,8 +42,7 @@ const locale = { "sheets-drawing-ui": {
 	},
 	"cell-image": {
 		pasteTitle: "Colar como imagem de célula",
-		pasteContent: "Colar uma imagem de célula substituirá o conteúdo existente da célula, continuar colando",
-		pasteError: "Copiar e colar imagem de célula da planilha não é suportado nesta unidade"
+		pasteContent: "Colar uma imagem de célula substituirá o conteúdo existente da célula, continuar colando"
 	},
 	permission: { dialog: { editErr: "O intervalo está protegido e você não tem permissão de edição. Para editar, entre em contato com o criador." } },
 	shortcut: {

package/lib/locale/ru-RU.js

@@ -21,7 +21,6 @@ const locale = { "sheets-drawing-ui": {
 		error: "Не удалось сохранить изображения ячеек"
 	},
 	"image-popup": {
-		replace: "Заменить",
 		delete: "Удалить",
 		edit: "Редактировать",
 		crop: "Обрезать",
@@ -43,8 +42,7 @@ const locale = { "sheets-drawing-ui": {
 	},
 	"cell-image": {
 		pasteTitle: "Вставить как изображение ячейки",
-		pasteContent: "Вставка изображения ячейки перезапишет существующее содержимое ячейки, продолжить вставку",
-		pasteError: "Копирование и вставка изображения ячейки не поддерживается в этом блоке"
+		pasteContent: "Вставка изображения ячейки перезапишет существующее содержимое ячейки, продолжить вставку"
 	},
 	permission: { dialog: { editErr: "Диапазон защищен, и у вас нет разрешения на редактирование. Для редактирования свяжитесь с создателем." } },
 	shortcut: {

package/lib/locale/sk-SK.js

@@ -21,7 +21,6 @@ const locale = { "sheets-drawing-ui": {
 		error: "Nepodarilo sa uložiť obrázky buniek"
 	},
 	"image-popup": {
-		replace: "Nahradiť",
 		delete: "Odstrániť",
 		edit: "Upraviť",
 		crop: "Orezať",
@@ -43,8 +42,7 @@ const locale = { "sheets-drawing-ui": {
 	},
 	"cell-image": {
 		pasteTitle: "Prilepiť ako obrázok bunky",
-		pasteContent: "Prilepením obrázka bunky sa prepíše existujúci obsah bunky, pokračovať",
-		pasteError: "Kopírovanie a prilepovanie obrázkov buniek v tomto module nie je podporované"
+		pasteContent: "Prilepením obrázka bunky sa prepíše existujúci obsah bunky, pokračovať"
 	},
 	permission: { dialog: { editErr: "Rozsah je chránený a nemáte oprávnenie na úpravy. Ak chcete upravovať, kontaktujte autora." } },
 	shortcut: {

package/lib/locale/vi-VN.js

@@ -21,7 +21,6 @@ const locale = { "sheets-drawing-ui": {
 		error: "Lưu hình ảnh ô thất bại"
 	},
 	"image-popup": {
-		replace: "Thay thế",
 		delete: "Xóa",
 		edit: "Chỉnh sửa",
 		crop: "Cắt",
@@ -43,8 +42,7 @@ const locale = { "sheets-drawing-ui": {
 	},
 	"cell-image": {
 		pasteTitle: "Dán như hình ảnh ô",
-		pasteContent: "Dán hình ảnh ô sẽ ghi đè lên nội dung hiện có của ô, tiếp tục dán",
-		pasteError: "Sao chép và dán hình ảnh ô không được hỗ trợ trong đơn vị này"
+		pasteContent: "Dán hình ảnh ô sẽ ghi đè lên nội dung hiện có của ô, tiếp tục dán"
 	},
 	permission: { dialog: { editErr: "Phạm vi này đã được bảo vệ, hiện không có quyền chỉnh sửa. Nếu cần chỉnh sửa, vui lòng liên hệ với người tạo." } },
 	shortcut: {

package/lib/locale/zh-CN.js

@@ -21,7 +21,6 @@ const locale = { "sheets-drawing-ui": {
 		error: "保存单元格图片失败"
 	},
 	"image-popup": {
-		replace: "替换",
 		delete: "删除",
 		edit: "编辑",
 		crop: "裁剪",
@@ -43,8 +42,7 @@ const locale = { "sheets-drawing-ui": {
 	},
 	"cell-image": {
 		pasteTitle: "粘贴为单元格图片",
-		pasteContent: "粘贴单元格图片将覆盖单元格中的现有内容，继续粘贴",
-		pasteError: "此单元中不支持单元格图片复制粘贴"
+		pasteContent: "粘贴单元格图片将覆盖单元格中的现有内容，继续粘贴"
 	},
 	permission: { dialog: { editErr: "该范围已被保护，目前无编辑权限。如需编辑，请联系创建者。" } },
 	shortcut: {

package/lib/locale/zh-HK.js

@@ -21,7 +21,6 @@ const locale = { "sheets-drawing-ui": {
 		error: "儲存儲存格圖片失敗"
 	},
 	"image-popup": {
-		replace: "替換",
 		delete: "刪除",
 		edit: "編輯",
 		crop: "裁切",
@@ -43,8 +42,7 @@ const locale = { "sheets-drawing-ui": {
 	},
 	"cell-image": {
 		pasteTitle: "貼上為儲存格圖片",
-		pasteContent: "貼上儲存格圖片將覆蓋儲存格中的現有內容，繼續貼上",
-		pasteError: "此儲存格不支援儲存格圖片複製貼上"
+		pasteContent: "貼上儲存格圖片將覆蓋儲存格中的現有內容，繼續貼上"
 	},
 	permission: { dialog: { editErr: "該範圍已被保護，目前無編輯權限。如需編輯，請聯絡創建者。 " } },
 	shortcut: {

package/lib/locale/zh-TW.js

@@ -21,7 +21,6 @@ const locale = { "sheets-drawing-ui": {
 		error: "儲存儲存格圖片失敗"
 	},
 	"image-popup": {
-		replace: "替換",
 		delete: "刪除",
 		edit: "編輯",
 		crop: "裁切",
@@ -43,8 +42,7 @@ const locale = { "sheets-drawing-ui": {
 	},
 	"cell-image": {
 		pasteTitle: "貼上為儲存格圖片",
-		pasteContent: "貼上儲存格圖片將覆蓋儲存格中的現有內容，繼續貼上",
-		pasteError: "此儲存格不支援儲存格圖片複製貼上"
+		pasteContent: "貼上儲存格圖片將覆蓋儲存格中的現有內容，繼續貼上"
 	},
 	permission: { dialog: { editErr: "該範圍已被保護，目前無編輯權限。如需編輯，請聯絡創建者。 " } },
 	shortcut: {

package/lib/types/controllers/render-controllers/sheet-celll-image-hover.render-controller.d.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import type { Workbook } from '@univerjs/core';
 import type { IRenderContext, IRenderModule } from '@univerjs/engine-render';
 import { Disposable } from '@univerjs/core';
 import { DrawingRenderService } from '@univerjs/drawing-ui';
@@ -25,7 +26,8 @@ export declare class SheetCellImageHoverRenderController extends Disposable impl
     private _drawingRenderService;
     private _sheetSkeletonManagerService;
     private _isSetCursor;
-    constructor(_context: IRenderContext, _hoverManagerService: HoverManagerService, _selectionsService: SheetsSelectionsService, _drawingRenderService: DrawingRenderService, _sheetSkeletonManagerService: SheetSkeletonManagerService);
+    constructor(_context: IRenderContext<Workbook>, _hoverManagerService: HoverManagerService, _selectionsService: SheetsSelectionsService, _drawingRenderService: DrawingRenderService, _sheetSkeletonManagerService: SheetSkeletonManagerService);
     private _initHover;
     private _initImageClick;
+    private _previewImage;
 }

package/lib/types/controllers/ui.controller.d.ts

@@ -14,15 +14,19 @@
  * limitations under the License.
  */
 import { Disposable, ICommandService } from '@univerjs/core';
-import { IMenuManagerService, IShortcutService } from '@univerjs/ui';
+import { IDrawingManagerService } from '@univerjs/drawing';
+import { IMenuManagerService, IShortcutService, ISidebarService } from '@univerjs/ui';
 export declare class SheetDrawingUIController extends Disposable {
     private readonly _menuManagerService;
     private readonly _commandService;
     private readonly _shortcutService;
-    constructor(_menuManagerService: IMenuManagerService, _commandService: ICommandService, _shortcutService: IShortcutService);
+    private readonly _drawingManagerService;
+    private readonly _sidebarService;
+    constructor(_menuManagerService: IMenuManagerService, _commandService: ICommandService, _shortcutService: IShortcutService, _drawingManagerService: IDrawingManagerService, _sidebarService: ISidebarService);
     private _initCustomComponents;
     private _initMenus;
     private _initCommands;
     private _initShortcuts;
+    private _initImagePanel;
     private _init;
 }