@anu3ev/fabric-image-editor 0.1.54 → 0.1.55
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 +233 -225
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -1,44 +1,44 @@
|
|
|
1
|
-
var
|
|
1
|
+
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, I = (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 p = (
|
|
23
|
-
var n = (
|
|
22
|
+
var p = (c, e, t) => new Promise((s, i) => {
|
|
23
|
+
var n = (d) => {
|
|
24
24
|
try {
|
|
25
|
-
o(t.next(
|
|
25
|
+
o(t.next(d));
|
|
26
26
|
} catch (r) {
|
|
27
27
|
i(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
|
i(r);
|
|
34
34
|
}
|
|
35
|
-
}, o = (
|
|
36
|
-
o((t = t.apply(
|
|
35
|
+
}, o = (d) => d.done ? s(d.value) : Promise.resolve(d.value).then(n, 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 Ie, InteractiveFabricObject as ye, loadSVGFromURL as pe, 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
|
-
var we = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict",
|
|
41
|
+
var we = "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
43
|
t += we[s[e] & 63];
|
|
44
44
|
return t;
|
|
@@ -75,11 +75,11 @@ class z {
|
|
|
75
75
|
copyObjectsByHotkey: n,
|
|
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), i && (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 }), n && 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 })),
|
|
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), i && (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 }), n && 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
|
* При массовом выделении объектов удаляем из него залоченные.
|
|
@@ -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
|
}
|
|
@@ -366,7 +366,7 @@ class Te {
|
|
|
366
366
|
* @returns Promise, который будет выполнен, когда воркер вернет ответ
|
|
367
367
|
*/
|
|
368
368
|
post(e, t, s = []) {
|
|
369
|
-
const i = `${e}:${
|
|
369
|
+
const i = `${e}:${L(8)}`;
|
|
370
370
|
return new Promise((n, a) => {
|
|
371
371
|
this._callbacks.set(i, { resolve: n, reject: a }), this.worker.postMessage({ action: e, payload: t, requestId: i }, s);
|
|
372
372
|
});
|
|
@@ -378,52 +378,52 @@ class Te {
|
|
|
378
378
|
this.worker.terminate();
|
|
379
379
|
}
|
|
380
380
|
}
|
|
381
|
-
const
|
|
382
|
-
function W(
|
|
383
|
-
const n =
|
|
384
|
-
|
|
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(c, e, t, s, i) {
|
|
383
|
+
const n = N, a = ke;
|
|
384
|
+
c.save(), c.translate(e, t), c.rotate(R.degreesToRadians(i.angle)), c.fillStyle = se, c.strokeStyle = te, c.lineWidth = ee, c.beginPath(), c.roundRect(-12 / 2, -12 / 2, n, n, a), c.fill(), c.stroke(), c.restore();
|
|
385
385
|
}
|
|
386
|
-
function he(
|
|
386
|
+
function he(c, e, t, s, i) {
|
|
387
387
|
const n = Q, a = J, o = xe;
|
|
388
|
-
|
|
388
|
+
c.save(), c.translate(e, t), c.rotate(R.degreesToRadians(i.angle)), c.fillStyle = se, c.strokeStyle = te, c.lineWidth = ee, c.beginPath(), c.roundRect(-8 / 2, -20 / 2, n, a, o), c.fill(), c.stroke(), c.restore();
|
|
389
389
|
}
|
|
390
|
-
function ge(
|
|
390
|
+
function ge(c, e, t, s, i) {
|
|
391
391
|
const n = $, a = K, o = Be;
|
|
392
|
-
|
|
392
|
+
c.save(), c.translate(e, t), c.rotate(R.degreesToRadians(i.angle)), c.fillStyle = se, c.strokeStyle = te, c.lineWidth = ee, c.beginPath(), c.roundRect(-20 / 2, -8 / 2, n, 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, i) {
|
|
397
397
|
const a = q / 2;
|
|
398
|
-
|
|
398
|
+
c.save(), c.translate(e, t), c.rotate(R.degreesToRadians(i.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
|
// Угловые точки
|
|
402
402
|
tl: {
|
|
403
403
|
render: W,
|
|
404
|
-
sizeX:
|
|
405
|
-
sizeY:
|
|
404
|
+
sizeX: N,
|
|
405
|
+
sizeY: N,
|
|
406
406
|
offsetX: 0,
|
|
407
407
|
offsetY: 0
|
|
408
408
|
},
|
|
409
409
|
tr: {
|
|
410
410
|
render: W,
|
|
411
|
-
sizeX:
|
|
412
|
-
sizeY:
|
|
411
|
+
sizeX: N,
|
|
412
|
+
sizeY: N,
|
|
413
413
|
offsetX: 0,
|
|
414
414
|
offsetY: 0
|
|
415
415
|
},
|
|
416
416
|
bl: {
|
|
417
417
|
render: W,
|
|
418
|
-
sizeX:
|
|
419
|
-
sizeY:
|
|
418
|
+
sizeX: N,
|
|
419
|
+
sizeY: N,
|
|
420
420
|
offsetX: 0,
|
|
421
421
|
offsetY: 0
|
|
422
422
|
},
|
|
423
423
|
br: {
|
|
424
424
|
render: W,
|
|
425
|
-
sizeX:
|
|
426
|
-
sizeY:
|
|
425
|
+
sizeX: N,
|
|
426
|
+
sizeY: N,
|
|
427
427
|
offsetX: 0,
|
|
428
428
|
offsetY: 0
|
|
429
429
|
},
|
|
@@ -468,7 +468,7 @@ const Re = {
|
|
|
468
468
|
};
|
|
469
469
|
class He {
|
|
470
470
|
static apply() {
|
|
471
|
-
const e =
|
|
471
|
+
const e = Ie.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 = (n, a, o,
|
|
479
|
+
}), t === "mtr" && (e[t].cursorStyle = "grab", e[t].mouseDownHandler = (n, a, o, d) => {
|
|
480
480
|
var l;
|
|
481
481
|
(l = a.target.canvas) == null || l.setCursor("grabbing");
|
|
482
482
|
});
|
|
483
|
-
}),
|
|
483
|
+
}), ye.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) => p(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(I(I({}, U), e), {
|
|
597
|
+
style: I(I({}, U.style), e.style || {}),
|
|
598
|
+
btnStyle: I(I({}, U.btnStyle), e.btnStyle || {}),
|
|
599
|
+
icons: I(I({}, U.icons), e.icons || {}),
|
|
600
|
+
handlers: I(I({}, 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();
|
|
@@ -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: i } = t, { icons: n = {}, btnStyle: a, handlers: o = {} } = this.config,
|
|
628
|
-
|
|
627
|
+
const { name: s, handle: i } = t, { icons: n = {}, btnStyle: a, handlers: o = {} } = this.config, d = document.createElement("button");
|
|
628
|
+
d.innerHTML = n[i] ? `<img src="${n[i]}" title="${s}" />` : s, Object.assign(d.style, a), d.onclick = () => {
|
|
629
629
|
var r;
|
|
630
630
|
return (r = o[i]) == null ? void 0 : r.call(o, this.editor);
|
|
631
|
-
}, this.el.appendChild(
|
|
631
|
+
}, this.el.appendChild(d);
|
|
632
632
|
}
|
|
633
633
|
}
|
|
634
634
|
/**
|
|
@@ -686,7 +686,7 @@ class Qe {
|
|
|
686
686
|
}
|
|
687
687
|
const { el: t, config: s, canvas: i } = this;
|
|
688
688
|
e.setCoords();
|
|
689
|
-
const n = i.getZoom(), [, , , , a, o] = i.viewportTransform, { x:
|
|
689
|
+
const n = i.getZoom(), [, , , , a, o] = i.viewportTransform, { x: d } = e.getCenterPoint(), { top: r, height: l } = e.getBoundingRect(), g = d * n + a - t.offsetWidth / 2, u = s.offsetTop || 0, m = (r + l) * n + o + u;
|
|
690
690
|
Object.assign(t.style, {
|
|
691
691
|
left: `${g}px`,
|
|
692
692
|
top: `${m}px`,
|
|
@@ -802,7 +802,7 @@ class Je {
|
|
|
802
802
|
console.log("Нет изменений для сохранения.");
|
|
803
803
|
return;
|
|
804
804
|
}
|
|
805
|
-
console.log("baseState", this.baseState), this.currentIndex < this.patches.length && this.patches.splice(this.currentIndex), console.log("diff", s), this.totalChangesCount += 1, this.patches.push({ id:
|
|
805
|
+
console.log("baseState", this.baseState), this.currentIndex < this.patches.length && this.patches.splice(this.currentIndex), console.log("diff", s), this.totalChangesCount += 1, this.patches.push({ id: L(), diff: s }), this.currentIndex += 1, this.patches.length > this.maxHistoryLength && (this.baseState = this.diffPatcher.patch(this.baseState, this.patches[0].diff), this.patches.shift(), this.currentIndex -= 1, this.baseStateChangesCount += 1), console.log("Состояние сохранено. Текущий индекс истории:", this.currentIndex);
|
|
806
806
|
}
|
|
807
807
|
/**
|
|
808
808
|
* Функция загрузки состояния в канвас.
|
|
@@ -817,8 +817,8 @@ class Je {
|
|
|
817
817
|
yield t.loadFromJSON(e);
|
|
818
818
|
const o = t.getObjects().find((r) => r.id === "montage-area");
|
|
819
819
|
o && (this.editor.montageArea = o, (n !== e.width || a !== e.height) && s.updateCanvasAndFitObjects());
|
|
820
|
-
const
|
|
821
|
-
|
|
820
|
+
const d = t.getObjects().find((r) => r.id === "overlay-mask");
|
|
821
|
+
d && (i.overlayMask = d, i.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,
|
|
@@ -904,7 +904,7 @@ class Je {
|
|
|
904
904
|
}
|
|
905
905
|
}
|
|
906
906
|
const $e = 0.1, Ke = 2, qe = 0.1, et = 90, x = 16, B = 16, O = 4096, T = 4096;
|
|
907
|
-
class
|
|
907
|
+
class D {
|
|
908
908
|
constructor({ editor: e }) {
|
|
909
909
|
this.editor = e, this.options = e.options, this._createdBlobUrls = [], this.acceptContentTypes = this.editor.options.acceptContentTypes, this.acceptFormats = this.getAllowedFormatsFromContentTypes();
|
|
910
910
|
}
|
|
@@ -928,7 +928,7 @@ class N {
|
|
|
928
928
|
withoutSave: i = !1
|
|
929
929
|
} = e;
|
|
930
930
|
if (!t) return null;
|
|
931
|
-
const { canvas: n, montageArea: a, transformManager: o, historyManager:
|
|
931
|
+
const { canvas: n, 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,14 +939,14 @@ class N {
|
|
|
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)
|
|
946
946
|
m = URL.createObjectURL(t);
|
|
947
947
|
else if (typeof t == "string") {
|
|
948
|
-
const
|
|
949
|
-
m = URL.createObjectURL(
|
|
948
|
+
const S = yield (yield fetch(t, { mode: "cors" })).blob();
|
|
949
|
+
m = URL.createObjectURL(S);
|
|
950
950
|
} else
|
|
951
951
|
return r.emitError({
|
|
952
952
|
origin: "ImageManager",
|
|
@@ -956,30 +956,30 @@ class N {
|
|
|
956
956
|
data: { source: t, format: h, contentType: l, acceptContentTypes: g, acceptFormats: u }
|
|
957
957
|
}), null;
|
|
958
958
|
if (this._createdBlobUrls.push(m), h === "svg") {
|
|
959
|
-
const
|
|
960
|
-
M = R.groupSVGElements(
|
|
959
|
+
const b = yield pe(m);
|
|
960
|
+
M = R.groupSVGElements(b.objects, b.options);
|
|
961
961
|
} else
|
|
962
962
|
M = yield Z.fromURL(m, { crossOrigin: "anonymous" });
|
|
963
|
-
const { width:
|
|
963
|
+
const { width: f, height: j } = M;
|
|
964
964
|
if (M instanceof Z) {
|
|
965
|
-
const
|
|
966
|
-
let
|
|
967
|
-
if (
|
|
968
|
-
const w = yield this.resizeImageToBoundaries(
|
|
965
|
+
const b = M.getElement();
|
|
966
|
+
let S = "";
|
|
967
|
+
if (b instanceof HTMLImageElement ? S = b.src : b instanceof HTMLCanvasElement && (S = b.toDataURL()), j > T || f > O) {
|
|
968
|
+
const w = yield this.resizeImageToBoundaries(S, "max"), E = URL.createObjectURL(w);
|
|
969
969
|
this._createdBlobUrls.push(E), M = yield Z.fromURL(E, { crossOrigin: "anonymous" });
|
|
970
|
-
} else if (
|
|
971
|
-
const w = yield this.resizeImageToBoundaries(
|
|
970
|
+
} else if (j < B || f < x) {
|
|
971
|
+
const w = yield this.resizeImageToBoundaries(S, "min"), E = URL.createObjectURL(w);
|
|
972
972
|
this._createdBlobUrls.push(E), M = yield Z.fromURL(E, { crossOrigin: "anonymous" });
|
|
973
973
|
}
|
|
974
974
|
}
|
|
975
|
-
if (M.set("id", `${M.type}-${
|
|
975
|
+
if (M.set("id", `${M.type}-${L()}`), M.set("format", h), s === "scale-montage")
|
|
976
976
|
this.editor.canvasManager.scaleMontageAreaToImage({ object: M, withoutSave: !0 });
|
|
977
977
|
else {
|
|
978
|
-
const { width:
|
|
979
|
-
s === "image-contain" && w < 1 ? o.fitObject({ object: M, type: "contain", withoutSave: !0 }) : s === "image-cover" && (
|
|
978
|
+
const { width: b, height: S } = a, w = this.calculateScaleFactor({ imageObject: M, scaleType: s });
|
|
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
|
-
n.add(M), n.centerObject(M), n.setActiveObject(M), n.renderAll(),
|
|
982
|
-
const
|
|
981
|
+
n.add(M), n.centerObject(M), n.setActiveObject(M), n.renderAll(), d.resumeHistory(), i || d.saveState();
|
|
982
|
+
const A = {
|
|
983
983
|
image: M,
|
|
984
984
|
format: h,
|
|
985
985
|
contentType: l,
|
|
@@ -987,7 +987,7 @@ class N {
|
|
|
987
987
|
withoutSave: i,
|
|
988
988
|
source: t
|
|
989
989
|
};
|
|
990
|
-
return n.fire("editor:image-imported",
|
|
990
|
+
return n.fire("editor:image-imported", A), A;
|
|
991
991
|
} catch (m) {
|
|
992
992
|
return r.emitError({
|
|
993
993
|
origin: "ImageManager",
|
|
@@ -995,7 +995,7 @@ class N {
|
|
|
995
995
|
code: "IMPORT_FAILED",
|
|
996
996
|
message: `Ошибка импорта изображения: ${m.message}`,
|
|
997
997
|
data: { source: t, format: h, contentType: l, scale: s, withoutSave: i }
|
|
998
|
-
}),
|
|
998
|
+
}), d.resumeHistory(), null;
|
|
999
999
|
}
|
|
1000
1000
|
});
|
|
1001
1001
|
}
|
|
@@ -1046,20 +1046,20 @@ class N {
|
|
|
1046
1046
|
contentType: s = "image/png",
|
|
1047
1047
|
exportAsBase64: i = !1,
|
|
1048
1048
|
exportAsBlob: n = !1
|
|
1049
|
-
} = e, { canvas: a, montageArea: o, workerManager:
|
|
1049
|
+
} = e, { canvas: a, montageArea: o, workerManager: d } = this.editor;
|
|
1050
1050
|
try {
|
|
1051
|
-
const r = s === "application/pdf", l = r ? "image/jpg" : s, h =
|
|
1051
|
+
const r = s === "application/pdf", l = r ? "image/jpg" : s, h = D.getFormatFromContentType(l);
|
|
1052
1052
|
o.setCoords();
|
|
1053
|
-
const { left: g, top: u, width: m, height: M } = o.getBoundingRect(),
|
|
1054
|
-
["image/jpg", "image/jpeg"].includes(l) && (
|
|
1055
|
-
const
|
|
1056
|
-
|
|
1057
|
-
const
|
|
1058
|
-
if (h === "svg" &&
|
|
1059
|
-
const y =
|
|
1060
|
-
|
|
1061
|
-
const
|
|
1062
|
-
image:
|
|
1053
|
+
const { left: g, top: u, width: m, height: M } = o.getBoundingRect(), f = yield a.clone(["id", "format", "locked"]);
|
|
1054
|
+
["image/jpg", "image/jpeg"].includes(l) && (f.backgroundColor = "#ffffff");
|
|
1055
|
+
const j = f.getObjects().find((y) => y.id === o.id);
|
|
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((y) => y.format).every((y) => y.format === "svg");
|
|
1058
|
+
if (h === "svg" && A) {
|
|
1059
|
+
const y = f.toSVG();
|
|
1060
|
+
f.dispose();
|
|
1061
|
+
const C = {
|
|
1062
|
+
image: D._exportSVGStringAsFile(y, {
|
|
1063
1063
|
exportAsBase64: i,
|
|
1064
1064
|
exportAsBlob: n,
|
|
1065
1065
|
fileName: t
|
|
@@ -1068,34 +1068,34 @@ class N {
|
|
|
1068
1068
|
contentType: "image/svg+xml",
|
|
1069
1069
|
fileName: t.replace(/\.[^/.]+$/, ".svg")
|
|
1070
1070
|
};
|
|
1071
|
-
return a.fire("editor:canvas-exported",
|
|
1071
|
+
return a.fire("editor:canvas-exported", C), C;
|
|
1072
1072
|
}
|
|
1073
|
-
const
|
|
1074
|
-
|
|
1075
|
-
|
|
1073
|
+
const b = yield new Promise((y, k) => {
|
|
1074
|
+
f.getElement().toBlob((C) => {
|
|
1075
|
+
C ? y(C) : k(new Error("Failed to create Blob from canvas"));
|
|
1076
1076
|
});
|
|
1077
1077
|
});
|
|
1078
|
-
if (
|
|
1078
|
+
if (f.dispose(), n) {
|
|
1079
1079
|
const y = {
|
|
1080
|
-
image:
|
|
1080
|
+
image: b,
|
|
1081
1081
|
format: h,
|
|
1082
1082
|
contentType: l,
|
|
1083
1083
|
fileName: t
|
|
1084
1084
|
};
|
|
1085
1085
|
return a.fire("editor:canvas-exported", y), y;
|
|
1086
1086
|
}
|
|
1087
|
-
const
|
|
1087
|
+
const S = yield createImageBitmap(b), w = yield d.post(
|
|
1088
1088
|
"toDataURL",
|
|
1089
|
-
{ format: h, quality: 1, bitmap:
|
|
1090
|
-
[
|
|
1089
|
+
{ format: h, quality: 1, bitmap: S },
|
|
1090
|
+
[S]
|
|
1091
1091
|
);
|
|
1092
1092
|
if (r) {
|
|
1093
|
-
const k = m * 0.264583,
|
|
1094
|
-
orientation: k >
|
|
1093
|
+
const k = m * 0.264583, C = M * 0.264583, Me = (yield this.editor.moduleLoader.loadModule("jspdf")).jsPDF, G = new Me({
|
|
1094
|
+
orientation: k > C ? "landscape" : "portrait",
|
|
1095
1095
|
unit: "mm",
|
|
1096
|
-
format: [k,
|
|
1096
|
+
format: [k, C]
|
|
1097
1097
|
});
|
|
1098
|
-
if (G.addImage(String(w), "JPG", 0, 0, k,
|
|
1098
|
+
if (G.addImage(String(w), "JPG", 0, 0, k, C), i) {
|
|
1099
1099
|
const oe = {
|
|
1100
1100
|
image: G.output("datauristring"),
|
|
1101
1101
|
format: "pdf",
|
|
@@ -1121,8 +1121,8 @@ class N {
|
|
|
1121
1121
|
};
|
|
1122
1122
|
return a.fire("editor:canvas-exported", y), y;
|
|
1123
1123
|
}
|
|
1124
|
-
const E = h === "svg" && !
|
|
1125
|
-
image: new File([
|
|
1124
|
+
const E = h === "svg" && !A ? t.replace(/\.[^/.]+$/, ".png") : t, ne = {
|
|
1125
|
+
image: new File([b], E, { type: l }),
|
|
1126
1126
|
format: h,
|
|
1127
1127
|
contentType: l,
|
|
1128
1128
|
fileName: E
|
|
@@ -1158,7 +1158,7 @@ class N {
|
|
|
1158
1158
|
contentType: i = "image/png",
|
|
1159
1159
|
exportAsBase64: n = !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",
|
|
@@ -1168,23 +1168,23 @@ class N {
|
|
|
1168
1168
|
data: { contentType: i, fileName: s, exportAsBase64: n, exportAsBlob: a }
|
|
1169
1169
|
}), null;
|
|
1170
1170
|
try {
|
|
1171
|
-
const l =
|
|
1171
|
+
const l = D.getFormatFromContentType(i);
|
|
1172
1172
|
if (l === "svg") {
|
|
1173
|
-
const M = r.toSVG(),
|
|
1173
|
+
const M = r.toSVG(), f = D._exportSVGStringAsFile(M, {
|
|
1174
1174
|
exportAsBase64: n,
|
|
1175
1175
|
exportAsBlob: a,
|
|
1176
1176
|
fileName: s
|
|
1177
|
-
}),
|
|
1177
|
+
}), j = {
|
|
1178
1178
|
object: r,
|
|
1179
|
-
image:
|
|
1179
|
+
image: f,
|
|
1180
1180
|
format: l,
|
|
1181
1181
|
contentType: "image/svg+xml",
|
|
1182
1182
|
fileName: s.replace(/\.[^/.]+$/, ".svg")
|
|
1183
1183
|
};
|
|
1184
|
-
return o.fire("editor:object-exported",
|
|
1184
|
+
return o.fire("editor:object-exported", j), j;
|
|
1185
1185
|
}
|
|
1186
1186
|
if (n && r instanceof Z) {
|
|
1187
|
-
const M = yield createImageBitmap(r.getElement()),
|
|
1187
|
+
const M = yield createImageBitmap(r.getElement()), f = yield d.post(
|
|
1188
1188
|
"toDataURL",
|
|
1189
1189
|
{
|
|
1190
1190
|
format: l,
|
|
@@ -1192,18 +1192,18 @@ class N {
|
|
|
1192
1192
|
bitmap: M
|
|
1193
1193
|
},
|
|
1194
1194
|
[M]
|
|
1195
|
-
),
|
|
1195
|
+
), j = {
|
|
1196
1196
|
object: r,
|
|
1197
|
-
image:
|
|
1197
|
+
image: f,
|
|
1198
1198
|
format: l,
|
|
1199
1199
|
contentType: i,
|
|
1200
1200
|
fileName: s
|
|
1201
1201
|
};
|
|
1202
|
-
return o.fire("editor:object-exported",
|
|
1202
|
+
return o.fire("editor:object-exported", j), j;
|
|
1203
1203
|
}
|
|
1204
|
-
const h = r.toCanvasElement(), g = yield new Promise((M,
|
|
1205
|
-
h.toBlob((
|
|
1206
|
-
|
|
1204
|
+
const h = r.toCanvasElement(), g = yield new Promise((M, f) => {
|
|
1205
|
+
h.toBlob((j) => {
|
|
1206
|
+
j ? M(j) : f(new Error("Failed to create Blob from canvas"));
|
|
1207
1207
|
});
|
|
1208
1208
|
});
|
|
1209
1209
|
if (a) {
|
|
@@ -1246,7 +1246,7 @@ class N {
|
|
|
1246
1246
|
* @returns массив допустимых форматов изображений
|
|
1247
1247
|
*/
|
|
1248
1248
|
getAllowedFormatsFromContentTypes() {
|
|
1249
|
-
return this.acceptContentTypes.map((e) =>
|
|
1249
|
+
return this.acceptContentTypes.map((e) => D.getFormatFromContentType(e)).filter((e) => e);
|
|
1250
1250
|
}
|
|
1251
1251
|
/**
|
|
1252
1252
|
* Проверяет, является ли contentType допустимым типом изображения.
|
|
@@ -1299,7 +1299,7 @@ class N {
|
|
|
1299
1299
|
try {
|
|
1300
1300
|
const i = (t = new URL(e).pathname.split(".").pop()) == null ? void 0 : t.toLowerCase(), n = {};
|
|
1301
1301
|
return this.acceptContentTypes.forEach((a) => {
|
|
1302
|
-
const o =
|
|
1302
|
+
const o = D.getFormatFromContentType(a);
|
|
1303
1303
|
o && (n[o] = a);
|
|
1304
1304
|
}), i && n[i] || "application/octet-stream";
|
|
1305
1305
|
} catch (s) {
|
|
@@ -1376,10 +1376,10 @@ class tt {
|
|
|
1376
1376
|
canvas: n,
|
|
1377
1377
|
montageArea: a,
|
|
1378
1378
|
options: { canvasBackstoreWidth: o }
|
|
1379
|
-
} = this.editor, { width:
|
|
1379
|
+
} = this.editor, { width: d, height: r } = a, l = Math.max(Math.min(Number(e), O), x);
|
|
1380
1380
|
if (!o || o === "auto" || i ? this.adaptCanvasToContainer() : o ? this.setCanvasBackstoreWidth(Number(o)) : this.setCanvasBackstoreWidth(l), a.set({ width: l }), (m = n.clipPath) == null || m.set({ width: l }), t) {
|
|
1381
|
-
const M = l /
|
|
1382
|
-
this.setResolutionHeight(
|
|
1381
|
+
const M = l / d, f = r * M;
|
|
1382
|
+
this.setResolutionHeight(f);
|
|
1383
1383
|
return;
|
|
1384
1384
|
}
|
|
1385
1385
|
const { left: h, top: g } = this.getObjectDefaultCoords(a), u = n.getZoom();
|
|
@@ -1406,10 +1406,10 @@ class tt {
|
|
|
1406
1406
|
canvas: n,
|
|
1407
1407
|
montageArea: a,
|
|
1408
1408
|
options: { canvasBackstoreHeight: o }
|
|
1409
|
-
} = this.editor, { width:
|
|
1409
|
+
} = this.editor, { width: d, height: r } = a, l = Math.max(Math.min(Number(e), T), B);
|
|
1410
1410
|
if (!o || o === "auto" || i ? this.adaptCanvasToContainer() : o ? this.setCanvasBackstoreHeight(Number(o)) : this.setCanvasBackstoreHeight(l), a.set({ height: l }), (m = n.clipPath) == null || m.set({ height: l }), t) {
|
|
1411
|
-
const M = l / r,
|
|
1412
|
-
this.setResolutionWidth(
|
|
1411
|
+
const M = l / r, f = d * M;
|
|
1412
|
+
this.setResolutionWidth(f);
|
|
1413
1413
|
return;
|
|
1414
1414
|
}
|
|
1415
1415
|
const { left: h, top: g } = this.getObjectDefaultCoords(a), u = n.getZoom();
|
|
@@ -1425,12 +1425,12 @@ class tt {
|
|
|
1425
1425
|
* и устанавливает правильный viewportTransform.
|
|
1426
1426
|
*/
|
|
1427
1427
|
centerMontageArea() {
|
|
1428
|
-
var
|
|
1428
|
+
var d;
|
|
1429
1429
|
const { canvas: e, montageArea: t } = this.editor, s = e.getWidth(), i = e.getHeight(), n = e.getZoom(), a = new _(s / 2, i / 2);
|
|
1430
1430
|
t.set({
|
|
1431
1431
|
left: s / 2,
|
|
1432
1432
|
top: i / 2
|
|
1433
|
-
}), (
|
|
1433
|
+
}), (d = e.clipPath) == null || d.set({
|
|
1434
1434
|
left: s / 2,
|
|
1435
1435
|
top: i / 2
|
|
1436
1436
|
}), e.renderAll();
|
|
@@ -1451,8 +1451,8 @@ class tt {
|
|
|
1451
1451
|
code: "NO_ACTIVE_OBJECT",
|
|
1452
1452
|
message: "Не выбран объект для получения координат"
|
|
1453
1453
|
}), { left: 0, top: 0 };
|
|
1454
|
-
const { width: i, height: n } = s, a = t.getZoom(), o = (i - i * a) / 2,
|
|
1455
|
-
return { left: o, top:
|
|
1454
|
+
const { width: i, height: n } = s, a = t.getZoom(), o = (i - i * a) / 2, d = (n - n * a) / 2;
|
|
1455
|
+
return { left: o, top: d };
|
|
1456
1456
|
}
|
|
1457
1457
|
/**
|
|
1458
1458
|
* Устанавливаем ширину канваса в backstore (для экспорта)
|
|
@@ -1514,9 +1514,9 @@ class tt {
|
|
|
1514
1514
|
updateCssDimensionsForZoom(e) {
|
|
1515
1515
|
const { canvas: t, montageArea: s } = this.editor, i = s.width * e, n = s.height * e, a = t.wrapperEl.parentNode;
|
|
1516
1516
|
if (!(a instanceof HTMLElement)) return;
|
|
1517
|
-
const o = i <= a.clientWidth ? "100%" : i,
|
|
1517
|
+
const o = i <= a.clientWidth ? "100%" : i, d = n <= a.clientHeight ? "100%" : n;
|
|
1518
1518
|
t.setDimensions(
|
|
1519
|
-
{ width: o, height:
|
|
1519
|
+
{ width: o, height: d },
|
|
1520
1520
|
{ cssOnly: !0 }
|
|
1521
1521
|
);
|
|
1522
1522
|
}
|
|
@@ -1625,9 +1625,9 @@ class tt {
|
|
|
1625
1625
|
return;
|
|
1626
1626
|
}
|
|
1627
1627
|
if (isNaN(s)) return;
|
|
1628
|
-
const
|
|
1628
|
+
const d = `${s}px`;
|
|
1629
1629
|
a.forEach((r) => {
|
|
1630
|
-
r.style[o] =
|
|
1630
|
+
r.style[o] = d;
|
|
1631
1631
|
}), i.fire(`editor:display-${e}-${o}-changed`, {
|
|
1632
1632
|
element: e,
|
|
1633
1633
|
value: s
|
|
@@ -1648,7 +1648,7 @@ class tt {
|
|
|
1648
1648
|
transformManager: a,
|
|
1649
1649
|
options: {
|
|
1650
1650
|
montageAreaWidth: o,
|
|
1651
|
-
montageAreaHeight:
|
|
1651
|
+
montageAreaHeight: d
|
|
1652
1652
|
}
|
|
1653
1653
|
} = this.editor, r = e || i.getActiveObject();
|
|
1654
1654
|
if (!r || r.type !== "image" && r.format !== "svg") return;
|
|
@@ -1658,10 +1658,10 @@ class tt {
|
|
|
1658
1658
|
const {
|
|
1659
1659
|
width: m,
|
|
1660
1660
|
height: M
|
|
1661
|
-
} = n,
|
|
1662
|
-
g = m *
|
|
1661
|
+
} = n, f = l / m, j = h / M, A = Math.max(f, j);
|
|
1662
|
+
g = m * A, u = M * A;
|
|
1663
1663
|
}
|
|
1664
|
-
this.setResolutionWidth(g, { withoutSave: !0 }), this.setResolutionHeight(u, { withoutSave: !0 }), (l > o || h >
|
|
1664
|
+
this.setResolutionWidth(g, { withoutSave: !0 }), this.setResolutionHeight(u, { withoutSave: !0 }), (l > o || h > d) && a.calculateAndApplyDefaultZoom(), a.resetObject(r, { withoutSave: !0 }), i.centerObject(r), i.renderAll(), s || this.editor.historyManager.saveState(), i.fire("editor:montage-area-scaled-to-image", {
|
|
1665
1665
|
object: r,
|
|
1666
1666
|
width: g,
|
|
1667
1667
|
height: u,
|
|
@@ -1716,8 +1716,8 @@ class st {
|
|
|
1716
1716
|
* @param scale - Желаемый масштаб относительно размеров контейнера редактора.
|
|
1717
1717
|
*/
|
|
1718
1718
|
calculateAndApplyDefaultZoom(e = this.options.defaultScale) {
|
|
1719
|
-
const { canvas: t } = this.editor, s = t.editorContainer, i = s.clientWidth, n = s.clientHeight, { width: a, height: o } = this.editor.montageArea,
|
|
1720
|
-
this.defaultZoom = Math.min(
|
|
1719
|
+
const { canvas: t } = this.editor, s = t.editorContainer, i = s.clientWidth, n = s.clientHeight, { width: a, height: o } = this.editor.montageArea, d = i / a * e, r = n / o * e;
|
|
1720
|
+
this.defaultZoom = Math.min(d, r);
|
|
1721
1721
|
const { defaultZoom: l, maxZoomFactor: h, minZoom: g, maxZoom: u } = this;
|
|
1722
1722
|
this.minZoom = Math.min(l / h, g), this.maxZoom = Math.max(l * h, u), this.setZoom();
|
|
1723
1723
|
}
|
|
@@ -1733,7 +1733,7 @@ class st {
|
|
|
1733
1733
|
zoom(e = qe, t = {}) {
|
|
1734
1734
|
var g, u;
|
|
1735
1735
|
if (!e) return;
|
|
1736
|
-
const { minZoom: s, maxZoom: i } = this, { canvas: n } = this.editor, a = n.getZoom(), o = n.getCenterPoint(),
|
|
1736
|
+
const { minZoom: s, maxZoom: i } = this, { canvas: n } = this.editor, a = n.getZoom(), o = n.getCenterPoint(), d = (g = t.pointX) != null ? g : o.x, r = (u = t.pointY) != null ? u : o.y, l = new _(d, r);
|
|
1737
1737
|
let h = Number((a + Number(e)).toFixed(2));
|
|
1738
1738
|
h > i && (h = i), h < s && (h = s), n.zoomToPoint(l, h), console.log({
|
|
1739
1739
|
currentZoom: a,
|
|
@@ -1852,31 +1852,39 @@ class st {
|
|
|
1852
1852
|
withoutSave: s,
|
|
1853
1853
|
fitAsOneObject: i
|
|
1854
1854
|
} = {}) {
|
|
1855
|
-
const { canvas: n,
|
|
1856
|
-
if (
|
|
1857
|
-
if (
|
|
1858
|
-
const
|
|
1859
|
-
n.discardActiveObject(),
|
|
1860
|
-
|
|
1861
|
-
h.scale(g), n.centerObject(h);
|
|
1862
|
-
});
|
|
1863
|
-
const l = new v(r, { canvas: n });
|
|
1864
|
-
n.setActiveObject(l);
|
|
1865
|
-
} else {
|
|
1866
|
-
const r = a.calculateScaleFactor({
|
|
1867
|
-
imageObject: c,
|
|
1868
|
-
scaleType: t
|
|
1855
|
+
const { canvas: n, historyManager: a } = this.editor, o = e || n.getActiveObject();
|
|
1856
|
+
if (o) {
|
|
1857
|
+
if (o instanceof v && !i) {
|
|
1858
|
+
const d = o.getObjects();
|
|
1859
|
+
n.discardActiveObject(), d.forEach((l) => {
|
|
1860
|
+
this._fitSingleObject(l, t);
|
|
1869
1861
|
});
|
|
1870
|
-
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
|
|
1862
|
+
const r = new v(d, { canvas: n });
|
|
1863
|
+
n.setActiveObject(r);
|
|
1864
|
+
} else
|
|
1865
|
+
this._fitSingleObject(o, t);
|
|
1866
|
+
n.renderAll(), s || a.saveState(), n.fire("editor:object-fitted", {
|
|
1867
|
+
object: o,
|
|
1874
1868
|
type: t,
|
|
1875
1869
|
withoutSave: s,
|
|
1876
1870
|
fitAsOneObject: i
|
|
1877
1871
|
});
|
|
1878
1872
|
}
|
|
1879
1873
|
}
|
|
1874
|
+
/**
|
|
1875
|
+
* Масштабирует отдельный объект с учетом его угла поворота
|
|
1876
|
+
* @param obj - объект для масштабирования
|
|
1877
|
+
* @param type - тип масштабирования
|
|
1878
|
+
* @private
|
|
1879
|
+
*/
|
|
1880
|
+
_fitSingleObject(e, t) {
|
|
1881
|
+
const { canvas: s, montageArea: i } = this.editor, { width: n, height: a, scaleX: o = 1, scaleY: d = 1, angle: r = 0 } = e, l = n * 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 = i.width, A = i.height;
|
|
1882
|
+
let b;
|
|
1883
|
+
t === "contain" ? b = Math.min(j / M, A / f) : b = Math.max(j / M, A / f), e.set({
|
|
1884
|
+
scaleX: o * b,
|
|
1885
|
+
scaleY: d * b
|
|
1886
|
+
}), s.centerObject(e);
|
|
1887
|
+
}
|
|
1880
1888
|
/**
|
|
1881
1889
|
* Установка дефолтного масштаба для всех объектов внутри монтажной области редактора
|
|
1882
1890
|
*/
|
|
@@ -1899,7 +1907,7 @@ class st {
|
|
|
1899
1907
|
montageArea: n,
|
|
1900
1908
|
imageManager: a,
|
|
1901
1909
|
historyManager: o,
|
|
1902
|
-
options: { scaleType:
|
|
1910
|
+
options: { scaleType: d }
|
|
1903
1911
|
} = this.editor, r = e || i.getActiveObject();
|
|
1904
1912
|
if (!r || r.locked) return;
|
|
1905
1913
|
if (o.suspendHistory(), r.type === "image" || r.format === "svg" || r.set({
|
|
@@ -1913,9 +1921,9 @@ class st {
|
|
|
1913
1921
|
else {
|
|
1914
1922
|
const { width: h, height: g } = n, { width: u, height: m } = r, M = a.calculateScaleFactor({
|
|
1915
1923
|
imageObject: r,
|
|
1916
|
-
scaleType:
|
|
1924
|
+
scaleType: d
|
|
1917
1925
|
});
|
|
1918
|
-
|
|
1926
|
+
d === "contain" && M < 1 || d === "cover" && (u > h || m > g) ? this.fitObject({ object: r, withoutSave: !0, fitAsOneObject: !0 }) : r.set({ scaleX: 1, scaleY: 1 });
|
|
1919
1927
|
}
|
|
1920
1928
|
r.set({ flipX: !1, flipY: !1, angle: 0 }), i.centerObject(r), i.renderAll(), o.resumeHistory(), s || o.saveState(), i.fire("editor:object-reset", {
|
|
1921
1929
|
object: r,
|
|
@@ -2037,9 +2045,9 @@ class P {
|
|
|
2037
2045
|
const o = e || s.getActiveObject();
|
|
2038
2046
|
if (o) {
|
|
2039
2047
|
if (o instanceof v) {
|
|
2040
|
-
const
|
|
2041
|
-
for (let r =
|
|
2042
|
-
s.sendObjectToBack(
|
|
2048
|
+
const d = o.getObjects();
|
|
2049
|
+
for (let r = d.length - 1; r >= 0; r -= 1)
|
|
2050
|
+
s.sendObjectToBack(d[r]);
|
|
2043
2051
|
} else
|
|
2044
2052
|
s.sendObjectToBack(o);
|
|
2045
2053
|
s.sendObjectToBack(i), a && s.sendObjectToBack(a), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:object-send-to-back", {
|
|
@@ -2077,15 +2085,15 @@ class P {
|
|
|
2077
2085
|
const s = e.getObjects(), i = t.getObjects(), n = i.map((o) => s.indexOf(o));
|
|
2078
2086
|
let a = -1;
|
|
2079
2087
|
for (let o = 0; o < s.length; o += 1) {
|
|
2080
|
-
const
|
|
2081
|
-
if (!i.includes(
|
|
2088
|
+
const d = s[o];
|
|
2089
|
+
if (!i.includes(d) && n.some((r) => o > r)) {
|
|
2082
2090
|
a = o;
|
|
2083
2091
|
break;
|
|
2084
2092
|
}
|
|
2085
2093
|
}
|
|
2086
|
-
a !== -1 && i.map((
|
|
2087
|
-
const r = s.indexOf(
|
|
2088
|
-
r < a && (e.moveObjectTo(
|
|
2094
|
+
a !== -1 && i.map((d) => ({ obj: d, index: s.indexOf(d) })).sort((d, r) => r.index - d.index).forEach((d) => {
|
|
2095
|
+
const r = s.indexOf(d.obj);
|
|
2096
|
+
r < a && (e.moveObjectTo(d.obj, a), a = r);
|
|
2089
2097
|
});
|
|
2090
2098
|
}
|
|
2091
2099
|
/**
|
|
@@ -2097,15 +2105,15 @@ class P {
|
|
|
2097
2105
|
const s = e.getObjects(), i = t.getObjects(), n = i.map((o) => s.indexOf(o));
|
|
2098
2106
|
let a = -1;
|
|
2099
2107
|
for (let o = s.length - 1; o >= 0; o -= 1) {
|
|
2100
|
-
const
|
|
2101
|
-
if (!i.includes(
|
|
2108
|
+
const d = s[o];
|
|
2109
|
+
if (!i.includes(d) && n.some((r) => o < r)) {
|
|
2102
2110
|
a = o;
|
|
2103
2111
|
break;
|
|
2104
2112
|
}
|
|
2105
2113
|
}
|
|
2106
|
-
a !== -1 && i.map((
|
|
2107
|
-
const r = s.indexOf(
|
|
2108
|
-
r > a && (e.moveObjectTo(
|
|
2114
|
+
a !== -1 && i.map((d) => ({ obj: d, index: s.indexOf(d) })).sort((d, r) => d.index - r.index).forEach((d) => {
|
|
2115
|
+
const r = s.indexOf(d.obj);
|
|
2116
|
+
r > a && (e.moveObjectTo(d.obj, a), a = r);
|
|
2109
2117
|
});
|
|
2110
2118
|
}
|
|
2111
2119
|
}
|
|
@@ -2133,9 +2141,9 @@ class nt {
|
|
|
2133
2141
|
* @param flags.withoutSelection - Не выделять объект
|
|
2134
2142
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2135
2143
|
*/
|
|
2136
|
-
addRectangle(l = {}, { withoutSelection:
|
|
2144
|
+
addRectangle(l = {}, { withoutSelection: d, withoutAdding: r } = {}) {
|
|
2137
2145
|
var h = l, {
|
|
2138
|
-
id: e = `rect-${
|
|
2146
|
+
id: e = `rect-${L()}`,
|
|
2139
2147
|
left: t,
|
|
2140
2148
|
top: s,
|
|
2141
2149
|
width: i = 100,
|
|
@@ -2149,7 +2157,7 @@ class nt {
|
|
|
2149
2157
|
"height",
|
|
2150
2158
|
"fill"
|
|
2151
2159
|
]);
|
|
2152
|
-
const { canvas: g } = this.editor, u = new ve(
|
|
2160
|
+
const { canvas: g } = this.editor, u = new ve(I({
|
|
2153
2161
|
id: e,
|
|
2154
2162
|
left: t,
|
|
2155
2163
|
top: s,
|
|
@@ -2157,7 +2165,7 @@ class nt {
|
|
|
2157
2165
|
height: n,
|
|
2158
2166
|
fill: a
|
|
2159
2167
|
}, o));
|
|
2160
|
-
return !t && !s && g.centerObject(u), r || (g.add(u),
|
|
2168
|
+
return !t && !s && g.centerObject(u), r || (g.add(u), d || g.setActiveObject(u), g.renderAll()), u;
|
|
2161
2169
|
}
|
|
2162
2170
|
/**
|
|
2163
2171
|
* Добавление круга
|
|
@@ -2175,9 +2183,9 @@ class nt {
|
|
|
2175
2183
|
* @param flags.withoutSelection - Не выделять объект
|
|
2176
2184
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2177
2185
|
*/
|
|
2178
|
-
addCircle(r = {}, { withoutSelection: o, withoutAdding:
|
|
2186
|
+
addCircle(r = {}, { withoutSelection: o, withoutAdding: d } = {}) {
|
|
2179
2187
|
var l = r, {
|
|
2180
|
-
id: e = `circle-${
|
|
2188
|
+
id: e = `circle-${L()}`,
|
|
2181
2189
|
left: t,
|
|
2182
2190
|
top: s,
|
|
2183
2191
|
radius: i = 50,
|
|
@@ -2189,14 +2197,14 @@ class nt {
|
|
|
2189
2197
|
"radius",
|
|
2190
2198
|
"fill"
|
|
2191
2199
|
]);
|
|
2192
|
-
const { canvas: h } = this.editor, g = new Ae(
|
|
2200
|
+
const { canvas: h } = this.editor, g = new Ae(I({
|
|
2193
2201
|
id: e,
|
|
2194
2202
|
left: t,
|
|
2195
2203
|
top: s,
|
|
2196
2204
|
fill: n,
|
|
2197
2205
|
radius: i
|
|
2198
2206
|
}, a));
|
|
2199
|
-
return !t && !s && h.centerObject(g),
|
|
2207
|
+
return !t && !s && h.centerObject(g), d || (h.add(g), o || h.setActiveObject(g), h.renderAll()), g;
|
|
2200
2208
|
}
|
|
2201
2209
|
/**
|
|
2202
2210
|
* Добавление треугольника
|
|
@@ -2215,9 +2223,9 @@ class nt {
|
|
|
2215
2223
|
* @param flags.withoutSelection - Не выделять объект
|
|
2216
2224
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2217
2225
|
*/
|
|
2218
|
-
addTriangle(l = {}, { withoutSelection:
|
|
2226
|
+
addTriangle(l = {}, { withoutSelection: d, withoutAdding: r } = {}) {
|
|
2219
2227
|
var h = l, {
|
|
2220
|
-
id: e = `triangle-${
|
|
2228
|
+
id: e = `triangle-${L()}`,
|
|
2221
2229
|
left: t,
|
|
2222
2230
|
top: s,
|
|
2223
2231
|
width: i = 100,
|
|
@@ -2231,7 +2239,7 @@ class nt {
|
|
|
2231
2239
|
"height",
|
|
2232
2240
|
"fill"
|
|
2233
2241
|
]);
|
|
2234
|
-
const { canvas: g } = this.editor, u = new Se(
|
|
2242
|
+
const { canvas: g } = this.editor, u = new Se(I({
|
|
2235
2243
|
id: e,
|
|
2236
2244
|
left: t,
|
|
2237
2245
|
top: s,
|
|
@@ -2239,7 +2247,7 @@ class nt {
|
|
|
2239
2247
|
width: i,
|
|
2240
2248
|
height: n
|
|
2241
2249
|
}, o));
|
|
2242
|
-
return !t && !s && g.centerObject(u), r || (g.add(u),
|
|
2250
|
+
return !t && !s && g.centerObject(u), r || (g.add(u), d || g.setActiveObject(u), g.renderAll()), u;
|
|
2243
2251
|
}
|
|
2244
2252
|
}
|
|
2245
2253
|
class at {
|
|
@@ -2280,9 +2288,9 @@ class at {
|
|
|
2280
2288
|
}), this._cloneAndFire(e, s);
|
|
2281
2289
|
return;
|
|
2282
2290
|
}
|
|
2283
|
-
const n = s.toCanvasElement().toDataURL(), a = n.slice(5).split(";")[0], o = n.split(",")[1],
|
|
2284
|
-
for (let g = 0; g <
|
|
2285
|
-
r[g] =
|
|
2291
|
+
const n = s.toCanvasElement().toDataURL(), a = n.slice(5).split(";")[0], o = n.split(",")[1], d = atob(o), r = new Uint8Array(d.length);
|
|
2292
|
+
for (let g = 0; g < d.length; g += 1)
|
|
2293
|
+
r[g] = d.charCodeAt(g);
|
|
2286
2294
|
const l = new Blob([r.buffer], { type: a }), h = new ClipboardItem({ [a]: l });
|
|
2287
2295
|
navigator.clipboard.write([h]).catch((g) => {
|
|
2288
2296
|
t.emitWarning({
|
|
@@ -2324,10 +2332,10 @@ class at {
|
|
|
2324
2332
|
if (i.type !== "text/html") {
|
|
2325
2333
|
const o = i.getAsFile();
|
|
2326
2334
|
if (!o) return;
|
|
2327
|
-
const
|
|
2328
|
-
|
|
2335
|
+
const d = new FileReader();
|
|
2336
|
+
d.onload = (r) => {
|
|
2329
2337
|
r.target && this.editor.imageManager.importImage({ source: r.target.result });
|
|
2330
|
-
},
|
|
2338
|
+
}, d.readAsDataURL(o);
|
|
2331
2339
|
return;
|
|
2332
2340
|
}
|
|
2333
2341
|
const n = e.getData("text/html");
|
|
@@ -2350,7 +2358,7 @@ class at {
|
|
|
2350
2358
|
if (!this.clipboard) return;
|
|
2351
2359
|
const t = yield this.clipboard.clone(["format"]);
|
|
2352
2360
|
e.discardActiveObject(), t.set({
|
|
2353
|
-
id: `${t.type}-${
|
|
2361
|
+
id: `${t.type}-${L()}`,
|
|
2354
2362
|
left: t.left + 10,
|
|
2355
2363
|
top: t.top + 10,
|
|
2356
2364
|
evented: !0
|
|
@@ -2444,7 +2452,7 @@ class ot {
|
|
|
2444
2452
|
const n = e || s.getActiveObject();
|
|
2445
2453
|
if (!n || !(n instanceof v)) return;
|
|
2446
2454
|
const a = n.getObjects(), o = new X(a);
|
|
2447
|
-
a.forEach((
|
|
2455
|
+
a.forEach((d) => s.remove(d)), o.set("id", `${o.type}-${L()}`), s.add(o), s.setActiveObject(o), s.renderAll(), i.resumeHistory(), t || i.saveState(), s.fire("editor:objects-grouped", {
|
|
2448
2456
|
object: n,
|
|
2449
2457
|
group: o,
|
|
2450
2458
|
withoutSave: t
|
|
@@ -2466,7 +2474,7 @@ class ot {
|
|
|
2466
2474
|
const n = e || s.getActiveObject();
|
|
2467
2475
|
if (!(n instanceof X)) return;
|
|
2468
2476
|
const a = n.removeAll();
|
|
2469
|
-
s.remove(n), a.forEach((
|
|
2477
|
+
s.remove(n), a.forEach((d) => s.add(d));
|
|
2470
2478
|
const o = new v(a, {
|
|
2471
2479
|
canvas: s
|
|
2472
2480
|
});
|
|
@@ -2623,7 +2631,7 @@ class V {
|
|
|
2623
2631
|
message: a,
|
|
2624
2632
|
data: i
|
|
2625
2633
|
};
|
|
2626
|
-
this._buffer.push(
|
|
2634
|
+
this._buffer.push(I({
|
|
2627
2635
|
type: "editor:error"
|
|
2628
2636
|
}, o)), this.editor.canvas.fire("editor:error", o);
|
|
2629
2637
|
}
|
|
@@ -2651,7 +2659,7 @@ class V {
|
|
|
2651
2659
|
message: a,
|
|
2652
2660
|
data: n
|
|
2653
2661
|
};
|
|
2654
|
-
this._buffer.push(
|
|
2662
|
+
this._buffer.push(I({
|
|
2655
2663
|
type: "editor:warning"
|
|
2656
2664
|
}, o)), this.editor.canvas.fire("editor:warning", o);
|
|
2657
2665
|
}
|
|
@@ -2671,7 +2679,7 @@ class ie {
|
|
|
2671
2679
|
* @param options - опции и настройки редактора
|
|
2672
2680
|
*/
|
|
2673
2681
|
constructor(e, t) {
|
|
2674
|
-
this.options = t, this.containerId = e, this.editorId = `${e}-${
|
|
2682
|
+
this.options = t, this.containerId = e, this.editorId = `${e}-${L()}`, this.clipboard = null, this.init();
|
|
2675
2683
|
}
|
|
2676
2684
|
/**
|
|
2677
2685
|
* Инициализация редактора.
|
|
@@ -2688,11 +2696,11 @@ class ie {
|
|
|
2688
2696
|
canvasCSSWidth: n,
|
|
2689
2697
|
canvasCSSHeight: a,
|
|
2690
2698
|
initialImage: o,
|
|
2691
|
-
initialStateJSON:
|
|
2699
|
+
initialStateJSON: d,
|
|
2692
2700
|
scaleType: r,
|
|
2693
2701
|
_onReadyCallback: l
|
|
2694
2702
|
} = this.options;
|
|
2695
|
-
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
|
|
2703
|
+
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 nt({ editor: this }), this.interactionBlocker = new it({ 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(i), this.canvasManager.setCanvasCSSWidth(n), this.canvasManager.setCanvasCSSHeight(a), o != null && o.source) {
|
|
2696
2704
|
const {
|
|
2697
2705
|
source: h,
|
|
2698
2706
|
scale: g = `image-${r}`,
|
|
@@ -2701,7 +2709,7 @@ class ie {
|
|
|
2701
2709
|
yield this.imageManager.importImage({ source: h, scale: g, withoutSave: u });
|
|
2702
2710
|
} else
|
|
2703
2711
|
this.canvasManager.setDefaultScale({ withoutSave: !0 });
|
|
2704
|
-
|
|
2712
|
+
d && this.historyManager.loadStateFromFullState(d), this.historyManager.saveState(), console.log("editor:ready"), this.canvas.fire("editor:ready", this), typeof l == "function" && l(this);
|
|
2705
2713
|
});
|
|
2706
2714
|
}
|
|
2707
2715
|
/**
|
|
@@ -2859,15 +2867,15 @@ const lt = {
|
|
|
2859
2867
|
deleteObjectsByHotkey: !0,
|
|
2860
2868
|
resetObjectFitByDoubleClick: !0
|
|
2861
2869
|
};
|
|
2862
|
-
function bt(
|
|
2863
|
-
const t =
|
|
2870
|
+
function bt(c, e = {}) {
|
|
2871
|
+
const t = I(I({}, lt), e), s = document.getElementById(c);
|
|
2864
2872
|
if (!s)
|
|
2865
|
-
return Promise.reject(new Error(`Контейнер с ID "${
|
|
2873
|
+
return Promise.reject(new Error(`Контейнер с ID "${c}" не найден.`));
|
|
2866
2874
|
const i = document.createElement("canvas");
|
|
2867
|
-
return i.id = `${
|
|
2875
|
+
return i.id = `${c}-canvas`, s.appendChild(i), t.editorContainer = s, new Promise((n) => {
|
|
2868
2876
|
t._onReadyCallback = n;
|
|
2869
2877
|
const a = new ie(i.id, t);
|
|
2870
|
-
window[
|
|
2878
|
+
window[c] = a;
|
|
2871
2879
|
});
|
|
2872
2880
|
}
|
|
2873
2881
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anu3ev/fabric-image-editor",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.55",
|
|
4
4
|
"description": "JavaScript image editor built on FabricJS, allowing you to create instances with an integrated montage area and providing an API to modify and manage state.",
|
|
5
5
|
"module": "dist/main.js",
|
|
6
6
|
"files": [
|