@anu3ev/fabric-image-editor 0.1.53 → 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 +264 -246
- 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
|
|
22
|
+
var p = (c, e, t) => new Promise((s, i) => {
|
|
23
23
|
var n = (d) => {
|
|
24
24
|
try {
|
|
25
25
|
o(t.next(d));
|
|
26
|
-
} catch (
|
|
27
|
-
i(
|
|
26
|
+
} catch (r) {
|
|
27
|
+
i(r);
|
|
28
28
|
}
|
|
29
29
|
}, a = (d) => {
|
|
30
30
|
try {
|
|
31
31
|
o(t.throw(d));
|
|
32
|
-
} catch (
|
|
33
|
-
i(
|
|
32
|
+
} catch (r) {
|
|
33
|
+
i(r);
|
|
34
34
|
}
|
|
35
35
|
}, o = (d) => d.done ? s(d.value) : Promise.resolve(d.value).then(n, a);
|
|
36
|
-
o((t = t.apply(
|
|
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;
|
|
@@ -76,10 +76,10 @@ class z {
|
|
|
76
76
|
pasteImageFromClipboard: a,
|
|
77
77
|
undoRedoByHotKeys: o,
|
|
78
78
|
selectAllByHotkey: d,
|
|
79
|
-
deleteObjectsByHotkey:
|
|
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 })), d && document.addEventListener("keydown", this.handleSelectAllEventBound, { capture: !0 }),
|
|
82
|
+
t && (this.canvas.on("mouse:down", this.handleCanvasDragStartBound), this.canvas.on("mouse:move", this.handleCanvasDraggingBound), this.canvas.on("mouse:up", this.handleCanvasDragEndBound), document.addEventListener("keydown", this.handleSpaceKeyDownBound, { capture: !0 }), document.addEventListener("keyup", this.handleSpaceKeyUpBound, { capture: !0 })), s && this.canvas.on("mouse:wheel", this.handleMouseWheelZoomBound), 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
|
* При массовом выделении объектов удаляем из него залоченные.
|
|
@@ -160,7 +160,7 @@ class z {
|
|
|
160
160
|
* @param event.code — код клавиши
|
|
161
161
|
*/
|
|
162
162
|
handleUndoRedoEvent(e) {
|
|
163
|
-
return
|
|
163
|
+
return p(this, null, function* () {
|
|
164
164
|
const { ctrlKey: t, metaKey: s, code: i, repeat: n } = e;
|
|
165
165
|
!t && !s || n || !/Mac/i.test(navigator.userAgent) && this.isUndoRedoKeyPressed || (i === "KeyZ" ? (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.undo()) : i === "KeyY" && (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.redo()));
|
|
166
166
|
});
|
|
@@ -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,
|
|
@@ -480,7 +480,7 @@ class He {
|
|
|
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();
|
|
@@ -626,8 +626,8 @@ class Qe {
|
|
|
626
626
|
for (const t of e) {
|
|
627
627
|
const { name: s, handle: i } = t, { icons: n = {}, btnStyle: a, handlers: o = {} } = this.config, d = document.createElement("button");
|
|
628
628
|
d.innerHTML = n[i] ? `<img src="${n[i]}" title="${s}" />` : s, Object.assign(d.style, a), d.onclick = () => {
|
|
629
|
-
var
|
|
630
|
-
return (
|
|
629
|
+
var r;
|
|
630
|
+
return (r = o[i]) == null ? void 0 : r.call(o, this.editor);
|
|
631
631
|
}, this.el.appendChild(d);
|
|
632
632
|
}
|
|
633
633
|
}
|
|
@@ -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: d } = e.getCenterPoint(), { top:
|
|
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
|
* Функция загрузки состояния в канвас.
|
|
@@ -810,14 +810,14 @@ class Je {
|
|
|
810
810
|
* @fires editor:history-state-loaded
|
|
811
811
|
*/
|
|
812
812
|
loadStateFromFullState(e) {
|
|
813
|
-
return
|
|
813
|
+
return p(this, null, function* () {
|
|
814
814
|
if (!e) return;
|
|
815
815
|
console.log("loadStateFromFullState fullState", e);
|
|
816
816
|
const { canvas: t, canvasManager: s, interactionBlocker: i } = this.editor, { width: n, height: a } = t;
|
|
817
817
|
yield t.loadFromJSON(e);
|
|
818
|
-
const o = t.getObjects().find((
|
|
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 d = t.getObjects().find((
|
|
820
|
+
const d = t.getObjects().find((r) => r.id === "overlay-mask");
|
|
821
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,
|
|
@@ -833,7 +833,7 @@ class Je {
|
|
|
833
833
|
* @fires editor:undo
|
|
834
834
|
*/
|
|
835
835
|
undo() {
|
|
836
|
-
return
|
|
836
|
+
return p(this, null, function* () {
|
|
837
837
|
if (!this.skipHistory) {
|
|
838
838
|
if (this.currentIndex <= 0) {
|
|
839
839
|
console.log("Нет предыдущих состояний для отмены.");
|
|
@@ -870,7 +870,7 @@ class Je {
|
|
|
870
870
|
* @fires editor:redo
|
|
871
871
|
*/
|
|
872
872
|
redo() {
|
|
873
|
-
return
|
|
873
|
+
return p(this, null, function* () {
|
|
874
874
|
if (!this.skipHistory) {
|
|
875
875
|
if (this.currentIndex >= this.patches.length) {
|
|
876
876
|
console.log("Нет состояний для повтора.");
|
|
@@ -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
|
}
|
|
@@ -921,17 +921,17 @@ class N {
|
|
|
921
921
|
* @returns возвращает Promise с объектом изображения или null в случае ошибки
|
|
922
922
|
*/
|
|
923
923
|
importImage(e) {
|
|
924
|
-
return
|
|
924
|
+
return p(this, null, function* () {
|
|
925
925
|
const {
|
|
926
926
|
source: t,
|
|
927
927
|
scale: s = `image-${this.options.scaleType}`,
|
|
928
928
|
withoutSave: i = !1
|
|
929
929
|
} = e;
|
|
930
930
|
if (!t) return null;
|
|
931
|
-
const { canvas: n, montageArea: a, transformManager: o, historyManager: d, errorManager:
|
|
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
|
-
return
|
|
934
|
+
return r.emitError({
|
|
935
935
|
origin: "ImageManager",
|
|
936
936
|
method: "importImage",
|
|
937
937
|
code: "INVALID_CONTENT_TYPE",
|
|
@@ -945,10 +945,10 @@ class N {
|
|
|
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
|
-
return
|
|
951
|
+
return r.emitError({
|
|
952
952
|
origin: "ImageManager",
|
|
953
953
|
method: "importImage",
|
|
954
954
|
code: "INVALID_SOURCE_TYPE",
|
|
@@ -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
981
|
n.add(M), n.centerObject(M), n.setActiveObject(M), n.renderAll(), d.resumeHistory(), i || d.saveState();
|
|
982
|
-
const
|
|
982
|
+
const A = {
|
|
983
983
|
image: M,
|
|
984
984
|
format: h,
|
|
985
985
|
contentType: l,
|
|
@@ -987,9 +987,9 @@ 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
|
-
return
|
|
992
|
+
return r.emitError({
|
|
993
993
|
origin: "ImageManager",
|
|
994
994
|
method: "importImage",
|
|
995
995
|
code: "IMPORT_FAILED",
|
|
@@ -1008,7 +1008,7 @@ class N {
|
|
|
1008
1008
|
* @returns возвращает Promise с Blob-объектом уменьшенного изображения
|
|
1009
1009
|
*/
|
|
1010
1010
|
resizeImageToBoundaries(e, t = "max") {
|
|
1011
|
-
return
|
|
1011
|
+
return p(this, null, function* () {
|
|
1012
1012
|
let s = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${O}x${T}`;
|
|
1013
1013
|
t === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${x}x${B}`);
|
|
1014
1014
|
const i = {
|
|
@@ -1040,7 +1040,7 @@ class N {
|
|
|
1040
1040
|
* @fires editor:canvas-exported
|
|
1041
1041
|
*/
|
|
1042
1042
|
exportCanvasAsImageFile() {
|
|
1043
|
-
return
|
|
1043
|
+
return p(this, arguments, function* (e = {}) {
|
|
1044
1044
|
const {
|
|
1045
1045
|
fileName: t = "image.png",
|
|
1046
1046
|
contentType: s = "image/png",
|
|
@@ -1048,18 +1048,18 @@ class N {
|
|
|
1048
1048
|
exportAsBlob: n = !1
|
|
1049
1049
|
} = e, { canvas: a, montageArea: o, workerManager: d } = this.editor;
|
|
1050
1050
|
try {
|
|
1051
|
-
const
|
|
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
|
-
if (
|
|
1093
|
-
const k = m * 0.264583,
|
|
1094
|
-
orientation: k >
|
|
1092
|
+
if (r) {
|
|
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,19 +1121,19 @@ 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
|
|
1129
1129
|
};
|
|
1130
1130
|
return a.fire("editor:canvas-exported", ne), ne;
|
|
1131
|
-
} catch (
|
|
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
|
-
message: `Ошибка экспорта изображения: ${
|
|
1136
|
+
message: `Ошибка экспорта изображения: ${r.message}`,
|
|
1137
1137
|
data: { contentType: s, fileName: t, exportAsBase64: i, exportAsBlob: n }
|
|
1138
1138
|
}), null;
|
|
1139
1139
|
}
|
|
@@ -1151,15 +1151,15 @@ class N {
|
|
|
1151
1151
|
* @fires editor:object-exported
|
|
1152
1152
|
*/
|
|
1153
1153
|
exportObjectAsImageFile() {
|
|
1154
|
-
return
|
|
1154
|
+
return p(this, arguments, function* (e = {}) {
|
|
1155
1155
|
const {
|
|
1156
1156
|
object: t,
|
|
1157
1157
|
fileName: s = "image.png",
|
|
1158
1158
|
contentType: i = "image/png",
|
|
1159
1159
|
exportAsBase64: n = !1,
|
|
1160
1160
|
exportAsBlob: a = !1
|
|
1161
|
-
} = e, { canvas: o, workerManager: d } = this.editor,
|
|
1162
|
-
if (!
|
|
1161
|
+
} = e, { canvas: o, workerManager: d } = this.editor, r = t || o.getActiveObject();
|
|
1162
|
+
if (!r)
|
|
1163
1163
|
return this.editor.errorManager.emitError({
|
|
1164
1164
|
origin: "ImageManager",
|
|
1165
1165
|
method: "exportObjectAsImageFile",
|
|
@@ -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 =
|
|
1173
|
+
const M = r.toSVG(), f = D._exportSVGStringAsFile(M, {
|
|
1174
1174
|
exportAsBase64: n,
|
|
1175
1175
|
exportAsBlob: a,
|
|
1176
1176
|
fileName: s
|
|
1177
|
-
}),
|
|
1178
|
-
object:
|
|
1179
|
-
image:
|
|
1177
|
+
}), j = {
|
|
1178
|
+
object: r,
|
|
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
|
-
if (n &&
|
|
1187
|
-
const M = yield createImageBitmap(
|
|
1186
|
+
if (n && r instanceof Z) {
|
|
1187
|
+
const M = yield createImageBitmap(r.getElement()), f = yield d.post(
|
|
1188
1188
|
"toDataURL",
|
|
1189
1189
|
{
|
|
1190
1190
|
format: l,
|
|
@@ -1192,23 +1192,23 @@ class N {
|
|
|
1192
1192
|
bitmap: M
|
|
1193
1193
|
},
|
|
1194
1194
|
[M]
|
|
1195
|
-
),
|
|
1196
|
-
object:
|
|
1197
|
-
image:
|
|
1195
|
+
), j = {
|
|
1196
|
+
object: r,
|
|
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 =
|
|
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) {
|
|
1210
1210
|
const M = {
|
|
1211
|
-
object:
|
|
1211
|
+
object: r,
|
|
1212
1212
|
image: g,
|
|
1213
1213
|
format: l,
|
|
1214
1214
|
contentType: i,
|
|
@@ -1217,7 +1217,7 @@ class N {
|
|
|
1217
1217
|
return o.fire("editor:object-exported", M), M;
|
|
1218
1218
|
}
|
|
1219
1219
|
const u = new File([g], s, { type: i }), m = {
|
|
1220
|
-
object:
|
|
1220
|
+
object: r,
|
|
1221
1221
|
image: u,
|
|
1222
1222
|
format: l,
|
|
1223
1223
|
contentType: i,
|
|
@@ -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 допустимым типом изображения.
|
|
@@ -1262,7 +1262,7 @@ class N {
|
|
|
1262
1262
|
* @public
|
|
1263
1263
|
*/
|
|
1264
1264
|
getContentType(e) {
|
|
1265
|
-
return
|
|
1265
|
+
return p(this, null, function* () {
|
|
1266
1266
|
return typeof e == "string" ? this.getContentTypeFromUrl(e) : e.type || "application/octet-stream";
|
|
1267
1267
|
});
|
|
1268
1268
|
}
|
|
@@ -1273,7 +1273,7 @@ class N {
|
|
|
1273
1273
|
* @public
|
|
1274
1274
|
*/
|
|
1275
1275
|
getContentTypeFromUrl(e) {
|
|
1276
|
-
return
|
|
1276
|
+
return p(this, null, function* () {
|
|
1277
1277
|
if (e.startsWith("data:")) {
|
|
1278
1278
|
const t = e.match(/^data:([^;]+)/);
|
|
1279
1279
|
return t ? t[1] : "application/octet-stream";
|
|
@@ -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: d, height:
|
|
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 / d,
|
|
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: d, height:
|
|
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 /
|
|
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();
|
|
@@ -1619,15 +1619,15 @@ class tt {
|
|
|
1619
1619
|
}
|
|
1620
1620
|
const o = t === "width" ? "width" : "height";
|
|
1621
1621
|
if (typeof s == "string") {
|
|
1622
|
-
a.forEach((
|
|
1623
|
-
|
|
1622
|
+
a.forEach((r) => {
|
|
1623
|
+
r.style[o] = s;
|
|
1624
1624
|
});
|
|
1625
1625
|
return;
|
|
1626
1626
|
}
|
|
1627
1627
|
if (isNaN(s)) return;
|
|
1628
1628
|
const d = `${s}px`;
|
|
1629
|
-
a.forEach((
|
|
1630
|
-
|
|
1629
|
+
a.forEach((r) => {
|
|
1630
|
+
r.style[o] = d;
|
|
1631
1631
|
}), i.fire(`editor:display-${e}-${o}-changed`, {
|
|
1632
1632
|
element: e,
|
|
1633
1633
|
value: s
|
|
@@ -1650,19 +1650,19 @@ class tt {
|
|
|
1650
1650
|
montageAreaWidth: o,
|
|
1651
1651
|
montageAreaHeight: d
|
|
1652
1652
|
}
|
|
1653
|
-
} = this.editor,
|
|
1654
|
-
if (!
|
|
1655
|
-
const { width: l, height: h } =
|
|
1653
|
+
} = this.editor, r = e || i.getActiveObject();
|
|
1654
|
+
if (!r || r.type !== "image" && r.format !== "svg") return;
|
|
1655
|
+
const { width: l, height: h } = r;
|
|
1656
1656
|
let g = Math.min(l, O), u = Math.min(h, T);
|
|
1657
1657
|
if (t) {
|
|
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 > d) && a.calculateAndApplyDefaultZoom(), a.resetObject(
|
|
1665
|
-
object:
|
|
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
|
+
object: r,
|
|
1666
1666
|
width: g,
|
|
1667
1667
|
height: u,
|
|
1668
1668
|
preserveAspectRatio: t,
|
|
@@ -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, d = i / a * e,
|
|
1720
|
-
this.defaultZoom = Math.min(d,
|
|
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(), d = (g = t.pointX) != null ? g : o.x,
|
|
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(c, { canvas: n });
|
|
1864
|
-
n.setActiveObject(l);
|
|
1865
|
-
} else {
|
|
1866
|
-
const c = a.calculateScaleFactor({
|
|
1867
|
-
imageObject: d,
|
|
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
|
-
d
|
|
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
|
*/
|
|
@@ -1900,25 +1908,25 @@ class st {
|
|
|
1900
1908
|
imageManager: a,
|
|
1901
1909
|
historyManager: o,
|
|
1902
1910
|
options: { scaleType: d }
|
|
1903
|
-
} = this.editor,
|
|
1904
|
-
if (!
|
|
1905
|
-
if (o.suspendHistory(),
|
|
1911
|
+
} = this.editor, r = e || i.getActiveObject();
|
|
1912
|
+
if (!r || r.locked) return;
|
|
1913
|
+
if (o.suspendHistory(), r.type === "image" || r.format === "svg" || r.set({
|
|
1906
1914
|
scaleX: 1,
|
|
1907
1915
|
scaleY: 1,
|
|
1908
1916
|
flipX: !1,
|
|
1909
1917
|
flipY: !1,
|
|
1910
1918
|
angle: 0
|
|
1911
1919
|
}), t)
|
|
1912
|
-
this.fitObject({ object:
|
|
1920
|
+
this.fitObject({ object: r, withoutSave: !0, fitAsOneObject: !0 });
|
|
1913
1921
|
else {
|
|
1914
|
-
const { width: h, height: g } = n, { width: u, height: m } =
|
|
1915
|
-
imageObject:
|
|
1922
|
+
const { width: h, height: g } = n, { width: u, height: m } = r, M = a.calculateScaleFactor({
|
|
1923
|
+
imageObject: r,
|
|
1916
1924
|
scaleType: d
|
|
1917
1925
|
});
|
|
1918
|
-
d === "contain" && M < 1 || d === "cover" && (u > h || m > g) ? this.fitObject({ object:
|
|
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
|
-
|
|
1921
|
-
object:
|
|
1928
|
+
r.set({ flipX: !1, flipY: !1, angle: 0 }), i.centerObject(r), i.renderAll(), o.resumeHistory(), s || o.saveState(), i.fire("editor:object-reset", {
|
|
1929
|
+
object: r,
|
|
1922
1930
|
withoutSave: s,
|
|
1923
1931
|
alwaysFitObject: t
|
|
1924
1932
|
});
|
|
@@ -2038,8 +2046,8 @@ class P {
|
|
|
2038
2046
|
if (o) {
|
|
2039
2047
|
if (o instanceof v) {
|
|
2040
2048
|
const d = o.getObjects();
|
|
2041
|
-
for (let
|
|
2042
|
-
s.sendObjectToBack(d[
|
|
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", {
|
|
@@ -2078,14 +2086,14 @@ class P {
|
|
|
2078
2086
|
let a = -1;
|
|
2079
2087
|
for (let o = 0; o < s.length; o += 1) {
|
|
2080
2088
|
const d = s[o];
|
|
2081
|
-
if (!i.includes(d) && n.some((
|
|
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((d) => ({ obj: d, index: s.indexOf(d) })).sort((d,
|
|
2087
|
-
const
|
|
2088
|
-
|
|
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
|
/**
|
|
@@ -2094,9 +2102,19 @@ class P {
|
|
|
2094
2102
|
* @param activeSelection - активное выделение
|
|
2095
2103
|
*/
|
|
2096
2104
|
static _moveSelectionBackwards(e, t) {
|
|
2097
|
-
const s = e.getObjects(), i = t.getObjects(), n =
|
|
2098
|
-
|
|
2099
|
-
|
|
2105
|
+
const s = e.getObjects(), i = t.getObjects(), n = i.map((o) => s.indexOf(o));
|
|
2106
|
+
let a = -1;
|
|
2107
|
+
for (let o = s.length - 1; o >= 0; o -= 1) {
|
|
2108
|
+
const d = s[o];
|
|
2109
|
+
if (!i.includes(d) && n.some((r) => o < r)) {
|
|
2110
|
+
a = o;
|
|
2111
|
+
break;
|
|
2112
|
+
}
|
|
2113
|
+
}
|
|
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);
|
|
2117
|
+
});
|
|
2100
2118
|
}
|
|
2101
2119
|
}
|
|
2102
2120
|
class nt {
|
|
@@ -2123,9 +2141,9 @@ class nt {
|
|
|
2123
2141
|
* @param flags.withoutSelection - Не выделять объект
|
|
2124
2142
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2125
2143
|
*/
|
|
2126
|
-
addRectangle(l = {}, { withoutSelection: d, withoutAdding:
|
|
2144
|
+
addRectangle(l = {}, { withoutSelection: d, withoutAdding: r } = {}) {
|
|
2127
2145
|
var h = l, {
|
|
2128
|
-
id: e = `rect-${
|
|
2146
|
+
id: e = `rect-${L()}`,
|
|
2129
2147
|
left: t,
|
|
2130
2148
|
top: s,
|
|
2131
2149
|
width: i = 100,
|
|
@@ -2139,7 +2157,7 @@ class nt {
|
|
|
2139
2157
|
"height",
|
|
2140
2158
|
"fill"
|
|
2141
2159
|
]);
|
|
2142
|
-
const { canvas: g } = this.editor, u = new ve(
|
|
2160
|
+
const { canvas: g } = this.editor, u = new ve(I({
|
|
2143
2161
|
id: e,
|
|
2144
2162
|
left: t,
|
|
2145
2163
|
top: s,
|
|
@@ -2147,7 +2165,7 @@ class nt {
|
|
|
2147
2165
|
height: n,
|
|
2148
2166
|
fill: a
|
|
2149
2167
|
}, o));
|
|
2150
|
-
return !t && !s && g.centerObject(u),
|
|
2168
|
+
return !t && !s && g.centerObject(u), r || (g.add(u), d || g.setActiveObject(u), g.renderAll()), u;
|
|
2151
2169
|
}
|
|
2152
2170
|
/**
|
|
2153
2171
|
* Добавление круга
|
|
@@ -2165,9 +2183,9 @@ class nt {
|
|
|
2165
2183
|
* @param flags.withoutSelection - Не выделять объект
|
|
2166
2184
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2167
2185
|
*/
|
|
2168
|
-
addCircle(
|
|
2169
|
-
var l =
|
|
2170
|
-
id: e = `circle-${
|
|
2186
|
+
addCircle(r = {}, { withoutSelection: o, withoutAdding: d } = {}) {
|
|
2187
|
+
var l = r, {
|
|
2188
|
+
id: e = `circle-${L()}`,
|
|
2171
2189
|
left: t,
|
|
2172
2190
|
top: s,
|
|
2173
2191
|
radius: i = 50,
|
|
@@ -2179,7 +2197,7 @@ class nt {
|
|
|
2179
2197
|
"radius",
|
|
2180
2198
|
"fill"
|
|
2181
2199
|
]);
|
|
2182
|
-
const { canvas: h } = this.editor, g = new Ae(
|
|
2200
|
+
const { canvas: h } = this.editor, g = new Ae(I({
|
|
2183
2201
|
id: e,
|
|
2184
2202
|
left: t,
|
|
2185
2203
|
top: s,
|
|
@@ -2205,9 +2223,9 @@ class nt {
|
|
|
2205
2223
|
* @param flags.withoutSelection - Не выделять объект
|
|
2206
2224
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2207
2225
|
*/
|
|
2208
|
-
addTriangle(l = {}, { withoutSelection: d, withoutAdding:
|
|
2226
|
+
addTriangle(l = {}, { withoutSelection: d, withoutAdding: r } = {}) {
|
|
2209
2227
|
var h = l, {
|
|
2210
|
-
id: e = `triangle-${
|
|
2228
|
+
id: e = `triangle-${L()}`,
|
|
2211
2229
|
left: t,
|
|
2212
2230
|
top: s,
|
|
2213
2231
|
width: i = 100,
|
|
@@ -2221,7 +2239,7 @@ class nt {
|
|
|
2221
2239
|
"height",
|
|
2222
2240
|
"fill"
|
|
2223
2241
|
]);
|
|
2224
|
-
const { canvas: g } = this.editor, u = new Se(
|
|
2242
|
+
const { canvas: g } = this.editor, u = new Se(I({
|
|
2225
2243
|
id: e,
|
|
2226
2244
|
left: t,
|
|
2227
2245
|
top: s,
|
|
@@ -2229,7 +2247,7 @@ class nt {
|
|
|
2229
2247
|
width: i,
|
|
2230
2248
|
height: n
|
|
2231
2249
|
}, o));
|
|
2232
|
-
return !t && !s && g.centerObject(u),
|
|
2250
|
+
return !t && !s && g.centerObject(u), r || (g.add(u), d || g.setActiveObject(u), g.renderAll()), u;
|
|
2233
2251
|
}
|
|
2234
2252
|
}
|
|
2235
2253
|
class at {
|
|
@@ -2270,10 +2288,10 @@ class at {
|
|
|
2270
2288
|
}), this._cloneAndFire(e, s);
|
|
2271
2289
|
return;
|
|
2272
2290
|
}
|
|
2273
|
-
const n = s.toCanvasElement().toDataURL(), a = n.slice(5).split(";")[0], o = n.split(",")[1], d = atob(o),
|
|
2291
|
+
const n = s.toCanvasElement().toDataURL(), a = n.slice(5).split(";")[0], o = n.split(",")[1], d = atob(o), r = new Uint8Array(d.length);
|
|
2274
2292
|
for (let g = 0; g < d.length; g += 1)
|
|
2275
|
-
|
|
2276
|
-
const l = new Blob([
|
|
2293
|
+
r[g] = d.charCodeAt(g);
|
|
2294
|
+
const l = new Blob([r.buffer], { type: a }), h = new ClipboardItem({ [a]: l });
|
|
2277
2295
|
navigator.clipboard.write([h]).catch((g) => {
|
|
2278
2296
|
t.emitWarning({
|
|
2279
2297
|
origin: "ClipboardManager",
|
|
@@ -2315,16 +2333,16 @@ class at {
|
|
|
2315
2333
|
const o = i.getAsFile();
|
|
2316
2334
|
if (!o) return;
|
|
2317
2335
|
const d = new FileReader();
|
|
2318
|
-
d.onload = (
|
|
2319
|
-
|
|
2336
|
+
d.onload = (r) => {
|
|
2337
|
+
r.target && this.editor.imageManager.importImage({ source: r.target.result });
|
|
2320
2338
|
}, d.readAsDataURL(o);
|
|
2321
2339
|
return;
|
|
2322
2340
|
}
|
|
2323
2341
|
const n = e.getData("text/html");
|
|
2324
2342
|
if (n) {
|
|
2325
|
-
const
|
|
2326
|
-
if (
|
|
2327
|
-
t.importImage({ source:
|
|
2343
|
+
const r = new DOMParser().parseFromString(n, "text/html").querySelector("img");
|
|
2344
|
+
if (r != null && r.src) {
|
|
2345
|
+
t.importImage({ source: r.src });
|
|
2328
2346
|
return;
|
|
2329
2347
|
}
|
|
2330
2348
|
}
|
|
@@ -2335,12 +2353,12 @@ class at {
|
|
|
2335
2353
|
* @fires editor:object-pasted
|
|
2336
2354
|
*/
|
|
2337
2355
|
paste() {
|
|
2338
|
-
return
|
|
2356
|
+
return p(this, null, function* () {
|
|
2339
2357
|
const { canvas: e } = this.editor;
|
|
2340
2358
|
if (!this.clipboard) return;
|
|
2341
2359
|
const t = yield this.clipboard.clone(["format"]);
|
|
2342
2360
|
e.discardActiveObject(), t.set({
|
|
2343
|
-
id: `${t.type}-${
|
|
2361
|
+
id: `${t.type}-${L()}`,
|
|
2344
2362
|
left: t.left + 10,
|
|
2345
2363
|
top: t.top + 10,
|
|
2346
2364
|
evented: !0
|
|
@@ -2375,8 +2393,8 @@ class F {
|
|
|
2375
2393
|
lockSkewingY: !0,
|
|
2376
2394
|
locked: !0
|
|
2377
2395
|
};
|
|
2378
|
-
a.set(o), !t && F._isGroupOrSelection(a) && a.getObjects().forEach((
|
|
2379
|
-
|
|
2396
|
+
a.set(o), !t && F._isGroupOrSelection(a) && a.getObjects().forEach((r) => {
|
|
2397
|
+
r.set(o);
|
|
2380
2398
|
}), i.renderAll(), s || n.saveState(), i.fire("editor:object-locked", {
|
|
2381
2399
|
object: a,
|
|
2382
2400
|
skipInnerObjects: t,
|
|
@@ -2434,7 +2452,7 @@ class ot {
|
|
|
2434
2452
|
const n = e || s.getActiveObject();
|
|
2435
2453
|
if (!n || !(n instanceof v)) return;
|
|
2436
2454
|
const a = n.getObjects(), o = new X(a);
|
|
2437
|
-
a.forEach((d) => s.remove(d)), o.set("id", `${o.type}-${
|
|
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", {
|
|
2438
2456
|
object: n,
|
|
2439
2457
|
group: o,
|
|
2440
2458
|
withoutSave: t
|
|
@@ -2613,7 +2631,7 @@ class V {
|
|
|
2613
2631
|
message: a,
|
|
2614
2632
|
data: i
|
|
2615
2633
|
};
|
|
2616
|
-
this._buffer.push(
|
|
2634
|
+
this._buffer.push(I({
|
|
2617
2635
|
type: "editor:error"
|
|
2618
2636
|
}, o)), this.editor.canvas.fire("editor:error", o);
|
|
2619
2637
|
}
|
|
@@ -2641,7 +2659,7 @@ class V {
|
|
|
2641
2659
|
message: a,
|
|
2642
2660
|
data: n
|
|
2643
2661
|
};
|
|
2644
|
-
this._buffer.push(
|
|
2662
|
+
this._buffer.push(I({
|
|
2645
2663
|
type: "editor:warning"
|
|
2646
2664
|
}, o)), this.editor.canvas.fire("editor:warning", o);
|
|
2647
2665
|
}
|
|
@@ -2661,7 +2679,7 @@ class ie {
|
|
|
2661
2679
|
* @param options - опции и настройки редактора
|
|
2662
2680
|
*/
|
|
2663
2681
|
constructor(e, t) {
|
|
2664
|
-
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();
|
|
2665
2683
|
}
|
|
2666
2684
|
/**
|
|
2667
2685
|
* Инициализация редактора.
|
|
@@ -2669,7 +2687,7 @@ class ie {
|
|
|
2669
2687
|
* @fires editor:ready
|
|
2670
2688
|
*/
|
|
2671
2689
|
init() {
|
|
2672
|
-
return
|
|
2690
|
+
return p(this, null, function* () {
|
|
2673
2691
|
const {
|
|
2674
2692
|
editorContainerWidth: e,
|
|
2675
2693
|
editorContainerHeight: t,
|
|
@@ -2679,13 +2697,13 @@ class ie {
|
|
|
2679
2697
|
canvasCSSHeight: a,
|
|
2680
2698
|
initialImage: o,
|
|
2681
2699
|
initialStateJSON: d,
|
|
2682
|
-
scaleType:
|
|
2700
|
+
scaleType: r,
|
|
2683
2701
|
_onReadyCallback: l
|
|
2684
2702
|
} = this.options;
|
|
2685
|
-
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) {
|
|
2686
2704
|
const {
|
|
2687
2705
|
source: h,
|
|
2688
|
-
scale: g = `image-${
|
|
2706
|
+
scale: g = `image-${r}`,
|
|
2689
2707
|
withoutSave: u = !0
|
|
2690
2708
|
} = o;
|
|
2691
2709
|
yield this.imageManager.importImage({ source: h, scale: g, withoutSave: u });
|
|
@@ -2849,15 +2867,15 @@ const lt = {
|
|
|
2849
2867
|
deleteObjectsByHotkey: !0,
|
|
2850
2868
|
resetObjectFitByDoubleClick: !0
|
|
2851
2869
|
};
|
|
2852
|
-
function bt(
|
|
2853
|
-
const t =
|
|
2870
|
+
function bt(c, e = {}) {
|
|
2871
|
+
const t = I(I({}, lt), e), s = document.getElementById(c);
|
|
2854
2872
|
if (!s)
|
|
2855
|
-
return Promise.reject(new Error(`Контейнер с ID "${
|
|
2873
|
+
return Promise.reject(new Error(`Контейнер с ID "${c}" не найден.`));
|
|
2856
2874
|
const i = document.createElement("canvas");
|
|
2857
|
-
return i.id = `${
|
|
2875
|
+
return i.id = `${c}-canvas`, s.appendChild(i), t.editorContainer = s, new Promise((n) => {
|
|
2858
2876
|
t._onReadyCallback = n;
|
|
2859
2877
|
const a = new ie(i.id, t);
|
|
2860
|
-
window[
|
|
2878
|
+
window[c] = a;
|
|
2861
2879
|
});
|
|
2862
2880
|
}
|
|
2863
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": [
|