canvas-react-easy 1.0.0

package/dist/components/Border.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from "mobx-react-lite";
+import Tools from "./Tools";
+import Canvas from "./Canvas";
+const Border = observer(() => {
+    return (_jsxs("div", { children: [_jsx(Tools, {}), _jsx(Canvas, {})] }));
+});
+export default Border;

package/dist/components/Canvas.js

@@ -0,0 +1,16 @@
+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";
+const Canvas = () => {
+    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 });
+};
+export default Canvas;

package/dist/components/Tools.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import toolState from "../store/ToolState";
+import CanvasState from "../store/CanvasState";
+import { Brush } from "../tools/Brush";
+const Tools = () => {
+    return (_jsx("div", { children: _jsx("button", { onClick: () => {
+                if (CanvasState.canvas) {
+                    toolState.setTool(new Brush(CanvasState.canvas));
+                }
+            }, children: "\u041A\u0438\u0441\u0442\u044C" }) }));
+};
+export default Tools;

package/dist/index.js

@@ -0,0 +1,7 @@
+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/dist/store/CanvasState.js

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

package/dist/store/ToolState.js

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

package/dist/tools/Brush.js

@@ -0,0 +1,32 @@
+import Tool from "./Tool";
+export class Brush extends Tool {
+    constructor(canvas) {
+        super(canvas);
+        this.mouseDown = false;
+        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();
+        const target = e.target;
+        this.ctx.moveTo(e.pageX - target.offsetLeft, e.pageY - target.offsetTop);
+    }
+    onMouseMoveHandler(e) {
+        if (!this.mouseDown)
+            return;
+        const target = e.target;
+        this.draw(e.pageX - target.offsetLeft, e.pageY - target.offsetTop);
+    }
+    onMouseUpHandler() {
+        this.mouseDown = false;
+    }
+    draw(x, y) {
+        this.ctx.lineTo(x, y);
+        this.ctx.stroke();
+    }
+}

package/dist/tools/Tool.js

@@ -0,0 +1,15 @@
+export default class Tool {
+    constructor(canvas) {
+        this.canvas = canvas;
+        const context = canvas.getContext("2d");
+        if (!context)
+            throw new Error("Canvas context is null");
+        this.ctx = context;
+        this.destroyEvents();
+    }
+    destroyEvents() {
+        this.canvas.onmousemove = null;
+        this.canvas.onmousedown = null;
+        this.canvas.onmouseup = null;
+    }
+}

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

@@ -0,0 +1,2 @@
+declare const Border: React.MemoExoticComponent<React.ForwardRefExoticComponent<any>>;
+export default Border;

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

@@ -0,0 +1,2 @@
+declare const Canvas: () => any;
+export default Canvas;

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

@@ -0,0 +1,2 @@
+declare const Tools: () => any;
+export default Tools;

package/dist/types/index.d.ts

@@ -0,0 +1,7 @@
+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/dist/types/store/CanvasState.d.ts

@@ -0,0 +1,7 @@
+declare class CanvasState {
+    canvas: HTMLCanvasElement | null;
+    constructor();
+    setCanvas(canvas: HTMLCanvasElement): void;
+}
+declare const _default: CanvasState;
+export default _default;

package/dist/types/store/ToolState.d.ts

@@ -0,0 +1,7 @@
+declare class ToolState {
+    tool: Tool | null;
+    constructor();
+    setTool(tool: Tool): void;
+}
+declare const _default: ToolState;
+export default _default;

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

@@ -0,0 +1,10 @@
+import Tool from "./Tool";
+export declare class Brush extends Tool {
+    private mouseDown;
+    constructor(canvas: HTMLCanvasElement);
+    listen(): void;
+    onMouseDownHandler(e: MouseEvent): void;
+    onMouseMoveHandler(e: MouseEvent): void;
+    onMouseUpHandler(): void;
+    draw(x: number, y: number): void;
+}

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

@@ -0,0 +1,6 @@
+export default class Tool {
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    constructor(canvas: HTMLCanvasElement);
+    destroyEvents(): void;
+}

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "canvas-react-easy",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "license": "MIT",
+  "peerDependencies": {
+    "mobx": "^6.0.0",
+    "mobx-react-lite": "^3.0.0",
+    "react": "^18.0.0"
+  },
+  "scripts": {
+    "build": "tsc"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  }
+}

package/src/components/Border.tsx

@@ -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.tsx

@@ -0,0 +1,19 @@
+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<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    if (canvasRef.current) {
+      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.tsx

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

package/src/index.ts

@@ -0,0 +1,10 @@
+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.ts

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

package/src/store/ToolState.ts

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

package/src/tools/Brush.ts

@@ -0,0 +1,40 @@
+import Tool from "./Tool";
+
+export class Brush extends Tool {
+  private mouseDown = false;
+
+  constructor(canvas: HTMLCanvasElement) {
+    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: MouseEvent) {
+    this.mouseDown = true;
+    this.ctx.beginPath();
+
+    const target = e.target as HTMLCanvasElement;
+    this.ctx.moveTo(e.pageX - target.offsetLeft, e.pageY - target.offsetTop);
+  }
+
+  onMouseMoveHandler(e: MouseEvent) {
+    if (!this.mouseDown) return;
+
+    const target = e.target as HTMLCanvasElement;
+    this.draw(e.pageX - target.offsetLeft, e.pageY - target.offsetTop);
+  }
+
+  onMouseUpHandler() {
+    this.mouseDown = false;
+  }
+
+  draw(x: number, y: number) {
+    this.ctx.lineTo(x, y);
+    this.ctx.stroke();
+  }
+}

package/src/tools/Tool.ts

@@ -0,0 +1,19 @@
+export default class Tool {
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+  
+    constructor(canvas: HTMLCanvasElement) {
+      this.canvas = canvas;
+      const context = canvas.getContext("2d");
+      if (!context) throw new Error("Canvas context is null");
+      this.ctx = context;
+      this.destroyEvents();
+    }
+  
+    destroyEvents() {
+      this.canvas.onmousemove = null;
+      this.canvas.onmousedown = null;
+      this.canvas.onmouseup = null;
+    }
+  }
+  

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "module": "ESNext",
+    "declaration": true,
+    "declarationDir": "dist/types",
+    "outDir": "dist",
+    "jsx": "react-jsx",
+    "strict": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src"]
+}