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

package/lib/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({

package/lib/types/facade/f-worksheet.d.ts

@@ -170,8 +170,8 @@ export interface IFWorksheetDrawingUIMixin {
      * const fWorksheet = univerAPI.getActiveWorkbook().getSheetByName('Sheet1');
      * if (!fWorksheet) return;
      *
-     * // You should register components at an appropriate time (e.g., when Univer is loaded)
-     * // This is a React component. For Vue3 components, the third parameter should be `{ framework: 'vue3' }`
+     * // You should register components at an appropriate time (e.g., when Univer is loaded).
+     * // This is a React component. For other frameworks, pass a matching adapter option, such as `{ framework: 'vue3' }`.
      * univerAPI.registerComponent(
      *   'myFloatDom',
      *   ({ data }) => (

package/lib/types/services/canvas-float-dom-manager.service.d.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import type { IDisposable, IPosition, IRange, ITransformState, Serializable, Worksheet } from '@univerjs/core';
-import type { BaseObject, IBoundRectNoAngle, Scene, SpreadsheetSkeleton } from '@univerjs/engine-render';
+import type { BaseObject, IBoundRectNoAngle, IRectProps, Scene, SpreadsheetSkeleton } from '@univerjs/engine-render';
 import type { IFloatDomLayout } from '@univerjs/ui';
 import { Disposable, DrawingTypeEnum, ICommandService, IUniverInstanceService, LifecycleService } from '@univerjs/core';
 import { IDrawingManagerService } from '@univerjs/drawing';
@@ -71,6 +71,34 @@ export interface ICanvasFloatDomInfo {
     id: string;
     domId?: string;
 }
+/**
+ * Context passed to a sheet float-dom render object factory.
+ *
+ * This shape is consumed by the sheet drawing render pipeline when it creates
+ * canvas-side render objects. Plugins normally use it through the callback
+ * passed to {@link SheetCanvasFloatDomManagerService.registerRenderObjectFactory}.
+ */
+export interface ISheetFloatDomRenderObjectFactoryContext {
+    key: string;
+    config: IRectProps;
+    unitId: string;
+    subUnitId: string;
+    drawingId: string;
+    drawingType: DrawingTypeEnum;
+    data?: Serializable;
+}
+/**
+ * Creates the canvas-side render object for a sheet float-dom drawing.
+ *
+ * The returned object must be a {@link Rect} or a {@link Rect} subclass because
+ * the sheet drawing manager owns transform, selection, order, and grouping
+ * through that render object.
+ *
+ * Prefer registering factories through
+ * {@link SheetCanvasFloatDomManagerService.registerRenderObjectFactory} instead
+ * of constructing render objects inside sheet drawing code.
+ */
+export type SheetFloatDomRenderObjectFactory = (context: ISheetFloatDomRenderObjectFactoryContext) => Rect;
 export interface IDOMAnchor {
     width: number;
     height: number;
@@ -138,7 +166,16 @@ export declare class SheetCanvasFloatDomManagerService extends Disposable {
         subUnitId: string;
         id: string;
     }>;
+    private readonly _renderObjectFactories;
     constructor(_renderManagerService: IRenderManagerService, _univerInstanceService: IUniverInstanceService, _commandService: ICommandService, _drawingManagerService: IDrawingManagerService, _canvasFloatDomService: CanvasFloatDomService, _sheetDrawingService: ISheetDrawingService, _lifecycleService: LifecycleService);
+    /**
+     * 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: DrawingTypeEnum, factory: SheetFloatDomRenderObjectFactory): IDisposable;
+    private _createRenderObject;
     private _bindScrollEvent;
     getFloatDomInfo(id: string): ICanvasFloatDomInfo | undefined;
     getFloatDomsBySubUnitId(unitId: string, subUnitId: string): ICanvasFloatDomInfo[];
@@ -146,6 +183,12 @@ export declare class SheetCanvasFloatDomManagerService extends Disposable {
     private _drawingAddListener;
     private _scrollUpdateListener;
     updateFloatDomProps(unitId: string, subUnitId: string, id: string, props: Record<string, any>): void;
+    private _getObjectIncludingGroup;
+    private _getChildObjectFromGroup;
+    private _findChildObject;
+    private _removeTopLevelDuplicateIfGrouped;
+    private _syncFloatDomRect;
+    private _getChartDataBackground;
     private _getPosition;
     private _featureUpdateListener;
     private _deleteListener;