@anu3ev/fabric-image-editor 0.1.4 → 0.1.6
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 +184 -177
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -8,8 +8,8 @@ var He = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", I =
|
|
|
8
8
|
function le(i, e, t, a, r, n, o) {
|
|
9
9
|
try {
|
|
10
10
|
var s = i[n](o), c = s.value;
|
|
11
|
-
} catch (
|
|
12
|
-
return void t(
|
|
11
|
+
} catch (u) {
|
|
12
|
+
return void t(u);
|
|
13
13
|
}
|
|
14
14
|
s.done ? e(c) : Promise.resolve(c).then(a, r);
|
|
15
15
|
}
|
|
@@ -64,10 +64,10 @@ class B {
|
|
|
64
64
|
pasteImageFromClipboard: o,
|
|
65
65
|
undoRedoByHotKeys: s,
|
|
66
66
|
selectAllByHotkey: c,
|
|
67
|
-
deleteObjectsByHotkey:
|
|
68
|
-
resetObjectFitByDoubleClick:
|
|
67
|
+
deleteObjectsByHotkey: u,
|
|
68
|
+
resetObjectFitByDoubleClick: h
|
|
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)), h && 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
|
|
@@ -79,7 +79,7 @@ class B {
|
|
|
79
79
|
capture: !0
|
|
80
80
|
})), c && document.addEventListener("keydown", this.handleSelectAllEventBound, {
|
|
81
81
|
capture: !0
|
|
82
|
-
}),
|
|
82
|
+
}), u && document.addEventListener("keydown", this.handleDeleteObjectsEventBound, {
|
|
83
83
|
capture: !0
|
|
84
84
|
}), 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.bind(this)), this.canvas.on("selection:updated", this.handleLockedSelectionBound.bind(this));
|
|
85
85
|
}
|
|
@@ -185,19 +185,19 @@ class B {
|
|
|
185
185
|
var o = n.getAsFile();
|
|
186
186
|
if (!o) return;
|
|
187
187
|
var s = new FileReader();
|
|
188
|
-
s.onload = (
|
|
188
|
+
s.onload = (l) => {
|
|
189
189
|
this.editor.imageManager.importImage({
|
|
190
|
-
source:
|
|
190
|
+
source: l.target.result
|
|
191
191
|
});
|
|
192
192
|
}, s.readAsDataURL(o);
|
|
193
193
|
return;
|
|
194
194
|
}
|
|
195
195
|
var c = a.getData("text/html");
|
|
196
196
|
if (c) {
|
|
197
|
-
var
|
|
198
|
-
if (
|
|
197
|
+
var u = new DOMParser(), h = u.parseFromString(c, "text/html"), d = h.querySelector("img");
|
|
198
|
+
if (d != null && d.src) {
|
|
199
199
|
this.editor.imageManager.importImage({
|
|
200
|
-
source:
|
|
200
|
+
source: d.src
|
|
201
201
|
});
|
|
202
202
|
return;
|
|
203
203
|
}
|
|
@@ -543,8 +543,8 @@ var qe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAw
|
|
|
543
543
|
function ve(i, e, t, a, r, n, o) {
|
|
544
544
|
try {
|
|
545
545
|
var s = i[n](o), c = s.value;
|
|
546
|
-
} catch (
|
|
547
|
-
return void t(
|
|
546
|
+
} catch (u) {
|
|
547
|
+
return void t(u);
|
|
548
548
|
}
|
|
549
549
|
s.done ? e(c) : Promise.resolve(c).then(a, r);
|
|
550
550
|
}
|
|
@@ -756,13 +756,13 @@ class lt {
|
|
|
756
756
|
handle: s
|
|
757
757
|
} = r, {
|
|
758
758
|
icons: c,
|
|
759
|
-
btnStyle:
|
|
760
|
-
handlers:
|
|
761
|
-
} = t.config,
|
|
762
|
-
|
|
763
|
-
var
|
|
764
|
-
return (
|
|
765
|
-
}, t.el.appendChild(
|
|
759
|
+
btnStyle: u,
|
|
760
|
+
handlers: h
|
|
761
|
+
} = t.config, d = document.createElement("button");
|
|
762
|
+
d.innerHTML = c[s] ? '<img src="'.concat(c[s], '" title="').concat(o, '" />') : o, Object.assign(d.style, u), d.onclick = () => {
|
|
763
|
+
var l;
|
|
764
|
+
return (l = h[s]) === null || l === void 0 ? void 0 : l.call(h, t.editor);
|
|
765
|
+
}, t.el.appendChild(d);
|
|
766
766
|
};
|
|
767
767
|
for (var r of e)
|
|
768
768
|
a();
|
|
@@ -837,11 +837,11 @@ class lt {
|
|
|
837
837
|
var n = r.getZoom(), [, , , , o, s] = r.viewportTransform, {
|
|
838
838
|
x: c
|
|
839
839
|
} = e.getCenterPoint(), {
|
|
840
|
-
top:
|
|
841
|
-
height:
|
|
842
|
-
} = e.getBoundingRect(!1, !0),
|
|
840
|
+
top: u,
|
|
841
|
+
height: h
|
|
842
|
+
} = e.getBoundingRect(!1, !0), d = c * n + o, l = d - t.offsetWidth / 2, g = (u + h) * n + s + a.offsetTop;
|
|
843
843
|
Object.assign(t.style, {
|
|
844
|
-
left: "".concat(
|
|
844
|
+
left: "".concat(l, "px"),
|
|
845
845
|
top: "".concat(g, "px"),
|
|
846
846
|
display: "flex"
|
|
847
847
|
});
|
|
@@ -857,8 +857,8 @@ class lt {
|
|
|
857
857
|
function fe(i, e, t, a, r, n, o) {
|
|
858
858
|
try {
|
|
859
859
|
var s = i[n](o), c = s.value;
|
|
860
|
-
} catch (
|
|
861
|
-
return void t(
|
|
860
|
+
} catch (u) {
|
|
861
|
+
return void t(u);
|
|
862
862
|
}
|
|
863
863
|
s.done ? e(c) : Promise.resolve(c).then(a, r);
|
|
864
864
|
}
|
|
@@ -932,7 +932,7 @@ class ht {
|
|
|
932
932
|
saveState() {
|
|
933
933
|
if (console.log("saveState"), !this.skipHistory) {
|
|
934
934
|
console.time("saveState");
|
|
935
|
-
var e = this.canvas.toDatalessObject(["selectable", "evented", "id", "format", "width", "height", "locked"]);
|
|
935
|
+
var e = this.canvas.toDatalessObject(["selectable", "evented", "id", "format", "width", "height", "locked", "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX", "lockScalingY", "lockSkewingX", "lockSkewingY"]);
|
|
936
936
|
if (console.timeEnd("saveState"), !this.baseState) {
|
|
937
937
|
this.baseState = e, this.patches = [], this.currentIndex = 0, console.log("Базовое состояние сохранено.");
|
|
938
938
|
return;
|
|
@@ -1043,8 +1043,8 @@ var vt = 0.1, mt = 2, ft = 0.1, Mt = 90, k = 16, x = 16, D = 4096, C = 4096;
|
|
|
1043
1043
|
function Me(i, e, t, a, r, n, o) {
|
|
1044
1044
|
try {
|
|
1045
1045
|
var s = i[n](o), c = s.value;
|
|
1046
|
-
} catch (
|
|
1047
|
-
return void t(
|
|
1046
|
+
} catch (u) {
|
|
1047
|
+
return void t(u);
|
|
1048
1048
|
}
|
|
1049
1049
|
s.done ? e(c) : Promise.resolve(c).then(a, r);
|
|
1050
1050
|
}
|
|
@@ -1098,14 +1098,14 @@ class L {
|
|
|
1098
1098
|
var {
|
|
1099
1099
|
canvas: s,
|
|
1100
1100
|
montageArea: c,
|
|
1101
|
-
transformManager:
|
|
1102
|
-
historyManager:
|
|
1101
|
+
transformManager: u,
|
|
1102
|
+
historyManager: h
|
|
1103
1103
|
} = t.editor;
|
|
1104
|
-
|
|
1104
|
+
h.suspendHistory();
|
|
1105
1105
|
try {
|
|
1106
|
-
var
|
|
1106
|
+
var d, l;
|
|
1107
1107
|
if (a instanceof File)
|
|
1108
|
-
|
|
1108
|
+
d = URL.createObjectURL(a);
|
|
1109
1109
|
else if (typeof a == "string") {
|
|
1110
1110
|
var g = yield fetch(a, {
|
|
1111
1111
|
mode: "cors"
|
|
@@ -1113,31 +1113,31 @@ class L {
|
|
|
1113
1113
|
type: o,
|
|
1114
1114
|
quality: 1
|
|
1115
1115
|
});
|
|
1116
|
-
|
|
1116
|
+
d = URL.createObjectURL(f);
|
|
1117
1117
|
} else
|
|
1118
1118
|
throw new Error("ImportImage. Неверный тип источника изображения. Ожидается URL или объект File.");
|
|
1119
|
-
t._createdBlobUrls.push(
|
|
1119
|
+
t._createdBlobUrls.push(d);
|
|
1120
1120
|
var v = L.getFormatFromContentType(o);
|
|
1121
1121
|
if (v === "svg") {
|
|
1122
|
-
var j = yield ke(
|
|
1123
|
-
|
|
1122
|
+
var j = yield ke(d);
|
|
1123
|
+
l = z.groupSVGElements(j.objects, j.options);
|
|
1124
1124
|
} else
|
|
1125
|
-
|
|
1125
|
+
l = yield de.fromURL(d, {
|
|
1126
1126
|
crossOrigin: "anonymous"
|
|
1127
1127
|
});
|
|
1128
1128
|
var {
|
|
1129
1129
|
width: m,
|
|
1130
1130
|
height: b
|
|
1131
|
-
} =
|
|
1131
|
+
} = l;
|
|
1132
1132
|
if (b > C || m > D) {
|
|
1133
|
-
var y = yield t.resizeImageToBoundaries(
|
|
1134
|
-
t._createdBlobUrls.push(S),
|
|
1133
|
+
var y = yield t.resizeImageToBoundaries(l._element.src, "max"), S = URL.createObjectURL(y);
|
|
1134
|
+
t._createdBlobUrls.push(S), l = yield de.fromURL(S, {
|
|
1135
1135
|
crossOrigin: "anonymous"
|
|
1136
1136
|
});
|
|
1137
1137
|
}
|
|
1138
|
-
if (
|
|
1138
|
+
if (l.set("id", "".concat(l.type, "-").concat(I())), l.set("format", v), r === "scale-montage")
|
|
1139
1139
|
t.editor.canvasManager.scaleMontageAreaToImage({
|
|
1140
|
-
object:
|
|
1140
|
+
object: l,
|
|
1141
1141
|
withoutSave: !0
|
|
1142
1142
|
});
|
|
1143
1143
|
else {
|
|
@@ -1146,24 +1146,24 @@ class L {
|
|
|
1146
1146
|
height: A
|
|
1147
1147
|
} = c, w = Y({
|
|
1148
1148
|
montageArea: c,
|
|
1149
|
-
imageObject:
|
|
1149
|
+
imageObject: l,
|
|
1150
1150
|
scaleType: r
|
|
1151
1151
|
});
|
|
1152
|
-
r === "image-contain" && w < 1 ?
|
|
1153
|
-
object:
|
|
1152
|
+
r === "image-contain" && w < 1 ? u.fitObject({
|
|
1153
|
+
object: l,
|
|
1154
1154
|
type: "contain",
|
|
1155
1155
|
withoutSave: !0
|
|
1156
|
-
}) : r === "image-cover" && (m > O || b > A) &&
|
|
1157
|
-
object:
|
|
1156
|
+
}) : r === "image-cover" && (m > O || b > A) && u.fitObject({
|
|
1157
|
+
object: l,
|
|
1158
1158
|
type: "cover",
|
|
1159
1159
|
withoutSave: !0
|
|
1160
1160
|
});
|
|
1161
1161
|
}
|
|
1162
|
-
s.add(
|
|
1162
|
+
s.add(l), s.centerObject(l), s.setActiveObject(l), s.renderAll(), h.resumeHistory(), n || h.saveState();
|
|
1163
1163
|
} catch (T) {
|
|
1164
1164
|
console.error("importImage. Ошибка импорта изображения: ", T), s.fire("editor:error", {
|
|
1165
1165
|
message: "Ошибка импорта изображения: ".concat(T.message)
|
|
1166
|
-
}),
|
|
1166
|
+
}), h.resumeHistory();
|
|
1167
1167
|
}
|
|
1168
1168
|
}
|
|
1169
1169
|
})();
|
|
@@ -1214,8 +1214,8 @@ class L {
|
|
|
1214
1214
|
} = e.length > 0 && e[0] !== void 0 ? e[0] : {}, {
|
|
1215
1215
|
canvas: s,
|
|
1216
1216
|
montageArea: c,
|
|
1217
|
-
workerManager:
|
|
1218
|
-
} = t.editor,
|
|
1217
|
+
workerManager: u
|
|
1218
|
+
} = t.editor, h = r === "application/pdf", d = h ? "image/jpg" : r, l = L.getFormatFromContentType(d);
|
|
1219
1219
|
c.setCoords();
|
|
1220
1220
|
var {
|
|
1221
1221
|
left: g,
|
|
@@ -1223,7 +1223,7 @@ class L {
|
|
|
1223
1223
|
width: v,
|
|
1224
1224
|
height: j
|
|
1225
1225
|
} = c.getBoundingRect(), m = yield s.clone(["id", "format", "locked"]);
|
|
1226
|
-
["image/jpg", "image/jpeg"].includes(
|
|
1226
|
+
["image/jpg", "image/jpeg"].includes(d) && (m.backgroundColor = "#ffffff");
|
|
1227
1227
|
var b = m.getObjects().find((N) => N.id === c.id);
|
|
1228
1228
|
b.visible = !1, m.viewportTransform = [1, 0, 0, 1, -g, -f], m.setDimensions({
|
|
1229
1229
|
width: v,
|
|
@@ -1232,7 +1232,7 @@ class L {
|
|
|
1232
1232
|
backstoreOnly: !0
|
|
1233
1233
|
}), m.renderAll();
|
|
1234
1234
|
var y = m.getObjects().filter((N) => N.format).every((N) => N.format === "svg");
|
|
1235
|
-
if (
|
|
1235
|
+
if (l === "svg" && y) {
|
|
1236
1236
|
var S = m.toSVG();
|
|
1237
1237
|
m.dispose();
|
|
1238
1238
|
var O = L._exportSVGStringAsFile(S, {
|
|
@@ -1253,18 +1253,18 @@ class L {
|
|
|
1253
1253
|
if (m.dispose(), o) {
|
|
1254
1254
|
var T = {
|
|
1255
1255
|
image: w,
|
|
1256
|
-
format:
|
|
1257
|
-
contentType:
|
|
1256
|
+
format: l,
|
|
1257
|
+
contentType: d,
|
|
1258
1258
|
fileName: a
|
|
1259
1259
|
};
|
|
1260
1260
|
return s.fire("editor:canvas-exported", T), T;
|
|
1261
1261
|
}
|
|
1262
|
-
var ae = yield createImageBitmap(w), re = yield
|
|
1263
|
-
format:
|
|
1262
|
+
var ae = yield createImageBitmap(w), re = yield u.post("toDataURL", {
|
|
1263
|
+
format: l,
|
|
1264
1264
|
quality: 1,
|
|
1265
1265
|
bitmap: ae
|
|
1266
1266
|
}, [ae]);
|
|
1267
|
-
if (
|
|
1267
|
+
if (h) {
|
|
1268
1268
|
var ne = 0.264583, W = v * ne, _ = j * ne, we = (yield t.editor.moduleLoader.loadModule("jspdf")).jsPDF, R = new we({
|
|
1269
1269
|
orientation: W > _ ? "landscape" : "portrait",
|
|
1270
1270
|
unit: "mm",
|
|
@@ -1292,18 +1292,18 @@ class L {
|
|
|
1292
1292
|
if (n) {
|
|
1293
1293
|
var se = {
|
|
1294
1294
|
image: re,
|
|
1295
|
-
format:
|
|
1296
|
-
contentType:
|
|
1295
|
+
format: l,
|
|
1296
|
+
contentType: d,
|
|
1297
1297
|
fileName: a
|
|
1298
1298
|
};
|
|
1299
1299
|
return s.fire("editor:canvas-exported", se), se;
|
|
1300
1300
|
}
|
|
1301
|
-
var ce =
|
|
1302
|
-
type:
|
|
1301
|
+
var ce = l === "svg" && !y ? a.replace(/\.[^/.]+$/, ".png") : a, Le = new File([w], ce, {
|
|
1302
|
+
type: d
|
|
1303
1303
|
}), ue = {
|
|
1304
1304
|
image: Le,
|
|
1305
|
-
format:
|
|
1306
|
-
contentType:
|
|
1305
|
+
format: l,
|
|
1306
|
+
contentType: d,
|
|
1307
1307
|
fileName: ce
|
|
1308
1308
|
};
|
|
1309
1309
|
return s.fire("editor:canvas-exported", ue), ue;
|
|
@@ -1331,46 +1331,46 @@ class L {
|
|
|
1331
1331
|
exportAsBlob: s = !1
|
|
1332
1332
|
} = e.length > 0 && e[0] !== void 0 ? e[0] : {}, {
|
|
1333
1333
|
canvas: c,
|
|
1334
|
-
workerManager:
|
|
1335
|
-
} = t.editor,
|
|
1336
|
-
if (!
|
|
1334
|
+
workerManager: u
|
|
1335
|
+
} = t.editor, h = a || c.getActiveObject();
|
|
1336
|
+
if (!h)
|
|
1337
1337
|
return console.error("exportObjectAsDataURL. Не выбран объект"), c.fire("editor:error", {
|
|
1338
1338
|
message: "Не выбран объект для экспорта"
|
|
1339
1339
|
}), "";
|
|
1340
|
-
var
|
|
1341
|
-
if (
|
|
1342
|
-
var
|
|
1340
|
+
var d = L.getFormatFromContentType(n);
|
|
1341
|
+
if (d === "svg") {
|
|
1342
|
+
var l = h.toSVG(), g = t._exportSVGStringAsFile(l, {
|
|
1343
1343
|
exportAsBase64: o,
|
|
1344
1344
|
exportAsBlob: s,
|
|
1345
1345
|
fileName: r
|
|
1346
1346
|
}), f = {
|
|
1347
1347
|
image: g,
|
|
1348
|
-
format:
|
|
1348
|
+
format: d,
|
|
1349
1349
|
contentType: "image/svg+xml",
|
|
1350
1350
|
fileName: r.replace(/\.[^/.]+$/, ".svg")
|
|
1351
1351
|
};
|
|
1352
1352
|
return c.fire("editor:object-exported", f), f;
|
|
1353
1353
|
}
|
|
1354
1354
|
if (o) {
|
|
1355
|
-
var v = yield createImageBitmap(
|
|
1356
|
-
format:
|
|
1355
|
+
var v = yield createImageBitmap(h._element), j = yield u.post("toDataURL", {
|
|
1356
|
+
format: d,
|
|
1357
1357
|
quality: 1,
|
|
1358
1358
|
bitmap: v
|
|
1359
1359
|
}, [v]), m = {
|
|
1360
1360
|
image: j,
|
|
1361
|
-
format:
|
|
1361
|
+
format: d,
|
|
1362
1362
|
contentType: n,
|
|
1363
1363
|
fileName: r
|
|
1364
1364
|
};
|
|
1365
1365
|
return c.fire("editor:object-exported", m), m;
|
|
1366
1366
|
}
|
|
1367
|
-
var b =
|
|
1367
|
+
var b = h.toCanvasElement(), y = yield new Promise((w) => {
|
|
1368
1368
|
b.toBlob(w);
|
|
1369
1369
|
});
|
|
1370
1370
|
if (s) {
|
|
1371
1371
|
var S = {
|
|
1372
1372
|
image: y,
|
|
1373
|
-
format:
|
|
1373
|
+
format: d,
|
|
1374
1374
|
contentType: n,
|
|
1375
1375
|
fileName: r
|
|
1376
1376
|
};
|
|
@@ -1380,7 +1380,7 @@ class L {
|
|
|
1380
1380
|
type: n
|
|
1381
1381
|
}), A = {
|
|
1382
1382
|
image: O,
|
|
1383
|
-
format:
|
|
1383
|
+
format: d,
|
|
1384
1384
|
contentType: n,
|
|
1385
1385
|
fileName: r
|
|
1386
1386
|
};
|
|
@@ -1463,15 +1463,15 @@ class jt {
|
|
|
1463
1463
|
}
|
|
1464
1464
|
} = this.editor, {
|
|
1465
1465
|
width: c,
|
|
1466
|
-
height:
|
|
1467
|
-
} = o,
|
|
1468
|
-
if (!s || s === "auto" || r ? this.adaptCanvasToContainer() : s ? this.setCanvasBackstoreWidth(s) : this.setCanvasBackstoreWidth(
|
|
1469
|
-
width:
|
|
1466
|
+
height: u
|
|
1467
|
+
} = o, h = Number(Math.max(Math.min(e, D), k));
|
|
1468
|
+
if (!s || s === "auto" || r ? this.adaptCanvasToContainer() : s ? this.setCanvasBackstoreWidth(s) : this.setCanvasBackstoreWidth(h), o.set({
|
|
1469
|
+
width: h
|
|
1470
1470
|
}), n.clipPath.set({
|
|
1471
|
-
width:
|
|
1471
|
+
width: h
|
|
1472
1472
|
}), t) {
|
|
1473
|
-
var
|
|
1474
|
-
this.setResolutionHeight(
|
|
1473
|
+
var d = h / c, l = u * d;
|
|
1474
|
+
this.setResolutionHeight(l);
|
|
1475
1475
|
return;
|
|
1476
1476
|
}
|
|
1477
1477
|
var {
|
|
@@ -1506,15 +1506,15 @@ class jt {
|
|
|
1506
1506
|
}
|
|
1507
1507
|
} = this.editor, {
|
|
1508
1508
|
width: c,
|
|
1509
|
-
height:
|
|
1510
|
-
} = o,
|
|
1511
|
-
if (!s || s === "auto" || r ? this.adaptCanvasToContainer() : s ? this.setCanvasBackstoreHeight(s) : this.setCanvasBackstoreHeight(
|
|
1512
|
-
height:
|
|
1509
|
+
height: u
|
|
1510
|
+
} = o, h = Number(Math.max(Math.min(e, C), x));
|
|
1511
|
+
if (!s || s === "auto" || r ? this.adaptCanvasToContainer() : s ? this.setCanvasBackstoreHeight(s) : this.setCanvasBackstoreHeight(h), o.set({
|
|
1512
|
+
height: h
|
|
1513
1513
|
}), n.clipPath.set({
|
|
1514
|
-
height:
|
|
1514
|
+
height: h
|
|
1515
1515
|
}), t) {
|
|
1516
|
-
var
|
|
1517
|
-
this.setResolutionWidth(
|
|
1516
|
+
var d = h / u, l = c * d;
|
|
1517
|
+
this.setResolutionWidth(l);
|
|
1518
1518
|
return;
|
|
1519
1519
|
}
|
|
1520
1520
|
var {
|
|
@@ -1707,16 +1707,16 @@ class jt {
|
|
|
1707
1707
|
}
|
|
1708
1708
|
var s = t === "width" ? "width" : "height";
|
|
1709
1709
|
if (typeof a == "string") {
|
|
1710
|
-
o.forEach((
|
|
1711
|
-
|
|
1710
|
+
o.forEach((h) => {
|
|
1711
|
+
h.style[s] = a;
|
|
1712
1712
|
});
|
|
1713
1713
|
return;
|
|
1714
1714
|
}
|
|
1715
1715
|
var c = parseFloat(a);
|
|
1716
1716
|
if (!isNaN(c)) {
|
|
1717
|
-
var
|
|
1718
|
-
o.forEach((
|
|
1719
|
-
|
|
1717
|
+
var u = "".concat(c, "px");
|
|
1718
|
+
o.forEach((h) => {
|
|
1719
|
+
h.style[s] = u;
|
|
1720
1720
|
}), r.fire("editor:display-".concat(e, "-").concat(s, "-changed"), {
|
|
1721
1721
|
element: e,
|
|
1722
1722
|
value: a
|
|
@@ -1745,33 +1745,33 @@ class jt {
|
|
|
1745
1745
|
montageAreaWidth: s,
|
|
1746
1746
|
montageAreaHeight: c
|
|
1747
1747
|
}
|
|
1748
|
-
} = this.editor,
|
|
1749
|
-
if (!(!
|
|
1748
|
+
} = this.editor, u = e || r.getActiveObject();
|
|
1749
|
+
if (!(!u || u.type !== "image" && u.format !== "svg")) {
|
|
1750
1750
|
var {
|
|
1751
|
-
width:
|
|
1752
|
-
height:
|
|
1753
|
-
} =
|
|
1754
|
-
if (
|
|
1755
|
-
var
|
|
1756
|
-
console.warn("scaleMontageAreaToImage. ".concat(
|
|
1757
|
-
message:
|
|
1751
|
+
width: h,
|
|
1752
|
+
height: d
|
|
1753
|
+
} = u;
|
|
1754
|
+
if (h < k || d < x) {
|
|
1755
|
+
var l = "Размер изображения меньше минимального размера канваса, поэтому оно будет растянуто до минимальных размеров: ".concat(k, "x").concat(x);
|
|
1756
|
+
console.warn("scaleMontageAreaToImage. ".concat(l)), r.fire("editor:warning", {
|
|
1757
|
+
message: l
|
|
1758
1758
|
});
|
|
1759
1759
|
}
|
|
1760
|
-
var g = Math.min(
|
|
1760
|
+
var g = Math.min(h, D), f = Math.min(d, C);
|
|
1761
1761
|
if (t) {
|
|
1762
1762
|
var {
|
|
1763
1763
|
width: v,
|
|
1764
1764
|
height: j
|
|
1765
|
-
} = n, m =
|
|
1765
|
+
} = n, m = h / v, b = d / j, y = Math.max(m, b);
|
|
1766
1766
|
g = v * y, f = j * y;
|
|
1767
1767
|
}
|
|
1768
1768
|
this.setResolutionWidth(g, {
|
|
1769
1769
|
withoutSave: !0
|
|
1770
1770
|
}), this.setResolutionHeight(f, {
|
|
1771
1771
|
withoutSave: !0
|
|
1772
|
-
}), (
|
|
1772
|
+
}), (h > s || d > c) && o.calculateAndApplyDefaultZoom(s, c), o.resetObject(u, {
|
|
1773
1773
|
withoutSave: !0
|
|
1774
|
-
}), r.centerObject(
|
|
1774
|
+
}), r.centerObject(u), r.renderAll(), a || this.editor.historyManager.saveState(), r.fire("editor:canvas-scaled", {
|
|
1775
1775
|
width: g,
|
|
1776
1776
|
height: f
|
|
1777
1777
|
});
|
|
@@ -1852,10 +1852,10 @@ class yt {
|
|
|
1852
1852
|
height: r
|
|
1853
1853
|
} = this.editor.montageArea, n = e / a, o = t / r, s = Math.min(n, o), {
|
|
1854
1854
|
minZoom: c,
|
|
1855
|
-
maxZoom:
|
|
1856
|
-
maxZoomFactor:
|
|
1855
|
+
maxZoom: u,
|
|
1856
|
+
maxZoomFactor: h
|
|
1857
1857
|
} = this.options;
|
|
1858
|
-
this.minZoom = Math.min(s /
|
|
1858
|
+
this.minZoom = Math.min(s / h, c), this.maxZoom = Math.max(s * h, u), this.defaultZoom = s, this.setZoom(s);
|
|
1859
1859
|
}
|
|
1860
1860
|
/**
|
|
1861
1861
|
* Увеличение/уменьшение масштаба
|
|
@@ -1867,21 +1867,24 @@ class yt {
|
|
|
1867
1867
|
* Если передавать координаты курсора, то нужно быть аккуратнее, так как юзер может выйти за пределы рабочей области
|
|
1868
1868
|
*/
|
|
1869
1869
|
zoom() {
|
|
1870
|
-
var e
|
|
1871
|
-
if (
|
|
1870
|
+
var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : ft, t = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
|
|
1871
|
+
if (e) {
|
|
1872
1872
|
var {
|
|
1873
|
-
canvas:
|
|
1874
|
-
minZoom:
|
|
1875
|
-
maxZoom:
|
|
1876
|
-
} = this.editor,
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
|
|
1881
|
-
|
|
1873
|
+
canvas: a,
|
|
1874
|
+
minZoom: r,
|
|
1875
|
+
maxZoom: n
|
|
1876
|
+
} = this.editor, o = a.getZoom(), {
|
|
1877
|
+
x: s = t.pointX,
|
|
1878
|
+
y: c = t.pointY
|
|
1879
|
+
} = a.getCenterPoint(), u = Number((o + Number(e)).toFixed(2));
|
|
1880
|
+
u > n && (u = n), u < r && (u = r), a.zoomToPoint({
|
|
1881
|
+
x: Number(s),
|
|
1882
|
+
y: Number(c)
|
|
1883
|
+
}, u), a.fire("editor:zoom-changed", {
|
|
1884
|
+
currentZoom: a.getZoom(),
|
|
1882
1885
|
zoom: u,
|
|
1883
|
-
pointX:
|
|
1884
|
-
pointY:
|
|
1886
|
+
pointX: s,
|
|
1887
|
+
pointY: c
|
|
1885
1888
|
});
|
|
1886
1889
|
}
|
|
1887
1890
|
}
|
|
@@ -1895,7 +1898,10 @@ class yt {
|
|
|
1895
1898
|
canvas: t,
|
|
1896
1899
|
minZoom: a,
|
|
1897
1900
|
maxZoom: r
|
|
1898
|
-
} = this.editor,
|
|
1901
|
+
} = this.editor, {
|
|
1902
|
+
x: n,
|
|
1903
|
+
y: o
|
|
1904
|
+
} = t.getCenterPoint(), s = e;
|
|
1899
1905
|
e > r && (s = r), e < a && (s = a), t.zoomToPoint({
|
|
1900
1906
|
x: Number(n),
|
|
1901
1907
|
y: Number(o)
|
|
@@ -1914,7 +1920,10 @@ class yt {
|
|
|
1914
1920
|
var {
|
|
1915
1921
|
canvas: e,
|
|
1916
1922
|
defaultZoom: t
|
|
1917
|
-
} = this.editor,
|
|
1923
|
+
} = this.editor, {
|
|
1924
|
+
x: a,
|
|
1925
|
+
y: r
|
|
1926
|
+
} = e.getCenterPoint();
|
|
1918
1927
|
e.zoomToPoint({
|
|
1919
1928
|
x: Number(a),
|
|
1920
1929
|
y: Number(r)
|
|
@@ -2015,26 +2024,26 @@ class yt {
|
|
|
2015
2024
|
} = this.editor, c = e || n.getActiveObject();
|
|
2016
2025
|
if (c) {
|
|
2017
2026
|
if (["activeselection"].includes(c.type) && !r) {
|
|
2018
|
-
var
|
|
2019
|
-
n.discardActiveObject(),
|
|
2027
|
+
var u = c.getObjects();
|
|
2028
|
+
n.discardActiveObject(), u.forEach((l) => {
|
|
2020
2029
|
var g = Y({
|
|
2021
2030
|
montageArea: o,
|
|
2022
|
-
imageObject:
|
|
2031
|
+
imageObject: l,
|
|
2023
2032
|
scaleType: t
|
|
2024
2033
|
});
|
|
2025
|
-
|
|
2034
|
+
l.scale(g), n.centerObject(l);
|
|
2026
2035
|
});
|
|
2027
|
-
var
|
|
2036
|
+
var h = new Z(u, {
|
|
2028
2037
|
canvas: n
|
|
2029
2038
|
});
|
|
2030
|
-
n.setActiveObject(
|
|
2039
|
+
n.setActiveObject(h);
|
|
2031
2040
|
} else {
|
|
2032
|
-
var
|
|
2041
|
+
var d = Y({
|
|
2033
2042
|
montageArea: o,
|
|
2034
2043
|
imageObject: c,
|
|
2035
2044
|
scaleType: t
|
|
2036
2045
|
});
|
|
2037
|
-
c.scale(
|
|
2046
|
+
c.scale(d), n.centerObject(c);
|
|
2038
2047
|
}
|
|
2039
2048
|
n.renderAll(), a || s.saveState(), n.fire("editor:image-fitted", {
|
|
2040
2049
|
type: t
|
|
@@ -2082,17 +2091,17 @@ class yt {
|
|
|
2082
2091
|
});
|
|
2083
2092
|
else {
|
|
2084
2093
|
var {
|
|
2085
|
-
width: d,
|
|
2086
|
-
height: l
|
|
2087
|
-
} = n, {
|
|
2088
2094
|
width: u,
|
|
2089
2095
|
height: h
|
|
2096
|
+
} = n, {
|
|
2097
|
+
width: d,
|
|
2098
|
+
height: l
|
|
2090
2099
|
} = c, g = Y({
|
|
2091
2100
|
montageArea: n,
|
|
2092
2101
|
imageObject: c,
|
|
2093
2102
|
scaleType: s
|
|
2094
2103
|
});
|
|
2095
|
-
s === "contain" && g < 1 || s === "cover" && (
|
|
2104
|
+
s === "contain" && g < 1 || s === "cover" && (d > u || l > h) ? this.fitObject({
|
|
2096
2105
|
object: c,
|
|
2097
2106
|
withoutSave: !0
|
|
2098
2107
|
}) : c.set({
|
|
@@ -2279,8 +2288,8 @@ class H {
|
|
|
2279
2288
|
var s = e || a.getActiveObject();
|
|
2280
2289
|
if (s) {
|
|
2281
2290
|
if (s.type === "activeselection")
|
|
2282
|
-
for (var c = s.getObjects(),
|
|
2283
|
-
a.sendObjectToBack(c[
|
|
2291
|
+
for (var c = s.getObjects(), u = c.length - 1; u >= 0; u -= 1)
|
|
2292
|
+
a.sendObjectToBack(c[u]);
|
|
2284
2293
|
else
|
|
2285
2294
|
a.sendObjectToBack(s);
|
|
2286
2295
|
a.sendObjectToBack(r), a.sendObjectToBack(o), a.renderAll(), n.resumeHistory(), t || n.saveState(), a.fire("editor:object-send-to-back");
|
|
@@ -2425,11 +2434,11 @@ class Ct {
|
|
|
2425
2434
|
height: o = 100,
|
|
2426
2435
|
fill: s = "blue"
|
|
2427
2436
|
} = e, c = G(e, bt), {
|
|
2428
|
-
withoutSelection:
|
|
2429
|
-
withoutAdding:
|
|
2437
|
+
withoutSelection: u,
|
|
2438
|
+
withoutAdding: h
|
|
2430
2439
|
} = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, {
|
|
2431
|
-
canvas:
|
|
2432
|
-
} = this.editor,
|
|
2440
|
+
canvas: d
|
|
2441
|
+
} = this.editor, l = new Be(F({
|
|
2433
2442
|
id: t,
|
|
2434
2443
|
left: a,
|
|
2435
2444
|
top: r,
|
|
@@ -2437,7 +2446,7 @@ class Ct {
|
|
|
2437
2446
|
height: o,
|
|
2438
2447
|
fill: s
|
|
2439
2448
|
}, c));
|
|
2440
|
-
return !a && !r &&
|
|
2449
|
+
return !a && !r && d.centerObject(l), h || (d.add(l), u || d.setActiveObject(l), d.renderAll()), l;
|
|
2441
2450
|
}
|
|
2442
2451
|
/**
|
|
2443
2452
|
* Добавление круга
|
|
@@ -2462,17 +2471,17 @@ class Ct {
|
|
|
2462
2471
|
fill: o = "green"
|
|
2463
2472
|
} = e, s = G(e, It), {
|
|
2464
2473
|
withoutSelection: c,
|
|
2465
|
-
withoutAdding:
|
|
2474
|
+
withoutAdding: u
|
|
2466
2475
|
} = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, {
|
|
2467
|
-
canvas:
|
|
2468
|
-
} = this.editor,
|
|
2476
|
+
canvas: h
|
|
2477
|
+
} = this.editor, d = new Ze(F({
|
|
2469
2478
|
id: t,
|
|
2470
2479
|
left: a,
|
|
2471
2480
|
top: r,
|
|
2472
2481
|
fill: o,
|
|
2473
2482
|
radius: n
|
|
2474
2483
|
}, s));
|
|
2475
|
-
return !a && !r &&
|
|
2484
|
+
return !a && !r && h.centerObject(d), u || (h.add(d), c || h.setActiveObject(d), h.renderAll()), d;
|
|
2476
2485
|
}
|
|
2477
2486
|
/**
|
|
2478
2487
|
* Добавление треугольника
|
|
@@ -2498,11 +2507,11 @@ class Ct {
|
|
|
2498
2507
|
height: o = 100,
|
|
2499
2508
|
fill: s = "yellow"
|
|
2500
2509
|
} = e, c = G(e, St), {
|
|
2501
|
-
withoutSelection:
|
|
2502
|
-
withoutAdding:
|
|
2510
|
+
withoutSelection: u,
|
|
2511
|
+
withoutAdding: h
|
|
2503
2512
|
} = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, {
|
|
2504
|
-
canvas:
|
|
2505
|
-
} = this.editor,
|
|
2513
|
+
canvas: d
|
|
2514
|
+
} = this.editor, l = new ze(F({
|
|
2506
2515
|
id: t,
|
|
2507
2516
|
left: a,
|
|
2508
2517
|
top: r,
|
|
@@ -2510,14 +2519,14 @@ class Ct {
|
|
|
2510
2519
|
width: n,
|
|
2511
2520
|
height: o
|
|
2512
2521
|
}, c));
|
|
2513
|
-
return !a && !r &&
|
|
2522
|
+
return !a && !r && d.centerObject(l), h || (d.add(l), u || d.setActiveObject(l), d.renderAll()), l;
|
|
2514
2523
|
}
|
|
2515
2524
|
}
|
|
2516
2525
|
function ye(i, e, t, a, r, n, o) {
|
|
2517
2526
|
try {
|
|
2518
2527
|
var s = i[n](o), c = s.value;
|
|
2519
|
-
} catch (
|
|
2520
|
-
return void t(
|
|
2528
|
+
} catch (u) {
|
|
2529
|
+
return void t(u);
|
|
2521
2530
|
}
|
|
2522
2531
|
s.done ? e(c) : Promise.resolve(c).then(a, r);
|
|
2523
2532
|
}
|
|
@@ -2575,18 +2584,18 @@ class Lt {
|
|
|
2575
2584
|
});
|
|
2576
2585
|
return;
|
|
2577
2586
|
}
|
|
2578
|
-
var n = r.toCanvasElement(), o = yield new Promise((
|
|
2579
|
-
n.toBlob(
|
|
2587
|
+
var n = r.toCanvasElement(), o = yield new Promise((u) => {
|
|
2588
|
+
n.toBlob(u);
|
|
2580
2589
|
}), s = new ClipboardItem({
|
|
2581
2590
|
[o.type]: o
|
|
2582
2591
|
});
|
|
2583
2592
|
yield navigator.clipboard.write([s]), t.fire("editor:object-copied", {
|
|
2584
2593
|
object: r
|
|
2585
2594
|
});
|
|
2586
|
-
} catch (
|
|
2595
|
+
} catch (u) {
|
|
2587
2596
|
var c = "ClipboardManager. Ошибка записи в системный буфер обмена:";
|
|
2588
|
-
console.error(c,
|
|
2589
|
-
message: "".concat(c, " ").concat(
|
|
2597
|
+
console.error(c, u), t.fire("editor:error", {
|
|
2598
|
+
message: "".concat(c, " ").concat(u.message)
|
|
2590
2599
|
});
|
|
2591
2600
|
}
|
|
2592
2601
|
})();
|
|
@@ -2811,10 +2820,8 @@ class kt {
|
|
|
2811
2820
|
} = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, {
|
|
2812
2821
|
canvas: a,
|
|
2813
2822
|
historyManager: r
|
|
2814
|
-
} = this.editor;
|
|
2815
|
-
r.suspendHistory()
|
|
2816
|
-
var n = e || a.getActiveObjects();
|
|
2817
|
-
n != null && n.length && (n.forEach((o) => {
|
|
2823
|
+
} = this.editor, n = (e || a.getActiveObjects()).filter((o) => !o.locked);
|
|
2824
|
+
n != null && n.length && (r.suspendHistory(), n.forEach((o) => {
|
|
2818
2825
|
if (o.type === "group" && o.format !== "svg") {
|
|
2819
2826
|
this.ungroup(o), this.deleteSelectedObjects();
|
|
2820
2827
|
return;
|
|
@@ -2826,8 +2833,8 @@ class kt {
|
|
|
2826
2833
|
function be(i, e, t, a, r, n, o) {
|
|
2827
2834
|
try {
|
|
2828
2835
|
var s = i[n](o), c = s.value;
|
|
2829
|
-
} catch (
|
|
2830
|
-
return void t(
|
|
2836
|
+
} catch (u) {
|
|
2837
|
+
return void t(u);
|
|
2831
2838
|
}
|
|
2832
2839
|
s.done ? e(c) : Promise.resolve(c).then(a, r);
|
|
2833
2840
|
}
|
|
@@ -2868,9 +2875,9 @@ class Bt {
|
|
|
2868
2875
|
canvasCSSWidth: o,
|
|
2869
2876
|
canvasCSSHeight: s,
|
|
2870
2877
|
initialImage: c,
|
|
2871
|
-
initialStateJSON:
|
|
2872
|
-
scaleType:
|
|
2873
|
-
_onReadyCallback:
|
|
2878
|
+
initialStateJSON: u,
|
|
2879
|
+
scaleType: h,
|
|
2880
|
+
_onReadyCallback: d
|
|
2874
2881
|
} = e.options;
|
|
2875
2882
|
if ($e.apply(), e.canvas = new Pe(e.containerId, e.options), e.moduleLoader = new _e(), e.workerManager = new Re(), e.historyManager = new ht({
|
|
2876
2883
|
editor: e
|
|
@@ -2903,13 +2910,13 @@ class Bt {
|
|
|
2903
2910
|
options: e.options
|
|
2904
2911
|
}), 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) {
|
|
2905
2912
|
var {
|
|
2906
|
-
source:
|
|
2907
|
-
scale: g = "image-".concat(
|
|
2913
|
+
source: l,
|
|
2914
|
+
scale: g = "image-".concat(h),
|
|
2908
2915
|
withoutSave: f = !0,
|
|
2909
2916
|
contentType: v
|
|
2910
2917
|
} = c;
|
|
2911
2918
|
yield e.imageManager.importImage({
|
|
2912
|
-
source:
|
|
2919
|
+
source: l,
|
|
2913
2920
|
scale: g,
|
|
2914
2921
|
withoutSave: f,
|
|
2915
2922
|
contentType: v
|
|
@@ -2918,7 +2925,7 @@ class Bt {
|
|
|
2918
2925
|
e.canvasManager.setDefaultScale({
|
|
2919
2926
|
withoutSave: !0
|
|
2920
2927
|
});
|
|
2921
|
-
|
|
2928
|
+
u && e.historyManager.loadStateFromFullState(u), e.historyManager.saveState(), console.log("editor:ready"), e.canvas.fire("editor:ready", e), typeof d == "function" && d(e);
|
|
2922
2929
|
})();
|
|
2923
2930
|
}
|
|
2924
2931
|
/**
|
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.6",
|
|
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": [
|