@anu3ev/fabric-image-editor 0.1.8 → 0.1.10

package/dist/main.js

@@ -65,9 +65,9 @@ class B {
       undoRedoByHotKeys: s,
       selectAllByHotkey: c,
       deleteObjectsByHotkey: u,
-      resetObjectFitByDoubleClick: h
+      resetObjectFitByDoubleClick: l
     } = this.options;
-    t && (this.canvas.on("mouse:down", this.handleCanvasDragStartBound), this.canvas.on("mouse:move", this.handleCanvasDraggingBound), this.canvas.on("mouse:up", this.handleCanvasDragEndBound)), a && this.canvas.on("mouse:wheel", this.handleMouseWheelZoomBound), r && (this.canvas.on("selection:created", this.handleBringToFrontBound), this.canvas.on("selection:updated", this.handleBringToFrontBound)), h && this.canvas.on("mouse:dblclick", this.handleResetObjectFitBound), e && window.addEventListener("resize", this.handleAdaptCanvasToContainerBound, {
+    t && (this.canvas.on("mouse:down", this.handleCanvasDragStartBound), this.canvas.on("mouse:move", this.handleCanvasDraggingBound), this.canvas.on("mouse:up", this.handleCanvasDragEndBound)), a && this.canvas.on("mouse:wheel", this.handleMouseWheelZoomBound), r && (this.canvas.on("selection:created", this.handleBringToFrontBound), this.canvas.on("selection:updated", this.handleBringToFrontBound)), l && this.canvas.on("mouse:dblclick", this.handleResetObjectFitBound), e && window.addEventListener("resize", this.handleAdaptCanvasToContainerBound, {
       capture: !0
     }), n && document.addEventListener("keydown", this.handleCopyEventBound, {
       capture: !0
@@ -151,7 +151,10 @@ class B {
     }), this.editor.canvasManager.setResolutionHeight(t, {
       adaptCanvasToContainer: !0,
       withoutSave: !0
-    }), this.editor.canvasManager.centerMontageArea(), this.editor.transformManager.resetObjects();
+    }), this.editor.canvasManager.centerMontageArea(), this.editor.selectionManager.selectAll(), this.editor.transformManager.fitObject({
+      fitAsOneObject: !0,
+      withoutSave: !0
+    });
   }
   /**
    * Обработчик для Ctrl+C (копирование).
@@ -186,16 +189,16 @@ class B {
         var o = n.getAsFile();
         if (!o) return;
         var s = new FileReader();
-        s.onload = (l) => {
+        s.onload = (h) => {
           this.editor.imageManager.importImage({
-            source: l.target.result
+            source: h.target.result
           });
         }, s.readAsDataURL(o);
         return;
       }
       var c = a.getData("text/html");
       if (c) {
-        var u = new DOMParser(), h = u.parseFromString(c, "text/html"), d = h.querySelector("img");
+        var u = new DOMParser(), l = u.parseFromString(c, "text/html"), d = l.querySelector("img");
         if (d != null && d.src) {
           this.editor.imageManager.importImage({
             source: d.src
@@ -758,11 +761,11 @@ class lt {
       } = r, {
         icons: c,
         btnStyle: u,
-        handlers: h
+        handlers: l
       } = t.config, d = document.createElement("button");
       d.innerHTML = c[s] ? '<img src="'.concat(c[s], '" title="').concat(o, '" />') : o, Object.assign(d.style, u), d.onclick = () => {
-        var l;
-        return (l = h[s]) === null || l === void 0 ? void 0 : l.call(h, t.editor);
+        var h;
+        return (h = l[s]) === null || h === void 0 ? void 0 : h.call(l, t.editor);
       }, t.el.appendChild(d);
     };
     for (var r of e)
@@ -839,10 +842,10 @@ class lt {
         x: c
       } = e.getCenterPoint(), {
         top: u,
-        height: h
-      } = e.getBoundingRect(!1, !0), d = c * n + o, l = d - t.offsetWidth / 2, g = (u + h) * n + s + a.offsetTop;
+        height: l
+      } = e.getBoundingRect(!1, !0), d = c * n + o, h = d - t.offsetWidth / 2, g = (u + l) * n + s + a.offsetTop;
       Object.assign(t.style, {
-        left: "".concat(l, "px"),
+        left: "".concat(h, "px"),
         top: "".concat(g, "px"),
         display: "flex"
       });
@@ -1100,11 +1103,11 @@ class L {
           canvas: s,
           montageArea: c,
           transformManager: u,
-          historyManager: h
+          historyManager: l
         } = t.editor;
-        h.suspendHistory();
+        l.suspendHistory();
         try {
-          var d, l;
+          var d, h;
           if (a instanceof File)
             d = URL.createObjectURL(a);
           else if (typeof a == "string") {
@@ -1121,24 +1124,24 @@ class L {
           var v = L.getFormatFromContentType(o);
           if (v === "svg") {
             var j = yield ke(d);
-            l = z.groupSVGElements(j.objects, j.options);
+            h = z.groupSVGElements(j.objects, j.options);
           } else
-            l = yield de.fromURL(d, {
+            h = yield de.fromURL(d, {
               crossOrigin: "anonymous"
             });
           var {
             width: m,
             height: b
-          } = l;
+          } = h;
           if (b > C || m > D) {
-            var y = yield t.resizeImageToBoundaries(l._element.src, "max"), S = URL.createObjectURL(y);
-            t._createdBlobUrls.push(S), l = yield de.fromURL(S, {
+            var y = yield t.resizeImageToBoundaries(h._element.src, "max"), S = URL.createObjectURL(y);
+            t._createdBlobUrls.push(S), h = yield de.fromURL(S, {
               crossOrigin: "anonymous"
             });
           }
-          if (l.set("id", "".concat(l.type, "-").concat(I())), l.set("format", v), r === "scale-montage")
+          if (h.set("id", "".concat(h.type, "-").concat(I())), h.set("format", v), r === "scale-montage")
             t.editor.canvasManager.scaleMontageAreaToImage({
-              object: l,
+              object: h,
               withoutSave: !0
             });
           else {
@@ -1147,24 +1150,24 @@ class L {
               height: A
             } = c, w = Y({
               montageArea: c,
-              imageObject: l,
+              imageObject: h,
               scaleType: r
             });
             r === "image-contain" && w < 1 ? u.fitObject({
-              object: l,
+              object: h,
               type: "contain",
               withoutSave: !0
             }) : r === "image-cover" && (m > O || b > A) && u.fitObject({
-              object: l,
+              object: h,
               type: "cover",
               withoutSave: !0
             });
           }
-          s.add(l), s.centerObject(l), s.setActiveObject(l), s.renderAll(), h.resumeHistory(), n || h.saveState();
+          s.add(h), s.centerObject(h), s.setActiveObject(h), s.renderAll(), l.resumeHistory(), n || l.saveState();
         } catch (T) {
           console.error("importImage. Ошибка импорта изображения: ", T), s.fire("editor:error", {
             message: "Ошибка импорта изображения: ".concat(T.message)
-          }), h.resumeHistory();
+          }), l.resumeHistory();
         }
       }
     })();
@@ -1216,7 +1219,7 @@ class L {
         canvas: s,
         montageArea: c,
         workerManager: u
-      } = t.editor, h = r === "application/pdf", d = h ? "image/jpg" : r, l = L.getFormatFromContentType(d);
+      } = t.editor, l = r === "application/pdf", d = l ? "image/jpg" : r, h = L.getFormatFromContentType(d);
       c.setCoords();
       var {
         left: g,
@@ -1233,7 +1236,7 @@ class L {
         backstoreOnly: !0
       }), m.renderAll();
       var y = m.getObjects().filter((N) => N.format).every((N) => N.format === "svg");
-      if (l === "svg" && y) {
+      if (h === "svg" && y) {
         var S = m.toSVG();
         m.dispose();
         var O = L._exportSVGStringAsFile(S, {
@@ -1254,18 +1257,18 @@ class L {
       if (m.dispose(), o) {
         var T = {
           image: w,
-          format: l,
+          format: h,
           contentType: d,
           fileName: a
         };
         return s.fire("editor:canvas-exported", T), T;
       }
       var ae = yield createImageBitmap(w), re = yield u.post("toDataURL", {
-        format: l,
+        format: h,
         quality: 1,
         bitmap: ae
       }, [ae]);
-      if (h) {
+      if (l) {
         var ne = 0.264583, W = v * ne, _ = j * ne, we = (yield t.editor.moduleLoader.loadModule("jspdf")).jsPDF, R = new we({
           orientation: W > _ ? "landscape" : "portrait",
           unit: "mm",
@@ -1293,17 +1296,17 @@ class L {
       if (n) {
         var se = {
           image: re,
-          format: l,
+          format: h,
           contentType: d,
           fileName: a
         };
         return s.fire("editor:canvas-exported", se), se;
       }
-      var ce = l === "svg" && !y ? a.replace(/\.[^/.]+$/, ".png") : a, Le = new File([w], ce, {
+      var ce = h === "svg" && !y ? a.replace(/\.[^/.]+$/, ".png") : a, Le = new File([w], ce, {
         type: d
       }), ue = {
         image: Le,
-        format: l,
+        format: h,
         contentType: d,
         fileName: ce
       };
@@ -1333,14 +1336,14 @@ class L {
       } = e.length > 0 && e[0] !== void 0 ? e[0] : {}, {
         canvas: c,
         workerManager: u
-      } = t.editor, h = a || c.getActiveObject();
-      if (!h)
+      } = t.editor, l = a || c.getActiveObject();
+      if (!l)
         return console.error("exportObjectAsDataURL. Не выбран объект"), c.fire("editor:error", {
           message: "Не выбран объект для экспорта"
         }), "";
       var d = L.getFormatFromContentType(n);
       if (d === "svg") {
-        var l = h.toSVG(), g = t._exportSVGStringAsFile(l, {
+        var h = l.toSVG(), g = t._exportSVGStringAsFile(h, {
           exportAsBase64: o,
           exportAsBlob: s,
           fileName: r
@@ -1353,7 +1356,7 @@ class L {
         return c.fire("editor:object-exported", f), f;
       }
       if (o) {
-        var v = yield createImageBitmap(h._element), j = yield u.post("toDataURL", {
+        var v = yield createImageBitmap(l._element), j = yield u.post("toDataURL", {
           format: d,
           quality: 1,
           bitmap: v
@@ -1365,7 +1368,7 @@ class L {
         };
         return c.fire("editor:object-exported", m), m;
       }
-      var b = h.toCanvasElement(), y = yield new Promise((w) => {
+      var b = l.toCanvasElement(), y = yield new Promise((w) => {
         b.toBlob(w);
       });
       if (s) {
@@ -1465,14 +1468,14 @@ class jt {
       } = this.editor, {
         width: c,
         height: u
-      } = o, h = Number(Math.max(Math.min(e, D), k));
-      if (!s || s === "auto" || r ? this.adaptCanvasToContainer() : s ? this.setCanvasBackstoreWidth(s) : this.setCanvasBackstoreWidth(h), o.set({
-        width: h
+      } = o, l = Number(Math.max(Math.min(e, D), k));
+      if (!s || s === "auto" || r ? this.adaptCanvasToContainer() : s ? this.setCanvasBackstoreWidth(s) : this.setCanvasBackstoreWidth(l), o.set({
+        width: l
       }), n.clipPath.set({
-        width: h
+        width: l
       }), t) {
-        var d = h / c, l = u * d;
-        this.setResolutionHeight(l);
+        var d = l / c, h = u * d;
+        this.setResolutionHeight(h);
         return;
       }
       var {
@@ -1508,14 +1511,14 @@ class jt {
       } = this.editor, {
         width: c,
         height: u
-      } = o, h = Number(Math.max(Math.min(e, C), x));
-      if (!s || s === "auto" || r ? this.adaptCanvasToContainer() : s ? this.setCanvasBackstoreHeight(s) : this.setCanvasBackstoreHeight(h), o.set({
-        height: h
+      } = o, l = Number(Math.max(Math.min(e, C), x));
+      if (!s || s === "auto" || r ? this.adaptCanvasToContainer() : s ? this.setCanvasBackstoreHeight(s) : this.setCanvasBackstoreHeight(l), o.set({
+        height: l
       }), n.clipPath.set({
-        height: h
+        height: l
       }), t) {
-        var d = h / u, l = c * d;
-        this.setResolutionWidth(l);
+        var d = l / u, h = c * d;
+        this.setResolutionWidth(h);
         return;
       }
       var {
@@ -1708,16 +1711,16 @@ class jt {
       }
       var s = t === "width" ? "width" : "height";
       if (typeof a == "string") {
-        o.forEach((h) => {
-          h.style[s] = a;
+        o.forEach((l) => {
+          l.style[s] = a;
         });
         return;
       }
       var c = parseFloat(a);
       if (!isNaN(c)) {
         var u = "".concat(c, "px");
-        o.forEach((h) => {
-          h.style[s] = u;
+        o.forEach((l) => {
+          l.style[s] = u;
         }), r.fire("editor:display-".concat(e, "-").concat(s, "-changed"), {
           element: e,
           value: a
@@ -1749,28 +1752,28 @@ class jt {
     } = this.editor, u = e || r.getActiveObject();
     if (!(!u || u.type !== "image" && u.format !== "svg")) {
       var {
-        width: h,
+        width: l,
         height: d
       } = u;
-      if (h < k || d < x) {
-        var l = "Размер изображения меньше минимального размера канваса, поэтому оно будет растянуто до минимальных размеров: ".concat(k, "x").concat(x);
-        console.warn("scaleMontageAreaToImage. ".concat(l)), r.fire("editor:warning", {
-          message: l
+      if (l < k || d < x) {
+        var h = "Размер изображения меньше минимального размера канваса, поэтому оно будет растянуто до минимальных размеров: ".concat(k, "x").concat(x);
+        console.warn("scaleMontageAreaToImage. ".concat(h)), r.fire("editor:warning", {
+          message: h
         });
       }
-      var g = Math.min(h, D), f = Math.min(d, C);
+      var g = Math.min(l, D), f = Math.min(d, C);
       if (t) {
         var {
           width: v,
           height: j
-        } = n, m = h / v, b = d / j, y = Math.max(m, b);
+        } = n, m = l / v, b = d / j, y = Math.max(m, b);
         g = v * y, f = j * y;
       }
       this.setResolutionWidth(g, {
         withoutSave: !0
       }), this.setResolutionHeight(f, {
         withoutSave: !0
-      }), (h > s || d > c) && o.calculateAndApplyDefaultZoom(s, c), o.resetObject(u, {
+      }), (l > s || d > c) && o.calculateAndApplyDefaultZoom(s, c), o.resetObject(u, {
         withoutSave: !0
       }), r.centerObject(u), r.renderAll(), a || this.editor.historyManager.saveState(), r.fire("editor:canvas-scaled", {
         width: g,
@@ -1854,9 +1857,9 @@ class yt {
     } = this.editor.montageArea, n = e / a, o = t / r, s = Math.min(n, o), {
       minZoom: c,
       maxZoom: u,
-      maxZoomFactor: h
+      maxZoomFactor: l
     } = this.options;
-    this.minZoom = Math.min(s / h, c), this.maxZoom = Math.max(s * h, u), this.defaultZoom = s, this.setZoom(s);
+    this.minZoom = Math.min(s / l, c), this.maxZoom = Math.max(s * l, u), this.defaultZoom = s, this.setZoom(s);
   }
   /**
    * Увеличение/уменьшение масштаба
@@ -2026,18 +2029,18 @@ class yt {
     if (c) {
       if (["activeselection"].includes(c.type) && !r) {
         var u = c.getObjects();
-        n.discardActiveObject(), u.forEach((l) => {
+        n.discardActiveObject(), u.forEach((h) => {
           var g = Y({
             montageArea: o,
-            imageObject: l,
+            imageObject: h,
             scaleType: t
           });
-          l.scale(g), n.centerObject(l);
+          h.scale(g), n.centerObject(h);
         });
-        var h = new Z(u, {
+        var l = new Z(u, {
           canvas: n
         });
-        n.setActiveObject(h);
+        n.setActiveObject(l);
       } else {
         var d = Y({
           montageArea: o,
@@ -2093,16 +2096,16 @@ class yt {
       else {
         var {
           width: u,
-          height: h
+          height: l
         } = n, {
           width: d,
-          height: l
+          height: h
         } = c, g = Y({
           montageArea: n,
           imageObject: c,
           scaleType: s
         });
-        s === "contain" && g < 1 || s === "cover" && (d > u || l > h) ? this.fitObject({
+        s === "contain" && g < 1 || s === "cover" && (d > u || h > l) ? this.fitObject({
           object: c,
           withoutSave: !0
         }) : c.set({
@@ -2325,10 +2328,21 @@ class H {
    * @private
    */
   static _moveSelectionForward(e, t) {
-    for (var a = e.getObjects(), r = t.getObjects(), n = r.length - 1; n >= 0; n -= 1) {
-      for (var o = r[n], s = a.indexOf(o), c = s + 1; c < a.length && r.includes(a[c]); )
-        c += 1;
-      c < a.length && e.moveObjectTo(o, c);
+    for (var a = e.getObjects(), r = t.getObjects(), n = r.map((l) => a.indexOf(l)), o = -1, s = function(d) {
+      var h = a[d];
+      if (!r.includes(h) && n.some((g) => d > g))
+        return o = d, 1;
+    }, c = 0; c < a.length && !s(c); c += 1)
+      ;
+    if (o !== -1) {
+      var u = r.map((l) => ({
+        obj: l,
+        index: a.indexOf(l)
+      })).sort((l, d) => d.index - l.index);
+      u.forEach((l) => {
+        var d = a.indexOf(l.obj);
+        d < o && (e.moveObjectTo(l.obj, o), o = d);
+      });
     }
   }
   /**
@@ -2436,10 +2450,10 @@ class Ct {
       fill: s = "blue"
     } = e, c = G(e, bt), {
       withoutSelection: u,
-      withoutAdding: h
+      withoutAdding: l
     } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, {
       canvas: d
-    } = this.editor, l = new Be(F({
+    } = this.editor, h = new Be(F({
       id: t,
       left: a,
       top: r,
@@ -2447,7 +2461,7 @@ class Ct {
       height: o,
       fill: s
     }, c));
-    return !a && !r && d.centerObject(l), h || (d.add(l), u || d.setActiveObject(l), d.renderAll()), l;
+    return !a && !r && d.centerObject(h), l || (d.add(h), u || d.setActiveObject(h), d.renderAll()), h;
   }
   /**
    * Добавление круга
@@ -2474,7 +2488,7 @@ class Ct {
       withoutSelection: c,
       withoutAdding: u
     } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, {
-      canvas: h
+      canvas: l
     } = this.editor, d = new Ze(F({
       id: t,
       left: a,
@@ -2482,7 +2496,7 @@ class Ct {
       fill: o,
       radius: n
     }, s));
-    return !a && !r && h.centerObject(d), u || (h.add(d), c || h.setActiveObject(d), h.renderAll()), d;
+    return !a && !r && l.centerObject(d), u || (l.add(d), c || l.setActiveObject(d), l.renderAll()), d;
   }
   /**
    * Добавление треугольника
@@ -2509,10 +2523,10 @@ class Ct {
       fill: s = "yellow"
     } = e, c = G(e, St), {
       withoutSelection: u,
-      withoutAdding: h
+      withoutAdding: l
     } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, {
       canvas: d
-    } = this.editor, l = new ze(F({
+    } = this.editor, h = new ze(F({
       id: t,
       left: a,
       top: r,
@@ -2520,7 +2534,7 @@ class Ct {
       width: n,
       height: o
     }, c));
-    return !a && !r && d.centerObject(l), h || (d.add(l), u || d.setActiveObject(l), d.renderAll()), l;
+    return !a && !r && d.centerObject(h), l || (d.add(h), u || d.setActiveObject(h), d.renderAll()), h;
   }
 }
 function ye(i, e, t, a, r, n, o) {
@@ -2649,13 +2663,14 @@ class Ot {
   lockObject() {
     var {
       object: e,
-      withoutSave: t
+      skipInnerObjects: t,
+      withoutSave: a
     } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, {
-      canvas: a,
-      historyManager: r
-    } = this.editor, n = e || a.getActiveObject();
-    if (!(!n || n.locked)) {
-      var o = {
+      canvas: r,
+      historyManager: n
+    } = this.editor, o = e || r.getActiveObject();
+    if (!(!o || o.locked)) {
+      var s = {
         lockMovementX: !0,
         lockMovementY: !0,
         lockRotation: !0,
@@ -2665,10 +2680,12 @@ class Ot {
         lockSkewingY: !0,
         locked: !0
       };
-      n.set(o), ["activeselection", "group"].includes(n.type) && n.getObjects().forEach((s) => {
-        s.set(o);
-      }), a.renderAll(), t || r.saveState(), a.fire("editor:object-locked", {
-        object: n
+      o.set(s);
+      var c = !t && ["activeselection", "group"].includes(o.type);
+      c && o.getObjects().forEach((u) => {
+        u.set(s);
+      }), r.renderAll(), a || n.saveState(), r.fire("editor:object-locked", {
+        object: o
       });
     }
   }
@@ -2794,6 +2811,7 @@ class Et {
     }) : r[0];
     n && a.lockObject({
       object: o,
+      skipInnerObjects: !0,
       withoutSave: !0
     }), e.setActiveObject(o), e.requestRenderAll(), e.fire("editor:all-objects-selected", {
       selected: o
@@ -2881,7 +2899,7 @@ class Bt {
         canvasCSSHeight: s,
         initialImage: c,
         initialStateJSON: u,
-        scaleType: h,
+        scaleType: l,
         _onReadyCallback: d
       } = e.options;
       if ($e.apply(), e.canvas = new Pe(e.containerId, e.options), e.moduleLoader = new _e(), e.workerManager = new Re(), e.historyManager = new ht({
@@ -2915,13 +2933,13 @@ class Bt {
         options: e.options
       }), e.canvasManager.setEditorContainerWidth(t), e.canvasManager.setEditorContainerHeight(a), e.canvasManager.setCanvasWrapperWidth(r), e.canvasManager.setCanvasWrapperHeight(n), e.canvasManager.setCanvasCSSWidth(o), e.canvasManager.setCanvasCSSHeight(s), c != null && c.source) {
         var {
-          source: l,
-          scale: g = "image-".concat(h),
+          source: h,
+          scale: g = "image-".concat(l),
           withoutSave: f = !0,
           contentType: v
         } = c;
         yield e.imageManager.importImage({
-          source: l,
+          source: h,
           scale: g,
           withoutSave: f,
           contentType: v
@@ -3024,6 +3042,8 @@ const Zt = {
   // Container CSS width and height
   editorContainerWidth: "fit-content",
   editorContainerHeight: "100%",
+  // Максимальная длина истории действий
+  maxHistoryLength: 50,
   // Дефолтный тип скейлинга для объектов (cotain/cover)
   scaleType: "contain",
   // Показывать панель инструментов для выделенного объекта

package/package.json

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