From 40c68338abd1b52002874243c6ccb776f64354fe Mon Sep 17 00:00:00 2001
From: dm1sh <me@dmitriy.icu>
Date: Sat, 4 Sep 2021 04:57:54 +0300
Subject: [PATCH] Added click event wrapper in Canvas component

---
 src/components/BuildingPlan.tsx |  9 ++++++++-
 src/components/Canvas.tsx       | 33 ++++++++++++++++++++++++++-------
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/components/BuildingPlan.tsx b/src/components/BuildingPlan.tsx
index 25901da..5337c7d 100644
--- a/src/components/BuildingPlan.tsx
+++ b/src/components/BuildingPlan.tsx
@@ -50,7 +50,14 @@ export const BuildingPlan = ({ width, height }: BuildingPlanProps) => {
 
   return (
     <>
-      <Canvas height={height} width={width} draw={draw} />
+      <Canvas
+        clickCb={(x, y) => {
+          console.log(`x: ${x}, y: ${y}`);
+        }}
+        height={height}
+        width={width}
+        draw={draw}
+      />
     </>
   );
 };
diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx
index df192f7..90d510f 100644
--- a/src/components/Canvas.tsx
+++ b/src/components/Canvas.tsx
@@ -1,10 +1,15 @@
-import { HTMLProps, useEffect, useRef } from "react";
+import { HTMLProps, useEffect, useRef, MouseEvent, useCallback } from "react";
 
 export type DrawFT = (ctx: CanvasRenderingContext2D) => void;
 
-export type CanvasProps = HTMLProps<HTMLCanvasElement> & { draw: DrawFT };
+export type ClickCb = (x: number, y: number) => void;
 
-export const useCanvas = (draw: DrawFT) => {
+export type CanvasProps = HTMLProps<HTMLCanvasElement> & {
+  draw: DrawFT;
+  clickCb: ClickCb;
+};
+
+export const useCanvas = (draw: DrawFT, clickCb: ClickCb) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
@@ -18,11 +23,25 @@ export const useCanvas = (draw: DrawFT) => {
     draw(context);
   }, [draw]);
 
-  return canvasRef;
+  const onClick = useCallback(
+    (event: MouseEvent<HTMLCanvasElement>) => {
+      const canvas = canvasRef.current;
+      if (!canvas) throw new Error("Canvas ref not set");
+      const rect = canvas.getBoundingClientRect();
+
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+
+      clickCb(x, y);
+    },
+    [canvasRef.current]
+  );
+
+  return { canvasRef, onClick };
 };
 
-export const Canvas = ({ draw, ...props }: CanvasProps) => {
-  const canvasRef = useCanvas(draw);
+export const Canvas = ({ draw, clickCb, ...props }: CanvasProps) => {
+  const { canvasRef, onClick } = useCanvas(draw, clickCb);
 
-  return <canvas ref={canvasRef} {...props} />;
+  return <canvas onClick={onClick} ref={canvasRef} {...props} />;
 };