@univerjs/drawing-ui 1.0.0-alpha.3 → 1.0.0-alpha.4

package/lib/es/index.js

@@ -2,7 +2,7 @@ import { ArrangeTypeEnum, BooleanNumber, CommandType, Disposable, DrawingTypeEnu
 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 { ComponentManager, ContextMenuGroup, ContextMenuPosition, IDialogService, IGalleryService, IMenuManagerService, IMessageService, IconManager, MenuItemType, useDependency, useObservable } from "@univerjs/ui";
-import { BehaviorSubject, Observable, bufferTime, filter, map, of, switchMap } from "rxjs";
+import { BehaviorSubject, Observable, bufferTime, filter, map, merge as merge$1, of, 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 } 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";
@@ -624,7 +624,7 @@ const menuSchema = { [ContextMenuPosition.DRAWING]: { [ContextMenuGroup.OTHERS]:
 //#endregion
 //#region package.json
 var name = "@univerjs/drawing-ui";
-var version = "1.0.0-alpha.3";
+var version = "1.0.0-alpha.4";
 
 //#endregion
 //#region src/config/config.ts
@@ -657,6 +657,10 @@ function ImagePopupMenu(props) {
 	var _popup$extraProps, _popup$extraProps2, _popup$extraProps3;
 	const { popup } = props;
 	const menuItems = popup === null || popup === void 0 || (_popup$extraProps = popup.extraProps) === null || _popup$extraProps === void 0 ? void 0 : _popup$extraProps.menuItems;
+	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
+	const [visible, setVisible] = useState(false);
+	const [isHovered, setIsHovered] = useState(false);
 	if (!menuItems) return null;
 	if (((_popup$extraProps2 = popup.extraProps) === null || _popup$extraProps2 === void 0 ? void 0 : _popup$extraProps2.variant) === "doc-floating-toolbar" && popup.extraProps.unitId && popup.extraProps.subUnitId && popup.extraProps.drawingId) return /* @__PURE__ */ jsx(DocImageFloatingToolbar, {
 		menuItems,
@@ -665,15 +669,11 @@ function ImagePopupMenu(props) {
 		drawingId: popup.extraProps.drawingId
 	});
 	if (((_popup$extraProps3 = popup.extraProps) === null || _popup$extraProps3 === void 0 ? void 0 : _popup$extraProps3.variant) === "doc-chart-floating-toolbar") return /* @__PURE__ */ jsx(DocChartFloatingToolbar, { menuItems });
-	const commandService = useDependency(ICommandService);
-	const localeService = useDependency(LocaleService);
-	const [visible, setVisible] = useState(false);
-	const [isHovered, setHovered] = useState(false);
 	const handleMouseEnter = () => {
-		setHovered(true);
+		setIsHovered(true);
 	};
 	const handleMouseLeave = () => {
-		setHovered(false);
+		setIsHovered(false);
 	};
 	const onVisibleChange = (visible) => {
 		setVisible(visible);
@@ -772,16 +772,14 @@ function ToolbarDropdownButton(props) {
 	});
 }
 function DocImageFloatingToolbar(props) {
-	var _univerInstanceServic, _wrappingStyleOptions, _wrappingStyleOptions2, _editItem$label, _cropItem$label, _deleteItem$label;
+	var _univerInstanceServic, _wrappingStyleOptions, _wrappingStyleOptions2;
 	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 [wrappingStyle, setWrappingStyle] = useState(() => getWrappingStyle(documentDataModel, props.drawingId));
 	const [hidden, setHidden] = useState(false);
-	const getMenuItem = (label) => props.menuItems.find((item) => item.label === label);
-	const editItem = getMenuItem("drawing-ui.image-popup.edit");
-	const cropItem = getMenuItem("drawing-ui.image-popup.crop");
-	const deleteItem = getMenuItem("drawing-ui.image-popup.delete");
+	const actionItems = props.menuItems.filter((item) => item.type !== "select" && item.icon).sort((a, b) => a.index - b.index);
 	const wrappingStyleOptions = [
 		{
 			label: localeService.t("drawing-ui.image-text-wrap.inline"),
@@ -811,6 +809,7 @@ function DocImageFloatingToolbar(props) {
 	];
 	const executeMenuItem = (item) => {
 		if (!item || item.disable) return;
+		if (item.hideOnClick) setHidden(true);
 		commandService.executeCommand(item.commandId, item.commandParams);
 	};
 	const updateWrappingStyle = (value) => {
@@ -834,45 +833,30 @@ function DocImageFloatingToolbar(props) {
 			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),
-		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"),
-				value: wrappingStyle,
-				options: wrappingStyleOptions,
-				onChange: updateWrappingStyle
-			}) }),
-			/* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
-			/* @__PURE__ */ jsxs(ToolbarGroup, { children: [/* @__PURE__ */ jsx(ToolbarButton, {
-				titleKey: (_editItem$label = editItem === null || editItem === void 0 ? void 0 : editItem.label) !== null && _editItem$label !== void 0 ? _editItem$label : "drawing-ui.image-popup.edit",
-				disabled: !editItem || editItem.disable,
-				onClick: () => {
-					setHidden(true);
-					executeMenuItem(editItem);
-				},
-				children: /* @__PURE__ */ jsx(DocSettingIcon, {})
-			}), /* @__PURE__ */ jsx(ToolbarButton, {
-				titleKey: (_cropItem$label = cropItem === null || cropItem === void 0 ? void 0 : cropItem.label) !== null && _cropItem$label !== void 0 ? _cropItem$label : "drawing-ui.image-popup.crop",
-				disabled: !cropItem || cropItem.disable,
-				onClick: () => executeMenuItem(cropItem),
-				children: /* @__PURE__ */ jsx(CropIcon, {})
-			})] }),
-			/* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
-			/* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(ToolbarButton, {
-				titleKey: (_deleteItem$label = deleteItem === null || deleteItem === void 0 ? void 0 : deleteItem.label) !== null && _deleteItem$label !== void 0 ? _deleteItem$label : "drawing-ui.image-popup.delete",
-				disabled: !deleteItem || deleteItem.disable,
-				onClick: () => executeMenuItem(deleteItem),
-				children: /* @__PURE__ */ jsx(DeleteIcon, {})
-			}) })
-		]
+		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"),
+			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,
+				disabled: item.disable,
+				onClick: () => executeMenuItem(item),
+				children: /* @__PURE__ */ jsx(Icon, {})
+			}, `${item.commandId}-${item.index}`);
+		}) })] })]
 	});
 }
 function DocChartFloatingToolbar(props) {
 	var _chartTypeItem$option, _ref, _chartTypeItem$value, _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 editItem = props.menuItems.find((item) => item.icon === "edit");
-	const deleteItem = props.menuItems.find((item) => item.icon === "delete");
+	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,
@@ -880,8 +864,10 @@ function DocChartFloatingToolbar(props) {
 	}));
 	const executeMenuItem = (item) => {
 		if (!item || item.disable) return;
+		if (item.hideOnClick) setHidden(true);
 		commandService.executeCommand(item.commandId, item.commandParams);
 	};
+	if (hidden) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-u-comp": "doc-chart-floating-toolbar",
 		onMouseDown: (event) => {
@@ -899,17 +885,15 @@ function DocChartFloatingToolbar(props) {
 					commandService.executeCommand(chartTypeItem.commandId, (_chartTypeItem$comman = chartTypeItem.commandParamsFactory) === null || _chartTypeItem$comman === void 0 ? void 0 : _chartTypeItem$comman.call(chartTypeItem, value));
 				}
 			}
-		}) }), (editItem || deleteItem) && /* @__PURE__ */ jsx(Separator, { orientation: "vertical" })] }), (editItem || deleteItem) && /* @__PURE__ */ jsxs(ToolbarGroup, { children: [editItem && /* @__PURE__ */ jsx(ToolbarButton, {
-			titleKey: editItem.label,
-			disabled: editItem.disable,
-			onClick: () => executeMenuItem(editItem),
-			children: /* @__PURE__ */ jsx(DocSettingIcon, {})
-		}), deleteItem && /* @__PURE__ */ jsx(ToolbarButton, {
-			titleKey: deleteItem.label,
-			disabled: deleteItem.disable,
-			onClick: () => executeMenuItem(deleteItem),
-			children: /* @__PURE__ */ jsx(DeleteIcon, {})
-		})] })]
+		}) }), 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,
+				disabled: item.disable,
+				onClick: () => executeMenuItem(item),
+				children: /* @__PURE__ */ jsx(Icon, {})
+			}, `${item.commandId}-${item.index}`);
+		}) })]
 	});
 }
 
@@ -963,6 +947,9 @@ let ComponentsController = class ComponentsController extends Disposable {
 	_registerIcons() {
 		this.disposeWithMe(this._iconManager.register({
 			BottomIcon,
+			DrawingCropIcon: CropIcon,
+			DrawingDeleteIcon: DeleteIcon,
+			DrawingEditIcon: DocSettingIcon,
 			GroupIcon,
 			MoveDownIcon,
 			MoveUpIcon,
@@ -1293,12 +1280,24 @@ function getUpdateParams(objects, drawingManagerService) {
 //#endregion
 //#region src/controllers/drawing-update.controller.ts
 function hasRefreshMetadata(refreshParam) {
-	return "hidden" in refreshParam || "behindText" in refreshParam;
+	return "hidden" in refreshParam || "behindText" in refreshParam || "selectable" in refreshParam;
 }
 function syncDrawingHiddenState(shape, drawingParam) {
 	if (!("hidden" in drawingParam)) return;
 	drawingParam.hidden === true ? shape.hide() : shape.show();
 }
+function syncDrawingSelectableState(shape, drawingParam, scene, drawingManagerService) {
+	var _scene$getTransformer;
+	const previousDrawing = drawingManagerService.getOldDrawingByParam(drawingParam);
+	if (!("selectable" in drawingParam) && (!previousDrawing || !("selectable" in previousDrawing))) return;
+	const selectable = drawingParam.selectable !== false;
+	shape.evented = selectable;
+	if (selectable) return;
+	(_scene$getTransformer = scene.getTransformer()) === null || _scene$getTransformer === void 0 || _scene$getTransformer.clearControlByIds([shape.oKey]);
+	const focusedDrawings = drawingManagerService.getFocusDrawings();
+	const remainingDrawings = focusedDrawings.filter(({ unitId, subUnitId, drawingId }) => unitId !== drawingParam.unitId || subUnitId !== drawingParam.subUnitId || drawingId !== drawingParam.drawingId);
+	if (remainingDrawings.length !== focusedDrawings.length) drawingManagerService.focusDrawing(remainingDrawings);
+}
 function mergeRefreshMetadata(drawingParam, refreshParam) {
 	if (!hasRefreshMetadata(refreshParam)) return drawingParam;
 	return {
@@ -1628,8 +1627,8 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 					subUnitId,
 					drawingId
 				})) {
-					var _scene$getTransformer;
-					(_scene$getTransformer = scene.getTransformer()) === null || _scene$getTransformer === void 0 || _scene$getTransformer.clearSelectedObjects();
+					var _scene$getTransformer2;
+					(_scene$getTransformer2 = scene.getTransformer()) === null || _scene$getTransformer2 === void 0 || _scene$getTransformer2.clearSelectedObjects();
 				}
 			});
 		}));
@@ -1637,7 +1636,7 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 	_drawingUpdateListener() {
 		this.disposeWithMe(this._drawingManagerService.update$.subscribe((params) => {
 			params.forEach((param) => {
-				var _setClipBounds, _scene$getTransformer2;
+				var _setClipBounds, _scene$getTransformer3;
 				const { unitId, subUnitId, drawingId } = param;
 				const drawingParam = this._drawingManagerService.getDrawingByParam(param);
 				if (drawingParam == null) return;
@@ -1652,7 +1651,7 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 					subUnitId,
 					drawingId
 				});
-				const drawingShape = scene.getObject(drawingShapeKey);
+				const drawingShape = scene.getObjectIncludeInGroup(drawingShapeKey);
 				if (drawingShape == null) return true;
 				drawingShape.transformByState({
 					left,
@@ -1667,8 +1666,9 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 				});
 				(_setClipBounds = drawingShape.setClipBounds) === null || _setClipBounds === void 0 || _setClipBounds.call(drawingShape, transform.clipBounds);
 				syncDrawingHiddenState(drawingShape, drawingParam);
+				syncDrawingSelectableState(drawingShape, drawingParam, scene, this._drawingManagerService);
 				ensureDrawingRenderLayer(scene, drawingShape, drawingParam);
-				(_scene$getTransformer2 = scene.getTransformer()) === null || _scene$getTransformer2 === void 0 || _scene$getTransformer2.debounceRefreshControls();
+				(_scene$getTransformer3 = scene.getTransformer()) === null || _scene$getTransformer3 === void 0 || _scene$getTransformer3.debounceRefreshControls();
 			});
 		}));
 	}
@@ -1714,6 +1714,7 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 				});
 				(_setClipBounds2 = drawingShape.setClipBounds) === null || _setClipBounds2 === void 0 || _setClipBounds2.call(drawingShape, transform.clipBounds);
 				syncDrawingHiddenState(drawingShape, drawingParamWithRefreshMetadata);
+				syncDrawingSelectableState(drawingShape, drawingParamWithRefreshMetadata, scene, this._drawingManagerService);
 				ensureDrawingRenderLayer(scene, drawingShape, drawingParamWithRefreshMetadata);
 			});
 		}));
@@ -1730,7 +1731,7 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 					subUnitId,
 					drawingId
 				});
-				const drawingShape = scene.getObject(drawingShapeKey);
+				const drawingShape = scene.getObjectIncludeInGroup(drawingShapeKey);
 				if (drawingShape == null) return true;
 				if (visible) drawingShape.show();
 				else drawingShape.hide();
@@ -2362,7 +2363,8 @@ let ImageUpdateController = class ImageUpdateController extends Disposable {
 			const imageParam = this._drawingManagerService.getDrawingByParam(param);
 			if (imageParam == null) return;
 			const images = await this._drawingRenderService.renderImages(imageParam, renderObject.scene);
-			this._drawingManagerService.refreshTransform([imageParam]);
+			const currentImageParam = this._drawingManagerService.getDrawingByParam(param);
+			if (currentImageParam) this._drawingManagerService.refreshTransform([currentImageParam]);
 			if (images == null || images.length === 0) return;
 			for (const image of images) {
 				this._addHoverForImage(image);
@@ -3083,15 +3085,7 @@ const DrawingArrange = (props) => {
 	const MoveDownIcon = iconManager.get("MoveDownIcon");
 	const TopmostIcon = iconManager.get("TopmostIcon");
 	const BottomIcon = iconManager.get("BottomIcon");
-	const [drawings, setDrawings] = useState(focusDrawings);
-	useEffect(() => {
-		const focusDispose = drawingManagerService.focus$.subscribe((drawings) => {
-			setDrawings(drawings);
-		});
-		return () => {
-			focusDispose.unsubscribe();
-		};
-	}, []);
+	const drawings = useObservable(() => drawingManagerService.focus$, focusDrawings, false, [drawingManagerService]);
 	const onArrangeBtnClick = (arrangeType) => {
 		commandService.syncExecuteCommand(SetDrawingArrangeOperation.id, {
 			arrangeType,
@@ -3138,6 +3132,7 @@ const DrawingArrange = (props) => {
 //#endregion
 //#region src/views/panel/DrawingGroup.tsx
 const DrawingGroup = (props) => {
+	var _renderManagerService;
 	const localeService = useDependency(LocaleService);
 	const renderManagerService = useDependency(IRenderManagerService);
 	const drawingManagerService = useDependency(IDrawingManagerService);
@@ -3146,43 +3141,32 @@ const DrawingGroup = (props) => {
 	const { hasGroup, drawings } = props;
 	const GroupIcon = iconManager.get("GroupIcon");
 	const UngroupIcon = iconManager.get("UngroupIcon");
-	const [groupShow, setGroupShow] = useState(false);
-	const [groupBtnShow, setGroupBtnShow] = useState(true);
-	const [ungroupBtnShow, setUngroupBtnShow] = useState(true);
+	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 { groupShow, groupBtnShow, ungroupBtnShow } = useObservable(transformer ? () => merge$1(transformer.clearControl$.pipe(filter((changeSelf) => changeSelf === true), map(() => ({
+		groupShow: false,
+		groupBtnShow: false,
+		ungroupBtnShow: false
+	}))), transformer.changeStart$.pipe(map((state) => {
+		const params = getUpdateParams(state.objects, drawingManagerService);
+		const groupBtnShow = params.length > 1;
+		const ungroupBtnShow = params.some((item) => (item === null || item === void 0 ? void 0 : item.drawingType) === DrawingTypeEnum.DRAWING_GROUP);
+		return {
+			groupShow: groupBtnShow || ungroupBtnShow,
+			groupBtnShow,
+			ungroupBtnShow
+		};
+	}))) : null, {
+		groupShow: false,
+		groupBtnShow: true,
+		ungroupBtnShow: true
+	}, false, [drawingManagerService, transformer]);
 	const onGroupBtnClick = () => {
 		commandService.syncExecuteCommand(SetDrawingGroupOperation.id, { drawings });
 	};
 	const onUngroupBtnClick = () => {
 		commandService.syncExecuteCommand(CancelDrawingGroupOperation.id, { drawings });
 	};
-	useEffect(() => {
-		const drawingParam = drawings[0];
-		if (drawingParam == null) return;
-		const { unitId } = drawingParam;
-		const renderObject = renderManagerService.getRenderById(unitId);
-		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-		if (scene == null) return;
-		const transformer = scene.getTransformerByCreate();
-		const onClearControlObserver = transformer.clearControl$.subscribe((changeSelf) => {
-			if (changeSelf === true) setGroupShow(false);
-		});
-		const onChangeStartObserver = transformer.changeStart$.subscribe((state) => {
-			const { objects } = state;
-			const params = getUpdateParams(objects, drawingManagerService);
-			const groupParams = params.filter((o) => (o === null || o === void 0 ? void 0 : o.drawingType) === DrawingTypeEnum.DRAWING_GROUP);
-			let groupBtnShow = false;
-			let ungroupBtnShow = false;
-			if (params.length > 1) groupBtnShow = true;
-			if (groupParams.length > 0) ungroupBtnShow = true;
-			setGroupShow(groupBtnShow || ungroupBtnShow);
-			setGroupBtnShow(groupBtnShow);
-			setUngroupBtnShow(ungroupBtnShow);
-		});
-		return () => {
-			onChangeStartObserver.unsubscribe();
-			onClearControlObserver.unsubscribe();
-		};
-	}, []);
 	return /* @__PURE__ */ jsxs("div", {
 		className: clsx("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": hasGroup === true && groupShow === false || hasGroup === false }),
 		children: [/* @__PURE__ */ jsx("header", {
@@ -3234,21 +3218,24 @@ function createDrawingTransformRotationChangeHandler(options) {
 //#region src/views/panel/DrawingTransform.tsx
 const INPUT_DEBOUNCE_TIME = 300;
 const DrawingTransform = (props) => {
-	var _scene$getEngine;
+	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 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 });
+};
+function DrawingTransformContent(props) {
 	const localeService = useDependency(LocaleService);
 	const drawingManagerService = useDependency(IDrawingManagerService);
 	const renderManagerService = useDependency(IRenderManagerService);
 	const { drawings, transformShow } = props;
 	const drawingParam = drawings[0];
-	if (drawingParam == null) return;
 	const transform = drawingParam.transform;
-	if (transform == null) return;
 	const { unitId, subUnitId, drawingId, drawingType } = drawingParam;
-	const renderObject = renderManagerService.getRenderById(unitId);
-	const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-	if (scene == null) return;
-	const topScene = (_scene$getEngine = scene.getEngine()) === null || _scene$getEngine === void 0 ? void 0 : _scene$getEngine.activeScene;
-	if (topScene == null) return;
+	const scene = renderManagerService.getRenderById(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;
 	const [width, setWidth] = useState(originWidth);
@@ -3479,7 +3466,7 @@ const DrawingTransform = (props) => {
 			})
 		]
 	});
-};
+}
 
 //#endregion
 //#region src/views/panel/ImageCropper.tsx
@@ -3490,7 +3477,7 @@ const ImageCropper = (props) => {
 	const componentManager = useDependency(ComponentManager);
 	const canUseShapeClip = useObservable(clipService.canUseShapeClip$, false);
 	const { drawings, cropperShow } = props;
-	if (drawings[0] == null) return;
+	const drawingParam = drawings[0];
 	const [cropValue, setCropValue] = useState("0");
 	const cropStateRef = useRef(false);
 	const cropOptions = [
@@ -3546,6 +3533,7 @@ const ImageCropper = (props) => {
 			onChangeStartObserver === null || onChangeStartObserver === void 0 || onChangeStartObserver.dispose();
 		};
 	}, []);
+	if (drawingParam == null) return null;
 	function handleCropChange(value) {
 		setCropValue(value);
 		if (cropStateRef.current) commandService.executeCommand(AutoImageCropOperation.id, { cropType: value });
@@ -3613,78 +3601,11 @@ const DrawingCommonPanel = (props) => {
 	const localeService = useDependency(LocaleService);
 	const { drawings, hasArrange = true, hasTransform = true, hasAlign = true, hasCropper = true, hasGroup = true } = props;
 	const drawingParam = drawings[0];
-	if (drawingParam == null) return;
-	const { unitId } = drawingParam;
-	const renderObject = renderManagerService.getRenderById(unitId);
+	const renderObject = drawingParam ? renderManagerService.getRenderById(drawingParam.unitId) : void 0;
 	const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-	if (scene == null) return;
-	const transformer = scene.getTransformerByCreate();
-	const initialShowState = getPanelShowState(drawings);
-	const [arrangeShow, setArrangeShow] = useState(initialShowState.arrangeShow);
-	const [transformShow, setTransformShow] = useState(initialShowState.transformShow);
-	const [alignShow, setAlignShow] = useState(initialShowState.alignShow);
-	const [cropperShow, setCropperShow] = useState(initialShowState.cropperShow);
-	const [nullShow, setNullShow] = useState(initialShowState.nullShow);
-	useEffect(() => {
-		const clearControlSub = transformer.clearControl$.subscribe((changeSelf) => {
-			if (changeSelf === true) {
-				setArrangeShow(false);
-				setTransformShow(false);
-				setAlignShow(false);
-				setCropperShow(false);
-				setNullShow(true);
-			}
-		});
-		const changeStartSub = transformer.changeStart$.subscribe((state) => {
-			const { objects } = state;
-			const params = getUpdateParams(objects, drawingManagerService);
-			if (params.length === 0) {
-				setArrangeShow(false);
-				setTransformShow(false);
-				setAlignShow(false);
-				setCropperShow(false);
-				setNullShow(true);
-			} else if (params.length === 1) {
-				setArrangeShow(true);
-				setTransformShow(true);
-				setAlignShow(false);
-				setCropperShow(true);
-				setNullShow(false);
-			} else {
-				setArrangeShow(true);
-				setTransformShow(false);
-				setAlignShow(true);
-				setCropperShow(false);
-				setNullShow(false);
-			}
-		});
-		const focusSub = drawingManagerService.focus$.subscribe((drawings) => {
-			if (drawings.length === 0) {
-				setArrangeShow(false);
-				setTransformShow(false);
-				setAlignShow(false);
-				setCropperShow(false);
-				setNullShow(true);
-			} else if (drawings.length === 1) {
-				setArrangeShow(true);
-				setTransformShow(true);
-				setAlignShow(false);
-				setCropperShow(true);
-				setNullShow(false);
-			} else {
-				setArrangeShow(true);
-				setTransformShow(false);
-				setAlignShow(true);
-				setCropperShow(false);
-				setNullShow(false);
-			}
-		});
-		return () => {
-			changeStartSub.unsubscribe();
-			clearControlSub.unsubscribe();
-			focusSub.unsubscribe();
-		};
-	}, []);
+	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]);
+	if (!drawingParam || !scene || !transformer) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("div", {
 			className: clsx("univer-h-full", { "univer-hidden": !nullShow }),