canvas-react-easy 1.1.2 → 1.1.4

package/dist/components/Border.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Tools from "./Tools";
 import Canvas from "./Canvas";
-const Border = ({ userName = "Гость" }) => {
-    return (_jsxs("div", { style: { position: "relative" }, children: [_jsx(Tools, { userName: userName }), _jsx(Canvas, { userName: userName })] }));
+const Border = () => {
+    return (_jsxs("div", { style: { position: "relative" }, children: [_jsx(Tools, {}), _jsx(Canvas, {})] }));
 };
 export default Border;

package/dist/components/Canvas.js

@@ -3,28 +3,14 @@ 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 Canvas = () => {
     const canvasRef = useRef(null);
     useEffect(() => {
-        const canvas = canvasRef.current;
-        if (!canvas)
-            return;
-        CanvasState.setCanvas(canvas);
-        // По умолчанию кисть
-        const brush = new Brush(canvas);
-        toolState.setTool(brush);
-        // Подключаем TextHoverTool сразу после монтирования, если нужно
-        const hoverTool = new TextHoverTool(canvas, userName);
-        hoverTool.listen();
-        // Если нужно оставить hoverTool активным
-        toolState.setTool(hoverTool);
-        // Очистка при размонтировании
-        return () => {
-            hoverTool.clearEvents();
-            brush.clearEvents();
-        };
-    }, [userName]);
-    return (_jsx("canvas", { ref: canvasRef, width: 1600, height: 900, style: { border: "1px solid black" } }));
+        if (canvasRef.current) {
+            CanvasState.setCanvas(canvasRef.current);
+            toolState.setTool(new Brush(canvasRef.current));
+        }
+    }, []);
+    return (_jsx("canvas", { ref: canvasRef, width: 1600, height: 900, style: { border: "1px solid black", display: "block" } }));
 };
 export default Canvas;

package/dist/components/Tools.js

@@ -6,7 +6,7 @@ import { Rectangle } from "../tools/Rectangle";
 import { Circle } from "../tools/Circle";
 import { TextTool } from "../tools/Text";
 import { ImageTool } from "../tools/ImageTool";
-const Tools = ({ userName = "Гость" }) => {
+const Tools = () => {
     const selectTool = (ToolClass) => {
         var _a, _b;
         if (!CanvasState.canvas)

package/dist/store/CanvasState.js

@@ -1,4 +1,3 @@
-// CanvasState.ts
 import { makeAutoObservable } from "mobx";
 class CanvasState {
     constructor() {

package/dist/store/ToolState.js

@@ -1,4 +1,3 @@
-// ToolState.ts
 import { makeAutoObservable } from "mobx";
 class ToolState {
     constructor() {

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

@@ -1,6 +1,3 @@
 import React from "react";
-interface BorderProps {
-    userName?: string;
-}
-declare const Border: React.FC<BorderProps>;
+declare const Border: React.FC;
 export default Border;

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

@@ -1,6 +1,3 @@
 import React from "react";
-interface CanvasProps {
-    userName?: string;
-}
-declare const Canvas: React.FC<CanvasProps>;
+declare const Canvas: React.FC;
 export default Canvas;

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

@@ -1,6 +1,3 @@
 import React from "react";
-interface ToolsProps {
-    userName?: string;
-}
-declare const Tools: React.FC<ToolsProps>;
+declare const Tools: React.FC;
 export default Tools;

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

package/src/components/Border.tsx

@@ -1,19 +1,12 @@
-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;
-}
-
-const Border: React.FC<BorderProps> = ({ userName = "Гость" }) => {
+const Border: React.FC = () => {
   return (
     <div style={{ position: "relative" }}>
-      <Tools userName={userName} />
-      <Canvas userName={userName} />
+      <Tools />
+      <Canvas />
     </div>
   );
 };

package/src/components/Canvas.tsx

@@ -2,45 +2,23 @@ import React, { useEffect, useRef } from "react";
 import CanvasState from "../store/CanvasState";
 import toolState from "../store/ToolState";
 import { Brush } from "../tools/Brush";
-import TextHoverTool from "../tools/TextHoverTool";
 
-interface CanvasProps {
-  userName?: string;
-}
-
-const Canvas: React.FC<CanvasProps> = ({ userName = "Гость" }) => {
+const Canvas: React.FC = () => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-
-    CanvasState.setCanvas(canvas);
-
-    // По умолчанию кисть
-    const brush = new Brush(canvas);
-    toolState.setTool(brush);
-
-    // Подключаем TextHoverTool сразу после монтирования, если нужно
-    const hoverTool = new TextHoverTool(canvas, userName);
-    hoverTool.listen();
-
-    // Если нужно оставить hoverTool активным
-    toolState.setTool(hoverTool);
-
-    // Очистка при размонтировании
-    return () => {
-      hoverTool.clearEvents();
-      brush.clearEvents();
-    };
-  }, [userName]);
+    if (canvasRef.current) {
+      CanvasState.setCanvas(canvasRef.current);
+      toolState.setTool(new Brush(canvasRef.current));
+    }
+  }, []);
 
   return (
     <canvas
       ref={canvasRef}
       width={1600}
       height={900}
-      style={{ border: "1px solid black" }}
+      style={{ border: "1px solid black", display: "block" }}
     />
   );
 };

package/src/components/Tools.tsx

@@ -7,11 +7,7 @@ import { Circle } from "../tools/Circle";
 import { TextTool } from "../tools/Text";
 import { ImageTool } from "../tools/ImageTool";
 
-interface ToolsProps {
-  userName?: string;
-}
-
-const Tools: React.FC<ToolsProps> = ({ userName = "Гость" }) => {
+const Tools: React.FC = () => {
   const selectTool = (ToolClass: any) => {
     if (!CanvasState.canvas) return;
 

package/src/store/CanvasState.ts

@@ -1,4 +1,3 @@
-// CanvasState.ts
 import { makeAutoObservable } from "mobx";
 
 class CanvasState {

package/src/store/ToolState.ts

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

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;