@anu3ev/fabric-image-editor 0.4.2 → 0.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.js +859 -820
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
1
|
+
var Fe = Object.defineProperty, ze = Object.defineProperties;
|
|
2
|
+
var He = Object.getOwnPropertyDescriptors;
|
|
3
3
|
var bt = Object.getOwnPropertySymbols;
|
|
4
|
-
var
|
|
5
|
-
var
|
|
4
|
+
var Ie = Object.prototype.hasOwnProperty, Se = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var Ae = (h, t, e) => t in h ? Fe(h, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[t] = e, T = (h, t) => {
|
|
6
6
|
for (var e in t || (t = {}))
|
|
7
|
-
|
|
7
|
+
Ie.call(t, e) && Ae(h, e, t[e]);
|
|
8
8
|
if (bt)
|
|
9
9
|
for (var e of bt(t))
|
|
10
|
-
|
|
10
|
+
Se.call(t, e) && Ae(h, e, t[e]);
|
|
11
11
|
return h;
|
|
12
|
-
},
|
|
13
|
-
var
|
|
12
|
+
}, Ce = (h, t) => ze(h, He(t));
|
|
13
|
+
var X = (h, t) => {
|
|
14
14
|
var e = {};
|
|
15
15
|
for (var s in h)
|
|
16
|
-
|
|
16
|
+
Ie.call(h, s) && t.indexOf(s) < 0 && (e[s] = h[s]);
|
|
17
17
|
if (h != null && bt)
|
|
18
18
|
for (var s of bt(h))
|
|
19
|
-
t.indexOf(s) < 0 &&
|
|
19
|
+
t.indexOf(s) < 0 && Se.call(h, s) && (e[s] = h[s]);
|
|
20
20
|
return e;
|
|
21
21
|
};
|
|
22
|
-
var
|
|
22
|
+
var E = (h, t, e) => new Promise((s, n) => {
|
|
23
23
|
var o = (r) => {
|
|
24
24
|
try {
|
|
25
|
-
|
|
25
|
+
a(e.next(r));
|
|
26
26
|
} catch (c) {
|
|
27
27
|
n(c);
|
|
28
28
|
}
|
|
29
|
-
},
|
|
29
|
+
}, i = (r) => {
|
|
30
30
|
try {
|
|
31
|
-
|
|
31
|
+
a(e.throw(r));
|
|
32
32
|
} catch (c) {
|
|
33
33
|
n(c);
|
|
34
34
|
}
|
|
35
|
-
},
|
|
36
|
-
|
|
35
|
+
}, a = (r) => r.done ? s(r.value) : Promise.resolve(r.value).then(o, i);
|
|
36
|
+
a((e = e.apply(h, t)).next());
|
|
37
37
|
});
|
|
38
|
-
import { ActiveSelection as
|
|
39
|
-
import { create as
|
|
40
|
-
import
|
|
41
|
-
var
|
|
38
|
+
import { ActiveSelection as N, Textbox as gt, util as mt, controlsUtils as we, InteractiveFabricObject as Ee, loadSVGFromURL as We, FabricImage as ht, Point as At, Gradient as Oe, Rect as Ze, Circle as Pe, Triangle as Ve, Group as $, Canvas as Ge, Pattern as Xe } from "fabric";
|
|
39
|
+
import { create as Ke } from "jsondiffpatch";
|
|
40
|
+
import $e from "diff-match-patch";
|
|
41
|
+
var Qe = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", x = function() {
|
|
42
42
|
for (var t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 21, e = "", s = crypto.getRandomValues(new Uint8Array(t |= 0)); t--; )
|
|
43
|
-
e +=
|
|
43
|
+
e += Qe[s[t] & 63];
|
|
44
44
|
return e;
|
|
45
45
|
};
|
|
46
|
-
class
|
|
46
|
+
class ft {
|
|
47
47
|
/**
|
|
48
48
|
* Конструктор принимает редактор и опции.
|
|
49
49
|
* @param params
|
|
@@ -61,7 +61,7 @@ class pt {
|
|
|
61
61
|
* @param params.options.adaptCanvasToContainerOnResize — адаптировать канвас к размерам контейнера при изменении размеров окна
|
|
62
62
|
*/
|
|
63
63
|
constructor({ editor: t, options: e = {} }) {
|
|
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 = t, this.canvas = t.canvas, this.options = e, 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 = t, this.canvas = t.canvas, this.options = e, this.handleContainerResizeBound = ft.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 = ft.debounce(this.handleObjectModifiedHistory.bind(this), 300), this.handleObjectRotatingHistoryBound = ft.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
|
* Инициализация всех обработчиков согласно опциям.
|
|
@@ -73,13 +73,13 @@ class pt {
|
|
|
73
73
|
mouseWheelZooming: s,
|
|
74
74
|
bringToFrontOnSelection: n,
|
|
75
75
|
copyObjectsByHotkey: o,
|
|
76
|
-
pasteImageFromClipboard:
|
|
77
|
-
undoRedoByHotKeys:
|
|
76
|
+
pasteImageFromClipboard: i,
|
|
77
|
+
undoRedoByHotKeys: a,
|
|
78
78
|
selectAllByHotkey: r,
|
|
79
79
|
deleteObjectsByHotkey: c,
|
|
80
|
-
resetObjectFitByDoubleClick:
|
|
80
|
+
resetObjectFitByDoubleClick: l
|
|
81
81
|
} = this.options;
|
|
82
|
-
e && (this.canvas.on("mouse:down", this.handleCanvasDragStartBound), this.canvas.on("mouse:move", this.handleCanvasDraggingBound), this.canvas.on("mouse:up", this.handleCanvasDragEndBound), document.addEventListener("keydown", this.handleSpaceKeyDownBound, { capture: !0 }), document.addEventListener("keyup", this.handleSpaceKeyUpBound, { capture: !0 })), s && this.canvas.on("mouse:wheel", this.handleMouseWheelZoomBound), n && (this.canvas.on("selection:created", this.handleBringToFrontBound), this.canvas.on("selection:updated", this.handleBringToFrontBound)),
|
|
82
|
+
e && (this.canvas.on("mouse:down", this.handleCanvasDragStartBound), this.canvas.on("mouse:move", this.handleCanvasDraggingBound), this.canvas.on("mouse:up", this.handleCanvasDragEndBound), document.addEventListener("keydown", this.handleSpaceKeyDownBound, { capture: !0 }), document.addEventListener("keyup", this.handleSpaceKeyUpBound, { capture: !0 })), s && this.canvas.on("mouse:wheel", this.handleMouseWheelZoomBound), n && (this.canvas.on("selection:created", this.handleBringToFrontBound), this.canvas.on("selection:updated", this.handleBringToFrontBound)), l && this.canvas.on("mouse:dblclick", this.handleResetObjectFitBound), t && window.addEventListener("resize", this.handleContainerResizeBound, { capture: !0 }), o && document.addEventListener("keydown", this.handleCopyEventBound, { capture: !0 }), i && document.addEventListener("paste", this.handlePasteEventBound, { capture: !0 }), a && (document.addEventListener("keydown", this.handleUndoRedoEventBound, { capture: !0 }), document.addEventListener("keyup", this.handleUndoRedoKeyUpBound, { capture: !0 })), r && document.addEventListener("keydown", this.handleSelectAllEventBound, { capture: !0 }), c && document.addEventListener("keydown", this.handleDeleteObjectsEventBound, { capture: !0 }), this.canvas.on("object:modified", this.handleObjectModifiedHistoryBound), this.canvas.on("object:rotating", this.handleObjectRotatingHistoryBound), this.canvas.on("object:added", this.handleObjectAddedHistoryBound), this.canvas.on("object:removed", this.handleObjectRemovedHistoryBound), this.canvas.on("object:added", this.handleOverlayUpdateBound), this.canvas.on("selection:created", this.handleOverlayUpdateBound), this.canvas.on("selection:created", this.handleLockedSelectionBound), this.canvas.on("selection:updated", this.handleLockedSelectionBound), this.canvas.on("object:added", this.handleBackgroundUpdateBound), this.canvas.on("selection:created", this.handleBackgroundUpdateBound);
|
|
83
83
|
}
|
|
84
84
|
/**
|
|
85
85
|
* При массовом выделении объектов удаляем из него залоченные.
|
|
@@ -90,7 +90,7 @@ class pt {
|
|
|
90
90
|
_filterLockedSelection({ selected: t, e }) {
|
|
91
91
|
if (!(t != null && t.length) || !(e instanceof MouseEvent) || t.length === 1) return;
|
|
92
92
|
const { lockedObjects: s, unlockedObjects: n } = t.reduce(
|
|
93
|
-
(
|
|
93
|
+
(i, a) => a.locked ? (i.lockedObjects.push(a), i) : (i.unlockedObjects.push(a), i),
|
|
94
94
|
{ lockedObjects: [], unlockedObjects: [] }
|
|
95
95
|
);
|
|
96
96
|
if (s.length === 0) return;
|
|
@@ -98,15 +98,15 @@ class pt {
|
|
|
98
98
|
if (n.length === 1)
|
|
99
99
|
this.canvas.setActiveObject(n[0]);
|
|
100
100
|
else {
|
|
101
|
-
const
|
|
101
|
+
const i = new N(n, {
|
|
102
102
|
canvas: this.canvas
|
|
103
103
|
});
|
|
104
|
-
this.canvas.setActiveObject(
|
|
104
|
+
this.canvas.setActiveObject(i);
|
|
105
105
|
}
|
|
106
106
|
this.canvas.requestRenderAll();
|
|
107
107
|
return;
|
|
108
108
|
}
|
|
109
|
-
const o = new
|
|
109
|
+
const o = new N(t, {
|
|
110
110
|
canvas: this.canvas
|
|
111
111
|
});
|
|
112
112
|
this.editor.objectLockManager.lockObject({
|
|
@@ -175,7 +175,7 @@ class pt {
|
|
|
175
175
|
* @param event.code — код клавиши
|
|
176
176
|
*/
|
|
177
177
|
handleUndoRedoEvent(t) {
|
|
178
|
-
return
|
|
178
|
+
return E(this, null, function* () {
|
|
179
179
|
const { ctrlKey: e, metaKey: s, code: n, repeat: o } = t;
|
|
180
180
|
this._shouldIgnoreKeyboardEvent(t) || !e && !s || o || !/Mac/i.test(navigator.userAgent) && this.isUndoRedoKeyPressed || (n === "KeyZ" ? (t.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.undo()) : n === "KeyY" && (t.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.redo()));
|
|
181
181
|
});
|
|
@@ -219,12 +219,12 @@ class pt {
|
|
|
219
219
|
const { canvas: e, editor: s, isSpacePressed: n, isDragging: o } = this;
|
|
220
220
|
if (n || o) return;
|
|
221
221
|
this.isSpacePressed = !0, t.preventDefault();
|
|
222
|
-
const
|
|
223
|
-
|
|
222
|
+
const i = e.getActiveObject() || null;
|
|
223
|
+
i instanceof N ? this.savedSelection = i.getObjects().slice() : i && (this.savedSelection = [i]), e.discardActiveObject(), e.set({
|
|
224
224
|
selection: !1,
|
|
225
225
|
defaultCursor: "grab"
|
|
226
|
-
}), e.setCursor("grab"), s.canvasManager.getObjects().forEach((
|
|
227
|
-
|
|
226
|
+
}), e.setCursor("grab"), s.canvasManager.getObjects().forEach((a) => {
|
|
227
|
+
a.set({
|
|
228
228
|
selectable: !1,
|
|
229
229
|
evented: !1
|
|
230
230
|
});
|
|
@@ -259,7 +259,7 @@ class pt {
|
|
|
259
259
|
e.setActiveObject(t[0]);
|
|
260
260
|
return;
|
|
261
261
|
}
|
|
262
|
-
const n = t.filter((
|
|
262
|
+
const n = t.filter((i) => s.canvasManager.getObjects().includes(i)), o = new N(n, { canvas: e });
|
|
263
263
|
e.setActiveObject(o);
|
|
264
264
|
}
|
|
265
265
|
// --- Обработчики для событий canvas (Fabric) ---
|
|
@@ -282,8 +282,8 @@ class pt {
|
|
|
282
282
|
const { panConstraintManager: e, montageArea: s } = this.editor;
|
|
283
283
|
if (!e.isPanAllowed())
|
|
284
284
|
return;
|
|
285
|
-
const n = this.canvas.viewportTransform, o = n[4] + (t.clientX - this.lastMouseX),
|
|
286
|
-
n[4] =
|
|
285
|
+
const n = this.canvas.viewportTransform, o = n[4] + (t.clientX - this.lastMouseX), i = n[5] + (t.clientY - this.lastMouseY), a = e.constrainPan(o, i);
|
|
286
|
+
n[4] = a.x, n[5] = a.y, s.setCoords(), this.canvas.requestRenderAll(), this.lastMouseX = t.clientX, this.lastMouseY = t.clientY;
|
|
287
287
|
}
|
|
288
288
|
/**
|
|
289
289
|
* Завершение перетаскивания канваса (mouse:up).
|
|
@@ -330,7 +330,7 @@ class pt {
|
|
|
330
330
|
*/
|
|
331
331
|
handleResetObjectFit(t) {
|
|
332
332
|
const e = t == null ? void 0 : t.target;
|
|
333
|
-
!e || e instanceof
|
|
333
|
+
!e || e instanceof gt || this.editor.transformManager.resetObject({ object: e });
|
|
334
334
|
}
|
|
335
335
|
/**
|
|
336
336
|
* Проверяет, должно ли событие клавиатуры быть проигнорировано
|
|
@@ -341,17 +341,17 @@ class pt {
|
|
|
341
341
|
_shouldIgnoreKeyboardEvent(t) {
|
|
342
342
|
const e = document.activeElement, s = t.target, n = ["input", "textarea", "select"];
|
|
343
343
|
if (s) {
|
|
344
|
-
const
|
|
345
|
-
if (t.type === "paste" && n.includes(
|
|
346
|
-
const
|
|
347
|
-
return !!(
|
|
344
|
+
const i = s.tagName.toLowerCase();
|
|
345
|
+
if (t.type === "paste" && n.includes(i)) {
|
|
346
|
+
const a = e == null ? void 0 : e.tagName.toLowerCase();
|
|
347
|
+
return !!(a && n.includes(a));
|
|
348
348
|
}
|
|
349
|
-
if (n.includes(
|
|
349
|
+
if (n.includes(i) || s.contentEditable === "true")
|
|
350
350
|
return !0;
|
|
351
351
|
}
|
|
352
352
|
if (e && e !== s) {
|
|
353
|
-
const
|
|
354
|
-
if (n.includes(
|
|
353
|
+
const i = e.tagName.toLowerCase();
|
|
354
|
+
if (n.includes(i) || e.contentEditable === "true") return !0;
|
|
355
355
|
}
|
|
356
356
|
const o = window.getSelection();
|
|
357
357
|
if (o && !o.isCollapsed && o.rangeCount > 0) {
|
|
@@ -359,13 +359,13 @@ class pt {
|
|
|
359
359
|
r.nodeType === Node.TEXT_NODE && (r = r.parentElement);
|
|
360
360
|
const { keyboardIgnoreSelectors: c } = this.options;
|
|
361
361
|
if (c != null && c.length && r)
|
|
362
|
-
for (const
|
|
362
|
+
for (const l of c)
|
|
363
363
|
try {
|
|
364
|
-
const
|
|
365
|
-
if (
|
|
364
|
+
const d = r;
|
|
365
|
+
if (d.matches && d.matches(l) || d.closest && d.closest(l))
|
|
366
366
|
return !0;
|
|
367
|
-
} catch (
|
|
368
|
-
console.warn(`Error checking selection container with selector "${
|
|
367
|
+
} catch (d) {
|
|
368
|
+
console.warn(`Error checking selection container with selector "${l}":`, d);
|
|
369
369
|
}
|
|
370
370
|
}
|
|
371
371
|
return !1;
|
|
@@ -391,7 +391,7 @@ class pt {
|
|
|
391
391
|
};
|
|
392
392
|
}
|
|
393
393
|
}
|
|
394
|
-
class
|
|
394
|
+
class Je {
|
|
395
395
|
/**
|
|
396
396
|
* Класс для динамической загрузки внешних модулей.
|
|
397
397
|
*/
|
|
@@ -409,7 +409,7 @@ class Ke {
|
|
|
409
409
|
return this.loaders[t] ? (this.cache.has(t) || this.cache.set(t, this.loaders[t]()), this.cache.get(t)) : Promise.reject(new Error(`Unknown module "${t}"`));
|
|
410
410
|
}
|
|
411
411
|
}
|
|
412
|
-
function
|
|
412
|
+
function qe(h) {
|
|
413
413
|
return new Worker(
|
|
414
414
|
"" + new URL("assets/worker-CN39s7P7.js", import.meta.url).href,
|
|
415
415
|
{
|
|
@@ -417,13 +417,13 @@ function $e(h) {
|
|
|
417
417
|
}
|
|
418
418
|
);
|
|
419
419
|
}
|
|
420
|
-
class
|
|
420
|
+
class ts {
|
|
421
421
|
/**
|
|
422
422
|
* @param scriptUrl — URL скрипта воркера.
|
|
423
423
|
* По-умолчанию использует DefaultWorker из соседнего файла
|
|
424
424
|
*/
|
|
425
425
|
constructor(t) {
|
|
426
|
-
t ? this.worker = new Worker(t, { type: "module" }) : this.worker = new
|
|
426
|
+
t ? this.worker = new Worker(t, { type: "module" }) : this.worker = new qe(), this._callbacks = /* @__PURE__ */ new Map(), this.worker.onmessage = this._handleMessage.bind(this);
|
|
427
427
|
}
|
|
428
428
|
/**
|
|
429
429
|
* Обработчик сообщений от воркера
|
|
@@ -436,12 +436,12 @@ class Qe {
|
|
|
436
436
|
* @returns
|
|
437
437
|
*/
|
|
438
438
|
_handleMessage({ data: t }) {
|
|
439
|
-
const { requestId: e, success: s, data: n, error: o } = t,
|
|
440
|
-
if (!
|
|
439
|
+
const { requestId: e, success: s, data: n, error: o } = t, i = this._callbacks.get(e);
|
|
440
|
+
if (!i) {
|
|
441
441
|
console.warn(`No callback found for requestId: ${e}`);
|
|
442
442
|
return;
|
|
443
443
|
}
|
|
444
|
-
s ?
|
|
444
|
+
s ? i.resolve(n) : i.reject(new Error(o)), this._callbacks.delete(e);
|
|
445
445
|
}
|
|
446
446
|
/**
|
|
447
447
|
* Универсальный метод отправки команды в воркер
|
|
@@ -452,8 +452,8 @@ class Qe {
|
|
|
452
452
|
*/
|
|
453
453
|
post(t, e, s = []) {
|
|
454
454
|
const n = `${t}:${x(8)}`;
|
|
455
|
-
return new Promise((o,
|
|
456
|
-
this._callbacks.set(n, { resolve: o, reject:
|
|
455
|
+
return new Promise((o, i) => {
|
|
456
|
+
this._callbacks.set(n, { resolve: o, reject: i }), this.worker.postMessage({ action: t, payload: e, requestId: n }, s);
|
|
457
457
|
});
|
|
458
458
|
}
|
|
459
459
|
/**
|
|
@@ -463,65 +463,65 @@ class Qe {
|
|
|
463
463
|
this.worker.terminate();
|
|
464
464
|
}
|
|
465
465
|
}
|
|
466
|
-
const
|
|
466
|
+
const Z = 12, es = 2, Tt = 8, Nt = 20, ss = 100, Lt = 20, kt = 8, ns = 100, It = 32, _t = 1, os = "#2B2D33", Bt = "#3D8BF4", Rt = "#FFFFFF";
|
|
467
467
|
function vt(h, t, e, s, n) {
|
|
468
|
-
const o =
|
|
469
|
-
h.save(), h.translate(t, e), h.rotate(
|
|
468
|
+
const o = Z, i = es;
|
|
469
|
+
h.save(), h.translate(t, e), h.rotate(mt.degreesToRadians(n.angle)), h.fillStyle = Rt, h.strokeStyle = Bt, h.lineWidth = _t, h.beginPath(), h.roundRect(-o / 2, -o / 2, o, o, i), h.fill(), h.stroke(), h.restore();
|
|
470
470
|
}
|
|
471
|
-
function
|
|
472
|
-
const o = Tt,
|
|
473
|
-
h.save(), h.translate(t, e), h.rotate(
|
|
471
|
+
function De(h, t, e, s, n) {
|
|
472
|
+
const o = Tt, i = Nt, a = ss;
|
|
473
|
+
h.save(), h.translate(t, e), h.rotate(mt.degreesToRadians(n.angle)), h.fillStyle = Rt, h.strokeStyle = Bt, h.lineWidth = _t, h.beginPath(), h.roundRect(-o / 2, -i / 2, o, i, a), h.fill(), h.stroke(), h.restore();
|
|
474
474
|
}
|
|
475
|
-
function
|
|
476
|
-
const o = Lt,
|
|
477
|
-
h.save(), h.translate(t, e), h.rotate(
|
|
475
|
+
function Te(h, t, e, s, n) {
|
|
476
|
+
const o = Lt, i = kt, a = ns;
|
|
477
|
+
h.save(), h.translate(t, e), h.rotate(mt.degreesToRadians(n.angle)), h.fillStyle = Rt, h.strokeStyle = Bt, h.lineWidth = _t, h.beginPath(), h.roundRect(-o / 2, -i / 2, o, i, a), h.fill(), h.stroke(), h.restore();
|
|
478
478
|
}
|
|
479
|
-
const
|
|
480
|
-
|
|
481
|
-
function
|
|
482
|
-
const
|
|
483
|
-
h.save(), h.translate(t, e), h.rotate(
|
|
479
|
+
const is = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", Be = new Image();
|
|
480
|
+
Be.src = is;
|
|
481
|
+
function as(h, t, e, s, n) {
|
|
482
|
+
const i = It / 2;
|
|
483
|
+
h.save(), h.translate(t, e), h.rotate(mt.degreesToRadians(n.angle)), h.fillStyle = os, h.beginPath(), h.arc(0, 0, i, 0, 2 * Math.PI), h.fill(), h.drawImage(Be, -i / 2, -i / 2, i, i), h.restore();
|
|
484
484
|
}
|
|
485
|
-
const
|
|
485
|
+
const rs = {
|
|
486
486
|
// Угловые точки
|
|
487
487
|
tl: {
|
|
488
488
|
render: vt,
|
|
489
|
-
sizeX:
|
|
490
|
-
sizeY:
|
|
489
|
+
sizeX: Z,
|
|
490
|
+
sizeY: Z,
|
|
491
491
|
offsetX: 0,
|
|
492
492
|
offsetY: 0
|
|
493
493
|
},
|
|
494
494
|
tr: {
|
|
495
495
|
render: vt,
|
|
496
|
-
sizeX:
|
|
497
|
-
sizeY:
|
|
496
|
+
sizeX: Z,
|
|
497
|
+
sizeY: Z,
|
|
498
498
|
offsetX: 0,
|
|
499
499
|
offsetY: 0
|
|
500
500
|
},
|
|
501
501
|
bl: {
|
|
502
502
|
render: vt,
|
|
503
|
-
sizeX:
|
|
504
|
-
sizeY:
|
|
503
|
+
sizeX: Z,
|
|
504
|
+
sizeY: Z,
|
|
505
505
|
offsetX: 0,
|
|
506
506
|
offsetY: 0
|
|
507
507
|
},
|
|
508
508
|
br: {
|
|
509
509
|
render: vt,
|
|
510
|
-
sizeX:
|
|
511
|
-
sizeY:
|
|
510
|
+
sizeX: Z,
|
|
511
|
+
sizeY: Z,
|
|
512
512
|
offsetX: 0,
|
|
513
513
|
offsetY: 0
|
|
514
514
|
},
|
|
515
515
|
// Середина вертикалей
|
|
516
516
|
ml: {
|
|
517
|
-
render:
|
|
517
|
+
render: De,
|
|
518
518
|
sizeX: Tt,
|
|
519
519
|
sizeY: Nt,
|
|
520
520
|
offsetX: 0,
|
|
521
521
|
offsetY: 0
|
|
522
522
|
},
|
|
523
523
|
mr: {
|
|
524
|
-
render:
|
|
524
|
+
render: De,
|
|
525
525
|
sizeX: Tt,
|
|
526
526
|
sizeY: Nt,
|
|
527
527
|
offsetX: 0,
|
|
@@ -529,14 +529,14 @@ const os = {
|
|
|
529
529
|
},
|
|
530
530
|
// Середина горизонталей
|
|
531
531
|
mt: {
|
|
532
|
-
render:
|
|
532
|
+
render: Te,
|
|
533
533
|
sizeX: Lt,
|
|
534
534
|
sizeY: kt,
|
|
535
535
|
offsetX: 0,
|
|
536
536
|
offsetY: 0
|
|
537
537
|
},
|
|
538
538
|
mb: {
|
|
539
|
-
render:
|
|
539
|
+
render: Te,
|
|
540
540
|
sizeX: Lt,
|
|
541
541
|
sizeY: kt,
|
|
542
542
|
offsetX: 0,
|
|
@@ -544,40 +544,40 @@ const os = {
|
|
|
544
544
|
},
|
|
545
545
|
// Специальный «rotate» контрол
|
|
546
546
|
mtr: {
|
|
547
|
-
render:
|
|
548
|
-
sizeX:
|
|
549
|
-
sizeY:
|
|
547
|
+
render: as,
|
|
548
|
+
sizeX: It,
|
|
549
|
+
sizeY: It,
|
|
550
550
|
offsetX: 0,
|
|
551
|
-
offsetY: -
|
|
551
|
+
offsetY: -It
|
|
552
552
|
}
|
|
553
553
|
};
|
|
554
|
-
class
|
|
554
|
+
class Q {
|
|
555
555
|
static wrapWidthControl(t) {
|
|
556
556
|
if (!(t != null && t.actionHandler)) return;
|
|
557
557
|
const e = t.actionHandler;
|
|
558
|
-
t.actionHandler = (s, n, o,
|
|
559
|
-
const
|
|
560
|
-
return !
|
|
558
|
+
t.actionHandler = (s, n, o, i) => {
|
|
559
|
+
const a = n == null ? void 0 : n.target;
|
|
560
|
+
return !a || a.locked || a.lockScalingX ? !1 : e(s, n, o, i);
|
|
561
561
|
};
|
|
562
562
|
}
|
|
563
563
|
static applyControlOverrides(t) {
|
|
564
|
-
Object.entries(
|
|
564
|
+
Object.entries(rs).forEach(([e, s]) => {
|
|
565
565
|
const n = t[e];
|
|
566
|
-
n && (Object.assign(n, s), e === "mtr" && (n.cursorStyle = "grab", n.mouseDownHandler = (o,
|
|
567
|
-
var
|
|
568
|
-
const c =
|
|
569
|
-
(
|
|
566
|
+
n && (Object.assign(n, s), e === "mtr" && (n.cursorStyle = "grab", n.mouseDownHandler = (o, i, a, r) => {
|
|
567
|
+
var l;
|
|
568
|
+
const c = i == null ? void 0 : i.target;
|
|
569
|
+
(l = c == null ? void 0 : c.canvas) == null || l.setCursor("grabbing");
|
|
570
570
|
}));
|
|
571
571
|
});
|
|
572
572
|
}
|
|
573
573
|
static apply() {
|
|
574
|
-
const t =
|
|
575
|
-
|
|
576
|
-
const e =
|
|
577
|
-
|
|
574
|
+
const t = we.createObjectDefaultControls();
|
|
575
|
+
Q.applyControlOverrides(t), Ee.ownDefaults.controls = t;
|
|
576
|
+
const e = we.createTextboxDefaultControls();
|
|
577
|
+
Q.applyControlOverrides(e), e.mt && (e.mt.visible = !1), e.mb && (e.mb.visible = !1), Q.wrapWidthControl(e.ml), Q.wrapWidthControl(e.mr), gt.ownDefaults.controls = e, Ee.ownDefaults.snapAngle = 1;
|
|
578
578
|
}
|
|
579
579
|
}
|
|
580
|
-
const
|
|
580
|
+
const I = class I {
|
|
581
581
|
constructor(t = []) {
|
|
582
582
|
this.fonts = t;
|
|
583
583
|
}
|
|
@@ -585,38 +585,38 @@ const A = class A {
|
|
|
585
585
|
this.fonts = t;
|
|
586
586
|
}
|
|
587
587
|
loadFonts() {
|
|
588
|
-
return
|
|
588
|
+
return E(this, null, function* () {
|
|
589
589
|
var n;
|
|
590
590
|
const t = (n = this.fonts) != null ? n : [];
|
|
591
591
|
if (!t.length) return;
|
|
592
592
|
const e = typeof document != "undefined" ? document : void 0;
|
|
593
593
|
if (!e) return;
|
|
594
|
-
const s = t.map((o) =>
|
|
594
|
+
const s = t.map((o) => I.loadFont(o, e));
|
|
595
595
|
yield Promise.allSettled(s);
|
|
596
596
|
});
|
|
597
597
|
}
|
|
598
598
|
static loadFont(t, e) {
|
|
599
|
-
return
|
|
600
|
-
var c,
|
|
601
|
-
const s = typeof FontFace != "undefined", n = (c = t.family) == null ? void 0 : c.trim(), o = (
|
|
599
|
+
return E(this, null, function* () {
|
|
600
|
+
var c, l;
|
|
601
|
+
const s = typeof FontFace != "undefined", n = (c = t.family) == null ? void 0 : c.trim(), o = (l = t.source) == null ? void 0 : l.trim();
|
|
602
602
|
if (!n || !o) return;
|
|
603
|
-
const
|
|
604
|
-
if (!
|
|
605
|
-
if (
|
|
606
|
-
|
|
603
|
+
const i = I.normalizeFontSource(o), a = I.getDescriptorSnapshot(t.descriptors), r = I.getFontRegistrationKey(n, i, a);
|
|
604
|
+
if (!I.registeredFontKeys.has(r)) {
|
|
605
|
+
if (I.isFontFaceAlreadyApplied(e, n, a)) {
|
|
606
|
+
I.registeredFontKeys.add(r);
|
|
607
607
|
return;
|
|
608
608
|
}
|
|
609
609
|
if (s && e.fonts && typeof e.fonts.add == "function")
|
|
610
610
|
try {
|
|
611
|
-
const u = yield new FontFace(n,
|
|
612
|
-
e.fonts.add(u),
|
|
611
|
+
const u = yield new FontFace(n, i, t.descriptors).load();
|
|
612
|
+
e.fonts.add(u), I.registeredFontKeys.add(r);
|
|
613
613
|
return;
|
|
614
|
-
} catch (
|
|
615
|
-
console.warn(`Не удалось загрузить шрифт "${n}" через FontFace API`,
|
|
614
|
+
} catch (d) {
|
|
615
|
+
console.warn(`Не удалось загрузить шрифт "${n}" через FontFace API`, d);
|
|
616
616
|
}
|
|
617
|
-
|
|
617
|
+
I.injectFontFace({
|
|
618
618
|
font: t,
|
|
619
|
-
source:
|
|
619
|
+
source: i,
|
|
620
620
|
doc: e,
|
|
621
621
|
registrationKey: r
|
|
622
622
|
});
|
|
@@ -629,20 +629,20 @@ const A = class A {
|
|
|
629
629
|
doc: s,
|
|
630
630
|
registrationKey: n
|
|
631
631
|
}) {
|
|
632
|
-
var
|
|
633
|
-
const { descriptors: o } = t,
|
|
634
|
-
if (!
|
|
635
|
-
const
|
|
636
|
-
|
|
637
|
-
const r =
|
|
632
|
+
var l;
|
|
633
|
+
const { descriptors: o } = t, i = (l = t.family) == null ? void 0 : l.trim();
|
|
634
|
+
if (!i) return;
|
|
635
|
+
const a = s.createElement("style");
|
|
636
|
+
a.setAttribute("data-editor-font", i), a.setAttribute("data-editor-font-key", n);
|
|
637
|
+
const r = I.descriptorsToCss(o), c = [
|
|
638
638
|
"@font-face {",
|
|
639
|
-
` font-family: ${
|
|
639
|
+
` font-family: ${I.formatFontFamilyForCss(i)};`,
|
|
640
640
|
` src: ${e};`,
|
|
641
|
-
...r.map((
|
|
641
|
+
...r.map((d) => ` ${d}`),
|
|
642
642
|
"}"
|
|
643
643
|
];
|
|
644
|
-
|
|
645
|
-
`), s.head.appendChild(
|
|
644
|
+
a.textContent = c.join(`
|
|
645
|
+
`), s.head.appendChild(a), I.registeredFontKeys.add(n);
|
|
646
646
|
}
|
|
647
647
|
static normalizeFontSource(t) {
|
|
648
648
|
const e = t.trim();
|
|
@@ -665,15 +665,15 @@ const A = class A {
|
|
|
665
665
|
return t ? t.trim().replace(/^['"]+|['"]+$/g, "").toLowerCase() : "";
|
|
666
666
|
}
|
|
667
667
|
static getDescriptorSnapshot(t) {
|
|
668
|
-
const e =
|
|
668
|
+
const e = I.descriptorDefaults;
|
|
669
669
|
return {
|
|
670
|
-
style:
|
|
671
|
-
weight:
|
|
672
|
-
stretch:
|
|
673
|
-
unicodeRange:
|
|
674
|
-
variant:
|
|
675
|
-
featureSettings:
|
|
676
|
-
display:
|
|
670
|
+
style: I.normalizeDescriptorValue(t == null ? void 0 : t.style, e.style),
|
|
671
|
+
weight: I.normalizeDescriptorValue(t == null ? void 0 : t.weight, e.weight),
|
|
672
|
+
stretch: I.normalizeDescriptorValue(t == null ? void 0 : t.stretch, e.stretch),
|
|
673
|
+
unicodeRange: I.normalizeDescriptorValue(t == null ? void 0 : t.unicodeRange, e.unicodeRange),
|
|
674
|
+
variant: I.normalizeDescriptorValue(t == null ? void 0 : t.variant, e.variant),
|
|
675
|
+
featureSettings: I.normalizeDescriptorValue(t == null ? void 0 : t.featureSettings, e.featureSettings),
|
|
676
|
+
display: I.normalizeDescriptorValue(t == null ? void 0 : t.display, e.display)
|
|
677
677
|
};
|
|
678
678
|
}
|
|
679
679
|
static areDescriptorSnapshotsEqual(t, e) {
|
|
@@ -681,7 +681,7 @@ const A = class A {
|
|
|
681
681
|
}
|
|
682
682
|
static getFontRegistrationKey(t, e, s) {
|
|
683
683
|
return [
|
|
684
|
-
|
|
684
|
+
I.normalizeFamilyName(t),
|
|
685
685
|
e,
|
|
686
686
|
s.style,
|
|
687
687
|
s.weight,
|
|
@@ -695,26 +695,26 @@ const A = class A {
|
|
|
695
695
|
static isFontFaceAlreadyApplied(t, e, s) {
|
|
696
696
|
const n = t.fonts;
|
|
697
697
|
if (!n || typeof n.forEach != "function") return !1;
|
|
698
|
-
const o =
|
|
699
|
-
let
|
|
698
|
+
const o = I.normalizeFamilyName(e);
|
|
699
|
+
let i = !1;
|
|
700
700
|
try {
|
|
701
|
-
n.forEach((
|
|
702
|
-
if (
|
|
703
|
-
const c =
|
|
704
|
-
style:
|
|
705
|
-
weight:
|
|
706
|
-
stretch:
|
|
707
|
-
unicodeRange:
|
|
708
|
-
variant:
|
|
709
|
-
featureSettings:
|
|
710
|
-
display:
|
|
701
|
+
n.forEach((a) => {
|
|
702
|
+
if (i || I.normalizeFamilyName(a.family) !== o) return;
|
|
703
|
+
const c = I.getDescriptorSnapshot({
|
|
704
|
+
style: a.style,
|
|
705
|
+
weight: a.weight,
|
|
706
|
+
stretch: a.stretch,
|
|
707
|
+
unicodeRange: a.unicodeRange,
|
|
708
|
+
variant: a.variant,
|
|
709
|
+
featureSettings: a.featureSettings,
|
|
710
|
+
display: a.display
|
|
711
711
|
});
|
|
712
|
-
|
|
712
|
+
I.areDescriptorSnapshotsEqual(s, c) && (i = !0);
|
|
713
713
|
});
|
|
714
|
-
} catch (
|
|
715
|
-
return console.warn("Не удалось проверить, загружен ли шрифт ранее через FontFaceSet",
|
|
714
|
+
} catch (a) {
|
|
715
|
+
return console.warn("Не удалось проверить, загружен ли шрифт ранее через FontFaceSet", a), !1;
|
|
716
716
|
}
|
|
717
|
-
return
|
|
717
|
+
return i;
|
|
718
718
|
}
|
|
719
719
|
static descriptorsToCss(t) {
|
|
720
720
|
if (!t) return [];
|
|
@@ -731,12 +731,12 @@ const A = class A {
|
|
|
731
731
|
lineGapOverride: "line-gap-override"
|
|
732
732
|
};
|
|
733
733
|
return Object.entries(t).filter(([, s]) => s != null && `${s}`.length > 0).map(([s, n]) => {
|
|
734
|
-
var
|
|
735
|
-
return `${(
|
|
734
|
+
var i;
|
|
735
|
+
return `${(i = e[s]) != null ? i : s}: ${n};`;
|
|
736
736
|
});
|
|
737
737
|
}
|
|
738
738
|
};
|
|
739
|
-
|
|
739
|
+
I.registeredFontKeys = /* @__PURE__ */ new Set(), I.descriptorDefaults = {
|
|
740
740
|
style: "normal",
|
|
741
741
|
weight: "normal",
|
|
742
742
|
stretch: "normal",
|
|
@@ -745,8 +745,8 @@ A.registeredFontKeys = /* @__PURE__ */ new Set(), A.descriptorDefaults = {
|
|
|
745
745
|
featureSettings: "normal",
|
|
746
746
|
display: "auto"
|
|
747
747
|
};
|
|
748
|
-
let xt =
|
|
749
|
-
const
|
|
748
|
+
let xt = I;
|
|
749
|
+
const cs = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNi44NzUgMi41YS42MjUuNjI1IDAgMCAwLS42MjUuNjI0VjYuMjVIMy4xMjVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2MTBjMCAuMzQ1LjI4LjYyNS42MjUuNjI1aDEwYy4zNDUgMCAuNjI1LS4yOC42MjUtLjYyNXYtMy4xMjZoMy4xMjVjLjM0NSAwIC42MjUtLjI4LjYyNS0uNjI1di0xMGEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTEwWm02Ljg3NSAxMGgyLjVWMy43NUg3LjV2Mi41aDUuNjI1Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NS42MjRabS0xMCAzLjc1VjcuNWg4Ljc1djguNzVIMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", ls = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi41IDcuNWMwLS42OS41Ni0xLjI1IDEuMjUtMS4yNWgxMi41Yy42OSAwIDEuMjUuNTYgMS4yNSAxLjI1djguNzVjMCAuNjktLjU2IDEuMjUtMS4yNSAxLjI1SDMuNzVjLS42OSAwLTEuMjUtLjU2LTEuMjUtMS4yNVY3LjVabTEzLjc1IDBIMy43NXY4Ljc1aDEyLjVWNy41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMS44NzVhMi4xODggMi4xODggMCAwIDAtMi4xODggMi4xODh2Mi44MTJhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyYTMuNDM3IDMuNDM3IDAgMSAxIDYuODc1IDB2Mi44MTNhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyQTIuMTg4IDIuMTg4IDAgMCAwIDEwIDEuODc2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEwIDEyLjgxM2EuOTM3LjkzNyAwIDEgMCAwLTEuODc1LjkzNy45MzcgMCAwIDAgMCAxLjg3NFoiLz48L3N2Zz4=", ds = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE2LjI1IDYuMjVINy41VjQuMzc1YTIuNSAyLjUgMCAwIDEgMi41LTIuNWMxLjIgMCAyLjI4MS44NiAyLjUxMiAyYS42MjUuNjI1IDAgMCAwIDEuMjI2LS4yNWMtLjM1NC0xLjczOC0xLjkyNS0zLTMuNzM4LTNhMy43NTQgMy43NTQgMCAwIDAtMy43NSAzLjc1VjYuMjVoLTIuNUExLjI1IDEuMjUgMCAwIDAgMi41IDcuNXY4Ljc1YTEuMjUgMS4yNSAwIDAgMCAxLjI1IDEuMjVoMTIuNWExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjcuNWExLjI1IDEuMjUgMCAwIDAtMS4yNS0xLjI1Wm0wIDEwSDMuNzVWNy41aDEyLjV2OC43NVptLTUuMzEzLTQuMzc1YS45MzcuOTM3IDAgMSAxLTEuODc0IDAgLjkzNy45MzcgMCAwIDEgMS44NzQgMFoiLz48L3N2Zz4K", hs = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIuNSA4LjEyNSAxMCAxMi41bDcuNS00LjM3NUwxMCAzLjc1IDIuNSA4LjEyNVoiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjY4NSAzLjIxYS42MjUuNjI1IDAgMCAxIC42MyAwbDcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOGw3LjUtNC4zNzVaTTMuNzQgOC4xMjUgMTAgMTEuNzc2bDYuMjYtMy42NTFMMTAgNC40NzQgMy43NCA4LjEyNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA5LjQ2YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDExLjc3NmwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA5LjQ2Wm0tMS42NiAyLjQxNUwxMCAxNS41MjZsNi4yNi0zLjY1MS0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNi0xLjk3NSAxLjE1MVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", us = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMy4yMWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDguMTI1IDEwIDExLjc3Nmw2LjI2LTMuNjUxTDEwIDQuNDc0IDMuNzQgOC4xMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjcxNCAxMCAxMCAxMi41bDQuMjg2LTIuNSAzLjIxNCAxLjg3NUwxMCAxNi4yNWwtNy41LTQuMzc1TDUuNzE0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDkuNDZhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgMTEuNzc2bDMuOTctMi4zMTZhLjYyNS42MjUgMCAwIDEgLjYzIDBsMy4yMTUgMS44NzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhMNS40IDkuNDZabS0xLjY2IDIuNDE1TDEwIDE1LjUyNmw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2LTEuOTc1IDEuMTUxWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", gs = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTIuNSA2LjI1IDcuNSA0LjM3NSA3LjUtNC4zNzVMMTAgMS44NzUgMi41IDYuMjVaIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMS4zMzVhLjYyNS42MjUgMCAwIDEgLjYzIDBsNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4bDcuNS00LjM3NVpNMy43NCA2LjI1IDEwIDkuOTAxbDYuMjYtMy42NTFMMTAgMi41OTkgMy43NCA2LjI1WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDExLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCAxMy42NTFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgMTEuMzM1Wk0zLjc0IDEzLjc1IDEwIDE3LjQwMWw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTMuNzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgNy41ODVhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgOS45MDFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgNy41ODVaTTMuNzQgMTAgMTAgMTMuNjUxIDE2LjI2IDEwbC0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNkwzLjc0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", fs = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMS45NiAxMy40MzVhLjYyNS42MjUgMCAwIDEgLjg1NS0uMjI1TDEwIDE3LjQwMWw3LjE4NS00LjE5YS42MjUuNjI1IDAgMCAxIC42MyAxLjA3OWwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEtLjIyNS0uODU1Wk05LjY4NSAxLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDYuMjUgMTAgOS45MDFsNi4yNi0zLjY1MUwxMCAyLjU5OSAzLjc0IDYuMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im01LjcxNCAxMS44NzUgNC4yODYgMi41IDQuMjg2LTIuNUwxNy41IDEzLjc1IDEwIDE4LjEyNSAyLjUgMTMuNzVsMy4yMTQtMS44NzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgMTEuMzM1YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDEzLjY1MWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCAxMS4zMzVaTTMuNzQgMTMuNzUgMTAgMTcuNDAxbDYuMjYtMy42NTEtMS45NzQtMS4xNTEtMy45NzEgMi4zMTZhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTMuOTctMi4zMTZMMy43NCAxMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA3LjU4NWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCA5LjkwMWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA3LjU4NVpNMy43NCAxMCAxMCAxMy42NTEgMTYuMjYgMTBsLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTBaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=", ms = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI0VDNEU0MCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOC4xMjUgMS4yNUExLjg3NSAxLjg3NSAwIDAgMCA2LjI1IDMuMTI1di42MjVIMy4xMjVhLjYyNS42MjUgMCAwIDAgMCAxLjI1aC42MjV2MTEuMjVBMS4yNSAxLjI1IDAgMCAwIDUgMTcuNWgxMGExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjVoLjYyNWEuNjI1LjYyNSAwIDAgMCAwLTEuMjVIMTMuNzV2LS42MjVhMS44NzUgMS44NzUgMCAwIDAtMS44NzUtMS44NzVoLTMuNzVabTQuMzc1IDIuNXYtLjYyNWEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2LjYyNWg1Wk01IDE2LjI1VjVoMTB2MTEuMjVINVpNOC4xMjUgNy41Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NWEuNjI1LjYyNSAwIDEgMS0xLjI1IDB2LTVjMC0uMzQ1LjI4LS42MjUuNjI1LS42MjVabTQuMzc1IDUuNjI1di01YS42MjUuNjI1IDAgMCAwLTEuMjUgMHY1YS42MjUuNjI1IDAgMSAwIDEuMjUgMFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", ut = {
|
|
750
750
|
style: {
|
|
751
751
|
position: "absolute",
|
|
752
752
|
display: "none",
|
|
@@ -813,17 +813,17 @@ const as = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMj
|
|
|
813
813
|
],
|
|
814
814
|
offsetTop: 50,
|
|
815
815
|
icons: {
|
|
816
|
-
copyPaste:
|
|
817
|
-
delete:
|
|
818
|
-
lock:
|
|
819
|
-
unlock:
|
|
820
|
-
bringToFront:
|
|
821
|
-
sendToBack:
|
|
822
|
-
bringForward:
|
|
823
|
-
sendBackwards:
|
|
816
|
+
copyPaste: cs,
|
|
817
|
+
delete: ms,
|
|
818
|
+
lock: ls,
|
|
819
|
+
unlock: ds,
|
|
820
|
+
bringToFront: gs,
|
|
821
|
+
sendToBack: fs,
|
|
822
|
+
bringForward: hs,
|
|
823
|
+
sendBackwards: us
|
|
824
824
|
},
|
|
825
825
|
handlers: {
|
|
826
|
-
copyPaste: (h) =>
|
|
826
|
+
copyPaste: (h) => E(null, null, function* () {
|
|
827
827
|
h.clipboardManager.copyPaste();
|
|
828
828
|
}),
|
|
829
829
|
delete: (h) => {
|
|
@@ -849,18 +849,18 @@ const as = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMj
|
|
|
849
849
|
}
|
|
850
850
|
}
|
|
851
851
|
};
|
|
852
|
-
class
|
|
852
|
+
class ps {
|
|
853
853
|
constructor({ editor: t }) {
|
|
854
854
|
this.currentTarget = null, this.currentLocked = !1, this.isTransforming = !1, this.editor = t, this.canvas = t.canvas, this.options = t.options, this._initToolbar();
|
|
855
855
|
}
|
|
856
856
|
_initToolbar() {
|
|
857
857
|
if (!this.options.showToolbar) return;
|
|
858
858
|
const t = this.options.toolbar || {};
|
|
859
|
-
this.config =
|
|
860
|
-
style:
|
|
861
|
-
btnStyle:
|
|
862
|
-
icons:
|
|
863
|
-
handlers:
|
|
859
|
+
this.config = Ce(T(T({}, ut), t), {
|
|
860
|
+
style: T(T({}, ut.style), t.style || {}),
|
|
861
|
+
btnStyle: T(T({}, ut.btnStyle), t.btnStyle || {}),
|
|
862
|
+
icons: T(T({}, ut.icons), t.icons || {}),
|
|
863
|
+
handlers: T(T({}, ut.handlers), t.handlers || {})
|
|
864
864
|
}), 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 = () => {
|
|
865
865
|
this.el.style.display = "none";
|
|
866
866
|
}, this._createDOM(), this._bindEvents();
|
|
@@ -887,10 +887,10 @@ class gs {
|
|
|
887
887
|
_renderButtons(t) {
|
|
888
888
|
this.el.innerHTML = "";
|
|
889
889
|
for (const e of t) {
|
|
890
|
-
const { name: s, handle: n } = e, { icons: o = {}, btnStyle:
|
|
891
|
-
r.innerHTML = o[n] ? `<img src="${o[n]}" title="${s}" />` : s, Object.assign(r.style,
|
|
890
|
+
const { name: s, handle: n } = e, { icons: o = {}, btnStyle: i, handlers: a = {} } = this.config, r = document.createElement("button");
|
|
891
|
+
r.innerHTML = o[n] ? `<img src="${o[n]}" title="${s}" />` : s, Object.assign(r.style, i), r.onclick = () => {
|
|
892
892
|
var c;
|
|
893
|
-
return (c =
|
|
893
|
+
return (c = a[n]) == null ? void 0 : c.call(a, this.editor);
|
|
894
894
|
}, r.onmousedown = (c) => {
|
|
895
895
|
c.stopPropagation(), c.preventDefault();
|
|
896
896
|
}, r.ondragstart = (c) => c.preventDefault(), this.el.appendChild(r);
|
|
@@ -951,7 +951,7 @@ class gs {
|
|
|
951
951
|
}
|
|
952
952
|
const { el: e, config: s, canvas: n } = this;
|
|
953
953
|
t.setCoords();
|
|
954
|
-
const o = n.getZoom(), [, , , ,
|
|
954
|
+
const o = n.getZoom(), [, , , , i, a] = n.viewportTransform, { x: r } = t.getCenterPoint(), { top: c, height: l } = t.getBoundingRect(), u = r * o + i - e.offsetWidth / 2, g = s.offsetTop || 0, f = (c + l) * o + a + g;
|
|
955
955
|
Object.assign(e.style, {
|
|
956
956
|
left: `${u}px`,
|
|
957
957
|
top: `${f}px`,
|
|
@@ -965,7 +965,7 @@ class gs {
|
|
|
965
965
|
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();
|
|
966
966
|
}
|
|
967
967
|
}
|
|
968
|
-
const
|
|
968
|
+
const ys = {
|
|
969
969
|
position: "absolute",
|
|
970
970
|
display: "none",
|
|
971
971
|
background: "#2B2D33",
|
|
@@ -979,7 +979,7 @@ const fs = {
|
|
|
979
979
|
"pointer-events": "none",
|
|
980
980
|
"white-space": "nowrap",
|
|
981
981
|
"box-shadow": "0 2px 8px rgba(0, 0, 0, 0.2)"
|
|
982
|
-
},
|
|
982
|
+
}, Ne = 16, Le = 16, Ms = "fabric-editor-angle-indicator";
|
|
983
983
|
class Ut {
|
|
984
984
|
constructor({ editor: t }) {
|
|
985
985
|
this.isActive = !1, this.currentAngle = 0, this.editor = t, this.canvas = t.canvas, this.options = t.options, this._createDOM(), this._bindEvents();
|
|
@@ -988,7 +988,7 @@ class Ut {
|
|
|
988
988
|
* Создание DOM-элемента индикатора
|
|
989
989
|
*/
|
|
990
990
|
_createDOM() {
|
|
991
|
-
this.el = document.createElement("div"), this.el.className =
|
|
991
|
+
this.el = document.createElement("div"), this.el.className = Ms, Object.entries(ys).forEach(([t, e]) => {
|
|
992
992
|
this.el.style.setProperty(t, e);
|
|
993
993
|
}), this.canvas.wrapperEl.appendChild(this.el);
|
|
994
994
|
}
|
|
@@ -1039,9 +1039,9 @@ class Ut {
|
|
|
1039
1039
|
*/
|
|
1040
1040
|
_positionIndicator(t) {
|
|
1041
1041
|
const e = this.canvas.wrapperEl.getBoundingClientRect();
|
|
1042
|
-
let s = t.clientX - e.left +
|
|
1043
|
-
const o = this.el.getBoundingClientRect(),
|
|
1044
|
-
s +
|
|
1042
|
+
let s = t.clientX - e.left + Ne, n = t.clientY - e.top + Le;
|
|
1043
|
+
const o = this.el.getBoundingClientRect(), i = o.width, a = o.height;
|
|
1044
|
+
s + i > e.width && (s = t.clientX - e.left - i - Ne), n + a > e.height && (n = t.clientY - e.top - a - Le), this.el.style.left = `${s}px`, this.el.style.top = `${n}px`;
|
|
1045
1045
|
}
|
|
1046
1046
|
/**
|
|
1047
1047
|
* Показать индикатор
|
|
@@ -1072,7 +1072,7 @@ class Ut {
|
|
|
1072
1072
|
this.canvas && (this.canvas.off("object:rotating", this._onObjectRotating), this.canvas.off("mouse:up", this._onMouseUp), this.canvas.off("object:modified", this._onObjectModified), this.canvas.off("selection:cleared", this._onSelectionCleared)), (t = this.el) != null && t.parentNode && this.el.parentNode.removeChild(this.el), this.el = null, this.editor = null, this.canvas = null, this.options = null;
|
|
1073
1073
|
}
|
|
1074
1074
|
}
|
|
1075
|
-
const
|
|
1075
|
+
const bs = [
|
|
1076
1076
|
"selectable",
|
|
1077
1077
|
"evented",
|
|
1078
1078
|
"id",
|
|
@@ -1090,8 +1090,13 @@ const ps = [
|
|
|
1090
1090
|
"lockScalingY",
|
|
1091
1091
|
"lockSkewingX",
|
|
1092
1092
|
"lockSkewingY",
|
|
1093
|
+
"styles",
|
|
1093
1094
|
"textCaseRaw",
|
|
1094
|
-
"uppercase"
|
|
1095
|
+
"uppercase",
|
|
1096
|
+
"linethrough",
|
|
1097
|
+
"underline",
|
|
1098
|
+
"fontStyle",
|
|
1099
|
+
"fontWeight"
|
|
1095
1100
|
];
|
|
1096
1101
|
class St {
|
|
1097
1102
|
constructor({ editor: t }) {
|
|
@@ -1105,9 +1110,9 @@ class St {
|
|
|
1105
1110
|
return this.patches[this.currentIndex - 1] || null;
|
|
1106
1111
|
}
|
|
1107
1112
|
_createDiffPatcher() {
|
|
1108
|
-
this.diffPatcher =
|
|
1113
|
+
this.diffPatcher = Ke({
|
|
1109
1114
|
objectHash(t) {
|
|
1110
|
-
const e = t, s = t;
|
|
1115
|
+
const e = t, s = t, n = s.styles ? JSON.stringify(s.styles) : "";
|
|
1111
1116
|
return [
|
|
1112
1117
|
e.id,
|
|
1113
1118
|
e.backgroundId,
|
|
@@ -1127,13 +1132,17 @@ class St {
|
|
|
1127
1132
|
s.text,
|
|
1128
1133
|
s.textCaseRaw,
|
|
1129
1134
|
s.uppercase,
|
|
1130
|
-
s.
|
|
1135
|
+
s.fontFamily,
|
|
1136
|
+
s.fontSize,
|
|
1137
|
+
s.fontWeight,
|
|
1131
1138
|
s.fontStyle,
|
|
1139
|
+
s.underline,
|
|
1132
1140
|
s.linethrough,
|
|
1133
1141
|
s.textAlign,
|
|
1134
1142
|
s.fill,
|
|
1135
1143
|
s.stroke,
|
|
1136
|
-
s.strokeWidth
|
|
1144
|
+
s.strokeWidth,
|
|
1145
|
+
n
|
|
1137
1146
|
].join("-");
|
|
1138
1147
|
},
|
|
1139
1148
|
arrays: {
|
|
@@ -1141,7 +1150,7 @@ class St {
|
|
|
1141
1150
|
includeValueOnMove: !1
|
|
1142
1151
|
},
|
|
1143
1152
|
textDiff: {
|
|
1144
|
-
diffMatchPatch:
|
|
1153
|
+
diffMatchPatch: $e,
|
|
1145
1154
|
minLength: 60
|
|
1146
1155
|
}
|
|
1147
1156
|
});
|
|
@@ -1182,7 +1191,9 @@ class St {
|
|
|
1182
1191
|
saveState() {
|
|
1183
1192
|
if (console.log("saveState"), this.skipHistory) return;
|
|
1184
1193
|
console.time("saveState");
|
|
1185
|
-
const t = this.
|
|
1194
|
+
const t = this._withTemporaryUnlock(
|
|
1195
|
+
() => this.canvas.toDatalessObject([...bs])
|
|
1196
|
+
);
|
|
1186
1197
|
if (console.timeEnd("saveState"), !this.baseState) {
|
|
1187
1198
|
this.baseState = t, this.patches = [], this.currentIndex = 0, console.log("Базовое состояние сохранено.");
|
|
1188
1199
|
return;
|
|
@@ -1225,19 +1236,19 @@ class St {
|
|
|
1225
1236
|
* @fires editor:history-state-loaded
|
|
1226
1237
|
*/
|
|
1227
1238
|
loadStateFromFullState(t) {
|
|
1228
|
-
return
|
|
1239
|
+
return E(this, null, function* () {
|
|
1229
1240
|
if (!t) return;
|
|
1230
1241
|
console.log("loadStateFromFullState fullState", t);
|
|
1231
|
-
const { canvas: e, canvasManager: s, interactionBlocker: n, backgroundManager: o } = this.editor, { width:
|
|
1232
|
-
n.overlayMask = null, St._serializeCustomData(t), yield e.loadFromJSON(t, (
|
|
1233
|
-
St._deserializeCustomData(
|
|
1242
|
+
const { canvas: e, canvasManager: s, interactionBlocker: n, backgroundManager: o } = this.editor, { width: i, height: a } = e;
|
|
1243
|
+
n.overlayMask = null, St._serializeCustomData(t), yield e.loadFromJSON(t, (d, u) => {
|
|
1244
|
+
St._deserializeCustomData(d, u);
|
|
1234
1245
|
});
|
|
1235
|
-
const r = e.getObjects().find((
|
|
1236
|
-
r && (this.editor.montageArea = r, (
|
|
1237
|
-
const c = e.getObjects().find((
|
|
1246
|
+
const r = e.getObjects().find((d) => d.id === "montage-area");
|
|
1247
|
+
r && (this.editor.montageArea = r, (i !== e.getWidth() || a !== e.getHeight()) && s.updateCanvas());
|
|
1248
|
+
const c = e.getObjects().find((d) => d.id === "overlay-mask");
|
|
1238
1249
|
c && (n.overlayMask = c, n.overlayMask.visible = !1);
|
|
1239
|
-
const
|
|
1240
|
-
|
|
1250
|
+
const l = e.getObjects().find((d) => d.id === "background");
|
|
1251
|
+
l ? (o.backgroundObject = l, o.refresh()) : o.removeBackground({ withoutSave: !0 }), e.renderAll(), e.fire("editor:history-state-loaded", {
|
|
1241
1252
|
fullState: t,
|
|
1242
1253
|
currentIndex: this.currentIndex,
|
|
1243
1254
|
totalChangesCount: this.totalChangesCount,
|
|
@@ -1252,7 +1263,7 @@ class St {
|
|
|
1252
1263
|
* @fires editor:undo
|
|
1253
1264
|
*/
|
|
1254
1265
|
undo() {
|
|
1255
|
-
return
|
|
1266
|
+
return E(this, null, function* () {
|
|
1256
1267
|
if (!this.skipHistory) {
|
|
1257
1268
|
if (this.currentIndex <= 0) {
|
|
1258
1269
|
console.log("Нет предыдущих состояний для отмены.");
|
|
@@ -1289,7 +1300,7 @@ class St {
|
|
|
1289
1300
|
* @fires editor:redo
|
|
1290
1301
|
*/
|
|
1291
1302
|
redo() {
|
|
1292
|
-
return
|
|
1303
|
+
return E(this, null, function* () {
|
|
1293
1304
|
if (!this.skipHistory) {
|
|
1294
1305
|
if (this.currentIndex >= this.patches.length) {
|
|
1295
1306
|
console.log("Нет состояний для повтора.");
|
|
@@ -1321,9 +1332,31 @@ class St {
|
|
|
1321
1332
|
}
|
|
1322
1333
|
});
|
|
1323
1334
|
}
|
|
1335
|
+
_withTemporaryUnlock(t) {
|
|
1336
|
+
var n, o, i;
|
|
1337
|
+
const e = [];
|
|
1338
|
+
((i = (o = (n = this.canvas).getObjects) == null ? void 0 : o.call(n)) != null ? i : []).forEach((a) => {
|
|
1339
|
+
const r = typeof a.type == "string" ? a.type.toLowerCase() : "";
|
|
1340
|
+
if (!(r === "textbox" || r === "i-text" || typeof a.isEditing == "boolean") || a.locked) return;
|
|
1341
|
+
const l = !!a.lockMovementX, d = !!a.lockMovementY;
|
|
1342
|
+
!l && !d || (e.push({
|
|
1343
|
+
object: a,
|
|
1344
|
+
lockMovementX: a.lockMovementX,
|
|
1345
|
+
lockMovementY: a.lockMovementY,
|
|
1346
|
+
selectable: a.selectable
|
|
1347
|
+
}), a.lockMovementX = !1, a.lockMovementY = !1, a.selectable = !0);
|
|
1348
|
+
});
|
|
1349
|
+
try {
|
|
1350
|
+
return t();
|
|
1351
|
+
} finally {
|
|
1352
|
+
e.forEach(({ object: a, lockMovementX: r, lockMovementY: c, selectable: l }) => {
|
|
1353
|
+
a.lockMovementX = r, a.lockMovementY = c, a.selectable = l;
|
|
1354
|
+
});
|
|
1355
|
+
}
|
|
1356
|
+
}
|
|
1324
1357
|
}
|
|
1325
|
-
const
|
|
1326
|
-
class
|
|
1358
|
+
const vs = 0.1, js = 2, ke = 0.1, As = 90, q = 16, tt = 16, V = 4096, G = 4096, xe = "application/image-editor:", jt = ["format", "uppercase", "textCaseRaw"], Is = 50;
|
|
1359
|
+
class P {
|
|
1327
1360
|
constructor({ editor: t }) {
|
|
1328
1361
|
this.editor = t, this.options = t.options, this._createdBlobUrls = [], this.acceptContentTypes = this.editor.options.acceptContentTypes, this.acceptFormats = this.getAllowedFormatsFromContentTypes();
|
|
1329
1362
|
}
|
|
@@ -1340,17 +1373,17 @@ class H {
|
|
|
1340
1373
|
* @returns возвращает Promise с объектом изображения или null в случае ошибки
|
|
1341
1374
|
*/
|
|
1342
1375
|
importImage(t) {
|
|
1343
|
-
return
|
|
1376
|
+
return E(this, null, function* () {
|
|
1344
1377
|
const {
|
|
1345
1378
|
source: e,
|
|
1346
1379
|
scale: s = `image-${this.options.scaleType}`,
|
|
1347
1380
|
withoutSave: n = !1,
|
|
1348
1381
|
fromClipboard: o = !1,
|
|
1349
|
-
isBackground:
|
|
1350
|
-
withoutSelection:
|
|
1382
|
+
isBackground: i = !1,
|
|
1383
|
+
withoutSelection: a = !1
|
|
1351
1384
|
} = t;
|
|
1352
1385
|
if (!e) return null;
|
|
1353
|
-
const { canvas: r, montageArea: c, transformManager:
|
|
1386
|
+
const { canvas: r, montageArea: c, transformManager: l, historyManager: d, errorManager: u } = this.editor, g = yield this.getContentType(e), f = P.getFormatFromContentType(g), { acceptContentTypes: m, acceptFormats: v } = this;
|
|
1354
1387
|
if (!this.isAllowedContentType(g)) {
|
|
1355
1388
|
const p = `Неверный contentType для изображения: ${g}. Ожидается один из: ${this.acceptContentTypes.join(", ")}.`;
|
|
1356
1389
|
return u.emitError({
|
|
@@ -1363,21 +1396,21 @@ class H {
|
|
|
1363
1396
|
format: f,
|
|
1364
1397
|
contentType: g,
|
|
1365
1398
|
acceptContentTypes: m,
|
|
1366
|
-
acceptFormats:
|
|
1399
|
+
acceptFormats: v,
|
|
1367
1400
|
fromClipboard: o,
|
|
1368
|
-
isBackground:
|
|
1369
|
-
withoutSelection:
|
|
1401
|
+
isBackground: i,
|
|
1402
|
+
withoutSelection: a
|
|
1370
1403
|
}
|
|
1371
1404
|
}), null;
|
|
1372
1405
|
}
|
|
1373
|
-
|
|
1406
|
+
d.suspendHistory();
|
|
1374
1407
|
try {
|
|
1375
|
-
let p,
|
|
1408
|
+
let p, y;
|
|
1376
1409
|
if (e instanceof File)
|
|
1377
1410
|
p = URL.createObjectURL(e);
|
|
1378
1411
|
else if (typeof e == "string") {
|
|
1379
|
-
const
|
|
1380
|
-
p = URL.createObjectURL(
|
|
1412
|
+
const M = yield (yield fetch(e, { mode: "cors" })).blob();
|
|
1413
|
+
p = URL.createObjectURL(M);
|
|
1381
1414
|
} else
|
|
1382
1415
|
return u.emitError({
|
|
1383
1416
|
origin: "ImageManager",
|
|
@@ -1389,46 +1422,46 @@ class H {
|
|
|
1389
1422
|
format: f,
|
|
1390
1423
|
contentType: g,
|
|
1391
1424
|
acceptContentTypes: m,
|
|
1392
|
-
acceptFormats:
|
|
1425
|
+
acceptFormats: v,
|
|
1393
1426
|
fromClipboard: o,
|
|
1394
|
-
isBackground:
|
|
1395
|
-
withoutSelection:
|
|
1427
|
+
isBackground: i,
|
|
1428
|
+
withoutSelection: a
|
|
1396
1429
|
}
|
|
1397
1430
|
}), null;
|
|
1398
1431
|
if (this._createdBlobUrls.push(p), f === "svg") {
|
|
1399
|
-
const b = yield
|
|
1400
|
-
|
|
1432
|
+
const b = yield We(p);
|
|
1433
|
+
y = mt.groupSVGElements(b.objects, b.options);
|
|
1401
1434
|
} else
|
|
1402
|
-
|
|
1403
|
-
const { width:
|
|
1404
|
-
if (
|
|
1405
|
-
const b =
|
|
1406
|
-
let
|
|
1407
|
-
if (b instanceof HTMLImageElement ?
|
|
1408
|
-
const S = yield this.resizeImageToBoundaries(
|
|
1409
|
-
this._createdBlobUrls.push(
|
|
1410
|
-
} else if (L <
|
|
1411
|
-
const S = yield this.resizeImageToBoundaries(
|
|
1412
|
-
this._createdBlobUrls.push(
|
|
1435
|
+
y = yield ht.fromURL(p, { crossOrigin: "anonymous" });
|
|
1436
|
+
const { width: O, height: L } = y;
|
|
1437
|
+
if (y instanceof ht) {
|
|
1438
|
+
const b = y.getElement();
|
|
1439
|
+
let M = "";
|
|
1440
|
+
if (b instanceof HTMLImageElement ? M = b.src : b instanceof HTMLCanvasElement && (M = b.toDataURL()), L > G || O > V) {
|
|
1441
|
+
const S = yield this.resizeImageToBoundaries(M, "max"), j = URL.createObjectURL(S);
|
|
1442
|
+
this._createdBlobUrls.push(j), y = yield ht.fromURL(j, { crossOrigin: "anonymous" });
|
|
1443
|
+
} else if (L < tt || O < q) {
|
|
1444
|
+
const S = yield this.resizeImageToBoundaries(M, "min"), j = URL.createObjectURL(S);
|
|
1445
|
+
this._createdBlobUrls.push(j), y = yield ht.fromURL(j, { crossOrigin: "anonymous" });
|
|
1413
1446
|
}
|
|
1414
1447
|
}
|
|
1415
|
-
if (
|
|
1416
|
-
this.editor.canvasManager.scaleMontageAreaToImage({ object:
|
|
1448
|
+
if (y.set("id", `${y.type}-${x()}`), y.set("format", f), s === "scale-montage")
|
|
1449
|
+
this.editor.canvasManager.scaleMontageAreaToImage({ object: y, withoutSave: !0 });
|
|
1417
1450
|
else {
|
|
1418
|
-
const { width: b, height:
|
|
1419
|
-
s === "image-contain" && S < 1 ?
|
|
1451
|
+
const { width: b, height: M } = c, S = this.calculateScaleFactor({ imageObject: y, scaleType: s });
|
|
1452
|
+
s === "image-contain" && S < 1 ? l.fitObject({ object: y, type: "contain", withoutSave: !0 }) : s === "image-cover" && (O > b || L > M) && l.fitObject({ object: y, type: "cover", withoutSave: !0 });
|
|
1420
1453
|
}
|
|
1421
|
-
r.add(
|
|
1454
|
+
r.add(y), r.centerObject(y), a || r.setActiveObject(y), r.renderAll(), d.resumeHistory(), n || d.saveState();
|
|
1422
1455
|
const k = {
|
|
1423
|
-
image:
|
|
1456
|
+
image: y,
|
|
1424
1457
|
format: f,
|
|
1425
1458
|
contentType: g,
|
|
1426
1459
|
scale: s,
|
|
1427
1460
|
withoutSave: n,
|
|
1428
1461
|
source: e,
|
|
1429
1462
|
fromClipboard: o,
|
|
1430
|
-
isBackground:
|
|
1431
|
-
withoutSelection:
|
|
1463
|
+
isBackground: i,
|
|
1464
|
+
withoutSelection: a
|
|
1432
1465
|
};
|
|
1433
1466
|
return r.fire("editor:image-imported", k), k;
|
|
1434
1467
|
} catch (p) {
|
|
@@ -1444,10 +1477,10 @@ class H {
|
|
|
1444
1477
|
scale: s,
|
|
1445
1478
|
withoutSave: n,
|
|
1446
1479
|
fromClipboard: o,
|
|
1447
|
-
isBackground:
|
|
1448
|
-
withoutSelection:
|
|
1480
|
+
isBackground: i,
|
|
1481
|
+
withoutSelection: a
|
|
1449
1482
|
}
|
|
1450
|
-
}),
|
|
1483
|
+
}), d.resumeHistory(), null;
|
|
1451
1484
|
}
|
|
1452
1485
|
});
|
|
1453
1486
|
}
|
|
@@ -1460,16 +1493,16 @@ class H {
|
|
|
1460
1493
|
* @returns возвращает Promise с Blob-объектом уменьшенного изображения
|
|
1461
1494
|
*/
|
|
1462
1495
|
resizeImageToBoundaries(t, e = "max") {
|
|
1463
|
-
return
|
|
1496
|
+
return E(this, null, function* () {
|
|
1464
1497
|
let s = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${V}x${G}`;
|
|
1465
|
-
e === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${
|
|
1498
|
+
e === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${q}x${tt}`);
|
|
1466
1499
|
const n = {
|
|
1467
1500
|
dataURL: t,
|
|
1468
1501
|
sizeType: e,
|
|
1469
1502
|
maxWidth: V,
|
|
1470
1503
|
maxHeight: G,
|
|
1471
|
-
minWidth:
|
|
1472
|
-
minHeight:
|
|
1504
|
+
minWidth: q,
|
|
1505
|
+
minHeight: tt
|
|
1473
1506
|
};
|
|
1474
1507
|
return this.editor.errorManager.emitWarning({
|
|
1475
1508
|
origin: "ImageManager",
|
|
@@ -1492,30 +1525,30 @@ class H {
|
|
|
1492
1525
|
* @fires editor:canvas-exported
|
|
1493
1526
|
*/
|
|
1494
1527
|
exportCanvasAsImageFile() {
|
|
1495
|
-
return
|
|
1528
|
+
return E(this, arguments, function* (t = {}) {
|
|
1496
1529
|
const {
|
|
1497
1530
|
fileName: e = "image.png",
|
|
1498
1531
|
contentType: s = "image/png",
|
|
1499
1532
|
exportAsBase64: n = !1,
|
|
1500
1533
|
exportAsBlob: o = !1
|
|
1501
|
-
} = t, { canvas:
|
|
1534
|
+
} = t, { canvas: i, montageArea: a, workerManager: r, interactionBlocker: c } = this.editor;
|
|
1502
1535
|
try {
|
|
1503
|
-
const
|
|
1504
|
-
|
|
1505
|
-
const { left: g, top: f, width: m, height:
|
|
1506
|
-
p.enableRetinaScaling = !1, ["image/jpg", "image/jpeg"].includes(
|
|
1507
|
-
const
|
|
1508
|
-
if (
|
|
1509
|
-
const
|
|
1510
|
-
|
|
1536
|
+
const l = s === "application/pdf", d = l ? "image/jpg" : s, u = P.getFormatFromContentType(d);
|
|
1537
|
+
a.setCoords();
|
|
1538
|
+
const { left: g, top: f, width: m, height: v } = a.getBoundingRect(), p = yield i.clone(["id", "format", "locked"]);
|
|
1539
|
+
p.enableRetinaScaling = !1, ["image/jpg", "image/jpeg"].includes(d) && (p.backgroundColor = "#ffffff");
|
|
1540
|
+
const y = p.getObjects().find((A) => A.id === a.id);
|
|
1541
|
+
if (y && (y.visible = !1), c != null && c.isBlocked) {
|
|
1542
|
+
const A = p.getObjects().find((C) => C.id === c.overlayMask.id);
|
|
1543
|
+
A && (A.visible = !1);
|
|
1511
1544
|
}
|
|
1512
|
-
p.viewportTransform = [1, 0, 0, 1, -g, -f], p.setDimensions({ width: m, height:
|
|
1513
|
-
const
|
|
1514
|
-
if (u === "svg" &&
|
|
1515
|
-
const
|
|
1545
|
+
p.viewportTransform = [1, 0, 0, 1, -g, -f], p.setDimensions({ width: m, height: v }, { backstoreOnly: !0 }), p.renderAll();
|
|
1546
|
+
const O = p.getObjects().filter((A) => A.format).every((A) => A.format === "svg");
|
|
1547
|
+
if (u === "svg" && O) {
|
|
1548
|
+
const A = p.toSVG();
|
|
1516
1549
|
p.dispose();
|
|
1517
|
-
const
|
|
1518
|
-
image:
|
|
1550
|
+
const w = {
|
|
1551
|
+
image: P._exportSVGStringAsFile(A, {
|
|
1519
1552
|
exportAsBase64: n,
|
|
1520
1553
|
exportAsBlob: o,
|
|
1521
1554
|
fileName: e
|
|
@@ -1524,72 +1557,72 @@ class H {
|
|
|
1524
1557
|
contentType: "image/svg+xml",
|
|
1525
1558
|
fileName: e.replace(/\.[^/.]+$/, ".svg")
|
|
1526
1559
|
};
|
|
1527
|
-
return
|
|
1560
|
+
return i.fire("editor:canvas-exported", w), w;
|
|
1528
1561
|
}
|
|
1529
|
-
const L = yield new Promise((
|
|
1530
|
-
p.getElement().toBlob((
|
|
1531
|
-
|
|
1562
|
+
const L = yield new Promise((A, C) => {
|
|
1563
|
+
p.getElement().toBlob((w) => {
|
|
1564
|
+
w ? A(w) : C(new Error("Failed to create Blob from canvas"));
|
|
1532
1565
|
});
|
|
1533
1566
|
});
|
|
1534
1567
|
if (p.dispose(), o) {
|
|
1535
|
-
const
|
|
1568
|
+
const A = {
|
|
1536
1569
|
image: L,
|
|
1537
1570
|
format: u,
|
|
1538
|
-
contentType:
|
|
1571
|
+
contentType: d,
|
|
1539
1572
|
fileName: e
|
|
1540
1573
|
};
|
|
1541
|
-
return
|
|
1574
|
+
return i.fire("editor:canvas-exported", A), A;
|
|
1542
1575
|
}
|
|
1543
1576
|
const k = yield createImageBitmap(L), b = yield r.post(
|
|
1544
1577
|
"toDataURL",
|
|
1545
1578
|
{ format: u, quality: 1, bitmap: k },
|
|
1546
1579
|
[k]
|
|
1547
1580
|
);
|
|
1548
|
-
if (
|
|
1549
|
-
const
|
|
1550
|
-
orientation:
|
|
1581
|
+
if (l) {
|
|
1582
|
+
const C = m * 0.264583, w = v * 0.264583, B = (yield this.editor.moduleLoader.loadModule("jspdf")).jsPDF, z = new B({
|
|
1583
|
+
orientation: C > w ? "landscape" : "portrait",
|
|
1551
1584
|
unit: "mm",
|
|
1552
|
-
format: [
|
|
1585
|
+
format: [C, w]
|
|
1553
1586
|
});
|
|
1554
|
-
if (
|
|
1555
|
-
const
|
|
1556
|
-
image:
|
|
1587
|
+
if (z.addImage(String(b), "JPG", 0, 0, C, w), n) {
|
|
1588
|
+
const W = {
|
|
1589
|
+
image: z.output("datauristring"),
|
|
1557
1590
|
format: "pdf",
|
|
1558
1591
|
contentType: "application/pdf",
|
|
1559
1592
|
fileName: e
|
|
1560
1593
|
};
|
|
1561
|
-
return
|
|
1594
|
+
return i.fire("editor:canvas-exported", W), W;
|
|
1562
1595
|
}
|
|
1563
|
-
const
|
|
1564
|
-
image: new File([
|
|
1596
|
+
const U = z.output("blob"), H = {
|
|
1597
|
+
image: new File([U], e, { type: "application/pdf" }),
|
|
1565
1598
|
format: "pdf",
|
|
1566
1599
|
contentType: "application/pdf",
|
|
1567
1600
|
fileName: e
|
|
1568
1601
|
};
|
|
1569
|
-
return
|
|
1602
|
+
return i.fire("editor:canvas-exported", H), H;
|
|
1570
1603
|
}
|
|
1571
1604
|
if (n) {
|
|
1572
|
-
const
|
|
1605
|
+
const A = {
|
|
1573
1606
|
image: b,
|
|
1574
1607
|
format: u,
|
|
1575
|
-
contentType:
|
|
1608
|
+
contentType: d,
|
|
1576
1609
|
fileName: e
|
|
1577
1610
|
};
|
|
1578
|
-
return
|
|
1611
|
+
return i.fire("editor:canvas-exported", A), A;
|
|
1579
1612
|
}
|
|
1580
|
-
const
|
|
1581
|
-
image: new File([L],
|
|
1613
|
+
const M = u === "svg" && !O ? e.replace(/\.[^/.]+$/, ".png") : e, j = {
|
|
1614
|
+
image: new File([L], M, { type: d }),
|
|
1582
1615
|
format: u,
|
|
1583
|
-
contentType:
|
|
1584
|
-
fileName:
|
|
1616
|
+
contentType: d,
|
|
1617
|
+
fileName: M
|
|
1585
1618
|
};
|
|
1586
|
-
return
|
|
1587
|
-
} catch (
|
|
1619
|
+
return i.fire("editor:canvas-exported", j), j;
|
|
1620
|
+
} catch (l) {
|
|
1588
1621
|
return this.editor.errorManager.emitError({
|
|
1589
1622
|
origin: "ImageManager",
|
|
1590
1623
|
method: "exportCanvasAsImageFile",
|
|
1591
1624
|
code: "IMAGE_EXPORT_FAILED",
|
|
1592
|
-
message: `Ошибка экспорта изображения: ${
|
|
1625
|
+
message: `Ошибка экспорта изображения: ${l.message}`,
|
|
1593
1626
|
data: { contentType: s, fileName: e, exportAsBase64: n, exportAsBlob: o }
|
|
1594
1627
|
}), null;
|
|
1595
1628
|
}
|
|
@@ -1607,88 +1640,88 @@ class H {
|
|
|
1607
1640
|
* @fires editor:object-exported
|
|
1608
1641
|
*/
|
|
1609
1642
|
exportObjectAsImageFile() {
|
|
1610
|
-
return
|
|
1643
|
+
return E(this, arguments, function* (t = {}) {
|
|
1611
1644
|
const {
|
|
1612
1645
|
object: e,
|
|
1613
1646
|
fileName: s = "image.png",
|
|
1614
1647
|
contentType: n = "image/png",
|
|
1615
1648
|
exportAsBase64: o = !1,
|
|
1616
|
-
exportAsBlob:
|
|
1617
|
-
} = t, { canvas:
|
|
1649
|
+
exportAsBlob: i = !1
|
|
1650
|
+
} = t, { canvas: a, workerManager: r } = this.editor, c = e || a.getActiveObject();
|
|
1618
1651
|
if (!c)
|
|
1619
1652
|
return this.editor.errorManager.emitError({
|
|
1620
1653
|
origin: "ImageManager",
|
|
1621
1654
|
method: "exportObjectAsImageFile",
|
|
1622
1655
|
code: "NO_OBJECT_SELECTED",
|
|
1623
1656
|
message: "Не выбран объект для экспорта",
|
|
1624
|
-
data: { contentType: n, fileName: s, exportAsBase64: o, exportAsBlob:
|
|
1657
|
+
data: { contentType: n, fileName: s, exportAsBase64: o, exportAsBlob: i }
|
|
1625
1658
|
}), null;
|
|
1626
1659
|
try {
|
|
1627
|
-
const
|
|
1628
|
-
if (
|
|
1629
|
-
const m = c.toSVG(),
|
|
1660
|
+
const l = P.getFormatFromContentType(n);
|
|
1661
|
+
if (l === "svg") {
|
|
1662
|
+
const m = c.toSVG(), v = P._exportSVGStringAsFile(m, {
|
|
1630
1663
|
exportAsBase64: o,
|
|
1631
|
-
exportAsBlob:
|
|
1664
|
+
exportAsBlob: i,
|
|
1632
1665
|
fileName: s
|
|
1633
1666
|
}), p = {
|
|
1634
1667
|
object: c,
|
|
1635
|
-
image:
|
|
1636
|
-
format:
|
|
1668
|
+
image: v,
|
|
1669
|
+
format: l,
|
|
1637
1670
|
contentType: "image/svg+xml",
|
|
1638
1671
|
fileName: s.replace(/\.[^/.]+$/, ".svg")
|
|
1639
1672
|
};
|
|
1640
|
-
return
|
|
1673
|
+
return a.fire("editor:object-exported", p), p;
|
|
1641
1674
|
}
|
|
1642
|
-
if (o && c instanceof
|
|
1643
|
-
const m = yield createImageBitmap(c.getElement()),
|
|
1675
|
+
if (o && c instanceof ht) {
|
|
1676
|
+
const m = yield createImageBitmap(c.getElement()), v = yield r.post(
|
|
1644
1677
|
"toDataURL",
|
|
1645
1678
|
{
|
|
1646
|
-
format:
|
|
1679
|
+
format: l,
|
|
1647
1680
|
quality: 1,
|
|
1648
1681
|
bitmap: m
|
|
1649
1682
|
},
|
|
1650
1683
|
[m]
|
|
1651
1684
|
), p = {
|
|
1652
1685
|
object: c,
|
|
1653
|
-
image:
|
|
1654
|
-
format:
|
|
1686
|
+
image: v,
|
|
1687
|
+
format: l,
|
|
1655
1688
|
contentType: n,
|
|
1656
1689
|
fileName: s
|
|
1657
1690
|
};
|
|
1658
|
-
return
|
|
1691
|
+
return a.fire("editor:object-exported", p), p;
|
|
1659
1692
|
}
|
|
1660
|
-
const
|
|
1693
|
+
const d = c.toCanvasElement({
|
|
1661
1694
|
enableRetinaScaling: !1
|
|
1662
|
-
}), u = yield new Promise((m,
|
|
1663
|
-
|
|
1664
|
-
p ? m(p) :
|
|
1695
|
+
}), u = yield new Promise((m, v) => {
|
|
1696
|
+
d.toBlob((p) => {
|
|
1697
|
+
p ? m(p) : v(new Error("Failed to create Blob from canvas"));
|
|
1665
1698
|
});
|
|
1666
1699
|
});
|
|
1667
|
-
if (
|
|
1700
|
+
if (i) {
|
|
1668
1701
|
const m = {
|
|
1669
1702
|
object: c,
|
|
1670
1703
|
image: u,
|
|
1671
|
-
format:
|
|
1704
|
+
format: l,
|
|
1672
1705
|
contentType: n,
|
|
1673
1706
|
fileName: s
|
|
1674
1707
|
};
|
|
1675
|
-
return
|
|
1708
|
+
return a.fire("editor:object-exported", m), m;
|
|
1676
1709
|
}
|
|
1677
1710
|
const g = new File([u], s, { type: n }), f = {
|
|
1678
1711
|
object: c,
|
|
1679
1712
|
image: g,
|
|
1680
|
-
format:
|
|
1713
|
+
format: l,
|
|
1681
1714
|
contentType: n,
|
|
1682
1715
|
fileName: s
|
|
1683
1716
|
};
|
|
1684
|
-
return
|
|
1685
|
-
} catch (
|
|
1717
|
+
return a.fire("editor:object-exported", f), f;
|
|
1718
|
+
} catch (l) {
|
|
1686
1719
|
return this.editor.errorManager.emitError({
|
|
1687
1720
|
origin: "ImageManager",
|
|
1688
1721
|
method: "exportObjectAsImageFile",
|
|
1689
1722
|
code: "IMAGE_EXPORT_FAILED",
|
|
1690
|
-
message: `Ошибка экспорта объекта: ${
|
|
1691
|
-
data: { contentType: n, fileName: s, exportAsBase64: o, exportAsBlob:
|
|
1723
|
+
message: `Ошибка экспорта объекта: ${l.message}`,
|
|
1724
|
+
data: { contentType: n, fileName: s, exportAsBase64: o, exportAsBlob: i }
|
|
1692
1725
|
}), null;
|
|
1693
1726
|
}
|
|
1694
1727
|
});
|
|
@@ -1704,7 +1737,7 @@ class H {
|
|
|
1704
1737
|
* @returns массив допустимых форматов изображений
|
|
1705
1738
|
*/
|
|
1706
1739
|
getAllowedFormatsFromContentTypes() {
|
|
1707
|
-
return this.acceptContentTypes.map((t) =>
|
|
1740
|
+
return this.acceptContentTypes.map((t) => P.getFormatFromContentType(t)).filter((t) => t);
|
|
1708
1741
|
}
|
|
1709
1742
|
/**
|
|
1710
1743
|
* Проверяет, является ли contentType допустимым типом изображения.
|
|
@@ -1720,7 +1753,7 @@ class H {
|
|
|
1720
1753
|
* @public
|
|
1721
1754
|
*/
|
|
1722
1755
|
getContentType(t) {
|
|
1723
|
-
return
|
|
1756
|
+
return E(this, null, function* () {
|
|
1724
1757
|
return typeof t == "string" ? this.getContentTypeFromUrl(t) : t.type || "application/octet-stream";
|
|
1725
1758
|
});
|
|
1726
1759
|
}
|
|
@@ -1731,7 +1764,7 @@ class H {
|
|
|
1731
1764
|
* @public
|
|
1732
1765
|
*/
|
|
1733
1766
|
getContentTypeFromUrl(t) {
|
|
1734
|
-
return
|
|
1767
|
+
return E(this, null, function* () {
|
|
1735
1768
|
if (t.startsWith("data:")) {
|
|
1736
1769
|
const e = t.match(/^data:([^;]+)/);
|
|
1737
1770
|
return e ? e[1] : "application/octet-stream";
|
|
@@ -1756,9 +1789,9 @@ class H {
|
|
|
1756
1789
|
var e;
|
|
1757
1790
|
try {
|
|
1758
1791
|
const n = (e = new URL(t).pathname.split(".").pop()) == null ? void 0 : e.toLowerCase(), o = {};
|
|
1759
|
-
return this.acceptContentTypes.forEach((
|
|
1760
|
-
const
|
|
1761
|
-
|
|
1792
|
+
return this.acceptContentTypes.forEach((i) => {
|
|
1793
|
+
const a = P.getFormatFromContentType(i);
|
|
1794
|
+
a && (o[a] = i);
|
|
1762
1795
|
}), n && o[n] || "application/octet-stream";
|
|
1763
1796
|
} catch (s) {
|
|
1764
1797
|
return console.warn("Не удалось определить расширение из URL:", t, s), "application/octet-stream";
|
|
@@ -1777,8 +1810,8 @@ class H {
|
|
|
1777
1810
|
}) {
|
|
1778
1811
|
const { montageArea: s } = this.editor;
|
|
1779
1812
|
if (!s || !t) return 1;
|
|
1780
|
-
const n = s.width, o = s.height, { width:
|
|
1781
|
-
return e === "contain" || e === "image-contain" ? Math.min(n /
|
|
1813
|
+
const n = s.width, o = s.height, { width: i, height: a } = t;
|
|
1814
|
+
return e === "contain" || e === "image-contain" ? Math.min(n / i, o / a) : e === "cover" || e === "image-cover" ? Math.max(n / i, o / a) : 1;
|
|
1782
1815
|
}
|
|
1783
1816
|
/**
|
|
1784
1817
|
* Преобразует SVG-строку в Blob, файл, или base64
|
|
@@ -1810,11 +1843,11 @@ class H {
|
|
|
1810
1843
|
return e ? e[1] : "";
|
|
1811
1844
|
}
|
|
1812
1845
|
}
|
|
1813
|
-
const
|
|
1814
|
-
function
|
|
1846
|
+
const K = (h, t, e) => Math.max(Math.min(h, e), t), _e = (h, t) => h * t, Ss = (h, t) => new At(h / 2, t / 2);
|
|
1847
|
+
function Cs(h) {
|
|
1815
1848
|
return ((h == null ? void 0 : h.type) === "image" || (h == null ? void 0 : h.format) === "svg") && typeof (h == null ? void 0 : h.width) == "number" && typeof (h == null ? void 0 : h.height) == "number";
|
|
1816
1849
|
}
|
|
1817
|
-
class
|
|
1850
|
+
class ws {
|
|
1818
1851
|
/**
|
|
1819
1852
|
* @param options
|
|
1820
1853
|
* @param options.editor – экземпляр редактора
|
|
@@ -1843,17 +1876,17 @@ class As {
|
|
|
1843
1876
|
if (!t) return;
|
|
1844
1877
|
const {
|
|
1845
1878
|
canvas: o,
|
|
1846
|
-
montageArea:
|
|
1847
|
-
options: { canvasBackstoreWidth:
|
|
1848
|
-
} = this.editor, { width: r, height: c } =
|
|
1849
|
-
if (!
|
|
1850
|
-
const m =
|
|
1851
|
-
this.setResolutionHeight(
|
|
1879
|
+
montageArea: i,
|
|
1880
|
+
options: { canvasBackstoreWidth: a }
|
|
1881
|
+
} = this.editor, { width: r, height: c } = i, l = K(Number(t), q, V);
|
|
1882
|
+
if (!a || a === "auto" || n ? this.adaptCanvasToContainer() : a ? this.setCanvasBackstoreWidth(Number(a)) : this.setCanvasBackstoreWidth(l), i.set({ width: l }), (f = o.clipPath) == null || f.set({ width: l }), e) {
|
|
1883
|
+
const m = l / r, v = _e(c, m);
|
|
1884
|
+
this.setResolutionHeight(v);
|
|
1852
1885
|
return;
|
|
1853
1886
|
}
|
|
1854
|
-
const { left:
|
|
1855
|
-
o.setViewportTransform([g, 0, 0, g,
|
|
1856
|
-
width:
|
|
1887
|
+
const { left: d, top: u } = this.getObjectDefaultCoords(i), g = o.getZoom();
|
|
1888
|
+
o.setViewportTransform([g, 0, 0, g, d, u]), this.centerMontageArea(), s || this.editor.historyManager.saveState(), o.fire("editor:resolution-width-changed", {
|
|
1889
|
+
width: l,
|
|
1857
1890
|
preserveProportional: e,
|
|
1858
1891
|
withoutSave: s,
|
|
1859
1892
|
adaptCanvasToContainer: n
|
|
@@ -1873,17 +1906,17 @@ class As {
|
|
|
1873
1906
|
if (!t) return;
|
|
1874
1907
|
const {
|
|
1875
1908
|
canvas: o,
|
|
1876
|
-
montageArea:
|
|
1877
|
-
options: { canvasBackstoreHeight:
|
|
1878
|
-
} = this.editor, { width: r, height: c } =
|
|
1879
|
-
if (!
|
|
1880
|
-
const m =
|
|
1881
|
-
this.setResolutionWidth(
|
|
1909
|
+
montageArea: i,
|
|
1910
|
+
options: { canvasBackstoreHeight: a }
|
|
1911
|
+
} = this.editor, { width: r, height: c } = i, l = K(Number(t), tt, G);
|
|
1912
|
+
if (!a || a === "auto" || n ? this.adaptCanvasToContainer() : a ? this.setCanvasBackstoreHeight(Number(a)) : this.setCanvasBackstoreHeight(l), i.set({ height: l }), (f = o.clipPath) == null || f.set({ height: l }), e) {
|
|
1913
|
+
const m = l / c, v = _e(r, m);
|
|
1914
|
+
this.setResolutionWidth(v);
|
|
1882
1915
|
return;
|
|
1883
1916
|
}
|
|
1884
|
-
const { left:
|
|
1885
|
-
o.setViewportTransform([g, 0, 0, g,
|
|
1886
|
-
height:
|
|
1917
|
+
const { left: d, top: u } = this.getObjectDefaultCoords(i), g = o.getZoom();
|
|
1918
|
+
o.setViewportTransform([g, 0, 0, g, d, u]), this.centerMontageArea(), s || this.editor.historyManager.saveState(), o.fire("editor:resolution-height-changed", {
|
|
1919
|
+
height: l,
|
|
1887
1920
|
preserveProportional: e,
|
|
1888
1921
|
withoutSave: s,
|
|
1889
1922
|
adaptCanvasToContainer: n
|
|
@@ -1895,7 +1928,7 @@ class As {
|
|
|
1895
1928
|
*/
|
|
1896
1929
|
centerMontageArea() {
|
|
1897
1930
|
var r;
|
|
1898
|
-
const { canvas: t, montageArea: e } = this.editor, s = t.getWidth(), n = t.getHeight(), o = t.getZoom(),
|
|
1931
|
+
const { canvas: t, montageArea: e } = this.editor, s = t.getWidth(), n = t.getHeight(), o = t.getZoom(), i = Ss(s, n);
|
|
1899
1932
|
e.set({
|
|
1900
1933
|
left: s / 2,
|
|
1901
1934
|
top: n / 2
|
|
@@ -1903,8 +1936,8 @@ class As {
|
|
|
1903
1936
|
left: s / 2,
|
|
1904
1937
|
top: n / 2
|
|
1905
1938
|
}), t.renderAll();
|
|
1906
|
-
const
|
|
1907
|
-
|
|
1939
|
+
const a = t.viewportTransform;
|
|
1940
|
+
a[4] = s / 2 - i.x * o, a[5] = n / 2 - i.y * o, t.setViewportTransform(a), t.renderAll();
|
|
1908
1941
|
}
|
|
1909
1942
|
/**
|
|
1910
1943
|
* Метод для получения координат объекта с учетом текущего зума
|
|
@@ -1920,15 +1953,15 @@ class As {
|
|
|
1920
1953
|
code: "NO_ACTIVE_OBJECT",
|
|
1921
1954
|
message: "Не выбран объект для получения координат"
|
|
1922
1955
|
}), { left: 0, top: 0 };
|
|
1923
|
-
const { width: n, height: o } = s,
|
|
1924
|
-
return { left:
|
|
1956
|
+
const { width: n, height: o } = s, i = e.getZoom(), a = (n - n * i) / 2, r = (o - o * i) / 2;
|
|
1957
|
+
return { left: a, top: r };
|
|
1925
1958
|
}
|
|
1926
1959
|
/**
|
|
1927
1960
|
* Устанавливаем ширину канваса в backstore (для экспорта)
|
|
1928
1961
|
*/
|
|
1929
1962
|
setCanvasBackstoreWidth(t) {
|
|
1930
1963
|
if (!t || typeof t != "number") return;
|
|
1931
|
-
const e =
|
|
1964
|
+
const e = K(t, q, V);
|
|
1932
1965
|
this.editor.canvas.setDimensions({ width: e }, { backstoreOnly: !0 });
|
|
1933
1966
|
}
|
|
1934
1967
|
/**
|
|
@@ -1937,7 +1970,7 @@ class As {
|
|
|
1937
1970
|
*/
|
|
1938
1971
|
setCanvasBackstoreHeight(t) {
|
|
1939
1972
|
if (!t || typeof t != "number") return;
|
|
1940
|
-
const e =
|
|
1973
|
+
const e = K(t, tt, G);
|
|
1941
1974
|
this.editor.canvas.setDimensions({ height: e }, { backstoreOnly: !0 });
|
|
1942
1975
|
}
|
|
1943
1976
|
/**
|
|
@@ -1946,8 +1979,8 @@ class As {
|
|
|
1946
1979
|
* с учётом минимальных и максимальных значений.
|
|
1947
1980
|
*/
|
|
1948
1981
|
adaptCanvasToContainer() {
|
|
1949
|
-
const { canvas: t } = this.editor, e = this.getEditorContainer(), s = e.clientWidth, n = e.clientHeight, o =
|
|
1950
|
-
t.setDimensions({ width: o, height:
|
|
1982
|
+
const { canvas: t } = this.editor, e = this.getEditorContainer(), s = e.clientWidth, n = e.clientHeight, o = K(s, q, V), i = K(n, tt, G);
|
|
1983
|
+
t.setDimensions({ width: o, height: i }, { backstoreOnly: !0 });
|
|
1951
1984
|
}
|
|
1952
1985
|
/**
|
|
1953
1986
|
* Обновляет размеры канваса без изменения позиций объектов.
|
|
@@ -1962,28 +1995,28 @@ class As {
|
|
|
1962
1995
|
width: s,
|
|
1963
1996
|
height: n
|
|
1964
1997
|
}
|
|
1965
|
-
} = this.editor, o = e.left,
|
|
1998
|
+
} = this.editor, o = e.left, i = e.top;
|
|
1966
1999
|
this.setResolutionWidth(s, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.setResolutionHeight(n, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.centerMontageArea();
|
|
1967
|
-
const
|
|
1968
|
-
if (
|
|
1969
|
-
const c = t.getActiveObject(),
|
|
2000
|
+
const a = e.left - o, r = e.top - i;
|
|
2001
|
+
if (a !== 0 || r !== 0) {
|
|
2002
|
+
const c = t.getActiveObject(), l = [];
|
|
1970
2003
|
if ((c == null ? void 0 : c.type) === "activeselection") {
|
|
1971
|
-
const
|
|
1972
|
-
|
|
2004
|
+
const d = c;
|
|
2005
|
+
l.push(...d.getObjects()), t.discardActiveObject();
|
|
1973
2006
|
}
|
|
1974
|
-
if (t.getObjects().forEach((
|
|
1975
|
-
|
|
1976
|
-
left:
|
|
1977
|
-
top:
|
|
1978
|
-
}),
|
|
1979
|
-
}),
|
|
1980
|
-
if (
|
|
1981
|
-
t.setActiveObject(
|
|
2007
|
+
if (t.getObjects().forEach((d) => {
|
|
2008
|
+
d.id === "montage-area" || d.id === "overlay-mask" || d.id === "background" || (d.set({
|
|
2009
|
+
left: d.left + a,
|
|
2010
|
+
top: d.top + r
|
|
2011
|
+
}), d.setCoords());
|
|
2012
|
+
}), l.length > 0)
|
|
2013
|
+
if (l.length === 1)
|
|
2014
|
+
t.setActiveObject(l[0]);
|
|
1982
2015
|
else {
|
|
1983
|
-
const
|
|
2016
|
+
const d = new N(l, {
|
|
1984
2017
|
canvas: t
|
|
1985
2018
|
});
|
|
1986
|
-
t.setActiveObject(
|
|
2019
|
+
t.setActiveObject(d);
|
|
1987
2020
|
}
|
|
1988
2021
|
}
|
|
1989
2022
|
t.renderAll(), t.fire("editor:canvas-updated", {
|
|
@@ -2112,18 +2145,18 @@ class As {
|
|
|
2112
2145
|
default:
|
|
2113
2146
|
o.push(n.lowerCanvasEl, n.upperCanvasEl);
|
|
2114
2147
|
}
|
|
2115
|
-
const
|
|
2148
|
+
const i = e === "width" ? "width" : "height";
|
|
2116
2149
|
if (typeof s == "string") {
|
|
2117
2150
|
o.forEach((r) => {
|
|
2118
|
-
r.style[
|
|
2151
|
+
r.style[i] = s;
|
|
2119
2152
|
});
|
|
2120
2153
|
return;
|
|
2121
2154
|
}
|
|
2122
2155
|
if (isNaN(s)) return;
|
|
2123
|
-
const
|
|
2156
|
+
const a = `${s}px`;
|
|
2124
2157
|
o.forEach((r) => {
|
|
2125
|
-
r.style[
|
|
2126
|
-
}), n.fire(`editor:display-${t}-${
|
|
2158
|
+
r.style[i] = a;
|
|
2159
|
+
}), n.fire(`editor:display-${t}-${i}-changed`, {
|
|
2127
2160
|
element: t,
|
|
2128
2161
|
value: s
|
|
2129
2162
|
});
|
|
@@ -2140,23 +2173,23 @@ class As {
|
|
|
2140
2173
|
const {
|
|
2141
2174
|
canvas: n,
|
|
2142
2175
|
montageArea: o,
|
|
2143
|
-
transformManager:
|
|
2176
|
+
transformManager: i,
|
|
2144
2177
|
options: {
|
|
2145
|
-
montageAreaWidth:
|
|
2178
|
+
montageAreaWidth: a,
|
|
2146
2179
|
montageAreaHeight: r
|
|
2147
2180
|
}
|
|
2148
2181
|
} = this.editor, c = t || n.getActiveObject();
|
|
2149
|
-
if (!
|
|
2150
|
-
const { width:
|
|
2151
|
-
let u = Math.min(
|
|
2182
|
+
if (!Cs(c)) return;
|
|
2183
|
+
const { width: l, height: d } = c;
|
|
2184
|
+
let u = Math.min(l, V), g = Math.min(d, G);
|
|
2152
2185
|
if (e) {
|
|
2153
2186
|
const {
|
|
2154
2187
|
width: f,
|
|
2155
2188
|
height: m
|
|
2156
|
-
} = o,
|
|
2157
|
-
u = f *
|
|
2189
|
+
} = o, v = l / f, p = d / m, y = Math.max(v, p);
|
|
2190
|
+
u = f * y, g = m * y;
|
|
2158
2191
|
}
|
|
2159
|
-
this.setResolutionWidth(u, { withoutSave: !0 }), this.setResolutionHeight(g, { withoutSave: !0 }), this.editor.backgroundManager.backgroundObject && this.editor.backgroundManager.refresh(), (
|
|
2192
|
+
this.setResolutionWidth(u, { withoutSave: !0 }), this.setResolutionHeight(g, { withoutSave: !0 }), this.editor.backgroundManager.backgroundObject && this.editor.backgroundManager.refresh(), (l > a || d > r) && this.editor.zoomManager.calculateAndApplyDefaultZoom(), i.resetObject({ object: c, withoutSave: !0 }), n.centerObject(c), n.renderAll(), s || this.editor.historyManager.saveState(), n.fire("editor:montage-area-scaled-to-image", {
|
|
2160
2193
|
object: c,
|
|
2161
2194
|
width: u,
|
|
2162
2195
|
height: g,
|
|
@@ -2185,10 +2218,10 @@ class As {
|
|
|
2185
2218
|
historyManager: n,
|
|
2186
2219
|
options: {
|
|
2187
2220
|
montageAreaWidth: o,
|
|
2188
|
-
montageAreaHeight:
|
|
2221
|
+
montageAreaHeight: i
|
|
2189
2222
|
}
|
|
2190
2223
|
} = this.editor;
|
|
2191
|
-
this.editor.zoomManager.resetZoom(), this.setResolutionWidth(o, { withoutSave: !0 }), this.setResolutionHeight(
|
|
2224
|
+
this.editor.zoomManager.resetZoom(), this.setResolutionWidth(o, { withoutSave: !0 }), this.setResolutionHeight(i, { withoutSave: !0 }), e.renderAll(), s.resetObjects(), t || n.saveState(), e.fire("editor:default-scale-set");
|
|
2192
2225
|
}
|
|
2193
2226
|
/**
|
|
2194
2227
|
* Получение всех объектов внутри монтажной области редактора
|
|
@@ -2202,11 +2235,11 @@ class As {
|
|
|
2202
2235
|
backgroundManager: { backgroundObject: n }
|
|
2203
2236
|
} = this.editor;
|
|
2204
2237
|
return t.getObjects().filter(
|
|
2205
|
-
(
|
|
2238
|
+
(i) => i.id !== e.id && i.id !== (s == null ? void 0 : s.id) && i.id !== (n == null ? void 0 : n.id)
|
|
2206
2239
|
);
|
|
2207
2240
|
}
|
|
2208
2241
|
}
|
|
2209
|
-
class
|
|
2242
|
+
class Es {
|
|
2210
2243
|
constructor({ editor: t }) {
|
|
2211
2244
|
this.editor = t, this.options = t.options;
|
|
2212
2245
|
}
|
|
@@ -2217,14 +2250,14 @@ class Ss {
|
|
|
2217
2250
|
* @param options.withoutSave - Не сохранять состояние
|
|
2218
2251
|
* @fires editor:object-rotated
|
|
2219
2252
|
*/
|
|
2220
|
-
rotate(t =
|
|
2253
|
+
rotate(t = As, { withoutSave: e } = {}) {
|
|
2221
2254
|
const { canvas: s, historyManager: n } = this.editor, o = s.getActiveObject();
|
|
2222
2255
|
if (!o) return;
|
|
2223
|
-
const
|
|
2224
|
-
o.rotate(
|
|
2256
|
+
const i = o.angle + t;
|
|
2257
|
+
o.rotate(i), o.setCoords(), s.renderAll(), e || n.saveState(), s.fire("editor:object-rotated", {
|
|
2225
2258
|
object: o,
|
|
2226
2259
|
withoutSave: e,
|
|
2227
|
-
angle:
|
|
2260
|
+
angle: i
|
|
2228
2261
|
});
|
|
2229
2262
|
}
|
|
2230
2263
|
/**
|
|
@@ -2266,11 +2299,11 @@ class Ss {
|
|
|
2266
2299
|
opacity: e = 1,
|
|
2267
2300
|
withoutSave: s
|
|
2268
2301
|
} = {}) {
|
|
2269
|
-
const { canvas: n, historyManager: o } = this.editor,
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
}) :
|
|
2273
|
-
object:
|
|
2302
|
+
const { canvas: n, historyManager: o } = this.editor, i = t || n.getActiveObject();
|
|
2303
|
+
i && (i instanceof N ? i.getObjects().forEach((a) => {
|
|
2304
|
+
a.set("opacity", e);
|
|
2305
|
+
}) : i.set("opacity", e), n.renderAll(), s || o.saveState(), n.fire("editor:object-opacity-changed", {
|
|
2306
|
+
object: i,
|
|
2274
2307
|
opacity: e,
|
|
2275
2308
|
withoutSave: s
|
|
2276
2309
|
}));
|
|
@@ -2292,19 +2325,19 @@ class Ss {
|
|
|
2292
2325
|
withoutSave: s,
|
|
2293
2326
|
fitAsOneObject: n
|
|
2294
2327
|
} = {}) {
|
|
2295
|
-
const { canvas: o, historyManager:
|
|
2296
|
-
if (
|
|
2297
|
-
if (
|
|
2298
|
-
const r =
|
|
2299
|
-
o.discardActiveObject(), r.forEach((
|
|
2300
|
-
this._fitSingleObject(
|
|
2328
|
+
const { canvas: o, historyManager: i } = this.editor, a = t || o.getActiveObject();
|
|
2329
|
+
if (a) {
|
|
2330
|
+
if (a instanceof N && !n) {
|
|
2331
|
+
const r = a.getObjects();
|
|
2332
|
+
o.discardActiveObject(), r.forEach((l) => {
|
|
2333
|
+
this._fitSingleObject(l, e);
|
|
2301
2334
|
});
|
|
2302
|
-
const c = new
|
|
2335
|
+
const c = new N(r, { canvas: o });
|
|
2303
2336
|
o.setActiveObject(c);
|
|
2304
2337
|
} else
|
|
2305
|
-
this._fitSingleObject(
|
|
2306
|
-
o.renderAll(), s ||
|
|
2307
|
-
object:
|
|
2338
|
+
this._fitSingleObject(a, e);
|
|
2339
|
+
o.renderAll(), s || i.saveState(), o.fire("editor:object-fitted", {
|
|
2340
|
+
object: a,
|
|
2308
2341
|
type: e,
|
|
2309
2342
|
withoutSave: s,
|
|
2310
2343
|
fitAsOneObject: n
|
|
@@ -2318,11 +2351,11 @@ class Ss {
|
|
|
2318
2351
|
* @private
|
|
2319
2352
|
*/
|
|
2320
2353
|
_fitSingleObject(t, e) {
|
|
2321
|
-
const { canvas: s, montageArea: n } = this.editor, { width: o, height:
|
|
2322
|
-
let
|
|
2323
|
-
e === "contain" ?
|
|
2324
|
-
scaleX:
|
|
2325
|
-
scaleY: r *
|
|
2354
|
+
const { canvas: s, montageArea: n } = this.editor, { width: o, height: i, scaleX: a = 1, scaleY: r = 1, angle: c = 0 } = t, l = o * Math.abs(a), d = i * Math.abs(r), u = c * Math.PI / 180, g = Math.abs(Math.cos(u)), f = Math.abs(Math.sin(u)), m = l * g + d * f, v = l * f + d * g, p = n.width, y = n.height;
|
|
2355
|
+
let O;
|
|
2356
|
+
e === "contain" ? O = Math.min(p / m, y / v) : O = Math.max(p / m, y / v), t.set({
|
|
2357
|
+
scaleX: a * O,
|
|
2358
|
+
scaleY: r * O
|
|
2326
2359
|
}), s.centerObject(t);
|
|
2327
2360
|
}
|
|
2328
2361
|
/**
|
|
@@ -2345,12 +2378,12 @@ class Ss {
|
|
|
2345
2378
|
const {
|
|
2346
2379
|
canvas: n,
|
|
2347
2380
|
montageArea: o,
|
|
2348
|
-
imageManager:
|
|
2349
|
-
historyManager:
|
|
2381
|
+
imageManager: i,
|
|
2382
|
+
historyManager: a,
|
|
2350
2383
|
options: { scaleType: r }
|
|
2351
2384
|
} = this.editor, c = t || n.getActiveObject();
|
|
2352
2385
|
if (!c || c.locked) return;
|
|
2353
|
-
if (
|
|
2386
|
+
if (a.suspendHistory(), c.type === "image" || c.format === "svg" || c.set({
|
|
2354
2387
|
scaleX: 1,
|
|
2355
2388
|
scaleY: 1,
|
|
2356
2389
|
flipX: !1,
|
|
@@ -2359,22 +2392,22 @@ class Ss {
|
|
|
2359
2392
|
}), e)
|
|
2360
2393
|
this.fitObject({ object: c, withoutSave: !0, fitAsOneObject: !0 });
|
|
2361
2394
|
else {
|
|
2362
|
-
const { width:
|
|
2395
|
+
const { width: d, height: u } = o, { width: g, height: f } = c, m = i.calculateScaleFactor({
|
|
2363
2396
|
imageObject: c,
|
|
2364
2397
|
scaleType: r
|
|
2365
2398
|
});
|
|
2366
|
-
r === "contain" && m < 1 || r === "cover" && (g >
|
|
2399
|
+
r === "contain" && m < 1 || r === "cover" && (g > d || f > u) ? this.fitObject({ object: c, withoutSave: !0, fitAsOneObject: !0 }) : c.set({ scaleX: 1, scaleY: 1 });
|
|
2367
2400
|
}
|
|
2368
|
-
c.set({ flipX: !1, flipY: !1, angle: 0 }), n.centerObject(c), n.renderAll(),
|
|
2401
|
+
c.set({ flipX: !1, flipY: !1, angle: 0 }), n.centerObject(c), n.renderAll(), a.resumeHistory(), s || a.saveState(), n.fire("editor:object-reset", {
|
|
2369
2402
|
object: c,
|
|
2370
2403
|
withoutSave: s,
|
|
2371
2404
|
alwaysFitObject: e
|
|
2372
2405
|
});
|
|
2373
2406
|
}
|
|
2374
2407
|
}
|
|
2375
|
-
class
|
|
2408
|
+
class Os {
|
|
2376
2409
|
constructor({ editor: t }) {
|
|
2377
|
-
this.editor = t, this.options = t.options, this.minZoom = this.options.minZoom ||
|
|
2410
|
+
this.editor = t, this.options = t.options, this.minZoom = this.options.minZoom || vs, this.maxZoom = this.options.maxZoom || js, this.defaultZoom = this.options.defaultScale;
|
|
2378
2411
|
}
|
|
2379
2412
|
/**
|
|
2380
2413
|
* Вспомогательный метод для вычисления размеров масштабированной монтажной области
|
|
@@ -2396,10 +2429,10 @@ class Cs {
|
|
|
2396
2429
|
* @private
|
|
2397
2430
|
*/
|
|
2398
2431
|
_getClampedPointerCoordinates(t) {
|
|
2399
|
-
const { canvas: e, montageArea: s } = this.editor, n = e.getPointer(t, !0), o = e.viewportTransform,
|
|
2432
|
+
const { canvas: e, montageArea: s } = this.editor, n = e.getPointer(t, !0), o = e.viewportTransform, i = e.getZoom(), a = s.left - s.width / 2, r = s.left + s.width / 2, c = s.top - s.height / 2, l = s.top + s.height / 2, d = a * i + o[4], u = r * i + o[4], g = c * i + o[5], f = l * i + o[5], m = Math.max(d, Math.min(u, n.x)), v = Math.max(g, Math.min(f, n.y));
|
|
2400
2433
|
return {
|
|
2401
2434
|
x: m,
|
|
2402
|
-
y:
|
|
2435
|
+
y: v
|
|
2403
2436
|
};
|
|
2404
2437
|
}
|
|
2405
2438
|
/**
|
|
@@ -2408,8 +2441,8 @@ class Cs {
|
|
|
2408
2441
|
* @private
|
|
2409
2442
|
*/
|
|
2410
2443
|
_calculateFitZoom() {
|
|
2411
|
-
const { canvas: t, montageArea: e } = this.editor, s = t.getWidth(), n = t.getHeight(), o = s / e.width,
|
|
2412
|
-
return Math.max(o,
|
|
2444
|
+
const { canvas: t, montageArea: e } = this.editor, s = t.getWidth(), n = t.getHeight(), o = s / e.width, i = n / e.height;
|
|
2445
|
+
return Math.max(o, i);
|
|
2413
2446
|
}
|
|
2414
2447
|
/**
|
|
2415
2448
|
* Вычисляет целевую позицию viewport для центрирования монтажной области
|
|
@@ -2418,10 +2451,10 @@ class Cs {
|
|
|
2418
2451
|
* @private
|
|
2419
2452
|
*/
|
|
2420
2453
|
_calculateTargetViewportPosition(t) {
|
|
2421
|
-
const { canvas: e, montageArea: s } = this.editor, n = e.getWidth(), o = e.getHeight(),
|
|
2454
|
+
const { canvas: e, montageArea: s } = this.editor, n = e.getWidth(), o = e.getHeight(), i = n / 2, a = o / 2, r = s.left, c = s.top;
|
|
2422
2455
|
return {
|
|
2423
|
-
x:
|
|
2424
|
-
y:
|
|
2456
|
+
x: i - r * t,
|
|
2457
|
+
y: a - c * t
|
|
2425
2458
|
};
|
|
2426
2459
|
}
|
|
2427
2460
|
/**
|
|
@@ -2431,10 +2464,10 @@ class Cs {
|
|
|
2431
2464
|
* @private
|
|
2432
2465
|
*/
|
|
2433
2466
|
_calculateEmptySpaceRatio(t) {
|
|
2434
|
-
const { canvas: e, montageArea: s } = this.editor, n = e.viewportTransform, o = e.getWidth(),
|
|
2435
|
-
if (!(m ||
|
|
2436
|
-
const L = Math.max(0,
|
|
2437
|
-
return Math.max(
|
|
2467
|
+
const { canvas: e, montageArea: s } = this.editor, n = e.viewportTransform, o = e.getWidth(), i = e.getHeight(), a = s.left - s.width / 2, r = s.left + s.width / 2, c = s.top - s.height / 2, l = s.top + s.height / 2, d = -n[4] / t, u = (-n[4] + o) / t, g = -n[5] / t, f = (-n[5] + i) / t, m = d < a, v = u > r, p = g < c, y = f > l;
|
|
2468
|
+
if (!(m || v || p || y)) return 0;
|
|
2469
|
+
const L = Math.max(0, a - d), k = Math.max(0, u - r), b = Math.max(0, c - g), M = Math.max(0, f - l), S = Math.max(L, k), j = Math.max(b, M), A = S / o, C = j / i;
|
|
2470
|
+
return Math.max(A, C);
|
|
2438
2471
|
}
|
|
2439
2472
|
/**
|
|
2440
2473
|
* Вычисляет плавный шаг перемещения viewport к центру с ускорением
|
|
@@ -2447,11 +2480,11 @@ class Cs {
|
|
|
2447
2480
|
* @private
|
|
2448
2481
|
*/
|
|
2449
2482
|
_calculateSmoothCenteringStep(t, e, s, n, o) {
|
|
2450
|
-
const { canvas:
|
|
2483
|
+
const { canvas: i, montageArea: a } = this.editor, r = i.viewportTransform, c = i.getWidth(), l = i.getHeight(), d = t.x - r[4], u = t.y - r[5], g = Math.abs(n), f = e - s;
|
|
2451
2484
|
if (Math.abs(f) / g <= 0.1)
|
|
2452
|
-
return { x:
|
|
2453
|
-
const
|
|
2454
|
-
return { x:
|
|
2485
|
+
return { x: d, y: u };
|
|
2486
|
+
const v = c / 2, p = l / 2, y = a.left, O = a.top, L = v - y * s, k = p - O * s, b = (L - r[4]) / (e - s), M = (k - r[5]) / (e - s), S = b * g, j = M * g, A = S * o, C = j * o, w = Math.abs(A) > Math.abs(d) ? d : A, B = Math.abs(C) > Math.abs(u) ? u : C;
|
|
2487
|
+
return { x: w, y: B };
|
|
2455
2488
|
}
|
|
2456
2489
|
/**
|
|
2457
2490
|
* Применяет плавное центрирование viewport при приближении к defaultZoom.
|
|
@@ -2463,9 +2496,9 @@ class Cs {
|
|
|
2463
2496
|
* @returns true если центрирование было применено
|
|
2464
2497
|
* @private
|
|
2465
2498
|
*/
|
|
2466
|
-
_applyViewportCentering(t, e = !1, s =
|
|
2467
|
-
const { canvas: n } = this.editor, o = this._getScaledMontageDimensions(t),
|
|
2468
|
-
if (!(!r ||
|
|
2499
|
+
_applyViewportCentering(t, e = !1, s = ke) {
|
|
2500
|
+
const { canvas: n } = this.editor, o = this._getScaledMontageDimensions(t), i = n.getWidth(), a = n.getHeight(), r = o.width > i || o.height > a, c = this._calculateFitZoom(), l = t - c;
|
|
2501
|
+
if (!(!r || l) && !e)
|
|
2469
2502
|
return !1;
|
|
2470
2503
|
const u = n.viewportTransform, g = this._calculateTargetViewportPosition(t);
|
|
2471
2504
|
if (!r)
|
|
@@ -2487,7 +2520,7 @@ class Cs {
|
|
|
2487
2520
|
* @param scale - Желаемый масштаб относительно размеров контейнера редактора.
|
|
2488
2521
|
*/
|
|
2489
2522
|
calculateAndApplyDefaultZoom(t = this.options.defaultScale) {
|
|
2490
|
-
const { canvas: e } = this.editor, s = e.editorContainer, n = s.clientWidth || e.getWidth(), o = s.clientHeight || e.getHeight(), { width:
|
|
2523
|
+
const { canvas: e } = this.editor, s = e.editorContainer, n = s.clientWidth || e.getWidth(), o = s.clientHeight || e.getHeight(), { width: i, height: a } = this.editor.montageArea, r = n / i * t, c = o / a * t;
|
|
2491
2524
|
this.defaultZoom = Math.min(r, c), this.setZoom(), this.editor.panConstraintManager.updateBounds();
|
|
2492
2525
|
}
|
|
2493
2526
|
/**
|
|
@@ -2501,9 +2534,9 @@ class Cs {
|
|
|
2501
2534
|
* @fires editor:zoom-changed
|
|
2502
2535
|
*/
|
|
2503
2536
|
handleMouseWheelZoom(t, e) {
|
|
2504
|
-
const { canvas: s, montageArea: n } = this.editor, o = s.getZoom(),
|
|
2505
|
-
if (
|
|
2506
|
-
if (!
|
|
2537
|
+
const { canvas: s, montageArea: n } = this.editor, o = s.getZoom(), i = t < 0, a = this._getScaledMontageDimensions(o), r = s.getWidth(), c = s.getHeight(), l = a.width > r || a.height > c;
|
|
2538
|
+
if (i) {
|
|
2539
|
+
if (!l)
|
|
2507
2540
|
this.zoom(t, {
|
|
2508
2541
|
pointX: n.left,
|
|
2509
2542
|
pointY: n.top
|
|
@@ -2517,17 +2550,17 @@ class Cs {
|
|
|
2517
2550
|
}
|
|
2518
2551
|
return;
|
|
2519
2552
|
}
|
|
2520
|
-
if (t < 0 || !
|
|
2553
|
+
if (t < 0 || !l) {
|
|
2521
2554
|
this.zoom(t, {
|
|
2522
2555
|
pointX: n.left,
|
|
2523
2556
|
pointY: n.top
|
|
2524
2557
|
});
|
|
2525
2558
|
return;
|
|
2526
2559
|
}
|
|
2527
|
-
const
|
|
2560
|
+
const d = this._getClampedPointerCoordinates(e);
|
|
2528
2561
|
this.zoom(t, {
|
|
2529
|
-
pointX:
|
|
2530
|
-
pointY:
|
|
2562
|
+
pointX: d.x,
|
|
2563
|
+
pointY: d.y
|
|
2531
2564
|
});
|
|
2532
2565
|
}
|
|
2533
2566
|
/**
|
|
@@ -2538,16 +2571,16 @@ class Cs {
|
|
|
2538
2571
|
* @param options.pointY - Координата Y точки зума
|
|
2539
2572
|
* @fires editor:zoom-changed
|
|
2540
2573
|
*/
|
|
2541
|
-
zoom(t =
|
|
2574
|
+
zoom(t = ke, e = {}) {
|
|
2542
2575
|
var g, f;
|
|
2543
2576
|
if (!t) return;
|
|
2544
|
-
const { minZoom: s, maxZoom: n } = this, { canvas: o } = this.editor,
|
|
2577
|
+
const { minZoom: s, maxZoom: n } = this, { canvas: o } = this.editor, i = t < 0, a = o.getZoom(), r = o.getCenterPoint(), c = (g = e.pointX) != null ? g : r.x, l = (f = e.pointY) != null ? f : r.y, d = new At(c, l);
|
|
2545
2578
|
this.editor.montageArea.setCoords(), this.editor.canvas.requestRenderAll();
|
|
2546
|
-
let u = Number((
|
|
2547
|
-
u > n && (u = n), u < s && (u = s), o.zoomToPoint(
|
|
2579
|
+
let u = Number((a + Number(t)).toFixed(3));
|
|
2580
|
+
u > n && (u = n), u < s && (u = s), o.zoomToPoint(d, u), this.editor.panConstraintManager.updateBounds(), this._applyViewportCentering(u, i, t), o.fire("editor:zoom-changed", {
|
|
2548
2581
|
currentZoom: o.getZoom(),
|
|
2549
2582
|
zoom: u,
|
|
2550
|
-
point:
|
|
2583
|
+
point: d
|
|
2551
2584
|
});
|
|
2552
2585
|
}
|
|
2553
2586
|
/**
|
|
@@ -2556,11 +2589,11 @@ class Cs {
|
|
|
2556
2589
|
* @fires editor:zoom-changed
|
|
2557
2590
|
*/
|
|
2558
2591
|
setZoom(t = this.defaultZoom) {
|
|
2559
|
-
const { minZoom: e, maxZoom: s } = this, { canvas: n } = this.editor, o = new
|
|
2560
|
-
let
|
|
2561
|
-
t > s && (
|
|
2592
|
+
const { minZoom: e, maxZoom: s } = this, { canvas: n } = this.editor, o = new At(n.getCenterPoint());
|
|
2593
|
+
let i = t;
|
|
2594
|
+
t > s && (i = s), t < e && (i = e), n.zoomToPoint(o, i), n.fire("editor:zoom-changed", {
|
|
2562
2595
|
currentZoom: n.getZoom(),
|
|
2563
|
-
zoom:
|
|
2596
|
+
zoom: i,
|
|
2564
2597
|
point: o
|
|
2565
2598
|
}), this.editor.panConstraintManager.updateBounds();
|
|
2566
2599
|
}
|
|
@@ -2569,14 +2602,14 @@ class Cs {
|
|
|
2569
2602
|
* @fires editor:zoom-changed
|
|
2570
2603
|
*/
|
|
2571
2604
|
resetZoom() {
|
|
2572
|
-
const { canvas: t } = this.editor, e = new
|
|
2605
|
+
const { canvas: t } = this.editor, e = new At(t.getCenterPoint());
|
|
2573
2606
|
t.zoomToPoint(e, this.defaultZoom), this.editor.canvas.fire("editor:zoom-changed", {
|
|
2574
2607
|
currentZoom: t.getZoom(),
|
|
2575
2608
|
point: e
|
|
2576
2609
|
}), this.editor.panConstraintManager.updateBounds();
|
|
2577
2610
|
}
|
|
2578
2611
|
}
|
|
2579
|
-
class
|
|
2612
|
+
class Ds {
|
|
2580
2613
|
constructor({ editor: t }) {
|
|
2581
2614
|
this.editor = t, this.isBlocked = !1, this.overlayMask = null, this._createOverlay();
|
|
2582
2615
|
}
|
|
@@ -2606,8 +2639,8 @@ class ws {
|
|
|
2606
2639
|
const { canvas: t, montageArea: e, historyManager: s } = this.editor;
|
|
2607
2640
|
if (!e || !this.overlayMask) return;
|
|
2608
2641
|
s.suspendHistory(), e.setCoords();
|
|
2609
|
-
const { left: n, top: o, width:
|
|
2610
|
-
this.overlayMask.set({ left: n, top: o, width:
|
|
2642
|
+
const { left: n, top: o, width: i, height: a } = e.getBoundingRect();
|
|
2643
|
+
this.overlayMask.set({ left: n, top: o, width: i, height: a }), t.discardActiveObject(), this.editor.layerManager.bringToFront(this.overlayMask, { withoutSave: !0 }), s.resumeHistory();
|
|
2611
2644
|
}
|
|
2612
2645
|
/**
|
|
2613
2646
|
* Выключает редактор:
|
|
@@ -2633,7 +2666,7 @@ class ws {
|
|
|
2633
2666
|
}), t.upperCanvasEl.style.pointerEvents = "", t.lowerCanvasEl.style.pointerEvents = "", this.overlayMask.visible = !1, t.requestRenderAll(), t.fire("editor:enabled"), s.resumeHistory();
|
|
2634
2667
|
}
|
|
2635
2668
|
}
|
|
2636
|
-
class
|
|
2669
|
+
class J {
|
|
2637
2670
|
constructor({ editor: t }) {
|
|
2638
2671
|
this.editor = t, this.backgroundObject = null;
|
|
2639
2672
|
}
|
|
@@ -2650,13 +2683,13 @@ class q {
|
|
|
2650
2683
|
}) {
|
|
2651
2684
|
var n;
|
|
2652
2685
|
try {
|
|
2653
|
-
const { historyManager: o } = this.editor, { backgroundObject:
|
|
2654
|
-
if (o.suspendHistory(),
|
|
2655
|
-
if (
|
|
2686
|
+
const { historyManager: o } = this.editor, { backgroundObject: i } = this;
|
|
2687
|
+
if (o.suspendHistory(), i && i.backgroundType === "color") {
|
|
2688
|
+
if (i.fill === t) {
|
|
2656
2689
|
o.resumeHistory();
|
|
2657
2690
|
return;
|
|
2658
2691
|
}
|
|
2659
|
-
|
|
2692
|
+
i.set({
|
|
2660
2693
|
fill: t,
|
|
2661
2694
|
backgroundId: `background-${x()}`
|
|
2662
2695
|
}), this.editor.canvas.requestRenderAll();
|
|
@@ -2686,15 +2719,15 @@ class q {
|
|
|
2686
2719
|
}) {
|
|
2687
2720
|
var n;
|
|
2688
2721
|
try {
|
|
2689
|
-
const { historyManager: o } = this.editor, { backgroundObject:
|
|
2690
|
-
if (o.suspendHistory(),
|
|
2691
|
-
const
|
|
2692
|
-
if (
|
|
2722
|
+
const { historyManager: o } = this.editor, { backgroundObject: i } = this;
|
|
2723
|
+
if (o.suspendHistory(), i && i.backgroundType === "gradient") {
|
|
2724
|
+
const a = J._createFabricGradient(t);
|
|
2725
|
+
if (J._isGradientEqual(i.fill, a)) {
|
|
2693
2726
|
o.resumeHistory();
|
|
2694
2727
|
return;
|
|
2695
2728
|
}
|
|
2696
|
-
|
|
2697
|
-
fill:
|
|
2729
|
+
i.set({
|
|
2730
|
+
fill: a,
|
|
2698
2731
|
backgroundId: `background-${x()}`
|
|
2699
2732
|
}), this.editor.canvas.requestRenderAll();
|
|
2700
2733
|
} else
|
|
@@ -2723,8 +2756,8 @@ class q {
|
|
|
2723
2756
|
endColor: s,
|
|
2724
2757
|
startPosition: n,
|
|
2725
2758
|
endPosition: o,
|
|
2726
|
-
customData:
|
|
2727
|
-
withoutSave:
|
|
2759
|
+
customData: i = {},
|
|
2760
|
+
withoutSave: a = !1
|
|
2728
2761
|
}) {
|
|
2729
2762
|
this.setGradientBackground({
|
|
2730
2763
|
gradient: {
|
|
@@ -2735,8 +2768,8 @@ class q {
|
|
|
2735
2768
|
startPosition: n,
|
|
2736
2769
|
endPosition: o
|
|
2737
2770
|
},
|
|
2738
|
-
customData:
|
|
2739
|
-
withoutSave:
|
|
2771
|
+
customData: i,
|
|
2772
|
+
withoutSave: a
|
|
2740
2773
|
});
|
|
2741
2774
|
}
|
|
2742
2775
|
/**
|
|
@@ -2749,8 +2782,8 @@ class q {
|
|
|
2749
2782
|
radius: s,
|
|
2750
2783
|
startColor: n,
|
|
2751
2784
|
endColor: o,
|
|
2752
|
-
startPosition:
|
|
2753
|
-
endPosition:
|
|
2785
|
+
startPosition: i,
|
|
2786
|
+
endPosition: a,
|
|
2754
2787
|
customData: r = {},
|
|
2755
2788
|
withoutSave: c = !1
|
|
2756
2789
|
}) {
|
|
@@ -2762,8 +2795,8 @@ class q {
|
|
|
2762
2795
|
radius: s,
|
|
2763
2796
|
startColor: n,
|
|
2764
2797
|
endColor: o,
|
|
2765
|
-
startPosition:
|
|
2766
|
-
endPosition:
|
|
2798
|
+
startPosition: i,
|
|
2799
|
+
endPosition: a
|
|
2767
2800
|
},
|
|
2768
2801
|
customData: r,
|
|
2769
2802
|
withoutSave: c
|
|
@@ -2776,7 +2809,7 @@ class q {
|
|
|
2776
2809
|
* @param options.withoutSave - Если true, не сохранять состояние в историю
|
|
2777
2810
|
*/
|
|
2778
2811
|
setImageBackground(n) {
|
|
2779
|
-
return
|
|
2812
|
+
return E(this, arguments, function* ({
|
|
2780
2813
|
imageSource: t,
|
|
2781
2814
|
customData: e = {},
|
|
2782
2815
|
withoutSave: s = !1
|
|
@@ -2826,8 +2859,8 @@ class q {
|
|
|
2826
2859
|
const { canvas: t, montageArea: e, historyManager: s } = this.editor;
|
|
2827
2860
|
if (!e || !this.backgroundObject) return;
|
|
2828
2861
|
s.suspendHistory(), this.editor.transformManager.fitObject({ object: this.backgroundObject, withoutSave: !0, type: "cover" });
|
|
2829
|
-
const n = t.getObjects(), o = n.indexOf(e),
|
|
2830
|
-
this.backgroundObject &&
|
|
2862
|
+
const n = t.getObjects(), o = n.indexOf(e), i = n.indexOf(this.backgroundObject);
|
|
2863
|
+
this.backgroundObject && i !== o + 1 && t.moveObjectTo(this.backgroundObject, o + 1), t.requestRenderAll(), s.resumeHistory();
|
|
2831
2864
|
}
|
|
2832
2865
|
/**
|
|
2833
2866
|
* Создает цветовой фон.
|
|
@@ -2861,7 +2894,7 @@ class q {
|
|
|
2861
2894
|
backgroundType: "gradient",
|
|
2862
2895
|
backgroundId: `background-${x()}`
|
|
2863
2896
|
}, { withoutSelection: !0 }), this.refresh();
|
|
2864
|
-
const e =
|
|
2897
|
+
const e = J._createFabricGradient(t);
|
|
2865
2898
|
this.backgroundObject.set("fill", e), this.editor.canvas.requestRenderAll();
|
|
2866
2899
|
}
|
|
2867
2900
|
/**
|
|
@@ -2869,7 +2902,7 @@ class q {
|
|
|
2869
2902
|
* @param source - источник изображения (URL или File)
|
|
2870
2903
|
*/
|
|
2871
2904
|
_createImageBackground(t, e) {
|
|
2872
|
-
return
|
|
2905
|
+
return E(this, null, function* () {
|
|
2873
2906
|
var n;
|
|
2874
2907
|
const { image: s } = (n = yield this.editor.imageManager.importImage({
|
|
2875
2908
|
source: t,
|
|
@@ -2908,36 +2941,36 @@ class q {
|
|
|
2908
2941
|
endColor: s,
|
|
2909
2942
|
startPosition: n = 0,
|
|
2910
2943
|
endPosition: o = 100
|
|
2911
|
-
} = t,
|
|
2944
|
+
} = t, i = [
|
|
2912
2945
|
{ offset: n / 100, color: e },
|
|
2913
2946
|
{ offset: o / 100, color: s }
|
|
2914
2947
|
];
|
|
2915
2948
|
if (t.type === "linear") {
|
|
2916
|
-
const
|
|
2917
|
-
return new
|
|
2949
|
+
const d = t.angle * Math.PI / 180, u = J._angleToCoords(d);
|
|
2950
|
+
return new Oe({
|
|
2918
2951
|
type: "linear",
|
|
2919
2952
|
gradientUnits: "percentage",
|
|
2920
2953
|
coords: u,
|
|
2921
|
-
colorStops:
|
|
2954
|
+
colorStops: i
|
|
2922
2955
|
});
|
|
2923
2956
|
}
|
|
2924
2957
|
const {
|
|
2925
|
-
centerX:
|
|
2958
|
+
centerX: a = 50,
|
|
2926
2959
|
centerY: r = 50,
|
|
2927
2960
|
radius: c = 50
|
|
2928
|
-
} = t,
|
|
2929
|
-
x1:
|
|
2961
|
+
} = t, l = {
|
|
2962
|
+
x1: a / 100,
|
|
2930
2963
|
y1: r / 100,
|
|
2931
|
-
x2:
|
|
2964
|
+
x2: a / 100,
|
|
2932
2965
|
y2: r / 100,
|
|
2933
2966
|
r1: 0,
|
|
2934
2967
|
r2: c / 100
|
|
2935
2968
|
};
|
|
2936
|
-
return new
|
|
2969
|
+
return new Oe({
|
|
2937
2970
|
type: "radial",
|
|
2938
2971
|
gradientUnits: "percentage",
|
|
2939
|
-
coords:
|
|
2940
|
-
colorStops:
|
|
2972
|
+
coords: l,
|
|
2973
|
+
colorStops: i
|
|
2941
2974
|
});
|
|
2942
2975
|
}
|
|
2943
2976
|
/**
|
|
@@ -2962,9 +2995,9 @@ class q {
|
|
|
2962
2995
|
static _isGradientEqual(t, e) {
|
|
2963
2996
|
if (!t || !e || t.type !== e.type) return !1;
|
|
2964
2997
|
const s = t.colorStops || [], n = e.colorStops || [];
|
|
2965
|
-
return s.length !== n.length || !s.every((
|
|
2966
|
-
const r = n[
|
|
2967
|
-
return
|
|
2998
|
+
return s.length !== n.length || !s.every((i, a) => {
|
|
2999
|
+
const r = n[a];
|
|
3000
|
+
return i.color === r.color && Math.abs(i.offset - r.offset) < 1e-4;
|
|
2968
3001
|
}) ? !1 : t.type === "linear" && e.type === "linear" ? Math.abs(t.coords.x1 - e.coords.x1) < 1e-4 && Math.abs(t.coords.y1 - e.coords.y1) < 1e-4 && Math.abs(t.coords.x2 - e.coords.x2) < 1e-4 && Math.abs(t.coords.y2 - e.coords.y2) < 1e-4 : t.type === "radial" && e.type === "radial" ? Math.abs(t.coords.x1 - e.coords.x1) < 1e-4 && Math.abs(t.coords.y1 - e.coords.y1) < 1e-4 && Math.abs(t.coords.x2 - e.coords.x2) < 1e-4 && Math.abs(t.coords.y2 - e.coords.y2) < 1e-4 && Math.abs(t.coords.r1 - e.coords.r1) < 1e-4 && Math.abs(t.coords.r2 - e.coords.r2) < 1e-4 : !1;
|
|
2969
3002
|
}
|
|
2970
3003
|
}
|
|
@@ -2983,8 +3016,8 @@ class Ct {
|
|
|
2983
3016
|
const { canvas: s, historyManager: n } = this.editor;
|
|
2984
3017
|
n.suspendHistory();
|
|
2985
3018
|
const o = t || s.getActiveObject();
|
|
2986
|
-
o && (o instanceof
|
|
2987
|
-
s.bringObjectToFront(
|
|
3019
|
+
o && (o instanceof N ? o.getObjects().forEach((i) => {
|
|
3020
|
+
s.bringObjectToFront(i);
|
|
2988
3021
|
}) : s.bringObjectToFront(o), s.renderAll(), n.resumeHistory(), e || n.saveState(), s.fire("editor:object-bring-to-front", {
|
|
2989
3022
|
object: o,
|
|
2990
3023
|
withoutSave: e
|
|
@@ -3001,7 +3034,7 @@ class Ct {
|
|
|
3001
3034
|
const { canvas: s, historyManager: n } = this.editor;
|
|
3002
3035
|
n.suspendHistory();
|
|
3003
3036
|
const o = t || s.getActiveObject();
|
|
3004
|
-
o && (o instanceof
|
|
3037
|
+
o && (o instanceof N ? Ct._moveSelectionForward(s, o) : s.bringObjectForward(o), s.renderAll(), n.resumeHistory(), e || n.saveState(), s.fire("editor:object-bring-forward", {
|
|
3005
3038
|
object: o,
|
|
3006
3039
|
withoutSave: e
|
|
3007
3040
|
}));
|
|
@@ -3018,19 +3051,19 @@ class Ct {
|
|
|
3018
3051
|
canvas: s,
|
|
3019
3052
|
montageArea: n,
|
|
3020
3053
|
historyManager: o,
|
|
3021
|
-
interactionBlocker: { overlayMask:
|
|
3022
|
-
backgroundManager: { backgroundObject:
|
|
3054
|
+
interactionBlocker: { overlayMask: i },
|
|
3055
|
+
backgroundManager: { backgroundObject: a }
|
|
3023
3056
|
} = this.editor;
|
|
3024
3057
|
o.suspendHistory();
|
|
3025
3058
|
const r = t || s.getActiveObject();
|
|
3026
3059
|
if (r) {
|
|
3027
|
-
if (r instanceof
|
|
3060
|
+
if (r instanceof N) {
|
|
3028
3061
|
const c = r.getObjects();
|
|
3029
|
-
for (let
|
|
3030
|
-
s.sendObjectToBack(c[
|
|
3062
|
+
for (let l = c.length - 1; l >= 0; l -= 1)
|
|
3063
|
+
s.sendObjectToBack(c[l]);
|
|
3031
3064
|
} else
|
|
3032
3065
|
s.sendObjectToBack(r);
|
|
3033
|
-
|
|
3066
|
+
a && s.sendObjectToBack(a), s.sendObjectToBack(n), i && s.sendObjectToBack(i), s.renderAll(), o.resumeHistory(), e || o.saveState(), s.fire("editor:object-send-to-back", {
|
|
3034
3067
|
object: r,
|
|
3035
3068
|
withoutSave: e
|
|
3036
3069
|
});
|
|
@@ -3047,12 +3080,12 @@ class Ct {
|
|
|
3047
3080
|
canvas: s,
|
|
3048
3081
|
montageArea: n,
|
|
3049
3082
|
historyManager: o,
|
|
3050
|
-
interactionBlocker: { overlayMask:
|
|
3051
|
-
backgroundManager: { backgroundObject:
|
|
3083
|
+
interactionBlocker: { overlayMask: i },
|
|
3084
|
+
backgroundManager: { backgroundObject: a }
|
|
3052
3085
|
} = this.editor;
|
|
3053
3086
|
o.suspendHistory();
|
|
3054
3087
|
const r = t || s.getActiveObject();
|
|
3055
|
-
r && (r instanceof
|
|
3088
|
+
r && (r instanceof N ? Ct._moveSelectionBackwards(s, r) : s.sendObjectBackwards(r), a && s.sendObjectToBack(a), s.sendObjectToBack(n), i && s.sendObjectToBack(i), s.renderAll(), o.resumeHistory(), e || o.saveState(), s.fire("editor:object-send-backwards", {
|
|
3056
3089
|
object: r,
|
|
3057
3090
|
withoutSave: e
|
|
3058
3091
|
}));
|
|
@@ -3065,15 +3098,15 @@ class Ct {
|
|
|
3065
3098
|
*/
|
|
3066
3099
|
static _moveSelectionForward(t, e) {
|
|
3067
3100
|
const s = t.getObjects(), n = e.getObjects();
|
|
3068
|
-
if (!n.some((
|
|
3069
|
-
const r = s.indexOf(
|
|
3101
|
+
if (!n.some((a) => {
|
|
3102
|
+
const r = s.indexOf(a);
|
|
3070
3103
|
for (let c = r + 1; c < s.length; c += 1)
|
|
3071
3104
|
if (!n.includes(s[c]))
|
|
3072
3105
|
return !0;
|
|
3073
3106
|
return !1;
|
|
3074
3107
|
})) return;
|
|
3075
|
-
n.map((
|
|
3076
|
-
t.bringObjectForward(
|
|
3108
|
+
n.map((a) => ({ obj: a, index: s.indexOf(a) })).sort((a, r) => r.index - a.index).forEach((a) => {
|
|
3109
|
+
t.bringObjectForward(a.obj);
|
|
3077
3110
|
});
|
|
3078
3111
|
}
|
|
3079
3112
|
/**
|
|
@@ -3084,19 +3117,19 @@ class Ct {
|
|
|
3084
3117
|
*/
|
|
3085
3118
|
static _moveSelectionBackwards(t, e) {
|
|
3086
3119
|
const s = t.getObjects(), n = e.getObjects();
|
|
3087
|
-
if (!n.some((
|
|
3088
|
-
const r = s.indexOf(
|
|
3120
|
+
if (!n.some((a) => {
|
|
3121
|
+
const r = s.indexOf(a);
|
|
3089
3122
|
for (let c = r - 1; c >= 0; c -= 1)
|
|
3090
3123
|
if (!n.includes(s[c]))
|
|
3091
3124
|
return !0;
|
|
3092
3125
|
return !1;
|
|
3093
3126
|
})) return;
|
|
3094
|
-
n.map((
|
|
3095
|
-
t.sendObjectBackwards(
|
|
3127
|
+
n.map((a) => ({ obj: a, index: s.indexOf(a) })).sort((a, r) => a.index - r.index).forEach((a) => {
|
|
3128
|
+
t.sendObjectBackwards(a.obj);
|
|
3096
3129
|
});
|
|
3097
3130
|
}
|
|
3098
3131
|
}
|
|
3099
|
-
class
|
|
3132
|
+
class Ts {
|
|
3100
3133
|
/**
|
|
3101
3134
|
* Менеджер фигур для редактора.
|
|
3102
3135
|
* @param options - Опции и настройки менеджера фигур.
|
|
@@ -3120,15 +3153,15 @@ class Es {
|
|
|
3120
3153
|
* @param flags.withoutSelection - Не выделять объект
|
|
3121
3154
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
3122
3155
|
*/
|
|
3123
|
-
addRectangle(
|
|
3124
|
-
var
|
|
3156
|
+
addRectangle(l = {}, { withoutSelection: r, withoutAdding: c } = {}) {
|
|
3157
|
+
var d = l, {
|
|
3125
3158
|
id: t = `rect-${x()}`,
|
|
3126
3159
|
left: e,
|
|
3127
3160
|
top: s,
|
|
3128
3161
|
width: n = 100,
|
|
3129
3162
|
height: o = 100,
|
|
3130
|
-
fill:
|
|
3131
|
-
} =
|
|
3163
|
+
fill: i = "blue"
|
|
3164
|
+
} = d, a = X(d, [
|
|
3132
3165
|
"id",
|
|
3133
3166
|
"left",
|
|
3134
3167
|
"top",
|
|
@@ -3136,14 +3169,14 @@ class Es {
|
|
|
3136
3169
|
"height",
|
|
3137
3170
|
"fill"
|
|
3138
3171
|
]);
|
|
3139
|
-
const { canvas: u } = this.editor, g = new
|
|
3172
|
+
const { canvas: u } = this.editor, g = new Ze(T({
|
|
3140
3173
|
id: t,
|
|
3141
3174
|
left: e,
|
|
3142
3175
|
top: s,
|
|
3143
3176
|
width: n,
|
|
3144
3177
|
height: o,
|
|
3145
|
-
fill:
|
|
3146
|
-
},
|
|
3178
|
+
fill: i
|
|
3179
|
+
}, a));
|
|
3147
3180
|
return !e && !s && u.centerObject(g), c || (u.add(g), r || u.setActiveObject(g), u.renderAll()), g;
|
|
3148
3181
|
}
|
|
3149
3182
|
/**
|
|
@@ -3162,28 +3195,28 @@ class Es {
|
|
|
3162
3195
|
* @param flags.withoutSelection - Не выделять объект
|
|
3163
3196
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
3164
3197
|
*/
|
|
3165
|
-
addCircle(c = {}, { withoutSelection:
|
|
3166
|
-
var
|
|
3198
|
+
addCircle(c = {}, { withoutSelection: a, withoutAdding: r } = {}) {
|
|
3199
|
+
var l = c, {
|
|
3167
3200
|
id: t = `circle-${x()}`,
|
|
3168
3201
|
left: e,
|
|
3169
3202
|
top: s,
|
|
3170
3203
|
radius: n = 50,
|
|
3171
3204
|
fill: o = "green"
|
|
3172
|
-
} =
|
|
3205
|
+
} = l, i = X(l, [
|
|
3173
3206
|
"id",
|
|
3174
3207
|
"left",
|
|
3175
3208
|
"top",
|
|
3176
3209
|
"radius",
|
|
3177
3210
|
"fill"
|
|
3178
3211
|
]);
|
|
3179
|
-
const { canvas:
|
|
3212
|
+
const { canvas: d } = this.editor, u = new Pe(T({
|
|
3180
3213
|
id: t,
|
|
3181
3214
|
left: e,
|
|
3182
3215
|
top: s,
|
|
3183
3216
|
fill: o,
|
|
3184
3217
|
radius: n
|
|
3185
|
-
},
|
|
3186
|
-
return !e && !s &&
|
|
3218
|
+
}, i));
|
|
3219
|
+
return !e && !s && d.centerObject(u), r || (d.add(u), a || d.setActiveObject(u), d.renderAll()), u;
|
|
3187
3220
|
}
|
|
3188
3221
|
/**
|
|
3189
3222
|
* Добавление треугольника
|
|
@@ -3202,15 +3235,15 @@ class Es {
|
|
|
3202
3235
|
* @param flags.withoutSelection - Не выделять объект
|
|
3203
3236
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
3204
3237
|
*/
|
|
3205
|
-
addTriangle(
|
|
3206
|
-
var
|
|
3238
|
+
addTriangle(l = {}, { withoutSelection: r, withoutAdding: c } = {}) {
|
|
3239
|
+
var d = l, {
|
|
3207
3240
|
id: t = `triangle-${x()}`,
|
|
3208
3241
|
left: e,
|
|
3209
3242
|
top: s,
|
|
3210
3243
|
width: n = 100,
|
|
3211
3244
|
height: o = 100,
|
|
3212
|
-
fill:
|
|
3213
|
-
} =
|
|
3245
|
+
fill: i = "yellow"
|
|
3246
|
+
} = d, a = X(d, [
|
|
3214
3247
|
"id",
|
|
3215
3248
|
"left",
|
|
3216
3249
|
"top",
|
|
@@ -3218,18 +3251,18 @@ class Es {
|
|
|
3218
3251
|
"height",
|
|
3219
3252
|
"fill"
|
|
3220
3253
|
]);
|
|
3221
|
-
const { canvas: u } = this.editor, g = new
|
|
3254
|
+
const { canvas: u } = this.editor, g = new Ve(T({
|
|
3222
3255
|
id: t,
|
|
3223
3256
|
left: e,
|
|
3224
3257
|
top: s,
|
|
3225
|
-
fill:
|
|
3258
|
+
fill: i,
|
|
3226
3259
|
width: n,
|
|
3227
3260
|
height: o
|
|
3228
|
-
},
|
|
3261
|
+
}, a));
|
|
3229
3262
|
return !e && !s && u.centerObject(g), c || (u.add(g), r || u.setActiveObject(g), u.renderAll()), g;
|
|
3230
3263
|
}
|
|
3231
3264
|
}
|
|
3232
|
-
class
|
|
3265
|
+
class Ns {
|
|
3233
3266
|
/**
|
|
3234
3267
|
* @param options
|
|
3235
3268
|
* @param options.editor - экземпляр редактора с доступом к canvas
|
|
@@ -3257,7 +3290,7 @@ class Ds {
|
|
|
3257
3290
|
* Асинхронное клонирование для внутреннего буфера
|
|
3258
3291
|
*/
|
|
3259
3292
|
_cloneToInternalClipboard(t) {
|
|
3260
|
-
return
|
|
3293
|
+
return E(this, null, function* () {
|
|
3261
3294
|
const { canvas: e, errorManager: s } = this.editor;
|
|
3262
3295
|
try {
|
|
3263
3296
|
const n = yield t.clone(jt);
|
|
@@ -3277,7 +3310,7 @@ class Ds {
|
|
|
3277
3310
|
* Копирование в системный буфер обмена
|
|
3278
3311
|
*/
|
|
3279
3312
|
_copyToSystemClipboard(t) {
|
|
3280
|
-
return
|
|
3313
|
+
return E(this, null, function* () {
|
|
3281
3314
|
const { errorManager: e } = this.editor;
|
|
3282
3315
|
if (typeof ClipboardItem == "undefined" || !navigator.clipboard)
|
|
3283
3316
|
return e.emitWarning({
|
|
@@ -3304,13 +3337,13 @@ class Ds {
|
|
|
3304
3337
|
* Копирование изображения в буфер обмена
|
|
3305
3338
|
*/
|
|
3306
3339
|
_copyImageToClipboard(t, e) {
|
|
3307
|
-
return
|
|
3340
|
+
return E(this, null, function* () {
|
|
3308
3341
|
try {
|
|
3309
|
-
const n = t.toCanvasElement({ enableRetinaScaling: !1 }).toDataURL(), o = n.slice(5).split(";")[0],
|
|
3310
|
-
for (let
|
|
3311
|
-
r[
|
|
3312
|
-
const c = new Blob([r.buffer], { type: o }),
|
|
3313
|
-
return yield navigator.clipboard.write([
|
|
3342
|
+
const n = t.toCanvasElement({ enableRetinaScaling: !1 }).toDataURL(), o = n.slice(5).split(";")[0], i = n.split(",")[1], a = atob(i), r = new Uint8Array(a.length);
|
|
3343
|
+
for (let d = 0; d < a.length; d += 1)
|
|
3344
|
+
r[d] = a.charCodeAt(d);
|
|
3345
|
+
const c = new Blob([r.buffer], { type: o }), l = new ClipboardItem({ [o]: c });
|
|
3346
|
+
return yield navigator.clipboard.write([l]), console.info("Image copied to clipboard successfully"), !0;
|
|
3314
3347
|
} catch (s) {
|
|
3315
3348
|
return this.editor.errorManager.emitWarning({
|
|
3316
3349
|
origin: "ClipboardManager",
|
|
@@ -3326,9 +3359,9 @@ class Ds {
|
|
|
3326
3359
|
* Копирование текста в буфер обмена
|
|
3327
3360
|
*/
|
|
3328
3361
|
_copyTextToClipboard(t) {
|
|
3329
|
-
return
|
|
3362
|
+
return E(this, null, function* () {
|
|
3330
3363
|
try {
|
|
3331
|
-
const e = `${
|
|
3364
|
+
const e = `${xe}${t}`;
|
|
3332
3365
|
return yield navigator.clipboard.writeText(e), console.info("Text copied to clipboard successfully"), !0;
|
|
3333
3366
|
} catch (e) {
|
|
3334
3367
|
const { errorManager: s } = this.editor;
|
|
@@ -3348,7 +3381,7 @@ class Ds {
|
|
|
3348
3381
|
*/
|
|
3349
3382
|
_addClonedObjectToCanvas(t) {
|
|
3350
3383
|
const { canvas: e, historyManager: s } = this.editor;
|
|
3351
|
-
if (e.discardActiveObject(), t instanceof
|
|
3384
|
+
if (e.discardActiveObject(), t instanceof N) {
|
|
3352
3385
|
s.suspendHistory(), t.canvas = e, t.forEachObject((n) => {
|
|
3353
3386
|
e.add(n);
|
|
3354
3387
|
}), e.setActiveObject(t), e.requestRenderAll(), s.resumeHistory(), s.saveState();
|
|
@@ -3361,7 +3394,7 @@ class Ds {
|
|
|
3361
3394
|
* @param source - источник изображения (data URL или URL)
|
|
3362
3395
|
*/
|
|
3363
3396
|
_handleImageImport(t) {
|
|
3364
|
-
return
|
|
3397
|
+
return E(this, null, function* () {
|
|
3365
3398
|
var s;
|
|
3366
3399
|
const { image: e } = (s = yield this.editor.imageManager.importImage({
|
|
3367
3400
|
source: t,
|
|
@@ -3377,12 +3410,12 @@ class Ds {
|
|
|
3377
3410
|
* @fires editor:object-pasted
|
|
3378
3411
|
*/
|
|
3379
3412
|
copyPaste(t) {
|
|
3380
|
-
return
|
|
3413
|
+
return E(this, null, function* () {
|
|
3381
3414
|
const { canvas: e } = this.editor, s = t || e.getActiveObject();
|
|
3382
3415
|
if (!s || s.locked) return !1;
|
|
3383
3416
|
try {
|
|
3384
3417
|
const n = yield s.clone(jt);
|
|
3385
|
-
return n instanceof
|
|
3418
|
+
return n instanceof N && n.forEachObject((o) => {
|
|
3386
3419
|
o.set({
|
|
3387
3420
|
id: `${o.type}-${x()}`,
|
|
3388
3421
|
evented: !0
|
|
@@ -3412,38 +3445,38 @@ class Ds {
|
|
|
3412
3445
|
* @param event.clipboardData.items — элементы буфера обмена
|
|
3413
3446
|
*/
|
|
3414
3447
|
handlePasteEvent(e) {
|
|
3415
|
-
return
|
|
3448
|
+
return E(this, arguments, function* ({ clipboardData: t }) {
|
|
3416
3449
|
var r;
|
|
3417
3450
|
if (!((r = t == null ? void 0 : t.items) != null && r.length)) {
|
|
3418
3451
|
this.paste();
|
|
3419
3452
|
return;
|
|
3420
3453
|
}
|
|
3421
3454
|
const s = t.getData("text/plain");
|
|
3422
|
-
if (s && s.startsWith(
|
|
3455
|
+
if (s && s.startsWith(xe)) {
|
|
3423
3456
|
this.paste();
|
|
3424
3457
|
return;
|
|
3425
3458
|
}
|
|
3426
|
-
const { items: n } = t, o = n[n.length - 1],
|
|
3427
|
-
if (o.type !== "text/html" &&
|
|
3459
|
+
const { items: n } = t, o = n[n.length - 1], i = o.getAsFile();
|
|
3460
|
+
if (o.type !== "text/html" && i) {
|
|
3428
3461
|
const c = new FileReader();
|
|
3429
|
-
c.onload = (
|
|
3430
|
-
|
|
3462
|
+
c.onload = (l) => {
|
|
3463
|
+
l.target && this._handleImageImport(l.target.result).catch((d) => {
|
|
3431
3464
|
this.editor.errorManager.emitError({
|
|
3432
3465
|
origin: "ClipboardManager",
|
|
3433
3466
|
method: "handlePasteEvent",
|
|
3434
3467
|
code: "PASTE_IMAGE_FAILED",
|
|
3435
3468
|
message: "Ошибка вставки изображения из буфера обмена",
|
|
3436
|
-
data:
|
|
3469
|
+
data: d
|
|
3437
3470
|
});
|
|
3438
3471
|
});
|
|
3439
|
-
}, c.readAsDataURL(
|
|
3472
|
+
}, c.readAsDataURL(i);
|
|
3440
3473
|
return;
|
|
3441
3474
|
}
|
|
3442
|
-
const
|
|
3443
|
-
if (
|
|
3444
|
-
const
|
|
3445
|
-
if (
|
|
3446
|
-
this._handleImageImport(
|
|
3475
|
+
const a = t.getData("text/html");
|
|
3476
|
+
if (a) {
|
|
3477
|
+
const d = new DOMParser().parseFromString(a, "text/html").querySelector("img");
|
|
3478
|
+
if (d != null && d.src) {
|
|
3479
|
+
this._handleImageImport(d.src).catch((u) => {
|
|
3447
3480
|
this.editor.errorManager.emitError({
|
|
3448
3481
|
origin: "ClipboardManager",
|
|
3449
3482
|
method: "handlePasteEvent",
|
|
@@ -3463,12 +3496,12 @@ class Ds {
|
|
|
3463
3496
|
* @fires editor:object-pasted
|
|
3464
3497
|
*/
|
|
3465
3498
|
paste() {
|
|
3466
|
-
return
|
|
3499
|
+
return E(this, null, function* () {
|
|
3467
3500
|
const { canvas: t } = this.editor;
|
|
3468
3501
|
if (!this.clipboard) return !1;
|
|
3469
3502
|
try {
|
|
3470
3503
|
const e = yield this.clipboard.clone(jt);
|
|
3471
|
-
return t.discardActiveObject(), e instanceof
|
|
3504
|
+
return t.discardActiveObject(), e instanceof N && e.forEachObject((s) => {
|
|
3472
3505
|
s.set({
|
|
3473
3506
|
id: `${s.type}-${x()}`,
|
|
3474
3507
|
evented: !0
|
|
@@ -3505,9 +3538,9 @@ class wt {
|
|
|
3505
3538
|
* @fires editor:object-locked
|
|
3506
3539
|
*/
|
|
3507
3540
|
lockObject({ object: t, skipInnerObjects: e, withoutSave: s } = {}) {
|
|
3508
|
-
const { canvas: n, historyManager: o } = this.editor,
|
|
3509
|
-
if (!
|
|
3510
|
-
const
|
|
3541
|
+
const { canvas: n, historyManager: o } = this.editor, i = t || n.getActiveObject();
|
|
3542
|
+
if (!i || i.locked) return;
|
|
3543
|
+
const a = {
|
|
3511
3544
|
lockMovementX: !0,
|
|
3512
3545
|
lockMovementY: !0,
|
|
3513
3546
|
lockRotation: !0,
|
|
@@ -3518,10 +3551,10 @@ class wt {
|
|
|
3518
3551
|
editable: !1,
|
|
3519
3552
|
locked: !0
|
|
3520
3553
|
};
|
|
3521
|
-
|
|
3522
|
-
c.set(
|
|
3554
|
+
i.set(a), !e && wt._isGroupOrSelection(i) && i.getObjects().forEach((c) => {
|
|
3555
|
+
c.set(a);
|
|
3523
3556
|
}), n.renderAll(), s || o.saveState(), n.fire("editor:object-locked", {
|
|
3524
|
-
object:
|
|
3557
|
+
object: i,
|
|
3525
3558
|
skipInnerObjects: e,
|
|
3526
3559
|
withoutSave: s
|
|
3527
3560
|
});
|
|
@@ -3536,7 +3569,7 @@ class wt {
|
|
|
3536
3569
|
unlockObject({ object: t, withoutSave: e } = {}) {
|
|
3537
3570
|
const { canvas: s, historyManager: n } = this.editor, o = t || s.getActiveObject();
|
|
3538
3571
|
if (!o) return;
|
|
3539
|
-
const
|
|
3572
|
+
const i = {
|
|
3540
3573
|
lockMovementX: !1,
|
|
3541
3574
|
lockMovementY: !1,
|
|
3542
3575
|
lockRotation: !1,
|
|
@@ -3547,18 +3580,18 @@ class wt {
|
|
|
3547
3580
|
editable: !0,
|
|
3548
3581
|
locked: !1
|
|
3549
3582
|
};
|
|
3550
|
-
o.set(
|
|
3551
|
-
|
|
3583
|
+
o.set(i), wt._isGroupOrSelection(o) && o.getObjects().forEach((a) => {
|
|
3584
|
+
a.set(i);
|
|
3552
3585
|
}), s.renderAll(), e || n.saveState(), s.fire("editor:object-unlocked", {
|
|
3553
3586
|
object: o,
|
|
3554
3587
|
withoutSave: e
|
|
3555
3588
|
});
|
|
3556
3589
|
}
|
|
3557
3590
|
static _isGroupOrSelection(t) {
|
|
3558
|
-
return t instanceof
|
|
3591
|
+
return t instanceof N || t instanceof $;
|
|
3559
3592
|
}
|
|
3560
3593
|
}
|
|
3561
|
-
class
|
|
3594
|
+
class Ls {
|
|
3562
3595
|
constructor({ editor: t }) {
|
|
3563
3596
|
this.editor = t;
|
|
3564
3597
|
}
|
|
@@ -3570,7 +3603,7 @@ class Os {
|
|
|
3570
3603
|
if (Array.isArray(t))
|
|
3571
3604
|
return t.length > 0 ? t : null;
|
|
3572
3605
|
const e = t || this.editor.canvas.getActiveObject();
|
|
3573
|
-
return !e || !(e instanceof
|
|
3606
|
+
return !e || !(e instanceof N) ? null : e.getObjects();
|
|
3574
3607
|
}
|
|
3575
3608
|
/**
|
|
3576
3609
|
* Получить группы для разгруппировки
|
|
@@ -3578,20 +3611,20 @@ class Os {
|
|
|
3578
3611
|
*/
|
|
3579
3612
|
_getGroupsToUngroup(t) {
|
|
3580
3613
|
if (Array.isArray(t)) {
|
|
3581
|
-
const s = t.filter((n) => n instanceof
|
|
3614
|
+
const s = t.filter((n) => n instanceof $);
|
|
3582
3615
|
return s.length > 0 ? s : null;
|
|
3583
3616
|
}
|
|
3584
|
-
if (t instanceof
|
|
3585
|
-
const s = t.getObjects().filter((n) => n instanceof
|
|
3617
|
+
if (t instanceof N) {
|
|
3618
|
+
const s = t.getObjects().filter((n) => n instanceof $);
|
|
3586
3619
|
return s.length > 0 ? s : null;
|
|
3587
3620
|
}
|
|
3588
3621
|
const e = t || this.editor.canvas.getActiveObject();
|
|
3589
3622
|
if (!e) return null;
|
|
3590
|
-
if (e instanceof
|
|
3591
|
-
const s = e.getObjects().filter((n) => n instanceof
|
|
3623
|
+
if (e instanceof N) {
|
|
3624
|
+
const s = e.getObjects().filter((n) => n instanceof $);
|
|
3592
3625
|
return s.length > 0 ? s : null;
|
|
3593
3626
|
}
|
|
3594
|
-
return e instanceof
|
|
3627
|
+
return e instanceof $ ? [e] : null;
|
|
3595
3628
|
}
|
|
3596
3629
|
/**
|
|
3597
3630
|
* Группировка объектов
|
|
@@ -3608,15 +3641,15 @@ class Os {
|
|
|
3608
3641
|
if (!o) return null;
|
|
3609
3642
|
try {
|
|
3610
3643
|
n.suspendHistory();
|
|
3611
|
-
const
|
|
3644
|
+
const i = new $(o, {
|
|
3612
3645
|
id: `group-${x()}`
|
|
3613
3646
|
});
|
|
3614
|
-
o.forEach((r) => s.remove(r)), s.add(
|
|
3615
|
-
const
|
|
3616
|
-
group:
|
|
3647
|
+
o.forEach((r) => s.remove(r)), s.add(i), s.setActiveObject(i), s.requestRenderAll();
|
|
3648
|
+
const a = {
|
|
3649
|
+
group: i,
|
|
3617
3650
|
withoutSave: e
|
|
3618
3651
|
};
|
|
3619
|
-
return s.fire("editor:objects-grouped",
|
|
3652
|
+
return s.fire("editor:objects-grouped", a), a;
|
|
3620
3653
|
} finally {
|
|
3621
3654
|
n.resumeHistory(), e || n.saveState();
|
|
3622
3655
|
}
|
|
@@ -3637,20 +3670,20 @@ class Os {
|
|
|
3637
3670
|
if (!o) return null;
|
|
3638
3671
|
try {
|
|
3639
3672
|
n.suspendHistory();
|
|
3640
|
-
const
|
|
3673
|
+
const i = [];
|
|
3641
3674
|
o.forEach((c) => {
|
|
3642
|
-
const
|
|
3643
|
-
s.remove(c),
|
|
3644
|
-
s.add(
|
|
3675
|
+
const l = c.removeAll();
|
|
3676
|
+
s.remove(c), l.forEach((d) => {
|
|
3677
|
+
s.add(d), i.push(d);
|
|
3645
3678
|
});
|
|
3646
3679
|
});
|
|
3647
|
-
const
|
|
3680
|
+
const a = new N(i, {
|
|
3648
3681
|
canvas: s
|
|
3649
3682
|
});
|
|
3650
|
-
s.setActiveObject(
|
|
3683
|
+
s.setActiveObject(a), s.requestRenderAll();
|
|
3651
3684
|
const r = {
|
|
3652
|
-
selection:
|
|
3653
|
-
ungroupedObjects:
|
|
3685
|
+
selection: a,
|
|
3686
|
+
ungroupedObjects: i,
|
|
3654
3687
|
withoutSave: e
|
|
3655
3688
|
};
|
|
3656
3689
|
return s.fire("editor:objects-ungrouped", r), r;
|
|
@@ -3659,7 +3692,7 @@ class Os {
|
|
|
3659
3692
|
}
|
|
3660
3693
|
}
|
|
3661
3694
|
}
|
|
3662
|
-
class
|
|
3695
|
+
class ks {
|
|
3663
3696
|
constructor({ editor: t }) {
|
|
3664
3697
|
this.editor = t;
|
|
3665
3698
|
}
|
|
@@ -3670,11 +3703,11 @@ class Ts {
|
|
|
3670
3703
|
selectAll() {
|
|
3671
3704
|
const { canvas: t, canvasManager: e, objectLockManager: s } = this.editor;
|
|
3672
3705
|
t.discardActiveObject();
|
|
3673
|
-
const n = e.getObjects(), o = n.some((
|
|
3674
|
-
o && s.lockObject({ object:
|
|
3706
|
+
const n = e.getObjects(), o = n.some((a) => a.locked), i = n.length > 1 ? new N(e.getObjects(), { canvas: t }) : n[0];
|
|
3707
|
+
o && s.lockObject({ object: i, skipInnerObjects: !0, withoutSave: !0 }), t.setActiveObject(i), t.requestRenderAll(), t.fire("editor:all-objects-selected", { selected: i });
|
|
3675
3708
|
}
|
|
3676
3709
|
}
|
|
3677
|
-
class
|
|
3710
|
+
class Yt {
|
|
3678
3711
|
constructor({ editor: t }) {
|
|
3679
3712
|
this.editor = t;
|
|
3680
3713
|
}
|
|
@@ -3716,17 +3749,17 @@ class zt {
|
|
|
3716
3749
|
withoutSave: e = !1,
|
|
3717
3750
|
_isRecursiveCall: s = !1
|
|
3718
3751
|
} = {}) {
|
|
3719
|
-
const { canvas: n, historyManager: o } = this.editor,
|
|
3720
|
-
if (!(
|
|
3752
|
+
const { canvas: n, historyManager: o } = this.editor, a = (t || n.getActiveObjects()).filter((l) => !l.locked);
|
|
3753
|
+
if (!(a != null && a.length)) return null;
|
|
3721
3754
|
s || o.suspendHistory();
|
|
3722
3755
|
const r = [];
|
|
3723
|
-
if (
|
|
3724
|
-
if (
|
|
3725
|
-
const
|
|
3726
|
-
r.push(...
|
|
3756
|
+
if (a.forEach((l) => {
|
|
3757
|
+
if (Yt._isUngroupableGroup(l)) {
|
|
3758
|
+
const d = this._handleGroupDeletion(l);
|
|
3759
|
+
r.push(...d);
|
|
3727
3760
|
return;
|
|
3728
3761
|
}
|
|
3729
|
-
n.remove(
|
|
3762
|
+
n.remove(l), r.push(l);
|
|
3730
3763
|
}), s) return null;
|
|
3731
3764
|
n.discardActiveObject(), n.renderAll(), o.resumeHistory(), e || o.saveState();
|
|
3732
3765
|
const c = {
|
|
@@ -3736,7 +3769,7 @@ class zt {
|
|
|
3736
3769
|
return n.fire("editor:objects-deleted", c), c;
|
|
3737
3770
|
}
|
|
3738
3771
|
}
|
|
3739
|
-
const
|
|
3772
|
+
const xs = {
|
|
3740
3773
|
IMAGE_MANAGER: {
|
|
3741
3774
|
/**
|
|
3742
3775
|
* Некорректный Content-Type изображения
|
|
@@ -3867,18 +3900,18 @@ class Et {
|
|
|
3867
3900
|
return;
|
|
3868
3901
|
}
|
|
3869
3902
|
if (!s) return;
|
|
3870
|
-
const
|
|
3871
|
-
console.error(`${t}. ${e}. ${s}. ${
|
|
3872
|
-
const
|
|
3903
|
+
const i = o || s;
|
|
3904
|
+
console.error(`${t}. ${e}. ${s}. ${i}`, n);
|
|
3905
|
+
const a = {
|
|
3873
3906
|
code: s,
|
|
3874
3907
|
origin: t,
|
|
3875
3908
|
method: e,
|
|
3876
|
-
message:
|
|
3909
|
+
message: i,
|
|
3877
3910
|
data: n
|
|
3878
3911
|
};
|
|
3879
|
-
this._buffer.push(
|
|
3912
|
+
this._buffer.push(T({
|
|
3880
3913
|
type: "editor:error"
|
|
3881
|
-
},
|
|
3914
|
+
}, a)), this.editor.canvas.fire("editor:error", a);
|
|
3882
3915
|
}
|
|
3883
3916
|
/**
|
|
3884
3917
|
* Эмитит предупреждение через fabricjs
|
|
@@ -3895,18 +3928,18 @@ class Et {
|
|
|
3895
3928
|
console.warn("Неизвестный код предупреждения: ", { code: s, origin: t, method: e });
|
|
3896
3929
|
return;
|
|
3897
3930
|
}
|
|
3898
|
-
const
|
|
3899
|
-
console.warn(`${t}. ${e}. ${s}. ${
|
|
3900
|
-
const
|
|
3931
|
+
const i = n || s;
|
|
3932
|
+
console.warn(`${t}. ${e}. ${s}. ${i}`, o);
|
|
3933
|
+
const a = {
|
|
3901
3934
|
code: s,
|
|
3902
3935
|
origin: t,
|
|
3903
3936
|
method: e,
|
|
3904
|
-
message:
|
|
3937
|
+
message: i,
|
|
3905
3938
|
data: o
|
|
3906
3939
|
};
|
|
3907
|
-
this._buffer.push(
|
|
3940
|
+
this._buffer.push(T({
|
|
3908
3941
|
type: "editor:warning"
|
|
3909
|
-
},
|
|
3942
|
+
}, a)), this.editor.canvas.fire("editor:warning", a);
|
|
3910
3943
|
}
|
|
3911
3944
|
/**
|
|
3912
3945
|
* Проверяет, является ли код ошибки или предупреждения допустимым
|
|
@@ -3914,10 +3947,10 @@ class Et {
|
|
|
3914
3947
|
* @returns true, если код допустим, иначе false
|
|
3915
3948
|
*/
|
|
3916
3949
|
static isValidErrorCode(t) {
|
|
3917
|
-
return t ? Object.values(
|
|
3950
|
+
return t ? Object.values(xs).some((e) => Object.values(e).includes(t)) : !1;
|
|
3918
3951
|
}
|
|
3919
3952
|
}
|
|
3920
|
-
class
|
|
3953
|
+
class _s {
|
|
3921
3954
|
constructor({ editor: t }) {
|
|
3922
3955
|
this.currentBounds = null, this.editor = t;
|
|
3923
3956
|
}
|
|
@@ -3939,7 +3972,7 @@ class Ls {
|
|
|
3939
3972
|
maxY: 0,
|
|
3940
3973
|
canPan: !1
|
|
3941
3974
|
};
|
|
3942
|
-
const
|
|
3975
|
+
const i = e.width * o, a = e.height * o, r = i / 2, c = a / 2;
|
|
3943
3976
|
return {
|
|
3944
3977
|
minX: -r,
|
|
3945
3978
|
maxX: r,
|
|
@@ -3967,13 +4000,13 @@ class Ls {
|
|
|
3967
4000
|
constrainPan(t, e) {
|
|
3968
4001
|
if (!this.currentBounds || !this.currentBounds.canPan)
|
|
3969
4002
|
return { x: 0, y: 0 };
|
|
3970
|
-
const { canvas: s, montageArea: n } = this.editor, o = s.getZoom(),
|
|
4003
|
+
const { canvas: s, montageArea: n } = this.editor, o = s.getZoom(), i = n.left, a = n.top, r = s.getWidth() / 2, c = s.getHeight() / 2, l = i * o + t - r, d = a * o + e - c, u = Math.max(
|
|
3971
4004
|
this.currentBounds.minX,
|
|
3972
|
-
Math.min(this.currentBounds.maxX,
|
|
4005
|
+
Math.min(this.currentBounds.maxX, l)
|
|
3973
4006
|
), g = Math.max(
|
|
3974
4007
|
this.currentBounds.minY,
|
|
3975
|
-
Math.min(this.currentBounds.maxY,
|
|
3976
|
-
), f = u + r -
|
|
4008
|
+
Math.min(this.currentBounds.maxY, d)
|
|
4009
|
+
), f = u + r - i * o, m = g + c - a * o;
|
|
3977
4010
|
return {
|
|
3978
4011
|
x: f,
|
|
3979
4012
|
y: m
|
|
@@ -3991,8 +4024,8 @@ class Ls {
|
|
|
3991
4024
|
* @returns Объект с координатами смещения
|
|
3992
4025
|
*/
|
|
3993
4026
|
getCurrentOffset() {
|
|
3994
|
-
const { canvas: t, montageArea: e } = this.editor, s = t.getZoom(), n = t.viewportTransform, o = e.left,
|
|
3995
|
-
return { x: c, y:
|
|
4027
|
+
const { canvas: t, montageArea: e } = this.editor, s = t.getZoom(), n = t.viewportTransform, o = e.left, i = e.top, a = t.getWidth() / 2, r = t.getHeight() / 2, c = o * s + n[4] - a, l = i * s + n[5] - r;
|
|
4028
|
+
return { x: c, y: l };
|
|
3996
4029
|
}
|
|
3997
4030
|
/**
|
|
3998
4031
|
* Обновить границы перетаскивания.
|
|
@@ -4002,8 +4035,8 @@ class Ls {
|
|
|
4002
4035
|
this.currentBounds = this.calculatePanBounds();
|
|
4003
4036
|
}
|
|
4004
4037
|
}
|
|
4005
|
-
const
|
|
4006
|
-
class
|
|
4038
|
+
const Dt = 0.01;
|
|
4039
|
+
class D {
|
|
4007
4040
|
constructor({ editor: t }) {
|
|
4008
4041
|
var e;
|
|
4009
4042
|
this._handleTextEditingEntered = () => {
|
|
@@ -4011,23 +4044,23 @@ class O {
|
|
|
4011
4044
|
}, this._handleTextChanged = (s) => {
|
|
4012
4045
|
var r, c;
|
|
4013
4046
|
const { target: n } = s;
|
|
4014
|
-
if (!
|
|
4015
|
-
const o = (r = n.text) != null ? r : "",
|
|
4016
|
-
if (
|
|
4017
|
-
const
|
|
4018
|
-
|
|
4019
|
-
const
|
|
4020
|
-
if (u >
|
|
4021
|
-
const g = o.slice(
|
|
4022
|
-
n.textCaseRaw =
|
|
4023
|
-
} else u <
|
|
4047
|
+
if (!D._isTextbox(n)) return;
|
|
4048
|
+
const o = (r = n.text) != null ? r : "", i = !!n.uppercase, a = (c = n.textCaseRaw) != null ? c : "";
|
|
4049
|
+
if (i) {
|
|
4050
|
+
const l = D._toUpperCase(o);
|
|
4051
|
+
l !== o && (n.set({ text: l }), this.canvas.requestRenderAll());
|
|
4052
|
+
const d = a.length, u = o.length;
|
|
4053
|
+
if (u > d) {
|
|
4054
|
+
const g = o.slice(d).toLocaleLowerCase();
|
|
4055
|
+
n.textCaseRaw = a + g;
|
|
4056
|
+
} else u < d ? n.textCaseRaw = a.slice(0, u) : n.textCaseRaw = o.toLocaleLowerCase();
|
|
4024
4057
|
} else
|
|
4025
4058
|
n.textCaseRaw = o;
|
|
4026
4059
|
}, this._handleTextEditingExited = (s) => {
|
|
4027
|
-
var
|
|
4060
|
+
var a, r;
|
|
4028
4061
|
const { target: n } = s;
|
|
4029
|
-
if (!
|
|
4030
|
-
const o = (
|
|
4062
|
+
if (!D._isTextbox(n)) return;
|
|
4063
|
+
const o = (a = n.text) != null ? a : "";
|
|
4031
4064
|
if (!!n.uppercase) {
|
|
4032
4065
|
const c = (r = n.textCaseRaw) != null ? r : o.toLocaleLowerCase();
|
|
4033
4066
|
n.textCaseRaw = c;
|
|
@@ -4038,39 +4071,39 @@ class O {
|
|
|
4038
4071
|
lockMovementY: !1
|
|
4039
4072
|
}), setTimeout(() => {
|
|
4040
4073
|
this.isTextEditingActive = !1, this.editor.historyManager.saveState();
|
|
4041
|
-
},
|
|
4074
|
+
}, Is);
|
|
4042
4075
|
}, this._handleObjectScaling = (s) => {
|
|
4043
|
-
var
|
|
4076
|
+
var H, pt, W, yt, et, st, nt, ot, it, at, rt, ct, lt, dt;
|
|
4044
4077
|
const { target: n, transform: o } = s;
|
|
4045
|
-
if (!
|
|
4078
|
+
if (!D._isTextbox(n) || !o) return;
|
|
4046
4079
|
n.isScaling = !0;
|
|
4047
|
-
const
|
|
4048
|
-
if (!
|
|
4049
|
-
const
|
|
4050
|
-
if (!
|
|
4080
|
+
const i = this._ensureScalingState(n), { baseWidth: a, baseLeft: r, baseFontSize: c } = i, l = typeof ((H = o.original) == null ? void 0 : H.width) == "number" ? o.original.width : void 0, d = typeof ((pt = o.original) == null ? void 0 : pt.left) == "number" ? o.original.left : void 0, u = l != null ? l : a, g = d != null ? d : r, f = (W = o.corner) != null ? W : "", m = (yt = o.action) != null ? yt : "", v = ["ml", "mr"].includes(f) || m === "scaleX", p = ["mt", "mb"].includes(f) || m === "scaleY", y = ["tl", "tr", "bl", "br"].includes(f) || m === "scale";
|
|
4081
|
+
if (!v && !p && !y) return;
|
|
4082
|
+
const O = Math.abs((st = (et = n.scaleX) != null ? et : o.scaleX) != null ? st : 1) || 1, L = Math.abs((ot = (nt = n.scaleY) != null ? nt : o.scaleY) != null ? ot : 1) || 1, k = Math.max(1, u * O), b = Math.max(1, c * L), M = (at = (it = o.originX) != null ? it : n.originX) != null ? at : "left", S = g + u, j = g + u / 2, A = (rt = n.width) != null ? rt : u, C = Math.abs(k - A) > Dt, w = Math.abs(b - ((ct = n.fontSize) != null ? ct : c)) > Dt;
|
|
4083
|
+
if (!C && !w) {
|
|
4051
4084
|
n.set({ scaleX: 1, scaleY: 1 }), o.scaleX = 1, o.scaleY = 1;
|
|
4052
4085
|
return;
|
|
4053
4086
|
}
|
|
4054
4087
|
n.set({
|
|
4055
4088
|
width: k,
|
|
4056
|
-
fontSize:
|
|
4089
|
+
fontSize: y || p ? b : c,
|
|
4057
4090
|
scaleX: 1,
|
|
4058
4091
|
scaleY: 1
|
|
4059
4092
|
});
|
|
4060
|
-
const B = (
|
|
4061
|
-
let
|
|
4062
|
-
|
|
4093
|
+
const B = (lt = n.width) != null ? lt : k, z = Math.abs(B - A) > Dt;
|
|
4094
|
+
let U = g;
|
|
4095
|
+
z && (v || y) && (M === "right" ? U = S - B : M === "center" && (U = j - B / 2)), n.set({ left: U }), i.baseLeft = U, o.scaleX = 1, o.scaleY = 1;
|
|
4063
4096
|
const { original: R } = o;
|
|
4064
|
-
R && (R.scaleX = 1, R.scaleY = 1, R.width = B, R.height = n.height, R.left =
|
|
4097
|
+
R && (R.scaleX = 1, R.scaleY = 1, R.width = B, R.height = n.height, R.left = U), n.setCoords(), this.canvas.requestRenderAll(), i.baseWidth = B, i.baseFontSize = (dt = n.fontSize) != null ? dt : b, i.hasWidthChange = z || w;
|
|
4065
4098
|
}, this._handleObjectModified = (s) => {
|
|
4066
|
-
var r, c,
|
|
4099
|
+
var r, c, l;
|
|
4067
4100
|
const { target: n } = s;
|
|
4068
|
-
if (!
|
|
4101
|
+
if (!D._isTextbox(n)) return;
|
|
4069
4102
|
n.isScaling = !1;
|
|
4070
4103
|
const o = this.scalingState.get(n);
|
|
4071
4104
|
if (this.scalingState.delete(n), !(o != null && o.hasWidthChange)) return;
|
|
4072
|
-
const
|
|
4073
|
-
this.updateText({ target: n, style: { width:
|
|
4105
|
+
const i = (r = n.width) != null ? r : n.calcTextWidth(), a = (l = (c = n.fontSize) != null ? c : o == null ? void 0 : o.baseFontSize) != null ? l : 16;
|
|
4106
|
+
this.updateText({ target: n, style: { width: i, fontSize: a } }), n.set({ scaleX: 1, scaleY: 1 }), n.setCoords();
|
|
4074
4107
|
}, this.editor = t, this.canvas = t.canvas, this.fonts = (e = t.options.fonts) != null ? e : [], this.scalingState = /* @__PURE__ */ new WeakMap(), this.isTextEditingActive = !1, this._bindEvents();
|
|
4075
4108
|
}
|
|
4076
4109
|
/**
|
|
@@ -4078,23 +4111,23 @@ class O {
|
|
|
4078
4111
|
* @param options — настройки текста
|
|
4079
4112
|
* @param flags — флаги поведения
|
|
4080
4113
|
*/
|
|
4081
|
-
addText(
|
|
4082
|
-
var L =
|
|
4114
|
+
addText(O = {}, { withoutSelection: v = !1, withoutSave: p = !1, withoutAdding: y = !1 } = {}) {
|
|
4115
|
+
var L = O, {
|
|
4083
4116
|
id: t = `text-${x()}`,
|
|
4084
4117
|
text: e = "Новый текст",
|
|
4085
4118
|
fontFamily: s,
|
|
4086
4119
|
fontSize: n = 48,
|
|
4087
4120
|
bold: o = !1,
|
|
4088
|
-
italic:
|
|
4089
|
-
underline:
|
|
4121
|
+
italic: i = !1,
|
|
4122
|
+
underline: a = !1,
|
|
4090
4123
|
uppercase: r = !1,
|
|
4091
4124
|
strikethrough: c = !1,
|
|
4092
|
-
align:
|
|
4093
|
-
color:
|
|
4125
|
+
align: l = "left",
|
|
4126
|
+
color: d = "#000000",
|
|
4094
4127
|
strokeColor: u,
|
|
4095
4128
|
strokeWidth: g = 0,
|
|
4096
4129
|
opacity: f = 1
|
|
4097
|
-
} = L, m =
|
|
4130
|
+
} = L, m = X(L, [
|
|
4098
4131
|
"id",
|
|
4099
4132
|
"text",
|
|
4100
4133
|
"fontFamily",
|
|
@@ -4110,58 +4143,58 @@ class O {
|
|
|
4110
4143
|
"strokeWidth",
|
|
4111
4144
|
"opacity"
|
|
4112
4145
|
]);
|
|
4113
|
-
var
|
|
4146
|
+
var C;
|
|
4114
4147
|
const { historyManager: k } = this.editor;
|
|
4115
4148
|
k.suspendHistory();
|
|
4116
|
-
const b = s != null ? s : this._getDefaultFontFamily(),
|
|
4149
|
+
const b = s != null ? s : this._getDefaultFontFamily(), M = D._resolveStrokeWidth(g), S = D._resolveStrokeColor(
|
|
4117
4150
|
u,
|
|
4118
|
-
|
|
4119
|
-
),
|
|
4151
|
+
M
|
|
4152
|
+
), j = new gt(e, T({
|
|
4120
4153
|
id: t,
|
|
4121
4154
|
fontFamily: b,
|
|
4122
4155
|
fontSize: n,
|
|
4123
4156
|
fontWeight: o ? "bold" : "normal",
|
|
4124
|
-
fontStyle:
|
|
4125
|
-
underline:
|
|
4157
|
+
fontStyle: i ? "italic" : "normal",
|
|
4158
|
+
underline: a,
|
|
4126
4159
|
uppercase: r,
|
|
4127
4160
|
linethrough: c,
|
|
4128
|
-
textAlign:
|
|
4129
|
-
fill:
|
|
4161
|
+
textAlign: l,
|
|
4162
|
+
fill: d,
|
|
4130
4163
|
stroke: S,
|
|
4131
|
-
strokeWidth:
|
|
4164
|
+
strokeWidth: M,
|
|
4132
4165
|
strokeUniform: !0,
|
|
4133
4166
|
opacity: f
|
|
4134
4167
|
}, m));
|
|
4135
|
-
if (
|
|
4136
|
-
const
|
|
4137
|
-
|
|
4168
|
+
if (j.textCaseRaw = (C = j.text) != null ? C : "", r) {
|
|
4169
|
+
const w = D._toUpperCase(j.textCaseRaw);
|
|
4170
|
+
w !== j.text && j.set({ text: w });
|
|
4138
4171
|
}
|
|
4139
|
-
m.left === void 0 && m.top === void 0 && this.canvas.centerObject(
|
|
4140
|
-
const
|
|
4172
|
+
m.left === void 0 && m.top === void 0 && this.canvas.centerObject(j), y || this.canvas.add(j), v || this.canvas.setActiveObject(j), this.canvas.requestRenderAll(), k.resumeHistory(), p || k.saveState();
|
|
4173
|
+
const A = T({
|
|
4141
4174
|
id: t,
|
|
4142
4175
|
text: e,
|
|
4143
4176
|
fontFamily: b,
|
|
4144
4177
|
fontSize: n,
|
|
4145
4178
|
bold: o,
|
|
4146
|
-
italic:
|
|
4147
|
-
underline:
|
|
4179
|
+
italic: i,
|
|
4180
|
+
underline: a,
|
|
4148
4181
|
uppercase: r,
|
|
4149
4182
|
strikethrough: c,
|
|
4150
|
-
align:
|
|
4151
|
-
color:
|
|
4183
|
+
align: l,
|
|
4184
|
+
color: d,
|
|
4152
4185
|
strokeColor: S,
|
|
4153
|
-
strokeWidth:
|
|
4186
|
+
strokeWidth: M,
|
|
4154
4187
|
opacity: f
|
|
4155
4188
|
}, m);
|
|
4156
4189
|
return this.canvas.fire("editor:text-added", {
|
|
4157
|
-
textbox:
|
|
4158
|
-
options:
|
|
4190
|
+
textbox: j,
|
|
4191
|
+
options: A,
|
|
4159
4192
|
flags: {
|
|
4160
|
-
withoutSelection: !!
|
|
4193
|
+
withoutSelection: !!v,
|
|
4161
4194
|
withoutSave: !!p,
|
|
4162
|
-
withoutAdding: !!
|
|
4195
|
+
withoutAdding: !!y
|
|
4163
4196
|
}
|
|
4164
|
-
}),
|
|
4197
|
+
}), j;
|
|
4165
4198
|
}
|
|
4166
4199
|
/**
|
|
4167
4200
|
* Обновляет текстовый объект.
|
|
@@ -4172,49 +4205,49 @@ class O {
|
|
|
4172
4205
|
* @param options.skipRender — не вызывать перерисовку канваса
|
|
4173
4206
|
*/
|
|
4174
4207
|
updateText({ target: t, style: e = {}, withoutSave: s, skipRender: n } = {}) {
|
|
4175
|
-
var
|
|
4208
|
+
var et, st, nt, ot, it, at, rt, ct, lt, dt, zt, Ht, Wt, Zt, Pt, Vt, Gt, Xt, Kt, Qt, Jt, qt, te, ee, se, ne, oe, ie, ae, re, ce, le, de, he, ue, ge, fe, me, pe, ye, Me, be, ve, je;
|
|
4176
4209
|
const o = this._resolveTextObject(t);
|
|
4177
4210
|
if (!o) return null;
|
|
4178
|
-
const { historyManager:
|
|
4179
|
-
|
|
4180
|
-
const
|
|
4211
|
+
const { historyManager: i } = this.editor;
|
|
4212
|
+
i.suspendHistory();
|
|
4213
|
+
const a = {
|
|
4181
4214
|
id: o.id,
|
|
4182
|
-
text: (
|
|
4183
|
-
textCaseRaw: (
|
|
4215
|
+
text: (et = o.text) != null ? et : void 0,
|
|
4216
|
+
textCaseRaw: (st = o.textCaseRaw) != null ? st : void 0,
|
|
4184
4217
|
uppercase: !!o.uppercase,
|
|
4185
|
-
fontFamily: (
|
|
4186
|
-
fontSize: (
|
|
4187
|
-
fontWeight: (
|
|
4218
|
+
fontFamily: (nt = o.fontFamily) != null ? nt : void 0,
|
|
4219
|
+
fontSize: (ot = o.fontSize) != null ? ot : void 0,
|
|
4220
|
+
fontWeight: (it = o.fontWeight) != null ? it : void 0,
|
|
4188
4221
|
fontStyle: (at = o.fontStyle) != null ? at : void 0,
|
|
4189
|
-
underline: (
|
|
4190
|
-
linethrough: (
|
|
4222
|
+
underline: (rt = o.underline) != null ? rt : void 0,
|
|
4223
|
+
linethrough: (ct = o.linethrough) != null ? ct : void 0,
|
|
4191
4224
|
textAlign: o.textAlign,
|
|
4192
|
-
fill: (
|
|
4225
|
+
fill: (lt = o.fill) != null ? lt : void 0,
|
|
4193
4226
|
stroke: (dt = o.stroke) != null ? dt : void 0,
|
|
4194
|
-
strokeWidth: (
|
|
4195
|
-
opacity: (
|
|
4196
|
-
left: (
|
|
4197
|
-
top: (
|
|
4198
|
-
width: (
|
|
4199
|
-
height: (
|
|
4200
|
-
angle: (
|
|
4201
|
-
scaleX: (
|
|
4202
|
-
scaleY: (
|
|
4203
|
-
},
|
|
4227
|
+
strokeWidth: (zt = o.strokeWidth) != null ? zt : void 0,
|
|
4228
|
+
opacity: (Ht = o.opacity) != null ? Ht : void 0,
|
|
4229
|
+
left: (Wt = o.left) != null ? Wt : void 0,
|
|
4230
|
+
top: (Zt = o.top) != null ? Zt : void 0,
|
|
4231
|
+
width: (Pt = o.width) != null ? Pt : void 0,
|
|
4232
|
+
height: (Vt = o.height) != null ? Vt : void 0,
|
|
4233
|
+
angle: (Gt = o.angle) != null ? Gt : void 0,
|
|
4234
|
+
scaleX: (Xt = o.scaleX) != null ? Xt : void 0,
|
|
4235
|
+
scaleY: (Kt = o.scaleY) != null ? Kt : void 0
|
|
4236
|
+
}, $t = e, {
|
|
4204
4237
|
text: r,
|
|
4205
4238
|
fontFamily: c,
|
|
4206
|
-
fontSize:
|
|
4207
|
-
bold:
|
|
4239
|
+
fontSize: l,
|
|
4240
|
+
bold: d,
|
|
4208
4241
|
italic: u,
|
|
4209
4242
|
underline: g,
|
|
4210
4243
|
uppercase: f,
|
|
4211
4244
|
strikethrough: m,
|
|
4212
|
-
align:
|
|
4245
|
+
align: v,
|
|
4213
4246
|
color: p,
|
|
4214
|
-
strokeColor:
|
|
4215
|
-
strokeWidth:
|
|
4247
|
+
strokeColor: y,
|
|
4248
|
+
strokeWidth: O,
|
|
4216
4249
|
opacity: L
|
|
4217
|
-
} =
|
|
4250
|
+
} = $t, k = X($t, [
|
|
4218
4251
|
"text",
|
|
4219
4252
|
"fontFamily",
|
|
4220
4253
|
"fontSize",
|
|
@@ -4228,57 +4261,57 @@ class O {
|
|
|
4228
4261
|
"strokeColor",
|
|
4229
4262
|
"strokeWidth",
|
|
4230
4263
|
"opacity"
|
|
4231
|
-
]), b =
|
|
4232
|
-
if (c !== void 0 && (
|
|
4233
|
-
const _ =
|
|
4234
|
-
|
|
4264
|
+
]), b = T({}, k), M = D._getSelectionRange(o), S = {}, j = {}, A = D._isFullTextSelection(o, M), C = !M || A, w = !M;
|
|
4265
|
+
if (c !== void 0 && (M && (S.fontFamily = c), C && (b.fontFamily = c, w && (j.fontFamily = c))), l !== void 0 && (b.fontSize = l), d !== void 0) {
|
|
4266
|
+
const _ = d ? "bold" : "normal";
|
|
4267
|
+
M && (S.fontWeight = _), C && (b.fontWeight = _, w && (j.fontWeight = _));
|
|
4235
4268
|
}
|
|
4236
4269
|
if (u !== void 0) {
|
|
4237
4270
|
const _ = u ? "italic" : "normal";
|
|
4238
|
-
|
|
4271
|
+
M && (S.fontStyle = _), C && (b.fontStyle = _, w && (j.fontStyle = _));
|
|
4239
4272
|
}
|
|
4240
|
-
if (g !== void 0 && (
|
|
4241
|
-
const _ =
|
|
4242
|
-
|
|
4273
|
+
if (g !== void 0 && (M && (S.underline = g), C && (b.underline = g, w && (j.underline = g))), m !== void 0 && (M && (S.linethrough = m), C && (b.linethrough = m, w && (j.linethrough = m))), v !== void 0 && (b.textAlign = v), p !== void 0 && (M && (S.fill = p), C && (b.fill = p, w && (j.fill = p))), y !== void 0 || O !== void 0) {
|
|
4274
|
+
const _ = M ? D._getSelectionStyleValue(o, M, "strokeWidth") : void 0, Re = M ? D._getSelectionStyleValue(o, M, "stroke") : void 0, Ue = (Jt = (Qt = O != null ? O : _) != null ? Qt : o.strokeWidth) != null ? Jt : 0, Mt = D._resolveStrokeWidth(Ue), Ye = (te = (qt = y != null ? y : Re) != null ? qt : o.stroke) != null ? te : void 0, Ot = D._resolveStrokeColor(Ye, Mt);
|
|
4275
|
+
M && (S.stroke = Ot, S.strokeWidth = Mt), C && (b.stroke = Ot, b.strokeWidth = Mt, w && (j.stroke = Ot, j.strokeWidth = Mt));
|
|
4243
4276
|
}
|
|
4244
4277
|
L !== void 0 && (b.opacity = L);
|
|
4245
|
-
const
|
|
4246
|
-
if (
|
|
4247
|
-
const _ =
|
|
4248
|
-
b.text = _, o.textCaseRaw =
|
|
4249
|
-
} else o.textCaseRaw === void 0 && (o.textCaseRaw =
|
|
4250
|
-
o.uppercase =
|
|
4251
|
-
let
|
|
4252
|
-
if (
|
|
4253
|
-
|
|
4254
|
-
else if (Object.keys(
|
|
4255
|
-
const _ =
|
|
4256
|
-
_ && (
|
|
4278
|
+
const B = (se = o.textCaseRaw) != null ? se : (ee = o.text) != null ? ee : "", z = !!o.uppercase, U = r !== void 0, R = U ? r != null ? r : "" : B, H = f != null ? f : z;
|
|
4279
|
+
if (U || H !== z) {
|
|
4280
|
+
const _ = H ? D._toUpperCase(R) : R;
|
|
4281
|
+
b.text = _, o.textCaseRaw = R;
|
|
4282
|
+
} else o.textCaseRaw === void 0 && (o.textCaseRaw = B);
|
|
4283
|
+
o.uppercase = H, o.set(b);
|
|
4284
|
+
let W = !1;
|
|
4285
|
+
if (M)
|
|
4286
|
+
W = D._applyStylesToRange(o, S, M);
|
|
4287
|
+
else if (Object.keys(j).length) {
|
|
4288
|
+
const _ = D._getFullTextRange(o);
|
|
4289
|
+
_ && (W = D._applyStylesToRange(o, j, _));
|
|
4257
4290
|
}
|
|
4258
|
-
|
|
4259
|
-
const
|
|
4291
|
+
W && (o.dirty = !0), o.setCoords(), n || this.canvas.requestRenderAll(), i.resumeHistory(), s || i.saveState();
|
|
4292
|
+
const yt = {
|
|
4260
4293
|
id: o.id,
|
|
4261
|
-
text: (
|
|
4262
|
-
textCaseRaw: (
|
|
4294
|
+
text: (ne = o.text) != null ? ne : void 0,
|
|
4295
|
+
textCaseRaw: (oe = o.textCaseRaw) != null ? oe : void 0,
|
|
4263
4296
|
uppercase: !!o.uppercase,
|
|
4264
|
-
fontFamily: (
|
|
4265
|
-
fontSize: (
|
|
4266
|
-
fontWeight: (
|
|
4267
|
-
fontStyle: (
|
|
4268
|
-
underline: (
|
|
4269
|
-
linethrough: (
|
|
4297
|
+
fontFamily: (ie = o.fontFamily) != null ? ie : void 0,
|
|
4298
|
+
fontSize: (ae = o.fontSize) != null ? ae : void 0,
|
|
4299
|
+
fontWeight: (re = o.fontWeight) != null ? re : void 0,
|
|
4300
|
+
fontStyle: (ce = o.fontStyle) != null ? ce : void 0,
|
|
4301
|
+
underline: (le = o.underline) != null ? le : void 0,
|
|
4302
|
+
linethrough: (de = o.linethrough) != null ? de : void 0,
|
|
4270
4303
|
textAlign: o.textAlign,
|
|
4271
|
-
fill: (
|
|
4272
|
-
stroke: (
|
|
4273
|
-
strokeWidth: (
|
|
4274
|
-
opacity: (
|
|
4275
|
-
left: (
|
|
4276
|
-
top: (
|
|
4277
|
-
width: (
|
|
4278
|
-
height: (
|
|
4279
|
-
angle: (
|
|
4280
|
-
scaleX: (
|
|
4281
|
-
scaleY: (
|
|
4304
|
+
fill: (he = o.fill) != null ? he : void 0,
|
|
4305
|
+
stroke: (ue = o.stroke) != null ? ue : void 0,
|
|
4306
|
+
strokeWidth: (ge = o.strokeWidth) != null ? ge : void 0,
|
|
4307
|
+
opacity: (fe = o.opacity) != null ? fe : void 0,
|
|
4308
|
+
left: (me = o.left) != null ? me : void 0,
|
|
4309
|
+
top: (pe = o.top) != null ? pe : void 0,
|
|
4310
|
+
width: (ye = o.width) != null ? ye : void 0,
|
|
4311
|
+
height: (Me = o.height) != null ? Me : void 0,
|
|
4312
|
+
angle: (be = o.angle) != null ? be : void 0,
|
|
4313
|
+
scaleX: (ve = o.scaleX) != null ? ve : void 0,
|
|
4314
|
+
scaleY: (je = o.scaleY) != null ? je : void 0
|
|
4282
4315
|
};
|
|
4283
4316
|
return this.canvas.fire("editor:text-updated", {
|
|
4284
4317
|
textbox: o,
|
|
@@ -4289,10 +4322,10 @@ class O {
|
|
|
4289
4322
|
skipRender: !!n
|
|
4290
4323
|
},
|
|
4291
4324
|
updates: b,
|
|
4292
|
-
before:
|
|
4293
|
-
after:
|
|
4294
|
-
selectionRange:
|
|
4295
|
-
selectionStyles:
|
|
4325
|
+
before: a,
|
|
4326
|
+
after: yt,
|
|
4327
|
+
selectionRange: M != null ? M : void 0,
|
|
4328
|
+
selectionStyles: M && Object.keys(S).length ? S : void 0
|
|
4296
4329
|
}), o;
|
|
4297
4330
|
}
|
|
4298
4331
|
/**
|
|
@@ -4305,19 +4338,19 @@ class O {
|
|
|
4305
4338
|
* Возвращает активный текст или ищет по id.
|
|
4306
4339
|
*/
|
|
4307
4340
|
_resolveTextObject(t) {
|
|
4308
|
-
if (t instanceof
|
|
4341
|
+
if (t instanceof gt) return t;
|
|
4309
4342
|
if (!t) {
|
|
4310
4343
|
const e = this.canvas.getActiveObject();
|
|
4311
|
-
return
|
|
4344
|
+
return D._isTextbox(e) ? e : null;
|
|
4312
4345
|
}
|
|
4313
4346
|
if (typeof t == "string") {
|
|
4314
|
-
const e = this.canvas.getObjects().find((s) =>
|
|
4347
|
+
const e = this.canvas.getObjects().find((s) => D._isTextbox(s) && s.id === t);
|
|
4315
4348
|
return e != null ? e : null;
|
|
4316
4349
|
}
|
|
4317
4350
|
return null;
|
|
4318
4351
|
}
|
|
4319
4352
|
static _isTextbox(t) {
|
|
4320
|
-
return !!t && t instanceof
|
|
4353
|
+
return !!t && t instanceof gt;
|
|
4321
4354
|
}
|
|
4322
4355
|
_bindEvents() {
|
|
4323
4356
|
this.canvas.on("object:scaling", this._handleObjectScaling), this.canvas.on("object:modified", this._handleObjectModified), this.canvas.on("text:editing:entered", this._handleTextEditingEntered), this.canvas.on("text:editing:exited", this._handleTextEditingExited), this.canvas.on("text:changed", this._handleTextChanged);
|
|
@@ -4326,11 +4359,11 @@ class O {
|
|
|
4326
4359
|
var s, n, o;
|
|
4327
4360
|
let e = this.scalingState.get(t);
|
|
4328
4361
|
if (!e) {
|
|
4329
|
-
const
|
|
4362
|
+
const i = (s = t.width) != null ? s : t.calcTextWidth(), a = (n = t.left) != null ? n : 0, r = (o = t.fontSize) != null ? o : 16;
|
|
4330
4363
|
e = {
|
|
4331
|
-
baseWidth:
|
|
4364
|
+
baseWidth: i,
|
|
4332
4365
|
baseFontSize: r,
|
|
4333
|
-
baseLeft:
|
|
4366
|
+
baseLeft: a,
|
|
4334
4367
|
hasWidthChange: !1
|
|
4335
4368
|
}, this.scalingState.set(t, e);
|
|
4336
4369
|
}
|
|
@@ -4350,6 +4383,12 @@ class O {
|
|
|
4350
4383
|
const e = (n = (s = t.text) == null ? void 0 : s.length) != null ? n : 0;
|
|
4351
4384
|
return e <= 0 ? null : { start: 0, end: e };
|
|
4352
4385
|
}
|
|
4386
|
+
static _isFullTextSelection(t, e) {
|
|
4387
|
+
var n, o;
|
|
4388
|
+
if (!e) return !1;
|
|
4389
|
+
const s = (o = (n = t.text) == null ? void 0 : n.length) != null ? o : 0;
|
|
4390
|
+
return s <= 0 ? !1 : e.start <= 0 && e.end >= s;
|
|
4391
|
+
}
|
|
4353
4392
|
static _applyStylesToRange(t, e, s) {
|
|
4354
4393
|
if (!e || !Object.keys(e).length) return !1;
|
|
4355
4394
|
const { start: n, end: o } = s;
|
|
@@ -4381,7 +4420,7 @@ class O {
|
|
|
4381
4420
|
return (e = (t = this.fonts[0]) == null ? void 0 : t.family) != null ? e : "Arial";
|
|
4382
4421
|
}
|
|
4383
4422
|
}
|
|
4384
|
-
class
|
|
4423
|
+
class Ft {
|
|
4385
4424
|
/**
|
|
4386
4425
|
* Конструктор класса ImageEditor.
|
|
4387
4426
|
* @param canvasId - идентификатор канваса, в котором будет создан редактор
|
|
@@ -4396,7 +4435,7 @@ class Yt {
|
|
|
4396
4435
|
* @fires editor:ready
|
|
4397
4436
|
*/
|
|
4398
4437
|
init() {
|
|
4399
|
-
return
|
|
4438
|
+
return E(this, null, function* () {
|
|
4400
4439
|
var u;
|
|
4401
4440
|
const {
|
|
4402
4441
|
editorContainerWidth: t,
|
|
@@ -4404,22 +4443,22 @@ class Yt {
|
|
|
4404
4443
|
canvasWrapperWidth: s,
|
|
4405
4444
|
canvasWrapperHeight: n,
|
|
4406
4445
|
canvasCSSWidth: o,
|
|
4407
|
-
canvasCSSHeight:
|
|
4408
|
-
initialImage:
|
|
4446
|
+
canvasCSSHeight: i,
|
|
4447
|
+
initialImage: a,
|
|
4409
4448
|
initialStateJSON: r,
|
|
4410
4449
|
scaleType: c,
|
|
4411
|
-
showRotationAngle:
|
|
4412
|
-
_onReadyCallback:
|
|
4450
|
+
showRotationAngle: l,
|
|
4451
|
+
_onReadyCallback: d
|
|
4413
4452
|
} = this.options;
|
|
4414
|
-
if (
|
|
4453
|
+
if (Q.apply(), this.canvas = new Ge(this.containerId, this.options), this.moduleLoader = new Je(), this.workerManager = new ts(), this.errorManager = new Et({ editor: this }), this.historyManager = new St({ editor: this }), this.toolbar = new ps({ editor: this }), this.transformManager = new Es({ editor: this }), this.zoomManager = new Os({ editor: this }), this.canvasManager = new ws({ editor: this }), this.imageManager = new P({ editor: this }), this.layerManager = new Ct({ editor: this }), this.shapeManager = new Ts({ editor: this }), this.interactionBlocker = new Ds({ editor: this }), this.backgroundManager = new J({ editor: this }), this.clipboardManager = new Ns({ editor: this }), this.objectLockManager = new wt({ editor: this }), this.groupingManager = new Ls({ editor: this }), this.selectionManager = new ks({ editor: this }), this.deletionManager = new Yt({ editor: this }), this.panConstraintManager = new _s({ editor: this }), this.fontManager = new xt((u = this.options.fonts) != null ? u : []), this.textManager = new D({ editor: this }), l && (this.angleIndicator = new Ut({ editor: this })), this._createMontageArea(), this._createClippingArea(), this.listeners = new ft({ editor: this, options: this.options }), this.canvasManager.setEditorContainerWidth(t), this.canvasManager.setEditorContainerHeight(e), this.canvasManager.setCanvasWrapperWidth(s), this.canvasManager.setCanvasWrapperHeight(n), this.canvasManager.setCanvasCSSWidth(o), this.canvasManager.setCanvasCSSHeight(i), this.canvasManager.updateCanvas(), this.zoomManager.calculateAndApplyDefaultZoom(), yield this.fontManager.loadFonts(), a != null && a.source) {
|
|
4415
4454
|
const {
|
|
4416
4455
|
source: g,
|
|
4417
4456
|
scale: f = `image-${c}`,
|
|
4418
4457
|
withoutSave: m = !0
|
|
4419
|
-
} =
|
|
4458
|
+
} = a;
|
|
4420
4459
|
yield this.imageManager.importImage({ source: g, scale: f, withoutSave: m });
|
|
4421
4460
|
}
|
|
4422
|
-
r && this.historyManager.loadStateFromFullState(r), this.historyManager.saveState(), console.log("editor:ready"), this.canvas.fire("editor:ready", this), typeof
|
|
4461
|
+
r && this.historyManager.loadStateFromFullState(r), this.historyManager.saveState(), console.log("editor:ready"), this.canvas.fire("editor:ready", this), typeof d == "function" && d(this);
|
|
4423
4462
|
});
|
|
4424
4463
|
}
|
|
4425
4464
|
/**
|
|
@@ -4433,7 +4472,7 @@ class Yt {
|
|
|
4433
4472
|
this.montageArea = this.shapeManager.addRectangle({
|
|
4434
4473
|
width: t,
|
|
4435
4474
|
height: e,
|
|
4436
|
-
fill:
|
|
4475
|
+
fill: Ft._createMosaicPattern(),
|
|
4437
4476
|
stroke: null,
|
|
4438
4477
|
strokeWidth: 0,
|
|
4439
4478
|
selectable: !1,
|
|
@@ -4484,13 +4523,13 @@ class Yt {
|
|
|
4484
4523
|
const t = document.createElement("canvas");
|
|
4485
4524
|
t.width = 20, t.height = 20;
|
|
4486
4525
|
const e = t.getContext("2d");
|
|
4487
|
-
return e.fillStyle = "#ddd", e.fillRect(0, 0, 40, 40), e.fillStyle = "#ccc", e.fillRect(0, 0, 10, 10), e.fillRect(10, 10, 10, 10), new
|
|
4526
|
+
return e.fillStyle = "#ddd", e.fillRect(0, 0, 40, 40), e.fillStyle = "#ccc", e.fillRect(0, 0, 10, 10), e.fillRect(10, 10, 10, 10), new Xe({
|
|
4488
4527
|
source: t,
|
|
4489
4528
|
repeat: "repeat"
|
|
4490
4529
|
});
|
|
4491
4530
|
}
|
|
4492
4531
|
}
|
|
4493
|
-
const
|
|
4532
|
+
const Y = [
|
|
4494
4533
|
"U+0000-00FF",
|
|
4495
4534
|
"U+0131",
|
|
4496
4535
|
"U+0152-0153",
|
|
@@ -4510,13 +4549,13 @@ const z = [
|
|
|
4510
4549
|
"U+2215",
|
|
4511
4550
|
"U+FEFF",
|
|
4512
4551
|
"U+FFFD"
|
|
4513
|
-
].join(", "),
|
|
4552
|
+
].join(", "), F = [
|
|
4514
4553
|
"U+0301",
|
|
4515
4554
|
"U+0400-045F",
|
|
4516
4555
|
"U+0490-0491",
|
|
4517
4556
|
"U+04B0-04B1",
|
|
4518
4557
|
"U+2116"
|
|
4519
|
-
].join(", "),
|
|
4558
|
+
].join(", "), Bs = [
|
|
4520
4559
|
{
|
|
4521
4560
|
family: "Arial",
|
|
4522
4561
|
source: 'local("Arial"), local("Liberation Sans"), local("DejaVu Sans")',
|
|
@@ -4533,7 +4572,7 @@ const z = [
|
|
|
4533
4572
|
style: "normal",
|
|
4534
4573
|
weight: "400",
|
|
4535
4574
|
display: "swap",
|
|
4536
|
-
unicodeRange:
|
|
4575
|
+
unicodeRange: F
|
|
4537
4576
|
}
|
|
4538
4577
|
},
|
|
4539
4578
|
{
|
|
@@ -4543,7 +4582,7 @@ const z = [
|
|
|
4543
4582
|
style: "normal",
|
|
4544
4583
|
weight: "400",
|
|
4545
4584
|
display: "swap",
|
|
4546
|
-
unicodeRange:
|
|
4585
|
+
unicodeRange: Y
|
|
4547
4586
|
}
|
|
4548
4587
|
},
|
|
4549
4588
|
{
|
|
@@ -4553,7 +4592,7 @@ const z = [
|
|
|
4553
4592
|
style: "normal",
|
|
4554
4593
|
weight: "700",
|
|
4555
4594
|
display: "swap",
|
|
4556
|
-
unicodeRange:
|
|
4595
|
+
unicodeRange: F
|
|
4557
4596
|
}
|
|
4558
4597
|
},
|
|
4559
4598
|
{
|
|
@@ -4563,7 +4602,7 @@ const z = [
|
|
|
4563
4602
|
style: "normal",
|
|
4564
4603
|
weight: "700",
|
|
4565
4604
|
display: "swap",
|
|
4566
|
-
unicodeRange:
|
|
4605
|
+
unicodeRange: Y
|
|
4567
4606
|
}
|
|
4568
4607
|
},
|
|
4569
4608
|
{
|
|
@@ -4573,7 +4612,7 @@ const z = [
|
|
|
4573
4612
|
style: "normal",
|
|
4574
4613
|
weight: "200 700",
|
|
4575
4614
|
display: "swap",
|
|
4576
|
-
unicodeRange:
|
|
4615
|
+
unicodeRange: F
|
|
4577
4616
|
}
|
|
4578
4617
|
},
|
|
4579
4618
|
{
|
|
@@ -4583,7 +4622,7 @@ const z = [
|
|
|
4583
4622
|
style: "normal",
|
|
4584
4623
|
weight: "200 700",
|
|
4585
4624
|
display: "swap",
|
|
4586
|
-
unicodeRange:
|
|
4625
|
+
unicodeRange: Y
|
|
4587
4626
|
}
|
|
4588
4627
|
},
|
|
4589
4628
|
{
|
|
@@ -4593,7 +4632,7 @@ const z = [
|
|
|
4593
4632
|
style: "normal",
|
|
4594
4633
|
weight: "300 900",
|
|
4595
4634
|
display: "swap",
|
|
4596
|
-
unicodeRange:
|
|
4635
|
+
unicodeRange: F
|
|
4597
4636
|
}
|
|
4598
4637
|
},
|
|
4599
4638
|
{
|
|
@@ -4603,7 +4642,7 @@ const z = [
|
|
|
4603
4642
|
style: "normal",
|
|
4604
4643
|
weight: "300 900",
|
|
4605
4644
|
display: "swap",
|
|
4606
|
-
unicodeRange:
|
|
4645
|
+
unicodeRange: Y
|
|
4607
4646
|
}
|
|
4608
4647
|
},
|
|
4609
4648
|
{
|
|
@@ -4613,7 +4652,7 @@ const z = [
|
|
|
4613
4652
|
style: "normal",
|
|
4614
4653
|
weight: "400 700",
|
|
4615
4654
|
display: "swap",
|
|
4616
|
-
unicodeRange:
|
|
4655
|
+
unicodeRange: F
|
|
4617
4656
|
}
|
|
4618
4657
|
},
|
|
4619
4658
|
{
|
|
@@ -4623,7 +4662,7 @@ const z = [
|
|
|
4623
4662
|
style: "normal",
|
|
4624
4663
|
weight: "400 700",
|
|
4625
4664
|
display: "swap",
|
|
4626
|
-
unicodeRange:
|
|
4665
|
+
unicodeRange: Y
|
|
4627
4666
|
}
|
|
4628
4667
|
},
|
|
4629
4668
|
{
|
|
@@ -4633,7 +4672,7 @@ const z = [
|
|
|
4633
4672
|
style: "normal",
|
|
4634
4673
|
weight: "300 700",
|
|
4635
4674
|
display: "swap",
|
|
4636
|
-
unicodeRange:
|
|
4675
|
+
unicodeRange: F
|
|
4637
4676
|
}
|
|
4638
4677
|
},
|
|
4639
4678
|
{
|
|
@@ -4643,7 +4682,7 @@ const z = [
|
|
|
4643
4682
|
style: "normal",
|
|
4644
4683
|
weight: "300 700",
|
|
4645
4684
|
display: "swap",
|
|
4646
|
-
unicodeRange:
|
|
4685
|
+
unicodeRange: Y
|
|
4647
4686
|
}
|
|
4648
4687
|
},
|
|
4649
4688
|
{
|
|
@@ -4653,7 +4692,7 @@ const z = [
|
|
|
4653
4692
|
style: "normal",
|
|
4654
4693
|
weight: "300 700",
|
|
4655
4694
|
display: "swap",
|
|
4656
|
-
unicodeRange:
|
|
4695
|
+
unicodeRange: F
|
|
4657
4696
|
}
|
|
4658
4697
|
},
|
|
4659
4698
|
{
|
|
@@ -4663,7 +4702,7 @@ const z = [
|
|
|
4663
4702
|
style: "normal",
|
|
4664
4703
|
weight: "300 700",
|
|
4665
4704
|
display: "swap",
|
|
4666
|
-
unicodeRange:
|
|
4705
|
+
unicodeRange: Y
|
|
4667
4706
|
}
|
|
4668
4707
|
},
|
|
4669
4708
|
{
|
|
@@ -4673,7 +4712,7 @@ const z = [
|
|
|
4673
4712
|
style: "normal",
|
|
4674
4713
|
weight: "400",
|
|
4675
4714
|
display: "swap",
|
|
4676
|
-
unicodeRange:
|
|
4715
|
+
unicodeRange: F
|
|
4677
4716
|
}
|
|
4678
4717
|
},
|
|
4679
4718
|
{
|
|
@@ -4683,7 +4722,7 @@ const z = [
|
|
|
4683
4722
|
style: "normal",
|
|
4684
4723
|
weight: "400",
|
|
4685
4724
|
display: "swap",
|
|
4686
|
-
unicodeRange:
|
|
4725
|
+
unicodeRange: Y
|
|
4687
4726
|
}
|
|
4688
4727
|
},
|
|
4689
4728
|
{
|
|
@@ -4693,7 +4732,7 @@ const z = [
|
|
|
4693
4732
|
style: "normal",
|
|
4694
4733
|
weight: "400 700",
|
|
4695
4734
|
display: "swap",
|
|
4696
|
-
unicodeRange:
|
|
4735
|
+
unicodeRange: F
|
|
4697
4736
|
}
|
|
4698
4737
|
},
|
|
4699
4738
|
{
|
|
@@ -4703,7 +4742,7 @@ const z = [
|
|
|
4703
4742
|
style: "normal",
|
|
4704
4743
|
weight: "400 700",
|
|
4705
4744
|
display: "swap",
|
|
4706
|
-
unicodeRange:
|
|
4745
|
+
unicodeRange: Y
|
|
4707
4746
|
}
|
|
4708
4747
|
},
|
|
4709
4748
|
{
|
|
@@ -4713,7 +4752,7 @@ const z = [
|
|
|
4713
4752
|
style: "normal",
|
|
4714
4753
|
weight: "100 900",
|
|
4715
4754
|
display: "swap",
|
|
4716
|
-
unicodeRange:
|
|
4755
|
+
unicodeRange: F
|
|
4717
4756
|
}
|
|
4718
4757
|
},
|
|
4719
4758
|
{
|
|
@@ -4723,10 +4762,10 @@ const z = [
|
|
|
4723
4762
|
style: "normal",
|
|
4724
4763
|
weight: "100 900",
|
|
4725
4764
|
display: "swap",
|
|
4726
|
-
unicodeRange:
|
|
4765
|
+
unicodeRange: Y
|
|
4727
4766
|
}
|
|
4728
4767
|
}
|
|
4729
|
-
],
|
|
4768
|
+
], Rs = {
|
|
4730
4769
|
/**
|
|
4731
4770
|
* Опции редактора
|
|
4732
4771
|
*/
|
|
@@ -4818,20 +4857,20 @@ const z = [
|
|
|
4818
4857
|
/**
|
|
4819
4858
|
* Список шрифтов, которые будут доступны в редакторе по умолчанию.
|
|
4820
4859
|
*/
|
|
4821
|
-
fonts:
|
|
4860
|
+
fonts: Bs
|
|
4822
4861
|
};
|
|
4823
|
-
function
|
|
4824
|
-
const e =
|
|
4862
|
+
function Hs(h, t = {}) {
|
|
4863
|
+
const e = T(T({}, Rs), t), s = document.getElementById(h);
|
|
4825
4864
|
if (!s)
|
|
4826
4865
|
return Promise.reject(new Error(`Контейнер с ID "${h}" не найден.`));
|
|
4827
4866
|
const n = document.createElement("canvas");
|
|
4828
4867
|
return n.id = `${h}-canvas`, s.appendChild(n), e.editorContainer = s, new Promise((o) => {
|
|
4829
4868
|
e._onReadyCallback = o;
|
|
4830
|
-
const
|
|
4831
|
-
window[h] =
|
|
4869
|
+
const i = new Ft(n.id, e);
|
|
4870
|
+
window[h] = i;
|
|
4832
4871
|
});
|
|
4833
4872
|
}
|
|
4834
4873
|
export {
|
|
4835
|
-
|
|
4874
|
+
Hs as default
|
|
4836
4875
|
};
|
|
4837
4876
|
//# sourceMappingURL=main.js.map
|