@univerjs/sheets-drawing-ui 0.4.1 → 0.4.2

package/lib/es/index.js

@@ -2,14 +2,14 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
-import { CommandType, ICommandService, IUndoRedoService, LocaleService, IUniverInstanceService, useDependency, Inject, Injector, IContextService, RxDisposable, UniverInstanceType, connectInjector, toDisposable, FOCUSING_COMMON_DRAWINGS, Disposable, Direction, FOCUSING_FX_BAR_EDITOR, EDITOR_ACTIVATED, Tools, UserManagerService, IPermissionService, Rectangle, DisposableCollection, generateRandomId, DependentOn, Plugin, registerDependencies, touchDependencies, IConfigService } from "@univerjs/core";
+import { CommandType, ICommandService, IUndoRedoService, LocaleService, IUniverInstanceService, useDependency, Inject, Injector, IContextService, RxDisposable, UniverInstanceType, connectInjector, toDisposable, FOCUSING_COMMON_DRAWINGS, Disposable, Direction, FOCUSING_FX_BAR_EDITOR, EDITOR_ACTIVATED, Tools, UserManagerService, IPermissionService, Rectangle, LifecycleService, LifecycleStages, DisposableCollection, fromEventSubject, generateRandomId, DependentOn, Plugin, registerDependencies, touchDependencies, IConfigService } from "@univerjs/core";
 import { IDrawingManagerService, IImageIoService, DrawingTypeEnum, ArrangeTypeEnum, DRAWING_IMAGE_ALLOW_IMAGE_LIST, DRAWING_IMAGE_COUNT_LIMIT, ImageUploadStatusType, DRAWING_IMAGE_ALLOW_SIZE, getImageSize, DRAWING_IMAGE_WIDTH_LIMIT, DRAWING_IMAGE_HEIGHT_LIMIT, getDrawingShapeKeyByDrawingSearch, UniverDrawingPlugin } from "@univerjs/drawing";
 import { ImageCropperObject, COMPONENT_IMAGE_POPUP_MENU, OpenImageCropOperation, ImageResetSizeOperation, DrawingCommonPanel, DrawingRenderService, UniverDrawingUIPlugin } from "@univerjs/drawing-ui";
-import { IRenderManagerService, precisionTo, getGroupState, transformObjectOutOfGroup, RENDER_CLASS_TYPE, Rect, DRAWING_OBJECT_LAYER_INDEX, SHEET_VIEWPORT_KEY } from "@univerjs/engine-render";
+import { IRenderManagerService, precisionTo, getGroupState, transformObjectOutOfGroup, RENDER_CLASS_TYPE, Rect, ObjectType, DRAWING_OBJECT_LAYER_INDEX, SHEET_VIEWPORT_KEY } from "@univerjs/engine-render";
 import { ISheetDrawingService, SetDrawingApplyMutation, DrawingApplyType, SheetDrawingAnchorType, UniverSheetsDrawingPlugin } from "@univerjs/sheets-drawing";
-import { SheetCanvasPopManagerService, attachRangeWithCoord, ISheetSelectionRenderService, SheetSkeletonManagerService, getCurrentRangeDisable$, COPY_TYPE, PREDEFINED_HOOK_NAME, virtualizeDiscreteRanges, ISheetClipboardService, SheetPrintInterceptorService, SetScrollOperation, SetZoomRatioOperation } from "@univerjs/sheets-ui";
+import { SheetCanvasPopManagerService, attachRangeWithCoord, ISheetSelectionRenderService, SheetSkeletonManagerService, getCurrentRangeDisable$, COPY_TYPE, PREDEFINED_HOOK_NAME, virtualizeDiscreteRanges, ISheetClipboardService, SheetPrintInterceptorService, VIEWPORT_KEY, SetZoomRatioOperation } from "@univerjs/sheets-ui";
 import { ISidebarService, IUIPartsService, BuiltInUIPart, ILocalFileService, IMessageService, MenuItemType, getMenuHiddenObservable, RibbonStartGroup, KeyCode, ComponentManager, IMenuManagerService, IShortcutService, CanvasFloatDomService } from "@univerjs/ui";
-import { takeUntil, combineLatest, map, filter, distinctUntilChanged, Subject, BehaviorSubject } from "rxjs";
+import { takeUntil, combineLatest, map, filter, distinctUntilChanged, Subject, take, BehaviorSubject, switchMap } from "rxjs";
 import { getSheetCommandTarget, SheetsSelectionsService, WorkbookEditablePermission, WorksheetEditPermission, RangeProtectionPermissionEditPoint, WorkbookViewPermission, WorksheetViewPermission, InsertRowCommand, InsertColCommand, RemoveRowCommand, RemoveColCommand, DeleteRangeMoveLeftCommand, DeleteRangeMoveUpCommand, InsertRangeMoveDownCommand, InsertRangeMoveRightCommand, DeltaRowHeightCommand, SetRowHeightCommand, DeltaColumnWidthCommand, SetColWidthCommand, SetRowHiddenCommand, SetSpecificRowsVisibleCommand, SetSpecificColsVisibleCommand, SetColHiddenCommand, MoveColsCommand, MoveRowsCommand, MoveRangeCommand, SetRowVisibleMutation, SetRowHiddenMutation, SetColVisibleMutation, SetColHiddenMutation, SetWorksheetRowHeightMutation, SetWorksheetColWidthMutation, SheetInterceptorService, SetWorksheetActiveOperation, SetFrozenMutation } from "@univerjs/sheets";
 import React, { useEffect, forwardRef, useRef, createElement, useState } from "react";
 import { MessageType, RadioGroup, Radio } from "@univerjs/design";
@@ -2182,16 +2182,23 @@ const calcPosition = /* @__PURE__ */ __name((targetObject, currentRender, skelet
 }, "calcPosition");
 var _a9;
 let SheetCanvasFloatDomManagerService = (_a9 = class extends Disposable {
-  constructor(_renderManagerService, _univerInstanceService, _commandService, _drawingManagerService, _canvasFloatDomService, _sheetDrawingService) {
+  constructor(_renderManagerService, _univerInstanceService, _commandService, _drawingManagerService, _canvasFloatDomService, _sheetDrawingService, _lifecycleService) {
     super();
     __publicField(this, "_domLayerMap", /* @__PURE__ */ new Map());
     __publicField(this, "_domLayerInfoMap", /* @__PURE__ */ new Map());
     __publicField(this, "_transformChange$", new Subject());
     __publicField(this, "transformChange$", this._transformChange$.asObservable());
+    __publicField(this, "_add$", new Subject());
+    __publicField(this, "add$", this._add$.asObservable());
     __publicField(this, "_remove$", new Subject());
     __publicField(this, "remove$", this._remove$.asObservable());
     __publicField(this, "_hooks", []);
-    this._renderManagerService = _renderManagerService, this._univerInstanceService = _univerInstanceService, this._commandService = _commandService, this._drawingManagerService = _drawingManagerService, this._canvasFloatDomService = _canvasFloatDomService, this._sheetDrawingService = _sheetDrawingService, this._drawingAddListener(), this._scrollUpdateListener(), this._featureUpdateListener(), this._deleteListener();
+    this._renderManagerService = _renderManagerService, this._univerInstanceService = _univerInstanceService, this._commandService = _commandService, this._drawingManagerService = _drawingManagerService, this._canvasFloatDomService = _canvasFloatDomService, this._sheetDrawingService = _sheetDrawingService, this._lifecycleService = _lifecycleService, this._drawingAddListener(), this._featureUpdateListener(), this._deleteListener(), this._bindScrollEvent();
+  }
+  _bindScrollEvent() {
+    this._lifecycleService.lifecycle$.pipe(filter((s) => s === LifecycleStages.Rendered), take(1)).subscribe(() => {
+      this._scrollUpdateListener();
+    });
   }
   _ensureMap(unitId, subUnitId) {
     let unitMap = this._domLayerMap.get(unitId);
@@ -2199,6 +2206,9 @@ let SheetCanvasFloatDomManagerService = (_a9 = class extends Disposable {
     let subUnitMap = unitMap.get(subUnitId);
     return subUnitMap || (subUnitMap = /* @__PURE__ */ new Map(), unitMap.set(subUnitId, subUnitMap)), subUnitMap;
   }
+  getFloatDomInfo(id) {
+    return this._domLayerInfoMap.get(id);
+  }
   _getSceneAndTransformerByDrawingSearch(unitId) {
     if (unitId == null)
       return;
@@ -2247,10 +2257,10 @@ let SheetCanvasFloatDomManagerService = (_a9 = class extends Disposable {
             width,
             height,
             zIndex: this._drawingManagerService.getDrawingOrder(unitId, subUnitId).length - 1
-          };
-          drawingType === DrawingTypeEnum.DRAWING_CHART && (imageConfig.fill = "white", imageConfig.rotateEnabled = !1);
+          }, isChart = drawingType === DrawingTypeEnum.DRAWING_CHART;
+          isChart && (imageConfig.fill = "white", imageConfig.rotateEnabled = !1, data && data.border && (imageConfig.stroke = data.border), imageConfig.paintFirst = "stroke", imageConfig.strokeWidth = 1, imageConfig.borderEnabled = !1);
           const rect = new Rect(rectShapeKey, imageConfig);
-          scene.addObject(rect, DRAWING_OBJECT_LAYER_INDEX), floatDomParam.allowTransform !== !1 && scene.attachTransformerTo(rect);
+          isChart && rect.setObjectType(ObjectType.CHART), scene.addObject(rect, DRAWING_OBJECT_LAYER_INDEX), floatDomParam.allowTransform !== !1 && scene.attachTransformerTo(rect);
           const map2 = this._ensureMap(unitId, subUnitId), disposableCollection = new DisposableCollection(), initPosition = calcPosition(rect, renderObject.renderObject, skeleton.skeleton, target.worksheet), position$ = new BehaviorSubject(initPosition), info = {
             dispose: disposableCollection,
             rect,
@@ -2291,26 +2301,47 @@ let SheetCanvasFloatDomManagerService = (_a9 = class extends Disposable {
           });
         });
       })
+    ), this.disposeWithMe(
+      this._drawingManagerService.remove$.subscribe((params) => {
+        params.forEach((param) => {
+          const { unitId, subUnitId, drawingId } = param, rectShapeKey = getDrawingShapeKeyByDrawingSearch({ unitId, subUnitId, drawingId }), renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+          if (renderObject == null)
+            return;
+          const { transformer, scene } = renderObject, rectShape = scene.getObject(rectShapeKey);
+          rectShape != null && rectShape.oKey && transformer.clearControlByIds([rectShape == null ? void 0 : rectShape.oKey]);
+        });
+      })
     );
   }
   _scrollUpdateListener() {
-    this.disposeWithMe(this._commandService.onCommandExecuted((commandInfo) => {
+    const updateSheet = /* @__PURE__ */ __name((unitId, subUnitId) => {
+      var _a11;
+      const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId), map2 = this._ensureMap(unitId, subUnitId), ids = Array.from(map2.keys()), target = getSheetCommandTarget(this._univerInstanceService, { unitId, subUnitId }), skeleton = (_a11 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a11.with(SheetSkeletonManagerService).getWorksheetSkeleton(subUnitId);
+      !renderObject || !target || !skeleton || ids.forEach((id) => {
+        const info = this._domLayerInfoMap.get(id);
+        if (info) {
+          const position = calcPosition(info.rect, renderObject.renderObject, skeleton.skeleton, target.worksheet);
+          info.position$.next(position);
+        }
+      });
+    }, "updateSheet");
+    this.disposeWithMe(
+      this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET).pipe(
+        filter((sheet) => !!sheet),
+        map((sheet) => {
+          const render2 = this._renderManagerService.getRenderById(sheet.getUnitId());
+          return render2 ? { render: render2, unitId: sheet.getUnitId(), subUnitId: sheet.getActiveSheet().getSheetId() } : null;
+        }),
+        filter((render2) => !!render2),
+        switchMap(
+          (render2) => fromEventSubject(render2.render.scene.getViewport(VIEWPORT_KEY.VIEW_MAIN).onScrollAfter$).pipe(map(() => ({ unitId: render2.unitId, subUnitId: render2.subUnitId })))
+        )
+      ).subscribe(({ unitId, subUnitId }) => {
+        updateSheet(unitId, subUnitId);
+      })
+    ), this.disposeWithMe(this._commandService.onCommandExecuted((commandInfo) => {
       var _a11, _b;
-      const updateSheet = /* @__PURE__ */ __name((unitId, subUnitId) => {
-        var _a12;
-        const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId), map2 = this._ensureMap(unitId, subUnitId), ids = Array.from(map2.keys()), target = getSheetCommandTarget(this._univerInstanceService, { unitId, subUnitId }), skeleton = (_a12 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a12.with(SheetSkeletonManagerService).getWorksheetSkeleton(subUnitId);
-        !renderObject || !target || !skeleton || ids.forEach((id) => {
-          const info = this._domLayerInfoMap.get(id);
-          if (info) {
-            const position = calcPosition(info.rect, renderObject.renderObject, skeleton.skeleton, target.worksheet);
-            info.position$.next(position);
-          }
-        });
-      }, "updateSheet");
-      if (commandInfo.id === SetScrollOperation.id) {
-        const params = commandInfo.params, { unitId, sheetId } = params;
-        updateSheet(unitId, sheetId);
-      } else if (commandInfo.id === SetZoomRatioOperation.id) {
+      if (commandInfo.id === SetZoomRatioOperation.id) {
         const params = commandInfo.params, { unitId } = params;
         Array.from((_b = (_a11 = this._domLayerMap.get(unitId)) == null ? void 0 : _a11.keys()) != null ? _b : []).forEach((subUnitId) => {
           updateSheet(unitId, subUnitId);
@@ -2372,7 +2403,14 @@ let SheetCanvasFloatDomManagerService = (_a9 = class extends Disposable {
       })
     );
   }
-  addFloatDomToPosition(layer, propId) {
+  updateFloatDomProps(unitId, subUnitId, id, props) {
+    const info = this._domLayerInfoMap.get(id), renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+    if (info && renderObject) {
+      const { scene } = renderObject, rectShapeKey = getDrawingShapeKeyByDrawingSearch({ unitId, subUnitId, drawingId: id }), rectShape = scene.getObject(rectShapeKey);
+      rectShape && rectShape instanceof Rect && rectShape.setProps(props);
+    }
+  }
+  addFloatDomToPosition(layer, propId, executeCommand = !0) {
     const target = getSheetCommandTarget(this._univerInstanceService, {
       unitId: layer.unitId,
       subUnitId: layer.subUnitId
@@ -2399,14 +2437,15 @@ let SheetCanvasFloatDomManagerService = (_a9 = class extends Disposable {
       data,
       allowTransform
     };
-    return this._commandService.executeCommand(InsertSheetDrawingCommand.id, {
+    return executeCommand && this._commandService.executeCommand(InsertSheetDrawingCommand.id, {
       unitId,
       drawings: [sheetDrawingParam]
-    }), {
+    }), this._add$.next({ unitId, subUnitId, id }), {
       id,
       dispose: /* @__PURE__ */ __name(() => {
         this._removeDom(id, !0);
-      }, "dispose")
+      }, "dispose"),
+      sheetDrawingParam
     };
   }
   _removeDom(id, removeDrawing = !1) {
@@ -2440,7 +2479,8 @@ SheetCanvasFloatDomManagerService = __decorateClass$1([
   __decorateParam$1(2, Inject(ICommandService)),
   __decorateParam$1(3, IDrawingManagerService),
   __decorateParam$1(4, Inject(CanvasFloatDomService)),
-  __decorateParam$1(5, ISheetDrawingService)
+  __decorateParam$1(5, ISheetDrawingService),
+  __decorateParam$1(6, Inject(LifecycleService))
 ], SheetCanvasFloatDomManagerService);
 var __defProp2 = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyDescriptor, __defNormalProp2 = /* @__PURE__ */ __name((obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, "__defNormalProp"), __decorateClass = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)

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

@@ -1,8 +1,9 @@
-import { IDisposable, IPosition, ITransformState, Serializable, Worksheet, Disposable, ICommandService, IUniverInstanceService } from '@univerjs/core';
-import { IBoundRectNoAngle, Scene, SpreadsheetSkeleton, IRenderManagerService } from '@univerjs/engine-render';
+import { IDisposable, IPosition, ITransformState, Serializable, Worksheet, Disposable, ICommandService, IUniverInstanceService, LifecycleService } from '@univerjs/core';
+import { IBoundRectNoAngle, Scene, SpreadsheetSkeleton, IRenderManagerService, Rect } from '@univerjs/engine-render';
+import { ISheetFloatDom, ISheetDrawingService } from '@univerjs/sheets-drawing';
+import { IFloatDomLayout, CanvasFloatDomService } from '@univerjs/ui';
 import { DrawingTypeEnum, IDrawingManagerService } from '@univerjs/drawing';
-import { ISheetDrawingService } from '@univerjs/sheets-drawing';
-import { CanvasFloatDomService } from '@univerjs/ui';
+import { BehaviorSubject } from 'rxjs';
 export interface ICanvasFloatDom {
     /**
      * whether allow transform float-dom
@@ -34,6 +35,13 @@ export interface ICanvasFloatDom {
      */
     type?: DrawingTypeEnum;
 }
+interface ICanvasFloatDomInfo {
+    position$: BehaviorSubject<IFloatDomLayout>;
+    dispose: IDisposable;
+    rect: Rect;
+    unitId: string;
+    subUnitId: string;
+}
 export declare function transformBound2DOMBound(originBound: IBoundRectNoAngle, scene: Scene, skeleton: SpreadsheetSkeleton, worksheet: Worksheet): {
     absolute: {
         left: boolean;
@@ -54,6 +62,7 @@ export declare class SheetCanvasFloatDomManagerService extends Disposable {
     private _drawingManagerService;
     private readonly _canvasFloatDomService;
     private readonly _sheetDrawingService;
+    protected readonly _lifecycleService: LifecycleService;
     private _domLayerMap;
     private _domLayerInfoMap;
     private _transformChange$;
@@ -61,6 +70,13 @@ export declare class SheetCanvasFloatDomManagerService extends Disposable {
         id: string;
         value: ITransformState;
     }>;
+    private _add$;
+    add$: import('rxjs').Observable<{
+        unitId: string;
+        subUnitId: string;
+        id: string;
+        data?: Record<string, any>;
+    }>;
     private _remove$;
     remove$: import('rxjs').Observable<{
         unitId: string;
@@ -68,8 +84,10 @@ export declare class SheetCanvasFloatDomManagerService extends Disposable {
         id: string;
     }>;
     private _hooks;
-    constructor(_renderManagerService: IRenderManagerService, _univerInstanceService: IUniverInstanceService, _commandService: ICommandService, _drawingManagerService: IDrawingManagerService, _canvasFloatDomService: CanvasFloatDomService, _sheetDrawingService: ISheetDrawingService);
+    constructor(_renderManagerService: IRenderManagerService, _univerInstanceService: IUniverInstanceService, _commandService: ICommandService, _drawingManagerService: IDrawingManagerService, _canvasFloatDomService: CanvasFloatDomService, _sheetDrawingService: ISheetDrawingService, _lifecycleService: LifecycleService);
+    private _bindScrollEvent;
     private _ensureMap;
+    getFloatDomInfo(id: string): ICanvasFloatDomInfo | undefined;
     private _getSceneAndTransformerByDrawingSearch;
     private _getFloatDomProps;
     private _drawingAddListener;
@@ -77,10 +95,13 @@ export declare class SheetCanvasFloatDomManagerService extends Disposable {
     private _getPosition;
     private _featureUpdateListener;
     private _deleteListener;
-    addFloatDomToPosition(layer: ICanvasFloatDom, propId?: string): {
+    updateFloatDomProps(unitId: string, subUnitId: string, id: string, props: Record<string, any>): void;
+    addFloatDomToPosition(layer: ICanvasFloatDom, propId?: string, executeCommand?: boolean): {
         id: string;
         dispose: () => void;
+        sheetDrawingParam: ISheetFloatDom;
     } | undefined;
     private _removeDom;
     addHook(hook: ISheetCanvasFloatDomHook): IDisposable;
 }
+export {};