@anu3ev/fabric-image-editor 0.1.67 → 0.1.69
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 +41 -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,
|
|
@@ -2385,6 +2385,10 @@ class lt {
|
|
|
2385
2385
|
if (s.type !== "image") {
|
|
2386
2386
|
const g = `${$}${JSON.stringify(s.toObject(["format"]))}`;
|
|
2387
2387
|
navigator.clipboard.writeText(g).catch((u) => {
|
|
2388
|
+
if (u.name === "NotAllowedError") {
|
|
2389
|
+
console.info("Clipboard access denied, object copied to internal clipboard only");
|
|
2390
|
+
return;
|
|
2391
|
+
}
|
|
2388
2392
|
t.emitWarning({
|
|
2389
2393
|
origin: "ClipboardManager",
|
|
2390
2394
|
method: "copy",
|
|
@@ -2402,9 +2406,13 @@ class lt {
|
|
|
2402
2406
|
c[g] = d.charCodeAt(g);
|
|
2403
2407
|
const l = new Blob([c.buffer], { type: a }), h = new ClipboardItem({ [a]: l });
|
|
2404
2408
|
navigator.clipboard.write([h]).catch((g) => {
|
|
2409
|
+
if (g.name === "NotAllowedError") {
|
|
2410
|
+
console.info("Clipboard access denied, object copied to internal clipboard only");
|
|
2411
|
+
return;
|
|
2412
|
+
}
|
|
2405
2413
|
const u = `${$}${JSON.stringify(s.toObject(["format"]))}`;
|
|
2406
2414
|
navigator.clipboard.writeText(u).catch((m) => {
|
|
2407
|
-
t.
|
|
2415
|
+
t.emitWarning({
|
|
2408
2416
|
origin: "ClipboardManager",
|
|
2409
2417
|
method: "copy",
|
|
2410
2418
|
code: "CLIPBOARD_WRITE_IMAGE_FAILED",
|
|
@@ -2467,7 +2475,7 @@ class lt {
|
|
|
2467
2475
|
left: t.left + 10,
|
|
2468
2476
|
top: t.top + 10,
|
|
2469
2477
|
evented: !0
|
|
2470
|
-
}), t instanceof
|
|
2478
|
+
}), t instanceof y ? (t.canvas = e, t.forEachObject((s) => {
|
|
2471
2479
|
e.add(s);
|
|
2472
2480
|
})) : e.add(t), e.setActiveObject(t), e.requestRenderAll(), e.fire("editor:object-pasted", { object: t });
|
|
2473
2481
|
});
|
|
@@ -2534,7 +2542,7 @@ class G {
|
|
|
2534
2542
|
});
|
|
2535
2543
|
}
|
|
2536
2544
|
static _isGroupOrSelection(e) {
|
|
2537
|
-
return e instanceof
|
|
2545
|
+
return e instanceof y || e instanceof J;
|
|
2538
2546
|
}
|
|
2539
2547
|
}
|
|
2540
2548
|
class ht {
|
|
@@ -2555,7 +2563,7 @@ class ht {
|
|
|
2555
2563
|
const { canvas: s, historyManager: n } = this.editor;
|
|
2556
2564
|
n.suspendHistory();
|
|
2557
2565
|
const i = e || s.getActiveObject();
|
|
2558
|
-
if (!i || !(i instanceof
|
|
2566
|
+
if (!i || !(i instanceof y)) return;
|
|
2559
2567
|
const a = i.getObjects(), o = new J(a);
|
|
2560
2568
|
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
2569
|
object: i,
|
|
@@ -2580,7 +2588,7 @@ class ht {
|
|
|
2580
2588
|
if (!(i instanceof J)) return;
|
|
2581
2589
|
const a = i.removeAll();
|
|
2582
2590
|
s.remove(i), a.forEach((d) => s.add(d));
|
|
2583
|
-
const o = new
|
|
2591
|
+
const o = new y(a, {
|
|
2584
2592
|
canvas: s
|
|
2585
2593
|
});
|
|
2586
2594
|
s.setActiveObject(o), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:objects-ungrouped", {
|
|
@@ -2601,7 +2609,7 @@ class gt {
|
|
|
2601
2609
|
selectAll() {
|
|
2602
2610
|
const { canvas: e, canvasManager: t, objectLockManager: s } = this.editor;
|
|
2603
2611
|
e.discardActiveObject();
|
|
2604
|
-
const n = t.getObjects(), i = n.some((o) => o.locked), a = n.length > 1 ? new
|
|
2612
|
+
const n = t.getObjects(), i = n.some((o) => o.locked), a = n.length > 1 ? new y(t.getObjects(), { canvas: e }) : n[0];
|
|
2605
2613
|
i && s.lockObject({ object: a, skipInnerObjects: !0, withoutSave: !0 }), e.setActiveObject(a), e.requestRenderAll(), e.fire("editor:all-objects-selected", { selected: a });
|
|
2606
2614
|
}
|
|
2607
2615
|
}
|
|
@@ -2736,7 +2744,7 @@ class X {
|
|
|
2736
2744
|
message: a,
|
|
2737
2745
|
data: n
|
|
2738
2746
|
};
|
|
2739
|
-
this._buffer.push(
|
|
2747
|
+
this._buffer.push(p({
|
|
2740
2748
|
type: "editor:error"
|
|
2741
2749
|
}, o)), this.editor.canvas.fire("editor:error", o);
|
|
2742
2750
|
}
|
|
@@ -2764,7 +2772,7 @@ class X {
|
|
|
2764
2772
|
message: a,
|
|
2765
2773
|
data: i
|
|
2766
2774
|
};
|
|
2767
|
-
this._buffer.push(
|
|
2775
|
+
this._buffer.push(p({
|
|
2768
2776
|
type: "editor:warning"
|
|
2769
2777
|
}, o)), this.editor.canvas.fire("editor:warning", o);
|
|
2770
2778
|
}
|
|
@@ -2975,7 +2983,7 @@ const mt = {
|
|
|
2975
2983
|
keyboardIgnoreSelectors: []
|
|
2976
2984
|
};
|
|
2977
2985
|
function At(r, e = {}) {
|
|
2978
|
-
const t =
|
|
2986
|
+
const t = p(p({}, mt), e), s = document.getElementById(r);
|
|
2979
2987
|
if (!s)
|
|
2980
2988
|
return Promise.reject(new Error(`Контейнер с ID "${r}" не найден.`));
|
|
2981
2989
|
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.69",
|
|
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": [
|