@univerjs/sheets-drawing-ui 0.6.7 → 0.6.9-nightly.202504021607

package/lib/facade.js

@@ -0,0 +1,1010 @@
+var L = Object.defineProperty;
+var V = (r, e, t) => e in r ? L(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var U = (r, e, t) => V(r, typeof e != "symbol" ? e + "" : e, t);
+import { Inject as A, Injector as j, ICommandService as P, ImageSourceType as f, ArrangeTypeEnum as v, DrawingTypeEnum as _, generateRandomId as X, toDisposable as y, UniverInstanceType as Y, IUniverInstanceService as q } from "@univerjs/core";
+import { FBase as J, FEnum as W, FEventName as M, FUniver as H } from "@univerjs/core/facade";
+import { getImageSize as Q, IDrawingManagerService as I, SetDrawingSelectedOperation as x } from "@univerjs/drawing";
+import { IRenderManagerService as B, getCurrentTypeOfRenderer as Z } from "@univerjs/engine-render";
+import { RemoveSheetDrawingCommand as S, SetSheetDrawingCommand as h, SetDrawingArrangeCommand as w, SheetCanvasFloatDomManagerService as D, InsertSheetDrawingCommand as p, SheetDrawingUpdateController as ee } from "@univerjs/sheets-drawing-ui";
+import { SheetSkeletonManagerService as F, ISheetSelectionRenderService as te, convertPositionSheetOverGridToAbsolute as re, convertPositionCellToSheetOverGrid as ie } from "@univerjs/sheets-ui";
+import { ISheetDrawingService as l, SheetDrawingAnchorType as ne } from "@univerjs/sheets-drawing";
+import { transformComponentKey as R } from "@univerjs/sheets-ui/facade";
+import { FWorksheet as z, FRange as N } from "@univerjs/sheets/facade";
+import { ComponentManager as G } from "@univerjs/ui";
+var se = Object.getOwnPropertyDescriptor, $ = (r, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? se(e, t) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (n = o(n) || n);
+  return n;
+}, T = (r, e) => (t, i) => e(t, i, r);
+function oe(r, e) {
+  const { from: t, 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: O } = t, k = re(
+    r.unitId,
+    r.subUnitId,
+    { from: t, to: i },
+    e
+  ), { width: E, height: C } = k;
+  return {
+    ...r,
+    column: g,
+    columnOffset: c,
+    row: u,
+    rowOffset: O,
+    width: E,
+    height: C,
+    flipY: n,
+    flipX: s,
+    angle: o,
+    skewX: d,
+    skewY: a
+  };
+}
+function ae(r, e, 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 } = r, E = ie(
+    r.unitId,
+    r.subUnitId,
+    { column: i, columnOffset: n, row: s, rowOffset: o },
+    O,
+    k,
+    e,
+    t
+  ), { sheetTransform: C, transform: K } = E;
+  return {
+    ...r,
+    sheetTransform: {
+      ...C,
+      flipY: d,
+      flipX: a,
+      angle: g,
+      skewX: c,
+      skewY: u
+    },
+    transform: {
+      ...K,
+      flipY: d,
+      flipX: a,
+      angle: g,
+      skewX: c,
+      skewY: u
+    }
+  };
+}
+let b = class {
+  constructor(r, e, t) {
+    U(this, "_image");
+    this._injector = t, this._image = {
+      drawingId: X(6),
+      drawingType: _.DRAWING_IMAGE,
+      imageSourceType: f.BASE64,
+      source: "",
+      unitId: r,
+      subUnitId: e,
+      column: 0,
+      columnOffset: 0,
+      row: 0,
+      rowOffset: 0,
+      width: 0,
+      height: 0
+    };
+  }
+  /**
+   * Set the initial image configuration for the image builder.
+   * @param {ISheetImage} image - The image configuration
+   * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
+   * @example
+   * ```ts
+   * // 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 t = this._injector.get(B).getRenderById(r.unitId);
+    if (!t)
+      throw new Error(`Render Unit with unitId ${r.unitId} not found`);
+    const i = t.with(F);
+    return r.sheetTransform == null && (r.sheetTransform = {
+      from: {
+        column: 0,
+        columnOffset: 0,
+        row: 0,
+        rowOffset: 0
+      },
+      to: {
+        column: 0,
+        columnOffset: 0,
+        row: 0,
+        rowOffset: 0
+      }
+    }), this._image = oe(r, i), this;
+  }
+  setSource(r, e) {
+    const t = e != null ? e : f.URL;
+    return this._image.source = r, this._image.imageSourceType = t, this;
+  }
+  /**
+   * 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 horizontal position of the image
+   * @param {number} column - The column index of the image start position, start at 0
+   * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
+   * @example
+   * ```ts
+   * // 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;
+  }
+  /**
+   * Set the vertical position of the image
+   * @param {number} row - The row index of the image start position, start at 0
+   * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
+   * @example
+   * ```ts
+   * // 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;
+  }
+  /**
+   * 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 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;
+  }
+  /**
+   * 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 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;
+  }
+  /**
+   * 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 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;
+  }
+  /**
+   * Set the height of the image
+   * @param {number} height - The height of the image, pixel unit
+   * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
+   * @example
+   * ```ts
+   * // 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;
+  }
+  /**
+   * Set the anchor type of the image, whether the position and size change with the cell
+   * @param {SheetDrawingAnchorType} anchorType - The anchor type of the image
+   * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
+   * @example
+   * ```ts
+   * 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;
+  }
+  /**
+   * Set the cropping region of the image by defining the top edges, thereby displaying the specific part of the image you want.
+   * @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 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;
+  }
+  /**
+   * Set the cropping region of the image by defining the left edges, thereby displaying the specific part of the image you want.
+   * @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 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;
+  }
+  /**
+   * Set the cropping region of the image by defining the bottom edges, thereby displaying the specific part of the image you want.
+   * @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 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;
+  }
+  /**
+   * Set the cropping region of the image by defining the right edges, thereby displaying the specific part of the image you want.
+   * @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 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;
+  }
+  _initializeSrcRect() {
+    this._image.srcRect == null && (this._image.srcRect = {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0
+    });
+  }
+  /**
+   * Set the rotation angle of the image
+   * @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 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;
+  }
+  setUnitId(r) {
+    return this._image.unitId = r, this;
+  }
+  setSubUnitId(r) {
+    return this._image.subUnitId = r, this;
+  }
+  async buildAsync() {
+    const e = this._injector.get(B).getRenderById(this._image.unitId);
+    if (!e)
+      throw new Error(`Render Unit with unitId ${this._image.unitId} not found`);
+    const t = e.with(te), i = e.with(F);
+    if (this._image.width === 0 || this._image.height === 0) {
+      const n = await Q(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 ae(this._image, t, i);
+  }
+};
+b = $([
+  T(2, A(j))
+], b);
+let m = class extends J {
+  constructor(r, e, t) {
+    super(), this._image = r, this._commandService = e, 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 {boolean} true if the image is removed successfully, otherwise false
+   * @example
+   * ```ts
+   * 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(S.id, { unitId: this._image.unitId, drawings: [this._image] });
+  }
+  /**
+   * Convert the image to a FOverGridImageBuilder
+   * @returns {FOverGridImageBuilder} The builder FOverGridImageBuilder
+   * @example
+   * ```ts
+   * 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(b);
+    return r.setImage(this._image), r;
+  }
+  setSource(r, e) {
+    const t = e != null ? e : f.URL;
+    return this._image.source = r, this._image.imageSourceType = t, this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [this._image] });
+  }
+  async setPositionAsync(r, e, t, i) {
+    const n = this.toBuilder();
+    n.setColumn(e), n.setRow(r), 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 {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 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, e) {
+    const t = this.toBuilder();
+    t.setWidth(r), t.setHeight(e);
+    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 {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, 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, e, 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), e != null && (this._image.srcRect.left = e), 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] });
+  }
+  /**
+   * Set the rotation angle of the image
+   * @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 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._image.transform && (this._image.transform.angle = r), this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [this._image] });
+  }
+  /**
+   * Move the image layer forward by one level
+   * @returns {boolean} true if the image is moved forward successfully, otherwise false
+   * @example
+   * ```ts
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = fWorksheet.getImages()[0];
+   * const result = image?.setForward();
+   * console.log(result);
+   * ```
+   */
+  setForward() {
+    return this._commandService.syncExecuteCommand(w.id, {
+      unitId: this._image.unitId,
+      subUnitId: this._image.subUnitId,
+      drawingIds: [this._image.drawingId],
+      arrangeType: v.forward
+    });
+  }
+  /**
+   * Move the image layer backward by one level
+   * @returns {boolean} true if the image is moved backward successfully, otherwise false
+   * @example
+   * ```ts
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = fWorksheet.getImages()[0];
+   * const result = image?.setBackward();
+   * console.log(result);
+   * ```
+   */
+  setBackward() {
+    return this._commandService.syncExecuteCommand(w.id, {
+      unitId: this._image.unitId,
+      subUnitId: this._image.subUnitId,
+      drawingIds: [this._image.drawingId],
+      arrangeType: v.backward
+    });
+  }
+  /**
+   * Move the image layer to the bottom layer
+   * @returns {boolean} true if the image is moved to the bottom layer successfully, otherwise false
+   * @example
+   * ```ts
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = fWorksheet.getImages()[0];
+   * const result = image?.setBack();
+   * console.log(result);
+   * ```
+   */
+  setBack() {
+    return this._commandService.syncExecuteCommand(w.id, {
+      unitId: this._image.unitId,
+      subUnitId: this._image.subUnitId,
+      drawingIds: [this._image.drawingId],
+      arrangeType: v.back
+    });
+  }
+  /**
+   * Move the image layer to the top layer
+   * @returns {boolean} true if the image is moved to the top layer successfully, otherwise false
+   * @example
+   * ```ts
+   * const fWorkbook = univerAPI.getActiveWorkbook();
+   * const fWorksheet = fWorkbook.getActiveSheet();
+   * const image = fWorksheet.getImages()[0];
+   * const result = image?.setFront();
+   * console.log(result);
+   * ```
+   */
+  setFront() {
+    return this._commandService.syncExecuteCommand(w.id, {
+      unitId: this._image.unitId,
+      subUnitId: this._image.subUnitId,
+      drawingIds: [this._image.drawingId],
+      arrangeType: v.front
+    });
+  }
+};
+m = $([
+  T(1, P),
+  T(2, A(j))
+], m);
+class de extends z {
+  addFloatDomToPosition(e, t) {
+    const i = this._workbook.getUnitId(), n = this._worksheet.getSheetId(), { key: s, disposableCollection: o } = R(e, this._injector.get(G)), a = this._injector.get(D).addFloatDomToPosition({ ...e, componentKey: s, unitId: i, subUnitId: n }, t);
+    return a ? (o.add(a.dispose), {
+      id: a.id,
+      dispose: () => {
+        o.dispose(), a.dispose();
+      }
+    }) : (o.dispose(), null);
+  }
+  addFloatDomToRange(e, 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(e.getRange(), { ...t, componentKey: d, unitId: s, subUnitId: o }, i, n);
+    return c ? (a.add(c.dispose), {
+      id: c.id,
+      dispose: () => {
+        a.dispose(), c.dispose();
+      }
+    }) : (a.dispose(), null);
+  }
+  addFloatDomToColumnHeader(e, 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(e, { ...t, componentKey: d, unitId: s, subUnitId: o }, i, n);
+    return c ? (a.add(c.dispose), {
+      id: c.id,
+      dispose: () => {
+        a.dispose(), c.dispose();
+      }
+    }) : (a.dispose(), null);
+  }
+  async insertImage(e, t, i, n, s) {
+    const o = this.newOverGridImage();
+    if (typeof e == "string")
+      o.setSource(e);
+    else {
+      const g = await e.getBlob().getDataAsString();
+      o.setSource(g, f.BASE64);
+    }
+    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(p.id, { unitId: this._fWorkbook.getId(), drawings: [d] });
+  }
+  insertImages(e) {
+    const t = e.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(e) {
+    const t = e.map((i) => ({
+      unitId: this._fWorkbook.getId(),
+      drawingId: i.getId(),
+      subUnitId: this.getSheetId(),
+      drawingType: i.getType()
+    }));
+    return this._commandService.syncExecuteCommand(S.id, { unitId: this._fWorkbook.getId(), drawings: t }), this;
+  }
+  getImages() {
+    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(e) {
+    const i = this._injector.get(l).getDrawingByParam({ unitId: this._fWorkbook.getId(), subUnitId: this.getSheetId(), drawingId: e });
+    return i && i.drawingType === _.DRAWING_IMAGE ? this._injector.createInstance(m, i) : null;
+  }
+  getActiveImages() {
+    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(e) {
+    return this._commandService.syncExecuteCommand(h.id, { unitId: this._fWorkbook.getId(), drawings: e }), this;
+  }
+  onImageInserted(e) {
+    const t = this._injector.get(l);
+    return y(t.add$.subscribe((i) => {
+      const n = i.map(
+        (s) => this._injector.createInstance(m, t.getDrawingByParam(s))
+      );
+      e(n);
+    }));
+  }
+  onImageDeleted(e) {
+    const t = this._injector.get(l);
+    return y(t.remove$.subscribe((i) => {
+      const n = i.map(
+        (s) => this._injector.createInstance(m, t.getDrawingByParam(s))
+      );
+      e(n);
+    }));
+  }
+  onImageChanged(e) {
+    const t = this._injector.get(l);
+    return y(t.update$.subscribe((i) => {
+      const n = i.map(
+        (s) => this._injector.createInstance(m, t.getDrawingByParam(s))
+      );
+      e(n);
+    }));
+  }
+  newOverGridImage() {
+    const e = this._fWorkbook.getId(), t = this.getSheetId();
+    return this._injector.createInstance(b, e, t);
+  }
+}
+z.extend(de);
+class ce extends W {
+  get DrawingType() {
+    return _;
+  }
+  get ImageSourceType() {
+    return f;
+  }
+  get SheetDrawingAnchorType() {
+    return ne;
+  }
+}
+W.extend(ce);
+class ge extends M {
+  get BeforeOverGridImageChange() {
+    return "BeforeOverGridImageChange";
+  }
+  get OverGridImageChanged() {
+    return "OverGridImageChanged";
+  }
+  get BeforeOverGridImageInsert() {
+    return "BeforeOverGridImageInsert";
+  }
+  get OverGridImageInserted() {
+    return "OverGridImageInserted";
+  }
+  get BeforeOverGridImageRemove() {
+    return "BeforeOverGridImageRemove";
+  }
+  get OverGridImageRemoved() {
+    return "OverGridImageRemoved";
+  }
+  get BeforeOverGridImageSelect() {
+    return "BeforeOverGridImageSelect";
+  }
+  get OverGridImageSelected() {
+    return "OverGridImageSelected";
+  }
+}
+M.extend(ge);
+class me extends H {
+  /**
+   * @ignore
+   */
+  // eslint-disable-next-line max-lines-per-function
+  _initialize(e) {
+    const t = e.get(P);
+    this.registerEventHandler(
+      this.Event.BeforeOverGridImageInsert,
+      () => t.beforeCommandExecuted((i) => {
+        if (i.id !== p.id) return;
+        const n = i.params, s = this.getActiveWorkbook();
+        if (s == null || n == null)
+          return;
+        const { drawings: o } = n, d = {
+          workbook: s,
+          insertImageParams: o
+        };
+        if (this.fireEvent(this.Event.BeforeOverGridImageInsert, d), d.cancel)
+          throw new Error("Canceled by BeforeOverGridImageInsert event");
+      })
+    ), this.registerEventHandler(
+      this.Event.BeforeOverGridImageRemove,
+      () => t.beforeCommandExecuted((i) => {
+        if (i.id !== S.id) return;
+        const n = i.params, s = this.getActiveWorkbook();
+        if (s == null || n == null)
+          return;
+        const o = e.get(I), { drawings: d } = n, a = d.map((c) => o.getDrawingByParam(c)), g = {
+          workbook: s,
+          images: this._createFOverGridImage(a)
+        };
+        if (this.fireEvent(this.Event.BeforeOverGridImageRemove, g), g.cancel)
+          throw new Error("Canceled by BeforeOverGridImageRemove event");
+      })
+    ), this.registerEventHandler(
+      this.Event.BeforeOverGridImageChange,
+      () => 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 = e.get(I), a = [];
+        o.forEach((c) => {
+          const u = d.getDrawingByParam(c);
+          u != null && a.push({
+            changeParam: c,
+            image: this._injector.createInstance(m, u)
+          });
+        });
+        const g = {
+          workbook: s,
+          images: a
+        };
+        if (this.fireEvent(this.Event.BeforeOverGridImageChange, g), g.cancel)
+          throw d.updateNotification(o), new Error("Canceled by BeforeOverGridImageChange event");
+      })
+    ), this.registerEventHandler(
+      this.Event.BeforeOverGridImageSelect,
+      () => t.beforeCommandExecuted((i) => {
+        if (i.id !== x.id) return;
+        const n = i.params, s = this.getActiveWorkbook();
+        if (s == null)
+          return;
+        const o = e.get(I), d = o.getFocusDrawings(), a = n.map((c) => o.getDrawingByParam(c)), g = {
+          workbook: s,
+          selectedImages: this._createFOverGridImage(a),
+          oldSelectedImages: this._createFOverGridImage(d)
+        };
+        if (this.fireEvent(this.Event.BeforeOverGridImageSelect, g), g.cancel)
+          throw new Error("Canceled by BeforeOverGridImageSelect event");
+      })
+    ), this.registerEventHandler(
+      this.Event.OverGridImageInserted,
+      () => t.onCommandExecuted((i) => {
+        if (i.id !== p.id) return;
+        const n = i.params, s = this.getActiveWorkbook();
+        if (s == null || n == null)
+          return;
+        const { drawings: o } = n;
+        this.fireEvent(this.Event.OverGridImageInserted, {
+          workbook: s,
+          images: this._createFOverGridImage(o)
+        });
+      })
+    ), this.registerEventHandler(
+      this.Event.OverGridImageRemoved,
+      () => t.onCommandExecuted((i) => {
+        if (i.id !== S.id) return;
+        const n = i.params, s = this.getActiveWorkbook();
+        if (s == null || n == null)
+          return;
+        const { drawings: o } = n;
+        this.fireEvent(this.Event.OverGridImageRemoved, {
+          workbook: s,
+          removeImageParams: o
+        });
+      })
+    ), this.registerEventHandler(
+      this.Event.OverGridImageChanged,
+      () => 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 = e.get(I), a = o.map((g) => this._injector.createInstance(m, d.getDrawingByParam(g)));
+        this.fireEvent(this.Event.OverGridImageChanged, {
+          workbook: s,
+          images: a
+        });
+      })
+    ), this.registerEventHandler(
+      this.Event.OverGridImageSelected,
+      () => t.onCommandExecuted((i) => {
+        if (i.id !== x.id) return;
+        const n = i.params, s = this.getActiveWorkbook();
+        if (s == null)
+          return;
+        const o = e.get(I), d = n.map((a) => o.getDrawingByParam(a));
+        this.fireEvent(this.Event.OverGridImageSelected, {
+          workbook: s,
+          selectedImages: this._createFOverGridImage(d)
+        });
+      })
+    );
+  }
+  _createFOverGridImage(e) {
+    return e.map((t) => this._injector.createInstance(m, t));
+  }
+}
+H.extend(me);
+class he extends N {
+  async insertCellImageAsync(e) {
+    var s;
+    const t = this._injector.get(B), i = (s = Z(Y.UNIVER_SHEET, this._injector.get(q), t)) == null ? void 0 : s.with(ee);
+    if (!i)
+      return !1;
+    const n = {
+      unitId: this._workbook.getUnitId(),
+      subUnitId: this._worksheet.getSheetId(),
+      row: this.getRow(),
+      col: this.getColumn()
+    };
+    return typeof e == "string" ? i.insertCellImageByUrl(e, n) : i.insertCellImageByFile(e, n);
+  }
+}
+N.extend(he);