@anu3ev/fabric-image-editor 0.1.81 → 0.1.83
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 +579 -524
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
1
|
+
var Ne = Object.defineProperty, Le = Object.defineProperties;
|
|
2
|
+
var we = Object.getOwnPropertyDescriptors;
|
|
3
|
+
var G = Object.getOwnPropertySymbols;
|
|
4
4
|
var Me = Object.prototype.hasOwnProperty, me = Object.prototype.propertyIsEnumerable;
|
|
5
|
-
var fe = (c, e, t) => e in c ?
|
|
5
|
+
var fe = (c, e, t) => e in c ? Ne(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t, v = (c, e) => {
|
|
6
6
|
for (var t in e || (e = {}))
|
|
7
7
|
Me.call(e, t) && fe(c, t, e[t]);
|
|
8
|
-
if (
|
|
9
|
-
for (var t of
|
|
8
|
+
if (G)
|
|
9
|
+
for (var t of G(e))
|
|
10
10
|
me.call(e, t) && fe(c, t, e[t]);
|
|
11
11
|
return c;
|
|
12
|
-
}, be = (c, e) =>
|
|
12
|
+
}, be = (c, e) => Le(c, we(e));
|
|
13
13
|
var V = (c, e) => {
|
|
14
14
|
var t = {};
|
|
15
15
|
for (var s in c)
|
|
16
16
|
Me.call(c, s) && e.indexOf(s) < 0 && (t[s] = c[s]);
|
|
17
|
-
if (c != null &&
|
|
18
|
-
for (var s of
|
|
17
|
+
if (c != null && G)
|
|
18
|
+
for (var s of G(c))
|
|
19
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 p = (c, e, t) => new Promise((s, n) => {
|
|
23
|
+
var a = (r) => {
|
|
24
24
|
try {
|
|
25
25
|
i(t.next(r));
|
|
26
26
|
} catch (d) {
|
|
27
|
-
|
|
27
|
+
n(d);
|
|
28
28
|
}
|
|
29
29
|
}, o = (r) => {
|
|
30
30
|
try {
|
|
31
31
|
i(t.throw(r));
|
|
32
32
|
} catch (d) {
|
|
33
|
-
|
|
33
|
+
n(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(a, o);
|
|
36
36
|
i((t = t.apply(c, e)).next());
|
|
37
37
|
});
|
|
38
|
-
import { ActiveSelection as
|
|
38
|
+
import { ActiveSelection as y, util as F, controlsUtils as Te, InteractiveFabricObject as pe, loadSVGFromURL as ke, FabricImage as Y, Point as $, Gradient as je, Rect as _e, Circle as Be, Triangle as xe, Group as R, Canvas as Re, Pattern as Ue } from "fabric";
|
|
39
39
|
import { create as ze } from "jsondiffpatch";
|
|
40
40
|
import He from "diff-match-patch";
|
|
41
41
|
var Ze = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", A = function() {
|
|
@@ -43,7 +43,7 @@ var Ze = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", A =
|
|
|
43
43
|
t += Ze[s[e] & 63];
|
|
44
44
|
return t;
|
|
45
45
|
};
|
|
46
|
-
class
|
|
46
|
+
class W {
|
|
47
47
|
/**
|
|
48
48
|
* Конструктор принимает редактор и опции.
|
|
49
49
|
* @param params
|
|
@@ -61,7 +61,7 @@ class P {
|
|
|
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 = W.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 = W.debounce(this.handleObjectModifiedHistory.bind(this), 300), this.handleObjectRotatingHistoryBound = W.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
|
* Инициализация всех обработчиков согласно опциям.
|
|
@@ -71,15 +71,15 @@ class P {
|
|
|
71
71
|
adaptCanvasToContainerOnResize: e,
|
|
72
72
|
canvasDragging: t,
|
|
73
73
|
mouseWheelZooming: s,
|
|
74
|
-
bringToFrontOnSelection:
|
|
75
|
-
copyObjectsByHotkey:
|
|
74
|
+
bringToFrontOnSelection: n,
|
|
75
|
+
copyObjectsByHotkey: a,
|
|
76
76
|
pasteImageFromClipboard: o,
|
|
77
77
|
undoRedoByHotKeys: i,
|
|
78
78
|
selectAllByHotkey: r,
|
|
79
79
|
deleteObjectsByHotkey: d,
|
|
80
80
|
resetObjectFitByDoubleClick: h
|
|
81
81
|
} = this.options;
|
|
82
|
-
t && (this.canvas.on("mouse:down", this.handleCanvasDragStartBound), this.canvas.on("mouse:move", this.handleCanvasDraggingBound), this.canvas.on("mouse:up", this.handleCanvasDragEndBound), document.addEventListener("keydown", this.handleSpaceKeyDownBound, { capture: !0 }), document.addEventListener("keyup", this.handleSpaceKeyUpBound, { capture: !0 })), s && this.canvas.on("mouse:wheel", this.handleMouseWheelZoomBound),
|
|
82
|
+
t && (this.canvas.on("mouse:down", this.handleCanvasDragStartBound), this.canvas.on("mouse:move", this.handleCanvasDraggingBound), this.canvas.on("mouse:up", this.handleCanvasDragEndBound), document.addEventListener("keydown", this.handleSpaceKeyDownBound, { capture: !0 }), document.addEventListener("keyup", this.handleSpaceKeyUpBound, { capture: !0 })), s && this.canvas.on("mouse:wheel", this.handleMouseWheelZoomBound), n && (this.canvas.on("selection:created", this.handleBringToFrontBound), this.canvas.on("selection:updated", this.handleBringToFrontBound)), h && this.canvas.on("mouse:dblclick", this.handleResetObjectFitBound), e && window.addEventListener("resize", this.handleContainerResizeBound, { capture: !0 }), a && 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
|
* При массовом выделении объектов удаляем из него залоченные.
|
|
@@ -89,16 +89,16 @@ class P {
|
|
|
89
89
|
*/
|
|
90
90
|
_filterLockedSelection({ selected: e, e: t }) {
|
|
91
91
|
if (!(e != null && e.length) || !(t instanceof MouseEvent) || e.length === 1) return;
|
|
92
|
-
const { lockedObjects: s, unlockedObjects:
|
|
92
|
+
const { lockedObjects: s, unlockedObjects: n } = 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;
|
|
97
|
-
if (
|
|
98
|
-
if (
|
|
99
|
-
this.canvas.setActiveObject(
|
|
97
|
+
if (n.length > 0) {
|
|
98
|
+
if (n.length === 1)
|
|
99
|
+
this.canvas.setActiveObject(n[0]);
|
|
100
100
|
else {
|
|
101
|
-
const o = new
|
|
101
|
+
const o = new y(n, {
|
|
102
102
|
canvas: this.canvas
|
|
103
103
|
});
|
|
104
104
|
this.canvas.setActiveObject(o);
|
|
@@ -106,14 +106,14 @@ class P {
|
|
|
106
106
|
this.canvas.requestRenderAll();
|
|
107
107
|
return;
|
|
108
108
|
}
|
|
109
|
-
const
|
|
109
|
+
const a = new y(e, {
|
|
110
110
|
canvas: this.canvas
|
|
111
111
|
});
|
|
112
112
|
this.editor.objectLockManager.lockObject({
|
|
113
|
-
object:
|
|
113
|
+
object: a,
|
|
114
114
|
skipInnerObjects: !0,
|
|
115
115
|
withoutSave: !0
|
|
116
|
-
}), this.canvas.setActiveObject(
|
|
116
|
+
}), this.canvas.setActiveObject(a), this.canvas.requestRenderAll();
|
|
117
117
|
}
|
|
118
118
|
/**
|
|
119
119
|
* Обработчики для сохранения состояния редактора в истории.
|
|
@@ -157,8 +157,8 @@ class P {
|
|
|
157
157
|
* @param event.code — код клавиши
|
|
158
158
|
*/
|
|
159
159
|
handleCopyEvent(e) {
|
|
160
|
-
const { ctrlKey: t, metaKey: s, code:
|
|
161
|
-
this._shouldIgnoreKeyboardEvent(e) || !t && !s ||
|
|
160
|
+
const { ctrlKey: t, metaKey: s, code: n } = e;
|
|
161
|
+
this._shouldIgnoreKeyboardEvent(e) || !t && !s || n !== "KeyC" || (e.preventDefault(), this.editor.clipboardManager.copy());
|
|
162
162
|
}
|
|
163
163
|
/**
|
|
164
164
|
* Обработчик вставки объекта или изображения из буфера обмена.
|
|
@@ -175,9 +175,9 @@ class P {
|
|
|
175
175
|
* @param event.code — код клавиши
|
|
176
176
|
*/
|
|
177
177
|
handleUndoRedoEvent(e) {
|
|
178
|
-
return
|
|
179
|
-
const { ctrlKey: t, metaKey: s, code:
|
|
180
|
-
this._shouldIgnoreKeyboardEvent(e) || !t && !s ||
|
|
178
|
+
return p(this, null, function* () {
|
|
179
|
+
const { ctrlKey: t, metaKey: s, code: n, repeat: a } = e;
|
|
180
|
+
this._shouldIgnoreKeyboardEvent(e) || !t && !s || a || !/Mac/i.test(navigator.userAgent) && this.isUndoRedoKeyPressed || (n === "KeyZ" ? (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.undo()) : n === "KeyY" && (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.redo()));
|
|
181
181
|
});
|
|
182
182
|
}
|
|
183
183
|
/**
|
|
@@ -197,8 +197,8 @@ class P {
|
|
|
197
197
|
*/
|
|
198
198
|
handleSelectAllEvent(e) {
|
|
199
199
|
if (this._shouldIgnoreKeyboardEvent(e)) return;
|
|
200
|
-
const { ctrlKey: t, metaKey: s, code:
|
|
201
|
-
!t && !s ||
|
|
200
|
+
const { ctrlKey: t, metaKey: s, code: n } = e;
|
|
201
|
+
!t && !s || n !== "KeyA" || (e.preventDefault(), this.editor.selectionManager.selectAll());
|
|
202
202
|
}
|
|
203
203
|
/**
|
|
204
204
|
* Обработчик для удаления объектов (Delete или Backspace).
|
|
@@ -216,11 +216,11 @@ class P {
|
|
|
216
216
|
*/
|
|
217
217
|
handleSpaceKeyDown(e) {
|
|
218
218
|
if (e.code !== "Space" || this._shouldIgnoreKeyboardEvent(e)) return;
|
|
219
|
-
const { canvas: t, editor: s, isSpacePressed:
|
|
220
|
-
if (
|
|
219
|
+
const { canvas: t, editor: s, isSpacePressed: n, isDragging: a } = this;
|
|
220
|
+
if (n || a) return;
|
|
221
221
|
this.isSpacePressed = !0, e.preventDefault();
|
|
222
222
|
const o = t.getActiveObject() || null;
|
|
223
|
-
o instanceof
|
|
223
|
+
o instanceof y ? this.savedSelection = o.getObjects().slice() : o && (this.savedSelection = [o]), t.discardActiveObject(), t.set({
|
|
224
224
|
selection: !1,
|
|
225
225
|
defaultCursor: "grab"
|
|
226
226
|
}), t.setCursor("grab"), s.canvasManager.getObjects().forEach((i) => {
|
|
@@ -259,8 +259,8 @@ class P {
|
|
|
259
259
|
t.setActiveObject(e[0]);
|
|
260
260
|
return;
|
|
261
261
|
}
|
|
262
|
-
const
|
|
263
|
-
t.setActiveObject(
|
|
262
|
+
const n = e.filter((o) => s.canvasManager.getObjects().includes(o)), a = new y(n, { canvas: t });
|
|
263
|
+
t.setActiveObject(a);
|
|
264
264
|
}
|
|
265
265
|
// --- Обработчики для событий canvas (Fabric) ---
|
|
266
266
|
/**
|
|
@@ -325,18 +325,18 @@ class P {
|
|
|
325
325
|
* @returns true если событие должно быть проигнорировано
|
|
326
326
|
*/
|
|
327
327
|
_shouldIgnoreKeyboardEvent(e) {
|
|
328
|
-
const t = document.activeElement, s = e.target,
|
|
328
|
+
const t = document.activeElement, s = e.target, n = ["input", "textarea", "select"];
|
|
329
329
|
if (s) {
|
|
330
330
|
const o = s.tagName.toLowerCase();
|
|
331
|
-
if (
|
|
331
|
+
if (n.includes(o) || s.contentEditable === "true") return !0;
|
|
332
332
|
}
|
|
333
333
|
if (t && t !== s) {
|
|
334
334
|
const o = t.tagName.toLowerCase();
|
|
335
|
-
if (
|
|
335
|
+
if (n.includes(o) || t.contentEditable === "true") return !0;
|
|
336
336
|
}
|
|
337
|
-
const
|
|
338
|
-
if (
|
|
339
|
-
let r =
|
|
337
|
+
const a = window.getSelection();
|
|
338
|
+
if (a && !a.isCollapsed && a.rangeCount > 0) {
|
|
339
|
+
let r = a.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)
|
|
@@ -365,9 +365,9 @@ class P {
|
|
|
365
365
|
*/
|
|
366
366
|
static debounce(e, t) {
|
|
367
367
|
let s = null;
|
|
368
|
-
return function(...
|
|
368
|
+
return function(...n) {
|
|
369
369
|
s !== null && clearTimeout(s), s = setTimeout(() => {
|
|
370
|
-
e.apply(this,
|
|
370
|
+
e.apply(this, n);
|
|
371
371
|
}, t);
|
|
372
372
|
};
|
|
373
373
|
}
|
|
@@ -417,12 +417,12 @@ class We {
|
|
|
417
417
|
* @returns
|
|
418
418
|
*/
|
|
419
419
|
_handleMessage({ data: e }) {
|
|
420
|
-
const { requestId: t, success: s, data:
|
|
420
|
+
const { requestId: t, success: s, data: n, error: a } = e, o = this._callbacks.get(t);
|
|
421
421
|
if (!o) {
|
|
422
422
|
console.warn(`No callback found for requestId: ${t}`);
|
|
423
423
|
return;
|
|
424
424
|
}
|
|
425
|
-
s ? o.resolve(
|
|
425
|
+
s ? o.resolve(n) : o.reject(new Error(a)), this._callbacks.delete(t);
|
|
426
426
|
}
|
|
427
427
|
/**
|
|
428
428
|
* Универсальный метод отправки команды в воркер
|
|
@@ -432,9 +432,9 @@ class We {
|
|
|
432
432
|
* @returns Promise, который будет выполнен, когда воркер вернет ответ
|
|
433
433
|
*/
|
|
434
434
|
post(e, t, s = []) {
|
|
435
|
-
const
|
|
436
|
-
return new Promise((
|
|
437
|
-
this._callbacks.set(
|
|
435
|
+
const n = `${e}:${A(8)}`;
|
|
436
|
+
return new Promise((a, o) => {
|
|
437
|
+
this._callbacks.set(n, { resolve: a, reject: o }), this.worker.postMessage({ action: e, payload: t, requestId: n }, s);
|
|
438
438
|
});
|
|
439
439
|
}
|
|
440
440
|
/**
|
|
@@ -444,88 +444,88 @@ class We {
|
|
|
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 E = 12, Fe = 2, se = 8, ne = 20, Ge = 100, ae = 20, oe = 8, Ve = 100, Q = 32, ie = 1, Xe = "#2B2D33", re = "#3D8BF4", ce = "#FFFFFF";
|
|
448
|
+
function X(c, e, t, s, n) {
|
|
449
|
+
const a = E, o = Fe;
|
|
450
|
+
c.save(), c.translate(e, t), c.rotate(F.degreesToRadians(n.angle)), c.fillStyle = ce, c.strokeStyle = re, c.lineWidth = ie, c.beginPath(), c.roundRect(-a / 2, -a / 2, a, a, o), c.fill(), c.stroke(), c.restore();
|
|
451
451
|
}
|
|
452
|
-
function
|
|
453
|
-
const
|
|
454
|
-
c.save(), c.translate(e, t), c.rotate(
|
|
452
|
+
function ye(c, e, t, s, n) {
|
|
453
|
+
const a = se, o = ne, i = Ge;
|
|
454
|
+
c.save(), c.translate(e, t), c.rotate(F.degreesToRadians(n.angle)), c.fillStyle = ce, c.strokeStyle = re, c.lineWidth = ie, c.beginPath(), c.roundRect(-a / 2, -o / 2, a, 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 Ie(c, e, t, s, n) {
|
|
457
|
+
const a = ae, o = oe, i = Ve;
|
|
458
|
+
c.save(), c.translate(e, t), c.rotate(F.degreesToRadians(n.angle)), c.fillStyle = ce, c.strokeStyle = re, c.lineWidth = ie, c.beginPath(), c.roundRect(-a / 2, -o / 2, a, o, i), c.fill(), c.stroke(), c.restore();
|
|
459
459
|
}
|
|
460
|
-
const
|
|
461
|
-
|
|
462
|
-
function
|
|
460
|
+
const $e = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", De = new Image();
|
|
461
|
+
De.src = $e;
|
|
462
|
+
function Qe(c, e, t, s, n) {
|
|
463
463
|
const o = Q / 2;
|
|
464
|
-
c.save(), c.translate(e, t), c.rotate(
|
|
464
|
+
c.save(), c.translate(e, t), c.rotate(F.degreesToRadians(n.angle)), c.fillStyle = Xe, c.beginPath(), c.arc(0, 0, o, 0, 2 * Math.PI), c.fill(), c.drawImage(De, -o / 2, -o / 2, o, o), c.restore();
|
|
465
465
|
}
|
|
466
466
|
const Ke = {
|
|
467
467
|
// Угловые точки
|
|
468
468
|
tl: {
|
|
469
|
-
render:
|
|
470
|
-
sizeX:
|
|
471
|
-
sizeY:
|
|
469
|
+
render: X,
|
|
470
|
+
sizeX: E,
|
|
471
|
+
sizeY: E,
|
|
472
472
|
offsetX: 0,
|
|
473
473
|
offsetY: 0
|
|
474
474
|
},
|
|
475
475
|
tr: {
|
|
476
|
-
render:
|
|
477
|
-
sizeX:
|
|
478
|
-
sizeY:
|
|
476
|
+
render: X,
|
|
477
|
+
sizeX: E,
|
|
478
|
+
sizeY: E,
|
|
479
479
|
offsetX: 0,
|
|
480
480
|
offsetY: 0
|
|
481
481
|
},
|
|
482
482
|
bl: {
|
|
483
|
-
render:
|
|
484
|
-
sizeX:
|
|
485
|
-
sizeY:
|
|
483
|
+
render: X,
|
|
484
|
+
sizeX: E,
|
|
485
|
+
sizeY: E,
|
|
486
486
|
offsetX: 0,
|
|
487
487
|
offsetY: 0
|
|
488
488
|
},
|
|
489
489
|
br: {
|
|
490
|
-
render:
|
|
491
|
-
sizeX:
|
|
492
|
-
sizeY:
|
|
490
|
+
render: X,
|
|
491
|
+
sizeX: E,
|
|
492
|
+
sizeY: E,
|
|
493
493
|
offsetX: 0,
|
|
494
494
|
offsetY: 0
|
|
495
495
|
},
|
|
496
496
|
// Середина вертикалей
|
|
497
497
|
ml: {
|
|
498
|
-
render:
|
|
498
|
+
render: ye,
|
|
499
499
|
sizeX: se,
|
|
500
|
-
sizeY:
|
|
500
|
+
sizeY: ne,
|
|
501
501
|
offsetX: 0,
|
|
502
502
|
offsetY: 0
|
|
503
503
|
},
|
|
504
504
|
mr: {
|
|
505
|
-
render:
|
|
505
|
+
render: ye,
|
|
506
506
|
sizeX: se,
|
|
507
|
-
sizeY:
|
|
507
|
+
sizeY: ne,
|
|
508
508
|
offsetX: 0,
|
|
509
509
|
offsetY: 0
|
|
510
510
|
},
|
|
511
511
|
// Середина горизонталей
|
|
512
512
|
mt: {
|
|
513
|
-
render:
|
|
514
|
-
sizeX:
|
|
513
|
+
render: Ie,
|
|
514
|
+
sizeX: ae,
|
|
515
515
|
sizeY: oe,
|
|
516
516
|
offsetX: 0,
|
|
517
517
|
offsetY: 0
|
|
518
518
|
},
|
|
519
519
|
mb: {
|
|
520
|
-
render:
|
|
521
|
-
sizeX:
|
|
520
|
+
render: Ie,
|
|
521
|
+
sizeX: ae,
|
|
522
522
|
sizeY: oe,
|
|
523
523
|
offsetX: 0,
|
|
524
524
|
offsetY: 0
|
|
525
525
|
},
|
|
526
526
|
// Специальный «rotate» контрол
|
|
527
527
|
mtr: {
|
|
528
|
-
render:
|
|
528
|
+
render: Qe,
|
|
529
529
|
sizeX: Q,
|
|
530
530
|
sizeY: Q,
|
|
531
531
|
offsetX: 0,
|
|
@@ -534,7 +534,7 @@ const Ke = {
|
|
|
534
534
|
};
|
|
535
535
|
class Je {
|
|
536
536
|
static apply() {
|
|
537
|
-
const e =
|
|
537
|
+
const e = Te.createObjectDefaultControls();
|
|
538
538
|
Object.entries(Ke).forEach(([t, s]) => {
|
|
539
539
|
Object.assign(e[t], {
|
|
540
540
|
render: s.render,
|
|
@@ -542,14 +542,14 @@ class Je {
|
|
|
542
542
|
sizeY: s.sizeY,
|
|
543
543
|
offsetX: s.offsetX,
|
|
544
544
|
offsetY: s.offsetY
|
|
545
|
-
}), t === "mtr" && (e[t].cursorStyle = "grab", e[t].mouseDownHandler = (
|
|
545
|
+
}), t === "mtr" && (e[t].cursorStyle = "grab", e[t].mouseDownHandler = (a, o, i, r) => {
|
|
546
546
|
var h;
|
|
547
547
|
(h = o.target.canvas) == null || h.setCursor("grabbing");
|
|
548
548
|
});
|
|
549
|
-
}),
|
|
549
|
+
}), pe.ownDefaults.controls = e, pe.ownDefaults.snapAngle = 1;
|
|
550
550
|
}
|
|
551
551
|
}
|
|
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==",
|
|
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==", nt = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMy4yMWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDguMTI1IDEwIDExLjc3Nmw2LjI2LTMuNjUxTDEwIDQuNDc0IDMuNzQgOC4xMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjcxNCAxMCAxMCAxMi41bDQuMjg2LTIuNSAzLjIxNCAxLjg3NUwxMCAxNi4yNWwtNy41LTQuMzc1TDUuNzE0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDkuNDZhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgMTEuNzc2bDMuOTctMi4zMTZhLjYyNS42MjUgMCAwIDEgLjYzIDBsMy4yMTUgMS44NzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhMNS40IDkuNDZabS0xLjY2IDIuNDE1TDEwIDE1LjUyNmw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2LTEuOTc1IDEuMTUxWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", at = "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==", P = {
|
|
553
553
|
style: {
|
|
554
554
|
position: "absolute",
|
|
555
555
|
display: "none",
|
|
@@ -620,13 +620,13 @@ const qe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMj
|
|
|
620
620
|
delete: it,
|
|
621
621
|
lock: et,
|
|
622
622
|
unlock: tt,
|
|
623
|
-
bringToFront:
|
|
623
|
+
bringToFront: at,
|
|
624
624
|
sendToBack: ot,
|
|
625
625
|
bringForward: st,
|
|
626
|
-
sendBackwards:
|
|
626
|
+
sendBackwards: nt
|
|
627
627
|
},
|
|
628
628
|
handlers: {
|
|
629
|
-
copyPaste: (c) =>
|
|
629
|
+
copyPaste: (c) => p(null, null, function* () {
|
|
630
630
|
c.clipboardManager.copyPaste();
|
|
631
631
|
}),
|
|
632
632
|
delete: (c) => {
|
|
@@ -659,11 +659,11 @@ class rt {
|
|
|
659
659
|
_initToolbar() {
|
|
660
660
|
if (!this.options.showToolbar) return;
|
|
661
661
|
const e = this.options.toolbar || {};
|
|
662
|
-
this.config = be(
|
|
663
|
-
style:
|
|
664
|
-
btnStyle:
|
|
665
|
-
icons:
|
|
666
|
-
handlers:
|
|
662
|
+
this.config = be(v(v({}, P), e), {
|
|
663
|
+
style: v(v({}, P.style), e.style || {}),
|
|
664
|
+
btnStyle: v(v({}, P.btnStyle), e.btnStyle || {}),
|
|
665
|
+
icons: v(v({}, P.icons), e.icons || {}),
|
|
666
|
+
handlers: v(v({}, P.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();
|
|
@@ -674,11 +674,11 @@ class rt {
|
|
|
674
674
|
_createDOM() {
|
|
675
675
|
const { style: e } = this.config;
|
|
676
676
|
this.el = document.createElement("div"), Object.assign(this.el.style, e), this.canvas.wrapperEl.appendChild(this.el), this._onBtnOver = (t) => {
|
|
677
|
-
const
|
|
678
|
-
|
|
677
|
+
const n = t.target.closest("button");
|
|
678
|
+
n && Object.assign(n.style, this.config.btnHover);
|
|
679
679
|
}, this._onBtnOut = (t) => {
|
|
680
|
-
const
|
|
681
|
-
|
|
680
|
+
const n = t.target.closest("button");
|
|
681
|
+
n && Object.assign(n.style, this.config.btnStyle);
|
|
682
682
|
}, this.el.addEventListener("mouseover", this._onBtnOver), this.el.addEventListener("mouseout", this._onBtnOut);
|
|
683
683
|
}
|
|
684
684
|
/**
|
|
@@ -690,10 +690,10 @@ class rt {
|
|
|
690
690
|
_renderButtons(e) {
|
|
691
691
|
this.el.innerHTML = "";
|
|
692
692
|
for (const t of e) {
|
|
693
|
-
const { name: s, handle:
|
|
694
|
-
r.innerHTML = n
|
|
693
|
+
const { name: s, handle: n } = t, { icons: a = {}, btnStyle: o, handlers: i = {} } = this.config, r = document.createElement("button");
|
|
694
|
+
r.innerHTML = a[n] ? `<img src="${a[n]}" title="${s}" />` : s, Object.assign(r.style, o), r.onclick = () => {
|
|
695
695
|
var d;
|
|
696
|
-
return (d = i[
|
|
696
|
+
return (d = i[n]) == null ? void 0 : d.call(i, this.editor);
|
|
697
697
|
}, r.onmousedown = (d) => {
|
|
698
698
|
d.stopPropagation(), d.preventDefault();
|
|
699
699
|
}, r.ondragstart = (d) => d.preventDefault(), this.el.appendChild(r);
|
|
@@ -752,9 +752,9 @@ class rt {
|
|
|
752
752
|
this.el.style.display = "none";
|
|
753
753
|
return;
|
|
754
754
|
}
|
|
755
|
-
const { el: t, config: s, canvas:
|
|
755
|
+
const { el: t, config: s, canvas: n } = this;
|
|
756
756
|
e.setCoords();
|
|
757
|
-
const
|
|
757
|
+
const a = n.getZoom(), [, , , , o, i] = n.viewportTransform, { x: r } = e.getCenterPoint(), { top: d, height: h } = e.getBoundingRect(), u = r * a + o - t.offsetWidth / 2, g = s.offsetTop || 0, M = (d + h) * a + i + g;
|
|
758
758
|
Object.assign(t.style, {
|
|
759
759
|
left: `${u}px`,
|
|
760
760
|
top: `${M}px`,
|
|
@@ -782,7 +782,7 @@ const ct = {
|
|
|
782
782
|
"pointer-events": "none",
|
|
783
783
|
"white-space": "nowrap",
|
|
784
784
|
"box-shadow": "0 2px 8px rgba(0, 0, 0, 0.2)"
|
|
785
|
-
},
|
|
785
|
+
}, ve = 16, Ae = 16, dt = "fabric-editor-angle-indicator";
|
|
786
786
|
class de {
|
|
787
787
|
constructor({ editor: e }) {
|
|
788
788
|
this.isActive = !1, this.currentAngle = 0, this.editor = e, this.canvas = e.canvas, this.options = e.options, this._createDOM(), this._bindEvents();
|
|
@@ -842,9 +842,9 @@ class de {
|
|
|
842
842
|
*/
|
|
843
843
|
_positionIndicator(e) {
|
|
844
844
|
const t = this.canvas.wrapperEl.getBoundingClientRect();
|
|
845
|
-
let s = e.clientX - t.left +
|
|
846
|
-
const
|
|
847
|
-
s + o > t.width && (s = e.clientX - t.left - o -
|
|
845
|
+
let s = e.clientX - t.left + ve, n = e.clientY - t.top + Ae;
|
|
846
|
+
const a = this.el.getBoundingClientRect(), o = a.width, i = a.height;
|
|
847
|
+
s + o > t.width && (s = e.clientX - t.left - o - ve), n + i > t.height && (n = e.clientY - t.top - i - Ae), this.el.style.left = `${s}px`, this.el.style.top = `${n}px`;
|
|
848
848
|
}
|
|
849
849
|
/**
|
|
850
850
|
* Показать индикатор
|
|
@@ -875,7 +875,7 @@ class de {
|
|
|
875
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
876
|
}
|
|
877
877
|
}
|
|
878
|
-
class
|
|
878
|
+
class K {
|
|
879
879
|
constructor({ editor: e }) {
|
|
880
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();
|
|
881
881
|
}
|
|
@@ -943,10 +943,10 @@ class $ {
|
|
|
943
943
|
*/
|
|
944
944
|
getFullState() {
|
|
945
945
|
const { baseState: e, currentIndex: t, patches: s } = this;
|
|
946
|
-
let
|
|
947
|
-
for (let
|
|
948
|
-
|
|
949
|
-
return console.log("getFullState state",
|
|
946
|
+
let n = JSON.parse(JSON.stringify(e));
|
|
947
|
+
for (let a = 0; a < t; a += 1)
|
|
948
|
+
n = this.diffPatcher.patch(n, s[a].diff);
|
|
949
|
+
return console.log("getFullState state", n), n;
|
|
950
950
|
}
|
|
951
951
|
/**
|
|
952
952
|
* Сохраняем текущее состояние в виде диффа от последнего сохранённого полного состояния.
|
|
@@ -1015,19 +1015,19 @@ class $ {
|
|
|
1015
1015
|
* @fires editor:history-state-loaded
|
|
1016
1016
|
*/
|
|
1017
1017
|
loadStateFromFullState(e) {
|
|
1018
|
-
return
|
|
1018
|
+
return p(this, null, function* () {
|
|
1019
1019
|
if (!e) return;
|
|
1020
1020
|
console.log("loadStateFromFullState fullState", e);
|
|
1021
|
-
const { canvas: t, canvasManager: s, interactionBlocker:
|
|
1022
|
-
|
|
1023
|
-
|
|
1021
|
+
const { canvas: t, canvasManager: s, interactionBlocker: n, backgroundManager: a } = this.editor, { width: o, height: i } = t;
|
|
1022
|
+
n.overlayMask = null, K._serializeCustomData(e), yield t.loadFromJSON(e, (l, u) => {
|
|
1023
|
+
K._deserializeCustomData(l, u);
|
|
1024
1024
|
});
|
|
1025
1025
|
const r = t.getObjects().find((l) => l.id === "montage-area");
|
|
1026
1026
|
r && (this.editor.montageArea = r, (o !== t.getWidth() || i !== t.getHeight()) && s.updateCanvas());
|
|
1027
1027
|
const d = t.getObjects().find((l) => l.id === "overlay-mask");
|
|
1028
|
-
d && (
|
|
1028
|
+
d && (n.overlayMask = d, n.overlayMask.visible = !1);
|
|
1029
1029
|
const h = t.getObjects().find((l) => l.id === "background");
|
|
1030
|
-
h ? (
|
|
1030
|
+
h ? (a.backgroundObject = h, a.refresh()) : a.removeBackground({ withoutSave: !0 }), t.renderAll(), t.fire("editor:history-state-loaded", {
|
|
1031
1031
|
fullState: e,
|
|
1032
1032
|
currentIndex: this.currentIndex,
|
|
1033
1033
|
totalChangesCount: this.totalChangesCount,
|
|
@@ -1042,7 +1042,7 @@ class $ {
|
|
|
1042
1042
|
* @fires editor:undo
|
|
1043
1043
|
*/
|
|
1044
1044
|
undo() {
|
|
1045
|
-
return
|
|
1045
|
+
return p(this, null, function* () {
|
|
1046
1046
|
if (!this.skipHistory) {
|
|
1047
1047
|
if (this.currentIndex <= 0) {
|
|
1048
1048
|
console.log("Нет предыдущих состояний для отмены.");
|
|
@@ -1079,7 +1079,7 @@ class $ {
|
|
|
1079
1079
|
* @fires editor:redo
|
|
1080
1080
|
*/
|
|
1081
1081
|
redo() {
|
|
1082
|
-
return
|
|
1082
|
+
return p(this, null, function* () {
|
|
1083
1083
|
if (!this.skipHistory) {
|
|
1084
1084
|
if (this.currentIndex >= this.patches.length) {
|
|
1085
1085
|
console.log("Нет состояний для повтора.");
|
|
@@ -1112,7 +1112,7 @@ class $ {
|
|
|
1112
1112
|
});
|
|
1113
1113
|
}
|
|
1114
1114
|
}
|
|
1115
|
-
const lt = 0.1, ht = 2, ut = 0.1, gt = 90,
|
|
1115
|
+
const lt = 0.1, ht = 2, ut = 0.1, gt = 90, z = 16, H = 16, k = 4096, _ = 4096, Ce = "application/image-editor:";
|
|
1116
1116
|
class N {
|
|
1117
1117
|
constructor({ editor: e }) {
|
|
1118
1118
|
this.editor = e, this.options = e.options, this._createdBlobUrls = [], this.acceptContentTypes = this.editor.options.acceptContentTypes, this.acceptFormats = this.getAllowedFormatsFromContentTypes();
|
|
@@ -1130,17 +1130,17 @@ class N {
|
|
|
1130
1130
|
* @returns возвращает Promise с объектом изображения или null в случае ошибки
|
|
1131
1131
|
*/
|
|
1132
1132
|
importImage(e) {
|
|
1133
|
-
return
|
|
1133
|
+
return p(this, null, function* () {
|
|
1134
1134
|
const {
|
|
1135
1135
|
source: t,
|
|
1136
1136
|
scale: s = `image-${this.options.scaleType}`,
|
|
1137
|
-
withoutSave:
|
|
1138
|
-
fromClipboard:
|
|
1137
|
+
withoutSave: n = !1,
|
|
1138
|
+
fromClipboard: a = !1,
|
|
1139
1139
|
isBackground: o = !1,
|
|
1140
1140
|
withoutSelection: i = !1
|
|
1141
1141
|
} = e;
|
|
1142
1142
|
if (!t) return null;
|
|
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:
|
|
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: j } = this;
|
|
1144
1144
|
if (!this.isAllowedContentType(g)) {
|
|
1145
1145
|
const f = `Неверный contentType для изображения: ${g}. Ожидается один из: ${this.acceptContentTypes.join(", ")}.`;
|
|
1146
1146
|
return u.emitError({
|
|
@@ -1153,8 +1153,8 @@ class N {
|
|
|
1153
1153
|
format: M,
|
|
1154
1154
|
contentType: g,
|
|
1155
1155
|
acceptContentTypes: m,
|
|
1156
|
-
acceptFormats:
|
|
1157
|
-
fromClipboard:
|
|
1156
|
+
acceptFormats: j,
|
|
1157
|
+
fromClipboard: a,
|
|
1158
1158
|
isBackground: o,
|
|
1159
1159
|
withoutSelection: i
|
|
1160
1160
|
}
|
|
@@ -1179,27 +1179,27 @@ class N {
|
|
|
1179
1179
|
format: M,
|
|
1180
1180
|
contentType: g,
|
|
1181
1181
|
acceptContentTypes: m,
|
|
1182
|
-
acceptFormats:
|
|
1183
|
-
fromClipboard:
|
|
1182
|
+
acceptFormats: j,
|
|
1183
|
+
fromClipboard: a,
|
|
1184
1184
|
isBackground: o,
|
|
1185
1185
|
withoutSelection: i
|
|
1186
1186
|
}
|
|
1187
1187
|
}), null;
|
|
1188
1188
|
if (this._createdBlobUrls.push(f), M === "svg") {
|
|
1189
1189
|
const C = yield ke(f);
|
|
1190
|
-
b =
|
|
1190
|
+
b = F.groupSVGElements(C.objects, C.options);
|
|
1191
1191
|
} else
|
|
1192
|
-
b = yield
|
|
1192
|
+
b = yield Y.fromURL(f, { crossOrigin: "anonymous" });
|
|
1193
1193
|
const { width: S, height: T } = b;
|
|
1194
|
-
if (b instanceof
|
|
1194
|
+
if (b instanceof Y) {
|
|
1195
1195
|
const C = b.getElement();
|
|
1196
1196
|
let D = "";
|
|
1197
1197
|
if (C instanceof HTMLImageElement ? D = C.src : C instanceof HTMLCanvasElement && (D = C.toDataURL()), T > _ || S > k) {
|
|
1198
1198
|
const B = yield this.resizeImageToBoundaries(D, "max"), L = URL.createObjectURL(B);
|
|
1199
|
-
this._createdBlobUrls.push(L), b = yield
|
|
1200
|
-
} else if (T <
|
|
1199
|
+
this._createdBlobUrls.push(L), b = yield Y.fromURL(L, { crossOrigin: "anonymous" });
|
|
1200
|
+
} else if (T < H || S < z) {
|
|
1201
1201
|
const B = yield this.resizeImageToBoundaries(D, "min"), L = URL.createObjectURL(B);
|
|
1202
|
-
this._createdBlobUrls.push(L), b = yield
|
|
1202
|
+
this._createdBlobUrls.push(L), b = yield Y.fromURL(L, { crossOrigin: "anonymous" });
|
|
1203
1203
|
}
|
|
1204
1204
|
}
|
|
1205
1205
|
if (b.set("id", `${b.type}-${A()}`), b.set("format", M), s === "scale-montage")
|
|
@@ -1208,19 +1208,19 @@ class N {
|
|
|
1208
1208
|
const { width: C, height: D } = d, B = this.calculateScaleFactor({ imageObject: b, scaleType: s });
|
|
1209
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 });
|
|
1210
1210
|
}
|
|
1211
|
-
r.add(b), r.centerObject(b), i || r.setActiveObject(b), r.renderAll(), l.resumeHistory(),
|
|
1212
|
-
const
|
|
1211
|
+
r.add(b), r.centerObject(b), i || r.setActiveObject(b), r.renderAll(), l.resumeHistory(), n || l.saveState();
|
|
1212
|
+
const Z = {
|
|
1213
1213
|
image: b,
|
|
1214
1214
|
format: M,
|
|
1215
1215
|
contentType: g,
|
|
1216
1216
|
scale: s,
|
|
1217
|
-
withoutSave:
|
|
1217
|
+
withoutSave: n,
|
|
1218
1218
|
source: t,
|
|
1219
|
-
fromClipboard:
|
|
1219
|
+
fromClipboard: a,
|
|
1220
1220
|
isBackground: o,
|
|
1221
1221
|
withoutSelection: i
|
|
1222
1222
|
};
|
|
1223
|
-
return r.fire("editor:image-imported",
|
|
1223
|
+
return r.fire("editor:image-imported", Z), Z;
|
|
1224
1224
|
} catch (f) {
|
|
1225
1225
|
return u.emitError({
|
|
1226
1226
|
origin: "ImageManager",
|
|
@@ -1232,8 +1232,8 @@ class N {
|
|
|
1232
1232
|
format: M,
|
|
1233
1233
|
contentType: g,
|
|
1234
1234
|
scale: s,
|
|
1235
|
-
withoutSave:
|
|
1236
|
-
fromClipboard:
|
|
1235
|
+
withoutSave: n,
|
|
1236
|
+
fromClipboard: a,
|
|
1237
1237
|
isBackground: o,
|
|
1238
1238
|
withoutSelection: i
|
|
1239
1239
|
}
|
|
@@ -1250,24 +1250,24 @@ class N {
|
|
|
1250
1250
|
* @returns возвращает Promise с Blob-объектом уменьшенного изображения
|
|
1251
1251
|
*/
|
|
1252
1252
|
resizeImageToBoundaries(e, t = "max") {
|
|
1253
|
-
return
|
|
1253
|
+
return p(this, null, function* () {
|
|
1254
1254
|
let s = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${k}x${_}`;
|
|
1255
|
-
t === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${
|
|
1256
|
-
const
|
|
1255
|
+
t === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${z}x${H}`);
|
|
1256
|
+
const n = {
|
|
1257
1257
|
dataURL: e,
|
|
1258
1258
|
sizeType: t,
|
|
1259
1259
|
maxWidth: k,
|
|
1260
1260
|
maxHeight: _,
|
|
1261
|
-
minWidth:
|
|
1262
|
-
minHeight:
|
|
1261
|
+
minWidth: z,
|
|
1262
|
+
minHeight: H
|
|
1263
1263
|
};
|
|
1264
1264
|
return this.editor.errorManager.emitWarning({
|
|
1265
1265
|
origin: "ImageManager",
|
|
1266
1266
|
method: "resizeImageToBoundaries",
|
|
1267
1267
|
code: "IMAGE_RESIZE_WARNING",
|
|
1268
1268
|
message: s,
|
|
1269
|
-
data:
|
|
1270
|
-
}), this.editor.workerManager.post("resizeImage",
|
|
1269
|
+
data: n
|
|
1270
|
+
}), this.editor.workerManager.post("resizeImage", n);
|
|
1271
1271
|
});
|
|
1272
1272
|
}
|
|
1273
1273
|
/**
|
|
@@ -1282,75 +1282,75 @@ class N {
|
|
|
1282
1282
|
* @fires editor:canvas-exported
|
|
1283
1283
|
*/
|
|
1284
1284
|
exportCanvasAsImageFile() {
|
|
1285
|
-
return
|
|
1285
|
+
return p(this, arguments, function* (e = {}) {
|
|
1286
1286
|
const {
|
|
1287
1287
|
fileName: t = "image.png",
|
|
1288
1288
|
contentType: s = "image/png",
|
|
1289
|
-
exportAsBase64:
|
|
1290
|
-
exportAsBlob:
|
|
1289
|
+
exportAsBase64: n = !1,
|
|
1290
|
+
exportAsBlob: a = !1
|
|
1291
1291
|
} = e, { canvas: o, montageArea: i, workerManager: r, interactionBlocker: d } = this.editor;
|
|
1292
1292
|
try {
|
|
1293
1293
|
const h = s === "application/pdf", l = h ? "image/jpg" : s, u = N.getFormatFromContentType(l);
|
|
1294
1294
|
i.setCoords();
|
|
1295
|
-
const { left: g, top: M, width: m, height:
|
|
1295
|
+
const { left: g, top: M, width: m, height: j } = i.getBoundingRect(), f = yield o.clone(["id", "format", "locked"]);
|
|
1296
1296
|
f.enableRetinaScaling = !1, ["image/jpg", "image/jpeg"].includes(l) && (f.backgroundColor = "#ffffff");
|
|
1297
|
-
const b = f.getObjects().find((
|
|
1297
|
+
const b = f.getObjects().find((I) => I.id === i.id);
|
|
1298
1298
|
if (b && (b.visible = !1), d != null && d.isBlocked) {
|
|
1299
|
-
const
|
|
1300
|
-
|
|
1299
|
+
const I = f.getObjects().find((w) => w.id === d.overlayMask.id);
|
|
1300
|
+
I && (I.visible = !1);
|
|
1301
1301
|
}
|
|
1302
|
-
f.viewportTransform = [1, 0, 0, 1, -g, -M], f.setDimensions({ width: m, height:
|
|
1303
|
-
const S = f.getObjects().filter((
|
|
1302
|
+
f.viewportTransform = [1, 0, 0, 1, -g, -M], f.setDimensions({ width: m, height: j }, { backstoreOnly: !0 }), f.renderAll();
|
|
1303
|
+
const S = f.getObjects().filter((I) => I.format).every((I) => I.format === "svg");
|
|
1304
1304
|
if (u === "svg" && S) {
|
|
1305
|
-
const
|
|
1305
|
+
const I = f.toSVG();
|
|
1306
1306
|
f.dispose();
|
|
1307
|
-
const
|
|
1308
|
-
image: N._exportSVGStringAsFile(
|
|
1309
|
-
exportAsBase64:
|
|
1310
|
-
exportAsBlob:
|
|
1307
|
+
const O = {
|
|
1308
|
+
image: N._exportSVGStringAsFile(I, {
|
|
1309
|
+
exportAsBase64: n,
|
|
1310
|
+
exportAsBlob: a,
|
|
1311
1311
|
fileName: t
|
|
1312
1312
|
}),
|
|
1313
1313
|
format: "svg",
|
|
1314
1314
|
contentType: "image/svg+xml",
|
|
1315
1315
|
fileName: t.replace(/\.[^/.]+$/, ".svg")
|
|
1316
1316
|
};
|
|
1317
|
-
return o.fire("editor:canvas-exported",
|
|
1317
|
+
return o.fire("editor:canvas-exported", O), O;
|
|
1318
1318
|
}
|
|
1319
|
-
const T = yield new Promise((
|
|
1320
|
-
f.getElement().toBlob((
|
|
1321
|
-
|
|
1319
|
+
const T = yield new Promise((I, w) => {
|
|
1320
|
+
f.getElement().toBlob((O) => {
|
|
1321
|
+
O ? I(O) : w(new Error("Failed to create Blob from canvas"));
|
|
1322
1322
|
});
|
|
1323
1323
|
});
|
|
1324
|
-
if (f.dispose(),
|
|
1325
|
-
const
|
|
1324
|
+
if (f.dispose(), a) {
|
|
1325
|
+
const I = {
|
|
1326
1326
|
image: T,
|
|
1327
1327
|
format: u,
|
|
1328
1328
|
contentType: l,
|
|
1329
1329
|
fileName: t
|
|
1330
1330
|
};
|
|
1331
|
-
return o.fire("editor:canvas-exported",
|
|
1331
|
+
return o.fire("editor:canvas-exported", I), I;
|
|
1332
1332
|
}
|
|
1333
|
-
const
|
|
1333
|
+
const Z = yield createImageBitmap(T), C = yield r.post(
|
|
1334
1334
|
"toDataURL",
|
|
1335
|
-
{ format: u, quality: 1, bitmap:
|
|
1336
|
-
[
|
|
1335
|
+
{ format: u, quality: 1, bitmap: Z },
|
|
1336
|
+
[Z]
|
|
1337
1337
|
);
|
|
1338
1338
|
if (h) {
|
|
1339
|
-
const w = m * 0.264583,
|
|
1340
|
-
orientation: w >
|
|
1339
|
+
const w = m * 0.264583, O = j * 0.264583, Oe = (yield this.editor.moduleLoader.loadModule("jspdf")).jsPDF, te = new Oe({
|
|
1340
|
+
orientation: w > O ? "landscape" : "portrait",
|
|
1341
1341
|
unit: "mm",
|
|
1342
|
-
format: [w,
|
|
1342
|
+
format: [w, O]
|
|
1343
1343
|
});
|
|
1344
|
-
if (
|
|
1344
|
+
if (te.addImage(String(C), "JPG", 0, 0, w, O), n) {
|
|
1345
1345
|
const ge = {
|
|
1346
|
-
image:
|
|
1346
|
+
image: te.output("datauristring"),
|
|
1347
1347
|
format: "pdf",
|
|
1348
1348
|
contentType: "application/pdf",
|
|
1349
1349
|
fileName: t
|
|
1350
1350
|
};
|
|
1351
1351
|
return o.fire("editor:canvas-exported", ge), ge;
|
|
1352
1352
|
}
|
|
1353
|
-
const Ee =
|
|
1353
|
+
const Ee = te.output("blob"), ue = {
|
|
1354
1354
|
image: new File([Ee], t, { type: "application/pdf" }),
|
|
1355
1355
|
format: "pdf",
|
|
1356
1356
|
contentType: "application/pdf",
|
|
@@ -1358,14 +1358,14 @@ class N {
|
|
|
1358
1358
|
};
|
|
1359
1359
|
return o.fire("editor:canvas-exported", ue), ue;
|
|
1360
1360
|
}
|
|
1361
|
-
if (
|
|
1362
|
-
const
|
|
1361
|
+
if (n) {
|
|
1362
|
+
const I = {
|
|
1363
1363
|
image: C,
|
|
1364
1364
|
format: u,
|
|
1365
1365
|
contentType: l,
|
|
1366
1366
|
fileName: t
|
|
1367
1367
|
};
|
|
1368
|
-
return o.fire("editor:canvas-exported",
|
|
1368
|
+
return o.fire("editor:canvas-exported", I), I;
|
|
1369
1369
|
}
|
|
1370
1370
|
const D = u === "svg" && !S ? t.replace(/\.[^/.]+$/, ".png") : t, L = {
|
|
1371
1371
|
image: new File([T], D, { type: l }),
|
|
@@ -1380,7 +1380,7 @@ class N {
|
|
|
1380
1380
|
method: "exportCanvasAsImageFile",
|
|
1381
1381
|
code: "IMAGE_EXPORT_FAILED",
|
|
1382
1382
|
message: `Ошибка экспорта изображения: ${h.message}`,
|
|
1383
|
-
data: { contentType: s, fileName: t, exportAsBase64:
|
|
1383
|
+
data: { contentType: s, fileName: t, exportAsBase64: n, exportAsBlob: a }
|
|
1384
1384
|
}), null;
|
|
1385
1385
|
}
|
|
1386
1386
|
});
|
|
@@ -1397,12 +1397,12 @@ class N {
|
|
|
1397
1397
|
* @fires editor:object-exported
|
|
1398
1398
|
*/
|
|
1399
1399
|
exportObjectAsImageFile() {
|
|
1400
|
-
return
|
|
1400
|
+
return p(this, arguments, function* (e = {}) {
|
|
1401
1401
|
const {
|
|
1402
1402
|
object: t,
|
|
1403
1403
|
fileName: s = "image.png",
|
|
1404
|
-
contentType:
|
|
1405
|
-
exportAsBase64:
|
|
1404
|
+
contentType: n = "image/png",
|
|
1405
|
+
exportAsBase64: a = !1,
|
|
1406
1406
|
exportAsBlob: o = !1
|
|
1407
1407
|
} = e, { canvas: i, workerManager: r } = this.editor, d = t || i.getActiveObject();
|
|
1408
1408
|
if (!d)
|
|
@@ -1411,26 +1411,26 @@ class N {
|
|
|
1411
1411
|
method: "exportObjectAsImageFile",
|
|
1412
1412
|
code: "NO_OBJECT_SELECTED",
|
|
1413
1413
|
message: "Не выбран объект для экспорта",
|
|
1414
|
-
data: { contentType:
|
|
1414
|
+
data: { contentType: n, fileName: s, exportAsBase64: a, exportAsBlob: o }
|
|
1415
1415
|
}), null;
|
|
1416
1416
|
try {
|
|
1417
|
-
const h = N.getFormatFromContentType(
|
|
1417
|
+
const h = N.getFormatFromContentType(n);
|
|
1418
1418
|
if (h === "svg") {
|
|
1419
|
-
const m = d.toSVG(),
|
|
1420
|
-
exportAsBase64:
|
|
1419
|
+
const m = d.toSVG(), j = N._exportSVGStringAsFile(m, {
|
|
1420
|
+
exportAsBase64: a,
|
|
1421
1421
|
exportAsBlob: o,
|
|
1422
1422
|
fileName: s
|
|
1423
1423
|
}), f = {
|
|
1424
1424
|
object: d,
|
|
1425
|
-
image:
|
|
1425
|
+
image: j,
|
|
1426
1426
|
format: h,
|
|
1427
1427
|
contentType: "image/svg+xml",
|
|
1428
1428
|
fileName: s.replace(/\.[^/.]+$/, ".svg")
|
|
1429
1429
|
};
|
|
1430
1430
|
return i.fire("editor:object-exported", f), f;
|
|
1431
1431
|
}
|
|
1432
|
-
if (
|
|
1433
|
-
const m = yield createImageBitmap(d.getElement()),
|
|
1432
|
+
if (a && d instanceof Y) {
|
|
1433
|
+
const m = yield createImageBitmap(d.getElement()), j = yield r.post(
|
|
1434
1434
|
"toDataURL",
|
|
1435
1435
|
{
|
|
1436
1436
|
format: h,
|
|
@@ -1440,18 +1440,18 @@ class N {
|
|
|
1440
1440
|
[m]
|
|
1441
1441
|
), f = {
|
|
1442
1442
|
object: d,
|
|
1443
|
-
image:
|
|
1443
|
+
image: j,
|
|
1444
1444
|
format: h,
|
|
1445
|
-
contentType:
|
|
1445
|
+
contentType: n,
|
|
1446
1446
|
fileName: s
|
|
1447
1447
|
};
|
|
1448
1448
|
return i.fire("editor:object-exported", f), f;
|
|
1449
1449
|
}
|
|
1450
1450
|
const l = d.toCanvasElement({
|
|
1451
1451
|
enableRetinaScaling: !1
|
|
1452
|
-
}), u = yield new Promise((m,
|
|
1452
|
+
}), u = yield new Promise((m, j) => {
|
|
1453
1453
|
l.toBlob((f) => {
|
|
1454
|
-
f ? m(f) :
|
|
1454
|
+
f ? m(f) : j(new Error("Failed to create Blob from canvas"));
|
|
1455
1455
|
});
|
|
1456
1456
|
});
|
|
1457
1457
|
if (o) {
|
|
@@ -1459,16 +1459,16 @@ class N {
|
|
|
1459
1459
|
object: d,
|
|
1460
1460
|
image: u,
|
|
1461
1461
|
format: h,
|
|
1462
|
-
contentType:
|
|
1462
|
+
contentType: n,
|
|
1463
1463
|
fileName: s
|
|
1464
1464
|
};
|
|
1465
1465
|
return i.fire("editor:object-exported", m), m;
|
|
1466
1466
|
}
|
|
1467
|
-
const g = new File([u], s, { type:
|
|
1467
|
+
const g = new File([u], s, { type: n }), M = {
|
|
1468
1468
|
object: d,
|
|
1469
1469
|
image: g,
|
|
1470
1470
|
format: h,
|
|
1471
|
-
contentType:
|
|
1471
|
+
contentType: n,
|
|
1472
1472
|
fileName: s
|
|
1473
1473
|
};
|
|
1474
1474
|
return i.fire("editor:object-exported", M), M;
|
|
@@ -1478,7 +1478,7 @@ class N {
|
|
|
1478
1478
|
method: "exportObjectAsImageFile",
|
|
1479
1479
|
code: "IMAGE_EXPORT_FAILED",
|
|
1480
1480
|
message: `Ошибка экспорта объекта: ${h.message}`,
|
|
1481
|
-
data: { contentType:
|
|
1481
|
+
data: { contentType: n, fileName: s, exportAsBase64: a, exportAsBlob: o }
|
|
1482
1482
|
}), null;
|
|
1483
1483
|
}
|
|
1484
1484
|
});
|
|
@@ -1510,7 +1510,7 @@ class N {
|
|
|
1510
1510
|
* @public
|
|
1511
1511
|
*/
|
|
1512
1512
|
getContentType(e) {
|
|
1513
|
-
return
|
|
1513
|
+
return p(this, null, function* () {
|
|
1514
1514
|
return typeof e == "string" ? this.getContentTypeFromUrl(e) : e.type || "application/octet-stream";
|
|
1515
1515
|
});
|
|
1516
1516
|
}
|
|
@@ -1521,7 +1521,7 @@ class N {
|
|
|
1521
1521
|
* @public
|
|
1522
1522
|
*/
|
|
1523
1523
|
getContentTypeFromUrl(e) {
|
|
1524
|
-
return
|
|
1524
|
+
return p(this, null, function* () {
|
|
1525
1525
|
if (e.startsWith("data:")) {
|
|
1526
1526
|
const t = e.match(/^data:([^;]+)/);
|
|
1527
1527
|
return t ? t[1] : "application/octet-stream";
|
|
@@ -1545,11 +1545,11 @@ class N {
|
|
|
1545
1545
|
getContentTypeFromExtension(e) {
|
|
1546
1546
|
var t;
|
|
1547
1547
|
try {
|
|
1548
|
-
const
|
|
1548
|
+
const n = (t = new URL(e).pathname.split(".").pop()) == null ? void 0 : t.toLowerCase(), a = {};
|
|
1549
1549
|
return this.acceptContentTypes.forEach((o) => {
|
|
1550
1550
|
const i = N.getFormatFromContentType(o);
|
|
1551
|
-
i && (
|
|
1552
|
-
}),
|
|
1551
|
+
i && (a[i] = o);
|
|
1552
|
+
}), n && a[n] || "application/octet-stream";
|
|
1553
1553
|
} catch (s) {
|
|
1554
1554
|
return console.warn("Не удалось определить расширение из URL:", e, s), "application/octet-stream";
|
|
1555
1555
|
}
|
|
@@ -1567,8 +1567,8 @@ class N {
|
|
|
1567
1567
|
}) {
|
|
1568
1568
|
const { montageArea: s } = this.editor;
|
|
1569
1569
|
if (!s || !e) return 1;
|
|
1570
|
-
const
|
|
1571
|
-
return t === "contain" || t === "image-contain" ? Math.min(
|
|
1570
|
+
const n = s.width, a = s.height, { width: o, height: i } = e;
|
|
1571
|
+
return t === "contain" || t === "image-contain" ? Math.min(n / o, a / i) : t === "cover" || t === "image-cover" ? Math.max(n / o, a / i) : 1;
|
|
1572
1572
|
}
|
|
1573
1573
|
/**
|
|
1574
1574
|
* Преобразует SVG-строку в Blob, файл, или base64
|
|
@@ -1584,9 +1584,9 @@ class N {
|
|
|
1584
1584
|
static _exportSVGStringAsFile(e, {
|
|
1585
1585
|
exportAsBase64: t,
|
|
1586
1586
|
exportAsBlob: s,
|
|
1587
|
-
fileName:
|
|
1587
|
+
fileName: n = "image.svg"
|
|
1588
1588
|
} = {}) {
|
|
1589
|
-
return s ? new Blob([e], { type: "image/svg+xml" }) : t ? `data:image/svg+xml;base64,${window.btoa(encodeURIComponent(e))}` : new File([e],
|
|
1589
|
+
return s ? new Blob([e], { type: "image/svg+xml" }) : t ? `data:image/svg+xml;base64,${window.btoa(encodeURIComponent(e))}` : new File([e], n.replace(/\.[^/.]+$/, ".svg"), { type: "image/svg+xml" });
|
|
1590
1590
|
}
|
|
1591
1591
|
/**
|
|
1592
1592
|
* Извлекает чистый формат (subtype) из contentType,
|
|
@@ -1600,7 +1600,7 @@ class N {
|
|
|
1600
1600
|
return t ? t[1] : "";
|
|
1601
1601
|
}
|
|
1602
1602
|
}
|
|
1603
|
-
const x = (c, e, t) => Math.max(Math.min(c, t), e),
|
|
1603
|
+
const x = (c, e, t) => Math.max(Math.min(c, t), e), Se = (c, e) => c * e, ft = (c, e) => new $(c / 2, e / 2);
|
|
1604
1604
|
function Mt(c) {
|
|
1605
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";
|
|
1606
1606
|
}
|
|
@@ -1628,25 +1628,25 @@ class mt {
|
|
|
1628
1628
|
* @param options.adaptCanvasToContainer - Адаптировать канвас к контейнеру
|
|
1629
1629
|
* @fires editor:resolution-width-changed
|
|
1630
1630
|
*/
|
|
1631
|
-
setResolutionWidth(e, { preserveProportional: t, withoutSave: s, adaptCanvasToContainer:
|
|
1631
|
+
setResolutionWidth(e, { preserveProportional: t, withoutSave: s, adaptCanvasToContainer: n } = {}) {
|
|
1632
1632
|
var M;
|
|
1633
1633
|
if (!e) return;
|
|
1634
1634
|
const {
|
|
1635
|
-
canvas:
|
|
1635
|
+
canvas: a,
|
|
1636
1636
|
montageArea: o,
|
|
1637
1637
|
options: { canvasBackstoreWidth: i }
|
|
1638
|
-
} = this.editor, { width: r, height: d } = o, h = x(Number(e),
|
|
1639
|
-
if (!i || i === "auto" ||
|
|
1640
|
-
const m = h / r,
|
|
1641
|
-
this.setResolutionHeight(
|
|
1638
|
+
} = this.editor, { width: r, height: d } = o, h = x(Number(e), z, k);
|
|
1639
|
+
if (!i || i === "auto" || n ? this.adaptCanvasToContainer() : i ? this.setCanvasBackstoreWidth(Number(i)) : this.setCanvasBackstoreWidth(h), o.set({ width: h }), (M = a.clipPath) == null || M.set({ width: h }), t) {
|
|
1640
|
+
const m = h / r, j = Se(d, m);
|
|
1641
|
+
this.setResolutionHeight(j);
|
|
1642
1642
|
return;
|
|
1643
1643
|
}
|
|
1644
|
-
const { left: l, top: u } = this.getObjectDefaultCoords(o), g =
|
|
1645
|
-
|
|
1644
|
+
const { left: l, top: u } = this.getObjectDefaultCoords(o), g = a.getZoom();
|
|
1645
|
+
a.setViewportTransform([g, 0, 0, g, l, u]), this.centerMontageArea(), s || this.editor.historyManager.saveState(), a.fire("editor:resolution-width-changed", {
|
|
1646
1646
|
width: h,
|
|
1647
1647
|
preserveProportional: t,
|
|
1648
1648
|
withoutSave: s,
|
|
1649
|
-
adaptCanvasToContainer:
|
|
1649
|
+
adaptCanvasToContainer: n
|
|
1650
1650
|
});
|
|
1651
1651
|
}
|
|
1652
1652
|
/**
|
|
@@ -1658,25 +1658,25 @@ class mt {
|
|
|
1658
1658
|
* @param options.adaptCanvasToContainer - Адаптировать канвас к контейнеру
|
|
1659
1659
|
* @fires editor:resolution-height-changed
|
|
1660
1660
|
*/
|
|
1661
|
-
setResolutionHeight(e, { preserveProportional: t, withoutSave: s, adaptCanvasToContainer:
|
|
1661
|
+
setResolutionHeight(e, { preserveProportional: t, withoutSave: s, adaptCanvasToContainer: n } = {}) {
|
|
1662
1662
|
var M;
|
|
1663
1663
|
if (!e) return;
|
|
1664
1664
|
const {
|
|
1665
|
-
canvas:
|
|
1665
|
+
canvas: a,
|
|
1666
1666
|
montageArea: o,
|
|
1667
1667
|
options: { canvasBackstoreHeight: i }
|
|
1668
|
-
} = this.editor, { width: r, height: d } = o, h = x(Number(e),
|
|
1669
|
-
if (!i || i === "auto" ||
|
|
1670
|
-
const m = h / d,
|
|
1671
|
-
this.setResolutionWidth(
|
|
1668
|
+
} = this.editor, { width: r, height: d } = o, h = x(Number(e), H, _);
|
|
1669
|
+
if (!i || i === "auto" || n ? this.adaptCanvasToContainer() : i ? this.setCanvasBackstoreHeight(Number(i)) : this.setCanvasBackstoreHeight(h), o.set({ height: h }), (M = a.clipPath) == null || M.set({ height: h }), t) {
|
|
1670
|
+
const m = h / d, j = Se(r, m);
|
|
1671
|
+
this.setResolutionWidth(j);
|
|
1672
1672
|
return;
|
|
1673
1673
|
}
|
|
1674
|
-
const { left: l, top: u } = this.getObjectDefaultCoords(o), g =
|
|
1675
|
-
|
|
1674
|
+
const { left: l, top: u } = this.getObjectDefaultCoords(o), g = a.getZoom();
|
|
1675
|
+
a.setViewportTransform([g, 0, 0, g, l, u]), this.centerMontageArea(), s || this.editor.historyManager.saveState(), a.fire("editor:resolution-height-changed", {
|
|
1676
1676
|
height: h,
|
|
1677
1677
|
preserveProportional: t,
|
|
1678
1678
|
withoutSave: s,
|
|
1679
|
-
adaptCanvasToContainer:
|
|
1679
|
+
adaptCanvasToContainer: n
|
|
1680
1680
|
});
|
|
1681
1681
|
}
|
|
1682
1682
|
/**
|
|
@@ -1685,16 +1685,16 @@ class mt {
|
|
|
1685
1685
|
*/
|
|
1686
1686
|
centerMontageArea() {
|
|
1687
1687
|
var r;
|
|
1688
|
-
const { canvas: e, montageArea: t } = this.editor, s = e.getWidth(),
|
|
1688
|
+
const { canvas: e, montageArea: t } = this.editor, s = e.getWidth(), n = e.getHeight(), a = e.getZoom(), o = ft(s, n);
|
|
1689
1689
|
t.set({
|
|
1690
1690
|
left: s / 2,
|
|
1691
|
-
top:
|
|
1691
|
+
top: n / 2
|
|
1692
1692
|
}), (r = e.clipPath) == null || r.set({
|
|
1693
1693
|
left: s / 2,
|
|
1694
|
-
top:
|
|
1694
|
+
top: n / 2
|
|
1695
1695
|
}), e.renderAll();
|
|
1696
1696
|
const i = e.viewportTransform;
|
|
1697
|
-
i[4] = s / 2 - o.x *
|
|
1697
|
+
i[4] = s / 2 - o.x * a, i[5] = n / 2 - o.y * a, e.setViewportTransform(i), e.renderAll();
|
|
1698
1698
|
}
|
|
1699
1699
|
/**
|
|
1700
1700
|
* Метод для получения координат объекта с учетом текущего зума
|
|
@@ -1710,7 +1710,7 @@ class mt {
|
|
|
1710
1710
|
code: "NO_ACTIVE_OBJECT",
|
|
1711
1711
|
message: "Не выбран объект для получения координат"
|
|
1712
1712
|
}), { left: 0, top: 0 };
|
|
1713
|
-
const { width:
|
|
1713
|
+
const { width: n, height: a } = s, o = t.getZoom(), i = (n - n * o) / 2, r = (a - a * o) / 2;
|
|
1714
1714
|
return { left: i, top: r };
|
|
1715
1715
|
}
|
|
1716
1716
|
/**
|
|
@@ -1718,7 +1718,7 @@ class mt {
|
|
|
1718
1718
|
*/
|
|
1719
1719
|
setCanvasBackstoreWidth(e) {
|
|
1720
1720
|
if (!e || typeof e != "number") return;
|
|
1721
|
-
const t = x(e,
|
|
1721
|
+
const t = x(e, z, k);
|
|
1722
1722
|
this.editor.canvas.setDimensions({ width: t }, { backstoreOnly: !0 });
|
|
1723
1723
|
}
|
|
1724
1724
|
/**
|
|
@@ -1727,7 +1727,7 @@ class mt {
|
|
|
1727
1727
|
*/
|
|
1728
1728
|
setCanvasBackstoreHeight(e) {
|
|
1729
1729
|
if (!e || typeof e != "number") return;
|
|
1730
|
-
const t = x(e,
|
|
1730
|
+
const t = x(e, H, _);
|
|
1731
1731
|
this.editor.canvas.setDimensions({ height: t }, { backstoreOnly: !0 });
|
|
1732
1732
|
}
|
|
1733
1733
|
/**
|
|
@@ -1736,8 +1736,8 @@ class mt {
|
|
|
1736
1736
|
* с учётом минимальных и максимальных значений.
|
|
1737
1737
|
*/
|
|
1738
1738
|
adaptCanvasToContainer() {
|
|
1739
|
-
const { canvas: e } = this.editor, t = this.getEditorContainer(), s = t.clientWidth,
|
|
1740
|
-
e.setDimensions({ width:
|
|
1739
|
+
const { canvas: e } = this.editor, t = this.getEditorContainer(), s = t.clientWidth, n = t.clientHeight, a = x(s, z, k), o = x(n, H, _);
|
|
1740
|
+
e.setDimensions({ width: a, height: o }, { backstoreOnly: !0 });
|
|
1741
1741
|
}
|
|
1742
1742
|
/**
|
|
1743
1743
|
* Обновляет размеры канваса без изменения позиций объектов.
|
|
@@ -1750,11 +1750,11 @@ class mt {
|
|
|
1750
1750
|
montageArea: t,
|
|
1751
1751
|
montageArea: {
|
|
1752
1752
|
width: s,
|
|
1753
|
-
height:
|
|
1753
|
+
height: n
|
|
1754
1754
|
}
|
|
1755
|
-
} = this.editor,
|
|
1756
|
-
this.setResolutionWidth(s, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.setResolutionHeight(
|
|
1757
|
-
const i = t.left -
|
|
1755
|
+
} = this.editor, a = t.left, o = t.top;
|
|
1756
|
+
this.setResolutionWidth(s, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.setResolutionHeight(n, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.centerMontageArea();
|
|
1757
|
+
const i = t.left - a, r = t.top - o;
|
|
1758
1758
|
if (i !== 0 || r !== 0) {
|
|
1759
1759
|
const d = e.getActiveObject(), h = [];
|
|
1760
1760
|
if ((d == null ? void 0 : d.type) === "activeselection") {
|
|
@@ -1770,7 +1770,7 @@ class mt {
|
|
|
1770
1770
|
if (h.length === 1)
|
|
1771
1771
|
e.setActiveObject(h[0]);
|
|
1772
1772
|
else {
|
|
1773
|
-
const l = new
|
|
1773
|
+
const l = new y(h, {
|
|
1774
1774
|
canvas: e
|
|
1775
1775
|
});
|
|
1776
1776
|
e.setActiveObject(l);
|
|
@@ -1778,7 +1778,7 @@ class mt {
|
|
|
1778
1778
|
}
|
|
1779
1779
|
e.renderAll(), e.fire("editor:canvas-updated", {
|
|
1780
1780
|
width: s,
|
|
1781
|
-
height:
|
|
1781
|
+
height: n
|
|
1782
1782
|
});
|
|
1783
1783
|
}
|
|
1784
1784
|
/**
|
|
@@ -1888,32 +1888,32 @@ class mt {
|
|
|
1888
1888
|
*/
|
|
1889
1889
|
setDisplayDimension({ element: e = "canvas", dimension: t, value: s } = {}) {
|
|
1890
1890
|
if (!s) return;
|
|
1891
|
-
const { canvas:
|
|
1891
|
+
const { canvas: n } = this.editor, a = [];
|
|
1892
1892
|
switch (e) {
|
|
1893
1893
|
case "canvas":
|
|
1894
|
-
|
|
1894
|
+
a.push(n.lowerCanvasEl, n.upperCanvasEl);
|
|
1895
1895
|
break;
|
|
1896
1896
|
case "wrapper":
|
|
1897
|
-
|
|
1897
|
+
a.push(n.wrapperEl);
|
|
1898
1898
|
break;
|
|
1899
1899
|
case "container":
|
|
1900
|
-
|
|
1900
|
+
a.push(this.getEditorContainer());
|
|
1901
1901
|
break;
|
|
1902
1902
|
default:
|
|
1903
|
-
|
|
1903
|
+
a.push(n.lowerCanvasEl, n.upperCanvasEl);
|
|
1904
1904
|
}
|
|
1905
1905
|
const o = t === "width" ? "width" : "height";
|
|
1906
1906
|
if (typeof s == "string") {
|
|
1907
|
-
|
|
1907
|
+
a.forEach((r) => {
|
|
1908
1908
|
r.style[o] = s;
|
|
1909
1909
|
});
|
|
1910
1910
|
return;
|
|
1911
1911
|
}
|
|
1912
1912
|
if (isNaN(s)) return;
|
|
1913
1913
|
const i = `${s}px`;
|
|
1914
|
-
|
|
1914
|
+
a.forEach((r) => {
|
|
1915
1915
|
r.style[o] = i;
|
|
1916
|
-
}),
|
|
1916
|
+
}), n.fire(`editor:display-${e}-${o}-changed`, {
|
|
1917
1917
|
element: e,
|
|
1918
1918
|
value: s
|
|
1919
1919
|
});
|
|
@@ -1928,14 +1928,14 @@ class mt {
|
|
|
1928
1928
|
*/
|
|
1929
1929
|
scaleMontageAreaToImage({ object: e, preserveAspectRatio: t, withoutSave: s } = {}) {
|
|
1930
1930
|
const {
|
|
1931
|
-
canvas:
|
|
1932
|
-
montageArea:
|
|
1931
|
+
canvas: n,
|
|
1932
|
+
montageArea: a,
|
|
1933
1933
|
transformManager: o,
|
|
1934
1934
|
options: {
|
|
1935
1935
|
montageAreaWidth: i,
|
|
1936
1936
|
montageAreaHeight: r
|
|
1937
1937
|
}
|
|
1938
|
-
} = this.editor, d = e ||
|
|
1938
|
+
} = this.editor, d = e || n.getActiveObject();
|
|
1939
1939
|
if (!Mt(d)) return;
|
|
1940
1940
|
const { width: h, height: l } = d;
|
|
1941
1941
|
let u = Math.min(h, k), g = Math.min(l, _);
|
|
@@ -1943,10 +1943,10 @@ class mt {
|
|
|
1943
1943
|
const {
|
|
1944
1944
|
width: M,
|
|
1945
1945
|
height: m
|
|
1946
|
-
} =
|
|
1946
|
+
} = a, j = h / M, f = l / m, b = Math.max(j, f);
|
|
1947
1947
|
u = M * b, g = m * b;
|
|
1948
1948
|
}
|
|
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 }),
|
|
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 }), n.centerObject(d), n.renderAll(), s || this.editor.historyManager.saveState(), n.fire("editor:montage-area-scaled-to-image", {
|
|
1950
1950
|
object: d,
|
|
1951
1951
|
width: u,
|
|
1952
1952
|
height: g,
|
|
@@ -1972,13 +1972,13 @@ class mt {
|
|
|
1972
1972
|
const {
|
|
1973
1973
|
canvas: t,
|
|
1974
1974
|
transformManager: s,
|
|
1975
|
-
historyManager:
|
|
1975
|
+
historyManager: n,
|
|
1976
1976
|
options: {
|
|
1977
|
-
montageAreaWidth:
|
|
1977
|
+
montageAreaWidth: a,
|
|
1978
1978
|
montageAreaHeight: o
|
|
1979
1979
|
}
|
|
1980
1980
|
} = this.editor;
|
|
1981
|
-
s.resetZoom(), this.setResolutionWidth(
|
|
1981
|
+
s.resetZoom(), this.setResolutionWidth(a, { withoutSave: !0 }), this.setResolutionHeight(o, { withoutSave: !0 }), t.renderAll(), s.resetObjects(), e || n.saveState(), t.fire("editor:default-scale-set");
|
|
1982
1982
|
}
|
|
1983
1983
|
/**
|
|
1984
1984
|
* Получение всех объектов внутри монтажной области редактора
|
|
@@ -1989,10 +1989,10 @@ class mt {
|
|
|
1989
1989
|
canvas: e,
|
|
1990
1990
|
montageArea: t,
|
|
1991
1991
|
interactionBlocker: { overlayMask: s },
|
|
1992
|
-
backgroundManager: { backgroundObject:
|
|
1992
|
+
backgroundManager: { backgroundObject: n }
|
|
1993
1993
|
} = this.editor;
|
|
1994
1994
|
return e.getObjects().filter(
|
|
1995
|
-
(o) => o.id !== t.id && o.id !== (s == null ? void 0 : s.id) && o.id !== (
|
|
1995
|
+
(o) => o.id !== t.id && o.id !== (s == null ? void 0 : s.id) && o.id !== (n == null ? void 0 : n.id)
|
|
1996
1996
|
);
|
|
1997
1997
|
}
|
|
1998
1998
|
}
|
|
@@ -2008,7 +2008,7 @@ class bt {
|
|
|
2008
2008
|
* @param scale - Желаемый масштаб относительно размеров контейнера редактора.
|
|
2009
2009
|
*/
|
|
2010
2010
|
calculateAndApplyDefaultZoom(e = this.options.defaultScale) {
|
|
2011
|
-
const { canvas: t } = this.editor, s = t.editorContainer,
|
|
2011
|
+
const { canvas: t } = this.editor, s = t.editorContainer, n = s.clientWidth, a = s.clientHeight, { width: o, height: i } = this.editor.montageArea, r = n / o * e, d = a / i * e;
|
|
2012
2012
|
this.defaultZoom = Math.min(r, d), this.setZoom();
|
|
2013
2013
|
}
|
|
2014
2014
|
/**
|
|
@@ -2023,10 +2023,10 @@ class bt {
|
|
|
2023
2023
|
zoom(e = ut, t = {}) {
|
|
2024
2024
|
var u, g;
|
|
2025
2025
|
if (!e) return;
|
|
2026
|
-
const { minZoom: s, maxZoom:
|
|
2026
|
+
const { minZoom: s, maxZoom: n } = this, { canvas: a } = this.editor, o = a.getZoom(), i = a.getCenterPoint(), r = (u = t.pointX) != null ? u : i.x, d = (g = t.pointY) != null ? g : i.y, h = new $(r, d);
|
|
2027
2027
|
let l = Number((o + Number(e)).toFixed(2));
|
|
2028
|
-
l >
|
|
2029
|
-
currentZoom:
|
|
2028
|
+
l > n && (l = n), l < s && (l = s), a.zoomToPoint(h, l), a.fire("editor:zoom-changed", {
|
|
2029
|
+
currentZoom: a.getZoom(),
|
|
2030
2030
|
zoom: l,
|
|
2031
2031
|
point: h
|
|
2032
2032
|
});
|
|
@@ -2037,12 +2037,12 @@ class bt {
|
|
|
2037
2037
|
* @fires editor:zoom-changed
|
|
2038
2038
|
*/
|
|
2039
2039
|
setZoom(e = this.defaultZoom) {
|
|
2040
|
-
const { minZoom: t, maxZoom: s } = this, { canvas:
|
|
2040
|
+
const { minZoom: t, maxZoom: s } = this, { canvas: n } = this.editor, a = new $(n.getCenterPoint());
|
|
2041
2041
|
let o = e;
|
|
2042
|
-
e > s && (o = s), e < t && (o = t),
|
|
2043
|
-
currentZoom:
|
|
2042
|
+
e > s && (o = s), e < t && (o = t), n.zoomToPoint(a, o), n.fire("editor:zoom-changed", {
|
|
2043
|
+
currentZoom: n.getZoom(),
|
|
2044
2044
|
zoom: o,
|
|
2045
|
-
point:
|
|
2045
|
+
point: a
|
|
2046
2046
|
});
|
|
2047
2047
|
}
|
|
2048
2048
|
/**
|
|
@@ -2050,7 +2050,7 @@ class bt {
|
|
|
2050
2050
|
* @fires editor:zoom-changed
|
|
2051
2051
|
*/
|
|
2052
2052
|
resetZoom() {
|
|
2053
|
-
const { canvas: e } = this.editor, t = new
|
|
2053
|
+
const { canvas: e } = this.editor, t = new $(e.getCenterPoint());
|
|
2054
2054
|
e.zoomToPoint(t, this.defaultZoom), this.editor.canvas.fire("editor:zoom-changed", {
|
|
2055
2055
|
currentZoom: e.getZoom(),
|
|
2056
2056
|
point: t
|
|
@@ -2064,11 +2064,11 @@ class bt {
|
|
|
2064
2064
|
* @fires editor:object-rotated
|
|
2065
2065
|
*/
|
|
2066
2066
|
rotate(e = gt, { withoutSave: t } = {}) {
|
|
2067
|
-
const { canvas: s, historyManager:
|
|
2068
|
-
if (!
|
|
2069
|
-
const o =
|
|
2070
|
-
|
|
2071
|
-
object:
|
|
2067
|
+
const { canvas: s, historyManager: n } = this.editor, a = s.getActiveObject();
|
|
2068
|
+
if (!a) return;
|
|
2069
|
+
const o = a.angle + e;
|
|
2070
|
+
a.rotate(o), a.setCoords(), s.renderAll(), t || n.saveState(), s.fire("editor:object-rotated", {
|
|
2071
|
+
object: a,
|
|
2072
2072
|
withoutSave: t,
|
|
2073
2073
|
angle: o
|
|
2074
2074
|
});
|
|
@@ -2080,9 +2080,9 @@ class bt {
|
|
|
2080
2080
|
* @fires editor:object-flipped-x
|
|
2081
2081
|
*/
|
|
2082
2082
|
flipX({ withoutSave: e } = {}) {
|
|
2083
|
-
const { canvas: t, historyManager: s } = this.editor,
|
|
2084
|
-
|
|
2085
|
-
object:
|
|
2083
|
+
const { canvas: t, historyManager: s } = this.editor, n = t.getActiveObject();
|
|
2084
|
+
n && (n.flipX = !n.flipX, t.renderAll(), e || s.saveState(), t.fire("editor:object-flipped-x", {
|
|
2085
|
+
object: n,
|
|
2086
2086
|
withoutSave: e
|
|
2087
2087
|
}));
|
|
2088
2088
|
}
|
|
@@ -2093,9 +2093,9 @@ class bt {
|
|
|
2093
2093
|
* @fires editor:object-flipped-y
|
|
2094
2094
|
*/
|
|
2095
2095
|
flipY({ withoutSave: e } = {}) {
|
|
2096
|
-
const { canvas: t, historyManager: s } = this.editor,
|
|
2097
|
-
|
|
2098
|
-
object:
|
|
2096
|
+
const { canvas: t, historyManager: s } = this.editor, n = t.getActiveObject();
|
|
2097
|
+
n && (n.flipY = !n.flipY, t.renderAll(), e || s.saveState(), t.fire("editor:object-flipped-y", {
|
|
2098
|
+
object: n,
|
|
2099
2099
|
withoutSave: e
|
|
2100
2100
|
}));
|
|
2101
2101
|
}
|
|
@@ -2112,10 +2112,10 @@ class bt {
|
|
|
2112
2112
|
opacity: t = 1,
|
|
2113
2113
|
withoutSave: s
|
|
2114
2114
|
} = {}) {
|
|
2115
|
-
const { canvas:
|
|
2116
|
-
o && (o instanceof
|
|
2115
|
+
const { canvas: n, historyManager: a } = this.editor, o = e || n.getActiveObject();
|
|
2116
|
+
o && (o instanceof y ? o.getObjects().forEach((i) => {
|
|
2117
2117
|
i.set("opacity", t);
|
|
2118
|
-
}) : o.set("opacity", t),
|
|
2118
|
+
}) : o.set("opacity", t), n.renderAll(), s || a.saveState(), n.fire("editor:object-opacity-changed", {
|
|
2119
2119
|
object: o,
|
|
2120
2120
|
opacity: t,
|
|
2121
2121
|
withoutSave: s
|
|
@@ -2136,24 +2136,24 @@ class bt {
|
|
|
2136
2136
|
object: e,
|
|
2137
2137
|
type: t = this.options.scaleType,
|
|
2138
2138
|
withoutSave: s,
|
|
2139
|
-
fitAsOneObject:
|
|
2139
|
+
fitAsOneObject: n
|
|
2140
2140
|
} = {}) {
|
|
2141
|
-
const { canvas:
|
|
2141
|
+
const { canvas: a, historyManager: o } = this.editor, i = e || a.getActiveObject();
|
|
2142
2142
|
if (i) {
|
|
2143
|
-
if (i instanceof
|
|
2143
|
+
if (i instanceof y && !n) {
|
|
2144
2144
|
const r = i.getObjects();
|
|
2145
|
-
|
|
2145
|
+
a.discardActiveObject(), r.forEach((h) => {
|
|
2146
2146
|
this._fitSingleObject(h, t);
|
|
2147
2147
|
});
|
|
2148
|
-
const d = new
|
|
2149
|
-
|
|
2148
|
+
const d = new y(r, { canvas: a });
|
|
2149
|
+
a.setActiveObject(d);
|
|
2150
2150
|
} else
|
|
2151
2151
|
this._fitSingleObject(i, t);
|
|
2152
|
-
|
|
2152
|
+
a.renderAll(), s || o.saveState(), a.fire("editor:object-fitted", {
|
|
2153
2153
|
object: i,
|
|
2154
2154
|
type: t,
|
|
2155
2155
|
withoutSave: s,
|
|
2156
|
-
fitAsOneObject:
|
|
2156
|
+
fitAsOneObject: n
|
|
2157
2157
|
});
|
|
2158
2158
|
}
|
|
2159
2159
|
}
|
|
@@ -2164,9 +2164,9 @@ class bt {
|
|
|
2164
2164
|
* @private
|
|
2165
2165
|
*/
|
|
2166
2166
|
_fitSingleObject(e, t) {
|
|
2167
|
-
const { canvas: s, montageArea:
|
|
2167
|
+
const { canvas: s, montageArea: n } = this.editor, { width: a, height: o, scaleX: i = 1, scaleY: r = 1, angle: d = 0 } = e, h = a * 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, j = h * M + l * g, f = n.width, b = n.height;
|
|
2168
2168
|
let S;
|
|
2169
|
-
t === "contain" ? S = Math.min(f / m, b /
|
|
2169
|
+
t === "contain" ? S = Math.min(f / m, b / j) : S = Math.max(f / m, b / j), e.set({
|
|
2170
2170
|
scaleX: i * S,
|
|
2171
2171
|
scaleY: r * S
|
|
2172
2172
|
}), s.centerObject(e);
|
|
@@ -2189,12 +2189,12 @@ class bt {
|
|
|
2189
2189
|
*/
|
|
2190
2190
|
resetObject({ object: e, alwaysFitObject: t = !1, withoutSave: s = !1 } = {}) {
|
|
2191
2191
|
const {
|
|
2192
|
-
canvas:
|
|
2193
|
-
montageArea:
|
|
2192
|
+
canvas: n,
|
|
2193
|
+
montageArea: a,
|
|
2194
2194
|
imageManager: o,
|
|
2195
2195
|
historyManager: i,
|
|
2196
2196
|
options: { scaleType: r }
|
|
2197
|
-
} = this.editor, d = e ||
|
|
2197
|
+
} = this.editor, d = e || n.getActiveObject();
|
|
2198
2198
|
if (!d || d.locked) return;
|
|
2199
2199
|
if (i.suspendHistory(), d.type === "image" || d.format === "svg" || d.set({
|
|
2200
2200
|
scaleX: 1,
|
|
@@ -2205,20 +2205,20 @@ class bt {
|
|
|
2205
2205
|
}), t)
|
|
2206
2206
|
this.fitObject({ object: d, withoutSave: !0, fitAsOneObject: !0 });
|
|
2207
2207
|
else {
|
|
2208
|
-
const { width: l, height: u } =
|
|
2208
|
+
const { width: l, height: u } = a, { width: g, height: M } = d, m = o.calculateScaleFactor({
|
|
2209
2209
|
imageObject: d,
|
|
2210
2210
|
scaleType: r
|
|
2211
2211
|
});
|
|
2212
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 });
|
|
2213
2213
|
}
|
|
2214
|
-
d.set({ flipX: !1, flipY: !1, angle: 0 }),
|
|
2214
|
+
d.set({ flipX: !1, flipY: !1, angle: 0 }), n.centerObject(d), n.renderAll(), i.resumeHistory(), s || i.saveState(), n.fire("editor:object-reset", {
|
|
2215
2215
|
object: d,
|
|
2216
2216
|
withoutSave: s,
|
|
2217
2217
|
alwaysFitObject: t
|
|
2218
2218
|
});
|
|
2219
2219
|
}
|
|
2220
2220
|
}
|
|
2221
|
-
class
|
|
2221
|
+
class pt {
|
|
2222
2222
|
constructor({ editor: e }) {
|
|
2223
2223
|
this.editor = e, this.isBlocked = !1, this.overlayMask = null, this._createOverlay();
|
|
2224
2224
|
}
|
|
@@ -2248,8 +2248,8 @@ class jt {
|
|
|
2248
2248
|
const { canvas: e, montageArea: t, historyManager: s } = this.editor;
|
|
2249
2249
|
if (!t || !this.overlayMask) return;
|
|
2250
2250
|
s.suspendHistory(), t.setCoords();
|
|
2251
|
-
const { left:
|
|
2252
|
-
this.overlayMask.set({ left:
|
|
2251
|
+
const { left: n, top: a, width: o, height: i } = t.getBoundingRect();
|
|
2252
|
+
this.overlayMask.set({ left: n, top: a, width: o, height: i }), e.discardActiveObject(), this.editor.layerManager.bringToFront(this.overlayMask, { withoutSave: !0 }), s.resumeHistory();
|
|
2253
2253
|
}
|
|
2254
2254
|
/**
|
|
2255
2255
|
* Выключает редактор:
|
|
@@ -2260,8 +2260,8 @@ class jt {
|
|
|
2260
2260
|
block() {
|
|
2261
2261
|
if (this.isBlocked || !this.overlayMask) return;
|
|
2262
2262
|
const { canvas: e, canvasManager: t, historyManager: s } = this.editor;
|
|
2263
|
-
s.suspendHistory(), this.isBlocked = !0, e.discardActiveObject(), e.selection = !1, e.skipTargetFind = !0, t.getObjects().forEach((
|
|
2264
|
-
|
|
2263
|
+
s.suspendHistory(), this.isBlocked = !0, e.discardActiveObject(), e.selection = !1, e.skipTargetFind = !0, t.getObjects().forEach((n) => {
|
|
2264
|
+
n.evented = !1, n.selectable = !1;
|
|
2265
2265
|
}), e.upperCanvasEl.style.pointerEvents = "none", e.lowerCanvasEl.style.pointerEvents = "none", this.overlayMask.visible = !0, this.refresh(), e.fire("editor:disabled"), s.resumeHistory();
|
|
2266
2266
|
}
|
|
2267
2267
|
/**
|
|
@@ -2270,12 +2270,12 @@ class jt {
|
|
|
2270
2270
|
unblock() {
|
|
2271
2271
|
if (!this.isBlocked || !this.overlayMask) return;
|
|
2272
2272
|
const { canvas: e, canvasManager: t, historyManager: s } = this.editor;
|
|
2273
|
-
s.suspendHistory(), this.isBlocked = !1, e.selection = !0, e.skipTargetFind = !1, t.getObjects().forEach((
|
|
2274
|
-
|
|
2273
|
+
s.suspendHistory(), this.isBlocked = !1, e.selection = !0, e.skipTargetFind = !1, t.getObjects().forEach((n) => {
|
|
2274
|
+
n.evented = !0, n.selectable = !0;
|
|
2275
2275
|
}), e.upperCanvasEl.style.pointerEvents = "", e.lowerCanvasEl.style.pointerEvents = "", this.overlayMask.visible = !1, e.requestRenderAll(), e.fire("editor:enabled"), s.resumeHistory();
|
|
2276
2276
|
}
|
|
2277
2277
|
}
|
|
2278
|
-
class
|
|
2278
|
+
class U {
|
|
2279
2279
|
constructor({ editor: e }) {
|
|
2280
2280
|
this.editor = e, this.backgroundObject = null;
|
|
2281
2281
|
}
|
|
@@ -2290,12 +2290,12 @@ class R {
|
|
|
2290
2290
|
customData: t = {},
|
|
2291
2291
|
withoutSave: s = !1
|
|
2292
2292
|
}) {
|
|
2293
|
-
var
|
|
2293
|
+
var n;
|
|
2294
2294
|
try {
|
|
2295
|
-
const { historyManager:
|
|
2296
|
-
if (
|
|
2295
|
+
const { historyManager: a } = this.editor, { backgroundObject: o } = this;
|
|
2296
|
+
if (a.suspendHistory(), o && o.backgroundType === "color") {
|
|
2297
2297
|
if (o.fill === e) {
|
|
2298
|
-
|
|
2298
|
+
a.resumeHistory();
|
|
2299
2299
|
return;
|
|
2300
2300
|
}
|
|
2301
2301
|
o.set({
|
|
@@ -2304,14 +2304,14 @@ class R {
|
|
|
2304
2304
|
}), this.editor.canvas.requestRenderAll();
|
|
2305
2305
|
} else
|
|
2306
2306
|
this._removeCurrentBackground(), this._createColorBackground(e);
|
|
2307
|
-
(
|
|
2308
|
-
} catch (
|
|
2307
|
+
(n = this.backgroundObject) == null || n.set({ customData: t }), this.editor.canvas.fire("editor:background:changed", { type: "color", color: e }), a.resumeHistory(), s || a.saveState();
|
|
2308
|
+
} catch (a) {
|
|
2309
2309
|
this.editor.errorManager.emitError({
|
|
2310
2310
|
code: "BACKGROUND_CREATION_FAILED",
|
|
2311
2311
|
origin: "BackgroundManager",
|
|
2312
2312
|
method: "setColorBackground",
|
|
2313
2313
|
message: "Не удалось установить цветовой фон",
|
|
2314
|
-
data: { error:
|
|
2314
|
+
data: { error: a }
|
|
2315
2315
|
});
|
|
2316
2316
|
}
|
|
2317
2317
|
}
|
|
@@ -2326,13 +2326,13 @@ class R {
|
|
|
2326
2326
|
customData: t = {},
|
|
2327
2327
|
withoutSave: s = !1
|
|
2328
2328
|
}) {
|
|
2329
|
-
var
|
|
2329
|
+
var n;
|
|
2330
2330
|
try {
|
|
2331
|
-
const { historyManager:
|
|
2332
|
-
if (
|
|
2333
|
-
const i =
|
|
2334
|
-
if (
|
|
2335
|
-
|
|
2331
|
+
const { historyManager: a } = this.editor, { backgroundObject: o } = this;
|
|
2332
|
+
if (a.suspendHistory(), o && o.backgroundType === "gradient") {
|
|
2333
|
+
const i = U._createFabricGradient(e);
|
|
2334
|
+
if (U._isGradientEqual(o.fill, i)) {
|
|
2335
|
+
a.resumeHistory();
|
|
2336
2336
|
return;
|
|
2337
2337
|
}
|
|
2338
2338
|
o.set({
|
|
@@ -2341,17 +2341,17 @@ class R {
|
|
|
2341
2341
|
}), this.editor.canvas.requestRenderAll();
|
|
2342
2342
|
} else
|
|
2343
2343
|
this._removeCurrentBackground(), this._createGradientBackground(e);
|
|
2344
|
-
(
|
|
2344
|
+
(n = this.backgroundObject) == null || n.set({ customData: t }), this.editor.canvas.fire("editor:background:changed", {
|
|
2345
2345
|
type: "gradient",
|
|
2346
2346
|
gradientParams: e
|
|
2347
|
-
}),
|
|
2348
|
-
} catch (
|
|
2347
|
+
}), a.resumeHistory(), s || a.saveState();
|
|
2348
|
+
} catch (a) {
|
|
2349
2349
|
this.editor.errorManager.emitError({
|
|
2350
2350
|
code: "BACKGROUND_CREATION_FAILED",
|
|
2351
2351
|
origin: "BackgroundManager",
|
|
2352
2352
|
method: "setGradientBackground",
|
|
2353
2353
|
message: "Не удалось установить градиентный фон",
|
|
2354
|
-
data: { error:
|
|
2354
|
+
data: { error: a }
|
|
2355
2355
|
});
|
|
2356
2356
|
}
|
|
2357
2357
|
}
|
|
@@ -2363,8 +2363,8 @@ class R {
|
|
|
2363
2363
|
angle: e,
|
|
2364
2364
|
startColor: t,
|
|
2365
2365
|
endColor: s,
|
|
2366
|
-
startPosition:
|
|
2367
|
-
endPosition:
|
|
2366
|
+
startPosition: n,
|
|
2367
|
+
endPosition: a,
|
|
2368
2368
|
customData: o = {},
|
|
2369
2369
|
withoutSave: i = !1
|
|
2370
2370
|
}) {
|
|
@@ -2374,8 +2374,8 @@ class R {
|
|
|
2374
2374
|
angle: e,
|
|
2375
2375
|
startColor: t,
|
|
2376
2376
|
endColor: s,
|
|
2377
|
-
startPosition:
|
|
2378
|
-
endPosition:
|
|
2377
|
+
startPosition: n,
|
|
2378
|
+
endPosition: a
|
|
2379
2379
|
},
|
|
2380
2380
|
customData: o,
|
|
2381
2381
|
withoutSave: i
|
|
@@ -2389,8 +2389,8 @@ class R {
|
|
|
2389
2389
|
centerX: e,
|
|
2390
2390
|
centerY: t,
|
|
2391
2391
|
radius: s,
|
|
2392
|
-
startColor:
|
|
2393
|
-
endColor:
|
|
2392
|
+
startColor: n,
|
|
2393
|
+
endColor: a,
|
|
2394
2394
|
startPosition: o,
|
|
2395
2395
|
endPosition: i,
|
|
2396
2396
|
customData: r = {},
|
|
@@ -2402,8 +2402,8 @@ class R {
|
|
|
2402
2402
|
centerX: e,
|
|
2403
2403
|
centerY: t,
|
|
2404
2404
|
radius: s,
|
|
2405
|
-
startColor:
|
|
2406
|
-
endColor:
|
|
2405
|
+
startColor: n,
|
|
2406
|
+
endColor: a,
|
|
2407
2407
|
startPosition: o,
|
|
2408
2408
|
endPosition: i
|
|
2409
2409
|
},
|
|
@@ -2417,26 +2417,26 @@ class R {
|
|
|
2417
2417
|
* @param options.imageUrl - URL изображения
|
|
2418
2418
|
* @param options.withoutSave - Если true, не сохранять состояние в историю
|
|
2419
2419
|
*/
|
|
2420
|
-
setImageBackground(
|
|
2421
|
-
return
|
|
2420
|
+
setImageBackground(n) {
|
|
2421
|
+
return p(this, arguments, function* ({
|
|
2422
2422
|
imageSource: e,
|
|
2423
2423
|
customData: t = {},
|
|
2424
2424
|
withoutSave: s = !1
|
|
2425
2425
|
}) {
|
|
2426
2426
|
try {
|
|
2427
|
-
const { historyManager:
|
|
2428
|
-
|
|
2427
|
+
const { historyManager: a } = this.editor;
|
|
2428
|
+
a.suspendHistory(), yield this._createImageBackground(e, t), this.editor.canvas.fire("editor:background:changed", {
|
|
2429
2429
|
type: "image",
|
|
2430
2430
|
imageSource: e,
|
|
2431
2431
|
backgroundObject: this.backgroundObject
|
|
2432
|
-
}),
|
|
2433
|
-
} catch (
|
|
2432
|
+
}), a.resumeHistory(), s || a.saveState();
|
|
2433
|
+
} catch (a) {
|
|
2434
2434
|
this.editor.errorManager.emitError({
|
|
2435
2435
|
code: "BACKGROUND_CREATION_FAILED",
|
|
2436
2436
|
origin: "BackgroundManager",
|
|
2437
2437
|
method: "setImageBackground",
|
|
2438
2438
|
message: "Не удалось установить изображение в качестве фона",
|
|
2439
|
-
data: { error:
|
|
2439
|
+
data: { error: a }
|
|
2440
2440
|
});
|
|
2441
2441
|
}
|
|
2442
2442
|
});
|
|
@@ -2468,8 +2468,8 @@ class R {
|
|
|
2468
2468
|
const { canvas: e, montageArea: t, historyManager: s } = this.editor;
|
|
2469
2469
|
if (!t || !this.backgroundObject) return;
|
|
2470
2470
|
s.suspendHistory(), this.editor.transformManager.fitObject({ object: this.backgroundObject, withoutSave: !0, type: "cover" });
|
|
2471
|
-
const
|
|
2472
|
-
this.backgroundObject && o !==
|
|
2471
|
+
const n = e.getObjects(), a = n.indexOf(t), o = n.indexOf(this.backgroundObject);
|
|
2472
|
+
this.backgroundObject && o !== a + 1 && e.moveObjectTo(this.backgroundObject, a + 1), e.requestRenderAll(), s.resumeHistory();
|
|
2473
2473
|
}
|
|
2474
2474
|
/**
|
|
2475
2475
|
* Создает цветовой фон.
|
|
@@ -2503,7 +2503,7 @@ class R {
|
|
|
2503
2503
|
backgroundType: "gradient",
|
|
2504
2504
|
backgroundId: `background-${A()}`
|
|
2505
2505
|
}, { withoutSelection: !0 }), this.refresh();
|
|
2506
|
-
const t =
|
|
2506
|
+
const t = U._createFabricGradient(e);
|
|
2507
2507
|
this.backgroundObject.set("fill", t), this.editor.canvas.requestRenderAll();
|
|
2508
2508
|
}
|
|
2509
2509
|
/**
|
|
@@ -2511,15 +2511,15 @@ class R {
|
|
|
2511
2511
|
* @param source - источник изображения (URL или File)
|
|
2512
2512
|
*/
|
|
2513
2513
|
_createImageBackground(e, t) {
|
|
2514
|
-
return
|
|
2515
|
-
var
|
|
2516
|
-
const { image: s } = (
|
|
2514
|
+
return p(this, null, function* () {
|
|
2515
|
+
var n;
|
|
2516
|
+
const { image: s } = (n = yield this.editor.imageManager.importImage({
|
|
2517
2517
|
source: e,
|
|
2518
2518
|
withoutSave: !0,
|
|
2519
2519
|
isBackground: !0,
|
|
2520
2520
|
withoutSelection: !0,
|
|
2521
2521
|
scale: "image-cover"
|
|
2522
|
-
})) != null ?
|
|
2522
|
+
})) != null ? n : {};
|
|
2523
2523
|
if (!s)
|
|
2524
2524
|
throw new Error("Не удалось загрузить изображение");
|
|
2525
2525
|
s.set({
|
|
@@ -2548,14 +2548,14 @@ class R {
|
|
|
2548
2548
|
const {
|
|
2549
2549
|
startColor: t,
|
|
2550
2550
|
endColor: s,
|
|
2551
|
-
startPosition:
|
|
2552
|
-
endPosition:
|
|
2551
|
+
startPosition: n = 0,
|
|
2552
|
+
endPosition: a = 100
|
|
2553
2553
|
} = e, o = [
|
|
2554
|
-
{ offset:
|
|
2555
|
-
{ offset:
|
|
2554
|
+
{ offset: n / 100, color: t },
|
|
2555
|
+
{ offset: a / 100, color: s }
|
|
2556
2556
|
];
|
|
2557
2557
|
if (e.type === "linear") {
|
|
2558
|
-
const l = e.angle * Math.PI / 180, u =
|
|
2558
|
+
const l = e.angle * Math.PI / 180, u = U._angleToCoords(l);
|
|
2559
2559
|
return new je({
|
|
2560
2560
|
type: "linear",
|
|
2561
2561
|
gradientUnits: "percentage",
|
|
@@ -2603,14 +2603,14 @@ class R {
|
|
|
2603
2603
|
*/
|
|
2604
2604
|
static _isGradientEqual(e, t) {
|
|
2605
2605
|
if (!e || !t || e.type !== t.type) return !1;
|
|
2606
|
-
const s = e.colorStops || [],
|
|
2607
|
-
return s.length !==
|
|
2608
|
-
const r =
|
|
2606
|
+
const s = e.colorStops || [], n = t.colorStops || [];
|
|
2607
|
+
return s.length !== n.length || !s.every((o, i) => {
|
|
2608
|
+
const r = n[i];
|
|
2609
2609
|
return o.color === r.color && Math.abs(o.offset - r.offset) < 1e-4;
|
|
2610
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;
|
|
2611
2611
|
}
|
|
2612
2612
|
}
|
|
2613
|
-
class
|
|
2613
|
+
class J {
|
|
2614
2614
|
constructor({ editor: e }) {
|
|
2615
2615
|
this.editor = e;
|
|
2616
2616
|
}
|
|
@@ -2622,13 +2622,13 @@ class K {
|
|
|
2622
2622
|
* @fires editor:object-bring-to-front
|
|
2623
2623
|
*/
|
|
2624
2624
|
bringToFront(e, { withoutSave: t } = {}) {
|
|
2625
|
-
const { canvas: s, historyManager:
|
|
2626
|
-
|
|
2627
|
-
const
|
|
2628
|
-
|
|
2625
|
+
const { canvas: s, historyManager: n } = this.editor;
|
|
2626
|
+
n.suspendHistory();
|
|
2627
|
+
const a = e || s.getActiveObject();
|
|
2628
|
+
a && (a instanceof y ? a.getObjects().forEach((o) => {
|
|
2629
2629
|
s.bringObjectToFront(o);
|
|
2630
|
-
}) : s.bringObjectToFront(
|
|
2631
|
-
object:
|
|
2630
|
+
}) : s.bringObjectToFront(a), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:object-bring-to-front", {
|
|
2631
|
+
object: a,
|
|
2632
2632
|
withoutSave: t
|
|
2633
2633
|
}));
|
|
2634
2634
|
}
|
|
@@ -2640,11 +2640,11 @@ class K {
|
|
|
2640
2640
|
* @fires editor:object-bring-forward
|
|
2641
2641
|
*/
|
|
2642
2642
|
bringForward(e, { withoutSave: t } = {}) {
|
|
2643
|
-
const { canvas: s, historyManager:
|
|
2644
|
-
|
|
2645
|
-
const
|
|
2646
|
-
|
|
2647
|
-
object:
|
|
2643
|
+
const { canvas: s, historyManager: n } = this.editor;
|
|
2644
|
+
n.suspendHistory();
|
|
2645
|
+
const a = e || s.getActiveObject();
|
|
2646
|
+
a && (a instanceof y ? J._moveSelectionForward(s, a) : s.bringObjectForward(a), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:object-bring-forward", {
|
|
2647
|
+
object: a,
|
|
2648
2648
|
withoutSave: t
|
|
2649
2649
|
}));
|
|
2650
2650
|
}
|
|
@@ -2658,21 +2658,21 @@ class K {
|
|
|
2658
2658
|
sendToBack(e, { withoutSave: t } = {}) {
|
|
2659
2659
|
const {
|
|
2660
2660
|
canvas: s,
|
|
2661
|
-
montageArea:
|
|
2662
|
-
historyManager:
|
|
2661
|
+
montageArea: n,
|
|
2662
|
+
historyManager: a,
|
|
2663
2663
|
interactionBlocker: { overlayMask: o },
|
|
2664
2664
|
backgroundManager: { backgroundObject: i }
|
|
2665
2665
|
} = this.editor;
|
|
2666
|
-
|
|
2666
|
+
a.suspendHistory();
|
|
2667
2667
|
const r = e || s.getActiveObject();
|
|
2668
2668
|
if (r) {
|
|
2669
|
-
if (r instanceof
|
|
2669
|
+
if (r instanceof y) {
|
|
2670
2670
|
const d = r.getObjects();
|
|
2671
2671
|
for (let h = d.length - 1; h >= 0; h -= 1)
|
|
2672
2672
|
s.sendObjectToBack(d[h]);
|
|
2673
2673
|
} else
|
|
2674
2674
|
s.sendObjectToBack(r);
|
|
2675
|
-
i && s.sendObjectToBack(i), s.sendObjectToBack(
|
|
2675
|
+
i && s.sendObjectToBack(i), s.sendObjectToBack(n), o && s.sendObjectToBack(o), s.renderAll(), a.resumeHistory(), t || a.saveState(), s.fire("editor:object-send-to-back", {
|
|
2676
2676
|
object: r,
|
|
2677
2677
|
withoutSave: t
|
|
2678
2678
|
});
|
|
@@ -2687,14 +2687,14 @@ class K {
|
|
|
2687
2687
|
sendBackwards(e, { withoutSave: t } = {}) {
|
|
2688
2688
|
const {
|
|
2689
2689
|
canvas: s,
|
|
2690
|
-
montageArea:
|
|
2691
|
-
historyManager:
|
|
2690
|
+
montageArea: n,
|
|
2691
|
+
historyManager: a,
|
|
2692
2692
|
interactionBlocker: { overlayMask: o },
|
|
2693
2693
|
backgroundManager: { backgroundObject: i }
|
|
2694
2694
|
} = this.editor;
|
|
2695
|
-
|
|
2695
|
+
a.suspendHistory();
|
|
2696
2696
|
const r = e || s.getActiveObject();
|
|
2697
|
-
r && (r instanceof
|
|
2697
|
+
r && (r instanceof y ? J._moveSelectionBackwards(s, r) : s.sendObjectBackwards(r), i && s.sendObjectToBack(i), s.sendObjectToBack(n), o && s.sendObjectToBack(o), s.renderAll(), a.resumeHistory(), t || a.saveState(), s.fire("editor:object-send-backwards", {
|
|
2698
2698
|
object: r,
|
|
2699
2699
|
withoutSave: t
|
|
2700
2700
|
}));
|
|
@@ -2706,15 +2706,15 @@ class K {
|
|
|
2706
2706
|
* @param activeSelection - активное выделение
|
|
2707
2707
|
*/
|
|
2708
2708
|
static _moveSelectionForward(e, t) {
|
|
2709
|
-
const s = e.getObjects(),
|
|
2710
|
-
if (!
|
|
2709
|
+
const s = e.getObjects(), n = t.getObjects();
|
|
2710
|
+
if (!n.some((i) => {
|
|
2711
2711
|
const r = s.indexOf(i);
|
|
2712
2712
|
for (let d = r + 1; d < s.length; d += 1)
|
|
2713
|
-
if (!
|
|
2713
|
+
if (!n.includes(s[d]))
|
|
2714
2714
|
return !0;
|
|
2715
2715
|
return !1;
|
|
2716
2716
|
})) return;
|
|
2717
|
-
|
|
2717
|
+
n.map((i) => ({ obj: i, index: s.indexOf(i) })).sort((i, r) => r.index - i.index).forEach((i) => {
|
|
2718
2718
|
e.bringObjectForward(i.obj);
|
|
2719
2719
|
});
|
|
2720
2720
|
}
|
|
@@ -2725,20 +2725,20 @@ class K {
|
|
|
2725
2725
|
* @param activeSelection - активное выделение
|
|
2726
2726
|
*/
|
|
2727
2727
|
static _moveSelectionBackwards(e, t) {
|
|
2728
|
-
const s = e.getObjects(),
|
|
2729
|
-
if (!
|
|
2728
|
+
const s = e.getObjects(), n = t.getObjects();
|
|
2729
|
+
if (!n.some((i) => {
|
|
2730
2730
|
const r = s.indexOf(i);
|
|
2731
2731
|
for (let d = r - 1; d >= 0; d -= 1)
|
|
2732
|
-
if (!
|
|
2732
|
+
if (!n.includes(s[d]))
|
|
2733
2733
|
return !0;
|
|
2734
2734
|
return !1;
|
|
2735
2735
|
})) return;
|
|
2736
|
-
|
|
2736
|
+
n.map((i) => ({ obj: i, index: s.indexOf(i) })).sort((i, r) => i.index - r.index).forEach((i) => {
|
|
2737
2737
|
e.sendObjectBackwards(i.obj);
|
|
2738
2738
|
});
|
|
2739
2739
|
}
|
|
2740
2740
|
}
|
|
2741
|
-
class
|
|
2741
|
+
class jt {
|
|
2742
2742
|
/**
|
|
2743
2743
|
* Менеджер фигур для редактора.
|
|
2744
2744
|
* @param options - Опции и настройки менеджера фигур.
|
|
@@ -2767,8 +2767,8 @@ class pt {
|
|
|
2767
2767
|
id: e = `rect-${A()}`,
|
|
2768
2768
|
left: t,
|
|
2769
2769
|
top: s,
|
|
2770
|
-
width:
|
|
2771
|
-
height:
|
|
2770
|
+
width: n = 100,
|
|
2771
|
+
height: a = 100,
|
|
2772
2772
|
fill: o = "blue"
|
|
2773
2773
|
} = l, i = V(l, [
|
|
2774
2774
|
"id",
|
|
@@ -2778,12 +2778,12 @@ class pt {
|
|
|
2778
2778
|
"height",
|
|
2779
2779
|
"fill"
|
|
2780
2780
|
]);
|
|
2781
|
-
const { canvas: u } = this.editor, g = new _e(
|
|
2781
|
+
const { canvas: u } = this.editor, g = new _e(v({
|
|
2782
2782
|
id: e,
|
|
2783
2783
|
left: t,
|
|
2784
2784
|
top: s,
|
|
2785
|
-
width:
|
|
2786
|
-
height:
|
|
2785
|
+
width: n,
|
|
2786
|
+
height: a,
|
|
2787
2787
|
fill: o
|
|
2788
2788
|
}, i));
|
|
2789
2789
|
return !t && !s && u.centerObject(g), d || (u.add(g), r || u.setActiveObject(g), u.renderAll()), g;
|
|
@@ -2809,8 +2809,8 @@ class pt {
|
|
|
2809
2809
|
id: e = `circle-${A()}`,
|
|
2810
2810
|
left: t,
|
|
2811
2811
|
top: s,
|
|
2812
|
-
radius:
|
|
2813
|
-
fill:
|
|
2812
|
+
radius: n = 50,
|
|
2813
|
+
fill: a = "green"
|
|
2814
2814
|
} = h, o = V(h, [
|
|
2815
2815
|
"id",
|
|
2816
2816
|
"left",
|
|
@@ -2818,12 +2818,12 @@ class pt {
|
|
|
2818
2818
|
"radius",
|
|
2819
2819
|
"fill"
|
|
2820
2820
|
]);
|
|
2821
|
-
const { canvas: l } = this.editor, u = new Be(
|
|
2821
|
+
const { canvas: l } = this.editor, u = new Be(v({
|
|
2822
2822
|
id: e,
|
|
2823
2823
|
left: t,
|
|
2824
2824
|
top: s,
|
|
2825
|
-
fill:
|
|
2826
|
-
radius:
|
|
2825
|
+
fill: a,
|
|
2826
|
+
radius: n
|
|
2827
2827
|
}, o));
|
|
2828
2828
|
return !t && !s && l.centerObject(u), r || (l.add(u), i || l.setActiveObject(u), l.renderAll()), u;
|
|
2829
2829
|
}
|
|
@@ -2849,8 +2849,8 @@ class pt {
|
|
|
2849
2849
|
id: e = `triangle-${A()}`,
|
|
2850
2850
|
left: t,
|
|
2851
2851
|
top: s,
|
|
2852
|
-
width:
|
|
2853
|
-
height:
|
|
2852
|
+
width: n = 100,
|
|
2853
|
+
height: a = 100,
|
|
2854
2854
|
fill: o = "yellow"
|
|
2855
2855
|
} = l, i = V(l, [
|
|
2856
2856
|
"id",
|
|
@@ -2860,13 +2860,13 @@ class pt {
|
|
|
2860
2860
|
"height",
|
|
2861
2861
|
"fill"
|
|
2862
2862
|
]);
|
|
2863
|
-
const { canvas: u } = this.editor, g = new xe(
|
|
2863
|
+
const { canvas: u } = this.editor, g = new xe(v({
|
|
2864
2864
|
id: e,
|
|
2865
2865
|
left: t,
|
|
2866
2866
|
top: s,
|
|
2867
2867
|
fill: o,
|
|
2868
|
-
width:
|
|
2869
|
-
height:
|
|
2868
|
+
width: n,
|
|
2869
|
+
height: a
|
|
2870
2870
|
}, i));
|
|
2871
2871
|
return !t && !s && u.centerObject(g), d || (u.add(g), r || u.setActiveObject(g), u.renderAll()), g;
|
|
2872
2872
|
}
|
|
@@ -2899,18 +2899,18 @@ class yt {
|
|
|
2899
2899
|
* Асинхронное клонирование для внутреннего буфера
|
|
2900
2900
|
*/
|
|
2901
2901
|
_cloneToInternalClipboard(e) {
|
|
2902
|
-
return
|
|
2902
|
+
return p(this, null, function* () {
|
|
2903
2903
|
const { canvas: t, errorManager: s } = this.editor;
|
|
2904
2904
|
try {
|
|
2905
|
-
const
|
|
2906
|
-
this.clipboard =
|
|
2907
|
-
} catch (
|
|
2905
|
+
const n = yield e.clone(["format"]);
|
|
2906
|
+
this.clipboard = n, t.fire("editor:object-copied", { object: n });
|
|
2907
|
+
} catch (n) {
|
|
2908
2908
|
s.emitError({
|
|
2909
2909
|
origin: "ClipboardManager",
|
|
2910
2910
|
method: "_cloneToInternalClipboard",
|
|
2911
2911
|
code: "CLONE_FAILED",
|
|
2912
2912
|
message: "Ошибка клонирования объекта для внутреннего буфера",
|
|
2913
|
-
data:
|
|
2913
|
+
data: n
|
|
2914
2914
|
});
|
|
2915
2915
|
}
|
|
2916
2916
|
});
|
|
@@ -2919,7 +2919,7 @@ class yt {
|
|
|
2919
2919
|
* Копирование в системный буфер обмена
|
|
2920
2920
|
*/
|
|
2921
2921
|
_copyToSystemClipboard(e) {
|
|
2922
|
-
return
|
|
2922
|
+
return p(this, null, function* () {
|
|
2923
2923
|
const { errorManager: t } = this.editor;
|
|
2924
2924
|
if (typeof ClipboardItem == "undefined" || !navigator.clipboard)
|
|
2925
2925
|
return t.emitWarning({
|
|
@@ -2929,8 +2929,8 @@ class yt {
|
|
|
2929
2929
|
message: "navigator.clipboard не поддерживается в этом браузере или отсутствует HTTPS-соединение."
|
|
2930
2930
|
}), !1;
|
|
2931
2931
|
try {
|
|
2932
|
-
const s = e.toObject(["format"]),
|
|
2933
|
-
return e.type === "image" ? this._copyImageToClipboard(e,
|
|
2932
|
+
const s = e.toObject(["format"]), n = JSON.stringify(s);
|
|
2933
|
+
return e.type === "image" ? this._copyImageToClipboard(e, n) : this._copyTextToClipboard(n);
|
|
2934
2934
|
} catch (s) {
|
|
2935
2935
|
return t.emitError({
|
|
2936
2936
|
origin: "ClipboardManager",
|
|
@@ -2946,12 +2946,12 @@ class yt {
|
|
|
2946
2946
|
* Копирование изображения в буфер обмена
|
|
2947
2947
|
*/
|
|
2948
2948
|
_copyImageToClipboard(e, t) {
|
|
2949
|
-
return
|
|
2949
|
+
return p(this, null, function* () {
|
|
2950
2950
|
try {
|
|
2951
|
-
const
|
|
2951
|
+
const n = e.toCanvasElement({ enableRetinaScaling: !1 }).toDataURL(), a = n.slice(5).split(";")[0], o = n.split(",")[1], i = atob(o), r = new Uint8Array(i.length);
|
|
2952
2952
|
for (let l = 0; l < i.length; l += 1)
|
|
2953
2953
|
r[l] = i.charCodeAt(l);
|
|
2954
|
-
const d = new Blob([r.buffer], { type:
|
|
2954
|
+
const d = new Blob([r.buffer], { type: a }), h = new ClipboardItem({ [a]: d });
|
|
2955
2955
|
return yield navigator.clipboard.write([h]), console.info("Image copied to clipboard successfully"), !0;
|
|
2956
2956
|
} catch (s) {
|
|
2957
2957
|
return this.editor.errorManager.emitWarning({
|
|
@@ -2968,9 +2968,9 @@ class yt {
|
|
|
2968
2968
|
* Копирование текста в буфер обмена
|
|
2969
2969
|
*/
|
|
2970
2970
|
_copyTextToClipboard(e) {
|
|
2971
|
-
return
|
|
2971
|
+
return p(this, null, function* () {
|
|
2972
2972
|
try {
|
|
2973
|
-
const t = `${
|
|
2973
|
+
const t = `${Ce}${e}`;
|
|
2974
2974
|
return yield navigator.clipboard.writeText(t), console.info("Text copied to clipboard successfully"), !0;
|
|
2975
2975
|
} catch (t) {
|
|
2976
2976
|
const { errorManager: s } = this.editor;
|
|
@@ -2990,9 +2990,9 @@ class yt {
|
|
|
2990
2990
|
*/
|
|
2991
2991
|
_addClonedObjectToCanvas(e) {
|
|
2992
2992
|
const { canvas: t, historyManager: s } = this.editor;
|
|
2993
|
-
if (t.discardActiveObject(), e instanceof
|
|
2994
|
-
s.suspendHistory(), e.canvas = t, e.forEachObject((
|
|
2995
|
-
t.add(
|
|
2993
|
+
if (t.discardActiveObject(), e instanceof y) {
|
|
2994
|
+
s.suspendHistory(), e.canvas = t, e.forEachObject((n) => {
|
|
2995
|
+
t.add(n);
|
|
2996
2996
|
}), t.setActiveObject(e), t.requestRenderAll(), s.resumeHistory(), s.saveState();
|
|
2997
2997
|
return;
|
|
2998
2998
|
}
|
|
@@ -3003,7 +3003,7 @@ class yt {
|
|
|
3003
3003
|
* @param source - источник изображения (data URL или URL)
|
|
3004
3004
|
*/
|
|
3005
3005
|
_handleImageImport(e) {
|
|
3006
|
-
return
|
|
3006
|
+
return p(this, null, function* () {
|
|
3007
3007
|
var s;
|
|
3008
3008
|
const { image: t } = (s = yield this.editor.imageManager.importImage({
|
|
3009
3009
|
source: e,
|
|
@@ -3019,25 +3019,30 @@ class yt {
|
|
|
3019
3019
|
* @fires editor:object-pasted
|
|
3020
3020
|
*/
|
|
3021
3021
|
copyPaste(e) {
|
|
3022
|
-
return
|
|
3022
|
+
return p(this, null, function* () {
|
|
3023
3023
|
const { canvas: t } = this.editor, s = e || t.getActiveObject();
|
|
3024
3024
|
if (!s || s.locked) return !1;
|
|
3025
3025
|
try {
|
|
3026
|
-
const
|
|
3027
|
-
return
|
|
3028
|
-
|
|
3029
|
-
|
|
3030
|
-
|
|
3026
|
+
const n = yield s.clone(["format"]);
|
|
3027
|
+
return n instanceof y && n.forEachObject((a) => {
|
|
3028
|
+
a.set({
|
|
3029
|
+
id: `${a.type}-${A()}`,
|
|
3030
|
+
evented: !0
|
|
3031
|
+
});
|
|
3032
|
+
}), n.set({
|
|
3033
|
+
id: `${n.type}-${A()}`,
|
|
3034
|
+
left: n.left + 10,
|
|
3035
|
+
top: n.top + 10,
|
|
3031
3036
|
evented: !0
|
|
3032
|
-
}), this._addClonedObjectToCanvas(
|
|
3033
|
-
} catch (
|
|
3034
|
-
const { errorManager:
|
|
3035
|
-
return
|
|
3037
|
+
}), this._addClonedObjectToCanvas(n), t.fire("editor:object-duplicated", { object: n }), !0;
|
|
3038
|
+
} catch (n) {
|
|
3039
|
+
const { errorManager: a } = this.editor;
|
|
3040
|
+
return a.emitError({
|
|
3036
3041
|
origin: "ClipboardManager",
|
|
3037
3042
|
method: "copyPaste",
|
|
3038
3043
|
code: "COPY_PASTE_FAILED",
|
|
3039
3044
|
message: "Ошибка создания копии объекта",
|
|
3040
|
-
data:
|
|
3045
|
+
data: n
|
|
3041
3046
|
}), !1;
|
|
3042
3047
|
}
|
|
3043
3048
|
});
|
|
@@ -3049,19 +3054,19 @@ class yt {
|
|
|
3049
3054
|
* @param event.clipboardData.items — элементы буфера обмена
|
|
3050
3055
|
*/
|
|
3051
3056
|
handlePasteEvent(t) {
|
|
3052
|
-
return
|
|
3057
|
+
return p(this, arguments, function* ({ clipboardData: e }) {
|
|
3053
3058
|
var r;
|
|
3054
3059
|
if (!((r = e == null ? void 0 : e.items) != null && r.length)) {
|
|
3055
3060
|
this.paste();
|
|
3056
3061
|
return;
|
|
3057
3062
|
}
|
|
3058
3063
|
const s = e.getData("text/plain");
|
|
3059
|
-
if (s && s.startsWith(
|
|
3064
|
+
if (s && s.startsWith(Ce)) {
|
|
3060
3065
|
this.paste();
|
|
3061
3066
|
return;
|
|
3062
3067
|
}
|
|
3063
|
-
const { items:
|
|
3064
|
-
if (
|
|
3068
|
+
const { items: n } = e, a = n[n.length - 1], o = a.getAsFile();
|
|
3069
|
+
if (a.type !== "text/html" && o) {
|
|
3065
3070
|
const d = new FileReader();
|
|
3066
3071
|
d.onload = (h) => {
|
|
3067
3072
|
h.target && this._handleImageImport(h.target.result).catch((l) => {
|
|
@@ -3100,12 +3105,17 @@ class yt {
|
|
|
3100
3105
|
* @fires editor:object-pasted
|
|
3101
3106
|
*/
|
|
3102
3107
|
paste() {
|
|
3103
|
-
return
|
|
3108
|
+
return p(this, null, function* () {
|
|
3104
3109
|
const { canvas: e } = this.editor;
|
|
3105
3110
|
if (!this.clipboard) return !1;
|
|
3106
3111
|
try {
|
|
3107
3112
|
const t = yield this.clipboard.clone(["format"]);
|
|
3108
|
-
return e.discardActiveObject(), t.
|
|
3113
|
+
return e.discardActiveObject(), t instanceof y && t.forEachObject((s) => {
|
|
3114
|
+
s.set({
|
|
3115
|
+
id: `${s.type}-${A()}`,
|
|
3116
|
+
evented: !0
|
|
3117
|
+
});
|
|
3118
|
+
}), t.set({
|
|
3109
3119
|
id: `${t.type}-${A()}`,
|
|
3110
3120
|
left: t.left + 10,
|
|
3111
3121
|
top: t.top + 10,
|
|
@@ -3124,7 +3134,7 @@ class yt {
|
|
|
3124
3134
|
});
|
|
3125
3135
|
}
|
|
3126
3136
|
}
|
|
3127
|
-
class
|
|
3137
|
+
class q {
|
|
3128
3138
|
constructor({ editor: e }) {
|
|
3129
3139
|
this.editor = e;
|
|
3130
3140
|
}
|
|
@@ -3137,7 +3147,7 @@ class J {
|
|
|
3137
3147
|
* @fires editor:object-locked
|
|
3138
3148
|
*/
|
|
3139
3149
|
lockObject({ object: e, skipInnerObjects: t, withoutSave: s } = {}) {
|
|
3140
|
-
const { canvas:
|
|
3150
|
+
const { canvas: n, historyManager: a } = this.editor, o = e || n.getActiveObject();
|
|
3141
3151
|
if (!o || o.locked) return;
|
|
3142
3152
|
const i = {
|
|
3143
3153
|
lockMovementX: !0,
|
|
@@ -3149,9 +3159,9 @@ class J {
|
|
|
3149
3159
|
lockSkewingY: !0,
|
|
3150
3160
|
locked: !0
|
|
3151
3161
|
};
|
|
3152
|
-
o.set(i), !t &&
|
|
3162
|
+
o.set(i), !t && q._isGroupOrSelection(o) && o.getObjects().forEach((d) => {
|
|
3153
3163
|
d.set(i);
|
|
3154
|
-
}),
|
|
3164
|
+
}), n.renderAll(), s || a.saveState(), n.fire("editor:object-locked", {
|
|
3155
3165
|
object: o,
|
|
3156
3166
|
skipInnerObjects: t,
|
|
3157
3167
|
withoutSave: s
|
|
@@ -3165,8 +3175,8 @@ class J {
|
|
|
3165
3175
|
* @fires editor:object-unlocked
|
|
3166
3176
|
*/
|
|
3167
3177
|
unlockObject({ object: e, withoutSave: t } = {}) {
|
|
3168
|
-
const { canvas: s, historyManager:
|
|
3169
|
-
if (!
|
|
3178
|
+
const { canvas: s, historyManager: n } = this.editor, a = e || s.getActiveObject();
|
|
3179
|
+
if (!a) return;
|
|
3170
3180
|
const o = {
|
|
3171
3181
|
lockMovementX: !1,
|
|
3172
3182
|
lockMovementY: !1,
|
|
@@ -3177,15 +3187,15 @@ class J {
|
|
|
3177
3187
|
lockSkewingY: !1,
|
|
3178
3188
|
locked: !1
|
|
3179
3189
|
};
|
|
3180
|
-
|
|
3190
|
+
a.set(o), q._isGroupOrSelection(a) && a.getObjects().forEach((i) => {
|
|
3181
3191
|
i.set(o);
|
|
3182
|
-
}), s.renderAll(), t ||
|
|
3183
|
-
object:
|
|
3192
|
+
}), s.renderAll(), t || n.saveState(), s.fire("editor:object-unlocked", {
|
|
3193
|
+
object: a,
|
|
3184
3194
|
withoutSave: t
|
|
3185
3195
|
});
|
|
3186
3196
|
}
|
|
3187
3197
|
static _isGroupOrSelection(e) {
|
|
3188
|
-
return e instanceof
|
|
3198
|
+
return e instanceof y || e instanceof R;
|
|
3189
3199
|
}
|
|
3190
3200
|
}
|
|
3191
3201
|
class It {
|
|
@@ -3193,55 +3203,100 @@ class It {
|
|
|
3193
3203
|
this.editor = e;
|
|
3194
3204
|
}
|
|
3195
3205
|
/**
|
|
3196
|
-
*
|
|
3197
|
-
* @
|
|
3198
|
-
* @param options.withoutSave - Не сохранять состояние
|
|
3199
|
-
* @param options.object - массив объектов для группировки
|
|
3200
|
-
* @fires editor:objects-grouped
|
|
3206
|
+
* Получить объекты для группировки
|
|
3207
|
+
* @private
|
|
3201
3208
|
*/
|
|
3209
|
+
_getObjectsToGroup(e) {
|
|
3210
|
+
if (Array.isArray(e))
|
|
3211
|
+
return e.length > 0 ? e : null;
|
|
3212
|
+
const t = e || this.editor.canvas.getActiveObject();
|
|
3213
|
+
return !t || !(t instanceof y) ? null : t.getObjects();
|
|
3214
|
+
}
|
|
3215
|
+
/**
|
|
3216
|
+
* Получить группы для разгруппировки
|
|
3217
|
+
* @private
|
|
3218
|
+
*/
|
|
3219
|
+
_getGroupsToUngroup(e) {
|
|
3220
|
+
if (Array.isArray(e)) {
|
|
3221
|
+
const s = e.filter((n) => n instanceof R);
|
|
3222
|
+
return s.length > 0 ? s : null;
|
|
3223
|
+
}
|
|
3224
|
+
if (e instanceof y) {
|
|
3225
|
+
const s = e.getObjects().filter((n) => n instanceof R);
|
|
3226
|
+
return s.length > 0 ? s : null;
|
|
3227
|
+
}
|
|
3228
|
+
const t = e || this.editor.canvas.getActiveObject();
|
|
3229
|
+
if (!t) return null;
|
|
3230
|
+
if (t instanceof y) {
|
|
3231
|
+
const s = t.getObjects().filter((n) => n instanceof R);
|
|
3232
|
+
return s.length > 0 ? s : null;
|
|
3233
|
+
}
|
|
3234
|
+
return t instanceof R ? [t] : null;
|
|
3235
|
+
}
|
|
3236
|
+
/**
|
|
3237
|
+
* Группировка объектов
|
|
3238
|
+
* @param options
|
|
3239
|
+
* @param options.target - объект ActiveSelection или массив объектов для группировки
|
|
3240
|
+
* @param options.withoutSave - Не сохранять состояние
|
|
3241
|
+
* @fires editor:objects-grouped
|
|
3242
|
+
*/
|
|
3202
3243
|
group({
|
|
3203
|
-
|
|
3204
|
-
withoutSave: t
|
|
3244
|
+
target: e,
|
|
3245
|
+
withoutSave: t = !1
|
|
3205
3246
|
} = {}) {
|
|
3206
|
-
const { canvas: s, historyManager:
|
|
3207
|
-
a
|
|
3208
|
-
|
|
3209
|
-
|
|
3210
|
-
|
|
3211
|
-
|
|
3212
|
-
|
|
3213
|
-
|
|
3214
|
-
|
|
3215
|
-
|
|
3247
|
+
const { canvas: s, historyManager: n } = this.editor, a = this._getObjectsToGroup(e);
|
|
3248
|
+
if (!a) return null;
|
|
3249
|
+
try {
|
|
3250
|
+
n.suspendHistory();
|
|
3251
|
+
const o = new R(a, {
|
|
3252
|
+
id: `group-${A()}`
|
|
3253
|
+
});
|
|
3254
|
+
a.forEach((r) => s.remove(r)), s.add(o), s.setActiveObject(o), s.requestRenderAll();
|
|
3255
|
+
const i = {
|
|
3256
|
+
group: o,
|
|
3257
|
+
withoutSave: t
|
|
3258
|
+
};
|
|
3259
|
+
return s.fire("editor:objects-grouped", i), i;
|
|
3260
|
+
} finally {
|
|
3261
|
+
n.resumeHistory(), t || n.saveState();
|
|
3262
|
+
}
|
|
3216
3263
|
}
|
|
3217
3264
|
/**
|
|
3218
|
-
|
|
3219
|
-
|
|
3220
|
-
|
|
3221
|
-
|
|
3222
|
-
|
|
3223
|
-
|
|
3224
|
-
|
|
3265
|
+
* Разгруппировка объектов
|
|
3266
|
+
* @param options
|
|
3267
|
+
* @param options.target - объект Group, массив групп или ActiveSelection с группами для разгруппировки
|
|
3268
|
+
* @param options.withoutSave - Не сохранять состояние
|
|
3269
|
+
* @returns данные о разгруппировке или null, если нет групп для разгруппировки
|
|
3270
|
+
* @fires editor:objects-ungrouped
|
|
3271
|
+
*/
|
|
3225
3272
|
ungroup({
|
|
3226
|
-
|
|
3227
|
-
withoutSave: t
|
|
3273
|
+
target: e,
|
|
3274
|
+
withoutSave: t = !1
|
|
3228
3275
|
} = {}) {
|
|
3229
|
-
const { canvas: s, historyManager:
|
|
3230
|
-
if (!
|
|
3231
|
-
|
|
3232
|
-
|
|
3233
|
-
|
|
3234
|
-
|
|
3235
|
-
|
|
3236
|
-
|
|
3237
|
-
|
|
3238
|
-
|
|
3239
|
-
|
|
3240
|
-
|
|
3241
|
-
|
|
3242
|
-
|
|
3243
|
-
|
|
3244
|
-
|
|
3276
|
+
const { canvas: s, historyManager: n } = this.editor, a = this._getGroupsToUngroup(e);
|
|
3277
|
+
if (!a) return null;
|
|
3278
|
+
try {
|
|
3279
|
+
n.suspendHistory();
|
|
3280
|
+
const o = [];
|
|
3281
|
+
a.forEach((d) => {
|
|
3282
|
+
const h = d.removeAll();
|
|
3283
|
+
s.remove(d), h.forEach((l) => {
|
|
3284
|
+
s.add(l), o.push(l);
|
|
3285
|
+
});
|
|
3286
|
+
});
|
|
3287
|
+
const i = new y(o, {
|
|
3288
|
+
canvas: s
|
|
3289
|
+
});
|
|
3290
|
+
s.setActiveObject(i), s.requestRenderAll();
|
|
3291
|
+
const r = {
|
|
3292
|
+
selection: i,
|
|
3293
|
+
ungroupedObjects: o,
|
|
3294
|
+
withoutSave: t
|
|
3295
|
+
};
|
|
3296
|
+
return s.fire("editor:objects-ungrouped", r), r;
|
|
3297
|
+
} finally {
|
|
3298
|
+
n.resumeHistory(), t || n.saveState();
|
|
3299
|
+
}
|
|
3245
3300
|
}
|
|
3246
3301
|
}
|
|
3247
3302
|
class vt {
|
|
@@ -3255,8 +3310,8 @@ class vt {
|
|
|
3255
3310
|
selectAll() {
|
|
3256
3311
|
const { canvas: e, canvasManager: t, objectLockManager: s } = this.editor;
|
|
3257
3312
|
e.discardActiveObject();
|
|
3258
|
-
const
|
|
3259
|
-
|
|
3313
|
+
const n = t.getObjects(), a = n.some((i) => i.locked), o = n.length > 1 ? new y(t.getObjects(), { canvas: e }) : n[0];
|
|
3314
|
+
a && s.lockObject({ object: o, skipInnerObjects: !0, withoutSave: !0 }), e.setActiveObject(o), e.requestRenderAll(), e.fire("editor:all-objects-selected", { selected: o });
|
|
3260
3315
|
}
|
|
3261
3316
|
}
|
|
3262
3317
|
class le {
|
|
@@ -3277,11 +3332,11 @@ class le {
|
|
|
3277
3332
|
* @returns массив всех удаленных объектов (включая саму группу)
|
|
3278
3333
|
*/
|
|
3279
3334
|
_handleGroupDeletion(e) {
|
|
3280
|
-
var
|
|
3281
|
-
const { groupingManager: t } = this.editor, { ungroupedObjects: s = [] } = (
|
|
3335
|
+
var n;
|
|
3336
|
+
const { groupingManager: t } = this.editor, { ungroupedObjects: s = [] } = (n = t.ungroup({
|
|
3282
3337
|
object: e,
|
|
3283
3338
|
withoutSave: !0
|
|
3284
|
-
})) != null ?
|
|
3339
|
+
})) != null ? n : {};
|
|
3285
3340
|
return this.deleteSelectedObjects({
|
|
3286
3341
|
objects: s,
|
|
3287
3342
|
withoutSave: !0,
|
|
@@ -3301,9 +3356,9 @@ class le {
|
|
|
3301
3356
|
withoutSave: t = !1,
|
|
3302
3357
|
_isRecursiveCall: s = !1
|
|
3303
3358
|
} = {}) {
|
|
3304
|
-
const { canvas:
|
|
3359
|
+
const { canvas: n, historyManager: a } = this.editor, i = (e || n.getActiveObjects()).filter((h) => !h.locked);
|
|
3305
3360
|
if (!(i != null && i.length)) return null;
|
|
3306
|
-
s ||
|
|
3361
|
+
s || a.suspendHistory();
|
|
3307
3362
|
const r = [];
|
|
3308
3363
|
if (i.forEach((h) => {
|
|
3309
3364
|
if (le._isUngroupableGroup(h)) {
|
|
@@ -3311,14 +3366,14 @@ class le {
|
|
|
3311
3366
|
r.push(...l);
|
|
3312
3367
|
return;
|
|
3313
3368
|
}
|
|
3314
|
-
|
|
3369
|
+
n.remove(h), r.push(h);
|
|
3315
3370
|
}), s) return null;
|
|
3316
|
-
|
|
3371
|
+
n.discardActiveObject(), n.renderAll(), a.resumeHistory(), t || a.saveState();
|
|
3317
3372
|
const d = {
|
|
3318
3373
|
objects: r,
|
|
3319
3374
|
withoutSave: t
|
|
3320
3375
|
};
|
|
3321
|
-
return
|
|
3376
|
+
return n.fire("editor:objects-deleted", d), d;
|
|
3322
3377
|
}
|
|
3323
3378
|
}
|
|
3324
3379
|
const At = {
|
|
@@ -3420,7 +3475,7 @@ const At = {
|
|
|
3420
3475
|
INVALID_GRADIENT_FORMAT: "INVALID_GRADIENT_FORMAT"
|
|
3421
3476
|
}
|
|
3422
3477
|
};
|
|
3423
|
-
class
|
|
3478
|
+
class ee {
|
|
3424
3479
|
constructor({ editor: e }) {
|
|
3425
3480
|
this._buffer = [], this.editor = e;
|
|
3426
3481
|
}
|
|
@@ -3446,22 +3501,22 @@ class q {
|
|
|
3446
3501
|
* @param options.message — текст ошибки (опционально, если не передан, то используется код ошибки)
|
|
3447
3502
|
* @fires editor:error
|
|
3448
3503
|
*/
|
|
3449
|
-
emitError({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, data:
|
|
3450
|
-
if (!
|
|
3504
|
+
emitError({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, data: n, message: a }) {
|
|
3505
|
+
if (!ee.isValidErrorCode(s)) {
|
|
3451
3506
|
console.warn("Неизвестный код ошибки: ", { code: s, origin: e, method: t });
|
|
3452
3507
|
return;
|
|
3453
3508
|
}
|
|
3454
3509
|
if (!s) return;
|
|
3455
|
-
const o =
|
|
3456
|
-
console.error(`${e}. ${t}. ${s}. ${o}`,
|
|
3510
|
+
const o = a || s;
|
|
3511
|
+
console.error(`${e}. ${t}. ${s}. ${o}`, n);
|
|
3457
3512
|
const i = {
|
|
3458
3513
|
code: s,
|
|
3459
3514
|
origin: e,
|
|
3460
3515
|
method: t,
|
|
3461
3516
|
message: o,
|
|
3462
|
-
data:
|
|
3517
|
+
data: n
|
|
3463
3518
|
};
|
|
3464
|
-
this._buffer.push(
|
|
3519
|
+
this._buffer.push(v({
|
|
3465
3520
|
type: "editor:error"
|
|
3466
3521
|
}, i)), this.editor.canvas.fire("editor:error", i);
|
|
3467
3522
|
}
|
|
@@ -3475,21 +3530,21 @@ class q {
|
|
|
3475
3530
|
* @param options.message — текст предупреждения (опционально, если не передан, то используется код предупреждения)
|
|
3476
3531
|
* @fires editor:warning
|
|
3477
3532
|
*/
|
|
3478
|
-
emitWarning({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, message:
|
|
3479
|
-
if (!
|
|
3533
|
+
emitWarning({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, message: n, data: a }) {
|
|
3534
|
+
if (!ee.isValidErrorCode(s)) {
|
|
3480
3535
|
console.warn("Неизвестный код предупреждения: ", { code: s, origin: e, method: t });
|
|
3481
3536
|
return;
|
|
3482
3537
|
}
|
|
3483
|
-
const o =
|
|
3484
|
-
console.warn(`${e}. ${t}. ${s}. ${o}`,
|
|
3538
|
+
const o = n || s;
|
|
3539
|
+
console.warn(`${e}. ${t}. ${s}. ${o}`, a);
|
|
3485
3540
|
const i = {
|
|
3486
3541
|
code: s,
|
|
3487
3542
|
origin: e,
|
|
3488
3543
|
method: t,
|
|
3489
3544
|
message: o,
|
|
3490
|
-
data:
|
|
3545
|
+
data: a
|
|
3491
3546
|
};
|
|
3492
|
-
this._buffer.push(
|
|
3547
|
+
this._buffer.push(v({
|
|
3493
3548
|
type: "editor:warning"
|
|
3494
3549
|
}, i)), this.editor.canvas.fire("editor:warning", i);
|
|
3495
3550
|
}
|
|
@@ -3517,13 +3572,13 @@ class he {
|
|
|
3517
3572
|
* @fires editor:ready
|
|
3518
3573
|
*/
|
|
3519
3574
|
init() {
|
|
3520
|
-
return
|
|
3575
|
+
return p(this, null, function* () {
|
|
3521
3576
|
const {
|
|
3522
3577
|
editorContainerWidth: e,
|
|
3523
3578
|
editorContainerHeight: t,
|
|
3524
3579
|
canvasWrapperWidth: s,
|
|
3525
|
-
canvasWrapperHeight:
|
|
3526
|
-
canvasCSSWidth:
|
|
3580
|
+
canvasWrapperHeight: n,
|
|
3581
|
+
canvasCSSWidth: a,
|
|
3527
3582
|
canvasCSSHeight: o,
|
|
3528
3583
|
initialImage: i,
|
|
3529
3584
|
initialStateJSON: r,
|
|
@@ -3531,7 +3586,7 @@ class he {
|
|
|
3531
3586
|
showRotationAngle: h,
|
|
3532
3587
|
_onReadyCallback: l
|
|
3533
3588
|
} = this.options;
|
|
3534
|
-
if (Je.apply(), this.canvas = new Re(this.containerId, this.options), this.moduleLoader = new Ye(), this.workerManager = new We(), this.errorManager = new
|
|
3589
|
+
if (Je.apply(), this.canvas = new Re(this.containerId, this.options), this.moduleLoader = new Ye(), this.workerManager = new We(), this.errorManager = new ee({ editor: this }), this.historyManager = new K({ 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 J({ editor: this }), this.shapeManager = new jt({ editor: this }), this.interactionBlocker = new pt({ editor: this }), this.backgroundManager = new U({ editor: this }), this.clipboardManager = new yt({ editor: this }), this.objectLockManager = new q({ 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 W({ editor: this, options: this.options }), this.canvasManager.setEditorContainerWidth(e), this.canvasManager.setEditorContainerHeight(t), this.canvasManager.setCanvasWrapperWidth(s), this.canvasManager.setCanvasWrapperHeight(n), this.canvasManager.setCanvasCSSWidth(a), this.canvasManager.setCanvasCSSHeight(o), this.canvasManager.updateCanvas(), this.transformManager.calculateAndApplyDefaultZoom(), i != null && i.source) {
|
|
3535
3590
|
const {
|
|
3536
3591
|
source: u,
|
|
3537
3592
|
scale: g = `image-${d}`,
|
|
@@ -3701,13 +3756,13 @@ const Ct = {
|
|
|
3701
3756
|
keyboardIgnoreSelectors: []
|
|
3702
3757
|
};
|
|
3703
3758
|
function wt(c, e = {}) {
|
|
3704
|
-
const t =
|
|
3759
|
+
const t = v(v({}, Ct), e), s = document.getElementById(c);
|
|
3705
3760
|
if (!s)
|
|
3706
3761
|
return Promise.reject(new Error(`Контейнер с ID "${c}" не найден.`));
|
|
3707
|
-
const
|
|
3708
|
-
return
|
|
3709
|
-
t._onReadyCallback =
|
|
3710
|
-
const o = new he(
|
|
3762
|
+
const n = document.createElement("canvas");
|
|
3763
|
+
return n.id = `${c}-canvas`, s.appendChild(n), t.editorContainer = s, new Promise((a) => {
|
|
3764
|
+
t._onReadyCallback = a;
|
|
3765
|
+
const o = new he(n.id, t);
|
|
3711
3766
|
window[c] = o;
|
|
3712
3767
|
});
|
|
3713
3768
|
}
|