@anu3ev/fabric-image-editor 0.1.55 → 0.1.57
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 +181 -159
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -2,40 +2,40 @@ var fe = Object.defineProperty, je = Object.defineProperties;
|
|
|
2
2
|
var be = Object.getOwnPropertyDescriptors;
|
|
3
3
|
var H = Object.getOwnPropertySymbols;
|
|
4
4
|
var ce = Object.prototype.hasOwnProperty, de = Object.prototype.propertyIsEnumerable;
|
|
5
|
-
var re = (
|
|
5
|
+
var re = (d, e, t) => e in d ? fe(d, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[e] = t, p = (d, e) => {
|
|
6
6
|
for (var t in e || (e = {}))
|
|
7
|
-
ce.call(e, t) && re(
|
|
7
|
+
ce.call(e, t) && re(d, 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(d, t, e[t]);
|
|
11
|
+
return d;
|
|
12
|
+
}, le = (d, e) => je(d, be(e));
|
|
13
|
+
var Y = (d, 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 d)
|
|
16
|
+
ce.call(d, s) && e.indexOf(s) < 0 && (t[s] = d[s]);
|
|
17
|
+
if (d != null && H)
|
|
18
|
+
for (var s of H(d))
|
|
19
|
+
e.indexOf(s) < 0 && de.call(d, s) && (t[s] = d[s]);
|
|
20
20
|
return t;
|
|
21
21
|
};
|
|
22
|
-
var
|
|
23
|
-
var n = (
|
|
22
|
+
var I = (d, e, t) => new Promise((s, i) => {
|
|
23
|
+
var n = (c) => {
|
|
24
24
|
try {
|
|
25
|
-
o(t.next(
|
|
25
|
+
o(t.next(c));
|
|
26
26
|
} catch (r) {
|
|
27
27
|
i(r);
|
|
28
28
|
}
|
|
29
|
-
}, a = (
|
|
29
|
+
}, a = (c) => {
|
|
30
30
|
try {
|
|
31
|
-
o(t.throw(
|
|
31
|
+
o(t.throw(c));
|
|
32
32
|
} catch (r) {
|
|
33
33
|
i(r);
|
|
34
34
|
}
|
|
35
|
-
}, o = (
|
|
36
|
-
o((t = t.apply(
|
|
35
|
+
}, o = (c) => c.done ? s(c.value) : Promise.resolve(c.value).then(n, a);
|
|
36
|
+
o((t = t.apply(d, e)).next());
|
|
37
37
|
});
|
|
38
|
-
import { ActiveSelection as v, util as R, controlsUtils as
|
|
38
|
+
import { ActiveSelection as v, util as R, controlsUtils as pe, InteractiveFabricObject as ye, loadSVGFromURL as Ie, FabricImage as Z, Point as _, Rect as ve, Circle as Ae, Triangle as Se, Group as X, Canvas as Ce, Pattern as Ne } from "fabric";
|
|
39
39
|
import { create as De } from "jsondiffpatch";
|
|
40
40
|
import Le from "diff-match-patch";
|
|
41
41
|
var we = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", L = function() {
|
|
@@ -75,11 +75,11 @@ class z {
|
|
|
75
75
|
copyObjectsByHotkey: n,
|
|
76
76
|
pasteImageFromClipboard: a,
|
|
77
77
|
undoRedoByHotKeys: o,
|
|
78
|
-
selectAllByHotkey:
|
|
78
|
+
selectAllByHotkey: c,
|
|
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 })), c && 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
|
* При массовом выделении объектов удаляем из него залоченные.
|
|
@@ -129,10 +129,10 @@ class z {
|
|
|
129
129
|
// --- Глобальные DOM-обработчики ---
|
|
130
130
|
/**
|
|
131
131
|
* Обработчик изменения размеров окна браузера.
|
|
132
|
-
* Адаптирует канвас к размерам
|
|
132
|
+
* Адаптирует канвас к размерам контейнера, сохраняя позиции объектов.
|
|
133
133
|
*/
|
|
134
134
|
handleContainerResize() {
|
|
135
|
-
this.editor.canvasManager.
|
|
135
|
+
this.editor.canvasManager.updateCanvas();
|
|
136
136
|
}
|
|
137
137
|
/**
|
|
138
138
|
* Обработчик для Ctrl+C (копирование).
|
|
@@ -160,7 +160,7 @@ class z {
|
|
|
160
160
|
* @param event.code — код клавиши
|
|
161
161
|
*/
|
|
162
162
|
handleUndoRedoEvent(e) {
|
|
163
|
-
return
|
|
163
|
+
return I(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(d) {
|
|
328
328
|
return new Worker(
|
|
329
329
|
"" + new URL("assets/worker-Cmho-Hr0.js", import.meta.url).href,
|
|
330
330
|
{
|
|
331
|
-
name:
|
|
331
|
+
name: d == null ? void 0 : d.name
|
|
332
332
|
}
|
|
333
333
|
);
|
|
334
334
|
}
|
|
@@ -379,23 +379,23 @@ class Te {
|
|
|
379
379
|
}
|
|
380
380
|
}
|
|
381
381
|
const N = 12, ke = 2, Q = 8, J = 20, xe = 100, $ = 20, K = 8, Be = 100, q = 32, ee = 1, Ze = "#2B2D33", te = "#3D8BF4", se = "#FFFFFF";
|
|
382
|
-
function W(
|
|
382
|
+
function W(d, e, t, s, i) {
|
|
383
383
|
const n = N, a = ke;
|
|
384
|
-
|
|
384
|
+
d.save(), d.translate(e, t), d.rotate(R.degreesToRadians(i.angle)), d.fillStyle = se, d.strokeStyle = te, d.lineWidth = ee, d.beginPath(), d.roundRect(-12 / 2, -12 / 2, n, n, a), d.fill(), d.stroke(), d.restore();
|
|
385
385
|
}
|
|
386
|
-
function he(
|
|
386
|
+
function he(d, e, t, s, i) {
|
|
387
387
|
const n = Q, a = J, o = xe;
|
|
388
|
-
|
|
388
|
+
d.save(), d.translate(e, t), d.rotate(R.degreesToRadians(i.angle)), d.fillStyle = se, d.strokeStyle = te, d.lineWidth = ee, d.beginPath(), d.roundRect(-8 / 2, -20 / 2, n, a, o), d.fill(), d.stroke(), d.restore();
|
|
389
389
|
}
|
|
390
|
-
function ge(
|
|
390
|
+
function ge(d, e, t, s, i) {
|
|
391
391
|
const n = $, a = K, o = Be;
|
|
392
|
-
|
|
392
|
+
d.save(), d.translate(e, t), d.rotate(R.degreesToRadians(i.angle)), d.fillStyle = se, d.strokeStyle = te, d.lineWidth = ee, d.beginPath(), d.roundRect(-20 / 2, -8 / 2, n, a, o), d.fill(), d.stroke(), d.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(d, e, t, s, i) {
|
|
397
397
|
const a = q / 2;
|
|
398
|
-
|
|
398
|
+
d.save(), d.translate(e, t), d.rotate(R.degreesToRadians(i.angle)), d.fillStyle = Ze, d.beginPath(), d.arc(0, 0, a, 0, 2 * Math.PI), d.fill(), d.drawImage(ue, -16 / 2, -16 / 2, a, a), d.restore();
|
|
399
399
|
}
|
|
400
400
|
const Re = {
|
|
401
401
|
// Угловые точки
|
|
@@ -468,7 +468,7 @@ const Re = {
|
|
|
468
468
|
};
|
|
469
469
|
class He {
|
|
470
470
|
static apply() {
|
|
471
|
-
const e =
|
|
471
|
+
const e = pe.createObjectDefaultControls();
|
|
472
472
|
Object.entries(Re).forEach(([t, s]) => {
|
|
473
473
|
Object.assign(e[t], {
|
|
474
474
|
render: s.render,
|
|
@@ -476,7 +476,7 @@ 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, c) => {
|
|
480
480
|
var l;
|
|
481
481
|
(l = a.target.canvas) == null || l.setCursor("grabbing");
|
|
482
482
|
});
|
|
@@ -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: (d) => I(void 0, null, function* () {
|
|
564
|
+
yield d.clipboardManager.copy(), yield d.clipboardManager.paste();
|
|
565
565
|
}),
|
|
566
|
-
delete: (
|
|
567
|
-
|
|
566
|
+
delete: (d) => {
|
|
567
|
+
d.deletionManager.deleteSelectedObjects();
|
|
568
568
|
},
|
|
569
|
-
lock: (
|
|
570
|
-
|
|
569
|
+
lock: (d) => {
|
|
570
|
+
d.objectLockManager.lockObject();
|
|
571
571
|
},
|
|
572
|
-
unlock: (
|
|
573
|
-
|
|
572
|
+
unlock: (d) => {
|
|
573
|
+
d.objectLockManager.unlockObject();
|
|
574
574
|
},
|
|
575
|
-
bringForward: (
|
|
576
|
-
|
|
575
|
+
bringForward: (d) => {
|
|
576
|
+
d.layerManager.bringForward();
|
|
577
577
|
},
|
|
578
|
-
bringToFront: (
|
|
579
|
-
|
|
578
|
+
bringToFront: (d) => {
|
|
579
|
+
d.layerManager.bringToFront();
|
|
580
580
|
},
|
|
581
|
-
sendToBack: (
|
|
582
|
-
|
|
581
|
+
sendToBack: (d) => {
|
|
582
|
+
d.layerManager.sendToBack();
|
|
583
583
|
},
|
|
584
|
-
sendBackwards: (
|
|
585
|
-
|
|
584
|
+
sendBackwards: (d) => {
|
|
585
|
+
d.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(p(p({}, U), e), {
|
|
597
|
+
style: p(p({}, U.style), e.style || {}),
|
|
598
|
+
btnStyle: p(p({}, U.btnStyle), e.btnStyle || {}),
|
|
599
|
+
icons: p(p({}, U.icons), e.icons || {}),
|
|
600
|
+
handlers: p(p({}, 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, c = document.createElement("button");
|
|
628
|
+
c.innerHTML = n[i] ? `<img src="${n[i]}" title="${s}" />` : s, Object.assign(c.style, a), c.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(c);
|
|
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: c } = e.getCenterPoint(), { top: r, height: l } = e.getBoundingRect(), g = c * 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`,
|
|
@@ -810,15 +810,15 @@ class Je {
|
|
|
810
810
|
* @fires editor:history-state-loaded
|
|
811
811
|
*/
|
|
812
812
|
loadStateFromFullState(e) {
|
|
813
|
-
return
|
|
813
|
+
return I(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
818
|
const o = t.getObjects().find((r) => r.id === "montage-area");
|
|
819
|
-
o && (this.editor.montageArea = o, (n !==
|
|
820
|
-
const
|
|
821
|
-
|
|
819
|
+
o && (this.editor.montageArea = o, (n !== t.getWidth() || a !== t.getHeight()) && s.updateCanvas());
|
|
820
|
+
const c = t.getObjects().find((r) => r.id === "overlay-mask");
|
|
821
|
+
c && (i.overlayMask = c, 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,
|
|
@@ -833,7 +833,7 @@ class Je {
|
|
|
833
833
|
* @fires editor:undo
|
|
834
834
|
*/
|
|
835
835
|
undo() {
|
|
836
|
-
return
|
|
836
|
+
return I(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 I(this, null, function* () {
|
|
874
874
|
if (!this.skipHistory) {
|
|
875
875
|
if (this.currentIndex >= this.patches.length) {
|
|
876
876
|
console.log("Нет состояний для повтора.");
|
|
@@ -921,14 +921,14 @@ class D {
|
|
|
921
921
|
* @returns возвращает Promise с объектом изображения или null в случае ошибки
|
|
922
922
|
*/
|
|
923
923
|
importImage(e) {
|
|
924
|
-
return
|
|
924
|
+
return I(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:
|
|
931
|
+
const { canvas: n, montageArea: a, transformManager: o, historyManager: c, errorManager: r } = this.editor, l = yield this.getContentType(t), h = D.getFormatFromContentType(l), { acceptContentTypes: g, acceptFormats: u } = this;
|
|
932
932
|
if (!this.isAllowedContentType(l)) {
|
|
933
933
|
const m = `Неверный contentType для изображения: ${l}. Ожидается один из: ${this.acceptContentTypes.join(", ")}.`;
|
|
934
934
|
return r.emitError({
|
|
@@ -939,7 +939,7 @@ class D {
|
|
|
939
939
|
data: { source: t, format: h, contentType: l, acceptContentTypes: g, acceptFormats: u }
|
|
940
940
|
}), null;
|
|
941
941
|
}
|
|
942
|
-
|
|
942
|
+
c.suspendHistory();
|
|
943
943
|
try {
|
|
944
944
|
let m, M;
|
|
945
945
|
if (t instanceof File)
|
|
@@ -956,7 +956,7 @@ class D {
|
|
|
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 b = yield
|
|
959
|
+
const b = yield Ie(m);
|
|
960
960
|
M = R.groupSVGElements(b.objects, b.options);
|
|
961
961
|
} else
|
|
962
962
|
M = yield Z.fromURL(m, { crossOrigin: "anonymous" });
|
|
@@ -978,7 +978,7 @@ class D {
|
|
|
978
978
|
const { width: b, height: S } = a, w = this.calculateScaleFactor({ imageObject: M, scaleType: s });
|
|
979
979
|
s === "image-contain" && w < 1 ? o.fitObject({ object: M, type: "contain", withoutSave: !0 }) : s === "image-cover" && (f > b || j > S) && o.fitObject({ object: M, type: "cover", withoutSave: !0 });
|
|
980
980
|
}
|
|
981
|
-
n.add(M), n.centerObject(M), n.setActiveObject(M), n.renderAll(),
|
|
981
|
+
n.add(M), n.centerObject(M), n.setActiveObject(M), n.renderAll(), c.resumeHistory(), i || c.saveState();
|
|
982
982
|
const A = {
|
|
983
983
|
image: M,
|
|
984
984
|
format: h,
|
|
@@ -995,7 +995,7 @@ class D {
|
|
|
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
|
+
}), c.resumeHistory(), null;
|
|
999
999
|
}
|
|
1000
1000
|
});
|
|
1001
1001
|
}
|
|
@@ -1008,7 +1008,7 @@ class D {
|
|
|
1008
1008
|
* @returns возвращает Promise с Blob-объектом уменьшенного изображения
|
|
1009
1009
|
*/
|
|
1010
1010
|
resizeImageToBoundaries(e, t = "max") {
|
|
1011
|
-
return
|
|
1011
|
+
return I(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,13 +1040,13 @@ class D {
|
|
|
1040
1040
|
* @fires editor:canvas-exported
|
|
1041
1041
|
*/
|
|
1042
1042
|
exportCanvasAsImageFile() {
|
|
1043
|
-
return
|
|
1043
|
+
return I(this, arguments, function* (e = {}) {
|
|
1044
1044
|
const {
|
|
1045
1045
|
fileName: t = "image.png",
|
|
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: c } = this.editor;
|
|
1050
1050
|
try {
|
|
1051
1051
|
const r = s === "application/pdf", l = r ? "image/jpg" : s, h = D.getFormatFromContentType(l);
|
|
1052
1052
|
o.setCoords();
|
|
@@ -1084,7 +1084,7 @@ class D {
|
|
|
1084
1084
|
};
|
|
1085
1085
|
return a.fire("editor:canvas-exported", y), y;
|
|
1086
1086
|
}
|
|
1087
|
-
const S = yield createImageBitmap(b), w = yield
|
|
1087
|
+
const S = yield createImageBitmap(b), w = yield c.post(
|
|
1088
1088
|
"toDataURL",
|
|
1089
1089
|
{ format: h, quality: 1, bitmap: S },
|
|
1090
1090
|
[S]
|
|
@@ -1151,14 +1151,14 @@ class D {
|
|
|
1151
1151
|
* @fires editor:object-exported
|
|
1152
1152
|
*/
|
|
1153
1153
|
exportObjectAsImageFile() {
|
|
1154
|
-
return
|
|
1154
|
+
return I(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:
|
|
1161
|
+
} = e, { canvas: o, workerManager: c } = this.editor, r = t || o.getActiveObject();
|
|
1162
1162
|
if (!r)
|
|
1163
1163
|
return this.editor.errorManager.emitError({
|
|
1164
1164
|
origin: "ImageManager",
|
|
@@ -1184,7 +1184,7 @@ class D {
|
|
|
1184
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()), f = yield
|
|
1187
|
+
const M = yield createImageBitmap(r.getElement()), f = yield c.post(
|
|
1188
1188
|
"toDataURL",
|
|
1189
1189
|
{
|
|
1190
1190
|
format: l,
|
|
@@ -1262,7 +1262,7 @@ class D {
|
|
|
1262
1262
|
* @public
|
|
1263
1263
|
*/
|
|
1264
1264
|
getContentType(e) {
|
|
1265
|
-
return
|
|
1265
|
+
return I(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 D {
|
|
|
1273
1273
|
* @public
|
|
1274
1274
|
*/
|
|
1275
1275
|
getContentTypeFromUrl(e) {
|
|
1276
|
-
return
|
|
1276
|
+
return I(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";
|
|
@@ -1376,9 +1376,9 @@ class tt {
|
|
|
1376
1376
|
canvas: n,
|
|
1377
1377
|
montageArea: a,
|
|
1378
1378
|
options: { canvasBackstoreWidth: o }
|
|
1379
|
-
} = this.editor, { width:
|
|
1379
|
+
} = this.editor, { width: c, 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 /
|
|
1381
|
+
const M = l / c, f = r * M;
|
|
1382
1382
|
this.setResolutionHeight(f);
|
|
1383
1383
|
return;
|
|
1384
1384
|
}
|
|
@@ -1406,9 +1406,9 @@ class tt {
|
|
|
1406
1406
|
canvas: n,
|
|
1407
1407
|
montageArea: a,
|
|
1408
1408
|
options: { canvasBackstoreHeight: o }
|
|
1409
|
-
} = this.editor, { width:
|
|
1409
|
+
} = this.editor, { width: c, 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, f =
|
|
1411
|
+
const M = l / r, f = c * M;
|
|
1412
1412
|
this.setResolutionWidth(f);
|
|
1413
1413
|
return;
|
|
1414
1414
|
}
|
|
@@ -1425,12 +1425,12 @@ class tt {
|
|
|
1425
1425
|
* и устанавливает правильный viewportTransform.
|
|
1426
1426
|
*/
|
|
1427
1427
|
centerMontageArea() {
|
|
1428
|
-
var
|
|
1428
|
+
var c;
|
|
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
|
+
}), (c = e.clipPath) == null || c.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, c = (n - n * a) / 2;
|
|
1455
|
+
return { left: o, top: c };
|
|
1456
1456
|
}
|
|
1457
1457
|
/**
|
|
1458
1458
|
* Устанавливаем ширину канваса в backstore (для экспорта)
|
|
@@ -1481,23 +1481,45 @@ class tt {
|
|
|
1481
1481
|
console.log("adaptCanvasToContainer newWidth", n), console.log("adaptCanvasToContainer newHeight", a), e.setDimensions({ width: n, height: a }, { backstoreOnly: !0 });
|
|
1482
1482
|
}
|
|
1483
1483
|
/**
|
|
1484
|
-
* Обновляет размеры канваса
|
|
1485
|
-
*
|
|
1484
|
+
* Обновляет размеры канваса без изменения позиций объектов.
|
|
1485
|
+
* Используется при resize окна браузера для сохранения расположения объектов.
|
|
1486
1486
|
* @fires editor:canvas-updated
|
|
1487
1487
|
*/
|
|
1488
|
-
|
|
1488
|
+
updateCanvas() {
|
|
1489
1489
|
const {
|
|
1490
1490
|
canvas: e,
|
|
1491
|
-
|
|
1492
|
-
transformManager: s,
|
|
1491
|
+
montageArea: t,
|
|
1493
1492
|
montageArea: {
|
|
1494
|
-
width:
|
|
1495
|
-
height:
|
|
1493
|
+
width: s,
|
|
1494
|
+
height: i
|
|
1496
1495
|
}
|
|
1497
|
-
} = this.editor;
|
|
1498
|
-
this.setResolutionWidth(
|
|
1499
|
-
|
|
1500
|
-
|
|
1496
|
+
} = this.editor, n = t.left, a = t.top;
|
|
1497
|
+
this.setResolutionWidth(s, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.setResolutionHeight(i, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.centerMontageArea();
|
|
1498
|
+
const o = t.left - n, c = t.top - a;
|
|
1499
|
+
if (o !== 0 || c !== 0) {
|
|
1500
|
+
const r = e.getActiveObject(), l = [];
|
|
1501
|
+
if ((r == null ? void 0 : r.type) === "activeselection") {
|
|
1502
|
+
const h = r;
|
|
1503
|
+
l.push(...h.getObjects()), e.discardActiveObject();
|
|
1504
|
+
}
|
|
1505
|
+
if (e.getObjects().forEach((h) => {
|
|
1506
|
+
h.id === "montage-area" || h.id === "overlay-mask" || (h.set({
|
|
1507
|
+
left: h.left + o,
|
|
1508
|
+
top: h.top + c
|
|
1509
|
+
}), h.setCoords());
|
|
1510
|
+
}), l.length > 0)
|
|
1511
|
+
if (l.length === 1)
|
|
1512
|
+
e.setActiveObject(l[0]);
|
|
1513
|
+
else {
|
|
1514
|
+
const h = new v(l, {
|
|
1515
|
+
canvas: e
|
|
1516
|
+
});
|
|
1517
|
+
e.setActiveObject(h);
|
|
1518
|
+
}
|
|
1519
|
+
}
|
|
1520
|
+
e.renderAll(), e.fire("editor:canvas-updated", {
|
|
1521
|
+
width: s,
|
|
1522
|
+
height: i
|
|
1501
1523
|
});
|
|
1502
1524
|
}
|
|
1503
1525
|
/**
|
|
@@ -1514,9 +1536,9 @@ class tt {
|
|
|
1514
1536
|
updateCssDimensionsForZoom(e) {
|
|
1515
1537
|
const { canvas: t, montageArea: s } = this.editor, i = s.width * e, n = s.height * e, a = t.wrapperEl.parentNode;
|
|
1516
1538
|
if (!(a instanceof HTMLElement)) return;
|
|
1517
|
-
const o = i <= a.clientWidth ? "100%" : i,
|
|
1539
|
+
const o = i <= a.clientWidth ? "100%" : i, c = n <= a.clientHeight ? "100%" : n;
|
|
1518
1540
|
t.setDimensions(
|
|
1519
|
-
{ width: o, height:
|
|
1541
|
+
{ width: o, height: c },
|
|
1520
1542
|
{ cssOnly: !0 }
|
|
1521
1543
|
);
|
|
1522
1544
|
}
|
|
@@ -1625,9 +1647,9 @@ class tt {
|
|
|
1625
1647
|
return;
|
|
1626
1648
|
}
|
|
1627
1649
|
if (isNaN(s)) return;
|
|
1628
|
-
const
|
|
1650
|
+
const c = `${s}px`;
|
|
1629
1651
|
a.forEach((r) => {
|
|
1630
|
-
r.style[o] =
|
|
1652
|
+
r.style[o] = c;
|
|
1631
1653
|
}), i.fire(`editor:display-${e}-${o}-changed`, {
|
|
1632
1654
|
element: e,
|
|
1633
1655
|
value: s
|
|
@@ -1648,7 +1670,7 @@ class tt {
|
|
|
1648
1670
|
transformManager: a,
|
|
1649
1671
|
options: {
|
|
1650
1672
|
montageAreaWidth: o,
|
|
1651
|
-
montageAreaHeight:
|
|
1673
|
+
montageAreaHeight: c
|
|
1652
1674
|
}
|
|
1653
1675
|
} = this.editor, r = e || i.getActiveObject();
|
|
1654
1676
|
if (!r || r.type !== "image" && r.format !== "svg") return;
|
|
@@ -1661,7 +1683,7 @@ class tt {
|
|
|
1661
1683
|
} = n, f = l / m, j = h / M, A = Math.max(f, j);
|
|
1662
1684
|
g = m * A, u = M * A;
|
|
1663
1685
|
}
|
|
1664
|
-
this.setResolutionWidth(g, { withoutSave: !0 }), this.setResolutionHeight(u, { withoutSave: !0 }), (l > o || h >
|
|
1686
|
+
this.setResolutionWidth(g, { withoutSave: !0 }), this.setResolutionHeight(u, { withoutSave: !0 }), (l > o || h > c) && 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
1687
|
object: r,
|
|
1666
1688
|
width: g,
|
|
1667
1689
|
height: u,
|
|
@@ -1716,8 +1738,8 @@ class st {
|
|
|
1716
1738
|
* @param scale - Желаемый масштаб относительно размеров контейнера редактора.
|
|
1717
1739
|
*/
|
|
1718
1740
|
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(
|
|
1741
|
+
const { canvas: t } = this.editor, s = t.editorContainer, i = s.clientWidth, n = s.clientHeight, { width: a, height: o } = this.editor.montageArea, c = i / a * e, r = n / o * e;
|
|
1742
|
+
this.defaultZoom = Math.min(c, r);
|
|
1721
1743
|
const { defaultZoom: l, maxZoomFactor: h, minZoom: g, maxZoom: u } = this;
|
|
1722
1744
|
this.minZoom = Math.min(l / h, g), this.maxZoom = Math.max(l * h, u), this.setZoom();
|
|
1723
1745
|
}
|
|
@@ -1733,7 +1755,7 @@ class st {
|
|
|
1733
1755
|
zoom(e = qe, t = {}) {
|
|
1734
1756
|
var g, u;
|
|
1735
1757
|
if (!e) return;
|
|
1736
|
-
const { minZoom: s, maxZoom: i } = this, { canvas: n } = this.editor, a = n.getZoom(), o = n.getCenterPoint(),
|
|
1758
|
+
const { minZoom: s, maxZoom: i } = this, { canvas: n } = this.editor, a = n.getZoom(), o = n.getCenterPoint(), c = (g = t.pointX) != null ? g : o.x, r = (u = t.pointY) != null ? u : o.y, l = new _(c, r);
|
|
1737
1759
|
let h = Number((a + Number(e)).toFixed(2));
|
|
1738
1760
|
h > i && (h = i), h < s && (h = s), n.zoomToPoint(l, h), console.log({
|
|
1739
1761
|
currentZoom: a,
|
|
@@ -1855,11 +1877,11 @@ class st {
|
|
|
1855
1877
|
const { canvas: n, historyManager: a } = this.editor, o = e || n.getActiveObject();
|
|
1856
1878
|
if (o) {
|
|
1857
1879
|
if (o instanceof v && !i) {
|
|
1858
|
-
const
|
|
1859
|
-
n.discardActiveObject(),
|
|
1880
|
+
const c = o.getObjects();
|
|
1881
|
+
n.discardActiveObject(), c.forEach((l) => {
|
|
1860
1882
|
this._fitSingleObject(l, t);
|
|
1861
1883
|
});
|
|
1862
|
-
const r = new v(
|
|
1884
|
+
const r = new v(c, { canvas: n });
|
|
1863
1885
|
n.setActiveObject(r);
|
|
1864
1886
|
} else
|
|
1865
1887
|
this._fitSingleObject(o, t);
|
|
@@ -1878,11 +1900,11 @@ class st {
|
|
|
1878
1900
|
* @private
|
|
1879
1901
|
*/
|
|
1880
1902
|
_fitSingleObject(e, t) {
|
|
1881
|
-
const { canvas: s, montageArea: i } = this.editor, { width: n, height: a, scaleX: o = 1, scaleY:
|
|
1903
|
+
const { canvas: s, montageArea: i } = this.editor, { width: n, height: a, scaleX: o = 1, scaleY: c = 1, angle: r = 0 } = e, l = n * Math.abs(o), h = a * Math.abs(c), 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
1904
|
let b;
|
|
1883
1905
|
t === "contain" ? b = Math.min(j / M, A / f) : b = Math.max(j / M, A / f), e.set({
|
|
1884
1906
|
scaleX: o * b,
|
|
1885
|
-
scaleY:
|
|
1907
|
+
scaleY: c * b
|
|
1886
1908
|
}), s.centerObject(e);
|
|
1887
1909
|
}
|
|
1888
1910
|
/**
|
|
@@ -1907,7 +1929,7 @@ class st {
|
|
|
1907
1929
|
montageArea: n,
|
|
1908
1930
|
imageManager: a,
|
|
1909
1931
|
historyManager: o,
|
|
1910
|
-
options: { scaleType:
|
|
1932
|
+
options: { scaleType: c }
|
|
1911
1933
|
} = this.editor, r = e || i.getActiveObject();
|
|
1912
1934
|
if (!r || r.locked) return;
|
|
1913
1935
|
if (o.suspendHistory(), r.type === "image" || r.format === "svg" || r.set({
|
|
@@ -1921,9 +1943,9 @@ class st {
|
|
|
1921
1943
|
else {
|
|
1922
1944
|
const { width: h, height: g } = n, { width: u, height: m } = r, M = a.calculateScaleFactor({
|
|
1923
1945
|
imageObject: r,
|
|
1924
|
-
scaleType:
|
|
1946
|
+
scaleType: c
|
|
1925
1947
|
});
|
|
1926
|
-
|
|
1948
|
+
c === "contain" && M < 1 || c === "cover" && (u > h || m > g) ? this.fitObject({ object: r, withoutSave: !0, fitAsOneObject: !0 }) : r.set({ scaleX: 1, scaleY: 1 });
|
|
1927
1949
|
}
|
|
1928
1950
|
r.set({ flipX: !1, flipY: !1, angle: 0 }), i.centerObject(r), i.renderAll(), o.resumeHistory(), s || o.saveState(), i.fire("editor:object-reset", {
|
|
1929
1951
|
object: r,
|
|
@@ -2045,9 +2067,9 @@ class P {
|
|
|
2045
2067
|
const o = e || s.getActiveObject();
|
|
2046
2068
|
if (o) {
|
|
2047
2069
|
if (o instanceof v) {
|
|
2048
|
-
const
|
|
2049
|
-
for (let r =
|
|
2050
|
-
s.sendObjectToBack(
|
|
2070
|
+
const c = o.getObjects();
|
|
2071
|
+
for (let r = c.length - 1; r >= 0; r -= 1)
|
|
2072
|
+
s.sendObjectToBack(c[r]);
|
|
2051
2073
|
} else
|
|
2052
2074
|
s.sendObjectToBack(o);
|
|
2053
2075
|
s.sendObjectToBack(i), a && s.sendObjectToBack(a), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:object-send-to-back", {
|
|
@@ -2085,15 +2107,15 @@ class P {
|
|
|
2085
2107
|
const s = e.getObjects(), i = t.getObjects(), n = i.map((o) => s.indexOf(o));
|
|
2086
2108
|
let a = -1;
|
|
2087
2109
|
for (let o = 0; o < s.length; o += 1) {
|
|
2088
|
-
const
|
|
2089
|
-
if (!i.includes(
|
|
2110
|
+
const c = s[o];
|
|
2111
|
+
if (!i.includes(c) && n.some((r) => o > r)) {
|
|
2090
2112
|
a = o;
|
|
2091
2113
|
break;
|
|
2092
2114
|
}
|
|
2093
2115
|
}
|
|
2094
|
-
a !== -1 && i.map((
|
|
2095
|
-
const r = s.indexOf(
|
|
2096
|
-
r < a && (e.moveObjectTo(
|
|
2116
|
+
a !== -1 && i.map((c) => ({ obj: c, index: s.indexOf(c) })).sort((c, r) => r.index - c.index).forEach((c) => {
|
|
2117
|
+
const r = s.indexOf(c.obj);
|
|
2118
|
+
r < a && (e.moveObjectTo(c.obj, a), a = r);
|
|
2097
2119
|
});
|
|
2098
2120
|
}
|
|
2099
2121
|
/**
|
|
@@ -2105,15 +2127,15 @@ class P {
|
|
|
2105
2127
|
const s = e.getObjects(), i = t.getObjects(), n = i.map((o) => s.indexOf(o));
|
|
2106
2128
|
let a = -1;
|
|
2107
2129
|
for (let o = s.length - 1; o >= 0; o -= 1) {
|
|
2108
|
-
const
|
|
2109
|
-
if (!i.includes(
|
|
2130
|
+
const c = s[o];
|
|
2131
|
+
if (!i.includes(c) && n.some((r) => o < r)) {
|
|
2110
2132
|
a = o;
|
|
2111
2133
|
break;
|
|
2112
2134
|
}
|
|
2113
2135
|
}
|
|
2114
|
-
a !== -1 && i.map((
|
|
2115
|
-
const r = s.indexOf(
|
|
2116
|
-
r > a && (e.moveObjectTo(
|
|
2136
|
+
a !== -1 && i.map((c) => ({ obj: c, index: s.indexOf(c) })).sort((c, r) => c.index - r.index).forEach((c) => {
|
|
2137
|
+
const r = s.indexOf(c.obj);
|
|
2138
|
+
r > a && (e.moveObjectTo(c.obj, a), a = r);
|
|
2117
2139
|
});
|
|
2118
2140
|
}
|
|
2119
2141
|
}
|
|
@@ -2141,7 +2163,7 @@ class nt {
|
|
|
2141
2163
|
* @param flags.withoutSelection - Не выделять объект
|
|
2142
2164
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2143
2165
|
*/
|
|
2144
|
-
addRectangle(l = {}, { withoutSelection:
|
|
2166
|
+
addRectangle(l = {}, { withoutSelection: c, withoutAdding: r } = {}) {
|
|
2145
2167
|
var h = l, {
|
|
2146
2168
|
id: e = `rect-${L()}`,
|
|
2147
2169
|
left: t,
|
|
@@ -2157,7 +2179,7 @@ class nt {
|
|
|
2157
2179
|
"height",
|
|
2158
2180
|
"fill"
|
|
2159
2181
|
]);
|
|
2160
|
-
const { canvas: g } = this.editor, u = new ve(
|
|
2182
|
+
const { canvas: g } = this.editor, u = new ve(p({
|
|
2161
2183
|
id: e,
|
|
2162
2184
|
left: t,
|
|
2163
2185
|
top: s,
|
|
@@ -2165,7 +2187,7 @@ class nt {
|
|
|
2165
2187
|
height: n,
|
|
2166
2188
|
fill: a
|
|
2167
2189
|
}, o));
|
|
2168
|
-
return !t && !s && g.centerObject(u), r || (g.add(u),
|
|
2190
|
+
return !t && !s && g.centerObject(u), r || (g.add(u), c || g.setActiveObject(u), g.renderAll()), u;
|
|
2169
2191
|
}
|
|
2170
2192
|
/**
|
|
2171
2193
|
* Добавление круга
|
|
@@ -2183,7 +2205,7 @@ class nt {
|
|
|
2183
2205
|
* @param flags.withoutSelection - Не выделять объект
|
|
2184
2206
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2185
2207
|
*/
|
|
2186
|
-
addCircle(r = {}, { withoutSelection: o, withoutAdding:
|
|
2208
|
+
addCircle(r = {}, { withoutSelection: o, withoutAdding: c } = {}) {
|
|
2187
2209
|
var l = r, {
|
|
2188
2210
|
id: e = `circle-${L()}`,
|
|
2189
2211
|
left: t,
|
|
@@ -2197,14 +2219,14 @@ class nt {
|
|
|
2197
2219
|
"radius",
|
|
2198
2220
|
"fill"
|
|
2199
2221
|
]);
|
|
2200
|
-
const { canvas: h } = this.editor, g = new Ae(
|
|
2222
|
+
const { canvas: h } = this.editor, g = new Ae(p({
|
|
2201
2223
|
id: e,
|
|
2202
2224
|
left: t,
|
|
2203
2225
|
top: s,
|
|
2204
2226
|
fill: n,
|
|
2205
2227
|
radius: i
|
|
2206
2228
|
}, a));
|
|
2207
|
-
return !t && !s && h.centerObject(g),
|
|
2229
|
+
return !t && !s && h.centerObject(g), c || (h.add(g), o || h.setActiveObject(g), h.renderAll()), g;
|
|
2208
2230
|
}
|
|
2209
2231
|
/**
|
|
2210
2232
|
* Добавление треугольника
|
|
@@ -2223,7 +2245,7 @@ class nt {
|
|
|
2223
2245
|
* @param flags.withoutSelection - Не выделять объект
|
|
2224
2246
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2225
2247
|
*/
|
|
2226
|
-
addTriangle(l = {}, { withoutSelection:
|
|
2248
|
+
addTriangle(l = {}, { withoutSelection: c, withoutAdding: r } = {}) {
|
|
2227
2249
|
var h = l, {
|
|
2228
2250
|
id: e = `triangle-${L()}`,
|
|
2229
2251
|
left: t,
|
|
@@ -2239,7 +2261,7 @@ class nt {
|
|
|
2239
2261
|
"height",
|
|
2240
2262
|
"fill"
|
|
2241
2263
|
]);
|
|
2242
|
-
const { canvas: g } = this.editor, u = new Se(
|
|
2264
|
+
const { canvas: g } = this.editor, u = new Se(p({
|
|
2243
2265
|
id: e,
|
|
2244
2266
|
left: t,
|
|
2245
2267
|
top: s,
|
|
@@ -2247,7 +2269,7 @@ class nt {
|
|
|
2247
2269
|
width: i,
|
|
2248
2270
|
height: n
|
|
2249
2271
|
}, o));
|
|
2250
|
-
return !t && !s && g.centerObject(u), r || (g.add(u),
|
|
2272
|
+
return !t && !s && g.centerObject(u), r || (g.add(u), c || g.setActiveObject(u), g.renderAll()), u;
|
|
2251
2273
|
}
|
|
2252
2274
|
}
|
|
2253
2275
|
class at {
|
|
@@ -2288,9 +2310,9 @@ class at {
|
|
|
2288
2310
|
}), this._cloneAndFire(e, s);
|
|
2289
2311
|
return;
|
|
2290
2312
|
}
|
|
2291
|
-
const n = s.toCanvasElement().toDataURL(), a = n.slice(5).split(";")[0], o = n.split(",")[1],
|
|
2292
|
-
for (let g = 0; g <
|
|
2293
|
-
r[g] =
|
|
2313
|
+
const n = s.toCanvasElement().toDataURL(), a = n.slice(5).split(";")[0], o = n.split(",")[1], c = atob(o), r = new Uint8Array(c.length);
|
|
2314
|
+
for (let g = 0; g < c.length; g += 1)
|
|
2315
|
+
r[g] = c.charCodeAt(g);
|
|
2294
2316
|
const l = new Blob([r.buffer], { type: a }), h = new ClipboardItem({ [a]: l });
|
|
2295
2317
|
navigator.clipboard.write([h]).catch((g) => {
|
|
2296
2318
|
t.emitWarning({
|
|
@@ -2332,10 +2354,10 @@ class at {
|
|
|
2332
2354
|
if (i.type !== "text/html") {
|
|
2333
2355
|
const o = i.getAsFile();
|
|
2334
2356
|
if (!o) return;
|
|
2335
|
-
const
|
|
2336
|
-
|
|
2357
|
+
const c = new FileReader();
|
|
2358
|
+
c.onload = (r) => {
|
|
2337
2359
|
r.target && this.editor.imageManager.importImage({ source: r.target.result });
|
|
2338
|
-
},
|
|
2360
|
+
}, c.readAsDataURL(o);
|
|
2339
2361
|
return;
|
|
2340
2362
|
}
|
|
2341
2363
|
const n = e.getData("text/html");
|
|
@@ -2353,7 +2375,7 @@ class at {
|
|
|
2353
2375
|
* @fires editor:object-pasted
|
|
2354
2376
|
*/
|
|
2355
2377
|
paste() {
|
|
2356
|
-
return
|
|
2378
|
+
return I(this, null, function* () {
|
|
2357
2379
|
const { canvas: e } = this.editor;
|
|
2358
2380
|
if (!this.clipboard) return;
|
|
2359
2381
|
const t = yield this.clipboard.clone(["format"]);
|
|
@@ -2452,7 +2474,7 @@ class ot {
|
|
|
2452
2474
|
const n = e || s.getActiveObject();
|
|
2453
2475
|
if (!n || !(n instanceof v)) return;
|
|
2454
2476
|
const a = n.getObjects(), o = new X(a);
|
|
2455
|
-
a.forEach((
|
|
2477
|
+
a.forEach((c) => s.remove(c)), o.set("id", `${o.type}-${L()}`), s.add(o), s.setActiveObject(o), s.renderAll(), i.resumeHistory(), t || i.saveState(), s.fire("editor:objects-grouped", {
|
|
2456
2478
|
object: n,
|
|
2457
2479
|
group: o,
|
|
2458
2480
|
withoutSave: t
|
|
@@ -2474,7 +2496,7 @@ class ot {
|
|
|
2474
2496
|
const n = e || s.getActiveObject();
|
|
2475
2497
|
if (!(n instanceof X)) return;
|
|
2476
2498
|
const a = n.removeAll();
|
|
2477
|
-
s.remove(n), a.forEach((
|
|
2499
|
+
s.remove(n), a.forEach((c) => s.add(c));
|
|
2478
2500
|
const o = new v(a, {
|
|
2479
2501
|
canvas: s
|
|
2480
2502
|
});
|
|
@@ -2631,7 +2653,7 @@ class V {
|
|
|
2631
2653
|
message: a,
|
|
2632
2654
|
data: i
|
|
2633
2655
|
};
|
|
2634
|
-
this._buffer.push(
|
|
2656
|
+
this._buffer.push(p({
|
|
2635
2657
|
type: "editor:error"
|
|
2636
2658
|
}, o)), this.editor.canvas.fire("editor:error", o);
|
|
2637
2659
|
}
|
|
@@ -2659,7 +2681,7 @@ class V {
|
|
|
2659
2681
|
message: a,
|
|
2660
2682
|
data: n
|
|
2661
2683
|
};
|
|
2662
|
-
this._buffer.push(
|
|
2684
|
+
this._buffer.push(p({
|
|
2663
2685
|
type: "editor:warning"
|
|
2664
2686
|
}, o)), this.editor.canvas.fire("editor:warning", o);
|
|
2665
2687
|
}
|
|
@@ -2687,7 +2709,7 @@ class ie {
|
|
|
2687
2709
|
* @fires editor:ready
|
|
2688
2710
|
*/
|
|
2689
2711
|
init() {
|
|
2690
|
-
return
|
|
2712
|
+
return I(this, null, function* () {
|
|
2691
2713
|
const {
|
|
2692
2714
|
editorContainerWidth: e,
|
|
2693
2715
|
editorContainerHeight: t,
|
|
@@ -2696,7 +2718,7 @@ class ie {
|
|
|
2696
2718
|
canvasCSSWidth: n,
|
|
2697
2719
|
canvasCSSHeight: a,
|
|
2698
2720
|
initialImage: o,
|
|
2699
|
-
initialStateJSON:
|
|
2721
|
+
initialStateJSON: c,
|
|
2700
2722
|
scaleType: r,
|
|
2701
2723
|
_onReadyCallback: l
|
|
2702
2724
|
} = this.options;
|
|
@@ -2709,7 +2731,7 @@ class ie {
|
|
|
2709
2731
|
yield this.imageManager.importImage({ source: h, scale: g, withoutSave: u });
|
|
2710
2732
|
} else
|
|
2711
2733
|
this.canvasManager.setDefaultScale({ withoutSave: !0 });
|
|
2712
|
-
|
|
2734
|
+
c && this.historyManager.loadStateFromFullState(c), this.historyManager.saveState(), console.log("editor:ready"), this.canvas.fire("editor:ready", this), typeof l == "function" && l(this);
|
|
2713
2735
|
});
|
|
2714
2736
|
}
|
|
2715
2737
|
/**
|
|
@@ -2867,15 +2889,15 @@ const lt = {
|
|
|
2867
2889
|
deleteObjectsByHotkey: !0,
|
|
2868
2890
|
resetObjectFitByDoubleClick: !0
|
|
2869
2891
|
};
|
|
2870
|
-
function bt(
|
|
2871
|
-
const t =
|
|
2892
|
+
function bt(d, e = {}) {
|
|
2893
|
+
const t = p(p({}, lt), e), s = document.getElementById(d);
|
|
2872
2894
|
if (!s)
|
|
2873
|
-
return Promise.reject(new Error(`Контейнер с ID "${
|
|
2895
|
+
return Promise.reject(new Error(`Контейнер с ID "${d}" не найден.`));
|
|
2874
2896
|
const i = document.createElement("canvas");
|
|
2875
|
-
return i.id = `${
|
|
2897
|
+
return i.id = `${d}-canvas`, s.appendChild(i), t.editorContainer = s, new Promise((n) => {
|
|
2876
2898
|
t._onReadyCallback = n;
|
|
2877
2899
|
const a = new ie(i.id, t);
|
|
2878
|
-
window[
|
|
2900
|
+
window[d] = a;
|
|
2879
2901
|
});
|
|
2880
2902
|
}
|
|
2881
2903
|
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.57",
|
|
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": [
|