@univerjs/drawing-ui 1.0.0-beta.0 → 1.0.0-beta.1

package/lib/index.css

@@ -110,6 +110,18 @@
   flex-shrink: 0;
 }
 
+.-univer-rotate-90 {
+  --univer-tw-rotate: -90deg;
+  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(-90deg) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
+  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
+}
+
+.univer-rotate-90 {
+  --univer-tw-rotate: 90deg;
+  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(90deg) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
+  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
+}
+
 .univer-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -248,6 +260,10 @@
   background-color: #0000 !important;
 }
 
+.univer-bg-gray-0 {
+  background-color: var(--univer-gray-0);
+}
+
 .univer-bg-gray-100 {
   background-color: var(--univer-gray-100);
 }
@@ -260,10 +276,6 @@
   background-color: #0000;
 }
 
-.univer-bg-white {
-  background-color: var(--univer-white);
-}
-
 .univer-fill-primary-600 {
   fill: var(--univer-primary-600);
 }
@@ -459,8 +471,8 @@
   border-color: var(--univer-primary-500);
 }
 
-.focus\:\!univer-bg-white:focus {
-  background-color: var(--univer-white) !important;
+.focus\:\!univer-bg-gray-0:focus {
+  background-color: var(--univer-gray-0) !important;
 }
 
 .focus\:\!univer-ring-1:focus {
@@ -513,6 +525,12 @@
   background-color: #0000;
 }
 
+.rtl\:univer-rotate-90:where([dir="rtl"], [dir="rtl"] *) {
+  --univer-tw-rotate: 90deg;
+  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(90deg) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
+  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
+}
+
 .dark\:\!univer-border-gray-700:where(.univer-dark, .univer-dark *) {
   border-color: var(--univer-gray-700) !important;
 }
@@ -529,6 +547,10 @@
   background-color: var(--univer-gray-900) !important;
 }
 
+.dark\:\!univer-text-gray-0:where(.univer-dark, .univer-dark *) {
+  color: var(--univer-gray-0) !important;
+}
+
 .dark\:\!univer-text-gray-100:where(.univer-dark, .univer-dark *) {
   color: var(--univer-gray-100) !important;
 }
@@ -557,10 +579,6 @@
   color: var(--univer-primary-300) !important;
 }
 
-.dark\:\!univer-text-white:where(.univer-dark, .univer-dark *) {
-  color: var(--univer-white) !important;
-}
-
 .dark\:hover\:\!univer-bg-gray-700:hover:where(.univer-dark, .univer-dark *) {
   background-color: var(--univer-gray-700) !important;
 }

package/lib/index.js

@@ -1,9 +1,9 @@
-import { ArrangeTypeEnum, BooleanNumber, CommandType, DependentOn, Disposable, DrawingTypeEnum, ICommandService, IConfigService, IImageIoService, IURLImageService, IUniverInstanceService, ImageSourceType, Inject, Injector, LocaleService, Plugin, PositionedObjectLayoutType, UniverInstanceType, checkIfMove, debounce, generateRandomId, merge, toDisposable } from "@univerjs/core";
+import { ArrangeTypeEnum, BooleanNumber, CommandType, DependentOn, Disposable, DisposableCollection, DrawingTypeEnum, ICommandService, IConfigService, IImageIoService, IURLImageService, IUniverInstanceService, ImageSourceType, Inject, Injector, LocaleService, Plugin, PositionedObjectLayoutType, UniverInstanceType, checkIfMove, debounce, generateRandomId, merge, toDisposable } from "@univerjs/core";
 import { DRAWING_GROUPABLE_TYPES, IDrawingManagerService, SetDrawingSelectedOperation, UniverDrawingPlugin, getDrawingShapeKeyByDrawingSearch, isGroupableDrawingType, resolveDrawingRotateEnabled } from "@univerjs/drawing";
 import { CURSOR_TYPE, Canvas, DRAWING_OBJECT_LAYER_INDEX, DrawingGroupObject, Group, IRenderManagerService, Image, RENDER_CLASS_TYPE, Rect, Shape, UniverRenderEnginePlugin, Vector2, degToRad, getGroupState, precisionTo, transformObjectOutOfGroup } from "@univerjs/engine-render";
-import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IDialogService, IGalleryService, IMenuManagerService, IMessageService, IconManager, MenuItemType, useDependency, useObservable } from "@univerjs/ui";
+import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IDialogService, IGalleryService, IMenuManagerService, IMessageService, IShortcutService, IconManager, KeyCode, MenuItemType, useDependency, useObservable } from "@univerjs/ui";
 import { BehaviorSubject, Observable, bufferTime, filter, map, merge as merge$1, of, startWith, switchMap } from "rxjs";
-import { ArrowDownIcon, ArrowUpIcon, AutofillDoubleIcon, BottomIcon, ChartIcon, CreateCopyIcon, CropIcon, DeleteIcon, DocSettingIcon, EyeIcon, EyelashIcon, GroupIcon, LocateFixedIcon, LockIcon, MoreDownIcon, MoreRightIcon, MoveDownIcon, MoveUpIcon, TextWrapShapeIcon, TopmostIcon, UngroupIcon, UnlockIcon } from "@univerjs/icons";
+import { ArrowDownIcon, ArrowUpIcon, AutofillDoubleIcon, BottomIcon, ChartIcon, CreateCopyIcon, CropIcon, DeleteIcon, DocSettingIcon, EyeIcon, EyelashIcon, GroupIcon, LocateFixedIcon, LockIcon, MoreDownIcon, MoveDownIcon, MoveUpIcon, TextWrapShapeIcon, TopmostIcon, UngroupIcon, UnlockIcon } from "@univerjs/icons";
 import { Button, Checkbox, Dropdown, DropdownMenu, Input, InputNumber, MessageType, Select, Separator, Tooltip, borderClassName, clsx } from "@univerjs/design";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -236,21 +236,21 @@ const CancelDrawingGroupOperation = {
 const OpenImageCropOperation = {
 	id: "sheet.operation.open-image-crop",
 	type: CommandType.OPERATION,
-	handler: (accessor, params) => {
+	handler: (_accessor, _params) => {
 		return true;
 	}
 };
 const CloseImageCropOperation = {
 	id: "sheet.operation.close-image-crop",
 	type: CommandType.OPERATION,
-	handler: (accessor, params) => {
+	handler: (_accessor, _params) => {
 		return true;
 	}
 };
 const AutoImageCropOperation = {
 	id: "sheet.operation.Auto-image-crop",
 	type: CommandType.OPERATION,
-	handler: (accessor, params) => {
+	handler: (_accessor, _params) => {
 		return true;
 	}
 };
@@ -624,7 +624,7 @@ const menuSchema = { [ContextMenuPosition.DRAWING]: { [ContextMenuGroup.OTHERS]:
 //#endregion
 //#region package.json
 var name = "@univerjs/drawing-ui";
-var version = "1.0.0-beta.0";
+var version = "1.0.0-beta.1";
 
 //#endregion
 //#region src/config/config.ts
@@ -697,11 +697,11 @@ function ImagePopupMenu(props) {
 			open: visible,
 			onOpenChange: onVisibleChange,
 			children: /* @__PURE__ */ jsxs("div", {
-				className: 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", borderClassName, {
+				className: 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", 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__ */ jsx(AutofillDoubleIcon, { className: "univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-white" }), showMore && /* @__PURE__ */ jsx(MoreDownIcon, { className: "dark:!univer-text-white" })]
+				children: [/* @__PURE__ */ jsx(AutofillDoubleIcon, { className: "univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-gray-0" }), showMore && /* @__PURE__ */ jsx(MoreDownIcon, { className: "dark:!univer-text-gray-0" })]
 			})
 		})
 	});
@@ -742,7 +742,7 @@ function ToolbarDropdownButton(props) {
 		open,
 		onOpenChange: setOpen,
 		overlay: /* @__PURE__ */ 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__ */ jsxs("button", {
 				type: "button",
 				onClick: () => {
@@ -831,7 +831,7 @@ function DocImageFloatingToolbar(props) {
 			event.stopPropagation();
 			event.preventDefault();
 		},
-		className: 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", borderClassName),
+		className: 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", borderClassName),
 		children: [/* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(ToolbarDropdownButton, {
 			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,
@@ -856,11 +856,14 @@ function DocChartFloatingToolbar(props) {
 	const [hidden, setHidden] = 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 === null || chartTypeItem === void 0 ? void 0 : chartTypeItem.options) ?? []).map((option) => ({
-		label: String(option.label),
-		value: option.value,
-		icon: /* @__PURE__ */ jsx(ChartIcon, {})
-	}));
+	const chartTypeOptions = ((chartTypeItem === null || chartTypeItem === void 0 ? void 0 : chartTypeItem.options) ?? []).map((option) => {
+		const Icon = option.icon ? iconManager.get(option.icon) : ChartIcon;
+		return {
+			label: String(option.label),
+			value: option.value,
+			icon: /* @__PURE__ */ jsx(Icon, {})
+		};
+	});
 	const executeMenuItem = (item) => {
 		if (!item || item.disable) return;
 		if (item.hideOnClick) setHidden(true);
@@ -873,7 +876,7 @@ function DocChartFloatingToolbar(props) {
 			event.stopPropagation();
 			event.preventDefault();
 		},
-		className: 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", borderClassName),
+		className: 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", borderClassName),
 		children: [chartTypeItem && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(ToolbarDropdownButton, {
 			title: localeService.t(chartTypeItem.label),
 			value: chartTypeItem.value ?? ((_chartTypeOptions$ = chartTypeOptions[0]) === null || _chartTypeOptions$ === void 0 ? void 0 : _chartTypeOptions$.value) ?? "",
@@ -1953,7 +1956,7 @@ var ImageCropperObject = class extends Shape {
 //#endregion
 //#region src/controllers/image-cropper.controller.ts
 let ImageCropperController = class ImageCropperController extends Disposable {
-	constructor(_commandService, _drawingManagerService, _renderManagerService, _univerInstanceService, _messageService, _localeService) {
+	constructor(_commandService, _drawingManagerService, _renderManagerService, _univerInstanceService, _messageService, _localeService, _shortcutService) {
 		super();
 		this._commandService = _commandService;
 		this._drawingManagerService = _drawingManagerService;
@@ -1961,7 +1964,13 @@ let ImageCropperController = class ImageCropperController extends Disposable {
 		this._univerInstanceService = _univerInstanceService;
 		this._messageService = _messageService;
 		this._localeService = _localeService;
+		this._shortcutService = _shortcutService;
 		_defineProperty(this, "_sceneListenerOnImageMap", /* @__PURE__ */ new WeakSet());
+		_defineProperty(this, "_cropShortcutDisposables", new DisposableCollection());
+		_defineProperty(this, "_cropSnapshots", /* @__PURE__ */ new WeakMap());
+		_defineProperty(this, "_pendingCropSnapshot", null);
+		_defineProperty(this, "_activeCropSession", null);
+		this.disposeWithMe(this._cropShortcutDisposables);
 		this._init();
 	}
 	_init() {
@@ -1996,12 +2005,17 @@ let ImageCropperController = class ImageCropperController extends Disposable {
 				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) {
@@ -2069,6 +2083,7 @@ let ImageCropperController = class ImageCropperController extends Disposable {
 			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;
@@ -2103,12 +2118,20 @@ let ImageCropperController = class ImageCropperController extends Disposable {
 				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(SetDrawingSelectedOperation.id, [{
 				unitId,
 				subUnitId,
@@ -2123,39 +2146,40 @@ let ImageCropperController = class ImageCropperController extends Disposable {
 	_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$(UniverInstanceType.UNIVER_SHEET).pipe(switchMap((workbook) => workbook ? workbook.activeSheet$ : of(null)));
 		this.disposeWithMe(sheetUnit$.subscribe(() => {
@@ -2171,6 +2195,33 @@ let ImageCropperController = class ImageCropperController extends Disposable {
 		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: KeyCode.ENTER,
+			priority: 1e3
+		}));
+		this._cropShortcutDisposables.add(this._shortcutService.registerShortcut({
+			id: CloseImageCropOperation.id,
+			binding: KeyCode.ESC,
+			priority: 1e3,
+			staticParameters: { isCancel: true }
+		}));
+	}
 	_addListenerOnImage(scene) {
 		const transformer = scene.getTransformerByCreate();
 		let startTransform = null;
@@ -2223,8 +2274,8 @@ let ImageCropperController = class ImageCropperController extends Disposable {
 		}));
 	}
 	_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 = {
@@ -2260,7 +2311,8 @@ ImageCropperController = __decorate([
 	__decorateParam(2, IRenderManagerService),
 	__decorateParam(3, IUniverInstanceService),
 	__decorateParam(4, IMessageService),
-	__decorateParam(5, Inject(LocaleService))
+	__decorateParam(5, Inject(LocaleService)),
+	__decorateParam(6, IShortcutService)
 ], ImageCropperController);
 
 //#endregion
@@ -2746,7 +2798,7 @@ function ObjectListPanelBase(props) {
 						["locked", labels.filterLocked]
 					].map(([mode, label]) => /* @__PURE__ */ jsx("button", {
 						type: "button",
-						className: 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: 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__ */ jsx("span", {
@@ -2776,7 +2828,7 @@ function ObjectListPanelBase(props) {
 								children: [
 									section.id ? /* @__PURE__ */ jsx("span", {
 										className: "univer-flex univer-size-4 univer-shrink-0 univer-items-center univer-justify-center",
-										children: sectionCollapsed ? /* @__PURE__ */ jsx(MoreRightIcon, {}) : /* @__PURE__ */ jsx(MoreDownIcon, {})
+										children: /* @__PURE__ */ jsx(MoreDownIcon, { className: clsx({ "-univer-rotate-90 rtl:univer-rotate-90": sectionCollapsed }) })
 									}) : /* @__PURE__ */ jsx("span", { className: "univer-size-4 univer-shrink-0" }),
 									/* @__PURE__ */ jsx("span", {
 										className: "univer-min-w-0 univer-flex-1 univer-truncate univer-text-left",
@@ -2885,11 +2937,11 @@ function ObjectListRow(props) {
 					event.stopPropagation();
 					onToggleExpanded();
 				},
-				children: item.expanded ? /* @__PURE__ */ jsx(MoreDownIcon, {}) : /* @__PURE__ */ jsx(MoreRightIcon, {})
+				children: /* @__PURE__ */ jsx(MoreDownIcon, { className: clsx({ "-univer-rotate-90 rtl:univer-rotate-90": !item.expanded }) })
 			}) : /* @__PURE__ */ jsx("span", { className: "univer-size-5 univer-shrink-0" }),
 			showName ? /* @__PURE__ */ jsx(Input, {
 				className: clsx("univer-h-7 univer-w-0 univer-min-w-0 univer-flex-1", disabled && "univer-cursor-not-allowed"),
-				inputClass: 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: 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"
@@ -2983,7 +3035,7 @@ function ObjectDetailsEditor(props) {
 					className: "univer-text-xs univer-text-gray-500 dark:!univer-text-gray-400",
 					children: labels.description
 				}), /* @__PURE__ */ 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,
@@ -3061,7 +3113,7 @@ const DrawingAlign = (props) => {
 		}), /* @__PURE__ */ jsx("div", {
 			className: "univer-relative univer-mt-2.5 univer-flex univer-h-full",
 			children: /* @__PURE__ */ 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__ */ jsx(Select, {
 					value: alignValue,
 					options: alignOptions,

package/lib/locale/ar-SA.js

@@ -88,29 +88,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/locale/ca-ES.js

@@ -88,29 +88,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"
 	}
 } };
 

package/lib/locale/de-DE.js

@@ -88,29 +88,11 @@ const locale = { "drawing-ui": {
 		null: "Keine Objektauswahl"
 	},
 	"image-text-wrap": {
-		title: "Textumbruch",
-		wrappingStyle: "Umbruchstil",
 		square: "Quadratisch",
 		topAndBottom: "Oben und unten",
 		inline: "Im Textfluss",
 		behindText: "Hinter dem Text",
-		inFrontText: "Vor dem Text",
-		wrapText: "Text umbrechen",
-		bothSide: "Beide Seiten",
-		leftOnly: "Nur links",
-		rightOnly: "Nur rechts",
-		distanceFromText: "Abstand vom Text",
-		top: "Oben(px)",
-		left: "Links(px)",
-		bottom: "Unten(px)",
-		right: "Rechts(px)"
-	},
-	"image-popup": {
-		replace: "Ersetzen",
-		delete: "Löschen",
-		edit: "Bearbeiten",
-		crop: "Zuschneiden",
-		reset: "Größe zurücksetzen"
+		inFrontText: "Vor dem Text"
 	}
 } };
 

package/lib/locale/en-US.js

@@ -102,30 +102,12 @@ const locale = { "drawing-ui": {
 		},
 		null: "No Object Selection"
 	},
-	"image-popup": {
-		replace: "Replace",
-		delete: "Delete",
-		edit: "Edit",
-		crop: "Crop",
-		reset: "Reset Size"
-	},
 	"image-text-wrap": {
-		title: "Text Wrapping",
-		wrappingStyle: "Wrapping Style",
 		square: "Square",
 		topAndBottom: "Top and Bottom",
 		inline: "In line with text",
 		behindText: "Behind text",
-		inFrontText: "In front of text",
-		wrapText: "Wrap text",
-		bothSide: "Both sides",
-		leftOnly: "Left only",
-		rightOnly: "Right only",
-		distanceFromText: "Distance from text",
-		top: "Top(px)",
-		left: "Left(px)",
-		bottom: "Bottom(px)",
-		right: "Right(px)"
+		inFrontText: "In front of text"
 	}
 } };
 

package/lib/locale/es-ES.js

@@ -88,29 +88,11 @@ const locale = { "drawing-ui": {
 		null: "Ningún objeto seleccionado"
 	},
 	"image-text-wrap": {
-		title: "Ajuste de texto",
-		wrappingStyle: "Estilo de ajuste",
 		square: "Cuadrado",
 		topAndBottom: "Arriba y abajo",
 		inline: "En línea con el texto",
 		behindText: "Detrás del texto",
-		inFrontText: "Delante del texto",
-		wrapText: "Ajustar texto",
-		bothSide: "Ambos lados",
-		leftOnly: "Solo izquierda",
-		rightOnly: "Solo derecha",
-		distanceFromText: "Distancia del texto",
-		top: "Arriba(px)",
-		left: "Izquierda(px)",
-		bottom: "Abajo(px)",
-		right: "Derecha(px)"
-	},
-	"image-popup": {
-		replace: "Reemplazar",
-		delete: "Eliminar",
-		edit: "Editar",
-		crop: "Recortar",
-		reset: "Restablecer tamaño"
+		inFrontText: "Delante del texto"
 	}
 } };
 

package/lib/locale/fa-IR.js

@@ -88,29 +88,11 @@ const locale = { "drawing-ui": {
 		null: "هیچ شیئی انتخاب نشده است"
 	},
 	"image-text-wrap": {
-		title: "پیچش متن",
-		wrappingStyle: "سبک پیچش",
 		square: "مربع",
 		topAndBottom: "بالا و پایین",
 		inline: "در یک خط با متن",
 		behindText: "پشت متن",
-		inFrontText: "جلوی متن",
-		wrapText: "پیچش متن",
-		bothSide: "هر دو طرف",
-		leftOnly: "فقط سمت چپ",
-		rightOnly: "فقط سمت راست",
-		distanceFromText: "فاصله از متن",
-		top: "بالا(px)",
-		left: "چپ(px)",
-		bottom: "پایین(px)",
-		right: "راست(px)"
-	},
-	"image-popup": {
-		replace: "تعویض",
-		delete: "حذف",
-		edit: "ویرایش",
-		crop: "کراپ",
-		reset: "بازنشانی اندازه"
+		inFrontText: "جلوی متن"
 	}
 } };
 

package/lib/locale/fr-FR.js

@@ -88,29 +88,11 @@ const locale = { "drawing-ui": {
 		null: "Aucune sélection d'objet"
 	},
 	"image-text-wrap": {
-		title: "Habillage du texte",
-		wrappingStyle: "Style d'habillage",
 		square: "Carré",
 		topAndBottom: "Haut et bas",
 		inline: "Aligné avec le texte",
 		behindText: "Derrière le texte",
-		inFrontText: "Devant le texte",
-		wrapText: "Habiller le texte",
-		bothSide: "Des deux côtés",
-		leftOnly: "Seulement à gauche",
-		rightOnly: "Seulement à droite",
-		distanceFromText: "Distance du texte",
-		top: "Haut(px)",
-		left: "Gauche(px)",
-		bottom: "Bas(px)",
-		right: "Droite(px)"
-	},
-	"image-popup": {
-		replace: "Remplacer",
-		delete: "Supprimer",
-		edit: "Modifier",
-		crop: "Rogner",
-		reset: "Réinitialiser la taille"
+		inFrontText: "Devant le texte"
 	}
 } };