@anu3ev/fabric-image-editor 0.1.61 → 0.1.62
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 +333 -309
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
1
|
+
var be = Object.defineProperty, ye = Object.defineProperties;
|
|
2
|
+
var pe = Object.getOwnPropertyDescriptors;
|
|
3
|
+
var Y = Object.getOwnPropertySymbols;
|
|
4
|
+
var de = Object.prototype.hasOwnProperty, le = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var ce = (r, e, t) => e in r ? be(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, y = (r, e) => {
|
|
6
6
|
for (var t in e || (e = {}))
|
|
7
|
-
|
|
8
|
-
if (
|
|
9
|
-
for (var t of
|
|
10
|
-
|
|
11
|
-
return
|
|
12
|
-
},
|
|
13
|
-
var
|
|
7
|
+
de.call(e, t) && ce(r, t, e[t]);
|
|
8
|
+
if (Y)
|
|
9
|
+
for (var t of Y(e))
|
|
10
|
+
le.call(e, t) && ce(r, t, e[t]);
|
|
11
|
+
return r;
|
|
12
|
+
}, he = (r, e) => ye(r, pe(e));
|
|
13
|
+
var _ = (r, e) => {
|
|
14
14
|
var t = {};
|
|
15
|
-
for (var s in
|
|
16
|
-
|
|
17
|
-
if (
|
|
18
|
-
for (var s of
|
|
19
|
-
e.indexOf(s) < 0 &&
|
|
15
|
+
for (var s in r)
|
|
16
|
+
de.call(r, s) && e.indexOf(s) < 0 && (t[s] = r[s]);
|
|
17
|
+
if (r != null && Y)
|
|
18
|
+
for (var s of Y(r))
|
|
19
|
+
e.indexOf(s) < 0 && le.call(r, s) && (t[s] = r[s]);
|
|
20
20
|
return t;
|
|
21
21
|
};
|
|
22
|
-
var v = (
|
|
22
|
+
var v = (r, e, t) => new Promise((s, n) => {
|
|
23
23
|
var i = (d) => {
|
|
24
24
|
try {
|
|
25
25
|
o(t.next(d));
|
|
26
|
-
} catch (
|
|
27
|
-
n(
|
|
26
|
+
} catch (c) {
|
|
27
|
+
n(c);
|
|
28
28
|
}
|
|
29
29
|
}, a = (d) => {
|
|
30
30
|
try {
|
|
31
31
|
o(t.throw(d));
|
|
32
|
-
} catch (
|
|
33
|
-
n(
|
|
32
|
+
} catch (c) {
|
|
33
|
+
n(c);
|
|
34
34
|
}
|
|
35
35
|
}, o = (d) => d.done ? s(d.value) : Promise.resolve(d.value).then(i, a);
|
|
36
|
-
o((t = t.apply(
|
|
36
|
+
o((t = t.apply(r, e)).next());
|
|
37
37
|
});
|
|
38
|
-
import { ActiveSelection as
|
|
39
|
-
import { create as
|
|
40
|
-
import
|
|
41
|
-
var
|
|
38
|
+
import { ActiveSelection as p, util as H, controlsUtils as Ie, InteractiveFabricObject as ve, loadSVGFromURL as Ae, FabricImage as U, Point as P, Rect as Se, Circle as Ce, Triangle as Ne, Group as $, Canvas as De, Pattern as Le } from "fabric";
|
|
39
|
+
import { create as we } from "jsondiffpatch";
|
|
40
|
+
import Ee from "diff-match-patch";
|
|
41
|
+
var Oe = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", L = 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 += Oe[s[e] & 63];
|
|
44
44
|
return t;
|
|
45
45
|
};
|
|
46
|
-
class
|
|
46
|
+
class R {
|
|
47
47
|
/**
|
|
48
48
|
* Конструктор принимает редактор и опции.
|
|
49
49
|
* @param params
|
|
@@ -61,7 +61,7 @@ class z {
|
|
|
61
61
|
* @param params.options.adaptCanvasToContainerOnResize — адаптировать канвас к размерам контейнера при изменении размеров окна
|
|
62
62
|
*/
|
|
63
63
|
constructor({ editor: e, options: t = {} }) {
|
|
64
|
-
this.isDragging = !1, this.lastMouseX = 0, this.lastMouseY = 0, this.isUndoRedoKeyPressed = !1, this.isSpacePressed = !1, this.savedSelection = [], this.canvasDragging = !1, this.mouseWheelZooming = !1, this.bringToFrontOnSelection = !1, this.resetObjectFitByDoubleClick = !1, this.copyObjectsByHotkey = !1, this.pasteImageFromClipboard = !1, this.undoRedoByHotKeys = !1, this.selectAllByHotkey = !1, this.deleteObjectsByHotkey = !1, this.adaptCanvasToContainerOnResize = !1, this.editor = e, this.canvas = e.canvas, this.options = t, this.handleContainerResizeBound =
|
|
64
|
+
this.isDragging = !1, this.lastMouseX = 0, this.lastMouseY = 0, this.isUndoRedoKeyPressed = !1, this.isSpacePressed = !1, this.savedSelection = [], this.canvasDragging = !1, this.mouseWheelZooming = !1, this.bringToFrontOnSelection = !1, this.resetObjectFitByDoubleClick = !1, this.copyObjectsByHotkey = !1, this.pasteImageFromClipboard = !1, this.undoRedoByHotKeys = !1, this.selectAllByHotkey = !1, this.deleteObjectsByHotkey = !1, this.adaptCanvasToContainerOnResize = !1, this.editor = e, this.canvas = e.canvas, this.options = t, this.handleContainerResizeBound = R.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 = R.debounce(this.handleObjectModifiedHistory.bind(this), 300), this.handleObjectRotatingHistoryBound = R.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();
|
|
65
65
|
}
|
|
66
66
|
/**
|
|
67
67
|
* Инициализация всех обработчиков согласно опциям.
|
|
@@ -76,10 +76,10 @@ class z {
|
|
|
76
76
|
pasteImageFromClipboard: a,
|
|
77
77
|
undoRedoByHotKeys: o,
|
|
78
78
|
selectAllByHotkey: d,
|
|
79
|
-
deleteObjectsByHotkey:
|
|
79
|
+
deleteObjectsByHotkey: c,
|
|
80
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), n && (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 }), i && document.addEventListener("keydown", this.handleCopyEventBound, { capture: !0 }), a && document.addEventListener("paste", this.handlePasteEventBound, { capture: !0 }), o && (document.addEventListener("keydown", this.handleUndoRedoEventBound, { capture: !0 }), document.addEventListener("keyup", this.handleUndoRedoKeyUpBound, { capture: !0 })), d && document.addEventListener("keydown", this.handleSelectAllEventBound, { capture: !0 }),
|
|
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), n && (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 }), i && document.addEventListener("keydown", this.handleCopyEventBound, { capture: !0 }), a && document.addEventListener("paste", this.handlePasteEventBound, { capture: !0 }), o && (document.addEventListener("keydown", this.handleUndoRedoEventBound, { capture: !0 }), document.addEventListener("keyup", this.handleUndoRedoKeyUpBound, { capture: !0 })), d && document.addEventListener("keydown", this.handleSelectAllEventBound, { capture: !0 }), c && 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);
|
|
83
83
|
}
|
|
84
84
|
/**
|
|
85
85
|
* При массовом выделении объектов удаляем из него залоченные.
|
|
@@ -88,20 +88,29 @@ class z {
|
|
|
88
88
|
* @param params.e - событие указателя (опционально)
|
|
89
89
|
*/
|
|
90
90
|
_filterLockedSelection({ selected: e, e: t }) {
|
|
91
|
-
if (!(e != null && e.length) || !(t instanceof MouseEvent) || e.length === 1
|
|
92
|
-
const n = e.filter((a) => !a.locked);
|
|
93
|
-
if (
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
91
|
+
if (!(e != null && e.length) || !(t instanceof MouseEvent) || e.length === 1) return;
|
|
92
|
+
const s = e.filter((a) => a.locked), n = e.filter((a) => !a.locked);
|
|
93
|
+
if (s.length === 0) return;
|
|
94
|
+
if (n.length > 0) {
|
|
95
|
+
if (n.length === 1)
|
|
96
|
+
this.canvas.setActiveObject(n[0]);
|
|
97
|
+
else {
|
|
98
|
+
const a = new p(n, {
|
|
99
|
+
canvas: this.canvas
|
|
100
|
+
});
|
|
101
|
+
this.canvas.setActiveObject(a);
|
|
102
|
+
}
|
|
103
|
+
this.canvas.requestRenderAll();
|
|
99
104
|
return;
|
|
100
105
|
}
|
|
101
|
-
const i = new
|
|
106
|
+
const i = new p(e, {
|
|
102
107
|
canvas: this.canvas
|
|
103
108
|
});
|
|
104
|
-
this.
|
|
109
|
+
this.editor.objectLockManager.lockObject({
|
|
110
|
+
object: i,
|
|
111
|
+
skipInnerObjects: !0,
|
|
112
|
+
withoutSave: !0
|
|
113
|
+
}), this.canvas.setActiveObject(i), this.canvas.requestRenderAll();
|
|
105
114
|
}
|
|
106
115
|
/**
|
|
107
116
|
* Обработчики для сохранения состояния редактора в истории.
|
|
@@ -205,7 +214,7 @@ class z {
|
|
|
205
214
|
if (n || i) return;
|
|
206
215
|
this.isSpacePressed = !0, e.preventDefault();
|
|
207
216
|
const a = t.getActiveObject() || null;
|
|
208
|
-
a instanceof
|
|
217
|
+
a instanceof p ? this.savedSelection = a.getObjects().slice() : a && (this.savedSelection = [a]), t.discardActiveObject(), t.set({
|
|
209
218
|
selection: !1,
|
|
210
219
|
defaultCursor: "grab"
|
|
211
220
|
}), t.setCursor("grab"), s.canvasManager.getObjects().forEach((o) => {
|
|
@@ -244,7 +253,7 @@ class z {
|
|
|
244
253
|
t.setActiveObject(e[0]);
|
|
245
254
|
return;
|
|
246
255
|
}
|
|
247
|
-
const n = e.filter((a) => s.canvasManager.getObjects().includes(a)), i = new
|
|
256
|
+
const n = e.filter((a) => s.canvasManager.getObjects().includes(a)), i = new p(n, { canvas: t });
|
|
248
257
|
t.setActiveObject(i);
|
|
249
258
|
}
|
|
250
259
|
// --- Обработчики для событий canvas (Fabric) ---
|
|
@@ -254,7 +263,7 @@ class z {
|
|
|
254
263
|
* @param options.e — объект события (MouseEvent или TouchEvent)
|
|
255
264
|
*/
|
|
256
265
|
handleCanvasDragStart({ e }) {
|
|
257
|
-
!this.isSpacePressed || !(e instanceof MouseEvent) || (this.isDragging = !0, this.lastMouseX = e.clientX, this.lastMouseY = e.clientY, this.canvas.setCursor("grabbing"));
|
|
266
|
+
!this.isSpacePressed || !(e instanceof MouseEvent) || (this.isDragging = !0, this.lastMouseX = e.clientX, this.lastMouseY = e.clientY, this.canvas.set("defaultCursor", "grabbing"), this.canvas.setCursor("grabbing"));
|
|
258
267
|
}
|
|
259
268
|
/**
|
|
260
269
|
* Перетаскивание канваса (mouse:move).
|
|
@@ -352,7 +361,7 @@ class z {
|
|
|
352
361
|
};
|
|
353
362
|
}
|
|
354
363
|
}
|
|
355
|
-
class
|
|
364
|
+
class Te {
|
|
356
365
|
/**
|
|
357
366
|
* Класс для динамической загрузки внешних модулей.
|
|
358
367
|
*/
|
|
@@ -370,21 +379,21 @@ class Ee {
|
|
|
370
379
|
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}"`));
|
|
371
380
|
}
|
|
372
381
|
}
|
|
373
|
-
function
|
|
382
|
+
function ke(r) {
|
|
374
383
|
return new Worker(
|
|
375
384
|
"" + new URL("assets/worker-CN39s7P7.js", import.meta.url).href,
|
|
376
385
|
{
|
|
377
|
-
name:
|
|
386
|
+
name: r == null ? void 0 : r.name
|
|
378
387
|
}
|
|
379
388
|
);
|
|
380
389
|
}
|
|
381
|
-
class
|
|
390
|
+
class xe {
|
|
382
391
|
/**
|
|
383
392
|
* @param scriptUrl — URL скрипта воркера.
|
|
384
393
|
* По-умолчанию использует DefaultWorker из соседнего файла
|
|
385
394
|
*/
|
|
386
395
|
constructor(e) {
|
|
387
|
-
e ? this.worker = new Worker(e, { type: "module" }) : this.worker = new
|
|
396
|
+
e ? this.worker = new Worker(e, { type: "module" }) : this.worker = new ke(), this._callbacks = /* @__PURE__ */ new Map(), this.worker.onmessage = this._handleMessage.bind(this);
|
|
388
397
|
}
|
|
389
398
|
/**
|
|
390
399
|
* Обработчик сообщений от воркера
|
|
@@ -424,50 +433,50 @@ class Te {
|
|
|
424
433
|
this.worker.terminate();
|
|
425
434
|
}
|
|
426
435
|
}
|
|
427
|
-
const N = 12,
|
|
428
|
-
function
|
|
429
|
-
const i = N, a =
|
|
430
|
-
|
|
436
|
+
const N = 12, Be = 2, J = 8, K = 20, Ze = 100, q = 20, ee = 8, Ue = 100, F = 32, te = 1, ze = "#2B2D33", se = "#3D8BF4", ne = "#FFFFFF";
|
|
437
|
+
function W(r, e, t, s, n) {
|
|
438
|
+
const i = N, a = Be;
|
|
439
|
+
r.save(), r.translate(e, t), r.rotate(H.degreesToRadians(n.angle)), r.fillStyle = ne, r.strokeStyle = se, r.lineWidth = te, r.beginPath(), r.roundRect(-i / 2, -i / 2, i, i, a), r.fill(), r.stroke(), r.restore();
|
|
431
440
|
}
|
|
432
|
-
function
|
|
433
|
-
const i =
|
|
434
|
-
|
|
441
|
+
function ge(r, e, t, s, n) {
|
|
442
|
+
const i = J, a = K, o = Ze;
|
|
443
|
+
r.save(), r.translate(e, t), r.rotate(H.degreesToRadians(n.angle)), r.fillStyle = ne, r.strokeStyle = se, r.lineWidth = te, r.beginPath(), r.roundRect(-i / 2, -a / 2, i, a, o), r.fill(), r.stroke(), r.restore();
|
|
435
444
|
}
|
|
436
|
-
function
|
|
437
|
-
const i =
|
|
438
|
-
|
|
445
|
+
function ue(r, e, t, s, n) {
|
|
446
|
+
const i = q, a = ee, o = Ue;
|
|
447
|
+
r.save(), r.translate(e, t), r.rotate(H.degreesToRadians(n.angle)), r.fillStyle = ne, r.strokeStyle = se, r.lineWidth = te, r.beginPath(), r.roundRect(-i / 2, -a / 2, i, a, o), r.fill(), r.stroke(), r.restore();
|
|
439
448
|
}
|
|
440
|
-
const
|
|
441
|
-
|
|
442
|
-
function
|
|
443
|
-
const a =
|
|
444
|
-
|
|
449
|
+
const Re = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", me = new Image();
|
|
450
|
+
me.src = Re;
|
|
451
|
+
function He(r, e, t, s, n) {
|
|
452
|
+
const a = F / 2;
|
|
453
|
+
r.save(), r.translate(e, t), r.rotate(H.degreesToRadians(n.angle)), r.fillStyle = ze, r.beginPath(), r.arc(0, 0, a, 0, 2 * Math.PI), r.fill(), r.drawImage(me, -a / 2, -a / 2, a, a), r.restore();
|
|
445
454
|
}
|
|
446
|
-
const
|
|
455
|
+
const Ye = {
|
|
447
456
|
// Угловые точки
|
|
448
457
|
tl: {
|
|
449
|
-
render:
|
|
458
|
+
render: W,
|
|
450
459
|
sizeX: N,
|
|
451
460
|
sizeY: N,
|
|
452
461
|
offsetX: 0,
|
|
453
462
|
offsetY: 0
|
|
454
463
|
},
|
|
455
464
|
tr: {
|
|
456
|
-
render:
|
|
465
|
+
render: W,
|
|
457
466
|
sizeX: N,
|
|
458
467
|
sizeY: N,
|
|
459
468
|
offsetX: 0,
|
|
460
469
|
offsetY: 0
|
|
461
470
|
},
|
|
462
471
|
bl: {
|
|
463
|
-
render:
|
|
472
|
+
render: W,
|
|
464
473
|
sizeX: N,
|
|
465
474
|
sizeY: N,
|
|
466
475
|
offsetX: 0,
|
|
467
476
|
offsetY: 0
|
|
468
477
|
},
|
|
469
478
|
br: {
|
|
470
|
-
render:
|
|
479
|
+
render: W,
|
|
471
480
|
sizeX: N,
|
|
472
481
|
sizeY: N,
|
|
473
482
|
offsetX: 0,
|
|
@@ -475,47 +484,47 @@ const Re = {
|
|
|
475
484
|
},
|
|
476
485
|
// Середина вертикалей
|
|
477
486
|
ml: {
|
|
478
|
-
render:
|
|
479
|
-
sizeX:
|
|
480
|
-
sizeY:
|
|
487
|
+
render: ge,
|
|
488
|
+
sizeX: J,
|
|
489
|
+
sizeY: K,
|
|
481
490
|
offsetX: 0,
|
|
482
491
|
offsetY: 0
|
|
483
492
|
},
|
|
484
493
|
mr: {
|
|
485
|
-
render:
|
|
486
|
-
sizeX:
|
|
487
|
-
sizeY:
|
|
494
|
+
render: ge,
|
|
495
|
+
sizeX: J,
|
|
496
|
+
sizeY: K,
|
|
488
497
|
offsetX: 0,
|
|
489
498
|
offsetY: 0
|
|
490
499
|
},
|
|
491
500
|
// Середина горизонталей
|
|
492
501
|
mt: {
|
|
493
|
-
render:
|
|
494
|
-
sizeX:
|
|
495
|
-
sizeY:
|
|
502
|
+
render: ue,
|
|
503
|
+
sizeX: q,
|
|
504
|
+
sizeY: ee,
|
|
496
505
|
offsetX: 0,
|
|
497
506
|
offsetY: 0
|
|
498
507
|
},
|
|
499
508
|
mb: {
|
|
500
|
-
render:
|
|
501
|
-
sizeX:
|
|
502
|
-
sizeY:
|
|
509
|
+
render: ue,
|
|
510
|
+
sizeX: q,
|
|
511
|
+
sizeY: ee,
|
|
503
512
|
offsetX: 0,
|
|
504
513
|
offsetY: 0
|
|
505
514
|
},
|
|
506
515
|
// Специальный «rotate» контрол
|
|
507
516
|
mtr: {
|
|
508
|
-
render:
|
|
509
|
-
sizeX:
|
|
510
|
-
sizeY:
|
|
517
|
+
render: He,
|
|
518
|
+
sizeX: F,
|
|
519
|
+
sizeY: F,
|
|
511
520
|
offsetX: 0,
|
|
512
|
-
offsetY: -
|
|
521
|
+
offsetY: -F
|
|
513
522
|
}
|
|
514
523
|
};
|
|
515
|
-
class
|
|
524
|
+
class _e {
|
|
516
525
|
static apply() {
|
|
517
|
-
const e =
|
|
518
|
-
Object.entries(
|
|
526
|
+
const e = Ie.createObjectDefaultControls();
|
|
527
|
+
Object.entries(Ye).forEach(([t, s]) => {
|
|
519
528
|
Object.assign(e[t], {
|
|
520
529
|
render: s.render,
|
|
521
530
|
sizeX: s.sizeX,
|
|
@@ -526,10 +535,10 @@ class He {
|
|
|
526
535
|
var l;
|
|
527
536
|
(l = a.target.canvas) == null || l.setCursor("grabbing");
|
|
528
537
|
});
|
|
529
|
-
}),
|
|
538
|
+
}), ve.ownDefaults.controls = e;
|
|
530
539
|
}
|
|
531
540
|
}
|
|
532
|
-
const
|
|
541
|
+
const We = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNi44NzUgMi41YS42MjUuNjI1IDAgMCAwLS42MjUuNjI0VjYuMjVIMy4xMjVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2MTBjMCAuMzQ1LjI4LjYyNS42MjUuNjI1aDEwYy4zNDUgMCAuNjI1LS4yOC42MjUtLjYyNXYtMy4xMjZoMy4xMjVjLjM0NSAwIC42MjUtLjI4LjYyNS0uNjI1di0xMGEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTEwWm02Ljg3NSAxMGgyLjVWMy43NUg3LjV2Mi41aDUuNjI1Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NS42MjRabS0xMCAzLjc1VjcuNWg4Ljc1djguNzVIMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", Pe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi41IDcuNWMwLS42OS41Ni0xLjI1IDEuMjUtMS4yNWgxMi41Yy42OSAwIDEuMjUuNTYgMS4yNSAxLjI1djguNzVjMCAuNjktLjU2IDEuMjUtMS4yNSAxLjI1SDMuNzVjLS42OSAwLTEuMjUtLjU2LTEuMjUtMS4yNVY3LjVabTEzLjc1IDBIMy43NXY4Ljc1aDEyLjVWNy41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMS44NzVhMi4xODggMi4xODggMCAwIDAtMi4xODggMi4xODh2Mi44MTJhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyYTMuNDM3IDMuNDM3IDAgMSAxIDYuODc1IDB2Mi44MTNhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyQTIuMTg4IDIuMTg4IDAgMCAwIDEwIDEuODc2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEwIDEyLjgxM2EuOTM3LjkzNyAwIDEgMCAwLTEuODc1LjkzNy45MzcgMCAwIDAgMCAxLjg3NFoiLz48L3N2Zz4=", Fe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE2LjI1IDYuMjVINy41VjQuMzc1YTIuNSAyLjUgMCAwIDEgMi41LTIuNWMxLjIgMCAyLjI4MS44NiAyLjUxMiAyYS42MjUuNjI1IDAgMCAwIDEuMjI2LS4yNWMtLjM1NC0xLjczOC0xLjkyNS0zLTMuNzM4LTNhMy43NTQgMy43NTQgMCAwIDAtMy43NSAzLjc1VjYuMjVoLTIuNUExLjI1IDEuMjUgMCAwIDAgMi41IDcuNXY4Ljc1YTEuMjUgMS4yNSAwIDAgMCAxLjI1IDEuMjVoMTIuNWExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjcuNWExLjI1IDEuMjUgMCAwIDAtMS4yNS0xLjI1Wm0wIDEwSDMuNzVWNy41aDEyLjV2OC43NVptLTUuMzEzLTQuMzc1YS45MzcuOTM3IDAgMSAxLTEuODc0IDAgLjkzNy45MzcgMCAwIDEgMS44NzQgMFoiLz48L3N2Zz4K", Ve = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIuNSA4LjEyNSAxMCAxMi41bDcuNS00LjM3NUwxMCAzLjc1IDIuNSA4LjEyNVoiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjY4NSAzLjIxYS42MjUuNjI1IDAgMCAxIC42MyAwbDcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOGw3LjUtNC4zNzVaTTMuNzQgOC4xMjUgMTAgMTEuNzc2bDYuMjYtMy42NTFMMTAgNC40NzQgMy43NCA4LjEyNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA5LjQ2YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDExLjc3NmwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA5LjQ2Wm0tMS42NiAyLjQxNUwxMCAxNS41MjZsNi4yNi0zLjY1MS0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNi0xLjk3NSAxLjE1MVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", Ge = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMy4yMWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDguMTI1IDEwIDExLjc3Nmw2LjI2LTMuNjUxTDEwIDQuNDc0IDMuNzQgOC4xMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjcxNCAxMCAxMCAxMi41bDQuMjg2LTIuNSAzLjIxNCAxLjg3NUwxMCAxNi4yNWwtNy41LTQuMzc1TDUuNzE0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDkuNDZhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgMTEuNzc2bDMuOTctMi4zMTZhLjYyNS42MjUgMCAwIDEgLjYzIDBsMy4yMTUgMS44NzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhMNS40IDkuNDZabS0xLjY2IDIuNDE1TDEwIDE1LjUyNmw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2LTEuOTc1IDEuMTUxWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", Xe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTIuNSA2LjI1IDcuNSA0LjM3NSA3LjUtNC4zNzVMMTAgMS44NzUgMi41IDYuMjVaIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMS4zMzVhLjYyNS42MjUgMCAwIDEgLjYzIDBsNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4bDcuNS00LjM3NVpNMy43NCA2LjI1IDEwIDkuOTAxbDYuMjYtMy42NTFMMTAgMi41OTkgMy43NCA2LjI1WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDExLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCAxMy42NTFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgMTEuMzM1Wk0zLjc0IDEzLjc1IDEwIDE3LjQwMWw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTMuNzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgNy41ODVhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgOS45MDFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgNy41ODVaTTMuNzQgMTAgMTAgMTMuNjUxIDE2LjI2IDEwbC0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNkwzLjc0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", Qe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMS45NiAxMy40MzVhLjYyNS42MjUgMCAwIDEgLjg1NS0uMjI1TDEwIDE3LjQwMWw3LjE4NS00LjE5YS42MjUuNjI1IDAgMCAxIC42MyAxLjA3OWwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEtLjIyNS0uODU1Wk05LjY4NSAxLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDYuMjUgMTAgOS45MDFsNi4yNi0zLjY1MUwxMCAyLjU5OSAzLjc0IDYuMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im01LjcxNCAxMS44NzUgNC4yODYgMi41IDQuMjg2LTIuNUwxNy41IDEzLjc1IDEwIDE4LjEyNSAyLjUgMTMuNzVsMy4yMTQtMS44NzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgMTEuMzM1YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDEzLjY1MWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCAxMS4zMzVaTTMuNzQgMTMuNzUgMTAgMTcuNDAxbDYuMjYtMy42NTEtMS45NzQtMS4xNTEtMy45NzEgMi4zMTZhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTMuOTctMi4zMTZMMy43NCAxMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA3LjU4NWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCA5LjkwMWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA3LjU4NVpNMy43NCAxMCAxMCAxMy42NTEgMTYuMjYgMTBsLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTBaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=", $e = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI0VDNEU0MCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOC4xMjUgMS4yNUExLjg3NSAxLjg3NSAwIDAgMCA2LjI1IDMuMTI1di42MjVIMy4xMjVhLjYyNS42MjUgMCAwIDAgMCAxLjI1aC42MjV2MTEuMjVBMS4yNSAxLjI1IDAgMCAwIDUgMTcuNWgxMGExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjVoLjYyNWEuNjI1LjYyNSAwIDAgMCAwLTEuMjVIMTMuNzV2LS42MjVhMS44NzUgMS44NzUgMCAwIDAtMS44NzUtMS44NzVoLTMuNzVabTQuMzc1IDIuNXYtLjYyNWEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2LjYyNWg1Wk01IDE2LjI1VjVoMTB2MTEuMjVINVpNOC4xMjUgNy41Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NWEuNjI1LjYyNSAwIDEgMS0xLjI1IDB2LTVjMC0uMzQ1LjI4LS42MjUuNjI1LS42MjVabTQuMzc1IDUuNjI1di01YS42MjUuNjI1IDAgMCAwLTEuMjUgMHY1YS42MjUuNjI1IDAgMSAwIDEuMjUgMFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", z = {
|
|
533
542
|
style: {
|
|
534
543
|
position: "absolute",
|
|
535
544
|
display: "none",
|
|
@@ -596,56 +605,56 @@ const Ye = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMj
|
|
|
596
605
|
],
|
|
597
606
|
offsetTop: 50,
|
|
598
607
|
icons: {
|
|
599
|
-
copyPaste:
|
|
600
|
-
delete:
|
|
601
|
-
lock:
|
|
602
|
-
unlock:
|
|
603
|
-
bringToFront:
|
|
604
|
-
sendToBack:
|
|
605
|
-
bringForward:
|
|
606
|
-
sendBackwards:
|
|
608
|
+
copyPaste: We,
|
|
609
|
+
delete: $e,
|
|
610
|
+
lock: Pe,
|
|
611
|
+
unlock: Fe,
|
|
612
|
+
bringToFront: Xe,
|
|
613
|
+
sendToBack: Qe,
|
|
614
|
+
bringForward: Ve,
|
|
615
|
+
sendBackwards: Ge
|
|
607
616
|
},
|
|
608
617
|
handlers: {
|
|
609
|
-
copyPaste: (
|
|
610
|
-
yield
|
|
611
|
-
object:
|
|
618
|
+
copyPaste: (r) => v(null, null, function* () {
|
|
619
|
+
yield r.clipboardManager.copy(), yield r.clipboardManager.paste(), r.clipboardManager.clipboard && r.canvas.fire("editor:object-duplicated", {
|
|
620
|
+
object: r.clipboardManager.clipboard
|
|
612
621
|
});
|
|
613
622
|
}),
|
|
614
|
-
delete: (
|
|
615
|
-
|
|
623
|
+
delete: (r) => {
|
|
624
|
+
r.deletionManager.deleteSelectedObjects();
|
|
616
625
|
},
|
|
617
|
-
lock: (
|
|
618
|
-
|
|
626
|
+
lock: (r) => {
|
|
627
|
+
r.objectLockManager.lockObject();
|
|
619
628
|
},
|
|
620
|
-
unlock: (
|
|
621
|
-
|
|
629
|
+
unlock: (r) => {
|
|
630
|
+
r.objectLockManager.unlockObject();
|
|
622
631
|
},
|
|
623
|
-
bringForward: (
|
|
624
|
-
|
|
632
|
+
bringForward: (r) => {
|
|
633
|
+
r.layerManager.bringForward();
|
|
625
634
|
},
|
|
626
|
-
bringToFront: (
|
|
627
|
-
|
|
635
|
+
bringToFront: (r) => {
|
|
636
|
+
r.layerManager.bringToFront();
|
|
628
637
|
},
|
|
629
|
-
sendToBack: (
|
|
630
|
-
|
|
638
|
+
sendToBack: (r) => {
|
|
639
|
+
r.layerManager.sendToBack();
|
|
631
640
|
},
|
|
632
|
-
sendBackwards: (
|
|
633
|
-
|
|
641
|
+
sendBackwards: (r) => {
|
|
642
|
+
r.layerManager.sendBackwards();
|
|
634
643
|
}
|
|
635
644
|
}
|
|
636
645
|
};
|
|
637
|
-
class
|
|
646
|
+
class Je {
|
|
638
647
|
constructor({ editor: e }) {
|
|
639
648
|
this.currentTarget = null, this.currentLocked = !1, this.isTransforming = !1, this.editor = e, this.canvas = e.canvas, this.options = e.options, this._initToolbar();
|
|
640
649
|
}
|
|
641
650
|
_initToolbar() {
|
|
642
651
|
if (!this.options.showToolbar) return;
|
|
643
652
|
const e = this.options.toolbar || {};
|
|
644
|
-
this.config =
|
|
645
|
-
style: y(y({},
|
|
646
|
-
btnStyle: y(y({},
|
|
647
|
-
icons: y(y({},
|
|
648
|
-
handlers: y(y({},
|
|
653
|
+
this.config = he(y(y({}, z), e), {
|
|
654
|
+
style: y(y({}, z.style), e.style || {}),
|
|
655
|
+
btnStyle: y(y({}, z.btnStyle), e.btnStyle || {}),
|
|
656
|
+
icons: y(y({}, z.icons), e.icons || {}),
|
|
657
|
+
handlers: y(y({}, z.handlers), e.handlers || {})
|
|
649
658
|
}), this.currentTarget = null, this.currentLocked = !1, this.isTransforming = !1, this._onMouseDown = this._handleMouseDown.bind(this), this._onObjectMoving = this._startTransform.bind(this), this._onObjectScaling = this._startTransform.bind(this), this._onObjectRotating = this._startTransform.bind(this), this._onMouseUp = this._endTransform.bind(this), this._onObjectModified = this._endTransform.bind(this), this._onSelectionChange = this._updateToolbar.bind(this), this._onSelectionClear = () => {
|
|
650
659
|
this.el.style.display = "none";
|
|
651
660
|
}, this._createDOM(), this._bindEvents();
|
|
@@ -674,8 +683,8 @@ class Qe {
|
|
|
674
683
|
for (const t of e) {
|
|
675
684
|
const { name: s, handle: n } = t, { icons: i = {}, btnStyle: a, handlers: o = {} } = this.config, d = document.createElement("button");
|
|
676
685
|
d.innerHTML = i[n] ? `<img src="${i[n]}" title="${s}" />` : s, Object.assign(d.style, a), d.onclick = () => {
|
|
677
|
-
var
|
|
678
|
-
return (
|
|
686
|
+
var c;
|
|
687
|
+
return (c = o[n]) == null ? void 0 : c.call(o, this.editor);
|
|
679
688
|
}, this.el.appendChild(d);
|
|
680
689
|
}
|
|
681
690
|
}
|
|
@@ -734,7 +743,7 @@ class Qe {
|
|
|
734
743
|
}
|
|
735
744
|
const { el: t, config: s, canvas: n } = this;
|
|
736
745
|
e.setCoords();
|
|
737
|
-
const i = n.getZoom(), [, , , , a, o] = n.viewportTransform, { x: d } = e.getCenterPoint(), { top:
|
|
746
|
+
const i = n.getZoom(), [, , , , a, o] = n.viewportTransform, { x: d } = e.getCenterPoint(), { top: c, height: l } = e.getBoundingRect(), g = d * i + a - t.offsetWidth / 2, u = s.offsetTop || 0, m = (c + l) * i + o + u;
|
|
738
747
|
Object.assign(t.style, {
|
|
739
748
|
left: `${g}px`,
|
|
740
749
|
top: `${m}px`,
|
|
@@ -748,7 +757,7 @@ class Qe {
|
|
|
748
757
|
this.el.removeEventListener("mouseover", this._onBtnOver), this.el.removeEventListener("mouseout", this._onBtnOut), this.canvas.off("mouse:down", this._onMouseDown), this.canvas.off("object:moving", this._onObjectMoving), this.canvas.off("object:scaling", this._onObjectScaling), this.canvas.off("object:rotating", this._onObjectRotating), this.canvas.off("mouse:up", this._onMouseUp), this.canvas.off("object:modified", this._onObjectModified), this.canvas.off("selection:created", this._onSelectionChange), this.canvas.off("selection:updated", this._onSelectionChange), this.canvas.off("after:render", this._onSelectionChange), this.canvas.off("selection:cleared", this._onSelectionClear), this.el.remove();
|
|
749
758
|
}
|
|
750
759
|
}
|
|
751
|
-
class
|
|
760
|
+
class Ke {
|
|
752
761
|
constructor({ editor: e }) {
|
|
753
762
|
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();
|
|
754
763
|
}
|
|
@@ -760,7 +769,7 @@ class $e {
|
|
|
760
769
|
return this.patches[this.currentIndex - 1] || null;
|
|
761
770
|
}
|
|
762
771
|
_createDiffPatcher() {
|
|
763
|
-
this.diffPatcher =
|
|
772
|
+
this.diffPatcher = we({
|
|
764
773
|
objectHash(e) {
|
|
765
774
|
const t = e;
|
|
766
775
|
return [
|
|
@@ -784,7 +793,7 @@ class $e {
|
|
|
784
793
|
includeValueOnMove: !1
|
|
785
794
|
},
|
|
786
795
|
textDiff: {
|
|
787
|
-
diffMatchPatch:
|
|
796
|
+
diffMatchPatch: Ee,
|
|
788
797
|
minLength: 60
|
|
789
798
|
}
|
|
790
799
|
});
|
|
@@ -863,9 +872,9 @@ class $e {
|
|
|
863
872
|
console.log("loadStateFromFullState fullState", e);
|
|
864
873
|
const { canvas: t, canvasManager: s, interactionBlocker: n } = this.editor, { width: i, height: a } = t;
|
|
865
874
|
yield t.loadFromJSON(e);
|
|
866
|
-
const o = t.getObjects().find((
|
|
875
|
+
const o = t.getObjects().find((c) => c.id === "montage-area");
|
|
867
876
|
o && (this.editor.montageArea = o, (i !== t.getWidth() || a !== t.getHeight()) && s.updateCanvas());
|
|
868
|
-
const d = t.getObjects().find((
|
|
877
|
+
const d = t.getObjects().find((c) => c.id === "overlay-mask");
|
|
869
878
|
d && (n.overlayMask = d, n.overlayMask.visible = !1), t.renderAll(), t.fire("editor:history-state-loaded", {
|
|
870
879
|
fullState: e,
|
|
871
880
|
currentIndex: this.currentIndex,
|
|
@@ -951,7 +960,7 @@ class $e {
|
|
|
951
960
|
});
|
|
952
961
|
}
|
|
953
962
|
}
|
|
954
|
-
const
|
|
963
|
+
const qe = 0.1, et = 2, tt = 0.1, st = 90, B = 16, Z = 16, O = 4096, T = 4096;
|
|
955
964
|
class D {
|
|
956
965
|
constructor({ editor: e }) {
|
|
957
966
|
this.editor = e, this.options = e.options, this._createdBlobUrls = [], this.acceptContentTypes = this.editor.options.acceptContentTypes, this.acceptFormats = this.getAllowedFormatsFromContentTypes();
|
|
@@ -976,10 +985,10 @@ class D {
|
|
|
976
985
|
withoutSave: n = !1
|
|
977
986
|
} = e;
|
|
978
987
|
if (!t) return null;
|
|
979
|
-
const { canvas: i, montageArea: a, transformManager: o, historyManager: d, errorManager:
|
|
988
|
+
const { canvas: i, montageArea: a, transformManager: o, historyManager: d, errorManager: c } = this.editor, l = yield this.getContentType(t), h = D.getFormatFromContentType(l), { acceptContentTypes: g, acceptFormats: u } = this;
|
|
980
989
|
if (!this.isAllowedContentType(l)) {
|
|
981
990
|
const m = `Неверный contentType для изображения: ${l}. Ожидается один из: ${this.acceptContentTypes.join(", ")}.`;
|
|
982
|
-
return
|
|
991
|
+
return c.emitError({
|
|
983
992
|
origin: "ImageManager",
|
|
984
993
|
method: "importImage",
|
|
985
994
|
code: "INVALID_CONTENT_TYPE",
|
|
@@ -996,7 +1005,7 @@ class D {
|
|
|
996
1005
|
const S = yield (yield fetch(t, { mode: "cors" })).blob();
|
|
997
1006
|
m = URL.createObjectURL(S);
|
|
998
1007
|
} else
|
|
999
|
-
return
|
|
1008
|
+
return c.emitError({
|
|
1000
1009
|
origin: "ImageManager",
|
|
1001
1010
|
method: "importImage",
|
|
1002
1011
|
code: "INVALID_SOURCE_TYPE",
|
|
@@ -1004,20 +1013,20 @@ class D {
|
|
|
1004
1013
|
data: { source: t, format: h, contentType: l, acceptContentTypes: g, acceptFormats: u }
|
|
1005
1014
|
}), null;
|
|
1006
1015
|
if (this._createdBlobUrls.push(m), h === "svg") {
|
|
1007
|
-
const b = yield
|
|
1008
|
-
M =
|
|
1016
|
+
const b = yield Ae(m);
|
|
1017
|
+
M = H.groupSVGElements(b.objects, b.options);
|
|
1009
1018
|
} else
|
|
1010
|
-
M = yield
|
|
1019
|
+
M = yield U.fromURL(m, { crossOrigin: "anonymous" });
|
|
1011
1020
|
const { width: f, height: j } = M;
|
|
1012
|
-
if (M instanceof
|
|
1021
|
+
if (M instanceof U) {
|
|
1013
1022
|
const b = M.getElement();
|
|
1014
1023
|
let S = "";
|
|
1015
1024
|
if (b instanceof HTMLImageElement ? S = b.src : b instanceof HTMLCanvasElement && (S = b.toDataURL()), j > T || f > O) {
|
|
1016
1025
|
const w = yield this.resizeImageToBoundaries(S, "max"), E = URL.createObjectURL(w);
|
|
1017
|
-
this._createdBlobUrls.push(E), M = yield
|
|
1018
|
-
} else if (j <
|
|
1026
|
+
this._createdBlobUrls.push(E), M = yield U.fromURL(E, { crossOrigin: "anonymous" });
|
|
1027
|
+
} else if (j < Z || f < B) {
|
|
1019
1028
|
const w = yield this.resizeImageToBoundaries(S, "min"), E = URL.createObjectURL(w);
|
|
1020
|
-
this._createdBlobUrls.push(E), M = yield
|
|
1029
|
+
this._createdBlobUrls.push(E), M = yield U.fromURL(E, { crossOrigin: "anonymous" });
|
|
1021
1030
|
}
|
|
1022
1031
|
}
|
|
1023
1032
|
if (M.set("id", `${M.type}-${L()}`), M.set("format", h), s === "scale-montage")
|
|
@@ -1037,7 +1046,7 @@ class D {
|
|
|
1037
1046
|
};
|
|
1038
1047
|
return i.fire("editor:image-imported", A), A;
|
|
1039
1048
|
} catch (m) {
|
|
1040
|
-
return
|
|
1049
|
+
return c.emitError({
|
|
1041
1050
|
origin: "ImageManager",
|
|
1042
1051
|
method: "importImage",
|
|
1043
1052
|
code: "IMPORT_FAILED",
|
|
@@ -1058,14 +1067,14 @@ class D {
|
|
|
1058
1067
|
resizeImageToBoundaries(e, t = "max") {
|
|
1059
1068
|
return v(this, null, function* () {
|
|
1060
1069
|
let s = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${O}x${T}`;
|
|
1061
|
-
t === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${
|
|
1070
|
+
t === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${B}x${Z}`);
|
|
1062
1071
|
const n = {
|
|
1063
1072
|
dataURL: e,
|
|
1064
1073
|
sizeType: t,
|
|
1065
1074
|
maxWidth: O,
|
|
1066
1075
|
maxHeight: T,
|
|
1067
|
-
minWidth:
|
|
1068
|
-
minHeight:
|
|
1076
|
+
minWidth: B,
|
|
1077
|
+
minHeight: Z
|
|
1069
1078
|
};
|
|
1070
1079
|
return this.editor.errorManager.emitWarning({
|
|
1071
1080
|
origin: "ImageManager",
|
|
@@ -1096,18 +1105,18 @@ class D {
|
|
|
1096
1105
|
exportAsBlob: i = !1
|
|
1097
1106
|
} = e, { canvas: a, montageArea: o, workerManager: d } = this.editor;
|
|
1098
1107
|
try {
|
|
1099
|
-
const
|
|
1108
|
+
const c = s === "application/pdf", l = c ? "image/jpg" : s, h = D.getFormatFromContentType(l);
|
|
1100
1109
|
o.setCoords();
|
|
1101
1110
|
const { left: g, top: u, width: m, height: M } = o.getBoundingRect(), f = yield a.clone(["id", "format", "locked"]);
|
|
1102
1111
|
["image/jpg", "image/jpeg"].includes(l) && (f.backgroundColor = "#ffffff");
|
|
1103
|
-
const j = f.getObjects().find((
|
|
1112
|
+
const j = f.getObjects().find((I) => I.id === o.id);
|
|
1104
1113
|
j && (j.visible = !1), f.viewportTransform = [1, 0, 0, 1, -g, -u], f.setDimensions({ width: m, height: M }, { backstoreOnly: !0 }), f.renderAll();
|
|
1105
|
-
const A = f.getObjects().filter((
|
|
1114
|
+
const A = f.getObjects().filter((I) => I.format).every((I) => I.format === "svg");
|
|
1106
1115
|
if (h === "svg" && A) {
|
|
1107
|
-
const
|
|
1116
|
+
const I = f.toSVG();
|
|
1108
1117
|
f.dispose();
|
|
1109
1118
|
const C = {
|
|
1110
|
-
image: D._exportSVGStringAsFile(
|
|
1119
|
+
image: D._exportSVGStringAsFile(I, {
|
|
1111
1120
|
exportAsBase64: n,
|
|
1112
1121
|
exportAsBlob: i,
|
|
1113
1122
|
fileName: t
|
|
@@ -1118,70 +1127,70 @@ class D {
|
|
|
1118
1127
|
};
|
|
1119
1128
|
return a.fire("editor:canvas-exported", C), C;
|
|
1120
1129
|
}
|
|
1121
|
-
const b = yield new Promise((
|
|
1130
|
+
const b = yield new Promise((I, k) => {
|
|
1122
1131
|
f.getElement().toBlob((C) => {
|
|
1123
|
-
C ?
|
|
1132
|
+
C ? I(C) : k(new Error("Failed to create Blob from canvas"));
|
|
1124
1133
|
});
|
|
1125
1134
|
});
|
|
1126
1135
|
if (f.dispose(), i) {
|
|
1127
|
-
const
|
|
1136
|
+
const I = {
|
|
1128
1137
|
image: b,
|
|
1129
1138
|
format: h,
|
|
1130
1139
|
contentType: l,
|
|
1131
1140
|
fileName: t
|
|
1132
1141
|
};
|
|
1133
|
-
return a.fire("editor:canvas-exported",
|
|
1142
|
+
return a.fire("editor:canvas-exported", I), I;
|
|
1134
1143
|
}
|
|
1135
1144
|
const S = yield createImageBitmap(b), w = yield d.post(
|
|
1136
1145
|
"toDataURL",
|
|
1137
1146
|
{ format: h, quality: 1, bitmap: S },
|
|
1138
1147
|
[S]
|
|
1139
1148
|
);
|
|
1140
|
-
if (
|
|
1141
|
-
const k = m * 0.264583, C = M * 0.264583,
|
|
1149
|
+
if (c) {
|
|
1150
|
+
const k = m * 0.264583, C = M * 0.264583, fe = (yield this.editor.moduleLoader.loadModule("jspdf")).jsPDF, Q = new fe({
|
|
1142
1151
|
orientation: k > C ? "landscape" : "portrait",
|
|
1143
1152
|
unit: "mm",
|
|
1144
1153
|
format: [k, C]
|
|
1145
1154
|
});
|
|
1146
|
-
if (
|
|
1147
|
-
const
|
|
1148
|
-
image:
|
|
1155
|
+
if (Q.addImage(String(w), "JPG", 0, 0, k, C), n) {
|
|
1156
|
+
const re = {
|
|
1157
|
+
image: Q.output("datauristring"),
|
|
1149
1158
|
format: "pdf",
|
|
1150
1159
|
contentType: "application/pdf",
|
|
1151
1160
|
fileName: t
|
|
1152
1161
|
};
|
|
1153
|
-
return a.fire("editor:canvas-exported",
|
|
1162
|
+
return a.fire("editor:canvas-exported", re), re;
|
|
1154
1163
|
}
|
|
1155
|
-
const
|
|
1156
|
-
image: new File([
|
|
1164
|
+
const je = Q.output("blob"), oe = {
|
|
1165
|
+
image: new File([je], t, { type: "application/pdf" }),
|
|
1157
1166
|
format: "pdf",
|
|
1158
1167
|
contentType: "application/pdf",
|
|
1159
1168
|
fileName: t
|
|
1160
1169
|
};
|
|
1161
|
-
return a.fire("editor:canvas-exported",
|
|
1170
|
+
return a.fire("editor:canvas-exported", oe), oe;
|
|
1162
1171
|
}
|
|
1163
1172
|
if (n) {
|
|
1164
|
-
const
|
|
1173
|
+
const I = {
|
|
1165
1174
|
image: w,
|
|
1166
1175
|
format: h,
|
|
1167
1176
|
contentType: l,
|
|
1168
1177
|
fileName: t
|
|
1169
1178
|
};
|
|
1170
|
-
return a.fire("editor:canvas-exported",
|
|
1179
|
+
return a.fire("editor:canvas-exported", I), I;
|
|
1171
1180
|
}
|
|
1172
|
-
const E = h === "svg" && !A ? t.replace(/\.[^/.]+$/, ".png") : t,
|
|
1181
|
+
const E = h === "svg" && !A ? t.replace(/\.[^/.]+$/, ".png") : t, ae = {
|
|
1173
1182
|
image: new File([b], E, { type: l }),
|
|
1174
1183
|
format: h,
|
|
1175
1184
|
contentType: l,
|
|
1176
1185
|
fileName: E
|
|
1177
1186
|
};
|
|
1178
|
-
return a.fire("editor:canvas-exported",
|
|
1179
|
-
} catch (
|
|
1187
|
+
return a.fire("editor:canvas-exported", ae), ae;
|
|
1188
|
+
} catch (c) {
|
|
1180
1189
|
return this.editor.errorManager.emitError({
|
|
1181
1190
|
origin: "ImageManager",
|
|
1182
1191
|
method: "exportCanvasAsImageFile",
|
|
1183
1192
|
code: "IMAGE_EXPORT_FAILED",
|
|
1184
|
-
message: `Ошибка экспорта изображения: ${
|
|
1193
|
+
message: `Ошибка экспорта изображения: ${c.message}`,
|
|
1185
1194
|
data: { contentType: s, fileName: t, exportAsBase64: n, exportAsBlob: i }
|
|
1186
1195
|
}), null;
|
|
1187
1196
|
}
|
|
@@ -1206,8 +1215,8 @@ class D {
|
|
|
1206
1215
|
contentType: n = "image/png",
|
|
1207
1216
|
exportAsBase64: i = !1,
|
|
1208
1217
|
exportAsBlob: a = !1
|
|
1209
|
-
} = e, { canvas: o, workerManager: d } = this.editor,
|
|
1210
|
-
if (!
|
|
1218
|
+
} = e, { canvas: o, workerManager: d } = this.editor, c = t || o.getActiveObject();
|
|
1219
|
+
if (!c)
|
|
1211
1220
|
return this.editor.errorManager.emitError({
|
|
1212
1221
|
origin: "ImageManager",
|
|
1213
1222
|
method: "exportObjectAsImageFile",
|
|
@@ -1218,12 +1227,12 @@ class D {
|
|
|
1218
1227
|
try {
|
|
1219
1228
|
const l = D.getFormatFromContentType(n);
|
|
1220
1229
|
if (l === "svg") {
|
|
1221
|
-
const M =
|
|
1230
|
+
const M = c.toSVG(), f = D._exportSVGStringAsFile(M, {
|
|
1222
1231
|
exportAsBase64: i,
|
|
1223
1232
|
exportAsBlob: a,
|
|
1224
1233
|
fileName: s
|
|
1225
1234
|
}), j = {
|
|
1226
|
-
object:
|
|
1235
|
+
object: c,
|
|
1227
1236
|
image: f,
|
|
1228
1237
|
format: l,
|
|
1229
1238
|
contentType: "image/svg+xml",
|
|
@@ -1231,8 +1240,8 @@ class D {
|
|
|
1231
1240
|
};
|
|
1232
1241
|
return o.fire("editor:object-exported", j), j;
|
|
1233
1242
|
}
|
|
1234
|
-
if (i &&
|
|
1235
|
-
const M = yield createImageBitmap(
|
|
1243
|
+
if (i && c instanceof U) {
|
|
1244
|
+
const M = yield createImageBitmap(c.getElement()), f = yield d.post(
|
|
1236
1245
|
"toDataURL",
|
|
1237
1246
|
{
|
|
1238
1247
|
format: l,
|
|
@@ -1241,7 +1250,7 @@ class D {
|
|
|
1241
1250
|
},
|
|
1242
1251
|
[M]
|
|
1243
1252
|
), j = {
|
|
1244
|
-
object:
|
|
1253
|
+
object: c,
|
|
1245
1254
|
image: f,
|
|
1246
1255
|
format: l,
|
|
1247
1256
|
contentType: n,
|
|
@@ -1249,14 +1258,14 @@ class D {
|
|
|
1249
1258
|
};
|
|
1250
1259
|
return o.fire("editor:object-exported", j), j;
|
|
1251
1260
|
}
|
|
1252
|
-
const h =
|
|
1261
|
+
const h = c.toCanvasElement(), g = yield new Promise((M, f) => {
|
|
1253
1262
|
h.toBlob((j) => {
|
|
1254
1263
|
j ? M(j) : f(new Error("Failed to create Blob from canvas"));
|
|
1255
1264
|
});
|
|
1256
1265
|
});
|
|
1257
1266
|
if (a) {
|
|
1258
1267
|
const M = {
|
|
1259
|
-
object:
|
|
1268
|
+
object: c,
|
|
1260
1269
|
image: g,
|
|
1261
1270
|
format: l,
|
|
1262
1271
|
contentType: n,
|
|
@@ -1265,7 +1274,7 @@ class D {
|
|
|
1265
1274
|
return o.fire("editor:object-exported", M), M;
|
|
1266
1275
|
}
|
|
1267
1276
|
const u = new File([g], s, { type: n }), m = {
|
|
1268
|
-
object:
|
|
1277
|
+
object: c,
|
|
1269
1278
|
image: u,
|
|
1270
1279
|
format: l,
|
|
1271
1280
|
contentType: n,
|
|
@@ -1400,7 +1409,11 @@ class D {
|
|
|
1400
1409
|
return t ? t[1] : "";
|
|
1401
1410
|
}
|
|
1402
1411
|
}
|
|
1403
|
-
|
|
1412
|
+
const x = (r, e, t) => Math.max(Math.min(r, t), e), Me = (r, e) => r * e, nt = (r, e) => new P(r / 2, e / 2);
|
|
1413
|
+
function it(r) {
|
|
1414
|
+
return ((r == null ? void 0 : r.type) === "image" || (r == null ? void 0 : r.format) === "svg") && typeof (r == null ? void 0 : r.width) == "number" && typeof (r == null ? void 0 : r.height) == "number";
|
|
1415
|
+
}
|
|
1416
|
+
class at {
|
|
1404
1417
|
/**
|
|
1405
1418
|
* @param options
|
|
1406
1419
|
* @param options.editor – экземпляр редактора
|
|
@@ -1408,6 +1421,13 @@ class tt {
|
|
|
1408
1421
|
constructor({ editor: e }) {
|
|
1409
1422
|
this.editor = e;
|
|
1410
1423
|
}
|
|
1424
|
+
/**
|
|
1425
|
+
* Возвращает контейнер редактора
|
|
1426
|
+
*/
|
|
1427
|
+
getEditorContainer() {
|
|
1428
|
+
const { canvas: e, options: { editorContainer: t } } = this.editor;
|
|
1429
|
+
return e.editorContainer || t;
|
|
1430
|
+
}
|
|
1411
1431
|
/**
|
|
1412
1432
|
* Устанавливаем внутреннюю ширину канваса (для экспорта)
|
|
1413
1433
|
* @param width - ширина канваса
|
|
@@ -1424,9 +1444,9 @@ class tt {
|
|
|
1424
1444
|
canvas: i,
|
|
1425
1445
|
montageArea: a,
|
|
1426
1446
|
options: { canvasBackstoreWidth: o }
|
|
1427
|
-
} = this.editor, { width: d, height:
|
|
1447
|
+
} = this.editor, { width: d, height: c } = a, l = x(Number(e), B, O);
|
|
1428
1448
|
if (!o || o === "auto" || n ? this.adaptCanvasToContainer() : o ? this.setCanvasBackstoreWidth(Number(o)) : this.setCanvasBackstoreWidth(l), a.set({ width: l }), (m = i.clipPath) == null || m.set({ width: l }), t) {
|
|
1429
|
-
const M = l / d, f =
|
|
1449
|
+
const M = l / d, f = Me(c, M);
|
|
1430
1450
|
this.setResolutionHeight(f);
|
|
1431
1451
|
return;
|
|
1432
1452
|
}
|
|
@@ -1454,9 +1474,9 @@ class tt {
|
|
|
1454
1474
|
canvas: i,
|
|
1455
1475
|
montageArea: a,
|
|
1456
1476
|
options: { canvasBackstoreHeight: o }
|
|
1457
|
-
} = this.editor, { width: d, height:
|
|
1477
|
+
} = this.editor, { width: d, height: c } = a, l = x(Number(e), Z, T);
|
|
1458
1478
|
if (!o || o === "auto" || n ? this.adaptCanvasToContainer() : o ? this.setCanvasBackstoreHeight(Number(o)) : this.setCanvasBackstoreHeight(l), a.set({ height: l }), (m = i.clipPath) == null || m.set({ height: l }), t) {
|
|
1459
|
-
const M = l /
|
|
1479
|
+
const M = l / c, f = Me(d, M);
|
|
1460
1480
|
this.setResolutionWidth(f);
|
|
1461
1481
|
return;
|
|
1462
1482
|
}
|
|
@@ -1474,7 +1494,7 @@ class tt {
|
|
|
1474
1494
|
*/
|
|
1475
1495
|
centerMontageArea() {
|
|
1476
1496
|
var d;
|
|
1477
|
-
const { canvas: e, montageArea: t } = this.editor, s = e.getWidth(), n = e.getHeight(), i = e.getZoom(), a =
|
|
1497
|
+
const { canvas: e, montageArea: t } = this.editor, s = e.getWidth(), n = e.getHeight(), i = e.getZoom(), a = nt(s, n);
|
|
1478
1498
|
t.set({
|
|
1479
1499
|
left: s / 2,
|
|
1480
1500
|
top: n / 2
|
|
@@ -1507,7 +1527,7 @@ class tt {
|
|
|
1507
1527
|
*/
|
|
1508
1528
|
setCanvasBackstoreWidth(e) {
|
|
1509
1529
|
if (!e || typeof e != "number") return;
|
|
1510
|
-
const t =
|
|
1530
|
+
const t = x(e, B, O);
|
|
1511
1531
|
this.editor.canvas.setDimensions({ width: t }, { backstoreOnly: !0 });
|
|
1512
1532
|
}
|
|
1513
1533
|
/**
|
|
@@ -1516,7 +1536,7 @@ class tt {
|
|
|
1516
1536
|
*/
|
|
1517
1537
|
setCanvasBackstoreHeight(e) {
|
|
1518
1538
|
if (!e || typeof e != "number") return;
|
|
1519
|
-
const t =
|
|
1539
|
+
const t = x(e, Z, T);
|
|
1520
1540
|
this.editor.canvas.setDimensions({ height: t }, { backstoreOnly: !0 });
|
|
1521
1541
|
}
|
|
1522
1542
|
/**
|
|
@@ -1525,8 +1545,8 @@ class tt {
|
|
|
1525
1545
|
* с учётом минимальных и максимальных значений.
|
|
1526
1546
|
*/
|
|
1527
1547
|
adaptCanvasToContainer() {
|
|
1528
|
-
const { canvas: e } = this.editor, t =
|
|
1529
|
-
|
|
1548
|
+
const { canvas: e } = this.editor, t = this.getEditorContainer(), s = t.clientWidth, n = t.clientHeight, i = x(s, B, O), a = x(n, Z, T);
|
|
1549
|
+
e.setDimensions({ width: i, height: a }, { backstoreOnly: !0 });
|
|
1530
1550
|
}
|
|
1531
1551
|
/**
|
|
1532
1552
|
* Обновляет размеры канваса без изменения позиций объектов.
|
|
@@ -1545,9 +1565,9 @@ class tt {
|
|
|
1545
1565
|
this.setResolutionWidth(s, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.setResolutionHeight(n, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.centerMontageArea();
|
|
1546
1566
|
const o = t.left - i, d = t.top - a;
|
|
1547
1567
|
if (o !== 0 || d !== 0) {
|
|
1548
|
-
const
|
|
1549
|
-
if ((
|
|
1550
|
-
const h =
|
|
1568
|
+
const c = e.getActiveObject(), l = [];
|
|
1569
|
+
if ((c == null ? void 0 : c.type) === "activeselection") {
|
|
1570
|
+
const h = c;
|
|
1551
1571
|
l.push(...h.getObjects()), e.discardActiveObject();
|
|
1552
1572
|
}
|
|
1553
1573
|
if (e.getObjects().forEach((h) => {
|
|
@@ -1559,7 +1579,7 @@ class tt {
|
|
|
1559
1579
|
if (l.length === 1)
|
|
1560
1580
|
e.setActiveObject(l[0]);
|
|
1561
1581
|
else {
|
|
1562
|
-
const h = new
|
|
1582
|
+
const h = new p(l, {
|
|
1563
1583
|
canvas: e
|
|
1564
1584
|
});
|
|
1565
1585
|
e.setActiveObject(h);
|
|
@@ -1581,15 +1601,19 @@ class tt {
|
|
|
1581
1601
|
*
|
|
1582
1602
|
* @param zoom — текущее значение zoom (например, 1, 1.2, 2 и т.д.)
|
|
1583
1603
|
*/
|
|
1584
|
-
updateCssDimensionsForZoom(
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1604
|
+
// public updateCssDimensionsForZoom(zoom: number): void {
|
|
1605
|
+
// const { canvas, montageArea } = this.editor
|
|
1606
|
+
// const zoomedWidth = montageArea.width * zoom
|
|
1607
|
+
// const zoomedHeight = montageArea.height * zoom
|
|
1608
|
+
// const scrollContainer = canvas.wrapperEl.parentNode
|
|
1609
|
+
// if (!(scrollContainer instanceof HTMLElement)) return
|
|
1610
|
+
// const cssWidth = zoomedWidth <= scrollContainer.clientWidth ? '100%' : zoomedWidth
|
|
1611
|
+
// const cssHeight = zoomedHeight <= scrollContainer.clientHeight ? '100%' : zoomedHeight
|
|
1612
|
+
// canvas.setDimensions(
|
|
1613
|
+
// { width: cssWidth, height: cssHeight },
|
|
1614
|
+
// { cssOnly: true }
|
|
1615
|
+
// )
|
|
1616
|
+
// }
|
|
1593
1617
|
/**
|
|
1594
1618
|
* Устанавливаем CSS ширину канваса для отображения
|
|
1595
1619
|
* @param width
|
|
@@ -1673,32 +1697,32 @@ class tt {
|
|
|
1673
1697
|
*/
|
|
1674
1698
|
setDisplayDimension({ element: e = "canvas", dimension: t, value: s } = {}) {
|
|
1675
1699
|
if (!s) return;
|
|
1676
|
-
const { canvas: n
|
|
1700
|
+
const { canvas: n } = this.editor, i = [];
|
|
1677
1701
|
switch (e) {
|
|
1678
1702
|
case "canvas":
|
|
1679
|
-
|
|
1703
|
+
i.push(n.lowerCanvasEl, n.upperCanvasEl);
|
|
1680
1704
|
break;
|
|
1681
1705
|
case "wrapper":
|
|
1682
|
-
|
|
1706
|
+
i.push(n.wrapperEl);
|
|
1683
1707
|
break;
|
|
1684
1708
|
case "container":
|
|
1685
|
-
|
|
1709
|
+
i.push(this.getEditorContainer());
|
|
1686
1710
|
break;
|
|
1687
1711
|
default:
|
|
1688
|
-
|
|
1712
|
+
i.push(n.lowerCanvasEl, n.upperCanvasEl);
|
|
1689
1713
|
}
|
|
1690
|
-
const
|
|
1714
|
+
const a = t === "width" ? "width" : "height";
|
|
1691
1715
|
if (typeof s == "string") {
|
|
1692
|
-
|
|
1693
|
-
|
|
1716
|
+
i.forEach((d) => {
|
|
1717
|
+
d.style[a] = s;
|
|
1694
1718
|
});
|
|
1695
1719
|
return;
|
|
1696
1720
|
}
|
|
1697
1721
|
if (isNaN(s)) return;
|
|
1698
|
-
const
|
|
1699
|
-
|
|
1700
|
-
|
|
1701
|
-
}), n.fire(`editor:display-${e}-${
|
|
1722
|
+
const o = `${s}px`;
|
|
1723
|
+
i.forEach((d) => {
|
|
1724
|
+
d.style[a] = o;
|
|
1725
|
+
}), n.fire(`editor:display-${e}-${a}-changed`, {
|
|
1702
1726
|
element: e,
|
|
1703
1727
|
value: s
|
|
1704
1728
|
});
|
|
@@ -1720,9 +1744,9 @@ class tt {
|
|
|
1720
1744
|
montageAreaWidth: o,
|
|
1721
1745
|
montageAreaHeight: d
|
|
1722
1746
|
}
|
|
1723
|
-
} = this.editor,
|
|
1724
|
-
if (!
|
|
1725
|
-
const { width: l, height: h } =
|
|
1747
|
+
} = this.editor, c = e || n.getActiveObject();
|
|
1748
|
+
if (!it(c)) return;
|
|
1749
|
+
const { width: l, height: h } = c;
|
|
1726
1750
|
let g = Math.min(l, O), u = Math.min(h, T);
|
|
1727
1751
|
if (t) {
|
|
1728
1752
|
const {
|
|
@@ -1731,8 +1755,8 @@ class tt {
|
|
|
1731
1755
|
} = i, f = l / m, j = h / M, A = Math.max(f, j);
|
|
1732
1756
|
g = m * A, u = M * A;
|
|
1733
1757
|
}
|
|
1734
|
-
this.setResolutionWidth(g, { withoutSave: !0 }), this.setResolutionHeight(u, { withoutSave: !0 }), (l > o || h > d) && a.calculateAndApplyDefaultZoom(), a.resetObject(
|
|
1735
|
-
object:
|
|
1758
|
+
this.setResolutionWidth(g, { withoutSave: !0 }), this.setResolutionHeight(u, { withoutSave: !0 }), (l > o || h > d) && a.calculateAndApplyDefaultZoom(), a.resetObject(c, { withoutSave: !0 }), n.centerObject(c), n.renderAll(), s || this.editor.historyManager.saveState(), n.fire("editor:montage-area-scaled-to-image", {
|
|
1759
|
+
object: c,
|
|
1736
1760
|
width: g,
|
|
1737
1761
|
height: u,
|
|
1738
1762
|
preserveAspectRatio: t,
|
|
@@ -1774,9 +1798,9 @@ class tt {
|
|
|
1774
1798
|
return e.getObjects().filter((i) => i.id !== t.id && i.id !== (s == null ? void 0 : s.id));
|
|
1775
1799
|
}
|
|
1776
1800
|
}
|
|
1777
|
-
class
|
|
1801
|
+
class ot {
|
|
1778
1802
|
constructor({ editor: e }) {
|
|
1779
|
-
this.editor = e, this.options = e.options, this.minZoom = this.options.minZoom ||
|
|
1803
|
+
this.editor = e, this.options = e.options, this.minZoom = this.options.minZoom || qe, this.maxZoom = this.options.maxZoom || et, this.defaultZoom = this.options.defaultScale, this.maxZoomFactor = this.options.maxZoomFactor;
|
|
1780
1804
|
}
|
|
1781
1805
|
/**
|
|
1782
1806
|
* Метод рассчитывает и применяет зум по умолчанию для монтажной области редактора.
|
|
@@ -1786,8 +1810,8 @@ class st {
|
|
|
1786
1810
|
* @param scale - Желаемый масштаб относительно размеров контейнера редактора.
|
|
1787
1811
|
*/
|
|
1788
1812
|
calculateAndApplyDefaultZoom(e = this.options.defaultScale) {
|
|
1789
|
-
const { canvas: t } = this.editor, s = t.editorContainer, n = s.clientWidth, i = s.clientHeight, { width: a, height: o } = this.editor.montageArea, d = n / a * e,
|
|
1790
|
-
this.defaultZoom = Math.min(d,
|
|
1813
|
+
const { canvas: t } = this.editor, s = t.editorContainer, n = s.clientWidth, i = s.clientHeight, { width: a, height: o } = this.editor.montageArea, d = n / a * e, c = i / o * e;
|
|
1814
|
+
this.defaultZoom = Math.min(d, c);
|
|
1791
1815
|
const { defaultZoom: l, maxZoomFactor: h, minZoom: g, maxZoom: u } = this;
|
|
1792
1816
|
this.minZoom = Math.min(l / h, g), this.maxZoom = Math.max(l * h, u), this.setZoom();
|
|
1793
1817
|
}
|
|
@@ -1800,10 +1824,10 @@ class st {
|
|
|
1800
1824
|
* @fires editor:zoom-changed
|
|
1801
1825
|
* Если передавать координаты курсора, то нужно быть аккуратнее, так как юзер может выйти за пределы рабочей области
|
|
1802
1826
|
*/
|
|
1803
|
-
zoom(e =
|
|
1827
|
+
zoom(e = tt, t = {}) {
|
|
1804
1828
|
var g, u;
|
|
1805
1829
|
if (!e) return;
|
|
1806
|
-
const { minZoom: s, maxZoom: n } = this, { canvas: i } = this.editor, a = i.getZoom(), o = i.getCenterPoint(), d = (g = t.pointX) != null ? g : o.x,
|
|
1830
|
+
const { minZoom: s, maxZoom: n } = this, { canvas: i } = this.editor, a = i.getZoom(), o = i.getCenterPoint(), d = (g = t.pointX) != null ? g : o.x, c = (u = t.pointY) != null ? u : o.y, l = new P(d, c);
|
|
1807
1831
|
let h = Number((a + Number(e)).toFixed(2));
|
|
1808
1832
|
h > n && (h = n), h < s && (h = s), i.zoomToPoint(l, h), console.log({
|
|
1809
1833
|
currentZoom: a,
|
|
@@ -1821,7 +1845,7 @@ class st {
|
|
|
1821
1845
|
* @fires editor:zoom-changed
|
|
1822
1846
|
*/
|
|
1823
1847
|
setZoom(e = this.defaultZoom) {
|
|
1824
|
-
const { minZoom: t, maxZoom: s } = this, { canvas: n } = this.editor, i = new
|
|
1848
|
+
const { minZoom: t, maxZoom: s } = this, { canvas: n } = this.editor, i = new P(n.getCenterPoint());
|
|
1825
1849
|
let a = e;
|
|
1826
1850
|
e > s && (a = s), e < t && (a = t), n.zoomToPoint(i, a), n.fire("editor:zoom-changed", {
|
|
1827
1851
|
currentZoom: n.getZoom(),
|
|
@@ -1834,7 +1858,7 @@ class st {
|
|
|
1834
1858
|
* @fires editor:zoom-changed
|
|
1835
1859
|
*/
|
|
1836
1860
|
resetZoom() {
|
|
1837
|
-
const { canvas: e } = this.editor, t = new
|
|
1861
|
+
const { canvas: e } = this.editor, t = new P(e.getCenterPoint());
|
|
1838
1862
|
e.zoomToPoint(t, this.defaultZoom), this.editor.canvas.fire("editor:zoom-changed", {
|
|
1839
1863
|
currentZoom: e.getZoom(),
|
|
1840
1864
|
point: t
|
|
@@ -1847,7 +1871,7 @@ class st {
|
|
|
1847
1871
|
* @param options.withoutSave - Не сохранять состояние
|
|
1848
1872
|
* @fires editor:object-rotated
|
|
1849
1873
|
*/
|
|
1850
|
-
rotate(e =
|
|
1874
|
+
rotate(e = st, { withoutSave: t } = {}) {
|
|
1851
1875
|
const { canvas: s, historyManager: n } = this.editor, i = s.getActiveObject();
|
|
1852
1876
|
if (!i) return;
|
|
1853
1877
|
const a = i.angle + e;
|
|
@@ -1897,7 +1921,7 @@ class st {
|
|
|
1897
1921
|
withoutSave: s
|
|
1898
1922
|
} = {}) {
|
|
1899
1923
|
const { canvas: n, historyManager: i } = this.editor, a = e || n.getActiveObject();
|
|
1900
|
-
a && (a instanceof
|
|
1924
|
+
a && (a instanceof p ? a.getObjects().forEach((o) => {
|
|
1901
1925
|
o.set("opacity", t);
|
|
1902
1926
|
}) : a.set("opacity", t), n.renderAll(), s || i.saveState(), n.fire("editor:object-opacity-changed", {
|
|
1903
1927
|
object: a,
|
|
@@ -1924,13 +1948,13 @@ class st {
|
|
|
1924
1948
|
} = {}) {
|
|
1925
1949
|
const { canvas: i, historyManager: a } = this.editor, o = e || i.getActiveObject();
|
|
1926
1950
|
if (o) {
|
|
1927
|
-
if (o instanceof
|
|
1951
|
+
if (o instanceof p && !n) {
|
|
1928
1952
|
const d = o.getObjects();
|
|
1929
1953
|
i.discardActiveObject(), d.forEach((l) => {
|
|
1930
1954
|
this._fitSingleObject(l, t);
|
|
1931
1955
|
});
|
|
1932
|
-
const
|
|
1933
|
-
i.setActiveObject(
|
|
1956
|
+
const c = new p(d, { canvas: i });
|
|
1957
|
+
i.setActiveObject(c);
|
|
1934
1958
|
} else
|
|
1935
1959
|
this._fitSingleObject(o, t);
|
|
1936
1960
|
i.renderAll(), s || a.saveState(), i.fire("editor:object-fitted", {
|
|
@@ -1948,7 +1972,7 @@ class st {
|
|
|
1948
1972
|
* @private
|
|
1949
1973
|
*/
|
|
1950
1974
|
_fitSingleObject(e, t) {
|
|
1951
|
-
const { canvas: s, montageArea: n } = this.editor, { width: i, height: a, scaleX: o = 1, scaleY: d = 1, angle:
|
|
1975
|
+
const { canvas: s, montageArea: n } = this.editor, { width: i, height: a, scaleX: o = 1, scaleY: d = 1, angle: c = 0 } = e, l = i * Math.abs(o), h = a * Math.abs(d), g = c * 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 = n.width, A = n.height;
|
|
1952
1976
|
let b;
|
|
1953
1977
|
t === "contain" ? b = Math.min(j / M, A / f) : b = Math.max(j / M, A / f), e.set({
|
|
1954
1978
|
scaleX: o * b,
|
|
@@ -1978,31 +2002,31 @@ class st {
|
|
|
1978
2002
|
imageManager: a,
|
|
1979
2003
|
historyManager: o,
|
|
1980
2004
|
options: { scaleType: d }
|
|
1981
|
-
} = this.editor,
|
|
1982
|
-
if (!
|
|
1983
|
-
if (o.suspendHistory(),
|
|
2005
|
+
} = this.editor, c = e || n.getActiveObject();
|
|
2006
|
+
if (!c || c.locked) return;
|
|
2007
|
+
if (o.suspendHistory(), c.type === "image" || c.format === "svg" || c.set({
|
|
1984
2008
|
scaleX: 1,
|
|
1985
2009
|
scaleY: 1,
|
|
1986
2010
|
flipX: !1,
|
|
1987
2011
|
flipY: !1,
|
|
1988
2012
|
angle: 0
|
|
1989
2013
|
}), t)
|
|
1990
|
-
this.fitObject({ object:
|
|
2014
|
+
this.fitObject({ object: c, withoutSave: !0, fitAsOneObject: !0 });
|
|
1991
2015
|
else {
|
|
1992
|
-
const { width: h, height: g } = i, { width: u, height: m } =
|
|
1993
|
-
imageObject:
|
|
2016
|
+
const { width: h, height: g } = i, { width: u, height: m } = c, M = a.calculateScaleFactor({
|
|
2017
|
+
imageObject: c,
|
|
1994
2018
|
scaleType: d
|
|
1995
2019
|
});
|
|
1996
|
-
d === "contain" && M < 1 || d === "cover" && (u > h || m > g) ? this.fitObject({ object:
|
|
2020
|
+
d === "contain" && M < 1 || d === "cover" && (u > h || m > g) ? this.fitObject({ object: c, withoutSave: !0, fitAsOneObject: !0 }) : c.set({ scaleX: 1, scaleY: 1 });
|
|
1997
2021
|
}
|
|
1998
|
-
|
|
1999
|
-
object:
|
|
2022
|
+
c.set({ flipX: !1, flipY: !1, angle: 0 }), n.centerObject(c), n.renderAll(), o.resumeHistory(), s || o.saveState(), n.fire("editor:object-reset", {
|
|
2023
|
+
object: c,
|
|
2000
2024
|
withoutSave: s,
|
|
2001
2025
|
alwaysFitObject: t
|
|
2002
2026
|
});
|
|
2003
2027
|
}
|
|
2004
2028
|
}
|
|
2005
|
-
class
|
|
2029
|
+
class rt {
|
|
2006
2030
|
constructor({ editor: e }) {
|
|
2007
2031
|
this.editor = e, this.isBlocked = !1, this.overlayMask = null, this._createOverlay();
|
|
2008
2032
|
}
|
|
@@ -2059,7 +2083,7 @@ class nt {
|
|
|
2059
2083
|
}), e.upperCanvasEl.style.pointerEvents = "", e.lowerCanvasEl.style.pointerEvents = "", this.overlayMask.visible = !1, e.requestRenderAll(), e.fire("editor:enabled"), s.resumeHistory();
|
|
2060
2084
|
}
|
|
2061
2085
|
}
|
|
2062
|
-
class
|
|
2086
|
+
class V {
|
|
2063
2087
|
constructor({ editor: e }) {
|
|
2064
2088
|
this.editor = e;
|
|
2065
2089
|
}
|
|
@@ -2074,7 +2098,7 @@ class F {
|
|
|
2074
2098
|
const { canvas: s, historyManager: n } = this.editor;
|
|
2075
2099
|
n.suspendHistory();
|
|
2076
2100
|
const i = e || s.getActiveObject();
|
|
2077
|
-
i && (i instanceof
|
|
2101
|
+
i && (i instanceof p ? i.getObjects().forEach((a) => {
|
|
2078
2102
|
s.bringObjectToFront(a);
|
|
2079
2103
|
}) : s.bringObjectToFront(i), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:object-bring-to-front", {
|
|
2080
2104
|
object: i,
|
|
@@ -2092,7 +2116,7 @@ class F {
|
|
|
2092
2116
|
const { canvas: s, historyManager: n } = this.editor;
|
|
2093
2117
|
n.suspendHistory();
|
|
2094
2118
|
const i = e || s.getActiveObject();
|
|
2095
|
-
i && (i instanceof
|
|
2119
|
+
i && (i instanceof p ? V._moveSelectionForward(s, i) : s.bringObjectForward(i), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:object-bring-forward", {
|
|
2096
2120
|
object: i,
|
|
2097
2121
|
withoutSave: t
|
|
2098
2122
|
}));
|
|
@@ -2114,10 +2138,10 @@ class F {
|
|
|
2114
2138
|
i.suspendHistory();
|
|
2115
2139
|
const o = e || s.getActiveObject();
|
|
2116
2140
|
if (o) {
|
|
2117
|
-
if (o instanceof
|
|
2141
|
+
if (o instanceof p) {
|
|
2118
2142
|
const d = o.getObjects();
|
|
2119
|
-
for (let
|
|
2120
|
-
s.sendObjectToBack(d[
|
|
2143
|
+
for (let c = d.length - 1; c >= 0; c -= 1)
|
|
2144
|
+
s.sendObjectToBack(d[c]);
|
|
2121
2145
|
} else
|
|
2122
2146
|
s.sendObjectToBack(o);
|
|
2123
2147
|
s.sendObjectToBack(n), a && s.sendObjectToBack(a), s.renderAll(), i.resumeHistory(), t || i.saveState(), s.fire("editor:object-send-to-back", {
|
|
@@ -2141,7 +2165,7 @@ class F {
|
|
|
2141
2165
|
} = this.editor;
|
|
2142
2166
|
i.suspendHistory();
|
|
2143
2167
|
const o = e || s.getActiveObject();
|
|
2144
|
-
o && (o instanceof
|
|
2168
|
+
o && (o instanceof p ? V._moveSelectionBackwards(s, o) : s.sendObjectBackwards(o), s.sendObjectToBack(n), a && s.sendObjectToBack(a), s.renderAll(), i.resumeHistory(), t || i.saveState(), s.fire("editor:object-send-backwards", {
|
|
2145
2169
|
object: o,
|
|
2146
2170
|
withoutSave: t
|
|
2147
2171
|
}));
|
|
@@ -2156,8 +2180,8 @@ class F {
|
|
|
2156
2180
|
const s = e.getObjects(), n = t.getObjects();
|
|
2157
2181
|
if (!n.some((o) => {
|
|
2158
2182
|
const d = s.indexOf(o);
|
|
2159
|
-
for (let
|
|
2160
|
-
if (!n.includes(s[
|
|
2183
|
+
for (let c = d + 1; c < s.length; c += 1)
|
|
2184
|
+
if (!n.includes(s[c]))
|
|
2161
2185
|
return !0;
|
|
2162
2186
|
return !1;
|
|
2163
2187
|
})) return;
|
|
@@ -2175,8 +2199,8 @@ class F {
|
|
|
2175
2199
|
const s = e.getObjects(), n = t.getObjects();
|
|
2176
2200
|
if (!n.some((o) => {
|
|
2177
2201
|
const d = s.indexOf(o);
|
|
2178
|
-
for (let
|
|
2179
|
-
if (!n.includes(s[
|
|
2202
|
+
for (let c = d - 1; c >= 0; c -= 1)
|
|
2203
|
+
if (!n.includes(s[c]))
|
|
2180
2204
|
return !0;
|
|
2181
2205
|
return !1;
|
|
2182
2206
|
})) return;
|
|
@@ -2185,7 +2209,7 @@ class F {
|
|
|
2185
2209
|
});
|
|
2186
2210
|
}
|
|
2187
2211
|
}
|
|
2188
|
-
class
|
|
2212
|
+
class ct {
|
|
2189
2213
|
/**
|
|
2190
2214
|
* Менеджер фигур для редактора.
|
|
2191
2215
|
* @param options - Опции и настройки менеджера фигур.
|
|
@@ -2209,7 +2233,7 @@ class it {
|
|
|
2209
2233
|
* @param flags.withoutSelection - Не выделять объект
|
|
2210
2234
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2211
2235
|
*/
|
|
2212
|
-
addRectangle(l = {}, { withoutSelection: d, withoutAdding:
|
|
2236
|
+
addRectangle(l = {}, { withoutSelection: d, withoutAdding: c } = {}) {
|
|
2213
2237
|
var h = l, {
|
|
2214
2238
|
id: e = `rect-${L()}`,
|
|
2215
2239
|
left: t,
|
|
@@ -2217,7 +2241,7 @@ class it {
|
|
|
2217
2241
|
width: n = 100,
|
|
2218
2242
|
height: i = 100,
|
|
2219
2243
|
fill: a = "blue"
|
|
2220
|
-
} = h, o =
|
|
2244
|
+
} = h, o = _(h, [
|
|
2221
2245
|
"id",
|
|
2222
2246
|
"left",
|
|
2223
2247
|
"top",
|
|
@@ -2225,7 +2249,7 @@ class it {
|
|
|
2225
2249
|
"height",
|
|
2226
2250
|
"fill"
|
|
2227
2251
|
]);
|
|
2228
|
-
const { canvas: g } = this.editor, u = new
|
|
2252
|
+
const { canvas: g } = this.editor, u = new Se(y({
|
|
2229
2253
|
id: e,
|
|
2230
2254
|
left: t,
|
|
2231
2255
|
top: s,
|
|
@@ -2233,7 +2257,7 @@ class it {
|
|
|
2233
2257
|
height: i,
|
|
2234
2258
|
fill: a
|
|
2235
2259
|
}, o));
|
|
2236
|
-
return !t && !s && g.centerObject(u),
|
|
2260
|
+
return !t && !s && g.centerObject(u), c || (g.add(u), d || g.setActiveObject(u), g.renderAll()), u;
|
|
2237
2261
|
}
|
|
2238
2262
|
/**
|
|
2239
2263
|
* Добавление круга
|
|
@@ -2251,21 +2275,21 @@ class it {
|
|
|
2251
2275
|
* @param flags.withoutSelection - Не выделять объект
|
|
2252
2276
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2253
2277
|
*/
|
|
2254
|
-
addCircle(
|
|
2255
|
-
var l =
|
|
2278
|
+
addCircle(c = {}, { withoutSelection: o, withoutAdding: d } = {}) {
|
|
2279
|
+
var l = c, {
|
|
2256
2280
|
id: e = `circle-${L()}`,
|
|
2257
2281
|
left: t,
|
|
2258
2282
|
top: s,
|
|
2259
2283
|
radius: n = 50,
|
|
2260
2284
|
fill: i = "green"
|
|
2261
|
-
} = l, a =
|
|
2285
|
+
} = l, a = _(l, [
|
|
2262
2286
|
"id",
|
|
2263
2287
|
"left",
|
|
2264
2288
|
"top",
|
|
2265
2289
|
"radius",
|
|
2266
2290
|
"fill"
|
|
2267
2291
|
]);
|
|
2268
|
-
const { canvas: h } = this.editor, g = new
|
|
2292
|
+
const { canvas: h } = this.editor, g = new Ce(y({
|
|
2269
2293
|
id: e,
|
|
2270
2294
|
left: t,
|
|
2271
2295
|
top: s,
|
|
@@ -2291,7 +2315,7 @@ class it {
|
|
|
2291
2315
|
* @param flags.withoutSelection - Не выделять объект
|
|
2292
2316
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2293
2317
|
*/
|
|
2294
|
-
addTriangle(l = {}, { withoutSelection: d, withoutAdding:
|
|
2318
|
+
addTriangle(l = {}, { withoutSelection: d, withoutAdding: c } = {}) {
|
|
2295
2319
|
var h = l, {
|
|
2296
2320
|
id: e = `triangle-${L()}`,
|
|
2297
2321
|
left: t,
|
|
@@ -2299,7 +2323,7 @@ class it {
|
|
|
2299
2323
|
width: n = 100,
|
|
2300
2324
|
height: i = 100,
|
|
2301
2325
|
fill: a = "yellow"
|
|
2302
|
-
} = h, o =
|
|
2326
|
+
} = h, o = _(h, [
|
|
2303
2327
|
"id",
|
|
2304
2328
|
"left",
|
|
2305
2329
|
"top",
|
|
@@ -2307,7 +2331,7 @@ class it {
|
|
|
2307
2331
|
"height",
|
|
2308
2332
|
"fill"
|
|
2309
2333
|
]);
|
|
2310
|
-
const { canvas: g } = this.editor, u = new
|
|
2334
|
+
const { canvas: g } = this.editor, u = new Ne(y({
|
|
2311
2335
|
id: e,
|
|
2312
2336
|
left: t,
|
|
2313
2337
|
top: s,
|
|
@@ -2315,10 +2339,10 @@ class it {
|
|
|
2315
2339
|
width: n,
|
|
2316
2340
|
height: i
|
|
2317
2341
|
}, o));
|
|
2318
|
-
return !t && !s && g.centerObject(u),
|
|
2342
|
+
return !t && !s && g.centerObject(u), c || (g.add(u), d || g.setActiveObject(u), g.renderAll()), u;
|
|
2319
2343
|
}
|
|
2320
2344
|
}
|
|
2321
|
-
class
|
|
2345
|
+
class dt {
|
|
2322
2346
|
/**
|
|
2323
2347
|
* @param options
|
|
2324
2348
|
* @param options.editor - экземпляр редактора с доступом к canvas
|
|
@@ -2370,10 +2394,10 @@ class at {
|
|
|
2370
2394
|
});
|
|
2371
2395
|
return;
|
|
2372
2396
|
}
|
|
2373
|
-
const i = s.toCanvasElement().toDataURL(), a = i.slice(5).split(";")[0], o = i.split(",")[1], d = atob(o),
|
|
2397
|
+
const i = s.toCanvasElement().toDataURL(), a = i.slice(5).split(";")[0], o = i.split(",")[1], d = atob(o), c = new Uint8Array(d.length);
|
|
2374
2398
|
for (let g = 0; g < d.length; g += 1)
|
|
2375
|
-
|
|
2376
|
-
const l = new Blob([
|
|
2399
|
+
c[g] = d.charCodeAt(g);
|
|
2400
|
+
const l = new Blob([c.buffer], { type: a }), h = new ClipboardItem({ [a]: l });
|
|
2377
2401
|
navigator.clipboard.write([h]).catch((g) => {
|
|
2378
2402
|
t.emitWarning({
|
|
2379
2403
|
origin: "ClipboardManager",
|
|
@@ -2398,16 +2422,16 @@ class at {
|
|
|
2398
2422
|
const o = n.getAsFile();
|
|
2399
2423
|
if (!o) return;
|
|
2400
2424
|
const d = new FileReader();
|
|
2401
|
-
d.onload = (
|
|
2402
|
-
|
|
2425
|
+
d.onload = (c) => {
|
|
2426
|
+
c.target && this.editor.imageManager.importImage({ source: c.target.result });
|
|
2403
2427
|
}, d.readAsDataURL(o);
|
|
2404
2428
|
return;
|
|
2405
2429
|
}
|
|
2406
2430
|
const i = e.getData("text/html");
|
|
2407
2431
|
if (i) {
|
|
2408
|
-
const
|
|
2409
|
-
if (
|
|
2410
|
-
t.importImage({ source:
|
|
2432
|
+
const c = new DOMParser().parseFromString(i, "text/html").querySelector("img");
|
|
2433
|
+
if (c != null && c.src) {
|
|
2434
|
+
t.importImage({ source: c.src });
|
|
2411
2435
|
return;
|
|
2412
2436
|
}
|
|
2413
2437
|
}
|
|
@@ -2427,13 +2451,13 @@ class at {
|
|
|
2427
2451
|
left: t.left + 10,
|
|
2428
2452
|
top: t.top + 10,
|
|
2429
2453
|
evented: !0
|
|
2430
|
-
}), t instanceof
|
|
2454
|
+
}), t instanceof p ? (t.canvas = e, t.forEachObject((s) => {
|
|
2431
2455
|
e.add(s);
|
|
2432
2456
|
})) : e.add(t), e.setActiveObject(t), e.requestRenderAll(), e.fire("editor:object-pasted", { object: t });
|
|
2433
2457
|
});
|
|
2434
2458
|
}
|
|
2435
2459
|
}
|
|
2436
|
-
class
|
|
2460
|
+
class G {
|
|
2437
2461
|
constructor({ editor: e }) {
|
|
2438
2462
|
this.editor = e;
|
|
2439
2463
|
}
|
|
@@ -2458,8 +2482,8 @@ class V {
|
|
|
2458
2482
|
lockSkewingY: !0,
|
|
2459
2483
|
locked: !0
|
|
2460
2484
|
};
|
|
2461
|
-
a.set(o), !t &&
|
|
2462
|
-
|
|
2485
|
+
a.set(o), !t && G._isGroupOrSelection(a) && a.getObjects().forEach((c) => {
|
|
2486
|
+
c.set(o);
|
|
2463
2487
|
}), n.renderAll(), s || i.saveState(), n.fire("editor:object-locked", {
|
|
2464
2488
|
object: a,
|
|
2465
2489
|
skipInnerObjects: t,
|
|
@@ -2486,7 +2510,7 @@ class V {
|
|
|
2486
2510
|
lockSkewingY: !1,
|
|
2487
2511
|
locked: !1
|
|
2488
2512
|
};
|
|
2489
|
-
i.set(a),
|
|
2513
|
+
i.set(a), G._isGroupOrSelection(i) && i.getObjects().forEach((o) => {
|
|
2490
2514
|
o.set(a);
|
|
2491
2515
|
}), s.renderAll(), t || n.saveState(), s.fire("editor:object-unlocked", {
|
|
2492
2516
|
object: i,
|
|
@@ -2494,10 +2518,10 @@ class V {
|
|
|
2494
2518
|
});
|
|
2495
2519
|
}
|
|
2496
2520
|
static _isGroupOrSelection(e) {
|
|
2497
|
-
return e instanceof
|
|
2521
|
+
return e instanceof p || e instanceof $;
|
|
2498
2522
|
}
|
|
2499
2523
|
}
|
|
2500
|
-
class
|
|
2524
|
+
class lt {
|
|
2501
2525
|
constructor({ editor: e }) {
|
|
2502
2526
|
this.editor = e;
|
|
2503
2527
|
}
|
|
@@ -2515,8 +2539,8 @@ class ot {
|
|
|
2515
2539
|
const { canvas: s, historyManager: n } = this.editor;
|
|
2516
2540
|
n.suspendHistory();
|
|
2517
2541
|
const i = e || s.getActiveObject();
|
|
2518
|
-
if (!i || !(i instanceof
|
|
2519
|
-
const a = i.getObjects(), o = new
|
|
2542
|
+
if (!i || !(i instanceof p)) return;
|
|
2543
|
+
const a = i.getObjects(), o = new $(a);
|
|
2520
2544
|
a.forEach((d) => s.remove(d)), o.set("id", `${o.type}-${L()}`), s.add(o), s.setActiveObject(o), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:objects-grouped", {
|
|
2521
2545
|
object: i,
|
|
2522
2546
|
group: o,
|
|
@@ -2537,10 +2561,10 @@ class ot {
|
|
|
2537
2561
|
const { canvas: s, historyManager: n } = this.editor;
|
|
2538
2562
|
n.suspendHistory();
|
|
2539
2563
|
const i = e || s.getActiveObject();
|
|
2540
|
-
if (!(i instanceof
|
|
2564
|
+
if (!(i instanceof $)) return;
|
|
2541
2565
|
const a = i.removeAll();
|
|
2542
2566
|
s.remove(i), a.forEach((d) => s.add(d));
|
|
2543
|
-
const o = new
|
|
2567
|
+
const o = new p(a, {
|
|
2544
2568
|
canvas: s
|
|
2545
2569
|
});
|
|
2546
2570
|
s.setActiveObject(o), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:objects-ungrouped", {
|
|
@@ -2550,7 +2574,7 @@ class ot {
|
|
|
2550
2574
|
});
|
|
2551
2575
|
}
|
|
2552
2576
|
}
|
|
2553
|
-
class
|
|
2577
|
+
class ht {
|
|
2554
2578
|
constructor({ editor: e }) {
|
|
2555
2579
|
this.editor = e;
|
|
2556
2580
|
}
|
|
@@ -2561,11 +2585,11 @@ class rt {
|
|
|
2561
2585
|
selectAll() {
|
|
2562
2586
|
const { canvas: e, canvasManager: t, objectLockManager: s } = this.editor;
|
|
2563
2587
|
e.discardActiveObject();
|
|
2564
|
-
const n = t.getObjects(), i = n.some((o) => o.locked), a = n.length > 1 ? new
|
|
2588
|
+
const n = t.getObjects(), i = n.some((o) => o.locked), a = n.length > 1 ? new p(t.getObjects(), { canvas: e }) : n[0];
|
|
2565
2589
|
i && s.lockObject({ object: a, skipInnerObjects: !0, withoutSave: !0 }), e.setActiveObject(a), e.requestRenderAll(), e.fire("editor:all-objects-selected", { selected: a });
|
|
2566
2590
|
}
|
|
2567
2591
|
}
|
|
2568
|
-
class
|
|
2592
|
+
class gt {
|
|
2569
2593
|
constructor({ editor: e }) {
|
|
2570
2594
|
this.editor = e;
|
|
2571
2595
|
}
|
|
@@ -2593,7 +2617,7 @@ class ct {
|
|
|
2593
2617
|
}));
|
|
2594
2618
|
}
|
|
2595
2619
|
}
|
|
2596
|
-
const
|
|
2620
|
+
const ut = {
|
|
2597
2621
|
IMAGE_MANAGER: {
|
|
2598
2622
|
/**
|
|
2599
2623
|
* Некорректный Content-Type изображения
|
|
@@ -2655,7 +2679,7 @@ const dt = {
|
|
|
2655
2679
|
REDO_ERROR: "REDO_ERROR"
|
|
2656
2680
|
}
|
|
2657
2681
|
};
|
|
2658
|
-
class
|
|
2682
|
+
class X {
|
|
2659
2683
|
constructor({ editor: e }) {
|
|
2660
2684
|
this._buffer = [], this.editor = e;
|
|
2661
2685
|
}
|
|
@@ -2682,7 +2706,7 @@ class G {
|
|
|
2682
2706
|
* @fires editor:error
|
|
2683
2707
|
*/
|
|
2684
2708
|
emitError({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, data: n, message: i }) {
|
|
2685
|
-
if (!
|
|
2709
|
+
if (!X.isValidErrorCode(s)) {
|
|
2686
2710
|
console.warn("Неизвестный код ошибки: ", { code: s, origin: e, method: t });
|
|
2687
2711
|
return;
|
|
2688
2712
|
}
|
|
@@ -2711,7 +2735,7 @@ class G {
|
|
|
2711
2735
|
* @fires editor:warning
|
|
2712
2736
|
*/
|
|
2713
2737
|
emitWarning({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, message: n, data: i }) {
|
|
2714
|
-
if (!
|
|
2738
|
+
if (!X.isValidErrorCode(s)) {
|
|
2715
2739
|
console.warn("Неизвестный код предупреждения: ", { code: s, origin: e, method: t });
|
|
2716
2740
|
return;
|
|
2717
2741
|
}
|
|
@@ -2734,10 +2758,10 @@ class G {
|
|
|
2734
2758
|
* @returns true, если код допустим, иначе false
|
|
2735
2759
|
*/
|
|
2736
2760
|
static isValidErrorCode(e) {
|
|
2737
|
-
return e ? Object.values(
|
|
2761
|
+
return e ? Object.values(ut).some((t) => Object.values(t).includes(e)) : !1;
|
|
2738
2762
|
}
|
|
2739
2763
|
}
|
|
2740
|
-
class
|
|
2764
|
+
class ie {
|
|
2741
2765
|
/**
|
|
2742
2766
|
* Конструктор класса ImageEditor.
|
|
2743
2767
|
* @param canvasId - идентификатор канваса, в котором будет создан редактор
|
|
@@ -2762,13 +2786,13 @@ class ne {
|
|
|
2762
2786
|
canvasCSSHeight: a,
|
|
2763
2787
|
initialImage: o,
|
|
2764
2788
|
initialStateJSON: d,
|
|
2765
|
-
scaleType:
|
|
2789
|
+
scaleType: c,
|
|
2766
2790
|
_onReadyCallback: l
|
|
2767
2791
|
} = this.options;
|
|
2768
|
-
if (
|
|
2792
|
+
if (_e.apply(), this.canvas = new De(this.containerId, this.options), this.moduleLoader = new Te(), this.workerManager = new xe(), this.errorManager = new X({ editor: this }), this.historyManager = new Ke({ editor: this }), this.toolbar = new Je({ editor: this }), this.transformManager = new ot({ editor: this }), this.canvasManager = new at({ editor: this }), this.imageManager = new D({ editor: this }), this.layerManager = new V({ editor: this }), this.shapeManager = new ct({ editor: this }), this.interactionBlocker = new rt({ editor: this }), this.clipboardManager = new dt({ editor: this }), this.objectLockManager = new G({ editor: this }), this.groupingManager = new lt({ editor: this }), this.selectionManager = new ht({ editor: this }), this.deletionManager = new gt({ editor: this }), this._createMontageArea(), this._createClippingArea(), this.listeners = new R({ editor: this, options: this.options }), this.canvasManager.setEditorContainerWidth(e), this.canvasManager.setEditorContainerHeight(t), this.canvasManager.setCanvasWrapperWidth(s), this.canvasManager.setCanvasWrapperHeight(n), this.canvasManager.setCanvasCSSWidth(i), this.canvasManager.setCanvasCSSHeight(a), o != null && o.source) {
|
|
2769
2793
|
const {
|
|
2770
2794
|
source: h,
|
|
2771
|
-
scale: g = `image-${
|
|
2795
|
+
scale: g = `image-${c}`,
|
|
2772
2796
|
withoutSave: u = !0
|
|
2773
2797
|
} = o;
|
|
2774
2798
|
yield this.imageManager.importImage({ source: h, scale: g, withoutSave: u });
|
|
@@ -2788,7 +2812,7 @@ class ne {
|
|
|
2788
2812
|
this.montageArea = this.shapeManager.addRectangle({
|
|
2789
2813
|
width: e,
|
|
2790
2814
|
height: t,
|
|
2791
|
-
fill:
|
|
2815
|
+
fill: ie._createMosaicPattern(),
|
|
2792
2816
|
stroke: null,
|
|
2793
2817
|
strokeWidth: 0,
|
|
2794
2818
|
selectable: !1,
|
|
@@ -2838,13 +2862,13 @@ class ne {
|
|
|
2838
2862
|
const e = document.createElement("canvas");
|
|
2839
2863
|
e.width = 20, e.height = 20;
|
|
2840
2864
|
const t = e.getContext("2d");
|
|
2841
|
-
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
|
|
2865
|
+
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 Le({
|
|
2842
2866
|
source: e,
|
|
2843
2867
|
repeat: "repeat"
|
|
2844
2868
|
});
|
|
2845
2869
|
}
|
|
2846
2870
|
}
|
|
2847
|
-
const
|
|
2871
|
+
const Mt = {
|
|
2848
2872
|
/**
|
|
2849
2873
|
* Опции редактора
|
|
2850
2874
|
*/
|
|
@@ -2933,18 +2957,18 @@ const lt = {
|
|
|
2933
2957
|
resetObjectFitByDoubleClick: !0,
|
|
2934
2958
|
keyboardIgnoreSelectors: []
|
|
2935
2959
|
};
|
|
2936
|
-
function
|
|
2937
|
-
const t = y(y({},
|
|
2960
|
+
function vt(r, e = {}) {
|
|
2961
|
+
const t = y(y({}, Mt), e), s = document.getElementById(r);
|
|
2938
2962
|
if (!s)
|
|
2939
|
-
return Promise.reject(new Error(`Контейнер с ID "${
|
|
2963
|
+
return Promise.reject(new Error(`Контейнер с ID "${r}" не найден.`));
|
|
2940
2964
|
const n = document.createElement("canvas");
|
|
2941
|
-
return n.id = `${
|
|
2965
|
+
return n.id = `${r}-canvas`, s.appendChild(n), t.editorContainer = s, new Promise((i) => {
|
|
2942
2966
|
t._onReadyCallback = i;
|
|
2943
|
-
const a = new
|
|
2944
|
-
window[
|
|
2967
|
+
const a = new ie(n.id, t);
|
|
2968
|
+
window[r] = a;
|
|
2945
2969
|
});
|
|
2946
2970
|
}
|
|
2947
2971
|
export {
|
|
2948
|
-
|
|
2972
|
+
vt as default
|
|
2949
2973
|
};
|
|
2950
2974
|
//# sourceMappingURL=main.js.map
|