@univerjs/sheets-ui 0.5.4 → 0.5.5-experimental.20250122-3362a4a

package/lib/es/facade.js

@@ -1,270 +1,543 @@
-import { FUniver as V, ICommandService as p, IUniverInstanceService as B, CanceledError as U, RichTextValue as j, DOCS_NORMAL_EDITOR_UNIT_ID_KEY as I, ILogService as y, toDisposable as a, FEventName as $, awaitTime as J, InterceptorEffectEnum as q, DisposableCollection as G, generateRandomId as Q } from "@univerjs/core";
-import { RichTextEditingMutation as ee } from "@univerjs/docs";
-import { IRenderManagerService as g, DeviceInputEventType as T, SHEET_VIEWPORT_KEY as te, sheetContentViewportKeys as re } from "@univerjs/engine-render";
-import { SetCellEditVisibleOperation as b, IEditorBridgeService as M, SheetPasteShortKeyCommand as A, ISheetClipboardService as K, SHEET_VIEW_KEY as E, HoverManagerService as m, DragManagerService as k, SheetScrollManagerService as R, ISheetSelectionRenderService as _, SheetSkeletonManagerService as x, ChangeZoomRatioCommand as ne, SheetsScrollRenderController as ie, SheetCanvasPopManagerService as oe, CellAlertManagerService as se, IMarkSelectionService as ae } from "@univerjs/sheets-ui";
-import { FSheetHooks as D, FWorkbook as Y, FWorksheet as Z, FPermission as z, FRange as X } from "@univerjs/sheets/facade";
-import { KeyCode as P, CutCommand as O, CopyCommand as W, PasteCommand as H, IClipboardInterfaceService as ce, PLAIN_TEXT_CLIPBOARD_MIME_TYPE as F, HTML_CLIPBOARD_MIME_TYPE as L, supportClipboardAPI as N, ISidebarService as le, IDialogService as de, ComponentManager as he } from "@univerjs/ui";
-import { filter as w } from "rxjs";
-import { SheetInterceptorService as ge, INTERCEPTOR_POINT as ve, InterceptCellContentPriority as Ce } from "@univerjs/sheets";
-class ue extends V {
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
+import { FUniver, ICommandService, IUniverInstanceService, CanceledError, RichTextValue, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, LifecycleService, DisposableCollection, LifecycleStages, UniverInstanceType, ILogService, toDisposable, awaitTime, InterceptorEffectEnum, FEventName, generateRandomId } from "@univerjs/core";
+import { RichTextEditingMutation } from "@univerjs/docs";
+import { IRenderManagerService, DeviceInputEventType, SHEET_VIEWPORT_KEY, sheetContentViewportKeys } from "@univerjs/engine-render";
+import { SheetsSelectionsService, COMMAND_LISTENER_SKELETON_CHANGE, getSkeletonChangedEffectedRange, SheetInterceptorService, INTERCEPTOR_POINT, InterceptCellContentPriority } from "@univerjs/sheets";
+import { SetCellEditVisibleOperation, IEditorBridgeService, SetZoomRatioCommand, HoverManagerService, DragManagerService, SheetScrollManagerService, SheetPasteShortKeyCommand, ISheetClipboardService, SheetSkeletonManagerService, SHEET_VIEW_KEY, ISheetSelectionRenderService, ChangeZoomRatioCommand, SheetsScrollRenderController, SetWorksheetColAutoWidthCommand, SheetCanvasPopManagerService, CellAlertManagerService, IMarkSelectionService } from "@univerjs/sheets-ui";
+import { FSheetHooks, FWorkbook, FWorksheet, FPermission, FRange } from "@univerjs/sheets/facade";
+import { KeyCode, CutCommand, CopyCommand, PasteCommand, IClipboardInterfaceService, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, HTML_CLIPBOARD_MIME_TYPE, supportClipboardAPI, ISidebarService, IDialogService, ComponentManager } from "@univerjs/ui";
+import { filter, combineLatest } from "rxjs";
+const _FUniverSheetsUIMixin = class _FUniverSheetsUIMixin extends FUniver {
   // eslint-disable-next-line max-lines-per-function
-  _initSheetUIEvent(e) {
-    const t = e.get(p);
-    this.disposeWithMe(t.beforeCommandExecuted((r) => {
-      if (r.id === b.id) {
+  _initSheetUIEvent(injector) {
+    const commandService = injector.get(ICommandService);
+    this.disposeWithMe(commandService.beforeCommandExecuted((commandInfo) => {
+      if (commandInfo.id === SetCellEditVisibleOperation.id) {
         if (!this._eventListend(this.Event.BeforeSheetEditStart) && !this._eventListend(this.Event.BeforeSheetEditEnd))
           return;
-        const n = this.getCommandSheetTarget(r);
-        if (!n)
+        const target = this.getCommandSheetTarget(commandInfo);
+        if (!target)
           return;
-        const { workbook: i, worksheet: o } = n, s = e.get(M), c = e.get(B), d = r.params, { visible: l, keycode: S, eventType: C } = d, v = s.getEditLocation();
-        if (l) {
-          const f = {
-            row: v.row,
-            column: v.column,
-            eventType: C,
-            keycode: S,
-            workbook: i,
-            worksheet: o,
+        const { workbook, worksheet } = target, editorBridgeService = injector.get(IEditorBridgeService), univerInstanceService = injector.get(IUniverInstanceService), params = commandInfo.params, { visible, keycode, eventType } = params, loc = editorBridgeService.getEditLocation();
+        if (visible) {
+          const eventParams = {
+            row: loc.row,
+            column: loc.column,
+            eventType,
+            keycode,
+            workbook,
+            worksheet,
             isZenEditor: !1
           };
-          if (this.fireEvent(this.Event.BeforeSheetEditStart, f), f.cancel)
-            throw new U();
+          if (this.fireEvent(this.Event.BeforeSheetEditStart, eventParams), eventParams.cancel)
+            throw new CanceledError();
         } else {
-          const f = {
-            row: v.row,
-            column: v.column,
-            eventType: C,
-            keycode: S,
-            workbook: i,
-            worksheet: o,
+          const eventParams = {
+            row: loc.row,
+            column: loc.column,
+            eventType,
+            keycode,
+            workbook,
+            worksheet,
             isZenEditor: !1,
-            value: j.create(c.getUnit(I).getSnapshot()),
-            isConfirm: S !== P.ESC
+            value: RichTextValue.create(univerInstanceService.getUnit(DOCS_NORMAL_EDITOR_UNIT_ID_KEY).getSnapshot()),
+            isConfirm: keycode !== KeyCode.ESC
           };
-          if (this.fireEvent(this.Event.BeforeSheetEditEnd, f), f.cancel)
-            throw new U();
+          if (this.fireEvent(this.Event.BeforeSheetEditEnd, eventParams), eventParams.cancel)
+            throw new CanceledError();
         }
       }
-    })), this.disposeWithMe(t.onCommandExecuted((r) => {
-      if (r.id === b.id) {
+      if (commandInfo.id === SetZoomRatioCommand.id) {
+        if (!this._eventListend(this.Event.BeforeSheetZoomChange))
+          return;
+        const target = this.getCommandSheetTarget(commandInfo);
+        if (!target)
+          return;
+        const { workbook, worksheet } = target;
+        this.fireEvent(this.Event.BeforeSheetZoomChange, {
+          zoom: commandInfo.params.zoomRatio,
+          workbook,
+          worksheet
+        });
+      }
+    })), this.disposeWithMe(commandService.onCommandExecuted((commandInfo) => {
+      if (commandInfo.id === SetCellEditVisibleOperation.id) {
         if (!this._eventListend(this.Event.SheetEditStarted) && !this._eventListend(this.Event.SheetEditEnded))
           return;
-        const n = this.getCommandSheetTarget(r);
-        if (!n)
+        const target = this.getCommandSheetTarget(commandInfo);
+        if (!target)
           return;
-        const { workbook: i, worksheet: o } = n, s = e.get(M), c = r.params, { visible: d, keycode: l, eventType: S } = c, C = s.getEditLocation();
-        if (d) {
-          const v = {
-            row: C.row,
-            column: C.column,
-            eventType: S,
-            keycode: l,
-            workbook: i,
-            worksheet: o,
+        const { workbook, worksheet } = target, editorBridgeService = injector.get(IEditorBridgeService), params = commandInfo.params, { visible, keycode, eventType } = params, loc = editorBridgeService.getEditLocation();
+        if (visible) {
+          const eventParams = {
+            row: loc.row,
+            column: loc.column,
+            eventType,
+            keycode,
+            workbook,
+            worksheet,
             isZenEditor: !1
           };
-          this.fireEvent(this.Event.SheetEditStarted, v);
+          this.fireEvent(this.Event.SheetEditStarted, eventParams);
         } else {
-          const v = {
-            row: C.row,
-            column: C.column,
-            eventType: S,
-            keycode: l,
-            workbook: i,
-            worksheet: o,
+          const eventParams = {
+            row: loc.row,
+            column: loc.column,
+            eventType,
+            keycode,
+            workbook,
+            worksheet,
             isZenEditor: !1,
-            isConfirm: l !== P.ESC
+            isConfirm: keycode !== KeyCode.ESC
           };
-          this.fireEvent(this.Event.SheetEditEnded, v);
+          this.fireEvent(this.Event.SheetEditEnded, eventParams);
         }
       }
-      if (r.id === ee.id) {
+      if (commandInfo.id === RichTextEditingMutation.id) {
         if (!this._eventListend(this.Event.SheetEditChanging))
           return;
-        const n = this.getCommandSheetTarget(r);
-        if (!n)
+        const target = this.getCommandSheetTarget(commandInfo);
+        if (!target)
           return;
-        const { workbook: i, worksheet: o } = n, s = e.get(M), c = e.get(B), d = r.params;
-        if (!s.isVisible().visible) return;
-        const { unitId: l } = d;
-        if (l === I) {
-          const { row: S, column: C } = s.getEditLocation(), v = {
-            workbook: i,
-            worksheet: o,
-            row: S,
-            column: C,
-            value: j.create(c.getUnit(I).getSnapshot()),
+        const { workbook, worksheet } = target, editorBridgeService = injector.get(IEditorBridgeService), univerInstanceService = injector.get(IUniverInstanceService), params = commandInfo.params;
+        if (!editorBridgeService.isVisible().visible) return;
+        const { unitId } = params;
+        if (unitId === DOCS_NORMAL_EDITOR_UNIT_ID_KEY) {
+          const { row, column } = editorBridgeService.getEditLocation(), eventParams = {
+            workbook,
+            worksheet,
+            row,
+            column,
+            value: RichTextValue.create(univerInstanceService.getUnit(DOCS_NORMAL_EDITOR_UNIT_ID_KEY).getSnapshot()),
             isZenEditor: !1
           };
-          this.fireEvent(this.Event.SheetEditChanging, v);
+          this.fireEvent(this.Event.SheetEditChanging, eventParams);
         }
       }
-    }));
+      if (commandInfo.id === SetZoomRatioCommand.id) {
+        if (!this._eventListend(this.Event.SheetZoomChanged))
+          return;
+        const target = this.getCommandSheetTarget(commandInfo);
+        if (!target)
+          return;
+        const { workbook, worksheet } = target;
+        this.fireEvent(this.Event.SheetZoomChanged, {
+          zoom: worksheet.getZoom(),
+          workbook,
+          worksheet
+        });
+      }
+    })), this._initObserverListener(injector);
+  }
+  // eslint-disable-next-line max-lines-per-function
+  _initObserverListener(injector) {
+    const unitM = injector.get(IUniverInstanceService).getFocusedUnit(), unitId = unitM == null ? void 0 : unitM.getUnitId(), renderManagerService = injector.get(IRenderManagerService);
+    if (unitId) {
+      const lifeCycleService2 = injector.get(LifecycleService), disposable = new DisposableCollection();
+      this.disposeWithMe(lifeCycleService2.lifecycle$.subscribe((lifecycle) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+        if (lifecycle < LifecycleStages.Rendered) return;
+        disposable.dispose();
+        const hoverManagerService = injector.get(HoverManagerService), dragManagerService = injector.get(DragManagerService);
+        hoverManagerService && (disposable.add(
+          (_a = hoverManagerService.currentClickedCell$) == null ? void 0 : _a.pipe(filter((cell) => !!cell)).subscribe((cell) => {
+            if (!this._eventListend(this.Event.CellClicked)) return;
+            const baseParams = this.getSheetTarget(cell.location.unitId, cell.location.subUnitId);
+            baseParams && this.fireEvent(this.Event.CellClicked, {
+              ...baseParams,
+              ...cell,
+              row: cell.location.row,
+              column: cell.location.col
+            });
+          })
+        ), disposable.add(
+          (_b = hoverManagerService.currentRichText$) == null ? void 0 : _b.pipe(filter((cell) => !!cell)).subscribe((cell) => {
+            if (!this._eventListend(this.Event.CellHover)) return;
+            const baseParams = this.getSheetTarget(cell.unitId, cell.subUnitId);
+            baseParams && this.fireEvent(this.Event.CellHover, {
+              ...baseParams,
+              ...cell,
+              row: cell.row,
+              column: cell.col
+            });
+          })
+        ), disposable.add(
+          (_c = hoverManagerService.currentPointerDownCell$) == null ? void 0 : _c.pipe(filter((cell) => !!cell)).subscribe((cell) => {
+            if (!this._eventListend(this.Event.CellPointerDown)) return;
+            const baseParams = this.getSheetTarget(cell.unitId, cell.subUnitId);
+            baseParams && this.fireEvent(this.Event.CellPointerDown, {
+              ...baseParams,
+              ...cell,
+              row: cell.row,
+              column: cell.col
+            });
+          })
+        ), disposable.add(
+          (_d = hoverManagerService.currentPointerUpCell$) == null ? void 0 : _d.pipe(filter((cell) => !!cell)).subscribe((cell) => {
+            if (!this._eventListend(this.Event.CellPointerUp)) return;
+            const baseParams = this.getSheetTarget(cell.unitId, cell.subUnitId);
+            baseParams && this.fireEvent(this.Event.CellPointerUp, {
+              ...baseParams,
+              ...cell,
+              row: cell.row,
+              column: cell.col
+            });
+          })
+        ), disposable.add(
+          (_e = hoverManagerService.currentCellPosWithEvent$) == null ? void 0 : _e.pipe(filter((cell) => !!cell)).subscribe((cell) => {
+            if (!this._eventListend(this.Event.CellPointerMove)) return;
+            const baseParams = this.getSheetTarget(cell.unitId, cell.subUnitId);
+            baseParams && this.fireEvent(this.Event.CellPointerMove, {
+              ...baseParams,
+              ...cell,
+              row: cell.row,
+              column: cell.col
+            });
+          })
+        ), disposable.add(
+          (_f = dragManagerService.currentCell$) == null ? void 0 : _f.pipe(filter((cell) => !!cell)).subscribe((cell) => {
+            if (!this._eventListend(this.Event.DragOver)) return;
+            const baseParams = this.getSheetTarget(cell.location.unitId, cell.location.subUnitId);
+            baseParams && this.fireEvent(this.Event.DragOver, {
+              ...baseParams,
+              ...cell,
+              row: cell.location.row,
+              column: cell.location.col
+            });
+          })
+        ), disposable.add(
+          (_g = dragManagerService.endCell$) == null ? void 0 : _g.pipe(filter((cell) => !!cell)).subscribe((cell) => {
+            if (!this._eventListend(this.Event.Drop)) return;
+            const baseParams = this.getSheetTarget(cell.location.unitId, cell.location.subUnitId);
+            baseParams && this.fireEvent(this.Event.Drop, {
+              ...baseParams,
+              ...cell,
+              row: cell.location.row,
+              column: cell.location.col
+            });
+          })
+        ), disposable.add(
+          (_h = hoverManagerService.currentRowHeaderClick$) == null ? void 0 : _h.pipe(filter((header) => !!header)).subscribe((header) => {
+            if (!this._eventListend(this.Event.RowHeaderClick)) return;
+            const baseParams = this.getSheetTarget(header.unitId, header.subUnitId);
+            baseParams && this.fireEvent(this.Event.RowHeaderClick, {
+              ...baseParams,
+              row: header.index
+            });
+          })
+        ), disposable.add(
+          (_i = hoverManagerService.currentRowHeaderPointerDown$) == null ? void 0 : _i.pipe(filter((header) => !!header)).subscribe((header) => {
+            if (!this._eventListend(this.Event.RowHeaderPointerDown)) return;
+            const baseParams = this.getSheetTarget(header.unitId, header.subUnitId);
+            baseParams && this.fireEvent(this.Event.RowHeaderPointerDown, {
+              ...baseParams,
+              row: header.index
+            });
+          })
+        ), disposable.add(
+          (_j = hoverManagerService.currentRowHeaderPointerUp$) == null ? void 0 : _j.pipe(filter((header) => !!header)).subscribe((header) => {
+            if (!this._eventListend(this.Event.RowHeaderPointerUp)) return;
+            const baseParams = this.getSheetTarget(header.unitId, header.subUnitId);
+            baseParams && this.fireEvent(this.Event.RowHeaderPointerUp, {
+              ...baseParams,
+              row: header.index
+            });
+          })
+        ), disposable.add(
+          (_k = hoverManagerService.currentHoveredRowHeader$) == null ? void 0 : _k.pipe(filter((header) => !!header)).subscribe((header) => {
+            if (!this._eventListend(this.Event.RowHeaderHover)) return;
+            const baseParams = this.getSheetTarget(header.unitId, header.subUnitId);
+            baseParams && this.fireEvent(this.Event.RowHeaderHover, {
+              ...baseParams,
+              row: header.index
+            });
+          })
+        ), disposable.add(
+          (_l = hoverManagerService.currentColHeaderClick$) == null ? void 0 : _l.pipe(filter((header) => !!header)).subscribe((header) => {
+            if (!this._eventListend(this.Event.ColumnHeaderClick)) return;
+            const baseParams = this.getSheetTarget(header.unitId, header.subUnitId);
+            baseParams && this.fireEvent(this.Event.ColumnHeaderClick, {
+              ...baseParams,
+              column: header.index
+            });
+          })
+        ), disposable.add(
+          (_m = hoverManagerService.currentColHeaderPointerDown$) == null ? void 0 : _m.pipe(filter((header) => !!header)).subscribe((header) => {
+            if (!this._eventListend(this.Event.ColumnHeaderPointerDown)) return;
+            const baseParams = this.getSheetTarget(header.unitId, header.subUnitId);
+            baseParams && this.fireEvent(this.Event.ColumnHeaderPointerDown, {
+              ...baseParams,
+              column: header.index
+            });
+          })
+        ), disposable.add(
+          (_n = hoverManagerService.currentColHeaderPointerUp$) == null ? void 0 : _n.pipe(filter((header) => !!header)).subscribe((header) => {
+            if (!this._eventListend(this.Event.ColumnHeaderPointerUp)) return;
+            const baseParams = this.getSheetTarget(header.unitId, header.subUnitId);
+            baseParams && this.fireEvent(this.Event.ColumnHeaderPointerUp, {
+              ...baseParams,
+              column: header.index
+            });
+          })
+        ), disposable.add(
+          (_o = hoverManagerService.currentHoveredColHeader$) == null ? void 0 : _o.pipe(filter((header) => !!header)).subscribe((header) => {
+            if (!this._eventListend(this.Event.ColumnHeaderHover)) return;
+            const baseParams = this.getSheetTarget(header.unitId, header.subUnitId);
+            baseParams && this.fireEvent(this.Event.ColumnHeaderHover, {
+              ...baseParams,
+              column: header.index
+            });
+          })
+        ));
+      })), this.disposeWithMe(disposable);
+    }
+    const unitMap = /* @__PURE__ */ new Map();
+    let sheetRenderUnit;
+    const lifeCycleService = injector.get(LifecycleService), combined$ = combineLatest([
+      renderManagerService.created$,
+      lifeCycleService.lifecycle$
+    ]);
+    this.disposeWithMe(combined$.subscribe(([created, lifecycle]) => {
+      var _a;
+      if (created.type === UniverInstanceType.UNIVER_SHEET && (sheetRenderUnit = created), lifecycle <= LifecycleStages.Rendered) return;
+      const disposable = new DisposableCollection();
+      if (!sheetRenderUnit) return;
+      const workbook = this.getWorkbook(sheetRenderUnit.unitId);
+      if (!workbook) return;
+      unitMap.get(sheetRenderUnit.unitId) && ((_a = unitMap.get(sheetRenderUnit.unitId)) == null || _a.dispose()), unitMap.set(sheetRenderUnit.unitId, disposable);
+      const scrollManagerService = sheetRenderUnit.with(SheetScrollManagerService);
+      disposable.add(scrollManagerService.validViewportScrollInfo$.subscribe((params) => {
+        params && this._eventListend(this.Event.Scroll) && this.fireEvent(this.Event.Scroll, {
+          workbook,
+          worksheet: workbook.getActiveSheet(),
+          ...params
+        });
+      }));
+      const selectionService = sheetRenderUnit.with(SheetsSelectionsService);
+      disposable.add(selectionService.selectionMoveStart$.subscribe((selections) => {
+        var _a2;
+        this._eventListend(this.Event.SelectionMoveStart) && this.fireEvent(this.Event.SelectionMoveStart, {
+          workbook,
+          worksheet: workbook.getActiveSheet(),
+          selections: (_a2 = selections == null ? void 0 : selections.map((s) => s.range)) != null ? _a2 : []
+        });
+      })), disposable.add(selectionService.selectionMoving$.subscribe((selections) => {
+        var _a2;
+        this._eventListend(this.Event.SelectionMoving) && this.fireEvent(this.Event.SelectionMoving, {
+          workbook,
+          worksheet: workbook.getActiveSheet(),
+          selections: (_a2 = selections == null ? void 0 : selections.map((s) => s.range)) != null ? _a2 : []
+        });
+      })), disposable.add(selectionService.selectionMoveEnd$.subscribe((selections) => {
+        var _a2;
+        this._eventListend(this.Event.SelectionMoveEnd) && this.fireEvent(this.Event.SelectionMoveEnd, {
+          workbook,
+          worksheet: workbook.getActiveSheet(),
+          selections: (_a2 = selections == null ? void 0 : selections.map((s) => s.range)) != null ? _a2 : []
+        });
+      })), disposable.add(selectionService.selectionChanged$.subscribe((selections) => {
+        var _a2;
+        this._eventListend(this.Event.SelectionChanged) && this.fireEvent(this.Event.SelectionChanged, {
+          workbook,
+          worksheet: workbook.getActiveSheet(),
+          selections: (_a2 = selections == null ? void 0 : selections.map((s) => s.range)) != null ? _a2 : []
+        });
+      })), sheetRenderUnit = null, this.disposeWithMe(disposable);
+    })), this.disposeWithMe(renderManagerService.disposed$.subscribe((unitId2) => {
+      var _a;
+      (_a = unitMap.get(unitId2)) == null || _a.dispose(), unitMap.delete(unitId2);
+    })), this.disposeWithMe(() => {
+      unitMap.forEach((disposable) => {
+        disposable.dispose();
+      });
+    });
   }
-  _initialize(e) {
-    this._initSheetUIEvent(e);
-    const t = e.get(p);
-    this.disposeWithMe(t.beforeCommandExecuted((r) => {
-      switch (r.id) {
-        case W.id:
-        case O.id:
+  /**
+   * @ignore
+   */
+  _initialize(injector) {
+    this._initSheetUIEvent(injector);
+    const commandService = injector.get(ICommandService);
+    this.disposeWithMe(commandService.beforeCommandExecuted((commandInfo) => {
+      switch (commandInfo.id) {
+        case CopyCommand.id:
+        case CutCommand.id:
           this._beforeClipboardChange();
           break;
-        case A.id:
-          this._beforeClipboardPaste(r.params);
+        case SheetPasteShortKeyCommand.id:
+          this._beforeClipboardPaste(commandInfo.params);
           break;
       }
-    })), this.disposeWithMe(t.onCommandExecuted((r) => {
-      switch (r.id) {
-        case W.id:
-        case O.id:
+    })), this.disposeWithMe(commandService.onCommandExecuted((commandInfo) => {
+      if (COMMAND_LISTENER_SKELETON_CHANGE.indexOf(commandInfo.id) > -1) {
+        if (!this._eventListend(this.Event.SheetSkeletonChanged)) return;
+        const sheet = this.getActiveSheet();
+        if (!sheet) return;
+        const ranges = getSkeletonChangedEffectedRange(commandInfo).map((range) => {
+          var _a, _b;
+          return (_b = (_a = this.getWorkbook(range.unitId)) == null ? void 0 : _a.getSheetBySheetId(range.subUnitId)) == null ? void 0 : _b.getRange(range.range);
+        }).filter(Boolean);
+        if (!ranges.length) return;
+        this.fireEvent(this.Event.SheetSkeletonChanged, {
+          workbook: sheet.workbook,
+          worksheet: sheet.worksheet,
+          payload: commandInfo,
+          skeleton: sheet.worksheet.getSkeleton(),
+          effectedRanges: ranges
+        });
+        return;
+      }
+      switch (commandInfo.id) {
+        case CopyCommand.id:
+        case CutCommand.id:
           this._clipboardChanged();
           break;
-        case A.id:
+        case SheetPasteShortKeyCommand.id:
           this._clipboardPaste();
           break;
-        case H.id:
+        case PasteCommand.id:
           this._clipboardPasteAsync();
           break;
       }
-    })), this.disposeWithMe(t.beforeCommandExecuted(async (r) => {
-      switch (r.id) {
-        case H.id:
+    })), this.disposeWithMe(commandService.beforeCommandExecuted(async (commandInfo) => {
+      switch (commandInfo.id) {
+        case PasteCommand.id:
           await this._beforeClipboardPasteAsync();
           break;
       }
     }));
   }
   _generateClipboardCopyParam() {
-    const e = this.getActiveWorkbook(), t = e == null ? void 0 : e.getActiveSheet(), r = e == null ? void 0 : e.getActiveRange();
-    if (!e || !t || !r)
+    const workbook = this.getActiveWorkbook(), worksheet = workbook == null ? void 0 : workbook.getActiveSheet(), range = workbook == null ? void 0 : workbook.getActiveRange();
+    if (!workbook || !worksheet || !range)
       return;
-    const i = this._injector.get(K).generateCopyContent(e.getId(), t.getSheetId(), r.getRange());
-    if (!i)
+    const content = this._injector.get(ISheetClipboardService).generateCopyContent(workbook.getId(), worksheet.getSheetId(), range.getRange());
+    if (!content)
       return;
-    const { html: o, plain: s } = i;
+    const { html, plain } = content;
     return {
-      workbook: e,
-      worksheet: t,
-      text: s,
-      html: o,
-      fromSheet: t,
-      fromRange: r
+      workbook,
+      worksheet,
+      text: plain,
+      html,
+      fromSheet: worksheet,
+      fromRange: range
     };
   }
   _beforeClipboardChange() {
     if (!this.hasEventCallback(this.Event.BeforeClipboardChange))
       return;
-    const e = this._generateClipboardCopyParam();
-    if (e && (this.fireEvent(this.Event.BeforeClipboardChange, e), e.cancel))
+    const eventParams = this._generateClipboardCopyParam();
+    if (eventParams && (this.fireEvent(this.Event.BeforeClipboardChange, eventParams), eventParams.cancel))
       throw new Error("Before clipboard change is canceled");
   }
   _clipboardChanged() {
     if (!this.hasEventCallback(this.Event.ClipboardChanged))
       return;
-    const e = this._generateClipboardCopyParam();
-    if (e && (this.fireEvent(this.Event.ClipboardChanged, e), e.cancel))
+    const eventParams = this._generateClipboardCopyParam();
+    if (eventParams && (this.fireEvent(this.Event.ClipboardChanged, eventParams), eventParams.cancel))
       throw new Error("Clipboard changed is canceled");
   }
-  _generateClipboardPasteParam(e) {
-    if (!e)
+  _generateClipboardPasteParam(params) {
+    if (!params)
       return;
-    const { htmlContent: t, textContent: r } = e, n = this.getActiveWorkbook(), i = n == null ? void 0 : n.getActiveSheet();
-    return !n || !i ? void 0 : {
-      workbook: n,
-      worksheet: i,
-      text: r,
-      html: t
+    const { htmlContent, textContent } = params, workbook = this.getActiveWorkbook(), worksheet = workbook == null ? void 0 : workbook.getActiveSheet();
+    return !workbook || !worksheet ? void 0 : {
+      workbook,
+      worksheet,
+      text: textContent,
+      html: htmlContent
     };
   }
   async _generateClipboardPasteParamAsync() {
-    const e = this.getActiveWorkbook(), t = e == null ? void 0 : e.getActiveSheet();
-    if (!e || !t)
+    const workbook = this.getActiveWorkbook(), worksheet = workbook == null ? void 0 : workbook.getActiveSheet();
+    if (!workbook || !worksheet)
       return;
-    const i = (await this._injector.get(ce).read())[0];
-    let o;
-    if (i) {
-      const s = i.types, c = s.indexOf(F) !== -1 ? await i.getType(F).then((l) => l && l.text()) : "", d = s.indexOf(L) !== -1 ? await i.getType(L).then((l) => l && l.text()) : "";
-      o = {
-        workbook: e,
-        worksheet: t,
-        text: c,
-        html: d
+    const item = (await this._injector.get(IClipboardInterfaceService).read())[0];
+    let eventParams;
+    if (item) {
+      const types = item.types, text = types.indexOf(PLAIN_TEXT_CLIPBOARD_MIME_TYPE) !== -1 ? await item.getType(PLAIN_TEXT_CLIPBOARD_MIME_TYPE).then((blob) => blob && blob.text()) : "", html = types.indexOf(HTML_CLIPBOARD_MIME_TYPE) !== -1 ? await item.getType(HTML_CLIPBOARD_MIME_TYPE).then((blob) => blob && blob.text()) : "";
+      eventParams = {
+        workbook,
+        worksheet,
+        text,
+        html
       };
     }
-    return o;
+    return eventParams;
   }
-  _beforeClipboardPaste(e) {
+  _beforeClipboardPaste(params) {
     if (!this.hasEventCallback(this.Event.BeforeClipboardPaste))
       return;
-    const t = this._generateClipboardPasteParam(e);
-    if (t && (this.fireEvent(this.Event.BeforeClipboardPaste, t), t.cancel))
+    const eventParams = this._generateClipboardPasteParam(params);
+    if (eventParams && (this.fireEvent(this.Event.BeforeClipboardPaste, eventParams), eventParams.cancel))
       throw new Error("Before clipboard paste is canceled");
   }
-  _clipboardPaste(e) {
+  _clipboardPaste(params) {
     if (!this.hasEventCallback(this.Event.BeforeClipboardPaste))
       return;
-    const t = this._generateClipboardPasteParam(e);
-    if (t && (this.fireEvent(this.Event.BeforeClipboardPaste, t), t.cancel))
+    const eventParams = this._generateClipboardPasteParam(params);
+    if (eventParams && (this.fireEvent(this.Event.BeforeClipboardPaste, eventParams), eventParams.cancel))
       throw new Error("Clipboard pasted is canceled");
   }
   async _beforeClipboardPasteAsync() {
     if (!this.hasEventCallback(this.Event.BeforeClipboardPaste))
       return;
-    if (!N()) {
-      this._injector.get(y).warn("[Facade]: The navigator object only supports the browser environment");
+    if (!supportClipboardAPI()) {
+      this._injector.get(ILogService).warn("[Facade]: The navigator object only supports the browser environment");
       return;
     }
-    const e = await this._generateClipboardPasteParamAsync();
-    if (e && (this.fireEvent(this.Event.BeforeClipboardPaste, e), e.cancel))
+    const eventParams = await this._generateClipboardPasteParamAsync();
+    if (eventParams && (this.fireEvent(this.Event.BeforeClipboardPaste, eventParams), eventParams.cancel))
       throw new Error("Before clipboard paste is canceled");
   }
   async _clipboardPasteAsync() {
     if (!this.hasEventCallback(this.Event.ClipboardPasted))
       return;
-    if (!N()) {
-      this._injector.get(y).warn("[Facade]: The navigator object only supports the browser environment");
+    if (!supportClipboardAPI()) {
+      this._injector.get(ILogService).warn("[Facade]: The navigator object only supports the browser environment");
       return;
     }
-    const e = await this._generateClipboardPasteParamAsync();
-    if (e && (this.fireEvent(this.Event.ClipboardPasted, e), e.cancel))
+    const eventParams = await this._generateClipboardPasteParamAsync();
+    if (eventParams && (this.fireEvent(this.Event.ClipboardPasted, eventParams), eventParams.cancel))
       throw new Error("Clipboard pasted is canceled");
   }
-  customizeColumnHeader(e) {
-    const t = this.getActiveWorkbook();
-    if (!t) {
+  customizeColumnHeader(cfg) {
+    var _a, _b;
+    const wb = this.getActiveWorkbook();
+    if (!wb) {
       console.error("WorkBook not exist");
       return;
     }
-    const r = t == null ? void 0 : t.getId();
-    this._getSheetRenderComponent(r, E.COLUMN).setCustomHeader(e);
+    const unitId = wb == null ? void 0 : wb.getId(), renderManagerService = this._injector.get(IRenderManagerService), activeSheet = wb.getActiveSheet(), subUnitId = activeSheet.getSheetId(), render = renderManagerService.getRenderById(unitId);
+    render && ((_a = cfg.headerStyle) != null && _a.size) && (render.with(SheetSkeletonManagerService).setColumnHeaderSize(render, subUnitId, (_b = cfg.headerStyle) == null ? void 0 : _b.size), activeSheet == null || activeSheet.refreshCanvas()), this._getSheetRenderComponent(unitId, SHEET_VIEW_KEY.COLUMN).setCustomHeader(cfg), activeSheet == null || activeSheet.refreshCanvas();
   }
-  customizeRowHeader(e) {
-    const t = this.getActiveWorkbook();
-    if (!t) {
+  customizeRowHeader(cfg) {
+    const wb = this.getActiveWorkbook();
+    if (!wb) {
       console.error("WorkBook not exist");
       return;
     }
-    const r = t == null ? void 0 : t.getId();
-    this._getSheetRenderComponent(r, E.ROW).setCustomHeader(e);
+    const unitId = wb == null ? void 0 : wb.getId();
+    this._getSheetRenderComponent(unitId, SHEET_VIEW_KEY.ROW).setCustomHeader(cfg);
   }
-  registerSheetRowHeaderExtension(e, ...t) {
-    const r = this._getSheetRenderComponent(e, E.ROW), n = r.register(...t);
-    return a(() => {
-      n.dispose(), r.makeDirty(!0);
+  registerSheetRowHeaderExtension(unitId, ...extensions) {
+    const sheetComponent = this._getSheetRenderComponent(unitId, SHEET_VIEW_KEY.ROW), registerDisposable = sheetComponent.register(...extensions);
+    return toDisposable(() => {
+      registerDisposable.dispose(), sheetComponent.makeDirty(!0);
     });
   }
-  registerSheetColumnHeaderExtension(e, ...t) {
-    const r = this._getSheetRenderComponent(e, E.COLUMN), n = r.register(...t);
-    return a(() => {
-      n.dispose(), r.makeDirty(!0);
+  registerSheetColumnHeaderExtension(unitId, ...extensions) {
+    const sheetComponent = this._getSheetRenderComponent(unitId, SHEET_VIEW_KEY.COLUMN), registerDisposable = sheetComponent.register(...extensions);
+    return toDisposable(() => {
+      registerDisposable.dispose(), sheetComponent.makeDirty(!0);
     });
   }
-  registerSheetMainExtension(e, ...t) {
-    const r = this._getSheetRenderComponent(e, E.MAIN), n = r.register(...t);
-    return a(() => {
-      n.dispose(), r.makeDirty(!0);
+  registerSheetMainExtension(unitId, ...extensions) {
+    const sheetComponent = this._getSheetRenderComponent(unitId, SHEET_VIEW_KEY.MAIN), registerDisposable = sheetComponent.register(...extensions);
+    return toDisposable(() => {
+      registerDisposable.dispose(), sheetComponent.makeDirty(!0);
     });
   }
   /**
@@ -274,233 +547,119 @@ class ue extends V {
    * @param {SHEET_VIEW_KEY} viewKey The view key of the spreadsheet.
    * @returns {Nullable<RenderComponentType>} The render component.
    */
-  _getSheetRenderComponent(e, t) {
-    const n = this._injector.get(g).getRenderById(e);
-    if (!n)
-      throw new Error(`Render Unit with unitId ${e} not found`);
-    const { components: i } = n, o = i.get(t);
-    if (!o)
+  _getSheetRenderComponent(unitId, viewKey) {
+    const render = this._injector.get(IRenderManagerService).getRenderById(unitId);
+    if (!render)
+      throw new Error(`Render Unit with unitId ${unitId} not found`);
+    const { components } = render, renderComponent = components.get(viewKey);
+    if (!renderComponent)
       throw new Error("Render component not found");
-    return o;
+    return renderComponent;
   }
   /**
    * Get sheet hooks.
    * @returns {FSheetHooks} FSheetHooks instance
    */
   getSheetHooks() {
-    return this._injector.createInstance(D);
+    return this._injector.createInstance(FSheetHooks);
   }
-}
-V.extend(ue);
-const h = {
-  CellClicked: "CellClicked",
-  CellPointerDown: "CellPointerDown",
-  CellPointerUp: "CellPointerUp",
-  CellPointerMove: "CellPointerMove",
-  CellHover: "CellHover",
-  DragOver: "DragOver",
-  Drop: "Drop"
 };
-class Se extends $ {
-  get BeforeClipboardChange() {
-    return "BeforeClipboardChange";
-  }
-  get ClipboardChanged() {
-    return "ClipboardChanged";
-  }
-  get BeforeClipboardPaste() {
-    return "BeforeClipboardPaste";
-  }
-  get ClipboardPasted() {
-    return "ClipboardPasted";
-  }
-  get BeforeSheetEditStart() {
-    return "BeforeSheetEditStart";
-  }
-  get SheetEditStarted() {
-    return "SheetEditStarted";
-  }
-  get SheetEditChanging() {
-    return "SheetEditChanging";
-  }
-  get BeforeSheetEditEnd() {
-    return "BeforeSheetEditEnd";
-  }
-  get SheetEditEnded() {
-    return "SheetEditEnded";
-  }
-  get CellClicked() {
-    return h.CellClicked;
-  }
-  get CellHover() {
-    return h.CellHover;
-  }
-  get CellPointerDown() {
-    return h.CellPointerDown;
-  }
-  get CellPointerUp() {
-    return h.CellPointerUp;
-  }
-  get CellPointerMove() {
-    return h.CellPointerMove;
-  }
-  get DragOver() {
-    return "DragOver";
-  }
-  get Drop() {
-    return "Drop";
-  }
-}
-$.extend(Se);
-class me extends Y {
-  openSiderbar(e) {
-    return this._logDeprecation("openSiderbar"), this._injector.get(le).open(e);
-  }
-  openDialog(e) {
+__name(_FUniverSheetsUIMixin, "FUniverSheetsUIMixin");
+let FUniverSheetsUIMixin = _FUniverSheetsUIMixin;
+FUniver.extend(FUniverSheetsUIMixin);
+const _FWorkbookSheetsUIMixin = class _FWorkbookSheetsUIMixin extends FWorkbook {
+  openSiderbar(params) {
+    return this._logDeprecation("openSiderbar"), this._injector.get(ISidebarService).open(params);
+  }
+  openDialog(dialog) {
     this._logDeprecation("openDialog");
-    const r = this._injector.get(de).open({
-      ...e,
-      onClose: () => {
-        r.dispose();
-      }
+    const disposable = this._injector.get(IDialogService).open({
+      ...dialog,
+      onClose: /* @__PURE__ */ __name(() => {
+        disposable.dispose();
+      }, "onClose")
     });
-    return r;
-  }
-  _logDeprecation(e) {
-    this._injector.get(y).warn("[FWorkbook]", `${e} is deprecated. Please use the function of the same name on "FUniver".`);
+    return disposable;
   }
-  addUIEvent(e, t) {
-    const r = this.getActiveSheet(), n = {
-      workbook: this,
-      worksheet: r
-    };
-    switch (e) {
-      case h.CellClicked:
-        this.onCellClick((i) => {
-          this.fireEvent(this.Event.CellClicked, {
-            row: i.location.row,
-            column: i.location.col,
-            ...n
-          });
-        });
-        break;
-      case h.CellPointerDown:
-        this.onCellPointerDown((i) => {
-          this.fireEvent(this.Event.CellPointerDown, this.generateCellParams(i));
-        });
-        break;
-      case h.CellPointerUp:
-        this.onCellPointerUp((i) => {
-          this.fireEvent(this.Event.CellPointerUp, this.generateCellParams(i));
-        });
-        break;
-      case h.CellPointerMove:
-        this.onCellPointerMove((i) => {
-          this.fireEvent(this.Event.CellPointerMove, this.generateCellParams(i));
-        });
-        break;
-      case h.CellHover:
-        this.onCellHover((i) => {
-          this.fireEvent(this.Event.CellHover, this.generateCellParams(i));
-        });
-        break;
-      case h.DragOver:
-        this.onDragOver((i) => {
-          this.fireEvent(this.Event.DragOver, {
-            row: i.location.row,
-            column: i.location.col,
-            ...n
-          });
-        });
-        break;
-      case h.Drop:
-        this.onDrop((i) => {
-          this.fireEvent(this.Event.Drop, {
-            row: i.location.row,
-            column: i.location.col,
-            ...n
-          });
-        });
-    }
-    return a(() => {
-    });
+  _logDeprecation(name) {
+    this._injector.get(ILogService).warn("[FWorkbook]", `${name} is deprecated. Please use the function of the same name on "FUniver".`);
   }
-  generateCellParams(e) {
-    const t = this.getActiveSheet();
+  generateCellParams(cell) {
+    const worksheet = this.getActiveSheet();
     return {
-      row: e.row,
-      column: e.col,
+      row: cell.row,
+      column: cell.col,
       workbook: this,
-      worksheet: t
+      worksheet
     };
   }
-  onCellClick(e) {
-    const t = this._injector.get(m);
-    return a(
-      t.currentClickedCell$.pipe(w((r) => !!r)).subscribe((r) => {
-        e(r);
+  onCellClick(callback) {
+    const hoverManagerService = this._injector.get(HoverManagerService);
+    return toDisposable(
+      hoverManagerService.currentClickedCell$.pipe(filter((cell) => !!cell)).subscribe((cell) => {
+        callback(cell);
       })
     );
   }
-  onCellHover(e) {
-    const t = this._injector.get(m);
-    return a(
-      t.currentRichText$.pipe(w((r) => !!r)).subscribe(e)
+  onCellHover(callback) {
+    const hoverManagerService = this._injector.get(HoverManagerService);
+    return toDisposable(
+      hoverManagerService.currentRichText$.pipe(filter((cell) => !!cell)).subscribe(callback)
     );
   }
-  onCellPointerDown(e) {
-    const t = this._injector.get(m);
-    return a(
-      t.currentPointerDownCell$.subscribe(e)
+  onCellPointerDown(callback) {
+    const hoverManagerService = this._injector.get(HoverManagerService);
+    return toDisposable(
+      hoverManagerService.currentPointerDownCell$.subscribe(callback)
     );
   }
-  onCellPointerUp(e) {
-    const t = this._injector.get(m);
-    return a(
-      t.currentPointerUpCell$.subscribe(e)
+  onCellPointerUp(callback) {
+    const hoverManagerService = this._injector.get(HoverManagerService);
+    return toDisposable(
+      hoverManagerService.currentPointerUpCell$.subscribe(callback)
     );
   }
-  onCellPointerMove(e) {
-    const t = this._injector.get(m);
-    return a(
-      t.currentCellPosWithEvent$.pipe(w((r) => !!r)).subscribe((r) => {
-        e(r, r.event);
+  onCellPointerMove(callback) {
+    const hoverManagerService = this._injector.get(HoverManagerService);
+    return toDisposable(
+      hoverManagerService.currentCellPosWithEvent$.pipe(filter((cell) => !!cell)).subscribe((cell) => {
+        callback(cell, cell.event);
       })
     );
   }
-  onDragOver(e) {
-    const t = this._injector.get(k);
-    return a(
-      t.currentCell$.pipe(w((r) => !!r)).subscribe((r) => {
-        e(r);
+  onDragOver(callback) {
+    const dragManagerService = this._injector.get(DragManagerService);
+    return toDisposable(
+      dragManagerService.currentCell$.pipe(filter((cell) => !!cell)).subscribe((cell) => {
+        callback(cell);
       })
     );
   }
-  onDrop(e) {
-    const t = this._injector.get(k);
-    return a(
-      t.endCell$.pipe(w((r) => !!r)).subscribe((r) => {
-        e(r);
+  onDrop(callback) {
+    const dragManagerService = this._injector.get(DragManagerService);
+    return toDisposable(
+      dragManagerService.endCell$.pipe(filter((cell) => !!cell)).subscribe((cell) => {
+        callback(cell);
       })
     );
   }
   startEditing() {
-    return this._injector.get(p).syncExecuteCommand(b.id, {
-      eventType: T.Dblclick,
+    return this._injector.get(ICommandService).syncExecuteCommand(SetCellEditVisibleOperation.id, {
+      eventType: DeviceInputEventType.Dblclick,
       unitId: this._workbook.getUnitId(),
       visible: !0
     });
   }
-  async endEditing(e) {
-    return this._injector.get(p).syncExecuteCommand(b.id, {
-      eventType: T.Keyboard,
-      keycode: e ? P.ENTER : P.ESC,
+  async endEditing(save) {
+    return this._injector.get(ICommandService).syncExecuteCommand(SetCellEditVisibleOperation.id, {
+      eventType: DeviceInputEventType.Keyboard,
+      keycode: save ? KeyCode.ENTER : KeyCode.ESC,
       visible: !1,
       unitId: this._workbook.getUnitId()
-    }), await J(0), !0;
+    }), await awaitTime(0), !0;
   }
-  endEditingAsync(e = !0) {
-    return this.endEditing(e);
+  endEditingAsync(save = !0) {
+    return this.endEditing(save);
   }
   /**
    * Get scroll state of specified sheet.
@@ -511,172 +670,311 @@ class me extends Y {
    * univerAPI.getActiveWorkbook().getScrollStateBySheetId($sheetId)
    * ```
    */
-  getScrollStateBySheetId(e) {
-    const t = this._workbook.getUnitId(), n = this._injector.get(g).getRenderById(t);
-    return n ? n.with(R).getScrollStateByParam({ unitId: t, sheetId: e }) : null;
+  getScrollStateBySheetId(sheetId) {
+    const unitId = this._workbook.getUnitId(), render = this._injector.get(IRenderManagerService).getRenderById(unitId);
+    return render ? render.with(SheetScrollManagerService).getScrollStateByParam({ unitId, sheetId }) : null;
   }
   disableSelection() {
-    const e = this._workbook.getUnitId(), r = this._injector.get(g).getRenderById(e);
-    return r && r.with(_).disableSelection(), this;
+    const unitId = this._workbook.getUnitId(), render = this._injector.get(IRenderManagerService).getRenderById(unitId);
+    return render && render.with(ISheetSelectionRenderService).disableSelection(), this;
   }
   enableSelection() {
-    const e = this._workbook.getUnitId(), r = this._injector.get(g).getRenderById(e);
-    return r && r.with(_).enableSelection(), this;
+    const unitId = this._workbook.getUnitId(), render = this._injector.get(IRenderManagerService).getRenderById(unitId);
+    return render && render.with(ISheetSelectionRenderService).enableSelection(), this;
   }
   transparentSelection() {
-    const e = this._workbook.getUnitId(), r = this._injector.get(g).getRenderById(e);
-    return r && r.with(_).transparentSelection(), this;
+    const unitId = this._workbook.getUnitId(), render = this._injector.get(IRenderManagerService).getRenderById(unitId);
+    return render && render.with(ISheetSelectionRenderService).transparentSelection(), this;
   }
   showSelection() {
-    const e = this._workbook.getUnitId(), r = this._injector.get(g).getRenderById(e);
-    return r && r.with(_).showSelection(), this;
+    const unitId = this._workbook.getUnitId(), render = this._injector.get(IRenderManagerService).getRenderById(unitId);
+    return render && render.with(ISheetSelectionRenderService).showSelection(), this;
   }
-}
-Y.extend(me);
-class pe extends Z {
+};
+__name(_FWorkbookSheetsUIMixin, "FWorkbookSheetsUIMixin");
+let FWorkbookSheetsUIMixin = _FWorkbookSheetsUIMixin;
+FWorkbook.extend(FWorkbookSheetsUIMixin);
+const _FWorksheetSkeletonMixin = class _FWorksheetSkeletonMixin extends FWorksheet {
   refreshCanvas() {
-    const e = this._injector.get(g), t = this._fWorkbook.id, r = e.getRenderById(t);
-    if (!r)
-      throw new Error(`Render Unit with unitId ${t} not found`);
-    r.with(x).reCalculate();
-    const n = r.mainComponent;
-    if (!n)
+    const renderManagerService = this._injector.get(IRenderManagerService), unitId = this._fWorkbook.id, render = renderManagerService.getRenderById(unitId);
+    if (!render)
+      throw new Error(`Render Unit with unitId ${unitId} not found`);
+    render.with(SheetSkeletonManagerService).reCalculate();
+    const mainComponent = render.mainComponent;
+    if (!mainComponent)
       throw new Error("Main component not found");
-    return n.makeDirty(), this;
+    return mainComponent.makeDirty(), this;
   }
-  zoom(e) {
-    return this._injector.get(p).syncExecuteCommand(ne.id, {
+  zoom(zoomRatio) {
+    return this._injector.get(ICommandService).syncExecuteCommand(ChangeZoomRatioCommand.id, {
       unitId: this._workbook.getUnitId(),
       subUnitId: this._worksheet.getSheetId(),
-      zoomRatio: e
+      zoomRatio
     }), this;
   }
   getZoom() {
     return this._worksheet.getZoomRatio();
   }
   getVisibleRange() {
-    const e = this._workbook.getUnitId(), r = this._injector.get(g).getRenderById(e);
-    let n = {
+    const unitId = this._workbook.getUnitId(), render = this._injector.get(IRenderManagerService).getRenderById(unitId);
+    let range = {
       startColumn: 0,
       startRow: 0,
       endColumn: 0,
       endRow: 0
     };
-    if (!r) return n;
-    const o = r.with(x).getCurrentSkeleton();
-    if (!o) return n;
-    const s = o == null ? void 0 : o.getVisibleRanges();
-    if (!s) return n;
-    n = o.getVisibleRangeByViewport(te.VIEW_MAIN);
-    for (const [c, d] of s)
-      re.indexOf(c) !== -1 && (n.startColumn = Math.min(n.startColumn, d.startColumn), n.startRow = Math.min(n.startRow, d.startRow), n.endColumn = Math.max(n.endColumn, d.endColumn), n.endRow = Math.max(n.endRow, d.endRow));
-    return n;
-  }
-  scrollToCell(e, t) {
-    const r = this._workbook.getUnitId(), i = this._injector.get(g).getRenderById(r);
-    return i && (i == null ? void 0 : i.with(ie)).scrollToCell(e, t), this;
+    if (!render) return range;
+    const sk = render.with(SheetSkeletonManagerService).getCurrentSkeleton();
+    if (!sk) return range;
+    const visibleRangeMap = sk == null ? void 0 : sk.getVisibleRanges();
+    if (!visibleRangeMap) return range;
+    range = sk.getVisibleRangeByViewport(SHEET_VIEWPORT_KEY.VIEW_MAIN);
+    for (const [k, r] of visibleRangeMap)
+      sheetContentViewportKeys.indexOf(k) !== -1 && (range.startColumn = Math.min(range.startColumn, r.startColumn), range.startRow = Math.min(range.startRow, r.startRow), range.endColumn = Math.max(range.endColumn, r.endColumn), range.endRow = Math.max(range.endRow, r.endRow));
+    return range;
+  }
+  scrollToCell(row, column) {
+    const unitId = this._workbook.getUnitId(), render = this._injector.get(IRenderManagerService).getRenderById(unitId);
+    return render && (render == null ? void 0 : render.with(SheetsScrollRenderController)).scrollToCell(row, column), this;
   }
   getScrollState() {
-    const e = {
+    const emptyScrollState = {
       offsetX: 0,
       offsetY: 0,
       sheetViewStartColumn: 0,
       sheetViewStartRow: 0
-    }, t = this._workbook.getUnitId(), r = this._worksheet.getSheetId(), i = this._injector.get(g).getRenderById(t);
-    return i && i.with(R).getScrollStateByParam({ unitId: t, sheetId: r }) || e;
-  }
-  onScroll(e) {
-    var i;
-    const t = this._workbook.getUnitId(), n = (i = this._injector.get(g).getRenderById(t)) == null ? void 0 : i.with(R);
-    if (n) {
-      const o = n.validViewportScrollInfo$.subscribe((s) => {
-        e(s);
+    }, unitId = this._workbook.getUnitId(), sheetId = this._worksheet.getSheetId(), render = this._injector.get(IRenderManagerService).getRenderById(unitId);
+    return render && render.with(SheetScrollManagerService).getScrollStateByParam({ unitId, sheetId }) || emptyScrollState;
+  }
+  onScroll(callback) {
+    var _a;
+    const unitId = this._workbook.getUnitId(), scrollManagerService = (_a = this._injector.get(IRenderManagerService).getRenderById(unitId)) == null ? void 0 : _a.with(SheetScrollManagerService);
+    if (scrollManagerService) {
+      const sub = scrollManagerService.validViewportScrollInfo$.subscribe((params) => {
+        callback(params);
       });
-      return a(o);
+      return toDisposable(sub);
     }
-    return a(() => {
+    return toDisposable(() => {
     });
   }
-}
-Z.extend(pe);
-class be extends z {
-  setPermissionDialogVisible(e) {
-    this._permissionService.setShowComponents(e);
-  }
-}
-z.extend(be);
-class fe extends D {
-  onCellPointerMove(e) {
-    return a(this._injector.get(m).currentPosition$.subscribe(e));
-  }
-  onCellPointerOver(e) {
-    return a(this._injector.get(m).currentCell$.subscribe(e));
-  }
-  onCellDragOver(e) {
-    return a(this._injector.get(k).currentCell$.subscribe(e));
+  getSkeleton() {
+    var _a, _b;
+    const service = (_a = this._injector.get(IRenderManagerService).getRenderById(this._workbook.getUnitId())) == null ? void 0 : _a.with(SheetSkeletonManagerService);
+    return (_b = service == null ? void 0 : service.getWorksheetSkeleton(this._worksheet.getSheetId())) == null ? void 0 : _b.skeleton;
+  }
+  setColumnAutoWidth(columnPosition, numColumn) {
+    const unitId = this._workbook.getUnitId(), subUnitId = this._worksheet.getSheetId(), ranges = [
+      {
+        startColumn: columnPosition,
+        endColumn: columnPosition + numColumn - 1,
+        startRow: 0,
+        endRow: this._worksheet.getRowCount() - 1
+      }
+    ];
+    return this._commandService.syncExecuteCommand(SetWorksheetColAutoWidthCommand.id, {
+      unitId,
+      subUnitId,
+      ranges
+    }), this;
   }
-  onCellDrop(e) {
-    return a(this._injector.get(k).endCell$.subscribe(e));
+};
+__name(_FWorksheetSkeletonMixin, "FWorksheetSkeletonMixin");
+let FWorksheetSkeletonMixin = _FWorksheetSkeletonMixin;
+FWorksheet.extend(FWorksheetSkeletonMixin);
+const _FPermissionSheetsUIMixin = class _FPermissionSheetsUIMixin extends FPermission {
+  setPermissionDialogVisible(visible) {
+    this._permissionService.setShowComponents(visible);
   }
-  onCellRender(e, t = q.Style, r = Ce.DATA_VALIDATION) {
-    return this._injector.get(ge).intercept(ve.CELL_CONTENT, {
-      effect: t,
-      handler: (n, i, o) => o({
-        ...n,
+};
+__name(_FPermissionSheetsUIMixin, "FPermissionSheetsUIMixin");
+let FPermissionSheetsUIMixin = _FPermissionSheetsUIMixin;
+FPermission.extend(FPermissionSheetsUIMixin);
+const _FSheetHooksUIMixin = class _FSheetHooksUIMixin extends FSheetHooks {
+  onCellPointerMove(callback) {
+    return toDisposable(this._injector.get(HoverManagerService).currentPosition$.subscribe(callback));
+  }
+  onCellPointerOver(callback) {
+    return toDisposable(this._injector.get(HoverManagerService).currentCell$.subscribe(callback));
+  }
+  onCellDragOver(callback) {
+    return toDisposable(this._injector.get(DragManagerService).currentCell$.subscribe(callback));
+  }
+  onCellDrop(callback) {
+    return toDisposable(this._injector.get(DragManagerService).endCell$.subscribe(callback));
+  }
+  onCellRender(customRender, effect = InterceptorEffectEnum.Style, priority = InterceptCellContentPriority.DATA_VALIDATION) {
+    return this._injector.get(SheetInterceptorService).intercept(INTERCEPTOR_POINT.CELL_CONTENT, {
+      effect,
+      handler: /* @__PURE__ */ __name((cell, pos, next) => next({
+        ...cell,
         customRender: [
-          ...(n == null ? void 0 : n.customRender) || [],
-          ...e || []
+          ...(cell == null ? void 0 : cell.customRender) || [],
+          ...customRender || []
         ]
-      }),
-      priority: r
+      }), "handler"),
+      priority
     });
   }
-  onBeforeCellEdit(e) {
-    return this._injector.get(p).beforeCommandExecuted((t) => {
-      const r = t.params;
-      t.id === b.id && r.visible && e(r);
+  onBeforeCellEdit(callback) {
+    return this._injector.get(ICommandService).beforeCommandExecuted((command) => {
+      const params = command.params;
+      command.id === SetCellEditVisibleOperation.id && params.visible && callback(params);
     });
   }
-  onAfterCellEdit(e) {
-    return this._injector.get(p).onCommandExecuted((t) => {
-      const r = t.params;
-      t.id === b.id && !r.visible && e(r);
+  onAfterCellEdit(callback) {
+    return this._injector.get(ICommandService).onCommandExecuted((command) => {
+      const params = command.params;
+      command.id === SetCellEditVisibleOperation.id && !params.visible && callback(params);
     });
   }
-}
-D.extend(fe);
-class Ee extends X {
+};
+__name(_FSheetHooksUIMixin, "FSheetHooksUIMixin");
+let FSheetHooksUIMixin = _FSheetHooksUIMixin;
+FSheetHooks.extend(FSheetHooksUIMixin);
+const CellFEventName = {
+  CellClicked: "CellClicked",
+  CellPointerDown: "CellPointerDown",
+  CellPointerUp: "CellPointerUp",
+  CellPointerMove: "CellPointerMove",
+  CellHover: "CellHover",
+  DragOver: "DragOver",
+  Drop: "Drop",
+  Scroll: "Scroll",
+  SelectionMoveStart: "SelectionMoveStart",
+  SelectionMoving: "SelectionMoving",
+  SelectionMoveEnd: "SelectionMoveEnd",
+  SelectionChanged: "SelectionChanged"
+}, _FSheetsUIEventName = class _FSheetsUIEventName extends FEventName {
+  get BeforeClipboardChange() {
+    return "BeforeClipboardChange";
+  }
+  get ClipboardChanged() {
+    return "ClipboardChanged";
+  }
+  get BeforeClipboardPaste() {
+    return "BeforeClipboardPaste";
+  }
+  get ClipboardPasted() {
+    return "ClipboardPasted";
+  }
+  get BeforeSheetEditStart() {
+    return "BeforeSheetEditStart";
+  }
+  get SheetEditStarted() {
+    return "SheetEditStarted";
+  }
+  get SheetEditChanging() {
+    return "SheetEditChanging";
+  }
+  get BeforeSheetEditEnd() {
+    return "BeforeSheetEditEnd";
+  }
+  get SheetEditEnded() {
+    return "SheetEditEnded";
+  }
+  get CellClicked() {
+    return CellFEventName.CellClicked;
+  }
+  get CellHover() {
+    return CellFEventName.CellHover;
+  }
+  get CellPointerDown() {
+    return CellFEventName.CellPointerDown;
+  }
+  get CellPointerUp() {
+    return CellFEventName.CellPointerUp;
+  }
+  get CellPointerMove() {
+    return CellFEventName.CellPointerMove;
+  }
+  get DragOver() {
+    return "DragOver";
+  }
+  get Drop() {
+    return "Drop";
+  }
+  get Scroll() {
+    return "Scroll";
+  }
+  get SelectionMoveStart() {
+    return "SelectionMoveStart";
+  }
+  get SelectionChanged() {
+    return "SelectionChanged";
+  }
+  get SelectionMoving() {
+    return "SelectionMoving";
+  }
+  get SelectionMoveEnd() {
+    return "SelectionMoveEnd";
+  }
+  get RowHeaderClick() {
+    return "RowHeaderClick";
+  }
+  get RowHeaderPointerDown() {
+    return "RowHeaderPointerDown";
+  }
+  get RowHeaderPointerUp() {
+    return "RowHeaderPointerUp";
+  }
+  get RowHeaderHover() {
+    return "RowHeaderHover";
+  }
+  get ColumnHeaderClick() {
+    return "ColumnHeaderClick";
+  }
+  get ColumnHeaderPointerDown() {
+    return "ColumnHeaderPointerDown";
+  }
+  get ColumnHeaderPointerUp() {
+    return "ColumnHeaderPointerUp";
+  }
+  get ColumnHeaderHover() {
+    return "ColumnHeaderHover";
+  }
+  get SheetSkeletonChanged() {
+    return "SheetSkeletonChanged";
+  }
+};
+__name(_FSheetsUIEventName, "FSheetsUIEventName");
+let FSheetsUIEventName = _FSheetsUIEventName;
+FEventName.extend(FSheetsUIEventName);
+const _FRangeSheetsUIMixin = class _FRangeSheetsUIMixin extends FRange {
   getCell() {
-    const e = this._injector.get(g), t = this._workbook.getUnitId(), r = this._worksheet.getSheetId();
-    return e.getRenderById(t).with(x).getWorksheetSkeleton(r).skeleton.getCellWithCoordByIndex(this._range.startRow, this._range.startColumn);
+    var _a;
+    const renderManagerService = this._injector.get(IRenderManagerService), logService = this._injector.get(ILogService), unitId = this._workbook.getUnitId(), subUnitId = this._worksheet.getSheetId(), render = renderManagerService.getRenderById(unitId), skeleton = (_a = render == null ? void 0 : render.with(SheetSkeletonManagerService).getWorksheetSkeleton(subUnitId)) == null ? void 0 : _a.skeleton;
+    if (!skeleton)
+      throw logService.error("[Facade]: `FRange.getCell` can only be called in current worksheet"), new Error("`FRange.getCell` can only be called in current worksheet");
+    return skeleton.getCellWithCoordByIndex(this._range.startRow, this._range.startColumn);
   }
   getCellRect() {
-    const { startX: e, startY: t, endX: r, endY: n } = this.getCell(), i = { x: e, y: t, width: r - e, height: n - t, top: t, left: e, bottom: n, right: r };
-    return { ...i, toJSON: () => JSON.stringify(i) };
+    const { startX: x, startY: y, endX: x2, endY: y2 } = this.getCell(), data = { x, y, width: x2 - x, height: y2 - y, top: y, left: x, bottom: y2, right: x2 };
+    return { ...data, toJSON: /* @__PURE__ */ __name(() => JSON.stringify(data), "toJSON") };
   }
   generateHTML() {
-    var t;
-    const e = this._injector.get(K).generateCopyContent(
+    var _a;
+    const copyContent = this._injector.get(ISheetClipboardService).generateCopyContent(
       this._workbook.getUnitId(),
       this._worksheet.getSheetId(),
       this._range
     );
-    return (t = e == null ? void 0 : e.html) != null ? t : "";
+    return (_a = copyContent == null ? void 0 : copyContent.html) != null ? _a : "";
   }
-  attachPopup(e) {
-    var o, s, c;
-    e.direction = (o = e.direction) != null ? o : "horizontal", e.extraProps = (s = e.extraProps) != null ? s : {}, e.offset = (c = e.offset) != null ? c : [0, 0];
-    const { key: t, disposableCollection: r } = we(e, this._injector.get(he)), i = this._injector.get(oe).attachPopupToCell(
+  attachPopup(popup) {
+    var _a, _b, _c;
+    popup.direction = (_a = popup.direction) != null ? _a : "horizontal", popup.extraProps = (_b = popup.extraProps) != null ? _b : {}, popup.offset = (_c = popup.offset) != null ? _c : [0, 0];
+    const { key, disposableCollection } = transformComponentKey(popup, this._injector.get(ComponentManager)), disposePopup = this._injector.get(SheetCanvasPopManagerService).attachPopupToCell(
       this._range.startRow,
       this._range.startColumn,
-      { ...e, componentKey: t },
+      { ...popup, componentKey: key },
       this.getUnitId(),
       this._worksheet.getSheetId()
     );
-    return i ? (r.add(i), r) : (r.dispose(), null);
+    return disposePopup ? (disposableCollection.add(disposePopup), disposableCollection) : (disposableCollection.dispose(), null);
   }
-  attachAlertPopup(e) {
-    const t = this._injector.get(se), r = {
+  attachAlertPopup(alert) {
+    const cellAlertService = this._injector.get(CellAlertManagerService), location = {
       workbook: this._workbook,
       worksheet: this._worksheet,
       row: this._range.startRow,
@@ -684,34 +982,60 @@ class Ee extends X {
       unitId: this.getUnitId(),
       subUnitId: this._worksheet.getSheetId()
     };
-    return t.showAlert({
-      ...e,
-      location: r
+    return cellAlertService.showAlert({
+      ...alert,
+      location
     }), {
-      dispose: () => {
-        t.removeAlert(e.key);
-      }
+      dispose: /* @__PURE__ */ __name(() => {
+        cellAlertService.removeAlert(alert.key);
+      }, "dispose")
     };
   }
-  highlight(e, t) {
-    const r = this._injector.get(ae), n = r.addShape({ range: this._range, style: e, primary: t });
-    if (!n)
+  /**
+   * attachDOMPopup
+   * @param popup
+   * @returns {IDisposable} disposable
+      let sheet = univerAPI.getActiveWorkbook().getActiveSheet();
+      let range = sheet.getRange(2, 2, 3, 3);
+      univerAPI.getActiveWorkbook().setActiveRange(range);
+      let disposable = range.attachDOMPopup({
+      componentKey: 'univer.sheet.single-dom-popup',
+      extraProps: { alert: { type: 0, title: 'This is an Info', message: 'This is an info message' } },
+      });
+   */
+  attachRangePopup(popup) {
+    var _a, _b, _c;
+    popup.direction = (_a = popup.direction) != null ? _a : "top-center", popup.extraProps = (_b = popup.extraProps) != null ? _b : {}, popup.offset = (_c = popup.offset) != null ? _c : [0, 0];
+    const { key, disposableCollection } = transformComponentKey(popup, this._injector.get(ComponentManager)), disposePopup = this._injector.get(SheetCanvasPopManagerService).attachRangePopup(
+      this._range,
+      { ...popup, componentKey: key },
+      this.getUnitId(),
+      this._worksheet.getSheetId()
+    );
+    return disposePopup ? (disposableCollection.add(disposePopup), disposableCollection) : (disposableCollection.dispose(), null);
+  }
+  highlight(style, primary) {
+    const markSelectionService = this._injector.get(IMarkSelectionService), id = markSelectionService.addShape({ range: this._range, style, primary });
+    if (!id)
       throw new Error("Failed to highlight current range");
-    return a(() => {
-      r.removeShape(n);
+    return toDisposable(() => {
+      markSelectionService.removeShape(id);
     });
   }
-}
-X.extend(Ee);
-function we(u, e) {
-  const { componentKey: t, isVue3: r } = u;
-  let n;
-  const i = new G();
-  return typeof t == "string" ? n = t : (n = `External_${Q(6)}`, i.add(e.register(n, t, { framework: r ? "vue3" : "react" }))), {
-    key: n,
-    disposableCollection: i
+};
+__name(_FRangeSheetsUIMixin, "FRangeSheetsUIMixin");
+let FRangeSheetsUIMixin = _FRangeSheetsUIMixin;
+FRange.extend(FRangeSheetsUIMixin);
+function transformComponentKey(component, componentManager) {
+  const { componentKey, isVue3 } = component;
+  let key;
+  const disposableCollection = new DisposableCollection();
+  return typeof componentKey == "string" ? key = componentKey : (key = `External_${generateRandomId(6)}`, disposableCollection.add(componentManager.register(key, componentKey, { framework: isVue3 ? "vue3" : "react" }))), {
+    key,
+    disposableCollection
   };
 }
+__name(transformComponentKey, "transformComponentKey");
 export {
-  we as transformComponentKey
+  transformComponentKey
 };