@anu3ev/fabric-image-editor 0.1.44 → 0.1.45
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 +365 -394
- package/package.json +2 -1
package/dist/main.js
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
var me = (o, e, t) => e in o ?
|
|
1
|
+
var Le = Object.defineProperty;
|
|
2
|
+
var X = Object.getOwnPropertySymbols;
|
|
3
|
+
var ve = Object.prototype.hasOwnProperty, fe = Object.prototype.propertyIsEnumerable;
|
|
4
|
+
var me = (o, e, t) => e in o ? Le(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t, C = (o, e) => {
|
|
5
5
|
for (var t in e || (e = {}))
|
|
6
|
-
|
|
7
|
-
if (
|
|
8
|
-
for (var t of
|
|
9
|
-
|
|
6
|
+
ve.call(e, t) && me(o, t, e[t]);
|
|
7
|
+
if (X)
|
|
8
|
+
for (var t of X(e))
|
|
9
|
+
fe.call(e, t) && me(o, t, e[t]);
|
|
10
10
|
return o;
|
|
11
11
|
};
|
|
12
|
-
var
|
|
12
|
+
var Q = (o, e) => {
|
|
13
13
|
var t = {};
|
|
14
14
|
for (var a in o)
|
|
15
|
-
|
|
16
|
-
if (o != null &&
|
|
17
|
-
for (var a of
|
|
18
|
-
e.indexOf(a) < 0 &&
|
|
15
|
+
ve.call(o, a) && e.indexOf(a) < 0 && (t[a] = o[a]);
|
|
16
|
+
if (o != null && X)
|
|
17
|
+
for (var a of X(o))
|
|
18
|
+
e.indexOf(a) < 0 && fe.call(o, a) && (t[a] = o[a]);
|
|
19
19
|
return t;
|
|
20
20
|
};
|
|
21
|
-
var
|
|
21
|
+
var O = (o, e, t) => new Promise((a, n) => {
|
|
22
22
|
var i = (c) => {
|
|
23
23
|
try {
|
|
24
24
|
r(t.next(c));
|
|
@@ -34,14 +34,15 @@ var Q = (o, e, t) => new Promise((a, n) => {
|
|
|
34
34
|
}, r = (c) => c.done ? a(c.value) : Promise.resolve(c.value).then(i, s);
|
|
35
35
|
r((t = t.apply(o, e)).next());
|
|
36
36
|
});
|
|
37
|
-
import { ActiveSelection as
|
|
38
|
-
import { create as
|
|
39
|
-
|
|
37
|
+
import { ActiveSelection as N, util as W, controlsUtils as we, InteractiveFabricObject as Oe, loadSVGFromURL as Te, FabricImage as ee, Point as K, Rect as ke, Circle as xe, Triangle as Be, Group as je, Canvas as Ze, Pattern as ze } from "fabric";
|
|
38
|
+
import { create as Ue } from "jsondiffpatch";
|
|
39
|
+
import Re from "diff-match-patch";
|
|
40
|
+
var _e = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", A = function() {
|
|
40
41
|
for (var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 21, t = "", a = crypto.getRandomValues(new Uint8Array(e |= 0)); e--; )
|
|
41
|
-
t +=
|
|
42
|
+
t += _e[a[e] & 63];
|
|
42
43
|
return t;
|
|
43
44
|
};
|
|
44
|
-
class
|
|
45
|
+
class P {
|
|
45
46
|
/**
|
|
46
47
|
* Конструктор принимает редактор и опции.
|
|
47
48
|
* @param {Object} params
|
|
@@ -58,7 +59,7 @@ class R {
|
|
|
58
59
|
* @param {Boolean} [params.options.resetObjectFitByDoubleClick] — сброс фита объекта по двойному клику
|
|
59
60
|
*/
|
|
60
61
|
constructor({ editor: e, options: t = {} }) {
|
|
61
|
-
this.isDragging = !1, this.lastMouseX = 0, this.lastMouseY = 0, this.isUndoRedoKeyPressed = !1, this.isSpacePressed = !1, 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 =
|
|
62
|
+
this.isDragging = !1, this.lastMouseX = 0, this.lastMouseY = 0, this.isUndoRedoKeyPressed = !1, this.isSpacePressed = !1, 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.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();
|
|
62
63
|
}
|
|
63
64
|
/**
|
|
64
65
|
* Инициализация всех обработчиков согласно опциям.
|
|
@@ -95,7 +96,7 @@ class R {
|
|
|
95
96
|
this.canvas.setActiveObject(n[0]);
|
|
96
97
|
return;
|
|
97
98
|
}
|
|
98
|
-
const i = new
|
|
99
|
+
const i = new N(n, {
|
|
99
100
|
canvas: this.canvas
|
|
100
101
|
});
|
|
101
102
|
this.canvas.setActiveObject(i), this.canvas.requestRenderAll();
|
|
@@ -157,7 +158,7 @@ class R {
|
|
|
157
158
|
* @param {String} event.code — код клавиши
|
|
158
159
|
*/
|
|
159
160
|
handleUndoRedoEvent(e) {
|
|
160
|
-
return
|
|
161
|
+
return O(this, null, function* () {
|
|
161
162
|
const { ctrlKey: t, metaKey: a, code: n, repeat: i } = e;
|
|
162
163
|
!t && !a || i || !/Mac/i.test(navigator.userAgent) && this.isUndoRedoKeyPressed || (n === "KeyZ" ? (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.undo()) : n === "KeyY" && (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.redo()));
|
|
163
164
|
});
|
|
@@ -303,7 +304,7 @@ class R {
|
|
|
303
304
|
};
|
|
304
305
|
}
|
|
305
306
|
}
|
|
306
|
-
class
|
|
307
|
+
class He {
|
|
307
308
|
/**
|
|
308
309
|
* @description Класс для динамической загрузки внешних модулей.
|
|
309
310
|
*/
|
|
@@ -321,7 +322,7 @@ class Re {
|
|
|
321
322
|
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 "'.concat(e, '"')));
|
|
322
323
|
}
|
|
323
324
|
}
|
|
324
|
-
class
|
|
325
|
+
class Ye {
|
|
325
326
|
/**
|
|
326
327
|
* @param {string|URL} [scriptUrl] — URL скрипта воркера.
|
|
327
328
|
* По-умолчанию использует файл рядом с этим модулем
|
|
@@ -380,26 +381,26 @@ class Pe {
|
|
|
380
381
|
this.worker.terminate();
|
|
381
382
|
}
|
|
382
383
|
}
|
|
383
|
-
const I = 12,
|
|
384
|
+
const I = 12, Pe = 2, te = 8, ae = 20, We = 100, ne = 20, ie = 8, Fe = 100, se = 32, re = 1, Ve = "#2B2D33", oe = "#3D8BF4", ce = "#FFFFFF";
|
|
384
385
|
function J(o, e, t, a, n) {
|
|
385
|
-
const i = I, s =
|
|
386
|
-
o.save(), o.translate(e, t), o.rotate(
|
|
386
|
+
const i = I, s = Pe;
|
|
387
|
+
o.save(), o.translate(e, t), o.rotate(W.degreesToRadians(n.angle)), o.fillStyle = ce, o.strokeStyle = oe, o.lineWidth = re, o.beginPath(), o.roundRect(-12 / 2, -12 / 2, i, i, s), o.fill(), o.stroke(), o.restore();
|
|
387
388
|
}
|
|
388
389
|
function ye(o, e, t, a, n) {
|
|
389
|
-
const i =
|
|
390
|
-
o.save(), o.translate(e, t), o.rotate(
|
|
390
|
+
const i = te, s = ae, r = We;
|
|
391
|
+
o.save(), o.translate(e, t), o.rotate(W.degreesToRadians(n.angle)), o.fillStyle = ce, o.strokeStyle = oe, o.lineWidth = re, o.beginPath(), o.roundRect(-8 / 2, -20 / 2, i, s, r), o.fill(), o.stroke(), o.restore();
|
|
391
392
|
}
|
|
392
393
|
function be(o, e, t, a, n) {
|
|
393
|
-
const i =
|
|
394
|
-
o.save(), o.translate(e, t), o.rotate(
|
|
394
|
+
const i = ne, s = ie, r = Fe;
|
|
395
|
+
o.save(), o.translate(e, t), o.rotate(W.degreesToRadians(n.angle)), o.fillStyle = ce, o.strokeStyle = oe, o.lineWidth = re, o.beginPath(), o.roundRect(-20 / 2, -8 / 2, i, s, r), o.fill(), o.stroke(), o.restore();
|
|
395
396
|
}
|
|
396
|
-
const
|
|
397
|
-
|
|
398
|
-
function
|
|
399
|
-
const s =
|
|
400
|
-
o.save(), o.translate(e, t), o.rotate(
|
|
397
|
+
const Ge = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", Se = new Image();
|
|
398
|
+
Se.src = Ge;
|
|
399
|
+
function Xe(o, e, t, a, n) {
|
|
400
|
+
const s = se / 2;
|
|
401
|
+
o.save(), o.translate(e, t), o.rotate(W.degreesToRadians(n.angle)), o.fillStyle = Ve, o.beginPath(), o.arc(0, 0, s, 0, 2 * Math.PI), o.fill(), o.drawImage(Se, -16 / 2, -16 / 2, s, s), o.restore();
|
|
401
402
|
}
|
|
402
|
-
const
|
|
403
|
+
const Qe = {
|
|
403
404
|
// Угловые точки
|
|
404
405
|
tl: {
|
|
405
406
|
render: J,
|
|
@@ -432,46 +433,46 @@ const Je = {
|
|
|
432
433
|
// Середина вертикалей
|
|
433
434
|
ml: {
|
|
434
435
|
render: ye,
|
|
435
|
-
sizeX:
|
|
436
|
-
sizeY:
|
|
436
|
+
sizeX: te,
|
|
437
|
+
sizeY: ae,
|
|
437
438
|
offsetX: 0,
|
|
438
439
|
offsetY: 0
|
|
439
440
|
},
|
|
440
441
|
mr: {
|
|
441
442
|
render: ye,
|
|
442
|
-
sizeX:
|
|
443
|
-
sizeY:
|
|
443
|
+
sizeX: te,
|
|
444
|
+
sizeY: ae,
|
|
444
445
|
offsetX: 0,
|
|
445
446
|
offsetY: 0
|
|
446
447
|
},
|
|
447
448
|
// Середина горизонталей
|
|
448
449
|
mt: {
|
|
449
450
|
render: be,
|
|
450
|
-
sizeX:
|
|
451
|
-
sizeY:
|
|
451
|
+
sizeX: ne,
|
|
452
|
+
sizeY: ie,
|
|
452
453
|
offsetX: 0,
|
|
453
454
|
offsetY: 0
|
|
454
455
|
},
|
|
455
456
|
mb: {
|
|
456
457
|
render: be,
|
|
457
|
-
sizeX:
|
|
458
|
-
sizeY:
|
|
458
|
+
sizeX: ne,
|
|
459
|
+
sizeY: ie,
|
|
459
460
|
offsetX: 0,
|
|
460
461
|
offsetY: 0
|
|
461
462
|
},
|
|
462
463
|
// Специальный «rotate» контрол
|
|
463
464
|
mtr: {
|
|
464
|
-
render:
|
|
465
|
-
sizeX:
|
|
466
|
-
sizeY:
|
|
465
|
+
render: Xe,
|
|
466
|
+
sizeX: se,
|
|
467
|
+
sizeY: se,
|
|
467
468
|
offsetX: 0,
|
|
468
469
|
offsetY: -32
|
|
469
470
|
}
|
|
470
471
|
};
|
|
471
|
-
class
|
|
472
|
+
class Je {
|
|
472
473
|
static apply() {
|
|
473
|
-
const e =
|
|
474
|
-
Object.entries(
|
|
474
|
+
const e = we.createObjectDefaultControls();
|
|
475
|
+
Object.entries(Qe).forEach(([t, a]) => {
|
|
475
476
|
Object.assign(e[t], {
|
|
476
477
|
render: a.render,
|
|
477
478
|
sizeX: a.sizeX,
|
|
@@ -482,10 +483,10 @@ class Ke {
|
|
|
482
483
|
var l;
|
|
483
484
|
(l = s.target.canvas) == null || l.setCursor("grabbing");
|
|
484
485
|
});
|
|
485
|
-
}),
|
|
486
|
+
}), Oe.ownDefaults.controls = e;
|
|
486
487
|
}
|
|
487
488
|
}
|
|
488
|
-
var
|
|
489
|
+
var Ke = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNi44NzUgMi41YS42MjUuNjI1IDAgMCAwLS42MjUuNjI0VjYuMjVIMy4xMjVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2MTBjMCAuMzQ1LjI4LjYyNS42MjUuNjI1aDEwYy4zNDUgMCAuNjI1LS4yOC42MjUtLjYyNXYtMy4xMjZoMy4xMjVjLjM0NSAwIC42MjUtLjI4LjYyNS0uNjI1di0xMGEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTEwWm02Ljg3NSAxMGgyLjVWMy43NUg3LjV2Mi41aDUuNjI1Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NS42MjRabS0xMCAzLjc1VjcuNWg4Ljc1djguNzVIMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", $e = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi41IDcuNWMwLS42OS41Ni0xLjI1IDEuMjUtMS4yNWgxMi41Yy42OSAwIDEuMjUuNTYgMS4yNSAxLjI1djguNzVjMCAuNjktLjU2IDEuMjUtMS4yNSAxLjI1SDMuNzVjLS42OSAwLTEuMjUtLjU2LTEuMjUtMS4yNVY3LjVabTEzLjc1IDBIMy43NXY4Ljc1aDEyLjVWNy41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMS44NzVhMi4xODggMi4xODggMCAwIDAtMi4xODggMi4xODh2Mi44MTJhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyYTMuNDM3IDMuNDM3IDAgMSAxIDYuODc1IDB2Mi44MTNhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyQTIuMTg4IDIuMTg4IDAgMCAwIDEwIDEuODc2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEwIDEyLjgxM2EuOTM3LjkzNyAwIDEgMCAwLTEuODc1LjkzNy45MzcgMCAwIDAgMCAxLjg3NFoiLz48L3N2Zz4=", qe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE2LjI1IDYuMjVINy41VjQuMzc1YTIuNSAyLjUgMCAwIDEgMi41LTIuNWMxLjIgMCAyLjI4MS44NiAyLjUxMiAyYS42MjUuNjI1IDAgMCAwIDEuMjI2LS4yNWMtLjM1NC0xLjczOC0xLjkyNS0zLTMuNzM4LTNhMy43NTQgMy43NTQgMCAwIDAtMy43NSAzLjc1VjYuMjVoLTIuNUExLjI1IDEuMjUgMCAwIDAgMi41IDcuNXY4Ljc1YTEuMjUgMS4yNSAwIDAgMCAxLjI1IDEuMjVoMTIuNWExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjcuNWExLjI1IDEuMjUgMCAwIDAtMS4yNS0xLjI1Wm0wIDEwSDMuNzVWNy41aDEyLjV2OC43NVptLTUuMzEzLTQuMzc1YS45MzcuOTM3IDAgMSAxLTEuODc0IDAgLjkzNy45MzcgMCAwIDEgMS44NzQgMFoiLz48L3N2Zz4K", et = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIuNSA4LjEyNSAxMCAxMi41bDcuNS00LjM3NUwxMCAzLjc1IDIuNSA4LjEyNVoiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjY4NSAzLjIxYS42MjUuNjI1IDAgMCAxIC42MyAwbDcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOGw3LjUtNC4zNzVaTTMuNzQgOC4xMjUgMTAgMTEuNzc2bDYuMjYtMy42NTFMMTAgNC40NzQgMy43NCA4LjEyNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA5LjQ2YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDExLjc3NmwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA5LjQ2Wm0tMS42NiAyLjQxNUwxMCAxNS41MjZsNi4yNi0zLjY1MS0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNi0xLjk3NSAxLjE1MVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", tt = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMy4yMWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDguMTI1IDEwIDExLjc3Nmw2LjI2LTMuNjUxTDEwIDQuNDc0IDMuNzQgOC4xMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjcxNCAxMCAxMCAxMi41bDQuMjg2LTIuNSAzLjIxNCAxLjg3NUwxMCAxNi4yNWwtNy41LTQuMzc1TDUuNzE0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDkuNDZhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgMTEuNzc2bDMuOTctMi4zMTZhLjYyNS42MjUgMCAwIDEgLjYzIDBsMy4yMTUgMS44NzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhMNS40IDkuNDZabS0xLjY2IDIuNDE1TDEwIDE1LjUyNmw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2LTEuOTc1IDEuMTUxWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", at = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTIuNSA2LjI1IDcuNSA0LjM3NSA3LjUtNC4zNzVMMTAgMS44NzUgMi41IDYuMjVaIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMS4zMzVhLjYyNS42MjUgMCAwIDEgLjYzIDBsNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4bDcuNS00LjM3NVpNMy43NCA2LjI1IDEwIDkuOTAxbDYuMjYtMy42NTFMMTAgMi41OTkgMy43NCA2LjI1WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDExLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCAxMy42NTFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgMTEuMzM1Wk0zLjc0IDEzLjc1IDEwIDE3LjQwMWw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTMuNzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgNy41ODVhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgOS45MDFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgNy41ODVaTTMuNzQgMTAgMTAgMTMuNjUxIDE2LjI2IDEwbC0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNkwzLjc0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", nt = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMS45NiAxMy40MzVhLjYyNS42MjUgMCAwIDEgLjg1NS0uMjI1TDEwIDE3LjQwMWw3LjE4NS00LjE5YS42MjUuNjI1IDAgMCAxIC42MyAxLjA3OWwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEtLjIyNS0uODU1Wk05LjY4NSAxLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDYuMjUgMTAgOS45MDFsNi4yNi0zLjY1MUwxMCAyLjU5OSAzLjc0IDYuMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im01LjcxNCAxMS44NzUgNC4yODYgMi41IDQuMjg2LTIuNUwxNy41IDEzLjc1IDEwIDE4LjEyNSAyLjUgMTMuNzVsMy4yMTQtMS44NzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgMTEuMzM1YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDEzLjY1MWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCAxMS4zMzVaTTMuNzQgMTMuNzUgMTAgMTcuNDAxbDYuMjYtMy42NTEtMS45NzQtMS4xNTEtMy45NzEgMi4zMTZhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTMuOTctMi4zMTZMMy43NCAxMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA3LjU4NWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCA5LjkwMWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA3LjU4NVpNMy43NCAxMCAxMCAxMy42NTEgMTYuMjYgMTBsLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTBaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=", it = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI0VDNEU0MCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOC4xMjUgMS4yNUExLjg3NSAxLjg3NSAwIDAgMCA2LjI1IDMuMTI1di42MjVIMy4xMjVhLjYyNS42MjUgMCAwIDAgMCAxLjI1aC42MjV2MTEuMjVBMS4yNSAxLjI1IDAgMCAwIDUgMTcuNWgxMGExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjVoLjYyNWEuNjI1LjYyNSAwIDAgMCAwLTEuMjVIMTMuNzV2LS42MjVhMS44NzUgMS44NzUgMCAwIDAtMS44NzUtMS44NzVoLTMuNzVabTQuMzc1IDIuNXYtLjYyNWEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2LjYyNWg1Wk01IDE2LjI1VjVoMTB2MTEuMjVINVpNOC4xMjUgNy41Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NWEuNjI1LjYyNSAwIDEgMS0xLjI1IDB2LTVjMC0uMzQ1LjI4LS42MjUuNjI1LS42MjVabTQuMzc1IDUuNjI1di01YS42MjUuNjI1IDAgMCAwLTEuMjUgMHY1YS42MjUuNjI1IDAgMSAwIDEuMjUgMFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==";
|
|
489
490
|
function pe(o, e, t, a, n, i, s) {
|
|
490
491
|
try {
|
|
491
492
|
var r = o[i](s), c = r.value;
|
|
@@ -494,7 +495,7 @@ function pe(o, e, t, a, n, i, s) {
|
|
|
494
495
|
}
|
|
495
496
|
r.done ? e(c) : Promise.resolve(c).then(a, n);
|
|
496
497
|
}
|
|
497
|
-
function
|
|
498
|
+
function st(o) {
|
|
498
499
|
return function() {
|
|
499
500
|
var e = this, t = arguments;
|
|
500
501
|
return new Promise(function(a, n) {
|
|
@@ -568,18 +569,18 @@ const Y = {
|
|
|
568
569
|
}],
|
|
569
570
|
offsetTop: 50,
|
|
570
571
|
icons: {
|
|
571
|
-
copyPaste:
|
|
572
|
-
delete:
|
|
573
|
-
lock:
|
|
574
|
-
unlock:
|
|
575
|
-
bringToFront:
|
|
576
|
-
sendToBack:
|
|
577
|
-
bringForward:
|
|
578
|
-
sendBackwards:
|
|
572
|
+
copyPaste: Ke,
|
|
573
|
+
delete: it,
|
|
574
|
+
lock: $e,
|
|
575
|
+
unlock: qe,
|
|
576
|
+
bringToFront: at,
|
|
577
|
+
sendToBack: nt,
|
|
578
|
+
bringForward: et,
|
|
579
|
+
sendBackwards: tt
|
|
579
580
|
},
|
|
580
581
|
handlers: {
|
|
581
582
|
copyPaste: function() {
|
|
582
|
-
var o =
|
|
583
|
+
var o = st(function* (t) {
|
|
583
584
|
yield t.clipboardManager.copy(), yield t.clipboardManager.paste();
|
|
584
585
|
});
|
|
585
586
|
function e(t) {
|
|
@@ -624,21 +625,21 @@ function j(o) {
|
|
|
624
625
|
for (var e = 1; e < arguments.length; e++) {
|
|
625
626
|
var t = arguments[e] != null ? arguments[e] : {};
|
|
626
627
|
e % 2 ? Ie(Object(t), !0).forEach(function(a) {
|
|
627
|
-
|
|
628
|
+
rt(o, a, t[a]);
|
|
628
629
|
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(o, Object.getOwnPropertyDescriptors(t)) : Ie(Object(t)).forEach(function(a) {
|
|
629
630
|
Object.defineProperty(o, a, Object.getOwnPropertyDescriptor(t, a));
|
|
630
631
|
});
|
|
631
632
|
}
|
|
632
633
|
return o;
|
|
633
634
|
}
|
|
634
|
-
function
|
|
635
|
-
return (e =
|
|
635
|
+
function rt(o, e, t) {
|
|
636
|
+
return (e = ot(e)) in o ? Object.defineProperty(o, e, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : o[e] = t, o;
|
|
636
637
|
}
|
|
637
|
-
function
|
|
638
|
-
var e =
|
|
638
|
+
function ot(o) {
|
|
639
|
+
var e = ct(o, "string");
|
|
639
640
|
return typeof e == "symbol" ? e : e + "";
|
|
640
641
|
}
|
|
641
|
-
function
|
|
642
|
+
function ct(o, e) {
|
|
642
643
|
if (typeof o != "object" || !o) return o;
|
|
643
644
|
var t = o[Symbol.toPrimitive];
|
|
644
645
|
if (t !== void 0) {
|
|
@@ -648,7 +649,7 @@ function ut(o, e) {
|
|
|
648
649
|
}
|
|
649
650
|
return (e === "string" ? String : Number)(o);
|
|
650
651
|
}
|
|
651
|
-
class
|
|
652
|
+
class ut {
|
|
652
653
|
/**
|
|
653
654
|
* @param {object} options
|
|
654
655
|
* @param {ImageEditor} options.editor - экземпляр редактора с доступом к canvas
|
|
@@ -800,39 +801,9 @@ class dt {
|
|
|
800
801
|
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("selection:changed", this._onSelectionChange), this.canvas.off("after:render", this._onSelectionChange), this.canvas.off("selection:cleared", this._onSelectionClear), this.el.remove();
|
|
801
802
|
}
|
|
802
803
|
}
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
} catch (u) {
|
|
807
|
-
return void t(u);
|
|
808
|
-
}
|
|
809
|
-
r.done ? e(c) : Promise.resolve(c).then(a, n);
|
|
810
|
-
}
|
|
811
|
-
function te(o) {
|
|
812
|
-
return function() {
|
|
813
|
-
var e = this, t = arguments;
|
|
814
|
-
return new Promise(function(a, n) {
|
|
815
|
-
var i = o.apply(e, t);
|
|
816
|
-
function s(c) {
|
|
817
|
-
Ae(i, a, n, s, r, "next", c);
|
|
818
|
-
}
|
|
819
|
-
function r(c) {
|
|
820
|
-
Ae(i, a, n, s, r, "throw", c);
|
|
821
|
-
}
|
|
822
|
-
s(void 0);
|
|
823
|
-
});
|
|
824
|
-
};
|
|
825
|
-
}
|
|
826
|
-
class lt {
|
|
827
|
-
/**
|
|
828
|
-
* @param {object} options
|
|
829
|
-
* @param {ImageEditor} options.editor - экземпляр редактора с доступом к canvas
|
|
830
|
-
*/
|
|
831
|
-
constructor(e) {
|
|
832
|
-
var {
|
|
833
|
-
editor: t
|
|
834
|
-
} = e;
|
|
835
|
-
this.editor = t, this.canvas = t.canvas, this._historySuspendCount = 0, this.baseState = null, this.patches = [], this.currentIndex = 0, this.maxHistoryLength = t.options.maxHistoryLength, this.totalChangesCount = 0, this.baseStateChangesCount = 0, this._createDiffPatcher();
|
|
804
|
+
class dt {
|
|
805
|
+
constructor({ editor: e }) {
|
|
806
|
+
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();
|
|
836
807
|
}
|
|
837
808
|
/** Проверка, нужно ли пропускать сохранение истории */
|
|
838
809
|
get skipHistory() {
|
|
@@ -842,15 +813,31 @@ class lt {
|
|
|
842
813
|
return this.patches[this.currentIndex - 1] || null;
|
|
843
814
|
}
|
|
844
815
|
_createDiffPatcher() {
|
|
845
|
-
this.diffPatcher =
|
|
816
|
+
this.diffPatcher = Ue({
|
|
846
817
|
objectHash(e) {
|
|
847
|
-
|
|
818
|
+
const t = e;
|
|
819
|
+
return [
|
|
820
|
+
t.id,
|
|
821
|
+
t.format,
|
|
822
|
+
t.locked,
|
|
823
|
+
t.left,
|
|
824
|
+
t.top,
|
|
825
|
+
t.width,
|
|
826
|
+
t.height,
|
|
827
|
+
t.flipX,
|
|
828
|
+
t.flipY,
|
|
829
|
+
t.scaleX,
|
|
830
|
+
t.scaleY,
|
|
831
|
+
t.angle,
|
|
832
|
+
t.opacity
|
|
833
|
+
].join("-");
|
|
848
834
|
},
|
|
849
835
|
arrays: {
|
|
850
836
|
detectMove: !0,
|
|
851
837
|
includeValueOnMove: !1
|
|
852
838
|
},
|
|
853
839
|
textDiff: {
|
|
840
|
+
diffMatchPatch: Re,
|
|
854
841
|
minLength: 60
|
|
855
842
|
}
|
|
856
843
|
});
|
|
@@ -881,11 +868,9 @@ class lt {
|
|
|
881
868
|
* Получаем полное состояние, применяя все диффы к базовому состоянию.
|
|
882
869
|
*/
|
|
883
870
|
getFullState() {
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
patches: a
|
|
888
|
-
} = this, n = JSON.parse(JSON.stringify(e)), i = 0; i < t; i += 1)
|
|
871
|
+
const { baseState: e, currentIndex: t, patches: a } = this;
|
|
872
|
+
let n = JSON.parse(JSON.stringify(e));
|
|
873
|
+
for (let i = 0; i < t; i += 1)
|
|
889
874
|
n = this.diffPatcher.patch(n, a[i].diff);
|
|
890
875
|
return console.log("getFullState state", n), n;
|
|
891
876
|
}
|
|
@@ -893,128 +878,136 @@ class lt {
|
|
|
893
878
|
* Сохраняем текущее состояние в виде диффа от последнего сохранённого полного состояния.
|
|
894
879
|
*/
|
|
895
880
|
saveState() {
|
|
896
|
-
if (console.log("saveState"),
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
881
|
+
if (console.log("saveState"), this.skipHistory) return;
|
|
882
|
+
console.time("saveState");
|
|
883
|
+
const e = this.canvas.toDatalessObject([
|
|
884
|
+
"selectable",
|
|
885
|
+
"evented",
|
|
886
|
+
"id",
|
|
887
|
+
"format",
|
|
888
|
+
"width",
|
|
889
|
+
"height",
|
|
890
|
+
"locked",
|
|
891
|
+
"lockMovementX",
|
|
892
|
+
"lockMovementY",
|
|
893
|
+
"lockRotation",
|
|
894
|
+
"lockScalingX",
|
|
895
|
+
"lockScalingY",
|
|
896
|
+
"lockSkewingX",
|
|
897
|
+
"lockSkewingY"
|
|
898
|
+
]);
|
|
899
|
+
if (console.timeEnd("saveState"), !this.baseState) {
|
|
900
|
+
this.baseState = e, this.patches = [], this.currentIndex = 0, console.log("Базовое состояние сохранено.");
|
|
901
|
+
return;
|
|
902
|
+
}
|
|
903
|
+
const t = this.getFullState(), a = this.diffPatcher.diff(t, e);
|
|
904
|
+
if (!a) {
|
|
905
|
+
console.log("Нет изменений для сохранения.");
|
|
906
|
+
return;
|
|
912
907
|
}
|
|
908
|
+
console.log("baseState", this.baseState), this.currentIndex < this.patches.length && this.patches.splice(this.currentIndex), console.log("diff", a), this.totalChangesCount += 1, this.patches.push({ id: A(), diff: a }), this.currentIndex += 1, this.patches.length > this.maxHistoryLength && (this.baseState = this.diffPatcher.patch(this.baseState, this.patches[0].diff), this.patches.shift(), this.currentIndex -= 1, this.baseStateChangesCount += 1), console.log("Состояние сохранено. Текущий индекс истории:", this.currentIndex);
|
|
913
909
|
}
|
|
914
910
|
/**
|
|
915
911
|
* Функция загрузки состояния в канвас.
|
|
916
|
-
* @param {
|
|
912
|
+
* @param {Partial<Canvas>} fullState - полное состояние канваса
|
|
917
913
|
* @fires editor:history-state-loaded
|
|
918
914
|
*/
|
|
919
915
|
loadStateFromFullState(e) {
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
fullState: e,
|
|
938
|
-
currentIndex: t.currentIndex,
|
|
939
|
-
totalChangesCount: t.totalChangesCount,
|
|
940
|
-
baseStateChangesCount: t.baseStateChangesCount,
|
|
941
|
-
patchesCount: t.patches.length,
|
|
942
|
-
patches: t.patches
|
|
943
|
-
});
|
|
944
|
-
}
|
|
945
|
-
})();
|
|
916
|
+
return O(this, null, function* () {
|
|
917
|
+
if (!e) return;
|
|
918
|
+
console.log("loadStateFromFullState fullState", e);
|
|
919
|
+
const { canvas: t, canvasManager: a, interactionBlocker: n } = this.editor, { width: i, height: s } = t;
|
|
920
|
+
yield t.loadFromJSON(e);
|
|
921
|
+
const r = t.getObjects().find((u) => u.id === "montage-area");
|
|
922
|
+
r && (this.editor.montageArea = r, (i !== e.width || s !== e.height) && a.updateCanvasAndFitObjects());
|
|
923
|
+
const c = t.getObjects().find((u) => u.id === "overlay-mask");
|
|
924
|
+
c && (n.overlayMask = c, n.overlayMask.visible = !1), t.renderAll(), t.fire("editor:history-state-loaded", {
|
|
925
|
+
fullState: e,
|
|
926
|
+
currentIndex: this.currentIndex,
|
|
927
|
+
totalChangesCount: this.totalChangesCount,
|
|
928
|
+
baseStateChangesCount: this.baseStateChangesCount,
|
|
929
|
+
patchesCount: this.patches.length,
|
|
930
|
+
patches: this.patches
|
|
931
|
+
});
|
|
932
|
+
});
|
|
946
933
|
}
|
|
947
934
|
/**
|
|
948
935
|
* Undo – отмена последнего действия, восстанавливая состояние по накопленным диффам.
|
|
949
936
|
* @fires editor:undo
|
|
950
937
|
*/
|
|
951
938
|
undo() {
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
if (e.currentIndex <= 0) {
|
|
939
|
+
return O(this, null, function* () {
|
|
940
|
+
if (!this.skipHistory) {
|
|
941
|
+
if (this.currentIndex <= 0) {
|
|
956
942
|
console.log("Нет предыдущих состояний для отмены.");
|
|
957
943
|
return;
|
|
958
944
|
}
|
|
959
|
-
|
|
945
|
+
this.suspendHistory();
|
|
960
946
|
try {
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
yield
|
|
964
|
-
fullState:
|
|
965
|
-
currentIndex:
|
|
966
|
-
totalChangesCount:
|
|
967
|
-
baseStateChangesCount:
|
|
968
|
-
patchesCount:
|
|
969
|
-
patches:
|
|
947
|
+
this.currentIndex -= 1, this.totalChangesCount -= 1;
|
|
948
|
+
const e = this.getFullState();
|
|
949
|
+
yield this.loadStateFromFullState(e), console.log("Undo выполнен. Текущий индекс истории:", this.currentIndex), this.canvas.fire("editor:undo", {
|
|
950
|
+
fullState: e,
|
|
951
|
+
currentIndex: this.currentIndex,
|
|
952
|
+
totalChangesCount: this.totalChangesCount,
|
|
953
|
+
baseStateChangesCount: this.baseStateChangesCount,
|
|
954
|
+
patchesCount: this.patches.length,
|
|
955
|
+
patches: this.patches
|
|
970
956
|
});
|
|
971
|
-
} catch (
|
|
972
|
-
|
|
973
|
-
|
|
957
|
+
} catch (e) {
|
|
958
|
+
this.editor.errorManager.emitError({
|
|
959
|
+
origin: "HistoryManager",
|
|
960
|
+
method: "undo",
|
|
961
|
+
code: "UNDO_ERROR",
|
|
962
|
+
message: "Ошибка отмены действия",
|
|
963
|
+
data: e
|
|
974
964
|
});
|
|
975
965
|
} finally {
|
|
976
|
-
|
|
966
|
+
this.resumeHistory();
|
|
977
967
|
}
|
|
978
968
|
}
|
|
979
|
-
})
|
|
969
|
+
});
|
|
980
970
|
}
|
|
981
971
|
/**
|
|
982
972
|
* Redo – повтор ранее отменённого действия.
|
|
983
973
|
* @fires editor:redo
|
|
984
974
|
*/
|
|
985
975
|
redo() {
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
if (e.currentIndex >= e.patches.length) {
|
|
976
|
+
return O(this, null, function* () {
|
|
977
|
+
if (!this.skipHistory) {
|
|
978
|
+
if (this.currentIndex >= this.patches.length) {
|
|
990
979
|
console.log("Нет состояний для повтора.");
|
|
991
980
|
return;
|
|
992
981
|
}
|
|
993
|
-
|
|
982
|
+
this.suspendHistory();
|
|
994
983
|
try {
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
console.log("fullState",
|
|
998
|
-
fullState:
|
|
999
|
-
currentIndex:
|
|
1000
|
-
totalChangesCount:
|
|
1001
|
-
baseStateChangesCount:
|
|
1002
|
-
patchesCount:
|
|
1003
|
-
patches:
|
|
984
|
+
this.currentIndex += 1, this.totalChangesCount += 1;
|
|
985
|
+
const e = this.getFullState();
|
|
986
|
+
console.log("fullState", e), yield this.loadStateFromFullState(e), console.log("Redo выполнен. Текущий индекс истории:", this.currentIndex), this.canvas.fire("editor:redo", {
|
|
987
|
+
fullState: e,
|
|
988
|
+
currentIndex: this.currentIndex,
|
|
989
|
+
totalChangesCount: this.totalChangesCount,
|
|
990
|
+
baseStateChangesCount: this.baseStateChangesCount,
|
|
991
|
+
patchesCount: this.patches.length,
|
|
992
|
+
patches: this.patches
|
|
1004
993
|
});
|
|
1005
|
-
} catch (
|
|
1006
|
-
|
|
1007
|
-
|
|
994
|
+
} catch (e) {
|
|
995
|
+
this.editor.errorManager.emitError({
|
|
996
|
+
origin: "HistoryManager",
|
|
997
|
+
method: "redo",
|
|
998
|
+
code: "REDO_ERROR",
|
|
999
|
+
message: "Ошибка повтора действия",
|
|
1000
|
+
data: e
|
|
1008
1001
|
});
|
|
1009
1002
|
} finally {
|
|
1010
|
-
|
|
1003
|
+
this.resumeHistory();
|
|
1011
1004
|
}
|
|
1012
1005
|
}
|
|
1013
|
-
})
|
|
1006
|
+
});
|
|
1014
1007
|
}
|
|
1015
1008
|
}
|
|
1016
|
-
const
|
|
1017
|
-
function
|
|
1009
|
+
const lt = 0.1, ht = 2, gt = 0.1, Mt = 90, B = 16, Z = 16, T = 4096, k = 4096;
|
|
1010
|
+
function Ae(o, e, t, a, n, i, s) {
|
|
1018
1011
|
try {
|
|
1019
1012
|
var r = o[i](s), c = r.value;
|
|
1020
1013
|
} catch (u) {
|
|
@@ -1022,16 +1015,16 @@ function Se(o, e, t, a, n, i, s) {
|
|
|
1022
1015
|
}
|
|
1023
1016
|
r.done ? e(c) : Promise.resolve(c).then(a, n);
|
|
1024
1017
|
}
|
|
1025
|
-
function
|
|
1018
|
+
function x(o) {
|
|
1026
1019
|
return function() {
|
|
1027
1020
|
var e = this, t = arguments;
|
|
1028
1021
|
return new Promise(function(a, n) {
|
|
1029
1022
|
var i = o.apply(e, t);
|
|
1030
1023
|
function s(c) {
|
|
1031
|
-
|
|
1024
|
+
Ae(i, a, n, s, r, "next", c);
|
|
1032
1025
|
}
|
|
1033
1026
|
function r(c) {
|
|
1034
|
-
|
|
1027
|
+
Ae(i, a, n, s, r, "throw", c);
|
|
1035
1028
|
}
|
|
1036
1029
|
s(void 0);
|
|
1037
1030
|
});
|
|
@@ -1062,7 +1055,7 @@ class D {
|
|
|
1062
1055
|
*/
|
|
1063
1056
|
importImage(e) {
|
|
1064
1057
|
var t = this;
|
|
1065
|
-
return
|
|
1058
|
+
return x(function* () {
|
|
1066
1059
|
var {
|
|
1067
1060
|
source: a,
|
|
1068
1061
|
scale: n = "image-".concat(t.options.scaleType),
|
|
@@ -1077,7 +1070,7 @@ class D {
|
|
|
1077
1070
|
errorManager: l
|
|
1078
1071
|
} = t.editor, d = yield t.getContentType(a), h = D.getFormatFromContentType(d), {
|
|
1079
1072
|
acceptContentTypes: g,
|
|
1080
|
-
acceptFormats:
|
|
1073
|
+
acceptFormats: m
|
|
1081
1074
|
} = t;
|
|
1082
1075
|
if (!t.isAllowedContentType(d)) {
|
|
1083
1076
|
var f = "Неверный contentType для изображения: ".concat(d, ". Ожидается один из: ").concat(t.acceptContentTypes.join(", "), ".");
|
|
@@ -1091,23 +1084,23 @@ class D {
|
|
|
1091
1084
|
format: h,
|
|
1092
1085
|
contentType: d,
|
|
1093
1086
|
acceptContentTypes: g,
|
|
1094
|
-
acceptFormats:
|
|
1087
|
+
acceptFormats: m
|
|
1095
1088
|
}
|
|
1096
1089
|
}), null;
|
|
1097
1090
|
}
|
|
1098
1091
|
u.suspendHistory();
|
|
1099
1092
|
try {
|
|
1100
|
-
var
|
|
1093
|
+
var v, M;
|
|
1101
1094
|
if (a instanceof File)
|
|
1102
|
-
|
|
1095
|
+
v = URL.createObjectURL(a);
|
|
1103
1096
|
else if (typeof a == "string") {
|
|
1104
1097
|
var S = yield fetch(a, {
|
|
1105
1098
|
mode: "cors"
|
|
1106
|
-
}),
|
|
1099
|
+
}), E = yield S.blob({
|
|
1107
1100
|
type: d,
|
|
1108
1101
|
quality: 1
|
|
1109
1102
|
});
|
|
1110
|
-
|
|
1103
|
+
v = URL.createObjectURL(E);
|
|
1111
1104
|
} else
|
|
1112
1105
|
return l.emitError({
|
|
1113
1106
|
origin: "ImageManager",
|
|
@@ -1119,28 +1112,28 @@ class D {
|
|
|
1119
1112
|
format: h,
|
|
1120
1113
|
contentType: d,
|
|
1121
1114
|
acceptContentTypes: g,
|
|
1122
|
-
acceptFormats:
|
|
1115
|
+
acceptFormats: m
|
|
1123
1116
|
}
|
|
1124
1117
|
}), null;
|
|
1125
|
-
if (t._createdBlobUrls.push(
|
|
1126
|
-
var
|
|
1127
|
-
M =
|
|
1118
|
+
if (t._createdBlobUrls.push(v), h === "svg") {
|
|
1119
|
+
var L = yield Te(v);
|
|
1120
|
+
M = W.groupSVGElements(L.objects, L.options);
|
|
1128
1121
|
} else
|
|
1129
|
-
M = yield ee.fromURL(
|
|
1122
|
+
M = yield ee.fromURL(v, {
|
|
1130
1123
|
crossOrigin: "anonymous"
|
|
1131
1124
|
});
|
|
1132
1125
|
var {
|
|
1133
|
-
width:
|
|
1126
|
+
width: w,
|
|
1134
1127
|
height: y
|
|
1135
1128
|
} = M;
|
|
1136
|
-
if (y >
|
|
1137
|
-
var b = yield t.resizeImageToBoundaries(M._element.src, "max"),
|
|
1138
|
-
t._createdBlobUrls.push(
|
|
1129
|
+
if (y > k || w > T) {
|
|
1130
|
+
var b = yield t.resizeImageToBoundaries(M._element.src, "max"), z = URL.createObjectURL(b);
|
|
1131
|
+
t._createdBlobUrls.push(z), M = yield ee.fromURL(z, {
|
|
1139
1132
|
crossOrigin: "anonymous"
|
|
1140
1133
|
});
|
|
1141
|
-
} else if (y <
|
|
1142
|
-
var
|
|
1143
|
-
t._createdBlobUrls.push(
|
|
1134
|
+
} else if (y < Z || w < B) {
|
|
1135
|
+
var F = yield t.resizeImageToBoundaries(M._element.src, "min"), U = URL.createObjectURL(F);
|
|
1136
|
+
t._createdBlobUrls.push(U), M = yield ee.fromURL(U, {
|
|
1144
1137
|
crossOrigin: "anonymous"
|
|
1145
1138
|
});
|
|
1146
1139
|
}
|
|
@@ -1151,8 +1144,8 @@ class D {
|
|
|
1151
1144
|
});
|
|
1152
1145
|
else {
|
|
1153
1146
|
var {
|
|
1154
|
-
width:
|
|
1155
|
-
height:
|
|
1147
|
+
width: V,
|
|
1148
|
+
height: R
|
|
1156
1149
|
} = r, _ = t.calculateScaleFactor({
|
|
1157
1150
|
imageObject: M,
|
|
1158
1151
|
scaleType: n
|
|
@@ -1161,14 +1154,14 @@ class D {
|
|
|
1161
1154
|
object: M,
|
|
1162
1155
|
type: "contain",
|
|
1163
1156
|
withoutSave: !0
|
|
1164
|
-
}) : n === "image-cover" && (
|
|
1157
|
+
}) : n === "image-cover" && (w > V || y > R) && c.fitObject({
|
|
1165
1158
|
object: M,
|
|
1166
1159
|
type: "cover",
|
|
1167
1160
|
withoutSave: !0
|
|
1168
1161
|
});
|
|
1169
1162
|
}
|
|
1170
1163
|
s.add(M), s.centerObject(M), s.setActiveObject(M), s.renderAll(), u.resumeHistory(), i || u.saveState();
|
|
1171
|
-
var
|
|
1164
|
+
var G = {
|
|
1172
1165
|
image: M,
|
|
1173
1166
|
format: h,
|
|
1174
1167
|
contentType: d,
|
|
@@ -1176,7 +1169,7 @@ class D {
|
|
|
1176
1169
|
withoutSave: i,
|
|
1177
1170
|
source: a
|
|
1178
1171
|
};
|
|
1179
|
-
return s.fire("editor:image-imported",
|
|
1172
|
+
return s.fire("editor:image-imported", G), G;
|
|
1180
1173
|
} catch (H) {
|
|
1181
1174
|
return l.emitError({
|
|
1182
1175
|
origin: "ImageManager",
|
|
@@ -1204,16 +1197,16 @@ class D {
|
|
|
1204
1197
|
*/
|
|
1205
1198
|
resizeImageToBoundaries(e) {
|
|
1206
1199
|
var t = arguments, a = this;
|
|
1207
|
-
return
|
|
1208
|
-
var n = t.length > 1 && t[1] !== void 0 ? t[1] : "max", i = "Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ".concat(
|
|
1209
|
-
n === "min" && (i = "Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ".concat(
|
|
1200
|
+
return x(function* () {
|
|
1201
|
+
var n = t.length > 1 && t[1] !== void 0 ? t[1] : "max", i = "Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ".concat(T, "x").concat(k);
|
|
1202
|
+
n === "min" && (i = "Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ".concat(B, "x").concat(Z));
|
|
1210
1203
|
var s = {
|
|
1211
1204
|
dataURL: e,
|
|
1212
1205
|
sizeType: n,
|
|
1213
|
-
maxWidth:
|
|
1214
|
-
maxHeight:
|
|
1215
|
-
minWidth:
|
|
1216
|
-
minHeight:
|
|
1206
|
+
maxWidth: T,
|
|
1207
|
+
maxHeight: k,
|
|
1208
|
+
minWidth: B,
|
|
1209
|
+
minHeight: Z
|
|
1217
1210
|
};
|
|
1218
1211
|
return a.editor.errorManager.emitWarning({
|
|
1219
1212
|
origin: "ImageManager",
|
|
@@ -1237,7 +1230,7 @@ class D {
|
|
|
1237
1230
|
*/
|
|
1238
1231
|
exportCanvasAsImageFile() {
|
|
1239
1232
|
var e = arguments, t = this;
|
|
1240
|
-
return
|
|
1233
|
+
return x(function* () {
|
|
1241
1234
|
var {
|
|
1242
1235
|
fileName: a = "image.png",
|
|
1243
1236
|
contentType: n = "image/png",
|
|
@@ -1253,28 +1246,28 @@ class D {
|
|
|
1253
1246
|
c.setCoords();
|
|
1254
1247
|
var {
|
|
1255
1248
|
left: g,
|
|
1256
|
-
top:
|
|
1249
|
+
top: m,
|
|
1257
1250
|
width: f,
|
|
1258
|
-
height:
|
|
1251
|
+
height: v
|
|
1259
1252
|
} = c.getBoundingRect(), M = yield r.clone(["id", "format", "locked"]);
|
|
1260
1253
|
["image/jpg", "image/jpeg"].includes(d) && (M.backgroundColor = "#ffffff");
|
|
1261
1254
|
var S = M.getObjects().find((p) => p.id === c.id);
|
|
1262
|
-
S.visible = !1, M.viewportTransform = [1, 0, 0, 1, -g, -
|
|
1255
|
+
S.visible = !1, M.viewportTransform = [1, 0, 0, 1, -g, -m], M.setDimensions({
|
|
1263
1256
|
width: f,
|
|
1264
|
-
height:
|
|
1257
|
+
height: v
|
|
1265
1258
|
}, {
|
|
1266
1259
|
backstoreOnly: !0
|
|
1267
1260
|
}), M.renderAll();
|
|
1268
|
-
var
|
|
1269
|
-
if (h === "svg" &&
|
|
1270
|
-
var
|
|
1261
|
+
var E = M.getObjects().filter((p) => p.format).every((p) => p.format === "svg");
|
|
1262
|
+
if (h === "svg" && E) {
|
|
1263
|
+
var L = M.toSVG();
|
|
1271
1264
|
M.dispose();
|
|
1272
|
-
var
|
|
1265
|
+
var w = D._exportSVGStringAsFile(L, {
|
|
1273
1266
|
exportAsBase64: i,
|
|
1274
1267
|
exportAsBlob: s,
|
|
1275
1268
|
fileName: a
|
|
1276
1269
|
}), y = {
|
|
1277
|
-
image:
|
|
1270
|
+
image: w,
|
|
1278
1271
|
format: "svg",
|
|
1279
1272
|
contentType: "image/svg+xml",
|
|
1280
1273
|
fileName: a.replace(/\.[^/.]+$/, ".svg")
|
|
@@ -1285,62 +1278,62 @@ class D {
|
|
|
1285
1278
|
M.getElement().toBlob(p);
|
|
1286
1279
|
});
|
|
1287
1280
|
if (M.dispose(), s) {
|
|
1288
|
-
var
|
|
1281
|
+
var z = {
|
|
1289
1282
|
image: b,
|
|
1290
1283
|
format: h,
|
|
1291
1284
|
contentType: d,
|
|
1292
1285
|
fileName: a
|
|
1293
1286
|
};
|
|
1294
|
-
return r.fire("editor:canvas-exported",
|
|
1287
|
+
return r.fire("editor:canvas-exported", z), z;
|
|
1295
1288
|
}
|
|
1296
|
-
var
|
|
1289
|
+
var F = yield createImageBitmap(b), U = yield u.post("toDataURL", {
|
|
1297
1290
|
format: h,
|
|
1298
1291
|
quality: 1,
|
|
1299
|
-
bitmap:
|
|
1300
|
-
}, [
|
|
1292
|
+
bitmap: F
|
|
1293
|
+
}, [F]);
|
|
1301
1294
|
if (l) {
|
|
1302
|
-
var
|
|
1303
|
-
orientation:
|
|
1295
|
+
var V = 0.264583, R = f * V, _ = v * V, G = (yield t.editor.moduleLoader.loadModule("jspdf")).jsPDF, H = new G({
|
|
1296
|
+
orientation: R > _ ? "landscape" : "portrait",
|
|
1304
1297
|
unit: "mm",
|
|
1305
|
-
format: [
|
|
1298
|
+
format: [R, _]
|
|
1306
1299
|
});
|
|
1307
|
-
if (H.addImage(
|
|
1308
|
-
var
|
|
1309
|
-
image:
|
|
1300
|
+
if (H.addImage(U, "JPG", 0, 0, R, _), i) {
|
|
1301
|
+
var Ce = H.output("datauristring"), de = {
|
|
1302
|
+
image: Ce,
|
|
1310
1303
|
format: "pdf",
|
|
1311
1304
|
contentType: "application/pdf",
|
|
1312
1305
|
fileName: a
|
|
1313
1306
|
};
|
|
1314
|
-
return r.fire("editor:canvas-exported",
|
|
1307
|
+
return r.fire("editor:canvas-exported", de), de;
|
|
1315
1308
|
}
|
|
1316
|
-
var
|
|
1309
|
+
var De = H.output("blob"), Ne = new File([De], a, {
|
|
1317
1310
|
type: "application/pdf"
|
|
1318
|
-
}),
|
|
1319
|
-
image:
|
|
1311
|
+
}), le = {
|
|
1312
|
+
image: Ne,
|
|
1320
1313
|
format: "pdf",
|
|
1321
1314
|
contentType: "application/pdf",
|
|
1322
1315
|
fileName: a
|
|
1323
1316
|
};
|
|
1324
|
-
return r.fire("editor:canvas-exported",
|
|
1317
|
+
return r.fire("editor:canvas-exported", le), le;
|
|
1325
1318
|
}
|
|
1326
1319
|
if (i) {
|
|
1327
|
-
var
|
|
1328
|
-
image:
|
|
1320
|
+
var he = {
|
|
1321
|
+
image: U,
|
|
1329
1322
|
format: h,
|
|
1330
1323
|
contentType: d,
|
|
1331
1324
|
fileName: a
|
|
1332
1325
|
};
|
|
1333
|
-
return r.fire("editor:canvas-exported",
|
|
1326
|
+
return r.fire("editor:canvas-exported", he), he;
|
|
1334
1327
|
}
|
|
1335
|
-
var
|
|
1328
|
+
var ge = h === "svg" && !E ? a.replace(/\.[^/.]+$/, ".png") : a, Ee = new File([b], ge, {
|
|
1336
1329
|
type: d
|
|
1337
|
-
}),
|
|
1338
|
-
image:
|
|
1330
|
+
}), Me = {
|
|
1331
|
+
image: Ee,
|
|
1339
1332
|
format: h,
|
|
1340
1333
|
contentType: d,
|
|
1341
|
-
fileName:
|
|
1334
|
+
fileName: ge
|
|
1342
1335
|
};
|
|
1343
|
-
return r.fire("editor:canvas-exported",
|
|
1336
|
+
return r.fire("editor:canvas-exported", Me), Me;
|
|
1344
1337
|
} catch (p) {
|
|
1345
1338
|
return t.editor.errorManager.emitError({
|
|
1346
1339
|
origin: "ImageManager",
|
|
@@ -1370,7 +1363,7 @@ class D {
|
|
|
1370
1363
|
*/
|
|
1371
1364
|
exportObjectAsImageFile() {
|
|
1372
1365
|
var e = arguments, t = this;
|
|
1373
|
-
return
|
|
1366
|
+
return x(function* () {
|
|
1374
1367
|
var {
|
|
1375
1368
|
object: a,
|
|
1376
1369
|
fileName: n = "image.png",
|
|
@@ -1401,43 +1394,43 @@ class D {
|
|
|
1401
1394
|
exportAsBase64: s,
|
|
1402
1395
|
exportAsBlob: r,
|
|
1403
1396
|
fileName: n
|
|
1404
|
-
}),
|
|
1397
|
+
}), m = {
|
|
1405
1398
|
image: g,
|
|
1406
1399
|
format: d,
|
|
1407
1400
|
contentType: "image/svg+xml",
|
|
1408
1401
|
fileName: n.replace(/\.[^/.]+$/, ".svg")
|
|
1409
1402
|
};
|
|
1410
|
-
return c.fire("editor:object-exported",
|
|
1403
|
+
return c.fire("editor:object-exported", m), m;
|
|
1411
1404
|
}
|
|
1412
1405
|
if (s) {
|
|
1413
|
-
var f = yield createImageBitmap(l._element),
|
|
1406
|
+
var f = yield createImageBitmap(l._element), v = yield u.post("toDataURL", {
|
|
1414
1407
|
format: d,
|
|
1415
1408
|
quality: 1,
|
|
1416
1409
|
bitmap: f
|
|
1417
1410
|
}, [f]), M = {
|
|
1418
|
-
image:
|
|
1411
|
+
image: v,
|
|
1419
1412
|
format: d,
|
|
1420
1413
|
contentType: i,
|
|
1421
1414
|
fileName: n
|
|
1422
1415
|
};
|
|
1423
1416
|
return c.fire("editor:object-exported", M), M;
|
|
1424
1417
|
}
|
|
1425
|
-
var S = l.toCanvasElement(),
|
|
1418
|
+
var S = l.toCanvasElement(), E = yield new Promise((b) => {
|
|
1426
1419
|
S.toBlob(b);
|
|
1427
1420
|
});
|
|
1428
1421
|
if (r) {
|
|
1429
|
-
var
|
|
1430
|
-
image:
|
|
1422
|
+
var L = {
|
|
1423
|
+
image: E,
|
|
1431
1424
|
format: d,
|
|
1432
1425
|
contentType: i,
|
|
1433
1426
|
fileName: n
|
|
1434
1427
|
};
|
|
1435
|
-
return c.fire("editor:object-exported",
|
|
1428
|
+
return c.fire("editor:object-exported", L), L;
|
|
1436
1429
|
}
|
|
1437
|
-
var
|
|
1430
|
+
var w = new File([E], n, {
|
|
1438
1431
|
type: i
|
|
1439
1432
|
}), y = {
|
|
1440
|
-
image:
|
|
1433
|
+
image: w,
|
|
1441
1434
|
format: d,
|
|
1442
1435
|
contentType: i,
|
|
1443
1436
|
fileName: n
|
|
@@ -1524,7 +1517,7 @@ class D {
|
|
|
1524
1517
|
*/
|
|
1525
1518
|
getContentType(e) {
|
|
1526
1519
|
var t = this;
|
|
1527
|
-
return
|
|
1520
|
+
return x(function* () {
|
|
1528
1521
|
return typeof e == "string" ? t.getContentTypeFromUrl(e) : e.type || "application/octet-stream";
|
|
1529
1522
|
})();
|
|
1530
1523
|
}
|
|
@@ -1536,7 +1529,7 @@ class D {
|
|
|
1536
1529
|
*/
|
|
1537
1530
|
getContentTypeFromUrl(e) {
|
|
1538
1531
|
var t = this;
|
|
1539
|
-
return
|
|
1532
|
+
return x(function* () {
|
|
1540
1533
|
if (e.startsWith("data:")) {
|
|
1541
1534
|
var a = e.match(/^data:([^;]+)/);
|
|
1542
1535
|
return a ? a[1] : "application/octet-stream";
|
|
@@ -1609,16 +1602,16 @@ class mt {
|
|
|
1609
1602
|
* @fires editor:resolution-width-changed
|
|
1610
1603
|
*/
|
|
1611
1604
|
setResolutionWidth(e, { preserveProportional: t, withoutSave: a, adaptCanvasToContainer: n } = {}) {
|
|
1612
|
-
var
|
|
1605
|
+
var m;
|
|
1613
1606
|
if (!e) return;
|
|
1614
1607
|
const {
|
|
1615
1608
|
canvas: i,
|
|
1616
1609
|
montageArea: s,
|
|
1617
1610
|
options: { canvasBackstoreWidth: r }
|
|
1618
|
-
} = this.editor, { width: c, height: u } = s, l = Math.max(Math.min(Number(e),
|
|
1619
|
-
if (!r || r === "auto" || n ? this.adaptCanvasToContainer() : r ? this.setCanvasBackstoreWidth(Number(r)) : this.setCanvasBackstoreWidth(l), s.set({ width: l }), (
|
|
1620
|
-
const f = l / c,
|
|
1621
|
-
this.setResolutionHeight(
|
|
1611
|
+
} = this.editor, { width: c, height: u } = s, l = Math.max(Math.min(Number(e), T), B);
|
|
1612
|
+
if (!r || r === "auto" || n ? this.adaptCanvasToContainer() : r ? this.setCanvasBackstoreWidth(Number(r)) : this.setCanvasBackstoreWidth(l), s.set({ width: l }), (m = i.clipPath) == null || m.set({ width: l }), t) {
|
|
1613
|
+
const f = l / c, v = u * f;
|
|
1614
|
+
this.setResolutionHeight(v);
|
|
1622
1615
|
return;
|
|
1623
1616
|
}
|
|
1624
1617
|
const { left: d, top: h } = this.getObjectDefaultCoords(s), g = i.getZoom();
|
|
@@ -1639,16 +1632,16 @@ class mt {
|
|
|
1639
1632
|
* @fires editor:resolution-height-changed
|
|
1640
1633
|
*/
|
|
1641
1634
|
setResolutionHeight(e, { preserveProportional: t, withoutSave: a, adaptCanvasToContainer: n } = {}) {
|
|
1642
|
-
var
|
|
1635
|
+
var m;
|
|
1643
1636
|
if (!e) return;
|
|
1644
1637
|
const {
|
|
1645
1638
|
canvas: i,
|
|
1646
1639
|
montageArea: s,
|
|
1647
1640
|
options: { canvasBackstoreHeight: r }
|
|
1648
|
-
} = this.editor, { width: c, height: u } = s, l = Math.max(Math.min(Number(e),
|
|
1649
|
-
if (!r || r === "auto" || n ? this.adaptCanvasToContainer() : r ? this.setCanvasBackstoreHeight(Number(r)) : this.setCanvasBackstoreHeight(l), s.set({ height: l }), (
|
|
1650
|
-
const f = l / u,
|
|
1651
|
-
this.setResolutionWidth(
|
|
1641
|
+
} = this.editor, { width: c, height: u } = s, l = Math.max(Math.min(Number(e), k), Z);
|
|
1642
|
+
if (!r || r === "auto" || n ? this.adaptCanvasToContainer() : r ? this.setCanvasBackstoreHeight(Number(r)) : this.setCanvasBackstoreHeight(l), s.set({ height: l }), (m = i.clipPath) == null || m.set({ height: l }), t) {
|
|
1643
|
+
const f = l / u, v = c * f;
|
|
1644
|
+
this.setResolutionWidth(v);
|
|
1652
1645
|
return;
|
|
1653
1646
|
}
|
|
1654
1647
|
const { left: d, top: h } = this.getObjectDefaultCoords(s), g = i.getZoom();
|
|
@@ -1699,7 +1692,7 @@ class mt {
|
|
|
1699
1692
|
*/
|
|
1700
1693
|
setCanvasBackstoreWidth(e) {
|
|
1701
1694
|
if (!e || typeof e != "number") return;
|
|
1702
|
-
const t = Math.max(Math.min(e,
|
|
1695
|
+
const t = Math.max(Math.min(e, T), B);
|
|
1703
1696
|
this.editor.canvas.setDimensions({ width: t }, { backstoreOnly: !0 });
|
|
1704
1697
|
}
|
|
1705
1698
|
/**
|
|
@@ -1708,7 +1701,7 @@ class mt {
|
|
|
1708
1701
|
*/
|
|
1709
1702
|
setCanvasBackstoreHeight(e) {
|
|
1710
1703
|
if (!e || typeof e != "number") return;
|
|
1711
|
-
const t = Math.max(Math.min(e,
|
|
1704
|
+
const t = Math.max(Math.min(e, k), Z);
|
|
1712
1705
|
this.editor.canvas.setDimensions({ height: t }, { backstoreOnly: !0 });
|
|
1713
1706
|
}
|
|
1714
1707
|
/**
|
|
@@ -1717,7 +1710,7 @@ class mt {
|
|
|
1717
1710
|
* с учётом минимальных и максимальных значений.
|
|
1718
1711
|
*/
|
|
1719
1712
|
adaptCanvasToContainer() {
|
|
1720
|
-
const { canvas: e } = this.editor, t = e.editorContainer, a = t.clientWidth, n = t.clientHeight, i = Math.max(Math.min(a,
|
|
1713
|
+
const { canvas: e } = this.editor, t = e.editorContainer, a = t.clientWidth, n = t.clientHeight, i = Math.max(Math.min(a, T), B), s = Math.max(Math.min(n, k), Z);
|
|
1721
1714
|
console.log("adaptCanvasToContainer newWidth", i), console.log("adaptCanvasToContainer newHeight", s), e.setDimensions({ width: i, height: s }, { backstoreOnly: !0 });
|
|
1722
1715
|
}
|
|
1723
1716
|
/**
|
|
@@ -1893,13 +1886,13 @@ class mt {
|
|
|
1893
1886
|
} = this.editor, u = e || n.getActiveObject();
|
|
1894
1887
|
if (!u || u.type !== "image" && u.format !== "svg") return;
|
|
1895
1888
|
const { width: l, height: d } = u;
|
|
1896
|
-
let h = Math.min(l,
|
|
1889
|
+
let h = Math.min(l, T), g = Math.min(d, k);
|
|
1897
1890
|
if (t) {
|
|
1898
1891
|
const {
|
|
1899
|
-
width:
|
|
1892
|
+
width: m,
|
|
1900
1893
|
height: f
|
|
1901
|
-
} = i,
|
|
1902
|
-
h =
|
|
1894
|
+
} = i, v = l / m, M = d / f, S = Math.max(v, M);
|
|
1895
|
+
h = m * S, g = f * S;
|
|
1903
1896
|
}
|
|
1904
1897
|
this.setResolutionWidth(h, { withoutSave: !0 }), this.setResolutionHeight(g, { withoutSave: !0 }), (l > r || d > c) && s.calculateAndApplyDefaultZoom(), s.resetObject(u, { withoutSave: !0 }), n.centerObject(u), n.renderAll(), a || this.editor.historyManager.saveState(), n.fire("editor:montage-area-scaled-to-image", {
|
|
1905
1898
|
object: u,
|
|
@@ -1944,9 +1937,9 @@ class mt {
|
|
|
1944
1937
|
return e.getObjects().filter((i) => i.id !== t.id && i.id !== a.id);
|
|
1945
1938
|
}
|
|
1946
1939
|
}
|
|
1947
|
-
class
|
|
1940
|
+
class vt {
|
|
1948
1941
|
constructor({ editor: e }) {
|
|
1949
|
-
this.editor = e, this.options = e.options, this.minZoom = this.options.minZoom ||
|
|
1942
|
+
this.editor = e, this.options = e.options, this.minZoom = this.options.minZoom || lt, this.maxZoom = this.options.maxZoom || ht, this.defaultZoom = this.options.defaultScale, this.maxZoomFactor = this.options.maxZoomFactor;
|
|
1950
1943
|
}
|
|
1951
1944
|
/**
|
|
1952
1945
|
* Метод рассчитывает и применяет зум по умолчанию для монтажной области редактора.
|
|
@@ -1970,7 +1963,7 @@ class ft {
|
|
|
1970
1963
|
* @fires editor:zoom-changed
|
|
1971
1964
|
* Если передавать координаты курсора, то нужно быть аккуратнее, так как юзер может выйти за пределы рабочей области
|
|
1972
1965
|
*/
|
|
1973
|
-
zoom(e =
|
|
1966
|
+
zoom(e = gt, t = {}) {
|
|
1974
1967
|
var h, g;
|
|
1975
1968
|
if (!e) return;
|
|
1976
1969
|
const { minZoom: a, maxZoom: n } = this, { canvas: i } = this.editor, s = i.getZoom(), r = i.getCenterPoint(), c = (h = t.pointX) != null ? h : r.x, u = (g = t.pointY) != null ? g : r.y, l = new K(c, u);
|
|
@@ -2017,7 +2010,7 @@ class ft {
|
|
|
2017
2010
|
* @param {Boolean} options.withoutSave - Не сохранять состояние
|
|
2018
2011
|
* @fires editor:object-rotated
|
|
2019
2012
|
*/
|
|
2020
|
-
rotate(e =
|
|
2013
|
+
rotate(e = Mt, { withoutSave: t } = {}) {
|
|
2021
2014
|
const { canvas: a, historyManager: n } = this.editor, i = a.getActiveObject();
|
|
2022
2015
|
if (!i) return;
|
|
2023
2016
|
const s = i.angle + e;
|
|
@@ -2064,7 +2057,7 @@ class ft {
|
|
|
2064
2057
|
withoutSave: a
|
|
2065
2058
|
} = {}) {
|
|
2066
2059
|
const { canvas: n, historyManager: i } = this.editor, s = e || n.getActiveObject();
|
|
2067
|
-
s && (s instanceof
|
|
2060
|
+
s && (s instanceof N ? s.getObjects().forEach((r) => {
|
|
2068
2061
|
r.set("opacity", t);
|
|
2069
2062
|
}) : s.set("opacity", t), n.renderAll(), a || i.saveState(), n.fire("editor:object-opacity-changed", {
|
|
2070
2063
|
object: s,
|
|
@@ -2091,13 +2084,13 @@ class ft {
|
|
|
2091
2084
|
} = {}) {
|
|
2092
2085
|
const { canvas: i, imageManager: s, historyManager: r } = this.editor, c = e || i.getActiveObject();
|
|
2093
2086
|
if (c) {
|
|
2094
|
-
if (c.set("angle", 0), c instanceof
|
|
2087
|
+
if (c.set("angle", 0), c instanceof N && !n) {
|
|
2095
2088
|
const u = c.getObjects();
|
|
2096
2089
|
i.discardActiveObject(), u.forEach((d) => {
|
|
2097
2090
|
const h = s.calculateScaleFactor({ imageObject: d, scaleType: t });
|
|
2098
2091
|
d.scale(h), i.centerObject(d);
|
|
2099
2092
|
});
|
|
2100
|
-
const l = new
|
|
2093
|
+
const l = new N(u, { canvas: i });
|
|
2101
2094
|
i.setActiveObject(l);
|
|
2102
2095
|
} else {
|
|
2103
2096
|
const u = s.calculateScaleFactor({
|
|
@@ -2149,11 +2142,11 @@ class ft {
|
|
|
2149
2142
|
}), t)
|
|
2150
2143
|
this.fitObject({ object: u, withoutSave: !0, fitAsOneObject: !0 });
|
|
2151
2144
|
else {
|
|
2152
|
-
const { width: d, height: h } = i, { width: g, height:
|
|
2145
|
+
const { width: d, height: h } = i, { width: g, height: m } = u, f = s.calculateScaleFactor({
|
|
2153
2146
|
imageObject: u,
|
|
2154
2147
|
scaleType: c
|
|
2155
2148
|
});
|
|
2156
|
-
c === "contain" && f < 1 || c === "cover" && (g > d ||
|
|
2149
|
+
c === "contain" && f < 1 || c === "cover" && (g > d || m > h) ? this.fitObject({ object: u, withoutSave: !0, fitAsOneObject: !0 }) : u.set({ scaleX: 1, scaleY: 1 });
|
|
2157
2150
|
}
|
|
2158
2151
|
u.set({ flipX: !1, flipY: !1, angle: 0 }), n.centerObject(u), n.renderAll(), r.resumeHistory(), a || r.saveState(), n.fire("editor:object-reset", {
|
|
2159
2152
|
object: u,
|
|
@@ -2162,7 +2155,7 @@ class ft {
|
|
|
2162
2155
|
});
|
|
2163
2156
|
}
|
|
2164
2157
|
}
|
|
2165
|
-
class
|
|
2158
|
+
class ft {
|
|
2166
2159
|
/**
|
|
2167
2160
|
* @param {object} options
|
|
2168
2161
|
* @param {ImageEditor} options.editor – экземпляр редактора
|
|
@@ -2410,7 +2403,7 @@ class $ {
|
|
|
2410
2403
|
e.moveObjectTo(n[s], i - 1);
|
|
2411
2404
|
}
|
|
2412
2405
|
}
|
|
2413
|
-
class
|
|
2406
|
+
class jt {
|
|
2414
2407
|
/**
|
|
2415
2408
|
* Менеджер фигур для редактора.
|
|
2416
2409
|
* @param {Object} options - Опции и настройки менеджера фигур.
|
|
@@ -2442,7 +2435,7 @@ class yt {
|
|
|
2442
2435
|
width: n = 100,
|
|
2443
2436
|
height: i = 100,
|
|
2444
2437
|
fill: s = "blue"
|
|
2445
|
-
} = d, r =
|
|
2438
|
+
} = d, r = Q(d, [
|
|
2446
2439
|
"id",
|
|
2447
2440
|
"left",
|
|
2448
2441
|
"top",
|
|
@@ -2450,7 +2443,7 @@ class yt {
|
|
|
2450
2443
|
"height",
|
|
2451
2444
|
"fill"
|
|
2452
2445
|
]);
|
|
2453
|
-
const { canvas: h } = this.editor, g = new
|
|
2446
|
+
const { canvas: h } = this.editor, g = new ke(C({
|
|
2454
2447
|
id: e,
|
|
2455
2448
|
left: t,
|
|
2456
2449
|
top: a,
|
|
@@ -2483,14 +2476,14 @@ class yt {
|
|
|
2483
2476
|
top: a,
|
|
2484
2477
|
radius: n = 50,
|
|
2485
2478
|
fill: i = "green"
|
|
2486
|
-
} = l, s =
|
|
2479
|
+
} = l, s = Q(l, [
|
|
2487
2480
|
"id",
|
|
2488
2481
|
"left",
|
|
2489
2482
|
"top",
|
|
2490
2483
|
"radius",
|
|
2491
2484
|
"fill"
|
|
2492
2485
|
]);
|
|
2493
|
-
const { canvas: d } = this.editor, h = new
|
|
2486
|
+
const { canvas: d } = this.editor, h = new xe(C({
|
|
2494
2487
|
id: e,
|
|
2495
2488
|
left: t,
|
|
2496
2489
|
top: a,
|
|
@@ -2524,7 +2517,7 @@ class yt {
|
|
|
2524
2517
|
width: n = 100,
|
|
2525
2518
|
height: i = 100,
|
|
2526
2519
|
fill: s = "yellow"
|
|
2527
|
-
} = d, r =
|
|
2520
|
+
} = d, r = Q(d, [
|
|
2528
2521
|
"id",
|
|
2529
2522
|
"left",
|
|
2530
2523
|
"top",
|
|
@@ -2532,7 +2525,7 @@ class yt {
|
|
|
2532
2525
|
"height",
|
|
2533
2526
|
"fill"
|
|
2534
2527
|
]);
|
|
2535
|
-
const { canvas: h } = this.editor, g = new
|
|
2528
|
+
const { canvas: h } = this.editor, g = new Be(C({
|
|
2536
2529
|
id: e,
|
|
2537
2530
|
left: t,
|
|
2538
2531
|
top: a,
|
|
@@ -2543,7 +2536,7 @@ class yt {
|
|
|
2543
2536
|
return !t && !a && h.centerObject(g), u || (h.add(g), c || h.setActiveObject(g), h.renderAll()), g;
|
|
2544
2537
|
}
|
|
2545
2538
|
}
|
|
2546
|
-
class
|
|
2539
|
+
class yt {
|
|
2547
2540
|
/**
|
|
2548
2541
|
* @param {object} options
|
|
2549
2542
|
* @param {ImageEditor} options.editor - экземпляр редактора с доступом к canvas
|
|
@@ -2607,7 +2600,7 @@ class bt {
|
|
|
2607
2600
|
origin: "ClipboardManager",
|
|
2608
2601
|
method: "_cloneAndFire",
|
|
2609
2602
|
code: "CLONE_FAILED",
|
|
2610
|
-
message: "
|
|
2603
|
+
message: "Ошибка клонирования объекта",
|
|
2611
2604
|
data: a
|
|
2612
2605
|
});
|
|
2613
2606
|
});
|
|
@@ -2646,7 +2639,7 @@ class bt {
|
|
|
2646
2639
|
* @fires editor:object-pasted
|
|
2647
2640
|
*/
|
|
2648
2641
|
paste() {
|
|
2649
|
-
return
|
|
2642
|
+
return O(this, null, function* () {
|
|
2650
2643
|
const { canvas: e } = this.editor;
|
|
2651
2644
|
if (!this.clipboard) return;
|
|
2652
2645
|
const t = yield this.clipboard.clone(["format"]);
|
|
@@ -2655,13 +2648,13 @@ class bt {
|
|
|
2655
2648
|
left: t.left + 10,
|
|
2656
2649
|
top: t.top + 10,
|
|
2657
2650
|
evented: !0
|
|
2658
|
-
}), t instanceof
|
|
2651
|
+
}), t instanceof N ? (t.canvas = e, t.forEachObject((a) => {
|
|
2659
2652
|
e.add(a);
|
|
2660
2653
|
})) : e.add(t), e.setActiveObject(t), e.requestRenderAll(), e.fire("editor:object-pasted", { object: t });
|
|
2661
2654
|
});
|
|
2662
2655
|
}
|
|
2663
2656
|
}
|
|
2664
|
-
class
|
|
2657
|
+
class bt {
|
|
2665
2658
|
/**
|
|
2666
2659
|
* @param {object} options
|
|
2667
2660
|
* @param {ImageEditor} options.editor - экземпляр редактора с доступом к canvas
|
|
@@ -2747,16 +2740,9 @@ class pt {
|
|
|
2747
2740
|
}
|
|
2748
2741
|
}
|
|
2749
2742
|
}
|
|
2750
|
-
class
|
|
2751
|
-
|
|
2752
|
-
|
|
2753
|
-
* @param {ImageEditor} options.editor - экземпляр редактора с доступом к canvas
|
|
2754
|
-
*/
|
|
2755
|
-
constructor(e) {
|
|
2756
|
-
var {
|
|
2757
|
-
editor: t
|
|
2758
|
-
} = e;
|
|
2759
|
-
this.editor = t;
|
|
2743
|
+
class pt {
|
|
2744
|
+
constructor({ editor: e }) {
|
|
2745
|
+
this.editor = e;
|
|
2760
2746
|
}
|
|
2761
2747
|
/**
|
|
2762
2748
|
* Группировка объектов
|
|
@@ -2765,24 +2751,20 @@ class It {
|
|
|
2765
2751
|
* @param {fabric.Object} options.object - массив объектов для группировки
|
|
2766
2752
|
* @fires editor:objects-grouped
|
|
2767
2753
|
*/
|
|
2768
|
-
group(
|
|
2769
|
-
|
|
2770
|
-
|
|
2771
|
-
|
|
2772
|
-
|
|
2773
|
-
canvas: a,
|
|
2774
|
-
historyManager: n
|
|
2775
|
-
} = this.editor;
|
|
2754
|
+
group({
|
|
2755
|
+
object: e,
|
|
2756
|
+
withoutSave: t
|
|
2757
|
+
} = {}) {
|
|
2758
|
+
const { canvas: a, historyManager: n } = this.editor;
|
|
2776
2759
|
n.suspendHistory();
|
|
2777
|
-
|
|
2778
|
-
if (i
|
|
2779
|
-
|
|
2780
|
-
|
|
2781
|
-
|
|
2782
|
-
|
|
2783
|
-
|
|
2784
|
-
|
|
2785
|
-
}
|
|
2760
|
+
const i = e || a.getActiveObject();
|
|
2761
|
+
if (!i || !(i instanceof N)) return;
|
|
2762
|
+
const s = i.getObjects(), r = new je(s);
|
|
2763
|
+
s.forEach((c) => a.remove(c)), r.set("id", `${r.type}-${A()}`), a.add(r), a.setActiveObject(r), a.renderAll(), n.resumeHistory(), t || n.saveState(), a.fire("editor:objects-grouped", {
|
|
2764
|
+
object: i,
|
|
2765
|
+
group: r,
|
|
2766
|
+
withoutSave: t
|
|
2767
|
+
});
|
|
2786
2768
|
}
|
|
2787
2769
|
/**
|
|
2788
2770
|
* Разгруппировка объектов
|
|
@@ -2791,31 +2773,27 @@ class It {
|
|
|
2791
2773
|
* @param {Boolean} options.withoutSave - Не сохранять состояние
|
|
2792
2774
|
* @fires editor:objects-ungrouped
|
|
2793
2775
|
*/
|
|
2794
|
-
ungroup(
|
|
2795
|
-
|
|
2796
|
-
|
|
2797
|
-
|
|
2798
|
-
|
|
2799
|
-
canvas: a,
|
|
2800
|
-
historyManager: n
|
|
2801
|
-
} = this.editor;
|
|
2776
|
+
ungroup({
|
|
2777
|
+
object: e,
|
|
2778
|
+
withoutSave: t
|
|
2779
|
+
} = {}) {
|
|
2780
|
+
const { canvas: a, historyManager: n } = this.editor;
|
|
2802
2781
|
n.suspendHistory();
|
|
2803
|
-
|
|
2804
|
-
if (!(
|
|
2805
|
-
|
|
2806
|
-
|
|
2807
|
-
|
|
2808
|
-
|
|
2809
|
-
|
|
2810
|
-
|
|
2811
|
-
|
|
2812
|
-
|
|
2813
|
-
|
|
2814
|
-
|
|
2815
|
-
}
|
|
2782
|
+
const i = e || a.getActiveObject();
|
|
2783
|
+
if (!(i instanceof je)) return;
|
|
2784
|
+
const s = i.removeAll();
|
|
2785
|
+
a.remove(i), s.forEach((c) => a.add(c));
|
|
2786
|
+
const r = new N(s, {
|
|
2787
|
+
canvas: a
|
|
2788
|
+
});
|
|
2789
|
+
a.setActiveObject(r), a.renderAll(), n.resumeHistory(), t || n.saveState(), a.fire("editor:objects-ungrouped", {
|
|
2790
|
+
object: i,
|
|
2791
|
+
selection: r,
|
|
2792
|
+
withoutSave: t
|
|
2793
|
+
});
|
|
2816
2794
|
}
|
|
2817
2795
|
}
|
|
2818
|
-
class
|
|
2796
|
+
class It {
|
|
2819
2797
|
/**
|
|
2820
2798
|
* @param {object} options
|
|
2821
2799
|
* @param {ImageEditor} options.editor - экземпляр редактора с доступом к canvas
|
|
@@ -2837,7 +2815,7 @@ class At {
|
|
|
2837
2815
|
objectLockManager: a
|
|
2838
2816
|
} = this.editor;
|
|
2839
2817
|
e.discardActiveObject();
|
|
2840
|
-
var n = t.getObjects(), i = n.some((r) => r.locked), s = n.length > 1 ? new
|
|
2818
|
+
var n = t.getObjects(), i = n.some((r) => r.locked), s = n.length > 1 ? new N(t.getObjects(), {
|
|
2841
2819
|
canvas: e
|
|
2842
2820
|
}) : n[0];
|
|
2843
2821
|
i && a.lockObject({
|
|
@@ -2849,36 +2827,25 @@ class At {
|
|
|
2849
2827
|
});
|
|
2850
2828
|
}
|
|
2851
2829
|
}
|
|
2852
|
-
class
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
* @param {ImageEditor} options.editor - экземпляр редактора с доступом к canvas
|
|
2856
|
-
*/
|
|
2857
|
-
constructor(e) {
|
|
2858
|
-
var {
|
|
2859
|
-
editor: t
|
|
2860
|
-
} = e;
|
|
2861
|
-
this.editor = t;
|
|
2830
|
+
class At {
|
|
2831
|
+
constructor({ editor: e }) {
|
|
2832
|
+
this.editor = e;
|
|
2862
2833
|
}
|
|
2863
2834
|
/**
|
|
2864
2835
|
* Удалить выбранные объекты
|
|
2865
2836
|
* @param {Object} options
|
|
2866
|
-
* @param {
|
|
2837
|
+
* @param {FabricObject[]} options.objects - массив объектов для удаления
|
|
2867
2838
|
* @param {Boolean} options.withoutSave - Не сохранять состояние
|
|
2868
2839
|
* @fires editor:objects-deleted
|
|
2869
2840
|
*/
|
|
2870
|
-
deleteSelectedObjects(
|
|
2871
|
-
|
|
2872
|
-
|
|
2873
|
-
|
|
2874
|
-
|
|
2875
|
-
canvas: a,
|
|
2876
|
-
historyManager: n,
|
|
2877
|
-
groupingManager: i
|
|
2878
|
-
} = this.editor, s = (e || a.getActiveObjects()).filter((r) => !r.locked);
|
|
2841
|
+
deleteSelectedObjects({
|
|
2842
|
+
objects: e,
|
|
2843
|
+
withoutSave: t
|
|
2844
|
+
} = {}) {
|
|
2845
|
+
const { canvas: a, historyManager: n, groupingManager: i } = this.editor, s = (e || a.getActiveObjects()).filter((r) => !r.locked);
|
|
2879
2846
|
s != null && s.length && (n.suspendHistory(), s.forEach((r) => {
|
|
2880
2847
|
if (r.type === "group" && r.format !== "svg") {
|
|
2881
|
-
i.ungroup(r), this.deleteSelectedObjects();
|
|
2848
|
+
i.ungroup({ object: r, withoutSave: t }), this.deleteSelectedObjects();
|
|
2882
2849
|
return;
|
|
2883
2850
|
}
|
|
2884
2851
|
a.remove(r);
|
|
@@ -2888,7 +2855,7 @@ class St {
|
|
|
2888
2855
|
}));
|
|
2889
2856
|
}
|
|
2890
2857
|
}
|
|
2891
|
-
const
|
|
2858
|
+
const St = {
|
|
2892
2859
|
IMAGE_MANAGER: {
|
|
2893
2860
|
/**
|
|
2894
2861
|
* Некорректный Content-Type изображения
|
|
@@ -2944,6 +2911,10 @@ const Ct = {
|
|
|
2944
2911
|
* Ошибка при получении активного объекта.
|
|
2945
2912
|
*/
|
|
2946
2913
|
NO_ACTIVE_OBJECT: "NO_ACTIVE_OBJECT"
|
|
2914
|
+
},
|
|
2915
|
+
HISTORY_MANAGER: {
|
|
2916
|
+
UNDO_ERROR: "UNDO_ERROR",
|
|
2917
|
+
REDO_ERROR: "REDO_ERROR"
|
|
2947
2918
|
}
|
|
2948
2919
|
};
|
|
2949
2920
|
class q {
|
|
@@ -3014,10 +2985,10 @@ class q {
|
|
|
3014
2985
|
}, r)), this.editor.canvas.fire("editor:warning", r);
|
|
3015
2986
|
}
|
|
3016
2987
|
static isValidErrorCode(e) {
|
|
3017
|
-
return e ? Object.values(
|
|
2988
|
+
return e ? Object.values(St).some((t) => Object.values(t).includes(e)) : !1;
|
|
3018
2989
|
}
|
|
3019
2990
|
}
|
|
3020
|
-
class
|
|
2991
|
+
class ue {
|
|
3021
2992
|
/**
|
|
3022
2993
|
* Конструктор класса ImageEditor.
|
|
3023
2994
|
* @param {string} canvasId - идентификатор канваса, в котором будет создан редактор
|
|
@@ -3027,7 +2998,7 @@ class de {
|
|
|
3027
2998
|
this.options = t, this.containerId = e, this.editorId = `${e}-${A()}`, this.clipboard = null, this.init();
|
|
3028
2999
|
}
|
|
3029
3000
|
init() {
|
|
3030
|
-
return
|
|
3001
|
+
return O(this, null, function* () {
|
|
3031
3002
|
const {
|
|
3032
3003
|
editorContainerWidth: e,
|
|
3033
3004
|
editorContainerHeight: t,
|
|
@@ -3040,7 +3011,7 @@ class de {
|
|
|
3040
3011
|
scaleType: u,
|
|
3041
3012
|
_onReadyCallback: l
|
|
3042
3013
|
} = this.options;
|
|
3043
|
-
if (
|
|
3014
|
+
if (Je.apply(), this.canvas = new Ze(this.containerId, this.options), this.moduleLoader = new He(), this.workerManager = new Ye(), this.errorManager = new q({ editor: this }), this.historyManager = new dt({ editor: this }), this.toolbar = new ut({ editor: this }), this.transformManager = new vt({ editor: this }), this.canvasManager = new mt({ editor: this }), this.imageManager = new D({ editor: this }), this.layerManager = new $({ editor: this }), this.shapeManager = new jt({ editor: this }), this.interactionBlocker = new ft({ editor: this }), this.clipboardManager = new yt({ editor: this }), this.objectLockManager = new bt({ editor: this }), this.groupingManager = new pt({ editor: this }), this.selectionManager = new It({ editor: this }), this.deletionManager = new At({ 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(a), this.canvasManager.setCanvasWrapperHeight(n), this.canvasManager.setCanvasCSSWidth(i), this.canvasManager.setCanvasCSSHeight(s), r != null && r.source) {
|
|
3044
3015
|
const {
|
|
3045
3016
|
source: d,
|
|
3046
3017
|
scale: h = `image-${u}`,
|
|
@@ -3060,7 +3031,7 @@ class de {
|
|
|
3060
3031
|
this.montageArea = this.shapeManager.addRectangle({
|
|
3061
3032
|
width: e,
|
|
3062
3033
|
height: t,
|
|
3063
|
-
fill:
|
|
3034
|
+
fill: ue._createMosaicPattern(),
|
|
3064
3035
|
stroke: null,
|
|
3065
3036
|
strokeWidth: 0,
|
|
3066
3037
|
selectable: !1,
|
|
@@ -3104,13 +3075,13 @@ class de {
|
|
|
3104
3075
|
const e = document.createElement("canvas");
|
|
3105
3076
|
e.width = 20, e.height = 20;
|
|
3106
3077
|
const t = e.getContext("2d");
|
|
3107
|
-
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
|
|
3078
|
+
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 ze({
|
|
3108
3079
|
source: e,
|
|
3109
3080
|
repeat: "repeat"
|
|
3110
3081
|
});
|
|
3111
3082
|
}
|
|
3112
3083
|
}
|
|
3113
|
-
const
|
|
3084
|
+
const Ct = {
|
|
3114
3085
|
/**
|
|
3115
3086
|
* Опции редактора
|
|
3116
3087
|
*/
|
|
@@ -3199,13 +3170,13 @@ const Dt = {
|
|
|
3199
3170
|
resetObjectFitByDoubleClick: !0
|
|
3200
3171
|
};
|
|
3201
3172
|
function wt(o, e = {}) {
|
|
3202
|
-
const t = C(C({},
|
|
3173
|
+
const t = C(C({}, Ct), e), a = document.getElementById(o);
|
|
3203
3174
|
if (!a)
|
|
3204
3175
|
return Promise.reject(new Error(`Контейнер с ID "${o}" не найден.`));
|
|
3205
3176
|
const n = document.createElement("canvas");
|
|
3206
3177
|
return n.id = `${o}-canvas`, a.appendChild(n), t.editorContainer = a, new Promise((i) => {
|
|
3207
3178
|
t._onReadyCallback = i;
|
|
3208
|
-
const s = new
|
|
3179
|
+
const s = new ue(n.id, t);
|
|
3209
3180
|
window[o] = s;
|
|
3210
3181
|
});
|
|
3211
3182
|
}
|