@univerjs/drawing-ui 1.0.0-alpha.7 → 1.0.0-beta.0

package/lib/es/index.js

@@ -1,6 +1,6 @@
-import { ArrangeTypeEnum, BooleanNumber, CommandType, Disposable, 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, getDrawingShapeKeyByDrawingSearch, isGroupableDrawingType, resolveDrawingRotateEnabled } from "@univerjs/drawing";
-import { CURSOR_TYPE, Canvas, DRAWING_OBJECT_LAYER_INDEX, DrawingGroupObject, Group, IRenderManagerService, Image, RENDER_CLASS_TYPE, Rect, Shape, Vector2, degToRad, getGroupState, precisionTo, transformObjectOutOfGroup } from "@univerjs/engine-render";
+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 { 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 { 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";
@@ -271,19 +271,17 @@ function isKnownDrawingUINonRotatableType(drawingType) {
 	return drawingType === DrawingTypeEnum.DRAWING_CHART;
 }
 function resolveDrawingUIRotateEnabled(drawing, options = {}) {
-	var _options$isKnownNonRo;
 	return 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 = 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);
@@ -626,7 +624,7 @@ const menuSchema = { [ContextMenuPosition.DRAWING]: { [ContextMenuGroup.OTHERS]:
 //#endregion
 //#region package.json
 var name = "@univerjs/drawing-ui";
-var version = "1.0.0-alpha.7";
+var version = "1.0.0-beta.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -726,7 +724,7 @@ function ToolbarGroup(props) {
 }
 function ToolbarButton(props) {
 	return /* @__PURE__ */ jsx(Tooltip, {
-		title: useDependency(LocaleService).t(props.titleKey),
+		title: props.title,
 		placement: "bottom",
 		children: /* @__PURE__ */ jsx("button", {
 			type: "button",
@@ -738,9 +736,8 @@ function ToolbarButton(props) {
 	});
 }
 function ToolbarDropdownButton(props) {
-	var _props$options$find;
 	const [open, setOpen] = 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__ */ jsx(Dropdown, {
 		open,
 		onOpenChange: setOpen,
@@ -774,11 +771,11 @@ function ToolbarDropdownButton(props) {
 	});
 }
 function DocImageFloatingToolbar(props) {
-	var _univerInstanceServic, _wrappingStyleOptions, _wrappingStyleOptions2;
+	var _wrappingStyleOptions;
 	const commandService = useDependency(ICommandService);
 	const iconManager = useDependency(IconManager);
 	const localeService = useDependency(LocaleService);
-	const documentDataModel = (_univerInstanceServic = useDependency(IUniverInstanceService).getUnit(props.unitId, UniverInstanceType.UNIVER_DOC)) !== null && _univerInstanceServic !== void 0 ? _univerInstanceServic : void 0;
+	const documentDataModel = useDependency(IUniverInstanceService).getUnit(props.unitId, UniverInstanceType.UNIVER_DOC) ?? void 0;
 	const [wrappingStyle, setWrappingStyle] = useState(() => getWrappingStyle(documentDataModel, props.drawingId));
 	const [hidden, setHidden] = useState(false);
 	const actionItems = props.menuItems.filter((item) => item.type !== "select" && item.icon).sort((a, b) => a.index - b.index);
@@ -836,14 +833,14 @@ function DocImageFloatingToolbar(props) {
 		},
 		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),
 		children: [/* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, { orientation: "vertical" }), /* @__PURE__ */ jsx(ToolbarGroup, { children: actionItems.map((item) => {
 			const Icon = iconManager.get(item.icon);
 			return /* @__PURE__ */ jsx(ToolbarButton, {
-				titleKey: item.label,
+				title: localeService.t(item.label),
 				disabled: item.disable,
 				onClick: () => executeMenuItem(item),
 				children: /* @__PURE__ */ jsx(Icon, {})
@@ -852,14 +849,14 @@ function DocImageFloatingToolbar(props) {
 	});
 }
 function DocChartFloatingToolbar(props) {
-	var _chartTypeItem$option, _ref, _chartTypeItem$value, _chartTypeOptions$;
+	var _chartTypeOptions$;
 	const commandService = useDependency(ICommandService);
 	const iconManager = useDependency(IconManager);
 	const localeService = useDependency(LocaleService);
 	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$option = chartTypeItem === null || chartTypeItem === void 0 ? void 0 : chartTypeItem.options) !== null && _chartTypeItem$option !== void 0 ? _chartTypeItem$option : []).map((option) => ({
+	const chartTypeOptions = ((chartTypeItem === null || chartTypeItem === void 0 ? void 0 : chartTypeItem.options) ?? []).map((option) => ({
 		label: String(option.label),
 		value: option.value,
 		icon: /* @__PURE__ */ jsx(ChartIcon, {})
@@ -879,7 +876,7 @@ function DocChartFloatingToolbar(props) {
 		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),
 		children: [chartTypeItem && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ 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) {
@@ -890,7 +887,7 @@ function DocChartFloatingToolbar(props) {
 		}) }), actionItems.length > 0 && /* @__PURE__ */ jsx(Separator, { orientation: "vertical" })] }), actionItems.length > 0 && /* @__PURE__ */ jsx(ToolbarGroup, { children: actionItems.map((item) => {
 			const Icon = iconManager.get(item.icon);
 			return /* @__PURE__ */ jsx(ToolbarButton, {
-				titleKey: item.label,
+				title: localeService.t(item.label),
 				disabled: item.disable,
 				onClick: () => executeMenuItem(item),
 				children: /* @__PURE__ */ jsx(Icon, {})
@@ -900,7 +897,7 @@ function DocChartFloatingToolbar(props) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -908,7 +905,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.140.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);
@@ -963,7 +960,7 @@ let ComponentsController = class ComponentsController extends Disposable {
 ComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager)), __decorateParam(1, Inject(IconManager))], ComponentsController);
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -974,7 +971,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -987,14 +984,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.140.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.137.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -1369,7 +1366,7 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 	}
 	_getSceneAndTransformerByDrawingSearch(unitId) {
 		if (unitId == null) return;
-		const renderObject = this._renderManagerService.getRenderById(unitId);
+		const renderObject = this._renderManagerService.getRenderUnitById(unitId);
 		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
 		if (scene == null) return null;
 		return {
@@ -1981,7 +1978,7 @@ let ImageCropperController = class ImageCropperController extends Disposable {
 			const drawingParams = this._drawingManagerService.getFocusDrawings();
 			if (drawingParams.length !== 1) return;
 			const { unitId, subUnitId, drawingId } = drawingParams[0];
-			const renderObject = this._renderManagerService.getRenderById(unitId);
+			const renderObject = this._renderManagerService.getRenderUnitById(unitId);
 			const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
 			if (scene == null) return true;
 			if (this._searchCropObject(scene) != null) this._commandService.syncExecuteCommand(CloseImageCropOperation.id, { isAuto: true });
@@ -2073,7 +2070,7 @@ let ImageCropperController = class ImageCropperController extends Disposable {
 			const params = command.params;
 			if (params == null) return;
 			const { unitId, subUnitId, drawingId } = params;
-			const renderObject = this._renderManagerService.getRenderById(unitId);
+			const renderObject = this._renderManagerService.getRenderUnitById(unitId);
 			const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
 			if (scene == null) return true;
 			if (!this._sceneListenerOnImageMap.has(scene)) {
@@ -2129,7 +2126,7 @@ let ImageCropperController = class ImageCropperController extends Disposable {
 			const currentUnit = this._univerInstanceService.getFocusedUnit();
 			if (currentUnit == null) return;
 			const unitId = currentUnit.getUnitId();
-			const renderObject = this._renderManagerService.getRenderById(unitId);
+			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);
@@ -2299,7 +2296,7 @@ let ImageUpdateController = class ImageUpdateController extends Disposable {
 	}
 	_getSceneAndTransformerByDrawingSearch(unitId) {
 		if (unitId == null) return;
-		const renderObject = this._renderManagerService.getRenderById(unitId);
+		const renderObject = this._renderManagerService.getRenderUnitById(unitId);
 		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
 		if (scene == null) return null;
 		return {
@@ -2534,7 +2531,11 @@ let UniverDrawingUIPlugin = class UniverDrawingUIPlugin extends Plugin {
 _defineProperty(UniverDrawingUIPlugin, "pluginName", "UNIVER_DRAWING_UI_PLUGIN");
 _defineProperty(UniverDrawingUIPlugin, "packageName", name);
 _defineProperty(UniverDrawingUIPlugin, "version", version);
-UniverDrawingUIPlugin = __decorate([__decorateParam(1, Inject(Injector)), __decorateParam(2, IConfigService)], UniverDrawingUIPlugin);
+UniverDrawingUIPlugin = __decorate([
+	DependentOn(UniverDrawingPlugin, UniverRenderEnginePlugin),
+	__decorateParam(1, Inject(Injector)),
+	__decorateParam(2, IConfigService)
+], UniverDrawingUIPlugin);
 
 //#endregion
 //#region src/views/object-list-panel/object-list-panel-layer.ts
@@ -2600,21 +2601,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 = useMemo(() => new Set(selectedIds), [selectedIds]);
 	const [draggingId, setDraggingId] = useState(null);
 	const [searchQuery, setSearchQuery] = useState("");
 	const [filterMode, setFilterMode] = useState("all");
 	const [collapsedSectionIds, setCollapsedSectionIds] = useState(() => /* @__PURE__ */ new Set());
-	const selectedItem = 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 = useMemo(() => items.find((item) => item.id === focusedId) ?? items.find((item) => selectedIdSet.has(item.id)) ?? null, [
 		focusedId,
 		items,
 		selectedIdSet
@@ -2622,11 +2619,10 @@ function ObjectListPanelBase(props) {
 	const visibleItems = 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,
@@ -2636,8 +2632,7 @@ function ObjectListPanelBase(props) {
 	const visibleItemSections = 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);
@@ -2645,35 +2640,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 = useMemo(() => allObjectIds !== null && allObjectIds !== void 0 ? allObjectIds : items.map((item) => item.id), [allObjectIds, items]);
+	const allIds = 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);
 	};
@@ -2831,12 +2821,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] = useState(item.name);
 	const skipCommitOnBlurRef = 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;
 	useEffect(() => {
 		setDraftName(item.name);
@@ -2947,15 +2936,13 @@ function ObjectListRow(props) {
 	});
 }
 function ObjectDetailsEditor(props) {
-	var _item$name, _item$description2;
 	const { item, labels, showName, showDescription, onCommitName, onCommitDescription } = props;
-	const [draftName, setDraftName] = useState((_item$name = item === null || item === void 0 ? void 0 : item.name) !== null && _item$name !== void 0 ? _item$name : "");
-	const [draftDescription, setDraftDescription] = useState((_item$description2 = item === null || item === void 0 ? void 0 : item.description) !== null && _item$description2 !== void 0 ? _item$description2 : "");
+	const [draftName, setDraftName] = useState((item === null || item === void 0 ? void 0 : item.name) ?? "");
+	const [draftDescription, setDraftDescription] = useState((item === null || item === void 0 ? void 0 : item.description) ?? "");
 	const disabled = (item === null || item === void 0 ? void 0 : item.disabled) === true;
 	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,
@@ -3003,8 +2990,7 @@ function ObjectDetailsEditor(props) {
 					"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);
 					}
 				})]
 			})
@@ -3155,7 +3141,7 @@ const DrawingGroup = (props) => {
 	const GroupIcon = iconManager.get("GroupIcon");
 	const UngroupIcon = iconManager.get("UngroupIcon");
 	const drawingParam = drawings[0];
-	const transformer = drawingParam ? (_renderManagerService = renderManagerService.getRenderById(drawingParam.unitId)) === null || _renderManagerService === void 0 || (_renderManagerService = _renderManagerService.scene) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.getTransformerByCreate() : void 0;
+	const transformer = drawingParam ? (_renderManagerService = renderManagerService.getRenderUnitById(drawingParam.unitId)) === null || _renderManagerService === void 0 || (_renderManagerService = _renderManagerService.scene) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.getTransformerByCreate() : void 0;
 	const { groupShow, groupBtnShow, ungroupBtnShow } = useObservable(transformer ? () => merge$1(transformer.clearControl$.pipe(filter((changeSelf) => changeSelf === true), map(() => ({
 		groupShow: false,
 		groupBtnShow: false,
@@ -3234,7 +3220,7 @@ const DrawingTransform = (props) => {
 	var _renderManagerService, _scene$getEngine;
 	const renderManagerService = useDependency(IRenderManagerService);
 	const drawingParam = props.drawings[0];
-	const scene = drawingParam ? (_renderManagerService = renderManagerService.getRenderById(drawingParam.unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.scene : void 0;
+	const scene = drawingParam ? (_renderManagerService = renderManagerService.getRenderUnitById(drawingParam.unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.scene : void 0;
 	const topScene = scene === null || scene === void 0 || (_scene$getEngine = scene.getEngine()) === null || _scene$getEngine === void 0 ? void 0 : _scene$getEngine.activeScene;
 	if (!(drawingParam === null || drawingParam === void 0 ? void 0 : drawingParam.transform) || !scene || !topScene) return null;
 	return /* @__PURE__ */ jsx(DrawingTransformContent, { ...props });
@@ -3247,7 +3233,7 @@ function DrawingTransformContent(props) {
 	const drawingParam = drawings[0];
 	const transform = drawingParam.transform;
 	const { unitId, subUnitId, drawingId, drawingType } = drawingParam;
-	const scene = renderManagerService.getRenderById(unitId).scene;
+	const scene = renderManagerService.getRenderUnitById(unitId).scene;
 	const topScene = scene.getEngine().activeScene;
 	const transformer = scene.getTransformerByCreate();
 	const { width: originWidth = 0, height: originHeight = 0, left: originX = 0, top: originY = 0, angle: originRotation = 0 } = transform;
@@ -3614,7 +3600,7 @@ const DrawingCommonPanel = (props) => {
 	const localeService = useDependency(LocaleService);
 	const { drawings, hasArrange = true, hasTransform = true, hasAlign = true, hasCropper = true, hasGroup = true } = props;
 	const drawingParam = drawings[0];
-	const renderObject = drawingParam ? renderManagerService.getRenderById(drawingParam.unitId) : void 0;
+	const renderObject = drawingParam ? renderManagerService.getRenderUnitById(drawingParam.unitId) : void 0;
 	const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
 	const transformer = scene === null || scene === void 0 ? void 0 : scene.getTransformerByCreate();
 	const { arrangeShow, transformShow, alignShow, cropperShow, nullShow } = useObservable(() => merge$1(drawingManagerService.focus$.pipe(map(getPanelShowState)), ...transformer ? [transformer.clearControl$.pipe(filter((changeSelf) => changeSelf === true), map(() => getPanelShowState([]))), transformer.changeStart$.pipe(map((state) => getPanelShowState(getUpdateParams(state.objects, drawingManagerService))))] : []), getPanelShowState(drawings), false, [drawingManagerService, transformer]);

package/lib/es/locale/fr-FR.js

@@ -17,7 +17,7 @@ const locale = { "drawing-ui": {
 		nameInput: "Nom de l'objet",
 		description: "Description",
 		descriptionPlaceholder: "Ajouter une description",
-		details: "Details",
+		details: "Détails",
 		locate: "Localiser",
 		expand: "Développer",
 		collapse: "Réduire",

package/lib/es/locale/ru-RU.js

@@ -88,22 +88,22 @@ const locale = { "drawing-ui": {
 		null: "Нет выбранных объектов"
 	},
 	"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)"
+		title: "Обтекание текстом",
+		wrappingStyle: "Стиль обтекания",
+		square: "Вокруг рамки",
+		topAndBottom: "Сверху и снизу",
+		inline: "В тексте",
+		behindText: "За текстом",
+		inFrontText: "Перед текстом",
+		wrapText: "Обтекание",
+		bothSide: "С обеих сторон",
+		leftOnly: "Только слева",
+		rightOnly: "Только справа",
+		distanceFromText: "Расстояние от текста",
+		top: "Сверху (пкс)",
+		left: "Слева (пкс)",
+		bottom: "Снизу (пкс)",
+		right: "Справа (пкс)"
 	},
 	"image-popup": {
 		replace: "Заменить",

package/lib/es/locale/vi-VN.js

@@ -88,22 +88,22 @@ const locale = { "drawing-ui": {
 		null: "Không có đối tượng nào được chọn"
 	},
 	"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)"
+		title: "Bố cục văn bản",
+		wrappingStyle: "Kiểu bố cục",
+		square: "Vuông",
+		topAndBottom: "Trên và dưới",
+		inline: "Cùng dòng với văn bản",
+		behindText: "Phía sau văn bản",
+		inFrontText: "Phía trước văn bản",
+		wrapText: "Bọc văn bản",
+		bothSide: "Cả hai bên",
+		leftOnly: "Chỉ bên trái",
+		rightOnly: "Chỉ bên phải",
+		distanceFromText: "Khoảng cách từ văn bản",
+		top: "Trên (px)",
+		left: "Trái (px)",
+		bottom: "Dưới (px)",
+		right: "Phải (px)"
 	},
 	"image-popup": {
 		replace: "Thay thế",