canvas-react-easy 1.0.4 → 1.0.6

package/dist/components/Tools.js

@@ -1,12 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import toolState from "../store/ToolState";
 import CanvasState from "../store/CanvasState";
 import { Brush } from "../tools/Brush";
+import { Rectangle } from "../tools/Rectangle";
+import { Circle } from "../tools/Circle";
+import { TextTool } from "../tools/Text";
+import { ImageTool } from "../tools/ImageTool";
 const Tools = () => {
-    return (_jsx("div", { children: _jsx("button", { onClick: () => {
-                if (CanvasState.canvas) {
-                    toolState.setTool(new Brush(CanvasState.canvas));
-                }
-            }, children: "\u041A\u0438\u0441\u0442\u044C" }) }));
+    const selectTool = (ToolClass) => {
+        var _a;
+        const canvas = CanvasState.canvas;
+        if (!canvas)
+            return;
+        // Очищаем события старого инструмента
+        (_a = toolState.tool) === null || _a === void 0 ? void 0 : _a.clearEvents();
+        // Устанавливаем новый инструмент
+        toolState.setTool(new ToolClass(canvas));
+    };
+    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/Circle.js

@@ -0,0 +1,32 @@
+import Tool from "./Tool";
+export class Circle extends Tool {
+    constructor(canvas) {
+        super(canvas);
+        this.startX = 0;
+        this.startY = 0;
+        this.mouseDown = false;
+        this.listen();
+    }
+    listen() {
+        this.canvas.onmousedown = this.onMouseDownHandler.bind(this);
+        this.canvas.onmouseup = this.onMouseUpHandler.bind(this);
+    }
+    onMouseDownHandler(e) {
+        this.mouseDown = true;
+        const target = e.target;
+        this.startX = e.pageX - target.offsetLeft;
+        this.startY = e.pageY - target.offsetTop;
+    }
+    onMouseUpHandler(e) {
+        if (!this.mouseDown)
+            return;
+        this.mouseDown = false;
+        const target = e.target;
+        const endX = e.pageX - target.offsetLeft;
+        const endY = e.pageY - target.offsetTop;
+        const radius = Math.sqrt(Math.pow(endX - this.startX, 2) + Math.pow(endY - this.startY, 2));
+        this.ctx.beginPath();
+        this.ctx.arc(this.startX, this.startY, radius, 0, 2 * Math.PI);
+        this.ctx.stroke();
+    }
+}

package/dist/tools/ImageTool.js

@@ -0,0 +1,34 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import Tool from "./Tool";
+export class ImageTool extends Tool {
+    constructor(canvas) {
+        super(canvas);
+        this.listen();
+    }
+    listen() {
+        this.canvas.onclick = this.onClickHandler.bind(this);
+    }
+    onClickHandler(e) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const target = e.target;
+            const x = e.pageX - target.offsetLeft;
+            const y = e.pageY - target.offsetTop;
+            const url = prompt("Введите URL изображения");
+            if (!url)
+                return;
+            const img = new Image();
+            img.src = url;
+            img.onload = () => {
+                this.ctx.drawImage(img, x, y, img.width, img.height);
+            };
+        });
+    }
+}

package/dist/tools/Rectangle.js

@@ -0,0 +1,33 @@
+import Tool from "./Tool";
+export class Rectangle extends Tool {
+    constructor(canvas) {
+        super(canvas);
+        this.startX = 0;
+        this.startY = 0;
+        this.mouseDown = false;
+        this.listen();
+    }
+    listen() {
+        this.canvas.onmousedown = this.onMouseDownHandler.bind(this);
+        this.canvas.onmouseup = this.onMouseUpHandler.bind(this);
+    }
+    onMouseDownHandler(e) {
+        this.mouseDown = true;
+        const target = e.target;
+        this.startX = e.pageX - target.offsetLeft;
+        this.startY = e.pageY - target.offsetTop;
+    }
+    onMouseUpHandler(e) {
+        if (!this.mouseDown)
+            return;
+        this.mouseDown = false;
+        const target = e.target;
+        const endX = e.pageX - target.offsetLeft;
+        const endY = e.pageY - target.offsetTop;
+        const width = endX - this.startX;
+        const height = endY - this.startY;
+        this.ctx.beginPath();
+        this.ctx.rect(this.startX, this.startY, width, height);
+        this.ctx.stroke();
+    }
+}

package/dist/tools/Text.js

@@ -0,0 +1,32 @@
+import Tool from "./Tool";
+export class TextTool extends Tool {
+    constructor(canvas) {
+        super(canvas);
+        this.listen();
+    }
+    listen() {
+        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;
+        const x = e.pageX - target.offsetLeft;
+        const y = e.pageY - target.offsetTop;
+        const text = prompt("Введите текст");
+        if (!text)
+            return;
+        this.ctx.font = "20px Arial";
+        this.ctx.fillStyle = "black";
+        this.ctx.fillText(text, x, y);
+    }
+}

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/components/Border.d.ts

@@ -1,2 +1,4 @@
-declare const Border: React.MemoExoticComponent<React.ForwardRefExoticComponent<any>>;
+declare const Border: (() => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
 export default Border;

package/dist/types/components/Canvas.d.ts

@@ -1,2 +1,2 @@
-declare const Canvas: () => any;
+declare const Canvas: () => import("react/jsx-runtime").JSX.Element;
 export default Canvas;

package/dist/types/components/Tools.d.ts

@@ -1,2 +1,2 @@
-declare const Tools: () => any;
+declare const Tools: () => import("react/jsx-runtime").JSX.Element;
 export default Tools;

package/dist/types/store/ToolState.d.ts

@@ -1,3 +1,4 @@
+import Tool from "../tools/Tool";
 declare class ToolState {
     tool: Tool | null;
     constructor();

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

@@ -0,0 +1,10 @@
+import Tool from "./Tool";
+export declare class Circle extends Tool {
+    private startX;
+    private startY;
+    private mouseDown;
+    constructor(canvas: HTMLCanvasElement);
+    listen(): void;
+    onMouseDownHandler(e: MouseEvent): void;
+    onMouseUpHandler(e: MouseEvent): void;
+}

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

@@ -0,0 +1,6 @@
+import Tool from "./Tool";
+export declare class ImageTool extends Tool {
+    constructor(canvas: HTMLCanvasElement);
+    listen(): void;
+    onClickHandler(e: MouseEvent): Promise<void>;
+}

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

@@ -0,0 +1,10 @@
+import Tool from "./Tool";
+export declare class Rectangle extends Tool {
+    private startX;
+    private startY;
+    private mouseDown;
+    constructor(canvas: HTMLCanvasElement);
+    listen(): void;
+    onMouseDownHandler(e: MouseEvent): void;
+    onMouseUpHandler(e: MouseEvent): void;
+}

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

@@ -0,0 +1,6 @@
+import Tool from "./Tool";
+export declare class TextTool extends Tool {
+    constructor(canvas: HTMLCanvasElement);
+    listen(): void;
+    onClickHandler(e: MouseEvent): void;
+}

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.4",
+  "version": "1.0.6",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "license": "MIT",

package/src/components/Tools.tsx

@@ -8,19 +8,26 @@ 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) => {
+    const canvas = CanvasState.canvas;
+    if (!canvas) return;
+
+    // Очищаем события старого инструмента
+    toolState.tool?.clearEvents();
+
+    // Устанавливаем новый инструмент
+    toolState.setTool(new ToolClass(canvas));
+  };
+  
   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/store/ToolState.ts

@@ -1,5 +1,6 @@
 // ToolState.ts
 import { makeAutoObservable } from "mobx";
+import Tool from "../tools/Tool"; // путь к Tool.ts
 
 class ToolState {
   tool: Tool | null = null;

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;
   }
-  
+}