canvas-react-easy 1.0.6 → 1.0.7

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,22 @@ export class ImageTool extends Tool {
         this.listen();
     }
     listen() {
-        this.canvas.onclick = this.onClickHandler.bind(this);
+        const handler = (e) => {
+            const canvas = e.target;
+            const x = e.pageX - canvas.offsetLeft;
+            const y = e.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);
+        };
+        this.canvas.addEventListener("mousedown", handler);
     }
     onClickHandler(e) {
         return __awaiter(this, void 0, void 0, function* () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-react-easy",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "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,26 @@ export class ImageTool extends Tool {
   }
 
   listen() {
-    this.canvas.onclick = this.onClickHandler.bind(this);
-  }
+    const handler = (e: MouseEvent) => {
+        const canvas = e.target as HTMLCanvasElement;
+        const x = e.pageX - canvas.offsetLeft;
+        const y = e.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);
+    };
+
+    this.canvas.addEventListener("mousedown", handler);
+}
 
   async onClickHandler(e: MouseEvent) {
     const target = e.target as HTMLCanvasElement;