canvas-react-easy 1.0.3 → 1.0.5

package/dist/components/Tools.js

@@ -1,12 +1,17 @@
-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 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" })] }));
 };
 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,21 @@
+import Tool from "./Tool";
+export class TextTool extends Tool {
+    constructor(canvas) {
+        super(canvas);
+        this.listen();
+    }
+    listen() {
+        this.canvas.onclick = this.onClickHandler.bind(this);
+    }
+    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/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/package.json

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

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;