@univerjs/sheets-drawing-ui 1.1.0 → 1.3.0

package/lib/cjs/index.js

@@ -650,7 +650,7 @@ let SheetDrawingUpdateController = class SheetDrawingUpdateController extends _u
 		if (width > _univerjs_drawing.DRAWING_IMAGE_WIDTH_LIMIT || height > _univerjs_drawing.DRAWING_IMAGE_HEIGHT_LIMIT) {
 			const scaleWidth = _univerjs_drawing.DRAWING_IMAGE_WIDTH_LIMIT / width;
 			const scaleHeight = _univerjs_drawing.DRAWING_IMAGE_HEIGHT_LIMIT / height;
-			scale = Math.max(scaleWidth, scaleHeight);
+			scale = Math.min(scaleWidth, scaleHeight);
 		}
 		const sheetSkeletonParam = this._sheetSkeletonService.getSkeletonParam(unitId, subUnitId);
 		if (!sheetSkeletonParam) return;
@@ -3728,7 +3728,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-drawing-ui";
-var version = "1.1.0";
+var version = "1.3.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -4232,7 +4232,7 @@ function SheetImageTransparencySlider(props) {
 					className: "univer-relative univer-h-1.5 univer-bg-gray-200 dark:!univer-bg-gray-600",
 					onPointerDown: handlePointerDown,
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: (0, _univerjs_design.clsx)("univer-bg-primary-500/60 univer-absolute univer-top-0 univer-h-full univer-rounded-full", isRtl ? "univer-right-0" : "univer-left-0"),
+						className: (0, _univerjs_design.clsx)("univer-absolute univer-top-0 univer-h-full univer-rounded-full univer-bg-primary-500", isRtl ? "univer-right-0" : "univer-left-0"),
 						style: { width: `${sliderOffset}%` }
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						className: (0, _univerjs_design.clsx)("univer-absolute univer-top-1/2 univer-size-3.5 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-rounded-full univer-bg-gray-0 univer-shadow-sm focus-visible:univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-primary-100 dark:!univer-bg-gray-800", _univerjs_design.borderClassName, {
@@ -4274,6 +4274,12 @@ function SheetImageTransparencyInput(props) {
 	(0, react.useEffect)(() => {
 		if (!isEditingRef.current) setInputValue(`${value}%`);
 	}, [value]);
+	function parseTransparency(rawValue) {
+		const normalizedValue = rawValue.trim().replace(/%$/, "").trim();
+		if (normalizedValue === "") return null;
+		const parsedValue = Number(normalizedValue);
+		return Number.isFinite(parsedValue) ? normalizeTransparency$1(parsedValue) : null;
+	}
 	function emitValue(nextValue) {
 		const normalizedValue = normalizeTransparency$1(nextValue);
 		onChange === null || onChange === void 0 || onChange(normalizedValue);
@@ -4353,12 +4359,6 @@ function SheetImageTransparencyInput(props) {
 		})]
 	});
 }
-function parseTransparency(rawValue) {
-	const normalizedValue = rawValue.trim().replace(/%$/, "").trim();
-	if (normalizedValue === "") return null;
-	const parsedValue = Number(normalizedValue);
-	return Number.isFinite(parsedValue) ? normalizeTransparency$1(parsedValue) : null;
-}
 function normalizeTransparency$1(value) {
 	return Math.min(Math.max(Math.round(value), MIN_TRANSPARENCY), MAX_TRANSPARENCY);
 }
@@ -4606,12 +4606,13 @@ SheetCellImageHoverRenderController = __decorate([
 //#endregion
 //#region src/controllers/render-controllers/sheet-drawing.render-controller.ts
 let SheetsDrawingRenderController = class SheetsDrawingRenderController extends _univerjs_core.Disposable {
-	constructor(_context, _sheetDrawingService, _drawingManagerService, _sheetSkeletonService) {
+	constructor(_context, _sheetDrawingService, _drawingManagerService, _sheetSkeletonService, _logService) {
 		super();
 		this._context = _context;
 		this._sheetDrawingService = _sheetDrawingService;
 		this._drawingManagerService = _drawingManagerService;
 		this._sheetSkeletonService = _sheetSkeletonService;
+		this._logService = _logService;
 		this._init();
 	}
 	_init() {
@@ -4620,22 +4621,38 @@ let SheetsDrawingRenderController = class SheetsDrawingRenderController extends
 	_drawingInitializeListener() {
 		this._sheetDrawingService.initializeNotification(this._context.unitId);
 		const data = this._sheetDrawingService.getDrawingDataForUnit(this._context.unitId);
+		const refreshedDrawings = [];
 		for (const subUnit in data) {
 			const subUnitData = data[subUnit];
 			for (const drawingId in subUnitData.data) {
 				const drawingData = subUnitData.data[drawingId];
 				const { unitId, subUnitId } = drawingData;
 				const skeletonParam = this._sheetSkeletonService.getSkeletonParam(unitId, subUnitId);
-				if (skeletonParam && drawingData.sheetTransform && !drawingData.groupId && drawingData.anchorType !== _univerjs_sheets_drawing.SheetDrawingAnchorType.None) {
-					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;
+				if (skeletonParam && drawingData.sheetTransform && !drawingData.groupId && drawingData.anchorType !== _univerjs_sheets_drawing.SheetDrawingAnchorType.None) try {
+					if (drawingData.drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_GROUP) {
+						const transform = (0, _univerjs_sheets_drawing.drawingPositionToTransform)(drawingData.sheetTransform, skeletonParam);
+						refreshedDrawings.push({
+							...drawingData,
+							transform: transform && {
+								...transform,
+								left: (transform.left ?? 0) - skeletonParam.skeleton.rowHeaderWidthAndMarginLeft,
+								top: (transform.top ?? 0) - skeletonParam.skeleton.columnHeaderHeightAndMarginTop
+							}
+						});
+					} else refreshedDrawings.push((0, _univerjs_sheets_drawing.refreshSheetDrawingPlacement)(drawingData, skeletonParam.skeleton));
+				} catch (error) {
+					this._logService.warn("[SheetsDrawingRenderController]", "Skipping drawing placement initialization", {
+						unitId,
+						subUnitId,
+						drawingId,
+						transform: drawingData.transform,
+						sheetTransform: drawingData.sheetTransform,
+						error
+					});
 				}
 			}
 		}
+		this._sheetDrawingService.refreshTransform(refreshedDrawings);
 		this._drawingManagerService.registerDrawingData(this._context.unitId, this._sheetDrawingService.getDrawingDataForUnit(this._context.unitId));
 		this._drawingManagerService.initializeNotification(this._context.unitId);
 	}
@@ -4643,7 +4660,8 @@ let SheetsDrawingRenderController = class SheetsDrawingRenderController extends
 SheetsDrawingRenderController = __decorate([
 	__decorateParam(1, _univerjs_sheets_drawing.ISheetDrawingService),
 	__decorateParam(2, _univerjs_drawing.IDrawingManagerService),
-	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetSkeletonService))
+	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetSkeletonService)),
+	__decorateParam(4, _univerjs_core.ILogService)
 ], SheetsDrawingRenderController);
 
 //#endregion
@@ -4977,8 +4995,7 @@ let SheetDrawingActiveRenderController = class SheetDrawingActiveRenderControlle
 			var _subUnitMap$showSubun;
 			const sheetSkeletonParam = this._sheetSkeletonService.getSkeletonParam(showUnitId, showSubunitId);
 			const drawingData = ((_subUnitMap$showSubun = (this._drawingManagerService.drawingManagerData[showUnitId] ?? {})[showSubunitId]) === null || _subUnitMap$showSubun === void 0 ? void 0 : _subUnitMap$showSubun.data) ?? {};
-			const { successDrawings, refreshedDrawings, failures } = prepareSheetDrawings(Object.values(drawingData), sheetSkeletonParam === null || sheetSkeletonParam === void 0 ? void 0 : sheetSkeletonParam.skeleton);
-			const removeDrawings = failures.map(({ drawingId }) => drawingData[drawingId]);
+			const { successDrawings, refreshedDrawings, removeDrawings, failures } = prepareSheetDrawings(Object.values(drawingData), sheetSkeletonParam === null || sheetSkeletonParam === void 0 ? void 0 : sheetSkeletonParam.skeleton);
 			this._sheetDrawingService.refreshTransform(refreshedDrawings);
 			this._drawingManagerService.refreshTransform(refreshedDrawings);
 			this._sheetDrawingService.removeNotification(removeDrawings);
@@ -5003,11 +5020,19 @@ SheetDrawingActiveRenderController = __decorate([
 function prepareSheetDrawings(drawings, skeleton) {
 	const successDrawings = [];
 	const refreshedDrawings = [];
+	const removeDrawings = [];
 	const failures = [];
 	for (const drawing of drawings) {
 		if (skeleton && drawing.sheetTransform && drawing.anchorType !== _univerjs_sheets_drawing.SheetDrawingAnchorType.None) try {
-			refreshedDrawings.push((0, _univerjs_sheets_drawing.applySheetDrawingPlacement)(drawing, (0, _univerjs_sheets_drawing.getSheetDrawingPlacement)(drawing), skeleton));
+			var _refreshed$transform, _refreshed$transform2;
+			const refreshed = (0, _univerjs_sheets_drawing.refreshSheetDrawingPlacement)(drawing, skeleton);
+			refreshedDrawings.push(refreshed);
+			if ((drawing.drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_IMAGE || drawing.drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_DOM) && (((_refreshed$transform = refreshed.transform) === null || _refreshed$transform === void 0 ? void 0 : _refreshed$transform.width) === 0 || ((_refreshed$transform2 = refreshed.transform) === null || _refreshed$transform2 === void 0 ? void 0 : _refreshed$transform2.height) === 0)) {
+				removeDrawings.push(drawing);
+				continue;
+			}
 		} catch (error) {
+			removeDrawings.push(drawing);
 			failures.push({
 				drawingId: drawing.drawingId,
 				drawingType: drawing.drawingType,
@@ -5021,6 +5046,7 @@ function prepareSheetDrawings(drawings, skeleton) {
 	return {
 		successDrawings,
 		refreshedDrawings,
+		removeDrawings,
 		failures
 	};
 }

package/lib/es/index.js

@@ -1,5 +1,5 @@
 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, ILogService, IPermissionService, IURLImageService, IUndoRedoService, IUniverInstanceService, ImageCacheMap, ImageSourceType, ImageUploadStatusType, Inject, Injector, InterceptorEffectEnum, LifecycleService, LifecycleStages, LocaleService, ObjectMatrix, Optional, Plugin, PositionedObjectLayoutType, RxDisposable, Tools, UniverInstanceType, UserManagerService, WrapTextType, createDocumentModelWithStyle, createIdentifier, fromEventSubject, generateRandomId, merge, mergeOverrideWithDependencies, registerDependencies, sequenceExecute, toDisposable, touchDependencies } from "@univerjs/core";
-import { ClearSheetDrawingTransformerOperation, DrawingApplyType, ISheetDrawingService, InsertSheetDrawingCommand, RemoveSheetDrawingCommand, SetDrawingApplyMutation, SetDrawingArrangeCommand, SetSheetDrawingCommand, SetSheetDrawingPlacementCommand, SetWorksheetBackgroundImageCommand, SetWorksheetBackgroundImageMutation, SheetDrawingAnchorType, UniverSheetsDrawingPlugin, applySheetDrawingPlacement, drawingPositionToTransform, getSheetDrawingPlacement, transformToAxisAlignPosition, transformToDrawingPosition } from "@univerjs/sheets-drawing";
+import { ClearSheetDrawingTransformerOperation, DrawingApplyType, ISheetDrawingService, InsertSheetDrawingCommand, RemoveSheetDrawingCommand, SetDrawingApplyMutation, SetDrawingArrangeCommand, SetSheetDrawingCommand, SetSheetDrawingPlacementCommand, SetWorksheetBackgroundImageCommand, SetWorksheetBackgroundImageMutation, SheetDrawingAnchorType, UniverSheetsDrawingPlugin, drawingPositionToTransform, getSheetDrawingPlacement, refreshSheetDrawingPlacement, transformToAxisAlignPosition, transformToDrawingPosition } from "@univerjs/sheets-drawing";
 import { CURSOR_TYPE, DEFAULT_TRANSFORMER_CONFIG, DRAWING_OBJECT_LAYER_INDEX, IRenderManagerService, Image, ObjectType, Rect, SHEET_EXTENSION_TYPE, SHEET_VIEWPORT_KEY, SheetExtension, UniverRenderEnginePlugin, Vector2, getCurrentTypeOfRenderer, getGroupState, transformObjectOutOfGroup } from "@univerjs/engine-render";
 import { Button, Checkbox, CheckboxGroup, DropdownMenu, FormLayout, Input, MessageType, MobileSelect, Radio, RadioGroup, Select, borderClassName, clsx, render, unmount } from "@univerjs/design";
 import { buildDocTransform, docDrawingPositionToTransform } from "@univerjs/docs";
@@ -649,7 +649,7 @@ let SheetDrawingUpdateController = class SheetDrawingUpdateController extends Di
 		if (width > DRAWING_IMAGE_WIDTH_LIMIT || height > DRAWING_IMAGE_HEIGHT_LIMIT) {
 			const scaleWidth = DRAWING_IMAGE_WIDTH_LIMIT / width;
 			const scaleHeight = DRAWING_IMAGE_HEIGHT_LIMIT / height;
-			scale = Math.max(scaleWidth, scaleHeight);
+			scale = Math.min(scaleWidth, scaleHeight);
 		}
 		const sheetSkeletonParam = this._sheetSkeletonService.getSkeletonParam(unitId, subUnitId);
 		if (!sheetSkeletonParam) return;
@@ -3727,7 +3727,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-drawing-ui";
-var version = "1.1.0";
+var version = "1.3.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -4231,7 +4231,7 @@ function SheetImageTransparencySlider(props) {
 					className: "univer-relative univer-h-1.5 univer-bg-gray-200 dark:!univer-bg-gray-600",
 					onPointerDown: handlePointerDown,
 					children: [/* @__PURE__ */ jsx("div", {
-						className: clsx("univer-bg-primary-500/60 univer-absolute univer-top-0 univer-h-full univer-rounded-full", isRtl ? "univer-right-0" : "univer-left-0"),
+						className: clsx("univer-absolute univer-top-0 univer-h-full univer-rounded-full univer-bg-primary-500", isRtl ? "univer-right-0" : "univer-left-0"),
 						style: { width: `${sliderOffset}%` }
 					}), /* @__PURE__ */ jsx("button", {
 						className: clsx("univer-absolute univer-top-1/2 univer-size-3.5 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-rounded-full univer-bg-gray-0 univer-shadow-sm focus-visible:univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-primary-100 dark:!univer-bg-gray-800", borderClassName, {
@@ -4273,6 +4273,12 @@ function SheetImageTransparencyInput(props) {
 	useEffect(() => {
 		if (!isEditingRef.current) setInputValue(`${value}%`);
 	}, [value]);
+	function parseTransparency(rawValue) {
+		const normalizedValue = rawValue.trim().replace(/%$/, "").trim();
+		if (normalizedValue === "") return null;
+		const parsedValue = Number(normalizedValue);
+		return Number.isFinite(parsedValue) ? normalizeTransparency$1(parsedValue) : null;
+	}
 	function emitValue(nextValue) {
 		const normalizedValue = normalizeTransparency$1(nextValue);
 		onChange === null || onChange === void 0 || onChange(normalizedValue);
@@ -4352,12 +4358,6 @@ function SheetImageTransparencyInput(props) {
 		})]
 	});
 }
-function parseTransparency(rawValue) {
-	const normalizedValue = rawValue.trim().replace(/%$/, "").trim();
-	if (normalizedValue === "") return null;
-	const parsedValue = Number(normalizedValue);
-	return Number.isFinite(parsedValue) ? normalizeTransparency$1(parsedValue) : null;
-}
 function normalizeTransparency$1(value) {
 	return Math.min(Math.max(Math.round(value), MIN_TRANSPARENCY), MAX_TRANSPARENCY);
 }
@@ -4605,12 +4605,13 @@ SheetCellImageHoverRenderController = __decorate([
 //#endregion
 //#region src/controllers/render-controllers/sheet-drawing.render-controller.ts
 let SheetsDrawingRenderController = class SheetsDrawingRenderController extends Disposable {
-	constructor(_context, _sheetDrawingService, _drawingManagerService, _sheetSkeletonService) {
+	constructor(_context, _sheetDrawingService, _drawingManagerService, _sheetSkeletonService, _logService) {
 		super();
 		this._context = _context;
 		this._sheetDrawingService = _sheetDrawingService;
 		this._drawingManagerService = _drawingManagerService;
 		this._sheetSkeletonService = _sheetSkeletonService;
+		this._logService = _logService;
 		this._init();
 	}
 	_init() {
@@ -4619,22 +4620,38 @@ let SheetsDrawingRenderController = class SheetsDrawingRenderController extends
 	_drawingInitializeListener() {
 		this._sheetDrawingService.initializeNotification(this._context.unitId);
 		const data = this._sheetDrawingService.getDrawingDataForUnit(this._context.unitId);
+		const refreshedDrawings = [];
 		for (const subUnit in data) {
 			const subUnitData = data[subUnit];
 			for (const drawingId in subUnitData.data) {
 				const drawingData = subUnitData.data[drawingId];
 				const { unitId, subUnitId } = drawingData;
 				const skeletonParam = this._sheetSkeletonService.getSkeletonParam(unitId, subUnitId);
-				if (skeletonParam && drawingData.sheetTransform && !drawingData.groupId && drawingData.anchorType !== SheetDrawingAnchorType.None) {
-					const transform = drawingPositionToTransform(drawingData.sheetTransform, skeletonParam);
-					drawingData.transform = transform && drawingData.drawingType === DrawingTypeEnum.DRAWING_GROUP ? {
-						...transform,
-						left: (transform.left ?? 0) - skeletonParam.skeleton.rowHeaderWidthAndMarginLeft,
-						top: (transform.top ?? 0) - skeletonParam.skeleton.columnHeaderHeightAndMarginTop
-					} : transform;
+				if (skeletonParam && drawingData.sheetTransform && !drawingData.groupId && drawingData.anchorType !== SheetDrawingAnchorType.None) try {
+					if (drawingData.drawingType === DrawingTypeEnum.DRAWING_GROUP) {
+						const transform = drawingPositionToTransform(drawingData.sheetTransform, skeletonParam);
+						refreshedDrawings.push({
+							...drawingData,
+							transform: transform && {
+								...transform,
+								left: (transform.left ?? 0) - skeletonParam.skeleton.rowHeaderWidthAndMarginLeft,
+								top: (transform.top ?? 0) - skeletonParam.skeleton.columnHeaderHeightAndMarginTop
+							}
+						});
+					} else refreshedDrawings.push(refreshSheetDrawingPlacement(drawingData, skeletonParam.skeleton));
+				} catch (error) {
+					this._logService.warn("[SheetsDrawingRenderController]", "Skipping drawing placement initialization", {
+						unitId,
+						subUnitId,
+						drawingId,
+						transform: drawingData.transform,
+						sheetTransform: drawingData.sheetTransform,
+						error
+					});
 				}
 			}
 		}
+		this._sheetDrawingService.refreshTransform(refreshedDrawings);
 		this._drawingManagerService.registerDrawingData(this._context.unitId, this._sheetDrawingService.getDrawingDataForUnit(this._context.unitId));
 		this._drawingManagerService.initializeNotification(this._context.unitId);
 	}
@@ -4642,7 +4659,8 @@ let SheetsDrawingRenderController = class SheetsDrawingRenderController extends
 SheetsDrawingRenderController = __decorate([
 	__decorateParam(1, ISheetDrawingService),
 	__decorateParam(2, IDrawingManagerService),
-	__decorateParam(3, Inject(SheetSkeletonService))
+	__decorateParam(3, Inject(SheetSkeletonService)),
+	__decorateParam(4, ILogService)
 ], SheetsDrawingRenderController);
 
 //#endregion
@@ -4976,8 +4994,7 @@ let SheetDrawingActiveRenderController = class SheetDrawingActiveRenderControlle
 			var _subUnitMap$showSubun;
 			const sheetSkeletonParam = this._sheetSkeletonService.getSkeletonParam(showUnitId, showSubunitId);
 			const drawingData = ((_subUnitMap$showSubun = (this._drawingManagerService.drawingManagerData[showUnitId] ?? {})[showSubunitId]) === null || _subUnitMap$showSubun === void 0 ? void 0 : _subUnitMap$showSubun.data) ?? {};
-			const { successDrawings, refreshedDrawings, failures } = prepareSheetDrawings(Object.values(drawingData), sheetSkeletonParam === null || sheetSkeletonParam === void 0 ? void 0 : sheetSkeletonParam.skeleton);
-			const removeDrawings = failures.map(({ drawingId }) => drawingData[drawingId]);
+			const { successDrawings, refreshedDrawings, removeDrawings, failures } = prepareSheetDrawings(Object.values(drawingData), sheetSkeletonParam === null || sheetSkeletonParam === void 0 ? void 0 : sheetSkeletonParam.skeleton);
 			this._sheetDrawingService.refreshTransform(refreshedDrawings);
 			this._drawingManagerService.refreshTransform(refreshedDrawings);
 			this._sheetDrawingService.removeNotification(removeDrawings);
@@ -5002,11 +5019,19 @@ SheetDrawingActiveRenderController = __decorate([
 function prepareSheetDrawings(drawings, skeleton) {
 	const successDrawings = [];
 	const refreshedDrawings = [];
+	const removeDrawings = [];
 	const failures = [];
 	for (const drawing of drawings) {
 		if (skeleton && drawing.sheetTransform && drawing.anchorType !== SheetDrawingAnchorType.None) try {
-			refreshedDrawings.push(applySheetDrawingPlacement(drawing, getSheetDrawingPlacement(drawing), skeleton));
+			var _refreshed$transform, _refreshed$transform2;
+			const refreshed = refreshSheetDrawingPlacement(drawing, skeleton);
+			refreshedDrawings.push(refreshed);
+			if ((drawing.drawingType === DrawingTypeEnum.DRAWING_IMAGE || drawing.drawingType === DrawingTypeEnum.DRAWING_DOM) && (((_refreshed$transform = refreshed.transform) === null || _refreshed$transform === void 0 ? void 0 : _refreshed$transform.width) === 0 || ((_refreshed$transform2 = refreshed.transform) === null || _refreshed$transform2 === void 0 ? void 0 : _refreshed$transform2.height) === 0)) {
+				removeDrawings.push(drawing);
+				continue;
+			}
 		} catch (error) {
+			removeDrawings.push(drawing);
 			failures.push({
 				drawingId: drawing.drawingId,
 				drawingType: drawing.drawingType,
@@ -5020,6 +5045,7 @@ function prepareSheetDrawings(drawings, skeleton) {
 	return {
 		successDrawings,
 		refreshedDrawings,
+		removeDrawings,
 		failures
 	};
 }

package/lib/index.css

@@ -179,6 +179,10 @@
   background-color: var(--univer-gray-200);
 }
 
+.univer-bg-primary-500 {
+  background-color: var(--univer-primary-500);
+}
+
 .univer-bg-transparent {
   background-color: #0000;
 }

package/lib/index.js

@@ -1,5 +1,5 @@
 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, ILogService, IPermissionService, IURLImageService, IUndoRedoService, IUniverInstanceService, ImageCacheMap, ImageSourceType, ImageUploadStatusType, Inject, Injector, InterceptorEffectEnum, LifecycleService, LifecycleStages, LocaleService, ObjectMatrix, Optional, Plugin, PositionedObjectLayoutType, RxDisposable, Tools, UniverInstanceType, UserManagerService, WrapTextType, createDocumentModelWithStyle, createIdentifier, fromEventSubject, generateRandomId, merge, mergeOverrideWithDependencies, registerDependencies, sequenceExecute, toDisposable, touchDependencies } from "@univerjs/core";
-import { ClearSheetDrawingTransformerOperation, DrawingApplyType, ISheetDrawingService, InsertSheetDrawingCommand, RemoveSheetDrawingCommand, SetDrawingApplyMutation, SetDrawingArrangeCommand, SetSheetDrawingCommand, SetSheetDrawingPlacementCommand, SetWorksheetBackgroundImageCommand, SetWorksheetBackgroundImageMutation, SheetDrawingAnchorType, UniverSheetsDrawingPlugin, applySheetDrawingPlacement, drawingPositionToTransform, getSheetDrawingPlacement, transformToAxisAlignPosition, transformToDrawingPosition } from "@univerjs/sheets-drawing";
+import { ClearSheetDrawingTransformerOperation, DrawingApplyType, ISheetDrawingService, InsertSheetDrawingCommand, RemoveSheetDrawingCommand, SetDrawingApplyMutation, SetDrawingArrangeCommand, SetSheetDrawingCommand, SetSheetDrawingPlacementCommand, SetWorksheetBackgroundImageCommand, SetWorksheetBackgroundImageMutation, SheetDrawingAnchorType, UniverSheetsDrawingPlugin, drawingPositionToTransform, getSheetDrawingPlacement, refreshSheetDrawingPlacement, transformToAxisAlignPosition, transformToDrawingPosition } from "@univerjs/sheets-drawing";
 import { CURSOR_TYPE, DEFAULT_TRANSFORMER_CONFIG, DRAWING_OBJECT_LAYER_INDEX, IRenderManagerService, Image, ObjectType, Rect, SHEET_EXTENSION_TYPE, SHEET_VIEWPORT_KEY, SheetExtension, UniverRenderEnginePlugin, Vector2, getCurrentTypeOfRenderer, getGroupState, transformObjectOutOfGroup } from "@univerjs/engine-render";
 import { Button, Checkbox, CheckboxGroup, DropdownMenu, FormLayout, Input, MessageType, MobileSelect, Radio, RadioGroup, Select, borderClassName, clsx, render, unmount } from "@univerjs/design";
 import { buildDocTransform, docDrawingPositionToTransform } from "@univerjs/docs";
@@ -649,7 +649,7 @@ let SheetDrawingUpdateController = class SheetDrawingUpdateController extends Di
 		if (width > DRAWING_IMAGE_WIDTH_LIMIT || height > DRAWING_IMAGE_HEIGHT_LIMIT) {
 			const scaleWidth = DRAWING_IMAGE_WIDTH_LIMIT / width;
 			const scaleHeight = DRAWING_IMAGE_HEIGHT_LIMIT / height;
-			scale = Math.max(scaleWidth, scaleHeight);
+			scale = Math.min(scaleWidth, scaleHeight);
 		}
 		const sheetSkeletonParam = this._sheetSkeletonService.getSkeletonParam(unitId, subUnitId);
 		if (!sheetSkeletonParam) return;
@@ -3727,7 +3727,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-drawing-ui";
-var version = "1.1.0";
+var version = "1.3.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -4231,7 +4231,7 @@ function SheetImageTransparencySlider(props) {
 					className: "univer-relative univer-h-1.5 univer-bg-gray-200 dark:!univer-bg-gray-600",
 					onPointerDown: handlePointerDown,
 					children: [/* @__PURE__ */ jsx("div", {
-						className: clsx("univer-bg-primary-500/60 univer-absolute univer-top-0 univer-h-full univer-rounded-full", isRtl ? "univer-right-0" : "univer-left-0"),
+						className: clsx("univer-absolute univer-top-0 univer-h-full univer-rounded-full univer-bg-primary-500", isRtl ? "univer-right-0" : "univer-left-0"),
 						style: { width: `${sliderOffset}%` }
 					}), /* @__PURE__ */ jsx("button", {
 						className: clsx("univer-absolute univer-top-1/2 univer-size-3.5 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-rounded-full univer-bg-gray-0 univer-shadow-sm focus-visible:univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-primary-100 dark:!univer-bg-gray-800", borderClassName, {
@@ -4273,6 +4273,12 @@ function SheetImageTransparencyInput(props) {
 	useEffect(() => {
 		if (!isEditingRef.current) setInputValue(`${value}%`);
 	}, [value]);
+	function parseTransparency(rawValue) {
+		const normalizedValue = rawValue.trim().replace(/%$/, "").trim();
+		if (normalizedValue === "") return null;
+		const parsedValue = Number(normalizedValue);
+		return Number.isFinite(parsedValue) ? normalizeTransparency$1(parsedValue) : null;
+	}
 	function emitValue(nextValue) {
 		const normalizedValue = normalizeTransparency$1(nextValue);
 		onChange === null || onChange === void 0 || onChange(normalizedValue);
@@ -4352,12 +4358,6 @@ function SheetImageTransparencyInput(props) {
 		})]
 	});
 }
-function parseTransparency(rawValue) {
-	const normalizedValue = rawValue.trim().replace(/%$/, "").trim();
-	if (normalizedValue === "") return null;
-	const parsedValue = Number(normalizedValue);
-	return Number.isFinite(parsedValue) ? normalizeTransparency$1(parsedValue) : null;
-}
 function normalizeTransparency$1(value) {
 	return Math.min(Math.max(Math.round(value), MIN_TRANSPARENCY), MAX_TRANSPARENCY);
 }
@@ -4605,12 +4605,13 @@ SheetCellImageHoverRenderController = __decorate([
 //#endregion
 //#region src/controllers/render-controllers/sheet-drawing.render-controller.ts
 let SheetsDrawingRenderController = class SheetsDrawingRenderController extends Disposable {
-	constructor(_context, _sheetDrawingService, _drawingManagerService, _sheetSkeletonService) {
+	constructor(_context, _sheetDrawingService, _drawingManagerService, _sheetSkeletonService, _logService) {
 		super();
 		this._context = _context;
 		this._sheetDrawingService = _sheetDrawingService;
 		this._drawingManagerService = _drawingManagerService;
 		this._sheetSkeletonService = _sheetSkeletonService;
+		this._logService = _logService;
 		this._init();
 	}
 	_init() {
@@ -4619,22 +4620,38 @@ let SheetsDrawingRenderController = class SheetsDrawingRenderController extends
 	_drawingInitializeListener() {
 		this._sheetDrawingService.initializeNotification(this._context.unitId);
 		const data = this._sheetDrawingService.getDrawingDataForUnit(this._context.unitId);
+		const refreshedDrawings = [];
 		for (const subUnit in data) {
 			const subUnitData = data[subUnit];
 			for (const drawingId in subUnitData.data) {
 				const drawingData = subUnitData.data[drawingId];
 				const { unitId, subUnitId } = drawingData;
 				const skeletonParam = this._sheetSkeletonService.getSkeletonParam(unitId, subUnitId);
-				if (skeletonParam && drawingData.sheetTransform && !drawingData.groupId && drawingData.anchorType !== SheetDrawingAnchorType.None) {
-					const transform = drawingPositionToTransform(drawingData.sheetTransform, skeletonParam);
-					drawingData.transform = transform && drawingData.drawingType === DrawingTypeEnum.DRAWING_GROUP ? {
-						...transform,
-						left: (transform.left ?? 0) - skeletonParam.skeleton.rowHeaderWidthAndMarginLeft,
-						top: (transform.top ?? 0) - skeletonParam.skeleton.columnHeaderHeightAndMarginTop
-					} : transform;
+				if (skeletonParam && drawingData.sheetTransform && !drawingData.groupId && drawingData.anchorType !== SheetDrawingAnchorType.None) try {
+					if (drawingData.drawingType === DrawingTypeEnum.DRAWING_GROUP) {
+						const transform = drawingPositionToTransform(drawingData.sheetTransform, skeletonParam);
+						refreshedDrawings.push({
+							...drawingData,
+							transform: transform && {
+								...transform,
+								left: (transform.left ?? 0) - skeletonParam.skeleton.rowHeaderWidthAndMarginLeft,
+								top: (transform.top ?? 0) - skeletonParam.skeleton.columnHeaderHeightAndMarginTop
+							}
+						});
+					} else refreshedDrawings.push(refreshSheetDrawingPlacement(drawingData, skeletonParam.skeleton));
+				} catch (error) {
+					this._logService.warn("[SheetsDrawingRenderController]", "Skipping drawing placement initialization", {
+						unitId,
+						subUnitId,
+						drawingId,
+						transform: drawingData.transform,
+						sheetTransform: drawingData.sheetTransform,
+						error
+					});
 				}
 			}
 		}
+		this._sheetDrawingService.refreshTransform(refreshedDrawings);
 		this._drawingManagerService.registerDrawingData(this._context.unitId, this._sheetDrawingService.getDrawingDataForUnit(this._context.unitId));
 		this._drawingManagerService.initializeNotification(this._context.unitId);
 	}
@@ -4642,7 +4659,8 @@ let SheetsDrawingRenderController = class SheetsDrawingRenderController extends
 SheetsDrawingRenderController = __decorate([
 	__decorateParam(1, ISheetDrawingService),
 	__decorateParam(2, IDrawingManagerService),
-	__decorateParam(3, Inject(SheetSkeletonService))
+	__decorateParam(3, Inject(SheetSkeletonService)),
+	__decorateParam(4, ILogService)
 ], SheetsDrawingRenderController);
 
 //#endregion
@@ -4976,8 +4994,7 @@ let SheetDrawingActiveRenderController = class SheetDrawingActiveRenderControlle
 			var _subUnitMap$showSubun;
 			const sheetSkeletonParam = this._sheetSkeletonService.getSkeletonParam(showUnitId, showSubunitId);
 			const drawingData = ((_subUnitMap$showSubun = (this._drawingManagerService.drawingManagerData[showUnitId] ?? {})[showSubunitId]) === null || _subUnitMap$showSubun === void 0 ? void 0 : _subUnitMap$showSubun.data) ?? {};
-			const { successDrawings, refreshedDrawings, failures } = prepareSheetDrawings(Object.values(drawingData), sheetSkeletonParam === null || sheetSkeletonParam === void 0 ? void 0 : sheetSkeletonParam.skeleton);
-			const removeDrawings = failures.map(({ drawingId }) => drawingData[drawingId]);
+			const { successDrawings, refreshedDrawings, removeDrawings, failures } = prepareSheetDrawings(Object.values(drawingData), sheetSkeletonParam === null || sheetSkeletonParam === void 0 ? void 0 : sheetSkeletonParam.skeleton);
 			this._sheetDrawingService.refreshTransform(refreshedDrawings);
 			this._drawingManagerService.refreshTransform(refreshedDrawings);
 			this._sheetDrawingService.removeNotification(removeDrawings);
@@ -5002,11 +5019,19 @@ SheetDrawingActiveRenderController = __decorate([
 function prepareSheetDrawings(drawings, skeleton) {
 	const successDrawings = [];
 	const refreshedDrawings = [];
+	const removeDrawings = [];
 	const failures = [];
 	for (const drawing of drawings) {
 		if (skeleton && drawing.sheetTransform && drawing.anchorType !== SheetDrawingAnchorType.None) try {
-			refreshedDrawings.push(applySheetDrawingPlacement(drawing, getSheetDrawingPlacement(drawing), skeleton));
+			var _refreshed$transform, _refreshed$transform2;
+			const refreshed = refreshSheetDrawingPlacement(drawing, skeleton);
+			refreshedDrawings.push(refreshed);
+			if ((drawing.drawingType === DrawingTypeEnum.DRAWING_IMAGE || drawing.drawingType === DrawingTypeEnum.DRAWING_DOM) && (((_refreshed$transform = refreshed.transform) === null || _refreshed$transform === void 0 ? void 0 : _refreshed$transform.width) === 0 || ((_refreshed$transform2 = refreshed.transform) === null || _refreshed$transform2 === void 0 ? void 0 : _refreshed$transform2.height) === 0)) {
+				removeDrawings.push(drawing);
+				continue;
+			}
 		} catch (error) {
+			removeDrawings.push(drawing);
 			failures.push({
 				drawingId: drawing.drawingId,
 				drawingType: drawing.drawingType,
@@ -5020,6 +5045,7 @@ function prepareSheetDrawings(drawings, skeleton) {
 	return {
 		successDrawings,
 		refreshedDrawings,
+		removeDrawings,
 		failures
 	};
 }

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import type { IRenderContext, IRenderModule } from '@univerjs/engine-render';
-import { Disposable } from '@univerjs/core';
+import { Disposable, ILogService } from '@univerjs/core';
 import { IDrawingManagerService } from '@univerjs/drawing';
 import { SheetSkeletonService } from '@univerjs/sheets';
 import { ISheetDrawingService } from '@univerjs/sheets-drawing';
@@ -23,7 +23,8 @@ export declare class SheetsDrawingRenderController extends Disposable implements
     private readonly _sheetDrawingService;
     private readonly _drawingManagerService;
     private readonly _sheetSkeletonService;
-    constructor(_context: IRenderContext, _sheetDrawingService: ISheetDrawingService, _drawingManagerService: IDrawingManagerService, _sheetSkeletonService: SheetSkeletonService);
+    private readonly _logService;
+    constructor(_context: IRenderContext, _sheetDrawingService: ISheetDrawingService, _drawingManagerService: IDrawingManagerService, _sheetSkeletonService: SheetSkeletonService, _logService: ILogService);
     private _init;
     private _drawingInitializeListener;
 }