@anu3ev/fabric-image-editor 0.1.76 → 0.1.78
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 +386 -349
- package/package.json +1 -1
- package/readme.md +52 -49
package/dist/main.js
CHANGED
|
@@ -1,46 +1,46 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
1
|
+
var Ce = Object.defineProperty, Se = Object.defineProperties;
|
|
2
|
+
var De = Object.getOwnPropertyDescriptors;
|
|
3
3
|
var W = Object.getOwnPropertySymbols;
|
|
4
|
-
var
|
|
5
|
-
var
|
|
4
|
+
var ue = Object.prototype.hasOwnProperty, fe = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var ge = (c, e, t) => e in c ? Ce(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
|
-
|
|
7
|
+
ue.call(e, t) && ge(c, t, e[t]);
|
|
8
8
|
if (W)
|
|
9
9
|
for (var t of W(e))
|
|
10
|
-
|
|
11
|
-
return
|
|
12
|
-
},
|
|
13
|
-
var F = (
|
|
10
|
+
fe.call(e, t) && ge(c, t, e[t]);
|
|
11
|
+
return c;
|
|
12
|
+
}, Me = (c, e) => Se(c, De(e));
|
|
13
|
+
var F = (c, e) => {
|
|
14
14
|
var t = {};
|
|
15
|
-
for (var s in
|
|
16
|
-
|
|
17
|
-
if (
|
|
18
|
-
for (var s of W(
|
|
19
|
-
e.indexOf(s) < 0 &&
|
|
15
|
+
for (var s in c)
|
|
16
|
+
ue.call(c, s) && e.indexOf(s) < 0 && (t[s] = c[s]);
|
|
17
|
+
if (c != null && W)
|
|
18
|
+
for (var s of W(c))
|
|
19
|
+
e.indexOf(s) < 0 && fe.call(c, s) && (t[s] = c[s]);
|
|
20
20
|
return t;
|
|
21
21
|
};
|
|
22
|
-
var
|
|
23
|
-
var o = (
|
|
22
|
+
var p = (c, e, t) => new Promise((s, a) => {
|
|
23
|
+
var o = (r) => {
|
|
24
24
|
try {
|
|
25
|
-
i(t.next(
|
|
25
|
+
i(t.next(r));
|
|
26
26
|
} catch (d) {
|
|
27
27
|
a(d);
|
|
28
28
|
}
|
|
29
|
-
}, n = (
|
|
29
|
+
}, n = (r) => {
|
|
30
30
|
try {
|
|
31
|
-
i(t.throw(
|
|
31
|
+
i(t.throw(r));
|
|
32
32
|
} catch (d) {
|
|
33
33
|
a(d);
|
|
34
34
|
}
|
|
35
|
-
}, i = (
|
|
36
|
-
i((t = t.apply(
|
|
35
|
+
}, i = (r) => r.done ? s(r.value) : Promise.resolve(r.value).then(o, n);
|
|
36
|
+
i((t = t.apply(c, e)).next());
|
|
37
37
|
});
|
|
38
|
-
import { ActiveSelection as v, util as P, controlsUtils as
|
|
39
|
-
import { create as
|
|
40
|
-
import
|
|
41
|
-
var
|
|
38
|
+
import { ActiveSelection as v, util as P, controlsUtils as Ee, InteractiveFabricObject as Ne, loadSVGFromURL as Oe, FabricImage as H, Point as G, Gradient as me, Rect as Le, Circle as we, Triangle as Te, Group as ee, Canvas as ke, Pattern as Be } from "fabric";
|
|
39
|
+
import { create as _e } from "jsondiffpatch";
|
|
40
|
+
import xe from "diff-match-patch";
|
|
41
|
+
var Re = "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 += Re[s[e] & 63];
|
|
44
44
|
return t;
|
|
45
45
|
};
|
|
46
46
|
class Y {
|
|
@@ -75,11 +75,11 @@ class Y {
|
|
|
75
75
|
copyObjectsByHotkey: o,
|
|
76
76
|
pasteImageFromClipboard: n,
|
|
77
77
|
undoRedoByHotKeys: i,
|
|
78
|
-
selectAllByHotkey:
|
|
78
|
+
selectAllByHotkey: r,
|
|
79
79
|
deleteObjectsByHotkey: d,
|
|
80
|
-
resetObjectFitByDoubleClick:
|
|
80
|
+
resetObjectFitByDoubleClick: l
|
|
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)), l && 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 p(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
|
});
|
|
@@ -336,17 +336,17 @@ class Y {
|
|
|
336
336
|
}
|
|
337
337
|
const o = window.getSelection();
|
|
338
338
|
if (o && !o.isCollapsed && o.rangeCount > 0) {
|
|
339
|
-
let
|
|
340
|
-
|
|
339
|
+
let r = o.getRangeAt(0).commonAncestorContainer;
|
|
340
|
+
r.nodeType === Node.TEXT_NODE && (r = r.parentElement);
|
|
341
341
|
const { keyboardIgnoreSelectors: d } = this.options;
|
|
342
|
-
if (d != null && d.length &&
|
|
343
|
-
for (const
|
|
342
|
+
if (d != null && d.length && r)
|
|
343
|
+
for (const l of d)
|
|
344
344
|
try {
|
|
345
|
-
const
|
|
346
|
-
if (
|
|
345
|
+
const h = r;
|
|
346
|
+
if (h.matches && h.matches(l) || h.closest && h.closest(l))
|
|
347
347
|
return !0;
|
|
348
|
-
} catch (
|
|
349
|
-
console.warn(`Error checking selection container with selector "${
|
|
348
|
+
} catch (h) {
|
|
349
|
+
console.warn(`Error checking selection container with selector "${l}":`, h);
|
|
350
350
|
}
|
|
351
351
|
}
|
|
352
352
|
return !1;
|
|
@@ -372,7 +372,7 @@ class Y {
|
|
|
372
372
|
};
|
|
373
373
|
}
|
|
374
374
|
}
|
|
375
|
-
class
|
|
375
|
+
class Ue {
|
|
376
376
|
/**
|
|
377
377
|
* Класс для динамической загрузки внешних модулей.
|
|
378
378
|
*/
|
|
@@ -390,21 +390,21 @@ class Re {
|
|
|
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 ze(c) {
|
|
394
394
|
return new Worker(
|
|
395
395
|
"" + new URL("assets/worker-CN39s7P7.js", import.meta.url).href,
|
|
396
396
|
{
|
|
397
|
-
name:
|
|
397
|
+
name: c == null ? void 0 : c.name
|
|
398
398
|
}
|
|
399
399
|
);
|
|
400
400
|
}
|
|
401
|
-
class
|
|
401
|
+
class He {
|
|
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 ze(), this._callbacks = /* @__PURE__ */ new Map(), this.worker.onmessage = this._handleMessage.bind(this);
|
|
408
408
|
}
|
|
409
409
|
/**
|
|
410
410
|
* Обработчик сообщений от воркера
|
|
@@ -444,26 +444,26 @@ class ze {
|
|
|
444
444
|
this.worker.terminate();
|
|
445
445
|
}
|
|
446
446
|
}
|
|
447
|
-
const N = 12,
|
|
448
|
-
function V(
|
|
449
|
-
const o = N, n =
|
|
450
|
-
|
|
447
|
+
const N = 12, Ze = 2, te = 8, se = 20, Ye = 100, ae = 20, oe = 8, Pe = 100, X = 32, ne = 1, We = "#2B2D33", ie = "#3D8BF4", re = "#FFFFFF";
|
|
448
|
+
function V(c, e, t, s, a) {
|
|
449
|
+
const o = N, n = Ze;
|
|
450
|
+
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, -o / 2, o, o, n), c.fill(), c.stroke(), c.restore();
|
|
451
451
|
}
|
|
452
|
-
function
|
|
453
|
-
const o = te, n = se, i =
|
|
454
|
-
|
|
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();
|
|
455
455
|
}
|
|
456
|
-
function
|
|
457
|
-
const o = ae, n = oe, i =
|
|
458
|
-
|
|
456
|
+
function je(c, e, t, s, a) {
|
|
457
|
+
const o = ae, n = oe, i = Pe;
|
|
458
|
+
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();
|
|
459
459
|
}
|
|
460
|
-
const
|
|
461
|
-
|
|
462
|
-
function
|
|
460
|
+
const Fe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", Ie = new Image();
|
|
461
|
+
Ie.src = Fe;
|
|
462
|
+
function Ve(c, e, t, s, a) {
|
|
463
463
|
const n = X / 2;
|
|
464
|
-
|
|
464
|
+
c.save(), c.translate(e, t), c.rotate(P.degreesToRadians(a.angle)), c.fillStyle = We, c.beginPath(), c.arc(0, 0, n, 0, 2 * Math.PI), c.fill(), c.drawImage(Ie, -n / 2, -n / 2, n, n), c.restore();
|
|
465
465
|
}
|
|
466
|
-
const
|
|
466
|
+
const Ge = {
|
|
467
467
|
// Угловые точки
|
|
468
468
|
tl: {
|
|
469
469
|
render: V,
|
|
@@ -495,14 +495,14 @@ const Ve = {
|
|
|
495
495
|
},
|
|
496
496
|
// Середина вертикалей
|
|
497
497
|
ml: {
|
|
498
|
-
render:
|
|
498
|
+
render: be,
|
|
499
499
|
sizeX: te,
|
|
500
500
|
sizeY: se,
|
|
501
501
|
offsetX: 0,
|
|
502
502
|
offsetY: 0
|
|
503
503
|
},
|
|
504
504
|
mr: {
|
|
505
|
-
render:
|
|
505
|
+
render: be,
|
|
506
506
|
sizeX: te,
|
|
507
507
|
sizeY: se,
|
|
508
508
|
offsetX: 0,
|
|
@@ -510,14 +510,14 @@ const Ve = {
|
|
|
510
510
|
},
|
|
511
511
|
// Середина горизонталей
|
|
512
512
|
mt: {
|
|
513
|
-
render:
|
|
513
|
+
render: je,
|
|
514
514
|
sizeX: ae,
|
|
515
515
|
sizeY: oe,
|
|
516
516
|
offsetX: 0,
|
|
517
517
|
offsetY: 0
|
|
518
518
|
},
|
|
519
519
|
mb: {
|
|
520
|
-
render:
|
|
520
|
+
render: je,
|
|
521
521
|
sizeX: ae,
|
|
522
522
|
sizeY: oe,
|
|
523
523
|
offsetX: 0,
|
|
@@ -525,31 +525,31 @@ const Ve = {
|
|
|
525
525
|
},
|
|
526
526
|
// Специальный «rotate» контрол
|
|
527
527
|
mtr: {
|
|
528
|
-
render:
|
|
528
|
+
render: Ve,
|
|
529
529
|
sizeX: X,
|
|
530
530
|
sizeY: X,
|
|
531
531
|
offsetX: 0,
|
|
532
532
|
offsetY: -X
|
|
533
533
|
}
|
|
534
534
|
};
|
|
535
|
-
class
|
|
535
|
+
class Xe {
|
|
536
536
|
static apply() {
|
|
537
|
-
const e =
|
|
538
|
-
Object.entries(
|
|
537
|
+
const e = Ee.createObjectDefaultControls();
|
|
538
|
+
Object.entries(Ge).forEach(([t, s]) => {
|
|
539
539
|
Object.assign(e[t], {
|
|
540
540
|
render: s.render,
|
|
541
541
|
sizeX: s.sizeX,
|
|
542
542
|
sizeY: s.sizeY,
|
|
543
543
|
offsetX: s.offsetX,
|
|
544
544
|
offsetY: s.offsetY
|
|
545
|
-
}), t === "mtr" && (e[t].cursorStyle = "grab", e[t].mouseDownHandler = (o, n, i,
|
|
546
|
-
var
|
|
547
|
-
(
|
|
545
|
+
}), t === "mtr" && (e[t].cursorStyle = "grab", e[t].mouseDownHandler = (o, n, i, r) => {
|
|
546
|
+
var l;
|
|
547
|
+
(l = n.target.canvas) == null || l.setCursor("grabbing");
|
|
548
548
|
});
|
|
549
|
-
}),
|
|
549
|
+
}), Ne.ownDefaults.controls = e;
|
|
550
550
|
}
|
|
551
551
|
}
|
|
552
|
-
const
|
|
552
|
+
const Qe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNi44NzUgMi41YS42MjUuNjI1IDAgMCAwLS42MjUuNjI0VjYuMjVIMy4xMjVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2MTBjMCAuMzQ1LjI4LjYyNS42MjUuNjI1aDEwYy4zNDUgMCAuNjI1LS4yOC42MjUtLjYyNXYtMy4xMjZoMy4xMjVjLjM0NSAwIC42MjUtLjI4LjYyNS0uNjI1di0xMGEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTEwWm02Ljg3NSAxMGgyLjVWMy43NUg3LjV2Mi41aDUuNjI1Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NS42MjRabS0xMCAzLjc1VjcuNWg4Ljc1djguNzVIMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", Ke = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi41IDcuNWMwLS42OS41Ni0xLjI1IDEuMjUtMS4yNWgxMi41Yy42OSAwIDEuMjUuNTYgMS4yNSAxLjI1djguNzVjMCAuNjktLjU2IDEuMjUtMS4yNSAxLjI1SDMuNzVjLS42OSAwLTEuMjUtLjU2LTEuMjUtMS4yNVY3LjVabTEzLjc1IDBIMy43NXY4Ljc1aDEyLjVWNy41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMS44NzVhMi4xODggMi4xODggMCAwIDAtMi4xODggMi4xODh2Mi44MTJhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyYTMuNDM3IDMuNDM3IDAgMSAxIDYuODc1IDB2Mi44MTNhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyQTIuMTg4IDIuMTg4IDAgMCAwIDEwIDEuODc2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEwIDEyLjgxM2EuOTM3LjkzNyAwIDEgMCAwLTEuODc1LjkzNy45MzcgMCAwIDAgMCAxLjg3NFoiLz48L3N2Zz4=", $e = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE2LjI1IDYuMjVINy41VjQuMzc1YTIuNSAyLjUgMCAwIDEgMi41LTIuNWMxLjIgMCAyLjI4MS44NiAyLjUxMiAyYS42MjUuNjI1IDAgMCAwIDEuMjI2LS4yNWMtLjM1NC0xLjczOC0xLjkyNS0zLTMuNzM4LTNhMy43NTQgMy43NTQgMCAwIDAtMy43NSAzLjc1VjYuMjVoLTIuNUExLjI1IDEuMjUgMCAwIDAgMi41IDcuNXY4Ljc1YTEuMjUgMS4yNSAwIDAgMCAxLjI1IDEuMjVoMTIuNWExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjcuNWExLjI1IDEuMjUgMCAwIDAtMS4yNS0xLjI1Wm0wIDEwSDMuNzVWNy41aDEyLjV2OC43NVptLTUuMzEzLTQuMzc1YS45MzcuOTM3IDAgMSAxLTEuODc0IDAgLjkzNy45MzcgMCAwIDEgMS44NzQgMFoiLz48L3N2Zz4K", Je = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIuNSA4LjEyNSAxMCAxMi41bDcuNS00LjM3NUwxMCAzLjc1IDIuNSA4LjEyNVoiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjY4NSAzLjIxYS42MjUuNjI1IDAgMCAxIC42MyAwbDcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOGw3LjUtNC4zNzVaTTMuNzQgOC4xMjUgMTAgMTEuNzc2bDYuMjYtMy42NTFMMTAgNC40NzQgMy43NCA4LjEyNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA5LjQ2YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDExLjc3NmwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA5LjQ2Wm0tMS42NiAyLjQxNUwxMCAxNS41MjZsNi4yNi0zLjY1MS0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNi0xLjk3NSAxLjE1MVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", qe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMy4yMWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDguMTI1IDEwIDExLjc3Nmw2LjI2LTMuNjUxTDEwIDQuNDc0IDMuNzQgOC4xMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjcxNCAxMCAxMCAxMi41bDQuMjg2LTIuNSAzLjIxNCAxLjg3NUwxMCAxNi4yNWwtNy41LTQuMzc1TDUuNzE0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDkuNDZhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgMTEuNzc2bDMuOTctMi4zMTZhLjYyNS42MjUgMCAwIDEgLjYzIDBsMy4yMTUgMS44NzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhMNS40IDkuNDZabS0xLjY2IDIuNDE1TDEwIDE1LjUyNmw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2LTEuOTc1IDEuMTUxWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", et = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTIuNSA2LjI1IDcuNSA0LjM3NSA3LjUtNC4zNzVMMTAgMS44NzUgMi41IDYuMjVaIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMS4zMzVhLjYyNS42MjUgMCAwIDEgLjYzIDBsNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4bDcuNS00LjM3NVpNMy43NCA2LjI1IDEwIDkuOTAxbDYuMjYtMy42NTFMMTAgMi41OTkgMy43NCA2LjI1WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDExLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCAxMy42NTFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgMTEuMzM1Wk0zLjc0IDEzLjc1IDEwIDE3LjQwMWw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTMuNzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgNy41ODVhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgOS45MDFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgNy41ODVaTTMuNzQgMTAgMTAgMTMuNjUxIDE2LjI2IDEwbC0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNkwzLjc0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", tt = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMS45NiAxMy40MzVhLjYyNS42MjUgMCAwIDEgLjg1NS0uMjI1TDEwIDE3LjQwMWw3LjE4NS00LjE5YS42MjUuNjI1IDAgMCAxIC42MyAxLjA3OWwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEtLjIyNS0uODU1Wk05LjY4NSAxLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDYuMjUgMTAgOS45MDFsNi4yNi0zLjY1MUwxMCAyLjU5OSAzLjc0IDYuMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im01LjcxNCAxMS44NzUgNC4yODYgMi41IDQuMjg2LTIuNUwxNy41IDEzLjc1IDEwIDE4LjEyNSAyLjUgMTMuNzVsMy4yMTQtMS44NzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgMTEuMzM1YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDEzLjY1MWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCAxMS4zMzVaTTMuNzQgMTMuNzUgMTAgMTcuNDAxbDYuMjYtMy42NTEtMS45NzQtMS4xNTEtMy45NzEgMi4zMTZhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTMuOTctMi4zMTZMMy43NCAxMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA3LjU4NWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCA5LjkwMWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA3LjU4NVpNMy43NCAxMCAxMCAxMy42NTEgMTYuMjYgMTBsLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTBaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=", st = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI0VDNEU0MCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOC4xMjUgMS4yNUExLjg3NSAxLjg3NSAwIDAgMCA2LjI1IDMuMTI1di42MjVIMy4xMjVhLjYyNS42MjUgMCAwIDAgMCAxLjI1aC42MjV2MTEuMjVBMS4yNSAxLjI1IDAgMCAwIDUgMTcuNWgxMGExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjVoLjYyNWEuNjI1LjYyNSAwIDAgMCAwLTEuMjVIMTMuNzV2LS42MjVhMS44NzUgMS44NzUgMCAwIDAtMS44NzUtMS44NzVoLTMuNzVabTQuMzc1IDIuNXYtLjYyNWEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2LjYyNWg1Wk01IDE2LjI1VjVoMTB2MTEuMjVINVpNOC4xMjUgNy41Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NWEuNjI1LjYyNSAwIDEgMS0xLjI1IDB2LTVjMC0uMzQ1LjI4LS42MjUuNjI1LS42MjVabTQuMzc1IDUuNjI1di01YS42MjUuNjI1IDAgMCAwLTEuMjUgMHY1YS42MjUuNjI1IDAgMSAwIDEuMjUgMFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", Z = {
|
|
553
553
|
style: {
|
|
554
554
|
position: "absolute",
|
|
555
555
|
display: "none",
|
|
@@ -616,50 +616,50 @@ const Xe = "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: Qe,
|
|
620
|
+
delete: st,
|
|
621
|
+
lock: Ke,
|
|
622
|
+
unlock: $e,
|
|
623
|
+
bringToFront: et,
|
|
624
|
+
sendToBack: tt,
|
|
625
|
+
bringForward: Je,
|
|
626
|
+
sendBackwards: qe
|
|
627
627
|
},
|
|
628
628
|
handlers: {
|
|
629
|
-
copyPaste: (
|
|
630
|
-
|
|
629
|
+
copyPaste: (c) => p(null, null, function* () {
|
|
630
|
+
c.clipboardManager.copyPaste();
|
|
631
631
|
}),
|
|
632
|
-
delete: (
|
|
633
|
-
|
|
632
|
+
delete: (c) => {
|
|
633
|
+
c.deletionManager.deleteSelectedObjects();
|
|
634
634
|
},
|
|
635
|
-
lock: (
|
|
636
|
-
|
|
635
|
+
lock: (c) => {
|
|
636
|
+
c.objectLockManager.lockObject();
|
|
637
637
|
},
|
|
638
|
-
unlock: (
|
|
639
|
-
|
|
638
|
+
unlock: (c) => {
|
|
639
|
+
c.objectLockManager.unlockObject();
|
|
640
640
|
},
|
|
641
|
-
bringForward: (
|
|
642
|
-
|
|
641
|
+
bringForward: (c) => {
|
|
642
|
+
c.layerManager.bringForward();
|
|
643
643
|
},
|
|
644
|
-
bringToFront: (
|
|
645
|
-
|
|
644
|
+
bringToFront: (c) => {
|
|
645
|
+
c.layerManager.bringToFront();
|
|
646
646
|
},
|
|
647
|
-
sendToBack: (
|
|
648
|
-
|
|
647
|
+
sendToBack: (c) => {
|
|
648
|
+
c.layerManager.sendToBack();
|
|
649
649
|
},
|
|
650
|
-
sendBackwards: (
|
|
651
|
-
|
|
650
|
+
sendBackwards: (c) => {
|
|
651
|
+
c.layerManager.sendBackwards();
|
|
652
652
|
}
|
|
653
653
|
}
|
|
654
654
|
};
|
|
655
|
-
class
|
|
655
|
+
class at {
|
|
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 =
|
|
662
|
+
this.config = Me(I(I({}, Z), e), {
|
|
663
663
|
style: I(I({}, Z.style), e.style || {}),
|
|
664
664
|
btnStyle: I(I({}, Z.btnStyle), e.btnStyle || {}),
|
|
665
665
|
icons: I(I({}, Z.icons), e.icons || {}),
|
|
@@ -690,13 +690,13 @@ class st {
|
|
|
690
690
|
_renderButtons(e) {
|
|
691
691
|
this.el.innerHTML = "";
|
|
692
692
|
for (const t of e) {
|
|
693
|
-
const { name: s, handle: a } = t, { icons: o = {}, btnStyle: n, handlers: i = {} } = this.config,
|
|
694
|
-
|
|
693
|
+
const { name: s, handle: a } = t, { icons: o = {}, btnStyle: n, handlers: i = {} } = this.config, r = document.createElement("button");
|
|
694
|
+
r.innerHTML = o[a] ? `<img src="${o[a]}" title="${s}" />` : s, Object.assign(r.style, n), r.onclick = () => {
|
|
695
695
|
var d;
|
|
696
696
|
return (d = i[a]) == null ? void 0 : d.call(i, this.editor);
|
|
697
|
-
},
|
|
697
|
+
}, r.onmousedown = (d) => {
|
|
698
698
|
d.stopPropagation(), d.preventDefault();
|
|
699
|
-
},
|
|
699
|
+
}, r.ondragstart = (d) => d.preventDefault(), this.el.appendChild(r);
|
|
700
700
|
}
|
|
701
701
|
}
|
|
702
702
|
/**
|
|
@@ -754,7 +754,7 @@ class st {
|
|
|
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:
|
|
757
|
+
const o = a.getZoom(), [, , , , n, i] = a.viewportTransform, { x: r } = e.getCenterPoint(), { top: d, height: l } = e.getBoundingRect(), g = r * o + n - t.offsetWidth / 2, u = s.offsetTop || 0, M = (d + l) * o + i + u;
|
|
758
758
|
Object.assign(t.style, {
|
|
759
759
|
left: `${g}px`,
|
|
760
760
|
top: `${M}px`,
|
|
@@ -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 = _e({
|
|
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: xe,
|
|
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 p(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, Q._serializeCustomData(e), yield t.loadFromJSON(e, (
|
|
916
|
-
Q._deserializeCustomData(
|
|
915
|
+
a.overlayMask = null, Q._serializeCustomData(e), yield t.loadFromJSON(e, (h, g) => {
|
|
916
|
+
Q._deserializeCustomData(h, g);
|
|
917
917
|
});
|
|
918
|
-
const
|
|
919
|
-
|
|
920
|
-
const d = t.getObjects().find((
|
|
918
|
+
const r = t.getObjects().find((h) => h.id === "montage-area");
|
|
919
|
+
r && (this.editor.montageArea = r, (n !== t.getWidth() || i !== t.getHeight()) && s.updateCanvas());
|
|
920
|
+
const d = t.getObjects().find((h) => h.id === "overlay-mask");
|
|
921
921
|
d && (a.overlayMask = d, a.overlayMask.visible = !1);
|
|
922
|
-
const
|
|
923
|
-
|
|
922
|
+
const l = t.getObjects().find((h) => h.id === "background");
|
|
923
|
+
l ? (o.backgroundObject = l, 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 p(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 p(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 ot = 0.1, nt = 2, it = 0.1, rt = 90, R = 16, U = 16, w = 4096, T = 4096, pe = "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 p(this, null, function* () {
|
|
1027
1027
|
const {
|
|
1028
1028
|
source: t,
|
|
1029
1029
|
scale: s = `image-${this.options.scaleType}`,
|
|
@@ -1033,7 +1033,7 @@ class O {
|
|
|
1033
1033
|
withoutSelection: i = !1
|
|
1034
1034
|
} = e;
|
|
1035
1035
|
if (!t) return null;
|
|
1036
|
-
const { canvas:
|
|
1036
|
+
const { canvas: r, montageArea: d, transformManager: l, historyManager: h, errorManager: g } = this.editor, u = yield this.getContentType(t), M = O.getFormatFromContentType(u), { acceptContentTypes: m, acceptFormats: f } = this;
|
|
1037
1037
|
if (!this.isAllowedContentType(u)) {
|
|
1038
1038
|
const j = `Неверный contentType для изображения: ${u}. Ожидается один из: ${this.acceptContentTypes.join(", ")}.`;
|
|
1039
1039
|
return g.emitError({
|
|
@@ -1053,7 +1053,7 @@ class O {
|
|
|
1053
1053
|
}
|
|
1054
1054
|
}), null;
|
|
1055
1055
|
}
|
|
1056
|
-
|
|
1056
|
+
h.suspendHistory();
|
|
1057
1057
|
try {
|
|
1058
1058
|
let j, b;
|
|
1059
1059
|
if (t instanceof File)
|
|
@@ -1079,7 +1079,7 @@ class O {
|
|
|
1079
1079
|
}
|
|
1080
1080
|
}), null;
|
|
1081
1081
|
if (this._createdBlobUrls.push(j), M === "svg") {
|
|
1082
|
-
const C = yield
|
|
1082
|
+
const C = yield Oe(j);
|
|
1083
1083
|
b = P.groupSVGElements(C.objects, C.options);
|
|
1084
1084
|
} else
|
|
1085
1085
|
b = yield H.fromURL(j, { crossOrigin: "anonymous" });
|
|
@@ -1088,20 +1088,20 @@ class O {
|
|
|
1088
1088
|
const C = b.getElement();
|
|
1089
1089
|
let D = "";
|
|
1090
1090
|
if (C instanceof HTMLImageElement ? D = C.src : C instanceof HTMLCanvasElement && (D = C.toDataURL()), k > T || S > w) {
|
|
1091
|
-
const L = yield this.resizeImageToBoundaries(D, "max"),
|
|
1092
|
-
this._createdBlobUrls.push(
|
|
1091
|
+
const L = yield this.resizeImageToBoundaries(D, "max"), y = URL.createObjectURL(L);
|
|
1092
|
+
this._createdBlobUrls.push(y), b = yield H.fromURL(y, { crossOrigin: "anonymous" });
|
|
1093
1093
|
} else if (k < U || S < R) {
|
|
1094
|
-
const L = yield this.resizeImageToBoundaries(D, "min"),
|
|
1095
|
-
this._createdBlobUrls.push(
|
|
1094
|
+
const L = yield this.resizeImageToBoundaries(D, "min"), y = URL.createObjectURL(L);
|
|
1095
|
+
this._createdBlobUrls.push(y), b = yield H.fromURL(y, { 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
1101
|
const { width: C, height: D } = d, L = this.calculateScaleFactor({ imageObject: b, scaleType: s });
|
|
1102
|
-
s === "image-contain" && L < 1 ?
|
|
1102
|
+
s === "image-contain" && L < 1 ? l.fitObject({ object: b, type: "contain", withoutSave: !0 }) : s === "image-cover" && (S > C || k > D) && l.fitObject({ object: b, type: "cover", withoutSave: !0 });
|
|
1103
1103
|
}
|
|
1104
|
-
|
|
1104
|
+
r.add(b), r.centerObject(b), i || r.setActiveObject(b), r.renderAll(), h.resumeHistory(), a || h.saveState();
|
|
1105
1105
|
const z = {
|
|
1106
1106
|
image: b,
|
|
1107
1107
|
format: M,
|
|
@@ -1113,7 +1113,7 @@ class O {
|
|
|
1113
1113
|
isBackground: n,
|
|
1114
1114
|
withoutSelection: i
|
|
1115
1115
|
};
|
|
1116
|
-
return
|
|
1116
|
+
return r.fire("editor:image-imported", z), z;
|
|
1117
1117
|
} catch (j) {
|
|
1118
1118
|
return g.emitError({
|
|
1119
1119
|
origin: "ImageManager",
|
|
@@ -1130,7 +1130,7 @@ class O {
|
|
|
1130
1130
|
isBackground: n,
|
|
1131
1131
|
withoutSelection: i
|
|
1132
1132
|
}
|
|
1133
|
-
}),
|
|
1133
|
+
}), h.resumeHistory(), null;
|
|
1134
1134
|
}
|
|
1135
1135
|
});
|
|
1136
1136
|
}
|
|
@@ -1143,7 +1143,7 @@ class O {
|
|
|
1143
1143
|
* @returns возвращает Promise с Blob-объектом уменьшенного изображения
|
|
1144
1144
|
*/
|
|
1145
1145
|
resizeImageToBoundaries(e, t = "max") {
|
|
1146
|
-
return
|
|
1146
|
+
return p(this, null, function* () {
|
|
1147
1147
|
let s = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${w}x${T}`;
|
|
1148
1148
|
t === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${R}x${U}`);
|
|
1149
1149
|
const a = {
|
|
@@ -1175,26 +1175,26 @@ class O {
|
|
|
1175
1175
|
* @fires editor:canvas-exported
|
|
1176
1176
|
*/
|
|
1177
1177
|
exportCanvasAsImageFile() {
|
|
1178
|
-
return
|
|
1178
|
+
return p(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:
|
|
1184
|
+
} = e, { canvas: n, montageArea: i, workerManager: r } = this.editor;
|
|
1185
1185
|
try {
|
|
1186
|
-
const d = s === "application/pdf",
|
|
1186
|
+
const d = s === "application/pdf", l = d ? "image/jpg" : s, h = O.getFormatFromContentType(l);
|
|
1187
1187
|
i.setCoords();
|
|
1188
1188
|
const { left: g, top: u, width: M, height: m } = i.getBoundingRect(), f = yield n.clone(["id", "format", "locked"]);
|
|
1189
|
-
f.enableRetinaScaling = !1, ["image/jpg", "image/jpeg"].includes(
|
|
1190
|
-
const j = f.getObjects().find((
|
|
1189
|
+
f.enableRetinaScaling = !1, ["image/jpg", "image/jpeg"].includes(l) && (f.backgroundColor = "#ffffff");
|
|
1190
|
+
const j = f.getObjects().find((y) => y.id === i.id);
|
|
1191
1191
|
j && (j.visible = !1), f.viewportTransform = [1, 0, 0, 1, -g, -u], f.setDimensions({ width: M, height: m }, { backstoreOnly: !0 }), f.renderAll();
|
|
1192
|
-
const b = f.getObjects().filter((
|
|
1193
|
-
if (
|
|
1194
|
-
const
|
|
1192
|
+
const b = f.getObjects().filter((y) => y.format).every((y) => y.format === "svg");
|
|
1193
|
+
if (h === "svg" && b) {
|
|
1194
|
+
const y = f.toSVG();
|
|
1195
1195
|
f.dispose();
|
|
1196
1196
|
const E = {
|
|
1197
|
-
image: O._exportSVGStringAsFile(
|
|
1197
|
+
image: O._exportSVGStringAsFile(y, {
|
|
1198
1198
|
exportAsBase64: a,
|
|
1199
1199
|
exportAsBlob: o,
|
|
1200
1200
|
fileName: t
|
|
@@ -1205,61 +1205,61 @@ class O {
|
|
|
1205
1205
|
};
|
|
1206
1206
|
return n.fire("editor:canvas-exported", E), E;
|
|
1207
1207
|
}
|
|
1208
|
-
const S = yield new Promise((
|
|
1208
|
+
const S = yield new Promise((y, B) => {
|
|
1209
1209
|
f.getElement().toBlob((E) => {
|
|
1210
|
-
E ?
|
|
1210
|
+
E ? y(E) : B(new Error("Failed to create Blob from canvas"));
|
|
1211
1211
|
});
|
|
1212
1212
|
});
|
|
1213
1213
|
if (f.dispose(), o) {
|
|
1214
|
-
const
|
|
1214
|
+
const y = {
|
|
1215
1215
|
image: S,
|
|
1216
|
-
format:
|
|
1217
|
-
contentType:
|
|
1216
|
+
format: h,
|
|
1217
|
+
contentType: l,
|
|
1218
1218
|
fileName: t
|
|
1219
1219
|
};
|
|
1220
|
-
return n.fire("editor:canvas-exported",
|
|
1220
|
+
return n.fire("editor:canvas-exported", y), y;
|
|
1221
1221
|
}
|
|
1222
|
-
const k = yield createImageBitmap(S), z = yield
|
|
1222
|
+
const k = yield createImageBitmap(S), z = yield r.post(
|
|
1223
1223
|
"toDataURL",
|
|
1224
|
-
{ format:
|
|
1224
|
+
{ format: h, quality: 1, bitmap: k },
|
|
1225
1225
|
[k]
|
|
1226
1226
|
);
|
|
1227
1227
|
if (d) {
|
|
1228
|
-
const B = M * 0.264583, E = m * 0.264583,
|
|
1228
|
+
const B = M * 0.264583, E = m * 0.264583, ve = (yield this.editor.moduleLoader.loadModule("jspdf")).jsPDF, q = new ve({
|
|
1229
1229
|
orientation: B > E ? "landscape" : "portrait",
|
|
1230
1230
|
unit: "mm",
|
|
1231
1231
|
format: [B, E]
|
|
1232
1232
|
});
|
|
1233
1233
|
if (q.addImage(String(z), "JPG", 0, 0, B, E), a) {
|
|
1234
|
-
const
|
|
1234
|
+
const he = {
|
|
1235
1235
|
image: q.output("datauristring"),
|
|
1236
1236
|
format: "pdf",
|
|
1237
1237
|
contentType: "application/pdf",
|
|
1238
1238
|
fileName: t
|
|
1239
1239
|
};
|
|
1240
|
-
return n.fire("editor:canvas-exported",
|
|
1240
|
+
return n.fire("editor:canvas-exported", he), he;
|
|
1241
1241
|
}
|
|
1242
|
-
const
|
|
1243
|
-
image: new File([
|
|
1242
|
+
const Ae = q.output("blob"), le = {
|
|
1243
|
+
image: new File([Ae], t, { type: "application/pdf" }),
|
|
1244
1244
|
format: "pdf",
|
|
1245
1245
|
contentType: "application/pdf",
|
|
1246
1246
|
fileName: t
|
|
1247
1247
|
};
|
|
1248
|
-
return n.fire("editor:canvas-exported",
|
|
1248
|
+
return n.fire("editor:canvas-exported", le), le;
|
|
1249
1249
|
}
|
|
1250
1250
|
if (a) {
|
|
1251
|
-
const
|
|
1251
|
+
const y = {
|
|
1252
1252
|
image: z,
|
|
1253
|
-
format:
|
|
1254
|
-
contentType:
|
|
1253
|
+
format: h,
|
|
1254
|
+
contentType: l,
|
|
1255
1255
|
fileName: t
|
|
1256
1256
|
};
|
|
1257
|
-
return n.fire("editor:canvas-exported",
|
|
1257
|
+
return n.fire("editor:canvas-exported", y), y;
|
|
1258
1258
|
}
|
|
1259
|
-
const C =
|
|
1260
|
-
image: new File([S], C, { type:
|
|
1261
|
-
format:
|
|
1262
|
-
contentType:
|
|
1259
|
+
const C = h === "svg" && !b ? t.replace(/\.[^/.]+$/, ".png") : t, L = {
|
|
1260
|
+
image: new File([S], C, { type: l }),
|
|
1261
|
+
format: h,
|
|
1262
|
+
contentType: l,
|
|
1263
1263
|
fileName: C
|
|
1264
1264
|
};
|
|
1265
1265
|
return n.fire("editor:canvas-exported", L), L;
|
|
@@ -1286,14 +1286,14 @@ class O {
|
|
|
1286
1286
|
* @fires editor:object-exported
|
|
1287
1287
|
*/
|
|
1288
1288
|
exportObjectAsImageFile() {
|
|
1289
|
-
return
|
|
1289
|
+
return p(this, arguments, function* (e = {}) {
|
|
1290
1290
|
const {
|
|
1291
1291
|
object: t,
|
|
1292
1292
|
fileName: s = "image.png",
|
|
1293
1293
|
contentType: a = "image/png",
|
|
1294
1294
|
exportAsBase64: o = !1,
|
|
1295
1295
|
exportAsBlob: n = !1
|
|
1296
|
-
} = e, { canvas: i, workerManager:
|
|
1296
|
+
} = e, { canvas: i, workerManager: r } = this.editor, d = t || i.getActiveObject();
|
|
1297
1297
|
if (!d)
|
|
1298
1298
|
return this.editor.errorManager.emitError({
|
|
1299
1299
|
origin: "ImageManager",
|
|
@@ -1303,8 +1303,8 @@ class O {
|
|
|
1303
1303
|
data: { contentType: a, fileName: s, exportAsBase64: o, exportAsBlob: n }
|
|
1304
1304
|
}), null;
|
|
1305
1305
|
try {
|
|
1306
|
-
const
|
|
1307
|
-
if (
|
|
1306
|
+
const l = O.getFormatFromContentType(a);
|
|
1307
|
+
if (l === "svg") {
|
|
1308
1308
|
const m = d.toSVG(), f = O._exportSVGStringAsFile(m, {
|
|
1309
1309
|
exportAsBase64: o,
|
|
1310
1310
|
exportAsBlob: n,
|
|
@@ -1312,17 +1312,17 @@ class O {
|
|
|
1312
1312
|
}), j = {
|
|
1313
1313
|
object: d,
|
|
1314
1314
|
image: f,
|
|
1315
|
-
format:
|
|
1315
|
+
format: l,
|
|
1316
1316
|
contentType: "image/svg+xml",
|
|
1317
1317
|
fileName: s.replace(/\.[^/.]+$/, ".svg")
|
|
1318
1318
|
};
|
|
1319
1319
|
return i.fire("editor:object-exported", j), j;
|
|
1320
1320
|
}
|
|
1321
1321
|
if (o && d instanceof H) {
|
|
1322
|
-
const m = yield createImageBitmap(d.getElement()), f = yield
|
|
1322
|
+
const m = yield createImageBitmap(d.getElement()), f = yield r.post(
|
|
1323
1323
|
"toDataURL",
|
|
1324
1324
|
{
|
|
1325
|
-
format:
|
|
1325
|
+
format: l,
|
|
1326
1326
|
quality: 1,
|
|
1327
1327
|
bitmap: m
|
|
1328
1328
|
},
|
|
@@ -1330,16 +1330,16 @@ class O {
|
|
|
1330
1330
|
), j = {
|
|
1331
1331
|
object: d,
|
|
1332
1332
|
image: f,
|
|
1333
|
-
format:
|
|
1333
|
+
format: l,
|
|
1334
1334
|
contentType: a,
|
|
1335
1335
|
fileName: s
|
|
1336
1336
|
};
|
|
1337
1337
|
return i.fire("editor:object-exported", j), j;
|
|
1338
1338
|
}
|
|
1339
|
-
const
|
|
1339
|
+
const h = d.toCanvasElement({
|
|
1340
1340
|
enableRetinaScaling: !1
|
|
1341
1341
|
}), g = yield new Promise((m, f) => {
|
|
1342
|
-
|
|
1342
|
+
h.toBlob((j) => {
|
|
1343
1343
|
j ? m(j) : f(new Error("Failed to create Blob from canvas"));
|
|
1344
1344
|
});
|
|
1345
1345
|
});
|
|
@@ -1347,7 +1347,7 @@ class O {
|
|
|
1347
1347
|
const m = {
|
|
1348
1348
|
object: d,
|
|
1349
1349
|
image: g,
|
|
1350
|
-
format:
|
|
1350
|
+
format: l,
|
|
1351
1351
|
contentType: a,
|
|
1352
1352
|
fileName: s
|
|
1353
1353
|
};
|
|
@@ -1356,17 +1356,17 @@ class O {
|
|
|
1356
1356
|
const u = new File([g], s, { type: a }), M = {
|
|
1357
1357
|
object: d,
|
|
1358
1358
|
image: u,
|
|
1359
|
-
format:
|
|
1359
|
+
format: l,
|
|
1360
1360
|
contentType: a,
|
|
1361
1361
|
fileName: s
|
|
1362
1362
|
};
|
|
1363
1363
|
return i.fire("editor:object-exported", M), M;
|
|
1364
|
-
} catch (
|
|
1364
|
+
} catch (l) {
|
|
1365
1365
|
return this.editor.errorManager.emitError({
|
|
1366
1366
|
origin: "ImageManager",
|
|
1367
1367
|
method: "exportObjectAsImageFile",
|
|
1368
1368
|
code: "IMAGE_EXPORT_FAILED",
|
|
1369
|
-
message: `Ошибка экспорта объекта: ${
|
|
1369
|
+
message: `Ошибка экспорта объекта: ${l.message}`,
|
|
1370
1370
|
data: { contentType: a, fileName: s, exportAsBase64: o, exportAsBlob: n }
|
|
1371
1371
|
}), null;
|
|
1372
1372
|
}
|
|
@@ -1399,7 +1399,7 @@ class O {
|
|
|
1399
1399
|
* @public
|
|
1400
1400
|
*/
|
|
1401
1401
|
getContentType(e) {
|
|
1402
|
-
return
|
|
1402
|
+
return p(this, null, function* () {
|
|
1403
1403
|
return typeof e == "string" ? this.getContentTypeFromUrl(e) : e.type || "application/octet-stream";
|
|
1404
1404
|
});
|
|
1405
1405
|
}
|
|
@@ -1410,7 +1410,7 @@ class O {
|
|
|
1410
1410
|
* @public
|
|
1411
1411
|
*/
|
|
1412
1412
|
getContentTypeFromUrl(e) {
|
|
1413
|
-
return
|
|
1413
|
+
return p(this, null, function* () {
|
|
1414
1414
|
if (e.startsWith("data:")) {
|
|
1415
1415
|
const t = e.match(/^data:([^;]+)/);
|
|
1416
1416
|
return t ? t[1] : "application/octet-stream";
|
|
@@ -1489,11 +1489,11 @@ class O {
|
|
|
1489
1489
|
return t ? t[1] : "";
|
|
1490
1490
|
}
|
|
1491
1491
|
}
|
|
1492
|
-
const _ = (
|
|
1493
|
-
function
|
|
1494
|
-
return ((
|
|
1492
|
+
const _ = (c, e, t) => Math.max(Math.min(c, t), e), ye = (c, e) => c * e, ct = (c, e) => new G(c / 2, e / 2);
|
|
1493
|
+
function dt(c) {
|
|
1494
|
+
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
1495
|
}
|
|
1496
|
-
class
|
|
1496
|
+
class lt {
|
|
1497
1497
|
/**
|
|
1498
1498
|
* @param options
|
|
1499
1499
|
* @param options.editor – экземпляр редактора
|
|
@@ -1524,15 +1524,15 @@ class dt {
|
|
|
1524
1524
|
canvas: o,
|
|
1525
1525
|
montageArea: n,
|
|
1526
1526
|
options: { canvasBackstoreWidth: i }
|
|
1527
|
-
} = this.editor, { width:
|
|
1528
|
-
if (!i || i === "auto" || a ? this.adaptCanvasToContainer() : i ? this.setCanvasBackstoreWidth(Number(i)) : this.setCanvasBackstoreWidth(
|
|
1529
|
-
const m =
|
|
1527
|
+
} = this.editor, { width: r, height: d } = n, l = _(Number(e), R, w);
|
|
1528
|
+
if (!i || i === "auto" || a ? this.adaptCanvasToContainer() : i ? this.setCanvasBackstoreWidth(Number(i)) : this.setCanvasBackstoreWidth(l), n.set({ width: l }), (M = o.clipPath) == null || M.set({ width: l }), t) {
|
|
1529
|
+
const m = l / r, f = ye(d, m);
|
|
1530
1530
|
this.setResolutionHeight(f);
|
|
1531
1531
|
return;
|
|
1532
1532
|
}
|
|
1533
|
-
const { left:
|
|
1534
|
-
o.setViewportTransform([u, 0, 0, u,
|
|
1535
|
-
width:
|
|
1533
|
+
const { left: h, top: g } = this.getObjectDefaultCoords(n), u = o.getZoom();
|
|
1534
|
+
o.setViewportTransform([u, 0, 0, u, h, g]), this.centerMontageArea(), s || this.editor.historyManager.saveState(), o.fire("editor:resolution-width-changed", {
|
|
1535
|
+
width: l,
|
|
1536
1536
|
preserveProportional: t,
|
|
1537
1537
|
withoutSave: s,
|
|
1538
1538
|
adaptCanvasToContainer: a
|
|
@@ -1554,15 +1554,15 @@ class dt {
|
|
|
1554
1554
|
canvas: o,
|
|
1555
1555
|
montageArea: n,
|
|
1556
1556
|
options: { canvasBackstoreHeight: i }
|
|
1557
|
-
} = this.editor, { width:
|
|
1558
|
-
if (!i || i === "auto" || a ? this.adaptCanvasToContainer() : i ? this.setCanvasBackstoreHeight(Number(i)) : this.setCanvasBackstoreHeight(
|
|
1559
|
-
const m =
|
|
1557
|
+
} = this.editor, { width: r, height: d } = n, l = _(Number(e), U, T);
|
|
1558
|
+
if (!i || i === "auto" || a ? this.adaptCanvasToContainer() : i ? this.setCanvasBackstoreHeight(Number(i)) : this.setCanvasBackstoreHeight(l), n.set({ height: l }), (M = o.clipPath) == null || M.set({ height: l }), t) {
|
|
1559
|
+
const m = l / d, f = ye(r, m);
|
|
1560
1560
|
this.setResolutionWidth(f);
|
|
1561
1561
|
return;
|
|
1562
1562
|
}
|
|
1563
|
-
const { left:
|
|
1564
|
-
o.setViewportTransform([u, 0, 0, u,
|
|
1565
|
-
height:
|
|
1563
|
+
const { left: h, top: g } = this.getObjectDefaultCoords(n), u = o.getZoom();
|
|
1564
|
+
o.setViewportTransform([u, 0, 0, u, h, g]), this.centerMontageArea(), s || this.editor.historyManager.saveState(), o.fire("editor:resolution-height-changed", {
|
|
1565
|
+
height: l,
|
|
1566
1566
|
preserveProportional: t,
|
|
1567
1567
|
withoutSave: s,
|
|
1568
1568
|
adaptCanvasToContainer: a
|
|
@@ -1573,12 +1573,12 @@ class dt {
|
|
|
1573
1573
|
* и устанавливает правильный viewportTransform.
|
|
1574
1574
|
*/
|
|
1575
1575
|
centerMontageArea() {
|
|
1576
|
-
var
|
|
1577
|
-
const { canvas: e, montageArea: t } = this.editor, s = e.getWidth(), a = e.getHeight(), o = e.getZoom(), n =
|
|
1576
|
+
var r;
|
|
1577
|
+
const { canvas: e, montageArea: t } = this.editor, s = e.getWidth(), a = e.getHeight(), o = e.getZoom(), n = ct(s, a);
|
|
1578
1578
|
t.set({
|
|
1579
1579
|
left: s / 2,
|
|
1580
1580
|
top: a / 2
|
|
1581
|
-
}), (
|
|
1581
|
+
}), (r = e.clipPath) == null || r.set({
|
|
1582
1582
|
left: s / 2,
|
|
1583
1583
|
top: a / 2
|
|
1584
1584
|
}), e.renderAll();
|
|
@@ -1599,8 +1599,8 @@ class dt {
|
|
|
1599
1599
|
code: "NO_ACTIVE_OBJECT",
|
|
1600
1600
|
message: "Не выбран объект для получения координат"
|
|
1601
1601
|
}), { left: 0, top: 0 };
|
|
1602
|
-
const { width: a, height: o } = s, n = t.getZoom(), i = (a - a * n) / 2,
|
|
1603
|
-
return { left: i, top:
|
|
1602
|
+
const { width: a, height: o } = s, n = t.getZoom(), i = (a - a * n) / 2, r = (o - o * n) / 2;
|
|
1603
|
+
return { left: i, top: r };
|
|
1604
1604
|
}
|
|
1605
1605
|
/**
|
|
1606
1606
|
* Устанавливаем ширину канваса в backstore (для экспорта)
|
|
@@ -1643,26 +1643,26 @@ class dt {
|
|
|
1643
1643
|
}
|
|
1644
1644
|
} = this.editor, o = t.left, n = t.top;
|
|
1645
1645
|
this.setResolutionWidth(s, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.setResolutionHeight(a, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.centerMontageArea();
|
|
1646
|
-
const i = t.left - o,
|
|
1647
|
-
if (i !== 0 ||
|
|
1648
|
-
const d = e.getActiveObject(),
|
|
1646
|
+
const i = t.left - o, r = t.top - n;
|
|
1647
|
+
if (i !== 0 || r !== 0) {
|
|
1648
|
+
const d = e.getActiveObject(), l = [];
|
|
1649
1649
|
if ((d == null ? void 0 : d.type) === "activeselection") {
|
|
1650
|
-
const
|
|
1651
|
-
|
|
1650
|
+
const h = d;
|
|
1651
|
+
l.push(...h.getObjects()), e.discardActiveObject();
|
|
1652
1652
|
}
|
|
1653
|
-
if (e.getObjects().forEach((
|
|
1654
|
-
|
|
1655
|
-
left:
|
|
1656
|
-
top:
|
|
1657
|
-
}),
|
|
1658
|
-
}),
|
|
1659
|
-
if (
|
|
1660
|
-
e.setActiveObject(
|
|
1653
|
+
if (e.getObjects().forEach((h) => {
|
|
1654
|
+
h.id === "montage-area" || h.id === "overlay-mask" || h.id === "background" || (h.set({
|
|
1655
|
+
left: h.left + i,
|
|
1656
|
+
top: h.top + r
|
|
1657
|
+
}), h.setCoords());
|
|
1658
|
+
}), l.length > 0)
|
|
1659
|
+
if (l.length === 1)
|
|
1660
|
+
e.setActiveObject(l[0]);
|
|
1661
1661
|
else {
|
|
1662
|
-
const
|
|
1662
|
+
const h = new v(l, {
|
|
1663
1663
|
canvas: e
|
|
1664
1664
|
});
|
|
1665
|
-
e.setActiveObject(
|
|
1665
|
+
e.setActiveObject(h);
|
|
1666
1666
|
}
|
|
1667
1667
|
}
|
|
1668
1668
|
e.renderAll(), e.fire("editor:canvas-updated", {
|
|
@@ -1793,15 +1793,15 @@ class dt {
|
|
|
1793
1793
|
}
|
|
1794
1794
|
const n = t === "width" ? "width" : "height";
|
|
1795
1795
|
if (typeof s == "string") {
|
|
1796
|
-
o.forEach((
|
|
1797
|
-
|
|
1796
|
+
o.forEach((r) => {
|
|
1797
|
+
r.style[n] = s;
|
|
1798
1798
|
});
|
|
1799
1799
|
return;
|
|
1800
1800
|
}
|
|
1801
1801
|
if (isNaN(s)) return;
|
|
1802
1802
|
const i = `${s}px`;
|
|
1803
|
-
o.forEach((
|
|
1804
|
-
|
|
1803
|
+
o.forEach((r) => {
|
|
1804
|
+
r.style[n] = i;
|
|
1805
1805
|
}), a.fire(`editor:display-${e}-${n}-changed`, {
|
|
1806
1806
|
element: e,
|
|
1807
1807
|
value: s
|
|
@@ -1822,20 +1822,20 @@ class dt {
|
|
|
1822
1822
|
transformManager: n,
|
|
1823
1823
|
options: {
|
|
1824
1824
|
montageAreaWidth: i,
|
|
1825
|
-
montageAreaHeight:
|
|
1825
|
+
montageAreaHeight: r
|
|
1826
1826
|
}
|
|
1827
1827
|
} = this.editor, d = e || a.getActiveObject();
|
|
1828
|
-
if (!
|
|
1829
|
-
const { width:
|
|
1830
|
-
let g = Math.min(
|
|
1828
|
+
if (!dt(d)) return;
|
|
1829
|
+
const { width: l, height: h } = d;
|
|
1830
|
+
let g = Math.min(l, w), u = Math.min(h, T);
|
|
1831
1831
|
if (t) {
|
|
1832
1832
|
const {
|
|
1833
1833
|
width: M,
|
|
1834
1834
|
height: m
|
|
1835
|
-
} = o, f =
|
|
1835
|
+
} = o, f = l / M, j = h / m, b = Math.max(f, j);
|
|
1836
1836
|
g = M * b, u = m * b;
|
|
1837
1837
|
}
|
|
1838
|
-
this.setResolutionWidth(g, { withoutSave: !0 }), this.setResolutionHeight(u, { withoutSave: !0 }), this.editor.backgroundManager.backgroundObject && this.editor.backgroundManager.refresh(), (
|
|
1838
|
+
this.setResolutionWidth(g, { withoutSave: !0 }), this.setResolutionHeight(u, { withoutSave: !0 }), this.editor.backgroundManager.backgroundObject && this.editor.backgroundManager.refresh(), (l > i || h > 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
1839
|
object: d,
|
|
1840
1840
|
width: g,
|
|
1841
1841
|
height: u,
|
|
@@ -1885,9 +1885,9 @@ class dt {
|
|
|
1885
1885
|
);
|
|
1886
1886
|
}
|
|
1887
1887
|
}
|
|
1888
|
-
class
|
|
1888
|
+
class ht {
|
|
1889
1889
|
constructor({ editor: e }) {
|
|
1890
|
-
this.editor = e, this.options = e.options, this.minZoom = this.options.minZoom ||
|
|
1890
|
+
this.editor = e, this.options = e.options, this.minZoom = this.options.minZoom || ot, this.maxZoom = this.options.maxZoom || nt, this.defaultZoom = this.options.defaultScale;
|
|
1891
1891
|
}
|
|
1892
1892
|
/**
|
|
1893
1893
|
* Метод рассчитывает и применяет зум по умолчанию для монтажной области редактора.
|
|
@@ -1897,8 +1897,8 @@ class lt {
|
|
|
1897
1897
|
* @param scale - Желаемый масштаб относительно размеров контейнера редактора.
|
|
1898
1898
|
*/
|
|
1899
1899
|
calculateAndApplyDefaultZoom(e = this.options.defaultScale) {
|
|
1900
|
-
const { canvas: t } = this.editor, s = t.editorContainer, a = s.clientWidth, o = s.clientHeight, { width: n, height: i } = this.editor.montageArea,
|
|
1901
|
-
this.defaultZoom = Math.min(
|
|
1900
|
+
const { canvas: t } = this.editor, s = t.editorContainer, a = s.clientWidth, o = s.clientHeight, { width: n, height: i } = this.editor.montageArea, r = a / n * e, d = o / i * e;
|
|
1901
|
+
this.defaultZoom = Math.min(r, d), this.setZoom();
|
|
1902
1902
|
}
|
|
1903
1903
|
/**
|
|
1904
1904
|
* Увеличение/уменьшение масштаба
|
|
@@ -1909,15 +1909,15 @@ class lt {
|
|
|
1909
1909
|
* @fires editor:zoom-changed
|
|
1910
1910
|
* Если передавать координаты курсора, то нужно быть аккуратнее, так как юзер может выйти за пределы рабочей области
|
|
1911
1911
|
*/
|
|
1912
|
-
zoom(e =
|
|
1912
|
+
zoom(e = it, t = {}) {
|
|
1913
1913
|
var g, u;
|
|
1914
1914
|
if (!e) return;
|
|
1915
|
-
const { minZoom: s, maxZoom: a } = this, { canvas: o } = this.editor, n = o.getZoom(), i = o.getCenterPoint(),
|
|
1916
|
-
let
|
|
1917
|
-
|
|
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, l = new G(r, d);
|
|
1916
|
+
let h = Number((n + Number(e)).toFixed(2));
|
|
1917
|
+
h > a && (h = a), h < s && (h = s), o.zoomToPoint(l, h), o.fire("editor:zoom-changed", {
|
|
1918
1918
|
currentZoom: o.getZoom(),
|
|
1919
|
-
zoom:
|
|
1920
|
-
point:
|
|
1919
|
+
zoom: h,
|
|
1920
|
+
point: l
|
|
1921
1921
|
});
|
|
1922
1922
|
}
|
|
1923
1923
|
/**
|
|
@@ -1952,7 +1952,7 @@ class lt {
|
|
|
1952
1952
|
* @param options.withoutSave - Не сохранять состояние
|
|
1953
1953
|
* @fires editor:object-rotated
|
|
1954
1954
|
*/
|
|
1955
|
-
rotate(e =
|
|
1955
|
+
rotate(e = rt, { withoutSave: t } = {}) {
|
|
1956
1956
|
const { canvas: s, historyManager: a } = this.editor, o = s.getActiveObject();
|
|
1957
1957
|
if (!o) return;
|
|
1958
1958
|
const n = o.angle + e;
|
|
@@ -2030,11 +2030,11 @@ class lt {
|
|
|
2030
2030
|
const { canvas: o, historyManager: n } = this.editor, i = e || o.getActiveObject();
|
|
2031
2031
|
if (i) {
|
|
2032
2032
|
if (i instanceof v && !a) {
|
|
2033
|
-
const
|
|
2034
|
-
o.discardActiveObject(),
|
|
2035
|
-
this._fitSingleObject(
|
|
2033
|
+
const r = i.getObjects();
|
|
2034
|
+
o.discardActiveObject(), r.forEach((l) => {
|
|
2035
|
+
this._fitSingleObject(l, t);
|
|
2036
2036
|
});
|
|
2037
|
-
const d = new v(
|
|
2037
|
+
const d = new v(r, { canvas: o });
|
|
2038
2038
|
o.setActiveObject(d);
|
|
2039
2039
|
} else
|
|
2040
2040
|
this._fitSingleObject(i, t);
|
|
@@ -2053,11 +2053,11 @@ class lt {
|
|
|
2053
2053
|
* @private
|
|
2054
2054
|
*/
|
|
2055
2055
|
_fitSingleObject(e, t) {
|
|
2056
|
-
const { canvas: s, montageArea: a } = this.editor, { width: o, height: n, scaleX: i = 1, scaleY:
|
|
2056
|
+
const { canvas: s, montageArea: a } = this.editor, { width: o, height: n, scaleX: i = 1, scaleY: r = 1, angle: d = 0 } = e, l = o * Math.abs(i), h = n * Math.abs(r), g = d * Math.PI / 180, u = Math.abs(Math.cos(g)), M = Math.abs(Math.sin(g)), m = l * u + h * M, f = l * M + h * u, j = a.width, b = a.height;
|
|
2057
2057
|
let S;
|
|
2058
2058
|
t === "contain" ? S = Math.min(j / m, b / f) : S = Math.max(j / m, b / f), e.set({
|
|
2059
2059
|
scaleX: i * S,
|
|
2060
|
-
scaleY:
|
|
2060
|
+
scaleY: r * S
|
|
2061
2061
|
}), s.centerObject(e);
|
|
2062
2062
|
}
|
|
2063
2063
|
/**
|
|
@@ -2082,7 +2082,7 @@ class lt {
|
|
|
2082
2082
|
montageArea: o,
|
|
2083
2083
|
imageManager: n,
|
|
2084
2084
|
historyManager: i,
|
|
2085
|
-
options: { scaleType:
|
|
2085
|
+
options: { scaleType: r }
|
|
2086
2086
|
} = this.editor, d = e || a.getActiveObject();
|
|
2087
2087
|
if (!d || d.locked) return;
|
|
2088
2088
|
if (i.suspendHistory(), d.type === "image" || d.format === "svg" || d.set({
|
|
@@ -2094,11 +2094,11 @@ class lt {
|
|
|
2094
2094
|
}), t)
|
|
2095
2095
|
this.fitObject({ object: d, withoutSave: !0, fitAsOneObject: !0 });
|
|
2096
2096
|
else {
|
|
2097
|
-
const { width:
|
|
2097
|
+
const { width: h, height: g } = o, { width: u, height: M } = d, m = n.calculateScaleFactor({
|
|
2098
2098
|
imageObject: d,
|
|
2099
|
-
scaleType:
|
|
2099
|
+
scaleType: r
|
|
2100
2100
|
});
|
|
2101
|
-
|
|
2101
|
+
r === "contain" && m < 1 || r === "cover" && (u > h || M > g) ? this.fitObject({ object: d, withoutSave: !0, fitAsOneObject: !0 }) : d.set({ scaleX: 1, scaleY: 1 });
|
|
2102
2102
|
}
|
|
2103
2103
|
d.set({ flipX: !1, flipY: !1, angle: 0 }), a.centerObject(d), a.renderAll(), i.resumeHistory(), s || i.saveState(), a.fire("editor:object-reset", {
|
|
2104
2104
|
object: d,
|
|
@@ -2107,7 +2107,7 @@ class lt {
|
|
|
2107
2107
|
});
|
|
2108
2108
|
}
|
|
2109
2109
|
}
|
|
2110
|
-
class
|
|
2110
|
+
class gt {
|
|
2111
2111
|
constructor({ editor: e }) {
|
|
2112
2112
|
this.editor = e, this.isBlocked = !1, this.overlayMask = null, this._createOverlay();
|
|
2113
2113
|
}
|
|
@@ -2282,7 +2282,7 @@ class x {
|
|
|
2282
2282
|
endColor: o,
|
|
2283
2283
|
startPosition: n,
|
|
2284
2284
|
endPosition: i,
|
|
2285
|
-
customData:
|
|
2285
|
+
customData: r = {},
|
|
2286
2286
|
withoutSave: d = !1
|
|
2287
2287
|
}) {
|
|
2288
2288
|
this.setGradientBackground({
|
|
@@ -2296,7 +2296,7 @@ class x {
|
|
|
2296
2296
|
startPosition: n,
|
|
2297
2297
|
endPosition: i
|
|
2298
2298
|
},
|
|
2299
|
-
customData:
|
|
2299
|
+
customData: r,
|
|
2300
2300
|
withoutSave: d
|
|
2301
2301
|
});
|
|
2302
2302
|
}
|
|
@@ -2307,7 +2307,7 @@ class x {
|
|
|
2307
2307
|
* @param options.withoutSave - Если true, не сохранять состояние в историю
|
|
2308
2308
|
*/
|
|
2309
2309
|
setImageBackground(a) {
|
|
2310
|
-
return
|
|
2310
|
+
return p(this, arguments, function* ({
|
|
2311
2311
|
imageSource: e,
|
|
2312
2312
|
customData: t = {},
|
|
2313
2313
|
withoutSave: s = !1
|
|
@@ -2400,7 +2400,7 @@ class x {
|
|
|
2400
2400
|
* @param source - источник изображения (URL или File)
|
|
2401
2401
|
*/
|
|
2402
2402
|
_createImageBackground(e, t) {
|
|
2403
|
-
return
|
|
2403
|
+
return p(this, null, function* () {
|
|
2404
2404
|
var a;
|
|
2405
2405
|
const { image: s } = (a = yield this.editor.imageManager.importImage({
|
|
2406
2406
|
source: e,
|
|
@@ -2444,8 +2444,8 @@ class x {
|
|
|
2444
2444
|
{ offset: o / 100, color: s }
|
|
2445
2445
|
];
|
|
2446
2446
|
if (e.type === "linear") {
|
|
2447
|
-
const
|
|
2448
|
-
return new
|
|
2447
|
+
const h = e.angle * Math.PI / 180, g = x._angleToCoords(h);
|
|
2448
|
+
return new me({
|
|
2449
2449
|
type: "linear",
|
|
2450
2450
|
gradientUnits: "percentage",
|
|
2451
2451
|
coords: g,
|
|
@@ -2454,20 +2454,20 @@ class x {
|
|
|
2454
2454
|
}
|
|
2455
2455
|
const {
|
|
2456
2456
|
centerX: i = 50,
|
|
2457
|
-
centerY:
|
|
2457
|
+
centerY: r = 50,
|
|
2458
2458
|
radius: d = 50
|
|
2459
|
-
} = e,
|
|
2459
|
+
} = e, l = {
|
|
2460
2460
|
x1: i / 100,
|
|
2461
|
-
y1:
|
|
2461
|
+
y1: r / 100,
|
|
2462
2462
|
x2: i / 100,
|
|
2463
|
-
y2:
|
|
2463
|
+
y2: r / 100,
|
|
2464
2464
|
r1: 0,
|
|
2465
2465
|
r2: d / 100
|
|
2466
2466
|
};
|
|
2467
|
-
return new
|
|
2467
|
+
return new me({
|
|
2468
2468
|
type: "radial",
|
|
2469
2469
|
gradientUnits: "percentage",
|
|
2470
|
-
coords:
|
|
2470
|
+
coords: l,
|
|
2471
2471
|
colorStops: n
|
|
2472
2472
|
});
|
|
2473
2473
|
}
|
|
@@ -2494,8 +2494,8 @@ class x {
|
|
|
2494
2494
|
if (!e || !t || e.type !== t.type) return !1;
|
|
2495
2495
|
const s = e.colorStops || [], a = t.colorStops || [];
|
|
2496
2496
|
return s.length !== a.length || !s.every((n, i) => {
|
|
2497
|
-
const
|
|
2498
|
-
return n.color ===
|
|
2497
|
+
const r = a[i];
|
|
2498
|
+
return n.color === r.color && Math.abs(n.offset - r.offset) < 1e-4;
|
|
2499
2499
|
}) ? !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
2500
|
}
|
|
2501
2501
|
}
|
|
@@ -2553,16 +2553,16 @@ class K {
|
|
|
2553
2553
|
backgroundManager: { backgroundObject: i }
|
|
2554
2554
|
} = this.editor;
|
|
2555
2555
|
o.suspendHistory();
|
|
2556
|
-
const
|
|
2557
|
-
if (
|
|
2558
|
-
if (
|
|
2559
|
-
const d =
|
|
2560
|
-
for (let
|
|
2561
|
-
s.sendObjectToBack(d[
|
|
2556
|
+
const r = e || s.getActiveObject();
|
|
2557
|
+
if (r) {
|
|
2558
|
+
if (r instanceof v) {
|
|
2559
|
+
const d = r.getObjects();
|
|
2560
|
+
for (let l = d.length - 1; l >= 0; l -= 1)
|
|
2561
|
+
s.sendObjectToBack(d[l]);
|
|
2562
2562
|
} else
|
|
2563
|
-
s.sendObjectToBack(
|
|
2563
|
+
s.sendObjectToBack(r);
|
|
2564
2564
|
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", {
|
|
2565
|
-
object:
|
|
2565
|
+
object: r,
|
|
2566
2566
|
withoutSave: t
|
|
2567
2567
|
});
|
|
2568
2568
|
}
|
|
@@ -2582,9 +2582,9 @@ class K {
|
|
|
2582
2582
|
backgroundManager: { backgroundObject: i }
|
|
2583
2583
|
} = this.editor;
|
|
2584
2584
|
o.suspendHistory();
|
|
2585
|
-
const
|
|
2586
|
-
|
|
2587
|
-
object:
|
|
2585
|
+
const r = e || s.getActiveObject();
|
|
2586
|
+
r && (r instanceof v ? K._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
|
+
object: r,
|
|
2588
2588
|
withoutSave: t
|
|
2589
2589
|
}));
|
|
2590
2590
|
}
|
|
@@ -2597,13 +2597,13 @@ class K {
|
|
|
2597
2597
|
static _moveSelectionForward(e, t) {
|
|
2598
2598
|
const s = e.getObjects(), a = t.getObjects();
|
|
2599
2599
|
if (!a.some((i) => {
|
|
2600
|
-
const
|
|
2601
|
-
for (let d =
|
|
2600
|
+
const r = s.indexOf(i);
|
|
2601
|
+
for (let d = r + 1; d < s.length; d += 1)
|
|
2602
2602
|
if (!a.includes(s[d]))
|
|
2603
2603
|
return !0;
|
|
2604
2604
|
return !1;
|
|
2605
2605
|
})) return;
|
|
2606
|
-
a.map((i) => ({ obj: i, index: s.indexOf(i) })).sort((i,
|
|
2606
|
+
a.map((i) => ({ obj: i, index: s.indexOf(i) })).sort((i, r) => r.index - i.index).forEach((i) => {
|
|
2607
2607
|
e.bringObjectForward(i.obj);
|
|
2608
2608
|
});
|
|
2609
2609
|
}
|
|
@@ -2616,18 +2616,18 @@ class K {
|
|
|
2616
2616
|
static _moveSelectionBackwards(e, t) {
|
|
2617
2617
|
const s = e.getObjects(), a = t.getObjects();
|
|
2618
2618
|
if (!a.some((i) => {
|
|
2619
|
-
const
|
|
2620
|
-
for (let d =
|
|
2619
|
+
const r = s.indexOf(i);
|
|
2620
|
+
for (let d = r - 1; d >= 0; d -= 1)
|
|
2621
2621
|
if (!a.includes(s[d]))
|
|
2622
2622
|
return !0;
|
|
2623
2623
|
return !1;
|
|
2624
2624
|
})) return;
|
|
2625
|
-
a.map((i) => ({ obj: i, index: s.indexOf(i) })).sort((i,
|
|
2625
|
+
a.map((i) => ({ obj: i, index: s.indexOf(i) })).sort((i, r) => i.index - r.index).forEach((i) => {
|
|
2626
2626
|
e.sendObjectBackwards(i.obj);
|
|
2627
2627
|
});
|
|
2628
2628
|
}
|
|
2629
2629
|
}
|
|
2630
|
-
class
|
|
2630
|
+
class ut {
|
|
2631
2631
|
/**
|
|
2632
2632
|
* Менеджер фигур для редактора.
|
|
2633
2633
|
* @param options - Опции и настройки менеджера фигур.
|
|
@@ -2651,15 +2651,15 @@ class gt {
|
|
|
2651
2651
|
* @param flags.withoutSelection - Не выделять объект
|
|
2652
2652
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2653
2653
|
*/
|
|
2654
|
-
addRectangle(
|
|
2655
|
-
var
|
|
2654
|
+
addRectangle(l = {}, { withoutSelection: r, withoutAdding: d } = {}) {
|
|
2655
|
+
var h = l, {
|
|
2656
2656
|
id: e = `rect-${A()}`,
|
|
2657
2657
|
left: t,
|
|
2658
2658
|
top: s,
|
|
2659
2659
|
width: a = 100,
|
|
2660
2660
|
height: o = 100,
|
|
2661
2661
|
fill: n = "blue"
|
|
2662
|
-
} =
|
|
2662
|
+
} = h, i = F(h, [
|
|
2663
2663
|
"id",
|
|
2664
2664
|
"left",
|
|
2665
2665
|
"top",
|
|
@@ -2667,7 +2667,7 @@ class gt {
|
|
|
2667
2667
|
"height",
|
|
2668
2668
|
"fill"
|
|
2669
2669
|
]);
|
|
2670
|
-
const { canvas: g } = this.editor, u = new
|
|
2670
|
+
const { canvas: g } = this.editor, u = new Le(I({
|
|
2671
2671
|
id: e,
|
|
2672
2672
|
left: t,
|
|
2673
2673
|
top: s,
|
|
@@ -2675,7 +2675,7 @@ class gt {
|
|
|
2675
2675
|
height: o,
|
|
2676
2676
|
fill: n
|
|
2677
2677
|
}, i));
|
|
2678
|
-
return !t && !s && g.centerObject(u), d || (g.add(u),
|
|
2678
|
+
return !t && !s && g.centerObject(u), d || (g.add(u), r || g.setActiveObject(u), g.renderAll()), u;
|
|
2679
2679
|
}
|
|
2680
2680
|
/**
|
|
2681
2681
|
* Добавление круга
|
|
@@ -2693,28 +2693,28 @@ class gt {
|
|
|
2693
2693
|
* @param flags.withoutSelection - Не выделять объект
|
|
2694
2694
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2695
2695
|
*/
|
|
2696
|
-
addCircle(d = {}, { withoutSelection: i, withoutAdding:
|
|
2697
|
-
var
|
|
2696
|
+
addCircle(d = {}, { withoutSelection: i, withoutAdding: r } = {}) {
|
|
2697
|
+
var l = d, {
|
|
2698
2698
|
id: e = `circle-${A()}`,
|
|
2699
2699
|
left: t,
|
|
2700
2700
|
top: s,
|
|
2701
2701
|
radius: a = 50,
|
|
2702
2702
|
fill: o = "green"
|
|
2703
|
-
} =
|
|
2703
|
+
} = l, n = F(l, [
|
|
2704
2704
|
"id",
|
|
2705
2705
|
"left",
|
|
2706
2706
|
"top",
|
|
2707
2707
|
"radius",
|
|
2708
2708
|
"fill"
|
|
2709
2709
|
]);
|
|
2710
|
-
const { canvas:
|
|
2710
|
+
const { canvas: h } = this.editor, g = new we(I({
|
|
2711
2711
|
id: e,
|
|
2712
2712
|
left: t,
|
|
2713
2713
|
top: s,
|
|
2714
2714
|
fill: o,
|
|
2715
2715
|
radius: a
|
|
2716
2716
|
}, n));
|
|
2717
|
-
return !t && !s &&
|
|
2717
|
+
return !t && !s && h.centerObject(g), r || (h.add(g), i || h.setActiveObject(g), h.renderAll()), g;
|
|
2718
2718
|
}
|
|
2719
2719
|
/**
|
|
2720
2720
|
* Добавление треугольника
|
|
@@ -2733,15 +2733,15 @@ class gt {
|
|
|
2733
2733
|
* @param flags.withoutSelection - Не выделять объект
|
|
2734
2734
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2735
2735
|
*/
|
|
2736
|
-
addTriangle(
|
|
2737
|
-
var
|
|
2736
|
+
addTriangle(l = {}, { withoutSelection: r, withoutAdding: d } = {}) {
|
|
2737
|
+
var h = l, {
|
|
2738
2738
|
id: e = `triangle-${A()}`,
|
|
2739
2739
|
left: t,
|
|
2740
2740
|
top: s,
|
|
2741
2741
|
width: a = 100,
|
|
2742
2742
|
height: o = 100,
|
|
2743
2743
|
fill: n = "yellow"
|
|
2744
|
-
} =
|
|
2744
|
+
} = h, i = F(h, [
|
|
2745
2745
|
"id",
|
|
2746
2746
|
"left",
|
|
2747
2747
|
"top",
|
|
@@ -2749,7 +2749,7 @@ class gt {
|
|
|
2749
2749
|
"height",
|
|
2750
2750
|
"fill"
|
|
2751
2751
|
]);
|
|
2752
|
-
const { canvas: g } = this.editor, u = new
|
|
2752
|
+
const { canvas: g } = this.editor, u = new Te(I({
|
|
2753
2753
|
id: e,
|
|
2754
2754
|
left: t,
|
|
2755
2755
|
top: s,
|
|
@@ -2757,10 +2757,10 @@ class gt {
|
|
|
2757
2757
|
width: a,
|
|
2758
2758
|
height: o
|
|
2759
2759
|
}, i));
|
|
2760
|
-
return !t && !s && g.centerObject(u), d || (g.add(u),
|
|
2760
|
+
return !t && !s && g.centerObject(u), d || (g.add(u), r || g.setActiveObject(u), g.renderAll()), u;
|
|
2761
2761
|
}
|
|
2762
2762
|
}
|
|
2763
|
-
class
|
|
2763
|
+
class ft {
|
|
2764
2764
|
/**
|
|
2765
2765
|
* @param options
|
|
2766
2766
|
* @param options.editor - экземпляр редактора с доступом к canvas
|
|
@@ -2788,7 +2788,7 @@ class ut {
|
|
|
2788
2788
|
* Асинхронное клонирование для внутреннего буфера
|
|
2789
2789
|
*/
|
|
2790
2790
|
_cloneToInternalClipboard(e) {
|
|
2791
|
-
return
|
|
2791
|
+
return p(this, null, function* () {
|
|
2792
2792
|
const { canvas: t, errorManager: s } = this.editor;
|
|
2793
2793
|
try {
|
|
2794
2794
|
const a = yield e.clone(["format"]);
|
|
@@ -2808,7 +2808,7 @@ class ut {
|
|
|
2808
2808
|
* Копирование в системный буфер обмена
|
|
2809
2809
|
*/
|
|
2810
2810
|
_copyToSystemClipboard(e) {
|
|
2811
|
-
return
|
|
2811
|
+
return p(this, null, function* () {
|
|
2812
2812
|
const { errorManager: t } = this.editor;
|
|
2813
2813
|
if (typeof ClipboardItem == "undefined" || !navigator.clipboard)
|
|
2814
2814
|
return t.emitWarning({
|
|
@@ -2835,13 +2835,13 @@ class ut {
|
|
|
2835
2835
|
* Копирование изображения в буфер обмена
|
|
2836
2836
|
*/
|
|
2837
2837
|
_copyImageToClipboard(e, t) {
|
|
2838
|
-
return
|
|
2838
|
+
return p(this, null, function* () {
|
|
2839
2839
|
try {
|
|
2840
|
-
const a = e.toCanvasElement({ enableRetinaScaling: !1 }).toDataURL(), o = a.slice(5).split(";")[0], n = a.split(",")[1], i = atob(n),
|
|
2841
|
-
for (let
|
|
2842
|
-
|
|
2843
|
-
const d = new Blob([
|
|
2844
|
-
return yield navigator.clipboard.write([
|
|
2840
|
+
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 h = 0; h < i.length; h += 1)
|
|
2842
|
+
r[h] = i.charCodeAt(h);
|
|
2843
|
+
const d = new Blob([r.buffer], { type: o }), l = new ClipboardItem({ [o]: d });
|
|
2844
|
+
return yield navigator.clipboard.write([l]), console.info("Image copied to clipboard successfully"), !0;
|
|
2845
2845
|
} catch (s) {
|
|
2846
2846
|
return this.editor.errorManager.emitWarning({
|
|
2847
2847
|
origin: "ClipboardManager",
|
|
@@ -2857,9 +2857,9 @@ class ut {
|
|
|
2857
2857
|
* Копирование текста в буфер обмена
|
|
2858
2858
|
*/
|
|
2859
2859
|
_copyTextToClipboard(e) {
|
|
2860
|
-
return
|
|
2860
|
+
return p(this, null, function* () {
|
|
2861
2861
|
try {
|
|
2862
|
-
const t = `${
|
|
2862
|
+
const t = `${pe}${e}`;
|
|
2863
2863
|
return yield navigator.clipboard.writeText(t), console.info("Text copied to clipboard successfully"), !0;
|
|
2864
2864
|
} catch (t) {
|
|
2865
2865
|
const { errorManager: s } = this.editor;
|
|
@@ -2892,7 +2892,7 @@ class ut {
|
|
|
2892
2892
|
* @param source - источник изображения (data URL или URL)
|
|
2893
2893
|
*/
|
|
2894
2894
|
_handleImageImport(e) {
|
|
2895
|
-
return
|
|
2895
|
+
return p(this, null, function* () {
|
|
2896
2896
|
var s;
|
|
2897
2897
|
const { image: t } = (s = yield this.editor.imageManager.importImage({
|
|
2898
2898
|
source: e,
|
|
@@ -2908,7 +2908,7 @@ class ut {
|
|
|
2908
2908
|
* @fires editor:object-pasted
|
|
2909
2909
|
*/
|
|
2910
2910
|
copyPaste(e) {
|
|
2911
|
-
return
|
|
2911
|
+
return p(this, null, function* () {
|
|
2912
2912
|
const { canvas: t } = this.editor, s = e || t.getActiveObject();
|
|
2913
2913
|
if (!s || s.locked) return !1;
|
|
2914
2914
|
try {
|
|
@@ -2938,28 +2938,28 @@ class ut {
|
|
|
2938
2938
|
* @param event.clipboardData.items — элементы буфера обмена
|
|
2939
2939
|
*/
|
|
2940
2940
|
handlePasteEvent(t) {
|
|
2941
|
-
return
|
|
2942
|
-
var
|
|
2943
|
-
if (!((
|
|
2941
|
+
return p(this, arguments, function* ({ clipboardData: e }) {
|
|
2942
|
+
var r;
|
|
2943
|
+
if (!((r = e == null ? void 0 : e.items) != null && r.length)) {
|
|
2944
2944
|
this.paste();
|
|
2945
2945
|
return;
|
|
2946
2946
|
}
|
|
2947
2947
|
const s = e.getData("text/plain");
|
|
2948
|
-
if (s && s.startsWith(
|
|
2948
|
+
if (s && s.startsWith(pe)) {
|
|
2949
2949
|
this.paste();
|
|
2950
2950
|
return;
|
|
2951
2951
|
}
|
|
2952
2952
|
const { items: a } = e, o = a[a.length - 1], n = o.getAsFile();
|
|
2953
2953
|
if (o.type !== "text/html" && n) {
|
|
2954
2954
|
const d = new FileReader();
|
|
2955
|
-
d.onload = (
|
|
2956
|
-
|
|
2955
|
+
d.onload = (l) => {
|
|
2956
|
+
l.target && this._handleImageImport(l.target.result).catch((h) => {
|
|
2957
2957
|
this.editor.errorManager.emitError({
|
|
2958
2958
|
origin: "ClipboardManager",
|
|
2959
2959
|
method: "handlePasteEvent",
|
|
2960
2960
|
code: "PASTE_IMAGE_FAILED",
|
|
2961
2961
|
message: "Ошибка вставки изображения из буфера обмена",
|
|
2962
|
-
data:
|
|
2962
|
+
data: h
|
|
2963
2963
|
});
|
|
2964
2964
|
});
|
|
2965
2965
|
}, d.readAsDataURL(n);
|
|
@@ -2967,9 +2967,9 @@ class ut {
|
|
|
2967
2967
|
}
|
|
2968
2968
|
const i = e.getData("text/html");
|
|
2969
2969
|
if (i) {
|
|
2970
|
-
const
|
|
2971
|
-
if (
|
|
2972
|
-
this._handleImageImport(
|
|
2970
|
+
const h = new DOMParser().parseFromString(i, "text/html").querySelector("img");
|
|
2971
|
+
if (h != null && h.src) {
|
|
2972
|
+
this._handleImageImport(h.src).catch((g) => {
|
|
2973
2973
|
this.editor.errorManager.emitError({
|
|
2974
2974
|
origin: "ClipboardManager",
|
|
2975
2975
|
method: "handlePasteEvent",
|
|
@@ -2989,7 +2989,7 @@ class ut {
|
|
|
2989
2989
|
* @fires editor:object-pasted
|
|
2990
2990
|
*/
|
|
2991
2991
|
paste() {
|
|
2992
|
-
return
|
|
2992
|
+
return p(this, null, function* () {
|
|
2993
2993
|
const { canvas: e } = this.editor;
|
|
2994
2994
|
if (!this.clipboard) return !1;
|
|
2995
2995
|
try {
|
|
@@ -3077,7 +3077,7 @@ class $ {
|
|
|
3077
3077
|
return e instanceof v || e instanceof ee;
|
|
3078
3078
|
}
|
|
3079
3079
|
}
|
|
3080
|
-
class
|
|
3080
|
+
class Mt {
|
|
3081
3081
|
constructor({ editor: e }) {
|
|
3082
3082
|
this.editor = e;
|
|
3083
3083
|
}
|
|
@@ -3097,7 +3097,7 @@ class ft {
|
|
|
3097
3097
|
const o = e || s.getActiveObject();
|
|
3098
3098
|
if (!o || !(o instanceof v)) return;
|
|
3099
3099
|
const n = o.getObjects(), i = new ee(n);
|
|
3100
|
-
n.forEach((
|
|
3100
|
+
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
3101
|
object: o,
|
|
3102
3102
|
group: i,
|
|
3103
3103
|
withoutSave: t
|
|
@@ -3108,29 +3108,32 @@ class ft {
|
|
|
3108
3108
|
* @param options
|
|
3109
3109
|
* @param options.object - объект для разгруппировки
|
|
3110
3110
|
* @param options.withoutSave - Не сохранять состояние
|
|
3111
|
+
* @returns данные о разгруппировке или null, если объект не является группой
|
|
3111
3112
|
* @fires editor:objects-ungrouped
|
|
3112
3113
|
*/
|
|
3113
3114
|
ungroup({
|
|
3114
3115
|
object: e,
|
|
3115
3116
|
withoutSave: t
|
|
3116
3117
|
} = {}) {
|
|
3117
|
-
const { canvas: s, historyManager: a } = this.editor;
|
|
3118
|
+
const { canvas: s, historyManager: a } = this.editor, o = e || s.getActiveObject();
|
|
3119
|
+
if (!(o instanceof ee)) return null;
|
|
3118
3120
|
a.suspendHistory();
|
|
3119
|
-
const o = e || s.getActiveObject();
|
|
3120
|
-
if (!(o instanceof ee)) return;
|
|
3121
3121
|
const n = o.removeAll();
|
|
3122
|
-
s.remove(o), n.forEach((
|
|
3122
|
+
s.remove(o), n.forEach((d) => s.add(d));
|
|
3123
3123
|
const i = new v(n, {
|
|
3124
3124
|
canvas: s
|
|
3125
3125
|
});
|
|
3126
|
-
s.setActiveObject(i), s.renderAll(), a.resumeHistory(), t || a.saveState()
|
|
3126
|
+
s.setActiveObject(i), s.renderAll(), a.resumeHistory(), t || a.saveState();
|
|
3127
|
+
const r = {
|
|
3127
3128
|
object: o,
|
|
3128
3129
|
selection: i,
|
|
3130
|
+
ungroupedObjects: n,
|
|
3129
3131
|
withoutSave: t
|
|
3130
|
-
}
|
|
3132
|
+
};
|
|
3133
|
+
return s.fire("editor:objects-ungrouped", r), r;
|
|
3131
3134
|
}
|
|
3132
3135
|
}
|
|
3133
|
-
class
|
|
3136
|
+
class mt {
|
|
3134
3137
|
constructor({ editor: e }) {
|
|
3135
3138
|
this.editor = e;
|
|
3136
3139
|
}
|
|
@@ -3145,32 +3148,66 @@ class Mt {
|
|
|
3145
3148
|
o && s.lockObject({ object: n, skipInnerObjects: !0, withoutSave: !0 }), e.setActiveObject(n), e.requestRenderAll(), e.fire("editor:all-objects-selected", { selected: n });
|
|
3146
3149
|
}
|
|
3147
3150
|
}
|
|
3148
|
-
class
|
|
3151
|
+
class ce {
|
|
3149
3152
|
constructor({ editor: e }) {
|
|
3150
3153
|
this.editor = e;
|
|
3151
3154
|
}
|
|
3155
|
+
/**
|
|
3156
|
+
* Проверяет, является ли объект разгруппируемой группой
|
|
3157
|
+
* @param obj - объект для проверки
|
|
3158
|
+
* @returns true, если объект является группой и не является SVG
|
|
3159
|
+
*/
|
|
3160
|
+
static _isUngroupableGroup(e) {
|
|
3161
|
+
return e.type === "group" && e.format !== "svg";
|
|
3162
|
+
}
|
|
3163
|
+
/**
|
|
3164
|
+
* Обрабатывает удаление группы: разгруппировывает и рекурсивно удаляет объекты
|
|
3165
|
+
* @param group - группа для обработки
|
|
3166
|
+
* @returns массив всех удаленных объектов (включая саму группу)
|
|
3167
|
+
*/
|
|
3168
|
+
_handleGroupDeletion(e) {
|
|
3169
|
+
var a;
|
|
3170
|
+
const { groupingManager: t } = this.editor, { ungroupedObjects: s = [] } = (a = t.ungroup({
|
|
3171
|
+
object: e,
|
|
3172
|
+
withoutSave: !0
|
|
3173
|
+
})) != null ? a : {};
|
|
3174
|
+
return this.deleteSelectedObjects({
|
|
3175
|
+
objects: s,
|
|
3176
|
+
withoutSave: !0,
|
|
3177
|
+
_isRecursiveCall: !0
|
|
3178
|
+
}), [e, ...s];
|
|
3179
|
+
}
|
|
3152
3180
|
/**
|
|
3153
3181
|
* Удалить выбранные объекты
|
|
3154
3182
|
* @param options
|
|
3155
3183
|
* @param options.objects - массив объектов для удаления
|
|
3156
3184
|
* @param options.withoutSave - Не сохранять состояние
|
|
3185
|
+
* @param options._isRecursiveCall - Внутренний параметр для рекурсивных вызовов
|
|
3157
3186
|
* @fires editor:objects-deleted
|
|
3158
3187
|
*/
|
|
3159
3188
|
deleteSelectedObjects({
|
|
3160
3189
|
objects: e,
|
|
3161
|
-
withoutSave: t
|
|
3190
|
+
withoutSave: t = !1,
|
|
3191
|
+
_isRecursiveCall: s = !1
|
|
3162
3192
|
} = {}) {
|
|
3163
|
-
const { canvas:
|
|
3164
|
-
|
|
3165
|
-
|
|
3166
|
-
|
|
3193
|
+
const { canvas: a, historyManager: o } = this.editor, i = (e || a.getActiveObjects()).filter((l) => !l.locked);
|
|
3194
|
+
if (!(i != null && i.length)) return null;
|
|
3195
|
+
s || o.suspendHistory();
|
|
3196
|
+
const r = [];
|
|
3197
|
+
if (i.forEach((l) => {
|
|
3198
|
+
if (ce._isUngroupableGroup(l)) {
|
|
3199
|
+
const h = this._handleGroupDeletion(l);
|
|
3200
|
+
r.push(...h);
|
|
3167
3201
|
return;
|
|
3168
3202
|
}
|
|
3169
|
-
|
|
3170
|
-
}), s
|
|
3171
|
-
|
|
3203
|
+
a.remove(l), r.push(l);
|
|
3204
|
+
}), s) return null;
|
|
3205
|
+
a.discardActiveObject(), a.renderAll(), o.resumeHistory(), t || o.saveState();
|
|
3206
|
+
const d = {
|
|
3207
|
+
objects: r,
|
|
3172
3208
|
withoutSave: t
|
|
3173
|
-
}
|
|
3209
|
+
};
|
|
3210
|
+
return a.fire("editor:objects-deleted", d), d;
|
|
3174
3211
|
}
|
|
3175
3212
|
}
|
|
3176
3213
|
const bt = {
|
|
@@ -3354,7 +3391,7 @@ class J {
|
|
|
3354
3391
|
return e ? Object.values(bt).some((t) => Object.values(t).includes(e)) : !1;
|
|
3355
3392
|
}
|
|
3356
3393
|
}
|
|
3357
|
-
class
|
|
3394
|
+
class de {
|
|
3358
3395
|
/**
|
|
3359
3396
|
* Конструктор класса ImageEditor.
|
|
3360
3397
|
* @param canvasId - идентификатор канваса, в котором будет создан редактор
|
|
@@ -3369,7 +3406,7 @@ class ce {
|
|
|
3369
3406
|
* @fires editor:ready
|
|
3370
3407
|
*/
|
|
3371
3408
|
init() {
|
|
3372
|
-
return
|
|
3409
|
+
return p(this, null, function* () {
|
|
3373
3410
|
const {
|
|
3374
3411
|
editorContainerWidth: e,
|
|
3375
3412
|
editorContainerHeight: t,
|
|
@@ -3378,20 +3415,20 @@ class ce {
|
|
|
3378
3415
|
canvasCSSWidth: o,
|
|
3379
3416
|
canvasCSSHeight: n,
|
|
3380
3417
|
initialImage: i,
|
|
3381
|
-
initialStateJSON:
|
|
3418
|
+
initialStateJSON: r,
|
|
3382
3419
|
scaleType: d,
|
|
3383
|
-
_onReadyCallback:
|
|
3420
|
+
_onReadyCallback: l
|
|
3384
3421
|
} = this.options;
|
|
3385
|
-
if (
|
|
3422
|
+
if (Xe.apply(), this.canvas = new ke(this.containerId, this.options), this.moduleLoader = new Ue(), this.workerManager = new He(), this.errorManager = new J({ editor: this }), this.historyManager = new Q({ editor: this }), this.toolbar = new at({ editor: this }), this.transformManager = new ht({ editor: this }), this.canvasManager = new lt({ editor: this }), this.imageManager = new O({ editor: this }), this.layerManager = new K({ editor: this }), this.shapeManager = new ut({ editor: this }), this.interactionBlocker = new gt({ editor: this }), this.backgroundManager = new x({ editor: this }), this.clipboardManager = new ft({ editor: this }), this.objectLockManager = new $({ editor: this }), this.groupingManager = new Mt({ editor: this }), this.selectionManager = new mt({ editor: this }), this.deletionManager = new ce({ editor: this }), this._createMontageArea(), this._createClippingArea(), this.listeners = new Y({ 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) {
|
|
3386
3423
|
const {
|
|
3387
|
-
source:
|
|
3424
|
+
source: h,
|
|
3388
3425
|
scale: g = `image-${d}`,
|
|
3389
3426
|
withoutSave: u = !0
|
|
3390
3427
|
} = i;
|
|
3391
|
-
yield this.imageManager.importImage({ source:
|
|
3428
|
+
yield this.imageManager.importImage({ source: h, scale: g, withoutSave: u });
|
|
3392
3429
|
} else
|
|
3393
3430
|
this.canvasManager.setDefaultScale({ withoutSave: !0 });
|
|
3394
|
-
|
|
3431
|
+
r && this.historyManager.loadStateFromFullState(r), this.historyManager.saveState(), console.log("editor:ready"), this.canvas.fire("editor:ready", this), typeof l == "function" && l(this);
|
|
3395
3432
|
});
|
|
3396
3433
|
}
|
|
3397
3434
|
/**
|
|
@@ -3405,7 +3442,7 @@ class ce {
|
|
|
3405
3442
|
this.montageArea = this.shapeManager.addRectangle({
|
|
3406
3443
|
width: e,
|
|
3407
3444
|
height: t,
|
|
3408
|
-
fill:
|
|
3445
|
+
fill: de._createMosaicPattern(),
|
|
3409
3446
|
stroke: null,
|
|
3410
3447
|
strokeWidth: 0,
|
|
3411
3448
|
selectable: !1,
|
|
@@ -3455,7 +3492,7 @@ class ce {
|
|
|
3455
3492
|
const e = document.createElement("canvas");
|
|
3456
3493
|
e.width = 20, e.height = 20;
|
|
3457
3494
|
const t = e.getContext("2d");
|
|
3458
|
-
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
|
|
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 Be({
|
|
3459
3496
|
source: e,
|
|
3460
3497
|
repeat: "repeat"
|
|
3461
3498
|
});
|
|
@@ -3550,15 +3587,15 @@ const jt = {
|
|
|
3550
3587
|
resetObjectFitByDoubleClick: !0,
|
|
3551
3588
|
keyboardIgnoreSelectors: []
|
|
3552
3589
|
};
|
|
3553
|
-
function St(
|
|
3554
|
-
const t = I(I({}, jt), e), s = document.getElementById(
|
|
3590
|
+
function St(c, e = {}) {
|
|
3591
|
+
const t = I(I({}, jt), e), s = document.getElementById(c);
|
|
3555
3592
|
if (!s)
|
|
3556
|
-
return Promise.reject(new Error(`Контейнер с ID "${
|
|
3593
|
+
return Promise.reject(new Error(`Контейнер с ID "${c}" не найден.`));
|
|
3557
3594
|
const a = document.createElement("canvas");
|
|
3558
|
-
return a.id = `${
|
|
3595
|
+
return a.id = `${c}-canvas`, s.appendChild(a), t.editorContainer = s, new Promise((o) => {
|
|
3559
3596
|
t._onReadyCallback = o;
|
|
3560
|
-
const n = new
|
|
3561
|
-
window[
|
|
3597
|
+
const n = new de(a.id, t);
|
|
3598
|
+
window[c] = n;
|
|
3562
3599
|
});
|
|
3563
3600
|
}
|
|
3564
3601
|
export {
|