fix(sheets-drawing-ui): load float-dom from snapshot & support presis…

…t custom data with float dom drawing object (#2841)

packages/core/src/common/json.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export type Serializable =
+    | { [property: string]: Serializable }
+    | readonly Serializable[]
+    | string
+    | number
+    | boolean
+    | null;

packages/core/src/index.ts

@@ -17,7 +17,7 @@
 import { installShims } from './common/shims';
 
 installShims();
-
+export type { Serializable } from './common/json';
 export { DEFAULT_DOCUMENT_SUB_COMPONENT_ID } from './docs/data-model/subdocument';
 export { type UnitType, UnitModel, UniverInstanceType } from './common/unit';
 export { Registry, RegistryAsMap } from './common/registry';

packages/debugger/src/commands/commands/float-dom.command.ts

@@ -35,6 +35,9 @@ export const CreateFloatDomCommand: ICommand = {
             props: {
                 a: 1,
             },
+            data: {
+                aa: '128',
+            },
         });
         return true;
     },

packages/debugger/src/debugger-plugin.ts

@@ -41,9 +41,7 @@ export class UniverDebuggerPlugin extends Plugin {
             [PerformanceMonitorController],
             [E2EMemoryController],
         ] as Dependency[]).forEach((d) => injector.add(d));
-    }
 
-    override onRendered(): void {
         this._injector.add([
             DebuggerController,
             {

packages/sheets-drawing-ui/src/services/canvas-float-dom-manager.service.ts

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import type { IDisposable, IPosition, ITransformState, Nullable, Worksheet } from '@univerjs/core';
-import { Disposable, DisposableCollection, DrawingTypeEnum, ICommandService, Inject, IUniverInstanceService, Tools } from '@univerjs/core';
+import type { IDisposable, IPosition, ITransformState, Nullable, Serializable, Worksheet } from '@univerjs/core';
+import { Disposable, DisposableCollection, DrawingTypeEnum, ICommandService, Inject, IUniverInstanceService, LifecycleStages, OnLifecycle, Tools } from '@univerjs/core';
 import type { IDrawingJsonUndo1 } from '@univerjs/drawing';
 import { getDrawingShapeKeyByDrawingSearch, IDrawingManagerService } from '@univerjs/drawing';
 import type { BaseObject, IBoundRectNoAngle, IRectProps, IRender, Scene, SpreadsheetSkeleton } from '@univerjs/engine-render';
@@ -37,7 +37,14 @@ export interface ICanvasFloatDom {
     componentKey: string;
     unitId?: string;
     subUnitId?: string;
+    /**
+     * props of component, wouldn't save to snapshot
+     */
     props?: Record<string, any>;
+    /**
+     * data of component, will save to snapshot, json-like data
+     */
+    data?: Serializable;
 }
 
 interface ICanvasFloatDomInfo {
@@ -154,8 +161,9 @@ export interface ISheetCanvasFloatDomHook {
     onGetFloatDomProps: (id: string) => Record<string, any>;
 }
 
+@OnLifecycle(LifecycleStages.Starting, SheetCanvasFloatDomManagerService)
 export class SheetCanvasFloatDomManagerService extends Disposable {
-    private _domLayerMap: Map<string, Map<string, Map<string, ICanvasFloatDom>>> = new Map();
+    private _domLayerMap: Map<string, Map<string, Map<string, { props?: any }>>> = new Map();
     private _domLayerInfoMap: Map<string, ICanvasFloatDomInfo> = new Map();
 
     private _transformChange$ = new Subject<{ id: string; value: ITransformState }>();
@@ -240,7 +248,7 @@ export class SheetCanvasFloatDomManagerService extends Disposable {
                         return;
                     }
 
-                    const { transform, drawingType } = floatDomParam;
+                    const { transform, drawingType, data } = floatDomParam;
 
                     if (drawingType !== DrawingTypeEnum.DRAWING_DOM) {
                         return;
@@ -308,6 +316,7 @@ export class SheetCanvasFloatDomManagerService extends Disposable {
                             canvas.dispatchEvent(new WheelEvent(evt.type, evt));
                         },
                         props: map.get(drawingId)?.props ?? this._getFloatDomProps(drawingId),
+                        data,
                     });
 
                     const listener = rect.onTransformChange$.subscribeEvent(() => {
@@ -322,6 +331,7 @@ export class SheetCanvasFloatDomManagerService extends Disposable {
                     });
                     listener && disposableCollection.add(listener);
                     this._domLayerInfoMap.set(drawingId, info);
+                    map.set(drawingId, {});
                 });
             })
         );
@@ -444,7 +454,7 @@ export class SheetCanvasFloatDomManagerService extends Disposable {
         }
 
         const { unitId, subUnitId } = target;
-        const { initPosition, componentKey } = layer;
+        const { initPosition, componentKey, data } = layer;
         const id = Tools.generateRandomId();
 
         const sheetTransform = this._getPosition(initPosition, unitId);
@@ -467,6 +477,7 @@ export class SheetCanvasFloatDomManagerService extends Disposable {
                 width: initPosition.endX - initPosition.startX,
                 height: initPosition.endY - initPosition.startY,
             },
+            data,
         };
 
         this._commandService.executeCommand(InsertSheetDrawingCommand.id, {

packages/sheets-drawing/src/services/sheet-drawing.service.ts

@@ -15,6 +15,7 @@
  */
 
 import { type IDrawingParam, type IImageData, type IRotationSkewFlipTransform, type IUnitDrawingService, UnitDrawingService } from '@univerjs/drawing';
+import type { Serializable } from '@univerjs/core';
 import { createIdentifier } from '@univerjs/core';
 
 interface ICellPosition {
@@ -53,6 +54,7 @@ export interface ISheetShape extends IDrawingParam, ISheetDrawingBase {
 
 export interface IFloatDomData extends IDrawingParam {
     componentKey: string;
+    data?: Serializable;
 }
 
 // TODO@wzhudev: this shouldn't be here. It should be in the sheets package

packages/ui/src/services/dom/canvas-dom-layer.service.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { IPosition } from '@univerjs/core';
+import type { IPosition, Serializable } from '@univerjs/core';
 import { BehaviorSubject, type Observable } from 'rxjs';
 
 export interface IFloatDomLayout extends IPosition {
@@ -36,6 +36,7 @@ export interface IFloatDom {
     onPointerUp: (evt: PointerEvent | MouseEvent) => void;
     onWheel: (evt: WheelEvent) => void;
     props?: Record<string, any>;
+    data?: Serializable;
 }
 
 export class CanvasFloatDomService {

packages/ui/src/views/components/dom/FloatDom.tsx

@@ -28,6 +28,11 @@ const FloatDomSingle = memo((props: { layer: IFloatDom; id: string }) => {
     const position = useObservable(layer.position$);
     const Component = typeof layer.componentKey === 'string' ? componentManager.get(layer.componentKey) : layer.componentKey;
 
+    const layerProps: any = {
+        data: layer.data,
+        ...layer.props,
+    };
+
     return position
         ? (
             <div
@@ -65,7 +70,7 @@ const FloatDomSingle = memo((props: { layer: IFloatDom; id: string }) => {
                         ...(position.absolute.top) ? { top: 0 } : { bottom: 0 },
                     }}
                 >
-                    {Component ? <Component {...layer.props} /> : null}
+                    {Component ? <Component {...layerProps} /> : null}
                 </div>
             </div>
         )