canvas-react-easy 1.1.2 → 1.1.3

package/dist/components/Canvas.js

@@ -1,30 +1,37 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import CanvasState from "../store/CanvasState";
 import toolState from "../store/ToolState";
 import { Brush } from "../tools/Brush";
 import TextHoverTool from "../tools/TextHoverTool";
 const Canvas = ({ userName = "Гость" }) => {
-    const canvasRef = useRef(null);
+    const mainRef = useRef(null);
+    const overlayRef = useRef(null);
     useEffect(() => {
-        const canvas = canvasRef.current;
-        if (!canvas)
+        const mainCanvas = mainRef.current;
+        const overlayCanvas = overlayRef.current;
+        if (!mainCanvas || !overlayCanvas)
             return;
-        CanvasState.setCanvas(canvas);
-        // По умолчанию кисть
-        const brush = new Brush(canvas);
+        CanvasState.setCanvas(mainCanvas);
+        // По умолчанию включаем кисть
+        const brush = new Brush(mainCanvas);
         toolState.setTool(brush);
-        // Подключаем TextHoverTool сразу после монтирования, если нужно
-        const hoverTool = new TextHoverTool(canvas, userName);
-        hoverTool.listen();
-        // Если нужно оставить hoverTool активным
-        toolState.setTool(hoverTool);
+        // Подключаем TextHoverTool для отображения имени пользователя
+        const hover = new TextHoverTool(mainCanvas, overlayCanvas, userName);
+        hover.listen();
+        // Ставим hover tool как текущий инструмент (можно потом переключать через кнопки)
+        toolState.setTool(hover);
         // Очистка при размонтировании
         return () => {
-            hoverTool.clearEvents();
             brush.clearEvents();
+            hover.clearEvents();
         };
     }, [userName]);
-    return (_jsx("canvas", { ref: canvasRef, width: 1600, height: 900, style: { border: "1px solid black" } }));
+    return (_jsxs("div", { style: { position: "relative" }, children: [_jsx("canvas", { ref: mainRef, width: 1600, height: 900, style: { border: "1px solid black", display: "block" } }), _jsx("canvas", { ref: overlayRef, width: 1600, height: 900, style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    pointerEvents: "none",
+                } })] }));
 };
 export default Canvas;

package/dist/tools/TextHoverTool.js

@@ -1,43 +1,32 @@
 import Tool from "./Tool";
-export class TextHoverTool extends Tool {
-    constructor(canvas, userName) {
+export default class TextHoverTool extends Tool {
+    constructor(canvas, overlayCanvas, userName) {
         super(canvas);
         this.fontSize = 18;
         this.fontFamily = "Arial";
         this.color = "black";
         this.userName = userName;
-        // Создаём overlay-канвас поверх основного
-        this.overlayCanvas = document.createElement("canvas");
-        this.overlayCanvas.width = canvas.width;
-        this.overlayCanvas.height = canvas.height;
-        this.overlayCanvas.style.position = "absolute";
-        this.overlayCanvas.style.left = canvas.offsetLeft + "px";
-        this.overlayCanvas.style.top = canvas.offsetTop + "px";
-        this.overlayCanvas.style.pointerEvents = "none"; // мышь проходит через него
-        canvas.parentElement.appendChild(this.overlayCanvas);
-        this.overlayCtx = this.overlayCanvas.getContext("2d");
+        this.overlayCanvas = overlayCanvas;
+        const ctx = overlayCanvas.getContext("2d");
+        if (!ctx)
+            throw new Error("Cannot get 2D context for overlay");
+        this.overlayCtx = ctx;
     }
     listen() {
-        const moveHandler = (evt) => {
-            const e = evt; // кастим к MouseEvent
-            // Очищаем overlay
+        const moveHandler = (e) => {
+            // очищаем overlay
             this.overlayCtx.clearRect(0, 0, this.overlayCanvas.width, this.overlayCanvas.height);
-            // Координаты мыши относительно канваса
             const x = e.pageX - this.canvas.offsetLeft;
             const y = e.pageY - this.canvas.offsetTop;
-            // Рисуем имя чуть выше курсора
             this.overlayCtx.font = `${this.fontSize}px ${this.fontFamily}`;
             this.overlayCtx.fillStyle = this.color;
             this.overlayCtx.fillText(this.userName, x, y - 20);
         };
-        this.addListener("mousemove", moveHandler);
+        // Типизируем addEventListener как MouseEvent
+        this.overlayCanvas.addEventListener("mousemove", moveHandler);
     }
     clearEvents() {
         super.clearEvents();
-        // Удаляем overlay с DOM
-        if (this.overlayCanvas.parentElement) {
-            this.overlayCanvas.parentElement.removeChild(this.overlayCanvas);
-        }
+        this.overlayCtx.clearRect(0, 0, this.overlayCanvas.width, this.overlayCanvas.height);
     }
 }
-export default TextHoverTool;

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

@@ -1,13 +1,12 @@
 import Tool from "./Tool";
-export declare class TextHoverTool extends Tool {
+export default class TextHoverTool extends Tool {
     userName: string;
     fontSize: number;
     fontFamily: string;
     color: string;
-    private overlayCanvas;
-    private overlayCtx;
-    constructor(canvas: HTMLCanvasElement, userName: string);
+    overlayCanvas: HTMLCanvasElement;
+    overlayCtx: CanvasRenderingContext2D;
+    constructor(canvas: HTMLCanvasElement, overlayCanvas: HTMLCanvasElement, userName: string);
     listen(): void;
     clearEvents(): void;
 }
-export default TextHoverTool;

package/package.json

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

package/src/components/Border.tsx

@@ -1,9 +1,6 @@
-import React, { useEffect } from "react";
+import React from "react";
 import Tools from "./Tools";
 import Canvas from "./Canvas";
-import toolState from "../store/ToolState";
-import CanvasState from "../store/CanvasState";
-import TextHoverTool from "../tools/TextHoverTool";
 
 interface BorderProps {
   userName?: string;

package/src/components/Canvas.tsx

@@ -2,6 +2,10 @@ import React, { useEffect, useRef } from "react";
 import CanvasState from "../store/CanvasState";
 import toolState from "../store/ToolState";
 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";
 import TextHoverTool from "../tools/TextHoverTool";
 
 interface CanvasProps {
@@ -9,39 +13,54 @@ interface CanvasProps {
 }
 
 const Canvas: React.FC<CanvasProps> = ({ userName = "Гость" }) => {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const mainRef = useRef<HTMLCanvasElement>(null);
+  const overlayRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
+    const mainCanvas = mainRef.current;
+    const overlayCanvas = overlayRef.current;
+    if (!mainCanvas || !overlayCanvas) return;
 
-    CanvasState.setCanvas(canvas);
+    CanvasState.setCanvas(mainCanvas);
 
-    // По умолчанию кисть
-    const brush = new Brush(canvas);
+    // По умолчанию включаем кисть
+    const brush = new Brush(mainCanvas);
     toolState.setTool(brush);
 
-    // Подключаем TextHoverTool сразу после монтирования, если нужно
-    const hoverTool = new TextHoverTool(canvas, userName);
-    hoverTool.listen();
+    // Подключаем TextHoverTool для отображения имени пользователя
+    const hover = new TextHoverTool(mainCanvas, overlayCanvas, userName);
+    hover.listen();
 
-    // Если нужно оставить hoverTool активным
-    toolState.setTool(hoverTool);
+    // Ставим hover tool как текущий инструмент (можно потом переключать через кнопки)
+    toolState.setTool(hover);
 
     // Очистка при размонтировании
     return () => {
-      hoverTool.clearEvents();
       brush.clearEvents();
+      hover.clearEvents();
     };
   }, [userName]);
 
   return (
-    <canvas
-      ref={canvasRef}
-      width={1600}
-      height={900}
-      style={{ border: "1px solid black" }}
-    />
+    <div style={{ position: "relative" }}>
+      <canvas
+        ref={mainRef}
+        width={1600}
+        height={900}
+        style={{ border: "1px solid black", display: "block" }}
+      />
+      <canvas
+        ref={overlayRef}
+        width={1600}
+        height={900}
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          pointerEvents: "none",
+        }}
+      />
+    </div>
   );
 };
 

package/src/tools/TextHoverTool.ts

@@ -1,58 +1,51 @@
 import Tool from "./Tool";
 
-export class TextHoverTool extends Tool {
-    userName: string;
-    fontSize: number = 18;
-    fontFamily: string = "Arial";
-    color: string = "black";
-
-    private overlayCanvas!: HTMLCanvasElement;
-    private overlayCtx!: CanvasRenderingContext2D;
-
-    constructor(canvas: HTMLCanvasElement, userName: string) {
-        super(canvas);
-        this.userName = userName;
-
-        // Создаём overlay-канвас поверх основного
-        this.overlayCanvas = document.createElement("canvas");
-        this.overlayCanvas.width = canvas.width;
-        this.overlayCanvas.height = canvas.height;
-        this.overlayCanvas.style.position = "absolute";
-        this.overlayCanvas.style.left = canvas.offsetLeft + "px";
-        this.overlayCanvas.style.top = canvas.offsetTop + "px";
-        this.overlayCanvas.style.pointerEvents = "none"; // мышь проходит через него
-        canvas.parentElement!.appendChild(this.overlayCanvas);
-
-        this.overlayCtx = this.overlayCanvas.getContext("2d")!;
-    }
-
-    listen() {
-        const moveHandler = (evt: Event) => {
-            const e = evt as MouseEvent; // кастим к MouseEvent
-
-            // Очищаем overlay
-            this.overlayCtx.clearRect(0, 0, this.overlayCanvas.width, this.overlayCanvas.height);
-
-            // Координаты мыши относительно канваса
-            const x = e.pageX - this.canvas.offsetLeft;
-            const y = e.pageY - this.canvas.offsetTop;
-
-            // Рисуем имя чуть выше курсора
-            this.overlayCtx.font = `${this.fontSize}px ${this.fontFamily}`;
-            this.overlayCtx.fillStyle = this.color;
-            this.overlayCtx.fillText(this.userName, x, y - 20);
-        };
-
-        this.addListener("mousemove", moveHandler);
-    }
-
-    clearEvents() {
-        super.clearEvents();
-        // Удаляем overlay с DOM
-        if (this.overlayCanvas.parentElement) {
-            this.overlayCanvas.parentElement.removeChild(this.overlayCanvas);
-        }
-    }
+export default class TextHoverTool extends Tool {
+  userName: string;
+  fontSize = 18;
+  fontFamily = "Arial";
+  color = "black";
+
+  overlayCanvas: HTMLCanvasElement;
+  overlayCtx: CanvasRenderingContext2D;
+
+  constructor(
+    canvas: HTMLCanvasElement,
+    overlayCanvas: HTMLCanvasElement,
+    userName: string
+  ) {
+    super(canvas);
+    this.userName = userName;
+    this.overlayCanvas = overlayCanvas;
+    const ctx = overlayCanvas.getContext("2d");
+    if (!ctx) throw new Error("Cannot get 2D context for overlay");
+    this.overlayCtx = ctx;
+  }
+
+  listen() {
+    const moveHandler = (e: MouseEvent) => {
+      // очищаем overlay
+      this.overlayCtx.clearRect(
+        0,
+        0,
+        this.overlayCanvas.width,
+        this.overlayCanvas.height
+      );
+
+      const x = e.pageX - this.canvas.offsetLeft;
+      const y = e.pageY - this.canvas.offsetTop;
+
+      this.overlayCtx.font = `${this.fontSize}px ${this.fontFamily}`;
+      this.overlayCtx.fillStyle = this.color;
+      this.overlayCtx.fillText(this.userName, x, y - 20);
+    };
+
+    // Типизируем addEventListener как MouseEvent
+    this.overlayCanvas.addEventListener("mousemove", moveHandler as EventListener);
+  }
+
+  clearEvents() {
+    super.clearEvents();
+    this.overlayCtx.clearRect(0, 0, this.overlayCanvas.width, this.overlayCanvas.height);
+  }
 }
-
-export default TextHoverTool;