@anu3ev/fabric-image-editor 0.5.18 → 0.5.19
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 +904 -874
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -9,8 +9,8 @@ var De = (h, t, e) => t in h ? cs(h, t, { enumerable: !0, configurable: !0, writ
|
|
|
9
9
|
for (var e of Xt(t))
|
|
10
10
|
_e.call(t, e) && De(h, e, t[e]);
|
|
11
11
|
return h;
|
|
12
|
-
},
|
|
13
|
-
var
|
|
12
|
+
}, bt = (h, t) => ds(h, ls(t));
|
|
13
|
+
var Mt = (h, t) => {
|
|
14
14
|
var e = {};
|
|
15
15
|
for (var s in h)
|
|
16
16
|
Re.call(h, s) && t.indexOf(s) < 0 && (e[s] = h[s]);
|
|
@@ -19,23 +19,23 @@ var bt = (h, t) => {
|
|
|
19
19
|
t.indexOf(s) < 0 && _e.call(h, s) && (e[s] = h[s]);
|
|
20
20
|
return e;
|
|
21
21
|
};
|
|
22
|
-
var k = (h, t, e) => new Promise((s,
|
|
23
|
-
var
|
|
22
|
+
var k = (h, t, e) => new Promise((s, o) => {
|
|
23
|
+
var n = (r) => {
|
|
24
24
|
try {
|
|
25
25
|
a(e.next(r));
|
|
26
26
|
} catch (c) {
|
|
27
|
-
|
|
27
|
+
o(c);
|
|
28
28
|
}
|
|
29
29
|
}, i = (r) => {
|
|
30
30
|
try {
|
|
31
31
|
a(e.throw(r));
|
|
32
32
|
} catch (c) {
|
|
33
|
-
|
|
33
|
+
o(c);
|
|
34
34
|
}
|
|
35
|
-
}, a = (r) => r.done ? s(r.value) : Promise.resolve(r.value).then(
|
|
35
|
+
}, a = (r) => r.done ? s(r.value) : Promise.resolve(r.value).then(n, i);
|
|
36
36
|
a((e = e.apply(h, t)).next());
|
|
37
37
|
});
|
|
38
|
-
import { ActiveSelection as U, Textbox as
|
|
38
|
+
import { ActiveSelection as U, Textbox as st, util as dt, controlsUtils as xe, InteractiveFabricObject as Ne, Point as tt, FitContentLayout as Be, loadSVGFromURL as hs, FabricImage as Ut, Gradient as ke, Rect as us, Circle as gs, Triangle as fs, Group as Et, Color as ps, classRegistry as ze, loadSVGFromString as ms, Canvas as ys, Pattern as vs } from "fabric";
|
|
39
39
|
import { create as bs } from "jsondiffpatch";
|
|
40
40
|
import Ms from "diff-match-patch";
|
|
41
41
|
var ws = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", V = function() {
|
|
@@ -71,15 +71,15 @@ class Ft {
|
|
|
71
71
|
adaptCanvasToContainerOnResize: t,
|
|
72
72
|
canvasDragging: e,
|
|
73
73
|
mouseWheelZooming: s,
|
|
74
|
-
bringToFrontOnSelection:
|
|
75
|
-
copyObjectsByHotkey:
|
|
74
|
+
bringToFrontOnSelection: o,
|
|
75
|
+
copyObjectsByHotkey: n,
|
|
76
76
|
pasteImageFromClipboard: i,
|
|
77
77
|
undoRedoByHotKeys: a,
|
|
78
78
|
selectAllByHotkey: r,
|
|
79
79
|
deleteObjectsByHotkey: c,
|
|
80
80
|
resetObjectFitByDoubleClick: d
|
|
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),
|
|
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), o && (this.canvas.on("selection:created", this.handleBringToFrontBound), this.canvas.on("selection:updated", this.handleBringToFrontBound)), d && this.canvas.on("mouse:dblclick", this.handleResetObjectFitBound), t && window.addEventListener("resize", this.handleContainerResizeBound, { capture: !0 }), n && 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
|
* При массовом выделении объектов удаляем из него залоченные.
|
|
@@ -89,16 +89,16 @@ class Ft {
|
|
|
89
89
|
*/
|
|
90
90
|
_filterLockedSelection({ selected: t, e }) {
|
|
91
91
|
if (!(t != null && t.length) || !(e instanceof MouseEvent) || t.length === 1) return;
|
|
92
|
-
const { lockedObjects: s, unlockedObjects:
|
|
92
|
+
const { lockedObjects: s, unlockedObjects: o } = 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;
|
|
97
|
-
if (
|
|
98
|
-
if (
|
|
99
|
-
this.canvas.setActiveObject(
|
|
97
|
+
if (o.length > 0) {
|
|
98
|
+
if (o.length === 1)
|
|
99
|
+
this.canvas.setActiveObject(o[0]);
|
|
100
100
|
else {
|
|
101
|
-
const i = new U(
|
|
101
|
+
const i = new U(o, {
|
|
102
102
|
canvas: this.canvas
|
|
103
103
|
});
|
|
104
104
|
this.canvas.setActiveObject(i);
|
|
@@ -106,14 +106,14 @@ class Ft {
|
|
|
106
106
|
this.canvas.requestRenderAll();
|
|
107
107
|
return;
|
|
108
108
|
}
|
|
109
|
-
const
|
|
109
|
+
const n = new U(t, {
|
|
110
110
|
canvas: this.canvas
|
|
111
111
|
});
|
|
112
112
|
this.editor.objectLockManager.lockObject({
|
|
113
|
-
object:
|
|
113
|
+
object: n,
|
|
114
114
|
skipInnerObjects: !0,
|
|
115
115
|
withoutSave: !0
|
|
116
|
-
}), this.canvas.setActiveObject(
|
|
116
|
+
}), this.canvas.setActiveObject(n), this.canvas.requestRenderAll();
|
|
117
117
|
}
|
|
118
118
|
/**
|
|
119
119
|
* Обработчики для сохранения состояния редактора в истории.
|
|
@@ -157,8 +157,8 @@ class Ft {
|
|
|
157
157
|
* @param event.code — код клавиши
|
|
158
158
|
*/
|
|
159
159
|
handleCopyEvent(t) {
|
|
160
|
-
const { ctrlKey: e, metaKey: s, code:
|
|
161
|
-
this._shouldIgnoreKeyboardEvent(t) || !e && !s ||
|
|
160
|
+
const { ctrlKey: e, metaKey: s, code: o } = t;
|
|
161
|
+
this._shouldIgnoreKeyboardEvent(t) || !e && !s || o !== "KeyC" || (t.preventDefault(), this.editor.clipboardManager.copy());
|
|
162
162
|
}
|
|
163
163
|
/**
|
|
164
164
|
* Обработчик вставки объекта или изображения из буфера обмена.
|
|
@@ -176,8 +176,8 @@ class Ft {
|
|
|
176
176
|
*/
|
|
177
177
|
handleUndoRedoEvent(t) {
|
|
178
178
|
return k(this, null, function* () {
|
|
179
|
-
const { ctrlKey: e, metaKey: s, code:
|
|
180
|
-
this._shouldIgnoreKeyboardEvent(t) || !e && !s ||
|
|
179
|
+
const { ctrlKey: e, metaKey: s, code: o, repeat: n } = t;
|
|
180
|
+
this._shouldIgnoreKeyboardEvent(t) || !e && !s || n || !/Mac/i.test(navigator.userAgent) && this.isUndoRedoKeyPressed || (o === "KeyZ" ? (t.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.undo()) : o === "KeyY" && (t.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.redo()));
|
|
181
181
|
});
|
|
182
182
|
}
|
|
183
183
|
/**
|
|
@@ -197,8 +197,8 @@ class Ft {
|
|
|
197
197
|
*/
|
|
198
198
|
handleSelectAllEvent(t) {
|
|
199
199
|
if (this._shouldIgnoreKeyboardEvent(t)) return;
|
|
200
|
-
const { ctrlKey: e, metaKey: s, code:
|
|
201
|
-
!e && !s ||
|
|
200
|
+
const { ctrlKey: e, metaKey: s, code: o } = t;
|
|
201
|
+
!e && !s || o !== "KeyA" || (t.preventDefault(), this.editor.selectionManager.selectAll());
|
|
202
202
|
}
|
|
203
203
|
/**
|
|
204
204
|
* Обработчик для удаления объектов (Delete или Backspace).
|
|
@@ -216,8 +216,8 @@ class Ft {
|
|
|
216
216
|
*/
|
|
217
217
|
handleSpaceKeyDown(t) {
|
|
218
218
|
if (t.code !== "Space" || this._shouldIgnoreKeyboardEvent(t)) return;
|
|
219
|
-
const { canvas: e, editor: s, isSpacePressed:
|
|
220
|
-
if (
|
|
219
|
+
const { canvas: e, editor: s, isSpacePressed: o, isDragging: n } = this;
|
|
220
|
+
if (o || n) return;
|
|
221
221
|
this.isSpacePressed = !0, t.preventDefault();
|
|
222
222
|
const i = e.getActiveObject() || null;
|
|
223
223
|
i instanceof U ? this.savedSelection = i.getObjects().slice() : i && (this.savedSelection = [i]), e.discardActiveObject(), e.set({
|
|
@@ -259,8 +259,12 @@ class Ft {
|
|
|
259
259
|
e.setActiveObject(t[0]);
|
|
260
260
|
return;
|
|
261
261
|
}
|
|
262
|
-
const
|
|
263
|
-
|
|
262
|
+
const o = t.filter((i) => s.canvasManager.getObjects().includes(i)), n = new U(o, { canvas: e });
|
|
263
|
+
o.some((i) => i.locked) && s.objectLockManager.lockObject({
|
|
264
|
+
object: n,
|
|
265
|
+
skipInnerObjects: !0,
|
|
266
|
+
withoutSave: !0
|
|
267
|
+
}), e.setActiveObject(n);
|
|
264
268
|
}
|
|
265
269
|
// --- Обработчики для событий canvas (Fabric) ---
|
|
266
270
|
/**
|
|
@@ -282,8 +286,8 @@ class Ft {
|
|
|
282
286
|
const { panConstraintManager: e, montageArea: s } = this.editor;
|
|
283
287
|
if (!e.isPanAllowed())
|
|
284
288
|
return;
|
|
285
|
-
const
|
|
286
|
-
|
|
289
|
+
const o = this.canvas.viewportTransform, n = o[4] + (t.clientX - this.lastMouseX), i = o[5] + (t.clientY - this.lastMouseY), a = e.constrainPan(n, i);
|
|
290
|
+
o[4] = a.x, o[5] = a.y, s.setCoords(), this.canvas.requestRenderAll(), this.lastMouseX = t.clientX, this.lastMouseY = t.clientY;
|
|
287
291
|
}
|
|
288
292
|
/**
|
|
289
293
|
* Завершение перетаскивания канваса (mouse:up).
|
|
@@ -301,8 +305,8 @@ class Ft {
|
|
|
301
305
|
* @returns Шаг изменения зума
|
|
302
306
|
*/
|
|
303
307
|
_calculateAdaptiveZoomStep(t) {
|
|
304
|
-
const e = this.canvas.getZoom(), s = 0.05,
|
|
305
|
-
return -(e * s *
|
|
308
|
+
const e = this.canvas.getZoom(), s = 0.05, n = t / 100;
|
|
309
|
+
return -(e * s * n);
|
|
306
310
|
}
|
|
307
311
|
/**
|
|
308
312
|
* Обработчик зума колесиком мыши. Работает при зажатом Ctrl или Cmd.
|
|
@@ -330,7 +334,7 @@ class Ft {
|
|
|
330
334
|
*/
|
|
331
335
|
handleResetObjectFit(t) {
|
|
332
336
|
const e = t == null ? void 0 : t.target;
|
|
333
|
-
!e || e instanceof
|
|
337
|
+
!e || e instanceof st || this.editor.transformManager.resetObject({ object: e });
|
|
334
338
|
}
|
|
335
339
|
/**
|
|
336
340
|
* Проверяет, должно ли событие клавиатуры быть проигнорировано
|
|
@@ -339,23 +343,23 @@ class Ft {
|
|
|
339
343
|
* @returns true если событие должно быть проигнорировано
|
|
340
344
|
*/
|
|
341
345
|
_shouldIgnoreKeyboardEvent(t) {
|
|
342
|
-
const e = document.activeElement, s = t.target,
|
|
346
|
+
const e = document.activeElement, s = t.target, o = ["input", "textarea", "select"];
|
|
343
347
|
if (s) {
|
|
344
348
|
const i = s.tagName.toLowerCase();
|
|
345
|
-
if (t.type === "paste" &&
|
|
349
|
+
if (t.type === "paste" && o.includes(i)) {
|
|
346
350
|
const a = e == null ? void 0 : e.tagName.toLowerCase();
|
|
347
|
-
return !!(a &&
|
|
351
|
+
return !!(a && o.includes(a));
|
|
348
352
|
}
|
|
349
|
-
if (
|
|
353
|
+
if (o.includes(i) || s.contentEditable === "true")
|
|
350
354
|
return !0;
|
|
351
355
|
}
|
|
352
356
|
if (e && e !== s) {
|
|
353
357
|
const i = e.tagName.toLowerCase();
|
|
354
|
-
if (
|
|
358
|
+
if (o.includes(i) || e.contentEditable === "true") return !0;
|
|
355
359
|
}
|
|
356
|
-
const
|
|
357
|
-
if (
|
|
358
|
-
let r =
|
|
360
|
+
const n = window.getSelection();
|
|
361
|
+
if (n && !n.isCollapsed && n.rangeCount > 0) {
|
|
362
|
+
let r = n.getRangeAt(0).commonAncestorContainer;
|
|
359
363
|
r.nodeType === Node.TEXT_NODE && (r = r.parentElement);
|
|
360
364
|
const { keyboardIgnoreSelectors: c } = this.options;
|
|
361
365
|
if (c != null && c.length && r)
|
|
@@ -384,9 +388,9 @@ class Ft {
|
|
|
384
388
|
*/
|
|
385
389
|
static debounce(t, e) {
|
|
386
390
|
let s = null;
|
|
387
|
-
return function(...
|
|
391
|
+
return function(...o) {
|
|
388
392
|
s !== null && clearTimeout(s), s = setTimeout(() => {
|
|
389
|
-
t.apply(this,
|
|
393
|
+
t.apply(this, o);
|
|
390
394
|
}, e);
|
|
391
395
|
};
|
|
392
396
|
}
|
|
@@ -436,12 +440,12 @@ class js {
|
|
|
436
440
|
* @returns
|
|
437
441
|
*/
|
|
438
442
|
_handleMessage({ data: t }) {
|
|
439
|
-
const { requestId: e, success: s, data:
|
|
443
|
+
const { requestId: e, success: s, data: o, error: n } = t, i = this._callbacks.get(e);
|
|
440
444
|
if (!i) {
|
|
441
445
|
console.warn(`No callback found for requestId: ${e}`);
|
|
442
446
|
return;
|
|
443
447
|
}
|
|
444
|
-
s ? i.resolve(
|
|
448
|
+
s ? i.resolve(o) : i.reject(new Error(n)), this._callbacks.delete(e);
|
|
445
449
|
}
|
|
446
450
|
/**
|
|
447
451
|
* Универсальный метод отправки команды в воркер
|
|
@@ -451,9 +455,9 @@ class js {
|
|
|
451
455
|
* @returns Promise, который будет выполнен, когда воркер вернет ответ
|
|
452
456
|
*/
|
|
453
457
|
post(t, e, s = []) {
|
|
454
|
-
const
|
|
455
|
-
return new Promise((
|
|
456
|
-
this._callbacks.set(
|
|
458
|
+
const o = `${t}:${V(8)}`;
|
|
459
|
+
return new Promise((n, i) => {
|
|
460
|
+
this._callbacks.set(o, { resolve: n, reject: i }), this.worker.postMessage({ action: t, payload: e, requestId: o }, s);
|
|
457
461
|
});
|
|
458
462
|
}
|
|
459
463
|
/**
|
|
@@ -464,23 +468,23 @@ class js {
|
|
|
464
468
|
}
|
|
465
469
|
}
|
|
466
470
|
const rt = 12, Is = 2, he = 8, ue = 20, Cs = 100, ge = 20, fe = 8, Ts = 100, te = 32, ve = 1, Es = "#2B2D33", be = "#3D8BF4", Me = "#FFFFFF";
|
|
467
|
-
function Kt(h, t, e, s,
|
|
468
|
-
const
|
|
469
|
-
h.save(), h.translate(t, e), h.rotate(dt.degreesToRadians(
|
|
471
|
+
function Kt(h, t, e, s, o) {
|
|
472
|
+
const n = rt, i = Is;
|
|
473
|
+
h.save(), h.translate(t, e), h.rotate(dt.degreesToRadians(o.angle)), h.fillStyle = Me, h.strokeStyle = be, h.lineWidth = ve, h.beginPath(), h.roundRect(-n / 2, -n / 2, n, n, i), h.fill(), h.stroke(), h.restore();
|
|
470
474
|
}
|
|
471
|
-
function Ue(h, t, e, s,
|
|
472
|
-
const
|
|
473
|
-
h.save(), h.translate(t, e), h.rotate(dt.degreesToRadians(
|
|
475
|
+
function Ue(h, t, e, s, o) {
|
|
476
|
+
const n = he, i = ue, a = Cs;
|
|
477
|
+
h.save(), h.translate(t, e), h.rotate(dt.degreesToRadians(o.angle)), h.fillStyle = Me, h.strokeStyle = be, h.lineWidth = ve, h.beginPath(), h.roundRect(-n / 2, -i / 2, n, i, a), h.fill(), h.stroke(), h.restore();
|
|
474
478
|
}
|
|
475
|
-
function Pe(h, t, e, s,
|
|
476
|
-
const
|
|
477
|
-
h.save(), h.translate(t, e), h.rotate(dt.degreesToRadians(
|
|
479
|
+
function Pe(h, t, e, s, o) {
|
|
480
|
+
const n = ge, i = fe, a = Ts;
|
|
481
|
+
h.save(), h.translate(t, e), h.rotate(dt.degreesToRadians(o.angle)), h.fillStyle = Me, h.strokeStyle = be, h.lineWidth = ve, h.beginPath(), h.roundRect(-n / 2, -i / 2, n, i, a), h.fill(), h.stroke(), h.restore();
|
|
478
482
|
}
|
|
479
483
|
const Os = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", ts = new Image();
|
|
480
484
|
ts.src = Os;
|
|
481
|
-
function Ls(h, t, e, s,
|
|
485
|
+
function Ls(h, t, e, s, o) {
|
|
482
486
|
const i = te / 2;
|
|
483
|
-
h.save(), h.translate(t, e), h.rotate(dt.degreesToRadians(
|
|
487
|
+
h.save(), h.translate(t, e), h.rotate(dt.degreesToRadians(o.angle)), h.fillStyle = Es, h.beginPath(), h.arc(0, 0, i, 0, 2 * Math.PI), h.fill(), h.drawImage(ts, -i / 2, -i / 2, i, i), h.restore();
|
|
484
488
|
}
|
|
485
489
|
const Ds = {
|
|
486
490
|
// Угловые точки
|
|
@@ -558,9 +562,9 @@ class $ {
|
|
|
558
562
|
static wrapWidthControl(t) {
|
|
559
563
|
if (!(t != null && t.actionHandler)) return;
|
|
560
564
|
const e = t.actionHandler;
|
|
561
|
-
t.actionHandler = (s,
|
|
562
|
-
const a =
|
|
563
|
-
return !a || a.locked || a.lockScalingX ? !1 : e(s,
|
|
565
|
+
t.actionHandler = (s, o, n, i) => {
|
|
566
|
+
const a = o == null ? void 0 : o.target;
|
|
567
|
+
return !a || a.locked || a.lockScalingX ? !1 : e(s, o, n, i);
|
|
564
568
|
};
|
|
565
569
|
}
|
|
566
570
|
/**
|
|
@@ -568,8 +572,8 @@ class $ {
|
|
|
568
572
|
*/
|
|
569
573
|
static applyControlOverrides(t) {
|
|
570
574
|
Object.entries(Ds).forEach(([e, s]) => {
|
|
571
|
-
const
|
|
572
|
-
|
|
575
|
+
const o = t[e];
|
|
576
|
+
o && (Object.assign(o, s), e === "mtr" && (o.cursorStyle = "grab", o.mouseDownHandler = (n, i, a, r) => {
|
|
573
577
|
var d;
|
|
574
578
|
const c = i == null ? void 0 : i.target;
|
|
575
579
|
(d = c == null ? void 0 : c.canvas) == null || d.setCursor("grabbing");
|
|
@@ -583,14 +587,14 @@ class $ {
|
|
|
583
587
|
const t = xe.createObjectDefaultControls();
|
|
584
588
|
$.applyControlOverrides(t), Ne.ownDefaults.controls = t;
|
|
585
589
|
const e = xe.createTextboxDefaultControls();
|
|
586
|
-
$.applyControlOverrides(e), e.mt && (e.mt.visible = !1), e.mb && (e.mb.visible = !1), $.wrapWidthControl(e.ml), $.wrapWidthControl(e.mr),
|
|
590
|
+
$.applyControlOverrides(e), e.mt && (e.mt.visible = !1), e.mb && (e.mb.visible = !1), $.wrapWidthControl(e.ml), $.wrapWidthControl(e.mr), st.ownDefaults.controls = e, $.patchActiveSelectionBounds(), Ne.ownDefaults.snapAngle = 1;
|
|
587
591
|
}
|
|
588
592
|
/**
|
|
589
593
|
* Обновляет алгоритм расчёта границ ActiveSelection, чтобы учитывать фон и отступы текстовых объектов.
|
|
590
594
|
*/
|
|
591
595
|
static patchActiveSelectionBounds() {
|
|
592
596
|
const t = U.prototype, e = t._calcBoundsFromObjects;
|
|
593
|
-
t._calcBoundsFromObjects = function(...
|
|
597
|
+
t._calcBoundsFromObjects = function(...n) {
|
|
594
598
|
var g, f;
|
|
595
599
|
const i = (f = (g = this.getObjects) == null ? void 0 : g.call(this)) != null ? f : [];
|
|
596
600
|
$.applyTextSelectionScalingLock({
|
|
@@ -601,7 +605,7 @@ class $ {
|
|
|
601
605
|
objects: i
|
|
602
606
|
});
|
|
603
607
|
if (!a)
|
|
604
|
-
return e ? e.apply(this,
|
|
608
|
+
return e ? e.apply(this, n) : void 0;
|
|
605
609
|
const { left: r, top: c, width: d, height: l } = a;
|
|
606
610
|
this.set({
|
|
607
611
|
flipX: !1,
|
|
@@ -609,13 +613,13 @@ class $ {
|
|
|
609
613
|
width: d,
|
|
610
614
|
height: l
|
|
611
615
|
});
|
|
612
|
-
const u = new
|
|
616
|
+
const u = new tt(r + d / 2, c + l / 2);
|
|
613
617
|
return this.setPositionByOrigin(u, "center", "center"), a;
|
|
614
618
|
};
|
|
615
619
|
const s = t._onAfterObjectsChange;
|
|
616
|
-
t._onAfterObjectsChange = function(
|
|
620
|
+
t._onAfterObjectsChange = function(n, i) {
|
|
617
621
|
var p, m;
|
|
618
|
-
const a = s ? s.call(this,
|
|
622
|
+
const a = s ? s.call(this, n, i) : void 0, r = (m = (p = this.getObjects) == null ? void 0 : p.call(this)) != null ? m : [];
|
|
619
623
|
$.applyTextSelectionScalingLock({
|
|
620
624
|
selection: this,
|
|
621
625
|
objects: r
|
|
@@ -624,30 +628,30 @@ class $ {
|
|
|
624
628
|
objects: r
|
|
625
629
|
});
|
|
626
630
|
if (!c) return a;
|
|
627
|
-
const { left: d, top: l, width: u, height: g } = c, f = new
|
|
631
|
+
const { left: d, top: l, width: u, height: g } = c, f = new tt(d + u / 2, l + g / 2);
|
|
628
632
|
return this.set({
|
|
629
633
|
width: u,
|
|
630
634
|
height: g
|
|
631
635
|
}), this.setPositionByOrigin(f, "center", "center"), this.setCoords(), a;
|
|
632
636
|
};
|
|
633
|
-
const
|
|
634
|
-
Be.prototype.calcBoundingBox = function(
|
|
637
|
+
const o = Be.prototype.calcBoundingBox;
|
|
638
|
+
Be.prototype.calcBoundingBox = function(n, i) {
|
|
635
639
|
const { target: a, type: r, overrides: c } = i;
|
|
636
640
|
if (r === "imperative" && c)
|
|
637
641
|
return c;
|
|
638
642
|
if (!(a instanceof U))
|
|
639
|
-
return
|
|
643
|
+
return o.call(this, n, i);
|
|
640
644
|
$.applyTextSelectionScalingLock({
|
|
641
645
|
selection: a,
|
|
642
|
-
objects:
|
|
646
|
+
objects: n
|
|
643
647
|
});
|
|
644
|
-
const d = $.calculateActiveSelectionBounds({ objects:
|
|
648
|
+
const d = $.calculateActiveSelectionBounds({ objects: n });
|
|
645
649
|
if (!d)
|
|
646
|
-
return
|
|
647
|
-
const { left: l, top: u, width: g, height: f } = d, p = new
|
|
650
|
+
return o.call(this, n, i);
|
|
651
|
+
const { left: l, top: u, width: g, height: f } = d, p = new tt(g, f), m = new tt(l + g / 2, u + f / 2);
|
|
648
652
|
return r === "initialization" ? {
|
|
649
653
|
center: m,
|
|
650
|
-
relativeCorrection: new
|
|
654
|
+
relativeCorrection: new tt(0, 0),
|
|
651
655
|
size: p
|
|
652
656
|
} : {
|
|
653
657
|
center: m,
|
|
@@ -662,12 +666,12 @@ class $ {
|
|
|
662
666
|
objects: t
|
|
663
667
|
}) {
|
|
664
668
|
if (!t.length) return null;
|
|
665
|
-
const e = t.map((a) => a.getBoundingRect()), s = Math.min(...e.map(({ left: a }) => a)),
|
|
669
|
+
const e = t.map((a) => a.getBoundingRect()), s = Math.min(...e.map(({ left: a }) => a)), o = Math.min(...e.map(({ top: a }) => a)), n = Math.max(...e.map(({ left: a, width: r }) => a + r));
|
|
666
670
|
return {
|
|
667
|
-
height: Math.max(...e.map(({ top: a, height: r }) => a + r)) -
|
|
671
|
+
height: Math.max(...e.map(({ top: a, height: r }) => a + r)) - o,
|
|
668
672
|
left: s,
|
|
669
|
-
top:
|
|
670
|
-
width:
|
|
673
|
+
top: o,
|
|
674
|
+
width: n - s
|
|
671
675
|
};
|
|
672
676
|
}
|
|
673
677
|
/**
|
|
@@ -677,7 +681,7 @@ class $ {
|
|
|
677
681
|
selection: t,
|
|
678
682
|
objects: e
|
|
679
683
|
}) {
|
|
680
|
-
const s = e.some((
|
|
684
|
+
const s = e.some((o) => o instanceof st);
|
|
681
685
|
t.setControlsVisibility({
|
|
682
686
|
mt: !s,
|
|
683
687
|
mb: !s,
|
|
@@ -695,33 +699,33 @@ const z = class z {
|
|
|
695
699
|
}
|
|
696
700
|
loadFonts() {
|
|
697
701
|
return k(this, null, function* () {
|
|
698
|
-
var
|
|
699
|
-
const t = (
|
|
702
|
+
var o;
|
|
703
|
+
const t = (o = this.fonts) != null ? o : [];
|
|
700
704
|
if (!t.length) return;
|
|
701
705
|
const e = typeof document != "undefined" ? document : void 0;
|
|
702
706
|
if (!e) return;
|
|
703
|
-
const s = t.map((
|
|
707
|
+
const s = t.map((n) => z.loadFont(n, e));
|
|
704
708
|
yield Promise.allSettled(s);
|
|
705
709
|
});
|
|
706
710
|
}
|
|
707
711
|
static loadFont(t, e) {
|
|
708
712
|
return k(this, null, function* () {
|
|
709
713
|
var c, d;
|
|
710
|
-
const s = typeof FontFace != "undefined",
|
|
711
|
-
if (!
|
|
712
|
-
const i = z.normalizeFontSource(
|
|
714
|
+
const s = typeof FontFace != "undefined", o = (c = t.family) == null ? void 0 : c.trim(), n = (d = t.source) == null ? void 0 : d.trim();
|
|
715
|
+
if (!o || !n) return;
|
|
716
|
+
const i = z.normalizeFontSource(n), a = z.getDescriptorSnapshot(t.descriptors), r = z.getFontRegistrationKey(o, i, a);
|
|
713
717
|
if (!z.registeredFontKeys.has(r)) {
|
|
714
|
-
if (z.isFontFaceAlreadyApplied(e,
|
|
718
|
+
if (z.isFontFaceAlreadyApplied(e, o, a)) {
|
|
715
719
|
z.registeredFontKeys.add(r);
|
|
716
720
|
return;
|
|
717
721
|
}
|
|
718
722
|
if (s && e.fonts && typeof e.fonts.add == "function")
|
|
719
723
|
try {
|
|
720
|
-
const u = yield new FontFace(
|
|
724
|
+
const u = yield new FontFace(o, i, t.descriptors).load();
|
|
721
725
|
e.fonts.add(u), z.registeredFontKeys.add(r);
|
|
722
726
|
return;
|
|
723
727
|
} catch (l) {
|
|
724
|
-
console.warn(`Не удалось загрузить шрифт "${
|
|
728
|
+
console.warn(`Не удалось загрузить шрифт "${o}" через FontFace API`, l);
|
|
725
729
|
}
|
|
726
730
|
z.injectFontFace({
|
|
727
731
|
font: t,
|
|
@@ -736,14 +740,14 @@ const z = class z {
|
|
|
736
740
|
font: t,
|
|
737
741
|
source: e,
|
|
738
742
|
doc: s,
|
|
739
|
-
registrationKey:
|
|
743
|
+
registrationKey: o
|
|
740
744
|
}) {
|
|
741
745
|
var d;
|
|
742
|
-
const { descriptors:
|
|
746
|
+
const { descriptors: n } = t, i = (d = t.family) == null ? void 0 : d.trim();
|
|
743
747
|
if (!i) return;
|
|
744
748
|
const a = s.createElement("style");
|
|
745
|
-
a.setAttribute("data-editor-font", i), a.setAttribute("data-editor-font-key",
|
|
746
|
-
const r = z.descriptorsToCss(
|
|
749
|
+
a.setAttribute("data-editor-font", i), a.setAttribute("data-editor-font-key", o);
|
|
750
|
+
const r = z.descriptorsToCss(n), c = [
|
|
747
751
|
"@font-face {",
|
|
748
752
|
` font-family: ${z.formatFontFamilyForCss(i)};`,
|
|
749
753
|
` src: ${e};`,
|
|
@@ -751,7 +755,7 @@ const z = class z {
|
|
|
751
755
|
"}"
|
|
752
756
|
];
|
|
753
757
|
a.textContent = c.join(`
|
|
754
|
-
`), s.head.appendChild(a), z.registeredFontKeys.add(
|
|
758
|
+
`), s.head.appendChild(a), z.registeredFontKeys.add(o);
|
|
755
759
|
}
|
|
756
760
|
static normalizeFontSource(t) {
|
|
757
761
|
const e = t.trim();
|
|
@@ -762,8 +766,8 @@ const z = class z {
|
|
|
762
766
|
}
|
|
763
767
|
static normalizeDescriptorValue(t, e) {
|
|
764
768
|
if (typeof t == "string") {
|
|
765
|
-
const
|
|
766
|
-
return
|
|
769
|
+
const o = t.trim();
|
|
770
|
+
return o.length > 0 ? o : e;
|
|
767
771
|
}
|
|
768
772
|
if (t == null)
|
|
769
773
|
return e;
|
|
@@ -802,13 +806,13 @@ const z = class z {
|
|
|
802
806
|
].join("::");
|
|
803
807
|
}
|
|
804
808
|
static isFontFaceAlreadyApplied(t, e, s) {
|
|
805
|
-
const
|
|
806
|
-
if (!
|
|
807
|
-
const
|
|
809
|
+
const o = t.fonts;
|
|
810
|
+
if (!o || typeof o.forEach != "function") return !1;
|
|
811
|
+
const n = z.normalizeFamilyName(e);
|
|
808
812
|
let i = !1;
|
|
809
813
|
try {
|
|
810
|
-
|
|
811
|
-
if (i || z.normalizeFamilyName(a.family) !==
|
|
814
|
+
o.forEach((a) => {
|
|
815
|
+
if (i || z.normalizeFamilyName(a.family) !== n) return;
|
|
812
816
|
const c = z.getDescriptorSnapshot({
|
|
813
817
|
style: a.style,
|
|
814
818
|
weight: a.weight,
|
|
@@ -839,9 +843,9 @@ const z = class z {
|
|
|
839
843
|
descentOverride: "descent-override",
|
|
840
844
|
lineGapOverride: "line-gap-override"
|
|
841
845
|
};
|
|
842
|
-
return Object.entries(t).filter(([, s]) => s != null && `${s}`.length > 0).map(([s,
|
|
846
|
+
return Object.entries(t).filter(([, s]) => s != null && `${s}`.length > 0).map(([s, o]) => {
|
|
843
847
|
var i;
|
|
844
|
-
return `${(i = e[s]) != null ? i : s}: ${
|
|
848
|
+
return `${(i = e[s]) != null ? i : s}: ${o};`;
|
|
845
849
|
});
|
|
846
850
|
}
|
|
847
851
|
};
|
|
@@ -965,7 +969,7 @@ class Ps {
|
|
|
965
969
|
_initToolbar() {
|
|
966
970
|
if (!this.options.showToolbar) return;
|
|
967
971
|
const t = this.options.toolbar || {};
|
|
968
|
-
this.config =
|
|
972
|
+
this.config = bt(B(B({}, Pt), t), {
|
|
969
973
|
style: B(B({}, Pt.style), t.style || {}),
|
|
970
974
|
btnStyle: B(B({}, Pt.btnStyle), t.btnStyle || {}),
|
|
971
975
|
icons: B(B({}, Pt.icons), t.icons || {}),
|
|
@@ -980,11 +984,11 @@ class Ps {
|
|
|
980
984
|
_createDOM() {
|
|
981
985
|
const { style: t } = this.config;
|
|
982
986
|
this.el = document.createElement("div"), Object.assign(this.el.style, t), this.canvas.wrapperEl.appendChild(this.el), this._onBtnOver = (e) => {
|
|
983
|
-
const
|
|
984
|
-
|
|
987
|
+
const o = e.target.closest("button");
|
|
988
|
+
o && Object.assign(o.style, this.config.btnHover);
|
|
985
989
|
}, this._onBtnOut = (e) => {
|
|
986
|
-
const
|
|
987
|
-
|
|
990
|
+
const o = e.target.closest("button");
|
|
991
|
+
o && Object.assign(o.style, this.config.btnStyle);
|
|
988
992
|
}, this.el.addEventListener("mouseover", this._onBtnOver), this.el.addEventListener("mouseout", this._onBtnOut);
|
|
989
993
|
}
|
|
990
994
|
/**
|
|
@@ -996,10 +1000,10 @@ class Ps {
|
|
|
996
1000
|
_renderButtons(t) {
|
|
997
1001
|
this.el.innerHTML = "";
|
|
998
1002
|
for (const e of t) {
|
|
999
|
-
const { name: s, handle:
|
|
1000
|
-
r.innerHTML = o
|
|
1003
|
+
const { name: s, handle: o } = e, { icons: n = {}, btnStyle: i, handlers: a = {} } = this.config, r = document.createElement("button");
|
|
1004
|
+
r.innerHTML = n[o] ? `<img src="${n[o]}" title="${s}" />` : s, Object.assign(r.style, i), r.onclick = () => {
|
|
1001
1005
|
var c;
|
|
1002
|
-
return (c = a[
|
|
1006
|
+
return (c = a[o]) == null ? void 0 : c.call(a, this.editor);
|
|
1003
1007
|
}, r.onmousedown = (c) => {
|
|
1004
1008
|
c.stopPropagation(), c.preventDefault();
|
|
1005
1009
|
}, r.ondragstart = (c) => c.preventDefault(), this.el.appendChild(r);
|
|
@@ -1070,9 +1074,9 @@ class Ps {
|
|
|
1070
1074
|
this.el.style.display = "none";
|
|
1071
1075
|
return;
|
|
1072
1076
|
}
|
|
1073
|
-
const { el: e, config: s, canvas:
|
|
1077
|
+
const { el: e, config: s, canvas: o } = this;
|
|
1074
1078
|
t.setCoords();
|
|
1075
|
-
const
|
|
1079
|
+
const n = o.getZoom(), [, , , , i, a] = o.viewportTransform, { x: r } = t.getCenterPoint(), { top: c, height: d } = t.getBoundingRect(), u = r * n + i - e.offsetWidth / 2, g = s.offsetTop || 0, f = (c + d) * n + a + g;
|
|
1076
1080
|
Object.assign(e.style, {
|
|
1077
1081
|
left: `${u}px`,
|
|
1078
1082
|
top: `${f}px`,
|
|
@@ -1160,9 +1164,9 @@ class we {
|
|
|
1160
1164
|
*/
|
|
1161
1165
|
_positionIndicator(t) {
|
|
1162
1166
|
const e = this.canvas.wrapperEl.getBoundingClientRect();
|
|
1163
|
-
let s = t.clientX - e.left + We,
|
|
1164
|
-
const
|
|
1165
|
-
s + i > e.width && (s = t.clientX - e.left - i - We),
|
|
1167
|
+
let s = t.clientX - e.left + We, o = t.clientY - e.top + Fe;
|
|
1168
|
+
const n = this.el.getBoundingClientRect(), i = n.width, a = n.height;
|
|
1169
|
+
s + i > e.width && (s = t.clientX - e.left - i - We), o + a > e.height && (o = t.clientY - e.top - a - Fe), this.el.style.left = `${s}px`, this.el.style.top = `${o}px`;
|
|
1166
1170
|
}
|
|
1167
1171
|
/**
|
|
1168
1172
|
* Показать индикатор
|
|
@@ -1204,6 +1208,7 @@ const es = [
|
|
|
1204
1208
|
"width",
|
|
1205
1209
|
"height",
|
|
1206
1210
|
"locked",
|
|
1211
|
+
"editable",
|
|
1207
1212
|
"lockMovementX",
|
|
1208
1213
|
"lockMovementY",
|
|
1209
1214
|
"lockRotation",
|
|
@@ -1242,7 +1247,7 @@ class Ys {
|
|
|
1242
1247
|
_createDiffPatcher() {
|
|
1243
1248
|
this.diffPatcher = bs({
|
|
1244
1249
|
objectHash(t) {
|
|
1245
|
-
const e = t, s = t,
|
|
1250
|
+
const e = t, s = t, o = s.styles ? JSON.stringify(s.styles) : "", n = e.customData ? JSON.stringify(e.customData) : "";
|
|
1246
1251
|
return [
|
|
1247
1252
|
e.id,
|
|
1248
1253
|
e.backgroundId,
|
|
@@ -1258,7 +1263,7 @@ class Ys {
|
|
|
1258
1263
|
e.scaleY,
|
|
1259
1264
|
e.angle,
|
|
1260
1265
|
e.opacity,
|
|
1261
|
-
|
|
1266
|
+
n,
|
|
1262
1267
|
s.text,
|
|
1263
1268
|
s.textCaseRaw,
|
|
1264
1269
|
s.uppercase,
|
|
@@ -1272,7 +1277,7 @@ class Ys {
|
|
|
1272
1277
|
s.fill,
|
|
1273
1278
|
s.stroke,
|
|
1274
1279
|
s.strokeWidth,
|
|
1275
|
-
|
|
1280
|
+
o,
|
|
1276
1281
|
s.paddingTop,
|
|
1277
1282
|
s.paddingRight,
|
|
1278
1283
|
s.paddingBottom,
|
|
@@ -1320,10 +1325,10 @@ class Ys {
|
|
|
1320
1325
|
*/
|
|
1321
1326
|
getFullState() {
|
|
1322
1327
|
const { baseState: t, currentIndex: e, patches: s } = this;
|
|
1323
|
-
let
|
|
1324
|
-
for (let
|
|
1325
|
-
|
|
1326
|
-
return console.log("getFullState state",
|
|
1328
|
+
let o = JSON.parse(JSON.stringify(t));
|
|
1329
|
+
for (let n = 0; n < e; n += 1)
|
|
1330
|
+
o = this.diffPatcher.patch(o, s[n].diff);
|
|
1331
|
+
return console.log("getFullState state", o), o;
|
|
1327
1332
|
}
|
|
1328
1333
|
/**
|
|
1329
1334
|
* Сохраняем текущее состояние в виде диффа от последнего сохранённого полного состояния.
|
|
@@ -1359,14 +1364,14 @@ class Ys {
|
|
|
1359
1364
|
return k(this, null, function* () {
|
|
1360
1365
|
if (!t) return;
|
|
1361
1366
|
console.log("loadStateFromFullState fullState", t);
|
|
1362
|
-
const { canvas: e, canvasManager: s, interactionBlocker:
|
|
1363
|
-
|
|
1367
|
+
const { canvas: e, canvasManager: s, interactionBlocker: o, backgroundManager: n } = this.editor, { width: i, height: a } = e;
|
|
1368
|
+
o.overlayMask = null, yield e.loadFromJSON(t);
|
|
1364
1369
|
const r = e.getObjects().find((l) => l.id === "montage-area");
|
|
1365
1370
|
r && (this.editor.montageArea = r, (i !== e.getWidth() || a !== e.getHeight()) && s.updateCanvas());
|
|
1366
1371
|
const c = e.getObjects().find((l) => l.id === "overlay-mask");
|
|
1367
|
-
c && (
|
|
1372
|
+
c && (o.overlayMask = c, o.overlayMask.visible = !1);
|
|
1368
1373
|
const d = e.getObjects().find((l) => l.id === "background");
|
|
1369
|
-
d ? (
|
|
1374
|
+
d ? (n.backgroundObject = d, n.refresh()) : n.removeBackground({ withoutSave: !0 }), e.renderAll(), e.fire("editor:history-state-loaded", {
|
|
1370
1375
|
fullState: t,
|
|
1371
1376
|
currentIndex: this.currentIndex,
|
|
1372
1377
|
totalChangesCount: this.totalChangesCount,
|
|
@@ -1451,9 +1456,9 @@ class Ys {
|
|
|
1451
1456
|
});
|
|
1452
1457
|
}
|
|
1453
1458
|
_withTemporaryUnlock(t) {
|
|
1454
|
-
var
|
|
1459
|
+
var o, n, i;
|
|
1455
1460
|
const e = [];
|
|
1456
|
-
((i = (
|
|
1461
|
+
((i = (n = (o = this.canvas).getObjects) == null ? void 0 : n.call(o)) != null ? i : []).forEach((a) => {
|
|
1457
1462
|
const r = typeof a.type == "string" ? a.type.toLowerCase() : "";
|
|
1458
1463
|
if (!(r === "textbox" || r === "i-text" || typeof a.isEditing == "boolean") || a.locked) return;
|
|
1459
1464
|
const d = !!a.lockMovementX, l = !!a.lockMovementY;
|
|
@@ -1473,7 +1478,7 @@ class Ys {
|
|
|
1473
1478
|
}
|
|
1474
1479
|
}
|
|
1475
1480
|
}
|
|
1476
|
-
const Hs = 0.1, Zs = 2, Ye = 0.1, Gs = 90, Rt = 16, _t = 16,
|
|
1481
|
+
const Hs = 0.1, Zs = 2, Ye = 0.1, Gs = 90, Rt = 16, _t = 16, St = 4096, At = 4096, He = "application/image-editor:", Qt = [
|
|
1477
1482
|
"format",
|
|
1478
1483
|
"uppercase",
|
|
1479
1484
|
"textCaseRaw",
|
|
@@ -1509,8 +1514,8 @@ class ct {
|
|
|
1509
1514
|
const {
|
|
1510
1515
|
source: e,
|
|
1511
1516
|
scale: s = `image-${this.options.scaleType}`,
|
|
1512
|
-
withoutSave:
|
|
1513
|
-
fromClipboard:
|
|
1517
|
+
withoutSave: o = !1,
|
|
1518
|
+
fromClipboard: n = !1,
|
|
1514
1519
|
isBackground: i = !1,
|
|
1515
1520
|
withoutSelection: a = !1,
|
|
1516
1521
|
withoutAdding: r = !1
|
|
@@ -1530,7 +1535,7 @@ class ct {
|
|
|
1530
1535
|
contentType: f,
|
|
1531
1536
|
acceptContentTypes: m,
|
|
1532
1537
|
acceptFormats: v,
|
|
1533
|
-
fromClipboard:
|
|
1538
|
+
fromClipboard: n,
|
|
1534
1539
|
isBackground: i,
|
|
1535
1540
|
withoutSelection: a,
|
|
1536
1541
|
withoutAdding: r
|
|
@@ -1557,7 +1562,7 @@ class ct {
|
|
|
1557
1562
|
contentType: f,
|
|
1558
1563
|
acceptContentTypes: m,
|
|
1559
1564
|
acceptFormats: v,
|
|
1560
|
-
fromClipboard:
|
|
1565
|
+
fromClipboard: n,
|
|
1561
1566
|
isBackground: i,
|
|
1562
1567
|
withoutSelection: a,
|
|
1563
1568
|
withoutAdding: r
|
|
@@ -1572,7 +1577,7 @@ class ct {
|
|
|
1572
1577
|
if (S instanceof Ut) {
|
|
1573
1578
|
const j = S.getElement();
|
|
1574
1579
|
let A = "";
|
|
1575
|
-
if (j instanceof HTMLImageElement ? A = j.src : j instanceof HTMLCanvasElement && (A = j.toDataURL()), b >
|
|
1580
|
+
if (j instanceof HTMLImageElement ? A = j.src : j instanceof HTMLCanvasElement && (A = j.toDataURL()), b > At || y > St) {
|
|
1576
1581
|
const C = yield this.resizeImageToBoundaries(A, "max"), w = URL.createObjectURL(C);
|
|
1577
1582
|
this._createdBlobUrls.push(w), S = yield Ut.fromURL(w, { crossOrigin: "anonymous" });
|
|
1578
1583
|
} else if (b < _t || y < Rt) {
|
|
@@ -1591,14 +1596,14 @@ class ct {
|
|
|
1591
1596
|
format: p,
|
|
1592
1597
|
contentType: f,
|
|
1593
1598
|
scale: s,
|
|
1594
|
-
withoutSave:
|
|
1599
|
+
withoutSave: o,
|
|
1595
1600
|
source: e,
|
|
1596
|
-
fromClipboard:
|
|
1601
|
+
fromClipboard: n,
|
|
1597
1602
|
isBackground: i,
|
|
1598
1603
|
withoutSelection: a,
|
|
1599
1604
|
withoutAdding: r
|
|
1600
1605
|
};
|
|
1601
|
-
return r ? (u.resumeHistory(), c.fire("editor:image-imported", I), I) : (c.add(S), c.centerObject(S), a || c.setActiveObject(S), c.renderAll(), u.resumeHistory(),
|
|
1606
|
+
return r ? (u.resumeHistory(), c.fire("editor:image-imported", I), I) : (c.add(S), c.centerObject(S), a || c.setActiveObject(S), c.renderAll(), u.resumeHistory(), o || u.saveState(), c.fire("editor:image-imported", I), I);
|
|
1602
1607
|
} catch (M) {
|
|
1603
1608
|
return g.emitError({
|
|
1604
1609
|
origin: "ImageManager",
|
|
@@ -1610,8 +1615,8 @@ class ct {
|
|
|
1610
1615
|
format: p,
|
|
1611
1616
|
contentType: f,
|
|
1612
1617
|
scale: s,
|
|
1613
|
-
withoutSave:
|
|
1614
|
-
fromClipboard:
|
|
1618
|
+
withoutSave: o,
|
|
1619
|
+
fromClipboard: n,
|
|
1615
1620
|
isBackground: i,
|
|
1616
1621
|
withoutSelection: a,
|
|
1617
1622
|
withoutAdding: r
|
|
@@ -1630,13 +1635,13 @@ class ct {
|
|
|
1630
1635
|
*/
|
|
1631
1636
|
resizeImageToBoundaries(t, e = "max") {
|
|
1632
1637
|
return k(this, null, function* () {
|
|
1633
|
-
let s = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${
|
|
1638
|
+
let s = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${St}x${At}`;
|
|
1634
1639
|
e === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${Rt}x${_t}`);
|
|
1635
|
-
const
|
|
1640
|
+
const o = {
|
|
1636
1641
|
dataURL: t,
|
|
1637
1642
|
sizeType: e,
|
|
1638
|
-
maxWidth:
|
|
1639
|
-
maxHeight:
|
|
1643
|
+
maxWidth: St,
|
|
1644
|
+
maxHeight: At,
|
|
1640
1645
|
minWidth: Rt,
|
|
1641
1646
|
minHeight: _t
|
|
1642
1647
|
};
|
|
@@ -1645,8 +1650,8 @@ class ct {
|
|
|
1645
1650
|
method: "resizeImageToBoundaries",
|
|
1646
1651
|
code: "IMAGE_RESIZE_WARNING",
|
|
1647
1652
|
message: s,
|
|
1648
|
-
data:
|
|
1649
|
-
}), this.editor.workerManager.post("resizeImage",
|
|
1653
|
+
data: o
|
|
1654
|
+
}), this.editor.workerManager.post("resizeImage", o);
|
|
1650
1655
|
});
|
|
1651
1656
|
}
|
|
1652
1657
|
/**
|
|
@@ -1665,8 +1670,8 @@ class ct {
|
|
|
1665
1670
|
const {
|
|
1666
1671
|
fileName: e = "image.png",
|
|
1667
1672
|
contentType: s = "image/png",
|
|
1668
|
-
exportAsBase64:
|
|
1669
|
-
exportAsBlob:
|
|
1673
|
+
exportAsBase64: o = !1,
|
|
1674
|
+
exportAsBlob: n = !1
|
|
1670
1675
|
} = t, { canvas: i, montageArea: a, workerManager: r, interactionBlocker: c } = this.editor;
|
|
1671
1676
|
try {
|
|
1672
1677
|
const d = s === "application/pdf", l = d ? "image/jpg" : s, u = ct.getFormatFromContentType(l);
|
|
@@ -1685,8 +1690,8 @@ class ct {
|
|
|
1685
1690
|
v.dispose();
|
|
1686
1691
|
const E = {
|
|
1687
1692
|
image: ct._exportSVGStringAsFile(w, {
|
|
1688
|
-
exportAsBase64:
|
|
1689
|
-
exportAsBlob:
|
|
1693
|
+
exportAsBase64: o,
|
|
1694
|
+
exportAsBlob: n,
|
|
1690
1695
|
fileName: e
|
|
1691
1696
|
}),
|
|
1692
1697
|
format: "svg",
|
|
@@ -1700,7 +1705,7 @@ class ct {
|
|
|
1700
1705
|
E ? w(E) : T(new Error("Failed to create Blob from canvas"));
|
|
1701
1706
|
});
|
|
1702
1707
|
});
|
|
1703
|
-
if (v.dispose(),
|
|
1708
|
+
if (v.dispose(), n) {
|
|
1704
1709
|
const w = {
|
|
1705
1710
|
image: y,
|
|
1706
1711
|
format: u,
|
|
@@ -1720,7 +1725,7 @@ class ct {
|
|
|
1720
1725
|
unit: "mm",
|
|
1721
1726
|
format: [T, E]
|
|
1722
1727
|
});
|
|
1723
|
-
if (x.addImage(String(I), "JPG", 0, 0, T, E),
|
|
1728
|
+
if (x.addImage(String(I), "JPG", 0, 0, T, E), o) {
|
|
1724
1729
|
const F = {
|
|
1725
1730
|
image: x.output("datauristring"),
|
|
1726
1731
|
format: "pdf",
|
|
@@ -1737,7 +1742,7 @@ class ct {
|
|
|
1737
1742
|
};
|
|
1738
1743
|
return i.fire("editor:canvas-exported", D), D;
|
|
1739
1744
|
}
|
|
1740
|
-
if (
|
|
1745
|
+
if (o) {
|
|
1741
1746
|
const w = {
|
|
1742
1747
|
image: I,
|
|
1743
1748
|
format: u,
|
|
@@ -1759,7 +1764,7 @@ class ct {
|
|
|
1759
1764
|
method: "exportCanvasAsImageFile",
|
|
1760
1765
|
code: "IMAGE_EXPORT_FAILED",
|
|
1761
1766
|
message: `Ошибка экспорта изображения: ${d.message}`,
|
|
1762
|
-
data: { contentType: s, fileName: e, exportAsBase64:
|
|
1767
|
+
data: { contentType: s, fileName: e, exportAsBase64: o, exportAsBlob: n }
|
|
1763
1768
|
}), null;
|
|
1764
1769
|
}
|
|
1765
1770
|
});
|
|
@@ -1780,8 +1785,8 @@ class ct {
|
|
|
1780
1785
|
const {
|
|
1781
1786
|
object: e,
|
|
1782
1787
|
fileName: s = "image.png",
|
|
1783
|
-
contentType:
|
|
1784
|
-
exportAsBase64:
|
|
1788
|
+
contentType: o = "image/png",
|
|
1789
|
+
exportAsBase64: n = !1,
|
|
1785
1790
|
exportAsBlob: i = !1
|
|
1786
1791
|
} = t, { canvas: a, workerManager: r } = this.editor, c = e || a.getActiveObject();
|
|
1787
1792
|
if (!c)
|
|
@@ -1790,13 +1795,13 @@ class ct {
|
|
|
1790
1795
|
method: "exportObjectAsImageFile",
|
|
1791
1796
|
code: "NO_OBJECT_SELECTED",
|
|
1792
1797
|
message: "Не выбран объект для экспорта",
|
|
1793
|
-
data: { contentType:
|
|
1798
|
+
data: { contentType: o, fileName: s, exportAsBase64: n, exportAsBlob: i }
|
|
1794
1799
|
}), null;
|
|
1795
1800
|
try {
|
|
1796
|
-
const d = ct.getFormatFromContentType(
|
|
1801
|
+
const d = ct.getFormatFromContentType(o);
|
|
1797
1802
|
if (d === "svg") {
|
|
1798
1803
|
const p = c.toSVG(), m = ct._exportSVGStringAsFile(p, {
|
|
1799
|
-
exportAsBase64:
|
|
1804
|
+
exportAsBase64: n,
|
|
1800
1805
|
exportAsBlob: i,
|
|
1801
1806
|
fileName: s
|
|
1802
1807
|
}), v = {
|
|
@@ -1808,7 +1813,7 @@ class ct {
|
|
|
1808
1813
|
};
|
|
1809
1814
|
return a.fire("editor:object-exported", v), v;
|
|
1810
1815
|
}
|
|
1811
|
-
if (
|
|
1816
|
+
if (n && c instanceof Ut) {
|
|
1812
1817
|
const p = yield createImageBitmap(c.getElement()), m = yield r.post(
|
|
1813
1818
|
"toDataURL",
|
|
1814
1819
|
{
|
|
@@ -1821,7 +1826,7 @@ class ct {
|
|
|
1821
1826
|
object: c,
|
|
1822
1827
|
image: m,
|
|
1823
1828
|
format: d,
|
|
1824
|
-
contentType:
|
|
1829
|
+
contentType: o,
|
|
1825
1830
|
fileName: s
|
|
1826
1831
|
};
|
|
1827
1832
|
return a.fire("editor:object-exported", v), v;
|
|
@@ -1838,16 +1843,16 @@ class ct {
|
|
|
1838
1843
|
object: c,
|
|
1839
1844
|
image: u,
|
|
1840
1845
|
format: d,
|
|
1841
|
-
contentType:
|
|
1846
|
+
contentType: o,
|
|
1842
1847
|
fileName: s
|
|
1843
1848
|
};
|
|
1844
1849
|
return a.fire("editor:object-exported", p), p;
|
|
1845
1850
|
}
|
|
1846
|
-
const g = new File([u], s, { type:
|
|
1851
|
+
const g = new File([u], s, { type: o }), f = {
|
|
1847
1852
|
object: c,
|
|
1848
1853
|
image: g,
|
|
1849
1854
|
format: d,
|
|
1850
|
-
contentType:
|
|
1855
|
+
contentType: o,
|
|
1851
1856
|
fileName: s
|
|
1852
1857
|
};
|
|
1853
1858
|
return a.fire("editor:object-exported", f), f;
|
|
@@ -1857,7 +1862,7 @@ class ct {
|
|
|
1857
1862
|
method: "exportObjectAsImageFile",
|
|
1858
1863
|
code: "IMAGE_EXPORT_FAILED",
|
|
1859
1864
|
message: `Ошибка экспорта объекта: ${d.message}`,
|
|
1860
|
-
data: { contentType:
|
|
1865
|
+
data: { contentType: o, fileName: s, exportAsBase64: n, exportAsBlob: i }
|
|
1861
1866
|
}), null;
|
|
1862
1867
|
}
|
|
1863
1868
|
});
|
|
@@ -1924,11 +1929,11 @@ class ct {
|
|
|
1924
1929
|
getContentTypeFromExtension(t) {
|
|
1925
1930
|
var e;
|
|
1926
1931
|
try {
|
|
1927
|
-
const
|
|
1932
|
+
const o = (e = new URL(t).pathname.split(".").pop()) == null ? void 0 : e.toLowerCase(), n = {};
|
|
1928
1933
|
return this.acceptContentTypes.forEach((i) => {
|
|
1929
1934
|
const a = ct.getFormatFromContentType(i);
|
|
1930
|
-
a && (
|
|
1931
|
-
}),
|
|
1935
|
+
a && (n[a] = i);
|
|
1936
|
+
}), o && n[o] || "application/octet-stream";
|
|
1932
1937
|
} catch (s) {
|
|
1933
1938
|
return console.warn("Не удалось определить расширение из URL:", t, s), "application/octet-stream";
|
|
1934
1939
|
}
|
|
@@ -1946,8 +1951,8 @@ class ct {
|
|
|
1946
1951
|
}) {
|
|
1947
1952
|
const { montageArea: s } = this.editor;
|
|
1948
1953
|
if (!s || !t) return 1;
|
|
1949
|
-
const
|
|
1950
|
-
return e === "contain" || e === "image-contain" ? Math.min(
|
|
1954
|
+
const o = s.width, n = s.height, { width: i, height: a } = t;
|
|
1955
|
+
return e === "contain" || e === "image-contain" ? Math.min(o / i, n / a) : e === "cover" || e === "image-cover" ? Math.max(o / i, n / a) : 1;
|
|
1951
1956
|
}
|
|
1952
1957
|
/**
|
|
1953
1958
|
* Преобразует SVG-строку в Blob, файл, или base64
|
|
@@ -1963,9 +1968,9 @@ class ct {
|
|
|
1963
1968
|
static _exportSVGStringAsFile(t, {
|
|
1964
1969
|
exportAsBase64: e,
|
|
1965
1970
|
exportAsBlob: s,
|
|
1966
|
-
fileName:
|
|
1971
|
+
fileName: o = "image.svg"
|
|
1967
1972
|
} = {}) {
|
|
1968
|
-
return s ? new Blob([t], { type: "image/svg+xml" }) : e ? `data:image/svg+xml;base64,${window.btoa(encodeURIComponent(t))}` : new File([t],
|
|
1973
|
+
return s ? new Blob([t], { type: "image/svg+xml" }) : e ? `data:image/svg+xml;base64,${window.btoa(encodeURIComponent(t))}` : new File([t], o.replace(/\.[^/.]+$/, ".svg"), { type: "image/svg+xml" });
|
|
1969
1974
|
}
|
|
1970
1975
|
/**
|
|
1971
1976
|
* Извлекает чистый формат (subtype) из contentType,
|
|
@@ -1979,7 +1984,7 @@ class ct {
|
|
|
1979
1984
|
return e ? e[1] : "";
|
|
1980
1985
|
}
|
|
1981
1986
|
}
|
|
1982
|
-
const
|
|
1987
|
+
const pt = (h, t, e) => Math.max(Math.min(h, e), t), Ze = (h, t) => h * t, Xs = (h, t) => new tt(h / 2, t / 2);
|
|
1983
1988
|
function Ks(h) {
|
|
1984
1989
|
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";
|
|
1985
1990
|
}
|
|
@@ -1998,6 +2003,22 @@ class Qs {
|
|
|
1998
2003
|
const { canvas: t, options: { editorContainer: e } } = this.editor;
|
|
1999
2004
|
return t.editorContainer || e;
|
|
2000
2005
|
}
|
|
2006
|
+
/**
|
|
2007
|
+
* Возвращает центральную точку текущей видимой области канваса.
|
|
2008
|
+
* Если точка находится за пределами монтажной области, она проецируется на ближайшую границу монтажной области.
|
|
2009
|
+
*/
|
|
2010
|
+
getVisibleCenterPoint() {
|
|
2011
|
+
const { canvas: t, montageArea: e } = this.editor, s = t.getZoom(), o = t.viewportTransform, n = t.getWidth(), i = t.getHeight(), a = (n / 2 - o[4]) / s, r = (i / 2 - o[5]) / s, c = e.width / 2, d = e.height / 2, l = pt(
|
|
2012
|
+
a,
|
|
2013
|
+
e.left - c,
|
|
2014
|
+
e.left + c
|
|
2015
|
+
), u = pt(
|
|
2016
|
+
r,
|
|
2017
|
+
e.top - d,
|
|
2018
|
+
e.top + d
|
|
2019
|
+
);
|
|
2020
|
+
return new tt(l, u);
|
|
2021
|
+
}
|
|
2001
2022
|
/**
|
|
2002
2023
|
* Устанавливаем внутреннюю ширину канваса (для экспорта)
|
|
2003
2024
|
* @param width - ширина канваса
|
|
@@ -2007,25 +2028,25 @@ class Qs {
|
|
|
2007
2028
|
* @param options.adaptCanvasToContainer - Адаптировать канвас к контейнеру
|
|
2008
2029
|
* @fires editor:resolution-width-changed
|
|
2009
2030
|
*/
|
|
2010
|
-
setResolutionWidth(t, { preserveProportional: e, withoutSave: s, adaptCanvasToContainer:
|
|
2031
|
+
setResolutionWidth(t, { preserveProportional: e, withoutSave: s, adaptCanvasToContainer: o } = {}) {
|
|
2011
2032
|
var f;
|
|
2012
2033
|
if (!t) return;
|
|
2013
2034
|
const {
|
|
2014
|
-
canvas:
|
|
2035
|
+
canvas: n,
|
|
2015
2036
|
montageArea: i,
|
|
2016
2037
|
options: { canvasBackstoreWidth: a }
|
|
2017
|
-
} = this.editor, { width: r, height: c } = i, d =
|
|
2018
|
-
if (!a || a === "auto" ||
|
|
2038
|
+
} = this.editor, { width: r, height: c } = i, d = pt(Number(t), Rt, St);
|
|
2039
|
+
if (!a || a === "auto" || o ? this.adaptCanvasToContainer() : a ? this.setCanvasBackstoreWidth(Number(a)) : this.setCanvasBackstoreWidth(d), i.set({ width: d }), (f = n.clipPath) == null || f.set({ width: d }), e) {
|
|
2019
2040
|
const p = d / r, m = Ze(c, p);
|
|
2020
2041
|
this.setResolutionHeight(m);
|
|
2021
2042
|
return;
|
|
2022
2043
|
}
|
|
2023
|
-
const { left: l, top: u } = this.getObjectDefaultCoords(i), g =
|
|
2024
|
-
|
|
2044
|
+
const { left: l, top: u } = this.getObjectDefaultCoords(i), g = n.getZoom();
|
|
2045
|
+
n.setViewportTransform([g, 0, 0, g, l, u]), this.centerMontageArea(), s || this.editor.historyManager.saveState(), n.fire("editor:resolution-width-changed", {
|
|
2025
2046
|
width: d,
|
|
2026
2047
|
preserveProportional: e,
|
|
2027
2048
|
withoutSave: s,
|
|
2028
|
-
adaptCanvasToContainer:
|
|
2049
|
+
adaptCanvasToContainer: o
|
|
2029
2050
|
}), this.editor.panConstraintManager.updateBounds();
|
|
2030
2051
|
}
|
|
2031
2052
|
/**
|
|
@@ -2037,25 +2058,25 @@ class Qs {
|
|
|
2037
2058
|
* @param options.adaptCanvasToContainer - Адаптировать канвас к контейнеру
|
|
2038
2059
|
* @fires editor:resolution-height-changed
|
|
2039
2060
|
*/
|
|
2040
|
-
setResolutionHeight(t, { preserveProportional: e, withoutSave: s, adaptCanvasToContainer:
|
|
2061
|
+
setResolutionHeight(t, { preserveProportional: e, withoutSave: s, adaptCanvasToContainer: o } = {}) {
|
|
2041
2062
|
var f;
|
|
2042
2063
|
if (!t) return;
|
|
2043
2064
|
const {
|
|
2044
|
-
canvas:
|
|
2065
|
+
canvas: n,
|
|
2045
2066
|
montageArea: i,
|
|
2046
2067
|
options: { canvasBackstoreHeight: a }
|
|
2047
|
-
} = this.editor, { width: r, height: c } = i, d =
|
|
2048
|
-
if (!a || a === "auto" ||
|
|
2068
|
+
} = this.editor, { width: r, height: c } = i, d = pt(Number(t), _t, At);
|
|
2069
|
+
if (!a || a === "auto" || o ? this.adaptCanvasToContainer() : a ? this.setCanvasBackstoreHeight(Number(a)) : this.setCanvasBackstoreHeight(d), i.set({ height: d }), (f = n.clipPath) == null || f.set({ height: d }), e) {
|
|
2049
2070
|
const p = d / c, m = Ze(r, p);
|
|
2050
2071
|
this.setResolutionWidth(m);
|
|
2051
2072
|
return;
|
|
2052
2073
|
}
|
|
2053
|
-
const { left: l, top: u } = this.getObjectDefaultCoords(i), g =
|
|
2054
|
-
|
|
2074
|
+
const { left: l, top: u } = this.getObjectDefaultCoords(i), g = n.getZoom();
|
|
2075
|
+
n.setViewportTransform([g, 0, 0, g, l, u]), this.centerMontageArea(), s || this.editor.historyManager.saveState(), n.fire("editor:resolution-height-changed", {
|
|
2055
2076
|
height: d,
|
|
2056
2077
|
preserveProportional: e,
|
|
2057
2078
|
withoutSave: s,
|
|
2058
|
-
adaptCanvasToContainer:
|
|
2079
|
+
adaptCanvasToContainer: o
|
|
2059
2080
|
}), this.editor.panConstraintManager.updateBounds();
|
|
2060
2081
|
}
|
|
2061
2082
|
/**
|
|
@@ -2064,16 +2085,16 @@ class Qs {
|
|
|
2064
2085
|
*/
|
|
2065
2086
|
centerMontageArea() {
|
|
2066
2087
|
var r;
|
|
2067
|
-
const { canvas: t, montageArea: e } = this.editor, s = t.getWidth(),
|
|
2088
|
+
const { canvas: t, montageArea: e } = this.editor, s = t.getWidth(), o = t.getHeight(), n = t.getZoom(), i = Xs(s, o);
|
|
2068
2089
|
e.set({
|
|
2069
2090
|
left: s / 2,
|
|
2070
|
-
top:
|
|
2091
|
+
top: o / 2
|
|
2071
2092
|
}), (r = t.clipPath) == null || r.set({
|
|
2072
2093
|
left: s / 2,
|
|
2073
|
-
top:
|
|
2094
|
+
top: o / 2
|
|
2074
2095
|
}), t.renderAll();
|
|
2075
2096
|
const a = t.viewportTransform;
|
|
2076
|
-
a[4] = s / 2 - i.x *
|
|
2097
|
+
a[4] = s / 2 - i.x * n, a[5] = o / 2 - i.y * n, t.setViewportTransform(a), t.renderAll();
|
|
2077
2098
|
}
|
|
2078
2099
|
/**
|
|
2079
2100
|
* Метод для получения координат объекта с учетом текущего зума
|
|
@@ -2089,7 +2110,7 @@ class Qs {
|
|
|
2089
2110
|
code: "NO_ACTIVE_OBJECT",
|
|
2090
2111
|
message: "Не выбран объект для получения координат"
|
|
2091
2112
|
}), { left: 0, top: 0 };
|
|
2092
|
-
const { width:
|
|
2113
|
+
const { width: o, height: n } = s, i = e.getZoom(), a = (o - o * i) / 2, r = (n - n * i) / 2;
|
|
2093
2114
|
return { left: a, top: r };
|
|
2094
2115
|
}
|
|
2095
2116
|
/**
|
|
@@ -2097,7 +2118,7 @@ class Qs {
|
|
|
2097
2118
|
*/
|
|
2098
2119
|
setCanvasBackstoreWidth(t) {
|
|
2099
2120
|
if (!t || typeof t != "number") return;
|
|
2100
|
-
const e =
|
|
2121
|
+
const e = pt(t, Rt, St);
|
|
2101
2122
|
this.editor.canvas.setDimensions({ width: e }, { backstoreOnly: !0 });
|
|
2102
2123
|
}
|
|
2103
2124
|
/**
|
|
@@ -2106,7 +2127,7 @@ class Qs {
|
|
|
2106
2127
|
*/
|
|
2107
2128
|
setCanvasBackstoreHeight(t) {
|
|
2108
2129
|
if (!t || typeof t != "number") return;
|
|
2109
|
-
const e =
|
|
2130
|
+
const e = pt(t, _t, At);
|
|
2110
2131
|
this.editor.canvas.setDimensions({ height: e }, { backstoreOnly: !0 });
|
|
2111
2132
|
}
|
|
2112
2133
|
/**
|
|
@@ -2115,8 +2136,8 @@ class Qs {
|
|
|
2115
2136
|
* с учётом минимальных и максимальных значений.
|
|
2116
2137
|
*/
|
|
2117
2138
|
adaptCanvasToContainer() {
|
|
2118
|
-
const { canvas: t } = this.editor, e = this.getEditorContainer(), s = e.clientWidth,
|
|
2119
|
-
t.setDimensions({ width:
|
|
2139
|
+
const { canvas: t } = this.editor, e = this.getEditorContainer(), s = e.clientWidth, o = e.clientHeight, n = pt(s, Rt, St), i = pt(o, _t, At);
|
|
2140
|
+
t.setDimensions({ width: n, height: i }, { backstoreOnly: !0 });
|
|
2120
2141
|
}
|
|
2121
2142
|
/**
|
|
2122
2143
|
* Обновляет размеры канваса без изменения позиций объектов.
|
|
@@ -2129,11 +2150,11 @@ class Qs {
|
|
|
2129
2150
|
montageArea: e,
|
|
2130
2151
|
montageArea: {
|
|
2131
2152
|
width: s,
|
|
2132
|
-
height:
|
|
2153
|
+
height: o
|
|
2133
2154
|
}
|
|
2134
|
-
} = this.editor,
|
|
2135
|
-
this.setResolutionWidth(s, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.setResolutionHeight(
|
|
2136
|
-
const a = e.left -
|
|
2155
|
+
} = this.editor, n = e.left, i = e.top;
|
|
2156
|
+
this.setResolutionWidth(s, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.setResolutionHeight(o, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.centerMontageArea();
|
|
2157
|
+
const a = e.left - n, r = e.top - i;
|
|
2137
2158
|
if (a !== 0 || r !== 0) {
|
|
2138
2159
|
const c = t.getActiveObject(), d = [];
|
|
2139
2160
|
if ((c == null ? void 0 : c.type) === "activeselection") {
|
|
@@ -2157,7 +2178,7 @@ class Qs {
|
|
|
2157
2178
|
}
|
|
2158
2179
|
t.renderAll(), t.fire("editor:canvas-updated", {
|
|
2159
2180
|
width: s,
|
|
2160
|
-
height:
|
|
2181
|
+
height: o
|
|
2161
2182
|
}), this.editor.panConstraintManager.updateBounds();
|
|
2162
2183
|
}
|
|
2163
2184
|
/**
|
|
@@ -2267,32 +2288,32 @@ class Qs {
|
|
|
2267
2288
|
*/
|
|
2268
2289
|
setDisplayDimension({ element: t = "canvas", dimension: e, value: s } = {}) {
|
|
2269
2290
|
if (!s) return;
|
|
2270
|
-
const { canvas:
|
|
2291
|
+
const { canvas: o } = this.editor, n = [];
|
|
2271
2292
|
switch (t) {
|
|
2272
2293
|
case "canvas":
|
|
2273
|
-
|
|
2294
|
+
n.push(o.lowerCanvasEl, o.upperCanvasEl);
|
|
2274
2295
|
break;
|
|
2275
2296
|
case "wrapper":
|
|
2276
|
-
|
|
2297
|
+
n.push(o.wrapperEl);
|
|
2277
2298
|
break;
|
|
2278
2299
|
case "container":
|
|
2279
|
-
|
|
2300
|
+
n.push(this.getEditorContainer());
|
|
2280
2301
|
break;
|
|
2281
2302
|
default:
|
|
2282
|
-
|
|
2303
|
+
n.push(o.lowerCanvasEl, o.upperCanvasEl);
|
|
2283
2304
|
}
|
|
2284
2305
|
const i = e === "width" ? "width" : "height";
|
|
2285
2306
|
if (typeof s == "string") {
|
|
2286
|
-
|
|
2307
|
+
n.forEach((r) => {
|
|
2287
2308
|
r.style[i] = s;
|
|
2288
2309
|
});
|
|
2289
2310
|
return;
|
|
2290
2311
|
}
|
|
2291
2312
|
if (isNaN(s)) return;
|
|
2292
2313
|
const a = `${s}px`;
|
|
2293
|
-
|
|
2314
|
+
n.forEach((r) => {
|
|
2294
2315
|
r.style[i] = a;
|
|
2295
|
-
}),
|
|
2316
|
+
}), o.fire(`editor:display-${t}-${i}-changed`, {
|
|
2296
2317
|
element: t,
|
|
2297
2318
|
value: s
|
|
2298
2319
|
});
|
|
@@ -2307,25 +2328,25 @@ class Qs {
|
|
|
2307
2328
|
*/
|
|
2308
2329
|
scaleMontageAreaToImage({ object: t, preserveAspectRatio: e, withoutSave: s } = {}) {
|
|
2309
2330
|
const {
|
|
2310
|
-
canvas:
|
|
2311
|
-
montageArea:
|
|
2331
|
+
canvas: o,
|
|
2332
|
+
montageArea: n,
|
|
2312
2333
|
transformManager: i,
|
|
2313
2334
|
options: {
|
|
2314
2335
|
montageAreaWidth: a,
|
|
2315
2336
|
montageAreaHeight: r
|
|
2316
2337
|
}
|
|
2317
|
-
} = this.editor, c = t ||
|
|
2338
|
+
} = this.editor, c = t || o.getActiveObject();
|
|
2318
2339
|
if (!Ks(c)) return;
|
|
2319
2340
|
const { width: d, height: l } = c;
|
|
2320
|
-
let u = Math.min(d,
|
|
2341
|
+
let u = Math.min(d, St), g = Math.min(l, At);
|
|
2321
2342
|
if (e) {
|
|
2322
2343
|
const {
|
|
2323
2344
|
width: f,
|
|
2324
2345
|
height: p
|
|
2325
|
-
} =
|
|
2346
|
+
} = n, m = d / f, v = l / p, M = Math.max(m, v);
|
|
2326
2347
|
u = f * M, g = p * M;
|
|
2327
2348
|
}
|
|
2328
|
-
this.setResolutionWidth(u, { withoutSave: !0 }), this.setResolutionHeight(g, { withoutSave: !0 }), this.editor.backgroundManager.backgroundObject && this.editor.backgroundManager.refresh(), (d > a || l > r) && this.editor.zoomManager.calculateAndApplyDefaultZoom(), i.resetObject({ object: c, withoutSave: !0 }),
|
|
2349
|
+
this.setResolutionWidth(u, { withoutSave: !0 }), this.setResolutionHeight(g, { withoutSave: !0 }), this.editor.backgroundManager.backgroundObject && this.editor.backgroundManager.refresh(), (d > a || l > r) && this.editor.zoomManager.calculateAndApplyDefaultZoom(), i.resetObject({ object: c, withoutSave: !0 }), o.centerObject(c), o.renderAll(), s || this.editor.historyManager.saveState(), o.fire("editor:montage-area-scaled-to-image", {
|
|
2329
2350
|
object: c,
|
|
2330
2351
|
width: u,
|
|
2331
2352
|
height: g,
|
|
@@ -2351,13 +2372,13 @@ class Qs {
|
|
|
2351
2372
|
const {
|
|
2352
2373
|
canvas: e,
|
|
2353
2374
|
transformManager: s,
|
|
2354
|
-
historyManager:
|
|
2375
|
+
historyManager: o,
|
|
2355
2376
|
options: {
|
|
2356
|
-
montageAreaWidth:
|
|
2377
|
+
montageAreaWidth: n,
|
|
2357
2378
|
montageAreaHeight: i
|
|
2358
2379
|
}
|
|
2359
2380
|
} = this.editor;
|
|
2360
|
-
this.editor.zoomManager.resetZoom(), this.setResolutionWidth(
|
|
2381
|
+
this.editor.zoomManager.resetZoom(), this.setResolutionWidth(n, { withoutSave: !0 }), this.setResolutionHeight(i, { withoutSave: !0 }), e.renderAll(), s.resetObjects(), t || o.saveState(), e.fire("editor:default-scale-set");
|
|
2361
2382
|
}
|
|
2362
2383
|
/**
|
|
2363
2384
|
* Получение всех объектов внутри монтажной области редактора
|
|
@@ -2368,10 +2389,10 @@ class Qs {
|
|
|
2368
2389
|
canvas: t,
|
|
2369
2390
|
montageArea: e,
|
|
2370
2391
|
interactionBlocker: { overlayMask: s },
|
|
2371
|
-
backgroundManager: { backgroundObject:
|
|
2392
|
+
backgroundManager: { backgroundObject: o }
|
|
2372
2393
|
} = this.editor;
|
|
2373
2394
|
return t.getObjects().filter(
|
|
2374
|
-
(i) => i.id !== e.id && i.id !== (s == null ? void 0 : s.id) && i.id !== (
|
|
2395
|
+
(i) => i.id !== e.id && i.id !== (s == null ? void 0 : s.id) && i.id !== (o == null ? void 0 : o.id)
|
|
2375
2396
|
);
|
|
2376
2397
|
}
|
|
2377
2398
|
}
|
|
@@ -2387,11 +2408,11 @@ class qs {
|
|
|
2387
2408
|
* @fires editor:object-rotated
|
|
2388
2409
|
*/
|
|
2389
2410
|
rotate(t = Gs, { withoutSave: e } = {}) {
|
|
2390
|
-
const { canvas: s, historyManager:
|
|
2391
|
-
if (!
|
|
2392
|
-
const i =
|
|
2393
|
-
|
|
2394
|
-
object:
|
|
2411
|
+
const { canvas: s, historyManager: o } = this.editor, n = s.getActiveObject();
|
|
2412
|
+
if (!n) return;
|
|
2413
|
+
const i = n.angle + t;
|
|
2414
|
+
n.rotate(i), n.setCoords(), s.renderAll(), e || o.saveState(), s.fire("editor:object-rotated", {
|
|
2415
|
+
object: n,
|
|
2395
2416
|
withoutSave: e,
|
|
2396
2417
|
angle: i
|
|
2397
2418
|
});
|
|
@@ -2403,9 +2424,9 @@ class qs {
|
|
|
2403
2424
|
* @fires editor:object-flipped-x
|
|
2404
2425
|
*/
|
|
2405
2426
|
flipX({ withoutSave: t } = {}) {
|
|
2406
|
-
const { canvas: e, historyManager: s } = this.editor,
|
|
2407
|
-
|
|
2408
|
-
object:
|
|
2427
|
+
const { canvas: e, historyManager: s } = this.editor, o = e.getActiveObject();
|
|
2428
|
+
o && (o.flipX = !o.flipX, e.renderAll(), t || s.saveState(), e.fire("editor:object-flipped-x", {
|
|
2429
|
+
object: o,
|
|
2409
2430
|
withoutSave: t
|
|
2410
2431
|
}));
|
|
2411
2432
|
}
|
|
@@ -2416,9 +2437,9 @@ class qs {
|
|
|
2416
2437
|
* @fires editor:object-flipped-y
|
|
2417
2438
|
*/
|
|
2418
2439
|
flipY({ withoutSave: t } = {}) {
|
|
2419
|
-
const { canvas: e, historyManager: s } = this.editor,
|
|
2420
|
-
|
|
2421
|
-
object:
|
|
2440
|
+
const { canvas: e, historyManager: s } = this.editor, o = e.getActiveObject();
|
|
2441
|
+
o && (o.flipY = !o.flipY, e.renderAll(), t || s.saveState(), e.fire("editor:object-flipped-y", {
|
|
2442
|
+
object: o,
|
|
2422
2443
|
withoutSave: t
|
|
2423
2444
|
}));
|
|
2424
2445
|
}
|
|
@@ -2435,10 +2456,10 @@ class qs {
|
|
|
2435
2456
|
opacity: e = 1,
|
|
2436
2457
|
withoutSave: s
|
|
2437
2458
|
} = {}) {
|
|
2438
|
-
const { canvas:
|
|
2459
|
+
const { canvas: o, historyManager: n } = this.editor, i = t || o.getActiveObject();
|
|
2439
2460
|
i && (i instanceof U ? i.getObjects().forEach((a) => {
|
|
2440
2461
|
a.set("opacity", e);
|
|
2441
|
-
}) : i.set("opacity", e),
|
|
2462
|
+
}) : i.set("opacity", e), o.renderAll(), s || n.saveState(), o.fire("editor:object-opacity-changed", {
|
|
2442
2463
|
object: i,
|
|
2443
2464
|
opacity: e,
|
|
2444
2465
|
withoutSave: s
|
|
@@ -2459,24 +2480,24 @@ class qs {
|
|
|
2459
2480
|
object: t,
|
|
2460
2481
|
type: e = this.options.scaleType,
|
|
2461
2482
|
withoutSave: s,
|
|
2462
|
-
fitAsOneObject:
|
|
2483
|
+
fitAsOneObject: o
|
|
2463
2484
|
} = {}) {
|
|
2464
|
-
const { canvas:
|
|
2485
|
+
const { canvas: n, historyManager: i } = this.editor, a = t || n.getActiveObject();
|
|
2465
2486
|
if (a) {
|
|
2466
|
-
if (a instanceof U && !
|
|
2487
|
+
if (a instanceof U && !o) {
|
|
2467
2488
|
const r = a.getObjects();
|
|
2468
|
-
|
|
2489
|
+
n.discardActiveObject(), r.forEach((d) => {
|
|
2469
2490
|
this._fitSingleObject(d, e);
|
|
2470
2491
|
});
|
|
2471
|
-
const c = new U(r, { canvas:
|
|
2472
|
-
|
|
2492
|
+
const c = new U(r, { canvas: n });
|
|
2493
|
+
n.setActiveObject(c);
|
|
2473
2494
|
} else
|
|
2474
2495
|
this._fitSingleObject(a, e);
|
|
2475
|
-
|
|
2496
|
+
n.renderAll(), s || i.saveState(), n.fire("editor:object-fitted", {
|
|
2476
2497
|
object: a,
|
|
2477
2498
|
type: e,
|
|
2478
2499
|
withoutSave: s,
|
|
2479
|
-
fitAsOneObject:
|
|
2500
|
+
fitAsOneObject: o
|
|
2480
2501
|
});
|
|
2481
2502
|
}
|
|
2482
2503
|
}
|
|
@@ -2487,7 +2508,7 @@ class qs {
|
|
|
2487
2508
|
* @private
|
|
2488
2509
|
*/
|
|
2489
2510
|
_fitSingleObject(t, e) {
|
|
2490
|
-
const { canvas: s, montageArea:
|
|
2511
|
+
const { canvas: s, montageArea: o } = this.editor, { width: n, height: i, scaleX: a = 1, scaleY: r = 1, angle: c = 0 } = t, d = n * Math.abs(a), l = i * Math.abs(r), u = c * Math.PI / 180, g = Math.abs(Math.cos(u)), f = Math.abs(Math.sin(u)), p = d * g + l * f, m = d * f + l * g, v = o.width, M = o.height;
|
|
2491
2512
|
let S;
|
|
2492
2513
|
e === "contain" ? S = Math.min(v / p, M / m) : S = Math.max(v / p, M / m), t.set({
|
|
2493
2514
|
scaleX: a * S,
|
|
@@ -2512,12 +2533,12 @@ class qs {
|
|
|
2512
2533
|
*/
|
|
2513
2534
|
resetObject({ object: t, alwaysFitObject: e = !1, withoutSave: s = !1 } = {}) {
|
|
2514
2535
|
const {
|
|
2515
|
-
canvas:
|
|
2516
|
-
montageArea:
|
|
2536
|
+
canvas: o,
|
|
2537
|
+
montageArea: n,
|
|
2517
2538
|
imageManager: i,
|
|
2518
2539
|
historyManager: a,
|
|
2519
2540
|
options: { scaleType: r }
|
|
2520
|
-
} = this.editor, c = t ||
|
|
2541
|
+
} = this.editor, c = t || o.getActiveObject();
|
|
2521
2542
|
if (!c || c.locked) return;
|
|
2522
2543
|
if (a.suspendHistory(), c.type === "image" || c.format === "svg" || c.set({
|
|
2523
2544
|
scaleX: 1,
|
|
@@ -2528,13 +2549,13 @@ class qs {
|
|
|
2528
2549
|
}), e)
|
|
2529
2550
|
this.fitObject({ object: c, withoutSave: !0, fitAsOneObject: !0 });
|
|
2530
2551
|
else {
|
|
2531
|
-
const { width: l, height: u } =
|
|
2552
|
+
const { width: l, height: u } = n, { width: g, height: f } = c, p = i.calculateScaleFactor({
|
|
2532
2553
|
imageObject: c,
|
|
2533
2554
|
scaleType: r
|
|
2534
2555
|
});
|
|
2535
2556
|
r === "contain" && p < 1 || r === "cover" && (g > l || f > u) ? this.fitObject({ object: c, withoutSave: !0, fitAsOneObject: !0 }) : c.set({ scaleX: 1, scaleY: 1 });
|
|
2536
2557
|
}
|
|
2537
|
-
c.set({ flipX: !1, flipY: !1, angle: 0 }),
|
|
2558
|
+
c.set({ flipX: !1, flipY: !1, angle: 0 }), o.centerObject(c), o.renderAll(), a.resumeHistory(), s || a.saveState(), o.fire("editor:object-reset", {
|
|
2538
2559
|
object: c,
|
|
2539
2560
|
withoutSave: s,
|
|
2540
2561
|
alwaysFitObject: e
|
|
@@ -2543,7 +2564,16 @@ class qs {
|
|
|
2543
2564
|
}
|
|
2544
2565
|
class Js {
|
|
2545
2566
|
constructor({ editor: t }) {
|
|
2546
|
-
this.editor = t, this.options = t.options, this.minZoom = this.options.minZoom || Hs, this.maxZoom = this.options.maxZoom || Zs, this.defaultZoom = this.options.defaultScale;
|
|
2567
|
+
this.editor = t, this.options = t.options, this.minZoom = this.options.minZoom || Hs, this.maxZoom = this.options.maxZoom || Zs, this.defaultZoom = this._normalizeDefaultZoom(this.options.defaultScale);
|
|
2568
|
+
}
|
|
2569
|
+
/**
|
|
2570
|
+
* Приводит значение defaultZoom к числу с двумя знаками после запятой, а также учитывает минимальное и максимальное значения.
|
|
2571
|
+
* @param zoom - Значение зума для нормализации
|
|
2572
|
+
* @returns Нормализованное значение зума
|
|
2573
|
+
* @private
|
|
2574
|
+
*/
|
|
2575
|
+
_normalizeDefaultZoom(t) {
|
|
2576
|
+
return Math.min(this.maxZoom, Math.max(this.minZoom, Number(t.toFixed(2))));
|
|
2547
2577
|
}
|
|
2548
2578
|
/**
|
|
2549
2579
|
* Вспомогательный метод для вычисления размеров масштабированной монтажной области
|
|
@@ -2565,7 +2595,7 @@ class Js {
|
|
|
2565
2595
|
* @private
|
|
2566
2596
|
*/
|
|
2567
2597
|
_getClampedPointerCoordinates(t) {
|
|
2568
|
-
const { canvas: e, montageArea: s } = this.editor,
|
|
2598
|
+
const { canvas: e, montageArea: s } = this.editor, o = e.getPointer(t, !0), n = e.viewportTransform, i = e.getZoom(), a = s.left - s.width / 2, r = s.left + s.width / 2, c = s.top - s.height / 2, d = s.top + s.height / 2, l = a * i + n[4], u = r * i + n[4], g = c * i + n[5], f = d * i + n[5], p = Math.max(l, Math.min(u, o.x)), m = Math.max(g, Math.min(f, o.y));
|
|
2569
2599
|
return {
|
|
2570
2600
|
x: p,
|
|
2571
2601
|
y: m
|
|
@@ -2577,8 +2607,8 @@ class Js {
|
|
|
2577
2607
|
* @private
|
|
2578
2608
|
*/
|
|
2579
2609
|
_calculateFitZoom() {
|
|
2580
|
-
const { canvas: t, montageArea: e } = this.editor, s = t.getWidth(),
|
|
2581
|
-
return Math.max(
|
|
2610
|
+
const { canvas: t, montageArea: e } = this.editor, s = t.getWidth(), o = t.getHeight(), n = s / e.width, i = o / e.height;
|
|
2611
|
+
return Math.max(n, i);
|
|
2582
2612
|
}
|
|
2583
2613
|
/**
|
|
2584
2614
|
* Вычисляет целевую позицию viewport для центрирования монтажной области
|
|
@@ -2587,7 +2617,7 @@ class Js {
|
|
|
2587
2617
|
* @private
|
|
2588
2618
|
*/
|
|
2589
2619
|
_calculateTargetViewportPosition(t) {
|
|
2590
|
-
const { canvas: e, montageArea: s } = this.editor,
|
|
2620
|
+
const { canvas: e, montageArea: s } = this.editor, o = e.getWidth(), n = e.getHeight(), i = o / 2, a = n / 2, r = s.left, c = s.top;
|
|
2591
2621
|
return {
|
|
2592
2622
|
x: i - r * t,
|
|
2593
2623
|
y: a - c * t
|
|
@@ -2600,9 +2630,9 @@ class Js {
|
|
|
2600
2630
|
* @private
|
|
2601
2631
|
*/
|
|
2602
2632
|
_calculateEmptySpaceRatio(t) {
|
|
2603
|
-
const { canvas: e, montageArea: s } = this.editor,
|
|
2633
|
+
const { canvas: e, montageArea: s } = this.editor, o = e.viewportTransform, n = e.getWidth(), i = e.getHeight(), a = s.left - s.width / 2, r = s.left + s.width / 2, c = s.top - s.height / 2, d = s.top + s.height / 2, l = -o[4] / t, u = (-o[4] + n) / t, g = -o[5] / t, f = (-o[5] + i) / t, p = l < a, m = u > r, v = g < c, M = f > d;
|
|
2604
2634
|
if (!(p || m || v || M)) return 0;
|
|
2605
|
-
const y = Math.max(0, a - l), b = Math.max(0, u - r), I = Math.max(0, c - g), j = Math.max(0, f - d), A = Math.max(y, b), C = Math.max(I, j), w = A /
|
|
2635
|
+
const y = Math.max(0, a - l), b = Math.max(0, u - r), I = Math.max(0, c - g), j = Math.max(0, f - d), A = Math.max(y, b), C = Math.max(I, j), w = A / n, T = C / i;
|
|
2606
2636
|
return Math.max(w, T);
|
|
2607
2637
|
}
|
|
2608
2638
|
/**
|
|
@@ -2615,11 +2645,11 @@ class Js {
|
|
|
2615
2645
|
* @returns Вычисленный шаг перемещения viewport
|
|
2616
2646
|
* @private
|
|
2617
2647
|
*/
|
|
2618
|
-
_calculateSmoothCenteringStep(t, e, s,
|
|
2619
|
-
const { canvas: i, montageArea: a } = this.editor, r = i.viewportTransform, c = i.getWidth(), d = i.getHeight(), l = t.x - r[4], u = t.y - r[5], g = Math.abs(
|
|
2648
|
+
_calculateSmoothCenteringStep(t, e, s, o, n) {
|
|
2649
|
+
const { canvas: i, montageArea: a } = this.editor, r = i.viewportTransform, c = i.getWidth(), d = i.getHeight(), l = t.x - r[4], u = t.y - r[5], g = Math.abs(o), f = e - s;
|
|
2620
2650
|
if (Math.abs(f) / g <= 0.1)
|
|
2621
2651
|
return { x: l, y: u };
|
|
2622
|
-
const m = c / 2, v = d / 2, M = a.left, S = a.top, y = m - M * s, b = v - S * s, I = (y - r[4]) / (e - s), j = (b - r[5]) / (e - s), A = I * g, C = j * g, w = A *
|
|
2652
|
+
const m = c / 2, v = d / 2, M = a.left, S = a.top, y = m - M * s, b = v - S * s, I = (y - r[4]) / (e - s), j = (b - r[5]) / (e - s), A = I * g, C = j * g, w = A * n, T = C * n, E = Math.abs(w) > Math.abs(l) ? l : w, P = Math.abs(T) > Math.abs(u) ? u : T;
|
|
2623
2653
|
return { x: E, y: P };
|
|
2624
2654
|
}
|
|
2625
2655
|
/**
|
|
@@ -2633,17 +2663,17 @@ class Js {
|
|
|
2633
2663
|
* @private
|
|
2634
2664
|
*/
|
|
2635
2665
|
_applyViewportCentering(t, e = !1, s = Ye) {
|
|
2636
|
-
const { canvas:
|
|
2666
|
+
const { canvas: o } = this.editor, n = this._getScaledMontageDimensions(t), i = o.getWidth(), a = o.getHeight(), r = n.width > i || n.height > a, c = this._calculateFitZoom(), d = t - c;
|
|
2637
2667
|
if (!(!r || d) && !e)
|
|
2638
2668
|
return !1;
|
|
2639
|
-
const u =
|
|
2669
|
+
const u = o.viewportTransform, g = this._calculateTargetViewportPosition(t);
|
|
2640
2670
|
if (!r)
|
|
2641
|
-
return u[4] = g.x, u[5] = g.y,
|
|
2671
|
+
return u[4] = g.x, u[5] = g.y, o.setViewportTransform(u), !0;
|
|
2642
2672
|
if (e && !r) {
|
|
2643
2673
|
const f = this._calculateEmptySpaceRatio(t);
|
|
2644
2674
|
if (f > 0) {
|
|
2645
2675
|
const p = this._calculateSmoothCenteringStep(g, t, c, s, f);
|
|
2646
|
-
return u[4] += p.x, u[5] += p.y,
|
|
2676
|
+
return u[4] += p.x, u[5] += p.y, o.setViewportTransform(u), !0;
|
|
2647
2677
|
}
|
|
2648
2678
|
}
|
|
2649
2679
|
return !1;
|
|
@@ -2656,8 +2686,8 @@ class Js {
|
|
|
2656
2686
|
* @param scale - Желаемый масштаб относительно размеров контейнера редактора.
|
|
2657
2687
|
*/
|
|
2658
2688
|
calculateAndApplyDefaultZoom(t = this.options.defaultScale) {
|
|
2659
|
-
const { canvas: e } = this.editor, s = e.editorContainer,
|
|
2660
|
-
this.defaultZoom = Math.min(r, c), this.setZoom(), this.editor.panConstraintManager.updateBounds();
|
|
2689
|
+
const { canvas: e } = this.editor, s = e.editorContainer, o = s.clientWidth || e.getWidth(), n = s.clientHeight || e.getHeight(), { width: i, height: a } = this.editor.montageArea, r = o / i * t, c = n / a * t;
|
|
2690
|
+
this.defaultZoom = this._normalizeDefaultZoom(Math.min(r, c)), this.setZoom(), this.editor.panConstraintManager.updateBounds();
|
|
2661
2691
|
}
|
|
2662
2692
|
/**
|
|
2663
2693
|
* Обработчик зума колесом мыши с автоматическим определением точки зума.
|
|
@@ -2670,12 +2700,12 @@ class Js {
|
|
|
2670
2700
|
* @fires editor:zoom-changed
|
|
2671
2701
|
*/
|
|
2672
2702
|
handleMouseWheelZoom(t, e) {
|
|
2673
|
-
const { canvas: s, montageArea:
|
|
2703
|
+
const { canvas: s, montageArea: o } = this.editor, n = s.getZoom(), i = t < 0, a = this._getScaledMontageDimensions(n), r = s.getWidth(), c = s.getHeight(), d = a.width > r || a.height > c;
|
|
2674
2704
|
if (i) {
|
|
2675
2705
|
if (!d)
|
|
2676
2706
|
this.zoom(t, {
|
|
2677
|
-
pointX:
|
|
2678
|
-
pointY:
|
|
2707
|
+
pointX: o.left,
|
|
2708
|
+
pointY: o.top
|
|
2679
2709
|
});
|
|
2680
2710
|
else {
|
|
2681
2711
|
const u = this._getClampedPointerCoordinates(e);
|
|
@@ -2688,8 +2718,8 @@ class Js {
|
|
|
2688
2718
|
}
|
|
2689
2719
|
if (t < 0 || !d) {
|
|
2690
2720
|
this.zoom(t, {
|
|
2691
|
-
pointX:
|
|
2692
|
-
pointY:
|
|
2721
|
+
pointX: o.left,
|
|
2722
|
+
pointY: o.top
|
|
2693
2723
|
});
|
|
2694
2724
|
return;
|
|
2695
2725
|
}
|
|
@@ -2710,11 +2740,11 @@ class Js {
|
|
|
2710
2740
|
zoom(t = Ye, e = {}) {
|
|
2711
2741
|
var g, f;
|
|
2712
2742
|
if (!t) return;
|
|
2713
|
-
const { minZoom: s, maxZoom:
|
|
2743
|
+
const { minZoom: s, maxZoom: o } = this, { canvas: n } = this.editor, i = t < 0, a = n.getZoom(), r = n.getCenterPoint(), c = (g = e.pointX) != null ? g : r.x, d = (f = e.pointY) != null ? f : r.y, l = new tt(c, d);
|
|
2714
2744
|
this.editor.montageArea.setCoords(), this.editor.canvas.requestRenderAll();
|
|
2715
|
-
let u = Number((a + Number(t)).toFixed(
|
|
2716
|
-
u >
|
|
2717
|
-
currentZoom:
|
|
2745
|
+
let u = Number((a + Number(t)).toFixed(2));
|
|
2746
|
+
u > o && (u = o), u < s && (u = s), n.zoomToPoint(l, u), this.editor.panConstraintManager.updateBounds(), this._applyViewportCentering(u, i, t), n.fire("editor:zoom-changed", {
|
|
2747
|
+
currentZoom: n.getZoom(),
|
|
2718
2748
|
zoom: u,
|
|
2719
2749
|
point: l
|
|
2720
2750
|
});
|
|
@@ -2725,12 +2755,12 @@ class Js {
|
|
|
2725
2755
|
* @fires editor:zoom-changed
|
|
2726
2756
|
*/
|
|
2727
2757
|
setZoom(t = this.defaultZoom) {
|
|
2728
|
-
const { minZoom: e, maxZoom: s } = this, { canvas:
|
|
2758
|
+
const { minZoom: e, maxZoom: s } = this, { canvas: o } = this.editor, n = new tt(o.getCenterPoint());
|
|
2729
2759
|
let i = t;
|
|
2730
|
-
t > s && (i = s), t < e && (i = e),
|
|
2731
|
-
currentZoom:
|
|
2760
|
+
t > s && (i = s), t < e && (i = e), o.zoomToPoint(n, i), o.fire("editor:zoom-changed", {
|
|
2761
|
+
currentZoom: o.getZoom(),
|
|
2732
2762
|
zoom: i,
|
|
2733
|
-
point:
|
|
2763
|
+
point: n
|
|
2734
2764
|
}), this.editor.panConstraintManager.updateBounds();
|
|
2735
2765
|
}
|
|
2736
2766
|
/**
|
|
@@ -2738,7 +2768,7 @@ class Js {
|
|
|
2738
2768
|
* @fires editor:zoom-changed
|
|
2739
2769
|
*/
|
|
2740
2770
|
resetZoom() {
|
|
2741
|
-
const { canvas: t } = this.editor, e = new
|
|
2771
|
+
const { canvas: t } = this.editor, e = new tt(t.getCenterPoint());
|
|
2742
2772
|
t.zoomToPoint(e, this.defaultZoom), this.editor.canvas.fire("editor:zoom-changed", {
|
|
2743
2773
|
currentZoom: t.getZoom(),
|
|
2744
2774
|
point: e
|
|
@@ -2775,8 +2805,8 @@ class $s {
|
|
|
2775
2805
|
const { canvas: t, montageArea: e, historyManager: s } = this.editor;
|
|
2776
2806
|
if (!e || !this.overlayMask) return;
|
|
2777
2807
|
s.suspendHistory(), e.setCoords();
|
|
2778
|
-
const { left:
|
|
2779
|
-
this.overlayMask.set({ left:
|
|
2808
|
+
const { left: o, top: n, width: i, height: a } = e.getBoundingRect();
|
|
2809
|
+
this.overlayMask.set({ left: o, top: n, width: i, height: a }), t.discardActiveObject(), this.editor.layerManager.bringToFront(this.overlayMask, { withoutSave: !0 }), s.resumeHistory();
|
|
2780
2810
|
}
|
|
2781
2811
|
/**
|
|
2782
2812
|
* Выключает редактор:
|
|
@@ -2787,8 +2817,8 @@ class $s {
|
|
|
2787
2817
|
block() {
|
|
2788
2818
|
if (this.isBlocked || !this.overlayMask) return;
|
|
2789
2819
|
const { canvas: t, canvasManager: e, historyManager: s } = this.editor;
|
|
2790
|
-
s.suspendHistory(), this.isBlocked = !0, t.discardActiveObject(), t.selection = !1, t.skipTargetFind = !0, e.getObjects().forEach((
|
|
2791
|
-
|
|
2820
|
+
s.suspendHistory(), this.isBlocked = !0, t.discardActiveObject(), t.selection = !1, t.skipTargetFind = !0, e.getObjects().forEach((o) => {
|
|
2821
|
+
o.evented = !1, o.selectable = !1;
|
|
2792
2822
|
}), t.upperCanvasEl.style.pointerEvents = "none", t.lowerCanvasEl.style.pointerEvents = "none", this.overlayMask.visible = !0, this.refresh(), t.fire("editor:disabled"), s.resumeHistory();
|
|
2793
2823
|
}
|
|
2794
2824
|
/**
|
|
@@ -2797,8 +2827,8 @@ class $s {
|
|
|
2797
2827
|
unblock() {
|
|
2798
2828
|
if (!this.isBlocked || !this.overlayMask) return;
|
|
2799
2829
|
const { canvas: t, canvasManager: e, historyManager: s } = this.editor;
|
|
2800
|
-
s.suspendHistory(), this.isBlocked = !1, t.selection = !0, t.skipTargetFind = !1, e.getObjects().forEach((
|
|
2801
|
-
|
|
2830
|
+
s.suspendHistory(), this.isBlocked = !1, t.selection = !0, t.skipTargetFind = !1, e.getObjects().forEach((o) => {
|
|
2831
|
+
o.evented = !0, o.selectable = !0;
|
|
2802
2832
|
}), t.upperCanvasEl.style.pointerEvents = "", t.lowerCanvasEl.style.pointerEvents = "", this.overlayMask.visible = !1, t.requestRenderAll(), t.fire("editor:enabled"), s.resumeHistory();
|
|
2803
2833
|
}
|
|
2804
2834
|
}
|
|
@@ -2816,9 +2846,9 @@ class Ot {
|
|
|
2816
2846
|
color: t,
|
|
2817
2847
|
customData: e = {},
|
|
2818
2848
|
fromTemplate: s = !1,
|
|
2819
|
-
withoutSave:
|
|
2849
|
+
withoutSave: o = !1
|
|
2820
2850
|
}) {
|
|
2821
|
-
var
|
|
2851
|
+
var n;
|
|
2822
2852
|
try {
|
|
2823
2853
|
const { historyManager: i } = this.editor, { backgroundObject: a } = this;
|
|
2824
2854
|
if (i.suspendHistory(), a && a.backgroundType === "color") {
|
|
@@ -2832,20 +2862,20 @@ class Ot {
|
|
|
2832
2862
|
}), this.editor.canvas.requestRenderAll();
|
|
2833
2863
|
} else
|
|
2834
2864
|
this._removeCurrentBackground(), this._createColorBackground(t);
|
|
2835
|
-
(
|
|
2865
|
+
(n = this.backgroundObject) == null || n.set({ customData: e }), this.editor.canvas.fire("editor:background:changed", {
|
|
2836
2866
|
type: "color",
|
|
2837
2867
|
color: t,
|
|
2838
2868
|
customData: e,
|
|
2839
2869
|
fromTemplate: s,
|
|
2840
|
-
withoutSave:
|
|
2841
|
-
}), i.resumeHistory(),
|
|
2870
|
+
withoutSave: o
|
|
2871
|
+
}), i.resumeHistory(), o || i.saveState();
|
|
2842
2872
|
} catch (i) {
|
|
2843
2873
|
this.editor.errorManager.emitError({
|
|
2844
2874
|
code: "BACKGROUND_CREATION_FAILED",
|
|
2845
2875
|
origin: "BackgroundManager",
|
|
2846
2876
|
method: "setColorBackground",
|
|
2847
2877
|
message: "Не удалось установить цветовой фон",
|
|
2848
|
-
data: { error: i, color: t, customData: e, fromTemplate: s, withoutSave:
|
|
2878
|
+
data: { error: i, color: t, customData: e, fromTemplate: s, withoutSave: o }
|
|
2849
2879
|
});
|
|
2850
2880
|
}
|
|
2851
2881
|
}
|
|
@@ -2859,9 +2889,9 @@ class Ot {
|
|
|
2859
2889
|
gradient: t,
|
|
2860
2890
|
customData: e = {},
|
|
2861
2891
|
fromTemplate: s = !1,
|
|
2862
|
-
withoutSave:
|
|
2892
|
+
withoutSave: o = !1
|
|
2863
2893
|
}) {
|
|
2864
|
-
var
|
|
2894
|
+
var n;
|
|
2865
2895
|
try {
|
|
2866
2896
|
const { historyManager: i } = this.editor, { backgroundObject: a } = this;
|
|
2867
2897
|
if (i.suspendHistory(), a && a.backgroundType === "gradient") {
|
|
@@ -2876,20 +2906,20 @@ class Ot {
|
|
|
2876
2906
|
}), this.editor.canvas.requestRenderAll();
|
|
2877
2907
|
} else
|
|
2878
2908
|
this._removeCurrentBackground(), this._createGradientBackground(t);
|
|
2879
|
-
(
|
|
2909
|
+
(n = this.backgroundObject) == null || n.set({ customData: e }), this.editor.canvas.fire("editor:background:changed", {
|
|
2880
2910
|
type: "gradient",
|
|
2881
2911
|
customData: e,
|
|
2882
2912
|
fromTemplate: s,
|
|
2883
|
-
withoutSave:
|
|
2913
|
+
withoutSave: o,
|
|
2884
2914
|
gradientParams: t
|
|
2885
|
-
}), i.resumeHistory(),
|
|
2915
|
+
}), i.resumeHistory(), o || i.saveState();
|
|
2886
2916
|
} catch (i) {
|
|
2887
2917
|
this.editor.errorManager.emitError({
|
|
2888
2918
|
code: "BACKGROUND_CREATION_FAILED",
|
|
2889
2919
|
origin: "BackgroundManager",
|
|
2890
2920
|
method: "setGradientBackground",
|
|
2891
2921
|
message: "Не удалось установить градиентный фон",
|
|
2892
|
-
data: { error: i, gradient: t, customData: e, fromTemplate: s, withoutSave:
|
|
2922
|
+
data: { error: i, gradient: t, customData: e, fromTemplate: s, withoutSave: o }
|
|
2893
2923
|
});
|
|
2894
2924
|
}
|
|
2895
2925
|
}
|
|
@@ -2901,8 +2931,8 @@ class Ot {
|
|
|
2901
2931
|
angle: t,
|
|
2902
2932
|
startColor: e,
|
|
2903
2933
|
endColor: s,
|
|
2904
|
-
startPosition:
|
|
2905
|
-
endPosition:
|
|
2934
|
+
startPosition: o,
|
|
2935
|
+
endPosition: n,
|
|
2906
2936
|
colorStops: i,
|
|
2907
2937
|
customData: a = {},
|
|
2908
2938
|
withoutSave: r = !1
|
|
@@ -2913,8 +2943,8 @@ class Ot {
|
|
|
2913
2943
|
angle: t,
|
|
2914
2944
|
startColor: e,
|
|
2915
2945
|
endColor: s,
|
|
2916
|
-
startPosition:
|
|
2917
|
-
endPosition:
|
|
2946
|
+
startPosition: o,
|
|
2947
|
+
endPosition: n,
|
|
2918
2948
|
colorStops: i
|
|
2919
2949
|
},
|
|
2920
2950
|
customData: a,
|
|
@@ -2929,8 +2959,8 @@ class Ot {
|
|
|
2929
2959
|
centerX: t,
|
|
2930
2960
|
centerY: e,
|
|
2931
2961
|
radius: s,
|
|
2932
|
-
startColor:
|
|
2933
|
-
endColor:
|
|
2962
|
+
startColor: o,
|
|
2963
|
+
endColor: n,
|
|
2934
2964
|
startPosition: i,
|
|
2935
2965
|
endPosition: a,
|
|
2936
2966
|
colorStops: r,
|
|
@@ -2943,8 +2973,8 @@ class Ot {
|
|
|
2943
2973
|
centerX: t,
|
|
2944
2974
|
centerY: e,
|
|
2945
2975
|
radius: s,
|
|
2946
|
-
startColor:
|
|
2947
|
-
endColor:
|
|
2976
|
+
startColor: o,
|
|
2977
|
+
endColor: n,
|
|
2948
2978
|
startPosition: i,
|
|
2949
2979
|
endPosition: a,
|
|
2950
2980
|
colorStops: r
|
|
@@ -2959,12 +2989,12 @@ class Ot {
|
|
|
2959
2989
|
* @param options.imageUrl - URL изображения
|
|
2960
2990
|
* @param options.withoutSave - Если true, не сохранять состояние в историю
|
|
2961
2991
|
*/
|
|
2962
|
-
setImageBackground(
|
|
2992
|
+
setImageBackground(n) {
|
|
2963
2993
|
return k(this, arguments, function* ({
|
|
2964
2994
|
imageSource: t,
|
|
2965
2995
|
customData: e = {},
|
|
2966
2996
|
fromTemplate: s = !1,
|
|
2967
|
-
withoutSave:
|
|
2997
|
+
withoutSave: o = !1
|
|
2968
2998
|
}) {
|
|
2969
2999
|
try {
|
|
2970
3000
|
const { historyManager: i } = this.editor;
|
|
@@ -2973,16 +3003,16 @@ class Ot {
|
|
|
2973
3003
|
imageSource: t,
|
|
2974
3004
|
customData: e,
|
|
2975
3005
|
fromTemplate: s,
|
|
2976
|
-
withoutSave:
|
|
3006
|
+
withoutSave: o,
|
|
2977
3007
|
backgroundObject: this.backgroundObject
|
|
2978
|
-
}), i.resumeHistory(),
|
|
3008
|
+
}), i.resumeHistory(), o || i.saveState();
|
|
2979
3009
|
} catch (i) {
|
|
2980
3010
|
this.editor.errorManager.emitError({
|
|
2981
3011
|
code: "BACKGROUND_CREATION_FAILED",
|
|
2982
3012
|
origin: "BackgroundManager",
|
|
2983
3013
|
method: "setImageBackground",
|
|
2984
3014
|
message: "Не удалось установить изображение в качестве фона",
|
|
2985
|
-
data: { error: i, imageSource: t, customData: e, fromTemplate: s, withoutSave:
|
|
3015
|
+
data: { error: i, imageSource: t, customData: e, fromTemplate: s, withoutSave: o }
|
|
2986
3016
|
});
|
|
2987
3017
|
}
|
|
2988
3018
|
});
|
|
@@ -3014,8 +3044,8 @@ class Ot {
|
|
|
3014
3044
|
const { canvas: t, montageArea: e, historyManager: s } = this.editor;
|
|
3015
3045
|
if (!e || !this.backgroundObject) return;
|
|
3016
3046
|
s.suspendHistory(), this.editor.transformManager.fitObject({ object: this.backgroundObject, withoutSave: !0, type: "cover" });
|
|
3017
|
-
const
|
|
3018
|
-
this.backgroundObject && i !==
|
|
3047
|
+
const o = t.getObjects(), n = o.indexOf(e), i = o.indexOf(this.backgroundObject);
|
|
3048
|
+
this.backgroundObject && i !== n + 1 && t.moveObjectTo(this.backgroundObject, n + 1), t.requestRenderAll(), s.resumeHistory();
|
|
3019
3049
|
}
|
|
3020
3050
|
/**
|
|
3021
3051
|
* Создает цветовой фон.
|
|
@@ -3058,14 +3088,14 @@ class Ot {
|
|
|
3058
3088
|
*/
|
|
3059
3089
|
_createImageBackground(t, e) {
|
|
3060
3090
|
return k(this, null, function* () {
|
|
3061
|
-
var
|
|
3062
|
-
const { image: s } = (
|
|
3091
|
+
var o;
|
|
3092
|
+
const { image: s } = (o = yield this.editor.imageManager.importImage({
|
|
3063
3093
|
source: t,
|
|
3064
3094
|
withoutSave: !0,
|
|
3065
3095
|
isBackground: !0,
|
|
3066
3096
|
withoutSelection: !0,
|
|
3067
3097
|
scale: "image-cover"
|
|
3068
|
-
})) != null ?
|
|
3098
|
+
})) != null ? o : {};
|
|
3069
3099
|
if (!s)
|
|
3070
3100
|
throw new Error("Не удалось загрузить изображение");
|
|
3071
3101
|
s.set({
|
|
@@ -3094,8 +3124,8 @@ class Ot {
|
|
|
3094
3124
|
const {
|
|
3095
3125
|
startColor: e,
|
|
3096
3126
|
endColor: s,
|
|
3097
|
-
startPosition:
|
|
3098
|
-
endPosition:
|
|
3127
|
+
startPosition: o = 0,
|
|
3128
|
+
endPosition: n = 100,
|
|
3099
3129
|
colorStops: i
|
|
3100
3130
|
} = t;
|
|
3101
3131
|
let a;
|
|
@@ -3103,8 +3133,8 @@ class Ot {
|
|
|
3103
3133
|
offset: u.offset / 100,
|
|
3104
3134
|
color: u.color
|
|
3105
3135
|
})) : e && s ? a = [
|
|
3106
|
-
{ offset:
|
|
3107
|
-
{ offset:
|
|
3136
|
+
{ offset: o / 100, color: e },
|
|
3137
|
+
{ offset: n / 100, color: s }
|
|
3108
3138
|
] : a = [
|
|
3109
3139
|
{ offset: 0, color: "#000000" },
|
|
3110
3140
|
{ offset: 1, color: "#ffffff" }
|
|
@@ -3157,9 +3187,9 @@ class Ot {
|
|
|
3157
3187
|
*/
|
|
3158
3188
|
static _isGradientEqual(t, e) {
|
|
3159
3189
|
if (!t || !e || t.type !== e.type) return !1;
|
|
3160
|
-
const s = t.colorStops || [],
|
|
3161
|
-
return s.length !==
|
|
3162
|
-
const r =
|
|
3190
|
+
const s = t.colorStops || [], o = e.colorStops || [];
|
|
3191
|
+
return s.length !== o.length || !s.every((i, a) => {
|
|
3192
|
+
const r = o[a];
|
|
3163
3193
|
return i.color === r.color && Math.abs(i.offset - r.offset) < 1e-4;
|
|
3164
3194
|
}) ? !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;
|
|
3165
3195
|
}
|
|
@@ -3176,13 +3206,13 @@ class ee {
|
|
|
3176
3206
|
* @fires editor:object-bring-to-front
|
|
3177
3207
|
*/
|
|
3178
3208
|
bringToFront(t, { withoutSave: e } = {}) {
|
|
3179
|
-
const { canvas: s, historyManager:
|
|
3180
|
-
|
|
3181
|
-
const
|
|
3182
|
-
|
|
3209
|
+
const { canvas: s, historyManager: o } = this.editor;
|
|
3210
|
+
o.suspendHistory();
|
|
3211
|
+
const n = t || s.getActiveObject();
|
|
3212
|
+
n && (n instanceof U ? n.getObjects().forEach((i) => {
|
|
3183
3213
|
s.bringObjectToFront(i);
|
|
3184
|
-
}) : s.bringObjectToFront(
|
|
3185
|
-
object:
|
|
3214
|
+
}) : s.bringObjectToFront(n), s.renderAll(), o.resumeHistory(), e || o.saveState(), s.fire("editor:object-bring-to-front", {
|
|
3215
|
+
object: n,
|
|
3186
3216
|
withoutSave: e
|
|
3187
3217
|
}));
|
|
3188
3218
|
}
|
|
@@ -3194,11 +3224,11 @@ class ee {
|
|
|
3194
3224
|
* @fires editor:object-bring-forward
|
|
3195
3225
|
*/
|
|
3196
3226
|
bringForward(t, { withoutSave: e } = {}) {
|
|
3197
|
-
const { canvas: s, historyManager:
|
|
3198
|
-
|
|
3199
|
-
const
|
|
3200
|
-
|
|
3201
|
-
object:
|
|
3227
|
+
const { canvas: s, historyManager: o } = this.editor;
|
|
3228
|
+
o.suspendHistory();
|
|
3229
|
+
const n = t || s.getActiveObject();
|
|
3230
|
+
n && (n instanceof U ? ee._moveSelectionForward(s, n) : s.bringObjectForward(n), s.renderAll(), o.resumeHistory(), e || o.saveState(), s.fire("editor:object-bring-forward", {
|
|
3231
|
+
object: n,
|
|
3202
3232
|
withoutSave: e
|
|
3203
3233
|
}));
|
|
3204
3234
|
}
|
|
@@ -3212,12 +3242,12 @@ class ee {
|
|
|
3212
3242
|
sendToBack(t, { withoutSave: e } = {}) {
|
|
3213
3243
|
const {
|
|
3214
3244
|
canvas: s,
|
|
3215
|
-
montageArea:
|
|
3216
|
-
historyManager:
|
|
3245
|
+
montageArea: o,
|
|
3246
|
+
historyManager: n,
|
|
3217
3247
|
interactionBlocker: { overlayMask: i },
|
|
3218
3248
|
backgroundManager: { backgroundObject: a }
|
|
3219
3249
|
} = this.editor;
|
|
3220
|
-
|
|
3250
|
+
n.suspendHistory();
|
|
3221
3251
|
const r = t || s.getActiveObject();
|
|
3222
3252
|
if (r) {
|
|
3223
3253
|
if (r instanceof U) {
|
|
@@ -3226,7 +3256,7 @@ class ee {
|
|
|
3226
3256
|
s.sendObjectToBack(c[d]);
|
|
3227
3257
|
} else
|
|
3228
3258
|
s.sendObjectToBack(r);
|
|
3229
|
-
a && s.sendObjectToBack(a), s.sendObjectToBack(
|
|
3259
|
+
a && s.sendObjectToBack(a), s.sendObjectToBack(o), i && s.sendObjectToBack(i), s.renderAll(), n.resumeHistory(), e || n.saveState(), s.fire("editor:object-send-to-back", {
|
|
3230
3260
|
object: r,
|
|
3231
3261
|
withoutSave: e
|
|
3232
3262
|
});
|
|
@@ -3241,14 +3271,14 @@ class ee {
|
|
|
3241
3271
|
sendBackwards(t, { withoutSave: e } = {}) {
|
|
3242
3272
|
const {
|
|
3243
3273
|
canvas: s,
|
|
3244
|
-
montageArea:
|
|
3245
|
-
historyManager:
|
|
3274
|
+
montageArea: o,
|
|
3275
|
+
historyManager: n,
|
|
3246
3276
|
interactionBlocker: { overlayMask: i },
|
|
3247
3277
|
backgroundManager: { backgroundObject: a }
|
|
3248
3278
|
} = this.editor;
|
|
3249
|
-
|
|
3279
|
+
n.suspendHistory();
|
|
3250
3280
|
const r = t || s.getActiveObject();
|
|
3251
|
-
r && (r instanceof U ? ee._moveSelectionBackwards(s, r) : s.sendObjectBackwards(r), a && s.sendObjectToBack(a), s.sendObjectToBack(
|
|
3281
|
+
r && (r instanceof U ? ee._moveSelectionBackwards(s, r) : s.sendObjectBackwards(r), a && s.sendObjectToBack(a), s.sendObjectToBack(o), i && s.sendObjectToBack(i), s.renderAll(), n.resumeHistory(), e || n.saveState(), s.fire("editor:object-send-backwards", {
|
|
3252
3282
|
object: r,
|
|
3253
3283
|
withoutSave: e
|
|
3254
3284
|
}));
|
|
@@ -3260,15 +3290,15 @@ class ee {
|
|
|
3260
3290
|
* @param activeSelection - активное выделение
|
|
3261
3291
|
*/
|
|
3262
3292
|
static _moveSelectionForward(t, e) {
|
|
3263
|
-
const s = t.getObjects(),
|
|
3264
|
-
if (!
|
|
3293
|
+
const s = t.getObjects(), o = e.getObjects();
|
|
3294
|
+
if (!o.some((a) => {
|
|
3265
3295
|
const r = s.indexOf(a);
|
|
3266
3296
|
for (let c = r + 1; c < s.length; c += 1)
|
|
3267
|
-
if (!
|
|
3297
|
+
if (!o.includes(s[c]))
|
|
3268
3298
|
return !0;
|
|
3269
3299
|
return !1;
|
|
3270
3300
|
})) return;
|
|
3271
|
-
|
|
3301
|
+
o.map((a) => ({ obj: a, index: s.indexOf(a) })).sort((a, r) => r.index - a.index).forEach((a) => {
|
|
3272
3302
|
t.bringObjectForward(a.obj);
|
|
3273
3303
|
});
|
|
3274
3304
|
}
|
|
@@ -3279,20 +3309,20 @@ class ee {
|
|
|
3279
3309
|
* @param activeSelection - активное выделение
|
|
3280
3310
|
*/
|
|
3281
3311
|
static _moveSelectionBackwards(t, e) {
|
|
3282
|
-
const s = t.getObjects(),
|
|
3283
|
-
if (!
|
|
3312
|
+
const s = t.getObjects(), o = e.getObjects();
|
|
3313
|
+
if (!o.some((a) => {
|
|
3284
3314
|
const r = s.indexOf(a);
|
|
3285
3315
|
for (let c = r - 1; c >= 0; c -= 1)
|
|
3286
|
-
if (!
|
|
3316
|
+
if (!o.includes(s[c]))
|
|
3287
3317
|
return !0;
|
|
3288
3318
|
return !1;
|
|
3289
3319
|
})) return;
|
|
3290
|
-
|
|
3320
|
+
o.map((a) => ({ obj: a, index: s.indexOf(a) })).sort((a, r) => a.index - r.index).forEach((a) => {
|
|
3291
3321
|
t.sendObjectBackwards(a.obj);
|
|
3292
3322
|
});
|
|
3293
3323
|
}
|
|
3294
3324
|
}
|
|
3295
|
-
class
|
|
3325
|
+
class to {
|
|
3296
3326
|
/**
|
|
3297
3327
|
* Менеджер фигур для редактора.
|
|
3298
3328
|
* @param options - Опции и настройки менеджера фигур.
|
|
@@ -3321,10 +3351,10 @@ class tn {
|
|
|
3321
3351
|
id: t = `rect-${V()}`,
|
|
3322
3352
|
left: e,
|
|
3323
3353
|
top: s,
|
|
3324
|
-
width:
|
|
3325
|
-
height:
|
|
3354
|
+
width: o = 100,
|
|
3355
|
+
height: n = 100,
|
|
3326
3356
|
fill: i = "blue"
|
|
3327
|
-
} = l, a =
|
|
3357
|
+
} = l, a = Mt(l, [
|
|
3328
3358
|
"id",
|
|
3329
3359
|
"left",
|
|
3330
3360
|
"top",
|
|
@@ -3336,8 +3366,8 @@ class tn {
|
|
|
3336
3366
|
id: t,
|
|
3337
3367
|
left: e,
|
|
3338
3368
|
top: s,
|
|
3339
|
-
width:
|
|
3340
|
-
height:
|
|
3369
|
+
width: o,
|
|
3370
|
+
height: n,
|
|
3341
3371
|
fill: i
|
|
3342
3372
|
}, a));
|
|
3343
3373
|
return !e && !s && u.centerObject(g), c || (u.add(g), r || u.setActiveObject(g), u.renderAll()), g;
|
|
@@ -3363,9 +3393,9 @@ class tn {
|
|
|
3363
3393
|
id: t = `circle-${V()}`,
|
|
3364
3394
|
left: e,
|
|
3365
3395
|
top: s,
|
|
3366
|
-
radius:
|
|
3367
|
-
fill:
|
|
3368
|
-
} = d, i =
|
|
3396
|
+
radius: o = 50,
|
|
3397
|
+
fill: n = "green"
|
|
3398
|
+
} = d, i = Mt(d, [
|
|
3369
3399
|
"id",
|
|
3370
3400
|
"left",
|
|
3371
3401
|
"top",
|
|
@@ -3376,8 +3406,8 @@ class tn {
|
|
|
3376
3406
|
id: t,
|
|
3377
3407
|
left: e,
|
|
3378
3408
|
top: s,
|
|
3379
|
-
fill:
|
|
3380
|
-
radius:
|
|
3409
|
+
fill: n,
|
|
3410
|
+
radius: o
|
|
3381
3411
|
}, i));
|
|
3382
3412
|
return !e && !s && l.centerObject(u), r || (l.add(u), a || l.setActiveObject(u), l.renderAll()), u;
|
|
3383
3413
|
}
|
|
@@ -3403,10 +3433,10 @@ class tn {
|
|
|
3403
3433
|
id: t = `triangle-${V()}`,
|
|
3404
3434
|
left: e,
|
|
3405
3435
|
top: s,
|
|
3406
|
-
width:
|
|
3407
|
-
height:
|
|
3436
|
+
width: o = 100,
|
|
3437
|
+
height: n = 100,
|
|
3408
3438
|
fill: i = "yellow"
|
|
3409
|
-
} = l, a =
|
|
3439
|
+
} = l, a = Mt(l, [
|
|
3410
3440
|
"id",
|
|
3411
3441
|
"left",
|
|
3412
3442
|
"top",
|
|
@@ -3419,13 +3449,13 @@ class tn {
|
|
|
3419
3449
|
left: e,
|
|
3420
3450
|
top: s,
|
|
3421
3451
|
fill: i,
|
|
3422
|
-
width:
|
|
3423
|
-
height:
|
|
3452
|
+
width: o,
|
|
3453
|
+
height: n
|
|
3424
3454
|
}, a));
|
|
3425
3455
|
return !e && !s && u.centerObject(g), c || (u.add(g), r || u.setActiveObject(g), u.renderAll()), g;
|
|
3426
3456
|
}
|
|
3427
3457
|
}
|
|
3428
|
-
class
|
|
3458
|
+
class eo {
|
|
3429
3459
|
/**
|
|
3430
3460
|
* @param options
|
|
3431
3461
|
* @param options.editor - экземпляр редактора с доступом к canvas
|
|
@@ -3456,15 +3486,15 @@ class en {
|
|
|
3456
3486
|
return k(this, null, function* () {
|
|
3457
3487
|
const { canvas: e, errorManager: s } = this.editor;
|
|
3458
3488
|
try {
|
|
3459
|
-
const
|
|
3460
|
-
this.clipboard =
|
|
3461
|
-
} catch (
|
|
3489
|
+
const o = yield t.clone(Qt);
|
|
3490
|
+
this.clipboard = o, e.fire("editor:object-copied", { object: o });
|
|
3491
|
+
} catch (o) {
|
|
3462
3492
|
s.emitError({
|
|
3463
3493
|
origin: "ClipboardManager",
|
|
3464
3494
|
method: "_cloneToInternalClipboard",
|
|
3465
3495
|
code: "CLONE_FAILED",
|
|
3466
3496
|
message: "Ошибка клонирования объекта для внутреннего буфера",
|
|
3467
|
-
data:
|
|
3497
|
+
data: o
|
|
3468
3498
|
});
|
|
3469
3499
|
}
|
|
3470
3500
|
});
|
|
@@ -3483,8 +3513,8 @@ class en {
|
|
|
3483
3513
|
message: "navigator.clipboard не поддерживается в этом браузере или отсутствует HTTPS-соединение."
|
|
3484
3514
|
}), !1;
|
|
3485
3515
|
try {
|
|
3486
|
-
const s = t.toObject(Qt),
|
|
3487
|
-
return t.type === "image" ? this._copyImageToClipboard(t,
|
|
3516
|
+
const s = t.toObject(Qt), o = JSON.stringify(s);
|
|
3517
|
+
return t.type === "image" ? this._copyImageToClipboard(t, o) : this._copyTextToClipboard(o);
|
|
3488
3518
|
} catch (s) {
|
|
3489
3519
|
return e.emitError({
|
|
3490
3520
|
origin: "ClipboardManager",
|
|
@@ -3502,10 +3532,10 @@ class en {
|
|
|
3502
3532
|
_copyImageToClipboard(t, e) {
|
|
3503
3533
|
return k(this, null, function* () {
|
|
3504
3534
|
try {
|
|
3505
|
-
const
|
|
3535
|
+
const o = t.toCanvasElement({ enableRetinaScaling: !1 }).toDataURL(), n = o.slice(5).split(";")[0], i = o.split(",")[1], a = atob(i), r = new Uint8Array(a.length);
|
|
3506
3536
|
for (let l = 0; l < a.length; l += 1)
|
|
3507
3537
|
r[l] = a.charCodeAt(l);
|
|
3508
|
-
const c = new Blob([r.buffer], { type:
|
|
3538
|
+
const c = new Blob([r.buffer], { type: n }), d = new ClipboardItem({ [n]: c });
|
|
3509
3539
|
return yield navigator.clipboard.write([d]), console.info("Image copied to clipboard successfully"), !0;
|
|
3510
3540
|
} catch (s) {
|
|
3511
3541
|
return this.editor.errorManager.emitWarning({
|
|
@@ -3545,8 +3575,8 @@ class en {
|
|
|
3545
3575
|
_addClonedObjectToCanvas(t) {
|
|
3546
3576
|
const { canvas: e, historyManager: s } = this.editor;
|
|
3547
3577
|
if (e.discardActiveObject(), t instanceof U) {
|
|
3548
|
-
s.suspendHistory(), t.canvas = e, t.forEachObject((
|
|
3549
|
-
e.add(
|
|
3578
|
+
s.suspendHistory(), t.canvas = e, t.forEachObject((o) => {
|
|
3579
|
+
e.add(o);
|
|
3550
3580
|
}), e.setActiveObject(t), e.requestRenderAll(), s.resumeHistory(), s.saveState();
|
|
3551
3581
|
return;
|
|
3552
3582
|
}
|
|
@@ -3577,26 +3607,26 @@ class en {
|
|
|
3577
3607
|
const { canvas: e } = this.editor, s = t || e.getActiveObject();
|
|
3578
3608
|
if (!s || s.locked) return !1;
|
|
3579
3609
|
try {
|
|
3580
|
-
const
|
|
3581
|
-
return
|
|
3582
|
-
|
|
3583
|
-
id: `${
|
|
3610
|
+
const o = yield s.clone(Qt);
|
|
3611
|
+
return o instanceof U && o.forEachObject((n) => {
|
|
3612
|
+
n.set({
|
|
3613
|
+
id: `${n.type}-${V()}`,
|
|
3584
3614
|
evented: !0
|
|
3585
3615
|
});
|
|
3586
|
-
}),
|
|
3587
|
-
id: `${
|
|
3588
|
-
left:
|
|
3589
|
-
top:
|
|
3616
|
+
}), o.set({
|
|
3617
|
+
id: `${o.type}-${V()}`,
|
|
3618
|
+
left: o.left + 10,
|
|
3619
|
+
top: o.top + 10,
|
|
3590
3620
|
evented: !0
|
|
3591
|
-
}), this._addClonedObjectToCanvas(
|
|
3592
|
-
} catch (
|
|
3593
|
-
const { errorManager:
|
|
3594
|
-
return
|
|
3621
|
+
}), this._addClonedObjectToCanvas(o), e.fire("editor:object-duplicated", { object: o }), !0;
|
|
3622
|
+
} catch (o) {
|
|
3623
|
+
const { errorManager: n } = this.editor;
|
|
3624
|
+
return n.emitError({
|
|
3595
3625
|
origin: "ClipboardManager",
|
|
3596
3626
|
method: "copyPaste",
|
|
3597
3627
|
code: "COPY_PASTE_FAILED",
|
|
3598
3628
|
message: "Ошибка создания копии объекта",
|
|
3599
|
-
data:
|
|
3629
|
+
data: o
|
|
3600
3630
|
}), !1;
|
|
3601
3631
|
}
|
|
3602
3632
|
});
|
|
@@ -3619,8 +3649,8 @@ class en {
|
|
|
3619
3649
|
this.paste();
|
|
3620
3650
|
return;
|
|
3621
3651
|
}
|
|
3622
|
-
const { items:
|
|
3623
|
-
if (
|
|
3652
|
+
const { items: o } = t, n = o[o.length - 1], i = n.getAsFile();
|
|
3653
|
+
if (n.type !== "text/html" && i) {
|
|
3624
3654
|
const c = new FileReader();
|
|
3625
3655
|
c.onload = (d) => {
|
|
3626
3656
|
d.target && this._handleImageImport(d.target.result).catch((l) => {
|
|
@@ -3701,7 +3731,7 @@ class se {
|
|
|
3701
3731
|
* @fires editor:object-locked
|
|
3702
3732
|
*/
|
|
3703
3733
|
lockObject({ object: t, skipInnerObjects: e, withoutSave: s } = {}) {
|
|
3704
|
-
const { canvas:
|
|
3734
|
+
const { canvas: o, historyManager: n } = this.editor, i = t || o.getActiveObject();
|
|
3705
3735
|
if (!i || i.locked) return;
|
|
3706
3736
|
const a = {
|
|
3707
3737
|
lockMovementX: !0,
|
|
@@ -3716,7 +3746,7 @@ class se {
|
|
|
3716
3746
|
};
|
|
3717
3747
|
i.set(a), !e && se._isGroupOrSelection(i) && i.getObjects().forEach((c) => {
|
|
3718
3748
|
c.set(a);
|
|
3719
|
-
}),
|
|
3749
|
+
}), i instanceof st && i.isEditing && i.exitEditing(), o.renderAll(), s || n.saveState(), o.fire("editor:object-locked", {
|
|
3720
3750
|
object: i,
|
|
3721
3751
|
skipInnerObjects: e,
|
|
3722
3752
|
withoutSave: s
|
|
@@ -3730,8 +3760,8 @@ class se {
|
|
|
3730
3760
|
* @fires editor:object-unlocked
|
|
3731
3761
|
*/
|
|
3732
3762
|
unlockObject({ object: t, withoutSave: e } = {}) {
|
|
3733
|
-
const { canvas: s, historyManager:
|
|
3734
|
-
if (!
|
|
3763
|
+
const { canvas: s, historyManager: o } = this.editor, n = t || s.getActiveObject();
|
|
3764
|
+
if (!n) return;
|
|
3735
3765
|
const i = {
|
|
3736
3766
|
lockMovementX: !1,
|
|
3737
3767
|
lockMovementY: !1,
|
|
@@ -3743,10 +3773,10 @@ class se {
|
|
|
3743
3773
|
editable: !0,
|
|
3744
3774
|
locked: !1
|
|
3745
3775
|
};
|
|
3746
|
-
|
|
3776
|
+
n.set(i), se._isGroupOrSelection(n) && n.getObjects().forEach((a) => {
|
|
3747
3777
|
a.set(i);
|
|
3748
|
-
}), s.renderAll(), e ||
|
|
3749
|
-
object:
|
|
3778
|
+
}), s.renderAll(), e || o.saveState(), s.fire("editor:object-unlocked", {
|
|
3779
|
+
object: n,
|
|
3750
3780
|
withoutSave: e
|
|
3751
3781
|
});
|
|
3752
3782
|
}
|
|
@@ -3754,7 +3784,7 @@ class se {
|
|
|
3754
3784
|
return t instanceof U || t instanceof Et;
|
|
3755
3785
|
}
|
|
3756
3786
|
}
|
|
3757
|
-
class
|
|
3787
|
+
class so {
|
|
3758
3788
|
constructor({ editor: t }) {
|
|
3759
3789
|
this.editor = t;
|
|
3760
3790
|
}
|
|
@@ -3774,17 +3804,17 @@ class sn {
|
|
|
3774
3804
|
*/
|
|
3775
3805
|
_getGroupsToUngroup(t) {
|
|
3776
3806
|
if (Array.isArray(t)) {
|
|
3777
|
-
const s = t.filter((
|
|
3807
|
+
const s = t.filter((o) => o instanceof Et);
|
|
3778
3808
|
return s.length > 0 ? s : null;
|
|
3779
3809
|
}
|
|
3780
3810
|
if (t instanceof U) {
|
|
3781
|
-
const s = t.getObjects().filter((
|
|
3811
|
+
const s = t.getObjects().filter((o) => o instanceof Et);
|
|
3782
3812
|
return s.length > 0 ? s : null;
|
|
3783
3813
|
}
|
|
3784
3814
|
const e = t || this.editor.canvas.getActiveObject();
|
|
3785
3815
|
if (!e) return null;
|
|
3786
3816
|
if (e instanceof U) {
|
|
3787
|
-
const s = e.getObjects().filter((
|
|
3817
|
+
const s = e.getObjects().filter((o) => o instanceof Et);
|
|
3788
3818
|
return s.length > 0 ? s : null;
|
|
3789
3819
|
}
|
|
3790
3820
|
return e instanceof Et ? [e] : null;
|
|
@@ -3800,21 +3830,21 @@ class sn {
|
|
|
3800
3830
|
target: t,
|
|
3801
3831
|
withoutSave: e = !1
|
|
3802
3832
|
} = {}) {
|
|
3803
|
-
const { canvas: s, historyManager:
|
|
3804
|
-
if (!
|
|
3833
|
+
const { canvas: s, historyManager: o } = this.editor, n = this._getObjectsToGroup(t);
|
|
3834
|
+
if (!n) return null;
|
|
3805
3835
|
try {
|
|
3806
|
-
|
|
3807
|
-
const i = new Et(
|
|
3836
|
+
o.suspendHistory();
|
|
3837
|
+
const i = new Et(n, {
|
|
3808
3838
|
id: `group-${V()}`
|
|
3809
3839
|
});
|
|
3810
|
-
|
|
3840
|
+
n.forEach((r) => s.remove(r)), s.add(i), s.setActiveObject(i), s.requestRenderAll();
|
|
3811
3841
|
const a = {
|
|
3812
3842
|
group: i,
|
|
3813
3843
|
withoutSave: e
|
|
3814
3844
|
};
|
|
3815
3845
|
return s.fire("editor:objects-grouped", a), a;
|
|
3816
3846
|
} finally {
|
|
3817
|
-
|
|
3847
|
+
o.resumeHistory(), e || o.saveState();
|
|
3818
3848
|
}
|
|
3819
3849
|
}
|
|
3820
3850
|
/**
|
|
@@ -3829,12 +3859,12 @@ class sn {
|
|
|
3829
3859
|
target: t,
|
|
3830
3860
|
withoutSave: e = !1
|
|
3831
3861
|
} = {}) {
|
|
3832
|
-
const { canvas: s, historyManager:
|
|
3833
|
-
if (!
|
|
3862
|
+
const { canvas: s, historyManager: o } = this.editor, n = this._getGroupsToUngroup(t);
|
|
3863
|
+
if (!n) return null;
|
|
3834
3864
|
try {
|
|
3835
|
-
|
|
3865
|
+
o.suspendHistory();
|
|
3836
3866
|
const i = [];
|
|
3837
|
-
|
|
3867
|
+
n.forEach((c) => {
|
|
3838
3868
|
const d = c.removeAll();
|
|
3839
3869
|
s.remove(c), d.forEach((l) => {
|
|
3840
3870
|
s.add(l), i.push(l);
|
|
@@ -3851,11 +3881,11 @@ class sn {
|
|
|
3851
3881
|
};
|
|
3852
3882
|
return s.fire("editor:objects-ungrouped", r), r;
|
|
3853
3883
|
} finally {
|
|
3854
|
-
|
|
3884
|
+
o.resumeHistory(), e || o.saveState();
|
|
3855
3885
|
}
|
|
3856
3886
|
}
|
|
3857
3887
|
}
|
|
3858
|
-
class
|
|
3888
|
+
class oo {
|
|
3859
3889
|
constructor({ editor: t }) {
|
|
3860
3890
|
this.editor = t;
|
|
3861
3891
|
}
|
|
@@ -3866,8 +3896,8 @@ class nn {
|
|
|
3866
3896
|
selectAll() {
|
|
3867
3897
|
const { canvas: t, canvasManager: e, objectLockManager: s } = this.editor;
|
|
3868
3898
|
t.discardActiveObject();
|
|
3869
|
-
const
|
|
3870
|
-
|
|
3899
|
+
const o = e.getObjects(), n = o.some((a) => a.locked), i = o.length > 1 ? new U(e.getObjects(), { canvas: t }) : o[0];
|
|
3900
|
+
n && s.lockObject({ object: i, skipInnerObjects: !0, withoutSave: !0 }), t.setActiveObject(i), t.requestRenderAll(), t.fire("editor:all-objects-selected", { selected: i });
|
|
3871
3901
|
}
|
|
3872
3902
|
}
|
|
3873
3903
|
class Se {
|
|
@@ -3888,11 +3918,11 @@ class Se {
|
|
|
3888
3918
|
* @returns массив всех удаленных объектов (включая саму группу)
|
|
3889
3919
|
*/
|
|
3890
3920
|
_handleGroupDeletion(t) {
|
|
3891
|
-
var
|
|
3892
|
-
const { groupingManager: e } = this.editor, { ungroupedObjects: s = [] } = (
|
|
3921
|
+
var o;
|
|
3922
|
+
const { groupingManager: e } = this.editor, { ungroupedObjects: s = [] } = (o = e.ungroup({
|
|
3893
3923
|
object: t,
|
|
3894
3924
|
withoutSave: !0
|
|
3895
|
-
})) != null ?
|
|
3925
|
+
})) != null ? o : {};
|
|
3896
3926
|
return this.deleteSelectedObjects({
|
|
3897
3927
|
objects: s,
|
|
3898
3928
|
withoutSave: !0,
|
|
@@ -3912,9 +3942,9 @@ class Se {
|
|
|
3912
3942
|
withoutSave: e = !1,
|
|
3913
3943
|
_isRecursiveCall: s = !1
|
|
3914
3944
|
} = {}) {
|
|
3915
|
-
const { canvas:
|
|
3945
|
+
const { canvas: o, historyManager: n } = this.editor, a = (t || o.getActiveObjects()).filter((d) => !d.locked);
|
|
3916
3946
|
if (!(a != null && a.length)) return null;
|
|
3917
|
-
s ||
|
|
3947
|
+
s || n.suspendHistory();
|
|
3918
3948
|
const r = [];
|
|
3919
3949
|
if (a.forEach((d) => {
|
|
3920
3950
|
if (Se._isUngroupableGroup(d)) {
|
|
@@ -3922,17 +3952,17 @@ class Se {
|
|
|
3922
3952
|
r.push(...l);
|
|
3923
3953
|
return;
|
|
3924
3954
|
}
|
|
3925
|
-
|
|
3955
|
+
o.remove(d), r.push(d);
|
|
3926
3956
|
}), s) return null;
|
|
3927
|
-
|
|
3957
|
+
o.discardActiveObject(), o.renderAll(), n.resumeHistory(), e || n.saveState();
|
|
3928
3958
|
const c = {
|
|
3929
3959
|
objects: r,
|
|
3930
3960
|
withoutSave: e
|
|
3931
3961
|
};
|
|
3932
|
-
return
|
|
3962
|
+
return o.fire("editor:objects-deleted", c), c;
|
|
3933
3963
|
}
|
|
3934
3964
|
}
|
|
3935
|
-
const
|
|
3965
|
+
const wt = {
|
|
3936
3966
|
IMAGE_MANAGER: {
|
|
3937
3967
|
/**
|
|
3938
3968
|
* Некорректный Content-Type изображения
|
|
@@ -4063,20 +4093,20 @@ class Yt {
|
|
|
4063
4093
|
* @param options.message — текст ошибки (опционально, если не передан, то используется код ошибки)
|
|
4064
4094
|
* @fires editor:error
|
|
4065
4095
|
*/
|
|
4066
|
-
emitError({ origin: t = "ImageEditor", method: e = "Unknown Method", code: s, data:
|
|
4096
|
+
emitError({ origin: t = "ImageEditor", method: e = "Unknown Method", code: s, data: o, message: n }) {
|
|
4067
4097
|
if (!Yt.isValidErrorCode(s)) {
|
|
4068
4098
|
console.warn("Неизвестный код ошибки: ", { code: s, origin: t, method: e });
|
|
4069
4099
|
return;
|
|
4070
4100
|
}
|
|
4071
4101
|
if (!s) return;
|
|
4072
|
-
const i =
|
|
4073
|
-
console.error(`${t}. ${e}. ${s}. ${i}`,
|
|
4102
|
+
const i = n || s;
|
|
4103
|
+
console.error(`${t}. ${e}. ${s}. ${i}`, o);
|
|
4074
4104
|
const a = {
|
|
4075
4105
|
code: s,
|
|
4076
4106
|
origin: t,
|
|
4077
4107
|
method: e,
|
|
4078
4108
|
message: i,
|
|
4079
|
-
data:
|
|
4109
|
+
data: o
|
|
4080
4110
|
};
|
|
4081
4111
|
this._buffer.push(B({
|
|
4082
4112
|
type: "editor:error"
|
|
@@ -4092,19 +4122,19 @@ class Yt {
|
|
|
4092
4122
|
* @param options.message — текст предупреждения (опционально, если не передан, то используется код предупреждения)
|
|
4093
4123
|
* @fires editor:warning
|
|
4094
4124
|
*/
|
|
4095
|
-
emitWarning({ origin: t = "ImageEditor", method: e = "Unknown Method", code: s, message:
|
|
4125
|
+
emitWarning({ origin: t = "ImageEditor", method: e = "Unknown Method", code: s, message: o, data: n }) {
|
|
4096
4126
|
if (!Yt.isValidErrorCode(s)) {
|
|
4097
4127
|
console.warn("Неизвестный код предупреждения: ", { code: s, origin: t, method: e });
|
|
4098
4128
|
return;
|
|
4099
4129
|
}
|
|
4100
|
-
const i =
|
|
4101
|
-
console.warn(`${t}. ${e}. ${s}. ${i}`,
|
|
4130
|
+
const i = o || s;
|
|
4131
|
+
console.warn(`${t}. ${e}. ${s}. ${i}`, n);
|
|
4102
4132
|
const a = {
|
|
4103
4133
|
code: s,
|
|
4104
4134
|
origin: t,
|
|
4105
4135
|
method: e,
|
|
4106
4136
|
message: i,
|
|
4107
|
-
data:
|
|
4137
|
+
data: n
|
|
4108
4138
|
};
|
|
4109
4139
|
this._buffer.push(B({
|
|
4110
4140
|
type: "editor:warning"
|
|
@@ -4116,10 +4146,10 @@ class Yt {
|
|
|
4116
4146
|
* @returns true, если код допустим, иначе false
|
|
4117
4147
|
*/
|
|
4118
4148
|
static isValidErrorCode(t) {
|
|
4119
|
-
return t ? Object.values(
|
|
4149
|
+
return t ? Object.values(wt).some((e) => Object.values(e).includes(t)) : !1;
|
|
4120
4150
|
}
|
|
4121
4151
|
}
|
|
4122
|
-
class
|
|
4152
|
+
class no {
|
|
4123
4153
|
constructor({ editor: t }) {
|
|
4124
4154
|
this.currentBounds = null, this.editor = t;
|
|
4125
4155
|
}
|
|
@@ -4132,8 +4162,8 @@ class on {
|
|
|
4132
4162
|
* @returns Объект с границами перетаскивания
|
|
4133
4163
|
*/
|
|
4134
4164
|
calculatePanBounds() {
|
|
4135
|
-
const { canvas: t, montageArea: e, zoomManager: s } = this.editor, { defaultZoom:
|
|
4136
|
-
if (
|
|
4165
|
+
const { canvas: t, montageArea: e, zoomManager: s } = this.editor, { defaultZoom: o } = s, n = t.getZoom();
|
|
4166
|
+
if (n <= o)
|
|
4137
4167
|
return {
|
|
4138
4168
|
minX: 0,
|
|
4139
4169
|
maxX: 0,
|
|
@@ -4141,7 +4171,7 @@ class on {
|
|
|
4141
4171
|
maxY: 0,
|
|
4142
4172
|
canPan: !1
|
|
4143
4173
|
};
|
|
4144
|
-
const i = e.width *
|
|
4174
|
+
const i = e.width * n, a = e.height * n, r = i / 2, c = a / 2;
|
|
4145
4175
|
return {
|
|
4146
4176
|
minX: -r,
|
|
4147
4177
|
maxX: r,
|
|
@@ -4169,13 +4199,13 @@ class on {
|
|
|
4169
4199
|
constrainPan(t, e) {
|
|
4170
4200
|
if (!this.currentBounds || !this.currentBounds.canPan)
|
|
4171
4201
|
return { x: 0, y: 0 };
|
|
4172
|
-
const { canvas: s, montageArea:
|
|
4202
|
+
const { canvas: s, montageArea: o } = this.editor, n = s.getZoom(), i = o.left, a = o.top, r = s.getWidth() / 2, c = s.getHeight() / 2, d = i * n + t - r, l = a * n + e - c, u = Math.max(
|
|
4173
4203
|
this.currentBounds.minX,
|
|
4174
4204
|
Math.min(this.currentBounds.maxX, d)
|
|
4175
4205
|
), g = Math.max(
|
|
4176
4206
|
this.currentBounds.minY,
|
|
4177
4207
|
Math.min(this.currentBounds.maxY, l)
|
|
4178
|
-
), f = u + r - i *
|
|
4208
|
+
), f = u + r - i * n, p = g + c - a * n;
|
|
4179
4209
|
return {
|
|
4180
4210
|
x: f,
|
|
4181
4211
|
y: p
|
|
@@ -4193,7 +4223,7 @@ class on {
|
|
|
4193
4223
|
* @returns Объект с координатами смещения
|
|
4194
4224
|
*/
|
|
4195
4225
|
getCurrentOffset() {
|
|
4196
|
-
const { canvas: t, montageArea: e } = this.editor, s = t.getZoom(),
|
|
4226
|
+
const { canvas: t, montageArea: e } = this.editor, s = t.getZoom(), o = t.viewportTransform, n = e.left, i = e.top, a = t.getWidth() / 2, r = t.getHeight() / 2, c = n * s + o[4] - a, d = i * s + o[5] - r;
|
|
4197
4227
|
return { x: c, y: d };
|
|
4198
4228
|
}
|
|
4199
4229
|
/**
|
|
@@ -4208,10 +4238,10 @@ const at = ({
|
|
|
4208
4238
|
value: h,
|
|
4209
4239
|
min: t,
|
|
4210
4240
|
max: e
|
|
4211
|
-
}) => Math.min(Math.max(h, t), e), Dt = class Dt extends
|
|
4241
|
+
}) => Math.min(Math.max(h, t), e), Dt = class Dt extends st {
|
|
4212
4242
|
constructor(t, e = {}) {
|
|
4213
|
-
var s,
|
|
4214
|
-
super(t, e), this.backgroundOpacity = (s = e.backgroundOpacity) != null ? s : 1, this.paddingTop = (
|
|
4243
|
+
var s, o, n, i, a, r, c, d, l;
|
|
4244
|
+
super(t, e), this.backgroundOpacity = (s = e.backgroundOpacity) != null ? s : 1, this.paddingTop = (o = e.paddingTop) != null ? o : 0, this.paddingRight = (n = e.paddingRight) != null ? n : 0, this.paddingBottom = (i = e.paddingBottom) != null ? i : 0, this.paddingLeft = (a = e.paddingLeft) != null ? a : 0, this.radiusTopLeft = (r = e.radiusTopLeft) != null ? r : 0, this.radiusTopRight = (c = e.radiusTopRight) != null ? c : 0, this.radiusBottomRight = (d = e.radiusBottomRight) != null ? d : 0, this.radiusBottomLeft = (l = e.radiusBottomLeft) != null ? l : 0, this._roundDimensions();
|
|
4215
4245
|
}
|
|
4216
4246
|
/**
|
|
4217
4247
|
* Пересчитывает размеры текста и округляет их до целых значений.
|
|
@@ -4229,11 +4259,11 @@ const at = ({
|
|
|
4229
4259
|
}
|
|
4230
4260
|
_getNonTransformedDimensions() {
|
|
4231
4261
|
const { width: t, height: e } = this._getBackgroundDimensions();
|
|
4232
|
-
return new
|
|
4262
|
+
return new tt(t, e).scalarAdd(this.strokeWidth);
|
|
4233
4263
|
}
|
|
4234
4264
|
_getTransformedDimensions(t = {}) {
|
|
4235
4265
|
const { width: e, height: s } = this._getBackgroundDimensions();
|
|
4236
|
-
return super._getTransformedDimensions(
|
|
4266
|
+
return super._getTransformedDimensions(bt(B({}, t), {
|
|
4237
4267
|
width: e,
|
|
4238
4268
|
height: s
|
|
4239
4269
|
}));
|
|
@@ -4243,7 +4273,7 @@ const at = ({
|
|
|
4243
4273
|
*/
|
|
4244
4274
|
toObject(t = []) {
|
|
4245
4275
|
const e = super.toObject(t);
|
|
4246
|
-
return
|
|
4276
|
+
return bt(B({}, e), {
|
|
4247
4277
|
backgroundOpacity: this.backgroundOpacity,
|
|
4248
4278
|
paddingTop: this.paddingTop,
|
|
4249
4279
|
paddingRight: this.paddingRight,
|
|
@@ -4256,10 +4286,10 @@ const at = ({
|
|
|
4256
4286
|
});
|
|
4257
4287
|
}
|
|
4258
4288
|
_renderBackground(t) {
|
|
4259
|
-
var s,
|
|
4289
|
+
var s, o;
|
|
4260
4290
|
const e = this._getEffectiveBackgroundFill();
|
|
4261
4291
|
if (e && e) {
|
|
4262
|
-
const
|
|
4292
|
+
const n = this._getPadding(), i = (s = this.width) != null ? s : 0, a = (o = this.height) != null ? o : 0, r = i + n.left + n.right, c = a + n.top + n.bottom, d = this._getCornerRadii({ width: r, height: c }), l = this._getLeftOffset() - n.left, u = this._getTopOffset() - n.top;
|
|
4263
4293
|
t.save(), Dt._renderRoundedRect({
|
|
4264
4294
|
ctx: t,
|
|
4265
4295
|
height: c,
|
|
@@ -4271,8 +4301,8 @@ const at = ({
|
|
|
4271
4301
|
}
|
|
4272
4302
|
}
|
|
4273
4303
|
_getBackgroundDimensions() {
|
|
4274
|
-
var
|
|
4275
|
-
const t = (
|
|
4304
|
+
var o, n, i, a;
|
|
4305
|
+
const t = (n = (o = this.width) != null ? o : this.calcTextWidth()) != null ? n : 0, e = (a = (i = this.height) != null ? i : this.calcTextHeight()) != null ? a : 0, s = this._getPadding();
|
|
4276
4306
|
return {
|
|
4277
4307
|
height: e + s.top + s.bottom,
|
|
4278
4308
|
width: t + s.left + s.right
|
|
@@ -4280,38 +4310,38 @@ const at = ({
|
|
|
4280
4310
|
}
|
|
4281
4311
|
_getCornerRadii({ width: t, height: e }) {
|
|
4282
4312
|
var i, a, r, c;
|
|
4283
|
-
const s = t / 2,
|
|
4313
|
+
const s = t / 2, o = e / 2, n = Math.min(s, o);
|
|
4284
4314
|
return {
|
|
4285
|
-
bottomLeft: at({ value: (i = this.radiusBottomLeft) != null ? i : 0, min: 0, max:
|
|
4286
|
-
bottomRight: at({ value: (a = this.radiusBottomRight) != null ? a : 0, min: 0, max:
|
|
4287
|
-
topLeft: at({ value: (r = this.radiusTopLeft) != null ? r : 0, min: 0, max:
|
|
4288
|
-
topRight: at({ value: (c = this.radiusTopRight) != null ? c : 0, min: 0, max:
|
|
4315
|
+
bottomLeft: at({ value: (i = this.radiusBottomLeft) != null ? i : 0, min: 0, max: n }),
|
|
4316
|
+
bottomRight: at({ value: (a = this.radiusBottomRight) != null ? a : 0, min: 0, max: n }),
|
|
4317
|
+
topLeft: at({ value: (r = this.radiusTopLeft) != null ? r : 0, min: 0, max: n }),
|
|
4318
|
+
topRight: at({ value: (c = this.radiusTopRight) != null ? c : 0, min: 0, max: n })
|
|
4289
4319
|
};
|
|
4290
4320
|
}
|
|
4291
4321
|
_getPadding() {
|
|
4292
|
-
var t, e, s,
|
|
4322
|
+
var t, e, s, o;
|
|
4293
4323
|
return {
|
|
4294
4324
|
bottom: (t = this.paddingBottom) != null ? t : 0,
|
|
4295
4325
|
left: (e = this.paddingLeft) != null ? e : 0,
|
|
4296
4326
|
right: (s = this.paddingRight) != null ? s : 0,
|
|
4297
|
-
top: (
|
|
4327
|
+
top: (o = this.paddingTop) != null ? o : 0
|
|
4298
4328
|
};
|
|
4299
4329
|
}
|
|
4300
4330
|
_getEffectiveBackgroundFill() {
|
|
4301
|
-
var
|
|
4331
|
+
var o;
|
|
4302
4332
|
const t = this.backgroundColor;
|
|
4303
4333
|
if (!t) return null;
|
|
4304
|
-
const e = at({ value: (
|
|
4334
|
+
const e = at({ value: (o = this.backgroundOpacity) != null ? o : 1, min: 0, max: 1 });
|
|
4305
4335
|
let s;
|
|
4306
4336
|
try {
|
|
4307
4337
|
s = new ps(t);
|
|
4308
|
-
} catch (
|
|
4338
|
+
} catch (n) {
|
|
4309
4339
|
return Yt.emitError({
|
|
4310
4340
|
origin: "BackgroundTextbox",
|
|
4311
4341
|
method: "_getEffectiveBackgroundFill",
|
|
4312
4342
|
code: "INVALID_COLOR_VALUE",
|
|
4313
4343
|
message: `Некорректное значение цвета фона: ${t}`,
|
|
4314
|
-
data: { color: t, error:
|
|
4344
|
+
data: { color: t, error: n }
|
|
4315
4345
|
}), null;
|
|
4316
4346
|
}
|
|
4317
4347
|
return s.setAlpha(e), s.toRgba();
|
|
@@ -4320,17 +4350,17 @@ const at = ({
|
|
|
4320
4350
|
ctx: t,
|
|
4321
4351
|
height: e,
|
|
4322
4352
|
left: s,
|
|
4323
|
-
radii:
|
|
4324
|
-
top:
|
|
4353
|
+
radii: o,
|
|
4354
|
+
top: n,
|
|
4325
4355
|
width: i
|
|
4326
4356
|
}) {
|
|
4327
|
-
const a = s + i, r =
|
|
4357
|
+
const a = s + i, r = n + e, {
|
|
4328
4358
|
topLeft: c,
|
|
4329
4359
|
topRight: d,
|
|
4330
4360
|
bottomRight: l,
|
|
4331
4361
|
bottomLeft: u
|
|
4332
|
-
} =
|
|
4333
|
-
t.beginPath(), t.moveTo(s + g,
|
|
4362
|
+
} = o, g = at({ value: c, min: 0, max: i }), f = at({ value: d, min: 0, max: i }), p = at({ value: l, min: 0, max: i }), m = at({ value: u, min: 0, max: i });
|
|
4363
|
+
t.beginPath(), t.moveTo(s + g, n), t.lineTo(a - f, n), t.quadraticCurveTo(a, n, a, n + f), t.lineTo(a, r - p), t.quadraticCurveTo(a, r, a - p, r), t.lineTo(s + m, r), t.quadraticCurveTo(s, r, s, r - m), t.lineTo(s, n + g), t.quadraticCurveTo(s, n, s + g, n), t.closePath();
|
|
4334
4364
|
}
|
|
4335
4365
|
/**
|
|
4336
4366
|
* Округляет текущие значения ширины и высоты до ближайших целых.
|
|
@@ -4339,12 +4369,12 @@ const at = ({
|
|
|
4339
4369
|
const {
|
|
4340
4370
|
width: t = 0,
|
|
4341
4371
|
height: e = 0
|
|
4342
|
-
} = this, s = Math.round(t),
|
|
4343
|
-
s !== t && (this.width = Math.max(0, s)),
|
|
4372
|
+
} = this, s = Math.round(t), o = Math.round(e);
|
|
4373
|
+
s !== t && (this.width = Math.max(0, s)), o !== e && (this.height = Math.max(0, o));
|
|
4344
4374
|
}
|
|
4345
4375
|
};
|
|
4346
4376
|
Dt.type = "background-textbox", Dt.cacheProperties = [
|
|
4347
|
-
...Array.isArray(
|
|
4377
|
+
...Array.isArray(st.cacheProperties) ? st.cacheProperties : [],
|
|
4348
4378
|
"backgroundColor",
|
|
4349
4379
|
"backgroundOpacity",
|
|
4350
4380
|
"paddingTop",
|
|
@@ -4356,7 +4386,7 @@ Dt.type = "background-textbox", Dt.cacheProperties = [
|
|
|
4356
4386
|
"radiusBottomRight",
|
|
4357
4387
|
"radiusBottomLeft"
|
|
4358
4388
|
], Dt.stateProperties = [
|
|
4359
|
-
...Array.isArray(
|
|
4389
|
+
...Array.isArray(st.stateProperties) ? st.stateProperties : [],
|
|
4360
4390
|
"backgroundColor",
|
|
4361
4391
|
"backgroundOpacity",
|
|
4362
4392
|
"paddingTop",
|
|
@@ -4368,26 +4398,26 @@ Dt.type = "background-textbox", Dt.cacheProperties = [
|
|
|
4368
4398
|
"radiusBottomRight",
|
|
4369
4399
|
"radiusBottomLeft"
|
|
4370
4400
|
];
|
|
4371
|
-
let
|
|
4372
|
-
const
|
|
4401
|
+
let oe = Dt;
|
|
4402
|
+
const io = () => {
|
|
4373
4403
|
var h;
|
|
4374
|
-
(h = ze) != null && h.setClass && ze.setClass(
|
|
4375
|
-
},
|
|
4376
|
-
var s,
|
|
4404
|
+
(h = ze) != null && h.setClass && ze.setClass(oe, "background-textbox");
|
|
4405
|
+
}, ao = ({ textbox: h }) => {
|
|
4406
|
+
var s, o;
|
|
4377
4407
|
if (!h.isEditing) return null;
|
|
4378
|
-
const t = (s = h.selectionStart) != null ? s : 0, e = (
|
|
4408
|
+
const t = (s = h.selectionStart) != null ? s : 0, e = (o = h.selectionEnd) != null ? o : t;
|
|
4379
4409
|
return t === e ? null : {
|
|
4380
4410
|
start: Math.min(t, e),
|
|
4381
4411
|
end: Math.max(t, e)
|
|
4382
4412
|
};
|
|
4383
|
-
},
|
|
4413
|
+
}, ro = ({ textbox: h }) => {
|
|
4384
4414
|
var e, s;
|
|
4385
4415
|
const t = (s = (e = h.text) == null ? void 0 : e.length) != null ? s : 0;
|
|
4386
4416
|
return t <= 0 ? null : { start: 0, end: t };
|
|
4387
|
-
},
|
|
4388
|
-
var s,
|
|
4417
|
+
}, co = ({ textbox: h, range: t }) => {
|
|
4418
|
+
var s, o;
|
|
4389
4419
|
if (!t) return !1;
|
|
4390
|
-
const e = (
|
|
4420
|
+
const e = (o = (s = h.text) == null ? void 0 : s.length) != null ? o : 0;
|
|
4391
4421
|
return e <= 0 ? !1 : t.start <= 0 && t.end >= e;
|
|
4392
4422
|
}, re = ({
|
|
4393
4423
|
textbox: h,
|
|
@@ -4395,14 +4425,14 @@ const an = () => {
|
|
|
4395
4425
|
range: e
|
|
4396
4426
|
}) => {
|
|
4397
4427
|
if (!t || !Object.keys(t).length) return !1;
|
|
4398
|
-
const { start: s, end:
|
|
4399
|
-
return
|
|
4428
|
+
const { start: s, end: o } = e;
|
|
4429
|
+
return o <= s ? !1 : (h.setSelectionStyles(t, s, o), !0);
|
|
4400
4430
|
}, Ge = ({
|
|
4401
4431
|
textbox: h,
|
|
4402
4432
|
range: t,
|
|
4403
4433
|
property: e
|
|
4404
4434
|
}) => {
|
|
4405
|
-
var
|
|
4435
|
+
var o;
|
|
4406
4436
|
if (!t) return;
|
|
4407
4437
|
const s = h.getSelectionStyles(
|
|
4408
4438
|
t.start,
|
|
@@ -4410,7 +4440,7 @@ const an = () => {
|
|
|
4410
4440
|
!0
|
|
4411
4441
|
);
|
|
4412
4442
|
if (s.length)
|
|
4413
|
-
return (
|
|
4443
|
+
return (o = s[0]) == null ? void 0 : o[e];
|
|
4414
4444
|
}, Ve = ({ strokeColor: h, width: t }) => t <= 0 ? null : h != null ? h : "#000000", Xe = ({ width: h = 0 }) => h ? Math.max(0, h) : 0, ce = ({ value: h }) => typeof h == "string" ? h.toLocaleUpperCase() : "", nt = 0.01;
|
|
4415
4445
|
class W {
|
|
4416
4446
|
constructor({ editor: t }) {
|
|
@@ -4419,35 +4449,35 @@ class W {
|
|
|
4419
4449
|
this.isTextEditingActive = !0;
|
|
4420
4450
|
}, this._handleTextEditingExited = (s) => {
|
|
4421
4451
|
var r, c;
|
|
4422
|
-
const { target:
|
|
4423
|
-
if (!W._isTextbox(
|
|
4424
|
-
const
|
|
4425
|
-
if (!!
|
|
4426
|
-
const d = (c =
|
|
4427
|
-
|
|
4452
|
+
const { target: o } = s;
|
|
4453
|
+
if (!W._isTextbox(o)) return;
|
|
4454
|
+
const n = (r = o.text) != null ? r : "";
|
|
4455
|
+
if (!!o.uppercase) {
|
|
4456
|
+
const d = (c = o.textCaseRaw) != null ? c : n.toLocaleLowerCase();
|
|
4457
|
+
o.textCaseRaw = d;
|
|
4428
4458
|
} else
|
|
4429
|
-
|
|
4430
|
-
W._roundTextboxDimensions({ textbox:
|
|
4459
|
+
o.textCaseRaw = n;
|
|
4460
|
+
W._roundTextboxDimensions({ textbox: o }) && (o.setCoords(), o.dirty = !0, this.canvas.requestRenderAll()), o.locked || o.set({
|
|
4431
4461
|
lockMovementX: !1,
|
|
4432
4462
|
lockMovementY: !1
|
|
4433
4463
|
}), setTimeout(() => {
|
|
4434
4464
|
this.isTextEditingActive = !1, this.editor.historyManager.saveState();
|
|
4435
4465
|
}, Vs);
|
|
4436
4466
|
}, this._handleObjectScaling = (s) => {
|
|
4437
|
-
var kt, zt, X,
|
|
4438
|
-
const { target:
|
|
4439
|
-
if (
|
|
4440
|
-
|
|
4441
|
-
const i = this._ensureScalingState(
|
|
4467
|
+
var kt, zt, X, Ct, Zt, vt, Gt, Tt, je, Ie, Ce, Te, Ee;
|
|
4468
|
+
const { target: o, transform: n } = s;
|
|
4469
|
+
if (o instanceof U || !W._isTextbox(o) || !n) return;
|
|
4470
|
+
o.isScaling = !0;
|
|
4471
|
+
const i = this._ensureScalingState(o), {
|
|
4442
4472
|
baseWidth: a,
|
|
4443
4473
|
baseLeft: r,
|
|
4444
4474
|
baseFontSize: c,
|
|
4445
4475
|
basePadding: d,
|
|
4446
4476
|
baseRadii: l,
|
|
4447
4477
|
baseStyles: u
|
|
4448
|
-
} = i, g = typeof ((kt =
|
|
4478
|
+
} = i, g = typeof ((kt = n.original) == null ? void 0 : kt.width) == "number" ? n.original.width : void 0, f = typeof ((zt = n.original) == null ? void 0 : zt.left) == "number" ? n.original.left : void 0, p = g != null ? g : a, m = f != null ? f : r, v = (X = n.corner) != null ? X : "", M = (Ct = n.action) != null ? Ct : "", S = ["ml", "mr"].includes(v) || M === "scaleX", y = ["mt", "mb"].includes(v) || M === "scaleY", b = ["tl", "tr", "bl", "br"].includes(v) || M === "scale", I = b || y;
|
|
4449
4479
|
if (!S && !y && !b) return;
|
|
4450
|
-
const j = Math.abs((
|
|
4480
|
+
const j = Math.abs((vt = (Zt = o.scaleX) != null ? Zt : n.scaleX) != null ? vt : 1) || 1, A = Math.abs((Tt = (Gt = o.scaleY) != null ? Gt : n.scaleY) != null ? Tt : 1) || 1, C = Math.max(1, p * j), w = Math.max(1, Math.round(C)), T = Math.max(1, c * A), {
|
|
4451
4481
|
paddingTop: E = 0,
|
|
4452
4482
|
paddingRight: P = 0,
|
|
4453
4483
|
paddingBottom: x = 0,
|
|
@@ -4459,7 +4489,7 @@ class W {
|
|
|
4459
4489
|
fontSize: G,
|
|
4460
4490
|
width: Y,
|
|
4461
4491
|
originX: K = "left"
|
|
4462
|
-
} =
|
|
4492
|
+
} = o, et = b || y, J = b || y, H = et ? {
|
|
4463
4493
|
top: Math.max(0, d.top * A),
|
|
4464
4494
|
right: Math.max(0, d.right * A),
|
|
4465
4495
|
bottom: Math.max(0, d.bottom * A),
|
|
@@ -4469,9 +4499,9 @@ class W {
|
|
|
4469
4499
|
topRight: Math.max(0, l.topRight * A),
|
|
4470
4500
|
bottomRight: Math.max(0, l.bottomRight * A),
|
|
4471
4501
|
bottomLeft: Math.max(0, l.bottomLeft * A)
|
|
4472
|
-
} : l,
|
|
4473
|
-
let
|
|
4474
|
-
if (I &&
|
|
4502
|
+
} : l, jt = Object.keys(u).length > 0;
|
|
4503
|
+
let ot;
|
|
4504
|
+
if (I && jt) {
|
|
4475
4505
|
const ie = {};
|
|
4476
4506
|
Object.entries(u).forEach(([as, Oe]) => {
|
|
4477
4507
|
if (!Oe) return;
|
|
@@ -4481,14 +4511,14 @@ class W {
|
|
|
4481
4511
|
const Le = B({}, Vt);
|
|
4482
4512
|
typeof Vt.fontSize == "number" && (Le.fontSize = Math.max(1, Vt.fontSize * A)), ae[rs] = Le;
|
|
4483
4513
|
}), Object.keys(ae).length && (ie[as] = ae);
|
|
4484
|
-
}), Object.keys(ie).length && (
|
|
4514
|
+
}), Object.keys(ie).length && (ot = ie);
|
|
4485
4515
|
}
|
|
4486
|
-
const lt = (Ie = (je =
|
|
4487
|
-
if (!ut && !
|
|
4488
|
-
|
|
4516
|
+
const lt = (Ie = (je = n.originX) != null ? je : K) != null ? Ie : "left", yt = m + p, It = m + p / 2, ht = Y != null ? Y : p, ut = w !== ht, ne = Math.abs(T - (G != null ? G : c)) > nt, Ht = Math.abs(H.top - E) > nt || Math.abs(H.right - P) > nt || Math.abs(H.bottom - x) > nt || Math.abs(H.left - N) > nt, xt = Math.abs(q.topLeft - Z) > nt || Math.abs(q.topRight - D) > nt || Math.abs(q.bottomRight - _) > nt || Math.abs(q.bottomLeft - F) > nt;
|
|
4517
|
+
if (!ut && !ne && !Ht && !xt) {
|
|
4518
|
+
o.set({ scaleX: 1, scaleY: 1 }), n.scaleX = 1, n.scaleY = 1;
|
|
4489
4519
|
return;
|
|
4490
4520
|
}
|
|
4491
|
-
|
|
4521
|
+
ot && (o.styles = ot), o.set({
|
|
4492
4522
|
width: w,
|
|
4493
4523
|
fontSize: I ? T : c,
|
|
4494
4524
|
paddingTop: H.top,
|
|
@@ -4502,13 +4532,13 @@ class W {
|
|
|
4502
4532
|
scaleX: 1,
|
|
4503
4533
|
scaleY: 1
|
|
4504
4534
|
});
|
|
4505
|
-
const Nt = W._roundTextboxDimensions({ textbox:
|
|
4506
|
-
Nt && (
|
|
4507
|
-
const gt = (Ce =
|
|
4535
|
+
const Nt = W._roundTextboxDimensions({ textbox: o });
|
|
4536
|
+
Nt && (o.dirty = !0);
|
|
4537
|
+
const gt = (Ce = o.width) != null ? Ce : w, Bt = gt !== ht;
|
|
4508
4538
|
let ft = m;
|
|
4509
|
-
Bt && (S || b) && (lt === "right" ? ft =
|
|
4510
|
-
const { original: it } =
|
|
4511
|
-
it && (it.scaleX = 1, it.scaleY = 1, it.width = gt, it.height =
|
|
4539
|
+
Bt && (S || b) && (lt === "right" ? ft = yt - gt : lt === "center" && (ft = It - gt / 2)), o.set({ left: ft }), i.baseLeft = ft, n.scaleX = 1, n.scaleY = 1;
|
|
4540
|
+
const { original: it } = n;
|
|
4541
|
+
it && (it.scaleX = 1, it.scaleY = 1, it.width = gt, it.height = o.height, it.left = ft), o.setCoords(), this.canvas.requestRenderAll(), i.baseWidth = gt, i.baseFontSize = (Te = o.fontSize) != null ? Te : T, i.baseStyles = JSON.parse(JSON.stringify((Ee = o.styles) != null ? Ee : {})), i.basePadding = {
|
|
4512
4542
|
top: H.top,
|
|
4513
4543
|
right: H.right,
|
|
4514
4544
|
bottom: H.bottom,
|
|
@@ -4518,14 +4548,14 @@ class W {
|
|
|
4518
4548
|
topRight: q.topRight,
|
|
4519
4549
|
bottomRight: q.bottomRight,
|
|
4520
4550
|
bottomLeft: q.bottomLeft
|
|
4521
|
-
}, i.hasWidthChange = Bt ||
|
|
4551
|
+
}, i.hasWidthChange = Bt || ne || Ht || xt || Nt;
|
|
4522
4552
|
}, this._handleObjectModified = (s) => {
|
|
4523
4553
|
var M, S, y;
|
|
4524
|
-
const { target:
|
|
4525
|
-
if (
|
|
4526
|
-
const b =
|
|
4554
|
+
const { target: o } = s;
|
|
4555
|
+
if (o instanceof U) {
|
|
4556
|
+
const b = o.getObjects();
|
|
4527
4557
|
if (!b.some((w) => W._isTextbox(w))) return;
|
|
4528
|
-
const { scaleX: j = 1, scaleY: A = 1 } =
|
|
4558
|
+
const { scaleX: j = 1, scaleY: A = 1 } = o;
|
|
4529
4559
|
if (Math.abs(j - 1) < nt && Math.abs(A - 1) < nt) return;
|
|
4530
4560
|
this.canvas.discardActiveObject(), b.forEach((w) => {
|
|
4531
4561
|
var T, E, P, x;
|
|
@@ -4534,35 +4564,35 @@ class W {
|
|
|
4534
4564
|
paddingTop: G = 0,
|
|
4535
4565
|
paddingRight: Y = 0,
|
|
4536
4566
|
paddingBottom: K = 0,
|
|
4537
|
-
paddingLeft:
|
|
4567
|
+
paddingLeft: et = 0,
|
|
4538
4568
|
radiusTopLeft: J = 0,
|
|
4539
4569
|
radiusTopRight: H = 0,
|
|
4540
4570
|
radiusBottomRight: q = 0,
|
|
4541
|
-
radiusBottomLeft:
|
|
4542
|
-
styles:
|
|
4571
|
+
radiusBottomLeft: jt = 0,
|
|
4572
|
+
styles: ot
|
|
4543
4573
|
} = w, lt = {
|
|
4544
4574
|
paddingTop: Math.max(0, G * F),
|
|
4545
4575
|
paddingRight: Math.max(0, Y * F),
|
|
4546
4576
|
paddingBottom: Math.max(0, K * F),
|
|
4547
|
-
paddingLeft: Math.max(0,
|
|
4548
|
-
},
|
|
4577
|
+
paddingLeft: Math.max(0, et * F)
|
|
4578
|
+
}, yt = {
|
|
4549
4579
|
radiusTopLeft: Math.max(0, J * F),
|
|
4550
4580
|
radiusTopRight: Math.max(0, H * F),
|
|
4551
4581
|
radiusBottomRight: Math.max(0, q * F),
|
|
4552
|
-
radiusBottomLeft: Math.max(0,
|
|
4582
|
+
radiusBottomLeft: Math.max(0, jt * F)
|
|
4553
4583
|
};
|
|
4554
|
-
let
|
|
4555
|
-
|
|
4584
|
+
let It = ot;
|
|
4585
|
+
ot && Object.keys(ot).length > 0 && (It = JSON.parse(JSON.stringify(ot)), Object.values(It).forEach((ht) => {
|
|
4556
4586
|
Object.values(ht).forEach((ut) => {
|
|
4557
4587
|
typeof ut.fontSize == "number" && (ut.fontSize = Math.max(1, ut.fontSize * F));
|
|
4558
4588
|
});
|
|
4559
|
-
})), w.set(
|
|
4589
|
+
})), w.set(bt(B(B({
|
|
4560
4590
|
fontSize: D,
|
|
4561
4591
|
width: _,
|
|
4562
4592
|
scaleX: 1,
|
|
4563
4593
|
scaleY: 1
|
|
4564
|
-
}, lt),
|
|
4565
|
-
styles:
|
|
4594
|
+
}, lt), yt), {
|
|
4595
|
+
styles: It
|
|
4566
4596
|
})), W._roundTextboxDimensions({ textbox: w });
|
|
4567
4597
|
}
|
|
4568
4598
|
w.setCoords();
|
|
@@ -4573,11 +4603,11 @@ class W {
|
|
|
4573
4603
|
this.canvas.setActiveObject(C), this.canvas.requestRenderAll();
|
|
4574
4604
|
return;
|
|
4575
4605
|
}
|
|
4576
|
-
if (!W._isTextbox(
|
|
4577
|
-
|
|
4578
|
-
const
|
|
4579
|
-
if (this.scalingState.delete(
|
|
4580
|
-
const i = (M =
|
|
4606
|
+
if (!W._isTextbox(o)) return;
|
|
4607
|
+
o.isScaling = !1;
|
|
4608
|
+
const n = this.scalingState.get(o);
|
|
4609
|
+
if (this.scalingState.delete(o), !(n != null && n.hasWidthChange)) return;
|
|
4610
|
+
const i = (M = o.width) != null ? M : o.calcTextWidth(), a = (y = (S = o.fontSize) != null ? S : n == null ? void 0 : n.baseFontSize) != null ? y : 16, r = !!(n.baseStyles && Object.keys(n.baseStyles).length), {
|
|
4581
4611
|
paddingTop: c = 0,
|
|
4582
4612
|
paddingRight: d = 0,
|
|
4583
4613
|
paddingBottom: l = 0,
|
|
@@ -4586,7 +4616,7 @@ class W {
|
|
|
4586
4616
|
radiusTopRight: f = 0,
|
|
4587
4617
|
radiusBottomRight: p = 0,
|
|
4588
4618
|
radiusBottomLeft: m = 0
|
|
4589
|
-
} =
|
|
4619
|
+
} = o, v = {
|
|
4590
4620
|
width: i,
|
|
4591
4621
|
paddingTop: c,
|
|
4592
4622
|
paddingRight: d,
|
|
@@ -4598,10 +4628,10 @@ class W {
|
|
|
4598
4628
|
radiusBottomLeft: m
|
|
4599
4629
|
};
|
|
4600
4630
|
r || (v.fontSize = a), this.updateText({
|
|
4601
|
-
target:
|
|
4631
|
+
target: o,
|
|
4602
4632
|
style: v
|
|
4603
|
-
}),
|
|
4604
|
-
}, 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(),
|
|
4633
|
+
}), o.set({ scaleX: 1, scaleY: 1 }), o.setCoords();
|
|
4634
|
+
}, 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(), io();
|
|
4605
4635
|
}
|
|
4606
4636
|
/**
|
|
4607
4637
|
* Добавляет новый текстовый объект на канвас.
|
|
@@ -4613,8 +4643,8 @@ class W {
|
|
|
4613
4643
|
id: t = `text-${V()}`,
|
|
4614
4644
|
text: e = "Новый текст",
|
|
4615
4645
|
fontFamily: s,
|
|
4616
|
-
fontSize:
|
|
4617
|
-
bold:
|
|
4646
|
+
fontSize: o = 48,
|
|
4647
|
+
bold: n = !1,
|
|
4618
4648
|
italic: i = !1,
|
|
4619
4649
|
underline: a = !1,
|
|
4620
4650
|
uppercase: r = !1,
|
|
@@ -4634,7 +4664,7 @@ class W {
|
|
|
4634
4664
|
radiusTopRight: I = 0,
|
|
4635
4665
|
radiusBottomRight: j = 0,
|
|
4636
4666
|
radiusBottomLeft: A = 0
|
|
4637
|
-
} = x, C =
|
|
4667
|
+
} = x, C = Mt(x, [
|
|
4638
4668
|
"id",
|
|
4639
4669
|
"text",
|
|
4640
4670
|
"fontFamily",
|
|
@@ -4660,7 +4690,7 @@ class W {
|
|
|
4660
4690
|
"radiusBottomRight",
|
|
4661
4691
|
"radiusBottomLeft"
|
|
4662
4692
|
]);
|
|
4663
|
-
var
|
|
4693
|
+
var et;
|
|
4664
4694
|
const { historyManager: N } = this.editor, { canvas: Z } = this;
|
|
4665
4695
|
N.suspendHistory();
|
|
4666
4696
|
const D = s != null ? s : this._getDefaultFontFamily(), _ = Xe({ width: g }), F = Ve({
|
|
@@ -4669,8 +4699,8 @@ class W {
|
|
|
4669
4699
|
}), G = B({
|
|
4670
4700
|
id: t,
|
|
4671
4701
|
fontFamily: D,
|
|
4672
|
-
fontSize:
|
|
4673
|
-
fontWeight:
|
|
4702
|
+
fontSize: o,
|
|
4703
|
+
fontWeight: n ? "bold" : "normal",
|
|
4674
4704
|
fontStyle: i ? "italic" : "normal",
|
|
4675
4705
|
underline: a,
|
|
4676
4706
|
uppercase: r,
|
|
@@ -4691,16 +4721,16 @@ class W {
|
|
|
4691
4721
|
radiusTopRight: I,
|
|
4692
4722
|
radiusBottomRight: j,
|
|
4693
4723
|
radiusBottomLeft: A
|
|
4694
|
-
}, C), Y = new
|
|
4695
|
-
if (Y.textCaseRaw = (
|
|
4724
|
+
}, C), Y = new oe(e, G);
|
|
4725
|
+
if (Y.textCaseRaw = (et = Y.text) != null ? et : "", r) {
|
|
4696
4726
|
const J = ce({ value: Y.textCaseRaw });
|
|
4697
4727
|
J !== Y.text && Y.set({ text: J });
|
|
4698
4728
|
}
|
|
4699
4729
|
return W._roundTextboxDimensions({ textbox: Y }) && (Y.dirty = !0), C.left === void 0 && C.top === void 0 && Z.centerObject(Y), E || Z.add(Y), w || Z.setActiveObject(Y), Z.requestRenderAll(), N.resumeHistory(), T || N.saveState(), Z.fire("editor:text-added", {
|
|
4700
4730
|
textbox: Y,
|
|
4701
|
-
options:
|
|
4731
|
+
options: bt(B({}, G), {
|
|
4702
4732
|
text: e,
|
|
4703
|
-
bold:
|
|
4733
|
+
bold: n,
|
|
4704
4734
|
italic: i,
|
|
4705
4735
|
strikethrough: c,
|
|
4706
4736
|
align: d,
|
|
@@ -4723,13 +4753,13 @@ class W {
|
|
|
4723
4753
|
* @param options.withoutSave — не сохранять состояние в историю
|
|
4724
4754
|
* @param options.skipRender — не вызывать перерисовку канваса
|
|
4725
4755
|
*/
|
|
4726
|
-
updateText({ target: t, style: e = {}, withoutSave: s, skipRender:
|
|
4756
|
+
updateText({ target: t, style: e = {}, withoutSave: s, skipRender: o } = {}) {
|
|
4727
4757
|
var Nt, gt, Bt, ft, it, kt, zt;
|
|
4728
|
-
const
|
|
4729
|
-
if (!
|
|
4758
|
+
const n = this._resolveTextObject(t);
|
|
4759
|
+
if (!n) return null;
|
|
4730
4760
|
const { historyManager: i } = this.editor, { canvas: a } = this;
|
|
4731
4761
|
i.suspendHistory();
|
|
4732
|
-
const r = W._getSnapshot(
|
|
4762
|
+
const r = W._getSnapshot(n), xt = e, {
|
|
4733
4763
|
text: c,
|
|
4734
4764
|
fontFamily: d,
|
|
4735
4765
|
fontSize: l,
|
|
@@ -4753,7 +4783,7 @@ class W {
|
|
|
4753
4783
|
radiusTopRight: P,
|
|
4754
4784
|
radiusBottomRight: x,
|
|
4755
4785
|
radiusBottomLeft: N
|
|
4756
|
-
} = xt, Z =
|
|
4786
|
+
} = xt, Z = Mt(xt, [
|
|
4757
4787
|
"text",
|
|
4758
4788
|
"fontFamily",
|
|
4759
4789
|
"fontSize",
|
|
@@ -4777,7 +4807,7 @@ class W {
|
|
|
4777
4807
|
"radiusTopRight",
|
|
4778
4808
|
"radiusBottomRight",
|
|
4779
4809
|
"radiusBottomLeft"
|
|
4780
|
-
]), D = B({}, Z), _ =
|
|
4810
|
+
]), D = B({}, Z), _ = ao({ textbox: n }), F = _ ? W._expandRangeToFullLines({ textbox: n, range: _ }) : null, G = {}, Y = {}, K = {}, et = co({ textbox: n, range: _ }), J = !_ || et, H = !_;
|
|
4781
4811
|
if (d !== void 0 && (F && (Y.fontFamily = d), J && (D.fontFamily = d, H && (K.fontFamily = d))), l !== void 0 && (F && (Y.fontSize = l), J && (D.fontSize = l, H && (K.fontSize = l))), u !== void 0) {
|
|
4782
4812
|
const X = u ? "bold" : "normal";
|
|
4783
4813
|
_ && (G.fontWeight = X), J && (D.fontWeight = X, H && (K.fontWeight = X));
|
|
@@ -4787,45 +4817,45 @@ class W {
|
|
|
4787
4817
|
_ && (G.fontStyle = X), J && (D.fontStyle = X, H && (K.fontStyle = X));
|
|
4788
4818
|
}
|
|
4789
4819
|
if (f !== void 0 && (_ && (G.underline = f), J && (D.underline = f, H && (K.underline = f))), m !== void 0 && (_ && (G.linethrough = m), J && (D.linethrough = m, H && (K.linethrough = m))), v !== void 0 && (D.textAlign = v), M !== void 0 && (_ && (G.fill = M), J && (D.fill = M, H && (K.fill = M))), S !== void 0 || y !== void 0) {
|
|
4790
|
-
const X = _ ? Ge({ textbox:
|
|
4820
|
+
const X = _ ? Ge({ textbox: n, range: _, property: "strokeWidth" }) : void 0, Ct = _ ? Ge({ textbox: n, range: _, property: "stroke" }) : void 0, Zt = (gt = (Nt = y != null ? y : X) != null ? Nt : n.strokeWidth) != null ? gt : 0, vt = Xe({ width: Zt }), Gt = (ft = (Bt = S != null ? S : Ct) != null ? Bt : n.stroke) != null ? ft : void 0, Tt = Ve({
|
|
4791
4821
|
strokeColor: Gt,
|
|
4792
|
-
width:
|
|
4822
|
+
width: vt
|
|
4793
4823
|
});
|
|
4794
|
-
_ && (G.stroke =
|
|
4824
|
+
_ && (G.stroke = Tt, G.strokeWidth = vt), J && (D.stroke = Tt, D.strokeWidth = vt, H && (K.stroke = Tt, K.strokeWidth = vt));
|
|
4795
4825
|
}
|
|
4796
4826
|
b !== void 0 && (D.opacity = b), I !== void 0 && (D.backgroundColor = I), j !== void 0 && (D.backgroundOpacity = j), A !== void 0 && (D.paddingTop = A), C !== void 0 && (D.paddingRight = C), w !== void 0 && (D.paddingBottom = w), T !== void 0 && (D.paddingLeft = T), E !== void 0 && (D.radiusTopLeft = E), P !== void 0 && (D.radiusTopRight = P), x !== void 0 && (D.radiusBottomRight = x), N !== void 0 && (D.radiusBottomLeft = N);
|
|
4797
|
-
const q = (kt =
|
|
4798
|
-
if (
|
|
4799
|
-
const X =
|
|
4800
|
-
D.text = X,
|
|
4801
|
-
} else
|
|
4802
|
-
|
|
4827
|
+
const q = (kt = n.textCaseRaw) != null ? kt : (it = n.text) != null ? it : "", jt = !!n.uppercase, ot = c !== void 0, lt = ot ? c != null ? c : "" : q, yt = p != null ? p : jt;
|
|
4828
|
+
if (ot || yt !== jt) {
|
|
4829
|
+
const X = yt ? ce({ value: lt }) : lt;
|
|
4830
|
+
D.text = X, n.textCaseRaw = lt;
|
|
4831
|
+
} else n.textCaseRaw === void 0 && (n.textCaseRaw = q);
|
|
4832
|
+
n.uppercase = yt, n.set(D);
|
|
4803
4833
|
let ht = !1;
|
|
4804
4834
|
if (_) {
|
|
4805
|
-
const X = re({ textbox:
|
|
4806
|
-
ht = X ||
|
|
4835
|
+
const X = re({ textbox: n, styles: G, range: _ }), Ct = F ? re({ textbox: n, styles: Y, range: F }) : !1;
|
|
4836
|
+
ht = X || Ct;
|
|
4807
4837
|
} else if (Object.keys(K).length) {
|
|
4808
|
-
const X =
|
|
4809
|
-
X && (ht = re({ textbox:
|
|
4838
|
+
const X = ro({ textbox: n });
|
|
4839
|
+
X && (ht = re({ textbox: n, styles: K, range: X }));
|
|
4810
4840
|
}
|
|
4811
|
-
ht && (
|
|
4812
|
-
const ut =
|
|
4813
|
-
ut > ((zt =
|
|
4814
|
-
const Ht = W._getSnapshot(
|
|
4841
|
+
ht && (n.dirty = !0), (I !== void 0 || j !== void 0 || A !== void 0 || C !== void 0 || w !== void 0 || T !== void 0 || E !== void 0 || P !== void 0 || x !== void 0 || N !== void 0) && (n.dirty = !0);
|
|
4842
|
+
const ut = n.calcTextWidth();
|
|
4843
|
+
ut > ((zt = n.width) != null ? zt : 0) && (n.set({ width: ut }), n.dirty = !0), W._roundTextboxDimensions({ textbox: n }) && (n.dirty = !0), n.setCoords(), o || a.requestRenderAll(), i.resumeHistory(), s || i.saveState();
|
|
4844
|
+
const Ht = W._getSnapshot(n);
|
|
4815
4845
|
return a.fire("editor:text-updated", {
|
|
4816
|
-
textbox:
|
|
4846
|
+
textbox: n,
|
|
4817
4847
|
target: t,
|
|
4818
4848
|
style: e,
|
|
4819
4849
|
options: {
|
|
4820
4850
|
withoutSave: !!s,
|
|
4821
|
-
skipRender: !!
|
|
4851
|
+
skipRender: !!o
|
|
4822
4852
|
},
|
|
4823
4853
|
updates: D,
|
|
4824
4854
|
before: r,
|
|
4825
4855
|
after: Ht,
|
|
4826
4856
|
selectionRange: _ != null ? _ : void 0,
|
|
4827
4857
|
selectionStyles: _ && Object.keys(G).length ? G : void 0
|
|
4828
|
-
}),
|
|
4858
|
+
}), n;
|
|
4829
4859
|
}
|
|
4830
4860
|
/**
|
|
4831
4861
|
* Уничтожает менеджер и снимает слушатели.
|
|
@@ -4838,14 +4868,14 @@ class W {
|
|
|
4838
4868
|
* Возвращает активный текст или ищет по id.
|
|
4839
4869
|
*/
|
|
4840
4870
|
_resolveTextObject(t) {
|
|
4841
|
-
if (t instanceof
|
|
4871
|
+
if (t instanceof st) return t;
|
|
4842
4872
|
const { canvas: e } = this;
|
|
4843
4873
|
if (!t) {
|
|
4844
4874
|
const s = e.getActiveObject();
|
|
4845
4875
|
return W._isTextbox(s) ? s : null;
|
|
4846
4876
|
}
|
|
4847
4877
|
if (typeof t == "string") {
|
|
4848
|
-
const s = e.getObjects().find((
|
|
4878
|
+
const s = e.getObjects().find((o) => W._isTextbox(o) && o.id === t);
|
|
4849
4879
|
return s != null ? s : null;
|
|
4850
4880
|
}
|
|
4851
4881
|
return null;
|
|
@@ -4854,7 +4884,7 @@ class W {
|
|
|
4854
4884
|
* Проверяет, является ли объект текстовым блоком редактора.
|
|
4855
4885
|
*/
|
|
4856
4886
|
static _isTextbox(t) {
|
|
4857
|
-
return !!t && t instanceof
|
|
4887
|
+
return !!t && t instanceof st;
|
|
4858
4888
|
}
|
|
4859
4889
|
/**
|
|
4860
4890
|
* Вешает обработчики событий Fabric для работы с текстом.
|
|
@@ -4869,8 +4899,8 @@ class W {
|
|
|
4869
4899
|
static _handleTextChanged(t) {
|
|
4870
4900
|
const { target: e } = t;
|
|
4871
4901
|
if (!W._isTextbox(e)) return;
|
|
4872
|
-
const { text: s = "", uppercase:
|
|
4873
|
-
if (
|
|
4902
|
+
const { text: s = "", uppercase: o } = e, n = !!o, i = s.toLocaleLowerCase();
|
|
4903
|
+
if (n) {
|
|
4874
4904
|
const r = ce({ value: i });
|
|
4875
4905
|
r !== s && e.set({ text: r }), e.textCaseRaw = i;
|
|
4876
4906
|
} else
|
|
@@ -4888,9 +4918,9 @@ class W {
|
|
|
4888
4918
|
const { target: e, transform: s } = t;
|
|
4889
4919
|
if (!W._isTextbox(e)) return;
|
|
4890
4920
|
const {
|
|
4891
|
-
paddingLeft:
|
|
4892
|
-
paddingRight:
|
|
4893
|
-
} = e, i =
|
|
4921
|
+
paddingLeft: o = 0,
|
|
4922
|
+
paddingRight: n = 0
|
|
4923
|
+
} = e, i = o + n;
|
|
4894
4924
|
if (i === 0) return;
|
|
4895
4925
|
const a = (l = e.width) != null ? l : 0, r = Math.max(0, a - i);
|
|
4896
4926
|
if (a === r) return;
|
|
@@ -4908,15 +4938,15 @@ class W {
|
|
|
4908
4938
|
* Возвращает диапазоны символов для каждой строки текста без учёта символов переноса.
|
|
4909
4939
|
*/
|
|
4910
4940
|
static _getLineRanges({ textbox: t }) {
|
|
4911
|
-
var
|
|
4912
|
-
const e = (
|
|
4941
|
+
var n;
|
|
4942
|
+
const e = (n = t.text) != null ? n : "";
|
|
4913
4943
|
if (!e.length) return [];
|
|
4914
4944
|
const s = e.split(`
|
|
4915
4945
|
`);
|
|
4916
|
-
let
|
|
4946
|
+
let o = 0;
|
|
4917
4947
|
return s.map((i) => {
|
|
4918
|
-
const a =
|
|
4919
|
-
return
|
|
4948
|
+
const a = o, r = o + i.length;
|
|
4949
|
+
return o = r + 1, { start: a, end: r };
|
|
4920
4950
|
});
|
|
4921
4951
|
}
|
|
4922
4952
|
/**
|
|
@@ -4928,19 +4958,19 @@ class W {
|
|
|
4928
4958
|
}) {
|
|
4929
4959
|
const s = W._getLineRanges({ textbox: t });
|
|
4930
4960
|
if (!s.length) return e;
|
|
4931
|
-
let { start:
|
|
4961
|
+
let { start: o } = e, { end: n } = e;
|
|
4932
4962
|
return s.forEach(({ start: i, end: a }) => {
|
|
4933
|
-
e.end > i && e.start < a && (
|
|
4934
|
-
}), { start:
|
|
4963
|
+
e.end > i && e.start < a && (o = Math.min(o, i), n = Math.max(n, a));
|
|
4964
|
+
}), { start: o, end: n };
|
|
4935
4965
|
}
|
|
4936
4966
|
/**
|
|
4937
4967
|
* Создаёт или возвращает сохранённое состояние для текущего цикла масштабирования текста.
|
|
4938
4968
|
*/
|
|
4939
4969
|
_ensureScalingState(t) {
|
|
4940
|
-
var s,
|
|
4970
|
+
var s, o, n;
|
|
4941
4971
|
let e = this.scalingState.get(t);
|
|
4942
4972
|
if (!e) {
|
|
4943
|
-
const i = (s = t.width) != null ? s : t.calcTextWidth(), a = (
|
|
4973
|
+
const i = (s = t.width) != null ? s : t.calcTextWidth(), a = (o = t.left) != null ? o : 0, r = (n = t.fontSize) != null ? n : 16, { styles: c = {} } = t, {
|
|
4944
4974
|
paddingTop: d = 0,
|
|
4945
4975
|
paddingRight: l = 0,
|
|
4946
4976
|
paddingBottom: u = 0,
|
|
@@ -4988,7 +5018,7 @@ class W {
|
|
|
4988
5018
|
static _roundTextboxDimensions({
|
|
4989
5019
|
textbox: t
|
|
4990
5020
|
}) {
|
|
4991
|
-
const { width: e, height: s, calcTextWidth:
|
|
5021
|
+
const { width: e, height: s, calcTextWidth: o, calcTextHeight: n } = t, i = typeof o == "function" ? o.call(t) : void 0, a = typeof n == "function" ? n.call(t) : void 0, r = W._resolveDimension({
|
|
4992
5022
|
rawValue: e,
|
|
4993
5023
|
calculatedValue: i
|
|
4994
5024
|
}), c = W._resolveDimension({
|
|
@@ -5005,13 +5035,13 @@ class W {
|
|
|
5005
5035
|
snapshot: G,
|
|
5006
5036
|
entries: Y
|
|
5007
5037
|
}) => {
|
|
5008
|
-
Object.entries(Y).forEach(([K,
|
|
5009
|
-
|
|
5038
|
+
Object.entries(Y).forEach(([K, et]) => {
|
|
5039
|
+
et != null && (G[K] = et);
|
|
5010
5040
|
});
|
|
5011
5041
|
}, {
|
|
5012
5042
|
id: s,
|
|
5013
|
-
text:
|
|
5014
|
-
textCaseRaw:
|
|
5043
|
+
text: o,
|
|
5044
|
+
textCaseRaw: n,
|
|
5015
5045
|
uppercase: i,
|
|
5016
5046
|
fontFamily: a,
|
|
5017
5047
|
fontSize: r,
|
|
@@ -5049,8 +5079,8 @@ class W {
|
|
|
5049
5079
|
return e({
|
|
5050
5080
|
snapshot: F,
|
|
5051
5081
|
entries: {
|
|
5052
|
-
text:
|
|
5053
|
-
textCaseRaw:
|
|
5082
|
+
text: o,
|
|
5083
|
+
textCaseRaw: n,
|
|
5054
5084
|
fontFamily: a,
|
|
5055
5085
|
fontSize: r,
|
|
5056
5086
|
fontWeight: c,
|
|
@@ -5099,23 +5129,23 @@ const Q = ({
|
|
|
5099
5129
|
}) => {
|
|
5100
5130
|
const s = Q({ value: h });
|
|
5101
5131
|
return e ? s : s / (t || 1);
|
|
5102
|
-
},
|
|
5132
|
+
}, lo = ({
|
|
5103
5133
|
object: h,
|
|
5104
5134
|
baseWidth: t,
|
|
5105
5135
|
baseHeight: e,
|
|
5106
5136
|
useRelativePositions: s,
|
|
5107
|
-
centerKeys:
|
|
5137
|
+
centerKeys: o
|
|
5108
5138
|
}) => {
|
|
5109
|
-
const
|
|
5110
|
-
if (typeof o
|
|
5139
|
+
const n = h;
|
|
5140
|
+
if (typeof n[o.x] == "number" && typeof n[o.y] == "number")
|
|
5111
5141
|
return {
|
|
5112
5142
|
x: qt({
|
|
5113
|
-
value: o
|
|
5143
|
+
value: n[o.x],
|
|
5114
5144
|
dimension: t,
|
|
5115
5145
|
useRelativePositions: s
|
|
5116
5146
|
}),
|
|
5117
5147
|
y: qt({
|
|
5118
|
-
value: o
|
|
5148
|
+
value: n[o.y],
|
|
5119
5149
|
dimension: e,
|
|
5120
5150
|
useRelativePositions: s
|
|
5121
5151
|
})
|
|
@@ -5133,28 +5163,28 @@ const Q = ({
|
|
|
5133
5163
|
x: l + g / 2,
|
|
5134
5164
|
y: u + f / 2
|
|
5135
5165
|
};
|
|
5136
|
-
},
|
|
5166
|
+
}, ho = ({
|
|
5137
5167
|
normalizedX: h,
|
|
5138
5168
|
normalizedY: t,
|
|
5139
5169
|
bounds: e,
|
|
5140
5170
|
targetSize: s,
|
|
5141
|
-
montageArea:
|
|
5171
|
+
montageArea: o
|
|
5142
5172
|
}) => {
|
|
5143
|
-
const { left:
|
|
5144
|
-
if (!
|
|
5145
|
-
const { width: l, height: u } = s, g =
|
|
5146
|
-
return new
|
|
5147
|
-
}
|
|
5148
|
-
const c =
|
|
5149
|
-
return new
|
|
5150
|
-
},
|
|
5173
|
+
const { left: n, top: i, width: a, height: r } = e;
|
|
5174
|
+
if (!o) {
|
|
5175
|
+
const { width: l, height: u } = s, g = n + h * (l || a), f = i + t * (u || r);
|
|
5176
|
+
return new tt(g, f);
|
|
5177
|
+
}
|
|
5178
|
+
const c = n + h * a, d = i + t * r;
|
|
5179
|
+
return new tt(c, d);
|
|
5180
|
+
}, uo = ({
|
|
5151
5181
|
object: h,
|
|
5152
5182
|
montageArea: t,
|
|
5153
5183
|
bounds: e
|
|
5154
5184
|
}) => {
|
|
5155
5185
|
if (!t || !e) return null;
|
|
5156
5186
|
try {
|
|
5157
|
-
const s = h.getCenterPoint(), { left:
|
|
5187
|
+
const s = h.getCenterPoint(), { left: o, top: n, width: i, height: a } = e, r = s.x - o, c = s.y - n, d = r / i, l = c / a;
|
|
5158
5188
|
return {
|
|
5159
5189
|
x: d,
|
|
5160
5190
|
y: l
|
|
@@ -5162,7 +5192,7 @@ const Q = ({
|
|
|
5162
5192
|
} catch (s) {
|
|
5163
5193
|
return null;
|
|
5164
5194
|
}
|
|
5165
|
-
},
|
|
5195
|
+
}, mt = ({
|
|
5166
5196
|
object: h
|
|
5167
5197
|
}) => {
|
|
5168
5198
|
if (!h) return null;
|
|
@@ -5171,9 +5201,9 @@ const Q = ({
|
|
|
5171
5201
|
const t = h.getBoundingRect(!1, !0), {
|
|
5172
5202
|
left: e = 0,
|
|
5173
5203
|
top: s = 0,
|
|
5174
|
-
width:
|
|
5175
|
-
height:
|
|
5176
|
-
} = t, i = e +
|
|
5204
|
+
width: o = 0,
|
|
5205
|
+
height: n = 0
|
|
5206
|
+
} = t, i = e + o, a = s + n, r = e + o / 2, c = s + n / 2;
|
|
5177
5207
|
return {
|
|
5178
5208
|
left: e,
|
|
5179
5209
|
right: i,
|
|
@@ -5185,14 +5215,14 @@ const Q = ({
|
|
|
5185
5215
|
} catch (t) {
|
|
5186
5216
|
return null;
|
|
5187
5217
|
}
|
|
5188
|
-
},
|
|
5218
|
+
}, go = ({
|
|
5189
5219
|
x1: h,
|
|
5190
5220
|
y1: t,
|
|
5191
5221
|
x2: e,
|
|
5192
5222
|
y2: s
|
|
5193
|
-
}) => (Math.atan2(s - t, e - h) * 180 / Math.PI + 360) % 360,
|
|
5223
|
+
}) => (Math.atan2(s - t, e - h) * 180 / Math.PI + 360) % 360, fo = (h) => {
|
|
5194
5224
|
if (!h || typeof h != "object") return null;
|
|
5195
|
-
const { type: t, coords: e, colorStops: s } = h,
|
|
5225
|
+
const { type: t, coords: e, colorStops: s } = h, o = Array.isArray(s) ? s : [], n = o[0], i = o[o.length - 1], a = typeof (n == null ? void 0 : n.color) == "string" ? n.color : void 0, r = typeof (i == null ? void 0 : i.color) == "string" ? i.color : a, c = typeof (n == null ? void 0 : n.offset) == "number" ? n.offset * 100 : void 0, d = typeof (i == null ? void 0 : i.offset) == "number" ? i.offset * 100 : void 0, l = o.map((u) => ({
|
|
5196
5226
|
color: typeof u.color == "string" ? u.color : "#000000",
|
|
5197
5227
|
offset: typeof u.offset == "number" ? u.offset * 100 : 0
|
|
5198
5228
|
}));
|
|
@@ -5202,7 +5232,7 @@ const Q = ({
|
|
|
5202
5232
|
if (typeof u == "number" && typeof g == "number" && typeof f == "number" && typeof p == "number")
|
|
5203
5233
|
return {
|
|
5204
5234
|
type: "linear",
|
|
5205
|
-
angle:
|
|
5235
|
+
angle: go({ x1: u, y1: g, x2: f, y2: p }),
|
|
5206
5236
|
startColor: a,
|
|
5207
5237
|
endColor: r,
|
|
5208
5238
|
startPosition: c,
|
|
@@ -5239,19 +5269,19 @@ class R {
|
|
|
5239
5269
|
templateId: t,
|
|
5240
5270
|
previewId: e,
|
|
5241
5271
|
meta: s = {},
|
|
5242
|
-
withBackground:
|
|
5272
|
+
withBackground: o = !1
|
|
5243
5273
|
} = {}) {
|
|
5244
5274
|
const {
|
|
5245
|
-
canvas:
|
|
5275
|
+
canvas: n,
|
|
5246
5276
|
montageArea: i,
|
|
5247
5277
|
errorManager: a,
|
|
5248
5278
|
backgroundManager: r
|
|
5249
|
-
} = this.editor, c =
|
|
5279
|
+
} = this.editor, c = n.getActiveObject(), d = R._collectObjects(c), { backgroundObject: l } = r != null ? r : {}, u = o && l ? [l] : [], g = [...d, ...u];
|
|
5250
5280
|
if (!g.length)
|
|
5251
5281
|
return a.emitWarning({
|
|
5252
5282
|
origin: "TemplateManager",
|
|
5253
5283
|
method: "serializeSelection",
|
|
5254
|
-
code:
|
|
5284
|
+
code: wt.TEMPLATE_MANAGER.NO_OBJECTS_SELECTED,
|
|
5255
5285
|
message: "Нет объектов для сериализации шаблона"
|
|
5256
5286
|
}), null;
|
|
5257
5287
|
const f = R._getBounds(i), p = R._getMontageSize({ montageArea: i, bounds: f }), m = p.width, v = p.height, M = g.map((b) => R._serializeObject({
|
|
@@ -5260,7 +5290,7 @@ class R {
|
|
|
5260
5290
|
baseWidth: m,
|
|
5261
5291
|
baseHeight: v,
|
|
5262
5292
|
montageArea: i != null ? i : null
|
|
5263
|
-
})), S =
|
|
5293
|
+
})), S = bt(B({}, s), {
|
|
5264
5294
|
baseWidth: m,
|
|
5265
5295
|
baseHeight: v,
|
|
5266
5296
|
positionsNormalized: !0,
|
|
@@ -5284,8 +5314,8 @@ class R {
|
|
|
5284
5314
|
data: e
|
|
5285
5315
|
}) {
|
|
5286
5316
|
const {
|
|
5287
|
-
canvas:
|
|
5288
|
-
montageArea:
|
|
5317
|
+
canvas: o,
|
|
5318
|
+
montageArea: n,
|
|
5289
5319
|
historyManager: i,
|
|
5290
5320
|
errorManager: a,
|
|
5291
5321
|
backgroundManager: r
|
|
@@ -5294,18 +5324,18 @@ class R {
|
|
|
5294
5324
|
return a.emitWarning({
|
|
5295
5325
|
origin: "TemplateManager",
|
|
5296
5326
|
method: "applyTemplate",
|
|
5297
|
-
code:
|
|
5327
|
+
code: wt.TEMPLATE_MANAGER.INVALID_TEMPLATE,
|
|
5298
5328
|
message: "Шаблон не содержит объектов"
|
|
5299
5329
|
}), null;
|
|
5300
|
-
const u = R._getBounds(
|
|
5330
|
+
const u = R._getBounds(n);
|
|
5301
5331
|
if (!u)
|
|
5302
5332
|
return a.emitWarning({
|
|
5303
5333
|
origin: "TemplateManager",
|
|
5304
5334
|
method: "applyTemplate",
|
|
5305
|
-
code:
|
|
5335
|
+
code: wt.TEMPLATE_MANAGER.INVALID_TARGET,
|
|
5306
5336
|
message: "Не удалось определить границы монтажной области"
|
|
5307
5337
|
}), null;
|
|
5308
|
-
const g = R._getMontageSize({ montageArea:
|
|
5338
|
+
const g = R._getMontageSize({ montageArea: n, bounds: u }), f = R._normalizeMeta({ meta: d, fallback: g }), p = R._calculateScale({ meta: f, target: g }), m = !!f.positionsNormalized;
|
|
5309
5339
|
let v = !1, M = !1;
|
|
5310
5340
|
i.suspendHistory();
|
|
5311
5341
|
try {
|
|
@@ -5314,7 +5344,7 @@ class R {
|
|
|
5314
5344
|
return a.emitWarning({
|
|
5315
5345
|
origin: "TemplateManager",
|
|
5316
5346
|
method: "applyTemplate",
|
|
5317
|
-
code:
|
|
5347
|
+
code: wt.TEMPLATE_MANAGER.INVALID_TEMPLATE,
|
|
5318
5348
|
message: "Не удалось создать объекты шаблона"
|
|
5319
5349
|
}), null;
|
|
5320
5350
|
const { backgroundObject: y, contentObjects: b } = R._extractBackgroundObject(S);
|
|
@@ -5333,13 +5363,13 @@ class R {
|
|
|
5333
5363
|
targetSize: g,
|
|
5334
5364
|
baseWidth: f.baseWidth,
|
|
5335
5365
|
baseHeight: f.baseHeight,
|
|
5336
|
-
montageArea:
|
|
5366
|
+
montageArea: n,
|
|
5337
5367
|
useRelativePositions: m
|
|
5338
5368
|
}), j.set({
|
|
5339
5369
|
id: `${j.type}-${V()}`,
|
|
5340
5370
|
evented: !0
|
|
5341
|
-
}),
|
|
5342
|
-
return !I.length && !M ? null : (v = I.length > 0 || M, I.length && R._activateObjects({ canvas:
|
|
5371
|
+
}), o.add(j), j));
|
|
5372
|
+
return !I.length && !M ? null : (v = I.length > 0 || M, I.length && R._activateObjects({ canvas: o, objects: I }), o.requestRenderAll(), o.fire("editor:template-applied", {
|
|
5343
5373
|
template: t,
|
|
5344
5374
|
objects: I,
|
|
5345
5375
|
bounds: u
|
|
@@ -5348,7 +5378,7 @@ class R {
|
|
|
5348
5378
|
return a.emitError({
|
|
5349
5379
|
origin: "TemplateManager",
|
|
5350
5380
|
method: "applyTemplate",
|
|
5351
|
-
code:
|
|
5381
|
+
code: wt.TEMPLATE_MANAGER.APPLY_FAILED,
|
|
5352
5382
|
message: "Ошибка применения шаблона",
|
|
5353
5383
|
data: {
|
|
5354
5384
|
templateId: l,
|
|
@@ -5395,8 +5425,8 @@ class R {
|
|
|
5395
5425
|
if (i)
|
|
5396
5426
|
return R._restoreImageScale({ revived: i, serialized: s }), i;
|
|
5397
5427
|
}
|
|
5398
|
-
const
|
|
5399
|
-
return
|
|
5428
|
+
const o = yield dt.enlivenObjects([s]), n = o == null ? void 0 : o[0];
|
|
5429
|
+
return n ? (R._restoreImageScale({ revived: n, serialized: s }), n) : null;
|
|
5400
5430
|
})))).filter((s) => !!s);
|
|
5401
5431
|
});
|
|
5402
5432
|
}
|
|
@@ -5409,8 +5439,8 @@ class R {
|
|
|
5409
5439
|
}) {
|
|
5410
5440
|
if ((typeof t.type == "string" ? t.type.toLowerCase() : "") !== "image") return;
|
|
5411
5441
|
const {
|
|
5412
|
-
width:
|
|
5413
|
-
height:
|
|
5442
|
+
width: o,
|
|
5443
|
+
height: n,
|
|
5414
5444
|
scaleX: i,
|
|
5415
5445
|
scaleY: a,
|
|
5416
5446
|
customData: r
|
|
@@ -5424,7 +5454,7 @@ class R {
|
|
|
5424
5454
|
naturalHeight: 0,
|
|
5425
5455
|
width: 0,
|
|
5426
5456
|
height: 0
|
|
5427
|
-
}, p = Q({ value: l || g || c.width, fallback: 0 }), m = Q({ value: u || f || c.height, fallback: 0 }), v = Q({ value:
|
|
5457
|
+
}, p = Q({ value: l || g || c.width, fallback: 0 }), m = Q({ value: u || f || c.height, fallback: 0 }), v = Q({ value: o, fallback: p }), M = Q({ value: n, fallback: m }), S = Q({ value: i, fallback: c.scaleX || 1 }), y = Q({ value: a, fallback: c.scaleY || 1 }), b = v * S, I = M * y, j = p > 0, A = m > 0, C = b > 0, w = I > 0, T = R._resolveImageFit({ customData: r }), E = {};
|
|
5428
5458
|
if (j && (E.width = p), A && (E.height = m), !j || !A) {
|
|
5429
5459
|
c.set(E);
|
|
5430
5460
|
return;
|
|
@@ -5465,10 +5495,10 @@ class R {
|
|
|
5465
5495
|
const e = typeof t.svgMarkup == "string" ? t.svgMarkup : null;
|
|
5466
5496
|
if (!e) return null;
|
|
5467
5497
|
try {
|
|
5468
|
-
const s = yield ms(e),
|
|
5498
|
+
const s = yield ms(e), o = dt.groupSVGElements(s.objects, s.options), n = yield dt.enlivenObjectEnlivables(
|
|
5469
5499
|
R._prepareSerializableProps(t)
|
|
5470
5500
|
);
|
|
5471
|
-
return
|
|
5501
|
+
return o.set(n), o.setCoords(), o;
|
|
5472
5502
|
} catch (s) {
|
|
5473
5503
|
return null;
|
|
5474
5504
|
}
|
|
@@ -5497,7 +5527,7 @@ class R {
|
|
|
5497
5527
|
const s = e.call(t);
|
|
5498
5528
|
if (!s) return null;
|
|
5499
5529
|
if (/<svg[\s>]/i.test(s)) return s;
|
|
5500
|
-
const { width:
|
|
5530
|
+
const { width: n, height: i } = t.getBoundingRect(!1, !0), a = n || t.width || 0, r = i || t.height || 0;
|
|
5501
5531
|
return `
|
|
5502
5532
|
<svg
|
|
5503
5533
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -5518,15 +5548,15 @@ class R {
|
|
|
5518
5548
|
object: t,
|
|
5519
5549
|
scale: e,
|
|
5520
5550
|
bounds: s,
|
|
5521
|
-
targetSize:
|
|
5522
|
-
baseWidth:
|
|
5551
|
+
targetSize: o,
|
|
5552
|
+
baseWidth: n,
|
|
5523
5553
|
baseHeight: i,
|
|
5524
5554
|
montageArea: a,
|
|
5525
5555
|
useRelativePositions: r
|
|
5526
5556
|
}) {
|
|
5527
|
-
const c = t, { x: d, y: l } =
|
|
5557
|
+
const c = t, { x: d, y: l } = lo({
|
|
5528
5558
|
object: t,
|
|
5529
|
-
baseWidth:
|
|
5559
|
+
baseWidth: n,
|
|
5530
5560
|
baseHeight: i,
|
|
5531
5561
|
useRelativePositions: r,
|
|
5532
5562
|
centerKeys: {
|
|
@@ -5535,17 +5565,17 @@ class R {
|
|
|
5535
5565
|
}
|
|
5536
5566
|
}), { scaleX: u, scaleY: g } = t, f = Q({ value: u, fallback: 1 }), p = Q({ value: g, fallback: 1 }), m = R._getPositioningBounds({
|
|
5537
5567
|
bounds: s,
|
|
5538
|
-
baseWidth:
|
|
5568
|
+
baseWidth: n,
|
|
5539
5569
|
baseHeight: i,
|
|
5540
5570
|
scale: e,
|
|
5541
5571
|
useRelativePositions: r,
|
|
5542
5572
|
anchorX: R._resolveAnchor(c, Jt),
|
|
5543
5573
|
anchorY: R._resolveAnchor(c, le)
|
|
5544
|
-
}), v =
|
|
5574
|
+
}), v = ho({
|
|
5545
5575
|
normalizedX: d,
|
|
5546
5576
|
normalizedY: l,
|
|
5547
5577
|
bounds: m,
|
|
5548
|
-
targetSize:
|
|
5578
|
+
targetSize: o,
|
|
5549
5579
|
montageArea: a
|
|
5550
5580
|
}), M = f * e, S = p * e;
|
|
5551
5581
|
t.set({
|
|
@@ -5561,13 +5591,13 @@ class R {
|
|
|
5561
5591
|
bounds: t,
|
|
5562
5592
|
baseWidth: e,
|
|
5563
5593
|
baseHeight: s,
|
|
5564
|
-
scale:
|
|
5565
|
-
useRelativePositions:
|
|
5594
|
+
scale: o,
|
|
5595
|
+
useRelativePositions: n,
|
|
5566
5596
|
anchorX: i,
|
|
5567
5597
|
anchorY: a
|
|
5568
5598
|
}) {
|
|
5569
|
-
if (!
|
|
5570
|
-
const r = (e || t.width) *
|
|
5599
|
+
if (!n) return t;
|
|
5600
|
+
const r = (e || t.width) * o, c = (s || t.height) * o, d = t.width - r, l = t.height - c, u = t.left + R._calculateAnchorOffset(i, d), g = t.top + R._calculateAnchorOffset(a, l);
|
|
5571
5601
|
return {
|
|
5572
5602
|
left: u,
|
|
5573
5603
|
top: g,
|
|
@@ -5583,11 +5613,11 @@ class R {
|
|
|
5583
5613
|
return s === "center" || s === "end" || s === "start" ? s : "start";
|
|
5584
5614
|
}
|
|
5585
5615
|
static _detectAnchor({ start: t, end: e }) {
|
|
5586
|
-
const s = t <= 0.05,
|
|
5587
|
-
if (s &&
|
|
5616
|
+
const s = t <= 0.05, o = e >= 0.95, n = t < 0, i = e > 1, a = e - t, r = Math.max(0, t), c = Math.max(0, 1 - e), d = Math.abs(r - c) <= 0.02;
|
|
5617
|
+
if (s && o || n && i)
|
|
5588
5618
|
return d || a >= 0.9 ? "center" : r <= c ? "start" : "end";
|
|
5589
|
-
if (s ||
|
|
5590
|
-
if (
|
|
5619
|
+
if (s || n) return "start";
|
|
5620
|
+
if (o || i) return "end";
|
|
5591
5621
|
const l = r - c;
|
|
5592
5622
|
return Math.abs(l) <= 0.1 ? "center" : l < 0 ? "start" : "end";
|
|
5593
5623
|
}
|
|
@@ -5598,9 +5628,9 @@ class R {
|
|
|
5598
5628
|
meta: t,
|
|
5599
5629
|
fallback: e
|
|
5600
5630
|
}) {
|
|
5601
|
-
const { width: s, height:
|
|
5631
|
+
const { width: s, height: o } = e, r = t || {}, { baseWidth: n = s, baseHeight: i = o } = r, a = Mt(r, ["baseWidth", "baseHeight"]);
|
|
5602
5632
|
return B({
|
|
5603
|
-
baseWidth:
|
|
5633
|
+
baseWidth: n,
|
|
5604
5634
|
baseHeight: i
|
|
5605
5635
|
}, a);
|
|
5606
5636
|
}
|
|
@@ -5611,7 +5641,7 @@ class R {
|
|
|
5611
5641
|
meta: t,
|
|
5612
5642
|
target: e
|
|
5613
5643
|
}) {
|
|
5614
|
-
const { width: s, height:
|
|
5644
|
+
const { width: s, height: o } = e, { baseWidth: n, baseHeight: i } = t, a = s / (n || s || 1), r = o / (i || o || 1);
|
|
5615
5645
|
return Math.min(a, r);
|
|
5616
5646
|
}
|
|
5617
5647
|
/**
|
|
@@ -5637,21 +5667,21 @@ class R {
|
|
|
5637
5667
|
baseWidth: e
|
|
5638
5668
|
}) {
|
|
5639
5669
|
var Z, D;
|
|
5640
|
-
if (!(t instanceof
|
|
5670
|
+
if (!(t instanceof st)) return;
|
|
5641
5671
|
const s = typeof t.text == "string" ? t.text : "";
|
|
5642
5672
|
if (!s) return;
|
|
5643
|
-
const
|
|
5673
|
+
const o = Q({
|
|
5644
5674
|
value: (D = (Z = this.editor) == null ? void 0 : Z.montageArea) == null ? void 0 : D.width,
|
|
5645
5675
|
fallback: 0
|
|
5646
5676
|
}), {
|
|
5647
|
-
width:
|
|
5677
|
+
width: n = 0,
|
|
5648
5678
|
scaleX: i = 1,
|
|
5649
5679
|
strokeWidth: a = 0
|
|
5650
|
-
} = t, r = Q({ value: e, fallback: 0 }), c = t, d = Q({ value: c.paddingLeft, fallback: 0 }), l = Q({ value: c.paddingRight, fallback: 0 }), u = Q({ value: i, fallback: 1 }), g = Q({ value: a, fallback: 0 }) * u, f = Q({ value:
|
|
5651
|
-
if (!
|
|
5680
|
+
} = t, r = Q({ value: e, fallback: 0 }), c = t, d = Q({ value: c.paddingLeft, fallback: 0 }), l = Q({ value: c.paddingRight, fallback: 0 }), u = Q({ value: i, fallback: 1 }), g = Q({ value: a, fallback: 0 }) * u, f = Q({ value: n, fallback: 0 }), p = f * u, m = d * u, v = l * u, M = p + m + v + g;
|
|
5681
|
+
if (!o || !f || !r) return;
|
|
5652
5682
|
t.setCoords();
|
|
5653
5683
|
const S = t, y = S[Wt], b = typeof y == "number" ? y : null, I = R._resolveAnchor(S, Jt), j = M / r, A = b !== null ? b - j / 2 : null, C = b !== null ? b + j / 2 : null, w = t.getCenterPoint();
|
|
5654
|
-
t.set("width",
|
|
5684
|
+
t.set("width", o), t.initDimensions();
|
|
5655
5685
|
const T = R._getLongestLineWidth({
|
|
5656
5686
|
textbox: t,
|
|
5657
5687
|
text: s
|
|
@@ -5670,14 +5700,14 @@ class R {
|
|
|
5670
5700
|
}) {
|
|
5671
5701
|
const {
|
|
5672
5702
|
textLines: s
|
|
5673
|
-
} = t,
|
|
5703
|
+
} = t, o = Array.isArray(s) && s.length > 0 ? s.length : Math.max(e.split(`
|
|
5674
5704
|
`).length, 1);
|
|
5675
|
-
let
|
|
5676
|
-
for (let i = 0; i <
|
|
5705
|
+
let n = 0;
|
|
5706
|
+
for (let i = 0; i < o; i += 1) {
|
|
5677
5707
|
const a = t.getLineWidth(i);
|
|
5678
|
-
a >
|
|
5708
|
+
a > n && (n = a);
|
|
5679
5709
|
}
|
|
5680
|
-
return
|
|
5710
|
+
return n;
|
|
5681
5711
|
}
|
|
5682
5712
|
/**
|
|
5683
5713
|
* Сериализует объект относительно монтажной области.
|
|
@@ -5686,8 +5716,8 @@ class R {
|
|
|
5686
5716
|
object: t,
|
|
5687
5717
|
bounds: e,
|
|
5688
5718
|
baseWidth: s,
|
|
5689
|
-
baseHeight:
|
|
5690
|
-
montageArea:
|
|
5719
|
+
baseHeight: o,
|
|
5720
|
+
montageArea: n
|
|
5691
5721
|
}) {
|
|
5692
5722
|
const i = t.toDatalessObject([...es]);
|
|
5693
5723
|
if (R._isSvgObject(t)) {
|
|
@@ -5700,9 +5730,9 @@ class R {
|
|
|
5700
5730
|
top: r,
|
|
5701
5731
|
width: c,
|
|
5702
5732
|
height: d
|
|
5703
|
-
} = e, l = t.getBoundingRect(!1, !0), u = s || c || 1, g =
|
|
5733
|
+
} = e, l = t.getBoundingRect(!1, !0), u = s || c || 1, g = o || d || 1, f = uo({
|
|
5704
5734
|
object: t,
|
|
5705
|
-
montageArea:
|
|
5735
|
+
montageArea: n,
|
|
5706
5736
|
bounds: e
|
|
5707
5737
|
}), p = f != null ? f : (() => {
|
|
5708
5738
|
const y = t.getCenterPoint();
|
|
@@ -5725,32 +5755,32 @@ class R {
|
|
|
5725
5755
|
* Делит список объектов на фон и контент по id === 'background'.
|
|
5726
5756
|
*/
|
|
5727
5757
|
static _extractBackgroundObject(t) {
|
|
5728
|
-
const e = t.findIndex((
|
|
5758
|
+
const e = t.findIndex((n) => n.id === "background");
|
|
5729
5759
|
if (e === -1)
|
|
5730
5760
|
return { backgroundObject: null, contentObjects: t };
|
|
5731
|
-
const s = t[e],
|
|
5732
|
-
return { backgroundObject: s, contentObjects:
|
|
5761
|
+
const s = t[e], o = t.filter((n, i) => i !== e);
|
|
5762
|
+
return { backgroundObject: s, contentObjects: o };
|
|
5733
5763
|
}
|
|
5734
5764
|
/**
|
|
5735
5765
|
* Применяет фоновый объект шаблона к текущему холсту через BackgroundManager.
|
|
5736
5766
|
*/
|
|
5737
|
-
static _applyBackgroundFromObject(
|
|
5767
|
+
static _applyBackgroundFromObject(o) {
|
|
5738
5768
|
return k(this, arguments, function* ({
|
|
5739
5769
|
backgroundObject: t,
|
|
5740
5770
|
backgroundManager: e,
|
|
5741
5771
|
errorManager: s
|
|
5742
5772
|
}) {
|
|
5743
5773
|
try {
|
|
5744
|
-
const { fill:
|
|
5745
|
-
if (a === "color" && typeof
|
|
5774
|
+
const { fill: n, customData: i } = t, { backgroundType: a } = t, r = R._cloneCustomData(i);
|
|
5775
|
+
if (a === "color" && typeof n == "string")
|
|
5746
5776
|
return e.setColorBackground({
|
|
5747
|
-
color:
|
|
5777
|
+
color: n,
|
|
5748
5778
|
customData: r,
|
|
5749
5779
|
fromTemplate: !0,
|
|
5750
5780
|
withoutSave: !0
|
|
5751
5781
|
}), !0;
|
|
5752
5782
|
if (a === "gradient") {
|
|
5753
|
-
const c =
|
|
5783
|
+
const c = fo(n);
|
|
5754
5784
|
if (c)
|
|
5755
5785
|
return e.setGradientBackground({
|
|
5756
5786
|
gradient: c,
|
|
@@ -5769,13 +5799,13 @@ class R {
|
|
|
5769
5799
|
withoutSave: !0
|
|
5770
5800
|
}), !0;
|
|
5771
5801
|
}
|
|
5772
|
-
} catch (
|
|
5802
|
+
} catch (n) {
|
|
5773
5803
|
s.emitWarning({
|
|
5774
5804
|
origin: "TemplateManager",
|
|
5775
5805
|
method: "applyTemplate",
|
|
5776
|
-
code:
|
|
5806
|
+
code: wt.TEMPLATE_MANAGER.APPLY_FAILED,
|
|
5777
5807
|
message: "Не удалось применить фон из шаблона",
|
|
5778
|
-
data:
|
|
5808
|
+
data: n
|
|
5779
5809
|
});
|
|
5780
5810
|
}
|
|
5781
5811
|
return !1;
|
|
@@ -5788,14 +5818,14 @@ class R {
|
|
|
5788
5818
|
montageArea: t,
|
|
5789
5819
|
bounds: e
|
|
5790
5820
|
}) {
|
|
5791
|
-
var
|
|
5792
|
-
const s = (e == null ? void 0 : e.width) || 0,
|
|
5821
|
+
var n, i;
|
|
5822
|
+
const s = (e == null ? void 0 : e.width) || 0, o = (e == null ? void 0 : e.height) || 0;
|
|
5793
5823
|
return t ? {
|
|
5794
|
-
width: ((
|
|
5795
|
-
height: ((i = t.getScaledHeight) == null ? void 0 : i.call(t)) || t.height ||
|
|
5824
|
+
width: ((n = t.getScaledWidth) == null ? void 0 : n.call(t)) || t.width || s,
|
|
5825
|
+
height: ((i = t.getScaledHeight) == null ? void 0 : i.call(t)) || t.height || o
|
|
5796
5826
|
} : {
|
|
5797
5827
|
width: s,
|
|
5798
|
-
height:
|
|
5828
|
+
height: o
|
|
5799
5829
|
};
|
|
5800
5830
|
}
|
|
5801
5831
|
/**
|
|
@@ -5811,13 +5841,13 @@ class R {
|
|
|
5811
5841
|
static _getImageSource(t) {
|
|
5812
5842
|
const e = t;
|
|
5813
5843
|
if ("getSrc" in t && typeof e.getSrc == "function") {
|
|
5814
|
-
const
|
|
5815
|
-
if (
|
|
5844
|
+
const o = e.getSrc();
|
|
5845
|
+
if (o) return o;
|
|
5816
5846
|
}
|
|
5817
5847
|
if ("getElement" in t && typeof e.getElement == "function") {
|
|
5818
|
-
const
|
|
5819
|
-
if (
|
|
5820
|
-
return
|
|
5848
|
+
const o = e.getElement();
|
|
5849
|
+
if (o instanceof HTMLImageElement)
|
|
5850
|
+
return o.currentSrc || o.src || null;
|
|
5821
5851
|
}
|
|
5822
5852
|
const s = t;
|
|
5823
5853
|
return typeof s.src == "string" ? s.src : null;
|
|
@@ -5832,29 +5862,29 @@ class R {
|
|
|
5832
5862
|
return dt.enlivenObjectEnlivables(t);
|
|
5833
5863
|
}
|
|
5834
5864
|
}
|
|
5835
|
-
const
|
|
5865
|
+
const po = 5, ss = "#3D8BF4", me = 1, $t = 1, Ke = ({
|
|
5836
5866
|
anchors: h,
|
|
5837
5867
|
positions: t,
|
|
5838
5868
|
threshold: e
|
|
5839
5869
|
}) => {
|
|
5840
|
-
let s = 0,
|
|
5870
|
+
let s = 0, o = e + 1, n = null;
|
|
5841
5871
|
for (const i of t)
|
|
5842
5872
|
for (const a of h) {
|
|
5843
5873
|
const r = Math.abs(a - i);
|
|
5844
|
-
r > e || r >=
|
|
5874
|
+
r > e || r >= o || (s = a - i, o = r, n = a);
|
|
5845
5875
|
}
|
|
5846
5876
|
return {
|
|
5847
5877
|
delta: s,
|
|
5848
|
-
guidePosition:
|
|
5878
|
+
guidePosition: n
|
|
5849
5879
|
};
|
|
5850
|
-
},
|
|
5880
|
+
}, mo = ({
|
|
5851
5881
|
activeBounds: h,
|
|
5852
5882
|
threshold: t,
|
|
5853
5883
|
anchors: e
|
|
5854
5884
|
}) => {
|
|
5855
|
-
const { left: s, right:
|
|
5885
|
+
const { left: s, right: o, centerX: n, top: i, bottom: a, centerY: r } = h, c = Ke({
|
|
5856
5886
|
anchors: e.vertical,
|
|
5857
|
-
positions: [s,
|
|
5887
|
+
positions: [s, n, o],
|
|
5858
5888
|
threshold: t
|
|
5859
5889
|
}), d = Ke({
|
|
5860
5890
|
anchors: e.horizontal,
|
|
@@ -5872,27 +5902,27 @@ const pn = 5, ss = "#3D8BF4", me = 1, $t = 1, Ke = ({
|
|
|
5872
5902
|
deltaY: d.delta,
|
|
5873
5903
|
guides: l
|
|
5874
5904
|
};
|
|
5875
|
-
},
|
|
5905
|
+
}, os = ({
|
|
5876
5906
|
activeBounds: h,
|
|
5877
5907
|
aligned: t,
|
|
5878
5908
|
threshold: e,
|
|
5879
5909
|
patterns: s,
|
|
5880
|
-
type:
|
|
5910
|
+
type: o
|
|
5881
5911
|
}) => {
|
|
5882
5912
|
if (!t.length || !s.length) return [];
|
|
5883
5913
|
const {
|
|
5884
|
-
top:
|
|
5914
|
+
top: n,
|
|
5885
5915
|
bottom: i,
|
|
5886
5916
|
left: a,
|
|
5887
5917
|
right: r
|
|
5888
5918
|
} = h, c = [];
|
|
5889
5919
|
for (const d of s)
|
|
5890
5920
|
for (const l of t)
|
|
5891
|
-
if (
|
|
5892
|
-
const u =
|
|
5921
|
+
if (o === "vertical") {
|
|
5922
|
+
const u = n - l.bottom, g = Math.abs(u - d.distance);
|
|
5893
5923
|
if (g <= e) {
|
|
5894
5924
|
const m = d.distance - u, v = {
|
|
5895
|
-
type:
|
|
5925
|
+
type: o,
|
|
5896
5926
|
axis: d.axis,
|
|
5897
5927
|
refStart: d.start,
|
|
5898
5928
|
refEnd: d.end,
|
|
@@ -5905,7 +5935,7 @@ const pn = 5, ss = "#3D8BF4", me = 1, $t = 1, Ke = ({
|
|
|
5905
5935
|
const f = l.top - i, p = Math.abs(f - d.distance);
|
|
5906
5936
|
if (p <= e) {
|
|
5907
5937
|
const m = d.distance - f, v = {
|
|
5908
|
-
type:
|
|
5938
|
+
type: o,
|
|
5909
5939
|
axis: d.axis,
|
|
5910
5940
|
refStart: d.start,
|
|
5911
5941
|
refEnd: d.end,
|
|
@@ -5919,7 +5949,7 @@ const pn = 5, ss = "#3D8BF4", me = 1, $t = 1, Ke = ({
|
|
|
5919
5949
|
const u = a - l.right, g = Math.abs(u - d.distance);
|
|
5920
5950
|
if (g <= e) {
|
|
5921
5951
|
const m = d.distance - u, v = {
|
|
5922
|
-
type:
|
|
5952
|
+
type: o,
|
|
5923
5953
|
axis: d.axis,
|
|
5924
5954
|
refStart: d.start,
|
|
5925
5955
|
refEnd: d.end,
|
|
@@ -5932,7 +5962,7 @@ const pn = 5, ss = "#3D8BF4", me = 1, $t = 1, Ke = ({
|
|
|
5932
5962
|
const f = l.left - r, p = Math.abs(f - d.distance);
|
|
5933
5963
|
if (p <= e) {
|
|
5934
5964
|
const m = d.distance - f, v = {
|
|
5935
|
-
type:
|
|
5965
|
+
type: o,
|
|
5936
5966
|
axis: d.axis,
|
|
5937
5967
|
refStart: d.start,
|
|
5938
5968
|
refEnd: d.end,
|
|
@@ -5944,15 +5974,15 @@ const pn = 5, ss = "#3D8BF4", me = 1, $t = 1, Ke = ({
|
|
|
5944
5974
|
}
|
|
5945
5975
|
}
|
|
5946
5976
|
return c;
|
|
5947
|
-
},
|
|
5977
|
+
}, yo = ({
|
|
5948
5978
|
activeBounds: h,
|
|
5949
5979
|
candidates: t,
|
|
5950
5980
|
threshold: e,
|
|
5951
5981
|
patterns: s
|
|
5952
5982
|
}) => {
|
|
5953
5983
|
const {
|
|
5954
|
-
centerX:
|
|
5955
|
-
top:
|
|
5984
|
+
centerX: o,
|
|
5985
|
+
top: n,
|
|
5956
5986
|
bottom: i,
|
|
5957
5987
|
left: a,
|
|
5958
5988
|
right: r
|
|
@@ -5967,13 +5997,13 @@ const pn = 5, ss = "#3D8BF4", me = 1, $t = 1, Ke = ({
|
|
|
5967
5997
|
const l = d.findIndex((y) => y.isActive);
|
|
5968
5998
|
if (l === -1)
|
|
5969
5999
|
return { delta: 0, guide: null };
|
|
5970
|
-
const u = d[l - 1], g = d[l - 2], f = d[l + 1], p = d[l + 2], m = [], v = i -
|
|
6000
|
+
const u = d[l - 1], g = d[l - 2], f = d[l + 1], p = d[l + 2], m = [], v = i - n;
|
|
5971
6001
|
if (u && g) {
|
|
5972
|
-
const { bounds: y } = u, { bounds: b } = g, I = y.top - b.bottom, j =
|
|
6002
|
+
const { bounds: y } = u, { bounds: b } = g, I = y.top - b.bottom, j = n - y.bottom, A = Math.abs(j - I);
|
|
5973
6003
|
if (A <= e) {
|
|
5974
|
-
const C = I - j, w =
|
|
6004
|
+
const C = I - j, w = n + C, T = {
|
|
5975
6005
|
type: "vertical",
|
|
5976
|
-
axis:
|
|
6006
|
+
axis: o,
|
|
5977
6007
|
refStart: b.bottom,
|
|
5978
6008
|
refEnd: y.top,
|
|
5979
6009
|
activeStart: y.bottom,
|
|
@@ -5988,7 +6018,7 @@ const pn = 5, ss = "#3D8BF4", me = 1, $t = 1, Ke = ({
|
|
|
5988
6018
|
if (A <= e) {
|
|
5989
6019
|
const C = j - I, w = i + C, T = {
|
|
5990
6020
|
type: "vertical",
|
|
5991
|
-
axis:
|
|
6021
|
+
axis: o,
|
|
5992
6022
|
refStart: y.bottom,
|
|
5993
6023
|
refEnd: b.top,
|
|
5994
6024
|
activeStart: w,
|
|
@@ -6001,11 +6031,11 @@ const pn = 5, ss = "#3D8BF4", me = 1, $t = 1, Ke = ({
|
|
|
6001
6031
|
if (u && f) {
|
|
6002
6032
|
const { bounds: y } = u, { bounds: b } = f, j = b.top - y.bottom - v;
|
|
6003
6033
|
if (j >= 0) {
|
|
6004
|
-
const A = j / 2, C =
|
|
6034
|
+
const A = j / 2, C = n - y.bottom, w = b.top - i, T = Math.abs(C - A), E = Math.abs(w - A), P = Math.max(T, E);
|
|
6005
6035
|
if (P <= e) {
|
|
6006
6036
|
const x = A - C, N = i + x, Z = {
|
|
6007
6037
|
type: "vertical",
|
|
6008
|
-
axis:
|
|
6038
|
+
axis: o,
|
|
6009
6039
|
refStart: y.bottom,
|
|
6010
6040
|
refEnd: y.bottom + A,
|
|
6011
6041
|
activeStart: N,
|
|
@@ -6016,7 +6046,7 @@ const pn = 5, ss = "#3D8BF4", me = 1, $t = 1, Ke = ({
|
|
|
6016
6046
|
}
|
|
6017
6047
|
}
|
|
6018
6048
|
}
|
|
6019
|
-
const M =
|
|
6049
|
+
const M = os({
|
|
6020
6050
|
activeBounds: h,
|
|
6021
6051
|
aligned: c,
|
|
6022
6052
|
threshold: e,
|
|
@@ -6030,15 +6060,15 @@ const pn = 5, ss = "#3D8BF4", me = 1, $t = 1, Ke = ({
|
|
|
6030
6060
|
delta: S.delta,
|
|
6031
6061
|
guide: S.guide
|
|
6032
6062
|
};
|
|
6033
|
-
},
|
|
6063
|
+
}, vo = ({
|
|
6034
6064
|
activeBounds: h,
|
|
6035
6065
|
candidates: t,
|
|
6036
6066
|
threshold: e,
|
|
6037
6067
|
patterns: s
|
|
6038
6068
|
}) => {
|
|
6039
6069
|
const {
|
|
6040
|
-
centerY:
|
|
6041
|
-
left:
|
|
6070
|
+
centerY: o,
|
|
6071
|
+
left: n,
|
|
6042
6072
|
right: i,
|
|
6043
6073
|
top: a,
|
|
6044
6074
|
bottom: r
|
|
@@ -6053,13 +6083,13 @@ const pn = 5, ss = "#3D8BF4", me = 1, $t = 1, Ke = ({
|
|
|
6053
6083
|
const l = d.findIndex((y) => y.isActive);
|
|
6054
6084
|
if (l === -1)
|
|
6055
6085
|
return { delta: 0, guide: null };
|
|
6056
|
-
const u = d[l - 1], g = d[l - 2], f = d[l + 1], p = d[l + 2], m = [], v = i -
|
|
6086
|
+
const u = d[l - 1], g = d[l - 2], f = d[l + 1], p = d[l + 2], m = [], v = i - n;
|
|
6057
6087
|
if (u && g) {
|
|
6058
|
-
const { bounds: y } = u, { bounds: b } = g, I = y.left - b.right, j =
|
|
6088
|
+
const { bounds: y } = u, { bounds: b } = g, I = y.left - b.right, j = n - y.right, A = Math.abs(j - I);
|
|
6059
6089
|
if (A <= e) {
|
|
6060
|
-
const C = I - j, w =
|
|
6090
|
+
const C = I - j, w = n + C, T = {
|
|
6061
6091
|
type: "horizontal",
|
|
6062
|
-
axis:
|
|
6092
|
+
axis: o,
|
|
6063
6093
|
refStart: b.right,
|
|
6064
6094
|
refEnd: y.left,
|
|
6065
6095
|
activeStart: y.right,
|
|
@@ -6074,7 +6104,7 @@ const pn = 5, ss = "#3D8BF4", me = 1, $t = 1, Ke = ({
|
|
|
6074
6104
|
if (A <= e) {
|
|
6075
6105
|
const C = j - I, w = i + C, T = {
|
|
6076
6106
|
type: "horizontal",
|
|
6077
|
-
axis:
|
|
6107
|
+
axis: o,
|
|
6078
6108
|
refStart: y.right,
|
|
6079
6109
|
refEnd: b.left,
|
|
6080
6110
|
activeStart: w,
|
|
@@ -6087,11 +6117,11 @@ const pn = 5, ss = "#3D8BF4", me = 1, $t = 1, Ke = ({
|
|
|
6087
6117
|
if (u && f) {
|
|
6088
6118
|
const { bounds: y } = u, { bounds: b } = f, j = b.left - y.right - v;
|
|
6089
6119
|
if (j >= 0) {
|
|
6090
|
-
const A = j / 2, C =
|
|
6120
|
+
const A = j / 2, C = n - y.right, w = b.left - i, T = Math.abs(C - A), E = Math.abs(w - A), P = Math.max(T, E);
|
|
6091
6121
|
if (P <= e) {
|
|
6092
6122
|
const x = A - C, N = i + x, Z = {
|
|
6093
6123
|
type: "horizontal",
|
|
6094
|
-
axis:
|
|
6124
|
+
axis: o,
|
|
6095
6125
|
refStart: y.right,
|
|
6096
6126
|
refEnd: y.right + A,
|
|
6097
6127
|
activeStart: N,
|
|
@@ -6102,7 +6132,7 @@ const pn = 5, ss = "#3D8BF4", me = 1, $t = 1, Ke = ({
|
|
|
6102
6132
|
}
|
|
6103
6133
|
}
|
|
6104
6134
|
}
|
|
6105
|
-
const M =
|
|
6135
|
+
const M = os({
|
|
6106
6136
|
activeBounds: h,
|
|
6107
6137
|
aligned: c,
|
|
6108
6138
|
threshold: e,
|
|
@@ -6116,45 +6146,45 @@ const pn = 5, ss = "#3D8BF4", me = 1, $t = 1, Ke = ({
|
|
|
6116
6146
|
delta: S.delta,
|
|
6117
6147
|
guide: S.guide
|
|
6118
6148
|
};
|
|
6119
|
-
},
|
|
6149
|
+
}, bo = ({
|
|
6120
6150
|
activeBounds: h,
|
|
6121
6151
|
candidates: t,
|
|
6122
6152
|
threshold: e,
|
|
6123
6153
|
spacingPatterns: s
|
|
6124
6154
|
}) => {
|
|
6125
|
-
const
|
|
6155
|
+
const o = yo({
|
|
6126
6156
|
activeBounds: h,
|
|
6127
6157
|
candidates: t,
|
|
6128
6158
|
threshold: e,
|
|
6129
6159
|
patterns: s.vertical
|
|
6130
|
-
}),
|
|
6160
|
+
}), n = vo({
|
|
6131
6161
|
activeBounds: h,
|
|
6132
6162
|
candidates: t,
|
|
6133
6163
|
threshold: e,
|
|
6134
6164
|
patterns: s.horizontal
|
|
6135
6165
|
}), i = [];
|
|
6136
|
-
return
|
|
6137
|
-
deltaX:
|
|
6138
|
-
deltaY:
|
|
6166
|
+
return o.guide && i.push(o.guide), n.guide && i.push(n.guide), {
|
|
6167
|
+
deltaX: n.delta,
|
|
6168
|
+
deltaY: o.delta,
|
|
6139
6169
|
guides: i
|
|
6140
6170
|
};
|
|
6141
|
-
},
|
|
6171
|
+
}, Mo = ({
|
|
6142
6172
|
context: h,
|
|
6143
6173
|
x: t,
|
|
6144
6174
|
y: e,
|
|
6145
6175
|
width: s,
|
|
6146
|
-
height:
|
|
6147
|
-
radius:
|
|
6176
|
+
height: o,
|
|
6177
|
+
radius: n
|
|
6148
6178
|
}) => {
|
|
6149
|
-
const i = Math.min(
|
|
6150
|
-
h.moveTo(t + i, e), h.lineTo(t + s - i, e), h.quadraticCurveTo(t + s, e, t + s, e + i), h.lineTo(t + s, e +
|
|
6179
|
+
const i = Math.min(n, s / 2, o / 2);
|
|
6180
|
+
h.moveTo(t + i, e), h.lineTo(t + s - i, e), h.quadraticCurveTo(t + s, e, t + s, e + i), h.lineTo(t + s, e + o - i), h.quadraticCurveTo(t + s, e + o, t + s - i, e + o), h.lineTo(t + i, e + o), h.quadraticCurveTo(t, e + o, t, e + o - i), h.lineTo(t, e + i), h.quadraticCurveTo(t, e, t + i, e), h.closePath();
|
|
6151
6181
|
}, ye = ({
|
|
6152
6182
|
context: h,
|
|
6153
6183
|
type: t,
|
|
6154
6184
|
axis: e,
|
|
6155
6185
|
start: s,
|
|
6156
|
-
end:
|
|
6157
|
-
text:
|
|
6186
|
+
end: o,
|
|
6187
|
+
text: n,
|
|
6158
6188
|
zoom: i,
|
|
6159
6189
|
color: a,
|
|
6160
6190
|
textColor: r = "#ffffff",
|
|
@@ -6165,38 +6195,38 @@ const pn = 5, ss = "#3D8BF4", me = 1, $t = 1, Ke = ({
|
|
|
6165
6195
|
offsetAlongAxis: g = 0,
|
|
6166
6196
|
offsetPerpendicular: f = 0
|
|
6167
6197
|
}) => {
|
|
6168
|
-
const p = i || 1, m = 12 / p, v = l / p, M = u / p, S = (s +
|
|
6198
|
+
const p = i || 1, m = 12 / p, v = l / p, M = u / p, S = (s + o) / 2 + g, y = t === "vertical" ? e + f : S, b = t === "vertical" ? S : e + f;
|
|
6169
6199
|
h.save(), h.setLineDash([]), h.fillStyle = a, h.strokeStyle = a, h.lineWidth = d / p, h.font = `${m}px ${c}`, h.textAlign = "center", h.textBaseline = "middle";
|
|
6170
|
-
const j = h.measureText(
|
|
6171
|
-
h.beginPath(),
|
|
6200
|
+
const j = h.measureText(n).width + v * 2, A = m + v * 2, C = y - j / 2, w = b - A / 2;
|
|
6201
|
+
h.beginPath(), Mo({
|
|
6172
6202
|
context: h,
|
|
6173
6203
|
x: C,
|
|
6174
6204
|
y: w,
|
|
6175
6205
|
width: j,
|
|
6176
6206
|
height: A,
|
|
6177
6207
|
radius: M
|
|
6178
|
-
}), h.fill(), h.fillStyle = r, h.fillText(
|
|
6179
|
-
},
|
|
6208
|
+
}), h.fill(), h.fillStyle = r, h.fillText(n, y, b), h.restore();
|
|
6209
|
+
}, wo = ({
|
|
6180
6210
|
context: h,
|
|
6181
6211
|
guide: t,
|
|
6182
6212
|
zoom: e
|
|
6183
6213
|
}) => {
|
|
6184
6214
|
const {
|
|
6185
6215
|
type: s,
|
|
6186
|
-
axis:
|
|
6187
|
-
refStart:
|
|
6216
|
+
axis: o,
|
|
6217
|
+
refStart: n,
|
|
6188
6218
|
refEnd: i,
|
|
6189
6219
|
activeStart: a,
|
|
6190
6220
|
activeEnd: r,
|
|
6191
6221
|
distance: c
|
|
6192
6222
|
} = t, d = Math.round(c).toString();
|
|
6193
|
-
h.beginPath(), s === "vertical" ? (h.moveTo(
|
|
6223
|
+
h.beginPath(), s === "vertical" ? (h.moveTo(o, n), h.lineTo(o, i), h.moveTo(o, a), h.lineTo(o, r)) : (h.moveTo(n, o), h.lineTo(i, o), h.moveTo(a, o), h.lineTo(r, o)), h.stroke();
|
|
6194
6224
|
const l = ss;
|
|
6195
6225
|
ye({
|
|
6196
6226
|
context: h,
|
|
6197
6227
|
type: s,
|
|
6198
|
-
axis:
|
|
6199
|
-
start:
|
|
6228
|
+
axis: o,
|
|
6229
|
+
start: n,
|
|
6200
6230
|
end: i,
|
|
6201
6231
|
text: d,
|
|
6202
6232
|
zoom: e,
|
|
@@ -6205,7 +6235,7 @@ const pn = 5, ss = "#3D8BF4", me = 1, $t = 1, Ke = ({
|
|
|
6205
6235
|
}), ye({
|
|
6206
6236
|
context: h,
|
|
6207
6237
|
type: s,
|
|
6208
|
-
axis:
|
|
6238
|
+
axis: o,
|
|
6209
6239
|
start: a,
|
|
6210
6240
|
end: r,
|
|
6211
6241
|
text: d,
|
|
@@ -6220,31 +6250,31 @@ const pn = 5, ss = "#3D8BF4", me = 1, $t = 1, Ke = ({
|
|
|
6220
6250
|
const {
|
|
6221
6251
|
left: e,
|
|
6222
6252
|
right: s,
|
|
6223
|
-
centerX:
|
|
6224
|
-
top:
|
|
6253
|
+
centerX: o,
|
|
6254
|
+
top: n,
|
|
6225
6255
|
bottom: i,
|
|
6226
6256
|
centerY: a
|
|
6227
6257
|
} = t;
|
|
6228
|
-
h.vertical.push(e,
|
|
6258
|
+
h.vertical.push(e, o, s), h.horizontal.push(n, a, i);
|
|
6229
6259
|
}, qe = ({
|
|
6230
6260
|
bounds: h,
|
|
6231
6261
|
type: t,
|
|
6232
6262
|
primaryStart: e,
|
|
6233
6263
|
primaryEnd: s
|
|
6234
6264
|
}) => {
|
|
6235
|
-
const
|
|
6265
|
+
const o = [], n = e === "top" ? "left" : "top", i = s === "bottom" ? "right" : "bottom", a = [...h].sort((r, c) => r[e] - c[e]);
|
|
6236
6266
|
for (let r = 0; r < a.length; r += 1) {
|
|
6237
6267
|
const c = a[r];
|
|
6238
6268
|
let d = null, l = Number.POSITIVE_INFINITY;
|
|
6239
6269
|
for (let p = r + 1; p < a.length; p += 1) {
|
|
6240
6270
|
const m = a[p];
|
|
6241
|
-
if (Math.min(c[i], m[i]) - Math.max(c[
|
|
6271
|
+
if (Math.min(c[i], m[i]) - Math.max(c[n], m[n]) < 0) continue;
|
|
6242
6272
|
const M = m[e] - c[s];
|
|
6243
6273
|
M < 0 || M < l && (l = M, d = m);
|
|
6244
6274
|
}
|
|
6245
6275
|
if (!d || l === Number.POSITIVE_INFINITY) continue;
|
|
6246
|
-
const u = Math.max(c[
|
|
6247
|
-
|
|
6276
|
+
const u = Math.max(c[n], d[n]), g = Math.min(c[i], d[i]), f = (u + g) / 2;
|
|
6277
|
+
o.push({
|
|
6248
6278
|
type: t,
|
|
6249
6279
|
axis: f,
|
|
6250
6280
|
start: c[s],
|
|
@@ -6252,8 +6282,8 @@ const pn = 5, ss = "#3D8BF4", me = 1, $t = 1, Ke = ({
|
|
|
6252
6282
|
distance: d[e] - c[s]
|
|
6253
6283
|
});
|
|
6254
6284
|
}
|
|
6255
|
-
return
|
|
6256
|
-
},
|
|
6285
|
+
return o;
|
|
6286
|
+
}, So = ({
|
|
6257
6287
|
bounds: h
|
|
6258
6288
|
}) => {
|
|
6259
6289
|
const t = qe({
|
|
@@ -6268,7 +6298,7 @@ const pn = 5, ss = "#3D8BF4", me = 1, $t = 1, Ke = ({
|
|
|
6268
6298
|
primaryEnd: "right"
|
|
6269
6299
|
});
|
|
6270
6300
|
return { vertical: t, horizontal: e };
|
|
6271
|
-
},
|
|
6301
|
+
}, Ao = ["montage-area", "background", "interaction-blocker"], ns = ({
|
|
6272
6302
|
activeObject: h
|
|
6273
6303
|
}) => {
|
|
6274
6304
|
const t = /* @__PURE__ */ new Set();
|
|
@@ -6276,15 +6306,15 @@ const pn = 5, ss = "#3D8BF4", me = 1, $t = 1, Ke = ({
|
|
|
6276
6306
|
}, is = ({
|
|
6277
6307
|
object: h,
|
|
6278
6308
|
excluded: t,
|
|
6279
|
-
ignoredIds: e =
|
|
6309
|
+
ignoredIds: e = Ao
|
|
6280
6310
|
}) => {
|
|
6281
6311
|
if (t.has(h)) return !0;
|
|
6282
6312
|
const { visible: s = !0 } = h;
|
|
6283
6313
|
if (!s) return !0;
|
|
6284
|
-
const { id:
|
|
6285
|
-
return !!(
|
|
6314
|
+
const { id: o } = h;
|
|
6315
|
+
return !!(o && e.includes(o));
|
|
6286
6316
|
};
|
|
6287
|
-
class
|
|
6317
|
+
class jo {
|
|
6288
6318
|
/**
|
|
6289
6319
|
* Создаёт менеджер прилипания и инициализирует слушатели событий.
|
|
6290
6320
|
*/
|
|
@@ -6342,13 +6372,13 @@ class jn {
|
|
|
6342
6372
|
return;
|
|
6343
6373
|
}
|
|
6344
6374
|
!this.anchors.vertical.length && !this.anchors.horizontal.length && this._cacheAnchors({ activeObject: e });
|
|
6345
|
-
let
|
|
6346
|
-
if (!
|
|
6375
|
+
let n = mt({ object: e });
|
|
6376
|
+
if (!n) {
|
|
6347
6377
|
this._clearGuides();
|
|
6348
6378
|
return;
|
|
6349
6379
|
}
|
|
6350
|
-
const { canvas: i } = this, a = i.getZoom() || 1, r =
|
|
6351
|
-
activeBounds:
|
|
6380
|
+
const { canvas: i } = this, a = i.getZoom() || 1, r = po / a, c = mo({
|
|
6381
|
+
activeBounds: n,
|
|
6352
6382
|
threshold: r,
|
|
6353
6383
|
anchors: this.anchors
|
|
6354
6384
|
}), { deltaX: d, deltaY: l, guides: u } = c;
|
|
@@ -6357,10 +6387,10 @@ class jn {
|
|
|
6357
6387
|
e.set({
|
|
6358
6388
|
left: v + d,
|
|
6359
6389
|
top: M + l
|
|
6360
|
-
}), e.setCoords(),
|
|
6390
|
+
}), e.setCoords(), n = (p = mt({ object: e })) != null ? p : n;
|
|
6361
6391
|
}
|
|
6362
|
-
const g = this.cachedTargetBounds.length ? this.cachedTargetBounds : this._collectTargets({ activeObject: e }).map((v) =>
|
|
6363
|
-
activeBounds:
|
|
6392
|
+
const g = this.cachedTargetBounds.length ? this.cachedTargetBounds : this._collectTargets({ activeObject: e }).map((v) => mt({ object: v })).filter((v) => !!v), f = bo({
|
|
6393
|
+
activeBounds: n,
|
|
6364
6394
|
candidates: g,
|
|
6365
6395
|
threshold: r,
|
|
6366
6396
|
spacingPatterns: this.spacingPatterns
|
|
@@ -6370,7 +6400,7 @@ class jn {
|
|
|
6370
6400
|
e.set({
|
|
6371
6401
|
left: v + f.deltaX,
|
|
6372
6402
|
top: M + f.deltaY
|
|
6373
|
-
}), e.setCoords(),
|
|
6403
|
+
}), e.setCoords(), n = (m = mt({ object: e })) != null ? m : n;
|
|
6374
6404
|
}
|
|
6375
6405
|
this._applyGuides({
|
|
6376
6406
|
guides: u,
|
|
@@ -6397,12 +6427,12 @@ class jn {
|
|
|
6397
6427
|
if (!this.activeGuides.length && !this.activeSpacingGuides.length) return;
|
|
6398
6428
|
const { canvas: t, guideBounds: e } = this, s = t.getSelectionContext();
|
|
6399
6429
|
if (!s) return;
|
|
6400
|
-
const
|
|
6430
|
+
const o = e != null ? e : this._calculateViewportBounds(), { left: n, right: i, top: a, bottom: r } = o, { viewportTransform: c } = t, d = t.getZoom() || 1;
|
|
6401
6431
|
s.save(), Array.isArray(c) && s.transform(...c), s.lineWidth = me / d, s.strokeStyle = ss, s.setLineDash([4, 4]);
|
|
6402
6432
|
for (const l of this.activeGuides)
|
|
6403
|
-
s.beginPath(), l.type === "vertical" ? (s.moveTo(l.position, a), s.lineTo(l.position, r)) : (s.moveTo(
|
|
6433
|
+
s.beginPath(), l.type === "vertical" ? (s.moveTo(l.position, a), s.lineTo(l.position, r)) : (s.moveTo(n, l.position), s.lineTo(i, l.position)), s.stroke();
|
|
6404
6434
|
for (const l of this.activeSpacingGuides)
|
|
6405
|
-
|
|
6435
|
+
wo({
|
|
6406
6436
|
context: s,
|
|
6407
6437
|
guide: l,
|
|
6408
6438
|
zoom: d
|
|
@@ -6438,22 +6468,22 @@ class jn {
|
|
|
6438
6468
|
* Применяет шаг перемещения, округляя координаты объекта к сетке MOVE_SNAP_STEP.
|
|
6439
6469
|
*/
|
|
6440
6470
|
_applyMovementStep({ target: t }) {
|
|
6441
|
-
const { left: e = 0, top: s = 0 } = t,
|
|
6442
|
-
|
|
6443
|
-
left:
|
|
6444
|
-
top:
|
|
6471
|
+
const { left: e = 0, top: s = 0 } = t, o = Math.round(e / $t) * $t, n = Math.round(s / $t) * $t;
|
|
6472
|
+
o === e && n === s || (t.set({
|
|
6473
|
+
left: o,
|
|
6474
|
+
top: n
|
|
6445
6475
|
}), t.setCoords());
|
|
6446
6476
|
}
|
|
6447
6477
|
/**
|
|
6448
6478
|
* Сохраняет линии для прилипания от всех доступных объектов и монтажной области.
|
|
6449
6479
|
*/
|
|
6450
6480
|
_cacheAnchors({ activeObject: t }) {
|
|
6451
|
-
const e = this._collectTargets({ activeObject: t }), s = { vertical: [], horizontal: [] },
|
|
6481
|
+
const e = this._collectTargets({ activeObject: t }), s = { vertical: [], horizontal: [] }, o = [];
|
|
6452
6482
|
for (const a of e) {
|
|
6453
|
-
const r =
|
|
6454
|
-
r && (Qe({ anchors: s, bounds: r }),
|
|
6483
|
+
const r = mt({ object: a });
|
|
6484
|
+
r && (Qe({ anchors: s, bounds: r }), o.push(r));
|
|
6455
6485
|
}
|
|
6456
|
-
const { montageArea:
|
|
6486
|
+
const { montageArea: n } = this.editor, i = mt({ object: n });
|
|
6457
6487
|
if (i) {
|
|
6458
6488
|
Qe({ anchors: s, bounds: i });
|
|
6459
6489
|
const { left: a, right: r, top: c, bottom: d } = i;
|
|
@@ -6465,29 +6495,29 @@ class jn {
|
|
|
6465
6495
|
};
|
|
6466
6496
|
} else
|
|
6467
6497
|
this.guideBounds = this._calculateViewportBounds();
|
|
6468
|
-
this.anchors = s, this.spacingPatterns =
|
|
6498
|
+
this.anchors = s, this.spacingPatterns = So({ bounds: o }), this.cachedTargetBounds = o;
|
|
6469
6499
|
}
|
|
6470
6500
|
/**
|
|
6471
6501
|
* Собирает объекты, подходящие для прилипания, исключая активный объект и запрещённые id.
|
|
6472
6502
|
*/
|
|
6473
6503
|
_collectTargets({ activeObject: t }) {
|
|
6474
|
-
const e =
|
|
6475
|
-
return this.canvas.forEachObject((
|
|
6476
|
-
is({ object:
|
|
6504
|
+
const e = ns({ activeObject: t }), s = [];
|
|
6505
|
+
return this.canvas.forEachObject((o) => {
|
|
6506
|
+
is({ object: o, excluded: e }) || s.push(o);
|
|
6477
6507
|
}), s;
|
|
6478
6508
|
}
|
|
6479
6509
|
/**
|
|
6480
6510
|
* Возвращает границы для рисования направляющих.
|
|
6481
6511
|
*/
|
|
6482
6512
|
_calculateViewportBounds() {
|
|
6483
|
-
const { canvas: t } = this, { viewportTransform: e } = t, s = t.getWidth(),
|
|
6484
|
-
|
|
6513
|
+
const { canvas: t } = this, { viewportTransform: e } = t, s = t.getWidth(), o = t.getHeight(), [
|
|
6514
|
+
n = 1,
|
|
6485
6515
|
,
|
|
6486
6516
|
,
|
|
6487
6517
|
i = 1,
|
|
6488
6518
|
a = 0,
|
|
6489
6519
|
r = 0
|
|
6490
|
-
] = e != null ? e : [], c = (0 - a) /
|
|
6520
|
+
] = e != null ? e : [], c = (0 - a) / n, d = (0 - r) / i, l = (s - a) / n, u = (o - r) / i;
|
|
6491
6521
|
return {
|
|
6492
6522
|
left: c,
|
|
6493
6523
|
right: l,
|
|
@@ -6559,8 +6589,8 @@ class Lt {
|
|
|
6559
6589
|
this._clearGuides();
|
|
6560
6590
|
return;
|
|
6561
6591
|
}
|
|
6562
|
-
const { canvas:
|
|
6563
|
-
if (!
|
|
6592
|
+
const { canvas: o } = this;
|
|
6593
|
+
if (!o.getActiveObjects().length) {
|
|
6564
6594
|
this._clearGuides();
|
|
6565
6595
|
return;
|
|
6566
6596
|
}
|
|
@@ -6597,30 +6627,30 @@ class Lt {
|
|
|
6597
6627
|
this._clearGuides();
|
|
6598
6628
|
return;
|
|
6599
6629
|
}
|
|
6600
|
-
const { canvas: e, editor: s } = this,
|
|
6601
|
-
if (!
|
|
6630
|
+
const { canvas: e, editor: s } = this, o = e.getActiveObject();
|
|
6631
|
+
if (!o) {
|
|
6602
6632
|
this._clearGuides();
|
|
6603
6633
|
return;
|
|
6604
6634
|
}
|
|
6605
|
-
const
|
|
6606
|
-
if (!
|
|
6635
|
+
const n = mt({ object: o });
|
|
6636
|
+
if (!n) {
|
|
6607
6637
|
this._clearGuides();
|
|
6608
6638
|
return;
|
|
6609
6639
|
}
|
|
6610
6640
|
const i = Lt._resolveTarget({
|
|
6611
6641
|
event: t,
|
|
6612
|
-
activeObject:
|
|
6613
|
-
}), { montageArea: a } = s, r = i != null ? i : a, c = r === a, d =
|
|
6642
|
+
activeObject: o
|
|
6643
|
+
}), { montageArea: a } = s, r = i != null ? i : a, c = r === a, d = mt({ object: r });
|
|
6614
6644
|
if (!d) {
|
|
6615
6645
|
this._clearGuides();
|
|
6616
6646
|
return;
|
|
6617
6647
|
}
|
|
6618
|
-
if (c && (
|
|
6648
|
+
if (c && (n.right <= d.left || n.left >= d.right || n.bottom <= d.top || n.top >= d.bottom)) {
|
|
6619
6649
|
this._clearGuides();
|
|
6620
6650
|
return;
|
|
6621
6651
|
}
|
|
6622
6652
|
const u = Lt._buildGuides({
|
|
6623
|
-
activeBounds:
|
|
6653
|
+
activeBounds: n,
|
|
6624
6654
|
targetBounds: d,
|
|
6625
6655
|
targetIsMontageArea: c
|
|
6626
6656
|
});
|
|
@@ -6637,8 +6667,8 @@ class Lt {
|
|
|
6637
6667
|
event: t,
|
|
6638
6668
|
activeObject: e
|
|
6639
6669
|
}) {
|
|
6640
|
-
const { target: s } = t,
|
|
6641
|
-
return s && !is({ object: s, excluded:
|
|
6670
|
+
const { target: s } = t, o = ns({ activeObject: e });
|
|
6671
|
+
return s && !is({ object: s, excluded: o }) ? s : null;
|
|
6642
6672
|
}
|
|
6643
6673
|
/**
|
|
6644
6674
|
* Собирает вертикальные и горизонтальные направляющие расстояний.
|
|
@@ -6648,16 +6678,16 @@ class Lt {
|
|
|
6648
6678
|
targetBounds: e,
|
|
6649
6679
|
targetIsMontageArea: s
|
|
6650
6680
|
}) {
|
|
6651
|
-
const
|
|
6681
|
+
const o = Lt._buildHorizontalGuides({
|
|
6652
6682
|
activeBounds: t,
|
|
6653
6683
|
targetBounds: e,
|
|
6654
6684
|
targetIsMontageArea: s
|
|
6655
|
-
}),
|
|
6685
|
+
}), n = Lt._buildVerticalGuides({
|
|
6656
6686
|
activeBounds: t,
|
|
6657
6687
|
targetBounds: e,
|
|
6658
6688
|
targetIsMontageArea: s
|
|
6659
6689
|
});
|
|
6660
|
-
return [...
|
|
6690
|
+
return [...o, ...n];
|
|
6661
6691
|
}
|
|
6662
6692
|
/**
|
|
6663
6693
|
* Строит горизонтальные направляющие (расстояние по оси X).
|
|
@@ -6667,8 +6697,8 @@ class Lt {
|
|
|
6667
6697
|
targetBounds: e,
|
|
6668
6698
|
targetIsMontageArea: s
|
|
6669
6699
|
}) {
|
|
6670
|
-
const
|
|
6671
|
-
left:
|
|
6700
|
+
const o = [], {
|
|
6701
|
+
left: n = 0,
|
|
6672
6702
|
right: i = 0,
|
|
6673
6703
|
top: a = 0,
|
|
6674
6704
|
bottom: r = 0,
|
|
@@ -6681,30 +6711,30 @@ class Lt {
|
|
|
6681
6711
|
centerY: f = 0
|
|
6682
6712
|
} = e, p = Math.max(a, u), m = Math.min(r, g), M = m >= p ? (p + m) / 2 : (c + f) / 2;
|
|
6683
6713
|
if (d >= i) {
|
|
6684
|
-
if (s) return
|
|
6714
|
+
if (s) return o;
|
|
6685
6715
|
const T = d - i;
|
|
6686
|
-
return T > 0 &&
|
|
6716
|
+
return T > 0 && o.push({
|
|
6687
6717
|
type: "horizontal",
|
|
6688
6718
|
axis: M,
|
|
6689
6719
|
start: i,
|
|
6690
6720
|
end: d,
|
|
6691
6721
|
distance: T
|
|
6692
|
-
}),
|
|
6722
|
+
}), o;
|
|
6693
6723
|
}
|
|
6694
|
-
if (l <=
|
|
6695
|
-
if (s) return
|
|
6696
|
-
const T =
|
|
6697
|
-
return T > 0 &&
|
|
6724
|
+
if (l <= n) {
|
|
6725
|
+
if (s) return o;
|
|
6726
|
+
const T = n - l;
|
|
6727
|
+
return T > 0 && o.push({
|
|
6698
6728
|
type: "horizontal",
|
|
6699
6729
|
axis: M,
|
|
6700
6730
|
start: l,
|
|
6701
|
-
end:
|
|
6731
|
+
end: n,
|
|
6702
6732
|
distance: T
|
|
6703
|
-
}),
|
|
6733
|
+
}), o;
|
|
6704
6734
|
}
|
|
6705
|
-
if (!s) return
|
|
6706
|
-
const S =
|
|
6707
|
-
j > 0 && !S &&
|
|
6735
|
+
if (!s) return o;
|
|
6736
|
+
const S = n < d, y = i > l, b = Math.min(n, d), I = Math.max(n, d), j = I - b;
|
|
6737
|
+
j > 0 && !S && o.push({
|
|
6708
6738
|
type: "horizontal",
|
|
6709
6739
|
axis: M,
|
|
6710
6740
|
start: b,
|
|
@@ -6712,13 +6742,13 @@ class Lt {
|
|
|
6712
6742
|
distance: j
|
|
6713
6743
|
});
|
|
6714
6744
|
const A = Math.min(i, l), C = Math.max(i, l), w = C - A;
|
|
6715
|
-
return w > 0 && !y &&
|
|
6745
|
+
return w > 0 && !y && o.push({
|
|
6716
6746
|
type: "horizontal",
|
|
6717
6747
|
axis: M,
|
|
6718
6748
|
start: A,
|
|
6719
6749
|
end: C,
|
|
6720
6750
|
distance: w
|
|
6721
|
-
}),
|
|
6751
|
+
}), o;
|
|
6722
6752
|
}
|
|
6723
6753
|
/**
|
|
6724
6754
|
* Строит вертикальные направляющие (расстояние по оси Y).
|
|
@@ -6728,8 +6758,8 @@ class Lt {
|
|
|
6728
6758
|
targetBounds: e,
|
|
6729
6759
|
targetIsMontageArea: s
|
|
6730
6760
|
}) {
|
|
6731
|
-
const
|
|
6732
|
-
top:
|
|
6761
|
+
const o = [], {
|
|
6762
|
+
top: n = 0,
|
|
6733
6763
|
bottom: i = 0,
|
|
6734
6764
|
left: a = 0,
|
|
6735
6765
|
right: r = 0,
|
|
@@ -6742,30 +6772,30 @@ class Lt {
|
|
|
6742
6772
|
centerX: f = 0
|
|
6743
6773
|
} = e, p = Math.max(a, u), m = Math.min(r, g), M = m >= p ? (p + m) / 2 : (c + f) / 2;
|
|
6744
6774
|
if (d >= i) {
|
|
6745
|
-
if (s) return
|
|
6775
|
+
if (s) return o;
|
|
6746
6776
|
const T = d - i;
|
|
6747
|
-
return T > 0 &&
|
|
6777
|
+
return T > 0 && o.push({
|
|
6748
6778
|
type: "vertical",
|
|
6749
6779
|
axis: M,
|
|
6750
6780
|
start: i,
|
|
6751
6781
|
end: d,
|
|
6752
6782
|
distance: T
|
|
6753
|
-
}),
|
|
6783
|
+
}), o;
|
|
6754
6784
|
}
|
|
6755
|
-
if (l <=
|
|
6756
|
-
if (s) return
|
|
6757
|
-
const T =
|
|
6758
|
-
return T > 0 &&
|
|
6785
|
+
if (l <= n) {
|
|
6786
|
+
if (s) return o;
|
|
6787
|
+
const T = n - l;
|
|
6788
|
+
return T > 0 && o.push({
|
|
6759
6789
|
type: "vertical",
|
|
6760
6790
|
axis: M,
|
|
6761
6791
|
start: l,
|
|
6762
|
-
end:
|
|
6792
|
+
end: n,
|
|
6763
6793
|
distance: T
|
|
6764
|
-
}),
|
|
6794
|
+
}), o;
|
|
6765
6795
|
}
|
|
6766
|
-
if (!s) return
|
|
6767
|
-
const S =
|
|
6768
|
-
j > 0 && !S &&
|
|
6796
|
+
if (!s) return o;
|
|
6797
|
+
const S = n < d, y = i > l, b = Math.min(n, d), I = Math.max(n, d), j = I - b;
|
|
6798
|
+
j > 0 && !S && o.push({
|
|
6769
6799
|
type: "vertical",
|
|
6770
6800
|
axis: M,
|
|
6771
6801
|
start: b,
|
|
@@ -6773,13 +6803,13 @@ class Lt {
|
|
|
6773
6803
|
distance: j
|
|
6774
6804
|
});
|
|
6775
6805
|
const A = Math.min(i, l), C = Math.max(i, l), w = C - A;
|
|
6776
|
-
return w > 0 && !y &&
|
|
6806
|
+
return w > 0 && !y && o.push({
|
|
6777
6807
|
type: "vertical",
|
|
6778
6808
|
axis: M,
|
|
6779
6809
|
start: A,
|
|
6780
6810
|
end: C,
|
|
6781
6811
|
distance: w
|
|
6782
|
-
}),
|
|
6812
|
+
}), o;
|
|
6783
6813
|
}
|
|
6784
6814
|
/**
|
|
6785
6815
|
* Сбрасывает активные направляющие и инициирует перерисовку.
|
|
@@ -6805,8 +6835,8 @@ class Lt {
|
|
|
6805
6835
|
if (!this.activeGuides.length) return;
|
|
6806
6836
|
const { canvas: t } = this, e = t.getSelectionContext();
|
|
6807
6837
|
if (!e) return;
|
|
6808
|
-
const { viewportTransform: s } = t,
|
|
6809
|
-
e.save(), Array.isArray(s) && e.transform(...s), e.lineWidth = $e /
|
|
6838
|
+
const { viewportTransform: s } = t, o = t.getZoom() || 1, n = this.activeGuides.some((c) => c.type === "vertical"), i = this.activeGuides.some((c) => c.type === "horizontal"), a = n && i && !this.isTargetMontageArea, r = a ? 12 / o : 0;
|
|
6839
|
+
e.save(), Array.isArray(s) && e.transform(...s), e.lineWidth = $e / o, e.strokeStyle = Je, e.setLineDash([]);
|
|
6810
6840
|
for (const c of this.activeGuides) {
|
|
6811
6841
|
const { type: d, axis: l, start: u, end: g, distance: f } = c, p = Math.abs(g - u), m = u <= g ? -1 : 1, v = a ? m * (p / 2 + r) : 0, M = 0;
|
|
6812
6842
|
e.beginPath(), d === "vertical" ? (e.moveTo(l, u), e.lineTo(l, g)) : (e.moveTo(u, l), e.lineTo(g, l)), e.stroke(), ye({
|
|
@@ -6816,7 +6846,7 @@ class Lt {
|
|
|
6816
6846
|
start: u,
|
|
6817
6847
|
end: g,
|
|
6818
6848
|
text: Math.round(f).toString(),
|
|
6819
|
-
zoom:
|
|
6849
|
+
zoom: o,
|
|
6820
6850
|
color: Je,
|
|
6821
6851
|
lineWidth: $e,
|
|
6822
6852
|
offsetAlongAxis: v,
|
|
@@ -6865,8 +6895,8 @@ class Ae {
|
|
|
6865
6895
|
editorContainerWidth: t,
|
|
6866
6896
|
editorContainerHeight: e,
|
|
6867
6897
|
canvasWrapperWidth: s,
|
|
6868
|
-
canvasWrapperHeight:
|
|
6869
|
-
canvasCSSWidth:
|
|
6898
|
+
canvasWrapperHeight: o,
|
|
6899
|
+
canvasCSSWidth: n,
|
|
6870
6900
|
canvasCSSHeight: i,
|
|
6871
6901
|
initialImage: a,
|
|
6872
6902
|
initialStateJSON: r,
|
|
@@ -6874,7 +6904,7 @@ class Ae {
|
|
|
6874
6904
|
showRotationAngle: d,
|
|
6875
6905
|
_onReadyCallback: l
|
|
6876
6906
|
} = this.options;
|
|
6877
|
-
if ($.apply(), this.canvas = new ys(this.containerId, this.options), this.moduleLoader = new Ss(), this.workerManager = new js(), this.errorManager = new Yt({ editor: this }), this.historyManager = new Ys({ editor: this }), this.toolbar = new Ps({ editor: this }), this.transformManager = new qs({ editor: this }), this.zoomManager = new Js({ editor: this }), this.canvasManager = new Qs({ editor: this }), this.imageManager = new ct({ editor: this }), this.layerManager = new ee({ editor: this }), this.shapeManager = new
|
|
6907
|
+
if ($.apply(), this.canvas = new ys(this.containerId, this.options), this.moduleLoader = new Ss(), this.workerManager = new js(), this.errorManager = new Yt({ editor: this }), this.historyManager = new Ys({ editor: this }), this.toolbar = new Ps({ editor: this }), this.transformManager = new qs({ editor: this }), this.zoomManager = new Js({ editor: this }), this.canvasManager = new Qs({ editor: this }), this.imageManager = new ct({ editor: this }), this.layerManager = new ee({ editor: this }), this.shapeManager = new to({ editor: this }), this.interactionBlocker = new $s({ editor: this }), this.backgroundManager = new Ot({ editor: this }), this.clipboardManager = new eo({ editor: this }), this.objectLockManager = new se({ editor: this }), this.groupingManager = new so({ editor: this }), this.selectionManager = new oo({ editor: this }), this.deletionManager = new Se({ editor: this }), this.panConstraintManager = new no({ editor: this }), this.snappingManager = new jo({ editor: this }), this.measurementManager = new Lt({ editor: this }), this.fontManager = new pe((u = this.options.fonts) != null ? u : []), this.textManager = new W({ editor: this }), this.templateManager = new R({ editor: this }), d && (this.angleIndicator = new we({ 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(o), this.canvasManager.setCanvasCSSWidth(n), this.canvasManager.setCanvasCSSHeight(i), this.canvasManager.updateCanvas(), this.zoomManager.calculateAndApplyDefaultZoom(), yield this.fontManager.loadFonts(), a != null && a.source) {
|
|
6878
6908
|
const {
|
|
6879
6909
|
source: g,
|
|
6880
6910
|
scale: f = `image-${c}`,
|
|
@@ -6936,8 +6966,8 @@ class Ae {
|
|
|
6936
6966
|
* Метод для удаления редактора и всех слушателей.
|
|
6937
6967
|
*/
|
|
6938
6968
|
destroy() {
|
|
6939
|
-
var t, e, s,
|
|
6940
|
-
this.listeners.destroy(), (t = this.snappingManager) == null || t.destroy(), (e = this.measurementManager) == null || e.destroy(), this.toolbar.destroy(), (s = this.angleIndicator) == null || s.destroy(), (
|
|
6969
|
+
var t, e, s, o;
|
|
6970
|
+
this.listeners.destroy(), (t = this.snappingManager) == null || t.destroy(), (e = this.measurementManager) == null || e.destroy(), this.toolbar.destroy(), (s = this.angleIndicator) == null || s.destroy(), (o = this.textManager) == null || o.destroy(), this.canvas.dispose(), this.workerManager.worker.terminate(), this.imageManager.revokeBlobUrls(), this.errorManager.cleanBuffer();
|
|
6941
6971
|
}
|
|
6942
6972
|
/**
|
|
6943
6973
|
* Создает паттерн мозаики.
|
|
@@ -6992,7 +7022,7 @@ const O = [
|
|
|
6992
7022
|
"U+A640-A69F",
|
|
6993
7023
|
"U+FE2E-FE2F",
|
|
6994
7024
|
"U+2116"
|
|
6995
|
-
].join(", "),
|
|
7025
|
+
].join(", "), Io = [
|
|
6996
7026
|
{
|
|
6997
7027
|
family: "Arial",
|
|
6998
7028
|
source: 'local("Arial"), local("Liberation Sans"), local("DejaVu Sans")',
|
|
@@ -7782,7 +7812,7 @@ const O = [
|
|
|
7782
7812
|
unicodeRange: O
|
|
7783
7813
|
}
|
|
7784
7814
|
}
|
|
7785
|
-
],
|
|
7815
|
+
], Co = {
|
|
7786
7816
|
/**
|
|
7787
7817
|
* Опции редактора
|
|
7788
7818
|
*/
|
|
@@ -7874,20 +7904,20 @@ const O = [
|
|
|
7874
7904
|
/**
|
|
7875
7905
|
* Список шрифтов, которые будут доступны в редакторе по умолчанию.
|
|
7876
7906
|
*/
|
|
7877
|
-
fonts:
|
|
7907
|
+
fonts: Io
|
|
7878
7908
|
};
|
|
7879
|
-
function
|
|
7880
|
-
const e = B(B({},
|
|
7909
|
+
function Do(h, t = {}) {
|
|
7910
|
+
const e = B(B({}, Co), t), s = document.getElementById(h);
|
|
7881
7911
|
if (!s)
|
|
7882
7912
|
return Promise.reject(new Error(`Контейнер с ID "${h}" не найден.`));
|
|
7883
|
-
const
|
|
7884
|
-
return
|
|
7885
|
-
e._onReadyCallback =
|
|
7886
|
-
const i = new Ae(
|
|
7913
|
+
const o = document.createElement("canvas");
|
|
7914
|
+
return o.id = `${h}-canvas`, s.appendChild(o), e.editorContainer = s, new Promise((n) => {
|
|
7915
|
+
e._onReadyCallback = n;
|
|
7916
|
+
const i = new Ae(o.id, e);
|
|
7887
7917
|
window[h] = i;
|
|
7888
7918
|
});
|
|
7889
7919
|
}
|
|
7890
7920
|
export {
|
|
7891
|
-
|
|
7921
|
+
Do as default
|
|
7892
7922
|
};
|
|
7893
7923
|
//# sourceMappingURL=main.js.map
|