@anu3ev/fabric-image-editor 0.1.11 → 0.1.13
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 +320 -216
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ActiveSelection as
|
|
1
|
+
import { ActiveSelection as z, util as U, controlsUtils as Oe, InteractiveFabricObject as Te, loadSVGFromURL as Ee, FabricImage as de, Point as ke, Rect as xe, Circle as Be, Triangle as Ze, Group as ze, Pattern as Ue, Canvas as Pe } from "fabric";
|
|
2
2
|
import { create as Ye } from "jsondiffpatch";
|
|
3
3
|
var He = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", I = function() {
|
|
4
4
|
for (var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 21, t = "", a = crypto.getRandomValues(new Uint8Array(e |= 0)); e--; )
|
|
@@ -28,7 +28,7 @@ function We(o) {
|
|
|
28
28
|
});
|
|
29
29
|
};
|
|
30
30
|
}
|
|
31
|
-
class
|
|
31
|
+
class Z {
|
|
32
32
|
/**
|
|
33
33
|
* Конструктор принимает редактор и опции.
|
|
34
34
|
* @param {Object} params
|
|
@@ -49,7 +49,7 @@ class B {
|
|
|
49
49
|
editor: t,
|
|
50
50
|
options: a = {}
|
|
51
51
|
} = e;
|
|
52
|
-
this.editor = t, this.canvas = t.canvas, this.options = a, this.isUndoRedoKeyPressed = !1, this.handleAdaptCanvasToContainerBound =
|
|
52
|
+
this.editor = t, this.canvas = t.canvas, this.options = a, this.isUndoRedoKeyPressed = !1, this.handleAdaptCanvasToContainerBound = Z.debounce(this.handleAdaptCanvasToContainer.bind(this), 500), this.handleCopyEventBound = this.handleCopyEvent.bind(this), this.handlePasteEventBound = this.handlePasteEvent.bind(this), this.handleUndoRedoEventBound = this.handleUndoRedoEvent.bind(this), this.handleUndoRedoKeyUpBound = this.handleUndoRedoKeyUp.bind(this), this.handleSelectAllEventBound = this.handleSelectAllEvent.bind(this), this.handleDeleteObjectsEventBound = this.handleDeleteObjectsEvent.bind(this), this.handleObjectModifiedHistoryBound = Z.debounce(this.handleObjectModifiedHistory.bind(this), 300), this.handleObjectRotatingHistoryBound = Z.debounce(this.handleObjectRotatingHistory.bind(this), 300), this.handleObjectAddedHistoryBound = this.handleObjectAddedHistory.bind(this), this.handleObjectRemovedHistoryBound = this.handleObjectRemovedHistory.bind(this), this.handleOverlayUpdateBound = this.handleOverlayUpdate.bind(this), this.handleCanvasDragStartBound = this.handleCanvasDragStart.bind(this), this.handleCanvasDraggingBound = this.handleCanvasDragging.bind(this), this.handleCanvasDragEndBound = this.handleCanvasDragEnd.bind(this), this.handleMouseWheelZoomBound = this.handleMouseWheelZoom.bind(this), this.handleBringToFrontBound = this.handleBringToFront.bind(this), this.handleResetObjectFitBound = this.handleResetObjectFit.bind(this), this.handleLockedSelectionBound = this._filterLockedSelection.bind(this), this.init();
|
|
53
53
|
}
|
|
54
54
|
/**
|
|
55
55
|
* Инициализация всех обработчиков согласно опциям.
|
|
@@ -103,7 +103,7 @@ class B {
|
|
|
103
103
|
this.canvas.setActiveObject(n[0]);
|
|
104
104
|
return;
|
|
105
105
|
}
|
|
106
|
-
var i = new
|
|
106
|
+
var i = new z(n, {
|
|
107
107
|
canvas: this.canvas
|
|
108
108
|
});
|
|
109
109
|
this.canvas.setActiveObject(i), this.canvas.requestRenderAll();
|
|
@@ -176,6 +176,8 @@ class B {
|
|
|
176
176
|
* @param {Object} event — объект события
|
|
177
177
|
* @param {Object} event.clipboardData — данные из буфера обмена
|
|
178
178
|
* @param {Array} event.clipboardData.items — элементы буфера обмена
|
|
179
|
+
*
|
|
180
|
+
* TODO: Попробовать вынести методы в классы-менеджеры.
|
|
179
181
|
*/
|
|
180
182
|
handlePasteEvent(e) {
|
|
181
183
|
var t, {
|
|
@@ -183,25 +185,27 @@ class B {
|
|
|
183
185
|
} = e;
|
|
184
186
|
if (a != null && (t = a.items) !== null && t !== void 0 && t.length) {
|
|
185
187
|
var {
|
|
186
|
-
|
|
187
|
-
} =
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
var s =
|
|
192
|
-
|
|
188
|
+
imageManager: r
|
|
189
|
+
} = this.editor, {
|
|
190
|
+
items: n
|
|
191
|
+
} = a, i = n[n.length - 1];
|
|
192
|
+
if (i.type.indexOf("image") !== -1) {
|
|
193
|
+
var s = i.getAsFile();
|
|
194
|
+
if (!s) return;
|
|
195
|
+
var c = new FileReader();
|
|
196
|
+
c.onload = (g) => {
|
|
193
197
|
this.editor.imageManager.importImage({
|
|
194
|
-
source:
|
|
198
|
+
source: g.target.result
|
|
195
199
|
});
|
|
196
|
-
},
|
|
200
|
+
}, c.readAsDataURL(s);
|
|
197
201
|
return;
|
|
198
202
|
}
|
|
199
|
-
var
|
|
200
|
-
if (
|
|
201
|
-
var
|
|
202
|
-
if (
|
|
203
|
-
|
|
204
|
-
source:
|
|
203
|
+
var u = a.getData("text/html");
|
|
204
|
+
if (u) {
|
|
205
|
+
var l = new DOMParser(), d = l.parseFromString(u, "text/html"), h = d.querySelector("img");
|
|
206
|
+
if (h != null && h.src) {
|
|
207
|
+
r.importImage({
|
|
208
|
+
source: h.src
|
|
205
209
|
});
|
|
206
210
|
return;
|
|
207
211
|
}
|
|
@@ -440,50 +444,50 @@ class Re {
|
|
|
440
444
|
this.worker.terminate();
|
|
441
445
|
}
|
|
442
446
|
}
|
|
443
|
-
var p = 12, Ve = 2,
|
|
444
|
-
function
|
|
447
|
+
var p = 12, Ve = 2, X = 8, Q = 20, Fe = 100, J = 20, K = 8, Ge = 100, $ = 32, q = 1, Xe = "#2B2D33", ee = "#3D8BF4", te = "#FFFFFF";
|
|
448
|
+
function Y(o, e, t, a, r) {
|
|
445
449
|
var n = p, i = Ve;
|
|
446
|
-
o.save(), o.translate(e, t), o.rotate(
|
|
450
|
+
o.save(), o.translate(e, t), o.rotate(U.degreesToRadians(r.angle)), o.fillStyle = te, o.strokeStyle = ee, o.lineWidth = q, o.beginPath(), o.roundRect(-12 / 2, -12 / 2, n, n, i), o.fill(), o.stroke(), o.restore();
|
|
447
451
|
}
|
|
448
452
|
function he(o, e, t, a, r) {
|
|
449
|
-
var n =
|
|
450
|
-
o.save(), o.translate(e, t), o.rotate(
|
|
453
|
+
var n = X, i = Q, s = Fe;
|
|
454
|
+
o.save(), o.translate(e, t), o.rotate(U.degreesToRadians(r.angle)), o.fillStyle = te, o.strokeStyle = ee, o.lineWidth = q, o.beginPath(), o.roundRect(-8 / 2, -20 / 2, n, i, s), o.fill(), o.stroke(), o.restore();
|
|
451
455
|
}
|
|
452
456
|
function ge(o, e, t, a, r) {
|
|
453
|
-
var n =
|
|
454
|
-
o.save(), o.translate(e, t), o.rotate(
|
|
457
|
+
var n = J, i = K, s = Ge;
|
|
458
|
+
o.save(), o.translate(e, t), o.rotate(U.degreesToRadians(r.angle)), o.fillStyle = te, o.strokeStyle = ee, o.lineWidth = q, o.beginPath(), o.roundRect(-20 / 2, -8 / 2, n, i, s), o.fill(), o.stroke(), o.restore();
|
|
455
459
|
}
|
|
456
460
|
var Qe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", Ae = new Image();
|
|
457
461
|
Ae.src = Qe;
|
|
458
462
|
function Je(o, e, t, a, r) {
|
|
459
|
-
var n =
|
|
460
|
-
o.save(), o.translate(e, t), o.rotate(
|
|
463
|
+
var n = $, i = n / 2;
|
|
464
|
+
o.save(), o.translate(e, t), o.rotate(U.degreesToRadians(r.angle)), o.fillStyle = Xe, o.beginPath(), o.arc(0, 0, i, 0, 2 * Math.PI), o.fill(), o.drawImage(Ae, -16 / 2, -16 / 2, i, i), o.restore();
|
|
461
465
|
}
|
|
462
466
|
var Ke = {
|
|
463
467
|
// Угловые точки
|
|
464
468
|
tl: {
|
|
465
|
-
render:
|
|
469
|
+
render: Y,
|
|
466
470
|
sizeX: p,
|
|
467
471
|
sizeY: p,
|
|
468
472
|
offsetX: 0,
|
|
469
473
|
offsetY: 0
|
|
470
474
|
},
|
|
471
475
|
tr: {
|
|
472
|
-
render:
|
|
476
|
+
render: Y,
|
|
473
477
|
sizeX: p,
|
|
474
478
|
sizeY: p,
|
|
475
479
|
offsetX: 0,
|
|
476
480
|
offsetY: 0
|
|
477
481
|
},
|
|
478
482
|
bl: {
|
|
479
|
-
render:
|
|
483
|
+
render: Y,
|
|
480
484
|
sizeX: p,
|
|
481
485
|
sizeY: p,
|
|
482
486
|
offsetX: 0,
|
|
483
487
|
offsetY: 0
|
|
484
488
|
},
|
|
485
489
|
br: {
|
|
486
|
-
render:
|
|
490
|
+
render: Y,
|
|
487
491
|
sizeX: p,
|
|
488
492
|
sizeY: p,
|
|
489
493
|
offsetX: 0,
|
|
@@ -492,38 +496,38 @@ var Ke = {
|
|
|
492
496
|
// Середина вертикалей
|
|
493
497
|
ml: {
|
|
494
498
|
render: he,
|
|
495
|
-
sizeX:
|
|
496
|
-
sizeY:
|
|
499
|
+
sizeX: X,
|
|
500
|
+
sizeY: Q,
|
|
497
501
|
offsetX: 0,
|
|
498
502
|
offsetY: 0
|
|
499
503
|
},
|
|
500
504
|
mr: {
|
|
501
505
|
render: he,
|
|
502
|
-
sizeX:
|
|
503
|
-
sizeY:
|
|
506
|
+
sizeX: X,
|
|
507
|
+
sizeY: Q,
|
|
504
508
|
offsetX: 0,
|
|
505
509
|
offsetY: 0
|
|
506
510
|
},
|
|
507
511
|
// Середина горизонталей
|
|
508
512
|
mt: {
|
|
509
513
|
render: ge,
|
|
510
|
-
sizeX:
|
|
511
|
-
sizeY:
|
|
514
|
+
sizeX: J,
|
|
515
|
+
sizeY: K,
|
|
512
516
|
offsetX: 0,
|
|
513
517
|
offsetY: 0
|
|
514
518
|
},
|
|
515
519
|
mb: {
|
|
516
520
|
render: ge,
|
|
517
|
-
sizeX:
|
|
518
|
-
sizeY:
|
|
521
|
+
sizeX: J,
|
|
522
|
+
sizeY: K,
|
|
519
523
|
offsetX: 0,
|
|
520
524
|
offsetY: 0
|
|
521
525
|
},
|
|
522
526
|
// Специальный «rotate» контрол
|
|
523
527
|
mtr: {
|
|
524
528
|
render: Je,
|
|
525
|
-
sizeX:
|
|
526
|
-
sizeY:
|
|
529
|
+
sizeX: $,
|
|
530
|
+
sizeY: $,
|
|
527
531
|
offsetX: 0,
|
|
528
532
|
offsetY: -32
|
|
529
533
|
}
|
|
@@ -567,7 +571,7 @@ function st(o) {
|
|
|
567
571
|
});
|
|
568
572
|
};
|
|
569
573
|
}
|
|
570
|
-
const
|
|
574
|
+
const k = {
|
|
571
575
|
style: {
|
|
572
576
|
position: "absolute",
|
|
573
577
|
display: "none",
|
|
@@ -678,7 +682,7 @@ function me(o, e) {
|
|
|
678
682
|
}
|
|
679
683
|
return t;
|
|
680
684
|
}
|
|
681
|
-
function
|
|
685
|
+
function j(o) {
|
|
682
686
|
for (var e = 1; e < arguments.length; e++) {
|
|
683
687
|
var t = arguments[e] != null ? arguments[e] : {};
|
|
684
688
|
e % 2 ? me(Object(t), !0).forEach(function(a) {
|
|
@@ -718,11 +722,11 @@ class lt {
|
|
|
718
722
|
if (this.options = t.options, !!this.options.showToolbar) {
|
|
719
723
|
this.editor = t, this.canvas = t.canvas;
|
|
720
724
|
var a = this.options.toolbar || {};
|
|
721
|
-
this.config =
|
|
722
|
-
style:
|
|
723
|
-
btnStyle:
|
|
724
|
-
icons:
|
|
725
|
-
handlers:
|
|
725
|
+
this.config = j(j(j({}, k), a), {}, {
|
|
726
|
+
style: j(j({}, k.style), a.style || {}),
|
|
727
|
+
btnStyle: j(j({}, k.btnStyle), a.btnStyle || {}),
|
|
728
|
+
icons: j(j({}, k.icons), a.icons || {}),
|
|
729
|
+
handlers: j(j({}, k.handlers), a.handlers || {})
|
|
726
730
|
}), this.currentTarget = null, this.currentLocked = null, 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 = () => {
|
|
727
731
|
this.el.style.display = "none";
|
|
728
732
|
}, this._createDOM(), this._bindEvents();
|
|
@@ -866,7 +870,7 @@ function fe(o, e, t, a, r, n, i) {
|
|
|
866
870
|
}
|
|
867
871
|
s.done ? e(c) : Promise.resolve(c).then(a, r);
|
|
868
872
|
}
|
|
869
|
-
function
|
|
873
|
+
function V(o) {
|
|
870
874
|
return function() {
|
|
871
875
|
var e = this, t = arguments;
|
|
872
876
|
return new Promise(function(a, r) {
|
|
@@ -890,7 +894,7 @@ class ht {
|
|
|
890
894
|
var {
|
|
891
895
|
editor: t
|
|
892
896
|
} = e;
|
|
893
|
-
this.editor = t, this.canvas = t.canvas, this._historySuspendCount = 0, this.baseState = null, this.patches = [], this.currentIndex = 0, this.maxHistoryLength = t.options.maxHistoryLength, this._createDiffPatcher();
|
|
897
|
+
this.editor = t, this.canvas = t.canvas, this._historySuspendCount = 0, this.baseState = null, this.patches = [], this.currentIndex = 0, this.maxHistoryLength = t.options.maxHistoryLength, this.totalChangesCount = 0, this.baseStateChangesCount = 0, this._createDiffPatcher();
|
|
894
898
|
}
|
|
895
899
|
/** Проверка, нужно ли пропускать сохранение истории */
|
|
896
900
|
get skipHistory() {
|
|
@@ -918,6 +922,20 @@ class ht {
|
|
|
918
922
|
resumeHistory() {
|
|
919
923
|
this._historySuspendCount = Math.max(0, this._historySuspendCount - 1);
|
|
920
924
|
}
|
|
925
|
+
/**
|
|
926
|
+
* Проверяет, есть ли в редакторе несохранённые изменения
|
|
927
|
+
* @returns {boolean}
|
|
928
|
+
*/
|
|
929
|
+
hasUnsavedChanges() {
|
|
930
|
+
return this.totalChangesCount > 0;
|
|
931
|
+
}
|
|
932
|
+
/**
|
|
933
|
+
* Получает текущую позицию в общей истории изменений
|
|
934
|
+
* @returns {number}
|
|
935
|
+
*/
|
|
936
|
+
getCurrentChangePosition() {
|
|
937
|
+
return this.baseStateChangesCount + this.currentIndex;
|
|
938
|
+
}
|
|
921
939
|
/**
|
|
922
940
|
* Получаем полное состояние, применяя все диффы к базовому состоянию.
|
|
923
941
|
*/
|
|
@@ -946,7 +964,7 @@ class ht {
|
|
|
946
964
|
console.log("Нет изменений для сохранения.");
|
|
947
965
|
return;
|
|
948
966
|
}
|
|
949
|
-
console.log("baseState", this.baseState), this.currentIndex < this.patches.length && this.patches.splice(this.currentIndex), console.log("diff", a), this.patches.push(a), this.currentIndex += 1, this.patches.length > this.maxHistoryLength && (this.baseState = this.diffPatcher.patch(this.baseState, this.patches[0]), this.patches.shift(), this.currentIndex -= 1), console.log("Состояние сохранено. Текущий индекс истории:", this.currentIndex);
|
|
967
|
+
console.log("baseState", this.baseState), this.currentIndex < this.patches.length && this.patches.splice(this.currentIndex), console.log("diff", a), this.totalChangesCount += 1, this.patches.push(a), this.currentIndex += 1, this.patches.length > this.maxHistoryLength && (this.baseState = this.diffPatcher.patch(this.baseState, this.patches[0]), this.patches.shift(), this.currentIndex -= 1, this.baseStateChangesCount += 1), console.log("Состояние сохранено. Текущий индекс истории:", this.currentIndex);
|
|
950
968
|
}
|
|
951
969
|
}
|
|
952
970
|
/**
|
|
@@ -956,7 +974,7 @@ class ht {
|
|
|
956
974
|
*/
|
|
957
975
|
loadStateFromFullState(e) {
|
|
958
976
|
var t = this;
|
|
959
|
-
return
|
|
977
|
+
return V(function* () {
|
|
960
978
|
if (e) {
|
|
961
979
|
console.log("loadStateFromFullState fullState", e), yield t.canvas.loadFromJSON(e);
|
|
962
980
|
var a = t.canvas.getObjects().find((n) => n.id === "montage-area");
|
|
@@ -972,7 +990,7 @@ class ht {
|
|
|
972
990
|
*/
|
|
973
991
|
undo() {
|
|
974
992
|
var e = this;
|
|
975
|
-
return
|
|
993
|
+
return V(function* () {
|
|
976
994
|
if (!e.skipHistory) {
|
|
977
995
|
if (e.currentIndex <= 0) {
|
|
978
996
|
console.log("Нет предыдущих состояний для отмены.");
|
|
@@ -980,7 +998,7 @@ class ht {
|
|
|
980
998
|
}
|
|
981
999
|
e.suspendHistory();
|
|
982
1000
|
try {
|
|
983
|
-
e.currentIndex -= 1;
|
|
1001
|
+
e.currentIndex -= 1, e.totalChangesCount -= 1;
|
|
984
1002
|
var t = e.getFullState();
|
|
985
1003
|
yield e.loadStateFromFullState(t), console.log("Undo выполнен. Текущий индекс истории:", e.currentIndex), e.canvas.fire("editor:undo");
|
|
986
1004
|
} catch (a) {
|
|
@@ -999,7 +1017,7 @@ class ht {
|
|
|
999
1017
|
*/
|
|
1000
1018
|
redo() {
|
|
1001
1019
|
var e = this;
|
|
1002
|
-
return
|
|
1020
|
+
return V(function* () {
|
|
1003
1021
|
if (!e.skipHistory) {
|
|
1004
1022
|
if (e.currentIndex >= e.patches.length) {
|
|
1005
1023
|
console.log("Нет состояний для повтора.");
|
|
@@ -1007,7 +1025,7 @@ class ht {
|
|
|
1007
1025
|
}
|
|
1008
1026
|
e.suspendHistory();
|
|
1009
1027
|
try {
|
|
1010
|
-
e.currentIndex += 1;
|
|
1028
|
+
e.currentIndex += 1, e.totalChangesCount += 1;
|
|
1011
1029
|
var t = e.getFullState();
|
|
1012
1030
|
console.log("fullState", t), yield e.loadStateFromFullState(t), console.log("Redo выполнен. Текущий индекс истории:", e.currentIndex), e.canvas.fire("editor:redo");
|
|
1013
1031
|
} catch (a) {
|
|
@@ -1021,7 +1039,7 @@ class ht {
|
|
|
1021
1039
|
})();
|
|
1022
1040
|
}
|
|
1023
1041
|
}
|
|
1024
|
-
var gt = 0.1, vt = 2, mt = 0.1, ft = 90,
|
|
1042
|
+
var gt = 0.1, vt = 2, mt = 0.1, ft = 90, x = 16, B = 16, D = 4096, N = 4096;
|
|
1025
1043
|
function Me(o, e, t, a, r, n, i) {
|
|
1026
1044
|
try {
|
|
1027
1045
|
var s = o[n](i), c = s.value;
|
|
@@ -1030,7 +1048,7 @@ function Me(o, e, t, a, r, n, i) {
|
|
|
1030
1048
|
}
|
|
1031
1049
|
s.done ? e(c) : Promise.resolve(c).then(a, r);
|
|
1032
1050
|
}
|
|
1033
|
-
function
|
|
1051
|
+
function T(o) {
|
|
1034
1052
|
return function() {
|
|
1035
1053
|
var e = this, t = arguments;
|
|
1036
1054
|
return new Promise(function(a, r) {
|
|
@@ -1045,7 +1063,7 @@ function P(o) {
|
|
|
1045
1063
|
});
|
|
1046
1064
|
};
|
|
1047
1065
|
}
|
|
1048
|
-
class
|
|
1066
|
+
class C {
|
|
1049
1067
|
/**
|
|
1050
1068
|
* @param {object} options
|
|
1051
1069
|
* @param {ImageEditor} options.editor - экземпляр редактора с доступом к canvas
|
|
@@ -1069,82 +1087,89 @@ class L {
|
|
|
1069
1087
|
*/
|
|
1070
1088
|
importImage(e) {
|
|
1071
1089
|
var t = this;
|
|
1072
|
-
return
|
|
1090
|
+
return T(function* () {
|
|
1073
1091
|
var {
|
|
1074
1092
|
source: a,
|
|
1075
1093
|
scale: r = "image-".concat(t.options.scaleType),
|
|
1076
|
-
withoutSave: n = !1
|
|
1077
|
-
contentType: i = "image/png"
|
|
1094
|
+
withoutSave: n = !1
|
|
1078
1095
|
} = e;
|
|
1079
1096
|
if (a) {
|
|
1097
|
+
var i = yield t.getContentType(a);
|
|
1098
|
+
if (!t.isAllowedContentType(i)) {
|
|
1099
|
+
var s = "Неверный contentType для изображения: ".concat(i, ". Ожидается один из: ").concat(t.options.acceptContentTypes.join(", "), ".");
|
|
1100
|
+
console.error("ImageManager. ".concat(s)), t.editor.canvas.fire("editor:error", {
|
|
1101
|
+
message: s
|
|
1102
|
+
});
|
|
1103
|
+
return;
|
|
1104
|
+
}
|
|
1080
1105
|
var {
|
|
1081
|
-
canvas:
|
|
1082
|
-
montageArea:
|
|
1083
|
-
transformManager:
|
|
1084
|
-
historyManager:
|
|
1106
|
+
canvas: c,
|
|
1107
|
+
montageArea: u,
|
|
1108
|
+
transformManager: l,
|
|
1109
|
+
historyManager: d
|
|
1085
1110
|
} = t.editor;
|
|
1086
|
-
|
|
1111
|
+
d.suspendHistory();
|
|
1087
1112
|
try {
|
|
1088
|
-
var
|
|
1113
|
+
var h, g;
|
|
1089
1114
|
if (a instanceof File)
|
|
1090
|
-
|
|
1115
|
+
h = URL.createObjectURL(a);
|
|
1091
1116
|
else if (typeof a == "string") {
|
|
1092
|
-
var
|
|
1117
|
+
var v = yield fetch(a, {
|
|
1093
1118
|
mode: "cors"
|
|
1094
|
-
}),
|
|
1119
|
+
}), f = yield v.blob({
|
|
1095
1120
|
type: i,
|
|
1096
1121
|
quality: 1
|
|
1097
1122
|
});
|
|
1098
|
-
|
|
1123
|
+
h = URL.createObjectURL(f);
|
|
1099
1124
|
} else
|
|
1100
1125
|
throw new Error("ImportImage. Неверный тип источника изображения. Ожидается URL или объект File.");
|
|
1101
|
-
t._createdBlobUrls.push(
|
|
1102
|
-
var
|
|
1103
|
-
if (
|
|
1104
|
-
var
|
|
1105
|
-
|
|
1126
|
+
t._createdBlobUrls.push(h);
|
|
1127
|
+
var y = C.getFormatFromContentType(i);
|
|
1128
|
+
if (y === "svg") {
|
|
1129
|
+
var m = yield Ee(h);
|
|
1130
|
+
g = U.groupSVGElements(m.objects, m.options);
|
|
1106
1131
|
} else
|
|
1107
|
-
|
|
1132
|
+
g = yield de.fromURL(h, {
|
|
1108
1133
|
crossOrigin: "anonymous"
|
|
1109
1134
|
});
|
|
1110
1135
|
var {
|
|
1111
|
-
width:
|
|
1112
|
-
height:
|
|
1113
|
-
} =
|
|
1114
|
-
if (
|
|
1115
|
-
var
|
|
1116
|
-
t._createdBlobUrls.push(
|
|
1136
|
+
width: b,
|
|
1137
|
+
height: M
|
|
1138
|
+
} = g;
|
|
1139
|
+
if (M > N || b > D) {
|
|
1140
|
+
var L = yield t.resizeImageToBoundaries(g._element.src, "max"), O = URL.createObjectURL(L);
|
|
1141
|
+
t._createdBlobUrls.push(O), g = yield de.fromURL(O, {
|
|
1117
1142
|
crossOrigin: "anonymous"
|
|
1118
1143
|
});
|
|
1119
1144
|
}
|
|
1120
|
-
if (
|
|
1145
|
+
if (g.set("id", "".concat(g.type, "-").concat(I())), g.set("format", y), r === "scale-montage")
|
|
1121
1146
|
t.editor.canvasManager.scaleMontageAreaToImage({
|
|
1122
|
-
object:
|
|
1147
|
+
object: g,
|
|
1123
1148
|
withoutSave: !0
|
|
1124
1149
|
});
|
|
1125
1150
|
else {
|
|
1126
1151
|
var {
|
|
1127
|
-
width:
|
|
1152
|
+
width: S,
|
|
1128
1153
|
height: A
|
|
1129
|
-
} =
|
|
1130
|
-
imageObject:
|
|
1154
|
+
} = u, P = t.calculateScaleFactor({
|
|
1155
|
+
imageObject: g,
|
|
1131
1156
|
scaleType: r
|
|
1132
1157
|
});
|
|
1133
|
-
r === "image-contain" &&
|
|
1134
|
-
object:
|
|
1158
|
+
r === "image-contain" && P < 1 ? l.fitObject({
|
|
1159
|
+
object: g,
|
|
1135
1160
|
type: "contain",
|
|
1136
1161
|
withoutSave: !0
|
|
1137
|
-
}) : r === "image-cover" && (
|
|
1138
|
-
object:
|
|
1162
|
+
}) : r === "image-cover" && (b > S || M > A) && l.fitObject({
|
|
1163
|
+
object: g,
|
|
1139
1164
|
type: "cover",
|
|
1140
1165
|
withoutSave: !0
|
|
1141
1166
|
});
|
|
1142
1167
|
}
|
|
1143
|
-
|
|
1144
|
-
} catch (
|
|
1145
|
-
console.error("importImage. Ошибка импорта изображения: ",
|
|
1146
|
-
message: "Ошибка импорта изображения: ".concat(
|
|
1147
|
-
}),
|
|
1168
|
+
c.add(g), c.centerObject(g), c.setActiveObject(g), c.renderAll(), d.resumeHistory(), n || d.saveState();
|
|
1169
|
+
} catch (E) {
|
|
1170
|
+
console.error("importImage. Ошибка импорта изображения: ", E), c.fire("editor:error", {
|
|
1171
|
+
message: "Ошибка импорта изображения: ".concat(E.message)
|
|
1172
|
+
}), d.resumeHistory();
|
|
1148
1173
|
}
|
|
1149
1174
|
}
|
|
1150
1175
|
})();
|
|
@@ -1159,15 +1184,15 @@ class L {
|
|
|
1159
1184
|
*/
|
|
1160
1185
|
resizeImageToBoundaries(e) {
|
|
1161
1186
|
var t = arguments, a = this;
|
|
1162
|
-
return
|
|
1163
|
-
var r = t.length > 1 && t[1] !== void 0 ? t[1] : "max", n = "Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров: ".concat(D, "x").concat(
|
|
1187
|
+
return T(function* () {
|
|
1188
|
+
var r = t.length > 1 && t[1] !== void 0 ? t[1] : "max", n = "Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров: ".concat(D, "x").concat(N);
|
|
1164
1189
|
console.warn("importImage. ".concat(n)), a.editor.canvas.fire("editor:warning", {
|
|
1165
1190
|
message: n
|
|
1166
1191
|
});
|
|
1167
1192
|
var i = yield a.editor.workerManager.post("resizeImage", {
|
|
1168
1193
|
dataURL: e,
|
|
1169
1194
|
maxWidth: D,
|
|
1170
|
-
maxHeight:
|
|
1195
|
+
maxHeight: N,
|
|
1171
1196
|
sizeType: r
|
|
1172
1197
|
});
|
|
1173
1198
|
return i;
|
|
@@ -1186,7 +1211,7 @@ class L {
|
|
|
1186
1211
|
*/
|
|
1187
1212
|
exportCanvasAsImageFile() {
|
|
1188
1213
|
var e = arguments, t = this;
|
|
1189
|
-
return
|
|
1214
|
+
return T(function* () {
|
|
1190
1215
|
var {
|
|
1191
1216
|
fileName: a = "image.png",
|
|
1192
1217
|
contentType: r = "image/png",
|
|
@@ -1196,74 +1221,74 @@ class L {
|
|
|
1196
1221
|
canvas: s,
|
|
1197
1222
|
montageArea: c,
|
|
1198
1223
|
workerManager: u
|
|
1199
|
-
} = t.editor, l = r === "application/pdf", d = l ? "image/jpg" : r, h =
|
|
1224
|
+
} = t.editor, l = r === "application/pdf", d = l ? "image/jpg" : r, h = C.getFormatFromContentType(d);
|
|
1200
1225
|
c.setCoords();
|
|
1201
1226
|
var {
|
|
1202
1227
|
left: g,
|
|
1203
1228
|
top: v,
|
|
1204
|
-
width:
|
|
1205
|
-
height:
|
|
1206
|
-
} = c.getBoundingRect(),
|
|
1207
|
-
["image/jpg", "image/jpeg"].includes(d) && (
|
|
1208
|
-
var b =
|
|
1209
|
-
b.visible = !1,
|
|
1210
|
-
width:
|
|
1211
|
-
height:
|
|
1229
|
+
width: f,
|
|
1230
|
+
height: y
|
|
1231
|
+
} = c.getBoundingRect(), m = yield s.clone(["id", "format", "locked"]);
|
|
1232
|
+
["image/jpg", "image/jpeg"].includes(d) && (m.backgroundColor = "#ffffff");
|
|
1233
|
+
var b = m.getObjects().find((w) => w.id === c.id);
|
|
1234
|
+
b.visible = !1, m.viewportTransform = [1, 0, 0, 1, -g, -v], m.setDimensions({
|
|
1235
|
+
width: f,
|
|
1236
|
+
height: y
|
|
1212
1237
|
}, {
|
|
1213
1238
|
backstoreOnly: !0
|
|
1214
|
-
}),
|
|
1215
|
-
var
|
|
1216
|
-
if (h === "svg" &&
|
|
1217
|
-
var
|
|
1218
|
-
|
|
1219
|
-
var O =
|
|
1239
|
+
}), m.renderAll();
|
|
1240
|
+
var M = m.getObjects().filter((w) => w.format).every((w) => w.format === "svg");
|
|
1241
|
+
if (h === "svg" && M) {
|
|
1242
|
+
var L = m.toSVG();
|
|
1243
|
+
m.dispose();
|
|
1244
|
+
var O = C._exportSVGStringAsFile(L, {
|
|
1220
1245
|
exportAsBase64: n,
|
|
1221
1246
|
exportAsBlob: i,
|
|
1222
1247
|
fileName: a
|
|
1223
|
-
}),
|
|
1248
|
+
}), S = {
|
|
1224
1249
|
image: O,
|
|
1225
1250
|
format: "svg",
|
|
1226
1251
|
contentType: "image/svg+xml",
|
|
1227
1252
|
fileName: a.replace(/\.[^/.]+$/, ".svg")
|
|
1228
1253
|
};
|
|
1229
|
-
return s.fire("editor:canvas-exported",
|
|
1254
|
+
return s.fire("editor:canvas-exported", S), S;
|
|
1230
1255
|
}
|
|
1231
|
-
var
|
|
1232
|
-
|
|
1256
|
+
var A = yield new Promise((w) => {
|
|
1257
|
+
m.getElement().toBlob(w);
|
|
1233
1258
|
});
|
|
1234
|
-
if (
|
|
1235
|
-
var
|
|
1236
|
-
image:
|
|
1259
|
+
if (m.dispose(), i) {
|
|
1260
|
+
var P = {
|
|
1261
|
+
image: A,
|
|
1237
1262
|
format: h,
|
|
1238
1263
|
contentType: d,
|
|
1239
1264
|
fileName: a
|
|
1240
1265
|
};
|
|
1241
|
-
return s.fire("editor:canvas-exported",
|
|
1266
|
+
return s.fire("editor:canvas-exported", P), P;
|
|
1242
1267
|
}
|
|
1243
|
-
var
|
|
1268
|
+
var E = yield createImageBitmap(A), re = yield u.post("toDataURL", {
|
|
1244
1269
|
format: h,
|
|
1245
1270
|
quality: 1,
|
|
1246
|
-
bitmap:
|
|
1247
|
-
}, [
|
|
1271
|
+
bitmap: E
|
|
1272
|
+
}, [E]);
|
|
1248
1273
|
if (l) {
|
|
1249
|
-
var ne = 0.264583,
|
|
1250
|
-
orientation:
|
|
1274
|
+
var ne = 0.264583, W = f * ne, _ = y * ne, we = (yield t.editor.moduleLoader.loadModule("jspdf")).jsPDF, R = new we({
|
|
1275
|
+
orientation: W > _ ? "landscape" : "portrait",
|
|
1251
1276
|
unit: "mm",
|
|
1252
|
-
format: [
|
|
1277
|
+
format: [W, _]
|
|
1253
1278
|
});
|
|
1254
|
-
if (
|
|
1255
|
-
var
|
|
1256
|
-
image:
|
|
1279
|
+
if (R.addImage(re, "JPG", 0, 0, W, _), n) {
|
|
1280
|
+
var Ce = R.output("datauristring"), ie = {
|
|
1281
|
+
image: Ce,
|
|
1257
1282
|
format: "pdf",
|
|
1258
1283
|
contentType: "application/pdf",
|
|
1259
1284
|
fileName: a
|
|
1260
1285
|
};
|
|
1261
1286
|
return s.fire("editor:canvas-exported", ie), ie;
|
|
1262
1287
|
}
|
|
1263
|
-
var De =
|
|
1288
|
+
var De = R.output("blob"), Ne = new File([De], a, {
|
|
1264
1289
|
type: "application/pdf"
|
|
1265
1290
|
}), oe = {
|
|
1266
|
-
image:
|
|
1291
|
+
image: Ne,
|
|
1267
1292
|
format: "pdf",
|
|
1268
1293
|
contentType: "application/pdf",
|
|
1269
1294
|
fileName: a
|
|
@@ -1279,7 +1304,7 @@ class L {
|
|
|
1279
1304
|
};
|
|
1280
1305
|
return s.fire("editor:canvas-exported", se), se;
|
|
1281
1306
|
}
|
|
1282
|
-
var ce = h === "svg" && !
|
|
1307
|
+
var ce = h === "svg" && !M ? a.replace(/\.[^/.]+$/, ".png") : a, Le = new File([A], ce, {
|
|
1283
1308
|
type: d
|
|
1284
1309
|
}), ue = {
|
|
1285
1310
|
image: Le,
|
|
@@ -1303,7 +1328,7 @@ class L {
|
|
|
1303
1328
|
*/
|
|
1304
1329
|
exportObjectAsImageFile() {
|
|
1305
1330
|
var e = arguments, t = this;
|
|
1306
|
-
return
|
|
1331
|
+
return T(function* () {
|
|
1307
1332
|
var {
|
|
1308
1333
|
object: a,
|
|
1309
1334
|
fileName: r = "image.png",
|
|
@@ -1318,7 +1343,7 @@ class L {
|
|
|
1318
1343
|
return console.error("exportObjectAsDataURL. Не выбран объект"), c.fire("editor:error", {
|
|
1319
1344
|
message: "Не выбран объект для экспорта"
|
|
1320
1345
|
}), "";
|
|
1321
|
-
var d =
|
|
1346
|
+
var d = C.getFormatFromContentType(n);
|
|
1322
1347
|
if (d === "svg") {
|
|
1323
1348
|
var h = l.toSVG(), g = t._exportSVGStringAsFile(h, {
|
|
1324
1349
|
exportAsBase64: i,
|
|
@@ -1333,39 +1358,39 @@ class L {
|
|
|
1333
1358
|
return c.fire("editor:object-exported", v), v;
|
|
1334
1359
|
}
|
|
1335
1360
|
if (i) {
|
|
1336
|
-
var
|
|
1361
|
+
var f = yield createImageBitmap(l._element), y = yield u.post("toDataURL", {
|
|
1337
1362
|
format: d,
|
|
1338
1363
|
quality: 1,
|
|
1339
|
-
bitmap:
|
|
1340
|
-
}, [
|
|
1341
|
-
image:
|
|
1364
|
+
bitmap: f
|
|
1365
|
+
}, [f]), m = {
|
|
1366
|
+
image: y,
|
|
1342
1367
|
format: d,
|
|
1343
1368
|
contentType: n,
|
|
1344
1369
|
fileName: r
|
|
1345
1370
|
};
|
|
1346
|
-
return c.fire("editor:object-exported",
|
|
1371
|
+
return c.fire("editor:object-exported", m), m;
|
|
1347
1372
|
}
|
|
1348
|
-
var b = l.toCanvasElement(),
|
|
1349
|
-
b.toBlob(
|
|
1373
|
+
var b = l.toCanvasElement(), M = yield new Promise((A) => {
|
|
1374
|
+
b.toBlob(A);
|
|
1350
1375
|
});
|
|
1351
1376
|
if (s) {
|
|
1352
|
-
var
|
|
1353
|
-
image:
|
|
1377
|
+
var L = {
|
|
1378
|
+
image: M,
|
|
1354
1379
|
format: d,
|
|
1355
1380
|
contentType: n,
|
|
1356
1381
|
fileName: r
|
|
1357
1382
|
};
|
|
1358
|
-
return c.fire("editor:object-exported",
|
|
1383
|
+
return c.fire("editor:object-exported", L), L;
|
|
1359
1384
|
}
|
|
1360
|
-
var O = new File([
|
|
1385
|
+
var O = new File([M], r, {
|
|
1361
1386
|
type: n
|
|
1362
|
-
}),
|
|
1387
|
+
}), S = {
|
|
1363
1388
|
image: O,
|
|
1364
1389
|
format: d,
|
|
1365
1390
|
contentType: n,
|
|
1366
1391
|
fileName: r
|
|
1367
1392
|
};
|
|
1368
|
-
return c.fire("editor:object-exported",
|
|
1393
|
+
return c.fire("editor:object-exported", S), S;
|
|
1369
1394
|
})();
|
|
1370
1395
|
}
|
|
1371
1396
|
/**
|
|
@@ -1409,6 +1434,84 @@ class L {
|
|
|
1409
1434
|
var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "", t = e.match(/^[^/]+\/([^+;]+)/);
|
|
1410
1435
|
return t ? t[1] : "";
|
|
1411
1436
|
}
|
|
1437
|
+
/**
|
|
1438
|
+
* Проверяет, является ли contentType допустимым типом изображения.
|
|
1439
|
+
* @param {string} contentType - тип контента
|
|
1440
|
+
* @returns {boolean} true, если contentType допустим, иначе false
|
|
1441
|
+
*/
|
|
1442
|
+
isAllowedContentType() {
|
|
1443
|
+
var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "", {
|
|
1444
|
+
acceptContentTypes: t
|
|
1445
|
+
} = this.editor.options;
|
|
1446
|
+
return t.includes(e);
|
|
1447
|
+
}
|
|
1448
|
+
/**
|
|
1449
|
+
* Проверяет, является ли формат допустимым.
|
|
1450
|
+
* @param {string} format - формат изображения, например 'png', 'jpeg', 'svg'
|
|
1451
|
+
* @returns {boolean} true, если формат допустим, иначе false
|
|
1452
|
+
*/
|
|
1453
|
+
isAllowedFormat() {
|
|
1454
|
+
var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "", {
|
|
1455
|
+
acceptContentTypes: t
|
|
1456
|
+
} = this.editor.options, a = "image/".concat(e);
|
|
1457
|
+
return t.includes(a);
|
|
1458
|
+
}
|
|
1459
|
+
/**
|
|
1460
|
+
* Получает contentType изображения из источника
|
|
1461
|
+
* @param {File|string} source - URL изображения или объект File
|
|
1462
|
+
* @returns {Promise<string>|string} - MIME-тип изображения
|
|
1463
|
+
* @public
|
|
1464
|
+
*/
|
|
1465
|
+
getContentType(e) {
|
|
1466
|
+
var t = this;
|
|
1467
|
+
return T(function* () {
|
|
1468
|
+
return typeof e == "string" ? t.getContentTypeFromUrl(e) : e.type || "application/octet-stream";
|
|
1469
|
+
})();
|
|
1470
|
+
}
|
|
1471
|
+
/**
|
|
1472
|
+
* Получает contentType изображения через HTTP HEAD запрос или анализ URL
|
|
1473
|
+
* @param {string} src - URL изображения
|
|
1474
|
+
* @returns {Promise<string>} - MIME-тип изображения
|
|
1475
|
+
* @public
|
|
1476
|
+
*/
|
|
1477
|
+
getContentTypeFromUrl(e) {
|
|
1478
|
+
var t = this;
|
|
1479
|
+
return T(function* () {
|
|
1480
|
+
if (e.startsWith("data:")) {
|
|
1481
|
+
var a = e.match(/^data:([^;]+)/);
|
|
1482
|
+
return a ? a[1] : "application/octet-stream";
|
|
1483
|
+
}
|
|
1484
|
+
try {
|
|
1485
|
+
var r = yield fetch(e, {
|
|
1486
|
+
method: "HEAD"
|
|
1487
|
+
}), n = r.headers.get("content-type");
|
|
1488
|
+
if (n && n.startsWith("image/"))
|
|
1489
|
+
return n.split(";")[0];
|
|
1490
|
+
} catch (i) {
|
|
1491
|
+
console.warn("HEAD запрос неудачен, определяем тип по расширению:", i);
|
|
1492
|
+
}
|
|
1493
|
+
return t.getContentTypeFromExtension(e);
|
|
1494
|
+
})();
|
|
1495
|
+
}
|
|
1496
|
+
/**
|
|
1497
|
+
* Определяет contentType по расширению файла в URL
|
|
1498
|
+
* @param {string} url - URL файла
|
|
1499
|
+
* @returns {string} - MIME-тип
|
|
1500
|
+
* @public
|
|
1501
|
+
*/
|
|
1502
|
+
getContentTypeFromExtension(e) {
|
|
1503
|
+
try {
|
|
1504
|
+
var t, {
|
|
1505
|
+
acceptContentTypes: a
|
|
1506
|
+
} = this.editor.options, r = new URL(e), n = (t = r.pathname.split(".").pop()) === null || t === void 0 ? void 0 : t.toLowerCase(), i = {};
|
|
1507
|
+
return a.forEach((s) => {
|
|
1508
|
+
var c = C.getFormatFromContentType(s);
|
|
1509
|
+
c && (i[c] = s);
|
|
1510
|
+
}), i[n] || "application/octet-stream";
|
|
1511
|
+
} catch (s) {
|
|
1512
|
+
return console.warn("Не удалось определить расширение из URL:", e, s), "application/octet-stream";
|
|
1513
|
+
}
|
|
1514
|
+
}
|
|
1412
1515
|
/**
|
|
1413
1516
|
* Рассчитывает коэффициент масштабирования изображения.
|
|
1414
1517
|
* @param {object} imageObject - объект изображения
|
|
@@ -1465,7 +1568,7 @@ class Mt {
|
|
|
1465
1568
|
} = this.editor, {
|
|
1466
1569
|
width: c,
|
|
1467
1570
|
height: u
|
|
1468
|
-
} = i, l = Number(Math.max(Math.min(e, D),
|
|
1571
|
+
} = i, l = Number(Math.max(Math.min(e, D), x));
|
|
1469
1572
|
if (!s || s === "auto" || r ? this.adaptCanvasToContainer() : s ? this.setCanvasBackstoreWidth(s) : this.setCanvasBackstoreWidth(l), i.set({
|
|
1470
1573
|
width: l
|
|
1471
1574
|
}), n.clipPath.set({
|
|
@@ -1478,8 +1581,8 @@ class Mt {
|
|
|
1478
1581
|
var {
|
|
1479
1582
|
left: g,
|
|
1480
1583
|
top: v
|
|
1481
|
-
} = this.getObjectDefaultCoords(i),
|
|
1482
|
-
n.setViewportTransform([
|
|
1584
|
+
} = this.getObjectDefaultCoords(i), f = n.getZoom();
|
|
1585
|
+
n.setViewportTransform([f, 0, 0, f, g, v]), this.centerMontageArea(), a || this.editor.historyManager.saveState(), n == null || n.fire("editor:resolution-width-changed", {
|
|
1483
1586
|
width: e
|
|
1484
1587
|
});
|
|
1485
1588
|
}
|
|
@@ -1508,7 +1611,7 @@ class Mt {
|
|
|
1508
1611
|
} = this.editor, {
|
|
1509
1612
|
width: c,
|
|
1510
1613
|
height: u
|
|
1511
|
-
} = i, l = Number(Math.max(Math.min(e,
|
|
1614
|
+
} = i, l = Number(Math.max(Math.min(e, N), B));
|
|
1512
1615
|
if (!s || s === "auto" || r ? this.adaptCanvasToContainer() : s ? this.setCanvasBackstoreHeight(s) : this.setCanvasBackstoreHeight(l), i.set({
|
|
1513
1616
|
height: l
|
|
1514
1617
|
}), n.clipPath.set({
|
|
@@ -1521,8 +1624,8 @@ class Mt {
|
|
|
1521
1624
|
var {
|
|
1522
1625
|
left: g,
|
|
1523
1626
|
top: v
|
|
1524
|
-
} = this.getObjectDefaultCoords(i),
|
|
1525
|
-
n.setViewportTransform([
|
|
1627
|
+
} = this.getObjectDefaultCoords(i), f = n.getZoom();
|
|
1628
|
+
n.setViewportTransform([f, 0, 0, f, g, v]), this.centerMontageArea(), a || this.editor.historyManager.saveState(), n == null || n.fire("editor:resolution-height-changed", {
|
|
1526
1629
|
height: e
|
|
1527
1630
|
});
|
|
1528
1631
|
}
|
|
@@ -1570,7 +1673,7 @@ class Mt {
|
|
|
1570
1673
|
}
|
|
1571
1674
|
setCanvasBackstoreWidth(e) {
|
|
1572
1675
|
if (!(!e || typeof e != "number")) {
|
|
1573
|
-
var t = Math.max(Math.min(e, D),
|
|
1676
|
+
var t = Math.max(Math.min(e, D), x);
|
|
1574
1677
|
this.editor.canvas.setDimensions({
|
|
1575
1678
|
width: t
|
|
1576
1679
|
}, {
|
|
@@ -1580,7 +1683,7 @@ class Mt {
|
|
|
1580
1683
|
}
|
|
1581
1684
|
setCanvasBackstoreHeight(e) {
|
|
1582
1685
|
if (!(!e || typeof e != "number")) {
|
|
1583
|
-
var t = Math.max(Math.min(e,
|
|
1686
|
+
var t = Math.max(Math.min(e, N), B);
|
|
1584
1687
|
this.editor.canvas.setDimensions({
|
|
1585
1688
|
height: t
|
|
1586
1689
|
}, {
|
|
@@ -1591,7 +1694,7 @@ class Mt {
|
|
|
1591
1694
|
adaptCanvasToContainer() {
|
|
1592
1695
|
var {
|
|
1593
1696
|
canvas: e
|
|
1594
|
-
} = this.editor, t = e.editorContainer, a = t.clientWidth, r = t.clientHeight, n = Math.max(Math.min(a, D),
|
|
1697
|
+
} = this.editor, t = e.editorContainer, a = t.clientWidth, r = t.clientHeight, n = Math.max(Math.min(a, D), x), i = Math.max(Math.min(r, N), B);
|
|
1595
1698
|
console.log("adaptCanvasToContainer newWidth", n), console.log("adaptCanvasToContainer newHeight", i), e.setDimensions({
|
|
1596
1699
|
width: n,
|
|
1597
1700
|
height: i
|
|
@@ -1752,19 +1855,19 @@ class Mt {
|
|
|
1752
1855
|
width: l,
|
|
1753
1856
|
height: d
|
|
1754
1857
|
} = u;
|
|
1755
|
-
if (l <
|
|
1756
|
-
var h = "Размер изображения меньше минимального размера канваса, поэтому оно будет растянуто до минимальных размеров: ".concat(
|
|
1858
|
+
if (l < x || d < B) {
|
|
1859
|
+
var h = "Размер изображения меньше минимального размера канваса, поэтому оно будет растянуто до минимальных размеров: ".concat(x, "x").concat(B);
|
|
1757
1860
|
console.warn("scaleMontageAreaToImage. ".concat(h)), r.fire("editor:warning", {
|
|
1758
1861
|
message: h
|
|
1759
1862
|
});
|
|
1760
1863
|
}
|
|
1761
|
-
var g = Math.min(l, D), v = Math.min(d,
|
|
1864
|
+
var g = Math.min(l, D), v = Math.min(d, N);
|
|
1762
1865
|
if (t) {
|
|
1763
1866
|
var {
|
|
1764
|
-
width:
|
|
1765
|
-
height:
|
|
1766
|
-
} = n,
|
|
1767
|
-
g =
|
|
1867
|
+
width: f,
|
|
1868
|
+
height: y
|
|
1869
|
+
} = n, m = l / f, b = d / y, M = Math.max(m, b);
|
|
1870
|
+
g = f * M, v = y * M;
|
|
1768
1871
|
}
|
|
1769
1872
|
this.setResolutionWidth(g, {
|
|
1770
1873
|
withoutSave: !0
|
|
@@ -2020,32 +2123,31 @@ class jt {
|
|
|
2020
2123
|
fitAsOneObject: r
|
|
2021
2124
|
} = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, {
|
|
2022
2125
|
canvas: n,
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
|
|
2026
|
-
|
|
2027
|
-
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
imageObject: g,
|
|
2126
|
+
imageManager: i,
|
|
2127
|
+
historyManager: s
|
|
2128
|
+
} = this.editor, c = e || n.getActiveObject();
|
|
2129
|
+
if (c) {
|
|
2130
|
+
if (["activeselection"].includes(c.type) && !r) {
|
|
2131
|
+
var u = c.getObjects();
|
|
2132
|
+
n.discardActiveObject(), u.forEach((h) => {
|
|
2133
|
+
var g = i.calculateScaleFactor({
|
|
2134
|
+
imageObject: h,
|
|
2033
2135
|
scaleType: t
|
|
2034
2136
|
});
|
|
2035
|
-
|
|
2137
|
+
h.scale(g), n.centerObject(h);
|
|
2036
2138
|
});
|
|
2037
|
-
var
|
|
2139
|
+
var l = new z(u, {
|
|
2038
2140
|
canvas: n
|
|
2039
2141
|
});
|
|
2040
|
-
n.setActiveObject(
|
|
2142
|
+
n.setActiveObject(l);
|
|
2041
2143
|
} else {
|
|
2042
|
-
var
|
|
2043
|
-
imageObject:
|
|
2144
|
+
var d = i.calculateScaleFactor({
|
|
2145
|
+
imageObject: c,
|
|
2044
2146
|
scaleType: t
|
|
2045
2147
|
});
|
|
2046
|
-
|
|
2148
|
+
c.scale(d), n.centerObject(c);
|
|
2047
2149
|
}
|
|
2048
|
-
n.renderAll(), a ||
|
|
2150
|
+
n.renderAll(), a || s.saveState(), n.fire("editor:image-fitted", {
|
|
2049
2151
|
type: t
|
|
2050
2152
|
});
|
|
2051
2153
|
}
|
|
@@ -2217,7 +2319,7 @@ class yt {
|
|
|
2217
2319
|
}
|
|
2218
2320
|
}
|
|
2219
2321
|
}
|
|
2220
|
-
class
|
|
2322
|
+
class H {
|
|
2221
2323
|
/**
|
|
2222
2324
|
* @param {object} options
|
|
2223
2325
|
* @param {ImageEditor} options.editor - экземпляр редактора с доступом к canvas
|
|
@@ -2264,7 +2366,7 @@ class Y {
|
|
|
2264
2366
|
} = this.editor;
|
|
2265
2367
|
r.suspendHistory();
|
|
2266
2368
|
var n = e || a.getActiveObject();
|
|
2267
|
-
n && (n.type === "activeselection" ?
|
|
2369
|
+
n && (n.type === "activeselection" ? H._moveSelectionForward(a, n) : a.bringObjectForward(n), a.renderAll(), r.resumeHistory(), t || r.saveState(), a.fire("editor:object-bring-forward"));
|
|
2268
2370
|
}
|
|
2269
2371
|
/**
|
|
2270
2372
|
* Отправить объект на задний план по оси Z
|
|
@@ -2314,7 +2416,7 @@ class Y {
|
|
|
2314
2416
|
} = this.editor;
|
|
2315
2417
|
n.suspendHistory();
|
|
2316
2418
|
var s = e || a.getActiveObject();
|
|
2317
|
-
s && (s.type === "activeselection" ?
|
|
2419
|
+
s && (s.type === "activeselection" ? H._moveSelectionBackwards(a, s) : a.sendObjectBackwards(s), a.sendObjectToBack(r), a.sendObjectToBack(i), a.renderAll(), n.resumeHistory(), t || n.saveState(), a.fire("editor:object-send-backwards"));
|
|
2318
2420
|
}
|
|
2319
2421
|
/**
|
|
2320
2422
|
* Сдвигает выделенные объекты на один уровень вверх относительно ближайшего верхнего объекта
|
|
@@ -2364,7 +2466,7 @@ function je(o, e) {
|
|
|
2364
2466
|
}
|
|
2365
2467
|
return t;
|
|
2366
2468
|
}
|
|
2367
|
-
function
|
|
2469
|
+
function F(o) {
|
|
2368
2470
|
for (var e = 1; e < arguments.length; e++) {
|
|
2369
2471
|
var t = arguments[e] != null ? arguments[e] : {};
|
|
2370
2472
|
e % 2 ? je(Object(t), !0).forEach(function(a) {
|
|
@@ -2392,16 +2494,16 @@ function wt(o, e) {
|
|
|
2392
2494
|
}
|
|
2393
2495
|
return (e === "string" ? String : Number)(o);
|
|
2394
2496
|
}
|
|
2395
|
-
function
|
|
2497
|
+
function G(o, e) {
|
|
2396
2498
|
if (o == null) return {};
|
|
2397
|
-
var t, a, r =
|
|
2499
|
+
var t, a, r = Ct(o, e);
|
|
2398
2500
|
if (Object.getOwnPropertySymbols) {
|
|
2399
2501
|
var n = Object.getOwnPropertySymbols(o);
|
|
2400
2502
|
for (a = 0; a < n.length; a++) t = n[a], e.indexOf(t) === -1 && {}.propertyIsEnumerable.call(o, t) && (r[t] = o[t]);
|
|
2401
2503
|
}
|
|
2402
2504
|
return r;
|
|
2403
2505
|
}
|
|
2404
|
-
function
|
|
2506
|
+
function Ct(o, e) {
|
|
2405
2507
|
if (o == null) return {};
|
|
2406
2508
|
var t = {};
|
|
2407
2509
|
for (var a in o) if ({}.hasOwnProperty.call(o, a)) {
|
|
@@ -2444,12 +2546,12 @@ class Dt {
|
|
|
2444
2546
|
width: n = 100,
|
|
2445
2547
|
height: i = 100,
|
|
2446
2548
|
fill: s = "blue"
|
|
2447
|
-
} = e, c =
|
|
2549
|
+
} = e, c = G(e, pt), {
|
|
2448
2550
|
withoutSelection: u,
|
|
2449
2551
|
withoutAdding: l
|
|
2450
2552
|
} = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, {
|
|
2451
2553
|
canvas: d
|
|
2452
|
-
} = this.editor, h = new xe(
|
|
2554
|
+
} = this.editor, h = new xe(F({
|
|
2453
2555
|
id: t,
|
|
2454
2556
|
left: a,
|
|
2455
2557
|
top: r,
|
|
@@ -2480,12 +2582,12 @@ class Dt {
|
|
|
2480
2582
|
top: r,
|
|
2481
2583
|
radius: n = 50,
|
|
2482
2584
|
fill: i = "green"
|
|
2483
|
-
} = e, s =
|
|
2585
|
+
} = e, s = G(e, bt), {
|
|
2484
2586
|
withoutSelection: c,
|
|
2485
2587
|
withoutAdding: u
|
|
2486
2588
|
} = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, {
|
|
2487
2589
|
canvas: l
|
|
2488
|
-
} = this.editor, d = new Be(
|
|
2590
|
+
} = this.editor, d = new Be(F({
|
|
2489
2591
|
id: t,
|
|
2490
2592
|
left: a,
|
|
2491
2593
|
top: r,
|
|
@@ -2517,12 +2619,12 @@ class Dt {
|
|
|
2517
2619
|
width: n = 100,
|
|
2518
2620
|
height: i = 100,
|
|
2519
2621
|
fill: s = "yellow"
|
|
2520
|
-
} = e, c =
|
|
2622
|
+
} = e, c = G(e, It), {
|
|
2521
2623
|
withoutSelection: u,
|
|
2522
2624
|
withoutAdding: l
|
|
2523
2625
|
} = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, {
|
|
2524
2626
|
canvas: d
|
|
2525
|
-
} = this.editor, h = new Ze(
|
|
2627
|
+
} = this.editor, h = new Ze(F({
|
|
2526
2628
|
id: t,
|
|
2527
2629
|
left: a,
|
|
2528
2630
|
top: r,
|
|
@@ -2556,7 +2658,7 @@ function pe(o) {
|
|
|
2556
2658
|
});
|
|
2557
2659
|
};
|
|
2558
2660
|
}
|
|
2559
|
-
class
|
|
2661
|
+
class Nt {
|
|
2560
2662
|
/**
|
|
2561
2663
|
* @param {object} options
|
|
2562
2664
|
* @param {ImageEditor} options.editor - экземпляр редактора с доступом к canvas
|
|
@@ -2579,7 +2681,7 @@ class Ct {
|
|
|
2579
2681
|
} = e.editor, a = t.getActiveObject();
|
|
2580
2682
|
if (a)
|
|
2581
2683
|
try {
|
|
2582
|
-
var r = yield a.clone();
|
|
2684
|
+
var r = yield a.clone(["format"]);
|
|
2583
2685
|
if (e.clipboard = r, typeof ClipboardItem == "undefined" || !navigator.clipboard) {
|
|
2584
2686
|
console.warn(
|
|
2585
2687
|
// eslint-disable-next-line max-len
|
|
@@ -2622,13 +2724,13 @@ class Ct {
|
|
|
2622
2724
|
canvas: t
|
|
2623
2725
|
} = e.editor;
|
|
2624
2726
|
if (e.clipboard) {
|
|
2625
|
-
var a = yield e.clipboard.clone();
|
|
2727
|
+
var a = yield e.clipboard.clone(["format"]);
|
|
2626
2728
|
t.discardActiveObject(), a.set({
|
|
2627
2729
|
id: "".concat(a.type, "-").concat(I()),
|
|
2628
2730
|
left: a.left + 10,
|
|
2629
2731
|
top: a.top + 10,
|
|
2630
2732
|
evented: !0
|
|
2631
|
-
}), a instanceof
|
|
2733
|
+
}), a instanceof z ? (a.canvas = t, a.forEachObject((r) => {
|
|
2632
2734
|
t.add(r);
|
|
2633
2735
|
})) : t.add(a), t.setActiveObject(a), t.requestRenderAll(), t.fire("editor:object-pasted", {
|
|
2634
2736
|
object: a
|
|
@@ -2773,7 +2875,7 @@ class Ot {
|
|
|
2773
2875
|
if (!(!n || n.type !== "group")) {
|
|
2774
2876
|
var i = n.removeAll();
|
|
2775
2877
|
a.remove(n), i.forEach((c) => a.add(c));
|
|
2776
|
-
var s = new
|
|
2878
|
+
var s = new z(i, {
|
|
2777
2879
|
canvas: a
|
|
2778
2880
|
});
|
|
2779
2881
|
a.setActiveObject(s), a.renderAll(), r.resumeHistory(), t || r.saveState(), a.fire("editor:objects-ungrouped");
|
|
@@ -2802,7 +2904,7 @@ class Tt {
|
|
|
2802
2904
|
objectLockManager: a
|
|
2803
2905
|
} = this.editor;
|
|
2804
2906
|
e.discardActiveObject();
|
|
2805
|
-
var r = t.getObjects(), n = r.some((s) => s.locked), i = r.length > 1 ? new
|
|
2907
|
+
var r = t.getObjects(), n = r.some((s) => s.locked), i = r.length > 1 ? new z(t.getObjects(), {
|
|
2806
2908
|
canvas: e
|
|
2807
2909
|
}) : r[0];
|
|
2808
2910
|
n && a.lockObject({
|
|
@@ -2872,7 +2974,7 @@ function kt(o) {
|
|
|
2872
2974
|
});
|
|
2873
2975
|
};
|
|
2874
2976
|
}
|
|
2875
|
-
class
|
|
2977
|
+
class ae {
|
|
2876
2978
|
constructor(e) {
|
|
2877
2979
|
var t = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
|
|
2878
2980
|
this.options = t;
|
|
@@ -2906,15 +3008,15 @@ class te {
|
|
|
2906
3008
|
editor: e
|
|
2907
3009
|
}), e.canvasManager = new Mt({
|
|
2908
3010
|
editor: e
|
|
2909
|
-
}), e.imageManager = new
|
|
3011
|
+
}), e.imageManager = new C({
|
|
2910
3012
|
editor: e
|
|
2911
|
-
}), e.layerManager = new
|
|
3013
|
+
}), e.layerManager = new H({
|
|
2912
3014
|
editor: e
|
|
2913
3015
|
}), e.shapeManager = new Dt({
|
|
2914
3016
|
editor: e
|
|
2915
3017
|
}), e.interactionBlocker = new yt({
|
|
2916
3018
|
editor: e
|
|
2917
|
-
}), e.clipboardManager = new
|
|
3019
|
+
}), e.clipboardManager = new Nt({
|
|
2918
3020
|
editor: e
|
|
2919
3021
|
}), e.objectLockManager = new Lt({
|
|
2920
3022
|
editor: e
|
|
@@ -2924,21 +3026,19 @@ class te {
|
|
|
2924
3026
|
editor: e
|
|
2925
3027
|
}), e.deletionManager = new Et({
|
|
2926
3028
|
editor: e
|
|
2927
|
-
}), e._createMonageArea(), e._createClippingArea(), e.listeners = new
|
|
3029
|
+
}), e._createMonageArea(), e._createClippingArea(), e.listeners = new Z({
|
|
2928
3030
|
editor: e,
|
|
2929
3031
|
options: e.options
|
|
2930
3032
|
}), e.canvasManager.setEditorContainerWidth(t), e.canvasManager.setEditorContainerHeight(a), e.canvasManager.setCanvasWrapperWidth(r), e.canvasManager.setCanvasWrapperHeight(n), e.canvasManager.setCanvasCSSWidth(i), e.canvasManager.setCanvasCSSHeight(s), c != null && c.source) {
|
|
2931
3033
|
var {
|
|
2932
3034
|
source: h,
|
|
2933
3035
|
scale: g = "image-".concat(l),
|
|
2934
|
-
withoutSave: v = !0
|
|
2935
|
-
contentType: m
|
|
3036
|
+
withoutSave: v = !0
|
|
2936
3037
|
} = c;
|
|
2937
3038
|
yield e.imageManager.importImage({
|
|
2938
3039
|
source: h,
|
|
2939
3040
|
scale: g,
|
|
2940
|
-
withoutSave: v
|
|
2941
|
-
contentType: m
|
|
3041
|
+
withoutSave: v
|
|
2942
3042
|
});
|
|
2943
3043
|
} else
|
|
2944
3044
|
e.canvasManager.setDefaultScale({
|
|
@@ -2960,7 +3060,7 @@ class te {
|
|
|
2960
3060
|
this.montageArea = this.shapeManager.addRectangle({
|
|
2961
3061
|
width: e,
|
|
2962
3062
|
height: t,
|
|
2963
|
-
fill:
|
|
3063
|
+
fill: ae._createMosaicPattern(),
|
|
2964
3064
|
stroke: null,
|
|
2965
3065
|
strokeWidth: 0,
|
|
2966
3066
|
selectable: !1,
|
|
@@ -3055,6 +3155,10 @@ const xt = {
|
|
|
3055
3155
|
maxHistoryLength: 50,
|
|
3056
3156
|
// Дефолтный тип скейлинга для объектов (cotain/cover)
|
|
3057
3157
|
scaleType: "contain",
|
|
3158
|
+
/**
|
|
3159
|
+
* Массив допустимых форматов изображений для загрузки в редактор.
|
|
3160
|
+
*/
|
|
3161
|
+
acceptContentTypes: ["image/png", "image/jpeg", "image/jpg", "image/svg+xml", "image/webp"],
|
|
3058
3162
|
// Показывать панель инструментов для выделенного объекта
|
|
3059
3163
|
showToolbar: !0,
|
|
3060
3164
|
// Настройки панели инструментов выделенного объекта.
|
|
@@ -3176,7 +3280,7 @@ function Yt(o) {
|
|
|
3176
3280
|
var r = document.createElement("canvas");
|
|
3177
3281
|
return r.id = "".concat(o, "-canvas"), a.appendChild(r), t.editorContainer = a, new Promise((n) => {
|
|
3178
3282
|
t._onReadyCallback = n;
|
|
3179
|
-
var i = new
|
|
3283
|
+
var i = new ae(r.id, t);
|
|
3180
3284
|
window[o] = i;
|
|
3181
3285
|
});
|
|
3182
3286
|
}
|
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.13",
|
|
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": [
|