canvas-react-easy 1.0.5 → 1.0.7

package/dist/components/Tools.js

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

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/dist/tools/Text.js

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

package/dist/tools/Tool.js

@@ -1,15 +1,12 @@
 export default class Tool {
     constructor(canvas) {
         this.canvas = canvas;
-        const context = canvas.getContext("2d");
-        if (!context)
-            throw new Error("Canvas context is null");
-        this.ctx = context;
-        this.destroyEvents();
+        this.ctx = canvas.getContext("2d");
+        this.clearEvents();
     }
-    destroyEvents() {
-        this.canvas.onmousemove = null;
+    clearEvents() {
         this.canvas.onmousedown = null;
         this.canvas.onmouseup = null;
+        this.canvas.onmousemove = null;
     }
 }

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

@@ -1,6 +1,6 @@
 export default class Tool {
     canvas: HTMLCanvasElement;
-    ctx: CanvasRenderingContext2D;
     constructor(canvas: HTMLCanvasElement);
-    destroyEvents(): void;
+    ctx: CanvasRenderingContext2D;
+    clearEvents(): void;
 }

package/package.json

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

package/src/components/Tools.tsx

@@ -8,19 +8,28 @@ import { TextTool } from "../tools/Text";
 import { ImageTool } from "../tools/ImageTool";
 
 const Tools = () => {
-  const selectBrush = () => CanvasState.canvas && toolState.setTool(new Brush(CanvasState.canvas));
-  const selectRectangle = () => CanvasState.canvas && toolState.setTool(new Rectangle(CanvasState.canvas));
-  const selectCircle = () => CanvasState.canvas && toolState.setTool(new Circle(CanvasState.canvas));
-  const selectText = () => CanvasState.canvas && toolState.setTool(new TextTool(CanvasState.canvas));
-  const selectImage = () => CanvasState.canvas && toolState.setTool(new ImageTool(CanvasState.canvas));
 
+  const selectTool = (ToolClass: any) => {
+    if (!CanvasState.canvas) return;
+
+    // очищаем старый инструмент
+    toolState.tool?.clearEvents();
+
+    // создаём новый инструмент и подключаем слушатели
+    const tool = new ToolClass(CanvasState.canvas);
+    tool.listen?.(); // если инструмент имеет метод listen
+    toolState.setTool(tool);
+};
+
+  
   return (
     <div style={{ marginBottom: "10px" }}>
-      <button onClick={selectBrush}>Кисть</button>
-      <button onClick={selectRectangle}>Прямоугольник</button>
-      <button onClick={selectCircle}>Круг</button>
-      <button onClick={selectText}>Текст</button>
-      <button onClick={selectImage}>Изображение</button>
+      <button onClick={() => selectTool(Brush)}>Кисть</button>
+      <button onClick={() => selectTool(Rectangle)}>Прямоугольник</button>
+      <button onClick={() => selectTool(Circle)}>Круг</button>
+      <button onClick={() => selectTool(TextTool)}>Текст</button>
+      <button onClick={() => selectTool(ImageTool)}>Изображение</button>
+
     </div>
   );
 };

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;

package/src/tools/Text.ts

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

package/src/tools/Tool.ts

@@ -1,19 +1,14 @@
 export default class Tool {
-    canvas: HTMLCanvasElement;
-    ctx: CanvasRenderingContext2D;
-  
-    constructor(canvas: HTMLCanvasElement) {
-      this.canvas = canvas;
-      const context = canvas.getContext("2d");
-      if (!context) throw new Error("Canvas context is null");
-      this.ctx = context;
-      this.destroyEvents();
-    }
-  
-    destroyEvents() {
-      this.canvas.onmousemove = null;
+  constructor(public canvas: HTMLCanvasElement) {
+      this.ctx = canvas.getContext("2d")!;
+      this.clearEvents();
+  }
+
+  ctx: CanvasRenderingContext2D;
+
+  clearEvents() {
       this.canvas.onmousedown = null;
       this.canvas.onmouseup = null;
-    }
+      this.canvas.onmousemove = null;
   }
-  
+}