From 4dbebf4cf97eed0bf7a5cf3559ca46bdf3419718 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Wed, 31 Jul 2024 10:58:06 +0900
Subject: [PATCH] =?UTF-8?q?import=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Roof2.jsx | 69 +++++++++++++++++++++++++++++-----------
 1 file changed, 50 insertions(+), 19 deletions(-)

diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 473ca435..e384901e 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -5,12 +5,11 @@ import { Button } from '@nextui-org/react'
 import QRect from '@/components/fabric/QRect'
 
 import RangeSlider from './ui/RangeSlider'
-import { useRecoilState } from 'recoil'
-import { canvasSizeState, fontSizeState, sortedPolygonArray } from '@/store/canvasAtom'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { canvasSizeState, fontSizeState, roofState, sortedPolygonArray } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { getCanvasState, insertCanvasState } from '@/lib/canvas'
-import { calculateIntersection2 } from '@/util/canvas-util'
-import { CustomLine } from '@/components/fabric/QLine'
+import { calculateIntersection } from '@/util/canvas-util'
 import { QPolygon } from '@/components/fabric/QPolygon'
 
 export default function Roof2() {
@@ -32,6 +31,8 @@ export default function Roof2() {
 
   const [showControl, setShowControl] = useState(false)
 
+  const roof = useRecoilValue(roofState)
+
   const {
     mode,
     changeMode,
@@ -228,23 +229,53 @@ export default function Roof2() {
       { x: 1078, y: 92 },
     ]
 
-    if (canvas) {
-      const polygon = new QPolygon(eightPoint, {
-        fill: 'transparent',
-        stroke: 'black',
-        strokeWidth: 1,
-        selectable: true,
-        fontSize: fontSize,
-        name: 'QPolygon1',
-      })
+    const twelvePoint = [
+      { x: 195, y: 166 },
+      { x: 195, y: 466 },
+      { x: 395, y: 466 },
+      { x: 395, y: 766 },
+      { x: 545, y: 766 },
+      { x: 545, y: 466 },
+      { x: 695, y: 466 },
+      { x: 695, y: 666 },
+      { x: 845, y: 666 },
+      { x: 845, y: 466 },
+      { x: 995, y: 466 },
+      { x: 995, y: 166 },
+    ]
 
-      canvas?.add(polygon)
+    const complicatedType = [
+      { x: 100, y: 100 },
+      { x: 100, y: 1100 },
+      { x: 400, y: 1100 },
+      { x: 400, y: 800 },
+      { x: 700, y: 800 },
+      { x: 700, y: 1100 },
+      { x: 1000, y: 1100 },
+      { x: 1000, y: 600 },
+      { x: 700, y: 600 },
+      { x: 700, y: 300 },
+      { x: 1000, y: 300 },
+      { x: 1000, y: 100 },
+    ]
 
-      handleOuterlinesTest2(polygon)
+    const types = [type1, type2, type3, type4, type1A, type1B, eightPoint, eightPoint2, eightPoint3, eightPoint4, twelvePoint]
 
-      // const lines = togglePolygonLine(polygon)
-      // togglePolygonLine(lines[0])
-    }
+    const polygon = new QPolygon(type1B, {
+      fill: 'transparent',
+      stroke: 'black',
+      strokeWidth: 1,
+      selectable: true,
+      fontSize: fontSize,
+      name: 'QPolygon1',
+    })
+
+    canvas?.add(polygon)
+
+    handleOuterlinesTest2(polygon)
+
+    // const lines = togglePolygonLine(polygon)
+    // togglePolygonLine(lines[0])
   }
 
   const rotateShape = () => {
@@ -277,7 +308,7 @@ export default function Roof2() {
       canvas?.add(line)
       canvas?.add(line2)
 
-      const interSectionPoint = calculateIntersection2(line, line2)
+      const interSectionPoint = calculateIntersection(line, line2)
 
       if (interSectionPoint) {
         const circle = new fabric.Circle({