@anu3ev/fabric-image-editor 0.5.0 → 0.5.1
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 +1131 -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 lt, 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(lt.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(lt.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(lt.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(lt.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 = lt.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 rt = (je = o.width) != null ? je : C, _t = Math.abs(rt - Jt) > J;
|
|
4492
|
+
let ct = m;
|
|
4493
|
+
_t && (I || w) && (Tt === "right" ? ct = Et - rt : Tt === "center" && (ct = Ot - rt / 2)), o.set({ left: ct }), i.baseLeft = ct, n.scaleX = 1, n.scaleY = 1;
|
|
4494
|
+
const { original: ot } = n;
|
|
4495
|
+
ot && (ot.scaleX = 1, ot.scaleY = 1, ot.width = rt, ot.height = o.height, ot.left = ct), o.setCoords(), this.canvas.requestRenderAll(), i.baseWidth = rt, 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, rt, _t, ct, 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 = (rt = (Rt = y != null ? y : W) != null ? Rt : n.strokeWidth) != null ? rt : 0, ht = Ge({ width: Yt }), Ft = (ct = (_t = I != null ? I : yt) != null ? _t : n.stroke) != null ? ct : 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
|
+
}, dt = ({
|
|
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 lt.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 = lt.groupSVGElements(s.objects, s.options), n = yield lt.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 или его исходного элемента.
|
|
@@ -5484,14 +5678,14 @@ class L {
|
|
|
5484
5678
|
return typeof s.src == "string" ? s.src : null;
|
|
5485
5679
|
}
|
|
5486
5680
|
}
|
|
5487
|
-
const
|
|
5488
|
-
anchors:
|
|
5681
|
+
const uo = 5, ts = "#3D8BF4", ge = 1, Ve = ({
|
|
5682
|
+
anchors: h,
|
|
5489
5683
|
positions: t,
|
|
5490
5684
|
threshold: e
|
|
5491
5685
|
}) => {
|
|
5492
5686
|
let s = 0, o = e + 1, n = null;
|
|
5493
5687
|
for (const i of t)
|
|
5494
|
-
for (const a of
|
|
5688
|
+
for (const a of h) {
|
|
5495
5689
|
const r = Math.abs(a - i);
|
|
5496
5690
|
r > e || r >= o || (s = a - i, o = r, n = a);
|
|
5497
5691
|
}
|
|
@@ -5499,33 +5693,33 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5499
5693
|
delta: s,
|
|
5500
5694
|
guidePosition: n
|
|
5501
5695
|
};
|
|
5502
|
-
},
|
|
5503
|
-
activeBounds:
|
|
5696
|
+
}, go = ({
|
|
5697
|
+
activeBounds: h,
|
|
5504
5698
|
threshold: t,
|
|
5505
5699
|
anchors: e
|
|
5506
5700
|
}) => {
|
|
5507
|
-
const { left: s, right: o, centerX: n, top: i, bottom: a, centerY: r } =
|
|
5701
|
+
const { left: s, right: o, centerX: n, top: i, bottom: a, centerY: r } = h, c = Ve({
|
|
5508
5702
|
anchors: e.vertical,
|
|
5509
5703
|
positions: [s, n, o],
|
|
5510
5704
|
threshold: t
|
|
5511
|
-
}), d =
|
|
5705
|
+
}), d = Ve({
|
|
5512
5706
|
anchors: e.horizontal,
|
|
5513
5707
|
positions: [i, r, a],
|
|
5514
5708
|
threshold: t
|
|
5515
|
-
}),
|
|
5516
|
-
return c.guidePosition !== null &&
|
|
5709
|
+
}), l = [];
|
|
5710
|
+
return c.guidePosition !== null && l.push({
|
|
5517
5711
|
type: "vertical",
|
|
5518
5712
|
position: c.guidePosition
|
|
5519
|
-
}), d.guidePosition !== null &&
|
|
5713
|
+
}), d.guidePosition !== null && l.push({
|
|
5520
5714
|
type: "horizontal",
|
|
5521
5715
|
position: d.guidePosition
|
|
5522
5716
|
}), {
|
|
5523
5717
|
deltaX: c.delta,
|
|
5524
5718
|
deltaY: d.delta,
|
|
5525
|
-
guides:
|
|
5719
|
+
guides: l
|
|
5526
5720
|
};
|
|
5527
|
-
},
|
|
5528
|
-
activeBounds:
|
|
5721
|
+
}, es = ({
|
|
5722
|
+
activeBounds: h,
|
|
5529
5723
|
aligned: t,
|
|
5530
5724
|
threshold: e,
|
|
5531
5725
|
patterns: s,
|
|
@@ -5537,67 +5731,67 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5537
5731
|
bottom: i,
|
|
5538
5732
|
left: a,
|
|
5539
5733
|
right: r
|
|
5540
|
-
} =
|
|
5734
|
+
} = h, c = [];
|
|
5541
5735
|
for (const d of s)
|
|
5542
|
-
for (const
|
|
5736
|
+
for (const l of t)
|
|
5543
5737
|
if (o === "vertical") {
|
|
5544
|
-
const u = n -
|
|
5738
|
+
const u = n - l.bottom, g = Math.abs(u - d.distance);
|
|
5545
5739
|
if (g <= e) {
|
|
5546
5740
|
const m = d.distance - u, v = {
|
|
5547
5741
|
type: o,
|
|
5548
5742
|
axis: d.axis,
|
|
5549
5743
|
refStart: d.start,
|
|
5550
5744
|
refEnd: d.end,
|
|
5551
|
-
activeStart:
|
|
5552
|
-
activeEnd:
|
|
5745
|
+
activeStart: l.bottom,
|
|
5746
|
+
activeEnd: l.bottom + d.distance,
|
|
5553
5747
|
distance: d.distance
|
|
5554
5748
|
};
|
|
5555
5749
|
c.push({ delta: m, guide: v, diff: g });
|
|
5556
5750
|
}
|
|
5557
|
-
const f =
|
|
5751
|
+
const f = l.top - i, p = Math.abs(f - d.distance);
|
|
5558
5752
|
if (p <= e) {
|
|
5559
5753
|
const m = d.distance - f, v = {
|
|
5560
5754
|
type: o,
|
|
5561
5755
|
axis: d.axis,
|
|
5562
5756
|
refStart: d.start,
|
|
5563
5757
|
refEnd: d.end,
|
|
5564
|
-
activeStart:
|
|
5565
|
-
activeEnd:
|
|
5758
|
+
activeStart: l.top - d.distance,
|
|
5759
|
+
activeEnd: l.top,
|
|
5566
5760
|
distance: d.distance
|
|
5567
5761
|
};
|
|
5568
5762
|
c.push({ delta: m, guide: v, diff: p });
|
|
5569
5763
|
}
|
|
5570
5764
|
} else {
|
|
5571
|
-
const u = a -
|
|
5765
|
+
const u = a - l.right, g = Math.abs(u - d.distance);
|
|
5572
5766
|
if (g <= e) {
|
|
5573
5767
|
const m = d.distance - u, v = {
|
|
5574
5768
|
type: o,
|
|
5575
5769
|
axis: d.axis,
|
|
5576
5770
|
refStart: d.start,
|
|
5577
5771
|
refEnd: d.end,
|
|
5578
|
-
activeStart:
|
|
5579
|
-
activeEnd:
|
|
5772
|
+
activeStart: l.right,
|
|
5773
|
+
activeEnd: l.right + d.distance,
|
|
5580
5774
|
distance: d.distance
|
|
5581
5775
|
};
|
|
5582
5776
|
c.push({ delta: m, guide: v, diff: g });
|
|
5583
5777
|
}
|
|
5584
|
-
const f =
|
|
5778
|
+
const f = l.left - r, p = Math.abs(f - d.distance);
|
|
5585
5779
|
if (p <= e) {
|
|
5586
5780
|
const m = d.distance - f, v = {
|
|
5587
5781
|
type: o,
|
|
5588
5782
|
axis: d.axis,
|
|
5589
5783
|
refStart: d.start,
|
|
5590
5784
|
refEnd: d.end,
|
|
5591
|
-
activeStart:
|
|
5592
|
-
activeEnd:
|
|
5785
|
+
activeStart: l.left - d.distance,
|
|
5786
|
+
activeEnd: l.left,
|
|
5593
5787
|
distance: d.distance
|
|
5594
5788
|
};
|
|
5595
5789
|
c.push({ delta: m, guide: v, diff: p });
|
|
5596
5790
|
}
|
|
5597
5791
|
}
|
|
5598
5792
|
return c;
|
|
5599
|
-
},
|
|
5600
|
-
activeBounds:
|
|
5793
|
+
}, fo = ({
|
|
5794
|
+
activeBounds: h,
|
|
5601
5795
|
candidates: t,
|
|
5602
5796
|
threshold: e,
|
|
5603
5797
|
patterns: s
|
|
@@ -5608,68 +5802,68 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5608
5802
|
bottom: i,
|
|
5609
5803
|
left: a,
|
|
5610
5804
|
right: r
|
|
5611
|
-
} =
|
|
5805
|
+
} = h, c = t.filter((y) => Math.min(y.right, r) - Math.max(y.left, a) >= -e);
|
|
5612
5806
|
if (!c.length)
|
|
5613
5807
|
return { delta: 0, guide: null };
|
|
5614
5808
|
const d = [
|
|
5615
5809
|
...c.map((y) => ({ bounds: y, isActive: !1 })),
|
|
5616
|
-
{ bounds:
|
|
5810
|
+
{ bounds: h, isActive: !0 }
|
|
5617
5811
|
];
|
|
5618
|
-
d.sort((y,
|
|
5619
|
-
const
|
|
5620
|
-
if (
|
|
5812
|
+
d.sort((y, w) => y.bounds.top - w.bounds.top);
|
|
5813
|
+
const l = d.findIndex((y) => y.isActive);
|
|
5814
|
+
if (l === -1)
|
|
5621
5815
|
return { delta: 0, guide: null };
|
|
5622
|
-
const u = d[
|
|
5816
|
+
const u = d[l - 1], g = d[l - 2], f = d[l + 1], p = d[l + 2], m = [], v = i - n;
|
|
5623
5817
|
if (u && g) {
|
|
5624
|
-
const { bounds: y } = u, { bounds:
|
|
5625
|
-
if (
|
|
5626
|
-
const C =
|
|
5818
|
+
const { bounds: y } = u, { bounds: w } = g, S = y.top - w.bottom, A = n - y.bottom, M = Math.abs(A - S);
|
|
5819
|
+
if (M <= e) {
|
|
5820
|
+
const C = S - A, j = n + C, T = {
|
|
5627
5821
|
type: "vertical",
|
|
5628
5822
|
axis: o,
|
|
5629
|
-
refStart:
|
|
5823
|
+
refStart: w.bottom,
|
|
5630
5824
|
refEnd: y.top,
|
|
5631
5825
|
activeStart: y.bottom,
|
|
5632
5826
|
activeEnd: j,
|
|
5633
|
-
distance:
|
|
5827
|
+
distance: S
|
|
5634
5828
|
};
|
|
5635
|
-
m.push({ delta: C, guide: T, diff:
|
|
5829
|
+
m.push({ delta: C, guide: T, diff: M });
|
|
5636
5830
|
}
|
|
5637
5831
|
}
|
|
5638
5832
|
if (f && p) {
|
|
5639
|
-
const { bounds: y } = f, { bounds:
|
|
5640
|
-
if (
|
|
5641
|
-
const C =
|
|
5833
|
+
const { bounds: y } = f, { bounds: w } = p, S = w.top - y.bottom, A = y.top - i, M = Math.abs(A - S);
|
|
5834
|
+
if (M <= e) {
|
|
5835
|
+
const C = A - S, j = i + C, T = {
|
|
5642
5836
|
type: "vertical",
|
|
5643
5837
|
axis: o,
|
|
5644
5838
|
refStart: y.bottom,
|
|
5645
|
-
refEnd:
|
|
5839
|
+
refEnd: w.top,
|
|
5646
5840
|
activeStart: j,
|
|
5647
5841
|
activeEnd: y.top,
|
|
5648
|
-
distance:
|
|
5842
|
+
distance: S
|
|
5649
5843
|
};
|
|
5650
|
-
m.push({ delta: C, guide: T, diff:
|
|
5844
|
+
m.push({ delta: C, guide: T, diff: M });
|
|
5651
5845
|
}
|
|
5652
5846
|
}
|
|
5653
5847
|
if (u && f) {
|
|
5654
|
-
const { bounds: y } = u, { bounds:
|
|
5655
|
-
if (
|
|
5656
|
-
const
|
|
5657
|
-
if (
|
|
5658
|
-
const
|
|
5848
|
+
const { bounds: y } = u, { bounds: w } = f, A = w.top - y.bottom - v;
|
|
5849
|
+
if (A >= 0) {
|
|
5850
|
+
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);
|
|
5851
|
+
if (Z <= e) {
|
|
5852
|
+
const P = M - C, F = i + P, K = {
|
|
5659
5853
|
type: "vertical",
|
|
5660
5854
|
axis: o,
|
|
5661
5855
|
refStart: y.bottom,
|
|
5662
|
-
refEnd: y.bottom +
|
|
5663
|
-
activeStart:
|
|
5664
|
-
activeEnd:
|
|
5665
|
-
distance:
|
|
5856
|
+
refEnd: y.bottom + M,
|
|
5857
|
+
activeStart: F,
|
|
5858
|
+
activeEnd: F + M,
|
|
5859
|
+
distance: M
|
|
5666
5860
|
};
|
|
5667
|
-
m.push({ delta:
|
|
5861
|
+
m.push({ delta: P, guide: K, diff: Z });
|
|
5668
5862
|
}
|
|
5669
5863
|
}
|
|
5670
5864
|
}
|
|
5671
|
-
const b =
|
|
5672
|
-
activeBounds:
|
|
5865
|
+
const b = es({
|
|
5866
|
+
activeBounds: h,
|
|
5673
5867
|
aligned: c,
|
|
5674
5868
|
threshold: e,
|
|
5675
5869
|
patterns: s,
|
|
@@ -5677,13 +5871,13 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5677
5871
|
});
|
|
5678
5872
|
if (m.push(...b), !m.length)
|
|
5679
5873
|
return { delta: 0, guide: null };
|
|
5680
|
-
const I = m.reduce((y,
|
|
5874
|
+
const I = m.reduce((y, w) => w.diff < y.diff ? w : y, m[0]);
|
|
5681
5875
|
return {
|
|
5682
5876
|
delta: I.delta,
|
|
5683
5877
|
guide: I.guide
|
|
5684
5878
|
};
|
|
5685
|
-
},
|
|
5686
|
-
activeBounds:
|
|
5879
|
+
}, po = ({
|
|
5880
|
+
activeBounds: h,
|
|
5687
5881
|
candidates: t,
|
|
5688
5882
|
threshold: e,
|
|
5689
5883
|
patterns: s
|
|
@@ -5694,68 +5888,68 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5694
5888
|
right: i,
|
|
5695
5889
|
top: a,
|
|
5696
5890
|
bottom: r
|
|
5697
|
-
} =
|
|
5891
|
+
} = h, c = t.filter((y) => Math.min(y.bottom, r) - Math.max(y.top, a) >= -e);
|
|
5698
5892
|
if (!c.length)
|
|
5699
5893
|
return { delta: 0, guide: null };
|
|
5700
5894
|
const d = [
|
|
5701
5895
|
...c.map((y) => ({ bounds: y, isActive: !1 })),
|
|
5702
|
-
{ bounds:
|
|
5896
|
+
{ bounds: h, isActive: !0 }
|
|
5703
5897
|
];
|
|
5704
|
-
d.sort((y,
|
|
5705
|
-
const
|
|
5706
|
-
if (
|
|
5898
|
+
d.sort((y, w) => y.bounds.left - w.bounds.left);
|
|
5899
|
+
const l = d.findIndex((y) => y.isActive);
|
|
5900
|
+
if (l === -1)
|
|
5707
5901
|
return { delta: 0, guide: null };
|
|
5708
|
-
const u = d[
|
|
5902
|
+
const u = d[l - 1], g = d[l - 2], f = d[l + 1], p = d[l + 2], m = [], v = i - n;
|
|
5709
5903
|
if (u && g) {
|
|
5710
|
-
const { bounds: y } = u, { bounds:
|
|
5711
|
-
if (
|
|
5712
|
-
const C =
|
|
5904
|
+
const { bounds: y } = u, { bounds: w } = g, S = y.left - w.right, A = n - y.right, M = Math.abs(A - S);
|
|
5905
|
+
if (M <= e) {
|
|
5906
|
+
const C = S - A, j = n + C, T = {
|
|
5713
5907
|
type: "horizontal",
|
|
5714
5908
|
axis: o,
|
|
5715
|
-
refStart:
|
|
5909
|
+
refStart: w.right,
|
|
5716
5910
|
refEnd: y.left,
|
|
5717
5911
|
activeStart: y.right,
|
|
5718
5912
|
activeEnd: j,
|
|
5719
|
-
distance:
|
|
5913
|
+
distance: S
|
|
5720
5914
|
};
|
|
5721
|
-
m.push({ delta: C, guide: T, diff:
|
|
5915
|
+
m.push({ delta: C, guide: T, diff: M });
|
|
5722
5916
|
}
|
|
5723
5917
|
}
|
|
5724
5918
|
if (f && p) {
|
|
5725
|
-
const { bounds: y } = f, { bounds:
|
|
5726
|
-
if (
|
|
5727
|
-
const C =
|
|
5919
|
+
const { bounds: y } = f, { bounds: w } = p, S = w.left - y.right, A = y.left - i, M = Math.abs(A - S);
|
|
5920
|
+
if (M <= e) {
|
|
5921
|
+
const C = A - S, j = i + C, T = {
|
|
5728
5922
|
type: "horizontal",
|
|
5729
5923
|
axis: o,
|
|
5730
5924
|
refStart: y.right,
|
|
5731
|
-
refEnd:
|
|
5925
|
+
refEnd: w.left,
|
|
5732
5926
|
activeStart: j,
|
|
5733
5927
|
activeEnd: y.left,
|
|
5734
|
-
distance:
|
|
5928
|
+
distance: S
|
|
5735
5929
|
};
|
|
5736
|
-
m.push({ delta: C, guide: T, diff:
|
|
5930
|
+
m.push({ delta: C, guide: T, diff: M });
|
|
5737
5931
|
}
|
|
5738
5932
|
}
|
|
5739
5933
|
if (u && f) {
|
|
5740
|
-
const { bounds: y } = u, { bounds:
|
|
5741
|
-
if (
|
|
5742
|
-
const
|
|
5743
|
-
if (
|
|
5744
|
-
const
|
|
5934
|
+
const { bounds: y } = u, { bounds: w } = f, A = w.left - y.right - v;
|
|
5935
|
+
if (A >= 0) {
|
|
5936
|
+
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);
|
|
5937
|
+
if (Z <= e) {
|
|
5938
|
+
const P = M - C, F = i + P, K = {
|
|
5745
5939
|
type: "horizontal",
|
|
5746
5940
|
axis: o,
|
|
5747
5941
|
refStart: y.right,
|
|
5748
|
-
refEnd: y.right +
|
|
5749
|
-
activeStart:
|
|
5750
|
-
activeEnd:
|
|
5751
|
-
distance:
|
|
5942
|
+
refEnd: y.right + M,
|
|
5943
|
+
activeStart: F,
|
|
5944
|
+
activeEnd: F + M,
|
|
5945
|
+
distance: M
|
|
5752
5946
|
};
|
|
5753
|
-
m.push({ delta:
|
|
5947
|
+
m.push({ delta: P, guide: K, diff: Z });
|
|
5754
5948
|
}
|
|
5755
5949
|
}
|
|
5756
5950
|
}
|
|
5757
|
-
const b =
|
|
5758
|
-
activeBounds:
|
|
5951
|
+
const b = es({
|
|
5952
|
+
activeBounds: h,
|
|
5759
5953
|
aligned: c,
|
|
5760
5954
|
threshold: e,
|
|
5761
5955
|
patterns: s,
|
|
@@ -5763,24 +5957,24 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5763
5957
|
});
|
|
5764
5958
|
if (m.push(...b), !m.length)
|
|
5765
5959
|
return { delta: 0, guide: null };
|
|
5766
|
-
const I = m.reduce((y,
|
|
5960
|
+
const I = m.reduce((y, w) => w.diff < y.diff ? w : y, m[0]);
|
|
5767
5961
|
return {
|
|
5768
5962
|
delta: I.delta,
|
|
5769
5963
|
guide: I.guide
|
|
5770
5964
|
};
|
|
5771
|
-
},
|
|
5772
|
-
activeBounds:
|
|
5965
|
+
}, mo = ({
|
|
5966
|
+
activeBounds: h,
|
|
5773
5967
|
candidates: t,
|
|
5774
5968
|
threshold: e,
|
|
5775
5969
|
spacingPatterns: s
|
|
5776
5970
|
}) => {
|
|
5777
|
-
const o =
|
|
5778
|
-
activeBounds:
|
|
5971
|
+
const o = fo({
|
|
5972
|
+
activeBounds: h,
|
|
5779
5973
|
candidates: t,
|
|
5780
5974
|
threshold: e,
|
|
5781
5975
|
patterns: s.vertical
|
|
5782
|
-
}), n =
|
|
5783
|
-
activeBounds:
|
|
5976
|
+
}), n = po({
|
|
5977
|
+
activeBounds: h,
|
|
5784
5978
|
candidates: t,
|
|
5785
5979
|
threshold: e,
|
|
5786
5980
|
patterns: s.horizontal
|
|
@@ -5790,8 +5984,8 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5790
5984
|
deltaY: o.delta,
|
|
5791
5985
|
guides: i
|
|
5792
5986
|
};
|
|
5793
|
-
},
|
|
5794
|
-
context:
|
|
5987
|
+
}, yo = ({
|
|
5988
|
+
context: h,
|
|
5795
5989
|
x: t,
|
|
5796
5990
|
y: e,
|
|
5797
5991
|
width: s,
|
|
@@ -5799,9 +5993,9 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5799
5993
|
radius: n
|
|
5800
5994
|
}) => {
|
|
5801
5995
|
const i = Math.min(n, s / 2, o / 2);
|
|
5802
|
-
|
|
5803
|
-
},
|
|
5804
|
-
context:
|
|
5996
|
+
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();
|
|
5997
|
+
}, fe = ({
|
|
5998
|
+
context: h,
|
|
5805
5999
|
type: t,
|
|
5806
6000
|
axis: e,
|
|
5807
6001
|
start: s,
|
|
@@ -5812,24 +6006,24 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5812
6006
|
textColor: r = "#ffffff",
|
|
5813
6007
|
fontFamily: c = "sans-serif",
|
|
5814
6008
|
lineWidth: d = 1,
|
|
5815
|
-
padding:
|
|
6009
|
+
padding: l = 4,
|
|
5816
6010
|
radius: u = 4,
|
|
5817
6011
|
offsetAlongAxis: g = 0,
|
|
5818
6012
|
offsetPerpendicular: f = 0
|
|
5819
6013
|
}) => {
|
|
5820
|
-
const p = i || 1, m = 12 / p, v =
|
|
5821
|
-
|
|
5822
|
-
const
|
|
5823
|
-
|
|
5824
|
-
context:
|
|
6014
|
+
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;
|
|
6015
|
+
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";
|
|
6016
|
+
const A = h.measureText(n).width + v * 2, M = m + v * 2, C = y - A / 2, j = w - M / 2;
|
|
6017
|
+
h.beginPath(), yo({
|
|
6018
|
+
context: h,
|
|
5825
6019
|
x: C,
|
|
5826
6020
|
y: j,
|
|
5827
|
-
width:
|
|
5828
|
-
height:
|
|
6021
|
+
width: A,
|
|
6022
|
+
height: M,
|
|
5829
6023
|
radius: b
|
|
5830
|
-
}),
|
|
5831
|
-
},
|
|
5832
|
-
context:
|
|
6024
|
+
}), h.fill(), h.fillStyle = r, h.fillText(n, y, w), h.restore();
|
|
6025
|
+
}, vo = ({
|
|
6026
|
+
context: h,
|
|
5833
6027
|
guide: t,
|
|
5834
6028
|
zoom: e
|
|
5835
6029
|
}) => {
|
|
@@ -5842,31 +6036,31 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5842
6036
|
activeEnd: r,
|
|
5843
6037
|
distance: c
|
|
5844
6038
|
} = t, d = Math.round(c).toString();
|
|
5845
|
-
|
|
5846
|
-
const
|
|
5847
|
-
|
|
5848
|
-
context:
|
|
6039
|
+
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();
|
|
6040
|
+
const l = ts;
|
|
6041
|
+
fe({
|
|
6042
|
+
context: h,
|
|
5849
6043
|
type: s,
|
|
5850
6044
|
axis: o,
|
|
5851
6045
|
start: n,
|
|
5852
6046
|
end: i,
|
|
5853
6047
|
text: d,
|
|
5854
6048
|
zoom: e,
|
|
5855
|
-
color:
|
|
5856
|
-
lineWidth:
|
|
5857
|
-
}),
|
|
5858
|
-
context:
|
|
6049
|
+
color: l,
|
|
6050
|
+
lineWidth: ge
|
|
6051
|
+
}), fe({
|
|
6052
|
+
context: h,
|
|
5859
6053
|
type: s,
|
|
5860
6054
|
axis: o,
|
|
5861
6055
|
start: a,
|
|
5862
6056
|
end: r,
|
|
5863
6057
|
text: d,
|
|
5864
6058
|
zoom: e,
|
|
5865
|
-
color:
|
|
5866
|
-
lineWidth:
|
|
6059
|
+
color: l,
|
|
6060
|
+
lineWidth: ge
|
|
5867
6061
|
});
|
|
5868
|
-
},
|
|
5869
|
-
anchors:
|
|
6062
|
+
}, Xe = ({
|
|
6063
|
+
anchors: h,
|
|
5870
6064
|
bounds: t
|
|
5871
6065
|
}) => {
|
|
5872
6066
|
const {
|
|
@@ -5877,24 +6071,24 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5877
6071
|
bottom: i,
|
|
5878
6072
|
centerY: a
|
|
5879
6073
|
} = t;
|
|
5880
|
-
|
|
5881
|
-
},
|
|
5882
|
-
bounds:
|
|
6074
|
+
h.vertical.push(e, o, s), h.horizontal.push(n, a, i);
|
|
6075
|
+
}, Ke = ({
|
|
6076
|
+
bounds: h,
|
|
5883
6077
|
type: t,
|
|
5884
6078
|
primaryStart: e,
|
|
5885
6079
|
primaryEnd: s
|
|
5886
6080
|
}) => {
|
|
5887
|
-
const o = [], n = e === "top" ? "left" : "top", i = s === "bottom" ? "right" : "bottom", a = [...
|
|
6081
|
+
const o = [], n = e === "top" ? "left" : "top", i = s === "bottom" ? "right" : "bottom", a = [...h].sort((r, c) => r[e] - c[e]);
|
|
5888
6082
|
for (let r = 0; r < a.length; r += 1) {
|
|
5889
6083
|
const c = a[r];
|
|
5890
|
-
let d = null,
|
|
6084
|
+
let d = null, l = Number.POSITIVE_INFINITY;
|
|
5891
6085
|
for (let p = r + 1; p < a.length; p += 1) {
|
|
5892
6086
|
const m = a[p];
|
|
5893
6087
|
if (Math.min(c[i], m[i]) - Math.max(c[n], m[n]) < 0) continue;
|
|
5894
6088
|
const b = m[e] - c[s];
|
|
5895
|
-
b < 0 || b <
|
|
6089
|
+
b < 0 || b < l && (l = b, d = m);
|
|
5896
6090
|
}
|
|
5897
|
-
if (!d ||
|
|
6091
|
+
if (!d || l === Number.POSITIVE_INFINITY) continue;
|
|
5898
6092
|
const u = Math.max(c[n], d[n]), g = Math.min(c[i], d[i]), f = (u + g) / 2;
|
|
5899
6093
|
o.push({
|
|
5900
6094
|
type: t,
|
|
@@ -5905,38 +6099,38 @@ const $s = 5, He = "#3D8BF4", re = 1, Be = ({
|
|
|
5905
6099
|
});
|
|
5906
6100
|
}
|
|
5907
6101
|
return o;
|
|
5908
|
-
},
|
|
5909
|
-
bounds:
|
|
6102
|
+
}, bo = ({
|
|
6103
|
+
bounds: h
|
|
5910
6104
|
}) => {
|
|
5911
|
-
const t =
|
|
5912
|
-
bounds:
|
|
6105
|
+
const t = Ke({
|
|
6106
|
+
bounds: h,
|
|
5913
6107
|
type: "vertical",
|
|
5914
6108
|
primaryStart: "top",
|
|
5915
6109
|
primaryEnd: "bottom"
|
|
5916
|
-
}), e =
|
|
5917
|
-
bounds:
|
|
6110
|
+
}), e = Ke({
|
|
6111
|
+
bounds: h,
|
|
5918
6112
|
type: "horizontal",
|
|
5919
6113
|
primaryStart: "left",
|
|
5920
6114
|
primaryEnd: "right"
|
|
5921
6115
|
});
|
|
5922
6116
|
return { vertical: t, horizontal: e };
|
|
5923
|
-
},
|
|
5924
|
-
activeObject:
|
|
6117
|
+
}, Mo = ["montage-area", "background", "interaction-blocker"], ss = ({
|
|
6118
|
+
activeObject: h
|
|
5925
6119
|
}) => {
|
|
5926
6120
|
const t = /* @__PURE__ */ new Set();
|
|
5927
|
-
return
|
|
5928
|
-
},
|
|
5929
|
-
object:
|
|
6121
|
+
return h && (t.add(h), h instanceof B && h.getObjects().forEach((e) => t.add(e))), t;
|
|
6122
|
+
}, os = ({
|
|
6123
|
+
object: h,
|
|
5930
6124
|
excluded: t,
|
|
5931
|
-
ignoredIds: e =
|
|
6125
|
+
ignoredIds: e = Mo
|
|
5932
6126
|
}) => {
|
|
5933
|
-
if (t.has(
|
|
5934
|
-
const { visible: s = !0 } =
|
|
6127
|
+
if (t.has(h)) return !0;
|
|
6128
|
+
const { visible: s = !0 } = h;
|
|
5935
6129
|
if (!s) return !0;
|
|
5936
|
-
const { id: o } =
|
|
6130
|
+
const { id: o } = h;
|
|
5937
6131
|
return !!(o && e.includes(o));
|
|
5938
6132
|
};
|
|
5939
|
-
class
|
|
6133
|
+
class wo {
|
|
5940
6134
|
/**
|
|
5941
6135
|
* Создаёт менеджер прилипания и инициализирует слушатели событий.
|
|
5942
6136
|
*/
|
|
@@ -5994,24 +6188,24 @@ class ro {
|
|
|
5994
6188
|
return;
|
|
5995
6189
|
}
|
|
5996
6190
|
!this.anchors.vertical.length && !this.anchors.horizontal.length && this._cacheAnchors({ activeObject: e });
|
|
5997
|
-
let o =
|
|
6191
|
+
let o = dt({ object: e });
|
|
5998
6192
|
if (!o) {
|
|
5999
6193
|
this._clearGuides();
|
|
6000
6194
|
return;
|
|
6001
6195
|
}
|
|
6002
|
-
const { canvas: n } = this, i = n.getZoom() || 1, a =
|
|
6196
|
+
const { canvas: n } = this, i = n.getZoom() || 1, a = uo / i, r = go({
|
|
6003
6197
|
activeBounds: o,
|
|
6004
6198
|
threshold: a,
|
|
6005
6199
|
anchors: this.anchors
|
|
6006
|
-
}), { deltaX: c, deltaY: d, guides:
|
|
6200
|
+
}), { deltaX: c, deltaY: d, guides: l } = r;
|
|
6007
6201
|
if (c !== 0 || d !== 0) {
|
|
6008
6202
|
const { left: m = 0, top: v = 0 } = e;
|
|
6009
6203
|
e.set({
|
|
6010
6204
|
left: m + c,
|
|
6011
6205
|
top: v + d
|
|
6012
|
-
}), e.setCoords(), o = (f =
|
|
6206
|
+
}), e.setCoords(), o = (f = dt({ object: e })) != null ? f : o;
|
|
6013
6207
|
}
|
|
6014
|
-
const u = this.cachedTargetBounds.length ? this.cachedTargetBounds : this._collectTargets({ activeObject: e }).map((m) =>
|
|
6208
|
+
const u = this.cachedTargetBounds.length ? this.cachedTargetBounds : this._collectTargets({ activeObject: e }).map((m) => dt({ object: m })).filter((m) => !!m), g = mo({
|
|
6015
6209
|
activeBounds: o,
|
|
6016
6210
|
candidates: u,
|
|
6017
6211
|
threshold: a,
|
|
@@ -6022,10 +6216,10 @@ class ro {
|
|
|
6022
6216
|
e.set({
|
|
6023
6217
|
left: m + g.deltaX,
|
|
6024
6218
|
top: v + g.deltaY
|
|
6025
|
-
}), e.setCoords(), o = (p =
|
|
6219
|
+
}), e.setCoords(), o = (p = dt({ object: e })) != null ? p : o;
|
|
6026
6220
|
}
|
|
6027
6221
|
this._applyGuides({
|
|
6028
|
-
guides:
|
|
6222
|
+
guides: l,
|
|
6029
6223
|
spacingGuides: g.guides
|
|
6030
6224
|
});
|
|
6031
6225
|
}
|
|
@@ -6050,13 +6244,13 @@ class ro {
|
|
|
6050
6244
|
const { canvas: t, guideBounds: e } = this, s = t.getSelectionContext();
|
|
6051
6245
|
if (!s) return;
|
|
6052
6246
|
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
|
-
|
|
6247
|
+
s.save(), Array.isArray(c) && s.transform(...c), s.lineWidth = ge / d, s.strokeStyle = ts, s.setLineDash([4, 4]);
|
|
6248
|
+
for (const l of this.activeGuides)
|
|
6249
|
+
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();
|
|
6250
|
+
for (const l of this.activeSpacingGuides)
|
|
6251
|
+
vo({
|
|
6058
6252
|
context: s,
|
|
6059
|
-
guide:
|
|
6253
|
+
guide: l,
|
|
6060
6254
|
zoom: d
|
|
6061
6255
|
});
|
|
6062
6256
|
s.restore();
|
|
@@ -6092,12 +6286,12 @@ class ro {
|
|
|
6092
6286
|
_cacheAnchors({ activeObject: t }) {
|
|
6093
6287
|
const e = this._collectTargets({ activeObject: t }), s = { vertical: [], horizontal: [] }, o = [];
|
|
6094
6288
|
for (const a of e) {
|
|
6095
|
-
const r =
|
|
6096
|
-
r && (
|
|
6289
|
+
const r = dt({ object: a });
|
|
6290
|
+
r && (Xe({ anchors: s, bounds: r }), o.push(r));
|
|
6097
6291
|
}
|
|
6098
|
-
const { montageArea: n } = this.editor, i =
|
|
6292
|
+
const { montageArea: n } = this.editor, i = dt({ object: n });
|
|
6099
6293
|
if (i) {
|
|
6100
|
-
|
|
6294
|
+
Xe({ anchors: s, bounds: i });
|
|
6101
6295
|
const { left: a, right: r, top: c, bottom: d } = i;
|
|
6102
6296
|
this.guideBounds = {
|
|
6103
6297
|
left: a,
|
|
@@ -6107,15 +6301,15 @@ class ro {
|
|
|
6107
6301
|
};
|
|
6108
6302
|
} else
|
|
6109
6303
|
this.guideBounds = this._calculateViewportBounds();
|
|
6110
|
-
this.anchors = s, this.spacingPatterns =
|
|
6304
|
+
this.anchors = s, this.spacingPatterns = bo({ bounds: o }), this.cachedTargetBounds = o;
|
|
6111
6305
|
}
|
|
6112
6306
|
/**
|
|
6113
6307
|
* Собирает объекты, подходящие для прилипания, исключая активный объект и запрещённые id.
|
|
6114
6308
|
*/
|
|
6115
6309
|
_collectTargets({ activeObject: t }) {
|
|
6116
|
-
const e =
|
|
6310
|
+
const e = ss({ activeObject: t }), s = [];
|
|
6117
6311
|
return this.canvas.forEachObject((o) => {
|
|
6118
|
-
|
|
6312
|
+
os({ object: o, excluded: e }) || s.push(o);
|
|
6119
6313
|
}), s;
|
|
6120
6314
|
}
|
|
6121
6315
|
/**
|
|
@@ -6129,17 +6323,17 @@ class ro {
|
|
|
6129
6323
|
i = 1,
|
|
6130
6324
|
a = 0,
|
|
6131
6325
|
r = 0
|
|
6132
|
-
] = e != null ? e : [], c = (0 - a) / n, d = (0 - r) / i,
|
|
6326
|
+
] = e != null ? e : [], c = (0 - a) / n, d = (0 - r) / i, l = (s - a) / n, u = (o - r) / i;
|
|
6133
6327
|
return {
|
|
6134
6328
|
left: c,
|
|
6135
|
-
right:
|
|
6329
|
+
right: l,
|
|
6136
6330
|
top: d,
|
|
6137
6331
|
bottom: u
|
|
6138
6332
|
};
|
|
6139
6333
|
}
|
|
6140
6334
|
}
|
|
6141
|
-
const
|
|
6142
|
-
class
|
|
6335
|
+
const Qe = "#3D8BF4", qe = 1;
|
|
6336
|
+
class At {
|
|
6143
6337
|
/**
|
|
6144
6338
|
* Создаёт менеджер измерений и инициализирует события.
|
|
6145
6339
|
*/
|
|
@@ -6244,15 +6438,15 @@ class wt {
|
|
|
6244
6438
|
this._clearGuides();
|
|
6245
6439
|
return;
|
|
6246
6440
|
}
|
|
6247
|
-
const n =
|
|
6441
|
+
const n = dt({ object: o });
|
|
6248
6442
|
if (!n) {
|
|
6249
6443
|
this._clearGuides();
|
|
6250
6444
|
return;
|
|
6251
6445
|
}
|
|
6252
|
-
const i =
|
|
6446
|
+
const i = At._resolveTarget({
|
|
6253
6447
|
event: t,
|
|
6254
6448
|
activeObject: o
|
|
6255
|
-
}), { montageArea: a } = s, r = i != null ? i : a, c = r === a, d =
|
|
6449
|
+
}), { montageArea: a } = s, r = i != null ? i : a, c = r === a, d = dt({ object: r });
|
|
6256
6450
|
if (!d) {
|
|
6257
6451
|
this._clearGuides();
|
|
6258
6452
|
return;
|
|
@@ -6261,7 +6455,7 @@ class wt {
|
|
|
6261
6455
|
this._clearGuides();
|
|
6262
6456
|
return;
|
|
6263
6457
|
}
|
|
6264
|
-
const u =
|
|
6458
|
+
const u = At._buildGuides({
|
|
6265
6459
|
activeBounds: n,
|
|
6266
6460
|
targetBounds: d,
|
|
6267
6461
|
targetIsMontageArea: c
|
|
@@ -6279,8 +6473,8 @@ class wt {
|
|
|
6279
6473
|
event: t,
|
|
6280
6474
|
activeObject: e
|
|
6281
6475
|
}) {
|
|
6282
|
-
const { target: s } = t, o =
|
|
6283
|
-
return s && !
|
|
6476
|
+
const { target: s } = t, o = ss({ activeObject: e });
|
|
6477
|
+
return s && !os({ object: s, excluded: o }) ? s : null;
|
|
6284
6478
|
}
|
|
6285
6479
|
/**
|
|
6286
6480
|
* Собирает вертикальные и горизонтальные направляющие расстояний.
|
|
@@ -6290,11 +6484,11 @@ class wt {
|
|
|
6290
6484
|
targetBounds: e,
|
|
6291
6485
|
targetIsMontageArea: s
|
|
6292
6486
|
}) {
|
|
6293
|
-
const o =
|
|
6487
|
+
const o = At._buildHorizontalGuides({
|
|
6294
6488
|
activeBounds: t,
|
|
6295
6489
|
targetBounds: e,
|
|
6296
6490
|
targetIsMontageArea: s
|
|
6297
|
-
}), n =
|
|
6491
|
+
}), n = At._buildVerticalGuides({
|
|
6298
6492
|
activeBounds: t,
|
|
6299
6493
|
targetBounds: e,
|
|
6300
6494
|
targetIsMontageArea: s
|
|
@@ -6317,7 +6511,7 @@ class wt {
|
|
|
6317
6511
|
centerY: c = 0
|
|
6318
6512
|
} = t, {
|
|
6319
6513
|
left: d = 0,
|
|
6320
|
-
right:
|
|
6514
|
+
right: l = 0,
|
|
6321
6515
|
top: u = 0,
|
|
6322
6516
|
bottom: g = 0,
|
|
6323
6517
|
centerY: f = 0
|
|
@@ -6333,31 +6527,31 @@ class wt {
|
|
|
6333
6527
|
distance: T
|
|
6334
6528
|
}), o;
|
|
6335
6529
|
}
|
|
6336
|
-
if (
|
|
6530
|
+
if (l <= n) {
|
|
6337
6531
|
if (s) return o;
|
|
6338
|
-
const T = n -
|
|
6532
|
+
const T = n - l;
|
|
6339
6533
|
return T > 0 && o.push({
|
|
6340
6534
|
type: "horizontal",
|
|
6341
6535
|
axis: b,
|
|
6342
|
-
start:
|
|
6536
|
+
start: l,
|
|
6343
6537
|
end: n,
|
|
6344
6538
|
distance: T
|
|
6345
6539
|
}), o;
|
|
6346
6540
|
}
|
|
6347
6541
|
if (!s) return o;
|
|
6348
|
-
const I = n < d, y = i >
|
|
6349
|
-
|
|
6542
|
+
const I = n < d, y = i > l, w = Math.min(n, d), S = Math.max(n, d), A = S - w;
|
|
6543
|
+
A > 0 && !I && o.push({
|
|
6350
6544
|
type: "horizontal",
|
|
6351
6545
|
axis: b,
|
|
6352
|
-
start:
|
|
6353
|
-
end:
|
|
6354
|
-
distance:
|
|
6546
|
+
start: w,
|
|
6547
|
+
end: S,
|
|
6548
|
+
distance: A
|
|
6355
6549
|
});
|
|
6356
|
-
const
|
|
6550
|
+
const M = Math.min(i, l), C = Math.max(i, l), j = C - M;
|
|
6357
6551
|
return j > 0 && !y && o.push({
|
|
6358
6552
|
type: "horizontal",
|
|
6359
6553
|
axis: b,
|
|
6360
|
-
start:
|
|
6554
|
+
start: M,
|
|
6361
6555
|
end: C,
|
|
6362
6556
|
distance: j
|
|
6363
6557
|
}), o;
|
|
@@ -6378,7 +6572,7 @@ class wt {
|
|
|
6378
6572
|
centerX: c = 0
|
|
6379
6573
|
} = t, {
|
|
6380
6574
|
top: d = 0,
|
|
6381
|
-
bottom:
|
|
6575
|
+
bottom: l = 0,
|
|
6382
6576
|
left: u = 0,
|
|
6383
6577
|
right: g = 0,
|
|
6384
6578
|
centerX: f = 0
|
|
@@ -6394,31 +6588,31 @@ class wt {
|
|
|
6394
6588
|
distance: T
|
|
6395
6589
|
}), o;
|
|
6396
6590
|
}
|
|
6397
|
-
if (
|
|
6591
|
+
if (l <= n) {
|
|
6398
6592
|
if (s) return o;
|
|
6399
|
-
const T = n -
|
|
6593
|
+
const T = n - l;
|
|
6400
6594
|
return T > 0 && o.push({
|
|
6401
6595
|
type: "vertical",
|
|
6402
6596
|
axis: b,
|
|
6403
|
-
start:
|
|
6597
|
+
start: l,
|
|
6404
6598
|
end: n,
|
|
6405
6599
|
distance: T
|
|
6406
6600
|
}), o;
|
|
6407
6601
|
}
|
|
6408
6602
|
if (!s) return o;
|
|
6409
|
-
const I = n < d, y = i >
|
|
6410
|
-
|
|
6603
|
+
const I = n < d, y = i > l, w = Math.min(n, d), S = Math.max(n, d), A = S - w;
|
|
6604
|
+
A > 0 && !I && o.push({
|
|
6411
6605
|
type: "vertical",
|
|
6412
6606
|
axis: b,
|
|
6413
|
-
start:
|
|
6414
|
-
end:
|
|
6415
|
-
distance:
|
|
6607
|
+
start: w,
|
|
6608
|
+
end: S,
|
|
6609
|
+
distance: A
|
|
6416
6610
|
});
|
|
6417
|
-
const
|
|
6611
|
+
const M = Math.min(i, l), C = Math.max(i, l), j = C - M;
|
|
6418
6612
|
return j > 0 && !y && o.push({
|
|
6419
6613
|
type: "vertical",
|
|
6420
6614
|
axis: b,
|
|
6421
|
-
start:
|
|
6615
|
+
start: M,
|
|
6422
6616
|
end: C,
|
|
6423
6617
|
distance: j
|
|
6424
6618
|
}), o;
|
|
@@ -6448,19 +6642,19 @@ class wt {
|
|
|
6448
6642
|
const { canvas: t } = this, e = t.getSelectionContext();
|
|
6449
6643
|
if (!e) return;
|
|
6450
6644
|
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 =
|
|
6645
|
+
e.save(), Array.isArray(s) && e.transform(...s), e.lineWidth = qe / o, e.strokeStyle = Qe, e.setLineDash([]);
|
|
6452
6646
|
for (const c of this.activeGuides) {
|
|
6453
|
-
const { type: d, axis:
|
|
6454
|
-
e.beginPath(), d === "vertical" ? (e.moveTo(
|
|
6647
|
+
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;
|
|
6648
|
+
e.beginPath(), d === "vertical" ? (e.moveTo(l, u), e.lineTo(l, g)) : (e.moveTo(u, l), e.lineTo(g, l)), e.stroke(), fe({
|
|
6455
6649
|
context: e,
|
|
6456
6650
|
type: d,
|
|
6457
|
-
axis:
|
|
6651
|
+
axis: l,
|
|
6458
6652
|
start: u,
|
|
6459
6653
|
end: g,
|
|
6460
6654
|
text: Math.round(f).toString(),
|
|
6461
6655
|
zoom: o,
|
|
6462
|
-
color:
|
|
6463
|
-
lineWidth:
|
|
6656
|
+
color: Qe,
|
|
6657
|
+
lineWidth: qe,
|
|
6464
6658
|
offsetAlongAxis: v,
|
|
6465
6659
|
offsetPerpendicular: b
|
|
6466
6660
|
});
|
|
@@ -6486,14 +6680,14 @@ class wt {
|
|
|
6486
6680
|
(e = t == null ? void 0 : t.showAfterTemporary) == null || e.call(t), this.isToolbarHidden = !1;
|
|
6487
6681
|
}
|
|
6488
6682
|
}
|
|
6489
|
-
class
|
|
6683
|
+
class Me {
|
|
6490
6684
|
/**
|
|
6491
6685
|
* Конструктор класса ImageEditor.
|
|
6492
6686
|
* @param canvasId - идентификатор канваса, в котором будет создан редактор
|
|
6493
6687
|
* @param options - опции и настройки редактора
|
|
6494
6688
|
*/
|
|
6495
6689
|
constructor(t, e) {
|
|
6496
|
-
this.options = e, this.containerId = t, this.editorId = `${t}-${
|
|
6690
|
+
this.options = e, this.containerId = t, this.editorId = `${t}-${Y()}`, this.clipboard = null, this.init();
|
|
6497
6691
|
}
|
|
6498
6692
|
/**
|
|
6499
6693
|
* Инициализация редактора.
|
|
@@ -6514,9 +6708,9 @@ class fe {
|
|
|
6514
6708
|
initialStateJSON: r,
|
|
6515
6709
|
scaleType: c,
|
|
6516
6710
|
showRotationAngle: d,
|
|
6517
|
-
_onReadyCallback:
|
|
6711
|
+
_onReadyCallback: l
|
|
6518
6712
|
} = this.options;
|
|
6519
|
-
if (
|
|
6713
|
+
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
6714
|
const {
|
|
6521
6715
|
source: g,
|
|
6522
6716
|
scale: f = `image-${c}`,
|
|
@@ -6524,7 +6718,7 @@ class fe {
|
|
|
6524
6718
|
} = a;
|
|
6525
6719
|
yield this.imageManager.importImage({ source: g, scale: f, withoutSave: p });
|
|
6526
6720
|
}
|
|
6527
|
-
r && this.historyManager.loadStateFromFullState(r), this.historyManager.saveState(), console.log("editor:ready"), this.canvas.fire("editor:ready", this), typeof
|
|
6721
|
+
r && this.historyManager.loadStateFromFullState(r), this.historyManager.saveState(), console.log("editor:ready"), this.canvas.fire("editor:ready", this), typeof l == "function" && l(this);
|
|
6528
6722
|
});
|
|
6529
6723
|
}
|
|
6530
6724
|
/**
|
|
@@ -6538,7 +6732,7 @@ class fe {
|
|
|
6538
6732
|
this.montageArea = this.shapeManager.addRectangle({
|
|
6539
6733
|
width: t,
|
|
6540
6734
|
height: e,
|
|
6541
|
-
fill:
|
|
6735
|
+
fill: Me._createMosaicPattern(),
|
|
6542
6736
|
stroke: null,
|
|
6543
6737
|
strokeWidth: 0,
|
|
6544
6738
|
selectable: !1,
|
|
@@ -6589,7 +6783,7 @@ class fe {
|
|
|
6589
6783
|
const t = document.createElement("canvas");
|
|
6590
6784
|
t.width = 20, t.height = 20;
|
|
6591
6785
|
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
|
|
6786
|
+
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
6787
|
source: t,
|
|
6594
6788
|
repeat: "repeat"
|
|
6595
6789
|
});
|
|
@@ -6621,7 +6815,7 @@ const E = [
|
|
|
6621
6815
|
"U+0490-0491",
|
|
6622
6816
|
"U+04B0-04B1",
|
|
6623
6817
|
"U+2116"
|
|
6624
|
-
].join(", "),
|
|
6818
|
+
].join(", "), So = [
|
|
6625
6819
|
{
|
|
6626
6820
|
family: "Arial",
|
|
6627
6821
|
source: 'local("Arial"), local("Liberation Sans"), local("DejaVu Sans")',
|
|
@@ -7411,7 +7605,7 @@ const E = [
|
|
|
7411
7605
|
unicodeRange: E
|
|
7412
7606
|
}
|
|
7413
7607
|
}
|
|
7414
|
-
],
|
|
7608
|
+
], Ao = {
|
|
7415
7609
|
/**
|
|
7416
7610
|
* Опции редактора
|
|
7417
7611
|
*/
|
|
@@ -7503,20 +7697,20 @@ const E = [
|
|
|
7503
7697
|
/**
|
|
7504
7698
|
* Список шрифтов, которые будут доступны в редакторе по умолчанию.
|
|
7505
7699
|
*/
|
|
7506
|
-
fonts:
|
|
7700
|
+
fonts: So
|
|
7507
7701
|
};
|
|
7508
|
-
function
|
|
7509
|
-
const e =
|
|
7702
|
+
function Eo(h, t = {}) {
|
|
7703
|
+
const e = k(k({}, Ao), t), s = document.getElementById(h);
|
|
7510
7704
|
if (!s)
|
|
7511
|
-
return Promise.reject(new Error(`Контейнер с ID "${
|
|
7705
|
+
return Promise.reject(new Error(`Контейнер с ID "${h}" не найден.`));
|
|
7512
7706
|
const o = document.createElement("canvas");
|
|
7513
|
-
return o.id = `${
|
|
7707
|
+
return o.id = `${h}-canvas`, s.appendChild(o), e.editorContainer = s, new Promise((n) => {
|
|
7514
7708
|
e._onReadyCallback = n;
|
|
7515
|
-
const i = new
|
|
7516
|
-
window[
|
|
7709
|
+
const i = new Me(o.id, e);
|
|
7710
|
+
window[h] = i;
|
|
7517
7711
|
});
|
|
7518
7712
|
}
|
|
7519
7713
|
export {
|
|
7520
|
-
|
|
7714
|
+
Eo as default
|
|
7521
7715
|
};
|
|
7522
7716
|
//# sourceMappingURL=main.js.map
|