canvas-react-easy 1.0.7 → 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/ImageTool.js

@@ -15,21 +15,19 @@ export class ImageTool extends Tool {
     }
     listen() {
         const handler = (e) => {
-            const canvas = e.target;
-            const x = e.pageX - canvas.offsetLeft;
-            const y = e.pageY - canvas.offsetTop;
+            const evt = e;
+            const canvas = evt.target;
+            const x = evt.pageX - canvas.offsetLeft;
+            const y = evt.pageY - canvas.offsetTop;
             const url = prompt("Введите ссылку на изображение");
             if (!url)
                 return;
             const img = new Image();
             img.src = url;
-            img.onload = () => {
-                this.ctx.drawImage(img, x, y);
-            };
-            // удаляем обработчик после первого использования
-            canvas.removeEventListener("mousedown", handler);
+            img.onload = () => this.ctx.drawImage(img, x, y);
+            this.clearEvents(); // удаляем обработчики после использования
         };
-        this.canvas.addEventListener("mousedown", handler);
+        this.addListener("mousedown", handler);
     }
     onClickHandler(e) {
         return __awaiter(this, void 0, void 0, function* () {

package/dist/tools/Text.js

@@ -2,21 +2,25 @@ 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 target = e.target;
-            const x = e.pageX - target.offsetLeft;
-            const y = e.pageY - target.offsetTop;
+            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);
             }
-            // убираем событие после первого использования
-            target.removeEventListener("mousedown", handler);
+            this.clearEvents();
         };
-        this.canvas.addEventListener("mousedown", handler);
+        this.addListener("mousedown", handler);
     }
     onClickHandler(e) {
         const target = e.target;

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/tools/Tool.js

@@ -1,10 +1,23 @@
 export default class Tool {
     constructor(canvas) {
         this.canvas = canvas;
+        this.events = [];
         this.ctx = canvas.getContext("2d");
+        this.events = [];
         this.clearEvents();
     }
+    // сохраняем слушатели, чтобы потом удалять
+    addListener(type, handler) {
+        this.canvas.addEventListener(type, handler);
+        this.events.push({ type, handler });
+    }
     clearEvents() {
+        // удаляем все зарегистрированные слушатели
+        this.events.forEach(({ type, handler }) => {
+            this.canvas.removeEventListener(type, handler);
+        });
+        this.events = [];
+        // очищаем стандартные свойства
         this.canvas.onmousedown = null;
         this.canvas.onmouseup = null;
         this.canvas.onmousemove = null;

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/dist/types/tools/Tool.d.ts

@@ -2,5 +2,10 @@ export default class Tool {
     canvas: HTMLCanvasElement;
     constructor(canvas: HTMLCanvasElement);
     ctx: CanvasRenderingContext2D;
+    events: Array<{
+        type: string;
+        handler: EventListener;
+    }>;
+    addListener(type: string, handler: EventListener): void;
     clearEvents(): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-react-easy",
-  "version": "1.0.7",
+  "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/ImageTool.ts

@@ -7,25 +7,23 @@ export class ImageTool extends Tool {
   }
 
   listen() {
-    const handler = (e: MouseEvent) => {
-        const canvas = e.target as HTMLCanvasElement;
-        const x = e.pageX - canvas.offsetLeft;
-        const y = e.pageY - canvas.offsetTop;
+    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 url = prompt("Введите ссылку на изображение");
         if (!url) return;
 
         const img = new Image();
         img.src = url;
-        img.onload = () => {
-            this.ctx.drawImage(img, x, y);
-        };
+        img.onload = () => this.ctx.drawImage(img, x, y);
 
-        // удаляем обработчик после первого использования
-        canvas.removeEventListener("mousedown", handler);
+        this.clearEvents(); // удаляем обработчики после использования
     };
 
-    this.canvas.addEventListener("mousedown", handler);
+    this.addListener("mousedown", handler);
 }
 
   async onClickHandler(e: MouseEvent) {

package/src/tools/Text.ts

@@ -5,20 +5,27 @@ export class TextTool extends Tool {
     super(canvas);
     this.listen();
   }
+  fontSize: number = 24; // размер шрифта в пикселях
+  fontFamily: string = "Arial"; // шрифт по умолчанию
 
   listen() {
-    const handler = (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) {
-            this.ctx.fillText(text, x, y);
-        }
-        // убираем событие после первого использования
-        target.removeEventListener("mousedown", handler);
-    };
-    this.canvas.addEventListener("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) {

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;

package/src/tools/Tool.ts

@@ -1,12 +1,27 @@
 export default class Tool {
   constructor(public canvas: HTMLCanvasElement) {
       this.ctx = canvas.getContext("2d")!;
+      this.events = [];
       this.clearEvents();
   }
 
   ctx: CanvasRenderingContext2D;
+  events: Array<{ type: string; handler: EventListener }> = [];
+
+  // сохраняем слушатели, чтобы потом удалять
+  addListener(type: string, handler: EventListener) {
+      this.canvas.addEventListener(type, handler);
+      this.events.push({ type, handler });
+  }
 
   clearEvents() {
+      // удаляем все зарегистрированные слушатели
+      this.events.forEach(({ type, handler }) => {
+          this.canvas.removeEventListener(type, handler);
+      });
+      this.events = [];
+
+      // очищаем стандартные свойства
       this.canvas.onmousedown = null;
       this.canvas.onmouseup = null;
       this.canvas.onmousemove = null;