@anu3ev/fabric-image-editor 0.1.75 → 0.1.76
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 +475 -430
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
1
|
+
var Ae = Object.defineProperty, Ce = Object.defineProperties;
|
|
2
|
+
var Se = Object.getOwnPropertyDescriptors;
|
|
3
3
|
var W = Object.getOwnPropertySymbols;
|
|
4
|
-
var
|
|
5
|
-
var
|
|
4
|
+
var ge = Object.prototype.hasOwnProperty, ue = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var he = (r, e, t) => e in r ? Ae(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, I = (r, e) => {
|
|
6
6
|
for (var t in e || (e = {}))
|
|
7
|
-
|
|
7
|
+
ge.call(e, t) && he(r, t, e[t]);
|
|
8
8
|
if (W)
|
|
9
9
|
for (var t of W(e))
|
|
10
|
-
|
|
10
|
+
ue.call(e, t) && he(r, t, e[t]);
|
|
11
11
|
return r;
|
|
12
|
-
},
|
|
12
|
+
}, fe = (r, e) => Ce(r, Se(e));
|
|
13
13
|
var F = (r, e) => {
|
|
14
14
|
var t = {};
|
|
15
15
|
for (var s in r)
|
|
16
|
-
|
|
16
|
+
ge.call(r, s) && e.indexOf(s) < 0 && (t[s] = r[s]);
|
|
17
17
|
if (r != null && W)
|
|
18
18
|
for (var s of W(r))
|
|
19
|
-
e.indexOf(s) < 0 &&
|
|
19
|
+
e.indexOf(s) < 0 && ue.call(r, s) && (t[s] = r[s]);
|
|
20
20
|
return t;
|
|
21
21
|
};
|
|
22
22
|
var y = (r, e, t) => new Promise((s, a) => {
|
|
23
|
-
var
|
|
23
|
+
var o = (c) => {
|
|
24
24
|
try {
|
|
25
25
|
i(t.next(c));
|
|
26
26
|
} catch (d) {
|
|
27
27
|
a(d);
|
|
28
28
|
}
|
|
29
|
-
},
|
|
29
|
+
}, n = (c) => {
|
|
30
30
|
try {
|
|
31
31
|
i(t.throw(c));
|
|
32
32
|
} catch (d) {
|
|
33
33
|
a(d);
|
|
34
34
|
}
|
|
35
|
-
}, i = (c) => c.done ? s(c.value) : Promise.resolve(c.value).then(
|
|
35
|
+
}, i = (c) => c.done ? s(c.value) : Promise.resolve(c.value).then(o, n);
|
|
36
36
|
i((t = t.apply(r, e)).next());
|
|
37
37
|
});
|
|
38
|
-
import { ActiveSelection as v, util as P, controlsUtils as
|
|
39
|
-
import { create as
|
|
40
|
-
import
|
|
38
|
+
import { ActiveSelection as v, util as P, controlsUtils as De, InteractiveFabricObject as Ee, loadSVGFromURL as Ne, FabricImage as H, Point as G, Gradient as Me, Rect as Oe, Circle as Le, Triangle as we, Group as ee, Canvas as Te, Pattern as ke } from "fabric";
|
|
39
|
+
import { create as Be } from "jsondiffpatch";
|
|
40
|
+
import _e from "diff-match-patch";
|
|
41
41
|
var xe = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", A = function() {
|
|
42
42
|
for (var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 21, t = "", s = crypto.getRandomValues(new Uint8Array(e |= 0)); e--; )
|
|
43
43
|
t += xe[s[e] & 63];
|
|
@@ -72,14 +72,14 @@ class Y {
|
|
|
72
72
|
canvasDragging: t,
|
|
73
73
|
mouseWheelZooming: s,
|
|
74
74
|
bringToFrontOnSelection: a,
|
|
75
|
-
copyObjectsByHotkey:
|
|
76
|
-
pasteImageFromClipboard:
|
|
75
|
+
copyObjectsByHotkey: o,
|
|
76
|
+
pasteImageFromClipboard: n,
|
|
77
77
|
undoRedoByHotKeys: i,
|
|
78
78
|
selectAllByHotkey: c,
|
|
79
79
|
deleteObjectsByHotkey: d,
|
|
80
80
|
resetObjectFitByDoubleClick: h
|
|
81
81
|
} = this.options;
|
|
82
|
-
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 })), s && this.canvas.on("mouse:wheel", this.handleMouseWheelZoomBound), a && (this.canvas.on("selection:created", this.handleBringToFrontBound), this.canvas.on("selection:updated", this.handleBringToFrontBound)), h && this.canvas.on("mouse:dblclick", this.handleResetObjectFitBound), e && window.addEventListener("resize", this.handleContainerResizeBound, { capture: !0 }),
|
|
82
|
+
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 })), s && this.canvas.on("mouse:wheel", this.handleMouseWheelZoomBound), a && (this.canvas.on("selection:created", this.handleBringToFrontBound), this.canvas.on("selection:updated", this.handleBringToFrontBound)), h && this.canvas.on("mouse:dblclick", this.handleResetObjectFitBound), e && window.addEventListener("resize", this.handleContainerResizeBound, { capture: !0 }), o && document.addEventListener("keydown", this.handleCopyEventBound, { capture: !0 }), n && document.addEventListener("paste", this.handlePasteEventBound, { capture: !0 }), i && (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), this.canvas.on("object:added", this.handleBackgroundUpdateBound), this.canvas.on("selection:created", this.handleBackgroundUpdateBound);
|
|
83
83
|
}
|
|
84
84
|
/**
|
|
85
85
|
* При массовом выделении объектов удаляем из него залоченные.
|
|
@@ -90,7 +90,7 @@ class Y {
|
|
|
90
90
|
_filterLockedSelection({ selected: e, e: t }) {
|
|
91
91
|
if (!(e != null && e.length) || !(t instanceof MouseEvent) || e.length === 1) return;
|
|
92
92
|
const { lockedObjects: s, unlockedObjects: a } = e.reduce(
|
|
93
|
-
(
|
|
93
|
+
(n, i) => i.locked ? (n.lockedObjects.push(i), n) : (n.unlockedObjects.push(i), n),
|
|
94
94
|
{ lockedObjects: [], unlockedObjects: [] }
|
|
95
95
|
);
|
|
96
96
|
if (s.length === 0) return;
|
|
@@ -98,22 +98,22 @@ class Y {
|
|
|
98
98
|
if (a.length === 1)
|
|
99
99
|
this.canvas.setActiveObject(a[0]);
|
|
100
100
|
else {
|
|
101
|
-
const
|
|
101
|
+
const n = new v(a, {
|
|
102
102
|
canvas: this.canvas
|
|
103
103
|
});
|
|
104
|
-
this.canvas.setActiveObject(
|
|
104
|
+
this.canvas.setActiveObject(n);
|
|
105
105
|
}
|
|
106
106
|
this.canvas.requestRenderAll();
|
|
107
107
|
return;
|
|
108
108
|
}
|
|
109
|
-
const
|
|
109
|
+
const o = new v(e, {
|
|
110
110
|
canvas: this.canvas
|
|
111
111
|
});
|
|
112
112
|
this.editor.objectLockManager.lockObject({
|
|
113
|
-
object:
|
|
113
|
+
object: o,
|
|
114
114
|
skipInnerObjects: !0,
|
|
115
115
|
withoutSave: !0
|
|
116
|
-
}), this.canvas.setActiveObject(
|
|
116
|
+
}), this.canvas.setActiveObject(o), this.canvas.requestRenderAll();
|
|
117
117
|
}
|
|
118
118
|
/**
|
|
119
119
|
* Обработчики для сохранения состояния редактора в истории.
|
|
@@ -176,8 +176,8 @@ class Y {
|
|
|
176
176
|
*/
|
|
177
177
|
handleUndoRedoEvent(e) {
|
|
178
178
|
return y(this, null, function* () {
|
|
179
|
-
const { ctrlKey: t, metaKey: s, code: a, repeat:
|
|
180
|
-
this._shouldIgnoreKeyboardEvent(e) || !t && !s ||
|
|
179
|
+
const { ctrlKey: t, metaKey: s, code: a, repeat: o } = e;
|
|
180
|
+
this._shouldIgnoreKeyboardEvent(e) || !t && !s || o || !/Mac/i.test(navigator.userAgent) && this.isUndoRedoKeyPressed || (a === "KeyZ" ? (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.undo()) : a === "KeyY" && (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.redo()));
|
|
181
181
|
});
|
|
182
182
|
}
|
|
183
183
|
/**
|
|
@@ -216,11 +216,11 @@ class Y {
|
|
|
216
216
|
*/
|
|
217
217
|
handleSpaceKeyDown(e) {
|
|
218
218
|
if (e.code !== "Space" || this._shouldIgnoreKeyboardEvent(e)) return;
|
|
219
|
-
const { canvas: t, editor: s, isSpacePressed: a, isDragging:
|
|
220
|
-
if (a ||
|
|
219
|
+
const { canvas: t, editor: s, isSpacePressed: a, isDragging: o } = this;
|
|
220
|
+
if (a || o) return;
|
|
221
221
|
this.isSpacePressed = !0, e.preventDefault();
|
|
222
|
-
const
|
|
223
|
-
|
|
222
|
+
const n = t.getActiveObject() || null;
|
|
223
|
+
n instanceof v ? this.savedSelection = n.getObjects().slice() : n && (this.savedSelection = [n]), t.discardActiveObject(), t.set({
|
|
224
224
|
selection: !1,
|
|
225
225
|
defaultCursor: "grab"
|
|
226
226
|
}), t.setCursor("grab"), s.canvasManager.getObjects().forEach((i) => {
|
|
@@ -259,8 +259,8 @@ class Y {
|
|
|
259
259
|
t.setActiveObject(e[0]);
|
|
260
260
|
return;
|
|
261
261
|
}
|
|
262
|
-
const a = e.filter((
|
|
263
|
-
t.setActiveObject(
|
|
262
|
+
const a = e.filter((n) => s.canvasManager.getObjects().includes(n)), o = new v(a, { canvas: t });
|
|
263
|
+
t.setActiveObject(o);
|
|
264
264
|
}
|
|
265
265
|
// --- Обработчики для событий canvas (Fabric) ---
|
|
266
266
|
/**
|
|
@@ -327,16 +327,16 @@ class Y {
|
|
|
327
327
|
_shouldIgnoreKeyboardEvent(e) {
|
|
328
328
|
const t = document.activeElement, s = e.target, a = ["input", "textarea", "select"];
|
|
329
329
|
if (s) {
|
|
330
|
-
const
|
|
331
|
-
if (a.includes(
|
|
330
|
+
const n = s.tagName.toLowerCase();
|
|
331
|
+
if (a.includes(n) || s.contentEditable === "true") return !0;
|
|
332
332
|
}
|
|
333
333
|
if (t && t !== s) {
|
|
334
|
-
const
|
|
335
|
-
if (a.includes(
|
|
334
|
+
const n = t.tagName.toLowerCase();
|
|
335
|
+
if (a.includes(n) || t.contentEditable === "true") return !0;
|
|
336
336
|
}
|
|
337
|
-
const
|
|
338
|
-
if (
|
|
339
|
-
let c =
|
|
337
|
+
const o = window.getSelection();
|
|
338
|
+
if (o && !o.isCollapsed && o.rangeCount > 0) {
|
|
339
|
+
let c = o.getRangeAt(0).commonAncestorContainer;
|
|
340
340
|
c.nodeType === Node.TEXT_NODE && (c = c.parentElement);
|
|
341
341
|
const { keyboardIgnoreSelectors: d } = this.options;
|
|
342
342
|
if (d != null && d.length && c)
|
|
@@ -372,7 +372,7 @@ class Y {
|
|
|
372
372
|
};
|
|
373
373
|
}
|
|
374
374
|
}
|
|
375
|
-
class
|
|
375
|
+
class Re {
|
|
376
376
|
/**
|
|
377
377
|
* Класс для динамической загрузки внешних модулей.
|
|
378
378
|
*/
|
|
@@ -390,7 +390,7 @@ class _e {
|
|
|
390
390
|
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 "${e}"`));
|
|
391
391
|
}
|
|
392
392
|
}
|
|
393
|
-
function
|
|
393
|
+
function Ue(r) {
|
|
394
394
|
return new Worker(
|
|
395
395
|
"" + new URL("assets/worker-CN39s7P7.js", import.meta.url).href,
|
|
396
396
|
{
|
|
@@ -398,13 +398,13 @@ function Re(r) {
|
|
|
398
398
|
}
|
|
399
399
|
);
|
|
400
400
|
}
|
|
401
|
-
class
|
|
401
|
+
class ze {
|
|
402
402
|
/**
|
|
403
403
|
* @param scriptUrl — URL скрипта воркера.
|
|
404
404
|
* По-умолчанию использует DefaultWorker из соседнего файла
|
|
405
405
|
*/
|
|
406
406
|
constructor(e) {
|
|
407
|
-
e ? this.worker = new Worker(e, { type: "module" }) : this.worker = new
|
|
407
|
+
e ? this.worker = new Worker(e, { type: "module" }) : this.worker = new Ue(), this._callbacks = /* @__PURE__ */ new Map(), this.worker.onmessage = this._handleMessage.bind(this);
|
|
408
408
|
}
|
|
409
409
|
/**
|
|
410
410
|
* Обработчик сообщений от воркера
|
|
@@ -417,12 +417,12 @@ class Ue {
|
|
|
417
417
|
* @returns
|
|
418
418
|
*/
|
|
419
419
|
_handleMessage({ data: e }) {
|
|
420
|
-
const { requestId: t, success: s, data: a, error:
|
|
421
|
-
if (!
|
|
420
|
+
const { requestId: t, success: s, data: a, error: o } = e, n = this._callbacks.get(t);
|
|
421
|
+
if (!n) {
|
|
422
422
|
console.warn(`No callback found for requestId: ${t}`);
|
|
423
423
|
return;
|
|
424
424
|
}
|
|
425
|
-
s ?
|
|
425
|
+
s ? n.resolve(a) : n.reject(new Error(o)), this._callbacks.delete(t);
|
|
426
426
|
}
|
|
427
427
|
/**
|
|
428
428
|
* Универсальный метод отправки команды в воркер
|
|
@@ -433,8 +433,8 @@ class Ue {
|
|
|
433
433
|
*/
|
|
434
434
|
post(e, t, s = []) {
|
|
435
435
|
const a = `${e}:${A(8)}`;
|
|
436
|
-
return new Promise((
|
|
437
|
-
this._callbacks.set(a, { resolve:
|
|
436
|
+
return new Promise((o, n) => {
|
|
437
|
+
this._callbacks.set(a, { resolve: o, reject: n }), this.worker.postMessage({ action: e, payload: t, requestId: a }, s);
|
|
438
438
|
});
|
|
439
439
|
}
|
|
440
440
|
/**
|
|
@@ -444,26 +444,26 @@ class Ue {
|
|
|
444
444
|
this.worker.terminate();
|
|
445
445
|
}
|
|
446
446
|
}
|
|
447
|
-
const N = 12, He = 2,
|
|
447
|
+
const N = 12, He = 2, te = 8, se = 20, Ze = 100, ae = 20, oe = 8, Ye = 100, X = 32, ne = 1, Pe = "#2B2D33", ie = "#3D8BF4", re = "#FFFFFF";
|
|
448
448
|
function V(r, e, t, s, a) {
|
|
449
|
-
const
|
|
450
|
-
r.save(), r.translate(e, t), r.rotate(P.degreesToRadians(a.angle)), r.fillStyle =
|
|
451
|
-
}
|
|
452
|
-
function fe(r, e, t, s, a) {
|
|
453
|
-
const n = ee, o = te, i = ze;
|
|
454
|
-
r.save(), r.translate(e, t), r.rotate(P.degreesToRadians(a.angle)), r.fillStyle = ie, r.strokeStyle = oe, r.lineWidth = ne, r.beginPath(), r.roundRect(-n / 2, -o / 2, n, o, i), r.fill(), r.stroke(), r.restore();
|
|
449
|
+
const o = N, n = He;
|
|
450
|
+
r.save(), r.translate(e, t), r.rotate(P.degreesToRadians(a.angle)), r.fillStyle = re, r.strokeStyle = ie, r.lineWidth = ne, r.beginPath(), r.roundRect(-o / 2, -o / 2, o, o, n), r.fill(), r.stroke(), r.restore();
|
|
455
451
|
}
|
|
456
452
|
function me(r, e, t, s, a) {
|
|
457
|
-
const
|
|
458
|
-
r.save(), r.translate(e, t), r.rotate(P.degreesToRadians(a.angle)), r.fillStyle =
|
|
453
|
+
const o = te, n = se, i = Ze;
|
|
454
|
+
r.save(), r.translate(e, t), r.rotate(P.degreesToRadians(a.angle)), r.fillStyle = re, r.strokeStyle = ie, r.lineWidth = ne, r.beginPath(), r.roundRect(-o / 2, -n / 2, o, n, i), r.fill(), r.stroke(), r.restore();
|
|
459
455
|
}
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
const o = X / 2;
|
|
464
|
-
r.save(), r.translate(e, t), r.rotate(P.degreesToRadians(a.angle)), r.fillStyle = Ye, r.beginPath(), r.arc(0, 0, o, 0, 2 * Math.PI), r.fill(), r.drawImage(ye, -o / 2, -o / 2, o, o), r.restore();
|
|
456
|
+
function be(r, e, t, s, a) {
|
|
457
|
+
const o = ae, n = oe, i = Ye;
|
|
458
|
+
r.save(), r.translate(e, t), r.rotate(P.degreesToRadians(a.angle)), r.fillStyle = re, r.strokeStyle = ie, r.lineWidth = ne, r.beginPath(), r.roundRect(-o / 2, -n / 2, o, n, i), r.fill(), r.stroke(), r.restore();
|
|
465
459
|
}
|
|
466
|
-
const
|
|
460
|
+
const We = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", pe = new Image();
|
|
461
|
+
pe.src = We;
|
|
462
|
+
function Fe(r, e, t, s, a) {
|
|
463
|
+
const n = X / 2;
|
|
464
|
+
r.save(), r.translate(e, t), r.rotate(P.degreesToRadians(a.angle)), r.fillStyle = Pe, r.beginPath(), r.arc(0, 0, n, 0, 2 * Math.PI), r.fill(), r.drawImage(pe, -n / 2, -n / 2, n, n), r.restore();
|
|
465
|
+
}
|
|
466
|
+
const Ve = {
|
|
467
467
|
// Угловые точки
|
|
468
468
|
tl: {
|
|
469
469
|
render: V,
|
|
@@ -495,61 +495,61 @@ const Fe = {
|
|
|
495
495
|
},
|
|
496
496
|
// Середина вертикалей
|
|
497
497
|
ml: {
|
|
498
|
-
render:
|
|
499
|
-
sizeX:
|
|
500
|
-
sizeY:
|
|
498
|
+
render: me,
|
|
499
|
+
sizeX: te,
|
|
500
|
+
sizeY: se,
|
|
501
501
|
offsetX: 0,
|
|
502
502
|
offsetY: 0
|
|
503
503
|
},
|
|
504
504
|
mr: {
|
|
505
|
-
render:
|
|
506
|
-
sizeX:
|
|
507
|
-
sizeY:
|
|
505
|
+
render: me,
|
|
506
|
+
sizeX: te,
|
|
507
|
+
sizeY: se,
|
|
508
508
|
offsetX: 0,
|
|
509
509
|
offsetY: 0
|
|
510
510
|
},
|
|
511
511
|
// Середина горизонталей
|
|
512
512
|
mt: {
|
|
513
|
-
render:
|
|
514
|
-
sizeX:
|
|
515
|
-
sizeY:
|
|
513
|
+
render: be,
|
|
514
|
+
sizeX: ae,
|
|
515
|
+
sizeY: oe,
|
|
516
516
|
offsetX: 0,
|
|
517
517
|
offsetY: 0
|
|
518
518
|
},
|
|
519
519
|
mb: {
|
|
520
|
-
render:
|
|
521
|
-
sizeX:
|
|
522
|
-
sizeY:
|
|
520
|
+
render: be,
|
|
521
|
+
sizeX: ae,
|
|
522
|
+
sizeY: oe,
|
|
523
523
|
offsetX: 0,
|
|
524
524
|
offsetY: 0
|
|
525
525
|
},
|
|
526
526
|
// Специальный «rotate» контрол
|
|
527
527
|
mtr: {
|
|
528
|
-
render:
|
|
528
|
+
render: Fe,
|
|
529
529
|
sizeX: X,
|
|
530
530
|
sizeY: X,
|
|
531
531
|
offsetX: 0,
|
|
532
532
|
offsetY: -X
|
|
533
533
|
}
|
|
534
534
|
};
|
|
535
|
-
class
|
|
535
|
+
class Ge {
|
|
536
536
|
static apply() {
|
|
537
|
-
const e =
|
|
538
|
-
Object.entries(
|
|
537
|
+
const e = De.createObjectDefaultControls();
|
|
538
|
+
Object.entries(Ve).forEach(([t, s]) => {
|
|
539
539
|
Object.assign(e[t], {
|
|
540
540
|
render: s.render,
|
|
541
541
|
sizeX: s.sizeX,
|
|
542
542
|
sizeY: s.sizeY,
|
|
543
543
|
offsetX: s.offsetX,
|
|
544
544
|
offsetY: s.offsetY
|
|
545
|
-
}), t === "mtr" && (e[t].cursorStyle = "grab", e[t].mouseDownHandler = (
|
|
545
|
+
}), t === "mtr" && (e[t].cursorStyle = "grab", e[t].mouseDownHandler = (o, n, i, c) => {
|
|
546
546
|
var h;
|
|
547
|
-
(h =
|
|
547
|
+
(h = n.target.canvas) == null || h.setCursor("grabbing");
|
|
548
548
|
});
|
|
549
549
|
}), Ee.ownDefaults.controls = e;
|
|
550
550
|
}
|
|
551
551
|
}
|
|
552
|
-
const
|
|
552
|
+
const Xe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNi44NzUgMi41YS42MjUuNjI1IDAgMCAwLS42MjUuNjI0VjYuMjVIMy4xMjVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2MTBjMCAuMzQ1LjI4LjYyNS42MjUuNjI1aDEwYy4zNDUgMCAuNjI1LS4yOC42MjUtLjYyNXYtMy4xMjZoMy4xMjVjLjM0NSAwIC42MjUtLjI4LjYyNS0uNjI1di0xMGEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTEwWm02Ljg3NSAxMGgyLjVWMy43NUg3LjV2Mi41aDUuNjI1Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NS42MjRabS0xMCAzLjc1VjcuNWg4Ljc1djguNzVIMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", Qe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi41IDcuNWMwLS42OS41Ni0xLjI1IDEuMjUtMS4yNWgxMi41Yy42OSAwIDEuMjUuNTYgMS4yNSAxLjI1djguNzVjMCAuNjktLjU2IDEuMjUtMS4yNSAxLjI1SDMuNzVjLS42OSAwLTEuMjUtLjU2LTEuMjUtMS4yNVY3LjVabTEzLjc1IDBIMy43NXY4Ljc1aDEyLjVWNy41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMS44NzVhMi4xODggMi4xODggMCAwIDAtMi4xODggMi4xODh2Mi44MTJhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyYTMuNDM3IDMuNDM3IDAgMSAxIDYuODc1IDB2Mi44MTNhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyQTIuMTg4IDIuMTg4IDAgMCAwIDEwIDEuODc2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEwIDEyLjgxM2EuOTM3LjkzNyAwIDEgMCAwLTEuODc1LjkzNy45MzcgMCAwIDAgMCAxLjg3NFoiLz48L3N2Zz4=", Ke = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE2LjI1IDYuMjVINy41VjQuMzc1YTIuNSAyLjUgMCAwIDEgMi41LTIuNWMxLjIgMCAyLjI4MS44NiAyLjUxMiAyYS42MjUuNjI1IDAgMCAwIDEuMjI2LS4yNWMtLjM1NC0xLjczOC0xLjkyNS0zLTMuNzM4LTNhMy43NTQgMy43NTQgMCAwIDAtMy43NSAzLjc1VjYuMjVoLTIuNUExLjI1IDEuMjUgMCAwIDAgMi41IDcuNXY4Ljc1YTEuMjUgMS4yNSAwIDAgMCAxLjI1IDEuMjVoMTIuNWExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjcuNWExLjI1IDEuMjUgMCAwIDAtMS4yNS0xLjI1Wm0wIDEwSDMuNzVWNy41aDEyLjV2OC43NVptLTUuMzEzLTQuMzc1YS45MzcuOTM3IDAgMSAxLTEuODc0IDAgLjkzNy45MzcgMCAwIDEgMS44NzQgMFoiLz48L3N2Zz4K", $e = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIuNSA4LjEyNSAxMCAxMi41bDcuNS00LjM3NUwxMCAzLjc1IDIuNSA4LjEyNVoiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjY4NSAzLjIxYS42MjUuNjI1IDAgMCAxIC42MyAwbDcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOGw3LjUtNC4zNzVaTTMuNzQgOC4xMjUgMTAgMTEuNzc2bDYuMjYtMy42NTFMMTAgNC40NzQgMy43NCA4LjEyNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA5LjQ2YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDExLjc3NmwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA5LjQ2Wm0tMS42NiAyLjQxNUwxMCAxNS41MjZsNi4yNi0zLjY1MS0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNi0xLjk3NSAxLjE1MVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", Je = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMy4yMWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDguMTI1IDEwIDExLjc3Nmw2LjI2LTMuNjUxTDEwIDQuNDc0IDMuNzQgOC4xMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjcxNCAxMCAxMCAxMi41bDQuMjg2LTIuNSAzLjIxNCAxLjg3NUwxMCAxNi4yNWwtNy41LTQuMzc1TDUuNzE0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDkuNDZhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgMTEuNzc2bDMuOTctMi4zMTZhLjYyNS42MjUgMCAwIDEgLjYzIDBsMy4yMTUgMS44NzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhMNS40IDkuNDZabS0xLjY2IDIuNDE1TDEwIDE1LjUyNmw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2LTEuOTc1IDEuMTUxWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", qe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTIuNSA2LjI1IDcuNSA0LjM3NSA3LjUtNC4zNzVMMTAgMS44NzUgMi41IDYuMjVaIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMS4zMzVhLjYyNS42MjUgMCAwIDEgLjYzIDBsNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4bDcuNS00LjM3NVpNMy43NCA2LjI1IDEwIDkuOTAxbDYuMjYtMy42NTFMMTAgMi41OTkgMy43NCA2LjI1WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDExLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCAxMy42NTFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgMTEuMzM1Wk0zLjc0IDEzLjc1IDEwIDE3LjQwMWw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTMuNzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgNy41ODVhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgOS45MDFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgNy41ODVaTTMuNzQgMTAgMTAgMTMuNjUxIDE2LjI2IDEwbC0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNkwzLjc0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", et = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMS45NiAxMy40MzVhLjYyNS42MjUgMCAwIDEgLjg1NS0uMjI1TDEwIDE3LjQwMWw3LjE4NS00LjE5YS42MjUuNjI1IDAgMCAxIC42MyAxLjA3OWwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEtLjIyNS0uODU1Wk05LjY4NSAxLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDYuMjUgMTAgOS45MDFsNi4yNi0zLjY1MUwxMCAyLjU5OSAzLjc0IDYuMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im01LjcxNCAxMS44NzUgNC4yODYgMi41IDQuMjg2LTIuNUwxNy41IDEzLjc1IDEwIDE4LjEyNSAyLjUgMTMuNzVsMy4yMTQtMS44NzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgMTEuMzM1YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDEzLjY1MWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCAxMS4zMzVaTTMuNzQgMTMuNzUgMTAgMTcuNDAxbDYuMjYtMy42NTEtMS45NzQtMS4xNTEtMy45NzEgMi4zMTZhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTMuOTctMi4zMTZMMy43NCAxMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA3LjU4NWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCA5LjkwMWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA3LjU4NVpNMy43NCAxMCAxMCAxMy42NTEgMTYuMjYgMTBsLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTBaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=", tt = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI0VDNEU0MCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOC4xMjUgMS4yNUExLjg3NSAxLjg3NSAwIDAgMCA2LjI1IDMuMTI1di42MjVIMy4xMjVhLjYyNS42MjUgMCAwIDAgMCAxLjI1aC42MjV2MTEuMjVBMS4yNSAxLjI1IDAgMCAwIDUgMTcuNWgxMGExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjVoLjYyNWEuNjI1LjYyNSAwIDAgMCAwLTEuMjVIMTMuNzV2LS42MjVhMS44NzUgMS44NzUgMCAwIDAtMS44NzUtMS44NzVoLTMuNzVabTQuMzc1IDIuNXYtLjYyNWEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2LjYyNWg1Wk01IDE2LjI1VjVoMTB2MTEuMjVINVpNOC4xMjUgNy41Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NWEuNjI1LjYyNSAwIDEgMS0xLjI1IDB2LTVjMC0uMzQ1LjI4LS42MjUuNjI1LS42MjVabTQuMzc1IDUuNjI1di01YS42MjUuNjI1IDAgMCAwLTEuMjUgMHY1YS42MjUuNjI1IDAgMSAwIDEuMjUgMFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", Z = {
|
|
553
553
|
style: {
|
|
554
554
|
position: "absolute",
|
|
555
555
|
display: "none",
|
|
@@ -616,14 +616,14 @@ const Ge = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMj
|
|
|
616
616
|
],
|
|
617
617
|
offsetTop: 50,
|
|
618
618
|
icons: {
|
|
619
|
-
copyPaste:
|
|
620
|
-
delete:
|
|
621
|
-
lock:
|
|
622
|
-
unlock:
|
|
623
|
-
bringToFront:
|
|
624
|
-
sendToBack:
|
|
625
|
-
bringForward:
|
|
626
|
-
sendBackwards:
|
|
619
|
+
copyPaste: Xe,
|
|
620
|
+
delete: tt,
|
|
621
|
+
lock: Qe,
|
|
622
|
+
unlock: Ke,
|
|
623
|
+
bringToFront: qe,
|
|
624
|
+
sendToBack: et,
|
|
625
|
+
bringForward: $e,
|
|
626
|
+
sendBackwards: Je
|
|
627
627
|
},
|
|
628
628
|
handlers: {
|
|
629
629
|
copyPaste: (r) => y(null, null, function* () {
|
|
@@ -652,14 +652,14 @@ const Ge = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMj
|
|
|
652
652
|
}
|
|
653
653
|
}
|
|
654
654
|
};
|
|
655
|
-
class
|
|
655
|
+
class st {
|
|
656
656
|
constructor({ editor: e }) {
|
|
657
657
|
this.currentTarget = null, this.currentLocked = !1, this.isTransforming = !1, this.editor = e, this.canvas = e.canvas, this.options = e.options, this._initToolbar();
|
|
658
658
|
}
|
|
659
659
|
_initToolbar() {
|
|
660
660
|
if (!this.options.showToolbar) return;
|
|
661
661
|
const e = this.options.toolbar || {};
|
|
662
|
-
this.config =
|
|
662
|
+
this.config = fe(I(I({}, Z), e), {
|
|
663
663
|
style: I(I({}, Z.style), e.style || {}),
|
|
664
664
|
btnStyle: I(I({}, Z.btnStyle), e.btnStyle || {}),
|
|
665
665
|
icons: I(I({}, Z.icons), e.icons || {}),
|
|
@@ -690,8 +690,8 @@ class tt {
|
|
|
690
690
|
_renderButtons(e) {
|
|
691
691
|
this.el.innerHTML = "";
|
|
692
692
|
for (const t of e) {
|
|
693
|
-
const { name: s, handle: a } = t, { icons:
|
|
694
|
-
c.innerHTML =
|
|
693
|
+
const { name: s, handle: a } = t, { icons: o = {}, btnStyle: n, handlers: i = {} } = this.config, c = document.createElement("button");
|
|
694
|
+
c.innerHTML = o[a] ? `<img src="${o[a]}" title="${s}" />` : s, Object.assign(c.style, n), c.onclick = () => {
|
|
695
695
|
var d;
|
|
696
696
|
return (d = i[a]) == null ? void 0 : d.call(i, this.editor);
|
|
697
697
|
}, c.onmousedown = (d) => {
|
|
@@ -754,10 +754,10 @@ class tt {
|
|
|
754
754
|
}
|
|
755
755
|
const { el: t, config: s, canvas: a } = this;
|
|
756
756
|
e.setCoords();
|
|
757
|
-
const
|
|
757
|
+
const o = a.getZoom(), [, , , , n, i] = a.viewportTransform, { x: c } = e.getCenterPoint(), { top: d, height: h } = e.getBoundingRect(), g = c * o + n - t.offsetWidth / 2, u = s.offsetTop || 0, M = (d + h) * o + i + u;
|
|
758
758
|
Object.assign(t.style, {
|
|
759
759
|
left: `${g}px`,
|
|
760
|
-
top: `${
|
|
760
|
+
top: `${M}px`,
|
|
761
761
|
display: "flex"
|
|
762
762
|
});
|
|
763
763
|
}
|
|
@@ -768,7 +768,7 @@ class tt {
|
|
|
768
768
|
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("after:render", this._onSelectionChange), this.canvas.off("selection:cleared", this._onSelectionClear), this.el.remove();
|
|
769
769
|
}
|
|
770
770
|
}
|
|
771
|
-
class
|
|
771
|
+
class Q {
|
|
772
772
|
constructor({ editor: e }) {
|
|
773
773
|
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();
|
|
774
774
|
}
|
|
@@ -780,12 +780,13 @@ class st {
|
|
|
780
780
|
return this.patches[this.currentIndex - 1] || null;
|
|
781
781
|
}
|
|
782
782
|
_createDiffPatcher() {
|
|
783
|
-
this.diffPatcher =
|
|
783
|
+
this.diffPatcher = Be({
|
|
784
784
|
objectHash(e) {
|
|
785
785
|
const t = e;
|
|
786
786
|
return [
|
|
787
787
|
t.id,
|
|
788
788
|
t.backgroundId,
|
|
789
|
+
t.customData,
|
|
789
790
|
t.format,
|
|
790
791
|
t.locked,
|
|
791
792
|
t.left,
|
|
@@ -805,7 +806,7 @@ class st {
|
|
|
805
806
|
includeValueOnMove: !1
|
|
806
807
|
},
|
|
807
808
|
textDiff: {
|
|
808
|
-
diffMatchPatch:
|
|
809
|
+
diffMatchPatch: _e,
|
|
809
810
|
minLength: 60
|
|
810
811
|
}
|
|
811
812
|
});
|
|
@@ -836,8 +837,8 @@ class st {
|
|
|
836
837
|
getFullState() {
|
|
837
838
|
const { baseState: e, currentIndex: t, patches: s } = this;
|
|
838
839
|
let a = JSON.parse(JSON.stringify(e));
|
|
839
|
-
for (let
|
|
840
|
-
a = this.diffPatcher.patch(a, s[
|
|
840
|
+
for (let o = 0; o < t; o += 1)
|
|
841
|
+
a = this.diffPatcher.patch(a, s[o].diff);
|
|
841
842
|
return console.log("getFullState state", a), a;
|
|
842
843
|
}
|
|
843
844
|
/**
|
|
@@ -851,6 +852,7 @@ class st {
|
|
|
851
852
|
"evented",
|
|
852
853
|
"id",
|
|
853
854
|
"backgroundId",
|
|
855
|
+
"customData",
|
|
854
856
|
"backgroundType",
|
|
855
857
|
"format",
|
|
856
858
|
"width",
|
|
@@ -875,6 +877,31 @@ class st {
|
|
|
875
877
|
}
|
|
876
878
|
console.log("baseState", this.baseState), this.currentIndex < this.patches.length && this.patches.splice(this.currentIndex), console.log("diff", s), this.totalChangesCount += 1, this.patches.push({ id: A(), diff: s }), 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);
|
|
877
879
|
}
|
|
880
|
+
/**
|
|
881
|
+
* Сериализует customData объектов в строку. Это необходимо чтобы при вызове loadFromJSON fabricjs не пытался обрабатывать свойства внутри customData, как свойства FabricObject, если их названия совпадают с зарезервированными.
|
|
882
|
+
*
|
|
883
|
+
* @param state - состояние канваса для сериализации
|
|
884
|
+
*/
|
|
885
|
+
static _serializeCustomData(e) {
|
|
886
|
+
e.objects && e.objects.forEach((t) => {
|
|
887
|
+
t.customData && typeof t.customData == "object" && (t._serializedCustomData = JSON.stringify(t.customData), delete t.customData);
|
|
888
|
+
});
|
|
889
|
+
}
|
|
890
|
+
/**
|
|
891
|
+
* Десериализует customData из строки обратно в объект
|
|
892
|
+
* @param serializedObj - сериализованный объект из JSON
|
|
893
|
+
* @param fabricObject - объект Fabric, в который нужно записать customData
|
|
894
|
+
*/
|
|
895
|
+
static _deserializeCustomData(e, t) {
|
|
896
|
+
if (!(!e._serializedCustomData || !t))
|
|
897
|
+
try {
|
|
898
|
+
t.customData = JSON.parse(
|
|
899
|
+
e._serializedCustomData
|
|
900
|
+
);
|
|
901
|
+
} catch (s) {
|
|
902
|
+
console.warn("Не удалось десериализовать customData:", s), t.customData = {};
|
|
903
|
+
}
|
|
904
|
+
}
|
|
878
905
|
/**
|
|
879
906
|
* Функция загрузки состояния в канвас.
|
|
880
907
|
* @param fullState - полное состояние канваса
|
|
@@ -884,14 +911,16 @@ class st {
|
|
|
884
911
|
return y(this, null, function* () {
|
|
885
912
|
if (!e) return;
|
|
886
913
|
console.log("loadStateFromFullState fullState", e);
|
|
887
|
-
const { canvas: t, canvasManager: s, interactionBlocker: a, backgroundManager:
|
|
888
|
-
yield t.loadFromJSON(e)
|
|
914
|
+
const { canvas: t, canvasManager: s, interactionBlocker: a, backgroundManager: o } = this.editor, { width: n, height: i } = t;
|
|
915
|
+
a.overlayMask = null, Q._serializeCustomData(e), yield t.loadFromJSON(e, (l, g) => {
|
|
916
|
+
Q._deserializeCustomData(l, g);
|
|
917
|
+
});
|
|
889
918
|
const c = t.getObjects().find((l) => l.id === "montage-area");
|
|
890
|
-
c && (this.editor.montageArea = c, (
|
|
919
|
+
c && (this.editor.montageArea = c, (n !== t.getWidth() || i !== t.getHeight()) && s.updateCanvas());
|
|
891
920
|
const d = t.getObjects().find((l) => l.id === "overlay-mask");
|
|
892
921
|
d && (a.overlayMask = d, a.overlayMask.visible = !1);
|
|
893
922
|
const h = t.getObjects().find((l) => l.id === "background");
|
|
894
|
-
h ?
|
|
923
|
+
h ? o.backgroundObject = h : o.removeBackground({ withoutSave: !0 }), t.renderAll(), t.fire("editor:history-state-loaded", {
|
|
895
924
|
fullState: e,
|
|
896
925
|
currentIndex: this.currentIndex,
|
|
897
926
|
totalChangesCount: this.totalChangesCount,
|
|
@@ -976,7 +1005,7 @@ class st {
|
|
|
976
1005
|
});
|
|
977
1006
|
}
|
|
978
1007
|
}
|
|
979
|
-
const at = 0.1,
|
|
1008
|
+
const at = 0.1, ot = 2, nt = 0.1, it = 90, R = 16, U = 16, w = 4096, T = 4096, je = "application/image-editor:";
|
|
980
1009
|
class O {
|
|
981
1010
|
constructor({ editor: e }) {
|
|
982
1011
|
this.editor = e, this.options = e.options, this._createdBlobUrls = [], this.acceptContentTypes = this.editor.options.acceptContentTypes, this.acceptFormats = this.getAllowedFormatsFromContentTypes();
|
|
@@ -999,12 +1028,12 @@ class O {
|
|
|
999
1028
|
source: t,
|
|
1000
1029
|
scale: s = `image-${this.options.scaleType}`,
|
|
1001
1030
|
withoutSave: a = !1,
|
|
1002
|
-
fromClipboard:
|
|
1003
|
-
isBackground:
|
|
1031
|
+
fromClipboard: o = !1,
|
|
1032
|
+
isBackground: n = !1,
|
|
1004
1033
|
withoutSelection: i = !1
|
|
1005
1034
|
} = e;
|
|
1006
1035
|
if (!t) return null;
|
|
1007
|
-
const { canvas: c, montageArea: d, transformManager: h, historyManager: l, errorManager: g } = this.editor, u = yield this.getContentType(t),
|
|
1036
|
+
const { canvas: c, montageArea: d, transformManager: h, historyManager: l, errorManager: g } = this.editor, u = yield this.getContentType(t), M = O.getFormatFromContentType(u), { acceptContentTypes: m, acceptFormats: f } = this;
|
|
1008
1037
|
if (!this.isAllowedContentType(u)) {
|
|
1009
1038
|
const j = `Неверный contentType для изображения: ${u}. Ожидается один из: ${this.acceptContentTypes.join(", ")}.`;
|
|
1010
1039
|
return g.emitError({
|
|
@@ -1014,12 +1043,12 @@ class O {
|
|
|
1014
1043
|
message: j,
|
|
1015
1044
|
data: {
|
|
1016
1045
|
source: t,
|
|
1017
|
-
format:
|
|
1046
|
+
format: M,
|
|
1018
1047
|
contentType: u,
|
|
1019
1048
|
acceptContentTypes: m,
|
|
1020
|
-
acceptFormats:
|
|
1021
|
-
fromClipboard:
|
|
1022
|
-
isBackground:
|
|
1049
|
+
acceptFormats: f,
|
|
1050
|
+
fromClipboard: o,
|
|
1051
|
+
isBackground: n,
|
|
1023
1052
|
withoutSelection: i
|
|
1024
1053
|
}
|
|
1025
1054
|
}), null;
|
|
@@ -1030,8 +1059,8 @@ class O {
|
|
|
1030
1059
|
if (t instanceof File)
|
|
1031
1060
|
j = URL.createObjectURL(t);
|
|
1032
1061
|
else if (typeof t == "string") {
|
|
1033
|
-
const
|
|
1034
|
-
j = URL.createObjectURL(
|
|
1062
|
+
const D = yield (yield fetch(t, { mode: "cors" })).blob();
|
|
1063
|
+
j = URL.createObjectURL(D);
|
|
1035
1064
|
} else
|
|
1036
1065
|
return g.emitError({
|
|
1037
1066
|
origin: "ImageManager",
|
|
@@ -1040,51 +1069,51 @@ class O {
|
|
|
1040
1069
|
message: "Неверный тип источника изображения. Ожидается URL или объект File.",
|
|
1041
1070
|
data: {
|
|
1042
1071
|
source: t,
|
|
1043
|
-
format:
|
|
1072
|
+
format: M,
|
|
1044
1073
|
contentType: u,
|
|
1045
1074
|
acceptContentTypes: m,
|
|
1046
|
-
acceptFormats:
|
|
1047
|
-
fromClipboard:
|
|
1048
|
-
isBackground:
|
|
1075
|
+
acceptFormats: f,
|
|
1076
|
+
fromClipboard: o,
|
|
1077
|
+
isBackground: n,
|
|
1049
1078
|
withoutSelection: i
|
|
1050
1079
|
}
|
|
1051
1080
|
}), null;
|
|
1052
|
-
if (this._createdBlobUrls.push(j),
|
|
1053
|
-
const C = yield
|
|
1081
|
+
if (this._createdBlobUrls.push(j), M === "svg") {
|
|
1082
|
+
const C = yield Ne(j);
|
|
1054
1083
|
b = P.groupSVGElements(C.objects, C.options);
|
|
1055
1084
|
} else
|
|
1056
|
-
b = yield
|
|
1085
|
+
b = yield H.fromURL(j, { crossOrigin: "anonymous" });
|
|
1057
1086
|
const { width: S, height: k } = b;
|
|
1058
|
-
if (b instanceof
|
|
1087
|
+
if (b instanceof H) {
|
|
1059
1088
|
const C = b.getElement();
|
|
1060
|
-
let
|
|
1061
|
-
if (C instanceof HTMLImageElement ?
|
|
1062
|
-
const L = yield this.resizeImageToBoundaries(
|
|
1063
|
-
this._createdBlobUrls.push(p), b = yield
|
|
1089
|
+
let D = "";
|
|
1090
|
+
if (C instanceof HTMLImageElement ? D = C.src : C instanceof HTMLCanvasElement && (D = C.toDataURL()), k > T || S > w) {
|
|
1091
|
+
const L = yield this.resizeImageToBoundaries(D, "max"), p = URL.createObjectURL(L);
|
|
1092
|
+
this._createdBlobUrls.push(p), b = yield H.fromURL(p, { crossOrigin: "anonymous" });
|
|
1064
1093
|
} else if (k < U || S < R) {
|
|
1065
|
-
const L = yield this.resizeImageToBoundaries(
|
|
1066
|
-
this._createdBlobUrls.push(p), b = yield
|
|
1094
|
+
const L = yield this.resizeImageToBoundaries(D, "min"), p = URL.createObjectURL(L);
|
|
1095
|
+
this._createdBlobUrls.push(p), b = yield H.fromURL(p, { crossOrigin: "anonymous" });
|
|
1067
1096
|
}
|
|
1068
1097
|
}
|
|
1069
|
-
if (b.set("id", `${b.type}-${A()}`), b.set("format",
|
|
1098
|
+
if (b.set("id", `${b.type}-${A()}`), b.set("format", M), s === "scale-montage")
|
|
1070
1099
|
this.editor.canvasManager.scaleMontageAreaToImage({ object: b, withoutSave: !0 });
|
|
1071
1100
|
else {
|
|
1072
|
-
const { width: C, height:
|
|
1073
|
-
s === "image-contain" && L < 1 ? h.fitObject({ object: b, type: "contain", withoutSave: !0 }) : s === "image-cover" && (S > C || k >
|
|
1101
|
+
const { width: C, height: D } = d, L = this.calculateScaleFactor({ imageObject: b, scaleType: s });
|
|
1102
|
+
s === "image-contain" && L < 1 ? h.fitObject({ object: b, type: "contain", withoutSave: !0 }) : s === "image-cover" && (S > C || k > D) && h.fitObject({ object: b, type: "cover", withoutSave: !0 });
|
|
1074
1103
|
}
|
|
1075
1104
|
c.add(b), c.centerObject(b), i || c.setActiveObject(b), c.renderAll(), l.resumeHistory(), a || l.saveState();
|
|
1076
|
-
const
|
|
1105
|
+
const z = {
|
|
1077
1106
|
image: b,
|
|
1078
|
-
format:
|
|
1107
|
+
format: M,
|
|
1079
1108
|
contentType: u,
|
|
1080
1109
|
scale: s,
|
|
1081
1110
|
withoutSave: a,
|
|
1082
1111
|
source: t,
|
|
1083
|
-
fromClipboard:
|
|
1084
|
-
isBackground:
|
|
1112
|
+
fromClipboard: o,
|
|
1113
|
+
isBackground: n,
|
|
1085
1114
|
withoutSelection: i
|
|
1086
1115
|
};
|
|
1087
|
-
return c.fire("editor:image-imported",
|
|
1116
|
+
return c.fire("editor:image-imported", z), z;
|
|
1088
1117
|
} catch (j) {
|
|
1089
1118
|
return g.emitError({
|
|
1090
1119
|
origin: "ImageManager",
|
|
@@ -1093,12 +1122,12 @@ class O {
|
|
|
1093
1122
|
message: `Ошибка импорта изображения: ${j.message}`,
|
|
1094
1123
|
data: {
|
|
1095
1124
|
source: t,
|
|
1096
|
-
format:
|
|
1125
|
+
format: M,
|
|
1097
1126
|
contentType: u,
|
|
1098
1127
|
scale: s,
|
|
1099
1128
|
withoutSave: a,
|
|
1100
|
-
fromClipboard:
|
|
1101
|
-
isBackground:
|
|
1129
|
+
fromClipboard: o,
|
|
1130
|
+
isBackground: n,
|
|
1102
1131
|
withoutSelection: i
|
|
1103
1132
|
}
|
|
1104
1133
|
}), l.resumeHistory(), null;
|
|
@@ -1151,81 +1180,81 @@ class O {
|
|
|
1151
1180
|
fileName: t = "image.png",
|
|
1152
1181
|
contentType: s = "image/png",
|
|
1153
1182
|
exportAsBase64: a = !1,
|
|
1154
|
-
exportAsBlob:
|
|
1155
|
-
} = e, { canvas:
|
|
1183
|
+
exportAsBlob: o = !1
|
|
1184
|
+
} = e, { canvas: n, montageArea: i, workerManager: c } = this.editor;
|
|
1156
1185
|
try {
|
|
1157
1186
|
const d = s === "application/pdf", h = d ? "image/jpg" : s, l = O.getFormatFromContentType(h);
|
|
1158
1187
|
i.setCoords();
|
|
1159
|
-
const { left: g, top: u, width:
|
|
1160
|
-
|
|
1161
|
-
const j =
|
|
1162
|
-
j && (j.visible = !1),
|
|
1163
|
-
const b =
|
|
1188
|
+
const { left: g, top: u, width: M, height: m } = i.getBoundingRect(), f = yield n.clone(["id", "format", "locked"]);
|
|
1189
|
+
f.enableRetinaScaling = !1, ["image/jpg", "image/jpeg"].includes(h) && (f.backgroundColor = "#ffffff");
|
|
1190
|
+
const j = f.getObjects().find((p) => p.id === i.id);
|
|
1191
|
+
j && (j.visible = !1), f.viewportTransform = [1, 0, 0, 1, -g, -u], f.setDimensions({ width: M, height: m }, { backstoreOnly: !0 }), f.renderAll();
|
|
1192
|
+
const b = f.getObjects().filter((p) => p.format).every((p) => p.format === "svg");
|
|
1164
1193
|
if (l === "svg" && b) {
|
|
1165
|
-
const p =
|
|
1166
|
-
|
|
1167
|
-
const
|
|
1194
|
+
const p = f.toSVG();
|
|
1195
|
+
f.dispose();
|
|
1196
|
+
const E = {
|
|
1168
1197
|
image: O._exportSVGStringAsFile(p, {
|
|
1169
1198
|
exportAsBase64: a,
|
|
1170
|
-
exportAsBlob:
|
|
1199
|
+
exportAsBlob: o,
|
|
1171
1200
|
fileName: t
|
|
1172
1201
|
}),
|
|
1173
1202
|
format: "svg",
|
|
1174
1203
|
contentType: "image/svg+xml",
|
|
1175
1204
|
fileName: t.replace(/\.[^/.]+$/, ".svg")
|
|
1176
1205
|
};
|
|
1177
|
-
return
|
|
1206
|
+
return n.fire("editor:canvas-exported", E), E;
|
|
1178
1207
|
}
|
|
1179
1208
|
const S = yield new Promise((p, B) => {
|
|
1180
|
-
|
|
1181
|
-
|
|
1209
|
+
f.getElement().toBlob((E) => {
|
|
1210
|
+
E ? p(E) : B(new Error("Failed to create Blob from canvas"));
|
|
1182
1211
|
});
|
|
1183
1212
|
});
|
|
1184
|
-
if (
|
|
1213
|
+
if (f.dispose(), o) {
|
|
1185
1214
|
const p = {
|
|
1186
1215
|
image: S,
|
|
1187
1216
|
format: l,
|
|
1188
1217
|
contentType: h,
|
|
1189
1218
|
fileName: t
|
|
1190
1219
|
};
|
|
1191
|
-
return
|
|
1220
|
+
return n.fire("editor:canvas-exported", p), p;
|
|
1192
1221
|
}
|
|
1193
|
-
const k = yield createImageBitmap(S),
|
|
1222
|
+
const k = yield createImageBitmap(S), z = yield c.post(
|
|
1194
1223
|
"toDataURL",
|
|
1195
1224
|
{ format: l, quality: 1, bitmap: k },
|
|
1196
1225
|
[k]
|
|
1197
1226
|
);
|
|
1198
1227
|
if (d) {
|
|
1199
|
-
const B =
|
|
1200
|
-
orientation: B >
|
|
1228
|
+
const B = M * 0.264583, E = m * 0.264583, Ie = (yield this.editor.moduleLoader.loadModule("jspdf")).jsPDF, q = new Ie({
|
|
1229
|
+
orientation: B > E ? "landscape" : "portrait",
|
|
1201
1230
|
unit: "mm",
|
|
1202
|
-
format: [B,
|
|
1231
|
+
format: [B, E]
|
|
1203
1232
|
});
|
|
1204
|
-
if (
|
|
1205
|
-
const
|
|
1206
|
-
image:
|
|
1233
|
+
if (q.addImage(String(z), "JPG", 0, 0, B, E), a) {
|
|
1234
|
+
const le = {
|
|
1235
|
+
image: q.output("datauristring"),
|
|
1207
1236
|
format: "pdf",
|
|
1208
1237
|
contentType: "application/pdf",
|
|
1209
1238
|
fileName: t
|
|
1210
1239
|
};
|
|
1211
|
-
return
|
|
1240
|
+
return n.fire("editor:canvas-exported", le), le;
|
|
1212
1241
|
}
|
|
1213
|
-
const
|
|
1214
|
-
image: new File([
|
|
1242
|
+
const ve = q.output("blob"), de = {
|
|
1243
|
+
image: new File([ve], t, { type: "application/pdf" }),
|
|
1215
1244
|
format: "pdf",
|
|
1216
1245
|
contentType: "application/pdf",
|
|
1217
1246
|
fileName: t
|
|
1218
1247
|
};
|
|
1219
|
-
return
|
|
1248
|
+
return n.fire("editor:canvas-exported", de), de;
|
|
1220
1249
|
}
|
|
1221
1250
|
if (a) {
|
|
1222
1251
|
const p = {
|
|
1223
|
-
image:
|
|
1252
|
+
image: z,
|
|
1224
1253
|
format: l,
|
|
1225
1254
|
contentType: h,
|
|
1226
1255
|
fileName: t
|
|
1227
1256
|
};
|
|
1228
|
-
return
|
|
1257
|
+
return n.fire("editor:canvas-exported", p), p;
|
|
1229
1258
|
}
|
|
1230
1259
|
const C = l === "svg" && !b ? t.replace(/\.[^/.]+$/, ".png") : t, L = {
|
|
1231
1260
|
image: new File([S], C, { type: h }),
|
|
@@ -1233,14 +1262,14 @@ class O {
|
|
|
1233
1262
|
contentType: h,
|
|
1234
1263
|
fileName: C
|
|
1235
1264
|
};
|
|
1236
|
-
return
|
|
1265
|
+
return n.fire("editor:canvas-exported", L), L;
|
|
1237
1266
|
} catch (d) {
|
|
1238
1267
|
return this.editor.errorManager.emitError({
|
|
1239
1268
|
origin: "ImageManager",
|
|
1240
1269
|
method: "exportCanvasAsImageFile",
|
|
1241
1270
|
code: "IMAGE_EXPORT_FAILED",
|
|
1242
1271
|
message: `Ошибка экспорта изображения: ${d.message}`,
|
|
1243
|
-
data: { contentType: s, fileName: t, exportAsBase64: a, exportAsBlob:
|
|
1272
|
+
data: { contentType: s, fileName: t, exportAsBase64: a, exportAsBlob: o }
|
|
1244
1273
|
}), null;
|
|
1245
1274
|
}
|
|
1246
1275
|
});
|
|
@@ -1262,8 +1291,8 @@ class O {
|
|
|
1262
1291
|
object: t,
|
|
1263
1292
|
fileName: s = "image.png",
|
|
1264
1293
|
contentType: a = "image/png",
|
|
1265
|
-
exportAsBase64:
|
|
1266
|
-
exportAsBlob:
|
|
1294
|
+
exportAsBase64: o = !1,
|
|
1295
|
+
exportAsBlob: n = !1
|
|
1267
1296
|
} = e, { canvas: i, workerManager: c } = this.editor, d = t || i.getActiveObject();
|
|
1268
1297
|
if (!d)
|
|
1269
1298
|
return this.editor.errorManager.emitError({
|
|
@@ -1271,26 +1300,26 @@ class O {
|
|
|
1271
1300
|
method: "exportObjectAsImageFile",
|
|
1272
1301
|
code: "NO_OBJECT_SELECTED",
|
|
1273
1302
|
message: "Не выбран объект для экспорта",
|
|
1274
|
-
data: { contentType: a, fileName: s, exportAsBase64:
|
|
1303
|
+
data: { contentType: a, fileName: s, exportAsBase64: o, exportAsBlob: n }
|
|
1275
1304
|
}), null;
|
|
1276
1305
|
try {
|
|
1277
1306
|
const h = O.getFormatFromContentType(a);
|
|
1278
1307
|
if (h === "svg") {
|
|
1279
|
-
const m = d.toSVG(),
|
|
1280
|
-
exportAsBase64:
|
|
1281
|
-
exportAsBlob:
|
|
1308
|
+
const m = d.toSVG(), f = O._exportSVGStringAsFile(m, {
|
|
1309
|
+
exportAsBase64: o,
|
|
1310
|
+
exportAsBlob: n,
|
|
1282
1311
|
fileName: s
|
|
1283
1312
|
}), j = {
|
|
1284
1313
|
object: d,
|
|
1285
|
-
image:
|
|
1314
|
+
image: f,
|
|
1286
1315
|
format: h,
|
|
1287
1316
|
contentType: "image/svg+xml",
|
|
1288
1317
|
fileName: s.replace(/\.[^/.]+$/, ".svg")
|
|
1289
1318
|
};
|
|
1290
1319
|
return i.fire("editor:object-exported", j), j;
|
|
1291
1320
|
}
|
|
1292
|
-
if (
|
|
1293
|
-
const m = yield createImageBitmap(d.getElement()),
|
|
1321
|
+
if (o && d instanceof H) {
|
|
1322
|
+
const m = yield createImageBitmap(d.getElement()), f = yield c.post(
|
|
1294
1323
|
"toDataURL",
|
|
1295
1324
|
{
|
|
1296
1325
|
format: h,
|
|
@@ -1300,7 +1329,7 @@ class O {
|
|
|
1300
1329
|
[m]
|
|
1301
1330
|
), j = {
|
|
1302
1331
|
object: d,
|
|
1303
|
-
image:
|
|
1332
|
+
image: f,
|
|
1304
1333
|
format: h,
|
|
1305
1334
|
contentType: a,
|
|
1306
1335
|
fileName: s
|
|
@@ -1309,12 +1338,12 @@ class O {
|
|
|
1309
1338
|
}
|
|
1310
1339
|
const l = d.toCanvasElement({
|
|
1311
1340
|
enableRetinaScaling: !1
|
|
1312
|
-
}), g = yield new Promise((m,
|
|
1341
|
+
}), g = yield new Promise((m, f) => {
|
|
1313
1342
|
l.toBlob((j) => {
|
|
1314
|
-
j ? m(j) :
|
|
1343
|
+
j ? m(j) : f(new Error("Failed to create Blob from canvas"));
|
|
1315
1344
|
});
|
|
1316
1345
|
});
|
|
1317
|
-
if (
|
|
1346
|
+
if (n) {
|
|
1318
1347
|
const m = {
|
|
1319
1348
|
object: d,
|
|
1320
1349
|
image: g,
|
|
@@ -1324,21 +1353,21 @@ class O {
|
|
|
1324
1353
|
};
|
|
1325
1354
|
return i.fire("editor:object-exported", m), m;
|
|
1326
1355
|
}
|
|
1327
|
-
const u = new File([g], s, { type: a }),
|
|
1356
|
+
const u = new File([g], s, { type: a }), M = {
|
|
1328
1357
|
object: d,
|
|
1329
1358
|
image: u,
|
|
1330
1359
|
format: h,
|
|
1331
1360
|
contentType: a,
|
|
1332
1361
|
fileName: s
|
|
1333
1362
|
};
|
|
1334
|
-
return i.fire("editor:object-exported",
|
|
1363
|
+
return i.fire("editor:object-exported", M), M;
|
|
1335
1364
|
} catch (h) {
|
|
1336
1365
|
return this.editor.errorManager.emitError({
|
|
1337
1366
|
origin: "ImageManager",
|
|
1338
1367
|
method: "exportObjectAsImageFile",
|
|
1339
1368
|
code: "IMAGE_EXPORT_FAILED",
|
|
1340
1369
|
message: `Ошибка экспорта объекта: ${h.message}`,
|
|
1341
|
-
data: { contentType: a, fileName: s, exportAsBase64:
|
|
1370
|
+
data: { contentType: a, fileName: s, exportAsBase64: o, exportAsBlob: n }
|
|
1342
1371
|
}), null;
|
|
1343
1372
|
}
|
|
1344
1373
|
});
|
|
@@ -1405,11 +1434,11 @@ class O {
|
|
|
1405
1434
|
getContentTypeFromExtension(e) {
|
|
1406
1435
|
var t;
|
|
1407
1436
|
try {
|
|
1408
|
-
const a = (t = new URL(e).pathname.split(".").pop()) == null ? void 0 : t.toLowerCase(),
|
|
1409
|
-
return this.acceptContentTypes.forEach((
|
|
1410
|
-
const i = O.getFormatFromContentType(
|
|
1411
|
-
i && (
|
|
1412
|
-
}), a &&
|
|
1437
|
+
const a = (t = new URL(e).pathname.split(".").pop()) == null ? void 0 : t.toLowerCase(), o = {};
|
|
1438
|
+
return this.acceptContentTypes.forEach((n) => {
|
|
1439
|
+
const i = O.getFormatFromContentType(n);
|
|
1440
|
+
i && (o[i] = n);
|
|
1441
|
+
}), a && o[a] || "application/octet-stream";
|
|
1413
1442
|
} catch (s) {
|
|
1414
1443
|
return console.warn("Не удалось определить расширение из URL:", e, s), "application/octet-stream";
|
|
1415
1444
|
}
|
|
@@ -1427,8 +1456,8 @@ class O {
|
|
|
1427
1456
|
}) {
|
|
1428
1457
|
const { montageArea: s } = this.editor;
|
|
1429
1458
|
if (!s || !e) return 1;
|
|
1430
|
-
const a = s.width,
|
|
1431
|
-
return t === "contain" || t === "image-contain" ? Math.min(a /
|
|
1459
|
+
const a = s.width, o = s.height, { width: n, height: i } = e;
|
|
1460
|
+
return t === "contain" || t === "image-contain" ? Math.min(a / n, o / i) : t === "cover" || t === "image-cover" ? Math.max(a / n, o / i) : 1;
|
|
1432
1461
|
}
|
|
1433
1462
|
/**
|
|
1434
1463
|
* Преобразует SVG-строку в Blob, файл, или base64
|
|
@@ -1460,7 +1489,7 @@ class O {
|
|
|
1460
1489
|
return t ? t[1] : "";
|
|
1461
1490
|
}
|
|
1462
1491
|
}
|
|
1463
|
-
const
|
|
1492
|
+
const _ = (r, e, t) => Math.max(Math.min(r, t), e), ye = (r, e) => r * e, rt = (r, e) => new G(r / 2, e / 2);
|
|
1464
1493
|
function ct(r) {
|
|
1465
1494
|
return ((r == null ? void 0 : r.type) === "image" || (r == null ? void 0 : r.format) === "svg") && typeof (r == null ? void 0 : r.width) == "number" && typeof (r == null ? void 0 : r.height) == "number";
|
|
1466
1495
|
}
|
|
@@ -1489,20 +1518,20 @@ class dt {
|
|
|
1489
1518
|
* @fires editor:resolution-width-changed
|
|
1490
1519
|
*/
|
|
1491
1520
|
setResolutionWidth(e, { preserveProportional: t, withoutSave: s, adaptCanvasToContainer: a } = {}) {
|
|
1492
|
-
var
|
|
1521
|
+
var M;
|
|
1493
1522
|
if (!e) return;
|
|
1494
1523
|
const {
|
|
1495
|
-
canvas:
|
|
1496
|
-
montageArea:
|
|
1524
|
+
canvas: o,
|
|
1525
|
+
montageArea: n,
|
|
1497
1526
|
options: { canvasBackstoreWidth: i }
|
|
1498
|
-
} = this.editor, { width: c, height: d } =
|
|
1499
|
-
if (!i || i === "auto" || a ? this.adaptCanvasToContainer() : i ? this.setCanvasBackstoreWidth(Number(i)) : this.setCanvasBackstoreWidth(h),
|
|
1500
|
-
const m = h / c,
|
|
1501
|
-
this.setResolutionHeight(
|
|
1527
|
+
} = this.editor, { width: c, height: d } = n, h = _(Number(e), R, w);
|
|
1528
|
+
if (!i || i === "auto" || a ? this.adaptCanvasToContainer() : i ? this.setCanvasBackstoreWidth(Number(i)) : this.setCanvasBackstoreWidth(h), n.set({ width: h }), (M = o.clipPath) == null || M.set({ width: h }), t) {
|
|
1529
|
+
const m = h / c, f = ye(d, m);
|
|
1530
|
+
this.setResolutionHeight(f);
|
|
1502
1531
|
return;
|
|
1503
1532
|
}
|
|
1504
|
-
const { left: l, top: g } = this.getObjectDefaultCoords(
|
|
1505
|
-
|
|
1533
|
+
const { left: l, top: g } = this.getObjectDefaultCoords(n), u = o.getZoom();
|
|
1534
|
+
o.setViewportTransform([u, 0, 0, u, l, g]), this.centerMontageArea(), s || this.editor.historyManager.saveState(), o.fire("editor:resolution-width-changed", {
|
|
1506
1535
|
width: h,
|
|
1507
1536
|
preserveProportional: t,
|
|
1508
1537
|
withoutSave: s,
|
|
@@ -1519,20 +1548,20 @@ class dt {
|
|
|
1519
1548
|
* @fires editor:resolution-height-changed
|
|
1520
1549
|
*/
|
|
1521
1550
|
setResolutionHeight(e, { preserveProportional: t, withoutSave: s, adaptCanvasToContainer: a } = {}) {
|
|
1522
|
-
var
|
|
1551
|
+
var M;
|
|
1523
1552
|
if (!e) return;
|
|
1524
1553
|
const {
|
|
1525
|
-
canvas:
|
|
1526
|
-
montageArea:
|
|
1554
|
+
canvas: o,
|
|
1555
|
+
montageArea: n,
|
|
1527
1556
|
options: { canvasBackstoreHeight: i }
|
|
1528
|
-
} = this.editor, { width: c, height: d } =
|
|
1529
|
-
if (!i || i === "auto" || a ? this.adaptCanvasToContainer() : i ? this.setCanvasBackstoreHeight(Number(i)) : this.setCanvasBackstoreHeight(h),
|
|
1530
|
-
const m = h / d,
|
|
1531
|
-
this.setResolutionWidth(
|
|
1557
|
+
} = this.editor, { width: c, height: d } = n, h = _(Number(e), U, T);
|
|
1558
|
+
if (!i || i === "auto" || a ? this.adaptCanvasToContainer() : i ? this.setCanvasBackstoreHeight(Number(i)) : this.setCanvasBackstoreHeight(h), n.set({ height: h }), (M = o.clipPath) == null || M.set({ height: h }), t) {
|
|
1559
|
+
const m = h / d, f = ye(c, m);
|
|
1560
|
+
this.setResolutionWidth(f);
|
|
1532
1561
|
return;
|
|
1533
1562
|
}
|
|
1534
|
-
const { left: l, top: g } = this.getObjectDefaultCoords(
|
|
1535
|
-
|
|
1563
|
+
const { left: l, top: g } = this.getObjectDefaultCoords(n), u = o.getZoom();
|
|
1564
|
+
o.setViewportTransform([u, 0, 0, u, l, g]), this.centerMontageArea(), s || this.editor.historyManager.saveState(), o.fire("editor:resolution-height-changed", {
|
|
1536
1565
|
height: h,
|
|
1537
1566
|
preserveProportional: t,
|
|
1538
1567
|
withoutSave: s,
|
|
@@ -1545,7 +1574,7 @@ class dt {
|
|
|
1545
1574
|
*/
|
|
1546
1575
|
centerMontageArea() {
|
|
1547
1576
|
var c;
|
|
1548
|
-
const { canvas: e, montageArea: t } = this.editor, s = e.getWidth(), a = e.getHeight(),
|
|
1577
|
+
const { canvas: e, montageArea: t } = this.editor, s = e.getWidth(), a = e.getHeight(), o = e.getZoom(), n = rt(s, a);
|
|
1549
1578
|
t.set({
|
|
1550
1579
|
left: s / 2,
|
|
1551
1580
|
top: a / 2
|
|
@@ -1554,7 +1583,7 @@ class dt {
|
|
|
1554
1583
|
top: a / 2
|
|
1555
1584
|
}), e.renderAll();
|
|
1556
1585
|
const i = e.viewportTransform;
|
|
1557
|
-
i[4] = s / 2 -
|
|
1586
|
+
i[4] = s / 2 - n.x * o, i[5] = a / 2 - n.y * o, e.setViewportTransform(i), e.renderAll();
|
|
1558
1587
|
}
|
|
1559
1588
|
/**
|
|
1560
1589
|
* Метод для получения координат объекта с учетом текущего зума
|
|
@@ -1570,7 +1599,7 @@ class dt {
|
|
|
1570
1599
|
code: "NO_ACTIVE_OBJECT",
|
|
1571
1600
|
message: "Не выбран объект для получения координат"
|
|
1572
1601
|
}), { left: 0, top: 0 };
|
|
1573
|
-
const { width: a, height:
|
|
1602
|
+
const { width: a, height: o } = s, n = t.getZoom(), i = (a - a * n) / 2, c = (o - o * n) / 2;
|
|
1574
1603
|
return { left: i, top: c };
|
|
1575
1604
|
}
|
|
1576
1605
|
/**
|
|
@@ -1578,7 +1607,7 @@ class dt {
|
|
|
1578
1607
|
*/
|
|
1579
1608
|
setCanvasBackstoreWidth(e) {
|
|
1580
1609
|
if (!e || typeof e != "number") return;
|
|
1581
|
-
const t =
|
|
1610
|
+
const t = _(e, R, w);
|
|
1582
1611
|
this.editor.canvas.setDimensions({ width: t }, { backstoreOnly: !0 });
|
|
1583
1612
|
}
|
|
1584
1613
|
/**
|
|
@@ -1587,7 +1616,7 @@ class dt {
|
|
|
1587
1616
|
*/
|
|
1588
1617
|
setCanvasBackstoreHeight(e) {
|
|
1589
1618
|
if (!e || typeof e != "number") return;
|
|
1590
|
-
const t =
|
|
1619
|
+
const t = _(e, U, T);
|
|
1591
1620
|
this.editor.canvas.setDimensions({ height: t }, { backstoreOnly: !0 });
|
|
1592
1621
|
}
|
|
1593
1622
|
/**
|
|
@@ -1596,8 +1625,8 @@ class dt {
|
|
|
1596
1625
|
* с учётом минимальных и максимальных значений.
|
|
1597
1626
|
*/
|
|
1598
1627
|
adaptCanvasToContainer() {
|
|
1599
|
-
const { canvas: e } = this.editor, t = this.getEditorContainer(), s = t.clientWidth, a = t.clientHeight,
|
|
1600
|
-
e.setDimensions({ width:
|
|
1628
|
+
const { canvas: e } = this.editor, t = this.getEditorContainer(), s = t.clientWidth, a = t.clientHeight, o = _(s, R, w), n = _(a, U, T);
|
|
1629
|
+
e.setDimensions({ width: o, height: n }, { backstoreOnly: !0 });
|
|
1601
1630
|
}
|
|
1602
1631
|
/**
|
|
1603
1632
|
* Обновляет размеры канваса без изменения позиций объектов.
|
|
@@ -1612,9 +1641,9 @@ class dt {
|
|
|
1612
1641
|
width: s,
|
|
1613
1642
|
height: a
|
|
1614
1643
|
}
|
|
1615
|
-
} = this.editor,
|
|
1644
|
+
} = this.editor, o = t.left, n = t.top;
|
|
1616
1645
|
this.setResolutionWidth(s, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.setResolutionHeight(a, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.centerMontageArea();
|
|
1617
|
-
const i = t.left -
|
|
1646
|
+
const i = t.left - o, c = t.top - n;
|
|
1618
1647
|
if (i !== 0 || c !== 0) {
|
|
1619
1648
|
const d = e.getActiveObject(), h = [];
|
|
1620
1649
|
if ((d == null ? void 0 : d.type) === "activeselection") {
|
|
@@ -1748,32 +1777,32 @@ class dt {
|
|
|
1748
1777
|
*/
|
|
1749
1778
|
setDisplayDimension({ element: e = "canvas", dimension: t, value: s } = {}) {
|
|
1750
1779
|
if (!s) return;
|
|
1751
|
-
const { canvas: a } = this.editor,
|
|
1780
|
+
const { canvas: a } = this.editor, o = [];
|
|
1752
1781
|
switch (e) {
|
|
1753
1782
|
case "canvas":
|
|
1754
|
-
|
|
1783
|
+
o.push(a.lowerCanvasEl, a.upperCanvasEl);
|
|
1755
1784
|
break;
|
|
1756
1785
|
case "wrapper":
|
|
1757
|
-
|
|
1786
|
+
o.push(a.wrapperEl);
|
|
1758
1787
|
break;
|
|
1759
1788
|
case "container":
|
|
1760
|
-
|
|
1789
|
+
o.push(this.getEditorContainer());
|
|
1761
1790
|
break;
|
|
1762
1791
|
default:
|
|
1763
|
-
|
|
1792
|
+
o.push(a.lowerCanvasEl, a.upperCanvasEl);
|
|
1764
1793
|
}
|
|
1765
|
-
const
|
|
1794
|
+
const n = t === "width" ? "width" : "height";
|
|
1766
1795
|
if (typeof s == "string") {
|
|
1767
|
-
|
|
1768
|
-
c.style[
|
|
1796
|
+
o.forEach((c) => {
|
|
1797
|
+
c.style[n] = s;
|
|
1769
1798
|
});
|
|
1770
1799
|
return;
|
|
1771
1800
|
}
|
|
1772
1801
|
if (isNaN(s)) return;
|
|
1773
1802
|
const i = `${s}px`;
|
|
1774
|
-
|
|
1775
|
-
c.style[
|
|
1776
|
-
}), a.fire(`editor:display-${e}-${
|
|
1803
|
+
o.forEach((c) => {
|
|
1804
|
+
c.style[n] = i;
|
|
1805
|
+
}), a.fire(`editor:display-${e}-${n}-changed`, {
|
|
1777
1806
|
element: e,
|
|
1778
1807
|
value: s
|
|
1779
1808
|
});
|
|
@@ -1789,8 +1818,8 @@ class dt {
|
|
|
1789
1818
|
scaleMontageAreaToImage({ object: e, preserveAspectRatio: t, withoutSave: s } = {}) {
|
|
1790
1819
|
const {
|
|
1791
1820
|
canvas: a,
|
|
1792
|
-
montageArea:
|
|
1793
|
-
transformManager:
|
|
1821
|
+
montageArea: o,
|
|
1822
|
+
transformManager: n,
|
|
1794
1823
|
options: {
|
|
1795
1824
|
montageAreaWidth: i,
|
|
1796
1825
|
montageAreaHeight: c
|
|
@@ -1801,12 +1830,12 @@ class dt {
|
|
|
1801
1830
|
let g = Math.min(h, w), u = Math.min(l, T);
|
|
1802
1831
|
if (t) {
|
|
1803
1832
|
const {
|
|
1804
|
-
width:
|
|
1833
|
+
width: M,
|
|
1805
1834
|
height: m
|
|
1806
|
-
} =
|
|
1807
|
-
g =
|
|
1835
|
+
} = o, f = h / M, j = l / m, b = Math.max(f, j);
|
|
1836
|
+
g = M * b, u = m * b;
|
|
1808
1837
|
}
|
|
1809
|
-
this.setResolutionWidth(g, { withoutSave: !0 }), this.setResolutionHeight(u, { withoutSave: !0 }), this.editor.backgroundManager.backgroundObject && this.editor.backgroundManager.refresh(), (h > i || l > c) &&
|
|
1838
|
+
this.setResolutionWidth(g, { withoutSave: !0 }), this.setResolutionHeight(u, { withoutSave: !0 }), this.editor.backgroundManager.backgroundObject && this.editor.backgroundManager.refresh(), (h > i || l > c) && n.calculateAndApplyDefaultZoom(), n.resetObject({ object: d, withoutSave: !0 }), a.centerObject(d), a.renderAll(), s || this.editor.historyManager.saveState(), a.fire("editor:montage-area-scaled-to-image", {
|
|
1810
1839
|
object: d,
|
|
1811
1840
|
width: g,
|
|
1812
1841
|
height: u,
|
|
@@ -1834,11 +1863,11 @@ class dt {
|
|
|
1834
1863
|
transformManager: s,
|
|
1835
1864
|
historyManager: a,
|
|
1836
1865
|
options: {
|
|
1837
|
-
montageAreaWidth:
|
|
1838
|
-
montageAreaHeight:
|
|
1866
|
+
montageAreaWidth: o,
|
|
1867
|
+
montageAreaHeight: n
|
|
1839
1868
|
}
|
|
1840
1869
|
} = this.editor;
|
|
1841
|
-
s.resetZoom(), this.setResolutionWidth(
|
|
1870
|
+
s.resetZoom(), this.setResolutionWidth(o, { withoutSave: !0 }), this.setResolutionHeight(n, { withoutSave: !0 }), t.renderAll(), s.resetObjects(), e || a.saveState(), t.fire("editor:default-scale-set");
|
|
1842
1871
|
}
|
|
1843
1872
|
/**
|
|
1844
1873
|
* Получение всех объектов внутри монтажной области редактора
|
|
@@ -1852,13 +1881,13 @@ class dt {
|
|
|
1852
1881
|
backgroundManager: { backgroundObject: a }
|
|
1853
1882
|
} = this.editor;
|
|
1854
1883
|
return e.getObjects().filter(
|
|
1855
|
-
(
|
|
1884
|
+
(n) => n.id !== t.id && n.id !== (s == null ? void 0 : s.id) && n.id !== (a == null ? void 0 : a.id)
|
|
1856
1885
|
);
|
|
1857
1886
|
}
|
|
1858
1887
|
}
|
|
1859
1888
|
class lt {
|
|
1860
1889
|
constructor({ editor: e }) {
|
|
1861
|
-
this.editor = e, this.options = e.options, this.minZoom = this.options.minZoom || at, this.maxZoom = this.options.maxZoom ||
|
|
1890
|
+
this.editor = e, this.options = e.options, this.minZoom = this.options.minZoom || at, this.maxZoom = this.options.maxZoom || ot, this.defaultZoom = this.options.defaultScale;
|
|
1862
1891
|
}
|
|
1863
1892
|
/**
|
|
1864
1893
|
* Метод рассчитывает и применяет зум по умолчанию для монтажной области редактора.
|
|
@@ -1868,7 +1897,7 @@ class lt {
|
|
|
1868
1897
|
* @param scale - Желаемый масштаб относительно размеров контейнера редактора.
|
|
1869
1898
|
*/
|
|
1870
1899
|
calculateAndApplyDefaultZoom(e = this.options.defaultScale) {
|
|
1871
|
-
const { canvas: t } = this.editor, s = t.editorContainer, a = s.clientWidth,
|
|
1900
|
+
const { canvas: t } = this.editor, s = t.editorContainer, a = s.clientWidth, o = s.clientHeight, { width: n, height: i } = this.editor.montageArea, c = a / n * e, d = o / i * e;
|
|
1872
1901
|
this.defaultZoom = Math.min(c, d), this.setZoom();
|
|
1873
1902
|
}
|
|
1874
1903
|
/**
|
|
@@ -1880,13 +1909,13 @@ class lt {
|
|
|
1880
1909
|
* @fires editor:zoom-changed
|
|
1881
1910
|
* Если передавать координаты курсора, то нужно быть аккуратнее, так как юзер может выйти за пределы рабочей области
|
|
1882
1911
|
*/
|
|
1883
|
-
zoom(e =
|
|
1912
|
+
zoom(e = nt, t = {}) {
|
|
1884
1913
|
var g, u;
|
|
1885
1914
|
if (!e) return;
|
|
1886
|
-
const { minZoom: s, maxZoom: a } = this, { canvas:
|
|
1887
|
-
let l = Number((
|
|
1888
|
-
l > a && (l = a), l < s && (l = s),
|
|
1889
|
-
currentZoom:
|
|
1915
|
+
const { minZoom: s, maxZoom: a } = this, { canvas: o } = this.editor, n = o.getZoom(), i = o.getCenterPoint(), c = (g = t.pointX) != null ? g : i.x, d = (u = t.pointY) != null ? u : i.y, h = new G(c, d);
|
|
1916
|
+
let l = Number((n + Number(e)).toFixed(2));
|
|
1917
|
+
l > a && (l = a), l < s && (l = s), o.zoomToPoint(h, l), o.fire("editor:zoom-changed", {
|
|
1918
|
+
currentZoom: o.getZoom(),
|
|
1890
1919
|
zoom: l,
|
|
1891
1920
|
point: h
|
|
1892
1921
|
});
|
|
@@ -1897,12 +1926,12 @@ class lt {
|
|
|
1897
1926
|
* @fires editor:zoom-changed
|
|
1898
1927
|
*/
|
|
1899
1928
|
setZoom(e = this.defaultZoom) {
|
|
1900
|
-
const { minZoom: t, maxZoom: s } = this, { canvas: a } = this.editor,
|
|
1901
|
-
let
|
|
1902
|
-
e > s && (
|
|
1929
|
+
const { minZoom: t, maxZoom: s } = this, { canvas: a } = this.editor, o = new G(a.getCenterPoint());
|
|
1930
|
+
let n = e;
|
|
1931
|
+
e > s && (n = s), e < t && (n = t), a.zoomToPoint(o, n), a.fire("editor:zoom-changed", {
|
|
1903
1932
|
currentZoom: a.getZoom(),
|
|
1904
|
-
zoom:
|
|
1905
|
-
point:
|
|
1933
|
+
zoom: n,
|
|
1934
|
+
point: o
|
|
1906
1935
|
});
|
|
1907
1936
|
}
|
|
1908
1937
|
/**
|
|
@@ -1924,13 +1953,13 @@ class lt {
|
|
|
1924
1953
|
* @fires editor:object-rotated
|
|
1925
1954
|
*/
|
|
1926
1955
|
rotate(e = it, { withoutSave: t } = {}) {
|
|
1927
|
-
const { canvas: s, historyManager: a } = this.editor,
|
|
1928
|
-
if (!
|
|
1929
|
-
const
|
|
1930
|
-
|
|
1931
|
-
object:
|
|
1956
|
+
const { canvas: s, historyManager: a } = this.editor, o = s.getActiveObject();
|
|
1957
|
+
if (!o) return;
|
|
1958
|
+
const n = o.angle + e;
|
|
1959
|
+
o.rotate(n), o.setCoords(), s.renderAll(), t || a.saveState(), s.fire("editor:object-rotated", {
|
|
1960
|
+
object: o,
|
|
1932
1961
|
withoutSave: t,
|
|
1933
|
-
angle:
|
|
1962
|
+
angle: n
|
|
1934
1963
|
});
|
|
1935
1964
|
}
|
|
1936
1965
|
/**
|
|
@@ -1972,11 +2001,11 @@ class lt {
|
|
|
1972
2001
|
opacity: t = 1,
|
|
1973
2002
|
withoutSave: s
|
|
1974
2003
|
} = {}) {
|
|
1975
|
-
const { canvas: a, historyManager:
|
|
1976
|
-
|
|
2004
|
+
const { canvas: a, historyManager: o } = this.editor, n = e || a.getActiveObject();
|
|
2005
|
+
n && (n instanceof v ? n.getObjects().forEach((i) => {
|
|
1977
2006
|
i.set("opacity", t);
|
|
1978
|
-
}) :
|
|
1979
|
-
object:
|
|
2007
|
+
}) : n.set("opacity", t), a.renderAll(), s || o.saveState(), a.fire("editor:object-opacity-changed", {
|
|
2008
|
+
object: n,
|
|
1980
2009
|
opacity: t,
|
|
1981
2010
|
withoutSave: s
|
|
1982
2011
|
}));
|
|
@@ -1998,18 +2027,18 @@ class lt {
|
|
|
1998
2027
|
withoutSave: s,
|
|
1999
2028
|
fitAsOneObject: a
|
|
2000
2029
|
} = {}) {
|
|
2001
|
-
const { canvas:
|
|
2030
|
+
const { canvas: o, historyManager: n } = this.editor, i = e || o.getActiveObject();
|
|
2002
2031
|
if (i) {
|
|
2003
2032
|
if (i instanceof v && !a) {
|
|
2004
2033
|
const c = i.getObjects();
|
|
2005
|
-
|
|
2034
|
+
o.discardActiveObject(), c.forEach((h) => {
|
|
2006
2035
|
this._fitSingleObject(h, t);
|
|
2007
2036
|
});
|
|
2008
|
-
const d = new v(c, { canvas:
|
|
2009
|
-
|
|
2037
|
+
const d = new v(c, { canvas: o });
|
|
2038
|
+
o.setActiveObject(d);
|
|
2010
2039
|
} else
|
|
2011
2040
|
this._fitSingleObject(i, t);
|
|
2012
|
-
|
|
2041
|
+
o.renderAll(), s || n.saveState(), o.fire("editor:object-fitted", {
|
|
2013
2042
|
object: i,
|
|
2014
2043
|
type: t,
|
|
2015
2044
|
withoutSave: s,
|
|
@@ -2024,9 +2053,9 @@ class lt {
|
|
|
2024
2053
|
* @private
|
|
2025
2054
|
*/
|
|
2026
2055
|
_fitSingleObject(e, t) {
|
|
2027
|
-
const { canvas: s, montageArea: a } = this.editor, { width:
|
|
2056
|
+
const { canvas: s, montageArea: a } = this.editor, { width: o, height: n, scaleX: i = 1, scaleY: c = 1, angle: d = 0 } = e, h = o * Math.abs(i), l = n * Math.abs(c), g = d * Math.PI / 180, u = Math.abs(Math.cos(g)), M = Math.abs(Math.sin(g)), m = h * u + l * M, f = h * M + l * u, j = a.width, b = a.height;
|
|
2028
2057
|
let S;
|
|
2029
|
-
t === "contain" ? S = Math.min(j / m, b /
|
|
2058
|
+
t === "contain" ? S = Math.min(j / m, b / f) : S = Math.max(j / m, b / f), e.set({
|
|
2030
2059
|
scaleX: i * S,
|
|
2031
2060
|
scaleY: c * S
|
|
2032
2061
|
}), s.centerObject(e);
|
|
@@ -2050,8 +2079,8 @@ class lt {
|
|
|
2050
2079
|
resetObject({ object: e, alwaysFitObject: t = !1, withoutSave: s = !1 } = {}) {
|
|
2051
2080
|
const {
|
|
2052
2081
|
canvas: a,
|
|
2053
|
-
montageArea:
|
|
2054
|
-
imageManager:
|
|
2082
|
+
montageArea: o,
|
|
2083
|
+
imageManager: n,
|
|
2055
2084
|
historyManager: i,
|
|
2056
2085
|
options: { scaleType: c }
|
|
2057
2086
|
} = this.editor, d = e || a.getActiveObject();
|
|
@@ -2065,11 +2094,11 @@ class lt {
|
|
|
2065
2094
|
}), t)
|
|
2066
2095
|
this.fitObject({ object: d, withoutSave: !0, fitAsOneObject: !0 });
|
|
2067
2096
|
else {
|
|
2068
|
-
const { width: l, height: g } =
|
|
2097
|
+
const { width: l, height: g } = o, { width: u, height: M } = d, m = n.calculateScaleFactor({
|
|
2069
2098
|
imageObject: d,
|
|
2070
2099
|
scaleType: c
|
|
2071
2100
|
});
|
|
2072
|
-
c === "contain" && m < 1 || c === "cover" && (u > l ||
|
|
2101
|
+
c === "contain" && m < 1 || c === "cover" && (u > l || M > g) ? this.fitObject({ object: d, withoutSave: !0, fitAsOneObject: !0 }) : d.set({ scaleX: 1, scaleY: 1 });
|
|
2073
2102
|
}
|
|
2074
2103
|
d.set({ flipX: !1, flipY: !1, angle: 0 }), a.centerObject(d), a.renderAll(), i.resumeHistory(), s || i.saveState(), a.fire("editor:object-reset", {
|
|
2075
2104
|
object: d,
|
|
@@ -2108,8 +2137,8 @@ class ht {
|
|
|
2108
2137
|
const { canvas: e, montageArea: t, historyManager: s } = this.editor;
|
|
2109
2138
|
if (!t || !this.overlayMask) return;
|
|
2110
2139
|
s.suspendHistory(), t.setCoords();
|
|
2111
|
-
const { left: a, top:
|
|
2112
|
-
this.overlayMask.set({ left: a, top:
|
|
2140
|
+
const { left: a, top: o, width: n, height: i } = t.getBoundingRect();
|
|
2141
|
+
this.overlayMask.set({ left: a, top: o, width: n, height: i }), e.discardActiveObject(), this.editor.layerManager.bringToFront(this.overlayMask, { withoutSave: !0 }), s.resumeHistory();
|
|
2113
2142
|
}
|
|
2114
2143
|
/**
|
|
2115
2144
|
* Выключает редактор:
|
|
@@ -2135,7 +2164,7 @@ class ht {
|
|
|
2135
2164
|
}), e.upperCanvasEl.style.pointerEvents = "", e.lowerCanvasEl.style.pointerEvents = "", this.overlayMask.visible = !1, e.requestRenderAll(), e.fire("editor:enabled"), s.resumeHistory();
|
|
2136
2165
|
}
|
|
2137
2166
|
}
|
|
2138
|
-
class
|
|
2167
|
+
class x {
|
|
2139
2168
|
constructor({ editor: e }) {
|
|
2140
2169
|
this.editor = e, this.backgroundObject = null;
|
|
2141
2170
|
}
|
|
@@ -2147,26 +2176,31 @@ class _ {
|
|
|
2147
2176
|
*/
|
|
2148
2177
|
setColorBackground({
|
|
2149
2178
|
color: e,
|
|
2150
|
-
|
|
2179
|
+
customData: t = {},
|
|
2180
|
+
withoutSave: s = !1
|
|
2151
2181
|
}) {
|
|
2182
|
+
var a;
|
|
2152
2183
|
try {
|
|
2153
|
-
const { historyManager:
|
|
2154
|
-
if (
|
|
2155
|
-
if (
|
|
2156
|
-
|
|
2184
|
+
const { historyManager: o } = this.editor, { backgroundObject: n } = this;
|
|
2185
|
+
if (o.suspendHistory(), n && n.backgroundType === "color") {
|
|
2186
|
+
if (n.fill === e) {
|
|
2187
|
+
o.resumeHistory();
|
|
2157
2188
|
return;
|
|
2158
2189
|
}
|
|
2159
|
-
|
|
2190
|
+
n.set({
|
|
2191
|
+
fill: e,
|
|
2192
|
+
backgroundId: `background-${A()}`
|
|
2193
|
+
}), this.editor.canvas.requestRenderAll();
|
|
2160
2194
|
} else
|
|
2161
2195
|
this._removeCurrentBackground(), this._createColorBackground(e);
|
|
2162
|
-
this.editor.canvas.fire("editor:background:changed", { type: "color", color: e }),
|
|
2163
|
-
} catch (
|
|
2196
|
+
(a = this.backgroundObject) == null || a.set({ customData: t }), this.editor.canvas.fire("editor:background:changed", { type: "color", color: e }), o.resumeHistory(), s || o.saveState();
|
|
2197
|
+
} catch (o) {
|
|
2164
2198
|
this.editor.errorManager.emitError({
|
|
2165
2199
|
code: "BACKGROUND_CREATION_FAILED",
|
|
2166
2200
|
origin: "BackgroundManager",
|
|
2167
2201
|
method: "setColorBackground",
|
|
2168
2202
|
message: "Не удалось установить цветовой фон",
|
|
2169
|
-
data: { error:
|
|
2203
|
+
data: { error: o }
|
|
2170
2204
|
});
|
|
2171
2205
|
}
|
|
2172
2206
|
}
|
|
@@ -2178,30 +2212,35 @@ class _ {
|
|
|
2178
2212
|
*/
|
|
2179
2213
|
setGradientBackground({
|
|
2180
2214
|
gradient: e,
|
|
2181
|
-
|
|
2215
|
+
customData: t = {},
|
|
2216
|
+
withoutSave: s = !1
|
|
2182
2217
|
}) {
|
|
2218
|
+
var a;
|
|
2183
2219
|
try {
|
|
2184
|
-
const { historyManager:
|
|
2185
|
-
if (
|
|
2186
|
-
const
|
|
2187
|
-
if (
|
|
2188
|
-
|
|
2220
|
+
const { historyManager: o } = this.editor, { backgroundObject: n } = this;
|
|
2221
|
+
if (o.suspendHistory(), n && n.backgroundType === "gradient") {
|
|
2222
|
+
const i = x._createFabricGradient(e);
|
|
2223
|
+
if (x._isGradientEqual(n.fill, i)) {
|
|
2224
|
+
o.resumeHistory();
|
|
2189
2225
|
return;
|
|
2190
2226
|
}
|
|
2191
|
-
|
|
2227
|
+
n.set({
|
|
2228
|
+
fill: i,
|
|
2229
|
+
backgroundId: `background-${A()}`
|
|
2230
|
+
}), this.editor.canvas.requestRenderAll();
|
|
2192
2231
|
} else
|
|
2193
2232
|
this._removeCurrentBackground(), this._createGradientBackground(e);
|
|
2194
|
-
this.editor.canvas.fire("editor:background:changed", {
|
|
2233
|
+
(a = this.backgroundObject) == null || a.set({ customData: t }), this.editor.canvas.fire("editor:background:changed", {
|
|
2195
2234
|
type: "gradient",
|
|
2196
2235
|
gradientParams: e
|
|
2197
|
-
}),
|
|
2198
|
-
} catch (
|
|
2236
|
+
}), o.resumeHistory(), s || o.saveState();
|
|
2237
|
+
} catch (o) {
|
|
2199
2238
|
this.editor.errorManager.emitError({
|
|
2200
2239
|
code: "BACKGROUND_CREATION_FAILED",
|
|
2201
2240
|
origin: "BackgroundManager",
|
|
2202
2241
|
method: "setGradientBackground",
|
|
2203
2242
|
message: "Не удалось установить градиентный фон",
|
|
2204
|
-
data: { error:
|
|
2243
|
+
data: { error: o }
|
|
2205
2244
|
});
|
|
2206
2245
|
}
|
|
2207
2246
|
}
|
|
@@ -2214,8 +2253,9 @@ class _ {
|
|
|
2214
2253
|
startColor: t,
|
|
2215
2254
|
endColor: s,
|
|
2216
2255
|
startPosition: a,
|
|
2217
|
-
endPosition:
|
|
2218
|
-
|
|
2256
|
+
endPosition: o,
|
|
2257
|
+
customData: n = {},
|
|
2258
|
+
withoutSave: i = !1
|
|
2219
2259
|
}) {
|
|
2220
2260
|
this.setGradientBackground({
|
|
2221
2261
|
gradient: {
|
|
@@ -2224,9 +2264,10 @@ class _ {
|
|
|
2224
2264
|
startColor: t,
|
|
2225
2265
|
endColor: s,
|
|
2226
2266
|
startPosition: a,
|
|
2227
|
-
endPosition:
|
|
2267
|
+
endPosition: o
|
|
2228
2268
|
},
|
|
2229
|
-
|
|
2269
|
+
customData: n,
|
|
2270
|
+
withoutSave: i
|
|
2230
2271
|
});
|
|
2231
2272
|
}
|
|
2232
2273
|
/**
|
|
@@ -2238,10 +2279,11 @@ class _ {
|
|
|
2238
2279
|
centerY: t,
|
|
2239
2280
|
radius: s,
|
|
2240
2281
|
startColor: a,
|
|
2241
|
-
endColor:
|
|
2242
|
-
startPosition:
|
|
2282
|
+
endColor: o,
|
|
2283
|
+
startPosition: n,
|
|
2243
2284
|
endPosition: i,
|
|
2244
|
-
|
|
2285
|
+
customData: c = {},
|
|
2286
|
+
withoutSave: d = !1
|
|
2245
2287
|
}) {
|
|
2246
2288
|
this.setGradientBackground({
|
|
2247
2289
|
gradient: {
|
|
@@ -2250,11 +2292,12 @@ class _ {
|
|
|
2250
2292
|
centerY: t,
|
|
2251
2293
|
radius: s,
|
|
2252
2294
|
startColor: a,
|
|
2253
|
-
endColor:
|
|
2254
|
-
startPosition:
|
|
2295
|
+
endColor: o,
|
|
2296
|
+
startPosition: n,
|
|
2255
2297
|
endPosition: i
|
|
2256
2298
|
},
|
|
2257
|
-
|
|
2299
|
+
customData: c,
|
|
2300
|
+
withoutSave: d
|
|
2258
2301
|
});
|
|
2259
2302
|
}
|
|
2260
2303
|
/**
|
|
@@ -2263,25 +2306,26 @@ class _ {
|
|
|
2263
2306
|
* @param options.imageUrl - URL изображения
|
|
2264
2307
|
* @param options.withoutSave - Если true, не сохранять состояние в историю
|
|
2265
2308
|
*/
|
|
2266
|
-
setImageBackground(
|
|
2309
|
+
setImageBackground(a) {
|
|
2267
2310
|
return y(this, arguments, function* ({
|
|
2268
2311
|
imageSource: e,
|
|
2269
|
-
|
|
2312
|
+
customData: t = {},
|
|
2313
|
+
withoutSave: s = !1
|
|
2270
2314
|
}) {
|
|
2271
2315
|
try {
|
|
2272
|
-
const { historyManager:
|
|
2273
|
-
|
|
2316
|
+
const { historyManager: o } = this.editor;
|
|
2317
|
+
o.suspendHistory(), yield this._createImageBackground(e, t), this.editor.canvas.fire("editor:background:changed", {
|
|
2274
2318
|
type: "image",
|
|
2275
2319
|
imageSource: e,
|
|
2276
2320
|
backgroundObject: this.backgroundObject
|
|
2277
|
-
}),
|
|
2278
|
-
} catch (
|
|
2321
|
+
}), o.resumeHistory(), s || o.saveState();
|
|
2322
|
+
} catch (o) {
|
|
2279
2323
|
this.editor.errorManager.emitError({
|
|
2280
2324
|
code: "BACKGROUND_CREATION_FAILED",
|
|
2281
2325
|
origin: "BackgroundManager",
|
|
2282
2326
|
method: "setImageBackground",
|
|
2283
2327
|
message: "Не удалось установить изображение в качестве фона",
|
|
2284
|
-
data: { error:
|
|
2328
|
+
data: { error: o }
|
|
2285
2329
|
});
|
|
2286
2330
|
}
|
|
2287
2331
|
});
|
|
@@ -2313,8 +2357,8 @@ class _ {
|
|
|
2313
2357
|
const { canvas: e, montageArea: t, historyManager: s } = this.editor;
|
|
2314
2358
|
if (!t || !this.backgroundObject) return;
|
|
2315
2359
|
s.suspendHistory(), this.editor.transformManager.fitObject({ object: this.backgroundObject, withoutSave: !0, type: "cover" });
|
|
2316
|
-
const a = e.getObjects(),
|
|
2317
|
-
this.backgroundObject &&
|
|
2360
|
+
const a = e.getObjects(), o = a.indexOf(t), n = a.indexOf(this.backgroundObject);
|
|
2361
|
+
this.backgroundObject && n !== o + 1 && e.moveObjectTo(this.backgroundObject, o + 1), e.requestRenderAll(), s.resumeHistory();
|
|
2318
2362
|
}
|
|
2319
2363
|
/**
|
|
2320
2364
|
* Создает цветовой фон.
|
|
@@ -2348,34 +2392,35 @@ class _ {
|
|
|
2348
2392
|
backgroundType: "gradient",
|
|
2349
2393
|
backgroundId: `background-${A()}`
|
|
2350
2394
|
}, { withoutSelection: !0 }), this.refresh();
|
|
2351
|
-
const t =
|
|
2395
|
+
const t = x._createFabricGradient(e);
|
|
2352
2396
|
this.backgroundObject.set("fill", t), this.editor.canvas.requestRenderAll();
|
|
2353
2397
|
}
|
|
2354
2398
|
/**
|
|
2355
2399
|
* Создает фон из изображения.
|
|
2356
2400
|
* @param source - источник изображения (URL или File)
|
|
2357
2401
|
*/
|
|
2358
|
-
_createImageBackground(e) {
|
|
2402
|
+
_createImageBackground(e, t) {
|
|
2359
2403
|
return y(this, null, function* () {
|
|
2360
|
-
var
|
|
2361
|
-
const { image:
|
|
2404
|
+
var a;
|
|
2405
|
+
const { image: s } = (a = yield this.editor.imageManager.importImage({
|
|
2362
2406
|
source: e,
|
|
2363
2407
|
withoutSave: !0,
|
|
2364
2408
|
isBackground: !0,
|
|
2365
2409
|
withoutSelection: !0,
|
|
2366
2410
|
scale: "image-cover"
|
|
2367
|
-
})) != null ?
|
|
2368
|
-
if (!
|
|
2411
|
+
})) != null ? a : {};
|
|
2412
|
+
if (!s)
|
|
2369
2413
|
throw new Error("Не удалось загрузить изображение");
|
|
2370
|
-
|
|
2414
|
+
s.set({
|
|
2371
2415
|
selectable: !1,
|
|
2372
2416
|
evented: !1,
|
|
2373
2417
|
hasBorders: !1,
|
|
2374
2418
|
hasControls: !1,
|
|
2375
2419
|
id: "background",
|
|
2376
2420
|
backgroundType: "image",
|
|
2377
|
-
backgroundId: `background-${A()}
|
|
2378
|
-
|
|
2421
|
+
backgroundId: `background-${A()}`,
|
|
2422
|
+
customData: t
|
|
2423
|
+
}), this._removeCurrentBackground(), this.backgroundObject = s, this.refresh();
|
|
2379
2424
|
});
|
|
2380
2425
|
}
|
|
2381
2426
|
/**
|
|
@@ -2393,18 +2438,18 @@ class _ {
|
|
|
2393
2438
|
startColor: t,
|
|
2394
2439
|
endColor: s,
|
|
2395
2440
|
startPosition: a = 0,
|
|
2396
|
-
endPosition:
|
|
2397
|
-
} = e,
|
|
2441
|
+
endPosition: o = 100
|
|
2442
|
+
} = e, n = [
|
|
2398
2443
|
{ offset: a / 100, color: t },
|
|
2399
|
-
{ offset:
|
|
2444
|
+
{ offset: o / 100, color: s }
|
|
2400
2445
|
];
|
|
2401
2446
|
if (e.type === "linear") {
|
|
2402
|
-
const l = e.angle * Math.PI / 180, g =
|
|
2447
|
+
const l = e.angle * Math.PI / 180, g = x._angleToCoords(l);
|
|
2403
2448
|
return new Me({
|
|
2404
2449
|
type: "linear",
|
|
2405
2450
|
gradientUnits: "percentage",
|
|
2406
2451
|
coords: g,
|
|
2407
|
-
colorStops:
|
|
2452
|
+
colorStops: n
|
|
2408
2453
|
});
|
|
2409
2454
|
}
|
|
2410
2455
|
const {
|
|
@@ -2423,7 +2468,7 @@ class _ {
|
|
|
2423
2468
|
type: "radial",
|
|
2424
2469
|
gradientUnits: "percentage",
|
|
2425
2470
|
coords: h,
|
|
2426
|
-
colorStops:
|
|
2471
|
+
colorStops: n
|
|
2427
2472
|
});
|
|
2428
2473
|
}
|
|
2429
2474
|
/**
|
|
@@ -2448,13 +2493,13 @@ class _ {
|
|
|
2448
2493
|
static _isGradientEqual(e, t) {
|
|
2449
2494
|
if (!e || !t || e.type !== t.type) return !1;
|
|
2450
2495
|
const s = e.colorStops || [], a = t.colorStops || [];
|
|
2451
|
-
return s.length !== a.length || !s.every((
|
|
2496
|
+
return s.length !== a.length || !s.every((n, i) => {
|
|
2452
2497
|
const c = a[i];
|
|
2453
|
-
return
|
|
2498
|
+
return n.color === c.color && Math.abs(n.offset - c.offset) < 1e-4;
|
|
2454
2499
|
}) ? !1 : e.type === "linear" && t.type === "linear" ? Math.abs(e.coords.x1 - t.coords.x1) < 1e-4 && Math.abs(e.coords.y1 - t.coords.y1) < 1e-4 && Math.abs(e.coords.x2 - t.coords.x2) < 1e-4 && Math.abs(e.coords.y2 - t.coords.y2) < 1e-4 : e.type === "radial" && t.type === "radial" ? Math.abs(e.coords.x1 - t.coords.x1) < 1e-4 && Math.abs(e.coords.y1 - t.coords.y1) < 1e-4 && Math.abs(e.coords.x2 - t.coords.x2) < 1e-4 && Math.abs(e.coords.y2 - t.coords.y2) < 1e-4 && Math.abs(e.coords.r1 - t.coords.r1) < 1e-4 && Math.abs(e.coords.r2 - t.coords.r2) < 1e-4 : !1;
|
|
2455
2500
|
}
|
|
2456
2501
|
}
|
|
2457
|
-
class
|
|
2502
|
+
class K {
|
|
2458
2503
|
constructor({ editor: e }) {
|
|
2459
2504
|
this.editor = e;
|
|
2460
2505
|
}
|
|
@@ -2468,11 +2513,11 @@ class Q {
|
|
|
2468
2513
|
bringToFront(e, { withoutSave: t } = {}) {
|
|
2469
2514
|
const { canvas: s, historyManager: a } = this.editor;
|
|
2470
2515
|
a.suspendHistory();
|
|
2471
|
-
const
|
|
2472
|
-
|
|
2473
|
-
s.bringObjectToFront(
|
|
2474
|
-
}) : s.bringObjectToFront(
|
|
2475
|
-
object:
|
|
2516
|
+
const o = e || s.getActiveObject();
|
|
2517
|
+
o && (o instanceof v ? o.getObjects().forEach((n) => {
|
|
2518
|
+
s.bringObjectToFront(n);
|
|
2519
|
+
}) : s.bringObjectToFront(o), s.renderAll(), a.resumeHistory(), t || a.saveState(), s.fire("editor:object-bring-to-front", {
|
|
2520
|
+
object: o,
|
|
2476
2521
|
withoutSave: t
|
|
2477
2522
|
}));
|
|
2478
2523
|
}
|
|
@@ -2486,9 +2531,9 @@ class Q {
|
|
|
2486
2531
|
bringForward(e, { withoutSave: t } = {}) {
|
|
2487
2532
|
const { canvas: s, historyManager: a } = this.editor;
|
|
2488
2533
|
a.suspendHistory();
|
|
2489
|
-
const
|
|
2490
|
-
|
|
2491
|
-
object:
|
|
2534
|
+
const o = e || s.getActiveObject();
|
|
2535
|
+
o && (o instanceof v ? K._moveSelectionForward(s, o) : s.bringObjectForward(o), s.renderAll(), a.resumeHistory(), t || a.saveState(), s.fire("editor:object-bring-forward", {
|
|
2536
|
+
object: o,
|
|
2492
2537
|
withoutSave: t
|
|
2493
2538
|
}));
|
|
2494
2539
|
}
|
|
@@ -2503,11 +2548,11 @@ class Q {
|
|
|
2503
2548
|
const {
|
|
2504
2549
|
canvas: s,
|
|
2505
2550
|
montageArea: a,
|
|
2506
|
-
historyManager:
|
|
2507
|
-
interactionBlocker: { overlayMask:
|
|
2551
|
+
historyManager: o,
|
|
2552
|
+
interactionBlocker: { overlayMask: n },
|
|
2508
2553
|
backgroundManager: { backgroundObject: i }
|
|
2509
2554
|
} = this.editor;
|
|
2510
|
-
|
|
2555
|
+
o.suspendHistory();
|
|
2511
2556
|
const c = e || s.getActiveObject();
|
|
2512
2557
|
if (c) {
|
|
2513
2558
|
if (c instanceof v) {
|
|
@@ -2516,7 +2561,7 @@ class Q {
|
|
|
2516
2561
|
s.sendObjectToBack(d[h]);
|
|
2517
2562
|
} else
|
|
2518
2563
|
s.sendObjectToBack(c);
|
|
2519
|
-
i && s.sendObjectToBack(i), s.sendObjectToBack(a),
|
|
2564
|
+
i && s.sendObjectToBack(i), s.sendObjectToBack(a), n && s.sendObjectToBack(n), s.renderAll(), o.resumeHistory(), t || o.saveState(), s.fire("editor:object-send-to-back", {
|
|
2520
2565
|
object: c,
|
|
2521
2566
|
withoutSave: t
|
|
2522
2567
|
});
|
|
@@ -2532,13 +2577,13 @@ class Q {
|
|
|
2532
2577
|
const {
|
|
2533
2578
|
canvas: s,
|
|
2534
2579
|
montageArea: a,
|
|
2535
|
-
historyManager:
|
|
2536
|
-
interactionBlocker: { overlayMask:
|
|
2580
|
+
historyManager: o,
|
|
2581
|
+
interactionBlocker: { overlayMask: n },
|
|
2537
2582
|
backgroundManager: { backgroundObject: i }
|
|
2538
2583
|
} = this.editor;
|
|
2539
|
-
|
|
2584
|
+
o.suspendHistory();
|
|
2540
2585
|
const c = e || s.getActiveObject();
|
|
2541
|
-
c && (c instanceof v ?
|
|
2586
|
+
c && (c instanceof v ? K._moveSelectionBackwards(s, c) : s.sendObjectBackwards(c), i && s.sendObjectToBack(i), s.sendObjectToBack(a), n && s.sendObjectToBack(n), s.renderAll(), o.resumeHistory(), t || o.saveState(), s.fire("editor:object-send-backwards", {
|
|
2542
2587
|
object: c,
|
|
2543
2588
|
withoutSave: t
|
|
2544
2589
|
}));
|
|
@@ -2612,8 +2657,8 @@ class gt {
|
|
|
2612
2657
|
left: t,
|
|
2613
2658
|
top: s,
|
|
2614
2659
|
width: a = 100,
|
|
2615
|
-
height:
|
|
2616
|
-
fill:
|
|
2660
|
+
height: o = 100,
|
|
2661
|
+
fill: n = "blue"
|
|
2617
2662
|
} = l, i = F(l, [
|
|
2618
2663
|
"id",
|
|
2619
2664
|
"left",
|
|
@@ -2622,13 +2667,13 @@ class gt {
|
|
|
2622
2667
|
"height",
|
|
2623
2668
|
"fill"
|
|
2624
2669
|
]);
|
|
2625
|
-
const { canvas: g } = this.editor, u = new
|
|
2670
|
+
const { canvas: g } = this.editor, u = new Oe(I({
|
|
2626
2671
|
id: e,
|
|
2627
2672
|
left: t,
|
|
2628
2673
|
top: s,
|
|
2629
2674
|
width: a,
|
|
2630
|
-
height:
|
|
2631
|
-
fill:
|
|
2675
|
+
height: o,
|
|
2676
|
+
fill: n
|
|
2632
2677
|
}, i));
|
|
2633
2678
|
return !t && !s && g.centerObject(u), d || (g.add(u), c || g.setActiveObject(u), g.renderAll()), u;
|
|
2634
2679
|
}
|
|
@@ -2654,21 +2699,21 @@ class gt {
|
|
|
2654
2699
|
left: t,
|
|
2655
2700
|
top: s,
|
|
2656
2701
|
radius: a = 50,
|
|
2657
|
-
fill:
|
|
2658
|
-
} = h,
|
|
2702
|
+
fill: o = "green"
|
|
2703
|
+
} = h, n = F(h, [
|
|
2659
2704
|
"id",
|
|
2660
2705
|
"left",
|
|
2661
2706
|
"top",
|
|
2662
2707
|
"radius",
|
|
2663
2708
|
"fill"
|
|
2664
2709
|
]);
|
|
2665
|
-
const { canvas: l } = this.editor, g = new
|
|
2710
|
+
const { canvas: l } = this.editor, g = new Le(I({
|
|
2666
2711
|
id: e,
|
|
2667
2712
|
left: t,
|
|
2668
2713
|
top: s,
|
|
2669
|
-
fill:
|
|
2714
|
+
fill: o,
|
|
2670
2715
|
radius: a
|
|
2671
|
-
},
|
|
2716
|
+
}, n));
|
|
2672
2717
|
return !t && !s && l.centerObject(g), c || (l.add(g), i || l.setActiveObject(g), l.renderAll()), g;
|
|
2673
2718
|
}
|
|
2674
2719
|
/**
|
|
@@ -2694,8 +2739,8 @@ class gt {
|
|
|
2694
2739
|
left: t,
|
|
2695
2740
|
top: s,
|
|
2696
2741
|
width: a = 100,
|
|
2697
|
-
height:
|
|
2698
|
-
fill:
|
|
2742
|
+
height: o = 100,
|
|
2743
|
+
fill: n = "yellow"
|
|
2699
2744
|
} = l, i = F(l, [
|
|
2700
2745
|
"id",
|
|
2701
2746
|
"left",
|
|
@@ -2704,13 +2749,13 @@ class gt {
|
|
|
2704
2749
|
"height",
|
|
2705
2750
|
"fill"
|
|
2706
2751
|
]);
|
|
2707
|
-
const { canvas: g } = this.editor, u = new
|
|
2752
|
+
const { canvas: g } = this.editor, u = new we(I({
|
|
2708
2753
|
id: e,
|
|
2709
2754
|
left: t,
|
|
2710
2755
|
top: s,
|
|
2711
|
-
fill:
|
|
2756
|
+
fill: n,
|
|
2712
2757
|
width: a,
|
|
2713
|
-
height:
|
|
2758
|
+
height: o
|
|
2714
2759
|
}, i));
|
|
2715
2760
|
return !t && !s && g.centerObject(u), d || (g.add(u), c || g.setActiveObject(u), g.renderAll()), u;
|
|
2716
2761
|
}
|
|
@@ -2792,10 +2837,10 @@ class ut {
|
|
|
2792
2837
|
_copyImageToClipboard(e, t) {
|
|
2793
2838
|
return y(this, null, function* () {
|
|
2794
2839
|
try {
|
|
2795
|
-
const a = e.toCanvasElement({ enableRetinaScaling: !1 }).toDataURL(),
|
|
2840
|
+
const a = e.toCanvasElement({ enableRetinaScaling: !1 }).toDataURL(), o = a.slice(5).split(";")[0], n = a.split(",")[1], i = atob(n), c = new Uint8Array(i.length);
|
|
2796
2841
|
for (let l = 0; l < i.length; l += 1)
|
|
2797
2842
|
c[l] = i.charCodeAt(l);
|
|
2798
|
-
const d = new Blob([c.buffer], { type:
|
|
2843
|
+
const d = new Blob([c.buffer], { type: o }), h = new ClipboardItem({ [o]: d });
|
|
2799
2844
|
return yield navigator.clipboard.write([h]), console.info("Image copied to clipboard successfully"), !0;
|
|
2800
2845
|
} catch (s) {
|
|
2801
2846
|
return this.editor.errorManager.emitWarning({
|
|
@@ -2814,7 +2859,7 @@ class ut {
|
|
|
2814
2859
|
_copyTextToClipboard(e) {
|
|
2815
2860
|
return y(this, null, function* () {
|
|
2816
2861
|
try {
|
|
2817
|
-
const t = `${
|
|
2862
|
+
const t = `${je}${e}`;
|
|
2818
2863
|
return yield navigator.clipboard.writeText(t), console.info("Text copied to clipboard successfully"), !0;
|
|
2819
2864
|
} catch (t) {
|
|
2820
2865
|
const { errorManager: s } = this.editor;
|
|
@@ -2875,8 +2920,8 @@ class ut {
|
|
|
2875
2920
|
evented: !0
|
|
2876
2921
|
}), this._addClonedObjectToCanvas(a), t.fire("editor:object-duplicated", { object: a }), !0;
|
|
2877
2922
|
} catch (a) {
|
|
2878
|
-
const { errorManager:
|
|
2879
|
-
return
|
|
2923
|
+
const { errorManager: o } = this.editor;
|
|
2924
|
+
return o.emitError({
|
|
2880
2925
|
origin: "ClipboardManager",
|
|
2881
2926
|
method: "copyPaste",
|
|
2882
2927
|
code: "COPY_PASTE_FAILED",
|
|
@@ -2900,12 +2945,12 @@ class ut {
|
|
|
2900
2945
|
return;
|
|
2901
2946
|
}
|
|
2902
2947
|
const s = e.getData("text/plain");
|
|
2903
|
-
if (s && s.startsWith(
|
|
2948
|
+
if (s && s.startsWith(je)) {
|
|
2904
2949
|
this.paste();
|
|
2905
2950
|
return;
|
|
2906
2951
|
}
|
|
2907
|
-
const { items: a } = e,
|
|
2908
|
-
if (
|
|
2952
|
+
const { items: a } = e, o = a[a.length - 1], n = o.getAsFile();
|
|
2953
|
+
if (o.type !== "text/html" && n) {
|
|
2909
2954
|
const d = new FileReader();
|
|
2910
2955
|
d.onload = (h) => {
|
|
2911
2956
|
h.target && this._handleImageImport(h.target.result).catch((l) => {
|
|
@@ -2917,7 +2962,7 @@ class ut {
|
|
|
2917
2962
|
data: l
|
|
2918
2963
|
});
|
|
2919
2964
|
});
|
|
2920
|
-
}, d.readAsDataURL(
|
|
2965
|
+
}, d.readAsDataURL(n);
|
|
2921
2966
|
return;
|
|
2922
2967
|
}
|
|
2923
2968
|
const i = e.getData("text/html");
|
|
@@ -2968,7 +3013,7 @@ class ut {
|
|
|
2968
3013
|
});
|
|
2969
3014
|
}
|
|
2970
3015
|
}
|
|
2971
|
-
class
|
|
3016
|
+
class $ {
|
|
2972
3017
|
constructor({ editor: e }) {
|
|
2973
3018
|
this.editor = e;
|
|
2974
3019
|
}
|
|
@@ -2981,8 +3026,8 @@ class K {
|
|
|
2981
3026
|
* @fires editor:object-locked
|
|
2982
3027
|
*/
|
|
2983
3028
|
lockObject({ object: e, skipInnerObjects: t, withoutSave: s } = {}) {
|
|
2984
|
-
const { canvas: a, historyManager:
|
|
2985
|
-
if (!
|
|
3029
|
+
const { canvas: a, historyManager: o } = this.editor, n = e || a.getActiveObject();
|
|
3030
|
+
if (!n || n.locked) return;
|
|
2986
3031
|
const i = {
|
|
2987
3032
|
lockMovementX: !0,
|
|
2988
3033
|
lockMovementY: !0,
|
|
@@ -2993,10 +3038,10 @@ class K {
|
|
|
2993
3038
|
lockSkewingY: !0,
|
|
2994
3039
|
locked: !0
|
|
2995
3040
|
};
|
|
2996
|
-
|
|
3041
|
+
n.set(i), !t && $._isGroupOrSelection(n) && n.getObjects().forEach((d) => {
|
|
2997
3042
|
d.set(i);
|
|
2998
|
-
}), a.renderAll(), s ||
|
|
2999
|
-
object:
|
|
3043
|
+
}), a.renderAll(), s || o.saveState(), a.fire("editor:object-locked", {
|
|
3044
|
+
object: n,
|
|
3000
3045
|
skipInnerObjects: t,
|
|
3001
3046
|
withoutSave: s
|
|
3002
3047
|
});
|
|
@@ -3009,9 +3054,9 @@ class K {
|
|
|
3009
3054
|
* @fires editor:object-unlocked
|
|
3010
3055
|
*/
|
|
3011
3056
|
unlockObject({ object: e, withoutSave: t } = {}) {
|
|
3012
|
-
const { canvas: s, historyManager: a } = this.editor,
|
|
3013
|
-
if (!
|
|
3014
|
-
const
|
|
3057
|
+
const { canvas: s, historyManager: a } = this.editor, o = e || s.getActiveObject();
|
|
3058
|
+
if (!o) return;
|
|
3059
|
+
const n = {
|
|
3015
3060
|
lockMovementX: !1,
|
|
3016
3061
|
lockMovementY: !1,
|
|
3017
3062
|
lockRotation: !1,
|
|
@@ -3021,18 +3066,18 @@ class K {
|
|
|
3021
3066
|
lockSkewingY: !1,
|
|
3022
3067
|
locked: !1
|
|
3023
3068
|
};
|
|
3024
|
-
|
|
3025
|
-
i.set(
|
|
3069
|
+
o.set(n), $._isGroupOrSelection(o) && o.getObjects().forEach((i) => {
|
|
3070
|
+
i.set(n);
|
|
3026
3071
|
}), s.renderAll(), t || a.saveState(), s.fire("editor:object-unlocked", {
|
|
3027
|
-
object:
|
|
3072
|
+
object: o,
|
|
3028
3073
|
withoutSave: t
|
|
3029
3074
|
});
|
|
3030
3075
|
}
|
|
3031
3076
|
static _isGroupOrSelection(e) {
|
|
3032
|
-
return e instanceof v || e instanceof
|
|
3077
|
+
return e instanceof v || e instanceof ee;
|
|
3033
3078
|
}
|
|
3034
3079
|
}
|
|
3035
|
-
class
|
|
3080
|
+
class ft {
|
|
3036
3081
|
constructor({ editor: e }) {
|
|
3037
3082
|
this.editor = e;
|
|
3038
3083
|
}
|
|
@@ -3049,11 +3094,11 @@ class Mt {
|
|
|
3049
3094
|
} = {}) {
|
|
3050
3095
|
const { canvas: s, historyManager: a } = this.editor;
|
|
3051
3096
|
a.suspendHistory();
|
|
3052
|
-
const
|
|
3053
|
-
if (!
|
|
3054
|
-
const
|
|
3055
|
-
|
|
3056
|
-
object:
|
|
3097
|
+
const o = e || s.getActiveObject();
|
|
3098
|
+
if (!o || !(o instanceof v)) return;
|
|
3099
|
+
const n = o.getObjects(), i = new ee(n);
|
|
3100
|
+
n.forEach((c) => s.remove(c)), i.set("id", `${i.type}-${A()}`), s.add(i), s.setActiveObject(i), s.renderAll(), a.resumeHistory(), t || a.saveState(), s.fire("editor:objects-grouped", {
|
|
3101
|
+
object: o,
|
|
3057
3102
|
group: i,
|
|
3058
3103
|
withoutSave: t
|
|
3059
3104
|
});
|
|
@@ -3071,21 +3116,21 @@ class Mt {
|
|
|
3071
3116
|
} = {}) {
|
|
3072
3117
|
const { canvas: s, historyManager: a } = this.editor;
|
|
3073
3118
|
a.suspendHistory();
|
|
3074
|
-
const
|
|
3075
|
-
if (!(
|
|
3076
|
-
const
|
|
3077
|
-
s.remove(
|
|
3078
|
-
const i = new v(
|
|
3119
|
+
const o = e || s.getActiveObject();
|
|
3120
|
+
if (!(o instanceof ee)) return;
|
|
3121
|
+
const n = o.removeAll();
|
|
3122
|
+
s.remove(o), n.forEach((c) => s.add(c));
|
|
3123
|
+
const i = new v(n, {
|
|
3079
3124
|
canvas: s
|
|
3080
3125
|
});
|
|
3081
3126
|
s.setActiveObject(i), s.renderAll(), a.resumeHistory(), t || a.saveState(), s.fire("editor:objects-ungrouped", {
|
|
3082
|
-
object:
|
|
3127
|
+
object: o,
|
|
3083
3128
|
selection: i,
|
|
3084
3129
|
withoutSave: t
|
|
3085
3130
|
});
|
|
3086
3131
|
}
|
|
3087
3132
|
}
|
|
3088
|
-
class
|
|
3133
|
+
class Mt {
|
|
3089
3134
|
constructor({ editor: e }) {
|
|
3090
3135
|
this.editor = e;
|
|
3091
3136
|
}
|
|
@@ -3096,8 +3141,8 @@ class ft {
|
|
|
3096
3141
|
selectAll() {
|
|
3097
3142
|
const { canvas: e, canvasManager: t, objectLockManager: s } = this.editor;
|
|
3098
3143
|
e.discardActiveObject();
|
|
3099
|
-
const a = t.getObjects(),
|
|
3100
|
-
|
|
3144
|
+
const a = t.getObjects(), o = a.some((i) => i.locked), n = a.length > 1 ? new v(t.getObjects(), { canvas: e }) : a[0];
|
|
3145
|
+
o && s.lockObject({ object: n, skipInnerObjects: !0, withoutSave: !0 }), e.setActiveObject(n), e.requestRenderAll(), e.fire("editor:all-objects-selected", { selected: n });
|
|
3101
3146
|
}
|
|
3102
3147
|
}
|
|
3103
3148
|
class mt {
|
|
@@ -3115,15 +3160,15 @@ class mt {
|
|
|
3115
3160
|
objects: e,
|
|
3116
3161
|
withoutSave: t
|
|
3117
3162
|
} = {}) {
|
|
3118
|
-
const { canvas: s, historyManager: a, groupingManager:
|
|
3119
|
-
|
|
3163
|
+
const { canvas: s, historyManager: a, groupingManager: o } = this.editor, n = (e || s.getActiveObjects()).filter((i) => !i.locked);
|
|
3164
|
+
n != null && n.length && (a.suspendHistory(), n.forEach((i) => {
|
|
3120
3165
|
if (i.type === "group" && i.format !== "svg") {
|
|
3121
|
-
|
|
3166
|
+
o.ungroup({ object: i, withoutSave: t }), this.deleteSelectedObjects();
|
|
3122
3167
|
return;
|
|
3123
3168
|
}
|
|
3124
3169
|
s.remove(i);
|
|
3125
3170
|
}), s.discardActiveObject(), s.renderAll(), a.resumeHistory(), t || a.saveState(), s.fire("editor:objects-deleted", {
|
|
3126
|
-
objects:
|
|
3171
|
+
objects: n,
|
|
3127
3172
|
withoutSave: t
|
|
3128
3173
|
}));
|
|
3129
3174
|
}
|
|
@@ -3227,7 +3272,7 @@ const bt = {
|
|
|
3227
3272
|
INVALID_GRADIENT_FORMAT: "INVALID_GRADIENT_FORMAT"
|
|
3228
3273
|
}
|
|
3229
3274
|
};
|
|
3230
|
-
class
|
|
3275
|
+
class J {
|
|
3231
3276
|
constructor({ editor: e }) {
|
|
3232
3277
|
this._buffer = [], this.editor = e;
|
|
3233
3278
|
}
|
|
@@ -3253,19 +3298,19 @@ class $ {
|
|
|
3253
3298
|
* @param options.message — текст ошибки (опционально, если не передан, то используется код ошибки)
|
|
3254
3299
|
* @fires editor:error
|
|
3255
3300
|
*/
|
|
3256
|
-
emitError({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, data: a, message:
|
|
3257
|
-
if (
|
|
3301
|
+
emitError({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, data: a, message: o }) {
|
|
3302
|
+
if (!J.isValidErrorCode(s)) {
|
|
3258
3303
|
console.warn("Неизвестный код ошибки: ", { code: s, origin: e, method: t });
|
|
3259
3304
|
return;
|
|
3260
3305
|
}
|
|
3261
3306
|
if (!s) return;
|
|
3262
|
-
const
|
|
3263
|
-
console.error(`${e}. ${t}. ${s}. ${
|
|
3307
|
+
const n = o || s;
|
|
3308
|
+
console.error(`${e}. ${t}. ${s}. ${n}`, a);
|
|
3264
3309
|
const i = {
|
|
3265
3310
|
code: s,
|
|
3266
3311
|
origin: e,
|
|
3267
3312
|
method: t,
|
|
3268
|
-
message:
|
|
3313
|
+
message: n,
|
|
3269
3314
|
data: a
|
|
3270
3315
|
};
|
|
3271
3316
|
this._buffer.push(I({
|
|
@@ -3282,19 +3327,19 @@ class $ {
|
|
|
3282
3327
|
* @param options.message — текст предупреждения (опционально, если не передан, то используется код предупреждения)
|
|
3283
3328
|
* @fires editor:warning
|
|
3284
3329
|
*/
|
|
3285
|
-
emitWarning({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, message: a, data:
|
|
3286
|
-
if (
|
|
3330
|
+
emitWarning({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, message: a, data: o }) {
|
|
3331
|
+
if (!J.isValidErrorCode(s)) {
|
|
3287
3332
|
console.warn("Неизвестный код предупреждения: ", { code: s, origin: e, method: t });
|
|
3288
3333
|
return;
|
|
3289
3334
|
}
|
|
3290
|
-
const
|
|
3291
|
-
console.warn(`${e}. ${t}. ${s}. ${
|
|
3335
|
+
const n = a || s;
|
|
3336
|
+
console.warn(`${e}. ${t}. ${s}. ${n}`, o);
|
|
3292
3337
|
const i = {
|
|
3293
3338
|
code: s,
|
|
3294
3339
|
origin: e,
|
|
3295
3340
|
method: t,
|
|
3296
|
-
message:
|
|
3297
|
-
data:
|
|
3341
|
+
message: n,
|
|
3342
|
+
data: o
|
|
3298
3343
|
};
|
|
3299
3344
|
this._buffer.push(I({
|
|
3300
3345
|
type: "editor:warning"
|
|
@@ -3309,7 +3354,7 @@ class $ {
|
|
|
3309
3354
|
return e ? Object.values(bt).some((t) => Object.values(t).includes(e)) : !1;
|
|
3310
3355
|
}
|
|
3311
3356
|
}
|
|
3312
|
-
class
|
|
3357
|
+
class ce {
|
|
3313
3358
|
/**
|
|
3314
3359
|
* Конструктор класса ImageEditor.
|
|
3315
3360
|
* @param canvasId - идентификатор канваса, в котором будет создан редактор
|
|
@@ -3330,14 +3375,14 @@ class re {
|
|
|
3330
3375
|
editorContainerHeight: t,
|
|
3331
3376
|
canvasWrapperWidth: s,
|
|
3332
3377
|
canvasWrapperHeight: a,
|
|
3333
|
-
canvasCSSWidth:
|
|
3334
|
-
canvasCSSHeight:
|
|
3378
|
+
canvasCSSWidth: o,
|
|
3379
|
+
canvasCSSHeight: n,
|
|
3335
3380
|
initialImage: i,
|
|
3336
3381
|
initialStateJSON: c,
|
|
3337
3382
|
scaleType: d,
|
|
3338
3383
|
_onReadyCallback: h
|
|
3339
3384
|
} = this.options;
|
|
3340
|
-
if (
|
|
3385
|
+
if (Ge.apply(), this.canvas = new Te(this.containerId, this.options), this.moduleLoader = new Re(), this.workerManager = new ze(), this.errorManager = new J({ editor: this }), this.historyManager = new Q({ editor: this }), this.toolbar = new st({ editor: this }), this.transformManager = new lt({ editor: this }), this.canvasManager = new dt({ editor: this }), this.imageManager = new O({ editor: this }), this.layerManager = new K({ editor: this }), this.shapeManager = new gt({ editor: this }), this.interactionBlocker = new ht({ editor: this }), this.backgroundManager = new x({ editor: this }), this.clipboardManager = new ut({ editor: this }), this.objectLockManager = new $({ editor: this }), this.groupingManager = new ft({ editor: this }), this.selectionManager = new Mt({ editor: this }), this.deletionManager = new mt({ editor: this }), this._createMontageArea(), this._createClippingArea(), this.listeners = new Y({ editor: this, options: this.options }), this.canvasManager.setEditorContainerWidth(e), this.canvasManager.setEditorContainerHeight(t), this.canvasManager.setCanvasWrapperWidth(s), this.canvasManager.setCanvasWrapperHeight(a), this.canvasManager.setCanvasCSSWidth(o), this.canvasManager.setCanvasCSSHeight(n), i != null && i.source) {
|
|
3341
3386
|
const {
|
|
3342
3387
|
source: l,
|
|
3343
3388
|
scale: g = `image-${d}`,
|
|
@@ -3360,7 +3405,7 @@ class re {
|
|
|
3360
3405
|
this.montageArea = this.shapeManager.addRectangle({
|
|
3361
3406
|
width: e,
|
|
3362
3407
|
height: t,
|
|
3363
|
-
fill:
|
|
3408
|
+
fill: ce._createMosaicPattern(),
|
|
3364
3409
|
stroke: null,
|
|
3365
3410
|
strokeWidth: 0,
|
|
3366
3411
|
selectable: !1,
|
|
@@ -3410,7 +3455,7 @@ class re {
|
|
|
3410
3455
|
const e = document.createElement("canvas");
|
|
3411
3456
|
e.width = 20, e.height = 20;
|
|
3412
3457
|
const t = e.getContext("2d");
|
|
3413
|
-
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
|
|
3458
|
+
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 ke({
|
|
3414
3459
|
source: e,
|
|
3415
3460
|
repeat: "repeat"
|
|
3416
3461
|
});
|
|
@@ -3510,10 +3555,10 @@ function St(r, e = {}) {
|
|
|
3510
3555
|
if (!s)
|
|
3511
3556
|
return Promise.reject(new Error(`Контейнер с ID "${r}" не найден.`));
|
|
3512
3557
|
const a = document.createElement("canvas");
|
|
3513
|
-
return a.id = `${r}-canvas`, s.appendChild(a), t.editorContainer = s, new Promise((
|
|
3514
|
-
t._onReadyCallback =
|
|
3515
|
-
const
|
|
3516
|
-
window[r] =
|
|
3558
|
+
return a.id = `${r}-canvas`, s.appendChild(a), t.editorContainer = s, new Promise((o) => {
|
|
3559
|
+
t._onReadyCallback = o;
|
|
3560
|
+
const n = new ce(a.id, t);
|
|
3561
|
+
window[r] = n;
|
|
3517
3562
|
});
|
|
3518
3563
|
}
|
|
3519
3564
|
export {
|