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

Reviewed-on: #511

src/components/common/input/CalcInput.jsx

@@ -50,26 +50,42 @@ export const CalculatorInput = forwardRef(
 
       // 소수점 이하 2자리 제한 로직 추가
       const shouldPreventInput = (value) => {
-        const decimalParts = (value || '').split('.')
+        if (!value) return false
+        const decimalParts = value.toString().split('.')
         return decimalParts.length > 1 && decimalParts[1].length >= 2
       }
 
+      // 숫자 추가 함수
+      const appendNumber = (current, num) => {
+        // 현재 값이 0이고 소수점이 없을 때 0이 아닌 숫자를 입력하면 대체
+        if (current === '0' && num !== '.' && !current.includes('.')) {
+          return num.toString()
+        }
+        // 0. 다음에 0을 입력하는 경우 허용
+        if (current === '0' && num === '0') {
+          return '0.'
+        }
+        return current + num
+      }
+
       if (hasOperation) {
         // 연산자 이후 숫자 입력 시
-        if (calculator.currentOperand === '0' || calculator.shouldResetDisplay) {
+        if (calculator.shouldResetDisplay) {
           calculator.currentOperand = num.toString()
           calculator.shouldResetDisplay = false
-        }else if (!shouldPreventInput(calculator.currentOperand)) { //소수점 이하2자리
+        } else if (num === '.') {
-          calculator.currentOperand = (calculator.currentOperand || '') + num
+          if (!calculator.currentOperand.includes('.')) {
+            calculator.currentOperand = calculator.currentOperand || '0' + '.'
           }
-        // else {
+        } else if (!shouldPreventInput(calculator.currentOperand)) {
-        //   calculator.currentOperand = (calculator.currentOperand || '') + num
+          calculator.currentOperand = appendNumber(calculator.currentOperand || '0', num)
-        // }
+        }
+        
         newDisplayValue = calculator.previousOperand + calculator.operation + calculator.currentOperand
         setDisplayValue(newDisplayValue)
       } else {
         // 첫 번째 숫자 입력 시
-        if (displayValue === '0' || calculator.shouldResetDisplay) {
+        if (calculator.shouldResetDisplay) {
           calculator.currentOperand = num.toString()
           calculator.shouldResetDisplay = false
           newDisplayValue = calculator.currentOperand
@@ -77,8 +93,17 @@ export const CalculatorInput = forwardRef(
           if (!hasOperation) {
             onChange(calculator.currentOperand)
           }
-        } else if (!shouldPreventInput(calculator.currentOperand)) { //소수점 이하2자리
+        } else if (num === '.') {
-          calculator.currentOperand = (calculator.currentOperand || '') + num
+          if (!calculator.currentOperand.includes('.')) {
+            calculator.currentOperand = (calculator.currentOperand || '0') + '.'
+            newDisplayValue = calculator.currentOperand
+            setDisplayValue(newDisplayValue)
+            if (!hasOperation) {
+              onChange(newDisplayValue)
+            }
+          }
+        } else if (!shouldPreventInput(calculator.currentOperand)) {
+          calculator.currentOperand = appendNumber(calculator.currentOperand || '0', num)
           newDisplayValue = calculator.currentOperand
           setDisplayValue(newDisplayValue)
           if (!hasOperation) {

src/util/qpolygon-utils.js

@@ -4848,6 +4848,9 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
     const prevLineVector = { x: Math.sign(prevLine.x1 - prevLine.x2), y: Math.sign(prevLine.y1 - prevLine.y2) }
     const nextLineVector = { x: Math.sign(nextLine.x1 - nextLine.x2), y: Math.sign(nextLine.y1 - nextLine.y2) }
 
+    const midX = (baseLine.x1 + baseLine.x2) / 2
+    const midY = (baseLine.y1 + baseLine.y2) / 2
+    const checkPoint = { x: midX + nextLineVector.x, y: midY + nextLineVector.y }
     //반절마루 생성불가이므로 지붕선 분기를 해야하는지 확인 후 처리.
     if (
       prevLineVector.x === nextLineVector.x &&
@@ -4855,12 +4858,24 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
       baseLine.attributes.type === LINE_TYPE.WALLLINE.EAVES &&
       (prevLine.attributes.type === LINE_TYPE.WALLLINE.GABLE || nextLine.attributes.type === LINE_TYPE.WALLLINE.GABLE)
     ) {
-      downRoofGable.push({ currLine: baseLine, currIndex: index })
+      downRoofGable.push({ currLine: baseLine, currIndex: index, type: 'A' })
+    }
+
+    if (
+      (prevLineVector.x !== nextLineVector.x || prevLineVector.y !== nextLineVector.y) &&
+      checkWallPolygon.inPolygon(checkPoint) &&
+      prevLine.attributes.type === LINE_TYPE.WALLLINE.GABLE &&
+      nextLine.attributes.type === LINE_TYPE.WALLLINE.GABLE
+    ) {
+      downRoofGable.push({ currLine: baseLine, currIndex: index, type: 'B' })
     }
   })
 
   const downRoofLines = [] // 하단지붕 파생 라인 처리후 innerLines에 추가.
-  downRoofGable.forEach(({ currLine, currIndex }) => {
+  //A타입 하단 지붕 prevLine과 nextLine이 같은 방향으로 가는 경우
+  downRoofGable
+    .filter((l) => l.type === 'A')
+    .forEach(({ currLine, currIndex }) => {
       // 라인의 방향
       const currVector = { x: Math.sign(clamp01(currLine.x1 - currLine.x2)), y: Math.sign(clamp01(currLine.y1 - currLine.y2)) }
 
@@ -5048,6 +5063,204 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
       }
     })
 
+  // B타입 하단지붕 prevLine과 nextLine의 방향이 반대인데 현재 라인이 지붕 안쪽으로 들어가는 모양.
+  downRoofGable
+    .filter((l) => l.type === 'B')
+    .forEach(({ currLine, currIndex }) => {
+      const checkLine = new fabric.Line([currLine.x1, currLine.y1, currLine.x2, currLine.y2], {
+        stroke: 'red',
+        strokeWidth: 4,
+        parentId: roofId,
+        name: 'check',
+      })
+      canvas.add(checkLine).renderAll()
+
+      // 라인의 방향
+      const currVector = { x: Math.sign(clamp01(currLine.x1 - currLine.x2)), y: Math.sign(clamp01(currLine.y1 - currLine.y2)) }
+
+      //어느쪽이 기준인지 확인.
+      //대각선 제외
+      if (currVector.x !== 0 && currVector.y !== 0) return
+
+      const prevLine = baseLines[(currIndex - 1 + baseLines.length) % baseLines.length]
+      const nextLine = baseLines[(currIndex + 1) % baseLines.length]
+
+      const prevVector = { x: Math.sign(clamp01(prevLine.x1 - prevLine.x2)), y: Math.sign(clamp01(prevLine.y1 - prevLine.y2)) }
+      const nextVector = { x: Math.sign(clamp01(nextLine.x1 - nextLine.x2)), y: Math.sign(clamp01(nextLine.y1 - nextLine.y2)) }
+
+      const minX = Math.min(currLine.x1, currLine.x2)
+      const maxX = Math.max(currLine.x1, currLine.x2)
+      const minY = Math.min(currLine.y1, currLine.y2)
+      const maxY = Math.max(currLine.y1, currLine.y2)
+      const midX = (currLine.x1 + currLine.x2) / 2
+      const midY = (currLine.y1 + currLine.y2) / 2
+      let ridgeFindVector = { x: nextVector.x, y: nextVector.y }
+      if (!checkWallPolygon.inPolygon({ x: midX, y: midY })) {
+        ridgeFindVector = { x: prevVector.x, y: prevVector.y }
+      }
+
+      // 마루를 따라 생성되어야 하는 지붕선 추가.
+      const oppLines = innerLines
+        .filter((l) => l.name === LINE_TYPE.SUBLINE.RIDGE)
+        .filter((line) => {
+          const lineVector = { x: Math.sign(clamp01(line.x1 - line.x2)), y: Math.sign(clamp01(line.y1 - line.y2)) }
+          let oppVector
+          if (currVector.x === 0) {
+            if (currVector.y === 1) {
+              oppVector = { x: Math.sign(clamp01(currLine.x1 - line.x1)), y: 0 }
+            } else if (currVector.y === -1) {
+              oppVector = { x: Math.sign(clamp01(line.x1 - currLine.x1)), y: 0 }
+            }
+          } else if (currVector.y === 0) {
+            if (currVector.x === 1) {
+              oppVector = { x: 0, y: Math.sign(clamp01(line.y1 - currLine.y1)) }
+            } else if (currVector.x === -1) {
+              oppVector = { x: 0, y: Math.sign(clamp01(currLine.y1 - line.y1)) }
+            }
+          }
+
+          const lineMinX = Math.min(line.x1, line.x2)
+          const lineMaxX = Math.max(line.x1, line.x2)
+          const lineMinY = Math.min(line.y1, line.y2)
+          const lineMaxY = Math.max(line.y1, line.y2)
+
+          const isInside = lineVector.y === 0 ? minX <= lineMinX && lineMaxX <= maxX : minY <= lineMinY && lineMaxY <= maxY
+
+          const rightOpp = ridgeFindVector.x === oppVector.x && ridgeFindVector.y === oppVector.y
+          return rightOpp && isInside
+        })
+
+      // 현재 라인의 지붕선 추가.
+      const currOffset = currLine.attributes.offset
+      const roofPoint = [
+        currLine.x1 + -nextVector.x * currOffset,
+        currLine.y1 + -nextVector.y * currOffset,
+        currLine.x2 + -nextVector.x * currOffset,
+        currLine.y2 + -nextVector.y * currOffset,
+      ]
+      downRoofLines.push(drawRoofLine(roofPoint, canvas, roof, textMode))
+
+      // 현재 라인 좌표의 시작과 끝 포인트에서 직교하는 포인트와 라인을 찾는다
+      let orthogonalStartPoint,
+        orthogonalStartDistance = Infinity,
+        orthogonalStartLine
+      let orthogonalEndPoint,
+        orthogonalEndDistance = Infinity,
+        orthogonalEndLine
+      oppLines.forEach((line) => {
+        const checkLine = new fabric.Line([line.x1, line.y1, line.x2, line.y2], { stroke: 'red', strokeWidth: 4, parentId: roofId, name: 'check' })
+        canvas.add(checkLine).renderAll()
+
+        if (currVector.x === 0) {
+          //세로선
+          // 시작포인트와 가까운 포인트의 길이
+          const lineStartDist =
+            Math.abs(currLine.y1 - line.y1) < Math.abs(currLine.y1 - line.y2) ? Math.abs(currLine.y1 - line.y1) : Math.abs(currLine.y1 - line.y2)
+          const lineStartPoint =
+            Math.abs(currLine.y1 - line.y1) < Math.abs(currLine.y1 - line.y2) ? { x: line.x1, y: currLine.y1 } : { x: line.x2, y: currLine.y1 }
+          if (lineStartDist < orthogonalStartDistance) {
+            orthogonalStartDistance = lineStartDist
+            orthogonalStartPoint = lineStartPoint
+            orthogonalStartLine = line
+          }
+          // 종료포인트와 가까운 포인트의 길이
+          const lineEndDist =
+            Math.abs(currLine.y2 - line.y1) < Math.abs(currLine.y2 - line.y2) ? Math.abs(currLine.y2 - line.y2) : Math.abs(currLine.y2 - line.y1)
+          const lineEndPoint =
+            Math.abs(currLine.y2 - line.y1) < Math.abs(currLine.y2 - line.y2) ? { x: line.x2, y: currLine.y2 } : { x: line.x1, y: currLine.y2 }
+          if (lineEndDist < orthogonalEndDistance) {
+            orthogonalEndDistance = lineEndDist
+            orthogonalEndPoint = lineEndPoint
+            orthogonalEndLine = line
+          }
+        } else if (currVector.y === 0) {
+          //가로선
+          // 시작포인트와 가까운 포인트의 길이
+          const lineStartDist =
+            Math.abs(currLine.x1 - line.x1) < Math.abs(currLine.x1 - line.x2) ? Math.abs(currLine.x1 - line.x1) : Math.abs(currLine.x1 - line.x2)
+          const lineStartPoint =
+            Math.abs(currLine.x1 - line.x1) < Math.abs(currLine.x1 - line.x2) ? { x: currLine.x1, y: line.y1 } : { x: currLine.x1, y: line.y2 }
+          if (lineStartDist < orthogonalStartDistance) {
+            orthogonalStartDistance = lineStartDist
+            orthogonalStartPoint = lineStartPoint
+            orthogonalStartLine = line
+          }
+          //종료포인트와 가까운 포인트의 길이
+          const lineEndDist =
+            Math.abs(currLine.x2 - line.x1) < Math.abs(currLine.x2 - line.x2) ? Math.abs(currLine.x2 - line.x1) : Math.abs(currLine.x2 - line.x2)
+          const lineEndPoint =
+            Math.abs(currLine.x2 - line.x1) < Math.abs(currLine.x2 - line.x2) ? { x: currLine.x2, y: line.y1 } : { x: currLine.x2, y: line.y2 }
+          if (lineEndDist < orthogonalEndDistance) {
+            orthogonalEndDistance = lineEndDist
+            orthogonalEndPoint = lineEndPoint
+            orthogonalEndLine = line
+          }
+        }
+      })
+
+      //직교 라인이 있는 경우
+      if (orthogonalStartLine !== undefined && orthogonalEndLine !== undefined) {
+        if (orthogonalStartLine === orthogonalEndLine) {
+          //직교 라인이 1개일때 처리
+          downRoofLines.push(
+            drawRoofLine([orthogonalStartPoint.x, orthogonalStartPoint.y, orthogonalEndPoint.x, orthogonalEndPoint.y], canvas, roof, textMode),
+          )
+        } else {
+          //직교 라인이 2개일때 처리
+          // 시작 라인 처리
+          const startDist1 = Math.sqrt(
+            Math.pow(orthogonalStartPoint.x - orthogonalStartLine.x1, 2) + Math.pow(orthogonalStartPoint.y - orthogonalStartLine.y1, 2),
+          )
+          const startDist2 = Math.sqrt(
+            Math.pow(orthogonalStartPoint.x - orthogonalStartLine.x2, 2) + Math.pow(orthogonalStartPoint.y - orthogonalStartLine.y2, 2),
+          )
+          const otherStartPoint =
+            startDist1 > startDist2
+              ? { x: orthogonalStartLine.x1, y: orthogonalStartLine.y1 }
+              : { x: orthogonalStartLine.x2, y: orthogonalStartLine.y2 }
+          downRoofLines.push(
+            drawRoofLine([orthogonalStartPoint.x, orthogonalStartPoint.y, otherStartPoint.x, otherStartPoint.y], canvas, roof, textMode),
+          )
+
+          const endDist1 = Math.sqrt(
+            Math.pow(orthogonalEndPoint.x - orthogonalEndLine.x1, 2) + Math.pow(orthogonalEndPoint.y - orthogonalEndLine.y1, 2),
+          )
+          const endDist2 = Math.sqrt(
+            Math.pow(orthogonalEndPoint.x - orthogonalEndLine.x2, 2) + Math.pow(orthogonalEndPoint.y - orthogonalEndLine.y2, 2),
+          )
+          const otherEndPoint =
+            endDist1 > endDist2 ? { x: orthogonalEndLine.x1, y: orthogonalEndLine.y1 } : { x: orthogonalEndLine.x2, y: orthogonalEndLine.y2 }
+          downRoofLines.push(drawRoofLine([orthogonalEndPoint.x, orthogonalEndPoint.y, otherEndPoint.x, otherEndPoint.y], canvas, roof, textMode))
+        }
+
+        //지붕선(roofPoint)에서 직교포인트까지 연결하는 라인을 추가한다.
+        const orthogonalPoint1 = [roofPoint[0], roofPoint[1], orthogonalStartPoint.x, orthogonalStartPoint.y]
+        const orthogonalPoint2 = [roofPoint[2], roofPoint[3], orthogonalEndPoint.x, orthogonalEndPoint.y]
+        downRoofLines.push(
+          drawHipLine(
+            orthogonalPoint1,
+            canvas,
+            roof,
+            textMode,
+            null,
+            getDegreeByChon(currLine.attributes.pitch),
+            getDegreeByChon(currLine.attributes.pitch),
+          ),
+        )
+        downRoofLines.push(
+          drawHipLine(
+            orthogonalPoint2,
+            canvas,
+            roof,
+            textMode,
+            null,
+            getDegreeByChon(currLine.attributes.pitch),
+            getDegreeByChon(currLine.attributes.pitch),
+          ),
+        )
+      }
+    })
+
   //추가된 하단 지붕 라인 innerLines에 추가.
   innerLines.push(...downRoofLines)
 
@@ -5107,7 +5320,13 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
         }
         startPoint = point
       }
-      innerLines.push(drawHipLine([startPoint.x, startPoint.y, currentLine.x2, currentLine.y2], canvas, roof, textMode, null, nextDegree, nextDegree))
+      if (splitPoint.length === 1) {
+        innerLines.push(drawRoofLine([startPoint.x, startPoint.y, currentLine.x2, currentLine.y2], canvas, roof, textMode))
+      } else {
+        innerLines.push(
+          drawHipLine([startPoint.x, startPoint.y, currentLine.x2, currentLine.y2], canvas, roof, textMode, null, nextDegree, nextDegree),
+        )
+      }
     } else {
       innerLines.push(drawRoofLine([currentLine.x1, currentLine.y1, currentLine.x2, currentLine.y2], canvas, roof, textMode))
     }