@univerjs/sheets-drawing-ui 1.0.3 → 1.1.0

package/lib/index.js

@@ -1,16 +1,16 @@
-import { BooleanNumber, BuildTextUtils, CommandType, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DependentOn, Direction, Disposable, DisposableCollection, DrawingTypeEnum, FOCUSING_COMMON_DRAWINGS, FOCUSING_FX_BAR_EDITOR, FOCUSING_PANEL_EDITOR, FOCUSING_SHAPE_TEXT_EDITOR, FOCUSING_SHEET, ICommandService, IConfigService, IContextService, IImageIoService, IPermissionService, IURLImageService, IUndoRedoService, IUniverInstanceService, 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, drawingPositionToTransform, getSheetDrawingPlacement, transformToAxisAlignPosition, transformToDrawingPosition } from "@univerjs/sheets-drawing";
+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 { 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, FormLayout, MessageType, MobileSelect, Radio, RadioGroup, Select, clsx, render, unmount } from "@univerjs/design";
+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";
-import { DRAWING_IMAGE_ALLOW_IMAGE_LIST, DRAWING_IMAGE_COUNT_LIMIT, DRAWING_IMAGE_HEIGHT_LIMIT, DRAWING_IMAGE_WIDTH_LIMIT, IDrawingManagerService, SetDrawingSelectedOperation, UniverDrawingPlugin, getDrawingImageAllowSize, getDrawingShapeKeyByDrawingSearch, getImageSize } from "@univerjs/drawing";
+import { DRAWING_IMAGE_ALLOW_IMAGE_LIST, DRAWING_IMAGE_COUNT_LIMIT, DRAWING_IMAGE_HEIGHT_LIMIT, DRAWING_IMAGE_WIDTH_LIMIT, IDrawingManagerService, SetDrawingSelectedOperation, UniverDrawingPlugin, getDrawingImageAllowSize, getDrawingShapeKeyByDrawingSearch, getImageSize, normalizeImageOpacity } from "@univerjs/drawing";
 import { COMMAND_LISTENER_SKELETON_CHANGE, IAutoFillService, INTERCEPTOR_POINT, InterceptCellContentPriority, RangeProtectionPermissionEditPoint, SetFrozenMutation, SetRangeValuesCommand, SetSelectionsOperation, SetWorksheetActiveOperation, SetWorksheetRowAutoHeightMutation, SheetInterceptorService, SheetPermissionCheckController, SheetSkeletonService, SheetsSelectionsService, UniverSheetsPlugin, WorkbookEditablePermission, WorkbookViewPermission, WorksheetEditPermission, WorksheetViewPermission, attachRangeWithCoord, discreteRangeToRange, getSheetCommandTarget, isCellImage } from "@univerjs/sheets";
 import { COPY_TYPE, EditingRenderController, HoverManagerService, IEditorBridgeService, ISheetClipboardService, ISheetSelectionRenderService, PREDEFINED_HOOK_NAME_PASTE, SetCellEditVisibleOperation, SetScrollOperation, SetZoomRatioOperation, SheetCanvasPopManagerService, SheetPrintInterceptorService, SheetSkeletonManagerService, UniverSheetsMobileUIPlugin, UniverSheetsUIPlugin, getCurrentRangeDisable$, useHighlightRange, virtualizeDiscreteRanges } from "@univerjs/sheets-ui";
-import { CanvasFloatDomPreviewService, CanvasFloatDomService, ComponentManager, ContextMenuGroup, ContextMenuPosition, FloatingObjectToolbarPosition, IClipboardInterfaceService, IContextMenuService, IDialogService, ILayoutService, ILocalFileService, IMenuManagerService, IMessageService, IShortcutService, ISidebarService, KeyCode, MenuItemType, PrintFloatDomSingle, RibbonDataGroup, RibbonInsertGroup, RibbonPosition, RibbonViewGroup, UndoRedoGroupService, UniverMobileUIPlugin, connectInjector, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
+import { CanvasFloatDomPreviewService, CanvasFloatDomService, ComponentManager, ContextMenuGroup, ContextMenuPosition, FloatingObjectToolbarPosition, IClipboardInterfaceService, IContextMenuService, IDialogService, ILayoutService, ILocalFileService, IMenuManagerService, IMessageService, IShortcutService, ISidebarService, IconManager, KeyCode, MenuItemType, PrintFloatDomSingle, RibbonDataGroup, RibbonInsertGroup, RibbonPosition, RibbonViewGroup, UndoRedoGroupService, UniverMobileUIPlugin, connectInjector, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
 import { COMPONENT_IMAGE_POPUP_MENU, COMPONENT_MOBILE_IMAGE_POPUP_MENU, DrawingCommonPanel, DrawingRenderService, ImageCropperObject, ImageResetSizeOperation, OpenImageCropOperation, UniverDrawingMobileUIPlugin, UniverDrawingUIPlugin, disposeDrawingRenderObject, insertGroupObject } from "@univerjs/drawing-ui";
 import { BehaviorSubject, EMPTY, Observable, Subject, combineLatest, distinctUntilChanged, filter, map, of, switchMap, take, takeUntil, tap, throttleTime, timer } from "rxjs";
 import { DocDrawingController, UniverDocsDrawingPlugin } from "@univerjs/docs-drawing";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { InnerPasteCommand } from "@univerjs/docs-ui";
 
@@ -427,7 +427,7 @@ function readUint32Be(bytes, offset) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -438,7 +438,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -451,14 +451,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -469,7 +469,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -477,7 +477,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -3070,7 +3070,12 @@ let SheetCanvasFloatDomManagerService = _SheetCanvasFloatDomManagerService = cla
 				domAnchor,
 				unitId,
 				subUnitId,
-				id: drawingId
+				id: drawingId,
+				runtimeMetadata: {
+					componentKey,
+					data,
+					allowTransform
+				}
 			};
 			const initedPosition = calcSheetFloatDomPosition(domRect, renderObject.renderUnit.scene, skeletonParam.skeleton, target.worksheet, floatDomInfo);
 			const position$ = new BehaviorSubject(initedPosition);
@@ -3274,7 +3279,12 @@ let SheetCanvasFloatDomManagerService = _SheetCanvasFloatDomManagerService = cla
 					right: viewMain.right
 				},
 				domAnchor: domLayoutParam,
-				scrollDirectionResponse: "HORIZONTAL"
+				scrollDirectionResponse: "HORIZONTAL",
+				runtimeMetadata: {
+					componentKey,
+					data,
+					allowTransform
+				}
 			};
 			const initedPosition = calcSheetFloatDomPosition(domRect, renderObject.renderUnit.scene, skeleton.skeleton, target.worksheet, floatDomInfo);
 			const position$ = new BehaviorSubject(initedPosition);
@@ -3717,7 +3727,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-drawing-ui";
-var version = "1.0.3";
+var version = "1.1.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -3948,9 +3958,19 @@ function MobileBatchSaveImagesDialog() {
 	return /* @__PURE__ */ jsx(BatchSaveImagesDialog, { SelectComponent: MobileSelect });
 }
 
+//#endregion
+//#region src/views/sheet-image-panel/sheet-drawing-panel.util.ts
+function isSheetDrawing(drawing) {
+	return Boolean(drawing && "sheetTransform" in drawing && drawing.sheetTransform);
+}
+
 //#endregion
 //#region src/views/sheet-image-panel/SheetDrawingAnchor.tsx
 const SheetDrawingAnchor = (props) => {
+	function getAnchorKind(value) {
+		if (value === SheetDrawingAnchorType.Position || value === SheetDrawingAnchorType.Both || value === SheetDrawingAnchorType.None) return value;
+		return null;
+	}
 	const commandService = useDependency(ICommandService);
 	const localeService = useDependency(LocaleService);
 	const drawingManagerService = useDependency(IDrawingManagerService);
@@ -4066,12 +4086,389 @@ const SheetDrawingAnchor = (props) => {
 		}) })]
 	});
 };
-function isSheetDrawing(drawing) {
-	return Boolean(drawing && "sheetTransform" in drawing && "axisAlignSheetTransform" in drawing);
+
+//#endregion
+//#region src/commands/operations/preview-sheet-image-opacity.operation.ts
+const PreviewSheetImageOpacityOperation = {
+	id: "sheet.operation.preview-image-opacity",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		var _renderManagerService;
+		if (!params || !Number.isFinite(params.opacity)) return false;
+		const scene = (_renderManagerService = accessor.get(IRenderManagerService).getRenderUnitById(params.unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.scene;
+		const image = scene === null || scene === void 0 ? void 0 : scene.getObject(getDrawingShapeKeyByDrawingSearch(params));
+		if (!(image instanceof Image)) return false;
+		image.setOpacity(Math.min(Math.max(params.opacity, 0), 1));
+		return true;
+	}
+};
+
+//#endregion
+//#region src/views/sheet-image-panel/SheetImageTransparencySlider.tsx
+const MIN_TRANSPARENCY = 0;
+const MAX_TRANSPARENCY = 100;
+const TRANSPARENCY_STEP = 1;
+const TRANSPARENCY_PAGE_STEP = 10;
+const DRAG_PREVIEW_INTERVAL = 50;
+function SheetImageTransparencySlider(props) {
+	const { value, shortcuts, ariaLabel, disabled = false, onChange, onChangeComplete } = props;
+	const localeService = useDependency(LocaleService);
+	const isRtl = useObservable(localeService.direction$, localeService.getDirection()) === "rtl";
+	const sliderRailRef = useRef(null);
+	const dragValueRef = useRef(value);
+	const pendingDragValueRef = useRef(null);
+	const lastPreviewedDragValueRef = useRef(value);
+	const dragPreviewTimerRef = useRef(null);
+	const dragCleanupRef = useRef(null);
+	const [isDragging, setIsDragging] = useState(false);
+	const [dragValue, setDragValue] = useState(value);
+	useEffect(() => () => {
+		var _dragCleanupRef$curre;
+		(_dragCleanupRef$curre = dragCleanupRef.current) === null || _dragCleanupRef$curre === void 0 || _dragCleanupRef$curre.call(dragCleanupRef);
+		clearDragPreviewTimer();
+	}, []);
+	function getValueByClientX(clientX) {
+		const rail = sliderRailRef.current;
+		if (!rail) return value;
+		const railRect = rail.getBoundingClientRect();
+		if (railRect.width <= 0) return value;
+		let ratio = (clientX - railRect.left) / railRect.width;
+		ratio = Math.min(Math.max(ratio, 0), 1);
+		if (isRtl) ratio = 1 - ratio;
+		return normalizeTransparency$1(MIN_TRANSPARENCY + ratio * 100);
+	}
+	function clearDragPreviewTimer() {
+		if (dragPreviewTimerRef.current != null) {
+			window.clearTimeout(dragPreviewTimerRef.current);
+			dragPreviewTimerRef.current = null;
+		}
+	}
+	function previewDragValue(nextValue) {
+		if (nextValue === lastPreviewedDragValueRef.current) return;
+		lastPreviewedDragValueRef.current = nextValue;
+		onChange === null || onChange === void 0 || onChange(nextValue);
+	}
+	function flushDragPreview() {
+		clearDragPreviewTimer();
+		const nextValue = pendingDragValueRef.current;
+		pendingDragValueRef.current = null;
+		if (nextValue != null) previewDragValue(nextValue);
+	}
+	function scheduleDragPreview(nextValue) {
+		pendingDragValueRef.current = nextValue;
+		if (dragPreviewTimerRef.current != null) return;
+		dragPreviewTimerRef.current = window.setTimeout(() => {
+			dragPreviewTimerRef.current = null;
+			const pendingValue = pendingDragValueRef.current;
+			pendingDragValueRef.current = null;
+			if (pendingValue != null) previewDragValue(pendingValue);
+		}, DRAG_PREVIEW_INTERVAL);
+	}
+	function updateDragValue(clientX) {
+		const nextValue = getValueByClientX(clientX);
+		dragValueRef.current = nextValue;
+		setDragValue(nextValue);
+		return nextValue;
+	}
+	function handlePointerDown(e) {
+		var _dragCleanupRef$curre2;
+		if (disabled) return;
+		e.preventDefault();
+		e.stopPropagation();
+		(_dragCleanupRef$curre2 = dragCleanupRef.current) === null || _dragCleanupRef$curre2 === void 0 || _dragCleanupRef$curre2.call(dragCleanupRef);
+		clearDragPreviewTimer();
+		pendingDragValueRef.current = null;
+		lastPreviewedDragValueRef.current = value;
+		setIsDragging(true);
+		scheduleDragPreview(updateDragValue(e.clientX));
+		function cleanup() {
+			window.removeEventListener("pointermove", handlePointerMove);
+			window.removeEventListener("pointerup", handlePointerUp);
+			window.removeEventListener("pointercancel", handlePointerUp);
+			dragCleanupRef.current = null;
+		}
+		function handlePointerMove(event) {
+			scheduleDragPreview(updateDragValue(event.clientX));
+		}
+		function handlePointerUp() {
+			cleanup();
+			flushDragPreview();
+			setIsDragging(false);
+			onChangeComplete === null || onChangeComplete === void 0 || onChangeComplete(dragValueRef.current);
+		}
+		dragCleanupRef.current = cleanup;
+		window.addEventListener("pointermove", handlePointerMove);
+		window.addEventListener("pointerup", handlePointerUp);
+		window.addEventListener("pointercancel", handlePointerUp);
+	}
+	function handleSliderKeyDown(e) {
+		let nextValue = null;
+		if (e.key === "ArrowLeft" || e.key === "ArrowDown") nextValue = value - TRANSPARENCY_STEP;
+		else if (e.key === "ArrowRight" || e.key === "ArrowUp") nextValue = value + TRANSPARENCY_STEP;
+		else if (e.key === "PageDown") nextValue = value - TRANSPARENCY_PAGE_STEP;
+		else if (e.key === "PageUp") nextValue = value + TRANSPARENCY_PAGE_STEP;
+		else if (e.key === "Home") nextValue = MIN_TRANSPARENCY;
+		else if (e.key === "End") nextValue = MAX_TRANSPARENCY;
+		if (nextValue == null || disabled) return;
+		e.preventDefault();
+		e.stopPropagation();
+		const normalizedValue = normalizeTransparency$1(nextValue);
+		onChange === null || onChange === void 0 || onChange(normalizedValue);
+		onChangeComplete === null || onChangeComplete === void 0 || onChangeComplete(normalizedValue);
+	}
+	const visualValue = isDragging ? dragValue : value;
+	const sliderOffset = normalizeTransparency$1(visualValue);
+	const handleOffset = isRtl ? MAX_TRANSPARENCY - sliderOffset : sliderOffset;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("univer-flex univer-select-none univer-items-center univer-gap-1.5", { "univer-cursor-not-allowed": disabled }),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "univer-flex univer-h-6 univer-min-w-0 univer-flex-1 univer-items-center",
+			children: /* @__PURE__ */ jsx("div", {
+				className: clsx("univer-relative univer-h-1.5 univer-w-full univer-rounded-full univer-bg-gray-200 univer-px-1.5 univer-transition-colors dark:!univer-bg-gray-600", { "univer-opacity-60": disabled }),
+				children: /* @__PURE__ */ jsxs("div", {
+					ref: sliderRailRef,
+					"data-u-comp": "sheet-image-transparency-slider-track",
+					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"),
+						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, {
+							"univer-cursor-pointer hover:univer-border-primary-600 hover:univer-shadow-md": !disabled,
+							"univer-cursor-not-allowed": disabled,
+							"univer-scale-105 univer-border-primary-600 univer-shadow-md": isDragging,
+							"univer-transition-all": !isDragging,
+							"univer-transition-none": isDragging
+						}),
+						role: "slider",
+						"aria-label": ariaLabel,
+						"aria-valuemin": MIN_TRANSPARENCY,
+						"aria-valuemax": MAX_TRANSPARENCY,
+						"aria-valuenow": visualValue,
+						"aria-valuetext": `${visualValue}%`,
+						disabled,
+						type: "button",
+						style: { left: `${handleOffset}%` },
+						onKeyDown: handleSliderKeyDown
+					})]
+				})
+			})
+		}), /* @__PURE__ */ jsx(SheetImageTransparencyInput, {
+			value,
+			shortcuts,
+			ariaLabel,
+			disabled,
+			onChange,
+			onChangeComplete
+		})]
+	});
+}
+function SheetImageTransparencyInput(props) {
+	const { value, shortcuts, ariaLabel, disabled = false, onChange, onChangeComplete } = props;
+	const iconManager = useDependency(IconManager);
+	const isEditingRef = useRef(false);
+	const [listVisible, setListVisible] = useState(false);
+	const [inputValue, setInputValue] = useState(() => `${value}%`);
+	useEffect(() => {
+		if (!isEditingRef.current) setInputValue(`${value}%`);
+	}, [value]);
+	function emitValue(nextValue) {
+		const normalizedValue = normalizeTransparency$1(nextValue);
+		onChange === null || onChange === void 0 || onChange(normalizedValue);
+		onChangeComplete === null || onChangeComplete === void 0 || onChangeComplete(normalizedValue);
+	}
+	function handleSelect(nextValue) {
+		if (disabled) return;
+		setListVisible(false);
+		emitValue(nextValue);
+	}
+	function handleFocus() {
+		if (disabled) return;
+		isEditingRef.current = true;
+		setInputValue(String(value));
+	}
+	function commitInput() {
+		if (disabled || !isEditingRef.current) return;
+		const parsedValue = parseTransparency(inputValue);
+		isEditingRef.current = false;
+		if (parsedValue == null) {
+			setInputValue(`${value}%`);
+			return;
+		}
+		if (parsedValue === value) {
+			setInputValue(`${parsedValue}%`);
+			return;
+		}
+		emitValue(parsedValue);
+	}
+	function handleKeyDown(e) {
+		e.stopPropagation();
+		if (e.key === "Enter") {
+			e.preventDefault();
+			commitInput();
+			e.currentTarget.blur();
+		}
+	}
+	const items = [{
+		type: "radio",
+		value: value.toString(),
+		options: shortcuts.map((shortcut) => ({
+			value: shortcut.toString(),
+			label: `${shortcut}%`
+		})),
+		onSelect: (selectedValue) => handleSelect(Number(selectedValue))
+	}];
+	const MoreDownIcon = iconManager.get("MoreDownIcon");
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("univer-flex univer-h-6 univer-w-[68px] univer-flex-shrink-0 univer-items-center univer-overflow-hidden univer-rounded-md univer-border univer-border-gray-200 univer-bg-gray-0 dark:!univer-border-gray-600 dark:!univer-bg-gray-800", { "univer-opacity-60": disabled }),
+		onClick: (e) => e.stopPropagation(),
+		children: [/* @__PURE__ */ jsx(Input, {
+			className: "univer-box-border univer-h-6 univer-min-w-0 univer-flex-1 univer-border-none univer-bg-transparent [&_input:focus]:!univer-ring-0 [&_input]:univer-h-6 [&_input]:univer-w-full [&_input]:univer-border-none [&_input]:!univer-bg-transparent [&_input]:univer-px-1 [&_input]:univer-text-center [&_input]:univer-text-xs [&_input]:univer-tabular-nums",
+			inputClass: "univer-w-full",
+			size: "mini",
+			"aria-label": ariaLabel,
+			value: inputValue,
+			disabled,
+			type: "text",
+			onChange: setInputValue,
+			onFocus: handleFocus,
+			onBlur: commitInput,
+			onKeyDown: handleKeyDown
+		}), /* @__PURE__ */ jsx(DropdownMenu, {
+			align: "end",
+			items,
+			open: listVisible,
+			disabled,
+			onOpenChange: setListVisible,
+			children: /* @__PURE__ */ jsx(Button, {
+				className: "univer-h-6 univer-w-4 univer-rounded-none univer-p-0",
+				size: "small",
+				variant: "text",
+				"aria-label": ariaLabel,
+				disabled,
+				children: /* @__PURE__ */ jsx(MoreDownIcon, { className: "univer-size-3 univer-text-gray-500 dark:!univer-text-gray-300" })
+			})
+		})]
+	});
 }
-function getAnchorKind(value) {
-	if (value === SheetDrawingAnchorType.Position || value === SheetDrawingAnchorType.Both || value === SheetDrawingAnchorType.None) return value;
-	return null;
+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);
+}
+
+//#endregion
+//#region src/views/sheet-image-panel/SheetImageTransparency.tsx
+const IMAGE_TRANSPARENCY_PRESETS = [
+	0,
+	15,
+	30,
+	50,
+	65,
+	80
+];
+const SheetImageTransparency = ({ drawings }) => {
+	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
+	const sheetDrawingService = useDependency(ISheetDrawingService);
+	const drawingParam = isSheetDrawing(drawings[0]) ? drawings[0] : void 0;
+	const currentDrawing = drawingParam ? sheetDrawingService.getDrawingByParam(drawingParam) ?? drawingParam : void 0;
+	const image = (currentDrawing === null || currentDrawing === void 0 ? void 0 : currentDrawing.drawingType) === DrawingTypeEnum.DRAWING_IMAGE ? currentDrawing : void 0;
+	const modelOpacity = normalizeImageOpacity(image === null || image === void 0 ? void 0 : image.opacity);
+	const modelTransparency = Math.round((1 - modelOpacity) * 100);
+	const [previewState, setPreviewState] = useState(null);
+	const previewPendingRef = useRef(false);
+	const [, setModelRevision] = useState(0);
+	const transparency = image && (previewState === null || previewState === void 0 ? void 0 : previewState.unitId) === image.unitId && previewState.subUnitId === image.subUnitId && previewState.drawingId === image.drawingId ? previewState.transparency : modelTransparency;
+	useEffect(() => {
+		if (!drawingParam) return;
+		const subscription = sheetDrawingService.update$.subscribe((updatedDrawings) => {
+			if (updatedDrawings.some((updatedDrawing) => updatedDrawing.unitId === drawingParam.unitId && updatedDrawing.subUnitId === drawingParam.subUnitId && updatedDrawing.drawingId === drawingParam.drawingId)) setModelRevision((revision) => revision + 1);
+		});
+		return () => subscription.unsubscribe();
+	}, [drawingParam, sheetDrawingService]);
+	useEffect(() => {
+		previewPendingRef.current = false;
+		return () => {
+			if (!previewPendingRef.current || !image) return;
+			commandService.syncExecuteCommand(PreviewSheetImageOpacityOperation.id, {
+				unitId: image.unitId,
+				subUnitId: image.subUnitId,
+				drawingId: image.drawingId,
+				opacity: modelOpacity
+			});
+		};
+	}, [
+		commandService,
+		image,
+		modelOpacity,
+		modelTransparency
+	]);
+	if (!image) return null;
+	const title = localeService.t("sheets-drawing-ui.image-transparency.title");
+	const { unitId, subUnitId, drawingId } = image;
+	function previewTransparency(nextTransparency) {
+		const normalizedTransparency = normalizeTransparency(nextTransparency);
+		const opacity = transparencyToOpacity(normalizedTransparency);
+		previewPendingRef.current = true;
+		setPreviewState({
+			unitId,
+			subUnitId,
+			drawingId,
+			transparency: normalizedTransparency
+		});
+		commandService.syncExecuteCommand(PreviewSheetImageOpacityOperation.id, {
+			unitId,
+			subUnitId,
+			drawingId,
+			opacity
+		});
+	}
+	function commitTransparency(nextTransparency) {
+		const opacity = transparencyToOpacity(normalizeTransparency(nextTransparency));
+		previewPendingRef.current = false;
+		setPreviewState(null);
+		if (opacity === modelOpacity) return;
+		if (!commandService.syncExecuteCommand(SetSheetDrawingCommand.id, {
+			unitId,
+			drawings: [{
+				unitId,
+				subUnitId,
+				drawingId,
+				opacity
+			}]
+		})) commandService.syncExecuteCommand(PreviewSheetImageOpacityOperation.id, {
+			unitId,
+			subUnitId,
+			drawingId,
+			opacity: modelOpacity
+		});
+	}
+	return /* @__PURE__ */ jsxs("section", {
+		className: "univer-grid univer-gap-2 univer-py-2 univer-text-gray-400",
+		children: [/* @__PURE__ */ jsx("header", {
+			className: "univer-text-gray-600 dark:!univer-text-gray-200",
+			children: title
+		}), /* @__PURE__ */ jsx(SheetImageTransparencySlider, {
+			value: transparency,
+			shortcuts: IMAGE_TRANSPARENCY_PRESETS,
+			ariaLabel: title,
+			onChange: previewTransparency,
+			onChangeComplete: commitTransparency
+		})]
+	});
+};
+function normalizeTransparency(transparency) {
+	if (!Number.isFinite(transparency)) return 0;
+	return Math.min(Math.max(Math.round(transparency), 0), 100);
+}
+function transparencyToOpacity(transparency) {
+	return (100 - transparency) / 100;
 }
 
 //#endregion
@@ -4096,7 +4493,11 @@ const SheetDrawingPanel = () => {
 	const drawings = useObservable(() => drawingManagerService.focus$, drawingManagerService.getFocusDrawings(), false, [drawingManagerService]);
 	return !!(drawings === null || drawings === void 0 ? void 0 : drawings.length) && /* @__PURE__ */ jsxs("div", {
 		className: "univer-text-sm",
-		children: [/* @__PURE__ */ jsx(DrawingCommonPanel, { drawings }), /* @__PURE__ */ jsx(SheetDrawingAnchor, { drawings })]
+		children: [
+			/* @__PURE__ */ jsx(DrawingCommonPanel, { drawings }),
+			/* @__PURE__ */ jsx(SheetImageTransparency, { drawings }),
+			/* @__PURE__ */ jsx(SheetDrawingAnchor, { drawings })
+		]
 	});
 };
 
@@ -4507,80 +4908,121 @@ SheetCellImageCopyPasteController = __decorate([
 //#endregion
 //#region src/controllers/sheet-drawing-active-render.controller.ts
 let SheetDrawingActiveRenderController = class SheetDrawingActiveRenderController extends Disposable {
-	constructor(_context, _commandService, _sheetSkeletonService, _sheetDrawingService, _drawingManagerService) {
+	constructor(_context, _commandService, _sheetSkeletonService, _sheetDrawingService, _drawingManagerService, _logService) {
 		super();
 		this._context = _context;
 		this._commandService = _commandService;
 		this._sheetSkeletonService = _sheetSkeletonService;
 		this._sheetDrawingService = _sheetDrawingService;
 		this._drawingManagerService = _drawingManagerService;
+		this._logService = _logService;
+		_defineProperty(this, "_renderTimeout", void 0);
 		this._commandListener();
 	}
+	dispose() {
+		this._cancelPendingRender();
+		super.dispose();
+	}
+	_cancelPendingRender() {
+		if (this._renderTimeout !== void 0) {
+			clearTimeout(this._renderTimeout);
+			this._renderTimeout = void 0;
+		}
+	}
+	_scheduleRender(callback) {
+		this._cancelPendingRender();
+		this._renderTimeout = setTimeout(() => {
+			this._renderTimeout = void 0;
+			callback();
+		}, 0);
+	}
 	_commandListener() {
+		this.disposeWithMe(this._commandService.beforeCommandExecuted((command) => {
+			if (command.id !== SetWorksheetActiveOperation.id) return;
+			const { unitId, subUnitId } = command.params;
+			const { unit, unitId: contextUnitId } = this._context;
+			if (unitId !== contextUnitId || !unit.getSheetBySheetId(subUnitId) || unit.getActiveSheet().getSheetId() === subUnitId) return;
+			this._clearDrawings(unitId, subUnitId);
+		}));
 		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
 			if (command.id === SetWorksheetActiveOperation.id) {
 				const { unitId, subUnitId } = command.params;
-				this._updateDrawings(unitId, subUnitId);
+				if (unitId === this._context.unitId && subUnitId === this._context.unit.getActiveSheet().getSheetId()) this._updateDrawings(unitId, subUnitId);
 			}
 		}));
 		this.disposeWithMe(this._context.activated$.subscribe((activated) => {
 			const { unit, unitId } = this._context;
-			if (activated) this._updateDrawings(unitId, unit.getActiveSheet().getSheetId());
-			else this._clearDrawings(unitId);
+			if (activated) {
+				const subUnitId = unit.getActiveSheet().getSheetId();
+				this._clearDrawings(unitId, subUnitId);
+				this._updateDrawings(unitId, subUnitId);
+			} else this._clearDrawings(unitId);
 		}));
 	}
-	_clearDrawings(selfUnitId) {
-		setTimeout(() => {
-			const drawingMap = this._drawingManagerService.drawingManagerData;
-			const removeDrawings = [];
-			Object.keys(drawingMap ?? {}).forEach((unitId) => {
-				const subUnitMap = drawingMap[unitId] ?? {};
-				Object.keys(subUnitMap).forEach((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]);
-					});
-				});
-			});
-			this._sheetDrawingService.removeNotification(removeDrawings);
-			this._drawingManagerService.removeNotification(removeDrawings);
-		});
+	_clearDrawings(unitId, keepSubUnitId) {
+		this._cancelPendingRender();
+		const subUnitMap = this._drawingManagerService.drawingManagerData[unitId] ?? {};
+		const removeDrawings = [];
+		for (const subUnitId of Object.keys(subUnitMap)) {
+			var _subUnitMap$subUnitId;
+			if (subUnitId === keepSubUnitId) continue;
+			for (const drawing of Object.values(((_subUnitMap$subUnitId = subUnitMap[subUnitId]) === null || _subUnitMap$subUnitId === void 0 ? void 0 : _subUnitMap$subUnitId.data) ?? {})) removeDrawings.push(drawing);
+		}
+		this._sheetDrawingService.removeNotification(removeDrawings);
+		this._drawingManagerService.removeNotification(removeDrawings);
 	}
 	_updateDrawings(showUnitId, showSubunitId) {
-		setTimeout(() => {
+		this._scheduleRender(() => {
+			var _subUnitMap$showSubun;
 			const sheetSkeletonParam = this._sheetSkeletonService.getSkeletonParam(showUnitId, showSubunitId);
-			const drawingMap = this._drawingManagerService.drawingManagerData;
-			const insertDrawings = [];
-			const removeDrawings = [];
-			Object.keys(drawingMap ?? {}).forEach((unitId) => {
-				if (unitId !== showUnitId) return;
-				const subUnitMap = drawingMap[unitId] ?? {};
-				Object.keys(subUnitMap).forEach((subUnitId) => {
-					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];
-							if (drawing.sheetTransform && drawing.anchorType !== SheetDrawingAnchorType.None) drawing.transform = drawingPositionToTransform(drawing.sheetTransform, sheetSkeletonParam);
-							insertDrawings.push(drawingData[drawingId]);
-						} else removeDrawings.push(drawingData[drawingId]);
-					});
-				});
-			});
+			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]);
+			this._sheetDrawingService.refreshTransform(refreshedDrawings);
+			this._drawingManagerService.refreshTransform(refreshedDrawings);
 			this._sheetDrawingService.removeNotification(removeDrawings);
-			this._sheetDrawingService.addNotification(insertDrawings);
+			this._sheetDrawingService.addNotification(successDrawings);
 			this._drawingManagerService.removeNotification(removeDrawings);
-			this._drawingManagerService.addNotification(insertDrawings);
-		}, 0);
+			this._drawingManagerService.addNotification(successDrawings);
+			if (failures.length) this._logService.error("[SheetDrawingActiveRenderController]", {
+				unitId: showUnitId,
+				subUnitId: showSubunitId,
+				failures
+			});
+		});
 	}
 };
 SheetDrawingActiveRenderController = __decorate([
 	__decorateParam(1, ICommandService),
 	__decorateParam(2, Inject(SheetSkeletonService)),
 	__decorateParam(3, ISheetDrawingService),
-	__decorateParam(4, IDrawingManagerService)
+	__decorateParam(4, IDrawingManagerService),
+	__decorateParam(5, ILogService)
 ], SheetDrawingActiveRenderController);
+function prepareSheetDrawings(drawings, skeleton) {
+	const successDrawings = [];
+	const refreshedDrawings = [];
+	const failures = [];
+	for (const drawing of drawings) {
+		if (skeleton && drawing.sheetTransform && drawing.anchorType !== SheetDrawingAnchorType.None) try {
+			refreshedDrawings.push(applySheetDrawingPlacement(drawing, getSheetDrawingPlacement(drawing), skeleton));
+		} catch (error) {
+			failures.push({
+				drawingId: drawing.drawingId,
+				drawingType: drawing.drawingType,
+				anchorType: drawing.anchorType ?? SheetDrawingAnchorType.Position,
+				error
+			});
+			continue;
+		}
+		successDrawings.push(drawing);
+	}
+	return {
+		successDrawings,
+		refreshedDrawings,
+		failures
+	};
+}
 
 //#endregion
 //#region src/controllers/sheet-drawing-copy-paste.controller.ts
@@ -5632,7 +6074,8 @@ let SheetDrawingUIController = class SheetDrawingUIController extends Disposable
 			MoveDrawingsCommand,
 			DeleteDrawingsCommand,
 			SaveCellImagesCommand,
-			FlipSheetDrawingCommand
+			FlipSheetDrawingCommand,
+			PreviewSheetImageOpacityOperation
 		].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
 	}
 	_initShortcuts() {