feat/draw

src/components/canvas/Page.tsx

@@ -1,5 +1,5 @@
 import { PageType } from "../../type/page.type";
-import DrawArea from "./DrawArea";
+import PageBody from "./PageBody";
 import PageHeader from "./PageHeader";
 
 interface PageProps {
@@ -10,7 +10,7 @@ function Page({ page }: PageProps) {
   return (
     <article className="min-w-[80%] max-w-[90%] flex flex-col justify-center items-center gap-y-2">
       <PageHeader page={page} />
-      <DrawArea page={page} />
+      <PageBody page={page} />
     </article>
   );
 }

src/components/canvas/DrawArea.tsx → src/components/canvas/PageBody.tsx

@@ -1,28 +1,35 @@
+import { useDrawStore } from "../../store/draw.store";
 import { ChartType } from "../../type/chart.type";
+import { DrawType } from "../../type/draw.type";
 import { TextBoxType } from "../../type/element.type";
 import { PageType } from "../../type/page.type";
 import Chart from "../elements/Chart/Chart";
+import Draw from "../elements/Draw/Draw";
+import DrawArea from "../elements/Draw/DrawArea";
 import TextBox from "../elements/TextBox/TextBox";
 
 interface DrawAreaProps {
   page: PageType;
 }
 
-function DrawArea({ page }: DrawAreaProps) {
+function PageBody({ page }: DrawAreaProps) {
+  const isActive = useDrawStore((state) => state.isActive);
+
   return (
-    <div className="w-full aspect-video bg-white">
+    <div className="w-full aspect-video bg-white relative">
+      {isActive && <DrawArea />}
       {page.elements.map((element) => {
         if (!element) return null;
-
+        console.log("==== element ====", element);
         if (element.type === "textBox")
           return <TextBox key={element.id} textBox={element as TextBoxType} />;
         else if (element.type === "chart")
           return <Chart key={element.id} chart={element as ChartType} />;
-
-        return null;
+        else if (element.type === "draw")
+          return <Draw key={element.id} draw={element as DrawType} />;
       })}
     </div>
   );
 }
 
-export default DrawArea;
+export default PageBody;

src/components/elements/Draw/Draw.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useRef, useState } from "react";
+import { useCanvasStore } from "../../../store/canvas.store";
+import { useDrawStore } from "../../../store/draw.store";
+import { DrawType } from "../../../type/draw.type";
+import ElementWrapper from "../ElementWrapper/ElementWrapper";
+
+interface DrawProps {
+  draw: DrawType;
+}
+
+function Draw({ draw }: DrawProps) {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const contextRef = useRef<CanvasRenderingContext2D | null>(null);
+  const [ctx, setCtx] = useState<CanvasRenderingContext2D | null>(null);
+
+  const updateElement = useCanvasStore((state) => state.updateElement);
+
+  const tool = useDrawStore((state) => state.activedTool);
+  const isActive = useDrawStore((state) => state.isActive);
+
+  const initCanvas = () => {
+    if (!canvasRef || !canvasRef.current) return;
+
+    const canvas = canvasRef.current;
+    const canvasCtx = canvas.getContext("2d");
+
+    if (!canvasCtx || !isActive || !tool) return;
+
+    canvas.width = draw.size.width;
+    canvas.height = draw.size.height;
+
+    canvasCtx.strokeStyle = draw.style.color;
+    canvasCtx.lineWidth = draw.style.width;
+    contextRef.current = canvasCtx;
+
+    setCtx(canvasCtx);
+  };
+
+  useEffect(() => {
+    if (ctx) return;
+    initCanvas();
+  }, [ctx]);
+
+  useEffect(() => {
+    if (!ctx || draw.points.length === 0) return;
+
+    const minX = Math.min(...draw.points.map((p) => p.x));
+    const minY = Math.min(...draw.points.map((p) => p.y));
+
+    ctx.beginPath();
+
+    ctx.moveTo(draw.points[0].x - minX, draw.points[0].y - minY);
+    draw.points.forEach(({ x, y }) => ctx.lineTo(x - minX, y - minY));
+
+    ctx.strokeStyle = draw.style.color;
+    ctx.lineWidth = draw.style.width;
+    ctx.stroke();
+  }, [ctx, draw]);
+
+  return (
+    <ElementWrapper element={draw}>
+      <canvas ref={canvasRef} />
+    </ElementWrapper>
+  );
+}
+
+export default Draw;