canvas-react-easy 1.0.6 → 1.0.9

package/dist/components/Tools.js

@@ -8,14 +8,15 @@ import { TextTool } from "../tools/Text";
 import { ImageTool } from "../tools/ImageTool";
 const Tools = () => {
     const selectTool = (ToolClass) => {
-        var _a;
-        const canvas = CanvasState.canvas;
-        if (!canvas)
+        var _a, _b;
+        if (!CanvasState.canvas)
             return;
-        // Очищаем события старого инструмента
+        // очищаем старый инструмент
         (_a = toolState.tool) === null || _a === void 0 ? void 0 : _a.clearEvents();
-        // Устанавливаем новый инструмент
-        toolState.setTool(new ToolClass(canvas));
+        // создаём новый инструмент и подключаем слушатели
+        const tool = new ToolClass(CanvasState.canvas);
+        (_b = tool.listen) === null || _b === void 0 ? void 0 : _b.call(tool); // если инструмент имеет метод listen
+        toolState.setTool(tool);
     };
     return (_jsxs("div", { style: { marginBottom: "10px" }, children: [_jsx("button", { onClick: () => selectTool(Brush), children: "\u041A\u0438\u0441\u0442\u044C" }), _jsx("button", { onClick: () => selectTool(Rectangle), children: "\u041F\u0440\u044F\u043C\u043E\u0443\u0433\u043E\u043B\u044C\u043D\u0438\u043A" }), _jsx("button", { onClick: () => selectTool(Circle), children: "\u041A\u0440\u0443\u0433" }), _jsx("button", { onClick: () => selectTool(TextTool), children: "\u0422\u0435\u043A\u0441\u0442" }), _jsx("button", { onClick: () => selectTool(ImageTool), children: "\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435" })] }));
 };

package/dist/tools/ImageTool.js

@@ -14,7 +14,20 @@ export class ImageTool extends Tool {
         this.listen();
     }
     listen() {
-        this.canvas.onclick = this.onClickHandler.bind(this);
+        const handler = (e) => {
+            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);
+            this.clearEvents(); // удаляем обработчики после использования
+        };
+        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.6",
+  "version": "1.0.9",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "license": "MIT",

package/src/components/Tools.tsx

@@ -10,15 +10,17 @@ import { ImageTool } from "../tools/ImageTool";
 const Tools = () => {
 
   const selectTool = (ToolClass: any) => {
-    const canvas = CanvasState.canvas;
-    if (!canvas) return;
+    if (!CanvasState.canvas) return;
 
-    // Очищаем события старого инструмента
+    // очищаем старый инструмент
     toolState.tool?.clearEvents();
 
-    // Устанавливаем новый инструмент
-    toolState.setTool(new ToolClass(canvas));
-  };
+    // создаём новый инструмент и подключаем слушатели
+    const tool = new ToolClass(CanvasState.canvas);
+    tool.listen?.(); // если инструмент имеет метод listen
+    toolState.setTool(tool);
+};
+
   
   return (
     <div style={{ marginBottom: "10px" }}>

package/src/tools/ImageTool.ts

@@ -7,8 +7,24 @@ export class ImageTool extends Tool {
   }
 
   listen() {
-    this.canvas.onclick = this.onClickHandler.bind(this);
-  }
+    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);
+
+        this.clearEvents(); // удаляем обработчики после использования
+    };
+
+    this.addListener("mousedown", handler);
+}
 
   async onClickHandler(e: MouseEvent) {
     const target = e.target as HTMLCanvasElement;

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;