@anu3ev/fabric-image-editor 0.1.55 → 0.1.56

package/dist/main.js

@@ -2,40 +2,40 @@ var fe = Object.defineProperty, je = Object.defineProperties;
 var be = Object.getOwnPropertyDescriptors;
 var H = Object.getOwnPropertySymbols;
 var ce = Object.prototype.hasOwnProperty, de = Object.prototype.propertyIsEnumerable;
-var re = (c, e, t) => e in c ? fe(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t, I = (c, e) => {
+var re = (d, e, t) => e in d ? fe(d, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[e] = t, p = (d, e) => {
   for (var t in e || (e = {}))
-    ce.call(e, t) && re(c, t, e[t]);
+    ce.call(e, t) && re(d, t, e[t]);
   if (H)
     for (var t of H(e))
-      de.call(e, t) && re(c, t, e[t]);
-  return c;
-}, le = (c, e) => je(c, be(e));
-var Y = (c, e) => {
+      de.call(e, t) && re(d, t, e[t]);
+  return d;
+}, le = (d, e) => je(d, be(e));
+var Y = (d, e) => {
   var t = {};
-  for (var s in c)
-    ce.call(c, s) && e.indexOf(s) < 0 && (t[s] = c[s]);
-  if (c != null && H)
-    for (var s of H(c))
-      e.indexOf(s) < 0 && de.call(c, s) && (t[s] = c[s]);
+  for (var s in d)
+    ce.call(d, s) && e.indexOf(s) < 0 && (t[s] = d[s]);
+  if (d != null && H)
+    for (var s of H(d))
+      e.indexOf(s) < 0 && de.call(d, s) && (t[s] = d[s]);
   return t;
 };
-var p = (c, e, t) => new Promise((s, i) => {
-  var n = (d) => {
+var I = (d, e, t) => new Promise((s, i) => {
+  var n = (c) => {
     try {
-      o(t.next(d));
+      o(t.next(c));
     } catch (r) {
       i(r);
     }
-  }, a = (d) => {
+  }, a = (c) => {
     try {
-      o(t.throw(d));
+      o(t.throw(c));
     } catch (r) {
       i(r);
     }
-  }, o = (d) => d.done ? s(d.value) : Promise.resolve(d.value).then(n, a);
-  o((t = t.apply(c, e)).next());
+  }, o = (c) => c.done ? s(c.value) : Promise.resolve(c.value).then(n, a);
+  o((t = t.apply(d, e)).next());
 });
-import { ActiveSelection as v, util as R, controlsUtils as Ie, InteractiveFabricObject as ye, loadSVGFromURL as pe, FabricImage as Z, Point as _, Rect as ve, Circle as Ae, Triangle as Se, Group as X, Canvas as Ce, Pattern as Ne } from "fabric";
+import { ActiveSelection as v, util as R, controlsUtils as pe, InteractiveFabricObject as ye, loadSVGFromURL as Ie, FabricImage as Z, Point as _, Rect as ve, Circle as Ae, Triangle as Se, Group as X, Canvas as Ce, Pattern as Ne } from "fabric";
 import { create as De } from "jsondiffpatch";
 import Le from "diff-match-patch";
 var we = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", L = function() {
@@ -75,11 +75,11 @@ class z {
       copyObjectsByHotkey: n,
       pasteImageFromClipboard: a,
       undoRedoByHotKeys: o,
-      selectAllByHotkey: d,
+      selectAllByHotkey: c,
       deleteObjectsByHotkey: r,
       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), document.addEventListener("keydown", this.handleSpaceKeyDownBound, { capture: !0 }), document.addEventListener("keyup", this.handleSpaceKeyUpBound, { capture: !0 })), s && this.canvas.on("mouse:wheel", this.handleMouseWheelZoomBound), i && (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.handleContainerResizeBound, { capture: !0 }), n && document.addEventListener("keydown", this.handleCopyEventBound, { capture: !0 }), a && document.addEventListener("paste", this.handlePasteEventBound, { capture: !0 }), o && (document.addEventListener("keydown", this.handleUndoRedoEventBound, { capture: !0 }), document.addEventListener("keyup", this.handleUndoRedoKeyUpBound, { capture: !0 })), d && document.addEventListener("keydown", this.handleSelectAllEventBound, { capture: !0 }), r && document.addEventListener("keydown", this.handleDeleteObjectsEventBound, { capture: !0 }), this.canvas.on("object:modified", this.handleObjectModifiedHistoryBound), this.canvas.on("object:rotating", this.handleObjectRotatingHistoryBound), this.canvas.on("object:added", this.handleObjectAddedHistoryBound), this.canvas.on("object:removed", this.handleObjectRemovedHistoryBound), this.canvas.on("object:added", this.handleOverlayUpdateBound), this.canvas.on("selection:created", this.handleOverlayUpdateBound), this.canvas.on("selection:created", this.handleLockedSelectionBound), this.canvas.on("selection:updated", this.handleLockedSelectionBound);
+    t && (this.canvas.on("mouse:down", this.handleCanvasDragStartBound), this.canvas.on("mouse:move", this.handleCanvasDraggingBound), this.canvas.on("mouse:up", this.handleCanvasDragEndBound), document.addEventListener("keydown", this.handleSpaceKeyDownBound, { capture: !0 }), document.addEventListener("keyup", this.handleSpaceKeyUpBound, { capture: !0 })), s && this.canvas.on("mouse:wheel", this.handleMouseWheelZoomBound), i && (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.handleContainerResizeBound, { capture: !0 }), n && document.addEventListener("keydown", this.handleCopyEventBound, { capture: !0 }), a && document.addEventListener("paste", this.handlePasteEventBound, { capture: !0 }), o && (document.addEventListener("keydown", this.handleUndoRedoEventBound, { capture: !0 }), document.addEventListener("keyup", this.handleUndoRedoKeyUpBound, { capture: !0 })), c && document.addEventListener("keydown", this.handleSelectAllEventBound, { capture: !0 }), r && document.addEventListener("keydown", this.handleDeleteObjectsEventBound, { capture: !0 }), this.canvas.on("object:modified", this.handleObjectModifiedHistoryBound), this.canvas.on("object:rotating", this.handleObjectRotatingHistoryBound), this.canvas.on("object:added", this.handleObjectAddedHistoryBound), this.canvas.on("object:removed", this.handleObjectRemovedHistoryBound), this.canvas.on("object:added", this.handleOverlayUpdateBound), this.canvas.on("selection:created", this.handleOverlayUpdateBound), this.canvas.on("selection:created", this.handleLockedSelectionBound), this.canvas.on("selection:updated", this.handleLockedSelectionBound);
   }
   /**
    * При массовом выделении объектов удаляем из него залоченные.
@@ -129,7 +129,7 @@ class z {
   // --- Глобальные DOM-обработчики ---
   /**
    * Обработчик изменения размеров окна браузера.
-   * Адаптирует канвас к размерам контейнера.
+   * Адаптирует канвас к размерам контейнера, сохраняя позиции объектов.
    */
   handleContainerResize() {
     this.editor.canvasManager.updateCanvasAndFitObjects();
@@ -160,7 +160,7 @@ class z {
    * @param event.code — код клавиши
    */
   handleUndoRedoEvent(e) {
-    return p(this, null, function* () {
+    return I(this, null, function* () {
       const { ctrlKey: t, metaKey: s, code: i, repeat: n } = e;
       !t && !s || n || !/Mac/i.test(navigator.userAgent) && this.isUndoRedoKeyPressed || (i === "KeyZ" ? (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.undo()) : i === "KeyY" && (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.redo()));
     });
@@ -324,11 +324,11 @@ class Ee {
     return this.loaders[e] ? (this.cache.has(e) || this.cache.set(e, this.loaders[e]()), this.cache.get(e)) : Promise.reject(new Error(`Unknown module "${e}"`));
   }
 }
-function Oe(c) {
+function Oe(d) {
   return new Worker(
     "" + new URL("assets/worker-Cmho-Hr0.js", import.meta.url).href,
     {
-      name: c == null ? void 0 : c.name
+      name: d == null ? void 0 : d.name
     }
   );
 }
@@ -379,23 +379,23 @@ class Te {
   }
 }
 const N = 12, ke = 2, Q = 8, J = 20, xe = 100, $ = 20, K = 8, Be = 100, q = 32, ee = 1, Ze = "#2B2D33", te = "#3D8BF4", se = "#FFFFFF";
-function W(c, e, t, s, i) {
+function W(d, e, t, s, i) {
   const n = N, a = ke;
-  c.save(), c.translate(e, t), c.rotate(R.degreesToRadians(i.angle)), c.fillStyle = se, c.strokeStyle = te, c.lineWidth = ee, c.beginPath(), c.roundRect(-12 / 2, -12 / 2, n, n, a), c.fill(), c.stroke(), c.restore();
+  d.save(), d.translate(e, t), d.rotate(R.degreesToRadians(i.angle)), d.fillStyle = se, d.strokeStyle = te, d.lineWidth = ee, d.beginPath(), d.roundRect(-12 / 2, -12 / 2, n, n, a), d.fill(), d.stroke(), d.restore();
 }
-function he(c, e, t, s, i) {
+function he(d, e, t, s, i) {
   const n = Q, a = J, o = xe;
-  c.save(), c.translate(e, t), c.rotate(R.degreesToRadians(i.angle)), c.fillStyle = se, c.strokeStyle = te, c.lineWidth = ee, c.beginPath(), c.roundRect(-8 / 2, -20 / 2, n, a, o), c.fill(), c.stroke(), c.restore();
+  d.save(), d.translate(e, t), d.rotate(R.degreesToRadians(i.angle)), d.fillStyle = se, d.strokeStyle = te, d.lineWidth = ee, d.beginPath(), d.roundRect(-8 / 2, -20 / 2, n, a, o), d.fill(), d.stroke(), d.restore();
 }
-function ge(c, e, t, s, i) {
+function ge(d, e, t, s, i) {
   const n = $, a = K, o = Be;
-  c.save(), c.translate(e, t), c.rotate(R.degreesToRadians(i.angle)), c.fillStyle = se, c.strokeStyle = te, c.lineWidth = ee, c.beginPath(), c.roundRect(-20 / 2, -8 / 2, n, a, o), c.fill(), c.stroke(), c.restore();
+  d.save(), d.translate(e, t), d.rotate(R.degreesToRadians(i.angle)), d.fillStyle = se, d.strokeStyle = te, d.lineWidth = ee, d.beginPath(), d.roundRect(-20 / 2, -8 / 2, n, a, o), d.fill(), d.stroke(), d.restore();
 }
 const Ue = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", ue = new Image();
 ue.src = Ue;
-function ze(c, e, t, s, i) {
+function ze(d, e, t, s, i) {
   const a = q / 2;
-  c.save(), c.translate(e, t), c.rotate(R.degreesToRadians(i.angle)), c.fillStyle = Ze, c.beginPath(), c.arc(0, 0, a, 0, 2 * Math.PI), c.fill(), c.drawImage(ue, -16 / 2, -16 / 2, a, a), c.restore();
+  d.save(), d.translate(e, t), d.rotate(R.degreesToRadians(i.angle)), d.fillStyle = Ze, d.beginPath(), d.arc(0, 0, a, 0, 2 * Math.PI), d.fill(), d.drawImage(ue, -16 / 2, -16 / 2, a, a), d.restore();
 }
 const Re = {
   // Угловые точки
@@ -468,7 +468,7 @@ const Re = {
 };
 class He {
   static apply() {
-    const e = Ie.createObjectDefaultControls();
+    const e = pe.createObjectDefaultControls();
     Object.entries(Re).forEach(([t, s]) => {
       Object.assign(e[t], {
         render: s.render,
@@ -476,7 +476,7 @@ class He {
         sizeY: s.sizeY,
         offsetX: s.offsetX,
         offsetY: s.offsetY
-      }), t === "mtr" && (e[t].cursorStyle = "grab", e[t].mouseDownHandler = (n, a, o, d) => {
+      }), t === "mtr" && (e[t].cursorStyle = "grab", e[t].mouseDownHandler = (n, a, o, c) => {
         var l;
         (l = a.target.canvas) == null || l.setCursor("grabbing");
       });
@@ -560,29 +560,29 @@ const Ye = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMj
     sendBackwards: Fe
   },
   handlers: {
-    copyPaste: (c) => p(void 0, null, function* () {
-      yield c.clipboardManager.copy(), yield c.clipboardManager.paste();
+    copyPaste: (d) => I(void 0, null, function* () {
+      yield d.clipboardManager.copy(), yield d.clipboardManager.paste();
     }),
-    delete: (c) => {
-      c.deletionManager.deleteSelectedObjects();
+    delete: (d) => {
+      d.deletionManager.deleteSelectedObjects();
     },
-    lock: (c) => {
-      c.objectLockManager.lockObject();
+    lock: (d) => {
+      d.objectLockManager.lockObject();
     },
-    unlock: (c) => {
-      c.objectLockManager.unlockObject();
+    unlock: (d) => {
+      d.objectLockManager.unlockObject();
     },
-    bringForward: (c) => {
-      c.layerManager.bringForward();
+    bringForward: (d) => {
+      d.layerManager.bringForward();
     },
-    bringToFront: (c) => {
-      c.layerManager.bringToFront();
+    bringToFront: (d) => {
+      d.layerManager.bringToFront();
     },
-    sendToBack: (c) => {
-      c.layerManager.sendToBack();
+    sendToBack: (d) => {
+      d.layerManager.sendToBack();
     },
-    sendBackwards: (c) => {
-      c.layerManager.sendBackwards();
+    sendBackwards: (d) => {
+      d.layerManager.sendBackwards();
     }
   }
 };
@@ -593,11 +593,11 @@ class Qe {
   _initToolbar() {
     if (!this.options.showToolbar) return;
     const e = this.options.toolbar || {};
-    this.config = le(I(I({}, U), e), {
-      style: I(I({}, U.style), e.style || {}),
-      btnStyle: I(I({}, U.btnStyle), e.btnStyle || {}),
-      icons: I(I({}, U.icons), e.icons || {}),
-      handlers: I(I({}, U.handlers), e.handlers || {})
+    this.config = le(p(p({}, U), e), {
+      style: p(p({}, U.style), e.style || {}),
+      btnStyle: p(p({}, U.btnStyle), e.btnStyle || {}),
+      icons: p(p({}, U.icons), e.icons || {}),
+      handlers: p(p({}, U.handlers), e.handlers || {})
     }), this.currentTarget = null, this.currentLocked = !1, this.isTransforming = !1, this._onMouseDown = this._handleMouseDown.bind(this), this._onObjectMoving = this._startTransform.bind(this), this._onObjectScaling = this._startTransform.bind(this), this._onObjectRotating = this._startTransform.bind(this), this._onMouseUp = this._endTransform.bind(this), this._onObjectModified = this._endTransform.bind(this), this._onSelectionChange = this._updateToolbar.bind(this), this._onSelectionClear = () => {
       this.el.style.display = "none";
     }, this._createDOM(), this._bindEvents();
@@ -624,11 +624,11 @@ class Qe {
   _renderButtons(e) {
     this.el.innerHTML = "";
     for (const t of e) {
-      const { name: s, handle: i } = t, { icons: n = {}, btnStyle: a, handlers: o = {} } = this.config, d = document.createElement("button");
-      d.innerHTML = n[i] ? `<img src="${n[i]}" title="${s}" />` : s, Object.assign(d.style, a), d.onclick = () => {
+      const { name: s, handle: i } = t, { icons: n = {}, btnStyle: a, handlers: o = {} } = this.config, c = document.createElement("button");
+      c.innerHTML = n[i] ? `<img src="${n[i]}" title="${s}" />` : s, Object.assign(c.style, a), c.onclick = () => {
         var r;
         return (r = o[i]) == null ? void 0 : r.call(o, this.editor);
-      }, this.el.appendChild(d);
+      }, this.el.appendChild(c);
     }
   }
   /**
@@ -686,7 +686,7 @@ class Qe {
     }
     const { el: t, config: s, canvas: i } = this;
     e.setCoords();
-    const n = i.getZoom(), [, , , , a, o] = i.viewportTransform, { x: d } = e.getCenterPoint(), { top: r, height: l } = e.getBoundingRect(), g = d * n + a - t.offsetWidth / 2, u = s.offsetTop || 0, m = (r + l) * n + o + u;
+    const n = i.getZoom(), [, , , , a, o] = i.viewportTransform, { x: c } = e.getCenterPoint(), { top: r, height: l } = e.getBoundingRect(), g = c * n + a - t.offsetWidth / 2, u = s.offsetTop || 0, m = (r + l) * n + o + u;
     Object.assign(t.style, {
       left: `${g}px`,
       top: `${m}px`,
@@ -810,15 +810,15 @@ class Je {
    * @fires editor:history-state-loaded
    */
   loadStateFromFullState(e) {
-    return p(this, null, function* () {
+    return I(this, null, function* () {
       if (!e) return;
       console.log("loadStateFromFullState fullState", e);
       const { canvas: t, canvasManager: s, interactionBlocker: i } = this.editor, { width: n, height: a } = t;
       yield t.loadFromJSON(e);
       const o = t.getObjects().find((r) => r.id === "montage-area");
-      o && (this.editor.montageArea = o, (n !== e.width || a !== e.height) && s.updateCanvasAndFitObjects());
-      const d = t.getObjects().find((r) => r.id === "overlay-mask");
-      d && (i.overlayMask = d, i.overlayMask.visible = !1), t.renderAll(), t.fire("editor:history-state-loaded", {
+      o && (this.editor.montageArea = o, (n !== t.getWidth() || a !== t.getHeight()) && s.updateCanvas());
+      const c = t.getObjects().find((r) => r.id === "overlay-mask");
+      c && (i.overlayMask = c, i.overlayMask.visible = !1), t.renderAll(), t.fire("editor:history-state-loaded", {
         fullState: e,
         currentIndex: this.currentIndex,
         totalChangesCount: this.totalChangesCount,
@@ -833,7 +833,7 @@ class Je {
    * @fires editor:undo
    */
   undo() {
-    return p(this, null, function* () {
+    return I(this, null, function* () {
       if (!this.skipHistory) {
         if (this.currentIndex <= 0) {
           console.log("Нет предыдущих состояний для отмены.");
@@ -870,7 +870,7 @@ class Je {
    * @fires editor:redo
    */
   redo() {
-    return p(this, null, function* () {
+    return I(this, null, function* () {
       if (!this.skipHistory) {
         if (this.currentIndex >= this.patches.length) {
           console.log("Нет состояний для повтора.");
@@ -921,14 +921,14 @@ class D {
    * @returns возвращает Promise с объектом изображения или null в случае ошибки
    */
   importImage(e) {
-    return p(this, null, function* () {
+    return I(this, null, function* () {
       const {
         source: t,
         scale: s = `image-${this.options.scaleType}`,
         withoutSave: i = !1
       } = e;
       if (!t) return null;
-      const { canvas: n, montageArea: a, transformManager: o, historyManager: d, errorManager: r } = this.editor, l = yield this.getContentType(t), h = D.getFormatFromContentType(l), { acceptContentTypes: g, acceptFormats: u } = this;
+      const { canvas: n, montageArea: a, transformManager: o, historyManager: c, errorManager: r } = this.editor, l = yield this.getContentType(t), h = D.getFormatFromContentType(l), { acceptContentTypes: g, acceptFormats: u } = this;
       if (!this.isAllowedContentType(l)) {
         const m = `Неверный contentType для изображения: ${l}. Ожидается один из: ${this.acceptContentTypes.join(", ")}.`;
         return r.emitError({
@@ -939,7 +939,7 @@ class D {
           data: { source: t, format: h, contentType: l, acceptContentTypes: g, acceptFormats: u }
         }), null;
       }
-      d.suspendHistory();
+      c.suspendHistory();
       try {
         let m, M;
         if (t instanceof File)
@@ -956,7 +956,7 @@ class D {
             data: { source: t, format: h, contentType: l, acceptContentTypes: g, acceptFormats: u }
           }), null;
         if (this._createdBlobUrls.push(m), h === "svg") {
-          const b = yield pe(m);
+          const b = yield Ie(m);
           M = R.groupSVGElements(b.objects, b.options);
         } else
           M = yield Z.fromURL(m, { crossOrigin: "anonymous" });
@@ -978,7 +978,7 @@ class D {
           const { width: b, height: S } = a, w = this.calculateScaleFactor({ imageObject: M, scaleType: s });
           s === "image-contain" && w < 1 ? o.fitObject({ object: M, type: "contain", withoutSave: !0 }) : s === "image-cover" && (f > b || j > S) && o.fitObject({ object: M, type: "cover", withoutSave: !0 });
         }
-        n.add(M), n.centerObject(M), n.setActiveObject(M), n.renderAll(), d.resumeHistory(), i || d.saveState();
+        n.add(M), n.centerObject(M), n.setActiveObject(M), n.renderAll(), c.resumeHistory(), i || c.saveState();
         const A = {
           image: M,
           format: h,
@@ -995,7 +995,7 @@ class D {
           code: "IMPORT_FAILED",
           message: `Ошибка импорта изображения: ${m.message}`,
           data: { source: t, format: h, contentType: l, scale: s, withoutSave: i }
-        }), d.resumeHistory(), null;
+        }), c.resumeHistory(), null;
       }
     });
   }
@@ -1008,7 +1008,7 @@ class D {
    * @returns возвращает Promise с Blob-объектом уменьшенного изображения
    */
   resizeImageToBoundaries(e, t = "max") {
-    return p(this, null, function* () {
+    return I(this, null, function* () {
       let s = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${O}x${T}`;
       t === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${x}x${B}`);
       const i = {
@@ -1040,13 +1040,13 @@ class D {
    * @fires editor:canvas-exported
    */
   exportCanvasAsImageFile() {
-    return p(this, arguments, function* (e = {}) {
+    return I(this, arguments, function* (e = {}) {
       const {
         fileName: t = "image.png",
         contentType: s = "image/png",
         exportAsBase64: i = !1,
         exportAsBlob: n = !1
-      } = e, { canvas: a, montageArea: o, workerManager: d } = this.editor;
+      } = e, { canvas: a, montageArea: o, workerManager: c } = this.editor;
       try {
         const r = s === "application/pdf", l = r ? "image/jpg" : s, h = D.getFormatFromContentType(l);
         o.setCoords();
@@ -1084,7 +1084,7 @@ class D {
           };
           return a.fire("editor:canvas-exported", y), y;
         }
-        const S = yield createImageBitmap(b), w = yield d.post(
+        const S = yield createImageBitmap(b), w = yield c.post(
           "toDataURL",
           { format: h, quality: 1, bitmap: S },
           [S]
@@ -1151,14 +1151,14 @@ class D {
    * @fires editor:object-exported
    */
   exportObjectAsImageFile() {
-    return p(this, arguments, function* (e = {}) {
+    return I(this, arguments, function* (e = {}) {
       const {
         object: t,
         fileName: s = "image.png",
         contentType: i = "image/png",
         exportAsBase64: n = !1,
         exportAsBlob: a = !1
-      } = e, { canvas: o, workerManager: d } = this.editor, r = t || o.getActiveObject();
+      } = e, { canvas: o, workerManager: c } = this.editor, r = t || o.getActiveObject();
       if (!r)
         return this.editor.errorManager.emitError({
           origin: "ImageManager",
@@ -1184,7 +1184,7 @@ class D {
           return o.fire("editor:object-exported", j), j;
         }
         if (n && r instanceof Z) {
-          const M = yield createImageBitmap(r.getElement()), f = yield d.post(
+          const M = yield createImageBitmap(r.getElement()), f = yield c.post(
             "toDataURL",
             {
               format: l,
@@ -1262,7 +1262,7 @@ class D {
    * @public
    */
   getContentType(e) {
-    return p(this, null, function* () {
+    return I(this, null, function* () {
       return typeof e == "string" ? this.getContentTypeFromUrl(e) : e.type || "application/octet-stream";
     });
   }
@@ -1273,7 +1273,7 @@ class D {
    * @public
    */
   getContentTypeFromUrl(e) {
-    return p(this, null, function* () {
+    return I(this, null, function* () {
       if (e.startsWith("data:")) {
         const t = e.match(/^data:([^;]+)/);
         return t ? t[1] : "application/octet-stream";
@@ -1376,9 +1376,9 @@ class tt {
       canvas: n,
       montageArea: a,
       options: { canvasBackstoreWidth: o }
-    } = this.editor, { width: d, height: r } = a, l = Math.max(Math.min(Number(e), O), x);
+    } = this.editor, { width: c, height: r } = a, l = Math.max(Math.min(Number(e), O), x);
     if (!o || o === "auto" || i ? this.adaptCanvasToContainer() : o ? this.setCanvasBackstoreWidth(Number(o)) : this.setCanvasBackstoreWidth(l), a.set({ width: l }), (m = n.clipPath) == null || m.set({ width: l }), t) {
-      const M = l / d, f = r * M;
+      const M = l / c, f = r * M;
       this.setResolutionHeight(f);
       return;
     }
@@ -1406,9 +1406,9 @@ class tt {
       canvas: n,
       montageArea: a,
       options: { canvasBackstoreHeight: o }
-    } = this.editor, { width: d, height: r } = a, l = Math.max(Math.min(Number(e), T), B);
+    } = this.editor, { width: c, height: r } = a, l = Math.max(Math.min(Number(e), T), B);
     if (!o || o === "auto" || i ? this.adaptCanvasToContainer() : o ? this.setCanvasBackstoreHeight(Number(o)) : this.setCanvasBackstoreHeight(l), a.set({ height: l }), (m = n.clipPath) == null || m.set({ height: l }), t) {
-      const M = l / r, f = d * M;
+      const M = l / r, f = c * M;
       this.setResolutionWidth(f);
       return;
     }
@@ -1425,12 +1425,12 @@ class tt {
    * и устанавливает правильный viewportTransform.
    */
   centerMontageArea() {
-    var d;
+    var c;
     const { canvas: e, montageArea: t } = this.editor, s = e.getWidth(), i = e.getHeight(), n = e.getZoom(), a = new _(s / 2, i / 2);
     t.set({
       left: s / 2,
       top: i / 2
-    }), (d = e.clipPath) == null || d.set({
+    }), (c = e.clipPath) == null || c.set({
       left: s / 2,
       top: i / 2
     }), e.renderAll();
@@ -1451,8 +1451,8 @@ class tt {
         code: "NO_ACTIVE_OBJECT",
         message: "Не выбран объект для получения координат"
       }), { left: 0, top: 0 };
-    const { width: i, height: n } = s, a = t.getZoom(), o = (i - i * a) / 2, d = (n - n * a) / 2;
-    return { left: o, top: d };
+    const { width: i, height: n } = s, a = t.getZoom(), o = (i - i * a) / 2, c = (n - n * a) / 2;
+    return { left: o, top: c };
   }
   /**
    * Устанавливаем ширину канваса в backstore (для экспорта)
@@ -1481,23 +1481,45 @@ class tt {
     console.log("adaptCanvasToContainer newWidth", n), console.log("adaptCanvasToContainer newHeight", a), e.setDimensions({ width: n, height: a }, { backstoreOnly: !0 });
   }
   /**
-   * Обновляет размеры канваса и вписывает объекты в монтажную область.
-   * Вызывается при изменении размеров контейнера редактора.
+   * Обновляет размеры канваса без изменения позиций объектов.
+   * Используется при resize окна браузера для сохранения расположения объектов.
    * @fires editor:canvas-updated
    */
-  updateCanvasAndFitObjects() {
+  updateCanvas() {
     const {
       canvas: e,
-      selectionManager: t,
-      transformManager: s,
+      montageArea: t,
       montageArea: {
-        width: i,
-        height: n
+        width: s,
+        height: i
       }
-    } = this.editor;
-    this.setResolutionWidth(i, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.setResolutionHeight(n, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.centerMontageArea(), t.selectAll(), s.fitObject({ fitAsOneObject: !0, withoutSave: !0 }), e.fire("editor:canvas-updated", {
-      width: i,
-      height: n
+    } = this.editor, n = t.left, a = t.top;
+    this.setResolutionWidth(s, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.setResolutionHeight(i, { adaptCanvasToContainer: !0, withoutSave: !0 }), this.centerMontageArea();
+    const o = t.left - n, c = t.top - a;
+    if (o !== 0 || c !== 0) {
+      const r = e.getActiveObject(), l = [];
+      if ((r == null ? void 0 : r.type) === "activeselection") {
+        const h = r;
+        l.push(...h.getObjects()), e.discardActiveObject();
+      }
+      if (e.getObjects().forEach((h) => {
+        h.id === "montage-area" || h.id === "overlay-mask" || (h.set({
+          left: h.left + o,
+          top: h.top + c
+        }), h.setCoords());
+      }), l.length > 0)
+        if (l.length === 1)
+          e.setActiveObject(l[0]);
+        else {
+          const h = new v(l, {
+            canvas: e
+          });
+          e.setActiveObject(h);
+        }
+    }
+    e.renderAll(), e.fire("editor:canvas-updated", {
+      width: s,
+      height: i
     });
   }
   /**
@@ -1514,9 +1536,9 @@ class tt {
   updateCssDimensionsForZoom(e) {
     const { canvas: t, montageArea: s } = this.editor, i = s.width * e, n = s.height * e, a = t.wrapperEl.parentNode;
     if (!(a instanceof HTMLElement)) return;
-    const o = i <= a.clientWidth ? "100%" : i, d = n <= a.clientHeight ? "100%" : n;
+    const o = i <= a.clientWidth ? "100%" : i, c = n <= a.clientHeight ? "100%" : n;
     t.setDimensions(
-      { width: o, height: d },
+      { width: o, height: c },
       { cssOnly: !0 }
     );
   }
@@ -1625,9 +1647,9 @@ class tt {
       return;
     }
     if (isNaN(s)) return;
-    const d = `${s}px`;
+    const c = `${s}px`;
     a.forEach((r) => {
-      r.style[o] = d;
+      r.style[o] = c;
     }), i.fire(`editor:display-${e}-${o}-changed`, {
       element: e,
       value: s
@@ -1648,7 +1670,7 @@ class tt {
       transformManager: a,
       options: {
         montageAreaWidth: o,
-        montageAreaHeight: d
+        montageAreaHeight: c
       }
     } = this.editor, r = e || i.getActiveObject();
     if (!r || r.type !== "image" && r.format !== "svg") return;
@@ -1661,7 +1683,7 @@ class tt {
       } = n, f = l / m, j = h / M, A = Math.max(f, j);
       g = m * A, u = M * A;
     }
-    this.setResolutionWidth(g, { withoutSave: !0 }), this.setResolutionHeight(u, { withoutSave: !0 }), (l > o || h > d) && a.calculateAndApplyDefaultZoom(), a.resetObject(r, { withoutSave: !0 }), i.centerObject(r), i.renderAll(), s || this.editor.historyManager.saveState(), i.fire("editor:montage-area-scaled-to-image", {
+    this.setResolutionWidth(g, { withoutSave: !0 }), this.setResolutionHeight(u, { withoutSave: !0 }), (l > o || h > c) && a.calculateAndApplyDefaultZoom(), a.resetObject(r, { withoutSave: !0 }), i.centerObject(r), i.renderAll(), s || this.editor.historyManager.saveState(), i.fire("editor:montage-area-scaled-to-image", {
       object: r,
       width: g,
       height: u,
@@ -1716,8 +1738,8 @@ class st {
    * @param scale - Желаемый масштаб относительно размеров контейнера редактора.
    */
   calculateAndApplyDefaultZoom(e = this.options.defaultScale) {
-    const { canvas: t } = this.editor, s = t.editorContainer, i = s.clientWidth, n = s.clientHeight, { width: a, height: o } = this.editor.montageArea, d = i / a * e, r = n / o * e;
-    this.defaultZoom = Math.min(d, r);
+    const { canvas: t } = this.editor, s = t.editorContainer, i = s.clientWidth, n = s.clientHeight, { width: a, height: o } = this.editor.montageArea, c = i / a * e, r = n / o * e;
+    this.defaultZoom = Math.min(c, r);
     const { defaultZoom: l, maxZoomFactor: h, minZoom: g, maxZoom: u } = this;
     this.minZoom = Math.min(l / h, g), this.maxZoom = Math.max(l * h, u), this.setZoom();
   }
@@ -1733,7 +1755,7 @@ class st {
   zoom(e = qe, t = {}) {
     var g, u;
     if (!e) return;
-    const { minZoom: s, maxZoom: i } = this, { canvas: n } = this.editor, a = n.getZoom(), o = n.getCenterPoint(), d = (g = t.pointX) != null ? g : o.x, r = (u = t.pointY) != null ? u : o.y, l = new _(d, r);
+    const { minZoom: s, maxZoom: i } = this, { canvas: n } = this.editor, a = n.getZoom(), o = n.getCenterPoint(), c = (g = t.pointX) != null ? g : o.x, r = (u = t.pointY) != null ? u : o.y, l = new _(c, r);
     let h = Number((a + Number(e)).toFixed(2));
     h > i && (h = i), h < s && (h = s), n.zoomToPoint(l, h), console.log({
       currentZoom: a,
@@ -1855,11 +1877,11 @@ class st {
     const { canvas: n, historyManager: a } = this.editor, o = e || n.getActiveObject();
     if (o) {
       if (o instanceof v && !i) {
-        const d = o.getObjects();
-        n.discardActiveObject(), d.forEach((l) => {
+        const c = o.getObjects();
+        n.discardActiveObject(), c.forEach((l) => {
           this._fitSingleObject(l, t);
         });
-        const r = new v(d, { canvas: n });
+        const r = new v(c, { canvas: n });
         n.setActiveObject(r);
       } else
         this._fitSingleObject(o, t);
@@ -1878,11 +1900,11 @@ class st {
    * @private
    */
   _fitSingleObject(e, t) {
-    const { canvas: s, montageArea: i } = this.editor, { width: n, height: a, scaleX: o = 1, scaleY: d = 1, angle: r = 0 } = e, l = n * Math.abs(o), h = a * Math.abs(d), g = r * Math.PI / 180, u = Math.abs(Math.cos(g)), m = Math.abs(Math.sin(g)), M = l * u + h * m, f = l * m + h * u, j = i.width, A = i.height;
+    const { canvas: s, montageArea: i } = this.editor, { width: n, height: a, scaleX: o = 1, scaleY: c = 1, angle: r = 0 } = e, l = n * Math.abs(o), h = a * Math.abs(c), g = r * Math.PI / 180, u = Math.abs(Math.cos(g)), m = Math.abs(Math.sin(g)), M = l * u + h * m, f = l * m + h * u, j = i.width, A = i.height;
     let b;
     t === "contain" ? b = Math.min(j / M, A / f) : b = Math.max(j / M, A / f), e.set({
       scaleX: o * b,
-      scaleY: d * b
+      scaleY: c * b
     }), s.centerObject(e);
   }
   /**
@@ -1907,7 +1929,7 @@ class st {
       montageArea: n,
       imageManager: a,
       historyManager: o,
-      options: { scaleType: d }
+      options: { scaleType: c }
     } = this.editor, r = e || i.getActiveObject();
     if (!r || r.locked) return;
     if (o.suspendHistory(), r.type === "image" || r.format === "svg" || r.set({
@@ -1921,9 +1943,9 @@ class st {
     else {
       const { width: h, height: g } = n, { width: u, height: m } = r, M = a.calculateScaleFactor({
         imageObject: r,
-        scaleType: d
+        scaleType: c
       });
-      d === "contain" && M < 1 || d === "cover" && (u > h || m > g) ? this.fitObject({ object: r, withoutSave: !0, fitAsOneObject: !0 }) : r.set({ scaleX: 1, scaleY: 1 });
+      c === "contain" && M < 1 || c === "cover" && (u > h || m > g) ? this.fitObject({ object: r, withoutSave: !0, fitAsOneObject: !0 }) : r.set({ scaleX: 1, scaleY: 1 });
     }
     r.set({ flipX: !1, flipY: !1, angle: 0 }), i.centerObject(r), i.renderAll(), o.resumeHistory(), s || o.saveState(), i.fire("editor:object-reset", {
       object: r,
@@ -2045,9 +2067,9 @@ class P {
     const o = e || s.getActiveObject();
     if (o) {
       if (o instanceof v) {
-        const d = o.getObjects();
-        for (let r = d.length - 1; r >= 0; r -= 1)
-          s.sendObjectToBack(d[r]);
+        const c = o.getObjects();
+        for (let r = c.length - 1; r >= 0; r -= 1)
+          s.sendObjectToBack(c[r]);
       } else
         s.sendObjectToBack(o);
       s.sendObjectToBack(i), a && s.sendObjectToBack(a), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:object-send-to-back", {
@@ -2085,15 +2107,15 @@ class P {
     const s = e.getObjects(), i = t.getObjects(), n = i.map((o) => s.indexOf(o));
     let a = -1;
     for (let o = 0; o < s.length; o += 1) {
-      const d = s[o];
-      if (!i.includes(d) && n.some((r) => o > r)) {
+      const c = s[o];
+      if (!i.includes(c) && n.some((r) => o > r)) {
         a = o;
         break;
       }
     }
-    a !== -1 && i.map((d) => ({ obj: d, index: s.indexOf(d) })).sort((d, r) => r.index - d.index).forEach((d) => {
-      const r = s.indexOf(d.obj);
-      r < a && (e.moveObjectTo(d.obj, a), a = r);
+    a !== -1 && i.map((c) => ({ obj: c, index: s.indexOf(c) })).sort((c, r) => r.index - c.index).forEach((c) => {
+      const r = s.indexOf(c.obj);
+      r < a && (e.moveObjectTo(c.obj, a), a = r);
     });
   }
   /**
@@ -2105,15 +2127,15 @@ class P {
     const s = e.getObjects(), i = t.getObjects(), n = i.map((o) => s.indexOf(o));
     let a = -1;
     for (let o = s.length - 1; o >= 0; o -= 1) {
-      const d = s[o];
-      if (!i.includes(d) && n.some((r) => o < r)) {
+      const c = s[o];
+      if (!i.includes(c) && n.some((r) => o < r)) {
         a = o;
         break;
       }
     }
-    a !== -1 && i.map((d) => ({ obj: d, index: s.indexOf(d) })).sort((d, r) => d.index - r.index).forEach((d) => {
-      const r = s.indexOf(d.obj);
-      r > a && (e.moveObjectTo(d.obj, a), a = r);
+    a !== -1 && i.map((c) => ({ obj: c, index: s.indexOf(c) })).sort((c, r) => c.index - r.index).forEach((c) => {
+      const r = s.indexOf(c.obj);
+      r > a && (e.moveObjectTo(c.obj, a), a = r);
     });
   }
 }
@@ -2141,7 +2163,7 @@ class nt {
    * @param flags.withoutSelection - Не выделять объект
    * @param flags.withoutAdding - Не добавлять объект в canvas
    */
-  addRectangle(l = {}, { withoutSelection: d, withoutAdding: r } = {}) {
+  addRectangle(l = {}, { withoutSelection: c, withoutAdding: r } = {}) {
     var h = l, {
       id: e = `rect-${L()}`,
       left: t,
@@ -2157,7 +2179,7 @@ class nt {
       "height",
       "fill"
     ]);
-    const { canvas: g } = this.editor, u = new ve(I({
+    const { canvas: g } = this.editor, u = new ve(p({
       id: e,
       left: t,
       top: s,
@@ -2165,7 +2187,7 @@ class nt {
       height: n,
       fill: a
     }, o));
-    return !t && !s && g.centerObject(u), r || (g.add(u), d || g.setActiveObject(u), g.renderAll()), u;
+    return !t && !s && g.centerObject(u), r || (g.add(u), c || g.setActiveObject(u), g.renderAll()), u;
   }
   /**
    * Добавление круга
@@ -2183,7 +2205,7 @@ class nt {
    * @param flags.withoutSelection - Не выделять объект
    * @param flags.withoutAdding - Не добавлять объект в canvas
    */
-  addCircle(r = {}, { withoutSelection: o, withoutAdding: d } = {}) {
+  addCircle(r = {}, { withoutSelection: o, withoutAdding: c } = {}) {
     var l = r, {
       id: e = `circle-${L()}`,
       left: t,
@@ -2197,14 +2219,14 @@ class nt {
       "radius",
       "fill"
     ]);
-    const { canvas: h } = this.editor, g = new Ae(I({
+    const { canvas: h } = this.editor, g = new Ae(p({
       id: e,
       left: t,
       top: s,
       fill: n,
       radius: i
     }, a));
-    return !t && !s && h.centerObject(g), d || (h.add(g), o || h.setActiveObject(g), h.renderAll()), g;
+    return !t && !s && h.centerObject(g), c || (h.add(g), o || h.setActiveObject(g), h.renderAll()), g;
   }
   /**
    * Добавление треугольника
@@ -2223,7 +2245,7 @@ class nt {
    * @param flags.withoutSelection - Не выделять объект
    * @param flags.withoutAdding - Не добавлять объект в canvas
    */
-  addTriangle(l = {}, { withoutSelection: d, withoutAdding: r } = {}) {
+  addTriangle(l = {}, { withoutSelection: c, withoutAdding: r } = {}) {
     var h = l, {
       id: e = `triangle-${L()}`,
       left: t,
@@ -2239,7 +2261,7 @@ class nt {
       "height",
       "fill"
     ]);
-    const { canvas: g } = this.editor, u = new Se(I({
+    const { canvas: g } = this.editor, u = new Se(p({
       id: e,
       left: t,
       top: s,
@@ -2247,7 +2269,7 @@ class nt {
       width: i,
       height: n
     }, o));
-    return !t && !s && g.centerObject(u), r || (g.add(u), d || g.setActiveObject(u), g.renderAll()), u;
+    return !t && !s && g.centerObject(u), r || (g.add(u), c || g.setActiveObject(u), g.renderAll()), u;
   }
 }
 class at {
@@ -2288,9 +2310,9 @@ class at {
       }), this._cloneAndFire(e, s);
       return;
     }
-    const n = s.toCanvasElement().toDataURL(), a = n.slice(5).split(";")[0], o = n.split(",")[1], d = atob(o), r = new Uint8Array(d.length);
-    for (let g = 0; g < d.length; g += 1)
-      r[g] = d.charCodeAt(g);
+    const n = s.toCanvasElement().toDataURL(), a = n.slice(5).split(";")[0], o = n.split(",")[1], c = atob(o), r = new Uint8Array(c.length);
+    for (let g = 0; g < c.length; g += 1)
+      r[g] = c.charCodeAt(g);
     const l = new Blob([r.buffer], { type: a }), h = new ClipboardItem({ [a]: l });
     navigator.clipboard.write([h]).catch((g) => {
       t.emitWarning({
@@ -2332,10 +2354,10 @@ class at {
     if (i.type !== "text/html") {
       const o = i.getAsFile();
       if (!o) return;
-      const d = new FileReader();
-      d.onload = (r) => {
+      const c = new FileReader();
+      c.onload = (r) => {
         r.target && this.editor.imageManager.importImage({ source: r.target.result });
-      }, d.readAsDataURL(o);
+      }, c.readAsDataURL(o);
       return;
     }
     const n = e.getData("text/html");
@@ -2353,7 +2375,7 @@ class at {
    * @fires editor:object-pasted
    */
   paste() {
-    return p(this, null, function* () {
+    return I(this, null, function* () {
       const { canvas: e } = this.editor;
       if (!this.clipboard) return;
       const t = yield this.clipboard.clone(["format"]);
@@ -2452,7 +2474,7 @@ class ot {
     const n = e || s.getActiveObject();
     if (!n || !(n instanceof v)) return;
     const a = n.getObjects(), o = new X(a);
-    a.forEach((d) => s.remove(d)), o.set("id", `${o.type}-${L()}`), s.add(o), s.setActiveObject(o), s.renderAll(), i.resumeHistory(), t || i.saveState(), s.fire("editor:objects-grouped", {
+    a.forEach((c) => s.remove(c)), o.set("id", `${o.type}-${L()}`), s.add(o), s.setActiveObject(o), s.renderAll(), i.resumeHistory(), t || i.saveState(), s.fire("editor:objects-grouped", {
       object: n,
       group: o,
       withoutSave: t
@@ -2474,7 +2496,7 @@ class ot {
     const n = e || s.getActiveObject();
     if (!(n instanceof X)) return;
     const a = n.removeAll();
-    s.remove(n), a.forEach((d) => s.add(d));
+    s.remove(n), a.forEach((c) => s.add(c));
     const o = new v(a, {
       canvas: s
     });
@@ -2631,7 +2653,7 @@ class V {
       message: a,
       data: i
     };
-    this._buffer.push(I({
+    this._buffer.push(p({
       type: "editor:error"
     }, o)), this.editor.canvas.fire("editor:error", o);
   }
@@ -2659,7 +2681,7 @@ class V {
       message: a,
       data: n
     };
-    this._buffer.push(I({
+    this._buffer.push(p({
       type: "editor:warning"
     }, o)), this.editor.canvas.fire("editor:warning", o);
   }
@@ -2687,7 +2709,7 @@ class ie {
    * @fires editor:ready
    */
   init() {
-    return p(this, null, function* () {
+    return I(this, null, function* () {
       const {
         editorContainerWidth: e,
         editorContainerHeight: t,
@@ -2696,7 +2718,7 @@ class ie {
         canvasCSSWidth: n,
         canvasCSSHeight: a,
         initialImage: o,
-        initialStateJSON: d,
+        initialStateJSON: c,
         scaleType: r,
         _onReadyCallback: l
       } = this.options;
@@ -2709,7 +2731,7 @@ class ie {
         yield this.imageManager.importImage({ source: h, scale: g, withoutSave: u });
       } else
         this.canvasManager.setDefaultScale({ withoutSave: !0 });
-      d && this.historyManager.loadStateFromFullState(d), this.historyManager.saveState(), console.log("editor:ready"), this.canvas.fire("editor:ready", this), typeof l == "function" && l(this);
+      c && this.historyManager.loadStateFromFullState(c), this.historyManager.saveState(), console.log("editor:ready"), this.canvas.fire("editor:ready", this), typeof l == "function" && l(this);
     });
   }
   /**
@@ -2867,15 +2889,15 @@ const lt = {
   deleteObjectsByHotkey: !0,
   resetObjectFitByDoubleClick: !0
 };
-function bt(c, e = {}) {
-  const t = I(I({}, lt), e), s = document.getElementById(c);
+function bt(d, e = {}) {
+  const t = p(p({}, lt), e), s = document.getElementById(d);
   if (!s)
-    return Promise.reject(new Error(`Контейнер с ID "${c}" не найден.`));
+    return Promise.reject(new Error(`Контейнер с ID "${d}" не найден.`));
   const i = document.createElement("canvas");
-  return i.id = `${c}-canvas`, s.appendChild(i), t.editorContainer = s, new Promise((n) => {
+  return i.id = `${d}-canvas`, s.appendChild(i), t.editorContainer = s, new Promise((n) => {
     t._onReadyCallback = n;
     const a = new ie(i.id, t);
-    window[c] = a;
+    window[d] = a;
   });
 }
 export {

package/package.json

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