@univerjs/sheets-drawing-ui 0.6.0 → 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/lib/cjs/facade.js +1 -1
  2. package/lib/cjs/index.js +1 -1
  3. package/lib/es/facade.js +490 -352
  4. package/lib/es/index.js +584 -581
  5. package/lib/types/facade/f-event.d.ts +61 -45
  6. package/lib/types/facade/f-over-grid-image.d.ts +378 -217
  7. package/lib/types/facade/f-worksheet.d.ts +290 -131
  8. package/lib/types/services/canvas-float-dom-manager.service.d.ts +2 -2
  9. package/lib/umd/facade.js +1 -1
  10. package/lib/umd/index.js +1 -1
  11. package/package.json +17 -17
package/lib/types/facade/f-over-grid-image.d.ts CHANGED
@@ -13,222 +13,344 @@ export declare class FOverGridImageBuilder {
13
13
  constructor(unitId: string, subUnitId: string, _injector: Injector);
14
14
  /**
15
15
  * Set the initial image configuration for the image builder.
16
- * @param image The image to be set. {@link ISheetImage}
17
- * @returns The builder. {@link FOverGridImageBuilder}
16
+ * @param {ISheetImage} image - The image configuration
17
+ * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
18
18
  * @example
19
19
  * ```ts
20
- * // create a new image builder.
21
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
22
- * const activeSheet = activeSpreadsheet.getActiveSheet();
23
- * const imageBuilder = activeSheet.newOverGridImage();
24
- * const param = await imageBuilder.setImage({
25
- * drawingId: '123456',
26
- * drawingType: univerAPI.Enum.DrawingType.DRAWING_IMAGE,
27
- * imageSourceType: univerAPI.Enum.ImageSourceType.BASE64,
28
- * source: 'https://avatars.githubusercontent.com/u/61444807?s=48&v=4',
29
- * unitId: activeSpreadsheet.getId(),
30
- * subUnitId: activeSheet.getSheetId(),
31
- * }).setColumn(5).setRow(5).buildAsync();
32
- * activeSheet.insertImages([param]);
20
+ * // create a new image builder and set initial image configuration.
21
+ * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell.
22
+ * const fWorkbook = univerAPI.getActiveWorkbook();
23
+ * const fWorksheet = fWorkbook.getActiveSheet();
24
+ * const image = await fWorksheet.newOverGridImage()
25
+ * .setImage({
26
+ * drawingId: '123456',
27
+ * drawingType: univerAPI.Enum.DrawingType.DRAWING_IMAGE,
28
+ * imageSourceType: univerAPI.Enum.ImageSourceType.BASE64,
29
+ * source: 'https://avatars.githubusercontent.com/u/61444807?s=48&v=4',
30
+ * unitId: fWorkbook.getId(),
31
+ * subUnitId: fWorksheet.getSheetId(),
32
+ * })
33
+ * .setColumn(5)
34
+ * .setRow(5)
35
+ * .buildAsync();
36
+ * fWorksheet.insertImages([image]);
33
37
  * ```
34
38
  */
35
39
  setImage(image: ISheetImage): FOverGridImageBuilder;
36
40
  /**
37
- * Set the unit id of the image
38
- * @param unitId The unit id of the image
39
- * @returns The builder
41
+ * Set the source of the image.
42
+ * @param {string} source - The source of the image
43
+ * @param {ImageSourceType} [sourceType] - The source type of the image, default is URL
44
+ * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
40
45
  * @example
41
46
  * ```ts
42
- * // create a new image builder.
43
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
44
- * const activeSheet = activeSpreadsheet.getActiveSheet();
45
- * const imageBuilder = activeSheet.newOverGridImage();
46
- * const param = await imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).buildAsync();
47
- * activeSheet.insertImages([param]);
47
+ * // create a new image builder and set image source.
48
+ * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell.
49
+ * const fWorkbook = univerAPI.getActiveWorkbook();
50
+ * const fWorksheet = fWorkbook.getActiveSheet();
51
+ * const image = await fWorksheet.newOverGridImage()
52
+ * .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
53
+ * .setColumn(5)
54
+ * .setRow(5)
55
+ * .buildAsync();
56
+ * fWorksheet.insertImages([image]);
48
57
  * ```
49
58
  */
50
59
  setSource(source: string): FOverGridImageBuilder;
51
60
  setSource(source: string, sourceType?: ImageSourceType): FOverGridImageBuilder;
52
- getsource(): string;
61
+ /**
62
+ * Get the source of the image
63
+ * @returns {string} The source of the image
64
+ * @example
65
+ * ```ts
66
+ * const fWorkbook = univerAPI.getActiveWorkbook();
67
+ * const fWorksheet = fWorkbook.getActiveSheet();
68
+ * const images = fWorksheet.getImages();
69
+ * images.forEach((image) => {
70
+ * console.log(image, image.toBuilder().getSource());
71
+ * });
72
+ * ```
73
+ */
74
+ getSource(): string;
75
+ /**
76
+ * Get the source type of the image
77
+ * @returns {ImageSourceType} The source type of the image
78
+ * @example
79
+ * ```ts
80
+ * const fWorkbook = univerAPI.getActiveWorkbook();
81
+ * const fWorksheet = fWorkbook.getActiveSheet();
82
+ * const images = fWorksheet.getImages();
83
+ * images.forEach((image) => {
84
+ * console.log(image, image.toBuilder().getSourceType());
85
+ * });
86
+ * ```
87
+ */
53
88
  getSourceType(): ImageSourceType;
54
89
  /**
55
- * Set the position of the image
56
- * @param column The sheet start column of the image
57
- * @returns The builder. {@link FOverGridImageBuilder}
90
+ * Set the horizontal position of the image
91
+ * @param {number} column - The column index of the image start position
92
+ * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
58
93
  * @example
59
94
  * ```ts
60
- * // create a new image builder.
61
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
62
- * const activeSheet = activeSpreadsheet.getActiveSheet();
63
- * const imageBuilder = activeSheet.newOverGridImage();
64
- * const param = await imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).buildAsync();
65
- * activeSheet.insertImages([param]);
95
+ * // create a new image builder and set image source.
96
+ * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell.
97
+ * const fWorkbook = univerAPI.getActiveWorkbook();
98
+ * const fWorksheet = fWorkbook.getActiveSheet();
99
+ * const image = await fWorksheet.newOverGridImage()
100
+ * .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
101
+ * .setColumn(5)
102
+ * .setRow(5)
103
+ * .buildAsync();
104
+ * fWorksheet.insertImages([image]);
66
105
  * ```
67
106
  */
68
107
  setColumn(column: number): FOverGridImageBuilder;
69
108
  /**
70
- * Set the position of the image
71
- * @param row The sheet start row of the image
72
- * @returns The builder. {@link FOverGridImageBuilder}
109
+ * Set the vertical position of the image
110
+ * @param {number} row - The row index of the image start position
111
+ * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
73
112
  * @example
74
113
  * ```ts
75
- * // create a new image builder.
76
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
77
- * const activeSheet = activeSpreadsheet.getActiveSheet();
78
- * const imageBuilder = activeSheet.newOverGridImage();
79
- * const param = await imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).buildAsync();
80
- * activeSheet.insertImages([param]);
114
+ * // create a new image builder and set image source.
115
+ * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell.
116
+ * const fWorkbook = univerAPI.getActiveWorkbook();
117
+ * const fWorksheet = fWorkbook.getActiveSheet();
118
+ * const image = await fWorksheet.newOverGridImage()
119
+ * .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
120
+ * .setColumn(5)
121
+ * .setRow(5)
122
+ * .buildAsync();
123
+ * fWorksheet.insertImages([image]);
81
124
  * ```
82
125
  */
83
126
  setRow(row: number): FOverGridImageBuilder;
84
127
  /**
85
- * Set the column offset of the image in a unit
86
- * @param offset The offset in pixels
87
- * @returns The builder. {@link FOverGridImageBuilder}
128
+ * Set the horizontal offset of the image
129
+ * @param {number} offset - The column offset of the image start position, pixel unit
130
+ * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
88
131
  * @example
89
132
  * ```ts
90
- * // create a new image builder.
91
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
92
- * const activeSheet = activeSpreadsheet.getActiveSheet();
93
- * const imageBuilder = activeSheet.newOverGridImage();
94
- * const param = await imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).setColumnOffset(10).setRowOffset(10).buildAsync();
95
- * activeSheet.insertImages([param]);
133
+ * // create a new image builder and set image source.
134
+ * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell and horizontal offset is 10px.
135
+ * const fWorkbook = univerAPI.getActiveWorkbook();
136
+ * const fWorksheet = fWorkbook.getActiveSheet();
137
+ * const image = await fWorksheet.newOverGridImage()
138
+ * .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
139
+ * .setColumn(5)
140
+ * .setRow(5)
141
+ * .setColumnOffset(10)
142
+ * .buildAsync();
143
+ * fWorksheet.insertImages([image]);
96
144
  * ```
97
145
  */
98
146
  setColumnOffset(offset: number): FOverGridImageBuilder;
99
147
  /**
100
- * Set the row offset of the image in a unit
101
- * @param offset The offset in pixels
102
- * @returns The builder. {@link FOverGridImageBuilder}
148
+ * Set the vertical offset of the image
149
+ * @param {number} offset - The row offset of the image start position, pixel unit
150
+ * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
103
151
  * @example
104
152
  * ```ts
105
- * // create a new image builder.
106
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
107
- * const activeSheet = activeSpreadsheet.getActiveSheet();
108
- * const imageBuilder = activeSheet.newOverGridImage();
109
- * const param = await imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).setColumnOffset(10).setRowOffset(10).buildAsync();
110
- * activeSheet.insertImages([param]);
153
+ * // create a new image builder and set image source.
154
+ * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell and vertical offset is 10px.
155
+ * const fWorkbook = univerAPI.getActiveWorkbook();
156
+ * const fWorksheet = fWorkbook.getActiveSheet();
157
+ * const image = await fWorksheet.newOverGridImage()
158
+ * .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
159
+ * .setColumn(5)
160
+ * .setRow(5)
161
+ * .setRowOffset(10)
162
+ * .buildAsync();
163
+ * fWorksheet.insertImages([image]);
111
164
  * ```
112
165
  */
113
166
  setRowOffset(offset: number): FOverGridImageBuilder;
114
167
  /**
115
- * set the width of the image
116
- * @param width The width of the image, in pixels
117
- * @returns The builder. {@link FOverGridImageBuilder}
168
+ * Set the width of the image
169
+ * @param {number} width - The width of the image, pixel unit
170
+ * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
118
171
  * @example
119
172
  * ```ts
120
- * // create a new image builder.
121
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
122
- * const activeSheet = activeSpreadsheet.getActiveSheet();
123
- * const imageBuilder = activeSheet.newOverGridImage();
124
- * const param = await imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).setWidth(120).setHeight(50).buildAsync();
125
- * activeSheet.insertImages([param]);
173
+ * // create a new image builder and set image source.
174
+ * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, width is 120px and height is 50px.
175
+ * const fWorkbook = univerAPI.getActiveWorkbook();
176
+ * const fWorksheet = fWorkbook.getActiveSheet();
177
+ * const image = await fWorksheet.newOverGridImage()
178
+ * .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
179
+ * .setColumn(5)
180
+ * .setRow(5)
181
+ * .setWidth(120)
182
+ * .setHeight(50)
183
+ * .buildAsync();
184
+ * fWorksheet.insertImages([image]);
126
185
  * ```
127
186
  */
128
187
  setWidth(width: number): FOverGridImageBuilder;
129
188
  /**
130
189
  * Set the height of the image
131
- * @param height The height of the image, in pixels
132
- * @returns The builder. {@link FOverGridImageBuilder}
190
+ * @param {number} height - The height of the image, pixel unit
191
+ * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
133
192
  * @example
134
193
  * ```ts
135
- * // create a new image builder.
136
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
137
- * const activeSheet = activeSpreadsheet.getActiveSheet();
138
- * const imageBuilder = activeSheet.newOverGridImage();
139
- * const param = await imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).setWidth(120).setHeight(50).buildAsync();
140
- * activeSheet.insertImages([param]);
194
+ * // create a new image builder and set image source.
195
+ * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, width is 120px and height is 50px.
196
+ * const fWorkbook = univerAPI.getActiveWorkbook();
197
+ * const fWorksheet = fWorkbook.getActiveSheet();
198
+ * const image = await fWorksheet.newOverGridImage()
199
+ * .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
200
+ * .setColumn(5)
201
+ * .setRow(5)
202
+ * .setWidth(120)
203
+ * .setHeight(50)
204
+ * .buildAsync();
205
+ * fWorksheet.insertImages([image]);
141
206
  * ```
142
207
  */
143
208
  setHeight(height: number): FOverGridImageBuilder;
144
209
  /**
145
210
  * Set the anchor type of the image, whether the position and size change with the cell
146
- * @param anchorType The anchor type {@link SheetDrawingAnchorType}
147
- * @returns The builder. {@link FOverGridImageBuilder}
211
+ * @param {SheetDrawingAnchorType} anchorType - The anchor type of the image
212
+ * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
148
213
  * @example
149
214
  * ```ts
150
- * // create a new image builder.
151
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
152
- * const activeSheet = activeSpreadsheet.getActiveSheet();
153
- * const imageBuilder = activeSheet.newOverGridImage();
154
- * 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();
155
- * activeSheet.insertImages([param]);
215
+ * const fWorkbook = univerAPI.getActiveWorkbook();
216
+ * const fWorksheet = fWorkbook.getActiveSheet();
217
+ *
218
+ * // image1 position is start from A6 cell, anchor type is Position.
219
+ * // 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.
220
+ * const image1 = await fWorksheet.newOverGridImage()
221
+ * .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
222
+ * .setColumn(0)
223
+ * .setRow(5)
224
+ * .setAnchorType(univerAPI.Enum.SheetDrawingAnchorType.Position)
225
+ * .buildAsync();
226
+ *
227
+ * // image2 position is start from C6 cell, anchor type is Both.
228
+ * // 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.
229
+ * const image2 = await fWorksheet.newOverGridImage()
230
+ * .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
231
+ * .setColumn(2)
232
+ * .setRow(5)
233
+ * .setAnchorType(univerAPI.Enum.SheetDrawingAnchorType.Both)
234
+ * .buildAsync();
235
+ *
236
+ * // image3 position is start from E6 cell, anchor type is None.
237
+ * // 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.
238
+ * const image3 = await fWorksheet.newOverGridImage()
239
+ * .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
240
+ * .setColumn(4)
241
+ * .setRow(5)
242
+ * .setAnchorType(univerAPI.Enum.SheetDrawingAnchorType.None)
243
+ * .buildAsync();
244
+ *
245
+ * // insert images into the sheet
246
+ * fWorksheet.insertImages([image1, image2, image3]);
247
+ *
248
+ * // after 2 seconds, set the row height of the 5th row to 100px and insert a row before the 5th row.
249
+ * // then observe the position and size changes of the images.
250
+ * setTimeout(() => {
251
+ * fWorksheet.setRowHeight(5, 100).insertRowBefore(5);
252
+ * }, 2000);
156
253
  * ```
157
254
  */
158
255
  setAnchorType(anchorType: SheetDrawingAnchorType): FOverGridImageBuilder;
159
256
  /**
160
257
  * Set the cropping region of the image by defining the top edges, thereby displaying the specific part of the image you want.
161
- * @param top The number of pixels to crop from the top of the image.
162
- * @returns The builder. {@link FOverGridImageBuilder}
258
+ * @param {number} top - The number of pixels to crop from the top of the image
259
+ * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
163
260
  * @example
164
261
  * ```ts
165
- * // create a new image builder.
166
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
167
- * const activeSheet = activeSpreadsheet.getActiveSheet();
168
- * const imageBuilder = activeSheet.newOverGridImage();
169
- * 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();
170
- * activeSheet.insertImages([param]);
262
+ * // create a new image builder and set image source.
263
+ * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, top crop is 10px.
264
+ * const fWorkbook = univerAPI.getActiveWorkbook();
265
+ * const fWorksheet = fWorkbook.getActiveSheet();
266
+ * const image = await fWorksheet.newOverGridImage()
267
+ * .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
268
+ * .setColumn(5)
269
+ * .setRow(5)
270
+ * .setCropTop(10)
271
+ * .buildAsync();
272
+ * fWorksheet.insertImages([image]);
171
273
  * ```
172
274
  */
173
275
  setCropTop(top: number): FOverGridImageBuilder;
174
276
  /**
175
277
  * Set the cropping region of the image by defining the left edges, thereby displaying the specific part of the image you want.
176
- * @param left The number of pixels to crop from the left side of the image.
177
- * @returns The builder. {@link FOverGridImageBuilder}
278
+ * @param {number} left - The number of pixels to crop from the left side of the image
279
+ * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
178
280
  * @example
179
281
  * ```ts
180
- * // create a new image builder.
181
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
182
- * const activeSheet = activeSpreadsheet.getActiveSheet();
183
- * const imageBuilder = activeSheet.newOverGridImage();
184
- * 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();
185
- * activeSheet.insertImages([param]);
282
+ * // create a new image builder and set image source.
283
+ * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, left crop is 10px.
284
+ * const fWorkbook = univerAPI.getActiveWorkbook();
285
+ * const fWorksheet = fWorkbook.getActiveSheet();
286
+ * const image = await fWorksheet.newOverGridImage()
287
+ * .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
288
+ * .setColumn(5)
289
+ * .setRow(5)
290
+ * .setCropLeft(10)
291
+ * .buildAsync();
292
+ * fWorksheet.insertImages([image]);
186
293
  * ```
187
294
  */
188
295
  setCropLeft(left: number): FOverGridImageBuilder;
189
296
  /**
190
297
  * Set the cropping region of the image by defining the bottom edges, thereby displaying the specific part of the image you want.
191
- * @param bottom The number of pixels to crop from the bottom of the image.
192
- * @returns The builder. {@link FOverGridImageBuilder}
298
+ * @param {number} bottom - The number of pixels to crop from the bottom of the image
299
+ * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
193
300
  * @example
194
301
  * ```ts
195
- * // create a new image builder.
196
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
197
- * const activeSheet = activeSpreadsheet.getActiveSheet();
198
- * const imageBuilder = activeSheet.newOverGridImage();
199
- * 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();
200
- * activeSheet.insertImages([param]);
302
+ * // create a new image builder and set image source.
303
+ * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, bottom crop is 10px.
304
+ * const fWorkbook = univerAPI.getActiveWorkbook();
305
+ * const fWorksheet = fWorkbook.getActiveSheet();
306
+ * const image = await fWorksheet.newOverGridImage()
307
+ * .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
308
+ * .setColumn(5)
309
+ * .setRow(5)
310
+ * .setCropBottom(10)
311
+ * .buildAsync();
312
+ * fWorksheet.insertImages([image]);
201
313
  * ```
202
314
  */
203
315
  setCropBottom(bottom: number): FOverGridImageBuilder;
204
316
  /**
205
317
  * Set the cropping region of the image by defining the right edges, thereby displaying the specific part of the image you want.
206
- * @param right The number of pixels to crop from the right side of the image.
207
- * @returns The builder. {@link FOverGridImageBuilder}
318
+ * @param {number} right - The number of pixels to crop from the right side of the image
319
+ * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
208
320
  * @example
209
321
  * ```ts
210
- * // create a new image builder.
211
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
212
- * const activeSheet = activeSpreadsheet.getActiveSheet();
213
- * const imageBuilder = activeSheet.newOverGridImage();
214
- * 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();
215
- * activeSheet.insertImages([param]);
322
+ * // create a new image builder and set image source.
323
+ * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, right crop is 10px.
324
+ * const fWorkbook = univerAPI.getActiveWorkbook();
325
+ * const fWorksheet = fWorkbook.getActiveSheet();
326
+ * const image = await fWorksheet.newOverGridImage()
327
+ * .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
328
+ * .setColumn(5)
329
+ * .setRow(5)
330
+ * .setCropRight(10)
331
+ * .buildAsync();
332
+ * fWorksheet.insertImages([image]);
216
333
  * ```
217
334
  */
218
335
  setCropRight(right: number): FOverGridImageBuilder;
219
336
  private _initializeSrcRect;
220
337
  /**
221
338
  * Set the rotation angle of the image
222
- * @param angle Degree of rotation of the image, for example, 90, 180, 270, etc.
223
- * @returns The builder {@link FOverGridImageBuilder}
339
+ * @param {number} angle - Degree of rotation of the image, for example, 90, 180, 270, etc.
340
+ * @returns {FOverGridImageBuilder} The `FOverGridImageBuilder` for chaining
224
341
  * @example
225
342
  * ```ts
226
- * // create a new image builder.
227
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
228
- * const activeSheet = activeSpreadsheet.getActiveSheet();
229
- * const imageBuilder = activeSheet.newOverGridImage();
230
- * const param = await imageBuilder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).setRotate(90).buildAsync();
231
- * activeSheet.insertImages([param]);
343
+ * // create a new image builder and set image source.
344
+ * // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, rotate 90 degrees.
345
+ * const fWorkbook = univerAPI.getActiveWorkbook();
346
+ * const fWorksheet = fWorkbook.getActiveSheet();
347
+ * const image = await fWorksheet.newOverGridImage()
348
+ * .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL)
349
+ * .setColumn(5)
350
+ * .setRow(5)
351
+ * .setRotate(90)
352
+ * .buildAsync();
353
+ * fWorksheet.insertImages([image]);
232
354
  * ```
233
355
  */
234
356
  setRotate(angle: number): FOverGridImageBuilder;
@@ -244,143 +366,182 @@ export declare class FOverGridImage extends FBase {
244
366
  protected readonly _commandService: ICommandService;
245
367
  protected readonly _injector: Injector;
246
368
  constructor(_image: ISheetImage, _commandService: ICommandService, _injector: Injector);
369
+ /**
370
+ * Get the id of the image
371
+ * @returns {string} The id of the image
372
+ * @example
373
+ * ```ts
374
+ * const fWorkbook = univerAPI.getActiveWorkbook();
375
+ * const fWorksheet = fWorkbook.getActiveSheet();
376
+ * const images = fWorksheet.getImages();
377
+ * images.forEach((image) => {
378
+ * console.log(image, image.getId());
379
+ * });
380
+ * ```
381
+ */
247
382
  getId(): string;
383
+ /**
384
+ * Get the drawing type of the image
385
+ * @returns {DrawingTypeEnum} The drawing type of the image
386
+ * @example
387
+ * ```ts
388
+ * const fWorkbook = univerAPI.getActiveWorkbook();
389
+ * const fWorksheet = fWorkbook.getActiveSheet();
390
+ * const images = fWorksheet.getImages();
391
+ * images.forEach((image) => {
392
+ * console.log(image, image.getType());
393
+ * });
394
+ * ```
395
+ */
248
396
  getType(): DrawingTypeEnum;
249
397
  /**
250
398
  * Remove the image from the sheet
251
- * @returns success or not
399
+ * @returns {boolean} true if the image is removed successfully, otherwise false
252
400
  * @example
253
401
  * ```ts
254
- * // remove the image from the sheet
255
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
256
- * const activeSheet = activeSpreadsheet.getActiveSheet();
257
- * const image = activeSheet.getImages()[0];
258
- * console.log('Delete state is ', image?.remove());
402
+ * const fWorkbook = univerAPI.getActiveWorkbook();
403
+ * const fWorksheet = fWorkbook.getActiveSheet();
404
+ * const image = fWorksheet.getImages()[0];
405
+ * const result = image?.remove();
406
+ * console.log(result);
259
407
  * ```
260
408
  */
261
409
  remove(): boolean;
262
410
  /**
263
411
  * Convert the image to a FOverGridImageBuilder
264
- * @returns The builder FOverGridImageBuilder
412
+ * @returns {FOverGridImageBuilder} The builder FOverGridImageBuilder
265
413
  * @example
266
414
  * ```ts
267
- * // convert the image to a builder
268
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
269
- * const activeSheet = activeSpreadsheet.getActiveSheet();
270
- * const image = activeSheet.getImages()[0];
271
- * const builder = image.toBuilder();
272
- * const param = await builder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).buildAsync();
273
- * activeSheet.updateImages([param]);
415
+ * const fWorkbook = univerAPI.getActiveWorkbook();
416
+ * const fWorksheet = fWorkbook.getActiveSheet();
417
+ * const images = fWorksheet.getImages();
418
+ * images.forEach((image) => {
419
+ * console.log(image, image.toBuilder().getSource());
420
+ * });
274
421
  * ```
275
422
  */
276
423
  toBuilder(): FOverGridImageBuilder;
277
424
  /**
278
425
  * Set the source of the image
279
- * @param source The source of the image
280
- * @returns success or not
426
+ * @param {string} source - The source of the image
427
+ * @returns {boolean} true if the source is set successfully, otherwise false
281
428
  * @example
282
429
  * ```ts
283
- * // set the source of the image
284
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
285
- * const activeSheet = activeSpreadsheet.getActiveSheet();
286
- * const image = activeSheet.getImages()[0];
287
- * console.log('Set source state is ', image.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4'));
430
+ * const fWorkbook = univerAPI.getActiveWorkbook();
431
+ * const fWorksheet = fWorkbook.getActiveSheet();
432
+ * const image = fWorksheet.getImages()[0];
433
+ * const result = image?.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4');
434
+ * console.log(result);
435
+ * ```
288
436
  */
289
437
  setSource(source: string): boolean;
290
438
  /**
291
439
  * Set the source of the image, change image display.
292
- * @param source The source of the image
293
- * @param sourceType The source type of the image, {@link ImageSourceType}
294
- * @returns success or not
440
+ * @param {string} source - The source of the image
441
+ * @param {ImageSourceType} [sourceType] - The source type of the image, default is URL
442
+ * @returns {boolean} true if the source is set successfully, otherwise false
443
+ * @example
444
+ * ```ts
445
+ * const fWorkbook = univerAPI.getActiveWorkbook();
446
+ * const fWorksheet = fWorkbook.getActiveSheet();
447
+ * const image = fWorksheet.getImages()[0];
448
+ * const result = image?.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL);
449
+ * console.log(result);
450
+ * ```
295
451
  */
296
452
  setSource(source: string, sourceType?: ImageSourceType): boolean;
297
453
  /**
298
454
  * Set the position of the image
299
- * @param row The sheet start row of the image
300
- * @param column The sheet start column of the image
301
- * @returns success or not
455
+ * @param {number} row - The row index of the image start position
456
+ * @param {number} column - The column index of the image start position
457
+ * @returns {boolean} true if the position is set successfully, otherwise false
302
458
  * @example
303
459
  * ```ts
304
- * // set the position of the image
305
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
306
- * const activeSheet = activeSpreadsheet.getActiveSheet();
307
- * const image = activeSheet.getImages()[0];
308
- * console.log('Set position state is ', image.setPosition(5, 5));
460
+ * // set the position of the image, the start position is F6 cell.
461
+ * const fWorkbook = univerAPI.getActiveWorkbook();
462
+ * const fWorksheet = fWorkbook.getActiveSheet();
463
+ * const image = fWorksheet.getImages()[0];
464
+ * const result = image?.setPositionAsync(5, 5);
465
+ * console.log(result);
309
466
  * ```
310
467
  */
311
468
  setPositionAsync(row: number, column: number): Promise<boolean>;
312
469
  /**
313
- *
314
- * @param column The sheet start column of the image
315
- * @param row The sheet start row of the image
316
- * @param rowOffset The offset of the start row
317
- * @param columnOffset The offset of the start column
318
- * @returns success or not
470
+ * @param {number} row - The row index of the image start position
471
+ * @param {number} column - The column index of the image start position
472
+ * @param {number} rowOffset - The row offset of the image start position, pixel unit
473
+ * @param {number} columnOffset - The column offset of the image start position, pixel unit
474
+ * @returns {boolean} true if the position is set successfully, otherwise false
319
475
  * @example
320
476
  * ```ts
321
- * // set the position of the image
322
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
323
- * const activeSheet = activeSpreadsheet.getActiveSheet();
324
- * const image = activeSheet.getImages()[0];
325
- * console.log('Set position state is ', image.setPosition(5, 5, 10, 10));
477
+ * // set the position of the image, the start position is F6 cell, and the offset is 10px.
478
+ * const fWorkbook = univerAPI.getActiveWorkbook();
479
+ * const fWorksheet = fWorkbook.getActiveSheet();
480
+ * const image = fWorksheet.getImages()[0];
481
+ * const result = image?.setPositionAsync(5, 5, 10, 10);
482
+ * console.log(result);
326
483
  * ```
327
484
  */
328
485
  setPositionAsync(row: number, column: number, rowOffset?: number, columnOffset?: number): Promise<boolean>;
329
486
  /**
330
487
  * Set the size of the image
331
- * @param width The width of the image
332
- * @param height The height of the image
333
- * @returns success or not
488
+ * @param {number} width - The width of the image, pixel unit
489
+ * @param {number} height - The height of the image, pixel unit
490
+ * @returns {boolean} true if the size is set successfully, otherwise false
334
491
  * @example
335
492
  * ```ts
336
- * // set the size of the image
337
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
338
- * const activeSheet = activeSpreadsheet.getActiveSheet();
339
- * const image = activeSheet.getImages()[0];
340
- * console.log('Set size state is ', image.setSize(50, 120));
493
+ * // set the image width 120px and height 50px
494
+ * const fWorkbook = univerAPI.getActiveWorkbook();
495
+ * const fWorksheet = fWorkbook.getActiveSheet();
496
+ * const image = fWorksheet.getImages()[0];
497
+ * const result = image?.setSizeAsync(120, 50);
498
+ * console.log(result);
499
+ * ```
341
500
  */
342
501
  setSizeAsync(width: number, height: number): Promise<boolean>;
343
502
  /**
344
503
  * 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.
345
- * @param top The number of pixels to crop from the top of the image.
346
- * @param left The number of pixels to crop from the left side of the image.
347
- * @param bottom The number of pixels to crop from the bottom of the image.
348
- * @param right The number of pixels to crop from the right side of the image.
349
- * @returns success or not
504
+ * @param {number} top - The number of pixels to crop from the top of the image
505
+ * @param {number} left - The number of pixels to crop from the left side of the image
506
+ * @param {number} bottom - The number of pixels to crop from the bottom of the image
507
+ * @param {number} right - The number of pixels to crop from the right side of the image
508
+ * @returns {boolean} true if the crop is set successfully, otherwise false
350
509
  * @example
351
510
  * ```ts
352
- * // set the crop of the image
353
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
354
- * const activeSheet = activeSpreadsheet.getActiveSheet();
355
- * const image = activeSheet.getImages()[0];
356
- * console.log('Set crop state is ', image.setCrop(10, 10, 10, 10));
511
+ * // set the crop of the image, top 10px, left 10px, bottom 10px, right 10px.
512
+ * const fWorkbook = univerAPI.getActiveWorkbook();
513
+ * const fWorksheet = fWorkbook.getActiveSheet();
514
+ * const image = fWorksheet.getImages()[0];
515
+ * const result = image?.setCrop(10, 10, 10, 10);
516
+ * console.log(result);
357
517
  * ```
358
518
  */
359
519
  setCrop(top?: number, left?: number, bottom?: number, right?: number): boolean;
360
520
  /**
361
521
  * Set the rotation angle of the image
362
- * @param angle Degree of rotation of the image, for example, 90, 180, 270, etc.
363
- * @returns success or not
522
+ * @param {number} angle - Degree of rotation of the image, for example, 90, 180, 270, etc.
523
+ * @returns {boolean} true if the rotation is set successfully, otherwise false
364
524
  * @example
365
525
  * ```ts
366
- * // set the rotation angle of the image
367
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
368
- * const activeSheet = activeSpreadsheet.getActiveSheet();
369
- * const image = activeSheet.getImages()[0];
370
- * console.log('Set rotate state is ', image.setRotate(90));
526
+ * // set 90 degrees rotation of the image
527
+ * const fWorkbook = univerAPI.getActiveWorkbook();
528
+ * const fWorksheet = fWorkbook.getActiveSheet();
529
+ * const image = fWorksheet.getImages()[0];
530
+ * const result = image?.setRotate(90);
531
+ * console.log(result);
371
532
  * ```
372
533
  */
373
534
  setRotate(angle: number): boolean;
374
535
  /**
375
536
  * Move the image layer forward by one level
376
- * @returns success or not
537
+ * @returns {boolean} true if the image is moved forward successfully, otherwise false
377
538
  * @example
378
539
  * ```ts
379
- * // move the image forward
380
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
381
- * const activeSheet = activeSpreadsheet.getActiveSheet();
382
- * const image = activeSheet.getImages()[0];
383
- * console.log('Move forward state is ', image.setForward());
540
+ * const fWorkbook = univerAPI.getActiveWorkbook();
541
+ * const fWorksheet = fWorkbook.getActiveSheet();
542
+ * const image = fWorksheet.getImages()[0];
543
+ * const result = image?.setForward();
544
+ * console.log(result);
384
545
  * ```
385
546
  */
386
547
  setForward(): boolean;
@@ -389,37 +550,37 @@ export declare class FOverGridImage extends FBase {
389
550
  * @returns success or not
390
551
  * @example
391
552
  * ```ts
392
- * // move the image backward
393
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
394
- * const activeSheet = activeSpreadsheet.getActiveSheet();
395
- * const image = activeSheet.getImages()[0];
396
- * console.log('Move backward state is ', image.setBackward());
553
+ * const fWorkbook = univerAPI.getActiveWorkbook();
554
+ * const fWorksheet = fWorkbook.getActiveSheet();
555
+ * const image = fWorksheet.getImages()[0];
556
+ * const result = image?.setBackward();
557
+ * console.log(result);
397
558
  * ```
398
559
  */
399
560
  setBackward(): boolean;
400
561
  /**
401
- * Move the image layer to the back
562
+ * Move the image layer to the bottom layer
402
563
  * @returns success or not
403
564
  * @example
404
565
  * ```ts
405
- * // move the image to the back
406
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
407
- * const activeSheet = activeSpreadsheet.getActiveSheet();
408
- * const image = activeSheet.getImages()[0];
409
- * console.log('Move back state is ', image.setBack());
566
+ * const fWorkbook = univerAPI.getActiveWorkbook();
567
+ * const fWorksheet = fWorkbook.getActiveSheet();
568
+ * const image = fWorksheet.getImages()[0];
569
+ * const result = image?.setBack();
570
+ * console.log(result);
410
571
  * ```
411
572
  */
412
573
  setBack(): boolean;
413
574
  /**
414
- * Move the image layer to the front
575
+ * Move the image layer to the top layer
415
576
  * @returns success or not
416
577
  * @example
417
578
  * ```ts
418
- * // move the image to the front
419
- * const activeSpreadsheet = univerAPI.getActiveWorkbook();
420
- * const activeSheet = activeSpreadsheet.getActiveSheet();
421
- * const image = activeSheet.getImages()[0];
422
- * console.log('Move front state is ', image.setFront());
579
+ * const fWorkbook = univerAPI.getActiveWorkbook();
580
+ * const fWorksheet = fWorkbook.getActiveSheet();
581
+ * const image = fWorksheet.getImages()[0];
582
+ * const result = image?.setFront();
583
+ * console.log(result);
423
584
  * ```
424
585
  */
425
586
  setFront(): boolean;