Merge branch 'feature/test' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into feature/test

src/components/Roof2.jsx

@@ -37,6 +37,8 @@ export default function Roof2() {
 
   const [angle, setAngle] = useState(0)
 
+  const [showControl, setShowControl] = useState(false)
+
   const {
     mode,
     changeMode,
@@ -47,6 +49,7 @@ export default function Roof2() {
     zoom,
     togglePolygonLine,
     handleOuterlinesTest2,
+    applyTemplateB,
   } = useMode()
 
   useEffect(() => {
@@ -239,6 +242,10 @@ export default function Roof2() {
     const lines = togglePolygonLine(polygon)
   }
 
+  const handleShowController = () => {
+    setShowControl(!showControl)
+  }
+
   return (
     <>
       {canvas && (
@@ -282,7 +289,7 @@ export default function Roof2() {
             <Button
               className="m-1 p-2"
               color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
-              onClick={() => {}}
+              onClick={applyTemplateB}
             >
               템플릿(B 패턴)
             </Button>
@@ -356,8 +363,21 @@ export default function Roof2() {
             <Button className="m-1 p-2" onClick={PolygonToLine}>
               PolygonToLine
             </Button>
+            <Button
+              className="m-1 p-2"
+              color={`${showControl ? 'primary' : 'default'}`}
+              onClick={handleShowController}
+            >
+              canvas 컨트롤러 {`${showControl ? '숨기기' : '보이기'}`}
+            </Button>
           </div>
-          <div className="flex justify-center flex-col items-center">
+          <div
+            className={
+              showControl
+                ? `flex justify-center flex-col items-center`
+                : `hidden`
+            }
+          >
             <div className="m-2 p-2 w-80">
               <RangeSlider
                 title={`각도${angle}`}

src/hooks/useMode.js

@@ -6,6 +6,9 @@ import {
   rearrangeArray,
   findTopTwoIndexesByDistance,
   getDirection,
+  getOddEvenPoints,
+  findLongestDistancePair,
+  getCenterPoint,
 } from '@/util/canvas-util'
 import { useRecoilState, useSetRecoilState } from 'recoil'
 import {
@@ -201,24 +204,47 @@ export function useMode() {
     }
   }
 
+  /**
+   * 마우스로 그린 점 기준으로 외벽선을 완성시켜준다.
+   * makePolygon 함수에 포함되어있던 내용을 다른 템플릿 적용에서도 사용할수 있도록 함수로 대체
+   */
+  const drawWallPolygon = () => {
+    const firstPoint = historyPoints.current[0]
+    const lastPoint = historyPoints.current[historyPoints.current.length - 1]
+    historyPoints.current.forEach((point) => {
+      canvas?.remove(point)
+    })
+    drawLineWithLength(lastPoint, firstPoint)
+    points.current = []
+    historyPoints.current = []
+
+    // handleOuterlines()
+    const wall = makePolygon()
+    setWall(wall)
+
+    return wall
+  }
+
   const templateMode = () => {
     changeMode(canvas, Mode.EDIT)
 
     if (historyPoints.current.length >= 4) {
-      const firstPoint = historyPoints.current[0]
+      drawWallPolygon()
-      const lastPoint = historyPoints.current[historyPoints.current.length - 1]
+      //아래 내용 drawWallPolygon()으로 대체
-      historyPoints.current.forEach((point) => {
+      // const firstPoint = historyPoints.current[0]
-        canvas?.remove(point)
+      // const lastPoint = historyPoints.current[historyPoints.current.length - 1]
-      })
+      // historyPoints.current.forEach((point) => {
-      drawLineWithLength(lastPoint, firstPoint)
+      //   canvas?.remove(point)
-      points.current = []
+      // })
-      historyPoints.current = []
+      // drawLineWithLength(lastPoint, firstPoint)
+      // points.current = []
+      // historyPoints.current = []
+
+      // // handleOuterlines()
+      // const wall = makePolygon()
+      // setWall(wall)
 
-      // handleOuterlines()
       handleOuterlinesTest() //외곽선 그리기 테스트
-
-      const wall = makePolygon()
-      setWall(wall)
     }
   }
 
@@ -895,6 +921,171 @@ export function useMode() {
     return rtnLines
   }
 
+  /**
+   * 템플릿 B 적용
+   * 1. 모드 체인지
+   * 2. 외벽선 그리기 마무리
+   */
+  const applyTemplateB = () => {
+    changeMode(canvas, Mode.EDIT)
+    const polygon = drawWallPolygon()
+    handleOuterLineTemplateB(polygon)
+  }
+
+  const handleOuterLineTemplateB = (polygon) => {
+    polygon.points.forEach((point, index) => {
+      let x2 =
+        index === polygon.points.length - 1
+          ? polygon.points[0].x
+          : polygon.points[index + 1].x
+      let y2 =
+        index === polygon.points.length - 1
+          ? polygon.points[0].y
+          : polygon.points[index + 1].y
+
+      let x1 = point.x
+      let y1 = point.y
+      if (index % 2 === 0) {
+        if (polygon.lines[index].direction === 'bottom') {
+          y1 = y1 - 50
+          y2 = y2 + 50
+          x1 = x1 - 20
+          x2 = x2 - 20
+        } else {
+          y1 = y1 + 50
+          y2 = y2 - 50
+          x1 = x1 + 20
+          x2 = x2 + 20
+        }
+      } else {
+        if (polygon.lines[index].direction === 'right') {
+          x1 = x1 - 20
+          x2 = x2 + 20
+          y1 = y1 + 50
+          y2 = y2 + 50
+        } else {
+          x1 = x1 + 20
+          x2 = x2 - 20
+          y1 = y1 - 50
+          y2 = y2 - 50
+        }
+      }
+
+      switch (polygon.shape) {
+        case 1:
+          break
+        case 2:
+          const centerPoint =
+            polygon.points[3].y +
+            (polygon.points[2].y - polygon.points[3].y) / 2
+          if (index === 0) {
+            const subLine = new QLine(
+              [
+                point.x - 20,
+                polygon.points[0].y +
+                  (polygon.points[1].y - polygon.points[0].y) / 2,
+                polygon.points[5].x + 20,
+                polygon.points[0].y +
+                  (polygon.points[1].y - polygon.points[0].y) / 2,
+              ],
+              {
+                stroke: 'blue',
+                strokeWidth: 2,
+                selectable: false,
+                fontSize: fontSize,
+              },
+            )
+            canvas.add(subLine)
+          }
+          if (index === 3) {
+            x2 = x2 + 20
+
+            const subLine = new QLine([x2, y2, x2, centerPoint], {
+              stroke: 'blue',
+              strokeWidth: 2,
+              selectable: false,
+              fontSize: fontSize,
+            })
+            canvas.add(subLine)
+          }
+          if (index === 4) {
+            y1 =
+              point.y +
+              (polygon.points[index - 2].y - polygon.points[index - 1].y) / 2
+
+            const subLine = new QLine(
+              [point.x, centerPoint, polygon.points[2].x + 20, centerPoint],
+              {
+                stroke: 'blue',
+                strokeWidth: 2,
+                selectable: false,
+                fontSize: fontSize,
+              },
+            )
+            canvas.add(subLine)
+
+            const subVerticalLine = new QLine(
+              [
+                getCenterPoint(point.x, polygon.points[2].x + 20),
+                polygon.points[3].y - 50,
+                getCenterPoint(point.x, polygon.points[2].x + 20),
+                centerPoint,
+              ],
+              {
+                stroke: 'black',
+                strokeWidth: 2,
+                strokeDashArray: [5, 5],
+                selectable: false,
+                fontSize: fontSize,
+              },
+            )
+            canvas.add(subVerticalLine)
+          }
+
+          if (index === 5) {
+            const centeredPoint = getCenterPoint(
+              polygon.points[0].x,
+              polygon.points[5].x,
+            )
+            const verticalSubLine = new QLine(
+              [
+                centeredPoint,
+                polygon.points[0].y - 50,
+                centeredPoint,
+                polygon.points[1].y + 50,
+              ],
+              {
+                stroke: 'black',
+                strokeWidth: 2,
+                strokeDashArray: [5, 5],
+                selectable: false,
+                fontSize: fontSize,
+              },
+            )
+
+            canvas.add(verticalSubLine)
+          }
+
+          break
+        case 3:
+          break
+        case 4:
+          break
+        default:
+          break
+      }
+
+      const line = new QLine([x1, y1, x2, y2], {
+        stroke: 'blue',
+        strokeWidth: 2,
+        selectable: false,
+        fontSize: fontSize,
+      })
+      canvas.add(line)
+    })
+    canvas.renderAll()
+  }
+
   return {
     mode,
     changeMode,
@@ -905,5 +1096,6 @@ export function useMode() {
     zoom,
     togglePolygonLine,
     handleOuterlinesTest2,
+    applyTemplateB,
   }
 }

src/util/canvas-util.js

@@ -74,6 +74,24 @@ export function anchorWrapper(anchorIndex, fn) {
   }
 }
 
+/**
+ * 두 좌표의 중간점 좌표를 계산해서 반환하는 함수
+ * @param {number} point1
+ * @param {number} point2 방향에 상관없이 항상 큰 값이 뒤에 위치해야 함
+ * @returns
+ */
+export const getCenterPoint = (point1, point2) => {
+  return point1 + (point2 - point1) / 2
+}
+
+/**
+ * 두 점 사이의 거리를 계산하는 함수
+ * @param {*} x1 첫번째 점 x좌표
+ * @param {*} y1 첫번째 점 y좌표
+ * @param {*} x2 두번째 점 x좌표
+ * @param {*} y2 두번째 점 y좌표
+ * @returns
+ */
 export const getDistance = (x1, y1, x2, y2) => {
   return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
 }