@anu3ev/fabric-image-editor 0.1.79 → 0.1.81
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 +540 -431
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -1,46 +1,46 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
1
|
+
var Oe = Object.defineProperty, Ne = Object.defineProperties;
|
|
2
|
+
var Le = Object.getOwnPropertyDescriptors;
|
|
3
3
|
var F = Object.getOwnPropertySymbols;
|
|
4
|
-
var
|
|
5
|
-
var
|
|
4
|
+
var Me = Object.prototype.hasOwnProperty, me = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var fe = (c, e, t) => e in c ? Oe(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t, I = (c, e) => {
|
|
6
6
|
for (var t in e || (e = {}))
|
|
7
|
-
|
|
7
|
+
Me.call(e, t) && fe(c, t, e[t]);
|
|
8
8
|
if (F)
|
|
9
9
|
for (var t of F(e))
|
|
10
|
-
|
|
10
|
+
me.call(e, t) && fe(c, t, e[t]);
|
|
11
11
|
return c;
|
|
12
|
-
},
|
|
12
|
+
}, be = (c, e) => Ne(c, Le(e));
|
|
13
13
|
var V = (c, e) => {
|
|
14
14
|
var t = {};
|
|
15
15
|
for (var s in c)
|
|
16
|
-
|
|
16
|
+
Me.call(c, s) && e.indexOf(s) < 0 && (t[s] = c[s]);
|
|
17
17
|
if (c != null && F)
|
|
18
18
|
for (var s of F(c))
|
|
19
|
-
e.indexOf(s) < 0 &&
|
|
19
|
+
e.indexOf(s) < 0 && me.call(c, s) && (t[s] = c[s]);
|
|
20
20
|
return t;
|
|
21
21
|
};
|
|
22
22
|
var j = (c, e, t) => new Promise((s, a) => {
|
|
23
|
-
var
|
|
23
|
+
var n = (r) => {
|
|
24
24
|
try {
|
|
25
25
|
i(t.next(r));
|
|
26
26
|
} catch (d) {
|
|
27
27
|
a(d);
|
|
28
28
|
}
|
|
29
|
-
},
|
|
29
|
+
}, o = (r) => {
|
|
30
30
|
try {
|
|
31
31
|
i(t.throw(r));
|
|
32
32
|
} catch (d) {
|
|
33
33
|
a(d);
|
|
34
34
|
}
|
|
35
|
-
}, i = (r) => r.done ? s(r.value) : Promise.resolve(r.value).then(
|
|
35
|
+
}, i = (r) => r.done ? s(r.value) : Promise.resolve(r.value).then(n, o);
|
|
36
36
|
i((t = t.apply(c, e)).next());
|
|
37
37
|
});
|
|
38
|
-
import { ActiveSelection as v, util as W, controlsUtils as
|
|
39
|
-
import { create as
|
|
40
|
-
import
|
|
41
|
-
var
|
|
38
|
+
import { ActiveSelection as v, util as W, controlsUtils as we, InteractiveFabricObject as Te, loadSVGFromURL as ke, FabricImage as Z, Point as X, Gradient as je, Rect as _e, Circle as Be, Triangle as xe, Group as te, Canvas as Re, Pattern as Ue } from "fabric";
|
|
39
|
+
import { create as ze } from "jsondiffpatch";
|
|
40
|
+
import He from "diff-match-patch";
|
|
41
|
+
var Ze = "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
|
-
t +=
|
|
43
|
+
t += Ze[s[e] & 63];
|
|
44
44
|
return t;
|
|
45
45
|
};
|
|
46
46
|
class P {
|
|
@@ -72,14 +72,14 @@ class P {
|
|
|
72
72
|
canvasDragging: t,
|
|
73
73
|
mouseWheelZooming: s,
|
|
74
74
|
bringToFrontOnSelection: a,
|
|
75
|
-
copyObjectsByHotkey:
|
|
76
|
-
pasteImageFromClipboard:
|
|
75
|
+
copyObjectsByHotkey: n,
|
|
76
|
+
pasteImageFromClipboard: o,
|
|
77
77
|
undoRedoByHotKeys: i,
|
|
78
78
|
selectAllByHotkey: r,
|
|
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 }), n && document.addEventListener("keydown", this.handleCopyEventBound, { capture: !0 }), o && document.addEventListener("paste", this.handlePasteEventBound, { capture: !0 }), i && (document.addEventListener("keydown", this.handleUndoRedoEventBound, { capture: !0 }), document.addEventListener("keyup", this.handleUndoRedoKeyUpBound, { capture: !0 })), r && 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 P {
|
|
|
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
|
+
(o, i) => i.locked ? (o.lockedObjects.push(i), o) : (o.unlockedObjects.push(i), o),
|
|
94
94
|
{ lockedObjects: [], unlockedObjects: [] }
|
|
95
95
|
);
|
|
96
96
|
if (s.length === 0) return;
|
|
@@ -98,22 +98,22 @@ class P {
|
|
|
98
98
|
if (a.length === 1)
|
|
99
99
|
this.canvas.setActiveObject(a[0]);
|
|
100
100
|
else {
|
|
101
|
-
const
|
|
101
|
+
const o = new v(a, {
|
|
102
102
|
canvas: this.canvas
|
|
103
103
|
});
|
|
104
|
-
this.canvas.setActiveObject(
|
|
104
|
+
this.canvas.setActiveObject(o);
|
|
105
105
|
}
|
|
106
106
|
this.canvas.requestRenderAll();
|
|
107
107
|
return;
|
|
108
108
|
}
|
|
109
|
-
const
|
|
109
|
+
const n = new v(e, {
|
|
110
110
|
canvas: this.canvas
|
|
111
111
|
});
|
|
112
112
|
this.editor.objectLockManager.lockObject({
|
|
113
|
-
object:
|
|
113
|
+
object: n,
|
|
114
114
|
skipInnerObjects: !0,
|
|
115
115
|
withoutSave: !0
|
|
116
|
-
}), this.canvas.setActiveObject(
|
|
116
|
+
}), this.canvas.setActiveObject(n), this.canvas.requestRenderAll();
|
|
117
117
|
}
|
|
118
118
|
/**
|
|
119
119
|
* Обработчики для сохранения состояния редактора в истории.
|
|
@@ -176,8 +176,8 @@ class P {
|
|
|
176
176
|
*/
|
|
177
177
|
handleUndoRedoEvent(e) {
|
|
178
178
|
return j(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: n } = e;
|
|
180
|
+
this._shouldIgnoreKeyboardEvent(e) || !t && !s || n || !/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 P {
|
|
|
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: n } = this;
|
|
220
|
+
if (a || n) return;
|
|
221
221
|
this.isSpacePressed = !0, e.preventDefault();
|
|
222
|
-
const
|
|
223
|
-
|
|
222
|
+
const o = t.getActiveObject() || null;
|
|
223
|
+
o instanceof v ? this.savedSelection = o.getObjects().slice() : o && (this.savedSelection = [o]), 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 P {
|
|
|
259
259
|
t.setActiveObject(e[0]);
|
|
260
260
|
return;
|
|
261
261
|
}
|
|
262
|
-
const a = e.filter((
|
|
263
|
-
t.setActiveObject(
|
|
262
|
+
const a = e.filter((o) => s.canvasManager.getObjects().includes(o)), n = new v(a, { canvas: t });
|
|
263
|
+
t.setActiveObject(n);
|
|
264
264
|
}
|
|
265
265
|
// --- Обработчики для событий canvas (Fabric) ---
|
|
266
266
|
/**
|
|
@@ -327,16 +327,16 @@ class P {
|
|
|
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 o = s.tagName.toLowerCase();
|
|
331
|
+
if (a.includes(o) || s.contentEditable === "true") return !0;
|
|
332
332
|
}
|
|
333
333
|
if (t && t !== s) {
|
|
334
|
-
const
|
|
335
|
-
if (a.includes(
|
|
334
|
+
const o = t.tagName.toLowerCase();
|
|
335
|
+
if (a.includes(o) || t.contentEditable === "true") return !0;
|
|
336
336
|
}
|
|
337
|
-
const
|
|
338
|
-
if (
|
|
339
|
-
let r =
|
|
337
|
+
const n = window.getSelection();
|
|
338
|
+
if (n && !n.isCollapsed && n.rangeCount > 0) {
|
|
339
|
+
let r = n.getRangeAt(0).commonAncestorContainer;
|
|
340
340
|
r.nodeType === Node.TEXT_NODE && (r = r.parentElement);
|
|
341
341
|
const { keyboardIgnoreSelectors: d } = this.options;
|
|
342
342
|
if (d != null && d.length && r)
|
|
@@ -372,7 +372,7 @@ class P {
|
|
|
372
372
|
};
|
|
373
373
|
}
|
|
374
374
|
}
|
|
375
|
-
class
|
|
375
|
+
class Ye {
|
|
376
376
|
/**
|
|
377
377
|
* Класс для динамической загрузки внешних модулей.
|
|
378
378
|
*/
|
|
@@ -390,7 +390,7 @@ class ze {
|
|
|
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 Pe(c) {
|
|
394
394
|
return new Worker(
|
|
395
395
|
"" + new URL("assets/worker-CN39s7P7.js", import.meta.url).href,
|
|
396
396
|
{
|
|
@@ -398,13 +398,13 @@ function He(c) {
|
|
|
398
398
|
}
|
|
399
399
|
);
|
|
400
400
|
}
|
|
401
|
-
class
|
|
401
|
+
class We {
|
|
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 Pe(), this._callbacks = /* @__PURE__ */ new Map(), this.worker.onmessage = this._handleMessage.bind(this);
|
|
408
408
|
}
|
|
409
409
|
/**
|
|
410
410
|
* Обработчик сообщений от воркера
|
|
@@ -417,12 +417,12 @@ class Ze {
|
|
|
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: n } = e, o = this._callbacks.get(t);
|
|
421
|
+
if (!o) {
|
|
422
422
|
console.warn(`No callback found for requestId: ${t}`);
|
|
423
423
|
return;
|
|
424
424
|
}
|
|
425
|
-
s ?
|
|
425
|
+
s ? o.resolve(a) : o.reject(new Error(n)), this._callbacks.delete(t);
|
|
426
426
|
}
|
|
427
427
|
/**
|
|
428
428
|
* Универсальный метод отправки команды в воркер
|
|
@@ -433,8 +433,8 @@ class Ze {
|
|
|
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((n, o) => {
|
|
437
|
+
this._callbacks.set(a, { resolve: n, reject: o }), this.worker.postMessage({ action: e, payload: t, requestId: a }, s);
|
|
438
438
|
});
|
|
439
439
|
}
|
|
440
440
|
/**
|
|
@@ -444,65 +444,65 @@ class Ze {
|
|
|
444
444
|
this.worker.terminate();
|
|
445
445
|
}
|
|
446
446
|
}
|
|
447
|
-
const
|
|
447
|
+
const O = 12, Fe = 2, se = 8, ae = 20, Ve = 100, ne = 20, oe = 8, Ge = 100, Q = 32, ie = 1, Xe = "#2B2D33", re = "#3D8BF4", ce = "#FFFFFF";
|
|
448
448
|
function G(c, e, t, s, a) {
|
|
449
|
-
const
|
|
450
|
-
c.save(), c.translate(e, t), c.rotate(W.degreesToRadians(a.angle)), c.fillStyle = ce, c.strokeStyle = re, c.lineWidth = ie, c.beginPath(), c.roundRect(-
|
|
451
|
-
}
|
|
452
|
-
function je(c, e, t, s, a) {
|
|
453
|
-
const o = se, n = ae, i = Pe;
|
|
454
|
-
c.save(), c.translate(e, t), c.rotate(W.degreesToRadians(a.angle)), c.fillStyle = ce, c.strokeStyle = re, c.lineWidth = ie, c.beginPath(), c.roundRect(-o / 2, -n / 2, o, n, i), c.fill(), c.stroke(), c.restore();
|
|
449
|
+
const n = O, o = Fe;
|
|
450
|
+
c.save(), c.translate(e, t), c.rotate(W.degreesToRadians(a.angle)), c.fillStyle = ce, c.strokeStyle = re, c.lineWidth = ie, c.beginPath(), c.roundRect(-n / 2, -n / 2, n, n, o), c.fill(), c.stroke(), c.restore();
|
|
455
451
|
}
|
|
456
452
|
function pe(c, e, t, s, a) {
|
|
457
|
-
const
|
|
458
|
-
c.save(), c.translate(e, t), c.rotate(W.degreesToRadians(a.angle)), c.fillStyle = ce, c.strokeStyle = re, c.lineWidth = ie, c.beginPath(), c.roundRect(-
|
|
453
|
+
const n = se, o = ae, i = Ve;
|
|
454
|
+
c.save(), c.translate(e, t), c.rotate(W.degreesToRadians(a.angle)), c.fillStyle = ce, c.strokeStyle = re, c.lineWidth = ie, c.beginPath(), c.roundRect(-n / 2, -o / 2, n, o, i), c.fill(), c.stroke(), c.restore();
|
|
455
|
+
}
|
|
456
|
+
function ye(c, e, t, s, a) {
|
|
457
|
+
const n = ne, o = oe, i = Ge;
|
|
458
|
+
c.save(), c.translate(e, t), c.rotate(W.degreesToRadians(a.angle)), c.fillStyle = ce, c.strokeStyle = re, c.lineWidth = ie, c.beginPath(), c.roundRect(-n / 2, -o / 2, n, o, i), c.fill(), c.stroke(), c.restore();
|
|
459
459
|
}
|
|
460
|
-
const
|
|
461
|
-
|
|
462
|
-
function
|
|
463
|
-
const
|
|
464
|
-
c.save(), c.translate(e, t), c.rotate(W.degreesToRadians(a.angle)), c.fillStyle =
|
|
460
|
+
const Qe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", Se = new Image();
|
|
461
|
+
Se.src = Qe;
|
|
462
|
+
function $e(c, e, t, s, a) {
|
|
463
|
+
const o = Q / 2;
|
|
464
|
+
c.save(), c.translate(e, t), c.rotate(W.degreesToRadians(a.angle)), c.fillStyle = Xe, c.beginPath(), c.arc(0, 0, o, 0, 2 * Math.PI), c.fill(), c.drawImage(Se, -o / 2, -o / 2, o, o), c.restore();
|
|
465
465
|
}
|
|
466
|
-
const
|
|
466
|
+
const Ke = {
|
|
467
467
|
// Угловые точки
|
|
468
468
|
tl: {
|
|
469
469
|
render: G,
|
|
470
|
-
sizeX:
|
|
471
|
-
sizeY:
|
|
470
|
+
sizeX: O,
|
|
471
|
+
sizeY: O,
|
|
472
472
|
offsetX: 0,
|
|
473
473
|
offsetY: 0
|
|
474
474
|
},
|
|
475
475
|
tr: {
|
|
476
476
|
render: G,
|
|
477
|
-
sizeX:
|
|
478
|
-
sizeY:
|
|
477
|
+
sizeX: O,
|
|
478
|
+
sizeY: O,
|
|
479
479
|
offsetX: 0,
|
|
480
480
|
offsetY: 0
|
|
481
481
|
},
|
|
482
482
|
bl: {
|
|
483
483
|
render: G,
|
|
484
|
-
sizeX:
|
|
485
|
-
sizeY:
|
|
484
|
+
sizeX: O,
|
|
485
|
+
sizeY: O,
|
|
486
486
|
offsetX: 0,
|
|
487
487
|
offsetY: 0
|
|
488
488
|
},
|
|
489
489
|
br: {
|
|
490
490
|
render: G,
|
|
491
|
-
sizeX:
|
|
492
|
-
sizeY:
|
|
491
|
+
sizeX: O,
|
|
492
|
+
sizeY: O,
|
|
493
493
|
offsetX: 0,
|
|
494
494
|
offsetY: 0
|
|
495
495
|
},
|
|
496
496
|
// Середина вертикалей
|
|
497
497
|
ml: {
|
|
498
|
-
render:
|
|
498
|
+
render: pe,
|
|
499
499
|
sizeX: se,
|
|
500
500
|
sizeY: ae,
|
|
501
501
|
offsetX: 0,
|
|
502
502
|
offsetY: 0
|
|
503
503
|
},
|
|
504
504
|
mr: {
|
|
505
|
-
render:
|
|
505
|
+
render: pe,
|
|
506
506
|
sizeX: se,
|
|
507
507
|
sizeY: ae,
|
|
508
508
|
offsetX: 0,
|
|
@@ -510,46 +510,46 @@ const Xe = {
|
|
|
510
510
|
},
|
|
511
511
|
// Середина горизонталей
|
|
512
512
|
mt: {
|
|
513
|
-
render:
|
|
514
|
-
sizeX:
|
|
515
|
-
sizeY:
|
|
513
|
+
render: ye,
|
|
514
|
+
sizeX: ne,
|
|
515
|
+
sizeY: oe,
|
|
516
516
|
offsetX: 0,
|
|
517
517
|
offsetY: 0
|
|
518
518
|
},
|
|
519
519
|
mb: {
|
|
520
|
-
render:
|
|
521
|
-
sizeX:
|
|
522
|
-
sizeY:
|
|
520
|
+
render: ye,
|
|
521
|
+
sizeX: ne,
|
|
522
|
+
sizeY: oe,
|
|
523
523
|
offsetX: 0,
|
|
524
524
|
offsetY: 0
|
|
525
525
|
},
|
|
526
526
|
// Специальный «rotate» контрол
|
|
527
527
|
mtr: {
|
|
528
|
-
render:
|
|
528
|
+
render: $e,
|
|
529
529
|
sizeX: Q,
|
|
530
530
|
sizeY: Q,
|
|
531
531
|
offsetX: 0,
|
|
532
532
|
offsetY: -Q
|
|
533
533
|
}
|
|
534
534
|
};
|
|
535
|
-
class
|
|
535
|
+
class Je {
|
|
536
536
|
static apply() {
|
|
537
|
-
const e =
|
|
538
|
-
Object.entries(
|
|
537
|
+
const e = we.createObjectDefaultControls();
|
|
538
|
+
Object.entries(Ke).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 = (n, o, i, r) => {
|
|
546
546
|
var h;
|
|
547
|
-
(h =
|
|
547
|
+
(h = o.target.canvas) == null || h.setCursor("grabbing");
|
|
548
548
|
});
|
|
549
|
-
}),
|
|
549
|
+
}), Te.ownDefaults.controls = e;
|
|
550
550
|
}
|
|
551
551
|
}
|
|
552
|
-
const
|
|
552
|
+
const qe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNi44NzUgMi41YS42MjUuNjI1IDAgMCAwLS42MjUuNjI0VjYuMjVIMy4xMjVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2MTBjMCAuMzQ1LjI4LjYyNS42MjUuNjI1aDEwYy4zNDUgMCAuNjI1LS4yOC42MjUtLjYyNXYtMy4xMjZoMy4xMjVjLjM0NSAwIC42MjUtLjI4LjYyNS0uNjI1di0xMGEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTEwWm02Ljg3NSAxMGgyLjVWMy43NUg3LjV2Mi41aDUuNjI1Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NS42MjRabS0xMCAzLjc1VjcuNWg4Ljc1djguNzVIMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", et = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi41IDcuNWMwLS42OS41Ni0xLjI1IDEuMjUtMS4yNWgxMi41Yy42OSAwIDEuMjUuNTYgMS4yNSAxLjI1djguNzVjMCAuNjktLjU2IDEuMjUtMS4yNSAxLjI1SDMuNzVjLS42OSAwLTEuMjUtLjU2LTEuMjUtMS4yNVY3LjVabTEzLjc1IDBIMy43NXY4Ljc1aDEyLjVWNy41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMS44NzVhMi4xODggMi4xODggMCAwIDAtMi4xODggMi4xODh2Mi44MTJhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyYTMuNDM3IDMuNDM3IDAgMSAxIDYuODc1IDB2Mi44MTNhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyQTIuMTg4IDIuMTg4IDAgMCAwIDEwIDEuODc2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEwIDEyLjgxM2EuOTM3LjkzNyAwIDEgMCAwLTEuODc1LjkzNy45MzcgMCAwIDAgMCAxLjg3NFoiLz48L3N2Zz4=", tt = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE2LjI1IDYuMjVINy41VjQuMzc1YTIuNSAyLjUgMCAwIDEgMi41LTIuNWMxLjIgMCAyLjI4MS44NiAyLjUxMiAyYS42MjUuNjI1IDAgMCAwIDEuMjI2LS4yNWMtLjM1NC0xLjczOC0xLjkyNS0zLTMuNzM4LTNhMy43NTQgMy43NTQgMCAwIDAtMy43NSAzLjc1VjYuMjVoLTIuNUExLjI1IDEuMjUgMCAwIDAgMi41IDcuNXY4Ljc1YTEuMjUgMS4yNSAwIDAgMCAxLjI1IDEuMjVoMTIuNWExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjcuNWExLjI1IDEuMjUgMCAwIDAtMS4yNS0xLjI1Wm0wIDEwSDMuNzVWNy41aDEyLjV2OC43NVptLTUuMzEzLTQuMzc1YS45MzcuOTM3IDAgMSAxLTEuODc0IDAgLjkzNy45MzcgMCAwIDEgMS44NzQgMFoiLz48L3N2Zz4K", st = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIuNSA4LjEyNSAxMCAxMi41bDcuNS00LjM3NUwxMCAzLjc1IDIuNSA4LjEyNVoiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjY4NSAzLjIxYS42MjUuNjI1IDAgMCAxIC42MyAwbDcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOGw3LjUtNC4zNzVaTTMuNzQgOC4xMjUgMTAgMTEuNzc2bDYuMjYtMy42NTFMMTAgNC40NzQgMy43NCA4LjEyNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA5LjQ2YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDExLjc3NmwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA5LjQ2Wm0tMS42NiAyLjQxNUwxMCAxNS41MjZsNi4yNi0zLjY1MS0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNi0xLjk3NSAxLjE1MVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", at = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMy4yMWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDguMTI1IDEwIDExLjc3Nmw2LjI2LTMuNjUxTDEwIDQuNDc0IDMuNzQgOC4xMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjcxNCAxMCAxMCAxMi41bDQuMjg2LTIuNSAzLjIxNCAxLjg3NUwxMCAxNi4yNWwtNy41LTQuMzc1TDUuNzE0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDkuNDZhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgMTEuNzc2bDMuOTctMi4zMTZhLjYyNS42MjUgMCAwIDEgLjYzIDBsMy4yMTUgMS44NzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhMNS40IDkuNDZabS0xLjY2IDIuNDE1TDEwIDE1LjUyNmw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2LTEuOTc1IDEuMTUxWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", nt = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTIuNSA2LjI1IDcuNSA0LjM3NSA3LjUtNC4zNzVMMTAgMS44NzUgMi41IDYuMjVaIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMS4zMzVhLjYyNS42MjUgMCAwIDEgLjYzIDBsNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4bDcuNS00LjM3NVpNMy43NCA2LjI1IDEwIDkuOTAxbDYuMjYtMy42NTFMMTAgMi41OTkgMy43NCA2LjI1WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDExLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCAxMy42NTFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgMTEuMzM1Wk0zLjc0IDEzLjc1IDEwIDE3LjQwMWw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTMuNzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgNy41ODVhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgOS45MDFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgNy41ODVaTTMuNzQgMTAgMTAgMTMuNjUxIDE2LjI2IDEwbC0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNkwzLjc0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", ot = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMS45NiAxMy40MzVhLjYyNS42MjUgMCAwIDEgLjg1NS0uMjI1TDEwIDE3LjQwMWw3LjE4NS00LjE5YS42MjUuNjI1IDAgMCAxIC42MyAxLjA3OWwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEtLjIyNS0uODU1Wk05LjY4NSAxLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDYuMjUgMTAgOS45MDFsNi4yNi0zLjY1MUwxMCAyLjU5OSAzLjc0IDYuMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im01LjcxNCAxMS44NzUgNC4yODYgMi41IDQuMjg2LTIuNUwxNy41IDEzLjc1IDEwIDE4LjEyNSAyLjUgMTMuNzVsMy4yMTQtMS44NzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgMTEuMzM1YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDEzLjY1MWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCAxMS4zMzVaTTMuNzQgMTMuNzUgMTAgMTcuNDAxbDYuMjYtMy42NTEtMS45NzQtMS4xNTEtMy45NzEgMi4zMTZhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTMuOTctMi4zMTZMMy43NCAxMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA3LjU4NWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCA5LjkwMWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA3LjU4NVpNMy43NCAxMCAxMCAxMy42NTEgMTYuMjYgMTBsLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTBaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=", it = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI0VDNEU0MCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOC4xMjUgMS4yNUExLjg3NSAxLjg3NSAwIDAgMCA2LjI1IDMuMTI1di42MjVIMy4xMjVhLjYyNS42MjUgMCAwIDAgMCAxLjI1aC42MjV2MTEuMjVBMS4yNSAxLjI1IDAgMCAwIDUgMTcuNWgxMGExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjVoLjYyNWEuNjI1LjYyNSAwIDAgMCAwLTEuMjVIMTMuNzV2LS42MjVhMS44NzUgMS44NzUgMCAwIDAtMS44NzUtMS44NzVoLTMuNzVabTQuMzc1IDIuNXYtLjYyNWEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2LjYyNWg1Wk01IDE2LjI1VjVoMTB2MTEuMjVINVpNOC4xMjUgNy41Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NWEuNjI1LjYyNSAwIDEgMS0xLjI1IDB2LTVjMC0uMzQ1LjI4LS42MjUuNjI1LS42MjVabTQuMzc1IDUuNjI1di01YS42MjUuNjI1IDAgMCAwLTEuMjUgMHY1YS42MjUuNjI1IDAgMSAwIDEuMjUgMFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", Y = {
|
|
553
553
|
style: {
|
|
554
554
|
position: "absolute",
|
|
555
555
|
display: "none",
|
|
@@ -616,14 +616,14 @@ const Ke = "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: qe,
|
|
620
|
+
delete: it,
|
|
621
|
+
lock: et,
|
|
622
|
+
unlock: tt,
|
|
623
|
+
bringToFront: nt,
|
|
624
|
+
sendToBack: ot,
|
|
625
|
+
bringForward: st,
|
|
626
|
+
sendBackwards: at
|
|
627
627
|
},
|
|
628
628
|
handlers: {
|
|
629
629
|
copyPaste: (c) => j(null, null, function* () {
|
|
@@ -652,14 +652,14 @@ const Ke = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMj
|
|
|
652
652
|
}
|
|
653
653
|
}
|
|
654
654
|
};
|
|
655
|
-
class
|
|
655
|
+
class rt {
|
|
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 = be(I(I({}, Y), e), {
|
|
663
663
|
style: I(I({}, Y.style), e.style || {}),
|
|
664
664
|
btnStyle: I(I({}, Y.btnStyle), e.btnStyle || {}),
|
|
665
665
|
icons: I(I({}, Y.icons), e.icons || {}),
|
|
@@ -690,8 +690,8 @@ class ot {
|
|
|
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
|
-
r.innerHTML =
|
|
693
|
+
const { name: s, handle: a } = t, { icons: n = {}, btnStyle: o, handlers: i = {} } = this.config, r = document.createElement("button");
|
|
694
|
+
r.innerHTML = n[a] ? `<img src="${n[a]}" title="${s}" />` : s, Object.assign(r.style, o), r.onclick = () => {
|
|
695
695
|
var d;
|
|
696
696
|
return (d = i[a]) == null ? void 0 : d.call(i, this.editor);
|
|
697
697
|
}, r.onmousedown = (d) => {
|
|
@@ -754,9 +754,9 @@ class ot {
|
|
|
754
754
|
}
|
|
755
755
|
const { el: t, config: s, canvas: a } = this;
|
|
756
756
|
e.setCoords();
|
|
757
|
-
const
|
|
757
|
+
const n = a.getZoom(), [, , , , o, i] = a.viewportTransform, { x: r } = e.getCenterPoint(), { top: d, height: h } = e.getBoundingRect(), u = r * n + o - t.offsetWidth / 2, g = s.offsetTop || 0, M = (d + h) * n + i + g;
|
|
758
758
|
Object.assign(t.style, {
|
|
759
|
-
left: `${
|
|
759
|
+
left: `${u}px`,
|
|
760
760
|
top: `${M}px`,
|
|
761
761
|
display: "flex"
|
|
762
762
|
});
|
|
@@ -768,7 +768,114 @@ class ot {
|
|
|
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
|
-
|
|
771
|
+
const ct = {
|
|
772
|
+
position: "absolute",
|
|
773
|
+
display: "none",
|
|
774
|
+
background: "#2B2D33",
|
|
775
|
+
color: "#fff",
|
|
776
|
+
padding: "4px 8px",
|
|
777
|
+
"border-radius": "4px",
|
|
778
|
+
"font-size": "12px",
|
|
779
|
+
"font-weight": "500",
|
|
780
|
+
"font-family": "system-ui, -apple-system, sans-serif",
|
|
781
|
+
"z-index": "1000",
|
|
782
|
+
"pointer-events": "none",
|
|
783
|
+
"white-space": "nowrap",
|
|
784
|
+
"box-shadow": "0 2px 8px rgba(0, 0, 0, 0.2)"
|
|
785
|
+
}, Ie = 16, ve = 16, dt = "fabric-editor-angle-indicator";
|
|
786
|
+
class de {
|
|
787
|
+
constructor({ editor: e }) {
|
|
788
|
+
this.isActive = !1, this.currentAngle = 0, this.editor = e, this.canvas = e.canvas, this.options = e.options, this._createDOM(), this._bindEvents();
|
|
789
|
+
}
|
|
790
|
+
/**
|
|
791
|
+
* Создание DOM-элемента индикатора
|
|
792
|
+
*/
|
|
793
|
+
_createDOM() {
|
|
794
|
+
this.el = document.createElement("div"), this.el.className = dt, Object.entries(ct).forEach(([e, t]) => {
|
|
795
|
+
this.el.style.setProperty(e, t);
|
|
796
|
+
}), this.canvas.wrapperEl.appendChild(this.el);
|
|
797
|
+
}
|
|
798
|
+
/**
|
|
799
|
+
* Привязка обработчиков событий
|
|
800
|
+
*/
|
|
801
|
+
_bindEvents() {
|
|
802
|
+
this._onObjectRotating = this._handleObjectRotating.bind(this), this._onMouseUp = this._handleMouseUp.bind(this), this._onObjectModified = this._handleObjectModified.bind(this), this._onSelectionCleared = this._handleSelectionCleared.bind(this), this.canvas.on("object:rotating", this._onObjectRotating), this.canvas.on("mouse:up", this._onMouseUp), this.canvas.on("object:modified", this._onObjectModified), this.canvas.on("selection:cleared", this._onSelectionCleared);
|
|
803
|
+
}
|
|
804
|
+
/**
|
|
805
|
+
* Обработчик вращения объекта
|
|
806
|
+
*/
|
|
807
|
+
_handleObjectRotating(e) {
|
|
808
|
+
const { target: t } = e.transform;
|
|
809
|
+
if (!this._shouldShowIndicator(t)) {
|
|
810
|
+
this._hideIndicator();
|
|
811
|
+
return;
|
|
812
|
+
}
|
|
813
|
+
const s = t.angle || 0;
|
|
814
|
+
this.currentAngle = de._normalizeAngle(s), this.el.textContent = `${this.currentAngle}°`, this._positionIndicator(e.e), this.isActive || this._showIndicator();
|
|
815
|
+
}
|
|
816
|
+
/**
|
|
817
|
+
* Обработчик отпускания кнопки мыши
|
|
818
|
+
*/
|
|
819
|
+
_handleMouseUp(e) {
|
|
820
|
+
this._hideIndicator();
|
|
821
|
+
}
|
|
822
|
+
/**
|
|
823
|
+
* Обработчик модификации объекта
|
|
824
|
+
*/
|
|
825
|
+
_handleObjectModified() {
|
|
826
|
+
this._hideIndicator();
|
|
827
|
+
}
|
|
828
|
+
/**
|
|
829
|
+
* Обработчик снятия выделения
|
|
830
|
+
*/
|
|
831
|
+
_handleSelectionCleared() {
|
|
832
|
+
this._hideIndicator();
|
|
833
|
+
}
|
|
834
|
+
/**
|
|
835
|
+
* Проверка, можно ли показывать индикатор для данного объекта
|
|
836
|
+
*/
|
|
837
|
+
_shouldShowIndicator(e) {
|
|
838
|
+
return !(!this.options.showRotationAngle || !e || e.id === this.editor.montageArea.id || e.lockRotation || e.lockMovementX || e.lockMovementY);
|
|
839
|
+
}
|
|
840
|
+
/**
|
|
841
|
+
* Позиционирование индикатора относительно курсора
|
|
842
|
+
*/
|
|
843
|
+
_positionIndicator(e) {
|
|
844
|
+
const t = this.canvas.wrapperEl.getBoundingClientRect();
|
|
845
|
+
let s = e.clientX - t.left + Ie, a = e.clientY - t.top + ve;
|
|
846
|
+
const n = this.el.getBoundingClientRect(), o = n.width, i = n.height;
|
|
847
|
+
s + o > t.width && (s = e.clientX - t.left - o - Ie), a + i > t.height && (a = e.clientY - t.top - i - ve), this.el.style.left = `${s}px`, this.el.style.top = `${a}px`;
|
|
848
|
+
}
|
|
849
|
+
/**
|
|
850
|
+
* Показать индикатор
|
|
851
|
+
*/
|
|
852
|
+
_showIndicator() {
|
|
853
|
+
this.el.style.display = "block", this.isActive = !0;
|
|
854
|
+
}
|
|
855
|
+
/**
|
|
856
|
+
* Скрыть индикатор
|
|
857
|
+
*/
|
|
858
|
+
_hideIndicator() {
|
|
859
|
+
this.el.style.display = "none", this.isActive = !1, this.currentAngle = 0;
|
|
860
|
+
}
|
|
861
|
+
/**
|
|
862
|
+
* Нормализация угла в диапазон -180° до +180° и округление
|
|
863
|
+
* Положительные значения - поворот вправо (по часовой стрелке)
|
|
864
|
+
* Отрицательные значения - поворот влево (против часовой стрелки)
|
|
865
|
+
*/
|
|
866
|
+
static _normalizeAngle(e) {
|
|
867
|
+
let t = e % 360;
|
|
868
|
+
return t > 180 && (t -= 360), t < -180 && (t += 360), Math.round(t);
|
|
869
|
+
}
|
|
870
|
+
/**
|
|
871
|
+
* Очистка ресурсов
|
|
872
|
+
*/
|
|
873
|
+
destroy() {
|
|
874
|
+
var e;
|
|
875
|
+
this.canvas && (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:cleared", this._onSelectionCleared)), (e = this.el) != null && e.parentNode && this.el.parentNode.removeChild(this.el), this.el = null, this.editor = null, this.canvas = null, this.options = null;
|
|
876
|
+
}
|
|
877
|
+
}
|
|
878
|
+
class $ {
|
|
772
879
|
constructor({ editor: e }) {
|
|
773
880
|
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
881
|
}
|
|
@@ -780,7 +887,7 @@ class K {
|
|
|
780
887
|
return this.patches[this.currentIndex - 1] || null;
|
|
781
888
|
}
|
|
782
889
|
_createDiffPatcher() {
|
|
783
|
-
this.diffPatcher =
|
|
890
|
+
this.diffPatcher = ze({
|
|
784
891
|
objectHash(e) {
|
|
785
892
|
const t = e;
|
|
786
893
|
return [
|
|
@@ -806,7 +913,7 @@ class K {
|
|
|
806
913
|
includeValueOnMove: !1
|
|
807
914
|
},
|
|
808
915
|
textDiff: {
|
|
809
|
-
diffMatchPatch:
|
|
916
|
+
diffMatchPatch: He,
|
|
810
917
|
minLength: 60
|
|
811
918
|
}
|
|
812
919
|
});
|
|
@@ -837,8 +944,8 @@ class K {
|
|
|
837
944
|
getFullState() {
|
|
838
945
|
const { baseState: e, currentIndex: t, patches: s } = this;
|
|
839
946
|
let a = JSON.parse(JSON.stringify(e));
|
|
840
|
-
for (let
|
|
841
|
-
a = this.diffPatcher.patch(a, s[
|
|
947
|
+
for (let n = 0; n < t; n += 1)
|
|
948
|
+
a = this.diffPatcher.patch(a, s[n].diff);
|
|
842
949
|
return console.log("getFullState state", a), a;
|
|
843
950
|
}
|
|
844
951
|
/**
|
|
@@ -911,16 +1018,16 @@ class K {
|
|
|
911
1018
|
return j(this, null, function* () {
|
|
912
1019
|
if (!e) return;
|
|
913
1020
|
console.log("loadStateFromFullState fullState", e);
|
|
914
|
-
const { canvas: t, canvasManager: s, interactionBlocker: a, backgroundManager:
|
|
915
|
-
a.overlayMask = null,
|
|
916
|
-
|
|
1021
|
+
const { canvas: t, canvasManager: s, interactionBlocker: a, backgroundManager: n } = this.editor, { width: o, height: i } = t;
|
|
1022
|
+
a.overlayMask = null, $._serializeCustomData(e), yield t.loadFromJSON(e, (l, u) => {
|
|
1023
|
+
$._deserializeCustomData(l, u);
|
|
917
1024
|
});
|
|
918
1025
|
const r = t.getObjects().find((l) => l.id === "montage-area");
|
|
919
|
-
r && (this.editor.montageArea = r, (
|
|
1026
|
+
r && (this.editor.montageArea = r, (o !== t.getWidth() || i !== t.getHeight()) && s.updateCanvas());
|
|
920
1027
|
const d = t.getObjects().find((l) => l.id === "overlay-mask");
|
|
921
1028
|
d && (a.overlayMask = d, a.overlayMask.visible = !1);
|
|
922
1029
|
const h = t.getObjects().find((l) => l.id === "background");
|
|
923
|
-
h ? (
|
|
1030
|
+
h ? (n.backgroundObject = h, n.refresh()) : n.removeBackground({ withoutSave: !0 }), t.renderAll(), t.fire("editor:history-state-loaded", {
|
|
924
1031
|
fullState: e,
|
|
925
1032
|
currentIndex: this.currentIndex,
|
|
926
1033
|
totalChangesCount: this.totalChangesCount,
|
|
@@ -1005,8 +1112,8 @@ class K {
|
|
|
1005
1112
|
});
|
|
1006
1113
|
}
|
|
1007
1114
|
}
|
|
1008
|
-
const
|
|
1009
|
-
class
|
|
1115
|
+
const lt = 0.1, ht = 2, ut = 0.1, gt = 90, U = 16, z = 16, k = 4096, _ = 4096, Ae = "application/image-editor:";
|
|
1116
|
+
class N {
|
|
1010
1117
|
constructor({ editor: e }) {
|
|
1011
1118
|
this.editor = e, this.options = e.options, this._createdBlobUrls = [], this.acceptContentTypes = this.editor.options.acceptContentTypes, this.acceptFormats = this.getAllowedFormatsFromContentTypes();
|
|
1012
1119
|
}
|
|
@@ -1028,15 +1135,15 @@ class O {
|
|
|
1028
1135
|
source: t,
|
|
1029
1136
|
scale: s = `image-${this.options.scaleType}`,
|
|
1030
1137
|
withoutSave: a = !1,
|
|
1031
|
-
fromClipboard:
|
|
1032
|
-
isBackground:
|
|
1138
|
+
fromClipboard: n = !1,
|
|
1139
|
+
isBackground: o = !1,
|
|
1033
1140
|
withoutSelection: i = !1
|
|
1034
1141
|
} = e;
|
|
1035
1142
|
if (!t) return null;
|
|
1036
|
-
const { canvas: r, montageArea: d, transformManager: h, historyManager: l, errorManager:
|
|
1037
|
-
if (!this.isAllowedContentType(
|
|
1038
|
-
const f = `Неверный contentType для изображения: ${
|
|
1039
|
-
return
|
|
1143
|
+
const { canvas: r, montageArea: d, transformManager: h, historyManager: l, errorManager: u } = this.editor, g = yield this.getContentType(t), M = N.getFormatFromContentType(g), { acceptContentTypes: m, acceptFormats: p } = this;
|
|
1144
|
+
if (!this.isAllowedContentType(g)) {
|
|
1145
|
+
const f = `Неверный contentType для изображения: ${g}. Ожидается один из: ${this.acceptContentTypes.join(", ")}.`;
|
|
1146
|
+
return u.emitError({
|
|
1040
1147
|
origin: "ImageManager",
|
|
1041
1148
|
method: "importImage",
|
|
1042
1149
|
code: "INVALID_CONTENT_TYPE",
|
|
@@ -1044,11 +1151,11 @@ class O {
|
|
|
1044
1151
|
data: {
|
|
1045
1152
|
source: t,
|
|
1046
1153
|
format: M,
|
|
1047
|
-
contentType:
|
|
1154
|
+
contentType: g,
|
|
1048
1155
|
acceptContentTypes: m,
|
|
1049
1156
|
acceptFormats: p,
|
|
1050
|
-
fromClipboard:
|
|
1051
|
-
isBackground:
|
|
1157
|
+
fromClipboard: n,
|
|
1158
|
+
isBackground: o,
|
|
1052
1159
|
withoutSelection: i
|
|
1053
1160
|
}
|
|
1054
1161
|
}), null;
|
|
@@ -1062,7 +1169,7 @@ class O {
|
|
|
1062
1169
|
const D = yield (yield fetch(t, { mode: "cors" })).blob();
|
|
1063
1170
|
f = URL.createObjectURL(D);
|
|
1064
1171
|
} else
|
|
1065
|
-
return
|
|
1172
|
+
return u.emitError({
|
|
1066
1173
|
origin: "ImageManager",
|
|
1067
1174
|
method: "importImage",
|
|
1068
1175
|
code: "INVALID_SOURCE_TYPE",
|
|
@@ -1070,16 +1177,16 @@ class O {
|
|
|
1070
1177
|
data: {
|
|
1071
1178
|
source: t,
|
|
1072
1179
|
format: M,
|
|
1073
|
-
contentType:
|
|
1180
|
+
contentType: g,
|
|
1074
1181
|
acceptContentTypes: m,
|
|
1075
1182
|
acceptFormats: p,
|
|
1076
|
-
fromClipboard:
|
|
1077
|
-
isBackground:
|
|
1183
|
+
fromClipboard: n,
|
|
1184
|
+
isBackground: o,
|
|
1078
1185
|
withoutSelection: i
|
|
1079
1186
|
}
|
|
1080
1187
|
}), null;
|
|
1081
1188
|
if (this._createdBlobUrls.push(f), M === "svg") {
|
|
1082
|
-
const C = yield
|
|
1189
|
+
const C = yield ke(f);
|
|
1083
1190
|
b = W.groupSVGElements(C.objects, C.options);
|
|
1084
1191
|
} else
|
|
1085
1192
|
b = yield Z.fromURL(f, { crossOrigin: "anonymous" });
|
|
@@ -1087,35 +1194,35 @@ class O {
|
|
|
1087
1194
|
if (b instanceof Z) {
|
|
1088
1195
|
const C = b.getElement();
|
|
1089
1196
|
let D = "";
|
|
1090
|
-
if (C instanceof HTMLImageElement ? D = C.src : C instanceof HTMLCanvasElement && (D = C.toDataURL()), T >
|
|
1091
|
-
const
|
|
1197
|
+
if (C instanceof HTMLImageElement ? D = C.src : C instanceof HTMLCanvasElement && (D = C.toDataURL()), T > _ || S > k) {
|
|
1198
|
+
const B = yield this.resizeImageToBoundaries(D, "max"), L = URL.createObjectURL(B);
|
|
1092
1199
|
this._createdBlobUrls.push(L), b = yield Z.fromURL(L, { crossOrigin: "anonymous" });
|
|
1093
1200
|
} else if (T < z || S < U) {
|
|
1094
|
-
const
|
|
1201
|
+
const B = yield this.resizeImageToBoundaries(D, "min"), L = URL.createObjectURL(B);
|
|
1095
1202
|
this._createdBlobUrls.push(L), b = yield Z.fromURL(L, { crossOrigin: "anonymous" });
|
|
1096
1203
|
}
|
|
1097
1204
|
}
|
|
1098
1205
|
if (b.set("id", `${b.type}-${A()}`), b.set("format", M), s === "scale-montage")
|
|
1099
1206
|
this.editor.canvasManager.scaleMontageAreaToImage({ object: b, withoutSave: !0 });
|
|
1100
1207
|
else {
|
|
1101
|
-
const { width: C, height: D } = d,
|
|
1102
|
-
s === "image-contain" &&
|
|
1208
|
+
const { width: C, height: D } = d, B = this.calculateScaleFactor({ imageObject: b, scaleType: s });
|
|
1209
|
+
s === "image-contain" && B < 1 ? h.fitObject({ object: b, type: "contain", withoutSave: !0 }) : s === "image-cover" && (S > C || T > D) && h.fitObject({ object: b, type: "cover", withoutSave: !0 });
|
|
1103
1210
|
}
|
|
1104
1211
|
r.add(b), r.centerObject(b), i || r.setActiveObject(b), r.renderAll(), l.resumeHistory(), a || l.saveState();
|
|
1105
1212
|
const H = {
|
|
1106
1213
|
image: b,
|
|
1107
1214
|
format: M,
|
|
1108
|
-
contentType:
|
|
1215
|
+
contentType: g,
|
|
1109
1216
|
scale: s,
|
|
1110
1217
|
withoutSave: a,
|
|
1111
1218
|
source: t,
|
|
1112
|
-
fromClipboard:
|
|
1113
|
-
isBackground:
|
|
1219
|
+
fromClipboard: n,
|
|
1220
|
+
isBackground: o,
|
|
1114
1221
|
withoutSelection: i
|
|
1115
1222
|
};
|
|
1116
1223
|
return r.fire("editor:image-imported", H), H;
|
|
1117
1224
|
} catch (f) {
|
|
1118
|
-
return
|
|
1225
|
+
return u.emitError({
|
|
1119
1226
|
origin: "ImageManager",
|
|
1120
1227
|
method: "importImage",
|
|
1121
1228
|
code: "IMPORT_FAILED",
|
|
@@ -1123,11 +1230,11 @@ class O {
|
|
|
1123
1230
|
data: {
|
|
1124
1231
|
source: t,
|
|
1125
1232
|
format: M,
|
|
1126
|
-
contentType:
|
|
1233
|
+
contentType: g,
|
|
1127
1234
|
scale: s,
|
|
1128
1235
|
withoutSave: a,
|
|
1129
|
-
fromClipboard:
|
|
1130
|
-
isBackground:
|
|
1236
|
+
fromClipboard: n,
|
|
1237
|
+
isBackground: o,
|
|
1131
1238
|
withoutSelection: i
|
|
1132
1239
|
}
|
|
1133
1240
|
}), l.resumeHistory(), null;
|
|
@@ -1144,13 +1251,13 @@ class O {
|
|
|
1144
1251
|
*/
|
|
1145
1252
|
resizeImageToBoundaries(e, t = "max") {
|
|
1146
1253
|
return j(this, null, function* () {
|
|
1147
|
-
let s = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${k}x${
|
|
1254
|
+
let s = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${k}x${_}`;
|
|
1148
1255
|
t === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${U}x${z}`);
|
|
1149
1256
|
const a = {
|
|
1150
1257
|
dataURL: e,
|
|
1151
1258
|
sizeType: t,
|
|
1152
1259
|
maxWidth: k,
|
|
1153
|
-
maxHeight:
|
|
1260
|
+
maxHeight: _,
|
|
1154
1261
|
minWidth: U,
|
|
1155
1262
|
minHeight: z
|
|
1156
1263
|
};
|
|
@@ -1180,56 +1287,56 @@ class O {
|
|
|
1180
1287
|
fileName: t = "image.png",
|
|
1181
1288
|
contentType: s = "image/png",
|
|
1182
1289
|
exportAsBase64: a = !1,
|
|
1183
|
-
exportAsBlob:
|
|
1184
|
-
} = e, { canvas:
|
|
1290
|
+
exportAsBlob: n = !1
|
|
1291
|
+
} = e, { canvas: o, montageArea: i, workerManager: r, interactionBlocker: d } = this.editor;
|
|
1185
1292
|
try {
|
|
1186
|
-
const h = s === "application/pdf", l = h ? "image/jpg" : s,
|
|
1293
|
+
const h = s === "application/pdf", l = h ? "image/jpg" : s, u = N.getFormatFromContentType(l);
|
|
1187
1294
|
i.setCoords();
|
|
1188
|
-
const { left:
|
|
1295
|
+
const { left: g, top: M, width: m, height: p } = i.getBoundingRect(), f = yield o.clone(["id", "format", "locked"]);
|
|
1189
1296
|
f.enableRetinaScaling = !1, ["image/jpg", "image/jpeg"].includes(l) && (f.backgroundColor = "#ffffff");
|
|
1190
1297
|
const b = f.getObjects().find((y) => y.id === i.id);
|
|
1191
1298
|
if (b && (b.visible = !1), d != null && d.isBlocked) {
|
|
1192
1299
|
const y = f.getObjects().find((w) => w.id === d.overlayMask.id);
|
|
1193
1300
|
y && (y.visible = !1);
|
|
1194
1301
|
}
|
|
1195
|
-
f.viewportTransform = [1, 0, 0, 1, -
|
|
1302
|
+
f.viewportTransform = [1, 0, 0, 1, -g, -M], f.setDimensions({ width: m, height: p }, { backstoreOnly: !0 }), f.renderAll();
|
|
1196
1303
|
const S = f.getObjects().filter((y) => y.format).every((y) => y.format === "svg");
|
|
1197
|
-
if (
|
|
1304
|
+
if (u === "svg" && S) {
|
|
1198
1305
|
const y = f.toSVG();
|
|
1199
1306
|
f.dispose();
|
|
1200
1307
|
const E = {
|
|
1201
|
-
image:
|
|
1308
|
+
image: N._exportSVGStringAsFile(y, {
|
|
1202
1309
|
exportAsBase64: a,
|
|
1203
|
-
exportAsBlob:
|
|
1310
|
+
exportAsBlob: n,
|
|
1204
1311
|
fileName: t
|
|
1205
1312
|
}),
|
|
1206
1313
|
format: "svg",
|
|
1207
1314
|
contentType: "image/svg+xml",
|
|
1208
1315
|
fileName: t.replace(/\.[^/.]+$/, ".svg")
|
|
1209
1316
|
};
|
|
1210
|
-
return
|
|
1317
|
+
return o.fire("editor:canvas-exported", E), E;
|
|
1211
1318
|
}
|
|
1212
1319
|
const T = yield new Promise((y, w) => {
|
|
1213
1320
|
f.getElement().toBlob((E) => {
|
|
1214
1321
|
E ? y(E) : w(new Error("Failed to create Blob from canvas"));
|
|
1215
1322
|
});
|
|
1216
1323
|
});
|
|
1217
|
-
if (f.dispose(),
|
|
1324
|
+
if (f.dispose(), n) {
|
|
1218
1325
|
const y = {
|
|
1219
1326
|
image: T,
|
|
1220
|
-
format:
|
|
1327
|
+
format: u,
|
|
1221
1328
|
contentType: l,
|
|
1222
1329
|
fileName: t
|
|
1223
1330
|
};
|
|
1224
|
-
return
|
|
1331
|
+
return o.fire("editor:canvas-exported", y), y;
|
|
1225
1332
|
}
|
|
1226
1333
|
const H = yield createImageBitmap(T), C = yield r.post(
|
|
1227
1334
|
"toDataURL",
|
|
1228
|
-
{ format:
|
|
1335
|
+
{ format: u, quality: 1, bitmap: H },
|
|
1229
1336
|
[H]
|
|
1230
1337
|
);
|
|
1231
1338
|
if (h) {
|
|
1232
|
-
const w = m * 0.264583, E = p * 0.264583,
|
|
1339
|
+
const w = m * 0.264583, E = p * 0.264583, De = (yield this.editor.moduleLoader.loadModule("jspdf")).jsPDF, ee = new De({
|
|
1233
1340
|
orientation: w > E ? "landscape" : "portrait",
|
|
1234
1341
|
unit: "mm",
|
|
1235
1342
|
format: [w, E]
|
|
@@ -1241,39 +1348,39 @@ class O {
|
|
|
1241
1348
|
contentType: "application/pdf",
|
|
1242
1349
|
fileName: t
|
|
1243
1350
|
};
|
|
1244
|
-
return
|
|
1351
|
+
return o.fire("editor:canvas-exported", ge), ge;
|
|
1245
1352
|
}
|
|
1246
|
-
const
|
|
1247
|
-
image: new File([
|
|
1353
|
+
const Ee = ee.output("blob"), ue = {
|
|
1354
|
+
image: new File([Ee], t, { type: "application/pdf" }),
|
|
1248
1355
|
format: "pdf",
|
|
1249
1356
|
contentType: "application/pdf",
|
|
1250
1357
|
fileName: t
|
|
1251
1358
|
};
|
|
1252
|
-
return
|
|
1359
|
+
return o.fire("editor:canvas-exported", ue), ue;
|
|
1253
1360
|
}
|
|
1254
1361
|
if (a) {
|
|
1255
1362
|
const y = {
|
|
1256
1363
|
image: C,
|
|
1257
|
-
format:
|
|
1364
|
+
format: u,
|
|
1258
1365
|
contentType: l,
|
|
1259
1366
|
fileName: t
|
|
1260
1367
|
};
|
|
1261
|
-
return
|
|
1368
|
+
return o.fire("editor:canvas-exported", y), y;
|
|
1262
1369
|
}
|
|
1263
|
-
const D =
|
|
1370
|
+
const D = u === "svg" && !S ? t.replace(/\.[^/.]+$/, ".png") : t, L = {
|
|
1264
1371
|
image: new File([T], D, { type: l }),
|
|
1265
|
-
format:
|
|
1372
|
+
format: u,
|
|
1266
1373
|
contentType: l,
|
|
1267
1374
|
fileName: D
|
|
1268
1375
|
};
|
|
1269
|
-
return
|
|
1376
|
+
return o.fire("editor:canvas-exported", L), L;
|
|
1270
1377
|
} catch (h) {
|
|
1271
1378
|
return this.editor.errorManager.emitError({
|
|
1272
1379
|
origin: "ImageManager",
|
|
1273
1380
|
method: "exportCanvasAsImageFile",
|
|
1274
1381
|
code: "IMAGE_EXPORT_FAILED",
|
|
1275
1382
|
message: `Ошибка экспорта изображения: ${h.message}`,
|
|
1276
|
-
data: { contentType: s, fileName: t, exportAsBase64: a, exportAsBlob:
|
|
1383
|
+
data: { contentType: s, fileName: t, exportAsBase64: a, exportAsBlob: n }
|
|
1277
1384
|
}), null;
|
|
1278
1385
|
}
|
|
1279
1386
|
});
|
|
@@ -1295,8 +1402,8 @@ class O {
|
|
|
1295
1402
|
object: t,
|
|
1296
1403
|
fileName: s = "image.png",
|
|
1297
1404
|
contentType: a = "image/png",
|
|
1298
|
-
exportAsBase64:
|
|
1299
|
-
exportAsBlob:
|
|
1405
|
+
exportAsBase64: n = !1,
|
|
1406
|
+
exportAsBlob: o = !1
|
|
1300
1407
|
} = e, { canvas: i, workerManager: r } = this.editor, d = t || i.getActiveObject();
|
|
1301
1408
|
if (!d)
|
|
1302
1409
|
return this.editor.errorManager.emitError({
|
|
@@ -1304,14 +1411,14 @@ class O {
|
|
|
1304
1411
|
method: "exportObjectAsImageFile",
|
|
1305
1412
|
code: "NO_OBJECT_SELECTED",
|
|
1306
1413
|
message: "Не выбран объект для экспорта",
|
|
1307
|
-
data: { contentType: a, fileName: s, exportAsBase64:
|
|
1414
|
+
data: { contentType: a, fileName: s, exportAsBase64: n, exportAsBlob: o }
|
|
1308
1415
|
}), null;
|
|
1309
1416
|
try {
|
|
1310
|
-
const h =
|
|
1417
|
+
const h = N.getFormatFromContentType(a);
|
|
1311
1418
|
if (h === "svg") {
|
|
1312
|
-
const m = d.toSVG(), p =
|
|
1313
|
-
exportAsBase64:
|
|
1314
|
-
exportAsBlob:
|
|
1419
|
+
const m = d.toSVG(), p = N._exportSVGStringAsFile(m, {
|
|
1420
|
+
exportAsBase64: n,
|
|
1421
|
+
exportAsBlob: o,
|
|
1315
1422
|
fileName: s
|
|
1316
1423
|
}), f = {
|
|
1317
1424
|
object: d,
|
|
@@ -1322,7 +1429,7 @@ class O {
|
|
|
1322
1429
|
};
|
|
1323
1430
|
return i.fire("editor:object-exported", f), f;
|
|
1324
1431
|
}
|
|
1325
|
-
if (
|
|
1432
|
+
if (n && d instanceof Z) {
|
|
1326
1433
|
const m = yield createImageBitmap(d.getElement()), p = yield r.post(
|
|
1327
1434
|
"toDataURL",
|
|
1328
1435
|
{
|
|
@@ -1342,24 +1449,24 @@ class O {
|
|
|
1342
1449
|
}
|
|
1343
1450
|
const l = d.toCanvasElement({
|
|
1344
1451
|
enableRetinaScaling: !1
|
|
1345
|
-
}),
|
|
1452
|
+
}), u = yield new Promise((m, p) => {
|
|
1346
1453
|
l.toBlob((f) => {
|
|
1347
1454
|
f ? m(f) : p(new Error("Failed to create Blob from canvas"));
|
|
1348
1455
|
});
|
|
1349
1456
|
});
|
|
1350
|
-
if (
|
|
1457
|
+
if (o) {
|
|
1351
1458
|
const m = {
|
|
1352
1459
|
object: d,
|
|
1353
|
-
image:
|
|
1460
|
+
image: u,
|
|
1354
1461
|
format: h,
|
|
1355
1462
|
contentType: a,
|
|
1356
1463
|
fileName: s
|
|
1357
1464
|
};
|
|
1358
1465
|
return i.fire("editor:object-exported", m), m;
|
|
1359
1466
|
}
|
|
1360
|
-
const
|
|
1467
|
+
const g = new File([u], s, { type: a }), M = {
|
|
1361
1468
|
object: d,
|
|
1362
|
-
image:
|
|
1469
|
+
image: g,
|
|
1363
1470
|
format: h,
|
|
1364
1471
|
contentType: a,
|
|
1365
1472
|
fileName: s
|
|
@@ -1371,7 +1478,7 @@ class O {
|
|
|
1371
1478
|
method: "exportObjectAsImageFile",
|
|
1372
1479
|
code: "IMAGE_EXPORT_FAILED",
|
|
1373
1480
|
message: `Ошибка экспорта объекта: ${h.message}`,
|
|
1374
|
-
data: { contentType: a, fileName: s, exportAsBase64:
|
|
1481
|
+
data: { contentType: a, fileName: s, exportAsBase64: n, exportAsBlob: o }
|
|
1375
1482
|
}), null;
|
|
1376
1483
|
}
|
|
1377
1484
|
});
|
|
@@ -1387,7 +1494,7 @@ class O {
|
|
|
1387
1494
|
* @returns массив допустимых форматов изображений
|
|
1388
1495
|
*/
|
|
1389
1496
|
getAllowedFormatsFromContentTypes() {
|
|
1390
|
-
return this.acceptContentTypes.map((e) =>
|
|
1497
|
+
return this.acceptContentTypes.map((e) => N.getFormatFromContentType(e)).filter((e) => e);
|
|
1391
1498
|
}
|
|
1392
1499
|
/**
|
|
1393
1500
|
* Проверяет, является ли contentType допустимым типом изображения.
|
|
@@ -1438,11 +1545,11 @@ class O {
|
|
|
1438
1545
|
getContentTypeFromExtension(e) {
|
|
1439
1546
|
var t;
|
|
1440
1547
|
try {
|
|
1441
|
-
const a = (t = new URL(e).pathname.split(".").pop()) == null ? void 0 : t.toLowerCase(),
|
|
1442
|
-
return this.acceptContentTypes.forEach((
|
|
1443
|
-
const i =
|
|
1444
|
-
i && (
|
|
1445
|
-
}), a &&
|
|
1548
|
+
const a = (t = new URL(e).pathname.split(".").pop()) == null ? void 0 : t.toLowerCase(), n = {};
|
|
1549
|
+
return this.acceptContentTypes.forEach((o) => {
|
|
1550
|
+
const i = N.getFormatFromContentType(o);
|
|
1551
|
+
i && (n[i] = o);
|
|
1552
|
+
}), a && n[a] || "application/octet-stream";
|
|
1446
1553
|
} catch (s) {
|
|
1447
1554
|
return console.warn("Не удалось определить расширение из URL:", e, s), "application/octet-stream";
|
|
1448
1555
|
}
|
|
@@ -1460,8 +1567,8 @@ class O {
|
|
|
1460
1567
|
}) {
|
|
1461
1568
|
const { montageArea: s } = this.editor;
|
|
1462
1569
|
if (!s || !e) return 1;
|
|
1463
|
-
const a = s.width,
|
|
1464
|
-
return t === "contain" || t === "image-contain" ? Math.min(a /
|
|
1570
|
+
const a = s.width, n = s.height, { width: o, height: i } = e;
|
|
1571
|
+
return t === "contain" || t === "image-contain" ? Math.min(a / o, n / i) : t === "cover" || t === "image-cover" ? Math.max(a / o, n / i) : 1;
|
|
1465
1572
|
}
|
|
1466
1573
|
/**
|
|
1467
1574
|
* Преобразует SVG-строку в Blob, файл, или base64
|
|
@@ -1493,11 +1600,11 @@ class O {
|
|
|
1493
1600
|
return t ? t[1] : "";
|
|
1494
1601
|
}
|
|
1495
1602
|
}
|
|
1496
|
-
const x = (c, e, t) => Math.max(Math.min(c, t), e),
|
|
1497
|
-
function
|
|
1603
|
+
const x = (c, e, t) => Math.max(Math.min(c, t), e), Ce = (c, e) => c * e, ft = (c, e) => new X(c / 2, e / 2);
|
|
1604
|
+
function Mt(c) {
|
|
1498
1605
|
return ((c == null ? void 0 : c.type) === "image" || (c == null ? void 0 : c.format) === "svg") && typeof (c == null ? void 0 : c.width) == "number" && typeof (c == null ? void 0 : c.height) == "number";
|
|
1499
1606
|
}
|
|
1500
|
-
class
|
|
1607
|
+
class mt {
|
|
1501
1608
|
/**
|
|
1502
1609
|
* @param options
|
|
1503
1610
|
* @param options.editor – экземпляр редактора
|
|
@@ -1525,17 +1632,17 @@ class ht {
|
|
|
1525
1632
|
var M;
|
|
1526
1633
|
if (!e) return;
|
|
1527
1634
|
const {
|
|
1528
|
-
canvas:
|
|
1529
|
-
montageArea:
|
|
1635
|
+
canvas: n,
|
|
1636
|
+
montageArea: o,
|
|
1530
1637
|
options: { canvasBackstoreWidth: i }
|
|
1531
|
-
} = this.editor, { width: r, height: d } =
|
|
1532
|
-
if (!i || i === "auto" || a ? this.adaptCanvasToContainer() : i ? this.setCanvasBackstoreWidth(Number(i)) : this.setCanvasBackstoreWidth(h),
|
|
1533
|
-
const m = h / r, p =
|
|
1638
|
+
} = this.editor, { width: r, height: d } = o, h = x(Number(e), U, k);
|
|
1639
|
+
if (!i || i === "auto" || a ? this.adaptCanvasToContainer() : i ? this.setCanvasBackstoreWidth(Number(i)) : this.setCanvasBackstoreWidth(h), o.set({ width: h }), (M = n.clipPath) == null || M.set({ width: h }), t) {
|
|
1640
|
+
const m = h / r, p = Ce(d, m);
|
|
1534
1641
|
this.setResolutionHeight(p);
|
|
1535
1642
|
return;
|
|
1536
1643
|
}
|
|
1537
|
-
const { left: l, top:
|
|
1538
|
-
|
|
1644
|
+
const { left: l, top: u } = this.getObjectDefaultCoords(o), g = n.getZoom();
|
|
1645
|
+
n.setViewportTransform([g, 0, 0, g, l, u]), this.centerMontageArea(), s || this.editor.historyManager.saveState(), n.fire("editor:resolution-width-changed", {
|
|
1539
1646
|
width: h,
|
|
1540
1647
|
preserveProportional: t,
|
|
1541
1648
|
withoutSave: s,
|
|
@@ -1555,17 +1662,17 @@ class ht {
|
|
|
1555
1662
|
var M;
|
|
1556
1663
|
if (!e) return;
|
|
1557
1664
|
const {
|
|
1558
|
-
canvas:
|
|
1559
|
-
montageArea:
|
|
1665
|
+
canvas: n,
|
|
1666
|
+
montageArea: o,
|
|
1560
1667
|
options: { canvasBackstoreHeight: i }
|
|
1561
|
-
} = this.editor, { width: r, height: d } =
|
|
1562
|
-
if (!i || i === "auto" || a ? this.adaptCanvasToContainer() : i ? this.setCanvasBackstoreHeight(Number(i)) : this.setCanvasBackstoreHeight(h),
|
|
1563
|
-
const m = h / d, p =
|
|
1668
|
+
} = this.editor, { width: r, height: d } = o, h = x(Number(e), z, _);
|
|
1669
|
+
if (!i || i === "auto" || a ? this.adaptCanvasToContainer() : i ? this.setCanvasBackstoreHeight(Number(i)) : this.setCanvasBackstoreHeight(h), o.set({ height: h }), (M = n.clipPath) == null || M.set({ height: h }), t) {
|
|
1670
|
+
const m = h / d, p = Ce(r, m);
|
|
1564
1671
|
this.setResolutionWidth(p);
|
|
1565
1672
|
return;
|
|
1566
1673
|
}
|
|
1567
|
-
const { left: l, top:
|
|
1568
|
-
|
|
1674
|
+
const { left: l, top: u } = this.getObjectDefaultCoords(o), g = n.getZoom();
|
|
1675
|
+
n.setViewportTransform([g, 0, 0, g, l, u]), this.centerMontageArea(), s || this.editor.historyManager.saveState(), n.fire("editor:resolution-height-changed", {
|
|
1569
1676
|
height: h,
|
|
1570
1677
|
preserveProportional: t,
|
|
1571
1678
|
withoutSave: s,
|
|
@@ -1578,7 +1685,7 @@ class ht {
|
|
|
1578
1685
|
*/
|
|
1579
1686
|
centerMontageArea() {
|
|
1580
1687
|
var r;
|
|
1581
|
-
const { canvas: e, montageArea: t } = this.editor, s = e.getWidth(), a = e.getHeight(),
|
|
1688
|
+
const { canvas: e, montageArea: t } = this.editor, s = e.getWidth(), a = e.getHeight(), n = e.getZoom(), o = ft(s, a);
|
|
1582
1689
|
t.set({
|
|
1583
1690
|
left: s / 2,
|
|
1584
1691
|
top: a / 2
|
|
@@ -1587,7 +1694,7 @@ class ht {
|
|
|
1587
1694
|
top: a / 2
|
|
1588
1695
|
}), e.renderAll();
|
|
1589
1696
|
const i = e.viewportTransform;
|
|
1590
|
-
i[4] = s / 2 -
|
|
1697
|
+
i[4] = s / 2 - o.x * n, i[5] = a / 2 - o.y * n, e.setViewportTransform(i), e.renderAll();
|
|
1591
1698
|
}
|
|
1592
1699
|
/**
|
|
1593
1700
|
* Метод для получения координат объекта с учетом текущего зума
|
|
@@ -1603,7 +1710,7 @@ class ht {
|
|
|
1603
1710
|
code: "NO_ACTIVE_OBJECT",
|
|
1604
1711
|
message: "Не выбран объект для получения координат"
|
|
1605
1712
|
}), { left: 0, top: 0 };
|
|
1606
|
-
const { width: a, height:
|
|
1713
|
+
const { width: a, height: n } = s, o = t.getZoom(), i = (a - a * o) / 2, r = (n - n * o) / 2;
|
|
1607
1714
|
return { left: i, top: r };
|
|
1608
1715
|
}
|
|
1609
1716
|
/**
|
|
@@ -1620,7 +1727,7 @@ class ht {
|
|
|
1620
1727
|
*/
|
|
1621
1728
|
setCanvasBackstoreHeight(e) {
|
|
1622
1729
|
if (!e || typeof e != "number") return;
|
|
1623
|
-
const t = x(e, z,
|
|
1730
|
+
const t = x(e, z, _);
|
|
1624
1731
|
this.editor.canvas.setDimensions({ height: t }, { backstoreOnly: !0 });
|
|
1625
1732
|
}
|
|
1626
1733
|
/**
|
|
@@ -1629,8 +1736,8 @@ class ht {
|
|
|
1629
1736
|
* с учётом минимальных и максимальных значений.
|
|
1630
1737
|
*/
|
|
1631
1738
|
adaptCanvasToContainer() {
|
|
1632
|
-
const { canvas: e } = this.editor, t = this.getEditorContainer(), s = t.clientWidth, a = t.clientHeight,
|
|
1633
|
-
e.setDimensions({ width:
|
|
1739
|
+
const { canvas: e } = this.editor, t = this.getEditorContainer(), s = t.clientWidth, a = t.clientHeight, n = x(s, U, k), o = x(a, z, _);
|
|
1740
|
+
e.setDimensions({ width: n, height: o }, { backstoreOnly: !0 });
|
|
1634
1741
|
}
|
|
1635
1742
|
/**
|
|
1636
1743
|
* Обновляет размеры канваса без изменения позиций объектов.
|
|
@@ -1645,9 +1752,9 @@ class ht {
|
|
|
1645
1752
|
width: s,
|
|
1646
1753
|
height: a
|
|
1647
1754
|
}
|
|
1648
|
-
} = this.editor,
|
|
1755
|
+
} = this.editor, n = t.left, o = t.top;
|
|
1649
1756
|
this.setResolutionWidth(s, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.setResolutionHeight(a, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.centerMontageArea();
|
|
1650
|
-
const i = t.left -
|
|
1757
|
+
const i = t.left - n, r = t.top - o;
|
|
1651
1758
|
if (i !== 0 || r !== 0) {
|
|
1652
1759
|
const d = e.getActiveObject(), h = [];
|
|
1653
1760
|
if ((d == null ? void 0 : d.type) === "activeselection") {
|
|
@@ -1781,32 +1888,32 @@ class ht {
|
|
|
1781
1888
|
*/
|
|
1782
1889
|
setDisplayDimension({ element: e = "canvas", dimension: t, value: s } = {}) {
|
|
1783
1890
|
if (!s) return;
|
|
1784
|
-
const { canvas: a } = this.editor,
|
|
1891
|
+
const { canvas: a } = this.editor, n = [];
|
|
1785
1892
|
switch (e) {
|
|
1786
1893
|
case "canvas":
|
|
1787
|
-
|
|
1894
|
+
n.push(a.lowerCanvasEl, a.upperCanvasEl);
|
|
1788
1895
|
break;
|
|
1789
1896
|
case "wrapper":
|
|
1790
|
-
|
|
1897
|
+
n.push(a.wrapperEl);
|
|
1791
1898
|
break;
|
|
1792
1899
|
case "container":
|
|
1793
|
-
|
|
1900
|
+
n.push(this.getEditorContainer());
|
|
1794
1901
|
break;
|
|
1795
1902
|
default:
|
|
1796
|
-
|
|
1903
|
+
n.push(a.lowerCanvasEl, a.upperCanvasEl);
|
|
1797
1904
|
}
|
|
1798
|
-
const
|
|
1905
|
+
const o = t === "width" ? "width" : "height";
|
|
1799
1906
|
if (typeof s == "string") {
|
|
1800
|
-
|
|
1801
|
-
r.style[
|
|
1907
|
+
n.forEach((r) => {
|
|
1908
|
+
r.style[o] = s;
|
|
1802
1909
|
});
|
|
1803
1910
|
return;
|
|
1804
1911
|
}
|
|
1805
1912
|
if (isNaN(s)) return;
|
|
1806
1913
|
const i = `${s}px`;
|
|
1807
|
-
|
|
1808
|
-
r.style[
|
|
1809
|
-
}), a.fire(`editor:display-${e}-${
|
|
1914
|
+
n.forEach((r) => {
|
|
1915
|
+
r.style[o] = i;
|
|
1916
|
+
}), a.fire(`editor:display-${e}-${o}-changed`, {
|
|
1810
1917
|
element: e,
|
|
1811
1918
|
value: s
|
|
1812
1919
|
});
|
|
@@ -1822,27 +1929,27 @@ class ht {
|
|
|
1822
1929
|
scaleMontageAreaToImage({ object: e, preserveAspectRatio: t, withoutSave: s } = {}) {
|
|
1823
1930
|
const {
|
|
1824
1931
|
canvas: a,
|
|
1825
|
-
montageArea:
|
|
1826
|
-
transformManager:
|
|
1932
|
+
montageArea: n,
|
|
1933
|
+
transformManager: o,
|
|
1827
1934
|
options: {
|
|
1828
1935
|
montageAreaWidth: i,
|
|
1829
1936
|
montageAreaHeight: r
|
|
1830
1937
|
}
|
|
1831
1938
|
} = this.editor, d = e || a.getActiveObject();
|
|
1832
|
-
if (!
|
|
1939
|
+
if (!Mt(d)) return;
|
|
1833
1940
|
const { width: h, height: l } = d;
|
|
1834
|
-
let
|
|
1941
|
+
let u = Math.min(h, k), g = Math.min(l, _);
|
|
1835
1942
|
if (t) {
|
|
1836
1943
|
const {
|
|
1837
1944
|
width: M,
|
|
1838
1945
|
height: m
|
|
1839
|
-
} =
|
|
1840
|
-
|
|
1946
|
+
} = n, p = h / M, f = l / m, b = Math.max(p, f);
|
|
1947
|
+
u = M * b, g = m * b;
|
|
1841
1948
|
}
|
|
1842
|
-
this.setResolutionWidth(
|
|
1949
|
+
this.setResolutionWidth(u, { withoutSave: !0 }), this.setResolutionHeight(g, { withoutSave: !0 }), this.editor.backgroundManager.backgroundObject && this.editor.backgroundManager.refresh(), (h > i || l > r) && o.calculateAndApplyDefaultZoom(), o.resetObject({ object: d, withoutSave: !0 }), a.centerObject(d), a.renderAll(), s || this.editor.historyManager.saveState(), a.fire("editor:montage-area-scaled-to-image", {
|
|
1843
1950
|
object: d,
|
|
1844
|
-
width:
|
|
1845
|
-
height:
|
|
1951
|
+
width: u,
|
|
1952
|
+
height: g,
|
|
1846
1953
|
preserveAspectRatio: t,
|
|
1847
1954
|
withoutSave: s
|
|
1848
1955
|
});
|
|
@@ -1867,11 +1974,11 @@ class ht {
|
|
|
1867
1974
|
transformManager: s,
|
|
1868
1975
|
historyManager: a,
|
|
1869
1976
|
options: {
|
|
1870
|
-
montageAreaWidth:
|
|
1871
|
-
montageAreaHeight:
|
|
1977
|
+
montageAreaWidth: n,
|
|
1978
|
+
montageAreaHeight: o
|
|
1872
1979
|
}
|
|
1873
1980
|
} = this.editor;
|
|
1874
|
-
s.resetZoom(), this.setResolutionWidth(
|
|
1981
|
+
s.resetZoom(), this.setResolutionWidth(n, { withoutSave: !0 }), this.setResolutionHeight(o, { withoutSave: !0 }), t.renderAll(), s.resetObjects(), e || a.saveState(), t.fire("editor:default-scale-set");
|
|
1875
1982
|
}
|
|
1876
1983
|
/**
|
|
1877
1984
|
* Получение всех объектов внутри монтажной области редактора
|
|
@@ -1885,13 +1992,13 @@ class ht {
|
|
|
1885
1992
|
backgroundManager: { backgroundObject: a }
|
|
1886
1993
|
} = this.editor;
|
|
1887
1994
|
return e.getObjects().filter(
|
|
1888
|
-
(
|
|
1995
|
+
(o) => o.id !== t.id && o.id !== (s == null ? void 0 : s.id) && o.id !== (a == null ? void 0 : a.id)
|
|
1889
1996
|
);
|
|
1890
1997
|
}
|
|
1891
1998
|
}
|
|
1892
|
-
class
|
|
1999
|
+
class bt {
|
|
1893
2000
|
constructor({ editor: e }) {
|
|
1894
|
-
this.editor = e, this.options = e.options, this.minZoom = this.options.minZoom ||
|
|
2001
|
+
this.editor = e, this.options = e.options, this.minZoom = this.options.minZoom || lt, this.maxZoom = this.options.maxZoom || ht, this.defaultZoom = this.options.defaultScale;
|
|
1895
2002
|
}
|
|
1896
2003
|
/**
|
|
1897
2004
|
* Метод рассчитывает и применяет зум по умолчанию для монтажной области редактора.
|
|
@@ -1901,7 +2008,7 @@ class gt {
|
|
|
1901
2008
|
* @param scale - Желаемый масштаб относительно размеров контейнера редактора.
|
|
1902
2009
|
*/
|
|
1903
2010
|
calculateAndApplyDefaultZoom(e = this.options.defaultScale) {
|
|
1904
|
-
const { canvas: t } = this.editor, s = t.editorContainer, a = s.clientWidth,
|
|
2011
|
+
const { canvas: t } = this.editor, s = t.editorContainer, a = s.clientWidth, n = s.clientHeight, { width: o, height: i } = this.editor.montageArea, r = a / o * e, d = n / i * e;
|
|
1905
2012
|
this.defaultZoom = Math.min(r, d), this.setZoom();
|
|
1906
2013
|
}
|
|
1907
2014
|
/**
|
|
@@ -1913,13 +2020,13 @@ class gt {
|
|
|
1913
2020
|
* @fires editor:zoom-changed
|
|
1914
2021
|
* Если передавать координаты курсора, то нужно быть аккуратнее, так как юзер может выйти за пределы рабочей области
|
|
1915
2022
|
*/
|
|
1916
|
-
zoom(e =
|
|
1917
|
-
var
|
|
2023
|
+
zoom(e = ut, t = {}) {
|
|
2024
|
+
var u, g;
|
|
1918
2025
|
if (!e) return;
|
|
1919
|
-
const { minZoom: s, maxZoom: a } = this, { canvas:
|
|
1920
|
-
let l = Number((
|
|
1921
|
-
l > a && (l = a), l < s && (l = s),
|
|
1922
|
-
currentZoom:
|
|
2026
|
+
const { minZoom: s, maxZoom: a } = this, { canvas: n } = this.editor, o = n.getZoom(), i = n.getCenterPoint(), r = (u = t.pointX) != null ? u : i.x, d = (g = t.pointY) != null ? g : i.y, h = new X(r, d);
|
|
2027
|
+
let l = Number((o + Number(e)).toFixed(2));
|
|
2028
|
+
l > a && (l = a), l < s && (l = s), n.zoomToPoint(h, l), n.fire("editor:zoom-changed", {
|
|
2029
|
+
currentZoom: n.getZoom(),
|
|
1923
2030
|
zoom: l,
|
|
1924
2031
|
point: h
|
|
1925
2032
|
});
|
|
@@ -1930,12 +2037,12 @@ class gt {
|
|
|
1930
2037
|
* @fires editor:zoom-changed
|
|
1931
2038
|
*/
|
|
1932
2039
|
setZoom(e = this.defaultZoom) {
|
|
1933
|
-
const { minZoom: t, maxZoom: s } = this, { canvas: a } = this.editor,
|
|
1934
|
-
let
|
|
1935
|
-
e > s && (
|
|
2040
|
+
const { minZoom: t, maxZoom: s } = this, { canvas: a } = this.editor, n = new X(a.getCenterPoint());
|
|
2041
|
+
let o = e;
|
|
2042
|
+
e > s && (o = s), e < t && (o = t), a.zoomToPoint(n, o), a.fire("editor:zoom-changed", {
|
|
1936
2043
|
currentZoom: a.getZoom(),
|
|
1937
|
-
zoom:
|
|
1938
|
-
point:
|
|
2044
|
+
zoom: o,
|
|
2045
|
+
point: n
|
|
1939
2046
|
});
|
|
1940
2047
|
}
|
|
1941
2048
|
/**
|
|
@@ -1956,14 +2063,14 @@ class gt {
|
|
|
1956
2063
|
* @param options.withoutSave - Не сохранять состояние
|
|
1957
2064
|
* @fires editor:object-rotated
|
|
1958
2065
|
*/
|
|
1959
|
-
rotate(e =
|
|
1960
|
-
const { canvas: s, historyManager: a } = this.editor,
|
|
1961
|
-
if (!
|
|
1962
|
-
const
|
|
1963
|
-
|
|
1964
|
-
object:
|
|
2066
|
+
rotate(e = gt, { withoutSave: t } = {}) {
|
|
2067
|
+
const { canvas: s, historyManager: a } = this.editor, n = s.getActiveObject();
|
|
2068
|
+
if (!n) return;
|
|
2069
|
+
const o = n.angle + e;
|
|
2070
|
+
n.rotate(o), n.setCoords(), s.renderAll(), t || a.saveState(), s.fire("editor:object-rotated", {
|
|
2071
|
+
object: n,
|
|
1965
2072
|
withoutSave: t,
|
|
1966
|
-
angle:
|
|
2073
|
+
angle: o
|
|
1967
2074
|
});
|
|
1968
2075
|
}
|
|
1969
2076
|
/**
|
|
@@ -2005,11 +2112,11 @@ class gt {
|
|
|
2005
2112
|
opacity: t = 1,
|
|
2006
2113
|
withoutSave: s
|
|
2007
2114
|
} = {}) {
|
|
2008
|
-
const { canvas: a, historyManager:
|
|
2009
|
-
|
|
2115
|
+
const { canvas: a, historyManager: n } = this.editor, o = e || a.getActiveObject();
|
|
2116
|
+
o && (o instanceof v ? o.getObjects().forEach((i) => {
|
|
2010
2117
|
i.set("opacity", t);
|
|
2011
|
-
}) :
|
|
2012
|
-
object:
|
|
2118
|
+
}) : o.set("opacity", t), a.renderAll(), s || n.saveState(), a.fire("editor:object-opacity-changed", {
|
|
2119
|
+
object: o,
|
|
2013
2120
|
opacity: t,
|
|
2014
2121
|
withoutSave: s
|
|
2015
2122
|
}));
|
|
@@ -2031,18 +2138,18 @@ class gt {
|
|
|
2031
2138
|
withoutSave: s,
|
|
2032
2139
|
fitAsOneObject: a
|
|
2033
2140
|
} = {}) {
|
|
2034
|
-
const { canvas:
|
|
2141
|
+
const { canvas: n, historyManager: o } = this.editor, i = e || n.getActiveObject();
|
|
2035
2142
|
if (i) {
|
|
2036
2143
|
if (i instanceof v && !a) {
|
|
2037
2144
|
const r = i.getObjects();
|
|
2038
|
-
|
|
2145
|
+
n.discardActiveObject(), r.forEach((h) => {
|
|
2039
2146
|
this._fitSingleObject(h, t);
|
|
2040
2147
|
});
|
|
2041
|
-
const d = new v(r, { canvas:
|
|
2042
|
-
|
|
2148
|
+
const d = new v(r, { canvas: n });
|
|
2149
|
+
n.setActiveObject(d);
|
|
2043
2150
|
} else
|
|
2044
2151
|
this._fitSingleObject(i, t);
|
|
2045
|
-
|
|
2152
|
+
n.renderAll(), s || o.saveState(), n.fire("editor:object-fitted", {
|
|
2046
2153
|
object: i,
|
|
2047
2154
|
type: t,
|
|
2048
2155
|
withoutSave: s,
|
|
@@ -2057,7 +2164,7 @@ class gt {
|
|
|
2057
2164
|
* @private
|
|
2058
2165
|
*/
|
|
2059
2166
|
_fitSingleObject(e, t) {
|
|
2060
|
-
const { canvas: s, montageArea: a } = this.editor, { width:
|
|
2167
|
+
const { canvas: s, montageArea: a } = this.editor, { width: n, height: o, scaleX: i = 1, scaleY: r = 1, angle: d = 0 } = e, h = n * Math.abs(i), l = o * Math.abs(r), u = d * Math.PI / 180, g = Math.abs(Math.cos(u)), M = Math.abs(Math.sin(u)), m = h * g + l * M, p = h * M + l * g, f = a.width, b = a.height;
|
|
2061
2168
|
let S;
|
|
2062
2169
|
t === "contain" ? S = Math.min(f / m, b / p) : S = Math.max(f / m, b / p), e.set({
|
|
2063
2170
|
scaleX: i * S,
|
|
@@ -2083,8 +2190,8 @@ class gt {
|
|
|
2083
2190
|
resetObject({ object: e, alwaysFitObject: t = !1, withoutSave: s = !1 } = {}) {
|
|
2084
2191
|
const {
|
|
2085
2192
|
canvas: a,
|
|
2086
|
-
montageArea:
|
|
2087
|
-
imageManager:
|
|
2193
|
+
montageArea: n,
|
|
2194
|
+
imageManager: o,
|
|
2088
2195
|
historyManager: i,
|
|
2089
2196
|
options: { scaleType: r }
|
|
2090
2197
|
} = this.editor, d = e || a.getActiveObject();
|
|
@@ -2098,11 +2205,11 @@ class gt {
|
|
|
2098
2205
|
}), t)
|
|
2099
2206
|
this.fitObject({ object: d, withoutSave: !0, fitAsOneObject: !0 });
|
|
2100
2207
|
else {
|
|
2101
|
-
const { width: l, height:
|
|
2208
|
+
const { width: l, height: u } = n, { width: g, height: M } = d, m = o.calculateScaleFactor({
|
|
2102
2209
|
imageObject: d,
|
|
2103
2210
|
scaleType: r
|
|
2104
2211
|
});
|
|
2105
|
-
r === "contain" && m < 1 || r === "cover" && (
|
|
2212
|
+
r === "contain" && m < 1 || r === "cover" && (g > l || M > u) ? this.fitObject({ object: d, withoutSave: !0, fitAsOneObject: !0 }) : d.set({ scaleX: 1, scaleY: 1 });
|
|
2106
2213
|
}
|
|
2107
2214
|
d.set({ flipX: !1, flipY: !1, angle: 0 }), a.centerObject(d), a.renderAll(), i.resumeHistory(), s || i.saveState(), a.fire("editor:object-reset", {
|
|
2108
2215
|
object: d,
|
|
@@ -2111,7 +2218,7 @@ class gt {
|
|
|
2111
2218
|
});
|
|
2112
2219
|
}
|
|
2113
2220
|
}
|
|
2114
|
-
class
|
|
2221
|
+
class jt {
|
|
2115
2222
|
constructor({ editor: e }) {
|
|
2116
2223
|
this.editor = e, this.isBlocked = !1, this.overlayMask = null, this._createOverlay();
|
|
2117
2224
|
}
|
|
@@ -2141,8 +2248,8 @@ class ut {
|
|
|
2141
2248
|
const { canvas: e, montageArea: t, historyManager: s } = this.editor;
|
|
2142
2249
|
if (!t || !this.overlayMask) return;
|
|
2143
2250
|
s.suspendHistory(), t.setCoords();
|
|
2144
|
-
const { left: a, top:
|
|
2145
|
-
this.overlayMask.set({ left: a, top:
|
|
2251
|
+
const { left: a, top: n, width: o, height: i } = t.getBoundingRect();
|
|
2252
|
+
this.overlayMask.set({ left: a, top: n, width: o, height: i }), e.discardActiveObject(), this.editor.layerManager.bringToFront(this.overlayMask, { withoutSave: !0 }), s.resumeHistory();
|
|
2146
2253
|
}
|
|
2147
2254
|
/**
|
|
2148
2255
|
* Выключает редактор:
|
|
@@ -2185,26 +2292,26 @@ class R {
|
|
|
2185
2292
|
}) {
|
|
2186
2293
|
var a;
|
|
2187
2294
|
try {
|
|
2188
|
-
const { historyManager:
|
|
2189
|
-
if (
|
|
2190
|
-
if (
|
|
2191
|
-
|
|
2295
|
+
const { historyManager: n } = this.editor, { backgroundObject: o } = this;
|
|
2296
|
+
if (n.suspendHistory(), o && o.backgroundType === "color") {
|
|
2297
|
+
if (o.fill === e) {
|
|
2298
|
+
n.resumeHistory();
|
|
2192
2299
|
return;
|
|
2193
2300
|
}
|
|
2194
|
-
|
|
2301
|
+
o.set({
|
|
2195
2302
|
fill: e,
|
|
2196
2303
|
backgroundId: `background-${A()}`
|
|
2197
2304
|
}), this.editor.canvas.requestRenderAll();
|
|
2198
2305
|
} else
|
|
2199
2306
|
this._removeCurrentBackground(), this._createColorBackground(e);
|
|
2200
|
-
(a = this.backgroundObject) == null || a.set({ customData: t }), this.editor.canvas.fire("editor:background:changed", { type: "color", color: e }),
|
|
2201
|
-
} catch (
|
|
2307
|
+
(a = this.backgroundObject) == null || a.set({ customData: t }), this.editor.canvas.fire("editor:background:changed", { type: "color", color: e }), n.resumeHistory(), s || n.saveState();
|
|
2308
|
+
} catch (n) {
|
|
2202
2309
|
this.editor.errorManager.emitError({
|
|
2203
2310
|
code: "BACKGROUND_CREATION_FAILED",
|
|
2204
2311
|
origin: "BackgroundManager",
|
|
2205
2312
|
method: "setColorBackground",
|
|
2206
2313
|
message: "Не удалось установить цветовой фон",
|
|
2207
|
-
data: { error:
|
|
2314
|
+
data: { error: n }
|
|
2208
2315
|
});
|
|
2209
2316
|
}
|
|
2210
2317
|
}
|
|
@@ -2221,14 +2328,14 @@ class R {
|
|
|
2221
2328
|
}) {
|
|
2222
2329
|
var a;
|
|
2223
2330
|
try {
|
|
2224
|
-
const { historyManager:
|
|
2225
|
-
if (
|
|
2331
|
+
const { historyManager: n } = this.editor, { backgroundObject: o } = this;
|
|
2332
|
+
if (n.suspendHistory(), o && o.backgroundType === "gradient") {
|
|
2226
2333
|
const i = R._createFabricGradient(e);
|
|
2227
|
-
if (R._isGradientEqual(
|
|
2228
|
-
|
|
2334
|
+
if (R._isGradientEqual(o.fill, i)) {
|
|
2335
|
+
n.resumeHistory();
|
|
2229
2336
|
return;
|
|
2230
2337
|
}
|
|
2231
|
-
|
|
2338
|
+
o.set({
|
|
2232
2339
|
fill: i,
|
|
2233
2340
|
backgroundId: `background-${A()}`
|
|
2234
2341
|
}), this.editor.canvas.requestRenderAll();
|
|
@@ -2237,14 +2344,14 @@ class R {
|
|
|
2237
2344
|
(a = this.backgroundObject) == null || a.set({ customData: t }), this.editor.canvas.fire("editor:background:changed", {
|
|
2238
2345
|
type: "gradient",
|
|
2239
2346
|
gradientParams: e
|
|
2240
|
-
}),
|
|
2241
|
-
} catch (
|
|
2347
|
+
}), n.resumeHistory(), s || n.saveState();
|
|
2348
|
+
} catch (n) {
|
|
2242
2349
|
this.editor.errorManager.emitError({
|
|
2243
2350
|
code: "BACKGROUND_CREATION_FAILED",
|
|
2244
2351
|
origin: "BackgroundManager",
|
|
2245
2352
|
method: "setGradientBackground",
|
|
2246
2353
|
message: "Не удалось установить градиентный фон",
|
|
2247
|
-
data: { error:
|
|
2354
|
+
data: { error: n }
|
|
2248
2355
|
});
|
|
2249
2356
|
}
|
|
2250
2357
|
}
|
|
@@ -2257,8 +2364,8 @@ class R {
|
|
|
2257
2364
|
startColor: t,
|
|
2258
2365
|
endColor: s,
|
|
2259
2366
|
startPosition: a,
|
|
2260
|
-
endPosition:
|
|
2261
|
-
customData:
|
|
2367
|
+
endPosition: n,
|
|
2368
|
+
customData: o = {},
|
|
2262
2369
|
withoutSave: i = !1
|
|
2263
2370
|
}) {
|
|
2264
2371
|
this.setGradientBackground({
|
|
@@ -2268,9 +2375,9 @@ class R {
|
|
|
2268
2375
|
startColor: t,
|
|
2269
2376
|
endColor: s,
|
|
2270
2377
|
startPosition: a,
|
|
2271
|
-
endPosition:
|
|
2378
|
+
endPosition: n
|
|
2272
2379
|
},
|
|
2273
|
-
customData:
|
|
2380
|
+
customData: o,
|
|
2274
2381
|
withoutSave: i
|
|
2275
2382
|
});
|
|
2276
2383
|
}
|
|
@@ -2283,8 +2390,8 @@ class R {
|
|
|
2283
2390
|
centerY: t,
|
|
2284
2391
|
radius: s,
|
|
2285
2392
|
startColor: a,
|
|
2286
|
-
endColor:
|
|
2287
|
-
startPosition:
|
|
2393
|
+
endColor: n,
|
|
2394
|
+
startPosition: o,
|
|
2288
2395
|
endPosition: i,
|
|
2289
2396
|
customData: r = {},
|
|
2290
2397
|
withoutSave: d = !1
|
|
@@ -2296,8 +2403,8 @@ class R {
|
|
|
2296
2403
|
centerY: t,
|
|
2297
2404
|
radius: s,
|
|
2298
2405
|
startColor: a,
|
|
2299
|
-
endColor:
|
|
2300
|
-
startPosition:
|
|
2406
|
+
endColor: n,
|
|
2407
|
+
startPosition: o,
|
|
2301
2408
|
endPosition: i
|
|
2302
2409
|
},
|
|
2303
2410
|
customData: r,
|
|
@@ -2317,19 +2424,19 @@ class R {
|
|
|
2317
2424
|
withoutSave: s = !1
|
|
2318
2425
|
}) {
|
|
2319
2426
|
try {
|
|
2320
|
-
const { historyManager:
|
|
2321
|
-
|
|
2427
|
+
const { historyManager: n } = this.editor;
|
|
2428
|
+
n.suspendHistory(), yield this._createImageBackground(e, t), this.editor.canvas.fire("editor:background:changed", {
|
|
2322
2429
|
type: "image",
|
|
2323
2430
|
imageSource: e,
|
|
2324
2431
|
backgroundObject: this.backgroundObject
|
|
2325
|
-
}),
|
|
2326
|
-
} catch (
|
|
2432
|
+
}), n.resumeHistory(), s || n.saveState();
|
|
2433
|
+
} catch (n) {
|
|
2327
2434
|
this.editor.errorManager.emitError({
|
|
2328
2435
|
code: "BACKGROUND_CREATION_FAILED",
|
|
2329
2436
|
origin: "BackgroundManager",
|
|
2330
2437
|
method: "setImageBackground",
|
|
2331
2438
|
message: "Не удалось установить изображение в качестве фона",
|
|
2332
|
-
data: { error:
|
|
2439
|
+
data: { error: n }
|
|
2333
2440
|
});
|
|
2334
2441
|
}
|
|
2335
2442
|
});
|
|
@@ -2361,8 +2468,8 @@ class R {
|
|
|
2361
2468
|
const { canvas: e, montageArea: t, historyManager: s } = this.editor;
|
|
2362
2469
|
if (!t || !this.backgroundObject) return;
|
|
2363
2470
|
s.suspendHistory(), this.editor.transformManager.fitObject({ object: this.backgroundObject, withoutSave: !0, type: "cover" });
|
|
2364
|
-
const a = e.getObjects(),
|
|
2365
|
-
this.backgroundObject &&
|
|
2471
|
+
const a = e.getObjects(), n = a.indexOf(t), o = a.indexOf(this.backgroundObject);
|
|
2472
|
+
this.backgroundObject && o !== n + 1 && e.moveObjectTo(this.backgroundObject, n + 1), e.requestRenderAll(), s.resumeHistory();
|
|
2366
2473
|
}
|
|
2367
2474
|
/**
|
|
2368
2475
|
* Создает цветовой фон.
|
|
@@ -2442,18 +2549,18 @@ class R {
|
|
|
2442
2549
|
startColor: t,
|
|
2443
2550
|
endColor: s,
|
|
2444
2551
|
startPosition: a = 0,
|
|
2445
|
-
endPosition:
|
|
2446
|
-
} = e,
|
|
2552
|
+
endPosition: n = 100
|
|
2553
|
+
} = e, o = [
|
|
2447
2554
|
{ offset: a / 100, color: t },
|
|
2448
|
-
{ offset:
|
|
2555
|
+
{ offset: n / 100, color: s }
|
|
2449
2556
|
];
|
|
2450
2557
|
if (e.type === "linear") {
|
|
2451
|
-
const l = e.angle * Math.PI / 180,
|
|
2452
|
-
return new
|
|
2558
|
+
const l = e.angle * Math.PI / 180, u = R._angleToCoords(l);
|
|
2559
|
+
return new je({
|
|
2453
2560
|
type: "linear",
|
|
2454
2561
|
gradientUnits: "percentage",
|
|
2455
|
-
coords:
|
|
2456
|
-
colorStops:
|
|
2562
|
+
coords: u,
|
|
2563
|
+
colorStops: o
|
|
2457
2564
|
});
|
|
2458
2565
|
}
|
|
2459
2566
|
const {
|
|
@@ -2468,11 +2575,11 @@ class R {
|
|
|
2468
2575
|
r1: 0,
|
|
2469
2576
|
r2: d / 100
|
|
2470
2577
|
};
|
|
2471
|
-
return new
|
|
2578
|
+
return new je({
|
|
2472
2579
|
type: "radial",
|
|
2473
2580
|
gradientUnits: "percentage",
|
|
2474
2581
|
coords: h,
|
|
2475
|
-
colorStops:
|
|
2582
|
+
colorStops: o
|
|
2476
2583
|
});
|
|
2477
2584
|
}
|
|
2478
2585
|
/**
|
|
@@ -2497,13 +2604,13 @@ class R {
|
|
|
2497
2604
|
static _isGradientEqual(e, t) {
|
|
2498
2605
|
if (!e || !t || e.type !== t.type) return !1;
|
|
2499
2606
|
const s = e.colorStops || [], a = t.colorStops || [];
|
|
2500
|
-
return s.length !== a.length || !s.every((
|
|
2607
|
+
return s.length !== a.length || !s.every((o, i) => {
|
|
2501
2608
|
const r = a[i];
|
|
2502
|
-
return
|
|
2609
|
+
return o.color === r.color && Math.abs(o.offset - r.offset) < 1e-4;
|
|
2503
2610
|
}) ? !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;
|
|
2504
2611
|
}
|
|
2505
2612
|
}
|
|
2506
|
-
class
|
|
2613
|
+
class K {
|
|
2507
2614
|
constructor({ editor: e }) {
|
|
2508
2615
|
this.editor = e;
|
|
2509
2616
|
}
|
|
@@ -2517,11 +2624,11 @@ class $ {
|
|
|
2517
2624
|
bringToFront(e, { withoutSave: t } = {}) {
|
|
2518
2625
|
const { canvas: s, historyManager: a } = this.editor;
|
|
2519
2626
|
a.suspendHistory();
|
|
2520
|
-
const
|
|
2521
|
-
|
|
2522
|
-
s.bringObjectToFront(
|
|
2523
|
-
}) : s.bringObjectToFront(
|
|
2524
|
-
object:
|
|
2627
|
+
const n = e || s.getActiveObject();
|
|
2628
|
+
n && (n instanceof v ? n.getObjects().forEach((o) => {
|
|
2629
|
+
s.bringObjectToFront(o);
|
|
2630
|
+
}) : s.bringObjectToFront(n), s.renderAll(), a.resumeHistory(), t || a.saveState(), s.fire("editor:object-bring-to-front", {
|
|
2631
|
+
object: n,
|
|
2525
2632
|
withoutSave: t
|
|
2526
2633
|
}));
|
|
2527
2634
|
}
|
|
@@ -2535,9 +2642,9 @@ class $ {
|
|
|
2535
2642
|
bringForward(e, { withoutSave: t } = {}) {
|
|
2536
2643
|
const { canvas: s, historyManager: a } = this.editor;
|
|
2537
2644
|
a.suspendHistory();
|
|
2538
|
-
const
|
|
2539
|
-
|
|
2540
|
-
object:
|
|
2645
|
+
const n = e || s.getActiveObject();
|
|
2646
|
+
n && (n instanceof v ? K._moveSelectionForward(s, n) : s.bringObjectForward(n), s.renderAll(), a.resumeHistory(), t || a.saveState(), s.fire("editor:object-bring-forward", {
|
|
2647
|
+
object: n,
|
|
2541
2648
|
withoutSave: t
|
|
2542
2649
|
}));
|
|
2543
2650
|
}
|
|
@@ -2552,11 +2659,11 @@ class $ {
|
|
|
2552
2659
|
const {
|
|
2553
2660
|
canvas: s,
|
|
2554
2661
|
montageArea: a,
|
|
2555
|
-
historyManager:
|
|
2556
|
-
interactionBlocker: { overlayMask:
|
|
2662
|
+
historyManager: n,
|
|
2663
|
+
interactionBlocker: { overlayMask: o },
|
|
2557
2664
|
backgroundManager: { backgroundObject: i }
|
|
2558
2665
|
} = this.editor;
|
|
2559
|
-
|
|
2666
|
+
n.suspendHistory();
|
|
2560
2667
|
const r = e || s.getActiveObject();
|
|
2561
2668
|
if (r) {
|
|
2562
2669
|
if (r instanceof v) {
|
|
@@ -2565,7 +2672,7 @@ class $ {
|
|
|
2565
2672
|
s.sendObjectToBack(d[h]);
|
|
2566
2673
|
} else
|
|
2567
2674
|
s.sendObjectToBack(r);
|
|
2568
|
-
i && s.sendObjectToBack(i), s.sendObjectToBack(a),
|
|
2675
|
+
i && s.sendObjectToBack(i), s.sendObjectToBack(a), o && s.sendObjectToBack(o), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:object-send-to-back", {
|
|
2569
2676
|
object: r,
|
|
2570
2677
|
withoutSave: t
|
|
2571
2678
|
});
|
|
@@ -2581,13 +2688,13 @@ class $ {
|
|
|
2581
2688
|
const {
|
|
2582
2689
|
canvas: s,
|
|
2583
2690
|
montageArea: a,
|
|
2584
|
-
historyManager:
|
|
2585
|
-
interactionBlocker: { overlayMask:
|
|
2691
|
+
historyManager: n,
|
|
2692
|
+
interactionBlocker: { overlayMask: o },
|
|
2586
2693
|
backgroundManager: { backgroundObject: i }
|
|
2587
2694
|
} = this.editor;
|
|
2588
|
-
|
|
2695
|
+
n.suspendHistory();
|
|
2589
2696
|
const r = e || s.getActiveObject();
|
|
2590
|
-
r && (r instanceof v ?
|
|
2697
|
+
r && (r instanceof v ? K._moveSelectionBackwards(s, r) : s.sendObjectBackwards(r), i && s.sendObjectToBack(i), s.sendObjectToBack(a), o && s.sendObjectToBack(o), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:object-send-backwards", {
|
|
2591
2698
|
object: r,
|
|
2592
2699
|
withoutSave: t
|
|
2593
2700
|
}));
|
|
@@ -2631,7 +2738,7 @@ class $ {
|
|
|
2631
2738
|
});
|
|
2632
2739
|
}
|
|
2633
2740
|
}
|
|
2634
|
-
class
|
|
2741
|
+
class pt {
|
|
2635
2742
|
/**
|
|
2636
2743
|
* Менеджер фигур для редактора.
|
|
2637
2744
|
* @param options - Опции и настройки менеджера фигур.
|
|
@@ -2661,8 +2768,8 @@ class ft {
|
|
|
2661
2768
|
left: t,
|
|
2662
2769
|
top: s,
|
|
2663
2770
|
width: a = 100,
|
|
2664
|
-
height:
|
|
2665
|
-
fill:
|
|
2771
|
+
height: n = 100,
|
|
2772
|
+
fill: o = "blue"
|
|
2666
2773
|
} = l, i = V(l, [
|
|
2667
2774
|
"id",
|
|
2668
2775
|
"left",
|
|
@@ -2671,15 +2778,15 @@ class ft {
|
|
|
2671
2778
|
"height",
|
|
2672
2779
|
"fill"
|
|
2673
2780
|
]);
|
|
2674
|
-
const { canvas:
|
|
2781
|
+
const { canvas: u } = this.editor, g = new _e(I({
|
|
2675
2782
|
id: e,
|
|
2676
2783
|
left: t,
|
|
2677
2784
|
top: s,
|
|
2678
2785
|
width: a,
|
|
2679
|
-
height:
|
|
2680
|
-
fill:
|
|
2786
|
+
height: n,
|
|
2787
|
+
fill: o
|
|
2681
2788
|
}, i));
|
|
2682
|
-
return !t && !s &&
|
|
2789
|
+
return !t && !s && u.centerObject(g), d || (u.add(g), r || u.setActiveObject(g), u.renderAll()), g;
|
|
2683
2790
|
}
|
|
2684
2791
|
/**
|
|
2685
2792
|
* Добавление круга
|
|
@@ -2703,22 +2810,22 @@ class ft {
|
|
|
2703
2810
|
left: t,
|
|
2704
2811
|
top: s,
|
|
2705
2812
|
radius: a = 50,
|
|
2706
|
-
fill:
|
|
2707
|
-
} = h,
|
|
2813
|
+
fill: n = "green"
|
|
2814
|
+
} = h, o = V(h, [
|
|
2708
2815
|
"id",
|
|
2709
2816
|
"left",
|
|
2710
2817
|
"top",
|
|
2711
2818
|
"radius",
|
|
2712
2819
|
"fill"
|
|
2713
2820
|
]);
|
|
2714
|
-
const { canvas: l } = this.editor,
|
|
2821
|
+
const { canvas: l } = this.editor, u = new Be(I({
|
|
2715
2822
|
id: e,
|
|
2716
2823
|
left: t,
|
|
2717
2824
|
top: s,
|
|
2718
|
-
fill:
|
|
2825
|
+
fill: n,
|
|
2719
2826
|
radius: a
|
|
2720
|
-
},
|
|
2721
|
-
return !t && !s && l.centerObject(
|
|
2827
|
+
}, o));
|
|
2828
|
+
return !t && !s && l.centerObject(u), r || (l.add(u), i || l.setActiveObject(u), l.renderAll()), u;
|
|
2722
2829
|
}
|
|
2723
2830
|
/**
|
|
2724
2831
|
* Добавление треугольника
|
|
@@ -2743,8 +2850,8 @@ class ft {
|
|
|
2743
2850
|
left: t,
|
|
2744
2851
|
top: s,
|
|
2745
2852
|
width: a = 100,
|
|
2746
|
-
height:
|
|
2747
|
-
fill:
|
|
2853
|
+
height: n = 100,
|
|
2854
|
+
fill: o = "yellow"
|
|
2748
2855
|
} = l, i = V(l, [
|
|
2749
2856
|
"id",
|
|
2750
2857
|
"left",
|
|
@@ -2753,18 +2860,18 @@ class ft {
|
|
|
2753
2860
|
"height",
|
|
2754
2861
|
"fill"
|
|
2755
2862
|
]);
|
|
2756
|
-
const { canvas:
|
|
2863
|
+
const { canvas: u } = this.editor, g = new xe(I({
|
|
2757
2864
|
id: e,
|
|
2758
2865
|
left: t,
|
|
2759
2866
|
top: s,
|
|
2760
|
-
fill:
|
|
2867
|
+
fill: o,
|
|
2761
2868
|
width: a,
|
|
2762
|
-
height:
|
|
2869
|
+
height: n
|
|
2763
2870
|
}, i));
|
|
2764
|
-
return !t && !s &&
|
|
2871
|
+
return !t && !s && u.centerObject(g), d || (u.add(g), r || u.setActiveObject(g), u.renderAll()), g;
|
|
2765
2872
|
}
|
|
2766
2873
|
}
|
|
2767
|
-
class
|
|
2874
|
+
class yt {
|
|
2768
2875
|
/**
|
|
2769
2876
|
* @param options
|
|
2770
2877
|
* @param options.editor - экземпляр редактора с доступом к canvas
|
|
@@ -2841,10 +2948,10 @@ class Mt {
|
|
|
2841
2948
|
_copyImageToClipboard(e, t) {
|
|
2842
2949
|
return j(this, null, function* () {
|
|
2843
2950
|
try {
|
|
2844
|
-
const a = e.toCanvasElement({ enableRetinaScaling: !1 }).toDataURL(),
|
|
2951
|
+
const a = e.toCanvasElement({ enableRetinaScaling: !1 }).toDataURL(), n = a.slice(5).split(";")[0], o = a.split(",")[1], i = atob(o), r = new Uint8Array(i.length);
|
|
2845
2952
|
for (let l = 0; l < i.length; l += 1)
|
|
2846
2953
|
r[l] = i.charCodeAt(l);
|
|
2847
|
-
const d = new Blob([r.buffer], { type:
|
|
2954
|
+
const d = new Blob([r.buffer], { type: n }), h = new ClipboardItem({ [n]: d });
|
|
2848
2955
|
return yield navigator.clipboard.write([h]), console.info("Image copied to clipboard successfully"), !0;
|
|
2849
2956
|
} catch (s) {
|
|
2850
2957
|
return this.editor.errorManager.emitWarning({
|
|
@@ -2863,7 +2970,7 @@ class Mt {
|
|
|
2863
2970
|
_copyTextToClipboard(e) {
|
|
2864
2971
|
return j(this, null, function* () {
|
|
2865
2972
|
try {
|
|
2866
|
-
const t = `${
|
|
2973
|
+
const t = `${Ae}${e}`;
|
|
2867
2974
|
return yield navigator.clipboard.writeText(t), console.info("Text copied to clipboard successfully"), !0;
|
|
2868
2975
|
} catch (t) {
|
|
2869
2976
|
const { errorManager: s } = this.editor;
|
|
@@ -2924,8 +3031,8 @@ class Mt {
|
|
|
2924
3031
|
evented: !0
|
|
2925
3032
|
}), this._addClonedObjectToCanvas(a), t.fire("editor:object-duplicated", { object: a }), !0;
|
|
2926
3033
|
} catch (a) {
|
|
2927
|
-
const { errorManager:
|
|
2928
|
-
return
|
|
3034
|
+
const { errorManager: n } = this.editor;
|
|
3035
|
+
return n.emitError({
|
|
2929
3036
|
origin: "ClipboardManager",
|
|
2930
3037
|
method: "copyPaste",
|
|
2931
3038
|
code: "COPY_PASTE_FAILED",
|
|
@@ -2949,12 +3056,12 @@ class Mt {
|
|
|
2949
3056
|
return;
|
|
2950
3057
|
}
|
|
2951
3058
|
const s = e.getData("text/plain");
|
|
2952
|
-
if (s && s.startsWith(
|
|
3059
|
+
if (s && s.startsWith(Ae)) {
|
|
2953
3060
|
this.paste();
|
|
2954
3061
|
return;
|
|
2955
3062
|
}
|
|
2956
|
-
const { items: a } = e,
|
|
2957
|
-
if (
|
|
3063
|
+
const { items: a } = e, n = a[a.length - 1], o = n.getAsFile();
|
|
3064
|
+
if (n.type !== "text/html" && o) {
|
|
2958
3065
|
const d = new FileReader();
|
|
2959
3066
|
d.onload = (h) => {
|
|
2960
3067
|
h.target && this._handleImageImport(h.target.result).catch((l) => {
|
|
@@ -2966,20 +3073,20 @@ class Mt {
|
|
|
2966
3073
|
data: l
|
|
2967
3074
|
});
|
|
2968
3075
|
});
|
|
2969
|
-
}, d.readAsDataURL(
|
|
3076
|
+
}, d.readAsDataURL(o);
|
|
2970
3077
|
return;
|
|
2971
3078
|
}
|
|
2972
3079
|
const i = e.getData("text/html");
|
|
2973
3080
|
if (i) {
|
|
2974
3081
|
const l = new DOMParser().parseFromString(i, "text/html").querySelector("img");
|
|
2975
3082
|
if (l != null && l.src) {
|
|
2976
|
-
this._handleImageImport(l.src).catch((
|
|
3083
|
+
this._handleImageImport(l.src).catch((u) => {
|
|
2977
3084
|
this.editor.errorManager.emitError({
|
|
2978
3085
|
origin: "ClipboardManager",
|
|
2979
3086
|
method: "handlePasteEvent",
|
|
2980
3087
|
code: "PASTE_HTML_IMAGE_FAILED",
|
|
2981
3088
|
message: "Ошибка вставки изображения из HTML",
|
|
2982
|
-
data:
|
|
3089
|
+
data: u
|
|
2983
3090
|
});
|
|
2984
3091
|
});
|
|
2985
3092
|
return;
|
|
@@ -3030,8 +3137,8 @@ class J {
|
|
|
3030
3137
|
* @fires editor:object-locked
|
|
3031
3138
|
*/
|
|
3032
3139
|
lockObject({ object: e, skipInnerObjects: t, withoutSave: s } = {}) {
|
|
3033
|
-
const { canvas: a, historyManager:
|
|
3034
|
-
if (!
|
|
3140
|
+
const { canvas: a, historyManager: n } = this.editor, o = e || a.getActiveObject();
|
|
3141
|
+
if (!o || o.locked) return;
|
|
3035
3142
|
const i = {
|
|
3036
3143
|
lockMovementX: !0,
|
|
3037
3144
|
lockMovementY: !0,
|
|
@@ -3042,10 +3149,10 @@ class J {
|
|
|
3042
3149
|
lockSkewingY: !0,
|
|
3043
3150
|
locked: !0
|
|
3044
3151
|
};
|
|
3045
|
-
|
|
3152
|
+
o.set(i), !t && J._isGroupOrSelection(o) && o.getObjects().forEach((d) => {
|
|
3046
3153
|
d.set(i);
|
|
3047
|
-
}), a.renderAll(), s ||
|
|
3048
|
-
object:
|
|
3154
|
+
}), a.renderAll(), s || n.saveState(), a.fire("editor:object-locked", {
|
|
3155
|
+
object: o,
|
|
3049
3156
|
skipInnerObjects: t,
|
|
3050
3157
|
withoutSave: s
|
|
3051
3158
|
});
|
|
@@ -3058,9 +3165,9 @@ class J {
|
|
|
3058
3165
|
* @fires editor:object-unlocked
|
|
3059
3166
|
*/
|
|
3060
3167
|
unlockObject({ object: e, withoutSave: t } = {}) {
|
|
3061
|
-
const { canvas: s, historyManager: a } = this.editor,
|
|
3062
|
-
if (!
|
|
3063
|
-
const
|
|
3168
|
+
const { canvas: s, historyManager: a } = this.editor, n = e || s.getActiveObject();
|
|
3169
|
+
if (!n) return;
|
|
3170
|
+
const o = {
|
|
3064
3171
|
lockMovementX: !1,
|
|
3065
3172
|
lockMovementY: !1,
|
|
3066
3173
|
lockRotation: !1,
|
|
@@ -3070,10 +3177,10 @@ class J {
|
|
|
3070
3177
|
lockSkewingY: !1,
|
|
3071
3178
|
locked: !1
|
|
3072
3179
|
};
|
|
3073
|
-
|
|
3074
|
-
i.set(
|
|
3180
|
+
n.set(o), J._isGroupOrSelection(n) && n.getObjects().forEach((i) => {
|
|
3181
|
+
i.set(o);
|
|
3075
3182
|
}), s.renderAll(), t || a.saveState(), s.fire("editor:object-unlocked", {
|
|
3076
|
-
object:
|
|
3183
|
+
object: n,
|
|
3077
3184
|
withoutSave: t
|
|
3078
3185
|
});
|
|
3079
3186
|
}
|
|
@@ -3081,7 +3188,7 @@ class J {
|
|
|
3081
3188
|
return e instanceof v || e instanceof te;
|
|
3082
3189
|
}
|
|
3083
3190
|
}
|
|
3084
|
-
class
|
|
3191
|
+
class It {
|
|
3085
3192
|
constructor({ editor: e }) {
|
|
3086
3193
|
this.editor = e;
|
|
3087
3194
|
}
|
|
@@ -3098,11 +3205,11 @@ class mt {
|
|
|
3098
3205
|
} = {}) {
|
|
3099
3206
|
const { canvas: s, historyManager: a } = this.editor;
|
|
3100
3207
|
a.suspendHistory();
|
|
3101
|
-
const
|
|
3102
|
-
if (!
|
|
3103
|
-
const
|
|
3104
|
-
|
|
3105
|
-
object:
|
|
3208
|
+
const n = e || s.getActiveObject();
|
|
3209
|
+
if (!n || !(n instanceof v)) return;
|
|
3210
|
+
const o = n.getObjects(), i = new te(o);
|
|
3211
|
+
o.forEach((r) => s.remove(r)), i.set("id", `${i.type}-${A()}`), s.add(i), s.setActiveObject(i), s.renderAll(), a.resumeHistory(), t || a.saveState(), s.fire("editor:objects-grouped", {
|
|
3212
|
+
object: n,
|
|
3106
3213
|
group: i,
|
|
3107
3214
|
withoutSave: t
|
|
3108
3215
|
});
|
|
@@ -3119,25 +3226,25 @@ class mt {
|
|
|
3119
3226
|
object: e,
|
|
3120
3227
|
withoutSave: t
|
|
3121
3228
|
} = {}) {
|
|
3122
|
-
const { canvas: s, historyManager: a } = this.editor,
|
|
3123
|
-
if (!(
|
|
3229
|
+
const { canvas: s, historyManager: a } = this.editor, n = e || s.getActiveObject();
|
|
3230
|
+
if (!(n instanceof te)) return null;
|
|
3124
3231
|
a.suspendHistory();
|
|
3125
|
-
const
|
|
3126
|
-
s.remove(
|
|
3127
|
-
const i = new v(
|
|
3232
|
+
const o = n.removeAll();
|
|
3233
|
+
s.remove(n), o.forEach((d) => s.add(d));
|
|
3234
|
+
const i = new v(o, {
|
|
3128
3235
|
canvas: s
|
|
3129
3236
|
});
|
|
3130
3237
|
s.setActiveObject(i), s.renderAll(), a.resumeHistory(), t || a.saveState();
|
|
3131
3238
|
const r = {
|
|
3132
|
-
object:
|
|
3239
|
+
object: n,
|
|
3133
3240
|
selection: i,
|
|
3134
|
-
ungroupedObjects:
|
|
3241
|
+
ungroupedObjects: o,
|
|
3135
3242
|
withoutSave: t
|
|
3136
3243
|
};
|
|
3137
3244
|
return s.fire("editor:objects-ungrouped", r), r;
|
|
3138
3245
|
}
|
|
3139
3246
|
}
|
|
3140
|
-
class
|
|
3247
|
+
class vt {
|
|
3141
3248
|
constructor({ editor: e }) {
|
|
3142
3249
|
this.editor = e;
|
|
3143
3250
|
}
|
|
@@ -3148,11 +3255,11 @@ class bt {
|
|
|
3148
3255
|
selectAll() {
|
|
3149
3256
|
const { canvas: e, canvasManager: t, objectLockManager: s } = this.editor;
|
|
3150
3257
|
e.discardActiveObject();
|
|
3151
|
-
const a = t.getObjects(),
|
|
3152
|
-
|
|
3258
|
+
const a = t.getObjects(), n = a.some((i) => i.locked), o = a.length > 1 ? new v(t.getObjects(), { canvas: e }) : a[0];
|
|
3259
|
+
n && s.lockObject({ object: o, skipInnerObjects: !0, withoutSave: !0 }), e.setActiveObject(o), e.requestRenderAll(), e.fire("editor:all-objects-selected", { selected: o });
|
|
3153
3260
|
}
|
|
3154
3261
|
}
|
|
3155
|
-
class
|
|
3262
|
+
class le {
|
|
3156
3263
|
constructor({ editor: e }) {
|
|
3157
3264
|
this.editor = e;
|
|
3158
3265
|
}
|
|
@@ -3194,19 +3301,19 @@ class de {
|
|
|
3194
3301
|
withoutSave: t = !1,
|
|
3195
3302
|
_isRecursiveCall: s = !1
|
|
3196
3303
|
} = {}) {
|
|
3197
|
-
const { canvas: a, historyManager:
|
|
3304
|
+
const { canvas: a, historyManager: n } = this.editor, i = (e || a.getActiveObjects()).filter((h) => !h.locked);
|
|
3198
3305
|
if (!(i != null && i.length)) return null;
|
|
3199
|
-
s ||
|
|
3306
|
+
s || n.suspendHistory();
|
|
3200
3307
|
const r = [];
|
|
3201
3308
|
if (i.forEach((h) => {
|
|
3202
|
-
if (
|
|
3309
|
+
if (le._isUngroupableGroup(h)) {
|
|
3203
3310
|
const l = this._handleGroupDeletion(h);
|
|
3204
3311
|
r.push(...l);
|
|
3205
3312
|
return;
|
|
3206
3313
|
}
|
|
3207
3314
|
a.remove(h), r.push(h);
|
|
3208
3315
|
}), s) return null;
|
|
3209
|
-
a.discardActiveObject(), a.renderAll(),
|
|
3316
|
+
a.discardActiveObject(), a.renderAll(), n.resumeHistory(), t || n.saveState();
|
|
3210
3317
|
const d = {
|
|
3211
3318
|
objects: r,
|
|
3212
3319
|
withoutSave: t
|
|
@@ -3214,7 +3321,7 @@ class de {
|
|
|
3214
3321
|
return a.fire("editor:objects-deleted", d), d;
|
|
3215
3322
|
}
|
|
3216
3323
|
}
|
|
3217
|
-
const
|
|
3324
|
+
const At = {
|
|
3218
3325
|
IMAGE_MANAGER: {
|
|
3219
3326
|
/**
|
|
3220
3327
|
* Некорректный Content-Type изображения
|
|
@@ -3339,19 +3446,19 @@ class q {
|
|
|
3339
3446
|
* @param options.message — текст ошибки (опционально, если не передан, то используется код ошибки)
|
|
3340
3447
|
* @fires editor:error
|
|
3341
3448
|
*/
|
|
3342
|
-
emitError({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, data: a, message:
|
|
3449
|
+
emitError({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, data: a, message: n }) {
|
|
3343
3450
|
if (!q.isValidErrorCode(s)) {
|
|
3344
3451
|
console.warn("Неизвестный код ошибки: ", { code: s, origin: e, method: t });
|
|
3345
3452
|
return;
|
|
3346
3453
|
}
|
|
3347
3454
|
if (!s) return;
|
|
3348
|
-
const
|
|
3349
|
-
console.error(`${e}. ${t}. ${s}. ${
|
|
3455
|
+
const o = n || s;
|
|
3456
|
+
console.error(`${e}. ${t}. ${s}. ${o}`, a);
|
|
3350
3457
|
const i = {
|
|
3351
3458
|
code: s,
|
|
3352
3459
|
origin: e,
|
|
3353
3460
|
method: t,
|
|
3354
|
-
message:
|
|
3461
|
+
message: o,
|
|
3355
3462
|
data: a
|
|
3356
3463
|
};
|
|
3357
3464
|
this._buffer.push(I({
|
|
@@ -3368,19 +3475,19 @@ class q {
|
|
|
3368
3475
|
* @param options.message — текст предупреждения (опционально, если не передан, то используется код предупреждения)
|
|
3369
3476
|
* @fires editor:warning
|
|
3370
3477
|
*/
|
|
3371
|
-
emitWarning({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, message: a, data:
|
|
3478
|
+
emitWarning({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, message: a, data: n }) {
|
|
3372
3479
|
if (!q.isValidErrorCode(s)) {
|
|
3373
3480
|
console.warn("Неизвестный код предупреждения: ", { code: s, origin: e, method: t });
|
|
3374
3481
|
return;
|
|
3375
3482
|
}
|
|
3376
|
-
const
|
|
3377
|
-
console.warn(`${e}. ${t}. ${s}. ${
|
|
3483
|
+
const o = a || s;
|
|
3484
|
+
console.warn(`${e}. ${t}. ${s}. ${o}`, n);
|
|
3378
3485
|
const i = {
|
|
3379
3486
|
code: s,
|
|
3380
3487
|
origin: e,
|
|
3381
3488
|
method: t,
|
|
3382
|
-
message:
|
|
3383
|
-
data:
|
|
3489
|
+
message: o,
|
|
3490
|
+
data: n
|
|
3384
3491
|
};
|
|
3385
3492
|
this._buffer.push(I({
|
|
3386
3493
|
type: "editor:warning"
|
|
@@ -3392,10 +3499,10 @@ class q {
|
|
|
3392
3499
|
* @returns true, если код допустим, иначе false
|
|
3393
3500
|
*/
|
|
3394
3501
|
static isValidErrorCode(e) {
|
|
3395
|
-
return e ? Object.values(
|
|
3502
|
+
return e ? Object.values(At).some((t) => Object.values(t).includes(e)) : !1;
|
|
3396
3503
|
}
|
|
3397
3504
|
}
|
|
3398
|
-
class
|
|
3505
|
+
class he {
|
|
3399
3506
|
/**
|
|
3400
3507
|
* Конструктор класса ImageEditor.
|
|
3401
3508
|
* @param canvasId - идентификатор канваса, в котором будет создан редактор
|
|
@@ -3416,23 +3523,23 @@ class le {
|
|
|
3416
3523
|
editorContainerHeight: t,
|
|
3417
3524
|
canvasWrapperWidth: s,
|
|
3418
3525
|
canvasWrapperHeight: a,
|
|
3419
|
-
canvasCSSWidth:
|
|
3420
|
-
canvasCSSHeight:
|
|
3526
|
+
canvasCSSWidth: n,
|
|
3527
|
+
canvasCSSHeight: o,
|
|
3421
3528
|
initialImage: i,
|
|
3422
3529
|
initialStateJSON: r,
|
|
3423
3530
|
scaleType: d,
|
|
3424
|
-
|
|
3531
|
+
showRotationAngle: h,
|
|
3532
|
+
_onReadyCallback: l
|
|
3425
3533
|
} = this.options;
|
|
3426
|
-
if (
|
|
3534
|
+
if (Je.apply(), this.canvas = new Re(this.containerId, this.options), this.moduleLoader = new Ye(), this.workerManager = new We(), this.errorManager = new q({ editor: this }), this.historyManager = new $({ editor: this }), this.toolbar = new rt({ editor: this }), this.transformManager = new bt({ editor: this }), this.canvasManager = new mt({ editor: this }), this.imageManager = new N({ editor: this }), this.layerManager = new K({ editor: this }), this.shapeManager = new pt({ editor: this }), this.interactionBlocker = new jt({ editor: this }), this.backgroundManager = new R({ editor: this }), this.clipboardManager = new yt({ editor: this }), this.objectLockManager = new J({ editor: this }), this.groupingManager = new It({ editor: this }), this.selectionManager = new vt({ editor: this }), this.deletionManager = new le({ editor: this }), h && (this.angleIndicator = new de({ editor: this })), this._createMontageArea(), this._createClippingArea(), this.listeners = new P({ editor: this, options: this.options }), this.canvasManager.setEditorContainerWidth(e), this.canvasManager.setEditorContainerHeight(t), this.canvasManager.setCanvasWrapperWidth(s), this.canvasManager.setCanvasWrapperHeight(a), this.canvasManager.setCanvasCSSWidth(n), this.canvasManager.setCanvasCSSHeight(o), this.canvasManager.updateCanvas(), this.transformManager.calculateAndApplyDefaultZoom(), i != null && i.source) {
|
|
3427
3535
|
const {
|
|
3428
|
-
source:
|
|
3536
|
+
source: u,
|
|
3429
3537
|
scale: g = `image-${d}`,
|
|
3430
|
-
withoutSave:
|
|
3538
|
+
withoutSave: M = !0
|
|
3431
3539
|
} = i;
|
|
3432
|
-
yield this.imageManager.importImage({ source:
|
|
3433
|
-
}
|
|
3434
|
-
|
|
3435
|
-
r && this.historyManager.loadStateFromFullState(r), this.historyManager.saveState(), console.log("editor:ready"), this.canvas.fire("editor:ready", this), typeof h == "function" && h(this);
|
|
3540
|
+
yield this.imageManager.importImage({ source: u, scale: g, withoutSave: M });
|
|
3541
|
+
}
|
|
3542
|
+
r && this.historyManager.loadStateFromFullState(r), this.historyManager.saveState(), console.log("editor:ready"), this.canvas.fire("editor:ready", this), typeof l == "function" && l(this);
|
|
3436
3543
|
});
|
|
3437
3544
|
}
|
|
3438
3545
|
/**
|
|
@@ -3446,7 +3553,7 @@ class le {
|
|
|
3446
3553
|
this.montageArea = this.shapeManager.addRectangle({
|
|
3447
3554
|
width: e,
|
|
3448
3555
|
height: t,
|
|
3449
|
-
fill:
|
|
3556
|
+
fill: he._createMosaicPattern(),
|
|
3450
3557
|
stroke: null,
|
|
3451
3558
|
strokeWidth: 0,
|
|
3452
3559
|
selectable: !1,
|
|
@@ -3486,7 +3593,8 @@ class le {
|
|
|
3486
3593
|
* Метод для удаления редактора и всех слушателей.
|
|
3487
3594
|
*/
|
|
3488
3595
|
destroy() {
|
|
3489
|
-
|
|
3596
|
+
var e;
|
|
3597
|
+
this.listeners.destroy(), this.toolbar.destroy(), (e = this.angleIndicator) == null || e.destroy(), this.canvas.dispose(), this.workerManager.worker.terminate(), this.imageManager.revokeBlobUrls(), this.errorManager.cleanBuffer();
|
|
3490
3598
|
}
|
|
3491
3599
|
/**
|
|
3492
3600
|
* Создает паттерн мозаики.
|
|
@@ -3496,13 +3604,13 @@ class le {
|
|
|
3496
3604
|
const e = document.createElement("canvas");
|
|
3497
3605
|
e.width = 20, e.height = 20;
|
|
3498
3606
|
const t = e.getContext("2d");
|
|
3499
|
-
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
|
|
3607
|
+
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 Ue({
|
|
3500
3608
|
source: e,
|
|
3501
3609
|
repeat: "repeat"
|
|
3502
3610
|
});
|
|
3503
3611
|
}
|
|
3504
3612
|
}
|
|
3505
|
-
const
|
|
3613
|
+
const Ct = {
|
|
3506
3614
|
/**
|
|
3507
3615
|
* Опции редактора
|
|
3508
3616
|
*/
|
|
@@ -3576,6 +3684,7 @@ const pt = {
|
|
|
3576
3684
|
maxZoom: 2,
|
|
3577
3685
|
zoomRatio: 0.1,
|
|
3578
3686
|
overlayMaskColor: "rgba(136, 136, 136, 0.6)",
|
|
3687
|
+
showRotationAngle: !0,
|
|
3579
3688
|
/*
|
|
3580
3689
|
* Настройки слушателей событий
|
|
3581
3690
|
*/
|
|
@@ -3591,18 +3700,18 @@ const pt = {
|
|
|
3591
3700
|
resetObjectFitByDoubleClick: !0,
|
|
3592
3701
|
keyboardIgnoreSelectors: []
|
|
3593
3702
|
};
|
|
3594
|
-
function
|
|
3595
|
-
const t = I(I({},
|
|
3703
|
+
function wt(c, e = {}) {
|
|
3704
|
+
const t = I(I({}, Ct), e), s = document.getElementById(c);
|
|
3596
3705
|
if (!s)
|
|
3597
3706
|
return Promise.reject(new Error(`Контейнер с ID "${c}" не найден.`));
|
|
3598
3707
|
const a = document.createElement("canvas");
|
|
3599
|
-
return a.id = `${c}-canvas`, s.appendChild(a), t.editorContainer = s, new Promise((
|
|
3600
|
-
t._onReadyCallback =
|
|
3601
|
-
const
|
|
3602
|
-
window[c] =
|
|
3708
|
+
return a.id = `${c}-canvas`, s.appendChild(a), t.editorContainer = s, new Promise((n) => {
|
|
3709
|
+
t._onReadyCallback = n;
|
|
3710
|
+
const o = new he(a.id, t);
|
|
3711
|
+
window[c] = o;
|
|
3603
3712
|
});
|
|
3604
3713
|
}
|
|
3605
3714
|
export {
|
|
3606
|
-
|
|
3715
|
+
wt as default
|
|
3607
3716
|
};
|
|
3608
3717
|
//# sourceMappingURL=main.js.map
|