@anu3ev/fabric-image-editor 0.1.78 → 0.1.79
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 +348 -344
- 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 Se = Object.defineProperty, De = Object.defineProperties;
|
|
2
|
+
var Ee = Object.getOwnPropertyDescriptors;
|
|
3
|
+
var F = Object.getOwnPropertySymbols;
|
|
4
|
+
var fe = Object.prototype.hasOwnProperty, Me = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var ue = (c, e, t) => e in c ? Se(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t, I = (c, e) => {
|
|
6
6
|
for (var t in e || (e = {}))
|
|
7
|
-
|
|
8
|
-
if (
|
|
9
|
-
for (var t of
|
|
10
|
-
|
|
7
|
+
fe.call(e, t) && ue(c, t, e[t]);
|
|
8
|
+
if (F)
|
|
9
|
+
for (var t of F(e))
|
|
10
|
+
Me.call(e, t) && ue(c, t, e[t]);
|
|
11
11
|
return c;
|
|
12
|
-
},
|
|
13
|
-
var
|
|
12
|
+
}, me = (c, e) => De(c, Ee(e));
|
|
13
|
+
var V = (c, e) => {
|
|
14
14
|
var t = {};
|
|
15
15
|
for (var s in c)
|
|
16
|
-
|
|
17
|
-
if (c != null &&
|
|
18
|
-
for (var s of
|
|
19
|
-
e.indexOf(s) < 0 &&
|
|
16
|
+
fe.call(c, s) && e.indexOf(s) < 0 && (t[s] = c[s]);
|
|
17
|
+
if (c != null && F)
|
|
18
|
+
for (var s of F(c))
|
|
19
|
+
e.indexOf(s) < 0 && Me.call(c, s) && (t[s] = c[s]);
|
|
20
20
|
return t;
|
|
21
21
|
};
|
|
22
|
-
var
|
|
22
|
+
var j = (c, e, t) => new Promise((s, a) => {
|
|
23
23
|
var o = (r) => {
|
|
24
24
|
try {
|
|
25
25
|
i(t.next(r));
|
|
@@ -35,15 +35,15 @@ var p = (c, e, t) => new Promise((s, a) => {
|
|
|
35
35
|
}, i = (r) => r.done ? s(r.value) : Promise.resolve(r.value).then(o, n);
|
|
36
36
|
i((t = t.apply(c, e)).next());
|
|
37
37
|
});
|
|
38
|
-
import { ActiveSelection as v, util as
|
|
39
|
-
import { create as
|
|
40
|
-
import
|
|
41
|
-
var
|
|
38
|
+
import { ActiveSelection as v, util as W, controlsUtils as Ne, InteractiveFabricObject as Oe, loadSVGFromURL as Le, FabricImage as Z, Point as X, Gradient as be, Rect as we, Circle as Te, Triangle as ke, Group as te, Canvas as Be, Pattern as _e } from "fabric";
|
|
39
|
+
import { create as xe } from "jsondiffpatch";
|
|
40
|
+
import Re from "diff-match-patch";
|
|
41
|
+
var Ue = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", A = function() {
|
|
42
42
|
for (var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 21, t = "", s = crypto.getRandomValues(new Uint8Array(e |= 0)); e--; )
|
|
43
|
-
t +=
|
|
43
|
+
t += Ue[s[e] & 63];
|
|
44
44
|
return t;
|
|
45
45
|
};
|
|
46
|
-
class
|
|
46
|
+
class P {
|
|
47
47
|
/**
|
|
48
48
|
* Конструктор принимает редактор и опции.
|
|
49
49
|
* @param params
|
|
@@ -61,7 +61,7 @@ class Y {
|
|
|
61
61
|
* @param params.options.adaptCanvasToContainerOnResize — адаптировать канвас к размерам контейнера при изменении размеров окна
|
|
62
62
|
*/
|
|
63
63
|
constructor({ editor: e, options: t = {} }) {
|
|
64
|
-
this.isDragging = !1, this.lastMouseX = 0, this.lastMouseY = 0, this.isUndoRedoKeyPressed = !1, this.isSpacePressed = !1, this.savedSelection = [], this.canvasDragging = !1, this.mouseWheelZooming = !1, this.bringToFrontOnSelection = !1, this.resetObjectFitByDoubleClick = !1, this.copyObjectsByHotkey = !1, this.pasteImageFromClipboard = !1, this.undoRedoByHotKeys = !1, this.selectAllByHotkey = !1, this.deleteObjectsByHotkey = !1, this.adaptCanvasToContainerOnResize = !1, this.editor = e, this.canvas = e.canvas, this.options = t, this.handleContainerResizeBound =
|
|
64
|
+
this.isDragging = !1, this.lastMouseX = 0, this.lastMouseY = 0, this.isUndoRedoKeyPressed = !1, this.isSpacePressed = !1, this.savedSelection = [], this.canvasDragging = !1, this.mouseWheelZooming = !1, this.bringToFrontOnSelection = !1, this.resetObjectFitByDoubleClick = !1, this.copyObjectsByHotkey = !1, this.pasteImageFromClipboard = !1, this.undoRedoByHotKeys = !1, this.selectAllByHotkey = !1, this.deleteObjectsByHotkey = !1, this.adaptCanvasToContainerOnResize = !1, this.editor = e, this.canvas = e.canvas, this.options = t, this.handleContainerResizeBound = P.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 = P.debounce(this.handleObjectModifiedHistory.bind(this), 300), this.handleObjectRotatingHistoryBound = P.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
|
* Инициализация всех обработчиков согласно опциям.
|
|
@@ -77,9 +77,9 @@ class Y {
|
|
|
77
77
|
undoRedoByHotKeys: i,
|
|
78
78
|
selectAllByHotkey: r,
|
|
79
79
|
deleteObjectsByHotkey: d,
|
|
80
|
-
resetObjectFitByDoubleClick:
|
|
80
|
+
resetObjectFitByDoubleClick: h
|
|
81
81
|
} = this.options;
|
|
82
|
-
t && (this.canvas.on("mouse:down", this.handleCanvasDragStartBound), this.canvas.on("mouse:move", this.handleCanvasDraggingBound), this.canvas.on("mouse:up", this.handleCanvasDragEndBound), document.addEventListener("keydown", this.handleSpaceKeyDownBound, { capture: !0 }), document.addEventListener("keyup", this.handleSpaceKeyUpBound, { capture: !0 })), s && this.canvas.on("mouse:wheel", this.handleMouseWheelZoomBound), a && (this.canvas.on("selection:created", this.handleBringToFrontBound), this.canvas.on("selection:updated", this.handleBringToFrontBound)),
|
|
82
|
+
t && (this.canvas.on("mouse:down", this.handleCanvasDragStartBound), this.canvas.on("mouse:move", this.handleCanvasDraggingBound), this.canvas.on("mouse:up", this.handleCanvasDragEndBound), document.addEventListener("keydown", this.handleSpaceKeyDownBound, { capture: !0 }), document.addEventListener("keyup", this.handleSpaceKeyUpBound, { capture: !0 })), s && this.canvas.on("mouse:wheel", this.handleMouseWheelZoomBound), a && (this.canvas.on("selection:created", this.handleBringToFrontBound), this.canvas.on("selection:updated", this.handleBringToFrontBound)), h && this.canvas.on("mouse:dblclick", this.handleResetObjectFitBound), e && window.addEventListener("resize", this.handleContainerResizeBound, { capture: !0 }), o && document.addEventListener("keydown", this.handleCopyEventBound, { capture: !0 }), n && document.addEventListener("paste", this.handlePasteEventBound, { capture: !0 }), i && (document.addEventListener("keydown", this.handleUndoRedoEventBound, { capture: !0 }), document.addEventListener("keyup", this.handleUndoRedoKeyUpBound, { capture: !0 })), r && document.addEventListener("keydown", this.handleSelectAllEventBound, { capture: !0 }), d && document.addEventListener("keydown", this.handleDeleteObjectsEventBound, { capture: !0 }), this.canvas.on("object:modified", this.handleObjectModifiedHistoryBound), this.canvas.on("object:rotating", this.handleObjectRotatingHistoryBound), this.canvas.on("object:added", this.handleObjectAddedHistoryBound), this.canvas.on("object:removed", this.handleObjectRemovedHistoryBound), this.canvas.on("object:added", this.handleOverlayUpdateBound), this.canvas.on("selection:created", this.handleOverlayUpdateBound), this.canvas.on("selection:created", this.handleLockedSelectionBound), this.canvas.on("selection:updated", this.handleLockedSelectionBound), this.canvas.on("object:added", this.handleBackgroundUpdateBound), this.canvas.on("selection:created", this.handleBackgroundUpdateBound);
|
|
83
83
|
}
|
|
84
84
|
/**
|
|
85
85
|
* При массовом выделении объектов удаляем из него залоченные.
|
|
@@ -175,7 +175,7 @@ class Y {
|
|
|
175
175
|
* @param event.code — код клавиши
|
|
176
176
|
*/
|
|
177
177
|
handleUndoRedoEvent(e) {
|
|
178
|
-
return
|
|
178
|
+
return j(this, null, function* () {
|
|
179
179
|
const { ctrlKey: t, metaKey: s, code: a, repeat: o } = e;
|
|
180
180
|
this._shouldIgnoreKeyboardEvent(e) || !t && !s || o || !/Mac/i.test(navigator.userAgent) && this.isUndoRedoKeyPressed || (a === "KeyZ" ? (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.undo()) : a === "KeyY" && (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.redo()));
|
|
181
181
|
});
|
|
@@ -340,13 +340,13 @@ class Y {
|
|
|
340
340
|
r.nodeType === Node.TEXT_NODE && (r = r.parentElement);
|
|
341
341
|
const { keyboardIgnoreSelectors: d } = this.options;
|
|
342
342
|
if (d != null && d.length && r)
|
|
343
|
-
for (const
|
|
343
|
+
for (const h of d)
|
|
344
344
|
try {
|
|
345
|
-
const
|
|
346
|
-
if (
|
|
345
|
+
const l = r;
|
|
346
|
+
if (l.matches && l.matches(h) || l.closest && l.closest(h))
|
|
347
347
|
return !0;
|
|
348
|
-
} catch (
|
|
349
|
-
console.warn(`Error checking selection container with selector "${
|
|
348
|
+
} catch (l) {
|
|
349
|
+
console.warn(`Error checking selection container with selector "${h}":`, l);
|
|
350
350
|
}
|
|
351
351
|
}
|
|
352
352
|
return !1;
|
|
@@ -372,7 +372,7 @@ class Y {
|
|
|
372
372
|
};
|
|
373
373
|
}
|
|
374
374
|
}
|
|
375
|
-
class
|
|
375
|
+
class ze {
|
|
376
376
|
/**
|
|
377
377
|
* Класс для динамической загрузки внешних модулей.
|
|
378
378
|
*/
|
|
@@ -390,7 +390,7 @@ class Ue {
|
|
|
390
390
|
return this.loaders[e] ? (this.cache.has(e) || this.cache.set(e, this.loaders[e]()), this.cache.get(e)) : Promise.reject(new Error(`Unknown module "${e}"`));
|
|
391
391
|
}
|
|
392
392
|
}
|
|
393
|
-
function
|
|
393
|
+
function He(c) {
|
|
394
394
|
return new Worker(
|
|
395
395
|
"" + new URL("assets/worker-CN39s7P7.js", import.meta.url).href,
|
|
396
396
|
{
|
|
@@ -398,13 +398,13 @@ function ze(c) {
|
|
|
398
398
|
}
|
|
399
399
|
);
|
|
400
400
|
}
|
|
401
|
-
class
|
|
401
|
+
class Ze {
|
|
402
402
|
/**
|
|
403
403
|
* @param scriptUrl — URL скрипта воркера.
|
|
404
404
|
* По-умолчанию использует DefaultWorker из соседнего файла
|
|
405
405
|
*/
|
|
406
406
|
constructor(e) {
|
|
407
|
-
e ? this.worker = new Worker(e, { type: "module" }) : this.worker = new
|
|
407
|
+
e ? this.worker = new Worker(e, { type: "module" }) : this.worker = new He(), this._callbacks = /* @__PURE__ */ new Map(), this.worker.onmessage = this._handleMessage.bind(this);
|
|
408
408
|
}
|
|
409
409
|
/**
|
|
410
410
|
* Обработчик сообщений от воркера
|
|
@@ -444,50 +444,50 @@ class He {
|
|
|
444
444
|
this.worker.terminate();
|
|
445
445
|
}
|
|
446
446
|
}
|
|
447
|
-
const N = 12,
|
|
448
|
-
function
|
|
449
|
-
const o = N, n =
|
|
450
|
-
c.save(), c.translate(e, t), c.rotate(
|
|
451
|
-
}
|
|
452
|
-
function be(c, e, t, s, a) {
|
|
453
|
-
const o = te, n = se, i = Ye;
|
|
454
|
-
c.save(), c.translate(e, t), c.rotate(P.degreesToRadians(a.angle)), c.fillStyle = re, c.strokeStyle = ie, c.lineWidth = ne, c.beginPath(), c.roundRect(-o / 2, -n / 2, o, n, i), c.fill(), c.stroke(), c.restore();
|
|
447
|
+
const N = 12, Ye = 2, se = 8, ae = 20, Pe = 100, oe = 20, ne = 8, We = 100, Q = 32, ie = 1, Fe = "#2B2D33", re = "#3D8BF4", ce = "#FFFFFF";
|
|
448
|
+
function G(c, e, t, s, a) {
|
|
449
|
+
const o = N, n = Ye;
|
|
450
|
+
c.save(), c.translate(e, t), c.rotate(W.degreesToRadians(a.angle)), c.fillStyle = ce, c.strokeStyle = re, c.lineWidth = ie, c.beginPath(), c.roundRect(-o / 2, -o / 2, o, o, n), c.fill(), c.stroke(), c.restore();
|
|
455
451
|
}
|
|
456
452
|
function je(c, e, t, s, a) {
|
|
457
|
-
const o =
|
|
458
|
-
c.save(), c.translate(e, t), c.rotate(
|
|
453
|
+
const o = se, n = ae, i = Pe;
|
|
454
|
+
c.save(), c.translate(e, t), c.rotate(W.degreesToRadians(a.angle)), c.fillStyle = ce, c.strokeStyle = re, c.lineWidth = ie, c.beginPath(), c.roundRect(-o / 2, -n / 2, o, n, i), c.fill(), c.stroke(), c.restore();
|
|
455
|
+
}
|
|
456
|
+
function pe(c, e, t, s, a) {
|
|
457
|
+
const o = oe, n = ne, i = We;
|
|
458
|
+
c.save(), c.translate(e, t), c.rotate(W.degreesToRadians(a.angle)), c.fillStyle = ce, c.strokeStyle = re, c.lineWidth = ie, c.beginPath(), c.roundRect(-o / 2, -n / 2, o, n, i), c.fill(), c.stroke(), c.restore();
|
|
459
459
|
}
|
|
460
|
-
const
|
|
461
|
-
|
|
462
|
-
function
|
|
463
|
-
const n =
|
|
464
|
-
c.save(), c.translate(e, t), c.rotate(
|
|
460
|
+
const Ve = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", ve = new Image();
|
|
461
|
+
ve.src = Ve;
|
|
462
|
+
function Ge(c, e, t, s, a) {
|
|
463
|
+
const n = Q / 2;
|
|
464
|
+
c.save(), c.translate(e, t), c.rotate(W.degreesToRadians(a.angle)), c.fillStyle = Fe, c.beginPath(), c.arc(0, 0, n, 0, 2 * Math.PI), c.fill(), c.drawImage(ve, -n / 2, -n / 2, n, n), c.restore();
|
|
465
465
|
}
|
|
466
|
-
const
|
|
466
|
+
const Xe = {
|
|
467
467
|
// Угловые точки
|
|
468
468
|
tl: {
|
|
469
|
-
render:
|
|
469
|
+
render: G,
|
|
470
470
|
sizeX: N,
|
|
471
471
|
sizeY: N,
|
|
472
472
|
offsetX: 0,
|
|
473
473
|
offsetY: 0
|
|
474
474
|
},
|
|
475
475
|
tr: {
|
|
476
|
-
render:
|
|
476
|
+
render: G,
|
|
477
477
|
sizeX: N,
|
|
478
478
|
sizeY: N,
|
|
479
479
|
offsetX: 0,
|
|
480
480
|
offsetY: 0
|
|
481
481
|
},
|
|
482
482
|
bl: {
|
|
483
|
-
render:
|
|
483
|
+
render: G,
|
|
484
484
|
sizeX: N,
|
|
485
485
|
sizeY: N,
|
|
486
486
|
offsetX: 0,
|
|
487
487
|
offsetY: 0
|
|
488
488
|
},
|
|
489
489
|
br: {
|
|
490
|
-
render:
|
|
490
|
+
render: G,
|
|
491
491
|
sizeX: N,
|
|
492
492
|
sizeY: N,
|
|
493
493
|
offsetX: 0,
|
|
@@ -495,47 +495,47 @@ const Ge = {
|
|
|
495
495
|
},
|
|
496
496
|
// Середина вертикалей
|
|
497
497
|
ml: {
|
|
498
|
-
render:
|
|
499
|
-
sizeX:
|
|
500
|
-
sizeY:
|
|
498
|
+
render: je,
|
|
499
|
+
sizeX: se,
|
|
500
|
+
sizeY: ae,
|
|
501
501
|
offsetX: 0,
|
|
502
502
|
offsetY: 0
|
|
503
503
|
},
|
|
504
504
|
mr: {
|
|
505
|
-
render:
|
|
506
|
-
sizeX:
|
|
507
|
-
sizeY:
|
|
505
|
+
render: je,
|
|
506
|
+
sizeX: se,
|
|
507
|
+
sizeY: ae,
|
|
508
508
|
offsetX: 0,
|
|
509
509
|
offsetY: 0
|
|
510
510
|
},
|
|
511
511
|
// Середина горизонталей
|
|
512
512
|
mt: {
|
|
513
|
-
render:
|
|
514
|
-
sizeX:
|
|
515
|
-
sizeY:
|
|
513
|
+
render: pe,
|
|
514
|
+
sizeX: oe,
|
|
515
|
+
sizeY: ne,
|
|
516
516
|
offsetX: 0,
|
|
517
517
|
offsetY: 0
|
|
518
518
|
},
|
|
519
519
|
mb: {
|
|
520
|
-
render:
|
|
521
|
-
sizeX:
|
|
522
|
-
sizeY:
|
|
520
|
+
render: pe,
|
|
521
|
+
sizeX: oe,
|
|
522
|
+
sizeY: ne,
|
|
523
523
|
offsetX: 0,
|
|
524
524
|
offsetY: 0
|
|
525
525
|
},
|
|
526
526
|
// Специальный «rotate» контрол
|
|
527
527
|
mtr: {
|
|
528
|
-
render:
|
|
529
|
-
sizeX:
|
|
530
|
-
sizeY:
|
|
528
|
+
render: Ge,
|
|
529
|
+
sizeX: Q,
|
|
530
|
+
sizeY: Q,
|
|
531
531
|
offsetX: 0,
|
|
532
|
-
offsetY: -
|
|
532
|
+
offsetY: -Q
|
|
533
533
|
}
|
|
534
534
|
};
|
|
535
|
-
class
|
|
535
|
+
class Qe {
|
|
536
536
|
static apply() {
|
|
537
|
-
const e =
|
|
538
|
-
Object.entries(
|
|
537
|
+
const e = Ne.createObjectDefaultControls();
|
|
538
|
+
Object.entries(Xe).forEach(([t, s]) => {
|
|
539
539
|
Object.assign(e[t], {
|
|
540
540
|
render: s.render,
|
|
541
541
|
sizeX: s.sizeX,
|
|
@@ -543,13 +543,13 @@ class Xe {
|
|
|
543
543
|
offsetX: s.offsetX,
|
|
544
544
|
offsetY: s.offsetY
|
|
545
545
|
}), t === "mtr" && (e[t].cursorStyle = "grab", e[t].mouseDownHandler = (o, n, i, r) => {
|
|
546
|
-
var
|
|
547
|
-
(
|
|
546
|
+
var h;
|
|
547
|
+
(h = n.target.canvas) == null || h.setCursor("grabbing");
|
|
548
548
|
});
|
|
549
|
-
}),
|
|
549
|
+
}), Oe.ownDefaults.controls = e;
|
|
550
550
|
}
|
|
551
551
|
}
|
|
552
|
-
const
|
|
552
|
+
const Ke = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNi44NzUgMi41YS42MjUuNjI1IDAgMCAwLS42MjUuNjI0VjYuMjVIMy4xMjVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2MTBjMCAuMzQ1LjI4LjYyNS42MjUuNjI1aDEwYy4zNDUgMCAuNjI1LS4yOC42MjUtLjYyNXYtMy4xMjZoMy4xMjVjLjM0NSAwIC42MjUtLjI4LjYyNS0uNjI1di0xMGEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTEwWm02Ljg3NSAxMGgyLjVWMy43NUg3LjV2Mi41aDUuNjI1Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NS42MjRabS0xMCAzLjc1VjcuNWg4Ljc1djguNzVIMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", $e = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi41IDcuNWMwLS42OS41Ni0xLjI1IDEuMjUtMS4yNWgxMi41Yy42OSAwIDEuMjUuNTYgMS4yNSAxLjI1djguNzVjMCAuNjktLjU2IDEuMjUtMS4yNSAxLjI1SDMuNzVjLS42OSAwLTEuMjUtLjU2LTEuMjUtMS4yNVY3LjVabTEzLjc1IDBIMy43NXY4Ljc1aDEyLjVWNy41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMS44NzVhMi4xODggMi4xODggMCAwIDAtMi4xODggMi4xODh2Mi44MTJhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyYTMuNDM3IDMuNDM3IDAgMSAxIDYuODc1IDB2Mi44MTNhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyQTIuMTg4IDIuMTg4IDAgMCAwIDEwIDEuODc2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEwIDEyLjgxM2EuOTM3LjkzNyAwIDEgMCAwLTEuODc1LjkzNy45MzcgMCAwIDAgMCAxLjg3NFoiLz48L3N2Zz4=", Je = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE2LjI1IDYuMjVINy41VjQuMzc1YTIuNSAyLjUgMCAwIDEgMi41LTIuNWMxLjIgMCAyLjI4MS44NiAyLjUxMiAyYS42MjUuNjI1IDAgMCAwIDEuMjI2LS4yNWMtLjM1NC0xLjczOC0xLjkyNS0zLTMuNzM4LTNhMy43NTQgMy43NTQgMCAwIDAtMy43NSAzLjc1VjYuMjVoLTIuNUExLjI1IDEuMjUgMCAwIDAgMi41IDcuNXY4Ljc1YTEuMjUgMS4yNSAwIDAgMCAxLjI1IDEuMjVoMTIuNWExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjcuNWExLjI1IDEuMjUgMCAwIDAtMS4yNS0xLjI1Wm0wIDEwSDMuNzVWNy41aDEyLjV2OC43NVptLTUuMzEzLTQuMzc1YS45MzcuOTM3IDAgMSAxLTEuODc0IDAgLjkzNy45MzcgMCAwIDEgMS44NzQgMFoiLz48L3N2Zz4K", qe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIuNSA4LjEyNSAxMCAxMi41bDcuNS00LjM3NUwxMCAzLjc1IDIuNSA4LjEyNVoiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjY4NSAzLjIxYS42MjUuNjI1IDAgMCAxIC42MyAwbDcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOGw3LjUtNC4zNzVaTTMuNzQgOC4xMjUgMTAgMTEuNzc2bDYuMjYtMy42NTFMMTAgNC40NzQgMy43NCA4LjEyNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA5LjQ2YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDExLjc3NmwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA5LjQ2Wm0tMS42NiAyLjQxNUwxMCAxNS41MjZsNi4yNi0zLjY1MS0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNi0xLjk3NSAxLjE1MVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", et = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMy4yMWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDguMTI1IDEwIDExLjc3Nmw2LjI2LTMuNjUxTDEwIDQuNDc0IDMuNzQgOC4xMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjcxNCAxMCAxMCAxMi41bDQuMjg2LTIuNSAzLjIxNCAxLjg3NUwxMCAxNi4yNWwtNy41LTQuMzc1TDUuNzE0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDkuNDZhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgMTEuNzc2bDMuOTctMi4zMTZhLjYyNS42MjUgMCAwIDEgLjYzIDBsMy4yMTUgMS44NzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhMNS40IDkuNDZabS0xLjY2IDIuNDE1TDEwIDE1LjUyNmw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2LTEuOTc1IDEuMTUxWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", tt = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTIuNSA2LjI1IDcuNSA0LjM3NSA3LjUtNC4zNzVMMTAgMS44NzUgMi41IDYuMjVaIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMS4zMzVhLjYyNS42MjUgMCAwIDEgLjYzIDBsNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4bDcuNS00LjM3NVpNMy43NCA2LjI1IDEwIDkuOTAxbDYuMjYtMy42NTFMMTAgMi41OTkgMy43NCA2LjI1WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDExLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCAxMy42NTFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgMTEuMzM1Wk0zLjc0IDEzLjc1IDEwIDE3LjQwMWw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTMuNzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgNy41ODVhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgOS45MDFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgNy41ODVaTTMuNzQgMTAgMTAgMTMuNjUxIDE2LjI2IDEwbC0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNkwzLjc0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", st = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMS45NiAxMy40MzVhLjYyNS42MjUgMCAwIDEgLjg1NS0uMjI1TDEwIDE3LjQwMWw3LjE4NS00LjE5YS42MjUuNjI1IDAgMCAxIC42MyAxLjA3OWwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEtLjIyNS0uODU1Wk05LjY4NSAxLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDYuMjUgMTAgOS45MDFsNi4yNi0zLjY1MUwxMCAyLjU5OSAzLjc0IDYuMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im01LjcxNCAxMS44NzUgNC4yODYgMi41IDQuMjg2LTIuNUwxNy41IDEzLjc1IDEwIDE4LjEyNSAyLjUgMTMuNzVsMy4yMTQtMS44NzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgMTEuMzM1YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDEzLjY1MWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCAxMS4zMzVaTTMuNzQgMTMuNzUgMTAgMTcuNDAxbDYuMjYtMy42NTEtMS45NzQtMS4xNTEtMy45NzEgMi4zMTZhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTMuOTctMi4zMTZMMy43NCAxMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA3LjU4NWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCA5LjkwMWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA3LjU4NVpNMy43NCAxMCAxMCAxMy42NTEgMTYuMjYgMTBsLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTBaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=", at = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI0VDNEU0MCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOC4xMjUgMS4yNUExLjg3NSAxLjg3NSAwIDAgMCA2LjI1IDMuMTI1di42MjVIMy4xMjVhLjYyNS42MjUgMCAwIDAgMCAxLjI1aC42MjV2MTEuMjVBMS4yNSAxLjI1IDAgMCAwIDUgMTcuNWgxMGExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjVoLjYyNWEuNjI1LjYyNSAwIDAgMCAwLTEuMjVIMTMuNzV2LS42MjVhMS44NzUgMS44NzUgMCAwIDAtMS44NzUtMS44NzVoLTMuNzVabTQuMzc1IDIuNXYtLjYyNWEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2LjYyNWg1Wk01IDE2LjI1VjVoMTB2MTEuMjVINVpNOC4xMjUgNy41Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NWEuNjI1LjYyNSAwIDEgMS0xLjI1IDB2LTVjMC0uMzQ1LjI4LS42MjUuNjI1LS42MjVabTQuMzc1IDUuNjI1di01YS42MjUuNjI1IDAgMCAwLTEuMjUgMHY1YS42MjUuNjI1IDAgMSAwIDEuMjUgMFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", Y = {
|
|
553
553
|
style: {
|
|
554
554
|
position: "absolute",
|
|
555
555
|
display: "none",
|
|
@@ -616,17 +616,17 @@ const Qe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMj
|
|
|
616
616
|
],
|
|
617
617
|
offsetTop: 50,
|
|
618
618
|
icons: {
|
|
619
|
-
copyPaste:
|
|
620
|
-
delete:
|
|
621
|
-
lock:
|
|
622
|
-
unlock:
|
|
623
|
-
bringToFront:
|
|
624
|
-
sendToBack:
|
|
625
|
-
bringForward:
|
|
626
|
-
sendBackwards:
|
|
619
|
+
copyPaste: Ke,
|
|
620
|
+
delete: at,
|
|
621
|
+
lock: $e,
|
|
622
|
+
unlock: Je,
|
|
623
|
+
bringToFront: tt,
|
|
624
|
+
sendToBack: st,
|
|
625
|
+
bringForward: qe,
|
|
626
|
+
sendBackwards: et
|
|
627
627
|
},
|
|
628
628
|
handlers: {
|
|
629
|
-
copyPaste: (c) =>
|
|
629
|
+
copyPaste: (c) => j(null, null, function* () {
|
|
630
630
|
c.clipboardManager.copyPaste();
|
|
631
631
|
}),
|
|
632
632
|
delete: (c) => {
|
|
@@ -652,18 +652,18 @@ const Qe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMj
|
|
|
652
652
|
}
|
|
653
653
|
}
|
|
654
654
|
};
|
|
655
|
-
class
|
|
655
|
+
class ot {
|
|
656
656
|
constructor({ editor: e }) {
|
|
657
657
|
this.currentTarget = null, this.currentLocked = !1, this.isTransforming = !1, this.editor = e, this.canvas = e.canvas, this.options = e.options, this._initToolbar();
|
|
658
658
|
}
|
|
659
659
|
_initToolbar() {
|
|
660
660
|
if (!this.options.showToolbar) return;
|
|
661
661
|
const e = this.options.toolbar || {};
|
|
662
|
-
this.config =
|
|
663
|
-
style: I(I({},
|
|
664
|
-
btnStyle: I(I({},
|
|
665
|
-
icons: I(I({},
|
|
666
|
-
handlers: I(I({},
|
|
662
|
+
this.config = me(I(I({}, Y), e), {
|
|
663
|
+
style: I(I({}, Y.style), e.style || {}),
|
|
664
|
+
btnStyle: I(I({}, Y.btnStyle), e.btnStyle || {}),
|
|
665
|
+
icons: I(I({}, Y.icons), e.icons || {}),
|
|
666
|
+
handlers: I(I({}, Y.handlers), e.handlers || {})
|
|
667
667
|
}), this.currentTarget = null, this.currentLocked = !1, this.isTransforming = !1, this._onMouseDown = this._handleMouseDown.bind(this), this._onObjectMoving = this._startTransform.bind(this), this._onObjectScaling = this._startTransform.bind(this), this._onObjectRotating = this._startTransform.bind(this), this._onMouseUp = this._endTransform.bind(this), this._onObjectModified = this._endTransform.bind(this), this._onSelectionChange = this._updateToolbar.bind(this), this._onSelectionClear = () => {
|
|
668
668
|
this.el.style.display = "none";
|
|
669
669
|
}, this._createDOM(), this._bindEvents();
|
|
@@ -754,7 +754,7 @@ class at {
|
|
|
754
754
|
}
|
|
755
755
|
const { el: t, config: s, canvas: a } = this;
|
|
756
756
|
e.setCoords();
|
|
757
|
-
const o = a.getZoom(), [, , , , n, i] = a.viewportTransform, { x: r } = e.getCenterPoint(), { top: d, height:
|
|
757
|
+
const o = a.getZoom(), [, , , , n, i] = a.viewportTransform, { x: r } = e.getCenterPoint(), { top: d, height: h } = e.getBoundingRect(), g = r * o + n - t.offsetWidth / 2, u = s.offsetTop || 0, M = (d + h) * o + i + u;
|
|
758
758
|
Object.assign(t.style, {
|
|
759
759
|
left: `${g}px`,
|
|
760
760
|
top: `${M}px`,
|
|
@@ -768,7 +768,7 @@ class at {
|
|
|
768
768
|
this.el.removeEventListener("mouseover", this._onBtnOver), this.el.removeEventListener("mouseout", this._onBtnOut), this.canvas.off("mouse:down", this._onMouseDown), this.canvas.off("object:moving", this._onObjectMoving), this.canvas.off("object:scaling", this._onObjectScaling), this.canvas.off("object:rotating", this._onObjectRotating), this.canvas.off("mouse:up", this._onMouseUp), this.canvas.off("object:modified", this._onObjectModified), this.canvas.off("selection:created", this._onSelectionChange), this.canvas.off("selection:updated", this._onSelectionChange), this.canvas.off("after:render", this._onSelectionChange), this.canvas.off("selection:cleared", this._onSelectionClear), this.el.remove();
|
|
769
769
|
}
|
|
770
770
|
}
|
|
771
|
-
class
|
|
771
|
+
class K {
|
|
772
772
|
constructor({ editor: e }) {
|
|
773
773
|
this.editor = e, this.canvas = e.canvas, this._historySuspendCount = 0, this.baseState = null, this.patches = [], this.currentIndex = 0, this.maxHistoryLength = e.options.maxHistoryLength, this.totalChangesCount = 0, this.baseStateChangesCount = 0, this._createDiffPatcher();
|
|
774
774
|
}
|
|
@@ -780,7 +780,7 @@ class Q {
|
|
|
780
780
|
return this.patches[this.currentIndex - 1] || null;
|
|
781
781
|
}
|
|
782
782
|
_createDiffPatcher() {
|
|
783
|
-
this.diffPatcher =
|
|
783
|
+
this.diffPatcher = xe({
|
|
784
784
|
objectHash(e) {
|
|
785
785
|
const t = e;
|
|
786
786
|
return [
|
|
@@ -806,7 +806,7 @@ class Q {
|
|
|
806
806
|
includeValueOnMove: !1
|
|
807
807
|
},
|
|
808
808
|
textDiff: {
|
|
809
|
-
diffMatchPatch:
|
|
809
|
+
diffMatchPatch: Re,
|
|
810
810
|
minLength: 60
|
|
811
811
|
}
|
|
812
812
|
});
|
|
@@ -908,19 +908,19 @@ class Q {
|
|
|
908
908
|
* @fires editor:history-state-loaded
|
|
909
909
|
*/
|
|
910
910
|
loadStateFromFullState(e) {
|
|
911
|
-
return
|
|
911
|
+
return j(this, null, function* () {
|
|
912
912
|
if (!e) return;
|
|
913
913
|
console.log("loadStateFromFullState fullState", e);
|
|
914
914
|
const { canvas: t, canvasManager: s, interactionBlocker: a, backgroundManager: o } = this.editor, { width: n, height: i } = t;
|
|
915
|
-
a.overlayMask = null,
|
|
916
|
-
|
|
915
|
+
a.overlayMask = null, K._serializeCustomData(e), yield t.loadFromJSON(e, (l, g) => {
|
|
916
|
+
K._deserializeCustomData(l, g);
|
|
917
917
|
});
|
|
918
|
-
const r = t.getObjects().find((
|
|
918
|
+
const r = t.getObjects().find((l) => l.id === "montage-area");
|
|
919
919
|
r && (this.editor.montageArea = r, (n !== t.getWidth() || i !== t.getHeight()) && s.updateCanvas());
|
|
920
|
-
const d = t.getObjects().find((
|
|
920
|
+
const d = t.getObjects().find((l) => l.id === "overlay-mask");
|
|
921
921
|
d && (a.overlayMask = d, a.overlayMask.visible = !1);
|
|
922
|
-
const
|
|
923
|
-
|
|
922
|
+
const h = t.getObjects().find((l) => l.id === "background");
|
|
923
|
+
h ? (o.backgroundObject = h, o.refresh()) : o.removeBackground({ withoutSave: !0 }), t.renderAll(), t.fire("editor:history-state-loaded", {
|
|
924
924
|
fullState: e,
|
|
925
925
|
currentIndex: this.currentIndex,
|
|
926
926
|
totalChangesCount: this.totalChangesCount,
|
|
@@ -935,7 +935,7 @@ class Q {
|
|
|
935
935
|
* @fires editor:undo
|
|
936
936
|
*/
|
|
937
937
|
undo() {
|
|
938
|
-
return
|
|
938
|
+
return j(this, null, function* () {
|
|
939
939
|
if (!this.skipHistory) {
|
|
940
940
|
if (this.currentIndex <= 0) {
|
|
941
941
|
console.log("Нет предыдущих состояний для отмены.");
|
|
@@ -972,7 +972,7 @@ class Q {
|
|
|
972
972
|
* @fires editor:redo
|
|
973
973
|
*/
|
|
974
974
|
redo() {
|
|
975
|
-
return
|
|
975
|
+
return j(this, null, function* () {
|
|
976
976
|
if (!this.skipHistory) {
|
|
977
977
|
if (this.currentIndex >= this.patches.length) {
|
|
978
978
|
console.log("Нет состояний для повтора.");
|
|
@@ -1005,7 +1005,7 @@ class Q {
|
|
|
1005
1005
|
});
|
|
1006
1006
|
}
|
|
1007
1007
|
}
|
|
1008
|
-
const
|
|
1008
|
+
const nt = 0.1, it = 2, rt = 0.1, ct = 90, U = 16, z = 16, k = 4096, B = 4096, ye = "application/image-editor:";
|
|
1009
1009
|
class O {
|
|
1010
1010
|
constructor({ editor: e }) {
|
|
1011
1011
|
this.editor = e, this.options = e.options, this._createdBlobUrls = [], this.acceptContentTypes = this.editor.options.acceptContentTypes, this.acceptFormats = this.getAllowedFormatsFromContentTypes();
|
|
@@ -1023,7 +1023,7 @@ class O {
|
|
|
1023
1023
|
* @returns возвращает Promise с объектом изображения или null в случае ошибки
|
|
1024
1024
|
*/
|
|
1025
1025
|
importImage(e) {
|
|
1026
|
-
return
|
|
1026
|
+
return j(this, null, function* () {
|
|
1027
1027
|
const {
|
|
1028
1028
|
source: t,
|
|
1029
1029
|
scale: s = `image-${this.options.scaleType}`,
|
|
@@ -1033,34 +1033,34 @@ class O {
|
|
|
1033
1033
|
withoutSelection: i = !1
|
|
1034
1034
|
} = e;
|
|
1035
1035
|
if (!t) return null;
|
|
1036
|
-
const { canvas: r, montageArea: d, transformManager:
|
|
1036
|
+
const { canvas: r, montageArea: d, transformManager: h, historyManager: l, errorManager: g } = this.editor, u = yield this.getContentType(t), M = O.getFormatFromContentType(u), { acceptContentTypes: m, acceptFormats: p } = this;
|
|
1037
1037
|
if (!this.isAllowedContentType(u)) {
|
|
1038
|
-
const
|
|
1038
|
+
const f = `Неверный contentType для изображения: ${u}. Ожидается один из: ${this.acceptContentTypes.join(", ")}.`;
|
|
1039
1039
|
return g.emitError({
|
|
1040
1040
|
origin: "ImageManager",
|
|
1041
1041
|
method: "importImage",
|
|
1042
1042
|
code: "INVALID_CONTENT_TYPE",
|
|
1043
|
-
message:
|
|
1043
|
+
message: f,
|
|
1044
1044
|
data: {
|
|
1045
1045
|
source: t,
|
|
1046
1046
|
format: M,
|
|
1047
1047
|
contentType: u,
|
|
1048
1048
|
acceptContentTypes: m,
|
|
1049
|
-
acceptFormats:
|
|
1049
|
+
acceptFormats: p,
|
|
1050
1050
|
fromClipboard: o,
|
|
1051
1051
|
isBackground: n,
|
|
1052
1052
|
withoutSelection: i
|
|
1053
1053
|
}
|
|
1054
1054
|
}), null;
|
|
1055
1055
|
}
|
|
1056
|
-
|
|
1056
|
+
l.suspendHistory();
|
|
1057
1057
|
try {
|
|
1058
|
-
let
|
|
1058
|
+
let f, b;
|
|
1059
1059
|
if (t instanceof File)
|
|
1060
|
-
|
|
1060
|
+
f = URL.createObjectURL(t);
|
|
1061
1061
|
else if (typeof t == "string") {
|
|
1062
1062
|
const D = yield (yield fetch(t, { mode: "cors" })).blob();
|
|
1063
|
-
|
|
1063
|
+
f = URL.createObjectURL(D);
|
|
1064
1064
|
} else
|
|
1065
1065
|
return g.emitError({
|
|
1066
1066
|
origin: "ImageManager",
|
|
@@ -1072,37 +1072,37 @@ class O {
|
|
|
1072
1072
|
format: M,
|
|
1073
1073
|
contentType: u,
|
|
1074
1074
|
acceptContentTypes: m,
|
|
1075
|
-
acceptFormats:
|
|
1075
|
+
acceptFormats: p,
|
|
1076
1076
|
fromClipboard: o,
|
|
1077
1077
|
isBackground: n,
|
|
1078
1078
|
withoutSelection: i
|
|
1079
1079
|
}
|
|
1080
1080
|
}), null;
|
|
1081
|
-
if (this._createdBlobUrls.push(
|
|
1082
|
-
const C = yield
|
|
1083
|
-
b =
|
|
1081
|
+
if (this._createdBlobUrls.push(f), M === "svg") {
|
|
1082
|
+
const C = yield Le(f);
|
|
1083
|
+
b = W.groupSVGElements(C.objects, C.options);
|
|
1084
1084
|
} else
|
|
1085
|
-
b = yield
|
|
1086
|
-
const { width: S, height:
|
|
1087
|
-
if (b instanceof
|
|
1085
|
+
b = yield Z.fromURL(f, { crossOrigin: "anonymous" });
|
|
1086
|
+
const { width: S, height: T } = b;
|
|
1087
|
+
if (b instanceof Z) {
|
|
1088
1088
|
const C = b.getElement();
|
|
1089
1089
|
let D = "";
|
|
1090
|
-
if (C instanceof HTMLImageElement ? D = C.src : C instanceof HTMLCanvasElement && (D = C.toDataURL()),
|
|
1091
|
-
const
|
|
1092
|
-
this._createdBlobUrls.push(
|
|
1093
|
-
} else if (
|
|
1094
|
-
const
|
|
1095
|
-
this._createdBlobUrls.push(
|
|
1090
|
+
if (C instanceof HTMLImageElement ? D = C.src : C instanceof HTMLCanvasElement && (D = C.toDataURL()), T > B || S > k) {
|
|
1091
|
+
const _ = yield this.resizeImageToBoundaries(D, "max"), L = URL.createObjectURL(_);
|
|
1092
|
+
this._createdBlobUrls.push(L), b = yield Z.fromURL(L, { crossOrigin: "anonymous" });
|
|
1093
|
+
} else if (T < z || S < U) {
|
|
1094
|
+
const _ = yield this.resizeImageToBoundaries(D, "min"), L = URL.createObjectURL(_);
|
|
1095
|
+
this._createdBlobUrls.push(L), b = yield Z.fromURL(L, { crossOrigin: "anonymous" });
|
|
1096
1096
|
}
|
|
1097
1097
|
}
|
|
1098
1098
|
if (b.set("id", `${b.type}-${A()}`), b.set("format", M), s === "scale-montage")
|
|
1099
1099
|
this.editor.canvasManager.scaleMontageAreaToImage({ object: b, withoutSave: !0 });
|
|
1100
1100
|
else {
|
|
1101
|
-
const { width: C, height: D } = d,
|
|
1102
|
-
s === "image-contain" &&
|
|
1101
|
+
const { width: C, height: D } = d, _ = this.calculateScaleFactor({ imageObject: b, scaleType: s });
|
|
1102
|
+
s === "image-contain" && _ < 1 ? h.fitObject({ object: b, type: "contain", withoutSave: !0 }) : s === "image-cover" && (S > C || T > D) && h.fitObject({ object: b, type: "cover", withoutSave: !0 });
|
|
1103
1103
|
}
|
|
1104
|
-
r.add(b), r.centerObject(b), i || r.setActiveObject(b), r.renderAll(),
|
|
1105
|
-
const
|
|
1104
|
+
r.add(b), r.centerObject(b), i || r.setActiveObject(b), r.renderAll(), l.resumeHistory(), a || l.saveState();
|
|
1105
|
+
const H = {
|
|
1106
1106
|
image: b,
|
|
1107
1107
|
format: M,
|
|
1108
1108
|
contentType: u,
|
|
@@ -1113,13 +1113,13 @@ class O {
|
|
|
1113
1113
|
isBackground: n,
|
|
1114
1114
|
withoutSelection: i
|
|
1115
1115
|
};
|
|
1116
|
-
return r.fire("editor:image-imported",
|
|
1117
|
-
} catch (
|
|
1116
|
+
return r.fire("editor:image-imported", H), H;
|
|
1117
|
+
} catch (f) {
|
|
1118
1118
|
return g.emitError({
|
|
1119
1119
|
origin: "ImageManager",
|
|
1120
1120
|
method: "importImage",
|
|
1121
1121
|
code: "IMPORT_FAILED",
|
|
1122
|
-
message: `Ошибка импорта изображения: ${
|
|
1122
|
+
message: `Ошибка импорта изображения: ${f.message}`,
|
|
1123
1123
|
data: {
|
|
1124
1124
|
source: t,
|
|
1125
1125
|
format: M,
|
|
@@ -1130,7 +1130,7 @@ class O {
|
|
|
1130
1130
|
isBackground: n,
|
|
1131
1131
|
withoutSelection: i
|
|
1132
1132
|
}
|
|
1133
|
-
}),
|
|
1133
|
+
}), l.resumeHistory(), null;
|
|
1134
1134
|
}
|
|
1135
1135
|
});
|
|
1136
1136
|
}
|
|
@@ -1143,16 +1143,16 @@ class O {
|
|
|
1143
1143
|
* @returns возвращает Promise с Blob-объектом уменьшенного изображения
|
|
1144
1144
|
*/
|
|
1145
1145
|
resizeImageToBoundaries(e, t = "max") {
|
|
1146
|
-
return
|
|
1147
|
-
let s = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${
|
|
1148
|
-
t === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${
|
|
1146
|
+
return j(this, null, function* () {
|
|
1147
|
+
let s = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${k}x${B}`;
|
|
1148
|
+
t === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${U}x${z}`);
|
|
1149
1149
|
const a = {
|
|
1150
1150
|
dataURL: e,
|
|
1151
1151
|
sizeType: t,
|
|
1152
|
-
maxWidth:
|
|
1153
|
-
maxHeight:
|
|
1154
|
-
minWidth:
|
|
1155
|
-
minHeight:
|
|
1152
|
+
maxWidth: k,
|
|
1153
|
+
maxHeight: B,
|
|
1154
|
+
minWidth: U,
|
|
1155
|
+
minHeight: z
|
|
1156
1156
|
};
|
|
1157
1157
|
return this.editor.errorManager.emitWarning({
|
|
1158
1158
|
origin: "ImageManager",
|
|
@@ -1175,22 +1175,26 @@ class O {
|
|
|
1175
1175
|
* @fires editor:canvas-exported
|
|
1176
1176
|
*/
|
|
1177
1177
|
exportCanvasAsImageFile() {
|
|
1178
|
-
return
|
|
1178
|
+
return j(this, arguments, function* (e = {}) {
|
|
1179
1179
|
const {
|
|
1180
1180
|
fileName: t = "image.png",
|
|
1181
1181
|
contentType: s = "image/png",
|
|
1182
1182
|
exportAsBase64: a = !1,
|
|
1183
1183
|
exportAsBlob: o = !1
|
|
1184
|
-
} = e, { canvas: n, montageArea: i, workerManager: r } = this.editor;
|
|
1184
|
+
} = e, { canvas: n, montageArea: i, workerManager: r, interactionBlocker: d } = this.editor;
|
|
1185
1185
|
try {
|
|
1186
|
-
const
|
|
1186
|
+
const h = s === "application/pdf", l = h ? "image/jpg" : s, g = O.getFormatFromContentType(l);
|
|
1187
1187
|
i.setCoords();
|
|
1188
|
-
const { left:
|
|
1188
|
+
const { left: u, top: M, width: m, height: p } = i.getBoundingRect(), f = yield n.clone(["id", "format", "locked"]);
|
|
1189
1189
|
f.enableRetinaScaling = !1, ["image/jpg", "image/jpeg"].includes(l) && (f.backgroundColor = "#ffffff");
|
|
1190
|
-
const
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1190
|
+
const b = f.getObjects().find((y) => y.id === i.id);
|
|
1191
|
+
if (b && (b.visible = !1), d != null && d.isBlocked) {
|
|
1192
|
+
const y = f.getObjects().find((w) => w.id === d.overlayMask.id);
|
|
1193
|
+
y && (y.visible = !1);
|
|
1194
|
+
}
|
|
1195
|
+
f.viewportTransform = [1, 0, 0, 1, -u, -M], f.setDimensions({ width: m, height: p }, { backstoreOnly: !0 }), f.renderAll();
|
|
1196
|
+
const S = f.getObjects().filter((y) => y.format).every((y) => y.format === "svg");
|
|
1197
|
+
if (g === "svg" && S) {
|
|
1194
1198
|
const y = f.toSVG();
|
|
1195
1199
|
f.dispose();
|
|
1196
1200
|
const E = {
|
|
@@ -1205,70 +1209,70 @@ class O {
|
|
|
1205
1209
|
};
|
|
1206
1210
|
return n.fire("editor:canvas-exported", E), E;
|
|
1207
1211
|
}
|
|
1208
|
-
const
|
|
1212
|
+
const T = yield new Promise((y, w) => {
|
|
1209
1213
|
f.getElement().toBlob((E) => {
|
|
1210
|
-
E ? y(E) :
|
|
1214
|
+
E ? y(E) : w(new Error("Failed to create Blob from canvas"));
|
|
1211
1215
|
});
|
|
1212
1216
|
});
|
|
1213
1217
|
if (f.dispose(), o) {
|
|
1214
1218
|
const y = {
|
|
1215
|
-
image:
|
|
1216
|
-
format:
|
|
1219
|
+
image: T,
|
|
1220
|
+
format: g,
|
|
1217
1221
|
contentType: l,
|
|
1218
1222
|
fileName: t
|
|
1219
1223
|
};
|
|
1220
1224
|
return n.fire("editor:canvas-exported", y), y;
|
|
1221
1225
|
}
|
|
1222
|
-
const
|
|
1226
|
+
const H = yield createImageBitmap(T), C = yield r.post(
|
|
1223
1227
|
"toDataURL",
|
|
1224
|
-
{ format:
|
|
1225
|
-
[
|
|
1228
|
+
{ format: g, quality: 1, bitmap: H },
|
|
1229
|
+
[H]
|
|
1226
1230
|
);
|
|
1227
|
-
if (
|
|
1228
|
-
const
|
|
1229
|
-
orientation:
|
|
1231
|
+
if (h) {
|
|
1232
|
+
const w = m * 0.264583, E = p * 0.264583, Ae = (yield this.editor.moduleLoader.loadModule("jspdf")).jsPDF, ee = new Ae({
|
|
1233
|
+
orientation: w > E ? "landscape" : "portrait",
|
|
1230
1234
|
unit: "mm",
|
|
1231
|
-
format: [
|
|
1235
|
+
format: [w, E]
|
|
1232
1236
|
});
|
|
1233
|
-
if (
|
|
1234
|
-
const
|
|
1235
|
-
image:
|
|
1237
|
+
if (ee.addImage(String(C), "JPG", 0, 0, w, E), a) {
|
|
1238
|
+
const ge = {
|
|
1239
|
+
image: ee.output("datauristring"),
|
|
1236
1240
|
format: "pdf",
|
|
1237
1241
|
contentType: "application/pdf",
|
|
1238
1242
|
fileName: t
|
|
1239
1243
|
};
|
|
1240
|
-
return n.fire("editor:canvas-exported",
|
|
1244
|
+
return n.fire("editor:canvas-exported", ge), ge;
|
|
1241
1245
|
}
|
|
1242
|
-
const
|
|
1243
|
-
image: new File([
|
|
1246
|
+
const Ce = ee.output("blob"), he = {
|
|
1247
|
+
image: new File([Ce], t, { type: "application/pdf" }),
|
|
1244
1248
|
format: "pdf",
|
|
1245
1249
|
contentType: "application/pdf",
|
|
1246
1250
|
fileName: t
|
|
1247
1251
|
};
|
|
1248
|
-
return n.fire("editor:canvas-exported",
|
|
1252
|
+
return n.fire("editor:canvas-exported", he), he;
|
|
1249
1253
|
}
|
|
1250
1254
|
if (a) {
|
|
1251
1255
|
const y = {
|
|
1252
|
-
image:
|
|
1253
|
-
format:
|
|
1256
|
+
image: C,
|
|
1257
|
+
format: g,
|
|
1254
1258
|
contentType: l,
|
|
1255
1259
|
fileName: t
|
|
1256
1260
|
};
|
|
1257
1261
|
return n.fire("editor:canvas-exported", y), y;
|
|
1258
1262
|
}
|
|
1259
|
-
const
|
|
1260
|
-
image: new File([
|
|
1261
|
-
format:
|
|
1263
|
+
const D = g === "svg" && !S ? t.replace(/\.[^/.]+$/, ".png") : t, L = {
|
|
1264
|
+
image: new File([T], D, { type: l }),
|
|
1265
|
+
format: g,
|
|
1262
1266
|
contentType: l,
|
|
1263
|
-
fileName:
|
|
1267
|
+
fileName: D
|
|
1264
1268
|
};
|
|
1265
1269
|
return n.fire("editor:canvas-exported", L), L;
|
|
1266
|
-
} catch (
|
|
1270
|
+
} catch (h) {
|
|
1267
1271
|
return this.editor.errorManager.emitError({
|
|
1268
1272
|
origin: "ImageManager",
|
|
1269
1273
|
method: "exportCanvasAsImageFile",
|
|
1270
1274
|
code: "IMAGE_EXPORT_FAILED",
|
|
1271
|
-
message: `Ошибка экспорта изображения: ${
|
|
1275
|
+
message: `Ошибка экспорта изображения: ${h.message}`,
|
|
1272
1276
|
data: { contentType: s, fileName: t, exportAsBase64: a, exportAsBlob: o }
|
|
1273
1277
|
}), null;
|
|
1274
1278
|
}
|
|
@@ -1286,7 +1290,7 @@ class O {
|
|
|
1286
1290
|
* @fires editor:object-exported
|
|
1287
1291
|
*/
|
|
1288
1292
|
exportObjectAsImageFile() {
|
|
1289
|
-
return
|
|
1293
|
+
return j(this, arguments, function* (e = {}) {
|
|
1290
1294
|
const {
|
|
1291
1295
|
object: t,
|
|
1292
1296
|
fileName: s = "image.png",
|
|
@@ -1303,51 +1307,51 @@ class O {
|
|
|
1303
1307
|
data: { contentType: a, fileName: s, exportAsBase64: o, exportAsBlob: n }
|
|
1304
1308
|
}), null;
|
|
1305
1309
|
try {
|
|
1306
|
-
const
|
|
1307
|
-
if (
|
|
1308
|
-
const m = d.toSVG(),
|
|
1310
|
+
const h = O.getFormatFromContentType(a);
|
|
1311
|
+
if (h === "svg") {
|
|
1312
|
+
const m = d.toSVG(), p = O._exportSVGStringAsFile(m, {
|
|
1309
1313
|
exportAsBase64: o,
|
|
1310
1314
|
exportAsBlob: n,
|
|
1311
1315
|
fileName: s
|
|
1312
|
-
}),
|
|
1316
|
+
}), f = {
|
|
1313
1317
|
object: d,
|
|
1314
|
-
image:
|
|
1315
|
-
format:
|
|
1318
|
+
image: p,
|
|
1319
|
+
format: h,
|
|
1316
1320
|
contentType: "image/svg+xml",
|
|
1317
1321
|
fileName: s.replace(/\.[^/.]+$/, ".svg")
|
|
1318
1322
|
};
|
|
1319
|
-
return i.fire("editor:object-exported",
|
|
1323
|
+
return i.fire("editor:object-exported", f), f;
|
|
1320
1324
|
}
|
|
1321
|
-
if (o && d instanceof
|
|
1322
|
-
const m = yield createImageBitmap(d.getElement()),
|
|
1325
|
+
if (o && d instanceof Z) {
|
|
1326
|
+
const m = yield createImageBitmap(d.getElement()), p = yield r.post(
|
|
1323
1327
|
"toDataURL",
|
|
1324
1328
|
{
|
|
1325
|
-
format:
|
|
1329
|
+
format: h,
|
|
1326
1330
|
quality: 1,
|
|
1327
1331
|
bitmap: m
|
|
1328
1332
|
},
|
|
1329
1333
|
[m]
|
|
1330
|
-
),
|
|
1334
|
+
), f = {
|
|
1331
1335
|
object: d,
|
|
1332
|
-
image:
|
|
1333
|
-
format:
|
|
1336
|
+
image: p,
|
|
1337
|
+
format: h,
|
|
1334
1338
|
contentType: a,
|
|
1335
1339
|
fileName: s
|
|
1336
1340
|
};
|
|
1337
|
-
return i.fire("editor:object-exported",
|
|
1341
|
+
return i.fire("editor:object-exported", f), f;
|
|
1338
1342
|
}
|
|
1339
|
-
const
|
|
1343
|
+
const l = d.toCanvasElement({
|
|
1340
1344
|
enableRetinaScaling: !1
|
|
1341
|
-
}), g = yield new Promise((m,
|
|
1342
|
-
|
|
1343
|
-
|
|
1345
|
+
}), g = yield new Promise((m, p) => {
|
|
1346
|
+
l.toBlob((f) => {
|
|
1347
|
+
f ? m(f) : p(new Error("Failed to create Blob from canvas"));
|
|
1344
1348
|
});
|
|
1345
1349
|
});
|
|
1346
1350
|
if (n) {
|
|
1347
1351
|
const m = {
|
|
1348
1352
|
object: d,
|
|
1349
1353
|
image: g,
|
|
1350
|
-
format:
|
|
1354
|
+
format: h,
|
|
1351
1355
|
contentType: a,
|
|
1352
1356
|
fileName: s
|
|
1353
1357
|
};
|
|
@@ -1356,17 +1360,17 @@ class O {
|
|
|
1356
1360
|
const u = new File([g], s, { type: a }), M = {
|
|
1357
1361
|
object: d,
|
|
1358
1362
|
image: u,
|
|
1359
|
-
format:
|
|
1363
|
+
format: h,
|
|
1360
1364
|
contentType: a,
|
|
1361
1365
|
fileName: s
|
|
1362
1366
|
};
|
|
1363
1367
|
return i.fire("editor:object-exported", M), M;
|
|
1364
|
-
} catch (
|
|
1368
|
+
} catch (h) {
|
|
1365
1369
|
return this.editor.errorManager.emitError({
|
|
1366
1370
|
origin: "ImageManager",
|
|
1367
1371
|
method: "exportObjectAsImageFile",
|
|
1368
1372
|
code: "IMAGE_EXPORT_FAILED",
|
|
1369
|
-
message: `Ошибка экспорта объекта: ${
|
|
1373
|
+
message: `Ошибка экспорта объекта: ${h.message}`,
|
|
1370
1374
|
data: { contentType: a, fileName: s, exportAsBase64: o, exportAsBlob: n }
|
|
1371
1375
|
}), null;
|
|
1372
1376
|
}
|
|
@@ -1399,7 +1403,7 @@ class O {
|
|
|
1399
1403
|
* @public
|
|
1400
1404
|
*/
|
|
1401
1405
|
getContentType(e) {
|
|
1402
|
-
return
|
|
1406
|
+
return j(this, null, function* () {
|
|
1403
1407
|
return typeof e == "string" ? this.getContentTypeFromUrl(e) : e.type || "application/octet-stream";
|
|
1404
1408
|
});
|
|
1405
1409
|
}
|
|
@@ -1410,7 +1414,7 @@ class O {
|
|
|
1410
1414
|
* @public
|
|
1411
1415
|
*/
|
|
1412
1416
|
getContentTypeFromUrl(e) {
|
|
1413
|
-
return
|
|
1417
|
+
return j(this, null, function* () {
|
|
1414
1418
|
if (e.startsWith("data:")) {
|
|
1415
1419
|
const t = e.match(/^data:([^;]+)/);
|
|
1416
1420
|
return t ? t[1] : "application/octet-stream";
|
|
@@ -1489,11 +1493,11 @@ class O {
|
|
|
1489
1493
|
return t ? t[1] : "";
|
|
1490
1494
|
}
|
|
1491
1495
|
}
|
|
1492
|
-
const
|
|
1493
|
-
function
|
|
1496
|
+
const x = (c, e, t) => Math.max(Math.min(c, t), e), Ie = (c, e) => c * e, dt = (c, e) => new X(c / 2, e / 2);
|
|
1497
|
+
function lt(c) {
|
|
1494
1498
|
return ((c == null ? void 0 : c.type) === "image" || (c == null ? void 0 : c.format) === "svg") && typeof (c == null ? void 0 : c.width) == "number" && typeof (c == null ? void 0 : c.height) == "number";
|
|
1495
1499
|
}
|
|
1496
|
-
class
|
|
1500
|
+
class ht {
|
|
1497
1501
|
/**
|
|
1498
1502
|
* @param options
|
|
1499
1503
|
* @param options.editor – экземпляр редактора
|
|
@@ -1524,15 +1528,15 @@ class lt {
|
|
|
1524
1528
|
canvas: o,
|
|
1525
1529
|
montageArea: n,
|
|
1526
1530
|
options: { canvasBackstoreWidth: i }
|
|
1527
|
-
} = this.editor, { width: r, height: d } = n,
|
|
1528
|
-
if (!i || i === "auto" || a ? this.adaptCanvasToContainer() : i ? this.setCanvasBackstoreWidth(Number(i)) : this.setCanvasBackstoreWidth(
|
|
1529
|
-
const m =
|
|
1530
|
-
this.setResolutionHeight(
|
|
1531
|
+
} = this.editor, { width: r, height: d } = n, h = x(Number(e), U, k);
|
|
1532
|
+
if (!i || i === "auto" || a ? this.adaptCanvasToContainer() : i ? this.setCanvasBackstoreWidth(Number(i)) : this.setCanvasBackstoreWidth(h), n.set({ width: h }), (M = o.clipPath) == null || M.set({ width: h }), t) {
|
|
1533
|
+
const m = h / r, p = Ie(d, m);
|
|
1534
|
+
this.setResolutionHeight(p);
|
|
1531
1535
|
return;
|
|
1532
1536
|
}
|
|
1533
|
-
const { left:
|
|
1534
|
-
o.setViewportTransform([u, 0, 0, u,
|
|
1535
|
-
width:
|
|
1537
|
+
const { left: l, top: g } = this.getObjectDefaultCoords(n), u = o.getZoom();
|
|
1538
|
+
o.setViewportTransform([u, 0, 0, u, l, g]), this.centerMontageArea(), s || this.editor.historyManager.saveState(), o.fire("editor:resolution-width-changed", {
|
|
1539
|
+
width: h,
|
|
1536
1540
|
preserveProportional: t,
|
|
1537
1541
|
withoutSave: s,
|
|
1538
1542
|
adaptCanvasToContainer: a
|
|
@@ -1554,15 +1558,15 @@ class lt {
|
|
|
1554
1558
|
canvas: o,
|
|
1555
1559
|
montageArea: n,
|
|
1556
1560
|
options: { canvasBackstoreHeight: i }
|
|
1557
|
-
} = this.editor, { width: r, height: d } = n,
|
|
1558
|
-
if (!i || i === "auto" || a ? this.adaptCanvasToContainer() : i ? this.setCanvasBackstoreHeight(Number(i)) : this.setCanvasBackstoreHeight(
|
|
1559
|
-
const m =
|
|
1560
|
-
this.setResolutionWidth(
|
|
1561
|
+
} = this.editor, { width: r, height: d } = n, h = x(Number(e), z, B);
|
|
1562
|
+
if (!i || i === "auto" || a ? this.adaptCanvasToContainer() : i ? this.setCanvasBackstoreHeight(Number(i)) : this.setCanvasBackstoreHeight(h), n.set({ height: h }), (M = o.clipPath) == null || M.set({ height: h }), t) {
|
|
1563
|
+
const m = h / d, p = Ie(r, m);
|
|
1564
|
+
this.setResolutionWidth(p);
|
|
1561
1565
|
return;
|
|
1562
1566
|
}
|
|
1563
|
-
const { left:
|
|
1564
|
-
o.setViewportTransform([u, 0, 0, u,
|
|
1565
|
-
height:
|
|
1567
|
+
const { left: l, top: g } = this.getObjectDefaultCoords(n), u = o.getZoom();
|
|
1568
|
+
o.setViewportTransform([u, 0, 0, u, l, g]), this.centerMontageArea(), s || this.editor.historyManager.saveState(), o.fire("editor:resolution-height-changed", {
|
|
1569
|
+
height: h,
|
|
1566
1570
|
preserveProportional: t,
|
|
1567
1571
|
withoutSave: s,
|
|
1568
1572
|
adaptCanvasToContainer: a
|
|
@@ -1574,7 +1578,7 @@ class lt {
|
|
|
1574
1578
|
*/
|
|
1575
1579
|
centerMontageArea() {
|
|
1576
1580
|
var r;
|
|
1577
|
-
const { canvas: e, montageArea: t } = this.editor, s = e.getWidth(), a = e.getHeight(), o = e.getZoom(), n =
|
|
1581
|
+
const { canvas: e, montageArea: t } = this.editor, s = e.getWidth(), a = e.getHeight(), o = e.getZoom(), n = dt(s, a);
|
|
1578
1582
|
t.set({
|
|
1579
1583
|
left: s / 2,
|
|
1580
1584
|
top: a / 2
|
|
@@ -1607,7 +1611,7 @@ class lt {
|
|
|
1607
1611
|
*/
|
|
1608
1612
|
setCanvasBackstoreWidth(e) {
|
|
1609
1613
|
if (!e || typeof e != "number") return;
|
|
1610
|
-
const t =
|
|
1614
|
+
const t = x(e, U, k);
|
|
1611
1615
|
this.editor.canvas.setDimensions({ width: t }, { backstoreOnly: !0 });
|
|
1612
1616
|
}
|
|
1613
1617
|
/**
|
|
@@ -1616,7 +1620,7 @@ class lt {
|
|
|
1616
1620
|
*/
|
|
1617
1621
|
setCanvasBackstoreHeight(e) {
|
|
1618
1622
|
if (!e || typeof e != "number") return;
|
|
1619
|
-
const t =
|
|
1623
|
+
const t = x(e, z, B);
|
|
1620
1624
|
this.editor.canvas.setDimensions({ height: t }, { backstoreOnly: !0 });
|
|
1621
1625
|
}
|
|
1622
1626
|
/**
|
|
@@ -1625,7 +1629,7 @@ class lt {
|
|
|
1625
1629
|
* с учётом минимальных и максимальных значений.
|
|
1626
1630
|
*/
|
|
1627
1631
|
adaptCanvasToContainer() {
|
|
1628
|
-
const { canvas: e } = this.editor, t = this.getEditorContainer(), s = t.clientWidth, a = t.clientHeight, o =
|
|
1632
|
+
const { canvas: e } = this.editor, t = this.getEditorContainer(), s = t.clientWidth, a = t.clientHeight, o = x(s, U, k), n = x(a, z, B);
|
|
1629
1633
|
e.setDimensions({ width: o, height: n }, { backstoreOnly: !0 });
|
|
1630
1634
|
}
|
|
1631
1635
|
/**
|
|
@@ -1645,24 +1649,24 @@ class lt {
|
|
|
1645
1649
|
this.setResolutionWidth(s, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.setResolutionHeight(a, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.centerMontageArea();
|
|
1646
1650
|
const i = t.left - o, r = t.top - n;
|
|
1647
1651
|
if (i !== 0 || r !== 0) {
|
|
1648
|
-
const d = e.getActiveObject(),
|
|
1652
|
+
const d = e.getActiveObject(), h = [];
|
|
1649
1653
|
if ((d == null ? void 0 : d.type) === "activeselection") {
|
|
1650
|
-
const
|
|
1651
|
-
|
|
1654
|
+
const l = d;
|
|
1655
|
+
h.push(...l.getObjects()), e.discardActiveObject();
|
|
1652
1656
|
}
|
|
1653
|
-
if (e.getObjects().forEach((
|
|
1654
|
-
|
|
1655
|
-
left:
|
|
1656
|
-
top:
|
|
1657
|
-
}),
|
|
1658
|
-
}),
|
|
1659
|
-
if (
|
|
1660
|
-
e.setActiveObject(
|
|
1657
|
+
if (e.getObjects().forEach((l) => {
|
|
1658
|
+
l.id === "montage-area" || l.id === "overlay-mask" || l.id === "background" || (l.set({
|
|
1659
|
+
left: l.left + i,
|
|
1660
|
+
top: l.top + r
|
|
1661
|
+
}), l.setCoords());
|
|
1662
|
+
}), h.length > 0)
|
|
1663
|
+
if (h.length === 1)
|
|
1664
|
+
e.setActiveObject(h[0]);
|
|
1661
1665
|
else {
|
|
1662
|
-
const
|
|
1666
|
+
const l = new v(h, {
|
|
1663
1667
|
canvas: e
|
|
1664
1668
|
});
|
|
1665
|
-
e.setActiveObject(
|
|
1669
|
+
e.setActiveObject(l);
|
|
1666
1670
|
}
|
|
1667
1671
|
}
|
|
1668
1672
|
e.renderAll(), e.fire("editor:canvas-updated", {
|
|
@@ -1825,17 +1829,17 @@ class lt {
|
|
|
1825
1829
|
montageAreaHeight: r
|
|
1826
1830
|
}
|
|
1827
1831
|
} = this.editor, d = e || a.getActiveObject();
|
|
1828
|
-
if (!
|
|
1829
|
-
const { width:
|
|
1830
|
-
let g = Math.min(
|
|
1832
|
+
if (!lt(d)) return;
|
|
1833
|
+
const { width: h, height: l } = d;
|
|
1834
|
+
let g = Math.min(h, k), u = Math.min(l, B);
|
|
1831
1835
|
if (t) {
|
|
1832
1836
|
const {
|
|
1833
1837
|
width: M,
|
|
1834
1838
|
height: m
|
|
1835
|
-
} = o,
|
|
1839
|
+
} = o, p = h / M, f = l / m, b = Math.max(p, f);
|
|
1836
1840
|
g = M * b, u = m * b;
|
|
1837
1841
|
}
|
|
1838
|
-
this.setResolutionWidth(g, { withoutSave: !0 }), this.setResolutionHeight(u, { withoutSave: !0 }), this.editor.backgroundManager.backgroundObject && this.editor.backgroundManager.refresh(), (
|
|
1842
|
+
this.setResolutionWidth(g, { withoutSave: !0 }), this.setResolutionHeight(u, { withoutSave: !0 }), this.editor.backgroundManager.backgroundObject && this.editor.backgroundManager.refresh(), (h > i || l > r) && n.calculateAndApplyDefaultZoom(), n.resetObject({ object: d, withoutSave: !0 }), a.centerObject(d), a.renderAll(), s || this.editor.historyManager.saveState(), a.fire("editor:montage-area-scaled-to-image", {
|
|
1839
1843
|
object: d,
|
|
1840
1844
|
width: g,
|
|
1841
1845
|
height: u,
|
|
@@ -1885,9 +1889,9 @@ class lt {
|
|
|
1885
1889
|
);
|
|
1886
1890
|
}
|
|
1887
1891
|
}
|
|
1888
|
-
class
|
|
1892
|
+
class gt {
|
|
1889
1893
|
constructor({ editor: e }) {
|
|
1890
|
-
this.editor = e, this.options = e.options, this.minZoom = this.options.minZoom ||
|
|
1894
|
+
this.editor = e, this.options = e.options, this.minZoom = this.options.minZoom || nt, this.maxZoom = this.options.maxZoom || it, this.defaultZoom = this.options.defaultScale;
|
|
1891
1895
|
}
|
|
1892
1896
|
/**
|
|
1893
1897
|
* Метод рассчитывает и применяет зум по умолчанию для монтажной области редактора.
|
|
@@ -1909,15 +1913,15 @@ class ht {
|
|
|
1909
1913
|
* @fires editor:zoom-changed
|
|
1910
1914
|
* Если передавать координаты курсора, то нужно быть аккуратнее, так как юзер может выйти за пределы рабочей области
|
|
1911
1915
|
*/
|
|
1912
|
-
zoom(e =
|
|
1916
|
+
zoom(e = rt, t = {}) {
|
|
1913
1917
|
var g, u;
|
|
1914
1918
|
if (!e) return;
|
|
1915
|
-
const { minZoom: s, maxZoom: a } = this, { canvas: o } = this.editor, n = o.getZoom(), i = o.getCenterPoint(), r = (g = t.pointX) != null ? g : i.x, d = (u = t.pointY) != null ? u : i.y,
|
|
1916
|
-
let
|
|
1917
|
-
|
|
1919
|
+
const { minZoom: s, maxZoom: a } = this, { canvas: o } = this.editor, n = o.getZoom(), i = o.getCenterPoint(), r = (g = t.pointX) != null ? g : i.x, d = (u = t.pointY) != null ? u : i.y, h = new X(r, d);
|
|
1920
|
+
let l = Number((n + Number(e)).toFixed(2));
|
|
1921
|
+
l > a && (l = a), l < s && (l = s), o.zoomToPoint(h, l), o.fire("editor:zoom-changed", {
|
|
1918
1922
|
currentZoom: o.getZoom(),
|
|
1919
|
-
zoom:
|
|
1920
|
-
point:
|
|
1923
|
+
zoom: l,
|
|
1924
|
+
point: h
|
|
1921
1925
|
});
|
|
1922
1926
|
}
|
|
1923
1927
|
/**
|
|
@@ -1926,7 +1930,7 @@ class ht {
|
|
|
1926
1930
|
* @fires editor:zoom-changed
|
|
1927
1931
|
*/
|
|
1928
1932
|
setZoom(e = this.defaultZoom) {
|
|
1929
|
-
const { minZoom: t, maxZoom: s } = this, { canvas: a } = this.editor, o = new
|
|
1933
|
+
const { minZoom: t, maxZoom: s } = this, { canvas: a } = this.editor, o = new X(a.getCenterPoint());
|
|
1930
1934
|
let n = e;
|
|
1931
1935
|
e > s && (n = s), e < t && (n = t), a.zoomToPoint(o, n), a.fire("editor:zoom-changed", {
|
|
1932
1936
|
currentZoom: a.getZoom(),
|
|
@@ -1939,7 +1943,7 @@ class ht {
|
|
|
1939
1943
|
* @fires editor:zoom-changed
|
|
1940
1944
|
*/
|
|
1941
1945
|
resetZoom() {
|
|
1942
|
-
const { canvas: e } = this.editor, t = new
|
|
1946
|
+
const { canvas: e } = this.editor, t = new X(e.getCenterPoint());
|
|
1943
1947
|
e.zoomToPoint(t, this.defaultZoom), this.editor.canvas.fire("editor:zoom-changed", {
|
|
1944
1948
|
currentZoom: e.getZoom(),
|
|
1945
1949
|
point: t
|
|
@@ -1952,7 +1956,7 @@ class ht {
|
|
|
1952
1956
|
* @param options.withoutSave - Не сохранять состояние
|
|
1953
1957
|
* @fires editor:object-rotated
|
|
1954
1958
|
*/
|
|
1955
|
-
rotate(e =
|
|
1959
|
+
rotate(e = ct, { withoutSave: t } = {}) {
|
|
1956
1960
|
const { canvas: s, historyManager: a } = this.editor, o = s.getActiveObject();
|
|
1957
1961
|
if (!o) return;
|
|
1958
1962
|
const n = o.angle + e;
|
|
@@ -2031,8 +2035,8 @@ class ht {
|
|
|
2031
2035
|
if (i) {
|
|
2032
2036
|
if (i instanceof v && !a) {
|
|
2033
2037
|
const r = i.getObjects();
|
|
2034
|
-
o.discardActiveObject(), r.forEach((
|
|
2035
|
-
this._fitSingleObject(
|
|
2038
|
+
o.discardActiveObject(), r.forEach((h) => {
|
|
2039
|
+
this._fitSingleObject(h, t);
|
|
2036
2040
|
});
|
|
2037
2041
|
const d = new v(r, { canvas: o });
|
|
2038
2042
|
o.setActiveObject(d);
|
|
@@ -2053,9 +2057,9 @@ class ht {
|
|
|
2053
2057
|
* @private
|
|
2054
2058
|
*/
|
|
2055
2059
|
_fitSingleObject(e, t) {
|
|
2056
|
-
const { canvas: s, montageArea: a } = this.editor, { width: o, height: n, scaleX: i = 1, scaleY: r = 1, angle: d = 0 } = e,
|
|
2060
|
+
const { canvas: s, montageArea: a } = this.editor, { width: o, height: n, scaleX: i = 1, scaleY: r = 1, angle: d = 0 } = e, h = o * Math.abs(i), l = n * Math.abs(r), g = d * Math.PI / 180, u = Math.abs(Math.cos(g)), M = Math.abs(Math.sin(g)), m = h * u + l * M, p = h * M + l * u, f = a.width, b = a.height;
|
|
2057
2061
|
let S;
|
|
2058
|
-
t === "contain" ? S = Math.min(
|
|
2062
|
+
t === "contain" ? S = Math.min(f / m, b / p) : S = Math.max(f / m, b / p), e.set({
|
|
2059
2063
|
scaleX: i * S,
|
|
2060
2064
|
scaleY: r * S
|
|
2061
2065
|
}), s.centerObject(e);
|
|
@@ -2094,11 +2098,11 @@ class ht {
|
|
|
2094
2098
|
}), t)
|
|
2095
2099
|
this.fitObject({ object: d, withoutSave: !0, fitAsOneObject: !0 });
|
|
2096
2100
|
else {
|
|
2097
|
-
const { width:
|
|
2101
|
+
const { width: l, height: g } = o, { width: u, height: M } = d, m = n.calculateScaleFactor({
|
|
2098
2102
|
imageObject: d,
|
|
2099
2103
|
scaleType: r
|
|
2100
2104
|
});
|
|
2101
|
-
r === "contain" && m < 1 || r === "cover" && (u >
|
|
2105
|
+
r === "contain" && m < 1 || r === "cover" && (u > l || M > g) ? this.fitObject({ object: d, withoutSave: !0, fitAsOneObject: !0 }) : d.set({ scaleX: 1, scaleY: 1 });
|
|
2102
2106
|
}
|
|
2103
2107
|
d.set({ flipX: !1, flipY: !1, angle: 0 }), a.centerObject(d), a.renderAll(), i.resumeHistory(), s || i.saveState(), a.fire("editor:object-reset", {
|
|
2104
2108
|
object: d,
|
|
@@ -2107,7 +2111,7 @@ class ht {
|
|
|
2107
2111
|
});
|
|
2108
2112
|
}
|
|
2109
2113
|
}
|
|
2110
|
-
class
|
|
2114
|
+
class ut {
|
|
2111
2115
|
constructor({ editor: e }) {
|
|
2112
2116
|
this.editor = e, this.isBlocked = !1, this.overlayMask = null, this._createOverlay();
|
|
2113
2117
|
}
|
|
@@ -2164,7 +2168,7 @@ class gt {
|
|
|
2164
2168
|
}), e.upperCanvasEl.style.pointerEvents = "", e.lowerCanvasEl.style.pointerEvents = "", this.overlayMask.visible = !1, e.requestRenderAll(), e.fire("editor:enabled"), s.resumeHistory();
|
|
2165
2169
|
}
|
|
2166
2170
|
}
|
|
2167
|
-
class
|
|
2171
|
+
class R {
|
|
2168
2172
|
constructor({ editor: e }) {
|
|
2169
2173
|
this.editor = e, this.backgroundObject = null;
|
|
2170
2174
|
}
|
|
@@ -2219,8 +2223,8 @@ class x {
|
|
|
2219
2223
|
try {
|
|
2220
2224
|
const { historyManager: o } = this.editor, { backgroundObject: n } = this;
|
|
2221
2225
|
if (o.suspendHistory(), n && n.backgroundType === "gradient") {
|
|
2222
|
-
const i =
|
|
2223
|
-
if (
|
|
2226
|
+
const i = R._createFabricGradient(e);
|
|
2227
|
+
if (R._isGradientEqual(n.fill, i)) {
|
|
2224
2228
|
o.resumeHistory();
|
|
2225
2229
|
return;
|
|
2226
2230
|
}
|
|
@@ -2307,7 +2311,7 @@ class x {
|
|
|
2307
2311
|
* @param options.withoutSave - Если true, не сохранять состояние в историю
|
|
2308
2312
|
*/
|
|
2309
2313
|
setImageBackground(a) {
|
|
2310
|
-
return
|
|
2314
|
+
return j(this, arguments, function* ({
|
|
2311
2315
|
imageSource: e,
|
|
2312
2316
|
customData: t = {},
|
|
2313
2317
|
withoutSave: s = !1
|
|
@@ -2392,7 +2396,7 @@ class x {
|
|
|
2392
2396
|
backgroundType: "gradient",
|
|
2393
2397
|
backgroundId: `background-${A()}`
|
|
2394
2398
|
}, { withoutSelection: !0 }), this.refresh();
|
|
2395
|
-
const t =
|
|
2399
|
+
const t = R._createFabricGradient(e);
|
|
2396
2400
|
this.backgroundObject.set("fill", t), this.editor.canvas.requestRenderAll();
|
|
2397
2401
|
}
|
|
2398
2402
|
/**
|
|
@@ -2400,7 +2404,7 @@ class x {
|
|
|
2400
2404
|
* @param source - источник изображения (URL или File)
|
|
2401
2405
|
*/
|
|
2402
2406
|
_createImageBackground(e, t) {
|
|
2403
|
-
return
|
|
2407
|
+
return j(this, null, function* () {
|
|
2404
2408
|
var a;
|
|
2405
2409
|
const { image: s } = (a = yield this.editor.imageManager.importImage({
|
|
2406
2410
|
source: e,
|
|
@@ -2444,8 +2448,8 @@ class x {
|
|
|
2444
2448
|
{ offset: o / 100, color: s }
|
|
2445
2449
|
];
|
|
2446
2450
|
if (e.type === "linear") {
|
|
2447
|
-
const
|
|
2448
|
-
return new
|
|
2451
|
+
const l = e.angle * Math.PI / 180, g = R._angleToCoords(l);
|
|
2452
|
+
return new be({
|
|
2449
2453
|
type: "linear",
|
|
2450
2454
|
gradientUnits: "percentage",
|
|
2451
2455
|
coords: g,
|
|
@@ -2456,7 +2460,7 @@ class x {
|
|
|
2456
2460
|
centerX: i = 50,
|
|
2457
2461
|
centerY: r = 50,
|
|
2458
2462
|
radius: d = 50
|
|
2459
|
-
} = e,
|
|
2463
|
+
} = e, h = {
|
|
2460
2464
|
x1: i / 100,
|
|
2461
2465
|
y1: r / 100,
|
|
2462
2466
|
x2: i / 100,
|
|
@@ -2464,10 +2468,10 @@ class x {
|
|
|
2464
2468
|
r1: 0,
|
|
2465
2469
|
r2: d / 100
|
|
2466
2470
|
};
|
|
2467
|
-
return new
|
|
2471
|
+
return new be({
|
|
2468
2472
|
type: "radial",
|
|
2469
2473
|
gradientUnits: "percentage",
|
|
2470
|
-
coords:
|
|
2474
|
+
coords: h,
|
|
2471
2475
|
colorStops: n
|
|
2472
2476
|
});
|
|
2473
2477
|
}
|
|
@@ -2499,7 +2503,7 @@ class x {
|
|
|
2499
2503
|
}) ? !1 : e.type === "linear" && t.type === "linear" ? Math.abs(e.coords.x1 - t.coords.x1) < 1e-4 && Math.abs(e.coords.y1 - t.coords.y1) < 1e-4 && Math.abs(e.coords.x2 - t.coords.x2) < 1e-4 && Math.abs(e.coords.y2 - t.coords.y2) < 1e-4 : e.type === "radial" && t.type === "radial" ? Math.abs(e.coords.x1 - t.coords.x1) < 1e-4 && Math.abs(e.coords.y1 - t.coords.y1) < 1e-4 && Math.abs(e.coords.x2 - t.coords.x2) < 1e-4 && Math.abs(e.coords.y2 - t.coords.y2) < 1e-4 && Math.abs(e.coords.r1 - t.coords.r1) < 1e-4 && Math.abs(e.coords.r2 - t.coords.r2) < 1e-4 : !1;
|
|
2500
2504
|
}
|
|
2501
2505
|
}
|
|
2502
|
-
class
|
|
2506
|
+
class $ {
|
|
2503
2507
|
constructor({ editor: e }) {
|
|
2504
2508
|
this.editor = e;
|
|
2505
2509
|
}
|
|
@@ -2532,7 +2536,7 @@ class K {
|
|
|
2532
2536
|
const { canvas: s, historyManager: a } = this.editor;
|
|
2533
2537
|
a.suspendHistory();
|
|
2534
2538
|
const o = e || s.getActiveObject();
|
|
2535
|
-
o && (o instanceof v ?
|
|
2539
|
+
o && (o instanceof v ? $._moveSelectionForward(s, o) : s.bringObjectForward(o), s.renderAll(), a.resumeHistory(), t || a.saveState(), s.fire("editor:object-bring-forward", {
|
|
2536
2540
|
object: o,
|
|
2537
2541
|
withoutSave: t
|
|
2538
2542
|
}));
|
|
@@ -2557,8 +2561,8 @@ class K {
|
|
|
2557
2561
|
if (r) {
|
|
2558
2562
|
if (r instanceof v) {
|
|
2559
2563
|
const d = r.getObjects();
|
|
2560
|
-
for (let
|
|
2561
|
-
s.sendObjectToBack(d[
|
|
2564
|
+
for (let h = d.length - 1; h >= 0; h -= 1)
|
|
2565
|
+
s.sendObjectToBack(d[h]);
|
|
2562
2566
|
} else
|
|
2563
2567
|
s.sendObjectToBack(r);
|
|
2564
2568
|
i && s.sendObjectToBack(i), s.sendObjectToBack(a), n && s.sendObjectToBack(n), s.renderAll(), o.resumeHistory(), t || o.saveState(), s.fire("editor:object-send-to-back", {
|
|
@@ -2583,7 +2587,7 @@ class K {
|
|
|
2583
2587
|
} = this.editor;
|
|
2584
2588
|
o.suspendHistory();
|
|
2585
2589
|
const r = e || s.getActiveObject();
|
|
2586
|
-
r && (r instanceof v ?
|
|
2590
|
+
r && (r instanceof v ? $._moveSelectionBackwards(s, r) : s.sendObjectBackwards(r), i && s.sendObjectToBack(i), s.sendObjectToBack(a), n && s.sendObjectToBack(n), s.renderAll(), o.resumeHistory(), t || o.saveState(), s.fire("editor:object-send-backwards", {
|
|
2587
2591
|
object: r,
|
|
2588
2592
|
withoutSave: t
|
|
2589
2593
|
}));
|
|
@@ -2627,7 +2631,7 @@ class K {
|
|
|
2627
2631
|
});
|
|
2628
2632
|
}
|
|
2629
2633
|
}
|
|
2630
|
-
class
|
|
2634
|
+
class ft {
|
|
2631
2635
|
/**
|
|
2632
2636
|
* Менеджер фигур для редактора.
|
|
2633
2637
|
* @param options - Опции и настройки менеджера фигур.
|
|
@@ -2651,15 +2655,15 @@ class ut {
|
|
|
2651
2655
|
* @param flags.withoutSelection - Не выделять объект
|
|
2652
2656
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2653
2657
|
*/
|
|
2654
|
-
addRectangle(
|
|
2655
|
-
var
|
|
2658
|
+
addRectangle(h = {}, { withoutSelection: r, withoutAdding: d } = {}) {
|
|
2659
|
+
var l = h, {
|
|
2656
2660
|
id: e = `rect-${A()}`,
|
|
2657
2661
|
left: t,
|
|
2658
2662
|
top: s,
|
|
2659
2663
|
width: a = 100,
|
|
2660
2664
|
height: o = 100,
|
|
2661
2665
|
fill: n = "blue"
|
|
2662
|
-
} =
|
|
2666
|
+
} = l, i = V(l, [
|
|
2663
2667
|
"id",
|
|
2664
2668
|
"left",
|
|
2665
2669
|
"top",
|
|
@@ -2667,7 +2671,7 @@ class ut {
|
|
|
2667
2671
|
"height",
|
|
2668
2672
|
"fill"
|
|
2669
2673
|
]);
|
|
2670
|
-
const { canvas: g } = this.editor, u = new
|
|
2674
|
+
const { canvas: g } = this.editor, u = new we(I({
|
|
2671
2675
|
id: e,
|
|
2672
2676
|
left: t,
|
|
2673
2677
|
top: s,
|
|
@@ -2694,27 +2698,27 @@ class ut {
|
|
|
2694
2698
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2695
2699
|
*/
|
|
2696
2700
|
addCircle(d = {}, { withoutSelection: i, withoutAdding: r } = {}) {
|
|
2697
|
-
var
|
|
2701
|
+
var h = d, {
|
|
2698
2702
|
id: e = `circle-${A()}`,
|
|
2699
2703
|
left: t,
|
|
2700
2704
|
top: s,
|
|
2701
2705
|
radius: a = 50,
|
|
2702
2706
|
fill: o = "green"
|
|
2703
|
-
} =
|
|
2707
|
+
} = h, n = V(h, [
|
|
2704
2708
|
"id",
|
|
2705
2709
|
"left",
|
|
2706
2710
|
"top",
|
|
2707
2711
|
"radius",
|
|
2708
2712
|
"fill"
|
|
2709
2713
|
]);
|
|
2710
|
-
const { canvas:
|
|
2714
|
+
const { canvas: l } = this.editor, g = new Te(I({
|
|
2711
2715
|
id: e,
|
|
2712
2716
|
left: t,
|
|
2713
2717
|
top: s,
|
|
2714
2718
|
fill: o,
|
|
2715
2719
|
radius: a
|
|
2716
2720
|
}, n));
|
|
2717
|
-
return !t && !s &&
|
|
2721
|
+
return !t && !s && l.centerObject(g), r || (l.add(g), i || l.setActiveObject(g), l.renderAll()), g;
|
|
2718
2722
|
}
|
|
2719
2723
|
/**
|
|
2720
2724
|
* Добавление треугольника
|
|
@@ -2733,15 +2737,15 @@ class ut {
|
|
|
2733
2737
|
* @param flags.withoutSelection - Не выделять объект
|
|
2734
2738
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2735
2739
|
*/
|
|
2736
|
-
addTriangle(
|
|
2737
|
-
var
|
|
2740
|
+
addTriangle(h = {}, { withoutSelection: r, withoutAdding: d } = {}) {
|
|
2741
|
+
var l = h, {
|
|
2738
2742
|
id: e = `triangle-${A()}`,
|
|
2739
2743
|
left: t,
|
|
2740
2744
|
top: s,
|
|
2741
2745
|
width: a = 100,
|
|
2742
2746
|
height: o = 100,
|
|
2743
2747
|
fill: n = "yellow"
|
|
2744
|
-
} =
|
|
2748
|
+
} = l, i = V(l, [
|
|
2745
2749
|
"id",
|
|
2746
2750
|
"left",
|
|
2747
2751
|
"top",
|
|
@@ -2749,7 +2753,7 @@ class ut {
|
|
|
2749
2753
|
"height",
|
|
2750
2754
|
"fill"
|
|
2751
2755
|
]);
|
|
2752
|
-
const { canvas: g } = this.editor, u = new
|
|
2756
|
+
const { canvas: g } = this.editor, u = new ke(I({
|
|
2753
2757
|
id: e,
|
|
2754
2758
|
left: t,
|
|
2755
2759
|
top: s,
|
|
@@ -2760,7 +2764,7 @@ class ut {
|
|
|
2760
2764
|
return !t && !s && g.centerObject(u), d || (g.add(u), r || g.setActiveObject(u), g.renderAll()), u;
|
|
2761
2765
|
}
|
|
2762
2766
|
}
|
|
2763
|
-
class
|
|
2767
|
+
class Mt {
|
|
2764
2768
|
/**
|
|
2765
2769
|
* @param options
|
|
2766
2770
|
* @param options.editor - экземпляр редактора с доступом к canvas
|
|
@@ -2788,7 +2792,7 @@ class ft {
|
|
|
2788
2792
|
* Асинхронное клонирование для внутреннего буфера
|
|
2789
2793
|
*/
|
|
2790
2794
|
_cloneToInternalClipboard(e) {
|
|
2791
|
-
return
|
|
2795
|
+
return j(this, null, function* () {
|
|
2792
2796
|
const { canvas: t, errorManager: s } = this.editor;
|
|
2793
2797
|
try {
|
|
2794
2798
|
const a = yield e.clone(["format"]);
|
|
@@ -2808,7 +2812,7 @@ class ft {
|
|
|
2808
2812
|
* Копирование в системный буфер обмена
|
|
2809
2813
|
*/
|
|
2810
2814
|
_copyToSystemClipboard(e) {
|
|
2811
|
-
return
|
|
2815
|
+
return j(this, null, function* () {
|
|
2812
2816
|
const { errorManager: t } = this.editor;
|
|
2813
2817
|
if (typeof ClipboardItem == "undefined" || !navigator.clipboard)
|
|
2814
2818
|
return t.emitWarning({
|
|
@@ -2835,13 +2839,13 @@ class ft {
|
|
|
2835
2839
|
* Копирование изображения в буфер обмена
|
|
2836
2840
|
*/
|
|
2837
2841
|
_copyImageToClipboard(e, t) {
|
|
2838
|
-
return
|
|
2842
|
+
return j(this, null, function* () {
|
|
2839
2843
|
try {
|
|
2840
2844
|
const a = e.toCanvasElement({ enableRetinaScaling: !1 }).toDataURL(), o = a.slice(5).split(";")[0], n = a.split(",")[1], i = atob(n), r = new Uint8Array(i.length);
|
|
2841
|
-
for (let
|
|
2842
|
-
r[
|
|
2843
|
-
const d = new Blob([r.buffer], { type: o }),
|
|
2844
|
-
return yield navigator.clipboard.write([
|
|
2845
|
+
for (let l = 0; l < i.length; l += 1)
|
|
2846
|
+
r[l] = i.charCodeAt(l);
|
|
2847
|
+
const d = new Blob([r.buffer], { type: o }), h = new ClipboardItem({ [o]: d });
|
|
2848
|
+
return yield navigator.clipboard.write([h]), console.info("Image copied to clipboard successfully"), !0;
|
|
2845
2849
|
} catch (s) {
|
|
2846
2850
|
return this.editor.errorManager.emitWarning({
|
|
2847
2851
|
origin: "ClipboardManager",
|
|
@@ -2857,9 +2861,9 @@ class ft {
|
|
|
2857
2861
|
* Копирование текста в буфер обмена
|
|
2858
2862
|
*/
|
|
2859
2863
|
_copyTextToClipboard(e) {
|
|
2860
|
-
return
|
|
2864
|
+
return j(this, null, function* () {
|
|
2861
2865
|
try {
|
|
2862
|
-
const t = `${
|
|
2866
|
+
const t = `${ye}${e}`;
|
|
2863
2867
|
return yield navigator.clipboard.writeText(t), console.info("Text copied to clipboard successfully"), !0;
|
|
2864
2868
|
} catch (t) {
|
|
2865
2869
|
const { errorManager: s } = this.editor;
|
|
@@ -2892,7 +2896,7 @@ class ft {
|
|
|
2892
2896
|
* @param source - источник изображения (data URL или URL)
|
|
2893
2897
|
*/
|
|
2894
2898
|
_handleImageImport(e) {
|
|
2895
|
-
return
|
|
2899
|
+
return j(this, null, function* () {
|
|
2896
2900
|
var s;
|
|
2897
2901
|
const { image: t } = (s = yield this.editor.imageManager.importImage({
|
|
2898
2902
|
source: e,
|
|
@@ -2908,7 +2912,7 @@ class ft {
|
|
|
2908
2912
|
* @fires editor:object-pasted
|
|
2909
2913
|
*/
|
|
2910
2914
|
copyPaste(e) {
|
|
2911
|
-
return
|
|
2915
|
+
return j(this, null, function* () {
|
|
2912
2916
|
const { canvas: t } = this.editor, s = e || t.getActiveObject();
|
|
2913
2917
|
if (!s || s.locked) return !1;
|
|
2914
2918
|
try {
|
|
@@ -2938,28 +2942,28 @@ class ft {
|
|
|
2938
2942
|
* @param event.clipboardData.items — элементы буфера обмена
|
|
2939
2943
|
*/
|
|
2940
2944
|
handlePasteEvent(t) {
|
|
2941
|
-
return
|
|
2945
|
+
return j(this, arguments, function* ({ clipboardData: e }) {
|
|
2942
2946
|
var r;
|
|
2943
2947
|
if (!((r = e == null ? void 0 : e.items) != null && r.length)) {
|
|
2944
2948
|
this.paste();
|
|
2945
2949
|
return;
|
|
2946
2950
|
}
|
|
2947
2951
|
const s = e.getData("text/plain");
|
|
2948
|
-
if (s && s.startsWith(
|
|
2952
|
+
if (s && s.startsWith(ye)) {
|
|
2949
2953
|
this.paste();
|
|
2950
2954
|
return;
|
|
2951
2955
|
}
|
|
2952
2956
|
const { items: a } = e, o = a[a.length - 1], n = o.getAsFile();
|
|
2953
2957
|
if (o.type !== "text/html" && n) {
|
|
2954
2958
|
const d = new FileReader();
|
|
2955
|
-
d.onload = (
|
|
2956
|
-
|
|
2959
|
+
d.onload = (h) => {
|
|
2960
|
+
h.target && this._handleImageImport(h.target.result).catch((l) => {
|
|
2957
2961
|
this.editor.errorManager.emitError({
|
|
2958
2962
|
origin: "ClipboardManager",
|
|
2959
2963
|
method: "handlePasteEvent",
|
|
2960
2964
|
code: "PASTE_IMAGE_FAILED",
|
|
2961
2965
|
message: "Ошибка вставки изображения из буфера обмена",
|
|
2962
|
-
data:
|
|
2966
|
+
data: l
|
|
2963
2967
|
});
|
|
2964
2968
|
});
|
|
2965
2969
|
}, d.readAsDataURL(n);
|
|
@@ -2967,9 +2971,9 @@ class ft {
|
|
|
2967
2971
|
}
|
|
2968
2972
|
const i = e.getData("text/html");
|
|
2969
2973
|
if (i) {
|
|
2970
|
-
const
|
|
2971
|
-
if (
|
|
2972
|
-
this._handleImageImport(
|
|
2974
|
+
const l = new DOMParser().parseFromString(i, "text/html").querySelector("img");
|
|
2975
|
+
if (l != null && l.src) {
|
|
2976
|
+
this._handleImageImport(l.src).catch((g) => {
|
|
2973
2977
|
this.editor.errorManager.emitError({
|
|
2974
2978
|
origin: "ClipboardManager",
|
|
2975
2979
|
method: "handlePasteEvent",
|
|
@@ -2989,7 +2993,7 @@ class ft {
|
|
|
2989
2993
|
* @fires editor:object-pasted
|
|
2990
2994
|
*/
|
|
2991
2995
|
paste() {
|
|
2992
|
-
return
|
|
2996
|
+
return j(this, null, function* () {
|
|
2993
2997
|
const { canvas: e } = this.editor;
|
|
2994
2998
|
if (!this.clipboard) return !1;
|
|
2995
2999
|
try {
|
|
@@ -3013,7 +3017,7 @@ class ft {
|
|
|
3013
3017
|
});
|
|
3014
3018
|
}
|
|
3015
3019
|
}
|
|
3016
|
-
class
|
|
3020
|
+
class J {
|
|
3017
3021
|
constructor({ editor: e }) {
|
|
3018
3022
|
this.editor = e;
|
|
3019
3023
|
}
|
|
@@ -3038,7 +3042,7 @@ class $ {
|
|
|
3038
3042
|
lockSkewingY: !0,
|
|
3039
3043
|
locked: !0
|
|
3040
3044
|
};
|
|
3041
|
-
n.set(i), !t &&
|
|
3045
|
+
n.set(i), !t && J._isGroupOrSelection(n) && n.getObjects().forEach((d) => {
|
|
3042
3046
|
d.set(i);
|
|
3043
3047
|
}), a.renderAll(), s || o.saveState(), a.fire("editor:object-locked", {
|
|
3044
3048
|
object: n,
|
|
@@ -3066,7 +3070,7 @@ class $ {
|
|
|
3066
3070
|
lockSkewingY: !1,
|
|
3067
3071
|
locked: !1
|
|
3068
3072
|
};
|
|
3069
|
-
o.set(n),
|
|
3073
|
+
o.set(n), J._isGroupOrSelection(o) && o.getObjects().forEach((i) => {
|
|
3070
3074
|
i.set(n);
|
|
3071
3075
|
}), s.renderAll(), t || a.saveState(), s.fire("editor:object-unlocked", {
|
|
3072
3076
|
object: o,
|
|
@@ -3074,10 +3078,10 @@ class $ {
|
|
|
3074
3078
|
});
|
|
3075
3079
|
}
|
|
3076
3080
|
static _isGroupOrSelection(e) {
|
|
3077
|
-
return e instanceof v || e instanceof
|
|
3081
|
+
return e instanceof v || e instanceof te;
|
|
3078
3082
|
}
|
|
3079
3083
|
}
|
|
3080
|
-
class
|
|
3084
|
+
class mt {
|
|
3081
3085
|
constructor({ editor: e }) {
|
|
3082
3086
|
this.editor = e;
|
|
3083
3087
|
}
|
|
@@ -3096,7 +3100,7 @@ class Mt {
|
|
|
3096
3100
|
a.suspendHistory();
|
|
3097
3101
|
const o = e || s.getActiveObject();
|
|
3098
3102
|
if (!o || !(o instanceof v)) return;
|
|
3099
|
-
const n = o.getObjects(), i = new
|
|
3103
|
+
const n = o.getObjects(), i = new te(n);
|
|
3100
3104
|
n.forEach((r) => s.remove(r)), i.set("id", `${i.type}-${A()}`), s.add(i), s.setActiveObject(i), s.renderAll(), a.resumeHistory(), t || a.saveState(), s.fire("editor:objects-grouped", {
|
|
3101
3105
|
object: o,
|
|
3102
3106
|
group: i,
|
|
@@ -3116,7 +3120,7 @@ class Mt {
|
|
|
3116
3120
|
withoutSave: t
|
|
3117
3121
|
} = {}) {
|
|
3118
3122
|
const { canvas: s, historyManager: a } = this.editor, o = e || s.getActiveObject();
|
|
3119
|
-
if (!(o instanceof
|
|
3123
|
+
if (!(o instanceof te)) return null;
|
|
3120
3124
|
a.suspendHistory();
|
|
3121
3125
|
const n = o.removeAll();
|
|
3122
3126
|
s.remove(o), n.forEach((d) => s.add(d));
|
|
@@ -3133,7 +3137,7 @@ class Mt {
|
|
|
3133
3137
|
return s.fire("editor:objects-ungrouped", r), r;
|
|
3134
3138
|
}
|
|
3135
3139
|
}
|
|
3136
|
-
class
|
|
3140
|
+
class bt {
|
|
3137
3141
|
constructor({ editor: e }) {
|
|
3138
3142
|
this.editor = e;
|
|
3139
3143
|
}
|
|
@@ -3148,7 +3152,7 @@ class mt {
|
|
|
3148
3152
|
o && s.lockObject({ object: n, skipInnerObjects: !0, withoutSave: !0 }), e.setActiveObject(n), e.requestRenderAll(), e.fire("editor:all-objects-selected", { selected: n });
|
|
3149
3153
|
}
|
|
3150
3154
|
}
|
|
3151
|
-
class
|
|
3155
|
+
class de {
|
|
3152
3156
|
constructor({ editor: e }) {
|
|
3153
3157
|
this.editor = e;
|
|
3154
3158
|
}
|
|
@@ -3190,17 +3194,17 @@ class ce {
|
|
|
3190
3194
|
withoutSave: t = !1,
|
|
3191
3195
|
_isRecursiveCall: s = !1
|
|
3192
3196
|
} = {}) {
|
|
3193
|
-
const { canvas: a, historyManager: o } = this.editor, i = (e || a.getActiveObjects()).filter((
|
|
3197
|
+
const { canvas: a, historyManager: o } = this.editor, i = (e || a.getActiveObjects()).filter((h) => !h.locked);
|
|
3194
3198
|
if (!(i != null && i.length)) return null;
|
|
3195
3199
|
s || o.suspendHistory();
|
|
3196
3200
|
const r = [];
|
|
3197
|
-
if (i.forEach((
|
|
3198
|
-
if (
|
|
3199
|
-
const
|
|
3200
|
-
r.push(...
|
|
3201
|
+
if (i.forEach((h) => {
|
|
3202
|
+
if (de._isUngroupableGroup(h)) {
|
|
3203
|
+
const l = this._handleGroupDeletion(h);
|
|
3204
|
+
r.push(...l);
|
|
3201
3205
|
return;
|
|
3202
3206
|
}
|
|
3203
|
-
a.remove(
|
|
3207
|
+
a.remove(h), r.push(h);
|
|
3204
3208
|
}), s) return null;
|
|
3205
3209
|
a.discardActiveObject(), a.renderAll(), o.resumeHistory(), t || o.saveState();
|
|
3206
3210
|
const d = {
|
|
@@ -3210,7 +3214,7 @@ class ce {
|
|
|
3210
3214
|
return a.fire("editor:objects-deleted", d), d;
|
|
3211
3215
|
}
|
|
3212
3216
|
}
|
|
3213
|
-
const
|
|
3217
|
+
const jt = {
|
|
3214
3218
|
IMAGE_MANAGER: {
|
|
3215
3219
|
/**
|
|
3216
3220
|
* Некорректный Content-Type изображения
|
|
@@ -3309,7 +3313,7 @@ const bt = {
|
|
|
3309
3313
|
INVALID_GRADIENT_FORMAT: "INVALID_GRADIENT_FORMAT"
|
|
3310
3314
|
}
|
|
3311
3315
|
};
|
|
3312
|
-
class
|
|
3316
|
+
class q {
|
|
3313
3317
|
constructor({ editor: e }) {
|
|
3314
3318
|
this._buffer = [], this.editor = e;
|
|
3315
3319
|
}
|
|
@@ -3336,7 +3340,7 @@ class J {
|
|
|
3336
3340
|
* @fires editor:error
|
|
3337
3341
|
*/
|
|
3338
3342
|
emitError({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, data: a, message: o }) {
|
|
3339
|
-
if (!
|
|
3343
|
+
if (!q.isValidErrorCode(s)) {
|
|
3340
3344
|
console.warn("Неизвестный код ошибки: ", { code: s, origin: e, method: t });
|
|
3341
3345
|
return;
|
|
3342
3346
|
}
|
|
@@ -3365,7 +3369,7 @@ class J {
|
|
|
3365
3369
|
* @fires editor:warning
|
|
3366
3370
|
*/
|
|
3367
3371
|
emitWarning({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, message: a, data: o }) {
|
|
3368
|
-
if (!
|
|
3372
|
+
if (!q.isValidErrorCode(s)) {
|
|
3369
3373
|
console.warn("Неизвестный код предупреждения: ", { code: s, origin: e, method: t });
|
|
3370
3374
|
return;
|
|
3371
3375
|
}
|
|
@@ -3388,10 +3392,10 @@ class J {
|
|
|
3388
3392
|
* @returns true, если код допустим, иначе false
|
|
3389
3393
|
*/
|
|
3390
3394
|
static isValidErrorCode(e) {
|
|
3391
|
-
return e ? Object.values(
|
|
3395
|
+
return e ? Object.values(jt).some((t) => Object.values(t).includes(e)) : !1;
|
|
3392
3396
|
}
|
|
3393
3397
|
}
|
|
3394
|
-
class
|
|
3398
|
+
class le {
|
|
3395
3399
|
/**
|
|
3396
3400
|
* Конструктор класса ImageEditor.
|
|
3397
3401
|
* @param canvasId - идентификатор канваса, в котором будет создан редактор
|
|
@@ -3406,7 +3410,7 @@ class de {
|
|
|
3406
3410
|
* @fires editor:ready
|
|
3407
3411
|
*/
|
|
3408
3412
|
init() {
|
|
3409
|
-
return
|
|
3413
|
+
return j(this, null, function* () {
|
|
3410
3414
|
const {
|
|
3411
3415
|
editorContainerWidth: e,
|
|
3412
3416
|
editorContainerHeight: t,
|
|
@@ -3417,18 +3421,18 @@ class de {
|
|
|
3417
3421
|
initialImage: i,
|
|
3418
3422
|
initialStateJSON: r,
|
|
3419
3423
|
scaleType: d,
|
|
3420
|
-
_onReadyCallback:
|
|
3424
|
+
_onReadyCallback: h
|
|
3421
3425
|
} = this.options;
|
|
3422
|
-
if (
|
|
3426
|
+
if (Qe.apply(), this.canvas = new Be(this.containerId, this.options), this.moduleLoader = new ze(), this.workerManager = new Ze(), this.errorManager = new q({ editor: this }), this.historyManager = new K({ editor: this }), this.toolbar = new ot({ editor: this }), this.transformManager = new gt({ editor: this }), this.canvasManager = new ht({ editor: this }), this.imageManager = new O({ editor: this }), this.layerManager = new $({ editor: this }), this.shapeManager = new ft({ editor: this }), this.interactionBlocker = new ut({ editor: this }), this.backgroundManager = new R({ editor: this }), this.clipboardManager = new Mt({ editor: this }), this.objectLockManager = new J({ editor: this }), this.groupingManager = new mt({ editor: this }), this.selectionManager = new bt({ editor: this }), this.deletionManager = new de({ editor: this }), this._createMontageArea(), this._createClippingArea(), this.listeners = new P({ editor: this, options: this.options }), this.canvasManager.setEditorContainerWidth(e), this.canvasManager.setEditorContainerHeight(t), this.canvasManager.setCanvasWrapperWidth(s), this.canvasManager.setCanvasWrapperHeight(a), this.canvasManager.setCanvasCSSWidth(o), this.canvasManager.setCanvasCSSHeight(n), i != null && i.source) {
|
|
3423
3427
|
const {
|
|
3424
|
-
source:
|
|
3428
|
+
source: l,
|
|
3425
3429
|
scale: g = `image-${d}`,
|
|
3426
3430
|
withoutSave: u = !0
|
|
3427
3431
|
} = i;
|
|
3428
|
-
yield this.imageManager.importImage({ source:
|
|
3432
|
+
yield this.imageManager.importImage({ source: l, scale: g, withoutSave: u });
|
|
3429
3433
|
} else
|
|
3430
3434
|
this.canvasManager.setDefaultScale({ withoutSave: !0 });
|
|
3431
|
-
r && this.historyManager.loadStateFromFullState(r), this.historyManager.saveState(), console.log("editor:ready"), this.canvas.fire("editor:ready", this), typeof
|
|
3435
|
+
r && this.historyManager.loadStateFromFullState(r), this.historyManager.saveState(), console.log("editor:ready"), this.canvas.fire("editor:ready", this), typeof h == "function" && h(this);
|
|
3432
3436
|
});
|
|
3433
3437
|
}
|
|
3434
3438
|
/**
|
|
@@ -3442,7 +3446,7 @@ class de {
|
|
|
3442
3446
|
this.montageArea = this.shapeManager.addRectangle({
|
|
3443
3447
|
width: e,
|
|
3444
3448
|
height: t,
|
|
3445
|
-
fill:
|
|
3449
|
+
fill: le._createMosaicPattern(),
|
|
3446
3450
|
stroke: null,
|
|
3447
3451
|
strokeWidth: 0,
|
|
3448
3452
|
selectable: !1,
|
|
@@ -3492,13 +3496,13 @@ class de {
|
|
|
3492
3496
|
const e = document.createElement("canvas");
|
|
3493
3497
|
e.width = 20, e.height = 20;
|
|
3494
3498
|
const t = e.getContext("2d");
|
|
3495
|
-
return t.fillStyle = "#ddd", t.fillRect(0, 0, 40, 40), t.fillStyle = "#ccc", t.fillRect(0, 0, 10, 10), t.fillRect(10, 10, 10, 10), new
|
|
3499
|
+
return t.fillStyle = "#ddd", t.fillRect(0, 0, 40, 40), t.fillStyle = "#ccc", t.fillRect(0, 0, 10, 10), t.fillRect(10, 10, 10, 10), new _e({
|
|
3496
3500
|
source: e,
|
|
3497
3501
|
repeat: "repeat"
|
|
3498
3502
|
});
|
|
3499
3503
|
}
|
|
3500
3504
|
}
|
|
3501
|
-
const
|
|
3505
|
+
const pt = {
|
|
3502
3506
|
/**
|
|
3503
3507
|
* Опции редактора
|
|
3504
3508
|
*/
|
|
@@ -3587,18 +3591,18 @@ const jt = {
|
|
|
3587
3591
|
resetObjectFitByDoubleClick: !0,
|
|
3588
3592
|
keyboardIgnoreSelectors: []
|
|
3589
3593
|
};
|
|
3590
|
-
function
|
|
3591
|
-
const t = I(I({},
|
|
3594
|
+
function Dt(c, e = {}) {
|
|
3595
|
+
const t = I(I({}, pt), e), s = document.getElementById(c);
|
|
3592
3596
|
if (!s)
|
|
3593
3597
|
return Promise.reject(new Error(`Контейнер с ID "${c}" не найден.`));
|
|
3594
3598
|
const a = document.createElement("canvas");
|
|
3595
3599
|
return a.id = `${c}-canvas`, s.appendChild(a), t.editorContainer = s, new Promise((o) => {
|
|
3596
3600
|
t._onReadyCallback = o;
|
|
3597
|
-
const n = new
|
|
3601
|
+
const n = new le(a.id, t);
|
|
3598
3602
|
window[c] = n;
|
|
3599
3603
|
});
|
|
3600
3604
|
}
|
|
3601
3605
|
export {
|
|
3602
|
-
|
|
3606
|
+
Dt as default
|
|
3603
3607
|
};
|
|
3604
3608
|
//# sourceMappingURL=main.js.map
|