canvas-react-easy 1.0.2 → 1.0.3

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "canvas-react-easy",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "license": "MIT",
   "peerDependencies": {
-  "react": "^16.8.0 || ^17 || ^18 || ^19",
-  "mobx": "^6.0.0",
-  "mobx-react-lite": "^3.0.0 || ^4.0.0"
+    "mobx": "^6.0.0",
+    "mobx-react-lite": "^3.0.0 || ^4.0.0",
+    "react": "^16.8.0 || ^17 || ^18 || ^19"
   },
-
   "scripts": {
     "build": "tsc"
   },
   "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "typescript": "^5.9.3"
   }
 }

package/src/components/Tools.tsx

@@ -1,19 +1,26 @@
+import React from "react";
 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 = () => {
+  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 (
-    <div>
-      <button
-        onClick={() => {
-          if (CanvasState.canvas) {
-            toolState.setTool(new Brush(CanvasState.canvas));
-          }
-        }}
-      >
-        Кисть
-      </button>
+    <div style={{ marginBottom: "10px" }}>
+      <button onClick={selectBrush}>Кисть</button>
+      <button onClick={selectRectangle}>Прямоугольник</button>
+      <button onClick={selectCircle}>Круг</button>
+      <button onClick={selectText}>Текст</button>
+      <button onClick={selectImage}>Изображение</button>
     </div>
   );
 };

package/src/tools/Circle.ts

@@ -0,0 +1,39 @@
+import Tool from "./Tool";
+
+export class Circle extends Tool {
+  private startX = 0;
+  private startY = 0;
+  private mouseDown = false;
+
+  constructor(canvas: HTMLCanvasElement) {
+    super(canvas);
+    this.listen();
+  }
+
+  listen() {
+    this.canvas.onmousedown = this.onMouseDownHandler.bind(this);
+    this.canvas.onmouseup = this.onMouseUpHandler.bind(this);
+  }
+
+  onMouseDownHandler(e: MouseEvent) {
+    this.mouseDown = true;
+    const target = e.target as HTMLCanvasElement;
+    this.startX = e.pageX - target.offsetLeft;
+    this.startY = e.pageY - target.offsetTop;
+  }
+
+  onMouseUpHandler(e: MouseEvent) {
+    if (!this.mouseDown) return;
+    this.mouseDown = false;
+
+    const target = e.target as HTMLCanvasElement;
+    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/src/tools/ImageTool.ts

@@ -0,0 +1,28 @@
+import Tool from "./Tool";
+
+export class ImageTool extends Tool {
+  constructor(canvas: HTMLCanvasElement) {
+    super(canvas);
+    this.listen();
+  }
+
+  listen() {
+    this.canvas.onclick = this.onClickHandler.bind(this);
+  }
+
+  async onClickHandler(e: MouseEvent) {
+    const target = e.target as HTMLCanvasElement;
+    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/src/tools/Rectangle.ts

@@ -0,0 +1,40 @@
+import Tool from "./Tool";
+
+export class Rectangle extends Tool {
+  private startX = 0;
+  private startY = 0;
+  private mouseDown = false;
+
+  constructor(canvas: HTMLCanvasElement) {
+    super(canvas);
+    this.listen();
+  }
+
+  listen() {
+    this.canvas.onmousedown = this.onMouseDownHandler.bind(this);
+    this.canvas.onmouseup = this.onMouseUpHandler.bind(this);
+  }
+
+  onMouseDownHandler(e: MouseEvent) {
+    this.mouseDown = true;
+    const target = e.target as HTMLCanvasElement;
+    this.startX = e.pageX - target.offsetLeft;
+    this.startY = e.pageY - target.offsetTop;
+  }
+
+  onMouseUpHandler(e: MouseEvent) {
+    if (!this.mouseDown) return;
+    this.mouseDown = false;
+
+    const target = e.target as HTMLCanvasElement;
+    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/src/tools/Text.ts

@@ -0,0 +1,25 @@
+import Tool from "./Tool";
+
+export class TextTool extends Tool {
+  constructor(canvas: HTMLCanvasElement) {
+    super(canvas);
+    this.listen();
+  }
+
+  listen() {
+    this.canvas.onclick = this.onClickHandler.bind(this);
+  }
+
+  onClickHandler(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) return;
+
+    this.ctx.font = "20px Arial";
+    this.ctx.fillStyle = "black";
+    this.ctx.fillText(text, x, y);
+  }
+}