@anu3ev/fabric-image-editor 0.1.70 → 0.1.72
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 +304 -300
- package/package.json +2 -2
package/dist/main.js
CHANGED
|
@@ -20,30 +20,30 @@ var P = (r, e) => {
|
|
|
20
20
|
return t;
|
|
21
21
|
};
|
|
22
22
|
var j = (r, e, t) => new Promise((s, n) => {
|
|
23
|
-
var
|
|
23
|
+
var i = (d) => {
|
|
24
24
|
try {
|
|
25
25
|
o(t.next(d));
|
|
26
26
|
} catch (c) {
|
|
27
27
|
n(c);
|
|
28
28
|
}
|
|
29
|
-
},
|
|
29
|
+
}, a = (d) => {
|
|
30
30
|
try {
|
|
31
31
|
o(t.throw(d));
|
|
32
32
|
} catch (c) {
|
|
33
33
|
n(c);
|
|
34
34
|
}
|
|
35
|
-
}, o = (d) => d.done ? s(d.value) : Promise.resolve(d.value).then(
|
|
35
|
+
}, o = (d) => d.done ? s(d.value) : Promise.resolve(d.value).then(i, a);
|
|
36
36
|
o((t = t.apply(r, e)).next());
|
|
37
37
|
});
|
|
38
|
-
import { ActiveSelection as y, util as H, controlsUtils as Ae, InteractiveFabricObject as Se, loadSVGFromURL as Ce, FabricImage as U, Point as F, Rect as De, Circle as
|
|
39
|
-
import { create as
|
|
40
|
-
import
|
|
38
|
+
import { ActiveSelection as y, util as H, controlsUtils as Ae, InteractiveFabricObject as Se, loadSVGFromURL as Ce, FabricImage as U, Point as F, Rect as De, Circle as Ne, Triangle as Ee, Group as J, Canvas as Le, Pattern as we } from "fabric";
|
|
39
|
+
import { create as Te } from "jsondiffpatch";
|
|
40
|
+
import Oe from "diff-match-patch";
|
|
41
41
|
var ke = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", D = function() {
|
|
42
42
|
for (var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 21, t = "", s = crypto.getRandomValues(new Uint8Array(e |= 0)); e--; )
|
|
43
43
|
t += ke[s[e] & 63];
|
|
44
44
|
return t;
|
|
45
45
|
};
|
|
46
|
-
class
|
|
46
|
+
class Z {
|
|
47
47
|
/**
|
|
48
48
|
* Конструктор принимает редактор и опции.
|
|
49
49
|
* @param params
|
|
@@ -61,7 +61,7 @@ class z {
|
|
|
61
61
|
* @param params.options.adaptCanvasToContainerOnResize — адаптировать канвас к размерам контейнера при изменении размеров окна
|
|
62
62
|
*/
|
|
63
63
|
constructor({ editor: e, options: t = {} }) {
|
|
64
|
-
this.isDragging = !1, this.lastMouseX = 0, this.lastMouseY = 0, this.isUndoRedoKeyPressed = !1, this.isSpacePressed = !1, this.savedSelection = [], this.canvasDragging = !1, this.mouseWheelZooming = !1, this.bringToFrontOnSelection = !1, this.resetObjectFitByDoubleClick = !1, this.copyObjectsByHotkey = !1, this.pasteImageFromClipboard = !1, this.undoRedoByHotKeys = !1, this.selectAllByHotkey = !1, this.deleteObjectsByHotkey = !1, this.adaptCanvasToContainerOnResize = !1, this.editor = e, this.canvas = e.canvas, this.options = t, this.handleContainerResizeBound =
|
|
64
|
+
this.isDragging = !1, this.lastMouseX = 0, this.lastMouseY = 0, this.isUndoRedoKeyPressed = !1, this.isSpacePressed = !1, this.savedSelection = [], this.canvasDragging = !1, this.mouseWheelZooming = !1, this.bringToFrontOnSelection = !1, this.resetObjectFitByDoubleClick = !1, this.copyObjectsByHotkey = !1, this.pasteImageFromClipboard = !1, this.undoRedoByHotKeys = !1, this.selectAllByHotkey = !1, this.deleteObjectsByHotkey = !1, this.adaptCanvasToContainerOnResize = !1, this.editor = e, this.canvas = e.canvas, this.options = t, this.handleContainerResizeBound = Z.debounce(this.handleContainerResize.bind(this), 500), this.handleCopyEventBound = this.handleCopyEvent.bind(this), this.handlePasteEventBound = this.handlePasteEvent.bind(this), this.handleUndoRedoEventBound = this.handleUndoRedoEvent.bind(this), this.handleUndoRedoKeyUpBound = this.handleUndoRedoKeyUp.bind(this), this.handleSelectAllEventBound = this.handleSelectAllEvent.bind(this), this.handleDeleteObjectsEventBound = this.handleDeleteObjectsEvent.bind(this), this.handleSpaceKeyDownBound = this.handleSpaceKeyDown.bind(this), this.handleSpaceKeyUpBound = this.handleSpaceKeyUp.bind(this), this.handleObjectModifiedHistoryBound = Z.debounce(this.handleObjectModifiedHistory.bind(this), 300), this.handleObjectRotatingHistoryBound = Z.debounce(this.handleObjectRotatingHistory.bind(this), 300), this.handleObjectAddedHistoryBound = this.handleObjectAddedHistory.bind(this), this.handleObjectRemovedHistoryBound = this.handleObjectRemovedHistory.bind(this), this.handleOverlayUpdateBound = this.handleOverlayUpdate.bind(this), this.handleCanvasDragStartBound = this.handleCanvasDragStart.bind(this), this.handleCanvasDraggingBound = this.handleCanvasDragging.bind(this), this.handleCanvasDragEndBound = this.handleCanvasDragEnd.bind(this), this.handleMouseWheelZoomBound = this.handleMouseWheelZoom.bind(this), this.handleBringToFrontBound = this.handleBringToFront.bind(this), this.handleResetObjectFitBound = this.handleResetObjectFit.bind(this), this.handleLockedSelectionBound = this._filterLockedSelection.bind(this), this.init();
|
|
65
65
|
}
|
|
66
66
|
/**
|
|
67
67
|
* Инициализация всех обработчиков согласно опциям.
|
|
@@ -72,14 +72,14 @@ class z {
|
|
|
72
72
|
canvasDragging: t,
|
|
73
73
|
mouseWheelZooming: s,
|
|
74
74
|
bringToFrontOnSelection: n,
|
|
75
|
-
copyObjectsByHotkey:
|
|
76
|
-
pasteImageFromClipboard:
|
|
75
|
+
copyObjectsByHotkey: i,
|
|
76
|
+
pasteImageFromClipboard: a,
|
|
77
77
|
undoRedoByHotKeys: o,
|
|
78
78
|
selectAllByHotkey: d,
|
|
79
79
|
deleteObjectsByHotkey: c,
|
|
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), n && (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), n && (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 }), i && document.addEventListener("keydown", this.handleCopyEventBound, { capture: !0 }), a && document.addEventListener("paste", this.handlePasteEventBound, { capture: !0 }), o && (document.addEventListener("keydown", this.handleUndoRedoEventBound, { capture: !0 }), document.addEventListener("keyup", this.handleUndoRedoKeyUpBound, { capture: !0 })), d && document.addEventListener("keydown", this.handleSelectAllEventBound, { capture: !0 }), c && 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);
|
|
83
83
|
}
|
|
84
84
|
/**
|
|
85
85
|
* При массовом выделении объектов удаляем из него залоченные.
|
|
@@ -90,7 +90,7 @@ class z {
|
|
|
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: n } = e.reduce(
|
|
93
|
-
(
|
|
93
|
+
(a, o) => o.locked ? (a.lockedObjects.push(o), a) : (a.unlockedObjects.push(o), a),
|
|
94
94
|
{ lockedObjects: [], unlockedObjects: [] }
|
|
95
95
|
);
|
|
96
96
|
if (s.length === 0) return;
|
|
@@ -98,22 +98,22 @@ class z {
|
|
|
98
98
|
if (n.length === 1)
|
|
99
99
|
this.canvas.setActiveObject(n[0]);
|
|
100
100
|
else {
|
|
101
|
-
const
|
|
101
|
+
const a = new y(n, {
|
|
102
102
|
canvas: this.canvas
|
|
103
103
|
});
|
|
104
|
-
this.canvas.setActiveObject(
|
|
104
|
+
this.canvas.setActiveObject(a);
|
|
105
105
|
}
|
|
106
106
|
this.canvas.requestRenderAll();
|
|
107
107
|
return;
|
|
108
108
|
}
|
|
109
|
-
const
|
|
109
|
+
const i = new y(e, {
|
|
110
110
|
canvas: this.canvas
|
|
111
111
|
});
|
|
112
112
|
this.editor.objectLockManager.lockObject({
|
|
113
|
-
object:
|
|
113
|
+
object: i,
|
|
114
114
|
skipInnerObjects: !0,
|
|
115
115
|
withoutSave: !0
|
|
116
|
-
}), this.canvas.setActiveObject(
|
|
116
|
+
}), this.canvas.setActiveObject(i), this.canvas.requestRenderAll();
|
|
117
117
|
}
|
|
118
118
|
/**
|
|
119
119
|
* Обработчики для сохранения состояния редактора в истории.
|
|
@@ -162,7 +162,7 @@ class z {
|
|
|
162
162
|
* @param event — объект события
|
|
163
163
|
*/
|
|
164
164
|
handlePasteEvent(e) {
|
|
165
|
-
this.editor.clipboardManager.handlePasteEvent(e);
|
|
165
|
+
this._shouldIgnoreKeyboardEvent(e) || this.editor.clipboardManager.handlePasteEvent(e);
|
|
166
166
|
}
|
|
167
167
|
/**
|
|
168
168
|
* Обработчик для отмены/повтора (Ctrl+Z/Ctrl+Y).
|
|
@@ -173,8 +173,8 @@ class z {
|
|
|
173
173
|
*/
|
|
174
174
|
handleUndoRedoEvent(e) {
|
|
175
175
|
return j(this, null, function* () {
|
|
176
|
-
const { ctrlKey: t, metaKey: s, code: n, repeat:
|
|
177
|
-
this._shouldIgnoreKeyboardEvent(e) || !t && !s ||
|
|
176
|
+
const { ctrlKey: t, metaKey: s, code: n, repeat: i } = e;
|
|
177
|
+
this._shouldIgnoreKeyboardEvent(e) || !t && !s || i || !/Mac/i.test(navigator.userAgent) && this.isUndoRedoKeyPressed || (n === "KeyZ" ? (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.undo()) : n === "KeyY" && (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.redo()));
|
|
178
178
|
});
|
|
179
179
|
}
|
|
180
180
|
/**
|
|
@@ -213,11 +213,11 @@ class z {
|
|
|
213
213
|
*/
|
|
214
214
|
handleSpaceKeyDown(e) {
|
|
215
215
|
if (e.code !== "Space" || this._shouldIgnoreKeyboardEvent(e)) return;
|
|
216
|
-
const { canvas: t, editor: s, isSpacePressed: n, isDragging:
|
|
217
|
-
if (n ||
|
|
216
|
+
const { canvas: t, editor: s, isSpacePressed: n, isDragging: i } = this;
|
|
217
|
+
if (n || i) return;
|
|
218
218
|
this.isSpacePressed = !0, e.preventDefault();
|
|
219
|
-
const
|
|
220
|
-
|
|
219
|
+
const a = t.getActiveObject() || null;
|
|
220
|
+
a instanceof y ? this.savedSelection = a.getObjects().slice() : a && (this.savedSelection = [a]), t.discardActiveObject(), t.set({
|
|
221
221
|
selection: !1,
|
|
222
222
|
defaultCursor: "grab"
|
|
223
223
|
}), t.setCursor("grab"), s.canvasManager.getObjects().forEach((o) => {
|
|
@@ -256,8 +256,8 @@ class z {
|
|
|
256
256
|
t.setActiveObject(e[0]);
|
|
257
257
|
return;
|
|
258
258
|
}
|
|
259
|
-
const n = e.filter((
|
|
260
|
-
t.setActiveObject(
|
|
259
|
+
const n = e.filter((a) => s.canvasManager.getObjects().includes(a)), i = new y(n, { canvas: t });
|
|
260
|
+
t.setActiveObject(i);
|
|
261
261
|
}
|
|
262
262
|
// --- Обработчики для событий canvas (Fabric) ---
|
|
263
263
|
/**
|
|
@@ -313,7 +313,7 @@ class z {
|
|
|
313
313
|
*/
|
|
314
314
|
handleResetObjectFit(e) {
|
|
315
315
|
const t = e == null ? void 0 : e.target;
|
|
316
|
-
t && this.editor.transformManager.resetObject(t);
|
|
316
|
+
t && this.editor.transformManager.resetObject({ object: t });
|
|
317
317
|
}
|
|
318
318
|
/**
|
|
319
319
|
* Проверяет, должно ли событие клавиатуры быть проигнорировано
|
|
@@ -322,25 +322,30 @@ class z {
|
|
|
322
322
|
* @returns true если событие должно быть проигнорировано
|
|
323
323
|
*/
|
|
324
324
|
_shouldIgnoreKeyboardEvent(e) {
|
|
325
|
-
const t = e.target;
|
|
326
|
-
if (
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
if (
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
325
|
+
const t = document.activeElement, s = e.target, n = ["input", "textarea", "select"];
|
|
326
|
+
if (s) {
|
|
327
|
+
const a = s.tagName.toLowerCase();
|
|
328
|
+
if (n.includes(a) || s.contentEditable === "true") return !0;
|
|
329
|
+
}
|
|
330
|
+
if (t && t !== s) {
|
|
331
|
+
const a = t.tagName.toLowerCase();
|
|
332
|
+
if (n.includes(a) || t.contentEditable === "true") return !0;
|
|
333
|
+
}
|
|
334
|
+
const i = window.getSelection();
|
|
335
|
+
if (i && !i.isCollapsed && i.rangeCount > 0) {
|
|
336
|
+
let d = i.getRangeAt(0).commonAncestorContainer;
|
|
337
|
+
d.nodeType === Node.TEXT_NODE && (d = d.parentElement);
|
|
338
|
+
const { keyboardIgnoreSelectors: c } = this.options;
|
|
339
|
+
if (c != null && c.length && d)
|
|
340
|
+
for (const h of c)
|
|
341
|
+
try {
|
|
342
|
+
const l = d;
|
|
343
|
+
if (l.matches && l.matches(h) || l.closest && l.closest(h))
|
|
344
|
+
return !0;
|
|
345
|
+
} catch (l) {
|
|
346
|
+
console.warn(`Error checking selection container with selector "${h}":`, l);
|
|
347
|
+
}
|
|
348
|
+
}
|
|
344
349
|
return !1;
|
|
345
350
|
}
|
|
346
351
|
/**
|
|
@@ -409,12 +414,12 @@ class _e {
|
|
|
409
414
|
* @returns
|
|
410
415
|
*/
|
|
411
416
|
_handleMessage({ data: e }) {
|
|
412
|
-
const { requestId: t, success: s, data: n, error:
|
|
413
|
-
if (!
|
|
417
|
+
const { requestId: t, success: s, data: n, error: i } = e, a = this._callbacks.get(t);
|
|
418
|
+
if (!a) {
|
|
414
419
|
console.warn(`No callback found for requestId: ${t}`);
|
|
415
420
|
return;
|
|
416
421
|
}
|
|
417
|
-
s ?
|
|
422
|
+
s ? a.resolve(n) : a.reject(new Error(i)), this._callbacks.delete(t);
|
|
418
423
|
}
|
|
419
424
|
/**
|
|
420
425
|
* Универсальный метод отправки команды в воркер
|
|
@@ -425,8 +430,8 @@ class _e {
|
|
|
425
430
|
*/
|
|
426
431
|
post(e, t, s = []) {
|
|
427
432
|
const n = `${e}:${D(8)}`;
|
|
428
|
-
return new Promise((
|
|
429
|
-
this._callbacks.set(n, { resolve:
|
|
433
|
+
return new Promise((i, a) => {
|
|
434
|
+
this._callbacks.set(n, { resolve: i, reject: a }), this.worker.postMessage({ action: e, payload: t, requestId: n }, s);
|
|
430
435
|
});
|
|
431
436
|
}
|
|
432
437
|
/**
|
|
@@ -436,52 +441,52 @@ class _e {
|
|
|
436
441
|
this.worker.terminate();
|
|
437
442
|
}
|
|
438
443
|
}
|
|
439
|
-
const
|
|
444
|
+
const E = 12, Re = 2, K = 8, q = 20, Ue = 100, ee = 20, te = 8, ze = 100, V = 32, se = 1, Ze = "#2B2D33", ne = "#3D8BF4", ie = "#FFFFFF";
|
|
440
445
|
function W(r, e, t, s, n) {
|
|
441
|
-
const
|
|
442
|
-
r.save(), r.translate(e, t), r.rotate(H.degreesToRadians(n.angle)), r.fillStyle =
|
|
446
|
+
const i = E, a = Re;
|
|
447
|
+
r.save(), r.translate(e, t), r.rotate(H.degreesToRadians(n.angle)), r.fillStyle = ie, r.strokeStyle = ne, r.lineWidth = se, r.beginPath(), r.roundRect(-i / 2, -i / 2, i, i, a), r.fill(), r.stroke(), r.restore();
|
|
443
448
|
}
|
|
444
449
|
function ue(r, e, t, s, n) {
|
|
445
|
-
const
|
|
446
|
-
r.save(), r.translate(e, t), r.rotate(H.degreesToRadians(n.angle)), r.fillStyle =
|
|
450
|
+
const i = K, a = q, o = Ue;
|
|
451
|
+
r.save(), r.translate(e, t), r.rotate(H.degreesToRadians(n.angle)), r.fillStyle = ie, r.strokeStyle = ne, r.lineWidth = se, r.beginPath(), r.roundRect(-i / 2, -a / 2, i, a, o), r.fill(), r.stroke(), r.restore();
|
|
447
452
|
}
|
|
448
453
|
function Me(r, e, t, s, n) {
|
|
449
|
-
const
|
|
450
|
-
r.save(), r.translate(e, t), r.rotate(H.degreesToRadians(n.angle)), r.fillStyle =
|
|
454
|
+
const i = ee, a = te, o = ze;
|
|
455
|
+
r.save(), r.translate(e, t), r.rotate(H.degreesToRadians(n.angle)), r.fillStyle = ie, r.strokeStyle = ne, r.lineWidth = se, r.beginPath(), r.roundRect(-i / 2, -a / 2, i, a, o), r.fill(), r.stroke(), r.restore();
|
|
451
456
|
}
|
|
452
457
|
const He = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", je = new Image();
|
|
453
458
|
je.src = He;
|
|
454
459
|
function Ye(r, e, t, s, n) {
|
|
455
|
-
const
|
|
456
|
-
r.save(), r.translate(e, t), r.rotate(H.degreesToRadians(n.angle)), r.fillStyle =
|
|
460
|
+
const a = V / 2;
|
|
461
|
+
r.save(), r.translate(e, t), r.rotate(H.degreesToRadians(n.angle)), r.fillStyle = Ze, r.beginPath(), r.arc(0, 0, a, 0, 2 * Math.PI), r.fill(), r.drawImage(je, -a / 2, -a / 2, a, a), r.restore();
|
|
457
462
|
}
|
|
458
463
|
const Pe = {
|
|
459
464
|
// Угловые точки
|
|
460
465
|
tl: {
|
|
461
466
|
render: W,
|
|
462
|
-
sizeX:
|
|
463
|
-
sizeY:
|
|
467
|
+
sizeX: E,
|
|
468
|
+
sizeY: E,
|
|
464
469
|
offsetX: 0,
|
|
465
470
|
offsetY: 0
|
|
466
471
|
},
|
|
467
472
|
tr: {
|
|
468
473
|
render: W,
|
|
469
|
-
sizeX:
|
|
470
|
-
sizeY:
|
|
474
|
+
sizeX: E,
|
|
475
|
+
sizeY: E,
|
|
471
476
|
offsetX: 0,
|
|
472
477
|
offsetY: 0
|
|
473
478
|
},
|
|
474
479
|
bl: {
|
|
475
480
|
render: W,
|
|
476
|
-
sizeX:
|
|
477
|
-
sizeY:
|
|
481
|
+
sizeX: E,
|
|
482
|
+
sizeY: E,
|
|
478
483
|
offsetX: 0,
|
|
479
484
|
offsetY: 0
|
|
480
485
|
},
|
|
481
486
|
br: {
|
|
482
487
|
render: W,
|
|
483
|
-
sizeX:
|
|
484
|
-
sizeY:
|
|
488
|
+
sizeX: E,
|
|
489
|
+
sizeY: E,
|
|
485
490
|
offsetX: 0,
|
|
486
491
|
offsetY: 0
|
|
487
492
|
},
|
|
@@ -534,14 +539,14 @@ class We {
|
|
|
534
539
|
sizeY: s.sizeY,
|
|
535
540
|
offsetX: s.offsetX,
|
|
536
541
|
offsetY: s.offsetY
|
|
537
|
-
}), t === "mtr" && (e[t].cursorStyle = "grab", e[t].mouseDownHandler = (
|
|
542
|
+
}), t === "mtr" && (e[t].cursorStyle = "grab", e[t].mouseDownHandler = (i, a, o, d) => {
|
|
538
543
|
var h;
|
|
539
|
-
(h =
|
|
544
|
+
(h = a.target.canvas) == null || h.setCursor("grabbing");
|
|
540
545
|
});
|
|
541
546
|
}), Se.ownDefaults.controls = e;
|
|
542
547
|
}
|
|
543
548
|
}
|
|
544
|
-
const Fe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNi44NzUgMi41YS42MjUuNjI1IDAgMCAwLS42MjUuNjI0VjYuMjVIMy4xMjVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2MTBjMCAuMzQ1LjI4LjYyNS42MjUuNjI1aDEwYy4zNDUgMCAuNjI1LS4yOC42MjUtLjYyNXYtMy4xMjZoMy4xMjVjLjM0NSAwIC42MjUtLjI4LjYyNS0uNjI1di0xMGEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTEwWm02Ljg3NSAxMGgyLjVWMy43NUg3LjV2Mi41aDUuNjI1Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NS42MjRabS0xMCAzLjc1VjcuNWg4Ljc1djguNzVIMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", Ve = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi41IDcuNWMwLS42OS41Ni0xLjI1IDEuMjUtMS4yNWgxMi41Yy42OSAwIDEuMjUuNTYgMS4yNSAxLjI1djguNzVjMCAuNjktLjU2IDEuMjUtMS4yNSAxLjI1SDMuNzVjLS42OSAwLTEuMjUtLjU2LTEuMjUtMS4yNVY3LjVabTEzLjc1IDBIMy43NXY4Ljc1aDEyLjVWNy41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMS44NzVhMi4xODggMi4xODggMCAwIDAtMi4xODggMi4xODh2Mi44MTJhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyYTMuNDM3IDMuNDM3IDAgMSAxIDYuODc1IDB2Mi44MTNhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyQTIuMTg4IDIuMTg4IDAgMCAwIDEwIDEuODc2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEwIDEyLjgxM2EuOTM3LjkzNyAwIDEgMCAwLTEuODc1LjkzNy45MzcgMCAwIDAgMCAxLjg3NFoiLz48L3N2Zz4=", Ge = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE2LjI1IDYuMjVINy41VjQuMzc1YTIuNSAyLjUgMCAwIDEgMi41LTIuNWMxLjIgMCAyLjI4MS44NiAyLjUxMiAyYS42MjUuNjI1IDAgMCAwIDEuMjI2LS4yNWMtLjM1NC0xLjczOC0xLjkyNS0zLTMuNzM4LTNhMy43NTQgMy43NTQgMCAwIDAtMy43NSAzLjc1VjYuMjVoLTIuNUExLjI1IDEuMjUgMCAwIDAgMi41IDcuNXY4Ljc1YTEuMjUgMS4yNSAwIDAgMCAxLjI1IDEuMjVoMTIuNWExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjcuNWExLjI1IDEuMjUgMCAwIDAtMS4yNS0xLjI1Wm0wIDEwSDMuNzVWNy41aDEyLjV2OC43NVptLTUuMzEzLTQuMzc1YS45MzcuOTM3IDAgMSAxLTEuODc0IDAgLjkzNy45MzcgMCAwIDEgMS44NzQgMFoiLz48L3N2Zz4K", Xe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIuNSA4LjEyNSAxMCAxMi41bDcuNS00LjM3NUwxMCAzLjc1IDIuNSA4LjEyNVoiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjY4NSAzLjIxYS42MjUuNjI1IDAgMCAxIC42MyAwbDcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOGw3LjUtNC4zNzVaTTMuNzQgOC4xMjUgMTAgMTEuNzc2bDYuMjYtMy42NTFMMTAgNC40NzQgMy43NCA4LjEyNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA5LjQ2YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDExLjc3NmwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA5LjQ2Wm0tMS42NiAyLjQxNUwxMCAxNS41MjZsNi4yNi0zLjY1MS0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNi0xLjk3NSAxLjE1MVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", Qe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMy4yMWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDguMTI1IDEwIDExLjc3Nmw2LjI2LTMuNjUxTDEwIDQuNDc0IDMuNzQgOC4xMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjcxNCAxMCAxMCAxMi41bDQuMjg2LTIuNSAzLjIxNCAxLjg3NUwxMCAxNi4yNWwtNy41LTQuMzc1TDUuNzE0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDkuNDZhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgMTEuNzc2bDMuOTctMi4zMTZhLjYyNS42MjUgMCAwIDEgLjYzIDBsMy4yMTUgMS44NzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhMNS40IDkuNDZabS0xLjY2IDIuNDE1TDEwIDE1LjUyNmw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2LTEuOTc1IDEuMTUxWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", $e = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTIuNSA2LjI1IDcuNSA0LjM3NSA3LjUtNC4zNzVMMTAgMS44NzUgMi41IDYuMjVaIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMS4zMzVhLjYyNS42MjUgMCAwIDEgLjYzIDBsNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4bDcuNS00LjM3NVpNMy43NCA2LjI1IDEwIDkuOTAxbDYuMjYtMy42NTFMMTAgMi41OTkgMy43NCA2LjI1WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDExLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCAxMy42NTFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgMTEuMzM1Wk0zLjc0IDEzLjc1IDEwIDE3LjQwMWw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTMuNzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgNy41ODVhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgOS45MDFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgNy41ODVaTTMuNzQgMTAgMTAgMTMuNjUxIDE2LjI2IDEwbC0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNkwzLjc0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", Je = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMS45NiAxMy40MzVhLjYyNS42MjUgMCAwIDEgLjg1NS0uMjI1TDEwIDE3LjQwMWw3LjE4NS00LjE5YS42MjUuNjI1IDAgMCAxIC42MyAxLjA3OWwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEtLjIyNS0uODU1Wk05LjY4NSAxLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDYuMjUgMTAgOS45MDFsNi4yNi0zLjY1MUwxMCAyLjU5OSAzLjc0IDYuMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im01LjcxNCAxMS44NzUgNC4yODYgMi41IDQuMjg2LTIuNUwxNy41IDEzLjc1IDEwIDE4LjEyNSAyLjUgMTMuNzVsMy4yMTQtMS44NzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgMTEuMzM1YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDEzLjY1MWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCAxMS4zMzVaTTMuNzQgMTMuNzUgMTAgMTcuNDAxbDYuMjYtMy42NTEtMS45NzQtMS4xNTEtMy45NzEgMi4zMTZhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTMuOTctMi4zMTZMMy43NCAxMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA3LjU4NWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCA5LjkwMWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA3LjU4NVpNMy43NCAxMCAxMCAxMy42NTEgMTYuMjYgMTBsLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTBaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=", Ke = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI0VDNEU0MCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOC4xMjUgMS4yNUExLjg3NSAxLjg3NSAwIDAgMCA2LjI1IDMuMTI1di42MjVIMy4xMjVhLjYyNS42MjUgMCAwIDAgMCAxLjI1aC42MjV2MTEuMjVBMS4yNSAxLjI1IDAgMCAwIDUgMTcuNWgxMGExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjVoLjYyNWEuNjI1LjYyNSAwIDAgMCAwLTEuMjVIMTMuNzV2LS42MjVhMS44NzUgMS44NzUgMCAwIDAtMS44NzUtMS44NzVoLTMuNzVabTQuMzc1IDIuNXYtLjYyNWEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2LjYyNWg1Wk01IDE2LjI1VjVoMTB2MTEuMjVINVpNOC4xMjUgNy41Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NWEuNjI1LjYyNSAwIDEgMS0xLjI1IDB2LTVjMC0uMzQ1LjI4LS42MjUuNjI1LS42MjVabTQuMzc1IDUuNjI1di01YS42MjUuNjI1IDAgMCAwLTEuMjUgMHY1YS42MjUuNjI1IDAgMSAwIDEuMjUgMFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==",
|
|
549
|
+
const Fe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNi44NzUgMi41YS42MjUuNjI1IDAgMCAwLS42MjUuNjI0VjYuMjVIMy4xMjVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2MTBjMCAuMzQ1LjI4LjYyNS42MjUuNjI1aDEwYy4zNDUgMCAuNjI1LS4yOC42MjUtLjYyNXYtMy4xMjZoMy4xMjVjLjM0NSAwIC42MjUtLjI4LjYyNS0uNjI1di0xMGEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTEwWm02Ljg3NSAxMGgyLjVWMy43NUg3LjV2Mi41aDUuNjI1Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NS42MjRabS0xMCAzLjc1VjcuNWg4Ljc1djguNzVIMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", Ve = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi41IDcuNWMwLS42OS41Ni0xLjI1IDEuMjUtMS4yNWgxMi41Yy42OSAwIDEuMjUuNTYgMS4yNSAxLjI1djguNzVjMCAuNjktLjU2IDEuMjUtMS4yNSAxLjI1SDMuNzVjLS42OSAwLTEuMjUtLjU2LTEuMjUtMS4yNVY3LjVabTEzLjc1IDBIMy43NXY4Ljc1aDEyLjVWNy41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMS44NzVhMi4xODggMi4xODggMCAwIDAtMi4xODggMi4xODh2Mi44MTJhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyYTMuNDM3IDMuNDM3IDAgMSAxIDYuODc1IDB2Mi44MTNhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyQTIuMTg4IDIuMTg4IDAgMCAwIDEwIDEuODc2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEwIDEyLjgxM2EuOTM3LjkzNyAwIDEgMCAwLTEuODc1LjkzNy45MzcgMCAwIDAgMCAxLjg3NFoiLz48L3N2Zz4=", Ge = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE2LjI1IDYuMjVINy41VjQuMzc1YTIuNSAyLjUgMCAwIDEgMi41LTIuNWMxLjIgMCAyLjI4MS44NiAyLjUxMiAyYS42MjUuNjI1IDAgMCAwIDEuMjI2LS4yNWMtLjM1NC0xLjczOC0xLjkyNS0zLTMuNzM4LTNhMy43NTQgMy43NTQgMCAwIDAtMy43NSAzLjc1VjYuMjVoLTIuNUExLjI1IDEuMjUgMCAwIDAgMi41IDcuNXY4Ljc1YTEuMjUgMS4yNSAwIDAgMCAxLjI1IDEuMjVoMTIuNWExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjcuNWExLjI1IDEuMjUgMCAwIDAtMS4yNS0xLjI1Wm0wIDEwSDMuNzVWNy41aDEyLjV2OC43NVptLTUuMzEzLTQuMzc1YS45MzcuOTM3IDAgMSAxLTEuODc0IDAgLjkzNy45MzcgMCAwIDEgMS44NzQgMFoiLz48L3N2Zz4K", Xe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIuNSA4LjEyNSAxMCAxMi41bDcuNS00LjM3NUwxMCAzLjc1IDIuNSA4LjEyNVoiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjY4NSAzLjIxYS42MjUuNjI1IDAgMCAxIC42MyAwbDcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOGw3LjUtNC4zNzVaTTMuNzQgOC4xMjUgMTAgMTEuNzc2bDYuMjYtMy42NTFMMTAgNC40NzQgMy43NCA4LjEyNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA5LjQ2YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDExLjc3NmwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA5LjQ2Wm0tMS42NiAyLjQxNUwxMCAxNS41MjZsNi4yNi0zLjY1MS0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNi0xLjk3NSAxLjE1MVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", Qe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMy4yMWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDguMTI1IDEwIDExLjc3Nmw2LjI2LTMuNjUxTDEwIDQuNDc0IDMuNzQgOC4xMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjcxNCAxMCAxMCAxMi41bDQuMjg2LTIuNSAzLjIxNCAxLjg3NUwxMCAxNi4yNWwtNy41LTQuMzc1TDUuNzE0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDkuNDZhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgMTEuNzc2bDMuOTctMi4zMTZhLjYyNS42MjUgMCAwIDEgLjYzIDBsMy4yMTUgMS44NzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhMNS40IDkuNDZabS0xLjY2IDIuNDE1TDEwIDE1LjUyNmw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2LTEuOTc1IDEuMTUxWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", $e = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTIuNSA2LjI1IDcuNSA0LjM3NSA3LjUtNC4zNzVMMTAgMS44NzUgMi41IDYuMjVaIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMS4zMzVhLjYyNS42MjUgMCAwIDEgLjYzIDBsNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4bDcuNS00LjM3NVpNMy43NCA2LjI1IDEwIDkuOTAxbDYuMjYtMy42NTFMMTAgMi41OTkgMy43NCA2LjI1WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDExLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCAxMy42NTFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgMTEuMzM1Wk0zLjc0IDEzLjc1IDEwIDE3LjQwMWw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTMuNzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgNy41ODVhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgOS45MDFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgNy41ODVaTTMuNzQgMTAgMTAgMTMuNjUxIDE2LjI2IDEwbC0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNkwzLjc0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", Je = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMS45NiAxMy40MzVhLjYyNS42MjUgMCAwIDEgLjg1NS0uMjI1TDEwIDE3LjQwMWw3LjE4NS00LjE5YS42MjUuNjI1IDAgMCAxIC42MyAxLjA3OWwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEtLjIyNS0uODU1Wk05LjY4NSAxLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDYuMjUgMTAgOS45MDFsNi4yNi0zLjY1MUwxMCAyLjU5OSAzLjc0IDYuMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im01LjcxNCAxMS44NzUgNC4yODYgMi41IDQuMjg2LTIuNUwxNy41IDEzLjc1IDEwIDE4LjEyNSAyLjUgMTMuNzVsMy4yMTQtMS44NzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgMTEuMzM1YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDEzLjY1MWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCAxMS4zMzVaTTMuNzQgMTMuNzUgMTAgMTcuNDAxbDYuMjYtMy42NTEtMS45NzQtMS4xNTEtMy45NzEgMi4zMTZhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTMuOTctMi4zMTZMMy43NCAxMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA3LjU4NWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCA5LjkwMWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA3LjU4NVpNMy43NCAxMCAxMCAxMy42NTEgMTYuMjYgMTBsLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTBaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=", Ke = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI0VDNEU0MCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOC4xMjUgMS4yNUExLjg3NSAxLjg3NSAwIDAgMCA2LjI1IDMuMTI1di42MjVIMy4xMjVhLjYyNS42MjUgMCAwIDAgMCAxLjI1aC42MjV2MTEuMjVBMS4yNSAxLjI1IDAgMCAwIDUgMTcuNWgxMGExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjVoLjYyNWEuNjI1LjYyNSAwIDAgMCAwLTEuMjVIMTMuNzV2LS42MjVhMS44NzUgMS44NzUgMCAwIDAtMS44NzUtMS44NzVoLTMuNzVabTQuMzc1IDIuNXYtLjYyNWEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2LjYyNWg1Wk01IDE2LjI1VjVoMTB2MTEuMjVINVpNOC4xMjUgNy41Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NWEuNjI1LjYyNSAwIDEgMS0xLjI1IDB2LTVjMC0uMzQ1LjI4LS42MjUuNjI1LS42MjVabTQuMzc1IDUuNjI1di01YS42MjUuNjI1IDAgMCAwLTEuMjUgMHY1YS42MjUuNjI1IDAgMSAwIDEuMjUgMFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", z = {
|
|
545
550
|
style: {
|
|
546
551
|
position: "absolute",
|
|
547
552
|
display: "none",
|
|
@@ -651,11 +656,11 @@ class qe {
|
|
|
651
656
|
_initToolbar() {
|
|
652
657
|
if (!this.options.showToolbar) return;
|
|
653
658
|
const e = this.options.toolbar || {};
|
|
654
|
-
this.config = ge(p(p({},
|
|
655
|
-
style: p(p({},
|
|
656
|
-
btnStyle: p(p({},
|
|
657
|
-
icons: p(p({},
|
|
658
|
-
handlers: p(p({},
|
|
659
|
+
this.config = ge(p(p({}, z), e), {
|
|
660
|
+
style: p(p({}, z.style), e.style || {}),
|
|
661
|
+
btnStyle: p(p({}, z.btnStyle), e.btnStyle || {}),
|
|
662
|
+
icons: p(p({}, z.icons), e.icons || {}),
|
|
663
|
+
handlers: p(p({}, z.handlers), e.handlers || {})
|
|
659
664
|
}), this.currentTarget = null, this.currentLocked = !1, this.isTransforming = !1, this._onMouseDown = this._handleMouseDown.bind(this), this._onObjectMoving = this._startTransform.bind(this), this._onObjectScaling = this._startTransform.bind(this), this._onObjectRotating = this._startTransform.bind(this), this._onMouseUp = this._endTransform.bind(this), this._onObjectModified = this._endTransform.bind(this), this._onSelectionChange = this._updateToolbar.bind(this), this._onSelectionClear = () => {
|
|
660
665
|
this.el.style.display = "none";
|
|
661
666
|
}, this._createDOM(), this._bindEvents();
|
|
@@ -682,8 +687,8 @@ class qe {
|
|
|
682
687
|
_renderButtons(e) {
|
|
683
688
|
this.el.innerHTML = "";
|
|
684
689
|
for (const t of e) {
|
|
685
|
-
const { name: s, handle: n } = t, { icons:
|
|
686
|
-
d.innerHTML =
|
|
690
|
+
const { name: s, handle: n } = t, { icons: i = {}, btnStyle: a, handlers: o = {} } = this.config, d = document.createElement("button");
|
|
691
|
+
d.innerHTML = i[n] ? `<img src="${i[n]}" title="${s}" />` : s, Object.assign(d.style, a), d.onclick = () => {
|
|
687
692
|
var c;
|
|
688
693
|
return (c = o[n]) == null ? void 0 : c.call(o, this.editor);
|
|
689
694
|
}, d.onmousedown = (c) => {
|
|
@@ -746,7 +751,7 @@ class qe {
|
|
|
746
751
|
}
|
|
747
752
|
const { el: t, config: s, canvas: n } = this;
|
|
748
753
|
e.setCoords();
|
|
749
|
-
const
|
|
754
|
+
const i = n.getZoom(), [, , , , a, o] = n.viewportTransform, { x: d } = e.getCenterPoint(), { top: c, height: h } = e.getBoundingRect(), g = d * i + a - t.offsetWidth / 2, M = s.offsetTop || 0, f = (c + h) * i + o + M;
|
|
750
755
|
Object.assign(t.style, {
|
|
751
756
|
left: `${g}px`,
|
|
752
757
|
top: `${f}px`,
|
|
@@ -772,7 +777,7 @@ class et {
|
|
|
772
777
|
return this.patches[this.currentIndex - 1] || null;
|
|
773
778
|
}
|
|
774
779
|
_createDiffPatcher() {
|
|
775
|
-
this.diffPatcher =
|
|
780
|
+
this.diffPatcher = Te({
|
|
776
781
|
objectHash(e) {
|
|
777
782
|
const t = e;
|
|
778
783
|
return [
|
|
@@ -796,7 +801,7 @@ class et {
|
|
|
796
801
|
includeValueOnMove: !1
|
|
797
802
|
},
|
|
798
803
|
textDiff: {
|
|
799
|
-
diffMatchPatch:
|
|
804
|
+
diffMatchPatch: Oe,
|
|
800
805
|
minLength: 60
|
|
801
806
|
}
|
|
802
807
|
});
|
|
@@ -827,8 +832,8 @@ class et {
|
|
|
827
832
|
getFullState() {
|
|
828
833
|
const { baseState: e, currentIndex: t, patches: s } = this;
|
|
829
834
|
let n = JSON.parse(JSON.stringify(e));
|
|
830
|
-
for (let
|
|
831
|
-
n = this.diffPatcher.patch(n, s[
|
|
835
|
+
for (let i = 0; i < t; i += 1)
|
|
836
|
+
n = this.diffPatcher.patch(n, s[i].diff);
|
|
832
837
|
return console.log("getFullState state", n), n;
|
|
833
838
|
}
|
|
834
839
|
/**
|
|
@@ -873,10 +878,10 @@ class et {
|
|
|
873
878
|
return j(this, null, function* () {
|
|
874
879
|
if (!e) return;
|
|
875
880
|
console.log("loadStateFromFullState fullState", e);
|
|
876
|
-
const { canvas: t, canvasManager: s, interactionBlocker: n } = this.editor, { width:
|
|
881
|
+
const { canvas: t, canvasManager: s, interactionBlocker: n } = this.editor, { width: i, height: a } = t;
|
|
877
882
|
yield t.loadFromJSON(e);
|
|
878
883
|
const o = t.getObjects().find((c) => c.id === "montage-area");
|
|
879
|
-
o && (this.editor.montageArea = o, (
|
|
884
|
+
o && (this.editor.montageArea = o, (i !== t.getWidth() || a !== t.getHeight()) && s.updateCanvas());
|
|
880
885
|
const d = t.getObjects().find((c) => c.id === "overlay-mask");
|
|
881
886
|
d && (n.overlayMask = d, n.overlayMask.visible = !1), t.renderAll(), t.fire("editor:history-state-loaded", {
|
|
882
887
|
fullState: e,
|
|
@@ -963,8 +968,8 @@ class et {
|
|
|
963
968
|
});
|
|
964
969
|
}
|
|
965
970
|
}
|
|
966
|
-
const tt = 0.1, st = 2, nt = 0.1,
|
|
967
|
-
class
|
|
971
|
+
const tt = 0.1, st = 2, nt = 0.1, it = 90, _ = 16, R = 16, T = 4096, O = 4096, me = "application/image-editor:";
|
|
972
|
+
class L {
|
|
968
973
|
constructor({ editor: e }) {
|
|
969
974
|
this.editor = e, this.options = e.options, this._createdBlobUrls = [], this.acceptContentTypes = this.editor.options.acceptContentTypes, this.acceptFormats = this.getAllowedFormatsFromContentTypes();
|
|
970
975
|
}
|
|
@@ -986,10 +991,10 @@ class E {
|
|
|
986
991
|
source: t,
|
|
987
992
|
scale: s = `image-${this.options.scaleType}`,
|
|
988
993
|
withoutSave: n = !1,
|
|
989
|
-
fromClipboard:
|
|
994
|
+
fromClipboard: i = !1
|
|
990
995
|
} = e;
|
|
991
996
|
if (!t) return null;
|
|
992
|
-
const { canvas:
|
|
997
|
+
const { canvas: a, montageArea: o, transformManager: d, historyManager: c, errorManager: h } = this.editor, l = yield this.getContentType(t), g = L.getFormatFromContentType(l), { acceptContentTypes: M, acceptFormats: f } = this;
|
|
993
998
|
if (!this.isAllowedContentType(l)) {
|
|
994
999
|
const m = `Неверный contentType для изображения: ${l}. Ожидается один из: ${this.acceptContentTypes.join(", ")}.`;
|
|
995
1000
|
return h.emitError({
|
|
@@ -997,7 +1002,7 @@ class E {
|
|
|
997
1002
|
method: "importImage",
|
|
998
1003
|
code: "INVALID_CONTENT_TYPE",
|
|
999
1004
|
message: m,
|
|
1000
|
-
data: { source: t, format: g, contentType: l, acceptContentTypes: M, acceptFormats: f, fromClipboard:
|
|
1005
|
+
data: { source: t, format: g, contentType: l, acceptContentTypes: M, acceptFormats: f, fromClipboard: i }
|
|
1001
1006
|
}), null;
|
|
1002
1007
|
}
|
|
1003
1008
|
c.suspendHistory();
|
|
@@ -1014,7 +1019,7 @@ class E {
|
|
|
1014
1019
|
method: "importImage",
|
|
1015
1020
|
code: "INVALID_SOURCE_TYPE",
|
|
1016
1021
|
message: "Неверный тип источника изображения. Ожидается URL или объект File.",
|
|
1017
|
-
data: { source: t, format: g, contentType: l, acceptContentTypes: M, acceptFormats: f, fromClipboard:
|
|
1022
|
+
data: { source: t, format: g, contentType: l, acceptContentTypes: M, acceptFormats: f, fromClipboard: i }
|
|
1018
1023
|
}), null;
|
|
1019
1024
|
if (this._createdBlobUrls.push(m), g === "svg") {
|
|
1020
1025
|
const v = yield Ce(m);
|
|
@@ -1025,7 +1030,7 @@ class E {
|
|
|
1025
1030
|
if (u instanceof U) {
|
|
1026
1031
|
const v = u.getElement();
|
|
1027
1032
|
let C = "";
|
|
1028
|
-
if (v instanceof HTMLImageElement ? C = v.src : v instanceof HTMLCanvasElement && (C = v.toDataURL()), A >
|
|
1033
|
+
if (v instanceof HTMLImageElement ? C = v.src : v instanceof HTMLCanvasElement && (C = v.toDataURL()), A > O || b > T) {
|
|
1029
1034
|
const w = yield this.resizeImageToBoundaries(C, "max"), k = URL.createObjectURL(w);
|
|
1030
1035
|
this._createdBlobUrls.push(k), u = yield U.fromURL(k, { crossOrigin: "anonymous" });
|
|
1031
1036
|
} else if (A < R || b < _) {
|
|
@@ -1039,7 +1044,7 @@ class E {
|
|
|
1039
1044
|
const { width: v, height: C } = o, w = this.calculateScaleFactor({ imageObject: u, scaleType: s });
|
|
1040
1045
|
s === "image-contain" && w < 1 ? d.fitObject({ object: u, type: "contain", withoutSave: !0 }) : s === "image-cover" && (b > v || A > C) && d.fitObject({ object: u, type: "cover", withoutSave: !0 });
|
|
1041
1046
|
}
|
|
1042
|
-
|
|
1047
|
+
a.add(u), a.centerObject(u), a.setActiveObject(u), a.renderAll(), c.resumeHistory(), n || c.saveState();
|
|
1043
1048
|
const S = {
|
|
1044
1049
|
image: u,
|
|
1045
1050
|
format: g,
|
|
@@ -1047,16 +1052,16 @@ class E {
|
|
|
1047
1052
|
scale: s,
|
|
1048
1053
|
withoutSave: n,
|
|
1049
1054
|
source: t,
|
|
1050
|
-
fromClipboard:
|
|
1055
|
+
fromClipboard: i
|
|
1051
1056
|
};
|
|
1052
|
-
return
|
|
1057
|
+
return a.fire("editor:image-imported", S), S;
|
|
1053
1058
|
} catch (m) {
|
|
1054
1059
|
return h.emitError({
|
|
1055
1060
|
origin: "ImageManager",
|
|
1056
1061
|
method: "importImage",
|
|
1057
1062
|
code: "IMPORT_FAILED",
|
|
1058
1063
|
message: `Ошибка импорта изображения: ${m.message}`,
|
|
1059
|
-
data: { source: t, format: g, contentType: l, scale: s, withoutSave: n, fromClipboard:
|
|
1064
|
+
data: { source: t, format: g, contentType: l, scale: s, withoutSave: n, fromClipboard: i }
|
|
1060
1065
|
}), c.resumeHistory(), null;
|
|
1061
1066
|
}
|
|
1062
1067
|
});
|
|
@@ -1071,13 +1076,13 @@ class E {
|
|
|
1071
1076
|
*/
|
|
1072
1077
|
resizeImageToBoundaries(e, t = "max") {
|
|
1073
1078
|
return j(this, null, function* () {
|
|
1074
|
-
let s = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${
|
|
1079
|
+
let s = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${T}x${O}`;
|
|
1075
1080
|
t === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${_}x${R}`);
|
|
1076
1081
|
const n = {
|
|
1077
1082
|
dataURL: e,
|
|
1078
1083
|
sizeType: t,
|
|
1079
|
-
maxWidth:
|
|
1080
|
-
maxHeight:
|
|
1084
|
+
maxWidth: T,
|
|
1085
|
+
maxHeight: O,
|
|
1081
1086
|
minWidth: _,
|
|
1082
1087
|
minHeight: R
|
|
1083
1088
|
};
|
|
@@ -1107,12 +1112,12 @@ class E {
|
|
|
1107
1112
|
fileName: t = "image.png",
|
|
1108
1113
|
contentType: s = "image/png",
|
|
1109
1114
|
exportAsBase64: n = !1,
|
|
1110
|
-
exportAsBlob:
|
|
1111
|
-
} = e, { canvas:
|
|
1115
|
+
exportAsBlob: i = !1
|
|
1116
|
+
} = e, { canvas: a, montageArea: o, workerManager: d } = this.editor;
|
|
1112
1117
|
try {
|
|
1113
|
-
const c = s === "application/pdf", h = c ? "image/jpg" : s, l =
|
|
1118
|
+
const c = s === "application/pdf", h = c ? "image/jpg" : s, l = L.getFormatFromContentType(h);
|
|
1114
1119
|
o.setCoords();
|
|
1115
|
-
const { left: g, top: M, width: f, height: m } = o.getBoundingRect(), u = yield
|
|
1120
|
+
const { left: g, top: M, width: f, height: m } = o.getBoundingRect(), u = yield a.clone(["id", "format", "locked"]);
|
|
1116
1121
|
u.enableRetinaScaling = !1, ["image/jpg", "image/jpeg"].includes(h) && (u.backgroundColor = "#ffffff");
|
|
1117
1122
|
const b = u.getObjects().find((I) => I.id === o.id);
|
|
1118
1123
|
b && (b.visible = !1), u.viewportTransform = [1, 0, 0, 1, -g, -M], u.setDimensions({ width: f, height: m }, { backstoreOnly: !0 }), u.renderAll();
|
|
@@ -1120,31 +1125,31 @@ class E {
|
|
|
1120
1125
|
if (l === "svg" && A) {
|
|
1121
1126
|
const I = u.toSVG();
|
|
1122
1127
|
u.dispose();
|
|
1123
|
-
const
|
|
1124
|
-
image:
|
|
1128
|
+
const N = {
|
|
1129
|
+
image: L._exportSVGStringAsFile(I, {
|
|
1125
1130
|
exportAsBase64: n,
|
|
1126
|
-
exportAsBlob:
|
|
1131
|
+
exportAsBlob: i,
|
|
1127
1132
|
fileName: t
|
|
1128
1133
|
}),
|
|
1129
1134
|
format: "svg",
|
|
1130
1135
|
contentType: "image/svg+xml",
|
|
1131
1136
|
fileName: t.replace(/\.[^/.]+$/, ".svg")
|
|
1132
1137
|
};
|
|
1133
|
-
return
|
|
1138
|
+
return a.fire("editor:canvas-exported", N), N;
|
|
1134
1139
|
}
|
|
1135
1140
|
const S = yield new Promise((I, x) => {
|
|
1136
|
-
u.getElement().toBlob((
|
|
1137
|
-
|
|
1141
|
+
u.getElement().toBlob((N) => {
|
|
1142
|
+
N ? I(N) : x(new Error("Failed to create Blob from canvas"));
|
|
1138
1143
|
});
|
|
1139
1144
|
});
|
|
1140
|
-
if (u.dispose(),
|
|
1145
|
+
if (u.dispose(), i) {
|
|
1141
1146
|
const I = {
|
|
1142
1147
|
image: S,
|
|
1143
1148
|
format: l,
|
|
1144
1149
|
contentType: h,
|
|
1145
1150
|
fileName: t
|
|
1146
1151
|
};
|
|
1147
|
-
return
|
|
1152
|
+
return a.fire("editor:canvas-exported", I), I;
|
|
1148
1153
|
}
|
|
1149
1154
|
const v = yield createImageBitmap(S), C = yield d.post(
|
|
1150
1155
|
"toDataURL",
|
|
@@ -1152,19 +1157,19 @@ class E {
|
|
|
1152
1157
|
[v]
|
|
1153
1158
|
);
|
|
1154
1159
|
if (c) {
|
|
1155
|
-
const x = f * 0.264583,
|
|
1156
|
-
orientation: x >
|
|
1160
|
+
const x = f * 0.264583, N = m * 0.264583, be = (yield this.editor.moduleLoader.loadModule("jspdf")).jsPDF, $ = new be({
|
|
1161
|
+
orientation: x > N ? "landscape" : "portrait",
|
|
1157
1162
|
unit: "mm",
|
|
1158
|
-
format: [x,
|
|
1163
|
+
format: [x, N]
|
|
1159
1164
|
});
|
|
1160
|
-
if ($.addImage(String(C), "JPG", 0, 0, x,
|
|
1165
|
+
if ($.addImage(String(C), "JPG", 0, 0, x, N), n) {
|
|
1161
1166
|
const ce = {
|
|
1162
1167
|
image: $.output("datauristring"),
|
|
1163
1168
|
format: "pdf",
|
|
1164
1169
|
contentType: "application/pdf",
|
|
1165
1170
|
fileName: t
|
|
1166
1171
|
};
|
|
1167
|
-
return
|
|
1172
|
+
return a.fire("editor:canvas-exported", ce), ce;
|
|
1168
1173
|
}
|
|
1169
1174
|
const pe = $.output("blob"), re = {
|
|
1170
1175
|
image: new File([pe], t, { type: "application/pdf" }),
|
|
@@ -1172,7 +1177,7 @@ class E {
|
|
|
1172
1177
|
contentType: "application/pdf",
|
|
1173
1178
|
fileName: t
|
|
1174
1179
|
};
|
|
1175
|
-
return
|
|
1180
|
+
return a.fire("editor:canvas-exported", re), re;
|
|
1176
1181
|
}
|
|
1177
1182
|
if (n) {
|
|
1178
1183
|
const I = {
|
|
@@ -1181,7 +1186,7 @@ class E {
|
|
|
1181
1186
|
contentType: h,
|
|
1182
1187
|
fileName: t
|
|
1183
1188
|
};
|
|
1184
|
-
return
|
|
1189
|
+
return a.fire("editor:canvas-exported", I), I;
|
|
1185
1190
|
}
|
|
1186
1191
|
const w = l === "svg" && !A ? t.replace(/\.[^/.]+$/, ".png") : t, oe = {
|
|
1187
1192
|
image: new File([S], w, { type: h }),
|
|
@@ -1189,14 +1194,14 @@ class E {
|
|
|
1189
1194
|
contentType: h,
|
|
1190
1195
|
fileName: w
|
|
1191
1196
|
};
|
|
1192
|
-
return
|
|
1197
|
+
return a.fire("editor:canvas-exported", oe), oe;
|
|
1193
1198
|
} catch (c) {
|
|
1194
1199
|
return this.editor.errorManager.emitError({
|
|
1195
1200
|
origin: "ImageManager",
|
|
1196
1201
|
method: "exportCanvasAsImageFile",
|
|
1197
1202
|
code: "IMAGE_EXPORT_FAILED",
|
|
1198
1203
|
message: `Ошибка экспорта изображения: ${c.message}`,
|
|
1199
|
-
data: { contentType: s, fileName: t, exportAsBase64: n, exportAsBlob:
|
|
1204
|
+
data: { contentType: s, fileName: t, exportAsBase64: n, exportAsBlob: i }
|
|
1200
1205
|
}), null;
|
|
1201
1206
|
}
|
|
1202
1207
|
});
|
|
@@ -1218,8 +1223,8 @@ class E {
|
|
|
1218
1223
|
object: t,
|
|
1219
1224
|
fileName: s = "image.png",
|
|
1220
1225
|
contentType: n = "image/png",
|
|
1221
|
-
exportAsBase64:
|
|
1222
|
-
exportAsBlob:
|
|
1226
|
+
exportAsBase64: i = !1,
|
|
1227
|
+
exportAsBlob: a = !1
|
|
1223
1228
|
} = e, { canvas: o, workerManager: d } = this.editor, c = t || o.getActiveObject();
|
|
1224
1229
|
if (!c)
|
|
1225
1230
|
return this.editor.errorManager.emitError({
|
|
@@ -1227,14 +1232,14 @@ class E {
|
|
|
1227
1232
|
method: "exportObjectAsImageFile",
|
|
1228
1233
|
code: "NO_OBJECT_SELECTED",
|
|
1229
1234
|
message: "Не выбран объект для экспорта",
|
|
1230
|
-
data: { contentType: n, fileName: s, exportAsBase64:
|
|
1235
|
+
data: { contentType: n, fileName: s, exportAsBase64: i, exportAsBlob: a }
|
|
1231
1236
|
}), null;
|
|
1232
1237
|
try {
|
|
1233
|
-
const h =
|
|
1238
|
+
const h = L.getFormatFromContentType(n);
|
|
1234
1239
|
if (h === "svg") {
|
|
1235
|
-
const m = c.toSVG(), u =
|
|
1236
|
-
exportAsBase64:
|
|
1237
|
-
exportAsBlob:
|
|
1240
|
+
const m = c.toSVG(), u = L._exportSVGStringAsFile(m, {
|
|
1241
|
+
exportAsBase64: i,
|
|
1242
|
+
exportAsBlob: a,
|
|
1238
1243
|
fileName: s
|
|
1239
1244
|
}), b = {
|
|
1240
1245
|
object: c,
|
|
@@ -1245,7 +1250,7 @@ class E {
|
|
|
1245
1250
|
};
|
|
1246
1251
|
return o.fire("editor:object-exported", b), b;
|
|
1247
1252
|
}
|
|
1248
|
-
if (
|
|
1253
|
+
if (i && c instanceof U) {
|
|
1249
1254
|
const m = yield createImageBitmap(c.getElement()), u = yield d.post(
|
|
1250
1255
|
"toDataURL",
|
|
1251
1256
|
{
|
|
@@ -1270,7 +1275,7 @@ class E {
|
|
|
1270
1275
|
b ? m(b) : u(new Error("Failed to create Blob from canvas"));
|
|
1271
1276
|
});
|
|
1272
1277
|
});
|
|
1273
|
-
if (
|
|
1278
|
+
if (a) {
|
|
1274
1279
|
const m = {
|
|
1275
1280
|
object: c,
|
|
1276
1281
|
image: g,
|
|
@@ -1294,7 +1299,7 @@ class E {
|
|
|
1294
1299
|
method: "exportObjectAsImageFile",
|
|
1295
1300
|
code: "IMAGE_EXPORT_FAILED",
|
|
1296
1301
|
message: `Ошибка экспорта объекта: ${h.message}`,
|
|
1297
|
-
data: { contentType: n, fileName: s, exportAsBase64:
|
|
1302
|
+
data: { contentType: n, fileName: s, exportAsBase64: i, exportAsBlob: a }
|
|
1298
1303
|
}), null;
|
|
1299
1304
|
}
|
|
1300
1305
|
});
|
|
@@ -1310,7 +1315,7 @@ class E {
|
|
|
1310
1315
|
* @returns массив допустимых форматов изображений
|
|
1311
1316
|
*/
|
|
1312
1317
|
getAllowedFormatsFromContentTypes() {
|
|
1313
|
-
return this.acceptContentTypes.map((e) =>
|
|
1318
|
+
return this.acceptContentTypes.map((e) => L.getFormatFromContentType(e)).filter((e) => e);
|
|
1314
1319
|
}
|
|
1315
1320
|
/**
|
|
1316
1321
|
* Проверяет, является ли contentType допустимым типом изображения.
|
|
@@ -1361,11 +1366,11 @@ class E {
|
|
|
1361
1366
|
getContentTypeFromExtension(e) {
|
|
1362
1367
|
var t;
|
|
1363
1368
|
try {
|
|
1364
|
-
const n = (t = new URL(e).pathname.split(".").pop()) == null ? void 0 : t.toLowerCase(),
|
|
1365
|
-
return this.acceptContentTypes.forEach((
|
|
1366
|
-
const o =
|
|
1367
|
-
o && (
|
|
1368
|
-
}), n &&
|
|
1369
|
+
const n = (t = new URL(e).pathname.split(".").pop()) == null ? void 0 : t.toLowerCase(), i = {};
|
|
1370
|
+
return this.acceptContentTypes.forEach((a) => {
|
|
1371
|
+
const o = L.getFormatFromContentType(a);
|
|
1372
|
+
o && (i[o] = a);
|
|
1373
|
+
}), n && i[n] || "application/octet-stream";
|
|
1369
1374
|
} catch (s) {
|
|
1370
1375
|
return console.warn("Не удалось определить расширение из URL:", e, s), "application/octet-stream";
|
|
1371
1376
|
}
|
|
@@ -1383,8 +1388,8 @@ class E {
|
|
|
1383
1388
|
}) {
|
|
1384
1389
|
const { montageArea: s } = this.editor;
|
|
1385
1390
|
if (!s || !e) return 1;
|
|
1386
|
-
const n = s.width,
|
|
1387
|
-
return t === "contain" || t === "image-contain" ? Math.min(n /
|
|
1391
|
+
const n = s.width, i = s.height, { width: a, height: o } = e;
|
|
1392
|
+
return t === "contain" || t === "image-contain" ? Math.min(n / a, i / o) : t === "cover" || t === "image-cover" ? Math.max(n / a, i / o) : 1;
|
|
1388
1393
|
}
|
|
1389
1394
|
/**
|
|
1390
1395
|
* Преобразует SVG-строку в Blob, файл, или base64
|
|
@@ -1416,7 +1421,7 @@ class E {
|
|
|
1416
1421
|
return t ? t[1] : "";
|
|
1417
1422
|
}
|
|
1418
1423
|
}
|
|
1419
|
-
const B = (r, e, t) => Math.max(Math.min(r, t), e), fe = (r, e) => r * e,
|
|
1424
|
+
const B = (r, e, t) => Math.max(Math.min(r, t), e), fe = (r, e) => r * e, at = (r, e) => new F(r / 2, e / 2);
|
|
1420
1425
|
function ot(r) {
|
|
1421
1426
|
return ((r == null ? void 0 : r.type) === "image" || (r == null ? void 0 : r.format) === "svg") && typeof (r == null ? void 0 : r.width) == "number" && typeof (r == null ? void 0 : r.height) == "number";
|
|
1422
1427
|
}
|
|
@@ -1448,17 +1453,17 @@ class rt {
|
|
|
1448
1453
|
var f;
|
|
1449
1454
|
if (!e) return;
|
|
1450
1455
|
const {
|
|
1451
|
-
canvas:
|
|
1452
|
-
montageArea:
|
|
1456
|
+
canvas: i,
|
|
1457
|
+
montageArea: a,
|
|
1453
1458
|
options: { canvasBackstoreWidth: o }
|
|
1454
|
-
} = this.editor, { width: d, height: c } =
|
|
1455
|
-
if (!o || o === "auto" || n ? this.adaptCanvasToContainer() : o ? this.setCanvasBackstoreWidth(Number(o)) : this.setCanvasBackstoreWidth(h),
|
|
1459
|
+
} = this.editor, { width: d, height: c } = a, h = B(Number(e), _, T);
|
|
1460
|
+
if (!o || o === "auto" || n ? this.adaptCanvasToContainer() : o ? this.setCanvasBackstoreWidth(Number(o)) : this.setCanvasBackstoreWidth(h), a.set({ width: h }), (f = i.clipPath) == null || f.set({ width: h }), t) {
|
|
1456
1461
|
const m = h / d, u = fe(c, m);
|
|
1457
1462
|
this.setResolutionHeight(u);
|
|
1458
1463
|
return;
|
|
1459
1464
|
}
|
|
1460
|
-
const { left: l, top: g } = this.getObjectDefaultCoords(
|
|
1461
|
-
|
|
1465
|
+
const { left: l, top: g } = this.getObjectDefaultCoords(a), M = i.getZoom();
|
|
1466
|
+
i.setViewportTransform([M, 0, 0, M, l, g]), this.centerMontageArea(), s || this.editor.historyManager.saveState(), i.fire("editor:resolution-width-changed", {
|
|
1462
1467
|
width: h,
|
|
1463
1468
|
preserveProportional: t,
|
|
1464
1469
|
withoutSave: s,
|
|
@@ -1478,17 +1483,17 @@ class rt {
|
|
|
1478
1483
|
var f;
|
|
1479
1484
|
if (!e) return;
|
|
1480
1485
|
const {
|
|
1481
|
-
canvas:
|
|
1482
|
-
montageArea:
|
|
1486
|
+
canvas: i,
|
|
1487
|
+
montageArea: a,
|
|
1483
1488
|
options: { canvasBackstoreHeight: o }
|
|
1484
|
-
} = this.editor, { width: d, height: c } =
|
|
1485
|
-
if (!o || o === "auto" || n ? this.adaptCanvasToContainer() : o ? this.setCanvasBackstoreHeight(Number(o)) : this.setCanvasBackstoreHeight(h),
|
|
1489
|
+
} = this.editor, { width: d, height: c } = a, h = B(Number(e), R, O);
|
|
1490
|
+
if (!o || o === "auto" || n ? this.adaptCanvasToContainer() : o ? this.setCanvasBackstoreHeight(Number(o)) : this.setCanvasBackstoreHeight(h), a.set({ height: h }), (f = i.clipPath) == null || f.set({ height: h }), t) {
|
|
1486
1491
|
const m = h / c, u = fe(d, m);
|
|
1487
1492
|
this.setResolutionWidth(u);
|
|
1488
1493
|
return;
|
|
1489
1494
|
}
|
|
1490
|
-
const { left: l, top: g } = this.getObjectDefaultCoords(
|
|
1491
|
-
|
|
1495
|
+
const { left: l, top: g } = this.getObjectDefaultCoords(a), M = i.getZoom();
|
|
1496
|
+
i.setViewportTransform([M, 0, 0, M, l, g]), this.centerMontageArea(), s || this.editor.historyManager.saveState(), i.fire("editor:resolution-height-changed", {
|
|
1492
1497
|
height: h,
|
|
1493
1498
|
preserveProportional: t,
|
|
1494
1499
|
withoutSave: s,
|
|
@@ -1501,7 +1506,7 @@ class rt {
|
|
|
1501
1506
|
*/
|
|
1502
1507
|
centerMontageArea() {
|
|
1503
1508
|
var d;
|
|
1504
|
-
const { canvas: e, montageArea: t } = this.editor, s = e.getWidth(), n = e.getHeight(),
|
|
1509
|
+
const { canvas: e, montageArea: t } = this.editor, s = e.getWidth(), n = e.getHeight(), i = e.getZoom(), a = at(s, n);
|
|
1505
1510
|
t.set({
|
|
1506
1511
|
left: s / 2,
|
|
1507
1512
|
top: n / 2
|
|
@@ -1510,7 +1515,7 @@ class rt {
|
|
|
1510
1515
|
top: n / 2
|
|
1511
1516
|
}), e.renderAll();
|
|
1512
1517
|
const o = e.viewportTransform;
|
|
1513
|
-
o[4] = s / 2 -
|
|
1518
|
+
o[4] = s / 2 - a.x * i, o[5] = n / 2 - a.y * i, e.setViewportTransform(o), e.renderAll();
|
|
1514
1519
|
}
|
|
1515
1520
|
/**
|
|
1516
1521
|
* Метод для получения координат объекта с учетом текущего зума
|
|
@@ -1526,7 +1531,7 @@ class rt {
|
|
|
1526
1531
|
code: "NO_ACTIVE_OBJECT",
|
|
1527
1532
|
message: "Не выбран объект для получения координат"
|
|
1528
1533
|
}), { left: 0, top: 0 };
|
|
1529
|
-
const { width: n, height:
|
|
1534
|
+
const { width: n, height: i } = s, a = t.getZoom(), o = (n - n * a) / 2, d = (i - i * a) / 2;
|
|
1530
1535
|
return { left: o, top: d };
|
|
1531
1536
|
}
|
|
1532
1537
|
/**
|
|
@@ -1534,7 +1539,7 @@ class rt {
|
|
|
1534
1539
|
*/
|
|
1535
1540
|
setCanvasBackstoreWidth(e) {
|
|
1536
1541
|
if (!e || typeof e != "number") return;
|
|
1537
|
-
const t = B(e, _,
|
|
1542
|
+
const t = B(e, _, T);
|
|
1538
1543
|
this.editor.canvas.setDimensions({ width: t }, { backstoreOnly: !0 });
|
|
1539
1544
|
}
|
|
1540
1545
|
/**
|
|
@@ -1543,7 +1548,7 @@ class rt {
|
|
|
1543
1548
|
*/
|
|
1544
1549
|
setCanvasBackstoreHeight(e) {
|
|
1545
1550
|
if (!e || typeof e != "number") return;
|
|
1546
|
-
const t = B(e, R,
|
|
1551
|
+
const t = B(e, R, O);
|
|
1547
1552
|
this.editor.canvas.setDimensions({ height: t }, { backstoreOnly: !0 });
|
|
1548
1553
|
}
|
|
1549
1554
|
/**
|
|
@@ -1552,8 +1557,8 @@ class rt {
|
|
|
1552
1557
|
* с учётом минимальных и максимальных значений.
|
|
1553
1558
|
*/
|
|
1554
1559
|
adaptCanvasToContainer() {
|
|
1555
|
-
const { canvas: e } = this.editor, t = this.getEditorContainer(), s = t.clientWidth, n = t.clientHeight,
|
|
1556
|
-
e.setDimensions({ width:
|
|
1560
|
+
const { canvas: e } = this.editor, t = this.getEditorContainer(), s = t.clientWidth, n = t.clientHeight, i = B(s, _, T), a = B(n, R, O);
|
|
1561
|
+
e.setDimensions({ width: i, height: a }, { backstoreOnly: !0 });
|
|
1557
1562
|
}
|
|
1558
1563
|
/**
|
|
1559
1564
|
* Обновляет размеры канваса без изменения позиций объектов.
|
|
@@ -1568,9 +1573,9 @@ class rt {
|
|
|
1568
1573
|
width: s,
|
|
1569
1574
|
height: n
|
|
1570
1575
|
}
|
|
1571
|
-
} = this.editor,
|
|
1576
|
+
} = this.editor, i = t.left, a = t.top;
|
|
1572
1577
|
this.setResolutionWidth(s, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.setResolutionHeight(n, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.centerMontageArea();
|
|
1573
|
-
const o = t.left -
|
|
1578
|
+
const o = t.left - i, d = t.top - a;
|
|
1574
1579
|
if (o !== 0 || d !== 0) {
|
|
1575
1580
|
const c = e.getActiveObject(), h = [];
|
|
1576
1581
|
if ((c == null ? void 0 : c.type) === "activeselection") {
|
|
@@ -1704,32 +1709,32 @@ class rt {
|
|
|
1704
1709
|
*/
|
|
1705
1710
|
setDisplayDimension({ element: e = "canvas", dimension: t, value: s } = {}) {
|
|
1706
1711
|
if (!s) return;
|
|
1707
|
-
const { canvas: n } = this.editor,
|
|
1712
|
+
const { canvas: n } = this.editor, i = [];
|
|
1708
1713
|
switch (e) {
|
|
1709
1714
|
case "canvas":
|
|
1710
|
-
|
|
1715
|
+
i.push(n.lowerCanvasEl, n.upperCanvasEl);
|
|
1711
1716
|
break;
|
|
1712
1717
|
case "wrapper":
|
|
1713
|
-
|
|
1718
|
+
i.push(n.wrapperEl);
|
|
1714
1719
|
break;
|
|
1715
1720
|
case "container":
|
|
1716
|
-
|
|
1721
|
+
i.push(this.getEditorContainer());
|
|
1717
1722
|
break;
|
|
1718
1723
|
default:
|
|
1719
|
-
|
|
1724
|
+
i.push(n.lowerCanvasEl, n.upperCanvasEl);
|
|
1720
1725
|
}
|
|
1721
|
-
const
|
|
1726
|
+
const a = t === "width" ? "width" : "height";
|
|
1722
1727
|
if (typeof s == "string") {
|
|
1723
|
-
|
|
1724
|
-
d.style[
|
|
1728
|
+
i.forEach((d) => {
|
|
1729
|
+
d.style[a] = s;
|
|
1725
1730
|
});
|
|
1726
1731
|
return;
|
|
1727
1732
|
}
|
|
1728
1733
|
if (isNaN(s)) return;
|
|
1729
1734
|
const o = `${s}px`;
|
|
1730
|
-
|
|
1731
|
-
d.style[
|
|
1732
|
-
}), n.fire(`editor:display-${e}-${
|
|
1735
|
+
i.forEach((d) => {
|
|
1736
|
+
d.style[a] = o;
|
|
1737
|
+
}), n.fire(`editor:display-${e}-${a}-changed`, {
|
|
1733
1738
|
element: e,
|
|
1734
1739
|
value: s
|
|
1735
1740
|
});
|
|
@@ -1745,8 +1750,8 @@ class rt {
|
|
|
1745
1750
|
scaleMontageAreaToImage({ object: e, preserveAspectRatio: t, withoutSave: s } = {}) {
|
|
1746
1751
|
const {
|
|
1747
1752
|
canvas: n,
|
|
1748
|
-
montageArea:
|
|
1749
|
-
transformManager:
|
|
1753
|
+
montageArea: i,
|
|
1754
|
+
transformManager: a,
|
|
1750
1755
|
options: {
|
|
1751
1756
|
montageAreaWidth: o,
|
|
1752
1757
|
montageAreaHeight: d
|
|
@@ -1754,15 +1759,15 @@ class rt {
|
|
|
1754
1759
|
} = this.editor, c = e || n.getActiveObject();
|
|
1755
1760
|
if (!ot(c)) return;
|
|
1756
1761
|
const { width: h, height: l } = c;
|
|
1757
|
-
let g = Math.min(h,
|
|
1762
|
+
let g = Math.min(h, T), M = Math.min(l, O);
|
|
1758
1763
|
if (t) {
|
|
1759
1764
|
const {
|
|
1760
1765
|
width: f,
|
|
1761
1766
|
height: m
|
|
1762
|
-
} =
|
|
1767
|
+
} = i, u = h / f, b = l / m, A = Math.max(u, b);
|
|
1763
1768
|
g = f * A, M = m * A;
|
|
1764
1769
|
}
|
|
1765
|
-
this.setResolutionWidth(g, { withoutSave: !0 }), this.setResolutionHeight(M, { withoutSave: !0 }), (h > o || l > d) &&
|
|
1770
|
+
this.setResolutionWidth(g, { withoutSave: !0 }), this.setResolutionHeight(M, { withoutSave: !0 }), (h > o || l > d) && a.calculateAndApplyDefaultZoom(), a.resetObject({ object: c, withoutSave: !0 }), n.centerObject(c), n.renderAll(), s || this.editor.historyManager.saveState(), n.fire("editor:montage-area-scaled-to-image", {
|
|
1766
1771
|
object: c,
|
|
1767
1772
|
width: g,
|
|
1768
1773
|
height: M,
|
|
@@ -1790,11 +1795,11 @@ class rt {
|
|
|
1790
1795
|
transformManager: s,
|
|
1791
1796
|
historyManager: n,
|
|
1792
1797
|
options: {
|
|
1793
|
-
montageAreaWidth:
|
|
1794
|
-
montageAreaHeight:
|
|
1798
|
+
montageAreaWidth: i,
|
|
1799
|
+
montageAreaHeight: a
|
|
1795
1800
|
}
|
|
1796
1801
|
} = this.editor;
|
|
1797
|
-
s.resetZoom(), this.setResolutionWidth(
|
|
1802
|
+
s.resetZoom(), this.setResolutionWidth(i, { withoutSave: !0 }), this.setResolutionHeight(a, { withoutSave: !0 }), t.renderAll(), s.resetObjects(), e || n.saveState(), t.fire("editor:default-scale-set");
|
|
1798
1803
|
}
|
|
1799
1804
|
/**
|
|
1800
1805
|
* Получение всех объектов внутри монтажной области редактора
|
|
@@ -1802,12 +1807,12 @@ class rt {
|
|
|
1802
1807
|
*/
|
|
1803
1808
|
getObjects() {
|
|
1804
1809
|
const { canvas: e, montageArea: t, interactionBlocker: { overlayMask: s } } = this.editor;
|
|
1805
|
-
return e.getObjects().filter((
|
|
1810
|
+
return e.getObjects().filter((i) => i.id !== t.id && i.id !== (s == null ? void 0 : s.id));
|
|
1806
1811
|
}
|
|
1807
1812
|
}
|
|
1808
1813
|
class ct {
|
|
1809
1814
|
constructor({ editor: e }) {
|
|
1810
|
-
this.editor = e, this.options = e.options, this.minZoom = this.options.minZoom || tt, this.maxZoom = this.options.maxZoom || st, this.defaultZoom = this.options.defaultScale
|
|
1815
|
+
this.editor = e, this.options = e.options, this.minZoom = this.options.minZoom || tt, this.maxZoom = this.options.maxZoom || st, this.defaultZoom = this.options.defaultScale;
|
|
1811
1816
|
}
|
|
1812
1817
|
/**
|
|
1813
1818
|
* Метод рассчитывает и применяет зум по умолчанию для монтажной области редактора.
|
|
@@ -1817,7 +1822,7 @@ class ct {
|
|
|
1817
1822
|
* @param scale - Желаемый масштаб относительно размеров контейнера редактора.
|
|
1818
1823
|
*/
|
|
1819
1824
|
calculateAndApplyDefaultZoom(e = this.options.defaultScale) {
|
|
1820
|
-
const { canvas: t } = this.editor, s = t.editorContainer, n = s.clientWidth,
|
|
1825
|
+
const { canvas: t } = this.editor, s = t.editorContainer, n = s.clientWidth, i = s.clientHeight, { width: a, height: o } = this.editor.montageArea, d = n / a * e, c = i / o * e;
|
|
1821
1826
|
this.defaultZoom = Math.min(d, c), this.setZoom();
|
|
1822
1827
|
}
|
|
1823
1828
|
/**
|
|
@@ -1832,10 +1837,10 @@ class ct {
|
|
|
1832
1837
|
zoom(e = nt, t = {}) {
|
|
1833
1838
|
var g, M;
|
|
1834
1839
|
if (!e) return;
|
|
1835
|
-
const { minZoom: s, maxZoom: n } = this, { canvas:
|
|
1836
|
-
let l = Number((
|
|
1837
|
-
l > n && (l = n), l < s && (l = s),
|
|
1838
|
-
currentZoom:
|
|
1840
|
+
const { minZoom: s, maxZoom: n } = this, { canvas: i } = this.editor, a = i.getZoom(), o = i.getCenterPoint(), d = (g = t.pointX) != null ? g : o.x, c = (M = t.pointY) != null ? M : o.y, h = new F(d, c);
|
|
1841
|
+
let l = Number((a + Number(e)).toFixed(2));
|
|
1842
|
+
l > n && (l = n), l < s && (l = s), i.zoomToPoint(h, l), i.fire("editor:zoom-changed", {
|
|
1843
|
+
currentZoom: i.getZoom(),
|
|
1839
1844
|
zoom: l,
|
|
1840
1845
|
point: h
|
|
1841
1846
|
});
|
|
@@ -1846,12 +1851,12 @@ class ct {
|
|
|
1846
1851
|
* @fires editor:zoom-changed
|
|
1847
1852
|
*/
|
|
1848
1853
|
setZoom(e = this.defaultZoom) {
|
|
1849
|
-
const { minZoom: t, maxZoom: s } = this, { canvas: n } = this.editor,
|
|
1850
|
-
let
|
|
1851
|
-
e > s && (
|
|
1854
|
+
const { minZoom: t, maxZoom: s } = this, { canvas: n } = this.editor, i = new F(n.getCenterPoint());
|
|
1855
|
+
let a = e;
|
|
1856
|
+
e > s && (a = s), e < t && (a = t), n.zoomToPoint(i, a), n.fire("editor:zoom-changed", {
|
|
1852
1857
|
currentZoom: n.getZoom(),
|
|
1853
|
-
zoom:
|
|
1854
|
-
point:
|
|
1858
|
+
zoom: a,
|
|
1859
|
+
point: i
|
|
1855
1860
|
});
|
|
1856
1861
|
}
|
|
1857
1862
|
/**
|
|
@@ -1872,14 +1877,14 @@ class ct {
|
|
|
1872
1877
|
* @param options.withoutSave - Не сохранять состояние
|
|
1873
1878
|
* @fires editor:object-rotated
|
|
1874
1879
|
*/
|
|
1875
|
-
rotate(e =
|
|
1876
|
-
const { canvas: s, historyManager: n } = this.editor,
|
|
1877
|
-
if (!
|
|
1878
|
-
const
|
|
1879
|
-
|
|
1880
|
-
object:
|
|
1880
|
+
rotate(e = it, { withoutSave: t } = {}) {
|
|
1881
|
+
const { canvas: s, historyManager: n } = this.editor, i = s.getActiveObject();
|
|
1882
|
+
if (!i) return;
|
|
1883
|
+
const a = i.angle + e;
|
|
1884
|
+
i.rotate(a), i.setCoords(), s.renderAll(), t || n.saveState(), s.fire("editor:object-rotated", {
|
|
1885
|
+
object: i,
|
|
1881
1886
|
withoutSave: t,
|
|
1882
|
-
angle:
|
|
1887
|
+
angle: a
|
|
1883
1888
|
});
|
|
1884
1889
|
}
|
|
1885
1890
|
/**
|
|
@@ -1921,11 +1926,11 @@ class ct {
|
|
|
1921
1926
|
opacity: t = 1,
|
|
1922
1927
|
withoutSave: s
|
|
1923
1928
|
} = {}) {
|
|
1924
|
-
const { canvas: n, historyManager:
|
|
1925
|
-
|
|
1929
|
+
const { canvas: n, historyManager: i } = this.editor, a = e || n.getActiveObject();
|
|
1930
|
+
a && (a instanceof y ? a.getObjects().forEach((o) => {
|
|
1926
1931
|
o.set("opacity", t);
|
|
1927
|
-
}) :
|
|
1928
|
-
object:
|
|
1932
|
+
}) : a.set("opacity", t), n.renderAll(), s || i.saveState(), n.fire("editor:object-opacity-changed", {
|
|
1933
|
+
object: a,
|
|
1929
1934
|
opacity: t,
|
|
1930
1935
|
withoutSave: s
|
|
1931
1936
|
}));
|
|
@@ -1947,18 +1952,18 @@ class ct {
|
|
|
1947
1952
|
withoutSave: s,
|
|
1948
1953
|
fitAsOneObject: n
|
|
1949
1954
|
} = {}) {
|
|
1950
|
-
const { canvas:
|
|
1955
|
+
const { canvas: i, historyManager: a } = this.editor, o = e || i.getActiveObject();
|
|
1951
1956
|
if (o) {
|
|
1952
1957
|
if (o instanceof y && !n) {
|
|
1953
1958
|
const d = o.getObjects();
|
|
1954
|
-
|
|
1959
|
+
i.discardActiveObject(), d.forEach((h) => {
|
|
1955
1960
|
this._fitSingleObject(h, t);
|
|
1956
1961
|
});
|
|
1957
|
-
const c = new y(d, { canvas:
|
|
1958
|
-
|
|
1962
|
+
const c = new y(d, { canvas: i });
|
|
1963
|
+
i.setActiveObject(c);
|
|
1959
1964
|
} else
|
|
1960
1965
|
this._fitSingleObject(o, t);
|
|
1961
|
-
|
|
1966
|
+
i.renderAll(), s || a.saveState(), i.fire("editor:object-fitted", {
|
|
1962
1967
|
object: o,
|
|
1963
1968
|
type: t,
|
|
1964
1969
|
withoutSave: s,
|
|
@@ -1973,7 +1978,7 @@ class ct {
|
|
|
1973
1978
|
* @private
|
|
1974
1979
|
*/
|
|
1975
1980
|
_fitSingleObject(e, t) {
|
|
1976
|
-
const { canvas: s, montageArea: n } = this.editor, { width:
|
|
1981
|
+
const { canvas: s, montageArea: n } = this.editor, { width: i, height: a, scaleX: o = 1, scaleY: d = 1, angle: c = 0 } = e, h = i * Math.abs(o), l = a * Math.abs(d), g = c * Math.PI / 180, M = Math.abs(Math.cos(g)), f = Math.abs(Math.sin(g)), m = h * M + l * f, u = h * f + l * M, b = n.width, A = n.height;
|
|
1977
1982
|
let S;
|
|
1978
1983
|
t === "contain" ? S = Math.min(b / m, A / u) : S = Math.max(b / m, A / u), e.set({
|
|
1979
1984
|
scaleX: o * S,
|
|
@@ -1985,22 +1990,22 @@ class ct {
|
|
|
1985
1990
|
*/
|
|
1986
1991
|
resetObjects() {
|
|
1987
1992
|
this.editor.canvasManager.getObjects().forEach((e) => {
|
|
1988
|
-
this.resetObject(e);
|
|
1993
|
+
this.resetObject({ object: e });
|
|
1989
1994
|
});
|
|
1990
1995
|
}
|
|
1991
1996
|
/**
|
|
1992
1997
|
* Сброс масштаба объекта до дефолтного
|
|
1993
|
-
* @param object
|
|
1994
1998
|
* @param options
|
|
1999
|
+
* @param options.object - Объект, который нужно сбросить. Если не передан, то сбрасывается активный объект
|
|
1995
2000
|
* @param options.withoutSave - Не сохранять состояние
|
|
1996
2001
|
* @param options.alwaysFitObject - вписывать объект в рабочую область даже если он меньше рабочей области
|
|
1997
2002
|
* @fires editor:object-reset
|
|
1998
2003
|
*/
|
|
1999
|
-
resetObject(e,
|
|
2004
|
+
resetObject({ object: e, alwaysFitObject: t = !1, withoutSave: s = !1 } = {}) {
|
|
2000
2005
|
const {
|
|
2001
2006
|
canvas: n,
|
|
2002
|
-
montageArea:
|
|
2003
|
-
imageManager:
|
|
2007
|
+
montageArea: i,
|
|
2008
|
+
imageManager: a,
|
|
2004
2009
|
historyManager: o,
|
|
2005
2010
|
options: { scaleType: d }
|
|
2006
2011
|
} = this.editor, c = e || n.getActiveObject();
|
|
@@ -2014,7 +2019,7 @@ class ct {
|
|
|
2014
2019
|
}), t)
|
|
2015
2020
|
this.fitObject({ object: c, withoutSave: !0, fitAsOneObject: !0 });
|
|
2016
2021
|
else {
|
|
2017
|
-
const { width: l, height: g } =
|
|
2022
|
+
const { width: l, height: g } = i, { width: M, height: f } = c, m = a.calculateScaleFactor({
|
|
2018
2023
|
imageObject: c,
|
|
2019
2024
|
scaleType: d
|
|
2020
2025
|
});
|
|
@@ -2057,8 +2062,8 @@ class dt {
|
|
|
2057
2062
|
const { canvas: e, montageArea: t, historyManager: s } = this.editor;
|
|
2058
2063
|
if (!t || !this.overlayMask) return;
|
|
2059
2064
|
s.suspendHistory(), t.setCoords();
|
|
2060
|
-
const { left: n, top:
|
|
2061
|
-
this.overlayMask.set({ left: n, top:
|
|
2065
|
+
const { left: n, top: i, width: a, height: o } = t.getBoundingRect();
|
|
2066
|
+
this.overlayMask.set({ left: n, top: i, width: a, height: o }), e.discardActiveObject(), this.editor.layerManager.bringToFront(this.overlayMask, { withoutSave: !0 }), s.resumeHistory();
|
|
2062
2067
|
}
|
|
2063
2068
|
/**
|
|
2064
2069
|
* Выключает редактор:
|
|
@@ -2098,11 +2103,11 @@ class G {
|
|
|
2098
2103
|
bringToFront(e, { withoutSave: t } = {}) {
|
|
2099
2104
|
const { canvas: s, historyManager: n } = this.editor;
|
|
2100
2105
|
n.suspendHistory();
|
|
2101
|
-
const
|
|
2102
|
-
|
|
2103
|
-
s.bringObjectToFront(
|
|
2104
|
-
}) : s.bringObjectToFront(
|
|
2105
|
-
object:
|
|
2106
|
+
const i = e || s.getActiveObject();
|
|
2107
|
+
i && (i instanceof y ? i.getObjects().forEach((a) => {
|
|
2108
|
+
s.bringObjectToFront(a);
|
|
2109
|
+
}) : s.bringObjectToFront(i), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:object-bring-to-front", {
|
|
2110
|
+
object: i,
|
|
2106
2111
|
withoutSave: t
|
|
2107
2112
|
}));
|
|
2108
2113
|
}
|
|
@@ -2116,9 +2121,9 @@ class G {
|
|
|
2116
2121
|
bringForward(e, { withoutSave: t } = {}) {
|
|
2117
2122
|
const { canvas: s, historyManager: n } = this.editor;
|
|
2118
2123
|
n.suspendHistory();
|
|
2119
|
-
const
|
|
2120
|
-
|
|
2121
|
-
object:
|
|
2124
|
+
const i = e || s.getActiveObject();
|
|
2125
|
+
i && (i instanceof y ? G._moveSelectionForward(s, i) : s.bringObjectForward(i), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:object-bring-forward", {
|
|
2126
|
+
object: i,
|
|
2122
2127
|
withoutSave: t
|
|
2123
2128
|
}));
|
|
2124
2129
|
}
|
|
@@ -2133,10 +2138,10 @@ class G {
|
|
|
2133
2138
|
const {
|
|
2134
2139
|
canvas: s,
|
|
2135
2140
|
montageArea: n,
|
|
2136
|
-
historyManager:
|
|
2137
|
-
interactionBlocker: { overlayMask:
|
|
2141
|
+
historyManager: i,
|
|
2142
|
+
interactionBlocker: { overlayMask: a }
|
|
2138
2143
|
} = this.editor;
|
|
2139
|
-
|
|
2144
|
+
i.suspendHistory();
|
|
2140
2145
|
const o = e || s.getActiveObject();
|
|
2141
2146
|
if (o) {
|
|
2142
2147
|
if (o instanceof y) {
|
|
@@ -2145,7 +2150,7 @@ class G {
|
|
|
2145
2150
|
s.sendObjectToBack(d[c]);
|
|
2146
2151
|
} else
|
|
2147
2152
|
s.sendObjectToBack(o);
|
|
2148
|
-
s.sendObjectToBack(n),
|
|
2153
|
+
s.sendObjectToBack(n), a && s.sendObjectToBack(a), s.renderAll(), i.resumeHistory(), t || i.saveState(), s.fire("editor:object-send-to-back", {
|
|
2149
2154
|
object: o,
|
|
2150
2155
|
withoutSave: t
|
|
2151
2156
|
});
|
|
@@ -2161,12 +2166,12 @@ class G {
|
|
|
2161
2166
|
const {
|
|
2162
2167
|
canvas: s,
|
|
2163
2168
|
montageArea: n,
|
|
2164
|
-
historyManager:
|
|
2165
|
-
interactionBlocker: { overlayMask:
|
|
2169
|
+
historyManager: i,
|
|
2170
|
+
interactionBlocker: { overlayMask: a }
|
|
2166
2171
|
} = this.editor;
|
|
2167
|
-
|
|
2172
|
+
i.suspendHistory();
|
|
2168
2173
|
const o = e || s.getActiveObject();
|
|
2169
|
-
o && (o instanceof y ? G._moveSelectionBackwards(s, o) : s.sendObjectBackwards(o), s.sendObjectToBack(n),
|
|
2174
|
+
o && (o instanceof y ? G._moveSelectionBackwards(s, o) : s.sendObjectBackwards(o), s.sendObjectToBack(n), a && s.sendObjectToBack(a), s.renderAll(), i.resumeHistory(), t || i.saveState(), s.fire("editor:object-send-backwards", {
|
|
2170
2175
|
object: o,
|
|
2171
2176
|
withoutSave: t
|
|
2172
2177
|
}));
|
|
@@ -2240,8 +2245,8 @@ class lt {
|
|
|
2240
2245
|
left: t,
|
|
2241
2246
|
top: s,
|
|
2242
2247
|
width: n = 100,
|
|
2243
|
-
height:
|
|
2244
|
-
fill:
|
|
2248
|
+
height: i = 100,
|
|
2249
|
+
fill: a = "blue"
|
|
2245
2250
|
} = l, o = P(l, [
|
|
2246
2251
|
"id",
|
|
2247
2252
|
"left",
|
|
@@ -2255,8 +2260,8 @@ class lt {
|
|
|
2255
2260
|
left: t,
|
|
2256
2261
|
top: s,
|
|
2257
2262
|
width: n,
|
|
2258
|
-
height:
|
|
2259
|
-
fill:
|
|
2263
|
+
height: i,
|
|
2264
|
+
fill: a
|
|
2260
2265
|
}, o));
|
|
2261
2266
|
return !t && !s && g.centerObject(M), c || (g.add(M), d || g.setActiveObject(M), g.renderAll()), M;
|
|
2262
2267
|
}
|
|
@@ -2282,21 +2287,21 @@ class lt {
|
|
|
2282
2287
|
left: t,
|
|
2283
2288
|
top: s,
|
|
2284
2289
|
radius: n = 50,
|
|
2285
|
-
fill:
|
|
2286
|
-
} = h,
|
|
2290
|
+
fill: i = "green"
|
|
2291
|
+
} = h, a = P(h, [
|
|
2287
2292
|
"id",
|
|
2288
2293
|
"left",
|
|
2289
2294
|
"top",
|
|
2290
2295
|
"radius",
|
|
2291
2296
|
"fill"
|
|
2292
2297
|
]);
|
|
2293
|
-
const { canvas: l } = this.editor, g = new
|
|
2298
|
+
const { canvas: l } = this.editor, g = new Ne(p({
|
|
2294
2299
|
id: e,
|
|
2295
2300
|
left: t,
|
|
2296
2301
|
top: s,
|
|
2297
|
-
fill:
|
|
2302
|
+
fill: i,
|
|
2298
2303
|
radius: n
|
|
2299
|
-
},
|
|
2304
|
+
}, a));
|
|
2300
2305
|
return !t && !s && l.centerObject(g), d || (l.add(g), o || l.setActiveObject(g), l.renderAll()), g;
|
|
2301
2306
|
}
|
|
2302
2307
|
/**
|
|
@@ -2322,8 +2327,8 @@ class lt {
|
|
|
2322
2327
|
left: t,
|
|
2323
2328
|
top: s,
|
|
2324
2329
|
width: n = 100,
|
|
2325
|
-
height:
|
|
2326
|
-
fill:
|
|
2330
|
+
height: i = 100,
|
|
2331
|
+
fill: a = "yellow"
|
|
2327
2332
|
} = l, o = P(l, [
|
|
2328
2333
|
"id",
|
|
2329
2334
|
"left",
|
|
@@ -2332,13 +2337,13 @@ class lt {
|
|
|
2332
2337
|
"height",
|
|
2333
2338
|
"fill"
|
|
2334
2339
|
]);
|
|
2335
|
-
const { canvas: g } = this.editor, M = new
|
|
2340
|
+
const { canvas: g } = this.editor, M = new Ee(p({
|
|
2336
2341
|
id: e,
|
|
2337
2342
|
left: t,
|
|
2338
2343
|
top: s,
|
|
2339
|
-
fill:
|
|
2344
|
+
fill: a,
|
|
2340
2345
|
width: n,
|
|
2341
|
-
height:
|
|
2346
|
+
height: i
|
|
2342
2347
|
}, o));
|
|
2343
2348
|
return !t && !s && g.centerObject(M), c || (g.add(M), d || g.setActiveObject(M), g.renderAll()), M;
|
|
2344
2349
|
}
|
|
@@ -2420,10 +2425,10 @@ class ht {
|
|
|
2420
2425
|
_copyImageToClipboard(e, t) {
|
|
2421
2426
|
return j(this, null, function* () {
|
|
2422
2427
|
try {
|
|
2423
|
-
const n = e.toCanvasElement({ enableRetinaScaling: !1 }).toDataURL(),
|
|
2428
|
+
const n = e.toCanvasElement({ enableRetinaScaling: !1 }).toDataURL(), i = n.slice(5).split(";")[0], a = n.split(",")[1], o = atob(a), d = new Uint8Array(o.length);
|
|
2424
2429
|
for (let l = 0; l < o.length; l += 1)
|
|
2425
2430
|
d[l] = o.charCodeAt(l);
|
|
2426
|
-
const c = new Blob([d.buffer], { type:
|
|
2431
|
+
const c = new Blob([d.buffer], { type: i }), h = new ClipboardItem({ [i]: c });
|
|
2427
2432
|
return yield navigator.clipboard.write([h]), console.info("Image copied to clipboard successfully"), !0;
|
|
2428
2433
|
} catch (s) {
|
|
2429
2434
|
return this.editor.errorManager.emitWarning({
|
|
@@ -2503,8 +2508,8 @@ class ht {
|
|
|
2503
2508
|
evented: !0
|
|
2504
2509
|
}), this._addClonedObjectToCanvas(n), t.fire("editor:object-duplicated", { object: n }), !0;
|
|
2505
2510
|
} catch (n) {
|
|
2506
|
-
const { errorManager:
|
|
2507
|
-
return
|
|
2511
|
+
const { errorManager: i } = this.editor;
|
|
2512
|
+
return i.emitError({
|
|
2508
2513
|
origin: "ClipboardManager",
|
|
2509
2514
|
method: "copyPaste",
|
|
2510
2515
|
code: "COPY_PASTE_FAILED",
|
|
@@ -2532,8 +2537,8 @@ class ht {
|
|
|
2532
2537
|
this.paste();
|
|
2533
2538
|
return;
|
|
2534
2539
|
}
|
|
2535
|
-
const { items: n } = e,
|
|
2536
|
-
if (
|
|
2540
|
+
const { items: n } = e, i = n[n.length - 1], a = i.getAsFile();
|
|
2541
|
+
if (i.type !== "text/html" && a) {
|
|
2537
2542
|
const c = new FileReader();
|
|
2538
2543
|
c.onload = (h) => {
|
|
2539
2544
|
h.target && this._handleImageImport(h.target.result).catch((l) => {
|
|
@@ -2545,7 +2550,7 @@ class ht {
|
|
|
2545
2550
|
data: l
|
|
2546
2551
|
});
|
|
2547
2552
|
});
|
|
2548
|
-
}, c.readAsDataURL(
|
|
2553
|
+
}, c.readAsDataURL(a);
|
|
2549
2554
|
return;
|
|
2550
2555
|
}
|
|
2551
2556
|
const o = e.getData("text/html");
|
|
@@ -2609,8 +2614,8 @@ class X {
|
|
|
2609
2614
|
* @fires editor:object-locked
|
|
2610
2615
|
*/
|
|
2611
2616
|
lockObject({ object: e, skipInnerObjects: t, withoutSave: s } = {}) {
|
|
2612
|
-
const { canvas: n, historyManager:
|
|
2613
|
-
if (!
|
|
2617
|
+
const { canvas: n, historyManager: i } = this.editor, a = e || n.getActiveObject();
|
|
2618
|
+
if (!a || a.locked) return;
|
|
2614
2619
|
const o = {
|
|
2615
2620
|
lockMovementX: !0,
|
|
2616
2621
|
lockMovementY: !0,
|
|
@@ -2621,10 +2626,10 @@ class X {
|
|
|
2621
2626
|
lockSkewingY: !0,
|
|
2622
2627
|
locked: !0
|
|
2623
2628
|
};
|
|
2624
|
-
|
|
2629
|
+
a.set(o), !t && X._isGroupOrSelection(a) && a.getObjects().forEach((c) => {
|
|
2625
2630
|
c.set(o);
|
|
2626
|
-
}), n.renderAll(), s ||
|
|
2627
|
-
object:
|
|
2631
|
+
}), n.renderAll(), s || i.saveState(), n.fire("editor:object-locked", {
|
|
2632
|
+
object: a,
|
|
2628
2633
|
skipInnerObjects: t,
|
|
2629
2634
|
withoutSave: s
|
|
2630
2635
|
});
|
|
@@ -2637,9 +2642,9 @@ class X {
|
|
|
2637
2642
|
* @fires editor:object-unlocked
|
|
2638
2643
|
*/
|
|
2639
2644
|
unlockObject({ object: e, withoutSave: t } = {}) {
|
|
2640
|
-
const { canvas: s, historyManager: n } = this.editor,
|
|
2641
|
-
if (!
|
|
2642
|
-
const
|
|
2645
|
+
const { canvas: s, historyManager: n } = this.editor, i = e || s.getActiveObject();
|
|
2646
|
+
if (!i) return;
|
|
2647
|
+
const a = {
|
|
2643
2648
|
lockMovementX: !1,
|
|
2644
2649
|
lockMovementY: !1,
|
|
2645
2650
|
lockRotation: !1,
|
|
@@ -2649,10 +2654,10 @@ class X {
|
|
|
2649
2654
|
lockSkewingY: !1,
|
|
2650
2655
|
locked: !1
|
|
2651
2656
|
};
|
|
2652
|
-
|
|
2653
|
-
o.set(
|
|
2657
|
+
i.set(a), X._isGroupOrSelection(i) && i.getObjects().forEach((o) => {
|
|
2658
|
+
o.set(a);
|
|
2654
2659
|
}), s.renderAll(), t || n.saveState(), s.fire("editor:object-unlocked", {
|
|
2655
|
-
object:
|
|
2660
|
+
object: i,
|
|
2656
2661
|
withoutSave: t
|
|
2657
2662
|
});
|
|
2658
2663
|
}
|
|
@@ -2677,11 +2682,11 @@ class gt {
|
|
|
2677
2682
|
} = {}) {
|
|
2678
2683
|
const { canvas: s, historyManager: n } = this.editor;
|
|
2679
2684
|
n.suspendHistory();
|
|
2680
|
-
const
|
|
2681
|
-
if (!
|
|
2682
|
-
const
|
|
2683
|
-
|
|
2684
|
-
object:
|
|
2685
|
+
const i = e || s.getActiveObject();
|
|
2686
|
+
if (!i || !(i instanceof y)) return;
|
|
2687
|
+
const a = i.getObjects(), o = new J(a);
|
|
2688
|
+
a.forEach((d) => s.remove(d)), o.set("id", `${o.type}-${D()}`), s.add(o), s.setActiveObject(o), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:objects-grouped", {
|
|
2689
|
+
object: i,
|
|
2685
2690
|
group: o,
|
|
2686
2691
|
withoutSave: t
|
|
2687
2692
|
});
|
|
@@ -2699,15 +2704,15 @@ class gt {
|
|
|
2699
2704
|
} = {}) {
|
|
2700
2705
|
const { canvas: s, historyManager: n } = this.editor;
|
|
2701
2706
|
n.suspendHistory();
|
|
2702
|
-
const
|
|
2703
|
-
if (!(
|
|
2704
|
-
const
|
|
2705
|
-
s.remove(
|
|
2706
|
-
const o = new y(
|
|
2707
|
+
const i = e || s.getActiveObject();
|
|
2708
|
+
if (!(i instanceof J)) return;
|
|
2709
|
+
const a = i.removeAll();
|
|
2710
|
+
s.remove(i), a.forEach((d) => s.add(d));
|
|
2711
|
+
const o = new y(a, {
|
|
2707
2712
|
canvas: s
|
|
2708
2713
|
});
|
|
2709
2714
|
s.setActiveObject(o), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:objects-ungrouped", {
|
|
2710
|
-
object:
|
|
2715
|
+
object: i,
|
|
2711
2716
|
selection: o,
|
|
2712
2717
|
withoutSave: t
|
|
2713
2718
|
});
|
|
@@ -2724,8 +2729,8 @@ class ut {
|
|
|
2724
2729
|
selectAll() {
|
|
2725
2730
|
const { canvas: e, canvasManager: t, objectLockManager: s } = this.editor;
|
|
2726
2731
|
e.discardActiveObject();
|
|
2727
|
-
const n = t.getObjects(),
|
|
2728
|
-
|
|
2732
|
+
const n = t.getObjects(), i = n.some((o) => o.locked), a = n.length > 1 ? new y(t.getObjects(), { canvas: e }) : n[0];
|
|
2733
|
+
i && s.lockObject({ object: a, skipInnerObjects: !0, withoutSave: !0 }), e.setActiveObject(a), e.requestRenderAll(), e.fire("editor:all-objects-selected", { selected: a });
|
|
2729
2734
|
}
|
|
2730
2735
|
}
|
|
2731
2736
|
class Mt {
|
|
@@ -2743,15 +2748,15 @@ class Mt {
|
|
|
2743
2748
|
objects: e,
|
|
2744
2749
|
withoutSave: t
|
|
2745
2750
|
} = {}) {
|
|
2746
|
-
const { canvas: s, historyManager: n, groupingManager:
|
|
2747
|
-
|
|
2751
|
+
const { canvas: s, historyManager: n, groupingManager: i } = this.editor, a = (e || s.getActiveObjects()).filter((o) => !o.locked);
|
|
2752
|
+
a != null && a.length && (n.suspendHistory(), a.forEach((o) => {
|
|
2748
2753
|
if (o.type === "group" && o.format !== "svg") {
|
|
2749
|
-
|
|
2754
|
+
i.ungroup({ object: o, withoutSave: t }), this.deleteSelectedObjects();
|
|
2750
2755
|
return;
|
|
2751
2756
|
}
|
|
2752
2757
|
s.remove(o);
|
|
2753
2758
|
}), s.discardActiveObject(), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:objects-deleted", {
|
|
2754
|
-
objects:
|
|
2759
|
+
objects: a,
|
|
2755
2760
|
withoutSave: t
|
|
2756
2761
|
}));
|
|
2757
2762
|
}
|
|
@@ -2860,19 +2865,19 @@ class Q {
|
|
|
2860
2865
|
* @param options.message — текст ошибки (опционально, если не передан, то используется код ошибки)
|
|
2861
2866
|
* @fires editor:error
|
|
2862
2867
|
*/
|
|
2863
|
-
emitError({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, data: n, message:
|
|
2868
|
+
emitError({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, data: n, message: i }) {
|
|
2864
2869
|
if (!Q.isValidErrorCode(s)) {
|
|
2865
2870
|
console.warn("Неизвестный код ошибки: ", { code: s, origin: e, method: t });
|
|
2866
2871
|
return;
|
|
2867
2872
|
}
|
|
2868
2873
|
if (!s) return;
|
|
2869
|
-
const
|
|
2870
|
-
console.error(`${e}. ${t}. ${s}. ${
|
|
2874
|
+
const a = i || s;
|
|
2875
|
+
console.error(`${e}. ${t}. ${s}. ${a}`, n);
|
|
2871
2876
|
const o = {
|
|
2872
2877
|
code: s,
|
|
2873
2878
|
origin: e,
|
|
2874
2879
|
method: t,
|
|
2875
|
-
message:
|
|
2880
|
+
message: a,
|
|
2876
2881
|
data: n
|
|
2877
2882
|
};
|
|
2878
2883
|
this._buffer.push(p({
|
|
@@ -2889,19 +2894,19 @@ class Q {
|
|
|
2889
2894
|
* @param options.message — текст предупреждения (опционально, если не передан, то используется код предупреждения)
|
|
2890
2895
|
* @fires editor:warning
|
|
2891
2896
|
*/
|
|
2892
|
-
emitWarning({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, message: n, data:
|
|
2897
|
+
emitWarning({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, message: n, data: i }) {
|
|
2893
2898
|
if (!Q.isValidErrorCode(s)) {
|
|
2894
2899
|
console.warn("Неизвестный код предупреждения: ", { code: s, origin: e, method: t });
|
|
2895
2900
|
return;
|
|
2896
2901
|
}
|
|
2897
|
-
const
|
|
2898
|
-
console.warn(`${e}. ${t}. ${s}. ${
|
|
2902
|
+
const a = n || s;
|
|
2903
|
+
console.warn(`${e}. ${t}. ${s}. ${a}`, i);
|
|
2899
2904
|
const o = {
|
|
2900
2905
|
code: s,
|
|
2901
2906
|
origin: e,
|
|
2902
2907
|
method: t,
|
|
2903
|
-
message:
|
|
2904
|
-
data:
|
|
2908
|
+
message: a,
|
|
2909
|
+
data: i
|
|
2905
2910
|
};
|
|
2906
2911
|
this._buffer.push(p({
|
|
2907
2912
|
type: "editor:warning"
|
|
@@ -2916,7 +2921,7 @@ class Q {
|
|
|
2916
2921
|
return e ? Object.values(mt).some((t) => Object.values(t).includes(e)) : !1;
|
|
2917
2922
|
}
|
|
2918
2923
|
}
|
|
2919
|
-
class
|
|
2924
|
+
class ae {
|
|
2920
2925
|
/**
|
|
2921
2926
|
* Конструктор класса ImageEditor.
|
|
2922
2927
|
* @param canvasId - идентификатор канваса, в котором будет создан редактор
|
|
@@ -2937,14 +2942,14 @@ class ie {
|
|
|
2937
2942
|
editorContainerHeight: t,
|
|
2938
2943
|
canvasWrapperWidth: s,
|
|
2939
2944
|
canvasWrapperHeight: n,
|
|
2940
|
-
canvasCSSWidth:
|
|
2941
|
-
canvasCSSHeight:
|
|
2945
|
+
canvasCSSWidth: i,
|
|
2946
|
+
canvasCSSHeight: a,
|
|
2942
2947
|
initialImage: o,
|
|
2943
2948
|
initialStateJSON: d,
|
|
2944
2949
|
scaleType: c,
|
|
2945
2950
|
_onReadyCallback: h
|
|
2946
2951
|
} = this.options;
|
|
2947
|
-
if (We.apply(), this.canvas = new
|
|
2952
|
+
if (We.apply(), this.canvas = new Le(this.containerId, this.options), this.moduleLoader = new xe(), this.workerManager = new _e(), this.errorManager = new Q({ editor: this }), this.historyManager = new et({ editor: this }), this.toolbar = new qe({ editor: this }), this.transformManager = new ct({ editor: this }), this.canvasManager = new rt({ editor: this }), this.imageManager = new L({ editor: this }), this.layerManager = new G({ editor: this }), this.shapeManager = new lt({ editor: this }), this.interactionBlocker = new dt({ editor: this }), this.clipboardManager = new ht({ editor: this }), this.objectLockManager = new X({ editor: this }), this.groupingManager = new gt({ editor: this }), this.selectionManager = new ut({ editor: this }), this.deletionManager = new Mt({ editor: this }), this._createMontageArea(), this._createClippingArea(), this.listeners = new Z({ editor: this, options: this.options }), this.canvasManager.setEditorContainerWidth(e), this.canvasManager.setEditorContainerHeight(t), this.canvasManager.setCanvasWrapperWidth(s), this.canvasManager.setCanvasWrapperHeight(n), this.canvasManager.setCanvasCSSWidth(i), this.canvasManager.setCanvasCSSHeight(a), o != null && o.source) {
|
|
2948
2953
|
const {
|
|
2949
2954
|
source: l,
|
|
2950
2955
|
scale: g = `image-${c}`,
|
|
@@ -2967,7 +2972,7 @@ class ie {
|
|
|
2967
2972
|
this.montageArea = this.shapeManager.addRectangle({
|
|
2968
2973
|
width: e,
|
|
2969
2974
|
height: t,
|
|
2970
|
-
fill:
|
|
2975
|
+
fill: ae._createMosaicPattern(),
|
|
2971
2976
|
stroke: null,
|
|
2972
2977
|
strokeWidth: 0,
|
|
2973
2978
|
selectable: !1,
|
|
@@ -3095,7 +3100,6 @@ const ft = {
|
|
|
3095
3100
|
defaultScale: 0.5,
|
|
3096
3101
|
minZoom: 0.1,
|
|
3097
3102
|
maxZoom: 2,
|
|
3098
|
-
maxZoomFactor: 2,
|
|
3099
3103
|
zoomRatio: 0.1,
|
|
3100
3104
|
overlayMaskColor: "rgba(136, 136, 136, 0.6)",
|
|
3101
3105
|
/*
|
|
@@ -3118,10 +3122,10 @@ function At(r, e = {}) {
|
|
|
3118
3122
|
if (!s)
|
|
3119
3123
|
return Promise.reject(new Error(`Контейнер с ID "${r}" не найден.`));
|
|
3120
3124
|
const n = document.createElement("canvas");
|
|
3121
|
-
return n.id = `${r}-canvas`, s.appendChild(n), t.editorContainer = s, new Promise((
|
|
3122
|
-
t._onReadyCallback =
|
|
3123
|
-
const
|
|
3124
|
-
window[r] =
|
|
3125
|
+
return n.id = `${r}-canvas`, s.appendChild(n), t.editorContainer = s, new Promise((i) => {
|
|
3126
|
+
t._onReadyCallback = i;
|
|
3127
|
+
const a = new ae(n.id, t);
|
|
3128
|
+
window[r] = a;
|
|
3125
3129
|
});
|
|
3126
3130
|
}
|
|
3127
3131
|
export {
|