@univerjs/sheets-drawing 0.20.1 → 0.21.0

package/lib/facade.js

@@ -1 +1,1186 @@
-import{ArrangeTypeEnum as e,CanceledError as t,DrawingTypeEnum as n,ICommandService as r,ImageSourceType as i,Inject as a,Injector as o,generateRandomId as s}from"@univerjs/core";import{FBase as c,FEnum as l,FEventName as u,FUniver as d}from"@univerjs/core/facade";import{IDrawingManagerService as f,SetDrawingSelectedOperation as p,getImageSize as m}from"@univerjs/drawing";import{SheetSkeletonService as h,convertPositionCellToSheetOverGrid as g,convertPositionSheetOverGridToAbsolute as _}from"@univerjs/sheets";import{ISheetDrawingService as v,InsertSheetDrawingCommand as y,RemoveSheetDrawingCommand as b,SetDrawingArrangeCommand as x,SetSheetDrawingCommand as S,SheetDrawingAnchorType as C,transformToAxisAlignPosition as w}from"@univerjs/sheets-drawing";import{FWorksheet as T}from"@univerjs/sheets/facade";function E(e){"@babel/helpers - typeof";return E=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},E(e)}function D(e,t){if(E(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(E(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function O(e){var t=D(e,`string`);return E(t)==`symbol`?t:t+``}function k(e,t,n){return(t=O(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function A(e,t){return function(n,r){t(n,r,e)}}function j(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}function M(e,t){let{from:n,to:r,flipY:i=!1,flipX:a=!1,angle:o=0,skewX:s=0,skewY:c=0}=e.sheetTransform,{column:l,columnOffset:u,row:d,rowOffset:f}=n,{width:p,height:m}=_(e.unitId,e.subUnitId,{from:n,to:r},t);return{...e,column:l,columnOffset:u,row:d,rowOffset:f,width:p,height:m,flipY:i,flipX:a,angle:o,skewX:s,skewY:c}}function N(e,t){let n=t.ensureSkeleton(e.unitId,e.subUnitId);if(!n)throw Error(`Skeleton for unitId ${e.unitId} and subUnitId ${e.subUnitId} not found`);let{column:r,columnOffset:i,row:a,rowOffset:o,flipY:s=!1,flipX:c=!1,angle:l=0,skewX:u=0,skewY:d=0,width:f,height:p}=e,{sheetTransform:m,transform:h}=g(e.unitId,e.subUnitId,{column:r,columnOffset:i,row:a,rowOffset:o},f,p,n);return{...e,sheetTransform:{...m,flipY:s,flipX:c,angle:l,skewX:u,skewY:d},transform:{...h,flipY:s,flipX:c,angle:l,skewX:u,skewY:d},axisAlignSheetTransform:w(h,n)}}let P=class{constructor(e,t,r){this._injector=r,k(this,`_image`,void 0),this._image={drawingId:s(6),drawingType:n.DRAWING_IMAGE,imageSourceType:i.BASE64,source:``,unitId:e,subUnitId:t,column:0,columnOffset:0,row:0,rowOffset:0,width:0,height:0,axisAlignSheetTransform:{from:{column:0,columnOffset:0,row:0,rowOffset:0},to:{column:0,columnOffset:0,row:0,rowOffset:0}}}}setImage(e){let{unitId:t,subUnitId:n}=e,r=this._injector.get(h).getSkeleton(t,n);if(!r)throw Error(`Skeleton for unitId ${t} and subUnitId ${n} not found`);return e.sheetTransform==null&&(e.sheetTransform={from:{column:0,columnOffset:0,row:0,rowOffset:0},to:{column:0,columnOffset:0,row:0,rowOffset:0}}),e.axisAlignSheetTransform==null&&(e.axisAlignSheetTransform={from:{column:0,columnOffset:0,row:0,rowOffset:0},to:{column:0,columnOffset:0,row:0,rowOffset:0}}),this._image=M(e,r),this}setSource(e,t){let n=t==null?i.URL:t;return this._image.source=e,this._image.imageSourceType=n,this}getSource(){return this._image.source}getSourceType(){return this._image.imageSourceType}setColumn(e){return this._image.column=e,this}setRow(e){return this._image.row=e,this}setColumnOffset(e){return this._image.columnOffset=e,this}setRowOffset(e){return this._image.rowOffset=e,this}setWidth(e){return this._image.width=e,this}setHeight(e){return this._image.height=e,this}setAnchorType(e){return this._image.anchorType=e,this}setCropTop(e){return this._initializeSrcRect(),this._image.srcRect.top=e,this}setCropLeft(e){return this._initializeSrcRect(),this._image.srcRect.left=e,this}setCropBottom(e){return this._initializeSrcRect(),this._image.srcRect.bottom=e,this}setCropRight(e){return this._initializeSrcRect(),this._image.srcRect.right=e,this}_initializeSrcRect(){this._image.srcRect==null&&(this._image.srcRect={top:0,left:0,bottom:0,right:0})}setRotate(e){return this._image.angle=e,this}setUnitId(e){return this._image.unitId=e,this}setSubUnitId(e){return this._image.subUnitId=e,this}async buildAsync(){let e=this._injector.get(h);if(this._image.width===0||this._image.height===0){let e=await m(this._image.source),t=e.width,n=e.height;this._image.width===0&&(this._image.width=t),this._image.height===0&&(this._image.height=n)}return N(this._image,e)}};P=j([A(2,a(o))],P);let F=class extends c{constructor(e,t,n){super(),this._image=e,this._commandService=t,this._injector=n}getId(){return this._image.drawingId}getType(){return this._image.drawingType}remove(){return this._commandService.syncExecuteCommand(b.id,{unitId:this._image.unitId,drawings:[this._image]})}toBuilder(){let e=this._injector.createInstance(P);return e.setImage(this._image),e}setSource(e,t){let n=t==null?i.URL:t;return this._image.source=e,this._image.imageSourceType=n,this._commandService.syncExecuteCommand(S.id,{unitId:this._image.unitId,drawings:[this._image]})}async setPositionAsync(e,t,n,r){let i=this.toBuilder();i.setColumn(t),i.setRow(e),n!=null&&i.setRowOffset(n),r!=null&&i.setColumnOffset(r);let a=await i.buildAsync();return this._commandService.syncExecuteCommand(S.id,{unitId:this._image.unitId,drawings:[a]})}async setSizeAsync(e,t){let n=this.toBuilder();n.setWidth(e),n.setHeight(t);let r=await n.buildAsync();return this._commandService.syncExecuteCommand(S.id,{unitId:this._image.unitId,drawings:[r]})}setCrop(e,t,n,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),n!=null&&(this._image.srcRect.bottom=n),r!=null&&(this._image.srcRect.right=r),this._commandService.syncExecuteCommand(S.id,{unitId:this._image.unitId,drawings:[this._image]})}setRotate(e){if(this._image.sheetTransform.angle=e,this._image.transform&&(this._image.transform.angle=e),this._image.transform){let e=this._injector.get(h).getSkeleton(this._image.unitId,this._image.subUnitId);if(!e)throw Error(`Skeleton for unitId ${this._image.unitId} and subUnitId ${this._image.subUnitId} not found`);this._image.axisAlignSheetTransform&&(this._image.axisAlignSheetTransform=w(this._image.transform,e))}return this._commandService.syncExecuteCommand(S.id,{unitId:this._image.unitId,drawings:[this._image]})}setForward(){return this._commandService.syncExecuteCommand(x.id,{unitId:this._image.unitId,subUnitId:this._image.subUnitId,drawingIds:[this._image.drawingId],arrangeType:e.forward})}setBackward(){return this._commandService.syncExecuteCommand(x.id,{unitId:this._image.unitId,subUnitId:this._image.subUnitId,drawingIds:[this._image.drawingId],arrangeType:e.backward})}setBack(){return this._commandService.syncExecuteCommand(x.id,{unitId:this._image.unitId,subUnitId:this._image.subUnitId,drawingIds:[this._image.drawingId],arrangeType:e.back})}setFront(){return this._commandService.syncExecuteCommand(x.id,{unitId:this._image.unitId,subUnitId:this._image.subUnitId,drawingIds:[this._image.drawingId],arrangeType:e.front})}};F=j([A(1,r),A(2,a(o))],F);var I=class extends T{async insertImage(e,t,n,r,a){let o=this.newOverGridImage();if(typeof e==`string`)o.setSource(e);else{let t=await e.getBlob().getDataAsString();o.setSource(t,i.BASE64)}t===void 0?o.setColumn(0):o.setColumn(t),n===void 0?o.setRow(0):o.setRow(n),r===void 0?o.setColumnOffset(0):o.setColumnOffset(r),a===void 0?o.setRowOffset(0):o.setRowOffset(a);let s=await o.buildAsync();return this._commandService.syncExecuteCommand(y.id,{unitId:this._fWorkbook.getId(),drawings:[s]})}insertImages(e){let t=e.map(e=>(e.unitId=this._fWorkbook.getId(),e.subUnitId=this.getSheetId(),e));return this._commandService.syncExecuteCommand(y.id,{unitId:this._fWorkbook.getId(),drawings:t}),this}deleteImages(e){let t=e.map(e=>({unitId:this._fWorkbook.getId(),drawingId:e.getId(),subUnitId:this.getSheetId(),drawingType:e.getType()}));return this._commandService.syncExecuteCommand(b.id,{unitId:this._fWorkbook.getId(),drawings:t}),this}getImages(){let e=this._injector.get(v).getDrawingData(this._fWorkbook.getId(),this.getSheetId()),t=[];for(let r in e){let i=e[r];i.drawingType===n.DRAWING_IMAGE&&t.push(this._injector.createInstance(F,i))}return t}getImageById(e){let t=this._injector.get(v).getDrawingByParam({unitId:this._fWorkbook.getId(),subUnitId:this.getSheetId(),drawingId:e});return t&&t.drawingType===n.DRAWING_IMAGE?this._injector.createInstance(F,t):null}getActiveImages(){let e=this._injector.get(v).getFocusDrawings(),t=[];for(let n in e){let r=e[n];t.push(this._injector.createInstance(F,r))}return t}updateImages(e){return this._commandService.syncExecuteCommand(S.id,{unitId:this._fWorkbook.getId(),drawings:e}),this}newOverGridImage(){let e=this._fWorkbook.getId(),t=this.getSheetId();return this._injector.createInstance(P,e,t)}};T.extend(I);var L=class extends l{get DrawingType(){return n}get ImageSourceType(){return i}get SheetDrawingAnchorType(){return C}};l.extend(L);var R=class extends u{get BeforeFloatDomAdd(){return`BeforeFloatDomAdd`}get FloatDomAdded(){return`FloatDomAdded`}get BeforeFloatDomUpdate(){return`BeforeFloatDomUpdate`}get FloatDomUpdated(){return`FloatDomUpdated`}get BeforeFloatDomDelete(){return`BeforeFloatDomDelete`}get FloatDomDeleted(){return`FloatDomDeleted`}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`}};u.extend(R);var z=class extends d{_initialize(e){let n=e.get(r);this.disposeWithMe(this.registerEventHandler(this.Event.BeforeOverGridImageInsert,()=>n.beforeCommandExecuted(e=>{if(e.id!==y.id)return;let n=e.params,r=this.getActiveWorkbook();if(r==null||n==null)return;let{drawings:i}=n,a={workbook:r,insertImageParams:i};if(this.fireEvent(this.Event.BeforeOverGridImageInsert,a),a.cancel)throw new t}))),this.disposeWithMe(this.registerEventHandler(this.Event.BeforeOverGridImageRemove,()=>n.beforeCommandExecuted(n=>{if(n.id!==b.id)return;let r=n.params,i=this.getActiveWorkbook();if(i==null||r==null)return;let a=e.get(f),{drawings:o}=r,s=o.map(e=>a.getDrawingByParam(e)),c={workbook:i,images:this._createFOverGridImage(s)};if(this.fireEvent(this.Event.BeforeOverGridImageRemove,c),c.cancel)throw new t}))),this.disposeWithMe(this.registerEventHandler(this.Event.BeforeOverGridImageChange,()=>n.beforeCommandExecuted(n=>{if(n.id!==S.id)return;let r=n.params,i=this.getActiveWorkbook();if(i==null||r==null)return;let{drawings:a}=r,o=e.get(f),s=[];a.forEach(e=>{let t=o.getDrawingByParam(e);t!=null&&s.push({changeParam:e,image:this._injector.createInstance(F,t)})});let c={workbook:i,images:s};if(this.fireEvent(this.Event.BeforeOverGridImageChange,c),c.cancel)throw o.updateNotification(a),new t}))),this.disposeWithMe(this.registerEventHandler(this.Event.BeforeOverGridImageSelect,()=>n.beforeCommandExecuted(n=>{if(n.id!==p.id)return;let r=n.params,i=this.getActiveWorkbook();if(i==null)return;let a=e.get(f),o=a.getFocusDrawings(),s=r.map(e=>a.getDrawingByParam(e)),c={workbook:i,selectedImages:this._createFOverGridImage(s),oldSelectedImages:this._createFOverGridImage(o)};if(this.fireEvent(this.Event.BeforeOverGridImageSelect,c),c.cancel)throw new t}))),this.disposeWithMe(this.registerEventHandler(this.Event.OverGridImageInserted,()=>n.onCommandExecuted(e=>{if(e.id!==y.id)return;let t=e.params,n=this.getActiveWorkbook();if(n==null||t==null)return;let{drawings:r}=t,i={workbook:n,images:this._createFOverGridImage(r)};this.fireEvent(this.Event.OverGridImageInserted,i)}))),this.disposeWithMe(this.registerEventHandler(this.Event.OverGridImageRemoved,()=>n.onCommandExecuted(e=>{if(e.id!==b.id)return;let t=e.params,n=this.getActiveWorkbook();if(n==null||t==null)return;let{drawings:r}=t,i={workbook:n,removeImageParams:r};this.fireEvent(this.Event.OverGridImageRemoved,i)}))),this.disposeWithMe(this.registerEventHandler(this.Event.OverGridImageChanged,()=>n.onCommandExecuted(t=>{if(t.id!==S.id)return;let n=t.params,r=this.getActiveWorkbook();if(r==null||n==null)return;let{drawings:i}=n,a=e.get(f),o={workbook:r,images:i.map(e=>this._injector.createInstance(F,a.getDrawingByParam(e)))};this.fireEvent(this.Event.OverGridImageChanged,o)}))),this.disposeWithMe(this.registerEventHandler(this.Event.OverGridImageSelected,()=>n.onCommandExecuted(t=>{if(t.id!==p.id)return;let n=t.params,r=this.getActiveWorkbook();if(r==null)return;let i=e.get(f),a=n.map(e=>i.getDrawingByParam(e)),o={workbook:r,selectedImages:this._createFOverGridImage(a)};this.fireEvent(this.Event.OverGridImageSelected,o)})))}_createFOverGridImage(e){return e.map(e=>this._injector.createInstance(F,e))}};d.extend(z);export{};
+import { ArrangeTypeEnum, CanceledError, DrawingTypeEnum, ICommandService, ImageSourceType, Inject, Injector, generateRandomId } from "@univerjs/core";
+import { FBase, FEnum, FEventName, FUniver } from "@univerjs/core/facade";
+import { IDrawingManagerService, SetDrawingSelectedOperation, getImageSize } from "@univerjs/drawing";
+import { SheetSkeletonService, convertPositionCellToSheetOverGrid, convertPositionSheetOverGridToAbsolute } from "@univerjs/sheets";
+import { ISheetDrawingService, InsertSheetDrawingCommand, RemoveSheetDrawingCommand, SetDrawingArrangeCommand, SetSheetDrawingCommand, SheetDrawingAnchorType, transformToAxisAlignPosition } from "@univerjs/sheets-drawing";
+import { FWorksheet } from "@univerjs/sheets/facade";
+
+//#region \0@oxc-project+runtime@0.124.0/helpers/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/decorateParam.js
+function __decorateParam(paramIndex, decorator) {
+	return function(target, key) {
+		decorator(target, key, paramIndex);
+	};
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+//#endregion
+//#region src/facade/f-over-grid-image.ts
+/**
+* Convert the image parameter to a FOverGridImage
+* @param {ISheetImage} sheetImage The image parameter
+* @param {SpreadsheetSkeleton} skeleton The skeleton of the sheet where the image is located
+* @returns {IFOverGridImage} The FOverGridImage {@link IFOverGridImage}
+*/
+function convertSheetImageToFOverGridImage(sheetImage, skeleton) {
+	const { from, to, flipY = false, flipX = false, angle = 0, skewX = 0, skewY = 0 } = sheetImage.sheetTransform;
+	const { column: fromColumn, columnOffset: fromColumnOffset, row: fromRow, rowOffset: fromRowOffset } = from;
+	const { width, height } = convertPositionSheetOverGridToAbsolute(sheetImage.unitId, sheetImage.subUnitId, {
+		from,
+		to
+	}, skeleton);
+	return {
+		...sheetImage,
+		column: fromColumn,
+		columnOffset: fromColumnOffset,
+		row: fromRow,
+		rowOffset: fromRowOffset,
+		width,
+		height,
+		flipY,
+		flipX,
+		angle,
+		skewX,
+		skewY
+	};
+}
+/**
+* Convert the FOverGridImage to a ISheetImage
+* @param {IFOverGridImage} fOverGridImage The FOverGridImage
+* @param {ISheetSelectionRenderService} selectionRenderService The selection render service
+* @param {SheetSkeletonManagerService} sheetSkeletonManagerService The skeleton manager service
+* @returns {ISheetImage} The ISheetImage {@link ISheetImage}
+*/
+function convertFOverGridImageToSheetImage(fOverGridImage, sheetSkeletonService) {
+	const skeleton = sheetSkeletonService.ensureSkeleton(fOverGridImage.unitId, fOverGridImage.subUnitId);
+	if (!skeleton) throw new Error(`Skeleton for unitId ${fOverGridImage.unitId} and subUnitId ${fOverGridImage.subUnitId} not found`);
+	const { column: fromColumn, columnOffset: fromColumnOffset, row: fromRow, rowOffset: fromRowOffset, flipY = false, flipX = false, angle = 0, skewX = 0, skewY = 0, width, height } = fOverGridImage;
+	const { sheetTransform, transform } = convertPositionCellToSheetOverGrid(fOverGridImage.unitId, fOverGridImage.subUnitId, {
+		column: fromColumn,
+		columnOffset: fromColumnOffset,
+		row: fromRow,
+		rowOffset: fromRowOffset
+	}, width, height, skeleton);
+	return {
+		...fOverGridImage,
+		sheetTransform: {
+			...sheetTransform,
+			flipY,
+			flipX,
+			angle,
+			skewX,
+			skewY
+		},
+		transform: {
+			...transform,
+			flipY,
+			flipX,
+			angle,
+			skewX,
+			skewY
+		},
+		axisAlignSheetTransform: transformToAxisAlignPosition(transform, skeleton)
+	};
+}
+let FOverGridImageBuilder = class FOverGridImageBuilder {
+	constructor(unitId, subUnitId, _injector) {
+		this._injector = _injector;
+		_defineProperty(this, "_image", void 0);
+		this._image = {
+			drawingId: generateRandomId(6),
+			drawingType: DrawingTypeEnum.DRAWING_IMAGE,
+			imageSourceType: ImageSourceType.BASE64,
+			source: "",
+			unitId,
+			subUnitId,
+			column: 0,
+			columnOffset: 0,
+			row: 0,
+			rowOffset: 0,
+			width: 0,
+			height: 0,
+			axisAlignSheetTransform: {
+				from: {
+					column: 0,
+					columnOffset: 0,
+					row: 0,
+					rowOffset: 0
+				},
+				to: {
+					column: 0,
+					columnOffset: 0,
+					row: 0,
+					rowOffset: 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(image) {
+		const { unitId, subUnitId } = image;
+		const skeleton = this._injector.get(SheetSkeletonService).getSkeleton(unitId, subUnitId);
+		if (!skeleton) throw new Error(`Skeleton for unitId ${unitId} and subUnitId ${subUnitId} not found`);
+		if (image.sheetTransform == null) image.sheetTransform = {
+			from: {
+				column: 0,
+				columnOffset: 0,
+				row: 0,
+				rowOffset: 0
+			},
+			to: {
+				column: 0,
+				columnOffset: 0,
+				row: 0,
+				rowOffset: 0
+			}
+		};
+		if (image.axisAlignSheetTransform == null) image.axisAlignSheetTransform = {
+			from: {
+				column: 0,
+				columnOffset: 0,
+				row: 0,
+				rowOffset: 0
+			},
+			to: {
+				column: 0,
+				columnOffset: 0,
+				row: 0,
+				rowOffset: 0
+			}
+		};
+		this._image = convertSheetImageToFOverGridImage(image, skeleton);
+		return this;
+	}
+	setSource(source, sourceType) {
+		const sourceTypeVal = sourceType !== null && sourceType !== void 0 ? sourceType : ImageSourceType.URL;
+		this._image.source = source;
+		this._image.imageSourceType = sourceTypeVal;
+		return 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(column) {
+		this._image.column = column;
+		return 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(row) {
+		this._image.row = row;
+		return 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(offset) {
+		this._image.columnOffset = offset;
+		return 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(offset) {
+		this._image.rowOffset = offset;
+		return 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(width) {
+		this._image.width = width;
+		return 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(height) {
+		this._image.height = height;
+		return 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(anchorType) {
+		this._image.anchorType = anchorType;
+		return 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(top) {
+		this._initializeSrcRect();
+		this._image.srcRect.top = top;
+		return 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(left) {
+		this._initializeSrcRect();
+		this._image.srcRect.left = left;
+		return 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(bottom) {
+		this._initializeSrcRect();
+		this._image.srcRect.bottom = bottom;
+		return 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(right) {
+		this._initializeSrcRect();
+		this._image.srcRect.right = right;
+		return this;
+	}
+	_initializeSrcRect() {
+		if (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(angle) {
+		this._image.angle = angle;
+		return this;
+	}
+	setUnitId(unitId) {
+		this._image.unitId = unitId;
+		return this;
+	}
+	setSubUnitId(subUnitId) {
+		this._image.subUnitId = subUnitId;
+		return this;
+	}
+	async buildAsync() {
+		const sheetSkeletonService = this._injector.get(SheetSkeletonService);
+		if (this._image.width === 0 || this._image.height === 0) {
+			const size = await getImageSize(this._image.source);
+			const width = size.width;
+			const height = size.height;
+			if (this._image.width === 0) this._image.width = width;
+			if (this._image.height === 0) this._image.height = height;
+		}
+		return convertFOverGridImageToSheetImage(this._image, sheetSkeletonService);
+	}
+};
+FOverGridImageBuilder = __decorate([__decorateParam(2, Inject(Injector))], FOverGridImageBuilder);
+let FOverGridImage = class FOverGridImage extends FBase {
+	constructor(_image, _commandService, _injector) {
+		super();
+		this._image = _image;
+		this._commandService = _commandService;
+		this._injector = _injector;
+	}
+	/**
+	* 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(RemoveSheetDrawingCommand.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 builder = this._injector.createInstance(FOverGridImageBuilder);
+		builder.setImage(this._image);
+		return builder;
+	}
+	setSource(source, sourceType) {
+		const sourceTypeVal = sourceType !== null && sourceType !== void 0 ? sourceType : ImageSourceType.URL;
+		this._image.source = source;
+		this._image.imageSourceType = sourceTypeVal;
+		return this._commandService.syncExecuteCommand(SetSheetDrawingCommand.id, {
+			unitId: this._image.unitId,
+			drawings: [this._image]
+		});
+	}
+	async setPositionAsync(row, column, rowOffset, columnOffset) {
+		const builder = this.toBuilder();
+		builder.setColumn(column);
+		builder.setRow(row);
+		if (rowOffset != null) builder.setRowOffset(rowOffset);
+		if (columnOffset != null) builder.setColumnOffset(columnOffset);
+		const param = await builder.buildAsync();
+		return this._commandService.syncExecuteCommand(SetSheetDrawingCommand.id, {
+			unitId: this._image.unitId,
+			drawings: [param]
+		});
+	}
+	/**
+	* 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(width, height) {
+		const builder = this.toBuilder();
+		builder.setWidth(width);
+		builder.setHeight(height);
+		const param = await builder.buildAsync();
+		return this._commandService.syncExecuteCommand(SetSheetDrawingCommand.id, {
+			unitId: this._image.unitId,
+			drawings: [param]
+		});
+	}
+	/**
+	* 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(top, left, bottom, right) {
+		if (this._image.srcRect == null) this._image.srcRect = {
+			top: 0,
+			left: 0,
+			bottom: 0,
+			right: 0
+		};
+		if (top != null) this._image.srcRect.top = top;
+		if (left != null) this._image.srcRect.left = left;
+		if (bottom != null) this._image.srcRect.bottom = bottom;
+		if (right != null) this._image.srcRect.right = right;
+		return this._commandService.syncExecuteCommand(SetSheetDrawingCommand.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(angle) {
+		this._image.sheetTransform.angle = angle;
+		this._image.transform && (this._image.transform.angle = angle);
+		if (this._image.transform) {
+			const skeleton = this._injector.get(SheetSkeletonService).getSkeleton(this._image.unitId, this._image.subUnitId);
+			if (!skeleton) throw new Error(`Skeleton for unitId ${this._image.unitId} and subUnitId ${this._image.subUnitId} not found`);
+			this._image.axisAlignSheetTransform && (this._image.axisAlignSheetTransform = transformToAxisAlignPosition(this._image.transform, skeleton));
+		}
+		return this._commandService.syncExecuteCommand(SetSheetDrawingCommand.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(SetDrawingArrangeCommand.id, {
+			unitId: this._image.unitId,
+			subUnitId: this._image.subUnitId,
+			drawingIds: [this._image.drawingId],
+			arrangeType: ArrangeTypeEnum.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(SetDrawingArrangeCommand.id, {
+			unitId: this._image.unitId,
+			subUnitId: this._image.subUnitId,
+			drawingIds: [this._image.drawingId],
+			arrangeType: ArrangeTypeEnum.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(SetDrawingArrangeCommand.id, {
+			unitId: this._image.unitId,
+			subUnitId: this._image.subUnitId,
+			drawingIds: [this._image.drawingId],
+			arrangeType: ArrangeTypeEnum.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(SetDrawingArrangeCommand.id, {
+			unitId: this._image.unitId,
+			subUnitId: this._image.subUnitId,
+			drawingIds: [this._image.drawingId],
+			arrangeType: ArrangeTypeEnum.front
+		});
+	}
+};
+FOverGridImage = __decorate([__decorateParam(1, ICommandService), __decorateParam(2, Inject(Injector))], FOverGridImage);
+
+//#endregion
+//#region src/facade/f-worksheet.ts
+var FWorksheetDrawingMixin = class extends FWorksheet {
+	async insertImage(url, column, row, offsetX, offsetY) {
+		const imageBuilder = this.newOverGridImage();
+		if (typeof url === "string") imageBuilder.setSource(url);
+		else {
+			const base64 = await url.getBlob().getDataAsString();
+			imageBuilder.setSource(base64, ImageSourceType.BASE64);
+		}
+		if (column !== void 0) imageBuilder.setColumn(column);
+		else imageBuilder.setColumn(0);
+		if (row !== void 0) imageBuilder.setRow(row);
+		else imageBuilder.setRow(0);
+		if (offsetX !== void 0) imageBuilder.setColumnOffset(offsetX);
+		else imageBuilder.setColumnOffset(0);
+		if (offsetY !== void 0) imageBuilder.setRowOffset(offsetY);
+		else imageBuilder.setRowOffset(0);
+		const param = await imageBuilder.buildAsync();
+		return this._commandService.syncExecuteCommand(InsertSheetDrawingCommand.id, {
+			unitId: this._fWorkbook.getId(),
+			drawings: [param]
+		});
+	}
+	insertImages(sheetImages) {
+		const param = sheetImages.map((image) => {
+			image.unitId = this._fWorkbook.getId();
+			image.subUnitId = this.getSheetId();
+			return image;
+		});
+		this._commandService.syncExecuteCommand(InsertSheetDrawingCommand.id, {
+			unitId: this._fWorkbook.getId(),
+			drawings: param
+		});
+		return this;
+	}
+	deleteImages(sheetImages) {
+		const drawings = sheetImages.map((image) => {
+			return {
+				unitId: this._fWorkbook.getId(),
+				drawingId: image.getId(),
+				subUnitId: this.getSheetId(),
+				drawingType: image.getType()
+			};
+		});
+		this._commandService.syncExecuteCommand(RemoveSheetDrawingCommand.id, {
+			unitId: this._fWorkbook.getId(),
+			drawings
+		});
+		return this;
+	}
+	getImages() {
+		const drawingData = this._injector.get(ISheetDrawingService).getDrawingData(this._fWorkbook.getId(), this.getSheetId());
+		const images = [];
+		for (const drawingId in drawingData) {
+			const drawing = drawingData[drawingId];
+			if (drawing.drawingType !== DrawingTypeEnum.DRAWING_IMAGE) continue;
+			images.push(this._injector.createInstance(FOverGridImage, drawing));
+		}
+		return images;
+	}
+	getImageById(id) {
+		const drawing = this._injector.get(ISheetDrawingService).getDrawingByParam({
+			unitId: this._fWorkbook.getId(),
+			subUnitId: this.getSheetId(),
+			drawingId: id
+		});
+		if (drawing && drawing.drawingType === DrawingTypeEnum.DRAWING_IMAGE) return this._injector.createInstance(FOverGridImage, drawing);
+		return null;
+	}
+	getActiveImages() {
+		const drawingData = this._injector.get(ISheetDrawingService).getFocusDrawings();
+		const images = [];
+		for (const drawingId in drawingData) {
+			const drawing = drawingData[drawingId];
+			images.push(this._injector.createInstance(FOverGridImage, drawing));
+		}
+		return images;
+	}
+	updateImages(sheetImages) {
+		this._commandService.syncExecuteCommand(SetSheetDrawingCommand.id, {
+			unitId: this._fWorkbook.getId(),
+			drawings: sheetImages
+		});
+		return this;
+	}
+	newOverGridImage() {
+		const unitId = this._fWorkbook.getId();
+		const subUnitId = this.getSheetId();
+		return this._injector.createInstance(FOverGridImageBuilder, unitId, subUnitId);
+	}
+};
+FWorksheet.extend(FWorksheetDrawingMixin);
+
+//#endregion
+//#region src/facade/f-enum.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+var FSheetsDrawingEnumMixin = class extends FEnum {
+	get DrawingType() {
+		return DrawingTypeEnum;
+	}
+	get ImageSourceType() {
+		return ImageSourceType;
+	}
+	get SheetDrawingAnchorType() {
+		return SheetDrawingAnchorType;
+	}
+};
+FEnum.extend(FSheetsDrawingEnumMixin);
+
+//#endregion
+//#region src/facade/f-event.ts
+var FSheetsDrawingEventNameMixin = class extends FEventName {
+	get BeforeFloatDomAdd() {
+		return "BeforeFloatDomAdd";
+	}
+	get FloatDomAdded() {
+		return "FloatDomAdded";
+	}
+	get BeforeFloatDomUpdate() {
+		return "BeforeFloatDomUpdate";
+	}
+	get FloatDomUpdated() {
+		return "FloatDomUpdated";
+	}
+	get BeforeFloatDomDelete() {
+		return "BeforeFloatDomDelete";
+	}
+	get FloatDomDeleted() {
+		return "FloatDomDeleted";
+	}
+	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";
+	}
+};
+FEventName.extend(FSheetsDrawingEventNameMixin);
+
+//#endregion
+//#region src/facade/f-univer.ts
+/**
+* @ignore
+*/
+var FUniverSheetsDrawingMixin = class extends FUniver {
+	/**
+	* @ignore
+	*/
+	_initialize(injector) {
+		const commandService = injector.get(ICommandService);
+		this.disposeWithMe(this.registerEventHandler(this.Event.BeforeOverGridImageInsert, () => commandService.beforeCommandExecuted((commandInfo) => {
+			if (commandInfo.id !== InsertSheetDrawingCommand.id) return;
+			const params = commandInfo.params;
+			const workbook = this.getActiveWorkbook();
+			if (workbook == null || params == null) return;
+			const { drawings } = params;
+			const eventParams = {
+				workbook,
+				insertImageParams: drawings
+			};
+			this.fireEvent(this.Event.BeforeOverGridImageInsert, eventParams);
+			if (eventParams.cancel) throw new CanceledError();
+		})));
+		this.disposeWithMe(this.registerEventHandler(this.Event.BeforeOverGridImageRemove, () => commandService.beforeCommandExecuted((commandInfo) => {
+			if (commandInfo.id !== RemoveSheetDrawingCommand.id) return;
+			const params = commandInfo.params;
+			const workbook = this.getActiveWorkbook();
+			if (workbook == null || params == null) return;
+			const drawingManagerService = injector.get(IDrawingManagerService);
+			const { drawings } = params;
+			const willRemoveDrawings = drawings.map((drawing) => {
+				return drawingManagerService.getDrawingByParam(drawing);
+			});
+			const eventParams = {
+				workbook,
+				images: this._createFOverGridImage(willRemoveDrawings)
+			};
+			this.fireEvent(this.Event.BeforeOverGridImageRemove, eventParams);
+			if (eventParams.cancel) throw new CanceledError();
+		})));
+		this.disposeWithMe(this.registerEventHandler(this.Event.BeforeOverGridImageChange, () => commandService.beforeCommandExecuted((commandInfo) => {
+			if (commandInfo.id !== SetSheetDrawingCommand.id) return;
+			const params = commandInfo.params;
+			const workbook = this.getActiveWorkbook();
+			if (workbook == null || params == null) return;
+			const { drawings } = params;
+			const drawingManagerService = injector.get(IDrawingManagerService);
+			const images = [];
+			drawings.forEach((drawing) => {
+				const image = drawingManagerService.getDrawingByParam(drawing);
+				if (image == null) return;
+				images.push({
+					changeParam: drawing,
+					image: this._injector.createInstance(FOverGridImage, image)
+				});
+			});
+			const eventParams = {
+				workbook,
+				images
+			};
+			this.fireEvent(this.Event.BeforeOverGridImageChange, eventParams);
+			if (eventParams.cancel) {
+				drawingManagerService.updateNotification(drawings);
+				throw new CanceledError();
+			}
+		})));
+		this.disposeWithMe(this.registerEventHandler(this.Event.BeforeOverGridImageSelect, () => commandService.beforeCommandExecuted((commandInfo) => {
+			if (commandInfo.id !== SetDrawingSelectedOperation.id) return;
+			const drawings = commandInfo.params;
+			const workbook = this.getActiveWorkbook();
+			if (workbook == null) return;
+			const drawingManagerService = injector.get(IDrawingManagerService);
+			const oldSelectedDrawings = drawingManagerService.getFocusDrawings();
+			const selectedDrawings = drawings.map((drawing) => {
+				return drawingManagerService.getDrawingByParam(drawing);
+			});
+			const eventParams = {
+				workbook,
+				selectedImages: this._createFOverGridImage(selectedDrawings),
+				oldSelectedImages: this._createFOverGridImage(oldSelectedDrawings)
+			};
+			this.fireEvent(this.Event.BeforeOverGridImageSelect, eventParams);
+			if (eventParams.cancel) throw new CanceledError();
+		})));
+		this.disposeWithMe(this.registerEventHandler(this.Event.OverGridImageInserted, () => commandService.onCommandExecuted((commandInfo) => {
+			if (commandInfo.id !== InsertSheetDrawingCommand.id) return;
+			const params = commandInfo.params;
+			const workbook = this.getActiveWorkbook();
+			if (workbook == null || params == null) return;
+			const { drawings } = params;
+			const eventParams = {
+				workbook,
+				images: this._createFOverGridImage(drawings)
+			};
+			this.fireEvent(this.Event.OverGridImageInserted, eventParams);
+		})));
+		this.disposeWithMe(this.registerEventHandler(this.Event.OverGridImageRemoved, () => commandService.onCommandExecuted((commandInfo) => {
+			if (commandInfo.id !== RemoveSheetDrawingCommand.id) return;
+			const params = commandInfo.params;
+			const workbook = this.getActiveWorkbook();
+			if (workbook == null || params == null) return;
+			const { drawings } = params;
+			const eventParams = {
+				workbook,
+				removeImageParams: drawings
+			};
+			this.fireEvent(this.Event.OverGridImageRemoved, eventParams);
+		})));
+		this.disposeWithMe(this.registerEventHandler(this.Event.OverGridImageChanged, () => commandService.onCommandExecuted((commandInfo) => {
+			if (commandInfo.id !== SetSheetDrawingCommand.id) return;
+			const params = commandInfo.params;
+			const workbook = this.getActiveWorkbook();
+			if (workbook == null || params == null) return;
+			const { drawings } = params;
+			const drawingManagerService = injector.get(IDrawingManagerService);
+			const eventParams = {
+				workbook,
+				images: drawings.map((drawing) => {
+					return this._injector.createInstance(FOverGridImage, drawingManagerService.getDrawingByParam(drawing));
+				})
+			};
+			this.fireEvent(this.Event.OverGridImageChanged, eventParams);
+		})));
+		this.disposeWithMe(this.registerEventHandler(this.Event.OverGridImageSelected, () => commandService.onCommandExecuted((commandInfo) => {
+			if (commandInfo.id !== SetDrawingSelectedOperation.id) return;
+			const drawings = commandInfo.params;
+			const workbook = this.getActiveWorkbook();
+			if (workbook == null) return;
+			const drawingManagerService = injector.get(IDrawingManagerService);
+			const selectedDrawings = drawings.map((drawing) => {
+				return drawingManagerService.getDrawingByParam(drawing);
+			});
+			const eventParams = {
+				workbook,
+				selectedImages: this._createFOverGridImage(selectedDrawings)
+			};
+			this.fireEvent(this.Event.OverGridImageSelected, eventParams);
+		})));
+	}
+	_createFOverGridImage(drawings) {
+		return drawings.map((drawing) => {
+			return this._injector.createInstance(FOverGridImage, drawing);
+		});
+	}
+};
+FUniver.extend(FUniverSheetsDrawingMixin);
+
+//#endregion
+export {  };