@anu3ev/fabric-image-editor 0.1.64 → 0.1.65
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 +18 -24
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -35,7 +35,7 @@ var v = (r, e, t) => new Promise((s, n) => {
|
|
|
35
35
|
}, o = (d) => d.done ? s(d.value) : Promise.resolve(d.value).then(i, a);
|
|
36
36
|
o((t = t.apply(r, e)).next());
|
|
37
37
|
});
|
|
38
|
-
import { ActiveSelection as p, util as H, controlsUtils as Ie, InteractiveFabricObject as ve, loadSVGFromURL as Ae, FabricImage as
|
|
38
|
+
import { ActiveSelection as p, util as H, controlsUtils as Ie, InteractiveFabricObject as ve, loadSVGFromURL as Ae, FabricImage as Z, Point as P, Rect as Se, Circle as Ce, Triangle as Ne, Group as $, Canvas as De, Pattern as Le } from "fabric";
|
|
39
39
|
import { create as we } from "jsondiffpatch";
|
|
40
40
|
import Ee from "diff-match-patch";
|
|
41
41
|
var Oe = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", L = function() {
|
|
@@ -436,17 +436,17 @@ class xe {
|
|
|
436
436
|
this.worker.terminate();
|
|
437
437
|
}
|
|
438
438
|
}
|
|
439
|
-
const N = 12, Be = 2, J = 8, K = 20,
|
|
439
|
+
const N = 12, Be = 2, J = 8, K = 20, Ue = 100, q = 20, ee = 8, Ze = 100, F = 32, te = 1, ze = "#2B2D33", se = "#3D8BF4", ne = "#FFFFFF";
|
|
440
440
|
function W(r, e, t, s, n) {
|
|
441
441
|
const i = N, a = Be;
|
|
442
442
|
r.save(), r.translate(e, t), r.rotate(H.degreesToRadians(n.angle)), r.fillStyle = ne, r.strokeStyle = se, r.lineWidth = te, r.beginPath(), r.roundRect(-i / 2, -i / 2, i, i, a), r.fill(), r.stroke(), r.restore();
|
|
443
443
|
}
|
|
444
444
|
function ge(r, e, t, s, n) {
|
|
445
|
-
const i = J, a = K, o =
|
|
445
|
+
const i = J, a = K, o = Ue;
|
|
446
446
|
r.save(), r.translate(e, t), r.rotate(H.degreesToRadians(n.angle)), r.fillStyle = ne, r.strokeStyle = se, r.lineWidth = te, r.beginPath(), r.roundRect(-i / 2, -a / 2, i, a, o), r.fill(), r.stroke(), r.restore();
|
|
447
447
|
}
|
|
448
448
|
function ue(r, e, t, s, n) {
|
|
449
|
-
const i = q, a = ee, o =
|
|
449
|
+
const i = q, a = ee, o = Ze;
|
|
450
450
|
r.save(), r.translate(e, t), r.rotate(H.degreesToRadians(n.angle)), r.fillStyle = ne, r.strokeStyle = se, r.lineWidth = te, r.beginPath(), r.roundRect(-i / 2, -a / 2, i, a, o), r.fill(), r.stroke(), r.restore();
|
|
451
451
|
}
|
|
452
452
|
const Re = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", me = new Image();
|
|
@@ -965,7 +965,7 @@ class Ke {
|
|
|
965
965
|
});
|
|
966
966
|
}
|
|
967
967
|
}
|
|
968
|
-
const qe = 0.1, et = 2, tt = 0.1, st = 90, B = 16,
|
|
968
|
+
const qe = 0.1, et = 2, tt = 0.1, st = 90, B = 16, U = 16, O = 4096, T = 4096;
|
|
969
969
|
class D {
|
|
970
970
|
constructor({ editor: e }) {
|
|
971
971
|
this.editor = e, this.options = e.options, this._createdBlobUrls = [], this.acceptContentTypes = this.editor.options.acceptContentTypes, this.acceptFormats = this.getAllowedFormatsFromContentTypes();
|
|
@@ -1021,17 +1021,17 @@ class D {
|
|
|
1021
1021
|
const b = yield Ae(m);
|
|
1022
1022
|
M = H.groupSVGElements(b.objects, b.options);
|
|
1023
1023
|
} else
|
|
1024
|
-
M = yield
|
|
1024
|
+
M = yield Z.fromURL(m, { crossOrigin: "anonymous" });
|
|
1025
1025
|
const { width: f, height: j } = M;
|
|
1026
|
-
if (M instanceof
|
|
1026
|
+
if (M instanceof Z) {
|
|
1027
1027
|
const b = M.getElement();
|
|
1028
1028
|
let S = "";
|
|
1029
1029
|
if (b instanceof HTMLImageElement ? S = b.src : b instanceof HTMLCanvasElement && (S = b.toDataURL()), j > T || f > O) {
|
|
1030
1030
|
const w = yield this.resizeImageToBoundaries(S, "max"), E = URL.createObjectURL(w);
|
|
1031
|
-
this._createdBlobUrls.push(E), M = yield
|
|
1032
|
-
} else if (j <
|
|
1031
|
+
this._createdBlobUrls.push(E), M = yield Z.fromURL(E, { crossOrigin: "anonymous" });
|
|
1032
|
+
} else if (j < U || f < B) {
|
|
1033
1033
|
const w = yield this.resizeImageToBoundaries(S, "min"), E = URL.createObjectURL(w);
|
|
1034
|
-
this._createdBlobUrls.push(E), M = yield
|
|
1034
|
+
this._createdBlobUrls.push(E), M = yield Z.fromURL(E, { crossOrigin: "anonymous" });
|
|
1035
1035
|
}
|
|
1036
1036
|
}
|
|
1037
1037
|
if (M.set("id", `${M.type}-${L()}`), M.set("format", h), s === "scale-montage")
|
|
@@ -1072,14 +1072,14 @@ class D {
|
|
|
1072
1072
|
resizeImageToBoundaries(e, t = "max") {
|
|
1073
1073
|
return v(this, null, function* () {
|
|
1074
1074
|
let s = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${O}x${T}`;
|
|
1075
|
-
t === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${B}x${
|
|
1075
|
+
t === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${B}x${U}`);
|
|
1076
1076
|
const n = {
|
|
1077
1077
|
dataURL: e,
|
|
1078
1078
|
sizeType: t,
|
|
1079
1079
|
maxWidth: O,
|
|
1080
1080
|
maxHeight: T,
|
|
1081
1081
|
minWidth: B,
|
|
1082
|
-
minHeight:
|
|
1082
|
+
minHeight: U
|
|
1083
1083
|
};
|
|
1084
1084
|
return this.editor.errorManager.emitWarning({
|
|
1085
1085
|
origin: "ImageManager",
|
|
@@ -1245,7 +1245,7 @@ class D {
|
|
|
1245
1245
|
};
|
|
1246
1246
|
return o.fire("editor:object-exported", j), j;
|
|
1247
1247
|
}
|
|
1248
|
-
if (i && c instanceof
|
|
1248
|
+
if (i && c instanceof Z) {
|
|
1249
1249
|
const M = yield createImageBitmap(c.getElement()), f = yield d.post(
|
|
1250
1250
|
"toDataURL",
|
|
1251
1251
|
{
|
|
@@ -1479,7 +1479,7 @@ class at {
|
|
|
1479
1479
|
canvas: i,
|
|
1480
1480
|
montageArea: a,
|
|
1481
1481
|
options: { canvasBackstoreHeight: o }
|
|
1482
|
-
} = this.editor, { width: d, height: c } = a, l = x(Number(e),
|
|
1482
|
+
} = this.editor, { width: d, height: c } = a, l = x(Number(e), U, T);
|
|
1483
1483
|
if (!o || o === "auto" || n ? this.adaptCanvasToContainer() : o ? this.setCanvasBackstoreHeight(Number(o)) : this.setCanvasBackstoreHeight(l), a.set({ height: l }), (m = i.clipPath) == null || m.set({ height: l }), t) {
|
|
1484
1484
|
const M = l / c, f = Me(d, M);
|
|
1485
1485
|
this.setResolutionWidth(f);
|
|
@@ -1541,7 +1541,7 @@ class at {
|
|
|
1541
1541
|
*/
|
|
1542
1542
|
setCanvasBackstoreHeight(e) {
|
|
1543
1543
|
if (!e || typeof e != "number") return;
|
|
1544
|
-
const t = x(e,
|
|
1544
|
+
const t = x(e, U, T);
|
|
1545
1545
|
this.editor.canvas.setDimensions({ height: t }, { backstoreOnly: !0 });
|
|
1546
1546
|
}
|
|
1547
1547
|
/**
|
|
@@ -1550,7 +1550,7 @@ class at {
|
|
|
1550
1550
|
* с учётом минимальных и максимальных значений.
|
|
1551
1551
|
*/
|
|
1552
1552
|
adaptCanvasToContainer() {
|
|
1553
|
-
const { canvas: e } = this.editor, t = this.getEditorContainer(), s = t.clientWidth, n = t.clientHeight, i = x(s, B, O), a = x(n,
|
|
1553
|
+
const { canvas: e } = this.editor, t = this.getEditorContainer(), s = t.clientWidth, n = t.clientHeight, i = x(s, B, O), a = x(n, U, T);
|
|
1554
1554
|
e.setDimensions({ width: i, height: a }, { backstoreOnly: !0 });
|
|
1555
1555
|
}
|
|
1556
1556
|
/**
|
|
@@ -1816,9 +1816,7 @@ class ot {
|
|
|
1816
1816
|
*/
|
|
1817
1817
|
calculateAndApplyDefaultZoom(e = this.options.defaultScale) {
|
|
1818
1818
|
const { canvas: t } = this.editor, s = t.editorContainer, n = s.clientWidth, i = s.clientHeight, { width: a, height: o } = this.editor.montageArea, d = n / a * e, c = i / o * e;
|
|
1819
|
-
this.defaultZoom = Math.min(d, c);
|
|
1820
|
-
const { defaultZoom: l, maxZoomFactor: h, minZoom: g, maxZoom: u } = this;
|
|
1821
|
-
this.minZoom = Math.min(l / h, g), this.maxZoom = Math.max(l * h, u), this.setZoom();
|
|
1819
|
+
this.defaultZoom = Math.min(d, c), this.setZoom();
|
|
1822
1820
|
}
|
|
1823
1821
|
/**
|
|
1824
1822
|
* Увеличение/уменьшение масштаба
|
|
@@ -1834,11 +1832,7 @@ class ot {
|
|
|
1834
1832
|
if (!e) return;
|
|
1835
1833
|
const { minZoom: s, maxZoom: n } = this, { canvas: i } = this.editor, a = i.getZoom(), o = i.getCenterPoint(), d = (g = t.pointX) != null ? g : o.x, c = (u = t.pointY) != null ? u : o.y, l = new P(d, c);
|
|
1836
1834
|
let h = Number((a + Number(e)).toFixed(2));
|
|
1837
|
-
h > n && (h = n), h < s && (h = s), i.zoomToPoint(l, h),
|
|
1838
|
-
currentZoom: a,
|
|
1839
|
-
zoom: h,
|
|
1840
|
-
point: l
|
|
1841
|
-
}), i.fire("editor:zoom-changed", {
|
|
1835
|
+
h > n && (h = n), h < s && (h = s), i.zoomToPoint(l, h), i.fire("editor:zoom-changed", {
|
|
1842
1836
|
currentZoom: i.getZoom(),
|
|
1843
1837
|
zoom: h,
|
|
1844
1838
|
point: l
|
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.65",
|
|
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": [
|