@univerjs/sheets-drawing-ui 1.0.0-alpha.8 → 1.0.0-beta.1

package/lib/cjs/index.js

@@ -125,28 +125,23 @@ function cloneGroupParams(groupParams) {
 	groupParams.groups.forEach((p) => idMap.set(p.drawingId, (0, _univerjs_core.generateRandomId)(10)));
 	const clonedNestedIdRecord = {};
 	for (const [oldGroupId, entry] of Object.entries(groupParams.nestedIdRecord)) {
-		var _idMap$get, _entry$children;
-		const newGroupId = (_idMap$get = idMap.get(oldGroupId)) !== null && _idMap$get !== void 0 ? _idMap$get : oldGroupId;
+		var _entry$children;
+		const newGroupId = idMap.get(oldGroupId) ?? oldGroupId;
 		clonedNestedIdRecord[newGroupId] = {
 			drawingId: newGroupId,
-			children: (_entry$children = entry.children) === null || _entry$children === void 0 ? void 0 : _entry$children.map((id) => {
-				var _idMap$get2;
-				return (_idMap$get2 = idMap.get(id)) !== null && _idMap$get2 !== void 0 ? _idMap$get2 : id;
-			})
+			children: (_entry$children = entry.children) === null || _entry$children === void 0 ? void 0 : _entry$children.map((id) => idMap.get(id) ?? id)
 		};
 	}
 	const flatChildren = [];
 	const groups = [];
 	for (const group of groupParams.groups) {
-		var _idMap$get3, _idMap$get4;
-		const groupDrawingId = (_idMap$get3 = idMap.get(group.drawingId)) !== null && _idMap$get3 !== void 0 ? _idMap$get3 : group.drawingId;
-		const parentGroupId = group.groupId ? (_idMap$get4 = idMap.get(group.groupId)) !== null && _idMap$get4 !== void 0 ? _idMap$get4 : group.groupId : void 0;
+		const groupDrawingId = idMap.get(group.drawingId) ?? group.drawingId;
+		const parentGroupId = group.groupId ? idMap.get(group.groupId) ?? group.groupId : void 0;
 		groups.push(cloneDrawingParam(group, groupDrawingId, parentGroupId));
 	}
 	for (const child of groupParams.flatChildren || []) {
-		var _idMap$get5, _idMap$get6;
-		const childDrawingId = (_idMap$get5 = idMap.get(child.drawingId)) !== null && _idMap$get5 !== void 0 ? _idMap$get5 : child.drawingId;
-		const parentGroupId = child.groupId ? (_idMap$get6 = idMap.get(child.groupId)) !== null && _idMap$get6 !== void 0 ? _idMap$get6 : child.groupId : void 0;
+		const childDrawingId = idMap.get(child.drawingId) ?? child.drawingId;
+		const parentGroupId = child.groupId ? idMap.get(child.groupId) ?? child.groupId : void 0;
 		flatChildren.push(cloneDrawingParam(child, childDrawingId, parentGroupId));
 	}
 	return {
@@ -449,7 +444,6 @@ let SheetDrawingUpdateController = class SheetDrawingUpdateController extends _u
 		return this._insertCellImage(file, location);
 	}
 	async insertFloatImageByFile(file) {
-		var _transformToAxisAlign;
 		let imageParam;
 		try {
 			imageParam = await this._imageIoService.saveImage(file);
@@ -496,7 +490,7 @@ let SheetDrawingUpdateController = class SheetDrawingUpdateController extends _u
 			source,
 			transform: newTransform,
 			sheetTransform,
-			axisAlignSheetTransform: (_transformToAxisAlign = (0, _univerjs_sheets_drawing.transformToAxisAlignPosition)(newTransform, skeleton)) !== null && _transformToAxisAlign !== void 0 ? _transformToAxisAlign : sheetTransform
+			axisAlignSheetTransform: (0, _univerjs_sheets_drawing.transformToAxisAlignPosition)(newTransform, skeleton) ?? sheetTransform
 		};
 		return this._commandService.executeCommand(_univerjs_sheets_drawing.InsertSheetDrawingCommand.id, {
 			unitId,
@@ -572,10 +566,9 @@ let SheetDrawingUpdateController = class SheetDrawingUpdateController extends _u
 			}
 		});
 		if (jsonXActions) {
-			var _location$row, _location$col;
 			docDataModel.apply(jsonXActions);
 			return this._commandService.syncExecuteCommand(_univerjs_sheets.SetRangeValuesCommand.id, {
-				value: { [(_location$row = location === null || location === void 0 ? void 0 : location.row) !== null && _location$row !== void 0 ? _location$row : row]: { [(_location$col = location === null || location === void 0 ? void 0 : location.col) !== null && _location$col !== void 0 ? _location$col : col]: {
+				value: { [(location === null || location === void 0 ? void 0 : location.row) ?? row]: { [(location === null || location === void 0 ? void 0 : location.col) ?? col]: {
 					p: docDataModel.getSnapshot(),
 					t: 1
 				} } },
@@ -634,10 +627,9 @@ let SheetDrawingUpdateController = class SheetDrawingUpdateController extends _u
 			}
 		});
 		if (jsonXActions) {
-			var _location$row2, _location$col2;
 			docDataModel.apply(jsonXActions);
 			return this._commandService.syncExecuteCommand(_univerjs_sheets.SetRangeValuesCommand.id, {
-				value: { [(_location$row2 = location === null || location === void 0 ? void 0 : location.row) !== null && _location$row2 !== void 0 ? _location$row2 : selection.primary.actualRow]: { [(_location$col2 = location === null || location === void 0 ? void 0 : location.col) !== null && _location$col2 !== void 0 ? _location$col2 : selection.primary.actualColumn]: {
+				value: { [(location === null || location === void 0 ? void 0 : location.row) ?? selection.primary.actualRow]: { [(location === null || location === void 0 ? void 0 : location.col) ?? selection.primary.actualColumn]: {
 					p: docDataModel.getSnapshot(),
 					t: 1
 				} } },
@@ -889,20 +881,17 @@ const InsertFloatImageCommand = {
 		if (files) {
 			const awaitFiles = files.map((file) => sheetDrawingUpdateController.insertFloatImageByFile(file));
 			return (await Promise.all(awaitFiles)).every((result) => result);
-		} else {
-			var _sheetDrawingUpdateCo;
-			return (_sheetDrawingUpdateCo = sheetDrawingUpdateController.insertFloatImage()) !== null && _sheetDrawingUpdateCo !== void 0 ? _sheetDrawingUpdateCo : false;
-		}
+		} else return sheetDrawingUpdateController.insertFloatImage() ?? false;
 	}
 };
 const InsertCellImageCommand = {
 	id: "sheet.command.insert-cell-image",
 	type: _univerjs_core.CommandType.COMMAND,
 	handler: (accessor) => {
-		var _getCurrentTypeOfRend2, _getCurrentTypeOfRend3;
+		var _getCurrentTypeOfRend2;
 		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
 		const renderManagerService = accessor.get(_univerjs_engine_render.IRenderManagerService);
-		return (_getCurrentTypeOfRend2 = (_getCurrentTypeOfRend3 = (0, _univerjs_engine_render.getCurrentTypeOfRenderer)(_univerjs_core.UniverInstanceType.UNIVER_SHEET, univerInstanceService, renderManagerService)) === null || _getCurrentTypeOfRend3 === void 0 ? void 0 : _getCurrentTypeOfRend3.with(SheetDrawingUpdateController).insertCellImage()) !== null && _getCurrentTypeOfRend2 !== void 0 ? _getCurrentTypeOfRend2 : false;
+		return ((_getCurrentTypeOfRend2 = (0, _univerjs_engine_render.getCurrentTypeOfRenderer)(_univerjs_core.UniverInstanceType.UNIVER_SHEET, univerInstanceService, renderManagerService)) === null || _getCurrentTypeOfRend2 === void 0 ? void 0 : _getCurrentTypeOfRend2.with(SheetDrawingUpdateController).insertCellImage()) ?? false;
 	}
 };
 
@@ -915,6 +904,7 @@ const MoveDrawingsCommand = {
 		const commandService = accessor.get(_univerjs_core.ICommandService);
 		const drawingManagerService = accessor.get(_univerjs_sheets_drawing.ISheetDrawingService);
 		const sheetSkeletonService = accessor.get(_univerjs_sheets.SheetSkeletonService);
+		const undoRedoGroupService = accessor.get(_univerjs_ui.UndoRedoGroupService);
 		const { direction } = params;
 		const drawings = drawingManagerService.getFocusDrawings();
 		if (drawings.length === 0) return false;
@@ -936,10 +926,10 @@ const MoveDrawingsCommand = {
 				axisAlignSheetTransform: (0, _univerjs_sheets_drawing.transformToAxisAlignPosition)(newTransform, skeleton)
 			};
 		}).filter((drawing) => drawing != null);
-		if (commandService.syncExecuteCommand(_univerjs_sheets_drawing.SetSheetDrawingCommand.id, {
+		if (undoRedoGroupService.runTimed(unitId, `sheet-drawing:nudge:${drawings[0].subUnitId}:${drawings.map((drawing) => drawing.drawingId).sort().join(",")}`, () => commandService.syncExecuteCommand(_univerjs_sheets_drawing.SetSheetDrawingCommand.id, {
 			unitId,
 			drawings: newDrawings
-		})) {
+		}))) {
 			commandService.syncExecuteCommand(_univerjs_sheets_drawing.ClearSheetDrawingTransformerOperation.id, [unitId]);
 			return true;
 		}
@@ -991,20 +981,14 @@ function rangeToA1Notation(range) {
 	return start === end ? start : `${start}:${end}`;
 }
 /**
-* Check if a cell has image
-*/
-function cellHasImage$1(cell) {
-	var _cell$p, _cell$p2;
-	return !!((cell === null || cell === void 0 || (_cell$p = cell.p) === null || _cell$p === void 0 || (_cell$p = _cell$p.drawingsOrder) === null || _cell$p === void 0 ? void 0 : _cell$p.length) && (cell === null || cell === void 0 || (_cell$p2 = cell.p) === null || _cell$p2 === void 0 || (_cell$p2 = _cell$p2.drawingsOrder) === null || _cell$p2 === void 0 ? void 0 : _cell$p2.length) > 0);
-}
-/**
 * Get image data from cell
 */
 function getCellImageData(cell) {
-	var _cell$p3, _cell$p4;
-	if (!((_cell$p3 = cell.p) === null || _cell$p3 === void 0 || (_cell$p3 = _cell$p3.drawingsOrder) === null || _cell$p3 === void 0 ? void 0 : _cell$p3.length) || !((_cell$p4 = cell.p) === null || _cell$p4 === void 0 ? void 0 : _cell$p4.drawings)) return null;
-	const drawingId = cell.p.drawingsOrder[0];
-	const drawing = cell.p.drawings[drawingId];
+	var _documentData$drawing;
+	const documentData = cell.p;
+	const drawingId = documentData === null || documentData === void 0 || (_documentData$drawing = documentData.drawingsOrder) === null || _documentData$drawing === void 0 ? void 0 : _documentData$drawing[0];
+	if (!(0, _univerjs_sheets.isCellImage)(documentData) || !drawingId || !(documentData === null || documentData === void 0 ? void 0 : documentData.drawings)) return null;
+	const drawing = documentData.drawings[drawingId];
 	if (!drawing || !("source" in drawing) || !("imageSourceType" in drawing)) return null;
 	return drawing;
 }
@@ -1051,7 +1035,7 @@ let BatchSaveImagesService = class BatchSaveImagesService extends _univerjs_core
 			const { startRow, endRow, startColumn, endColumn } = selection.range;
 			for (let row = startRow; row <= endRow; row++) for (let col = startColumn; col <= endColumn; col++) {
 				const cell = cellMatrix.getValue(row, col);
-				if (cellHasImage$1(cell)) {
+				if ((0, _univerjs_sheets.isCellImage)(cell === null || cell === void 0 ? void 0 : cell.p)) {
 					const imageData = getCellImageData(cell);
 					if (imageData) images.push({
 						row,
@@ -1077,7 +1061,7 @@ let BatchSaveImagesService = class BatchSaveImagesService extends _univerjs_core
 			const { startRow, endRow, startColumn, endColumn } = range;
 			for (let row = startRow; row <= endRow; row++) for (let col = startColumn; col <= endColumn; col++) {
 				const cell = cellMatrix.getValue(row, col);
-				if (cellHasImage$1(cell)) {
+				if ((0, _univerjs_sheets.isCellImage)(cell === null || cell === void 0 ? void 0 : cell.p)) {
 					const imageData = getCellImageData(cell);
 					if (imageData) images.push({
 						row,
@@ -1115,8 +1099,8 @@ let BatchSaveImagesService = class BatchSaveImagesService extends _univerjs_core
 			for (let row = minRow; row <= maxRow; row++) {
 				const cell = cellMatrix.getValue(row, col);
 				if (cell) {
-					var _cell$v, _cell$p5;
-					if (((_cell$v = cell.v) === null || _cell$v === void 0 ? void 0 : _cell$v.toString()) || ((_cell$p5 = cell.p) === null || _cell$p5 === void 0 || (_cell$p5 = _cell$p5.body) === null || _cell$p5 === void 0 || (_cell$p5 = _cell$p5.dataStream) === null || _cell$p5 === void 0 ? void 0 : _cell$p5.trim()) || "") {
+					var _cell$v, _cell$p;
+					if (((_cell$v = cell.v) === null || _cell$v === void 0 ? void 0 : _cell$v.toString()) || ((_cell$p = cell.p) === null || _cell$p === void 0 || (_cell$p = _cell$p.body) === null || _cell$p === void 0 || (_cell$p = _cell$p.dataStream) === null || _cell$p === void 0 ? void 0 : _cell$p.trim()) || "") {
 						columnsWithData.add(col);
 						break;
 					}
@@ -1152,8 +1136,8 @@ let BatchSaveImagesService = class BatchSaveImagesService extends _univerjs_core
 			for (let row = minRow; row <= maxRow; row++) {
 				const cell = cellMatrix.getValue(row, col);
 				if (cell) {
-					var _cell$v2, _cell$p6;
-					if (((_cell$v2 = cell.v) === null || _cell$v2 === void 0 ? void 0 : _cell$v2.toString()) || ((_cell$p6 = cell.p) === null || _cell$p6 === void 0 || (_cell$p6 = _cell$p6.body) === null || _cell$p6 === void 0 || (_cell$p6 = _cell$p6.dataStream) === null || _cell$p6 === void 0 ? void 0 : _cell$p6.trim()) || "") {
+					var _cell$v2, _cell$p2;
+					if (((_cell$v2 = cell.v) === null || _cell$v2 === void 0 ? void 0 : _cell$v2.toString()) || ((_cell$p2 = cell.p) === null || _cell$p2 === void 0 || (_cell$p2 = _cell$p2.body) === null || _cell$p2 === void 0 || (_cell$p2 = _cell$p2.dataStream) === null || _cell$p2 === void 0 ? void 0 : _cell$p2.trim()) || "") {
 						columnsWithData.add(col);
 						break;
 					}
@@ -1204,8 +1188,8 @@ let BatchSaveImagesService = class BatchSaveImagesService extends _univerjs_core
 			if (worksheet) {
 				const cell = worksheet.getCellMatrix().getValue(imageInfo.row, config.columnIndex);
 				if (cell) {
-					var _cell$v3, _cell$p7;
-					const value = ((_cell$v3 = cell.v) === null || _cell$v3 === void 0 ? void 0 : _cell$v3.toString()) || ((_cell$p7 = cell.p) === null || _cell$p7 === void 0 || (_cell$p7 = _cell$p7.body) === null || _cell$p7 === void 0 || (_cell$p7 = _cell$p7.dataStream) === null || _cell$p7 === void 0 ? void 0 : _cell$p7.trim()) || "";
+					var _cell$v3, _cell$p3;
+					const value = ((_cell$v3 = cell.v) === null || _cell$v3 === void 0 ? void 0 : _cell$v3.toString()) || ((_cell$p3 = cell.p) === null || _cell$p3 === void 0 || (_cell$p3 = _cell$p3.body) === null || _cell$p3 === void 0 || (_cell$p3 = _cell$p3.dataStream) === null || _cell$p3 === void 0 ? void 0 : _cell$p3.trim()) || "";
 					if (value) {
 						const sanitized = value.replace(/[<>:"/\\|?*]/g, "_").trim();
 						if (sanitized) parts.push(sanitized);
@@ -1226,8 +1210,8 @@ let BatchSaveImagesService = class BatchSaveImagesService extends _univerjs_core
 			if (worksheet) {
 				const cell = worksheet.getCellMatrix().getValue(imageInfo.row, config.columnIndex);
 				if (cell) {
-					var _cell$v4, _cell$p8;
-					const value = ((_cell$v4 = cell.v) === null || _cell$v4 === void 0 ? void 0 : _cell$v4.toString()) || ((_cell$p8 = cell.p) === null || _cell$p8 === void 0 || (_cell$p8 = _cell$p8.body) === null || _cell$p8 === void 0 || (_cell$p8 = _cell$p8.dataStream) === null || _cell$p8 === void 0 ? void 0 : _cell$p8.trim()) || "";
+					var _cell$v4, _cell$p4;
+					const value = ((_cell$v4 = cell.v) === null || _cell$v4 === void 0 ? void 0 : _cell$v4.toString()) || ((_cell$p4 = cell.p) === null || _cell$p4 === void 0 || (_cell$p4 = _cell$p4.body) === null || _cell$p4 === void 0 || (_cell$p4 = _cell$p4.dataStream) === null || _cell$p4 === void 0 ? void 0 : _cell$p4.trim()) || "";
 					if (value) {
 						const sanitized = value.replace(/[<>:"/\\|?*]/g, "_").trim();
 						if (sanitized) parts.push(sanitized);
@@ -1392,21 +1376,24 @@ const SidebarSheetDrawingOperation = {
 		const sidebarService = accessor.get(_univerjs_ui.ISidebarService);
 		const localeService = accessor.get(_univerjs_core.LocaleService);
 		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+		const drawingManagerService = accessor.get(_univerjs_drawing.IDrawingManagerService);
 		const commandService = accessor.get(_univerjs_core.ICommandService);
 		if (!(0, _univerjs_sheets.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(_univerjs_drawing.SetDrawingSelectedOperation.id, []);
+						const focusedDrawings = drawingManagerService.getFocusDrawings();
+						if (focusedDrawings.length === 1 && focusedDrawings[0].drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_IMAGE) commandService.syncExecuteCommand(_univerjs_drawing.SetDrawingSelectedOperation.id, []);
 					},
 					width: 360
 				});
 				break;
 			default:
-				sidebarService.close();
+				sidebarService.close(COMPONENT_SHEET_DRAWING_PANEL);
 				break;
 		}
 		return true;
@@ -1509,7 +1496,6 @@ let SheetsDrawingGroupCopyPasteController = class SheetsDrawingGroupCopyPasteCon
 		};
 	}
 	_generateGroupPasteMutations(pasteTo) {
-		var _cloned$flatChildren;
 		if (!this._copyInfo) return {
 			redos: [],
 			undos: []
@@ -1540,12 +1526,11 @@ let SheetsDrawingGroupCopyPasteController = class SheetsDrawingGroupCopyPasteCon
 			left: pasteRect.startX,
 			top: pasteRect.startY
 		};
-		const allDrawings = [...((_cloned$flatChildren = cloned.flatChildren) !== null && _cloned$flatChildren !== void 0 ? _cloned$flatChildren : []).map((d) => ({
+		const allDrawings = [...(cloned.flatChildren ?? []).map((d) => ({
 			...d,
 			unitId,
 			subUnitId
 		})), ...cloned.groups.map((d) => {
-			var _transformToDrawingPo, _transformToAxisAlign;
 			if (d.drawingId !== newRootGroupId) return {
 				...d,
 				unitId,
@@ -1556,8 +1541,8 @@ let SheetsDrawingGroupCopyPasteController = class SheetsDrawingGroupCopyPasteCon
 				unitId,
 				subUnitId,
 				transform: newTransform,
-				sheetTransform: (_transformToDrawingPo = (0, _univerjs_sheets_drawing.transformToDrawingPosition)(newTransform, pasteToSkeleton)) !== null && _transformToDrawingPo !== void 0 ? _transformToDrawingPo : origRootGroup.sheetTransform,
-				axisAlignSheetTransform: (_transformToAxisAlign = (0, _univerjs_sheets_drawing.transformToAxisAlignPosition)(newTransform, pasteToSkeleton)) !== null && _transformToAxisAlign !== void 0 ? _transformToAxisAlign : origRootGroup.sheetTransform
+				sheetTransform: (0, _univerjs_sheets_drawing.transformToDrawingPosition)(newTransform, pasteToSkeleton) ?? origRootGroup.sheetTransform,
+				axisAlignSheetTransform: (0, _univerjs_sheets_drawing.transformToAxisAlignPosition)(newTransform, pasteToSkeleton) ?? origRootGroup.sheetTransform
 			};
 		})];
 		const { undo: removeOp, redo: insertOp, objects } = this._sheetDrawingService.getBatchAddOp(allDrawings);
@@ -1681,14 +1666,13 @@ function shouldStartFloatDomMoveFromHandle(info, detail) {
 	return detail.hostAnchorId === info.id && (detail.hostUnitId == null || detail.hostUnitId === info.unitId) && (detail.button == null || detail.button === 0) && typeof detail.clientX === "number" && typeof detail.clientY === "number";
 }
 function createFloatDomMoveDragState(info, detail) {
-	var _info$rect$left, _info$rect$top;
 	if (typeof detail.clientX !== "number" || typeof detail.clientY !== "number") return;
 	return {
 		pointerId: detail.pointerId,
 		startClientX: detail.clientX,
 		startClientY: detail.clientY,
-		startLeft: Number((_info$rect$left = info.rect.left) !== null && _info$rect$left !== void 0 ? _info$rect$left : 0),
-		startTop: Number((_info$rect$top = info.rect.top) !== null && _info$rect$top !== void 0 ? _info$rect$top : 0)
+		startLeft: Number(info.rect.left ?? 0),
+		startTop: Number(info.rect.top ?? 0)
 	};
 }
 function resolveFloatDomMoveDragTransform(state, event, scene) {
@@ -1970,8 +1954,7 @@ let SheetCanvasFloatDomManagerService = _SheetCanvasFloatDomManagerService = cla
 	* default {@link Rect} fallback.
 	*/
 	registerRenderObjectFactory(drawingType, factory) {
-		var _this$_renderObjectFa;
-		const factories = (_this$_renderObjectFa = this._renderObjectFactories.get(drawingType)) !== null && _this$_renderObjectFa !== void 0 ? _this$_renderObjectFa : [];
+		const factories = this._renderObjectFactories.get(drawingType) ?? [];
 		factories.push(factory);
 		this._renderObjectFactories.set(drawingType, factories);
 		return { dispose: () => {
@@ -1983,10 +1966,9 @@ let SheetCanvasFloatDomManagerService = _SheetCanvasFloatDomManagerService = cla
 		} };
 	}
 	_createRenderObject(context) {
-		var _factory;
 		const factories = this._renderObjectFactories.get(context.drawingType);
 		const factory = factories === null || factories === void 0 ? void 0 : factories[factories.length - 1];
-		return (_factory = factory === null || factory === void 0 ? void 0 : factory(context)) !== null && _factory !== void 0 ? _factory : new _univerjs_engine_render.Rect(context.key, context.config);
+		return (factory === null || factory === void 0 ? void 0 : factory(context)) ?? new _univerjs_engine_render.Rect(context.key, context.config);
 	}
 	_bindScrollEvent() {
 		this._lifecycleService.lifecycle$.pipe((0, rxjs.filter)((s) => s === _univerjs_core.LifecycleStages.Rendered), (0, rxjs.take)(1)).subscribe(() => {
@@ -2314,7 +2296,7 @@ let SheetCanvasFloatDomManagerService = _SheetCanvasFloatDomManagerService = cla
 					if (data && data.border) imageConfig.stroke = data.border;
 					Object.assign(imageConfig, SHEET_CHART_RENDER_OBJECT_CONFIG);
 				} else imageConfig.rotateEnabled = false;
-				const rect = rectShape !== null && rectShape !== void 0 ? rectShape : this._createRenderObject({
+				const rect = rectShape ?? this._createRenderObject({
 					key: rectShapeKey,
 					config: imageConfig,
 					unitId,
@@ -2464,6 +2446,7 @@ let SheetCanvasFloatDomManagerService = _SheetCanvasFloatDomManagerService = cla
 					if (previewObjectKey) scene.removeObject(previewObjectKey);
 				});
 				listener && disposableCollection.add(listener);
+				this._bindFloatDomScroll(disposableCollection, info, renderObject.renderUnit.scene, skeleton.skeleton, target.worksheet);
 				this._domLayerInfoMap.set(drawingId, info);
 			});
 		}));
@@ -2516,23 +2499,6 @@ let SheetCanvasFloatDomManagerService = _SheetCanvasFloatDomManagerService = cla
 			this._syncFloatDomVisibilityForActiveSheet(unitId, subUnitId);
 			updateSheet(unitId, subUnitId);
 		}));
-		this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_SHEET).pipe((0, rxjs.switchMap)((workbook) => workbook ? workbook.activeSheet$ : (0, rxjs.of)(null)), (0, rxjs.map)((worksheet) => {
-			if (!worksheet) return null;
-			const unitId = worksheet.getUnitId();
-			const render = this._renderManagerService.getRenderUnitById(unitId);
-			return render ? {
-				render,
-				unitId,
-				subUnitId: worksheet.getSheetId()
-			} : null;
-		}), (0, rxjs.switchMap)((render) => render ? (0, _univerjs_core.fromEventSubject)(render.render.scene.getViewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_MAIN).onScrollAfter$).pipe((0, rxjs.map)(() => ({
-			unitId: render.unitId,
-			subUnitId: render.subUnitId
-		}))) : (0, rxjs.of)(null))).subscribe((value) => {
-			if (!value) return;
-			const { unitId, subUnitId } = value;
-			updateSheet(unitId, subUnitId);
-		}));
 		this.disposeWithMe(this._commandService.onCommandExecuted((commandInfo) => {
 			if (commandInfo.id === _univerjs_sheets_ui.SetZoomRatioOperation.id) {
 				const { unitId } = commandInfo.params;
@@ -2548,6 +2514,13 @@ let SheetCanvasFloatDomManagerService = _SheetCanvasFloatDomManagerService = cla
 			}
 		}));
 	}
+	_bindFloatDomScroll(disposableCollection, info, scene, skeleton, worksheet) {
+		const viewport = scene.getViewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_MAIN);
+		if (!viewport) return;
+		disposableCollection.add((0, _univerjs_core.fromEventSubject)(viewport.onScrollAfter$).subscribe(() => {
+			info.position$.next(calcSheetFloatDomPosition(info.rect, scene, skeleton, worksheet, info));
+		}));
+	}
 	updateFloatDomProps(unitId, subUnitId, id, props) {
 		const info = this._domLayerInfoMap.get(id);
 		const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
@@ -2577,13 +2550,13 @@ let SheetCanvasFloatDomManagerService = _SheetCanvasFloatDomManagerService = cla
 		}
 	}
 	_getObjectIncludingGroup(scene, key, groupKey) {
-		var _ref, _ref2, _this$_getChildObject, _scene$getObjectInclu;
-		return (_ref = (_ref2 = (_this$_getChildObject = this._getChildObjectFromGroup(scene, key, groupKey)) !== null && _this$_getChildObject !== void 0 ? _this$_getChildObject : (_scene$getObjectInclu = scene.getObjectIncludeInGroup) === null || _scene$getObjectInclu === void 0 ? void 0 : _scene$getObjectInclu.call(scene, key)) !== null && _ref2 !== void 0 ? _ref2 : scene.getObject(key)) !== null && _ref !== void 0 ? _ref : null;
+		var _scene$getObjectInclu;
+		return this._getChildObjectFromGroup(scene, key, groupKey) ?? ((_scene$getObjectInclu = scene.getObjectIncludeInGroup) === null || _scene$getObjectInclu === void 0 ? void 0 : _scene$getObjectInclu.call(scene, key)) ?? scene.getObject(key) ?? null;
 	}
 	_getChildObjectFromGroup(scene, key, groupKey) {
-		var _scene$getObjectInclu2, _scene$getObjectInclu3;
+		var _scene$getObjectInclu2;
 		if (!groupKey) return null;
-		const groupObject = (_scene$getObjectInclu2 = (_scene$getObjectInclu3 = scene.getObjectIncludeInGroup) === null || _scene$getObjectInclu3 === void 0 ? void 0 : _scene$getObjectInclu3.call(scene, groupKey)) !== null && _scene$getObjectInclu2 !== void 0 ? _scene$getObjectInclu2 : scene.getObject(groupKey);
+		const groupObject = ((_scene$getObjectInclu2 = scene.getObjectIncludeInGroup) === null || _scene$getObjectInclu2 === void 0 ? void 0 : _scene$getObjectInclu2.call(scene, groupKey)) ?? scene.getObject(groupKey);
 		return this._findChildObject(groupObject, key);
 	}
 	_findChildObject(object, key) {
@@ -2607,10 +2580,9 @@ let SheetCanvasFloatDomManagerService = _SheetCanvasFloatDomManagerService = cla
 		if (info) info.rect = object;
 	}
 	_getChartDataBackground(data) {
-		var _record$backgroundCol;
 		if (!data || typeof data !== "object" || Array.isArray(data)) return;
 		const record = data;
-		const background = (_record$backgroundCol = record.backgroundColor) !== null && _record$backgroundCol !== void 0 ? _record$backgroundCol : record.background;
+		const background = record.backgroundColor ?? record.background;
 		return typeof background === "string" ? background : void 0;
 	}
 	_getPosition(position, unitId) {
@@ -2683,7 +2655,7 @@ let SheetCanvasFloatDomManagerService = _SheetCanvasFloatDomManagerService = cla
 		if (!target) throw new Error("cannot find current target!");
 		const { unitId, subUnitId } = target;
 		const { initPosition, componentKey, data, allowTransform = true } = layer;
-		const id = propId !== null && propId !== void 0 ? propId : (0, _univerjs_core.generateRandomId)();
+		const id = propId ?? (0, _univerjs_core.generateRandomId)();
 		const sheetTransform = this._getPosition(initPosition, unitId);
 		if (sheetTransform == null) return;
 		const sheetDrawingParam = {
@@ -2768,7 +2740,7 @@ let SheetCanvasFloatDomManagerService = _SheetCanvasFloatDomManagerService = cla
 		const skeletonParam = (_this$_renderManagerS5 = this._renderManagerService.getRenderUnitById(unitId)) === null || _this$_renderManagerS5 === void 0 ? void 0 : _this$_renderManagerS5.with(_univerjs_sheets_ui.SheetSkeletonManagerService).getSkeletonParam(subUnitId);
 		if (!skeletonParam) return;
 		const { componentKey, data, allowTransform = true } = config;
-		const id = propId !== null && propId !== void 0 ? propId : (0, _univerjs_core.generateRandomId)();
+		const id = propId ?? (0, _univerjs_core.generateRandomId)();
 		const { position: rangePosition, position$: rangePos$ } = this._createRangePositionObserver(range, currentRender, skeletonParam.skeleton);
 		const sheetTransform = this._getPosition(rangePosition, unitId);
 		if (sheetTransform == null) return;
@@ -2926,15 +2898,14 @@ let SheetCanvasFloatDomManagerService = _SheetCanvasFloatDomManagerService = cla
 			};
 			this._canvasFloatDomService.addFloatDom(floatDomCfg);
 			this.disposeWithMe(rangePos$.subscribe((newRangePos) => {
-				var _domAnchor$width, _domAnchor$height, _domAnchor$width2, _domAnchor$height2;
 				const calcOffsetPos = calcDomPositionByAnchor({
 					rotate: 0,
 					startX: newRangePos.startX,
 					startY: newRangePos.startY,
 					endX: newRangePos.endX,
 					endY: newRangePos.endY,
-					width: (_domAnchor$width = domAnchor.width) !== null && _domAnchor$width !== void 0 ? _domAnchor$width : newRangePos.width,
-					height: (_domAnchor$height = domAnchor.height) !== null && _domAnchor$height !== void 0 ? _domAnchor$height : newRangePos.height,
+					width: domAnchor.width ?? newRangePos.width,
+					height: domAnchor.height ?? newRangePos.height,
 					absolute: {
 						left: rangePosition.absolute.left,
 						top: rangePosition.absolute.top
@@ -2947,8 +2918,8 @@ let SheetCanvasFloatDomManagerService = _SheetCanvasFloatDomManagerService = cla
 				}), {
 					left: calcOffsetPos.startX,
 					top: calcOffsetPos.startY,
-					width: (_domAnchor$width2 = domAnchor.width) !== null && _domAnchor$width2 !== void 0 ? _domAnchor$width2 : newRangePos.width,
-					height: (_domAnchor$height2 = domAnchor.height) !== null && _domAnchor$height2 !== void 0 ? _domAnchor$height2 : newRangePos.height,
+					width: domAnchor.width ?? newRangePos.width,
+					height: domAnchor.height ?? newRangePos.height,
 					zIndex: this._drawingManagerService.getDrawingOrder(unitId, subUnitId).length - 1
 				});
 				const newPos = calcSheetFloatDomPosition(newRect, renderObject.renderUnit.scene, skeletonParam.skeleton, target.worksheet, floatDomInfo);
@@ -2968,6 +2939,7 @@ let SheetCanvasFloatDomManagerService = _SheetCanvasFloatDomManagerService = cla
 				this._canvasFloatDomService.removeFloatDom(drawingId);
 			});
 			listener && disposableCollection.add(listener);
+			this._bindFloatDomScroll(disposableCollection, floatDomInfo, renderObject.renderUnit.scene, skeletonParam.skeleton, target.worksheet);
 			this._domLayerInfoMap.set(drawingId, floatDomInfo);
 		}
 		return this._createFloatDomDisposable(id);
@@ -2986,7 +2958,7 @@ let SheetCanvasFloatDomManagerService = _SheetCanvasFloatDomManagerService = cla
 		const skeletonParam = (_this$_renderManagerS8 = this._renderManagerService.getRenderUnitById(unitId)) === null || _this$_renderManagerS8 === void 0 ? void 0 : _this$_renderManagerS8.with(_univerjs_sheets_ui.SheetSkeletonManagerService).getSkeletonParam(subUnitId);
 		if (!skeletonParam) return;
 		const { componentKey, data, allowTransform = true } = config;
-		const id = propId !== null && propId !== void 0 ? propId : (0, _univerjs_core.generateRandomId)();
+		const id = propId ?? (0, _univerjs_core.generateRandomId)();
 		const { position: rangePosition, position$: rangePos$ } = this._createRangePositionObserver({
 			startRow: 0,
 			endRow: 0,
@@ -3167,6 +3139,7 @@ let SheetCanvasFloatDomManagerService = _SheetCanvasFloatDomManagerService = cla
 				this._canvasFloatDomService.removeFloatDom(drawingId);
 			});
 			listener && disposableCollection.add(listener);
+			this._bindFloatDomScroll(disposableCollection, floatDomInfo, renderObject.renderUnit.scene, skeleton.skeleton, target.worksheet);
 			this._domLayerInfoMap.set(drawingId, floatDomInfo);
 		}
 		return this._createFloatDomDisposable(id);
@@ -3282,12 +3255,11 @@ function calcCellPositionByCell(row, col, skeleton) {
 	};
 }
 function calcDomPositionByAnchor(rangePosition, domAnchor, scale) {
-	var _scale, _domAnchor$width3, _domAnchor$height3;
-	scale = (_scale = scale) !== null && _scale !== void 0 ? _scale : 1;
+	scale = scale ?? 1;
 	const rangeWidth = rangePosition.endX - rangePosition.startX;
 	const rangeHeight = rangePosition.endY - rangePosition.startY;
-	const domWidth = (_domAnchor$width3 = domAnchor === null || domAnchor === void 0 ? void 0 : domAnchor.width) !== null && _domAnchor$width3 !== void 0 ? _domAnchor$width3 : rangeWidth;
-	const domHeight = (_domAnchor$height3 = domAnchor === null || domAnchor === void 0 ? void 0 : domAnchor.height) !== null && _domAnchor$height3 !== void 0 ? _domAnchor$height3 : rangeHeight;
+	const domWidth = (domAnchor === null || domAnchor === void 0 ? void 0 : domAnchor.width) ?? rangeWidth;
+	const domHeight = (domAnchor === null || domAnchor === void 0 ? void 0 : domAnchor.height) ?? rangeHeight;
 	let domLeft = 0;
 	let domTop = 0;
 	if (domAnchor) {
@@ -3382,13 +3354,6 @@ function UploadCellImageMenuFactory(accessor) {
 //#endregion
 //#region src/menu/save-images.menu.ts
 /**
-* Check if a cell has image
-*/
-function cellHasImage(cell) {
-	var _cell$p, _cell$p2;
-	return !!((cell === null || cell === void 0 || (_cell$p = cell.p) === null || _cell$p === void 0 || (_cell$p = _cell$p.drawingsOrder) === null || _cell$p === void 0 ? void 0 : _cell$p.length) && (cell === null || cell === void 0 || (_cell$p2 = cell.p) === null || _cell$p2 === void 0 || (_cell$p2 = _cell$p2.drawingsOrder) === null || _cell$p2 === void 0 ? void 0 : _cell$p2.length) > 0);
-}
-/**
 * Check if selection range has any images
 */
 function selectionHasImages(workbook, selection) {
@@ -3396,7 +3361,10 @@ function selectionHasImages(workbook, selection) {
 	if (!worksheet) return false;
 	const cellMatrix = worksheet.getCellMatrix();
 	const { startRow, endRow, startColumn, endColumn } = selection;
-	for (let row = startRow; row <= endRow; row++) for (let col = startColumn; col <= endColumn; col++) if (cellHasImage(cellMatrix.getValue(row, col))) return true;
+	for (let row = startRow; row <= endRow; row++) for (let col = startColumn; col <= endColumn; col++) {
+		const cell = cellMatrix.getValue(row, col);
+		if ((0, _univerjs_sheets.isCellImage)(cell === null || cell === void 0 ? void 0 : cell.p)) return true;
+	}
 	return false;
 }
 /**
@@ -3465,7 +3433,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-drawing-ui";
-var version = "1.0.0-alpha.8";
+var version = "1.0.0-beta.1";
 
 //#endregion
 //#region src/config/config.ts
@@ -3600,18 +3568,17 @@ function BatchSaveImagesDialog() {
 //#endregion
 //#region src/views/sheet-image-panel/SheetDrawingAnchor.tsx
 const SheetDrawingAnchor = (props) => {
-	var _drawingParam$anchorT;
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const drawingManagerService = (0, _univerjs_ui.useDependency)(_univerjs_drawing.IDrawingManagerService);
 	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService);
 	const { drawings } = props;
-	const drawingParam = drawings[0];
+	const drawingParam = isSheetDrawing(drawings[0]) ? drawings[0] : void 0;
 	const renderObject = drawingParam ? renderManagerService.getRenderUnitById(drawingParam.unitId) : void 0;
 	const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
 	const transformer = scene === null || scene === void 0 ? void 0 : scene.getTransformerByCreate();
 	const [anchorShow, setAnchorShow] = (0, react.useState)(true);
-	const [value, setValue] = (0, react.useState)((_drawingParam$anchorT = drawingParam === null || drawingParam === void 0 ? void 0 : drawingParam.anchorType) !== null && _drawingParam$anchorT !== void 0 ? _drawingParam$anchorT : _univerjs_sheets_drawing.SheetDrawingAnchorType.Position);
+	const [value, setValue] = (0, react.useState)(drawingParam ? (0, _univerjs_sheets_drawing.getSheetDrawingPlacement)(drawingParam).kind : _univerjs_sheets_drawing.SheetDrawingAnchorType.Position);
 	function getUpdateParams(objects, drawingManagerService) {
 		const params = [];
 		objects.forEach((object) => {
@@ -3621,6 +3588,10 @@ const SheetDrawingAnchor = (props) => {
 				params.push(null);
 				return true;
 			}
+			if (!isSheetDrawing(searchParam)) {
+				params.push(null);
+				return true;
+			}
 			const { unitId, subUnitId, drawingId, drawingType, anchorType, sheetTransform, axisAlignSheetTransform } = searchParam;
 			params.push({
 				unitId,
@@ -3644,10 +3615,9 @@ const SheetDrawingAnchor = (props) => {
 			const params = getUpdateParams(objects, drawingManagerService);
 			if (params.length === 0) setAnchorShow(false);
 			else if (params.length >= 1) {
-				var _params$;
 				setAnchorShow(true);
-				const anchorType = ((_params$ = params[0]) === null || _params$ === void 0 ? void 0 : _params$.anchorType) || _univerjs_sheets_drawing.SheetDrawingAnchorType.Position;
-				setValue(anchorType);
+				const drawing = params[0];
+				setValue(drawing ? (0, _univerjs_sheets_drawing.getSheetDrawingPlacement)(drawing).kind : _univerjs_sheets_drawing.SheetDrawingAnchorType.Position);
 			}
 		});
 		return () => {
@@ -3657,21 +3627,34 @@ const SheetDrawingAnchor = (props) => {
 	}, [drawingManagerService, transformer]);
 	if (!drawingParam || !transformer) return null;
 	function handleChange(value) {
-		setValue(value);
+		const kind = getAnchorKind(value);
+		if (!kind) return;
 		const focusDrawings = drawingManagerService.getFocusDrawings();
-		if (focusDrawings.length === 0) return;
-		const updateParams = focusDrawings.map((drawing) => {
-			return {
-				unitId: drawing.unitId,
-				subUnitId: drawing.subUnitId,
+		if (!focusDrawings.length || !focusDrawings.every(isSheetDrawing)) return;
+		const { unitId, subUnitId } = focusDrawings[0];
+		const placementUpdates = [];
+		for (const drawing of focusDrawings) {
+			const { transform } = drawing;
+			const { left, top, width, height } = transform ?? {};
+			if (typeof left !== "number" || typeof top !== "number" || typeof width !== "number" || typeof height !== "number" || !Number.isFinite(left) || !Number.isFinite(top) || !Number.isFinite(width) || !Number.isFinite(height)) return;
+			placementUpdates.push({
 				drawingId: drawing.drawingId,
-				anchorType: value
-			};
-		});
-		commandService.executeCommand(_univerjs_sheets_drawing.SetSheetDrawingCommand.id, {
-			unitId: focusDrawings[0].unitId,
-			drawings: updateParams
-		});
+				placement: {
+					kind,
+					bounds: {
+						left,
+						top,
+						width,
+						height
+					}
+				}
+			});
+		}
+		if (commandService.syncExecuteCommand(_univerjs_sheets_drawing.SetSheetDrawingPlacementCommand.id, {
+			unitId,
+			subUnitId,
+			drawings: placementUpdates
+		})) setValue(kind);
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: (0, _univerjs_design.clsx)("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": !anchorShow }),
@@ -3699,6 +3682,13 @@ const SheetDrawingAnchor = (props) => {
 		}) })]
 	});
 };
+function isSheetDrawing(drawing) {
+	return Boolean(drawing && "sheetTransform" in drawing && "axisAlignSheetTransform" in drawing);
+}
+function getAnchorKind(value) {
+	if (value === _univerjs_sheets_drawing.SheetDrawingAnchorType.Position || value === _univerjs_sheets_drawing.SheetDrawingAnchorType.Both || value === _univerjs_sheets_drawing.SheetDrawingAnchorType.None) return value;
+	return null;
+}
 
 //#endregion
 //#region src/views/sheet-image-panel/SheetDrawingPanel.tsx
@@ -3814,16 +3804,15 @@ let DrawingContextMenuController = class DrawingContextMenuController extends _u
 		}));
 	}
 	_getContextMenuPosition(drawings) {
-		var _this$_drawingContext;
 		if (drawings.length !== 1) return _univerjs_ui.ContextMenuPosition.DRAWING;
 		const [drawing] = drawings;
-		return (_this$_drawingContext = this._drawingContextMenuService.getContextMenuPosition({
+		return this._drawingContextMenuService.getContextMenuPosition({
 			unitId: drawing.unitId,
 			subUnitId: drawing.subUnitId,
 			drawingId: drawing.drawingId,
 			drawingType: drawing.drawingType,
 			drawing
-		})) !== null && _this$_drawingContext !== void 0 ? _this$_drawingContext : _univerjs_ui.ContextMenuPosition.DRAWING;
+		}) ?? _univerjs_ui.ContextMenuPosition.DRAWING;
 	}
 };
 DrawingContextMenuController = __decorate([
@@ -3836,6 +3825,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 _univerjs_core.Disposable {
 	constructor(_context, _hoverManagerService, _selectionsService, _drawingRenderService, _sheetSkeletonManagerService) {
 		super();
@@ -3874,15 +3864,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 = (0, _univerjs_sheets.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([
@@ -3915,7 +3921,14 @@ let SheetsDrawingRenderController = class SheetsDrawingRenderController extends
 				const drawingData = subUnitData.data[drawingId];
 				const { unitId, subUnitId } = drawingData;
 				const skeletonParam = this._sheetSkeletonService.getSkeletonParam(unitId, subUnitId);
-				if (skeletonParam && drawingData.sheetTransform) drawingData.transform = (0, _univerjs_sheets_drawing.drawingPositionToTransform)(drawingData.sheetTransform, skeletonParam);
+				if (skeletonParam && drawingData.sheetTransform && !drawingData.groupId) {
+					const transform = (0, _univerjs_sheets_drawing.drawingPositionToTransform)(drawingData.sheetTransform, skeletonParam);
+					drawingData.transform = transform && drawingData.drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_GROUP ? {
+						...transform,
+						left: (transform.left ?? 0) - skeletonParam.skeleton.rowHeaderWidthAndMarginLeft,
+						top: (transform.top ?? 0) - skeletonParam.skeleton.columnHeaderHeightAndMarginTop
+					} : transform;
+				}
 			}
 		}
 		this._drawingManagerService.registerDrawingData(this._context.unitId, this._sheetDrawingService.getDrawingDataForUnit(this._context.unitId));
@@ -3931,9 +3944,11 @@ SheetsDrawingRenderController = __decorate([
 //#endregion
 //#region src/controllers/sheet-cell-image.controller.ts
 function resizeImageByCell(injector, location, cell) {
-	var _cell$p, _cell$p2;
-	if ((cell === null || cell === void 0 || (_cell$p = cell.p) === null || _cell$p === void 0 || (_cell$p = _cell$p.body) === null || _cell$p === void 0 ? void 0 : _cell$p.dataStream.length) === 3 && ((_cell$p2 = cell.p) === null || _cell$p2 === void 0 || (_cell$p2 = _cell$p2.drawingsOrder) === null || _cell$p2 === void 0 ? void 0 : _cell$p2.length) === 1) {
-		const image = cell.p.drawings[cell.p.drawingsOrder[0]];
+	var _documentData$drawing, _documentData$drawing2;
+	const documentData = cell === null || cell === void 0 ? void 0 : cell.p;
+	const drawingId = (0, _univerjs_sheets.isCellImage)(documentData) && (documentData === null || documentData === void 0 || (_documentData$drawing = documentData.drawingsOrder) === null || _documentData$drawing === void 0 ? void 0 : _documentData$drawing.length) === 1 ? documentData.drawingsOrder[0] : void 0;
+	const image = drawingId ? documentData === null || documentData === void 0 || (_documentData$drawing2 = documentData.drawings) === null || _documentData$drawing2 === void 0 ? void 0 : _documentData$drawing2[drawingId] : void 0;
+	if (image && documentData) {
 		const imageSize = getDrawingSizeByCell(injector, {
 			unitId: location.unitId,
 			subUnitId: location.subUnitId,
@@ -3949,8 +3964,8 @@ function resizeImageByCell(injector, location, cell) {
 			image.transform.top = 0;
 			image.docTransform.positionH.posOffset = 0;
 			image.docTransform.positionV.posOffset = 0;
-			cell.p.documentStyle.pageSize.width = Infinity;
-			cell.p.documentStyle.pageSize.height = Infinity;
+			documentData.documentStyle.pageSize.width = Infinity;
+			documentData.documentStyle.pageSize.height = Infinity;
 			return true;
 		}
 	}
@@ -3982,8 +3997,7 @@ let SheetCellImageController = class SheetCellImageController extends _univerjs_
 			effect: _univerjs_core.InterceptorEffectEnum.Style,
 			priority: _univerjs_sheets.InterceptCellContentPriority.CELL_IMAGE,
 			handler: (cell, pos, next) => {
-				var _cell$p$drawingsOrder;
-				if ((cell === null || cell === void 0 ? void 0 : cell.p) && ((_cell$p$drawingsOrder = cell.p.drawingsOrder) === null || _cell$p$drawingsOrder === void 0 ? void 0 : _cell$p$drawingsOrder.length)) {
+				if (cell && (0, _univerjs_sheets.isCellImage)(cell.p)) {
 					if (cell === pos.rawData) cell = { ...pos.rawData };
 					if (!cell.interceptorStyle) cell.interceptorStyle = {};
 					cell.interceptorStyle.tr = { a: 0 };
@@ -4083,10 +4097,9 @@ let SheetCellImageCopyPasteController = class SheetCellImageCopyPasteController
 	_initDocImageCopyPasteHooks() {
 		this.disposeWithMe(this._commandService.beforeCommandExecuted((commandInfo) => {
 			if (commandInfo.id === _univerjs_docs_ui.InnerPasteCommand.id) {
-				var _doc$drawings;
 				const { doc } = commandInfo.params;
 				const currentDoc = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
-				if (currentDoc == null || !Object.keys((_doc$drawings = doc.drawings) !== null && _doc$drawings !== void 0 ? _doc$drawings : {}).length) return;
+				if (currentDoc == null || !Object.keys(doc.drawings ?? {}).length) return;
 				const docUnitId = currentDoc.getUnitId();
 				if (DISABLE_UNITS.includes(docUnitId)) {
 					var _currentDoc$getBody;
@@ -4153,12 +4166,11 @@ let SheetDrawingActiveRenderController = class SheetDrawingActiveRenderControlle
 		setTimeout(() => {
 			const drawingMap = this._drawingManagerService.drawingManagerData;
 			const removeDrawings = [];
-			Object.keys(drawingMap !== null && drawingMap !== void 0 ? drawingMap : {}).forEach((unitId) => {
-				var _drawingMap$unitId;
-				const subUnitMap = (_drawingMap$unitId = drawingMap[unitId]) !== null && _drawingMap$unitId !== void 0 ? _drawingMap$unitId : {};
+			Object.keys(drawingMap ?? {}).forEach((unitId) => {
+				const subUnitMap = drawingMap[unitId] ?? {};
 				Object.keys(subUnitMap).forEach((subUnitId) => {
-					var _subUnitMap$subUnitId, _subUnitMap$subUnitId2;
-					const drawingData = (_subUnitMap$subUnitId = (_subUnitMap$subUnitId2 = subUnitMap[subUnitId]) === null || _subUnitMap$subUnitId2 === void 0 ? void 0 : _subUnitMap$subUnitId2.data) !== null && _subUnitMap$subUnitId !== void 0 ? _subUnitMap$subUnitId : {};
+					var _subUnitMap$subUnitId;
+					const drawingData = ((_subUnitMap$subUnitId = subUnitMap[subUnitId]) === null || _subUnitMap$subUnitId === void 0 ? void 0 : _subUnitMap$subUnitId.data) ?? {};
 					Object.keys(drawingData).forEach((drawingId) => {
 						if (unitId === selfUnitId) removeDrawings.push(drawingData[drawingId]);
 					});
@@ -4174,13 +4186,12 @@ let SheetDrawingActiveRenderController = class SheetDrawingActiveRenderControlle
 			const drawingMap = this._drawingManagerService.drawingManagerData;
 			const insertDrawings = [];
 			const removeDrawings = [];
-			Object.keys(drawingMap !== null && drawingMap !== void 0 ? drawingMap : {}).forEach((unitId) => {
-				var _drawingMap$unitId2;
+			Object.keys(drawingMap ?? {}).forEach((unitId) => {
 				if (unitId !== showUnitId) return;
-				const subUnitMap = (_drawingMap$unitId2 = drawingMap[unitId]) !== null && _drawingMap$unitId2 !== void 0 ? _drawingMap$unitId2 : {};
+				const subUnitMap = drawingMap[unitId] ?? {};
 				Object.keys(subUnitMap).forEach((subUnitId) => {
-					var _subUnitMap$subUnitId3, _subUnitMap$subUnitId4;
-					const drawingData = (_subUnitMap$subUnitId3 = (_subUnitMap$subUnitId4 = subUnitMap[subUnitId]) === null || _subUnitMap$subUnitId4 === void 0 ? void 0 : _subUnitMap$subUnitId4.data) !== null && _subUnitMap$subUnitId3 !== void 0 ? _subUnitMap$subUnitId3 : {};
+					var _subUnitMap$subUnitId2;
+					const drawingData = ((_subUnitMap$subUnitId2 = subUnitMap[subUnitId]) === null || _subUnitMap$subUnitId2 === void 0 ? void 0 : _subUnitMap$subUnitId2.data) ?? {};
 					Object.keys(drawingData).forEach((drawingId) => {
 						if (unitId === showUnitId && subUnitId === showSubunitId) {
 							const drawing = drawingData[drawingId];
@@ -4404,7 +4415,6 @@ let SheetsDrawingCopyPasteController = class SheetsDrawingCopyPasteController ex
 			subUnitId,
 			isCut: copyType === _univerjs_sheets_ui.COPY_TYPE.CUT,
 			getTransform: (transform, sheetTransform) => {
-				var _transformToDrawingPo, _transformToAxisAlign;
 				const pasteRect = (0, _univerjs_sheets.attachRangeWithCoord)(pasteToSkeleton, {
 					startRow: pasteRange.startRow,
 					endRow: pasteRange.endRow,
@@ -4418,8 +4428,8 @@ let SheetsDrawingCopyPasteController = class SheetsDrawingCopyPasteController ex
 				};
 				return {
 					transform: newTransform,
-					sheetTransform: (_transformToDrawingPo = (0, _univerjs_sheets_drawing.transformToDrawingPosition)(newTransform, pasteToSkeleton)) !== null && _transformToDrawingPo !== void 0 ? _transformToDrawingPo : sheetTransform,
-					axisAlignSheetTransform: (_transformToAxisAlign = (0, _univerjs_sheets_drawing.transformToAxisAlignPosition)(newTransform, pasteToSkeleton)) !== null && _transformToAxisAlign !== void 0 ? _transformToAxisAlign : sheetTransform
+					sheetTransform: (0, _univerjs_sheets_drawing.transformToDrawingPosition)(newTransform, pasteToSkeleton) ?? sheetTransform,
+					axisAlignSheetTransform: (0, _univerjs_sheets_drawing.transformToAxisAlignPosition)(newTransform, pasteToSkeleton) ?? sheetTransform
 				};
 			}
 		});
@@ -4550,11 +4560,10 @@ let SheetsDrawingCopyPasteController = class SheetsDrawingCopyPasteController ex
 			unitId: toUnitId,
 			subUnitId: toSubUnitId,
 			getTransform: (transform, sheetTransform) => {
-				var _transform$left, _transform$top, _transformToAxisAlign2;
 				const newTransform = {
 					...transform,
-					left: ((_transform$left = transform === null || transform === void 0 ? void 0 : transform.left) !== null && _transform$left !== void 0 ? _transform$left : 0) + leftOffset,
-					top: ((_transform$top = transform === null || transform === void 0 ? void 0 : transform.top) !== null && _transform$top !== void 0 ? _transform$top : 0) + topOffset
+					left: ((transform === null || transform === void 0 ? void 0 : transform.left) ?? 0) + leftOffset,
+					top: ((transform === null || transform === void 0 ? void 0 : transform.top) ?? 0) + topOffset
 				};
 				return {
 					transform: newTransform,
@@ -4571,7 +4580,7 @@ let SheetsDrawingCopyPasteController = class SheetsDrawingCopyPasteController ex
 							column: sheetTransform.from.column + columnOffset
 						}
 					},
-					axisAlignSheetTransform: (_transformToAxisAlign2 = (0, _univerjs_sheets_drawing.transformToAxisAlignPosition)(newTransform, toSkeleton)) !== null && _transformToAxisAlign2 !== void 0 ? _transformToAxisAlign2 : sheetTransform
+					axisAlignSheetTransform: (0, _univerjs_sheets_drawing.transformToAxisAlignPosition)(newTransform, toSkeleton) ?? sheetTransform
 				};
 			},
 			isCut: copyType === _univerjs_sheets_ui.COPY_TYPE.CUT
@@ -4795,6 +4804,10 @@ let SheetDrawingPermissionController = class SheetDrawingPermissionController ex
 				const { drawings } = command.params;
 				unitId = drawings === null || drawings === void 0 || (_drawings$ = drawings[0]) === null || _drawings$ === void 0 ? void 0 : _drawings$.unitId;
 				subUnitId = drawings === null || drawings === void 0 || (_drawings$2 = drawings[0]) === null || _drawings$2 === void 0 ? void 0 : _drawings$2.subUnitId;
+			} else if (command.id === _univerjs_sheets_drawing.SetSheetDrawingPlacementCommand.id) {
+				const target = getPlacementCommandTarget(command.params);
+				unitId = target.unitId;
+				subUnitId = target.subUnitId;
 			} else if (command.id === _univerjs_sheets_drawing.SetDrawingArrangeCommand.id) {
 				const params = command.params;
 				unitId = params.unitId;
@@ -4818,16 +4831,23 @@ SheetDrawingPermissionController = __decorate([
 	__decorateParam(6, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetPermissionCheckController)),
 	__decorateParam(7, (0, _univerjs_core.Inject)(_univerjs_sheets_drawing.ISheetDrawingService))
 ], SheetDrawingPermissionController);
+function getPlacementCommandTarget(params) {
+	if (!params) return {};
+	return {
+		unitId: "unitId" in params && typeof params.unitId === "string" ? params.unitId : void 0,
+		subUnitId: "subUnitId" in params && typeof params.subUnitId === "string" ? params.subUnitId : void 0
+	};
+}
 
 //#endregion
 //#region src/views/PrintingFloatDom.tsx
 function createPrintingFloatDom(info, scene, skeleton, worksheet) {
 	const { width, height, angle, left, top } = info.transform;
 	const offsetBound = transformBound2DOMBound({
-		left: left !== null && left !== void 0 ? left : 0,
-		right: (left !== null && left !== void 0 ? left : 0) + (width !== null && width !== void 0 ? width : 0),
-		top: top !== null && top !== void 0 ? top : 0,
-		bottom: (top !== null && top !== void 0 ? top : 0) + (height !== null && height !== void 0 ? height : 0)
+		left: left ?? 0,
+		right: (left ?? 0) + (width ?? 0),
+		top: top ?? 0,
+		bottom: (top ?? 0) + (height ?? 0)
 	}, scene, skeleton, worksheet, void 0, true);
 	const { scaleX, scaleY } = scene.getAncestorScale();
 	const domPos = {
@@ -5194,11 +5214,13 @@ const DeleteDrawingsShortcutItem = {
 * limitations under the License.
 */
 let SheetDrawingUIController = class SheetDrawingUIController extends _univerjs_core.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() {}
@@ -5230,17 +5252,27 @@ let SheetDrawingUIController = class SheetDrawingUIController extends _univerjs_
 			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 === _univerjs_core.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, _univerjs_ui.IMenuManagerService),
 	__decorateParam(1, _univerjs_core.ICommandService),
-	__decorateParam(2, _univerjs_ui.IShortcutService)
+	__decorateParam(2, _univerjs_ui.IShortcutService),
+	__decorateParam(3, _univerjs_drawing.IDrawingManagerService),
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_ui.ISidebarService))
 ], SheetDrawingUIController);
 
 //#endregion
@@ -5329,7 +5361,8 @@ let DrawingPopupMenuController = class DrawingPopupMenuController extends _unive
 			const menus = this._canvasPopManagerService.getFeatureMenu(unitId, subUnitId, drawingId, drawingType);
 			singletonPopupDisposer = this.disposeWithMe(this._canvasPopManagerService.attachPopupToObject(object, {
 				componentKey: _univerjs_drawing_ui.COMPONENT_IMAGE_POPUP_MENU,
-				direction: "horizontal",
+				constrainToCanvas: true,
+				direction: this._localeService.getDirection() === "rtl" ? "left" : "horizontal",
 				offset: [2, 0],
 				extraProps: { menuItems: menus || this._getImageMenuItems(unitId, subUnitId, drawingId, drawingType) }
 			}));
@@ -5623,7 +5656,7 @@ _defineProperty(UniverSheetsDrawingUIPlugin, "pluginName", "SHEET_IMAGE_UI_PLUGI
 _defineProperty(UniverSheetsDrawingUIPlugin, "packageName", name);
 _defineProperty(UniverSheetsDrawingUIPlugin, "version", version);
 UniverSheetsDrawingUIPlugin = __decorate([
-	(0, _univerjs_core.DependentOn)(_univerjs_drawing.UniverDrawingPlugin, _univerjs_engine_render.UniverRenderEnginePlugin, _univerjs_docs_drawing.UniverDocsDrawingPlugin, _univerjs_sheets.UniverSheetsPlugin, _univerjs_ui.UniverUIPlugin, _univerjs_sheets_drawing.UniverSheetsDrawingPlugin, _univerjs_drawing_ui.UniverDrawingUIPlugin, _univerjs_sheets_ui.UniverSheetsUIPlugin),
+	(0, _univerjs_core.DependentOn)(_univerjs_drawing.UniverDrawingPlugin, _univerjs_engine_render.UniverRenderEnginePlugin, _univerjs_docs_drawing.UniverDocsDrawingPlugin, _univerjs_sheets.UniverSheetsPlugin, _univerjs_sheets_drawing.UniverSheetsDrawingPlugin, _univerjs_drawing_ui.UniverDrawingUIPlugin, _univerjs_sheets_ui.UniverSheetsUIPlugin),
 	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
 	__decorateParam(2, _univerjs_engine_render.IRenderManagerService),
 	__decorateParam(3, _univerjs_core.IConfigService)