canvas-react-light 1.0.0

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "canvas-react-light",
+  "version": "1.0.0",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "mobx": "^6.15.0",
+    "mobx-react-lite": "^3.4.3",
+    "react": "^18.3.1"
+  }
+}

package/src/components/Border.jsx

@@ -0,0 +1,14 @@
+import { observer } from "mobx-react-lite";
+import Tools from "./Tools";
+import Canvas from "./Canvas";
+
+const Border = observer(() => {
+    return (
+        <div>
+            <Tools />
+            <Canvas />
+        </div>
+    );
+});
+
+export default Border;

package/src/components/Canvas.jsx

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from "react";
+import CanvasState from "../store/CanvasState";
+import toolState from "../store/ToolState";
+import { Brush } from "../tools/Brush";
+
+const Canvas = () => {
+    const canvasRef = useRef(null);
+
+    useEffect(() => {
+        CanvasState.setCanvas(canvasRef.current);
+        toolState.setTool(new Brush(canvasRef.current));
+    }, []);
+
+    return <canvas ref={canvasRef} width={1600} height={900} />;
+};
+
+export default Canvas;

package/src/components/Tools.jsx

@@ -0,0 +1,15 @@
+import toolState from "../store/ToolState";
+import CanvasState from "../store/CanvasState";
+import { Brush } from "../tools/Brush";
+
+const Tools = () => {
+    return (
+        <div>
+            <button onClick={() => toolState.setTool(new Brush(CanvasState.canvas))}>
+                Кисть
+            </button>
+        </div>
+    );
+};
+
+export default Tools;

package/src/index.js

@@ -0,0 +1,15 @@
+import Canvas from "./components/Canvas";
+import Tools from "./components/Tools";
+import Border from "./components/Border";
+import CanvasState from "./store/CanvasState";
+import ToolState from "./store/ToolState";
+import { Brush } from "./tools/Brush";
+
+export {
+    Canvas,
+    Tools,
+    Border,
+    CanvasState,
+    ToolState,
+    Brush
+};

package/src/store/CanvasState.js

@@ -0,0 +1,15 @@
+import { makeAutoObservable } from "mobx";
+
+class CanvasState {
+    canvas = null;
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    setCanvas(canvas) {
+        this.canvas = canvas;
+    }
+}
+
+export default new CanvasState();

package/src/store/ToolState.js

@@ -0,0 +1,15 @@
+import { makeAutoObservable } from "mobx";
+
+class ToolState {
+    tool = null;
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    setTool(tool) {
+        this.tool = tool;
+    }
+}
+
+export default new ToolState();

package/src/tools/Brush.js

@@ -0,0 +1,35 @@
+import Tool from "./Tool";
+
+export class Brush extends Tool {
+    constructor(canvas) {
+        super(canvas);
+        this.listen();
+    }
+
+    listen() {
+        this.canvas.onmousedown = this.onMouseDownHandler.bind(this);
+        this.canvas.onmousemove = this.onMouseMoveHandler.bind(this);
+        this.canvas.onmouseup = this.onMouseUpHandler.bind(this);
+    }
+
+    onMouseDownHandler(e) {
+        this.mouseDown = true;
+        this.ctx.beginPath();
+        this.ctx.moveTo(e.pageX - e.target.offsetLeft, e.pageY - e.target.offsetTop);
+    }
+
+    onMouseMoveHandler(e) {
+        if (this.mouseDown) {
+            this.draw(e.pageX - e.target.offsetLeft, e.pageY - e.target.offsetTop);
+        }
+    }
+
+    onMouseUpHandler() {
+        this.mouseDown = false;
+    }
+
+    draw(x, y) {
+        this.ctx.lineTo(x, y);
+        this.ctx.stroke();
+    }
+}

package/src/tools/Tool.js

@@ -0,0 +1,13 @@
+export default class Tool {
+    constructor(canvas) {
+        this.canvas = canvas;
+        this.ctx = canvas.getContext('2d');
+        this.destroyEvents();
+    }
+
+    destroyEvents() {
+        this.canvas.onmousemove = null;
+        this.canvas.onmousedown = null;
+        this.canvas.onmouseup = null;
+    }
+}