@univerjs/sheets-ui 0.5.3 → 0.5.4

package/lib/es/facade.js

@@ -1,11 +1,236 @@
-import { FUniver as b, toDisposable as i, ILogService as x, ICommandService as h, awaitTime as j, InterceptorEffectEnum as U, DisposableCollection as P, generateRandomId as D } from "@univerjs/core";
-import { IRenderManagerService as c, DeviceInputEventType as _, SHEET_VIEWPORT_KEY as B, sheetContentViewportKeys as T } from "@univerjs/engine-render";
-import { SHEET_VIEW_KEY as l, HoverManagerService as d, SetCellEditVisibleOperation as m, SheetScrollManagerService as v, ISheetSelectionRenderService as S, SheetSkeletonManagerService as C, ChangeZoomRatioCommand as W, SheetsScrollRenderController as A, DragManagerService as k, ISheetClipboardService as F, SheetCanvasPopManagerService as O, CellAlertManagerService as H, IMarkSelectionService as $ } from "@univerjs/sheets-ui";
-import { FSheetHooks as I, FWorkbook as R, FWorksheet as M, FPermission as f, FRange as y } from "@univerjs/sheets/facade";
-import { ISidebarService as V, IDialogService as N, KeyCode as w, ComponentManager as K } from "@univerjs/ui";
-import { filter as p } from "rxjs";
-import { SheetInterceptorService as L, INTERCEPTOR_POINT as Y, InterceptCellContentPriority as z } from "@univerjs/sheets";
-class Z extends b {
+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 {
+  // 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) {
+        if (!this._eventListend(this.Event.BeforeSheetEditStart) && !this._eventListend(this.Event.BeforeSheetEditEnd))
+          return;
+        const n = this.getCommandSheetTarget(r);
+        if (!n)
+          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,
+            isZenEditor: !1
+          };
+          if (this.fireEvent(this.Event.BeforeSheetEditStart, f), f.cancel)
+            throw new U();
+        } else {
+          const f = {
+            row: v.row,
+            column: v.column,
+            eventType: C,
+            keycode: S,
+            workbook: i,
+            worksheet: o,
+            isZenEditor: !1,
+            value: j.create(c.getUnit(I).getSnapshot()),
+            isConfirm: S !== P.ESC
+          };
+          if (this.fireEvent(this.Event.BeforeSheetEditEnd, f), f.cancel)
+            throw new U();
+        }
+      }
+    })), this.disposeWithMe(t.onCommandExecuted((r) => {
+      if (r.id === b.id) {
+        if (!this._eventListend(this.Event.SheetEditStarted) && !this._eventListend(this.Event.SheetEditEnded))
+          return;
+        const n = this.getCommandSheetTarget(r);
+        if (!n)
+          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,
+            isZenEditor: !1
+          };
+          this.fireEvent(this.Event.SheetEditStarted, v);
+        } else {
+          const v = {
+            row: C.row,
+            column: C.column,
+            eventType: S,
+            keycode: l,
+            workbook: i,
+            worksheet: o,
+            isZenEditor: !1,
+            isConfirm: l !== P.ESC
+          };
+          this.fireEvent(this.Event.SheetEditEnded, v);
+        }
+      }
+      if (r.id === ee.id) {
+        if (!this._eventListend(this.Event.SheetEditChanging))
+          return;
+        const n = this.getCommandSheetTarget(r);
+        if (!n)
+          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()),
+            isZenEditor: !1
+          };
+          this.fireEvent(this.Event.SheetEditChanging, v);
+        }
+      }
+    }));
+  }
+  _initialize(e) {
+    this._initSheetUIEvent(e);
+    const t = e.get(p);
+    this.disposeWithMe(t.beforeCommandExecuted((r) => {
+      switch (r.id) {
+        case W.id:
+        case O.id:
+          this._beforeClipboardChange();
+          break;
+        case A.id:
+          this._beforeClipboardPaste(r.params);
+          break;
+      }
+    })), this.disposeWithMe(t.onCommandExecuted((r) => {
+      switch (r.id) {
+        case W.id:
+        case O.id:
+          this._clipboardChanged();
+          break;
+        case A.id:
+          this._clipboardPaste();
+          break;
+        case H.id:
+          this._clipboardPasteAsync();
+          break;
+      }
+    })), this.disposeWithMe(t.beforeCommandExecuted(async (r) => {
+      switch (r.id) {
+        case H.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)
+      return;
+    const i = this._injector.get(K).generateCopyContent(e.getId(), t.getSheetId(), r.getRange());
+    if (!i)
+      return;
+    const { html: o, plain: s } = i;
+    return {
+      workbook: e,
+      worksheet: t,
+      text: s,
+      html: o,
+      fromSheet: t,
+      fromRange: r
+    };
+  }
+  _beforeClipboardChange() {
+    if (!this.hasEventCallback(this.Event.BeforeClipboardChange))
+      return;
+    const e = this._generateClipboardCopyParam();
+    if (e && (this.fireEvent(this.Event.BeforeClipboardChange, e), e.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))
+      throw new Error("Clipboard changed is canceled");
+  }
+  _generateClipboardPasteParam(e) {
+    if (!e)
+      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
+    };
+  }
+  async _generateClipboardPasteParamAsync() {
+    const e = this.getActiveWorkbook(), t = e == null ? void 0 : e.getActiveSheet();
+    if (!e || !t)
+      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
+      };
+    }
+    return o;
+  }
+  _beforeClipboardPaste(e) {
+    if (!this.hasEventCallback(this.Event.BeforeClipboardPaste))
+      return;
+    const t = this._generateClipboardPasteParam(e);
+    if (t && (this.fireEvent(this.Event.BeforeClipboardPaste, t), t.cancel))
+      throw new Error("Before clipboard paste is canceled");
+  }
+  _clipboardPaste(e) {
+    if (!this.hasEventCallback(this.Event.BeforeClipboardPaste))
+      return;
+    const t = this._generateClipboardPasteParam(e);
+    if (t && (this.fireEvent(this.Event.BeforeClipboardPaste, t), t.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");
+      return;
+    }
+    const e = await this._generateClipboardPasteParamAsync();
+    if (e && (this.fireEvent(this.Event.BeforeClipboardPaste, e), e.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");
+      return;
+    }
+    const e = await this._generateClipboardPasteParamAsync();
+    if (e && (this.fireEvent(this.Event.ClipboardPasted, e), e.cancel))
+      throw new Error("Clipboard pasted is canceled");
+  }
   customizeColumnHeader(e) {
     const t = this.getActiveWorkbook();
     if (!t) {
@@ -13,7 +238,7 @@ class Z extends b {
       return;
     }
     const r = t == null ? void 0 : t.getId();
-    this._getSheetRenderComponent(r, l.COLUMN).setCustomHeader(e);
+    this._getSheetRenderComponent(r, E.COLUMN).setCustomHeader(e);
   }
   customizeRowHeader(e) {
     const t = this.getActiveWorkbook();
@@ -22,61 +247,118 @@ class Z extends b {
       return;
     }
     const r = t == null ? void 0 : t.getId();
-    this._getSheetRenderComponent(r, l.ROW).setCustomHeader(e);
+    this._getSheetRenderComponent(r, E.ROW).setCustomHeader(e);
   }
   registerSheetRowHeaderExtension(e, ...t) {
-    const r = this._getSheetRenderComponent(e, l.ROW), n = r.register(...t);
-    return i(() => {
+    const r = this._getSheetRenderComponent(e, E.ROW), n = r.register(...t);
+    return a(() => {
       n.dispose(), r.makeDirty(!0);
     });
   }
   registerSheetColumnHeaderExtension(e, ...t) {
-    const r = this._getSheetRenderComponent(e, l.COLUMN), n = r.register(...t);
-    return i(() => {
+    const r = this._getSheetRenderComponent(e, E.COLUMN), n = r.register(...t);
+    return a(() => {
       n.dispose(), r.makeDirty(!0);
     });
   }
   registerSheetMainExtension(e, ...t) {
-    const r = this._getSheetRenderComponent(e, l.MAIN), n = r.register(...t);
-    return i(() => {
+    const r = this._getSheetRenderComponent(e, E.MAIN), n = r.register(...t);
+    return a(() => {
       n.dispose(), r.makeDirty(!0);
     });
   }
   /**
    * Get sheet render component from render by unitId and view key.
-   *
    * @private
-   *
    * @param {string} unitId The unit id of the spreadsheet.
    * @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(c).getRenderById(e);
+    const n = this._injector.get(g).getRenderById(e);
     if (!n)
       throw new Error(`Render Unit with unitId ${e} not found`);
-    const { components: o } = n, s = o.get(t);
-    if (!s)
+    const { components: i } = n, o = i.get(t);
+    if (!o)
       throw new Error("Render component not found");
-    return s;
+    return o;
   }
   /**
    * Get sheet hooks.
-   *
    * @returns {FSheetHooks} FSheetHooks instance
    */
   getSheetHooks() {
-    return this._injector.createInstance(I);
+    return this._injector.createInstance(D);
   }
 }
-b.extend(Z);
-class J extends R {
+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(V).open(e);
+    return this._logDeprecation("openSiderbar"), this._injector.get(le).open(e);
   }
   openDialog(e) {
     this._logDeprecation("openDialog");
-    const r = this._injector.get(N).open({
+    const r = this._injector.get(de).open({
       ...e,
       onClose: () => {
         r.dispose();
@@ -85,60 +367,144 @@ class J extends R {
     return r;
   }
   _logDeprecation(e) {
-    this._injector.get(x).warn("[FWorkbook]", `${e} is deprecated. Please use the function of the same name on "FUniver".`);
+    this._injector.get(y).warn("[FWorkbook]", `${e} is deprecated. Please use the function of the same name on "FUniver".`);
+  }
+  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(() => {
+    });
+  }
+  generateCellParams(e) {
+    const t = this.getActiveSheet();
+    return {
+      row: e.row,
+      column: e.col,
+      workbook: this,
+      worksheet: t
+    };
   }
   onCellClick(e) {
-    const t = this._injector.get(d);
-    return i(
-      t.currentClickedCell$.pipe(p((r) => !!r)).subscribe(e)
+    const t = this._injector.get(m);
+    return a(
+      t.currentClickedCell$.pipe(w((r) => !!r)).subscribe((r) => {
+        e(r);
+      })
     );
   }
   onCellHover(e) {
-    const t = this._injector.get(d);
-    return i(
-      t.currentRichText$.pipe(p((r) => !!r)).subscribe(e)
+    const t = this._injector.get(m);
+    return a(
+      t.currentRichText$.pipe(w((r) => !!r)).subscribe(e)
     );
   }
   onCellPointerDown(e) {
-    const t = this._injector.get(d);
-    return i(
+    const t = this._injector.get(m);
+    return a(
       t.currentPointerDownCell$.subscribe(e)
     );
   }
   onCellPointerUp(e) {
-    const t = this._injector.get(d);
-    return i(
+    const t = this._injector.get(m);
+    return a(
       t.currentPointerUpCell$.subscribe(e)
     );
   }
-  onPointerMove(e) {
-    const t = this._injector.get(d);
-    return i(
-      t.currentCellPosWithEvent$.pipe(p((r) => !!r)).subscribe((r) => {
-        e(r, r.event.buttons);
+  onCellPointerMove(e) {
+    const t = this._injector.get(m);
+    return a(
+      t.currentCellPosWithEvent$.pipe(w((r) => !!r)).subscribe((r) => {
+        e(r, r.event);
+      })
+    );
+  }
+  onDragOver(e) {
+    const t = this._injector.get(k);
+    return a(
+      t.currentCell$.pipe(w((r) => !!r)).subscribe((r) => {
+        e(r);
+      })
+    );
+  }
+  onDrop(e) {
+    const t = this._injector.get(k);
+    return a(
+      t.endCell$.pipe(w((r) => !!r)).subscribe((r) => {
+        e(r);
       })
     );
   }
   startEditing() {
-    return this._injector.get(h).syncExecuteCommand(m.id, {
-      eventType: _.Dblclick,
+    return this._injector.get(p).syncExecuteCommand(b.id, {
+      eventType: T.Dblclick,
       unitId: this._workbook.getUnitId(),
       visible: !0
     });
   }
   async endEditing(e) {
-    return this._injector.get(h).syncExecuteCommand(m.id, {
-      eventType: _.Keyboard,
-      keycode: e ? w.ENTER : w.ESC,
+    return this._injector.get(p).syncExecuteCommand(b.id, {
+      eventType: T.Keyboard,
+      keycode: e ? P.ENTER : P.ESC,
       visible: !1,
       unitId: this._workbook.getUnitId()
-    }), await j(0), !0;
+    }), await J(0), !0;
   }
   endEditingAsync(e = !0) {
     return this.endEditing(e);
   }
   /**
    * Get scroll state of specified sheet.
+   * @param {string} sheetId - sheet id
    * @returns {IScrollState} scroll state
    * @example
    * ``` ts
@@ -146,40 +512,40 @@ class J extends R {
    * ```
    */
   getScrollStateBySheetId(e) {
-    const t = this._workbook.getUnitId(), n = this._injector.get(c).getRenderById(t);
-    return n ? n.with(v).getScrollStateByParam({ unitId: t, sheetId: e }) : null;
+    const t = this._workbook.getUnitId(), n = this._injector.get(g).getRenderById(t);
+    return n ? n.with(R).getScrollStateByParam({ unitId: t, sheetId: e }) : null;
   }
   disableSelection() {
-    const e = this._workbook.getUnitId(), r = this._injector.get(c).getRenderById(e);
-    r && r.with(S).disableSelection();
+    const e = this._workbook.getUnitId(), r = this._injector.get(g).getRenderById(e);
+    return r && r.with(_).disableSelection(), this;
   }
   enableSelection() {
-    const e = this._workbook.getUnitId(), r = this._injector.get(c).getRenderById(e);
-    r && r.with(S).enableSelection();
+    const e = this._workbook.getUnitId(), r = this._injector.get(g).getRenderById(e);
+    return r && r.with(_).enableSelection(), this;
   }
   transparentSelection() {
-    const e = this._workbook.getUnitId(), r = this._injector.get(c).getRenderById(e);
-    r && r.with(S).transparentSelection();
+    const e = this._workbook.getUnitId(), r = this._injector.get(g).getRenderById(e);
+    return r && r.with(_).transparentSelection(), this;
   }
   showSelection() {
-    const e = this._workbook.getUnitId(), r = this._injector.get(c).getRenderById(e);
-    r && r.with(S).showSelection();
+    const e = this._workbook.getUnitId(), r = this._injector.get(g).getRenderById(e);
+    return r && r.with(_).showSelection(), this;
   }
 }
-R.extend(J);
-class X extends M {
+Y.extend(me);
+class pe extends Z {
   refreshCanvas() {
-    const e = this._injector.get(c), t = this._fWorkbook.id, r = e.getRenderById(t);
+    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(C).reCalculate();
+    r.with(x).reCalculate();
     const n = r.mainComponent;
     if (!n)
       throw new Error("Main component not found");
-    n.makeDirty();
+    return n.makeDirty(), this;
   }
   zoom(e) {
-    return this._injector.get(h).syncExecuteCommand(W.id, {
+    return this._injector.get(p).syncExecuteCommand(ne.id, {
       unitId: this._workbook.getUnitId(),
       subUnitId: this._worksheet.getSheetId(),
       zoomRatio: e
@@ -189,7 +555,7 @@ class X extends M {
     return this._worksheet.getZoomRatio();
   }
   getVisibleRange() {
-    const e = this._workbook.getUnitId(), r = this._injector.get(c).getRenderById(e);
+    const e = this._workbook.getUnitId(), r = this._injector.get(g).getRenderById(e);
     let n = {
       startColumn: 0,
       startRow: 0,
@@ -197,60 +563,65 @@ class X extends M {
       endRow: 0
     };
     if (!r) return n;
-    const s = r.with(C).getCurrentSkeleton();
+    const o = r.with(x).getCurrentSkeleton();
+    if (!o) return n;
+    const s = o == null ? void 0 : o.getVisibleRanges();
     if (!s) return n;
-    const g = s == null ? void 0 : s.getVisibleRanges();
-    if (!g) return n;
-    n = s.getVisibleRangeByViewport(B.VIEW_MAIN);
-    for (const [E, u] of g)
-      T.indexOf(E) !== -1 && (n.startColumn = Math.min(n.startColumn, u.startColumn), n.startRow = Math.min(n.startRow, u.startRow), n.endColumn = Math.max(n.endColumn, u.endColumn), n.endRow = Math.max(n.endRow, u.endRow));
+    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(), o = this._injector.get(c).getRenderById(r);
-    o && (o == null ? void 0 : o.with(A)).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;
   }
   getScrollState() {
-    const e = this._workbook.getUnitId(), t = this._worksheet.getSheetId(), n = this._injector.get(c).getRenderById(e);
-    return n ? n.with(v).getScrollStateByParam({ unitId: e, sheetId: t }) : null;
+    const e = {
+      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 o;
-    const t = this._workbook.getUnitId(), n = (o = this._injector.get(c).getRenderById(t)) == null ? void 0 : o.with(v);
+    var i;
+    const t = this._workbook.getUnitId(), n = (i = this._injector.get(g).getRenderById(t)) == null ? void 0 : i.with(R);
     if (n) {
-      const s = n.validViewportScrollInfo$.subscribe((g) => {
-        e(g);
+      const o = n.validViewportScrollInfo$.subscribe((s) => {
+        e(s);
       });
-      return i(s);
+      return a(o);
     }
-    return i(() => {
+    return a(() => {
     });
   }
 }
-M.extend(X);
-class q extends f {
+Z.extend(pe);
+class be extends z {
   setPermissionDialogVisible(e) {
     this._permissionService.setShowComponents(e);
   }
 }
-f.extend(q);
-class G extends I {
+z.extend(be);
+class fe extends D {
   onCellPointerMove(e) {
-    return i(this._injector.get(d).currentPosition$.subscribe(e));
+    return a(this._injector.get(m).currentPosition$.subscribe(e));
   }
   onCellPointerOver(e) {
-    return i(this._injector.get(d).currentCell$.subscribe(e));
+    return a(this._injector.get(m).currentCell$.subscribe(e));
   }
   onCellDragOver(e) {
-    return i(this._injector.get(k).currentCell$.subscribe(e));
+    return a(this._injector.get(k).currentCell$.subscribe(e));
   }
   onCellDrop(e) {
-    return i(this._injector.get(k).endCell$.subscribe(e));
+    return a(this._injector.get(k).endCell$.subscribe(e));
   }
-  onCellRender(e, t = U.Style, r = z.DATA_VALIDATION) {
-    return this._injector.get(L).intercept(Y.CELL_CONTENT, {
+  onCellRender(e, t = q.Style, r = Ce.DATA_VALIDATION) {
+    return this._injector.get(ge).intercept(ve.CELL_CONTENT, {
       effect: t,
-      handler: (n, o, s) => s({
+      handler: (n, i, o) => o({
         ...n,
         customRender: [
           ...(n == null ? void 0 : n.customRender) || [],
@@ -261,31 +632,31 @@ class G extends I {
     });
   }
   onBeforeCellEdit(e) {
-    return this._injector.get(h).beforeCommandExecuted((t) => {
+    return this._injector.get(p).beforeCommandExecuted((t) => {
       const r = t.params;
-      t.id === m.id && r.visible && e(r);
+      t.id === b.id && r.visible && e(r);
     });
   }
   onAfterCellEdit(e) {
-    return this._injector.get(h).onCommandExecuted((t) => {
+    return this._injector.get(p).onCommandExecuted((t) => {
       const r = t.params;
-      t.id === m.id && !r.visible && e(r);
+      t.id === b.id && !r.visible && e(r);
     });
   }
 }
-I.extend(G);
-class Q extends y {
+D.extend(fe);
+class Ee extends X {
   getCell() {
-    const e = this._injector.get(c), t = this._workbook.getUnitId(), r = this._worksheet.getSheetId();
-    return e.getRenderById(t).with(C).getWorksheetSkeleton(r).skeleton.getCellWithCoordByIndex(this._range.startRow, this._range.startColumn);
+    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);
   }
   getCellRect() {
-    const { startX: e, startY: t, endX: r, endY: n } = this.getCell(), o = { x: e, y: t, width: r - e, height: n - t, top: t, left: e, bottom: n, right: r };
-    return { ...o, toJSON: () => JSON.stringify(o) };
+    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) };
   }
   generateHTML() {
     var t;
-    const e = this._injector.get(F).generateCopyContent(
+    const e = this._injector.get(K).generateCopyContent(
       this._workbook.getUnitId(),
       this._worksheet.getSheetId(),
       this._range
@@ -293,17 +664,19 @@ class Q extends y {
     return (t = e == null ? void 0 : e.html) != null ? t : "";
   }
   attachPopup(e) {
-    const { key: t, disposableCollection: r } = ee(e, this._injector.get(K)), o = this._injector.get(O).attachPopupToCell(
+    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(
       this._range.startRow,
       this._range.startColumn,
       { ...e, componentKey: t },
       this.getUnitId(),
       this._worksheet.getSheetId()
     );
-    return o ? (r.add(o), r) : (r.dispose(), null);
+    return i ? (r.add(i), r) : (r.dispose(), null);
   }
   attachAlertPopup(e) {
-    const t = this._injector.get(H), r = {
+    const t = this._injector.get(se), r = {
       workbook: this._workbook,
       worksheet: this._worksheet,
       row: this._range.startRow,
@@ -321,24 +694,24 @@ class Q extends y {
     };
   }
   highlight(e, t) {
-    const r = this._injector.get($), n = r.addShape({ range: this._range, style: e, primary: t });
+    const r = this._injector.get(ae), n = r.addShape({ range: this._range, style: e, primary: t });
     if (!n)
       throw new Error("Failed to highlight current range");
-    return i(() => {
+    return a(() => {
       r.removeShape(n);
     });
   }
 }
-y.extend(Q);
-function ee(a, e) {
-  const { componentKey: t, isVue3: r } = a;
+X.extend(Ee);
+function we(u, e) {
+  const { componentKey: t, isVue3: r } = u;
   let n;
-  const o = new P();
-  return typeof t == "string" ? n = t : (n = `External_${D(6)}`, o.add(e.register(n, t, { framework: r ? "vue3" : "react" }))), {
+  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: o
+    disposableCollection: i
   };
 }
 export {
-  ee as transformComponentKey
+  we as transformComponentKey
 };