@anu3ev/fabric-image-editor 0.1.72 → 0.1.74
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/LICENSE +21 -0
- package/dist/main.js +1115 -719
- package/package.json +1 -1
- package/readme.md +338 -30
package/dist/main.js
CHANGED
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
1
|
+
var ve = Object.defineProperty, Ae = Object.defineProperties;
|
|
2
|
+
var Ce = Object.getOwnPropertyDescriptors;
|
|
3
|
+
var W = Object.getOwnPropertySymbols;
|
|
4
|
+
var he = Object.prototype.hasOwnProperty, ge = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var le = (r, e, t) => e in r ? ve(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, I = (r, e) => {
|
|
6
6
|
for (var t in e || (e = {}))
|
|
7
|
-
|
|
8
|
-
if (
|
|
9
|
-
for (var t of
|
|
10
|
-
|
|
7
|
+
he.call(e, t) && le(r, t, e[t]);
|
|
8
|
+
if (W)
|
|
9
|
+
for (var t of W(e))
|
|
10
|
+
ge.call(e, t) && le(r, t, e[t]);
|
|
11
11
|
return r;
|
|
12
|
-
},
|
|
13
|
-
var
|
|
12
|
+
}, ue = (r, e) => Ae(r, Ce(e));
|
|
13
|
+
var F = (r, e) => {
|
|
14
14
|
var t = {};
|
|
15
15
|
for (var s in r)
|
|
16
|
-
|
|
17
|
-
if (r != null &&
|
|
18
|
-
for (var s of
|
|
19
|
-
e.indexOf(s) < 0 &&
|
|
16
|
+
he.call(r, s) && e.indexOf(s) < 0 && (t[s] = r[s]);
|
|
17
|
+
if (r != null && W)
|
|
18
|
+
for (var s of W(r))
|
|
19
|
+
e.indexOf(s) < 0 && ge.call(r, s) && (t[s] = r[s]);
|
|
20
20
|
return t;
|
|
21
21
|
};
|
|
22
|
-
var
|
|
23
|
-
var
|
|
22
|
+
var y = (r, e, t) => new Promise((s, a) => {
|
|
23
|
+
var n = (c) => {
|
|
24
24
|
try {
|
|
25
|
-
|
|
26
|
-
} catch (
|
|
27
|
-
|
|
25
|
+
i(t.next(c));
|
|
26
|
+
} catch (d) {
|
|
27
|
+
a(d);
|
|
28
28
|
}
|
|
29
|
-
},
|
|
29
|
+
}, o = (c) => {
|
|
30
30
|
try {
|
|
31
|
-
|
|
32
|
-
} catch (
|
|
33
|
-
|
|
31
|
+
i(t.throw(c));
|
|
32
|
+
} catch (d) {
|
|
33
|
+
a(d);
|
|
34
34
|
}
|
|
35
|
-
},
|
|
36
|
-
|
|
35
|
+
}, i = (c) => c.done ? s(c.value) : Promise.resolve(c.value).then(n, o);
|
|
36
|
+
i((t = t.apply(r, e)).next());
|
|
37
37
|
});
|
|
38
|
-
import { ActiveSelection as
|
|
39
|
-
import { create as
|
|
40
|
-
import
|
|
41
|
-
var
|
|
38
|
+
import { ActiveSelection as v, util as P, controlsUtils as Se, InteractiveFabricObject as Ee, loadSVGFromURL as De, FabricImage as z, Point as G, Gradient as Me, Rect as Ne, Circle as Oe, Triangle as Le, Group as q, Canvas as we, Pattern as Te } from "fabric";
|
|
39
|
+
import { create as ke } from "jsondiffpatch";
|
|
40
|
+
import Be from "diff-match-patch";
|
|
41
|
+
var _e = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", A = function() {
|
|
42
42
|
for (var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 21, t = "", s = crypto.getRandomValues(new Uint8Array(e |= 0)); e--; )
|
|
43
|
-
t +=
|
|
43
|
+
t += _e[s[e] & 63];
|
|
44
44
|
return t;
|
|
45
45
|
};
|
|
46
|
-
class
|
|
46
|
+
class Y {
|
|
47
47
|
/**
|
|
48
48
|
* Конструктор принимает редактор и опции.
|
|
49
49
|
* @param params
|
|
@@ -61,7 +61,7 @@ class Z {
|
|
|
61
61
|
* @param params.options.adaptCanvasToContainerOnResize — адаптировать канвас к размерам контейнера при изменении размеров окна
|
|
62
62
|
*/
|
|
63
63
|
constructor({ editor: e, options: t = {} }) {
|
|
64
|
-
this.isDragging = !1, this.lastMouseX = 0, this.lastMouseY = 0, this.isUndoRedoKeyPressed = !1, this.isSpacePressed = !1, this.savedSelection = [], this.canvasDragging = !1, this.mouseWheelZooming = !1, this.bringToFrontOnSelection = !1, this.resetObjectFitByDoubleClick = !1, this.copyObjectsByHotkey = !1, this.pasteImageFromClipboard = !1, this.undoRedoByHotKeys = !1, this.selectAllByHotkey = !1, this.deleteObjectsByHotkey = !1, this.adaptCanvasToContainerOnResize = !1, this.editor = e, this.canvas = e.canvas, this.options = t, this.handleContainerResizeBound =
|
|
64
|
+
this.isDragging = !1, this.lastMouseX = 0, this.lastMouseY = 0, this.isUndoRedoKeyPressed = !1, this.isSpacePressed = !1, this.savedSelection = [], this.canvasDragging = !1, this.mouseWheelZooming = !1, this.bringToFrontOnSelection = !1, this.resetObjectFitByDoubleClick = !1, this.copyObjectsByHotkey = !1, this.pasteImageFromClipboard = !1, this.undoRedoByHotKeys = !1, this.selectAllByHotkey = !1, this.deleteObjectsByHotkey = !1, this.adaptCanvasToContainerOnResize = !1, this.editor = e, this.canvas = e.canvas, this.options = t, this.handleContainerResizeBound = Y.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 = Y.debounce(this.handleObjectModifiedHistory.bind(this), 300), this.handleObjectRotatingHistoryBound = Y.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 Z {
|
|
|
71
71
|
adaptCanvasToContainerOnResize: e,
|
|
72
72
|
canvasDragging: t,
|
|
73
73
|
mouseWheelZooming: s,
|
|
74
|
-
bringToFrontOnSelection:
|
|
75
|
-
copyObjectsByHotkey:
|
|
76
|
-
pasteImageFromClipboard:
|
|
77
|
-
undoRedoByHotKeys:
|
|
78
|
-
selectAllByHotkey:
|
|
79
|
-
deleteObjectsByHotkey:
|
|
74
|
+
bringToFrontOnSelection: a,
|
|
75
|
+
copyObjectsByHotkey: n,
|
|
76
|
+
pasteImageFromClipboard: o,
|
|
77
|
+
undoRedoByHotKeys: i,
|
|
78
|
+
selectAllByHotkey: c,
|
|
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), a && (this.canvas.on("selection:created", this.handleBringToFrontBound), this.canvas.on("selection:updated", this.handleBringToFrontBound)), h && this.canvas.on("mouse:dblclick", this.handleResetObjectFitBound), e && window.addEventListener("resize", this.handleContainerResizeBound, { capture: !0 }), n && document.addEventListener("keydown", this.handleCopyEventBound, { capture: !0 }), o && document.addEventListener("paste", this.handlePasteEventBound, { capture: !0 }), i && (document.addEventListener("keydown", this.handleUndoRedoEventBound, { capture: !0 }), document.addEventListener("keyup", this.handleUndoRedoKeyUpBound, { capture: !0 })), c && document.addEventListener("keydown", this.handleSelectAllEventBound, { capture: !0 }), d && document.addEventListener("keydown", this.handleDeleteObjectsEventBound, { capture: !0 }), this.canvas.on("object:modified", this.handleObjectModifiedHistoryBound), this.canvas.on("object:rotating", this.handleObjectRotatingHistoryBound), this.canvas.on("object:added", this.handleObjectAddedHistoryBound), this.canvas.on("object:removed", this.handleObjectRemovedHistoryBound), this.canvas.on("object:added", this.handleOverlayUpdateBound), this.canvas.on("selection:created", this.handleOverlayUpdateBound), this.canvas.on("selection:created", this.handleLockedSelectionBound), this.canvas.on("selection:updated", this.handleLockedSelectionBound), this.canvas.on("object:added", this.handleBackgroundUpdateBound), this.canvas.on("selection:created", this.handleBackgroundUpdateBound);
|
|
83
83
|
}
|
|
84
84
|
/**
|
|
85
85
|
* При массовом выделении объектов удаляем из него залоченные.
|
|
@@ -89,31 +89,31 @@ class Z {
|
|
|
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:
|
|
93
|
-
(
|
|
92
|
+
const { lockedObjects: s, unlockedObjects: a } = e.reduce(
|
|
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 (a.length > 0) {
|
|
98
|
+
if (a.length === 1)
|
|
99
|
+
this.canvas.setActiveObject(a[0]);
|
|
100
100
|
else {
|
|
101
|
-
const
|
|
101
|
+
const o = new v(a, {
|
|
102
102
|
canvas: this.canvas
|
|
103
103
|
});
|
|
104
|
-
this.canvas.setActiveObject(
|
|
104
|
+
this.canvas.setActiveObject(o);
|
|
105
105
|
}
|
|
106
106
|
this.canvas.requestRenderAll();
|
|
107
107
|
return;
|
|
108
108
|
}
|
|
109
|
-
const
|
|
109
|
+
const n = new v(e, {
|
|
110
110
|
canvas: this.canvas
|
|
111
111
|
});
|
|
112
112
|
this.editor.objectLockManager.lockObject({
|
|
113
|
-
object:
|
|
113
|
+
object: n,
|
|
114
114
|
skipInnerObjects: !0,
|
|
115
115
|
withoutSave: !0
|
|
116
|
-
}), this.canvas.setActiveObject(
|
|
116
|
+
}), this.canvas.setActiveObject(n), this.canvas.requestRenderAll();
|
|
117
117
|
}
|
|
118
118
|
/**
|
|
119
119
|
* Обработчики для сохранения состояния редактора в истории.
|
|
@@ -138,13 +138,16 @@ class Z {
|
|
|
138
138
|
const { interactionBlocker: e } = this.editor;
|
|
139
139
|
!e.isBlocked || !e.overlayMask || this.editor.interactionBlocker.refresh();
|
|
140
140
|
}
|
|
141
|
+
handleBackgroundUpdate() {
|
|
142
|
+
this.editor.historyManager.skipHistory || this.editor.backgroundManager.refresh();
|
|
143
|
+
}
|
|
141
144
|
// --- Глобальные DOM-обработчики ---
|
|
142
145
|
/**
|
|
143
146
|
* Обработчик изменения размеров окна браузера.
|
|
144
147
|
* Адаптирует канвас к размерам контейнера, сохраняя позиции объектов.
|
|
145
148
|
*/
|
|
146
149
|
handleContainerResize() {
|
|
147
|
-
this.editor.canvasManager.updateCanvas();
|
|
150
|
+
this.editor.canvasManager.updateCanvas(), this.editor.backgroundManager.refresh();
|
|
148
151
|
}
|
|
149
152
|
/**
|
|
150
153
|
* Обработчик для Ctrl+C (копирование).
|
|
@@ -154,8 +157,8 @@ class Z {
|
|
|
154
157
|
* @param event.code — код клавиши
|
|
155
158
|
*/
|
|
156
159
|
handleCopyEvent(e) {
|
|
157
|
-
const { ctrlKey: t, metaKey: s, code:
|
|
158
|
-
this._shouldIgnoreKeyboardEvent(e) || !t && !s ||
|
|
160
|
+
const { ctrlKey: t, metaKey: s, code: a } = e;
|
|
161
|
+
this._shouldIgnoreKeyboardEvent(e) || !t && !s || a !== "KeyC" || (e.preventDefault(), this.editor.clipboardManager.copy());
|
|
159
162
|
}
|
|
160
163
|
/**
|
|
161
164
|
* Обработчик вставки объекта или изображения из буфера обмена.
|
|
@@ -172,9 +175,9 @@ class Z {
|
|
|
172
175
|
* @param event.code — код клавиши
|
|
173
176
|
*/
|
|
174
177
|
handleUndoRedoEvent(e) {
|
|
175
|
-
return
|
|
176
|
-
const { ctrlKey: t, metaKey: s, code:
|
|
177
|
-
this._shouldIgnoreKeyboardEvent(e) || !t && !s ||
|
|
178
|
+
return y(this, null, function* () {
|
|
179
|
+
const { ctrlKey: t, metaKey: s, code: a, repeat: n } = e;
|
|
180
|
+
this._shouldIgnoreKeyboardEvent(e) || !t && !s || n || !/Mac/i.test(navigator.userAgent) && this.isUndoRedoKeyPressed || (a === "KeyZ" ? (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.undo()) : a === "KeyY" && (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.redo()));
|
|
178
181
|
});
|
|
179
182
|
}
|
|
180
183
|
/**
|
|
@@ -194,8 +197,8 @@ class Z {
|
|
|
194
197
|
*/
|
|
195
198
|
handleSelectAllEvent(e) {
|
|
196
199
|
if (this._shouldIgnoreKeyboardEvent(e)) return;
|
|
197
|
-
const { ctrlKey: t, metaKey: s, code:
|
|
198
|
-
!t && !s ||
|
|
200
|
+
const { ctrlKey: t, metaKey: s, code: a } = e;
|
|
201
|
+
!t && !s || a !== "KeyA" || (e.preventDefault(), this.editor.selectionManager.selectAll());
|
|
199
202
|
}
|
|
200
203
|
/**
|
|
201
204
|
* Обработчик для удаления объектов (Delete или Backspace).
|
|
@@ -213,15 +216,15 @@ class Z {
|
|
|
213
216
|
*/
|
|
214
217
|
handleSpaceKeyDown(e) {
|
|
215
218
|
if (e.code !== "Space" || this._shouldIgnoreKeyboardEvent(e)) return;
|
|
216
|
-
const { canvas: t, editor: s, isSpacePressed:
|
|
217
|
-
if (
|
|
219
|
+
const { canvas: t, editor: s, isSpacePressed: a, isDragging: n } = this;
|
|
220
|
+
if (a || n) return;
|
|
218
221
|
this.isSpacePressed = !0, e.preventDefault();
|
|
219
|
-
const
|
|
220
|
-
|
|
222
|
+
const o = t.getActiveObject() || null;
|
|
223
|
+
o instanceof v ? this.savedSelection = o.getObjects().slice() : o && (this.savedSelection = [o]), t.discardActiveObject(), t.set({
|
|
221
224
|
selection: !1,
|
|
222
225
|
defaultCursor: "grab"
|
|
223
|
-
}), t.setCursor("grab"), s.canvasManager.getObjects().forEach((
|
|
224
|
-
|
|
226
|
+
}), t.setCursor("grab"), s.canvasManager.getObjects().forEach((i) => {
|
|
227
|
+
i.set({
|
|
225
228
|
selectable: !1,
|
|
226
229
|
evented: !1
|
|
227
230
|
});
|
|
@@ -256,8 +259,8 @@ class Z {
|
|
|
256
259
|
t.setActiveObject(e[0]);
|
|
257
260
|
return;
|
|
258
261
|
}
|
|
259
|
-
const
|
|
260
|
-
t.setActiveObject(
|
|
262
|
+
const a = e.filter((o) => s.canvasManager.getObjects().includes(o)), n = new v(a, { canvas: t });
|
|
263
|
+
t.setActiveObject(n);
|
|
261
264
|
}
|
|
262
265
|
// --- Обработчики для событий canvas (Fabric) ---
|
|
263
266
|
/**
|
|
@@ -322,24 +325,24 @@ class Z {
|
|
|
322
325
|
* @returns true если событие должно быть проигнорировано
|
|
323
326
|
*/
|
|
324
327
|
_shouldIgnoreKeyboardEvent(e) {
|
|
325
|
-
const t = document.activeElement, s = e.target,
|
|
328
|
+
const t = document.activeElement, s = e.target, a = ["input", "textarea", "select"];
|
|
326
329
|
if (s) {
|
|
327
|
-
const
|
|
328
|
-
if (
|
|
330
|
+
const o = s.tagName.toLowerCase();
|
|
331
|
+
if (a.includes(o) || s.contentEditable === "true") return !0;
|
|
329
332
|
}
|
|
330
333
|
if (t && t !== s) {
|
|
331
|
-
const
|
|
332
|
-
if (
|
|
334
|
+
const o = t.tagName.toLowerCase();
|
|
335
|
+
if (a.includes(o) || t.contentEditable === "true") return !0;
|
|
333
336
|
}
|
|
334
|
-
const
|
|
335
|
-
if (
|
|
336
|
-
let
|
|
337
|
-
|
|
338
|
-
const { keyboardIgnoreSelectors:
|
|
339
|
-
if (
|
|
340
|
-
for (const h of
|
|
337
|
+
const n = window.getSelection();
|
|
338
|
+
if (n && !n.isCollapsed && n.rangeCount > 0) {
|
|
339
|
+
let c = n.getRangeAt(0).commonAncestorContainer;
|
|
340
|
+
c.nodeType === Node.TEXT_NODE && (c = c.parentElement);
|
|
341
|
+
const { keyboardIgnoreSelectors: d } = this.options;
|
|
342
|
+
if (d != null && d.length && c)
|
|
343
|
+
for (const h of d)
|
|
341
344
|
try {
|
|
342
|
-
const l =
|
|
345
|
+
const l = c;
|
|
343
346
|
if (l.matches && l.matches(h) || l.closest && l.closest(h))
|
|
344
347
|
return !0;
|
|
345
348
|
} catch (l) {
|
|
@@ -352,7 +355,7 @@ class Z {
|
|
|
352
355
|
* Метод для удаления всех слушателей
|
|
353
356
|
*/
|
|
354
357
|
destroy() {
|
|
355
|
-
window.removeEventListener("resize", this.handleContainerResizeBound, { capture: !0 }), document.removeEventListener("keydown", this.handleCopyEventBound, { capture: !0 }), document.removeEventListener("paste", this.handlePasteEventBound, { capture: !0 }), document.removeEventListener("keydown", this.handleUndoRedoEventBound, { capture: !0 }), document.removeEventListener("keyup", this.handleUndoRedoKeyUpBound, { capture: !0 }), document.removeEventListener("keydown", this.handleSelectAllEventBound, { capture: !0 }), document.removeEventListener("keydown", this.handleDeleteObjectsEventBound, { capture: !0 }), this.options.canvasDragging && (this.canvas.off("mouse:down", this.handleCanvasDragStartBound), this.canvas.off("mouse:move", this.handleCanvasDraggingBound), this.canvas.off("mouse:up", this.handleCanvasDragEndBound), document.removeEventListener("keydown", this.handleSpaceKeyDownBound, { capture: !0 }), document.removeEventListener("keyup", this.handleSpaceKeyUpBound, { capture: !0 })), this.options.mouseWheelZooming && this.canvas.off("mouse:wheel", this.handleMouseWheelZoomBound), this.options.bringToFrontOnSelection && (this.canvas.off("selection:created", this.handleBringToFrontBound), this.canvas.off("selection:updated", this.handleBringToFrontBound)), this.options.resetObjectFitByDoubleClick && this.canvas.off("mouse:dblclick", this.handleResetObjectFitBound), this.canvas.off("object:modified", this.handleObjectModifiedHistoryBound), this.canvas.off("object:rotating", this.handleObjectRotatingHistoryBound), this.canvas.off("object:added", this.handleObjectAddedHistoryBound), this.canvas.off("object:removed", this.handleObjectRemovedHistoryBound), this.canvas.off("object:added", this.handleOverlayUpdateBound), this.canvas.off("selection:created", this.handleOverlayUpdateBound), this.canvas.off("selection:created", this.handleLockedSelectionBound), this.canvas.off("selection:updated", this.handleLockedSelectionBound);
|
|
358
|
+
window.removeEventListener("resize", this.handleContainerResizeBound, { capture: !0 }), document.removeEventListener("keydown", this.handleCopyEventBound, { capture: !0 }), document.removeEventListener("paste", this.handlePasteEventBound, { capture: !0 }), document.removeEventListener("keydown", this.handleUndoRedoEventBound, { capture: !0 }), document.removeEventListener("keyup", this.handleUndoRedoKeyUpBound, { capture: !0 }), document.removeEventListener("keydown", this.handleSelectAllEventBound, { capture: !0 }), document.removeEventListener("keydown", this.handleDeleteObjectsEventBound, { capture: !0 }), this.options.canvasDragging && (this.canvas.off("mouse:down", this.handleCanvasDragStartBound), this.canvas.off("mouse:move", this.handleCanvasDraggingBound), this.canvas.off("mouse:up", this.handleCanvasDragEndBound), document.removeEventListener("keydown", this.handleSpaceKeyDownBound, { capture: !0 }), document.removeEventListener("keyup", this.handleSpaceKeyUpBound, { capture: !0 })), this.options.mouseWheelZooming && this.canvas.off("mouse:wheel", this.handleMouseWheelZoomBound), this.options.bringToFrontOnSelection && (this.canvas.off("selection:created", this.handleBringToFrontBound), this.canvas.off("selection:updated", this.handleBringToFrontBound)), this.options.resetObjectFitByDoubleClick && this.canvas.off("mouse:dblclick", this.handleResetObjectFitBound), this.canvas.off("object:modified", this.handleObjectModifiedHistoryBound), this.canvas.off("object:rotating", this.handleObjectRotatingHistoryBound), this.canvas.off("object:added", this.handleObjectAddedHistoryBound), this.canvas.off("object:removed", this.handleObjectRemovedHistoryBound), this.canvas.off("object:added", this.handleOverlayUpdateBound), this.canvas.off("selection:created", this.handleOverlayUpdateBound), this.canvas.off("object:added", this.handleBackgroundUpdateBound), this.canvas.off("selection:created", this.handleBackgroundUpdateBound), this.canvas.off("selection:created", this.handleLockedSelectionBound), this.canvas.off("selection:updated", this.handleLockedSelectionBound);
|
|
356
359
|
}
|
|
357
360
|
/**
|
|
358
361
|
* Дебаунс для снижения частоты вызова функции.
|
|
@@ -362,9 +365,9 @@ class Z {
|
|
|
362
365
|
*/
|
|
363
366
|
static debounce(e, t) {
|
|
364
367
|
let s = null;
|
|
365
|
-
return function(...
|
|
368
|
+
return function(...a) {
|
|
366
369
|
s !== null && clearTimeout(s), s = setTimeout(() => {
|
|
367
|
-
e.apply(this,
|
|
370
|
+
e.apply(this, a);
|
|
368
371
|
}, t);
|
|
369
372
|
};
|
|
370
373
|
}
|
|
@@ -387,7 +390,7 @@ class xe {
|
|
|
387
390
|
return this.loaders[e] ? (this.cache.has(e) || this.cache.set(e, this.loaders[e]()), this.cache.get(e)) : Promise.reject(new Error(`Unknown module "${e}"`));
|
|
388
391
|
}
|
|
389
392
|
}
|
|
390
|
-
function
|
|
393
|
+
function Re(r) {
|
|
391
394
|
return new Worker(
|
|
392
395
|
"" + new URL("assets/worker-CN39s7P7.js", import.meta.url).href,
|
|
393
396
|
{
|
|
@@ -395,13 +398,13 @@ function Be(r) {
|
|
|
395
398
|
}
|
|
396
399
|
);
|
|
397
400
|
}
|
|
398
|
-
class
|
|
401
|
+
class Ue {
|
|
399
402
|
/**
|
|
400
403
|
* @param scriptUrl — URL скрипта воркера.
|
|
401
404
|
* По-умолчанию использует DefaultWorker из соседнего файла
|
|
402
405
|
*/
|
|
403
406
|
constructor(e) {
|
|
404
|
-
e ? this.worker = new Worker(e, { type: "module" }) : this.worker = new
|
|
407
|
+
e ? this.worker = new Worker(e, { type: "module" }) : this.worker = new Re(), this._callbacks = /* @__PURE__ */ new Map(), this.worker.onmessage = this._handleMessage.bind(this);
|
|
405
408
|
}
|
|
406
409
|
/**
|
|
407
410
|
* Обработчик сообщений от воркера
|
|
@@ -414,12 +417,12 @@ class _e {
|
|
|
414
417
|
* @returns
|
|
415
418
|
*/
|
|
416
419
|
_handleMessage({ data: e }) {
|
|
417
|
-
const { requestId: t, success: s, data:
|
|
418
|
-
if (!
|
|
420
|
+
const { requestId: t, success: s, data: a, error: n } = e, o = this._callbacks.get(t);
|
|
421
|
+
if (!o) {
|
|
419
422
|
console.warn(`No callback found for requestId: ${t}`);
|
|
420
423
|
return;
|
|
421
424
|
}
|
|
422
|
-
s ?
|
|
425
|
+
s ? o.resolve(a) : o.reject(new Error(n)), this._callbacks.delete(t);
|
|
423
426
|
}
|
|
424
427
|
/**
|
|
425
428
|
* Универсальный метод отправки команды в воркер
|
|
@@ -429,9 +432,9 @@ class _e {
|
|
|
429
432
|
* @returns Promise, который будет выполнен, когда воркер вернет ответ
|
|
430
433
|
*/
|
|
431
434
|
post(e, t, s = []) {
|
|
432
|
-
const
|
|
433
|
-
return new Promise((
|
|
434
|
-
this._callbacks.set(
|
|
435
|
+
const a = `${e}:${A(8)}`;
|
|
436
|
+
return new Promise((n, o) => {
|
|
437
|
+
this._callbacks.set(a, { resolve: n, reject: o }), this.worker.postMessage({ action: e, payload: t, requestId: a }, s);
|
|
435
438
|
});
|
|
436
439
|
}
|
|
437
440
|
/**
|
|
@@ -441,112 +444,112 @@ class _e {
|
|
|
441
444
|
this.worker.terminate();
|
|
442
445
|
}
|
|
443
446
|
}
|
|
444
|
-
const
|
|
445
|
-
function
|
|
446
|
-
const
|
|
447
|
-
r.save(), r.translate(e, t), r.rotate(
|
|
447
|
+
const N = 12, He = 2, ee = 8, te = 20, ze = 100, se = 20, ae = 8, Ze = 100, X = 32, ne = 1, Ye = "#2B2D33", oe = "#3D8BF4", ie = "#FFFFFF";
|
|
448
|
+
function V(r, e, t, s, a) {
|
|
449
|
+
const n = N, o = He;
|
|
450
|
+
r.save(), r.translate(e, t), r.rotate(P.degreesToRadians(a.angle)), r.fillStyle = ie, r.strokeStyle = oe, r.lineWidth = ne, r.beginPath(), r.roundRect(-n / 2, -n / 2, n, n, o), r.fill(), r.stroke(), r.restore();
|
|
448
451
|
}
|
|
449
|
-
function
|
|
450
|
-
const
|
|
451
|
-
r.save(), r.translate(e, t), r.rotate(
|
|
452
|
+
function fe(r, e, t, s, a) {
|
|
453
|
+
const n = ee, o = te, i = ze;
|
|
454
|
+
r.save(), r.translate(e, t), r.rotate(P.degreesToRadians(a.angle)), r.fillStyle = ie, r.strokeStyle = oe, r.lineWidth = ne, r.beginPath(), r.roundRect(-n / 2, -o / 2, n, o, i), r.fill(), r.stroke(), r.restore();
|
|
452
455
|
}
|
|
453
|
-
function
|
|
454
|
-
const
|
|
455
|
-
r.save(), r.translate(e, t), r.rotate(
|
|
456
|
+
function me(r, e, t, s, a) {
|
|
457
|
+
const n = se, o = ae, i = Ze;
|
|
458
|
+
r.save(), r.translate(e, t), r.rotate(P.degreesToRadians(a.angle)), r.fillStyle = ie, r.strokeStyle = oe, r.lineWidth = ne, r.beginPath(), r.roundRect(-n / 2, -o / 2, n, o, i), r.fill(), r.stroke(), r.restore();
|
|
456
459
|
}
|
|
457
|
-
const
|
|
458
|
-
|
|
459
|
-
function
|
|
460
|
-
const
|
|
461
|
-
r.save(), r.translate(e, t), r.rotate(
|
|
460
|
+
const Pe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", ye = new Image();
|
|
461
|
+
ye.src = Pe;
|
|
462
|
+
function We(r, e, t, s, a) {
|
|
463
|
+
const o = X / 2;
|
|
464
|
+
r.save(), r.translate(e, t), r.rotate(P.degreesToRadians(a.angle)), r.fillStyle = Ye, r.beginPath(), r.arc(0, 0, o, 0, 2 * Math.PI), r.fill(), r.drawImage(ye, -o / 2, -o / 2, o, o), r.restore();
|
|
462
465
|
}
|
|
463
|
-
const
|
|
466
|
+
const Fe = {
|
|
464
467
|
// Угловые точки
|
|
465
468
|
tl: {
|
|
466
|
-
render:
|
|
467
|
-
sizeX:
|
|
468
|
-
sizeY:
|
|
469
|
+
render: V,
|
|
470
|
+
sizeX: N,
|
|
471
|
+
sizeY: N,
|
|
469
472
|
offsetX: 0,
|
|
470
473
|
offsetY: 0
|
|
471
474
|
},
|
|
472
475
|
tr: {
|
|
473
|
-
render:
|
|
474
|
-
sizeX:
|
|
475
|
-
sizeY:
|
|
476
|
+
render: V,
|
|
477
|
+
sizeX: N,
|
|
478
|
+
sizeY: N,
|
|
476
479
|
offsetX: 0,
|
|
477
480
|
offsetY: 0
|
|
478
481
|
},
|
|
479
482
|
bl: {
|
|
480
|
-
render:
|
|
481
|
-
sizeX:
|
|
482
|
-
sizeY:
|
|
483
|
+
render: V,
|
|
484
|
+
sizeX: N,
|
|
485
|
+
sizeY: N,
|
|
483
486
|
offsetX: 0,
|
|
484
487
|
offsetY: 0
|
|
485
488
|
},
|
|
486
489
|
br: {
|
|
487
|
-
render:
|
|
488
|
-
sizeX:
|
|
489
|
-
sizeY:
|
|
490
|
+
render: V,
|
|
491
|
+
sizeX: N,
|
|
492
|
+
sizeY: N,
|
|
490
493
|
offsetX: 0,
|
|
491
494
|
offsetY: 0
|
|
492
495
|
},
|
|
493
496
|
// Середина вертикалей
|
|
494
497
|
ml: {
|
|
495
|
-
render:
|
|
496
|
-
sizeX:
|
|
497
|
-
sizeY:
|
|
498
|
+
render: fe,
|
|
499
|
+
sizeX: ee,
|
|
500
|
+
sizeY: te,
|
|
498
501
|
offsetX: 0,
|
|
499
502
|
offsetY: 0
|
|
500
503
|
},
|
|
501
504
|
mr: {
|
|
502
|
-
render:
|
|
503
|
-
sizeX:
|
|
504
|
-
sizeY:
|
|
505
|
+
render: fe,
|
|
506
|
+
sizeX: ee,
|
|
507
|
+
sizeY: te,
|
|
505
508
|
offsetX: 0,
|
|
506
509
|
offsetY: 0
|
|
507
510
|
},
|
|
508
511
|
// Середина горизонталей
|
|
509
512
|
mt: {
|
|
510
|
-
render:
|
|
511
|
-
sizeX:
|
|
512
|
-
sizeY:
|
|
513
|
+
render: me,
|
|
514
|
+
sizeX: se,
|
|
515
|
+
sizeY: ae,
|
|
513
516
|
offsetX: 0,
|
|
514
517
|
offsetY: 0
|
|
515
518
|
},
|
|
516
519
|
mb: {
|
|
517
|
-
render:
|
|
518
|
-
sizeX:
|
|
519
|
-
sizeY:
|
|
520
|
+
render: me,
|
|
521
|
+
sizeX: se,
|
|
522
|
+
sizeY: ae,
|
|
520
523
|
offsetX: 0,
|
|
521
524
|
offsetY: 0
|
|
522
525
|
},
|
|
523
526
|
// Специальный «rotate» контрол
|
|
524
527
|
mtr: {
|
|
525
|
-
render:
|
|
526
|
-
sizeX:
|
|
527
|
-
sizeY:
|
|
528
|
+
render: We,
|
|
529
|
+
sizeX: X,
|
|
530
|
+
sizeY: X,
|
|
528
531
|
offsetX: 0,
|
|
529
|
-
offsetY: -
|
|
532
|
+
offsetY: -X
|
|
530
533
|
}
|
|
531
534
|
};
|
|
532
|
-
class
|
|
535
|
+
class Ve {
|
|
533
536
|
static apply() {
|
|
534
|
-
const e =
|
|
535
|
-
Object.entries(
|
|
537
|
+
const e = Se.createObjectDefaultControls();
|
|
538
|
+
Object.entries(Fe).forEach(([t, s]) => {
|
|
536
539
|
Object.assign(e[t], {
|
|
537
540
|
render: s.render,
|
|
538
541
|
sizeX: s.sizeX,
|
|
539
542
|
sizeY: s.sizeY,
|
|
540
543
|
offsetX: s.offsetX,
|
|
541
544
|
offsetY: s.offsetY
|
|
542
|
-
}), t === "mtr" && (e[t].cursorStyle = "grab", e[t].mouseDownHandler = (
|
|
545
|
+
}), t === "mtr" && (e[t].cursorStyle = "grab", e[t].mouseDownHandler = (n, o, i, c) => {
|
|
543
546
|
var h;
|
|
544
|
-
(h =
|
|
547
|
+
(h = o.target.canvas) == null || h.setCursor("grabbing");
|
|
545
548
|
});
|
|
546
|
-
}),
|
|
549
|
+
}), Ee.ownDefaults.controls = e;
|
|
547
550
|
}
|
|
548
551
|
}
|
|
549
|
-
const
|
|
552
|
+
const Ge = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNi44NzUgMi41YS42MjUuNjI1IDAgMCAwLS42MjUuNjI0VjYuMjVIMy4xMjVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2MTBjMCAuMzQ1LjI4LjYyNS42MjUuNjI1aDEwYy4zNDUgMCAuNjI1LS4yOC42MjUtLjYyNXYtMy4xMjZoMy4xMjVjLjM0NSAwIC42MjUtLjI4LjYyNS0uNjI1di0xMGEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTEwWm02Ljg3NSAxMGgyLjVWMy43NUg3LjV2Mi41aDUuNjI1Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NS42MjRabS0xMCAzLjc1VjcuNWg4Ljc1djguNzVIMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", Xe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi41IDcuNWMwLS42OS41Ni0xLjI1IDEuMjUtMS4yNWgxMi41Yy42OSAwIDEuMjUuNTYgMS4yNSAxLjI1djguNzVjMCAuNjktLjU2IDEuMjUtMS4yNSAxLjI1SDMuNzVjLS42OSAwLTEuMjUtLjU2LTEuMjUtMS4yNVY3LjVabTEzLjc1IDBIMy43NXY4Ljc1aDEyLjVWNy41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMS44NzVhMi4xODggMi4xODggMCAwIDAtMi4xODggMi4xODh2Mi44MTJhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyYTMuNDM3IDMuNDM3IDAgMSAxIDYuODc1IDB2Mi44MTNhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyQTIuMTg4IDIuMTg4IDAgMCAwIDEwIDEuODc2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEwIDEyLjgxM2EuOTM3LjkzNyAwIDEgMCAwLTEuODc1LjkzNy45MzcgMCAwIDAgMCAxLjg3NFoiLz48L3N2Zz4=", Qe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE2LjI1IDYuMjVINy41VjQuMzc1YTIuNSAyLjUgMCAwIDEgMi41LTIuNWMxLjIgMCAyLjI4MS44NiAyLjUxMiAyYS42MjUuNjI1IDAgMCAwIDEuMjI2LS4yNWMtLjM1NC0xLjczOC0xLjkyNS0zLTMuNzM4LTNhMy43NTQgMy43NTQgMCAwIDAtMy43NSAzLjc1VjYuMjVoLTIuNUExLjI1IDEuMjUgMCAwIDAgMi41IDcuNXY4Ljc1YTEuMjUgMS4yNSAwIDAgMCAxLjI1IDEuMjVoMTIuNWExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjcuNWExLjI1IDEuMjUgMCAwIDAtMS4yNS0xLjI1Wm0wIDEwSDMuNzVWNy41aDEyLjV2OC43NVptLTUuMzEzLTQuMzc1YS45MzcuOTM3IDAgMSAxLTEuODc0IDAgLjkzNy45MzcgMCAwIDEgMS44NzQgMFoiLz48L3N2Zz4K", Ke = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIuNSA4LjEyNSAxMCAxMi41bDcuNS00LjM3NUwxMCAzLjc1IDIuNSA4LjEyNVoiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjY4NSAzLjIxYS42MjUuNjI1IDAgMCAxIC42MyAwbDcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOGw3LjUtNC4zNzVaTTMuNzQgOC4xMjUgMTAgMTEuNzc2bDYuMjYtMy42NTFMMTAgNC40NzQgMy43NCA4LjEyNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA5LjQ2YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDExLjc3NmwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA5LjQ2Wm0tMS42NiAyLjQxNUwxMCAxNS41MjZsNi4yNi0zLjY1MS0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNi0xLjk3NSAxLjE1MVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", $e = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMy4yMWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDguMTI1IDEwIDExLjc3Nmw2LjI2LTMuNjUxTDEwIDQuNDc0IDMuNzQgOC4xMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjcxNCAxMCAxMCAxMi41bDQuMjg2LTIuNSAzLjIxNCAxLjg3NUwxMCAxNi4yNWwtNy41LTQuMzc1TDUuNzE0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDkuNDZhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgMTEuNzc2bDMuOTctMi4zMTZhLjYyNS42MjUgMCAwIDEgLjYzIDBsMy4yMTUgMS44NzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhMNS40IDkuNDZabS0xLjY2IDIuNDE1TDEwIDE1LjUyNmw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2LTEuOTc1IDEuMTUxWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", Je = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTIuNSA2LjI1IDcuNSA0LjM3NSA3LjUtNC4zNzVMMTAgMS44NzUgMi41IDYuMjVaIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMS4zMzVhLjYyNS42MjUgMCAwIDEgLjYzIDBsNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4bDcuNS00LjM3NVpNMy43NCA2LjI1IDEwIDkuOTAxbDYuMjYtMy42NTFMMTAgMi41OTkgMy43NCA2LjI1WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDExLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCAxMy42NTFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgMTEuMzM1Wk0zLjc0IDEzLjc1IDEwIDE3LjQwMWw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTMuNzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgNy41ODVhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgOS45MDFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgNy41ODVaTTMuNzQgMTAgMTAgMTMuNjUxIDE2LjI2IDEwbC0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNkwzLjc0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", qe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMS45NiAxMy40MzVhLjYyNS42MjUgMCAwIDEgLjg1NS0uMjI1TDEwIDE3LjQwMWw3LjE4NS00LjE5YS42MjUuNjI1IDAgMCAxIC42MyAxLjA3OWwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEtLjIyNS0uODU1Wk05LjY4NSAxLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDYuMjUgMTAgOS45MDFsNi4yNi0zLjY1MUwxMCAyLjU5OSAzLjc0IDYuMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im01LjcxNCAxMS44NzUgNC4yODYgMi41IDQuMjg2LTIuNUwxNy41IDEzLjc1IDEwIDE4LjEyNSAyLjUgMTMuNzVsMy4yMTQtMS44NzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgMTEuMzM1YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDEzLjY1MWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCAxMS4zMzVaTTMuNzQgMTMuNzUgMTAgMTcuNDAxbDYuMjYtMy42NTEtMS45NzQtMS4xNTEtMy45NzEgMi4zMTZhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTMuOTctMi4zMTZMMy43NCAxMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA3LjU4NWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCA5LjkwMWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA3LjU4NVpNMy43NCAxMCAxMCAxMy42NTEgMTYuMjYgMTBsLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTBaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=", et = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI0VDNEU0MCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOC4xMjUgMS4yNUExLjg3NSAxLjg3NSAwIDAgMCA2LjI1IDMuMTI1di42MjVIMy4xMjVhLjYyNS42MjUgMCAwIDAgMCAxLjI1aC42MjV2MTEuMjVBMS4yNSAxLjI1IDAgMCAwIDUgMTcuNWgxMGExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjVoLjYyNWEuNjI1LjYyNSAwIDAgMCAwLTEuMjVIMTMuNzV2LS42MjVhMS44NzUgMS44NzUgMCAwIDAtMS44NzUtMS44NzVoLTMuNzVabTQuMzc1IDIuNXYtLjYyNWEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2LjYyNWg1Wk01IDE2LjI1VjVoMTB2MTEuMjVINVpNOC4xMjUgNy41Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NWEuNjI1LjYyNSAwIDEgMS0xLjI1IDB2LTVjMC0uMzQ1LjI4LS42MjUuNjI1LS42MjVabTQuMzc1IDUuNjI1di01YS42MjUuNjI1IDAgMCAwLTEuMjUgMHY1YS42MjUuNjI1IDAgMSAwIDEuMjUgMFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", Z = {
|
|
550
553
|
style: {
|
|
551
554
|
position: "absolute",
|
|
552
555
|
display: "none",
|
|
@@ -613,17 +616,17 @@ const Fe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMj
|
|
|
613
616
|
],
|
|
614
617
|
offsetTop: 50,
|
|
615
618
|
icons: {
|
|
616
|
-
copyPaste:
|
|
617
|
-
delete:
|
|
618
|
-
lock:
|
|
619
|
-
unlock:
|
|
620
|
-
bringToFront:
|
|
621
|
-
sendToBack:
|
|
622
|
-
bringForward:
|
|
623
|
-
sendBackwards:
|
|
619
|
+
copyPaste: Ge,
|
|
620
|
+
delete: et,
|
|
621
|
+
lock: Xe,
|
|
622
|
+
unlock: Qe,
|
|
623
|
+
bringToFront: Je,
|
|
624
|
+
sendToBack: qe,
|
|
625
|
+
bringForward: Ke,
|
|
626
|
+
sendBackwards: $e
|
|
624
627
|
},
|
|
625
628
|
handlers: {
|
|
626
|
-
copyPaste: (r) =>
|
|
629
|
+
copyPaste: (r) => y(null, null, function* () {
|
|
627
630
|
r.clipboardManager.copyPaste();
|
|
628
631
|
}),
|
|
629
632
|
delete: (r) => {
|
|
@@ -649,18 +652,18 @@ const Fe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMj
|
|
|
649
652
|
}
|
|
650
653
|
}
|
|
651
654
|
};
|
|
652
|
-
class
|
|
655
|
+
class tt {
|
|
653
656
|
constructor({ editor: e }) {
|
|
654
657
|
this.currentTarget = null, this.currentLocked = !1, this.isTransforming = !1, this.editor = e, this.canvas = e.canvas, this.options = e.options, this._initToolbar();
|
|
655
658
|
}
|
|
656
659
|
_initToolbar() {
|
|
657
660
|
if (!this.options.showToolbar) return;
|
|
658
661
|
const e = this.options.toolbar || {};
|
|
659
|
-
this.config =
|
|
660
|
-
style:
|
|
661
|
-
btnStyle:
|
|
662
|
-
icons:
|
|
663
|
-
handlers:
|
|
662
|
+
this.config = ue(I(I({}, Z), e), {
|
|
663
|
+
style: I(I({}, Z.style), e.style || {}),
|
|
664
|
+
btnStyle: I(I({}, Z.btnStyle), e.btnStyle || {}),
|
|
665
|
+
icons: I(I({}, Z.icons), e.icons || {}),
|
|
666
|
+
handlers: I(I({}, Z.handlers), e.handlers || {})
|
|
664
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 = () => {
|
|
665
668
|
this.el.style.display = "none";
|
|
666
669
|
}, this._createDOM(), this._bindEvents();
|
|
@@ -671,11 +674,11 @@ class qe {
|
|
|
671
674
|
_createDOM() {
|
|
672
675
|
const { style: e } = this.config;
|
|
673
676
|
this.el = document.createElement("div"), Object.assign(this.el.style, e), this.canvas.wrapperEl.appendChild(this.el), this._onBtnOver = (t) => {
|
|
674
|
-
const
|
|
675
|
-
|
|
677
|
+
const a = t.target.closest("button");
|
|
678
|
+
a && Object.assign(a.style, this.config.btnHover);
|
|
676
679
|
}, this._onBtnOut = (t) => {
|
|
677
|
-
const
|
|
678
|
-
|
|
680
|
+
const a = t.target.closest("button");
|
|
681
|
+
a && Object.assign(a.style, this.config.btnStyle);
|
|
679
682
|
}, this.el.addEventListener("mouseover", this._onBtnOver), this.el.addEventListener("mouseout", this._onBtnOut);
|
|
680
683
|
}
|
|
681
684
|
/**
|
|
@@ -687,13 +690,13 @@ class qe {
|
|
|
687
690
|
_renderButtons(e) {
|
|
688
691
|
this.el.innerHTML = "";
|
|
689
692
|
for (const t of e) {
|
|
690
|
-
const { name: s, handle:
|
|
691
|
-
|
|
692
|
-
var
|
|
693
|
-
return (
|
|
694
|
-
},
|
|
695
|
-
|
|
696
|
-
},
|
|
693
|
+
const { name: s, handle: a } = t, { icons: n = {}, btnStyle: o, handlers: i = {} } = this.config, c = document.createElement("button");
|
|
694
|
+
c.innerHTML = n[a] ? `<img src="${n[a]}" title="${s}" />` : s, Object.assign(c.style, o), c.onclick = () => {
|
|
695
|
+
var d;
|
|
696
|
+
return (d = i[a]) == null ? void 0 : d.call(i, this.editor);
|
|
697
|
+
}, c.onmousedown = (d) => {
|
|
698
|
+
d.stopPropagation(), d.preventDefault();
|
|
699
|
+
}, c.ondragstart = (d) => d.preventDefault(), this.el.appendChild(c);
|
|
697
700
|
}
|
|
698
701
|
}
|
|
699
702
|
/**
|
|
@@ -749,9 +752,9 @@ class qe {
|
|
|
749
752
|
this.el.style.display = "none";
|
|
750
753
|
return;
|
|
751
754
|
}
|
|
752
|
-
const { el: t, config: s, canvas:
|
|
755
|
+
const { el: t, config: s, canvas: a } = this;
|
|
753
756
|
e.setCoords();
|
|
754
|
-
const
|
|
757
|
+
const n = a.getZoom(), [, , , , o, i] = a.viewportTransform, { x: c } = e.getCenterPoint(), { top: d, height: h } = e.getBoundingRect(), g = c * n + o - t.offsetWidth / 2, u = s.offsetTop || 0, f = (d + h) * n + i + u;
|
|
755
758
|
Object.assign(t.style, {
|
|
756
759
|
left: `${g}px`,
|
|
757
760
|
top: `${f}px`,
|
|
@@ -765,7 +768,7 @@ class qe {
|
|
|
765
768
|
this.el.removeEventListener("mouseover", this._onBtnOver), this.el.removeEventListener("mouseout", this._onBtnOut), this.canvas.off("mouse:down", this._onMouseDown), this.canvas.off("object:moving", this._onObjectMoving), this.canvas.off("object:scaling", this._onObjectScaling), this.canvas.off("object:rotating", this._onObjectRotating), this.canvas.off("mouse:up", this._onMouseUp), this.canvas.off("object:modified", this._onObjectModified), this.canvas.off("selection:created", this._onSelectionChange), this.canvas.off("selection:updated", this._onSelectionChange), this.canvas.off("after:render", this._onSelectionChange), this.canvas.off("selection:cleared", this._onSelectionClear), this.el.remove();
|
|
766
769
|
}
|
|
767
770
|
}
|
|
768
|
-
class
|
|
771
|
+
class st {
|
|
769
772
|
constructor({ editor: e }) {
|
|
770
773
|
this.editor = e, this.canvas = e.canvas, this._historySuspendCount = 0, this.baseState = null, this.patches = [], this.currentIndex = 0, this.maxHistoryLength = e.options.maxHistoryLength, this.totalChangesCount = 0, this.baseStateChangesCount = 0, this._createDiffPatcher();
|
|
771
774
|
}
|
|
@@ -777,11 +780,12 @@ class et {
|
|
|
777
780
|
return this.patches[this.currentIndex - 1] || null;
|
|
778
781
|
}
|
|
779
782
|
_createDiffPatcher() {
|
|
780
|
-
this.diffPatcher =
|
|
783
|
+
this.diffPatcher = ke({
|
|
781
784
|
objectHash(e) {
|
|
782
785
|
const t = e;
|
|
783
786
|
return [
|
|
784
787
|
t.id,
|
|
788
|
+
t.backgroundId,
|
|
785
789
|
t.format,
|
|
786
790
|
t.locked,
|
|
787
791
|
t.left,
|
|
@@ -801,7 +805,7 @@ class et {
|
|
|
801
805
|
includeValueOnMove: !1
|
|
802
806
|
},
|
|
803
807
|
textDiff: {
|
|
804
|
-
diffMatchPatch:
|
|
808
|
+
diffMatchPatch: Be,
|
|
805
809
|
minLength: 60
|
|
806
810
|
}
|
|
807
811
|
});
|
|
@@ -831,10 +835,10 @@ class et {
|
|
|
831
835
|
*/
|
|
832
836
|
getFullState() {
|
|
833
837
|
const { baseState: e, currentIndex: t, patches: s } = this;
|
|
834
|
-
let
|
|
835
|
-
for (let
|
|
836
|
-
|
|
837
|
-
return console.log("getFullState state",
|
|
838
|
+
let a = JSON.parse(JSON.stringify(e));
|
|
839
|
+
for (let n = 0; n < t; n += 1)
|
|
840
|
+
a = this.diffPatcher.patch(a, s[n].diff);
|
|
841
|
+
return console.log("getFullState state", a), a;
|
|
838
842
|
}
|
|
839
843
|
/**
|
|
840
844
|
* Сохраняем текущее состояние в виде диффа от последнего сохранённого полного состояния.
|
|
@@ -846,6 +850,8 @@ class et {
|
|
|
846
850
|
"selectable",
|
|
847
851
|
"evented",
|
|
848
852
|
"id",
|
|
853
|
+
"backgroundId",
|
|
854
|
+
"backgroundType",
|
|
849
855
|
"format",
|
|
850
856
|
"width",
|
|
851
857
|
"height",
|
|
@@ -867,7 +873,7 @@ class et {
|
|
|
867
873
|
console.log("Нет изменений для сохранения.");
|
|
868
874
|
return;
|
|
869
875
|
}
|
|
870
|
-
console.log("baseState", this.baseState), this.currentIndex < this.patches.length && this.patches.splice(this.currentIndex), console.log("diff", s), this.totalChangesCount += 1, this.patches.push({ id:
|
|
876
|
+
console.log("baseState", this.baseState), this.currentIndex < this.patches.length && this.patches.splice(this.currentIndex), console.log("diff", s), this.totalChangesCount += 1, this.patches.push({ id: A(), diff: s }), this.currentIndex += 1, this.patches.length > this.maxHistoryLength && (this.baseState = this.diffPatcher.patch(this.baseState, this.patches[0].diff), this.patches.shift(), this.currentIndex -= 1, this.baseStateChangesCount += 1), console.log("Состояние сохранено. Текущий индекс истории:", this.currentIndex);
|
|
871
877
|
}
|
|
872
878
|
/**
|
|
873
879
|
* Функция загрузки состояния в канвас.
|
|
@@ -875,15 +881,17 @@ class et {
|
|
|
875
881
|
* @fires editor:history-state-loaded
|
|
876
882
|
*/
|
|
877
883
|
loadStateFromFullState(e) {
|
|
878
|
-
return
|
|
884
|
+
return y(this, null, function* () {
|
|
879
885
|
if (!e) return;
|
|
880
886
|
console.log("loadStateFromFullState fullState", e);
|
|
881
|
-
const { canvas: t, canvasManager: s, interactionBlocker: n } = this.editor, { width:
|
|
887
|
+
const { canvas: t, canvasManager: s, interactionBlocker: a, backgroundManager: n } = this.editor, { width: o, height: i } = t;
|
|
882
888
|
yield t.loadFromJSON(e);
|
|
883
|
-
const
|
|
884
|
-
|
|
885
|
-
const d = t.getObjects().find((
|
|
886
|
-
d && (
|
|
889
|
+
const c = t.getObjects().find((l) => l.id === "montage-area");
|
|
890
|
+
c && (this.editor.montageArea = c, (o !== t.getWidth() || i !== t.getHeight()) && s.updateCanvas());
|
|
891
|
+
const d = t.getObjects().find((l) => l.id === "overlay-mask");
|
|
892
|
+
d && (a.overlayMask = d, a.overlayMask.visible = !1);
|
|
893
|
+
const h = t.getObjects().find((l) => l.id === "background");
|
|
894
|
+
h ? n.backgroundObject = h : n.removeBackground({ withoutSave: !0 }), t.renderAll(), t.fire("editor:history-state-loaded", {
|
|
887
895
|
fullState: e,
|
|
888
896
|
currentIndex: this.currentIndex,
|
|
889
897
|
totalChangesCount: this.totalChangesCount,
|
|
@@ -898,7 +906,7 @@ class et {
|
|
|
898
906
|
* @fires editor:undo
|
|
899
907
|
*/
|
|
900
908
|
undo() {
|
|
901
|
-
return
|
|
909
|
+
return y(this, null, function* () {
|
|
902
910
|
if (!this.skipHistory) {
|
|
903
911
|
if (this.currentIndex <= 0) {
|
|
904
912
|
console.log("Нет предыдущих состояний для отмены.");
|
|
@@ -935,7 +943,7 @@ class et {
|
|
|
935
943
|
* @fires editor:redo
|
|
936
944
|
*/
|
|
937
945
|
redo() {
|
|
938
|
-
return
|
|
946
|
+
return y(this, null, function* () {
|
|
939
947
|
if (!this.skipHistory) {
|
|
940
948
|
if (this.currentIndex >= this.patches.length) {
|
|
941
949
|
console.log("Нет состояний для повтора.");
|
|
@@ -968,8 +976,8 @@ class et {
|
|
|
968
976
|
});
|
|
969
977
|
}
|
|
970
978
|
}
|
|
971
|
-
const
|
|
972
|
-
class
|
|
979
|
+
const at = 0.1, nt = 2, ot = 0.1, it = 90, R = 16, U = 16, w = 4096, T = 4096, be = "application/image-editor:";
|
|
980
|
+
class O {
|
|
973
981
|
constructor({ editor: e }) {
|
|
974
982
|
this.editor = e, this.options = e.options, this._createdBlobUrls = [], this.acceptContentTypes = this.editor.options.acceptContentTypes, this.acceptFormats = this.getAllowedFormatsFromContentTypes();
|
|
975
983
|
}
|
|
@@ -986,83 +994,114 @@ class L {
|
|
|
986
994
|
* @returns возвращает Promise с объектом изображения или null в случае ошибки
|
|
987
995
|
*/
|
|
988
996
|
importImage(e) {
|
|
989
|
-
return
|
|
997
|
+
return y(this, null, function* () {
|
|
990
998
|
const {
|
|
991
999
|
source: t,
|
|
992
1000
|
scale: s = `image-${this.options.scaleType}`,
|
|
993
|
-
withoutSave:
|
|
994
|
-
fromClipboard:
|
|
1001
|
+
withoutSave: a = !1,
|
|
1002
|
+
fromClipboard: n = !1,
|
|
1003
|
+
isBackground: o = !1,
|
|
1004
|
+
withoutSelection: i = !1
|
|
995
1005
|
} = e;
|
|
996
1006
|
if (!t) return null;
|
|
997
|
-
const { canvas:
|
|
998
|
-
if (!this.isAllowedContentType(
|
|
999
|
-
const
|
|
1000
|
-
return
|
|
1007
|
+
const { canvas: c, montageArea: d, transformManager: h, historyManager: l, errorManager: g } = this.editor, u = yield this.getContentType(t), f = O.getFormatFromContentType(u), { acceptContentTypes: m, acceptFormats: M } = this;
|
|
1008
|
+
if (!this.isAllowedContentType(u)) {
|
|
1009
|
+
const j = `Неверный contentType для изображения: ${u}. Ожидается один из: ${this.acceptContentTypes.join(", ")}.`;
|
|
1010
|
+
return g.emitError({
|
|
1001
1011
|
origin: "ImageManager",
|
|
1002
1012
|
method: "importImage",
|
|
1003
1013
|
code: "INVALID_CONTENT_TYPE",
|
|
1004
|
-
message:
|
|
1005
|
-
data: {
|
|
1014
|
+
message: j,
|
|
1015
|
+
data: {
|
|
1016
|
+
source: t,
|
|
1017
|
+
format: f,
|
|
1018
|
+
contentType: u,
|
|
1019
|
+
acceptContentTypes: m,
|
|
1020
|
+
acceptFormats: M,
|
|
1021
|
+
fromClipboard: n,
|
|
1022
|
+
isBackground: o,
|
|
1023
|
+
withoutSelection: i
|
|
1024
|
+
}
|
|
1006
1025
|
}), null;
|
|
1007
1026
|
}
|
|
1008
|
-
|
|
1027
|
+
l.suspendHistory();
|
|
1009
1028
|
try {
|
|
1010
|
-
let
|
|
1029
|
+
let j, b;
|
|
1011
1030
|
if (t instanceof File)
|
|
1012
|
-
|
|
1031
|
+
j = URL.createObjectURL(t);
|
|
1013
1032
|
else if (typeof t == "string") {
|
|
1014
|
-
const
|
|
1015
|
-
|
|
1033
|
+
const E = yield (yield fetch(t, { mode: "cors" })).blob();
|
|
1034
|
+
j = URL.createObjectURL(E);
|
|
1016
1035
|
} else
|
|
1017
|
-
return
|
|
1036
|
+
return g.emitError({
|
|
1018
1037
|
origin: "ImageManager",
|
|
1019
1038
|
method: "importImage",
|
|
1020
1039
|
code: "INVALID_SOURCE_TYPE",
|
|
1021
1040
|
message: "Неверный тип источника изображения. Ожидается URL или объект File.",
|
|
1022
|
-
data: {
|
|
1041
|
+
data: {
|
|
1042
|
+
source: t,
|
|
1043
|
+
format: f,
|
|
1044
|
+
contentType: u,
|
|
1045
|
+
acceptContentTypes: m,
|
|
1046
|
+
acceptFormats: M,
|
|
1047
|
+
fromClipboard: n,
|
|
1048
|
+
isBackground: o,
|
|
1049
|
+
withoutSelection: i
|
|
1050
|
+
}
|
|
1023
1051
|
}), null;
|
|
1024
|
-
if (this._createdBlobUrls.push(
|
|
1025
|
-
const
|
|
1026
|
-
|
|
1052
|
+
if (this._createdBlobUrls.push(j), f === "svg") {
|
|
1053
|
+
const C = yield De(j);
|
|
1054
|
+
b = P.groupSVGElements(C.objects, C.options);
|
|
1027
1055
|
} else
|
|
1028
|
-
|
|
1029
|
-
const { width:
|
|
1030
|
-
if (
|
|
1031
|
-
const
|
|
1032
|
-
let
|
|
1033
|
-
if (
|
|
1034
|
-
const
|
|
1035
|
-
this._createdBlobUrls.push(
|
|
1036
|
-
} else if (
|
|
1037
|
-
const
|
|
1038
|
-
this._createdBlobUrls.push(
|
|
1056
|
+
b = yield z.fromURL(j, { crossOrigin: "anonymous" });
|
|
1057
|
+
const { width: S, height: k } = b;
|
|
1058
|
+
if (b instanceof z) {
|
|
1059
|
+
const C = b.getElement();
|
|
1060
|
+
let E = "";
|
|
1061
|
+
if (C instanceof HTMLImageElement ? E = C.src : C instanceof HTMLCanvasElement && (E = C.toDataURL()), k > T || S > w) {
|
|
1062
|
+
const L = yield this.resizeImageToBoundaries(E, "max"), p = URL.createObjectURL(L);
|
|
1063
|
+
this._createdBlobUrls.push(p), b = yield z.fromURL(p, { crossOrigin: "anonymous" });
|
|
1064
|
+
} else if (k < U || S < R) {
|
|
1065
|
+
const L = yield this.resizeImageToBoundaries(E, "min"), p = URL.createObjectURL(L);
|
|
1066
|
+
this._createdBlobUrls.push(p), b = yield z.fromURL(p, { crossOrigin: "anonymous" });
|
|
1039
1067
|
}
|
|
1040
1068
|
}
|
|
1041
|
-
if (
|
|
1042
|
-
this.editor.canvasManager.scaleMontageAreaToImage({ object:
|
|
1069
|
+
if (b.set("id", `${b.type}-${A()}`), b.set("format", f), s === "scale-montage")
|
|
1070
|
+
this.editor.canvasManager.scaleMontageAreaToImage({ object: b, withoutSave: !0 });
|
|
1043
1071
|
else {
|
|
1044
|
-
const { width:
|
|
1045
|
-
s === "image-contain" &&
|
|
1072
|
+
const { width: C, height: E } = d, L = this.calculateScaleFactor({ imageObject: b, scaleType: s });
|
|
1073
|
+
s === "image-contain" && L < 1 ? h.fitObject({ object: b, type: "contain", withoutSave: !0 }) : s === "image-cover" && (S > C || k > E) && h.fitObject({ object: b, type: "cover", withoutSave: !0 });
|
|
1046
1074
|
}
|
|
1047
|
-
|
|
1048
|
-
const
|
|
1049
|
-
image:
|
|
1050
|
-
format:
|
|
1051
|
-
contentType:
|
|
1075
|
+
c.add(b), c.centerObject(b), i || c.setActiveObject(b), c.renderAll(), l.resumeHistory(), a || l.saveState();
|
|
1076
|
+
const H = {
|
|
1077
|
+
image: b,
|
|
1078
|
+
format: f,
|
|
1079
|
+
contentType: u,
|
|
1052
1080
|
scale: s,
|
|
1053
|
-
withoutSave:
|
|
1081
|
+
withoutSave: a,
|
|
1054
1082
|
source: t,
|
|
1055
|
-
fromClipboard:
|
|
1083
|
+
fromClipboard: n,
|
|
1084
|
+
isBackground: o,
|
|
1085
|
+
withoutSelection: i
|
|
1056
1086
|
};
|
|
1057
|
-
return
|
|
1058
|
-
} catch (
|
|
1059
|
-
return
|
|
1087
|
+
return c.fire("editor:image-imported", H), H;
|
|
1088
|
+
} catch (j) {
|
|
1089
|
+
return g.emitError({
|
|
1060
1090
|
origin: "ImageManager",
|
|
1061
1091
|
method: "importImage",
|
|
1062
1092
|
code: "IMPORT_FAILED",
|
|
1063
|
-
message: `Ошибка импорта изображения: ${
|
|
1064
|
-
data: {
|
|
1065
|
-
|
|
1093
|
+
message: `Ошибка импорта изображения: ${j.message}`,
|
|
1094
|
+
data: {
|
|
1095
|
+
source: t,
|
|
1096
|
+
format: f,
|
|
1097
|
+
contentType: u,
|
|
1098
|
+
scale: s,
|
|
1099
|
+
withoutSave: a,
|
|
1100
|
+
fromClipboard: n,
|
|
1101
|
+
isBackground: o,
|
|
1102
|
+
withoutSelection: i
|
|
1103
|
+
}
|
|
1104
|
+
}), l.resumeHistory(), null;
|
|
1066
1105
|
}
|
|
1067
1106
|
});
|
|
1068
1107
|
}
|
|
@@ -1075,24 +1114,24 @@ class L {
|
|
|
1075
1114
|
* @returns возвращает Promise с Blob-объектом уменьшенного изображения
|
|
1076
1115
|
*/
|
|
1077
1116
|
resizeImageToBoundaries(e, t = "max") {
|
|
1078
|
-
return
|
|
1079
|
-
let s = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${
|
|
1080
|
-
t === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${
|
|
1081
|
-
const
|
|
1117
|
+
return y(this, null, function* () {
|
|
1118
|
+
let s = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${w}x${T}`;
|
|
1119
|
+
t === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${R}x${U}`);
|
|
1120
|
+
const a = {
|
|
1082
1121
|
dataURL: e,
|
|
1083
1122
|
sizeType: t,
|
|
1084
|
-
maxWidth:
|
|
1085
|
-
maxHeight:
|
|
1086
|
-
minWidth:
|
|
1087
|
-
minHeight:
|
|
1123
|
+
maxWidth: w,
|
|
1124
|
+
maxHeight: T,
|
|
1125
|
+
minWidth: R,
|
|
1126
|
+
minHeight: U
|
|
1088
1127
|
};
|
|
1089
1128
|
return this.editor.errorManager.emitWarning({
|
|
1090
1129
|
origin: "ImageManager",
|
|
1091
1130
|
method: "resizeImageToBoundaries",
|
|
1092
1131
|
code: "IMAGE_RESIZE_WARNING",
|
|
1093
1132
|
message: s,
|
|
1094
|
-
data:
|
|
1095
|
-
}), this.editor.workerManager.post("resizeImage",
|
|
1133
|
+
data: a
|
|
1134
|
+
}), this.editor.workerManager.post("resizeImage", a);
|
|
1096
1135
|
});
|
|
1097
1136
|
}
|
|
1098
1137
|
/**
|
|
@@ -1107,101 +1146,101 @@ class L {
|
|
|
1107
1146
|
* @fires editor:canvas-exported
|
|
1108
1147
|
*/
|
|
1109
1148
|
exportCanvasAsImageFile() {
|
|
1110
|
-
return
|
|
1149
|
+
return y(this, arguments, function* (e = {}) {
|
|
1111
1150
|
const {
|
|
1112
1151
|
fileName: t = "image.png",
|
|
1113
1152
|
contentType: s = "image/png",
|
|
1114
|
-
exportAsBase64:
|
|
1115
|
-
exportAsBlob:
|
|
1116
|
-
} = e, { canvas:
|
|
1153
|
+
exportAsBase64: a = !1,
|
|
1154
|
+
exportAsBlob: n = !1
|
|
1155
|
+
} = e, { canvas: o, montageArea: i, workerManager: c } = this.editor;
|
|
1117
1156
|
try {
|
|
1118
|
-
const
|
|
1119
|
-
|
|
1120
|
-
const { left: g, top:
|
|
1121
|
-
|
|
1122
|
-
const
|
|
1123
|
-
|
|
1124
|
-
const
|
|
1125
|
-
if (l === "svg" &&
|
|
1126
|
-
const
|
|
1127
|
-
|
|
1128
|
-
const
|
|
1129
|
-
image:
|
|
1130
|
-
exportAsBase64:
|
|
1131
|
-
exportAsBlob:
|
|
1157
|
+
const d = s === "application/pdf", h = d ? "image/jpg" : s, l = O.getFormatFromContentType(h);
|
|
1158
|
+
i.setCoords();
|
|
1159
|
+
const { left: g, top: u, width: f, height: m } = i.getBoundingRect(), M = yield o.clone(["id", "format", "locked"]);
|
|
1160
|
+
M.enableRetinaScaling = !1, ["image/jpg", "image/jpeg"].includes(h) && (M.backgroundColor = "#ffffff");
|
|
1161
|
+
const j = M.getObjects().find((p) => p.id === i.id);
|
|
1162
|
+
j && (j.visible = !1), M.viewportTransform = [1, 0, 0, 1, -g, -u], M.setDimensions({ width: f, height: m }, { backstoreOnly: !0 }), M.renderAll();
|
|
1163
|
+
const b = M.getObjects().filter((p) => p.format).every((p) => p.format === "svg");
|
|
1164
|
+
if (l === "svg" && b) {
|
|
1165
|
+
const p = M.toSVG();
|
|
1166
|
+
M.dispose();
|
|
1167
|
+
const D = {
|
|
1168
|
+
image: O._exportSVGStringAsFile(p, {
|
|
1169
|
+
exportAsBase64: a,
|
|
1170
|
+
exportAsBlob: n,
|
|
1132
1171
|
fileName: t
|
|
1133
1172
|
}),
|
|
1134
1173
|
format: "svg",
|
|
1135
1174
|
contentType: "image/svg+xml",
|
|
1136
1175
|
fileName: t.replace(/\.[^/.]+$/, ".svg")
|
|
1137
1176
|
};
|
|
1138
|
-
return
|
|
1177
|
+
return o.fire("editor:canvas-exported", D), D;
|
|
1139
1178
|
}
|
|
1140
|
-
const S = yield new Promise((
|
|
1141
|
-
|
|
1142
|
-
|
|
1179
|
+
const S = yield new Promise((p, B) => {
|
|
1180
|
+
M.getElement().toBlob((D) => {
|
|
1181
|
+
D ? p(D) : B(new Error("Failed to create Blob from canvas"));
|
|
1143
1182
|
});
|
|
1144
1183
|
});
|
|
1145
|
-
if (
|
|
1146
|
-
const
|
|
1184
|
+
if (M.dispose(), n) {
|
|
1185
|
+
const p = {
|
|
1147
1186
|
image: S,
|
|
1148
1187
|
format: l,
|
|
1149
1188
|
contentType: h,
|
|
1150
1189
|
fileName: t
|
|
1151
1190
|
};
|
|
1152
|
-
return
|
|
1191
|
+
return o.fire("editor:canvas-exported", p), p;
|
|
1153
1192
|
}
|
|
1154
|
-
const
|
|
1193
|
+
const k = yield createImageBitmap(S), H = yield c.post(
|
|
1155
1194
|
"toDataURL",
|
|
1156
|
-
{ format: l, quality: 1, bitmap:
|
|
1157
|
-
[
|
|
1195
|
+
{ format: l, quality: 1, bitmap: k },
|
|
1196
|
+
[k]
|
|
1158
1197
|
);
|
|
1159
|
-
if (
|
|
1160
|
-
const
|
|
1161
|
-
orientation:
|
|
1198
|
+
if (d) {
|
|
1199
|
+
const B = f * 0.264583, D = m * 0.264583, pe = (yield this.editor.moduleLoader.loadModule("jspdf")).jsPDF, J = new pe({
|
|
1200
|
+
orientation: B > D ? "landscape" : "portrait",
|
|
1162
1201
|
unit: "mm",
|
|
1163
|
-
format: [
|
|
1202
|
+
format: [B, D]
|
|
1164
1203
|
});
|
|
1165
|
-
if (
|
|
1166
|
-
const
|
|
1167
|
-
image:
|
|
1204
|
+
if (J.addImage(String(H), "JPG", 0, 0, B, D), a) {
|
|
1205
|
+
const de = {
|
|
1206
|
+
image: J.output("datauristring"),
|
|
1168
1207
|
format: "pdf",
|
|
1169
1208
|
contentType: "application/pdf",
|
|
1170
1209
|
fileName: t
|
|
1171
1210
|
};
|
|
1172
|
-
return
|
|
1211
|
+
return o.fire("editor:canvas-exported", de), de;
|
|
1173
1212
|
}
|
|
1174
|
-
const
|
|
1175
|
-
image: new File([
|
|
1213
|
+
const Ie = J.output("blob"), ce = {
|
|
1214
|
+
image: new File([Ie], t, { type: "application/pdf" }),
|
|
1176
1215
|
format: "pdf",
|
|
1177
1216
|
contentType: "application/pdf",
|
|
1178
1217
|
fileName: t
|
|
1179
1218
|
};
|
|
1180
|
-
return
|
|
1219
|
+
return o.fire("editor:canvas-exported", ce), ce;
|
|
1181
1220
|
}
|
|
1182
|
-
if (
|
|
1183
|
-
const
|
|
1184
|
-
image:
|
|
1221
|
+
if (a) {
|
|
1222
|
+
const p = {
|
|
1223
|
+
image: H,
|
|
1185
1224
|
format: l,
|
|
1186
1225
|
contentType: h,
|
|
1187
1226
|
fileName: t
|
|
1188
1227
|
};
|
|
1189
|
-
return
|
|
1228
|
+
return o.fire("editor:canvas-exported", p), p;
|
|
1190
1229
|
}
|
|
1191
|
-
const
|
|
1192
|
-
image: new File([S],
|
|
1230
|
+
const C = l === "svg" && !b ? t.replace(/\.[^/.]+$/, ".png") : t, L = {
|
|
1231
|
+
image: new File([S], C, { type: h }),
|
|
1193
1232
|
format: l,
|
|
1194
1233
|
contentType: h,
|
|
1195
|
-
fileName:
|
|
1234
|
+
fileName: C
|
|
1196
1235
|
};
|
|
1197
|
-
return
|
|
1198
|
-
} catch (
|
|
1236
|
+
return o.fire("editor:canvas-exported", L), L;
|
|
1237
|
+
} catch (d) {
|
|
1199
1238
|
return this.editor.errorManager.emitError({
|
|
1200
1239
|
origin: "ImageManager",
|
|
1201
1240
|
method: "exportCanvasAsImageFile",
|
|
1202
1241
|
code: "IMAGE_EXPORT_FAILED",
|
|
1203
|
-
message: `Ошибка экспорта изображения: ${
|
|
1204
|
-
data: { contentType: s, fileName: t, exportAsBase64:
|
|
1242
|
+
message: `Ошибка экспорта изображения: ${d.message}`,
|
|
1243
|
+
data: { contentType: s, fileName: t, exportAsBase64: a, exportAsBlob: n }
|
|
1205
1244
|
}), null;
|
|
1206
1245
|
}
|
|
1207
1246
|
});
|
|
@@ -1218,40 +1257,40 @@ class L {
|
|
|
1218
1257
|
* @fires editor:object-exported
|
|
1219
1258
|
*/
|
|
1220
1259
|
exportObjectAsImageFile() {
|
|
1221
|
-
return
|
|
1260
|
+
return y(this, arguments, function* (e = {}) {
|
|
1222
1261
|
const {
|
|
1223
1262
|
object: t,
|
|
1224
1263
|
fileName: s = "image.png",
|
|
1225
|
-
contentType:
|
|
1226
|
-
exportAsBase64:
|
|
1227
|
-
exportAsBlob:
|
|
1228
|
-
} = e, { canvas:
|
|
1229
|
-
if (!
|
|
1264
|
+
contentType: a = "image/png",
|
|
1265
|
+
exportAsBase64: n = !1,
|
|
1266
|
+
exportAsBlob: o = !1
|
|
1267
|
+
} = e, { canvas: i, workerManager: c } = this.editor, d = t || i.getActiveObject();
|
|
1268
|
+
if (!d)
|
|
1230
1269
|
return this.editor.errorManager.emitError({
|
|
1231
1270
|
origin: "ImageManager",
|
|
1232
1271
|
method: "exportObjectAsImageFile",
|
|
1233
1272
|
code: "NO_OBJECT_SELECTED",
|
|
1234
1273
|
message: "Не выбран объект для экспорта",
|
|
1235
|
-
data: { contentType:
|
|
1274
|
+
data: { contentType: a, fileName: s, exportAsBase64: n, exportAsBlob: o }
|
|
1236
1275
|
}), null;
|
|
1237
1276
|
try {
|
|
1238
|
-
const h =
|
|
1277
|
+
const h = O.getFormatFromContentType(a);
|
|
1239
1278
|
if (h === "svg") {
|
|
1240
|
-
const m =
|
|
1241
|
-
exportAsBase64:
|
|
1242
|
-
exportAsBlob:
|
|
1279
|
+
const m = d.toSVG(), M = O._exportSVGStringAsFile(m, {
|
|
1280
|
+
exportAsBase64: n,
|
|
1281
|
+
exportAsBlob: o,
|
|
1243
1282
|
fileName: s
|
|
1244
|
-
}),
|
|
1245
|
-
object:
|
|
1246
|
-
image:
|
|
1283
|
+
}), j = {
|
|
1284
|
+
object: d,
|
|
1285
|
+
image: M,
|
|
1247
1286
|
format: h,
|
|
1248
1287
|
contentType: "image/svg+xml",
|
|
1249
1288
|
fileName: s.replace(/\.[^/.]+$/, ".svg")
|
|
1250
1289
|
};
|
|
1251
|
-
return
|
|
1290
|
+
return i.fire("editor:object-exported", j), j;
|
|
1252
1291
|
}
|
|
1253
|
-
if (
|
|
1254
|
-
const m = yield createImageBitmap(
|
|
1292
|
+
if (n && d instanceof z) {
|
|
1293
|
+
const m = yield createImageBitmap(d.getElement()), M = yield c.post(
|
|
1255
1294
|
"toDataURL",
|
|
1256
1295
|
{
|
|
1257
1296
|
format: h,
|
|
@@ -1259,47 +1298,47 @@ class L {
|
|
|
1259
1298
|
bitmap: m
|
|
1260
1299
|
},
|
|
1261
1300
|
[m]
|
|
1262
|
-
),
|
|
1263
|
-
object:
|
|
1264
|
-
image:
|
|
1301
|
+
), j = {
|
|
1302
|
+
object: d,
|
|
1303
|
+
image: M,
|
|
1265
1304
|
format: h,
|
|
1266
|
-
contentType:
|
|
1305
|
+
contentType: a,
|
|
1267
1306
|
fileName: s
|
|
1268
1307
|
};
|
|
1269
|
-
return
|
|
1308
|
+
return i.fire("editor:object-exported", j), j;
|
|
1270
1309
|
}
|
|
1271
|
-
const l =
|
|
1310
|
+
const l = d.toCanvasElement({
|
|
1272
1311
|
enableRetinaScaling: !1
|
|
1273
|
-
}), g = yield new Promise((m,
|
|
1274
|
-
l.toBlob((
|
|
1275
|
-
|
|
1312
|
+
}), g = yield new Promise((m, M) => {
|
|
1313
|
+
l.toBlob((j) => {
|
|
1314
|
+
j ? m(j) : M(new Error("Failed to create Blob from canvas"));
|
|
1276
1315
|
});
|
|
1277
1316
|
});
|
|
1278
|
-
if (
|
|
1317
|
+
if (o) {
|
|
1279
1318
|
const m = {
|
|
1280
|
-
object:
|
|
1319
|
+
object: d,
|
|
1281
1320
|
image: g,
|
|
1282
1321
|
format: h,
|
|
1283
|
-
contentType:
|
|
1322
|
+
contentType: a,
|
|
1284
1323
|
fileName: s
|
|
1285
1324
|
};
|
|
1286
|
-
return
|
|
1325
|
+
return i.fire("editor:object-exported", m), m;
|
|
1287
1326
|
}
|
|
1288
|
-
const
|
|
1289
|
-
object:
|
|
1290
|
-
image:
|
|
1327
|
+
const u = new File([g], s, { type: a }), f = {
|
|
1328
|
+
object: d,
|
|
1329
|
+
image: u,
|
|
1291
1330
|
format: h,
|
|
1292
|
-
contentType:
|
|
1331
|
+
contentType: a,
|
|
1293
1332
|
fileName: s
|
|
1294
1333
|
};
|
|
1295
|
-
return
|
|
1334
|
+
return i.fire("editor:object-exported", f), f;
|
|
1296
1335
|
} catch (h) {
|
|
1297
1336
|
return this.editor.errorManager.emitError({
|
|
1298
1337
|
origin: "ImageManager",
|
|
1299
1338
|
method: "exportObjectAsImageFile",
|
|
1300
1339
|
code: "IMAGE_EXPORT_FAILED",
|
|
1301
1340
|
message: `Ошибка экспорта объекта: ${h.message}`,
|
|
1302
|
-
data: { contentType:
|
|
1341
|
+
data: { contentType: a, fileName: s, exportAsBase64: n, exportAsBlob: o }
|
|
1303
1342
|
}), null;
|
|
1304
1343
|
}
|
|
1305
1344
|
});
|
|
@@ -1315,7 +1354,7 @@ class L {
|
|
|
1315
1354
|
* @returns массив допустимых форматов изображений
|
|
1316
1355
|
*/
|
|
1317
1356
|
getAllowedFormatsFromContentTypes() {
|
|
1318
|
-
return this.acceptContentTypes.map((e) =>
|
|
1357
|
+
return this.acceptContentTypes.map((e) => O.getFormatFromContentType(e)).filter((e) => e);
|
|
1319
1358
|
}
|
|
1320
1359
|
/**
|
|
1321
1360
|
* Проверяет, является ли contentType допустимым типом изображения.
|
|
@@ -1331,7 +1370,7 @@ class L {
|
|
|
1331
1370
|
* @public
|
|
1332
1371
|
*/
|
|
1333
1372
|
getContentType(e) {
|
|
1334
|
-
return
|
|
1373
|
+
return y(this, null, function* () {
|
|
1335
1374
|
return typeof e == "string" ? this.getContentTypeFromUrl(e) : e.type || "application/octet-stream";
|
|
1336
1375
|
});
|
|
1337
1376
|
}
|
|
@@ -1342,7 +1381,7 @@ class L {
|
|
|
1342
1381
|
* @public
|
|
1343
1382
|
*/
|
|
1344
1383
|
getContentTypeFromUrl(e) {
|
|
1345
|
-
return
|
|
1384
|
+
return y(this, null, function* () {
|
|
1346
1385
|
if (e.startsWith("data:")) {
|
|
1347
1386
|
const t = e.match(/^data:([^;]+)/);
|
|
1348
1387
|
return t ? t[1] : "application/octet-stream";
|
|
@@ -1366,11 +1405,11 @@ class L {
|
|
|
1366
1405
|
getContentTypeFromExtension(e) {
|
|
1367
1406
|
var t;
|
|
1368
1407
|
try {
|
|
1369
|
-
const
|
|
1370
|
-
return this.acceptContentTypes.forEach((
|
|
1371
|
-
const
|
|
1372
|
-
|
|
1373
|
-
}),
|
|
1408
|
+
const a = (t = new URL(e).pathname.split(".").pop()) == null ? void 0 : t.toLowerCase(), n = {};
|
|
1409
|
+
return this.acceptContentTypes.forEach((o) => {
|
|
1410
|
+
const i = O.getFormatFromContentType(o);
|
|
1411
|
+
i && (n[i] = o);
|
|
1412
|
+
}), a && n[a] || "application/octet-stream";
|
|
1374
1413
|
} catch (s) {
|
|
1375
1414
|
return console.warn("Не удалось определить расширение из URL:", e, s), "application/octet-stream";
|
|
1376
1415
|
}
|
|
@@ -1388,8 +1427,8 @@ class L {
|
|
|
1388
1427
|
}) {
|
|
1389
1428
|
const { montageArea: s } = this.editor;
|
|
1390
1429
|
if (!s || !e) return 1;
|
|
1391
|
-
const
|
|
1392
|
-
return t === "contain" || t === "image-contain" ? Math.min(
|
|
1430
|
+
const a = s.width, n = s.height, { width: o, height: i } = e;
|
|
1431
|
+
return t === "contain" || t === "image-contain" ? Math.min(a / o, n / i) : t === "cover" || t === "image-cover" ? Math.max(a / o, n / i) : 1;
|
|
1393
1432
|
}
|
|
1394
1433
|
/**
|
|
1395
1434
|
* Преобразует SVG-строку в Blob, файл, или base64
|
|
@@ -1405,9 +1444,9 @@ class L {
|
|
|
1405
1444
|
static _exportSVGStringAsFile(e, {
|
|
1406
1445
|
exportAsBase64: t,
|
|
1407
1446
|
exportAsBlob: s,
|
|
1408
|
-
fileName:
|
|
1447
|
+
fileName: a = "image.svg"
|
|
1409
1448
|
} = {}) {
|
|
1410
|
-
return s ? new Blob([e], { type: "image/svg+xml" }) : t ? `data:image/svg+xml;base64,${window.btoa(encodeURIComponent(e))}` : new File([e],
|
|
1449
|
+
return s ? new Blob([e], { type: "image/svg+xml" }) : t ? `data:image/svg+xml;base64,${window.btoa(encodeURIComponent(e))}` : new File([e], a.replace(/\.[^/.]+$/, ".svg"), { type: "image/svg+xml" });
|
|
1411
1450
|
}
|
|
1412
1451
|
/**
|
|
1413
1452
|
* Извлекает чистый формат (subtype) из contentType,
|
|
@@ -1421,11 +1460,11 @@ class L {
|
|
|
1421
1460
|
return t ? t[1] : "";
|
|
1422
1461
|
}
|
|
1423
1462
|
}
|
|
1424
|
-
const
|
|
1425
|
-
function
|
|
1463
|
+
const _ = (r, e, t) => Math.max(Math.min(r, t), e), je = (r, e) => r * e, rt = (r, e) => new G(r / 2, e / 2);
|
|
1464
|
+
function ct(r) {
|
|
1426
1465
|
return ((r == null ? void 0 : r.type) === "image" || (r == null ? void 0 : r.format) === "svg") && typeof (r == null ? void 0 : r.width) == "number" && typeof (r == null ? void 0 : r.height) == "number";
|
|
1427
1466
|
}
|
|
1428
|
-
class
|
|
1467
|
+
class dt {
|
|
1429
1468
|
/**
|
|
1430
1469
|
* @param options
|
|
1431
1470
|
* @param options.editor – экземпляр редактора
|
|
@@ -1449,25 +1488,25 @@ class rt {
|
|
|
1449
1488
|
* @param options.adaptCanvasToContainer - Адаптировать канвас к контейнеру
|
|
1450
1489
|
* @fires editor:resolution-width-changed
|
|
1451
1490
|
*/
|
|
1452
|
-
setResolutionWidth(e, { preserveProportional: t, withoutSave: s, adaptCanvasToContainer:
|
|
1491
|
+
setResolutionWidth(e, { preserveProportional: t, withoutSave: s, adaptCanvasToContainer: a } = {}) {
|
|
1453
1492
|
var f;
|
|
1454
1493
|
if (!e) return;
|
|
1455
1494
|
const {
|
|
1456
|
-
canvas:
|
|
1457
|
-
montageArea:
|
|
1458
|
-
options: { canvasBackstoreWidth:
|
|
1459
|
-
} = this.editor, { width:
|
|
1460
|
-
if (!
|
|
1461
|
-
const m = h /
|
|
1462
|
-
this.setResolutionHeight(
|
|
1495
|
+
canvas: n,
|
|
1496
|
+
montageArea: o,
|
|
1497
|
+
options: { canvasBackstoreWidth: i }
|
|
1498
|
+
} = this.editor, { width: c, height: d } = o, h = _(Number(e), R, w);
|
|
1499
|
+
if (!i || i === "auto" || a ? this.adaptCanvasToContainer() : i ? this.setCanvasBackstoreWidth(Number(i)) : this.setCanvasBackstoreWidth(h), o.set({ width: h }), (f = n.clipPath) == null || f.set({ width: h }), t) {
|
|
1500
|
+
const m = h / c, M = je(d, m);
|
|
1501
|
+
this.setResolutionHeight(M);
|
|
1463
1502
|
return;
|
|
1464
1503
|
}
|
|
1465
|
-
const { left: l, top: g } = this.getObjectDefaultCoords(
|
|
1466
|
-
|
|
1504
|
+
const { left: l, top: g } = this.getObjectDefaultCoords(o), u = n.getZoom();
|
|
1505
|
+
n.setViewportTransform([u, 0, 0, u, l, g]), this.centerMontageArea(), s || this.editor.historyManager.saveState(), n.fire("editor:resolution-width-changed", {
|
|
1467
1506
|
width: h,
|
|
1468
1507
|
preserveProportional: t,
|
|
1469
1508
|
withoutSave: s,
|
|
1470
|
-
adaptCanvasToContainer:
|
|
1509
|
+
adaptCanvasToContainer: a
|
|
1471
1510
|
});
|
|
1472
1511
|
}
|
|
1473
1512
|
/**
|
|
@@ -1479,25 +1518,25 @@ class rt {
|
|
|
1479
1518
|
* @param options.adaptCanvasToContainer - Адаптировать канвас к контейнеру
|
|
1480
1519
|
* @fires editor:resolution-height-changed
|
|
1481
1520
|
*/
|
|
1482
|
-
setResolutionHeight(e, { preserveProportional: t, withoutSave: s, adaptCanvasToContainer:
|
|
1521
|
+
setResolutionHeight(e, { preserveProportional: t, withoutSave: s, adaptCanvasToContainer: a } = {}) {
|
|
1483
1522
|
var f;
|
|
1484
1523
|
if (!e) return;
|
|
1485
1524
|
const {
|
|
1486
|
-
canvas:
|
|
1487
|
-
montageArea:
|
|
1488
|
-
options: { canvasBackstoreHeight:
|
|
1489
|
-
} = this.editor, { width:
|
|
1490
|
-
if (!
|
|
1491
|
-
const m = h /
|
|
1492
|
-
this.setResolutionWidth(
|
|
1525
|
+
canvas: n,
|
|
1526
|
+
montageArea: o,
|
|
1527
|
+
options: { canvasBackstoreHeight: i }
|
|
1528
|
+
} = this.editor, { width: c, height: d } = o, h = _(Number(e), U, T);
|
|
1529
|
+
if (!i || i === "auto" || a ? this.adaptCanvasToContainer() : i ? this.setCanvasBackstoreHeight(Number(i)) : this.setCanvasBackstoreHeight(h), o.set({ height: h }), (f = n.clipPath) == null || f.set({ height: h }), t) {
|
|
1530
|
+
const m = h / d, M = je(c, m);
|
|
1531
|
+
this.setResolutionWidth(M);
|
|
1493
1532
|
return;
|
|
1494
1533
|
}
|
|
1495
|
-
const { left: l, top: g } = this.getObjectDefaultCoords(
|
|
1496
|
-
|
|
1534
|
+
const { left: l, top: g } = this.getObjectDefaultCoords(o), u = n.getZoom();
|
|
1535
|
+
n.setViewportTransform([u, 0, 0, u, l, g]), this.centerMontageArea(), s || this.editor.historyManager.saveState(), n.fire("editor:resolution-height-changed", {
|
|
1497
1536
|
height: h,
|
|
1498
1537
|
preserveProportional: t,
|
|
1499
1538
|
withoutSave: s,
|
|
1500
|
-
adaptCanvasToContainer:
|
|
1539
|
+
adaptCanvasToContainer: a
|
|
1501
1540
|
});
|
|
1502
1541
|
}
|
|
1503
1542
|
/**
|
|
@@ -1505,17 +1544,17 @@ class rt {
|
|
|
1505
1544
|
* и устанавливает правильный viewportTransform.
|
|
1506
1545
|
*/
|
|
1507
1546
|
centerMontageArea() {
|
|
1508
|
-
var
|
|
1509
|
-
const { canvas: e, montageArea: t } = this.editor, s = e.getWidth(),
|
|
1547
|
+
var c;
|
|
1548
|
+
const { canvas: e, montageArea: t } = this.editor, s = e.getWidth(), a = e.getHeight(), n = e.getZoom(), o = rt(s, a);
|
|
1510
1549
|
t.set({
|
|
1511
1550
|
left: s / 2,
|
|
1512
|
-
top:
|
|
1513
|
-
}), (
|
|
1551
|
+
top: a / 2
|
|
1552
|
+
}), (c = e.clipPath) == null || c.set({
|
|
1514
1553
|
left: s / 2,
|
|
1515
|
-
top:
|
|
1554
|
+
top: a / 2
|
|
1516
1555
|
}), e.renderAll();
|
|
1517
|
-
const
|
|
1518
|
-
|
|
1556
|
+
const i = e.viewportTransform;
|
|
1557
|
+
i[4] = s / 2 - o.x * n, i[5] = a / 2 - o.y * n, e.setViewportTransform(i), e.renderAll();
|
|
1519
1558
|
}
|
|
1520
1559
|
/**
|
|
1521
1560
|
* Метод для получения координат объекта с учетом текущего зума
|
|
@@ -1531,15 +1570,15 @@ class rt {
|
|
|
1531
1570
|
code: "NO_ACTIVE_OBJECT",
|
|
1532
1571
|
message: "Не выбран объект для получения координат"
|
|
1533
1572
|
}), { left: 0, top: 0 };
|
|
1534
|
-
const { width:
|
|
1535
|
-
return { left:
|
|
1573
|
+
const { width: a, height: n } = s, o = t.getZoom(), i = (a - a * o) / 2, c = (n - n * o) / 2;
|
|
1574
|
+
return { left: i, top: c };
|
|
1536
1575
|
}
|
|
1537
1576
|
/**
|
|
1538
1577
|
* Устанавливаем ширину канваса в backstore (для экспорта)
|
|
1539
1578
|
*/
|
|
1540
1579
|
setCanvasBackstoreWidth(e) {
|
|
1541
1580
|
if (!e || typeof e != "number") return;
|
|
1542
|
-
const t =
|
|
1581
|
+
const t = _(e, R, w);
|
|
1543
1582
|
this.editor.canvas.setDimensions({ width: t }, { backstoreOnly: !0 });
|
|
1544
1583
|
}
|
|
1545
1584
|
/**
|
|
@@ -1548,7 +1587,7 @@ class rt {
|
|
|
1548
1587
|
*/
|
|
1549
1588
|
setCanvasBackstoreHeight(e) {
|
|
1550
1589
|
if (!e || typeof e != "number") return;
|
|
1551
|
-
const t =
|
|
1590
|
+
const t = _(e, U, T);
|
|
1552
1591
|
this.editor.canvas.setDimensions({ height: t }, { backstoreOnly: !0 });
|
|
1553
1592
|
}
|
|
1554
1593
|
/**
|
|
@@ -1557,8 +1596,8 @@ class rt {
|
|
|
1557
1596
|
* с учётом минимальных и максимальных значений.
|
|
1558
1597
|
*/
|
|
1559
1598
|
adaptCanvasToContainer() {
|
|
1560
|
-
const { canvas: e } = this.editor, t = this.getEditorContainer(), s = t.clientWidth,
|
|
1561
|
-
e.setDimensions({ width:
|
|
1599
|
+
const { canvas: e } = this.editor, t = this.getEditorContainer(), s = t.clientWidth, a = t.clientHeight, n = _(s, R, w), o = _(a, U, T);
|
|
1600
|
+
e.setDimensions({ width: n, height: o }, { backstoreOnly: !0 });
|
|
1562
1601
|
}
|
|
1563
1602
|
/**
|
|
1564
1603
|
* Обновляет размеры канваса без изменения позиций объектов.
|
|
@@ -1571,27 +1610,27 @@ class rt {
|
|
|
1571
1610
|
montageArea: t,
|
|
1572
1611
|
montageArea: {
|
|
1573
1612
|
width: s,
|
|
1574
|
-
height:
|
|
1613
|
+
height: a
|
|
1575
1614
|
}
|
|
1576
|
-
} = this.editor,
|
|
1577
|
-
this.setResolutionWidth(s, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.setResolutionHeight(
|
|
1578
|
-
const
|
|
1579
|
-
if (
|
|
1580
|
-
const
|
|
1581
|
-
if ((
|
|
1582
|
-
const l =
|
|
1615
|
+
} = this.editor, n = t.left, o = t.top;
|
|
1616
|
+
this.setResolutionWidth(s, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.setResolutionHeight(a, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.centerMontageArea();
|
|
1617
|
+
const i = t.left - n, c = t.top - o;
|
|
1618
|
+
if (i !== 0 || c !== 0) {
|
|
1619
|
+
const d = e.getActiveObject(), h = [];
|
|
1620
|
+
if ((d == null ? void 0 : d.type) === "activeselection") {
|
|
1621
|
+
const l = d;
|
|
1583
1622
|
h.push(...l.getObjects()), e.discardActiveObject();
|
|
1584
1623
|
}
|
|
1585
1624
|
if (e.getObjects().forEach((l) => {
|
|
1586
|
-
l.id === "montage-area" || l.id === "overlay-mask" || (l.set({
|
|
1587
|
-
left: l.left +
|
|
1588
|
-
top: l.top +
|
|
1625
|
+
l.id === "montage-area" || l.id === "overlay-mask" || l.id === "background" || (l.set({
|
|
1626
|
+
left: l.left + i,
|
|
1627
|
+
top: l.top + c
|
|
1589
1628
|
}), l.setCoords());
|
|
1590
1629
|
}), h.length > 0)
|
|
1591
1630
|
if (h.length === 1)
|
|
1592
1631
|
e.setActiveObject(h[0]);
|
|
1593
1632
|
else {
|
|
1594
|
-
const l = new
|
|
1633
|
+
const l = new v(h, {
|
|
1595
1634
|
canvas: e
|
|
1596
1635
|
});
|
|
1597
1636
|
e.setActiveObject(l);
|
|
@@ -1599,7 +1638,7 @@ class rt {
|
|
|
1599
1638
|
}
|
|
1600
1639
|
e.renderAll(), e.fire("editor:canvas-updated", {
|
|
1601
1640
|
width: s,
|
|
1602
|
-
height:
|
|
1641
|
+
height: a
|
|
1603
1642
|
});
|
|
1604
1643
|
}
|
|
1605
1644
|
/**
|
|
@@ -1709,32 +1748,32 @@ class rt {
|
|
|
1709
1748
|
*/
|
|
1710
1749
|
setDisplayDimension({ element: e = "canvas", dimension: t, value: s } = {}) {
|
|
1711
1750
|
if (!s) return;
|
|
1712
|
-
const { canvas:
|
|
1751
|
+
const { canvas: a } = this.editor, n = [];
|
|
1713
1752
|
switch (e) {
|
|
1714
1753
|
case "canvas":
|
|
1715
|
-
|
|
1754
|
+
n.push(a.lowerCanvasEl, a.upperCanvasEl);
|
|
1716
1755
|
break;
|
|
1717
1756
|
case "wrapper":
|
|
1718
|
-
|
|
1757
|
+
n.push(a.wrapperEl);
|
|
1719
1758
|
break;
|
|
1720
1759
|
case "container":
|
|
1721
|
-
|
|
1760
|
+
n.push(this.getEditorContainer());
|
|
1722
1761
|
break;
|
|
1723
1762
|
default:
|
|
1724
|
-
|
|
1763
|
+
n.push(a.lowerCanvasEl, a.upperCanvasEl);
|
|
1725
1764
|
}
|
|
1726
|
-
const
|
|
1765
|
+
const o = t === "width" ? "width" : "height";
|
|
1727
1766
|
if (typeof s == "string") {
|
|
1728
|
-
|
|
1729
|
-
|
|
1767
|
+
n.forEach((c) => {
|
|
1768
|
+
c.style[o] = s;
|
|
1730
1769
|
});
|
|
1731
1770
|
return;
|
|
1732
1771
|
}
|
|
1733
1772
|
if (isNaN(s)) return;
|
|
1734
|
-
const
|
|
1735
|
-
|
|
1736
|
-
|
|
1737
|
-
}),
|
|
1773
|
+
const i = `${s}px`;
|
|
1774
|
+
n.forEach((c) => {
|
|
1775
|
+
c.style[o] = i;
|
|
1776
|
+
}), a.fire(`editor:display-${e}-${o}-changed`, {
|
|
1738
1777
|
element: e,
|
|
1739
1778
|
value: s
|
|
1740
1779
|
});
|
|
@@ -1749,28 +1788,28 @@ class rt {
|
|
|
1749
1788
|
*/
|
|
1750
1789
|
scaleMontageAreaToImage({ object: e, preserveAspectRatio: t, withoutSave: s } = {}) {
|
|
1751
1790
|
const {
|
|
1752
|
-
canvas:
|
|
1753
|
-
montageArea:
|
|
1754
|
-
transformManager:
|
|
1791
|
+
canvas: a,
|
|
1792
|
+
montageArea: n,
|
|
1793
|
+
transformManager: o,
|
|
1755
1794
|
options: {
|
|
1756
|
-
montageAreaWidth:
|
|
1757
|
-
montageAreaHeight:
|
|
1795
|
+
montageAreaWidth: i,
|
|
1796
|
+
montageAreaHeight: c
|
|
1758
1797
|
}
|
|
1759
|
-
} = this.editor,
|
|
1760
|
-
if (!
|
|
1761
|
-
const { width: h, height: l } =
|
|
1762
|
-
let g = Math.min(h,
|
|
1798
|
+
} = this.editor, d = e || a.getActiveObject();
|
|
1799
|
+
if (!ct(d)) return;
|
|
1800
|
+
const { width: h, height: l } = d;
|
|
1801
|
+
let g = Math.min(h, w), u = Math.min(l, T);
|
|
1763
1802
|
if (t) {
|
|
1764
1803
|
const {
|
|
1765
1804
|
width: f,
|
|
1766
1805
|
height: m
|
|
1767
|
-
} =
|
|
1768
|
-
g = f *
|
|
1806
|
+
} = n, M = h / f, j = l / m, b = Math.max(M, j);
|
|
1807
|
+
g = f * b, u = m * b;
|
|
1769
1808
|
}
|
|
1770
|
-
this.setResolutionWidth(g, { withoutSave: !0 }), this.setResolutionHeight(
|
|
1771
|
-
object:
|
|
1809
|
+
this.setResolutionWidth(g, { withoutSave: !0 }), this.setResolutionHeight(u, { withoutSave: !0 }), this.editor.backgroundManager.backgroundObject && this.editor.backgroundManager.refresh(), (h > i || l > c) && o.calculateAndApplyDefaultZoom(), o.resetObject({ object: d, withoutSave: !0 }), a.centerObject(d), a.renderAll(), s || this.editor.historyManager.saveState(), a.fire("editor:montage-area-scaled-to-image", {
|
|
1810
|
+
object: d,
|
|
1772
1811
|
width: g,
|
|
1773
|
-
height:
|
|
1812
|
+
height: u,
|
|
1774
1813
|
preserveAspectRatio: t,
|
|
1775
1814
|
withoutSave: s
|
|
1776
1815
|
});
|
|
@@ -1793,26 +1832,33 @@ class rt {
|
|
|
1793
1832
|
const {
|
|
1794
1833
|
canvas: t,
|
|
1795
1834
|
transformManager: s,
|
|
1796
|
-
historyManager:
|
|
1835
|
+
historyManager: a,
|
|
1797
1836
|
options: {
|
|
1798
|
-
montageAreaWidth:
|
|
1799
|
-
montageAreaHeight:
|
|
1837
|
+
montageAreaWidth: n,
|
|
1838
|
+
montageAreaHeight: o
|
|
1800
1839
|
}
|
|
1801
1840
|
} = this.editor;
|
|
1802
|
-
s.resetZoom(), this.setResolutionWidth(
|
|
1841
|
+
s.resetZoom(), this.setResolutionWidth(n, { withoutSave: !0 }), this.setResolutionHeight(o, { withoutSave: !0 }), t.renderAll(), s.resetObjects(), e || a.saveState(), t.fire("editor:default-scale-set");
|
|
1803
1842
|
}
|
|
1804
1843
|
/**
|
|
1805
1844
|
* Получение всех объектов внутри монтажной области редактора
|
|
1806
1845
|
* @returns массив объектов
|
|
1807
1846
|
*/
|
|
1808
1847
|
getObjects() {
|
|
1809
|
-
const {
|
|
1810
|
-
|
|
1848
|
+
const {
|
|
1849
|
+
canvas: e,
|
|
1850
|
+
montageArea: t,
|
|
1851
|
+
interactionBlocker: { overlayMask: s },
|
|
1852
|
+
backgroundManager: { backgroundObject: a }
|
|
1853
|
+
} = this.editor;
|
|
1854
|
+
return e.getObjects().filter(
|
|
1855
|
+
(o) => o.id !== t.id && o.id !== (s == null ? void 0 : s.id) && o.id !== (a == null ? void 0 : a.id)
|
|
1856
|
+
);
|
|
1811
1857
|
}
|
|
1812
1858
|
}
|
|
1813
|
-
class
|
|
1859
|
+
class lt {
|
|
1814
1860
|
constructor({ editor: e }) {
|
|
1815
|
-
this.editor = e, this.options = e.options, this.minZoom = this.options.minZoom ||
|
|
1861
|
+
this.editor = e, this.options = e.options, this.minZoom = this.options.minZoom || at, this.maxZoom = this.options.maxZoom || nt, this.defaultZoom = this.options.defaultScale;
|
|
1816
1862
|
}
|
|
1817
1863
|
/**
|
|
1818
1864
|
* Метод рассчитывает и применяет зум по умолчанию для монтажной области редактора.
|
|
@@ -1822,8 +1868,8 @@ class ct {
|
|
|
1822
1868
|
* @param scale - Желаемый масштаб относительно размеров контейнера редактора.
|
|
1823
1869
|
*/
|
|
1824
1870
|
calculateAndApplyDefaultZoom(e = this.options.defaultScale) {
|
|
1825
|
-
const { canvas: t } = this.editor, s = t.editorContainer,
|
|
1826
|
-
this.defaultZoom = Math.min(
|
|
1871
|
+
const { canvas: t } = this.editor, s = t.editorContainer, a = s.clientWidth, n = s.clientHeight, { width: o, height: i } = this.editor.montageArea, c = a / o * e, d = n / i * e;
|
|
1872
|
+
this.defaultZoom = Math.min(c, d), this.setZoom();
|
|
1827
1873
|
}
|
|
1828
1874
|
/**
|
|
1829
1875
|
* Увеличение/уменьшение масштаба
|
|
@@ -1834,13 +1880,13 @@ class ct {
|
|
|
1834
1880
|
* @fires editor:zoom-changed
|
|
1835
1881
|
* Если передавать координаты курсора, то нужно быть аккуратнее, так как юзер может выйти за пределы рабочей области
|
|
1836
1882
|
*/
|
|
1837
|
-
zoom(e =
|
|
1838
|
-
var g,
|
|
1883
|
+
zoom(e = ot, t = {}) {
|
|
1884
|
+
var g, u;
|
|
1839
1885
|
if (!e) return;
|
|
1840
|
-
const { minZoom: s, maxZoom:
|
|
1841
|
-
let l = Number((
|
|
1842
|
-
l >
|
|
1843
|
-
currentZoom:
|
|
1886
|
+
const { minZoom: s, maxZoom: a } = this, { canvas: n } = this.editor, o = n.getZoom(), i = n.getCenterPoint(), c = (g = t.pointX) != null ? g : i.x, d = (u = t.pointY) != null ? u : i.y, h = new G(c, d);
|
|
1887
|
+
let l = Number((o + Number(e)).toFixed(2));
|
|
1888
|
+
l > a && (l = a), l < s && (l = s), n.zoomToPoint(h, l), n.fire("editor:zoom-changed", {
|
|
1889
|
+
currentZoom: n.getZoom(),
|
|
1844
1890
|
zoom: l,
|
|
1845
1891
|
point: h
|
|
1846
1892
|
});
|
|
@@ -1851,12 +1897,12 @@ class ct {
|
|
|
1851
1897
|
* @fires editor:zoom-changed
|
|
1852
1898
|
*/
|
|
1853
1899
|
setZoom(e = this.defaultZoom) {
|
|
1854
|
-
const { minZoom: t, maxZoom: s } = this, { canvas:
|
|
1855
|
-
let
|
|
1856
|
-
e > s && (
|
|
1857
|
-
currentZoom:
|
|
1858
|
-
zoom:
|
|
1859
|
-
point:
|
|
1900
|
+
const { minZoom: t, maxZoom: s } = this, { canvas: a } = this.editor, n = new G(a.getCenterPoint());
|
|
1901
|
+
let o = e;
|
|
1902
|
+
e > s && (o = s), e < t && (o = t), a.zoomToPoint(n, o), a.fire("editor:zoom-changed", {
|
|
1903
|
+
currentZoom: a.getZoom(),
|
|
1904
|
+
zoom: o,
|
|
1905
|
+
point: n
|
|
1860
1906
|
});
|
|
1861
1907
|
}
|
|
1862
1908
|
/**
|
|
@@ -1864,7 +1910,7 @@ class ct {
|
|
|
1864
1910
|
* @fires editor:zoom-changed
|
|
1865
1911
|
*/
|
|
1866
1912
|
resetZoom() {
|
|
1867
|
-
const { canvas: e } = this.editor, t = new
|
|
1913
|
+
const { canvas: e } = this.editor, t = new G(e.getCenterPoint());
|
|
1868
1914
|
e.zoomToPoint(t, this.defaultZoom), this.editor.canvas.fire("editor:zoom-changed", {
|
|
1869
1915
|
currentZoom: e.getZoom(),
|
|
1870
1916
|
point: t
|
|
@@ -1878,13 +1924,13 @@ class ct {
|
|
|
1878
1924
|
* @fires editor:object-rotated
|
|
1879
1925
|
*/
|
|
1880
1926
|
rotate(e = it, { withoutSave: t } = {}) {
|
|
1881
|
-
const { canvas: s, historyManager:
|
|
1882
|
-
if (!
|
|
1883
|
-
const
|
|
1884
|
-
|
|
1885
|
-
object:
|
|
1927
|
+
const { canvas: s, historyManager: a } = this.editor, n = s.getActiveObject();
|
|
1928
|
+
if (!n) return;
|
|
1929
|
+
const o = n.angle + e;
|
|
1930
|
+
n.rotate(o), n.setCoords(), s.renderAll(), t || a.saveState(), s.fire("editor:object-rotated", {
|
|
1931
|
+
object: n,
|
|
1886
1932
|
withoutSave: t,
|
|
1887
|
-
angle:
|
|
1933
|
+
angle: o
|
|
1888
1934
|
});
|
|
1889
1935
|
}
|
|
1890
1936
|
/**
|
|
@@ -1894,9 +1940,9 @@ class ct {
|
|
|
1894
1940
|
* @fires editor:object-flipped-x
|
|
1895
1941
|
*/
|
|
1896
1942
|
flipX({ withoutSave: e } = {}) {
|
|
1897
|
-
const { canvas: t, historyManager: s } = this.editor,
|
|
1898
|
-
|
|
1899
|
-
object:
|
|
1943
|
+
const { canvas: t, historyManager: s } = this.editor, a = t.getActiveObject();
|
|
1944
|
+
a && (a.flipX = !a.flipX, t.renderAll(), e || s.saveState(), t.fire("editor:object-flipped-x", {
|
|
1945
|
+
object: a,
|
|
1900
1946
|
withoutSave: e
|
|
1901
1947
|
}));
|
|
1902
1948
|
}
|
|
@@ -1907,9 +1953,9 @@ class ct {
|
|
|
1907
1953
|
* @fires editor:object-flipped-y
|
|
1908
1954
|
*/
|
|
1909
1955
|
flipY({ withoutSave: e } = {}) {
|
|
1910
|
-
const { canvas: t, historyManager: s } = this.editor,
|
|
1911
|
-
|
|
1912
|
-
object:
|
|
1956
|
+
const { canvas: t, historyManager: s } = this.editor, a = t.getActiveObject();
|
|
1957
|
+
a && (a.flipY = !a.flipY, t.renderAll(), e || s.saveState(), t.fire("editor:object-flipped-y", {
|
|
1958
|
+
object: a,
|
|
1913
1959
|
withoutSave: e
|
|
1914
1960
|
}));
|
|
1915
1961
|
}
|
|
@@ -1926,11 +1972,11 @@ class ct {
|
|
|
1926
1972
|
opacity: t = 1,
|
|
1927
1973
|
withoutSave: s
|
|
1928
1974
|
} = {}) {
|
|
1929
|
-
const { canvas:
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
}) :
|
|
1933
|
-
object:
|
|
1975
|
+
const { canvas: a, historyManager: n } = this.editor, o = e || a.getActiveObject();
|
|
1976
|
+
o && (o instanceof v ? o.getObjects().forEach((i) => {
|
|
1977
|
+
i.set("opacity", t);
|
|
1978
|
+
}) : o.set("opacity", t), a.renderAll(), s || n.saveState(), a.fire("editor:object-opacity-changed", {
|
|
1979
|
+
object: o,
|
|
1934
1980
|
opacity: t,
|
|
1935
1981
|
withoutSave: s
|
|
1936
1982
|
}));
|
|
@@ -1950,24 +1996,24 @@ class ct {
|
|
|
1950
1996
|
object: e,
|
|
1951
1997
|
type: t = this.options.scaleType,
|
|
1952
1998
|
withoutSave: s,
|
|
1953
|
-
fitAsOneObject:
|
|
1999
|
+
fitAsOneObject: a
|
|
1954
2000
|
} = {}) {
|
|
1955
|
-
const { canvas:
|
|
1956
|
-
if (
|
|
1957
|
-
if (
|
|
1958
|
-
const
|
|
1959
|
-
|
|
2001
|
+
const { canvas: n, historyManager: o } = this.editor, i = e || n.getActiveObject();
|
|
2002
|
+
if (i) {
|
|
2003
|
+
if (i instanceof v && !a) {
|
|
2004
|
+
const c = i.getObjects();
|
|
2005
|
+
n.discardActiveObject(), c.forEach((h) => {
|
|
1960
2006
|
this._fitSingleObject(h, t);
|
|
1961
2007
|
});
|
|
1962
|
-
const
|
|
1963
|
-
|
|
2008
|
+
const d = new v(c, { canvas: n });
|
|
2009
|
+
n.setActiveObject(d);
|
|
1964
2010
|
} else
|
|
1965
|
-
this._fitSingleObject(
|
|
1966
|
-
|
|
1967
|
-
object:
|
|
2011
|
+
this._fitSingleObject(i, t);
|
|
2012
|
+
n.renderAll(), s || o.saveState(), n.fire("editor:object-fitted", {
|
|
2013
|
+
object: i,
|
|
1968
2014
|
type: t,
|
|
1969
2015
|
withoutSave: s,
|
|
1970
|
-
fitAsOneObject:
|
|
2016
|
+
fitAsOneObject: a
|
|
1971
2017
|
});
|
|
1972
2018
|
}
|
|
1973
2019
|
}
|
|
@@ -1978,11 +2024,11 @@ class ct {
|
|
|
1978
2024
|
* @private
|
|
1979
2025
|
*/
|
|
1980
2026
|
_fitSingleObject(e, t) {
|
|
1981
|
-
const { canvas: s, montageArea:
|
|
2027
|
+
const { canvas: s, montageArea: a } = this.editor, { width: n, height: o, scaleX: i = 1, scaleY: c = 1, angle: d = 0 } = e, h = n * Math.abs(i), l = o * Math.abs(c), g = d * Math.PI / 180, u = Math.abs(Math.cos(g)), f = Math.abs(Math.sin(g)), m = h * u + l * f, M = h * f + l * u, j = a.width, b = a.height;
|
|
1982
2028
|
let S;
|
|
1983
|
-
t === "contain" ? S = Math.min(
|
|
1984
|
-
scaleX:
|
|
1985
|
-
scaleY:
|
|
2029
|
+
t === "contain" ? S = Math.min(j / m, b / M) : S = Math.max(j / m, b / M), e.set({
|
|
2030
|
+
scaleX: i * S,
|
|
2031
|
+
scaleY: c * S
|
|
1986
2032
|
}), s.centerObject(e);
|
|
1987
2033
|
}
|
|
1988
2034
|
/**
|
|
@@ -2003,36 +2049,36 @@ class ct {
|
|
|
2003
2049
|
*/
|
|
2004
2050
|
resetObject({ object: e, alwaysFitObject: t = !1, withoutSave: s = !1 } = {}) {
|
|
2005
2051
|
const {
|
|
2006
|
-
canvas:
|
|
2007
|
-
montageArea:
|
|
2008
|
-
imageManager:
|
|
2009
|
-
historyManager:
|
|
2010
|
-
options: { scaleType:
|
|
2011
|
-
} = this.editor,
|
|
2012
|
-
if (!
|
|
2013
|
-
if (
|
|
2052
|
+
canvas: a,
|
|
2053
|
+
montageArea: n,
|
|
2054
|
+
imageManager: o,
|
|
2055
|
+
historyManager: i,
|
|
2056
|
+
options: { scaleType: c }
|
|
2057
|
+
} = this.editor, d = e || a.getActiveObject();
|
|
2058
|
+
if (!d || d.locked) return;
|
|
2059
|
+
if (i.suspendHistory(), d.type === "image" || d.format === "svg" || d.set({
|
|
2014
2060
|
scaleX: 1,
|
|
2015
2061
|
scaleY: 1,
|
|
2016
2062
|
flipX: !1,
|
|
2017
2063
|
flipY: !1,
|
|
2018
2064
|
angle: 0
|
|
2019
2065
|
}), t)
|
|
2020
|
-
this.fitObject({ object:
|
|
2066
|
+
this.fitObject({ object: d, withoutSave: !0, fitAsOneObject: !0 });
|
|
2021
2067
|
else {
|
|
2022
|
-
const { width: l, height: g } =
|
|
2023
|
-
imageObject:
|
|
2024
|
-
scaleType:
|
|
2068
|
+
const { width: l, height: g } = n, { width: u, height: f } = d, m = o.calculateScaleFactor({
|
|
2069
|
+
imageObject: d,
|
|
2070
|
+
scaleType: c
|
|
2025
2071
|
});
|
|
2026
|
-
|
|
2072
|
+
c === "contain" && m < 1 || c === "cover" && (u > l || f > g) ? this.fitObject({ object: d, withoutSave: !0, fitAsOneObject: !0 }) : d.set({ scaleX: 1, scaleY: 1 });
|
|
2027
2073
|
}
|
|
2028
|
-
|
|
2029
|
-
object:
|
|
2074
|
+
d.set({ flipX: !1, flipY: !1, angle: 0 }), a.centerObject(d), a.renderAll(), i.resumeHistory(), s || i.saveState(), a.fire("editor:object-reset", {
|
|
2075
|
+
object: d,
|
|
2030
2076
|
withoutSave: s,
|
|
2031
2077
|
alwaysFitObject: t
|
|
2032
2078
|
});
|
|
2033
2079
|
}
|
|
2034
2080
|
}
|
|
2035
|
-
class
|
|
2081
|
+
class ht {
|
|
2036
2082
|
constructor({ editor: e }) {
|
|
2037
2083
|
this.editor = e, this.isBlocked = !1, this.overlayMask = null, this._createOverlay();
|
|
2038
2084
|
}
|
|
@@ -2062,8 +2108,8 @@ class dt {
|
|
|
2062
2108
|
const { canvas: e, montageArea: t, historyManager: s } = this.editor;
|
|
2063
2109
|
if (!t || !this.overlayMask) return;
|
|
2064
2110
|
s.suspendHistory(), t.setCoords();
|
|
2065
|
-
const { left:
|
|
2066
|
-
this.overlayMask.set({ left:
|
|
2111
|
+
const { left: a, top: n, width: o, height: i } = t.getBoundingRect();
|
|
2112
|
+
this.overlayMask.set({ left: a, top: n, width: o, height: i }), e.discardActiveObject(), this.editor.layerManager.bringToFront(this.overlayMask, { withoutSave: !0 }), s.resumeHistory();
|
|
2067
2113
|
}
|
|
2068
2114
|
/**
|
|
2069
2115
|
* Выключает редактор:
|
|
@@ -2074,8 +2120,8 @@ class dt {
|
|
|
2074
2120
|
block() {
|
|
2075
2121
|
if (this.isBlocked || !this.overlayMask) return;
|
|
2076
2122
|
const { canvas: e, canvasManager: t, historyManager: s } = this.editor;
|
|
2077
|
-
s.suspendHistory(), this.isBlocked = !0, e.discardActiveObject(), e.selection = !1, e.skipTargetFind = !0, t.getObjects().forEach((
|
|
2078
|
-
|
|
2123
|
+
s.suspendHistory(), this.isBlocked = !0, e.discardActiveObject(), e.selection = !1, e.skipTargetFind = !0, t.getObjects().forEach((a) => {
|
|
2124
|
+
a.evented = !1, a.selectable = !1;
|
|
2079
2125
|
}), e.upperCanvasEl.style.pointerEvents = "none", e.lowerCanvasEl.style.pointerEvents = "none", this.overlayMask.visible = !0, this.refresh(), e.fire("editor:disabled"), s.resumeHistory();
|
|
2080
2126
|
}
|
|
2081
2127
|
/**
|
|
@@ -2084,12 +2130,339 @@ class dt {
|
|
|
2084
2130
|
unblock() {
|
|
2085
2131
|
if (!this.isBlocked || !this.overlayMask) return;
|
|
2086
2132
|
const { canvas: e, canvasManager: t, historyManager: s } = this.editor;
|
|
2087
|
-
s.suspendHistory(), this.isBlocked = !1, e.selection = !0, e.skipTargetFind = !1, t.getObjects().forEach((
|
|
2088
|
-
|
|
2133
|
+
s.suspendHistory(), this.isBlocked = !1, e.selection = !0, e.skipTargetFind = !1, t.getObjects().forEach((a) => {
|
|
2134
|
+
a.evented = !0, a.selectable = !0;
|
|
2089
2135
|
}), e.upperCanvasEl.style.pointerEvents = "", e.lowerCanvasEl.style.pointerEvents = "", this.overlayMask.visible = !1, e.requestRenderAll(), e.fire("editor:enabled"), s.resumeHistory();
|
|
2090
2136
|
}
|
|
2091
2137
|
}
|
|
2092
|
-
class
|
|
2138
|
+
class x {
|
|
2139
|
+
constructor({ editor: e }) {
|
|
2140
|
+
this.editor = e, this.backgroundObject = null;
|
|
2141
|
+
}
|
|
2142
|
+
/**
|
|
2143
|
+
* Устанавливает фон сплошного цвета.
|
|
2144
|
+
* @param options - Опции для установки цвета фона
|
|
2145
|
+
* @param options.color - Цвет фона в формате HEX (например, "#FF0000")
|
|
2146
|
+
* @param options.withoutSave - Если true, не сохранять состояние в историю
|
|
2147
|
+
*/
|
|
2148
|
+
setColorBackground({
|
|
2149
|
+
color: e,
|
|
2150
|
+
withoutSave: t = !1
|
|
2151
|
+
}) {
|
|
2152
|
+
try {
|
|
2153
|
+
const { historyManager: s } = this.editor, { backgroundObject: a } = this;
|
|
2154
|
+
if (s.suspendHistory(), a && a.backgroundType === "color") {
|
|
2155
|
+
if (a.fill === e) {
|
|
2156
|
+
s.resumeHistory();
|
|
2157
|
+
return;
|
|
2158
|
+
}
|
|
2159
|
+
a.set({ fill: e }), a.set("backgroundId", `background-${A()}`), this.editor.canvas.requestRenderAll();
|
|
2160
|
+
} else
|
|
2161
|
+
this._removeCurrentBackground(), this._createColorBackground(e);
|
|
2162
|
+
this.editor.canvas.fire("background:changed", { type: "color", color: e }), s.resumeHistory(), t || s.saveState();
|
|
2163
|
+
} catch (s) {
|
|
2164
|
+
this.editor.errorManager.emitError({
|
|
2165
|
+
code: "BACKGROUND_CREATION_FAILED",
|
|
2166
|
+
origin: "BackgroundManager",
|
|
2167
|
+
method: "setColorBackground",
|
|
2168
|
+
message: "Не удалось установить цветовой фон",
|
|
2169
|
+
data: { error: s }
|
|
2170
|
+
});
|
|
2171
|
+
}
|
|
2172
|
+
}
|
|
2173
|
+
/**
|
|
2174
|
+
* Устанавливает градиентный фон.
|
|
2175
|
+
* @param options - Опции для установки градиентного фона
|
|
2176
|
+
* @param options.gradient - Объект с параметрами градиента
|
|
2177
|
+
* @param options.withoutSave - Если true, не сохранять состояние в историю
|
|
2178
|
+
*/
|
|
2179
|
+
setGradientBackground({
|
|
2180
|
+
gradient: e,
|
|
2181
|
+
withoutSave: t = !1
|
|
2182
|
+
}) {
|
|
2183
|
+
try {
|
|
2184
|
+
const { historyManager: s } = this.editor, { backgroundObject: a } = this;
|
|
2185
|
+
if (s.suspendHistory(), a && a.backgroundType === "gradient") {
|
|
2186
|
+
const n = x._createFabricGradient(e);
|
|
2187
|
+
if (x._isGradientEqual(a.fill, n)) {
|
|
2188
|
+
s.resumeHistory();
|
|
2189
|
+
return;
|
|
2190
|
+
}
|
|
2191
|
+
a.set({ fill: n }), a.set("backgroundId", `background-${A()}`), this.editor.canvas.requestRenderAll();
|
|
2192
|
+
} else
|
|
2193
|
+
this._removeCurrentBackground(), this._createGradientBackground(e);
|
|
2194
|
+
this.editor.canvas.fire("background:changed", {
|
|
2195
|
+
type: "gradient",
|
|
2196
|
+
gradientParams: e
|
|
2197
|
+
}), s.resumeHistory(), t || s.saveState();
|
|
2198
|
+
} catch (s) {
|
|
2199
|
+
this.editor.errorManager.emitError({
|
|
2200
|
+
code: "BACKGROUND_CREATION_FAILED",
|
|
2201
|
+
origin: "BackgroundManager",
|
|
2202
|
+
method: "setGradientBackground",
|
|
2203
|
+
message: "Не удалось установить градиентный фон",
|
|
2204
|
+
data: { error: s }
|
|
2205
|
+
});
|
|
2206
|
+
}
|
|
2207
|
+
}
|
|
2208
|
+
/**
|
|
2209
|
+
* Устанавливает линейный градиентный фон.
|
|
2210
|
+
* @param options - Опции для установки линейного градиента
|
|
2211
|
+
*/
|
|
2212
|
+
setLinearGradientBackground({
|
|
2213
|
+
angle: e,
|
|
2214
|
+
startColor: t,
|
|
2215
|
+
endColor: s,
|
|
2216
|
+
startPosition: a,
|
|
2217
|
+
endPosition: n,
|
|
2218
|
+
withoutSave: o = !1
|
|
2219
|
+
}) {
|
|
2220
|
+
this.setGradientBackground({
|
|
2221
|
+
gradient: {
|
|
2222
|
+
type: "linear",
|
|
2223
|
+
angle: e,
|
|
2224
|
+
startColor: t,
|
|
2225
|
+
endColor: s,
|
|
2226
|
+
startPosition: a,
|
|
2227
|
+
endPosition: n
|
|
2228
|
+
},
|
|
2229
|
+
withoutSave: o
|
|
2230
|
+
});
|
|
2231
|
+
}
|
|
2232
|
+
/**
|
|
2233
|
+
* Устанавливает радиальный градиентный фон.
|
|
2234
|
+
* @param options - Опции для установки радиального градиента
|
|
2235
|
+
*/
|
|
2236
|
+
setRadialGradientBackground({
|
|
2237
|
+
centerX: e,
|
|
2238
|
+
centerY: t,
|
|
2239
|
+
radius: s,
|
|
2240
|
+
startColor: a,
|
|
2241
|
+
endColor: n,
|
|
2242
|
+
startPosition: o,
|
|
2243
|
+
endPosition: i,
|
|
2244
|
+
withoutSave: c = !1
|
|
2245
|
+
}) {
|
|
2246
|
+
this.setGradientBackground({
|
|
2247
|
+
gradient: {
|
|
2248
|
+
type: "radial",
|
|
2249
|
+
centerX: e,
|
|
2250
|
+
centerY: t,
|
|
2251
|
+
radius: s,
|
|
2252
|
+
startColor: a,
|
|
2253
|
+
endColor: n,
|
|
2254
|
+
startPosition: o,
|
|
2255
|
+
endPosition: i
|
|
2256
|
+
},
|
|
2257
|
+
withoutSave: c
|
|
2258
|
+
});
|
|
2259
|
+
}
|
|
2260
|
+
/**
|
|
2261
|
+
* Устанавливает фон из изображения.
|
|
2262
|
+
* @param options - Опции для установки фонового изображения
|
|
2263
|
+
* @param options.imageUrl - URL изображения
|
|
2264
|
+
* @param options.withoutSave - Если true, не сохранять состояние в историю
|
|
2265
|
+
*/
|
|
2266
|
+
setImageBackground(s) {
|
|
2267
|
+
return y(this, arguments, function* ({
|
|
2268
|
+
imageSource: e,
|
|
2269
|
+
withoutSave: t = !1
|
|
2270
|
+
}) {
|
|
2271
|
+
try {
|
|
2272
|
+
const { historyManager: a } = this.editor;
|
|
2273
|
+
a.suspendHistory(), this._removeCurrentBackground(), yield this._createImageBackground(e), this.editor.canvas.fire("background:changed", {
|
|
2274
|
+
type: "image",
|
|
2275
|
+
imageSource: e,
|
|
2276
|
+
backgroundObject: this.backgroundObject
|
|
2277
|
+
}), a.resumeHistory(), t || a.saveState();
|
|
2278
|
+
} catch (a) {
|
|
2279
|
+
this.editor.errorManager.emitError({
|
|
2280
|
+
code: "BACKGROUND_CREATION_FAILED",
|
|
2281
|
+
origin: "BackgroundManager",
|
|
2282
|
+
method: "setImageBackground",
|
|
2283
|
+
message: "Не удалось установить изображение в качестве фона",
|
|
2284
|
+
data: { error: a }
|
|
2285
|
+
});
|
|
2286
|
+
}
|
|
2287
|
+
});
|
|
2288
|
+
}
|
|
2289
|
+
/**
|
|
2290
|
+
* Удаляет текущий фон.
|
|
2291
|
+
* @param options - Опции для удаления фона
|
|
2292
|
+
* @param options.withoutSave - Если true, не сохранять состояние в историю
|
|
2293
|
+
*/
|
|
2294
|
+
removeBackground({ withoutSave: e = !1 } = {}) {
|
|
2295
|
+
try {
|
|
2296
|
+
const { historyManager: t } = this.editor;
|
|
2297
|
+
if (!this.backgroundObject) {
|
|
2298
|
+
this.editor.errorManager.emitWarning({
|
|
2299
|
+
code: "NO_BACKGROUND_TO_REMOVE",
|
|
2300
|
+
origin: "BackgroundManager",
|
|
2301
|
+
method: "removeBackground",
|
|
2302
|
+
message: "Нет фона для удаления"
|
|
2303
|
+
});
|
|
2304
|
+
return;
|
|
2305
|
+
}
|
|
2306
|
+
t.suspendHistory(), this._removeCurrentBackground(), this.editor.canvas.fire("background:removed"), t.resumeHistory(), e || t.saveState();
|
|
2307
|
+
} catch (t) {
|
|
2308
|
+
this.editor.errorManager.emitError({
|
|
2309
|
+
code: "BACKGROUND_REMOVAL_FAILED",
|
|
2310
|
+
origin: "BackgroundManager",
|
|
2311
|
+
method: "removeBackground",
|
|
2312
|
+
message: "Не удалось удалить фон",
|
|
2313
|
+
data: { error: t }
|
|
2314
|
+
});
|
|
2315
|
+
}
|
|
2316
|
+
}
|
|
2317
|
+
/**
|
|
2318
|
+
* Обновляет размеры и позицию фона согласно монтажной области.
|
|
2319
|
+
*/
|
|
2320
|
+
refresh() {
|
|
2321
|
+
const { canvas: e, montageArea: t, historyManager: s } = this.editor;
|
|
2322
|
+
if (!t || !this.backgroundObject) return;
|
|
2323
|
+
s.suspendHistory(), this.editor.transformManager.fitObject({ object: this.backgroundObject, withoutSave: !0, type: "cover" });
|
|
2324
|
+
const a = e.getObjects(), n = a.indexOf(t), o = a.indexOf(this.backgroundObject);
|
|
2325
|
+
this.backgroundObject && o !== n + 1 && e.moveObjectTo(this.backgroundObject, n + 1), e.requestRenderAll(), s.resumeHistory();
|
|
2326
|
+
}
|
|
2327
|
+
/**
|
|
2328
|
+
* Создает цветовой фон.
|
|
2329
|
+
* @param color - Цвет фона в формате HEX (например, "#FF0000")
|
|
2330
|
+
*/
|
|
2331
|
+
_createColorBackground(e) {
|
|
2332
|
+
this.backgroundObject = this.editor.shapeManager.addRectangle({
|
|
2333
|
+
fill: e,
|
|
2334
|
+
selectable: !1,
|
|
2335
|
+
evented: !1,
|
|
2336
|
+
hasBorders: !1,
|
|
2337
|
+
hasControls: !1,
|
|
2338
|
+
id: "background",
|
|
2339
|
+
backgroundType: "color",
|
|
2340
|
+
backgroundId: `background-${A()}`
|
|
2341
|
+
}, { withoutSelection: !0 }), this.refresh();
|
|
2342
|
+
}
|
|
2343
|
+
/**
|
|
2344
|
+
* Создает градиентный фон.
|
|
2345
|
+
* @param gradient - Объект с параметрами градиента
|
|
2346
|
+
*/
|
|
2347
|
+
_createGradientBackground(e) {
|
|
2348
|
+
this.backgroundObject = this.editor.shapeManager.addRectangle({
|
|
2349
|
+
fill: "#ffffff",
|
|
2350
|
+
// временный цвет
|
|
2351
|
+
selectable: !1,
|
|
2352
|
+
evented: !1,
|
|
2353
|
+
hasBorders: !1,
|
|
2354
|
+
hasControls: !1,
|
|
2355
|
+
id: "background",
|
|
2356
|
+
backgroundType: "gradient",
|
|
2357
|
+
backgroundId: `background-${A()}`
|
|
2358
|
+
}, { withoutSelection: !0 }), this.refresh();
|
|
2359
|
+
const t = x._createFabricGradient(e);
|
|
2360
|
+
this.backgroundObject.set("fill", t), this.editor.canvas.requestRenderAll();
|
|
2361
|
+
}
|
|
2362
|
+
/**
|
|
2363
|
+
* Создает фон из изображения.
|
|
2364
|
+
* @param source - источник изображения (URL или File)
|
|
2365
|
+
*/
|
|
2366
|
+
_createImageBackground(e) {
|
|
2367
|
+
return y(this, null, function* () {
|
|
2368
|
+
var s;
|
|
2369
|
+
const { image: t } = (s = yield this.editor.imageManager.importImage({
|
|
2370
|
+
source: e,
|
|
2371
|
+
withoutSave: !0,
|
|
2372
|
+
isBackground: !0,
|
|
2373
|
+
withoutSelection: !0,
|
|
2374
|
+
scale: "image-cover"
|
|
2375
|
+
})) != null ? s : {};
|
|
2376
|
+
if (!t)
|
|
2377
|
+
throw new Error("Не удалось загрузить изображение");
|
|
2378
|
+
t.set({
|
|
2379
|
+
selectable: !1,
|
|
2380
|
+
evented: !1,
|
|
2381
|
+
hasBorders: !1,
|
|
2382
|
+
hasControls: !1,
|
|
2383
|
+
id: "background",
|
|
2384
|
+
backgroundType: "image",
|
|
2385
|
+
backgroundId: `background-${A()}`
|
|
2386
|
+
}), this.backgroundObject = t, this.refresh();
|
|
2387
|
+
});
|
|
2388
|
+
}
|
|
2389
|
+
/**
|
|
2390
|
+
* Удаляет текущий фон.
|
|
2391
|
+
*/
|
|
2392
|
+
_removeCurrentBackground() {
|
|
2393
|
+
this.backgroundObject && (this.editor.canvas.remove(this.backgroundObject), this.backgroundObject = null, this.editor.canvas.renderAll());
|
|
2394
|
+
}
|
|
2395
|
+
/**
|
|
2396
|
+
* Создает Fabric.js градиент из параметров.
|
|
2397
|
+
* @param gradient - Объект с параметрами градиента
|
|
2398
|
+
*/
|
|
2399
|
+
static _createFabricGradient(e) {
|
|
2400
|
+
const {
|
|
2401
|
+
startColor: t,
|
|
2402
|
+
endColor: s,
|
|
2403
|
+
startPosition: a = 0,
|
|
2404
|
+
endPosition: n = 100
|
|
2405
|
+
} = e, o = [
|
|
2406
|
+
{ offset: a / 100, color: t },
|
|
2407
|
+
{ offset: n / 100, color: s }
|
|
2408
|
+
];
|
|
2409
|
+
if (e.type === "linear") {
|
|
2410
|
+
const l = e.angle * Math.PI / 180, g = x._angleToCoords(l);
|
|
2411
|
+
return new Me({
|
|
2412
|
+
type: "linear",
|
|
2413
|
+
gradientUnits: "percentage",
|
|
2414
|
+
coords: g,
|
|
2415
|
+
colorStops: o
|
|
2416
|
+
});
|
|
2417
|
+
}
|
|
2418
|
+
const {
|
|
2419
|
+
centerX: i = 50,
|
|
2420
|
+
centerY: c = 50,
|
|
2421
|
+
radius: d = 50
|
|
2422
|
+
} = e, h = {
|
|
2423
|
+
x1: i / 100,
|
|
2424
|
+
y1: c / 100,
|
|
2425
|
+
x2: i / 100,
|
|
2426
|
+
y2: c / 100,
|
|
2427
|
+
r1: 0,
|
|
2428
|
+
r2: d / 100
|
|
2429
|
+
};
|
|
2430
|
+
return new Me({
|
|
2431
|
+
type: "radial",
|
|
2432
|
+
gradientUnits: "percentage",
|
|
2433
|
+
coords: h,
|
|
2434
|
+
colorStops: o
|
|
2435
|
+
});
|
|
2436
|
+
}
|
|
2437
|
+
/**
|
|
2438
|
+
* Конвертирует угол в координаты для линейного градиента.
|
|
2439
|
+
* @param angle - Угол в радианах
|
|
2440
|
+
*/
|
|
2441
|
+
static _angleToCoords(e) {
|
|
2442
|
+
const t = Math.cos(e), s = Math.sin(e);
|
|
2443
|
+
return {
|
|
2444
|
+
x1: 0.5 - t * 0.5,
|
|
2445
|
+
y1: 0.5 - s * 0.5,
|
|
2446
|
+
x2: 0.5 + t * 0.5,
|
|
2447
|
+
y2: 0.5 + s * 0.5
|
|
2448
|
+
};
|
|
2449
|
+
}
|
|
2450
|
+
/**
|
|
2451
|
+
* Сравнивает два градиента на равенство
|
|
2452
|
+
* @param gradient1 - Первый градиент
|
|
2453
|
+
* @param gradient2 - Второй градиент
|
|
2454
|
+
* @returns true если градиенты одинаковые
|
|
2455
|
+
*/
|
|
2456
|
+
static _isGradientEqual(e, t) {
|
|
2457
|
+
if (!e || !t || e.type !== t.type) return !1;
|
|
2458
|
+
const s = e.colorStops || [], a = t.colorStops || [];
|
|
2459
|
+
return s.length !== a.length || !s.every((o, i) => {
|
|
2460
|
+
const c = a[i];
|
|
2461
|
+
return o.color === c.color && Math.abs(o.offset - c.offset) < 1e-4;
|
|
2462
|
+
}) ? !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;
|
|
2463
|
+
}
|
|
2464
|
+
}
|
|
2465
|
+
class Q {
|
|
2093
2466
|
constructor({ editor: e }) {
|
|
2094
2467
|
this.editor = e;
|
|
2095
2468
|
}
|
|
@@ -2101,13 +2474,13 @@ class G {
|
|
|
2101
2474
|
* @fires editor:object-bring-to-front
|
|
2102
2475
|
*/
|
|
2103
2476
|
bringToFront(e, { withoutSave: t } = {}) {
|
|
2104
|
-
const { canvas: s, historyManager:
|
|
2105
|
-
|
|
2106
|
-
const
|
|
2107
|
-
|
|
2108
|
-
s.bringObjectToFront(
|
|
2109
|
-
}) : s.bringObjectToFront(
|
|
2110
|
-
object:
|
|
2477
|
+
const { canvas: s, historyManager: a } = this.editor;
|
|
2478
|
+
a.suspendHistory();
|
|
2479
|
+
const n = e || s.getActiveObject();
|
|
2480
|
+
n && (n instanceof v ? n.getObjects().forEach((o) => {
|
|
2481
|
+
s.bringObjectToFront(o);
|
|
2482
|
+
}) : s.bringObjectToFront(n), s.renderAll(), a.resumeHistory(), t || a.saveState(), s.fire("editor:object-bring-to-front", {
|
|
2483
|
+
object: n,
|
|
2111
2484
|
withoutSave: t
|
|
2112
2485
|
}));
|
|
2113
2486
|
}
|
|
@@ -2119,11 +2492,11 @@ class G {
|
|
|
2119
2492
|
* @fires editor:object-bring-forward
|
|
2120
2493
|
*/
|
|
2121
2494
|
bringForward(e, { withoutSave: t } = {}) {
|
|
2122
|
-
const { canvas: s, historyManager:
|
|
2123
|
-
|
|
2124
|
-
const
|
|
2125
|
-
|
|
2126
|
-
object:
|
|
2495
|
+
const { canvas: s, historyManager: a } = this.editor;
|
|
2496
|
+
a.suspendHistory();
|
|
2497
|
+
const n = e || s.getActiveObject();
|
|
2498
|
+
n && (n instanceof v ? Q._moveSelectionForward(s, n) : s.bringObjectForward(n), s.renderAll(), a.resumeHistory(), t || a.saveState(), s.fire("editor:object-bring-forward", {
|
|
2499
|
+
object: n,
|
|
2127
2500
|
withoutSave: t
|
|
2128
2501
|
}));
|
|
2129
2502
|
}
|
|
@@ -2137,21 +2510,22 @@ class G {
|
|
|
2137
2510
|
sendToBack(e, { withoutSave: t } = {}) {
|
|
2138
2511
|
const {
|
|
2139
2512
|
canvas: s,
|
|
2140
|
-
montageArea:
|
|
2141
|
-
historyManager:
|
|
2142
|
-
interactionBlocker: { overlayMask:
|
|
2513
|
+
montageArea: a,
|
|
2514
|
+
historyManager: n,
|
|
2515
|
+
interactionBlocker: { overlayMask: o },
|
|
2516
|
+
backgroundManager: { backgroundObject: i }
|
|
2143
2517
|
} = this.editor;
|
|
2144
|
-
|
|
2145
|
-
const
|
|
2146
|
-
if (
|
|
2147
|
-
if (
|
|
2148
|
-
const d =
|
|
2149
|
-
for (let
|
|
2150
|
-
s.sendObjectToBack(d[
|
|
2518
|
+
n.suspendHistory();
|
|
2519
|
+
const c = e || s.getActiveObject();
|
|
2520
|
+
if (c) {
|
|
2521
|
+
if (c instanceof v) {
|
|
2522
|
+
const d = c.getObjects();
|
|
2523
|
+
for (let h = d.length - 1; h >= 0; h -= 1)
|
|
2524
|
+
s.sendObjectToBack(d[h]);
|
|
2151
2525
|
} else
|
|
2152
|
-
s.sendObjectToBack(
|
|
2153
|
-
s.sendObjectToBack(
|
|
2154
|
-
object:
|
|
2526
|
+
s.sendObjectToBack(c);
|
|
2527
|
+
i && s.sendObjectToBack(i), s.sendObjectToBack(a), o && s.sendObjectToBack(o), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:object-send-to-back", {
|
|
2528
|
+
object: c,
|
|
2155
2529
|
withoutSave: t
|
|
2156
2530
|
});
|
|
2157
2531
|
}
|
|
@@ -2165,14 +2539,15 @@ class G {
|
|
|
2165
2539
|
sendBackwards(e, { withoutSave: t } = {}) {
|
|
2166
2540
|
const {
|
|
2167
2541
|
canvas: s,
|
|
2168
|
-
montageArea:
|
|
2169
|
-
historyManager:
|
|
2170
|
-
interactionBlocker: { overlayMask:
|
|
2542
|
+
montageArea: a,
|
|
2543
|
+
historyManager: n,
|
|
2544
|
+
interactionBlocker: { overlayMask: o },
|
|
2545
|
+
backgroundManager: { backgroundObject: i }
|
|
2171
2546
|
} = this.editor;
|
|
2172
|
-
|
|
2173
|
-
const
|
|
2174
|
-
|
|
2175
|
-
object:
|
|
2547
|
+
n.suspendHistory();
|
|
2548
|
+
const c = e || s.getActiveObject();
|
|
2549
|
+
c && (c instanceof v ? Q._moveSelectionBackwards(s, c) : s.sendObjectBackwards(c), i && s.sendObjectToBack(i), s.sendObjectToBack(a), o && s.sendObjectToBack(o), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:object-send-backwards", {
|
|
2550
|
+
object: c,
|
|
2176
2551
|
withoutSave: t
|
|
2177
2552
|
}));
|
|
2178
2553
|
}
|
|
@@ -2183,16 +2558,16 @@ class G {
|
|
|
2183
2558
|
* @param activeSelection - активное выделение
|
|
2184
2559
|
*/
|
|
2185
2560
|
static _moveSelectionForward(e, t) {
|
|
2186
|
-
const s = e.getObjects(),
|
|
2187
|
-
if (!
|
|
2188
|
-
const
|
|
2189
|
-
for (let
|
|
2190
|
-
if (!
|
|
2561
|
+
const s = e.getObjects(), a = t.getObjects();
|
|
2562
|
+
if (!a.some((i) => {
|
|
2563
|
+
const c = s.indexOf(i);
|
|
2564
|
+
for (let d = c + 1; d < s.length; d += 1)
|
|
2565
|
+
if (!a.includes(s[d]))
|
|
2191
2566
|
return !0;
|
|
2192
2567
|
return !1;
|
|
2193
2568
|
})) return;
|
|
2194
|
-
|
|
2195
|
-
e.bringObjectForward(
|
|
2569
|
+
a.map((i) => ({ obj: i, index: s.indexOf(i) })).sort((i, c) => c.index - i.index).forEach((i) => {
|
|
2570
|
+
e.bringObjectForward(i.obj);
|
|
2196
2571
|
});
|
|
2197
2572
|
}
|
|
2198
2573
|
/**
|
|
@@ -2202,20 +2577,20 @@ class G {
|
|
|
2202
2577
|
* @param activeSelection - активное выделение
|
|
2203
2578
|
*/
|
|
2204
2579
|
static _moveSelectionBackwards(e, t) {
|
|
2205
|
-
const s = e.getObjects(),
|
|
2206
|
-
if (!
|
|
2207
|
-
const
|
|
2208
|
-
for (let
|
|
2209
|
-
if (!
|
|
2580
|
+
const s = e.getObjects(), a = t.getObjects();
|
|
2581
|
+
if (!a.some((i) => {
|
|
2582
|
+
const c = s.indexOf(i);
|
|
2583
|
+
for (let d = c - 1; d >= 0; d -= 1)
|
|
2584
|
+
if (!a.includes(s[d]))
|
|
2210
2585
|
return !0;
|
|
2211
2586
|
return !1;
|
|
2212
2587
|
})) return;
|
|
2213
|
-
|
|
2214
|
-
e.sendObjectBackwards(
|
|
2588
|
+
a.map((i) => ({ obj: i, index: s.indexOf(i) })).sort((i, c) => i.index - c.index).forEach((i) => {
|
|
2589
|
+
e.sendObjectBackwards(i.obj);
|
|
2215
2590
|
});
|
|
2216
2591
|
}
|
|
2217
2592
|
}
|
|
2218
|
-
class
|
|
2593
|
+
class gt {
|
|
2219
2594
|
/**
|
|
2220
2595
|
* Менеджер фигур для редактора.
|
|
2221
2596
|
* @param options - Опции и настройки менеджера фигур.
|
|
@@ -2239,15 +2614,15 @@ class lt {
|
|
|
2239
2614
|
* @param flags.withoutSelection - Не выделять объект
|
|
2240
2615
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2241
2616
|
*/
|
|
2242
|
-
addRectangle(h = {}, { withoutSelection:
|
|
2617
|
+
addRectangle(h = {}, { withoutSelection: c, withoutAdding: d } = {}) {
|
|
2243
2618
|
var l = h, {
|
|
2244
|
-
id: e = `rect-${
|
|
2619
|
+
id: e = `rect-${A()}`,
|
|
2245
2620
|
left: t,
|
|
2246
2621
|
top: s,
|
|
2247
|
-
width:
|
|
2248
|
-
height:
|
|
2249
|
-
fill:
|
|
2250
|
-
} = l,
|
|
2622
|
+
width: a = 100,
|
|
2623
|
+
height: n = 100,
|
|
2624
|
+
fill: o = "blue"
|
|
2625
|
+
} = l, i = F(l, [
|
|
2251
2626
|
"id",
|
|
2252
2627
|
"left",
|
|
2253
2628
|
"top",
|
|
@@ -2255,15 +2630,15 @@ class lt {
|
|
|
2255
2630
|
"height",
|
|
2256
2631
|
"fill"
|
|
2257
2632
|
]);
|
|
2258
|
-
const { canvas: g } = this.editor,
|
|
2633
|
+
const { canvas: g } = this.editor, u = new Ne(I({
|
|
2259
2634
|
id: e,
|
|
2260
2635
|
left: t,
|
|
2261
2636
|
top: s,
|
|
2262
|
-
width:
|
|
2263
|
-
height:
|
|
2264
|
-
fill:
|
|
2265
|
-
},
|
|
2266
|
-
return !t && !s && g.centerObject(
|
|
2637
|
+
width: a,
|
|
2638
|
+
height: n,
|
|
2639
|
+
fill: o
|
|
2640
|
+
}, i));
|
|
2641
|
+
return !t && !s && g.centerObject(u), d || (g.add(u), c || g.setActiveObject(u), g.renderAll()), u;
|
|
2267
2642
|
}
|
|
2268
2643
|
/**
|
|
2269
2644
|
* Добавление круга
|
|
@@ -2281,28 +2656,28 @@ class lt {
|
|
|
2281
2656
|
* @param flags.withoutSelection - Не выделять объект
|
|
2282
2657
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2283
2658
|
*/
|
|
2284
|
-
addCircle(
|
|
2285
|
-
var h =
|
|
2286
|
-
id: e = `circle-${
|
|
2659
|
+
addCircle(d = {}, { withoutSelection: i, withoutAdding: c } = {}) {
|
|
2660
|
+
var h = d, {
|
|
2661
|
+
id: e = `circle-${A()}`,
|
|
2287
2662
|
left: t,
|
|
2288
2663
|
top: s,
|
|
2289
|
-
radius:
|
|
2290
|
-
fill:
|
|
2291
|
-
} = h,
|
|
2664
|
+
radius: a = 50,
|
|
2665
|
+
fill: n = "green"
|
|
2666
|
+
} = h, o = F(h, [
|
|
2292
2667
|
"id",
|
|
2293
2668
|
"left",
|
|
2294
2669
|
"top",
|
|
2295
2670
|
"radius",
|
|
2296
2671
|
"fill"
|
|
2297
2672
|
]);
|
|
2298
|
-
const { canvas: l } = this.editor, g = new
|
|
2673
|
+
const { canvas: l } = this.editor, g = new Oe(I({
|
|
2299
2674
|
id: e,
|
|
2300
2675
|
left: t,
|
|
2301
2676
|
top: s,
|
|
2302
|
-
fill:
|
|
2303
|
-
radius:
|
|
2304
|
-
},
|
|
2305
|
-
return !t && !s && l.centerObject(g),
|
|
2677
|
+
fill: n,
|
|
2678
|
+
radius: a
|
|
2679
|
+
}, o));
|
|
2680
|
+
return !t && !s && l.centerObject(g), c || (l.add(g), i || l.setActiveObject(g), l.renderAll()), g;
|
|
2306
2681
|
}
|
|
2307
2682
|
/**
|
|
2308
2683
|
* Добавление треугольника
|
|
@@ -2321,15 +2696,15 @@ class lt {
|
|
|
2321
2696
|
* @param flags.withoutSelection - Не выделять объект
|
|
2322
2697
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2323
2698
|
*/
|
|
2324
|
-
addTriangle(h = {}, { withoutSelection:
|
|
2699
|
+
addTriangle(h = {}, { withoutSelection: c, withoutAdding: d } = {}) {
|
|
2325
2700
|
var l = h, {
|
|
2326
|
-
id: e = `triangle-${
|
|
2701
|
+
id: e = `triangle-${A()}`,
|
|
2327
2702
|
left: t,
|
|
2328
2703
|
top: s,
|
|
2329
|
-
width:
|
|
2330
|
-
height:
|
|
2331
|
-
fill:
|
|
2332
|
-
} = l,
|
|
2704
|
+
width: a = 100,
|
|
2705
|
+
height: n = 100,
|
|
2706
|
+
fill: o = "yellow"
|
|
2707
|
+
} = l, i = F(l, [
|
|
2333
2708
|
"id",
|
|
2334
2709
|
"left",
|
|
2335
2710
|
"top",
|
|
@@ -2337,18 +2712,18 @@ class lt {
|
|
|
2337
2712
|
"height",
|
|
2338
2713
|
"fill"
|
|
2339
2714
|
]);
|
|
2340
|
-
const { canvas: g } = this.editor,
|
|
2715
|
+
const { canvas: g } = this.editor, u = new Le(I({
|
|
2341
2716
|
id: e,
|
|
2342
2717
|
left: t,
|
|
2343
2718
|
top: s,
|
|
2344
|
-
fill:
|
|
2345
|
-
width:
|
|
2346
|
-
height:
|
|
2347
|
-
},
|
|
2348
|
-
return !t && !s && g.centerObject(
|
|
2719
|
+
fill: o,
|
|
2720
|
+
width: a,
|
|
2721
|
+
height: n
|
|
2722
|
+
}, i));
|
|
2723
|
+
return !t && !s && g.centerObject(u), d || (g.add(u), c || g.setActiveObject(u), g.renderAll()), u;
|
|
2349
2724
|
}
|
|
2350
2725
|
}
|
|
2351
|
-
class
|
|
2726
|
+
class ut {
|
|
2352
2727
|
/**
|
|
2353
2728
|
* @param options
|
|
2354
2729
|
* @param options.editor - экземпляр редактора с доступом к canvas
|
|
@@ -2376,18 +2751,18 @@ class ht {
|
|
|
2376
2751
|
* Асинхронное клонирование для внутреннего буфера
|
|
2377
2752
|
*/
|
|
2378
2753
|
_cloneToInternalClipboard(e) {
|
|
2379
|
-
return
|
|
2754
|
+
return y(this, null, function* () {
|
|
2380
2755
|
const { canvas: t, errorManager: s } = this.editor;
|
|
2381
2756
|
try {
|
|
2382
|
-
const
|
|
2383
|
-
this.clipboard =
|
|
2384
|
-
} catch (
|
|
2757
|
+
const a = yield e.clone(["format"]);
|
|
2758
|
+
this.clipboard = a, t.fire("editor:object-copied", { object: a });
|
|
2759
|
+
} catch (a) {
|
|
2385
2760
|
s.emitError({
|
|
2386
2761
|
origin: "ClipboardManager",
|
|
2387
2762
|
method: "_cloneToInternalClipboard",
|
|
2388
2763
|
code: "CLONE_FAILED",
|
|
2389
2764
|
message: "Ошибка клонирования объекта для внутреннего буфера",
|
|
2390
|
-
data:
|
|
2765
|
+
data: a
|
|
2391
2766
|
});
|
|
2392
2767
|
}
|
|
2393
2768
|
});
|
|
@@ -2396,7 +2771,7 @@ class ht {
|
|
|
2396
2771
|
* Копирование в системный буфер обмена
|
|
2397
2772
|
*/
|
|
2398
2773
|
_copyToSystemClipboard(e) {
|
|
2399
|
-
return
|
|
2774
|
+
return y(this, null, function* () {
|
|
2400
2775
|
const { errorManager: t } = this.editor;
|
|
2401
2776
|
if (typeof ClipboardItem == "undefined" || !navigator.clipboard)
|
|
2402
2777
|
return t.emitWarning({
|
|
@@ -2406,8 +2781,8 @@ class ht {
|
|
|
2406
2781
|
message: "navigator.clipboard не поддерживается в этом браузере или отсутствует HTTPS-соединение."
|
|
2407
2782
|
}), !1;
|
|
2408
2783
|
try {
|
|
2409
|
-
const s = e.toObject(["format"]),
|
|
2410
|
-
return e.type === "image" ? this._copyImageToClipboard(e,
|
|
2784
|
+
const s = e.toObject(["format"]), a = JSON.stringify(s);
|
|
2785
|
+
return e.type === "image" ? this._copyImageToClipboard(e, a) : this._copyTextToClipboard(a);
|
|
2411
2786
|
} catch (s) {
|
|
2412
2787
|
return t.emitError({
|
|
2413
2788
|
origin: "ClipboardManager",
|
|
@@ -2423,12 +2798,12 @@ class ht {
|
|
|
2423
2798
|
* Копирование изображения в буфер обмена
|
|
2424
2799
|
*/
|
|
2425
2800
|
_copyImageToClipboard(e, t) {
|
|
2426
|
-
return
|
|
2801
|
+
return y(this, null, function* () {
|
|
2427
2802
|
try {
|
|
2428
|
-
const
|
|
2429
|
-
for (let l = 0; l <
|
|
2430
|
-
|
|
2431
|
-
const
|
|
2803
|
+
const a = e.toCanvasElement({ enableRetinaScaling: !1 }).toDataURL(), n = a.slice(5).split(";")[0], o = a.split(",")[1], i = atob(o), c = new Uint8Array(i.length);
|
|
2804
|
+
for (let l = 0; l < i.length; l += 1)
|
|
2805
|
+
c[l] = i.charCodeAt(l);
|
|
2806
|
+
const d = new Blob([c.buffer], { type: n }), h = new ClipboardItem({ [n]: d });
|
|
2432
2807
|
return yield navigator.clipboard.write([h]), console.info("Image copied to clipboard successfully"), !0;
|
|
2433
2808
|
} catch (s) {
|
|
2434
2809
|
return this.editor.errorManager.emitWarning({
|
|
@@ -2445,9 +2820,9 @@ class ht {
|
|
|
2445
2820
|
* Копирование текста в буфер обмена
|
|
2446
2821
|
*/
|
|
2447
2822
|
_copyTextToClipboard(e) {
|
|
2448
|
-
return
|
|
2823
|
+
return y(this, null, function* () {
|
|
2449
2824
|
try {
|
|
2450
|
-
const t = `${
|
|
2825
|
+
const t = `${be}${e}`;
|
|
2451
2826
|
return yield navigator.clipboard.writeText(t), console.info("Text copied to clipboard successfully"), !0;
|
|
2452
2827
|
} catch (t) {
|
|
2453
2828
|
const { errorManager: s } = this.editor;
|
|
@@ -2467,9 +2842,9 @@ class ht {
|
|
|
2467
2842
|
*/
|
|
2468
2843
|
_addClonedObjectToCanvas(e) {
|
|
2469
2844
|
const { canvas: t, historyManager: s } = this.editor;
|
|
2470
|
-
if (t.discardActiveObject(), e instanceof
|
|
2471
|
-
s.suspendHistory(), e.canvas = t, e.forEachObject((
|
|
2472
|
-
t.add(
|
|
2845
|
+
if (t.discardActiveObject(), e instanceof v) {
|
|
2846
|
+
s.suspendHistory(), e.canvas = t, e.forEachObject((a) => {
|
|
2847
|
+
t.add(a);
|
|
2473
2848
|
}), t.setActiveObject(e), t.requestRenderAll(), s.resumeHistory(), s.saveState();
|
|
2474
2849
|
return;
|
|
2475
2850
|
}
|
|
@@ -2480,7 +2855,7 @@ class ht {
|
|
|
2480
2855
|
* @param source - источник изображения (data URL или URL)
|
|
2481
2856
|
*/
|
|
2482
2857
|
_handleImageImport(e) {
|
|
2483
|
-
return
|
|
2858
|
+
return y(this, null, function* () {
|
|
2484
2859
|
var s;
|
|
2485
2860
|
const { image: t } = (s = yield this.editor.imageManager.importImage({
|
|
2486
2861
|
source: e,
|
|
@@ -2496,25 +2871,25 @@ class ht {
|
|
|
2496
2871
|
* @fires editor:object-pasted
|
|
2497
2872
|
*/
|
|
2498
2873
|
copyPaste(e) {
|
|
2499
|
-
return
|
|
2874
|
+
return y(this, null, function* () {
|
|
2500
2875
|
const { canvas: t } = this.editor, s = e || t.getActiveObject();
|
|
2501
2876
|
if (!s || s.locked) return !1;
|
|
2502
2877
|
try {
|
|
2503
|
-
const
|
|
2504
|
-
return
|
|
2505
|
-
id: `${
|
|
2506
|
-
left:
|
|
2507
|
-
top:
|
|
2878
|
+
const a = yield s.clone(["format"]);
|
|
2879
|
+
return a.set({
|
|
2880
|
+
id: `${a.type}-${A()}`,
|
|
2881
|
+
left: a.left + 10,
|
|
2882
|
+
top: a.top + 10,
|
|
2508
2883
|
evented: !0
|
|
2509
|
-
}), this._addClonedObjectToCanvas(
|
|
2510
|
-
} catch (
|
|
2511
|
-
const { errorManager:
|
|
2512
|
-
return
|
|
2884
|
+
}), this._addClonedObjectToCanvas(a), t.fire("editor:object-duplicated", { object: a }), !0;
|
|
2885
|
+
} catch (a) {
|
|
2886
|
+
const { errorManager: n } = this.editor;
|
|
2887
|
+
return n.emitError({
|
|
2513
2888
|
origin: "ClipboardManager",
|
|
2514
2889
|
method: "copyPaste",
|
|
2515
2890
|
code: "COPY_PASTE_FAILED",
|
|
2516
2891
|
message: "Ошибка создания копии объекта",
|
|
2517
|
-
data:
|
|
2892
|
+
data: a
|
|
2518
2893
|
}), !1;
|
|
2519
2894
|
}
|
|
2520
2895
|
});
|
|
@@ -2526,21 +2901,21 @@ class ht {
|
|
|
2526
2901
|
* @param event.clipboardData.items — элементы буфера обмена
|
|
2527
2902
|
*/
|
|
2528
2903
|
handlePasteEvent(t) {
|
|
2529
|
-
return
|
|
2530
|
-
var
|
|
2531
|
-
if (!((
|
|
2904
|
+
return y(this, arguments, function* ({ clipboardData: e }) {
|
|
2905
|
+
var c;
|
|
2906
|
+
if (!((c = e == null ? void 0 : e.items) != null && c.length)) {
|
|
2532
2907
|
this.paste();
|
|
2533
2908
|
return;
|
|
2534
2909
|
}
|
|
2535
2910
|
const s = e.getData("text/plain");
|
|
2536
|
-
if (s && s.startsWith(
|
|
2911
|
+
if (s && s.startsWith(be)) {
|
|
2537
2912
|
this.paste();
|
|
2538
2913
|
return;
|
|
2539
2914
|
}
|
|
2540
|
-
const { items:
|
|
2541
|
-
if (
|
|
2542
|
-
const
|
|
2543
|
-
|
|
2915
|
+
const { items: a } = e, n = a[a.length - 1], o = n.getAsFile();
|
|
2916
|
+
if (n.type !== "text/html" && o) {
|
|
2917
|
+
const d = new FileReader();
|
|
2918
|
+
d.onload = (h) => {
|
|
2544
2919
|
h.target && this._handleImageImport(h.target.result).catch((l) => {
|
|
2545
2920
|
this.editor.errorManager.emitError({
|
|
2546
2921
|
origin: "ClipboardManager",
|
|
@@ -2550,12 +2925,12 @@ class ht {
|
|
|
2550
2925
|
data: l
|
|
2551
2926
|
});
|
|
2552
2927
|
});
|
|
2553
|
-
},
|
|
2928
|
+
}, d.readAsDataURL(o);
|
|
2554
2929
|
return;
|
|
2555
2930
|
}
|
|
2556
|
-
const
|
|
2557
|
-
if (
|
|
2558
|
-
const l = new DOMParser().parseFromString(
|
|
2931
|
+
const i = e.getData("text/html");
|
|
2932
|
+
if (i) {
|
|
2933
|
+
const l = new DOMParser().parseFromString(i, "text/html").querySelector("img");
|
|
2559
2934
|
if (l != null && l.src) {
|
|
2560
2935
|
this._handleImageImport(l.src).catch((g) => {
|
|
2561
2936
|
this.editor.errorManager.emitError({
|
|
@@ -2577,13 +2952,13 @@ class ht {
|
|
|
2577
2952
|
* @fires editor:object-pasted
|
|
2578
2953
|
*/
|
|
2579
2954
|
paste() {
|
|
2580
|
-
return
|
|
2955
|
+
return y(this, null, function* () {
|
|
2581
2956
|
const { canvas: e } = this.editor;
|
|
2582
2957
|
if (!this.clipboard) return !1;
|
|
2583
2958
|
try {
|
|
2584
2959
|
const t = yield this.clipboard.clone(["format"]);
|
|
2585
2960
|
return e.discardActiveObject(), t.set({
|
|
2586
|
-
id: `${t.type}-${
|
|
2961
|
+
id: `${t.type}-${A()}`,
|
|
2587
2962
|
left: t.left + 10,
|
|
2588
2963
|
top: t.top + 10,
|
|
2589
2964
|
evented: !0
|
|
@@ -2601,7 +2976,7 @@ class ht {
|
|
|
2601
2976
|
});
|
|
2602
2977
|
}
|
|
2603
2978
|
}
|
|
2604
|
-
class
|
|
2979
|
+
class K {
|
|
2605
2980
|
constructor({ editor: e }) {
|
|
2606
2981
|
this.editor = e;
|
|
2607
2982
|
}
|
|
@@ -2614,9 +2989,9 @@ class X {
|
|
|
2614
2989
|
* @fires editor:object-locked
|
|
2615
2990
|
*/
|
|
2616
2991
|
lockObject({ object: e, skipInnerObjects: t, withoutSave: s } = {}) {
|
|
2617
|
-
const { canvas:
|
|
2618
|
-
if (!
|
|
2619
|
-
const
|
|
2992
|
+
const { canvas: a, historyManager: n } = this.editor, o = e || a.getActiveObject();
|
|
2993
|
+
if (!o || o.locked) return;
|
|
2994
|
+
const i = {
|
|
2620
2995
|
lockMovementX: !0,
|
|
2621
2996
|
lockMovementY: !0,
|
|
2622
2997
|
lockRotation: !0,
|
|
@@ -2626,10 +3001,10 @@ class X {
|
|
|
2626
3001
|
lockSkewingY: !0,
|
|
2627
3002
|
locked: !0
|
|
2628
3003
|
};
|
|
2629
|
-
|
|
2630
|
-
|
|
2631
|
-
}),
|
|
2632
|
-
object:
|
|
3004
|
+
o.set(i), !t && K._isGroupOrSelection(o) && o.getObjects().forEach((d) => {
|
|
3005
|
+
d.set(i);
|
|
3006
|
+
}), a.renderAll(), s || n.saveState(), a.fire("editor:object-locked", {
|
|
3007
|
+
object: o,
|
|
2633
3008
|
skipInnerObjects: t,
|
|
2634
3009
|
withoutSave: s
|
|
2635
3010
|
});
|
|
@@ -2642,9 +3017,9 @@ class X {
|
|
|
2642
3017
|
* @fires editor:object-unlocked
|
|
2643
3018
|
*/
|
|
2644
3019
|
unlockObject({ object: e, withoutSave: t } = {}) {
|
|
2645
|
-
const { canvas: s, historyManager:
|
|
2646
|
-
if (!
|
|
2647
|
-
const
|
|
3020
|
+
const { canvas: s, historyManager: a } = this.editor, n = e || s.getActiveObject();
|
|
3021
|
+
if (!n) return;
|
|
3022
|
+
const o = {
|
|
2648
3023
|
lockMovementX: !1,
|
|
2649
3024
|
lockMovementY: !1,
|
|
2650
3025
|
lockRotation: !1,
|
|
@@ -2654,18 +3029,18 @@ class X {
|
|
|
2654
3029
|
lockSkewingY: !1,
|
|
2655
3030
|
locked: !1
|
|
2656
3031
|
};
|
|
2657
|
-
|
|
2658
|
-
|
|
2659
|
-
}), s.renderAll(), t ||
|
|
2660
|
-
object:
|
|
3032
|
+
n.set(o), K._isGroupOrSelection(n) && n.getObjects().forEach((i) => {
|
|
3033
|
+
i.set(o);
|
|
3034
|
+
}), s.renderAll(), t || a.saveState(), s.fire("editor:object-unlocked", {
|
|
3035
|
+
object: n,
|
|
2661
3036
|
withoutSave: t
|
|
2662
3037
|
});
|
|
2663
3038
|
}
|
|
2664
3039
|
static _isGroupOrSelection(e) {
|
|
2665
|
-
return e instanceof
|
|
3040
|
+
return e instanceof v || e instanceof q;
|
|
2666
3041
|
}
|
|
2667
3042
|
}
|
|
2668
|
-
class
|
|
3043
|
+
class Mt {
|
|
2669
3044
|
constructor({ editor: e }) {
|
|
2670
3045
|
this.editor = e;
|
|
2671
3046
|
}
|
|
@@ -2680,14 +3055,14 @@ class gt {
|
|
|
2680
3055
|
object: e,
|
|
2681
3056
|
withoutSave: t
|
|
2682
3057
|
} = {}) {
|
|
2683
|
-
const { canvas: s, historyManager:
|
|
2684
|
-
|
|
2685
|
-
const
|
|
2686
|
-
if (!
|
|
2687
|
-
const
|
|
2688
|
-
|
|
2689
|
-
object:
|
|
2690
|
-
group:
|
|
3058
|
+
const { canvas: s, historyManager: a } = this.editor;
|
|
3059
|
+
a.suspendHistory();
|
|
3060
|
+
const n = e || s.getActiveObject();
|
|
3061
|
+
if (!n || !(n instanceof v)) return;
|
|
3062
|
+
const o = n.getObjects(), i = new q(o);
|
|
3063
|
+
o.forEach((c) => s.remove(c)), i.set("id", `${i.type}-${A()}`), s.add(i), s.setActiveObject(i), s.renderAll(), a.resumeHistory(), t || a.saveState(), s.fire("editor:objects-grouped", {
|
|
3064
|
+
object: n,
|
|
3065
|
+
group: i,
|
|
2691
3066
|
withoutSave: t
|
|
2692
3067
|
});
|
|
2693
3068
|
}
|
|
@@ -2702,23 +3077,23 @@ class gt {
|
|
|
2702
3077
|
object: e,
|
|
2703
3078
|
withoutSave: t
|
|
2704
3079
|
} = {}) {
|
|
2705
|
-
const { canvas: s, historyManager:
|
|
2706
|
-
|
|
2707
|
-
const
|
|
2708
|
-
if (!(
|
|
2709
|
-
const
|
|
2710
|
-
s.remove(
|
|
2711
|
-
const
|
|
3080
|
+
const { canvas: s, historyManager: a } = this.editor;
|
|
3081
|
+
a.suspendHistory();
|
|
3082
|
+
const n = e || s.getActiveObject();
|
|
3083
|
+
if (!(n instanceof q)) return;
|
|
3084
|
+
const o = n.removeAll();
|
|
3085
|
+
s.remove(n), o.forEach((c) => s.add(c));
|
|
3086
|
+
const i = new v(o, {
|
|
2712
3087
|
canvas: s
|
|
2713
3088
|
});
|
|
2714
|
-
s.setActiveObject(
|
|
2715
|
-
object:
|
|
2716
|
-
selection:
|
|
3089
|
+
s.setActiveObject(i), s.renderAll(), a.resumeHistory(), t || a.saveState(), s.fire("editor:objects-ungrouped", {
|
|
3090
|
+
object: n,
|
|
3091
|
+
selection: i,
|
|
2717
3092
|
withoutSave: t
|
|
2718
3093
|
});
|
|
2719
3094
|
}
|
|
2720
3095
|
}
|
|
2721
|
-
class
|
|
3096
|
+
class ft {
|
|
2722
3097
|
constructor({ editor: e }) {
|
|
2723
3098
|
this.editor = e;
|
|
2724
3099
|
}
|
|
@@ -2729,11 +3104,11 @@ class ut {
|
|
|
2729
3104
|
selectAll() {
|
|
2730
3105
|
const { canvas: e, canvasManager: t, objectLockManager: s } = this.editor;
|
|
2731
3106
|
e.discardActiveObject();
|
|
2732
|
-
const
|
|
2733
|
-
|
|
3107
|
+
const a = t.getObjects(), n = a.some((i) => i.locked), o = a.length > 1 ? new v(t.getObjects(), { canvas: e }) : a[0];
|
|
3108
|
+
n && s.lockObject({ object: o, skipInnerObjects: !0, withoutSave: !0 }), e.setActiveObject(o), e.requestRenderAll(), e.fire("editor:all-objects-selected", { selected: o });
|
|
2734
3109
|
}
|
|
2735
3110
|
}
|
|
2736
|
-
class
|
|
3111
|
+
class mt {
|
|
2737
3112
|
constructor({ editor: e }) {
|
|
2738
3113
|
this.editor = e;
|
|
2739
3114
|
}
|
|
@@ -2748,20 +3123,20 @@ class Mt {
|
|
|
2748
3123
|
objects: e,
|
|
2749
3124
|
withoutSave: t
|
|
2750
3125
|
} = {}) {
|
|
2751
|
-
const { canvas: s, historyManager:
|
|
2752
|
-
|
|
2753
|
-
if (
|
|
2754
|
-
|
|
3126
|
+
const { canvas: s, historyManager: a, groupingManager: n } = this.editor, o = (e || s.getActiveObjects()).filter((i) => !i.locked);
|
|
3127
|
+
o != null && o.length && (a.suspendHistory(), o.forEach((i) => {
|
|
3128
|
+
if (i.type === "group" && i.format !== "svg") {
|
|
3129
|
+
n.ungroup({ object: i, withoutSave: t }), this.deleteSelectedObjects();
|
|
2755
3130
|
return;
|
|
2756
3131
|
}
|
|
2757
|
-
s.remove(
|
|
2758
|
-
}), s.discardActiveObject(), s.renderAll(),
|
|
2759
|
-
objects:
|
|
3132
|
+
s.remove(i);
|
|
3133
|
+
}), s.discardActiveObject(), s.renderAll(), a.resumeHistory(), t || a.saveState(), s.fire("editor:objects-deleted", {
|
|
3134
|
+
objects: o,
|
|
2760
3135
|
withoutSave: t
|
|
2761
3136
|
}));
|
|
2762
3137
|
}
|
|
2763
3138
|
}
|
|
2764
|
-
const
|
|
3139
|
+
const bt = {
|
|
2765
3140
|
IMAGE_MANAGER: {
|
|
2766
3141
|
/**
|
|
2767
3142
|
* Некорректный Content-Type изображения
|
|
@@ -2837,9 +3212,30 @@ const mt = {
|
|
|
2837
3212
|
HISTORY_MANAGER: {
|
|
2838
3213
|
UNDO_ERROR: "UNDO_ERROR",
|
|
2839
3214
|
REDO_ERROR: "REDO_ERROR"
|
|
3215
|
+
},
|
|
3216
|
+
/**
|
|
3217
|
+
* Коды ошибок и предупреждений для BackgroundManager.
|
|
3218
|
+
*/
|
|
3219
|
+
BACKGROUND_MANAGER: {
|
|
3220
|
+
/**
|
|
3221
|
+
* Ошибка создания фона.
|
|
3222
|
+
*/
|
|
3223
|
+
BACKGROUND_CREATION_FAILED: "BACKGROUND_CREATION_FAILED",
|
|
3224
|
+
/**
|
|
3225
|
+
* Ошибка удаления фона.
|
|
3226
|
+
*/
|
|
3227
|
+
BACKGROUND_REMOVAL_FAILED: "BACKGROUND_REMOVAL_FAILED",
|
|
3228
|
+
/**
|
|
3229
|
+
* Предупреждение об отсутствии фона для удаления.
|
|
3230
|
+
*/
|
|
3231
|
+
NO_BACKGROUND_TO_REMOVE: "NO_BACKGROUND_TO_REMOVE",
|
|
3232
|
+
/**
|
|
3233
|
+
* Ошибка парсинга градиента.
|
|
3234
|
+
*/
|
|
3235
|
+
INVALID_GRADIENT_FORMAT: "INVALID_GRADIENT_FORMAT"
|
|
2840
3236
|
}
|
|
2841
3237
|
};
|
|
2842
|
-
class
|
|
3238
|
+
class $ {
|
|
2843
3239
|
constructor({ editor: e }) {
|
|
2844
3240
|
this._buffer = [], this.editor = e;
|
|
2845
3241
|
}
|
|
@@ -2865,24 +3261,24 @@ class Q {
|
|
|
2865
3261
|
* @param options.message — текст ошибки (опционально, если не передан, то используется код ошибки)
|
|
2866
3262
|
* @fires editor:error
|
|
2867
3263
|
*/
|
|
2868
|
-
emitError({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, data:
|
|
2869
|
-
if (
|
|
3264
|
+
emitError({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, data: a, message: n }) {
|
|
3265
|
+
if (!$.isValidErrorCode(s)) {
|
|
2870
3266
|
console.warn("Неизвестный код ошибки: ", { code: s, origin: e, method: t });
|
|
2871
3267
|
return;
|
|
2872
3268
|
}
|
|
2873
3269
|
if (!s) return;
|
|
2874
|
-
const
|
|
2875
|
-
console.error(`${e}. ${t}. ${s}. ${
|
|
2876
|
-
const
|
|
3270
|
+
const o = n || s;
|
|
3271
|
+
console.error(`${e}. ${t}. ${s}. ${o}`, a);
|
|
3272
|
+
const i = {
|
|
2877
3273
|
code: s,
|
|
2878
3274
|
origin: e,
|
|
2879
3275
|
method: t,
|
|
2880
|
-
message:
|
|
2881
|
-
data:
|
|
3276
|
+
message: o,
|
|
3277
|
+
data: a
|
|
2882
3278
|
};
|
|
2883
|
-
this._buffer.push(
|
|
3279
|
+
this._buffer.push(I({
|
|
2884
3280
|
type: "editor:error"
|
|
2885
|
-
},
|
|
3281
|
+
}, i)), this.editor.canvas.fire("editor:error", i);
|
|
2886
3282
|
}
|
|
2887
3283
|
/**
|
|
2888
3284
|
* Эмитит предупреждение через fabricjs
|
|
@@ -2894,23 +3290,23 @@ class Q {
|
|
|
2894
3290
|
* @param options.message — текст предупреждения (опционально, если не передан, то используется код предупреждения)
|
|
2895
3291
|
* @fires editor:warning
|
|
2896
3292
|
*/
|
|
2897
|
-
emitWarning({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, message:
|
|
2898
|
-
if (
|
|
3293
|
+
emitWarning({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, message: a, data: n }) {
|
|
3294
|
+
if (!$.isValidErrorCode(s)) {
|
|
2899
3295
|
console.warn("Неизвестный код предупреждения: ", { code: s, origin: e, method: t });
|
|
2900
3296
|
return;
|
|
2901
3297
|
}
|
|
2902
|
-
const
|
|
2903
|
-
console.warn(`${e}. ${t}. ${s}. ${
|
|
2904
|
-
const
|
|
3298
|
+
const o = a || s;
|
|
3299
|
+
console.warn(`${e}. ${t}. ${s}. ${o}`, n);
|
|
3300
|
+
const i = {
|
|
2905
3301
|
code: s,
|
|
2906
3302
|
origin: e,
|
|
2907
3303
|
method: t,
|
|
2908
|
-
message:
|
|
2909
|
-
data:
|
|
3304
|
+
message: o,
|
|
3305
|
+
data: n
|
|
2910
3306
|
};
|
|
2911
|
-
this._buffer.push(
|
|
3307
|
+
this._buffer.push(I({
|
|
2912
3308
|
type: "editor:warning"
|
|
2913
|
-
},
|
|
3309
|
+
}, i)), this.editor.canvas.fire("editor:warning", i);
|
|
2914
3310
|
}
|
|
2915
3311
|
/**
|
|
2916
3312
|
* Проверяет, является ли код ошибки или предупреждения допустимым
|
|
@@ -2918,17 +3314,17 @@ class Q {
|
|
|
2918
3314
|
* @returns true, если код допустим, иначе false
|
|
2919
3315
|
*/
|
|
2920
3316
|
static isValidErrorCode(e) {
|
|
2921
|
-
return e ? Object.values(
|
|
3317
|
+
return e ? Object.values(bt).some((t) => Object.values(t).includes(e)) : !1;
|
|
2922
3318
|
}
|
|
2923
3319
|
}
|
|
2924
|
-
class
|
|
3320
|
+
class re {
|
|
2925
3321
|
/**
|
|
2926
3322
|
* Конструктор класса ImageEditor.
|
|
2927
3323
|
* @param canvasId - идентификатор канваса, в котором будет создан редактор
|
|
2928
3324
|
* @param options - опции и настройки редактора
|
|
2929
3325
|
*/
|
|
2930
3326
|
constructor(e, t) {
|
|
2931
|
-
this.options = t, this.containerId = e, this.editorId = `${e}-${
|
|
3327
|
+
this.options = t, this.containerId = e, this.editorId = `${e}-${A()}`, this.clipboard = null, this.init();
|
|
2932
3328
|
}
|
|
2933
3329
|
/**
|
|
2934
3330
|
* Инициализация редактора.
|
|
@@ -2936,29 +3332,29 @@ class ae {
|
|
|
2936
3332
|
* @fires editor:ready
|
|
2937
3333
|
*/
|
|
2938
3334
|
init() {
|
|
2939
|
-
return
|
|
3335
|
+
return y(this, null, function* () {
|
|
2940
3336
|
const {
|
|
2941
3337
|
editorContainerWidth: e,
|
|
2942
3338
|
editorContainerHeight: t,
|
|
2943
3339
|
canvasWrapperWidth: s,
|
|
2944
|
-
canvasWrapperHeight:
|
|
2945
|
-
canvasCSSWidth:
|
|
2946
|
-
canvasCSSHeight:
|
|
2947
|
-
initialImage:
|
|
2948
|
-
initialStateJSON:
|
|
2949
|
-
scaleType:
|
|
3340
|
+
canvasWrapperHeight: a,
|
|
3341
|
+
canvasCSSWidth: n,
|
|
3342
|
+
canvasCSSHeight: o,
|
|
3343
|
+
initialImage: i,
|
|
3344
|
+
initialStateJSON: c,
|
|
3345
|
+
scaleType: d,
|
|
2950
3346
|
_onReadyCallback: h
|
|
2951
3347
|
} = this.options;
|
|
2952
|
-
if (
|
|
3348
|
+
if (Ve.apply(), this.canvas = new we(this.containerId, this.options), this.moduleLoader = new xe(), this.workerManager = new Ue(), this.errorManager = new $({ editor: this }), this.historyManager = new st({ editor: this }), this.toolbar = new tt({ editor: this }), this.transformManager = new lt({ editor: this }), this.canvasManager = new dt({ editor: this }), this.imageManager = new O({ editor: this }), this.layerManager = new Q({ editor: this }), this.shapeManager = new gt({ editor: this }), this.interactionBlocker = new ht({ editor: this }), this.backgroundManager = new x({ editor: this }), this.clipboardManager = new ut({ editor: this }), this.objectLockManager = new K({ editor: this }), this.groupingManager = new Mt({ editor: this }), this.selectionManager = new ft({ editor: this }), this.deletionManager = new mt({ editor: this }), this._createMontageArea(), this._createClippingArea(), this.listeners = new Y({ editor: this, options: this.options }), this.canvasManager.setEditorContainerWidth(e), this.canvasManager.setEditorContainerHeight(t), this.canvasManager.setCanvasWrapperWidth(s), this.canvasManager.setCanvasWrapperHeight(a), this.canvasManager.setCanvasCSSWidth(n), this.canvasManager.setCanvasCSSHeight(o), i != null && i.source) {
|
|
2953
3349
|
const {
|
|
2954
3350
|
source: l,
|
|
2955
|
-
scale: g = `image-${
|
|
2956
|
-
withoutSave:
|
|
2957
|
-
} =
|
|
2958
|
-
yield this.imageManager.importImage({ source: l, scale: g, withoutSave:
|
|
3351
|
+
scale: g = `image-${d}`,
|
|
3352
|
+
withoutSave: u = !0
|
|
3353
|
+
} = i;
|
|
3354
|
+
yield this.imageManager.importImage({ source: l, scale: g, withoutSave: u });
|
|
2959
3355
|
} else
|
|
2960
3356
|
this.canvasManager.setDefaultScale({ withoutSave: !0 });
|
|
2961
|
-
|
|
3357
|
+
c && this.historyManager.loadStateFromFullState(c), this.historyManager.saveState(), console.log("editor:ready"), this.canvas.fire("editor:ready", this), typeof h == "function" && h(this);
|
|
2962
3358
|
});
|
|
2963
3359
|
}
|
|
2964
3360
|
/**
|
|
@@ -2972,7 +3368,7 @@ class ae {
|
|
|
2972
3368
|
this.montageArea = this.shapeManager.addRectangle({
|
|
2973
3369
|
width: e,
|
|
2974
3370
|
height: t,
|
|
2975
|
-
fill:
|
|
3371
|
+
fill: re._createMosaicPattern(),
|
|
2976
3372
|
stroke: null,
|
|
2977
3373
|
strokeWidth: 0,
|
|
2978
3374
|
selectable: !1,
|
|
@@ -3022,13 +3418,13 @@ class ae {
|
|
|
3022
3418
|
const e = document.createElement("canvas");
|
|
3023
3419
|
e.width = 20, e.height = 20;
|
|
3024
3420
|
const t = e.getContext("2d");
|
|
3025
|
-
return t.fillStyle = "#ddd", t.fillRect(0, 0, 40, 40), t.fillStyle = "#ccc", t.fillRect(0, 0, 10, 10), t.fillRect(10, 10, 10, 10), new
|
|
3421
|
+
return t.fillStyle = "#ddd", t.fillRect(0, 0, 40, 40), t.fillStyle = "#ccc", t.fillRect(0, 0, 10, 10), t.fillRect(10, 10, 10, 10), new Te({
|
|
3026
3422
|
source: e,
|
|
3027
3423
|
repeat: "repeat"
|
|
3028
3424
|
});
|
|
3029
3425
|
}
|
|
3030
3426
|
}
|
|
3031
|
-
const
|
|
3427
|
+
const jt = {
|
|
3032
3428
|
/**
|
|
3033
3429
|
* Опции редактора
|
|
3034
3430
|
*/
|
|
@@ -3117,18 +3513,18 @@ const ft = {
|
|
|
3117
3513
|
resetObjectFitByDoubleClick: !0,
|
|
3118
3514
|
keyboardIgnoreSelectors: []
|
|
3119
3515
|
};
|
|
3120
|
-
function
|
|
3121
|
-
const t =
|
|
3516
|
+
function St(r, e = {}) {
|
|
3517
|
+
const t = I(I({}, jt), e), s = document.getElementById(r);
|
|
3122
3518
|
if (!s)
|
|
3123
3519
|
return Promise.reject(new Error(`Контейнер с ID "${r}" не найден.`));
|
|
3124
|
-
const
|
|
3125
|
-
return
|
|
3126
|
-
t._onReadyCallback =
|
|
3127
|
-
const
|
|
3128
|
-
window[r] =
|
|
3520
|
+
const a = document.createElement("canvas");
|
|
3521
|
+
return a.id = `${r}-canvas`, s.appendChild(a), t.editorContainer = s, new Promise((n) => {
|
|
3522
|
+
t._onReadyCallback = n;
|
|
3523
|
+
const o = new re(a.id, t);
|
|
3524
|
+
window[r] = o;
|
|
3129
3525
|
});
|
|
3130
3526
|
}
|
|
3131
3527
|
export {
|
|
3132
|
-
|
|
3528
|
+
St as default
|
|
3133
3529
|
};
|
|
3134
3530
|
//# sourceMappingURL=main.js.map
|