@anu3ev/fabric-image-editor 0.1.7 → 0.1.9
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 +137 -115
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -65,9 +65,9 @@ class B {
|
|
|
65
65
|
undoRedoByHotKeys: s,
|
|
66
66
|
selectAllByHotkey: c,
|
|
67
67
|
deleteObjectsByHotkey: u,
|
|
68
|
-
resetObjectFitByDoubleClick:
|
|
68
|
+
resetObjectFitByDoubleClick: l
|
|
69
69
|
} = this.options;
|
|
70
|
-
t && (this.canvas.on("mouse:down", this.handleCanvasDragStartBound), this.canvas.on("mouse:move", this.handleCanvasDraggingBound), this.canvas.on("mouse:up", this.handleCanvasDragEndBound)), a && this.canvas.on("mouse:wheel", this.handleMouseWheelZoomBound), r && (this.canvas.on("selection:created", this.handleBringToFrontBound), this.canvas.on("selection:updated", this.handleBringToFrontBound)),
|
|
70
|
+
t && (this.canvas.on("mouse:down", this.handleCanvasDragStartBound), this.canvas.on("mouse:move", this.handleCanvasDraggingBound), this.canvas.on("mouse:up", this.handleCanvasDragEndBound)), a && this.canvas.on("mouse:wheel", this.handleMouseWheelZoomBound), r && (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.handleAdaptCanvasToContainerBound, {
|
|
71
71
|
capture: !0
|
|
72
72
|
}), n && document.addEventListener("keydown", this.handleCopyEventBound, {
|
|
73
73
|
capture: !0
|
|
@@ -88,24 +88,25 @@ class B {
|
|
|
88
88
|
*/
|
|
89
89
|
_filterLockedSelection(e) {
|
|
90
90
|
var {
|
|
91
|
-
selected: t
|
|
91
|
+
selected: t,
|
|
92
|
+
e: a
|
|
92
93
|
} = e;
|
|
93
|
-
if (t != null && t.length && t.length !== 1) {
|
|
94
|
-
var
|
|
95
|
-
if (
|
|
96
|
-
var
|
|
97
|
-
if (
|
|
94
|
+
if (!(!(t != null && t.length) || !(a instanceof MouseEvent)) && t.length !== 1) {
|
|
95
|
+
var r = t.some((s) => s.locked);
|
|
96
|
+
if (r) {
|
|
97
|
+
var n = t.filter((s) => !s.locked);
|
|
98
|
+
if (n.length === 0) {
|
|
98
99
|
this.canvas.discardActiveObject();
|
|
99
100
|
return;
|
|
100
101
|
}
|
|
101
|
-
if (
|
|
102
|
-
this.canvas.setActiveObject(
|
|
102
|
+
if (n.length === 1) {
|
|
103
|
+
this.canvas.setActiveObject(n[0]);
|
|
103
104
|
return;
|
|
104
105
|
}
|
|
105
|
-
var
|
|
106
|
+
var o = new Z(n, {
|
|
106
107
|
canvas: this.canvas
|
|
107
108
|
});
|
|
108
|
-
this.canvas.setActiveObject(
|
|
109
|
+
this.canvas.setActiveObject(o), this.canvas.requestRenderAll();
|
|
109
110
|
}
|
|
110
111
|
}
|
|
111
112
|
}
|
|
@@ -150,7 +151,7 @@ class B {
|
|
|
150
151
|
}), this.editor.canvasManager.setResolutionHeight(t, {
|
|
151
152
|
adaptCanvasToContainer: !0,
|
|
152
153
|
withoutSave: !0
|
|
153
|
-
}), this.editor.canvasManager.centerMontageArea()
|
|
154
|
+
}), this.editor.canvasManager.centerMontageArea();
|
|
154
155
|
}
|
|
155
156
|
/**
|
|
156
157
|
* Обработчик для Ctrl+C (копирование).
|
|
@@ -185,16 +186,16 @@ class B {
|
|
|
185
186
|
var o = n.getAsFile();
|
|
186
187
|
if (!o) return;
|
|
187
188
|
var s = new FileReader();
|
|
188
|
-
s.onload = (
|
|
189
|
+
s.onload = (h) => {
|
|
189
190
|
this.editor.imageManager.importImage({
|
|
190
|
-
source:
|
|
191
|
+
source: h.target.result
|
|
191
192
|
});
|
|
192
193
|
}, s.readAsDataURL(o);
|
|
193
194
|
return;
|
|
194
195
|
}
|
|
195
196
|
var c = a.getData("text/html");
|
|
196
197
|
if (c) {
|
|
197
|
-
var u = new DOMParser(),
|
|
198
|
+
var u = new DOMParser(), l = u.parseFromString(c, "text/html"), d = l.querySelector("img");
|
|
198
199
|
if (d != null && d.src) {
|
|
199
200
|
this.editor.imageManager.importImage({
|
|
200
201
|
source: d.src
|
|
@@ -757,11 +758,11 @@ class lt {
|
|
|
757
758
|
} = r, {
|
|
758
759
|
icons: c,
|
|
759
760
|
btnStyle: u,
|
|
760
|
-
handlers:
|
|
761
|
+
handlers: l
|
|
761
762
|
} = t.config, d = document.createElement("button");
|
|
762
763
|
d.innerHTML = c[s] ? '<img src="'.concat(c[s], '" title="').concat(o, '" />') : o, Object.assign(d.style, u), d.onclick = () => {
|
|
763
|
-
var
|
|
764
|
-
return (
|
|
764
|
+
var h;
|
|
765
|
+
return (h = l[s]) === null || h === void 0 ? void 0 : h.call(l, t.editor);
|
|
765
766
|
}, t.el.appendChild(d);
|
|
766
767
|
};
|
|
767
768
|
for (var r of e)
|
|
@@ -838,10 +839,10 @@ class lt {
|
|
|
838
839
|
x: c
|
|
839
840
|
} = e.getCenterPoint(), {
|
|
840
841
|
top: u,
|
|
841
|
-
height:
|
|
842
|
-
} = e.getBoundingRect(!1, !0), d = c * n + o,
|
|
842
|
+
height: l
|
|
843
|
+
} = e.getBoundingRect(!1, !0), d = c * n + o, h = d - t.offsetWidth / 2, g = (u + l) * n + s + a.offsetTop;
|
|
843
844
|
Object.assign(t.style, {
|
|
844
|
-
left: "".concat(
|
|
845
|
+
left: "".concat(h, "px"),
|
|
845
846
|
top: "".concat(g, "px"),
|
|
846
847
|
display: "flex"
|
|
847
848
|
});
|
|
@@ -1099,11 +1100,11 @@ class L {
|
|
|
1099
1100
|
canvas: s,
|
|
1100
1101
|
montageArea: c,
|
|
1101
1102
|
transformManager: u,
|
|
1102
|
-
historyManager:
|
|
1103
|
+
historyManager: l
|
|
1103
1104
|
} = t.editor;
|
|
1104
|
-
|
|
1105
|
+
l.suspendHistory();
|
|
1105
1106
|
try {
|
|
1106
|
-
var d,
|
|
1107
|
+
var d, h;
|
|
1107
1108
|
if (a instanceof File)
|
|
1108
1109
|
d = URL.createObjectURL(a);
|
|
1109
1110
|
else if (typeof a == "string") {
|
|
@@ -1120,24 +1121,24 @@ class L {
|
|
|
1120
1121
|
var v = L.getFormatFromContentType(o);
|
|
1121
1122
|
if (v === "svg") {
|
|
1122
1123
|
var j = yield ke(d);
|
|
1123
|
-
|
|
1124
|
+
h = z.groupSVGElements(j.objects, j.options);
|
|
1124
1125
|
} else
|
|
1125
|
-
|
|
1126
|
+
h = yield de.fromURL(d, {
|
|
1126
1127
|
crossOrigin: "anonymous"
|
|
1127
1128
|
});
|
|
1128
1129
|
var {
|
|
1129
1130
|
width: m,
|
|
1130
1131
|
height: b
|
|
1131
|
-
} =
|
|
1132
|
+
} = h;
|
|
1132
1133
|
if (b > C || m > D) {
|
|
1133
|
-
var y = yield t.resizeImageToBoundaries(
|
|
1134
|
-
t._createdBlobUrls.push(S),
|
|
1134
|
+
var y = yield t.resizeImageToBoundaries(h._element.src, "max"), S = URL.createObjectURL(y);
|
|
1135
|
+
t._createdBlobUrls.push(S), h = yield de.fromURL(S, {
|
|
1135
1136
|
crossOrigin: "anonymous"
|
|
1136
1137
|
});
|
|
1137
1138
|
}
|
|
1138
|
-
if (
|
|
1139
|
+
if (h.set("id", "".concat(h.type, "-").concat(I())), h.set("format", v), r === "scale-montage")
|
|
1139
1140
|
t.editor.canvasManager.scaleMontageAreaToImage({
|
|
1140
|
-
object:
|
|
1141
|
+
object: h,
|
|
1141
1142
|
withoutSave: !0
|
|
1142
1143
|
});
|
|
1143
1144
|
else {
|
|
@@ -1146,24 +1147,24 @@ class L {
|
|
|
1146
1147
|
height: A
|
|
1147
1148
|
} = c, w = Y({
|
|
1148
1149
|
montageArea: c,
|
|
1149
|
-
imageObject:
|
|
1150
|
+
imageObject: h,
|
|
1150
1151
|
scaleType: r
|
|
1151
1152
|
});
|
|
1152
1153
|
r === "image-contain" && w < 1 ? u.fitObject({
|
|
1153
|
-
object:
|
|
1154
|
+
object: h,
|
|
1154
1155
|
type: "contain",
|
|
1155
1156
|
withoutSave: !0
|
|
1156
1157
|
}) : r === "image-cover" && (m > O || b > A) && u.fitObject({
|
|
1157
|
-
object:
|
|
1158
|
+
object: h,
|
|
1158
1159
|
type: "cover",
|
|
1159
1160
|
withoutSave: !0
|
|
1160
1161
|
});
|
|
1161
1162
|
}
|
|
1162
|
-
s.add(
|
|
1163
|
+
s.add(h), s.centerObject(h), s.setActiveObject(h), s.renderAll(), l.resumeHistory(), n || l.saveState();
|
|
1163
1164
|
} catch (T) {
|
|
1164
1165
|
console.error("importImage. Ошибка импорта изображения: ", T), s.fire("editor:error", {
|
|
1165
1166
|
message: "Ошибка импорта изображения: ".concat(T.message)
|
|
1166
|
-
}),
|
|
1167
|
+
}), l.resumeHistory();
|
|
1167
1168
|
}
|
|
1168
1169
|
}
|
|
1169
1170
|
})();
|
|
@@ -1215,7 +1216,7 @@ class L {
|
|
|
1215
1216
|
canvas: s,
|
|
1216
1217
|
montageArea: c,
|
|
1217
1218
|
workerManager: u
|
|
1218
|
-
} = t.editor,
|
|
1219
|
+
} = t.editor, l = r === "application/pdf", d = l ? "image/jpg" : r, h = L.getFormatFromContentType(d);
|
|
1219
1220
|
c.setCoords();
|
|
1220
1221
|
var {
|
|
1221
1222
|
left: g,
|
|
@@ -1232,7 +1233,7 @@ class L {
|
|
|
1232
1233
|
backstoreOnly: !0
|
|
1233
1234
|
}), m.renderAll();
|
|
1234
1235
|
var y = m.getObjects().filter((N) => N.format).every((N) => N.format === "svg");
|
|
1235
|
-
if (
|
|
1236
|
+
if (h === "svg" && y) {
|
|
1236
1237
|
var S = m.toSVG();
|
|
1237
1238
|
m.dispose();
|
|
1238
1239
|
var O = L._exportSVGStringAsFile(S, {
|
|
@@ -1253,18 +1254,18 @@ class L {
|
|
|
1253
1254
|
if (m.dispose(), o) {
|
|
1254
1255
|
var T = {
|
|
1255
1256
|
image: w,
|
|
1256
|
-
format:
|
|
1257
|
+
format: h,
|
|
1257
1258
|
contentType: d,
|
|
1258
1259
|
fileName: a
|
|
1259
1260
|
};
|
|
1260
1261
|
return s.fire("editor:canvas-exported", T), T;
|
|
1261
1262
|
}
|
|
1262
1263
|
var ae = yield createImageBitmap(w), re = yield u.post("toDataURL", {
|
|
1263
|
-
format:
|
|
1264
|
+
format: h,
|
|
1264
1265
|
quality: 1,
|
|
1265
1266
|
bitmap: ae
|
|
1266
1267
|
}, [ae]);
|
|
1267
|
-
if (
|
|
1268
|
+
if (l) {
|
|
1268
1269
|
var ne = 0.264583, W = v * ne, _ = j * ne, we = (yield t.editor.moduleLoader.loadModule("jspdf")).jsPDF, R = new we({
|
|
1269
1270
|
orientation: W > _ ? "landscape" : "portrait",
|
|
1270
1271
|
unit: "mm",
|
|
@@ -1292,17 +1293,17 @@ class L {
|
|
|
1292
1293
|
if (n) {
|
|
1293
1294
|
var se = {
|
|
1294
1295
|
image: re,
|
|
1295
|
-
format:
|
|
1296
|
+
format: h,
|
|
1296
1297
|
contentType: d,
|
|
1297
1298
|
fileName: a
|
|
1298
1299
|
};
|
|
1299
1300
|
return s.fire("editor:canvas-exported", se), se;
|
|
1300
1301
|
}
|
|
1301
|
-
var ce =
|
|
1302
|
+
var ce = h === "svg" && !y ? a.replace(/\.[^/.]+$/, ".png") : a, Le = new File([w], ce, {
|
|
1302
1303
|
type: d
|
|
1303
1304
|
}), ue = {
|
|
1304
1305
|
image: Le,
|
|
1305
|
-
format:
|
|
1306
|
+
format: h,
|
|
1306
1307
|
contentType: d,
|
|
1307
1308
|
fileName: ce
|
|
1308
1309
|
};
|
|
@@ -1332,14 +1333,14 @@ class L {
|
|
|
1332
1333
|
} = e.length > 0 && e[0] !== void 0 ? e[0] : {}, {
|
|
1333
1334
|
canvas: c,
|
|
1334
1335
|
workerManager: u
|
|
1335
|
-
} = t.editor,
|
|
1336
|
-
if (!
|
|
1336
|
+
} = t.editor, l = a || c.getActiveObject();
|
|
1337
|
+
if (!l)
|
|
1337
1338
|
return console.error("exportObjectAsDataURL. Не выбран объект"), c.fire("editor:error", {
|
|
1338
1339
|
message: "Не выбран объект для экспорта"
|
|
1339
1340
|
}), "";
|
|
1340
1341
|
var d = L.getFormatFromContentType(n);
|
|
1341
1342
|
if (d === "svg") {
|
|
1342
|
-
var
|
|
1343
|
+
var h = l.toSVG(), g = t._exportSVGStringAsFile(h, {
|
|
1343
1344
|
exportAsBase64: o,
|
|
1344
1345
|
exportAsBlob: s,
|
|
1345
1346
|
fileName: r
|
|
@@ -1352,7 +1353,7 @@ class L {
|
|
|
1352
1353
|
return c.fire("editor:object-exported", f), f;
|
|
1353
1354
|
}
|
|
1354
1355
|
if (o) {
|
|
1355
|
-
var v = yield createImageBitmap(
|
|
1356
|
+
var v = yield createImageBitmap(l._element), j = yield u.post("toDataURL", {
|
|
1356
1357
|
format: d,
|
|
1357
1358
|
quality: 1,
|
|
1358
1359
|
bitmap: v
|
|
@@ -1364,7 +1365,7 @@ class L {
|
|
|
1364
1365
|
};
|
|
1365
1366
|
return c.fire("editor:object-exported", m), m;
|
|
1366
1367
|
}
|
|
1367
|
-
var b =
|
|
1368
|
+
var b = l.toCanvasElement(), y = yield new Promise((w) => {
|
|
1368
1369
|
b.toBlob(w);
|
|
1369
1370
|
});
|
|
1370
1371
|
if (s) {
|
|
@@ -1464,14 +1465,14 @@ class jt {
|
|
|
1464
1465
|
} = this.editor, {
|
|
1465
1466
|
width: c,
|
|
1466
1467
|
height: u
|
|
1467
|
-
} = o,
|
|
1468
|
-
if (!s || s === "auto" || r ? this.adaptCanvasToContainer() : s ? this.setCanvasBackstoreWidth(s) : this.setCanvasBackstoreWidth(
|
|
1469
|
-
width:
|
|
1468
|
+
} = o, l = Number(Math.max(Math.min(e, D), k));
|
|
1469
|
+
if (!s || s === "auto" || r ? this.adaptCanvasToContainer() : s ? this.setCanvasBackstoreWidth(s) : this.setCanvasBackstoreWidth(l), o.set({
|
|
1470
|
+
width: l
|
|
1470
1471
|
}), n.clipPath.set({
|
|
1471
|
-
width:
|
|
1472
|
+
width: l
|
|
1472
1473
|
}), t) {
|
|
1473
|
-
var d =
|
|
1474
|
-
this.setResolutionHeight(
|
|
1474
|
+
var d = l / c, h = u * d;
|
|
1475
|
+
this.setResolutionHeight(h);
|
|
1475
1476
|
return;
|
|
1476
1477
|
}
|
|
1477
1478
|
var {
|
|
@@ -1507,14 +1508,14 @@ class jt {
|
|
|
1507
1508
|
} = this.editor, {
|
|
1508
1509
|
width: c,
|
|
1509
1510
|
height: u
|
|
1510
|
-
} = o,
|
|
1511
|
-
if (!s || s === "auto" || r ? this.adaptCanvasToContainer() : s ? this.setCanvasBackstoreHeight(s) : this.setCanvasBackstoreHeight(
|
|
1512
|
-
height:
|
|
1511
|
+
} = o, l = Number(Math.max(Math.min(e, C), x));
|
|
1512
|
+
if (!s || s === "auto" || r ? this.adaptCanvasToContainer() : s ? this.setCanvasBackstoreHeight(s) : this.setCanvasBackstoreHeight(l), o.set({
|
|
1513
|
+
height: l
|
|
1513
1514
|
}), n.clipPath.set({
|
|
1514
|
-
height:
|
|
1515
|
+
height: l
|
|
1515
1516
|
}), t) {
|
|
1516
|
-
var d =
|
|
1517
|
-
this.setResolutionWidth(
|
|
1517
|
+
var d = l / u, h = c * d;
|
|
1518
|
+
this.setResolutionWidth(h);
|
|
1518
1519
|
return;
|
|
1519
1520
|
}
|
|
1520
1521
|
var {
|
|
@@ -1707,16 +1708,16 @@ class jt {
|
|
|
1707
1708
|
}
|
|
1708
1709
|
var s = t === "width" ? "width" : "height";
|
|
1709
1710
|
if (typeof a == "string") {
|
|
1710
|
-
o.forEach((
|
|
1711
|
-
|
|
1711
|
+
o.forEach((l) => {
|
|
1712
|
+
l.style[s] = a;
|
|
1712
1713
|
});
|
|
1713
1714
|
return;
|
|
1714
1715
|
}
|
|
1715
1716
|
var c = parseFloat(a);
|
|
1716
1717
|
if (!isNaN(c)) {
|
|
1717
1718
|
var u = "".concat(c, "px");
|
|
1718
|
-
o.forEach((
|
|
1719
|
-
|
|
1719
|
+
o.forEach((l) => {
|
|
1720
|
+
l.style[s] = u;
|
|
1720
1721
|
}), r.fire("editor:display-".concat(e, "-").concat(s, "-changed"), {
|
|
1721
1722
|
element: e,
|
|
1722
1723
|
value: a
|
|
@@ -1748,28 +1749,28 @@ class jt {
|
|
|
1748
1749
|
} = this.editor, u = e || r.getActiveObject();
|
|
1749
1750
|
if (!(!u || u.type !== "image" && u.format !== "svg")) {
|
|
1750
1751
|
var {
|
|
1751
|
-
width:
|
|
1752
|
+
width: l,
|
|
1752
1753
|
height: d
|
|
1753
1754
|
} = u;
|
|
1754
|
-
if (
|
|
1755
|
-
var
|
|
1756
|
-
console.warn("scaleMontageAreaToImage. ".concat(
|
|
1757
|
-
message:
|
|
1755
|
+
if (l < k || d < x) {
|
|
1756
|
+
var h = "Размер изображения меньше минимального размера канваса, поэтому оно будет растянуто до минимальных размеров: ".concat(k, "x").concat(x);
|
|
1757
|
+
console.warn("scaleMontageAreaToImage. ".concat(h)), r.fire("editor:warning", {
|
|
1758
|
+
message: h
|
|
1758
1759
|
});
|
|
1759
1760
|
}
|
|
1760
|
-
var g = Math.min(
|
|
1761
|
+
var g = Math.min(l, D), f = Math.min(d, C);
|
|
1761
1762
|
if (t) {
|
|
1762
1763
|
var {
|
|
1763
1764
|
width: v,
|
|
1764
1765
|
height: j
|
|
1765
|
-
} = n, m =
|
|
1766
|
+
} = n, m = l / v, b = d / j, y = Math.max(m, b);
|
|
1766
1767
|
g = v * y, f = j * y;
|
|
1767
1768
|
}
|
|
1768
1769
|
this.setResolutionWidth(g, {
|
|
1769
1770
|
withoutSave: !0
|
|
1770
1771
|
}), this.setResolutionHeight(f, {
|
|
1771
1772
|
withoutSave: !0
|
|
1772
|
-
}), (
|
|
1773
|
+
}), (l > s || d > c) && o.calculateAndApplyDefaultZoom(s, c), o.resetObject(u, {
|
|
1773
1774
|
withoutSave: !0
|
|
1774
1775
|
}), r.centerObject(u), r.renderAll(), a || this.editor.historyManager.saveState(), r.fire("editor:canvas-scaled", {
|
|
1775
1776
|
width: g,
|
|
@@ -1853,9 +1854,9 @@ class yt {
|
|
|
1853
1854
|
} = this.editor.montageArea, n = e / a, o = t / r, s = Math.min(n, o), {
|
|
1854
1855
|
minZoom: c,
|
|
1855
1856
|
maxZoom: u,
|
|
1856
|
-
maxZoomFactor:
|
|
1857
|
+
maxZoomFactor: l
|
|
1857
1858
|
} = this.options;
|
|
1858
|
-
this.minZoom = Math.min(s /
|
|
1859
|
+
this.minZoom = Math.min(s / l, c), this.maxZoom = Math.max(s * l, u), this.defaultZoom = s, this.setZoom(s);
|
|
1859
1860
|
}
|
|
1860
1861
|
/**
|
|
1861
1862
|
* Увеличение/уменьшение масштаба
|
|
@@ -2025,18 +2026,18 @@ class yt {
|
|
|
2025
2026
|
if (c) {
|
|
2026
2027
|
if (["activeselection"].includes(c.type) && !r) {
|
|
2027
2028
|
var u = c.getObjects();
|
|
2028
|
-
n.discardActiveObject(), u.forEach((
|
|
2029
|
+
n.discardActiveObject(), u.forEach((h) => {
|
|
2029
2030
|
var g = Y({
|
|
2030
2031
|
montageArea: o,
|
|
2031
|
-
imageObject:
|
|
2032
|
+
imageObject: h,
|
|
2032
2033
|
scaleType: t
|
|
2033
2034
|
});
|
|
2034
|
-
|
|
2035
|
+
h.scale(g), n.centerObject(h);
|
|
2035
2036
|
});
|
|
2036
|
-
var
|
|
2037
|
+
var l = new Z(u, {
|
|
2037
2038
|
canvas: n
|
|
2038
2039
|
});
|
|
2039
|
-
n.setActiveObject(
|
|
2040
|
+
n.setActiveObject(l);
|
|
2040
2041
|
} else {
|
|
2041
2042
|
var d = Y({
|
|
2042
2043
|
montageArea: o,
|
|
@@ -2092,16 +2093,16 @@ class yt {
|
|
|
2092
2093
|
else {
|
|
2093
2094
|
var {
|
|
2094
2095
|
width: u,
|
|
2095
|
-
height:
|
|
2096
|
+
height: l
|
|
2096
2097
|
} = n, {
|
|
2097
2098
|
width: d,
|
|
2098
|
-
height:
|
|
2099
|
+
height: h
|
|
2099
2100
|
} = c, g = Y({
|
|
2100
2101
|
montageArea: n,
|
|
2101
2102
|
imageObject: c,
|
|
2102
2103
|
scaleType: s
|
|
2103
2104
|
});
|
|
2104
|
-
s === "contain" && g < 1 || s === "cover" && (d > u ||
|
|
2105
|
+
s === "contain" && g < 1 || s === "cover" && (d > u || h > l) ? this.fitObject({
|
|
2105
2106
|
object: c,
|
|
2106
2107
|
withoutSave: !0
|
|
2107
2108
|
}) : c.set({
|
|
@@ -2324,10 +2325,21 @@ class H {
|
|
|
2324
2325
|
* @private
|
|
2325
2326
|
*/
|
|
2326
2327
|
static _moveSelectionForward(e, t) {
|
|
2327
|
-
for (var a = e.getObjects(), r = t.getObjects(), n = r.
|
|
2328
|
-
|
|
2329
|
-
|
|
2330
|
-
|
|
2328
|
+
for (var a = e.getObjects(), r = t.getObjects(), n = r.map((l) => a.indexOf(l)), o = -1, s = function(d) {
|
|
2329
|
+
var h = a[d];
|
|
2330
|
+
if (!r.includes(h) && n.some((g) => d > g))
|
|
2331
|
+
return o = d, 1;
|
|
2332
|
+
}, c = 0; c < a.length && !s(c); c++)
|
|
2333
|
+
;
|
|
2334
|
+
if (o !== -1) {
|
|
2335
|
+
var u = r.map((l) => ({
|
|
2336
|
+
obj: l,
|
|
2337
|
+
index: a.indexOf(l)
|
|
2338
|
+
})).sort((l, d) => d.index - l.index);
|
|
2339
|
+
u.forEach((l) => {
|
|
2340
|
+
var d = a.indexOf(l.obj);
|
|
2341
|
+
d < o && (e.moveObjectTo(l.obj, o), o = d);
|
|
2342
|
+
});
|
|
2331
2343
|
}
|
|
2332
2344
|
}
|
|
2333
2345
|
/**
|
|
@@ -2435,10 +2447,10 @@ class Ct {
|
|
|
2435
2447
|
fill: s = "blue"
|
|
2436
2448
|
} = e, c = G(e, bt), {
|
|
2437
2449
|
withoutSelection: u,
|
|
2438
|
-
withoutAdding:
|
|
2450
|
+
withoutAdding: l
|
|
2439
2451
|
} = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, {
|
|
2440
2452
|
canvas: d
|
|
2441
|
-
} = this.editor,
|
|
2453
|
+
} = this.editor, h = new Be(F({
|
|
2442
2454
|
id: t,
|
|
2443
2455
|
left: a,
|
|
2444
2456
|
top: r,
|
|
@@ -2446,7 +2458,7 @@ class Ct {
|
|
|
2446
2458
|
height: o,
|
|
2447
2459
|
fill: s
|
|
2448
2460
|
}, c));
|
|
2449
|
-
return !a && !r && d.centerObject(
|
|
2461
|
+
return !a && !r && d.centerObject(h), l || (d.add(h), u || d.setActiveObject(h), d.renderAll()), h;
|
|
2450
2462
|
}
|
|
2451
2463
|
/**
|
|
2452
2464
|
* Добавление круга
|
|
@@ -2473,7 +2485,7 @@ class Ct {
|
|
|
2473
2485
|
withoutSelection: c,
|
|
2474
2486
|
withoutAdding: u
|
|
2475
2487
|
} = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, {
|
|
2476
|
-
canvas:
|
|
2488
|
+
canvas: l
|
|
2477
2489
|
} = this.editor, d = new Ze(F({
|
|
2478
2490
|
id: t,
|
|
2479
2491
|
left: a,
|
|
@@ -2481,7 +2493,7 @@ class Ct {
|
|
|
2481
2493
|
fill: o,
|
|
2482
2494
|
radius: n
|
|
2483
2495
|
}, s));
|
|
2484
|
-
return !a && !r &&
|
|
2496
|
+
return !a && !r && l.centerObject(d), u || (l.add(d), c || l.setActiveObject(d), l.renderAll()), d;
|
|
2485
2497
|
}
|
|
2486
2498
|
/**
|
|
2487
2499
|
* Добавление треугольника
|
|
@@ -2508,10 +2520,10 @@ class Ct {
|
|
|
2508
2520
|
fill: s = "yellow"
|
|
2509
2521
|
} = e, c = G(e, St), {
|
|
2510
2522
|
withoutSelection: u,
|
|
2511
|
-
withoutAdding:
|
|
2523
|
+
withoutAdding: l
|
|
2512
2524
|
} = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, {
|
|
2513
2525
|
canvas: d
|
|
2514
|
-
} = this.editor,
|
|
2526
|
+
} = this.editor, h = new ze(F({
|
|
2515
2527
|
id: t,
|
|
2516
2528
|
left: a,
|
|
2517
2529
|
top: r,
|
|
@@ -2519,7 +2531,7 @@ class Ct {
|
|
|
2519
2531
|
width: n,
|
|
2520
2532
|
height: o
|
|
2521
2533
|
}, c));
|
|
2522
|
-
return !a && !r && d.centerObject(
|
|
2534
|
+
return !a && !r && d.centerObject(h), l || (d.add(h), u || d.setActiveObject(h), d.renderAll()), h;
|
|
2523
2535
|
}
|
|
2524
2536
|
}
|
|
2525
2537
|
function ye(i, e, t, a, r, n, o) {
|
|
@@ -2648,13 +2660,14 @@ class Ot {
|
|
|
2648
2660
|
lockObject() {
|
|
2649
2661
|
var {
|
|
2650
2662
|
object: e,
|
|
2651
|
-
|
|
2663
|
+
skipInnerObjects: t,
|
|
2664
|
+
withoutSave: a
|
|
2652
2665
|
} = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, {
|
|
2653
|
-
canvas:
|
|
2654
|
-
historyManager:
|
|
2655
|
-
} = this.editor,
|
|
2656
|
-
if (
|
|
2657
|
-
var
|
|
2666
|
+
canvas: r,
|
|
2667
|
+
historyManager: n
|
|
2668
|
+
} = this.editor, o = e || r.getActiveObject();
|
|
2669
|
+
if (!(!o || o.locked)) {
|
|
2670
|
+
var s = {
|
|
2658
2671
|
lockMovementX: !0,
|
|
2659
2672
|
lockMovementY: !0,
|
|
2660
2673
|
lockRotation: !0,
|
|
@@ -2664,10 +2677,12 @@ class Ot {
|
|
|
2664
2677
|
lockSkewingY: !0,
|
|
2665
2678
|
locked: !0
|
|
2666
2679
|
};
|
|
2667
|
-
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
|
|
2680
|
+
o.set(s);
|
|
2681
|
+
var c = !t && ["activeselection", "group"].includes(o.type);
|
|
2682
|
+
c && o.getObjects().forEach((u) => {
|
|
2683
|
+
u.set(s);
|
|
2684
|
+
}), r.renderAll(), a || n.saveState(), r.fire("editor:object-locked", {
|
|
2685
|
+
object: o
|
|
2671
2686
|
});
|
|
2672
2687
|
}
|
|
2673
2688
|
}
|
|
@@ -2784,14 +2799,19 @@ class Et {
|
|
|
2784
2799
|
selectAll() {
|
|
2785
2800
|
var {
|
|
2786
2801
|
canvas: e,
|
|
2787
|
-
canvasManager: t
|
|
2802
|
+
canvasManager: t,
|
|
2803
|
+
objectLockManager: a
|
|
2788
2804
|
} = this.editor;
|
|
2789
2805
|
e.discardActiveObject();
|
|
2790
|
-
var
|
|
2806
|
+
var r = t.getObjects(), n = r.some((s) => s.locked), o = r.length > 1 ? new Z(t.getObjects(), {
|
|
2791
2807
|
canvas: e
|
|
2792
|
-
}) :
|
|
2793
|
-
|
|
2794
|
-
|
|
2808
|
+
}) : r[0];
|
|
2809
|
+
n && a.lockObject({
|
|
2810
|
+
object: o,
|
|
2811
|
+
skipInnerObjects: !0,
|
|
2812
|
+
withoutSave: !0
|
|
2813
|
+
}), e.setActiveObject(o), e.requestRenderAll(), e.fire("editor:all-objects-selected", {
|
|
2814
|
+
selected: o
|
|
2795
2815
|
});
|
|
2796
2816
|
}
|
|
2797
2817
|
}
|
|
@@ -2876,7 +2896,7 @@ class Bt {
|
|
|
2876
2896
|
canvasCSSHeight: s,
|
|
2877
2897
|
initialImage: c,
|
|
2878
2898
|
initialStateJSON: u,
|
|
2879
|
-
scaleType:
|
|
2899
|
+
scaleType: l,
|
|
2880
2900
|
_onReadyCallback: d
|
|
2881
2901
|
} = e.options;
|
|
2882
2902
|
if ($e.apply(), e.canvas = new Pe(e.containerId, e.options), e.moduleLoader = new _e(), e.workerManager = new Re(), e.historyManager = new ht({
|
|
@@ -2910,13 +2930,13 @@ class Bt {
|
|
|
2910
2930
|
options: e.options
|
|
2911
2931
|
}), e.canvasManager.setEditorContainerWidth(t), e.canvasManager.setEditorContainerHeight(a), e.canvasManager.setCanvasWrapperWidth(r), e.canvasManager.setCanvasWrapperHeight(n), e.canvasManager.setCanvasCSSWidth(o), e.canvasManager.setCanvasCSSHeight(s), c != null && c.source) {
|
|
2912
2932
|
var {
|
|
2913
|
-
source:
|
|
2914
|
-
scale: g = "image-".concat(
|
|
2933
|
+
source: h,
|
|
2934
|
+
scale: g = "image-".concat(l),
|
|
2915
2935
|
withoutSave: f = !0,
|
|
2916
2936
|
contentType: v
|
|
2917
2937
|
} = c;
|
|
2918
2938
|
yield e.imageManager.importImage({
|
|
2919
|
-
source:
|
|
2939
|
+
source: h,
|
|
2920
2940
|
scale: g,
|
|
2921
2941
|
withoutSave: f,
|
|
2922
2942
|
contentType: v
|
|
@@ -3019,6 +3039,8 @@ const Zt = {
|
|
|
3019
3039
|
// Container CSS width and height
|
|
3020
3040
|
editorContainerWidth: "fit-content",
|
|
3021
3041
|
editorContainerHeight: "100%",
|
|
3042
|
+
// Максимальная длина истории действий
|
|
3043
|
+
maxHistoryLength: 50,
|
|
3022
3044
|
// Дефолтный тип скейлинга для объектов (cotain/cover)
|
|
3023
3045
|
scaleType: "contain",
|
|
3024
3046
|
// Показывать панель инструментов для выделенного объекта
|
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.9",
|
|
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": [
|