canvas-react-easy 1.1.0 → 1.1.2

package/dist/components/Border.js

@@ -1,21 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { 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";
 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, {})] }));
+    return (_jsxs("div", { style: { position: "relative" }, children: [_jsx(Tools, { userName: userName }), _jsx(Canvas, { userName: userName })] }));
 };
 export default Border;

package/dist/components/Canvas.js

@@ -3,14 +3,28 @@ import { useEffect, useRef } from "react";
 import CanvasState from "../store/CanvasState";
 import toolState from "../store/ToolState";
 import { Brush } from "../tools/Brush";
-const Canvas = () => {
+import TextHoverTool from "../tools/TextHoverTool";
+const Canvas = ({ userName = "Гость" }) => {
     const canvasRef = useRef(null);
     useEffect(() => {
-        if (canvasRef.current) {
-            CanvasState.setCanvas(canvasRef.current);
-            toolState.setTool(new Brush(canvasRef.current));
-        }
-    }, []);
-    return _jsx("canvas", { ref: canvasRef, width: 1600, height: 900 });
+        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" } }));
 };
 export default Canvas;

package/dist/components/Tools.js

@@ -7,16 +7,13 @@ import { Circle } from "../tools/Circle";
 import { TextTool } from "../tools/Text";
 import { ImageTool } from "../tools/ImageTool";
 const Tools = ({ userName = "Гость" }) => {
-    // универсальный выбор инструмента
     const selectTool = (ToolClass) => {
         var _a, _b;
         if (!CanvasState.canvas)
             return;
-        // очищаем старый инструмент
         (_a = toolState.tool) === null || _a === void 0 ? void 0 : _a.clearEvents();
-        // создаём новый инструмент и подключаем слушатели
         const tool = new ToolClass(CanvasState.canvas);
-        (_b = tool.listen) === null || _b === void 0 ? void 0 : _b.call(tool); // если инструмент имеет метод listen
+        (_b = tool.listen) === null || _b === void 0 ? void 0 : _b.call(tool);
         toolState.setTool(tool);
     };
     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" })] }));

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

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

package/package.json

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

package/src/components/Border.tsx

@@ -3,27 +3,17 @@ import Tools from "./Tools";
 import Canvas from "./Canvas";
 import toolState from "../store/ToolState";
 import CanvasState from "../store/CanvasState";
-import { TextHoverTool } from "../tools/TextHoverTool";
+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]);
-
   return (
     <div style={{ position: "relative" }}>
       <Tools userName={userName} />
-      <Canvas />
+      <Canvas userName={userName} />
     </div>
   );
 };

package/src/components/Canvas.tsx

@@ -1,19 +1,48 @@
-import { useEffect, useRef } from "react";
+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";
 
-const Canvas = () => {
+interface CanvasProps {
+  userName?: string;
+}
+
+const Canvas: React.FC<CanvasProps> = ({ userName = "Гость" }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
-    if (canvasRef.current) {
-      CanvasState.setCanvas(canvasRef.current);
-      toolState.setTool(new Brush(canvasRef.current));
-    }
-  }, []);
+    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 <canvas ref={canvasRef} width={1600} height={900} />;
+  return (
+    <canvas
+      ref={canvasRef}
+      width={1600}
+      height={900}
+      style={{ border: "1px solid black" }}
+    />
+  );
 };
 
 export default Canvas;

package/src/components/Tools.tsx

@@ -12,16 +12,13 @@ interface ToolsProps {
 }
 
 const Tools: React.FC<ToolsProps> = ({ userName = "Гость" }) => {
-  // универсальный выбор инструмента
   const selectTool = (ToolClass: any) => {
     if (!CanvasState.canvas) return;
 
-    // очищаем старый инструмент
     toolState.tool?.clearEvents();
 
-    // создаём новый инструмент и подключаем слушатели
     const tool = new ToolClass(CanvasState.canvas);
-    tool.listen?.(); // если инструмент имеет метод listen
+    tool.listen?.();
     toolState.setTool(tool);
   };