@anu3ev/fabric-image-editor 0.5.7 → 0.5.9

package/dist/main.js

@@ -1593,21 +1593,21 @@ class ct {
           const A = b.getElement();
           let j = "";
           if (A instanceof HTMLImageElement ? j = A.src : A instanceof HTMLCanvasElement && (j = A.toDataURL()), y > wt || I > Mt) {
-            const M = yield this.resizeImageToBoundaries(j, "max"), T = URL.createObjectURL(M);
+            const w = yield this.resizeImageToBoundaries(j, "max"), T = URL.createObjectURL(w);
             this._createdBlobUrls.push(T), b = yield zt.fromURL(T, { crossOrigin: "anonymous" });
           } else if (y < _t || I < Rt) {
-            const M = yield this.resizeImageToBoundaries(j, "min"), T = URL.createObjectURL(M);
+            const w = yield this.resizeImageToBoundaries(j, "min"), T = URL.createObjectURL(w);
             this._createdBlobUrls.push(T), b = yield zt.fromURL(T, { crossOrigin: "anonymous" });
           }
         }
         if (b.set("id", `${b.type}-${G()}`), b.set("format", f), s === "scale-montage")
           this.editor.canvasManager.scaleMontageAreaToImage({ object: b, withoutSave: !0 });
         else {
-          const { width: A, height: j } = c, M = this.calculateScaleFactor({ imageObject: b, scaleType: s });
-          s === "image-contain" && M < 1 ? d.fitObject({ object: b, type: "contain", withoutSave: !0 }) : s === "image-cover" && (I > A || y > j) && d.fitObject({ object: b, type: "cover", withoutSave: !0 });
+          const { width: A, height: j } = c, w = this.calculateScaleFactor({ imageObject: b, scaleType: s });
+          s === "image-contain" && w < 1 ? d.fitObject({ object: b, type: "contain", withoutSave: !0 }) : s === "image-cover" && (I > A || y > j) && d.fitObject({ object: b, type: "cover", withoutSave: !0 });
         }
         r.add(b), r.centerObject(b), a || r.setActiveObject(b), r.renderAll(), l.resumeHistory(), o || l.saveState();
-        const w = {
+        const M = {
           image: b,
           format: f,
           contentType: g,
@@ -1618,7 +1618,7 @@ class ct {
           isBackground: i,
           withoutSelection: a
         };
-        return r.fire("editor:image-imported", w), w;
+        return r.fire("editor:image-imported", M), M;
       } catch (v) {
         return u.emitError({
           origin: "ImageManager",
@@ -1728,28 +1728,28 @@ class ct {
           };
           return i.fire("editor:canvas-exported", S), S;
         }
-        const w = yield createImageBitmap(y), A = yield r.post(
+        const M = yield createImageBitmap(y), A = yield r.post(
           "toDataURL",
-          { format: u, quality: 1, bitmap: w },
-          [w]
+          { format: u, quality: 1, bitmap: M },
+          [M]
         );
         if (d) {
-          const C = p * 0.264583, x = m * 0.264583, F = (yield this.editor.moduleLoader.loadModule("jspdf")).jsPDF, U = new F({
+          const C = p * 0.264583, x = m * 0.264583, W = (yield this.editor.moduleLoader.loadModule("jspdf")).jsPDF, Y = new W({
             orientation: C > x ? "landscape" : "portrait",
             unit: "mm",
             format: [C, x]
           });
-          if (U.addImage(String(A), "JPG", 0, 0, C, x), o) {
-            const z = {
-              image: U.output("datauristring"),
+          if (Y.addImage(String(A), "JPG", 0, 0, C, x), o) {
+            const P = {
+              image: Y.output("datauristring"),
               format: "pdf",
               contentType: "application/pdf",
               fileName: e
             };
-            return i.fire("editor:canvas-exported", z), z;
+            return i.fire("editor:canvas-exported", P), P;
           }
-          const W = U.output("blob"), L = {
-            image: new File([W], e, { type: "application/pdf" }),
+          const H = Y.output("blob"), L = {
+            image: new File([H], e, { type: "application/pdf" }),
             format: "pdf",
             contentType: "application/pdf",
             fileName: e
@@ -2621,7 +2621,7 @@ class Js {
   _calculateEmptySpaceRatio(t) {
     const { canvas: e, montageArea: s } = this.editor, o = e.viewportTransform, n = e.getWidth(), i = e.getHeight(), a = s.left - s.width / 2, r = s.left + s.width / 2, c = s.top - s.height / 2, d = s.top + s.height / 2, l = -o[4] / t, u = (-o[4] + n) / t, g = -o[5] / t, f = (-o[5] + i) / t, p = l < a, m = u > r, v = g < c, b = f > d;
     if (!(p || m || v || b)) return 0;
-    const y = Math.max(0, a - l), w = Math.max(0, u - r), A = Math.max(0, c - g), j = Math.max(0, f - d), M = Math.max(y, w), T = Math.max(A, j), S = M / n, C = T / i;
+    const y = Math.max(0, a - l), M = Math.max(0, u - r), A = Math.max(0, c - g), j = Math.max(0, f - d), w = Math.max(y, M), T = Math.max(A, j), S = w / n, C = T / i;
     return Math.max(S, C);
   }
   /**
@@ -2638,8 +2638,8 @@ class Js {
     const { canvas: i, montageArea: a } = this.editor, r = i.viewportTransform, c = i.getWidth(), d = i.getHeight(), l = t.x - r[4], u = t.y - r[5], g = Math.abs(o), f = e - s;
     if (Math.abs(f) / g <= 0.1)
       return { x: l, y: u };
-    const m = c / 2, v = d / 2, b = a.left, I = a.top, y = m - b * s, w = v - I * s, A = (y - r[4]) / (e - s), j = (w - r[5]) / (e - s), M = A * g, T = j * g, S = M * n, C = T * n, x = Math.abs(S) > Math.abs(l) ? l : S, F = Math.abs(C) > Math.abs(u) ? u : C;
-    return { x, y: F };
+    const m = c / 2, v = d / 2, b = a.left, I = a.top, y = m - b * s, M = v - I * s, A = (y - r[4]) / (e - s), j = (M - r[5]) / (e - s), w = A * g, T = j * g, S = w * n, C = T * n, x = Math.abs(S) > Math.abs(l) ? l : S, W = Math.abs(C) > Math.abs(u) ? u : C;
+    return { x, y: W };
   }
   /**
    * Применяет плавное центрирование viewport при приближении к defaultZoom.
@@ -2911,8 +2911,9 @@ class Ot {
     endColor: s,
     startPosition: o,
     endPosition: n,
-    customData: i = {},
-    withoutSave: a = !1
+    colorStops: i,
+    customData: a = {},
+    withoutSave: r = !1
   }) {
     this.setGradientBackground({
       gradient: {
@@ -2921,10 +2922,11 @@ class Ot {
         startColor: e,
         endColor: s,
         startPosition: o,
-        endPosition: n
+        endPosition: n,
+        colorStops: i
       },
-      customData: i,
-      withoutSave: a
+      customData: a,
+      withoutSave: r
     });
   }
   /**
@@ -2939,8 +2941,9 @@ class Ot {
     endColor: n,
     startPosition: i,
     endPosition: a,
-    customData: r = {},
-    withoutSave: c = !1
+    colorStops: r,
+    customData: c = {},
+    withoutSave: d = !1
   }) {
     this.setGradientBackground({
       gradient: {
@@ -2951,10 +2954,11 @@ class Ot {
         startColor: o,
         endColor: n,
         startPosition: i,
-        endPosition: a
+        endPosition: a,
+        colorStops: r
       },
-      customData: r,
-      withoutSave: c
+      customData: c,
+      withoutSave: d
     });
   }
   /**
@@ -3095,37 +3099,45 @@ class Ot {
       startColor: e,
       endColor: s,
       startPosition: o = 0,
-      endPosition: n = 100
-    } = t, i = [
+      endPosition: n = 100,
+      colorStops: i
+    } = t;
+    let a;
+    if (i && i.length > 0 ? a = i.map((u) => ({
+      offset: u.offset / 100,
+      color: u.color
+    })) : e && s ? a = [
       { offset: o / 100, color: e },
       { offset: n / 100, color: s }
-    ];
-    if (t.type === "linear") {
-      const l = t.angle * Math.PI / 180, u = Ot._angleToCoords(l);
+    ] : a = [
+      { offset: 0, color: "#000000" },
+      { offset: 1, color: "#ffffff" }
+    ], t.type === "linear") {
+      const u = t.angle * Math.PI / 180, g = Ot._angleToCoords(u);
       return new ze({
         type: "linear",
         gradientUnits: "percentage",
-        coords: u,
-        colorStops: i
+        coords: g,
+        colorStops: a
       });
     }
     const {
-      centerX: a = 50,
-      centerY: r = 50,
-      radius: c = 50
-    } = t, d = {
-      x1: a / 100,
-      y1: r / 100,
-      x2: a / 100,
-      y2: r / 100,
+      centerX: r = 50,
+      centerY: c = 50,
+      radius: d = 50
+    } = t, l = {
+      x1: r / 100,
+      y1: c / 100,
+      x2: r / 100,
+      y2: c / 100,
       r1: 0,
-      r2: c / 100
+      r2: d / 100
     };
     return new ze({
       type: "radial",
       gradientUnits: "percentage",
-      coords: d,
-      colorStops: i
+      coords: l,
+      colorStops: a
     });
   }
   /**
@@ -4407,32 +4419,22 @@ const io = () => {
   if (!(t <= 0))
     return h != null ? h : "#000000";
 }, Ke = ({ width: h = 0 }) => h ? Math.max(0, h) : 0, ie = ({ value: h }) => typeof h == "string" ? h.toLocaleUpperCase() : "", st = 0.01;
-class Z {
+class z {
   constructor({ editor: t }) {
     var e;
     this._handleTextEditingEntered = () => {
       this.isTextEditingActive = !0;
-    }, this._handleTextChanged = (s) => {
-      const { target: o } = s;
-      if (!Z._isTextbox(o)) return;
-      const { text: n = "", uppercase: i } = o, a = !!i, r = n.toLocaleLowerCase();
-      if (a) {
-        const d = ie({ value: r });
-        d !== n && o.set({ text: d }), o.textCaseRaw = r;
-      } else
-        o.textCaseRaw = n;
-      Z._roundTextboxDimensions({ textbox: o }) && (o.setCoords(), o.dirty = !0);
     }, this._handleTextEditingExited = (s) => {
       var r, c;
       const { target: o } = s;
-      if (!Z._isTextbox(o)) return;
+      if (!z._isTextbox(o)) return;
       const n = (r = o.text) != null ? r : "";
       if (!!o.uppercase) {
         const d = (c = o.textCaseRaw) != null ? c : n.toLocaleLowerCase();
         o.textCaseRaw = d;
       } else
         o.textCaseRaw = n;
-      Z._roundTextboxDimensions({ textbox: o }) && (o.setCoords(), o.dirty = !0, this.canvas.requestRenderAll()), o.locked || o.set({
+      z._roundTextboxDimensions({ textbox: o }) && (o.setCoords(), o.dirty = !0, this.canvas.requestRenderAll()), o.locked || o.set({
         lockMovementX: !1,
         lockMovementY: !1
       }), setTimeout(() => {
@@ -4441,7 +4443,7 @@ class Z {
     }, this._handleObjectScaling = (s) => {
       var X, It, Wt, mt, Ht, Ct, Ae, je, Ie, Ce, Te, Ee, Oe;
       const { target: o, transform: n } = s;
-      if (o instanceof k || !Z._isTextbox(o) || !n) return;
+      if (o instanceof k || !z._isTextbox(o) || !n) return;
       o.isScaling = !0;
       const i = this._ensureScalingState(o), {
         baseWidth: a,
@@ -4450,30 +4452,30 @@ class Z {
         basePadding: d,
         baseRadii: l,
         baseStyles: u
-      } = i, g = typeof ((X = n.original) == null ? void 0 : X.width) == "number" ? n.original.width : void 0, f = typeof ((It = n.original) == null ? void 0 : It.left) == "number" ? n.original.left : void 0, p = g != null ? g : a, m = f != null ? f : r, v = (Wt = n.corner) != null ? Wt : "", b = (mt = n.action) != null ? mt : "", I = ["ml", "mr"].includes(v) || b === "scaleX", y = ["mt", "mb"].includes(v) || b === "scaleY", w = ["tl", "tr", "bl", "br"].includes(v) || b === "scale", A = w || y;
-      if (!I && !y && !w) return;
-      const j = Math.abs((Ct = (Ht = o.scaleX) != null ? Ht : n.scaleX) != null ? Ct : 1) || 1, M = Math.abs((je = (Ae = o.scaleY) != null ? Ae : n.scaleY) != null ? je : 1) || 1, T = Math.max(1, p * j), S = Math.max(1, Math.round(T)), C = Math.max(1, c * M), {
+      } = i, g = typeof ((X = n.original) == null ? void 0 : X.width) == "number" ? n.original.width : void 0, f = typeof ((It = n.original) == null ? void 0 : It.left) == "number" ? n.original.left : void 0, p = g != null ? g : a, m = f != null ? f : r, v = (Wt = n.corner) != null ? Wt : "", b = (mt = n.action) != null ? mt : "", I = ["ml", "mr"].includes(v) || b === "scaleX", y = ["mt", "mb"].includes(v) || b === "scaleY", M = ["tl", "tr", "bl", "br"].includes(v) || b === "scale", A = M || y;
+      if (!I && !y && !M) return;
+      const j = Math.abs((Ct = (Ht = o.scaleX) != null ? Ht : n.scaleX) != null ? Ct : 1) || 1, w = Math.abs((je = (Ae = o.scaleY) != null ? Ae : n.scaleY) != null ? je : 1) || 1, T = Math.max(1, p * j), S = Math.max(1, Math.round(T)), C = Math.max(1, c * w), {
         paddingTop: x = 0,
-        paddingRight: F = 0,
-        paddingBottom: U = 0,
-        paddingLeft: W = 0,
+        paddingRight: W = 0,
+        paddingBottom: Y = 0,
+        paddingLeft: H = 0,
         radiusTopLeft: V = 0,
         radiusTopRight: L = 0,
         radiusBottomRight: D = 0,
-        radiusBottomLeft: z = 0,
-        fontSize: H,
-        width: P,
+        radiusBottomLeft: P = 0,
+        fontSize: Z,
+        width: U,
         originX: K = "left"
-      } = o, $ = w || y, q = w || y, Y = $ ? {
-        top: Math.max(0, d.top * M),
-        right: Math.max(0, d.right * M),
-        bottom: Math.max(0, d.bottom * M),
-        left: Math.max(0, d.left * M)
+      } = o, $ = M || y, q = M || y, F = $ ? {
+        top: Math.max(0, d.top * w),
+        right: Math.max(0, d.right * w),
+        bottom: Math.max(0, d.bottom * w),
+        left: Math.max(0, d.left * w)
       } : d, Q = q ? {
-        topLeft: Math.max(0, l.topLeft * M),
-        topRight: Math.max(0, l.topRight * M),
-        bottomRight: Math.max(0, l.bottomRight * M),
-        bottomLeft: Math.max(0, l.bottomLeft * M)
+        topLeft: Math.max(0, l.topLeft * w),
+        topRight: Math.max(0, l.topRight * w),
+        bottomRight: Math.max(0, l.bottomRight * w),
+        bottomLeft: Math.max(0, l.bottomLeft * w)
       } : l, St = Object.keys(u).length > 0;
       let et;
       if (A && St) {
@@ -4484,11 +4486,11 @@ class Z {
           Object.entries(Le).forEach(([cs, Zt]) => {
             if (!Zt) return;
             const De = _({}, Zt);
-            typeof Zt.fontSize == "number" && (De.fontSize = Math.max(1, Zt.fontSize * M)), oe[cs] = De;
+            typeof Zt.fontSize == "number" && (De.fontSize = Math.max(1, Zt.fontSize * w)), oe[cs] = De;
           }), Object.keys(oe).length && (se[rs] = oe);
         }), Object.keys(se).length && (et = se);
       }
-      const lt = (Ce = (Ie = n.originX) != null ? Ie : K) != null ? Ce : "left", pt = m + p, At = m + p / 2, ht = P != null ? P : p, jt = S !== ht, Ft = Math.abs(C - (H != null ? H : c)) > st, Nt = Math.abs(Y.top - x) > st || Math.abs(Y.right - F) > st || Math.abs(Y.bottom - U) > st || Math.abs(Y.left - W) > st, xt = Math.abs(Q.topLeft - V) > st || Math.abs(Q.topRight - L) > st || Math.abs(Q.bottomRight - D) > st || Math.abs(Q.bottomLeft - z) > st;
+      const lt = (Ce = (Ie = n.originX) != null ? Ie : K) != null ? Ce : "left", pt = m + p, At = m + p / 2, ht = U != null ? U : p, jt = S !== ht, Ft = Math.abs(C - (Z != null ? Z : c)) > st, Nt = Math.abs(F.top - x) > st || Math.abs(F.right - W) > st || Math.abs(F.bottom - Y) > st || Math.abs(F.left - H) > st, xt = Math.abs(Q.topLeft - V) > st || Math.abs(Q.topRight - L) > st || Math.abs(Q.bottomRight - D) > st || Math.abs(Q.bottomLeft - P) > st;
       if (!jt && !Ft && !Nt && !xt) {
         o.set({ scaleX: 1, scaleY: 1 }), n.scaleX = 1, n.scaleY = 1;
         return;
@@ -4496,10 +4498,10 @@ class Z {
       et && (o.styles = et), o.set({
         width: S,
         fontSize: A ? C : c,
-        paddingTop: Y.top,
-        paddingRight: Y.right,
-        paddingBottom: Y.bottom,
-        paddingLeft: Y.left,
+        paddingTop: F.top,
+        paddingRight: F.right,
+        paddingBottom: F.bottom,
+        paddingLeft: F.left,
         radiusTopLeft: Q.topLeft,
         radiusTopRight: Q.topRight,
         radiusBottomRight: Q.bottomRight,
@@ -4507,17 +4509,17 @@ class Z {
         scaleX: 1,
         scaleY: 1
       });
-      const Bt = Z._roundTextboxDimensions({ textbox: o });
+      const Bt = z._roundTextboxDimensions({ textbox: o });
       Bt && (o.dirty = !0);
       const ut = (Te = o.width) != null ? Te : S, kt = ut !== ht;
       let gt = m;
-      kt && (I || w) && (lt === "right" ? gt = pt - ut : lt === "center" && (gt = At - ut / 2)), o.set({ left: gt }), i.baseLeft = gt, n.scaleX = 1, n.scaleY = 1;
+      kt && (I || M) && (lt === "right" ? gt = pt - ut : lt === "center" && (gt = At - ut / 2)), o.set({ left: gt }), i.baseLeft = gt, n.scaleX = 1, n.scaleY = 1;
       const { original: it } = n;
       it && (it.scaleX = 1, it.scaleY = 1, it.width = ut, it.height = o.height, it.left = gt), o.setCoords(), this.canvas.requestRenderAll(), i.baseWidth = ut, i.baseFontSize = (Ee = o.fontSize) != null ? Ee : C, i.baseStyles = JSON.parse(JSON.stringify((Oe = o.styles) != null ? Oe : {})), i.basePadding = {
-        top: Y.top,
-        right: Y.right,
-        bottom: Y.bottom,
-        left: Y.left
+        top: F.top,
+        right: F.right,
+        bottom: F.bottom,
+        left: F.left
       }, i.baseRadii = {
         topLeft: Q.topLeft,
         topRight: Q.topRight,
@@ -4528,38 +4530,38 @@ class Z {
       var b, I, y;
       const { target: o } = s;
       if (o instanceof k) {
-        const w = o.getObjects();
-        if (!w.some((S) => Z._isTextbox(S))) return;
-        const { scaleX: j = 1, scaleY: M = 1 } = o;
-        if (Math.abs(j - 1) < st && Math.abs(M - 1) < st) return;
-        this.canvas.discardActiveObject(), w.forEach((S) => {
-          var C, x, F, U;
-          if (Z._isTextbox(S)) {
-            const W = (C = S.scaleX) != null ? C : 1, V = (x = S.scaleY) != null ? x : 1, L = ((F = S.fontSize) != null ? F : 16) * V, D = ((U = S.width) != null ? U : 0) * W, z = V, {
-              paddingTop: H = 0,
-              paddingRight: P = 0,
+        const M = o.getObjects();
+        if (!M.some((S) => z._isTextbox(S))) return;
+        const { scaleX: j = 1, scaleY: w = 1 } = o;
+        if (Math.abs(j - 1) < st && Math.abs(w - 1) < st) return;
+        this.canvas.discardActiveObject(), M.forEach((S) => {
+          var C, x, W, Y;
+          if (z._isTextbox(S)) {
+            const H = (C = S.scaleX) != null ? C : 1, V = (x = S.scaleY) != null ? x : 1, L = ((W = S.fontSize) != null ? W : 16) * V, D = ((Y = S.width) != null ? Y : 0) * H, P = V, {
+              paddingTop: Z = 0,
+              paddingRight: U = 0,
               paddingBottom: K = 0,
               paddingLeft: $ = 0,
               radiusTopLeft: q = 0,
-              radiusTopRight: Y = 0,
+              radiusTopRight: F = 0,
               radiusBottomRight: Q = 0,
               radiusBottomLeft: St = 0,
               styles: et
             } = S, lt = {
-              paddingTop: Math.max(0, H * z),
-              paddingRight: Math.max(0, P * z),
-              paddingBottom: Math.max(0, K * z),
-              paddingLeft: Math.max(0, $ * z)
+              paddingTop: Math.max(0, Z * P),
+              paddingRight: Math.max(0, U * P),
+              paddingBottom: Math.max(0, K * P),
+              paddingLeft: Math.max(0, $ * P)
             }, pt = {
-              radiusTopLeft: Math.max(0, q * z),
-              radiusTopRight: Math.max(0, Y * z),
-              radiusBottomRight: Math.max(0, Q * z),
-              radiusBottomLeft: Math.max(0, St * z)
+              radiusTopLeft: Math.max(0, q * P),
+              radiusTopRight: Math.max(0, F * P),
+              radiusBottomRight: Math.max(0, Q * P),
+              radiusBottomLeft: Math.max(0, St * P)
             };
             let At = et;
             et && Object.keys(et).length > 0 && (At = JSON.parse(JSON.stringify(et)), Object.values(At).forEach((ht) => {
               Object.values(ht).forEach((jt) => {
-                typeof jt.fontSize == "number" && (jt.fontSize = Math.max(1, jt.fontSize * z));
+                typeof jt.fontSize == "number" && (jt.fontSize = Math.max(1, jt.fontSize * P));
               });
             })), S.set(yt(_(_({
               fontSize: L,
@@ -4568,17 +4570,17 @@ class Z {
               scaleY: 1
             }, lt), pt), {
               styles: At
-            })), Z._roundTextboxDimensions({ textbox: S });
+            })), z._roundTextboxDimensions({ textbox: S });
           }
           S.setCoords();
         });
-        const T = new k(w, {
+        const T = new k(M, {
           canvas: this.canvas
         });
         this.canvas.setActiveObject(T), this.canvas.requestRenderAll();
         return;
       }
-      if (!Z._isTextbox(o)) return;
+      if (!z._isTextbox(o)) return;
       o.isScaling = !1;
       const n = this.scalingState.get(o);
       if (this.scalingState.delete(o), !(n != null && n.hasWidthChange)) return;
@@ -4613,8 +4615,8 @@ class Z {
    * @param options — настройки текста
    * @param flags — флаги поведения
    */
-  addText(F = {}, { withoutSelection: S = !1, withoutSave: C = !1, withoutAdding: x = !1 } = {}) {
-    var U = F, {
+  addText(W = {}, { withoutSelection: S = !1, withoutSave: C = !1, withoutAdding: x = !1 } = {}) {
+    var Y = W, {
       id: t = `text-${G()}`,
       text: e = "Новый текст",
       fontFamily: s,
@@ -4635,11 +4637,11 @@ class Z {
       paddingRight: b = 0,
       paddingBottom: I = 0,
       paddingLeft: y = 0,
-      radiusTopLeft: w = 0,
+      radiusTopLeft: M = 0,
       radiusTopRight: A = 0,
       radiusBottomRight: j = 0,
-      radiusBottomLeft: M = 0
-    } = U, T = vt(U, [
+      radiusBottomLeft: w = 0
+    } = Y, T = vt(Y, [
       "id",
       "text",
       "fontFamily",
@@ -4666,12 +4668,12 @@ class Z {
       "radiusBottomLeft"
     ]);
     var $;
-    const { historyManager: W } = this.editor, { canvas: V } = this;
-    W.suspendHistory();
-    const L = s != null ? s : this._getDefaultFontFamily(), D = Ke({ width: g }), z = Xe({
+    const { historyManager: H } = this.editor, { canvas: V } = this;
+    H.suspendHistory();
+    const L = s != null ? s : this._getDefaultFontFamily(), D = Ke({ width: g }), P = Xe({
       strokeColor: u,
       width: D
-    }), H = _({
+    }), Z = _({
       id: t,
       fontFamily: L,
       fontSize: o,
@@ -4682,7 +4684,7 @@ class Z {
       linethrough: c,
       textAlign: d,
       fill: l,
-      stroke: z,
+      stroke: P,
       strokeWidth: D,
       strokeUniform: !0,
       opacity: f,
@@ -4692,25 +4694,25 @@ class Z {
       paddingRight: b,
       paddingBottom: I,
       paddingLeft: y,
-      radiusTopLeft: w,
+      radiusTopLeft: M,
       radiusTopRight: A,
       radiusBottomRight: j,
-      radiusBottomLeft: M
-    }, T), P = new ee(e, H);
-    if (P.textCaseRaw = ($ = P.text) != null ? $ : "", r) {
-      const q = ie({ value: P.textCaseRaw });
-      q !== P.text && P.set({ text: q });
-    }
-    return Z._roundTextboxDimensions({ textbox: P }) && (P.dirty = !0), T.left === void 0 && T.top === void 0 && V.centerObject(P), x || V.add(P), S || V.setActiveObject(P), V.requestRenderAll(), W.resumeHistory(), C || W.saveState(), V.fire("editor:text-added", {
-      textbox: P,
-      options: yt(_({}, H), {
+      radiusBottomLeft: w
+    }, T), U = new ee(e, Z);
+    if (U.textCaseRaw = ($ = U.text) != null ? $ : "", r) {
+      const q = ie({ value: U.textCaseRaw });
+      q !== U.text && U.set({ text: q });
+    }
+    return z._roundTextboxDimensions({ textbox: U }) && (U.dirty = !0), T.left === void 0 && T.top === void 0 && V.centerObject(U), x || V.add(U), S || V.setActiveObject(U), V.requestRenderAll(), H.resumeHistory(), C || H.saveState(), V.fire("editor:text-added", {
+      textbox: U,
+      options: yt(_({}, Z), {
         text: e,
         bold: n,
         italic: i,
         strikethrough: c,
         align: d,
         color: l,
-        strokeColor: z,
+        strokeColor: P,
         strokeWidth: D
       }),
       flags: {
@@ -4718,7 +4720,7 @@ class Z {
         withoutSave: !!C,
         withoutAdding: !!x
       }
-    }), P;
+    }), U;
   }
   /**
    * Обновляет текстовый объект.
@@ -4734,7 +4736,7 @@ class Z {
     if (!n) return null;
     const { historyManager: i } = this.editor, { canvas: a } = this;
     i.suspendHistory();
-    const r = Z._getSnapshot(n), Nt = e, {
+    const r = z._getSnapshot(n), Nt = e, {
       text: c,
       fontFamily: d,
       fontSize: l,
@@ -4747,17 +4749,17 @@ class Z {
       color: b,
       strokeColor: I,
       strokeWidth: y,
-      opacity: w,
+      opacity: M,
       backgroundColor: A,
       backgroundOpacity: j,
-      paddingTop: M,
+      paddingTop: w,
       paddingRight: T,
       paddingBottom: S,
       paddingLeft: C,
       radiusTopLeft: x,
-      radiusTopRight: F,
-      radiusBottomRight: U,
-      radiusBottomLeft: W
+      radiusTopRight: W,
+      radiusBottomRight: Y,
+      radiusBottomLeft: H
     } = Nt, V = vt(Nt, [
       "text",
       "fontFamily",
@@ -4782,23 +4784,23 @@ class Z {
       "radiusTopRight",
       "radiusBottomRight",
       "radiusBottomLeft"
-    ]), L = _({}, V), D = ao({ textbox: n }), z = D ? this._expandRangeToFullLines({ textbox: n, range: D }) : null, H = {}, P = {}, K = {}, $ = co({ textbox: n, range: D }), q = !D || $, Y = !D;
-    if (d !== void 0 && (z && (P.fontFamily = d), q && (L.fontFamily = d, Y && (K.fontFamily = d))), l !== void 0 && (z && (P.fontSize = l), q && (L.fontSize = l, Y && (K.fontSize = l))), u !== void 0) {
+    ]), L = _({}, V), D = ao({ textbox: n }), P = D ? z._expandRangeToFullLines({ textbox: n, range: D }) : null, Z = {}, U = {}, K = {}, $ = co({ textbox: n, range: D }), q = !D || $, F = !D;
+    if (d !== void 0 && (P && (U.fontFamily = d), q && (L.fontFamily = d, F && (K.fontFamily = d))), l !== void 0 && (P && (U.fontSize = l), q && (L.fontSize = l, F && (K.fontSize = l))), u !== void 0) {
       const X = u ? "bold" : "normal";
-      D && (H.fontWeight = X), q && (L.fontWeight = X, Y && (K.fontWeight = X));
+      D && (Z.fontWeight = X), q && (L.fontWeight = X, F && (K.fontWeight = X));
     }
     if (g !== void 0) {
       const X = g ? "italic" : "normal";
-      D && (H.fontStyle = X), q && (L.fontStyle = X, Y && (K.fontStyle = X));
+      D && (Z.fontStyle = X), q && (L.fontStyle = X, F && (K.fontStyle = X));
     }
-    if (f !== void 0 && (D && (H.underline = f), q && (L.underline = f, Y && (K.underline = f))), m !== void 0 && (D && (H.linethrough = m), q && (L.linethrough = m, Y && (K.linethrough = m))), v !== void 0 && (L.textAlign = v), b !== void 0 && (D && (H.fill = b), q && (L.fill = b, Y && (K.fill = b))), I !== void 0 || y !== void 0) {
+    if (f !== void 0 && (D && (Z.underline = f), q && (L.underline = f, F && (K.underline = f))), m !== void 0 && (D && (Z.linethrough = m), q && (L.linethrough = m, F && (K.linethrough = m))), v !== void 0 && (L.textAlign = v), b !== void 0 && (D && (Z.fill = b), q && (L.fill = b, F && (K.fill = b))), I !== void 0 || y !== void 0) {
       const X = D ? Ve({ textbox: n, range: D, property: "strokeWidth" }) : void 0, It = D ? Ve({ textbox: n, range: D, property: "stroke" }) : void 0, Wt = (Bt = (xt = y != null ? y : X) != null ? xt : n.strokeWidth) != null ? Bt : 0, mt = Ke({ width: Wt }), Ht = (kt = (ut = I != null ? I : It) != null ? ut : n.stroke) != null ? kt : void 0, Ct = Xe({
         strokeColor: Ht,
         width: mt
       });
-      D && (H.stroke = Ct, H.strokeWidth = mt), q && (L.stroke = Ct, L.strokeWidth = mt, Y && (K.stroke = Ct, K.strokeWidth = mt));
+      D && (Z.stroke = Ct, Z.strokeWidth = mt), q && (L.stroke = Ct, L.strokeWidth = mt, F && (K.stroke = Ct, K.strokeWidth = mt));
     }
-    w !== void 0 && (L.opacity = w), A !== void 0 && (L.backgroundColor = A), j !== void 0 && (L.backgroundOpacity = j), M !== void 0 && (L.paddingTop = M), T !== void 0 && (L.paddingRight = T), S !== void 0 && (L.paddingBottom = S), C !== void 0 && (L.paddingLeft = C), x !== void 0 && (L.radiusTopLeft = x), F !== void 0 && (L.radiusTopRight = F), U !== void 0 && (L.radiusBottomRight = U), W !== void 0 && (L.radiusBottomLeft = W);
+    M !== void 0 && (L.opacity = M), A !== void 0 && (L.backgroundColor = A), j !== void 0 && (L.backgroundOpacity = j), w !== void 0 && (L.paddingTop = w), T !== void 0 && (L.paddingRight = T), S !== void 0 && (L.paddingBottom = S), C !== void 0 && (L.paddingLeft = C), x !== void 0 && (L.radiusTopLeft = x), W !== void 0 && (L.radiusTopRight = W), Y !== void 0 && (L.radiusBottomRight = Y), H !== void 0 && (L.radiusBottomLeft = H);
     const Q = (it = n.textCaseRaw) != null ? it : (gt = n.text) != null ? gt : "", St = !!n.uppercase, et = c !== void 0, lt = et ? c != null ? c : "" : Q, pt = p != null ? p : St;
     if (et || pt !== St) {
       const X = pt ? ie({ value: lt }) : lt;
@@ -4807,14 +4809,14 @@ class Z {
     n.uppercase = pt, n.set(L);
     let ht = !1;
     if (D) {
-      const X = ne({ textbox: n, styles: H, range: D }), It = z ? ne({ textbox: n, styles: P, range: z }) : !1;
+      const X = ne({ textbox: n, styles: Z, range: D }), It = P ? ne({ textbox: n, styles: U, range: P }) : !1;
       ht = X || It;
     } else if (Object.keys(K).length) {
       const X = ro({ textbox: n });
       X && (ht = ne({ textbox: n, styles: K, range: X }));
     }
-    ht && (n.dirty = !0), (A !== void 0 || j !== void 0 || M !== void 0 || T !== void 0 || S !== void 0 || C !== void 0 || x !== void 0 || F !== void 0 || U !== void 0 || W !== void 0) && (n.dirty = !0), Z._roundTextboxDimensions({ textbox: n }) && (n.dirty = !0), n.setCoords(), o || a.requestRenderAll(), i.resumeHistory(), s || i.saveState();
-    const Ft = Z._getSnapshot(n);
+    ht && (n.dirty = !0), (A !== void 0 || j !== void 0 || w !== void 0 || T !== void 0 || S !== void 0 || C !== void 0 || x !== void 0 || W !== void 0 || Y !== void 0 || H !== void 0) && (n.dirty = !0), z._roundTextboxDimensions({ textbox: n }) && (n.dirty = !0), n.setCoords(), o || a.requestRenderAll(), i.resumeHistory(), s || i.saveState();
+    const Ft = z._getSnapshot(n);
     return a.fire("editor:text-updated", {
       textbox: n,
       target: t,
@@ -4827,7 +4829,7 @@ class Z {
       before: r,
       after: Ft,
       selectionRange: D != null ? D : void 0,
-      selectionStyles: D && Object.keys(H).length ? H : void 0
+      selectionStyles: D && Object.keys(Z).length ? Z : void 0
     }), n;
   }
   /**
@@ -4835,7 +4837,7 @@ class Z {
    */
   destroy() {
     const { canvas: t } = this;
-    t.off("object:scaling", this._handleObjectScaling), t.off("object:modified", this._handleObjectModified), t.off("text:editing:exited", this._handleTextEditingExited), t.off("text:editing:entered", this._handleTextEditingEntered), t.off("text:changed", this._handleTextChanged);
+    t.off("object:scaling", this._handleObjectScaling), t.off("object:resizing", z._handleObjectResizing), t.off("object:modified", this._handleObjectModified), t.off("text:editing:exited", this._handleTextEditingExited), t.off("text:editing:entered", this._handleTextEditingEntered), t.off("text:changed", z._handleTextChanged);
   }
   /**
    * Возвращает активный текст или ищет по id.
@@ -4845,10 +4847,10 @@ class Z {
     const { canvas: e } = this;
     if (!t) {
       const s = e.getActiveObject();
-      return Z._isTextbox(s) ? s : null;
+      return z._isTextbox(s) ? s : null;
     }
     if (typeof t == "string") {
-      const s = e.getObjects().find((o) => Z._isTextbox(o) && o.id === t);
+      const s = e.getObjects().find((o) => z._isTextbox(o) && o.id === t);
       return s != null ? s : null;
     }
     return null;
@@ -4864,12 +4866,53 @@ class Z {
    */
   _bindEvents() {
     const { canvas: t } = this;
-    t.on("object:scaling", this._handleObjectScaling), t.on("object:modified", this._handleObjectModified), t.on("text:editing:entered", this._handleTextEditingEntered), t.on("text:editing:exited", this._handleTextEditingExited), t.on("text:changed", this._handleTextChanged);
+    t.on("object:scaling", this._handleObjectScaling), t.on("object:resizing", z._handleObjectResizing), t.on("object:modified", this._handleObjectModified), t.on("text:editing:entered", this._handleTextEditingEntered), t.on("text:editing:exited", this._handleTextEditingExited), t.on("text:changed", z._handleTextChanged);
+  }
+  /**
+   * Реагирует на изменение текста в режиме редактирования: синхронизирует textCaseRaw и uppercase.
+   */
+  static _handleTextChanged(t) {
+    const { target: e } = t;
+    if (!z._isTextbox(e)) return;
+    const { text: s = "", uppercase: o } = e, n = !!o, i = s.toLocaleLowerCase();
+    if (n) {
+      const r = ie({ value: i });
+      r !== s && e.set({ text: r }), e.textCaseRaw = i;
+    } else
+      e.textCaseRaw = s;
+    z._roundTextboxDimensions({ textbox: e }) && (e.setCoords(), e.dirty = !0);
+  }
+  /**
+   * Обрабатывает изменение ширины текстового объекта (resizing).
+   * Корректирует ширину, вычитая паддинги, так как Fabric при изменении ширины
+   * устанавливает значение, включающее визуальные отступы.
+   * Также корректирует позицию при ресайзе слева, чтобы компенсировать смещение.
+   */
+  static _handleObjectResizing(t) {
+    var l, u, g, f, p, m;
+    const { target: e, transform: s } = t;
+    if (!z._isTextbox(e)) return;
+    const {
+      paddingLeft: o = 0,
+      paddingRight: n = 0
+    } = e, i = o + n;
+    if (i === 0) return;
+    const a = (l = e.width) != null ? l : 0, r = Math.max(0, a - i);
+    if (a === r) return;
+    e.set({ width: r });
+    const c = (u = e.width) != null ? u : 0, d = a - c;
+    if (d !== 0 && s && s.corner === "ml") {
+      const b = ((g = e.angle) != null ? g : 0) * Math.PI / 180, I = Math.cos(b), y = Math.sin(b), M = (f = e.scaleX) != null ? f : 1, A = d * M;
+      e.set({
+        left: ((p = e.left) != null ? p : 0) + A * I,
+        top: ((m = e.top) != null ? m : 0) + A * y
+      });
+    }
   }
   /**
    * Возвращает диапазоны символов для каждой строки текста без учёта символов переноса.
    */
-  _getLineRanges({ textbox: t }) {
+  static _getLineRanges({ textbox: t }) {
     var n;
     const e = (n = t.text) != null ? n : "";
     if (!e.length) return [];
@@ -4884,11 +4927,11 @@ class Z {
   /**
    * Расширяет выделение до полных строк, которые оно пересекает.
    */
-  _expandRangeToFullLines({
+  static _expandRangeToFullLines({
     textbox: t,
     range: e
   }) {
-    const s = this._getLineRanges({ textbox: t });
+    const s = z._getLineRanges({ textbox: t });
     if (!s.length) return e;
     let { start: o } = e, { end: n } = e;
     return s.forEach(({ start: i, end: a }) => {
@@ -4950,10 +4993,10 @@ class Z {
   static _roundTextboxDimensions({
     textbox: t
   }) {
-    const { width: e, height: s, calcTextWidth: o, calcTextHeight: n } = t, i = typeof o == "function" ? o.call(t) : void 0, a = typeof n == "function" ? n.call(t) : void 0, r = Z._resolveDimension({
+    const { width: e, height: s, calcTextWidth: o, calcTextHeight: n } = t, i = typeof o == "function" ? o.call(t) : void 0, a = typeof n == "function" ? n.call(t) : void 0, r = z._resolveDimension({
       rawValue: e,
       calculatedValue: i
-    }), c = Z._resolveDimension({
+    }), c = z._resolveDimension({
       rawValue: s,
       calculatedValue: a
     }), d = Number.isFinite(r) ? Math.round(r) : null, l = Number.isFinite(c) ? Math.round(c) : null, u = {};
@@ -4964,11 +5007,11 @@ class Z {
    */
   static _getSnapshot(t) {
     const e = ({
-      snapshot: H,
-      entries: P
+      snapshot: Z,
+      entries: U
     }) => {
-      Object.entries(P).forEach(([K, $]) => {
-        $ != null && (H[K] = $);
+      Object.entries(U).forEach(([K, $]) => {
+        $ != null && (Z[K] = $);
       });
     }, {
       id: s,
@@ -4989,27 +5032,27 @@ class Z {
       backgroundColor: b,
       backgroundOpacity: I,
       paddingTop: y,
-      paddingRight: w,
+      paddingRight: M,
       paddingBottom: A,
       paddingLeft: j,
-      radiusTopLeft: M,
+      radiusTopLeft: w,
       radiusTopRight: T,
       radiusBottomRight: S,
       radiusBottomLeft: C,
       left: x,
-      top: F,
-      width: U,
-      height: W,
+      top: W,
+      width: Y,
+      height: H,
       angle: V,
       scaleX: L,
       scaleY: D
-    } = t, z = {
+    } = t, P = {
       id: s,
       uppercase: !!i,
       textAlign: g
     };
     return e({
-      snapshot: z,
+      snapshot: P,
       entries: {
         text: o,
         textCaseRaw: n,
@@ -5026,22 +5069,22 @@ class Z {
         backgroundColor: b,
         backgroundOpacity: I,
         paddingTop: y,
-        paddingRight: w,
+        paddingRight: M,
         paddingBottom: A,
         paddingLeft: j,
-        radiusTopLeft: M,
+        radiusTopLeft: w,
         radiusTopRight: T,
         radiusBottomRight: S,
         radiusBottomLeft: C,
         left: x,
-        top: F,
-        width: U,
-        height: W,
+        top: W,
+        width: Y,
+        height: H,
         angle: V,
         scaleX: L,
         scaleY: D
       }
-    }), z;
+    }), P;
   }
   /**
    * Возвращает первый доступный шрифт или дефолтный Arial.
@@ -5154,32 +5197,37 @@ const ot = ({
   y2: s
 }) => (Math.atan2(s - t, e - h) * 180 / Math.PI + 360) % 360, fo = (h) => {
   if (!h || typeof h != "object") return null;
-  const { type: t, coords: e, colorStops: s } = h, o = Array.isArray(s) ? s : [], n = o[0], i = o[o.length - 1], a = typeof (n == null ? void 0 : n.color) == "string" ? n.color : void 0, r = typeof (i == null ? void 0 : i.color) == "string" ? i.color : a, c = typeof (n == null ? void 0 : n.offset) == "number" ? n.offset * 100 : void 0, d = typeof (i == null ? void 0 : i.offset) == "number" ? i.offset * 100 : void 0;
+  const { type: t, coords: e, colorStops: s } = h, o = Array.isArray(s) ? s : [], n = o[0], i = o[o.length - 1], a = typeof (n == null ? void 0 : n.color) == "string" ? n.color : void 0, r = typeof (i == null ? void 0 : i.color) == "string" ? i.color : a, c = typeof (n == null ? void 0 : n.offset) == "number" ? n.offset * 100 : void 0, d = typeof (i == null ? void 0 : i.offset) == "number" ? i.offset * 100 : void 0, l = o.map((u) => ({
+    color: typeof u.color == "string" ? u.color : "#000000",
+    offset: typeof u.offset == "number" ? u.offset * 100 : 0
+  }));
   if (!a || !r || !e) return null;
   if (t === "linear") {
-    const { x1: l, y1: u, x2: g, y2: f } = e;
-    if (typeof l == "number" && typeof u == "number" && typeof g == "number" && typeof f == "number")
+    const { x1: u, y1: g, x2: f, y2: p } = e;
+    if (typeof u == "number" && typeof g == "number" && typeof f == "number" && typeof p == "number")
       return {
         type: "linear",
-        angle: go({ x1: l, y1: u, x2: g, y2: f }),
+        angle: go({ x1: u, y1: g, x2: f, y2: p }),
         startColor: a,
         endColor: r,
         startPosition: c,
-        endPosition: d
+        endPosition: d,
+        colorStops: l
       };
   }
   if (t === "radial") {
-    const { x1: l, y1: u, r2: g } = e;
-    if (typeof l == "number" && typeof u == "number" && typeof g == "number")
+    const { x1: u, y1: g, r2: f } = e;
+    if (typeof u == "number" && typeof g == "number" && typeof f == "number")
       return {
         type: "radial",
-        centerX: l * 100,
-        centerY: u * 100,
-        radius: g * 100,
+        centerX: u * 100,
+        centerY: g * 100,
+        radius: f * 100,
         startColor: a,
         endColor: r,
         startPosition: c,
-        endPosition: d
+        endPosition: d,
+        colorStops: l
       };
   }
   return null;
@@ -5211,8 +5259,8 @@ class R {
         code: bt.TEMPLATE_MANAGER.NO_OBJECTS_SELECTED,
         message: "Нет объектов для сериализации шаблона"
       }), null;
-    const f = R._getBounds(i), p = R._getMontageSize({ montageArea: i, bounds: f }), m = p.width, v = p.height, b = g.map((w) => R._serializeObject({
-      object: w,
+    const f = R._getBounds(i), p = R._getMontageSize({ montageArea: i, bounds: f }), m = p.width, v = p.height, b = g.map((M) => R._serializeObject({
+      object: M,
       bounds: f,
       baseWidth: m,
       baseHeight: v,
@@ -5274,13 +5322,13 @@ class R {
             code: bt.TEMPLATE_MANAGER.INVALID_TEMPLATE,
             message: "Не удалось создать объекты шаблона"
           }), null;
-        const { backgroundObject: y, contentObjects: w } = R._extractBackgroundObject(I);
+        const { backgroundObject: y, contentObjects: M } = R._extractBackgroundObject(I);
         y && (b = yield R._applyBackgroundFromObject({
           backgroundObject: y,
           backgroundManager: r,
           errorManager: a
         }));
-        const A = w.map((j) => (R._applyTextOverrides({ object: j, data: e }), R._transformObject({
+        const A = M.map((j) => (R._applyTextOverrides({ object: j, data: e }), R._transformObject({
           object: j,
           scale: p,
           bounds: u,
@@ -5377,8 +5425,8 @@ class R {
       naturalHeight: 0,
       width: 0,
       height: 0
-    }, f = ot({ value: d || u || r.width, fallback: 0 }), p = ot({ value: l || g || r.height, fallback: 0 }), m = ot({ value: o, fallback: f }), v = ot({ value: n, fallback: p }), b = ot({ value: i, fallback: r.scaleX || 1 }), I = ot({ value: a, fallback: r.scaleY || 1 }), y = m * b, w = v * I, A = f ? y / f : null, j = p ? w / p : null, M = {};
-    f > 0 && (M.width = f), p > 0 && (M.height = p), A && A > 0 && (M.scaleX = A), j && j > 0 && (M.scaleY = j), r.set(M);
+    }, f = ot({ value: d || u || r.width, fallback: 0 }), p = ot({ value: l || g || r.height, fallback: 0 }), m = ot({ value: o, fallback: f }), v = ot({ value: n, fallback: p }), b = ot({ value: i, fallback: r.scaleX || 1 }), I = ot({ value: a, fallback: r.scaleY || 1 }), y = m * b, M = v * I, A = f ? y / f : null, j = p ? M / p : null, w = {};
+    f > 0 && (w.width = f), p > 0 && (w.height = p), A && A > 0 && (w.scaleX = A), j && j > 0 && (w.scaleY = j), r.set(w);
   }
   /**
    * Проверяет, содержит ли сериализованный объект инлайн SVG.
@@ -5853,56 +5901,56 @@ const po = 5, os = "#3D8BF4", pe = 1, Qt = 1, Qe = ({
     ...c.map((y) => ({ bounds: y, isActive: !1 })),
     { bounds: h, isActive: !0 }
   ];
-  d.sort((y, w) => y.bounds.top - w.bounds.top);
+  d.sort((y, M) => y.bounds.top - M.bounds.top);
   const l = d.findIndex((y) => y.isActive);
   if (l === -1)
     return { delta: 0, guide: null };
   const u = d[l - 1], g = d[l - 2], f = d[l + 1], p = d[l + 2], m = [], v = i - n;
   if (u && g) {
-    const { bounds: y } = u, { bounds: w } = g, A = y.top - w.bottom, j = n - y.bottom, M = Math.abs(j - A);
-    if (M <= e) {
+    const { bounds: y } = u, { bounds: M } = g, A = y.top - M.bottom, j = n - y.bottom, w = Math.abs(j - A);
+    if (w <= e) {
       const T = A - j, S = n + T, C = {
         type: "vertical",
         axis: o,
-        refStart: w.bottom,
+        refStart: M.bottom,
         refEnd: y.top,
         activeStart: y.bottom,
         activeEnd: S,
         distance: A
       };
-      m.push({ delta: T, guide: C, diff: M });
+      m.push({ delta: T, guide: C, diff: w });
     }
   }
   if (f && p) {
-    const { bounds: y } = f, { bounds: w } = p, A = w.top - y.bottom, j = y.top - i, M = Math.abs(j - A);
-    if (M <= e) {
+    const { bounds: y } = f, { bounds: M } = p, A = M.top - y.bottom, j = y.top - i, w = Math.abs(j - A);
+    if (w <= e) {
       const T = j - A, S = i + T, C = {
         type: "vertical",
         axis: o,
         refStart: y.bottom,
-        refEnd: w.top,
+        refEnd: M.top,
         activeStart: S,
         activeEnd: y.top,
         distance: A
       };
-      m.push({ delta: T, guide: C, diff: M });
+      m.push({ delta: T, guide: C, diff: w });
     }
   }
   if (u && f) {
-    const { bounds: y } = u, { bounds: w } = f, j = w.top - y.bottom - v;
+    const { bounds: y } = u, { bounds: M } = f, j = M.top - y.bottom - v;
     if (j >= 0) {
-      const M = j / 2, T = n - y.bottom, S = w.top - i, C = Math.abs(T - M), x = Math.abs(S - M), F = Math.max(C, x);
-      if (F <= e) {
-        const U = M - T, W = i + U, V = {
+      const w = j / 2, T = n - y.bottom, S = M.top - i, C = Math.abs(T - w), x = Math.abs(S - w), W = Math.max(C, x);
+      if (W <= e) {
+        const Y = w - T, H = i + Y, V = {
           type: "vertical",
           axis: o,
           refStart: y.bottom,
-          refEnd: y.bottom + M,
-          activeStart: W,
-          activeEnd: W + M,
-          distance: M
+          refEnd: y.bottom + w,
+          activeStart: H,
+          activeEnd: H + w,
+          distance: w
         };
-        m.push({ delta: U, guide: V, diff: F });
+        m.push({ delta: Y, guide: V, diff: W });
       }
     }
   }
@@ -5915,7 +5963,7 @@ const po = 5, os = "#3D8BF4", pe = 1, Qt = 1, Qe = ({
   });
   if (m.push(...b), !m.length)
     return { delta: 0, guide: null };
-  const I = m.reduce((y, w) => w.diff < y.diff ? w : y, m[0]);
+  const I = m.reduce((y, M) => M.diff < y.diff ? M : y, m[0]);
   return {
     delta: I.delta,
     guide: I.guide
@@ -5939,56 +5987,56 @@ const po = 5, os = "#3D8BF4", pe = 1, Qt = 1, Qe = ({
     ...c.map((y) => ({ bounds: y, isActive: !1 })),
     { bounds: h, isActive: !0 }
   ];
-  d.sort((y, w) => y.bounds.left - w.bounds.left);
+  d.sort((y, M) => y.bounds.left - M.bounds.left);
   const l = d.findIndex((y) => y.isActive);
   if (l === -1)
     return { delta: 0, guide: null };
   const u = d[l - 1], g = d[l - 2], f = d[l + 1], p = d[l + 2], m = [], v = i - n;
   if (u && g) {
-    const { bounds: y } = u, { bounds: w } = g, A = y.left - w.right, j = n - y.right, M = Math.abs(j - A);
-    if (M <= e) {
+    const { bounds: y } = u, { bounds: M } = g, A = y.left - M.right, j = n - y.right, w = Math.abs(j - A);
+    if (w <= e) {
       const T = A - j, S = n + T, C = {
         type: "horizontal",
         axis: o,
-        refStart: w.right,
+        refStart: M.right,
         refEnd: y.left,
         activeStart: y.right,
         activeEnd: S,
         distance: A
       };
-      m.push({ delta: T, guide: C, diff: M });
+      m.push({ delta: T, guide: C, diff: w });
     }
   }
   if (f && p) {
-    const { bounds: y } = f, { bounds: w } = p, A = w.left - y.right, j = y.left - i, M = Math.abs(j - A);
-    if (M <= e) {
+    const { bounds: y } = f, { bounds: M } = p, A = M.left - y.right, j = y.left - i, w = Math.abs(j - A);
+    if (w <= e) {
       const T = j - A, S = i + T, C = {
         type: "horizontal",
         axis: o,
         refStart: y.right,
-        refEnd: w.left,
+        refEnd: M.left,
         activeStart: S,
         activeEnd: y.left,
         distance: A
       };
-      m.push({ delta: T, guide: C, diff: M });
+      m.push({ delta: T, guide: C, diff: w });
     }
   }
   if (u && f) {
-    const { bounds: y } = u, { bounds: w } = f, j = w.left - y.right - v;
+    const { bounds: y } = u, { bounds: M } = f, j = M.left - y.right - v;
     if (j >= 0) {
-      const M = j / 2, T = n - y.right, S = w.left - i, C = Math.abs(T - M), x = Math.abs(S - M), F = Math.max(C, x);
-      if (F <= e) {
-        const U = M - T, W = i + U, V = {
+      const w = j / 2, T = n - y.right, S = M.left - i, C = Math.abs(T - w), x = Math.abs(S - w), W = Math.max(C, x);
+      if (W <= e) {
+        const Y = w - T, H = i + Y, V = {
           type: "horizontal",
           axis: o,
           refStart: y.right,
-          refEnd: y.right + M,
-          activeStart: W,
-          activeEnd: W + M,
-          distance: M
+          refEnd: y.right + w,
+          activeStart: H,
+          activeEnd: H + w,
+          distance: w
         };
-        m.push({ delta: U, guide: V, diff: F });
+        m.push({ delta: Y, guide: V, diff: W });
       }
     }
   }
@@ -6001,7 +6049,7 @@ const po = 5, os = "#3D8BF4", pe = 1, Qt = 1, Qe = ({
   });
   if (m.push(...b), !m.length)
     return { delta: 0, guide: null };
-  const I = m.reduce((y, w) => w.diff < y.diff ? w : y, m[0]);
+  const I = m.reduce((y, M) => M.diff < y.diff ? M : y, m[0]);
   return {
     delta: I.delta,
     guide: I.guide
@@ -6055,17 +6103,17 @@ const po = 5, os = "#3D8BF4", pe = 1, Qt = 1, Qe = ({
   offsetAlongAxis: g = 0,
   offsetPerpendicular: f = 0
 }) => {
-  const p = i || 1, m = 12 / p, v = l / p, b = u / p, I = (s + o) / 2 + g, y = t === "vertical" ? e + f : I, w = t === "vertical" ? I : e + f;
+  const p = i || 1, m = 12 / p, v = l / p, b = u / p, I = (s + o) / 2 + g, y = t === "vertical" ? e + f : I, M = t === "vertical" ? I : e + f;
   h.save(), h.setLineDash([]), h.fillStyle = a, h.strokeStyle = a, h.lineWidth = d / p, h.font = `${m}px ${c}`, h.textAlign = "center", h.textBaseline = "middle";
-  const j = h.measureText(n).width + v * 2, M = m + v * 2, T = y - j / 2, S = w - M / 2;
+  const j = h.measureText(n).width + v * 2, w = m + v * 2, T = y - j / 2, S = M - w / 2;
   h.beginPath(), Mo({
     context: h,
     x: T,
     y: S,
     width: j,
-    height: M,
+    height: w,
     radius: b
-  }), h.fill(), h.fillStyle = r, h.fillText(n, y, w), h.restore();
+  }), h.fill(), h.fillStyle = r, h.fillText(n, y, M), h.restore();
 }, wo = ({
   context: h,
   guide: t,
@@ -6593,19 +6641,19 @@ class Lt {
       }), o;
     }
     if (!s) return o;
-    const I = n < d, y = i > l, w = Math.min(n, d), A = Math.max(n, d), j = A - w;
+    const I = n < d, y = i > l, M = Math.min(n, d), A = Math.max(n, d), j = A - M;
     j > 0 && !I && o.push({
       type: "horizontal",
       axis: b,
-      start: w,
+      start: M,
       end: A,
       distance: j
     });
-    const M = Math.min(i, l), T = Math.max(i, l), S = T - M;
+    const w = Math.min(i, l), T = Math.max(i, l), S = T - w;
     return S > 0 && !y && o.push({
       type: "horizontal",
       axis: b,
-      start: M,
+      start: w,
       end: T,
       distance: S
     }), o;
@@ -6654,19 +6702,19 @@ class Lt {
       }), o;
     }
     if (!s) return o;
-    const I = n < d, y = i > l, w = Math.min(n, d), A = Math.max(n, d), j = A - w;
+    const I = n < d, y = i > l, M = Math.min(n, d), A = Math.max(n, d), j = A - M;
     j > 0 && !I && o.push({
       type: "vertical",
       axis: b,
-      start: w,
+      start: M,
       end: A,
       distance: j
     });
-    const M = Math.min(i, l), T = Math.max(i, l), S = T - M;
+    const w = Math.min(i, l), T = Math.max(i, l), S = T - w;
     return S > 0 && !y && o.push({
       type: "vertical",
       axis: b,
-      start: M,
+      start: w,
       end: T,
       distance: S
     }), o;
@@ -6764,7 +6812,7 @@ class Se {
         showRotationAngle: d,
         _onReadyCallback: l
       } = this.options;
-      if (J.apply(), this.canvas = new vs(this.containerId, this.options), this.moduleLoader = new As(), this.workerManager = new Is(), this.errorManager = new Yt({ editor: this }), this.historyManager = new Jt({ editor: this }), this.toolbar = new Ys({ editor: this }), this.transformManager = new qs({ editor: this }), this.zoomManager = new Js({ editor: this }), this.canvasManager = new Qs({ editor: this }), this.imageManager = new ct({ editor: this }), this.layerManager = new $t({ editor: this }), this.shapeManager = new to({ editor: this }), this.interactionBlocker = new $s({ editor: this }), this.backgroundManager = new Ot({ editor: this }), this.clipboardManager = new eo({ editor: this }), this.objectLockManager = new te({ editor: this }), this.groupingManager = new so({ editor: this }), this.selectionManager = new oo({ editor: this }), this.deletionManager = new we({ editor: this }), this.panConstraintManager = new no({ editor: this }), this.snappingManager = new jo({ editor: this }), this.measurementManager = new Lt({ editor: this }), this.fontManager = new fe((u = this.options.fonts) != null ? u : []), this.textManager = new Z({ editor: this }), this.templateManager = new R({ editor: this }), d && (this.angleIndicator = new Me({ editor: this })), this._createMontageArea(), this._createClippingArea(), this.listeners = new Ut({ editor: this, options: this.options }), this.canvasManager.setEditorContainerWidth(t), this.canvasManager.setEditorContainerHeight(e), this.canvasManager.setCanvasWrapperWidth(s), this.canvasManager.setCanvasWrapperHeight(o), this.canvasManager.setCanvasCSSWidth(n), this.canvasManager.setCanvasCSSHeight(i), this.canvasManager.updateCanvas(), this.zoomManager.calculateAndApplyDefaultZoom(), yield this.fontManager.loadFonts(), a != null && a.source) {
+      if (J.apply(), this.canvas = new vs(this.containerId, this.options), this.moduleLoader = new As(), this.workerManager = new Is(), this.errorManager = new Yt({ editor: this }), this.historyManager = new Jt({ editor: this }), this.toolbar = new Ys({ editor: this }), this.transformManager = new qs({ editor: this }), this.zoomManager = new Js({ editor: this }), this.canvasManager = new Qs({ editor: this }), this.imageManager = new ct({ editor: this }), this.layerManager = new $t({ editor: this }), this.shapeManager = new to({ editor: this }), this.interactionBlocker = new $s({ editor: this }), this.backgroundManager = new Ot({ editor: this }), this.clipboardManager = new eo({ editor: this }), this.objectLockManager = new te({ editor: this }), this.groupingManager = new so({ editor: this }), this.selectionManager = new oo({ editor: this }), this.deletionManager = new we({ editor: this }), this.panConstraintManager = new no({ editor: this }), this.snappingManager = new jo({ editor: this }), this.measurementManager = new Lt({ editor: this }), this.fontManager = new fe((u = this.options.fonts) != null ? u : []), this.textManager = new z({ editor: this }), this.templateManager = new R({ editor: this }), d && (this.angleIndicator = new Me({ editor: this })), this._createMontageArea(), this._createClippingArea(), this.listeners = new Ut({ editor: this, options: this.options }), this.canvasManager.setEditorContainerWidth(t), this.canvasManager.setEditorContainerHeight(e), this.canvasManager.setCanvasWrapperWidth(s), this.canvasManager.setCanvasWrapperHeight(o), this.canvasManager.setCanvasCSSWidth(n), this.canvasManager.setCanvasCSSHeight(i), this.canvasManager.updateCanvas(), this.zoomManager.calculateAndApplyDefaultZoom(), yield this.fontManager.loadFonts(), a != null && a.source) {
         const {
           source: g,
           scale: f = `image-${c}`,

package/package.json

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