canvas-react-easy 1.0.9 → 1.1.0

package/dist/components/Border.js

@@ -1,8 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { observer } from "mobx-react-lite";
+import { useEffect } from "react";
 import Tools from "./Tools";
 import Canvas from "./Canvas";
-const Border = observer(() => {
-    return (_jsxs("div", { children: [_jsx(Tools, {}), _jsx(Canvas, {})] }));
-});
+import toolState from "../store/ToolState";
+import CanvasState from "../store/CanvasState";
+import { TextHoverTool } from "../tools/TextHoverTool";
+const Border = ({ userName = "Гость" }) => {
+    useEffect(() => {
+        var _a;
+        // активируем инструмент "имя пользователя" сразу после монтирования
+        if (CanvasState.canvas) {
+            (_a = toolState.tool) === null || _a === void 0 ? void 0 : _a.clearEvents();
+            const tool = new TextHoverTool(CanvasState.canvas, userName);
+            tool.listen();
+            toolState.setTool(tool);
+        }
+    }, [userName]);
+    return (_jsxs("div", { style: { position: "relative" }, children: [_jsx(Tools, { userName: userName }), _jsx(Canvas, {})] }));
+};
 export default Border;

package/dist/components/Tools.js

@@ -6,7 +6,8 @@ import { Rectangle } from "../tools/Rectangle";
 import { Circle } from "../tools/Circle";
 import { TextTool } from "../tools/Text";
 import { ImageTool } from "../tools/ImageTool";
-const Tools = () => {
+const Tools = ({ userName = "Гость" }) => {
+    // универсальный выбор инструмента
     const selectTool = (ToolClass) => {
         var _a, _b;
         if (!CanvasState.canvas)
@@ -18,6 +19,6 @@ const Tools = () => {
         (_b = tool.listen) === null || _b === void 0 ? void 0 : _b.call(tool); // если инструмент имеет метод listen
         toolState.setTool(tool);
     };
-    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" })] }));
+    return (_jsxs("div", { style: { marginBottom: "10px", display: "flex", gap: "5px" }, 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/Text.js

@@ -2,19 +2,22 @@ import Tool from "./Tool";
 export class TextTool extends Tool {
     constructor(canvas) {
         super(canvas);
+        this.fontSize = 24; // размер шрифта в пикселях
+        this.fontFamily = "Arial"; // шрифт по умолчанию
         this.listen();
     }
     listen() {
         const handler = (e) => {
-            const evt = e; // приводим Event к MouseEvent
+            const evt = e;
             const canvas = evt.target;
             const x = evt.pageX - canvas.offsetLeft;
             const y = evt.pageY - canvas.offsetTop;
             const text = prompt("Введите текст");
             if (text) {
+                // Устанавливаем шрифт перед рисованием
+                this.ctx.font = `${this.fontSize}px ${this.fontFamily}`;
                 this.ctx.fillText(text, x, y);
             }
-            // удаляем обработчик после первого использования
             this.clearEvents();
         };
         this.addListener("mousedown", handler);

package/dist/tools/TextHoverTool.js

@@ -0,0 +1,43 @@
+import Tool from "./Tool";
+export class TextHoverTool extends Tool {
+    constructor(canvas, 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");
+    }
+    listen() {
+        const moveHandler = (evt) => {
+            const e = evt; // кастим к 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 TextHoverTool;

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

@@ -1,4 +1,6 @@
-declare const Border: (() => import("react/jsx-runtime").JSX.Element) & {
-    displayName: string;
-};
+import React from "react";
+interface BorderProps {
+    userName?: string;
+}
+declare const Border: React.FC<BorderProps>;
 export default Border;

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

@@ -1,2 +1,6 @@
-declare const Tools: () => import("react/jsx-runtime").JSX.Element;
+import React from "react";
+interface ToolsProps {
+    userName?: string;
+}
+declare const Tools: React.FC<ToolsProps>;
 export default Tools;

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

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

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

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

package/package.json

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

package/src/components/Border.tsx

@@ -1,14 +1,31 @@
-import { observer } from "mobx-react-lite";
+import React, { useEffect } 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 = "Гость" }) => {
+  useEffect(() => {
+    // активируем инструмент "имя пользователя" сразу после монтирования
+    if (CanvasState.canvas) {
+      toolState.tool?.clearEvents();
+      const tool = new TextHoverTool(CanvasState.canvas, userName);
+      tool.listen();
+      toolState.setTool(tool);
+    }
+  }, [userName]);
 
-const Border = observer(() => {
   return (
-    <div>
-      <Tools />
+    <div style={{ position: "relative" }}>
+      <Tools userName={userName} />
       <Canvas />
     </div>
   );
-});
+};
 
 export default Border;

package/src/components/Tools.tsx

@@ -7,8 +7,12 @@ import { Circle } from "../tools/Circle";
 import { TextTool } from "../tools/Text";
 import { ImageTool } from "../tools/ImageTool";
 
-const Tools = () => {
+interface ToolsProps {
+  userName?: string;
+}
 
+const Tools: React.FC<ToolsProps> = ({ userName = "Гость" }) => {
+  // универсальный выбор инструмента
   const selectTool = (ToolClass: any) => {
     if (!CanvasState.canvas) return;
 
@@ -19,17 +23,15 @@ const Tools = () => {
     const tool = new ToolClass(CanvasState.canvas);
     tool.listen?.(); // если инструмент имеет метод listen
     toolState.setTool(tool);
-};
+  };
 
-  
   return (
-    <div style={{ marginBottom: "10px" }}>
+    <div style={{ marginBottom: "10px", display: "flex", gap: "5px" }}>
       <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/tools/Text.ts

@@ -5,25 +5,28 @@ export class TextTool extends Tool {
     super(canvas);
     this.listen();
   }
+  fontSize: number = 24; // размер шрифта в пикселях
+  fontFamily: string = "Arial"; // шрифт по умолчанию
 
   listen() {
-    const handler = (e: Event) => {
-        const evt = e as MouseEvent; // приводим Event к MouseEvent
-        const canvas = evt.target as HTMLCanvasElement;
-        const x = evt.pageX - canvas.offsetLeft;
-        const y = evt.pageY - canvas.offsetTop;
-
-        const text = prompt("Введите текст");
-        if (text) {
-            this.ctx.fillText(text, x, y);
-        }
-
-        // удаляем обработчик после первого использования
-        this.clearEvents();
-    };
-
-    this.addListener("mousedown", handler);
-}
+      const handler = (e: Event) => {
+          const evt = e as MouseEvent;
+          const canvas = evt.target as HTMLCanvasElement;
+          const x = evt.pageX - canvas.offsetLeft;
+          const y = evt.pageY - canvas.offsetTop;
+
+          const text = prompt("Введите текст");
+          if (text) {
+              // Устанавливаем шрифт перед рисованием
+              this.ctx.font = `${this.fontSize}px ${this.fontFamily}`;
+              this.ctx.fillText(text, x, y);
+          }
+
+          this.clearEvents();
+      };
+
+      this.addListener("mousedown", handler);
+  }
 
   onClickHandler(e: MouseEvent) {
     const target = e.target as HTMLCanvasElement;

package/src/tools/TextHoverTool.ts

@@ -0,0 +1,58 @@
+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 TextHoverTool;