canvas-react-easy 1.0.7 → 1.0.9

package/dist/tools/ImageTool.js

@@ -15,21 +15,19 @@ export class ImageTool extends Tool {
     }
     listen() {
         const handler = (e) => {
-            const canvas = e.target;
-            const x = e.pageX - canvas.offsetLeft;
-            const y = e.pageY - canvas.offsetTop;
+            const evt = e;
+            const canvas = evt.target;
+            const x = evt.pageX - canvas.offsetLeft;
+            const y = evt.pageY - canvas.offsetTop;
             const url = prompt("Введите ссылку на изображение");
             if (!url)
                 return;
             const img = new Image();
             img.src = url;
-            img.onload = () => {
-                this.ctx.drawImage(img, x, y);
-            };
-            // удаляем обработчик после первого использования
-            canvas.removeEventListener("mousedown", handler);
+            img.onload = () => this.ctx.drawImage(img, x, y);
+            this.clearEvents(); // удаляем обработчики после использования
         };
-        this.canvas.addEventListener("mousedown", handler);
+        this.addListener("mousedown", handler);
     }
     onClickHandler(e) {
         return __awaiter(this, void 0, void 0, function* () {

package/dist/tools/Text.js

@@ -6,17 +6,18 @@ export class TextTool extends Tool {
     }
     listen() {
         const handler = (e) => {
-            const target = e.target;
-            const x = e.pageX - target.offsetLeft;
-            const y = e.pageY - target.offsetTop;
+            const evt = e; // приводим Event к MouseEvent
+            const canvas = evt.target;
+            const x = evt.pageX - canvas.offsetLeft;
+            const y = evt.pageY - canvas.offsetTop;
             const text = prompt("Введите текст");
             if (text) {
                 this.ctx.fillText(text, x, y);
             }
-            // убираем событие после первого использования
-            target.removeEventListener("mousedown", handler);
+            // удаляем обработчик после первого использования
+            this.clearEvents();
         };
-        this.canvas.addEventListener("mousedown", handler);
+        this.addListener("mousedown", handler);
     }
     onClickHandler(e) {
         const target = e.target;

package/dist/tools/Tool.js

@@ -1,10 +1,23 @@
 export default class Tool {
     constructor(canvas) {
         this.canvas = canvas;
+        this.events = [];
         this.ctx = canvas.getContext("2d");
+        this.events = [];
         this.clearEvents();
     }
+    // сохраняем слушатели, чтобы потом удалять
+    addListener(type, handler) {
+        this.canvas.addEventListener(type, handler);
+        this.events.push({ type, handler });
+    }
     clearEvents() {
+        // удаляем все зарегистрированные слушатели
+        this.events.forEach(({ type, handler }) => {
+            this.canvas.removeEventListener(type, handler);
+        });
+        this.events = [];
+        // очищаем стандартные свойства
         this.canvas.onmousedown = null;
         this.canvas.onmouseup = null;
         this.canvas.onmousemove = null;

package/dist/types/tools/Tool.d.ts

@@ -2,5 +2,10 @@ export default class Tool {
     canvas: HTMLCanvasElement;
     constructor(canvas: HTMLCanvasElement);
     ctx: CanvasRenderingContext2D;
+    events: Array<{
+        type: string;
+        handler: EventListener;
+    }>;
+    addListener(type: string, handler: EventListener): void;
     clearEvents(): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-react-easy",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "license": "MIT",

package/src/tools/ImageTool.ts

@@ -7,25 +7,23 @@ export class ImageTool extends Tool {
   }
 
   listen() {
-    const handler = (e: MouseEvent) => {
-        const canvas = e.target as HTMLCanvasElement;
-        const x = e.pageX - canvas.offsetLeft;
-        const y = e.pageY - canvas.offsetTop;
+    const handler = (e: Event) => {
+        const evt = e as MouseEvent;
+        const canvas = evt.target as HTMLCanvasElement;
+        const x = evt.pageX - canvas.offsetLeft;
+        const y = evt.pageY - canvas.offsetTop;
 
         const url = prompt("Введите ссылку на изображение");
         if (!url) return;
 
         const img = new Image();
         img.src = url;
-        img.onload = () => {
-            this.ctx.drawImage(img, x, y);
-        };
+        img.onload = () => this.ctx.drawImage(img, x, y);
 
-        // удаляем обработчик после первого использования
-        canvas.removeEventListener("mousedown", handler);
+        this.clearEvents(); // удаляем обработчики после использования
     };
 
-    this.canvas.addEventListener("mousedown", handler);
+    this.addListener("mousedown", handler);
 }
 
   async onClickHandler(e: MouseEvent) {

package/src/tools/Text.ts

@@ -7,19 +7,23 @@ export class TextTool extends Tool {
   }
 
   listen() {
-    const handler = (e: MouseEvent) => {
-        const target = e.target as HTMLCanvasElement;
-        const x = e.pageX - target.offsetLeft;
-        const y = e.pageY - target.offsetTop;
+    const handler = (e: Event) => {
+        const evt = e as MouseEvent; // приводим Event к MouseEvent
+        const canvas = evt.target as HTMLCanvasElement;
+        const x = evt.pageX - canvas.offsetLeft;
+        const y = evt.pageY - canvas.offsetTop;
+
         const text = prompt("Введите текст");
         if (text) {
             this.ctx.fillText(text, x, y);
         }
-        // убираем событие после первого использования
-        target.removeEventListener("mousedown", handler);
+
+        // удаляем обработчик после первого использования
+        this.clearEvents();
     };
-    this.canvas.addEventListener("mousedown", handler);
-  }
+
+    this.addListener("mousedown", handler);
+}
 
   onClickHandler(e: MouseEvent) {
     const target = e.target as HTMLCanvasElement;

package/src/tools/Tool.ts

@@ -1,12 +1,27 @@
 export default class Tool {
   constructor(public canvas: HTMLCanvasElement) {
       this.ctx = canvas.getContext("2d")!;
+      this.events = [];
       this.clearEvents();
   }
 
   ctx: CanvasRenderingContext2D;
+  events: Array<{ type: string; handler: EventListener }> = [];
+
+  // сохраняем слушатели, чтобы потом удалять
+  addListener(type: string, handler: EventListener) {
+      this.canvas.addEventListener(type, handler);
+      this.events.push({ type, handler });
+  }
 
   clearEvents() {
+      // удаляем все зарегистрированные слушатели
+      this.events.forEach(({ type, handler }) => {
+          this.canvas.removeEventListener(type, handler);
+      });
+      this.events = [];
+
+      // очищаем стандартные свойства
       this.canvas.onmousedown = null;
       this.canvas.onmouseup = null;
       this.canvas.onmousemove = null;