Merge pull request 'dev' (#216) from dev into dev-deploy

Reviewed-on: #216

src/components/fabric/QPolygon.js

@@ -237,9 +237,13 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
    */
   drawHelpLine(settingModalFirstOptions) {
     /* innerLines 초기화 */
-    this.innerLines.forEach((line) => {
+    this.canvas
+      .getObjects()
+      .filter((obj) => obj.parentId === this.id && obj.name !== POLYGON_TYPE.WALL && obj.name !== POLYGON_TYPE.ROOF)
+      .forEach((obj) => this.canvas.remove(obj))
+    /*this.innerLines.forEach((line) => {
       this.canvas.remove(line)
-    })
+    })*/
     this.canvas.renderAll()
 
     let textMode = 'plane'

src/hooks/roofcover/useMovementSetting.js

@@ -322,8 +322,23 @@ export function useMovementSetting(id) {
     const wall = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.WALL && obj.attributes.roofId === roofId)
     const baseLines = wall.baseLines
     let targetBaseLines = []
-
+    let isGableRoof
     if (typeRef.current === TYPE.FLOW_LINE) {
+      const gableType = [LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.WALLLINE.HIPANDGABLE]
+      if (baseLines.find((line) => gableType.includes(line.attributes.type))) {
+        isGableRoof = true
+        let gableStartIndex = baseLines.findIndex((line) => gableType.includes(line.attributes.type))
+        baseLines.forEach((line, index) => {
+          if (isGableRoof) {
+            const isEvenLine = (index - gableStartIndex) % 2 === 0
+            if (isEvenLine && !gableType.includes(line.attributes.type)) {
+              isGableRoof = false
+            }
+          }
+        })
+      } else {
+        isGableRoof = false
+      }
       const lineVector =
         target.y1 === target.y2
           ? FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked
@@ -332,27 +347,62 @@ export function useMovementSetting(id) {
           : FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked
             ? 'right'
             : 'left'
+      let checkBaseLines, currentBaseLines
       switch (lineVector) {
         case 'up':
+          checkBaseLines = baseLines.filter((line) => line.y1 === line.y2 && line.y1 < target.y1)
+          currentBaseLines = checkBaseLines.filter((line) => {
+            const minX = Math.min(target.x1, target.x2)
+            const maxX = Math.max(target.x1, target.x2)
+            return minX <= line.x1 && line.x1 <= maxX && minX <= line.x2 && line.x2 <= maxX
+          })
+          if (isGableRoof && currentBaseLines.length > 0) {
+            currentBaseLines.forEach((line) => targetBaseLines.push({ line, distance: Big(line.y1).minus(target.y1).abs().toNumber() }))
+          } else {
+            checkBaseLines.forEach((line) => targetBaseLines.push({ line, distance: Big(target.y1).minus(line.y1).abs().toNumber() }))
+          }
           baseLines
             .filter((line) => line.y1 === line.y2 && line.y1 < target.y1)
             .forEach((line) => targetBaseLines.push({ line, distance: Big(target.y1).minus(line.y1).abs().toNumber() }))
           break
         case 'down':
-          baseLines
+          checkBaseLines = baseLines.filter((line) => line.y1 === line.y2 && line.y1 > target.y1)
-            .filter((line) => line.y1 === line.y2 && line.y1 > target.y1)
+          currentBaseLines = checkBaseLines.filter((line) => {
-            .forEach((line) => targetBaseLines.push({ line, distance: Big(line.y1).minus(target.y1).abs().toNumber() }))
+            const minX = Math.min(target.x1, target.x2)
+            const maxX = Math.max(target.x1, target.x2)
+            return minX <= line.x1 && line.x1 <= maxX && minX <= line.x2 && line.x2 <= maxX
+          })
+          if (isGableRoof && currentBaseLines.length > 0) {
+            currentBaseLines.forEach((line) => targetBaseLines.push({ line, distance: Big(line.y1).minus(target.y1).abs().toNumber() }))
+          } else {
+            checkBaseLines.forEach((line) => targetBaseLines.push({ line, distance: Big(line.y1).minus(target.y1).abs().toNumber() }))
+          }
           break
         case 'right':
-          baseLines
+          checkBaseLines = baseLines.filter((line) => line.x1 === line.x2 && line.x1 > target.x1)
-            .filter((line) => line.x1 === line.x2 && line.x1 > target.x1)
+          currentBaseLines = checkBaseLines.filter((line) => {
-            .forEach((line) => targetBaseLines.push({ line, distance: Big(target.x1).minus(line.x1).abs().toNumber() }))
+            const minY = Math.min(target.y1, target.y2)
-
+            const maxY = Math.max(target.y1, target.y2)
+            return minY <= line.y1 && line.y1 <= maxY && minY <= line.y2 && line.y2 <= maxY
+          })
+          if (isGableRoof && currentBaseLines.length > 0) {
+            currentBaseLines.forEach((line) => targetBaseLines.push({ line, distance: Big(line.x1).minus(target.x1).abs().toNumber() }))
+          } else {
+            checkBaseLines.forEach((line) => targetBaseLines.push({ line, distance: Big(target.x1).minus(line.x1).abs().toNumber() }))
+          }
           break
         case 'left':
-          baseLines
+          checkBaseLines = baseLines.filter((line) => line.x1 === line.x2 && line.x1 < target.x1)
-            .filter((line) => line.x1 === line.x2 && line.x1 < target.x1)
+          currentBaseLines = checkBaseLines.filter((line) => {
-            .forEach((line) => targetBaseLines.push({ line, distance: Big(line.x1).minus(target.x1).abs().toNumber() }))
+            const minY = Math.min(target.y1, target.y2)
+            const maxY = Math.max(target.y1, target.y2)
+            return minY <= line.y1 && line.y1 <= maxY && minY <= line.y2 && line.y2 <= maxY
+          })
+          if (isGableRoof && currentBaseLines.length > 0) {
+            currentBaseLines.forEach((line) => targetBaseLines.push({ line, distance: Big(line.x1).minus(target.x1).abs().toNumber() }))
+          } else {
+            checkBaseLines.forEach((line) => targetBaseLines.push({ line, distance: Big(target.x1).minus(line.x1).abs().toNumber() }))
+          }
           break
       }
     } else {
@@ -388,7 +438,6 @@ export function useMovementSetting(id) {
 
       const inPolygon = wall.inPolygon(checkPoint)
 
-      console.log('inPolygon', inPolygon)
       if (UP_DOWN_REF.UP_RADIO_REF.current.checked && inPolygon) {
         value = value.neg()
       } else if (UP_DOWN_REF.DOWN_RADIO_REF.current.checked && !inPolygon) {

src/util/qpolygon-utils.js

@@ -850,22 +850,6 @@ export const drawRidgeRoof = (roofId, canvas, textMode) => {
   /** baseLine을 기준으로 확인용 polygon 작성 */
   const checkWallPolygon = new QPolygon(baseLinePoints, {})
 
-  // /**
-  //  * 외벽선이 시계방향인지 시계반대 방향인지 확인
-  //  * @type {boolean}
-  //  */
-  // let counterClockwise = true
-  // let signedArea = 0
-  //
-  // baseLinePoints.forEach((point, index) => {
-  //   const nextPoint = baseLinePoints[(index + 1) % baseLinePoints.length]
-  //   signedArea += point.x * nextPoint.y - point.y * nextPoint.x
-  // })
-  //
-  // if (signedArea > 0) {
-  //   counterClockwise = false
-  // }
-
   const drawEavesFirstLines = []
   const drawEavesSecondLines = []
   const drawGableRidgeFirst = []