@anu3ev/fabric-image-editor 0.1.78 → 0.1.80
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 +712 -599
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
1
|
+
var Oe = Object.defineProperty, Ne = Object.defineProperties;
|
|
2
|
+
var Le = Object.getOwnPropertyDescriptors;
|
|
3
|
+
var F = Object.getOwnPropertySymbols;
|
|
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
|
-
|
|
8
|
-
if (
|
|
9
|
-
for (var t of
|
|
10
|
-
|
|
7
|
+
Me.call(e, t) && fe(c, t, e[t]);
|
|
8
|
+
if (F)
|
|
9
|
+
for (var t of F(e))
|
|
10
|
+
me.call(e, t) && fe(c, t, e[t]);
|
|
11
11
|
return c;
|
|
12
|
-
},
|
|
13
|
-
var
|
|
12
|
+
}, be = (c, e) => Ne(c, Le(e));
|
|
13
|
+
var V = (c, e) => {
|
|
14
14
|
var t = {};
|
|
15
15
|
for (var s in c)
|
|
16
|
-
|
|
17
|
-
if (c != null &&
|
|
18
|
-
for (var s of
|
|
19
|
-
e.indexOf(s) < 0 &&
|
|
16
|
+
Me.call(c, s) && e.indexOf(s) < 0 && (t[s] = c[s]);
|
|
17
|
+
if (c != null && F)
|
|
18
|
+
for (var s of F(c))
|
|
19
|
+
e.indexOf(s) < 0 && me.call(c, s) && (t[s] = c[s]);
|
|
20
20
|
return t;
|
|
21
21
|
};
|
|
22
|
-
var
|
|
23
|
-
var
|
|
22
|
+
var j = (c, e, t) => new Promise((s, a) => {
|
|
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
|
|
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
|
-
class
|
|
46
|
+
class P {
|
|
47
47
|
/**
|
|
48
48
|
* Конструктор принимает редактор и опции.
|
|
49
49
|
* @param params
|
|
@@ -61,7 +61,7 @@ class Y {
|
|
|
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 = P.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 = P.debounce(this.handleObjectModifiedHistory.bind(this), 300), this.handleObjectRotatingHistoryBound = P.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.handleBackgroundUpdateBound = this.handleBackgroundUpdate.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 Y {
|
|
|
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
|
-
resetObjectFitByDoubleClick:
|
|
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)),
|
|
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 Y {
|
|
|
90
90
|
_filterLockedSelection({ selected: e, e: t }) {
|
|
91
91
|
if (!(e != null && e.length) || !(t instanceof MouseEvent) || e.length === 1) return;
|
|
92
92
|
const { lockedObjects: s, unlockedObjects: a } = e.reduce(
|
|
93
|
-
(
|
|
93
|
+
(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 Y {
|
|
|
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
|
* Обработчики для сохранения состояния редактора в истории.
|
|
@@ -175,9 +175,9 @@ class Y {
|
|
|
175
175
|
* @param event.code — код клавиши
|
|
176
176
|
*/
|
|
177
177
|
handleUndoRedoEvent(e) {
|
|
178
|
-
return
|
|
179
|
-
const { ctrlKey: t, metaKey: s, code: a, repeat:
|
|
180
|
-
this._shouldIgnoreKeyboardEvent(e) || !t && !s ||
|
|
178
|
+
return j(this, null, function* () {
|
|
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 Y {
|
|
|
216
216
|
*/
|
|
217
217
|
handleSpaceKeyDown(e) {
|
|
218
218
|
if (e.code !== "Space" || this._shouldIgnoreKeyboardEvent(e)) return;
|
|
219
|
-
const { canvas: t, editor: s, isSpacePressed: a, isDragging:
|
|
220
|
-
if (a ||
|
|
219
|
+
const { canvas: t, editor: s, isSpacePressed: a, isDragging: 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 Y {
|
|
|
259
259
|
t.setActiveObject(e[0]);
|
|
260
260
|
return;
|
|
261
261
|
}
|
|
262
|
-
const a = e.filter((
|
|
263
|
-
t.setActiveObject(
|
|
262
|
+
const a = e.filter((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,26 +327,26 @@ class Y {
|
|
|
327
327
|
_shouldIgnoreKeyboardEvent(e) {
|
|
328
328
|
const t = document.activeElement, s = e.target, a = ["input", "textarea", "select"];
|
|
329
329
|
if (s) {
|
|
330
|
-
const
|
|
331
|
-
if (a.includes(
|
|
330
|
+
const 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)
|
|
343
|
-
for (const
|
|
343
|
+
for (const h of d)
|
|
344
344
|
try {
|
|
345
|
-
const
|
|
346
|
-
if (
|
|
345
|
+
const l = r;
|
|
346
|
+
if (l.matches && l.matches(h) || l.closest && l.closest(h))
|
|
347
347
|
return !0;
|
|
348
|
-
} catch (
|
|
349
|
-
console.warn(`Error checking selection container with selector "${
|
|
348
|
+
} catch (l) {
|
|
349
|
+
console.warn(`Error checking selection container with selector "${h}":`, l);
|
|
350
350
|
}
|
|
351
351
|
}
|
|
352
352
|
return !1;
|
|
@@ -372,7 +372,7 @@ class Y {
|
|
|
372
372
|
};
|
|
373
373
|
}
|
|
374
374
|
}
|
|
375
|
-
class
|
|
375
|
+
class Ye {
|
|
376
376
|
/**
|
|
377
377
|
* Класс для динамической загрузки внешних модулей.
|
|
378
378
|
*/
|
|
@@ -390,7 +390,7 @@ class Ue {
|
|
|
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 ze(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 He {
|
|
|
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 He {
|
|
|
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,112 +444,112 @@ class He {
|
|
|
444
444
|
this.worker.terminate();
|
|
445
445
|
}
|
|
446
446
|
}
|
|
447
|
-
const
|
|
448
|
-
function
|
|
449
|
-
const
|
|
450
|
-
c.save(), c.translate(e, t), c.rotate(
|
|
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
|
+
function G(c, e, t, s, a) {
|
|
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();
|
|
451
451
|
}
|
|
452
|
-
function
|
|
453
|
-
const
|
|
454
|
-
c.save(), c.translate(e, t), c.rotate(
|
|
452
|
+
function pe(c, e, t, s, a) {
|
|
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
455
|
}
|
|
456
|
-
function
|
|
457
|
-
const
|
|
458
|
-
c.save(), c.translate(e, t), c.rotate(
|
|
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(
|
|
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
|
-
render:
|
|
470
|
-
sizeX:
|
|
471
|
-
sizeY:
|
|
469
|
+
render: G,
|
|
470
|
+
sizeX: O,
|
|
471
|
+
sizeY: O,
|
|
472
472
|
offsetX: 0,
|
|
473
473
|
offsetY: 0
|
|
474
474
|
},
|
|
475
475
|
tr: {
|
|
476
|
-
render:
|
|
477
|
-
sizeX:
|
|
478
|
-
sizeY:
|
|
476
|
+
render: G,
|
|
477
|
+
sizeX: O,
|
|
478
|
+
sizeY: O,
|
|
479
479
|
offsetX: 0,
|
|
480
480
|
offsetY: 0
|
|
481
481
|
},
|
|
482
482
|
bl: {
|
|
483
|
-
render:
|
|
484
|
-
sizeX:
|
|
485
|
-
sizeY:
|
|
483
|
+
render: G,
|
|
484
|
+
sizeX: O,
|
|
485
|
+
sizeY: O,
|
|
486
486
|
offsetX: 0,
|
|
487
487
|
offsetY: 0
|
|
488
488
|
},
|
|
489
489
|
br: {
|
|
490
|
-
render:
|
|
491
|
-
sizeX:
|
|
492
|
-
sizeY:
|
|
490
|
+
render: G,
|
|
491
|
+
sizeX: O,
|
|
492
|
+
sizeY: O,
|
|
493
493
|
offsetX: 0,
|
|
494
494
|
offsetY: 0
|
|
495
495
|
},
|
|
496
496
|
// Середина вертикалей
|
|
497
497
|
ml: {
|
|
498
|
-
render:
|
|
499
|
-
sizeX:
|
|
500
|
-
sizeY:
|
|
498
|
+
render: pe,
|
|
499
|
+
sizeX: se,
|
|
500
|
+
sizeY: ae,
|
|
501
501
|
offsetX: 0,
|
|
502
502
|
offsetY: 0
|
|
503
503
|
},
|
|
504
504
|
mr: {
|
|
505
|
-
render:
|
|
506
|
-
sizeX:
|
|
507
|
-
sizeY:
|
|
505
|
+
render: pe,
|
|
506
|
+
sizeX: se,
|
|
507
|
+
sizeY: ae,
|
|
508
508
|
offsetX: 0,
|
|
509
509
|
offsetY: 0
|
|
510
510
|
},
|
|
511
511
|
// Середина горизонталей
|
|
512
512
|
mt: {
|
|
513
|
-
render:
|
|
514
|
-
sizeX:
|
|
513
|
+
render: ye,
|
|
514
|
+
sizeX: ne,
|
|
515
515
|
sizeY: oe,
|
|
516
516
|
offsetX: 0,
|
|
517
517
|
offsetY: 0
|
|
518
518
|
},
|
|
519
519
|
mb: {
|
|
520
|
-
render:
|
|
521
|
-
sizeX:
|
|
520
|
+
render: ye,
|
|
521
|
+
sizeX: ne,
|
|
522
522
|
sizeY: oe,
|
|
523
523
|
offsetX: 0,
|
|
524
524
|
offsetY: 0
|
|
525
525
|
},
|
|
526
526
|
// Специальный «rotate» контрол
|
|
527
527
|
mtr: {
|
|
528
|
-
render:
|
|
529
|
-
sizeX:
|
|
530
|
-
sizeY:
|
|
528
|
+
render: $e,
|
|
529
|
+
sizeX: Q,
|
|
530
|
+
sizeY: Q,
|
|
531
531
|
offsetX: 0,
|
|
532
|
-
offsetY: -
|
|
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 = (
|
|
546
|
-
var
|
|
547
|
-
(
|
|
545
|
+
}), t === "mtr" && (e[t].cursorStyle = "grab", e[t].mouseDownHandler = (n, o, i, r) => {
|
|
546
|
+
var 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,17 +616,17 @@ const Qe = "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
|
-
copyPaste: (c) =>
|
|
629
|
+
copyPaste: (c) => j(null, null, function* () {
|
|
630
630
|
c.clipboardManager.copyPaste();
|
|
631
631
|
}),
|
|
632
632
|
delete: (c) => {
|
|
@@ -652,18 +652,18 @@ const Qe = "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 =
|
|
663
|
-
style: I(I({},
|
|
664
|
-
btnStyle: I(I({},
|
|
665
|
-
icons: I(I({},
|
|
666
|
-
handlers: I(I({},
|
|
662
|
+
this.config = be(I(I({}, Y), e), {
|
|
663
|
+
style: I(I({}, Y.style), e.style || {}),
|
|
664
|
+
btnStyle: I(I({}, Y.btnStyle), e.btnStyle || {}),
|
|
665
|
+
icons: I(I({}, Y.icons), e.icons || {}),
|
|
666
|
+
handlers: I(I({}, Y.handlers), e.handlers || {})
|
|
667
667
|
}), 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 = () => {
|
|
668
668
|
this.el.style.display = "none";
|
|
669
669
|
}, this._createDOM(), this._bindEvents();
|
|
@@ -690,8 +690,8 @@ class at {
|
|
|
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 at {
|
|
|
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 at {
|
|
|
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.showRotateAngle || !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 Q {
|
|
|
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 Q {
|
|
|
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 Q {
|
|
|
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
|
/**
|
|
@@ -908,19 +1015,19 @@ class Q {
|
|
|
908
1015
|
* @fires editor:history-state-loaded
|
|
909
1016
|
*/
|
|
910
1017
|
loadStateFromFullState(e) {
|
|
911
|
-
return
|
|
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
|
-
const r = t.getObjects().find((
|
|
919
|
-
r && (this.editor.montageArea = r, (
|
|
920
|
-
const d = t.getObjects().find((
|
|
1025
|
+
const r = t.getObjects().find((l) => l.id === "montage-area");
|
|
1026
|
+
r && (this.editor.montageArea = r, (o !== t.getWidth() || i !== t.getHeight()) && s.updateCanvas());
|
|
1027
|
+
const d = t.getObjects().find((l) => l.id === "overlay-mask");
|
|
921
1028
|
d && (a.overlayMask = d, a.overlayMask.visible = !1);
|
|
922
|
-
const
|
|
923
|
-
|
|
1029
|
+
const h = t.getObjects().find((l) => l.id === "background");
|
|
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,
|
|
@@ -935,7 +1042,7 @@ class Q {
|
|
|
935
1042
|
* @fires editor:undo
|
|
936
1043
|
*/
|
|
937
1044
|
undo() {
|
|
938
|
-
return
|
|
1045
|
+
return j(this, null, function* () {
|
|
939
1046
|
if (!this.skipHistory) {
|
|
940
1047
|
if (this.currentIndex <= 0) {
|
|
941
1048
|
console.log("Нет предыдущих состояний для отмены.");
|
|
@@ -972,7 +1079,7 @@ class Q {
|
|
|
972
1079
|
* @fires editor:redo
|
|
973
1080
|
*/
|
|
974
1081
|
redo() {
|
|
975
|
-
return
|
|
1082
|
+
return j(this, null, function* () {
|
|
976
1083
|
if (!this.skipHistory) {
|
|
977
1084
|
if (this.currentIndex >= this.patches.length) {
|
|
978
1085
|
console.log("Нет состояний для повтора.");
|
|
@@ -1005,8 +1112,8 @@ class Q {
|
|
|
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
|
}
|
|
@@ -1023,46 +1130,46 @@ class O {
|
|
|
1023
1130
|
* @returns возвращает Promise с объектом изображения или null в случае ошибки
|
|
1024
1131
|
*/
|
|
1025
1132
|
importImage(e) {
|
|
1026
|
-
return
|
|
1133
|
+
return j(this, null, function* () {
|
|
1027
1134
|
const {
|
|
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:
|
|
1037
|
-
if (!this.isAllowedContentType(
|
|
1038
|
-
const
|
|
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",
|
|
1043
|
-
message:
|
|
1150
|
+
message: f,
|
|
1044
1151
|
data: {
|
|
1045
1152
|
source: t,
|
|
1046
1153
|
format: M,
|
|
1047
|
-
contentType:
|
|
1154
|
+
contentType: g,
|
|
1048
1155
|
acceptContentTypes: m,
|
|
1049
|
-
acceptFormats:
|
|
1050
|
-
fromClipboard:
|
|
1051
|
-
isBackground:
|
|
1156
|
+
acceptFormats: p,
|
|
1157
|
+
fromClipboard: n,
|
|
1158
|
+
isBackground: o,
|
|
1052
1159
|
withoutSelection: i
|
|
1053
1160
|
}
|
|
1054
1161
|
}), null;
|
|
1055
1162
|
}
|
|
1056
|
-
|
|
1163
|
+
l.suspendHistory();
|
|
1057
1164
|
try {
|
|
1058
|
-
let
|
|
1165
|
+
let f, b;
|
|
1059
1166
|
if (t instanceof File)
|
|
1060
|
-
|
|
1167
|
+
f = URL.createObjectURL(t);
|
|
1061
1168
|
else if (typeof t == "string") {
|
|
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,67 +1177,67 @@ class O {
|
|
|
1070
1177
|
data: {
|
|
1071
1178
|
source: t,
|
|
1072
1179
|
format: M,
|
|
1073
|
-
contentType:
|
|
1180
|
+
contentType: g,
|
|
1074
1181
|
acceptContentTypes: m,
|
|
1075
|
-
acceptFormats:
|
|
1076
|
-
fromClipboard:
|
|
1077
|
-
isBackground:
|
|
1182
|
+
acceptFormats: p,
|
|
1183
|
+
fromClipboard: n,
|
|
1184
|
+
isBackground: o,
|
|
1078
1185
|
withoutSelection: i
|
|
1079
1186
|
}
|
|
1080
1187
|
}), null;
|
|
1081
|
-
if (this._createdBlobUrls.push(
|
|
1082
|
-
const C = yield
|
|
1083
|
-
b =
|
|
1188
|
+
if (this._createdBlobUrls.push(f), M === "svg") {
|
|
1189
|
+
const C = yield ke(f);
|
|
1190
|
+
b = W.groupSVGElements(C.objects, C.options);
|
|
1084
1191
|
} else
|
|
1085
|
-
b = yield
|
|
1086
|
-
const { width: S, height:
|
|
1087
|
-
if (b instanceof
|
|
1192
|
+
b = yield Z.fromURL(f, { crossOrigin: "anonymous" });
|
|
1193
|
+
const { width: S, height: T } = b;
|
|
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()),
|
|
1091
|
-
const
|
|
1092
|
-
this._createdBlobUrls.push(
|
|
1093
|
-
} else if (
|
|
1094
|
-
const
|
|
1095
|
-
this._createdBlobUrls.push(
|
|
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);
|
|
1199
|
+
this._createdBlobUrls.push(L), b = yield Z.fromURL(L, { crossOrigin: "anonymous" });
|
|
1200
|
+
} else if (T < z || S < U) {
|
|
1201
|
+
const B = yield this.resizeImageToBoundaries(D, "min"), L = URL.createObjectURL(B);
|
|
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
|
-
r.add(b), r.centerObject(b), i || r.setActiveObject(b), r.renderAll(),
|
|
1105
|
-
const
|
|
1211
|
+
r.add(b), r.centerObject(b), i || r.setActiveObject(b), r.renderAll(), l.resumeHistory(), a || l.saveState();
|
|
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
|
-
return r.fire("editor:image-imported",
|
|
1117
|
-
} catch (
|
|
1118
|
-
return
|
|
1223
|
+
return r.fire("editor:image-imported", H), H;
|
|
1224
|
+
} catch (f) {
|
|
1225
|
+
return u.emitError({
|
|
1119
1226
|
origin: "ImageManager",
|
|
1120
1227
|
method: "importImage",
|
|
1121
1228
|
code: "IMPORT_FAILED",
|
|
1122
|
-
message: `Ошибка импорта изображения: ${
|
|
1229
|
+
message: `Ошибка импорта изображения: ${f.message}`,
|
|
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;
|
|
1134
1241
|
}
|
|
1135
1242
|
});
|
|
1136
1243
|
}
|
|
@@ -1143,16 +1250,16 @@ class O {
|
|
|
1143
1250
|
* @returns возвращает Promise с Blob-объектом уменьшенного изображения
|
|
1144
1251
|
*/
|
|
1145
1252
|
resizeImageToBoundaries(e, t = "max") {
|
|
1146
|
-
return
|
|
1147
|
-
let s = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${
|
|
1148
|
-
t === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${
|
|
1253
|
+
return j(this, null, function* () {
|
|
1254
|
+
let s = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${k}x${_}`;
|
|
1255
|
+
t === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${U}x${z}`);
|
|
1149
1256
|
const a = {
|
|
1150
1257
|
dataURL: e,
|
|
1151
1258
|
sizeType: t,
|
|
1152
|
-
maxWidth:
|
|
1153
|
-
maxHeight:
|
|
1154
|
-
minWidth:
|
|
1155
|
-
minHeight:
|
|
1259
|
+
maxWidth: k,
|
|
1260
|
+
maxHeight: _,
|
|
1261
|
+
minWidth: U,
|
|
1262
|
+
minHeight: z
|
|
1156
1263
|
};
|
|
1157
1264
|
return this.editor.errorManager.emitWarning({
|
|
1158
1265
|
origin: "ImageManager",
|
|
@@ -1175,101 +1282,105 @@ class O {
|
|
|
1175
1282
|
* @fires editor:canvas-exported
|
|
1176
1283
|
*/
|
|
1177
1284
|
exportCanvasAsImageFile() {
|
|
1178
|
-
return
|
|
1285
|
+
return j(this, arguments, function* (e = {}) {
|
|
1179
1286
|
const {
|
|
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
|
|
1293
|
+
const h = s === "application/pdf", l = h ? "image/jpg" : s, u = N.getFormatFromContentType(l);
|
|
1187
1294
|
i.setCoords();
|
|
1188
|
-
const { left: g, top:
|
|
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
|
-
const
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1297
|
+
const b = f.getObjects().find((y) => y.id === i.id);
|
|
1298
|
+
if (b && (b.visible = !1), d != null && d.isBlocked) {
|
|
1299
|
+
const y = f.getObjects().find((w) => w.id === d.overlayMask.id);
|
|
1300
|
+
y && (y.visible = !1);
|
|
1301
|
+
}
|
|
1302
|
+
f.viewportTransform = [1, 0, 0, 1, -g, -M], f.setDimensions({ width: m, height: p }, { backstoreOnly: !0 }), f.renderAll();
|
|
1303
|
+
const S = f.getObjects().filter((y) => y.format).every((y) => y.format === "svg");
|
|
1304
|
+
if (u === "svg" && S) {
|
|
1194
1305
|
const y = f.toSVG();
|
|
1195
1306
|
f.dispose();
|
|
1196
1307
|
const E = {
|
|
1197
|
-
image:
|
|
1308
|
+
image: N._exportSVGStringAsFile(y, {
|
|
1198
1309
|
exportAsBase64: a,
|
|
1199
|
-
exportAsBlob:
|
|
1310
|
+
exportAsBlob: n,
|
|
1200
1311
|
fileName: t
|
|
1201
1312
|
}),
|
|
1202
1313
|
format: "svg",
|
|
1203
1314
|
contentType: "image/svg+xml",
|
|
1204
1315
|
fileName: t.replace(/\.[^/.]+$/, ".svg")
|
|
1205
1316
|
};
|
|
1206
|
-
return
|
|
1317
|
+
return o.fire("editor:canvas-exported", E), E;
|
|
1207
1318
|
}
|
|
1208
|
-
const
|
|
1319
|
+
const T = yield new Promise((y, w) => {
|
|
1209
1320
|
f.getElement().toBlob((E) => {
|
|
1210
|
-
E ? y(E) :
|
|
1321
|
+
E ? y(E) : w(new Error("Failed to create Blob from canvas"));
|
|
1211
1322
|
});
|
|
1212
1323
|
});
|
|
1213
|
-
if (f.dispose(),
|
|
1324
|
+
if (f.dispose(), n) {
|
|
1214
1325
|
const y = {
|
|
1215
|
-
image:
|
|
1216
|
-
format:
|
|
1326
|
+
image: T,
|
|
1327
|
+
format: u,
|
|
1217
1328
|
contentType: l,
|
|
1218
1329
|
fileName: t
|
|
1219
1330
|
};
|
|
1220
|
-
return
|
|
1331
|
+
return o.fire("editor:canvas-exported", y), y;
|
|
1221
1332
|
}
|
|
1222
|
-
const
|
|
1333
|
+
const H = yield createImageBitmap(T), C = yield r.post(
|
|
1223
1334
|
"toDataURL",
|
|
1224
|
-
{ format:
|
|
1225
|
-
[
|
|
1335
|
+
{ format: u, quality: 1, bitmap: H },
|
|
1336
|
+
[H]
|
|
1226
1337
|
);
|
|
1227
|
-
if (
|
|
1228
|
-
const
|
|
1229
|
-
orientation:
|
|
1338
|
+
if (h) {
|
|
1339
|
+
const w = m * 0.264583, E = p * 0.264583, De = (yield this.editor.moduleLoader.loadModule("jspdf")).jsPDF, ee = new De({
|
|
1340
|
+
orientation: w > E ? "landscape" : "portrait",
|
|
1230
1341
|
unit: "mm",
|
|
1231
|
-
format: [
|
|
1342
|
+
format: [w, E]
|
|
1232
1343
|
});
|
|
1233
|
-
if (
|
|
1234
|
-
const
|
|
1235
|
-
image:
|
|
1344
|
+
if (ee.addImage(String(C), "JPG", 0, 0, w, E), a) {
|
|
1345
|
+
const ge = {
|
|
1346
|
+
image: ee.output("datauristring"),
|
|
1236
1347
|
format: "pdf",
|
|
1237
1348
|
contentType: "application/pdf",
|
|
1238
1349
|
fileName: t
|
|
1239
1350
|
};
|
|
1240
|
-
return
|
|
1351
|
+
return o.fire("editor:canvas-exported", ge), ge;
|
|
1241
1352
|
}
|
|
1242
|
-
const
|
|
1243
|
-
image: new File([
|
|
1353
|
+
const Ee = ee.output("blob"), ue = {
|
|
1354
|
+
image: new File([Ee], t, { type: "application/pdf" }),
|
|
1244
1355
|
format: "pdf",
|
|
1245
1356
|
contentType: "application/pdf",
|
|
1246
1357
|
fileName: t
|
|
1247
1358
|
};
|
|
1248
|
-
return
|
|
1359
|
+
return o.fire("editor:canvas-exported", ue), ue;
|
|
1249
1360
|
}
|
|
1250
1361
|
if (a) {
|
|
1251
1362
|
const y = {
|
|
1252
|
-
image:
|
|
1253
|
-
format:
|
|
1363
|
+
image: C,
|
|
1364
|
+
format: u,
|
|
1254
1365
|
contentType: l,
|
|
1255
1366
|
fileName: t
|
|
1256
1367
|
};
|
|
1257
|
-
return
|
|
1368
|
+
return o.fire("editor:canvas-exported", y), y;
|
|
1258
1369
|
}
|
|
1259
|
-
const
|
|
1260
|
-
image: new File([
|
|
1261
|
-
format:
|
|
1370
|
+
const D = u === "svg" && !S ? t.replace(/\.[^/.]+$/, ".png") : t, L = {
|
|
1371
|
+
image: new File([T], D, { type: l }),
|
|
1372
|
+
format: u,
|
|
1262
1373
|
contentType: l,
|
|
1263
|
-
fileName:
|
|
1374
|
+
fileName: D
|
|
1264
1375
|
};
|
|
1265
|
-
return
|
|
1266
|
-
} catch (
|
|
1376
|
+
return o.fire("editor:canvas-exported", L), L;
|
|
1377
|
+
} catch (h) {
|
|
1267
1378
|
return this.editor.errorManager.emitError({
|
|
1268
1379
|
origin: "ImageManager",
|
|
1269
1380
|
method: "exportCanvasAsImageFile",
|
|
1270
1381
|
code: "IMAGE_EXPORT_FAILED",
|
|
1271
|
-
message: `Ошибка экспорта изображения: ${
|
|
1272
|
-
data: { contentType: s, fileName: t, exportAsBase64: a, exportAsBlob:
|
|
1382
|
+
message: `Ошибка экспорта изображения: ${h.message}`,
|
|
1383
|
+
data: { contentType: s, fileName: t, exportAsBase64: a, exportAsBlob: n }
|
|
1273
1384
|
}), null;
|
|
1274
1385
|
}
|
|
1275
1386
|
});
|
|
@@ -1286,13 +1397,13 @@ class O {
|
|
|
1286
1397
|
* @fires editor:object-exported
|
|
1287
1398
|
*/
|
|
1288
1399
|
exportObjectAsImageFile() {
|
|
1289
|
-
return
|
|
1400
|
+
return j(this, arguments, function* (e = {}) {
|
|
1290
1401
|
const {
|
|
1291
1402
|
object: t,
|
|
1292
1403
|
fileName: s = "image.png",
|
|
1293
1404
|
contentType: a = "image/png",
|
|
1294
|
-
exportAsBase64:
|
|
1295
|
-
exportAsBlob:
|
|
1405
|
+
exportAsBase64: n = !1,
|
|
1406
|
+
exportAsBlob: o = !1
|
|
1296
1407
|
} = e, { canvas: i, workerManager: r } = this.editor, d = t || i.getActiveObject();
|
|
1297
1408
|
if (!d)
|
|
1298
1409
|
return this.editor.errorManager.emitError({
|
|
@@ -1300,74 +1411,74 @@ class O {
|
|
|
1300
1411
|
method: "exportObjectAsImageFile",
|
|
1301
1412
|
code: "NO_OBJECT_SELECTED",
|
|
1302
1413
|
message: "Не выбран объект для экспорта",
|
|
1303
|
-
data: { contentType: a, fileName: s, exportAsBase64:
|
|
1414
|
+
data: { contentType: a, fileName: s, exportAsBase64: n, exportAsBlob: o }
|
|
1304
1415
|
}), null;
|
|
1305
1416
|
try {
|
|
1306
|
-
const
|
|
1307
|
-
if (
|
|
1308
|
-
const m = d.toSVG(),
|
|
1309
|
-
exportAsBase64:
|
|
1310
|
-
exportAsBlob:
|
|
1417
|
+
const h = N.getFormatFromContentType(a);
|
|
1418
|
+
if (h === "svg") {
|
|
1419
|
+
const m = d.toSVG(), p = N._exportSVGStringAsFile(m, {
|
|
1420
|
+
exportAsBase64: n,
|
|
1421
|
+
exportAsBlob: o,
|
|
1311
1422
|
fileName: s
|
|
1312
|
-
}),
|
|
1423
|
+
}), f = {
|
|
1313
1424
|
object: d,
|
|
1314
|
-
image:
|
|
1315
|
-
format:
|
|
1425
|
+
image: p,
|
|
1426
|
+
format: h,
|
|
1316
1427
|
contentType: "image/svg+xml",
|
|
1317
1428
|
fileName: s.replace(/\.[^/.]+$/, ".svg")
|
|
1318
1429
|
};
|
|
1319
|
-
return i.fire("editor:object-exported",
|
|
1430
|
+
return i.fire("editor:object-exported", f), f;
|
|
1320
1431
|
}
|
|
1321
|
-
if (
|
|
1322
|
-
const m = yield createImageBitmap(d.getElement()),
|
|
1432
|
+
if (n && d instanceof Z) {
|
|
1433
|
+
const m = yield createImageBitmap(d.getElement()), p = yield r.post(
|
|
1323
1434
|
"toDataURL",
|
|
1324
1435
|
{
|
|
1325
|
-
format:
|
|
1436
|
+
format: h,
|
|
1326
1437
|
quality: 1,
|
|
1327
1438
|
bitmap: m
|
|
1328
1439
|
},
|
|
1329
1440
|
[m]
|
|
1330
|
-
),
|
|
1441
|
+
), f = {
|
|
1331
1442
|
object: d,
|
|
1332
|
-
image:
|
|
1333
|
-
format:
|
|
1443
|
+
image: p,
|
|
1444
|
+
format: h,
|
|
1334
1445
|
contentType: a,
|
|
1335
1446
|
fileName: s
|
|
1336
1447
|
};
|
|
1337
|
-
return i.fire("editor:object-exported",
|
|
1448
|
+
return i.fire("editor:object-exported", f), f;
|
|
1338
1449
|
}
|
|
1339
|
-
const
|
|
1450
|
+
const l = d.toCanvasElement({
|
|
1340
1451
|
enableRetinaScaling: !1
|
|
1341
|
-
}),
|
|
1342
|
-
|
|
1343
|
-
|
|
1452
|
+
}), u = yield new Promise((m, p) => {
|
|
1453
|
+
l.toBlob((f) => {
|
|
1454
|
+
f ? m(f) : p(new Error("Failed to create Blob from canvas"));
|
|
1344
1455
|
});
|
|
1345
1456
|
});
|
|
1346
|
-
if (
|
|
1457
|
+
if (o) {
|
|
1347
1458
|
const m = {
|
|
1348
1459
|
object: d,
|
|
1349
|
-
image:
|
|
1350
|
-
format:
|
|
1460
|
+
image: u,
|
|
1461
|
+
format: h,
|
|
1351
1462
|
contentType: a,
|
|
1352
1463
|
fileName: s
|
|
1353
1464
|
};
|
|
1354
1465
|
return i.fire("editor:object-exported", m), m;
|
|
1355
1466
|
}
|
|
1356
|
-
const
|
|
1467
|
+
const g = new File([u], s, { type: a }), M = {
|
|
1357
1468
|
object: d,
|
|
1358
|
-
image:
|
|
1359
|
-
format:
|
|
1469
|
+
image: g,
|
|
1470
|
+
format: h,
|
|
1360
1471
|
contentType: a,
|
|
1361
1472
|
fileName: s
|
|
1362
1473
|
};
|
|
1363
1474
|
return i.fire("editor:object-exported", M), M;
|
|
1364
|
-
} catch (
|
|
1475
|
+
} catch (h) {
|
|
1365
1476
|
return this.editor.errorManager.emitError({
|
|
1366
1477
|
origin: "ImageManager",
|
|
1367
1478
|
method: "exportObjectAsImageFile",
|
|
1368
1479
|
code: "IMAGE_EXPORT_FAILED",
|
|
1369
|
-
message: `Ошибка экспорта объекта: ${
|
|
1370
|
-
data: { contentType: a, fileName: s, exportAsBase64:
|
|
1480
|
+
message: `Ошибка экспорта объекта: ${h.message}`,
|
|
1481
|
+
data: { contentType: a, fileName: s, exportAsBase64: n, exportAsBlob: o }
|
|
1371
1482
|
}), null;
|
|
1372
1483
|
}
|
|
1373
1484
|
});
|
|
@@ -1383,7 +1494,7 @@ class O {
|
|
|
1383
1494
|
* @returns массив допустимых форматов изображений
|
|
1384
1495
|
*/
|
|
1385
1496
|
getAllowedFormatsFromContentTypes() {
|
|
1386
|
-
return this.acceptContentTypes.map((e) =>
|
|
1497
|
+
return this.acceptContentTypes.map((e) => N.getFormatFromContentType(e)).filter((e) => e);
|
|
1387
1498
|
}
|
|
1388
1499
|
/**
|
|
1389
1500
|
* Проверяет, является ли contentType допустимым типом изображения.
|
|
@@ -1399,7 +1510,7 @@ class O {
|
|
|
1399
1510
|
* @public
|
|
1400
1511
|
*/
|
|
1401
1512
|
getContentType(e) {
|
|
1402
|
-
return
|
|
1513
|
+
return j(this, null, function* () {
|
|
1403
1514
|
return typeof e == "string" ? this.getContentTypeFromUrl(e) : e.type || "application/octet-stream";
|
|
1404
1515
|
});
|
|
1405
1516
|
}
|
|
@@ -1410,7 +1521,7 @@ class O {
|
|
|
1410
1521
|
* @public
|
|
1411
1522
|
*/
|
|
1412
1523
|
getContentTypeFromUrl(e) {
|
|
1413
|
-
return
|
|
1524
|
+
return j(this, null, function* () {
|
|
1414
1525
|
if (e.startsWith("data:")) {
|
|
1415
1526
|
const t = e.match(/^data:([^;]+)/);
|
|
1416
1527
|
return t ? t[1] : "application/octet-stream";
|
|
@@ -1434,11 +1545,11 @@ class O {
|
|
|
1434
1545
|
getContentTypeFromExtension(e) {
|
|
1435
1546
|
var t;
|
|
1436
1547
|
try {
|
|
1437
|
-
const a = (t = new URL(e).pathname.split(".").pop()) == null ? void 0 : t.toLowerCase(),
|
|
1438
|
-
return this.acceptContentTypes.forEach((
|
|
1439
|
-
const i =
|
|
1440
|
-
i && (
|
|
1441
|
-
}), 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";
|
|
1442
1553
|
} catch (s) {
|
|
1443
1554
|
return console.warn("Не удалось определить расширение из URL:", e, s), "application/octet-stream";
|
|
1444
1555
|
}
|
|
@@ -1456,8 +1567,8 @@ class O {
|
|
|
1456
1567
|
}) {
|
|
1457
1568
|
const { montageArea: s } = this.editor;
|
|
1458
1569
|
if (!s || !e) return 1;
|
|
1459
|
-
const a = s.width,
|
|
1460
|
-
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;
|
|
1461
1572
|
}
|
|
1462
1573
|
/**
|
|
1463
1574
|
* Преобразует SVG-строку в Blob, файл, или base64
|
|
@@ -1489,11 +1600,11 @@ class O {
|
|
|
1489
1600
|
return t ? t[1] : "";
|
|
1490
1601
|
}
|
|
1491
1602
|
}
|
|
1492
|
-
const
|
|
1493
|
-
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) {
|
|
1494
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";
|
|
1495
1606
|
}
|
|
1496
|
-
class
|
|
1607
|
+
class mt {
|
|
1497
1608
|
/**
|
|
1498
1609
|
* @param options
|
|
1499
1610
|
* @param options.editor – экземпляр редактора
|
|
@@ -1521,18 +1632,18 @@ class lt {
|
|
|
1521
1632
|
var M;
|
|
1522
1633
|
if (!e) return;
|
|
1523
1634
|
const {
|
|
1524
|
-
canvas:
|
|
1525
|
-
montageArea:
|
|
1635
|
+
canvas: n,
|
|
1636
|
+
montageArea: o,
|
|
1526
1637
|
options: { canvasBackstoreWidth: i }
|
|
1527
|
-
} = this.editor, { width: r, height: d } =
|
|
1528
|
-
if (!i || i === "auto" || a ? this.adaptCanvasToContainer() : i ? this.setCanvasBackstoreWidth(Number(i)) : this.setCanvasBackstoreWidth(
|
|
1529
|
-
const m =
|
|
1530
|
-
this.setResolutionHeight(
|
|
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);
|
|
1641
|
+
this.setResolutionHeight(p);
|
|
1531
1642
|
return;
|
|
1532
1643
|
}
|
|
1533
|
-
const { left:
|
|
1534
|
-
|
|
1535
|
-
width:
|
|
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", {
|
|
1646
|
+
width: h,
|
|
1536
1647
|
preserveProportional: t,
|
|
1537
1648
|
withoutSave: s,
|
|
1538
1649
|
adaptCanvasToContainer: a
|
|
@@ -1551,18 +1662,18 @@ class lt {
|
|
|
1551
1662
|
var M;
|
|
1552
1663
|
if (!e) return;
|
|
1553
1664
|
const {
|
|
1554
|
-
canvas:
|
|
1555
|
-
montageArea:
|
|
1665
|
+
canvas: n,
|
|
1666
|
+
montageArea: o,
|
|
1556
1667
|
options: { canvasBackstoreHeight: i }
|
|
1557
|
-
} = this.editor, { width: r, height: d } =
|
|
1558
|
-
if (!i || i === "auto" || a ? this.adaptCanvasToContainer() : i ? this.setCanvasBackstoreHeight(Number(i)) : this.setCanvasBackstoreHeight(
|
|
1559
|
-
const m =
|
|
1560
|
-
this.setResolutionWidth(
|
|
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);
|
|
1671
|
+
this.setResolutionWidth(p);
|
|
1561
1672
|
return;
|
|
1562
1673
|
}
|
|
1563
|
-
const { left:
|
|
1564
|
-
|
|
1565
|
-
height:
|
|
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", {
|
|
1676
|
+
height: h,
|
|
1566
1677
|
preserveProportional: t,
|
|
1567
1678
|
withoutSave: s,
|
|
1568
1679
|
adaptCanvasToContainer: a
|
|
@@ -1574,7 +1685,7 @@ class lt {
|
|
|
1574
1685
|
*/
|
|
1575
1686
|
centerMontageArea() {
|
|
1576
1687
|
var r;
|
|
1577
|
-
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);
|
|
1578
1689
|
t.set({
|
|
1579
1690
|
left: s / 2,
|
|
1580
1691
|
top: a / 2
|
|
@@ -1583,7 +1694,7 @@ class lt {
|
|
|
1583
1694
|
top: a / 2
|
|
1584
1695
|
}), e.renderAll();
|
|
1585
1696
|
const i = e.viewportTransform;
|
|
1586
|
-
i[4] = s / 2 -
|
|
1697
|
+
i[4] = s / 2 - o.x * n, i[5] = a / 2 - o.y * n, e.setViewportTransform(i), e.renderAll();
|
|
1587
1698
|
}
|
|
1588
1699
|
/**
|
|
1589
1700
|
* Метод для получения координат объекта с учетом текущего зума
|
|
@@ -1599,7 +1710,7 @@ class lt {
|
|
|
1599
1710
|
code: "NO_ACTIVE_OBJECT",
|
|
1600
1711
|
message: "Не выбран объект для получения координат"
|
|
1601
1712
|
}), { left: 0, top: 0 };
|
|
1602
|
-
const { width: a, height:
|
|
1713
|
+
const { width: a, height: n } = s, o = t.getZoom(), i = (a - a * o) / 2, r = (n - n * o) / 2;
|
|
1603
1714
|
return { left: i, top: r };
|
|
1604
1715
|
}
|
|
1605
1716
|
/**
|
|
@@ -1607,7 +1718,7 @@ class lt {
|
|
|
1607
1718
|
*/
|
|
1608
1719
|
setCanvasBackstoreWidth(e) {
|
|
1609
1720
|
if (!e || typeof e != "number") return;
|
|
1610
|
-
const t =
|
|
1721
|
+
const t = x(e, U, k);
|
|
1611
1722
|
this.editor.canvas.setDimensions({ width: t }, { backstoreOnly: !0 });
|
|
1612
1723
|
}
|
|
1613
1724
|
/**
|
|
@@ -1616,7 +1727,7 @@ class lt {
|
|
|
1616
1727
|
*/
|
|
1617
1728
|
setCanvasBackstoreHeight(e) {
|
|
1618
1729
|
if (!e || typeof e != "number") return;
|
|
1619
|
-
const t =
|
|
1730
|
+
const t = x(e, z, _);
|
|
1620
1731
|
this.editor.canvas.setDimensions({ height: t }, { backstoreOnly: !0 });
|
|
1621
1732
|
}
|
|
1622
1733
|
/**
|
|
@@ -1625,8 +1736,8 @@ class lt {
|
|
|
1625
1736
|
* с учётом минимальных и максимальных значений.
|
|
1626
1737
|
*/
|
|
1627
1738
|
adaptCanvasToContainer() {
|
|
1628
|
-
const { canvas: e } = this.editor, t = this.getEditorContainer(), s = t.clientWidth, a = t.clientHeight,
|
|
1629
|
-
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 });
|
|
1630
1741
|
}
|
|
1631
1742
|
/**
|
|
1632
1743
|
* Обновляет размеры канваса без изменения позиций объектов.
|
|
@@ -1641,28 +1752,28 @@ class lt {
|
|
|
1641
1752
|
width: s,
|
|
1642
1753
|
height: a
|
|
1643
1754
|
}
|
|
1644
|
-
} = this.editor,
|
|
1755
|
+
} = this.editor, n = t.left, o = t.top;
|
|
1645
1756
|
this.setResolutionWidth(s, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.setResolutionHeight(a, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.centerMontageArea();
|
|
1646
|
-
const i = t.left -
|
|
1757
|
+
const i = t.left - n, r = t.top - o;
|
|
1647
1758
|
if (i !== 0 || r !== 0) {
|
|
1648
|
-
const d = e.getActiveObject(),
|
|
1759
|
+
const d = e.getActiveObject(), h = [];
|
|
1649
1760
|
if ((d == null ? void 0 : d.type) === "activeselection") {
|
|
1650
|
-
const
|
|
1651
|
-
|
|
1761
|
+
const l = d;
|
|
1762
|
+
h.push(...l.getObjects()), e.discardActiveObject();
|
|
1652
1763
|
}
|
|
1653
|
-
if (e.getObjects().forEach((
|
|
1654
|
-
|
|
1655
|
-
left:
|
|
1656
|
-
top:
|
|
1657
|
-
}),
|
|
1658
|
-
}),
|
|
1659
|
-
if (
|
|
1660
|
-
e.setActiveObject(
|
|
1764
|
+
if (e.getObjects().forEach((l) => {
|
|
1765
|
+
l.id === "montage-area" || l.id === "overlay-mask" || l.id === "background" || (l.set({
|
|
1766
|
+
left: l.left + i,
|
|
1767
|
+
top: l.top + r
|
|
1768
|
+
}), l.setCoords());
|
|
1769
|
+
}), h.length > 0)
|
|
1770
|
+
if (h.length === 1)
|
|
1771
|
+
e.setActiveObject(h[0]);
|
|
1661
1772
|
else {
|
|
1662
|
-
const
|
|
1773
|
+
const l = new v(h, {
|
|
1663
1774
|
canvas: e
|
|
1664
1775
|
});
|
|
1665
|
-
e.setActiveObject(
|
|
1776
|
+
e.setActiveObject(l);
|
|
1666
1777
|
}
|
|
1667
1778
|
}
|
|
1668
1779
|
e.renderAll(), e.fire("editor:canvas-updated", {
|
|
@@ -1777,32 +1888,32 @@ class lt {
|
|
|
1777
1888
|
*/
|
|
1778
1889
|
setDisplayDimension({ element: e = "canvas", dimension: t, value: s } = {}) {
|
|
1779
1890
|
if (!s) return;
|
|
1780
|
-
const { canvas: a } = this.editor,
|
|
1891
|
+
const { canvas: a } = this.editor, n = [];
|
|
1781
1892
|
switch (e) {
|
|
1782
1893
|
case "canvas":
|
|
1783
|
-
|
|
1894
|
+
n.push(a.lowerCanvasEl, a.upperCanvasEl);
|
|
1784
1895
|
break;
|
|
1785
1896
|
case "wrapper":
|
|
1786
|
-
|
|
1897
|
+
n.push(a.wrapperEl);
|
|
1787
1898
|
break;
|
|
1788
1899
|
case "container":
|
|
1789
|
-
|
|
1900
|
+
n.push(this.getEditorContainer());
|
|
1790
1901
|
break;
|
|
1791
1902
|
default:
|
|
1792
|
-
|
|
1903
|
+
n.push(a.lowerCanvasEl, a.upperCanvasEl);
|
|
1793
1904
|
}
|
|
1794
|
-
const
|
|
1905
|
+
const o = t === "width" ? "width" : "height";
|
|
1795
1906
|
if (typeof s == "string") {
|
|
1796
|
-
|
|
1797
|
-
r.style[
|
|
1907
|
+
n.forEach((r) => {
|
|
1908
|
+
r.style[o] = s;
|
|
1798
1909
|
});
|
|
1799
1910
|
return;
|
|
1800
1911
|
}
|
|
1801
1912
|
if (isNaN(s)) return;
|
|
1802
1913
|
const i = `${s}px`;
|
|
1803
|
-
|
|
1804
|
-
r.style[
|
|
1805
|
-
}), a.fire(`editor:display-${e}-${
|
|
1914
|
+
n.forEach((r) => {
|
|
1915
|
+
r.style[o] = i;
|
|
1916
|
+
}), a.fire(`editor:display-${e}-${o}-changed`, {
|
|
1806
1917
|
element: e,
|
|
1807
1918
|
value: s
|
|
1808
1919
|
});
|
|
@@ -1818,27 +1929,27 @@ class lt {
|
|
|
1818
1929
|
scaleMontageAreaToImage({ object: e, preserveAspectRatio: t, withoutSave: s } = {}) {
|
|
1819
1930
|
const {
|
|
1820
1931
|
canvas: a,
|
|
1821
|
-
montageArea:
|
|
1822
|
-
transformManager:
|
|
1932
|
+
montageArea: n,
|
|
1933
|
+
transformManager: o,
|
|
1823
1934
|
options: {
|
|
1824
1935
|
montageAreaWidth: i,
|
|
1825
1936
|
montageAreaHeight: r
|
|
1826
1937
|
}
|
|
1827
1938
|
} = this.editor, d = e || a.getActiveObject();
|
|
1828
|
-
if (!
|
|
1829
|
-
const { width:
|
|
1830
|
-
let
|
|
1939
|
+
if (!Mt(d)) return;
|
|
1940
|
+
const { width: h, height: l } = d;
|
|
1941
|
+
let u = Math.min(h, k), g = Math.min(l, _);
|
|
1831
1942
|
if (t) {
|
|
1832
1943
|
const {
|
|
1833
1944
|
width: M,
|
|
1834
1945
|
height: m
|
|
1835
|
-
} =
|
|
1836
|
-
|
|
1946
|
+
} = n, p = h / M, f = l / m, b = Math.max(p, f);
|
|
1947
|
+
u = M * b, g = m * b;
|
|
1837
1948
|
}
|
|
1838
|
-
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", {
|
|
1839
1950
|
object: d,
|
|
1840
|
-
width:
|
|
1841
|
-
height:
|
|
1951
|
+
width: u,
|
|
1952
|
+
height: g,
|
|
1842
1953
|
preserveAspectRatio: t,
|
|
1843
1954
|
withoutSave: s
|
|
1844
1955
|
});
|
|
@@ -1863,11 +1974,11 @@ class lt {
|
|
|
1863
1974
|
transformManager: s,
|
|
1864
1975
|
historyManager: a,
|
|
1865
1976
|
options: {
|
|
1866
|
-
montageAreaWidth:
|
|
1867
|
-
montageAreaHeight:
|
|
1977
|
+
montageAreaWidth: n,
|
|
1978
|
+
montageAreaHeight: o
|
|
1868
1979
|
}
|
|
1869
1980
|
} = this.editor;
|
|
1870
|
-
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");
|
|
1871
1982
|
}
|
|
1872
1983
|
/**
|
|
1873
1984
|
* Получение всех объектов внутри монтажной области редактора
|
|
@@ -1881,13 +1992,13 @@ class lt {
|
|
|
1881
1992
|
backgroundManager: { backgroundObject: a }
|
|
1882
1993
|
} = this.editor;
|
|
1883
1994
|
return e.getObjects().filter(
|
|
1884
|
-
(
|
|
1995
|
+
(o) => o.id !== t.id && o.id !== (s == null ? void 0 : s.id) && o.id !== (a == null ? void 0 : a.id)
|
|
1885
1996
|
);
|
|
1886
1997
|
}
|
|
1887
1998
|
}
|
|
1888
|
-
class
|
|
1999
|
+
class bt {
|
|
1889
2000
|
constructor({ editor: e }) {
|
|
1890
|
-
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;
|
|
1891
2002
|
}
|
|
1892
2003
|
/**
|
|
1893
2004
|
* Метод рассчитывает и применяет зум по умолчанию для монтажной области редактора.
|
|
@@ -1897,7 +2008,7 @@ class ht {
|
|
|
1897
2008
|
* @param scale - Желаемый масштаб относительно размеров контейнера редактора.
|
|
1898
2009
|
*/
|
|
1899
2010
|
calculateAndApplyDefaultZoom(e = this.options.defaultScale) {
|
|
1900
|
-
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;
|
|
1901
2012
|
this.defaultZoom = Math.min(r, d), this.setZoom();
|
|
1902
2013
|
}
|
|
1903
2014
|
/**
|
|
@@ -1909,15 +2020,15 @@ class ht {
|
|
|
1909
2020
|
* @fires editor:zoom-changed
|
|
1910
2021
|
* Если передавать координаты курсора, то нужно быть аккуратнее, так как юзер может выйти за пределы рабочей области
|
|
1911
2022
|
*/
|
|
1912
|
-
zoom(e =
|
|
1913
|
-
var
|
|
2023
|
+
zoom(e = ut, t = {}) {
|
|
2024
|
+
var u, g;
|
|
1914
2025
|
if (!e) return;
|
|
1915
|
-
const { minZoom: s, maxZoom: a } = this, { canvas:
|
|
1916
|
-
let
|
|
1917
|
-
|
|
1918
|
-
currentZoom:
|
|
1919
|
-
zoom:
|
|
1920
|
-
point:
|
|
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(),
|
|
2030
|
+
zoom: l,
|
|
2031
|
+
point: h
|
|
1921
2032
|
});
|
|
1922
2033
|
}
|
|
1923
2034
|
/**
|
|
@@ -1926,12 +2037,12 @@ class ht {
|
|
|
1926
2037
|
* @fires editor:zoom-changed
|
|
1927
2038
|
*/
|
|
1928
2039
|
setZoom(e = this.defaultZoom) {
|
|
1929
|
-
const { minZoom: t, maxZoom: s } = this, { canvas: a } = this.editor,
|
|
1930
|
-
let
|
|
1931
|
-
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", {
|
|
1932
2043
|
currentZoom: a.getZoom(),
|
|
1933
|
-
zoom:
|
|
1934
|
-
point:
|
|
2044
|
+
zoom: o,
|
|
2045
|
+
point: n
|
|
1935
2046
|
});
|
|
1936
2047
|
}
|
|
1937
2048
|
/**
|
|
@@ -1939,7 +2050,7 @@ class ht {
|
|
|
1939
2050
|
* @fires editor:zoom-changed
|
|
1940
2051
|
*/
|
|
1941
2052
|
resetZoom() {
|
|
1942
|
-
const { canvas: e } = this.editor, t = new
|
|
2053
|
+
const { canvas: e } = this.editor, t = new X(e.getCenterPoint());
|
|
1943
2054
|
e.zoomToPoint(t, this.defaultZoom), this.editor.canvas.fire("editor:zoom-changed", {
|
|
1944
2055
|
currentZoom: e.getZoom(),
|
|
1945
2056
|
point: t
|
|
@@ -1952,14 +2063,14 @@ class ht {
|
|
|
1952
2063
|
* @param options.withoutSave - Не сохранять состояние
|
|
1953
2064
|
* @fires editor:object-rotated
|
|
1954
2065
|
*/
|
|
1955
|
-
rotate(e =
|
|
1956
|
-
const { canvas: s, historyManager: a } = this.editor,
|
|
1957
|
-
if (!
|
|
1958
|
-
const
|
|
1959
|
-
|
|
1960
|
-
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,
|
|
1961
2072
|
withoutSave: t,
|
|
1962
|
-
angle:
|
|
2073
|
+
angle: o
|
|
1963
2074
|
});
|
|
1964
2075
|
}
|
|
1965
2076
|
/**
|
|
@@ -2001,11 +2112,11 @@ class ht {
|
|
|
2001
2112
|
opacity: t = 1,
|
|
2002
2113
|
withoutSave: s
|
|
2003
2114
|
} = {}) {
|
|
2004
|
-
const { canvas: a, historyManager:
|
|
2005
|
-
|
|
2115
|
+
const { canvas: a, historyManager: n } = this.editor, o = e || a.getActiveObject();
|
|
2116
|
+
o && (o instanceof v ? o.getObjects().forEach((i) => {
|
|
2006
2117
|
i.set("opacity", t);
|
|
2007
|
-
}) :
|
|
2008
|
-
object:
|
|
2118
|
+
}) : o.set("opacity", t), a.renderAll(), s || n.saveState(), a.fire("editor:object-opacity-changed", {
|
|
2119
|
+
object: o,
|
|
2009
2120
|
opacity: t,
|
|
2010
2121
|
withoutSave: s
|
|
2011
2122
|
}));
|
|
@@ -2027,18 +2138,18 @@ class ht {
|
|
|
2027
2138
|
withoutSave: s,
|
|
2028
2139
|
fitAsOneObject: a
|
|
2029
2140
|
} = {}) {
|
|
2030
|
-
const { canvas:
|
|
2141
|
+
const { canvas: n, historyManager: o } = this.editor, i = e || n.getActiveObject();
|
|
2031
2142
|
if (i) {
|
|
2032
2143
|
if (i instanceof v && !a) {
|
|
2033
2144
|
const r = i.getObjects();
|
|
2034
|
-
|
|
2035
|
-
this._fitSingleObject(
|
|
2145
|
+
n.discardActiveObject(), r.forEach((h) => {
|
|
2146
|
+
this._fitSingleObject(h, t);
|
|
2036
2147
|
});
|
|
2037
|
-
const d = new v(r, { canvas:
|
|
2038
|
-
|
|
2148
|
+
const d = new v(r, { canvas: n });
|
|
2149
|
+
n.setActiveObject(d);
|
|
2039
2150
|
} else
|
|
2040
2151
|
this._fitSingleObject(i, t);
|
|
2041
|
-
|
|
2152
|
+
n.renderAll(), s || o.saveState(), n.fire("editor:object-fitted", {
|
|
2042
2153
|
object: i,
|
|
2043
2154
|
type: t,
|
|
2044
2155
|
withoutSave: s,
|
|
@@ -2053,9 +2164,9 @@ class ht {
|
|
|
2053
2164
|
* @private
|
|
2054
2165
|
*/
|
|
2055
2166
|
_fitSingleObject(e, t) {
|
|
2056
|
-
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;
|
|
2057
2168
|
let S;
|
|
2058
|
-
t === "contain" ? S = Math.min(
|
|
2169
|
+
t === "contain" ? S = Math.min(f / m, b / p) : S = Math.max(f / m, b / p), e.set({
|
|
2059
2170
|
scaleX: i * S,
|
|
2060
2171
|
scaleY: r * S
|
|
2061
2172
|
}), s.centerObject(e);
|
|
@@ -2079,8 +2190,8 @@ class ht {
|
|
|
2079
2190
|
resetObject({ object: e, alwaysFitObject: t = !1, withoutSave: s = !1 } = {}) {
|
|
2080
2191
|
const {
|
|
2081
2192
|
canvas: a,
|
|
2082
|
-
montageArea:
|
|
2083
|
-
imageManager:
|
|
2193
|
+
montageArea: n,
|
|
2194
|
+
imageManager: o,
|
|
2084
2195
|
historyManager: i,
|
|
2085
2196
|
options: { scaleType: r }
|
|
2086
2197
|
} = this.editor, d = e || a.getActiveObject();
|
|
@@ -2094,11 +2205,11 @@ class ht {
|
|
|
2094
2205
|
}), t)
|
|
2095
2206
|
this.fitObject({ object: d, withoutSave: !0, fitAsOneObject: !0 });
|
|
2096
2207
|
else {
|
|
2097
|
-
const { width:
|
|
2208
|
+
const { width: l, height: u } = n, { width: g, height: M } = d, m = o.calculateScaleFactor({
|
|
2098
2209
|
imageObject: d,
|
|
2099
2210
|
scaleType: r
|
|
2100
2211
|
});
|
|
2101
|
-
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 });
|
|
2102
2213
|
}
|
|
2103
2214
|
d.set({ flipX: !1, flipY: !1, angle: 0 }), a.centerObject(d), a.renderAll(), i.resumeHistory(), s || i.saveState(), a.fire("editor:object-reset", {
|
|
2104
2215
|
object: d,
|
|
@@ -2107,7 +2218,7 @@ class ht {
|
|
|
2107
2218
|
});
|
|
2108
2219
|
}
|
|
2109
2220
|
}
|
|
2110
|
-
class
|
|
2221
|
+
class jt {
|
|
2111
2222
|
constructor({ editor: e }) {
|
|
2112
2223
|
this.editor = e, this.isBlocked = !1, this.overlayMask = null, this._createOverlay();
|
|
2113
2224
|
}
|
|
@@ -2137,8 +2248,8 @@ class gt {
|
|
|
2137
2248
|
const { canvas: e, montageArea: t, historyManager: s } = this.editor;
|
|
2138
2249
|
if (!t || !this.overlayMask) return;
|
|
2139
2250
|
s.suspendHistory(), t.setCoords();
|
|
2140
|
-
const { left: a, top:
|
|
2141
|
-
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();
|
|
2142
2253
|
}
|
|
2143
2254
|
/**
|
|
2144
2255
|
* Выключает редактор:
|
|
@@ -2164,7 +2275,7 @@ class gt {
|
|
|
2164
2275
|
}), e.upperCanvasEl.style.pointerEvents = "", e.lowerCanvasEl.style.pointerEvents = "", this.overlayMask.visible = !1, e.requestRenderAll(), e.fire("editor:enabled"), s.resumeHistory();
|
|
2165
2276
|
}
|
|
2166
2277
|
}
|
|
2167
|
-
class
|
|
2278
|
+
class R {
|
|
2168
2279
|
constructor({ editor: e }) {
|
|
2169
2280
|
this.editor = e, this.backgroundObject = null;
|
|
2170
2281
|
}
|
|
@@ -2181,26 +2292,26 @@ class x {
|
|
|
2181
2292
|
}) {
|
|
2182
2293
|
var a;
|
|
2183
2294
|
try {
|
|
2184
|
-
const { historyManager:
|
|
2185
|
-
if (
|
|
2186
|
-
if (
|
|
2187
|
-
|
|
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();
|
|
2188
2299
|
return;
|
|
2189
2300
|
}
|
|
2190
|
-
|
|
2301
|
+
o.set({
|
|
2191
2302
|
fill: e,
|
|
2192
2303
|
backgroundId: `background-${A()}`
|
|
2193
2304
|
}), this.editor.canvas.requestRenderAll();
|
|
2194
2305
|
} else
|
|
2195
2306
|
this._removeCurrentBackground(), this._createColorBackground(e);
|
|
2196
|
-
(a = this.backgroundObject) == null || a.set({ customData: t }), this.editor.canvas.fire("editor:background:changed", { type: "color", color: e }),
|
|
2197
|
-
} 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) {
|
|
2198
2309
|
this.editor.errorManager.emitError({
|
|
2199
2310
|
code: "BACKGROUND_CREATION_FAILED",
|
|
2200
2311
|
origin: "BackgroundManager",
|
|
2201
2312
|
method: "setColorBackground",
|
|
2202
2313
|
message: "Не удалось установить цветовой фон",
|
|
2203
|
-
data: { error:
|
|
2314
|
+
data: { error: n }
|
|
2204
2315
|
});
|
|
2205
2316
|
}
|
|
2206
2317
|
}
|
|
@@ -2217,14 +2328,14 @@ class x {
|
|
|
2217
2328
|
}) {
|
|
2218
2329
|
var a;
|
|
2219
2330
|
try {
|
|
2220
|
-
const { historyManager:
|
|
2221
|
-
if (
|
|
2222
|
-
const i =
|
|
2223
|
-
if (
|
|
2224
|
-
|
|
2331
|
+
const { historyManager: n } = this.editor, { backgroundObject: o } = this;
|
|
2332
|
+
if (n.suspendHistory(), o && o.backgroundType === "gradient") {
|
|
2333
|
+
const i = R._createFabricGradient(e);
|
|
2334
|
+
if (R._isGradientEqual(o.fill, i)) {
|
|
2335
|
+
n.resumeHistory();
|
|
2225
2336
|
return;
|
|
2226
2337
|
}
|
|
2227
|
-
|
|
2338
|
+
o.set({
|
|
2228
2339
|
fill: i,
|
|
2229
2340
|
backgroundId: `background-${A()}`
|
|
2230
2341
|
}), this.editor.canvas.requestRenderAll();
|
|
@@ -2233,14 +2344,14 @@ class x {
|
|
|
2233
2344
|
(a = this.backgroundObject) == null || a.set({ customData: t }), this.editor.canvas.fire("editor:background:changed", {
|
|
2234
2345
|
type: "gradient",
|
|
2235
2346
|
gradientParams: e
|
|
2236
|
-
}),
|
|
2237
|
-
} catch (
|
|
2347
|
+
}), n.resumeHistory(), s || n.saveState();
|
|
2348
|
+
} catch (n) {
|
|
2238
2349
|
this.editor.errorManager.emitError({
|
|
2239
2350
|
code: "BACKGROUND_CREATION_FAILED",
|
|
2240
2351
|
origin: "BackgroundManager",
|
|
2241
2352
|
method: "setGradientBackground",
|
|
2242
2353
|
message: "Не удалось установить градиентный фон",
|
|
2243
|
-
data: { error:
|
|
2354
|
+
data: { error: n }
|
|
2244
2355
|
});
|
|
2245
2356
|
}
|
|
2246
2357
|
}
|
|
@@ -2253,8 +2364,8 @@ class x {
|
|
|
2253
2364
|
startColor: t,
|
|
2254
2365
|
endColor: s,
|
|
2255
2366
|
startPosition: a,
|
|
2256
|
-
endPosition:
|
|
2257
|
-
customData:
|
|
2367
|
+
endPosition: n,
|
|
2368
|
+
customData: o = {},
|
|
2258
2369
|
withoutSave: i = !1
|
|
2259
2370
|
}) {
|
|
2260
2371
|
this.setGradientBackground({
|
|
@@ -2264,9 +2375,9 @@ class x {
|
|
|
2264
2375
|
startColor: t,
|
|
2265
2376
|
endColor: s,
|
|
2266
2377
|
startPosition: a,
|
|
2267
|
-
endPosition:
|
|
2378
|
+
endPosition: n
|
|
2268
2379
|
},
|
|
2269
|
-
customData:
|
|
2380
|
+
customData: o,
|
|
2270
2381
|
withoutSave: i
|
|
2271
2382
|
});
|
|
2272
2383
|
}
|
|
@@ -2279,8 +2390,8 @@ class x {
|
|
|
2279
2390
|
centerY: t,
|
|
2280
2391
|
radius: s,
|
|
2281
2392
|
startColor: a,
|
|
2282
|
-
endColor:
|
|
2283
|
-
startPosition:
|
|
2393
|
+
endColor: n,
|
|
2394
|
+
startPosition: o,
|
|
2284
2395
|
endPosition: i,
|
|
2285
2396
|
customData: r = {},
|
|
2286
2397
|
withoutSave: d = !1
|
|
@@ -2292,8 +2403,8 @@ class x {
|
|
|
2292
2403
|
centerY: t,
|
|
2293
2404
|
radius: s,
|
|
2294
2405
|
startColor: a,
|
|
2295
|
-
endColor:
|
|
2296
|
-
startPosition:
|
|
2406
|
+
endColor: n,
|
|
2407
|
+
startPosition: o,
|
|
2297
2408
|
endPosition: i
|
|
2298
2409
|
},
|
|
2299
2410
|
customData: r,
|
|
@@ -2307,25 +2418,25 @@ class x {
|
|
|
2307
2418
|
* @param options.withoutSave - Если true, не сохранять состояние в историю
|
|
2308
2419
|
*/
|
|
2309
2420
|
setImageBackground(a) {
|
|
2310
|
-
return
|
|
2421
|
+
return j(this, arguments, function* ({
|
|
2311
2422
|
imageSource: e,
|
|
2312
2423
|
customData: t = {},
|
|
2313
2424
|
withoutSave: s = !1
|
|
2314
2425
|
}) {
|
|
2315
2426
|
try {
|
|
2316
|
-
const { historyManager:
|
|
2317
|
-
|
|
2427
|
+
const { historyManager: n } = this.editor;
|
|
2428
|
+
n.suspendHistory(), yield this._createImageBackground(e, t), this.editor.canvas.fire("editor:background:changed", {
|
|
2318
2429
|
type: "image",
|
|
2319
2430
|
imageSource: e,
|
|
2320
2431
|
backgroundObject: this.backgroundObject
|
|
2321
|
-
}),
|
|
2322
|
-
} catch (
|
|
2432
|
+
}), n.resumeHistory(), s || n.saveState();
|
|
2433
|
+
} catch (n) {
|
|
2323
2434
|
this.editor.errorManager.emitError({
|
|
2324
2435
|
code: "BACKGROUND_CREATION_FAILED",
|
|
2325
2436
|
origin: "BackgroundManager",
|
|
2326
2437
|
method: "setImageBackground",
|
|
2327
2438
|
message: "Не удалось установить изображение в качестве фона",
|
|
2328
|
-
data: { error:
|
|
2439
|
+
data: { error: n }
|
|
2329
2440
|
});
|
|
2330
2441
|
}
|
|
2331
2442
|
});
|
|
@@ -2357,8 +2468,8 @@ class x {
|
|
|
2357
2468
|
const { canvas: e, montageArea: t, historyManager: s } = this.editor;
|
|
2358
2469
|
if (!t || !this.backgroundObject) return;
|
|
2359
2470
|
s.suspendHistory(), this.editor.transformManager.fitObject({ object: this.backgroundObject, withoutSave: !0, type: "cover" });
|
|
2360
|
-
const a = e.getObjects(),
|
|
2361
|
-
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();
|
|
2362
2473
|
}
|
|
2363
2474
|
/**
|
|
2364
2475
|
* Создает цветовой фон.
|
|
@@ -2392,7 +2503,7 @@ class x {
|
|
|
2392
2503
|
backgroundType: "gradient",
|
|
2393
2504
|
backgroundId: `background-${A()}`
|
|
2394
2505
|
}, { withoutSelection: !0 }), this.refresh();
|
|
2395
|
-
const t =
|
|
2506
|
+
const t = R._createFabricGradient(e);
|
|
2396
2507
|
this.backgroundObject.set("fill", t), this.editor.canvas.requestRenderAll();
|
|
2397
2508
|
}
|
|
2398
2509
|
/**
|
|
@@ -2400,7 +2511,7 @@ class x {
|
|
|
2400
2511
|
* @param source - источник изображения (URL или File)
|
|
2401
2512
|
*/
|
|
2402
2513
|
_createImageBackground(e, t) {
|
|
2403
|
-
return
|
|
2514
|
+
return j(this, null, function* () {
|
|
2404
2515
|
var a;
|
|
2405
2516
|
const { image: s } = (a = yield this.editor.imageManager.importImage({
|
|
2406
2517
|
source: e,
|
|
@@ -2438,25 +2549,25 @@ class x {
|
|
|
2438
2549
|
startColor: t,
|
|
2439
2550
|
endColor: s,
|
|
2440
2551
|
startPosition: a = 0,
|
|
2441
|
-
endPosition:
|
|
2442
|
-
} = e,
|
|
2552
|
+
endPosition: n = 100
|
|
2553
|
+
} = e, o = [
|
|
2443
2554
|
{ offset: a / 100, color: t },
|
|
2444
|
-
{ offset:
|
|
2555
|
+
{ offset: n / 100, color: s }
|
|
2445
2556
|
];
|
|
2446
2557
|
if (e.type === "linear") {
|
|
2447
|
-
const
|
|
2448
|
-
return new
|
|
2558
|
+
const l = e.angle * Math.PI / 180, u = R._angleToCoords(l);
|
|
2559
|
+
return new je({
|
|
2449
2560
|
type: "linear",
|
|
2450
2561
|
gradientUnits: "percentage",
|
|
2451
|
-
coords:
|
|
2452
|
-
colorStops:
|
|
2562
|
+
coords: u,
|
|
2563
|
+
colorStops: o
|
|
2453
2564
|
});
|
|
2454
2565
|
}
|
|
2455
2566
|
const {
|
|
2456
2567
|
centerX: i = 50,
|
|
2457
2568
|
centerY: r = 50,
|
|
2458
2569
|
radius: d = 50
|
|
2459
|
-
} = e,
|
|
2570
|
+
} = e, h = {
|
|
2460
2571
|
x1: i / 100,
|
|
2461
2572
|
y1: r / 100,
|
|
2462
2573
|
x2: i / 100,
|
|
@@ -2464,11 +2575,11 @@ class x {
|
|
|
2464
2575
|
r1: 0,
|
|
2465
2576
|
r2: d / 100
|
|
2466
2577
|
};
|
|
2467
|
-
return new
|
|
2578
|
+
return new je({
|
|
2468
2579
|
type: "radial",
|
|
2469
2580
|
gradientUnits: "percentage",
|
|
2470
|
-
coords:
|
|
2471
|
-
colorStops:
|
|
2581
|
+
coords: h,
|
|
2582
|
+
colorStops: o
|
|
2472
2583
|
});
|
|
2473
2584
|
}
|
|
2474
2585
|
/**
|
|
@@ -2493,9 +2604,9 @@ class x {
|
|
|
2493
2604
|
static _isGradientEqual(e, t) {
|
|
2494
2605
|
if (!e || !t || e.type !== t.type) return !1;
|
|
2495
2606
|
const s = e.colorStops || [], a = t.colorStops || [];
|
|
2496
|
-
return s.length !== a.length || !s.every((
|
|
2607
|
+
return s.length !== a.length || !s.every((o, i) => {
|
|
2497
2608
|
const r = a[i];
|
|
2498
|
-
return
|
|
2609
|
+
return o.color === r.color && Math.abs(o.offset - r.offset) < 1e-4;
|
|
2499
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;
|
|
2500
2611
|
}
|
|
2501
2612
|
}
|
|
@@ -2513,11 +2624,11 @@ class K {
|
|
|
2513
2624
|
bringToFront(e, { withoutSave: t } = {}) {
|
|
2514
2625
|
const { canvas: s, historyManager: a } = this.editor;
|
|
2515
2626
|
a.suspendHistory();
|
|
2516
|
-
const
|
|
2517
|
-
|
|
2518
|
-
s.bringObjectToFront(
|
|
2519
|
-
}) : s.bringObjectToFront(
|
|
2520
|
-
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,
|
|
2521
2632
|
withoutSave: t
|
|
2522
2633
|
}));
|
|
2523
2634
|
}
|
|
@@ -2531,9 +2642,9 @@ class K {
|
|
|
2531
2642
|
bringForward(e, { withoutSave: t } = {}) {
|
|
2532
2643
|
const { canvas: s, historyManager: a } = this.editor;
|
|
2533
2644
|
a.suspendHistory();
|
|
2534
|
-
const
|
|
2535
|
-
|
|
2536
|
-
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,
|
|
2537
2648
|
withoutSave: t
|
|
2538
2649
|
}));
|
|
2539
2650
|
}
|
|
@@ -2548,20 +2659,20 @@ class K {
|
|
|
2548
2659
|
const {
|
|
2549
2660
|
canvas: s,
|
|
2550
2661
|
montageArea: a,
|
|
2551
|
-
historyManager:
|
|
2552
|
-
interactionBlocker: { overlayMask:
|
|
2662
|
+
historyManager: n,
|
|
2663
|
+
interactionBlocker: { overlayMask: o },
|
|
2553
2664
|
backgroundManager: { backgroundObject: i }
|
|
2554
2665
|
} = this.editor;
|
|
2555
|
-
|
|
2666
|
+
n.suspendHistory();
|
|
2556
2667
|
const r = e || s.getActiveObject();
|
|
2557
2668
|
if (r) {
|
|
2558
2669
|
if (r instanceof v) {
|
|
2559
2670
|
const d = r.getObjects();
|
|
2560
|
-
for (let
|
|
2561
|
-
s.sendObjectToBack(d[
|
|
2671
|
+
for (let h = d.length - 1; h >= 0; h -= 1)
|
|
2672
|
+
s.sendObjectToBack(d[h]);
|
|
2562
2673
|
} else
|
|
2563
2674
|
s.sendObjectToBack(r);
|
|
2564
|
-
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", {
|
|
2565
2676
|
object: r,
|
|
2566
2677
|
withoutSave: t
|
|
2567
2678
|
});
|
|
@@ -2577,13 +2688,13 @@ class K {
|
|
|
2577
2688
|
const {
|
|
2578
2689
|
canvas: s,
|
|
2579
2690
|
montageArea: a,
|
|
2580
|
-
historyManager:
|
|
2581
|
-
interactionBlocker: { overlayMask:
|
|
2691
|
+
historyManager: n,
|
|
2692
|
+
interactionBlocker: { overlayMask: o },
|
|
2582
2693
|
backgroundManager: { backgroundObject: i }
|
|
2583
2694
|
} = this.editor;
|
|
2584
|
-
|
|
2695
|
+
n.suspendHistory();
|
|
2585
2696
|
const r = e || s.getActiveObject();
|
|
2586
|
-
r && (r instanceof v ? K._moveSelectionBackwards(s, r) : s.sendObjectBackwards(r), i && s.sendObjectToBack(i), s.sendObjectToBack(a),
|
|
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", {
|
|
2587
2698
|
object: r,
|
|
2588
2699
|
withoutSave: t
|
|
2589
2700
|
}));
|
|
@@ -2627,7 +2738,7 @@ class K {
|
|
|
2627
2738
|
});
|
|
2628
2739
|
}
|
|
2629
2740
|
}
|
|
2630
|
-
class
|
|
2741
|
+
class pt {
|
|
2631
2742
|
/**
|
|
2632
2743
|
* Менеджер фигур для редактора.
|
|
2633
2744
|
* @param options - Опции и настройки менеджера фигур.
|
|
@@ -2651,15 +2762,15 @@ class ut {
|
|
|
2651
2762
|
* @param flags.withoutSelection - Не выделять объект
|
|
2652
2763
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2653
2764
|
*/
|
|
2654
|
-
addRectangle(
|
|
2655
|
-
var
|
|
2765
|
+
addRectangle(h = {}, { withoutSelection: r, withoutAdding: d } = {}) {
|
|
2766
|
+
var l = h, {
|
|
2656
2767
|
id: e = `rect-${A()}`,
|
|
2657
2768
|
left: t,
|
|
2658
2769
|
top: s,
|
|
2659
2770
|
width: a = 100,
|
|
2660
|
-
height:
|
|
2661
|
-
fill:
|
|
2662
|
-
} =
|
|
2771
|
+
height: n = 100,
|
|
2772
|
+
fill: o = "blue"
|
|
2773
|
+
} = l, i = V(l, [
|
|
2663
2774
|
"id",
|
|
2664
2775
|
"left",
|
|
2665
2776
|
"top",
|
|
@@ -2667,15 +2778,15 @@ class ut {
|
|
|
2667
2778
|
"height",
|
|
2668
2779
|
"fill"
|
|
2669
2780
|
]);
|
|
2670
|
-
const { canvas:
|
|
2781
|
+
const { canvas: u } = this.editor, g = new _e(I({
|
|
2671
2782
|
id: e,
|
|
2672
2783
|
left: t,
|
|
2673
2784
|
top: s,
|
|
2674
2785
|
width: a,
|
|
2675
|
-
height:
|
|
2676
|
-
fill:
|
|
2786
|
+
height: n,
|
|
2787
|
+
fill: o
|
|
2677
2788
|
}, i));
|
|
2678
|
-
return !t && !s &&
|
|
2789
|
+
return !t && !s && u.centerObject(g), d || (u.add(g), r || u.setActiveObject(g), u.renderAll()), g;
|
|
2679
2790
|
}
|
|
2680
2791
|
/**
|
|
2681
2792
|
* Добавление круга
|
|
@@ -2694,27 +2805,27 @@ class ut {
|
|
|
2694
2805
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2695
2806
|
*/
|
|
2696
2807
|
addCircle(d = {}, { withoutSelection: i, withoutAdding: r } = {}) {
|
|
2697
|
-
var
|
|
2808
|
+
var h = d, {
|
|
2698
2809
|
id: e = `circle-${A()}`,
|
|
2699
2810
|
left: t,
|
|
2700
2811
|
top: s,
|
|
2701
2812
|
radius: a = 50,
|
|
2702
|
-
fill:
|
|
2703
|
-
} =
|
|
2813
|
+
fill: n = "green"
|
|
2814
|
+
} = h, o = V(h, [
|
|
2704
2815
|
"id",
|
|
2705
2816
|
"left",
|
|
2706
2817
|
"top",
|
|
2707
2818
|
"radius",
|
|
2708
2819
|
"fill"
|
|
2709
2820
|
]);
|
|
2710
|
-
const { canvas:
|
|
2821
|
+
const { canvas: l } = this.editor, u = new Be(I({
|
|
2711
2822
|
id: e,
|
|
2712
2823
|
left: t,
|
|
2713
2824
|
top: s,
|
|
2714
|
-
fill:
|
|
2825
|
+
fill: n,
|
|
2715
2826
|
radius: a
|
|
2716
|
-
},
|
|
2717
|
-
return !t && !s &&
|
|
2827
|
+
}, o));
|
|
2828
|
+
return !t && !s && l.centerObject(u), r || (l.add(u), i || l.setActiveObject(u), l.renderAll()), u;
|
|
2718
2829
|
}
|
|
2719
2830
|
/**
|
|
2720
2831
|
* Добавление треугольника
|
|
@@ -2733,15 +2844,15 @@ class ut {
|
|
|
2733
2844
|
* @param flags.withoutSelection - Не выделять объект
|
|
2734
2845
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2735
2846
|
*/
|
|
2736
|
-
addTriangle(
|
|
2737
|
-
var
|
|
2847
|
+
addTriangle(h = {}, { withoutSelection: r, withoutAdding: d } = {}) {
|
|
2848
|
+
var l = h, {
|
|
2738
2849
|
id: e = `triangle-${A()}`,
|
|
2739
2850
|
left: t,
|
|
2740
2851
|
top: s,
|
|
2741
2852
|
width: a = 100,
|
|
2742
|
-
height:
|
|
2743
|
-
fill:
|
|
2744
|
-
} =
|
|
2853
|
+
height: n = 100,
|
|
2854
|
+
fill: o = "yellow"
|
|
2855
|
+
} = l, i = V(l, [
|
|
2745
2856
|
"id",
|
|
2746
2857
|
"left",
|
|
2747
2858
|
"top",
|
|
@@ -2749,18 +2860,18 @@ class ut {
|
|
|
2749
2860
|
"height",
|
|
2750
2861
|
"fill"
|
|
2751
2862
|
]);
|
|
2752
|
-
const { canvas:
|
|
2863
|
+
const { canvas: u } = this.editor, g = new xe(I({
|
|
2753
2864
|
id: e,
|
|
2754
2865
|
left: t,
|
|
2755
2866
|
top: s,
|
|
2756
|
-
fill:
|
|
2867
|
+
fill: o,
|
|
2757
2868
|
width: a,
|
|
2758
|
-
height:
|
|
2869
|
+
height: n
|
|
2759
2870
|
}, i));
|
|
2760
|
-
return !t && !s &&
|
|
2871
|
+
return !t && !s && u.centerObject(g), d || (u.add(g), r || u.setActiveObject(g), u.renderAll()), g;
|
|
2761
2872
|
}
|
|
2762
2873
|
}
|
|
2763
|
-
class
|
|
2874
|
+
class yt {
|
|
2764
2875
|
/**
|
|
2765
2876
|
* @param options
|
|
2766
2877
|
* @param options.editor - экземпляр редактора с доступом к canvas
|
|
@@ -2788,7 +2899,7 @@ class ft {
|
|
|
2788
2899
|
* Асинхронное клонирование для внутреннего буфера
|
|
2789
2900
|
*/
|
|
2790
2901
|
_cloneToInternalClipboard(e) {
|
|
2791
|
-
return
|
|
2902
|
+
return j(this, null, function* () {
|
|
2792
2903
|
const { canvas: t, errorManager: s } = this.editor;
|
|
2793
2904
|
try {
|
|
2794
2905
|
const a = yield e.clone(["format"]);
|
|
@@ -2808,7 +2919,7 @@ class ft {
|
|
|
2808
2919
|
* Копирование в системный буфер обмена
|
|
2809
2920
|
*/
|
|
2810
2921
|
_copyToSystemClipboard(e) {
|
|
2811
|
-
return
|
|
2922
|
+
return j(this, null, function* () {
|
|
2812
2923
|
const { errorManager: t } = this.editor;
|
|
2813
2924
|
if (typeof ClipboardItem == "undefined" || !navigator.clipboard)
|
|
2814
2925
|
return t.emitWarning({
|
|
@@ -2835,13 +2946,13 @@ class ft {
|
|
|
2835
2946
|
* Копирование изображения в буфер обмена
|
|
2836
2947
|
*/
|
|
2837
2948
|
_copyImageToClipboard(e, t) {
|
|
2838
|
-
return
|
|
2949
|
+
return j(this, null, function* () {
|
|
2839
2950
|
try {
|
|
2840
|
-
const a = e.toCanvasElement({ enableRetinaScaling: !1 }).toDataURL(),
|
|
2841
|
-
for (let
|
|
2842
|
-
r[
|
|
2843
|
-
const d = new Blob([r.buffer], { type:
|
|
2844
|
-
return yield navigator.clipboard.write([
|
|
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);
|
|
2952
|
+
for (let l = 0; l < i.length; l += 1)
|
|
2953
|
+
r[l] = i.charCodeAt(l);
|
|
2954
|
+
const d = new Blob([r.buffer], { type: n }), h = new ClipboardItem({ [n]: d });
|
|
2955
|
+
return yield navigator.clipboard.write([h]), console.info("Image copied to clipboard successfully"), !0;
|
|
2845
2956
|
} catch (s) {
|
|
2846
2957
|
return this.editor.errorManager.emitWarning({
|
|
2847
2958
|
origin: "ClipboardManager",
|
|
@@ -2857,9 +2968,9 @@ class ft {
|
|
|
2857
2968
|
* Копирование текста в буфер обмена
|
|
2858
2969
|
*/
|
|
2859
2970
|
_copyTextToClipboard(e) {
|
|
2860
|
-
return
|
|
2971
|
+
return j(this, null, function* () {
|
|
2861
2972
|
try {
|
|
2862
|
-
const t = `${
|
|
2973
|
+
const t = `${Ae}${e}`;
|
|
2863
2974
|
return yield navigator.clipboard.writeText(t), console.info("Text copied to clipboard successfully"), !0;
|
|
2864
2975
|
} catch (t) {
|
|
2865
2976
|
const { errorManager: s } = this.editor;
|
|
@@ -2892,7 +3003,7 @@ class ft {
|
|
|
2892
3003
|
* @param source - источник изображения (data URL или URL)
|
|
2893
3004
|
*/
|
|
2894
3005
|
_handleImageImport(e) {
|
|
2895
|
-
return
|
|
3006
|
+
return j(this, null, function* () {
|
|
2896
3007
|
var s;
|
|
2897
3008
|
const { image: t } = (s = yield this.editor.imageManager.importImage({
|
|
2898
3009
|
source: e,
|
|
@@ -2908,7 +3019,7 @@ class ft {
|
|
|
2908
3019
|
* @fires editor:object-pasted
|
|
2909
3020
|
*/
|
|
2910
3021
|
copyPaste(e) {
|
|
2911
|
-
return
|
|
3022
|
+
return j(this, null, function* () {
|
|
2912
3023
|
const { canvas: t } = this.editor, s = e || t.getActiveObject();
|
|
2913
3024
|
if (!s || s.locked) return !1;
|
|
2914
3025
|
try {
|
|
@@ -2920,8 +3031,8 @@ class ft {
|
|
|
2920
3031
|
evented: !0
|
|
2921
3032
|
}), this._addClonedObjectToCanvas(a), t.fire("editor:object-duplicated", { object: a }), !0;
|
|
2922
3033
|
} catch (a) {
|
|
2923
|
-
const { errorManager:
|
|
2924
|
-
return
|
|
3034
|
+
const { errorManager: n } = this.editor;
|
|
3035
|
+
return n.emitError({
|
|
2925
3036
|
origin: "ClipboardManager",
|
|
2926
3037
|
method: "copyPaste",
|
|
2927
3038
|
code: "COPY_PASTE_FAILED",
|
|
@@ -2938,44 +3049,44 @@ class ft {
|
|
|
2938
3049
|
* @param event.clipboardData.items — элементы буфера обмена
|
|
2939
3050
|
*/
|
|
2940
3051
|
handlePasteEvent(t) {
|
|
2941
|
-
return
|
|
3052
|
+
return j(this, arguments, function* ({ clipboardData: e }) {
|
|
2942
3053
|
var r;
|
|
2943
3054
|
if (!((r = e == null ? void 0 : e.items) != null && r.length)) {
|
|
2944
3055
|
this.paste();
|
|
2945
3056
|
return;
|
|
2946
3057
|
}
|
|
2947
3058
|
const s = e.getData("text/plain");
|
|
2948
|
-
if (s && s.startsWith(
|
|
3059
|
+
if (s && s.startsWith(Ae)) {
|
|
2949
3060
|
this.paste();
|
|
2950
3061
|
return;
|
|
2951
3062
|
}
|
|
2952
|
-
const { items: a } = e,
|
|
2953
|
-
if (
|
|
3063
|
+
const { items: a } = e, n = a[a.length - 1], o = n.getAsFile();
|
|
3064
|
+
if (n.type !== "text/html" && o) {
|
|
2954
3065
|
const d = new FileReader();
|
|
2955
|
-
d.onload = (
|
|
2956
|
-
|
|
3066
|
+
d.onload = (h) => {
|
|
3067
|
+
h.target && this._handleImageImport(h.target.result).catch((l) => {
|
|
2957
3068
|
this.editor.errorManager.emitError({
|
|
2958
3069
|
origin: "ClipboardManager",
|
|
2959
3070
|
method: "handlePasteEvent",
|
|
2960
3071
|
code: "PASTE_IMAGE_FAILED",
|
|
2961
3072
|
message: "Ошибка вставки изображения из буфера обмена",
|
|
2962
|
-
data:
|
|
3073
|
+
data: l
|
|
2963
3074
|
});
|
|
2964
3075
|
});
|
|
2965
|
-
}, d.readAsDataURL(
|
|
3076
|
+
}, d.readAsDataURL(o);
|
|
2966
3077
|
return;
|
|
2967
3078
|
}
|
|
2968
3079
|
const i = e.getData("text/html");
|
|
2969
3080
|
if (i) {
|
|
2970
|
-
const
|
|
2971
|
-
if (
|
|
2972
|
-
this._handleImageImport(
|
|
3081
|
+
const l = new DOMParser().parseFromString(i, "text/html").querySelector("img");
|
|
3082
|
+
if (l != null && l.src) {
|
|
3083
|
+
this._handleImageImport(l.src).catch((u) => {
|
|
2973
3084
|
this.editor.errorManager.emitError({
|
|
2974
3085
|
origin: "ClipboardManager",
|
|
2975
3086
|
method: "handlePasteEvent",
|
|
2976
3087
|
code: "PASTE_HTML_IMAGE_FAILED",
|
|
2977
3088
|
message: "Ошибка вставки изображения из HTML",
|
|
2978
|
-
data:
|
|
3089
|
+
data: u
|
|
2979
3090
|
});
|
|
2980
3091
|
});
|
|
2981
3092
|
return;
|
|
@@ -2989,7 +3100,7 @@ class ft {
|
|
|
2989
3100
|
* @fires editor:object-pasted
|
|
2990
3101
|
*/
|
|
2991
3102
|
paste() {
|
|
2992
|
-
return
|
|
3103
|
+
return j(this, null, function* () {
|
|
2993
3104
|
const { canvas: e } = this.editor;
|
|
2994
3105
|
if (!this.clipboard) return !1;
|
|
2995
3106
|
try {
|
|
@@ -3013,7 +3124,7 @@ class ft {
|
|
|
3013
3124
|
});
|
|
3014
3125
|
}
|
|
3015
3126
|
}
|
|
3016
|
-
class
|
|
3127
|
+
class J {
|
|
3017
3128
|
constructor({ editor: e }) {
|
|
3018
3129
|
this.editor = e;
|
|
3019
3130
|
}
|
|
@@ -3026,8 +3137,8 @@ class $ {
|
|
|
3026
3137
|
* @fires editor:object-locked
|
|
3027
3138
|
*/
|
|
3028
3139
|
lockObject({ object: e, skipInnerObjects: t, withoutSave: s } = {}) {
|
|
3029
|
-
const { canvas: a, historyManager:
|
|
3030
|
-
if (!
|
|
3140
|
+
const { canvas: a, historyManager: n } = this.editor, o = e || a.getActiveObject();
|
|
3141
|
+
if (!o || o.locked) return;
|
|
3031
3142
|
const i = {
|
|
3032
3143
|
lockMovementX: !0,
|
|
3033
3144
|
lockMovementY: !0,
|
|
@@ -3038,10 +3149,10 @@ class $ {
|
|
|
3038
3149
|
lockSkewingY: !0,
|
|
3039
3150
|
locked: !0
|
|
3040
3151
|
};
|
|
3041
|
-
|
|
3152
|
+
o.set(i), !t && J._isGroupOrSelection(o) && o.getObjects().forEach((d) => {
|
|
3042
3153
|
d.set(i);
|
|
3043
|
-
}), a.renderAll(), s ||
|
|
3044
|
-
object:
|
|
3154
|
+
}), a.renderAll(), s || n.saveState(), a.fire("editor:object-locked", {
|
|
3155
|
+
object: o,
|
|
3045
3156
|
skipInnerObjects: t,
|
|
3046
3157
|
withoutSave: s
|
|
3047
3158
|
});
|
|
@@ -3054,9 +3165,9 @@ class $ {
|
|
|
3054
3165
|
* @fires editor:object-unlocked
|
|
3055
3166
|
*/
|
|
3056
3167
|
unlockObject({ object: e, withoutSave: t } = {}) {
|
|
3057
|
-
const { canvas: s, historyManager: a } = this.editor,
|
|
3058
|
-
if (!
|
|
3059
|
-
const
|
|
3168
|
+
const { canvas: s, historyManager: a } = this.editor, n = e || s.getActiveObject();
|
|
3169
|
+
if (!n) return;
|
|
3170
|
+
const o = {
|
|
3060
3171
|
lockMovementX: !1,
|
|
3061
3172
|
lockMovementY: !1,
|
|
3062
3173
|
lockRotation: !1,
|
|
@@ -3066,18 +3177,18 @@ class $ {
|
|
|
3066
3177
|
lockSkewingY: !1,
|
|
3067
3178
|
locked: !1
|
|
3068
3179
|
};
|
|
3069
|
-
|
|
3070
|
-
i.set(
|
|
3180
|
+
n.set(o), J._isGroupOrSelection(n) && n.getObjects().forEach((i) => {
|
|
3181
|
+
i.set(o);
|
|
3071
3182
|
}), s.renderAll(), t || a.saveState(), s.fire("editor:object-unlocked", {
|
|
3072
|
-
object:
|
|
3183
|
+
object: n,
|
|
3073
3184
|
withoutSave: t
|
|
3074
3185
|
});
|
|
3075
3186
|
}
|
|
3076
3187
|
static _isGroupOrSelection(e) {
|
|
3077
|
-
return e instanceof v || e instanceof
|
|
3188
|
+
return e instanceof v || e instanceof te;
|
|
3078
3189
|
}
|
|
3079
3190
|
}
|
|
3080
|
-
class
|
|
3191
|
+
class It {
|
|
3081
3192
|
constructor({ editor: e }) {
|
|
3082
3193
|
this.editor = e;
|
|
3083
3194
|
}
|
|
@@ -3094,11 +3205,11 @@ class Mt {
|
|
|
3094
3205
|
} = {}) {
|
|
3095
3206
|
const { canvas: s, historyManager: a } = this.editor;
|
|
3096
3207
|
a.suspendHistory();
|
|
3097
|
-
const
|
|
3098
|
-
if (!
|
|
3099
|
-
const
|
|
3100
|
-
|
|
3101
|
-
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,
|
|
3102
3213
|
group: i,
|
|
3103
3214
|
withoutSave: t
|
|
3104
3215
|
});
|
|
@@ -3115,25 +3226,25 @@ class Mt {
|
|
|
3115
3226
|
object: e,
|
|
3116
3227
|
withoutSave: t
|
|
3117
3228
|
} = {}) {
|
|
3118
|
-
const { canvas: s, historyManager: a } = this.editor,
|
|
3119
|
-
if (!(
|
|
3229
|
+
const { canvas: s, historyManager: a } = this.editor, n = e || s.getActiveObject();
|
|
3230
|
+
if (!(n instanceof te)) return null;
|
|
3120
3231
|
a.suspendHistory();
|
|
3121
|
-
const
|
|
3122
|
-
s.remove(
|
|
3123
|
-
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, {
|
|
3124
3235
|
canvas: s
|
|
3125
3236
|
});
|
|
3126
3237
|
s.setActiveObject(i), s.renderAll(), a.resumeHistory(), t || a.saveState();
|
|
3127
3238
|
const r = {
|
|
3128
|
-
object:
|
|
3239
|
+
object: n,
|
|
3129
3240
|
selection: i,
|
|
3130
|
-
ungroupedObjects:
|
|
3241
|
+
ungroupedObjects: o,
|
|
3131
3242
|
withoutSave: t
|
|
3132
3243
|
};
|
|
3133
3244
|
return s.fire("editor:objects-ungrouped", r), r;
|
|
3134
3245
|
}
|
|
3135
3246
|
}
|
|
3136
|
-
class
|
|
3247
|
+
class vt {
|
|
3137
3248
|
constructor({ editor: e }) {
|
|
3138
3249
|
this.editor = e;
|
|
3139
3250
|
}
|
|
@@ -3144,11 +3255,11 @@ class mt {
|
|
|
3144
3255
|
selectAll() {
|
|
3145
3256
|
const { canvas: e, canvasManager: t, objectLockManager: s } = this.editor;
|
|
3146
3257
|
e.discardActiveObject();
|
|
3147
|
-
const a = t.getObjects(),
|
|
3148
|
-
|
|
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 });
|
|
3149
3260
|
}
|
|
3150
3261
|
}
|
|
3151
|
-
class
|
|
3262
|
+
class le {
|
|
3152
3263
|
constructor({ editor: e }) {
|
|
3153
3264
|
this.editor = e;
|
|
3154
3265
|
}
|
|
@@ -3190,19 +3301,19 @@ class ce {
|
|
|
3190
3301
|
withoutSave: t = !1,
|
|
3191
3302
|
_isRecursiveCall: s = !1
|
|
3192
3303
|
} = {}) {
|
|
3193
|
-
const { canvas: a, historyManager:
|
|
3304
|
+
const { canvas: a, historyManager: n } = this.editor, i = (e || a.getActiveObjects()).filter((h) => !h.locked);
|
|
3194
3305
|
if (!(i != null && i.length)) return null;
|
|
3195
|
-
s ||
|
|
3306
|
+
s || n.suspendHistory();
|
|
3196
3307
|
const r = [];
|
|
3197
|
-
if (i.forEach((
|
|
3198
|
-
if (
|
|
3199
|
-
const
|
|
3200
|
-
r.push(...
|
|
3308
|
+
if (i.forEach((h) => {
|
|
3309
|
+
if (le._isUngroupableGroup(h)) {
|
|
3310
|
+
const l = this._handleGroupDeletion(h);
|
|
3311
|
+
r.push(...l);
|
|
3201
3312
|
return;
|
|
3202
3313
|
}
|
|
3203
|
-
a.remove(
|
|
3314
|
+
a.remove(h), r.push(h);
|
|
3204
3315
|
}), s) return null;
|
|
3205
|
-
a.discardActiveObject(), a.renderAll(),
|
|
3316
|
+
a.discardActiveObject(), a.renderAll(), n.resumeHistory(), t || n.saveState();
|
|
3206
3317
|
const d = {
|
|
3207
3318
|
objects: r,
|
|
3208
3319
|
withoutSave: t
|
|
@@ -3210,7 +3321,7 @@ class ce {
|
|
|
3210
3321
|
return a.fire("editor:objects-deleted", d), d;
|
|
3211
3322
|
}
|
|
3212
3323
|
}
|
|
3213
|
-
const
|
|
3324
|
+
const At = {
|
|
3214
3325
|
IMAGE_MANAGER: {
|
|
3215
3326
|
/**
|
|
3216
3327
|
* Некорректный Content-Type изображения
|
|
@@ -3309,7 +3420,7 @@ const bt = {
|
|
|
3309
3420
|
INVALID_GRADIENT_FORMAT: "INVALID_GRADIENT_FORMAT"
|
|
3310
3421
|
}
|
|
3311
3422
|
};
|
|
3312
|
-
class
|
|
3423
|
+
class q {
|
|
3313
3424
|
constructor({ editor: e }) {
|
|
3314
3425
|
this._buffer = [], this.editor = e;
|
|
3315
3426
|
}
|
|
@@ -3335,19 +3446,19 @@ class J {
|
|
|
3335
3446
|
* @param options.message — текст ошибки (опционально, если не передан, то используется код ошибки)
|
|
3336
3447
|
* @fires editor:error
|
|
3337
3448
|
*/
|
|
3338
|
-
emitError({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, data: a, message:
|
|
3339
|
-
if (!
|
|
3449
|
+
emitError({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, data: a, message: n }) {
|
|
3450
|
+
if (!q.isValidErrorCode(s)) {
|
|
3340
3451
|
console.warn("Неизвестный код ошибки: ", { code: s, origin: e, method: t });
|
|
3341
3452
|
return;
|
|
3342
3453
|
}
|
|
3343
3454
|
if (!s) return;
|
|
3344
|
-
const
|
|
3345
|
-
console.error(`${e}. ${t}. ${s}. ${
|
|
3455
|
+
const o = n || s;
|
|
3456
|
+
console.error(`${e}. ${t}. ${s}. ${o}`, a);
|
|
3346
3457
|
const i = {
|
|
3347
3458
|
code: s,
|
|
3348
3459
|
origin: e,
|
|
3349
3460
|
method: t,
|
|
3350
|
-
message:
|
|
3461
|
+
message: o,
|
|
3351
3462
|
data: a
|
|
3352
3463
|
};
|
|
3353
3464
|
this._buffer.push(I({
|
|
@@ -3364,19 +3475,19 @@ class J {
|
|
|
3364
3475
|
* @param options.message — текст предупреждения (опционально, если не передан, то используется код предупреждения)
|
|
3365
3476
|
* @fires editor:warning
|
|
3366
3477
|
*/
|
|
3367
|
-
emitWarning({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, message: a, data:
|
|
3368
|
-
if (!
|
|
3478
|
+
emitWarning({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, message: a, data: n }) {
|
|
3479
|
+
if (!q.isValidErrorCode(s)) {
|
|
3369
3480
|
console.warn("Неизвестный код предупреждения: ", { code: s, origin: e, method: t });
|
|
3370
3481
|
return;
|
|
3371
3482
|
}
|
|
3372
|
-
const
|
|
3373
|
-
console.warn(`${e}. ${t}. ${s}. ${
|
|
3483
|
+
const o = a || s;
|
|
3484
|
+
console.warn(`${e}. ${t}. ${s}. ${o}`, n);
|
|
3374
3485
|
const i = {
|
|
3375
3486
|
code: s,
|
|
3376
3487
|
origin: e,
|
|
3377
3488
|
method: t,
|
|
3378
|
-
message:
|
|
3379
|
-
data:
|
|
3489
|
+
message: o,
|
|
3490
|
+
data: n
|
|
3380
3491
|
};
|
|
3381
3492
|
this._buffer.push(I({
|
|
3382
3493
|
type: "editor:warning"
|
|
@@ -3388,10 +3499,10 @@ class J {
|
|
|
3388
3499
|
* @returns true, если код допустим, иначе false
|
|
3389
3500
|
*/
|
|
3390
3501
|
static isValidErrorCode(e) {
|
|
3391
|
-
return e ? Object.values(
|
|
3502
|
+
return e ? Object.values(At).some((t) => Object.values(t).includes(e)) : !1;
|
|
3392
3503
|
}
|
|
3393
3504
|
}
|
|
3394
|
-
class
|
|
3505
|
+
class he {
|
|
3395
3506
|
/**
|
|
3396
3507
|
* Конструктор класса ImageEditor.
|
|
3397
3508
|
* @param canvasId - идентификатор канваса, в котором будет создан редактор
|
|
@@ -3406,28 +3517,28 @@ class de {
|
|
|
3406
3517
|
* @fires editor:ready
|
|
3407
3518
|
*/
|
|
3408
3519
|
init() {
|
|
3409
|
-
return
|
|
3520
|
+
return j(this, null, function* () {
|
|
3410
3521
|
const {
|
|
3411
3522
|
editorContainerWidth: e,
|
|
3412
3523
|
editorContainerHeight: t,
|
|
3413
3524
|
canvasWrapperWidth: s,
|
|
3414
3525
|
canvasWrapperHeight: a,
|
|
3415
|
-
canvasCSSWidth:
|
|
3416
|
-
canvasCSSHeight:
|
|
3526
|
+
canvasCSSWidth: n,
|
|
3527
|
+
canvasCSSHeight: o,
|
|
3417
3528
|
initialImage: i,
|
|
3418
3529
|
initialStateJSON: r,
|
|
3419
3530
|
scaleType: d,
|
|
3531
|
+
showRotateAngle: h,
|
|
3420
3532
|
_onReadyCallback: l
|
|
3421
3533
|
} = this.options;
|
|
3422
|
-
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) {
|
|
3423
3535
|
const {
|
|
3424
|
-
source:
|
|
3536
|
+
source: u,
|
|
3425
3537
|
scale: g = `image-${d}`,
|
|
3426
|
-
withoutSave:
|
|
3538
|
+
withoutSave: M = !0
|
|
3427
3539
|
} = i;
|
|
3428
|
-
yield this.imageManager.importImage({ source:
|
|
3429
|
-
}
|
|
3430
|
-
this.canvasManager.setDefaultScale({ withoutSave: !0 });
|
|
3540
|
+
yield this.imageManager.importImage({ source: u, scale: g, withoutSave: M });
|
|
3541
|
+
}
|
|
3431
3542
|
r && this.historyManager.loadStateFromFullState(r), this.historyManager.saveState(), console.log("editor:ready"), this.canvas.fire("editor:ready", this), typeof l == "function" && l(this);
|
|
3432
3543
|
});
|
|
3433
3544
|
}
|
|
@@ -3442,7 +3553,7 @@ class de {
|
|
|
3442
3553
|
this.montageArea = this.shapeManager.addRectangle({
|
|
3443
3554
|
width: e,
|
|
3444
3555
|
height: t,
|
|
3445
|
-
fill:
|
|
3556
|
+
fill: he._createMosaicPattern(),
|
|
3446
3557
|
stroke: null,
|
|
3447
3558
|
strokeWidth: 0,
|
|
3448
3559
|
selectable: !1,
|
|
@@ -3482,7 +3593,8 @@ class de {
|
|
|
3482
3593
|
* Метод для удаления редактора и всех слушателей.
|
|
3483
3594
|
*/
|
|
3484
3595
|
destroy() {
|
|
3485
|
-
|
|
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();
|
|
3486
3598
|
}
|
|
3487
3599
|
/**
|
|
3488
3600
|
* Создает паттерн мозаики.
|
|
@@ -3492,13 +3604,13 @@ class de {
|
|
|
3492
3604
|
const e = document.createElement("canvas");
|
|
3493
3605
|
e.width = 20, e.height = 20;
|
|
3494
3606
|
const t = e.getContext("2d");
|
|
3495
|
-
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({
|
|
3496
3608
|
source: e,
|
|
3497
3609
|
repeat: "repeat"
|
|
3498
3610
|
});
|
|
3499
3611
|
}
|
|
3500
3612
|
}
|
|
3501
|
-
const
|
|
3613
|
+
const Ct = {
|
|
3502
3614
|
/**
|
|
3503
3615
|
* Опции редактора
|
|
3504
3616
|
*/
|
|
@@ -3572,6 +3684,7 @@ const jt = {
|
|
|
3572
3684
|
maxZoom: 2,
|
|
3573
3685
|
zoomRatio: 0.1,
|
|
3574
3686
|
overlayMaskColor: "rgba(136, 136, 136, 0.6)",
|
|
3687
|
+
showRotateAngle: !0,
|
|
3575
3688
|
/*
|
|
3576
3689
|
* Настройки слушателей событий
|
|
3577
3690
|
*/
|
|
@@ -3587,18 +3700,18 @@ const jt = {
|
|
|
3587
3700
|
resetObjectFitByDoubleClick: !0,
|
|
3588
3701
|
keyboardIgnoreSelectors: []
|
|
3589
3702
|
};
|
|
3590
|
-
function
|
|
3591
|
-
const t = I(I({},
|
|
3703
|
+
function wt(c, e = {}) {
|
|
3704
|
+
const t = I(I({}, Ct), e), s = document.getElementById(c);
|
|
3592
3705
|
if (!s)
|
|
3593
3706
|
return Promise.reject(new Error(`Контейнер с ID "${c}" не найден.`));
|
|
3594
3707
|
const a = document.createElement("canvas");
|
|
3595
|
-
return a.id = `${c}-canvas`, s.appendChild(a), t.editorContainer = s, new Promise((
|
|
3596
|
-
t._onReadyCallback =
|
|
3597
|
-
const
|
|
3598
|
-
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;
|
|
3599
3712
|
});
|
|
3600
3713
|
}
|
|
3601
3714
|
export {
|
|
3602
|
-
|
|
3715
|
+
wt as default
|
|
3603
3716
|
};
|
|
3604
3717
|
//# sourceMappingURL=main.js.map
|