@univerjs/sheets-drawing-ui 0.5.3 → 0.5.4-nightly.202501131606

package/lib/es/facade.js

@@ -1,81 +1,81 @@
-var E = Object.defineProperty;
-var P = (e, t, i) => t in e ? E(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
-var R = (e, t, i) => P(e, typeof t != "symbol" ? t + "" : t, i);
-import { Inject as O, Injector as k, ICommandService as U, generateRandomId as W, DrawingTypeEnum as x, ImageSourceType as _, FBase as F } from "@univerjs/core";
-import { getImageSize as M } from "@univerjs/drawing";
-import { IRenderManagerService as C } from "@univerjs/engine-render";
-import { SetSheetDrawingCommand as h, SheetCanvasFloatDomManagerService as z, InsertSheetDrawingCommand as D, RemoveSheetDrawingCommand as A } from "@univerjs/sheets-drawing-ui";
-import { SheetSkeletonManagerService as y, ISheetSelectionRenderService as G, convertPositionSheetOverGridToAbsolute as $, convertPositionCellToSheetOverGrid as L } from "@univerjs/sheets-ui";
-import { ISheetDrawingService as g } from "@univerjs/sheets-drawing";
-import { transformComponentKey as X } from "@univerjs/sheets-ui/facade";
-import { FWorksheet as j } from "@univerjs/sheets/facade";
-import { ComponentManager as Y } from "@univerjs/ui";
-var H = Object.defineProperty, K = Object.getOwnPropertyDescriptor, T = (e, t, i, s) => {
-  for (var n = s > 1 ? void 0 : s ? K(t, i) : t, o = e.length - 1, r; o >= 0; o--)
-    (r = e[o]) && (n = (s ? r(t, i, n) : r(n)) || n);
-  return s && n && H(t, i, n), n;
-}, v = (e, t) => (i, s) => t(i, s, e);
-function V(e, t) {
-  const { from: i, to: s, flipY: n = !1, flipX: o = !1, angle: r = 0, skewX: m = 0, skewY: a = 0 } = e.sheetTransform, { column: d, columnOffset: u, row: f, rowOffset: I } = i, w = $(
-    e.unitId,
-    e.subUnitId,
-    { from: i, to: s },
+var $ = Object.defineProperty;
+var L = (i, t, e) => t in i ? $(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var D = (i, t, e) => L(i, typeof t != "symbol" ? t + "" : t, e);
+import { Inject as A, Injector as x, ICommandService as P, generateRandomId as X, DrawingTypeEnum as _, ImageSourceType as I, FBase as Y, ArrangeTypeEnum as f, toDisposable as C, FEnum as F, FEventName as W, FUniver as U } from "@univerjs/core";
+import { getImageSize as H, SetDrawingSelectedOperation as B, IDrawingManagerService as u } from "@univerjs/drawing";
+import { IRenderManagerService as j } from "@univerjs/engine-render";
+import { SetSheetDrawingCommand as g, SetDrawingArrangeCommand as w, SheetCanvasFloatDomManagerService as K, InsertSheetDrawingCommand as S, RemoveSheetDrawingCommand as G } from "@univerjs/sheets-drawing-ui";
+import { SheetSkeletonManagerService as T, ISheetSelectionRenderService as V, convertPositionSheetOverGridToAbsolute as q, convertPositionCellToSheetOverGrid as J } from "@univerjs/sheets-ui";
+import { ISheetDrawingService as h, SheetDrawingAnchorType as Q } from "@univerjs/sheets-drawing";
+import { transformComponentKey as Z } from "@univerjs/sheets-ui/facade";
+import { FWorksheet as M } from "@univerjs/sheets/facade";
+import { ComponentManager as ee } from "@univerjs/ui";
+var te = Object.defineProperty, re = Object.getOwnPropertyDescriptor, z = (i, t, e, r) => {
+  for (var n = r > 1 ? void 0 : r ? re(t, e) : t, s = i.length - 1, a; s >= 0; s--)
+    (a = i[s]) && (n = (r ? a(t, e, n) : a(n)) || n);
+  return r && n && te(t, e, n), n;
+}, E = (i, t) => (e, r) => t(e, r, i);
+function ie(i, t) {
+  const { from: e, to: r, flipY: n = !1, flipX: s = !1, angle: a = 0, skewX: o = 0, skewY: c = 0 } = i.sheetTransform, { column: m, columnOffset: l, row: v, rowOffset: O } = e, p = q(
+    i.unitId,
+    i.subUnitId,
+    { from: e, to: r },
     t
-  ), { left: p, top: b, width: S, height: B } = w;
+  ), { left: y, top: R, width: k, height: N } = p;
   return {
-    ...e,
-    column: d,
-    columnOffset: u,
-    row: f,
-    rowOffset: I,
-    width: S,
-    height: B,
+    ...i,
+    column: m,
+    columnOffset: l,
+    row: v,
+    rowOffset: O,
+    width: k,
+    height: N,
     flipY: n,
-    flipX: o,
-    angle: r,
-    skewX: m,
-    skewY: a
+    flipX: s,
+    angle: a,
+    skewX: o,
+    skewY: c
   };
 }
-function N(e, t, i) {
-  const { column: s, columnOffset: n, row: o, rowOffset: r, flipY: m = !1, flipX: a = !1, angle: d = 0, skewX: u = 0, skewY: f = 0, width: I, height: w } = e, p = L(
-    e.unitId,
-    e.subUnitId,
-    { column: s, columnOffset: n, row: o, rowOffset: r },
-    I,
-    w,
+function ne(i, t, e) {
+  const { column: r, columnOffset: n, row: s, rowOffset: a, flipY: o = !1, flipX: c = !1, angle: m = 0, skewX: l = 0, skewY: v = 0, width: O, height: p } = i, y = J(
+    i.unitId,
+    i.subUnitId,
+    { column: r, columnOffset: n, row: s, rowOffset: a },
+    O,
+    p,
     t,
-    i
-  ), { sheetTransform: b, transform: S } = p;
+    e
+  ), { sheetTransform: R, transform: k } = y;
   return {
-    ...e,
+    ...i,
     sheetTransform: {
-      ...b,
-      flipY: m,
-      flipX: a,
-      angle: d,
-      skewX: u,
-      skewY: f
+      ...R,
+      flipY: o,
+      flipX: c,
+      angle: m,
+      skewX: l,
+      skewY: v
     },
     transform: {
-      ...S,
-      flipY: m,
-      flipX: a,
-      angle: d,
-      skewX: u,
-      skewY: f
+      ...k,
+      flipY: o,
+      flipX: c,
+      angle: m,
+      skewX: l,
+      skewY: v
     }
   };
 }
-let l = class {
-  constructor(e, t, i) {
-    R(this, "_image");
-    this._injector = i, this._image = {
-      drawingId: W(6),
-      drawingType: x.DRAWING_IMAGE,
-      imageSourceType: _.BASE64,
+let b = class {
+  constructor(i, t, e) {
+    D(this, "_image");
+    this._injector = e, this._image = {
+      drawingId: X(6),
+      drawingType: _.DRAWING_IMAGE,
+      imageSourceType: I.BASE64,
       source: "",
-      unitId: e,
+      unitId: i,
       subUnitId: t,
       column: 0,
       columnOffset: 0,
@@ -85,16 +85,50 @@ let l = class {
       height: 0
     };
   }
-  setImage(e) {
-    const i = this._injector.get(C).getRenderById(e.unitId);
-    if (!i)
-      throw new Error(`Render Unit with unitId ${e.unitId} not found`);
-    const s = i.with(y);
-    return this._image = V(e, s), this;
+  /**
+   * Set the initial image configuration for the image builder.
+   * @param image The image to be set. {@link ISheetImage}
+   * @returns The builder. {@link FOverGridImageBuilder}
+   * @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]);
+   * ```
+   */
+  setImage(i) {
+    const e = this._injector.get(j).getRenderById(i.unitId);
+    if (!e)
+      throw new Error(`Render Unit with unitId ${i.unitId} not found`);
+    const r = e.with(T);
+    return i.sheetTransform == null && (i.sheetTransform = {
+      from: {
+        column: 0,
+        columnOffset: 0,
+        row: 0,
+        rowOffset: 0
+      },
+      to: {
+        column: 0,
+        columnOffset: 0,
+        row: 0,
+        rowOffset: 0
+      }
+    }), this._image = ie(i, r), this;
   }
-  setSource(e, t) {
-    const i = t != null ? t : _.URL;
-    return this._image.source = e, this._image.imageSourceType = i, this;
+  setSource(i, t) {
+    const e = t != null ? t : I.URL;
+    return this._image.source = i, this._image.imageSourceType = e, this;
   }
   getsource() {
     return this._image.source;
@@ -102,38 +136,192 @@ let l = class {
   getSourceType() {
     return this._image.imageSourceType;
   }
-  setColumn(e) {
-    return this._image.column = e, this;
+  /**
+   * Set the position of the image
+   * @param column  The sheet start column of the image
+   * @returns The builder.  {@link FOverGridImageBuilder}
+   * @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]);
+   * ```
+   */
+  setColumn(i) {
+    return this._image.column = i, this;
   }
-  setRow(e) {
-    return this._image.row = e, this;
+  /**
+   * Set the position of the image
+   * @param row The sheet start row of the image
+   * @returns The builder.  {@link FOverGridImageBuilder}
+   * @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]);
+   * ```
+   */
+  setRow(i) {
+    return this._image.row = i, this;
   }
-  setColumnOffset(e) {
-    return this._image.columnOffset = e, this;
+  /**
+   * Set the column offset of the image in a unit
+   * @param offset The offset in pixels
+   * @returns The builder.  {@link FOverGridImageBuilder}
+   * @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]);
+   * ```
+   */
+  setColumnOffset(i) {
+    return this._image.columnOffset = i, this;
   }
-  setRowOffset(e) {
-    return this._image.rowOffset = e, this;
+  /**
+   * Set the row offset of the image in a unit
+   * @param offset The offset in pixels
+   * @returns The builder.  {@link FOverGridImageBuilder}
+   * @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]);
+   * ```
+   */
+  setRowOffset(i) {
+    return this._image.rowOffset = i, this;
   }
-  setWidth(e) {
-    return this._image.width = e, this;
+  /**
+   * set the width of the image
+   * @param width The width of the image, in pixels
+   * @returns The builder.  {@link FOverGridImageBuilder}
+   * @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]);
+   * ```
+   */
+  setWidth(i) {
+    return this._image.width = i, this;
   }
-  setHeight(e) {
-    return this._image.height = e, this;
+  /**
+   * Set the height of the image
+   * @param height The height of the image, in pixels
+   * @returns The builder.  {@link FOverGridImageBuilder}
+   * @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]);
+   * ```
+   */
+  setHeight(i) {
+    return this._image.height = i, this;
   }
-  setAnchorType(e) {
-    return this._image.anchorType = 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}
+   * @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]);
+   * ```
+   */
+  setAnchorType(i) {
+    return this._image.anchorType = i, this;
   }
-  setCropTop(e) {
-    return this._initializeSrcRect(), this._image.srcRect.top = 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}
+   * @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]);
+   * ```
+   */
+  setCropTop(i) {
+    return this._initializeSrcRect(), this._image.srcRect.top = i, this;
   }
-  setCropLeft(e) {
-    return this._initializeSrcRect(), this._image.srcRect.left = 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}
+   * @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]);
+   * ```
+   */
+  setCropLeft(i) {
+    return this._initializeSrcRect(), this._image.srcRect.left = i, this;
   }
-  setCropBottom(e) {
-    return this._initializeSrcRect(), this._image.srcRect.bottom = 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}
+   * @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]);
+   * ```
+   */
+  setCropBottom(i) {
+    return this._initializeSrcRect(), this._image.srcRect.bottom = i, this;
   }
-  setCropRight(e) {
-    return this._initializeSrcRect(), this._image.srcRect.right = 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}
+   * @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]);
+   * ```
+   */
+  setCropRight(i) {
+    return this._initializeSrcRect(), this._image.srcRect.right = i, this;
   }
   _initializeSrcRect() {
     this._image.srcRect == null && (this._image.srcRect = {
@@ -146,39 +334,48 @@ let l = 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
+   * @returns The builder {@link FOverGridImageBuilder}
+   * @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]);
+   * ```
    */
-  setRotate(e) {
-    return this._image.angle = e, this;
+  setRotate(i) {
+    return this._image.angle = i, this;
   }
   // setPresetGeometry(prstGeom: PresetGeometryType): FOverGridImageBuilder {
   //     this._image.prstGeom = prstGeom;
   //     return this;
   // }
-  setUnitId(e) {
-    return this._image.unitId = e, this;
+  setUnitId(i) {
+    return this._image.unitId = i, this;
   }
-  setSubUnitId(e) {
-    return this._image.subUnitId = e, this;
+  setSubUnitId(i) {
+    return this._image.subUnitId = i, this;
   }
-  async build() {
-    const t = this._injector.get(C).getRenderById(this._image.unitId);
+  async buildAsync() {
+    const t = this._injector.get(j).getRenderById(this._image.unitId);
     if (!t)
       throw new Error(`Render Unit with unitId ${this._image.unitId} not found`);
-    const i = t.with(G), s = t.with(y);
+    const e = t.with(V), r = t.with(T);
     if (this._image.width === 0 || this._image.height === 0) {
-      const n = await M(this._image.source), o = n.width, r = n.height;
-      this._image.width === 0 && (this._image.width = o), this._image.height === 0 && (this._image.height = r);
+      const n = await H(this._image.source), s = n.width, a = n.height;
+      this._image.width === 0 && (this._image.width = s), this._image.height === 0 && (this._image.height = a);
     }
-    return N(this._image, i, s);
+    return ne(this._image, e, r);
   }
 };
-l = T([
-  v(2, O(k))
-], l);
-let c = class extends F {
-  constructor(e, t, i) {
-    super(), this._image = e, this._commandService = t, this._injector = i;
+b = z([
+  E(2, A(x))
+], b);
+let d = class extends Y {
+  constructor(i, t, e) {
+    super(), this._image = i, this._commandService = t, this._injector = e;
   }
   getId() {
     return this._image.drawingId;
@@ -194,12 +391,12 @@ let c = class extends F {
    * // remove the image from the sheet
    * const activeSpreadsheet = univerAPI.getActiveWorkbook();
    * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const image = activeSheet.getImages[0];
+   * const image = activeSheet.getImages()[0];
    * console.log('Delete state is ', image?.remove());
    * ```
    */
   remove() {
-    return this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [this._image] });
+    return this._commandService.syncExecuteCommand(g.id, { unitId: this._image.unitId, drawings: [this._image] });
   }
   /**
    * Convert the image to a FOverGridImageBuilder
@@ -209,33 +406,44 @@ let c = class extends F {
    * // convert the image to a builder
    * const activeSpreadsheet = univerAPI.getActiveWorkbook();
    * const activeSheet = activeSpreadsheet.getActiveSheet();
-   * const image = activeSheet.getImages[0];
+   * const image = activeSheet.getImages()[0];
    * const builder = image.toBuilder();
-   * builder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).build();
-   * activeSheet.updateImages([builder.build()]);
+   * const param = await builder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).buildAsync();
+   * activeSheet.updateImages([param]);
    * ```
    */
   toBuilder() {
-    const e = this._injector.createInstance(l);
-    return e.setImage(this._image), e;
+    const i = this._injector.createInstance(b);
+    return i.setImage(this._image), i;
   }
-  setSource(e, t) {
-    const i = t != null ? t : _.URL;
-    return this._image.source = e, this._image.imageSourceType = i, this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [this._image] });
+  setSource(i, t) {
+    const e = t != null ? t : I.URL;
+    return this._image.source = i, this._image.imageSourceType = e, this._commandService.syncExecuteCommand(g.id, { unitId: this._image.unitId, drawings: [this._image] });
   }
-  setPosition(e, t, i, s) {
+  async setPositionAsync(i, t, e, r) {
     const n = this.toBuilder();
-    return n.setColumn(t), n.setRow(e), i != null && n.setRowOffset(i), s != null && n.setColumnOffset(s), this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [n.build()] });
+    n.setColumn(t), n.setRow(i), e != null && n.setRowOffset(e), r != null && n.setColumnOffset(r);
+    const s = await n.buildAsync();
+    return this._commandService.syncExecuteCommand(g.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
+   * @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));
    */
-  setSize(e, t) {
-    const i = this.toBuilder();
-    return i.setWidth(e), i.setHeight(t), this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [i.build()] });
+  async setSizeAsync(i, t) {
+    const e = this.toBuilder();
+    e.setWidth(i), e.setHeight(t);
+    const r = await e.buildAsync();
+    return this._commandService.syncExecuteCommand(g.id, { unitId: this._image.unitId, drawings: [r] });
   }
   /**
    * 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.
@@ -249,17 +457,17 @@ let c = class extends F {
    * // 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(0, 0, 0, 0));
+   * const image = activeSheet.getImages()[0];
+   * console.log('Set crop state is ', image.setCrop(10, 10, 10, 10));
    * ```
    */
-  setCrop(e, t, i, s) {
+  setCrop(i, t, e, r) {
     return this._image.srcRect == null && (this._image.srcRect = {
       top: 0,
       left: 0,
       bottom: 0,
       right: 0
-    }), e != null && (this._image.srcRect.top = e), t != null && (this._image.srcRect.left = t), i != null && (this._image.srcRect.bottom = i), s != null && (this._image.srcRect.right = s), this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [this._image] });
+    }), i != null && (this._image.srcRect.top = i), t != null && (this._image.srcRect.left = t), e != null && (this._image.srcRect.bottom = e), r != null && (this._image.srcRect.right = r), this._commandService.syncExecuteCommand(g.id, { unitId: this._image.unitId, drawings: [this._image] });
   }
   // setPresetGeometry(prstGeom: PresetGeometryType): boolean {
   //     this._image.prstGeom = prstGeom;
@@ -269,103 +477,379 @@ let c = class extends F {
    * 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
+   * @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));
+   * ```
+   */
+  setRotate(i) {
+    return this._image.sheetTransform.angle = i, this._commandService.syncExecuteCommand(g.id, { unitId: this._image.unitId, drawings: [this._image] });
+  }
+  /**
+   * Move the image layer forward by one level
+   * @returns success or not
+   * @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());
+   * ```
+   */
+  setForward() {
+    return this._commandService.syncExecuteCommand(w.id, {
+      unitId: this._image.unitId,
+      subUnitId: this._image.subUnitId,
+      drawingIds: [this._image.drawingId],
+      arrangeType: f.forward
+    });
+  }
+  /**
+   * Move the image layer backward by one level
+   * @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());
+   * ```
+   */
+  setBackward() {
+    return this._commandService.syncExecuteCommand(w.id, {
+      unitId: this._image.unitId,
+      subUnitId: this._image.subUnitId,
+      drawingIds: [this._image.drawingId],
+      arrangeType: f.backward
+    });
+  }
+  /**
+   * Move the image layer to the back
+   * @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());
+   * ```
+   */
+  setBack() {
+    return this._commandService.syncExecuteCommand(w.id, {
+      unitId: this._image.unitId,
+      subUnitId: this._image.subUnitId,
+      drawingIds: [this._image.drawingId],
+      arrangeType: f.back
+    });
+  }
+  /**
+   * Move the image layer to the front
+   * @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());
+   * ```
    */
-  setRotate(e) {
-    return this._image.sheetTransform.angle = e, this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [this._image] });
+  setFront() {
+    return this._commandService.syncExecuteCommand(w.id, {
+      unitId: this._image.unitId,
+      subUnitId: this._image.subUnitId,
+      drawingIds: [this._image.drawingId],
+      arrangeType: f.front
+    });
   }
 };
-c = T([
-  v(1, U),
-  v(2, O(k))
-], c);
-class q extends j {
-  addFloatDomToPosition(t, i) {
-    const s = this._workbook.getUnitId(), n = this._worksheet.getSheetId(), { key: o, disposableCollection: r } = X(t, this._injector.get(Y)), a = this._injector.get(z).addFloatDomToPosition({ ...t, componentKey: o, unitId: s, subUnitId: n }, i);
-    return a ? (r.add(a.dispose), {
-      id: a.id,
+d = z([
+  E(1, P),
+  E(2, A(x))
+], d);
+class se extends M {
+  addFloatDomToPosition(t, e) {
+    const r = this._workbook.getUnitId(), n = this._worksheet.getSheetId(), { key: s, disposableCollection: a } = Z(t, this._injector.get(ee)), c = this._injector.get(K).addFloatDomToPosition({ ...t, componentKey: s, unitId: r, subUnitId: n }, e);
+    return c ? (a.add(c.dispose), {
+      id: c.id,
       dispose: () => {
-        r.dispose(), a.dispose();
+        a.dispose(), c.dispose();
       }
-    }) : (r.dispose(), null);
+    }) : (a.dispose(), null);
   }
-  async insertImage(t, i, s, n, o) {
-    const r = this.newOverGridImage();
+  async insertImage(t, e, r, n, s) {
+    const a = this.newOverGridImage();
     if (typeof t == "string")
-      r.setSource(t);
+      a.setSource(t);
     else {
-      const d = await t.getBlob().getDataAsString();
-      r.setSource(d, _.BASE64);
+      const m = await t.getBlob().getDataAsString();
+      a.setSource(m, I.BASE64);
     }
-    i !== void 0 ? r.setColumn(i) : r.setColumn(0), s !== void 0 ? r.setRow(s) : r.setRow(0), n !== void 0 ? r.setColumnOffset(n) : r.setColumnOffset(0), o !== void 0 ? r.setRowOffset(o) : r.setRowOffset(0);
-    const m = await r.build();
-    return this._commandService.syncExecuteCommand(D.id, { unitId: this._fWorkbook.getId(), drawings: [m] });
+    e !== void 0 ? a.setColumn(e) : a.setColumn(0), r !== void 0 ? a.setRow(r) : a.setRow(0), n !== void 0 ? a.setColumnOffset(n) : a.setColumnOffset(0), s !== void 0 ? a.setRowOffset(s) : a.setRowOffset(0);
+    const o = await a.buildAsync();
+    return this._commandService.syncExecuteCommand(S.id, { unitId: this._fWorkbook.getId(), drawings: [o] });
   }
   insertImages(t) {
-    const i = t.map((s) => (s.unitId = this._fWorkbook.getId(), s.subUnitId = this.getSheetId(), s));
-    this._commandService.syncExecuteCommand(D.id, { unitId: this._fWorkbook.getId(), drawings: i });
+    const e = t.map((r) => (r.unitId = this._fWorkbook.getId(), r.subUnitId = this.getSheetId(), r));
+    return this._commandService.syncExecuteCommand(S.id, { unitId: this._fWorkbook.getId(), drawings: e }), this;
   }
   deleteImages(t) {
-    const i = t.map((s) => ({
+    const e = t.map((r) => ({
       unitId: this._fWorkbook.getId(),
-      drawingId: s.getId(),
+      drawingId: r.getId(),
       subUnitId: this.getSheetId(),
-      drawingType: s.getType()
+      drawingType: r.getType()
     }));
-    this._commandService.syncExecuteCommand(A.id, { unitId: this._fWorkbook.getId(), drawings: i });
+    return this._commandService.syncExecuteCommand(G.id, { unitId: this._fWorkbook.getId(), drawings: e }), this;
   }
   getImages() {
-    const i = this._injector.get(g).getDrawingData(this._fWorkbook.getId(), this.getSheetId()), s = [];
-    for (const n in i) {
-      const o = i[n];
-      s.push(this._injector.createInstance(c, o));
+    const e = this._injector.get(h).getDrawingData(this._fWorkbook.getId(), this.getSheetId()), r = [];
+    for (const n in e) {
+      const s = e[n];
+      s.drawingType === _.DRAWING_IMAGE && r.push(this._injector.createInstance(d, s));
     }
-    return s;
+    return r;
   }
   getImageById(t) {
-    const s = this._injector.get(g).getDrawingByParam({ unitId: this._fWorkbook.getId(), subUnitId: this.getSheetId(), drawingId: t });
-    return s ? this._injector.createInstance(c, s) : null;
+    const r = this._injector.get(h).getDrawingByParam({ unitId: this._fWorkbook.getId(), subUnitId: this.getSheetId(), drawingId: t });
+    return r && r.drawingType === _.DRAWING_IMAGE ? this._injector.createInstance(d, r) : null;
   }
   getActiveImages() {
-    const i = this._injector.get(g).getFocusDrawings(), s = [];
-    for (const n in i) {
-      const o = i[n];
-      s.push(this._injector.createInstance(c, o));
+    const e = this._injector.get(h).getFocusDrawings(), r = [];
+    for (const n in e) {
+      const s = e[n];
+      r.push(this._injector.createInstance(d, s));
     }
-    return s;
+    return r;
   }
   updateImages(t) {
-    this._commandService.syncExecuteCommand(h.id, { unitId: this._fWorkbook.getId(), drawings: t });
+    return this._commandService.syncExecuteCommand(g.id, { unitId: this._fWorkbook.getId(), drawings: t }), this;
   }
   onImageInserted(t) {
-    const i = this._injector.get(g);
-    i.add$.subscribe((s) => {
-      const n = s.map(
-        (o) => this._injector.createInstance(c, i.getDrawingByParam(o))
+    const e = this._injector.get(h);
+    return C(e.add$.subscribe((r) => {
+      const n = r.map(
+        (s) => this._injector.createInstance(d, e.getDrawingByParam(s))
       );
       t(n);
-    });
+    }));
   }
   onImageDeleted(t) {
-    const i = this._injector.get(g);
-    i.remove$.subscribe((s) => {
-      const n = s.map(
-        (o) => this._injector.createInstance(c, i.getDrawingByParam(o))
+    const e = this._injector.get(h);
+    return C(e.remove$.subscribe((r) => {
+      const n = r.map(
+        (s) => this._injector.createInstance(d, e.getDrawingByParam(s))
       );
       t(n);
-    });
+    }));
   }
   onImageChanged(t) {
-    const i = this._injector.get(g);
-    i.update$.subscribe((s) => {
-      const n = s.map(
-        (o) => this._injector.createInstance(c, i.getDrawingByParam(o))
+    const e = this._injector.get(h);
+    return C(e.update$.subscribe((r) => {
+      const n = r.map(
+        (s) => this._injector.createInstance(d, e.getDrawingByParam(s))
       );
       t(n);
-    });
+    }));
   }
   newOverGridImage() {
-    const t = this._fWorkbook.getId(), i = this.getSheetId();
-    return this._injector.createInstance(l, t, i);
+    const t = this._fWorkbook.getId(), e = this.getSheetId();
+    return this._injector.createInstance(b, t, e);
+  }
+}
+M.extend(se);
+class ae extends F {
+  get DrawingType() {
+    return _;
+  }
+  get ImageSourceType() {
+    return I;
+  }
+  get SheetDrawingAnchorType() {
+    return Q;
+  }
+}
+F.extend(ae);
+class oe extends W {
+  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";
+  }
+}
+W.extend(oe);
+class ce extends U {
+  _initialize(t) {
+    const e = t.get(P);
+    this.disposeWithMe(e.beforeCommandExecuted((r) => {
+      switch (r.id) {
+        case S.id:
+          this._beforeOverGridImageInsert(r.params);
+          break;
+        case G.id:
+          this._beforeOverGridImageRemove(r.params);
+          break;
+        case g.id:
+          this._beforeOverGridImageChange(r.params);
+          break;
+        case B.id:
+          this._beforeOverGridImageSelect(r.params);
+          break;
+      }
+    })), this.disposeWithMe(e.onCommandExecuted((r) => {
+      switch (r.id) {
+        case S.id:
+          this._overGridImageInserted(r.params);
+          break;
+        case G.id:
+          this._overGridImageRemoved(r.params);
+          break;
+        case g.id:
+          this._overGridImageChanged(r.params);
+          break;
+        case B.id:
+          this._overGridImageSelected(r.params);
+          break;
+      }
+    }));
+  }
+  _beforeOverGridImageInsert(t) {
+    if (!this.hasEventCallback(this.Event.BeforeOverGridImageInsert))
+      return;
+    const e = this.getActiveWorkbook();
+    if (e == null || t == null)
+      return;
+    const { drawings: r } = t, n = {
+      workbook: e,
+      insertImageParams: r
+    };
+    if (this.fireEvent(this.Event.BeforeOverGridImageInsert, n), n.cancel)
+      throw new Error("Canceled by BeforeOverGridImageInsert event");
+  }
+  _overGridImageInserted(t) {
+    if (!this.hasEventCallback(this.Event.OverGridImageInserted))
+      return;
+    const e = this.getActiveWorkbook();
+    if (e == null || t == null)
+      return;
+    const { drawings: r } = t;
+    this.fireEvent(this.Event.OverGridImageInserted, {
+      workbook: e,
+      images: this._createFOverGridImage(r)
+    });
+  }
+  _beforeOverGridImageRemove(t) {
+    if (!this.hasEventCallback(this.Event.BeforeOverGridImageRemove))
+      return;
+    const e = this.getActiveWorkbook();
+    if (e == null || t == null)
+      return;
+    const { drawings: r } = t, n = this._injector.get(u), s = r.map((o) => n.getDrawingByParam(o)), a = {
+      workbook: e,
+      images: this._createFOverGridImage(s)
+    };
+    if (this.fireEvent(this.Event.BeforeOverGridImageRemove, a), a.cancel)
+      throw new Error("Canceled by BeforeOverGridImageRemove event");
+  }
+  _overGridImageRemoved(t) {
+    if (!this.hasEventCallback(this.Event.OverGridImageRemoved))
+      return;
+    const e = this.getActiveWorkbook();
+    if (e == null || t == null)
+      return;
+    const { drawings: r } = t;
+    this.fireEvent(this.Event.OverGridImageRemoved, {
+      workbook: e,
+      removeImageParams: r
+    });
+  }
+  _beforeOverGridImageChange(t) {
+    if (!this.hasEventCallback(this.Event.BeforeOverGridImageChange))
+      return;
+    const e = this.getActiveWorkbook();
+    if (e == null || t == null)
+      return;
+    const { drawings: r } = t, n = this._injector.get(u), s = [];
+    r.forEach((o) => {
+      const c = n.getDrawingByParam(o);
+      c != null && s.push({
+        changeParam: o,
+        image: this._injector.createInstance(d, c)
+      });
+    });
+    const a = {
+      workbook: e,
+      images: s
+    };
+    if (this.fireEvent(this.Event.BeforeOverGridImageChange, a), a.cancel)
+      throw n.updateNotification(r), new Error("Canceled by BeforeOverGridImageChange event");
+  }
+  _overGridImageChanged(t) {
+    if (!this.hasEventCallback(this.Event.OverGridImageChanged))
+      return;
+    const e = this.getActiveWorkbook();
+    if (e == null || t == null)
+      return;
+    const { drawings: r } = t, n = this._injector.get(u), s = r.map((a) => this._injector.createInstance(d, n.getDrawingByParam(a)));
+    this.fireEvent(this.Event.OverGridImageChanged, {
+      workbook: e,
+      images: s
+    });
+  }
+  _beforeOverGridImageSelect(t) {
+    if (!this.hasEventCallback(this.Event.BeforeOverGridImageSelect))
+      return;
+    const e = this._injector.get(u), r = this.getActiveWorkbook();
+    if (r == null)
+      return;
+    const n = e.getFocusDrawings(), s = t.map((o) => e.getDrawingByParam(o)), a = {
+      workbook: r,
+      selectedImages: this._createFOverGridImage(s),
+      oldSelectedImages: this._createFOverGridImage(n)
+    };
+    if (this.fireEvent(this.Event.BeforeOverGridImageSelect, a), a.cancel)
+      throw new Error("Canceled by BeforeOverGridImageSelect event");
+  }
+  _overGridImageSelected(t) {
+    if (!this.hasEventCallback(this.Event.OverGridImageSelected))
+      return;
+    const e = this.getActiveWorkbook(), r = this._injector.get(u);
+    if (e == null)
+      return;
+    const n = t.map((s) => r.getDrawingByParam(s));
+    this.fireEvent(this.Event.OverGridImageSelected, {
+      workbook: e,
+      selectedImages: this._createFOverGridImage(n)
+    });
+  }
+  _createFOverGridImage(t) {
+    return t.map((e) => this._injector.createInstance(d, e));
   }
 }
-j.extend(q);
+U.extend(ce);