@univerjs/sheets-drawing-ui 1.0.0-alpha.1 → 1.0.0-alpha.2

package/lib/cjs/index.js

@@ -820,7 +820,8 @@ let SheetDrawingUpdateController = class SheetDrawingUpdateController extends _u
 		this.disposeWithMe(this._drawingManagerService.featurePluginGroupUpdate$.subscribe((params) => {
 			const grpParams = [];
 			for (const param of params) {
-				const grpSheetTransform = this._getSheetTransformByParam(param.parent, true);
+				const parent = param.parent;
+				const grpSheetTransform = this._getSheetTransformByParam(parent, true);
 				const children = [];
 				for (const child of param.children) {
 					const childSheetTransformInfo = this._getSheetTransformByParam(child, false);
@@ -832,7 +833,7 @@ let SheetDrawingUpdateController = class SheetDrawingUpdateController extends _u
 				}
 				const grpParam = {
 					parent: {
-						...param.parent,
+						...parent,
 						sheetTransform: grpSheetTransform === null || grpSheetTransform === void 0 ? void 0 : grpSheetTransform.sheetTransform,
 						axisAlignSheetTransform: grpSheetTransform === null || grpSheetTransform === void 0 ? void 0 : grpSheetTransform.axisAlignSheetTransform
 					},
@@ -1680,7 +1681,7 @@ function UploadCellImageMenuFactory(accessor) {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-drawing-ui";
-var version = "1.0.0-alpha.1";
+var version = "1.0.0-alpha.2";
 
 //#endregion
 //#region src/config/config.ts
@@ -3057,11 +3058,37 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 		_defineProperty(this, "add$", this._add$.asObservable());
 		_defineProperty(this, "_remove$", new rxjs.Subject());
 		_defineProperty(this, "remove$", this._remove$.asObservable());
+		_defineProperty(this, "_renderObjectFactories", /* @__PURE__ */ new Map());
 		this._drawingAddListener();
 		this._featureUpdateListener();
 		this._deleteListener();
 		this._bindScrollEvent();
 	}
+	/**
+	* Register a factory that creates the canvas-side render object for a sheet
+	* float-dom drawing type. The latest registered factory wins; disposing the
+	* returned handle unregisters it and restores the previous factory or the
+	* default {@link Rect} fallback.
+	*/
+	registerRenderObjectFactory(drawingType, factory) {
+		var _this$_renderObjectFa;
+		const factories = (_this$_renderObjectFa = this._renderObjectFactories.get(drawingType)) !== null && _this$_renderObjectFa !== void 0 ? _this$_renderObjectFa : [];
+		factories.push(factory);
+		this._renderObjectFactories.set(drawingType, factories);
+		return { dispose: () => {
+			const currentFactories = this._renderObjectFactories.get(drawingType);
+			if (!currentFactories) return;
+			const index = currentFactories.indexOf(factory);
+			if (index >= 0) currentFactories.splice(index, 1);
+			if (currentFactories.length === 0) this._renderObjectFactories.delete(drawingType);
+		} };
+	}
+	_createRenderObject(context) {
+		var _factory;
+		const factories = this._renderObjectFactories.get(context.drawingType);
+		const factory = factories === null || factories === void 0 ? void 0 : factories[factories.length - 1];
+		return (_factory = factory === null || factory === void 0 ? void 0 : factory(context)) !== null && _factory !== void 0 ? _factory : new _univerjs_engine_render.Rect(context.key, context.config);
+	}
 	_bindScrollEvent() {
 		this._lifecycleService.lifecycle$.pipe((0, rxjs.filter)((s) => s === _univerjs_core.LifecycleStages.Rendered), (0, rxjs.take)(1)).subscribe(() => {
 			this._scrollUpdateListener();
@@ -3101,7 +3128,7 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 				if (!floatDomParam || !target) return;
 				const skeleton = (_this$_renderManagerS = this._renderManagerService.getRenderById(unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(_univerjs_sheets_ui.SheetSkeletonManagerService).getSkeletonParam(subUnitId);
 				if (!skeleton) return;
-				const { transform, drawingType, data, hidden } = floatDomParam;
+				const { transform, drawingType, data, hidden, groupId } = floatDomParam;
 				if (drawingType !== _univerjs_core.DrawingTypeEnum.DRAWING_DOM && drawingType !== _univerjs_core.DrawingTypeEnum.DRAWING_CHART) return;
 				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
 				if (renderObject == null) return;
@@ -3115,8 +3142,14 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 					subUnitId,
 					drawingId
 				});
-				const rectShape = scene.getObject(rectShapeKey);
+				const groupShapeKey = groupId ? (0, _univerjs_drawing.getDrawingShapeKeyByDrawingSearch)({
+					unitId,
+					subUnitId,
+					drawingId: groupId
+				}) : void 0;
+				const rectShape = this._getObjectIncludingGroup(scene, rectShapeKey, groupShapeKey);
 				if (rectShape != null) {
+					this._removeTopLevelDuplicateIfGrouped(scene, rectShapeKey, rectShape);
 					rectShape.transformByState({
 						left,
 						top,
@@ -3128,6 +3161,7 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 						skewX,
 						skewY
 					});
+					this._syncFloatDomRect(drawingId, rectShape);
 					return;
 				}
 				const imageConfig = {
@@ -3140,18 +3174,32 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 				const isChart = drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_CHART;
 				imageConfig.rotateEnabled = false;
 				if (isChart) {
-					imageConfig.fill = data ? data.backgroundColor : "white";
+					const backgroundColor = this._getChartDataBackground(data);
+					if (backgroundColor !== void 0) imageConfig.fill = backgroundColor;
 					if (data && data.border) imageConfig.stroke = data.border;
 					imageConfig.paintFirst = "stroke";
 					imageConfig.strokeWidth = 1;
 					imageConfig.borderEnabled = false;
 					imageConfig.radius = 8;
 				}
-				const rect = new _univerjs_engine_render.Rect(rectShapeKey, imageConfig);
+				const rect = this._createRenderObject({
+					key: rectShapeKey,
+					config: imageConfig,
+					unitId,
+					subUnitId,
+					drawingId,
+					drawingType,
+					data
+				});
 				if (isChart) rect.setObjectType(_univerjs_engine_render.ObjectType.CHART);
 				else if (drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_DOM) rect.setObjectType(_univerjs_engine_render.ObjectType.DRAWING_DOM);
 				scene.addObject(rect, _univerjs_engine_render.DRAWING_OBJECT_LAYER_INDEX);
 				if (floatDomParam.allowTransform !== false) scene.attachTransformerTo(rect);
+				if (isChart && groupId) (0, _univerjs_drawing_ui.insertGroupObject)({
+					drawingId: groupId,
+					unitId,
+					subUnitId
+				}, rect, scene, this._drawingManagerService);
 				const disposableCollection = new _univerjs_core.DisposableCollection();
 				const position$ = new rxjs.BehaviorSubject(calcSheetFloatDomPosition(rect, renderObject.renderUnit.scene, skeleton.skeleton, target.worksheet));
 				const domId = `${SHEET_FLOAT_DOM_PREFIX}${(0, _univerjs_core.generateRandomId)(6)}`;
@@ -3206,7 +3254,7 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
 				if (renderObject == null) return;
 				const { transformer, scene } = renderObject;
-				const rectShape = scene.getObject(rectShapeKey);
+				const rectShape = this._getObjectIncludingGroup(scene, rectShapeKey);
 				if (rectShape === null || rectShape === void 0 ? void 0 : rectShape.oKey) {
 					var _scene$getTransformer;
 					transformer.clearControlByIds([rectShape === null || rectShape === void 0 ? void 0 : rectShape.oKey]);
@@ -3279,9 +3327,60 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 				subUnitId,
 				drawingId: id
 			});
-			const rectShape = scene.getObject(rectShapeKey);
-			if (rectShape && rectShape instanceof _univerjs_engine_render.Rect) rectShape.setProps(props);
+			const drawing = this._drawingManagerService.getDrawingByParam({
+				unitId,
+				subUnitId,
+				drawingId: id
+			});
+			const groupShapeKey = (drawing === null || drawing === void 0 ? void 0 : drawing.groupId) ? (0, _univerjs_drawing.getDrawingShapeKeyByDrawingSearch)({
+				unitId,
+				subUnitId,
+				drawingId: drawing.groupId
+			}) : void 0;
+			const rectShape = this._getObjectIncludingGroup(scene, rectShapeKey, groupShapeKey);
+			if (rectShape && rectShape instanceof _univerjs_engine_render.Rect) {
+				this._removeTopLevelDuplicateIfGrouped(scene, rectShapeKey, rectShape);
+				rectShape.setProps(props);
+				this._syncFloatDomRect(id, rectShape);
+			}
+		}
+	}
+	_getObjectIncludingGroup(scene, key, groupKey) {
+		var _ref, _ref2, _this$_getChildObject, _scene$getObjectInclu;
+		return (_ref = (_ref2 = (_this$_getChildObject = this._getChildObjectFromGroup(scene, key, groupKey)) !== null && _this$_getChildObject !== void 0 ? _this$_getChildObject : (_scene$getObjectInclu = scene.getObjectIncludeInGroup) === null || _scene$getObjectInclu === void 0 ? void 0 : _scene$getObjectInclu.call(scene, key)) !== null && _ref2 !== void 0 ? _ref2 : scene.getObject(key)) !== null && _ref !== void 0 ? _ref : null;
+	}
+	_getChildObjectFromGroup(scene, key, groupKey) {
+		var _scene$getObjectInclu2, _scene$getObjectInclu3;
+		if (!groupKey) return null;
+		const groupObject = (_scene$getObjectInclu2 = (_scene$getObjectInclu3 = scene.getObjectIncludeInGroup) === null || _scene$getObjectInclu3 === void 0 ? void 0 : _scene$getObjectInclu3.call(scene, groupKey)) !== null && _scene$getObjectInclu2 !== void 0 ? _scene$getObjectInclu2 : scene.getObject(groupKey);
+		return this._findChildObject(groupObject, key);
+	}
+	_findChildObject(object, key) {
+		if (!object) return null;
+		const children = object.getObjects();
+		for (const child of children) {
+			if (child.oKey === key) return child;
+			const nested = this._findChildObject(child, key);
+			if (nested) return nested;
 		}
+		return null;
+	}
+	_removeTopLevelDuplicateIfGrouped(scene, key, object) {
+		if (!object.isInGroup) return;
+		const topLevelObject = scene.getObject(key);
+		if (topLevelObject && topLevelObject !== object) scene.removeObject(topLevelObject);
+	}
+	_syncFloatDomRect(id, object) {
+		if (!(object instanceof _univerjs_engine_render.Rect)) return;
+		const info = this._domLayerInfoMap.get(id);
+		if (info) info.rect = object;
+	}
+	_getChartDataBackground(data) {
+		var _record$backgroundCol;
+		if (!data || typeof data !== "object" || Array.isArray(data)) return;
+		const record = data;
+		const background = (_record$backgroundCol = record.backgroundColor) !== null && _record$backgroundCol !== void 0 ? _record$backgroundCol : record.background;
+		return typeof background === "string" ? background : void 0;
 	}
 	_getPosition(position, unitId) {
 		var _this$_renderManagerS3;
@@ -3388,7 +3487,18 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 		this._domLayerInfoMap.delete(id);
 		info.dispose.dispose();
 		const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
-		if (renderObject) renderObject.scene.removeObject(info.rect);
+		if (renderObject) {
+			const { scene, transformer } = renderObject;
+			if ((0, _univerjs_drawing_ui.disposeDrawingRenderObject)(scene, {
+				unitId,
+				subUnitId,
+				drawingId: id
+			})) {
+				var _scene$getTransformer2;
+				transformer.clearControlByIds([info.rect.oKey]);
+				(_scene$getTransformer2 = scene.getTransformer()) === null || _scene$getTransformer2 === void 0 || _scene$getTransformer2.clearSelectedObjects();
+			}
+		}
 		if (removeDrawing) {
 			const param = this._drawingManagerService.getDrawingByParam({
 				unitId,
@@ -3463,7 +3573,7 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 			if (!skMangerService) return;
 			const skeletonParam = skMangerService.getSkeletonParam(subUnitId);
 			if (!skeletonParam) return;
-			const { transform, drawingType, data } = floatDomParam;
+			const { transform, drawingType, data, groupId } = floatDomParam;
 			if (drawingType !== _univerjs_core.DrawingTypeEnum.DRAWING_DOM && drawingType !== _univerjs_core.DrawingTypeEnum.DRAWING_CHART) return;
 			const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
 			if (renderObject == null) return;
@@ -3476,8 +3586,14 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 				subUnitId,
 				drawingId
 			});
-			const rectShape = scene.getObject(rectShapeKey);
+			const groupShapeKey = groupId ? (0, _univerjs_drawing.getDrawingShapeKeyByDrawingSearch)({
+				unitId,
+				subUnitId,
+				drawingId: groupId
+			}) : void 0;
+			const rectShape = this._getObjectIncludingGroup(scene, rectShapeKey, groupShapeKey);
 			if (rectShape != null) {
+				this._removeTopLevelDuplicateIfGrouped(scene, rectShapeKey, rectShape);
 				rectShape.transformByState({
 					left,
 					top,
@@ -3489,6 +3605,7 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 					skewX,
 					skewY
 				});
+				this._syncFloatDomRect(drawingId, rectShape);
 				return;
 			}
 			const domConfig = {
@@ -3500,7 +3617,8 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 			};
 			const isChart = drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_CHART;
 			if (isChart) {
-				domConfig.fill = data ? data.backgroundColor : "white";
+				const backgroundColor = this._getChartDataBackground(data);
+				if (backgroundColor !== void 0) domConfig.fill = backgroundColor;
 				domConfig.rotateEnabled = false;
 				if (data && data.border) domConfig.stroke = data.border;
 				domConfig.paintFirst = "stroke";
@@ -3508,10 +3626,23 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 				domConfig.borderEnabled = false;
 				domConfig.radius = 8;
 			}
-			const domRect = new _univerjs_engine_render.Rect(rectShapeKey, domConfig);
+			const domRect = this._createRenderObject({
+				key: rectShapeKey,
+				config: domConfig,
+				unitId,
+				subUnitId,
+				drawingId,
+				drawingType,
+				data
+			});
 			if (isChart) domRect.setObjectType(_univerjs_engine_render.ObjectType.CHART);
 			scene.addObject(domRect, _univerjs_engine_render.DRAWING_OBJECT_LAYER_INDEX);
 			if (floatDomParam.allowTransform !== false) scene.attachTransformerTo(domRect);
+			if (isChart && groupId) (0, _univerjs_drawing_ui.insertGroupObject)({
+				drawingId: groupId,
+				unitId,
+				subUnitId
+			}, domRect, scene, this._drawingManagerService);
 			const disposableCollection = new _univerjs_core.DisposableCollection();
 			const viewMain = scene.getMainViewport();
 			const { rowHeaderWidth, columnHeaderHeight } = skeletonParam.skeleton;
@@ -3678,8 +3809,9 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 				subUnitId,
 				drawingId
 			});
-			const rectShape = scene.getObject(rectShapeKey);
+			const rectShape = this._getObjectIncludingGroup(scene, rectShapeKey);
 			if (rectShape != null) {
+				this._removeTopLevelDuplicateIfGrouped(scene, rectShapeKey, rectShape);
 				rectShape.transformByState({
 					left,
 					top,
@@ -3691,6 +3823,7 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 					skewX,
 					skewY
 				});
+				this._syncFloatDomRect(drawingId, rectShape);
 				return;
 			}
 			const calcOffsetPos = calcDomPositionByAnchor({

package/lib/es/index.js

@@ -8,7 +8,7 @@ import { COMMAND_LISTENER_SKELETON_CHANGE, DeleteRangeMoveLeftCommand, DeleteRan
 import { COPY_TYPE, EditingRenderController, HoverManagerService, IEditorBridgeService, ISheetClipboardService, ISheetSelectionRenderService, PREDEFINED_HOOK_NAME_PASTE, SetCellEditVisibleOperation, SetScrollOperation, SetZoomRatioOperation, SheetCanvasPopManagerService, SheetPrintInterceptorService, SheetSkeletonManagerService, getCurrentRangeDisable$, useHighlightRange, virtualizeDiscreteRanges } from "@univerjs/sheets-ui";
 import { CanvasFloatDomService, ComponentManager, ContextMenuGroup, ContextMenuPosition, IClipboardInterfaceService, IContextMenuService, IDialogService, ILocalFileService, IMenuManagerService, IMessageService, IShortcutService, ISidebarService, KeyCode, MenuItemType, PrintFloatDomSingle, RibbonInsertGroup, connectInjector, getMenuHiddenObservable, useDependency } from "@univerjs/ui";
 import { DocDrawingController, UniverDocsDrawingPlugin } from "@univerjs/docs-drawing";
-import { COMPONENT_IMAGE_POPUP_MENU, DrawingCommonPanel, DrawingRenderService, ImageCropperObject, ImageResetSizeOperation, OpenImageCropOperation, UniverDrawingUIPlugin } from "@univerjs/drawing-ui";
+import { COMPONENT_IMAGE_POPUP_MENU, DrawingCommonPanel, DrawingRenderService, ImageCropperObject, ImageResetSizeOperation, OpenImageCropOperation, UniverDrawingUIPlugin, disposeDrawingRenderObject, insertGroupObject } from "@univerjs/drawing-ui";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { BehaviorSubject, EMPTY, Subject, combineLatest, distinctUntilChanged, filter, map, of, switchMap, take, tap, throttleTime } from "rxjs";
@@ -819,7 +819,8 @@ let SheetDrawingUpdateController = class SheetDrawingUpdateController extends Di
 		this.disposeWithMe(this._drawingManagerService.featurePluginGroupUpdate$.subscribe((params) => {
 			const grpParams = [];
 			for (const param of params) {
-				const grpSheetTransform = this._getSheetTransformByParam(param.parent, true);
+				const parent = param.parent;
+				const grpSheetTransform = this._getSheetTransformByParam(parent, true);
 				const children = [];
 				for (const child of param.children) {
 					const childSheetTransformInfo = this._getSheetTransformByParam(child, false);
@@ -831,7 +832,7 @@ let SheetDrawingUpdateController = class SheetDrawingUpdateController extends Di
 				}
 				const grpParam = {
 					parent: {
-						...param.parent,
+						...parent,
 						sheetTransform: grpSheetTransform === null || grpSheetTransform === void 0 ? void 0 : grpSheetTransform.sheetTransform,
 						axisAlignSheetTransform: grpSheetTransform === null || grpSheetTransform === void 0 ? void 0 : grpSheetTransform.axisAlignSheetTransform
 					},
@@ -1679,7 +1680,7 @@ function UploadCellImageMenuFactory(accessor) {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-drawing-ui";
-var version = "1.0.0-alpha.1";
+var version = "1.0.0-alpha.2";
 
 //#endregion
 //#region src/config/config.ts
@@ -3056,11 +3057,37 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 		_defineProperty(this, "add$", this._add$.asObservable());
 		_defineProperty(this, "_remove$", new Subject());
 		_defineProperty(this, "remove$", this._remove$.asObservable());
+		_defineProperty(this, "_renderObjectFactories", /* @__PURE__ */ new Map());
 		this._drawingAddListener();
 		this._featureUpdateListener();
 		this._deleteListener();
 		this._bindScrollEvent();
 	}
+	/**
+	* Register a factory that creates the canvas-side render object for a sheet
+	* float-dom drawing type. The latest registered factory wins; disposing the
+	* returned handle unregisters it and restores the previous factory or the
+	* default {@link Rect} fallback.
+	*/
+	registerRenderObjectFactory(drawingType, factory) {
+		var _this$_renderObjectFa;
+		const factories = (_this$_renderObjectFa = this._renderObjectFactories.get(drawingType)) !== null && _this$_renderObjectFa !== void 0 ? _this$_renderObjectFa : [];
+		factories.push(factory);
+		this._renderObjectFactories.set(drawingType, factories);
+		return { dispose: () => {
+			const currentFactories = this._renderObjectFactories.get(drawingType);
+			if (!currentFactories) return;
+			const index = currentFactories.indexOf(factory);
+			if (index >= 0) currentFactories.splice(index, 1);
+			if (currentFactories.length === 0) this._renderObjectFactories.delete(drawingType);
+		} };
+	}
+	_createRenderObject(context) {
+		var _factory;
+		const factories = this._renderObjectFactories.get(context.drawingType);
+		const factory = factories === null || factories === void 0 ? void 0 : factories[factories.length - 1];
+		return (_factory = factory === null || factory === void 0 ? void 0 : factory(context)) !== null && _factory !== void 0 ? _factory : new Rect(context.key, context.config);
+	}
 	_bindScrollEvent() {
 		this._lifecycleService.lifecycle$.pipe(filter((s) => s === LifecycleStages.Rendered), take(1)).subscribe(() => {
 			this._scrollUpdateListener();
@@ -3100,7 +3127,7 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 				if (!floatDomParam || !target) return;
 				const skeleton = (_this$_renderManagerS = this._renderManagerService.getRenderById(unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(SheetSkeletonManagerService).getSkeletonParam(subUnitId);
 				if (!skeleton) return;
-				const { transform, drawingType, data, hidden } = floatDomParam;
+				const { transform, drawingType, data, hidden, groupId } = floatDomParam;
 				if (drawingType !== DrawingTypeEnum.DRAWING_DOM && drawingType !== DrawingTypeEnum.DRAWING_CHART) return;
 				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
 				if (renderObject == null) return;
@@ -3114,8 +3141,14 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 					subUnitId,
 					drawingId
 				});
-				const rectShape = scene.getObject(rectShapeKey);
+				const groupShapeKey = groupId ? getDrawingShapeKeyByDrawingSearch({
+					unitId,
+					subUnitId,
+					drawingId: groupId
+				}) : void 0;
+				const rectShape = this._getObjectIncludingGroup(scene, rectShapeKey, groupShapeKey);
 				if (rectShape != null) {
+					this._removeTopLevelDuplicateIfGrouped(scene, rectShapeKey, rectShape);
 					rectShape.transformByState({
 						left,
 						top,
@@ -3127,6 +3160,7 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 						skewX,
 						skewY
 					});
+					this._syncFloatDomRect(drawingId, rectShape);
 					return;
 				}
 				const imageConfig = {
@@ -3139,18 +3173,32 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 				const isChart = drawingType === DrawingTypeEnum.DRAWING_CHART;
 				imageConfig.rotateEnabled = false;
 				if (isChart) {
-					imageConfig.fill = data ? data.backgroundColor : "white";
+					const backgroundColor = this._getChartDataBackground(data);
+					if (backgroundColor !== void 0) imageConfig.fill = backgroundColor;
 					if (data && data.border) imageConfig.stroke = data.border;
 					imageConfig.paintFirst = "stroke";
 					imageConfig.strokeWidth = 1;
 					imageConfig.borderEnabled = false;
 					imageConfig.radius = 8;
 				}
-				const rect = new Rect(rectShapeKey, imageConfig);
+				const rect = this._createRenderObject({
+					key: rectShapeKey,
+					config: imageConfig,
+					unitId,
+					subUnitId,
+					drawingId,
+					drawingType,
+					data
+				});
 				if (isChart) rect.setObjectType(ObjectType.CHART);
 				else if (drawingType === DrawingTypeEnum.DRAWING_DOM) rect.setObjectType(ObjectType.DRAWING_DOM);
 				scene.addObject(rect, DRAWING_OBJECT_LAYER_INDEX);
 				if (floatDomParam.allowTransform !== false) scene.attachTransformerTo(rect);
+				if (isChart && groupId) insertGroupObject({
+					drawingId: groupId,
+					unitId,
+					subUnitId
+				}, rect, scene, this._drawingManagerService);
 				const disposableCollection = new DisposableCollection();
 				const position$ = new BehaviorSubject(calcSheetFloatDomPosition(rect, renderObject.renderUnit.scene, skeleton.skeleton, target.worksheet));
 				const domId = `${SHEET_FLOAT_DOM_PREFIX}${generateRandomId(6)}`;
@@ -3205,7 +3253,7 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
 				if (renderObject == null) return;
 				const { transformer, scene } = renderObject;
-				const rectShape = scene.getObject(rectShapeKey);
+				const rectShape = this._getObjectIncludingGroup(scene, rectShapeKey);
 				if (rectShape === null || rectShape === void 0 ? void 0 : rectShape.oKey) {
 					var _scene$getTransformer;
 					transformer.clearControlByIds([rectShape === null || rectShape === void 0 ? void 0 : rectShape.oKey]);
@@ -3278,9 +3326,60 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 				subUnitId,
 				drawingId: id
 			});
-			const rectShape = scene.getObject(rectShapeKey);
-			if (rectShape && rectShape instanceof Rect) rectShape.setProps(props);
+			const drawing = this._drawingManagerService.getDrawingByParam({
+				unitId,
+				subUnitId,
+				drawingId: id
+			});
+			const groupShapeKey = (drawing === null || drawing === void 0 ? void 0 : drawing.groupId) ? getDrawingShapeKeyByDrawingSearch({
+				unitId,
+				subUnitId,
+				drawingId: drawing.groupId
+			}) : void 0;
+			const rectShape = this._getObjectIncludingGroup(scene, rectShapeKey, groupShapeKey);
+			if (rectShape && rectShape instanceof Rect) {
+				this._removeTopLevelDuplicateIfGrouped(scene, rectShapeKey, rectShape);
+				rectShape.setProps(props);
+				this._syncFloatDomRect(id, rectShape);
+			}
+		}
+	}
+	_getObjectIncludingGroup(scene, key, groupKey) {
+		var _ref, _ref2, _this$_getChildObject, _scene$getObjectInclu;
+		return (_ref = (_ref2 = (_this$_getChildObject = this._getChildObjectFromGroup(scene, key, groupKey)) !== null && _this$_getChildObject !== void 0 ? _this$_getChildObject : (_scene$getObjectInclu = scene.getObjectIncludeInGroup) === null || _scene$getObjectInclu === void 0 ? void 0 : _scene$getObjectInclu.call(scene, key)) !== null && _ref2 !== void 0 ? _ref2 : scene.getObject(key)) !== null && _ref !== void 0 ? _ref : null;
+	}
+	_getChildObjectFromGroup(scene, key, groupKey) {
+		var _scene$getObjectInclu2, _scene$getObjectInclu3;
+		if (!groupKey) return null;
+		const groupObject = (_scene$getObjectInclu2 = (_scene$getObjectInclu3 = scene.getObjectIncludeInGroup) === null || _scene$getObjectInclu3 === void 0 ? void 0 : _scene$getObjectInclu3.call(scene, groupKey)) !== null && _scene$getObjectInclu2 !== void 0 ? _scene$getObjectInclu2 : scene.getObject(groupKey);
+		return this._findChildObject(groupObject, key);
+	}
+	_findChildObject(object, key) {
+		if (!object) return null;
+		const children = object.getObjects();
+		for (const child of children) {
+			if (child.oKey === key) return child;
+			const nested = this._findChildObject(child, key);
+			if (nested) return nested;
 		}
+		return null;
+	}
+	_removeTopLevelDuplicateIfGrouped(scene, key, object) {
+		if (!object.isInGroup) return;
+		const topLevelObject = scene.getObject(key);
+		if (topLevelObject && topLevelObject !== object) scene.removeObject(topLevelObject);
+	}
+	_syncFloatDomRect(id, object) {
+		if (!(object instanceof Rect)) return;
+		const info = this._domLayerInfoMap.get(id);
+		if (info) info.rect = object;
+	}
+	_getChartDataBackground(data) {
+		var _record$backgroundCol;
+		if (!data || typeof data !== "object" || Array.isArray(data)) return;
+		const record = data;
+		const background = (_record$backgroundCol = record.backgroundColor) !== null && _record$backgroundCol !== void 0 ? _record$backgroundCol : record.background;
+		return typeof background === "string" ? background : void 0;
 	}
 	_getPosition(position, unitId) {
 		var _this$_renderManagerS3;
@@ -3387,7 +3486,18 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 		this._domLayerInfoMap.delete(id);
 		info.dispose.dispose();
 		const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
-		if (renderObject) renderObject.scene.removeObject(info.rect);
+		if (renderObject) {
+			const { scene, transformer } = renderObject;
+			if (disposeDrawingRenderObject(scene, {
+				unitId,
+				subUnitId,
+				drawingId: id
+			})) {
+				var _scene$getTransformer2;
+				transformer.clearControlByIds([info.rect.oKey]);
+				(_scene$getTransformer2 = scene.getTransformer()) === null || _scene$getTransformer2 === void 0 || _scene$getTransformer2.clearSelectedObjects();
+			}
+		}
 		if (removeDrawing) {
 			const param = this._drawingManagerService.getDrawingByParam({
 				unitId,
@@ -3462,7 +3572,7 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 			if (!skMangerService) return;
 			const skeletonParam = skMangerService.getSkeletonParam(subUnitId);
 			if (!skeletonParam) return;
-			const { transform, drawingType, data } = floatDomParam;
+			const { transform, drawingType, data, groupId } = floatDomParam;
 			if (drawingType !== DrawingTypeEnum.DRAWING_DOM && drawingType !== DrawingTypeEnum.DRAWING_CHART) return;
 			const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
 			if (renderObject == null) return;
@@ -3475,8 +3585,14 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 				subUnitId,
 				drawingId
 			});
-			const rectShape = scene.getObject(rectShapeKey);
+			const groupShapeKey = groupId ? getDrawingShapeKeyByDrawingSearch({
+				unitId,
+				subUnitId,
+				drawingId: groupId
+			}) : void 0;
+			const rectShape = this._getObjectIncludingGroup(scene, rectShapeKey, groupShapeKey);
 			if (rectShape != null) {
+				this._removeTopLevelDuplicateIfGrouped(scene, rectShapeKey, rectShape);
 				rectShape.transformByState({
 					left,
 					top,
@@ -3488,6 +3604,7 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 					skewX,
 					skewY
 				});
+				this._syncFloatDomRect(drawingId, rectShape);
 				return;
 			}
 			const domConfig = {
@@ -3499,7 +3616,8 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 			};
 			const isChart = drawingType === DrawingTypeEnum.DRAWING_CHART;
 			if (isChart) {
-				domConfig.fill = data ? data.backgroundColor : "white";
+				const backgroundColor = this._getChartDataBackground(data);
+				if (backgroundColor !== void 0) domConfig.fill = backgroundColor;
 				domConfig.rotateEnabled = false;
 				if (data && data.border) domConfig.stroke = data.border;
 				domConfig.paintFirst = "stroke";
@@ -3507,10 +3625,23 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 				domConfig.borderEnabled = false;
 				domConfig.radius = 8;
 			}
-			const domRect = new Rect(rectShapeKey, domConfig);
+			const domRect = this._createRenderObject({
+				key: rectShapeKey,
+				config: domConfig,
+				unitId,
+				subUnitId,
+				drawingId,
+				drawingType,
+				data
+			});
 			if (isChart) domRect.setObjectType(ObjectType.CHART);
 			scene.addObject(domRect, DRAWING_OBJECT_LAYER_INDEX);
 			if (floatDomParam.allowTransform !== false) scene.attachTransformerTo(domRect);
+			if (isChart && groupId) insertGroupObject({
+				drawingId: groupId,
+				unitId,
+				subUnitId
+			}, domRect, scene, this._drawingManagerService);
 			const disposableCollection = new DisposableCollection();
 			const viewMain = scene.getMainViewport();
 			const { rowHeaderWidth, columnHeaderHeight } = skeletonParam.skeleton;
@@ -3677,8 +3808,9 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 				subUnitId,
 				drawingId
 			});
-			const rectShape = scene.getObject(rectShapeKey);
+			const rectShape = this._getObjectIncludingGroup(scene, rectShapeKey);
 			if (rectShape != null) {
+				this._removeTopLevelDuplicateIfGrouped(scene, rectShapeKey, rectShape);
 				rectShape.transformByState({
 					left,
 					top,
@@ -3690,6 +3822,7 @@ let SheetCanvasFloatDomManagerService = class SheetCanvasFloatDomManagerService
 					skewX,
 					skewY
 				});
+				this._syncFloatDomRect(drawingId, rectShape);
 				return;
 			}
 			const calcOffsetPos = calcDomPositionByAnchor({