@univerjs/sheets-drawing-ui 0.5.1-nightly.202412180944 → 0.5.1-nightly.202412181606
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.
- package/lib/cjs/facade.js +1 -1
- package/lib/cjs/index.js +2 -2
- package/lib/es/facade.js +366 -11
- package/lib/es/index.js +552 -561
- package/lib/types/facade/f-over-grid-image.d.ts +159 -0
- package/lib/types/facade/f-worksheet.d.ts +100 -2
- package/lib/types/facade/index.d.ts +2 -0
- package/lib/umd/facade.js +1 -1
- package/lib/umd/index.js +2 -2
- package/package.json +12 -12
package/lib/es/facade.js
CHANGED
|
@@ -1,16 +1,371 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import {
|
|
5
|
-
|
|
1
|
+
var E = Object.defineProperty;
|
|
2
|
+
var P = (e, t, i) => t in e ? E(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
|
|
3
|
+
var R = (e, t, i) => P(e, typeof t != "symbol" ? t + "" : t, i);
|
|
4
|
+
import { Inject as O, Injector as k, ICommandService as U, generateRandomId as W, DrawingTypeEnum as x, ImageSourceType as _, FBase as F } from "@univerjs/core";
|
|
5
|
+
import { getImageSize as M } from "@univerjs/drawing";
|
|
6
|
+
import { IRenderManagerService as C } from "@univerjs/engine-render";
|
|
7
|
+
import { SetSheetDrawingCommand as h, SheetCanvasFloatDomManagerService as z, InsertSheetDrawingCommand as D, RemoveSheetDrawingCommand as A } from "@univerjs/sheets-drawing-ui";
|
|
8
|
+
import { SheetSkeletonManagerService as y, ISheetSelectionRenderService as G, convertPositionSheetOverGridToAbsolute as $, convertPositionCellToSheetOverGrid as L } from "@univerjs/sheets-ui";
|
|
9
|
+
import { ISheetDrawingService as g } from "@univerjs/sheets-drawing";
|
|
10
|
+
import { transformComponentKey as X } from "@univerjs/sheets-ui/facade";
|
|
11
|
+
import { FWorksheet as j } from "@univerjs/sheets/facade";
|
|
12
|
+
import { ComponentManager as Y } from "@univerjs/ui";
|
|
13
|
+
var H = Object.defineProperty, K = Object.getOwnPropertyDescriptor, T = (e, t, i, s) => {
|
|
14
|
+
for (var n = s > 1 ? void 0 : s ? K(t, i) : t, o = e.length - 1, r; o >= 0; o--)
|
|
15
|
+
(r = e[o]) && (n = (s ? r(t, i, n) : r(n)) || n);
|
|
16
|
+
return s && n && H(t, i, n), n;
|
|
17
|
+
}, v = (e, t) => (i, s) => t(i, s, e);
|
|
18
|
+
function V(e, t) {
|
|
19
|
+
const { from: i, to: s, flipY: n = !1, flipX: o = !1, angle: r = 0, skewX: m = 0, skewY: a = 0 } = e.sheetTransform, { column: d, columnOffset: u, row: f, rowOffset: I } = i, w = $(
|
|
20
|
+
e.unitId,
|
|
21
|
+
e.subUnitId,
|
|
22
|
+
{ from: i, to: s },
|
|
23
|
+
t
|
|
24
|
+
), { left: p, top: b, width: S, height: B } = w;
|
|
25
|
+
return {
|
|
26
|
+
...e,
|
|
27
|
+
column: d,
|
|
28
|
+
columnOffset: u,
|
|
29
|
+
row: f,
|
|
30
|
+
rowOffset: I,
|
|
31
|
+
width: S,
|
|
32
|
+
height: B,
|
|
33
|
+
flipY: n,
|
|
34
|
+
flipX: o,
|
|
35
|
+
angle: r,
|
|
36
|
+
skewX: m,
|
|
37
|
+
skewY: a
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
function N(e, t, i) {
|
|
41
|
+
const { column: s, columnOffset: n, row: o, rowOffset: r, flipY: m = !1, flipX: a = !1, angle: d = 0, skewX: u = 0, skewY: f = 0, width: I, height: w } = e, p = L(
|
|
42
|
+
e.unitId,
|
|
43
|
+
e.subUnitId,
|
|
44
|
+
{ column: s, columnOffset: n, row: o, rowOffset: r },
|
|
45
|
+
I,
|
|
46
|
+
w,
|
|
47
|
+
t,
|
|
48
|
+
i
|
|
49
|
+
), { sheetTransform: b, transform: S } = p;
|
|
50
|
+
return {
|
|
51
|
+
...e,
|
|
52
|
+
sheetTransform: {
|
|
53
|
+
...b,
|
|
54
|
+
flipY: m,
|
|
55
|
+
flipX: a,
|
|
56
|
+
angle: d,
|
|
57
|
+
skewX: u,
|
|
58
|
+
skewY: f
|
|
59
|
+
},
|
|
60
|
+
transform: {
|
|
61
|
+
...S,
|
|
62
|
+
flipY: m,
|
|
63
|
+
flipX: a,
|
|
64
|
+
angle: d,
|
|
65
|
+
skewX: u,
|
|
66
|
+
skewY: f
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
let l = class {
|
|
71
|
+
constructor(e, t, i) {
|
|
72
|
+
R(this, "_image");
|
|
73
|
+
this._injector = i, this._image = {
|
|
74
|
+
drawingId: W(6),
|
|
75
|
+
drawingType: x.DRAWING_IMAGE,
|
|
76
|
+
imageSourceType: _.BASE64,
|
|
77
|
+
source: "",
|
|
78
|
+
unitId: e,
|
|
79
|
+
subUnitId: t,
|
|
80
|
+
column: 0,
|
|
81
|
+
columnOffset: 0,
|
|
82
|
+
row: 0,
|
|
83
|
+
rowOffset: 0,
|
|
84
|
+
width: 0,
|
|
85
|
+
height: 0
|
|
86
|
+
};
|
|
87
|
+
}
|
|
88
|
+
setImage(e) {
|
|
89
|
+
const i = this._injector.get(C).getRenderById(e.unitId);
|
|
90
|
+
if (!i)
|
|
91
|
+
throw new Error(`Render Unit with unitId ${e.unitId} not found`);
|
|
92
|
+
const s = i.with(y);
|
|
93
|
+
return this._image = V(e, s), this;
|
|
94
|
+
}
|
|
95
|
+
setSource(e, t) {
|
|
96
|
+
const i = t != null ? t : _.URL;
|
|
97
|
+
return this._image.source = e, this._image.imageSourceType = i, this;
|
|
98
|
+
}
|
|
99
|
+
getsource() {
|
|
100
|
+
return this._image.source;
|
|
101
|
+
}
|
|
102
|
+
getSourceType() {
|
|
103
|
+
return this._image.imageSourceType;
|
|
104
|
+
}
|
|
105
|
+
setColumn(e) {
|
|
106
|
+
return this._image.column = e, this;
|
|
107
|
+
}
|
|
108
|
+
setRow(e) {
|
|
109
|
+
return this._image.row = e, this;
|
|
110
|
+
}
|
|
111
|
+
setColumnOffset(e) {
|
|
112
|
+
return this._image.columnOffset = e, this;
|
|
113
|
+
}
|
|
114
|
+
setRowOffset(e) {
|
|
115
|
+
return this._image.rowOffset = e, this;
|
|
116
|
+
}
|
|
117
|
+
setWidth(e) {
|
|
118
|
+
return this._image.width = e, this;
|
|
119
|
+
}
|
|
120
|
+
setHeight(e) {
|
|
121
|
+
return this._image.height = e, this;
|
|
122
|
+
}
|
|
123
|
+
setAnchorType(e) {
|
|
124
|
+
return this._image.anchorType = e, this;
|
|
125
|
+
}
|
|
126
|
+
setCropTop(e) {
|
|
127
|
+
return this._initializeSrcRect(), this._image.srcRect.top = e, this;
|
|
128
|
+
}
|
|
129
|
+
setCropLeft(e) {
|
|
130
|
+
return this._initializeSrcRect(), this._image.srcRect.left = e, this;
|
|
131
|
+
}
|
|
132
|
+
setCropBottom(e) {
|
|
133
|
+
return this._initializeSrcRect(), this._image.srcRect.bottom = e, this;
|
|
134
|
+
}
|
|
135
|
+
setCropRight(e) {
|
|
136
|
+
return this._initializeSrcRect(), this._image.srcRect.right = e, this;
|
|
137
|
+
}
|
|
138
|
+
_initializeSrcRect() {
|
|
139
|
+
this._image.srcRect == null && (this._image.srcRect = {
|
|
140
|
+
top: 0,
|
|
141
|
+
left: 0,
|
|
142
|
+
bottom: 0,
|
|
143
|
+
right: 0
|
|
144
|
+
});
|
|
145
|
+
}
|
|
146
|
+
/**
|
|
147
|
+
* Set the rotation angle of the image
|
|
148
|
+
* @param angle Degree of rotation of the image, for example, 90, 180, 270, etc.
|
|
149
|
+
* @returns The builder
|
|
150
|
+
*/
|
|
151
|
+
setRotate(e) {
|
|
152
|
+
return this._image.angle = e, this;
|
|
153
|
+
}
|
|
154
|
+
// setPresetGeometry(prstGeom: PresetGeometryType): FOverGridImageBuilder {
|
|
155
|
+
// this._image.prstGeom = prstGeom;
|
|
156
|
+
// return this;
|
|
157
|
+
// }
|
|
158
|
+
setUnitId(e) {
|
|
159
|
+
return this._image.unitId = e, this;
|
|
160
|
+
}
|
|
161
|
+
setSubUnitId(e) {
|
|
162
|
+
return this._image.subUnitId = e, this;
|
|
163
|
+
}
|
|
164
|
+
async build() {
|
|
165
|
+
const t = this._injector.get(C).getRenderById(this._image.unitId);
|
|
166
|
+
if (!t)
|
|
167
|
+
throw new Error(`Render Unit with unitId ${this._image.unitId} not found`);
|
|
168
|
+
const i = t.with(G), s = t.with(y);
|
|
169
|
+
if (this._image.width === 0 || this._image.height === 0) {
|
|
170
|
+
const n = await M(this._image.source), o = n.width, r = n.height;
|
|
171
|
+
this._image.width === 0 && (this._image.width = o), this._image.height === 0 && (this._image.height = r);
|
|
172
|
+
}
|
|
173
|
+
return N(this._image, i, s);
|
|
174
|
+
}
|
|
175
|
+
};
|
|
176
|
+
l = T([
|
|
177
|
+
v(2, O(k))
|
|
178
|
+
], l);
|
|
179
|
+
let c = class extends F {
|
|
180
|
+
constructor(e, t, i) {
|
|
181
|
+
super(), this._image = e, this._commandService = t, this._injector = i;
|
|
182
|
+
}
|
|
183
|
+
getId() {
|
|
184
|
+
return this._image.drawingId;
|
|
185
|
+
}
|
|
186
|
+
getType() {
|
|
187
|
+
return this._image.drawingType;
|
|
188
|
+
}
|
|
189
|
+
/**
|
|
190
|
+
* Remove the image from the sheet
|
|
191
|
+
* @returns success or not
|
|
192
|
+
* @example
|
|
193
|
+
* ```ts
|
|
194
|
+
* // remove the image from the sheet
|
|
195
|
+
* const activeSpreadsheet = univerAPI.getActiveWorkbook();
|
|
196
|
+
* const activeSheet = activeSpreadsheet.getActiveSheet();
|
|
197
|
+
* const image = activeSheet.getImages[0];
|
|
198
|
+
* console.log('Delete state is ', image?.remove());
|
|
199
|
+
* ```
|
|
200
|
+
*/
|
|
201
|
+
remove() {
|
|
202
|
+
return this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [this._image] });
|
|
203
|
+
}
|
|
204
|
+
/**
|
|
205
|
+
* Convert the image to a FOverGridImageBuilder
|
|
206
|
+
* @returns The builder FOverGridImageBuilder
|
|
207
|
+
* @example
|
|
208
|
+
* ```ts
|
|
209
|
+
* // convert the image to a builder
|
|
210
|
+
* const activeSpreadsheet = univerAPI.getActiveWorkbook();
|
|
211
|
+
* const activeSheet = activeSpreadsheet.getActiveSheet();
|
|
212
|
+
* const image = activeSheet.getImages[0];
|
|
213
|
+
* const builder = image.toBuilder();
|
|
214
|
+
* builder.setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4').setColumn(5).setRow(5).build();
|
|
215
|
+
* activeSheet.updateImages([builder.build()]);
|
|
216
|
+
* ```
|
|
217
|
+
*/
|
|
218
|
+
toBuilder() {
|
|
219
|
+
const e = this._injector.createInstance(l);
|
|
220
|
+
return e.setImage(this._image), e;
|
|
221
|
+
}
|
|
222
|
+
setSource(e, t) {
|
|
223
|
+
const i = t != null ? t : _.URL;
|
|
224
|
+
return this._image.source = e, this._image.imageSourceType = i, this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [this._image] });
|
|
225
|
+
}
|
|
226
|
+
setPosition(e, t, i, s) {
|
|
227
|
+
const n = this.toBuilder();
|
|
228
|
+
return n.setColumn(t), n.setRow(e), i != null && n.setRowOffset(i), s != null && n.setColumnOffset(s), this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [n.build()] });
|
|
229
|
+
}
|
|
230
|
+
/**
|
|
231
|
+
* Set the size of the image
|
|
232
|
+
* @param width The width of the image
|
|
233
|
+
* @param height The height of the image
|
|
234
|
+
* @returns success or not
|
|
235
|
+
*/
|
|
236
|
+
setSize(e, t) {
|
|
237
|
+
const i = this.toBuilder();
|
|
238
|
+
return i.setWidth(e), i.setHeight(t), this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [i.build()] });
|
|
239
|
+
}
|
|
240
|
+
/**
|
|
241
|
+
* 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.
|
|
242
|
+
* @param top The number of pixels to crop from the top of the image.
|
|
243
|
+
* @param left The number of pixels to crop from the left side of the image.
|
|
244
|
+
* @param bottom The number of pixels to crop from the bottom of the image.
|
|
245
|
+
* @param right The number of pixels to crop from the right side of the image.
|
|
246
|
+
* @returns success or not
|
|
247
|
+
* @example
|
|
248
|
+
* ```ts
|
|
249
|
+
* // set the crop of the image
|
|
250
|
+
* const activeSpreadsheet = univerAPI.getActiveWorkbook();
|
|
251
|
+
* const activeSheet = activeSpreadsheet.getActiveSheet();
|
|
252
|
+
* const image = activeSheet.getImages[0];
|
|
253
|
+
* console.log('Set crop state is ', image.setCrop(0, 0, 0, 0));
|
|
254
|
+
* ```
|
|
255
|
+
*/
|
|
256
|
+
setCrop(e, t, i, s) {
|
|
257
|
+
return this._image.srcRect == null && (this._image.srcRect = {
|
|
258
|
+
top: 0,
|
|
259
|
+
left: 0,
|
|
260
|
+
bottom: 0,
|
|
261
|
+
right: 0
|
|
262
|
+
}), e != null && (this._image.srcRect.top = e), t != null && (this._image.srcRect.left = t), i != null && (this._image.srcRect.bottom = i), s != null && (this._image.srcRect.right = s), this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [this._image] });
|
|
263
|
+
}
|
|
264
|
+
// setPresetGeometry(prstGeom: PresetGeometryType): boolean {
|
|
265
|
+
// this._image.prstGeom = prstGeom;
|
|
266
|
+
// return this._commandService.syncExecuteCommand(SetSheetDrawingCommand.id, { unitId: this._image.unitId, drawings: [this._image] });
|
|
267
|
+
// }
|
|
268
|
+
/**
|
|
269
|
+
* Set the rotation angle of the image
|
|
270
|
+
* @param angle Degree of rotation of the image, for example, 90, 180, 270, etc.
|
|
271
|
+
* @returns success or not
|
|
272
|
+
*/
|
|
273
|
+
setRotate(e) {
|
|
274
|
+
return this._image.sheetTransform.angle = e, this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [this._image] });
|
|
275
|
+
}
|
|
276
|
+
};
|
|
277
|
+
c = T([
|
|
278
|
+
v(1, U),
|
|
279
|
+
v(2, O(k))
|
|
280
|
+
], c);
|
|
281
|
+
class q extends j {
|
|
6
282
|
addFloatDomToPosition(t, i) {
|
|
7
|
-
const
|
|
8
|
-
return
|
|
9
|
-
id:
|
|
283
|
+
const s = this._workbook.getUnitId(), n = this._worksheet.getSheetId(), { key: o, disposableCollection: r } = X(t, this._injector.get(Y)), a = this._injector.get(z).addFloatDomToPosition({ ...t, componentKey: o, unitId: s, subUnitId: n }, i);
|
|
284
|
+
return a ? (r.add(a.dispose), {
|
|
285
|
+
id: a.id,
|
|
10
286
|
dispose: () => {
|
|
11
|
-
|
|
287
|
+
r.dispose(), a.dispose();
|
|
12
288
|
}
|
|
13
|
-
}) : (
|
|
289
|
+
}) : (r.dispose(), null);
|
|
290
|
+
}
|
|
291
|
+
async insertImage(t, i, s, n, o) {
|
|
292
|
+
const r = this.newOverGridImage();
|
|
293
|
+
if (typeof t == "string")
|
|
294
|
+
r.setSource(t);
|
|
295
|
+
else {
|
|
296
|
+
const d = await t.getBlob().getDataAsString();
|
|
297
|
+
r.setSource(d, _.BASE64);
|
|
298
|
+
}
|
|
299
|
+
i !== void 0 ? r.setColumn(i) : r.setColumn(0), s !== void 0 ? r.setRow(s) : r.setRow(0), n !== void 0 ? r.setColumnOffset(n) : r.setColumnOffset(0), o !== void 0 ? r.setRowOffset(o) : r.setRowOffset(0);
|
|
300
|
+
const m = await r.build();
|
|
301
|
+
return this._commandService.syncExecuteCommand(D.id, { unitId: this._fWorkbook.getId(), drawings: [m] });
|
|
302
|
+
}
|
|
303
|
+
insertImages(t) {
|
|
304
|
+
const i = t.map((s) => (s.unitId = this._fWorkbook.getId(), s.subUnitId = this.getSheetId(), s));
|
|
305
|
+
this._commandService.syncExecuteCommand(D.id, { unitId: this._fWorkbook.getId(), drawings: i });
|
|
306
|
+
}
|
|
307
|
+
deleteImages(t) {
|
|
308
|
+
const i = t.map((s) => ({
|
|
309
|
+
unitId: this._fWorkbook.getId(),
|
|
310
|
+
drawingId: s.getId(),
|
|
311
|
+
subUnitId: this.getSheetId(),
|
|
312
|
+
drawingType: s.getType()
|
|
313
|
+
}));
|
|
314
|
+
this._commandService.syncExecuteCommand(A.id, { unitId: this._fWorkbook.getId(), drawings: i });
|
|
315
|
+
}
|
|
316
|
+
getImages() {
|
|
317
|
+
const i = this._injector.get(g).getDrawingData(this._fWorkbook.getId(), this.getSheetId()), s = [];
|
|
318
|
+
for (const n in i) {
|
|
319
|
+
const o = i[n];
|
|
320
|
+
s.push(this._injector.createInstance(c, o));
|
|
321
|
+
}
|
|
322
|
+
return s;
|
|
323
|
+
}
|
|
324
|
+
getImageById(t) {
|
|
325
|
+
const s = this._injector.get(g).getDrawingByParam({ unitId: this._fWorkbook.getId(), subUnitId: this.getSheetId(), drawingId: t });
|
|
326
|
+
return s ? this._injector.createInstance(c, s) : null;
|
|
327
|
+
}
|
|
328
|
+
getActiveImages() {
|
|
329
|
+
const i = this._injector.get(g).getFocusDrawings(), s = [];
|
|
330
|
+
for (const n in i) {
|
|
331
|
+
const o = i[n];
|
|
332
|
+
s.push(this._injector.createInstance(c, o));
|
|
333
|
+
}
|
|
334
|
+
return s;
|
|
335
|
+
}
|
|
336
|
+
updateImages(t) {
|
|
337
|
+
this._commandService.syncExecuteCommand(h.id, { unitId: this._fWorkbook.getId(), drawings: t });
|
|
338
|
+
}
|
|
339
|
+
onImageInserted(t) {
|
|
340
|
+
const i = this._injector.get(g);
|
|
341
|
+
i.add$.subscribe((s) => {
|
|
342
|
+
const n = s.map(
|
|
343
|
+
(o) => this._injector.createInstance(c, i.getDrawingByParam(o))
|
|
344
|
+
);
|
|
345
|
+
t(n);
|
|
346
|
+
});
|
|
347
|
+
}
|
|
348
|
+
onImageDeleted(t) {
|
|
349
|
+
const i = this._injector.get(g);
|
|
350
|
+
i.remove$.subscribe((s) => {
|
|
351
|
+
const n = s.map(
|
|
352
|
+
(o) => this._injector.createInstance(c, i.getDrawingByParam(o))
|
|
353
|
+
);
|
|
354
|
+
t(n);
|
|
355
|
+
});
|
|
356
|
+
}
|
|
357
|
+
onImageChanged(t) {
|
|
358
|
+
const i = this._injector.get(g);
|
|
359
|
+
i.update$.subscribe((s) => {
|
|
360
|
+
const n = s.map(
|
|
361
|
+
(o) => this._injector.createInstance(c, i.getDrawingByParam(o))
|
|
362
|
+
);
|
|
363
|
+
t(n);
|
|
364
|
+
});
|
|
365
|
+
}
|
|
366
|
+
newOverGridImage() {
|
|
367
|
+
const t = this._fWorkbook.getId(), i = this.getSheetId();
|
|
368
|
+
return this._injector.createInstance(l, t, i);
|
|
14
369
|
}
|
|
15
370
|
}
|
|
16
|
-
|
|
371
|
+
j.extend(q);
|