From d8379dcfa2e4f464204f8a532d8f88c03ebe6888 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Fri, 5 Jul 2024 13:19:14 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9D=B4=EC=A0=84=20line=EC=9D=98=20direction?=
 =?UTF-8?q?=EC=9D=B4=20=EA=B0=99=EC=9D=80=20=EA=B2=BD=EC=9A=B0=20merge,=20?=
 =?UTF-8?q?=EC=84=A0=ED=83=9D=ED=95=9C=20=EB=8F=84=ED=98=95=20=ED=9A=8C?=
 =?UTF-8?q?=EC=A0=84=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Roof2.jsx | 34 +++++++++++++++++++++++++++++++---
 src/hooks/useMode.js     | 37 +++++++++++++++++++++++++++++++++----
 src/store/canvasAtom.js  |  2 +-
 3 files changed, 65 insertions(+), 8 deletions(-)

diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index d4f11c7d..07c5b86c 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -28,6 +28,8 @@ export default function Roof2() {
   // 글자크기
   const [fontSize, setFontSize] = useRecoilState(fontSizeState)
 
+  const [angle, setAngle] = useState(0)
+
   const {
     mode,
     changeMode,
@@ -123,7 +125,7 @@ export default function Roof2() {
 
   const makeQPolygon = () => {
     if (canvas) {
-      const polygon2 = new QPolygon(
+      const polygon = new QPolygon(
         [
           { x: 100, y: 100 },
           { x: 800, y: 100 },
@@ -142,8 +144,18 @@ export default function Roof2() {
         canvas, // 필수로 넣어줘야 함
       )
 
-      canvas?.add(polygon2)
-      console.log(polygon2)
+      canvas?.add(polygon)
+    }
+  }
+
+  const rotateShape = () => {
+    if (canvas) {
+      const activeObject = canvas?.getActiveObject()
+
+      if (activeObject) {
+        activeObject.rotate(angle)
+        canvas?.renderAll()
+      }
     }
   }
 
@@ -279,8 +291,24 @@ export default function Roof2() {
             >
               QPolygon
             </button>
+            <button
+              className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
+              onClick={rotateShape}
+            >
+              회전
+            </button>
           </div>
           <div className="flex justify-center flex-col items-center">
+            <div className="m-2 p-2 w-80">
+              <RangeSlider
+                title={`각도${angle}`}
+                initValue={angle}
+                min="0"
+                step="1"
+                max="360"
+                onchange={setAngle}
+              />
+            </div>
             <div className="m-2 p-2 w-80">
               <RangeSlider
                 title={`canvas 가로 사이즈${horizontalSize}`}
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index f181e251..afa3320e 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -160,7 +160,8 @@ export function useMode() {
             },
           )
 
-          historyLines.current.push(line)
+          pushHistoryLine(line)
+
           // 라인의 끝에 점을 추가합니다.
           const endPointCircle = new fabric.Circle({
             radius: 1,
@@ -173,7 +174,6 @@ export function useMode() {
             selectable: false,
           })
 
-          canvas?.add(line)
           canvas?.add(endPointCircle)
 
           historyPoints.current.push(endPointCircle)
@@ -189,6 +189,36 @@ export function useMode() {
     })
   }
 
+  const pushHistoryLine = (line) => {
+    if (
+      historyLines.current.length > 0 &&
+      historyLines.current[historyLines.current.length - 1].direction ===
+        line.direction
+    ) {
+      // 같은 방향의 선이 두 번 연속으로 그려지면 이전 선을 제거하고, 새로운 선과 merge한다.
+
+      const lastLine = historyLines.current.pop()
+      canvas?.remove(lastLine)
+
+      const mergedLine = new QLine(
+        [lastLine.x1, lastLine.y1, line.x2, line.y2],
+        {
+          stroke: 'black',
+          strokeWidth: 2,
+          selectable: false,
+          viewLengthText: true,
+          direction: lastLine.direction,
+          fontSize: fontSize,
+        },
+      )
+      historyLines.current.push(mergedLine)
+      canvas?.add(mergedLine)
+    } else {
+      historyLines.current.push(line)
+      canvas?.add(line)
+    }
+  }
+
   const templateMode = () => {
     changeMode(canvas, Mode.EDIT)
 
@@ -343,9 +373,8 @@ export function useMode() {
       direction: getDirection(a, b),
       fontSize: fontSize,
     })
-    historyLines.current.push(line)
+    pushHistoryLine(line)
 
-    canvas?.add(line)
     canvas?.renderAll()
   }
 
diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js
index 4cdaaa32..4c66c5ff 100644
--- a/src/store/canvasAtom.js
+++ b/src/store/canvasAtom.js
@@ -7,7 +7,7 @@ export const textState = atom({
 
 export const fontSizeState = atom({
   key: 'fontSizeState',
-  default: 10,
+  default: 16,
 })
 
 export const canvasSizeState = atom({