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

package/lib/cjs/index.js

@@ -625,7 +625,7 @@ const menuSchema = { [_univerjs_ui.ContextMenuPosition.DRAWING]: { [_univerjs_ui
 //#endregion
 //#region package.json
 var name = "@univerjs/drawing-ui";
-var version = "1.0.0-alpha.3";
+var version = "1.0.0-alpha.5";
 
 //#endregion
 //#region src/config/config.ts
@@ -658,6 +658,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 = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const [visible, setVisible] = (0, react.useState)(false);
+	const [isHovered, setIsHovered] = (0, react.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__ */ (0, react_jsx_runtime.jsx)(DocImageFloatingToolbar, {
 		menuItems,
@@ -666,15 +670,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__ */ (0, react_jsx_runtime.jsx)(DocChartFloatingToolbar, { menuItems });
-	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
-	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
-	const [visible, setVisible] = (0, react.useState)(false);
-	const [isHovered, setHovered] = (0, react.useState)(false);
 	const handleMouseEnter = () => {
-		setHovered(true);
+		setIsHovered(true);
 	};
 	const handleMouseLeave = () => {
-		setHovered(false);
+		setIsHovered(false);
 	};
 	const onVisibleChange = (visible) => {
 		setVisible(visible);
@@ -773,16 +773,14 @@ function ToolbarDropdownButton(props) {
 	});
 }
 function DocImageFloatingToolbar(props) {
-	var _univerInstanceServic, _wrappingStyleOptions, _wrappingStyleOptions2, _editItem$label, _cropItem$label, _deleteItem$label;
+	var _univerInstanceServic, _wrappingStyleOptions, _wrappingStyleOptions2;
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const iconManager = (0, _univerjs_ui.useDependency)(_univerjs_ui.IconManager);
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const documentDataModel = (_univerInstanceServic = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService).getUnit(props.unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC)) !== null && _univerInstanceServic !== void 0 ? _univerInstanceServic : void 0;
 	const [wrappingStyle, setWrappingStyle] = (0, react.useState)(() => getWrappingStyle(documentDataModel, props.drawingId));
 	const [hidden, setHidden] = (0, react.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"),
@@ -812,6 +810,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) => {
@@ -835,45 +834,30 @@ function DocImageFloatingToolbar(props) {
 			event.preventDefault();
 		},
 		className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-items-center univer-rounded univer-bg-white univer-px-1 univer-py-1 univer-shadow-sm dark:!univer-border-gray-700 dark:!univer-bg-gray-900", _univerjs_design.borderClassName),
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarDropdownButton, {
-				title: (_wrappingStyleOptions = (_wrappingStyleOptions2 = wrappingStyleOptions.find((option) => option.value === wrappingStyle)) === null || _wrappingStyleOptions2 === void 0 ? void 0 : _wrappingStyleOptions2.label) !== null && _wrappingStyleOptions !== void 0 ? _wrappingStyleOptions : localeService.t("drawing-ui.image-text-wrap.inline"),
-				value: wrappingStyle,
-				options: wrappingStyleOptions,
-				onChange: updateWrappingStyle
-			}) }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Separator, { orientation: "vertical" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToolbarGroup, { children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DocSettingIcon, {})
-			}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CropIcon, {})
-			})] }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Separator, { orientation: "vertical" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DeleteIcon, {})
-			}) })
-		]
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarDropdownButton, {
+			title: (_wrappingStyleOptions = (_wrappingStyleOptions2 = wrappingStyleOptions.find((option) => option.value === wrappingStyle)) === null || _wrappingStyleOptions2 === void 0 ? void 0 : _wrappingStyleOptions2.label) !== null && _wrappingStyleOptions !== void 0 ? _wrappingStyleOptions : localeService.t("drawing-ui.image-text-wrap.inline"),
+			value: wrappingStyle,
+			options: wrappingStyleOptions,
+			onChange: updateWrappingStyle
+		}) }), actionItems.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Separator, { orientation: "vertical" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarGroup, { children: actionItems.map((item) => {
+			const Icon = iconManager.get(item.icon);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+				titleKey: item.label,
+				disabled: item.disable,
+				onClick: () => executeMenuItem(item),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {})
+			}, `${item.commandId}-${item.index}`);
+		}) })] })]
 	});
 }
 function DocChartFloatingToolbar(props) {
 	var _chartTypeItem$option, _ref, _chartTypeItem$value, _chartTypeOptions$;
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const iconManager = (0, _univerjs_ui.useDependency)(_univerjs_ui.IconManager);
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const [hidden, setHidden] = (0, react.useState)(false);
 	const chartTypeItem = props.menuItems.find((item) => item.type === "select");
-	const 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,
@@ -881,8 +865,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__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-u-comp": "doc-chart-floating-toolbar",
 		onMouseDown: (event) => {
@@ -900,17 +886,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__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Separator, { orientation: "vertical" })] }), (editItem || deleteItem) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToolbarGroup, { children: [editItem && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
-			titleKey: editItem.label,
-			disabled: editItem.disable,
-			onClick: () => executeMenuItem(editItem),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DocSettingIcon, {})
-		}), deleteItem && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
-			titleKey: deleteItem.label,
-			disabled: deleteItem.disable,
-			onClick: () => executeMenuItem(deleteItem),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DeleteIcon, {})
-		})] })]
+		}) }), actionItems.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Separator, { orientation: "vertical" })] }), actionItems.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarGroup, { children: actionItems.map((item) => {
+			const Icon = iconManager.get(item.icon);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+				titleKey: item.label,
+				disabled: item.disable,
+				onClick: () => executeMenuItem(item),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {})
+			}, `${item.commandId}-${item.index}`);
+		}) })]
 	});
 }
 
@@ -964,6 +948,9 @@ let ComponentsController = class ComponentsController extends _univerjs_core.Dis
 	_registerIcons() {
 		this.disposeWithMe(this._iconManager.register({
 			BottomIcon: _univerjs_icons.BottomIcon,
+			DrawingCropIcon: _univerjs_icons.CropIcon,
+			DrawingDeleteIcon: _univerjs_icons.DeleteIcon,
+			DrawingEditIcon: _univerjs_icons.DocSettingIcon,
 			GroupIcon: _univerjs_icons.GroupIcon,
 			MoveDownIcon: _univerjs_icons.MoveDownIcon,
 			MoveUpIcon: _univerjs_icons.MoveUpIcon,
@@ -1294,12 +1281,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 {
@@ -1629,8 +1628,8 @@ let DrawingUpdateController = class DrawingUpdateController extends _univerjs_co
 					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();
 				}
 			});
 		}));
@@ -1638,7 +1637,7 @@ let DrawingUpdateController = class DrawingUpdateController extends _univerjs_co
 	_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;
@@ -1653,7 +1652,7 @@ let DrawingUpdateController = class DrawingUpdateController extends _univerjs_co
 					subUnitId,
 					drawingId
 				});
-				const drawingShape = scene.getObject(drawingShapeKey);
+				const drawingShape = scene.getObjectIncludeInGroup(drawingShapeKey);
 				if (drawingShape == null) return true;
 				drawingShape.transformByState({
 					left,
@@ -1668,8 +1667,9 @@ let DrawingUpdateController = class DrawingUpdateController extends _univerjs_co
 				});
 				(_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();
 			});
 		}));
 	}
@@ -1715,6 +1715,7 @@ let DrawingUpdateController = class DrawingUpdateController extends _univerjs_co
 				});
 				(_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);
 			});
 		}));
@@ -1731,7 +1732,7 @@ let DrawingUpdateController = class DrawingUpdateController extends _univerjs_co
 					subUnitId,
 					drawingId
 				});
-				const drawingShape = scene.getObject(drawingShapeKey);
+				const drawingShape = scene.getObjectIncludeInGroup(drawingShapeKey);
 				if (drawingShape == null) return true;
 				if (visible) drawingShape.show();
 				else drawingShape.hide();
@@ -2363,7 +2364,8 @@ let ImageUpdateController = class ImageUpdateController extends _univerjs_core.D
 			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);
@@ -3084,15 +3086,7 @@ const DrawingArrange = (props) => {
 	const MoveDownIcon = iconManager.get("MoveDownIcon");
 	const TopmostIcon = iconManager.get("TopmostIcon");
 	const BottomIcon = iconManager.get("BottomIcon");
-	const [drawings, setDrawings] = (0, react.useState)(focusDrawings);
-	(0, react.useEffect)(() => {
-		const focusDispose = drawingManagerService.focus$.subscribe((drawings) => {
-			setDrawings(drawings);
-		});
-		return () => {
-			focusDispose.unsubscribe();
-		};
-	}, []);
+	const drawings = (0, _univerjs_ui.useObservable)(() => drawingManagerService.focus$, focusDrawings, false, [drawingManagerService]);
 	const onArrangeBtnClick = (arrangeType) => {
 		commandService.syncExecuteCommand(SetDrawingArrangeOperation.id, {
 			arrangeType,
@@ -3139,6 +3133,7 @@ const DrawingArrange = (props) => {
 //#endregion
 //#region src/views/panel/DrawingGroup.tsx
 const DrawingGroup = (props) => {
+	var _renderManagerService;
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService);
 	const drawingManagerService = (0, _univerjs_ui.useDependency)(_univerjs_drawing.IDrawingManagerService);
@@ -3147,43 +3142,32 @@ const DrawingGroup = (props) => {
 	const { hasGroup, drawings } = props;
 	const GroupIcon = iconManager.get("GroupIcon");
 	const UngroupIcon = iconManager.get("UngroupIcon");
-	const [groupShow, setGroupShow] = (0, react.useState)(false);
-	const [groupBtnShow, setGroupBtnShow] = (0, react.useState)(true);
-	const [ungroupBtnShow, setUngroupBtnShow] = (0, react.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 } = (0, _univerjs_ui.useObservable)(transformer ? () => (0, rxjs.merge)(transformer.clearControl$.pipe((0, rxjs.filter)((changeSelf) => changeSelf === true), (0, rxjs.map)(() => ({
+		groupShow: false,
+		groupBtnShow: false,
+		ungroupBtnShow: false
+	}))), transformer.changeStart$.pipe((0, rxjs.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) === _univerjs_core.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 });
 	};
-	(0, react.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) === _univerjs_core.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: (0, _univerjs_design.clsx)("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": hasGroup === true && groupShow === false || hasGroup === false }),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
@@ -3235,21 +3219,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 = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.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__ */ (0, react_jsx_runtime.jsx)(DrawingTransformContent, { ...props });
+};
+function DrawingTransformContent(props) {
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const drawingManagerService = (0, _univerjs_ui.useDependency)(_univerjs_drawing.IDrawingManagerService);
 	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.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] = (0, react.useState)(originWidth);
@@ -3480,7 +3467,7 @@ const DrawingTransform = (props) => {
 			})
 		]
 	});
-};
+}
 
 //#endregion
 //#region src/views/panel/ImageCropper.tsx
@@ -3491,7 +3478,7 @@ const ImageCropper = (props) => {
 	const componentManager = (0, _univerjs_ui.useDependency)(_univerjs_ui.ComponentManager);
 	const canUseShapeClip = (0, _univerjs_ui.useObservable)(clipService.canUseShapeClip$, false);
 	const { drawings, cropperShow } = props;
-	if (drawings[0] == null) return;
+	const drawingParam = drawings[0];
 	const [cropValue, setCropValue] = (0, react.useState)("0");
 	const cropStateRef = (0, react.useRef)(false);
 	const cropOptions = [
@@ -3547,6 +3534,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 });
@@ -3614,78 +3602,11 @@ const DrawingCommonPanel = (props) => {
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.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] = (0, react.useState)(initialShowState.arrangeShow);
-	const [transformShow, setTransformShow] = (0, react.useState)(initialShowState.transformShow);
-	const [alignShow, setAlignShow] = (0, react.useState)(initialShowState.alignShow);
-	const [cropperShow, setCropperShow] = (0, react.useState)(initialShowState.cropperShow);
-	const [nullShow, setNullShow] = (0, react.useState)(initialShowState.nullShow);
-	(0, react.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 } = (0, _univerjs_ui.useObservable)(() => (0, rxjs.merge)(drawingManagerService.focus$.pipe((0, rxjs.map)(getPanelShowState)), ...transformer ? [transformer.clearControl$.pipe((0, rxjs.filter)((changeSelf) => changeSelf === true), (0, rxjs.map)(() => getPanelShowState([]))), transformer.changeStart$.pipe((0, rxjs.map)((state) => getPanelShowState(getUpdateParams(state.objects, drawingManagerService))))] : []), getPanelShowState(drawings), false, [drawingManagerService, transformer]);
+	if (!drawingParam || !scene || !transformer) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: (0, _univerjs_design.clsx)("univer-h-full", { "univer-hidden": !nullShow }),