@anu3ev/fabric-image-editor 0.5.1 → 0.5.2

package/dist/main.js

@@ -35,7 +35,7 @@ var _ = (h, t, e) => new Promise((s, o) => {
   }, a = (r) => r.done ? s(r.value) : Promise.resolve(r.value).then(n, i);
   a((e = e.apply(h, t)).next());
 });
-import { ActiveSelection as B, Textbox as st, util as lt, controlsUtils as Re, InteractiveFabricObject as _e, Point as $, FitContentLayout as Ne, loadSVGFromURL as ds, FabricImage as kt, Gradient as ke, Rect as ls, Circle as hs, Triangle as us, Group as wt, Color as gs, classRegistry as Be, loadSVGFromString as fs, Canvas as ps, Pattern as ms } from "fabric";
+import { ActiveSelection as B, Textbox as st, util as rt, controlsUtils as Re, InteractiveFabricObject as _e, Point as $, FitContentLayout as Ne, loadSVGFromURL as ds, FabricImage as kt, Gradient as ke, Rect as ls, Circle as hs, Triangle as us, Group as wt, Color as gs, classRegistry as Be, loadSVGFromString as fs, Canvas as ps, Pattern as ms } from "fabric";
 import { create as ys } from "jsondiffpatch";
 import vs from "diff-match-patch";
 var bs = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", Y = function() {
@@ -466,21 +466,21 @@ class Ss {
 const it = 12, As = 2, ce = 8, de = 20, js = 100, le = 20, he = 8, Is = 100, Xt = 32, pe = 1, Cs = "#2B2D33", me = "#3D8BF4", ye = "#FFFFFF";
 function Zt(h, t, e, s, o) {
   const n = it, i = As;
-  h.save(), h.translate(t, e), h.rotate(lt.degreesToRadians(o.angle)), h.fillStyle = ye, h.strokeStyle = me, h.lineWidth = pe, h.beginPath(), h.roundRect(-n / 2, -n / 2, n, n, i), h.fill(), h.stroke(), h.restore();
+  h.save(), h.translate(t, e), h.rotate(rt.degreesToRadians(o.angle)), h.fillStyle = ye, h.strokeStyle = me, h.lineWidth = pe, h.beginPath(), h.roundRect(-n / 2, -n / 2, n, n, i), h.fill(), h.stroke(), h.restore();
 }
 function xe(h, t, e, s, o) {
   const n = ce, i = de, a = js;
-  h.save(), h.translate(t, e), h.rotate(lt.degreesToRadians(o.angle)), h.fillStyle = ye, h.strokeStyle = me, h.lineWidth = pe, h.beginPath(), h.roundRect(-n / 2, -i / 2, n, i, a), h.fill(), h.stroke(), h.restore();
+  h.save(), h.translate(t, e), h.rotate(rt.degreesToRadians(o.angle)), h.fillStyle = ye, h.strokeStyle = me, h.lineWidth = pe, h.beginPath(), h.roundRect(-n / 2, -i / 2, n, i, a), h.fill(), h.stroke(), h.restore();
 }
 function ze(h, t, e, s, o) {
   const n = le, i = he, a = Is;
-  h.save(), h.translate(t, e), h.rotate(lt.degreesToRadians(o.angle)), h.fillStyle = ye, h.strokeStyle = me, h.lineWidth = pe, h.beginPath(), h.roundRect(-n / 2, -i / 2, n, i, a), h.fill(), h.stroke(), h.restore();
+  h.save(), h.translate(t, e), h.rotate(rt.degreesToRadians(o.angle)), h.fillStyle = ye, h.strokeStyle = me, h.lineWidth = pe, h.beginPath(), h.roundRect(-n / 2, -i / 2, n, i, a), h.fill(), h.stroke(), h.restore();
 }
 const Ts = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", $e = new Image();
 $e.src = Ts;
 function Es(h, t, e, s, o) {
   const i = Xt / 2;
-  h.save(), h.translate(t, e), h.rotate(lt.degreesToRadians(o.angle)), h.fillStyle = Cs, h.beginPath(), h.arc(0, 0, i, 0, 2 * Math.PI), h.fill(), h.drawImage($e, -i / 2, -i / 2, i, i), h.restore();
+  h.save(), h.translate(t, e), h.rotate(rt.degreesToRadians(o.angle)), h.fillStyle = Cs, h.beginPath(), h.arc(0, 0, i, 0, 2 * Math.PI), h.fill(), h.drawImage($e, -i / 2, -i / 2, i, i), h.restore();
 }
 const Os = {
   // Угловые точки
@@ -1585,7 +1585,7 @@ class at {
           }), null;
         if (this._createdBlobUrls.push(v), f === "svg") {
           const S = yield ds(v);
-          b = lt.groupSVGElements(S.objects, S.options);
+          b = rt.groupSVGElements(S.objects, S.options);
         } else
           b = yield kt.fromURL(v, { crossOrigin: "anonymous" });
         const { width: I, height: y } = b;
@@ -4488,11 +4488,11 @@ class q {
         scaleX: 1,
         scaleY: 1
       });
-      const rt = (je = o.width) != null ? je : C, _t = Math.abs(rt - Jt) > J;
-      let ct = m;
-      _t && (I || w) && (Tt === "right" ? ct = Et - rt : Tt === "center" && (ct = Ot - rt / 2)), o.set({ left: ct }), i.baseLeft = ct, n.scaleX = 1, n.scaleY = 1;
+      const ct = (je = o.width) != null ? je : C, _t = Math.abs(ct - Jt) > J;
+      let dt = m;
+      _t && (I || w) && (Tt === "right" ? dt = Et - ct : Tt === "center" && (dt = Ot - ct / 2)), o.set({ left: dt }), i.baseLeft = dt, n.scaleX = 1, n.scaleY = 1;
       const { original: ot } = n;
-      ot && (ot.scaleX = 1, ot.scaleY = 1, ot.width = rt, ot.height = o.height, ot.left = ct), o.setCoords(), this.canvas.requestRenderAll(), i.baseWidth = rt, i.baseFontSize = (Ie = o.fontSize) != null ? Ie : j, i.baseStyles = JSON.parse(JSON.stringify((Ce = o.styles) != null ? Ce : {})), i.basePadding = {
+      ot && (ot.scaleX = 1, ot.scaleY = 1, ot.width = ct, ot.height = o.height, ot.left = dt), o.setCoords(), this.canvas.requestRenderAll(), i.baseWidth = ct, i.baseFontSize = (Ie = o.fontSize) != null ? Ie : j, i.baseStyles = JSON.parse(JSON.stringify((Ce = o.styles) != null ? Ce : {})), i.basePadding = {
         top: z.top,
         right: z.right,
         bottom: z.bottom,
@@ -4663,7 +4663,7 @@ class q {
    * @param options.skipRender — не вызывать перерисовку канваса
    */
   updateText({ target: t, style: e = {}, withoutSave: s, skipRender: o } = {}) {
-    var Rt, rt, _t, ct, ot, Nt;
+    var Rt, ct, _t, dt, ot, Nt;
     const n = this._resolveTextObject(t);
     if (!n) return null;
     const { historyManager: i } = this.editor, { canvas: a } = this;
@@ -4726,7 +4726,7 @@ class q {
       R && (H.fontStyle = W), z && (L.fontStyle = W, U && (V.fontStyle = W));
     }
     if (f !== void 0 && (R && (H.underline = f), z && (L.underline = f, U && (V.underline = f))), m !== void 0 && (R && (H.linethrough = m), z && (L.linethrough = m, U && (V.linethrough = m))), v !== void 0 && (L.textAlign = v), b !== void 0 && (R && (H.fill = b), z && (L.fill = b, U && (V.fill = b))), I !== void 0 || y !== void 0) {
-      const W = R ? We({ textbox: n, range: R, property: "strokeWidth" }) : void 0, yt = R ? We({ textbox: n, range: R, property: "stroke" }) : void 0, Yt = (rt = (Rt = y != null ? y : W) != null ? Rt : n.strokeWidth) != null ? rt : 0, ht = Ge({ width: Yt }), Ft = (ct = (_t = I != null ? I : yt) != null ? _t : n.stroke) != null ? ct : void 0, vt = Ze({
+      const W = R ? We({ textbox: n, range: R, property: "strokeWidth" }) : void 0, yt = R ? We({ textbox: n, range: R, property: "stroke" }) : void 0, Yt = (ct = (Rt = y != null ? y : W) != null ? Rt : n.strokeWidth) != null ? ct : 0, ht = Ge({ width: Yt }), Ft = (dt = (_t = I != null ? I : yt) != null ? _t : n.stroke) != null ? dt : void 0, vt = Ze({
         strokeColor: Ft,
         width: ht
       });
@@ -5089,7 +5089,7 @@ const tt = ({
   } catch (s) {
     return null;
   }
-}, dt = ({
+}, lt = ({
   object: h
 }) => {
   if (!h) return null;
@@ -5314,7 +5314,7 @@ class D {
           if (i)
             return D._restoreImageScale({ revived: i, serialized: s }), i;
         }
-        const o = yield lt.enlivenObjects([s]), n = o == null ? void 0 : o[0];
+        const o = yield rt.enlivenObjects([s]), n = o == null ? void 0 : o[0];
         return n ? (D._restoreImageScale({ revived: n, serialized: s }), n) : null;
       })))).filter((s) => !!s);
     });
@@ -5359,7 +5359,7 @@ class D {
       const e = typeof t.svgMarkup == "string" ? t.svgMarkup : null;
       if (!e) return null;
       try {
-        const s = yield fs(e), o = lt.groupSVGElements(s.objects, s.options), n = yield lt.enlivenObjectEnlivables(
+        const s = yield fs(e), o = rt.groupSVGElements(s.objects, s.options), n = yield rt.enlivenObjectEnlivables(
           D._prepareSerializableProps(t)
         );
         return o.set(n), o.setCoords(), o;
@@ -5677,6 +5677,15 @@ class D {
     const s = t;
     return typeof s.src == "string" ? s.src : null;
   }
+  /**
+   * Оживляет сериализованный объект, восстанавливая вложенные описания (градиенты, клиппаты и т.д.).
+   * @param serialized - исходное сериализованное описание Fabric-объекта
+   * @returns оживлённый объект с восстановленными вложенными структурами
+   */
+  // eslint-disable-next-line class-methods-use-this
+  enlivenObjectEnlivables(t) {
+    return rt.enlivenObjectEnlivables(t);
+  }
 }
 const uo = 5, ts = "#3D8BF4", ge = 1, Ve = ({
   anchors: h,
@@ -6188,7 +6197,7 @@ class wo {
       return;
     }
     !this.anchors.vertical.length && !this.anchors.horizontal.length && this._cacheAnchors({ activeObject: e });
-    let o = dt({ object: e });
+    let o = lt({ object: e });
     if (!o) {
       this._clearGuides();
       return;
@@ -6203,9 +6212,9 @@ class wo {
       e.set({
         left: m + c,
         top: v + d
-      }), e.setCoords(), o = (f = dt({ object: e })) != null ? f : o;
+      }), e.setCoords(), o = (f = lt({ object: e })) != null ? f : o;
     }
-    const u = this.cachedTargetBounds.length ? this.cachedTargetBounds : this._collectTargets({ activeObject: e }).map((m) => dt({ object: m })).filter((m) => !!m), g = mo({
+    const u = this.cachedTargetBounds.length ? this.cachedTargetBounds : this._collectTargets({ activeObject: e }).map((m) => lt({ object: m })).filter((m) => !!m), g = mo({
       activeBounds: o,
       candidates: u,
       threshold: a,
@@ -6216,7 +6225,7 @@ class wo {
       e.set({
         left: m + g.deltaX,
         top: v + g.deltaY
-      }), e.setCoords(), o = (p = dt({ object: e })) != null ? p : o;
+      }), e.setCoords(), o = (p = lt({ object: e })) != null ? p : o;
     }
     this._applyGuides({
       guides: l,
@@ -6286,10 +6295,10 @@ class wo {
   _cacheAnchors({ activeObject: t }) {
     const e = this._collectTargets({ activeObject: t }), s = { vertical: [], horizontal: [] }, o = [];
     for (const a of e) {
-      const r = dt({ object: a });
+      const r = lt({ object: a });
       r && (Xe({ anchors: s, bounds: r }), o.push(r));
     }
-    const { montageArea: n } = this.editor, i = dt({ object: n });
+    const { montageArea: n } = this.editor, i = lt({ object: n });
     if (i) {
       Xe({ anchors: s, bounds: i });
       const { left: a, right: r, top: c, bottom: d } = i;
@@ -6438,7 +6447,7 @@ class At {
       this._clearGuides();
       return;
     }
-    const n = dt({ object: o });
+    const n = lt({ object: o });
     if (!n) {
       this._clearGuides();
       return;
@@ -6446,7 +6455,7 @@ class At {
     const i = At._resolveTarget({
       event: t,
       activeObject: o
-    }), { montageArea: a } = s, r = i != null ? i : a, c = r === a, d = dt({ object: r });
+    }), { montageArea: a } = s, r = i != null ? i : a, c = r === a, d = lt({ object: r });
     if (!d) {
       this._clearGuides();
       return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anu3ev/fabric-image-editor",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "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.",
   "module": "dist/main.js",
   "files": [