@anu3ev/fabric-image-editor 0.5.28 → 0.5.29

package/dist/main.js

@@ -35,7 +35,7 @@ var Z = (d, t, e) => new Promise((n, s) => {
   }, a = (r) => r.done ? n(r.value) : Promise.resolve(r.value).then(o, i);
   a((e = e.apply(d, t)).next());
 });
-import { ActiveSelection as X, Textbox as dt, util as yt, controlsUtils as He, InteractiveFabricObject as Ze, Point as at, FitContentLayout as Ge, loadSVGFromURL as An, FabricImage as Xt, Gradient as Ve, Rect as jn, Circle as In, Triangle as Cn, Group as Nt, Color as Tn, classRegistry as Xe, loadSVGFromString as On, Canvas as En, Pattern as Ln } from "fabric";
+import { ActiveSelection as X, Textbox as dt, util as ft, controlsUtils as He, InteractiveFabricObject as Ze, Point as at, FitContentLayout as Ge, loadSVGFromURL as An, FabricImage as Xt, Gradient as Ve, Rect as jn, Circle as In, Triangle as Cn, Group as Nt, Color as Tn, classRegistry as Xe, loadSVGFromString as On, Canvas as En, Pattern as Ln } from "fabric";
 import { create as Dn } from "jsondiffpatch";
 import _n from "diff-match-patch";
 var xn = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", tt = function() {
@@ -503,52 +503,52 @@ class Nn {
     this.worker.terminate();
   }
 }
-const pt = 12, Bn = 2, Ae = 8, je = 20, zn = 100, Ie = 20, Ce = 8, Pn = 100, he = 32, Re = 1, Fn = "#2B2D33", ke = "#3D8BF4", Ne = "#FFFFFF";
+const mt = 12, Bn = 2, Ae = 8, je = 20, zn = 100, Ie = 20, Ce = 8, Pn = 100, he = 32, Re = 1, Fn = "#2B2D33", ke = "#3D8BF4", Ne = "#FFFFFF";
 function ae(d, t, e, n, s) {
-  const o = pt, i = Bn;
-  d.save(), d.translate(t, e), d.rotate(yt.degreesToRadians(s.angle)), d.fillStyle = Ne, d.strokeStyle = ke, d.lineWidth = Re, d.beginPath(), d.roundRect(-o / 2, -o / 2, o, o, i), d.fill(), d.stroke(), d.restore();
+  const o = mt, i = Bn;
+  d.save(), d.translate(t, e), d.rotate(ft.degreesToRadians(s.angle)), d.fillStyle = Ne, d.strokeStyle = ke, d.lineWidth = Re, d.beginPath(), d.roundRect(-o / 2, -o / 2, o, o, i), d.fill(), d.stroke(), d.restore();
 }
 function qe(d, t, e, n, s) {
   const o = Ae, i = je, a = zn;
-  d.save(), d.translate(t, e), d.rotate(yt.degreesToRadians(s.angle)), d.fillStyle = Ne, d.strokeStyle = ke, d.lineWidth = Re, d.beginPath(), d.roundRect(-o / 2, -i / 2, o, i, a), d.fill(), d.stroke(), d.restore();
+  d.save(), d.translate(t, e), d.rotate(ft.degreesToRadians(s.angle)), d.fillStyle = Ne, d.strokeStyle = ke, d.lineWidth = Re, d.beginPath(), d.roundRect(-o / 2, -i / 2, o, i, a), d.fill(), d.stroke(), d.restore();
 }
 function Je(d, t, e, n, s) {
   const o = Ie, i = Ce, a = Pn;
-  d.save(), d.translate(t, e), d.rotate(yt.degreesToRadians(s.angle)), d.fillStyle = Ne, d.strokeStyle = ke, d.lineWidth = Re, d.beginPath(), d.roundRect(-o / 2, -i / 2, o, i, a), d.fill(), d.stroke(), d.restore();
+  d.save(), d.translate(t, e), d.rotate(ft.degreesToRadians(s.angle)), d.fillStyle = Ne, d.strokeStyle = ke, d.lineWidth = Re, d.beginPath(), d.roundRect(-o / 2, -i / 2, o, i, a), d.fill(), d.stroke(), d.restore();
 }
 const Wn = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", pn = new Image();
 pn.src = Wn;
 function Un(d, t, e, n, s) {
   const i = he / 2;
-  d.save(), d.translate(t, e), d.rotate(yt.degreesToRadians(s.angle)), d.fillStyle = Fn, d.beginPath(), d.arc(0, 0, i, 0, 2 * Math.PI), d.fill(), d.drawImage(pn, -i / 2, -i / 2, i, i), d.restore();
+  d.save(), d.translate(t, e), d.rotate(ft.degreesToRadians(s.angle)), d.fillStyle = Fn, d.beginPath(), d.arc(0, 0, i, 0, 2 * Math.PI), d.fill(), d.drawImage(pn, -i / 2, -i / 2, i, i), d.restore();
 }
 const Yn = {
   // Угловые точки
   tl: {
     render: ae,
-    sizeX: pt,
-    sizeY: pt,
+    sizeX: mt,
+    sizeY: mt,
     offsetX: 0,
     offsetY: 0
   },
   tr: {
     render: ae,
-    sizeX: pt,
-    sizeY: pt,
+    sizeX: mt,
+    sizeY: mt,
     offsetX: 0,
     offsetY: 0
   },
   bl: {
     render: ae,
-    sizeX: pt,
-    sizeY: pt,
+    sizeX: mt,
+    sizeY: mt,
     offsetX: 0,
     offsetY: 0
   },
   br: {
     render: ae,
-    sizeX: pt,
-    sizeY: pt,
+    sizeX: mt,
+    sizeY: mt,
     offsetX: 0,
     offsetY: 0
   },
@@ -1838,7 +1838,7 @@ const es = 0.1, ns = 2, tn = 0.1, ss = 90, Ft = 16, Wt = 16, Ot = 4096, Et = 409
   "radiusBottomLeft",
   "lineFontDefaults"
 ], is = 50;
-class mt {
+class yt {
   constructor({ editor: t }) {
     this.editor = t, this.options = t.options, this._createdBlobUrls = [], this.acceptContentTypes = this.editor.options.acceptContentTypes, this.acceptFormats = this.getAllowedFormatsFromContentTypes();
   }
@@ -1867,7 +1867,7 @@ class mt {
         customData: c = null
       } = t;
       if (!e) return null;
-      const { canvas: l, montageArea: h, transformManager: u, historyManager: f, errorManager: p } = this.editor, m = yield this.getContentType(e), g = mt.getFormatFromContentType(m), { acceptContentTypes: v, acceptFormats: M } = this;
+      const { canvas: l, montageArea: h, transformManager: u, historyManager: f, errorManager: p } = this.editor, m = yield this.getContentType(e), g = yt.getFormatFromContentType(m), { acceptContentTypes: v, acceptFormats: M } = this;
       if (!this.isAllowedContentType(m)) {
         const C = `Неверный contentType для изображения: ${m}. Ожидается один из: ${this.acceptContentTypes.join(", ")}.`;
         return p.emitError({
@@ -1918,7 +1918,7 @@ class mt {
           }), null;
         if (this._createdBlobUrls.push(C), g === "svg") {
           const b = yield An(C);
-          y = yt.groupSVGElements(b.objects, b.options);
+          y = ft.groupSVGElements(b.objects, b.options);
         } else
           y = yield Xt.fromURL(C, { crossOrigin: "anonymous" });
         const { width: w, height: j } = y;
@@ -2024,7 +2024,7 @@ class mt {
         exportAsBlob: o = !1
       } = t, { canvas: i, montageArea: a, workerManager: r, interactionBlocker: c } = this.editor;
       try {
-        const l = n === "application/pdf", h = l ? "image/jpg" : n, u = mt.getFormatFromContentType(h);
+        const l = n === "application/pdf", h = l ? "image/jpg" : n, u = yt.getFormatFromContentType(h);
         a.setCoords();
         const { left: f, top: p, width: m, height: g } = a.getBoundingRect(), v = yield i.clone(["id", "format", "locked"]);
         v.enableRetinaScaling = !1, ["image/jpg", "image/jpeg"].includes(h) && (v.backgroundColor = "#ffffff");
@@ -2039,7 +2039,7 @@ class mt {
           const S = v.toSVG();
           v.dispose();
           const O = {
-            image: mt._exportSVGStringAsFile(S, {
+            image: yt._exportSVGStringAsFile(S, {
               exportAsBase64: s,
               exportAsBlob: o,
               fileName: e
@@ -2148,9 +2148,9 @@ class mt {
           data: { contentType: s, fileName: n, exportAsBase64: o, exportAsBlob: i }
         }), null;
       try {
-        const l = mt.getFormatFromContentType(s);
+        const l = yt.getFormatFromContentType(s);
         if (l === "svg") {
-          const m = c.toSVG(), g = mt._exportSVGStringAsFile(m, {
+          const m = c.toSVG(), g = yt._exportSVGStringAsFile(m, {
             exportAsBase64: o,
             exportAsBlob: i,
             fileName: n
@@ -2228,7 +2228,7 @@ class mt {
    * @returns массив допустимых форматов изображений
    */
   getAllowedFormatsFromContentTypes() {
-    return this.acceptContentTypes.map((t) => mt.getFormatFromContentType(t)).filter((t) => t);
+    return this.acceptContentTypes.map((t) => yt.getFormatFromContentType(t)).filter((t) => t);
   }
   /**
    * Проверяет, является ли contentType допустимым типом изображения.
@@ -2281,7 +2281,7 @@ class mt {
     try {
       const s = (e = new URL(t).pathname.split(".").pop()) == null ? void 0 : e.toLowerCase(), o = {};
       return this.acceptContentTypes.forEach((i) => {
-        const a = mt.getFormatFromContentType(i);
+        const a = yt.getFormatFromContentType(i);
         a && (o[a] = i);
       }), s && o[s] || "application/octet-stream";
     } catch (n) {
@@ -4623,7 +4623,7 @@ const ms = ({ textbox: d }) => {
   );
   if (n.length)
     return (s = n[0]) == null ? void 0 : s[e];
-}, Ee = ({ strokeColor: d, width: t }) => t <= 0 ? null : d != null ? d : "#000000", Le = ({ width: d = 0 }) => d ? Math.max(0, d) : 0, Me = ({ value: d }) => typeof d == "string" ? d.toLocaleUpperCase() : "", gt = ({
+}, Ee = ({ strokeColor: d, width: t }) => t <= 0 ? null : d != null ? d : "#000000", Le = ({ width: d = 0 }) => d ? Math.max(0, d) : 0, Me = ({ value: d }) => typeof d == "string" ? d.toLocaleUpperCase() : "", pt = ({
   value: d,
   min: t,
   max: e
@@ -4779,10 +4779,10 @@ const ms = ({ textbox: d }) => {
     var i, a, r, c;
     const n = t / 2, s = e / 2, o = Math.min(n, s);
     return {
-      bottomLeft: gt({ value: (i = this.radiusBottomLeft) != null ? i : 0, min: 0, max: o }),
-      bottomRight: gt({ value: (a = this.radiusBottomRight) != null ? a : 0, min: 0, max: o }),
-      topLeft: gt({ value: (r = this.radiusTopLeft) != null ? r : 0, min: 0, max: o }),
-      topRight: gt({ value: (c = this.radiusTopRight) != null ? c : 0, min: 0, max: o })
+      bottomLeft: pt({ value: (i = this.radiusBottomLeft) != null ? i : 0, min: 0, max: o }),
+      bottomRight: pt({ value: (a = this.radiusBottomRight) != null ? a : 0, min: 0, max: o }),
+      topLeft: pt({ value: (r = this.radiusTopLeft) != null ? r : 0, min: 0, max: o }),
+      topRight: pt({ value: (c = this.radiusTopRight) != null ? c : 0, min: 0, max: o })
     };
   }
   _getPadding() {
@@ -4798,7 +4798,7 @@ const ms = ({ textbox: d }) => {
     var s;
     const t = this.backgroundColor;
     if (!t) return null;
-    const e = gt({ value: (s = this.backgroundOpacity) != null ? s : 1, min: 0, max: 1 });
+    const e = pt({ value: (s = this.backgroundOpacity) != null ? s : 1, min: 0, max: 1 });
     let n;
     try {
       n = new Tn(t);
@@ -4826,7 +4826,7 @@ const ms = ({ textbox: d }) => {
       topRight: l,
       bottomRight: h,
       bottomLeft: u
-    } = s, f = gt({ value: c, min: 0, max: i }), p = gt({ value: l, min: 0, max: i }), m = gt({ value: h, min: 0, max: i }), g = gt({ value: u, min: 0, max: i });
+    } = s, f = pt({ value: c, min: 0, max: i }), p = pt({ value: l, min: 0, max: i }), m = pt({ value: h, min: 0, max: i }), g = pt({ value: u, min: 0, max: i });
     t.beginPath(), t.moveTo(n + f, o), t.lineTo(a - p, o), t.quadraticCurveTo(a, o, a, o + p), t.lineTo(a, r - m), t.quadraticCurveTo(a, r, a - m, r), t.lineTo(n + g, r), t.quadraticCurveTo(n, r, n, r - g), t.lineTo(n, o + f), t.quadraticCurveTo(n, o, n + f, o), t.closePath();
   }
   /**
@@ -5247,8 +5247,8 @@ class st {
       const ut = (Zt = s.width) != null ? Zt : I, Qt = ut !== At;
       let jt = v;
       Qt && (y || j) && (vt === "right" ? jt = rt - ut : vt === "center" && (jt = ct - ut / 2)), s.set({ left: jt }), i.baseLeft = jt, o.scaleX = 1, o.scaleY = 1;
-      const { original: ft } = o;
-      ft && (ft.scaleX = 1, ft.scaleY = 1, ft.width = ut, ft.height = s.height, ft.left = jt), s.setCoords(), this.canvas.requestRenderAll(), i.baseWidth = ut, i.baseFontSize = (Gt = s.fontSize) != null ? Gt : O, i.baseStyles = JSON.parse(JSON.stringify((Vt = s.styles) != null ? Vt : {})), i.baseLineFontDefaults = an({
+      const { original: gt } = o;
+      gt && (gt.scaleX = 1, gt.scaleY = 1, gt.width = ut, gt.height = s.height, gt.left = jt), s.setCoords(), this.canvas.requestRenderAll(), i.baseWidth = ut, i.baseFontSize = (Gt = s.fontSize) != null ? Gt : O, i.baseStyles = JSON.parse(JSON.stringify((Vt = s.styles) != null ? Vt : {})), i.baseLineFontDefaults = an({
         lineFontDefaults: s.lineFontDefaults
       }), i.basePadding = {
         top: G.top,
@@ -5614,8 +5614,8 @@ class st {
         Q,
         $
       ]
-    }), { autoExpand: ft } = i, $t = m !== void 0, te = (m != null ? m : ft) !== !1;
-    $t ? i.autoExpand = m !== !1 : ft === void 0 && (i.autoExpand = !0);
+    }), { autoExpand: gt } = i, $t = m !== void 0, te = (m != null ? m : gt) !== !1;
+    $t ? i.autoExpand = m !== !1 : gt === void 0 && (i.autoExpand = !0);
     const ee = Object.prototype.hasOwnProperty.call(_, "width"), ne = te && !ee && (Lt || Ut || jt);
     let xt = !1;
     ne && (xt = this._autoExpandTextboxWidth(i, {
@@ -5637,6 +5637,13 @@ class st {
       selectionStyles: L && Object.keys(G).length ? G : void 0
     }), i;
   }
+  /**
+   * Преобразует стили из массивного формата Fabric в объектный.
+   */
+  // eslint-disable-next-line class-methods-use-this
+  stylesFromArray(t, e) {
+    return ft.stylesFromArray(t, e);
+  }
   /**
    * Уничтожает менеджер и снимает слушатели.
    */
@@ -6284,7 +6291,7 @@ class H {
           if (i)
             return H._restoreImageScale({ revived: i, serialized: n }), i;
         }
-        const s = yield yt.enlivenObjects([n]), o = s == null ? void 0 : s[0];
+        const s = yield ft.enlivenObjects([n]), o = s == null ? void 0 : s[0];
         return o ? (H._restoreImageScale({ revived: o, serialized: n }), o) : null;
       })))).filter((n) => !!n);
     });
@@ -6354,7 +6361,7 @@ class H {
       const e = typeof t.svgMarkup == "string" ? t.svgMarkup : null;
       if (!e) return null;
       try {
-        const n = yield On(e), s = yt.groupSVGElements(n.objects, n.options), o = yield yt.enlivenObjectEnlivables(
+        const n = yield On(e), s = ft.groupSVGElements(n.objects, n.options), o = yield ft.enlivenObjectEnlivables(
           H._prepareSerializableProps(t)
         );
         return s.set(o), s.setCoords(), s;
@@ -6718,7 +6725,7 @@ class H {
    */
   // eslint-disable-next-line class-methods-use-this
   enlivenObjectEnlivables(t) {
-    return yt.enlivenObjectEnlivables(t);
+    return ft.enlivenObjectEnlivables(t);
   }
 }
 const Ns = 5, mn = "#3D8BF4", De = 1, de = 1, dn = ({
@@ -7763,7 +7770,7 @@ class Pe {
         showRotationAngle: l,
         _onReadyCallback: h
       } = this.options;
-      if (lt.apply(), this.canvas = new En(this.containerId, this.options), this.moduleLoader = new Rn(), this.workerManager = new Nn(), this.errorManager = new Jt({ editor: this }), this.historyManager = new K({ editor: this }), this.toolbar = new Qn({ editor: this }), this.transformManager = new cs({ editor: this }), this.zoomManager = new ls({ editor: this }), this.canvasManager = new rs({ editor: this }), this.imageManager = new mt({ editor: this }), this.layerManager = new ue({ editor: this }), this.shapeManager = new hs({ editor: this }), this.interactionBlocker = new ds({ editor: this }), this.backgroundManager = new Bt({ editor: this }), this.clipboardManager = new us({ editor: this }), this.objectLockManager = new fe({ editor: this }), this.groupingManager = new fs({ editor: this }), this.selectionManager = new gs({ editor: this }), this.deletionManager = new ze({ editor: this }), this.panConstraintManager = new ps({ editor: this }), this.snappingManager = new pe({ editor: this }), this.measurementManager = new zt({ editor: this }), this.fontManager = new Te((u = this.options.fonts) != null ? u : []), this.textManager = new st({ editor: this }), this.templateManager = new H({ editor: this }), l && (this.angleIndicator = new Be({ editor: this })), this._createMontageArea(), this._createClippingArea(), this.listeners = new xe({ editor: this, options: this.options }), this.canvasManager.setEditorContainerWidth(t), this.canvasManager.setEditorContainerHeight(e), this.canvasManager.setCanvasWrapperWidth(n), this.canvasManager.setCanvasWrapperHeight(s), this.canvasManager.setCanvasCSSWidth(o), this.canvasManager.setCanvasCSSHeight(i), this.canvasManager.updateCanvas(), this.zoomManager.calculateAndApplyDefaultZoom(), yield this.fontManager.loadFonts(), a != null && a.source) {
+      if (lt.apply(), this.canvas = new En(this.containerId, this.options), this.moduleLoader = new Rn(), this.workerManager = new Nn(), this.errorManager = new Jt({ editor: this }), this.historyManager = new K({ editor: this }), this.toolbar = new Qn({ editor: this }), this.transformManager = new cs({ editor: this }), this.zoomManager = new ls({ editor: this }), this.canvasManager = new rs({ editor: this }), this.imageManager = new yt({ editor: this }), this.layerManager = new ue({ editor: this }), this.shapeManager = new hs({ editor: this }), this.interactionBlocker = new ds({ editor: this }), this.backgroundManager = new Bt({ editor: this }), this.clipboardManager = new us({ editor: this }), this.objectLockManager = new fe({ editor: this }), this.groupingManager = new fs({ editor: this }), this.selectionManager = new gs({ editor: this }), this.deletionManager = new ze({ editor: this }), this.panConstraintManager = new ps({ editor: this }), this.snappingManager = new pe({ editor: this }), this.measurementManager = new zt({ editor: this }), this.fontManager = new Te((u = this.options.fonts) != null ? u : []), this.textManager = new st({ editor: this }), this.templateManager = new H({ editor: this }), l && (this.angleIndicator = new Be({ editor: this })), this._createMontageArea(), this._createClippingArea(), this.listeners = new xe({ editor: this, options: this.options }), this.canvasManager.setEditorContainerWidth(t), this.canvasManager.setEditorContainerHeight(e), this.canvasManager.setCanvasWrapperWidth(n), this.canvasManager.setCanvasWrapperHeight(s), this.canvasManager.setCanvasCSSWidth(o), this.canvasManager.setCanvasCSSHeight(i), this.canvasManager.updateCanvas(), this.zoomManager.calculateAndApplyDefaultZoom(), yield this.fontManager.loadFonts(), a != null && a.source) {
         const f = a, {
           source: p,
           scale: m = `image-${c}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anu3ev/fabric-image-editor",
-  "version": "0.5.28",
+  "version": "0.5.29",
   "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": [