@anu3ev/fabric-image-editor 0.1.56 → 0.1.58
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 +391 -393
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -2,40 +2,40 @@ var fe = Object.defineProperty, je = Object.defineProperties;
|
|
|
2
2
|
var be = Object.getOwnPropertyDescriptors;
|
|
3
3
|
var H = Object.getOwnPropertySymbols;
|
|
4
4
|
var ce = Object.prototype.hasOwnProperty, de = Object.prototype.propertyIsEnumerable;
|
|
5
|
-
var re = (
|
|
5
|
+
var re = (c, e, t) => e in c ? fe(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t, y = (c, e) => {
|
|
6
6
|
for (var t in e || (e = {}))
|
|
7
|
-
ce.call(e, t) && re(
|
|
7
|
+
ce.call(e, t) && re(c, t, e[t]);
|
|
8
8
|
if (H)
|
|
9
9
|
for (var t of H(e))
|
|
10
|
-
de.call(e, t) && re(
|
|
11
|
-
return
|
|
12
|
-
}, le = (
|
|
13
|
-
var Y = (
|
|
10
|
+
de.call(e, t) && re(c, t, e[t]);
|
|
11
|
+
return c;
|
|
12
|
+
}, le = (c, e) => je(c, be(e));
|
|
13
|
+
var Y = (c, e) => {
|
|
14
14
|
var t = {};
|
|
15
|
-
for (var s in
|
|
16
|
-
ce.call(
|
|
17
|
-
if (
|
|
18
|
-
for (var s of H(
|
|
19
|
-
e.indexOf(s) < 0 && de.call(
|
|
15
|
+
for (var s in c)
|
|
16
|
+
ce.call(c, s) && e.indexOf(s) < 0 && (t[s] = c[s]);
|
|
17
|
+
if (c != null && H)
|
|
18
|
+
for (var s of H(c))
|
|
19
|
+
e.indexOf(s) < 0 && de.call(c, s) && (t[s] = c[s]);
|
|
20
20
|
return t;
|
|
21
21
|
};
|
|
22
|
-
var I = (
|
|
23
|
-
var
|
|
22
|
+
var I = (c, e, t) => new Promise((s, n) => {
|
|
23
|
+
var i = (d) => {
|
|
24
24
|
try {
|
|
25
|
-
o(t.next(
|
|
25
|
+
o(t.next(d));
|
|
26
26
|
} catch (r) {
|
|
27
|
-
|
|
27
|
+
n(r);
|
|
28
28
|
}
|
|
29
|
-
}, a = (
|
|
29
|
+
}, a = (d) => {
|
|
30
30
|
try {
|
|
31
|
-
o(t.throw(
|
|
31
|
+
o(t.throw(d));
|
|
32
32
|
} catch (r) {
|
|
33
|
-
|
|
33
|
+
n(r);
|
|
34
34
|
}
|
|
35
|
-
}, o = (
|
|
36
|
-
o((t = t.apply(
|
|
35
|
+
}, o = (d) => d.done ? s(d.value) : Promise.resolve(d.value).then(i, a);
|
|
36
|
+
o((t = t.apply(c, e)).next());
|
|
37
37
|
});
|
|
38
|
-
import { ActiveSelection as v, util as R, controlsUtils as
|
|
38
|
+
import { ActiveSelection as v, util as R, controlsUtils as ye, InteractiveFabricObject as pe, loadSVGFromURL as Ie, FabricImage as Z, Point as _, Rect as ve, Circle as Ae, Triangle as Se, Group as X, Canvas as Ce, Pattern as Ne } from "fabric";
|
|
39
39
|
import { create as De } from "jsondiffpatch";
|
|
40
40
|
import Le from "diff-match-patch";
|
|
41
41
|
var we = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", L = function() {
|
|
@@ -71,15 +71,15 @@ class z {
|
|
|
71
71
|
adaptCanvasToContainerOnResize: e,
|
|
72
72
|
canvasDragging: t,
|
|
73
73
|
mouseWheelZooming: s,
|
|
74
|
-
bringToFrontOnSelection:
|
|
75
|
-
copyObjectsByHotkey:
|
|
74
|
+
bringToFrontOnSelection: n,
|
|
75
|
+
copyObjectsByHotkey: i,
|
|
76
76
|
pasteImageFromClipboard: a,
|
|
77
77
|
undoRedoByHotKeys: o,
|
|
78
|
-
selectAllByHotkey:
|
|
78
|
+
selectAllByHotkey: d,
|
|
79
79
|
deleteObjectsByHotkey: r,
|
|
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),
|
|
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 }), r && 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
|
* При массовом выделении объектов удаляем из него залоченные.
|
|
@@ -89,19 +89,19 @@ class z {
|
|
|
89
89
|
*/
|
|
90
90
|
_filterLockedSelection({ selected: e, e: t }) {
|
|
91
91
|
if (!(e != null && e.length) || !(t instanceof MouseEvent) || e.length === 1 || !e.some((a) => a.locked)) return;
|
|
92
|
-
const
|
|
93
|
-
if (
|
|
92
|
+
const n = e.filter((a) => !a.locked);
|
|
93
|
+
if (n.length === 0) {
|
|
94
94
|
this.canvas.discardActiveObject();
|
|
95
95
|
return;
|
|
96
96
|
}
|
|
97
|
-
if (
|
|
98
|
-
this.canvas.setActiveObject(
|
|
97
|
+
if (n.length === 1) {
|
|
98
|
+
this.canvas.setActiveObject(n[0]);
|
|
99
99
|
return;
|
|
100
100
|
}
|
|
101
|
-
const
|
|
101
|
+
const i = new v(n, {
|
|
102
102
|
canvas: this.canvas
|
|
103
103
|
});
|
|
104
|
-
this.canvas.setActiveObject(
|
|
104
|
+
this.canvas.setActiveObject(i), this.canvas.requestRenderAll();
|
|
105
105
|
}
|
|
106
106
|
/**
|
|
107
107
|
* Обработчики для сохранения состояния редактора в истории.
|
|
@@ -132,7 +132,7 @@ class z {
|
|
|
132
132
|
* Адаптирует канвас к размерам контейнера, сохраняя позиции объектов.
|
|
133
133
|
*/
|
|
134
134
|
handleContainerResize() {
|
|
135
|
-
this.editor.canvasManager.
|
|
135
|
+
this.editor.canvasManager.updateCanvas();
|
|
136
136
|
}
|
|
137
137
|
/**
|
|
138
138
|
* Обработчик для Ctrl+C (копирование).
|
|
@@ -142,8 +142,8 @@ class z {
|
|
|
142
142
|
* @param event.code — код клавиши
|
|
143
143
|
*/
|
|
144
144
|
handleCopyEvent(e) {
|
|
145
|
-
const { ctrlKey: t, metaKey: s, code:
|
|
146
|
-
!t && !s ||
|
|
145
|
+
const { ctrlKey: t, metaKey: s, code: n } = e;
|
|
146
|
+
!t && !s || n !== "KeyC" || (e.preventDefault(), this.editor.clipboardManager.copy());
|
|
147
147
|
}
|
|
148
148
|
/**
|
|
149
149
|
* Обработчик вставки объекта или изображения из буфера обмена.
|
|
@@ -161,8 +161,8 @@ class z {
|
|
|
161
161
|
*/
|
|
162
162
|
handleUndoRedoEvent(e) {
|
|
163
163
|
return I(this, null, function* () {
|
|
164
|
-
const { ctrlKey: t, metaKey: s, code:
|
|
165
|
-
!t && !s ||
|
|
164
|
+
const { ctrlKey: t, metaKey: s, code: n, repeat: i } = e;
|
|
165
|
+
!t && !s || 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()));
|
|
166
166
|
});
|
|
167
167
|
}
|
|
168
168
|
/**
|
|
@@ -181,8 +181,8 @@ class z {
|
|
|
181
181
|
* @param event.code — код клавиши
|
|
182
182
|
*/
|
|
183
183
|
handleSelectAllEvent(e) {
|
|
184
|
-
const { ctrlKey: t, metaKey: s, code:
|
|
185
|
-
!t && !s ||
|
|
184
|
+
const { ctrlKey: t, metaKey: s, code: n } = e;
|
|
185
|
+
!t && !s || n !== "KeyA" || (e.preventDefault(), this.editor.selectionManager.selectAll());
|
|
186
186
|
}
|
|
187
187
|
/**
|
|
188
188
|
* Обработчик для удаления объектов (Delete).
|
|
@@ -200,8 +200,8 @@ class z {
|
|
|
200
200
|
*/
|
|
201
201
|
handleSpaceKeyDown(e) {
|
|
202
202
|
if (e.code !== "Space") return;
|
|
203
|
-
const { canvas: t, editor: s, isSpacePressed:
|
|
204
|
-
|
|
203
|
+
const { canvas: t, editor: s, isSpacePressed: n, isDragging: i } = this;
|
|
204
|
+
n || i || (this.isSpacePressed = !0, e.preventDefault(), t.set({
|
|
205
205
|
selection: !1,
|
|
206
206
|
defaultCursor: "grab"
|
|
207
207
|
}), t.setCursor("grab"), s.canvasManager.getObjects().forEach((a) => {
|
|
@@ -299,9 +299,9 @@ class z {
|
|
|
299
299
|
*/
|
|
300
300
|
static debounce(e, t) {
|
|
301
301
|
let s = null;
|
|
302
|
-
return function(...
|
|
302
|
+
return function(...n) {
|
|
303
303
|
s !== null && clearTimeout(s), s = setTimeout(() => {
|
|
304
|
-
e.apply(this,
|
|
304
|
+
e.apply(this, n);
|
|
305
305
|
}, t);
|
|
306
306
|
};
|
|
307
307
|
}
|
|
@@ -324,11 +324,11 @@ class Ee {
|
|
|
324
324
|
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}"`));
|
|
325
325
|
}
|
|
326
326
|
}
|
|
327
|
-
function Oe(
|
|
327
|
+
function Oe(c) {
|
|
328
328
|
return new Worker(
|
|
329
329
|
"" + new URL("assets/worker-Cmho-Hr0.js", import.meta.url).href,
|
|
330
330
|
{
|
|
331
|
-
name:
|
|
331
|
+
name: c == null ? void 0 : c.name
|
|
332
332
|
}
|
|
333
333
|
);
|
|
334
334
|
}
|
|
@@ -351,12 +351,12 @@ class Te {
|
|
|
351
351
|
* @returns
|
|
352
352
|
*/
|
|
353
353
|
_handleMessage({ data: e }) {
|
|
354
|
-
const { requestId: t, success: s, data:
|
|
354
|
+
const { requestId: t, success: s, data: n, error: i } = e, a = this._callbacks.get(t);
|
|
355
355
|
if (!a) {
|
|
356
356
|
console.warn(`No callback found for requestId: ${t}`);
|
|
357
357
|
return;
|
|
358
358
|
}
|
|
359
|
-
s ? a.resolve(
|
|
359
|
+
s ? a.resolve(n) : a.reject(new Error(i)), this._callbacks.delete(t);
|
|
360
360
|
}
|
|
361
361
|
/**
|
|
362
362
|
* Универсальный метод отправки команды в воркер
|
|
@@ -366,9 +366,9 @@ class Te {
|
|
|
366
366
|
* @returns Promise, который будет выполнен, когда воркер вернет ответ
|
|
367
367
|
*/
|
|
368
368
|
post(e, t, s = []) {
|
|
369
|
-
const
|
|
370
|
-
return new Promise((
|
|
371
|
-
this._callbacks.set(
|
|
369
|
+
const n = `${e}:${L(8)}`;
|
|
370
|
+
return new Promise((i, a) => {
|
|
371
|
+
this._callbacks.set(n, { resolve: i, reject: a }), this.worker.postMessage({ action: e, payload: t, requestId: n }, s);
|
|
372
372
|
});
|
|
373
373
|
}
|
|
374
374
|
/**
|
|
@@ -379,23 +379,23 @@ class Te {
|
|
|
379
379
|
}
|
|
380
380
|
}
|
|
381
381
|
const N = 12, ke = 2, Q = 8, J = 20, xe = 100, $ = 20, K = 8, Be = 100, q = 32, ee = 1, Ze = "#2B2D33", te = "#3D8BF4", se = "#FFFFFF";
|
|
382
|
-
function W(
|
|
383
|
-
const
|
|
384
|
-
|
|
382
|
+
function W(c, e, t, s, n) {
|
|
383
|
+
const i = N, a = ke;
|
|
384
|
+
c.save(), c.translate(e, t), c.rotate(R.degreesToRadians(n.angle)), c.fillStyle = se, c.strokeStyle = te, c.lineWidth = ee, c.beginPath(), c.roundRect(-12 / 2, -12 / 2, i, i, a), c.fill(), c.stroke(), c.restore();
|
|
385
385
|
}
|
|
386
|
-
function he(
|
|
387
|
-
const
|
|
388
|
-
|
|
386
|
+
function he(c, e, t, s, n) {
|
|
387
|
+
const i = Q, a = J, o = xe;
|
|
388
|
+
c.save(), c.translate(e, t), c.rotate(R.degreesToRadians(n.angle)), c.fillStyle = se, c.strokeStyle = te, c.lineWidth = ee, c.beginPath(), c.roundRect(-8 / 2, -20 / 2, i, a, o), c.fill(), c.stroke(), c.restore();
|
|
389
389
|
}
|
|
390
|
-
function ge(
|
|
391
|
-
const
|
|
392
|
-
|
|
390
|
+
function ge(c, e, t, s, n) {
|
|
391
|
+
const i = $, a = K, o = Be;
|
|
392
|
+
c.save(), c.translate(e, t), c.rotate(R.degreesToRadians(n.angle)), c.fillStyle = se, c.strokeStyle = te, c.lineWidth = ee, c.beginPath(), c.roundRect(-20 / 2, -8 / 2, i, a, o), c.fill(), c.stroke(), c.restore();
|
|
393
393
|
}
|
|
394
394
|
const Ue = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", ue = new Image();
|
|
395
395
|
ue.src = Ue;
|
|
396
|
-
function ze(
|
|
396
|
+
function ze(c, e, t, s, n) {
|
|
397
397
|
const a = q / 2;
|
|
398
|
-
|
|
398
|
+
c.save(), c.translate(e, t), c.rotate(R.degreesToRadians(n.angle)), c.fillStyle = Ze, c.beginPath(), c.arc(0, 0, a, 0, 2 * Math.PI), c.fill(), c.drawImage(ue, -16 / 2, -16 / 2, a, a), c.restore();
|
|
399
399
|
}
|
|
400
400
|
const Re = {
|
|
401
401
|
// Угловые точки
|
|
@@ -468,7 +468,7 @@ const Re = {
|
|
|
468
468
|
};
|
|
469
469
|
class He {
|
|
470
470
|
static apply() {
|
|
471
|
-
const e =
|
|
471
|
+
const e = ye.createObjectDefaultControls();
|
|
472
472
|
Object.entries(Re).forEach(([t, s]) => {
|
|
473
473
|
Object.assign(e[t], {
|
|
474
474
|
render: s.render,
|
|
@@ -476,11 +476,11 @@ class He {
|
|
|
476
476
|
sizeY: s.sizeY,
|
|
477
477
|
offsetX: s.offsetX,
|
|
478
478
|
offsetY: s.offsetY
|
|
479
|
-
}), t === "mtr" && (e[t].cursorStyle = "grab", e[t].mouseDownHandler = (
|
|
479
|
+
}), t === "mtr" && (e[t].cursorStyle = "grab", e[t].mouseDownHandler = (i, a, o, d) => {
|
|
480
480
|
var l;
|
|
481
481
|
(l = a.target.canvas) == null || l.setCursor("grabbing");
|
|
482
482
|
});
|
|
483
|
-
}),
|
|
483
|
+
}), pe.ownDefaults.controls = e;
|
|
484
484
|
}
|
|
485
485
|
}
|
|
486
486
|
const Ye = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNi44NzUgMi41YS42MjUuNjI1IDAgMCAwLS42MjUuNjI0VjYuMjVIMy4xMjVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2MTBjMCAuMzQ1LjI4LjYyNS42MjUuNjI1aDEwYy4zNDUgMCAuNjI1LS4yOC42MjUtLjYyNXYtMy4xMjZoMy4xMjVjLjM0NSAwIC42MjUtLjI4LjYyNS0uNjI1di0xMGEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTEwWm02Ljg3NSAxMGgyLjVWMy43NUg3LjV2Mi41aDUuNjI1Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NS42MjRabS0xMCAzLjc1VjcuNWg4Ljc1djguNzVIMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", We = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi41IDcuNWMwLS42OS41Ni0xLjI1IDEuMjUtMS4yNWgxMi41Yy42OSAwIDEuMjUuNTYgMS4yNSAxLjI1djguNzVjMCAuNjktLjU2IDEuMjUtMS4yNSAxLjI1SDMuNzVjLS42OSAwLTEuMjUtLjU2LTEuMjUtMS4yNVY3LjVabTEzLjc1IDBIMy43NXY4Ljc1aDEyLjVWNy41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMS44NzVhMi4xODggMi4xODggMCAwIDAtMi4xODggMi4xODh2Mi44MTJhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyYTMuNDM3IDMuNDM3IDAgMSAxIDYuODc1IDB2Mi44MTNhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyQTIuMTg4IDIuMTg4IDAgMCAwIDEwIDEuODc2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEwIDEyLjgxM2EuOTM3LjkzNyAwIDEgMCAwLTEuODc1LjkzNy45MzcgMCAwIDAgMCAxLjg3NFoiLz48L3N2Zz4=", _e = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE2LjI1IDYuMjVINy41VjQuMzc1YTIuNSAyLjUgMCAwIDEgMi41LTIuNWMxLjIgMCAyLjI4MS44NiAyLjUxMiAyYS42MjUuNjI1IDAgMCAwIDEuMjI2LS4yNWMtLjM1NC0xLjczOC0xLjkyNS0zLTMuNzM4LTNhMy43NTQgMy43NTQgMCAwIDAtMy43NSAzLjc1VjYuMjVoLTIuNUExLjI1IDEuMjUgMCAwIDAgMi41IDcuNXY4Ljc1YTEuMjUgMS4yNSAwIDAgMCAxLjI1IDEuMjVoMTIuNWExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjcuNWExLjI1IDEuMjUgMCAwIDAtMS4yNS0xLjI1Wm0wIDEwSDMuNzVWNy41aDEyLjV2OC43NVptLTUuMzEzLTQuMzc1YS45MzcuOTM3IDAgMSAxLTEuODc0IDAgLjkzNy45MzcgMCAwIDEgMS44NzQgMFoiLz48L3N2Zz4K", Pe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIuNSA4LjEyNSAxMCAxMi41bDcuNS00LjM3NUwxMCAzLjc1IDIuNSA4LjEyNVoiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjY4NSAzLjIxYS42MjUuNjI1IDAgMCAxIC42MyAwbDcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOGw3LjUtNC4zNzVaTTMuNzQgOC4xMjUgMTAgMTEuNzc2bDYuMjYtMy42NTFMMTAgNC40NzQgMy43NCA4LjEyNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA5LjQ2YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDExLjc3NmwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA5LjQ2Wm0tMS42NiAyLjQxNUwxMCAxNS41MjZsNi4yNi0zLjY1MS0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNi0xLjk3NSAxLjE1MVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", Fe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMy4yMWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDguMTI1IDEwIDExLjc3Nmw2LjI2LTMuNjUxTDEwIDQuNDc0IDMuNzQgOC4xMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjcxNCAxMCAxMCAxMi41bDQuMjg2LTIuNSAzLjIxNCAxLjg3NUwxMCAxNi4yNWwtNy41LTQuMzc1TDUuNzE0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDkuNDZhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgMTEuNzc2bDMuOTctMi4zMTZhLjYyNS42MjUgMCAwIDEgLjYzIDBsMy4yMTUgMS44NzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhMNS40IDkuNDZabS0xLjY2IDIuNDE1TDEwIDE1LjUyNmw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2LTEuOTc1IDEuMTUxWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", Ve = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTIuNSA2LjI1IDcuNSA0LjM3NSA3LjUtNC4zNzVMMTAgMS44NzUgMi41IDYuMjVaIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMS4zMzVhLjYyNS42MjUgMCAwIDEgLjYzIDBsNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4bDcuNS00LjM3NVpNMy43NCA2LjI1IDEwIDkuOTAxbDYuMjYtMy42NTFMMTAgMi41OTkgMy43NCA2LjI1WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDExLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCAxMy42NTFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgMTEuMzM1Wk0zLjc0IDEzLjc1IDEwIDE3LjQwMWw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTMuNzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgNy41ODVhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgOS45MDFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgNy41ODVaTTMuNzQgMTAgMTAgMTMuNjUxIDE2LjI2IDEwbC0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNkwzLjc0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", Ge = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMS45NiAxMy40MzVhLjYyNS42MjUgMCAwIDEgLjg1NS0uMjI1TDEwIDE3LjQwMWw3LjE4NS00LjE5YS42MjUuNjI1IDAgMCAxIC42MyAxLjA3OWwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEtLjIyNS0uODU1Wk05LjY4NSAxLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDYuMjUgMTAgOS45MDFsNi4yNi0zLjY1MUwxMCAyLjU5OSAzLjc0IDYuMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im01LjcxNCAxMS44NzUgNC4yODYgMi41IDQuMjg2LTIuNUwxNy41IDEzLjc1IDEwIDE4LjEyNSAyLjUgMTMuNzVsMy4yMTQtMS44NzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgMTEuMzM1YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDEzLjY1MWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCAxMS4zMzVaTTMuNzQgMTMuNzUgMTAgMTcuNDAxbDYuMjYtMy42NTEtMS45NzQtMS4xNTEtMy45NzEgMi4zMTZhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTMuOTctMi4zMTZMMy43NCAxMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA3LjU4NWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCA5LjkwMWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA3LjU4NVpNMy43NCAxMCAxMCAxMy42NTEgMTYuMjYgMTBsLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTBaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=", Xe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI0VDNEU0MCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOC4xMjUgMS4yNUExLjg3NSAxLjg3NSAwIDAgMCA2LjI1IDMuMTI1di42MjVIMy4xMjVhLjYyNS42MjUgMCAwIDAgMCAxLjI1aC42MjV2MTEuMjVBMS4yNSAxLjI1IDAgMCAwIDUgMTcuNWgxMGExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjVoLjYyNWEuNjI1LjYyNSAwIDAgMCAwLTEuMjVIMTMuNzV2LS42MjVhMS44NzUgMS44NzUgMCAwIDAtMS44NzUtMS44NzVoLTMuNzVabTQuMzc1IDIuNXYtLjYyNWEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2LjYyNWg1Wk01IDE2LjI1VjVoMTB2MTEuMjVINVpNOC4xMjUgNy41Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NWEuNjI1LjYyNSAwIDEgMS0xLjI1IDB2LTVjMC0uMzQ1LjI4LS42MjUuNjI1LS42MjVabTQuMzc1IDUuNjI1di01YS42MjUuNjI1IDAgMCAwLTEuMjUgMHY1YS42MjUuNjI1IDAgMSAwIDEuMjUgMFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", U = {
|
|
@@ -560,29 +560,29 @@ const Ye = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMj
|
|
|
560
560
|
sendBackwards: Fe
|
|
561
561
|
},
|
|
562
562
|
handlers: {
|
|
563
|
-
copyPaste: (
|
|
564
|
-
yield
|
|
563
|
+
copyPaste: (c) => I(void 0, null, function* () {
|
|
564
|
+
yield c.clipboardManager.copy(), yield c.clipboardManager.paste();
|
|
565
565
|
}),
|
|
566
|
-
delete: (
|
|
567
|
-
|
|
566
|
+
delete: (c) => {
|
|
567
|
+
c.deletionManager.deleteSelectedObjects();
|
|
568
568
|
},
|
|
569
|
-
lock: (
|
|
570
|
-
|
|
569
|
+
lock: (c) => {
|
|
570
|
+
c.objectLockManager.lockObject();
|
|
571
571
|
},
|
|
572
|
-
unlock: (
|
|
573
|
-
|
|
572
|
+
unlock: (c) => {
|
|
573
|
+
c.objectLockManager.unlockObject();
|
|
574
574
|
},
|
|
575
|
-
bringForward: (
|
|
576
|
-
|
|
575
|
+
bringForward: (c) => {
|
|
576
|
+
c.layerManager.bringForward();
|
|
577
577
|
},
|
|
578
|
-
bringToFront: (
|
|
579
|
-
|
|
578
|
+
bringToFront: (c) => {
|
|
579
|
+
c.layerManager.bringToFront();
|
|
580
580
|
},
|
|
581
|
-
sendToBack: (
|
|
582
|
-
|
|
581
|
+
sendToBack: (c) => {
|
|
582
|
+
c.layerManager.sendToBack();
|
|
583
583
|
},
|
|
584
|
-
sendBackwards: (
|
|
585
|
-
|
|
584
|
+
sendBackwards: (c) => {
|
|
585
|
+
c.layerManager.sendBackwards();
|
|
586
586
|
}
|
|
587
587
|
}
|
|
588
588
|
};
|
|
@@ -593,11 +593,11 @@ class Qe {
|
|
|
593
593
|
_initToolbar() {
|
|
594
594
|
if (!this.options.showToolbar) return;
|
|
595
595
|
const e = this.options.toolbar || {};
|
|
596
|
-
this.config = le(
|
|
597
|
-
style:
|
|
598
|
-
btnStyle:
|
|
599
|
-
icons:
|
|
600
|
-
handlers:
|
|
596
|
+
this.config = le(y(y({}, U), e), {
|
|
597
|
+
style: y(y({}, U.style), e.style || {}),
|
|
598
|
+
btnStyle: y(y({}, U.btnStyle), e.btnStyle || {}),
|
|
599
|
+
icons: y(y({}, U.icons), e.icons || {}),
|
|
600
|
+
handlers: y(y({}, U.handlers), e.handlers || {})
|
|
601
601
|
}), 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 = () => {
|
|
602
602
|
this.el.style.display = "none";
|
|
603
603
|
}, this._createDOM(), this._bindEvents();
|
|
@@ -608,11 +608,11 @@ class Qe {
|
|
|
608
608
|
_createDOM() {
|
|
609
609
|
const { style: e } = this.config;
|
|
610
610
|
this.el = document.createElement("div"), Object.assign(this.el.style, e), this.canvas.wrapperEl.appendChild(this.el), this._onBtnOver = (t) => {
|
|
611
|
-
const
|
|
612
|
-
|
|
611
|
+
const n = t.target.closest("button");
|
|
612
|
+
n && Object.assign(n.style, this.config.btnHover);
|
|
613
613
|
}, this._onBtnOut = (t) => {
|
|
614
|
-
const
|
|
615
|
-
|
|
614
|
+
const n = t.target.closest("button");
|
|
615
|
+
n && Object.assign(n.style, this.config.btnStyle);
|
|
616
616
|
}, this.el.addEventListener("mouseover", this._onBtnOver), this.el.addEventListener("mouseout", this._onBtnOut);
|
|
617
617
|
}
|
|
618
618
|
/**
|
|
@@ -624,11 +624,11 @@ class Qe {
|
|
|
624
624
|
_renderButtons(e) {
|
|
625
625
|
this.el.innerHTML = "";
|
|
626
626
|
for (const t of e) {
|
|
627
|
-
const { name: s, handle:
|
|
628
|
-
|
|
627
|
+
const { name: s, handle: n } = t, { icons: i = {}, btnStyle: a, handlers: o = {} } = this.config, d = document.createElement("button");
|
|
628
|
+
d.innerHTML = i[n] ? `<img src="${i[n]}" title="${s}" />` : s, Object.assign(d.style, a), d.onclick = () => {
|
|
629
629
|
var r;
|
|
630
|
-
return (r = o[
|
|
631
|
-
}, this.el.appendChild(
|
|
630
|
+
return (r = o[n]) == null ? void 0 : r.call(o, this.editor);
|
|
631
|
+
}, this.el.appendChild(d);
|
|
632
632
|
}
|
|
633
633
|
}
|
|
634
634
|
/**
|
|
@@ -684,9 +684,9 @@ class Qe {
|
|
|
684
684
|
this.el.style.display = "none";
|
|
685
685
|
return;
|
|
686
686
|
}
|
|
687
|
-
const { el: t, config: s, canvas:
|
|
687
|
+
const { el: t, config: s, canvas: n } = this;
|
|
688
688
|
e.setCoords();
|
|
689
|
-
const
|
|
689
|
+
const i = n.getZoom(), [, , , , a, o] = n.viewportTransform, { x: d } = e.getCenterPoint(), { top: r, height: l } = e.getBoundingRect(), g = d * i + a - t.offsetWidth / 2, u = s.offsetTop || 0, m = (r + l) * i + o + u;
|
|
690
690
|
Object.assign(t.style, {
|
|
691
691
|
left: `${g}px`,
|
|
692
692
|
top: `${m}px`,
|
|
@@ -766,10 +766,10 @@ class Je {
|
|
|
766
766
|
*/
|
|
767
767
|
getFullState() {
|
|
768
768
|
const { baseState: e, currentIndex: t, patches: s } = this;
|
|
769
|
-
let
|
|
770
|
-
for (let
|
|
771
|
-
|
|
772
|
-
return console.log("getFullState state",
|
|
769
|
+
let n = JSON.parse(JSON.stringify(e));
|
|
770
|
+
for (let i = 0; i < t; i += 1)
|
|
771
|
+
n = this.diffPatcher.patch(n, s[i].diff);
|
|
772
|
+
return console.log("getFullState state", n), n;
|
|
773
773
|
}
|
|
774
774
|
/**
|
|
775
775
|
* Сохраняем текущее состояние в виде диффа от последнего сохранённого полного состояния.
|
|
@@ -813,12 +813,12 @@ class Je {
|
|
|
813
813
|
return I(this, null, function* () {
|
|
814
814
|
if (!e) return;
|
|
815
815
|
console.log("loadStateFromFullState fullState", e);
|
|
816
|
-
const { canvas: t, canvasManager: s, interactionBlocker:
|
|
816
|
+
const { canvas: t, canvasManager: s, interactionBlocker: n } = this.editor, { width: i, height: a } = t;
|
|
817
817
|
yield t.loadFromJSON(e);
|
|
818
818
|
const o = t.getObjects().find((r) => r.id === "montage-area");
|
|
819
|
-
o && (this.editor.montageArea = o, (
|
|
820
|
-
const
|
|
821
|
-
|
|
819
|
+
o && (this.editor.montageArea = o, (i !== t.getWidth() || a !== t.getHeight()) && s.updateCanvas());
|
|
820
|
+
const d = t.getObjects().find((r) => r.id === "overlay-mask");
|
|
821
|
+
d && (n.overlayMask = d, n.overlayMask.visible = !1), t.renderAll(), t.fire("editor:history-state-loaded", {
|
|
822
822
|
fullState: e,
|
|
823
823
|
currentIndex: this.currentIndex,
|
|
824
824
|
totalChangesCount: this.totalChangesCount,
|
|
@@ -925,10 +925,10 @@ class D {
|
|
|
925
925
|
const {
|
|
926
926
|
source: t,
|
|
927
927
|
scale: s = `image-${this.options.scaleType}`,
|
|
928
|
-
withoutSave:
|
|
928
|
+
withoutSave: n = !1
|
|
929
929
|
} = e;
|
|
930
930
|
if (!t) return null;
|
|
931
|
-
const { canvas:
|
|
931
|
+
const { canvas: i, montageArea: a, transformManager: o, historyManager: d, errorManager: r } = this.editor, l = yield this.getContentType(t), h = D.getFormatFromContentType(l), { acceptContentTypes: g, acceptFormats: u } = this;
|
|
932
932
|
if (!this.isAllowedContentType(l)) {
|
|
933
933
|
const m = `Неверный contentType для изображения: ${l}. Ожидается один из: ${this.acceptContentTypes.join(", ")}.`;
|
|
934
934
|
return r.emitError({
|
|
@@ -939,7 +939,7 @@ class D {
|
|
|
939
939
|
data: { source: t, format: h, contentType: l, acceptContentTypes: g, acceptFormats: u }
|
|
940
940
|
}), null;
|
|
941
941
|
}
|
|
942
|
-
|
|
942
|
+
d.suspendHistory();
|
|
943
943
|
try {
|
|
944
944
|
let m, M;
|
|
945
945
|
if (t instanceof File)
|
|
@@ -978,24 +978,24 @@ class D {
|
|
|
978
978
|
const { width: b, height: S } = a, w = this.calculateScaleFactor({ imageObject: M, scaleType: s });
|
|
979
979
|
s === "image-contain" && w < 1 ? o.fitObject({ object: M, type: "contain", withoutSave: !0 }) : s === "image-cover" && (f > b || j > S) && o.fitObject({ object: M, type: "cover", withoutSave: !0 });
|
|
980
980
|
}
|
|
981
|
-
|
|
981
|
+
i.add(M), i.centerObject(M), i.setActiveObject(M), i.renderAll(), d.resumeHistory(), n || d.saveState();
|
|
982
982
|
const A = {
|
|
983
983
|
image: M,
|
|
984
984
|
format: h,
|
|
985
985
|
contentType: l,
|
|
986
986
|
scale: s,
|
|
987
|
-
withoutSave:
|
|
987
|
+
withoutSave: n,
|
|
988
988
|
source: t
|
|
989
989
|
};
|
|
990
|
-
return
|
|
990
|
+
return i.fire("editor:image-imported", A), A;
|
|
991
991
|
} catch (m) {
|
|
992
992
|
return r.emitError({
|
|
993
993
|
origin: "ImageManager",
|
|
994
994
|
method: "importImage",
|
|
995
995
|
code: "IMPORT_FAILED",
|
|
996
996
|
message: `Ошибка импорта изображения: ${m.message}`,
|
|
997
|
-
data: { source: t, format: h, contentType: l, scale: s, withoutSave:
|
|
998
|
-
}),
|
|
997
|
+
data: { source: t, format: h, contentType: l, scale: s, withoutSave: n }
|
|
998
|
+
}), d.resumeHistory(), null;
|
|
999
999
|
}
|
|
1000
1000
|
});
|
|
1001
1001
|
}
|
|
@@ -1011,7 +1011,7 @@ class D {
|
|
|
1011
1011
|
return I(this, null, function* () {
|
|
1012
1012
|
let s = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${O}x${T}`;
|
|
1013
1013
|
t === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${x}x${B}`);
|
|
1014
|
-
const
|
|
1014
|
+
const n = {
|
|
1015
1015
|
dataURL: e,
|
|
1016
1016
|
sizeType: t,
|
|
1017
1017
|
maxWidth: O,
|
|
@@ -1024,8 +1024,8 @@ class D {
|
|
|
1024
1024
|
method: "resizeImageToBoundaries",
|
|
1025
1025
|
code: "IMAGE_RESIZE_WARNING",
|
|
1026
1026
|
message: s,
|
|
1027
|
-
data:
|
|
1028
|
-
}), this.editor.workerManager.post("resizeImage",
|
|
1027
|
+
data: n
|
|
1028
|
+
}), this.editor.workerManager.post("resizeImage", n);
|
|
1029
1029
|
});
|
|
1030
1030
|
}
|
|
1031
1031
|
/**
|
|
@@ -1044,24 +1044,24 @@ class D {
|
|
|
1044
1044
|
const {
|
|
1045
1045
|
fileName: t = "image.png",
|
|
1046
1046
|
contentType: s = "image/png",
|
|
1047
|
-
exportAsBase64:
|
|
1048
|
-
exportAsBlob:
|
|
1049
|
-
} = e, { canvas: a, montageArea: o, workerManager:
|
|
1047
|
+
exportAsBase64: n = !1,
|
|
1048
|
+
exportAsBlob: i = !1
|
|
1049
|
+
} = e, { canvas: a, montageArea: o, workerManager: d } = this.editor;
|
|
1050
1050
|
try {
|
|
1051
1051
|
const r = s === "application/pdf", l = r ? "image/jpg" : s, h = D.getFormatFromContentType(l);
|
|
1052
1052
|
o.setCoords();
|
|
1053
1053
|
const { left: g, top: u, width: m, height: M } = o.getBoundingRect(), f = yield a.clone(["id", "format", "locked"]);
|
|
1054
1054
|
["image/jpg", "image/jpeg"].includes(l) && (f.backgroundColor = "#ffffff");
|
|
1055
|
-
const j = f.getObjects().find((
|
|
1055
|
+
const j = f.getObjects().find((p) => p.id === o.id);
|
|
1056
1056
|
j && (j.visible = !1), f.viewportTransform = [1, 0, 0, 1, -g, -u], f.setDimensions({ width: m, height: M }, { backstoreOnly: !0 }), f.renderAll();
|
|
1057
|
-
const A = f.getObjects().filter((
|
|
1057
|
+
const A = f.getObjects().filter((p) => p.format).every((p) => p.format === "svg");
|
|
1058
1058
|
if (h === "svg" && A) {
|
|
1059
|
-
const
|
|
1059
|
+
const p = f.toSVG();
|
|
1060
1060
|
f.dispose();
|
|
1061
1061
|
const C = {
|
|
1062
|
-
image: D._exportSVGStringAsFile(
|
|
1063
|
-
exportAsBase64:
|
|
1064
|
-
exportAsBlob:
|
|
1062
|
+
image: D._exportSVGStringAsFile(p, {
|
|
1063
|
+
exportAsBase64: n,
|
|
1064
|
+
exportAsBlob: i,
|
|
1065
1065
|
fileName: t
|
|
1066
1066
|
}),
|
|
1067
1067
|
format: "svg",
|
|
@@ -1070,21 +1070,21 @@ class D {
|
|
|
1070
1070
|
};
|
|
1071
1071
|
return a.fire("editor:canvas-exported", C), C;
|
|
1072
1072
|
}
|
|
1073
|
-
const b = yield new Promise((
|
|
1073
|
+
const b = yield new Promise((p, k) => {
|
|
1074
1074
|
f.getElement().toBlob((C) => {
|
|
1075
|
-
C ?
|
|
1075
|
+
C ? p(C) : k(new Error("Failed to create Blob from canvas"));
|
|
1076
1076
|
});
|
|
1077
1077
|
});
|
|
1078
|
-
if (f.dispose(),
|
|
1079
|
-
const
|
|
1078
|
+
if (f.dispose(), i) {
|
|
1079
|
+
const p = {
|
|
1080
1080
|
image: b,
|
|
1081
1081
|
format: h,
|
|
1082
1082
|
contentType: l,
|
|
1083
1083
|
fileName: t
|
|
1084
1084
|
};
|
|
1085
|
-
return a.fire("editor:canvas-exported",
|
|
1085
|
+
return a.fire("editor:canvas-exported", p), p;
|
|
1086
1086
|
}
|
|
1087
|
-
const S = yield createImageBitmap(b), w = yield
|
|
1087
|
+
const S = yield createImageBitmap(b), w = yield d.post(
|
|
1088
1088
|
"toDataURL",
|
|
1089
1089
|
{ format: h, quality: 1, bitmap: S },
|
|
1090
1090
|
[S]
|
|
@@ -1095,7 +1095,7 @@ class D {
|
|
|
1095
1095
|
unit: "mm",
|
|
1096
1096
|
format: [k, C]
|
|
1097
1097
|
});
|
|
1098
|
-
if (G.addImage(String(w), "JPG", 0, 0, k, C),
|
|
1098
|
+
if (G.addImage(String(w), "JPG", 0, 0, k, C), n) {
|
|
1099
1099
|
const oe = {
|
|
1100
1100
|
image: G.output("datauristring"),
|
|
1101
1101
|
format: "pdf",
|
|
@@ -1112,29 +1112,29 @@ class D {
|
|
|
1112
1112
|
};
|
|
1113
1113
|
return a.fire("editor:canvas-exported", ae), ae;
|
|
1114
1114
|
}
|
|
1115
|
-
if (
|
|
1116
|
-
const
|
|
1115
|
+
if (n) {
|
|
1116
|
+
const p = {
|
|
1117
1117
|
image: w,
|
|
1118
1118
|
format: h,
|
|
1119
1119
|
contentType: l,
|
|
1120
1120
|
fileName: t
|
|
1121
1121
|
};
|
|
1122
|
-
return a.fire("editor:canvas-exported",
|
|
1122
|
+
return a.fire("editor:canvas-exported", p), p;
|
|
1123
1123
|
}
|
|
1124
|
-
const E = h === "svg" && !A ? t.replace(/\.[^/.]+$/, ".png") : t,
|
|
1124
|
+
const E = h === "svg" && !A ? t.replace(/\.[^/.]+$/, ".png") : t, ie = {
|
|
1125
1125
|
image: new File([b], E, { type: l }),
|
|
1126
1126
|
format: h,
|
|
1127
1127
|
contentType: l,
|
|
1128
1128
|
fileName: E
|
|
1129
1129
|
};
|
|
1130
|
-
return a.fire("editor:canvas-exported",
|
|
1130
|
+
return a.fire("editor:canvas-exported", ie), ie;
|
|
1131
1131
|
} catch (r) {
|
|
1132
1132
|
return this.editor.errorManager.emitError({
|
|
1133
1133
|
origin: "ImageManager",
|
|
1134
1134
|
method: "exportCanvasAsImageFile",
|
|
1135
1135
|
code: "IMAGE_EXPORT_FAILED",
|
|
1136
1136
|
message: `Ошибка экспорта изображения: ${r.message}`,
|
|
1137
|
-
data: { contentType: s, fileName: t, exportAsBase64:
|
|
1137
|
+
data: { contentType: s, fileName: t, exportAsBase64: n, exportAsBlob: i }
|
|
1138
1138
|
}), null;
|
|
1139
1139
|
}
|
|
1140
1140
|
});
|
|
@@ -1155,23 +1155,23 @@ class D {
|
|
|
1155
1155
|
const {
|
|
1156
1156
|
object: t,
|
|
1157
1157
|
fileName: s = "image.png",
|
|
1158
|
-
contentType:
|
|
1159
|
-
exportAsBase64:
|
|
1158
|
+
contentType: n = "image/png",
|
|
1159
|
+
exportAsBase64: i = !1,
|
|
1160
1160
|
exportAsBlob: a = !1
|
|
1161
|
-
} = e, { canvas: o, workerManager:
|
|
1161
|
+
} = e, { canvas: o, workerManager: d } = this.editor, r = t || o.getActiveObject();
|
|
1162
1162
|
if (!r)
|
|
1163
1163
|
return this.editor.errorManager.emitError({
|
|
1164
1164
|
origin: "ImageManager",
|
|
1165
1165
|
method: "exportObjectAsImageFile",
|
|
1166
1166
|
code: "NO_OBJECT_SELECTED",
|
|
1167
1167
|
message: "Не выбран объект для экспорта",
|
|
1168
|
-
data: { contentType:
|
|
1168
|
+
data: { contentType: n, fileName: s, exportAsBase64: i, exportAsBlob: a }
|
|
1169
1169
|
}), null;
|
|
1170
1170
|
try {
|
|
1171
|
-
const l = D.getFormatFromContentType(
|
|
1171
|
+
const l = D.getFormatFromContentType(n);
|
|
1172
1172
|
if (l === "svg") {
|
|
1173
1173
|
const M = r.toSVG(), f = D._exportSVGStringAsFile(M, {
|
|
1174
|
-
exportAsBase64:
|
|
1174
|
+
exportAsBase64: i,
|
|
1175
1175
|
exportAsBlob: a,
|
|
1176
1176
|
fileName: s
|
|
1177
1177
|
}), j = {
|
|
@@ -1183,8 +1183,8 @@ class D {
|
|
|
1183
1183
|
};
|
|
1184
1184
|
return o.fire("editor:object-exported", j), j;
|
|
1185
1185
|
}
|
|
1186
|
-
if (
|
|
1187
|
-
const M = yield createImageBitmap(r.getElement()), f = yield
|
|
1186
|
+
if (i && r instanceof Z) {
|
|
1187
|
+
const M = yield createImageBitmap(r.getElement()), f = yield d.post(
|
|
1188
1188
|
"toDataURL",
|
|
1189
1189
|
{
|
|
1190
1190
|
format: l,
|
|
@@ -1196,7 +1196,7 @@ class D {
|
|
|
1196
1196
|
object: r,
|
|
1197
1197
|
image: f,
|
|
1198
1198
|
format: l,
|
|
1199
|
-
contentType:
|
|
1199
|
+
contentType: n,
|
|
1200
1200
|
fileName: s
|
|
1201
1201
|
};
|
|
1202
1202
|
return o.fire("editor:object-exported", j), j;
|
|
@@ -1211,16 +1211,16 @@ class D {
|
|
|
1211
1211
|
object: r,
|
|
1212
1212
|
image: g,
|
|
1213
1213
|
format: l,
|
|
1214
|
-
contentType:
|
|
1214
|
+
contentType: n,
|
|
1215
1215
|
fileName: s
|
|
1216
1216
|
};
|
|
1217
1217
|
return o.fire("editor:object-exported", M), M;
|
|
1218
1218
|
}
|
|
1219
|
-
const u = new File([g], s, { type:
|
|
1219
|
+
const u = new File([g], s, { type: n }), m = {
|
|
1220
1220
|
object: r,
|
|
1221
1221
|
image: u,
|
|
1222
1222
|
format: l,
|
|
1223
|
-
contentType:
|
|
1223
|
+
contentType: n,
|
|
1224
1224
|
fileName: s
|
|
1225
1225
|
};
|
|
1226
1226
|
return o.fire("editor:object-exported", m), m;
|
|
@@ -1230,7 +1230,7 @@ class D {
|
|
|
1230
1230
|
method: "exportObjectAsImageFile",
|
|
1231
1231
|
code: "IMAGE_EXPORT_FAILED",
|
|
1232
1232
|
message: `Ошибка экспорта объекта: ${l.message}`,
|
|
1233
|
-
data: { contentType:
|
|
1233
|
+
data: { contentType: n, fileName: s, exportAsBase64: i, exportAsBlob: a }
|
|
1234
1234
|
}), null;
|
|
1235
1235
|
}
|
|
1236
1236
|
});
|
|
@@ -1297,11 +1297,11 @@ class D {
|
|
|
1297
1297
|
getContentTypeFromExtension(e) {
|
|
1298
1298
|
var t;
|
|
1299
1299
|
try {
|
|
1300
|
-
const
|
|
1300
|
+
const n = (t = new URL(e).pathname.split(".").pop()) == null ? void 0 : t.toLowerCase(), i = {};
|
|
1301
1301
|
return this.acceptContentTypes.forEach((a) => {
|
|
1302
1302
|
const o = D.getFormatFromContentType(a);
|
|
1303
|
-
o && (
|
|
1304
|
-
}),
|
|
1303
|
+
o && (i[o] = a);
|
|
1304
|
+
}), n && i[n] || "application/octet-stream";
|
|
1305
1305
|
} catch (s) {
|
|
1306
1306
|
return console.warn("Не удалось определить расширение из URL:", e, s), "application/octet-stream";
|
|
1307
1307
|
}
|
|
@@ -1319,8 +1319,8 @@ class D {
|
|
|
1319
1319
|
}) {
|
|
1320
1320
|
const { montageArea: s } = this.editor;
|
|
1321
1321
|
if (!s || !e) return 1;
|
|
1322
|
-
const
|
|
1323
|
-
return t === "contain" || t === "image-contain" ? Math.min(
|
|
1322
|
+
const n = s.width, i = s.height, { width: a, height: o } = e;
|
|
1323
|
+
return t === "contain" || t === "image-contain" ? Math.min(n / a, i / o) : t === "cover" || t === "image-cover" ? Math.max(n / a, i / o) : 1;
|
|
1324
1324
|
}
|
|
1325
1325
|
/**
|
|
1326
1326
|
* Преобразует SVG-строку в Blob, файл, или base64
|
|
@@ -1336,9 +1336,9 @@ class D {
|
|
|
1336
1336
|
static _exportSVGStringAsFile(e, {
|
|
1337
1337
|
exportAsBase64: t,
|
|
1338
1338
|
exportAsBlob: s,
|
|
1339
|
-
fileName:
|
|
1339
|
+
fileName: n = "image.svg"
|
|
1340
1340
|
} = {}) {
|
|
1341
|
-
return s ? new Blob([e], { type: "image/svg+xml" }) : t ? `data:image/svg+xml;base64,${window.btoa(encodeURIComponent(e))}` : new File([e],
|
|
1341
|
+
return s ? new Blob([e], { type: "image/svg+xml" }) : t ? `data:image/svg+xml;base64,${window.btoa(encodeURIComponent(e))}` : new File([e], n.replace(/\.[^/.]+$/, ".svg"), { type: "image/svg+xml" });
|
|
1342
1342
|
}
|
|
1343
1343
|
/**
|
|
1344
1344
|
* Извлекает чистый формат (subtype) из contentType,
|
|
@@ -1369,25 +1369,25 @@ class tt {
|
|
|
1369
1369
|
* @param options.adaptCanvasToContainer - Адаптировать канвас к контейнеру
|
|
1370
1370
|
* @fires editor:resolution-width-changed
|
|
1371
1371
|
*/
|
|
1372
|
-
setResolutionWidth(e, { preserveProportional: t, withoutSave: s, adaptCanvasToContainer:
|
|
1372
|
+
setResolutionWidth(e, { preserveProportional: t, withoutSave: s, adaptCanvasToContainer: n } = {}) {
|
|
1373
1373
|
var m;
|
|
1374
1374
|
if (!e) return;
|
|
1375
1375
|
const {
|
|
1376
|
-
canvas:
|
|
1376
|
+
canvas: i,
|
|
1377
1377
|
montageArea: a,
|
|
1378
1378
|
options: { canvasBackstoreWidth: o }
|
|
1379
|
-
} = this.editor, { width:
|
|
1380
|
-
if (!o || o === "auto" ||
|
|
1381
|
-
const M = l /
|
|
1379
|
+
} = this.editor, { width: d, height: r } = a, l = Math.max(Math.min(Number(e), O), x);
|
|
1380
|
+
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) {
|
|
1381
|
+
const M = l / d, f = r * M;
|
|
1382
1382
|
this.setResolutionHeight(f);
|
|
1383
1383
|
return;
|
|
1384
1384
|
}
|
|
1385
|
-
const { left: h, top: g } = this.getObjectDefaultCoords(a), u =
|
|
1386
|
-
|
|
1385
|
+
const { left: h, top: g } = this.getObjectDefaultCoords(a), u = i.getZoom();
|
|
1386
|
+
i.setViewportTransform([u, 0, 0, u, h, g]), this.centerMontageArea(), s || this.editor.historyManager.saveState(), i.fire("editor:resolution-width-changed", {
|
|
1387
1387
|
width: l,
|
|
1388
1388
|
preserveProportional: t,
|
|
1389
1389
|
withoutSave: s,
|
|
1390
|
-
adaptCanvasToContainer:
|
|
1390
|
+
adaptCanvasToContainer: n
|
|
1391
1391
|
});
|
|
1392
1392
|
}
|
|
1393
1393
|
/**
|
|
@@ -1399,25 +1399,25 @@ class tt {
|
|
|
1399
1399
|
* @param options.adaptCanvasToContainer - Адаптировать канвас к контейнеру
|
|
1400
1400
|
* @fires editor:resolution-height-changed
|
|
1401
1401
|
*/
|
|
1402
|
-
setResolutionHeight(e, { preserveProportional: t, withoutSave: s, adaptCanvasToContainer:
|
|
1402
|
+
setResolutionHeight(e, { preserveProportional: t, withoutSave: s, adaptCanvasToContainer: n } = {}) {
|
|
1403
1403
|
var m;
|
|
1404
1404
|
if (!e) return;
|
|
1405
1405
|
const {
|
|
1406
|
-
canvas:
|
|
1406
|
+
canvas: i,
|
|
1407
1407
|
montageArea: a,
|
|
1408
1408
|
options: { canvasBackstoreHeight: o }
|
|
1409
|
-
} = this.editor, { width:
|
|
1410
|
-
if (!o || o === "auto" ||
|
|
1411
|
-
const M = l / r, f =
|
|
1409
|
+
} = this.editor, { width: d, height: r } = a, l = Math.max(Math.min(Number(e), T), B);
|
|
1410
|
+
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) {
|
|
1411
|
+
const M = l / r, f = d * M;
|
|
1412
1412
|
this.setResolutionWidth(f);
|
|
1413
1413
|
return;
|
|
1414
1414
|
}
|
|
1415
|
-
const { left: h, top: g } = this.getObjectDefaultCoords(a), u =
|
|
1416
|
-
|
|
1415
|
+
const { left: h, top: g } = this.getObjectDefaultCoords(a), u = i.getZoom();
|
|
1416
|
+
i.setViewportTransform([u, 0, 0, u, h, g]), this.centerMontageArea(), s || this.editor.historyManager.saveState(), i.fire("editor:resolution-height-changed", {
|
|
1417
1417
|
height: l,
|
|
1418
1418
|
preserveProportional: t,
|
|
1419
1419
|
withoutSave: s,
|
|
1420
|
-
adaptCanvasToContainer:
|
|
1420
|
+
adaptCanvasToContainer: n
|
|
1421
1421
|
});
|
|
1422
1422
|
}
|
|
1423
1423
|
/**
|
|
@@ -1425,17 +1425,17 @@ class tt {
|
|
|
1425
1425
|
* и устанавливает правильный viewportTransform.
|
|
1426
1426
|
*/
|
|
1427
1427
|
centerMontageArea() {
|
|
1428
|
-
var
|
|
1429
|
-
const { canvas: e, montageArea: t } = this.editor, s = e.getWidth(),
|
|
1428
|
+
var d;
|
|
1429
|
+
const { canvas: e, montageArea: t } = this.editor, s = e.getWidth(), n = e.getHeight(), i = e.getZoom(), a = new _(s / 2, n / 2);
|
|
1430
1430
|
t.set({
|
|
1431
1431
|
left: s / 2,
|
|
1432
|
-
top:
|
|
1433
|
-
}), (
|
|
1432
|
+
top: n / 2
|
|
1433
|
+
}), (d = e.clipPath) == null || d.set({
|
|
1434
1434
|
left: s / 2,
|
|
1435
|
-
top:
|
|
1435
|
+
top: n / 2
|
|
1436
1436
|
}), e.renderAll();
|
|
1437
1437
|
const o = e.viewportTransform;
|
|
1438
|
-
o[4] = s / 2 - a.x *
|
|
1438
|
+
o[4] = s / 2 - a.x * i, o[5] = n / 2 - a.y * i, e.setViewportTransform(o), e.renderAll();
|
|
1439
1439
|
}
|
|
1440
1440
|
/**
|
|
1441
1441
|
* Метод для получения координат объекта с учетом текущего зума
|
|
@@ -1451,8 +1451,8 @@ class tt {
|
|
|
1451
1451
|
code: "NO_ACTIVE_OBJECT",
|
|
1452
1452
|
message: "Не выбран объект для получения координат"
|
|
1453
1453
|
}), { left: 0, top: 0 };
|
|
1454
|
-
const { width:
|
|
1455
|
-
return { left: o, top:
|
|
1454
|
+
const { width: n, height: i } = s, a = t.getZoom(), o = (n - n * a) / 2, d = (i - i * a) / 2;
|
|
1455
|
+
return { left: o, top: d };
|
|
1456
1456
|
}
|
|
1457
1457
|
/**
|
|
1458
1458
|
* Устанавливаем ширину канваса в backstore (для экспорта)
|
|
@@ -1477,8 +1477,8 @@ class tt {
|
|
|
1477
1477
|
* с учётом минимальных и максимальных значений.
|
|
1478
1478
|
*/
|
|
1479
1479
|
adaptCanvasToContainer() {
|
|
1480
|
-
const { canvas: e } = this.editor, t = e.editorContainer, s = t.clientWidth,
|
|
1481
|
-
console.log("adaptCanvasToContainer newWidth",
|
|
1480
|
+
const { canvas: e } = this.editor, t = e.editorContainer, s = t.clientWidth, n = t.clientHeight, i = Math.max(Math.min(s, O), x), a = Math.max(Math.min(n, T), B);
|
|
1481
|
+
console.log("adaptCanvasToContainer newWidth", i), console.log("adaptCanvasToContainer newHeight", a), e.setDimensions({ width: i, height: a }, { backstoreOnly: !0 });
|
|
1482
1482
|
}
|
|
1483
1483
|
/**
|
|
1484
1484
|
* Обновляет размеры канваса без изменения позиций объектов.
|
|
@@ -1491,12 +1491,12 @@ class tt {
|
|
|
1491
1491
|
montageArea: t,
|
|
1492
1492
|
montageArea: {
|
|
1493
1493
|
width: s,
|
|
1494
|
-
height:
|
|
1494
|
+
height: n
|
|
1495
1495
|
}
|
|
1496
|
-
} = this.editor,
|
|
1497
|
-
this.setResolutionWidth(s, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.setResolutionHeight(
|
|
1498
|
-
const o = t.left -
|
|
1499
|
-
if (o !== 0 ||
|
|
1496
|
+
} = this.editor, i = t.left, a = t.top;
|
|
1497
|
+
this.setResolutionWidth(s, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.setResolutionHeight(n, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.centerMontageArea();
|
|
1498
|
+
const o = t.left - i, d = t.top - a;
|
|
1499
|
+
if (o !== 0 || d !== 0) {
|
|
1500
1500
|
const r = e.getActiveObject(), l = [];
|
|
1501
1501
|
if ((r == null ? void 0 : r.type) === "activeselection") {
|
|
1502
1502
|
const h = r;
|
|
@@ -1505,7 +1505,7 @@ class tt {
|
|
|
1505
1505
|
if (e.getObjects().forEach((h) => {
|
|
1506
1506
|
h.id === "montage-area" || h.id === "overlay-mask" || (h.set({
|
|
1507
1507
|
left: h.left + o,
|
|
1508
|
-
top: h.top +
|
|
1508
|
+
top: h.top + d
|
|
1509
1509
|
}), h.setCoords());
|
|
1510
1510
|
}), l.length > 0)
|
|
1511
1511
|
if (l.length === 1)
|
|
@@ -1519,7 +1519,7 @@ class tt {
|
|
|
1519
1519
|
}
|
|
1520
1520
|
e.renderAll(), e.fire("editor:canvas-updated", {
|
|
1521
1521
|
width: s,
|
|
1522
|
-
height:
|
|
1522
|
+
height: n
|
|
1523
1523
|
});
|
|
1524
1524
|
}
|
|
1525
1525
|
/**
|
|
@@ -1534,11 +1534,11 @@ class tt {
|
|
|
1534
1534
|
* @param zoom — текущее значение zoom (например, 1, 1.2, 2 и т.д.)
|
|
1535
1535
|
*/
|
|
1536
1536
|
updateCssDimensionsForZoom(e) {
|
|
1537
|
-
const { canvas: t, montageArea: s } = this.editor,
|
|
1537
|
+
const { canvas: t, montageArea: s } = this.editor, n = s.width * e, i = s.height * e, a = t.wrapperEl.parentNode;
|
|
1538
1538
|
if (!(a instanceof HTMLElement)) return;
|
|
1539
|
-
const o =
|
|
1539
|
+
const o = n <= a.clientWidth ? "100%" : n, d = i <= a.clientHeight ? "100%" : i;
|
|
1540
1540
|
t.setDimensions(
|
|
1541
|
-
{ width: o, height:
|
|
1541
|
+
{ width: o, height: d },
|
|
1542
1542
|
{ cssOnly: !0 }
|
|
1543
1543
|
);
|
|
1544
1544
|
}
|
|
@@ -1625,19 +1625,19 @@ class tt {
|
|
|
1625
1625
|
*/
|
|
1626
1626
|
setDisplayDimension({ element: e = "canvas", dimension: t, value: s } = {}) {
|
|
1627
1627
|
if (!s) return;
|
|
1628
|
-
const { canvas:
|
|
1628
|
+
const { canvas: n, options: { editorContainer: i } } = this.editor, a = [];
|
|
1629
1629
|
switch (e) {
|
|
1630
1630
|
case "canvas":
|
|
1631
|
-
a.push(
|
|
1631
|
+
a.push(n.lowerCanvasEl, n.upperCanvasEl);
|
|
1632
1632
|
break;
|
|
1633
1633
|
case "wrapper":
|
|
1634
|
-
a.push(
|
|
1634
|
+
a.push(n.wrapperEl);
|
|
1635
1635
|
break;
|
|
1636
1636
|
case "container":
|
|
1637
|
-
a.push(
|
|
1637
|
+
a.push(i);
|
|
1638
1638
|
break;
|
|
1639
1639
|
default:
|
|
1640
|
-
a.push(
|
|
1640
|
+
a.push(n.lowerCanvasEl, n.upperCanvasEl);
|
|
1641
1641
|
}
|
|
1642
1642
|
const o = t === "width" ? "width" : "height";
|
|
1643
1643
|
if (typeof s == "string") {
|
|
@@ -1647,10 +1647,10 @@ class tt {
|
|
|
1647
1647
|
return;
|
|
1648
1648
|
}
|
|
1649
1649
|
if (isNaN(s)) return;
|
|
1650
|
-
const
|
|
1650
|
+
const d = `${s}px`;
|
|
1651
1651
|
a.forEach((r) => {
|
|
1652
|
-
r.style[o] =
|
|
1653
|
-
}),
|
|
1652
|
+
r.style[o] = d;
|
|
1653
|
+
}), n.fire(`editor:display-${e}-${o}-changed`, {
|
|
1654
1654
|
element: e,
|
|
1655
1655
|
value: s
|
|
1656
1656
|
});
|
|
@@ -1665,14 +1665,14 @@ class tt {
|
|
|
1665
1665
|
*/
|
|
1666
1666
|
scaleMontageAreaToImage({ object: e, preserveAspectRatio: t, withoutSave: s } = {}) {
|
|
1667
1667
|
const {
|
|
1668
|
-
canvas:
|
|
1669
|
-
montageArea:
|
|
1668
|
+
canvas: n,
|
|
1669
|
+
montageArea: i,
|
|
1670
1670
|
transformManager: a,
|
|
1671
1671
|
options: {
|
|
1672
1672
|
montageAreaWidth: o,
|
|
1673
|
-
montageAreaHeight:
|
|
1673
|
+
montageAreaHeight: d
|
|
1674
1674
|
}
|
|
1675
|
-
} = this.editor, r = e ||
|
|
1675
|
+
} = this.editor, r = e || n.getActiveObject();
|
|
1676
1676
|
if (!r || r.type !== "image" && r.format !== "svg") return;
|
|
1677
1677
|
const { width: l, height: h } = r;
|
|
1678
1678
|
let g = Math.min(l, O), u = Math.min(h, T);
|
|
@@ -1680,10 +1680,10 @@ class tt {
|
|
|
1680
1680
|
const {
|
|
1681
1681
|
width: m,
|
|
1682
1682
|
height: M
|
|
1683
|
-
} =
|
|
1683
|
+
} = i, f = l / m, j = h / M, A = Math.max(f, j);
|
|
1684
1684
|
g = m * A, u = M * A;
|
|
1685
1685
|
}
|
|
1686
|
-
this.setResolutionWidth(g, { withoutSave: !0 }), this.setResolutionHeight(u, { withoutSave: !0 }), (l > o || h >
|
|
1686
|
+
this.setResolutionWidth(g, { withoutSave: !0 }), this.setResolutionHeight(u, { withoutSave: !0 }), (l > o || h > d) && a.calculateAndApplyDefaultZoom(), a.resetObject(r, { withoutSave: !0 }), n.centerObject(r), n.renderAll(), s || this.editor.historyManager.saveState(), n.fire("editor:montage-area-scaled-to-image", {
|
|
1687
1687
|
object: r,
|
|
1688
1688
|
width: g,
|
|
1689
1689
|
height: u,
|
|
@@ -1709,13 +1709,13 @@ class tt {
|
|
|
1709
1709
|
const {
|
|
1710
1710
|
canvas: t,
|
|
1711
1711
|
transformManager: s,
|
|
1712
|
-
historyManager:
|
|
1712
|
+
historyManager: n,
|
|
1713
1713
|
options: {
|
|
1714
|
-
montageAreaWidth:
|
|
1714
|
+
montageAreaWidth: i,
|
|
1715
1715
|
montageAreaHeight: a
|
|
1716
1716
|
}
|
|
1717
1717
|
} = this.editor;
|
|
1718
|
-
s.resetZoom(), this.setResolutionWidth(
|
|
1718
|
+
s.resetZoom(), this.setResolutionWidth(i, { withoutSave: !0 }), this.setResolutionHeight(a, { withoutSave: !0 }), t.renderAll(), s.resetObjects(), e || n.saveState(), t.fire("editor:default-scale-set");
|
|
1719
1719
|
}
|
|
1720
1720
|
/**
|
|
1721
1721
|
* Получение всех объектов внутри монтажной области редактора
|
|
@@ -1723,7 +1723,7 @@ class tt {
|
|
|
1723
1723
|
*/
|
|
1724
1724
|
getObjects() {
|
|
1725
1725
|
const { canvas: e, montageArea: t, interactionBlocker: { overlayMask: s } } = this.editor;
|
|
1726
|
-
return e.getObjects().filter((
|
|
1726
|
+
return e.getObjects().filter((i) => i.id !== t.id && i.id !== (s == null ? void 0 : s.id));
|
|
1727
1727
|
}
|
|
1728
1728
|
}
|
|
1729
1729
|
class st {
|
|
@@ -1738,8 +1738,8 @@ class st {
|
|
|
1738
1738
|
* @param scale - Желаемый масштаб относительно размеров контейнера редактора.
|
|
1739
1739
|
*/
|
|
1740
1740
|
calculateAndApplyDefaultZoom(e = this.options.defaultScale) {
|
|
1741
|
-
const { canvas: t } = this.editor, s = t.editorContainer,
|
|
1742
|
-
this.defaultZoom = Math.min(
|
|
1741
|
+
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, r = i / o * e;
|
|
1742
|
+
this.defaultZoom = Math.min(d, r);
|
|
1743
1743
|
const { defaultZoom: l, maxZoomFactor: h, minZoom: g, maxZoom: u } = this;
|
|
1744
1744
|
this.minZoom = Math.min(l / h, g), this.maxZoom = Math.max(l * h, u), this.setZoom();
|
|
1745
1745
|
}
|
|
@@ -1755,14 +1755,14 @@ class st {
|
|
|
1755
1755
|
zoom(e = qe, t = {}) {
|
|
1756
1756
|
var g, u;
|
|
1757
1757
|
if (!e) return;
|
|
1758
|
-
const { minZoom: s, maxZoom:
|
|
1758
|
+
const { minZoom: s, maxZoom: n } = this, { canvas: i } = this.editor, a = i.getZoom(), o = i.getCenterPoint(), d = (g = t.pointX) != null ? g : o.x, r = (u = t.pointY) != null ? u : o.y, l = new _(d, r);
|
|
1759
1759
|
let h = Number((a + Number(e)).toFixed(2));
|
|
1760
|
-
h >
|
|
1760
|
+
h > n && (h = n), h < s && (h = s), i.zoomToPoint(l, h), console.log({
|
|
1761
1761
|
currentZoom: a,
|
|
1762
1762
|
zoom: h,
|
|
1763
1763
|
point: l
|
|
1764
|
-
}),
|
|
1765
|
-
currentZoom:
|
|
1764
|
+
}), i.fire("editor:zoom-changed", {
|
|
1765
|
+
currentZoom: i.getZoom(),
|
|
1766
1766
|
zoom: h,
|
|
1767
1767
|
point: l
|
|
1768
1768
|
});
|
|
@@ -1773,12 +1773,12 @@ class st {
|
|
|
1773
1773
|
* @fires editor:zoom-changed
|
|
1774
1774
|
*/
|
|
1775
1775
|
setZoom(e = this.defaultZoom) {
|
|
1776
|
-
const { minZoom: t, maxZoom: s } = this, { canvas:
|
|
1776
|
+
const { minZoom: t, maxZoom: s } = this, { canvas: n } = this.editor, i = new _(n.getCenterPoint());
|
|
1777
1777
|
let a = e;
|
|
1778
|
-
e > s && (a = s), e < t && (a = t),
|
|
1779
|
-
currentZoom:
|
|
1778
|
+
e > s && (a = s), e < t && (a = t), n.zoomToPoint(i, a), n.fire("editor:zoom-changed", {
|
|
1779
|
+
currentZoom: n.getZoom(),
|
|
1780
1780
|
zoom: a,
|
|
1781
|
-
point:
|
|
1781
|
+
point: i
|
|
1782
1782
|
});
|
|
1783
1783
|
}
|
|
1784
1784
|
/**
|
|
@@ -1800,11 +1800,11 @@ class st {
|
|
|
1800
1800
|
* @fires editor:object-rotated
|
|
1801
1801
|
*/
|
|
1802
1802
|
rotate(e = et, { withoutSave: t } = {}) {
|
|
1803
|
-
const { canvas: s, historyManager:
|
|
1804
|
-
if (!
|
|
1805
|
-
const a =
|
|
1806
|
-
|
|
1807
|
-
object:
|
|
1803
|
+
const { canvas: s, historyManager: n } = this.editor, i = s.getActiveObject();
|
|
1804
|
+
if (!i) return;
|
|
1805
|
+
const a = i.angle + e;
|
|
1806
|
+
i.rotate(a), i.setCoords(), s.renderAll(), t || n.saveState(), s.fire("editor:object-rotated", {
|
|
1807
|
+
object: i,
|
|
1808
1808
|
withoutSave: t,
|
|
1809
1809
|
angle: a
|
|
1810
1810
|
});
|
|
@@ -1816,9 +1816,9 @@ class st {
|
|
|
1816
1816
|
* @fires editor:object-flipped-x
|
|
1817
1817
|
*/
|
|
1818
1818
|
flipX({ withoutSave: e } = {}) {
|
|
1819
|
-
const { canvas: t, historyManager: s } = this.editor,
|
|
1820
|
-
|
|
1821
|
-
object:
|
|
1819
|
+
const { canvas: t, historyManager: s } = this.editor, n = t.getActiveObject();
|
|
1820
|
+
n && (n.flipX = !n.flipX, t.renderAll(), e || s.saveState(), t.fire("editor:object-flipped-x", {
|
|
1821
|
+
object: n,
|
|
1822
1822
|
withoutSave: e
|
|
1823
1823
|
}));
|
|
1824
1824
|
}
|
|
@@ -1829,9 +1829,9 @@ class st {
|
|
|
1829
1829
|
* @fires editor:object-flipped-y
|
|
1830
1830
|
*/
|
|
1831
1831
|
flipY({ withoutSave: e } = {}) {
|
|
1832
|
-
const { canvas: t, historyManager: s } = this.editor,
|
|
1833
|
-
|
|
1834
|
-
object:
|
|
1832
|
+
const { canvas: t, historyManager: s } = this.editor, n = t.getActiveObject();
|
|
1833
|
+
n && (n.flipY = !n.flipY, t.renderAll(), e || s.saveState(), t.fire("editor:object-flipped-y", {
|
|
1834
|
+
object: n,
|
|
1835
1835
|
withoutSave: e
|
|
1836
1836
|
}));
|
|
1837
1837
|
}
|
|
@@ -1848,10 +1848,10 @@ class st {
|
|
|
1848
1848
|
opacity: t = 1,
|
|
1849
1849
|
withoutSave: s
|
|
1850
1850
|
} = {}) {
|
|
1851
|
-
const { canvas:
|
|
1851
|
+
const { canvas: n, historyManager: i } = this.editor, a = e || n.getActiveObject();
|
|
1852
1852
|
a && (a instanceof v ? a.getObjects().forEach((o) => {
|
|
1853
1853
|
o.set("opacity", t);
|
|
1854
|
-
}) : a.set("opacity", t),
|
|
1854
|
+
}) : a.set("opacity", t), n.renderAll(), s || i.saveState(), n.fire("editor:object-opacity-changed", {
|
|
1855
1855
|
object: a,
|
|
1856
1856
|
opacity: t,
|
|
1857
1857
|
withoutSave: s
|
|
@@ -1872,24 +1872,24 @@ class st {
|
|
|
1872
1872
|
object: e,
|
|
1873
1873
|
type: t = this.options.scaleType,
|
|
1874
1874
|
withoutSave: s,
|
|
1875
|
-
fitAsOneObject:
|
|
1875
|
+
fitAsOneObject: n
|
|
1876
1876
|
} = {}) {
|
|
1877
|
-
const { canvas:
|
|
1877
|
+
const { canvas: i, historyManager: a } = this.editor, o = e || i.getActiveObject();
|
|
1878
1878
|
if (o) {
|
|
1879
|
-
if (o instanceof v && !
|
|
1880
|
-
const
|
|
1881
|
-
|
|
1879
|
+
if (o instanceof v && !n) {
|
|
1880
|
+
const d = o.getObjects();
|
|
1881
|
+
i.discardActiveObject(), d.forEach((l) => {
|
|
1882
1882
|
this._fitSingleObject(l, t);
|
|
1883
1883
|
});
|
|
1884
|
-
const r = new v(
|
|
1885
|
-
|
|
1884
|
+
const r = new v(d, { canvas: i });
|
|
1885
|
+
i.setActiveObject(r);
|
|
1886
1886
|
} else
|
|
1887
1887
|
this._fitSingleObject(o, t);
|
|
1888
|
-
|
|
1888
|
+
i.renderAll(), s || a.saveState(), i.fire("editor:object-fitted", {
|
|
1889
1889
|
object: o,
|
|
1890
1890
|
type: t,
|
|
1891
1891
|
withoutSave: s,
|
|
1892
|
-
fitAsOneObject:
|
|
1892
|
+
fitAsOneObject: n
|
|
1893
1893
|
});
|
|
1894
1894
|
}
|
|
1895
1895
|
}
|
|
@@ -1900,11 +1900,11 @@ class st {
|
|
|
1900
1900
|
* @private
|
|
1901
1901
|
*/
|
|
1902
1902
|
_fitSingleObject(e, t) {
|
|
1903
|
-
const { canvas: s, montageArea:
|
|
1903
|
+
const { canvas: s, montageArea: n } = this.editor, { width: i, height: a, scaleX: o = 1, scaleY: d = 1, angle: r = 0 } = e, l = i * Math.abs(o), h = a * Math.abs(d), g = r * 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;
|
|
1904
1904
|
let b;
|
|
1905
1905
|
t === "contain" ? b = Math.min(j / M, A / f) : b = Math.max(j / M, A / f), e.set({
|
|
1906
1906
|
scaleX: o * b,
|
|
1907
|
-
scaleY:
|
|
1907
|
+
scaleY: d * b
|
|
1908
1908
|
}), s.centerObject(e);
|
|
1909
1909
|
}
|
|
1910
1910
|
/**
|
|
@@ -1925,12 +1925,12 @@ class st {
|
|
|
1925
1925
|
*/
|
|
1926
1926
|
resetObject(e, { alwaysFitObject: t = !1, withoutSave: s = !1 } = {}) {
|
|
1927
1927
|
const {
|
|
1928
|
-
canvas:
|
|
1929
|
-
montageArea:
|
|
1928
|
+
canvas: n,
|
|
1929
|
+
montageArea: i,
|
|
1930
1930
|
imageManager: a,
|
|
1931
1931
|
historyManager: o,
|
|
1932
|
-
options: { scaleType:
|
|
1933
|
-
} = this.editor, r = e ||
|
|
1932
|
+
options: { scaleType: d }
|
|
1933
|
+
} = this.editor, r = e || n.getActiveObject();
|
|
1934
1934
|
if (!r || r.locked) return;
|
|
1935
1935
|
if (o.suspendHistory(), r.type === "image" || r.format === "svg" || r.set({
|
|
1936
1936
|
scaleX: 1,
|
|
@@ -1941,20 +1941,20 @@ class st {
|
|
|
1941
1941
|
}), t)
|
|
1942
1942
|
this.fitObject({ object: r, withoutSave: !0, fitAsOneObject: !0 });
|
|
1943
1943
|
else {
|
|
1944
|
-
const { width: h, height: g } =
|
|
1944
|
+
const { width: h, height: g } = i, { width: u, height: m } = r, M = a.calculateScaleFactor({
|
|
1945
1945
|
imageObject: r,
|
|
1946
|
-
scaleType:
|
|
1946
|
+
scaleType: d
|
|
1947
1947
|
});
|
|
1948
|
-
|
|
1948
|
+
d === "contain" && M < 1 || d === "cover" && (u > h || m > g) ? this.fitObject({ object: r, withoutSave: !0, fitAsOneObject: !0 }) : r.set({ scaleX: 1, scaleY: 1 });
|
|
1949
1949
|
}
|
|
1950
|
-
r.set({ flipX: !1, flipY: !1, angle: 0 }),
|
|
1950
|
+
r.set({ flipX: !1, flipY: !1, angle: 0 }), n.centerObject(r), n.renderAll(), o.resumeHistory(), s || o.saveState(), n.fire("editor:object-reset", {
|
|
1951
1951
|
object: r,
|
|
1952
1952
|
withoutSave: s,
|
|
1953
1953
|
alwaysFitObject: t
|
|
1954
1954
|
});
|
|
1955
1955
|
}
|
|
1956
1956
|
}
|
|
1957
|
-
class
|
|
1957
|
+
class nt {
|
|
1958
1958
|
constructor({ editor: e }) {
|
|
1959
1959
|
this.editor = e, this.isBlocked = !1, this.overlayMask = null, this._createOverlay();
|
|
1960
1960
|
}
|
|
@@ -1984,8 +1984,8 @@ class it {
|
|
|
1984
1984
|
const { canvas: e, montageArea: t, historyManager: s } = this.editor;
|
|
1985
1985
|
if (!t || !this.overlayMask) return;
|
|
1986
1986
|
s.suspendHistory(), t.setCoords();
|
|
1987
|
-
const { left:
|
|
1988
|
-
this.overlayMask.set({ left:
|
|
1987
|
+
const { left: n, top: i, width: a, height: o } = t.getBoundingRect();
|
|
1988
|
+
this.overlayMask.set({ left: n, top: i, width: a, height: o }), e.discardActiveObject(), this.editor.layerManager.bringToFront(this.overlayMask, { withoutSave: !0 }), s.resumeHistory();
|
|
1989
1989
|
}
|
|
1990
1990
|
/**
|
|
1991
1991
|
* Выключает редактор:
|
|
@@ -1996,8 +1996,8 @@ class it {
|
|
|
1996
1996
|
block() {
|
|
1997
1997
|
if (this.isBlocked || !this.overlayMask) return;
|
|
1998
1998
|
const { canvas: e, canvasManager: t, historyManager: s } = this.editor;
|
|
1999
|
-
s.suspendHistory(), this.isBlocked = !0, e.discardActiveObject(), e.selection = !1, e.skipTargetFind = !0, t.getObjects().forEach((
|
|
2000
|
-
|
|
1999
|
+
s.suspendHistory(), this.isBlocked = !0, e.discardActiveObject(), e.selection = !1, e.skipTargetFind = !0, t.getObjects().forEach((n) => {
|
|
2000
|
+
n.evented = !1, n.selectable = !1;
|
|
2001
2001
|
}), e.upperCanvasEl.style.pointerEvents = "none", e.lowerCanvasEl.style.pointerEvents = "none", this.overlayMask.visible = !0, this.refresh(), e.fire("editor:disabled"), s.resumeHistory();
|
|
2002
2002
|
}
|
|
2003
2003
|
/**
|
|
@@ -2006,8 +2006,8 @@ class it {
|
|
|
2006
2006
|
unblock() {
|
|
2007
2007
|
if (!this.isBlocked || !this.overlayMask) return;
|
|
2008
2008
|
const { canvas: e, canvasManager: t, historyManager: s } = this.editor;
|
|
2009
|
-
s.suspendHistory(), this.isBlocked = !1, e.selection = !0, e.skipTargetFind = !1, t.getObjects().forEach((
|
|
2010
|
-
|
|
2009
|
+
s.suspendHistory(), this.isBlocked = !1, e.selection = !0, e.skipTargetFind = !1, t.getObjects().forEach((n) => {
|
|
2010
|
+
n.evented = !0, n.selectable = !0;
|
|
2011
2011
|
}), e.upperCanvasEl.style.pointerEvents = "", e.lowerCanvasEl.style.pointerEvents = "", this.overlayMask.visible = !1, e.requestRenderAll(), e.fire("editor:enabled"), s.resumeHistory();
|
|
2012
2012
|
}
|
|
2013
2013
|
}
|
|
@@ -2023,13 +2023,13 @@ class P {
|
|
|
2023
2023
|
* @fires editor:object-bring-to-front
|
|
2024
2024
|
*/
|
|
2025
2025
|
bringToFront(e, { withoutSave: t } = {}) {
|
|
2026
|
-
const { canvas: s, historyManager:
|
|
2027
|
-
|
|
2028
|
-
const
|
|
2029
|
-
|
|
2026
|
+
const { canvas: s, historyManager: n } = this.editor;
|
|
2027
|
+
n.suspendHistory();
|
|
2028
|
+
const i = e || s.getActiveObject();
|
|
2029
|
+
i && (i instanceof v ? i.getObjects().forEach((a) => {
|
|
2030
2030
|
s.bringObjectToFront(a);
|
|
2031
|
-
}) : s.bringObjectToFront(
|
|
2032
|
-
object:
|
|
2031
|
+
}) : s.bringObjectToFront(i), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:object-bring-to-front", {
|
|
2032
|
+
object: i,
|
|
2033
2033
|
withoutSave: t
|
|
2034
2034
|
}));
|
|
2035
2035
|
}
|
|
@@ -2041,11 +2041,11 @@ class P {
|
|
|
2041
2041
|
* @fires editor:object-bring-forward
|
|
2042
2042
|
*/
|
|
2043
2043
|
bringForward(e, { withoutSave: t } = {}) {
|
|
2044
|
-
const { canvas: s, historyManager:
|
|
2045
|
-
|
|
2046
|
-
const
|
|
2047
|
-
|
|
2048
|
-
object:
|
|
2044
|
+
const { canvas: s, historyManager: n } = this.editor;
|
|
2045
|
+
n.suspendHistory();
|
|
2046
|
+
const i = e || s.getActiveObject();
|
|
2047
|
+
i && (i instanceof v ? P._moveSelectionForward(s, i) : s.bringObjectForward(i), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:object-bring-forward", {
|
|
2048
|
+
object: i,
|
|
2049
2049
|
withoutSave: t
|
|
2050
2050
|
}));
|
|
2051
2051
|
}
|
|
@@ -2059,20 +2059,20 @@ class P {
|
|
|
2059
2059
|
sendToBack(e, { withoutSave: t } = {}) {
|
|
2060
2060
|
const {
|
|
2061
2061
|
canvas: s,
|
|
2062
|
-
montageArea:
|
|
2063
|
-
historyManager:
|
|
2062
|
+
montageArea: n,
|
|
2063
|
+
historyManager: i,
|
|
2064
2064
|
interactionBlocker: { overlayMask: a }
|
|
2065
2065
|
} = this.editor;
|
|
2066
|
-
|
|
2066
|
+
i.suspendHistory();
|
|
2067
2067
|
const o = e || s.getActiveObject();
|
|
2068
2068
|
if (o) {
|
|
2069
2069
|
if (o instanceof v) {
|
|
2070
|
-
const
|
|
2071
|
-
for (let r =
|
|
2072
|
-
s.sendObjectToBack(
|
|
2070
|
+
const d = o.getObjects();
|
|
2071
|
+
for (let r = d.length - 1; r >= 0; r -= 1)
|
|
2072
|
+
s.sendObjectToBack(d[r]);
|
|
2073
2073
|
} else
|
|
2074
2074
|
s.sendObjectToBack(o);
|
|
2075
|
-
s.sendObjectToBack(
|
|
2075
|
+
s.sendObjectToBack(n), a && s.sendObjectToBack(a), s.renderAll(), i.resumeHistory(), t || i.saveState(), s.fire("editor:object-send-to-back", {
|
|
2076
2076
|
object: o,
|
|
2077
2077
|
withoutSave: t
|
|
2078
2078
|
});
|
|
@@ -2087,59 +2087,57 @@ class P {
|
|
|
2087
2087
|
sendBackwards(e, { withoutSave: t } = {}) {
|
|
2088
2088
|
const {
|
|
2089
2089
|
canvas: s,
|
|
2090
|
-
montageArea:
|
|
2091
|
-
historyManager:
|
|
2090
|
+
montageArea: n,
|
|
2091
|
+
historyManager: i,
|
|
2092
2092
|
interactionBlocker: { overlayMask: a }
|
|
2093
2093
|
} = this.editor;
|
|
2094
|
-
|
|
2094
|
+
i.suspendHistory();
|
|
2095
2095
|
const o = e || s.getActiveObject();
|
|
2096
|
-
o && (o instanceof v ? P._moveSelectionBackwards(s, o) : s.sendObjectBackwards(o), s.sendObjectToBack(
|
|
2096
|
+
o && (o instanceof v ? P._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", {
|
|
2097
2097
|
object: o,
|
|
2098
2098
|
withoutSave: t
|
|
2099
2099
|
}));
|
|
2100
2100
|
}
|
|
2101
2101
|
/**
|
|
2102
|
-
* Сдвигает выделенные объекты на один уровень вверх
|
|
2102
|
+
* Сдвигает выделенные объекты на один уровень вверх - каждый объект поднимается
|
|
2103
|
+
* на одну позицию выше относительно своей текущей позиции
|
|
2103
2104
|
* @param canvas - экземпляр холста
|
|
2104
2105
|
* @param activeSelection - активное выделение
|
|
2105
2106
|
*/
|
|
2106
2107
|
static _moveSelectionForward(e, t) {
|
|
2107
|
-
const s = e.getObjects(),
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
|
|
2115
|
-
}
|
|
2116
|
-
|
|
2117
|
-
const r = s.indexOf(c.obj);
|
|
2118
|
-
r < a && (e.moveObjectTo(c.obj, a), a = r);
|
|
2108
|
+
const s = e.getObjects(), n = t.getObjects();
|
|
2109
|
+
if (!n.some((o) => {
|
|
2110
|
+
const d = s.indexOf(o);
|
|
2111
|
+
for (let r = d + 1; r < s.length; r += 1)
|
|
2112
|
+
if (!n.includes(s[r]))
|
|
2113
|
+
return !0;
|
|
2114
|
+
return !1;
|
|
2115
|
+
})) return;
|
|
2116
|
+
n.map((o) => ({ obj: o, index: s.indexOf(o) })).sort((o, d) => d.index - o.index).forEach((o) => {
|
|
2117
|
+
e.bringObjectForward(o.obj);
|
|
2119
2118
|
});
|
|
2120
2119
|
}
|
|
2121
2120
|
/**
|
|
2122
|
-
* Сдвигает выделенные объекты на один уровень вниз
|
|
2121
|
+
* Сдвигает выделенные объекты на один уровень вниз - каждый объект опускается
|
|
2122
|
+
* на одну позицию ниже относительно своей текущей позиции
|
|
2123
2123
|
* @param canvas - экземпляр холста
|
|
2124
2124
|
* @param activeSelection - активное выделение
|
|
2125
2125
|
*/
|
|
2126
2126
|
static _moveSelectionBackwards(e, t) {
|
|
2127
|
-
const s = e.getObjects(),
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
}
|
|
2136
|
-
|
|
2137
|
-
const r = s.indexOf(c.obj);
|
|
2138
|
-
r > a && (e.moveObjectTo(c.obj, a), a = r);
|
|
2127
|
+
const s = e.getObjects(), n = t.getObjects();
|
|
2128
|
+
if (!n.some((o) => {
|
|
2129
|
+
const d = s.indexOf(o);
|
|
2130
|
+
for (let r = d - 1; r >= 0; r -= 1)
|
|
2131
|
+
if (!n.includes(s[r]))
|
|
2132
|
+
return !0;
|
|
2133
|
+
return !1;
|
|
2134
|
+
})) return;
|
|
2135
|
+
n.map((o) => ({ obj: o, index: s.indexOf(o) })).sort((o, d) => o.index - d.index).forEach((o) => {
|
|
2136
|
+
e.sendObjectBackwards(o.obj);
|
|
2139
2137
|
});
|
|
2140
2138
|
}
|
|
2141
2139
|
}
|
|
2142
|
-
class
|
|
2140
|
+
class it {
|
|
2143
2141
|
/**
|
|
2144
2142
|
* Менеджер фигур для редактора.
|
|
2145
2143
|
* @param options - Опции и настройки менеджера фигур.
|
|
@@ -2163,13 +2161,13 @@ class nt {
|
|
|
2163
2161
|
* @param flags.withoutSelection - Не выделять объект
|
|
2164
2162
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2165
2163
|
*/
|
|
2166
|
-
addRectangle(l = {}, { withoutSelection:
|
|
2164
|
+
addRectangle(l = {}, { withoutSelection: d, withoutAdding: r } = {}) {
|
|
2167
2165
|
var h = l, {
|
|
2168
2166
|
id: e = `rect-${L()}`,
|
|
2169
2167
|
left: t,
|
|
2170
2168
|
top: s,
|
|
2171
|
-
width:
|
|
2172
|
-
height:
|
|
2169
|
+
width: n = 100,
|
|
2170
|
+
height: i = 100,
|
|
2173
2171
|
fill: a = "blue"
|
|
2174
2172
|
} = h, o = Y(h, [
|
|
2175
2173
|
"id",
|
|
@@ -2179,15 +2177,15 @@ class nt {
|
|
|
2179
2177
|
"height",
|
|
2180
2178
|
"fill"
|
|
2181
2179
|
]);
|
|
2182
|
-
const { canvas: g } = this.editor, u = new ve(
|
|
2180
|
+
const { canvas: g } = this.editor, u = new ve(y({
|
|
2183
2181
|
id: e,
|
|
2184
2182
|
left: t,
|
|
2185
2183
|
top: s,
|
|
2186
|
-
width:
|
|
2187
|
-
height:
|
|
2184
|
+
width: n,
|
|
2185
|
+
height: i,
|
|
2188
2186
|
fill: a
|
|
2189
2187
|
}, o));
|
|
2190
|
-
return !t && !s && g.centerObject(u), r || (g.add(u),
|
|
2188
|
+
return !t && !s && g.centerObject(u), r || (g.add(u), d || g.setActiveObject(u), g.renderAll()), u;
|
|
2191
2189
|
}
|
|
2192
2190
|
/**
|
|
2193
2191
|
* Добавление круга
|
|
@@ -2205,13 +2203,13 @@ class nt {
|
|
|
2205
2203
|
* @param flags.withoutSelection - Не выделять объект
|
|
2206
2204
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2207
2205
|
*/
|
|
2208
|
-
addCircle(r = {}, { withoutSelection: o, withoutAdding:
|
|
2206
|
+
addCircle(r = {}, { withoutSelection: o, withoutAdding: d } = {}) {
|
|
2209
2207
|
var l = r, {
|
|
2210
2208
|
id: e = `circle-${L()}`,
|
|
2211
2209
|
left: t,
|
|
2212
2210
|
top: s,
|
|
2213
|
-
radius:
|
|
2214
|
-
fill:
|
|
2211
|
+
radius: n = 50,
|
|
2212
|
+
fill: i = "green"
|
|
2215
2213
|
} = l, a = Y(l, [
|
|
2216
2214
|
"id",
|
|
2217
2215
|
"left",
|
|
@@ -2219,14 +2217,14 @@ class nt {
|
|
|
2219
2217
|
"radius",
|
|
2220
2218
|
"fill"
|
|
2221
2219
|
]);
|
|
2222
|
-
const { canvas: h } = this.editor, g = new Ae(
|
|
2220
|
+
const { canvas: h } = this.editor, g = new Ae(y({
|
|
2223
2221
|
id: e,
|
|
2224
2222
|
left: t,
|
|
2225
2223
|
top: s,
|
|
2226
|
-
fill:
|
|
2227
|
-
radius:
|
|
2224
|
+
fill: i,
|
|
2225
|
+
radius: n
|
|
2228
2226
|
}, a));
|
|
2229
|
-
return !t && !s && h.centerObject(g),
|
|
2227
|
+
return !t && !s && h.centerObject(g), d || (h.add(g), o || h.setActiveObject(g), h.renderAll()), g;
|
|
2230
2228
|
}
|
|
2231
2229
|
/**
|
|
2232
2230
|
* Добавление треугольника
|
|
@@ -2245,13 +2243,13 @@ class nt {
|
|
|
2245
2243
|
* @param flags.withoutSelection - Не выделять объект
|
|
2246
2244
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2247
2245
|
*/
|
|
2248
|
-
addTriangle(l = {}, { withoutSelection:
|
|
2246
|
+
addTriangle(l = {}, { withoutSelection: d, withoutAdding: r } = {}) {
|
|
2249
2247
|
var h = l, {
|
|
2250
2248
|
id: e = `triangle-${L()}`,
|
|
2251
2249
|
left: t,
|
|
2252
2250
|
top: s,
|
|
2253
|
-
width:
|
|
2254
|
-
height:
|
|
2251
|
+
width: n = 100,
|
|
2252
|
+
height: i = 100,
|
|
2255
2253
|
fill: a = "yellow"
|
|
2256
2254
|
} = h, o = Y(h, [
|
|
2257
2255
|
"id",
|
|
@@ -2261,15 +2259,15 @@ class nt {
|
|
|
2261
2259
|
"height",
|
|
2262
2260
|
"fill"
|
|
2263
2261
|
]);
|
|
2264
|
-
const { canvas: g } = this.editor, u = new Se(
|
|
2262
|
+
const { canvas: g } = this.editor, u = new Se(y({
|
|
2265
2263
|
id: e,
|
|
2266
2264
|
left: t,
|
|
2267
2265
|
top: s,
|
|
2268
2266
|
fill: a,
|
|
2269
|
-
width:
|
|
2270
|
-
height:
|
|
2267
|
+
width: n,
|
|
2268
|
+
height: i
|
|
2271
2269
|
}, o));
|
|
2272
|
-
return !t && !s && g.centerObject(u), r || (g.add(u),
|
|
2270
|
+
return !t && !s && g.centerObject(u), r || (g.add(u), d || g.setActiveObject(u), g.renderAll()), u;
|
|
2273
2271
|
}
|
|
2274
2272
|
}
|
|
2275
2273
|
class at {
|
|
@@ -2310,9 +2308,9 @@ class at {
|
|
|
2310
2308
|
}), this._cloneAndFire(e, s);
|
|
2311
2309
|
return;
|
|
2312
2310
|
}
|
|
2313
|
-
const
|
|
2314
|
-
for (let g = 0; g <
|
|
2315
|
-
r[g] =
|
|
2311
|
+
const i = s.toCanvasElement().toDataURL(), a = i.slice(5).split(";")[0], o = i.split(",")[1], d = atob(o), r = new Uint8Array(d.length);
|
|
2312
|
+
for (let g = 0; g < d.length; g += 1)
|
|
2313
|
+
r[g] = d.charCodeAt(g);
|
|
2316
2314
|
const l = new Blob([r.buffer], { type: a }), h = new ClipboardItem({ [a]: l });
|
|
2317
2315
|
navigator.clipboard.write([h]).catch((g) => {
|
|
2318
2316
|
t.emitWarning({
|
|
@@ -2350,19 +2348,19 @@ class at {
|
|
|
2350
2348
|
handlePasteEvent({ clipboardData: e }) {
|
|
2351
2349
|
var a;
|
|
2352
2350
|
if (!((a = e == null ? void 0 : e.items) != null && a.length)) return;
|
|
2353
|
-
const { imageManager: t } = this.editor, { items: s } = e,
|
|
2354
|
-
if (
|
|
2355
|
-
const o =
|
|
2351
|
+
const { imageManager: t } = this.editor, { items: s } = e, n = s[s.length - 1];
|
|
2352
|
+
if (n.type !== "text/html") {
|
|
2353
|
+
const o = n.getAsFile();
|
|
2356
2354
|
if (!o) return;
|
|
2357
|
-
const
|
|
2358
|
-
|
|
2355
|
+
const d = new FileReader();
|
|
2356
|
+
d.onload = (r) => {
|
|
2359
2357
|
r.target && this.editor.imageManager.importImage({ source: r.target.result });
|
|
2360
|
-
},
|
|
2358
|
+
}, d.readAsDataURL(o);
|
|
2361
2359
|
return;
|
|
2362
2360
|
}
|
|
2363
|
-
const
|
|
2364
|
-
if (
|
|
2365
|
-
const r = new DOMParser().parseFromString(
|
|
2361
|
+
const i = e.getData("text/html");
|
|
2362
|
+
if (i) {
|
|
2363
|
+
const r = new DOMParser().parseFromString(i, "text/html").querySelector("img");
|
|
2366
2364
|
if (r != null && r.src) {
|
|
2367
2365
|
t.importImage({ source: r.src });
|
|
2368
2366
|
return;
|
|
@@ -2403,7 +2401,7 @@ class F {
|
|
|
2403
2401
|
* @fires editor:object-locked
|
|
2404
2402
|
*/
|
|
2405
2403
|
lockObject({ object: e, skipInnerObjects: t, withoutSave: s } = {}) {
|
|
2406
|
-
const { canvas:
|
|
2404
|
+
const { canvas: n, historyManager: i } = this.editor, a = e || n.getActiveObject();
|
|
2407
2405
|
if (!a || a.locked) return;
|
|
2408
2406
|
const o = {
|
|
2409
2407
|
lockMovementX: !0,
|
|
@@ -2417,7 +2415,7 @@ class F {
|
|
|
2417
2415
|
};
|
|
2418
2416
|
a.set(o), !t && F._isGroupOrSelection(a) && a.getObjects().forEach((r) => {
|
|
2419
2417
|
r.set(o);
|
|
2420
|
-
}),
|
|
2418
|
+
}), n.renderAll(), s || i.saveState(), n.fire("editor:object-locked", {
|
|
2421
2419
|
object: a,
|
|
2422
2420
|
skipInnerObjects: t,
|
|
2423
2421
|
withoutSave: s
|
|
@@ -2431,8 +2429,8 @@ class F {
|
|
|
2431
2429
|
* @fires editor:object-unlocked
|
|
2432
2430
|
*/
|
|
2433
2431
|
unlockObject({ object: e, withoutSave: t } = {}) {
|
|
2434
|
-
const { canvas: s, historyManager:
|
|
2435
|
-
if (!
|
|
2432
|
+
const { canvas: s, historyManager: n } = this.editor, i = e || s.getActiveObject();
|
|
2433
|
+
if (!i) return;
|
|
2436
2434
|
const a = {
|
|
2437
2435
|
lockMovementX: !1,
|
|
2438
2436
|
lockMovementY: !1,
|
|
@@ -2443,10 +2441,10 @@ class F {
|
|
|
2443
2441
|
lockSkewingY: !1,
|
|
2444
2442
|
locked: !1
|
|
2445
2443
|
};
|
|
2446
|
-
|
|
2444
|
+
i.set(a), F._isGroupOrSelection(i) && i.getObjects().forEach((o) => {
|
|
2447
2445
|
o.set(a);
|
|
2448
|
-
}), s.renderAll(), t ||
|
|
2449
|
-
object:
|
|
2446
|
+
}), s.renderAll(), t || n.saveState(), s.fire("editor:object-unlocked", {
|
|
2447
|
+
object: i,
|
|
2450
2448
|
withoutSave: t
|
|
2451
2449
|
});
|
|
2452
2450
|
}
|
|
@@ -2469,13 +2467,13 @@ class ot {
|
|
|
2469
2467
|
object: e,
|
|
2470
2468
|
withoutSave: t
|
|
2471
2469
|
} = {}) {
|
|
2472
|
-
const { canvas: s, historyManager:
|
|
2473
|
-
|
|
2474
|
-
const
|
|
2475
|
-
if (!
|
|
2476
|
-
const a =
|
|
2477
|
-
a.forEach((
|
|
2478
|
-
object:
|
|
2470
|
+
const { canvas: s, historyManager: n } = this.editor;
|
|
2471
|
+
n.suspendHistory();
|
|
2472
|
+
const i = e || s.getActiveObject();
|
|
2473
|
+
if (!i || !(i instanceof v)) return;
|
|
2474
|
+
const a = i.getObjects(), o = new X(a);
|
|
2475
|
+
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", {
|
|
2476
|
+
object: i,
|
|
2479
2477
|
group: o,
|
|
2480
2478
|
withoutSave: t
|
|
2481
2479
|
});
|
|
@@ -2491,17 +2489,17 @@ class ot {
|
|
|
2491
2489
|
object: e,
|
|
2492
2490
|
withoutSave: t
|
|
2493
2491
|
} = {}) {
|
|
2494
|
-
const { canvas: s, historyManager:
|
|
2495
|
-
|
|
2496
|
-
const
|
|
2497
|
-
if (!(
|
|
2498
|
-
const a =
|
|
2499
|
-
s.remove(
|
|
2492
|
+
const { canvas: s, historyManager: n } = this.editor;
|
|
2493
|
+
n.suspendHistory();
|
|
2494
|
+
const i = e || s.getActiveObject();
|
|
2495
|
+
if (!(i instanceof X)) return;
|
|
2496
|
+
const a = i.removeAll();
|
|
2497
|
+
s.remove(i), a.forEach((d) => s.add(d));
|
|
2500
2498
|
const o = new v(a, {
|
|
2501
2499
|
canvas: s
|
|
2502
2500
|
});
|
|
2503
|
-
s.setActiveObject(o), s.renderAll(),
|
|
2504
|
-
object:
|
|
2501
|
+
s.setActiveObject(o), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:objects-ungrouped", {
|
|
2502
|
+
object: i,
|
|
2505
2503
|
selection: o,
|
|
2506
2504
|
withoutSave: t
|
|
2507
2505
|
});
|
|
@@ -2518,8 +2516,8 @@ class rt {
|
|
|
2518
2516
|
selectAll() {
|
|
2519
2517
|
const { canvas: e, canvasManager: t, objectLockManager: s } = this.editor;
|
|
2520
2518
|
e.discardActiveObject();
|
|
2521
|
-
const
|
|
2522
|
-
|
|
2519
|
+
const n = t.getObjects(), i = n.some((o) => o.locked), a = n.length > 1 ? new v(t.getObjects(), { canvas: e }) : n[0];
|
|
2520
|
+
i && s.lockObject({ object: a, skipInnerObjects: !0, withoutSave: !0 }), e.setActiveObject(a), e.requestRenderAll(), e.fire("editor:all-objects-selected", { selected: a });
|
|
2523
2521
|
}
|
|
2524
2522
|
}
|
|
2525
2523
|
class ct {
|
|
@@ -2537,14 +2535,14 @@ class ct {
|
|
|
2537
2535
|
objects: e,
|
|
2538
2536
|
withoutSave: t
|
|
2539
2537
|
} = {}) {
|
|
2540
|
-
const { canvas: s, historyManager:
|
|
2541
|
-
a != null && a.length && (
|
|
2538
|
+
const { canvas: s, historyManager: n, groupingManager: i } = this.editor, a = (e || s.getActiveObjects()).filter((o) => !o.locked);
|
|
2539
|
+
a != null && a.length && (n.suspendHistory(), a.forEach((o) => {
|
|
2542
2540
|
if (o.type === "group" && o.format !== "svg") {
|
|
2543
|
-
|
|
2541
|
+
i.ungroup({ object: o, withoutSave: t }), this.deleteSelectedObjects();
|
|
2544
2542
|
return;
|
|
2545
2543
|
}
|
|
2546
2544
|
s.remove(o);
|
|
2547
|
-
}), s.discardActiveObject(), s.renderAll(),
|
|
2545
|
+
}), s.discardActiveObject(), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:objects-deleted", {
|
|
2548
2546
|
objects: a,
|
|
2549
2547
|
withoutSave: t
|
|
2550
2548
|
}));
|
|
@@ -2638,22 +2636,22 @@ class V {
|
|
|
2638
2636
|
* @param options.message — текст ошибки (опционально, если не передан, то используется код ошибки)
|
|
2639
2637
|
* @fires editor:error
|
|
2640
2638
|
*/
|
|
2641
|
-
emitError({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, data:
|
|
2639
|
+
emitError({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, data: n, message: i }) {
|
|
2642
2640
|
if (!V.isValidErrorCode(s)) {
|
|
2643
2641
|
console.warn("Неизвестный код ошибки: ", { code: s, origin: e, method: t });
|
|
2644
2642
|
return;
|
|
2645
2643
|
}
|
|
2646
2644
|
if (!s) return;
|
|
2647
|
-
const a =
|
|
2648
|
-
console.error(`${e}. ${t}. ${s}. ${a}`,
|
|
2645
|
+
const a = i || s;
|
|
2646
|
+
console.error(`${e}. ${t}. ${s}. ${a}`, n);
|
|
2649
2647
|
const o = {
|
|
2650
2648
|
code: s,
|
|
2651
2649
|
origin: e,
|
|
2652
2650
|
method: t,
|
|
2653
2651
|
message: a,
|
|
2654
|
-
data:
|
|
2652
|
+
data: n
|
|
2655
2653
|
};
|
|
2656
|
-
this._buffer.push(
|
|
2654
|
+
this._buffer.push(y({
|
|
2657
2655
|
type: "editor:error"
|
|
2658
2656
|
}, o)), this.editor.canvas.fire("editor:error", o);
|
|
2659
2657
|
}
|
|
@@ -2667,21 +2665,21 @@ class V {
|
|
|
2667
2665
|
* @param options.message — текст предупреждения (опционально, если не передан, то используется код предупреждения)
|
|
2668
2666
|
* @fires editor:warning
|
|
2669
2667
|
*/
|
|
2670
|
-
emitWarning({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, message:
|
|
2668
|
+
emitWarning({ origin: e = "ImageEditor", method: t = "Unknown Method", code: s, message: n, data: i }) {
|
|
2671
2669
|
if (!V.isValidErrorCode(s)) {
|
|
2672
2670
|
console.warn("Неизвестный код предупреждения: ", { code: s, origin: e, method: t });
|
|
2673
2671
|
return;
|
|
2674
2672
|
}
|
|
2675
|
-
const a =
|
|
2676
|
-
console.warn(`${e}. ${t}. ${s}. ${a}`,
|
|
2673
|
+
const a = n || s;
|
|
2674
|
+
console.warn(`${e}. ${t}. ${s}. ${a}`, i);
|
|
2677
2675
|
const o = {
|
|
2678
2676
|
code: s,
|
|
2679
2677
|
origin: e,
|
|
2680
2678
|
method: t,
|
|
2681
2679
|
message: a,
|
|
2682
|
-
data:
|
|
2680
|
+
data: i
|
|
2683
2681
|
};
|
|
2684
|
-
this._buffer.push(
|
|
2682
|
+
this._buffer.push(y({
|
|
2685
2683
|
type: "editor:warning"
|
|
2686
2684
|
}, o)), this.editor.canvas.fire("editor:warning", o);
|
|
2687
2685
|
}
|
|
@@ -2694,7 +2692,7 @@ class V {
|
|
|
2694
2692
|
return e ? Object.values(dt).some((t) => Object.values(t).includes(e)) : !1;
|
|
2695
2693
|
}
|
|
2696
2694
|
}
|
|
2697
|
-
class
|
|
2695
|
+
class ne {
|
|
2698
2696
|
/**
|
|
2699
2697
|
* Конструктор класса ImageEditor.
|
|
2700
2698
|
* @param canvasId - идентификатор канваса, в котором будет создан редактор
|
|
@@ -2714,15 +2712,15 @@ class ie {
|
|
|
2714
2712
|
editorContainerWidth: e,
|
|
2715
2713
|
editorContainerHeight: t,
|
|
2716
2714
|
canvasWrapperWidth: s,
|
|
2717
|
-
canvasWrapperHeight:
|
|
2718
|
-
canvasCSSWidth:
|
|
2715
|
+
canvasWrapperHeight: n,
|
|
2716
|
+
canvasCSSWidth: i,
|
|
2719
2717
|
canvasCSSHeight: a,
|
|
2720
2718
|
initialImage: o,
|
|
2721
|
-
initialStateJSON:
|
|
2719
|
+
initialStateJSON: d,
|
|
2722
2720
|
scaleType: r,
|
|
2723
2721
|
_onReadyCallback: l
|
|
2724
2722
|
} = this.options;
|
|
2725
|
-
if (He.apply(), this.canvas = new Ce(this.containerId, this.options), this.moduleLoader = new Ee(), this.workerManager = new Te(), this.errorManager = new V({ editor: this }), this.historyManager = new Je({ editor: this }), this.toolbar = new Qe({ editor: this }), this.transformManager = new st({ editor: this }), this.canvasManager = new tt({ editor: this }), this.imageManager = new D({ editor: this }), this.layerManager = new P({ editor: this }), this.shapeManager = new
|
|
2723
|
+
if (He.apply(), this.canvas = new Ce(this.containerId, this.options), this.moduleLoader = new Ee(), this.workerManager = new Te(), this.errorManager = new V({ editor: this }), this.historyManager = new Je({ editor: this }), this.toolbar = new Qe({ editor: this }), this.transformManager = new st({ editor: this }), this.canvasManager = new tt({ editor: this }), this.imageManager = new D({ editor: this }), this.layerManager = new P({ editor: this }), this.shapeManager = new it({ editor: this }), this.interactionBlocker = new nt({ editor: this }), this.clipboardManager = new at({ editor: this }), this.objectLockManager = new F({ editor: this }), this.groupingManager = new ot({ editor: this }), this.selectionManager = new rt({ editor: this }), this.deletionManager = new ct({ editor: this }), this._createMontageArea(), this._createClippingArea(), this.listeners = new z({ 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) {
|
|
2726
2724
|
const {
|
|
2727
2725
|
source: h,
|
|
2728
2726
|
scale: g = `image-${r}`,
|
|
@@ -2731,7 +2729,7 @@ class ie {
|
|
|
2731
2729
|
yield this.imageManager.importImage({ source: h, scale: g, withoutSave: u });
|
|
2732
2730
|
} else
|
|
2733
2731
|
this.canvasManager.setDefaultScale({ withoutSave: !0 });
|
|
2734
|
-
|
|
2732
|
+
d && this.historyManager.loadStateFromFullState(d), this.historyManager.saveState(), console.log("editor:ready"), this.canvas.fire("editor:ready", this), typeof l == "function" && l(this);
|
|
2735
2733
|
});
|
|
2736
2734
|
}
|
|
2737
2735
|
/**
|
|
@@ -2745,7 +2743,7 @@ class ie {
|
|
|
2745
2743
|
this.montageArea = this.shapeManager.addRectangle({
|
|
2746
2744
|
width: e,
|
|
2747
2745
|
height: t,
|
|
2748
|
-
fill:
|
|
2746
|
+
fill: ne._createMosaicPattern(),
|
|
2749
2747
|
stroke: null,
|
|
2750
2748
|
strokeWidth: 0,
|
|
2751
2749
|
selectable: !1,
|
|
@@ -2889,15 +2887,15 @@ const lt = {
|
|
|
2889
2887
|
deleteObjectsByHotkey: !0,
|
|
2890
2888
|
resetObjectFitByDoubleClick: !0
|
|
2891
2889
|
};
|
|
2892
|
-
function bt(
|
|
2893
|
-
const t =
|
|
2890
|
+
function bt(c, e = {}) {
|
|
2891
|
+
const t = y(y({}, lt), e), s = document.getElementById(c);
|
|
2894
2892
|
if (!s)
|
|
2895
|
-
return Promise.reject(new Error(`Контейнер с ID "${
|
|
2896
|
-
const
|
|
2897
|
-
return
|
|
2898
|
-
t._onReadyCallback =
|
|
2899
|
-
const a = new
|
|
2900
|
-
window[
|
|
2893
|
+
return Promise.reject(new Error(`Контейнер с ID "${c}" не найден.`));
|
|
2894
|
+
const n = document.createElement("canvas");
|
|
2895
|
+
return n.id = `${c}-canvas`, s.appendChild(n), t.editorContainer = s, new Promise((i) => {
|
|
2896
|
+
t._onReadyCallback = i;
|
|
2897
|
+
const a = new ne(n.id, t);
|
|
2898
|
+
window[c] = a;
|
|
2901
2899
|
});
|
|
2902
2900
|
}
|
|
2903
2901
|
export {
|