변별로 설정 작업중

docs/dictionary.txt

@@ -18,6 +18,7 @@
 출폭: offset
 폭: width
 경사(구배): pitch
+각도: degree
 이구배: doublePitch
 소매: sleeve
 개구: openSpace

src/common/common.js

@@ -115,5 +115,6 @@ export const INPUT_TYPE = {
 
 export const POLYGON_TYPE = {
   ROOF: 'roof',
+  WALL: 'wall',
   TRESTLE: 'trestle',
 }

src/components/Roof2.jsx

@@ -39,7 +39,7 @@ import QEmptyContextMenu from '@/components/common/context-menu/QEmptyContextMen
 import InitSettingsModal from './InitSettingsModal'
 import GridSettingsModal from './GridSettingsModal'
 import { SurfaceShapeModal } from '@/components/ui/SurfaceShape'
-import { changeHipAndGableRoof, drawDirectionStringToArrow } from '@/util/qpolygon-utils'
+import { changeCurrentRoof, drawDirectionStringToArrow } from '@/util/qpolygon-utils'
 import ThumbnailList from '@/components/ui/ThumbnailLIst'
 import ObjectPlacement from '@/components/ui/ObjectPlacement'
 import { globalLocaleStore } from '@/store/localeAtom'
@@ -431,7 +431,7 @@ export default function Roof2(props) {
       { x: 450, y: 850 },
     ]
 
-    const polygon = new QPolygon(rectangleType1, {
+    const polygon = new QPolygon(rectangleType2, {
       fill: 'transparent',
       stroke: 'green',
       strokeWidth: 1,
@@ -672,18 +672,52 @@ export default function Roof2(props) {
     canvas?.renderAll()
   }
 
+  const setHipRoof = () => {
+    const polygon = canvas?.getObjects().find((obj) => obj.name === 'roof')
+    const currentRoof = polygon.lines[2]
+    currentRoof.attributes.type = LINE_TYPE.WALLLINE.EAVES
+    currentRoof.attributes.offset = 50
+    changeCurrentRoof(currentRoof, canvas)
+  }
   const setGableRoof = () => {
-    let offset = Number(prompt('gable roof offset', '50'))
+    const polygon = canvas?.getObjects().find((obj) => obj.name === 'roof')
+    const currentRoof = polygon.lines[2]
+    currentRoof.attributes.type = LINE_TYPE.WALLLINE.GABLE
+    currentRoof.attributes.offset = 30
+    changeCurrentRoof(currentRoof, canvas)
+  }
+  const setHipAndGableRoof = () => {
+    let offset = Number(prompt('팔작지붕 폭', '50'))
     if (!isNaN(offset) && offset > 0) {
       const polygon = canvas?.getObjects().find((obj) => obj.name === 'roof')
-      const currentRoof = polygon.lines[3]
+      const currentRoof = polygon.lines[2]
       currentRoof.attributes.type = LINE_TYPE.WALLLINE.HIPANDGABLE
       currentRoof.attributes.width = offset
-      changeHipAndGableRoof(currentRoof, canvas)
+      changeCurrentRoof(currentRoof, canvas)
     } else {
-      alert('offset 은 0 보다 커야 함')
+      alert('폭은 0 보다 커야 함')
     }
   }
+  const setJerkInHeadRoof = () => {
+    let offset = Number(prompt('팔작지붕 폭', '50'))
+    if (!isNaN(offset) && offset > 0) {
+      const polygon = canvas?.getObjects().find((obj) => obj.name === 'roof')
+      const currentRoof = polygon.lines[2]
+      currentRoof.attributes.type = LINE_TYPE.WALLLINE.JERKINHEAD
+      currentRoof.attributes.width = offset
+      changeCurrentRoof(currentRoof, canvas)
+    } else {
+      alert('폭은 0 보다 커야 함')
+    }
+  }
+  const setWallRoof = () => {
+    let offset = Number(prompt('소매 폭', '0'))
+    const polygon = canvas?.getObjects().find((obj) => obj.name === 'roof')
+    const currentRoof = polygon.lines[2]
+    currentRoof.attributes.type = LINE_TYPE.WALLLINE.WALL
+    currentRoof.attributes.width = offset
+    changeCurrentRoof(currentRoof, canvas)
+  }
   return (
     <>
       {canvas && (
@@ -810,19 +844,19 @@ export default function Roof2(props) {
             </Button>
             {/*  </>*/}
             {/*)}*/}
-            <Button className={'m-1 p-2'} onClick={null}>
+            <Button className={'m-1 p-2'} onClick={setHipRoof}>
               용마루지붕
             </Button>
-            <Button className={'m-1 p-2'} onClick={setGableRoof}>
+            <Button className={'m-1 p-2'} onClick={setHipAndGableRoof}>
               팔작지붕
             </Button>
-            <Button className={'m-1 p-2'} onClick={null}>
+            <Button className={'m-1 p-2'} onClick={setGableRoof}>
               박공지붕
             </Button>
-            <Button className={'m-1 p-2'} onClick={null}>
+            <Button className={'m-1 p-2'} onClick={setJerkInHeadRoof}>
               반절처지붕
             </Button>
-            <Button className={'m-1 p-2'} onClick={null}>
+            <Button className={'m-1 p-2'} onClick={setWallRoof}>
               벽지붕
             </Button>
             <Button className="m-1 p-2" onClick={() => saveImage(uuidv4(), userId, setThumbnails)}>

src/components/fabric/QPolygon.js

@@ -2,26 +2,36 @@ import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
 import { QLine } from '@/components/fabric/QLine'
 import { distanceBetweenPoints, findTopTwoIndexesByDistance, getDirectionByPoint, sortedPointLessEightPoint, sortedPoints } from '@/util/canvas-util'
-import { calculateAngle, drawDirectionArrow, drawRidgeRoof, inPolygon, toGeoJSON } from '@/util/qpolygon-utils'
+import { calculateAngle, drawRidgeRoof, inPolygon, toGeoJSON } from '@/util/qpolygon-utils'
 import * as turf from '@turf/turf'
+import { LINE_TYPE } from '@/common/common'
 
 export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   type: 'QPolygon',
-  lines: [],
+  // lines: [],
-  texts: [],
+  // texts: [],
   id: null,
   length: 0,
-  hips: [],
+  // hips: [],
-  ridges: [],
+  // ridges: [],
-  connectRidges: [],
+  // connectRidges: [],
-  cells: [],
+  // cells: [],
   parentId: null,
-  innerLines: [],
+  // innerLines: [],
-  children: [],
+  // children: [],
   initOptions: null,
   direction: null,
   arrow: null,
   initialize: function (points, options, canvas) {
+    this.lines = []
+    this.texts = []
+    this.hips = []
+    this.ridges = []
+    this.connectRidges = []
+    this.cells = []
+    this.innerLines = []
+    this.children = []
+
     // 소수점 전부 제거
     points.forEach((point) => {
       point.x = Math.round(point.x)
@@ -180,10 +190,42 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   },
 
   // 보조선 그리기
-  drawHelpLine(pitch = 4) {
+  drawHelpLine() {
     // drawHelpLineInHexagon(this, pitch)
-    console.log('drawHelpLine roofId : ', this.id)
+    const types = []
-    drawRidgeRoof(this.id, pitch, this.canvas)
+    this.lines.forEach((line) => types.push(line.attributes.type))
+
+    const eavesType = [LINE_TYPE.WALLLINE.EAVES, LINE_TYPE.WALLLINE.HIPANDGABLE]
+    const gableType = [LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.WALLLINE.JERKINHEAD]
+
+    const isEaves = types.every((type) => eavesType.includes(type))
+    const gableOdd = types.filter((type, i) => i % 2 === 0)
+    const gableEven = types.filter((type, i) => i % 2 === 1)
+    const hasShed = types.includes(LINE_TYPE.WALLLINE.SHED)
+
+    // A형, B형 박공 지붕
+    if (
+      (gableOdd.every((type) => type === LINE_TYPE.WALLLINE.EAVES) && gableEven.every((type) => gableType.includes(type))) ||
+      (gableEven.every((type) => type === LINE_TYPE.WALLLINE.EAVES) && gableOdd.every((type) => gableType.includes(type)))
+    ) {
+      console.log('박공 지붕')
+    } else if (hasShed) {
+      //편류지붕
+      let shedIndex = 0
+      types.forEach((type, i) => {
+        if (type === LINE_TYPE.WALLLINE.SHED) {
+          shedIndex = i
+        }
+      })
+      const shedOdd = types.filter((type, i) => i % 2 === shedIndex % 2).filter((type) => type !== LINE_TYPE.WALLLINE.SHED)
+      const shedEven = types.filter((type, i) => i % 2 !== shedIndex % 2)
+      types.forEach((type, i) => console.log(type, i, i % 2, shedIndex % 2, i % 2 === shedIndex % 2))
+      if (shedOdd.every((type) => type === LINE_TYPE.WALLLINE.EAVES) && shedEven.every((type) => type === LINE_TYPE.WALLLINE.GABLE)) {
+        console.log('편류지붕')
+      }
+    } else {
+      drawRidgeRoof(this.id, this.canvas)
+    }
   },
 
   addLengthText() {

src/hooks/useMode.js

@@ -36,7 +36,7 @@ import { QPolygon } from '@/components/fabric/QPolygon'
 import offsetPolygon from '@/util/qpolygon-utils'
 import { isObjectNotEmpty } from '@/util/common-utils'
 import * as turf from '@turf/turf'
-import { INPUT_TYPE, LINE_TYPE, Mode } from '@/common/common'
+import { INPUT_TYPE, Mode, POLYGON_TYPE } from '@/common/common'
 
 export function useMode() {
   const [mode, setMode] = useRecoilState(modeState)
@@ -1506,32 +1506,23 @@ export function useMode() {
    *벽 지붕 외곽선 생성 polygon을 입력받아 만들기
    */
   const handleOuterlinesTest2 = (polygon, offset = 50) => {
-    console.log('polygon : ', polygon)
     // TODO [ljyoung] : offset 입력 처리 후 제거 해야함.
     polygon.lines.forEach((line, index) => {
-      line.attributes = {
+      /*line.attributes = {
         type: LINE_TYPE.WALLLINE.EAVES,
         offset: 40,
         width: 50,
         pitch: 4,
         sleeve: true,
-      }
+      }*/
       /*if (index === 1 || index === 3) {
         line.attributes = {
           type: LINE_TYPE.WALLLINE.WALL,
-          offset: 0, //출폭
+          offset: 50, //출폭
           width: 30, //폭
           pitch: 4, //구배
           sleeve: true, //소매
         }
-      } else if (index === 0) {
-        line.attributes = {
-          type: LINE_TYPE.WALLLINE.EAVES,
-          offset: 0,
-          width: 50,
-          pitch: 4,
-          sleeve: true,
-        }
       } else {
         line.attributes = {
           type: LINE_TYPE.WALLLINE.EAVES,
@@ -1541,6 +1532,31 @@ export function useMode() {
           sleeve: true,
         }
       }*/
+      /* if (index === 1) {
+        line.attributes = {
+          type: LINE_TYPE.WALLLINE.SHED,
+          offset: 20, //출폭
+          width: 30, //폭
+          pitch: 4, //구배
+          sleeve: true, //소매
+        }
+      } else if (index === 3) {
+        line.attributes = {
+          type: LINE_TYPE.WALLLINE.EAVES,
+          offset: 50, //출폭
+          width: 30, //폭
+          pitch: 4, //구배
+          sleeve: true, //소매
+        }
+      } else {
+        line.attributes = {
+          type: LINE_TYPE.WALLLINE.GABLE,
+          offset: 30,
+          width: 50,
+          pitch: 4,
+          sleeve: true,
+        }
+      }*/
     })
 
     const roof = drawRoofPolygon(polygon) //지붕 그리기
@@ -1730,7 +1746,7 @@ export function useMode() {
         return { x1: point.x, y1: point.y }
       }),
     )
-    roof.name = 'roof'
+    roof.name = POLYGON_TYPE.ROOF
     roof.setWall(wall)
 
     roof.lines.forEach((line, index) => {
@@ -1750,13 +1766,12 @@ export function useMode() {
     }
 
     wall.lines.forEach((line, index) => {
-      line.attributes = {
+      line.attributes.roofId = roof.id
-        roofId: roof.id,
+      line.attributes.currentRoof = roof.lines[index].id
-      }
     })
 
-    console.log('roof : ', roof)
+    console.log('drawRoofPolygon roof : ', roof)
-    console.log('wall : ', wall)
+    console.log('drawRoofPolygon wall : ', wall)
 
     setRoof(roof)
     setWall(wall)

src/util/canvas-util.js

@@ -1,5 +1,6 @@
 import { intersect } from 'mathjs'
 import * as turf from '@turf/turf'
+
 /**
  * Collection of function to use on canvas
  */
@@ -261,6 +262,15 @@ export const getDegreeByChon = (chon) => {
   return Number((radians * (180 / Math.PI)).toFixed(2))
 }
 
+/**
+ * 각도를 입력받아 촌을 반환
+ * @param degree
+ * @returns {number}
+ */
+export const getChonByDegree = (degree) => {
+  return Number((Math.tan((degree * Math.PI) / 180) * 10).toFixed(2))
+}
+
 /**
  * 두 점 사이의 방향을 반환합니다.
  * @param a {fabric.Object}