@anu3ev/fabric-image-editor 0.5.0 → 0.5.2
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 +1140 -937
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
1
|
+
var as = Object.defineProperty, rs = Object.defineProperties;
|
|
2
|
+
var cs = Object.getOwnPropertyDescriptors;
|
|
3
|
+
var Wt = Object.getOwnPropertySymbols;
|
|
4
|
+
var Le = Object.prototype.hasOwnProperty, De = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var Oe = (h, t, e) => t in h ? as(h, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[t] = e, k = (h, t) => {
|
|
6
6
|
for (var e in t || (t = {}))
|
|
7
|
-
|
|
8
|
-
if (
|
|
9
|
-
for (var e of
|
|
10
|
-
|
|
11
|
-
return
|
|
12
|
-
},
|
|
13
|
-
var
|
|
7
|
+
Le.call(t, e) && Oe(h, e, t[e]);
|
|
8
|
+
if (Wt)
|
|
9
|
+
for (var e of Wt(t))
|
|
10
|
+
De.call(t, e) && Oe(h, e, t[e]);
|
|
11
|
+
return h;
|
|
12
|
+
}, bt = (h, t) => rs(h, cs(t));
|
|
13
|
+
var ut = (h, t) => {
|
|
14
14
|
var e = {};
|
|
15
|
-
for (var s in
|
|
16
|
-
|
|
17
|
-
if (
|
|
18
|
-
for (var s of
|
|
19
|
-
t.indexOf(s) < 0 &&
|
|
15
|
+
for (var s in h)
|
|
16
|
+
Le.call(h, s) && t.indexOf(s) < 0 && (e[s] = h[s]);
|
|
17
|
+
if (h != null && Wt)
|
|
18
|
+
for (var s of Wt(h))
|
|
19
|
+
t.indexOf(s) < 0 && De.call(h, s) && (e[s] = h[s]);
|
|
20
20
|
return e;
|
|
21
21
|
};
|
|
22
|
-
var _ = (
|
|
22
|
+
var _ = (h, t, e) => new Promise((s, o) => {
|
|
23
23
|
var n = (r) => {
|
|
24
24
|
try {
|
|
25
25
|
a(e.next(r));
|
|
@@ -33,17 +33,17 @@ var _ = (l, t, e) => new Promise((s, o) => {
|
|
|
33
33
|
o(c);
|
|
34
34
|
}
|
|
35
35
|
}, a = (r) => r.done ? s(r.value) : Promise.resolve(r.value).then(n, i);
|
|
36
|
-
a((e = e.apply(
|
|
36
|
+
a((e = e.apply(h, t)).next());
|
|
37
37
|
});
|
|
38
|
-
import { ActiveSelection as
|
|
39
|
-
import { create as
|
|
40
|
-
import
|
|
41
|
-
var
|
|
38
|
+
import { ActiveSelection as B, Textbox as st, util as rt, controlsUtils as Re, InteractiveFabricObject as _e, Point as $, FitContentLayout as Ne, loadSVGFromURL as ds, FabricImage as kt, Gradient as ke, Rect as ls, Circle as hs, Triangle as us, Group as wt, Color as gs, classRegistry as Be, loadSVGFromString as fs, Canvas as ps, Pattern as ms } from "fabric";
|
|
39
|
+
import { create as ys } from "jsondiffpatch";
|
|
40
|
+
import vs from "diff-match-patch";
|
|
41
|
+
var bs = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", Y = function() {
|
|
42
42
|
for (var t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 21, e = "", s = crypto.getRandomValues(new Uint8Array(t |= 0)); t--; )
|
|
43
|
-
e +=
|
|
43
|
+
e += bs[s[t] & 63];
|
|
44
44
|
return e;
|
|
45
45
|
};
|
|
46
|
-
class
|
|
46
|
+
class xt {
|
|
47
47
|
/**
|
|
48
48
|
* Конструктор принимает редактор и опции.
|
|
49
49
|
* @param params
|
|
@@ -61,7 +61,7 @@ class _t {
|
|
|
61
61
|
* @param params.options.adaptCanvasToContainerOnResize — адаптировать канвас к размерам контейнера при изменении размеров окна
|
|
62
62
|
*/
|
|
63
63
|
constructor({ editor: t, options: e = {} }) {
|
|
64
|
-
this.isDragging = !1, this.lastMouseX = 0, this.lastMouseY = 0, this.isUndoRedoKeyPressed = !1, this.isSpacePressed = !1, this.savedSelection = [], this.canvasDragging = !1, this.mouseWheelZooming = !1, this.bringToFrontOnSelection = !1, this.resetObjectFitByDoubleClick = !1, this.copyObjectsByHotkey = !1, this.pasteImageFromClipboard = !1, this.undoRedoByHotKeys = !1, this.selectAllByHotkey = !1, this.deleteObjectsByHotkey = !1, this.adaptCanvasToContainerOnResize = !1, this.editor = t, this.canvas = t.canvas, this.options = e, this.handleContainerResizeBound =
|
|
64
|
+
this.isDragging = !1, this.lastMouseX = 0, this.lastMouseY = 0, this.isUndoRedoKeyPressed = !1, this.isSpacePressed = !1, this.savedSelection = [], this.canvasDragging = !1, this.mouseWheelZooming = !1, this.bringToFrontOnSelection = !1, this.resetObjectFitByDoubleClick = !1, this.copyObjectsByHotkey = !1, this.pasteImageFromClipboard = !1, this.undoRedoByHotKeys = !1, this.selectAllByHotkey = !1, this.deleteObjectsByHotkey = !1, this.adaptCanvasToContainerOnResize = !1, this.editor = t, this.canvas = t.canvas, this.options = e, this.handleContainerResizeBound = xt.debounce(this.handleContainerResize.bind(this), 500), this.handleCopyEventBound = this.handleCopyEvent.bind(this), this.handlePasteEventBound = this.handlePasteEvent.bind(this), this.handleUndoRedoEventBound = this.handleUndoRedoEvent.bind(this), this.handleUndoRedoKeyUpBound = this.handleUndoRedoKeyUp.bind(this), this.handleSelectAllEventBound = this.handleSelectAllEvent.bind(this), this.handleDeleteObjectsEventBound = this.handleDeleteObjectsEvent.bind(this), this.handleSpaceKeyDownBound = this.handleSpaceKeyDown.bind(this), this.handleSpaceKeyUpBound = this.handleSpaceKeyUp.bind(this), this.handleObjectModifiedHistoryBound = xt.debounce(this.handleObjectModifiedHistory.bind(this), 300), this.handleObjectRotatingHistoryBound = xt.debounce(this.handleObjectRotatingHistory.bind(this), 300), this.handleObjectAddedHistoryBound = this.handleObjectAddedHistory.bind(this), this.handleObjectRemovedHistoryBound = this.handleObjectRemovedHistory.bind(this), this.handleOverlayUpdateBound = this.handleOverlayUpdate.bind(this), this.handleBackgroundUpdateBound = this.handleBackgroundUpdate.bind(this), this.handleCanvasDragStartBound = this.handleCanvasDragStart.bind(this), this.handleCanvasDraggingBound = this.handleCanvasDragging.bind(this), this.handleCanvasDragEndBound = this.handleCanvasDragEnd.bind(this), this.handleMouseWheelZoomBound = this.handleMouseWheelZoom.bind(this), this.handleBringToFrontBound = this.handleBringToFront.bind(this), this.handleResetObjectFitBound = this.handleResetObjectFit.bind(this), this.handleLockedSelectionBound = this._filterLockedSelection.bind(this), this.init();
|
|
65
65
|
}
|
|
66
66
|
/**
|
|
67
67
|
* Инициализация всех обработчиков согласно опциям.
|
|
@@ -98,7 +98,7 @@ class _t {
|
|
|
98
98
|
if (o.length === 1)
|
|
99
99
|
this.canvas.setActiveObject(o[0]);
|
|
100
100
|
else {
|
|
101
|
-
const i = new
|
|
101
|
+
const i = new B(o, {
|
|
102
102
|
canvas: this.canvas
|
|
103
103
|
});
|
|
104
104
|
this.canvas.setActiveObject(i);
|
|
@@ -106,7 +106,7 @@ class _t {
|
|
|
106
106
|
this.canvas.requestRenderAll();
|
|
107
107
|
return;
|
|
108
108
|
}
|
|
109
|
-
const n = new
|
|
109
|
+
const n = new B(t, {
|
|
110
110
|
canvas: this.canvas
|
|
111
111
|
});
|
|
112
112
|
this.editor.objectLockManager.lockObject({
|
|
@@ -220,7 +220,7 @@ class _t {
|
|
|
220
220
|
if (o || n) return;
|
|
221
221
|
this.isSpacePressed = !0, t.preventDefault();
|
|
222
222
|
const i = e.getActiveObject() || null;
|
|
223
|
-
i instanceof
|
|
223
|
+
i instanceof B ? this.savedSelection = i.getObjects().slice() : i && (this.savedSelection = [i]), e.discardActiveObject(), e.set({
|
|
224
224
|
selection: !1,
|
|
225
225
|
defaultCursor: "grab"
|
|
226
226
|
}), e.setCursor("grab"), s.canvasManager.getObjects().forEach((a) => {
|
|
@@ -259,7 +259,7 @@ class _t {
|
|
|
259
259
|
e.setActiveObject(t[0]);
|
|
260
260
|
return;
|
|
261
261
|
}
|
|
262
|
-
const o = t.filter((i) => s.canvasManager.getObjects().includes(i)), n = new
|
|
262
|
+
const o = t.filter((i) => s.canvasManager.getObjects().includes(i)), n = new B(o, { canvas: e });
|
|
263
263
|
e.setActiveObject(n);
|
|
264
264
|
}
|
|
265
265
|
// --- Обработчики для событий canvas (Fabric) ---
|
|
@@ -361,11 +361,11 @@ class _t {
|
|
|
361
361
|
if (c != null && c.length && r)
|
|
362
362
|
for (const d of c)
|
|
363
363
|
try {
|
|
364
|
-
const
|
|
365
|
-
if (
|
|
364
|
+
const l = r;
|
|
365
|
+
if (l.matches && l.matches(d) || l.closest && l.closest(d))
|
|
366
366
|
return !0;
|
|
367
|
-
} catch (
|
|
368
|
-
console.warn(`Error checking selection container with selector "${d}":`,
|
|
367
|
+
} catch (l) {
|
|
368
|
+
console.warn(`Error checking selection container with selector "${d}":`, l);
|
|
369
369
|
}
|
|
370
370
|
}
|
|
371
371
|
return !1;
|
|
@@ -391,7 +391,7 @@ class _t {
|
|
|
391
391
|
};
|
|
392
392
|
}
|
|
393
393
|
}
|
|
394
|
-
class
|
|
394
|
+
class Ms {
|
|
395
395
|
/**
|
|
396
396
|
* Класс для динамической загрузки внешних модулей.
|
|
397
397
|
*/
|
|
@@ -409,21 +409,21 @@ class rs {
|
|
|
409
409
|
return this.loaders[t] ? (this.cache.has(t) || this.cache.set(t, this.loaders[t]()), this.cache.get(t)) : Promise.reject(new Error(`Unknown module "${t}"`));
|
|
410
410
|
}
|
|
411
411
|
}
|
|
412
|
-
function
|
|
412
|
+
function ws(h) {
|
|
413
413
|
return new Worker(
|
|
414
414
|
"" + new URL("assets/worker-CN39s7P7.js", import.meta.url).href,
|
|
415
415
|
{
|
|
416
|
-
name:
|
|
416
|
+
name: h == null ? void 0 : h.name
|
|
417
417
|
}
|
|
418
418
|
);
|
|
419
419
|
}
|
|
420
|
-
class
|
|
420
|
+
class Ss {
|
|
421
421
|
/**
|
|
422
422
|
* @param scriptUrl — URL скрипта воркера.
|
|
423
423
|
* По-умолчанию использует DefaultWorker из соседнего файла
|
|
424
424
|
*/
|
|
425
425
|
constructor(t) {
|
|
426
|
-
t ? this.worker = new Worker(t, { type: "module" }) : this.worker = new
|
|
426
|
+
t ? this.worker = new Worker(t, { type: "module" }) : this.worker = new ws(), this._callbacks = /* @__PURE__ */ new Map(), this.worker.onmessage = this._handleMessage.bind(this);
|
|
427
427
|
}
|
|
428
428
|
/**
|
|
429
429
|
* Обработчик сообщений от воркера
|
|
@@ -451,7 +451,7 @@ class ds {
|
|
|
451
451
|
* @returns Promise, который будет выполнен, когда воркер вернет ответ
|
|
452
452
|
*/
|
|
453
453
|
post(t, e, s = []) {
|
|
454
|
-
const o = `${t}:${
|
|
454
|
+
const o = `${t}:${Y(8)}`;
|
|
455
455
|
return new Promise((n, i) => {
|
|
456
456
|
this._callbacks.set(o, { resolve: n, reject: i }), this.worker.postMessage({ action: t, payload: e, requestId: o }, s);
|
|
457
457
|
});
|
|
@@ -463,95 +463,98 @@ class ds {
|
|
|
463
463
|
this.worker.terminate();
|
|
464
464
|
}
|
|
465
465
|
}
|
|
466
|
-
const
|
|
467
|
-
function
|
|
468
|
-
const n =
|
|
469
|
-
|
|
466
|
+
const it = 12, As = 2, ce = 8, de = 20, js = 100, le = 20, he = 8, Is = 100, Xt = 32, pe = 1, Cs = "#2B2D33", me = "#3D8BF4", ye = "#FFFFFF";
|
|
467
|
+
function Zt(h, t, e, s, o) {
|
|
468
|
+
const n = it, i = As;
|
|
469
|
+
h.save(), h.translate(t, e), h.rotate(rt.degreesToRadians(o.angle)), h.fillStyle = ye, h.strokeStyle = me, h.lineWidth = pe, h.beginPath(), h.roundRect(-n / 2, -n / 2, n, n, i), h.fill(), h.stroke(), h.restore();
|
|
470
470
|
}
|
|
471
|
-
function
|
|
472
|
-
const n =
|
|
473
|
-
|
|
471
|
+
function xe(h, t, e, s, o) {
|
|
472
|
+
const n = ce, i = de, a = js;
|
|
473
|
+
h.save(), h.translate(t, e), h.rotate(rt.degreesToRadians(o.angle)), h.fillStyle = ye, h.strokeStyle = me, h.lineWidth = pe, h.beginPath(), h.roundRect(-n / 2, -i / 2, n, i, a), h.fill(), h.stroke(), h.restore();
|
|
474
474
|
}
|
|
475
|
-
function
|
|
476
|
-
const n =
|
|
477
|
-
|
|
475
|
+
function ze(h, t, e, s, o) {
|
|
476
|
+
const n = le, i = he, a = Is;
|
|
477
|
+
h.save(), h.translate(t, e), h.rotate(rt.degreesToRadians(o.angle)), h.fillStyle = ye, h.strokeStyle = me, h.lineWidth = pe, h.beginPath(), h.roundRect(-n / 2, -i / 2, n, i, a), h.fill(), h.stroke(), h.restore();
|
|
478
478
|
}
|
|
479
|
-
const
|
|
480
|
-
|
|
481
|
-
function
|
|
482
|
-
const i =
|
|
483
|
-
|
|
479
|
+
const Ts = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", $e = new Image();
|
|
480
|
+
$e.src = Ts;
|
|
481
|
+
function Es(h, t, e, s, o) {
|
|
482
|
+
const i = Xt / 2;
|
|
483
|
+
h.save(), h.translate(t, e), h.rotate(rt.degreesToRadians(o.angle)), h.fillStyle = Cs, h.beginPath(), h.arc(0, 0, i, 0, 2 * Math.PI), h.fill(), h.drawImage($e, -i / 2, -i / 2, i, i), h.restore();
|
|
484
484
|
}
|
|
485
|
-
const
|
|
485
|
+
const Os = {
|
|
486
486
|
// Угловые точки
|
|
487
487
|
tl: {
|
|
488
|
-
render:
|
|
489
|
-
sizeX:
|
|
490
|
-
sizeY:
|
|
488
|
+
render: Zt,
|
|
489
|
+
sizeX: it,
|
|
490
|
+
sizeY: it,
|
|
491
491
|
offsetX: 0,
|
|
492
492
|
offsetY: 0
|
|
493
493
|
},
|
|
494
494
|
tr: {
|
|
495
|
-
render:
|
|
496
|
-
sizeX:
|
|
497
|
-
sizeY:
|
|
495
|
+
render: Zt,
|
|
496
|
+
sizeX: it,
|
|
497
|
+
sizeY: it,
|
|
498
498
|
offsetX: 0,
|
|
499
499
|
offsetY: 0
|
|
500
500
|
},
|
|
501
501
|
bl: {
|
|
502
|
-
render:
|
|
503
|
-
sizeX:
|
|
504
|
-
sizeY:
|
|
502
|
+
render: Zt,
|
|
503
|
+
sizeX: it,
|
|
504
|
+
sizeY: it,
|
|
505
505
|
offsetX: 0,
|
|
506
506
|
offsetY: 0
|
|
507
507
|
},
|
|
508
508
|
br: {
|
|
509
|
-
render:
|
|
510
|
-
sizeX:
|
|
511
|
-
sizeY:
|
|
509
|
+
render: Zt,
|
|
510
|
+
sizeX: it,
|
|
511
|
+
sizeY: it,
|
|
512
512
|
offsetX: 0,
|
|
513
513
|
offsetY: 0
|
|
514
514
|
},
|
|
515
515
|
// Середина вертикалей
|
|
516
516
|
ml: {
|
|
517
|
-
render:
|
|
518
|
-
sizeX:
|
|
519
|
-
sizeY:
|
|
517
|
+
render: xe,
|
|
518
|
+
sizeX: ce,
|
|
519
|
+
sizeY: de,
|
|
520
520
|
offsetX: 0,
|
|
521
521
|
offsetY: 0
|
|
522
522
|
},
|
|
523
523
|
mr: {
|
|
524
|
-
render:
|
|
525
|
-
sizeX:
|
|
526
|
-
sizeY:
|
|
524
|
+
render: xe,
|
|
525
|
+
sizeX: ce,
|
|
526
|
+
sizeY: de,
|
|
527
527
|
offsetX: 0,
|
|
528
528
|
offsetY: 0
|
|
529
529
|
},
|
|
530
530
|
// Середина горизонталей
|
|
531
531
|
mt: {
|
|
532
|
-
render:
|
|
533
|
-
sizeX:
|
|
534
|
-
sizeY:
|
|
532
|
+
render: ze,
|
|
533
|
+
sizeX: le,
|
|
534
|
+
sizeY: he,
|
|
535
535
|
offsetX: 0,
|
|
536
536
|
offsetY: 0
|
|
537
537
|
},
|
|
538
538
|
mb: {
|
|
539
|
-
render:
|
|
540
|
-
sizeX:
|
|
541
|
-
sizeY:
|
|
539
|
+
render: ze,
|
|
540
|
+
sizeX: le,
|
|
541
|
+
sizeY: he,
|
|
542
542
|
offsetX: 0,
|
|
543
543
|
offsetY: 0
|
|
544
544
|
},
|
|
545
545
|
// Специальный «rotate» контрол
|
|
546
546
|
mtr: {
|
|
547
|
-
render:
|
|
548
|
-
sizeX:
|
|
549
|
-
sizeY:
|
|
547
|
+
render: Es,
|
|
548
|
+
sizeX: Xt,
|
|
549
|
+
sizeY: Xt,
|
|
550
550
|
offsetX: 0,
|
|
551
|
-
offsetY: -
|
|
551
|
+
offsetY: -Xt
|
|
552
552
|
}
|
|
553
553
|
};
|
|
554
|
-
class
|
|
554
|
+
class Q {
|
|
555
|
+
/**
|
|
556
|
+
* Отключает изменение ширины по оси X для заблокированных объектов, сохраняя поведение остального хэндлера.
|
|
557
|
+
*/
|
|
555
558
|
static wrapWidthControl(t) {
|
|
556
559
|
if (!(t != null && t.actionHandler)) return;
|
|
557
560
|
const e = t.actionHandler;
|
|
@@ -560,8 +563,11 @@ class bt {
|
|
|
560
563
|
return !a || a.locked || a.lockScalingX ? !1 : e(s, o, n, i);
|
|
561
564
|
};
|
|
562
565
|
}
|
|
566
|
+
/**
|
|
567
|
+
* Применяет конфигурацию контролов к набору по ключам из DEFAULT_CONTROLS.
|
|
568
|
+
*/
|
|
563
569
|
static applyControlOverrides(t) {
|
|
564
|
-
Object.entries(
|
|
570
|
+
Object.entries(Os).forEach(([e, s]) => {
|
|
565
571
|
const o = t[e];
|
|
566
572
|
o && (Object.assign(o, s), e === "mtr" && (o.cursorStyle = "grab", o.mouseDownHandler = (n, i, a, r) => {
|
|
567
573
|
var d;
|
|
@@ -570,11 +576,114 @@ class bt {
|
|
|
570
576
|
}));
|
|
571
577
|
});
|
|
572
578
|
}
|
|
579
|
+
/**
|
|
580
|
+
* Регистрирует контролы и настройки поведения выделений.
|
|
581
|
+
*/
|
|
573
582
|
static apply() {
|
|
574
|
-
const t =
|
|
575
|
-
|
|
576
|
-
const e =
|
|
577
|
-
|
|
583
|
+
const t = Re.createObjectDefaultControls();
|
|
584
|
+
Q.applyControlOverrides(t), _e.ownDefaults.controls = t;
|
|
585
|
+
const e = Re.createTextboxDefaultControls();
|
|
586
|
+
Q.applyControlOverrides(e), e.mt && (e.mt.visible = !1), e.mb && (e.mb.visible = !1), Q.wrapWidthControl(e.ml), Q.wrapWidthControl(e.mr), st.ownDefaults.controls = e, Q.patchActiveSelectionBounds(), _e.ownDefaults.snapAngle = 1;
|
|
587
|
+
}
|
|
588
|
+
/**
|
|
589
|
+
* Обновляет алгоритм расчёта границ ActiveSelection, чтобы учитывать фон и отступы текстовых объектов.
|
|
590
|
+
*/
|
|
591
|
+
static patchActiveSelectionBounds() {
|
|
592
|
+
const t = B.prototype, e = t._calcBoundsFromObjects;
|
|
593
|
+
t._calcBoundsFromObjects = function(...n) {
|
|
594
|
+
var g, f;
|
|
595
|
+
const i = (f = (g = this.getObjects) == null ? void 0 : g.call(this)) != null ? f : [];
|
|
596
|
+
Q.applyTextSelectionScalingLock({
|
|
597
|
+
selection: this,
|
|
598
|
+
objects: i
|
|
599
|
+
});
|
|
600
|
+
const a = Q.calculateActiveSelectionBounds({
|
|
601
|
+
objects: i
|
|
602
|
+
});
|
|
603
|
+
if (!a)
|
|
604
|
+
return e ? e.apply(this, n) : void 0;
|
|
605
|
+
const { left: r, top: c, width: d, height: l } = a;
|
|
606
|
+
this.set({
|
|
607
|
+
flipX: !1,
|
|
608
|
+
flipY: !1,
|
|
609
|
+
width: d,
|
|
610
|
+
height: l
|
|
611
|
+
});
|
|
612
|
+
const u = new $(r + d / 2, c + l / 2);
|
|
613
|
+
return this.setPositionByOrigin(u, "center", "center"), a;
|
|
614
|
+
};
|
|
615
|
+
const s = t._onAfterObjectsChange;
|
|
616
|
+
t._onAfterObjectsChange = function(n, i) {
|
|
617
|
+
var p, m;
|
|
618
|
+
const a = s ? s.call(this, n, i) : void 0, r = (m = (p = this.getObjects) == null ? void 0 : p.call(this)) != null ? m : [];
|
|
619
|
+
Q.applyTextSelectionScalingLock({
|
|
620
|
+
selection: this,
|
|
621
|
+
objects: r
|
|
622
|
+
});
|
|
623
|
+
const c = Q.calculateActiveSelectionBounds({
|
|
624
|
+
objects: r
|
|
625
|
+
});
|
|
626
|
+
if (!c) return a;
|
|
627
|
+
const { left: d, top: l, width: u, height: g } = c, f = new $(d + u / 2, l + g / 2);
|
|
628
|
+
return this.set({
|
|
629
|
+
width: u,
|
|
630
|
+
height: g
|
|
631
|
+
}), this.setPositionByOrigin(f, "center", "center"), this.setCoords(), a;
|
|
632
|
+
};
|
|
633
|
+
const o = Ne.prototype.calcBoundingBox;
|
|
634
|
+
Ne.prototype.calcBoundingBox = function(n, i) {
|
|
635
|
+
const { target: a, type: r, overrides: c } = i;
|
|
636
|
+
if (r === "imperative" && c)
|
|
637
|
+
return c;
|
|
638
|
+
if (!(a instanceof B))
|
|
639
|
+
return o.call(this, n, i);
|
|
640
|
+
Q.applyTextSelectionScalingLock({
|
|
641
|
+
selection: a,
|
|
642
|
+
objects: n
|
|
643
|
+
});
|
|
644
|
+
const d = Q.calculateActiveSelectionBounds({ objects: n });
|
|
645
|
+
if (!d)
|
|
646
|
+
return o.call(this, n, i);
|
|
647
|
+
const { left: l, top: u, width: g, height: f } = d, p = new $(g, f), m = new $(l + g / 2, u + f / 2);
|
|
648
|
+
return r === "initialization" ? {
|
|
649
|
+
center: m,
|
|
650
|
+
relativeCorrection: new $(0, 0),
|
|
651
|
+
size: p
|
|
652
|
+
} : {
|
|
653
|
+
center: m,
|
|
654
|
+
size: p
|
|
655
|
+
};
|
|
656
|
+
};
|
|
657
|
+
}
|
|
658
|
+
/**
|
|
659
|
+
* Считает габариты выделения на основе реальных bounding-box объектов, включая фон и отступы.
|
|
660
|
+
*/
|
|
661
|
+
static calculateActiveSelectionBounds({
|
|
662
|
+
objects: t
|
|
663
|
+
}) {
|
|
664
|
+
if (!t.length) return null;
|
|
665
|
+
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
|
+
return {
|
|
667
|
+
height: Math.max(...e.map(({ top: a, height: r }) => a + r)) - o,
|
|
668
|
+
left: s,
|
|
669
|
+
top: o,
|
|
670
|
+
width: n - s
|
|
671
|
+
};
|
|
672
|
+
}
|
|
673
|
+
/**
|
|
674
|
+
* Блокирует вертикальное масштабирование для ActiveSelection, если в нём есть текстовые объекты.
|
|
675
|
+
*/
|
|
676
|
+
static applyTextSelectionScalingLock({
|
|
677
|
+
selection: t,
|
|
678
|
+
objects: e
|
|
679
|
+
}) {
|
|
680
|
+
const s = e.some((o) => o instanceof st);
|
|
681
|
+
t.set({
|
|
682
|
+
lockScalingY: s
|
|
683
|
+
}), t.setControlsVisibility({
|
|
684
|
+
mt: !s,
|
|
685
|
+
mb: !s
|
|
686
|
+
});
|
|
578
687
|
}
|
|
579
688
|
}
|
|
580
689
|
const N = class N {
|
|
@@ -611,8 +720,8 @@ const N = class N {
|
|
|
611
720
|
const u = yield new FontFace(o, i, t.descriptors).load();
|
|
612
721
|
e.fonts.add(u), N.registeredFontKeys.add(r);
|
|
613
722
|
return;
|
|
614
|
-
} catch (
|
|
615
|
-
console.warn(`Не удалось загрузить шрифт "${o}" через FontFace API`,
|
|
723
|
+
} catch (l) {
|
|
724
|
+
console.warn(`Не удалось загрузить шрифт "${o}" через FontFace API`, l);
|
|
616
725
|
}
|
|
617
726
|
N.injectFontFace({
|
|
618
727
|
font: t,
|
|
@@ -638,7 +747,7 @@ const N = class N {
|
|
|
638
747
|
"@font-face {",
|
|
639
748
|
` font-family: ${N.formatFontFamilyForCss(i)};`,
|
|
640
749
|
` src: ${e};`,
|
|
641
|
-
...r.map((
|
|
750
|
+
...r.map((l) => ` ${l}`),
|
|
642
751
|
"}"
|
|
643
752
|
];
|
|
644
753
|
a.textContent = c.join(`
|
|
@@ -745,8 +854,8 @@ N.registeredFontKeys = /* @__PURE__ */ new Set(), N.descriptorDefaults = {
|
|
|
745
854
|
featureSettings: "normal",
|
|
746
855
|
display: "auto"
|
|
747
856
|
};
|
|
748
|
-
let
|
|
749
|
-
const
|
|
857
|
+
let ue = N;
|
|
858
|
+
const Ls = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNi44NzUgMi41YS42MjUuNjI1IDAgMCAwLS42MjUuNjI0VjYuMjVIMy4xMjVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2MTBjMCAuMzQ1LjI4LjYyNS42MjUuNjI1aDEwYy4zNDUgMCAuNjI1LS4yOC42MjUtLjYyNXYtMy4xMjZoMy4xMjVjLjM0NSAwIC42MjUtLjI4LjYyNS0uNjI1di0xMGEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTEwWm02Ljg3NSAxMGgyLjVWMy43NUg3LjV2Mi41aDUuNjI1Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NS42MjRabS0xMCAzLjc1VjcuNWg4Ljc1djguNzVIMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", Ds = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi41IDcuNWMwLS42OS41Ni0xLjI1IDEuMjUtMS4yNWgxMi41Yy42OSAwIDEuMjUuNTYgMS4yNSAxLjI1djguNzVjMCAuNjktLjU2IDEuMjUtMS4yNSAxLjI1SDMuNzVjLS42OSAwLTEuMjUtLjU2LTEuMjUtMS4yNVY3LjVabTEzLjc1IDBIMy43NXY4Ljc1aDEyLjVWNy41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMS44NzVhMi4xODggMi4xODggMCAwIDAtMi4xODggMi4xODh2Mi44MTJhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyYTMuNDM3IDMuNDM3IDAgMSAxIDYuODc1IDB2Mi44MTNhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyQTIuMTg4IDIuMTg4IDAgMCAwIDEwIDEuODc2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEwIDEyLjgxM2EuOTM3LjkzNyAwIDEgMCAwLTEuODc1LjkzNy45MzcgMCAwIDAgMCAxLjg3NFoiLz48L3N2Zz4=", Rs = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE2LjI1IDYuMjVINy41VjQuMzc1YTIuNSAyLjUgMCAwIDEgMi41LTIuNWMxLjIgMCAyLjI4MS44NiAyLjUxMiAyYS42MjUuNjI1IDAgMCAwIDEuMjI2LS4yNWMtLjM1NC0xLjczOC0xLjkyNS0zLTMuNzM4LTNhMy43NTQgMy43NTQgMCAwIDAtMy43NSAzLjc1VjYuMjVoLTIuNUExLjI1IDEuMjUgMCAwIDAgMi41IDcuNXY4Ljc1YTEuMjUgMS4yNSAwIDAgMCAxLjI1IDEuMjVoMTIuNWExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjcuNWExLjI1IDEuMjUgMCAwIDAtMS4yNS0xLjI1Wm0wIDEwSDMuNzVWNy41aDEyLjV2OC43NVptLTUuMzEzLTQuMzc1YS45MzcuOTM3IDAgMSAxLTEuODc0IDAgLjkzNy45MzcgMCAwIDEgMS44NzQgMFoiLz48L3N2Zz4K", _s = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIuNSA4LjEyNSAxMCAxMi41bDcuNS00LjM3NUwxMCAzLjc1IDIuNSA4LjEyNVoiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjY4NSAzLjIxYS42MjUuNjI1IDAgMCAxIC42MyAwbDcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOGw3LjUtNC4zNzVaTTMuNzQgOC4xMjUgMTAgMTEuNzc2bDYuMjYtMy42NTFMMTAgNC40NzQgMy43NCA4LjEyNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA5LjQ2YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDExLjc3NmwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA5LjQ2Wm0tMS42NiAyLjQxNUwxMCAxNS41MjZsNi4yNi0zLjY1MS0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNi0xLjk3NSAxLjE1MVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", Ns = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMy4yMWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDguMTI1IDEwIDExLjc3Nmw2LjI2LTMuNjUxTDEwIDQuNDc0IDMuNzQgOC4xMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjcxNCAxMCAxMCAxMi41bDQuMjg2LTIuNSAzLjIxNCAxLjg3NUwxMCAxNi4yNWwtNy41LTQuMzc1TDUuNzE0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDkuNDZhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgMTEuNzc2bDMuOTctMi4zMTZhLjYyNS42MjUgMCAwIDEgLjYzIDBsMy4yMTUgMS44NzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhMNS40IDkuNDZabS0xLjY2IDIuNDE1TDEwIDE1LjUyNmw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2LTEuOTc1IDEuMTUxWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", ks = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTIuNSA2LjI1IDcuNSA0LjM3NSA3LjUtNC4zNzVMMTAgMS44NzUgMi41IDYuMjVaIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMS4zMzVhLjYyNS42MjUgMCAwIDEgLjYzIDBsNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4bDcuNS00LjM3NVpNMy43NCA2LjI1IDEwIDkuOTAxbDYuMjYtMy42NTFMMTAgMi41OTkgMy43NCA2LjI1WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDExLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCAxMy42NTFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgMTEuMzM1Wk0zLjc0IDEzLjc1IDEwIDE3LjQwMWw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTMuNzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgNy41ODVhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgOS45MDFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgNy41ODVaTTMuNzQgMTAgMTAgMTMuNjUxIDE2LjI2IDEwbC0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNkwzLjc0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", Bs = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMS45NiAxMy40MzVhLjYyNS42MjUgMCAwIDEgLjg1NS0uMjI1TDEwIDE3LjQwMWw3LjE4NS00LjE5YS42MjUuNjI1IDAgMCAxIC42MyAxLjA3OWwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEtLjIyNS0uODU1Wk05LjY4NSAxLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDYuMjUgMTAgOS45MDFsNi4yNi0zLjY1MUwxMCAyLjU5OSAzLjc0IDYuMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im01LjcxNCAxMS44NzUgNC4yODYgMi41IDQuMjg2LTIuNUwxNy41IDEzLjc1IDEwIDE4LjEyNSAyLjUgMTMuNzVsMy4yMTQtMS44NzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgMTEuMzM1YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDEzLjY1MWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCAxMS4zMzVaTTMuNzQgMTMuNzUgMTAgMTcuNDAxbDYuMjYtMy42NTEtMS45NzQtMS4xNTEtMy45NzEgMi4zMTZhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTMuOTctMi4zMTZMMy43NCAxMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA3LjU4NWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCA5LjkwMWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA3LjU4NVpNMy43NCAxMCAxMCAxMy42NTEgMTYuMjYgMTBsLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTBaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=", xs = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI0VDNEU0MCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOC4xMjUgMS4yNUExLjg3NSAxLjg3NSAwIDAgMCA2LjI1IDMuMTI1di42MjVIMy4xMjVhLjYyNS42MjUgMCAwIDAgMCAxLjI1aC42MjV2MTEuMjVBMS4yNSAxLjI1IDAgMCAwIDUgMTcuNWgxMGExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjVoLjYyNWEuNjI1LjYyNSAwIDAgMCAwLTEuMjVIMTMuNzV2LS42MjVhMS44NzUgMS44NzUgMCAwIDAtMS44NzUtMS44NzVoLTMuNzVabTQuMzc1IDIuNXYtLjYyNWEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2LjYyNWg1Wk01IDE2LjI1VjVoMTB2MTEuMjVINVpNOC4xMjUgNy41Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NWEuNjI1LjYyNSAwIDEgMS0xLjI1IDB2LTVjMC0uMzQ1LjI4LS42MjUuNjI1LS42MjVabTQuMzc1IDUuNjI1di01YS42MjUuNjI1IDAgMCAwLTEuMjUgMHY1YS42MjUuNjI1IDAgMSAwIDEuMjUgMFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", Bt = {
|
|
750
859
|
style: {
|
|
751
860
|
position: "absolute",
|
|
752
861
|
display: "none",
|
|
@@ -813,54 +922,54 @@ const ys = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMj
|
|
|
813
922
|
],
|
|
814
923
|
offsetTop: 50,
|
|
815
924
|
icons: {
|
|
816
|
-
copyPaste:
|
|
817
|
-
delete:
|
|
818
|
-
lock:
|
|
819
|
-
unlock:
|
|
820
|
-
bringToFront:
|
|
821
|
-
sendToBack:
|
|
822
|
-
bringForward:
|
|
823
|
-
sendBackwards:
|
|
925
|
+
copyPaste: Ls,
|
|
926
|
+
delete: xs,
|
|
927
|
+
lock: Ds,
|
|
928
|
+
unlock: Rs,
|
|
929
|
+
bringToFront: ks,
|
|
930
|
+
sendToBack: Bs,
|
|
931
|
+
bringForward: _s,
|
|
932
|
+
sendBackwards: Ns
|
|
824
933
|
},
|
|
825
934
|
handlers: {
|
|
826
|
-
copyPaste: (
|
|
827
|
-
|
|
935
|
+
copyPaste: (h) => _(null, null, function* () {
|
|
936
|
+
h.clipboardManager.copyPaste();
|
|
828
937
|
}),
|
|
829
|
-
delete: (
|
|
830
|
-
|
|
938
|
+
delete: (h) => {
|
|
939
|
+
h.deletionManager.deleteSelectedObjects();
|
|
831
940
|
},
|
|
832
|
-
lock: (
|
|
833
|
-
|
|
941
|
+
lock: (h) => {
|
|
942
|
+
h.objectLockManager.lockObject();
|
|
834
943
|
},
|
|
835
|
-
unlock: (
|
|
836
|
-
|
|
944
|
+
unlock: (h) => {
|
|
945
|
+
h.objectLockManager.unlockObject();
|
|
837
946
|
},
|
|
838
|
-
bringForward: (
|
|
839
|
-
|
|
947
|
+
bringForward: (h) => {
|
|
948
|
+
h.layerManager.bringForward();
|
|
840
949
|
},
|
|
841
|
-
bringToFront: (
|
|
842
|
-
|
|
950
|
+
bringToFront: (h) => {
|
|
951
|
+
h.layerManager.bringToFront();
|
|
843
952
|
},
|
|
844
|
-
sendToBack: (
|
|
845
|
-
|
|
953
|
+
sendToBack: (h) => {
|
|
954
|
+
h.layerManager.sendToBack();
|
|
846
955
|
},
|
|
847
|
-
sendBackwards: (
|
|
848
|
-
|
|
956
|
+
sendBackwards: (h) => {
|
|
957
|
+
h.layerManager.sendBackwards();
|
|
849
958
|
}
|
|
850
959
|
}
|
|
851
960
|
};
|
|
852
|
-
class
|
|
961
|
+
class zs {
|
|
853
962
|
constructor({ editor: t }) {
|
|
854
963
|
this.currentTarget = null, this.currentLocked = !1, this.isTransforming = !1, this.isTemporarilyHidden = !1, this.editor = t, this.canvas = t.canvas, this.options = t.options, this._initToolbar();
|
|
855
964
|
}
|
|
856
965
|
_initToolbar() {
|
|
857
966
|
if (!this.options.showToolbar) return;
|
|
858
967
|
const t = this.options.toolbar || {};
|
|
859
|
-
this.config =
|
|
860
|
-
style:
|
|
861
|
-
btnStyle:
|
|
862
|
-
icons:
|
|
863
|
-
handlers:
|
|
968
|
+
this.config = bt(k(k({}, Bt), t), {
|
|
969
|
+
style: k(k({}, Bt.style), t.style || {}),
|
|
970
|
+
btnStyle: k(k({}, Bt.btnStyle), t.btnStyle || {}),
|
|
971
|
+
icons: k(k({}, Bt.icons), t.icons || {}),
|
|
972
|
+
handlers: k(k({}, Bt.handlers), t.handlers || {})
|
|
864
973
|
}), this.currentTarget = null, this.currentLocked = !1, this.isTransforming = !1, this.isTemporarilyHidden = !1, this._onMouseDown = this._handleMouseDown.bind(this), this._onObjectMoving = this._startTransform.bind(this), this._onObjectScaling = this._startTransform.bind(this), this._onObjectRotating = this._startTransform.bind(this), this._onMouseUp = this._endTransform.bind(this), this._onObjectModified = this._endTransform.bind(this), this._onSelectionChange = this._updateToolbar.bind(this), this._onSelectionClear = () => {
|
|
865
974
|
this.el.style.display = "none";
|
|
866
975
|
}, this._createDOM(), this._bindEvents();
|
|
@@ -977,7 +1086,7 @@ class Is {
|
|
|
977
1086
|
this.el.removeEventListener("mouseover", this._onBtnOver), this.el.removeEventListener("mouseout", this._onBtnOut), this.canvas.off("mouse:down", this._onMouseDown), this.canvas.off("object:moving", this._onObjectMoving), this.canvas.off("object:scaling", this._onObjectScaling), this.canvas.off("object:rotating", this._onObjectRotating), this.canvas.off("mouse:up", this._onMouseUp), this.canvas.off("object:modified", this._onObjectModified), this.canvas.off("selection:created", this._onSelectionChange), this.canvas.off("selection:updated", this._onSelectionChange), this.canvas.off("after:render", this._onSelectionChange), this.canvas.off("selection:cleared", this._onSelectionClear), this.el.remove();
|
|
978
1087
|
}
|
|
979
1088
|
}
|
|
980
|
-
const
|
|
1089
|
+
const Us = {
|
|
981
1090
|
position: "absolute",
|
|
982
1091
|
display: "none",
|
|
983
1092
|
background: "#2B2D33",
|
|
@@ -991,8 +1100,8 @@ const Cs = {
|
|
|
991
1100
|
"pointer-events": "none",
|
|
992
1101
|
"white-space": "nowrap",
|
|
993
1102
|
"box-shadow": "0 2px 8px rgba(0, 0, 0, 0.2)"
|
|
994
|
-
},
|
|
995
|
-
class
|
|
1103
|
+
}, Ue = 16, Pe = 16, Ps = "fabric-editor-angle-indicator";
|
|
1104
|
+
class ve {
|
|
996
1105
|
constructor({ editor: t }) {
|
|
997
1106
|
this.isActive = !1, this.currentAngle = 0, this.editor = t, this.canvas = t.canvas, this.options = t.options, this._createDOM(), this._bindEvents();
|
|
998
1107
|
}
|
|
@@ -1000,7 +1109,7 @@ class ue {
|
|
|
1000
1109
|
* Создание DOM-элемента индикатора
|
|
1001
1110
|
*/
|
|
1002
1111
|
_createDOM() {
|
|
1003
|
-
this.el = document.createElement("div"), this.el.className =
|
|
1112
|
+
this.el = document.createElement("div"), this.el.className = Ps, Object.entries(Us).forEach(([t, e]) => {
|
|
1004
1113
|
this.el.style.setProperty(t, e);
|
|
1005
1114
|
}), this.canvas.wrapperEl.appendChild(this.el);
|
|
1006
1115
|
}
|
|
@@ -1020,7 +1129,7 @@ class ue {
|
|
|
1020
1129
|
return;
|
|
1021
1130
|
}
|
|
1022
1131
|
const s = e.angle || 0;
|
|
1023
|
-
this.currentAngle =
|
|
1132
|
+
this.currentAngle = ve._normalizeAngle(s), this.el.textContent = `${this.currentAngle}°`, this._positionIndicator(t.e), this.isActive || this._showIndicator();
|
|
1024
1133
|
}
|
|
1025
1134
|
/**
|
|
1026
1135
|
* Обработчик отпускания кнопки мыши
|
|
@@ -1051,9 +1160,9 @@ class ue {
|
|
|
1051
1160
|
*/
|
|
1052
1161
|
_positionIndicator(t) {
|
|
1053
1162
|
const e = this.canvas.wrapperEl.getBoundingClientRect();
|
|
1054
|
-
let s = t.clientX - e.left +
|
|
1163
|
+
let s = t.clientX - e.left + Ue, o = t.clientY - e.top + Pe;
|
|
1055
1164
|
const n = this.el.getBoundingClientRect(), i = n.width, a = n.height;
|
|
1056
|
-
s + i > e.width && (s = t.clientX - e.left - i -
|
|
1165
|
+
s + i > e.width && (s = t.clientX - e.left - i - Ue), o + a > e.height && (o = t.clientY - e.top - a - Pe), this.el.style.left = `${s}px`, this.el.style.top = `${o}px`;
|
|
1057
1166
|
}
|
|
1058
1167
|
/**
|
|
1059
1168
|
* Показать индикатор
|
|
@@ -1084,7 +1193,7 @@ class ue {
|
|
|
1084
1193
|
this.canvas && (this.canvas.off("object:rotating", this._onObjectRotating), this.canvas.off("mouse:up", this._onMouseUp), this.canvas.off("object:modified", this._onObjectModified), this.canvas.off("selection:cleared", this._onSelectionCleared)), (t = this.el) != null && t.parentNode && this.el.parentNode.removeChild(this.el), this.el = null, this.editor = null, this.canvas = null, this.options = null;
|
|
1085
1194
|
}
|
|
1086
1195
|
}
|
|
1087
|
-
const
|
|
1196
|
+
const Je = [
|
|
1088
1197
|
"selectable",
|
|
1089
1198
|
"evented",
|
|
1090
1199
|
"id",
|
|
@@ -1120,7 +1229,7 @@ const Fe = [
|
|
|
1120
1229
|
"radiusBottomRight",
|
|
1121
1230
|
"radiusBottomLeft"
|
|
1122
1231
|
];
|
|
1123
|
-
class
|
|
1232
|
+
class Kt {
|
|
1124
1233
|
constructor({ editor: t }) {
|
|
1125
1234
|
this.editor = t, this.canvas = t.canvas, this._historySuspendCount = 0, this.baseState = null, this.patches = [], this.currentIndex = 0, this.maxHistoryLength = t.options.maxHistoryLength, this.totalChangesCount = 0, this.baseStateChangesCount = 0, this._createDiffPatcher();
|
|
1126
1235
|
}
|
|
@@ -1132,7 +1241,7 @@ class Gt {
|
|
|
1132
1241
|
return this.patches[this.currentIndex - 1] || null;
|
|
1133
1242
|
}
|
|
1134
1243
|
_createDiffPatcher() {
|
|
1135
|
-
this.diffPatcher =
|
|
1244
|
+
this.diffPatcher = ys({
|
|
1136
1245
|
objectHash(t) {
|
|
1137
1246
|
const e = t, s = t, o = s.styles ? JSON.stringify(s.styles) : "";
|
|
1138
1247
|
return [
|
|
@@ -1182,7 +1291,7 @@ class Gt {
|
|
|
1182
1291
|
includeValueOnMove: !1
|
|
1183
1292
|
},
|
|
1184
1293
|
textDiff: {
|
|
1185
|
-
diffMatchPatch:
|
|
1294
|
+
diffMatchPatch: vs,
|
|
1186
1295
|
minLength: 60
|
|
1187
1296
|
}
|
|
1188
1297
|
});
|
|
@@ -1224,7 +1333,7 @@ class Gt {
|
|
|
1224
1333
|
if (console.log("saveState"), this.skipHistory) return;
|
|
1225
1334
|
console.time("saveState");
|
|
1226
1335
|
const t = this._withTemporaryUnlock(
|
|
1227
|
-
() => this.canvas.toDatalessObject([...
|
|
1336
|
+
() => this.canvas.toDatalessObject([...Je])
|
|
1228
1337
|
);
|
|
1229
1338
|
if (console.timeEnd("saveState"), !this.baseState) {
|
|
1230
1339
|
this.baseState = t, this.patches = [], this.currentIndex = 0, console.log("Базовое состояние сохранено.");
|
|
@@ -1235,7 +1344,7 @@ class Gt {
|
|
|
1235
1344
|
console.log("Нет изменений для сохранения.");
|
|
1236
1345
|
return;
|
|
1237
1346
|
}
|
|
1238
|
-
console.log("baseState", this.baseState), this.currentIndex < this.patches.length && this.patches.splice(this.currentIndex), console.log("diff", s), this.totalChangesCount += 1, this.patches.push({ id:
|
|
1347
|
+
console.log("baseState", this.baseState), this.currentIndex < this.patches.length && this.patches.splice(this.currentIndex), console.log("diff", s), this.totalChangesCount += 1, this.patches.push({ id: Y(), diff: s }), this.currentIndex += 1, this.patches.length > this.maxHistoryLength && (this.baseState = this.diffPatcher.patch(this.baseState, this.patches[0].diff), this.patches.shift(), this.currentIndex -= 1, this.baseStateChangesCount += 1), console.log("Состояние сохранено. Текущий индекс истории:", this.currentIndex);
|
|
1239
1348
|
}
|
|
1240
1349
|
/**
|
|
1241
1350
|
* Сериализует customData объектов в строку. Это необходимо чтобы при вызове loadFromJSON fabricjs не пытался обрабатывать свойства внутри customData, как свойства FabricObject, если их названия совпадают с зарезервированными.
|
|
@@ -1272,14 +1381,14 @@ class Gt {
|
|
|
1272
1381
|
if (!t) return;
|
|
1273
1382
|
console.log("loadStateFromFullState fullState", t);
|
|
1274
1383
|
const { canvas: e, canvasManager: s, interactionBlocker: o, backgroundManager: n } = this.editor, { width: i, height: a } = e;
|
|
1275
|
-
o.overlayMask = null,
|
|
1276
|
-
|
|
1384
|
+
o.overlayMask = null, Kt._serializeCustomData(t), yield e.loadFromJSON(t, (l, u) => {
|
|
1385
|
+
Kt._deserializeCustomData(l, u);
|
|
1277
1386
|
});
|
|
1278
|
-
const r = e.getObjects().find((
|
|
1387
|
+
const r = e.getObjects().find((l) => l.id === "montage-area");
|
|
1279
1388
|
r && (this.editor.montageArea = r, (i !== e.getWidth() || a !== e.getHeight()) && s.updateCanvas());
|
|
1280
|
-
const c = e.getObjects().find((
|
|
1389
|
+
const c = e.getObjects().find((l) => l.id === "overlay-mask");
|
|
1281
1390
|
c && (o.overlayMask = c, o.overlayMask.visible = !1);
|
|
1282
|
-
const d = e.getObjects().find((
|
|
1391
|
+
const d = e.getObjects().find((l) => l.id === "background");
|
|
1283
1392
|
d ? (n.backgroundObject = d, n.refresh()) : n.removeBackground({ withoutSave: !0 }), e.renderAll(), e.fire("editor:history-state-loaded", {
|
|
1284
1393
|
fullState: t,
|
|
1285
1394
|
currentIndex: this.currentIndex,
|
|
@@ -1370,8 +1479,8 @@ class Gt {
|
|
|
1370
1479
|
((i = (n = (o = this.canvas).getObjects) == null ? void 0 : n.call(o)) != null ? i : []).forEach((a) => {
|
|
1371
1480
|
const r = typeof a.type == "string" ? a.type.toLowerCase() : "";
|
|
1372
1481
|
if (!(r === "textbox" || r === "i-text" || typeof a.isEditing == "boolean") || a.locked) return;
|
|
1373
|
-
const d = !!a.lockMovementX,
|
|
1374
|
-
!d && !
|
|
1482
|
+
const d = !!a.lockMovementX, l = !!a.lockMovementY;
|
|
1483
|
+
!d && !l || (e.push({
|
|
1375
1484
|
object: a,
|
|
1376
1485
|
lockMovementX: a.lockMovementX,
|
|
1377
1486
|
lockMovementY: a.lockMovementY,
|
|
@@ -1387,7 +1496,7 @@ class Gt {
|
|
|
1387
1496
|
}
|
|
1388
1497
|
}
|
|
1389
1498
|
}
|
|
1390
|
-
const
|
|
1499
|
+
const Ys = 0.1, Fs = 2, Ye = 0.1, Hs = 90, It = 16, Ct = 16, ft = 4096, pt = 4096, Fe = "application/image-editor:", Gt = [
|
|
1391
1500
|
"format",
|
|
1392
1501
|
"uppercase",
|
|
1393
1502
|
"textCaseRaw",
|
|
@@ -1401,8 +1510,8 @@ const Es = 0.1, Os = 2, Oe = 0.1, Ds = 90, St = 16, jt = 16, lt = 4096, ht = 409
|
|
|
1401
1510
|
"radiusTopRight",
|
|
1402
1511
|
"radiusBottomRight",
|
|
1403
1512
|
"radiusBottomLeft"
|
|
1404
|
-
],
|
|
1405
|
-
class
|
|
1513
|
+
], Ws = 50;
|
|
1514
|
+
class at {
|
|
1406
1515
|
constructor({ editor: t }) {
|
|
1407
1516
|
this.editor = t, this.options = t.options, this._createdBlobUrls = [], this.acceptContentTypes = this.editor.options.acceptContentTypes, this.acceptFormats = this.getAllowedFormatsFromContentTypes();
|
|
1408
1517
|
}
|
|
@@ -1429,7 +1538,7 @@ class et {
|
|
|
1429
1538
|
withoutSelection: a = !1
|
|
1430
1539
|
} = t;
|
|
1431
1540
|
if (!e) return null;
|
|
1432
|
-
const { canvas: r, montageArea: c, transformManager: d, historyManager:
|
|
1541
|
+
const { canvas: r, montageArea: c, transformManager: d, historyManager: l, errorManager: u } = this.editor, g = yield this.getContentType(e), f = at.getFormatFromContentType(g), { acceptContentTypes: p, acceptFormats: m } = this;
|
|
1433
1542
|
if (!this.isAllowedContentType(g)) {
|
|
1434
1543
|
const v = `Неверный contentType для изображения: ${g}. Ожидается один из: ${this.acceptContentTypes.join(", ")}.`;
|
|
1435
1544
|
return u.emitError({
|
|
@@ -1449,14 +1558,14 @@ class et {
|
|
|
1449
1558
|
}
|
|
1450
1559
|
}), null;
|
|
1451
1560
|
}
|
|
1452
|
-
|
|
1561
|
+
l.suspendHistory();
|
|
1453
1562
|
try {
|
|
1454
1563
|
let v, b;
|
|
1455
1564
|
if (e instanceof File)
|
|
1456
1565
|
v = URL.createObjectURL(e);
|
|
1457
1566
|
else if (typeof e == "string") {
|
|
1458
|
-
const
|
|
1459
|
-
v = URL.createObjectURL(
|
|
1567
|
+
const A = yield (yield fetch(e, { mode: "cors" })).blob();
|
|
1568
|
+
v = URL.createObjectURL(A);
|
|
1460
1569
|
} else
|
|
1461
1570
|
return u.emitError({
|
|
1462
1571
|
origin: "ImageManager",
|
|
@@ -1475,30 +1584,30 @@ class et {
|
|
|
1475
1584
|
}
|
|
1476
1585
|
}), null;
|
|
1477
1586
|
if (this._createdBlobUrls.push(v), f === "svg") {
|
|
1478
|
-
const
|
|
1479
|
-
b =
|
|
1587
|
+
const S = yield ds(v);
|
|
1588
|
+
b = rt.groupSVGElements(S.objects, S.options);
|
|
1480
1589
|
} else
|
|
1481
|
-
b = yield
|
|
1590
|
+
b = yield kt.fromURL(v, { crossOrigin: "anonymous" });
|
|
1482
1591
|
const { width: I, height: y } = b;
|
|
1483
|
-
if (b instanceof
|
|
1484
|
-
const
|
|
1485
|
-
let
|
|
1486
|
-
if (
|
|
1487
|
-
const
|
|
1488
|
-
this._createdBlobUrls.push(C), b = yield
|
|
1489
|
-
} else if (y <
|
|
1490
|
-
const
|
|
1491
|
-
this._createdBlobUrls.push(C), b = yield
|
|
1592
|
+
if (b instanceof kt) {
|
|
1593
|
+
const S = b.getElement();
|
|
1594
|
+
let A = "";
|
|
1595
|
+
if (S instanceof HTMLImageElement ? A = S.src : S instanceof HTMLCanvasElement && (A = S.toDataURL()), y > pt || I > ft) {
|
|
1596
|
+
const M = yield this.resizeImageToBoundaries(A, "max"), C = URL.createObjectURL(M);
|
|
1597
|
+
this._createdBlobUrls.push(C), b = yield kt.fromURL(C, { crossOrigin: "anonymous" });
|
|
1598
|
+
} else if (y < Ct || I < It) {
|
|
1599
|
+
const M = yield this.resizeImageToBoundaries(A, "min"), C = URL.createObjectURL(M);
|
|
1600
|
+
this._createdBlobUrls.push(C), b = yield kt.fromURL(C, { crossOrigin: "anonymous" });
|
|
1492
1601
|
}
|
|
1493
1602
|
}
|
|
1494
|
-
if (b.set("id", `${b.type}-${
|
|
1603
|
+
if (b.set("id", `${b.type}-${Y()}`), b.set("format", f), s === "scale-montage")
|
|
1495
1604
|
this.editor.canvasManager.scaleMontageAreaToImage({ object: b, withoutSave: !0 });
|
|
1496
1605
|
else {
|
|
1497
|
-
const { width:
|
|
1498
|
-
s === "image-contain" &&
|
|
1606
|
+
const { width: S, height: A } = c, M = this.calculateScaleFactor({ imageObject: b, scaleType: s });
|
|
1607
|
+
s === "image-contain" && M < 1 ? d.fitObject({ object: b, type: "contain", withoutSave: !0 }) : s === "image-cover" && (I > S || y > A) && d.fitObject({ object: b, type: "cover", withoutSave: !0 });
|
|
1499
1608
|
}
|
|
1500
|
-
r.add(b), r.centerObject(b), a || r.setActiveObject(b), r.renderAll(),
|
|
1501
|
-
const
|
|
1609
|
+
r.add(b), r.centerObject(b), a || r.setActiveObject(b), r.renderAll(), l.resumeHistory(), o || l.saveState();
|
|
1610
|
+
const w = {
|
|
1502
1611
|
image: b,
|
|
1503
1612
|
format: f,
|
|
1504
1613
|
contentType: g,
|
|
@@ -1509,7 +1618,7 @@ class et {
|
|
|
1509
1618
|
isBackground: i,
|
|
1510
1619
|
withoutSelection: a
|
|
1511
1620
|
};
|
|
1512
|
-
return r.fire("editor:image-imported",
|
|
1621
|
+
return r.fire("editor:image-imported", w), w;
|
|
1513
1622
|
} catch (v) {
|
|
1514
1623
|
return u.emitError({
|
|
1515
1624
|
origin: "ImageManager",
|
|
@@ -1526,7 +1635,7 @@ class et {
|
|
|
1526
1635
|
isBackground: i,
|
|
1527
1636
|
withoutSelection: a
|
|
1528
1637
|
}
|
|
1529
|
-
}),
|
|
1638
|
+
}), l.resumeHistory(), null;
|
|
1530
1639
|
}
|
|
1531
1640
|
});
|
|
1532
1641
|
}
|
|
@@ -1540,15 +1649,15 @@ class et {
|
|
|
1540
1649
|
*/
|
|
1541
1650
|
resizeImageToBoundaries(t, e = "max") {
|
|
1542
1651
|
return _(this, null, function* () {
|
|
1543
|
-
let s = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${
|
|
1544
|
-
e === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${
|
|
1652
|
+
let s = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${ft}x${pt}`;
|
|
1653
|
+
e === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${It}x${Ct}`);
|
|
1545
1654
|
const o = {
|
|
1546
1655
|
dataURL: t,
|
|
1547
1656
|
sizeType: e,
|
|
1548
|
-
maxWidth:
|
|
1549
|
-
maxHeight:
|
|
1550
|
-
minWidth:
|
|
1551
|
-
minHeight:
|
|
1657
|
+
maxWidth: ft,
|
|
1658
|
+
maxHeight: pt,
|
|
1659
|
+
minWidth: It,
|
|
1660
|
+
minHeight: Ct
|
|
1552
1661
|
};
|
|
1553
1662
|
return this.editor.errorManager.emitWarning({
|
|
1554
1663
|
origin: "ImageManager",
|
|
@@ -1579,10 +1688,10 @@ class et {
|
|
|
1579
1688
|
exportAsBlob: n = !1
|
|
1580
1689
|
} = t, { canvas: i, montageArea: a, workerManager: r, interactionBlocker: c } = this.editor;
|
|
1581
1690
|
try {
|
|
1582
|
-
const d = s === "application/pdf",
|
|
1691
|
+
const d = s === "application/pdf", l = d ? "image/jpg" : s, u = at.getFormatFromContentType(l);
|
|
1583
1692
|
a.setCoords();
|
|
1584
1693
|
const { left: g, top: f, width: p, height: m } = a.getBoundingRect(), v = yield i.clone(["id", "format", "locked"]);
|
|
1585
|
-
v.enableRetinaScaling = !1, ["image/jpg", "image/jpeg"].includes(
|
|
1694
|
+
v.enableRetinaScaling = !1, ["image/jpg", "image/jpeg"].includes(l) && (v.backgroundColor = "#ffffff");
|
|
1586
1695
|
const b = v.getObjects().find((j) => j.id === a.id);
|
|
1587
1696
|
if (b && (b.visible = !1), c != null && c.isBlocked) {
|
|
1588
1697
|
const j = v.getObjects().find((T) => T.id === c.overlayMask.id);
|
|
@@ -1594,7 +1703,7 @@ class et {
|
|
|
1594
1703
|
const j = v.toSVG();
|
|
1595
1704
|
v.dispose();
|
|
1596
1705
|
const x = {
|
|
1597
|
-
image:
|
|
1706
|
+
image: at._exportSVGStringAsFile(j, {
|
|
1598
1707
|
exportAsBase64: o,
|
|
1599
1708
|
exportAsBlob: n,
|
|
1600
1709
|
fileName: e
|
|
@@ -1614,53 +1723,53 @@ class et {
|
|
|
1614
1723
|
const j = {
|
|
1615
1724
|
image: y,
|
|
1616
1725
|
format: u,
|
|
1617
|
-
contentType:
|
|
1726
|
+
contentType: l,
|
|
1618
1727
|
fileName: e
|
|
1619
1728
|
};
|
|
1620
1729
|
return i.fire("editor:canvas-exported", j), j;
|
|
1621
1730
|
}
|
|
1622
|
-
const
|
|
1731
|
+
const w = yield createImageBitmap(y), S = yield r.post(
|
|
1623
1732
|
"toDataURL",
|
|
1624
|
-
{ format: u, quality: 1, bitmap:
|
|
1625
|
-
[
|
|
1733
|
+
{ format: u, quality: 1, bitmap: w },
|
|
1734
|
+
[w]
|
|
1626
1735
|
);
|
|
1627
1736
|
if (d) {
|
|
1628
|
-
const T = p * 0.264583, x = m * 0.264583,
|
|
1737
|
+
const T = p * 0.264583, x = m * 0.264583, Z = (yield this.editor.moduleLoader.loadModule("jspdf")).jsPDF, P = new Z({
|
|
1629
1738
|
orientation: T > x ? "landscape" : "portrait",
|
|
1630
1739
|
unit: "mm",
|
|
1631
1740
|
format: [T, x]
|
|
1632
1741
|
});
|
|
1633
|
-
if (
|
|
1634
|
-
const
|
|
1635
|
-
image:
|
|
1742
|
+
if (P.addImage(String(S), "JPG", 0, 0, T, x), o) {
|
|
1743
|
+
const X = {
|
|
1744
|
+
image: P.output("datauristring"),
|
|
1636
1745
|
format: "pdf",
|
|
1637
1746
|
contentType: "application/pdf",
|
|
1638
1747
|
fileName: e
|
|
1639
1748
|
};
|
|
1640
|
-
return i.fire("editor:canvas-exported",
|
|
1749
|
+
return i.fire("editor:canvas-exported", X), X;
|
|
1641
1750
|
}
|
|
1642
|
-
const
|
|
1643
|
-
image: new File([
|
|
1751
|
+
const F = P.output("blob"), L = {
|
|
1752
|
+
image: new File([F], e, { type: "application/pdf" }),
|
|
1644
1753
|
format: "pdf",
|
|
1645
1754
|
contentType: "application/pdf",
|
|
1646
1755
|
fileName: e
|
|
1647
1756
|
};
|
|
1648
|
-
return i.fire("editor:canvas-exported",
|
|
1757
|
+
return i.fire("editor:canvas-exported", L), L;
|
|
1649
1758
|
}
|
|
1650
1759
|
if (o) {
|
|
1651
1760
|
const j = {
|
|
1652
|
-
image:
|
|
1761
|
+
image: S,
|
|
1653
1762
|
format: u,
|
|
1654
|
-
contentType:
|
|
1763
|
+
contentType: l,
|
|
1655
1764
|
fileName: e
|
|
1656
1765
|
};
|
|
1657
1766
|
return i.fire("editor:canvas-exported", j), j;
|
|
1658
1767
|
}
|
|
1659
|
-
const
|
|
1660
|
-
image: new File([y],
|
|
1768
|
+
const A = u === "svg" && !I ? e.replace(/\.[^/.]+$/, ".png") : e, C = {
|
|
1769
|
+
image: new File([y], A, { type: l }),
|
|
1661
1770
|
format: u,
|
|
1662
|
-
contentType:
|
|
1663
|
-
fileName:
|
|
1771
|
+
contentType: l,
|
|
1772
|
+
fileName: A
|
|
1664
1773
|
};
|
|
1665
1774
|
return i.fire("editor:canvas-exported", C), C;
|
|
1666
1775
|
} catch (d) {
|
|
@@ -1703,9 +1812,9 @@ class et {
|
|
|
1703
1812
|
data: { contentType: o, fileName: s, exportAsBase64: n, exportAsBlob: i }
|
|
1704
1813
|
}), null;
|
|
1705
1814
|
try {
|
|
1706
|
-
const d =
|
|
1815
|
+
const d = at.getFormatFromContentType(o);
|
|
1707
1816
|
if (d === "svg") {
|
|
1708
|
-
const p = c.toSVG(), m =
|
|
1817
|
+
const p = c.toSVG(), m = at._exportSVGStringAsFile(p, {
|
|
1709
1818
|
exportAsBase64: n,
|
|
1710
1819
|
exportAsBlob: i,
|
|
1711
1820
|
fileName: s
|
|
@@ -1718,7 +1827,7 @@ class et {
|
|
|
1718
1827
|
};
|
|
1719
1828
|
return a.fire("editor:object-exported", v), v;
|
|
1720
1829
|
}
|
|
1721
|
-
if (n && c instanceof
|
|
1830
|
+
if (n && c instanceof kt) {
|
|
1722
1831
|
const p = yield createImageBitmap(c.getElement()), m = yield r.post(
|
|
1723
1832
|
"toDataURL",
|
|
1724
1833
|
{
|
|
@@ -1736,10 +1845,10 @@ class et {
|
|
|
1736
1845
|
};
|
|
1737
1846
|
return a.fire("editor:object-exported", v), v;
|
|
1738
1847
|
}
|
|
1739
|
-
const
|
|
1848
|
+
const l = c.toCanvasElement({
|
|
1740
1849
|
enableRetinaScaling: !1
|
|
1741
1850
|
}), u = yield new Promise((p, m) => {
|
|
1742
|
-
|
|
1851
|
+
l.toBlob((v) => {
|
|
1743
1852
|
v ? p(v) : m(new Error("Failed to create Blob from canvas"));
|
|
1744
1853
|
});
|
|
1745
1854
|
});
|
|
@@ -1783,7 +1892,7 @@ class et {
|
|
|
1783
1892
|
* @returns массив допустимых форматов изображений
|
|
1784
1893
|
*/
|
|
1785
1894
|
getAllowedFormatsFromContentTypes() {
|
|
1786
|
-
return this.acceptContentTypes.map((t) =>
|
|
1895
|
+
return this.acceptContentTypes.map((t) => at.getFormatFromContentType(t)).filter((t) => t);
|
|
1787
1896
|
}
|
|
1788
1897
|
/**
|
|
1789
1898
|
* Проверяет, является ли contentType допустимым типом изображения.
|
|
@@ -1836,7 +1945,7 @@ class et {
|
|
|
1836
1945
|
try {
|
|
1837
1946
|
const o = (e = new URL(t).pathname.split(".").pop()) == null ? void 0 : e.toLowerCase(), n = {};
|
|
1838
1947
|
return this.acceptContentTypes.forEach((i) => {
|
|
1839
|
-
const a =
|
|
1948
|
+
const a = at.getFormatFromContentType(i);
|
|
1840
1949
|
a && (n[a] = i);
|
|
1841
1950
|
}), o && n[o] || "application/octet-stream";
|
|
1842
1951
|
} catch (s) {
|
|
@@ -1889,11 +1998,11 @@ class et {
|
|
|
1889
1998
|
return e ? e[1] : "";
|
|
1890
1999
|
}
|
|
1891
2000
|
}
|
|
1892
|
-
const
|
|
1893
|
-
function
|
|
1894
|
-
return ((
|
|
2001
|
+
const Mt = (h, t, e) => Math.max(Math.min(h, e), t), He = (h, t) => h * t, Zs = (h, t) => new $(h / 2, t / 2);
|
|
2002
|
+
function Gs(h) {
|
|
2003
|
+
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";
|
|
1895
2004
|
}
|
|
1896
|
-
class
|
|
2005
|
+
class Vs {
|
|
1897
2006
|
/**
|
|
1898
2007
|
* @param options
|
|
1899
2008
|
* @param options.editor – экземпляр редактора
|
|
@@ -1924,14 +2033,14 @@ class Ns {
|
|
|
1924
2033
|
canvas: n,
|
|
1925
2034
|
montageArea: i,
|
|
1926
2035
|
options: { canvasBackstoreWidth: a }
|
|
1927
|
-
} = this.editor, { width: r, height: c } = i, d =
|
|
2036
|
+
} = this.editor, { width: r, height: c } = i, d = Mt(Number(t), It, ft);
|
|
1928
2037
|
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) {
|
|
1929
|
-
const p = d / r, m =
|
|
2038
|
+
const p = d / r, m = He(c, p);
|
|
1930
2039
|
this.setResolutionHeight(m);
|
|
1931
2040
|
return;
|
|
1932
2041
|
}
|
|
1933
|
-
const { left:
|
|
1934
|
-
n.setViewportTransform([g, 0, 0, g,
|
|
2042
|
+
const { left: l, top: u } = this.getObjectDefaultCoords(i), g = n.getZoom();
|
|
2043
|
+
n.setViewportTransform([g, 0, 0, g, l, u]), this.centerMontageArea(), s || this.editor.historyManager.saveState(), n.fire("editor:resolution-width-changed", {
|
|
1935
2044
|
width: d,
|
|
1936
2045
|
preserveProportional: e,
|
|
1937
2046
|
withoutSave: s,
|
|
@@ -1954,14 +2063,14 @@ class Ns {
|
|
|
1954
2063
|
canvas: n,
|
|
1955
2064
|
montageArea: i,
|
|
1956
2065
|
options: { canvasBackstoreHeight: a }
|
|
1957
|
-
} = this.editor, { width: r, height: c } = i, d =
|
|
2066
|
+
} = this.editor, { width: r, height: c } = i, d = Mt(Number(t), Ct, pt);
|
|
1958
2067
|
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) {
|
|
1959
|
-
const p = d / c, m =
|
|
2068
|
+
const p = d / c, m = He(r, p);
|
|
1960
2069
|
this.setResolutionWidth(m);
|
|
1961
2070
|
return;
|
|
1962
2071
|
}
|
|
1963
|
-
const { left:
|
|
1964
|
-
n.setViewportTransform([g, 0, 0, g,
|
|
2072
|
+
const { left: l, top: u } = this.getObjectDefaultCoords(i), g = n.getZoom();
|
|
2073
|
+
n.setViewportTransform([g, 0, 0, g, l, u]), this.centerMontageArea(), s || this.editor.historyManager.saveState(), n.fire("editor:resolution-height-changed", {
|
|
1965
2074
|
height: d,
|
|
1966
2075
|
preserveProportional: e,
|
|
1967
2076
|
withoutSave: s,
|
|
@@ -1974,7 +2083,7 @@ class Ns {
|
|
|
1974
2083
|
*/
|
|
1975
2084
|
centerMontageArea() {
|
|
1976
2085
|
var r;
|
|
1977
|
-
const { canvas: t, montageArea: e } = this.editor, s = t.getWidth(), o = t.getHeight(), n = t.getZoom(), i =
|
|
2086
|
+
const { canvas: t, montageArea: e } = this.editor, s = t.getWidth(), o = t.getHeight(), n = t.getZoom(), i = Zs(s, o);
|
|
1978
2087
|
e.set({
|
|
1979
2088
|
left: s / 2,
|
|
1980
2089
|
top: o / 2
|
|
@@ -2007,7 +2116,7 @@ class Ns {
|
|
|
2007
2116
|
*/
|
|
2008
2117
|
setCanvasBackstoreWidth(t) {
|
|
2009
2118
|
if (!t || typeof t != "number") return;
|
|
2010
|
-
const e =
|
|
2119
|
+
const e = Mt(t, It, ft);
|
|
2011
2120
|
this.editor.canvas.setDimensions({ width: e }, { backstoreOnly: !0 });
|
|
2012
2121
|
}
|
|
2013
2122
|
/**
|
|
@@ -2016,7 +2125,7 @@ class Ns {
|
|
|
2016
2125
|
*/
|
|
2017
2126
|
setCanvasBackstoreHeight(t) {
|
|
2018
2127
|
if (!t || typeof t != "number") return;
|
|
2019
|
-
const e =
|
|
2128
|
+
const e = Mt(t, Ct, pt);
|
|
2020
2129
|
this.editor.canvas.setDimensions({ height: e }, { backstoreOnly: !0 });
|
|
2021
2130
|
}
|
|
2022
2131
|
/**
|
|
@@ -2025,7 +2134,7 @@ class Ns {
|
|
|
2025
2134
|
* с учётом минимальных и максимальных значений.
|
|
2026
2135
|
*/
|
|
2027
2136
|
adaptCanvasToContainer() {
|
|
2028
|
-
const { canvas: t } = this.editor, e = this.getEditorContainer(), s = e.clientWidth, o = e.clientHeight, n =
|
|
2137
|
+
const { canvas: t } = this.editor, e = this.getEditorContainer(), s = e.clientWidth, o = e.clientHeight, n = Mt(s, It, ft), i = Mt(o, Ct, pt);
|
|
2029
2138
|
t.setDimensions({ width: n, height: i }, { backstoreOnly: !0 });
|
|
2030
2139
|
}
|
|
2031
2140
|
/**
|
|
@@ -2047,22 +2156,22 @@ class Ns {
|
|
|
2047
2156
|
if (a !== 0 || r !== 0) {
|
|
2048
2157
|
const c = t.getActiveObject(), d = [];
|
|
2049
2158
|
if ((c == null ? void 0 : c.type) === "activeselection") {
|
|
2050
|
-
const
|
|
2051
|
-
d.push(...
|
|
2159
|
+
const l = c;
|
|
2160
|
+
d.push(...l.getObjects()), t.discardActiveObject();
|
|
2052
2161
|
}
|
|
2053
|
-
if (t.getObjects().forEach((
|
|
2054
|
-
|
|
2055
|
-
left:
|
|
2056
|
-
top:
|
|
2057
|
-
}),
|
|
2162
|
+
if (t.getObjects().forEach((l) => {
|
|
2163
|
+
l.id === "montage-area" || l.id === "overlay-mask" || l.id === "background" || (l.set({
|
|
2164
|
+
left: l.left + a,
|
|
2165
|
+
top: l.top + r
|
|
2166
|
+
}), l.setCoords());
|
|
2058
2167
|
}), d.length > 0)
|
|
2059
2168
|
if (d.length === 1)
|
|
2060
2169
|
t.setActiveObject(d[0]);
|
|
2061
2170
|
else {
|
|
2062
|
-
const
|
|
2171
|
+
const l = new B(d, {
|
|
2063
2172
|
canvas: t
|
|
2064
2173
|
});
|
|
2065
|
-
t.setActiveObject(
|
|
2174
|
+
t.setActiveObject(l);
|
|
2066
2175
|
}
|
|
2067
2176
|
}
|
|
2068
2177
|
t.renderAll(), t.fire("editor:canvas-updated", {
|
|
@@ -2225,17 +2334,17 @@ class Ns {
|
|
|
2225
2334
|
montageAreaHeight: r
|
|
2226
2335
|
}
|
|
2227
2336
|
} = this.editor, c = t || o.getActiveObject();
|
|
2228
|
-
if (!
|
|
2229
|
-
const { width: d, height:
|
|
2230
|
-
let u = Math.min(d,
|
|
2337
|
+
if (!Gs(c)) return;
|
|
2338
|
+
const { width: d, height: l } = c;
|
|
2339
|
+
let u = Math.min(d, ft), g = Math.min(l, pt);
|
|
2231
2340
|
if (e) {
|
|
2232
2341
|
const {
|
|
2233
2342
|
width: f,
|
|
2234
2343
|
height: p
|
|
2235
|
-
} = n, m = d / f, v =
|
|
2344
|
+
} = n, m = d / f, v = l / p, b = Math.max(m, v);
|
|
2236
2345
|
u = f * b, g = p * b;
|
|
2237
2346
|
}
|
|
2238
|
-
this.setResolutionWidth(u, { withoutSave: !0 }), this.setResolutionHeight(g, { withoutSave: !0 }), this.editor.backgroundManager.backgroundObject && this.editor.backgroundManager.refresh(), (d > a ||
|
|
2347
|
+
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", {
|
|
2239
2348
|
object: c,
|
|
2240
2349
|
width: u,
|
|
2241
2350
|
height: g,
|
|
@@ -2285,7 +2394,7 @@ class Ns {
|
|
|
2285
2394
|
);
|
|
2286
2395
|
}
|
|
2287
2396
|
}
|
|
2288
|
-
class
|
|
2397
|
+
class Xs {
|
|
2289
2398
|
constructor({ editor: t }) {
|
|
2290
2399
|
this.editor = t, this.options = t.options;
|
|
2291
2400
|
}
|
|
@@ -2296,7 +2405,7 @@ class ks {
|
|
|
2296
2405
|
* @param options.withoutSave - Не сохранять состояние
|
|
2297
2406
|
* @fires editor:object-rotated
|
|
2298
2407
|
*/
|
|
2299
|
-
rotate(t =
|
|
2408
|
+
rotate(t = Hs, { withoutSave: e } = {}) {
|
|
2300
2409
|
const { canvas: s, historyManager: o } = this.editor, n = s.getActiveObject();
|
|
2301
2410
|
if (!n) return;
|
|
2302
2411
|
const i = n.angle + t;
|
|
@@ -2346,7 +2455,7 @@ class ks {
|
|
|
2346
2455
|
withoutSave: s
|
|
2347
2456
|
} = {}) {
|
|
2348
2457
|
const { canvas: o, historyManager: n } = this.editor, i = t || o.getActiveObject();
|
|
2349
|
-
i && (i instanceof
|
|
2458
|
+
i && (i instanceof B ? i.getObjects().forEach((a) => {
|
|
2350
2459
|
a.set("opacity", e);
|
|
2351
2460
|
}) : i.set("opacity", e), o.renderAll(), s || n.saveState(), o.fire("editor:object-opacity-changed", {
|
|
2352
2461
|
object: i,
|
|
@@ -2373,12 +2482,12 @@ class ks {
|
|
|
2373
2482
|
} = {}) {
|
|
2374
2483
|
const { canvas: n, historyManager: i } = this.editor, a = t || n.getActiveObject();
|
|
2375
2484
|
if (a) {
|
|
2376
|
-
if (a instanceof
|
|
2485
|
+
if (a instanceof B && !o) {
|
|
2377
2486
|
const r = a.getObjects();
|
|
2378
2487
|
n.discardActiveObject(), r.forEach((d) => {
|
|
2379
2488
|
this._fitSingleObject(d, e);
|
|
2380
2489
|
});
|
|
2381
|
-
const c = new
|
|
2490
|
+
const c = new B(r, { canvas: n });
|
|
2382
2491
|
n.setActiveObject(c);
|
|
2383
2492
|
} else
|
|
2384
2493
|
this._fitSingleObject(a, e);
|
|
@@ -2397,7 +2506,7 @@ class ks {
|
|
|
2397
2506
|
* @private
|
|
2398
2507
|
*/
|
|
2399
2508
|
_fitSingleObject(t, e) {
|
|
2400
|
-
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),
|
|
2509
|
+
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, b = o.height;
|
|
2401
2510
|
let I;
|
|
2402
2511
|
e === "contain" ? I = Math.min(v / p, b / m) : I = Math.max(v / p, b / m), t.set({
|
|
2403
2512
|
scaleX: a * I,
|
|
@@ -2438,11 +2547,11 @@ class ks {
|
|
|
2438
2547
|
}), e)
|
|
2439
2548
|
this.fitObject({ object: c, withoutSave: !0, fitAsOneObject: !0 });
|
|
2440
2549
|
else {
|
|
2441
|
-
const { width:
|
|
2550
|
+
const { width: l, height: u } = n, { width: g, height: f } = c, p = i.calculateScaleFactor({
|
|
2442
2551
|
imageObject: c,
|
|
2443
2552
|
scaleType: r
|
|
2444
2553
|
});
|
|
2445
|
-
r === "contain" && p < 1 || r === "cover" && (g >
|
|
2554
|
+
r === "contain" && p < 1 || r === "cover" && (g > l || f > u) ? this.fitObject({ object: c, withoutSave: !0, fitAsOneObject: !0 }) : c.set({ scaleX: 1, scaleY: 1 });
|
|
2446
2555
|
}
|
|
2447
2556
|
c.set({ flipX: !1, flipY: !1, angle: 0 }), o.centerObject(c), o.renderAll(), a.resumeHistory(), s || a.saveState(), o.fire("editor:object-reset", {
|
|
2448
2557
|
object: c,
|
|
@@ -2451,9 +2560,9 @@ class ks {
|
|
|
2451
2560
|
});
|
|
2452
2561
|
}
|
|
2453
2562
|
}
|
|
2454
|
-
class
|
|
2563
|
+
class Ks {
|
|
2455
2564
|
constructor({ editor: t }) {
|
|
2456
|
-
this.editor = t, this.options = t.options, this.minZoom = this.options.minZoom ||
|
|
2565
|
+
this.editor = t, this.options = t.options, this.minZoom = this.options.minZoom || Ys, this.maxZoom = this.options.maxZoom || Fs, this.defaultZoom = this.options.defaultScale;
|
|
2457
2566
|
}
|
|
2458
2567
|
/**
|
|
2459
2568
|
* Вспомогательный метод для вычисления размеров масштабированной монтажной области
|
|
@@ -2475,7 +2584,7 @@ class Bs {
|
|
|
2475
2584
|
* @private
|
|
2476
2585
|
*/
|
|
2477
2586
|
_getClampedPointerCoordinates(t) {
|
|
2478
|
-
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,
|
|
2587
|
+
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));
|
|
2479
2588
|
return {
|
|
2480
2589
|
x: p,
|
|
2481
2590
|
y: m
|
|
@@ -2510,9 +2619,9 @@ class Bs {
|
|
|
2510
2619
|
* @private
|
|
2511
2620
|
*/
|
|
2512
2621
|
_calculateEmptySpaceRatio(t) {
|
|
2513
|
-
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,
|
|
2622
|
+
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, b = f > d;
|
|
2514
2623
|
if (!(p || m || v || b)) return 0;
|
|
2515
|
-
const y = Math.max(0, a -
|
|
2624
|
+
const y = Math.max(0, a - l), w = Math.max(0, u - r), S = Math.max(0, c - g), A = Math.max(0, f - d), M = Math.max(y, w), C = Math.max(S, A), j = M / n, T = C / i;
|
|
2516
2625
|
return Math.max(j, T);
|
|
2517
2626
|
}
|
|
2518
2627
|
/**
|
|
@@ -2526,11 +2635,11 @@ class Bs {
|
|
|
2526
2635
|
* @private
|
|
2527
2636
|
*/
|
|
2528
2637
|
_calculateSmoothCenteringStep(t, e, s, o, n) {
|
|
2529
|
-
const { canvas: i, montageArea: a } = this.editor, r = i.viewportTransform, c = i.getWidth(), d = i.getHeight(),
|
|
2638
|
+
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;
|
|
2530
2639
|
if (Math.abs(f) / g <= 0.1)
|
|
2531
|
-
return { x:
|
|
2532
|
-
const m = c / 2, v = d / 2, b = a.left, I = a.top, y = m - b * s,
|
|
2533
|
-
return { x, y:
|
|
2640
|
+
return { x: l, y: u };
|
|
2641
|
+
const m = c / 2, v = d / 2, b = a.left, I = a.top, y = m - b * s, w = v - I * s, S = (y - r[4]) / (e - s), A = (w - r[5]) / (e - s), M = S * g, C = A * g, j = M * n, T = C * n, x = Math.abs(j) > Math.abs(l) ? l : j, Z = Math.abs(T) > Math.abs(u) ? u : T;
|
|
2642
|
+
return { x, y: Z };
|
|
2534
2643
|
}
|
|
2535
2644
|
/**
|
|
2536
2645
|
* Применяет плавное центрирование viewport при приближении к defaultZoom.
|
|
@@ -2542,7 +2651,7 @@ class Bs {
|
|
|
2542
2651
|
* @returns true если центрирование было применено
|
|
2543
2652
|
* @private
|
|
2544
2653
|
*/
|
|
2545
|
-
_applyViewportCentering(t, e = !1, s =
|
|
2654
|
+
_applyViewportCentering(t, e = !1, s = Ye) {
|
|
2546
2655
|
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;
|
|
2547
2656
|
if (!(!r || d) && !e)
|
|
2548
2657
|
return !1;
|
|
@@ -2603,10 +2712,10 @@ class Bs {
|
|
|
2603
2712
|
});
|
|
2604
2713
|
return;
|
|
2605
2714
|
}
|
|
2606
|
-
const
|
|
2715
|
+
const l = this._getClampedPointerCoordinates(e);
|
|
2607
2716
|
this.zoom(t, {
|
|
2608
|
-
pointX:
|
|
2609
|
-
pointY:
|
|
2717
|
+
pointX: l.x,
|
|
2718
|
+
pointY: l.y
|
|
2610
2719
|
});
|
|
2611
2720
|
}
|
|
2612
2721
|
/**
|
|
@@ -2617,16 +2726,16 @@ class Bs {
|
|
|
2617
2726
|
* @param options.pointY - Координата Y точки зума
|
|
2618
2727
|
* @fires editor:zoom-changed
|
|
2619
2728
|
*/
|
|
2620
|
-
zoom(t =
|
|
2729
|
+
zoom(t = Ye, e = {}) {
|
|
2621
2730
|
var g, f;
|
|
2622
2731
|
if (!t) return;
|
|
2623
|
-
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,
|
|
2732
|
+
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 $(c, d);
|
|
2624
2733
|
this.editor.montageArea.setCoords(), this.editor.canvas.requestRenderAll();
|
|
2625
2734
|
let u = Number((a + Number(t)).toFixed(3));
|
|
2626
|
-
u > o && (u = o), u < s && (u = s), n.zoomToPoint(
|
|
2735
|
+
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", {
|
|
2627
2736
|
currentZoom: n.getZoom(),
|
|
2628
2737
|
zoom: u,
|
|
2629
|
-
point:
|
|
2738
|
+
point: l
|
|
2630
2739
|
});
|
|
2631
2740
|
}
|
|
2632
2741
|
/**
|
|
@@ -2635,7 +2744,7 @@ class Bs {
|
|
|
2635
2744
|
* @fires editor:zoom-changed
|
|
2636
2745
|
*/
|
|
2637
2746
|
setZoom(t = this.defaultZoom) {
|
|
2638
|
-
const { minZoom: e, maxZoom: s } = this, { canvas: o } = this.editor, n = new
|
|
2747
|
+
const { minZoom: e, maxZoom: s } = this, { canvas: o } = this.editor, n = new $(o.getCenterPoint());
|
|
2639
2748
|
let i = t;
|
|
2640
2749
|
t > s && (i = s), t < e && (i = e), o.zoomToPoint(n, i), o.fire("editor:zoom-changed", {
|
|
2641
2750
|
currentZoom: o.getZoom(),
|
|
@@ -2648,14 +2757,14 @@ class Bs {
|
|
|
2648
2757
|
* @fires editor:zoom-changed
|
|
2649
2758
|
*/
|
|
2650
2759
|
resetZoom() {
|
|
2651
|
-
const { canvas: t } = this.editor, e = new
|
|
2760
|
+
const { canvas: t } = this.editor, e = new $(t.getCenterPoint());
|
|
2652
2761
|
t.zoomToPoint(e, this.defaultZoom), this.editor.canvas.fire("editor:zoom-changed", {
|
|
2653
2762
|
currentZoom: t.getZoom(),
|
|
2654
2763
|
point: e
|
|
2655
2764
|
}), this.editor.panConstraintManager.updateBounds();
|
|
2656
2765
|
}
|
|
2657
2766
|
}
|
|
2658
|
-
class
|
|
2767
|
+
class Qs {
|
|
2659
2768
|
constructor({ editor: t }) {
|
|
2660
2769
|
this.editor = t, this.isBlocked = !1, this.overlayMask = null, this._createOverlay();
|
|
2661
2770
|
}
|
|
@@ -2712,7 +2821,7 @@ class xs {
|
|
|
2712
2821
|
}), t.upperCanvasEl.style.pointerEvents = "", t.lowerCanvasEl.style.pointerEvents = "", this.overlayMask.visible = !1, t.requestRenderAll(), t.fire("editor:enabled"), s.resumeHistory();
|
|
2713
2822
|
}
|
|
2714
2823
|
}
|
|
2715
|
-
class
|
|
2824
|
+
class St {
|
|
2716
2825
|
constructor({ editor: t }) {
|
|
2717
2826
|
this.editor = t, this.backgroundObject = null;
|
|
2718
2827
|
}
|
|
@@ -2737,7 +2846,7 @@ class Mt {
|
|
|
2737
2846
|
}
|
|
2738
2847
|
i.set({
|
|
2739
2848
|
fill: t,
|
|
2740
|
-
backgroundId: `background-${
|
|
2849
|
+
backgroundId: `background-${Y()}`
|
|
2741
2850
|
}), this.editor.canvas.requestRenderAll();
|
|
2742
2851
|
} else
|
|
2743
2852
|
this._removeCurrentBackground(), this._createColorBackground(t);
|
|
@@ -2767,14 +2876,14 @@ class Mt {
|
|
|
2767
2876
|
try {
|
|
2768
2877
|
const { historyManager: n } = this.editor, { backgroundObject: i } = this;
|
|
2769
2878
|
if (n.suspendHistory(), i && i.backgroundType === "gradient") {
|
|
2770
|
-
const a =
|
|
2771
|
-
if (
|
|
2879
|
+
const a = St._createFabricGradient(t);
|
|
2880
|
+
if (St._isGradientEqual(i.fill, a)) {
|
|
2772
2881
|
n.resumeHistory();
|
|
2773
2882
|
return;
|
|
2774
2883
|
}
|
|
2775
2884
|
i.set({
|
|
2776
2885
|
fill: a,
|
|
2777
|
-
backgroundId: `background-${
|
|
2886
|
+
backgroundId: `background-${Y()}`
|
|
2778
2887
|
}), this.editor.canvas.requestRenderAll();
|
|
2779
2888
|
} else
|
|
2780
2889
|
this._removeCurrentBackground(), this._createGradientBackground(t);
|
|
@@ -2921,7 +3030,7 @@ class Mt {
|
|
|
2921
3030
|
hasControls: !1,
|
|
2922
3031
|
id: "background",
|
|
2923
3032
|
backgroundType: "color",
|
|
2924
|
-
backgroundId: `background-${
|
|
3033
|
+
backgroundId: `background-${Y()}`
|
|
2925
3034
|
}, { withoutSelection: !0 }), this.refresh();
|
|
2926
3035
|
}
|
|
2927
3036
|
/**
|
|
@@ -2938,9 +3047,9 @@ class Mt {
|
|
|
2938
3047
|
hasControls: !1,
|
|
2939
3048
|
id: "background",
|
|
2940
3049
|
backgroundType: "gradient",
|
|
2941
|
-
backgroundId: `background-${
|
|
3050
|
+
backgroundId: `background-${Y()}`
|
|
2942
3051
|
}, { withoutSelection: !0 }), this.refresh();
|
|
2943
|
-
const e =
|
|
3052
|
+
const e = St._createFabricGradient(t);
|
|
2944
3053
|
this.backgroundObject.set("fill", e), this.editor.canvas.requestRenderAll();
|
|
2945
3054
|
}
|
|
2946
3055
|
/**
|
|
@@ -2966,7 +3075,7 @@ class Mt {
|
|
|
2966
3075
|
hasControls: !1,
|
|
2967
3076
|
id: "background",
|
|
2968
3077
|
backgroundType: "image",
|
|
2969
|
-
backgroundId: `background-${
|
|
3078
|
+
backgroundId: `background-${Y()}`,
|
|
2970
3079
|
customData: e
|
|
2971
3080
|
}), this._removeCurrentBackground(), this.backgroundObject = s, this.refresh();
|
|
2972
3081
|
});
|
|
@@ -2992,8 +3101,8 @@ class Mt {
|
|
|
2992
3101
|
{ offset: n / 100, color: s }
|
|
2993
3102
|
];
|
|
2994
3103
|
if (t.type === "linear") {
|
|
2995
|
-
const
|
|
2996
|
-
return new
|
|
3104
|
+
const l = t.angle * Math.PI / 180, u = St._angleToCoords(l);
|
|
3105
|
+
return new ke({
|
|
2997
3106
|
type: "linear",
|
|
2998
3107
|
gradientUnits: "percentage",
|
|
2999
3108
|
coords: u,
|
|
@@ -3012,7 +3121,7 @@ class Mt {
|
|
|
3012
3121
|
r1: 0,
|
|
3013
3122
|
r2: c / 100
|
|
3014
3123
|
};
|
|
3015
|
-
return new
|
|
3124
|
+
return new ke({
|
|
3016
3125
|
type: "radial",
|
|
3017
3126
|
gradientUnits: "percentage",
|
|
3018
3127
|
coords: d,
|
|
@@ -3047,7 +3156,7 @@ class Mt {
|
|
|
3047
3156
|
}) ? !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;
|
|
3048
3157
|
}
|
|
3049
3158
|
}
|
|
3050
|
-
class
|
|
3159
|
+
class Qt {
|
|
3051
3160
|
constructor({ editor: t }) {
|
|
3052
3161
|
this.editor = t;
|
|
3053
3162
|
}
|
|
@@ -3062,7 +3171,7 @@ class Vt {
|
|
|
3062
3171
|
const { canvas: s, historyManager: o } = this.editor;
|
|
3063
3172
|
o.suspendHistory();
|
|
3064
3173
|
const n = t || s.getActiveObject();
|
|
3065
|
-
n && (n instanceof
|
|
3174
|
+
n && (n instanceof B ? n.getObjects().forEach((i) => {
|
|
3066
3175
|
s.bringObjectToFront(i);
|
|
3067
3176
|
}) : s.bringObjectToFront(n), s.renderAll(), o.resumeHistory(), e || o.saveState(), s.fire("editor:object-bring-to-front", {
|
|
3068
3177
|
object: n,
|
|
@@ -3080,7 +3189,7 @@ class Vt {
|
|
|
3080
3189
|
const { canvas: s, historyManager: o } = this.editor;
|
|
3081
3190
|
o.suspendHistory();
|
|
3082
3191
|
const n = t || s.getActiveObject();
|
|
3083
|
-
n && (n instanceof
|
|
3192
|
+
n && (n instanceof B ? Qt._moveSelectionForward(s, n) : s.bringObjectForward(n), s.renderAll(), o.resumeHistory(), e || o.saveState(), s.fire("editor:object-bring-forward", {
|
|
3084
3193
|
object: n,
|
|
3085
3194
|
withoutSave: e
|
|
3086
3195
|
}));
|
|
@@ -3103,7 +3212,7 @@ class Vt {
|
|
|
3103
3212
|
n.suspendHistory();
|
|
3104
3213
|
const r = t || s.getActiveObject();
|
|
3105
3214
|
if (r) {
|
|
3106
|
-
if (r instanceof
|
|
3215
|
+
if (r instanceof B) {
|
|
3107
3216
|
const c = r.getObjects();
|
|
3108
3217
|
for (let d = c.length - 1; d >= 0; d -= 1)
|
|
3109
3218
|
s.sendObjectToBack(c[d]);
|
|
@@ -3131,7 +3240,7 @@ class Vt {
|
|
|
3131
3240
|
} = this.editor;
|
|
3132
3241
|
n.suspendHistory();
|
|
3133
3242
|
const r = t || s.getActiveObject();
|
|
3134
|
-
r && (r instanceof
|
|
3243
|
+
r && (r instanceof B ? Qt._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", {
|
|
3135
3244
|
object: r,
|
|
3136
3245
|
withoutSave: e
|
|
3137
3246
|
}));
|
|
@@ -3175,7 +3284,7 @@ class Vt {
|
|
|
3175
3284
|
});
|
|
3176
3285
|
}
|
|
3177
3286
|
}
|
|
3178
|
-
class
|
|
3287
|
+
class qs {
|
|
3179
3288
|
/**
|
|
3180
3289
|
* Менеджер фигур для редактора.
|
|
3181
3290
|
* @param options - Опции и настройки менеджера фигур.
|
|
@@ -3200,14 +3309,14 @@ class Ps {
|
|
|
3200
3309
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
3201
3310
|
*/
|
|
3202
3311
|
addRectangle(d = {}, { withoutSelection: r, withoutAdding: c } = {}) {
|
|
3203
|
-
var
|
|
3204
|
-
id: t = `rect-${
|
|
3312
|
+
var l = d, {
|
|
3313
|
+
id: t = `rect-${Y()}`,
|
|
3205
3314
|
left: e,
|
|
3206
3315
|
top: s,
|
|
3207
3316
|
width: o = 100,
|
|
3208
3317
|
height: n = 100,
|
|
3209
3318
|
fill: i = "blue"
|
|
3210
|
-
} =
|
|
3319
|
+
} = l, a = ut(l, [
|
|
3211
3320
|
"id",
|
|
3212
3321
|
"left",
|
|
3213
3322
|
"top",
|
|
@@ -3215,7 +3324,7 @@ class Ps {
|
|
|
3215
3324
|
"height",
|
|
3216
3325
|
"fill"
|
|
3217
3326
|
]);
|
|
3218
|
-
const { canvas: u } = this.editor, g = new
|
|
3327
|
+
const { canvas: u } = this.editor, g = new ls(k({
|
|
3219
3328
|
id: t,
|
|
3220
3329
|
left: e,
|
|
3221
3330
|
top: s,
|
|
@@ -3243,26 +3352,26 @@ class Ps {
|
|
|
3243
3352
|
*/
|
|
3244
3353
|
addCircle(c = {}, { withoutSelection: a, withoutAdding: r } = {}) {
|
|
3245
3354
|
var d = c, {
|
|
3246
|
-
id: t = `circle-${
|
|
3355
|
+
id: t = `circle-${Y()}`,
|
|
3247
3356
|
left: e,
|
|
3248
3357
|
top: s,
|
|
3249
3358
|
radius: o = 50,
|
|
3250
3359
|
fill: n = "green"
|
|
3251
|
-
} = d, i =
|
|
3360
|
+
} = d, i = ut(d, [
|
|
3252
3361
|
"id",
|
|
3253
3362
|
"left",
|
|
3254
3363
|
"top",
|
|
3255
3364
|
"radius",
|
|
3256
3365
|
"fill"
|
|
3257
3366
|
]);
|
|
3258
|
-
const { canvas:
|
|
3367
|
+
const { canvas: l } = this.editor, u = new hs(k({
|
|
3259
3368
|
id: t,
|
|
3260
3369
|
left: e,
|
|
3261
3370
|
top: s,
|
|
3262
3371
|
fill: n,
|
|
3263
3372
|
radius: o
|
|
3264
3373
|
}, i));
|
|
3265
|
-
return !e && !s &&
|
|
3374
|
+
return !e && !s && l.centerObject(u), r || (l.add(u), a || l.setActiveObject(u), l.renderAll()), u;
|
|
3266
3375
|
}
|
|
3267
3376
|
/**
|
|
3268
3377
|
* Добавление треугольника
|
|
@@ -3282,14 +3391,14 @@ class Ps {
|
|
|
3282
3391
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
3283
3392
|
*/
|
|
3284
3393
|
addTriangle(d = {}, { withoutSelection: r, withoutAdding: c } = {}) {
|
|
3285
|
-
var
|
|
3286
|
-
id: t = `triangle-${
|
|
3394
|
+
var l = d, {
|
|
3395
|
+
id: t = `triangle-${Y()}`,
|
|
3287
3396
|
left: e,
|
|
3288
3397
|
top: s,
|
|
3289
3398
|
width: o = 100,
|
|
3290
3399
|
height: n = 100,
|
|
3291
3400
|
fill: i = "yellow"
|
|
3292
|
-
} =
|
|
3401
|
+
} = l, a = ut(l, [
|
|
3293
3402
|
"id",
|
|
3294
3403
|
"left",
|
|
3295
3404
|
"top",
|
|
@@ -3297,7 +3406,7 @@ class Ps {
|
|
|
3297
3406
|
"height",
|
|
3298
3407
|
"fill"
|
|
3299
3408
|
]);
|
|
3300
|
-
const { canvas: u } = this.editor, g = new
|
|
3409
|
+
const { canvas: u } = this.editor, g = new us(k({
|
|
3301
3410
|
id: t,
|
|
3302
3411
|
left: e,
|
|
3303
3412
|
top: s,
|
|
@@ -3308,7 +3417,7 @@ class Ps {
|
|
|
3308
3417
|
return !e && !s && u.centerObject(g), c || (u.add(g), r || u.setActiveObject(g), u.renderAll()), g;
|
|
3309
3418
|
}
|
|
3310
3419
|
}
|
|
3311
|
-
class
|
|
3420
|
+
class $s {
|
|
3312
3421
|
/**
|
|
3313
3422
|
* @param options
|
|
3314
3423
|
* @param options.editor - экземпляр редактора с доступом к canvas
|
|
@@ -3339,7 +3448,7 @@ class zs {
|
|
|
3339
3448
|
return _(this, null, function* () {
|
|
3340
3449
|
const { canvas: e, errorManager: s } = this.editor;
|
|
3341
3450
|
try {
|
|
3342
|
-
const o = yield t.clone(
|
|
3451
|
+
const o = yield t.clone(Gt);
|
|
3343
3452
|
this.clipboard = o, e.fire("editor:object-copied", { object: o });
|
|
3344
3453
|
} catch (o) {
|
|
3345
3454
|
s.emitError({
|
|
@@ -3366,7 +3475,7 @@ class zs {
|
|
|
3366
3475
|
message: "navigator.clipboard не поддерживается в этом браузере или отсутствует HTTPS-соединение."
|
|
3367
3476
|
}), !1;
|
|
3368
3477
|
try {
|
|
3369
|
-
const s = t.toObject(
|
|
3478
|
+
const s = t.toObject(Gt), o = JSON.stringify(s);
|
|
3370
3479
|
return t.type === "image" ? this._copyImageToClipboard(t, o) : this._copyTextToClipboard(o);
|
|
3371
3480
|
} catch (s) {
|
|
3372
3481
|
return e.emitError({
|
|
@@ -3386,8 +3495,8 @@ class zs {
|
|
|
3386
3495
|
return _(this, null, function* () {
|
|
3387
3496
|
try {
|
|
3388
3497
|
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);
|
|
3389
|
-
for (let
|
|
3390
|
-
r[
|
|
3498
|
+
for (let l = 0; l < a.length; l += 1)
|
|
3499
|
+
r[l] = a.charCodeAt(l);
|
|
3391
3500
|
const c = new Blob([r.buffer], { type: n }), d = new ClipboardItem({ [n]: c });
|
|
3392
3501
|
return yield navigator.clipboard.write([d]), console.info("Image copied to clipboard successfully"), !0;
|
|
3393
3502
|
} catch (s) {
|
|
@@ -3407,7 +3516,7 @@ class zs {
|
|
|
3407
3516
|
_copyTextToClipboard(t) {
|
|
3408
3517
|
return _(this, null, function* () {
|
|
3409
3518
|
try {
|
|
3410
|
-
const e = `${
|
|
3519
|
+
const e = `${Fe}${t}`;
|
|
3411
3520
|
return yield navigator.clipboard.writeText(e), console.info("Text copied to clipboard successfully"), !0;
|
|
3412
3521
|
} catch (e) {
|
|
3413
3522
|
const { errorManager: s } = this.editor;
|
|
@@ -3427,7 +3536,7 @@ class zs {
|
|
|
3427
3536
|
*/
|
|
3428
3537
|
_addClonedObjectToCanvas(t) {
|
|
3429
3538
|
const { canvas: e, historyManager: s } = this.editor;
|
|
3430
|
-
if (e.discardActiveObject(), t instanceof
|
|
3539
|
+
if (e.discardActiveObject(), t instanceof B) {
|
|
3431
3540
|
s.suspendHistory(), t.canvas = e, t.forEachObject((o) => {
|
|
3432
3541
|
e.add(o);
|
|
3433
3542
|
}), e.setActiveObject(t), e.requestRenderAll(), s.resumeHistory(), s.saveState();
|
|
@@ -3460,14 +3569,14 @@ class zs {
|
|
|
3460
3569
|
const { canvas: e } = this.editor, s = t || e.getActiveObject();
|
|
3461
3570
|
if (!s || s.locked) return !1;
|
|
3462
3571
|
try {
|
|
3463
|
-
const o = yield s.clone(
|
|
3464
|
-
return o instanceof
|
|
3572
|
+
const o = yield s.clone(Gt);
|
|
3573
|
+
return o instanceof B && o.forEachObject((n) => {
|
|
3465
3574
|
n.set({
|
|
3466
|
-
id: `${n.type}-${
|
|
3575
|
+
id: `${n.type}-${Y()}`,
|
|
3467
3576
|
evented: !0
|
|
3468
3577
|
});
|
|
3469
3578
|
}), o.set({
|
|
3470
|
-
id: `${o.type}-${
|
|
3579
|
+
id: `${o.type}-${Y()}`,
|
|
3471
3580
|
left: o.left + 10,
|
|
3472
3581
|
top: o.top + 10,
|
|
3473
3582
|
evented: !0
|
|
@@ -3498,7 +3607,7 @@ class zs {
|
|
|
3498
3607
|
return;
|
|
3499
3608
|
}
|
|
3500
3609
|
const s = t.getData("text/plain");
|
|
3501
|
-
if (s && s.startsWith(
|
|
3610
|
+
if (s && s.startsWith(Fe)) {
|
|
3502
3611
|
this.paste();
|
|
3503
3612
|
return;
|
|
3504
3613
|
}
|
|
@@ -3506,13 +3615,13 @@ class zs {
|
|
|
3506
3615
|
if (n.type !== "text/html" && i) {
|
|
3507
3616
|
const c = new FileReader();
|
|
3508
3617
|
c.onload = (d) => {
|
|
3509
|
-
d.target && this._handleImageImport(d.target.result).catch((
|
|
3618
|
+
d.target && this._handleImageImport(d.target.result).catch((l) => {
|
|
3510
3619
|
this.editor.errorManager.emitError({
|
|
3511
3620
|
origin: "ClipboardManager",
|
|
3512
3621
|
method: "handlePasteEvent",
|
|
3513
3622
|
code: "PASTE_IMAGE_FAILED",
|
|
3514
3623
|
message: "Ошибка вставки изображения из буфера обмена",
|
|
3515
|
-
data:
|
|
3624
|
+
data: l
|
|
3516
3625
|
});
|
|
3517
3626
|
});
|
|
3518
3627
|
}, c.readAsDataURL(i);
|
|
@@ -3520,9 +3629,9 @@ class zs {
|
|
|
3520
3629
|
}
|
|
3521
3630
|
const a = t.getData("text/html");
|
|
3522
3631
|
if (a) {
|
|
3523
|
-
const
|
|
3524
|
-
if (
|
|
3525
|
-
this._handleImageImport(
|
|
3632
|
+
const l = new DOMParser().parseFromString(a, "text/html").querySelector("img");
|
|
3633
|
+
if (l != null && l.src) {
|
|
3634
|
+
this._handleImageImport(l.src).catch((u) => {
|
|
3526
3635
|
this.editor.errorManager.emitError({
|
|
3527
3636
|
origin: "ClipboardManager",
|
|
3528
3637
|
method: "handlePasteEvent",
|
|
@@ -3546,14 +3655,14 @@ class zs {
|
|
|
3546
3655
|
const { canvas: t } = this.editor;
|
|
3547
3656
|
if (!this.clipboard) return !1;
|
|
3548
3657
|
try {
|
|
3549
|
-
const e = yield this.clipboard.clone(
|
|
3550
|
-
return t.discardActiveObject(), e instanceof
|
|
3658
|
+
const e = yield this.clipboard.clone(Gt);
|
|
3659
|
+
return t.discardActiveObject(), e instanceof B && e.forEachObject((s) => {
|
|
3551
3660
|
s.set({
|
|
3552
|
-
id: `${s.type}-${
|
|
3661
|
+
id: `${s.type}-${Y()}`,
|
|
3553
3662
|
evented: !0
|
|
3554
3663
|
});
|
|
3555
3664
|
}), e.set({
|
|
3556
|
-
id: `${e.type}-${
|
|
3665
|
+
id: `${e.type}-${Y()}`,
|
|
3557
3666
|
left: e.left + 10,
|
|
3558
3667
|
top: e.top + 10,
|
|
3559
3668
|
evented: !0
|
|
@@ -3571,7 +3680,7 @@ class zs {
|
|
|
3571
3680
|
});
|
|
3572
3681
|
}
|
|
3573
3682
|
}
|
|
3574
|
-
class
|
|
3683
|
+
class qt {
|
|
3575
3684
|
constructor({ editor: t }) {
|
|
3576
3685
|
this.editor = t;
|
|
3577
3686
|
}
|
|
@@ -3597,7 +3706,7 @@ class Xt {
|
|
|
3597
3706
|
editable: !1,
|
|
3598
3707
|
locked: !0
|
|
3599
3708
|
};
|
|
3600
|
-
i.set(a), !e &&
|
|
3709
|
+
i.set(a), !e && qt._isGroupOrSelection(i) && i.getObjects().forEach((c) => {
|
|
3601
3710
|
c.set(a);
|
|
3602
3711
|
}), o.renderAll(), s || n.saveState(), o.fire("editor:object-locked", {
|
|
3603
3712
|
object: i,
|
|
@@ -3626,7 +3735,7 @@ class Xt {
|
|
|
3626
3735
|
editable: !0,
|
|
3627
3736
|
locked: !1
|
|
3628
3737
|
};
|
|
3629
|
-
n.set(i),
|
|
3738
|
+
n.set(i), qt._isGroupOrSelection(n) && n.getObjects().forEach((a) => {
|
|
3630
3739
|
a.set(i);
|
|
3631
3740
|
}), s.renderAll(), e || o.saveState(), s.fire("editor:object-unlocked", {
|
|
3632
3741
|
object: n,
|
|
@@ -3634,10 +3743,10 @@ class Xt {
|
|
|
3634
3743
|
});
|
|
3635
3744
|
}
|
|
3636
3745
|
static _isGroupOrSelection(t) {
|
|
3637
|
-
return t instanceof
|
|
3746
|
+
return t instanceof B || t instanceof wt;
|
|
3638
3747
|
}
|
|
3639
3748
|
}
|
|
3640
|
-
class
|
|
3749
|
+
class Js {
|
|
3641
3750
|
constructor({ editor: t }) {
|
|
3642
3751
|
this.editor = t;
|
|
3643
3752
|
}
|
|
@@ -3649,7 +3758,7 @@ class Us {
|
|
|
3649
3758
|
if (Array.isArray(t))
|
|
3650
3759
|
return t.length > 0 ? t : null;
|
|
3651
3760
|
const e = t || this.editor.canvas.getActiveObject();
|
|
3652
|
-
return !e || !(e instanceof
|
|
3761
|
+
return !e || !(e instanceof B) ? null : e.getObjects();
|
|
3653
3762
|
}
|
|
3654
3763
|
/**
|
|
3655
3764
|
* Получить группы для разгруппировки
|
|
@@ -3657,20 +3766,20 @@ class Us {
|
|
|
3657
3766
|
*/
|
|
3658
3767
|
_getGroupsToUngroup(t) {
|
|
3659
3768
|
if (Array.isArray(t)) {
|
|
3660
|
-
const s = t.filter((o) => o instanceof
|
|
3769
|
+
const s = t.filter((o) => o instanceof wt);
|
|
3661
3770
|
return s.length > 0 ? s : null;
|
|
3662
3771
|
}
|
|
3663
|
-
if (t instanceof
|
|
3664
|
-
const s = t.getObjects().filter((o) => o instanceof
|
|
3772
|
+
if (t instanceof B) {
|
|
3773
|
+
const s = t.getObjects().filter((o) => o instanceof wt);
|
|
3665
3774
|
return s.length > 0 ? s : null;
|
|
3666
3775
|
}
|
|
3667
3776
|
const e = t || this.editor.canvas.getActiveObject();
|
|
3668
3777
|
if (!e) return null;
|
|
3669
|
-
if (e instanceof
|
|
3670
|
-
const s = e.getObjects().filter((o) => o instanceof
|
|
3778
|
+
if (e instanceof B) {
|
|
3779
|
+
const s = e.getObjects().filter((o) => o instanceof wt);
|
|
3671
3780
|
return s.length > 0 ? s : null;
|
|
3672
3781
|
}
|
|
3673
|
-
return e instanceof
|
|
3782
|
+
return e instanceof wt ? [e] : null;
|
|
3674
3783
|
}
|
|
3675
3784
|
/**
|
|
3676
3785
|
* Группировка объектов
|
|
@@ -3687,8 +3796,8 @@ class Us {
|
|
|
3687
3796
|
if (!n) return null;
|
|
3688
3797
|
try {
|
|
3689
3798
|
o.suspendHistory();
|
|
3690
|
-
const i = new
|
|
3691
|
-
id: `group-${
|
|
3799
|
+
const i = new wt(n, {
|
|
3800
|
+
id: `group-${Y()}`
|
|
3692
3801
|
});
|
|
3693
3802
|
n.forEach((r) => s.remove(r)), s.add(i), s.setActiveObject(i), s.requestRenderAll();
|
|
3694
3803
|
const a = {
|
|
@@ -3719,11 +3828,11 @@ class Us {
|
|
|
3719
3828
|
const i = [];
|
|
3720
3829
|
n.forEach((c) => {
|
|
3721
3830
|
const d = c.removeAll();
|
|
3722
|
-
s.remove(c), d.forEach((
|
|
3723
|
-
s.add(
|
|
3831
|
+
s.remove(c), d.forEach((l) => {
|
|
3832
|
+
s.add(l), i.push(l);
|
|
3724
3833
|
});
|
|
3725
3834
|
});
|
|
3726
|
-
const a = new
|
|
3835
|
+
const a = new B(i, {
|
|
3727
3836
|
canvas: s
|
|
3728
3837
|
});
|
|
3729
3838
|
s.setActiveObject(a), s.requestRenderAll();
|
|
@@ -3738,7 +3847,7 @@ class Us {
|
|
|
3738
3847
|
}
|
|
3739
3848
|
}
|
|
3740
3849
|
}
|
|
3741
|
-
class
|
|
3850
|
+
class to {
|
|
3742
3851
|
constructor({ editor: t }) {
|
|
3743
3852
|
this.editor = t;
|
|
3744
3853
|
}
|
|
@@ -3749,11 +3858,11 @@ class Ys {
|
|
|
3749
3858
|
selectAll() {
|
|
3750
3859
|
const { canvas: t, canvasManager: e, objectLockManager: s } = this.editor;
|
|
3751
3860
|
t.discardActiveObject();
|
|
3752
|
-
const o = e.getObjects(), n = o.some((a) => a.locked), i = o.length > 1 ? new
|
|
3861
|
+
const o = e.getObjects(), n = o.some((a) => a.locked), i = o.length > 1 ? new B(e.getObjects(), { canvas: t }) : o[0];
|
|
3753
3862
|
n && s.lockObject({ object: i, skipInnerObjects: !0, withoutSave: !0 }), t.setActiveObject(i), t.requestRenderAll(), t.fire("editor:all-objects-selected", { selected: i });
|
|
3754
3863
|
}
|
|
3755
3864
|
}
|
|
3756
|
-
class
|
|
3865
|
+
class be {
|
|
3757
3866
|
constructor({ editor: t }) {
|
|
3758
3867
|
this.editor = t;
|
|
3759
3868
|
}
|
|
@@ -3800,9 +3909,9 @@ class ge {
|
|
|
3800
3909
|
s || n.suspendHistory();
|
|
3801
3910
|
const r = [];
|
|
3802
3911
|
if (a.forEach((d) => {
|
|
3803
|
-
if (
|
|
3804
|
-
const
|
|
3805
|
-
r.push(...
|
|
3912
|
+
if (be._isUngroupableGroup(d)) {
|
|
3913
|
+
const l = this._handleGroupDeletion(d);
|
|
3914
|
+
r.push(...l);
|
|
3806
3915
|
return;
|
|
3807
3916
|
}
|
|
3808
3917
|
o.remove(d), r.push(d);
|
|
@@ -3815,7 +3924,7 @@ class ge {
|
|
|
3815
3924
|
return o.fire("editor:objects-deleted", c), c;
|
|
3816
3925
|
}
|
|
3817
3926
|
}
|
|
3818
|
-
const
|
|
3927
|
+
const gt = {
|
|
3819
3928
|
IMAGE_MANAGER: {
|
|
3820
3929
|
/**
|
|
3821
3930
|
* Некорректный Content-Type изображения
|
|
@@ -3920,7 +4029,7 @@ const dt = {
|
|
|
3920
4029
|
APPLY_FAILED: "TEMPLATE_APPLY_FAILED"
|
|
3921
4030
|
}
|
|
3922
4031
|
};
|
|
3923
|
-
class
|
|
4032
|
+
class zt {
|
|
3924
4033
|
constructor({ editor: t }) {
|
|
3925
4034
|
this._buffer = [], this.editor = t;
|
|
3926
4035
|
}
|
|
@@ -3947,7 +4056,7 @@ class Nt {
|
|
|
3947
4056
|
* @fires editor:error
|
|
3948
4057
|
*/
|
|
3949
4058
|
emitError({ origin: t = "ImageEditor", method: e = "Unknown Method", code: s, data: o, message: n }) {
|
|
3950
|
-
if (!
|
|
4059
|
+
if (!zt.isValidErrorCode(s)) {
|
|
3951
4060
|
console.warn("Неизвестный код ошибки: ", { code: s, origin: t, method: e });
|
|
3952
4061
|
return;
|
|
3953
4062
|
}
|
|
@@ -3961,7 +4070,7 @@ class Nt {
|
|
|
3961
4070
|
message: i,
|
|
3962
4071
|
data: o
|
|
3963
4072
|
};
|
|
3964
|
-
this._buffer.push(
|
|
4073
|
+
this._buffer.push(k({
|
|
3965
4074
|
type: "editor:error"
|
|
3966
4075
|
}, a)), this.editor.canvas.fire("editor:error", a);
|
|
3967
4076
|
}
|
|
@@ -3976,7 +4085,7 @@ class Nt {
|
|
|
3976
4085
|
* @fires editor:warning
|
|
3977
4086
|
*/
|
|
3978
4087
|
emitWarning({ origin: t = "ImageEditor", method: e = "Unknown Method", code: s, message: o, data: n }) {
|
|
3979
|
-
if (!
|
|
4088
|
+
if (!zt.isValidErrorCode(s)) {
|
|
3980
4089
|
console.warn("Неизвестный код предупреждения: ", { code: s, origin: t, method: e });
|
|
3981
4090
|
return;
|
|
3982
4091
|
}
|
|
@@ -3989,7 +4098,7 @@ class Nt {
|
|
|
3989
4098
|
message: i,
|
|
3990
4099
|
data: n
|
|
3991
4100
|
};
|
|
3992
|
-
this._buffer.push(
|
|
4101
|
+
this._buffer.push(k({
|
|
3993
4102
|
type: "editor:warning"
|
|
3994
4103
|
}, a)), this.editor.canvas.fire("editor:warning", a);
|
|
3995
4104
|
}
|
|
@@ -3999,10 +4108,10 @@ class Nt {
|
|
|
3999
4108
|
* @returns true, если код допустим, иначе false
|
|
4000
4109
|
*/
|
|
4001
4110
|
static isValidErrorCode(t) {
|
|
4002
|
-
return t ? Object.values(
|
|
4111
|
+
return t ? Object.values(gt).some((e) => Object.values(e).includes(t)) : !1;
|
|
4003
4112
|
}
|
|
4004
4113
|
}
|
|
4005
|
-
class
|
|
4114
|
+
class eo {
|
|
4006
4115
|
constructor({ editor: t }) {
|
|
4007
4116
|
this.currentBounds = null, this.editor = t;
|
|
4008
4117
|
}
|
|
@@ -4052,12 +4161,12 @@ class Fs {
|
|
|
4052
4161
|
constrainPan(t, e) {
|
|
4053
4162
|
if (!this.currentBounds || !this.currentBounds.canPan)
|
|
4054
4163
|
return { x: 0, y: 0 };
|
|
4055
|
-
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,
|
|
4164
|
+
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(
|
|
4056
4165
|
this.currentBounds.minX,
|
|
4057
4166
|
Math.min(this.currentBounds.maxX, d)
|
|
4058
4167
|
), g = Math.max(
|
|
4059
4168
|
this.currentBounds.minY,
|
|
4060
|
-
Math.min(this.currentBounds.maxY,
|
|
4169
|
+
Math.min(this.currentBounds.maxY, l)
|
|
4061
4170
|
), f = u + r - i * n, p = g + c - a * n;
|
|
4062
4171
|
return {
|
|
4063
4172
|
x: f,
|
|
@@ -4087,14 +4196,14 @@ class Fs {
|
|
|
4087
4196
|
this.currentBounds = this.calculatePanBounds();
|
|
4088
4197
|
}
|
|
4089
4198
|
}
|
|
4090
|
-
const
|
|
4091
|
-
value:
|
|
4199
|
+
const nt = ({
|
|
4200
|
+
value: h,
|
|
4092
4201
|
min: t,
|
|
4093
4202
|
max: e
|
|
4094
|
-
}) => Math.min(Math.max(
|
|
4203
|
+
}) => Math.min(Math.max(h, t), e), jt = class jt extends st {
|
|
4095
4204
|
constructor(t, e = {}) {
|
|
4096
|
-
var s, o, n, i, a, r, c, d,
|
|
4097
|
-
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 = (
|
|
4205
|
+
var s, o, n, i, a, r, c, d, l;
|
|
4206
|
+
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;
|
|
4098
4207
|
}
|
|
4099
4208
|
_getLeftOffset() {
|
|
4100
4209
|
const { width: t } = this._getBackgroundDimensions(), { left: e } = this._getPadding();
|
|
@@ -4106,11 +4215,11 @@ const J = ({
|
|
|
4106
4215
|
}
|
|
4107
4216
|
_getNonTransformedDimensions() {
|
|
4108
4217
|
const { width: t, height: e } = this._getBackgroundDimensions();
|
|
4109
|
-
return new
|
|
4218
|
+
return new $(t, e).scalarAdd(this.strokeWidth);
|
|
4110
4219
|
}
|
|
4111
4220
|
_getTransformedDimensions(t = {}) {
|
|
4112
4221
|
const { width: e, height: s } = this._getBackgroundDimensions();
|
|
4113
|
-
return super._getTransformedDimensions(
|
|
4222
|
+
return super._getTransformedDimensions(bt(k({}, t), {
|
|
4114
4223
|
width: e,
|
|
4115
4224
|
height: s
|
|
4116
4225
|
}));
|
|
@@ -4120,7 +4229,7 @@ const J = ({
|
|
|
4120
4229
|
*/
|
|
4121
4230
|
toObject(t = []) {
|
|
4122
4231
|
const e = super.toObject(t);
|
|
4123
|
-
return
|
|
4232
|
+
return bt(k({}, e), {
|
|
4124
4233
|
backgroundOpacity: this.backgroundOpacity,
|
|
4125
4234
|
paddingTop: this.paddingTop,
|
|
4126
4235
|
paddingRight: this.paddingRight,
|
|
@@ -4136,11 +4245,11 @@ const J = ({
|
|
|
4136
4245
|
var s, o;
|
|
4137
4246
|
const e = this._getEffectiveBackgroundFill();
|
|
4138
4247
|
if (e && e) {
|
|
4139
|
-
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 }),
|
|
4140
|
-
t.save(),
|
|
4248
|
+
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;
|
|
4249
|
+
t.save(), jt._renderRoundedRect({
|
|
4141
4250
|
ctx: t,
|
|
4142
4251
|
height: c,
|
|
4143
|
-
left:
|
|
4252
|
+
left: l,
|
|
4144
4253
|
radii: d,
|
|
4145
4254
|
top: u,
|
|
4146
4255
|
width: r
|
|
@@ -4159,10 +4268,10 @@ const J = ({
|
|
|
4159
4268
|
var i, a, r, c;
|
|
4160
4269
|
const s = t / 2, o = e / 2, n = Math.min(s, o);
|
|
4161
4270
|
return {
|
|
4162
|
-
bottomLeft:
|
|
4163
|
-
bottomRight:
|
|
4164
|
-
topLeft:
|
|
4165
|
-
topRight:
|
|
4271
|
+
bottomLeft: nt({ value: (i = this.radiusBottomLeft) != null ? i : 0, min: 0, max: n }),
|
|
4272
|
+
bottomRight: nt({ value: (a = this.radiusBottomRight) != null ? a : 0, min: 0, max: n }),
|
|
4273
|
+
topLeft: nt({ value: (r = this.radiusTopLeft) != null ? r : 0, min: 0, max: n }),
|
|
4274
|
+
topRight: nt({ value: (c = this.radiusTopRight) != null ? c : 0, min: 0, max: n })
|
|
4166
4275
|
};
|
|
4167
4276
|
}
|
|
4168
4277
|
_getPadding() {
|
|
@@ -4178,12 +4287,12 @@ const J = ({
|
|
|
4178
4287
|
var o;
|
|
4179
4288
|
const t = this.backgroundColor;
|
|
4180
4289
|
if (!t) return null;
|
|
4181
|
-
const e =
|
|
4290
|
+
const e = nt({ value: (o = this.backgroundOpacity) != null ? o : 1, min: 0, max: 1 });
|
|
4182
4291
|
let s;
|
|
4183
4292
|
try {
|
|
4184
|
-
s = new
|
|
4293
|
+
s = new gs(t);
|
|
4185
4294
|
} catch (n) {
|
|
4186
|
-
return
|
|
4295
|
+
return zt.emitError({
|
|
4187
4296
|
origin: "BackgroundTextbox",
|
|
4188
4297
|
method: "_getEffectiveBackgroundFill",
|
|
4189
4298
|
code: "INVALID_COLOR_VALUE",
|
|
@@ -4204,13 +4313,13 @@ const J = ({
|
|
|
4204
4313
|
const a = s + i, r = n + e, {
|
|
4205
4314
|
topLeft: c,
|
|
4206
4315
|
topRight: d,
|
|
4207
|
-
bottomRight:
|
|
4316
|
+
bottomRight: l,
|
|
4208
4317
|
bottomLeft: u
|
|
4209
|
-
} = o, g =
|
|
4318
|
+
} = o, g = nt({ value: c, min: 0, max: i }), f = nt({ value: d, min: 0, max: i }), p = nt({ value: l, min: 0, max: i }), m = nt({ value: u, min: 0, max: i });
|
|
4210
4319
|
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();
|
|
4211
4320
|
}
|
|
4212
4321
|
};
|
|
4213
|
-
|
|
4322
|
+
jt.type = "background-textbox", jt.cacheProperties = [
|
|
4214
4323
|
...Array.isArray(st.cacheProperties) ? st.cacheProperties : [],
|
|
4215
4324
|
"backgroundColor",
|
|
4216
4325
|
"backgroundOpacity",
|
|
@@ -4222,7 +4331,7 @@ At.type = "background-textbox", At.cacheProperties = [
|
|
|
4222
4331
|
"radiusTopRight",
|
|
4223
4332
|
"radiusBottomRight",
|
|
4224
4333
|
"radiusBottomLeft"
|
|
4225
|
-
],
|
|
4334
|
+
], jt.stateProperties = [
|
|
4226
4335
|
...Array.isArray(st.stateProperties) ? st.stateProperties : [],
|
|
4227
4336
|
"backgroundColor",
|
|
4228
4337
|
"backgroundOpacity",
|
|
@@ -4235,54 +4344,54 @@ At.type = "background-textbox", At.cacheProperties = [
|
|
|
4235
4344
|
"radiusBottomRight",
|
|
4236
4345
|
"radiusBottomLeft"
|
|
4237
4346
|
];
|
|
4238
|
-
let
|
|
4239
|
-
const
|
|
4240
|
-
var
|
|
4241
|
-
(
|
|
4242
|
-
},
|
|
4347
|
+
let $t = jt;
|
|
4348
|
+
const so = () => {
|
|
4349
|
+
var h;
|
|
4350
|
+
(h = Be) != null && h.setClass && Be.setClass($t, "background-textbox");
|
|
4351
|
+
}, oo = ({ textbox: h }) => {
|
|
4243
4352
|
var s, o;
|
|
4244
|
-
if (!
|
|
4245
|
-
const t = (s =
|
|
4353
|
+
if (!h.isEditing) return null;
|
|
4354
|
+
const t = (s = h.selectionStart) != null ? s : 0, e = (o = h.selectionEnd) != null ? o : t;
|
|
4246
4355
|
return t === e ? null : {
|
|
4247
4356
|
start: Math.min(t, e),
|
|
4248
4357
|
end: Math.max(t, e)
|
|
4249
4358
|
};
|
|
4250
|
-
},
|
|
4359
|
+
}, no = ({ textbox: h }) => {
|
|
4251
4360
|
var e, s;
|
|
4252
|
-
const t = (s = (e =
|
|
4361
|
+
const t = (s = (e = h.text) == null ? void 0 : e.length) != null ? s : 0;
|
|
4253
4362
|
return t <= 0 ? null : { start: 0, end: t };
|
|
4254
|
-
},
|
|
4363
|
+
}, io = ({ textbox: h, range: t }) => {
|
|
4255
4364
|
var s, o;
|
|
4256
4365
|
if (!t) return !1;
|
|
4257
|
-
const e = (o = (s =
|
|
4366
|
+
const e = (o = (s = h.text) == null ? void 0 : s.length) != null ? o : 0;
|
|
4258
4367
|
return e <= 0 ? !1 : t.start <= 0 && t.end >= e;
|
|
4259
|
-
},
|
|
4260
|
-
textbox:
|
|
4368
|
+
}, se = ({
|
|
4369
|
+
textbox: h,
|
|
4261
4370
|
styles: t,
|
|
4262
4371
|
range: e
|
|
4263
4372
|
}) => {
|
|
4264
4373
|
if (!t || !Object.keys(t).length) return !1;
|
|
4265
4374
|
const { start: s, end: o } = e;
|
|
4266
|
-
return o <= s ? !1 : (
|
|
4267
|
-
},
|
|
4268
|
-
textbox:
|
|
4375
|
+
return o <= s ? !1 : (h.setSelectionStyles(t, s, o), !0);
|
|
4376
|
+
}, We = ({
|
|
4377
|
+
textbox: h,
|
|
4269
4378
|
range: t,
|
|
4270
4379
|
property: e
|
|
4271
4380
|
}) => {
|
|
4272
4381
|
var o;
|
|
4273
4382
|
if (!t) return;
|
|
4274
|
-
const s =
|
|
4383
|
+
const s = h.getSelectionStyles(
|
|
4275
4384
|
t.start,
|
|
4276
4385
|
t.end,
|
|
4277
4386
|
!0
|
|
4278
4387
|
);
|
|
4279
4388
|
if (s.length)
|
|
4280
4389
|
return (o = s[0]) == null ? void 0 : o[e];
|
|
4281
|
-
},
|
|
4390
|
+
}, Ze = ({ strokeColor: h, width: t }) => {
|
|
4282
4391
|
if (!(t <= 0))
|
|
4283
|
-
return
|
|
4284
|
-
},
|
|
4285
|
-
class
|
|
4392
|
+
return h != null ? h : "#000000";
|
|
4393
|
+
}, Ge = ({ width: h = 0 }) => h ? Math.max(0, h) : 0, oe = ({ value: h }) => typeof h == "string" ? h.toLocaleUpperCase() : "", J = 0.01;
|
|
4394
|
+
class q {
|
|
4286
4395
|
constructor({ editor: t }) {
|
|
4287
4396
|
var e;
|
|
4288
4397
|
this._handleTextEditingEntered = () => {
|
|
@@ -4290,7 +4399,7 @@ class Q {
|
|
|
4290
4399
|
}, this._handleTextEditingExited = (s) => {
|
|
4291
4400
|
var a, r;
|
|
4292
4401
|
const { target: o } = s;
|
|
4293
|
-
if (!
|
|
4402
|
+
if (!q._isTextbox(o)) return;
|
|
4294
4403
|
const n = (a = o.text) != null ? a : "";
|
|
4295
4404
|
if (!!o.uppercase) {
|
|
4296
4405
|
const c = (r = o.textCaseRaw) != null ? r : n.toLocaleLowerCase();
|
|
@@ -4302,118 +4411,145 @@ class Q {
|
|
|
4302
4411
|
lockMovementY: !1
|
|
4303
4412
|
}), setTimeout(() => {
|
|
4304
4413
|
this.isTextEditingActive = !1, this.editor.historyManager.saveState();
|
|
4305
|
-
},
|
|
4414
|
+
}, Ws);
|
|
4306
4415
|
}, this._handleObjectScaling = (s) => {
|
|
4307
|
-
var
|
|
4416
|
+
var Nt, W, yt, Yt, ht, Ft, vt, we, Se, Ae, je, Ie, Ce;
|
|
4308
4417
|
const { target: o, transform: n } = s;
|
|
4309
|
-
if (
|
|
4418
|
+
if (o instanceof B) {
|
|
4419
|
+
this._handleActiveSelectionScaling({
|
|
4420
|
+
selection: o,
|
|
4421
|
+
transform: n
|
|
4422
|
+
});
|
|
4423
|
+
return;
|
|
4424
|
+
}
|
|
4425
|
+
if (!q._isTextbox(o) || !n) return;
|
|
4310
4426
|
o.isScaling = !0;
|
|
4311
4427
|
const i = this._ensureScalingState(o), {
|
|
4312
4428
|
baseWidth: a,
|
|
4313
4429
|
baseLeft: r,
|
|
4314
4430
|
baseFontSize: c,
|
|
4315
4431
|
basePadding: d,
|
|
4316
|
-
baseRadii:
|
|
4317
|
-
|
|
4318
|
-
|
|
4319
|
-
|
|
4320
|
-
|
|
4321
|
-
|
|
4322
|
-
|
|
4323
|
-
|
|
4324
|
-
|
|
4325
|
-
|
|
4326
|
-
|
|
4327
|
-
|
|
4328
|
-
|
|
4329
|
-
|
|
4330
|
-
|
|
4331
|
-
|
|
4432
|
+
baseRadii: l,
|
|
4433
|
+
baseStyles: u
|
|
4434
|
+
} = i, g = typeof ((Nt = n.original) == null ? void 0 : Nt.width) == "number" ? n.original.width : void 0, f = typeof ((W = n.original) == null ? void 0 : W.left) == "number" ? n.original.left : void 0, p = g != null ? g : a, m = f != null ? f : r, v = (yt = n.corner) != null ? yt : "", b = (Yt = n.action) != null ? Yt : "", I = ["ml", "mr"].includes(v) || b === "scaleX", y = ["mt", "mb"].includes(v) || b === "scaleY", w = ["tl", "tr", "bl", "br"].includes(v) || b === "scale", S = w || y;
|
|
4435
|
+
if (!I && !y && !w) return;
|
|
4436
|
+
const A = Math.abs((Ft = (ht = o.scaleX) != null ? ht : n.scaleX) != null ? Ft : 1) || 1, M = Math.abs((we = (vt = o.scaleY) != null ? vt : n.scaleY) != null ? we : 1) || 1, C = Math.max(1, p * A), j = Math.max(1, c * M), {
|
|
4437
|
+
paddingTop: T = 0,
|
|
4438
|
+
paddingRight: x = 0,
|
|
4439
|
+
paddingBottom: Z = 0,
|
|
4440
|
+
paddingLeft: P = 0,
|
|
4441
|
+
radiusTopLeft: F = 0,
|
|
4442
|
+
radiusTopRight: K = 0,
|
|
4443
|
+
radiusBottomRight: L = 0,
|
|
4444
|
+
radiusBottomLeft: R = 0,
|
|
4445
|
+
fontSize: X,
|
|
4446
|
+
width: H,
|
|
4447
|
+
originX: G = "left"
|
|
4448
|
+
} = o, V = w || y, et = w || y, z = V ? {
|
|
4332
4449
|
top: Math.max(0, d.top * M),
|
|
4333
4450
|
right: Math.max(0, d.right * M),
|
|
4334
4451
|
bottom: Math.max(0, d.bottom * M),
|
|
4335
4452
|
left: Math.max(0, d.left * M)
|
|
4336
|
-
} : d,
|
|
4337
|
-
topLeft: Math.max(0,
|
|
4338
|
-
topRight: Math.max(0,
|
|
4339
|
-
bottomRight: Math.max(0,
|
|
4340
|
-
bottomLeft: Math.max(0,
|
|
4341
|
-
} :
|
|
4342
|
-
|
|
4453
|
+
} : d, U = et ? {
|
|
4454
|
+
topLeft: Math.max(0, l.topLeft * M),
|
|
4455
|
+
topRight: Math.max(0, l.topRight * M),
|
|
4456
|
+
bottomRight: Math.max(0, l.bottomRight * M),
|
|
4457
|
+
bottomLeft: Math.max(0, l.bottomLeft * M)
|
|
4458
|
+
} : l, Ut = Object.keys(u).length > 0;
|
|
4459
|
+
let mt;
|
|
4460
|
+
if (S && Ut) {
|
|
4461
|
+
const te = {};
|
|
4462
|
+
Object.entries(u).forEach(([ns, Te]) => {
|
|
4463
|
+
if (!Te) return;
|
|
4464
|
+
const ee = {};
|
|
4465
|
+
Object.entries(Te).forEach(([is, Ht]) => {
|
|
4466
|
+
if (!Ht) return;
|
|
4467
|
+
const Ee = k({}, Ht);
|
|
4468
|
+
typeof Ht.fontSize == "number" && (Ee.fontSize = Math.max(1, Ht.fontSize * M)), ee[is] = Ee;
|
|
4469
|
+
}), Object.keys(ee).length && (te[ns] = ee);
|
|
4470
|
+
}), Object.keys(te).length && (mt = te);
|
|
4471
|
+
}
|
|
4472
|
+
const Tt = (Ae = (Se = n.originX) != null ? Se : G) != null ? Ae : "left", Et = m + p, Ot = m + p / 2, Jt = H != null ? H : p, Lt = Math.abs(C - Jt) > J, Pt = Math.abs(j - (X != null ? X : c)) > J, Dt = Math.abs(z.top - T) > J || Math.abs(z.right - x) > J || Math.abs(z.bottom - Z) > J || Math.abs(z.left - P) > J, Rt = Math.abs(U.topLeft - F) > J || Math.abs(U.topRight - K) > J || Math.abs(U.bottomRight - L) > J || Math.abs(U.bottomLeft - R) > J;
|
|
4473
|
+
if (!Lt && !Pt && !Dt && !Rt) {
|
|
4343
4474
|
o.set({ scaleX: 1, scaleY: 1 }), n.scaleX = 1, n.scaleY = 1;
|
|
4344
4475
|
return;
|
|
4345
4476
|
}
|
|
4346
|
-
o.set({
|
|
4347
|
-
width:
|
|
4348
|
-
fontSize:
|
|
4349
|
-
paddingTop:
|
|
4350
|
-
paddingRight:
|
|
4351
|
-
paddingBottom:
|
|
4352
|
-
paddingLeft:
|
|
4353
|
-
radiusTopLeft:
|
|
4354
|
-
radiusTopRight:
|
|
4355
|
-
radiusBottomRight:
|
|
4356
|
-
radiusBottomLeft:
|
|
4477
|
+
mt && (o.styles = mt), o.set({
|
|
4478
|
+
width: C,
|
|
4479
|
+
fontSize: S ? j : c,
|
|
4480
|
+
paddingTop: z.top,
|
|
4481
|
+
paddingRight: z.right,
|
|
4482
|
+
paddingBottom: z.bottom,
|
|
4483
|
+
paddingLeft: z.left,
|
|
4484
|
+
radiusTopLeft: U.topLeft,
|
|
4485
|
+
radiusTopRight: U.topRight,
|
|
4486
|
+
radiusBottomRight: U.bottomRight,
|
|
4487
|
+
radiusBottomLeft: U.bottomLeft,
|
|
4357
4488
|
scaleX: 1,
|
|
4358
4489
|
scaleY: 1
|
|
4359
4490
|
});
|
|
4360
|
-
const
|
|
4361
|
-
let
|
|
4362
|
-
|
|
4363
|
-
const { original:
|
|
4364
|
-
|
|
4365
|
-
top:
|
|
4366
|
-
right:
|
|
4367
|
-
bottom:
|
|
4368
|
-
left:
|
|
4491
|
+
const ct = (je = o.width) != null ? je : C, _t = Math.abs(ct - Jt) > J;
|
|
4492
|
+
let dt = m;
|
|
4493
|
+
_t && (I || w) && (Tt === "right" ? dt = Et - ct : Tt === "center" && (dt = Ot - ct / 2)), o.set({ left: dt }), i.baseLeft = dt, n.scaleX = 1, n.scaleY = 1;
|
|
4494
|
+
const { original: ot } = n;
|
|
4495
|
+
ot && (ot.scaleX = 1, ot.scaleY = 1, ot.width = ct, ot.height = o.height, ot.left = dt), o.setCoords(), this.canvas.requestRenderAll(), i.baseWidth = ct, i.baseFontSize = (Ie = o.fontSize) != null ? Ie : j, i.baseStyles = JSON.parse(JSON.stringify((Ce = o.styles) != null ? Ce : {})), i.basePadding = {
|
|
4496
|
+
top: z.top,
|
|
4497
|
+
right: z.right,
|
|
4498
|
+
bottom: z.bottom,
|
|
4499
|
+
left: z.left
|
|
4369
4500
|
}, i.baseRadii = {
|
|
4370
|
-
topLeft:
|
|
4371
|
-
topRight:
|
|
4372
|
-
bottomRight:
|
|
4373
|
-
bottomLeft:
|
|
4374
|
-
}, i.hasWidthChange =
|
|
4501
|
+
topLeft: U.topLeft,
|
|
4502
|
+
topRight: U.topRight,
|
|
4503
|
+
bottomRight: U.bottomRight,
|
|
4504
|
+
bottomLeft: U.bottomLeft
|
|
4505
|
+
}, i.hasWidthChange = _t || Pt || Dt || Rt;
|
|
4375
4506
|
}, this._handleObjectModified = (s) => {
|
|
4376
|
-
var
|
|
4507
|
+
var b, I, y;
|
|
4377
4508
|
const { target: o } = s;
|
|
4378
|
-
if (
|
|
4509
|
+
if (o instanceof B) {
|
|
4510
|
+
this._finalizeActiveSelectionScaling({
|
|
4511
|
+
selection: o
|
|
4512
|
+
});
|
|
4513
|
+
return;
|
|
4514
|
+
}
|
|
4515
|
+
if (!q._isTextbox(o)) return;
|
|
4379
4516
|
o.isScaling = !1;
|
|
4380
4517
|
const n = this.scalingState.get(o);
|
|
4381
4518
|
if (this.scalingState.delete(o), !(n != null && n.hasWidthChange)) return;
|
|
4382
|
-
const i = (
|
|
4383
|
-
paddingTop:
|
|
4384
|
-
paddingRight:
|
|
4385
|
-
paddingBottom:
|
|
4386
|
-
paddingLeft:
|
|
4387
|
-
radiusTopLeft:
|
|
4388
|
-
radiusTopRight:
|
|
4389
|
-
radiusBottomRight:
|
|
4390
|
-
radiusBottomLeft:
|
|
4391
|
-
} = o
|
|
4392
|
-
|
|
4519
|
+
const i = (b = o.width) != null ? b : o.calcTextWidth(), a = (y = (I = o.fontSize) != null ? I : n == null ? void 0 : n.baseFontSize) != null ? y : 16, r = !!(n.baseStyles && Object.keys(n.baseStyles).length), {
|
|
4520
|
+
paddingTop: c = 0,
|
|
4521
|
+
paddingRight: d = 0,
|
|
4522
|
+
paddingBottom: l = 0,
|
|
4523
|
+
paddingLeft: u = 0,
|
|
4524
|
+
radiusTopLeft: g = 0,
|
|
4525
|
+
radiusTopRight: f = 0,
|
|
4526
|
+
radiusBottomRight: p = 0,
|
|
4527
|
+
radiusBottomLeft: m = 0
|
|
4528
|
+
} = o, v = {
|
|
4529
|
+
width: i,
|
|
4530
|
+
paddingTop: c,
|
|
4531
|
+
paddingRight: d,
|
|
4532
|
+
paddingBottom: l,
|
|
4533
|
+
paddingLeft: u,
|
|
4534
|
+
radiusTopLeft: g,
|
|
4535
|
+
radiusTopRight: f,
|
|
4536
|
+
radiusBottomRight: p,
|
|
4537
|
+
radiusBottomLeft: m
|
|
4538
|
+
};
|
|
4539
|
+
r || (v.fontSize = a), this.updateText({
|
|
4393
4540
|
target: o,
|
|
4394
|
-
style:
|
|
4395
|
-
width: i,
|
|
4396
|
-
fontSize: a,
|
|
4397
|
-
paddingTop: r,
|
|
4398
|
-
paddingRight: c,
|
|
4399
|
-
paddingBottom: d,
|
|
4400
|
-
paddingLeft: h,
|
|
4401
|
-
radiusTopLeft: u,
|
|
4402
|
-
radiusTopRight: g,
|
|
4403
|
-
radiusBottomRight: f,
|
|
4404
|
-
radiusBottomLeft: p
|
|
4405
|
-
}
|
|
4541
|
+
style: v
|
|
4406
4542
|
}), o.set({ scaleX: 1, scaleY: 1 }), o.setCoords();
|
|
4407
|
-
}, 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(),
|
|
4543
|
+
}, 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(), so();
|
|
4408
4544
|
}
|
|
4409
4545
|
/**
|
|
4410
4546
|
* Добавляет новый текстовый объект на канвас.
|
|
4411
4547
|
* @param options — настройки текста
|
|
4412
4548
|
* @param flags — флаги поведения
|
|
4413
4549
|
*/
|
|
4414
|
-
addText(
|
|
4415
|
-
var
|
|
4416
|
-
id: t = `text-${
|
|
4550
|
+
addText(Z = {}, { withoutSelection: j = !1, withoutSave: T = !1, withoutAdding: x = !1 } = {}) {
|
|
4551
|
+
var P = Z, {
|
|
4552
|
+
id: t = `text-${Y()}`,
|
|
4417
4553
|
text: e = "Новый текст",
|
|
4418
4554
|
fontFamily: s,
|
|
4419
4555
|
fontSize: o = 48,
|
|
@@ -4423,7 +4559,7 @@ class Q {
|
|
|
4423
4559
|
uppercase: r = !1,
|
|
4424
4560
|
strikethrough: c = !1,
|
|
4425
4561
|
align: d = "left",
|
|
4426
|
-
color:
|
|
4562
|
+
color: l = "#000000",
|
|
4427
4563
|
strokeColor: u,
|
|
4428
4564
|
strokeWidth: g = 0,
|
|
4429
4565
|
opacity: f = 1,
|
|
@@ -4433,11 +4569,11 @@ class Q {
|
|
|
4433
4569
|
paddingRight: b = 0,
|
|
4434
4570
|
paddingBottom: I = 0,
|
|
4435
4571
|
paddingLeft: y = 0,
|
|
4436
|
-
radiusTopLeft:
|
|
4437
|
-
radiusTopRight:
|
|
4438
|
-
radiusBottomRight:
|
|
4439
|
-
radiusBottomLeft:
|
|
4440
|
-
} =
|
|
4572
|
+
radiusTopLeft: w = 0,
|
|
4573
|
+
radiusTopRight: S = 0,
|
|
4574
|
+
radiusBottomRight: A = 0,
|
|
4575
|
+
radiusBottomLeft: M = 0
|
|
4576
|
+
} = P, C = ut(P, [
|
|
4441
4577
|
"id",
|
|
4442
4578
|
"text",
|
|
4443
4579
|
"fontFamily",
|
|
@@ -4463,15 +4599,15 @@ class Q {
|
|
|
4463
4599
|
"radiusBottomRight",
|
|
4464
4600
|
"radiusBottomLeft"
|
|
4465
4601
|
]);
|
|
4466
|
-
var
|
|
4467
|
-
const { historyManager:
|
|
4468
|
-
|
|
4469
|
-
const
|
|
4602
|
+
var V;
|
|
4603
|
+
const { historyManager: F } = this.editor, { canvas: K } = this;
|
|
4604
|
+
F.suspendHistory();
|
|
4605
|
+
const L = s != null ? s : this._getDefaultFontFamily(), R = Ge({ width: g }), X = Ze({
|
|
4470
4606
|
strokeColor: u,
|
|
4471
4607
|
width: R
|
|
4472
|
-
}),
|
|
4608
|
+
}), H = k({
|
|
4473
4609
|
id: t,
|
|
4474
|
-
fontFamily:
|
|
4610
|
+
fontFamily: L,
|
|
4475
4611
|
fontSize: o,
|
|
4476
4612
|
fontWeight: n ? "bold" : "normal",
|
|
4477
4613
|
fontStyle: i ? "italic" : "normal",
|
|
@@ -4479,8 +4615,8 @@ class Q {
|
|
|
4479
4615
|
uppercase: r,
|
|
4480
4616
|
linethrough: c,
|
|
4481
4617
|
textAlign: d,
|
|
4482
|
-
fill:
|
|
4483
|
-
stroke:
|
|
4618
|
+
fill: l,
|
|
4619
|
+
stroke: X,
|
|
4484
4620
|
strokeWidth: R,
|
|
4485
4621
|
strokeUniform: !0,
|
|
4486
4622
|
opacity: f,
|
|
@@ -4490,25 +4626,25 @@ class Q {
|
|
|
4490
4626
|
paddingRight: b,
|
|
4491
4627
|
paddingBottom: I,
|
|
4492
4628
|
paddingLeft: y,
|
|
4493
|
-
radiusTopLeft:
|
|
4494
|
-
radiusTopRight:
|
|
4495
|
-
radiusBottomRight:
|
|
4496
|
-
radiusBottomLeft:
|
|
4497
|
-
}, C),
|
|
4498
|
-
if (
|
|
4499
|
-
const
|
|
4500
|
-
|
|
4501
|
-
}
|
|
4502
|
-
return C.left === void 0 && C.top === void 0 &&
|
|
4503
|
-
textbox:
|
|
4504
|
-
options:
|
|
4629
|
+
radiusTopLeft: w,
|
|
4630
|
+
radiusTopRight: S,
|
|
4631
|
+
radiusBottomRight: A,
|
|
4632
|
+
radiusBottomLeft: M
|
|
4633
|
+
}, C), G = new $t(e, H);
|
|
4634
|
+
if (G.textCaseRaw = (V = G.text) != null ? V : "", r) {
|
|
4635
|
+
const et = oe({ value: G.textCaseRaw });
|
|
4636
|
+
et !== G.text && G.set({ text: et });
|
|
4637
|
+
}
|
|
4638
|
+
return C.left === void 0 && C.top === void 0 && K.centerObject(G), x || K.add(G), j || K.setActiveObject(G), K.requestRenderAll(), F.resumeHistory(), T || F.saveState(), K.fire("editor:text-added", {
|
|
4639
|
+
textbox: G,
|
|
4640
|
+
options: bt(k({}, H), {
|
|
4505
4641
|
text: e,
|
|
4506
4642
|
bold: n,
|
|
4507
4643
|
italic: i,
|
|
4508
4644
|
strikethrough: c,
|
|
4509
4645
|
align: d,
|
|
4510
|
-
color:
|
|
4511
|
-
strokeColor:
|
|
4646
|
+
color: l,
|
|
4647
|
+
strokeColor: X,
|
|
4512
4648
|
strokeWidth: R
|
|
4513
4649
|
}),
|
|
4514
4650
|
flags: {
|
|
@@ -4516,7 +4652,7 @@ class Q {
|
|
|
4516
4652
|
withoutSave: !!T,
|
|
4517
4653
|
withoutAdding: !!x
|
|
4518
4654
|
}
|
|
4519
|
-
}),
|
|
4655
|
+
}), G;
|
|
4520
4656
|
}
|
|
4521
4657
|
/**
|
|
4522
4658
|
* Обновляет текстовый объект.
|
|
@@ -4527,15 +4663,15 @@ class Q {
|
|
|
4527
4663
|
* @param options.skipRender — не вызывать перерисовку канваса
|
|
4528
4664
|
*/
|
|
4529
4665
|
updateText({ target: t, style: e = {}, withoutSave: s, skipRender: o } = {}) {
|
|
4530
|
-
var
|
|
4666
|
+
var Rt, ct, _t, dt, ot, Nt;
|
|
4531
4667
|
const n = this._resolveTextObject(t);
|
|
4532
4668
|
if (!n) return null;
|
|
4533
4669
|
const { historyManager: i } = this.editor, { canvas: a } = this;
|
|
4534
4670
|
i.suspendHistory();
|
|
4535
|
-
const r =
|
|
4671
|
+
const r = q._getSnapshot(n), Dt = e, {
|
|
4536
4672
|
text: c,
|
|
4537
4673
|
fontFamily: d,
|
|
4538
|
-
fontSize:
|
|
4674
|
+
fontSize: l,
|
|
4539
4675
|
bold: u,
|
|
4540
4676
|
italic: g,
|
|
4541
4677
|
underline: f,
|
|
@@ -4545,18 +4681,18 @@ class Q {
|
|
|
4545
4681
|
color: b,
|
|
4546
4682
|
strokeColor: I,
|
|
4547
4683
|
strokeWidth: y,
|
|
4548
|
-
opacity:
|
|
4549
|
-
backgroundColor:
|
|
4550
|
-
backgroundOpacity:
|
|
4551
|
-
paddingTop:
|
|
4684
|
+
opacity: w,
|
|
4685
|
+
backgroundColor: S,
|
|
4686
|
+
backgroundOpacity: A,
|
|
4687
|
+
paddingTop: M,
|
|
4552
4688
|
paddingRight: C,
|
|
4553
4689
|
paddingBottom: j,
|
|
4554
4690
|
paddingLeft: T,
|
|
4555
4691
|
radiusTopLeft: x,
|
|
4556
|
-
radiusTopRight:
|
|
4557
|
-
radiusBottomRight:
|
|
4558
|
-
radiusBottomLeft:
|
|
4559
|
-
} =
|
|
4692
|
+
radiusTopRight: Z,
|
|
4693
|
+
radiusBottomRight: P,
|
|
4694
|
+
radiusBottomLeft: F
|
|
4695
|
+
} = Dt, K = ut(Dt, [
|
|
4560
4696
|
"text",
|
|
4561
4697
|
"fontFamily",
|
|
4562
4698
|
"fontSize",
|
|
@@ -4580,38 +4716,39 @@ class Q {
|
|
|
4580
4716
|
"radiusTopRight",
|
|
4581
4717
|
"radiusBottomRight",
|
|
4582
4718
|
"radiusBottomLeft"
|
|
4583
|
-
]),
|
|
4584
|
-
if (d !== void 0 && (
|
|
4585
|
-
const
|
|
4586
|
-
R && (
|
|
4719
|
+
]), L = k({}, K), R = oo({ textbox: n }), X = R ? this._expandRangeToFullLines({ textbox: n, range: R }) : null, H = {}, G = {}, V = {}, et = io({ textbox: n, range: R }), z = !R || et, U = !R;
|
|
4720
|
+
if (d !== void 0 && (X && (G.fontFamily = d), z && (L.fontFamily = d, U && (V.fontFamily = d))), l !== void 0 && (X && (G.fontSize = l), z && (L.fontSize = l, U && (V.fontSize = l))), u !== void 0) {
|
|
4721
|
+
const W = u ? "bold" : "normal";
|
|
4722
|
+
R && (H.fontWeight = W), z && (L.fontWeight = W, U && (V.fontWeight = W));
|
|
4587
4723
|
}
|
|
4588
4724
|
if (g !== void 0) {
|
|
4589
|
-
const
|
|
4590
|
-
R && (
|
|
4725
|
+
const W = g ? "italic" : "normal";
|
|
4726
|
+
R && (H.fontStyle = W), z && (L.fontStyle = W, U && (V.fontStyle = W));
|
|
4591
4727
|
}
|
|
4592
|
-
if (f !== void 0 && (R && (
|
|
4593
|
-
const
|
|
4594
|
-
strokeColor:
|
|
4595
|
-
width:
|
|
4728
|
+
if (f !== void 0 && (R && (H.underline = f), z && (L.underline = f, U && (V.underline = f))), m !== void 0 && (R && (H.linethrough = m), z && (L.linethrough = m, U && (V.linethrough = m))), v !== void 0 && (L.textAlign = v), b !== void 0 && (R && (H.fill = b), z && (L.fill = b, U && (V.fill = b))), I !== void 0 || y !== void 0) {
|
|
4729
|
+
const W = R ? We({ textbox: n, range: R, property: "strokeWidth" }) : void 0, yt = R ? We({ textbox: n, range: R, property: "stroke" }) : void 0, Yt = (ct = (Rt = y != null ? y : W) != null ? Rt : n.strokeWidth) != null ? ct : 0, ht = Ge({ width: Yt }), Ft = (dt = (_t = I != null ? I : yt) != null ? _t : n.stroke) != null ? dt : void 0, vt = Ze({
|
|
4730
|
+
strokeColor: Ft,
|
|
4731
|
+
width: ht
|
|
4596
4732
|
});
|
|
4597
|
-
R && (
|
|
4598
|
-
}
|
|
4599
|
-
|
|
4600
|
-
const
|
|
4601
|
-
if (
|
|
4602
|
-
const
|
|
4603
|
-
|
|
4604
|
-
} else n.textCaseRaw === void 0 && (n.textCaseRaw =
|
|
4605
|
-
n.uppercase =
|
|
4606
|
-
let
|
|
4607
|
-
if (R)
|
|
4608
|
-
|
|
4609
|
-
|
|
4610
|
-
|
|
4611
|
-
|
|
4612
|
-
|
|
4613
|
-
|
|
4614
|
-
|
|
4733
|
+
R && (H.stroke = vt, H.strokeWidth = ht), z && (L.stroke = vt, L.strokeWidth = ht, U && (V.stroke = vt, V.strokeWidth = ht));
|
|
4734
|
+
}
|
|
4735
|
+
w !== void 0 && (L.opacity = w), S !== void 0 && (L.backgroundColor = S), A !== void 0 && (L.backgroundOpacity = A), M !== void 0 && (L.paddingTop = M), C !== void 0 && (L.paddingRight = C), j !== void 0 && (L.paddingBottom = j), T !== void 0 && (L.paddingLeft = T), x !== void 0 && (L.radiusTopLeft = x), Z !== void 0 && (L.radiusTopRight = Z), P !== void 0 && (L.radiusBottomRight = P), F !== void 0 && (L.radiusBottomLeft = F);
|
|
4736
|
+
const Ut = (Nt = n.textCaseRaw) != null ? Nt : (ot = n.text) != null ? ot : "", mt = !!n.uppercase, Tt = c !== void 0, Et = Tt ? c != null ? c : "" : Ut, Ot = p != null ? p : mt;
|
|
4737
|
+
if (Tt || Ot !== mt) {
|
|
4738
|
+
const W = Ot ? oe({ value: Et }) : Et;
|
|
4739
|
+
L.text = W, n.textCaseRaw = Et;
|
|
4740
|
+
} else n.textCaseRaw === void 0 && (n.textCaseRaw = Ut);
|
|
4741
|
+
n.uppercase = Ot, n.set(L);
|
|
4742
|
+
let Lt = !1;
|
|
4743
|
+
if (R) {
|
|
4744
|
+
const W = se({ textbox: n, styles: H, range: R }), yt = X ? se({ textbox: n, styles: G, range: X }) : !1;
|
|
4745
|
+
Lt = W || yt;
|
|
4746
|
+
} else if (Object.keys(V).length) {
|
|
4747
|
+
const W = no({ textbox: n });
|
|
4748
|
+
W && (Lt = se({ textbox: n, styles: V, range: W }));
|
|
4749
|
+
}
|
|
4750
|
+
Lt && (n.dirty = !0), (S !== void 0 || A !== void 0 || M !== void 0 || C !== void 0 || j !== void 0 || T !== void 0 || x !== void 0 || Z !== void 0 || P !== void 0 || F !== void 0) && (n.dirty = !0), n.setCoords(), o || a.requestRenderAll(), i.resumeHistory(), s || i.saveState();
|
|
4751
|
+
const Pt = q._getSnapshot(n);
|
|
4615
4752
|
return a.fire("editor:text-updated", {
|
|
4616
4753
|
textbox: n,
|
|
4617
4754
|
target: t,
|
|
@@ -4620,11 +4757,11 @@ class Q {
|
|
|
4620
4757
|
withoutSave: !!s,
|
|
4621
4758
|
skipRender: !!o
|
|
4622
4759
|
},
|
|
4623
|
-
updates:
|
|
4760
|
+
updates: L,
|
|
4624
4761
|
before: r,
|
|
4625
|
-
after:
|
|
4762
|
+
after: Pt,
|
|
4626
4763
|
selectionRange: R != null ? R : void 0,
|
|
4627
|
-
selectionStyles: R && Object.keys(
|
|
4764
|
+
selectionStyles: R && Object.keys(H).length ? H : void 0
|
|
4628
4765
|
}), n;
|
|
4629
4766
|
}
|
|
4630
4767
|
/**
|
|
@@ -4642,10 +4779,10 @@ class Q {
|
|
|
4642
4779
|
const { canvas: e } = this;
|
|
4643
4780
|
if (!t) {
|
|
4644
4781
|
const s = e.getActiveObject();
|
|
4645
|
-
return
|
|
4782
|
+
return q._isTextbox(s) ? s : null;
|
|
4646
4783
|
}
|
|
4647
4784
|
if (typeof t == "string") {
|
|
4648
|
-
const s = e.getObjects().find((o) =>
|
|
4785
|
+
const s = e.getObjects().find((o) => q._isTextbox(o) && o.id === t);
|
|
4649
4786
|
return s != null ? s : null;
|
|
4650
4787
|
}
|
|
4651
4788
|
return null;
|
|
@@ -4661,7 +4798,7 @@ class Q {
|
|
|
4661
4798
|
*/
|
|
4662
4799
|
_bindEvents() {
|
|
4663
4800
|
const { canvas: t } = this;
|
|
4664
|
-
t.on("object:scaling", this._handleObjectScaling), t.on("object:modified", this._handleObjectModified), t.on("text:editing:entered", this._handleTextEditingEntered), t.on("text:editing:exited", this._handleTextEditingExited), t.on("text:changed",
|
|
4801
|
+
t.on("object:scaling", this._handleObjectScaling), t.on("object:modified", this._handleObjectModified), t.on("text:editing:entered", this._handleTextEditingEntered), t.on("text:editing:exited", this._handleTextEditingExited), t.on("text:changed", q._handleTextChanged);
|
|
4665
4802
|
}
|
|
4666
4803
|
/**
|
|
4667
4804
|
* Реагирует на изменение текста в режиме редактирования: синхронизирует textCaseRaw и uppercase.
|
|
@@ -4669,15 +4806,84 @@ class Q {
|
|
|
4669
4806
|
static _handleTextChanged(t) {
|
|
4670
4807
|
var i;
|
|
4671
4808
|
const { target: e } = t;
|
|
4672
|
-
if (!
|
|
4809
|
+
if (!q._isTextbox(e)) return;
|
|
4673
4810
|
const s = (i = e.text) != null ? i : "", o = !!e.uppercase, n = s.toLocaleLowerCase();
|
|
4674
4811
|
if (o) {
|
|
4675
|
-
const a =
|
|
4812
|
+
const a = oe({ value: n });
|
|
4676
4813
|
a !== s && e.set({ text: a }), e.textCaseRaw = n;
|
|
4677
4814
|
return;
|
|
4678
4815
|
}
|
|
4679
4816
|
e.textCaseRaw = s;
|
|
4680
4817
|
}
|
|
4818
|
+
/**
|
|
4819
|
+
* Обрабатывает горизонтальное масштабирование ActiveSelection: расширяет текстовые блоки по ширине без растяжения шрифта.
|
|
4820
|
+
*/
|
|
4821
|
+
_handleActiveSelectionScaling({
|
|
4822
|
+
selection: t,
|
|
4823
|
+
transform: e
|
|
4824
|
+
}) {
|
|
4825
|
+
var r, c, d, l;
|
|
4826
|
+
const s = (r = e == null ? void 0 : e.corner) != null ? r : "", o = (c = e == null ? void 0 : e.action) != null ? c : "";
|
|
4827
|
+
if (!(["ml", "mr", "tl", "tr", "bl", "br"].includes(s) || o === "scaleX" || o === "scale")) return;
|
|
4828
|
+
const i = Math.abs((l = (d = t.scaleX) != null ? d : e == null ? void 0 : e.scaleX) != null ? l : 1) || 1, a = i === 0 ? 1 : 1 / i;
|
|
4829
|
+
t.getObjects().forEach((u) => {
|
|
4830
|
+
if (!q._isTextbox(u)) return;
|
|
4831
|
+
const g = this._ensureScalingState(u), f = Math.max(1, g.baseWidth * i);
|
|
4832
|
+
u.set({
|
|
4833
|
+
width: f,
|
|
4834
|
+
scaleX: a,
|
|
4835
|
+
scaleY: 1
|
|
4836
|
+
}), u.setCoords(), u.dirty = !0;
|
|
4837
|
+
}), t.setCoords(), this.canvas.requestRenderAll();
|
|
4838
|
+
}
|
|
4839
|
+
/**
|
|
4840
|
+
* Завершает масштабирование ActiveSelection: фиксирует новую ширину текстовых объектов и сбрасывает компенсационный scale.
|
|
4841
|
+
*/
|
|
4842
|
+
_finalizeActiveSelectionScaling({
|
|
4843
|
+
selection: t
|
|
4844
|
+
}) {
|
|
4845
|
+
var o;
|
|
4846
|
+
const e = Math.abs((o = t.scaleX) != null ? o : 1) || 1, s = t.getObjects().filter((n) => q._isTextbox(n));
|
|
4847
|
+
s.length && (s.forEach((n) => {
|
|
4848
|
+
const i = this._ensureScalingState(n), a = Math.max(1, i.baseWidth * e);
|
|
4849
|
+
n.set({
|
|
4850
|
+
width: a,
|
|
4851
|
+
scaleX: 1,
|
|
4852
|
+
scaleY: 1
|
|
4853
|
+
}), n.setCoords(), n.dirty = !0, this.scalingState.delete(n);
|
|
4854
|
+
}), t.set({
|
|
4855
|
+
scaleX: 1
|
|
4856
|
+
}), t.setCoords(), this.canvas.requestRenderAll());
|
|
4857
|
+
}
|
|
4858
|
+
/**
|
|
4859
|
+
* Возвращает диапазоны символов для каждой строки текста без учёта символов переноса.
|
|
4860
|
+
*/
|
|
4861
|
+
_getLineRanges({ textbox: t }) {
|
|
4862
|
+
var n;
|
|
4863
|
+
const e = (n = t.text) != null ? n : "";
|
|
4864
|
+
if (!e.length) return [];
|
|
4865
|
+
const s = e.split(`
|
|
4866
|
+
`);
|
|
4867
|
+
let o = 0;
|
|
4868
|
+
return s.map((i) => {
|
|
4869
|
+
const a = o, r = o + i.length;
|
|
4870
|
+
return o = r + 1, { start: a, end: r };
|
|
4871
|
+
});
|
|
4872
|
+
}
|
|
4873
|
+
/**
|
|
4874
|
+
* Расширяет выделение до полных строк, которые оно пересекает.
|
|
4875
|
+
*/
|
|
4876
|
+
_expandRangeToFullLines({
|
|
4877
|
+
textbox: t,
|
|
4878
|
+
range: e
|
|
4879
|
+
}) {
|
|
4880
|
+
const s = this._getLineRanges({ textbox: t });
|
|
4881
|
+
if (!s.length) return e;
|
|
4882
|
+
let o = e.start, n = e.end;
|
|
4883
|
+
return s.forEach(({ start: i, end: a }) => {
|
|
4884
|
+
e.end > i && e.start < a && (o = Math.min(o, i), n = Math.max(n, a));
|
|
4885
|
+
}), { start: o, end: n };
|
|
4886
|
+
}
|
|
4681
4887
|
/**
|
|
4682
4888
|
* Создаёт или возвращает сохранённое состояние для текущего цикла масштабирования текста.
|
|
4683
4889
|
*/
|
|
@@ -4685,33 +4891,34 @@ class Q {
|
|
|
4685
4891
|
var s, o, n;
|
|
4686
4892
|
let e = this.scalingState.get(t);
|
|
4687
4893
|
if (!e) {
|
|
4688
|
-
const i = (s = t.width) != null ? s : t.calcTextWidth(), a = (o = t.left) != null ? o : 0, r = (n = t.fontSize) != null ? n : 16, {
|
|
4689
|
-
paddingTop:
|
|
4690
|
-
paddingRight:
|
|
4691
|
-
paddingBottom:
|
|
4692
|
-
paddingLeft:
|
|
4894
|
+
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, {
|
|
4895
|
+
paddingTop: d = 0,
|
|
4896
|
+
paddingRight: l = 0,
|
|
4897
|
+
paddingBottom: u = 0,
|
|
4898
|
+
paddingLeft: g = 0
|
|
4693
4899
|
} = t, {
|
|
4694
|
-
radiusTopLeft:
|
|
4695
|
-
radiusTopRight:
|
|
4696
|
-
radiusBottomRight:
|
|
4697
|
-
radiusBottomLeft:
|
|
4900
|
+
radiusTopLeft: f = 0,
|
|
4901
|
+
radiusTopRight: p = 0,
|
|
4902
|
+
radiusBottomRight: m = 0,
|
|
4903
|
+
radiusBottomLeft: v = 0
|
|
4698
4904
|
} = t;
|
|
4699
4905
|
e = {
|
|
4700
4906
|
baseWidth: i,
|
|
4701
4907
|
baseFontSize: r,
|
|
4702
4908
|
baseLeft: a,
|
|
4703
4909
|
basePadding: {
|
|
4704
|
-
top:
|
|
4705
|
-
right:
|
|
4706
|
-
bottom:
|
|
4707
|
-
left:
|
|
4910
|
+
top: d,
|
|
4911
|
+
right: l,
|
|
4912
|
+
bottom: u,
|
|
4913
|
+
left: g
|
|
4708
4914
|
},
|
|
4709
4915
|
baseRadii: {
|
|
4710
|
-
topLeft:
|
|
4711
|
-
topRight:
|
|
4712
|
-
bottomRight:
|
|
4713
|
-
bottomLeft:
|
|
4916
|
+
topLeft: f,
|
|
4917
|
+
topRight: p,
|
|
4918
|
+
bottomRight: m,
|
|
4919
|
+
bottomLeft: v
|
|
4714
4920
|
},
|
|
4921
|
+
baseStyles: JSON.parse(JSON.stringify(c)),
|
|
4715
4922
|
hasWidthChange: !1
|
|
4716
4923
|
}, this.scalingState.set(t, e);
|
|
4717
4924
|
}
|
|
@@ -4722,11 +4929,11 @@ class Q {
|
|
|
4722
4929
|
*/
|
|
4723
4930
|
static _getSnapshot(t) {
|
|
4724
4931
|
const e = ({
|
|
4725
|
-
snapshot:
|
|
4726
|
-
entries:
|
|
4932
|
+
snapshot: H,
|
|
4933
|
+
entries: G
|
|
4727
4934
|
}) => {
|
|
4728
|
-
Object.entries(
|
|
4729
|
-
|
|
4935
|
+
Object.entries(G).forEach(([V, et]) => {
|
|
4936
|
+
et != null && (H[V] = et);
|
|
4730
4937
|
});
|
|
4731
4938
|
}, {
|
|
4732
4939
|
id: s,
|
|
@@ -4737,7 +4944,7 @@ class Q {
|
|
|
4737
4944
|
fontSize: r,
|
|
4738
4945
|
fontWeight: c,
|
|
4739
4946
|
fontStyle: d,
|
|
4740
|
-
underline:
|
|
4947
|
+
underline: l,
|
|
4741
4948
|
linethrough: u,
|
|
4742
4949
|
textAlign: g,
|
|
4743
4950
|
fill: f,
|
|
@@ -4747,27 +4954,27 @@ class Q {
|
|
|
4747
4954
|
backgroundColor: b,
|
|
4748
4955
|
backgroundOpacity: I,
|
|
4749
4956
|
paddingTop: y,
|
|
4750
|
-
paddingRight:
|
|
4751
|
-
paddingBottom:
|
|
4752
|
-
paddingLeft:
|
|
4753
|
-
radiusTopLeft:
|
|
4957
|
+
paddingRight: w,
|
|
4958
|
+
paddingBottom: S,
|
|
4959
|
+
paddingLeft: A,
|
|
4960
|
+
radiusTopLeft: M,
|
|
4754
4961
|
radiusTopRight: C,
|
|
4755
4962
|
radiusBottomRight: j,
|
|
4756
4963
|
radiusBottomLeft: T,
|
|
4757
4964
|
left: x,
|
|
4758
|
-
top:
|
|
4759
|
-
width:
|
|
4760
|
-
height:
|
|
4761
|
-
angle:
|
|
4762
|
-
scaleX:
|
|
4965
|
+
top: Z,
|
|
4966
|
+
width: P,
|
|
4967
|
+
height: F,
|
|
4968
|
+
angle: K,
|
|
4969
|
+
scaleX: L,
|
|
4763
4970
|
scaleY: R
|
|
4764
|
-
} = t,
|
|
4971
|
+
} = t, X = {
|
|
4765
4972
|
id: s,
|
|
4766
4973
|
uppercase: !!i,
|
|
4767
4974
|
textAlign: g
|
|
4768
4975
|
};
|
|
4769
4976
|
return e({
|
|
4770
|
-
snapshot:
|
|
4977
|
+
snapshot: X,
|
|
4771
4978
|
entries: {
|
|
4772
4979
|
text: o,
|
|
4773
4980
|
textCaseRaw: n,
|
|
@@ -4775,7 +4982,7 @@ class Q {
|
|
|
4775
4982
|
fontSize: r,
|
|
4776
4983
|
fontWeight: c,
|
|
4777
4984
|
fontStyle: d,
|
|
4778
|
-
underline:
|
|
4985
|
+
underline: l,
|
|
4779
4986
|
linethrough: u,
|
|
4780
4987
|
fill: f,
|
|
4781
4988
|
stroke: p,
|
|
@@ -4784,22 +4991,22 @@ class Q {
|
|
|
4784
4991
|
backgroundColor: b,
|
|
4785
4992
|
backgroundOpacity: I,
|
|
4786
4993
|
paddingTop: y,
|
|
4787
|
-
paddingRight:
|
|
4788
|
-
paddingBottom:
|
|
4789
|
-
paddingLeft:
|
|
4790
|
-
radiusTopLeft:
|
|
4994
|
+
paddingRight: w,
|
|
4995
|
+
paddingBottom: S,
|
|
4996
|
+
paddingLeft: A,
|
|
4997
|
+
radiusTopLeft: M,
|
|
4791
4998
|
radiusTopRight: C,
|
|
4792
4999
|
radiusBottomRight: j,
|
|
4793
5000
|
radiusBottomLeft: T,
|
|
4794
5001
|
left: x,
|
|
4795
|
-
top:
|
|
4796
|
-
width:
|
|
4797
|
-
height:
|
|
4798
|
-
angle:
|
|
4799
|
-
scaleX:
|
|
5002
|
+
top: Z,
|
|
5003
|
+
width: P,
|
|
5004
|
+
height: F,
|
|
5005
|
+
angle: K,
|
|
5006
|
+
scaleX: L,
|
|
4800
5007
|
scaleY: R
|
|
4801
5008
|
}
|
|
4802
|
-
}),
|
|
5009
|
+
}), X;
|
|
4803
5010
|
}
|
|
4804
5011
|
/**
|
|
4805
5012
|
* Возвращает первый доступный шрифт или дефолтный Arial.
|
|
@@ -4809,52 +5016,52 @@ class Q {
|
|
|
4809
5016
|
return (e = (t = this.fonts[0]) == null ? void 0 : t.family) != null ? e : "Arial";
|
|
4810
5017
|
}
|
|
4811
5018
|
}
|
|
4812
|
-
const
|
|
4813
|
-
value:
|
|
5019
|
+
const tt = ({
|
|
5020
|
+
value: h,
|
|
4814
5021
|
fallback: t = 0
|
|
4815
|
-
}) => typeof
|
|
4816
|
-
value:
|
|
5022
|
+
}) => typeof h == "number" && Number.isFinite(h) ? h : typeof t == "number" && Number.isFinite(t) ? t : 0, Vt = ({
|
|
5023
|
+
value: h,
|
|
4817
5024
|
dimension: t,
|
|
4818
5025
|
useRelativePositions: e
|
|
4819
5026
|
}) => {
|
|
4820
|
-
const s =
|
|
5027
|
+
const s = tt({ value: h });
|
|
4821
5028
|
return e ? s : s / (t || 1);
|
|
4822
|
-
},
|
|
4823
|
-
object:
|
|
5029
|
+
}, ao = ({
|
|
5030
|
+
object: h,
|
|
4824
5031
|
baseWidth: t,
|
|
4825
5032
|
baseHeight: e,
|
|
4826
5033
|
useRelativePositions: s,
|
|
4827
5034
|
centerKeys: o
|
|
4828
5035
|
}) => {
|
|
4829
|
-
const n =
|
|
5036
|
+
const n = h;
|
|
4830
5037
|
if (typeof n[o.x] == "number" && typeof n[o.y] == "number")
|
|
4831
5038
|
return {
|
|
4832
|
-
x:
|
|
5039
|
+
x: Vt({
|
|
4833
5040
|
value: n[o.x],
|
|
4834
5041
|
dimension: t,
|
|
4835
5042
|
useRelativePositions: s
|
|
4836
5043
|
}),
|
|
4837
|
-
y:
|
|
5044
|
+
y: Vt({
|
|
4838
5045
|
value: n[o.y],
|
|
4839
5046
|
dimension: e,
|
|
4840
5047
|
useRelativePositions: s
|
|
4841
5048
|
})
|
|
4842
5049
|
};
|
|
4843
|
-
const { left: a, top: r, width: c, height: d } =
|
|
5050
|
+
const { left: a, top: r, width: c, height: d } = h, l = Vt({
|
|
4844
5051
|
value: a,
|
|
4845
5052
|
dimension: t,
|
|
4846
5053
|
useRelativePositions: s
|
|
4847
|
-
}), u =
|
|
5054
|
+
}), u = Vt({
|
|
4848
5055
|
value: r,
|
|
4849
5056
|
dimension: e,
|
|
4850
5057
|
useRelativePositions: s
|
|
4851
|
-
}), g =
|
|
5058
|
+
}), g = tt({ value: c }) / (t || 1), f = tt({ value: d }) / (e || 1);
|
|
4852
5059
|
return {
|
|
4853
|
-
x:
|
|
5060
|
+
x: l + g / 2,
|
|
4854
5061
|
y: u + f / 2
|
|
4855
5062
|
};
|
|
4856
|
-
},
|
|
4857
|
-
normalizedX:
|
|
5063
|
+
}, ro = ({
|
|
5064
|
+
normalizedX: h,
|
|
4858
5065
|
normalizedY: t,
|
|
4859
5066
|
bounds: e,
|
|
4860
5067
|
targetSize: s,
|
|
@@ -4862,33 +5069,33 @@ const q = ({
|
|
|
4862
5069
|
}) => {
|
|
4863
5070
|
const { left: n, top: i, width: a, height: r } = e;
|
|
4864
5071
|
if (!o) {
|
|
4865
|
-
const { width:
|
|
4866
|
-
return new
|
|
5072
|
+
const { width: l, height: u } = s, g = n + h * (l || a), f = i + t * (u || r);
|
|
5073
|
+
return new $(g, f);
|
|
4867
5074
|
}
|
|
4868
|
-
const c = n +
|
|
4869
|
-
return new
|
|
4870
|
-
},
|
|
4871
|
-
object:
|
|
5075
|
+
const c = n + h * a, d = i + t * r;
|
|
5076
|
+
return new $(c, d);
|
|
5077
|
+
}, co = ({
|
|
5078
|
+
object: h,
|
|
4872
5079
|
montageArea: t,
|
|
4873
5080
|
bounds: e
|
|
4874
5081
|
}) => {
|
|
4875
5082
|
if (!t || !e) return null;
|
|
4876
5083
|
try {
|
|
4877
|
-
const s =
|
|
5084
|
+
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;
|
|
4878
5085
|
return {
|
|
4879
5086
|
x: d,
|
|
4880
|
-
y:
|
|
5087
|
+
y: l
|
|
4881
5088
|
};
|
|
4882
5089
|
} catch (s) {
|
|
4883
5090
|
return null;
|
|
4884
5091
|
}
|
|
4885
|
-
},
|
|
4886
|
-
object:
|
|
5092
|
+
}, lt = ({
|
|
5093
|
+
object: h
|
|
4887
5094
|
}) => {
|
|
4888
|
-
if (!
|
|
5095
|
+
if (!h) return null;
|
|
4889
5096
|
try {
|
|
4890
|
-
|
|
4891
|
-
const t =
|
|
5097
|
+
h.setCoords();
|
|
5098
|
+
const t = h.getBoundingRect(!1, !0), {
|
|
4892
5099
|
left: e = 0,
|
|
4893
5100
|
top: s = 0,
|
|
4894
5101
|
width: o = 0,
|
|
@@ -4905,21 +5112,21 @@ const q = ({
|
|
|
4905
5112
|
} catch (t) {
|
|
4906
5113
|
return null;
|
|
4907
5114
|
}
|
|
4908
|
-
},
|
|
4909
|
-
x1:
|
|
5115
|
+
}, lo = ({
|
|
5116
|
+
x1: h,
|
|
4910
5117
|
y1: t,
|
|
4911
5118
|
x2: e,
|
|
4912
5119
|
y2: s
|
|
4913
|
-
}) => (Math.atan2(s - t, e -
|
|
4914
|
-
if (!
|
|
4915
|
-
const { type: t, coords: e, colorStops: s } =
|
|
5120
|
+
}) => (Math.atan2(s - t, e - h) * 180 / Math.PI + 360) % 360, ho = (h) => {
|
|
5121
|
+
if (!h || typeof h != "object") return null;
|
|
5122
|
+
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;
|
|
4916
5123
|
if (!a || !r || !e) return null;
|
|
4917
5124
|
if (t === "linear") {
|
|
4918
|
-
const { x1:
|
|
4919
|
-
if (typeof
|
|
5125
|
+
const { x1: l, y1: u, x2: g, y2: f } = e;
|
|
5126
|
+
if (typeof l == "number" && typeof u == "number" && typeof g == "number" && typeof f == "number")
|
|
4920
5127
|
return {
|
|
4921
5128
|
type: "linear",
|
|
4922
|
-
angle:
|
|
5129
|
+
angle: lo({ x1: l, y1: u, x2: g, y2: f }),
|
|
4923
5130
|
startColor: a,
|
|
4924
5131
|
endColor: r,
|
|
4925
5132
|
startPosition: c,
|
|
@@ -4927,11 +5134,11 @@ const q = ({
|
|
|
4927
5134
|
};
|
|
4928
5135
|
}
|
|
4929
5136
|
if (t === "radial") {
|
|
4930
|
-
const { x1:
|
|
4931
|
-
if (typeof
|
|
5137
|
+
const { x1: l, y1: u, r2: g } = e;
|
|
5138
|
+
if (typeof l == "number" && typeof u == "number" && typeof g == "number")
|
|
4932
5139
|
return {
|
|
4933
5140
|
type: "radial",
|
|
4934
|
-
centerX:
|
|
5141
|
+
centerX: l * 100,
|
|
4935
5142
|
centerY: u * 100,
|
|
4936
5143
|
radius: g * 100,
|
|
4937
5144
|
startColor: a,
|
|
@@ -4941,8 +5148,8 @@ const q = ({
|
|
|
4941
5148
|
};
|
|
4942
5149
|
}
|
|
4943
5150
|
return null;
|
|
4944
|
-
},
|
|
4945
|
-
class
|
|
5151
|
+
}, ne = "_templateCenterX", ie = "_templateCenterY", ae = "_templateAnchorX", re = "_templateAnchorY";
|
|
5152
|
+
class D {
|
|
4946
5153
|
constructor({ editor: t }) {
|
|
4947
5154
|
this.editor = t;
|
|
4948
5155
|
}
|
|
@@ -4961,28 +5168,28 @@ class L {
|
|
|
4961
5168
|
montageArea: i,
|
|
4962
5169
|
errorManager: a,
|
|
4963
5170
|
backgroundManager: r
|
|
4964
|
-
} = this.editor, c = n.getActiveObject(), d =
|
|
5171
|
+
} = this.editor, c = n.getActiveObject(), d = D._collectObjects(c), { backgroundObject: l } = r != null ? r : {}, u = o && l ? [l] : [], g = [...d, ...u];
|
|
4965
5172
|
if (!g.length)
|
|
4966
5173
|
return a.emitWarning({
|
|
4967
5174
|
origin: "TemplateManager",
|
|
4968
5175
|
method: "serializeSelection",
|
|
4969
|
-
code:
|
|
5176
|
+
code: gt.TEMPLATE_MANAGER.NO_OBJECTS_SELECTED,
|
|
4970
5177
|
message: "Нет объектов для сериализации шаблона"
|
|
4971
5178
|
}), null;
|
|
4972
|
-
const f =
|
|
4973
|
-
object:
|
|
5179
|
+
const f = D._getBounds(i), p = D._getMontageSize({ montageArea: i, bounds: f }), m = p.width, v = p.height, b = g.map((w) => D._serializeObject({
|
|
5180
|
+
object: w,
|
|
4974
5181
|
bounds: f,
|
|
4975
5182
|
baseWidth: m,
|
|
4976
5183
|
baseHeight: v,
|
|
4977
5184
|
montageArea: i != null ? i : null
|
|
4978
|
-
})), I =
|
|
5185
|
+
})), I = bt(k({}, s), {
|
|
4979
5186
|
baseWidth: m,
|
|
4980
5187
|
baseHeight: v,
|
|
4981
5188
|
positionsNormalized: !0,
|
|
4982
5189
|
previewId: e != null ? e : s.previewId
|
|
4983
5190
|
});
|
|
4984
5191
|
return {
|
|
4985
|
-
id: t != null ? t : `template-${
|
|
5192
|
+
id: t != null ? t : `template-${Y()}`,
|
|
4986
5193
|
meta: I,
|
|
4987
5194
|
objects: b
|
|
4988
5195
|
};
|
|
@@ -5004,42 +5211,42 @@ class L {
|
|
|
5004
5211
|
historyManager: i,
|
|
5005
5212
|
errorManager: a,
|
|
5006
5213
|
backgroundManager: r
|
|
5007
|
-
} = this.editor, { objects: c, meta: d, id:
|
|
5214
|
+
} = this.editor, { objects: c, meta: d, id: l } = t != null ? t : {};
|
|
5008
5215
|
if (!(c != null && c.length))
|
|
5009
5216
|
return a.emitWarning({
|
|
5010
5217
|
origin: "TemplateManager",
|
|
5011
5218
|
method: "applyTemplate",
|
|
5012
|
-
code:
|
|
5219
|
+
code: gt.TEMPLATE_MANAGER.INVALID_TEMPLATE,
|
|
5013
5220
|
message: "Шаблон не содержит объектов"
|
|
5014
5221
|
}), null;
|
|
5015
|
-
const u =
|
|
5222
|
+
const u = D._getBounds(n);
|
|
5016
5223
|
if (!u)
|
|
5017
5224
|
return a.emitWarning({
|
|
5018
5225
|
origin: "TemplateManager",
|
|
5019
5226
|
method: "applyTemplate",
|
|
5020
|
-
code:
|
|
5227
|
+
code: gt.TEMPLATE_MANAGER.INVALID_TARGET,
|
|
5021
5228
|
message: "Не удалось определить границы монтажной области"
|
|
5022
5229
|
}), null;
|
|
5023
|
-
const g =
|
|
5230
|
+
const g = D._getMontageSize({ montageArea: n, bounds: u }), f = D._normalizeMeta({ meta: d, fallback: g }), p = D._calculateScale({ meta: f, target: g }), m = !!f.positionsNormalized;
|
|
5024
5231
|
let v = !1, b = !1;
|
|
5025
5232
|
i.suspendHistory();
|
|
5026
5233
|
try {
|
|
5027
|
-
const I = yield
|
|
5234
|
+
const I = yield D._enlivenObjects(c);
|
|
5028
5235
|
if (!I.length)
|
|
5029
5236
|
return a.emitWarning({
|
|
5030
5237
|
origin: "TemplateManager",
|
|
5031
5238
|
method: "applyTemplate",
|
|
5032
|
-
code:
|
|
5239
|
+
code: gt.TEMPLATE_MANAGER.INVALID_TEMPLATE,
|
|
5033
5240
|
message: "Не удалось создать объекты шаблона"
|
|
5034
5241
|
}), null;
|
|
5035
|
-
const { backgroundObject: y, contentObjects:
|
|
5036
|
-
y && (b = yield
|
|
5242
|
+
const { backgroundObject: y, contentObjects: w } = D._extractBackgroundObject(I);
|
|
5243
|
+
y && (b = yield D._applyBackgroundFromObject({
|
|
5037
5244
|
backgroundObject: y,
|
|
5038
5245
|
backgroundManager: r,
|
|
5039
5246
|
errorManager: a
|
|
5040
5247
|
}));
|
|
5041
|
-
const
|
|
5042
|
-
object:
|
|
5248
|
+
const S = w.map((A) => (D._applyTextOverrides({ object: A, data: e }), D._transformObject({
|
|
5249
|
+
object: A,
|
|
5043
5250
|
scale: p,
|
|
5044
5251
|
bounds: u,
|
|
5045
5252
|
targetSize: g,
|
|
@@ -5047,23 +5254,23 @@ class L {
|
|
|
5047
5254
|
baseHeight: f.baseHeight,
|
|
5048
5255
|
montageArea: n,
|
|
5049
5256
|
useRelativePositions: m
|
|
5050
|
-
}),
|
|
5051
|
-
id: `${
|
|
5257
|
+
}), A.set({
|
|
5258
|
+
id: `${A.type}-${Y()}`,
|
|
5052
5259
|
evented: !0
|
|
5053
|
-
}), o.add(
|
|
5054
|
-
return !
|
|
5260
|
+
}), o.add(A), A));
|
|
5261
|
+
return !S.length && !b ? null : (v = S.length > 0 || b, S.length && D._activateObjects({ canvas: o, objects: S }), o.requestRenderAll(), o.fire("editor:template-applied", {
|
|
5055
5262
|
template: t,
|
|
5056
|
-
objects:
|
|
5263
|
+
objects: S,
|
|
5057
5264
|
bounds: u
|
|
5058
|
-
}),
|
|
5265
|
+
}), S);
|
|
5059
5266
|
} catch (I) {
|
|
5060
5267
|
return a.emitError({
|
|
5061
5268
|
origin: "TemplateManager",
|
|
5062
5269
|
method: "applyTemplate",
|
|
5063
|
-
code:
|
|
5270
|
+
code: gt.TEMPLATE_MANAGER.APPLY_FAILED,
|
|
5064
5271
|
message: "Ошибка применения шаблона",
|
|
5065
5272
|
data: {
|
|
5066
|
-
templateId:
|
|
5273
|
+
templateId: l,
|
|
5067
5274
|
error: I
|
|
5068
5275
|
}
|
|
5069
5276
|
}), null;
|
|
@@ -5076,7 +5283,7 @@ class L {
|
|
|
5076
5283
|
* Подготавливает объекты для сериализации.
|
|
5077
5284
|
*/
|
|
5078
5285
|
static _collectObjects(t) {
|
|
5079
|
-
return t ? t instanceof
|
|
5286
|
+
return t ? t instanceof B ? t.getObjects() : [t] : [];
|
|
5080
5287
|
}
|
|
5081
5288
|
/**
|
|
5082
5289
|
* Возвращает габариты объекта.
|
|
@@ -5102,13 +5309,13 @@ class L {
|
|
|
5102
5309
|
static _enlivenObjects(t) {
|
|
5103
5310
|
return _(this, null, function* () {
|
|
5104
5311
|
return (yield Promise.all(t.map((s) => _(null, null, function* () {
|
|
5105
|
-
if (
|
|
5106
|
-
const i = yield
|
|
5312
|
+
if (D._hasSerializedSvgMarkup(s)) {
|
|
5313
|
+
const i = yield D._reviveSvgObject(s);
|
|
5107
5314
|
if (i)
|
|
5108
|
-
return
|
|
5315
|
+
return D._restoreImageScale({ revived: i, serialized: s }), i;
|
|
5109
5316
|
}
|
|
5110
|
-
const o = yield
|
|
5111
|
-
return n ? (
|
|
5317
|
+
const o = yield rt.enlivenObjects([s]), n = o == null ? void 0 : o[0];
|
|
5318
|
+
return n ? (D._restoreImageScale({ revived: n, serialized: s }), n) : null;
|
|
5112
5319
|
})))).filter((s) => !!s);
|
|
5113
5320
|
});
|
|
5114
5321
|
}
|
|
@@ -5127,7 +5334,7 @@ class L {
|
|
|
5127
5334
|
scaleY: a
|
|
5128
5335
|
} = e, r = t, c = "getElement" in r && typeof r.getElement == "function" ? r.getElement() : null, {
|
|
5129
5336
|
naturalWidth: d = 0,
|
|
5130
|
-
naturalHeight:
|
|
5337
|
+
naturalHeight: l = 0,
|
|
5131
5338
|
width: u = 0,
|
|
5132
5339
|
height: g = 0
|
|
5133
5340
|
} = c instanceof HTMLImageElement ? c : {
|
|
@@ -5135,8 +5342,8 @@ class L {
|
|
|
5135
5342
|
naturalHeight: 0,
|
|
5136
5343
|
width: 0,
|
|
5137
5344
|
height: 0
|
|
5138
|
-
}, f =
|
|
5139
|
-
f > 0 && (
|
|
5345
|
+
}, f = tt({ value: d || u || r.width, fallback: 0 }), p = tt({ value: l || g || r.height, fallback: 0 }), m = tt({ value: o, fallback: f }), v = tt({ value: n, fallback: p }), b = tt({ value: i, fallback: r.scaleX || 1 }), I = tt({ value: a, fallback: r.scaleY || 1 }), y = m * b, w = v * I, S = f ? y / f : null, A = p ? w / p : null, M = {};
|
|
5346
|
+
f > 0 && (M.width = f), p > 0 && (M.height = p), S && S > 0 && (M.scaleX = S), A && A > 0 && (M.scaleY = A), r.set(M);
|
|
5140
5347
|
}
|
|
5141
5348
|
/**
|
|
5142
5349
|
* Проверяет, содержит ли сериализованный объект инлайн SVG.
|
|
@@ -5152,23 +5359,10 @@ class L {
|
|
|
5152
5359
|
const e = typeof t.svgMarkup == "string" ? t.svgMarkup : null;
|
|
5153
5360
|
if (!e) return null;
|
|
5154
5361
|
try {
|
|
5155
|
-
const s = yield
|
|
5156
|
-
|
|
5157
|
-
|
|
5158
|
-
return
|
|
5159
|
-
}
|
|
5160
|
-
});
|
|
5161
|
-
}
|
|
5162
|
-
/**
|
|
5163
|
-
* Восстанавливает clipPath из сериализованного объекта в инстанс FabricObject.
|
|
5164
|
-
*/
|
|
5165
|
-
static _reviveClipPath(t) {
|
|
5166
|
-
return _(this, null, function* () {
|
|
5167
|
-
var e;
|
|
5168
|
-
if (!t || typeof t != "object") return null;
|
|
5169
|
-
try {
|
|
5170
|
-
const s = yield at.enlivenObjects([t]);
|
|
5171
|
-
return (e = s == null ? void 0 : s[0]) != null ? e : null;
|
|
5362
|
+
const s = yield fs(e), o = rt.groupSVGElements(s.objects, s.options), n = yield rt.enlivenObjectEnlivables(
|
|
5363
|
+
D._prepareSerializableProps(t)
|
|
5364
|
+
);
|
|
5365
|
+
return o.set(n), o.setCoords(), o;
|
|
5172
5366
|
} catch (s) {
|
|
5173
5367
|
return null;
|
|
5174
5368
|
}
|
|
@@ -5178,7 +5372,7 @@ class L {
|
|
|
5178
5372
|
* Убирает технические поля сериализации, оставляя только применимые свойства.
|
|
5179
5373
|
*/
|
|
5180
5374
|
static _prepareSerializableProps(t) {
|
|
5181
|
-
const e =
|
|
5375
|
+
const e = k({}, t);
|
|
5182
5376
|
return delete e.svgMarkup, delete e.objects, delete e.path, delete e.paths, delete e.type, delete e.version, e;
|
|
5183
5377
|
}
|
|
5184
5378
|
/**
|
|
@@ -5224,26 +5418,26 @@ class L {
|
|
|
5224
5418
|
montageArea: a,
|
|
5225
5419
|
useRelativePositions: r
|
|
5226
5420
|
}) {
|
|
5227
|
-
const c = t, { x: d, y:
|
|
5421
|
+
const c = t, { x: d, y: l } = ao({
|
|
5228
5422
|
object: t,
|
|
5229
5423
|
baseWidth: n,
|
|
5230
5424
|
baseHeight: i,
|
|
5231
5425
|
useRelativePositions: r,
|
|
5232
5426
|
centerKeys: {
|
|
5233
|
-
x:
|
|
5234
|
-
y:
|
|
5427
|
+
x: ne,
|
|
5428
|
+
y: ie
|
|
5235
5429
|
}
|
|
5236
|
-
}), { scaleX: u, scaleY: g } = t, f =
|
|
5430
|
+
}), { scaleX: u, scaleY: g } = t, f = tt({ value: u, fallback: 1 }), p = tt({ value: g, fallback: 1 }), m = D._getPositioningBounds({
|
|
5237
5431
|
bounds: s,
|
|
5238
5432
|
baseWidth: n,
|
|
5239
5433
|
baseHeight: i,
|
|
5240
5434
|
scale: e,
|
|
5241
5435
|
useRelativePositions: r,
|
|
5242
|
-
anchorX:
|
|
5243
|
-
anchorY:
|
|
5244
|
-
}), v =
|
|
5436
|
+
anchorX: D._resolveAnchor(c, ae),
|
|
5437
|
+
anchorY: D._resolveAnchor(c, re)
|
|
5438
|
+
}), v = ro({
|
|
5245
5439
|
normalizedX: d,
|
|
5246
|
-
normalizedY:
|
|
5440
|
+
normalizedY: l,
|
|
5247
5441
|
bounds: m,
|
|
5248
5442
|
targetSize: o,
|
|
5249
5443
|
montageArea: a
|
|
@@ -5251,7 +5445,7 @@ class L {
|
|
|
5251
5445
|
t.set({
|
|
5252
5446
|
scaleX: b,
|
|
5253
5447
|
scaleY: I
|
|
5254
|
-
}), t.setPositionByOrigin(v, "center", "center"), t.setCoords(), delete c[
|
|
5448
|
+
}), t.setPositionByOrigin(v, "center", "center"), t.setCoords(), delete c[ne], delete c[ie], delete c[ae], delete c[re];
|
|
5255
5449
|
}
|
|
5256
5450
|
/**
|
|
5257
5451
|
* Возвращает bounds, в которых должны позиционироваться нормализованные объекты.
|
|
@@ -5267,7 +5461,7 @@ class L {
|
|
|
5267
5461
|
anchorY: a
|
|
5268
5462
|
}) {
|
|
5269
5463
|
if (!n) return t;
|
|
5270
|
-
const r = (e || t.width) * o, c = (s || t.height) * o, d = t.width - r,
|
|
5464
|
+
const r = (e || t.width) * o, c = (s || t.height) * o, d = t.width - r, l = t.height - c, u = t.left + D._calculateAnchorOffset(i, d), g = t.top + D._calculateAnchorOffset(a, l);
|
|
5271
5465
|
return {
|
|
5272
5466
|
left: u,
|
|
5273
5467
|
top: g,
|
|
@@ -5301,8 +5495,8 @@ class L {
|
|
|
5301
5495
|
meta: t,
|
|
5302
5496
|
fallback: e
|
|
5303
5497
|
}) {
|
|
5304
|
-
const { width: s, height: o } = e, r = t || {}, { baseWidth: n = s, baseHeight: i = o } = r, a =
|
|
5305
|
-
return
|
|
5498
|
+
const { width: s, height: o } = e, r = t || {}, { baseWidth: n = s, baseHeight: i = o } = r, a = ut(r, ["baseWidth", "baseHeight"]);
|
|
5499
|
+
return k({
|
|
5306
5500
|
baseWidth: n,
|
|
5307
5501
|
baseHeight: i
|
|
5308
5502
|
}, a);
|
|
@@ -5329,7 +5523,7 @@ class L {
|
|
|
5329
5523
|
t.setActiveObject(e[0]);
|
|
5330
5524
|
return;
|
|
5331
5525
|
}
|
|
5332
|
-
const s = new
|
|
5526
|
+
const s = new B(e, { canvas: t });
|
|
5333
5527
|
t.setActiveObject(s);
|
|
5334
5528
|
}
|
|
5335
5529
|
/**
|
|
@@ -5353,9 +5547,9 @@ class L {
|
|
|
5353
5547
|
baseHeight: o,
|
|
5354
5548
|
montageArea: n
|
|
5355
5549
|
}) {
|
|
5356
|
-
const i = t.toDatalessObject([...
|
|
5357
|
-
if (
|
|
5358
|
-
const y =
|
|
5550
|
+
const i = t.toDatalessObject([...Je]);
|
|
5551
|
+
if (D._isSvgObject(t)) {
|
|
5552
|
+
const y = D._extractSvgMarkup(t);
|
|
5359
5553
|
y && (i.svgMarkup = y, delete i.objects, delete i.path);
|
|
5360
5554
|
}
|
|
5361
5555
|
if (!e) return i;
|
|
@@ -5364,7 +5558,7 @@ class L {
|
|
|
5364
5558
|
top: r,
|
|
5365
5559
|
width: c,
|
|
5366
5560
|
height: d
|
|
5367
|
-
} = e,
|
|
5561
|
+
} = e, l = t.getBoundingRect(!1, !0), u = s || c || 1, g = o || d || 1, f = co({
|
|
5368
5562
|
object: t,
|
|
5369
5563
|
montageArea: n,
|
|
5370
5564
|
bounds: e
|
|
@@ -5374,12 +5568,12 @@ class L {
|
|
|
5374
5568
|
x: (y.x - a) / u,
|
|
5375
5569
|
y: (y.y - r) / g
|
|
5376
5570
|
};
|
|
5377
|
-
})(), m = (
|
|
5378
|
-
return i[
|
|
5571
|
+
})(), m = (l.left - a) / u, v = (l.top - r) / g, b = m + l.width / u, I = v + l.height / g;
|
|
5572
|
+
return i[ne] = p.x, i[ie] = p.y, i[ae] = D._detectAnchor({
|
|
5379
5573
|
center: p.x,
|
|
5380
5574
|
start: m,
|
|
5381
5575
|
end: b
|
|
5382
|
-
}), i[
|
|
5576
|
+
}), i[re] = D._detectAnchor({
|
|
5383
5577
|
center: p.y,
|
|
5384
5578
|
start: v,
|
|
5385
5579
|
end: I
|
|
@@ -5405,7 +5599,7 @@ class L {
|
|
|
5405
5599
|
errorManager: s
|
|
5406
5600
|
}) {
|
|
5407
5601
|
try {
|
|
5408
|
-
const { fill: n, customData: i } = t, { backgroundType: a } = t, r =
|
|
5602
|
+
const { fill: n, customData: i } = t, { backgroundType: a } = t, r = D._cloneCustomData(i);
|
|
5409
5603
|
if (a === "color" && typeof n == "string")
|
|
5410
5604
|
return e.setColorBackground({
|
|
5411
5605
|
color: n,
|
|
@@ -5413,7 +5607,7 @@ class L {
|
|
|
5413
5607
|
withoutSave: !0
|
|
5414
5608
|
}), !0;
|
|
5415
5609
|
if (a === "gradient") {
|
|
5416
|
-
const c =
|
|
5610
|
+
const c = ho(n);
|
|
5417
5611
|
if (c)
|
|
5418
5612
|
return e.setGradientBackground({
|
|
5419
5613
|
gradient: c,
|
|
@@ -5422,7 +5616,7 @@ class L {
|
|
|
5422
5616
|
}), !0;
|
|
5423
5617
|
}
|
|
5424
5618
|
if (a === "image") {
|
|
5425
|
-
const c =
|
|
5619
|
+
const c = D._getImageSource(t);
|
|
5426
5620
|
if (c)
|
|
5427
5621
|
return yield e.setImageBackground({
|
|
5428
5622
|
imageSource: c,
|
|
@@ -5434,7 +5628,7 @@ class L {
|
|
|
5434
5628
|
s.emitWarning({
|
|
5435
5629
|
origin: "TemplateManager",
|
|
5436
5630
|
method: "applyTemplate",
|
|
5437
|
-
code:
|
|
5631
|
+
code: gt.TEMPLATE_MANAGER.APPLY_FAILED,
|
|
5438
5632
|
message: "Не удалось применить фон из шаблона",
|
|
5439
5633
|
data: n
|
|
5440
5634
|
});
|
|
@@ -5464,7 +5658,7 @@ class L {
|
|
|
5464
5658
|
*/
|
|
5465
5659
|
static _cloneCustomData(t) {
|
|
5466
5660
|
if (!(!t || typeof t != "object"))
|
|
5467
|
-
return
|
|
5661
|
+
return k({}, t);
|
|
5468
5662
|
}
|
|
5469
5663
|
/**
|
|
5470
5664
|
* Извлекает src изображения из FabricImage или его исходного элемента.
|
|
@@ -5483,15 +5677,24 @@ class L {
|
|
|
5483
5677
|
const s = t;
|
|
5484
5678
|
return typeof s.src == "string" ? s.src : null;
|
|
5485
5679
|
}
|
|
5680
|
+
/**
|
|
5681
|
+
* Оживляет сериализованный объект, восстанавливая вложенные описания (градиенты, клиппаты и т.д.).
|
|
5682
|
+
* @param serialized - исходное сериализованное описание Fabric-объекта
|
|
5683
|
+
* @returns оживлённый объект с восстановленными вложенными структурами
|
|
5684
|
+
*/
|
|
5685
|
+
// eslint-disable-next-line class-methods-use-this
|
|
5686
|
+
enlivenObjectEnlivables(t) {
|
|
5687
|
+
return rt.enlivenObjectEnlivables(t);
|
|
5688
|
+
}
|
|
5486
5689
|
}
|
|
5487
|
-
const
|
|
5488
|
-
anchors:
|
|
5690
|
+
const uo = 5, ts = "#3D8BF4", ge = 1, Ve = ({
|
|
5691
|
+
anchors: h,
|
|
5489
5692
|
positions: t,
|
|
5490
5693
|
threshold: e
|
|
5491
5694
|
}) => {
|
|
5492
5695
|
let s = 0, o = e + 1, n = null;
|
|
5493
5696
|
for (const i of t)
|
|
5494
|
-
for (const a of
|
|
5697
|
+
for (const a of h) {
|
|
5495
5698
|
const r = Math.abs(a - i);
|
|
5496
5699
|
r > e || r >= o || (s = a - i, o = r, n = a);
|
|
5497
5700
|
}
|
|
@@ -5499,33 +5702,33 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5499
5702
|
delta: s,
|
|
5500
5703
|
guidePosition: n
|
|
5501
5704
|
};
|
|
5502
|
-
},
|
|
5503
|
-
activeBounds:
|
|
5705
|
+
}, go = ({
|
|
5706
|
+
activeBounds: h,
|
|
5504
5707
|
threshold: t,
|
|
5505
5708
|
anchors: e
|
|
5506
5709
|
}) => {
|
|
5507
|
-
const { left: s, right: o, centerX: n, top: i, bottom: a, centerY: r } =
|
|
5710
|
+
const { left: s, right: o, centerX: n, top: i, bottom: a, centerY: r } = h, c = Ve({
|
|
5508
5711
|
anchors: e.vertical,
|
|
5509
5712
|
positions: [s, n, o],
|
|
5510
5713
|
threshold: t
|
|
5511
|
-
}), d =
|
|
5714
|
+
}), d = Ve({
|
|
5512
5715
|
anchors: e.horizontal,
|
|
5513
5716
|
positions: [i, r, a],
|
|
5514
5717
|
threshold: t
|
|
5515
|
-
}),
|
|
5516
|
-
return c.guidePosition !== null &&
|
|
5718
|
+
}), l = [];
|
|
5719
|
+
return c.guidePosition !== null && l.push({
|
|
5517
5720
|
type: "vertical",
|
|
5518
5721
|
position: c.guidePosition
|
|
5519
|
-
}), d.guidePosition !== null &&
|
|
5722
|
+
}), d.guidePosition !== null && l.push({
|
|
5520
5723
|
type: "horizontal",
|
|
5521
5724
|
position: d.guidePosition
|
|
5522
5725
|
}), {
|
|
5523
5726
|
deltaX: c.delta,
|
|
5524
5727
|
deltaY: d.delta,
|
|
5525
|
-
guides:
|
|
5728
|
+
guides: l
|
|
5526
5729
|
};
|
|
5527
|
-
},
|
|
5528
|
-
activeBounds:
|
|
5730
|
+
}, es = ({
|
|
5731
|
+
activeBounds: h,
|
|
5529
5732
|
aligned: t,
|
|
5530
5733
|
threshold: e,
|
|
5531
5734
|
patterns: s,
|
|
@@ -5537,67 +5740,67 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5537
5740
|
bottom: i,
|
|
5538
5741
|
left: a,
|
|
5539
5742
|
right: r
|
|
5540
|
-
} =
|
|
5743
|
+
} = h, c = [];
|
|
5541
5744
|
for (const d of s)
|
|
5542
|
-
for (const
|
|
5745
|
+
for (const l of t)
|
|
5543
5746
|
if (o === "vertical") {
|
|
5544
|
-
const u = n -
|
|
5747
|
+
const u = n - l.bottom, g = Math.abs(u - d.distance);
|
|
5545
5748
|
if (g <= e) {
|
|
5546
5749
|
const m = d.distance - u, v = {
|
|
5547
5750
|
type: o,
|
|
5548
5751
|
axis: d.axis,
|
|
5549
5752
|
refStart: d.start,
|
|
5550
5753
|
refEnd: d.end,
|
|
5551
|
-
activeStart:
|
|
5552
|
-
activeEnd:
|
|
5754
|
+
activeStart: l.bottom,
|
|
5755
|
+
activeEnd: l.bottom + d.distance,
|
|
5553
5756
|
distance: d.distance
|
|
5554
5757
|
};
|
|
5555
5758
|
c.push({ delta: m, guide: v, diff: g });
|
|
5556
5759
|
}
|
|
5557
|
-
const f =
|
|
5760
|
+
const f = l.top - i, p = Math.abs(f - d.distance);
|
|
5558
5761
|
if (p <= e) {
|
|
5559
5762
|
const m = d.distance - f, v = {
|
|
5560
5763
|
type: o,
|
|
5561
5764
|
axis: d.axis,
|
|
5562
5765
|
refStart: d.start,
|
|
5563
5766
|
refEnd: d.end,
|
|
5564
|
-
activeStart:
|
|
5565
|
-
activeEnd:
|
|
5767
|
+
activeStart: l.top - d.distance,
|
|
5768
|
+
activeEnd: l.top,
|
|
5566
5769
|
distance: d.distance
|
|
5567
5770
|
};
|
|
5568
5771
|
c.push({ delta: m, guide: v, diff: p });
|
|
5569
5772
|
}
|
|
5570
5773
|
} else {
|
|
5571
|
-
const u = a -
|
|
5774
|
+
const u = a - l.right, g = Math.abs(u - d.distance);
|
|
5572
5775
|
if (g <= e) {
|
|
5573
5776
|
const m = d.distance - u, v = {
|
|
5574
5777
|
type: o,
|
|
5575
5778
|
axis: d.axis,
|
|
5576
5779
|
refStart: d.start,
|
|
5577
5780
|
refEnd: d.end,
|
|
5578
|
-
activeStart:
|
|
5579
|
-
activeEnd:
|
|
5781
|
+
activeStart: l.right,
|
|
5782
|
+
activeEnd: l.right + d.distance,
|
|
5580
5783
|
distance: d.distance
|
|
5581
5784
|
};
|
|
5582
5785
|
c.push({ delta: m, guide: v, diff: g });
|
|
5583
5786
|
}
|
|
5584
|
-
const f =
|
|
5787
|
+
const f = l.left - r, p = Math.abs(f - d.distance);
|
|
5585
5788
|
if (p <= e) {
|
|
5586
5789
|
const m = d.distance - f, v = {
|
|
5587
5790
|
type: o,
|
|
5588
5791
|
axis: d.axis,
|
|
5589
5792
|
refStart: d.start,
|
|
5590
5793
|
refEnd: d.end,
|
|
5591
|
-
activeStart:
|
|
5592
|
-
activeEnd:
|
|
5794
|
+
activeStart: l.left - d.distance,
|
|
5795
|
+
activeEnd: l.left,
|
|
5593
5796
|
distance: d.distance
|
|
5594
5797
|
};
|
|
5595
5798
|
c.push({ delta: m, guide: v, diff: p });
|
|
5596
5799
|
}
|
|
5597
5800
|
}
|
|
5598
5801
|
return c;
|
|
5599
|
-
},
|
|
5600
|
-
activeBounds:
|
|
5802
|
+
}, fo = ({
|
|
5803
|
+
activeBounds: h,
|
|
5601
5804
|
candidates: t,
|
|
5602
5805
|
threshold: e,
|
|
5603
5806
|
patterns: s
|
|
@@ -5608,68 +5811,68 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5608
5811
|
bottom: i,
|
|
5609
5812
|
left: a,
|
|
5610
5813
|
right: r
|
|
5611
|
-
} =
|
|
5814
|
+
} = h, c = t.filter((y) => Math.min(y.right, r) - Math.max(y.left, a) >= -e);
|
|
5612
5815
|
if (!c.length)
|
|
5613
5816
|
return { delta: 0, guide: null };
|
|
5614
5817
|
const d = [
|
|
5615
5818
|
...c.map((y) => ({ bounds: y, isActive: !1 })),
|
|
5616
|
-
{ bounds:
|
|
5819
|
+
{ bounds: h, isActive: !0 }
|
|
5617
5820
|
];
|
|
5618
|
-
d.sort((y,
|
|
5619
|
-
const
|
|
5620
|
-
if (
|
|
5821
|
+
d.sort((y, w) => y.bounds.top - w.bounds.top);
|
|
5822
|
+
const l = d.findIndex((y) => y.isActive);
|
|
5823
|
+
if (l === -1)
|
|
5621
5824
|
return { delta: 0, guide: null };
|
|
5622
|
-
const u = d[
|
|
5825
|
+
const u = d[l - 1], g = d[l - 2], f = d[l + 1], p = d[l + 2], m = [], v = i - n;
|
|
5623
5826
|
if (u && g) {
|
|
5624
|
-
const { bounds: y } = u, { bounds:
|
|
5625
|
-
if (
|
|
5626
|
-
const C =
|
|
5827
|
+
const { bounds: y } = u, { bounds: w } = g, S = y.top - w.bottom, A = n - y.bottom, M = Math.abs(A - S);
|
|
5828
|
+
if (M <= e) {
|
|
5829
|
+
const C = S - A, j = n + C, T = {
|
|
5627
5830
|
type: "vertical",
|
|
5628
5831
|
axis: o,
|
|
5629
|
-
refStart:
|
|
5832
|
+
refStart: w.bottom,
|
|
5630
5833
|
refEnd: y.top,
|
|
5631
5834
|
activeStart: y.bottom,
|
|
5632
5835
|
activeEnd: j,
|
|
5633
|
-
distance:
|
|
5836
|
+
distance: S
|
|
5634
5837
|
};
|
|
5635
|
-
m.push({ delta: C, guide: T, diff:
|
|
5838
|
+
m.push({ delta: C, guide: T, diff: M });
|
|
5636
5839
|
}
|
|
5637
5840
|
}
|
|
5638
5841
|
if (f && p) {
|
|
5639
|
-
const { bounds: y } = f, { bounds:
|
|
5640
|
-
if (
|
|
5641
|
-
const C =
|
|
5842
|
+
const { bounds: y } = f, { bounds: w } = p, S = w.top - y.bottom, A = y.top - i, M = Math.abs(A - S);
|
|
5843
|
+
if (M <= e) {
|
|
5844
|
+
const C = A - S, j = i + C, T = {
|
|
5642
5845
|
type: "vertical",
|
|
5643
5846
|
axis: o,
|
|
5644
5847
|
refStart: y.bottom,
|
|
5645
|
-
refEnd:
|
|
5848
|
+
refEnd: w.top,
|
|
5646
5849
|
activeStart: j,
|
|
5647
5850
|
activeEnd: y.top,
|
|
5648
|
-
distance:
|
|
5851
|
+
distance: S
|
|
5649
5852
|
};
|
|
5650
|
-
m.push({ delta: C, guide: T, diff:
|
|
5853
|
+
m.push({ delta: C, guide: T, diff: M });
|
|
5651
5854
|
}
|
|
5652
5855
|
}
|
|
5653
5856
|
if (u && f) {
|
|
5654
|
-
const { bounds: y } = u, { bounds:
|
|
5655
|
-
if (
|
|
5656
|
-
const
|
|
5657
|
-
if (
|
|
5658
|
-
const
|
|
5857
|
+
const { bounds: y } = u, { bounds: w } = f, A = w.top - y.bottom - v;
|
|
5858
|
+
if (A >= 0) {
|
|
5859
|
+
const M = A / 2, C = n - y.bottom, j = w.top - i, T = Math.abs(C - M), x = Math.abs(j - M), Z = Math.max(T, x);
|
|
5860
|
+
if (Z <= e) {
|
|
5861
|
+
const P = M - C, F = i + P, K = {
|
|
5659
5862
|
type: "vertical",
|
|
5660
5863
|
axis: o,
|
|
5661
5864
|
refStart: y.bottom,
|
|
5662
|
-
refEnd: y.bottom +
|
|
5663
|
-
activeStart:
|
|
5664
|
-
activeEnd:
|
|
5665
|
-
distance:
|
|
5865
|
+
refEnd: y.bottom + M,
|
|
5866
|
+
activeStart: F,
|
|
5867
|
+
activeEnd: F + M,
|
|
5868
|
+
distance: M
|
|
5666
5869
|
};
|
|
5667
|
-
m.push({ delta:
|
|
5870
|
+
m.push({ delta: P, guide: K, diff: Z });
|
|
5668
5871
|
}
|
|
5669
5872
|
}
|
|
5670
5873
|
}
|
|
5671
|
-
const b =
|
|
5672
|
-
activeBounds:
|
|
5874
|
+
const b = es({
|
|
5875
|
+
activeBounds: h,
|
|
5673
5876
|
aligned: c,
|
|
5674
5877
|
threshold: e,
|
|
5675
5878
|
patterns: s,
|
|
@@ -5677,13 +5880,13 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5677
5880
|
});
|
|
5678
5881
|
if (m.push(...b), !m.length)
|
|
5679
5882
|
return { delta: 0, guide: null };
|
|
5680
|
-
const I = m.reduce((y,
|
|
5883
|
+
const I = m.reduce((y, w) => w.diff < y.diff ? w : y, m[0]);
|
|
5681
5884
|
return {
|
|
5682
5885
|
delta: I.delta,
|
|
5683
5886
|
guide: I.guide
|
|
5684
5887
|
};
|
|
5685
|
-
},
|
|
5686
|
-
activeBounds:
|
|
5888
|
+
}, po = ({
|
|
5889
|
+
activeBounds: h,
|
|
5687
5890
|
candidates: t,
|
|
5688
5891
|
threshold: e,
|
|
5689
5892
|
patterns: s
|
|
@@ -5694,68 +5897,68 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5694
5897
|
right: i,
|
|
5695
5898
|
top: a,
|
|
5696
5899
|
bottom: r
|
|
5697
|
-
} =
|
|
5900
|
+
} = h, c = t.filter((y) => Math.min(y.bottom, r) - Math.max(y.top, a) >= -e);
|
|
5698
5901
|
if (!c.length)
|
|
5699
5902
|
return { delta: 0, guide: null };
|
|
5700
5903
|
const d = [
|
|
5701
5904
|
...c.map((y) => ({ bounds: y, isActive: !1 })),
|
|
5702
|
-
{ bounds:
|
|
5905
|
+
{ bounds: h, isActive: !0 }
|
|
5703
5906
|
];
|
|
5704
|
-
d.sort((y,
|
|
5705
|
-
const
|
|
5706
|
-
if (
|
|
5907
|
+
d.sort((y, w) => y.bounds.left - w.bounds.left);
|
|
5908
|
+
const l = d.findIndex((y) => y.isActive);
|
|
5909
|
+
if (l === -1)
|
|
5707
5910
|
return { delta: 0, guide: null };
|
|
5708
|
-
const u = d[
|
|
5911
|
+
const u = d[l - 1], g = d[l - 2], f = d[l + 1], p = d[l + 2], m = [], v = i - n;
|
|
5709
5912
|
if (u && g) {
|
|
5710
|
-
const { bounds: y } = u, { bounds:
|
|
5711
|
-
if (
|
|
5712
|
-
const C =
|
|
5913
|
+
const { bounds: y } = u, { bounds: w } = g, S = y.left - w.right, A = n - y.right, M = Math.abs(A - S);
|
|
5914
|
+
if (M <= e) {
|
|
5915
|
+
const C = S - A, j = n + C, T = {
|
|
5713
5916
|
type: "horizontal",
|
|
5714
5917
|
axis: o,
|
|
5715
|
-
refStart:
|
|
5918
|
+
refStart: w.right,
|
|
5716
5919
|
refEnd: y.left,
|
|
5717
5920
|
activeStart: y.right,
|
|
5718
5921
|
activeEnd: j,
|
|
5719
|
-
distance:
|
|
5922
|
+
distance: S
|
|
5720
5923
|
};
|
|
5721
|
-
m.push({ delta: C, guide: T, diff:
|
|
5924
|
+
m.push({ delta: C, guide: T, diff: M });
|
|
5722
5925
|
}
|
|
5723
5926
|
}
|
|
5724
5927
|
if (f && p) {
|
|
5725
|
-
const { bounds: y } = f, { bounds:
|
|
5726
|
-
if (
|
|
5727
|
-
const C =
|
|
5928
|
+
const { bounds: y } = f, { bounds: w } = p, S = w.left - y.right, A = y.left - i, M = Math.abs(A - S);
|
|
5929
|
+
if (M <= e) {
|
|
5930
|
+
const C = A - S, j = i + C, T = {
|
|
5728
5931
|
type: "horizontal",
|
|
5729
5932
|
axis: o,
|
|
5730
5933
|
refStart: y.right,
|
|
5731
|
-
refEnd:
|
|
5934
|
+
refEnd: w.left,
|
|
5732
5935
|
activeStart: j,
|
|
5733
5936
|
activeEnd: y.left,
|
|
5734
|
-
distance:
|
|
5937
|
+
distance: S
|
|
5735
5938
|
};
|
|
5736
|
-
m.push({ delta: C, guide: T, diff:
|
|
5939
|
+
m.push({ delta: C, guide: T, diff: M });
|
|
5737
5940
|
}
|
|
5738
5941
|
}
|
|
5739
5942
|
if (u && f) {
|
|
5740
|
-
const { bounds: y } = u, { bounds:
|
|
5741
|
-
if (
|
|
5742
|
-
const
|
|
5743
|
-
if (
|
|
5744
|
-
const
|
|
5943
|
+
const { bounds: y } = u, { bounds: w } = f, A = w.left - y.right - v;
|
|
5944
|
+
if (A >= 0) {
|
|
5945
|
+
const M = A / 2, C = n - y.right, j = w.left - i, T = Math.abs(C - M), x = Math.abs(j - M), Z = Math.max(T, x);
|
|
5946
|
+
if (Z <= e) {
|
|
5947
|
+
const P = M - C, F = i + P, K = {
|
|
5745
5948
|
type: "horizontal",
|
|
5746
5949
|
axis: o,
|
|
5747
5950
|
refStart: y.right,
|
|
5748
|
-
refEnd: y.right +
|
|
5749
|
-
activeStart:
|
|
5750
|
-
activeEnd:
|
|
5751
|
-
distance:
|
|
5951
|
+
refEnd: y.right + M,
|
|
5952
|
+
activeStart: F,
|
|
5953
|
+
activeEnd: F + M,
|
|
5954
|
+
distance: M
|
|
5752
5955
|
};
|
|
5753
|
-
m.push({ delta:
|
|
5956
|
+
m.push({ delta: P, guide: K, diff: Z });
|
|
5754
5957
|
}
|
|
5755
5958
|
}
|
|
5756
5959
|
}
|
|
5757
|
-
const b =
|
|
5758
|
-
activeBounds:
|
|
5960
|
+
const b = es({
|
|
5961
|
+
activeBounds: h,
|
|
5759
5962
|
aligned: c,
|
|
5760
5963
|
threshold: e,
|
|
5761
5964
|
patterns: s,
|
|
@@ -5763,24 +5966,24 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5763
5966
|
});
|
|
5764
5967
|
if (m.push(...b), !m.length)
|
|
5765
5968
|
return { delta: 0, guide: null };
|
|
5766
|
-
const I = m.reduce((y,
|
|
5969
|
+
const I = m.reduce((y, w) => w.diff < y.diff ? w : y, m[0]);
|
|
5767
5970
|
return {
|
|
5768
5971
|
delta: I.delta,
|
|
5769
5972
|
guide: I.guide
|
|
5770
5973
|
};
|
|
5771
|
-
},
|
|
5772
|
-
activeBounds:
|
|
5974
|
+
}, mo = ({
|
|
5975
|
+
activeBounds: h,
|
|
5773
5976
|
candidates: t,
|
|
5774
5977
|
threshold: e,
|
|
5775
5978
|
spacingPatterns: s
|
|
5776
5979
|
}) => {
|
|
5777
|
-
const o =
|
|
5778
|
-
activeBounds:
|
|
5980
|
+
const o = fo({
|
|
5981
|
+
activeBounds: h,
|
|
5779
5982
|
candidates: t,
|
|
5780
5983
|
threshold: e,
|
|
5781
5984
|
patterns: s.vertical
|
|
5782
|
-
}), n =
|
|
5783
|
-
activeBounds:
|
|
5985
|
+
}), n = po({
|
|
5986
|
+
activeBounds: h,
|
|
5784
5987
|
candidates: t,
|
|
5785
5988
|
threshold: e,
|
|
5786
5989
|
patterns: s.horizontal
|
|
@@ -5790,8 +5993,8 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5790
5993
|
deltaY: o.delta,
|
|
5791
5994
|
guides: i
|
|
5792
5995
|
};
|
|
5793
|
-
},
|
|
5794
|
-
context:
|
|
5996
|
+
}, yo = ({
|
|
5997
|
+
context: h,
|
|
5795
5998
|
x: t,
|
|
5796
5999
|
y: e,
|
|
5797
6000
|
width: s,
|
|
@@ -5799,9 +6002,9 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5799
6002
|
radius: n
|
|
5800
6003
|
}) => {
|
|
5801
6004
|
const i = Math.min(n, s / 2, o / 2);
|
|
5802
|
-
|
|
5803
|
-
},
|
|
5804
|
-
context:
|
|
6005
|
+
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();
|
|
6006
|
+
}, fe = ({
|
|
6007
|
+
context: h,
|
|
5805
6008
|
type: t,
|
|
5806
6009
|
axis: e,
|
|
5807
6010
|
start: s,
|
|
@@ -5812,24 +6015,24 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5812
6015
|
textColor: r = "#ffffff",
|
|
5813
6016
|
fontFamily: c = "sans-serif",
|
|
5814
6017
|
lineWidth: d = 1,
|
|
5815
|
-
padding:
|
|
6018
|
+
padding: l = 4,
|
|
5816
6019
|
radius: u = 4,
|
|
5817
6020
|
offsetAlongAxis: g = 0,
|
|
5818
6021
|
offsetPerpendicular: f = 0
|
|
5819
6022
|
}) => {
|
|
5820
|
-
const p = i || 1, m = 12 / p, v =
|
|
5821
|
-
|
|
5822
|
-
const
|
|
5823
|
-
|
|
5824
|
-
context:
|
|
6023
|
+
const p = i || 1, m = 12 / p, v = l / p, b = u / p, I = (s + o) / 2 + g, y = t === "vertical" ? e + f : I, w = t === "vertical" ? I : e + f;
|
|
6024
|
+
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";
|
|
6025
|
+
const A = h.measureText(n).width + v * 2, M = m + v * 2, C = y - A / 2, j = w - M / 2;
|
|
6026
|
+
h.beginPath(), yo({
|
|
6027
|
+
context: h,
|
|
5825
6028
|
x: C,
|
|
5826
6029
|
y: j,
|
|
5827
|
-
width:
|
|
5828
|
-
height:
|
|
6030
|
+
width: A,
|
|
6031
|
+
height: M,
|
|
5829
6032
|
radius: b
|
|
5830
|
-
}),
|
|
5831
|
-
},
|
|
5832
|
-
context:
|
|
6033
|
+
}), h.fill(), h.fillStyle = r, h.fillText(n, y, w), h.restore();
|
|
6034
|
+
}, vo = ({
|
|
6035
|
+
context: h,
|
|
5833
6036
|
guide: t,
|
|
5834
6037
|
zoom: e
|
|
5835
6038
|
}) => {
|
|
@@ -5842,31 +6045,31 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5842
6045
|
activeEnd: r,
|
|
5843
6046
|
distance: c
|
|
5844
6047
|
} = t, d = Math.round(c).toString();
|
|
5845
|
-
|
|
5846
|
-
const
|
|
5847
|
-
|
|
5848
|
-
context:
|
|
6048
|
+
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();
|
|
6049
|
+
const l = ts;
|
|
6050
|
+
fe({
|
|
6051
|
+
context: h,
|
|
5849
6052
|
type: s,
|
|
5850
6053
|
axis: o,
|
|
5851
6054
|
start: n,
|
|
5852
6055
|
end: i,
|
|
5853
6056
|
text: d,
|
|
5854
6057
|
zoom: e,
|
|
5855
|
-
color:
|
|
5856
|
-
lineWidth:
|
|
5857
|
-
}),
|
|
5858
|
-
context:
|
|
6058
|
+
color: l,
|
|
6059
|
+
lineWidth: ge
|
|
6060
|
+
}), fe({
|
|
6061
|
+
context: h,
|
|
5859
6062
|
type: s,
|
|
5860
6063
|
axis: o,
|
|
5861
6064
|
start: a,
|
|
5862
6065
|
end: r,
|
|
5863
6066
|
text: d,
|
|
5864
6067
|
zoom: e,
|
|
5865
|
-
color:
|
|
5866
|
-
lineWidth:
|
|
6068
|
+
color: l,
|
|
6069
|
+
lineWidth: ge
|
|
5867
6070
|
});
|
|
5868
|
-
},
|
|
5869
|
-
anchors:
|
|
6071
|
+
}, Xe = ({
|
|
6072
|
+
anchors: h,
|
|
5870
6073
|
bounds: t
|
|
5871
6074
|
}) => {
|
|
5872
6075
|
const {
|
|
@@ -5877,24 +6080,24 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5877
6080
|
bottom: i,
|
|
5878
6081
|
centerY: a
|
|
5879
6082
|
} = t;
|
|
5880
|
-
|
|
5881
|
-
},
|
|
5882
|
-
bounds:
|
|
6083
|
+
h.vertical.push(e, o, s), h.horizontal.push(n, a, i);
|
|
6084
|
+
}, Ke = ({
|
|
6085
|
+
bounds: h,
|
|
5883
6086
|
type: t,
|
|
5884
6087
|
primaryStart: e,
|
|
5885
6088
|
primaryEnd: s
|
|
5886
6089
|
}) => {
|
|
5887
|
-
const o = [], n = e === "top" ? "left" : "top", i = s === "bottom" ? "right" : "bottom", a = [...
|
|
6090
|
+
const o = [], n = e === "top" ? "left" : "top", i = s === "bottom" ? "right" : "bottom", a = [...h].sort((r, c) => r[e] - c[e]);
|
|
5888
6091
|
for (let r = 0; r < a.length; r += 1) {
|
|
5889
6092
|
const c = a[r];
|
|
5890
|
-
let d = null,
|
|
6093
|
+
let d = null, l = Number.POSITIVE_INFINITY;
|
|
5891
6094
|
for (let p = r + 1; p < a.length; p += 1) {
|
|
5892
6095
|
const m = a[p];
|
|
5893
6096
|
if (Math.min(c[i], m[i]) - Math.max(c[n], m[n]) < 0) continue;
|
|
5894
6097
|
const b = m[e] - c[s];
|
|
5895
|
-
b < 0 || b <
|
|
6098
|
+
b < 0 || b < l && (l = b, d = m);
|
|
5896
6099
|
}
|
|
5897
|
-
if (!d ||
|
|
6100
|
+
if (!d || l === Number.POSITIVE_INFINITY) continue;
|
|
5898
6101
|
const u = Math.max(c[n], d[n]), g = Math.min(c[i], d[i]), f = (u + g) / 2;
|
|
5899
6102
|
o.push({
|
|
5900
6103
|
type: t,
|
|
@@ -5905,38 +6108,38 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5905
6108
|
});
|
|
5906
6109
|
}
|
|
5907
6110
|
return o;
|
|
5908
|
-
},
|
|
5909
|
-
bounds:
|
|
6111
|
+
}, bo = ({
|
|
6112
|
+
bounds: h
|
|
5910
6113
|
}) => {
|
|
5911
|
-
const t =
|
|
5912
|
-
bounds:
|
|
6114
|
+
const t = Ke({
|
|
6115
|
+
bounds: h,
|
|
5913
6116
|
type: "vertical",
|
|
5914
6117
|
primaryStart: "top",
|
|
5915
6118
|
primaryEnd: "bottom"
|
|
5916
|
-
}), e =
|
|
5917
|
-
bounds:
|
|
6119
|
+
}), e = Ke({
|
|
6120
|
+
bounds: h,
|
|
5918
6121
|
type: "horizontal",
|
|
5919
6122
|
primaryStart: "left",
|
|
5920
6123
|
primaryEnd: "right"
|
|
5921
6124
|
});
|
|
5922
6125
|
return { vertical: t, horizontal: e };
|
|
5923
|
-
},
|
|
5924
|
-
activeObject:
|
|
6126
|
+
}, Mo = ["montage-area", "background", "interaction-blocker"], ss = ({
|
|
6127
|
+
activeObject: h
|
|
5925
6128
|
}) => {
|
|
5926
6129
|
const t = /* @__PURE__ */ new Set();
|
|
5927
|
-
return
|
|
5928
|
-
},
|
|
5929
|
-
object:
|
|
6130
|
+
return h && (t.add(h), h instanceof B && h.getObjects().forEach((e) => t.add(e))), t;
|
|
6131
|
+
}, os = ({
|
|
6132
|
+
object: h,
|
|
5930
6133
|
excluded: t,
|
|
5931
|
-
ignoredIds: e =
|
|
6134
|
+
ignoredIds: e = Mo
|
|
5932
6135
|
}) => {
|
|
5933
|
-
if (t.has(
|
|
5934
|
-
const { visible: s = !0 } =
|
|
6136
|
+
if (t.has(h)) return !0;
|
|
6137
|
+
const { visible: s = !0 } = h;
|
|
5935
6138
|
if (!s) return !0;
|
|
5936
|
-
const { id: o } =
|
|
6139
|
+
const { id: o } = h;
|
|
5937
6140
|
return !!(o && e.includes(o));
|
|
5938
6141
|
};
|
|
5939
|
-
class
|
|
6142
|
+
class wo {
|
|
5940
6143
|
/**
|
|
5941
6144
|
* Создаёт менеджер прилипания и инициализирует слушатели событий.
|
|
5942
6145
|
*/
|
|
@@ -5994,24 +6197,24 @@ class ro {
|
|
|
5994
6197
|
return;
|
|
5995
6198
|
}
|
|
5996
6199
|
!this.anchors.vertical.length && !this.anchors.horizontal.length && this._cacheAnchors({ activeObject: e });
|
|
5997
|
-
let o =
|
|
6200
|
+
let o = lt({ object: e });
|
|
5998
6201
|
if (!o) {
|
|
5999
6202
|
this._clearGuides();
|
|
6000
6203
|
return;
|
|
6001
6204
|
}
|
|
6002
|
-
const { canvas: n } = this, i = n.getZoom() || 1, a =
|
|
6205
|
+
const { canvas: n } = this, i = n.getZoom() || 1, a = uo / i, r = go({
|
|
6003
6206
|
activeBounds: o,
|
|
6004
6207
|
threshold: a,
|
|
6005
6208
|
anchors: this.anchors
|
|
6006
|
-
}), { deltaX: c, deltaY: d, guides:
|
|
6209
|
+
}), { deltaX: c, deltaY: d, guides: l } = r;
|
|
6007
6210
|
if (c !== 0 || d !== 0) {
|
|
6008
6211
|
const { left: m = 0, top: v = 0 } = e;
|
|
6009
6212
|
e.set({
|
|
6010
6213
|
left: m + c,
|
|
6011
6214
|
top: v + d
|
|
6012
|
-
}), e.setCoords(), o = (f =
|
|
6215
|
+
}), e.setCoords(), o = (f = lt({ object: e })) != null ? f : o;
|
|
6013
6216
|
}
|
|
6014
|
-
const u = this.cachedTargetBounds.length ? this.cachedTargetBounds : this._collectTargets({ activeObject: e }).map((m) =>
|
|
6217
|
+
const u = this.cachedTargetBounds.length ? this.cachedTargetBounds : this._collectTargets({ activeObject: e }).map((m) => lt({ object: m })).filter((m) => !!m), g = mo({
|
|
6015
6218
|
activeBounds: o,
|
|
6016
6219
|
candidates: u,
|
|
6017
6220
|
threshold: a,
|
|
@@ -6022,10 +6225,10 @@ class ro {
|
|
|
6022
6225
|
e.set({
|
|
6023
6226
|
left: m + g.deltaX,
|
|
6024
6227
|
top: v + g.deltaY
|
|
6025
|
-
}), e.setCoords(), o = (p =
|
|
6228
|
+
}), e.setCoords(), o = (p = lt({ object: e })) != null ? p : o;
|
|
6026
6229
|
}
|
|
6027
6230
|
this._applyGuides({
|
|
6028
|
-
guides:
|
|
6231
|
+
guides: l,
|
|
6029
6232
|
spacingGuides: g.guides
|
|
6030
6233
|
});
|
|
6031
6234
|
}
|
|
@@ -6050,13 +6253,13 @@ class ro {
|
|
|
6050
6253
|
const { canvas: t, guideBounds: e } = this, s = t.getSelectionContext();
|
|
6051
6254
|
if (!s) return;
|
|
6052
6255
|
const o = e != null ? e : this._calculateViewportBounds(), { left: n, right: i, top: a, bottom: r } = o, { viewportTransform: c } = t, d = t.getZoom() || 1;
|
|
6053
|
-
s.save(), Array.isArray(c) && s.transform(...c), s.lineWidth =
|
|
6054
|
-
for (const
|
|
6055
|
-
s.beginPath(),
|
|
6056
|
-
for (const
|
|
6057
|
-
|
|
6256
|
+
s.save(), Array.isArray(c) && s.transform(...c), s.lineWidth = ge / d, s.strokeStyle = ts, s.setLineDash([4, 4]);
|
|
6257
|
+
for (const l of this.activeGuides)
|
|
6258
|
+
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();
|
|
6259
|
+
for (const l of this.activeSpacingGuides)
|
|
6260
|
+
vo({
|
|
6058
6261
|
context: s,
|
|
6059
|
-
guide:
|
|
6262
|
+
guide: l,
|
|
6060
6263
|
zoom: d
|
|
6061
6264
|
});
|
|
6062
6265
|
s.restore();
|
|
@@ -6092,12 +6295,12 @@ class ro {
|
|
|
6092
6295
|
_cacheAnchors({ activeObject: t }) {
|
|
6093
6296
|
const e = this._collectTargets({ activeObject: t }), s = { vertical: [], horizontal: [] }, o = [];
|
|
6094
6297
|
for (const a of e) {
|
|
6095
|
-
const r =
|
|
6096
|
-
r && (
|
|
6298
|
+
const r = lt({ object: a });
|
|
6299
|
+
r && (Xe({ anchors: s, bounds: r }), o.push(r));
|
|
6097
6300
|
}
|
|
6098
|
-
const { montageArea: n } = this.editor, i =
|
|
6301
|
+
const { montageArea: n } = this.editor, i = lt({ object: n });
|
|
6099
6302
|
if (i) {
|
|
6100
|
-
|
|
6303
|
+
Xe({ anchors: s, bounds: i });
|
|
6101
6304
|
const { left: a, right: r, top: c, bottom: d } = i;
|
|
6102
6305
|
this.guideBounds = {
|
|
6103
6306
|
left: a,
|
|
@@ -6107,15 +6310,15 @@ class ro {
|
|
|
6107
6310
|
};
|
|
6108
6311
|
} else
|
|
6109
6312
|
this.guideBounds = this._calculateViewportBounds();
|
|
6110
|
-
this.anchors = s, this.spacingPatterns =
|
|
6313
|
+
this.anchors = s, this.spacingPatterns = bo({ bounds: o }), this.cachedTargetBounds = o;
|
|
6111
6314
|
}
|
|
6112
6315
|
/**
|
|
6113
6316
|
* Собирает объекты, подходящие для прилипания, исключая активный объект и запрещённые id.
|
|
6114
6317
|
*/
|
|
6115
6318
|
_collectTargets({ activeObject: t }) {
|
|
6116
|
-
const e =
|
|
6319
|
+
const e = ss({ activeObject: t }), s = [];
|
|
6117
6320
|
return this.canvas.forEachObject((o) => {
|
|
6118
|
-
|
|
6321
|
+
os({ object: o, excluded: e }) || s.push(o);
|
|
6119
6322
|
}), s;
|
|
6120
6323
|
}
|
|
6121
6324
|
/**
|
|
@@ -6129,17 +6332,17 @@ class ro {
|
|
|
6129
6332
|
i = 1,
|
|
6130
6333
|
a = 0,
|
|
6131
6334
|
r = 0
|
|
6132
|
-
] = e != null ? e : [], c = (0 - a) / n, d = (0 - r) / i,
|
|
6335
|
+
] = e != null ? e : [], c = (0 - a) / n, d = (0 - r) / i, l = (s - a) / n, u = (o - r) / i;
|
|
6133
6336
|
return {
|
|
6134
6337
|
left: c,
|
|
6135
|
-
right:
|
|
6338
|
+
right: l,
|
|
6136
6339
|
top: d,
|
|
6137
6340
|
bottom: u
|
|
6138
6341
|
};
|
|
6139
6342
|
}
|
|
6140
6343
|
}
|
|
6141
|
-
const
|
|
6142
|
-
class
|
|
6344
|
+
const Qe = "#3D8BF4", qe = 1;
|
|
6345
|
+
class At {
|
|
6143
6346
|
/**
|
|
6144
6347
|
* Создаёт менеджер измерений и инициализирует события.
|
|
6145
6348
|
*/
|
|
@@ -6244,15 +6447,15 @@ class wt {
|
|
|
6244
6447
|
this._clearGuides();
|
|
6245
6448
|
return;
|
|
6246
6449
|
}
|
|
6247
|
-
const n =
|
|
6450
|
+
const n = lt({ object: o });
|
|
6248
6451
|
if (!n) {
|
|
6249
6452
|
this._clearGuides();
|
|
6250
6453
|
return;
|
|
6251
6454
|
}
|
|
6252
|
-
const i =
|
|
6455
|
+
const i = At._resolveTarget({
|
|
6253
6456
|
event: t,
|
|
6254
6457
|
activeObject: o
|
|
6255
|
-
}), { montageArea: a } = s, r = i != null ? i : a, c = r === a, d =
|
|
6458
|
+
}), { montageArea: a } = s, r = i != null ? i : a, c = r === a, d = lt({ object: r });
|
|
6256
6459
|
if (!d) {
|
|
6257
6460
|
this._clearGuides();
|
|
6258
6461
|
return;
|
|
@@ -6261,7 +6464,7 @@ class wt {
|
|
|
6261
6464
|
this._clearGuides();
|
|
6262
6465
|
return;
|
|
6263
6466
|
}
|
|
6264
|
-
const u =
|
|
6467
|
+
const u = At._buildGuides({
|
|
6265
6468
|
activeBounds: n,
|
|
6266
6469
|
targetBounds: d,
|
|
6267
6470
|
targetIsMontageArea: c
|
|
@@ -6279,8 +6482,8 @@ class wt {
|
|
|
6279
6482
|
event: t,
|
|
6280
6483
|
activeObject: e
|
|
6281
6484
|
}) {
|
|
6282
|
-
const { target: s } = t, o =
|
|
6283
|
-
return s && !
|
|
6485
|
+
const { target: s } = t, o = ss({ activeObject: e });
|
|
6486
|
+
return s && !os({ object: s, excluded: o }) ? s : null;
|
|
6284
6487
|
}
|
|
6285
6488
|
/**
|
|
6286
6489
|
* Собирает вертикальные и горизонтальные направляющие расстояний.
|
|
@@ -6290,11 +6493,11 @@ class wt {
|
|
|
6290
6493
|
targetBounds: e,
|
|
6291
6494
|
targetIsMontageArea: s
|
|
6292
6495
|
}) {
|
|
6293
|
-
const o =
|
|
6496
|
+
const o = At._buildHorizontalGuides({
|
|
6294
6497
|
activeBounds: t,
|
|
6295
6498
|
targetBounds: e,
|
|
6296
6499
|
targetIsMontageArea: s
|
|
6297
|
-
}), n =
|
|
6500
|
+
}), n = At._buildVerticalGuides({
|
|
6298
6501
|
activeBounds: t,
|
|
6299
6502
|
targetBounds: e,
|
|
6300
6503
|
targetIsMontageArea: s
|
|
@@ -6317,7 +6520,7 @@ class wt {
|
|
|
6317
6520
|
centerY: c = 0
|
|
6318
6521
|
} = t, {
|
|
6319
6522
|
left: d = 0,
|
|
6320
|
-
right:
|
|
6523
|
+
right: l = 0,
|
|
6321
6524
|
top: u = 0,
|
|
6322
6525
|
bottom: g = 0,
|
|
6323
6526
|
centerY: f = 0
|
|
@@ -6333,31 +6536,31 @@ class wt {
|
|
|
6333
6536
|
distance: T
|
|
6334
6537
|
}), o;
|
|
6335
6538
|
}
|
|
6336
|
-
if (
|
|
6539
|
+
if (l <= n) {
|
|
6337
6540
|
if (s) return o;
|
|
6338
|
-
const T = n -
|
|
6541
|
+
const T = n - l;
|
|
6339
6542
|
return T > 0 && o.push({
|
|
6340
6543
|
type: "horizontal",
|
|
6341
6544
|
axis: b,
|
|
6342
|
-
start:
|
|
6545
|
+
start: l,
|
|
6343
6546
|
end: n,
|
|
6344
6547
|
distance: T
|
|
6345
6548
|
}), o;
|
|
6346
6549
|
}
|
|
6347
6550
|
if (!s) return o;
|
|
6348
|
-
const I = n < d, y = i >
|
|
6349
|
-
|
|
6551
|
+
const I = n < d, y = i > l, w = Math.min(n, d), S = Math.max(n, d), A = S - w;
|
|
6552
|
+
A > 0 && !I && o.push({
|
|
6350
6553
|
type: "horizontal",
|
|
6351
6554
|
axis: b,
|
|
6352
|
-
start:
|
|
6353
|
-
end:
|
|
6354
|
-
distance:
|
|
6555
|
+
start: w,
|
|
6556
|
+
end: S,
|
|
6557
|
+
distance: A
|
|
6355
6558
|
});
|
|
6356
|
-
const
|
|
6559
|
+
const M = Math.min(i, l), C = Math.max(i, l), j = C - M;
|
|
6357
6560
|
return j > 0 && !y && o.push({
|
|
6358
6561
|
type: "horizontal",
|
|
6359
6562
|
axis: b,
|
|
6360
|
-
start:
|
|
6563
|
+
start: M,
|
|
6361
6564
|
end: C,
|
|
6362
6565
|
distance: j
|
|
6363
6566
|
}), o;
|
|
@@ -6378,7 +6581,7 @@ class wt {
|
|
|
6378
6581
|
centerX: c = 0
|
|
6379
6582
|
} = t, {
|
|
6380
6583
|
top: d = 0,
|
|
6381
|
-
bottom:
|
|
6584
|
+
bottom: l = 0,
|
|
6382
6585
|
left: u = 0,
|
|
6383
6586
|
right: g = 0,
|
|
6384
6587
|
centerX: f = 0
|
|
@@ -6394,31 +6597,31 @@ class wt {
|
|
|
6394
6597
|
distance: T
|
|
6395
6598
|
}), o;
|
|
6396
6599
|
}
|
|
6397
|
-
if (
|
|
6600
|
+
if (l <= n) {
|
|
6398
6601
|
if (s) return o;
|
|
6399
|
-
const T = n -
|
|
6602
|
+
const T = n - l;
|
|
6400
6603
|
return T > 0 && o.push({
|
|
6401
6604
|
type: "vertical",
|
|
6402
6605
|
axis: b,
|
|
6403
|
-
start:
|
|
6606
|
+
start: l,
|
|
6404
6607
|
end: n,
|
|
6405
6608
|
distance: T
|
|
6406
6609
|
}), o;
|
|
6407
6610
|
}
|
|
6408
6611
|
if (!s) return o;
|
|
6409
|
-
const I = n < d, y = i >
|
|
6410
|
-
|
|
6612
|
+
const I = n < d, y = i > l, w = Math.min(n, d), S = Math.max(n, d), A = S - w;
|
|
6613
|
+
A > 0 && !I && o.push({
|
|
6411
6614
|
type: "vertical",
|
|
6412
6615
|
axis: b,
|
|
6413
|
-
start:
|
|
6414
|
-
end:
|
|
6415
|
-
distance:
|
|
6616
|
+
start: w,
|
|
6617
|
+
end: S,
|
|
6618
|
+
distance: A
|
|
6416
6619
|
});
|
|
6417
|
-
const
|
|
6620
|
+
const M = Math.min(i, l), C = Math.max(i, l), j = C - M;
|
|
6418
6621
|
return j > 0 && !y && o.push({
|
|
6419
6622
|
type: "vertical",
|
|
6420
6623
|
axis: b,
|
|
6421
|
-
start:
|
|
6624
|
+
start: M,
|
|
6422
6625
|
end: C,
|
|
6423
6626
|
distance: j
|
|
6424
6627
|
}), o;
|
|
@@ -6448,19 +6651,19 @@ class wt {
|
|
|
6448
6651
|
const { canvas: t } = this, e = t.getSelectionContext();
|
|
6449
6652
|
if (!e) return;
|
|
6450
6653
|
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;
|
|
6451
|
-
e.save(), Array.isArray(s) && e.transform(...s), e.lineWidth =
|
|
6654
|
+
e.save(), Array.isArray(s) && e.transform(...s), e.lineWidth = qe / o, e.strokeStyle = Qe, e.setLineDash([]);
|
|
6452
6655
|
for (const c of this.activeGuides) {
|
|
6453
|
-
const { type: d, axis:
|
|
6454
|
-
e.beginPath(), d === "vertical" ? (e.moveTo(
|
|
6656
|
+
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, b = 0;
|
|
6657
|
+
e.beginPath(), d === "vertical" ? (e.moveTo(l, u), e.lineTo(l, g)) : (e.moveTo(u, l), e.lineTo(g, l)), e.stroke(), fe({
|
|
6455
6658
|
context: e,
|
|
6456
6659
|
type: d,
|
|
6457
|
-
axis:
|
|
6660
|
+
axis: l,
|
|
6458
6661
|
start: u,
|
|
6459
6662
|
end: g,
|
|
6460
6663
|
text: Math.round(f).toString(),
|
|
6461
6664
|
zoom: o,
|
|
6462
|
-
color:
|
|
6463
|
-
lineWidth:
|
|
6665
|
+
color: Qe,
|
|
6666
|
+
lineWidth: qe,
|
|
6464
6667
|
offsetAlongAxis: v,
|
|
6465
6668
|
offsetPerpendicular: b
|
|
6466
6669
|
});
|
|
@@ -6486,14 +6689,14 @@ class wt {
|
|
|
6486
6689
|
(e = t == null ? void 0 : t.showAfterTemporary) == null || e.call(t), this.isToolbarHidden = !1;
|
|
6487
6690
|
}
|
|
6488
6691
|
}
|
|
6489
|
-
class
|
|
6692
|
+
class Me {
|
|
6490
6693
|
/**
|
|
6491
6694
|
* Конструктор класса ImageEditor.
|
|
6492
6695
|
* @param canvasId - идентификатор канваса, в котором будет создан редактор
|
|
6493
6696
|
* @param options - опции и настройки редактора
|
|
6494
6697
|
*/
|
|
6495
6698
|
constructor(t, e) {
|
|
6496
|
-
this.options = e, this.containerId = t, this.editorId = `${t}-${
|
|
6699
|
+
this.options = e, this.containerId = t, this.editorId = `${t}-${Y()}`, this.clipboard = null, this.init();
|
|
6497
6700
|
}
|
|
6498
6701
|
/**
|
|
6499
6702
|
* Инициализация редактора.
|
|
@@ -6514,9 +6717,9 @@ class fe {
|
|
|
6514
6717
|
initialStateJSON: r,
|
|
6515
6718
|
scaleType: c,
|
|
6516
6719
|
showRotationAngle: d,
|
|
6517
|
-
_onReadyCallback:
|
|
6720
|
+
_onReadyCallback: l
|
|
6518
6721
|
} = this.options;
|
|
6519
|
-
if (
|
|
6722
|
+
if (Q.apply(), this.canvas = new ps(this.containerId, this.options), this.moduleLoader = new Ms(), this.workerManager = new Ss(), this.errorManager = new zt({ editor: this }), this.historyManager = new Kt({ editor: this }), this.toolbar = new zs({ editor: this }), this.transformManager = new Xs({ editor: this }), this.zoomManager = new Ks({ editor: this }), this.canvasManager = new Vs({ editor: this }), this.imageManager = new at({ editor: this }), this.layerManager = new Qt({ editor: this }), this.shapeManager = new qs({ editor: this }), this.interactionBlocker = new Qs({ editor: this }), this.backgroundManager = new St({ editor: this }), this.clipboardManager = new $s({ editor: this }), this.objectLockManager = new qt({ editor: this }), this.groupingManager = new Js({ editor: this }), this.selectionManager = new to({ editor: this }), this.deletionManager = new be({ editor: this }), this.panConstraintManager = new eo({ editor: this }), this.snappingManager = new wo({ editor: this }), this.measurementManager = new At({ editor: this }), this.fontManager = new ue((u = this.options.fonts) != null ? u : []), this.textManager = new q({ editor: this }), this.templateManager = new D({ editor: this }), d && (this.angleIndicator = new ve({ editor: this })), this._createMontageArea(), this._createClippingArea(), this.listeners = new xt({ 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) {
|
|
6520
6723
|
const {
|
|
6521
6724
|
source: g,
|
|
6522
6725
|
scale: f = `image-${c}`,
|
|
@@ -6524,7 +6727,7 @@ class fe {
|
|
|
6524
6727
|
} = a;
|
|
6525
6728
|
yield this.imageManager.importImage({ source: g, scale: f, withoutSave: p });
|
|
6526
6729
|
}
|
|
6527
|
-
r && this.historyManager.loadStateFromFullState(r), this.historyManager.saveState(), console.log("editor:ready"), this.canvas.fire("editor:ready", this), typeof
|
|
6730
|
+
r && this.historyManager.loadStateFromFullState(r), this.historyManager.saveState(), console.log("editor:ready"), this.canvas.fire("editor:ready", this), typeof l == "function" && l(this);
|
|
6528
6731
|
});
|
|
6529
6732
|
}
|
|
6530
6733
|
/**
|
|
@@ -6538,7 +6741,7 @@ class fe {
|
|
|
6538
6741
|
this.montageArea = this.shapeManager.addRectangle({
|
|
6539
6742
|
width: t,
|
|
6540
6743
|
height: e,
|
|
6541
|
-
fill:
|
|
6744
|
+
fill: Me._createMosaicPattern(),
|
|
6542
6745
|
stroke: null,
|
|
6543
6746
|
strokeWidth: 0,
|
|
6544
6747
|
selectable: !1,
|
|
@@ -6589,7 +6792,7 @@ class fe {
|
|
|
6589
6792
|
const t = document.createElement("canvas");
|
|
6590
6793
|
t.width = 20, t.height = 20;
|
|
6591
6794
|
const e = t.getContext("2d");
|
|
6592
|
-
return e.fillStyle = "#ddd", e.fillRect(0, 0, 40, 40), e.fillStyle = "#ccc", e.fillRect(0, 0, 10, 10), e.fillRect(10, 10, 10, 10), new
|
|
6795
|
+
return e.fillStyle = "#ddd", e.fillRect(0, 0, 40, 40), e.fillStyle = "#ccc", e.fillRect(0, 0, 10, 10), e.fillRect(10, 10, 10, 10), new ms({
|
|
6593
6796
|
source: t,
|
|
6594
6797
|
repeat: "repeat"
|
|
6595
6798
|
});
|
|
@@ -6621,7 +6824,7 @@ const E = [
|
|
|
6621
6824
|
"U+0490-0491",
|
|
6622
6825
|
"U+04B0-04B1",
|
|
6623
6826
|
"U+2116"
|
|
6624
|
-
].join(", "),
|
|
6827
|
+
].join(", "), So = [
|
|
6625
6828
|
{
|
|
6626
6829
|
family: "Arial",
|
|
6627
6830
|
source: 'local("Arial"), local("Liberation Sans"), local("DejaVu Sans")',
|
|
@@ -7411,7 +7614,7 @@ const E = [
|
|
|
7411
7614
|
unicodeRange: E
|
|
7412
7615
|
}
|
|
7413
7616
|
}
|
|
7414
|
-
],
|
|
7617
|
+
], Ao = {
|
|
7415
7618
|
/**
|
|
7416
7619
|
* Опции редактора
|
|
7417
7620
|
*/
|
|
@@ -7503,20 +7706,20 @@ const E = [
|
|
|
7503
7706
|
/**
|
|
7504
7707
|
* Список шрифтов, которые будут доступны в редакторе по умолчанию.
|
|
7505
7708
|
*/
|
|
7506
|
-
fonts:
|
|
7709
|
+
fonts: So
|
|
7507
7710
|
};
|
|
7508
|
-
function
|
|
7509
|
-
const e =
|
|
7711
|
+
function Eo(h, t = {}) {
|
|
7712
|
+
const e = k(k({}, Ao), t), s = document.getElementById(h);
|
|
7510
7713
|
if (!s)
|
|
7511
|
-
return Promise.reject(new Error(`Контейнер с ID "${
|
|
7714
|
+
return Promise.reject(new Error(`Контейнер с ID "${h}" не найден.`));
|
|
7512
7715
|
const o = document.createElement("canvas");
|
|
7513
|
-
return o.id = `${
|
|
7716
|
+
return o.id = `${h}-canvas`, s.appendChild(o), e.editorContainer = s, new Promise((n) => {
|
|
7514
7717
|
e._onReadyCallback = n;
|
|
7515
|
-
const i = new
|
|
7516
|
-
window[
|
|
7718
|
+
const i = new Me(o.id, e);
|
|
7719
|
+
window[h] = i;
|
|
7517
7720
|
});
|
|
7518
7721
|
}
|
|
7519
7722
|
export {
|
|
7520
|
-
|
|
7723
|
+
Eo as default
|
|
7521
7724
|
};
|
|
7522
7725
|
//# sourceMappingURL=main.js.map
|