@univerjs/sheets-drawing-ui 0.6.0-nightly.202502181606 → 0.6.0-nightly.202502201606

package/lib/es/facade.js

@@ -1,36 +1,36 @@
-var L = Object.defineProperty;
-var X = (r, t, e) => t in r ? L(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var x = (r, t, e) => X(r, typeof t != "symbol" ? t + "" : t, e);
-import { Inject as P, Injector as j, ICommandService as W, generateRandomId as Y, DrawingTypeEnum as _, ImageSourceType as I, ArrangeTypeEnum as v, toDisposable as k } from "@univerjs/core";
-import { FBase as V, FEnum as M, FEventName as H, FUniver as z } from "@univerjs/core/facade";
-import { getImageSize as q, IDrawingManagerService as f, SetDrawingSelectedOperation as A } from "@univerjs/drawing";
-import { IRenderManagerService as F } from "@univerjs/engine-render";
-import { SetSheetDrawingCommand as h, SetDrawingArrangeCommand as w, SheetCanvasFloatDomManagerService as C, InsertSheetDrawingCommand as S, RemoveSheetDrawingCommand as R } from "@univerjs/sheets-drawing-ui";
-import { SheetSkeletonManagerService as U, ISheetSelectionRenderService as J, convertPositionSheetOverGridToAbsolute as Q, convertPositionCellToSheetOverGrid as Z } from "@univerjs/sheets-ui";
-import { ISheetDrawingService as l, SheetDrawingAnchorType as ee } from "@univerjs/sheets-drawing";
-import { transformComponentKey as y } from "@univerjs/sheets-ui/facade";
-import { FWorksheet as N } from "@univerjs/sheets/facade";
-import { ComponentManager as D } from "@univerjs/ui";
-var te = Object.defineProperty, re = Object.getOwnPropertyDescriptor, $ = (r, t, e, i) => {
-  for (var n = i > 1 ? void 0 : i ? re(t, e) : t, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (n = (i ? o(t, e, n) : o(n)) || n);
-  return i && n && te(t, e, n), n;
-}, G = (r, t) => (e, i) => t(e, i, r);
-function ie(r, t) {
-  const { from: e, to: i, flipY: n = !1, flipX: s = !1, angle: o = 0, skewX: d = 0, skewY: a = 0 } = r.sheetTransform, { column: g, columnOffset: c, row: u, rowOffset: b } = e, O = Q(
-    r.unitId,
-    r.subUnitId,
-    { from: e, to: i },
-    t
-  ), { left: B, top: T, width: E, height: K } = O;
+var K = Object.defineProperty;
+var L = (e, r, t) => r in e ? K(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t;
+var T = (e, r, t) => L(e, typeof r != "symbol" ? r + "" : r, t);
+import { Inject as U, Injector as P, ICommandService as j, ImageSourceType as f, ArrangeTypeEnum as v, DrawingTypeEnum as _, generateRandomId as X, toDisposable as y } from "@univerjs/core";
+import { FBase as Y, FEnum as W, FEventName as M, FUniver as H } from "@univerjs/core/facade";
+import { getImageSize as V, IDrawingManagerService as I, SetDrawingSelectedOperation as x } from "@univerjs/drawing";
+import { IRenderManagerService as A } from "@univerjs/engine-render";
+import { RemoveSheetDrawingCommand as S, SetSheetDrawingCommand as h, SetDrawingArrangeCommand as w, SheetCanvasFloatDomManagerService as D, InsertSheetDrawingCommand as p } from "@univerjs/sheets-drawing-ui";
+import { SheetSkeletonManagerService as F, ISheetSelectionRenderService as q, convertPositionSheetOverGridToAbsolute as J, convertPositionCellToSheetOverGrid as Q } from "@univerjs/sheets-ui";
+import { ISheetDrawingService as l, SheetDrawingAnchorType as Z } from "@univerjs/sheets-drawing";
+import { transformComponentKey as R } from "@univerjs/sheets-ui/facade";
+import { FWorksheet as z } from "@univerjs/sheets/facade";
+import { ComponentManager as G } from "@univerjs/ui";
+var ee = Object.getOwnPropertyDescriptor, N = (e, r, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? ee(r, t) : r, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (n = o(n) || n);
+  return n;
+}, B = (e, r) => (t, i) => r(t, i, e);
+function te(e, r) {
+  const { from: t, to: i, flipY: n = !1, flipX: s = !1, angle: o = 0, skewX: d = 0, skewY: a = 0 } = e.sheetTransform, { column: g, columnOffset: c, row: u, rowOffset: O } = t, k = J(
+    e.unitId,
+    e.subUnitId,
+    { from: t, to: i },
+    r
+  ), { width: E, height: C } = k;
   return {
-    ...r,
+    ...e,
     column: g,
     columnOffset: c,
     row: u,
-    rowOffset: b,
+    rowOffset: O,
     width: E,
-    height: K,
+    height: C,
     flipY: n,
     flipX: s,
     angle: o,
@@ -38,20 +38,20 @@ function ie(r, t) {
     skewY: a
   };
 }
-function ne(r, t, e) {
-  const { column: i, columnOffset: n, row: s, rowOffset: o, flipY: d = !1, flipX: a = !1, angle: g = 0, skewX: c = 0, skewY: u = 0, width: b, height: O } = r, B = Z(
-    r.unitId,
-    r.subUnitId,
+function re(e, r, t) {
+  const { column: i, columnOffset: n, row: s, rowOffset: o, flipY: d = !1, flipX: a = !1, angle: g = 0, skewX: c = 0, skewY: u = 0, width: O, height: k } = e, E = Q(
+    e.unitId,
+    e.subUnitId,
     { column: i, columnOffset: n, row: s, rowOffset: o },
-    b,
     O,
-    t,
-    e
-  ), { sheetTransform: T, transform: E } = B;
+    k,
+    r,
+    t
+  ), { sheetTransform: C, transform: $ } = E;
   return {
-    ...r,
+    ...e,
     sheetTransform: {
-      ...T,
+      ...C,
       flipY: d,
       flipX: a,
       angle: g,
@@ -59,7 +59,7 @@ function ne(r, t, e) {
       skewY: u
     },
     transform: {
-      ...E,
+      ...$,
       flipY: d,
       flipX: a,
       angle: g,
@@ -68,16 +68,16 @@ function ne(r, t, e) {
     }
   };
 }
-let p = class {
-  constructor(r, t, e) {
-    x(this, "_image");
-    this._injector = e, this._image = {
-      drawingId: Y(6),
+let b = class {
+  constructor(e, r, t) {
+    T(this, "_image");
+    this._injector = t, this._image = {
+      drawingId: X(6),
       drawingType: _.DRAWING_IMAGE,
-      imageSourceType: I.BASE64,
+      imageSourceType: f.BASE64,
       source: "",
-      unitId: r,
-      subUnitId: t,
+      unitId: e,
+      subUnitId: r,
       column: 0,
       columnOffset: 0,
       row: 0,
@@ -88,31 +88,35 @@ let p = class {
   }
   /**
    * Set the initial image configuration for the image builder.
-   * @param image The image to be set. {@link ISheetImage}
-   * @returns The builder. {@link FOverGridImageBuilder}
+   * @param {ISheetImage} image - The image configuration
+   * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
    * @example
    * ```ts
-   * // create a new image builder.
-   * const activeSpreadsheet = univerAPI.getActiveWorkbook();
-   * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const imageBuilder = activeSheet.newOverGridImage();
-   * const param = await imageBuilder.setImage({
-   *    drawingId: '123456',
-   *    drawingType: univerAPI.Enum.DrawingType.DRAWING_IMAGE,
-   *    imageSourceType: univerAPI.Enum.ImageSourceType.BASE64,
-   *    source: 'https://avatars.githubusercontent.com/u/61444807?s=48&v=4',
-   *    unitId: activeSpreadsheet.getId(),
-   *    subUnitId: activeSheet.getSheetId(),
-   * }).setColumn(5).setRow(5).buildAsync();
-   * activeSheet.insertImages([param]);
+   * // create a new image builder and set initial image configuration.
+   * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell.
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = await fWorksheet.newOverGridImage()
+   *   .setImage({
+   *     drawingId: '123456',
+   *     drawingType: univerAPI.Enum.DrawingType.DRAWING_IMAGE,
+   *     imageSourceType: univerAPI.Enum.ImageSourceType.BASE64,
+   *     source: 'https://avatars.githubusercontent.com/u/61444807?s=48&v=4',
+   *     unitId: fWorkbook.getId(),
+   *     subUnitId: fWorksheet.getSheetId(),
+   *   })
+   *   .setColumn(5)
+   *   .setRow(5)
+   *   .buildAsync();
+   * fWorksheet.insertImages([image]);
    * ```
    */
-  setImage(r) {
-    const e = this._injector.get(F).getRenderById(r.unitId);
-    if (!e)
-      throw new Error(`Render Unit with unitId ${r.unitId} not found`);
-    const i = e.with(U);
-    return r.sheetTransform == null && (r.sheetTransform = {
+  setImage(e) {
+    const t = this._injector.get(A).getRenderById(e.unitId);
+    if (!t)
+      throw new Error(`Render Unit with unitId ${e.unitId} not found`);
+    const i = t.with(F);
+    return e.sheetTransform == null && (e.sheetTransform = {
       from: {
         column: 0,
         columnOffset: 0,
@@ -125,204 +129,312 @@ let p = class {
         row: 0,
         rowOffset: 0
       }
-    }), this._image = ie(r, i), this;
+    }), this._image = te(e, i), this;
   }
-  setSource(r, t) {
-    const e = t != null ? t : I.URL;
-    return this._image.source = r, this._image.imageSourceType = e, this;
+  setSource(e, r) {
+    const t = r != null ? r : f.URL;
+    return this._image.source = e, this._image.imageSourceType = t, this;
   }
-  getsource() {
+  /**
+   * Get the source of the image
+   * @returns {string} The source of the image
+   * @example
+   * ```ts
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const images = fWorksheet.getImages();
+   * images.forEach((image) => {
+   *   console.log(image, image.toBuilder().getSource());
+   * });
+   * ```
+   */
+  getSource() {
     return this._image.source;
   }
+  /**
+   * Get the source type of the image
+   * @returns {ImageSourceType} The source type of the image
+   * @example
+   * ```ts
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const images = fWorksheet.getImages();
+   * images.forEach((image) => {
+   *   console.log(image, image.toBuilder().getSourceType());
+   * });
+   * ```
+   */
   getSourceType() {
     return this._image.imageSourceType;
   }
   /**
-   * Set the position of the image
-   * @param column  The sheet start column of the image
-   * @returns The builder.  {@link FOverGridImageBuilder}
+   * Set the horizontal position of the image
+   * @param {number} column - The column index of the image start position
+   * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
    * @example
    * ```ts
-   * // create a new image builder.
-   * const activeSpreadsheet = univerAPI.getActiveWorkbook();
-   * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const imageBuilder = activeSheet.newOverGridImage();
-   * const param = await imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).buildAsync();
-   * activeSheet.insertImages([param]);
+   * // create a new image builder and set image source.
+   * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell.
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = await fWorksheet.newOverGridImage()
+   *   .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
+   *   .setColumn(5)
+   *   .setRow(5)
+   *   .buildAsync();
+   * fWorksheet.insertImages([image]);
    * ```
    */
-  setColumn(r) {
-    return this._image.column = r, this;
+  setColumn(e) {
+    return this._image.column = e, this;
   }
   /**
-   * Set the position of the image
-   * @param row The sheet start row of the image
-   * @returns The builder.  {@link FOverGridImageBuilder}
+   * Set the vertical position of the image
+   * @param {number} row - The row index of the image start position
+   * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
    * @example
    * ```ts
-   * // create a new image builder.
-   * const activeSpreadsheet = univerAPI.getActiveWorkbook();
-   * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const imageBuilder = activeSheet.newOverGridImage();
-   * const param = await imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).buildAsync();
-   * activeSheet.insertImages([param]);
+   * // create a new image builder and set image source.
+   * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell.
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = await fWorksheet.newOverGridImage()
+   *   .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
+   *   .setColumn(5)
+   *   .setRow(5)
+   *   .buildAsync();
+   * fWorksheet.insertImages([image]);
    * ```
    */
-  setRow(r) {
-    return this._image.row = r, this;
+  setRow(e) {
+    return this._image.row = e, this;
   }
   /**
-   * Set the column offset of the image in a unit
-   * @param offset The offset in pixels
-   * @returns The builder.  {@link FOverGridImageBuilder}
+   * Set the horizontal offset of the image
+   * @param {number} offset - The column offset of the image start position, pixel unit
+   * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
    * @example
    * ```ts
-   * // create a new image builder.
-   * const activeSpreadsheet = univerAPI.getActiveWorkbook();
-   * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const imageBuilder = activeSheet.newOverGridImage();
-   * const param = await imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).setColumnOffset(10).setRowOffset(10).buildAsync();
-   * activeSheet.insertImages([param]);
+   * // create a new image builder and set image source.
+   * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell and horizontal offset is 10px.
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = await fWorksheet.newOverGridImage()
+   *   .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
+   *   .setColumn(5)
+   *   .setRow(5)
+   *   .setColumnOffset(10)
+   *   .buildAsync();
+   * fWorksheet.insertImages([image]);
    * ```
    */
-  setColumnOffset(r) {
-    return this._image.columnOffset = r, this;
+  setColumnOffset(e) {
+    return this._image.columnOffset = e, this;
   }
   /**
-   * Set the row offset of the image in a unit
-   * @param offset The offset in pixels
-   * @returns The builder.  {@link FOverGridImageBuilder}
+   * Set the vertical offset of the image
+   * @param {number} offset - The row offset of the image start position, pixel unit
+   * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
    * @example
    * ```ts
-   * // create a new image builder.
-   * const activeSpreadsheet = univerAPI.getActiveWorkbook();
-   * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const imageBuilder = activeSheet.newOverGridImage();
-   * const param = await imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).setColumnOffset(10).setRowOffset(10).buildAsync();
-   * activeSheet.insertImages([param]);
+   * // create a new image builder and set image source.
+   * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell and vertical offset is 10px.
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = await fWorksheet.newOverGridImage()
+   *   .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
+   *   .setColumn(5)
+   *   .setRow(5)
+   *   .setRowOffset(10)
+   *   .buildAsync();
+   * fWorksheet.insertImages([image]);
    * ```
    */
-  setRowOffset(r) {
-    return this._image.rowOffset = r, this;
+  setRowOffset(e) {
+    return this._image.rowOffset = e, this;
   }
   /**
-   * set the width of the image
-   * @param width The width of the image, in pixels
-   * @returns The builder.  {@link FOverGridImageBuilder}
+   * Set the width of the image
+   * @param {number} width - The width of the image, pixel unit
+   * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
    * @example
    * ```ts
-   * // create a new image builder.
-   * const activeSpreadsheet = univerAPI.getActiveWorkbook();
-   * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const imageBuilder = activeSheet.newOverGridImage();
-   * const param = await imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).setWidth(120).setHeight(50).buildAsync();
-   * activeSheet.insertImages([param]);
+   * // create a new image builder and set image source.
+   * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, width is 120px and height is 50px.
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = await fWorksheet.newOverGridImage()
+   *   .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
+   *   .setColumn(5)
+   *   .setRow(5)
+   *   .setWidth(120)
+   *   .setHeight(50)
+   *   .buildAsync();
+   * fWorksheet.insertImages([image]);
    * ```
    */
-  setWidth(r) {
-    return this._image.width = r, this;
+  setWidth(e) {
+    return this._image.width = e, this;
   }
   /**
    * Set the height of the image
-   * @param height The height of the image, in pixels
-   * @returns The builder.  {@link FOverGridImageBuilder}
+   * @param {number} height - The height of the image, pixel unit
+   * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
    * @example
    * ```ts
-   * // create a new image builder.
-   * const activeSpreadsheet = univerAPI.getActiveWorkbook();
-   * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const imageBuilder = activeSheet.newOverGridImage();
-   * const param = await imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).setWidth(120).setHeight(50).buildAsync();
-   * activeSheet.insertImages([param]);
+   * // create a new image builder and set image source.
+   * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, width is 120px and height is 50px.
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = await fWorksheet.newOverGridImage()
+   *   .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
+   *   .setColumn(5)
+   *   .setRow(5)
+   *   .setWidth(120)
+   *   .setHeight(50)
+   *   .buildAsync();
+   * fWorksheet.insertImages([image]);
    * ```
    */
-  setHeight(r) {
-    return this._image.height = r, this;
+  setHeight(e) {
+    return this._image.height = e, this;
   }
   /**
    * Set the anchor type of the image, whether the position and size change with the cell
-   * @param anchorType The anchor type {@link SheetDrawingAnchorType}
-   * @returns The builder.  {@link FOverGridImageBuilder}
+   * @param {SheetDrawingAnchorType} anchorType - The anchor type of the image
+   * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
    * @example
    * ```ts
-   * // create a new image builder.
-   * const activeSpreadsheet = univerAPI.getActiveWorkbook();
-   * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const imageBuilder = activeSheet.newOverGridImage();
-   * const param = await imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).setAnchorType(univerAPI.Enum.SheetDrawingAnchorType.None).buildAsync();
-   * activeSheet.insertImages([param]);
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   *
+   * // image1 position is start from A6 cell, anchor type is Position.
+   * // Only the position of the drawing follows the cell changes. When rows or columns are inserted or deleted, the position of the drawing changes, but the size remains the same.
+   * const image1 = await fWorksheet.newOverGridImage()
+   *   .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
+   *   .setColumn(0)
+   *   .setRow(5)
+   *   .setAnchorType(univerAPI.Enum.SheetDrawingAnchorType.Position)
+   *   .buildAsync();
+   *
+   * // image2 position is start from C6 cell, anchor type is Both.
+   * // The size and position of the drawing follow the cell changes. When rows or columns are inserted or deleted, the size and position of the drawing change accordingly.
+   * const image2 = await fWorksheet.newOverGridImage()
+   *   .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
+   *   .setColumn(2)
+   *   .setRow(5)
+   *   .setAnchorType(univerAPI.Enum.SheetDrawingAnchorType.Both)
+   *   .buildAsync();
+   *
+   * // image3 position is start from E6 cell, anchor type is None.
+   * // The size and position of the drawing do not follow the cell changes. When rows or columns are inserted or deleted, the position and size of the drawing remain unchanged.
+   * const image3 = await fWorksheet.newOverGridImage()
+   *   .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
+   *   .setColumn(4)
+   *   .setRow(5)
+   *   .setAnchorType(univerAPI.Enum.SheetDrawingAnchorType.None)
+   *   .buildAsync();
+   *
+   * // insert images into the sheet
+   * fWorksheet.insertImages([image1, image2, image3]);
+   *
+   * // after 2 seconds, set the row height of the 5th row to 100px and insert a row before the 5th row.
+   * // then observe the position and size changes of the images.
+   * setTimeout(() => {
+   *   fWorksheet.setRowHeight(5, 100).insertRowBefore(5);
+   * }, 2000);
    * ```
    */
-  setAnchorType(r) {
-    return this._image.anchorType = r, this;
+  setAnchorType(e) {
+    return this._image.anchorType = e, this;
   }
   /**
    * Set the cropping region of the image by defining the top edges, thereby displaying the specific part of the image you want.
-   * @param top  The number of pixels to crop from the top of the image.
-   * @returns The builder.  {@link FOverGridImageBuilder}
+   * @param {number} top - The number of pixels to crop from the top of the image
+   * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
    * @example
    * ```ts
-   * // create a new image builder.
-   * const activeSpreadsheet = univerAPI.getActiveWorkbook();
-   * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const imageBuilder = activeSheet.newOverGridImage();
-   * const param = await imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).setCropTop(10).setCropLeft(10).setCropBottom(10).setCropRight(10).buildAsync();
-   * activeSheet.insertImages([param]);
+   * // create a new image builder and set image source.
+   * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, top crop is 10px.
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = await fWorksheet.newOverGridImage()
+   *   .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
+   *   .setColumn(5)
+   *   .setRow(5)
+   *   .setCropTop(10)
+   *   .buildAsync();
+   * fWorksheet.insertImages([image]);
    * ```
    */
-  setCropTop(r) {
-    return this._initializeSrcRect(), this._image.srcRect.top = r, this;
+  setCropTop(e) {
+    return this._initializeSrcRect(), this._image.srcRect.top = e, this;
   }
   /**
    * Set the cropping region of the image by defining the left edges, thereby displaying the specific part of the image you want.
-   * @param left  The number of pixels to crop from the left side of the image.
-   * @returns The builder.  {@link FOverGridImageBuilder}
+   * @param {number} left - The number of pixels to crop from the left side of the image
+   * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
    * @example
    * ```ts
-   * // create a new image builder.
-   * const activeSpreadsheet = univerAPI.getActiveWorkbook();
-   * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const imageBuilder = activeSheet.newOverGridImage();
-   * const param = await imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).setCropTop(10).setCropLeft(10).setCropBottom(10).setCropRight(10).buildAsync();
-   * activeSheet.insertImages([param]);
+   * // create a new image builder and set image source.
+   * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, left crop is 10px.
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = await fWorksheet.newOverGridImage()
+   *   .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
+   *   .setColumn(5)
+   *   .setRow(5)
+   *   .setCropLeft(10)
+   *   .buildAsync();
+   * fWorksheet.insertImages([image]);
    * ```
    */
-  setCropLeft(r) {
-    return this._initializeSrcRect(), this._image.srcRect.left = r, this;
+  setCropLeft(e) {
+    return this._initializeSrcRect(), this._image.srcRect.left = e, this;
   }
   /**
    * Set the cropping region of the image by defining the bottom edges, thereby displaying the specific part of the image you want.
-   * @param bottom  The number of pixels to crop from the bottom of the image.
-   * @returns The builder.  {@link FOverGridImageBuilder}
+   * @param {number} bottom - The number of pixels to crop from the bottom of the image
+   * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
    * @example
    * ```ts
-   * // create a new image builder.
-   * const activeSpreadsheet = univerAPI.getActiveWorkbook();
-   * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const imageBuilder = activeSheet.newOverGridImage();
-   * const param = await imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).setCropTop(10).setCropLeft(10).setCropBottom(10).setCropRight(10).buildAsync();
-   * activeSheet.insertImages([param]);
+   * // create a new image builder and set image source.
+   * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, bottom crop is 10px.
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = await fWorksheet.newOverGridImage()
+   *   .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
+   *   .setColumn(5)
+   *   .setRow(5)
+   *   .setCropBottom(10)
+   *   .buildAsync();
+   * fWorksheet.insertImages([image]);
    * ```
    */
-  setCropBottom(r) {
-    return this._initializeSrcRect(), this._image.srcRect.bottom = r, this;
+  setCropBottom(e) {
+    return this._initializeSrcRect(), this._image.srcRect.bottom = e, this;
   }
   /**
    * Set the cropping region of the image by defining the right edges, thereby displaying the specific part of the image you want.
-   * @param right  The number of pixels to crop from the right side of the image.
-   * @returns The builder.  {@link FOverGridImageBuilder}
+   * @param {number} right - The number of pixels to crop from the right side of the image
+   * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
    * @example
    * ```ts
-   * // create a new image builder.
-   * const activeSpreadsheet = univerAPI.getActiveWorkbook();
-   * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const imageBuilder = activeSheet.newOverGridImage();
-   * const param = await imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).setCropTop(10).setCropLeft(10).setCropBottom(10).setCropRight(10).buildAsync();
-   * activeSheet.insertImages([param]);
+   * // create a new image builder and set image source.
+   * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, right crop is 10px.
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = await fWorksheet.newOverGridImage()
+   *   .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
+   *   .setColumn(5)
+   *   .setRow(5)
+   *   .setCropRight(10)
+   *   .buildAsync();
+   * fWorksheet.insertImages([image]);
    * ```
    */
-  setCropRight(r) {
-    return this._initializeSrcRect(), this._image.srcRect.right = r, this;
+  setCropRight(e) {
+    return this._initializeSrcRect(), this._image.srcRect.right = e, this;
   }
   _initializeSrcRect() {
     this._image.srcRect == null && (this._image.srcRect = {
@@ -334,172 +446,198 @@ let p = class {
   }
   /**
    * Set the rotation angle of the image
-   * @param angle Degree of rotation of the image, for example, 90, 180, 270, etc.
-   * @returns The builder {@link FOverGridImageBuilder}
+   * @param {number} angle - Degree of rotation of the image, for example, 90, 180, 270, etc.
+   * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
    * @example
    * ```ts
-   * // create a new image builder.
-   * const activeSpreadsheet = univerAPI.getActiveWorkbook();
-   * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const imageBuilder = activeSheet.newOverGridImage();
-   * const param = await imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).setRotate(90).buildAsync();
-   * activeSheet.insertImages([param]);
+   * // create a new image builder and set image source.
+   * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, rotate 90 degrees.
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = await fWorksheet.newOverGridImage()
+   *   .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
+   *   .setColumn(5)
+   *   .setRow(5)
+   *   .setRotate(90)
+   *   .buildAsync();
+   * fWorksheet.insertImages([image]);
    * ```
    */
-  setRotate(r) {
-    return this._image.angle = r, this;
+  setRotate(e) {
+    return this._image.angle = e, this;
   }
-  // setPresetGeometry(prstGeom: PresetGeometryType): FOverGridImageBuilder {
-  //     this._image.prstGeom = prstGeom;
-  //     return this;
-  // }
-  setUnitId(r) {
-    return this._image.unitId = r, this;
+  setUnitId(e) {
+    return this._image.unitId = e, this;
   }
-  setSubUnitId(r) {
-    return this._image.subUnitId = r, this;
+  setSubUnitId(e) {
+    return this._image.subUnitId = e, this;
   }
   async buildAsync() {
-    const t = this._injector.get(F).getRenderById(this._image.unitId);
-    if (!t)
+    const r = this._injector.get(A).getRenderById(this._image.unitId);
+    if (!r)
       throw new Error(`Render Unit with unitId ${this._image.unitId} not found`);
-    const e = t.with(J), i = t.with(U);
+    const t = r.with(q), i = r.with(F);
     if (this._image.width === 0 || this._image.height === 0) {
-      const n = await q(this._image.source), s = n.width, o = n.height;
+      const n = await V(this._image.source), s = n.width, o = n.height;
       this._image.width === 0 && (this._image.width = s), this._image.height === 0 && (this._image.height = o);
     }
-    return ne(this._image, e, i);
+    return re(this._image, t, i);
   }
 };
-p = $([
-  G(2, P(j))
-], p);
-let m = class extends V {
-  constructor(r, t, e) {
-    super(), this._image = r, this._commandService = t, this._injector = e;
+b = N([
+  B(2, U(P))
+], b);
+let m = class extends Y {
+  constructor(e, r, t) {
+    super(), this._image = e, this._commandService = r, this._injector = t;
   }
+  /**
+   * Get the id of the image
+   * @returns {string} The id of the image
+   * @example
+   * ```ts
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const images = fWorksheet.getImages();
+   * images.forEach((image) => {
+   *   console.log(image, image.getId());
+   * });
+   * ```
+   */
   getId() {
     return this._image.drawingId;
   }
+  /**
+   * Get the drawing type of the image
+   * @returns {DrawingTypeEnum} The drawing type of the image
+   * @example
+   * ```ts
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const images = fWorksheet.getImages();
+   * images.forEach((image) => {
+   *   console.log(image, image.getType());
+   * });
+   * ```
+   */
   getType() {
     return this._image.drawingType;
   }
   /**
    * Remove the image from the sheet
-   * @returns success or not
+   * @returns {boolean} true if the image is removed successfully, otherwise false
    * @example
    * ```ts
-   * // remove the image from the sheet
-   * const activeSpreadsheet = univerAPI.getActiveWorkbook();
-   * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const image = activeSheet.getImages()[0];
-   * console.log('Delete state is ', image?.remove());
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = fWorksheet.getImages()[0];
+   * const result = image?.remove();
+   * console.log(result);
    * ```
    */
   remove() {
-    return this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [this._image] });
+    return this._commandService.syncExecuteCommand(S.id, { unitId: this._image.unitId, drawings: [this._image] });
   }
   /**
    * Convert the image to a FOverGridImageBuilder
-   * @returns The builder FOverGridImageBuilder
+   * @returns {FOverGridImageBuilder} The builder FOverGridImageBuilder
    * @example
    * ```ts
-   * // convert the image to a builder
-   * const activeSpreadsheet = univerAPI.getActiveWorkbook();
-   * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const image = activeSheet.getImages()[0];
-   * const builder = image.toBuilder();
-   * const param = await builder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).buildAsync();
-   * activeSheet.updateImages([param]);
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const images = fWorksheet.getImages();
+   * images.forEach((image) => {
+   *   console.log(image, image.toBuilder().getSource());
+   * });
    * ```
    */
   toBuilder() {
-    const r = this._injector.createInstance(p);
-    return r.setImage(this._image), r;
+    const e = this._injector.createInstance(b);
+    return e.setImage(this._image), e;
   }
-  setSource(r, t) {
-    const e = t != null ? t : I.URL;
-    return this._image.source = r, this._image.imageSourceType = e, this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [this._image] });
+  setSource(e, r) {
+    const t = r != null ? r : f.URL;
+    return this._image.source = e, this._image.imageSourceType = t, this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [this._image] });
   }
-  async setPositionAsync(r, t, e, i) {
+  async setPositionAsync(e, r, t, i) {
     const n = this.toBuilder();
-    n.setColumn(t), n.setRow(r), e != null && n.setRowOffset(e), i != null && n.setColumnOffset(i);
+    n.setColumn(r), n.setRow(e), t != null && n.setRowOffset(t), i != null && n.setColumnOffset(i);
     const s = await n.buildAsync();
     return this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [s] });
   }
   /**
    * Set the size of the image
-   * @param width  The width of the image
-   * @param height  The height of the image
-   * @returns success or not
+   * @param {number} width - The width of the image, pixel unit
+   * @param {number} height - The height of the image, pixel unit
+   * @returns {boolean} true if the size is set successfully, otherwise false
    * @example
    * ```ts
-   * // set the size of the image
-   * const activeSpreadsheet = univerAPI.getActiveWorkbook();
-   * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const image = activeSheet.getImages()[0];
-   * console.log('Set size state is ', image.setSize(50, 120));
+   * // set the image width 120px and height 50px
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = fWorksheet.getImages()[0];
+   * const result = image?.setSizeAsync(120, 50);
+   * console.log(result);
+   * ```
    */
-  async setSizeAsync(r, t) {
-    const e = this.toBuilder();
-    e.setWidth(r), e.setHeight(t);
-    const i = await e.buildAsync();
+  async setSizeAsync(e, r) {
+    const t = this.toBuilder();
+    t.setWidth(e), t.setHeight(r);
+    const i = await t.buildAsync();
     return this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [i] });
   }
   /**
    * Set the cropping region of the image by defining the top, bottom, left, and right edges, thereby displaying the specific part of the image you want.
-   * @param top  The number of pixels to crop from the top of the image.
-   * @param left  The number of pixels to crop from the left side of the image.
-   * @param bottom  The number of pixels to crop from the bottom of the image.
-   * @param right  The number of pixels to crop from the right side of the image.
-   * @returns success or not
+   * @param {number} top - The number of pixels to crop from the top of the image
+   * @param {number} left - The number of pixels to crop from the left side of the image
+   * @param {number} bottom - The number of pixels to crop from the bottom of the image
+   * @param {number} right - The number of pixels to crop from the right side of the image
+   * @returns {boolean} true if the crop is set successfully, otherwise false
    * @example
    * ```ts
-   * // set the crop of the image
-   * const activeSpreadsheet = univerAPI.getActiveWorkbook();
-   * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const image = activeSheet.getImages()[0];
-   * console.log('Set crop state is ', image.setCrop(10, 10, 10, 10));
+   * // set the crop of the image, top 10px, left 10px, bottom 10px, right 10px.
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = fWorksheet.getImages()[0];
+   * const result = image?.setCrop(10, 10, 10, 10);
+   * console.log(result);
    * ```
    */
-  setCrop(r, t, e, i) {
+  setCrop(e, r, t, i) {
     return this._image.srcRect == null && (this._image.srcRect = {
       top: 0,
       left: 0,
       bottom: 0,
       right: 0
-    }), r != null && (this._image.srcRect.top = r), t != null && (this._image.srcRect.left = t), e != null && (this._image.srcRect.bottom = e), i != null && (this._image.srcRect.right = i), this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [this._image] });
+    }), e != null && (this._image.srcRect.top = e), r != null && (this._image.srcRect.left = r), t != null && (this._image.srcRect.bottom = t), i != null && (this._image.srcRect.right = i), this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [this._image] });
   }
-  // setPresetGeometry(prstGeom: PresetGeometryType): boolean {
-  //     this._image.prstGeom = prstGeom;
-  //     return this._commandService.syncExecuteCommand(SetSheetDrawingCommand.id, { unitId: this._image.unitId, drawings: [this._image] });
-  // }
   /**
    * Set the rotation angle of the image
-   * @param angle Degree of rotation of the image, for example, 90, 180, 270, etc.
-   * @returns success or not
+   * @param {number} angle - Degree of rotation of the image, for example, 90, 180, 270, etc.
+   * @returns {boolean} true if the rotation is set successfully, otherwise false
    * @example
    * ```ts
-   * // set the rotation angle of the image
-   * const activeSpreadsheet = univerAPI.getActiveWorkbook();
-   * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const image = activeSheet.getImages()[0];
-   * console.log('Set rotate state is ', image.setRotate(90));
+   * // set 90 degrees rotation of the image
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = fWorksheet.getImages()[0];
+   * const result = image?.setRotate(90);
+   * console.log(result);
    * ```
    */
-  setRotate(r) {
-    return this._image.sheetTransform.angle = r, this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [this._image] });
+  setRotate(e) {
+    return this._image.sheetTransform.angle = e, this._image.transform && (this._image.transform.angle = e), this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [this._image] });
   }
   /**
    * Move the image layer forward by one level
-   * @returns success or not
+   * @returns {boolean} true if the image is moved forward successfully, otherwise false
    * @example
    * ```ts
-   * // move the image forward
-   * const activeSpreadsheet = univerAPI.getActiveWorkbook();
-   * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const image = activeSheet.getImages()[0];
-   * console.log('Move forward state is ', image.setForward());
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = fWorksheet.getImages()[0];
+   * const result = image?.setForward();
+   * console.log(result);
    * ```
    */
   setForward() {
@@ -515,11 +653,11 @@ let m = class extends V {
    * @returns success or not
    * @example
    * ```ts
-   * // move the image backward
-   * const activeSpreadsheet = univerAPI.getActiveWorkbook();
-   * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const image = activeSheet.getImages()[0];
-   * console.log('Move backward state is ', image.setBackward());
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = fWorksheet.getImages()[0];
+   * const result = image?.setBackward();
+   * console.log(result);
    * ```
    */
   setBackward() {
@@ -531,15 +669,15 @@ let m = class extends V {
     });
   }
   /**
-   * Move the image layer to the back
+   * Move the image layer to the bottom layer
    * @returns success or not
    * @example
    * ```ts
-   * // move the image to the back
-   * const activeSpreadsheet = univerAPI.getActiveWorkbook();
-   * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const image = activeSheet.getImages()[0];
-   * console.log('Move back state is ', image.setBack());
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = fWorksheet.getImages()[0];
+   * const result = image?.setBack();
+   * console.log(result);
    * ```
    */
   setBack() {
@@ -551,15 +689,15 @@ let m = class extends V {
     });
   }
   /**
-   * Move the image layer to the front
+   * Move the image layer to the top layer
    * @returns success or not
    * @example
    * ```ts
-   * // move the image to the front
-   * const activeSpreadsheet = univerAPI.getActiveWorkbook();
-   * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const image = activeSheet.getImages()[0];
-   * console.log('Move front state is ', image.setFront());
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = fWorksheet.getImages()[0];
+   * const result = image?.setFront();
+   * console.log(result);
    * ```
    */
   setFront() {
@@ -571,13 +709,13 @@ let m = class extends V {
     });
   }
 };
-m = $([
-  G(1, W),
-  G(2, P(j))
+m = N([
+  B(1, j),
+  B(2, U(P))
 ], m);
-class se extends N {
-  addFloatDomToPosition(t, e) {
-    const i = this._workbook.getUnitId(), n = this._worksheet.getSheetId(), { key: s, disposableCollection: o } = y(t, this._injector.get(D)), a = this._injector.get(C).addFloatDomToPosition({ ...t, componentKey: s, unitId: i, subUnitId: n }, e);
+class ie extends z {
+  addFloatDomToPosition(r, t) {
+    const i = this._workbook.getUnitId(), n = this._worksheet.getSheetId(), { key: s, disposableCollection: o } = R(r, this._injector.get(G)), a = this._injector.get(D).addFloatDomToPosition({ ...r, componentKey: s, unitId: i, subUnitId: n }, t);
     return a ? (o.add(a.dispose), {
       id: a.id,
       dispose: () => {
@@ -585,8 +723,8 @@ class se extends N {
       }
     }) : (o.dispose(), null);
   }
-  addFloatDomToRange(t, e, i, n) {
-    const s = this._workbook.getUnitId(), o = this._worksheet.getSheetId(), { key: d, disposableCollection: a } = y(e, this._injector.get(D)), c = this._injector.get(C).addFloatDomToRange(t.getRange(), { ...e, componentKey: d, unitId: s, subUnitId: o }, i, n);
+  addFloatDomToRange(r, t, i, n) {
+    const s = this._workbook.getUnitId(), o = this._worksheet.getSheetId(), { key: d, disposableCollection: a } = R(t, this._injector.get(G)), c = this._injector.get(D).addFloatDomToRange(r.getRange(), { ...t, componentKey: d, unitId: s, subUnitId: o }, i, n);
     return c ? (a.add(c.dispose), {
       id: c.id,
       dispose: () => {
@@ -594,8 +732,8 @@ class se extends N {
       }
     }) : (a.dispose(), null);
   }
-  addFloatDomToColumnHeader(t, e, i, n) {
-    const s = this._workbook.getUnitId(), o = this._worksheet.getSheetId(), { key: d, disposableCollection: a } = y(e, this._injector.get(D)), c = this._injector.get(C).addFloatDomToColumnHeader(t, { ...e, componentKey: d, unitId: s, subUnitId: o }, i, n);
+  addFloatDomToColumnHeader(r, t, i, n) {
+    const s = this._workbook.getUnitId(), o = this._worksheet.getSheetId(), { key: d, disposableCollection: a } = R(t, this._injector.get(G)), c = this._injector.get(D).addFloatDomToColumnHeader(r, { ...t, componentKey: d, unitId: s, subUnitId: o }, i, n);
     return c ? (a.add(c.dispose), {
       id: c.id,
       dispose: () => {
@@ -603,100 +741,100 @@ class se extends N {
       }
     }) : (a.dispose(), null);
   }
-  async insertImage(t, e, i, n, s) {
+  async insertImage(r, t, i, n, s) {
     const o = this.newOverGridImage();
-    if (typeof t == "string")
-      o.setSource(t);
+    if (typeof r == "string")
+      o.setSource(r);
     else {
-      const g = await t.getBlob().getDataAsString();
-      o.setSource(g, I.BASE64);
+      const g = await r.getBlob().getDataAsString();
+      o.setSource(g, f.BASE64);
     }
-    e !== void 0 ? o.setColumn(e) : o.setColumn(0), i !== void 0 ? o.setRow(i) : o.setRow(0), n !== void 0 ? o.setColumnOffset(n) : o.setColumnOffset(0), s !== void 0 ? o.setRowOffset(s) : o.setRowOffset(0);
+    t !== void 0 ? o.setColumn(t) : o.setColumn(0), i !== void 0 ? o.setRow(i) : o.setRow(0), n !== void 0 ? o.setColumnOffset(n) : o.setColumnOffset(0), s !== void 0 ? o.setRowOffset(s) : o.setRowOffset(0);
     const d = await o.buildAsync();
-    return this._commandService.syncExecuteCommand(S.id, { unitId: this._fWorkbook.getId(), drawings: [d] });
+    return this._commandService.syncExecuteCommand(p.id, { unitId: this._fWorkbook.getId(), drawings: [d] });
   }
-  insertImages(t) {
-    const e = t.map((i) => (i.unitId = this._fWorkbook.getId(), i.subUnitId = this.getSheetId(), i));
-    return this._commandService.syncExecuteCommand(S.id, { unitId: this._fWorkbook.getId(), drawings: e }), this;
+  insertImages(r) {
+    const t = r.map((i) => (i.unitId = this._fWorkbook.getId(), i.subUnitId = this.getSheetId(), i));
+    return this._commandService.syncExecuteCommand(p.id, { unitId: this._fWorkbook.getId(), drawings: t }), this;
   }
-  deleteImages(t) {
-    const e = t.map((i) => ({
+  deleteImages(r) {
+    const t = r.map((i) => ({
       unitId: this._fWorkbook.getId(),
       drawingId: i.getId(),
       subUnitId: this.getSheetId(),
       drawingType: i.getType()
     }));
-    return this._commandService.syncExecuteCommand(R.id, { unitId: this._fWorkbook.getId(), drawings: e }), this;
+    return this._commandService.syncExecuteCommand(S.id, { unitId: this._fWorkbook.getId(), drawings: t }), this;
   }
   getImages() {
-    const e = this._injector.get(l).getDrawingData(this._fWorkbook.getId(), this.getSheetId()), i = [];
-    for (const n in e) {
-      const s = e[n];
+    const t = this._injector.get(l).getDrawingData(this._fWorkbook.getId(), this.getSheetId()), i = [];
+    for (const n in t) {
+      const s = t[n];
       s.drawingType === _.DRAWING_IMAGE && i.push(this._injector.createInstance(m, s));
     }
     return i;
   }
-  getImageById(t) {
-    const i = this._injector.get(l).getDrawingByParam({ unitId: this._fWorkbook.getId(), subUnitId: this.getSheetId(), drawingId: t });
+  getImageById(r) {
+    const i = this._injector.get(l).getDrawingByParam({ unitId: this._fWorkbook.getId(), subUnitId: this.getSheetId(), drawingId: r });
     return i && i.drawingType === _.DRAWING_IMAGE ? this._injector.createInstance(m, i) : null;
   }
   getActiveImages() {
-    const e = this._injector.get(l).getFocusDrawings(), i = [];
-    for (const n in e) {
-      const s = e[n];
+    const t = this._injector.get(l).getFocusDrawings(), i = [];
+    for (const n in t) {
+      const s = t[n];
       i.push(this._injector.createInstance(m, s));
     }
     return i;
   }
-  updateImages(t) {
-    return this._commandService.syncExecuteCommand(h.id, { unitId: this._fWorkbook.getId(), drawings: t }), this;
+  updateImages(r) {
+    return this._commandService.syncExecuteCommand(h.id, { unitId: this._fWorkbook.getId(), drawings: r }), this;
   }
-  onImageInserted(t) {
-    const e = this._injector.get(l);
-    return k(e.add$.subscribe((i) => {
+  onImageInserted(r) {
+    const t = this._injector.get(l);
+    return y(t.add$.subscribe((i) => {
       const n = i.map(
-        (s) => this._injector.createInstance(m, e.getDrawingByParam(s))
+        (s) => this._injector.createInstance(m, t.getDrawingByParam(s))
       );
-      t(n);
+      r(n);
     }));
   }
-  onImageDeleted(t) {
-    const e = this._injector.get(l);
-    return k(e.remove$.subscribe((i) => {
+  onImageDeleted(r) {
+    const t = this._injector.get(l);
+    return y(t.remove$.subscribe((i) => {
       const n = i.map(
-        (s) => this._injector.createInstance(m, e.getDrawingByParam(s))
+        (s) => this._injector.createInstance(m, t.getDrawingByParam(s))
       );
-      t(n);
+      r(n);
     }));
   }
-  onImageChanged(t) {
-    const e = this._injector.get(l);
-    return k(e.update$.subscribe((i) => {
+  onImageChanged(r) {
+    const t = this._injector.get(l);
+    return y(t.update$.subscribe((i) => {
       const n = i.map(
-        (s) => this._injector.createInstance(m, e.getDrawingByParam(s))
+        (s) => this._injector.createInstance(m, t.getDrawingByParam(s))
       );
-      t(n);
+      r(n);
     }));
   }
   newOverGridImage() {
-    const t = this._fWorkbook.getId(), e = this.getSheetId();
-    return this._injector.createInstance(p, t, e);
+    const r = this._fWorkbook.getId(), t = this.getSheetId();
+    return this._injector.createInstance(b, r, t);
   }
 }
-N.extend(se);
-class oe extends M {
+z.extend(ie);
+class ne extends W {
   get DrawingType() {
     return _;
   }
   get ImageSourceType() {
-    return I;
+    return f;
   }
   get SheetDrawingAnchorType() {
-    return ee;
+    return Z;
   }
 }
-M.extend(oe);
-class ae extends H {
+W.extend(ne);
+class se extends M {
   get BeforeOverGridImageChange() {
     return "BeforeOverGridImageChange";
   }
@@ -722,18 +860,18 @@ class ae extends H {
     return "OverGridImageSelected";
   }
 }
-H.extend(ae);
-class de extends z {
+M.extend(se);
+class oe extends H {
   /**
    * @ignore
    */
   // eslint-disable-next-line max-lines-per-function
-  _initialize(t) {
-    const e = t.get(W);
+  _initialize(r) {
+    const t = r.get(j);
     this.registerEventHandler(
       this.Event.BeforeOverGridImageInsert,
-      () => e.beforeCommandExecuted((i) => {
-        if (i.id !== S.id) return;
+      () => t.beforeCommandExecuted((i) => {
+        if (i.id !== p.id) return;
         const n = i.params, s = this.getActiveWorkbook();
         if (s == null || n == null)
           return;
@@ -746,12 +884,12 @@ class de extends z {
       })
     ), this.registerEventHandler(
       this.Event.BeforeOverGridImageRemove,
-      () => e.beforeCommandExecuted((i) => {
-        if (i.id !== R.id) return;
+      () => t.beforeCommandExecuted((i) => {
+        if (i.id !== S.id) return;
         const n = i.params, s = this.getActiveWorkbook();
         if (s == null || n == null)
           return;
-        const o = t.get(f), { drawings: d } = n, a = d.map((c) => o.getDrawingByParam(c)), g = {
+        const o = r.get(I), { drawings: d } = n, a = d.map((c) => o.getDrawingByParam(c)), g = {
           workbook: s,
           images: this._createFOverGridImage(a)
         };
@@ -760,12 +898,12 @@ class de extends z {
       })
     ), this.registerEventHandler(
       this.Event.BeforeOverGridImageChange,
-      () => e.beforeCommandExecuted((i) => {
+      () => t.beforeCommandExecuted((i) => {
         if (i.id !== h.id) return;
         const n = i.params, s = this.getActiveWorkbook();
         if (s == null || n == null)
           return;
-        const { drawings: o } = n, d = t.get(f), a = [];
+        const { drawings: o } = n, d = r.get(I), a = [];
         o.forEach((c) => {
           const u = d.getDrawingByParam(c);
           u != null && a.push({
@@ -782,12 +920,12 @@ class de extends z {
       })
     ), this.registerEventHandler(
       this.Event.BeforeOverGridImageSelect,
-      () => e.beforeCommandExecuted((i) => {
-        if (i.id !== A.id) return;
+      () => t.beforeCommandExecuted((i) => {
+        if (i.id !== x.id) return;
         const n = i.params, s = this.getActiveWorkbook();
         if (s == null)
           return;
-        const o = t.get(f), d = o.getFocusDrawings(), a = n.map((c) => o.getDrawingByParam(c)), g = {
+        const o = r.get(I), d = o.getFocusDrawings(), a = n.map((c) => o.getDrawingByParam(c)), g = {
           workbook: s,
           selectedImages: this._createFOverGridImage(a),
           oldSelectedImages: this._createFOverGridImage(d)
@@ -797,8 +935,8 @@ class de extends z {
       })
     ), this.registerEventHandler(
       this.Event.OverGridImageInserted,
-      () => e.onCommandExecuted((i) => {
-        if (i.id !== S.id) return;
+      () => t.onCommandExecuted((i) => {
+        if (i.id !== p.id) return;
         const n = i.params, s = this.getActiveWorkbook();
         if (s == null || n == null)
           return;
@@ -810,8 +948,8 @@ class de extends z {
       })
     ), this.registerEventHandler(
       this.Event.OverGridImageRemoved,
-      () => e.onCommandExecuted((i) => {
-        if (i.id !== R.id) return;
+      () => t.onCommandExecuted((i) => {
+        if (i.id !== S.id) return;
         const n = i.params, s = this.getActiveWorkbook();
         if (s == null || n == null)
           return;
@@ -823,12 +961,12 @@ class de extends z {
       })
     ), this.registerEventHandler(
       this.Event.OverGridImageChanged,
-      () => e.onCommandExecuted((i) => {
+      () => t.onCommandExecuted((i) => {
         if (i.id !== h.id) return;
         const n = i.params, s = this.getActiveWorkbook();
         if (s == null || n == null)
           return;
-        const { drawings: o } = n, d = t.get(f), a = o.map((g) => this._injector.createInstance(m, d.getDrawingByParam(g)));
+        const { drawings: o } = n, d = r.get(I), a = o.map((g) => this._injector.createInstance(m, d.getDrawingByParam(g)));
         this.fireEvent(this.Event.OverGridImageChanged, {
           workbook: s,
           images: a
@@ -836,12 +974,12 @@ class de extends z {
       })
     ), this.registerEventHandler(
       this.Event.OverGridImageSelected,
-      () => e.onCommandExecuted((i) => {
-        if (i.id !== A.id) return;
+      () => t.onCommandExecuted((i) => {
+        if (i.id !== x.id) return;
         const n = i.params, s = this.getActiveWorkbook();
         if (s == null)
           return;
-        const o = t.get(f), d = n.map((a) => o.getDrawingByParam(a));
+        const o = r.get(I), d = n.map((a) => o.getDrawingByParam(a));
         this.fireEvent(this.Event.OverGridImageSelected, {
           workbook: s,
           selectedImages: this._createFOverGridImage(d)
@@ -849,8 +987,8 @@ class de extends z {
       })
     );
   }
-  _createFOverGridImage(t) {
-    return t.map((e) => this._injector.createInstance(m, e));
+  _createFOverGridImage(r) {
+    return r.map((t) => this._injector.createInstance(m, t));
   }
 }
-z.extend(de);
+H.extend(oe);