@anu3ev/fabric-image-editor 0.1.44 → 0.1.46
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/dist/main.js +956 -1115
- package/package.json +2 -1
package/dist/main.js
CHANGED
|
@@ -1,44 +1,45 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
var
|
|
1
|
+
var fe = Object.defineProperty;
|
|
2
|
+
var _ = Object.getOwnPropertySymbols;
|
|
3
|
+
var re = Object.prototype.hasOwnProperty, ce = Object.prototype.propertyIsEnumerable;
|
|
4
|
+
var oe = (r, e, t) => e in r ? fe(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, N = (r, e) => {
|
|
5
5
|
for (var t in e || (e = {}))
|
|
6
|
-
|
|
7
|
-
if (
|
|
8
|
-
for (var t of
|
|
9
|
-
|
|
10
|
-
return
|
|
6
|
+
re.call(e, t) && oe(r, t, e[t]);
|
|
7
|
+
if (_)
|
|
8
|
+
for (var t of _(e))
|
|
9
|
+
ce.call(e, t) && oe(r, t, e[t]);
|
|
10
|
+
return r;
|
|
11
11
|
};
|
|
12
|
-
var
|
|
12
|
+
var Y = (r, e) => {
|
|
13
13
|
var t = {};
|
|
14
|
-
for (var a in
|
|
15
|
-
|
|
16
|
-
if (
|
|
17
|
-
for (var a of
|
|
18
|
-
e.indexOf(a) < 0 &&
|
|
14
|
+
for (var a in r)
|
|
15
|
+
re.call(r, a) && e.indexOf(a) < 0 && (t[a] = r[a]);
|
|
16
|
+
if (r != null && _)
|
|
17
|
+
for (var a of _(r))
|
|
18
|
+
e.indexOf(a) < 0 && ce.call(r, a) && (t[a] = r[a]);
|
|
19
19
|
return t;
|
|
20
20
|
};
|
|
21
|
-
var
|
|
21
|
+
var b = (r, e, t) => new Promise((a, s) => {
|
|
22
22
|
var i = (c) => {
|
|
23
23
|
try {
|
|
24
|
-
|
|
25
|
-
} catch (
|
|
26
|
-
|
|
24
|
+
o(t.next(c));
|
|
25
|
+
} catch (d) {
|
|
26
|
+
s(d);
|
|
27
27
|
}
|
|
28
|
-
},
|
|
28
|
+
}, n = (c) => {
|
|
29
29
|
try {
|
|
30
|
-
|
|
31
|
-
} catch (
|
|
32
|
-
|
|
30
|
+
o(t.throw(c));
|
|
31
|
+
} catch (d) {
|
|
32
|
+
s(d);
|
|
33
33
|
}
|
|
34
|
-
},
|
|
35
|
-
|
|
34
|
+
}, o = (c) => c.done ? a(c.value) : Promise.resolve(c.value).then(i, n);
|
|
35
|
+
o((t = t.apply(r, e)).next());
|
|
36
36
|
});
|
|
37
|
-
import { ActiveSelection as
|
|
38
|
-
import { create as
|
|
39
|
-
|
|
37
|
+
import { ActiveSelection as E, util as H, controlsUtils as ve, InteractiveFabricObject as be, loadSVGFromURL as ye, FabricImage as Z, Point as W, Rect as pe, Circle as Ie, Triangle as Ae, Group as de, Canvas as Se, Pattern as Ce } from "fabric";
|
|
38
|
+
import { create as De } from "jsondiffpatch";
|
|
39
|
+
import we from "diff-match-patch";
|
|
40
|
+
var Le = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", D = function() {
|
|
40
41
|
for (var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 21, t = "", a = crypto.getRandomValues(new Uint8Array(e |= 0)); e--; )
|
|
41
|
-
t +=
|
|
42
|
+
t += Le[a[e] & 63];
|
|
42
43
|
return t;
|
|
43
44
|
};
|
|
44
45
|
class R {
|
|
@@ -68,15 +69,15 @@ class R {
|
|
|
68
69
|
adaptCanvasToContainerOnResize: e,
|
|
69
70
|
canvasDragging: t,
|
|
70
71
|
mouseWheelZooming: a,
|
|
71
|
-
bringToFrontOnSelection:
|
|
72
|
+
bringToFrontOnSelection: s,
|
|
72
73
|
copyObjectsByHotkey: i,
|
|
73
|
-
pasteImageFromClipboard:
|
|
74
|
-
undoRedoByHotKeys:
|
|
74
|
+
pasteImageFromClipboard: n,
|
|
75
|
+
undoRedoByHotKeys: o,
|
|
75
76
|
selectAllByHotkey: c,
|
|
76
|
-
deleteObjectsByHotkey:
|
|
77
|
+
deleteObjectsByHotkey: d,
|
|
77
78
|
resetObjectFitByDoubleClick: l
|
|
78
79
|
} = this.options;
|
|
79
|
-
t && (this.canvas.on("mouse:down", this.handleCanvasDragStartBound), this.canvas.on("mouse:move", this.handleCanvasDraggingBound), this.canvas.on("mouse:up", this.handleCanvasDragEndBound), document.addEventListener("keydown", this.handleSpaceKeyDownBound, { capture: !0 }), document.addEventListener("keyup", this.handleSpaceKeyUpBound, { capture: !0 })), a && this.canvas.on("mouse:wheel", this.handleMouseWheelZoomBound),
|
|
80
|
+
t && (this.canvas.on("mouse:down", this.handleCanvasDragStartBound), this.canvas.on("mouse:move", this.handleCanvasDraggingBound), this.canvas.on("mouse:up", this.handleCanvasDragEndBound), document.addEventListener("keydown", this.handleSpaceKeyDownBound, { capture: !0 }), document.addEventListener("keyup", this.handleSpaceKeyUpBound, { capture: !0 })), a && this.canvas.on("mouse:wheel", this.handleMouseWheelZoomBound), s && (this.canvas.on("selection:created", this.handleBringToFrontBound), this.canvas.on("selection:updated", this.handleBringToFrontBound)), l && this.canvas.on("mouse:dblclick", this.handleResetObjectFitBound), e && window.addEventListener("resize", this.handleContainerResizeBound, { capture: !0 }), i && document.addEventListener("keydown", this.handleCopyEventBound, { capture: !0 }), n && document.addEventListener("paste", this.handlePasteEventBound, { capture: !0 }), o && (document.addEventListener("keydown", this.handleUndoRedoEventBound, { capture: !0 }), document.addEventListener("keyup", this.handleUndoRedoKeyUpBound, { capture: !0 })), c && document.addEventListener("keydown", this.handleSelectAllEventBound, { capture: !0 }), d && document.addEventListener("keydown", this.handleDeleteObjectsEventBound, { capture: !0 }), this.canvas.on("object:modified", this.handleObjectModifiedHistoryBound), this.canvas.on("object:rotating", this.handleObjectRotatingHistoryBound), this.canvas.on("object:added", this.handleObjectAddedHistoryBound), this.canvas.on("object:removed", this.handleObjectRemovedHistoryBound), this.canvas.on("object:added", this.handleOverlayUpdateBound), this.canvas.on("selection:created", this.handleOverlayUpdateBound), this.canvas.on("selection:created", this.handleLockedSelectionBound), this.canvas.on("selection:updated", this.handleLockedSelectionBound);
|
|
80
81
|
}
|
|
81
82
|
/**
|
|
82
83
|
* При массовом выделении объектов удаляем из него залоченные.
|
|
@@ -85,17 +86,17 @@ class R {
|
|
|
85
86
|
* @param {TPointerEvent} [params.e] - событие указателя (опционально)
|
|
86
87
|
*/
|
|
87
88
|
_filterLockedSelection({ selected: e, e: t }) {
|
|
88
|
-
if (!(e != null && e.length) || !(t instanceof MouseEvent) || e.length === 1 || !e.some((
|
|
89
|
-
const
|
|
90
|
-
if (
|
|
89
|
+
if (!(e != null && e.length) || !(t instanceof MouseEvent) || e.length === 1 || !e.some((n) => n.locked)) return;
|
|
90
|
+
const s = e.filter((n) => !n.locked);
|
|
91
|
+
if (s.length === 0) {
|
|
91
92
|
this.canvas.discardActiveObject();
|
|
92
93
|
return;
|
|
93
94
|
}
|
|
94
|
-
if (
|
|
95
|
-
this.canvas.setActiveObject(
|
|
95
|
+
if (s.length === 1) {
|
|
96
|
+
this.canvas.setActiveObject(s[0]);
|
|
96
97
|
return;
|
|
97
98
|
}
|
|
98
|
-
const i = new
|
|
99
|
+
const i = new E(s, {
|
|
99
100
|
canvas: this.canvas
|
|
100
101
|
});
|
|
101
102
|
this.canvas.setActiveObject(i), this.canvas.requestRenderAll();
|
|
@@ -139,8 +140,8 @@ class R {
|
|
|
139
140
|
* @param {String} event.code — код клавиши
|
|
140
141
|
*/
|
|
141
142
|
handleCopyEvent(e) {
|
|
142
|
-
const { ctrlKey: t, metaKey: a, code:
|
|
143
|
-
!t && !a ||
|
|
143
|
+
const { ctrlKey: t, metaKey: a, code: s } = e;
|
|
144
|
+
!t && !a || s !== "KeyC" || (e.preventDefault(), this.editor.clipboardManager.copy());
|
|
144
145
|
}
|
|
145
146
|
/**
|
|
146
147
|
* Обработчик вставки объекта или изображения из буфера обмена.
|
|
@@ -157,9 +158,9 @@ class R {
|
|
|
157
158
|
* @param {String} event.code — код клавиши
|
|
158
159
|
*/
|
|
159
160
|
handleUndoRedoEvent(e) {
|
|
160
|
-
return
|
|
161
|
-
const { ctrlKey: t, metaKey: a, code:
|
|
162
|
-
!t && !a || i || !/Mac/i.test(navigator.userAgent) && this.isUndoRedoKeyPressed || (
|
|
161
|
+
return b(this, null, function* () {
|
|
162
|
+
const { ctrlKey: t, metaKey: a, code: s, repeat: i } = e;
|
|
163
|
+
!t && !a || i || !/Mac/i.test(navigator.userAgent) && this.isUndoRedoKeyPressed || (s === "KeyZ" ? (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.undo()) : s === "KeyY" && (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.redo()));
|
|
163
164
|
});
|
|
164
165
|
}
|
|
165
166
|
/**
|
|
@@ -178,8 +179,8 @@ class R {
|
|
|
178
179
|
* @param {String} event.code — код клавиши
|
|
179
180
|
*/
|
|
180
181
|
handleSelectAllEvent(e) {
|
|
181
|
-
const { ctrlKey: t, metaKey: a, code:
|
|
182
|
-
!t && !a ||
|
|
182
|
+
const { ctrlKey: t, metaKey: a, code: s } = e;
|
|
183
|
+
!t && !a || s !== "KeyA" || (e.preventDefault(), this.editor.selectionManager.selectAll());
|
|
183
184
|
}
|
|
184
185
|
/**
|
|
185
186
|
* Обработчик для удаления объектов (Delete).
|
|
@@ -197,12 +198,12 @@ class R {
|
|
|
197
198
|
*/
|
|
198
199
|
handleSpaceKeyDown(e) {
|
|
199
200
|
if (e.code !== "Space") return;
|
|
200
|
-
const { canvas: t, editor: a, isSpacePressed:
|
|
201
|
-
|
|
201
|
+
const { canvas: t, editor: a, isSpacePressed: s, isDragging: i } = this;
|
|
202
|
+
s || i || (this.isSpacePressed = !0, e.preventDefault(), t.set({
|
|
202
203
|
selection: !1,
|
|
203
204
|
defaultCursor: "grab"
|
|
204
|
-
}), t.setCursor("grab"), a.canvasManager.getObjects().forEach((
|
|
205
|
-
|
|
205
|
+
}), t.setCursor("grab"), a.canvasManager.getObjects().forEach((n) => {
|
|
206
|
+
n.set({
|
|
206
207
|
selectable: !1,
|
|
207
208
|
evented: !1
|
|
208
209
|
});
|
|
@@ -296,14 +297,14 @@ class R {
|
|
|
296
297
|
*/
|
|
297
298
|
static debounce(e, t) {
|
|
298
299
|
let a = null;
|
|
299
|
-
return function(...
|
|
300
|
+
return function(...s) {
|
|
300
301
|
a !== null && clearTimeout(a), a = setTimeout(() => {
|
|
301
|
-
e.apply(this,
|
|
302
|
+
e.apply(this, s);
|
|
302
303
|
}, t);
|
|
303
304
|
};
|
|
304
305
|
}
|
|
305
306
|
}
|
|
306
|
-
class
|
|
307
|
+
class Ne {
|
|
307
308
|
/**
|
|
308
309
|
* @description Класс для динамической загрузки внешних модулей.
|
|
309
310
|
*/
|
|
@@ -321,7 +322,7 @@ class Re {
|
|
|
321
322
|
return this.loaders[e] ? (this.cache.has(e) || this.cache.set(e, this.loaders[e]()), this.cache.get(e)) : Promise.reject(new Error('Unknown module "'.concat(e, '"')));
|
|
322
323
|
}
|
|
323
324
|
}
|
|
324
|
-
class
|
|
325
|
+
class Ee {
|
|
325
326
|
/**
|
|
326
327
|
* @param {string|URL} [scriptUrl] — URL скрипта воркера.
|
|
327
328
|
* По-умолчанию использует файл рядом с этим модулем
|
|
@@ -347,11 +348,11 @@ class Pe {
|
|
|
347
348
|
data: t
|
|
348
349
|
} = e, {
|
|
349
350
|
requestId: a,
|
|
350
|
-
success:
|
|
351
|
+
success: s,
|
|
351
352
|
data: i,
|
|
352
|
-
error:
|
|
353
|
-
} = t,
|
|
354
|
-
|
|
353
|
+
error: n
|
|
354
|
+
} = t, o = this._callbacks.get(a);
|
|
355
|
+
o && (s ? o.resolve(i) : o.reject(new Error(n)), this._callbacks.delete(a));
|
|
355
356
|
}
|
|
356
357
|
/**
|
|
357
358
|
* Универсальный метод отправки команды в воркер
|
|
@@ -361,15 +362,15 @@ class Pe {
|
|
|
361
362
|
* @returns {Promise<any>}
|
|
362
363
|
*/
|
|
363
364
|
post(e, t) {
|
|
364
|
-
var a = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : [],
|
|
365
|
-
return new Promise((i,
|
|
366
|
-
this._callbacks.set(
|
|
365
|
+
var a = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : [], s = "".concat(e, ":").concat(D(8));
|
|
366
|
+
return new Promise((i, n) => {
|
|
367
|
+
this._callbacks.set(s, {
|
|
367
368
|
resolve: i,
|
|
368
|
-
reject:
|
|
369
|
+
reject: n
|
|
369
370
|
}), this.worker.postMessage({
|
|
370
371
|
action: e,
|
|
371
372
|
payload: t,
|
|
372
|
-
requestId:
|
|
373
|
+
requestId: s
|
|
373
374
|
}, a);
|
|
374
375
|
});
|
|
375
376
|
}
|
|
@@ -380,136 +381,136 @@ class Pe {
|
|
|
380
381
|
this.worker.terminate();
|
|
381
382
|
}
|
|
382
383
|
}
|
|
383
|
-
const
|
|
384
|
-
function
|
|
385
|
-
const i =
|
|
386
|
-
|
|
384
|
+
const S = 12, Oe = 2, X = 8, Q = 20, Te = 100, J = 20, $ = 8, ke = 100, K = 32, q = 1, xe = "#2B2D33", ee = "#3D8BF4", te = "#FFFFFF";
|
|
385
|
+
function P(r, e, t, a, s) {
|
|
386
|
+
const i = S, n = Oe;
|
|
387
|
+
r.save(), r.translate(e, t), r.rotate(H.degreesToRadians(s.angle)), r.fillStyle = te, r.strokeStyle = ee, r.lineWidth = q, r.beginPath(), r.roundRect(-12 / 2, -12 / 2, i, i, n), r.fill(), r.stroke(), r.restore();
|
|
387
388
|
}
|
|
388
|
-
function
|
|
389
|
-
const i =
|
|
390
|
-
|
|
389
|
+
function le(r, e, t, a, s) {
|
|
390
|
+
const i = X, n = Q, o = Te;
|
|
391
|
+
r.save(), r.translate(e, t), r.rotate(H.degreesToRadians(s.angle)), r.fillStyle = te, r.strokeStyle = ee, r.lineWidth = q, r.beginPath(), r.roundRect(-8 / 2, -20 / 2, i, n, o), r.fill(), r.stroke(), r.restore();
|
|
391
392
|
}
|
|
392
|
-
function
|
|
393
|
-
const i =
|
|
394
|
-
|
|
393
|
+
function he(r, e, t, a, s) {
|
|
394
|
+
const i = J, n = $, o = ke;
|
|
395
|
+
r.save(), r.translate(e, t), r.rotate(H.degreesToRadians(s.angle)), r.fillStyle = te, r.strokeStyle = ee, r.lineWidth = q, r.beginPath(), r.roundRect(-20 / 2, -8 / 2, i, n, o), r.fill(), r.stroke(), r.restore();
|
|
395
396
|
}
|
|
396
|
-
const
|
|
397
|
-
|
|
398
|
-
function
|
|
399
|
-
const
|
|
400
|
-
|
|
397
|
+
const Be = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", Me = new Image();
|
|
398
|
+
Me.src = Be;
|
|
399
|
+
function Ue(r, e, t, a, s) {
|
|
400
|
+
const n = K / 2;
|
|
401
|
+
r.save(), r.translate(e, t), r.rotate(H.degreesToRadians(s.angle)), r.fillStyle = xe, r.beginPath(), r.arc(0, 0, n, 0, 2 * Math.PI), r.fill(), r.drawImage(Me, -16 / 2, -16 / 2, n, n), r.restore();
|
|
401
402
|
}
|
|
402
|
-
const
|
|
403
|
+
const Ze = {
|
|
403
404
|
// Угловые точки
|
|
404
405
|
tl: {
|
|
405
|
-
render:
|
|
406
|
-
sizeX:
|
|
407
|
-
sizeY:
|
|
406
|
+
render: P,
|
|
407
|
+
sizeX: S,
|
|
408
|
+
sizeY: S,
|
|
408
409
|
offsetX: 0,
|
|
409
410
|
offsetY: 0
|
|
410
411
|
},
|
|
411
412
|
tr: {
|
|
412
|
-
render:
|
|
413
|
-
sizeX:
|
|
414
|
-
sizeY:
|
|
413
|
+
render: P,
|
|
414
|
+
sizeX: S,
|
|
415
|
+
sizeY: S,
|
|
415
416
|
offsetX: 0,
|
|
416
417
|
offsetY: 0
|
|
417
418
|
},
|
|
418
419
|
bl: {
|
|
419
|
-
render:
|
|
420
|
-
sizeX:
|
|
421
|
-
sizeY:
|
|
420
|
+
render: P,
|
|
421
|
+
sizeX: S,
|
|
422
|
+
sizeY: S,
|
|
422
423
|
offsetX: 0,
|
|
423
424
|
offsetY: 0
|
|
424
425
|
},
|
|
425
426
|
br: {
|
|
426
|
-
render:
|
|
427
|
-
sizeX:
|
|
428
|
-
sizeY:
|
|
427
|
+
render: P,
|
|
428
|
+
sizeX: S,
|
|
429
|
+
sizeY: S,
|
|
429
430
|
offsetX: 0,
|
|
430
431
|
offsetY: 0
|
|
431
432
|
},
|
|
432
433
|
// Середина вертикалей
|
|
433
434
|
ml: {
|
|
434
|
-
render:
|
|
435
|
-
sizeX:
|
|
436
|
-
sizeY:
|
|
435
|
+
render: le,
|
|
436
|
+
sizeX: X,
|
|
437
|
+
sizeY: Q,
|
|
437
438
|
offsetX: 0,
|
|
438
439
|
offsetY: 0
|
|
439
440
|
},
|
|
440
441
|
mr: {
|
|
441
|
-
render:
|
|
442
|
-
sizeX:
|
|
443
|
-
sizeY:
|
|
442
|
+
render: le,
|
|
443
|
+
sizeX: X,
|
|
444
|
+
sizeY: Q,
|
|
444
445
|
offsetX: 0,
|
|
445
446
|
offsetY: 0
|
|
446
447
|
},
|
|
447
448
|
// Середина горизонталей
|
|
448
449
|
mt: {
|
|
449
|
-
render:
|
|
450
|
-
sizeX:
|
|
451
|
-
sizeY:
|
|
450
|
+
render: he,
|
|
451
|
+
sizeX: J,
|
|
452
|
+
sizeY: $,
|
|
452
453
|
offsetX: 0,
|
|
453
454
|
offsetY: 0
|
|
454
455
|
},
|
|
455
456
|
mb: {
|
|
456
|
-
render:
|
|
457
|
-
sizeX:
|
|
458
|
-
sizeY:
|
|
457
|
+
render: he,
|
|
458
|
+
sizeX: J,
|
|
459
|
+
sizeY: $,
|
|
459
460
|
offsetX: 0,
|
|
460
461
|
offsetY: 0
|
|
461
462
|
},
|
|
462
463
|
// Специальный «rotate» контрол
|
|
463
464
|
mtr: {
|
|
464
|
-
render:
|
|
465
|
-
sizeX:
|
|
466
|
-
sizeY:
|
|
465
|
+
render: Ue,
|
|
466
|
+
sizeX: K,
|
|
467
|
+
sizeY: K,
|
|
467
468
|
offsetX: 0,
|
|
468
469
|
offsetY: -32
|
|
469
470
|
}
|
|
470
471
|
};
|
|
471
|
-
class
|
|
472
|
+
class ze {
|
|
472
473
|
static apply() {
|
|
473
|
-
const e =
|
|
474
|
-
Object.entries(
|
|
474
|
+
const e = ve.createObjectDefaultControls();
|
|
475
|
+
Object.entries(Ze).forEach(([t, a]) => {
|
|
475
476
|
Object.assign(e[t], {
|
|
476
477
|
render: a.render,
|
|
477
478
|
sizeX: a.sizeX,
|
|
478
479
|
sizeY: a.sizeY,
|
|
479
480
|
offsetX: a.offsetX,
|
|
480
481
|
offsetY: a.offsetY
|
|
481
|
-
}), t === "mtr" && (e[t].cursorStyle = "grab", e[t].mouseDownHandler = (i,
|
|
482
|
+
}), t === "mtr" && (e[t].cursorStyle = "grab", e[t].mouseDownHandler = (i, n, o, c) => {
|
|
482
483
|
var l;
|
|
483
|
-
(l =
|
|
484
|
+
(l = n.target.canvas) == null || l.setCursor("grabbing");
|
|
484
485
|
});
|
|
485
|
-
}),
|
|
486
|
+
}), be.ownDefaults.controls = e;
|
|
486
487
|
}
|
|
487
488
|
}
|
|
488
|
-
var
|
|
489
|
-
function
|
|
489
|
+
var Re = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNi44NzUgMi41YS42MjUuNjI1IDAgMCAwLS42MjUuNjI0VjYuMjVIMy4xMjVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2MTBjMCAuMzQ1LjI4LjYyNS42MjUuNjI1aDEwYy4zNDUgMCAuNjI1LS4yOC42MjUtLjYyNXYtMy4xMjZoMy4xMjVjLjM0NSAwIC42MjUtLjI4LjYyNS0uNjI1di0xMGEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTEwWm02Ljg3NSAxMGgyLjVWMy43NUg3LjV2Mi41aDUuNjI1Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NS42MjRabS0xMCAzLjc1VjcuNWg4Ljc1djguNzVIMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", He = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi41IDcuNWMwLS42OS41Ni0xLjI1IDEuMjUtMS4yNWgxMi41Yy42OSAwIDEuMjUuNTYgMS4yNSAxLjI1djguNzVjMCAuNjktLjU2IDEuMjUtMS4yNSAxLjI1SDMuNzVjLS42OSAwLTEuMjUtLjU2LTEuMjUtMS4yNVY3LjVabTEzLjc1IDBIMy43NXY4Ljc1aDEyLjVWNy41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMS44NzVhMi4xODggMi4xODggMCAwIDAtMi4xODggMi4xODh2Mi44MTJhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyYTMuNDM3IDMuNDM3IDAgMSAxIDYuODc1IDB2Mi44MTNhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyQTIuMTg4IDIuMTg4IDAgMCAwIDEwIDEuODc2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEwIDEyLjgxM2EuOTM3LjkzNyAwIDEgMCAwLTEuODc1LjkzNy45MzcgMCAwIDAgMCAxLjg3NFoiLz48L3N2Zz4=", _e = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE2LjI1IDYuMjVINy41VjQuMzc1YTIuNSAyLjUgMCAwIDEgMi41LTIuNWMxLjIgMCAyLjI4MS44NiAyLjUxMiAyYS42MjUuNjI1IDAgMCAwIDEuMjI2LS4yNWMtLjM1NC0xLjczOC0xLjkyNS0zLTMuNzM4LTNhMy43NTQgMy43NTQgMCAwIDAtMy43NSAzLjc1VjYuMjVoLTIuNUExLjI1IDEuMjUgMCAwIDAgMi41IDcuNXY4Ljc1YTEuMjUgMS4yNSAwIDAgMCAxLjI1IDEuMjVoMTIuNWExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjcuNWExLjI1IDEuMjUgMCAwIDAtMS4yNS0xLjI1Wm0wIDEwSDMuNzVWNy41aDEyLjV2OC43NVptLTUuMzEzLTQuMzc1YS45MzcuOTM3IDAgMSAxLTEuODc0IDAgLjkzNy45MzcgMCAwIDEgMS44NzQgMFoiLz48L3N2Zz4K", Ye = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIuNSA4LjEyNSAxMCAxMi41bDcuNS00LjM3NUwxMCAzLjc1IDIuNSA4LjEyNVoiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjY4NSAzLjIxYS42MjUuNjI1IDAgMCAxIC42MyAwbDcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOGw3LjUtNC4zNzVaTTMuNzQgOC4xMjUgMTAgMTEuNzc2bDYuMjYtMy42NTFMMTAgNC40NzQgMy43NCA4LjEyNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA5LjQ2YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDExLjc3NmwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA5LjQ2Wm0tMS42NiAyLjQxNUwxMCAxNS41MjZsNi4yNi0zLjY1MS0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNi0xLjk3NSAxLjE1MVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", Pe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMy4yMWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDguMTI1IDEwIDExLjc3Nmw2LjI2LTMuNjUxTDEwIDQuNDc0IDMuNzQgOC4xMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjcxNCAxMCAxMCAxMi41bDQuMjg2LTIuNSAzLjIxNCAxLjg3NUwxMCAxNi4yNWwtNy41LTQuMzc1TDUuNzE0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDkuNDZhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgMTEuNzc2bDMuOTctMi4zMTZhLjYyNS42MjUgMCAwIDEgLjYzIDBsMy4yMTUgMS44NzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhMNS40IDkuNDZabS0xLjY2IDIuNDE1TDEwIDE1LjUyNmw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2LTEuOTc1IDEuMTUxWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", We = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTIuNSA2LjI1IDcuNSA0LjM3NSA3LjUtNC4zNzVMMTAgMS44NzUgMi41IDYuMjVaIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMS4zMzVhLjYyNS42MjUgMCAwIDEgLjYzIDBsNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4bDcuNS00LjM3NVpNMy43NCA2LjI1IDEwIDkuOTAxbDYuMjYtMy42NTFMMTAgMi41OTkgMy43NCA2LjI1WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDExLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCAxMy42NTFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgMTEuMzM1Wk0zLjc0IDEzLjc1IDEwIDE3LjQwMWw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTMuNzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgNy41ODVhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgOS45MDFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgNy41ODVaTTMuNzQgMTAgMTAgMTMuNjUxIDE2LjI2IDEwbC0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNkwzLjc0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", Fe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMS45NiAxMy40MzVhLjYyNS42MjUgMCAwIDEgLjg1NS0uMjI1TDEwIDE3LjQwMWw3LjE4NS00LjE5YS42MjUuNjI1IDAgMCAxIC42MyAxLjA3OWwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEtLjIyNS0uODU1Wk05LjY4NSAxLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDYuMjUgMTAgOS45MDFsNi4yNi0zLjY1MUwxMCAyLjU5OSAzLjc0IDYuMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im01LjcxNCAxMS44NzUgNC4yODYgMi41IDQuMjg2LTIuNUwxNy41IDEzLjc1IDEwIDE4LjEyNSAyLjUgMTMuNzVsMy4yMTQtMS44NzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgMTEuMzM1YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDEzLjY1MWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCAxMS4zMzVaTTMuNzQgMTMuNzUgMTAgMTcuNDAxbDYuMjYtMy42NTEtMS45NzQtMS4xNTEtMy45NzEgMi4zMTZhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTMuOTctMi4zMTZMMy43NCAxMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA3LjU4NWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCA5LjkwMWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA3LjU4NVpNMy43NCAxMCAxMCAxMy42NTEgMTYuMjYgMTBsLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTBaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=", Ve = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI0VDNEU0MCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOC4xMjUgMS4yNUExLjg3NSAxLjg3NSAwIDAgMCA2LjI1IDMuMTI1di42MjVIMy4xMjVhLjYyNS42MjUgMCAwIDAgMCAxLjI1aC42MjV2MTEuMjVBMS4yNSAxLjI1IDAgMCAwIDUgMTcuNWgxMGExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjVoLjYyNWEuNjI1LjYyNSAwIDAgMCAwLTEuMjVIMTMuNzV2LS42MjVhMS44NzUgMS44NzUgMCAwIDAtMS44NzUtMS44NzVoLTMuNzVabTQuMzc1IDIuNXYtLjYyNWEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2LjYyNWg1Wk01IDE2LjI1VjVoMTB2MTEuMjVINVpNOC4xMjUgNy41Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NWEuNjI1LjYyNSAwIDEgMS0xLjI1IDB2LTVjMC0uMzQ1LjI4LS42MjUuNjI1LS42MjVabTQuMzc1IDUuNjI1di01YS42MjUuNjI1IDAgMCAwLTEuMjUgMHY1YS42MjUuNjI1IDAgMSAwIDEuMjUgMFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==";
|
|
490
|
+
function ge(r, e, t, a, s, i, n) {
|
|
490
491
|
try {
|
|
491
|
-
var
|
|
492
|
-
} catch (
|
|
493
|
-
return void t(
|
|
492
|
+
var o = r[i](n), c = o.value;
|
|
493
|
+
} catch (d) {
|
|
494
|
+
return void t(d);
|
|
494
495
|
}
|
|
495
|
-
|
|
496
|
+
o.done ? e(c) : Promise.resolve(c).then(a, s);
|
|
496
497
|
}
|
|
497
|
-
function
|
|
498
|
+
function Ge(r) {
|
|
498
499
|
return function() {
|
|
499
500
|
var e = this, t = arguments;
|
|
500
|
-
return new Promise(function(a,
|
|
501
|
-
var i =
|
|
502
|
-
function
|
|
503
|
-
|
|
501
|
+
return new Promise(function(a, s) {
|
|
502
|
+
var i = r.apply(e, t);
|
|
503
|
+
function n(c) {
|
|
504
|
+
ge(i, a, s, n, o, "next", c);
|
|
504
505
|
}
|
|
505
|
-
function
|
|
506
|
-
|
|
506
|
+
function o(c) {
|
|
507
|
+
ge(i, a, s, n, o, "throw", c);
|
|
507
508
|
}
|
|
508
|
-
|
|
509
|
+
n(void 0);
|
|
509
510
|
});
|
|
510
511
|
};
|
|
511
512
|
}
|
|
512
|
-
const
|
|
513
|
+
const z = {
|
|
513
514
|
style: {
|
|
514
515
|
position: "absolute",
|
|
515
516
|
display: "none",
|
|
@@ -568,87 +569,87 @@ const Y = {
|
|
|
568
569
|
}],
|
|
569
570
|
offsetTop: 50,
|
|
570
571
|
icons: {
|
|
571
|
-
copyPaste:
|
|
572
|
-
delete:
|
|
573
|
-
lock:
|
|
574
|
-
unlock:
|
|
575
|
-
bringToFront:
|
|
576
|
-
sendToBack:
|
|
577
|
-
bringForward:
|
|
578
|
-
sendBackwards:
|
|
572
|
+
copyPaste: Re,
|
|
573
|
+
delete: Ve,
|
|
574
|
+
lock: He,
|
|
575
|
+
unlock: _e,
|
|
576
|
+
bringToFront: We,
|
|
577
|
+
sendToBack: Fe,
|
|
578
|
+
bringForward: Ye,
|
|
579
|
+
sendBackwards: Pe
|
|
579
580
|
},
|
|
580
581
|
handlers: {
|
|
581
582
|
copyPaste: function() {
|
|
582
|
-
var
|
|
583
|
+
var r = Ge(function* (t) {
|
|
583
584
|
yield t.clipboardManager.copy(), yield t.clipboardManager.paste();
|
|
584
585
|
});
|
|
585
586
|
function e(t) {
|
|
586
|
-
return
|
|
587
|
+
return r.apply(this, arguments);
|
|
587
588
|
}
|
|
588
589
|
return e;
|
|
589
590
|
}(),
|
|
590
|
-
delete: (
|
|
591
|
-
|
|
591
|
+
delete: (r) => {
|
|
592
|
+
r.deletionManager.deleteSelectedObjects();
|
|
592
593
|
},
|
|
593
|
-
lock: (
|
|
594
|
-
|
|
594
|
+
lock: (r) => {
|
|
595
|
+
r.objectLockManager.lockObject();
|
|
595
596
|
},
|
|
596
|
-
unlock: (
|
|
597
|
-
|
|
597
|
+
unlock: (r) => {
|
|
598
|
+
r.objectLockManager.unlockObject();
|
|
598
599
|
},
|
|
599
|
-
bringForward: (
|
|
600
|
-
|
|
600
|
+
bringForward: (r) => {
|
|
601
|
+
r.layerManager.bringForward();
|
|
601
602
|
},
|
|
602
|
-
bringToFront: (
|
|
603
|
-
|
|
603
|
+
bringToFront: (r) => {
|
|
604
|
+
r.layerManager.bringToFront();
|
|
604
605
|
},
|
|
605
|
-
sendToBack: (
|
|
606
|
-
|
|
606
|
+
sendToBack: (r) => {
|
|
607
|
+
r.layerManager.sendToBack();
|
|
607
608
|
},
|
|
608
|
-
sendBackwards: (
|
|
609
|
-
|
|
609
|
+
sendBackwards: (r) => {
|
|
610
|
+
r.layerManager.sendBackwards();
|
|
610
611
|
}
|
|
611
612
|
}
|
|
612
613
|
};
|
|
613
|
-
function
|
|
614
|
-
var t = Object.keys(
|
|
614
|
+
function ue(r, e) {
|
|
615
|
+
var t = Object.keys(r);
|
|
615
616
|
if (Object.getOwnPropertySymbols) {
|
|
616
|
-
var a = Object.getOwnPropertySymbols(
|
|
617
|
-
e && (a = a.filter(function(
|
|
618
|
-
return Object.getOwnPropertyDescriptor(
|
|
617
|
+
var a = Object.getOwnPropertySymbols(r);
|
|
618
|
+
e && (a = a.filter(function(s) {
|
|
619
|
+
return Object.getOwnPropertyDescriptor(r, s).enumerable;
|
|
619
620
|
})), t.push.apply(t, a);
|
|
620
621
|
}
|
|
621
622
|
return t;
|
|
622
623
|
}
|
|
623
|
-
function
|
|
624
|
+
function p(r) {
|
|
624
625
|
for (var e = 1; e < arguments.length; e++) {
|
|
625
626
|
var t = arguments[e] != null ? arguments[e] : {};
|
|
626
|
-
e % 2 ?
|
|
627
|
-
|
|
628
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(
|
|
629
|
-
Object.defineProperty(
|
|
627
|
+
e % 2 ? ue(Object(t), !0).forEach(function(a) {
|
|
628
|
+
Xe(r, a, t[a]);
|
|
629
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(r, Object.getOwnPropertyDescriptors(t)) : ue(Object(t)).forEach(function(a) {
|
|
630
|
+
Object.defineProperty(r, a, Object.getOwnPropertyDescriptor(t, a));
|
|
630
631
|
});
|
|
631
632
|
}
|
|
632
|
-
return
|
|
633
|
+
return r;
|
|
633
634
|
}
|
|
634
|
-
function
|
|
635
|
-
return (e =
|
|
635
|
+
function Xe(r, e, t) {
|
|
636
|
+
return (e = Qe(e)) in r ? Object.defineProperty(r, e, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : r[e] = t, r;
|
|
636
637
|
}
|
|
637
|
-
function
|
|
638
|
-
var e =
|
|
638
|
+
function Qe(r) {
|
|
639
|
+
var e = Je(r, "string");
|
|
639
640
|
return typeof e == "symbol" ? e : e + "";
|
|
640
641
|
}
|
|
641
|
-
function
|
|
642
|
-
if (typeof
|
|
643
|
-
var t =
|
|
642
|
+
function Je(r, e) {
|
|
643
|
+
if (typeof r != "object" || !r) return r;
|
|
644
|
+
var t = r[Symbol.toPrimitive];
|
|
644
645
|
if (t !== void 0) {
|
|
645
|
-
var a = t.call(
|
|
646
|
+
var a = t.call(r, e);
|
|
646
647
|
if (typeof a != "object") return a;
|
|
647
648
|
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
648
649
|
}
|
|
649
|
-
return (e === "string" ? String : Number)(
|
|
650
|
+
return (e === "string" ? String : Number)(r);
|
|
650
651
|
}
|
|
651
|
-
class
|
|
652
|
+
class $e {
|
|
652
653
|
/**
|
|
653
654
|
* @param {object} options
|
|
654
655
|
* @param {ImageEditor} options.editor - экземпляр редактора с доступом к canvas
|
|
@@ -660,11 +661,11 @@ class dt {
|
|
|
660
661
|
if (this.options = t.options, !!this.options.showToolbar) {
|
|
661
662
|
this.editor = t, this.canvas = t.canvas;
|
|
662
663
|
var a = this.options.toolbar || {};
|
|
663
|
-
this.config =
|
|
664
|
-
style:
|
|
665
|
-
btnStyle:
|
|
666
|
-
icons:
|
|
667
|
-
handlers:
|
|
664
|
+
this.config = p(p(p({}, z), a), {}, {
|
|
665
|
+
style: p(p({}, z.style), a.style || {}),
|
|
666
|
+
btnStyle: p(p({}, z.btnStyle), a.btnStyle || {}),
|
|
667
|
+
icons: p(p({}, z.icons), a.icons || {}),
|
|
668
|
+
handlers: p(p({}, z.handlers), a.handlers || {})
|
|
668
669
|
}), this.currentTarget = null, this.currentLocked = null, this.isTransforming = !1, this._onMouseDown = this._handleMouseDown.bind(this), this._onObjectMoving = this._startTransform.bind(this), this._onObjectScaling = this._startTransform.bind(this), this._onObjectRotating = this._startTransform.bind(this), this._onMouseUp = this._endTransform.bind(this), this._onObjectModified = this._endTransform.bind(this), this._onSelectionChange = this._updateToolbar.bind(this), this._onSelectionClear = () => {
|
|
669
670
|
this.el.style.display = "none";
|
|
670
671
|
}, this._createDOM(), this._bindEvents();
|
|
@@ -698,19 +699,19 @@ class dt {
|
|
|
698
699
|
this.el.innerHTML = "";
|
|
699
700
|
var a = function() {
|
|
700
701
|
var {
|
|
701
|
-
name:
|
|
702
|
-
handle:
|
|
703
|
-
} =
|
|
702
|
+
name: n,
|
|
703
|
+
handle: o
|
|
704
|
+
} = s, {
|
|
704
705
|
icons: c,
|
|
705
|
-
btnStyle:
|
|
706
|
+
btnStyle: d,
|
|
706
707
|
handlers: l
|
|
707
|
-
} = t.config,
|
|
708
|
-
|
|
709
|
-
var
|
|
710
|
-
return (
|
|
711
|
-
}, t.el.appendChild(
|
|
708
|
+
} = t.config, h = document.createElement("button");
|
|
709
|
+
h.innerHTML = c[o] ? '<img src="'.concat(c[o], '" title="').concat(n, '" />') : n, Object.assign(h.style, d), h.onclick = () => {
|
|
710
|
+
var g;
|
|
711
|
+
return (g = l[o]) === null || g === void 0 ? void 0 : g.call(l, t.editor);
|
|
712
|
+
}, t.el.appendChild(h);
|
|
712
713
|
};
|
|
713
|
-
for (var
|
|
714
|
+
for (var s of e)
|
|
714
715
|
a();
|
|
715
716
|
}
|
|
716
717
|
/**
|
|
@@ -777,18 +778,18 @@ class dt {
|
|
|
777
778
|
var {
|
|
778
779
|
el: t,
|
|
779
780
|
config: a,
|
|
780
|
-
canvas:
|
|
781
|
+
canvas: s
|
|
781
782
|
} = this;
|
|
782
783
|
e.setCoords();
|
|
783
|
-
var i =
|
|
784
|
+
var i = s.getZoom(), [, , , , n, o] = s.viewportTransform, {
|
|
784
785
|
x: c
|
|
785
786
|
} = e.getCenterPoint(), {
|
|
786
|
-
top:
|
|
787
|
+
top: d,
|
|
787
788
|
height: l
|
|
788
|
-
} = e.getBoundingRect(!1, !0),
|
|
789
|
+
} = e.getBoundingRect(!1, !0), h = c * i + n, g = h - t.offsetWidth / 2, u = (d + l) * i + o + a.offsetTop;
|
|
789
790
|
Object.assign(t.style, {
|
|
790
|
-
left: "".concat(
|
|
791
|
-
top: "".concat(
|
|
791
|
+
left: "".concat(g, "px"),
|
|
792
|
+
top: "".concat(u, "px"),
|
|
792
793
|
display: "flex"
|
|
793
794
|
});
|
|
794
795
|
}
|
|
@@ -800,39 +801,9 @@ class dt {
|
|
|
800
801
|
this.el.removeEventListener("mouseover", this._onBtnOver), this.el.removeEventListener("mouseout", this._onBtnOut), this.canvas.off("mouse:down", this._onMouseDown), this.canvas.off("object:moving", this._onObjectMoving), this.canvas.off("object:scaling", this._onObjectScaling), this.canvas.off("object:rotating", this._onObjectRotating), this.canvas.off("mouse:up", this._onMouseUp), this.canvas.off("object:modified", this._onObjectModified), this.canvas.off("selection:created", this._onSelectionChange), this.canvas.off("selection:updated", this._onSelectionChange), this.canvas.off("selection:changed", this._onSelectionChange), this.canvas.off("after:render", this._onSelectionChange), this.canvas.off("selection:cleared", this._onSelectionClear), this.el.remove();
|
|
801
802
|
}
|
|
802
803
|
}
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
} catch (u) {
|
|
807
|
-
return void t(u);
|
|
808
|
-
}
|
|
809
|
-
r.done ? e(c) : Promise.resolve(c).then(a, n);
|
|
810
|
-
}
|
|
811
|
-
function te(o) {
|
|
812
|
-
return function() {
|
|
813
|
-
var e = this, t = arguments;
|
|
814
|
-
return new Promise(function(a, n) {
|
|
815
|
-
var i = o.apply(e, t);
|
|
816
|
-
function s(c) {
|
|
817
|
-
Ae(i, a, n, s, r, "next", c);
|
|
818
|
-
}
|
|
819
|
-
function r(c) {
|
|
820
|
-
Ae(i, a, n, s, r, "throw", c);
|
|
821
|
-
}
|
|
822
|
-
s(void 0);
|
|
823
|
-
});
|
|
824
|
-
};
|
|
825
|
-
}
|
|
826
|
-
class lt {
|
|
827
|
-
/**
|
|
828
|
-
* @param {object} options
|
|
829
|
-
* @param {ImageEditor} options.editor - экземпляр редактора с доступом к canvas
|
|
830
|
-
*/
|
|
831
|
-
constructor(e) {
|
|
832
|
-
var {
|
|
833
|
-
editor: t
|
|
834
|
-
} = e;
|
|
835
|
-
this.editor = t, this.canvas = t.canvas, this._historySuspendCount = 0, this.baseState = null, this.patches = [], this.currentIndex = 0, this.maxHistoryLength = t.options.maxHistoryLength, this.totalChangesCount = 0, this.baseStateChangesCount = 0, this._createDiffPatcher();
|
|
804
|
+
class Ke {
|
|
805
|
+
constructor({ editor: e }) {
|
|
806
|
+
this.editor = e, this.canvas = e.canvas, this._historySuspendCount = 0, this.baseState = null, this.patches = [], this.currentIndex = 0, this.maxHistoryLength = e.options.maxHistoryLength, this.totalChangesCount = 0, this.baseStateChangesCount = 0, this._createDiffPatcher();
|
|
836
807
|
}
|
|
837
808
|
/** Проверка, нужно ли пропускать сохранение истории */
|
|
838
809
|
get skipHistory() {
|
|
@@ -842,15 +813,31 @@ class lt {
|
|
|
842
813
|
return this.patches[this.currentIndex - 1] || null;
|
|
843
814
|
}
|
|
844
815
|
_createDiffPatcher() {
|
|
845
|
-
this.diffPatcher =
|
|
816
|
+
this.diffPatcher = De({
|
|
846
817
|
objectHash(e) {
|
|
847
|
-
|
|
818
|
+
const t = e;
|
|
819
|
+
return [
|
|
820
|
+
t.id,
|
|
821
|
+
t.format,
|
|
822
|
+
t.locked,
|
|
823
|
+
t.left,
|
|
824
|
+
t.top,
|
|
825
|
+
t.width,
|
|
826
|
+
t.height,
|
|
827
|
+
t.flipX,
|
|
828
|
+
t.flipY,
|
|
829
|
+
t.scaleX,
|
|
830
|
+
t.scaleY,
|
|
831
|
+
t.angle,
|
|
832
|
+
t.opacity
|
|
833
|
+
].join("-");
|
|
848
834
|
},
|
|
849
835
|
arrays: {
|
|
850
836
|
detectMove: !0,
|
|
851
837
|
includeValueOnMove: !1
|
|
852
838
|
},
|
|
853
839
|
textDiff: {
|
|
840
|
+
diffMatchPatch: we,
|
|
854
841
|
minLength: 60
|
|
855
842
|
}
|
|
856
843
|
});
|
|
@@ -881,717 +868,593 @@ class lt {
|
|
|
881
868
|
* Получаем полное состояние, применяя все диффы к базовому состоянию.
|
|
882
869
|
*/
|
|
883
870
|
getFullState() {
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
n = this.diffPatcher.patch(n, a[i].diff);
|
|
890
|
-
return console.log("getFullState state", n), n;
|
|
871
|
+
const { baseState: e, currentIndex: t, patches: a } = this;
|
|
872
|
+
let s = JSON.parse(JSON.stringify(e));
|
|
873
|
+
for (let i = 0; i < t; i += 1)
|
|
874
|
+
s = this.diffPatcher.patch(s, a[i].diff);
|
|
875
|
+
return console.log("getFullState state", s), s;
|
|
891
876
|
}
|
|
892
877
|
/**
|
|
893
878
|
* Сохраняем текущее состояние в виде диффа от последнего сохранённого полного состояния.
|
|
894
879
|
*/
|
|
895
880
|
saveState() {
|
|
896
|
-
if (console.log("saveState"),
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
881
|
+
if (console.log("saveState"), this.skipHistory) return;
|
|
882
|
+
console.time("saveState");
|
|
883
|
+
const e = this.canvas.toDatalessObject([
|
|
884
|
+
"selectable",
|
|
885
|
+
"evented",
|
|
886
|
+
"id",
|
|
887
|
+
"format",
|
|
888
|
+
"width",
|
|
889
|
+
"height",
|
|
890
|
+
"locked",
|
|
891
|
+
"lockMovementX",
|
|
892
|
+
"lockMovementY",
|
|
893
|
+
"lockRotation",
|
|
894
|
+
"lockScalingX",
|
|
895
|
+
"lockScalingY",
|
|
896
|
+
"lockSkewingX",
|
|
897
|
+
"lockSkewingY"
|
|
898
|
+
]);
|
|
899
|
+
if (console.timeEnd("saveState"), !this.baseState) {
|
|
900
|
+
this.baseState = e, this.patches = [], this.currentIndex = 0, console.log("Базовое состояние сохранено.");
|
|
901
|
+
return;
|
|
912
902
|
}
|
|
903
|
+
const t = this.getFullState(), a = this.diffPatcher.diff(t, e);
|
|
904
|
+
if (!a) {
|
|
905
|
+
console.log("Нет изменений для сохранения.");
|
|
906
|
+
return;
|
|
907
|
+
}
|
|
908
|
+
console.log("baseState", this.baseState), this.currentIndex < this.patches.length && this.patches.splice(this.currentIndex), console.log("diff", a), this.totalChangesCount += 1, this.patches.push({ id: D(), diff: a }), this.currentIndex += 1, this.patches.length > this.maxHistoryLength && (this.baseState = this.diffPatcher.patch(this.baseState, this.patches[0].diff), this.patches.shift(), this.currentIndex -= 1, this.baseStateChangesCount += 1), console.log("Состояние сохранено. Текущий индекс истории:", this.currentIndex);
|
|
913
909
|
}
|
|
914
910
|
/**
|
|
915
911
|
* Функция загрузки состояния в канвас.
|
|
916
|
-
* @param {
|
|
912
|
+
* @param {Partial<Canvas>} fullState - полное состояние канваса
|
|
917
913
|
* @fires editor:history-state-loaded
|
|
918
914
|
*/
|
|
919
915
|
loadStateFromFullState(e) {
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
fullState: e,
|
|
938
|
-
currentIndex: t.currentIndex,
|
|
939
|
-
totalChangesCount: t.totalChangesCount,
|
|
940
|
-
baseStateChangesCount: t.baseStateChangesCount,
|
|
941
|
-
patchesCount: t.patches.length,
|
|
942
|
-
patches: t.patches
|
|
943
|
-
});
|
|
944
|
-
}
|
|
945
|
-
})();
|
|
916
|
+
return b(this, null, function* () {
|
|
917
|
+
if (!e) return;
|
|
918
|
+
console.log("loadStateFromFullState fullState", e);
|
|
919
|
+
const { canvas: t, canvasManager: a, interactionBlocker: s } = this.editor, { width: i, height: n } = t;
|
|
920
|
+
yield t.loadFromJSON(e);
|
|
921
|
+
const o = t.getObjects().find((d) => d.id === "montage-area");
|
|
922
|
+
o && (this.editor.montageArea = o, (i !== e.width || n !== e.height) && a.updateCanvasAndFitObjects());
|
|
923
|
+
const c = t.getObjects().find((d) => d.id === "overlay-mask");
|
|
924
|
+
c && (s.overlayMask = c, s.overlayMask.visible = !1), t.renderAll(), t.fire("editor:history-state-loaded", {
|
|
925
|
+
fullState: e,
|
|
926
|
+
currentIndex: this.currentIndex,
|
|
927
|
+
totalChangesCount: this.totalChangesCount,
|
|
928
|
+
baseStateChangesCount: this.baseStateChangesCount,
|
|
929
|
+
patchesCount: this.patches.length,
|
|
930
|
+
patches: this.patches
|
|
931
|
+
});
|
|
932
|
+
});
|
|
946
933
|
}
|
|
947
934
|
/**
|
|
948
935
|
* Undo – отмена последнего действия, восстанавливая состояние по накопленным диффам.
|
|
949
936
|
* @fires editor:undo
|
|
950
937
|
*/
|
|
951
938
|
undo() {
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
if (e.currentIndex <= 0) {
|
|
939
|
+
return b(this, null, function* () {
|
|
940
|
+
if (!this.skipHistory) {
|
|
941
|
+
if (this.currentIndex <= 0) {
|
|
956
942
|
console.log("Нет предыдущих состояний для отмены.");
|
|
957
943
|
return;
|
|
958
944
|
}
|
|
959
|
-
|
|
945
|
+
this.suspendHistory();
|
|
960
946
|
try {
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
yield
|
|
964
|
-
fullState:
|
|
965
|
-
currentIndex:
|
|
966
|
-
totalChangesCount:
|
|
967
|
-
baseStateChangesCount:
|
|
968
|
-
patchesCount:
|
|
969
|
-
patches:
|
|
947
|
+
this.currentIndex -= 1, this.totalChangesCount -= 1;
|
|
948
|
+
const e = this.getFullState();
|
|
949
|
+
yield this.loadStateFromFullState(e), console.log("Undo выполнен. Текущий индекс истории:", this.currentIndex), this.canvas.fire("editor:undo", {
|
|
950
|
+
fullState: e,
|
|
951
|
+
currentIndex: this.currentIndex,
|
|
952
|
+
totalChangesCount: this.totalChangesCount,
|
|
953
|
+
baseStateChangesCount: this.baseStateChangesCount,
|
|
954
|
+
patchesCount: this.patches.length,
|
|
955
|
+
patches: this.patches
|
|
970
956
|
});
|
|
971
|
-
} catch (
|
|
972
|
-
|
|
973
|
-
|
|
957
|
+
} catch (e) {
|
|
958
|
+
this.editor.errorManager.emitError({
|
|
959
|
+
origin: "HistoryManager",
|
|
960
|
+
method: "undo",
|
|
961
|
+
code: "UNDO_ERROR",
|
|
962
|
+
message: "Ошибка отмены действия",
|
|
963
|
+
data: e
|
|
974
964
|
});
|
|
975
965
|
} finally {
|
|
976
|
-
|
|
966
|
+
this.resumeHistory();
|
|
977
967
|
}
|
|
978
968
|
}
|
|
979
|
-
})
|
|
969
|
+
});
|
|
980
970
|
}
|
|
981
971
|
/**
|
|
982
972
|
* Redo – повтор ранее отменённого действия.
|
|
983
973
|
* @fires editor:redo
|
|
984
974
|
*/
|
|
985
975
|
redo() {
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
if (e.currentIndex >= e.patches.length) {
|
|
976
|
+
return b(this, null, function* () {
|
|
977
|
+
if (!this.skipHistory) {
|
|
978
|
+
if (this.currentIndex >= this.patches.length) {
|
|
990
979
|
console.log("Нет состояний для повтора.");
|
|
991
980
|
return;
|
|
992
981
|
}
|
|
993
|
-
|
|
982
|
+
this.suspendHistory();
|
|
994
983
|
try {
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
console.log("fullState",
|
|
998
|
-
fullState:
|
|
999
|
-
currentIndex:
|
|
1000
|
-
totalChangesCount:
|
|
1001
|
-
baseStateChangesCount:
|
|
1002
|
-
patchesCount:
|
|
1003
|
-
patches:
|
|
984
|
+
this.currentIndex += 1, this.totalChangesCount += 1;
|
|
985
|
+
const e = this.getFullState();
|
|
986
|
+
console.log("fullState", e), yield this.loadStateFromFullState(e), console.log("Redo выполнен. Текущий индекс истории:", this.currentIndex), this.canvas.fire("editor:redo", {
|
|
987
|
+
fullState: e,
|
|
988
|
+
currentIndex: this.currentIndex,
|
|
989
|
+
totalChangesCount: this.totalChangesCount,
|
|
990
|
+
baseStateChangesCount: this.baseStateChangesCount,
|
|
991
|
+
patchesCount: this.patches.length,
|
|
992
|
+
patches: this.patches
|
|
1004
993
|
});
|
|
1005
|
-
} catch (
|
|
1006
|
-
|
|
1007
|
-
|
|
994
|
+
} catch (e) {
|
|
995
|
+
this.editor.errorManager.emitError({
|
|
996
|
+
origin: "HistoryManager",
|
|
997
|
+
method: "redo",
|
|
998
|
+
code: "REDO_ERROR",
|
|
999
|
+
message: "Ошибка повтора действия",
|
|
1000
|
+
data: e
|
|
1008
1001
|
});
|
|
1009
1002
|
} finally {
|
|
1010
|
-
|
|
1003
|
+
this.resumeHistory();
|
|
1011
1004
|
}
|
|
1012
1005
|
}
|
|
1013
|
-
})();
|
|
1014
|
-
}
|
|
1015
|
-
}
|
|
1016
|
-
const ht = 0.1, gt = 2, Mt = 0.1, vt = 90, x = 16, B = 16, w = 4096, O = 4096;
|
|
1017
|
-
function Se(o, e, t, a, n, i, s) {
|
|
1018
|
-
try {
|
|
1019
|
-
var r = o[i](s), c = r.value;
|
|
1020
|
-
} catch (u) {
|
|
1021
|
-
return void t(u);
|
|
1022
|
-
}
|
|
1023
|
-
r.done ? e(c) : Promise.resolve(c).then(a, n);
|
|
1024
|
-
}
|
|
1025
|
-
function k(o) {
|
|
1026
|
-
return function() {
|
|
1027
|
-
var e = this, t = arguments;
|
|
1028
|
-
return new Promise(function(a, n) {
|
|
1029
|
-
var i = o.apply(e, t);
|
|
1030
|
-
function s(c) {
|
|
1031
|
-
Se(i, a, n, s, r, "next", c);
|
|
1032
|
-
}
|
|
1033
|
-
function r(c) {
|
|
1034
|
-
Se(i, a, n, s, r, "throw", c);
|
|
1035
|
-
}
|
|
1036
|
-
s(void 0);
|
|
1037
1006
|
});
|
|
1038
|
-
}
|
|
1007
|
+
}
|
|
1039
1008
|
}
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
*/
|
|
1045
|
-
constructor(e) {
|
|
1046
|
-
var {
|
|
1047
|
-
editor: t
|
|
1048
|
-
} = e;
|
|
1049
|
-
this.editor = t, this.options = t.options, this._createdBlobUrls = [], this.acceptContentTypes = this.editor.options.acceptContentTypes, this.acceptFormats = this.getAllowedFormatsFromContentTypes();
|
|
1009
|
+
const qe = 0.1, et = 2, tt = 0.1, at = 90, B = 16, U = 16, O = 4096, T = 4096;
|
|
1010
|
+
class C {
|
|
1011
|
+
constructor({ editor: e }) {
|
|
1012
|
+
this.editor = e, this.options = e.options, this._createdBlobUrls = [], this.acceptContentTypes = this.editor.options.acceptContentTypes, this.acceptFormats = this.getAllowedFormatsFromContentTypes();
|
|
1050
1013
|
}
|
|
1051
1014
|
/**
|
|
1052
1015
|
* Импорт изображения
|
|
1053
|
-
* @param
|
|
1054
|
-
* @param
|
|
1055
|
-
* @param
|
|
1016
|
+
* @param options
|
|
1017
|
+
* @param options.source - URL изображения или объект File
|
|
1018
|
+
* @param options.scale - Если изображение не вписывается в допустимые размеры, то как масштабировать:
|
|
1056
1019
|
* 'image-contain' - скейлит картинку, чтобы она вписалась в монтажную область
|
|
1057
1020
|
* 'image-cover' - скейлит картинку, чтобы она вписалась в монтажную область
|
|
1058
1021
|
* 'scale-montage' - Обновляет backstore-резолюцию монтажной области (масштабирует
|
|
1059
1022
|
* экспортный размер канваса под размер изображения)
|
|
1060
|
-
* @param
|
|
1061
|
-
* @returns
|
|
1023
|
+
* @param options.withoutSave - Не сохранять в историю изменений
|
|
1024
|
+
* @returns возвращает Promise с объектом изображения или null в случае ошибки
|
|
1062
1025
|
*/
|
|
1063
|
-
importImage(
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
} = e;
|
|
1071
|
-
if (!
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
montageArea: r,
|
|
1075
|
-
transformManager: c,
|
|
1076
|
-
historyManager: u,
|
|
1077
|
-
errorManager: l
|
|
1078
|
-
} = t.editor, d = yield t.getContentType(a), h = D.getFormatFromContentType(d), {
|
|
1079
|
-
acceptContentTypes: g,
|
|
1080
|
-
acceptFormats: v
|
|
1081
|
-
} = t;
|
|
1082
|
-
if (!t.isAllowedContentType(d)) {
|
|
1083
|
-
var f = "Неверный contentType для изображения: ".concat(d, ". Ожидается один из: ").concat(t.acceptContentTypes.join(", "), ".");
|
|
1084
|
-
return l.emitError({
|
|
1026
|
+
importImage(s) {
|
|
1027
|
+
return b(this, arguments, function* ({
|
|
1028
|
+
source: e,
|
|
1029
|
+
scale: t = `image-${this.options.scaleType}`,
|
|
1030
|
+
withoutSave: a = !1
|
|
1031
|
+
}) {
|
|
1032
|
+
if (!e) return null;
|
|
1033
|
+
const { canvas: i, montageArea: n, transformManager: o, historyManager: c, errorManager: d } = this.editor, l = yield this.getContentType(e), h = C.getFormatFromContentType(l), { acceptContentTypes: g, acceptFormats: u } = this;
|
|
1034
|
+
if (!this.isAllowedContentType(l)) {
|
|
1035
|
+
const m = `Неверный contentType для изображения: ${l}. Ожидается один из: ${this.acceptContentTypes.join(", ")}.`;
|
|
1036
|
+
return d.emitError({
|
|
1085
1037
|
origin: "ImageManager",
|
|
1086
1038
|
method: "importImage",
|
|
1087
1039
|
code: "INVALID_CONTENT_TYPE",
|
|
1088
|
-
message:
|
|
1089
|
-
data: {
|
|
1090
|
-
source: a,
|
|
1091
|
-
format: h,
|
|
1092
|
-
contentType: d,
|
|
1093
|
-
acceptContentTypes: g,
|
|
1094
|
-
acceptFormats: v
|
|
1095
|
-
}
|
|
1040
|
+
message: m,
|
|
1041
|
+
data: { source: e, format: h, contentType: l, acceptContentTypes: g, acceptFormats: u }
|
|
1096
1042
|
}), null;
|
|
1097
1043
|
}
|
|
1098
|
-
|
|
1044
|
+
c.suspendHistory();
|
|
1099
1045
|
try {
|
|
1100
|
-
|
|
1101
|
-
if (
|
|
1102
|
-
m = URL.createObjectURL(
|
|
1103
|
-
else if (typeof
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
}), N = yield S.blob({
|
|
1107
|
-
type: d,
|
|
1108
|
-
quality: 1
|
|
1109
|
-
});
|
|
1110
|
-
m = URL.createObjectURL(N);
|
|
1046
|
+
let m, M;
|
|
1047
|
+
if (e instanceof File)
|
|
1048
|
+
m = URL.createObjectURL(e);
|
|
1049
|
+
else if (typeof e == "string") {
|
|
1050
|
+
const y = yield (yield fetch(e, { mode: "cors" })).blob();
|
|
1051
|
+
m = URL.createObjectURL(y);
|
|
1111
1052
|
} else
|
|
1112
|
-
return
|
|
1053
|
+
return d.emitError({
|
|
1113
1054
|
origin: "ImageManager",
|
|
1114
1055
|
method: "importImage",
|
|
1115
1056
|
code: "INVALID_SOURCE_TYPE",
|
|
1116
1057
|
message: "Неверный тип источника изображения. Ожидается URL или объект File.",
|
|
1117
|
-
data: {
|
|
1118
|
-
source: a,
|
|
1119
|
-
format: h,
|
|
1120
|
-
contentType: d,
|
|
1121
|
-
acceptContentTypes: g,
|
|
1122
|
-
acceptFormats: v
|
|
1123
|
-
}
|
|
1058
|
+
data: { source: e, format: h, contentType: l, acceptContentTypes: g, acceptFormats: u }
|
|
1124
1059
|
}), null;
|
|
1125
|
-
if (
|
|
1126
|
-
|
|
1127
|
-
M =
|
|
1060
|
+
if (this._createdBlobUrls.push(m), h === "svg") {
|
|
1061
|
+
const v = yield ye(m);
|
|
1062
|
+
M = H.groupSVGElements(v.objects, v.options);
|
|
1128
1063
|
} else
|
|
1129
|
-
M = yield
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
crossOrigin: "anonymous"
|
|
1140
|
-
}
|
|
1141
|
-
} else if (y < B || L < x) {
|
|
1142
|
-
var W = yield t.resizeImageToBoundaries(M._element.src, "min"), z = URL.createObjectURL(W);
|
|
1143
|
-
t._createdBlobUrls.push(z), M = yield ee.fromURL(z, {
|
|
1144
|
-
crossOrigin: "anonymous"
|
|
1145
|
-
});
|
|
1064
|
+
M = yield Z.fromURL(m, { crossOrigin: "anonymous" });
|
|
1065
|
+
const { width: j, height: w } = M;
|
|
1066
|
+
if (M instanceof Z) {
|
|
1067
|
+
const v = M.getElement();
|
|
1068
|
+
let y = "";
|
|
1069
|
+
if (v instanceof HTMLImageElement ? y = v.src : v instanceof HTMLCanvasElement && (y = v.toDataURL()), w > T || j > O) {
|
|
1070
|
+
const L = yield this.resizeImageToBoundaries(y, "max"), k = URL.createObjectURL(L);
|
|
1071
|
+
this._createdBlobUrls.push(k), M = yield Z.fromURL(k, { crossOrigin: "anonymous" });
|
|
1072
|
+
} else if (w < U || j < B) {
|
|
1073
|
+
const L = yield this.resizeImageToBoundaries(y, "min"), k = URL.createObjectURL(L);
|
|
1074
|
+
this._createdBlobUrls.push(k), M = yield Z.fromURL(k, { crossOrigin: "anonymous" });
|
|
1075
|
+
}
|
|
1146
1076
|
}
|
|
1147
|
-
if (M.set("id",
|
|
1148
|
-
|
|
1149
|
-
object: M,
|
|
1150
|
-
withoutSave: !0
|
|
1151
|
-
});
|
|
1077
|
+
if (M.set("id", `${M.type}-${D()}`), M.set("format", h), t === "scale-montage")
|
|
1078
|
+
this.editor.canvasManager.scaleMontageAreaToImage({ object: M, withoutSave: !0 });
|
|
1152
1079
|
else {
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
height: U
|
|
1156
|
-
} = r, _ = t.calculateScaleFactor({
|
|
1157
|
-
imageObject: M,
|
|
1158
|
-
scaleType: n
|
|
1159
|
-
});
|
|
1160
|
-
n === "image-contain" && _ < 1 ? c.fitObject({
|
|
1161
|
-
object: M,
|
|
1162
|
-
type: "contain",
|
|
1163
|
-
withoutSave: !0
|
|
1164
|
-
}) : n === "image-cover" && (L > F || y > U) && c.fitObject({
|
|
1165
|
-
object: M,
|
|
1166
|
-
type: "cover",
|
|
1167
|
-
withoutSave: !0
|
|
1168
|
-
});
|
|
1080
|
+
const { width: v, height: y } = n, L = this.calculateScaleFactor({ imageObject: M, scaleType: t });
|
|
1081
|
+
t === "image-contain" && L < 1 ? o.fitObject({ object: M, type: "contain", withoutSave: !0 }) : t === "image-cover" && (j > v || w > y) && o.fitObject({ object: M, type: "cover", withoutSave: !0 });
|
|
1169
1082
|
}
|
|
1170
|
-
|
|
1171
|
-
|
|
1083
|
+
i.add(M), i.centerObject(M), i.setActiveObject(M), i.renderAll(), c.resumeHistory(), a || c.saveState();
|
|
1084
|
+
const I = {
|
|
1172
1085
|
image: M,
|
|
1173
1086
|
format: h,
|
|
1174
|
-
contentType:
|
|
1175
|
-
scale:
|
|
1176
|
-
withoutSave:
|
|
1177
|
-
source:
|
|
1087
|
+
contentType: l,
|
|
1088
|
+
scale: t,
|
|
1089
|
+
withoutSave: a,
|
|
1090
|
+
source: e
|
|
1178
1091
|
};
|
|
1179
|
-
return
|
|
1180
|
-
} catch (
|
|
1181
|
-
return
|
|
1092
|
+
return i.fire("editor:image-imported", I), I;
|
|
1093
|
+
} catch (m) {
|
|
1094
|
+
return d.emitError({
|
|
1182
1095
|
origin: "ImageManager",
|
|
1183
1096
|
method: "importImage",
|
|
1184
1097
|
code: "IMPORT_FAILED",
|
|
1185
|
-
message:
|
|
1186
|
-
data: {
|
|
1187
|
-
|
|
1188
|
-
format: h,
|
|
1189
|
-
contentType: d,
|
|
1190
|
-
scale: n,
|
|
1191
|
-
withoutSave: i
|
|
1192
|
-
}
|
|
1193
|
-
}), u.resumeHistory(), null;
|
|
1098
|
+
message: `Ошибка импорта изображения: ${m.message}`,
|
|
1099
|
+
data: { source: e, format: h, contentType: l, scale: t, withoutSave: a }
|
|
1100
|
+
}), c.resumeHistory(), null;
|
|
1194
1101
|
}
|
|
1195
|
-
})
|
|
1102
|
+
});
|
|
1196
1103
|
}
|
|
1197
1104
|
/**
|
|
1198
1105
|
* Функция для ресайза изображения до максимальных размеров,
|
|
1199
1106
|
* если оно их превышает. Сохраняет пропорции.
|
|
1200
1107
|
*
|
|
1201
|
-
* @param {
|
|
1108
|
+
* @param {string} dataURL - dataURL изображения
|
|
1202
1109
|
* @param {string} [size='max | min'] - максимальный или минимальный размер
|
|
1203
|
-
* @returns {Promise<
|
|
1204
|
-
*/
|
|
1205
|
-
resizeImageToBoundaries(e) {
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
var s = {
|
|
1110
|
+
* @returns {Promise<Blob>} - возвращает Promise с Blob-объектом уменьшенного изображения
|
|
1111
|
+
*/
|
|
1112
|
+
resizeImageToBoundaries(e, t = "max") {
|
|
1113
|
+
return b(this, null, function* () {
|
|
1114
|
+
let a = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${O}x${T}`;
|
|
1115
|
+
t === "min" && (a = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${B}x${U}`);
|
|
1116
|
+
const s = {
|
|
1211
1117
|
dataURL: e,
|
|
1212
|
-
sizeType:
|
|
1213
|
-
maxWidth:
|
|
1214
|
-
maxHeight:
|
|
1215
|
-
minWidth:
|
|
1216
|
-
minHeight:
|
|
1118
|
+
sizeType: t,
|
|
1119
|
+
maxWidth: O,
|
|
1120
|
+
maxHeight: T,
|
|
1121
|
+
minWidth: B,
|
|
1122
|
+
minHeight: U
|
|
1217
1123
|
};
|
|
1218
|
-
return
|
|
1124
|
+
return this.editor.errorManager.emitWarning({
|
|
1219
1125
|
origin: "ImageManager",
|
|
1220
1126
|
method: "resizeImageToBoundaries",
|
|
1221
1127
|
code: "IMAGE_RESIZE_WARNING",
|
|
1222
|
-
message:
|
|
1128
|
+
message: a,
|
|
1223
1129
|
data: s
|
|
1224
|
-
}),
|
|
1225
|
-
})
|
|
1130
|
+
}), this.editor.workerManager.post("resizeImage", s);
|
|
1131
|
+
});
|
|
1226
1132
|
}
|
|
1227
1133
|
/**
|
|
1228
1134
|
* Экспорт изображения в файл – экспортируется содержимое монтажной области.
|
|
1229
1135
|
* Независимо от текущего зума, экспортируется монтажная область в исходном масштабе. Можно экспортировать как base64.
|
|
1230
|
-
* @param
|
|
1231
|
-
* @param
|
|
1232
|
-
* @param
|
|
1233
|
-
* @param
|
|
1234
|
-
* @param
|
|
1235
|
-
* @returns
|
|
1136
|
+
* @param options - опции
|
|
1137
|
+
* @param options.fileName - имя файла
|
|
1138
|
+
* @param options.contentType - тип контента
|
|
1139
|
+
* @param options.exportAsBase64 - экспортировать как base64
|
|
1140
|
+
* @param options.exportAsBlob - экспортировать как blob
|
|
1141
|
+
* @returns возвращает Promise с объектом файла или null в случае ошибки
|
|
1236
1142
|
* @fires editor:canvas-exported
|
|
1237
1143
|
*/
|
|
1238
1144
|
exportCanvasAsImageFile() {
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
} = e.length > 0 && e[0] !== void 0 ? e[0] : {}, {
|
|
1247
|
-
canvas: r,
|
|
1248
|
-
montageArea: c,
|
|
1249
|
-
workerManager: u
|
|
1250
|
-
} = t.editor;
|
|
1145
|
+
return b(this, arguments, function* ({
|
|
1146
|
+
fileName: e = "image.png",
|
|
1147
|
+
contentType: t = "image/png",
|
|
1148
|
+
exportAsBase64: a = !1,
|
|
1149
|
+
exportAsBlob: s = !1
|
|
1150
|
+
} = {}) {
|
|
1151
|
+
const { canvas: i, montageArea: n, workerManager: o } = this.editor;
|
|
1251
1152
|
try {
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
left: g,
|
|
1256
|
-
top: v,
|
|
1257
|
-
width: f,
|
|
1258
|
-
height: m
|
|
1259
|
-
} = c.getBoundingRect(), M = yield r.clone(["id", "format", "locked"]);
|
|
1153
|
+
const c = t === "application/pdf", d = c ? "image/jpg" : t, l = C.getFormatFromContentType(d);
|
|
1154
|
+
n.setCoords();
|
|
1155
|
+
const { left: h, top: g, width: u, height: m } = n.getBoundingRect(), M = yield i.clone(["id", "format", "locked"]);
|
|
1260
1156
|
["image/jpg", "image/jpeg"].includes(d) && (M.backgroundColor = "#ffffff");
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
backstoreOnly: !0
|
|
1267
|
-
}), M.renderAll();
|
|
1268
|
-
var N = M.getObjects().filter((p) => p.format).every((p) => p.format === "svg");
|
|
1269
|
-
if (h === "svg" && N) {
|
|
1270
|
-
var E = M.toSVG();
|
|
1157
|
+
const j = M.getObjects().find((f) => f.id === n.id);
|
|
1158
|
+
j && (j.visible = !1), M.viewportTransform = [1, 0, 0, 1, -h, -g], M.setDimensions({ width: u, height: m }, { backstoreOnly: !0 }), M.renderAll();
|
|
1159
|
+
const w = M.getObjects().filter((f) => f.format).every((f) => f.format === "svg");
|
|
1160
|
+
if (l === "svg" && w) {
|
|
1161
|
+
const f = M.toSVG();
|
|
1271
1162
|
M.dispose();
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1163
|
+
const A = {
|
|
1164
|
+
image: C._exportSVGStringAsFile(f, {
|
|
1165
|
+
exportAsBase64: a,
|
|
1166
|
+
exportAsBlob: s,
|
|
1167
|
+
fileName: e
|
|
1168
|
+
}),
|
|
1278
1169
|
format: "svg",
|
|
1279
1170
|
contentType: "image/svg+xml",
|
|
1280
|
-
fileName:
|
|
1171
|
+
fileName: e.replace(/\.[^/.]+$/, ".svg")
|
|
1281
1172
|
};
|
|
1282
|
-
return
|
|
1173
|
+
return i.fire("editor:canvas-exported", A), A;
|
|
1283
1174
|
}
|
|
1284
|
-
|
|
1285
|
-
M.getElement().toBlob(
|
|
1175
|
+
const I = yield new Promise((f, x) => {
|
|
1176
|
+
M.getElement().toBlob((A) => {
|
|
1177
|
+
A ? f(A) : x(new Error("Failed to create Blob from canvas"));
|
|
1178
|
+
});
|
|
1286
1179
|
});
|
|
1287
1180
|
if (M.dispose(), s) {
|
|
1288
|
-
|
|
1289
|
-
image:
|
|
1290
|
-
format:
|
|
1181
|
+
const f = {
|
|
1182
|
+
image: I,
|
|
1183
|
+
format: l,
|
|
1291
1184
|
contentType: d,
|
|
1292
|
-
fileName:
|
|
1185
|
+
fileName: e
|
|
1293
1186
|
};
|
|
1294
|
-
return
|
|
1187
|
+
return i.fire("editor:canvas-exported", f), f;
|
|
1295
1188
|
}
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
quality: 1,
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
if (
|
|
1302
|
-
|
|
1303
|
-
orientation:
|
|
1189
|
+
const v = yield createImageBitmap(I), y = yield o.post(
|
|
1190
|
+
"toDataURL",
|
|
1191
|
+
{ format: l, quality: 1, bitmap: v },
|
|
1192
|
+
[v]
|
|
1193
|
+
);
|
|
1194
|
+
if (c) {
|
|
1195
|
+
const x = u * 0.264583, A = m * 0.264583, me = (yield this.editor.moduleLoader.loadModule("jspdf")).jsPDF, G = new me({
|
|
1196
|
+
orientation: x > A ? "landscape" : "portrait",
|
|
1304
1197
|
unit: "mm",
|
|
1305
|
-
format: [
|
|
1198
|
+
format: [x, A]
|
|
1306
1199
|
});
|
|
1307
|
-
if (
|
|
1308
|
-
|
|
1309
|
-
image:
|
|
1200
|
+
if (G.addImage(y, "JPG", 0, 0, x, A), a) {
|
|
1201
|
+
const ne = {
|
|
1202
|
+
image: G.output("datauristring"),
|
|
1310
1203
|
format: "pdf",
|
|
1311
1204
|
contentType: "application/pdf",
|
|
1312
|
-
fileName:
|
|
1205
|
+
fileName: e
|
|
1313
1206
|
};
|
|
1314
|
-
return
|
|
1207
|
+
return i.fire("editor:canvas-exported", ne), ne;
|
|
1315
1208
|
}
|
|
1316
|
-
|
|
1317
|
-
type: "application/pdf"
|
|
1318
|
-
}), he = {
|
|
1319
|
-
image: Ee,
|
|
1209
|
+
const je = G.output("blob"), ie = {
|
|
1210
|
+
image: new File([je], e, { type: "application/pdf" }),
|
|
1320
1211
|
format: "pdf",
|
|
1321
1212
|
contentType: "application/pdf",
|
|
1322
|
-
fileName:
|
|
1213
|
+
fileName: e
|
|
1323
1214
|
};
|
|
1324
|
-
return
|
|
1215
|
+
return i.fire("editor:canvas-exported", ie), ie;
|
|
1325
1216
|
}
|
|
1326
|
-
if (
|
|
1327
|
-
|
|
1328
|
-
image:
|
|
1329
|
-
format:
|
|
1217
|
+
if (a) {
|
|
1218
|
+
const f = {
|
|
1219
|
+
image: y,
|
|
1220
|
+
format: l,
|
|
1330
1221
|
contentType: d,
|
|
1331
|
-
fileName:
|
|
1222
|
+
fileName: e
|
|
1332
1223
|
};
|
|
1333
|
-
return
|
|
1224
|
+
return i.fire("editor:canvas-exported", f), f;
|
|
1334
1225
|
}
|
|
1335
|
-
|
|
1336
|
-
type: d
|
|
1337
|
-
|
|
1338
|
-
image: Le,
|
|
1339
|
-
format: h,
|
|
1226
|
+
const L = l === "svg" && !w ? e.replace(/\.[^/.]+$/, ".png") : e, se = {
|
|
1227
|
+
image: new File([I], L, { type: d }),
|
|
1228
|
+
format: l,
|
|
1340
1229
|
contentType: d,
|
|
1341
|
-
fileName:
|
|
1230
|
+
fileName: L
|
|
1342
1231
|
};
|
|
1343
|
-
return
|
|
1344
|
-
} catch (
|
|
1345
|
-
return
|
|
1232
|
+
return i.fire("editor:canvas-exported", se), se;
|
|
1233
|
+
} catch (c) {
|
|
1234
|
+
return this.editor.errorManager.emitError({
|
|
1346
1235
|
origin: "ImageManager",
|
|
1347
1236
|
method: "exportCanvasAsImageFile",
|
|
1348
1237
|
code: "IMAGE_EXPORT_FAILED",
|
|
1349
|
-
message:
|
|
1350
|
-
data: {
|
|
1351
|
-
|
|
1352
|
-
fileName: a,
|
|
1353
|
-
exportAsBase64: i,
|
|
1354
|
-
exportAsBlob: s
|
|
1355
|
-
}
|
|
1356
|
-
}), "";
|
|
1238
|
+
message: `Ошибка экспорта изображения: ${c.message}`,
|
|
1239
|
+
data: { contentType: t, fileName: e, exportAsBase64: a, exportAsBlob: s }
|
|
1240
|
+
}), null;
|
|
1357
1241
|
}
|
|
1358
|
-
})
|
|
1242
|
+
});
|
|
1359
1243
|
}
|
|
1360
1244
|
/**
|
|
1361
1245
|
* Экспорт выбранного объекта в виде изображения или base64
|
|
1362
|
-
* @param
|
|
1363
|
-
* @param
|
|
1364
|
-
* @param
|
|
1365
|
-
* @param
|
|
1366
|
-
* @param
|
|
1367
|
-
* @param
|
|
1368
|
-
* @returns
|
|
1246
|
+
* @param options - опции
|
|
1247
|
+
* @param options.object - объект для экспорта
|
|
1248
|
+
* @param options.fileName - имя файла
|
|
1249
|
+
* @param options.contentType - тип контента
|
|
1250
|
+
* @param options.exportAsBase64 - экспортировать как base64
|
|
1251
|
+
* @param options.exportAsBlob - экспортировать как blob
|
|
1252
|
+
* @returns - возвращает Promise с объектом файла или null в случае ошибки
|
|
1369
1253
|
* @fires editor:object-exported
|
|
1370
1254
|
*/
|
|
1371
1255
|
exportObjectAsImageFile() {
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
workerManager: u
|
|
1383
|
-
} = t.editor, l = a || c.getActiveObject();
|
|
1384
|
-
if (!l)
|
|
1385
|
-
return t.editor.errorManager.emitError({
|
|
1256
|
+
return b(this, arguments, function* ({
|
|
1257
|
+
object: e,
|
|
1258
|
+
fileName: t = "image.png",
|
|
1259
|
+
contentType: a = "image/png",
|
|
1260
|
+
exportAsBase64: s = !1,
|
|
1261
|
+
exportAsBlob: i = !1
|
|
1262
|
+
} = {}) {
|
|
1263
|
+
const { canvas: n, workerManager: o } = this.editor, c = e || n.getActiveObject();
|
|
1264
|
+
if (!c)
|
|
1265
|
+
return this.editor.errorManager.emitError({
|
|
1386
1266
|
origin: "ImageManager",
|
|
1387
1267
|
method: "exportObjectAsImageFile",
|
|
1388
1268
|
code: "NO_OBJECT_SELECTED",
|
|
1389
1269
|
message: "Не выбран объект для экспорта",
|
|
1390
|
-
data: {
|
|
1391
|
-
|
|
1392
|
-
fileName: n,
|
|
1393
|
-
exportAsBase64: s,
|
|
1394
|
-
exportAsBlob: r
|
|
1395
|
-
}
|
|
1396
|
-
}), "";
|
|
1270
|
+
data: { contentType: a, fileName: t, exportAsBase64: s, exportAsBlob: i }
|
|
1271
|
+
}), null;
|
|
1397
1272
|
try {
|
|
1398
|
-
|
|
1273
|
+
const d = C.getFormatFromContentType(a);
|
|
1399
1274
|
if (d === "svg") {
|
|
1400
|
-
|
|
1275
|
+
const m = c.toSVG(), M = C._exportSVGStringAsFile(m, {
|
|
1401
1276
|
exportAsBase64: s,
|
|
1402
|
-
exportAsBlob:
|
|
1403
|
-
fileName:
|
|
1404
|
-
}),
|
|
1405
|
-
|
|
1277
|
+
exportAsBlob: i,
|
|
1278
|
+
fileName: t
|
|
1279
|
+
}), j = {
|
|
1280
|
+
object: c,
|
|
1281
|
+
image: M,
|
|
1406
1282
|
format: d,
|
|
1407
1283
|
contentType: "image/svg+xml",
|
|
1408
|
-
fileName:
|
|
1284
|
+
fileName: t.replace(/\.[^/.]+$/, ".svg")
|
|
1409
1285
|
};
|
|
1410
|
-
return
|
|
1286
|
+
return n.fire("editor:object-exported", j), j;
|
|
1411
1287
|
}
|
|
1412
|
-
if (s) {
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1288
|
+
if (s && c instanceof Z) {
|
|
1289
|
+
const m = yield createImageBitmap(c.getElement()), M = yield o.post(
|
|
1290
|
+
"toDataURL",
|
|
1291
|
+
{
|
|
1292
|
+
format: d,
|
|
1293
|
+
quality: 1,
|
|
1294
|
+
bitmap: m
|
|
1295
|
+
},
|
|
1296
|
+
[m]
|
|
1297
|
+
), j = {
|
|
1298
|
+
object: c,
|
|
1299
|
+
image: M,
|
|
1419
1300
|
format: d,
|
|
1420
|
-
contentType:
|
|
1421
|
-
fileName:
|
|
1301
|
+
contentType: a,
|
|
1302
|
+
fileName: t
|
|
1422
1303
|
};
|
|
1423
|
-
return
|
|
1304
|
+
return n.fire("editor:object-exported", j), j;
|
|
1424
1305
|
}
|
|
1425
|
-
|
|
1426
|
-
|
|
1306
|
+
const l = c.toCanvasElement(), h = yield new Promise((m, M) => {
|
|
1307
|
+
l.toBlob((j) => {
|
|
1308
|
+
j ? m(j) : M(new Error("Failed to create Blob from canvas"));
|
|
1309
|
+
});
|
|
1427
1310
|
});
|
|
1428
|
-
if (
|
|
1429
|
-
|
|
1430
|
-
|
|
1311
|
+
if (i) {
|
|
1312
|
+
const m = {
|
|
1313
|
+
object: c,
|
|
1314
|
+
image: h,
|
|
1431
1315
|
format: d,
|
|
1432
|
-
contentType:
|
|
1433
|
-
fileName:
|
|
1316
|
+
contentType: a,
|
|
1317
|
+
fileName: t
|
|
1434
1318
|
};
|
|
1435
|
-
return
|
|
1319
|
+
return n.fire("editor:object-exported", m), m;
|
|
1436
1320
|
}
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
image: L,
|
|
1321
|
+
const g = new File([h], t, { type: a }), u = {
|
|
1322
|
+
object: c,
|
|
1323
|
+
image: g,
|
|
1441
1324
|
format: d,
|
|
1442
|
-
contentType:
|
|
1443
|
-
fileName:
|
|
1325
|
+
contentType: a,
|
|
1326
|
+
fileName: t
|
|
1444
1327
|
};
|
|
1445
|
-
return
|
|
1446
|
-
} catch (
|
|
1447
|
-
return
|
|
1328
|
+
return n.fire("editor:object-exported", u), u;
|
|
1329
|
+
} catch (d) {
|
|
1330
|
+
return this.editor.errorManager.emitError({
|
|
1448
1331
|
origin: "ImageManager",
|
|
1449
1332
|
method: "exportObjectAsImageFile",
|
|
1450
1333
|
code: "IMAGE_EXPORT_FAILED",
|
|
1451
|
-
message:
|
|
1452
|
-
data: {
|
|
1453
|
-
|
|
1454
|
-
fileName: n,
|
|
1455
|
-
exportAsBase64: s,
|
|
1456
|
-
exportAsBlob: r
|
|
1457
|
-
}
|
|
1458
|
-
}), "";
|
|
1334
|
+
message: `Ошибка экспорта объекта: ${d.message}`,
|
|
1335
|
+
data: { contentType: a, fileName: t, exportAsBase64: s, exportAsBlob: i }
|
|
1336
|
+
}), null;
|
|
1459
1337
|
}
|
|
1460
|
-
})
|
|
1338
|
+
});
|
|
1461
1339
|
}
|
|
1462
1340
|
/**
|
|
1463
1341
|
* Удаляет все созданные blobURL
|
|
1464
|
-
* @returns {void}
|
|
1465
1342
|
*/
|
|
1466
1343
|
revokeBlobUrls() {
|
|
1467
1344
|
this._createdBlobUrls.forEach(URL.revokeObjectURL), this._createdBlobUrls = [];
|
|
1468
1345
|
}
|
|
1469
|
-
/**
|
|
1470
|
-
* Преобразует SVG-строку в Blob, файл, или base64
|
|
1471
|
-
* @param {string} svgString - SVG-строка
|
|
1472
|
-
* @param {Object} options - опции
|
|
1473
|
-
* @param {Boolean} options.exportAsBase64 - экспортировать как base64
|
|
1474
|
-
* @param {Boolean} options.exportAsBlob - экспортировать как blob
|
|
1475
|
-
* @param {String} options.fileName - имя файла
|
|
1476
|
-
* @returns {Blob|String|File} - Blob, base64 или файл
|
|
1477
|
-
* @private
|
|
1478
|
-
* @static
|
|
1479
|
-
*/
|
|
1480
|
-
static _exportSVGStringAsFile(e) {
|
|
1481
|
-
var {
|
|
1482
|
-
exportAsBase64: t,
|
|
1483
|
-
exportAsBlob: a,
|
|
1484
|
-
fileName: n
|
|
1485
|
-
} = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
|
|
1486
|
-
return a ? new Blob([e], {
|
|
1487
|
-
type: "image/svg+xml"
|
|
1488
|
-
}) : t ? "data:image/svg+xml;base64,".concat(btoa(e)) : new File([e], n.replace(/\.[^/.]+$/, ".svg"), {
|
|
1489
|
-
type: "image/svg+xml"
|
|
1490
|
-
});
|
|
1491
|
-
}
|
|
1492
1346
|
/**
|
|
1493
1347
|
* Получает список допустимых форматов изображений
|
|
1494
|
-
* @returns
|
|
1348
|
+
* @returns массив допустимых форматов изображений
|
|
1495
1349
|
*/
|
|
1496
1350
|
getAllowedFormatsFromContentTypes() {
|
|
1497
|
-
return this.acceptContentTypes.map((e) =>
|
|
1498
|
-
}
|
|
1499
|
-
/**
|
|
1500
|
-
* Извлекает чистый формат (subtype) из contentType,
|
|
1501
|
-
* отбросив любую часть после «+» или «;»
|
|
1502
|
-
* @param {string} contentType
|
|
1503
|
-
* @returns {string} формат, например 'png', 'jpeg', 'svg'
|
|
1504
|
-
* @static
|
|
1505
|
-
*/
|
|
1506
|
-
static getFormatFromContentType() {
|
|
1507
|
-
var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "", t = e.match(/^[^/]+\/([^+;]+)/);
|
|
1508
|
-
return t ? t[1] : "";
|
|
1351
|
+
return this.acceptContentTypes.map((e) => C.getFormatFromContentType(e)).filter((e) => e);
|
|
1509
1352
|
}
|
|
1510
1353
|
/**
|
|
1511
1354
|
* Проверяет, является ли contentType допустимым типом изображения.
|
|
1512
|
-
* @
|
|
1513
|
-
* @returns {boolean} true, если contentType допустим, иначе false
|
|
1355
|
+
* @returns true, если contentType допустим, иначе false
|
|
1514
1356
|
*/
|
|
1515
|
-
isAllowedContentType() {
|
|
1516
|
-
var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "";
|
|
1357
|
+
isAllowedContentType(e = "") {
|
|
1517
1358
|
return this.acceptContentTypes.includes(e);
|
|
1518
1359
|
}
|
|
1519
1360
|
/**
|
|
1520
1361
|
* Получает contentType изображения из источника
|
|
1521
|
-
* @param
|
|
1522
|
-
* @returns
|
|
1362
|
+
* @param source - URL изображения или объект File
|
|
1363
|
+
* @returns MIME-тип изображения
|
|
1523
1364
|
* @public
|
|
1524
1365
|
*/
|
|
1525
1366
|
getContentType(e) {
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
})();
|
|
1367
|
+
return b(this, null, function* () {
|
|
1368
|
+
return typeof e == "string" ? this.getContentTypeFromUrl(e) : e.type || "application/octet-stream";
|
|
1369
|
+
});
|
|
1530
1370
|
}
|
|
1531
1371
|
/**
|
|
1532
1372
|
* Получает contentType изображения через HTTP HEAD запрос или анализ URL
|
|
1533
|
-
* @param
|
|
1534
|
-
* @returns
|
|
1373
|
+
* @param src - URL изображения
|
|
1374
|
+
* @returns MIME-тип изображения
|
|
1535
1375
|
* @public
|
|
1536
1376
|
*/
|
|
1537
1377
|
getContentTypeFromUrl(e) {
|
|
1538
|
-
|
|
1539
|
-
return k(function* () {
|
|
1378
|
+
return b(this, null, function* () {
|
|
1540
1379
|
if (e.startsWith("data:")) {
|
|
1541
|
-
|
|
1542
|
-
return
|
|
1380
|
+
const t = e.match(/^data:([^;]+)/);
|
|
1381
|
+
return t ? t[1] : "application/octet-stream";
|
|
1543
1382
|
}
|
|
1544
1383
|
try {
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
} catch (s) {
|
|
1551
|
-
console.warn("HEAD запрос неудачен, определяем тип по расширению:", s);
|
|
1384
|
+
const a = (yield fetch(e, { method: "HEAD" })).headers.get("content-type");
|
|
1385
|
+
if (a && a.startsWith("image/"))
|
|
1386
|
+
return a.split(";")[0];
|
|
1387
|
+
} catch (t) {
|
|
1388
|
+
console.warn("HEAD запрос неудачен, определяем тип по расширению:", t);
|
|
1552
1389
|
}
|
|
1553
|
-
return
|
|
1554
|
-
})
|
|
1390
|
+
return this.getContentTypeFromExtension(e);
|
|
1391
|
+
});
|
|
1555
1392
|
}
|
|
1556
1393
|
/**
|
|
1557
1394
|
* Определяет contentType по расширению файла в URL
|
|
1558
|
-
* @param
|
|
1559
|
-
* @returns
|
|
1395
|
+
* @param url - URL файла
|
|
1396
|
+
* @returns - MIME-тип
|
|
1560
1397
|
* @public
|
|
1561
1398
|
*/
|
|
1562
1399
|
getContentTypeFromExtension(e) {
|
|
1400
|
+
var t;
|
|
1563
1401
|
try {
|
|
1564
|
-
|
|
1565
|
-
return this.acceptContentTypes.forEach((
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
-
}), i[
|
|
1569
|
-
} catch (
|
|
1570
|
-
return console.warn("Не удалось определить расширение из URL:", e,
|
|
1402
|
+
const s = (t = new URL(e).pathname.split(".").pop()) == null ? void 0 : t.toLowerCase(), i = {};
|
|
1403
|
+
return this.acceptContentTypes.forEach((n) => {
|
|
1404
|
+
const o = C.getFormatFromContentType(n);
|
|
1405
|
+
o && (i[o] = n);
|
|
1406
|
+
}), s && i[s] || "application/octet-stream";
|
|
1407
|
+
} catch (a) {
|
|
1408
|
+
return console.warn("Не удалось определить расширение из URL:", e, a), "application/octet-stream";
|
|
1571
1409
|
}
|
|
1572
1410
|
}
|
|
1573
1411
|
/**
|
|
1574
1412
|
* Рассчитывает коэффициент масштабирования изображения.
|
|
1575
|
-
* @param
|
|
1576
|
-
* @param
|
|
1577
|
-
* @
|
|
1413
|
+
* @param options - опции
|
|
1414
|
+
* @param options.imageObject - объект изображения
|
|
1415
|
+
* @param options.scaleType - тип масштабирования ('contain' или 'cover')
|
|
1416
|
+
* @returns коэффициент масштабирования
|
|
1578
1417
|
*/
|
|
1579
|
-
calculateScaleFactor(
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
} =
|
|
1584
|
-
|
|
1585
|
-
} =
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1418
|
+
calculateScaleFactor({
|
|
1419
|
+
imageObject: e,
|
|
1420
|
+
scaleType: t = "contain"
|
|
1421
|
+
}) {
|
|
1422
|
+
const { montageArea: a } = this.editor;
|
|
1423
|
+
if (!a || !e) return 1;
|
|
1424
|
+
const s = a.width, i = a.height, { width: n, height: o } = e;
|
|
1425
|
+
return t === "contain" || t === "image-contain" ? Math.min(s / n, i / o) : t === "cover" || t === "image-cover" ? Math.max(s / n, i / o) : 1;
|
|
1426
|
+
}
|
|
1427
|
+
/**
|
|
1428
|
+
* Преобразует SVG-строку в Blob, файл, или base64
|
|
1429
|
+
* @param svgString - SVG-строка
|
|
1430
|
+
* @param options - опции
|
|
1431
|
+
* @param options.exportAsBase64 - экспортировать как base64
|
|
1432
|
+
* @param options.exportAsBlob - экспортировать как blob
|
|
1433
|
+
* @param options.fileName - имя файла
|
|
1434
|
+
* @returns Blob, base64 или файл
|
|
1435
|
+
* @private
|
|
1436
|
+
* @static
|
|
1437
|
+
*/
|
|
1438
|
+
static _exportSVGStringAsFile(e, {
|
|
1439
|
+
exportAsBase64: t,
|
|
1440
|
+
exportAsBlob: a,
|
|
1441
|
+
fileName: s = "image.svg"
|
|
1442
|
+
} = {}) {
|
|
1443
|
+
return a ? new Blob([e], { type: "image/svg+xml" }) : t ? `data:image/svg+xml;base64,${window.btoa(encodeURIComponent(e))}` : new File([e], s.replace(/\.[^/.]+$/, ".svg"), { type: "image/svg+xml" });
|
|
1444
|
+
}
|
|
1445
|
+
/**
|
|
1446
|
+
* Извлекает чистый формат (subtype) из contentType,
|
|
1447
|
+
* отбросив любую часть после «+» или «;»
|
|
1448
|
+
* @param contentType
|
|
1449
|
+
* @returns формат, например 'png', 'jpeg', 'svg'
|
|
1450
|
+
* @static
|
|
1451
|
+
*/
|
|
1452
|
+
static getFormatFromContentType(e = "") {
|
|
1453
|
+
const t = e.match(/^[^/]+\/([^+;]+)/);
|
|
1454
|
+
return t ? t[1] : "";
|
|
1592
1455
|
}
|
|
1593
1456
|
}
|
|
1594
|
-
class
|
|
1457
|
+
class st {
|
|
1595
1458
|
/**
|
|
1596
1459
|
* @param {object} options
|
|
1597
1460
|
* @param {ImageEditor} options.editor – экземпляр редактора
|
|
@@ -1608,25 +1471,25 @@ class mt {
|
|
|
1608
1471
|
* @param {Boolean} [options.adaptCanvasToContainer] - Адаптировать канвас к контейнеру
|
|
1609
1472
|
* @fires editor:resolution-width-changed
|
|
1610
1473
|
*/
|
|
1611
|
-
setResolutionWidth(e, { preserveProportional: t, withoutSave: a, adaptCanvasToContainer:
|
|
1612
|
-
var
|
|
1474
|
+
setResolutionWidth(e, { preserveProportional: t, withoutSave: a, adaptCanvasToContainer: s } = {}) {
|
|
1475
|
+
var m;
|
|
1613
1476
|
if (!e) return;
|
|
1614
1477
|
const {
|
|
1615
1478
|
canvas: i,
|
|
1616
|
-
montageArea:
|
|
1617
|
-
options: { canvasBackstoreWidth:
|
|
1618
|
-
} = this.editor, { width: c, height:
|
|
1619
|
-
if (!
|
|
1620
|
-
const
|
|
1621
|
-
this.setResolutionHeight(
|
|
1479
|
+
montageArea: n,
|
|
1480
|
+
options: { canvasBackstoreWidth: o }
|
|
1481
|
+
} = this.editor, { width: c, height: d } = n, l = Math.max(Math.min(Number(e), O), B);
|
|
1482
|
+
if (!o || o === "auto" || s ? this.adaptCanvasToContainer() : o ? this.setCanvasBackstoreWidth(Number(o)) : this.setCanvasBackstoreWidth(l), n.set({ width: l }), (m = i.clipPath) == null || m.set({ width: l }), t) {
|
|
1483
|
+
const M = l / c, j = d * M;
|
|
1484
|
+
this.setResolutionHeight(j);
|
|
1622
1485
|
return;
|
|
1623
1486
|
}
|
|
1624
|
-
const { left:
|
|
1625
|
-
i.setViewportTransform([
|
|
1487
|
+
const { left: h, top: g } = this.getObjectDefaultCoords(n), u = i.getZoom();
|
|
1488
|
+
i.setViewportTransform([u, 0, 0, u, h, g]), this.centerMontageArea(), a || this.editor.historyManager.saveState(), i.fire("editor:resolution-width-changed", {
|
|
1626
1489
|
width: l,
|
|
1627
1490
|
preserveProportional: t,
|
|
1628
1491
|
withoutSave: a,
|
|
1629
|
-
adaptCanvasToContainer:
|
|
1492
|
+
adaptCanvasToContainer: s
|
|
1630
1493
|
});
|
|
1631
1494
|
}
|
|
1632
1495
|
/**
|
|
@@ -1638,25 +1501,25 @@ class mt {
|
|
|
1638
1501
|
* @param {Boolean} [options.adaptCanvasToContainer] - Адаптировать канвас к контейнеру
|
|
1639
1502
|
* @fires editor:resolution-height-changed
|
|
1640
1503
|
*/
|
|
1641
|
-
setResolutionHeight(e, { preserveProportional: t, withoutSave: a, adaptCanvasToContainer:
|
|
1642
|
-
var
|
|
1504
|
+
setResolutionHeight(e, { preserveProportional: t, withoutSave: a, adaptCanvasToContainer: s } = {}) {
|
|
1505
|
+
var m;
|
|
1643
1506
|
if (!e) return;
|
|
1644
1507
|
const {
|
|
1645
1508
|
canvas: i,
|
|
1646
|
-
montageArea:
|
|
1647
|
-
options: { canvasBackstoreHeight:
|
|
1648
|
-
} = this.editor, { width: c, height:
|
|
1649
|
-
if (!
|
|
1650
|
-
const
|
|
1651
|
-
this.setResolutionWidth(
|
|
1509
|
+
montageArea: n,
|
|
1510
|
+
options: { canvasBackstoreHeight: o }
|
|
1511
|
+
} = this.editor, { width: c, height: d } = n, l = Math.max(Math.min(Number(e), T), U);
|
|
1512
|
+
if (!o || o === "auto" || s ? this.adaptCanvasToContainer() : o ? this.setCanvasBackstoreHeight(Number(o)) : this.setCanvasBackstoreHeight(l), n.set({ height: l }), (m = i.clipPath) == null || m.set({ height: l }), t) {
|
|
1513
|
+
const M = l / d, j = c * M;
|
|
1514
|
+
this.setResolutionWidth(j);
|
|
1652
1515
|
return;
|
|
1653
1516
|
}
|
|
1654
|
-
const { left:
|
|
1655
|
-
i.setViewportTransform([
|
|
1517
|
+
const { left: h, top: g } = this.getObjectDefaultCoords(n), u = i.getZoom();
|
|
1518
|
+
i.setViewportTransform([u, 0, 0, u, h, g]), this.centerMontageArea(), a || this.editor.historyManager.saveState(), i.fire("editor:resolution-height-changed", {
|
|
1656
1519
|
height: l,
|
|
1657
1520
|
preserveProportional: t,
|
|
1658
1521
|
withoutSave: a,
|
|
1659
|
-
adaptCanvasToContainer:
|
|
1522
|
+
adaptCanvasToContainer: s
|
|
1660
1523
|
});
|
|
1661
1524
|
}
|
|
1662
1525
|
/**
|
|
@@ -1665,16 +1528,16 @@ class mt {
|
|
|
1665
1528
|
*/
|
|
1666
1529
|
centerMontageArea() {
|
|
1667
1530
|
var c;
|
|
1668
|
-
const { canvas: e, montageArea: t } = this.editor, a = e.getWidth(),
|
|
1531
|
+
const { canvas: e, montageArea: t } = this.editor, a = e.getWidth(), s = e.getHeight(), i = e.getZoom(), n = new W(a / 2, s / 2);
|
|
1669
1532
|
t.set({
|
|
1670
1533
|
left: a / 2,
|
|
1671
|
-
top:
|
|
1534
|
+
top: s / 2
|
|
1672
1535
|
}), (c = e.clipPath) == null || c.set({
|
|
1673
1536
|
left: a / 2,
|
|
1674
|
-
top:
|
|
1537
|
+
top: s / 2
|
|
1675
1538
|
}), e.renderAll();
|
|
1676
|
-
const
|
|
1677
|
-
|
|
1539
|
+
const o = e.viewportTransform;
|
|
1540
|
+
o[4] = a / 2 - n.x * i, o[5] = s / 2 - n.y * i, e.setViewportTransform(o), e.renderAll();
|
|
1678
1541
|
}
|
|
1679
1542
|
/**
|
|
1680
1543
|
* Метод для получения координат объекта с учетом текущего зума
|
|
@@ -1690,8 +1553,8 @@ class mt {
|
|
|
1690
1553
|
code: "NO_ACTIVE_OBJECT",
|
|
1691
1554
|
message: "Не выбран объект для получения координат"
|
|
1692
1555
|
}), { left: 0, top: 0 };
|
|
1693
|
-
const { width:
|
|
1694
|
-
return { left:
|
|
1556
|
+
const { width: s, height: i } = a, n = t.getZoom(), o = (s - s * n) / 2, c = (i - i * n) / 2;
|
|
1557
|
+
return { left: o, top: c };
|
|
1695
1558
|
}
|
|
1696
1559
|
/**
|
|
1697
1560
|
* Устанавливаем ширину канваса в backstore (для экспорта)
|
|
@@ -1699,7 +1562,7 @@ class mt {
|
|
|
1699
1562
|
*/
|
|
1700
1563
|
setCanvasBackstoreWidth(e) {
|
|
1701
1564
|
if (!e || typeof e != "number") return;
|
|
1702
|
-
const t = Math.max(Math.min(e,
|
|
1565
|
+
const t = Math.max(Math.min(e, O), B);
|
|
1703
1566
|
this.editor.canvas.setDimensions({ width: t }, { backstoreOnly: !0 });
|
|
1704
1567
|
}
|
|
1705
1568
|
/**
|
|
@@ -1708,7 +1571,7 @@ class mt {
|
|
|
1708
1571
|
*/
|
|
1709
1572
|
setCanvasBackstoreHeight(e) {
|
|
1710
1573
|
if (!e || typeof e != "number") return;
|
|
1711
|
-
const t = Math.max(Math.min(e,
|
|
1574
|
+
const t = Math.max(Math.min(e, T), U);
|
|
1712
1575
|
this.editor.canvas.setDimensions({ height: t }, { backstoreOnly: !0 });
|
|
1713
1576
|
}
|
|
1714
1577
|
/**
|
|
@@ -1717,8 +1580,8 @@ class mt {
|
|
|
1717
1580
|
* с учётом минимальных и максимальных значений.
|
|
1718
1581
|
*/
|
|
1719
1582
|
adaptCanvasToContainer() {
|
|
1720
|
-
const { canvas: e } = this.editor, t = e.editorContainer, a = t.clientWidth,
|
|
1721
|
-
console.log("adaptCanvasToContainer newWidth", i), console.log("adaptCanvasToContainer newHeight",
|
|
1583
|
+
const { canvas: e } = this.editor, t = e.editorContainer, a = t.clientWidth, s = t.clientHeight, i = Math.max(Math.min(a, O), B), n = Math.max(Math.min(s, T), U);
|
|
1584
|
+
console.log("adaptCanvasToContainer newWidth", i), console.log("adaptCanvasToContainer newHeight", n), e.setDimensions({ width: i, height: n }, { backstoreOnly: !0 });
|
|
1722
1585
|
}
|
|
1723
1586
|
/**
|
|
1724
1587
|
* Обновляет размеры канваса и вписывает объекты в монтажную область.
|
|
@@ -1731,12 +1594,12 @@ class mt {
|
|
|
1731
1594
|
selectionManager: t,
|
|
1732
1595
|
transformManager: a,
|
|
1733
1596
|
montageArea: {
|
|
1734
|
-
width:
|
|
1597
|
+
width: s,
|
|
1735
1598
|
height: i
|
|
1736
1599
|
}
|
|
1737
1600
|
} = this.editor;
|
|
1738
|
-
this.setResolutionWidth(
|
|
1739
|
-
width:
|
|
1601
|
+
this.setResolutionWidth(s, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.setResolutionHeight(i, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.centerMontageArea(), t.selectAll(), a.fitObject({ fitAsOneObject: !0, withoutSave: !0 }), e.fire("editor:canvas-updated", {
|
|
1602
|
+
width: s,
|
|
1740
1603
|
height: i
|
|
1741
1604
|
});
|
|
1742
1605
|
}
|
|
@@ -1752,11 +1615,11 @@ class mt {
|
|
|
1752
1615
|
* @param {Number} zoom — текущее значение zoom (например, 1, 1.2, 2 и т.д.)
|
|
1753
1616
|
*/
|
|
1754
1617
|
updateCssDimensionsForZoom(e) {
|
|
1755
|
-
const { canvas: t, montageArea: a } = this.editor,
|
|
1756
|
-
if (!(
|
|
1757
|
-
const
|
|
1618
|
+
const { canvas: t, montageArea: a } = this.editor, s = a.width * e, i = a.height * e, n = t.wrapperEl.parentNode;
|
|
1619
|
+
if (!(n instanceof HTMLElement)) return;
|
|
1620
|
+
const o = s <= n.clientWidth ? "100%" : s, c = i <= n.clientHeight ? "100%" : i;
|
|
1758
1621
|
t.setDimensions(
|
|
1759
|
-
{ width:
|
|
1622
|
+
{ width: o, height: c },
|
|
1760
1623
|
{ cssOnly: !0 }
|
|
1761
1624
|
);
|
|
1762
1625
|
}
|
|
@@ -1843,32 +1706,32 @@ class mt {
|
|
|
1843
1706
|
*/
|
|
1844
1707
|
setDisplayDimension({ element: e = "canvas", dimension: t, value: a } = {}) {
|
|
1845
1708
|
if (!a) return;
|
|
1846
|
-
const { canvas:
|
|
1709
|
+
const { canvas: s, options: { editorContainer: i } } = this.editor, n = [];
|
|
1847
1710
|
switch (e) {
|
|
1848
1711
|
case "canvas":
|
|
1849
|
-
|
|
1712
|
+
n.push(s.lowerCanvasEl, s.upperCanvasEl);
|
|
1850
1713
|
break;
|
|
1851
1714
|
case "wrapper":
|
|
1852
|
-
|
|
1715
|
+
n.push(s.wrapperEl);
|
|
1853
1716
|
break;
|
|
1854
1717
|
case "container":
|
|
1855
|
-
|
|
1718
|
+
n.push(i);
|
|
1856
1719
|
break;
|
|
1857
1720
|
default:
|
|
1858
|
-
|
|
1721
|
+
n.push(s.lowerCanvasEl, s.upperCanvasEl);
|
|
1859
1722
|
}
|
|
1860
|
-
const
|
|
1723
|
+
const o = t === "width" ? "width" : "height";
|
|
1861
1724
|
if (typeof a == "string") {
|
|
1862
|
-
|
|
1863
|
-
|
|
1725
|
+
n.forEach((d) => {
|
|
1726
|
+
d.style[o] = a;
|
|
1864
1727
|
});
|
|
1865
1728
|
return;
|
|
1866
1729
|
}
|
|
1867
1730
|
if (isNaN(a)) return;
|
|
1868
1731
|
const c = `${a}px`;
|
|
1869
|
-
|
|
1870
|
-
|
|
1871
|
-
}),
|
|
1732
|
+
n.forEach((d) => {
|
|
1733
|
+
d.style[o] = c;
|
|
1734
|
+
}), s.fire(`editor:display-${e}-${o}-changed`, {
|
|
1872
1735
|
element: e,
|
|
1873
1736
|
value: a
|
|
1874
1737
|
});
|
|
@@ -1883,28 +1746,28 @@ class mt {
|
|
|
1883
1746
|
*/
|
|
1884
1747
|
scaleMontageAreaToImage({ object: e, preserveAspectRatio: t, withoutSave: a } = {}) {
|
|
1885
1748
|
const {
|
|
1886
|
-
canvas:
|
|
1749
|
+
canvas: s,
|
|
1887
1750
|
montageArea: i,
|
|
1888
|
-
transformManager:
|
|
1751
|
+
transformManager: n,
|
|
1889
1752
|
options: {
|
|
1890
|
-
montageAreaWidth:
|
|
1753
|
+
montageAreaWidth: o,
|
|
1891
1754
|
montageAreaHeight: c
|
|
1892
1755
|
}
|
|
1893
|
-
} = this.editor,
|
|
1894
|
-
if (!
|
|
1895
|
-
const { width: l, height:
|
|
1896
|
-
let
|
|
1756
|
+
} = this.editor, d = e || s.getActiveObject();
|
|
1757
|
+
if (!d || d.type !== "image" && d.format !== "svg") return;
|
|
1758
|
+
const { width: l, height: h } = d;
|
|
1759
|
+
let g = Math.min(l, O), u = Math.min(h, T);
|
|
1897
1760
|
if (t) {
|
|
1898
1761
|
const {
|
|
1899
|
-
width:
|
|
1900
|
-
height:
|
|
1901
|
-
} = i,
|
|
1902
|
-
|
|
1762
|
+
width: m,
|
|
1763
|
+
height: M
|
|
1764
|
+
} = i, j = l / m, w = h / M, I = Math.max(j, w);
|
|
1765
|
+
g = m * I, u = M * I;
|
|
1903
1766
|
}
|
|
1904
|
-
this.setResolutionWidth(
|
|
1905
|
-
object:
|
|
1906
|
-
width:
|
|
1907
|
-
height:
|
|
1767
|
+
this.setResolutionWidth(g, { withoutSave: !0 }), this.setResolutionHeight(u, { withoutSave: !0 }), (l > o || h > c) && n.calculateAndApplyDefaultZoom(), n.resetObject(d, { withoutSave: !0 }), s.centerObject(d), s.renderAll(), a || this.editor.historyManager.saveState(), s.fire("editor:montage-area-scaled-to-image", {
|
|
1768
|
+
object: d,
|
|
1769
|
+
width: g,
|
|
1770
|
+
height: u,
|
|
1908
1771
|
preserveAspectRatio: t,
|
|
1909
1772
|
withoutSave: a
|
|
1910
1773
|
});
|
|
@@ -1927,13 +1790,13 @@ class mt {
|
|
|
1927
1790
|
const {
|
|
1928
1791
|
canvas: t,
|
|
1929
1792
|
transformManager: a,
|
|
1930
|
-
historyManager:
|
|
1793
|
+
historyManager: s,
|
|
1931
1794
|
options: {
|
|
1932
1795
|
montageAreaWidth: i,
|
|
1933
|
-
montageAreaHeight:
|
|
1796
|
+
montageAreaHeight: n
|
|
1934
1797
|
}
|
|
1935
1798
|
} = this.editor;
|
|
1936
|
-
a.resetZoom(), this.setResolutionWidth(i, { withoutSave: !0 }), this.setResolutionHeight(
|
|
1799
|
+
a.resetZoom(), this.setResolutionWidth(i, { withoutSave: !0 }), this.setResolutionHeight(n, { withoutSave: !0 }), t.renderAll(), a.resetObjects(), e || s.saveState(), t.fire("editor:default-scale-set");
|
|
1937
1800
|
}
|
|
1938
1801
|
/**
|
|
1939
1802
|
* Получение всех объектов внутри монтажной области редактора
|
|
@@ -1944,9 +1807,9 @@ class mt {
|
|
|
1944
1807
|
return e.getObjects().filter((i) => i.id !== t.id && i.id !== a.id);
|
|
1945
1808
|
}
|
|
1946
1809
|
}
|
|
1947
|
-
class
|
|
1810
|
+
class it {
|
|
1948
1811
|
constructor({ editor: e }) {
|
|
1949
|
-
this.editor = e, this.options = e.options, this.minZoom = this.options.minZoom ||
|
|
1812
|
+
this.editor = e, this.options = e.options, this.minZoom = this.options.minZoom || qe, this.maxZoom = this.options.maxZoom || et, this.defaultZoom = this.options.defaultScale, this.maxZoomFactor = this.options.maxZoomFactor;
|
|
1950
1813
|
}
|
|
1951
1814
|
/**
|
|
1952
1815
|
* Метод рассчитывает и применяет зум по умолчанию для монтажной области редактора.
|
|
@@ -1956,10 +1819,10 @@ class ft {
|
|
|
1956
1819
|
* @param {Number} [scale] - Желаемый масштаб относительно размеров контейнера редактора.
|
|
1957
1820
|
*/
|
|
1958
1821
|
calculateAndApplyDefaultZoom(e = this.options.defaultScale) {
|
|
1959
|
-
const { canvas: t } = this.editor, a = t.editorContainer,
|
|
1960
|
-
this.defaultZoom = Math.min(c,
|
|
1961
|
-
const { defaultZoom: l, maxZoomFactor:
|
|
1962
|
-
this.minZoom = Math.min(l /
|
|
1822
|
+
const { canvas: t } = this.editor, a = t.editorContainer, s = a.clientWidth, i = a.clientHeight, { width: n, height: o } = this.editor.montageArea, c = s / n * e, d = i / o * e;
|
|
1823
|
+
this.defaultZoom = Math.min(c, d);
|
|
1824
|
+
const { defaultZoom: l, maxZoomFactor: h, minZoom: g, maxZoom: u } = this;
|
|
1825
|
+
this.minZoom = Math.min(l / h, g), this.maxZoom = Math.max(l * h, u), this.setZoom();
|
|
1963
1826
|
}
|
|
1964
1827
|
/**
|
|
1965
1828
|
* Увеличение/уменьшение масштаба
|
|
@@ -1970,18 +1833,18 @@ class ft {
|
|
|
1970
1833
|
* @fires editor:zoom-changed
|
|
1971
1834
|
* Если передавать координаты курсора, то нужно быть аккуратнее, так как юзер может выйти за пределы рабочей области
|
|
1972
1835
|
*/
|
|
1973
|
-
zoom(e =
|
|
1974
|
-
var
|
|
1836
|
+
zoom(e = tt, t = {}) {
|
|
1837
|
+
var g, u;
|
|
1975
1838
|
if (!e) return;
|
|
1976
|
-
const { minZoom: a, maxZoom:
|
|
1977
|
-
let
|
|
1978
|
-
|
|
1979
|
-
currentZoom:
|
|
1980
|
-
zoom:
|
|
1839
|
+
const { minZoom: a, maxZoom: s } = this, { canvas: i } = this.editor, n = i.getZoom(), o = i.getCenterPoint(), c = (g = t.pointX) != null ? g : o.x, d = (u = t.pointY) != null ? u : o.y, l = new W(c, d);
|
|
1840
|
+
let h = Number((n + Number(e)).toFixed(2));
|
|
1841
|
+
h > s && (h = s), h < a && (h = a), i.zoomToPoint(l, h), console.log({
|
|
1842
|
+
currentZoom: n,
|
|
1843
|
+
zoom: h,
|
|
1981
1844
|
point: l
|
|
1982
1845
|
}), i.fire("editor:zoom-changed", {
|
|
1983
1846
|
currentZoom: i.getZoom(),
|
|
1984
|
-
zoom:
|
|
1847
|
+
zoom: h,
|
|
1985
1848
|
point: l
|
|
1986
1849
|
});
|
|
1987
1850
|
}
|
|
@@ -1991,11 +1854,11 @@ class ft {
|
|
|
1991
1854
|
* @fires editor:zoom-changed
|
|
1992
1855
|
*/
|
|
1993
1856
|
setZoom(e = this.defaultZoom) {
|
|
1994
|
-
const { minZoom: t, maxZoom: a } = this, { canvas:
|
|
1995
|
-
let
|
|
1996
|
-
e > a && (
|
|
1997
|
-
currentZoom:
|
|
1998
|
-
zoom:
|
|
1857
|
+
const { minZoom: t, maxZoom: a } = this, { canvas: s } = this.editor, i = new W(s.getCenterPoint());
|
|
1858
|
+
let n = e;
|
|
1859
|
+
e > a && (n = a), e < t && (n = t), s.zoomToPoint(i, n), s.fire("editor:zoom-changed", {
|
|
1860
|
+
currentZoom: s.getZoom(),
|
|
1861
|
+
zoom: n,
|
|
1999
1862
|
point: i
|
|
2000
1863
|
});
|
|
2001
1864
|
}
|
|
@@ -2004,7 +1867,7 @@ class ft {
|
|
|
2004
1867
|
* @fires editor:zoom-changed
|
|
2005
1868
|
*/
|
|
2006
1869
|
resetZoom() {
|
|
2007
|
-
const { canvas: e } = this.editor, t = new
|
|
1870
|
+
const { canvas: e } = this.editor, t = new W(e.getCenterPoint());
|
|
2008
1871
|
e.zoomToPoint(t, this.defaultZoom), this.editor.canvas.fire("editor:zoom-changed", {
|
|
2009
1872
|
currentZoom: e.getZoom(),
|
|
2010
1873
|
point: t
|
|
@@ -2017,14 +1880,14 @@ class ft {
|
|
|
2017
1880
|
* @param {Boolean} options.withoutSave - Не сохранять состояние
|
|
2018
1881
|
* @fires editor:object-rotated
|
|
2019
1882
|
*/
|
|
2020
|
-
rotate(e =
|
|
2021
|
-
const { canvas: a, historyManager:
|
|
1883
|
+
rotate(e = at, { withoutSave: t } = {}) {
|
|
1884
|
+
const { canvas: a, historyManager: s } = this.editor, i = a.getActiveObject();
|
|
2022
1885
|
if (!i) return;
|
|
2023
|
-
const
|
|
2024
|
-
i.rotate(
|
|
1886
|
+
const n = i.angle + e;
|
|
1887
|
+
i.rotate(n), i.setCoords(), a.renderAll(), t || s.saveState(), a.fire("editor:object-rotated", {
|
|
2025
1888
|
object: i,
|
|
2026
1889
|
withoutSave: t,
|
|
2027
|
-
angle:
|
|
1890
|
+
angle: n
|
|
2028
1891
|
});
|
|
2029
1892
|
}
|
|
2030
1893
|
/**
|
|
@@ -2034,9 +1897,9 @@ class ft {
|
|
|
2034
1897
|
* @fires editor:object-flipped-x
|
|
2035
1898
|
*/
|
|
2036
1899
|
flipX({ withoutSave: e } = {}) {
|
|
2037
|
-
const { canvas: t, historyManager: a } = this.editor,
|
|
2038
|
-
|
|
2039
|
-
object:
|
|
1900
|
+
const { canvas: t, historyManager: a } = this.editor, s = t.getActiveObject();
|
|
1901
|
+
s && (s.flipX = !s.flipX, t.renderAll(), e || a.saveState(), t.fire("editor:object-flipped-x", {
|
|
1902
|
+
object: s,
|
|
2040
1903
|
withoutSave: e
|
|
2041
1904
|
}));
|
|
2042
1905
|
}
|
|
@@ -2047,9 +1910,9 @@ class ft {
|
|
|
2047
1910
|
* @fires editor:object-flipped-y
|
|
2048
1911
|
*/
|
|
2049
1912
|
flipY({ withoutSave: e } = {}) {
|
|
2050
|
-
const { canvas: t, historyManager: a } = this.editor,
|
|
2051
|
-
|
|
2052
|
-
object:
|
|
1913
|
+
const { canvas: t, historyManager: a } = this.editor, s = t.getActiveObject();
|
|
1914
|
+
s && (s.flipY = !s.flipY, t.renderAll(), e || a.saveState(), t.fire("editor:object-flipped-y", {
|
|
1915
|
+
object: s,
|
|
2053
1916
|
withoutSave: e
|
|
2054
1917
|
}));
|
|
2055
1918
|
}
|
|
@@ -2063,11 +1926,11 @@ class ft {
|
|
|
2063
1926
|
opacity: t = 1,
|
|
2064
1927
|
withoutSave: a
|
|
2065
1928
|
} = {}) {
|
|
2066
|
-
const { canvas:
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
}) :
|
|
2070
|
-
object:
|
|
1929
|
+
const { canvas: s, historyManager: i } = this.editor, n = e || s.getActiveObject();
|
|
1930
|
+
n && (n instanceof E ? n.getObjects().forEach((o) => {
|
|
1931
|
+
o.set("opacity", t);
|
|
1932
|
+
}) : n.set("opacity", t), s.renderAll(), a || i.saveState(), s.fire("editor:object-opacity-changed", {
|
|
1933
|
+
object: n,
|
|
2071
1934
|
opacity: t,
|
|
2072
1935
|
withoutSave: a
|
|
2073
1936
|
}));
|
|
@@ -2087,30 +1950,30 @@ class ft {
|
|
|
2087
1950
|
object: e,
|
|
2088
1951
|
type: t = this.options.scaleType,
|
|
2089
1952
|
withoutSave: a,
|
|
2090
|
-
fitAsOneObject:
|
|
1953
|
+
fitAsOneObject: s
|
|
2091
1954
|
} = {}) {
|
|
2092
|
-
const { canvas: i, imageManager:
|
|
1955
|
+
const { canvas: i, imageManager: n, historyManager: o } = this.editor, c = e || i.getActiveObject();
|
|
2093
1956
|
if (c) {
|
|
2094
|
-
if (c.set("angle", 0), c instanceof
|
|
2095
|
-
const
|
|
2096
|
-
i.discardActiveObject(),
|
|
2097
|
-
const
|
|
2098
|
-
|
|
1957
|
+
if (c.set("angle", 0), c instanceof E && !s) {
|
|
1958
|
+
const d = c.getObjects();
|
|
1959
|
+
i.discardActiveObject(), d.forEach((h) => {
|
|
1960
|
+
const g = n.calculateScaleFactor({ imageObject: h, scaleType: t });
|
|
1961
|
+
h.scale(g), i.centerObject(h);
|
|
2099
1962
|
});
|
|
2100
|
-
const l = new
|
|
1963
|
+
const l = new E(d, { canvas: i });
|
|
2101
1964
|
i.setActiveObject(l);
|
|
2102
1965
|
} else {
|
|
2103
|
-
const
|
|
1966
|
+
const d = n.calculateScaleFactor({
|
|
2104
1967
|
imageObject: c,
|
|
2105
1968
|
scaleType: t
|
|
2106
1969
|
});
|
|
2107
|
-
c.scale(
|
|
1970
|
+
c.scale(d), i.centerObject(c);
|
|
2108
1971
|
}
|
|
2109
|
-
i.renderAll(), a ||
|
|
1972
|
+
i.renderAll(), a || o.saveState(), i.fire("editor:object-fitted", {
|
|
2110
1973
|
object: c,
|
|
2111
1974
|
type: t,
|
|
2112
1975
|
withoutSave: a,
|
|
2113
|
-
fitAsOneObject:
|
|
1976
|
+
fitAsOneObject: s
|
|
2114
1977
|
});
|
|
2115
1978
|
}
|
|
2116
1979
|
}
|
|
@@ -2133,36 +1996,36 @@ class ft {
|
|
|
2133
1996
|
*/
|
|
2134
1997
|
resetObject(e, { alwaysFitObject: t = !1, withoutSave: a = !1 } = {}) {
|
|
2135
1998
|
const {
|
|
2136
|
-
canvas:
|
|
1999
|
+
canvas: s,
|
|
2137
2000
|
montageArea: i,
|
|
2138
|
-
imageManager:
|
|
2139
|
-
historyManager:
|
|
2001
|
+
imageManager: n,
|
|
2002
|
+
historyManager: o,
|
|
2140
2003
|
options: { scaleType: c }
|
|
2141
|
-
} = this.editor,
|
|
2142
|
-
if (!
|
|
2143
|
-
if (
|
|
2004
|
+
} = this.editor, d = e || s.getActiveObject();
|
|
2005
|
+
if (!d || d.locked) return;
|
|
2006
|
+
if (o.suspendHistory(), d.type === "image" || d.format === "svg" || d.set({
|
|
2144
2007
|
scaleX: 1,
|
|
2145
2008
|
scaleY: 1,
|
|
2146
2009
|
flipX: !1,
|
|
2147
2010
|
flipY: !1,
|
|
2148
2011
|
angle: 0
|
|
2149
2012
|
}), t)
|
|
2150
|
-
this.fitObject({ object:
|
|
2013
|
+
this.fitObject({ object: d, withoutSave: !0, fitAsOneObject: !0 });
|
|
2151
2014
|
else {
|
|
2152
|
-
const { width:
|
|
2153
|
-
imageObject:
|
|
2015
|
+
const { width: h, height: g } = i, { width: u, height: m } = d, M = n.calculateScaleFactor({
|
|
2016
|
+
imageObject: d,
|
|
2154
2017
|
scaleType: c
|
|
2155
2018
|
});
|
|
2156
|
-
c === "contain" &&
|
|
2019
|
+
c === "contain" && M < 1 || c === "cover" && (u > h || m > g) ? this.fitObject({ object: d, withoutSave: !0, fitAsOneObject: !0 }) : d.set({ scaleX: 1, scaleY: 1 });
|
|
2157
2020
|
}
|
|
2158
|
-
|
|
2159
|
-
object:
|
|
2021
|
+
d.set({ flipX: !1, flipY: !1, angle: 0 }), s.centerObject(d), s.renderAll(), o.resumeHistory(), a || o.saveState(), s.fire("editor:object-reset", {
|
|
2022
|
+
object: d,
|
|
2160
2023
|
withoutSave: a,
|
|
2161
2024
|
alwaysFitObject: t
|
|
2162
2025
|
});
|
|
2163
2026
|
}
|
|
2164
2027
|
}
|
|
2165
|
-
class
|
|
2028
|
+
class nt {
|
|
2166
2029
|
/**
|
|
2167
2030
|
* @param {object} options
|
|
2168
2031
|
* @param {ImageEditor} options.editor – экземпляр редактора
|
|
@@ -2211,16 +2074,16 @@ class jt {
|
|
|
2211
2074
|
if (!(!t || !this.overlayMask)) {
|
|
2212
2075
|
a.suspendHistory(), t.setCoords();
|
|
2213
2076
|
var {
|
|
2214
|
-
left:
|
|
2077
|
+
left: s,
|
|
2215
2078
|
top: i,
|
|
2216
|
-
width:
|
|
2217
|
-
height:
|
|
2079
|
+
width: n,
|
|
2080
|
+
height: o
|
|
2218
2081
|
} = t.getBoundingRect();
|
|
2219
2082
|
this.overlayMask.set({
|
|
2220
|
-
left:
|
|
2083
|
+
left: s,
|
|
2221
2084
|
top: i,
|
|
2222
|
-
width:
|
|
2223
|
-
height:
|
|
2085
|
+
width: n,
|
|
2086
|
+
height: o
|
|
2224
2087
|
}), e.discardActiveObject(), this.editor.layerManager.bringToFront(this.overlayMask, {
|
|
2225
2088
|
withoutSave: !0
|
|
2226
2089
|
}), a.resumeHistory();
|
|
@@ -2240,8 +2103,8 @@ class jt {
|
|
|
2240
2103
|
canvasManager: t,
|
|
2241
2104
|
historyManager: a
|
|
2242
2105
|
} = this.editor;
|
|
2243
|
-
a.suspendHistory(), this.isBlocked = !0, e.discardActiveObject(), e.selection = !1, e.skipTargetFind = !0, t.getObjects().forEach((
|
|
2244
|
-
|
|
2106
|
+
a.suspendHistory(), this.isBlocked = !0, e.discardActiveObject(), e.selection = !1, e.skipTargetFind = !0, t.getObjects().forEach((s) => {
|
|
2107
|
+
s.evented = !1, s.selectable = !1;
|
|
2245
2108
|
}), e.upperCanvasEl.style.pointerEvents = "none", e.lowerCanvasEl.style.pointerEvents = "none", this.overlayMask.visible = !0, this.refresh(), e.fire("editor:disabled"), a.resumeHistory();
|
|
2246
2109
|
}
|
|
2247
2110
|
}
|
|
@@ -2256,13 +2119,13 @@ class jt {
|
|
|
2256
2119
|
canvasManager: t,
|
|
2257
2120
|
historyManager: a
|
|
2258
2121
|
} = this.editor;
|
|
2259
|
-
a.suspendHistory(), this.isBlocked = !1, e.selection = !0, e.skipTargetFind = !1, t.getObjects().forEach((
|
|
2260
|
-
|
|
2122
|
+
a.suspendHistory(), this.isBlocked = !1, e.selection = !0, e.skipTargetFind = !1, t.getObjects().forEach((s) => {
|
|
2123
|
+
s.evented = !0, s.selectable = !0;
|
|
2261
2124
|
}), e.upperCanvasEl.style.pointerEvents = "", e.lowerCanvasEl.style.pointerEvents = "", this.overlayMask.visible = !1, e.requestRenderAll(), e.fire("editor:enabled"), a.resumeHistory();
|
|
2262
2125
|
}
|
|
2263
2126
|
}
|
|
2264
2127
|
}
|
|
2265
|
-
class
|
|
2128
|
+
class F {
|
|
2266
2129
|
/**
|
|
2267
2130
|
* @param {object} options
|
|
2268
2131
|
* @param {ImageEditor} options.editor - экземпляр редактора с доступом к canvas
|
|
@@ -2285,13 +2148,13 @@ class $ {
|
|
|
2285
2148
|
withoutSave: t
|
|
2286
2149
|
} = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, {
|
|
2287
2150
|
canvas: a,
|
|
2288
|
-
historyManager:
|
|
2151
|
+
historyManager: s
|
|
2289
2152
|
} = this.editor;
|
|
2290
|
-
|
|
2153
|
+
s.suspendHistory();
|
|
2291
2154
|
var i = e || a.getActiveObject();
|
|
2292
|
-
i && (i.type === "activeselection" ? i.getObjects().forEach((
|
|
2293
|
-
a.bringObjectToFront(
|
|
2294
|
-
}) : a.bringObjectToFront(i), a.renderAll(),
|
|
2155
|
+
i && (i.type === "activeselection" ? i.getObjects().forEach((n) => {
|
|
2156
|
+
a.bringObjectToFront(n);
|
|
2157
|
+
}) : a.bringObjectToFront(i), a.renderAll(), s.resumeHistory(), t || s.saveState(), a.fire("editor:object-bring-to-front", {
|
|
2295
2158
|
object: i,
|
|
2296
2159
|
withoutSave: t
|
|
2297
2160
|
}));
|
|
@@ -2308,11 +2171,11 @@ class $ {
|
|
|
2308
2171
|
withoutSave: t
|
|
2309
2172
|
} = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, {
|
|
2310
2173
|
canvas: a,
|
|
2311
|
-
historyManager:
|
|
2174
|
+
historyManager: s
|
|
2312
2175
|
} = this.editor;
|
|
2313
|
-
|
|
2176
|
+
s.suspendHistory();
|
|
2314
2177
|
var i = e || a.getActiveObject();
|
|
2315
|
-
i && (i.type === "activeselection" ?
|
|
2178
|
+
i && (i.type === "activeselection" ? F._moveSelectionForward(a, i) : a.bringObjectForward(i), a.renderAll(), s.resumeHistory(), t || s.saveState(), a.fire("editor:object-bring-forward", {
|
|
2316
2179
|
object: i,
|
|
2317
2180
|
withoutSave: t
|
|
2318
2181
|
}));
|
|
@@ -2329,22 +2192,22 @@ class $ {
|
|
|
2329
2192
|
withoutSave: t
|
|
2330
2193
|
} = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, {
|
|
2331
2194
|
canvas: a,
|
|
2332
|
-
montageArea:
|
|
2195
|
+
montageArea: s,
|
|
2333
2196
|
historyManager: i,
|
|
2334
2197
|
interactionBlocker: {
|
|
2335
|
-
overlayMask:
|
|
2198
|
+
overlayMask: n
|
|
2336
2199
|
}
|
|
2337
2200
|
} = this.editor;
|
|
2338
2201
|
i.suspendHistory();
|
|
2339
|
-
var
|
|
2340
|
-
if (
|
|
2341
|
-
if (
|
|
2342
|
-
for (var c =
|
|
2343
|
-
a.sendObjectToBack(c[
|
|
2202
|
+
var o = e || a.getActiveObject();
|
|
2203
|
+
if (o) {
|
|
2204
|
+
if (o.type === "activeselection")
|
|
2205
|
+
for (var c = o.getObjects(), d = c.length - 1; d >= 0; d -= 1)
|
|
2206
|
+
a.sendObjectToBack(c[d]);
|
|
2344
2207
|
else
|
|
2345
|
-
a.sendObjectToBack(
|
|
2346
|
-
a.sendObjectToBack(
|
|
2347
|
-
object:
|
|
2208
|
+
a.sendObjectToBack(o);
|
|
2209
|
+
a.sendObjectToBack(s), a.sendObjectToBack(n), a.renderAll(), i.resumeHistory(), t || i.saveState(), a.fire("editor:object-send-to-back", {
|
|
2210
|
+
object: o,
|
|
2348
2211
|
withoutSave: t
|
|
2349
2212
|
});
|
|
2350
2213
|
}
|
|
@@ -2360,16 +2223,16 @@ class $ {
|
|
|
2360
2223
|
withoutSave: t
|
|
2361
2224
|
} = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, {
|
|
2362
2225
|
canvas: a,
|
|
2363
|
-
montageArea:
|
|
2226
|
+
montageArea: s,
|
|
2364
2227
|
historyManager: i,
|
|
2365
2228
|
interactionBlocker: {
|
|
2366
|
-
overlayMask:
|
|
2229
|
+
overlayMask: n
|
|
2367
2230
|
}
|
|
2368
2231
|
} = this.editor;
|
|
2369
2232
|
i.suspendHistory();
|
|
2370
|
-
var
|
|
2371
|
-
|
|
2372
|
-
object:
|
|
2233
|
+
var o = e || a.getActiveObject();
|
|
2234
|
+
o && (o.type === "activeselection" ? F._moveSelectionBackwards(a, o) : a.sendObjectBackwards(o), a.sendObjectToBack(s), a.sendObjectToBack(n), a.renderAll(), i.resumeHistory(), t || i.saveState(), a.fire("editor:object-send-backwards", {
|
|
2235
|
+
object: o,
|
|
2373
2236
|
withoutSave: t
|
|
2374
2237
|
}));
|
|
2375
2238
|
}
|
|
@@ -2381,20 +2244,20 @@ class $ {
|
|
|
2381
2244
|
* @private
|
|
2382
2245
|
*/
|
|
2383
2246
|
static _moveSelectionForward(e, t) {
|
|
2384
|
-
for (var a = e.getObjects(),
|
|
2385
|
-
var
|
|
2386
|
-
if (!
|
|
2387
|
-
return
|
|
2388
|
-
}, c = 0; c < a.length && !
|
|
2247
|
+
for (var a = e.getObjects(), s = t.getObjects(), i = s.map((l) => a.indexOf(l)), n = -1, o = function(h) {
|
|
2248
|
+
var g = a[h];
|
|
2249
|
+
if (!s.includes(g) && i.some((u) => h > u))
|
|
2250
|
+
return n = h, 1;
|
|
2251
|
+
}, c = 0; c < a.length && !o(c); c += 1)
|
|
2389
2252
|
;
|
|
2390
|
-
if (
|
|
2391
|
-
var
|
|
2253
|
+
if (n !== -1) {
|
|
2254
|
+
var d = s.map((l) => ({
|
|
2392
2255
|
obj: l,
|
|
2393
2256
|
index: a.indexOf(l)
|
|
2394
|
-
})).sort((l,
|
|
2395
|
-
|
|
2396
|
-
var
|
|
2397
|
-
|
|
2257
|
+
})).sort((l, h) => h.index - l.index);
|
|
2258
|
+
d.forEach((l) => {
|
|
2259
|
+
var h = a.indexOf(l.obj);
|
|
2260
|
+
h < n && (e.moveObjectTo(l.obj, n), n = h);
|
|
2398
2261
|
});
|
|
2399
2262
|
}
|
|
2400
2263
|
}
|
|
@@ -2406,11 +2269,11 @@ class $ {
|
|
|
2406
2269
|
* @private
|
|
2407
2270
|
*/
|
|
2408
2271
|
static _moveSelectionBackwards(e, t) {
|
|
2409
|
-
for (var a = e.getObjects(),
|
|
2410
|
-
e.moveObjectTo(n
|
|
2272
|
+
for (var a = e.getObjects(), s = t.getObjects(), i = Math.min(...s.map((o) => a.indexOf(o))), n = s.length - 1; n >= 0; n -= 1)
|
|
2273
|
+
e.moveObjectTo(s[n], i - 1);
|
|
2411
2274
|
}
|
|
2412
2275
|
}
|
|
2413
|
-
class
|
|
2276
|
+
class ot {
|
|
2414
2277
|
/**
|
|
2415
2278
|
* Менеджер фигур для редактора.
|
|
2416
2279
|
* @param {Object} options - Опции и настройки менеджера фигур.
|
|
@@ -2434,15 +2297,15 @@ class yt {
|
|
|
2434
2297
|
* @param {Object} flags.withoutSelection - Не выделять объект
|
|
2435
2298
|
* @param {Object} flags.withoutAdding - Не добавлять объект в canvas
|
|
2436
2299
|
*/
|
|
2437
|
-
addRectangle(l = {}, { withoutSelection: c, withoutAdding:
|
|
2438
|
-
var
|
|
2439
|
-
id: e = `rect-${
|
|
2300
|
+
addRectangle(l = {}, { withoutSelection: c, withoutAdding: d } = {}) {
|
|
2301
|
+
var h = l, {
|
|
2302
|
+
id: e = `rect-${D()}`,
|
|
2440
2303
|
left: t,
|
|
2441
2304
|
top: a,
|
|
2442
|
-
width:
|
|
2305
|
+
width: s = 100,
|
|
2443
2306
|
height: i = 100,
|
|
2444
|
-
fill:
|
|
2445
|
-
} =
|
|
2307
|
+
fill: n = "blue"
|
|
2308
|
+
} = h, o = Y(h, [
|
|
2446
2309
|
"id",
|
|
2447
2310
|
"left",
|
|
2448
2311
|
"top",
|
|
@@ -2450,15 +2313,15 @@ class yt {
|
|
|
2450
2313
|
"height",
|
|
2451
2314
|
"fill"
|
|
2452
2315
|
]);
|
|
2453
|
-
const { canvas:
|
|
2316
|
+
const { canvas: g } = this.editor, u = new pe(N({
|
|
2454
2317
|
id: e,
|
|
2455
2318
|
left: t,
|
|
2456
2319
|
top: a,
|
|
2457
|
-
width:
|
|
2320
|
+
width: s,
|
|
2458
2321
|
height: i,
|
|
2459
|
-
fill:
|
|
2460
|
-
},
|
|
2461
|
-
return !t && !a &&
|
|
2322
|
+
fill: n
|
|
2323
|
+
}, o));
|
|
2324
|
+
return !t && !a && g.centerObject(u), d || (g.add(u), c || g.setActiveObject(u), g.renderAll()), u;
|
|
2462
2325
|
}
|
|
2463
2326
|
/**
|
|
2464
2327
|
* Добавление круга
|
|
@@ -2476,28 +2339,28 @@ class yt {
|
|
|
2476
2339
|
* @param {Object} flags.withoutSelection - Не выделять объект
|
|
2477
2340
|
* @param {Object} flags.withoutAdding - Не добавлять объект в canvas
|
|
2478
2341
|
*/
|
|
2479
|
-
addCircle(
|
|
2480
|
-
var l =
|
|
2481
|
-
id: e = `circle-${
|
|
2342
|
+
addCircle(d = {}, { withoutSelection: o, withoutAdding: c } = {}) {
|
|
2343
|
+
var l = d, {
|
|
2344
|
+
id: e = `circle-${D()}`,
|
|
2482
2345
|
left: t,
|
|
2483
2346
|
top: a,
|
|
2484
|
-
radius:
|
|
2347
|
+
radius: s = 50,
|
|
2485
2348
|
fill: i = "green"
|
|
2486
|
-
} = l,
|
|
2349
|
+
} = l, n = Y(l, [
|
|
2487
2350
|
"id",
|
|
2488
2351
|
"left",
|
|
2489
2352
|
"top",
|
|
2490
2353
|
"radius",
|
|
2491
2354
|
"fill"
|
|
2492
2355
|
]);
|
|
2493
|
-
const { canvas:
|
|
2356
|
+
const { canvas: h } = this.editor, g = new Ie(N({
|
|
2494
2357
|
id: e,
|
|
2495
2358
|
left: t,
|
|
2496
2359
|
top: a,
|
|
2497
2360
|
fill: i,
|
|
2498
|
-
radius:
|
|
2499
|
-
},
|
|
2500
|
-
return !t && !a &&
|
|
2361
|
+
radius: s
|
|
2362
|
+
}, n));
|
|
2363
|
+
return !t && !a && h.centerObject(g), c || (h.add(g), o || h.setActiveObject(g), h.renderAll()), g;
|
|
2501
2364
|
}
|
|
2502
2365
|
/**
|
|
2503
2366
|
* Добавление треугольника
|
|
@@ -2516,15 +2379,15 @@ class yt {
|
|
|
2516
2379
|
* @param {Object} flags.withoutSelection - Не выделять объект
|
|
2517
2380
|
* @param {Object} flags.withoutAdding - Не добавлять объект в canvas
|
|
2518
2381
|
*/
|
|
2519
|
-
addTriangle(l = {}, { withoutSelection: c, withoutAdding:
|
|
2520
|
-
var
|
|
2521
|
-
id: e = `triangle-${
|
|
2382
|
+
addTriangle(l = {}, { withoutSelection: c, withoutAdding: d } = {}) {
|
|
2383
|
+
var h = l, {
|
|
2384
|
+
id: e = `triangle-${D()}`,
|
|
2522
2385
|
left: t,
|
|
2523
2386
|
top: a,
|
|
2524
|
-
width:
|
|
2387
|
+
width: s = 100,
|
|
2525
2388
|
height: i = 100,
|
|
2526
|
-
fill:
|
|
2527
|
-
} =
|
|
2389
|
+
fill: n = "yellow"
|
|
2390
|
+
} = h, o = Y(h, [
|
|
2528
2391
|
"id",
|
|
2529
2392
|
"left",
|
|
2530
2393
|
"top",
|
|
@@ -2532,18 +2395,18 @@ class yt {
|
|
|
2532
2395
|
"height",
|
|
2533
2396
|
"fill"
|
|
2534
2397
|
]);
|
|
2535
|
-
const { canvas:
|
|
2398
|
+
const { canvas: g } = this.editor, u = new Ae(N({
|
|
2536
2399
|
id: e,
|
|
2537
2400
|
left: t,
|
|
2538
2401
|
top: a,
|
|
2539
|
-
fill:
|
|
2540
|
-
width:
|
|
2402
|
+
fill: n,
|
|
2403
|
+
width: s,
|
|
2541
2404
|
height: i
|
|
2542
|
-
},
|
|
2543
|
-
return !t && !a &&
|
|
2405
|
+
}, o));
|
|
2406
|
+
return !t && !a && g.centerObject(u), d || (g.add(u), c || g.setActiveObject(u), g.renderAll()), u;
|
|
2544
2407
|
}
|
|
2545
2408
|
}
|
|
2546
|
-
class
|
|
2409
|
+
class rt {
|
|
2547
2410
|
/**
|
|
2548
2411
|
* @param {object} options
|
|
2549
2412
|
* @param {ImageEditor} options.editor - экземпляр редактора с доступом к canvas
|
|
@@ -2569,28 +2432,28 @@ class bt {
|
|
|
2569
2432
|
return;
|
|
2570
2433
|
}
|
|
2571
2434
|
if (a.type !== "image") {
|
|
2572
|
-
const
|
|
2573
|
-
navigator.clipboard.writeText(
|
|
2435
|
+
const g = `application/image-editor:${JSON.stringify(a.toObject(["format"]))}`;
|
|
2436
|
+
navigator.clipboard.writeText(g).catch((u) => {
|
|
2574
2437
|
t.emitWarning({
|
|
2575
2438
|
origin: "ClipboardManager",
|
|
2576
2439
|
method: "copy",
|
|
2577
2440
|
code: "CLIPBOARD_WRITE_TEXT_FAILED",
|
|
2578
|
-
message: `Ошибка записи текстового объекта в буфер обмена: ${
|
|
2579
|
-
data:
|
|
2441
|
+
message: `Ошибка записи текстового объекта в буфер обмена: ${u.message}`,
|
|
2442
|
+
data: u
|
|
2580
2443
|
});
|
|
2581
2444
|
}), this._cloneAndFire(e, a);
|
|
2582
2445
|
return;
|
|
2583
2446
|
}
|
|
2584
|
-
const i = a.toCanvasElement().toDataURL(),
|
|
2585
|
-
for (let
|
|
2586
|
-
|
|
2587
|
-
const l = new Blob([
|
|
2588
|
-
navigator.clipboard.write([
|
|
2447
|
+
const i = a.toCanvasElement().toDataURL(), n = i.slice(5).split(";")[0], o = i.split(",")[1], c = atob(o), d = new Uint8Array(c.length);
|
|
2448
|
+
for (let g = 0; g < c.length; g += 1)
|
|
2449
|
+
d[g] = c.charCodeAt(g);
|
|
2450
|
+
const l = new Blob([d.buffer], { type: n }), h = new ClipboardItem({ [n]: l });
|
|
2451
|
+
navigator.clipboard.write([h]).catch((g) => {
|
|
2589
2452
|
t.emitWarning({
|
|
2590
2453
|
origin: "ClipboardManager",
|
|
2591
2454
|
method: "copy",
|
|
2592
2455
|
code: "CLIPBOARD_WRITE_IMAGE_FAILED",
|
|
2593
|
-
message: `Ошибка записи изображения в буфер обмена: ${
|
|
2456
|
+
message: `Ошибка записи изображения в буфер обмена: ${g.message}`
|
|
2594
2457
|
});
|
|
2595
2458
|
}), this._cloneAndFire(e, a);
|
|
2596
2459
|
}
|
|
@@ -2607,7 +2470,7 @@ class bt {
|
|
|
2607
2470
|
origin: "ClipboardManager",
|
|
2608
2471
|
method: "_cloneAndFire",
|
|
2609
2472
|
code: "CLONE_FAILED",
|
|
2610
|
-
message: "
|
|
2473
|
+
message: "Ошибка клонирования объекта",
|
|
2611
2474
|
data: a
|
|
2612
2475
|
});
|
|
2613
2476
|
});
|
|
@@ -2619,23 +2482,23 @@ class bt {
|
|
|
2619
2482
|
* @param {Array} event.clipboardData.items — элементы буфера обмена
|
|
2620
2483
|
*/
|
|
2621
2484
|
handlePasteEvent({ clipboardData: e }) {
|
|
2622
|
-
var
|
|
2623
|
-
if (!((
|
|
2624
|
-
const { imageManager: t } = this.editor, { items: a } = e,
|
|
2625
|
-
if (
|
|
2626
|
-
const
|
|
2627
|
-
if (!
|
|
2485
|
+
var n;
|
|
2486
|
+
if (!((n = e == null ? void 0 : e.items) != null && n.length)) return;
|
|
2487
|
+
const { imageManager: t } = this.editor, { items: a } = e, s = a[a.length - 1];
|
|
2488
|
+
if (s.type !== "text/html") {
|
|
2489
|
+
const o = s.getAsFile();
|
|
2490
|
+
if (!o) return;
|
|
2628
2491
|
const c = new FileReader();
|
|
2629
|
-
c.onload = (
|
|
2630
|
-
|
|
2631
|
-
}, c.readAsDataURL(
|
|
2492
|
+
c.onload = (d) => {
|
|
2493
|
+
d.target && this.editor.imageManager.importImage({ source: d.target.result });
|
|
2494
|
+
}, c.readAsDataURL(o);
|
|
2632
2495
|
return;
|
|
2633
2496
|
}
|
|
2634
2497
|
const i = e.getData("text/html");
|
|
2635
2498
|
if (i) {
|
|
2636
|
-
const
|
|
2637
|
-
if (
|
|
2638
|
-
t.importImage({ source:
|
|
2499
|
+
const d = new DOMParser().parseFromString(i, "text/html").querySelector("img");
|
|
2500
|
+
if (d != null && d.src) {
|
|
2501
|
+
t.importImage({ source: d.src });
|
|
2639
2502
|
return;
|
|
2640
2503
|
}
|
|
2641
2504
|
}
|
|
@@ -2646,22 +2509,22 @@ class bt {
|
|
|
2646
2509
|
* @fires editor:object-pasted
|
|
2647
2510
|
*/
|
|
2648
2511
|
paste() {
|
|
2649
|
-
return
|
|
2512
|
+
return b(this, null, function* () {
|
|
2650
2513
|
const { canvas: e } = this.editor;
|
|
2651
2514
|
if (!this.clipboard) return;
|
|
2652
2515
|
const t = yield this.clipboard.clone(["format"]);
|
|
2653
2516
|
e.discardActiveObject(), t.set({
|
|
2654
|
-
id: `${t.type}-${
|
|
2517
|
+
id: `${t.type}-${D()}`,
|
|
2655
2518
|
left: t.left + 10,
|
|
2656
2519
|
top: t.top + 10,
|
|
2657
2520
|
evented: !0
|
|
2658
|
-
}), t instanceof
|
|
2521
|
+
}), t instanceof E ? (t.canvas = e, t.forEachObject((a) => {
|
|
2659
2522
|
e.add(a);
|
|
2660
2523
|
})) : e.add(t), e.setActiveObject(t), e.requestRenderAll(), e.fire("editor:object-pasted", { object: t });
|
|
2661
2524
|
});
|
|
2662
2525
|
}
|
|
2663
2526
|
}
|
|
2664
|
-
class
|
|
2527
|
+
class ct {
|
|
2665
2528
|
/**
|
|
2666
2529
|
* @param {object} options
|
|
2667
2530
|
* @param {ImageEditor} options.editor - экземпляр редактора с доступом к canvas
|
|
@@ -2686,11 +2549,11 @@ class pt {
|
|
|
2686
2549
|
skipInnerObjects: t,
|
|
2687
2550
|
withoutSave: a
|
|
2688
2551
|
} = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, {
|
|
2689
|
-
canvas:
|
|
2552
|
+
canvas: s,
|
|
2690
2553
|
historyManager: i
|
|
2691
|
-
} = this.editor,
|
|
2692
|
-
if (!(!
|
|
2693
|
-
var
|
|
2554
|
+
} = this.editor, n = e || s.getActiveObject();
|
|
2555
|
+
if (!(!n || n.locked)) {
|
|
2556
|
+
var o = {
|
|
2694
2557
|
lockMovementX: !0,
|
|
2695
2558
|
lockMovementY: !0,
|
|
2696
2559
|
lockRotation: !0,
|
|
@@ -2700,12 +2563,12 @@ class pt {
|
|
|
2700
2563
|
lockSkewingY: !0,
|
|
2701
2564
|
locked: !0
|
|
2702
2565
|
};
|
|
2703
|
-
|
|
2704
|
-
var c = !t && ["activeselection", "group"].includes(
|
|
2705
|
-
c &&
|
|
2706
|
-
|
|
2707
|
-
}),
|
|
2708
|
-
object:
|
|
2566
|
+
n.set(o);
|
|
2567
|
+
var c = !t && ["activeselection", "group"].includes(n.type);
|
|
2568
|
+
c && n.getObjects().forEach((d) => {
|
|
2569
|
+
d.set(o);
|
|
2570
|
+
}), s.renderAll(), a || i.saveState(), s.fire("editor:object-locked", {
|
|
2571
|
+
object: n,
|
|
2709
2572
|
skipInnerObjects: t,
|
|
2710
2573
|
withoutSave: a
|
|
2711
2574
|
});
|
|
@@ -2725,10 +2588,10 @@ class pt {
|
|
|
2725
2588
|
withoutSave: t
|
|
2726
2589
|
} = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, {
|
|
2727
2590
|
canvas: a,
|
|
2728
|
-
historyManager:
|
|
2591
|
+
historyManager: s
|
|
2729
2592
|
} = this.editor, i = e || a.getActiveObject();
|
|
2730
2593
|
if (i) {
|
|
2731
|
-
var
|
|
2594
|
+
var n = {
|
|
2732
2595
|
lockMovementX: !1,
|
|
2733
2596
|
lockMovementY: !1,
|
|
2734
2597
|
lockRotation: !1,
|
|
@@ -2738,25 +2601,18 @@ class pt {
|
|
|
2738
2601
|
lockSkewingY: !1,
|
|
2739
2602
|
locked: !1
|
|
2740
2603
|
};
|
|
2741
|
-
i.set(
|
|
2742
|
-
|
|
2743
|
-
}), a.renderAll(), t ||
|
|
2604
|
+
i.set(n), ["activeselection", "group"].includes(i.type) && i.getObjects().forEach((o) => {
|
|
2605
|
+
o.set(n);
|
|
2606
|
+
}), a.renderAll(), t || s.saveState(), a.fire("editor:object-unlocked", {
|
|
2744
2607
|
object: i,
|
|
2745
2608
|
withoutSave: t
|
|
2746
2609
|
});
|
|
2747
2610
|
}
|
|
2748
2611
|
}
|
|
2749
2612
|
}
|
|
2750
|
-
class
|
|
2751
|
-
|
|
2752
|
-
|
|
2753
|
-
* @param {ImageEditor} options.editor - экземпляр редактора с доступом к canvas
|
|
2754
|
-
*/
|
|
2755
|
-
constructor(e) {
|
|
2756
|
-
var {
|
|
2757
|
-
editor: t
|
|
2758
|
-
} = e;
|
|
2759
|
-
this.editor = t;
|
|
2613
|
+
class dt {
|
|
2614
|
+
constructor({ editor: e }) {
|
|
2615
|
+
this.editor = e;
|
|
2760
2616
|
}
|
|
2761
2617
|
/**
|
|
2762
2618
|
* Группировка объектов
|
|
@@ -2765,24 +2621,20 @@ class It {
|
|
|
2765
2621
|
* @param {fabric.Object} options.object - массив объектов для группировки
|
|
2766
2622
|
* @fires editor:objects-grouped
|
|
2767
2623
|
*/
|
|
2768
|
-
group(
|
|
2769
|
-
|
|
2770
|
-
|
|
2624
|
+
group({
|
|
2625
|
+
object: e,
|
|
2626
|
+
withoutSave: t
|
|
2627
|
+
} = {}) {
|
|
2628
|
+
const { canvas: a, historyManager: s } = this.editor;
|
|
2629
|
+
s.suspendHistory();
|
|
2630
|
+
const i = e || a.getActiveObject();
|
|
2631
|
+
if (!i || !(i instanceof E)) return;
|
|
2632
|
+
const n = i.getObjects(), o = new de(n);
|
|
2633
|
+
n.forEach((c) => a.remove(c)), o.set("id", `${o.type}-${D()}`), a.add(o), a.setActiveObject(o), a.renderAll(), s.resumeHistory(), t || s.saveState(), a.fire("editor:objects-grouped", {
|
|
2634
|
+
object: i,
|
|
2635
|
+
group: o,
|
|
2771
2636
|
withoutSave: t
|
|
2772
|
-
}
|
|
2773
|
-
canvas: a,
|
|
2774
|
-
historyManager: n
|
|
2775
|
-
} = this.editor;
|
|
2776
|
-
n.suspendHistory();
|
|
2777
|
-
var i = e || a.getActiveObject();
|
|
2778
|
-
if (i && i.type === "activeselection") {
|
|
2779
|
-
var s = i.getObjects(), r = new ze(s);
|
|
2780
|
-
s.forEach((c) => a.remove(c)), r.set("id", "".concat(r.type, "-").concat(A())), a.add(r), a.setActiveObject(r), a.renderAll(), n.resumeHistory(), t || n.saveState(), a.fire("editor:objects-grouped", {
|
|
2781
|
-
object: i,
|
|
2782
|
-
group: r,
|
|
2783
|
-
withoutSave: t
|
|
2784
|
-
});
|
|
2785
|
-
}
|
|
2637
|
+
});
|
|
2786
2638
|
}
|
|
2787
2639
|
/**
|
|
2788
2640
|
* Разгруппировка объектов
|
|
@@ -2791,31 +2643,27 @@ class It {
|
|
|
2791
2643
|
* @param {Boolean} options.withoutSave - Не сохранять состояние
|
|
2792
2644
|
* @fires editor:objects-ungrouped
|
|
2793
2645
|
*/
|
|
2794
|
-
ungroup(
|
|
2795
|
-
|
|
2796
|
-
|
|
2646
|
+
ungroup({
|
|
2647
|
+
object: e,
|
|
2648
|
+
withoutSave: t
|
|
2649
|
+
} = {}) {
|
|
2650
|
+
const { canvas: a, historyManager: s } = this.editor;
|
|
2651
|
+
s.suspendHistory();
|
|
2652
|
+
const i = e || a.getActiveObject();
|
|
2653
|
+
if (!(i instanceof de)) return;
|
|
2654
|
+
const n = i.removeAll();
|
|
2655
|
+
a.remove(i), n.forEach((c) => a.add(c));
|
|
2656
|
+
const o = new E(n, {
|
|
2657
|
+
canvas: a
|
|
2658
|
+
});
|
|
2659
|
+
a.setActiveObject(o), a.renderAll(), s.resumeHistory(), t || s.saveState(), a.fire("editor:objects-ungrouped", {
|
|
2660
|
+
object: i,
|
|
2661
|
+
selection: o,
|
|
2797
2662
|
withoutSave: t
|
|
2798
|
-
}
|
|
2799
|
-
canvas: a,
|
|
2800
|
-
historyManager: n
|
|
2801
|
-
} = this.editor;
|
|
2802
|
-
n.suspendHistory();
|
|
2803
|
-
var i = e || a.getActiveObject();
|
|
2804
|
-
if (!(!i || i.type !== "group")) {
|
|
2805
|
-
var s = i.removeAll();
|
|
2806
|
-
a.remove(i), s.forEach((c) => a.add(c));
|
|
2807
|
-
var r = new T(s, {
|
|
2808
|
-
canvas: a
|
|
2809
|
-
});
|
|
2810
|
-
a.setActiveObject(r), a.renderAll(), n.resumeHistory(), t || n.saveState(), a.fire("editor:objects-ungrouped", {
|
|
2811
|
-
object: i,
|
|
2812
|
-
selection: r,
|
|
2813
|
-
withoutSave: t
|
|
2814
|
-
});
|
|
2815
|
-
}
|
|
2663
|
+
});
|
|
2816
2664
|
}
|
|
2817
2665
|
}
|
|
2818
|
-
class
|
|
2666
|
+
class lt {
|
|
2819
2667
|
/**
|
|
2820
2668
|
* @param {object} options
|
|
2821
2669
|
* @param {ImageEditor} options.editor - экземпляр редактора с доступом к canvas
|
|
@@ -2837,58 +2685,47 @@ class At {
|
|
|
2837
2685
|
objectLockManager: a
|
|
2838
2686
|
} = this.editor;
|
|
2839
2687
|
e.discardActiveObject();
|
|
2840
|
-
var
|
|
2688
|
+
var s = t.getObjects(), i = s.some((o) => o.locked), n = s.length > 1 ? new E(t.getObjects(), {
|
|
2841
2689
|
canvas: e
|
|
2842
|
-
}) :
|
|
2690
|
+
}) : s[0];
|
|
2843
2691
|
i && a.lockObject({
|
|
2844
|
-
object:
|
|
2692
|
+
object: n,
|
|
2845
2693
|
skipInnerObjects: !0,
|
|
2846
2694
|
withoutSave: !0
|
|
2847
|
-
}), e.setActiveObject(
|
|
2848
|
-
selected:
|
|
2695
|
+
}), e.setActiveObject(n), e.requestRenderAll(), e.fire("editor:all-objects-selected", {
|
|
2696
|
+
selected: n
|
|
2849
2697
|
});
|
|
2850
2698
|
}
|
|
2851
2699
|
}
|
|
2852
|
-
class
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
* @param {ImageEditor} options.editor - экземпляр редактора с доступом к canvas
|
|
2856
|
-
*/
|
|
2857
|
-
constructor(e) {
|
|
2858
|
-
var {
|
|
2859
|
-
editor: t
|
|
2860
|
-
} = e;
|
|
2861
|
-
this.editor = t;
|
|
2700
|
+
class ht {
|
|
2701
|
+
constructor({ editor: e }) {
|
|
2702
|
+
this.editor = e;
|
|
2862
2703
|
}
|
|
2863
2704
|
/**
|
|
2864
2705
|
* Удалить выбранные объекты
|
|
2865
2706
|
* @param {Object} options
|
|
2866
|
-
* @param {
|
|
2707
|
+
* @param {FabricObject[]} options.objects - массив объектов для удаления
|
|
2867
2708
|
* @param {Boolean} options.withoutSave - Не сохранять состояние
|
|
2868
2709
|
* @fires editor:objects-deleted
|
|
2869
2710
|
*/
|
|
2870
|
-
deleteSelectedObjects(
|
|
2871
|
-
|
|
2872
|
-
|
|
2873
|
-
|
|
2874
|
-
|
|
2875
|
-
|
|
2876
|
-
|
|
2877
|
-
|
|
2878
|
-
} = this.editor, s = (e || a.getActiveObjects()).filter((r) => !r.locked);
|
|
2879
|
-
s != null && s.length && (n.suspendHistory(), s.forEach((r) => {
|
|
2880
|
-
if (r.type === "group" && r.format !== "svg") {
|
|
2881
|
-
i.ungroup(r), this.deleteSelectedObjects();
|
|
2711
|
+
deleteSelectedObjects({
|
|
2712
|
+
objects: e,
|
|
2713
|
+
withoutSave: t
|
|
2714
|
+
} = {}) {
|
|
2715
|
+
const { canvas: a, historyManager: s, groupingManager: i } = this.editor, n = (e || a.getActiveObjects()).filter((o) => !o.locked);
|
|
2716
|
+
n != null && n.length && (s.suspendHistory(), n.forEach((o) => {
|
|
2717
|
+
if (o.type === "group" && o.format !== "svg") {
|
|
2718
|
+
i.ungroup({ object: o, withoutSave: t }), this.deleteSelectedObjects();
|
|
2882
2719
|
return;
|
|
2883
2720
|
}
|
|
2884
|
-
a.remove(
|
|
2885
|
-
}), a.discardActiveObject(), a.renderAll(),
|
|
2886
|
-
objects:
|
|
2721
|
+
a.remove(o);
|
|
2722
|
+
}), a.discardActiveObject(), a.renderAll(), s.resumeHistory(), t || s.saveState(), a.fire("editor:objects-deleted", {
|
|
2723
|
+
objects: n,
|
|
2887
2724
|
withoutSave: t
|
|
2888
2725
|
}));
|
|
2889
2726
|
}
|
|
2890
2727
|
}
|
|
2891
|
-
const
|
|
2728
|
+
const gt = {
|
|
2892
2729
|
IMAGE_MANAGER: {
|
|
2893
2730
|
/**
|
|
2894
2731
|
* Некорректный Content-Type изображения
|
|
@@ -2944,9 +2781,13 @@ const Ct = {
|
|
|
2944
2781
|
* Ошибка при получении активного объекта.
|
|
2945
2782
|
*/
|
|
2946
2783
|
NO_ACTIVE_OBJECT: "NO_ACTIVE_OBJECT"
|
|
2784
|
+
},
|
|
2785
|
+
HISTORY_MANAGER: {
|
|
2786
|
+
UNDO_ERROR: "UNDO_ERROR",
|
|
2787
|
+
REDO_ERROR: "REDO_ERROR"
|
|
2947
2788
|
}
|
|
2948
2789
|
};
|
|
2949
|
-
class
|
|
2790
|
+
class V {
|
|
2950
2791
|
constructor({ editor: e }) {
|
|
2951
2792
|
this._buffer = [], this.editor = e;
|
|
2952
2793
|
}
|
|
@@ -2966,24 +2807,24 @@ class q {
|
|
|
2966
2807
|
* @param {string} [options.message] — текст ошибки (опционально, если не передан, то используется код ошибки)
|
|
2967
2808
|
* @fires editor:error
|
|
2968
2809
|
*/
|
|
2969
|
-
emitError({ origin: e = "ImageEditor", method: t = "Unknown Method", code: a, data:
|
|
2970
|
-
if (!
|
|
2810
|
+
emitError({ origin: e = "ImageEditor", method: t = "Unknown Method", code: a, data: s, message: i }) {
|
|
2811
|
+
if (!V.isValidErrorCode(a)) {
|
|
2971
2812
|
console.warn("Неизвестный код ошибки: ", { code: a, origin: e, method: t });
|
|
2972
2813
|
return;
|
|
2973
2814
|
}
|
|
2974
2815
|
if (!a) return;
|
|
2975
|
-
const
|
|
2976
|
-
console.error(`${e}. ${t}. ${a}. ${
|
|
2977
|
-
const
|
|
2816
|
+
const n = i || a;
|
|
2817
|
+
console.error(`${e}. ${t}. ${a}. ${n}`, s);
|
|
2818
|
+
const o = {
|
|
2978
2819
|
code: a,
|
|
2979
2820
|
origin: e,
|
|
2980
2821
|
method: t,
|
|
2981
|
-
message:
|
|
2982
|
-
data:
|
|
2822
|
+
message: n,
|
|
2823
|
+
data: s
|
|
2983
2824
|
};
|
|
2984
|
-
this._buffer.push(
|
|
2825
|
+
this._buffer.push(N({
|
|
2985
2826
|
type: "editor:error"
|
|
2986
|
-
},
|
|
2827
|
+
}, o)), this.editor.canvas.fire("editor:error", o);
|
|
2987
2828
|
}
|
|
2988
2829
|
/**
|
|
2989
2830
|
* Эмитит предупреждение через fabricjs
|
|
@@ -2995,58 +2836,58 @@ class q {
|
|
|
2995
2836
|
* @param {string} [options.message] — текст предупреждения (опционально, если не передан, то используется код предупреждения)
|
|
2996
2837
|
* @fires editor:warning
|
|
2997
2838
|
*/
|
|
2998
|
-
emitWarning({ origin: e = "ImageEditor", method: t = "Unknown Method", code: a, message:
|
|
2999
|
-
if (!
|
|
2839
|
+
emitWarning({ origin: e = "ImageEditor", method: t = "Unknown Method", code: a, message: s, data: i }) {
|
|
2840
|
+
if (!V.isValidErrorCode(a)) {
|
|
3000
2841
|
console.warn("Неизвестный код предупреждения: ", { code: a, origin: e, method: t });
|
|
3001
2842
|
return;
|
|
3002
2843
|
}
|
|
3003
|
-
const
|
|
3004
|
-
console.warn(`${e}. ${t}. ${a}. ${
|
|
3005
|
-
const
|
|
2844
|
+
const n = s || a;
|
|
2845
|
+
console.warn(`${e}. ${t}. ${a}. ${n}`, i);
|
|
2846
|
+
const o = {
|
|
3006
2847
|
code: a,
|
|
3007
2848
|
origin: e,
|
|
3008
2849
|
method: t,
|
|
3009
|
-
message:
|
|
2850
|
+
message: n,
|
|
3010
2851
|
data: i
|
|
3011
2852
|
};
|
|
3012
|
-
this._buffer.push(
|
|
2853
|
+
this._buffer.push(N({
|
|
3013
2854
|
type: "editor:warning"
|
|
3014
|
-
},
|
|
2855
|
+
}, o)), this.editor.canvas.fire("editor:warning", o);
|
|
3015
2856
|
}
|
|
3016
2857
|
static isValidErrorCode(e) {
|
|
3017
|
-
return e ? Object.values(
|
|
2858
|
+
return e ? Object.values(gt).some((t) => Object.values(t).includes(e)) : !1;
|
|
3018
2859
|
}
|
|
3019
2860
|
}
|
|
3020
|
-
class
|
|
2861
|
+
class ae {
|
|
3021
2862
|
/**
|
|
3022
2863
|
* Конструктор класса ImageEditor.
|
|
3023
2864
|
* @param {string} canvasId - идентификатор канваса, в котором будет создан редактор
|
|
3024
2865
|
* @param {CanvasOptions} options - опции и настройки редактора
|
|
3025
2866
|
*/
|
|
3026
2867
|
constructor(e, t) {
|
|
3027
|
-
this.options = t, this.containerId = e, this.editorId = `${e}-${
|
|
2868
|
+
this.options = t, this.containerId = e, this.editorId = `${e}-${D()}`, this.clipboard = null, this.init();
|
|
3028
2869
|
}
|
|
3029
2870
|
init() {
|
|
3030
|
-
return
|
|
2871
|
+
return b(this, null, function* () {
|
|
3031
2872
|
const {
|
|
3032
2873
|
editorContainerWidth: e,
|
|
3033
2874
|
editorContainerHeight: t,
|
|
3034
2875
|
canvasWrapperWidth: a,
|
|
3035
|
-
canvasWrapperHeight:
|
|
2876
|
+
canvasWrapperHeight: s,
|
|
3036
2877
|
canvasCSSWidth: i,
|
|
3037
|
-
canvasCSSHeight:
|
|
3038
|
-
initialImage:
|
|
2878
|
+
canvasCSSHeight: n,
|
|
2879
|
+
initialImage: o,
|
|
3039
2880
|
initialStateJSON: c,
|
|
3040
|
-
scaleType:
|
|
2881
|
+
scaleType: d,
|
|
3041
2882
|
_onReadyCallback: l
|
|
3042
2883
|
} = this.options;
|
|
3043
|
-
if (
|
|
2884
|
+
if (ze.apply(), this.canvas = new Se(this.containerId, this.options), this.moduleLoader = new Ne(), this.workerManager = new Ee(), this.errorManager = new V({ editor: this }), this.historyManager = new Ke({ editor: this }), this.toolbar = new $e({ editor: this }), this.transformManager = new it({ editor: this }), this.canvasManager = new st({ editor: this }), this.imageManager = new C({ editor: this }), this.layerManager = new F({ editor: this }), this.shapeManager = new ot({ editor: this }), this.interactionBlocker = new nt({ editor: this }), this.clipboardManager = new rt({ editor: this }), this.objectLockManager = new ct({ editor: this }), this.groupingManager = new dt({ editor: this }), this.selectionManager = new lt({ editor: this }), this.deletionManager = new ht({ editor: this }), this._createMontageArea(), this._createClippingArea(), this.listeners = new R({ editor: this, options: this.options }), this.canvasManager.setEditorContainerWidth(e), this.canvasManager.setEditorContainerHeight(t), this.canvasManager.setCanvasWrapperWidth(a), this.canvasManager.setCanvasWrapperHeight(s), this.canvasManager.setCanvasCSSWidth(i), this.canvasManager.setCanvasCSSHeight(n), o != null && o.source) {
|
|
3044
2885
|
const {
|
|
3045
|
-
source:
|
|
3046
|
-
scale:
|
|
3047
|
-
withoutSave:
|
|
3048
|
-
} =
|
|
3049
|
-
yield this.imageManager.importImage({ source:
|
|
2886
|
+
source: h,
|
|
2887
|
+
scale: g = `image-${d}`,
|
|
2888
|
+
withoutSave: u = !0
|
|
2889
|
+
} = o;
|
|
2890
|
+
yield this.imageManager.importImage({ source: h, scale: g, withoutSave: u });
|
|
3050
2891
|
} else
|
|
3051
2892
|
this.canvasManager.setDefaultScale({ withoutSave: !0 });
|
|
3052
2893
|
c && this.historyManager.loadStateFromFullState(c), this.historyManager.saveState(), console.log("editor:ready"), this.canvas.fire("editor:ready", this), typeof l == "function" && l(this);
|
|
@@ -3060,7 +2901,7 @@ class de {
|
|
|
3060
2901
|
this.montageArea = this.shapeManager.addRectangle({
|
|
3061
2902
|
width: e,
|
|
3062
2903
|
height: t,
|
|
3063
|
-
fill:
|
|
2904
|
+
fill: ae._createMosaicPattern(),
|
|
3064
2905
|
stroke: null,
|
|
3065
2906
|
strokeWidth: 0,
|
|
3066
2907
|
selectable: !1,
|
|
@@ -3104,13 +2945,13 @@ class de {
|
|
|
3104
2945
|
const e = document.createElement("canvas");
|
|
3105
2946
|
e.width = 20, e.height = 20;
|
|
3106
2947
|
const t = e.getContext("2d");
|
|
3107
|
-
return t.fillStyle = "#ddd", t.fillRect(0, 0, 40, 40), t.fillStyle = "#ccc", t.fillRect(0, 0, 10, 10), t.fillRect(10, 10, 10, 10), new
|
|
2948
|
+
return t.fillStyle = "#ddd", t.fillRect(0, 0, 40, 40), t.fillStyle = "#ccc", t.fillRect(0, 0, 10, 10), t.fillRect(10, 10, 10, 10), new Ce({
|
|
3108
2949
|
source: e,
|
|
3109
2950
|
repeat: "repeat"
|
|
3110
2951
|
});
|
|
3111
2952
|
}
|
|
3112
2953
|
}
|
|
3113
|
-
const
|
|
2954
|
+
const ut = {
|
|
3114
2955
|
/**
|
|
3115
2956
|
* Опции редактора
|
|
3116
2957
|
*/
|
|
@@ -3198,18 +3039,18 @@ const Dt = {
|
|
|
3198
3039
|
deleteObjectsByHotkey: !0,
|
|
3199
3040
|
resetObjectFitByDoubleClick: !0
|
|
3200
3041
|
};
|
|
3201
|
-
function
|
|
3202
|
-
const t =
|
|
3042
|
+
function yt(r, e = {}) {
|
|
3043
|
+
const t = N(N({}, ut), e), a = document.getElementById(r);
|
|
3203
3044
|
if (!a)
|
|
3204
|
-
return Promise.reject(new Error(`Контейнер с ID "${
|
|
3205
|
-
const
|
|
3206
|
-
return
|
|
3045
|
+
return Promise.reject(new Error(`Контейнер с ID "${r}" не найден.`));
|
|
3046
|
+
const s = document.createElement("canvas");
|
|
3047
|
+
return s.id = `${r}-canvas`, a.appendChild(s), t.editorContainer = a, new Promise((i) => {
|
|
3207
3048
|
t._onReadyCallback = i;
|
|
3208
|
-
const
|
|
3209
|
-
window[
|
|
3049
|
+
const n = new ae(s.id, t);
|
|
3050
|
+
window[r] = n;
|
|
3210
3051
|
});
|
|
3211
3052
|
}
|
|
3212
3053
|
export {
|
|
3213
|
-
|
|
3054
|
+
yt as default
|
|
3214
3055
|
};
|
|
3215
3056
|
//# sourceMappingURL=main.js.map
|