@univerjs/sheets-drawing-ui 0.5.3 → 0.5.4-experimental.20250114-7c09c35

package/lib/types/controllers/drawing-popup-menu.controller.d.ts

@@ -1,4 +1,4 @@
-import { IContextService, Injector, IUniverInstanceService, RxDisposable } from '@univerjs/core';
+import { ICommandService, IContextService, Injector, IUniverInstanceService, RxDisposable } from '@univerjs/core';
 import { IDrawingManagerService } from '@univerjs/drawing';
 import { IRenderManagerService } from '@univerjs/engine-render';
 import { SheetCanvasPopManagerService } from '@univerjs/sheets-ui';
@@ -11,8 +11,9 @@ export declare class DrawingPopupMenuController extends RxDisposable {
     private readonly _univerInstanceService;
     private readonly _contextService;
     private readonly _uiPartsService;
+    private readonly _commandService;
     private _initImagePopupMenu;
-    constructor(_injector: Injector, _drawingManagerService: IDrawingManagerService, _canvasPopManagerService: SheetCanvasPopManagerService, _renderManagerService: IRenderManagerService, _univerInstanceService: IUniverInstanceService, _contextService: IContextService, _uiPartsService: IUIPartsService);
+    constructor(_injector: Injector, _drawingManagerService: IDrawingManagerService, _canvasPopManagerService: SheetCanvasPopManagerService, _renderManagerService: IRenderManagerService, _univerInstanceService: IUniverInstanceService, _contextService: IContextService, _uiPartsService: IUIPartsService, _commandService: ICommandService);
     private _init;
     private _dispose;
     private _create;

package/lib/types/controllers/sheet-drawing-update.controller.d.ts

@@ -5,6 +5,15 @@ import { IRenderContext, IRenderModule } from '@univerjs/engine-render';
 import { ISheetDrawingService } from '@univerjs/sheets-drawing';
 import { ISheetSelectionRenderService, SheetSkeletonManagerService } from '@univerjs/sheets-ui';
 import { ILocalFileService, IMessageService } from '@univerjs/ui';
+/**
+ * Get the size of the drawing within the cell
+ * @param {IAccessor} accessor Accessor
+ * @param {ISheetLocationBase} location Cell location
+ * @param {number} originImageWidth Original image width
+ * @param {number} originImageHeight Original image height
+ * @param {number} angle Rotation angle in degrees (0-360)
+ * @returns {{ width: number; height: number }} Drawing size
+ */
 export declare function getDrawingSizeByCell(accessor: IAccessor, location: ISheetLocationBase, originImageWidth: number, originImageHeight: number, angle: number): false | {
     width: number;
     height: number;

package/lib/types/facade/f-enum.d.ts

@@ -0,0 +1,19 @@
+import { DrawingTypeEnum, FEnum, ImageSourceType } from '@univerjs/core';
+import { SheetDrawingAnchorType } from '@univerjs/sheets-drawing';
+export interface IFDrawingEnumMixin {
+    /** Please refer to {@link DrawingTypeEnum}. */
+    DrawingType: typeof DrawingTypeEnum;
+    /** Please refer to {@link ImageSourceType}. */
+    ImageSourceType: Omit<typeof ImageSourceType, 'UUID'>;
+    /** Please refer to {@link SheetDrawingAnchorType}. */
+    SheetDrawingAnchorType: typeof SheetDrawingAnchorType;
+}
+export declare class FDrawingEnumMixin extends FEnum implements IFDrawingEnumMixin {
+    get DrawingType(): typeof DrawingTypeEnum;
+    get ImageSourceType(): Omit<typeof ImageSourceType, 'UUID'>;
+    get SheetDrawingAnchorType(): typeof SheetDrawingAnchorType;
+}
+declare module '@univerjs/core' {
+    interface FEnum extends IFDrawingEnumMixin {
+    }
+}

package/lib/types/facade/f-event.d.ts

@@ -0,0 +1,236 @@
+import { IDrawingSearch, IEventBase, FEventName } from '@univerjs/core';
+import { ISheetImage } from '@univerjs/sheets-drawing';
+import { FWorkbook } from '@univerjs/sheets/facade';
+import { FOverGridImage } from './f-over-grid-image';
+interface IFDrawingEventNameMixin {
+    /**
+     * Triggered before floating image insertion.
+     * Type of the event parameter is {@link IBeforeOverGridImageInsertParam}
+     * @example
+     * ```ts
+     * univerAPI.addEvent(univerAPI.Event.BeforeOverGridImageInsert, (param) => {
+     *    const { workbook, insertImageParams } = param;
+     *    // do something
+     *    console.log(workbook, insertImageParams);
+     *    // Cancel the insertion operation
+     *    param.cancel = true;
+     * })
+     * ```
+     */
+    readonly BeforeOverGridImageInsert: 'BeforeOverGridImageInsert';
+    /**
+     * Triggered after floating image insertion.
+     * Type of the event parameter is {@link IOverGridImageInsertedParam}
+     * @example
+     * ```ts
+     * univerAPI.addEvent(univerAPI.Event.OverGridImageInserted, (param) => {
+     *   const { workbook, images } = param;
+     *  // do something
+     *  console.log(workbook, images);
+     * })
+     * ```
+     */
+    readonly OverGridImageInserted: 'OverGridImageInserted';
+    /**
+     * Triggered before floating image removal.
+     * Type of the event parameter is {@link IBeforeOverGridImageRemoveParam}
+     * @example
+     * ```ts
+     * univerAPI.addEvent(univerAPI.Event.BeforeOverGridImageRemove, (param) => {
+     *  const { workbook, images } = param;
+     * // do something
+     * console.log(workbook, images);
+     * // Cancel the removal operation
+     * param.cancel = true;
+     * })
+     * ```
+     */
+    readonly BeforeOverGridImageRemove: 'BeforeOverGridImageRemove';
+    /**
+     * Triggered after floating image removal.
+     * Type of the event parameter is {@link IOverGridImageRemovedParam}
+     * @example
+     * ```ts
+     * univerAPI.addEvent(univerAPI.Event.OverGridImageRemoved, (param) => {
+     * const { workbook, removeImageParams } = param;
+     * // do something
+     * console.log(workbook, removeImageParams);
+     * })
+     * ```
+     */
+    readonly OverGridImageRemoved: 'OverGridImageRemoved';
+    /**
+     * Triggered before floating image change.
+     * Type of the event parameter is {@link IBeforeOverGridImageChangeParam}
+     * @example
+     * ```ts
+     * univerAPI.addEvent(univerAPI.Event.BeforeOverGridImageChange, (param) => {
+     *   const { workbook, images } = param;
+     *   // do something
+     *   console.log(workbook, images);
+     *   // Cancel the image change
+     *   param.cancel = true;
+     * })
+     * ```
+     */
+    readonly BeforeOverGridImageChange: 'BeforeOverGridImageChange';
+    /**
+     * Triggered after floating image change.
+     * Type of the event parameter is {@link IOverGridImageChangedParam}
+     * @example
+     * ```ts
+     * univerAPI.addEvent(univerAPI.Event.OverGridImageChanged, (param) => {
+     * const { workbook, images } = param;
+     * // do something
+     * console.log(workbook, images);
+     * })
+     * ```
+     */
+    readonly OverGridImageChanged: 'OverGridImageChanged';
+    /**
+     * Triggered before floating image selection.
+     * Type of the event parameter is {@link IBeforeOverGridImageSelectParam}
+     * @example
+     * ```ts
+     * univerAPI.addEvent(univerAPI.Event.BeforeOverGridImageSelect, (param) => {
+     *   const { workbook, selectedImages, oldSelectedImages } = param;
+     *   // do something
+     *   console.log(workbook, selectedImages, oldSelectedImages);
+     *   // cancel the event
+     *   param.cancel = true;
+     * })
+     * ```
+     */
+    readonly BeforeOverGridImageSelect: 'BeforeOverGridImageSelect';
+    /**
+     * Triggered after floating image selection.
+     * Type of the event parameter is {@link IOverGridImageSelectedParam}
+     * @example
+     * ```ts
+     * univerAPI.addEvent(univerAPI.Event.OverGridImageSelected, (param) => {
+     * const { workbook, selectedImages } = param;
+     * // do something
+     * console.log(workbook, selectedImages);
+     * })
+     * ```
+     */
+    readonly OverGridImageSelected: 'OverGridImageSelected';
+}
+export declare class FDrawingEventNameMixin extends FEventName implements IFDrawingEventNameMixin {
+    get BeforeOverGridImageChange(): 'BeforeOverGridImageChange';
+    get OverGridImageChanged(): 'OverGridImageChanged';
+    get BeforeOverGridImageInsert(): 'BeforeOverGridImageInsert';
+    get OverGridImageInserted(): 'OverGridImageInserted';
+    get BeforeOverGridImageRemove(): 'BeforeOverGridImageRemove';
+    get OverGridImageRemoved(): 'OverGridImageRemoved';
+    get BeforeOverGridImageSelect(): 'BeforeOverGridImageSelect';
+    get OverGridImageSelected(): 'OverGridImageSelected';
+}
+export interface IBeforeOverGridImageChangeParamObject {
+    /**
+     * Parameters of the image to be updated. {@link ISheetImage}
+     */
+    changeParam: Partial<ISheetImage>;
+    /**
+     * Instance of the image to be updated. {@link FOverGridImage}
+     */
+    image: FOverGridImage;
+}
+export interface IBeforeOverGridImageChangeParam extends IEventBase {
+    /**
+     * The workbook instance currently being operated on. {@link FWorkbook}
+     */
+    workbook: FWorkbook;
+    /**
+     * Collection of parameters of the images to be updated, there may be multiple images to be updated. {@link IBeforeOverGridImageChangeParamObject}
+     */
+    images: IBeforeOverGridImageChangeParamObject[];
+}
+export interface IOverGridImageChangedParam extends IEventBase {
+    /**
+     * The workbook instance currently being operated on. {@link FWorkbook}
+     */
+    workbook: FWorkbook;
+    /**
+     * Instances of the images after the update. {@link FOverGridImage}
+     */
+    images: FOverGridImage[];
+}
+export interface IBeforeOverGridImageInsertParam extends IEventBase {
+    /**
+     * The workbook instance currently being operated on. {@link FWorkbook}
+     */
+    workbook: FWorkbook;
+    /**
+     * Collection of parameters of the images to be inserted. {@link ISheetImage}
+     */
+    insertImageParams: ISheetImage[];
+}
+export interface IOverGridImageInsertedParam extends IEventBase {
+    /**
+     * The workbook instance currently being operated on. {@link FWorkbook}
+     */
+    workbook: FWorkbook;
+    /**
+     * Collection of instances of the images after insertion. {@link FOverGridImage}
+     */
+    images: FOverGridImage[];
+}
+export interface IBeforeOverGridImageRemoveParam extends IEventBase {
+    /**
+     * The workbook instance currently being operated on. {@link FWorkbook}
+     */
+    workbook: FWorkbook;
+    /**
+     * Collection of instances of the images to be removed. {@link FOverGridImage}
+     */
+    images: FOverGridImage[];
+}
+export interface IOverGridImageRemovedParam extends IEventBase {
+    /**
+     * The workbook instance currently being operated on. {@link FWorkbook}
+     */
+    workbook: FWorkbook;
+    /**
+     * Collection of parameters of the images after removal. {@link ISheetImage}
+     */
+    removeImageParams: IDrawingSearch[];
+}
+export interface IBeforeOverGridImageSelectParam extends IEventBase {
+    /**
+     * The workbook instance currently being operated on. {@link FWorkbook}
+     */
+    workbook: FWorkbook;
+    /**
+     * The images before selection. {@link FOverGridImage}
+     */
+    oldSelectedImages: FOverGridImage[];
+    selectedImages: FOverGridImage[];
+}
+export interface IOverGridImageSelectedParam extends IEventBase {
+    /**
+     * The workbook instance currently being operated on. {@link FWorkbook}
+     */
+    workbook: FWorkbook;
+    /**
+     * The selected images. {@link FOverGridImage}
+     */
+    selectedImages: FOverGridImage[];
+}
+interface IFSheetsUIEventParamConfig {
+    BeforeOverGridImageChange: IBeforeOverGridImageChangeParam;
+    OverGridImageChanged: IOverGridImageChangedParam;
+    BeforeOverGridImageInsert: IBeforeOverGridImageInsertParam;
+    OverGridImageInserted: IOverGridImageInsertedParam;
+    BeforeOverGridImageRemove: IBeforeOverGridImageRemoveParam;
+    OverGridImageRemoved: IOverGridImageRemovedParam;
+    BeforeOverGridImageSelect: IBeforeOverGridImageSelectParam;
+    OverGridImageSelected: IOverGridImageSelectedParam;
+}
+declare module '@univerjs/core' {
+    interface FEventName extends IFDrawingEventNameMixin {
+    }
+    interface IEventParamConfig extends IFSheetsUIEventParamConfig {
+    }
+}
+export {};

package/lib/types/facade/f-over-grid-image.d.ts

@@ -7,6 +7,27 @@ export declare class FOverGridImageBuilder {
     protected readonly _injector: Injector;
     private _image;
     constructor(unitId: string, subUnitId: string, _injector: Injector);
+    /**
+     * 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(image: ISheetImage): FOverGridImageBuilder;
     /**
      * Set the unit id of the image
@@ -18,7 +39,7 @@ export declare class FOverGridImageBuilder {
      * const activeSpreadsheet = univerAPI.getActiveWorkbook();
      * const activeSheet = activeSpreadsheet.getActiveSheet();
      * const imageBuilder = activeSheet.newOverGridImage();
-     * const param = imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).build();
+     * const param = await imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).buildAsync();
      * activeSheet.insertImages([param]);
      * ```
      */
@@ -26,27 +47,190 @@ export declare class FOverGridImageBuilder {
     setSource(source: string, sourceType?: ImageSourceType): FOverGridImageBuilder;
     getsource(): string;
     getSourceType(): ImageSourceType;
+    /**
+     * 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(column: number): FOverGridImageBuilder;
+    /**
+     * 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(row: number): FOverGridImageBuilder;
+    /**
+     * 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(offset: number): FOverGridImageBuilder;
+    /**
+     * 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(offset: number): FOverGridImageBuilder;
+    /**
+     * 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(width: number): FOverGridImageBuilder;
+    /**
+     * 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(height: number): FOverGridImageBuilder;
+    /**
+     * 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(anchorType: SheetDrawingAnchorType): FOverGridImageBuilder;
+    /**
+     * 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(top: number): FOverGridImageBuilder;
+    /**
+     * 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(left: number): FOverGridImageBuilder;
+    /**
+     * 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(bottom: number): FOverGridImageBuilder;
+    /**
+     * 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(right: number): FOverGridImageBuilder;
     private _initializeSrcRect;
     /**
      * 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(angle: number): FOverGridImageBuilder;
     setUnitId(unitId: string): FOverGridImageBuilder;
     setSubUnitId(subUnitId: string): FOverGridImageBuilder;
-    build(): Promise<ISheetImage>;
+    buildAsync(): Promise<ISheetImage>;
 }
 export declare class FOverGridImage extends FBase {
     private _image;
@@ -63,7 +247,7 @@ export declare class FOverGridImage extends FBase {
      * // 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());
      * ```
      */
@@ -76,10 +260,10 @@ export declare class FOverGridImage extends FBase {
      * // 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(): FOverGridImageBuilder;
@@ -92,14 +276,14 @@ export declare class FOverGridImage extends FBase {
      * // set the source of the image
      * const activeSpreadsheet = univerAPI.getActiveWorkbook();
      * const activeSheet = activeSpreadsheet.getActiveSheet();
-     * const image = activeSheet.getImages[0];
+     * const image = activeSheet.getImages()[0];
      * console.log('Set source state is ', image.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4'));
      */
     setSource(source: string): boolean;
     /**
      * Set the source of the image, change image display.
      * @param source  The source of the image
-     * @param sourceType The source type of the image
+     * @param sourceType The source type of the image, {@link ImageSourceType}
      * @returns success or not
      */
     setSource(source: string, sourceType?: ImageSourceType): boolean;
@@ -113,26 +297,42 @@ export declare class FOverGridImage extends FBase {
      *  // set the position of the image
      * const activeSpreadsheet = univerAPI.getActiveWorkbook();
      * const activeSheet = activeSpreadsheet.getActiveSheet();
-     * const image = activeSheet.getImages[0];
+     * const image = activeSheet.getImages()[0];
      * console.log('Set position state is ', image.setPosition(5, 5));
      * ```
      */
-    setPosition(row: number, column: number): boolean;
+    setPositionAsync(row: number, column: number): Promise<boolean>;
     /**
      *
      * @param column  The sheet start column of the image
      * @param row  The sheet start row of the image
      * @param rowOffset  The offset of the start row
      * @param columnOffset  The offset of the start column
+     * @returns success or not
+     * @example
+     * ```ts
+     * // set the position of the image
+     * const activeSpreadsheet = univerAPI.getActiveWorkbook();
+     * const activeSheet = activeSpreadsheet.getActiveSheet();
+     * const image = activeSheet.getImages()[0];
+     * console.log('Set position state is ', image.setPosition(5, 5, 10, 10));
+     * ```
      */
-    setPosition(row: number, column: number, rowOffset?: number, columnOffset?: number): boolean;
+    setPositionAsync(row: number, column: number, rowOffset?: number, columnOffset?: number): Promise<boolean>;
     /**
      * 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(width: number, height: number): boolean;
+    setSizeAsync(width: number, height: number): Promise<boolean>;
     /**
      * 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.
@@ -145,8 +345,8 @@ export declare class FOverGridImage extends FBase {
      * // 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(top?: number, left?: number, bottom?: number, right?: number): boolean;
@@ -154,6 +354,66 @@ export declare class FOverGridImage extends FBase {
      * 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(angle: number): boolean;
+    /**
+     * 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(): boolean;
+    /**
+     * 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(): boolean;
+    /**
+     * 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(): boolean;
+    /**
+     * 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());
+     * ```
+     */
+    setFront(): boolean;
 }