canvas-react-easy 1.1.3 → 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

@@ -1,37 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } 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 mainRef = useRef(null);
-    const overlayRef = useRef(null);
+const Canvas = () => {
+    const canvasRef = useRef(null);
     useEffect(() => {
-        const mainCanvas = mainRef.current;
-        const overlayCanvas = overlayRef.current;
-        if (!mainCanvas || !overlayCanvas)
-            return;
-        CanvasState.setCanvas(mainCanvas);
-        // По умолчанию включаем кисть
-        const brush = new Brush(mainCanvas);
-        toolState.setTool(brush);
-        // Подключаем TextHoverTool для отображения имени пользователя
-        const hover = new TextHoverTool(mainCanvas, overlayCanvas, userName);
-        hover.listen();
-        // Ставим hover tool как текущий инструмент (можно потом переключать через кнопки)
-        toolState.setTool(hover);
-        // Очистка при размонтировании
-        return () => {
-            brush.clearEvents();
-            hover.clearEvents();
-        };
-    }, [userName]);
-    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",
-                } })] }));
+        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/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/package.json

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

package/src/components/Border.tsx

@@ -2,15 +2,11 @@ import React from "react";
 import Tools from "./Tools";
 import Canvas from "./Canvas";
 
-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,65 +2,24 @@ 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 {
-  userName?: string;
-}
-
-const Canvas: React.FC<CanvasProps> = ({ userName = "Гость" }) => {
-  const mainRef = useRef<HTMLCanvasElement>(null);
-  const overlayRef = useRef<HTMLCanvasElement>(null);
+const Canvas: React.FC = () => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
-    const mainCanvas = mainRef.current;
-    const overlayCanvas = overlayRef.current;
-    if (!mainCanvas || !overlayCanvas) return;
-
-    CanvasState.setCanvas(mainCanvas);
-
-    // По умолчанию включаем кисть
-    const brush = new Brush(mainCanvas);
-    toolState.setTool(brush);
-
-    // Подключаем TextHoverTool для отображения имени пользователя
-    const hover = new TextHoverTool(mainCanvas, overlayCanvas, userName);
-    hover.listen();
-
-    // Ставим hover tool как текущий инструмент (можно потом переключать через кнопки)
-    toolState.setTool(hover);
-
-    // Очистка при размонтировании
-    return () => {
-      brush.clearEvents();
-      hover.clearEvents();
-    };
-  }, [userName]);
+    if (canvasRef.current) {
+      CanvasState.setCanvas(canvasRef.current);
+      toolState.setTool(new Brush(canvasRef.current));
+    }
+  }, []);
 
   return (
-    <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>
+    <canvas
+      ref={canvasRef}
+      width={1600}
+      height={900}
+      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;