@anu3ev/fabric-image-editor 0.1.58 → 0.1.60

package/dist/main.js

@@ -143,7 +143,7 @@ class z {
    */
   handleCopyEvent(e) {
     const { ctrlKey: t, metaKey: s, code: n } = e;
-    !t && !s || n !== "KeyC" || (e.preventDefault(), this.editor.clipboardManager.copy());
+    this._shouldIgnoreKeyboardEvent(e) || !t && !s || n !== "KeyC" || (e.preventDefault(), this.editor.clipboardManager.copy());
   }
   /**
    * Обработчик вставки объекта или изображения из буфера обмена.
@@ -162,7 +162,7 @@ class z {
   handleUndoRedoEvent(e) {
     return I(this, null, function* () {
       const { ctrlKey: t, metaKey: s, code: n, repeat: i } = e;
-      !t && !s || i || !/Mac/i.test(navigator.userAgent) && this.isUndoRedoKeyPressed || (n === "KeyZ" ? (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.undo()) : n === "KeyY" && (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.redo()));
+      this._shouldIgnoreKeyboardEvent(e) || !t && !s || i || !/Mac/i.test(navigator.userAgent) && this.isUndoRedoKeyPressed || (n === "KeyZ" ? (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.undo()) : n === "KeyY" && (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.redo()));
     });
   }
   /**
@@ -170,8 +170,8 @@ class z {
    * @param event — объект события
    * @param event.code — код клавиши
    */
-  handleUndoRedoKeyUp({ code: e }) {
-    ["KeyZ", "KeyY"].includes(e) && (this.isUndoRedoKeyPressed = !1);
+  handleUndoRedoKeyUp(e) {
+    this._shouldIgnoreKeyboardEvent(e) || ["KeyZ", "KeyY"].includes(e.code) && (this.isUndoRedoKeyPressed = !1);
   }
   /**
    * Обработчик для выделения всех объектов (Ctrl+A).
@@ -181,16 +181,17 @@ class z {
    * @param event.code — код клавиши
    */
   handleSelectAllEvent(e) {
+    if (this._shouldIgnoreKeyboardEvent(e)) return;
     const { ctrlKey: t, metaKey: s, code: n } = e;
     !t && !s || n !== "KeyA" || (e.preventDefault(), this.editor.selectionManager.selectAll());
   }
   /**
-   * Обработчик для удаления объектов (Delete).
+   * Обработчик для удаления объектов (Delete или Backspace).
    * @param event — объект события
    * @param event.code — код клавиши
    */
   handleDeleteObjectsEvent(e) {
-    e.code === "Delete" && (e.preventDefault(), this.editor.deletionManager.deleteSelectedObjects());
+    this._shouldIgnoreKeyboardEvent(e) || e.code !== "Delete" && e.code !== "Backspace" || (e.preventDefault(), this.editor.deletionManager.deleteSelectedObjects());
   }
   /**
    * Обработчик для нажатия пробела.
@@ -199,7 +200,7 @@ class z {
    * @param event.code — код клавиши
    */
   handleSpaceKeyDown(e) {
-    if (e.code !== "Space") return;
+    if (e.code !== "Space" || this._shouldIgnoreKeyboardEvent(e)) return;
     const { canvas: t, editor: s, isSpacePressed: n, isDragging: i } = this;
     n || i || (this.isSpacePressed = !0, e.preventDefault(), t.set({
       selection: !1,
@@ -219,7 +220,7 @@ class z {
    * @param event.code — код клавиши
    */
   handleSpaceKeyUp(e) {
-    e.code === "Space" && (this.isSpacePressed = !1, this.isDragging && this.handleCanvasDragEnd(), this.canvas.set({
+    e.code !== "Space" || this._shouldIgnoreKeyboardEvent(e) || (this.isSpacePressed = !1, this.isDragging && this.handleCanvasDragEnd(), this.canvas.set({
       defaultCursor: "default",
       selection: !0
     }), this.canvas.setCursor("default"), this.editor.canvasManager.getObjects().forEach((t) => {
@@ -285,6 +286,35 @@ class z {
     const t = e == null ? void 0 : e.target;
     t && this.editor.transformManager.resetObject(t);
   }
+  /**
+   * Проверяет, должно ли событие клавиатуры быть проигнорировано
+   * Возвращает true если фокус находится в поле ввода или элементе из списка игнорируемых селекторов
+   * @param event - Событие клавиатуры
+   * @returns true если событие должно быть проигнорировано
+   */
+  _shouldIgnoreKeyboardEvent(e) {
+    const t = e.target;
+    if (!t) return !1;
+    const s = ["input", "textarea", "select"], n = t.tagName.toLowerCase();
+    if (s.includes(n) || t.contentEditable === "true") return !0;
+    const { keyboardIgnoreSelectors: i } = this.options;
+    if (i != null && i.length)
+      for (const a of i)
+        try {
+          if (t.matches && t.matches(a) || t.closest && t.closest(a))
+            return !0;
+        } catch (o) {
+          this.editor.errorManager.emitWarning({
+            origin: "Listeners",
+            method: "_shouldIgnoreKeyboardEvent",
+            code: "INVALID_SELECTOR",
+            // eslint-disable-next-line max-len
+            message: `Invalid keyboard ignore selector: "${a}". Error: ${o.message}`,
+            data: o
+          });
+        }
+    return !1;
+  }
   /**
    * Метод для удаления всех слушателей
    */
@@ -378,17 +408,17 @@ class Te {
     this.worker.terminate();
   }
 }
-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";
+const N = 12, ke = 2, Q = 8, $ = 20, xe = 100, J = 20, K = 8, Be = 100, q = 32, ee = 1, Ze = "#2B2D33", te = "#3D8BF4", se = "#FFFFFF";
 function W(c, e, t, s, n) {
   const i = N, a = ke;
   c.save(), c.translate(e, t), c.rotate(R.degreesToRadians(n.angle)), c.fillStyle = se, c.strokeStyle = te, c.lineWidth = ee, c.beginPath(), c.roundRect(-12 / 2, -12 / 2, i, i, a), c.fill(), c.stroke(), c.restore();
 }
 function he(c, e, t, s, n) {
-  const i = Q, a = J, o = xe;
+  const i = Q, a = $, o = xe;
   c.save(), c.translate(e, t), c.rotate(R.degreesToRadians(n.angle)), c.fillStyle = se, c.strokeStyle = te, c.lineWidth = ee, c.beginPath(), c.roundRect(-8 / 2, -20 / 2, i, a, o), c.fill(), c.stroke(), c.restore();
 }
 function ge(c, e, t, s, n) {
-  const i = $, a = K, o = Be;
+  const i = J, a = K, o = Be;
   c.save(), c.translate(e, t), c.rotate(R.degreesToRadians(n.angle)), c.fillStyle = se, c.strokeStyle = te, c.lineWidth = ee, c.beginPath(), c.roundRect(-20 / 2, -8 / 2, i, a, o), c.fill(), c.stroke(), c.restore();
 }
 const Ue = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", ue = new Image();
@@ -431,28 +461,28 @@ const Re = {
   ml: {
     render: he,
     sizeX: Q,
-    sizeY: J,
+    sizeY: $,
     offsetX: 0,
     offsetY: 0
   },
   mr: {
     render: he,
     sizeX: Q,
-    sizeY: J,
+    sizeY: $,
     offsetX: 0,
     offsetY: 0
   },
   // Середина горизонталей
   mt: {
     render: ge,
-    sizeX: $,
+    sizeX: J,
     sizeY: K,
     offsetX: 0,
     offsetY: 0
   },
   mb: {
     render: ge,
-    sizeX: $,
+    sizeX: J,
     sizeY: K,
     offsetX: 0,
     offsetY: 0
@@ -561,7 +591,9 @@ const Ye = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMj
   },
   handlers: {
     copyPaste: (c) => I(void 0, null, function* () {
-      yield c.clipboardManager.copy(), yield c.clipboardManager.paste();
+      yield c.clipboardManager.copy(), yield c.clipboardManager.paste(), c.clipboardManager.clipboard && c.canvas.fire("editor:object-duplicated", {
+        object: c.clipboardManager.clipboard
+      });
     }),
     delete: (c) => {
       c.deletionManager.deleteSelectedObjects();
@@ -700,7 +732,7 @@ class Qe {
     this.el.removeEventListener("mouseover", this._onBtnOver), this.el.removeEventListener("mouseout", this._onBtnOut), this.canvas.off("mouse:down", this._onMouseDown), this.canvas.off("object:moving", this._onObjectMoving), this.canvas.off("object:scaling", this._onObjectScaling), this.canvas.off("object:rotating", this._onObjectRotating), this.canvas.off("mouse:up", this._onMouseUp), this.canvas.off("object:modified", this._onObjectModified), this.canvas.off("selection:created", this._onSelectionChange), this.canvas.off("selection:updated", this._onSelectionChange), this.canvas.off("after:render", this._onSelectionChange), this.canvas.off("selection:cleared", this._onSelectionClear), this.el.remove();
   }
 }
-class Je {
+class $e {
   constructor({ editor: e }) {
     this.editor = e, this.canvas = e.canvas, this._historySuspendCount = 0, this.baseState = null, this.patches = [], this.currentIndex = 0, this.maxHistoryLength = e.options.maxHistoryLength, this.totalChangesCount = 0, this.baseStateChangesCount = 0, this._createDiffPatcher();
   }
@@ -903,7 +935,7 @@ class Je {
     });
   }
 }
-const $e = 0.1, Ke = 2, qe = 0.1, et = 90, x = 16, B = 16, O = 4096, T = 4096;
+const Je = 0.1, Ke = 2, qe = 0.1, et = 90, x = 16, B = 16, O = 4096, T = 4096;
 class D {
   constructor({ editor: e }) {
     this.editor = e, this.options = e.options, this._createdBlobUrls = [], this.acceptContentTypes = this.editor.options.acceptContentTypes, this.acceptFormats = this.getAllowedFormatsFromContentTypes();
@@ -1728,7 +1760,7 @@ class tt {
 }
 class st {
   constructor({ editor: e }) {
-    this.editor = e, this.options = e.options, this.minZoom = this.options.minZoom || $e, this.maxZoom = this.options.maxZoom || Ke, this.defaultZoom = this.options.defaultScale, this.maxZoomFactor = this.options.maxZoomFactor;
+    this.editor = e, this.options = e.options, this.minZoom = this.options.minZoom || Je, this.maxZoom = this.options.maxZoom || Ke, this.defaultZoom = this.options.defaultScale, this.maxZoomFactor = this.options.maxZoomFactor;
   }
   /**
    * Метод рассчитывает и применяет зум по умолчанию для монтажной области редактора.
@@ -2283,59 +2315,56 @@ class at {
    * @fires editor:object-copied
    */
   copy() {
-    const { canvas: e, errorManager: t } = this.editor, s = e.getActiveObject();
-    if (!s) return;
-    if (typeof ClipboardItem == "undefined" || !navigator.clipboard) {
-      t.emitWarning({
-        origin: "ClipboardManager",
-        method: "copy",
-        code: "CLIPBOARD_NOT_SUPPORTED",
-        // eslint-disable-next-line max-len
-        message: "ClipboardManager. navigator.clipboard не поддерживается в этом браузере или отсутствует соединение по HTTPS-протоколу."
-      }), this._cloneAndFire(e, s);
-      return;
-    }
-    if (s.type !== "image") {
-      const g = `application/image-editor:${JSON.stringify(s.toObject(["format"]))}`;
-      navigator.clipboard.writeText(g).catch((u) => {
+    return I(this, null, function* () {
+      const { canvas: e, errorManager: t } = this.editor, s = e.getActiveObject();
+      if (!s) return;
+      try {
+        const g = yield s.clone(["format"]);
+        this.clipboard = g, e.fire("editor:object-copied", { object: g });
+      } catch (g) {
+        t.emitError({
+          origin: "ClipboardManager",
+          method: "copy",
+          code: "CLONE_FAILED",
+          message: "Ошибка клонирования объекта",
+          data: g
+        });
+        return;
+      }
+      if (typeof ClipboardItem == "undefined" || !navigator.clipboard) {
         t.emitWarning({
           origin: "ClipboardManager",
           method: "copy",
-          code: "CLIPBOARD_WRITE_TEXT_FAILED",
-          message: `Ошибка записи текстового объекта в буфер обмена: ${u.message}`,
-          data: u
+          code: "CLIPBOARD_NOT_SUPPORTED",
+          // eslint-disable-next-line max-len
+          message: "ClipboardManager. navigator.clipboard не поддерживается в этом браузере или отсутствует соединение по HTTPS-протоколу."
+        });
+        return;
+      }
+      if (s.type !== "image") {
+        const g = `application/image-editor:${JSON.stringify(s.toObject(["format"]))}`;
+        navigator.clipboard.writeText(g).catch((u) => {
+          t.emitWarning({
+            origin: "ClipboardManager",
+            method: "copy",
+            code: "CLIPBOARD_WRITE_TEXT_FAILED",
+            message: `Ошибка записи текстового объекта в буфер обмена: ${u.message}`,
+            data: u
+          });
+        });
+        return;
+      }
+      const i = s.toCanvasElement().toDataURL(), a = i.slice(5).split(";")[0], o = i.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 l = new Blob([r.buffer], { type: a }), h = new ClipboardItem({ [a]: l });
+      navigator.clipboard.write([h]).catch((g) => {
+        t.emitWarning({
+          origin: "ClipboardManager",
+          method: "copy",
+          code: "CLIPBOARD_WRITE_IMAGE_FAILED",
+          message: `Ошибка записи изображения в буфер обмена: ${g.message}`
         });
-      }), this._cloneAndFire(e, s);
-      return;
-    }
-    const i = s.toCanvasElement().toDataURL(), a = i.slice(5).split(";")[0], o = i.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 l = new Blob([r.buffer], { type: a }), h = new ClipboardItem({ [a]: l });
-    navigator.clipboard.write([h]).catch((g) => {
-      t.emitWarning({
-        origin: "ClipboardManager",
-        method: "copy",
-        code: "CLIPBOARD_WRITE_IMAGE_FAILED",
-        message: `Ошибка записи изображения в буфер обмена: ${g.message}`
-      });
-    }), this._cloneAndFire(e, s);
-  }
-  /**
-   * Клонирует объект и вызывает событие 'editor:object-copied'.
-   * @param canvas - экземпляр canvas
-   * @param object - активный объект
-   */
-  _cloneAndFire(e, t) {
-    t.clone(["format"]).then((s) => {
-      this.clipboard = s, e.fire("editor:object-copied", { object: s });
-    }).catch((s) => {
-      this.editor.errorManager.emitError({
-        origin: "ClipboardManager",
-        method: "_cloneAndFire",
-        code: "CLONE_FAILED",
-        message: "Ошибка клонирования объекта",
-        data: s
       });
     });
   }
@@ -2720,7 +2749,7 @@ class ne {
         scaleType: r,
         _onReadyCallback: l
       } = this.options;
-      if (He.apply(), this.canvas = new Ce(this.containerId, this.options), this.moduleLoader = new Ee(), this.workerManager = new Te(), this.errorManager = new V({ editor: this }), this.historyManager = new Je({ editor: this }), this.toolbar = new Qe({ editor: this }), this.transformManager = new st({ editor: this }), this.canvasManager = new tt({ editor: this }), this.imageManager = new D({ editor: this }), this.layerManager = new P({ editor: this }), this.shapeManager = new it({ editor: this }), this.interactionBlocker = new nt({ editor: this }), this.clipboardManager = new at({ editor: this }), this.objectLockManager = new F({ editor: this }), this.groupingManager = new ot({ editor: this }), this.selectionManager = new rt({ editor: this }), this.deletionManager = new ct({ editor: this }), this._createMontageArea(), this._createClippingArea(), this.listeners = new z({ editor: this, options: this.options }), this.canvasManager.setEditorContainerWidth(e), this.canvasManager.setEditorContainerHeight(t), this.canvasManager.setCanvasWrapperWidth(s), this.canvasManager.setCanvasWrapperHeight(n), this.canvasManager.setCanvasCSSWidth(i), this.canvasManager.setCanvasCSSHeight(a), o != null && o.source) {
+      if (He.apply(), this.canvas = new Ce(this.containerId, this.options), this.moduleLoader = new Ee(), this.workerManager = new Te(), this.errorManager = new V({ editor: this }), this.historyManager = new $e({ editor: this }), this.toolbar = new Qe({ editor: this }), this.transformManager = new st({ editor: this }), this.canvasManager = new tt({ editor: this }), this.imageManager = new D({ editor: this }), this.layerManager = new P({ editor: this }), this.shapeManager = new it({ editor: this }), this.interactionBlocker = new nt({ editor: this }), this.clipboardManager = new at({ editor: this }), this.objectLockManager = new F({ editor: this }), this.groupingManager = new ot({ editor: this }), this.selectionManager = new rt({ editor: this }), this.deletionManager = new ct({ editor: this }), this._createMontageArea(), this._createClippingArea(), this.listeners = new z({ editor: this, options: this.options }), this.canvasManager.setEditorContainerWidth(e), this.canvasManager.setEditorContainerHeight(t), this.canvasManager.setCanvasWrapperWidth(s), this.canvasManager.setCanvasWrapperHeight(n), this.canvasManager.setCanvasCSSWidth(i), this.canvasManager.setCanvasCSSHeight(a), o != null && o.source) {
         const {
           source: h,
           scale: g = `image-${r}`,
@@ -2885,7 +2914,8 @@ const lt = {
   undoRedoByHotKeys: !0,
   selectAllByHotkey: !0,
   deleteObjectsByHotkey: !0,
-  resetObjectFitByDoubleClick: !0
+  resetObjectFitByDoubleClick: !0,
+  keyboardIgnoreSelectors: []
 };
 function bt(c, e = {}) {
   const t = y(y({}, lt), e), s = document.getElementById(c);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anu3ev/fabric-image-editor",
-  "version": "0.1.58",
+  "version": "0.1.60",
   "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": [
@@ -14,12 +14,15 @@
     "build": "vite build --config vite.config.prod.js",
     "build:docs": "vite build --config vite.config.docs.js",
     "preview": "vite preview",
-    "lint": "eslint \"src/**/*.{js,ts}\""
+    "lint": "eslint \"src/**/*.{js,ts}\"",
+    "test": "jest --coverage",
+    "test:watch": "jest --watch"
   },
   "devDependencies": {
     "@babel/core": "^7.26.7",
     "@babel/preset-env": "^7.26.7",
     "@eslint/js": "^9.16.0",
+    "@types/jest": "^30.0.0",
     "@typescript-eslint/eslint-plugin": "^8.36.0",
     "@typescript-eslint/parser": "^8.36.0",
     "eslint": "^8.57.1",
@@ -31,7 +34,11 @@
     "eslint-plugin-sort-keys-fix": "^1.1.2",
     "eslint-plugin-vue": "^9.32.0",
     "globals": "^15.13.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.4.2",
+    "ts-jest": "^29.4.1",
+    "ts-node": "^10.9.2",
     "vite": "^6.3.5",
     "vite-bundle-analyzer": "^0.21.0",
     "vite-plugin-babel": "^1.3.0",