@anu3ev/fabric-image-editor 0.1.67 → 0.1.68
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 +37 -33
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
var
|
|
1
|
+
var pe = Object.defineProperty, ye = Object.defineProperties;
|
|
2
2
|
var Ie = Object.getOwnPropertyDescriptors;
|
|
3
3
|
var Y = Object.getOwnPropertySymbols;
|
|
4
4
|
var le = Object.prototype.hasOwnProperty, he = Object.prototype.propertyIsEnumerable;
|
|
5
|
-
var de = (r, e, t) => e in r ?
|
|
5
|
+
var de = (r, e, t) => e in r ? pe(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, p = (r, e) => {
|
|
6
6
|
for (var t in e || (e = {}))
|
|
7
7
|
le.call(e, t) && de(r, t, e[t]);
|
|
8
8
|
if (Y)
|
|
9
9
|
for (var t of Y(e))
|
|
10
10
|
he.call(e, t) && de(r, t, e[t]);
|
|
11
11
|
return r;
|
|
12
|
-
}, ge = (r, e) =>
|
|
12
|
+
}, ge = (r, e) => ye(r, Ie(e));
|
|
13
13
|
var _ = (r, e) => {
|
|
14
14
|
var t = {};
|
|
15
15
|
for (var s in r)
|
|
@@ -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
|
|
38
|
+
import { ActiveSelection as y, util as H, controlsUtils as ve, InteractiveFabricObject as Ae, loadSVGFromURL as Se, FabricImage as R, Point as P, Rect as Ce, Circle as Ne, Triangle as De, Group as J, Canvas as Le, Pattern as we } from "fabric";
|
|
39
39
|
import { create as Ee } from "jsondiffpatch";
|
|
40
40
|
import Oe from "diff-match-patch";
|
|
41
41
|
var Te = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", L = function() {
|
|
@@ -98,7 +98,7 @@ class z {
|
|
|
98
98
|
if (n.length === 1)
|
|
99
99
|
this.canvas.setActiveObject(n[0]);
|
|
100
100
|
else {
|
|
101
|
-
const a = new
|
|
101
|
+
const a = new y(n, {
|
|
102
102
|
canvas: this.canvas
|
|
103
103
|
});
|
|
104
104
|
this.canvas.setActiveObject(a);
|
|
@@ -106,7 +106,7 @@ class z {
|
|
|
106
106
|
this.canvas.requestRenderAll();
|
|
107
107
|
return;
|
|
108
108
|
}
|
|
109
|
-
const i = new
|
|
109
|
+
const i = new y(e, {
|
|
110
110
|
canvas: this.canvas
|
|
111
111
|
});
|
|
112
112
|
this.editor.objectLockManager.lockObject({
|
|
@@ -217,7 +217,7 @@ class z {
|
|
|
217
217
|
if (n || i) return;
|
|
218
218
|
this.isSpacePressed = !0, e.preventDefault();
|
|
219
219
|
const a = t.getActiveObject() || null;
|
|
220
|
-
a instanceof
|
|
220
|
+
a instanceof y ? this.savedSelection = a.getObjects().slice() : a && (this.savedSelection = [a]), t.discardActiveObject(), t.set({
|
|
221
221
|
selection: !1,
|
|
222
222
|
defaultCursor: "grab"
|
|
223
223
|
}), t.setCursor("grab"), s.canvasManager.getObjects().forEach((o) => {
|
|
@@ -256,7 +256,7 @@ class z {
|
|
|
256
256
|
t.setActiveObject(e[0]);
|
|
257
257
|
return;
|
|
258
258
|
}
|
|
259
|
-
const n = e.filter((a) => s.canvasManager.getObjects().includes(a)), i = new
|
|
259
|
+
const n = e.filter((a) => s.canvasManager.getObjects().includes(a)), i = new y(n, { canvas: t });
|
|
260
260
|
t.setActiveObject(i);
|
|
261
261
|
}
|
|
262
262
|
// --- Обработчики для событий canvas (Fabric) ---
|
|
@@ -653,11 +653,11 @@ class Ke {
|
|
|
653
653
|
_initToolbar() {
|
|
654
654
|
if (!this.options.showToolbar) return;
|
|
655
655
|
const e = this.options.toolbar || {};
|
|
656
|
-
this.config = ge(
|
|
657
|
-
style:
|
|
658
|
-
btnStyle:
|
|
659
|
-
icons:
|
|
660
|
-
handlers:
|
|
656
|
+
this.config = ge(p(p({}, Z), e), {
|
|
657
|
+
style: p(p({}, Z.style), e.style || {}),
|
|
658
|
+
btnStyle: p(p({}, Z.btnStyle), e.btnStyle || {}),
|
|
659
|
+
icons: p(p({}, Z.icons), e.icons || {}),
|
|
660
|
+
handlers: p(p({}, Z.handlers), e.handlers || {})
|
|
661
661
|
}), this.currentTarget = null, this.currentLocked = !1, this.isTransforming = !1, this._onMouseDown = this._handleMouseDown.bind(this), this._onObjectMoving = this._startTransform.bind(this), this._onObjectScaling = this._startTransform.bind(this), this._onObjectRotating = this._startTransform.bind(this), this._onMouseUp = this._endTransform.bind(this), this._onObjectModified = this._endTransform.bind(this), this._onSelectionChange = this._updateToolbar.bind(this), this._onSelectionClear = () => {
|
|
662
662
|
this.el.style.display = "none";
|
|
663
663
|
}, this._createDOM(), this._bindEvents();
|
|
@@ -1586,7 +1586,7 @@ class ot {
|
|
|
1586
1586
|
if (l.length === 1)
|
|
1587
1587
|
e.setActiveObject(l[0]);
|
|
1588
1588
|
else {
|
|
1589
|
-
const h = new
|
|
1589
|
+
const h = new y(l, {
|
|
1590
1590
|
canvas: e
|
|
1591
1591
|
});
|
|
1592
1592
|
e.setActiveObject(h);
|
|
@@ -1922,7 +1922,7 @@ class rt {
|
|
|
1922
1922
|
withoutSave: s
|
|
1923
1923
|
} = {}) {
|
|
1924
1924
|
const { canvas: n, historyManager: i } = this.editor, a = e || n.getActiveObject();
|
|
1925
|
-
a && (a instanceof
|
|
1925
|
+
a && (a instanceof y ? a.getObjects().forEach((o) => {
|
|
1926
1926
|
o.set("opacity", t);
|
|
1927
1927
|
}) : a.set("opacity", t), n.renderAll(), s || i.saveState(), n.fire("editor:object-opacity-changed", {
|
|
1928
1928
|
object: a,
|
|
@@ -1949,12 +1949,12 @@ class rt {
|
|
|
1949
1949
|
} = {}) {
|
|
1950
1950
|
const { canvas: i, historyManager: a } = this.editor, o = e || i.getActiveObject();
|
|
1951
1951
|
if (o) {
|
|
1952
|
-
if (o instanceof
|
|
1952
|
+
if (o instanceof y && !n) {
|
|
1953
1953
|
const d = o.getObjects();
|
|
1954
1954
|
i.discardActiveObject(), d.forEach((l) => {
|
|
1955
1955
|
this._fitSingleObject(l, t);
|
|
1956
1956
|
});
|
|
1957
|
-
const c = new
|
|
1957
|
+
const c = new y(d, { canvas: i });
|
|
1958
1958
|
i.setActiveObject(c);
|
|
1959
1959
|
} else
|
|
1960
1960
|
this._fitSingleObject(o, t);
|
|
@@ -2099,7 +2099,7 @@ class V {
|
|
|
2099
2099
|
const { canvas: s, historyManager: n } = this.editor;
|
|
2100
2100
|
n.suspendHistory();
|
|
2101
2101
|
const i = e || s.getActiveObject();
|
|
2102
|
-
i && (i instanceof
|
|
2102
|
+
i && (i instanceof y ? i.getObjects().forEach((a) => {
|
|
2103
2103
|
s.bringObjectToFront(a);
|
|
2104
2104
|
}) : s.bringObjectToFront(i), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:object-bring-to-front", {
|
|
2105
2105
|
object: i,
|
|
@@ -2117,7 +2117,7 @@ class V {
|
|
|
2117
2117
|
const { canvas: s, historyManager: n } = this.editor;
|
|
2118
2118
|
n.suspendHistory();
|
|
2119
2119
|
const i = e || s.getActiveObject();
|
|
2120
|
-
i && (i instanceof
|
|
2120
|
+
i && (i instanceof y ? V._moveSelectionForward(s, i) : s.bringObjectForward(i), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:object-bring-forward", {
|
|
2121
2121
|
object: i,
|
|
2122
2122
|
withoutSave: t
|
|
2123
2123
|
}));
|
|
@@ -2139,7 +2139,7 @@ class V {
|
|
|
2139
2139
|
i.suspendHistory();
|
|
2140
2140
|
const o = e || s.getActiveObject();
|
|
2141
2141
|
if (o) {
|
|
2142
|
-
if (o instanceof
|
|
2142
|
+
if (o instanceof y) {
|
|
2143
2143
|
const d = o.getObjects();
|
|
2144
2144
|
for (let c = d.length - 1; c >= 0; c -= 1)
|
|
2145
2145
|
s.sendObjectToBack(d[c]);
|
|
@@ -2166,7 +2166,7 @@ class V {
|
|
|
2166
2166
|
} = this.editor;
|
|
2167
2167
|
i.suspendHistory();
|
|
2168
2168
|
const o = e || s.getActiveObject();
|
|
2169
|
-
o && (o instanceof
|
|
2169
|
+
o && (o instanceof y ? V._moveSelectionBackwards(s, o) : s.sendObjectBackwards(o), s.sendObjectToBack(n), a && s.sendObjectToBack(a), s.renderAll(), i.resumeHistory(), t || i.saveState(), s.fire("editor:object-send-backwards", {
|
|
2170
2170
|
object: o,
|
|
2171
2171
|
withoutSave: t
|
|
2172
2172
|
}));
|
|
@@ -2250,7 +2250,7 @@ class dt {
|
|
|
2250
2250
|
"height",
|
|
2251
2251
|
"fill"
|
|
2252
2252
|
]);
|
|
2253
|
-
const { canvas: g } = this.editor, u = new Ce(
|
|
2253
|
+
const { canvas: g } = this.editor, u = new Ce(p({
|
|
2254
2254
|
id: e,
|
|
2255
2255
|
left: t,
|
|
2256
2256
|
top: s,
|
|
@@ -2290,7 +2290,7 @@ class dt {
|
|
|
2290
2290
|
"radius",
|
|
2291
2291
|
"fill"
|
|
2292
2292
|
]);
|
|
2293
|
-
const { canvas: h } = this.editor, g = new Ne(
|
|
2293
|
+
const { canvas: h } = this.editor, g = new Ne(p({
|
|
2294
2294
|
id: e,
|
|
2295
2295
|
left: t,
|
|
2296
2296
|
top: s,
|
|
@@ -2332,7 +2332,7 @@ class dt {
|
|
|
2332
2332
|
"height",
|
|
2333
2333
|
"fill"
|
|
2334
2334
|
]);
|
|
2335
|
-
const { canvas: g } = this.editor, u = new De(
|
|
2335
|
+
const { canvas: g } = this.editor, u = new De(p({
|
|
2336
2336
|
id: e,
|
|
2337
2337
|
left: t,
|
|
2338
2338
|
top: s,
|
|
@@ -2402,9 +2402,13 @@ class lt {
|
|
|
2402
2402
|
c[g] = d.charCodeAt(g);
|
|
2403
2403
|
const l = new Blob([c.buffer], { type: a }), h = new ClipboardItem({ [a]: l });
|
|
2404
2404
|
navigator.clipboard.write([h]).catch((g) => {
|
|
2405
|
+
if (g.name === "NotAllowedError") {
|
|
2406
|
+
console.info("Clipboard access denied, object copied to internal clipboard only");
|
|
2407
|
+
return;
|
|
2408
|
+
}
|
|
2405
2409
|
const u = `${$}${JSON.stringify(s.toObject(["format"]))}`;
|
|
2406
2410
|
navigator.clipboard.writeText(u).catch((m) => {
|
|
2407
|
-
t.
|
|
2411
|
+
t.emitWarning({
|
|
2408
2412
|
origin: "ClipboardManager",
|
|
2409
2413
|
method: "copy",
|
|
2410
2414
|
code: "CLIPBOARD_WRITE_IMAGE_FAILED",
|
|
@@ -2467,7 +2471,7 @@ class lt {
|
|
|
2467
2471
|
left: t.left + 10,
|
|
2468
2472
|
top: t.top + 10,
|
|
2469
2473
|
evented: !0
|
|
2470
|
-
}), t instanceof
|
|
2474
|
+
}), t instanceof y ? (t.canvas = e, t.forEachObject((s) => {
|
|
2471
2475
|
e.add(s);
|
|
2472
2476
|
})) : e.add(t), e.setActiveObject(t), e.requestRenderAll(), e.fire("editor:object-pasted", { object: t });
|
|
2473
2477
|
});
|
|
@@ -2534,7 +2538,7 @@ class G {
|
|
|
2534
2538
|
});
|
|
2535
2539
|
}
|
|
2536
2540
|
static _isGroupOrSelection(e) {
|
|
2537
|
-
return e instanceof
|
|
2541
|
+
return e instanceof y || e instanceof J;
|
|
2538
2542
|
}
|
|
2539
2543
|
}
|
|
2540
2544
|
class ht {
|
|
@@ -2555,7 +2559,7 @@ class ht {
|
|
|
2555
2559
|
const { canvas: s, historyManager: n } = this.editor;
|
|
2556
2560
|
n.suspendHistory();
|
|
2557
2561
|
const i = e || s.getActiveObject();
|
|
2558
|
-
if (!i || !(i instanceof
|
|
2562
|
+
if (!i || !(i instanceof y)) return;
|
|
2559
2563
|
const a = i.getObjects(), o = new J(a);
|
|
2560
2564
|
a.forEach((d) => s.remove(d)), o.set("id", `${o.type}-${L()}`), s.add(o), s.setActiveObject(o), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:objects-grouped", {
|
|
2561
2565
|
object: i,
|
|
@@ -2580,7 +2584,7 @@ class ht {
|
|
|
2580
2584
|
if (!(i instanceof J)) return;
|
|
2581
2585
|
const a = i.removeAll();
|
|
2582
2586
|
s.remove(i), a.forEach((d) => s.add(d));
|
|
2583
|
-
const o = new
|
|
2587
|
+
const o = new y(a, {
|
|
2584
2588
|
canvas: s
|
|
2585
2589
|
});
|
|
2586
2590
|
s.setActiveObject(o), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:objects-ungrouped", {
|
|
@@ -2601,7 +2605,7 @@ class gt {
|
|
|
2601
2605
|
selectAll() {
|
|
2602
2606
|
const { canvas: e, canvasManager: t, objectLockManager: s } = this.editor;
|
|
2603
2607
|
e.discardActiveObject();
|
|
2604
|
-
const n = t.getObjects(), i = n.some((o) => o.locked), a = n.length > 1 ? new
|
|
2608
|
+
const n = t.getObjects(), i = n.some((o) => o.locked), a = n.length > 1 ? new y(t.getObjects(), { canvas: e }) : n[0];
|
|
2605
2609
|
i && s.lockObject({ object: a, skipInnerObjects: !0, withoutSave: !0 }), e.setActiveObject(a), e.requestRenderAll(), e.fire("editor:all-objects-selected", { selected: a });
|
|
2606
2610
|
}
|
|
2607
2611
|
}
|
|
@@ -2736,7 +2740,7 @@ class X {
|
|
|
2736
2740
|
message: a,
|
|
2737
2741
|
data: n
|
|
2738
2742
|
};
|
|
2739
|
-
this._buffer.push(
|
|
2743
|
+
this._buffer.push(p({
|
|
2740
2744
|
type: "editor:error"
|
|
2741
2745
|
}, o)), this.editor.canvas.fire("editor:error", o);
|
|
2742
2746
|
}
|
|
@@ -2764,7 +2768,7 @@ class X {
|
|
|
2764
2768
|
message: a,
|
|
2765
2769
|
data: i
|
|
2766
2770
|
};
|
|
2767
|
-
this._buffer.push(
|
|
2771
|
+
this._buffer.push(p({
|
|
2768
2772
|
type: "editor:warning"
|
|
2769
2773
|
}, o)), this.editor.canvas.fire("editor:warning", o);
|
|
2770
2774
|
}
|
|
@@ -2975,7 +2979,7 @@ const mt = {
|
|
|
2975
2979
|
keyboardIgnoreSelectors: []
|
|
2976
2980
|
};
|
|
2977
2981
|
function At(r, e = {}) {
|
|
2978
|
-
const t =
|
|
2982
|
+
const t = p(p({}, mt), e), s = document.getElementById(r);
|
|
2979
2983
|
if (!s)
|
|
2980
2984
|
return Promise.reject(new Error(`Контейнер с ID "${r}" не найден.`));
|
|
2981
2985
|
const n = document.createElement("canvas");
|
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.68",
|
|
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": [
|