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

package/lib/cjs/index.js

@@ -237,21 +237,21 @@ const CancelDrawingGroupOperation = {
 const OpenImageCropOperation = {
 	id: "sheet.operation.open-image-crop",
 	type: _univerjs_core.CommandType.OPERATION,
-	handler: (accessor, params) => {
+	handler: (_accessor, _params) => {
 		return true;
 	}
 };
 const CloseImageCropOperation = {
 	id: "sheet.operation.close-image-crop",
 	type: _univerjs_core.CommandType.OPERATION,
-	handler: (accessor, params) => {
+	handler: (_accessor, _params) => {
 		return true;
 	}
 };
 const AutoImageCropOperation = {
 	id: "sheet.operation.Auto-image-crop",
 	type: _univerjs_core.CommandType.OPERATION,
-	handler: (accessor, params) => {
+	handler: (_accessor, _params) => {
 		return true;
 	}
 };
@@ -272,19 +272,17 @@ function isKnownDrawingUINonRotatableType(drawingType) {
 	return drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_CHART;
 }
 function resolveDrawingUIRotateEnabled(drawing, options = {}) {
-	var _options$isKnownNonRo;
 	return (0, _univerjs_drawing.resolveDrawingRotateEnabled)(drawing, {
 		...options,
-		isKnownNonRotatableType: (_options$isKnownNonRo = options.isKnownNonRotatableType) !== null && _options$isKnownNonRo !== void 0 ? _options$isKnownNonRo : isKnownDrawingUINonRotatableType
+		isKnownNonRotatableType: options.isKnownNonRotatableType ?? isKnownDrawingUINonRotatableType
 	});
 }
 
 //#endregion
 //#region src/controllers/utils.ts
 function getDrawingRenderObject(scene, drawingSearch) {
-	var _scene$getObjectInclu;
 	const key = (0, _univerjs_drawing.getDrawingShapeKeyByDrawingSearch)(drawingSearch);
-	return (_scene$getObjectInclu = scene.getObjectIncludeInGroup(key)) !== null && _scene$getObjectInclu !== void 0 ? _scene$getObjectInclu : null;
+	return scene.getObjectIncludeInGroup(key) ?? null;
 }
 function disposeDrawingRenderObject(scene, drawingSearch) {
 	const object = getDrawingRenderObject(scene, drawingSearch);
@@ -627,7 +625,7 @@ const menuSchema = { [_univerjs_ui.ContextMenuPosition.DRAWING]: { [_univerjs_ui
 //#endregion
 //#region package.json
 var name = "@univerjs/drawing-ui";
-var version = "1.0.0-alpha.8";
+var version = "1.0.0-beta.1";
 
 //#endregion
 //#region src/config/config.ts
@@ -700,11 +698,11 @@ function ImagePopupMenu(props) {
 			open: visible,
 			onOpenChange: onVisibleChange,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: (0, _univerjs_design.clsx)("univer-flex univer-items-center univer-gap-2 univer-rounded univer-p-1 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-800", _univerjs_design.borderClassName, {
+				className: (0, _univerjs_design.clsx)("univer-flex univer-items-center univer-gap-2 univer-rounded univer-p-1 univer-text-gray-900 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-800", _univerjs_design.borderClassName, {
 					"univer-bg-gray-100 dark:!univer-bg-gray-800": visible,
-					"univer-bg-white dark:!univer-bg-gray-900": !visible
+					"univer-bg-gray-0 dark:!univer-bg-gray-900": !visible
 				}),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.AutofillDoubleIcon, { className: "univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-white" }), showMore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "dark:!univer-text-white" })]
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.AutofillDoubleIcon, { className: "univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-gray-0" }), showMore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "dark:!univer-text-gray-0" })]
 			})
 		})
 	});
@@ -727,7 +725,7 @@ function ToolbarGroup(props) {
 }
 function ToolbarButton(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
-		title: (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService).t(props.titleKey),
+		title: props.title,
 		placement: "bottom",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
@@ -739,14 +737,13 @@ function ToolbarButton(props) {
 	});
 }
 function ToolbarDropdownButton(props) {
-	var _props$options$find;
 	const [open, setOpen] = (0, react.useState)(false);
-	const activeOption = (_props$options$find = props.options.find((option) => option.value === props.value)) !== null && _props$options$find !== void 0 ? _props$options$find : props.options[0];
+	const activeOption = props.options.find((option) => option.value === props.value) ?? props.options[0];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
 		open,
 		onOpenChange: setOpen,
 		overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-min-w-32 univer-rounded-lg univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-p-1 univer-shadow-lg dark:!univer-border-gray-700 dark:!univer-bg-gray-900",
+			className: "univer-min-w-32 univer-rounded-lg univer-border univer-border-solid univer-border-gray-200 univer-bg-gray-0 univer-p-1 univer-shadow-lg dark:!univer-border-gray-700 dark:!univer-bg-gray-900",
 			children: props.options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 				type: "button",
 				onClick: () => {
@@ -775,11 +772,11 @@ function ToolbarDropdownButton(props) {
 	});
 }
 function DocImageFloatingToolbar(props) {
-	var _univerInstanceServic, _wrappingStyleOptions, _wrappingStyleOptions2;
+	var _wrappingStyleOptions;
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
 	const iconManager = (0, _univerjs_ui.useDependency)(_univerjs_ui.IconManager);
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
-	const documentDataModel = (_univerInstanceServic = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService).getUnit(props.unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC)) !== null && _univerInstanceServic !== void 0 ? _univerInstanceServic : void 0;
+	const documentDataModel = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService).getUnit(props.unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC) ?? void 0;
 	const [wrappingStyle, setWrappingStyle] = (0, react.useState)(() => getWrappingStyle(documentDataModel, props.drawingId));
 	const [hidden, setHidden] = (0, react.useState)(false);
 	const actionItems = props.menuItems.filter((item) => item.type !== "select" && item.icon).sort((a, b) => a.index - b.index);
@@ -835,16 +832,16 @@ function DocImageFloatingToolbar(props) {
 			event.stopPropagation();
 			event.preventDefault();
 		},
-		className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-items-center univer-rounded univer-bg-white univer-px-1 univer-py-1 univer-shadow-sm dark:!univer-border-gray-700 dark:!univer-bg-gray-900", _univerjs_design.borderClassName),
+		className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-items-center univer-rounded univer-bg-gray-0 univer-px-1 univer-py-1 univer-shadow-sm dark:!univer-border-gray-700 dark:!univer-bg-gray-900", _univerjs_design.borderClassName),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarDropdownButton, {
-			title: (_wrappingStyleOptions = (_wrappingStyleOptions2 = wrappingStyleOptions.find((option) => option.value === wrappingStyle)) === null || _wrappingStyleOptions2 === void 0 ? void 0 : _wrappingStyleOptions2.label) !== null && _wrappingStyleOptions !== void 0 ? _wrappingStyleOptions : localeService.t("drawing-ui.image-text-wrap.inline"),
+			title: ((_wrappingStyleOptions = wrappingStyleOptions.find((option) => option.value === wrappingStyle)) === null || _wrappingStyleOptions === void 0 ? void 0 : _wrappingStyleOptions.label) ?? localeService.t("drawing-ui.image-text-wrap.inline"),
 			value: wrappingStyle,
 			options: wrappingStyleOptions,
 			onChange: updateWrappingStyle
 		}) }), actionItems.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Separator, { orientation: "vertical" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarGroup, { children: actionItems.map((item) => {
 			const Icon = iconManager.get(item.icon);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
-				titleKey: item.label,
+				title: localeService.t(item.label),
 				disabled: item.disable,
 				onClick: () => executeMenuItem(item),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {})
@@ -853,18 +850,21 @@ function DocImageFloatingToolbar(props) {
 	});
 }
 function DocChartFloatingToolbar(props) {
-	var _chartTypeItem$option, _ref, _chartTypeItem$value, _chartTypeOptions$;
+	var _chartTypeOptions$;
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
 	const iconManager = (0, _univerjs_ui.useDependency)(_univerjs_ui.IconManager);
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const [hidden, setHidden] = (0, react.useState)(false);
 	const chartTypeItem = props.menuItems.find((item) => item.type === "select");
 	const actionItems = props.menuItems.filter((item) => item.type !== "select" && item.icon).sort((a, b) => a.index - b.index);
-	const chartTypeOptions = ((_chartTypeItem$option = chartTypeItem === null || chartTypeItem === void 0 ? void 0 : chartTypeItem.options) !== null && _chartTypeItem$option !== void 0 ? _chartTypeItem$option : []).map((option) => ({
-		label: String(option.label),
-		value: option.value,
-		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.ChartIcon, {})
-	}));
+	const chartTypeOptions = ((chartTypeItem === null || chartTypeItem === void 0 ? void 0 : chartTypeItem.options) ?? []).map((option) => {
+		const Icon = option.icon ? iconManager.get(option.icon) : _univerjs_icons.ChartIcon;
+		return {
+			label: String(option.label),
+			value: option.value,
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {})
+		};
+	});
 	const executeMenuItem = (item) => {
 		if (!item || item.disable) return;
 		if (item.hideOnClick) setHidden(true);
@@ -877,10 +877,10 @@ function DocChartFloatingToolbar(props) {
 			event.stopPropagation();
 			event.preventDefault();
 		},
-		className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-items-center univer-rounded univer-bg-white univer-px-1 univer-py-1 univer-shadow-sm dark:!univer-border-gray-700 dark:!univer-bg-gray-900", _univerjs_design.borderClassName),
+		className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-items-center univer-rounded univer-bg-gray-0 univer-px-1 univer-py-1 univer-shadow-sm dark:!univer-border-gray-700 dark:!univer-bg-gray-900", _univerjs_design.borderClassName),
 		children: [chartTypeItem && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarDropdownButton, {
 			title: localeService.t(chartTypeItem.label),
-			value: (_ref = (_chartTypeItem$value = chartTypeItem.value) !== null && _chartTypeItem$value !== void 0 ? _chartTypeItem$value : (_chartTypeOptions$ = chartTypeOptions[0]) === null || _chartTypeOptions$ === void 0 ? void 0 : _chartTypeOptions$.value) !== null && _ref !== void 0 ? _ref : "",
+			value: chartTypeItem.value ?? ((_chartTypeOptions$ = chartTypeOptions[0]) === null || _chartTypeOptions$ === void 0 ? void 0 : _chartTypeOptions$.value) ?? "",
 			options: chartTypeOptions,
 			onChange: (value) => {
 				if (!chartTypeItem.disable) {
@@ -891,7 +891,7 @@ function DocChartFloatingToolbar(props) {
 		}) }), actionItems.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Separator, { orientation: "vertical" })] }), actionItems.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarGroup, { children: actionItems.map((item) => {
 			const Icon = iconManager.get(item.icon);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
-				titleKey: item.label,
+				title: localeService.t(item.label),
 				disabled: item.disable,
 				onClick: () => executeMenuItem(item),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {})
@@ -1957,7 +1957,7 @@ var ImageCropperObject = class extends _univerjs_engine_render.Shape {
 //#endregion
 //#region src/controllers/image-cropper.controller.ts
 let ImageCropperController = class ImageCropperController extends _univerjs_core.Disposable {
-	constructor(_commandService, _drawingManagerService, _renderManagerService, _univerInstanceService, _messageService, _localeService) {
+	constructor(_commandService, _drawingManagerService, _renderManagerService, _univerInstanceService, _messageService, _localeService, _shortcutService) {
 		super();
 		this._commandService = _commandService;
 		this._drawingManagerService = _drawingManagerService;
@@ -1965,7 +1965,13 @@ let ImageCropperController = class ImageCropperController extends _univerjs_core
 		this._univerInstanceService = _univerInstanceService;
 		this._messageService = _messageService;
 		this._localeService = _localeService;
+		this._shortcutService = _shortcutService;
 		_defineProperty(this, "_sceneListenerOnImageMap", /* @__PURE__ */ new WeakSet());
+		_defineProperty(this, "_cropShortcutDisposables", new _univerjs_core.DisposableCollection());
+		_defineProperty(this, "_cropSnapshots", /* @__PURE__ */ new WeakMap());
+		_defineProperty(this, "_pendingCropSnapshot", null);
+		_defineProperty(this, "_activeCropSession", null);
+		this.disposeWithMe(this._cropShortcutDisposables);
 		this._init();
 	}
 	_init() {
@@ -2000,12 +2006,17 @@ let ImageCropperController = class ImageCropperController extends _univerjs_core
 				return;
 			}
 			if (imageShape == null) return;
-			this._updateCropperObject(cropType, imageShape);
-			this._commandService.executeCommand(OpenImageCropOperation.id, {
-				unitId,
-				subUnitId,
-				drawingId
-			});
+			this._pendingCropSnapshot = this._captureCropSnapshot(imageShape);
+			try {
+				this._updateCropperObject(cropType, imageShape);
+				this._commandService.syncExecuteCommand(OpenImageCropOperation.id, {
+					unitId,
+					subUnitId,
+					drawingId
+				});
+			} finally {
+				this._pendingCropSnapshot = null;
+			}
 		}));
 	}
 	_calculateSrcRectByRatio(left, top, width, height, numerator, denominator) {
@@ -2073,6 +2084,7 @@ let ImageCropperController = class ImageCropperController extends _univerjs_core
 			if (command.id !== OpenImageCropOperation.id) return;
 			const params = command.params;
 			if (params == null) return;
+			if (this._activeCropSession != null) this._commandService.syncExecuteCommand(CloseImageCropOperation.id, { isAuto: true });
 			const { unitId, subUnitId, drawingId } = params;
 			const renderObject = this._renderManagerService.getRenderUnitById(unitId);
 			const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
@@ -2107,12 +2119,20 @@ let ImageCropperController = class ImageCropperController extends _univerjs_core
 				prstGeom: imageShape.prstGeom,
 				applyTransform: imageShape.calculateTransformWithSrcRect()
 			});
+			this._cropSnapshots.set(imageCropperObject, this._pendingCropSnapshot ?? this._captureCropSnapshot(imageShape));
+			this._pendingCropSnapshot = null;
 			scene.addObject(imageCropperObject, imageShape.getLayerIndex() + 1).attachTransformerTo(imageCropperObject);
+			this._activeCropSession = {
+				scene,
+				imageShape,
+				imageCropperObject
+			};
 			transformer === null || transformer === void 0 || transformer.createControlForCopper(imageCropperObject);
 			this._addHoverForImageCopper(imageCropperObject);
 			imageShape.openRenderByCropper();
 			transformer === null || transformer === void 0 || transformer.refreshControls();
 			imageCropperObject.makeDirty(true);
+			this._registerCropShortcuts();
 			this._commandService.syncExecuteCommand(_univerjs_drawing.SetDrawingSelectedOperation.id, [{
 				unitId,
 				subUnitId,
@@ -2127,39 +2147,40 @@ let ImageCropperController = class ImageCropperController extends _univerjs_core
 	_initCloseCrop() {
 		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
 			if (command.id !== CloseImageCropOperation.id) return;
-			const currentUnit = this._univerInstanceService.getFocusedUnit();
-			if (currentUnit == null) return;
-			const unitId = currentUnit.getUnitId();
-			const renderObject = this._renderManagerService.getRenderUnitById(unitId);
-			const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-			if (scene == null) return true;
-			const imageCropperObject = this._searchCropObject(scene);
-			if (imageCropperObject == null) return;
-			const imageShape = this._getApplyObjectByCropObject(imageCropperObject);
-			if (imageShape == null) return;
+			const cropSession = this._activeCropSession;
+			if (cropSession == null) return;
+			const { scene, imageShape, imageCropperObject } = cropSession;
 			const transformer = scene.getTransformerByCreate();
 			transformer.detachFrom(imageCropperObject);
 			transformer.clearCopperControl();
-			const srcRect = this._getSrcRectByTransformState(imageShape, imageCropperObject);
-			const drawingParam = this._drawingManagerService.getDrawingOKey(imageShape.oKey);
-			if (drawingParam != null) {
-				const { left, top, height, width } = imageCropperObject;
-				this._drawingManagerService.featurePluginUpdateNotification([{
-					...drawingParam,
-					transform: {
-						...drawingParam.transform,
-						left,
-						top,
-						height,
-						width
-					},
-					srcRect: srcRect.srcRectAngle
-				}]);
+			const params = command.params;
+			if (params === null || params === void 0 ? void 0 : params.isCancel) this._restoreCropSnapshot(imageShape, imageCropperObject);
+			else {
+				const srcRect = this._getSrcRectByTransformState(imageShape, imageCropperObject);
+				const drawingParam = this._drawingManagerService.getDrawingOKey(imageShape.oKey);
+				if (drawingParam != null) {
+					const { left, top, height, width } = imageCropperObject;
+					this._drawingManagerService.featurePluginUpdateNotification([{
+						...drawingParam,
+						transform: {
+							...drawingParam.transform,
+							left,
+							top,
+							height,
+							width
+						},
+						srcRect: srcRect.srcRectAngle
+					}]);
+				}
+				imageShape.setSrcRect({ ...srcRect.srcRectAngle });
 			}
-			imageShape.setSrcRect({ ...srcRect.srcRectAngle });
 			imageShape.closeRenderByCropper();
 			imageShape.makeDirty(true);
-			imageCropperObject === null || imageCropperObject === void 0 || imageCropperObject.dispose();
+			transformer.refreshControls();
+			this._cropSnapshots.delete(imageCropperObject);
+			imageCropperObject.dispose();
+			this._activeCropSession = null;
+			this._cropShortcutDisposables.dispose();
 		}));
 		const sheetUnit$ = this._univerInstanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_SHEET).pipe((0, rxjs.switchMap)((workbook) => workbook ? workbook.activeSheet$ : (0, rxjs.of)(null)));
 		this.disposeWithMe(sheetUnit$.subscribe(() => {
@@ -2175,6 +2196,33 @@ let ImageCropperController = class ImageCropperController extends _univerjs_core
 		if (applyObject == null) return null;
 		return applyObject;
 	}
+	_captureCropSnapshot(imageShape) {
+		return {
+			transform: imageShape.getState(),
+			srcRect: imageShape.srcRect == null ? imageShape.srcRect : { ...imageShape.srcRect }
+		};
+	}
+	_restoreCropSnapshot(imageShape, imageCropperObject) {
+		const snapshot = this._cropSnapshots.get(imageCropperObject);
+		if (snapshot) {
+			imageShape.transformByStateCloseCropper(snapshot.transform);
+			imageShape.setSrcRect(snapshot.srcRect);
+		}
+	}
+	_registerCropShortcuts() {
+		this._cropShortcutDisposables.dispose();
+		this._cropShortcutDisposables.add(this._shortcutService.registerShortcut({
+			id: CloseImageCropOperation.id,
+			binding: _univerjs_ui.KeyCode.ENTER,
+			priority: 1e3
+		}));
+		this._cropShortcutDisposables.add(this._shortcutService.registerShortcut({
+			id: CloseImageCropOperation.id,
+			binding: _univerjs_ui.KeyCode.ESC,
+			priority: 1e3,
+			staticParameters: { isCancel: true }
+		}));
+	}
 	_addListenerOnImage(scene) {
 		const transformer = scene.getTransformerByCreate();
 		let startTransform = null;
@@ -2227,8 +2275,8 @@ let ImageCropperController = class ImageCropperController extends _univerjs_core
 		}));
 	}
 	_getSrcRectByTransformState(applyObject, imageCropperObject) {
-		const { left, top, height, width, strokeWidth, angle: copperAngle } = imageCropperObject;
-		const { left: applyLeft, top: applyTop, width: applyWidth, height: applyHeight, angle: applyAngle, strokeWidth: applyStrokeWidth } = applyObject;
+		const { left, top, height, width } = imageCropperObject;
+		const { left: applyLeft, top: applyTop, width: applyWidth, height: applyHeight, angle: applyAngle } = applyObject;
 		const newLeft = left - applyLeft;
 		const newTop = top - applyTop;
 		const srcRect = {
@@ -2264,7 +2312,8 @@ ImageCropperController = __decorate([
 	__decorateParam(2, _univerjs_engine_render.IRenderManagerService),
 	__decorateParam(3, _univerjs_core.IUniverInstanceService),
 	__decorateParam(4, _univerjs_ui.IMessageService),
-	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService))
+	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService)),
+	__decorateParam(6, _univerjs_ui.IShortcutService)
 ], ImageCropperController);
 
 //#endregion
@@ -2536,7 +2585,7 @@ _defineProperty(UniverDrawingUIPlugin, "pluginName", "UNIVER_DRAWING_UI_PLUGIN")
 _defineProperty(UniverDrawingUIPlugin, "packageName", name);
 _defineProperty(UniverDrawingUIPlugin, "version", version);
 UniverDrawingUIPlugin = __decorate([
-	(0, _univerjs_core.DependentOn)(_univerjs_drawing.UniverDrawingPlugin, _univerjs_engine_render.UniverRenderEnginePlugin, _univerjs_ui.UniverUIPlugin),
+	(0, _univerjs_core.DependentOn)(_univerjs_drawing.UniverDrawingPlugin, _univerjs_engine_render.UniverRenderEnginePlugin),
 	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
 	__decorateParam(2, _univerjs_core.IConfigService)
 ], UniverDrawingUIPlugin);
@@ -2605,21 +2654,17 @@ function normalizeText(value) {
 	return value.trim();
 }
 function hasCapability(panelCapabilities, item, key, fallback = true) {
-	var _ref, _item$capabilities$ke, _item$capabilities;
-	return (_ref = (_item$capabilities$ke = item === null || item === void 0 || (_item$capabilities = item.capabilities) === null || _item$capabilities === void 0 ? void 0 : _item$capabilities[key]) !== null && _item$capabilities$ke !== void 0 ? _item$capabilities$ke : panelCapabilities === null || panelCapabilities === void 0 ? void 0 : panelCapabilities[key]) !== null && _ref !== void 0 ? _ref : fallback;
+	var _item$capabilities;
+	return (item === null || item === void 0 || (_item$capabilities = item.capabilities) === null || _item$capabilities === void 0 ? void 0 : _item$capabilities[key]) ?? (panelCapabilities === null || panelCapabilities === void 0 ? void 0 : panelCapabilities[key]) ?? fallback;
 }
 function ObjectListPanelBase(props) {
-	var _selectedItem$canMove, _selectedItem$canMove2, _capabilities$reorder;
 	const { items, selectedIds, allObjectIds, focusedId, labels, showHeader = true, capabilities, onSelect, onSetVisible, onCommitName, onCommitDescription, onMoveForward, onMoveBackward, onToggleExpanded, onToggleSelectable, onLocate, onReorder } = props;
 	const selectedIdSet = (0, react.useMemo)(() => new Set(selectedIds), [selectedIds]);
 	const [draggingId, setDraggingId] = (0, react.useState)(null);
 	const [searchQuery, setSearchQuery] = (0, react.useState)("");
 	const [filterMode, setFilterMode] = (0, react.useState)("all");
 	const [collapsedSectionIds, setCollapsedSectionIds] = (0, react.useState)(() => /* @__PURE__ */ new Set());
-	const selectedItem = (0, react.useMemo)(() => {
-		var _ref2, _items$find;
-		return (_ref2 = (_items$find = items.find((item) => item.id === focusedId)) !== null && _items$find !== void 0 ? _items$find : items.find((item) => selectedIdSet.has(item.id))) !== null && _ref2 !== void 0 ? _ref2 : null;
-	}, [
+	const selectedItem = (0, react.useMemo)(() => items.find((item) => item.id === focusedId) ?? items.find((item) => selectedIdSet.has(item.id)) ?? null, [
 		focusedId,
 		items,
 		selectedIdSet
@@ -2627,11 +2672,10 @@ function ObjectListPanelBase(props) {
 	const visibleItems = (0, react.useMemo)(() => {
 		const normalizedQuery = normalizeText(searchQuery).toLocaleLowerCase();
 		return items.filter((item) => {
-			var _item$description;
 			if (filterMode === "hidden" && item.visible !== false) return false;
 			if (filterMode === "locked" && item.selectable !== false) return false;
 			if (!normalizedQuery) return true;
-			return item.name.toLocaleLowerCase().includes(normalizedQuery) || ((_item$description = item.description) !== null && _item$description !== void 0 ? _item$description : "").toLocaleLowerCase().includes(normalizedQuery);
+			return item.name.toLocaleLowerCase().includes(normalizedQuery) || (item.description ?? "").toLocaleLowerCase().includes(normalizedQuery);
 		});
 	}, [
 		filterMode,
@@ -2641,8 +2685,7 @@ function ObjectListPanelBase(props) {
 	const visibleItemSections = (0, react.useMemo)(() => {
 		const sectionMap = /* @__PURE__ */ new Map();
 		visibleItems.forEach((item) => {
-			var _item$sectionId, _item$sectionTitle;
-			const sectionId = (_item$sectionId = item.sectionId) !== null && _item$sectionId !== void 0 ? _item$sectionId : "";
+			const sectionId = item.sectionId ?? "";
 			const existingSection = sectionMap.get(sectionId);
 			if (existingSection) {
 				existingSection.items.push(item);
@@ -2650,35 +2693,30 @@ function ObjectListPanelBase(props) {
 			}
 			sectionMap.set(sectionId, {
 				id: sectionId,
-				title: (_item$sectionTitle = item.sectionTitle) !== null && _item$sectionTitle !== void 0 ? _item$sectionTitle : "",
+				title: item.sectionTitle ?? "",
 				items: [item]
 			});
 		});
-		return [...sectionMap.values()].sort((a, b) => {
-			var _sectionOrder$get, _sectionOrder$get2;
-			return ((_sectionOrder$get = sectionOrder.get(a.id)) !== null && _sectionOrder$get !== void 0 ? _sectionOrder$get : 3) - ((_sectionOrder$get2 = sectionOrder.get(b.id)) !== null && _sectionOrder$get2 !== void 0 ? _sectionOrder$get2 : 3);
-		});
+		return [...sectionMap.values()].sort((a, b) => (sectionOrder.get(a.id) ?? 3) - (sectionOrder.get(b.id) ?? 3));
 	}, [visibleItems]);
 	const showSectionHeaders = visibleItemSections.length > 1 || visibleItemSections.some((section) => section.id === "floating");
-	const allIds = (0, react.useMemo)(() => allObjectIds !== null && allObjectIds !== void 0 ? allObjectIds : items.map((item) => item.id), [allObjectIds, items]);
+	const allIds = (0, react.useMemo)(() => allObjectIds ?? items.map((item) => item.id), [allObjectIds, items]);
 	const selectedIndex = selectedItem ? items.findIndex((item) => item.id === selectedItem.id) : -1;
-	const canMoveForward = !!selectedItem && !!onMoveForward && !selectedItem.disabled && ((_selectedItem$canMove = selectedItem.canMoveForward) !== null && _selectedItem$canMove !== void 0 ? _selectedItem$canMove : selectedIndex > 0) && hasCapability(capabilities, selectedItem, "arrange");
-	const canMoveBackward = !!selectedItem && !!onMoveBackward && !selectedItem.disabled && ((_selectedItem$canMove2 = selectedItem.canMoveBackward) !== null && _selectedItem$canMove2 !== void 0 ? _selectedItem$canMove2 : selectedIndex >= 0 && selectedIndex < items.length - 1) && hasCapability(capabilities, selectedItem, "arrange");
+	const canMoveForward = !!selectedItem && !!onMoveForward && !selectedItem.disabled && (selectedItem.canMoveForward ?? selectedIndex > 0) && hasCapability(capabilities, selectedItem, "arrange");
+	const canMoveBackward = !!selectedItem && !!onMoveBackward && !selectedItem.disabled && (selectedItem.canMoveBackward ?? (selectedIndex >= 0 && selectedIndex < items.length - 1)) && hasCapability(capabilities, selectedItem, "arrange");
 	const showArrangeControls = hasCapability(capabilities, selectedItem, "arrange") && (!!onMoveForward || !!onMoveBackward);
 	const showLocateControl = !!onLocate && hasCapability(capabilities, selectedItem, "locate");
-	const canReorder = !!onReorder && ((_capabilities$reorder = capabilities === null || capabilities === void 0 ? void 0 : capabilities.reorder) !== null && _capabilities$reorder !== void 0 ? _capabilities$reorder : true);
+	const canReorder = !!onReorder && ((capabilities === null || capabilities === void 0 ? void 0 : capabilities.reorder) ?? true);
 	const findItem = (objectId) => {
-		var _items$find2;
-		return objectId ? (_items$find2 = items.find((item) => item.id === objectId)) !== null && _items$find2 !== void 0 ? _items$find2 : null : null;
+		return objectId ? items.find((item) => item.id === objectId) ?? null : null;
 	};
 	const handleDrop = (targetId) => {
-		var _source$parentId, _target$parentId, _source$sectionId, _target$sectionId;
 		const source = findItem(draggingId);
 		const target = findItem(targetId);
 		setDraggingId(null);
 		if (!source || !target || source.id === target.id || source.disabled || target.disabled) return;
-		if (((_source$parentId = source.parentId) !== null && _source$parentId !== void 0 ? _source$parentId : "") !== ((_target$parentId = target.parentId) !== null && _target$parentId !== void 0 ? _target$parentId : "")) return;
-		if (((_source$sectionId = source.sectionId) !== null && _source$sectionId !== void 0 ? _source$sectionId : "") !== ((_target$sectionId = target.sectionId) !== null && _target$sectionId !== void 0 ? _target$sectionId : "")) return;
+		if ((source.parentId ?? "") !== (target.parentId ?? "")) return;
+		if ((source.sectionId ?? "") !== (target.sectionId ?? "")) return;
 		if (source.canReorder === false || target.canReorder === false) return;
 		onReorder === null || onReorder === void 0 || onReorder(source.id, target.id);
 	};
@@ -2761,7 +2799,7 @@ function ObjectListPanelBase(props) {
 						["locked", labels.filterLocked]
 					].map(([mode, label]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
-						className: (0, _univerjs_design.clsx)("univer-h-7 univer-min-w-0 univer-flex-1 univer-rounded-md univer-border univer-border-solid univer-px-2 univer-text-xs univer-outline-none univer-transition-colors dark:!univer-border-gray-700", filterMode === mode ? "dark:!univer-bg-primary-900/30 univer-border-primary-500 univer-bg-primary-50 univer-text-primary-600 dark:!univer-text-primary-200" : "univer-border-gray-200 univer-bg-white univer-text-gray-600 hover:univer-bg-gray-50 dark:!univer-bg-gray-900 dark:!univer-text-gray-300 dark:hover:!univer-bg-gray-800"),
+						className: (0, _univerjs_design.clsx)("univer-h-7 univer-min-w-0 univer-flex-1 univer-rounded-md univer-border univer-border-solid univer-px-2 univer-text-xs univer-outline-none univer-transition-colors dark:!univer-border-gray-700", filterMode === mode ? "dark:!univer-bg-primary-900/30 univer-border-primary-500 univer-bg-primary-50 univer-text-primary-600 dark:!univer-text-primary-200" : "univer-border-gray-200 univer-bg-gray-0 univer-text-gray-600 hover:univer-bg-gray-50 dark:!univer-bg-gray-900 dark:!univer-text-gray-300 dark:hover:!univer-bg-gray-800"),
 						"aria-pressed": filterMode === mode,
 						onClick: () => setFilterMode(mode),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -2791,7 +2829,7 @@ function ObjectListPanelBase(props) {
 								children: [
 									section.id ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: "univer-flex univer-size-4 univer-shrink-0 univer-items-center univer-justify-center",
-										children: sectionCollapsed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, {})
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: (0, _univerjs_design.clsx)({ "-univer-rotate-90 rtl:univer-rotate-90": sectionCollapsed }) })
 									}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "univer-size-4 univer-shrink-0" }),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: "univer-min-w-0 univer-flex-1 univer-truncate univer-text-left",
@@ -2836,12 +2874,11 @@ function ObjectListPanelBase(props) {
 	});
 }
 function ObjectListRow(props) {
-	var _item$level;
 	const { item, selected, labels, showLock, showName, showVisible, draggable, dragging, onSelect, onToggleExpanded, onToggleVisible, onToggleSelectable, onCommitName, onDragStart, onDragEnd, onDrop } = props;
 	const [draftName, setDraftName] = (0, react.useState)(item.name);
 	const skipCommitOnBlurRef = (0, react.useRef)(false);
 	const disabled = item.disabled === true;
-	const level = (_item$level = item.level) !== null && _item$level !== void 0 ? _item$level : 0;
+	const level = item.level ?? 0;
 	const locked = item.selectable === false;
 	(0, react.useEffect)(() => {
 		setDraftName(item.name);
@@ -2901,11 +2938,11 @@ function ObjectListRow(props) {
 					event.stopPropagation();
 					onToggleExpanded();
 				},
-				children: item.expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, {})
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: (0, _univerjs_design.clsx)({ "-univer-rotate-90 rtl:univer-rotate-90": !item.expanded }) })
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "univer-size-5 univer-shrink-0" }),
 			showName ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
 				className: (0, _univerjs_design.clsx)("univer-h-7 univer-w-0 univer-min-w-0 univer-flex-1", disabled && "univer-cursor-not-allowed"),
-				inputClass: (0, _univerjs_design.clsx)("!univer-h-7 univer-min-w-0 univer-overflow-hidden univer-text-ellipsis univer-whitespace-nowrap !univer-rounded !univer-border-transparent !univer-bg-transparent !univer-px-1 univer-text-sm univer-text-gray-900 !univer-shadow-none focus:!univer-border-primary-500 focus:!univer-bg-white focus:!univer-ring-1 focus:!univer-ring-primary-100 disabled:!univer-bg-transparent disabled:univer-opacity-100 dark:!univer-text-gray-100 dark:focus:!univer-bg-gray-900 dark:focus:!univer-ring-primary-900", disabled && "univer-text-gray-400 dark:!univer-text-gray-500"),
+				inputClass: (0, _univerjs_design.clsx)("!univer-h-7 univer-min-w-0 univer-overflow-hidden univer-text-ellipsis univer-whitespace-nowrap !univer-rounded !univer-border-transparent !univer-bg-transparent !univer-px-1 univer-text-sm univer-text-gray-900 !univer-shadow-none focus:!univer-border-primary-500 focus:!univer-bg-gray-0 focus:!univer-ring-1 focus:!univer-ring-primary-100 disabled:!univer-bg-transparent disabled:univer-opacity-100 dark:!univer-text-gray-100 dark:focus:!univer-bg-gray-900 dark:focus:!univer-ring-primary-900", disabled && "univer-text-gray-400 dark:!univer-text-gray-500"),
 				inputStyle: {
 					maxWidth: "100%",
 					boxSizing: "border-box"
@@ -2952,15 +2989,13 @@ function ObjectListRow(props) {
 	});
 }
 function ObjectDetailsEditor(props) {
-	var _item$name, _item$description2;
 	const { item, labels, showName, showDescription, onCommitName, onCommitDescription } = props;
-	const [draftName, setDraftName] = (0, react.useState)((_item$name = item === null || item === void 0 ? void 0 : item.name) !== null && _item$name !== void 0 ? _item$name : "");
-	const [draftDescription, setDraftDescription] = (0, react.useState)((_item$description2 = item === null || item === void 0 ? void 0 : item.description) !== null && _item$description2 !== void 0 ? _item$description2 : "");
+	const [draftName, setDraftName] = (0, react.useState)((item === null || item === void 0 ? void 0 : item.name) ?? "");
+	const [draftDescription, setDraftDescription] = (0, react.useState)((item === null || item === void 0 ? void 0 : item.description) ?? "");
 	const disabled = (item === null || item === void 0 ? void 0 : item.disabled) === true;
 	(0, react.useEffect)(() => {
-		var _item$name2, _item$description3;
-		setDraftName((_item$name2 = item === null || item === void 0 ? void 0 : item.name) !== null && _item$name2 !== void 0 ? _item$name2 : "");
-		setDraftDescription((_item$description3 = item === null || item === void 0 ? void 0 : item.description) !== null && _item$description3 !== void 0 ? _item$description3 : "");
+		setDraftName((item === null || item === void 0 ? void 0 : item.name) ?? "");
+		setDraftDescription((item === null || item === void 0 ? void 0 : item.description) ?? "");
 	}, [
 		item === null || item === void 0 ? void 0 : item.description,
 		item === null || item === void 0 ? void 0 : item.id,
@@ -3001,15 +3036,14 @@ function ObjectDetailsEditor(props) {
 					className: "univer-text-xs univer-text-gray-500 dark:!univer-text-gray-400",
 					children: labels.description
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
-					className: "univer-box-border univer-min-h-16 univer-w-full univer-resize-none univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-p-2 univer-text-sm univer-text-gray-900 univer-outline-none focus:univer-border-primary-500 focus:univer-ring-1 focus:univer-ring-primary-100 disabled:univer-cursor-not-allowed disabled:univer-opacity-70 dark:!univer-border-gray-700 dark:!univer-bg-gray-900 dark:!univer-text-gray-100 dark:focus:!univer-ring-primary-900",
+					className: "univer-box-border univer-min-h-16 univer-w-full univer-resize-none univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-bg-gray-0 univer-p-2 univer-text-sm univer-text-gray-900 univer-outline-none focus:univer-border-primary-500 focus:univer-ring-1 focus:univer-ring-primary-100 disabled:univer-cursor-not-allowed disabled:univer-opacity-70 dark:!univer-border-gray-700 dark:!univer-bg-gray-900 dark:!univer-text-gray-100 dark:focus:!univer-ring-primary-900",
 					value: draftDescription,
 					disabled,
 					placeholder: labels.descriptionPlaceholder,
 					"aria-label": labels.description,
 					onChange: (event) => setDraftDescription(event.currentTarget.value),
 					onBlur: () => {
-						var _item$description4;
-						if (!disabled && normalizeText(draftDescription) !== ((_item$description4 = item.description) !== null && _item$description4 !== void 0 ? _item$description4 : "")) onCommitDescription(draftDescription);
+						if (!disabled && normalizeText(draftDescription) !== (item.description ?? "")) onCommitDescription(draftDescription);
 					}
 				})]
 			})
@@ -3080,7 +3114,7 @@ const DrawingAlign = (props) => {
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-relative univer-mt-2.5 univer-flex univer-h-full",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-w-full univer-text-gray-900 dark:!univer-text-white",
+				className: "univer-w-full univer-text-gray-900 dark:!univer-text-gray-0",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
 					value: alignValue,
 					options: alignOptions,

package/lib/cjs/locale/ar-SA.js

@@ -89,29 +89,11 @@ const locale = { "drawing-ui": {
 		null: "لا يوجد تحديد للكائن"
 	},
 	"image-text-wrap": {
-		title: "التفاف النص",
-		wrappingStyle: "نمط التفاف",
 		square: "مربع",
 		topAndBottom: "أعلى وأسفل",
 		inline: "في نفس السطر مع النص",
 		behindText: "خلف النص",
-		inFrontText: "أمام النص",
-		wrapText: "تفاف النص",
-		bothSide: "كلا الجانبين",
-		leftOnly: "يسار فقط",
-		rightOnly: "يمين فقط",
-		distanceFromText: "المسافة من النص",
-		top: "أعلى(بكسل)",
-		left: "يسار(بكسل)",
-		bottom: "أسفل(بكسل)",
-		right: "يمين(بكسل)"
-	},
-	"image-popup": {
-		replace: "استبدال",
-		delete: "حذف",
-		edit: "تحرير",
-		crop: "قص",
-		reset: "إعادة تعيين الحجم"
+		inFrontText: "أمام النص"
 	}
 } };
 

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

@@ -89,29 +89,11 @@ const locale = { "drawing-ui": {
 		null: "Cap objecte seleccionat"
 	},
 	"image-text-wrap": {
-		title: "Ajust del text",
-		wrappingStyle: "Estil d'ajust",
 		square: "Quadrat",
 		topAndBottom: "A dalt i a baix",
 		inline: "En línia amb el text",
 		behindText: "Darrere del text",
-		inFrontText: "Davant del text",
-		wrapText: "Ajusta el text",
-		bothSide: "Ambdós costats",
-		leftOnly: "Només esquerra",
-		rightOnly: "Només dreta",
-		distanceFromText: "Distància del text",
-		top: "A dalt(px)",
-		left: "Esquerra(px)",
-		bottom: "A baix(px)",
-		right: "Dreta(px)"
-	},
-	"image-popup": {
-		replace: "Reemplaça",
-		delete: "Elimina",
-		edit: "Edita",
-		crop: "Retalla",
-		reset: "Restableix la mida"
+		inFrontText: "Davant del text"
 	}
 } };