박공지붕 설정 및 동선이동 처리 수정

src/components/floor-plan/modal/movement/MovementSetting.jsx

@@ -1,9 +1,7 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
-import { useState } from 'react'
 import FlowLine from '@/components/floor-plan/modal/movement/type/FlowLine'
 import Updown from '@/components/floor-plan/modal/movement/type/Updown'
-import { usePopup } from '@/hooks/usePopup'
 import { useMovementSetting } from '@/hooks/roofcover/useMovementSetting'
 
 export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {

src/components/floor-plan/modal/movement/type/FlowLine.jsx

@@ -1,5 +1,7 @@
 import { useMessage } from '@/hooks/useMessage'
 import { useState } from 'react'
+import { currentObjectState } from '@/store/canvasAtom'
+import { useRecoilValue } from 'recoil'
 
 const FLOW_LINE_TYPE = {
   DOWN_LEFT: 'downLeft',
@@ -9,7 +11,18 @@ const FLOW_LINE_TYPE = {
 export default function FlowLine({ FLOW_LINE_REF }) {
   const { getMessage } = useMessage()
   const [type, setType] = useState(FLOW_LINE_TYPE.DOWN_LEFT)
-
+  const [filledInput, setFilledInput] = useState('')
+  const currentObject = useRecoilValue(currentObjectState)
+  const handleFocus = () => {
+    if (currentObject === null) {
+      FLOW_LINE_REF.FILLED_INPUT_REF.current.value = ''
+      FLOW_LINE_REF.FILLED_INPUT_REF.current.blur()
+    }
+  }
+  const handleInput = (e) => {
+    const value = e.target.value.replace(/^0+/, '')
+    setFilledInput(value.replace(/[^0-9]/g, ''))
+  }
   return (
     <>
       <div className="outline-wrap">
@@ -57,7 +70,14 @@ export default function FlowLine({ FLOW_LINE_REF }) {
             <div className="eaves-keraba-td">
               <div className="outline-form">
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input type="text" className="input-origin block" ref={FLOW_LINE_REF.FILLED_INPUT_REF} />
+                  <input
+                    type="text"
+                    className="input-origin block"
+                    ref={FLOW_LINE_REF.FILLED_INPUT_REF}
+                    value={filledInput}
+                    onFocus={handleFocus}
+                    onChange={handleInput}
+                  />
                 </div>
                 <span className="thin">mm</span>
               </div>

src/hooks/roofcover/useMovementSetting.js

@@ -5,6 +5,8 @@ import { useMessage } from '@/hooks/useMessage'
 import { useEffect, useRef, useState } from 'react'
 import { useEvent } from '@/hooks/useEvent'
 import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
+import { useSwal } from '@/hooks/useSwal'
+import { QPolygon } from '@/components/fabric/QPolygon'
 import { getDegreeByChon } from '@/util/canvas-util'
 
 //동선이동 형 올림 내림
@@ -26,6 +28,7 @@ export function useMovementSetting(id) {
   ]
   const [type, setType] = useState(TYPE.FLOW_LINE)
   const typeRef = useRef(type)
+  const { swalFire } = useSwal()
 
   const FLOW_LINE_REF = {
     POINTER_INPUT_REF: useRef(null),
@@ -69,6 +72,7 @@ export function useMovementSetting(id) {
         roof.innerLines.forEach((line) => {
           if (line.name === LINE_TYPE.SUBLINE.RIDGE) {
             line.bringToFront()
+            line.set({ visible: true })
             line.set({ selectable: true })
             line.set({ strokeWidth: 4 })
             line.set({ stroke: '#1083E3' })
@@ -89,7 +93,6 @@ export function useMovementSetting(id) {
     canvas.renderAll()
     addCanvasMouseEventListener('mouse:move', mouseMoveEvent)
     addCanvasMouseEventListener('mouse:down', mouseDownEvent)
-
     return () => {
       initEvent()
 
@@ -178,6 +181,36 @@ export function useMovementSetting(id) {
       updownMoveEvent(e)
     }
   }
+
+  function edgesIntersection(edgeA, edgeB) {
+    const den =
+      (edgeB.vertex2.y - edgeB.vertex1.y) * (edgeA.vertex2.x - edgeA.vertex1.x) -
+      (edgeB.vertex2.x - edgeB.vertex1.x) * (edgeA.vertex2.y - edgeA.vertex1.y)
+
+    if (den === 0) {
+      return null // lines are parallel or coincident
+    }
+
+    const ua =
+      ((edgeB.vertex2.x - edgeB.vertex1.x) * (edgeA.vertex1.y - edgeB.vertex1.y) -
+        (edgeB.vertex2.y - edgeB.vertex1.y) * (edgeA.vertex1.x - edgeB.vertex1.x)) /
+      den
+
+    const ub =
+      ((edgeA.vertex2.x - edgeA.vertex1.x) * (edgeA.vertex1.y - edgeB.vertex1.y) -
+        (edgeA.vertex2.y - edgeA.vertex1.y) * (edgeA.vertex1.x - edgeB.vertex1.x)) /
+      den
+
+    // Edges are not intersecting but the lines defined by them are
+    const isIntersectionOutside = ua < 0 || ub < 0 || ua > 1 || ub > 1
+
+    return {
+      x: edgeA.vertex1.x + ua * (edgeA.vertex2.x - edgeA.vertex1.x),
+      y: edgeA.vertex1.y + ua * (edgeA.vertex2.y - edgeA.vertex1.y),
+      isIntersectionOutside,
+    }
+  }
+
   //동선 이동 마우스 클릭 이벤트
   const saveFlowLine = (e) => {
     const target = selectedObject.current
@@ -187,22 +220,23 @@ export function useMovementSetting(id) {
 
     let newPoint = []
     if (Math.sign(target.x1 - target.x2) !== 0) {
+      const sign = FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked ? 1 : -1
       newPoint = [
         target.x1,
-        target.y1 - Number(FLOW_LINE_REF.FILLED_INPUT_REF.current.value / 10),
+        target.y1 - sign * Number(FLOW_LINE_REF.FILLED_INPUT_REF.current.value / 10),
         target.x2,
-        target.y2 - Number(FLOW_LINE_REF.FILLED_INPUT_REF.current.value / 10),
+        target.y2 - sign * Number(FLOW_LINE_REF.FILLED_INPUT_REF.current.value / 10),
       ]
     } else {
+      const sign = FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked ? -1 : 1
       newPoint = [
-        target.x1 + Number(FLOW_LINE_REF.FILLED_INPUT_REF.current.value / 10),
+        target.x1 - sign * Number(FLOW_LINE_REF.FILLED_INPUT_REF.current.value / 10),
         target.y1,
-        target.x2 + Number(FLOW_LINE_REF.FILLED_INPUT_REF.current.value / 10),
+        target.x2 - sign * Number(FLOW_LINE_REF.FILLED_INPUT_REF.current.value / 10),
         target.y2,
       ]
     }
-
+    newPoint = newPoint.map((point) => Math.round(point * 10) / 10)
-    clearRef()
     const cloned = new fabric.Line(newPoint, {})
     let currentObject = selectedObject.current
     const currentX1 = currentObject.x1,
@@ -210,39 +244,94 @@ export function useMovementSetting(id) {
       currentX2 = currentObject.x2,
       currentY2 = currentObject.y2
 
+    const currentMidX = (currentX1 + currentX2) / 2
+    const currentMidY = (currentY1 + currentY2) / 2
+    const clonedMidX = (cloned.x1 + cloned.x2) / 2
+    const clonedMidY = (cloned.y1 + cloned.y2) / 2
+
     const roof = canvas.getObjects().find((obj) => obj.id === currentObject.attributes.roofId)
-    if (roof.separatePolygon.length > 0) {
+    let isOutside = false
-      const separatePolygon = roof.separatePolygon
+    roof.lines.forEach((line) => {
-      separatePolygon
+      const intersection = edgesIntersection(
-        .filter((polygon) =>
+        { vertex1: { x: currentMidX, y: currentMidY }, vertex2: { x: clonedMidX, y: clonedMidY } },
-          polygon.points.some((point) => (point.x === currentX1 && point.y === currentY1) || (point.x === currentX2 && point.y === currentY2)),
+        { vertex1: { x: line.x1, y: line.y1 }, vertex2: { x: line.x2, y: line.y2 } },
-        )
+      )
-        .forEach((polygon) => {
+      if (intersection && !intersection.isIntersectionOutside) {
-          const newPoints = polygon.points.map((point) => {
+        isOutside = true
-            if (point.x === currentX1 && point.y === currentY1) {
+      }
-              return { x: newPoint[0], y: newPoint[1] }
+    })
-            } else if (point.x === currentX2 && point.y === currentY2) {
+    if (isOutside) {
-              return { x: newPoint[2], y: newPoint[3] }
+      swalFire({ text: getMessage('modal.movement.flow.line.move.alert'), icon: 'error' })
-            } else {
+      return
-              return point
+    }
-            }
+    currentObject.set({ x1: cloned.x1, y1: cloned.y1, x2: cloned.x2, y2: cloned.y2 })
-          })
+    currentObject.setCoords()
-          polygon.set({ points: newPoints })
+    const otherRidges = roof.innerLines.filter((line) => line.name === LINE_TYPE.SUBLINE.RIDGE && line.id !== currentObject.id)
-          polygon.setCoords()
+    const overlapRidges = otherRidges.filter((line) => {
-          polygon.addLengthText()
+      if (currentObject.x1 === currentObject.x2 && line.x1 === line.x2 && 0 < Math.abs(currentObject.x1 - line.x1) < 1) {
-          polygon.initLines()
+        if (
-          const slope = (line) => (line.x2 - line.x1 === 0 ? Infinity : (line.y2 - line.y1) / (line.x2 - line.x1))
+          currentObject.y1 <= line.y1 <= currentObject.y2 ||
-          const currentDegree = polygon.attributes.pitch > 0 ? getDegreeByChon(polygon.attributes.pitch) : polygon.attributes.degree
+          currentObject.y1 >= line.y1 >= currentObject.y2 ||
-          polygon.lines.forEach((line) => {
+          currentObject.y1 <= line.y2 <= currentObject.y2 ||
-            line.attributes.planeSize = Math.round(Math.sqrt(Math.pow(line.x2 - line.x1, 2) + Math.pow(line.y2 - line.y1, 2)) * 10)
+          currentObject.y1 >= line.y2 >= currentObject.y2
-            if (currentDegree > 0 && slope(line) !== slope(currentObject)) {
+        ) {
-              const height = Math.tan(currentDegree * (Math.PI / 180)) * line.attributes.planeSize
+          return true
-              line.attributes.actualSize = Math.round(Math.sqrt(Math.pow(line.attributes.planeSize, 2) + Math.pow(height, 2)))
+        }
-            } else {
+      }
-              line.attributes.actualSize = line.attributes.planeSize
+      if (currentObject.y1 === currentObject.y2 && line.y1 === line.y2 && 0 < Math.abs(currentObject.y1 - line.y1) < 1) {
-            }
+        if (
-          })
+          currentObject.x1 <= line.x1 <= currentObject.x2 ||
+          currentObject.x1 >= line.x1 >= currentObject.x2 ||
+          currentObject.x1 <= line.x2 <= currentObject.x2 ||
+          currentObject.x1 >= line.x2 >= currentObject.x2
+        ) {
+          return true
+        }
+      }
+    })
+    if (overlapRidges.length > 0) {
+      const minX = Math.min(...overlapRidges.flatMap((line) => [line.x1, line.x2]), currentObject.x1, currentObject.x2)
+      const maxX = Math.max(...overlapRidges.flatMap((line) => [line.x1, line.x2]), currentObject.x1, currentObject.x2)
+      const minY = Math.min(...overlapRidges.flatMap((line) => [line.y1, line.y2]), currentObject.y1, currentObject.y2)
+      const maxY = Math.max(...overlapRidges.flatMap((line) => [line.y1, line.y2]), currentObject.y1, currentObject.y2)
+      const newRidge = new fabric.Line([minX, minY, maxX, maxY], {
+        name: LINE_TYPE.SUBLINE.RIDGE,
+        selectable: true,
+        stroke: '#1083E3',
+        strokeWidth: 4,
+        attributes: { roofId: roof.id, currentRoof: currentObject.attributes.currentRoof },
+      })
+
+      overlapRidges.forEach((line) =>
+        line.attributes.currentRoof.forEach((id) => {
+          if (!newRidge.attributes.currentRoof.includes(id)) {
+            newRidge.attributes.currentRoof.push(id)
+          }
+        }),
+      )
+      canvas.add(newRidge)
+      newRidge.bringToFront()
+      roof.innerLines.push(newRidge)
+
+      canvas.remove(currentObject)
+      roof.innerLines.forEach((innerLine, index) => {
+        if (innerLine.id === currentObject.id) {
+          roof.innerLines.splice(index, 1)
+        }
+      })
+
+      overlapRidges.forEach((line) => {
+        canvas.remove(line)
+        roof.innerLines.forEach((innerLine, index) => {
+          if (innerLine.id === line.id) {
+            roof.innerLines.splice(index, 1)
+          }
         })
+      })
+    }
+
+    if (roof.separatePolygon.length > 0) {
+      redrawSeparatePolygon(roof)
     } else {
       roof.innerLines
         .filter((line) => currentObject !== line)
@@ -277,6 +366,390 @@ export function useMovementSetting(id) {
 
     canvas.renderAll()
     canvas.discardActiveObject()
+
+    FLOW_LINE_REF.FILLED_INPUT_REF.current.value = ''
+  }
+
+  const redrawSeparatePolygon = (roof) => {
+    roof.separatePolygon.forEach((polygon) => canvas.remove(polygon))
+    roof.separatePolygon = []
+    const roofLines = roof.lines
+    const wallLines = roof.wall.lines
+    const eaves = []
+    roofLines.forEach((currentRoof, index) => {
+      if (currentRoof.attributes?.type === LINE_TYPE.WALLLINE.EAVES) {
+        eaves.push({ index: index, roof: currentRoof, length: currentRoof.attributes.planeSize })
+      }
+    })
+    const ridges = roof.innerLines.filter((line) => line.name === LINE_TYPE.SUBLINE.RIDGE)
+    eaves.sort((a, b) => a.length - b.length)
+
+    const ridgeCount = eaves.length - 1
+    console.log('ridgeCount', ridgeCount, 'ridges', ridges.length)
+
+    const duplicatedEaves = []
+    ridges.forEach((ridge) => {
+      const positiveLines = []
+      const negativeLines = []
+      ridge.attributes.currentRoof.forEach((id) => {
+        console.log('id : ', id)
+        const eave = roofLines.find((obj) => obj.id === id)
+        console.log('roof : ', eave)
+        if (ridge.x1 === ridge.x2) {
+          if (eave.y1 < eave.y2) {
+            positiveLines.push(eave)
+          } else {
+            negativeLines.push(eave)
+          }
+        } else {
+          if (eave.x1 < eave.x2) {
+            positiveLines.push(eave)
+          } else {
+            negativeLines.push(eave)
+          }
+        }
+      })
+      if (positiveLines.length > 1) {
+        duplicatedEaves.push(positiveLines)
+      }
+      if (negativeLines.length > 1) {
+        duplicatedEaves.push(negativeLines)
+      }
+    })
+    console.log('duplicatedEaves', duplicatedEaves)
+
+    duplicatedEaves.forEach((duplicatedEave) => {
+      duplicatedEave.forEach((eave) => {
+        const index = eaves.findIndex((item) => item.roof.id === eave.id)
+        eaves.splice(index, 1)
+      })
+    })
+
+    // if (ridgeCount === ridges.length) {
+    eaves.forEach((eave, i) => {
+      const index = eave.index,
+        currentRoof = eave.roof
+      const currentWall = wallLines[index]
+      const currentRidges = ridges.filter((ridge) => ridge.attributes.currentRoof.includes(eave.roof.id))
+      let points = []
+      const signX = Math.sign(currentRoof.x1 - currentRoof.x2)
+      let currentX1 = currentRoof.x1,
+        currentY1 = currentRoof.y1,
+        currentX2 = currentRoof.x2,
+        currentY2 = currentRoof.y2
+      let changeX1 = [Math.min(currentRoof.x1, currentRoof.x2), Math.min(currentRoof.x1, currentRoof.x2)],
+        changeY1 = [Math.min(currentRoof.y1, currentRoof.y2), Math.min(currentRoof.y1, currentRoof.y2)],
+        changeX2 = [Math.max(currentRoof.x2, currentRoof.x1), Math.max(currentRoof.x2, currentRoof.x1)],
+        changeY2 = [Math.max(currentRoof.y2, currentRoof.y1), Math.max(currentRoof.y2, currentRoof.y1)]
+
+      if (signX === 0) {
+        currentY1 = Math.min(currentRoof.y1, currentRoof.y2, currentWall.y1, currentWall.y2)
+        changeY1[1] = currentY1
+        currentY2 = Math.max(currentRoof.y1, currentRoof.y2, currentWall.y1, currentWall.y2)
+        changeY2[1] = currentY2
+      } else {
+        currentX1 = Math.min(currentRoof.x1, currentRoof.x2, currentWall.x1, currentWall.x2)
+        changeX1[1] = currentX1
+        currentX2 = Math.max(currentRoof.x1, currentRoof.x2, currentWall.x1, currentWall.x2)
+        changeX2[1] = currentX2
+      }
+      points.push({ x: currentX1, y: currentY1 }, { x: currentX2, y: currentY2 })
+
+      currentRidges.forEach((ridge) => {
+        let ridgeX1 = ridge.x1,
+          ridgeY1 = ridge.y1,
+          ridgeX2 = ridge.x2,
+          ridgeY2 = ridge.y2
+        if (signX === 0) {
+          ridgeY1 = Math.min(ridge.y1, ridge.y2)
+          ridgeY2 = Math.max(ridge.y1, ridge.y2)
+        } else {
+          ridgeX1 = Math.min(ridge.x1, ridge.x2)
+          ridgeX2 = Math.max(ridge.x1, ridge.x2)
+        }
+        points.push({ x: ridgeX1, y: ridgeY1 }, { x: ridgeX2, y: ridgeY2 })
+      })
+
+      points.forEach((point) => {
+        if (point.x === changeX1[0] && changeX1[0] !== changeX1[1]) {
+          point.x = changeX1[1]
+        }
+        if (point.x === changeX2[0] && changeX2[0] !== changeX2[1]) {
+          point.x = changeX2[1]
+        }
+        if (point.y === changeY1[0] && changeY1[0] !== changeY1[1]) {
+          point.y = changeY1[1]
+        }
+        if (point.y === changeY2[0] && changeY2[0] !== changeY2[1]) {
+          point.y = changeY2[1]
+        }
+      })
+      //중복된 point 제거
+      points = points.filter((point, index, self) => index === self.findIndex((p) => p.x === point.x && p.y === point.y))
+      //point 정렬 (가장 좌측, 최상단의 점을 기준으로 삼는다.)
+      const startPoint = points
+        .filter((point) => point.x === Math.min(...points.map((point) => point.x)))
+        .reduce((prev, current) => {
+          return prev.y < current.y ? prev : current
+        })
+
+      const sortedPoints = []
+      sortedPoints.push(startPoint)
+
+      points.forEach((p, index) => {
+        if (index === 0) {
+          //시작점 다음 점 찾기, y좌표가 startPoint.y 보다 큰 점 중 x좌표가 가까운 점
+          const underStartPoint = points.filter((point) => point.y > startPoint.y)
+          const nextPoint = underStartPoint
+            .filter((point) => point.x === startPoint.x)
+            .reduce((prev, current) => {
+              if (prev === undefined) {
+                return current
+              }
+              return Math.abs(prev.y - startPoint.y) < Math.abs(current.y - startPoint.y) ? prev : current
+            }, undefined)
+          if (nextPoint) {
+            sortedPoints.push(nextPoint)
+          } else {
+            const nextPoint = underStartPoint.reduce((prev, current) => {
+              const prevHypos = Math.sqrt(Math.abs(Math.pow(prev.x - startPoint.x, 2)) + Math.abs(Math.pow(prev.y - startPoint.y, 2)))
+              const currentHypos = Math.sqrt(Math.abs(Math.pow(current.x - startPoint.x, 2)) + Math.abs(Math.pow(current.y - startPoint.y, 2)))
+              return prevHypos < currentHypos ? prev : current
+            }, undefined)
+            sortedPoints.push(nextPoint)
+          }
+        } else {
+          const lastPoint = sortedPoints[sortedPoints.length - 1]
+          console.log('lastPoint', lastPoint)
+          const prevPoint = sortedPoints[sortedPoints.length - 2]
+          const otherPoints = points.filter((point) => sortedPoints.includes(point) === false)
+          const nextPoint = otherPoints.reduce((prev, current) => {
+            if (prev === undefined) {
+              const height = Math.abs(Math.sqrt(Math.abs(Math.pow(prevPoint.x - lastPoint.x, 2)) + Math.abs(Math.pow(prevPoint.y - lastPoint.y, 2))))
+              const adjacent = Math.abs(Math.sqrt(Math.abs(Math.pow(current.x - lastPoint.x, 2)) + Math.abs(Math.pow(current.y - lastPoint.y, 2))))
+              const hypotenuse = Math.abs(Math.sqrt(Math.abs(Math.pow(current.x - prevPoint.x, 2)) + Math.abs(Math.pow(current.y - prevPoint.y, 2))))
+
+              const angle = Math.round(
+                Math.acos((Math.pow(adjacent, 2) + Math.pow(height, 2) - Math.pow(hypotenuse, 2)) / (2 * adjacent * height)) * (180 / Math.PI),
+              )
+              if (angle === 90) {
+                return current
+              }
+            } else {
+              return prev
+            }
+          }, undefined)
+          if (nextPoint) {
+            sortedPoints.push(nextPoint)
+          } else {
+            const nextPoint = otherPoints.reduce((prev, current) => {
+              if (prev !== undefined) {
+                const height = Math.abs(
+                  Math.sqrt(Math.abs(Math.pow(prevPoint.x - lastPoint.x, 2)) + Math.abs(Math.pow(prevPoint.y - lastPoint.y, 2))),
+                )
+                const adjacentC = Math.abs(Math.sqrt(Math.abs(Math.pow(current.x - lastPoint.x, 2)) + Math.abs(Math.pow(current.y - lastPoint.y, 2))))
+                const hypotenuseC = Math.abs(
+                  Math.sqrt(Math.abs(Math.pow(current.x - prevPoint.x, 2)) + Math.abs(Math.pow(current.y - prevPoint.y, 2))),
+                )
+                const angleC = Math.round(
+                  Math.acos((Math.pow(adjacentC, 2) + Math.pow(height, 2) - Math.pow(hypotenuseC, 2)) / (2 * adjacentC * height)) * (180 / Math.PI),
+                )
+                const adjacentP = Math.abs(Math.sqrt(Math.abs(Math.pow(prev.x - lastPoint.x, 2)) + Math.abs(Math.pow(prev.y - lastPoint.y, 2))))
+                const hypotenuseP = Math.abs(Math.sqrt(Math.abs(Math.pow(prev.x - prevPoint.x, 2)) + Math.abs(Math.pow(prev.y - prevPoint.y, 2))))
+                const angleP = Math.round(
+                  Math.acos((Math.pow(adjacentP, 2) + Math.pow(height, 2) - Math.pow(hypotenuseP, 2)) / (2 * adjacentP * height)) * (180 / Math.PI),
+                )
+                if (Math.abs(90 - angleC) < Math.abs(90 - angleP)) {
+                  return current
+                } else {
+                  return prev
+                }
+              } else {
+                return current
+              }
+            }, undefined)
+            if (nextPoint) {
+              sortedPoints.push(nextPoint)
+            }
+          }
+        }
+      })
+
+      if (sortedPoints.length > 0) {
+        const roofPolygon = new QPolygon(sortedPoints, {
+          fill: 'transparent',
+          stroke: '#000000',
+          strokeWidth: 1,
+          selectable: false,
+          fontSize: roof.fontSize,
+          name: 'roofPolygon',
+          attributes: {
+            roofId: roof.id,
+            currentRoof: currentRoof.id,
+            pitch: currentRoof.attributes.pitch,
+            degree: currentRoof.attributes.degree,
+            direction: currentRoof.direction,
+          },
+        })
+        const currentDegree = currentRoof.attributes.pitch > 0 ? getDegreeByChon(currentRoof.attributes.pitch) : currentRoof.attributes.degree
+        //지붕 각도에 따른 실측치 조정
+        roofPolygon.lines.forEach((line) => {
+          line.attributes.planeSize = Math.round(Math.sqrt(Math.pow(line.x2 - line.x1, 2) + Math.pow(line.y2 - line.y1, 2)) * 10)
+          const slope = (line) => (line.x2 - line.x1 === 0 ? Infinity : (line.y2 - line.y1) / (line.x2 - line.x1))
+
+          if (currentDegree > 0 && slope(line) !== slope(currentRoof)) {
+            const height = Math.tan(currentDegree * (Math.PI / 180)) * line.attributes.planeSize
+            line.attributes.actualSize = Math.round(Math.sqrt(Math.pow(line.attributes.planeSize, 2) + Math.pow(height, 2)))
+          } else {
+            line.attributes.actualSize = line.attributes.planeSize
+          }
+        })
+        roof.separatePolygon.push(roofPolygon)
+        canvas.add(roofPolygon)
+        canvas.renderAll()
+      }
+    })
+
+    duplicatedEaves.forEach((duplicatedEave) => {
+      const currentRoof = duplicatedEave[0]
+      let points = []
+      duplicatedEave.forEach((eave) => {
+        points.push({ x: eave.x1, y: eave.y1 }, { x: eave.x2, y: eave.y2 })
+        const currentRidges = ridges.filter((ridge) => ridge.attributes.currentRoof.includes(eave.id))
+        currentRidges.forEach((ridge) => {
+          points.push({ x: ridge.x1, y: ridge.y1 }, { x: ridge.x2, y: ridge.y2 })
+        })
+      })
+      console.log('points', points)
+      points = points.filter((point, index, self) => index === self.findIndex((p) => p.x === point.x && p.y === point.y))
+      //point 정렬 (가장 좌측, 최상단의 점을 기준으로 삼는다.)
+
+      const startPoint = points
+        .filter((point) => point.x === Math.min(...points.map((point) => point.x)))
+        .reduce((prev, current) => {
+          return prev.y < current.y ? prev : current
+        })
+
+      const sortedPoints = []
+      sortedPoints.push(startPoint)
+
+      points.forEach((p, index) => {
+        if (index === 0) {
+          //시작점 다음 점 찾기, y좌표가 startPoint.y 보다 큰 점 중 x좌표가 가까운 점
+          const underStartPoint = points.filter((point) => point.y > startPoint.y)
+          const nextPoint = underStartPoint
+            .filter((point) => point.x === startPoint.x)
+            .reduce((prev, current) => {
+              if (prev === undefined) {
+                return current
+              }
+              return Math.abs(prev.y - startPoint.y) < Math.abs(current.y - startPoint.y) ? prev : current
+            }, undefined)
+          if (nextPoint) {
+            sortedPoints.push(nextPoint)
+          } else {
+            const nextPoint = underStartPoint.reduce((prev, current) => {
+              const prevHypos = Math.sqrt(Math.abs(Math.pow(prev.x - startPoint.x, 2)) + Math.abs(Math.pow(prev.y - startPoint.y, 2)))
+              const currentHypos = Math.sqrt(Math.abs(Math.pow(current.x - startPoint.x, 2)) + Math.abs(Math.pow(current.y - startPoint.y, 2)))
+              return prevHypos < currentHypos ? prev : current
+            }, undefined)
+            sortedPoints.push(nextPoint)
+          }
+        } else {
+          const lastPoint = sortedPoints[sortedPoints.length - 1]
+          console.log('lastPoint', lastPoint)
+          const prevPoint = sortedPoints[sortedPoints.length - 2]
+          const otherPoints = points.filter((point) => sortedPoints.includes(point) === false)
+          const nextPoint = otherPoints.reduce((prev, current) => {
+            if (prev === undefined) {
+              const height = Math.abs(Math.sqrt(Math.abs(Math.pow(prevPoint.x - lastPoint.x, 2)) + Math.abs(Math.pow(prevPoint.y - lastPoint.y, 2))))
+              const adjacent = Math.abs(Math.sqrt(Math.abs(Math.pow(current.x - lastPoint.x, 2)) + Math.abs(Math.pow(current.y - lastPoint.y, 2))))
+              const hypotenuse = Math.abs(Math.sqrt(Math.abs(Math.pow(current.x - prevPoint.x, 2)) + Math.abs(Math.pow(current.y - prevPoint.y, 2))))
+
+              const angle = Math.round(
+                Math.acos((Math.pow(adjacent, 2) + Math.pow(height, 2) - Math.pow(hypotenuse, 2)) / (2 * adjacent * height)) * (180 / Math.PI),
+              )
+              if (angle === 90) {
+                return current
+              }
+            } else {
+              return prev
+            }
+          }, undefined)
+          if (nextPoint) {
+            sortedPoints.push(nextPoint)
+          } else {
+            const nextPoint = otherPoints.reduce((prev, current) => {
+              if (prev !== undefined) {
+                const height = Math.abs(
+                  Math.sqrt(Math.abs(Math.pow(prevPoint.x - lastPoint.x, 2)) + Math.abs(Math.pow(prevPoint.y - lastPoint.y, 2))),
+                )
+                const adjacentC = Math.abs(Math.sqrt(Math.abs(Math.pow(current.x - lastPoint.x, 2)) + Math.abs(Math.pow(current.y - lastPoint.y, 2))))
+                const hypotenuseC = Math.abs(
+                  Math.sqrt(Math.abs(Math.pow(current.x - prevPoint.x, 2)) + Math.abs(Math.pow(current.y - prevPoint.y, 2))),
+                )
+                const angleC = Math.round(
+                  Math.acos((Math.pow(adjacentC, 2) + Math.pow(height, 2) - Math.pow(hypotenuseC, 2)) / (2 * adjacentC * height)) * (180 / Math.PI),
+                )
+                const adjacentP = Math.abs(Math.sqrt(Math.abs(Math.pow(prev.x - lastPoint.x, 2)) + Math.abs(Math.pow(prev.y - lastPoint.y, 2))))
+                const hypotenuseP = Math.abs(Math.sqrt(Math.abs(Math.pow(prev.x - prevPoint.x, 2)) + Math.abs(Math.pow(prev.y - prevPoint.y, 2))))
+                const angleP = Math.round(
+                  Math.acos((Math.pow(adjacentP, 2) + Math.pow(height, 2) - Math.pow(hypotenuseP, 2)) / (2 * adjacentP * height)) * (180 / Math.PI),
+                )
+                if (Math.abs(90 - angleC) < Math.abs(90 - angleP)) {
+                  return current
+                } else {
+                  return prev
+                }
+              } else {
+                return current
+              }
+            }, undefined)
+            if (nextPoint) {
+              sortedPoints.push(nextPoint)
+            }
+          }
+        }
+      })
+
+      if (sortedPoints.length > 0) {
+        const roofPolygon = new QPolygon(sortedPoints, {
+          fill: 'transparent',
+          stroke: '#000000',
+          strokeWidth: 1,
+          selectable: false,
+          fontSize: roof.fontSize,
+          name: 'roofPolygon',
+          attributes: {
+            roofId: roof.id,
+            currentRoof: currentRoof.id,
+            pitch: currentRoof.attributes.pitch,
+            degree: currentRoof.attributes.degree,
+            direction: currentRoof.direction,
+          },
+        })
+        const currentDegree = currentRoof.attributes.pitch > 0 ? getDegreeByChon(currentRoof.attributes.pitch) : currentRoof.attributes.degree
+        //지붕 각도에 따른 실측치 조정
+        roofPolygon.lines.forEach((line) => {
+          line.attributes.planeSize = Math.round(Math.sqrt(Math.pow(line.x2 - line.x1, 2) + Math.pow(line.y2 - line.y1, 2)) * 10)
+          const slope = (line) => (line.x2 - line.x1 === 0 ? Infinity : (line.y2 - line.y1) / (line.x2 - line.x1))
+
+          if (currentDegree > 0 && slope(line) !== slope(currentRoof)) {
+            const height = Math.tan(currentDegree * (Math.PI / 180)) * line.attributes.planeSize
+            line.attributes.actualSize = Math.round(Math.sqrt(Math.pow(line.attributes.planeSize, 2) + Math.pow(height, 2)))
+          } else {
+            line.attributes.actualSize = line.attributes.planeSize
+          }
+        })
+        roof.separatePolygon.push(roofPolygon)
+        canvas.add(roofPolygon)
+        canvas.renderAll()
+      }
+    })
+    console.log('roof.separatePolygon : ', roof.separatePolygon)
+
+    ridges.forEach((ridge) => ridge.bringToFront())
+    console.log('ridges : ', ridges)
   }
 
   //형 올림내림 마우스 클릭 이벤트
@@ -295,18 +768,18 @@ export function useMovementSetting(id) {
     if (Math.sign(target.x1 - target.x2) !== 0) {
       if (targetTop > currentY) {
         FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = true
-        FLOW_LINE_REF.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.round(targetTop - currentY)) / 10000).toFixed(5) * 100000)
+        FLOW_LINE_REF.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.abs(Math.round(targetTop - currentY))) / 10000).toFixed(5) * 100000)
       } else {
         FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked = true
-        FLOW_LINE_REF.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.round(targetTop - currentY)) / 10000).toFixed(5) * 100000)
+        FLOW_LINE_REF.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.abs(Math.round(targetTop - currentY))) / 10000).toFixed(5) * 100000)
       }
     } else {
-      if (targetLeft > currentX) {
+      if (targetLeft < currentX) {
         FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = true
-        FLOW_LINE_REF.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.round(currentX - targetLeft)) / 10000).toFixed(5) * 100000)
+        FLOW_LINE_REF.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.abs(Math.round(currentX - targetLeft))) / 10000).toFixed(5) * 100000)
       } else {
         FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked = true
-        FLOW_LINE_REF.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.round(currentX - targetLeft)) / 10000).toFixed(5) * 100000)
+        FLOW_LINE_REF.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.abs(Math.round(currentX - targetLeft))) / 10000).toFixed(5) * 100000)
       }
     }
 

src/hooks/useMode.js

@@ -1719,6 +1719,25 @@ export function useMode() {
   }
 
   const drawRoofPolygon = (wall) => {
+    const startLine = wall.lines
+      .filter((line) => line.x1 === Math.min(...wall.lines.map((line) => line.x1)))
+      .reduce((prev, current) => {
+        return prev.y1 < current.y1 ? prev : current
+      })
+
+    const beforeLine = [],
+      afterLine = []
+    let startIndex = wall.lines.findIndex((line) => line === startLine)
+    wall.lines.forEach((line, index) => {
+      if (index < startIndex) {
+        beforeLine.push(line)
+      } else {
+        afterLine.push(line)
+      }
+    })
+
+    wall.lines = afterLine.concat(beforeLine)
+
     const polygon = createRoofPolygon(wall.points)
     const originPolygon = new QPolygon(wall.points, { fontSize: 0 })
     originPolygon.setViewLengthText(false)

src/locales/ja.json

@@ -44,6 +44,7 @@
   "plan.menu.roof.cover.eaves.kerava.edit": "처마·케라바 변경",
   "plan.menu.roof.cover.movement.shape.updown": "동선이동·형올림내림(JA)",
   "modal.movement.flow.line.move": "銅線の移動軒",
+  "modal.movement.flow.line.move.alert": "이동 할 수 없습니다.(JA)",
   "modal.movement.flow.line.updown": "型上げ・降り",
   "modal.movement.flow.line.updown.info": "を選択して幅を指定してください桁の異なる辺。",
   "modal.movement.flow.line.updown.up": "桁を上げる",

src/locales/ko.json

@@ -44,6 +44,7 @@
   "plan.menu.roof.cover.eaves.kerava.edit": "처마·케라바 변경",
   "plan.menu.roof.cover.movement.shape.updown": "동선이동·형올림내림",
   "modal.movement.flow.line.move": "동선 이동",
+  "modal.movement.flow.line.move.alert": "이동 할 수 없습니다.",
   "modal.movement.flow.line.updown": "형 올림·내림",
   "modal.movement.flow.line.updown.info": "자릿수가 다른 변을 선택하고 폭을 지정하십시오.",
   "modal.movement.flow.line.updown.up": "자릿수를 올리다",

src/util/qpolygon-utils.js

@@ -317,7 +317,7 @@ export const drawGabledRoof = (roofId, canvas) => {
   // 처마라인의 기본속성 입력
   const eaves = []
   roofLines.forEach((currentRoof, index) => {
-    if (currentRoof.attributes !== undefined && currentRoof.attributes.type === LINE_TYPE.WALLLINE.EAVES) {
+    if (currentRoof.attributes?.type === LINE_TYPE.WALLLINE.EAVES) {
       eaves.push({ index: index, roof: currentRoof, length: currentRoof.attributes.planeSize })
     }
   })
@@ -325,291 +325,147 @@ export const drawGabledRoof = (roofId, canvas) => {
   const ridges = []
   eaves.sort((a, b) => a.length - b.length)
 
-  eaves.forEach((eave) => {
+  eaves.forEach((eave, i) => {
-    if (ridges.length < ridgeCount) {
-      const index = eave.index,
-        currentRoof = eave.roof
-      const currentWall = wallLines[index]
-
-      //현재 지붕의 중심 좌표
-      const midX = Math.round(((currentRoof.x1 + currentRoof.x2) / 2) * 10) / 10
-      const midY = Math.round(((currentRoof.y1 + currentRoof.y2) / 2) * 10) / 10
-      const deltaX = currentWall.x2 - currentWall.x1
-      const deltaY = currentWall.y2 - currentWall.y1
-      const length = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
-      // currentWall 과 직각인 기울기 계산
-      const perpendicularDeltaX = deltaY / length
-      const perpendicularDeltaY = -deltaX / length
-      // midX와 midY를 기준으로 직각 기울기를 사용하여 midWallX와 midWallY 계산
-      const midWallX = midX + perpendicularDeltaX * length
-      const midWallY = midY + perpendicularDeltaY * length
-
-      const signX = Math.sign(midX - midWallX)
-      const signY = Math.sign(midY - midWallY)
-      const checkX = Math.round((midX - signX * checkLength) * 10) / 10
-      const checkY = Math.round((midY - signY * checkLength) * 10) / 10
-
-      const intersectLines = []
-      // 현재 지붕의 맞은편 지붕을 찾는다.
-      roofLines
-        .filter((line) => line !== currentRoof)
-        .forEach((line) => {
-          const intersect = edgesIntersection(
-            { vertex1: { x: midX, y: midY }, vertex2: { x: checkX, y: checkY } },
-            { vertex1: { x: line.x1, y: line.y1 }, vertex2: { x: line.x2, y: line.y2 } },
-          )
-          if (intersect && !intersect.isIntersectionOutside) {
-            intersectLines.push({ x: intersect.x, y: intersect.y, line: line })
-          }
-        })
-
-      // 가장 가까운 지붕을 찾는다.
-      const intersect = intersectLines.reduce((prev, current) => {
-        if (prev !== undefined) {
-          const prevDistance = Math.sqrt(Math.pow(prev.x - midX, 2) + Math.pow(prev.y - midY, 2))
-          const currentDistance = Math.sqrt(Math.pow(current.x - midX, 2) + Math.pow(current.y - midY, 2))
-          return prevDistance >= currentDistance ? current : prev
-        } else {
-          return current
-        }
-      }, undefined)
-
-      const linesCenterX = Math.round(((midX + intersect.x) / 2) * 10) / 10
-      const linesCenterY = Math.round(((midY + intersect.y) / 2) * 10) / 10
-
-      let addLength = currentRoof.attributes.planeSize / 2 / 10
-
-      let centerLineX1 = Math.sign(currentRoof.x1 - currentRoof.x2) * addLength + linesCenterX
-      let centerLineY1 = Math.sign(currentRoof.y1 - currentRoof.y2) * addLength + linesCenterY
-      let centerLineX2 = Math.sign(currentRoof.x2 - currentRoof.x1) * addLength + linesCenterX
-      let centerLineY2 = Math.sign(currentRoof.y2 - currentRoof.y1) * addLength + linesCenterY
-
-      const point1Intersect = []
-      const point2Intersect = []
-      roofLines.forEach((line) => {
-        const point1 = edgesIntersection(
-          { vertex1: { x: linesCenterX, y: linesCenterY }, vertex2: { x: centerLineX1, y: centerLineY1 } },
-          { vertex1: { x: line.x1, y: line.y1 }, vertex2: { x: line.x2, y: line.y2 } },
-        )
-        if (point1 && !point1.isIntersectionOutside) {
-          point1Intersect.push({ x: point1.x, y: point1.y })
-        }
-        const point2 = edgesIntersection(
-          { vertex1: { x: linesCenterX, y: linesCenterY }, vertex2: { x: centerLineX2, y: centerLineY2 } },
-          { vertex1: { x: line.x1, y: line.y1 }, vertex2: { x: line.x2, y: line.y2 } },
-        )
-        if (point2 && !point2.isIntersectionOutside) {
-          point2Intersect.push({ x: point2.x, y: point2.y })
-        }
-      })
-      point1Intersect.reduce((prev, current) => {
-        if (prev !== undefined) {
-          const prevDistance = Math.sqrt(Math.pow(prev.x - linesCenterX, 2) + Math.pow(prev.y - linesCenterY, 2))
-          const currentDistance = Math.sqrt(Math.pow(current.x - linesCenterX, 2) + Math.pow(current.y - linesCenterY, 2))
-          return prevDistance >= currentDistance ? current : prev
-        } else {
-          return current
-        }
-      }, undefined)
-      point2Intersect.reduce((prev, current) => {
-        if (prev !== undefined) {
-          const prevDistance = Math.sqrt(Math.pow(prev.x - linesCenterX, 2) + Math.pow(prev.y - linesCenterY, 2))
-          const currentDistance = Math.sqrt(Math.pow(current.x - linesCenterX, 2) + Math.pow(current.y - linesCenterY, 2))
-          return prevDistance >= currentDistance ? current : prev
-        } else {
-          return current
-        }
-      }, undefined)
-
-      if (point1Intersect.length > 0) {
-        centerLineX1 = point1Intersect[0].x
-        centerLineY1 = point1Intersect[0].y
-      }
-      if (point2Intersect.length > 0) {
-        centerLineX2 = point2Intersect[0].x
-        centerLineY2 = point2Intersect[0].y
-      }
-
-      const ridge = new QLine([centerLineX1, centerLineY1, centerLineX2, centerLineY2], {
-        fontSize: roof.fontSize,
-        stroke: '#1083E3',
-        strokeWidth: 2,
-        name: LINE_TYPE.SUBLINE.RIDGE,
-        attributes: { roofId: roof.id, currentRoof: currentRoof.id },
-      })
-      canvas.add(ridge)
-      canvas.renderAll()
-      ridges.push(ridge)
-      roof.innerLines.push(ridge)
-    }
-  })
-  eaves.forEach((eave) => {
     const index = eave.index,
       currentRoof = eave.roof
     const currentWall = wallLines[index]
-    const prevRoof = index === 0 ? roofLines[wallLines.length - 1] : roofLines[index - 1]
-    const nextRoof = index === roofLines.length - 1 ? roofLines[0] : index === roofLines.length ? roofLines[1] : roofLines[index + 1]
 
-    const midX = Math.round(((currentRoof.x1 + currentRoof.x2) / 2) * 10) / 10
+    const oppositeLine = roofLines
-    const midY = Math.round(((currentRoof.y1 + currentRoof.y2) / 2) * 10) / 10
+      .filter((line) => line !== currentRoof) // 현재 벽라인을 제외한 나머지 벽라인
-    const deltaX = currentWall.x2 - currentWall.x1
+      .filter((line) => {
-    const deltaY = currentWall.y2 - currentWall.y1
+        if (currentRoof.x1 === currentRoof.x2) {
-    const length = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
+          const vector = Math.sign(currentRoof.y1 - currentRoof.y2)
-    // currentWall 과 직각인 기울기 계산
+          const vector2 = Math.sign(currentRoof.x1 - currentWall.x1)
-    const perpendicularDeltaX = deltaY / length
+          return line.x1 === line.x2 && Math.sign(line.y1 - line.y2) === -vector && Math.sign(currentRoof.x1 - line.x1) === vector2
-    const perpendicularDeltaY = -deltaX / length
+        }
-    // midX와 midY를 기준으로 직각 기울기를 사용하여 midWallX와 midWallY 계산
+        if (currentRoof.y1 === currentRoof.y2) {
-    const midWallX = midX + perpendicularDeltaX * length
+          const vector = Math.sign(currentRoof.x1 - currentRoof.x2)
-    const midWallY = midY + perpendicularDeltaY * length
+          const vector2 = Math.sign(currentRoof.y1 - currentWall.y1)
-    const signX = Math.sign(midX - midWallX)
+          return line.y1 === line.y2 && Math.sign(line.x1 - line.x2) === -vector && Math.sign(currentRoof.y1 - line.y1) === vector2
-    const signY = Math.sign(midY - midWallY)
+        }
+      }) // 현재 벽라인과 직교하는 벽라인
 
+    console.log('oppositeLine', oppositeLine)
+
+    // 현재 벽라인과 직교하는 벽라인 사이에 마루를 그린다.
+    oppositeLine.forEach((line) => {
+      let points // 마루의 시작점과 끝점
+      if (currentRoof.x1 === currentRoof.x2) {
+        const currentRoofYRange = [Math.min(currentRoof.y1, currentRoof.y2), Math.max(currentRoof.y1, currentRoof.y2)]
+        const lineYRange = [Math.min(line.y1, line.y2), Math.max(line.y1, line.y2)]
+        const overlapYRange = [Math.max(currentRoofYRange[0], lineYRange[0]), Math.min(currentRoofYRange[1], lineYRange[1])]
+        if (overlapYRange[1] - overlapYRange[0] > 0) {
+          const centerX = Math.round(((currentRoof.x1 + line.x1) / 2) * 10) / 10
+          points = [centerX, overlapYRange[0], centerX, overlapYRange[1]]
+        }
+      }
+      if (currentRoof.y1 === currentRoof.y2) {
+        const currentRoofXRange = [Math.min(currentRoof.x1, currentRoof.x2), Math.max(currentRoof.x1, currentRoof.x2)]
+        const lineXRange = [Math.min(line.x1, line.x2), Math.max(line.x1, line.x2)]
+        const overlapXRange = [Math.max(currentRoofXRange[0], lineXRange[0]), Math.min(currentRoofXRange[1], lineXRange[1])]
+        if (overlapXRange[1] - overlapXRange[0] > 0) {
+          const centerY = Math.round(((currentRoof.y1 + line.y1) / 2) * 10) / 10
+          points = [overlapXRange[0], centerY, overlapXRange[1], centerY]
+        }
+      }
+      // 마루를 그린다.
+      if (points) {
+        const ridge = new QLine(points, {
+          fontSize: roof.fontSize,
+          stroke: '#1083E3',
+          strokeWidth: 1,
+          name: LINE_TYPE.SUBLINE.RIDGE,
+          attributes: { roofId: roof.id, currentRoof: [currentRoof.id] },
+          visible: false,
+        })
+        const duplicateRidge = ridges.find(
+          (ridge) => ridge.x1 === points[0] && ridge.y1 === points[1] && ridge.x2 === points[2] && ridge.y2 === points[3],
+        )
+        // 중복된 마루는 제외한다.
+        if (duplicateRidge) {
+          duplicateRidge.attributes.currentRoof.push(currentRoof.id)
+        } else {
+          canvas.add(ridge)
+          canvas.renderAll()
+          ridges.push(ridge)
+        }
+      }
+    })
+  })
+  // 처마마다 지붕 polygon 을 그린다.
+  eaves.forEach((eave, i) => {
+    const index = eave.index,
+      currentRoof = eave.roof
+    const currentWall = wallLines[index]
+    const currentRidges = ridges.filter((ridge) => ridge.attributes.currentRoof.includes(eave.roof.id))
     let points = []
-    const intersectRidge = []
+    const signX = Math.sign(currentRoof.x1 - currentRoof.x2)
-    // 현재 roof 가 wall 보다 작을때 이전, 다음 지붕의 offset 만큼 포인트를 조정한다.
+    let currentX1 = currentRoof.x1,
-    if (currentRoof.attributes.planeSize > currentWall.attributes.planeSize) {
+      currentY1 = currentRoof.y1,
-      points.push({ x: currentRoof.x1, y: currentRoof.y1 }, { x: currentRoof.x2, y: currentRoof.y2 })
+      currentX2 = currentRoof.x2,
-    } else if (currentRoof.attributes.planeSize === currentWall.attributes.planeSize) {
+      currentY2 = currentRoof.y2
-      const deltaX = currentRoof.x2 - currentRoof.x1
+    let changeX1 = [Math.min(currentRoof.x1, currentRoof.x2), Math.min(currentRoof.x1, currentRoof.x2)],
-      const deltaY = currentRoof.y2 - currentRoof.y1
+      changeY1 = [Math.min(currentRoof.y1, currentRoof.y2), Math.min(currentRoof.y1, currentRoof.y2)],
-      let x1 = currentRoof.x1,
+      changeX2 = [Math.max(currentRoof.x2, currentRoof.x1), Math.max(currentRoof.x2, currentRoof.x1)],
-        y1 = currentRoof.y1,
+      changeY2 = [Math.max(currentRoof.y2, currentRoof.y1), Math.max(currentRoof.y2, currentRoof.y1)]
-        x2 = currentRoof.x2,
-        y2 = currentRoof.y2
 
-      if (deltaX !== 0) {
+    if (signX === 0) {
-        const minX = Math.min(currentRoof.x1, currentRoof.x2, currentWall.x1, currentWall.x2)
+      currentY1 = Math.min(currentRoof.y1, currentRoof.y2, currentWall.y1, currentWall.y2)
-        const maxX = Math.max(currentRoof.x1, currentRoof.x2, currentWall.x1, currentWall.x2)
+      changeY1[1] = currentY1
-        if (x1 > x2) {
+      currentY2 = Math.max(currentRoof.y1, currentRoof.y2, currentWall.y1, currentWall.y2)
-          x1 = maxX
+      changeY2[1] = currentY2
-          x2 = minX
-        } else {
-          x1 = minX
-          x2 = maxX
-        }
-      }
-      if (deltaY !== 0) {
-        const minY = Math.min(currentRoof.y1, currentRoof.y2, currentWall.y1, currentWall.y2)
-        const maxY = Math.max(currentRoof.y1, currentRoof.y2, currentWall.y1, currentWall.y2)
-        if (y1 > y2) {
-          y1 = maxY
-          y2 = minY
-        } else {
-          y1 = minY
-          y2 = maxY
-        }
-      }
-      points.push({ x: x1, y: y1 }, { x: x2, y: y2 })
     } else {
-      const deltaX = currentRoof.x2 - currentRoof.x1
+      currentX1 = Math.min(currentRoof.x1, currentRoof.x2, currentWall.x1, currentWall.x2)
-      const deltaY = currentRoof.y2 - currentRoof.y1
+      changeX1[1] = currentX1
-      points.push(
+      currentX2 = Math.max(currentRoof.x1, currentRoof.x2, currentWall.x1, currentWall.x2)
-        { x: currentRoof.x1 - Math.sign(deltaX) * prevRoof.attributes.offset, y: currentRoof.y1 - Math.sign(deltaY) * prevRoof.attributes.offset },
+      changeX2[1] = currentX2
-        { x: currentRoof.x2 + Math.sign(deltaX) * nextRoof.attributes.offset, y: currentRoof.y2 + Math.sign(deltaY) * nextRoof.attributes.offset },
-      )
     }
-    ridges.forEach((ridge) => {
+    points.push({ x: currentX1, y: currentY1 }, { x: currentX2, y: currentY2 })
-      const ridgeMidX = (ridge.x1 + ridge.x2) / 2
-      const ridgeMidY = (ridge.y1 + ridge.y2) / 2
-      if (midX === ridgeMidX || midY === ridgeMidY) {
-        const intersection = edgesIntersection(
-          { vertex1: { x: midX, y: midY }, vertex2: { x: ridgeMidX, y: ridgeMidY } },
-          { vertex1: { x: ridge.x1, y: ridge.y1 }, vertex2: { x: ridge.x2, y: ridge.y2 } },
-        )
-        if (intersection && !intersection.isIntersectionOutside) {
-          intersectRidge.push({ line: ridge })
-        }
-      }
-      if (Math.sign(midX - ridgeMidX) === signX || Math.sign(midY - ridgeMidY) === signY) {
-        const prevIntersect = edgesIntersection(
-          { vertex1: { x: prevRoof.x1, y: prevRoof.y1 }, vertex2: { x: prevRoof.x2, y: prevRoof.y2 } },
-          { vertex1: { x: ridge.x1, y: ridge.y1 }, vertex2: { x: ridge.x2, y: ridge.y2 } },
-        )
-        const nextIntersect = edgesIntersection(
-          { vertex1: { x: nextRoof.x1, y: nextRoof.y1 }, vertex2: { x: nextRoof.x2, y: nextRoof.y2 } },
-          { vertex1: { x: ridge.x1, y: ridge.y1 }, vertex2: { x: ridge.x2, y: ridge.y2 } },
-        )
-        if (prevIntersect && !prevIntersect.isIntersectionOutside) {
-          intersectRidge.push({ line: ridge })
-        }
-        if (nextIntersect && !nextIntersect.isIntersectionOutside) {
-          intersectRidge.push({ line: ridge })
-        }
-      }
-    })
 
-    intersectRidge.forEach((intersect) => {
+    currentRidges.forEach((ridge) => {
-      const line = intersect.line
+      let ridgeX1 = ridge.x1,
-      if (currentRoof.attributes.planeSize > currentWall.attributes.planeSize) {
+        ridgeY1 = ridge.y1,
-        points.push({ x: line.x1, y: line.y1 }, { x: line.x2, y: line.y2 })
+        ridgeX2 = ridge.x2,
-      } else if (currentRoof.attributes.planeSize === currentWall.attributes.planeSize) {
+        ridgeY2 = ridge.y2
-        const deltaX = currentRoof.x2 - currentRoof.x1
+      if (signX === 0) {
-        const deltaY = currentRoof.y2 - currentRoof.y1
+        ridgeY1 = Math.min(ridge.y1, ridge.y2)
-        let x1 = line.x1,
+        ridgeY2 = Math.max(ridge.y1, ridge.y2)
-          y1 = line.y1,
-          x2 = line.x2,
-          y2 = line.y2
-        if (deltaX !== 0) {
-          const minX = Math.min(currentWall.x1, currentWall.x2, currentRoof.x1, currentRoof.x2, line.x1, line.x2)
-          const maxX = Math.max(currentWall.x1, currentWall.x2, currentRoof.x1, currentRoof.x2, line.x1, line.x2)
-          if (x1 > x2) {
-            x1 = maxX
-            x2 = minX
-          } else {
-            x1 = minX
-            x2 = maxX
-          }
-        }
-        if (deltaY !== 0) {
-          const minY = Math.min(currentWall.y1, currentWall.y2, currentRoof.y1, currentRoof.y2, line.y1, line.y2)
-          const maxY = Math.max(currentWall.y1, currentWall.y2, currentRoof.y1, currentRoof.y2, line.y1, line.y2)
-          if (y1 > y2) {
-            y1 = maxY
-            y2 = minY
-          } else {
-            y1 = minY
-            y2 = maxY
-          }
-        }
-        points.push({ x: x1, y: y1 }, { x: x2, y: y2 })
       } else {
-        let lineX1 = line.x1,
+        ridgeX1 = Math.min(ridge.x1, ridge.x2)
-          lineY1 = line.y1,
+        ridgeX2 = Math.max(ridge.x1, ridge.x2)
-          lineX2 = line.x2,
-          lineY2 = line.y2
-        const prevCheck1 = Math.sqrt(Math.pow(Math.round(lineX1 - currentRoof.x1), 2) + Math.pow(Math.round(lineY1 - currentRoof.y1), 2))
-        const prevCheck2 = Math.sqrt(Math.pow(Math.round(lineX2 - currentRoof.x1), 2) + Math.pow(Math.round(lineY2 - currentRoof.y1), 2))
-        const deltaX = currentRoof.x2 - currentRoof.x1
-        const deltaY = currentRoof.y2 - currentRoof.y1
-        if (prevCheck1 < prevCheck2) {
-          lineX1 = lineX1 - Math.sign(deltaX) * prevRoof.attributes.offset
-          lineY1 = lineY1 - Math.sign(deltaY) * prevRoof.attributes.offset
-          lineX2 = lineX2 + Math.sign(deltaX) * nextRoof.attributes.offset
-          lineY2 = lineY2 + Math.sign(deltaY) * nextRoof.attributes.offset
-        } else {
-          lineX1 = lineX1 + Math.sign(deltaX) * prevRoof.attributes.offset
-          lineY1 = lineY1 + Math.sign(deltaY) * prevRoof.attributes.offset
-          lineX2 = lineX2 - Math.sign(deltaX) * nextRoof.attributes.offset
-          lineY2 = lineY2 - Math.sign(deltaY) * nextRoof.attributes.offset
-        }
-        points.push({ x: lineX1, y: lineY1 }, { x: lineX2, y: lineY2 })
       }
-
+      points.push({ x: ridgeX1, y: ridgeY1 }, { x: ridgeX2, y: ridgeY2 })
-      // canvas.remove(ridge)
-      // canvas.renderAll()
     })
-    points = points.filter((point, index, self) => index === self.findIndex((p) => p.x === point.x && p.y === point.y))
 
+    points.forEach((point) => {
+      if (point.x === changeX1[0] && changeX1[0] !== changeX1[1]) {
+        point.x = changeX1[1]
+      }
+      if (point.x === changeX2[0] && changeX2[0] !== changeX2[1]) {
+        point.x = changeX2[1]
+      }
+      if (point.y === changeY1[0] && changeY1[0] !== changeY1[1]) {
+        point.y = changeY1[1]
+      }
+      if (point.y === changeY2[0] && changeY2[0] !== changeY2[1]) {
+        point.y = changeY2[1]
+      }
+    })
+    //중복된 point 제거
+    points = points.filter((point, index, self) => index === self.findIndex((p) => p.x === point.x && p.y === point.y))
+    //point 정렬 (가장 좌측, 최상단의 점을 기준으로 삼는다.)
     const startPoint = points
       .filter((point) => point.x === Math.min(...points.map((point) => point.x)))
       .reduce((prev, current) => {
         return prev.y < current.y ? prev : current
       })
-    const sortedPoints = [startPoint]
+
+    const sortedPoints = []
+    sortedPoints.push(startPoint)
+
     points.forEach((p, index) => {
-      const lastPoint = sortedPoints[sortedPoints.length - 1]
-      console.log('lastPoint', lastPoint)
       if (index === 0) {
+        //시작점 다음 점 찾기, y좌표가 startPoint.y 보다 큰 점 중 x좌표가 가까운 점
         const underStartPoint = points.filter((point) => point.y > startPoint.y)
         const nextPoint = underStartPoint
           .filter((point) => point.x === startPoint.x)
@@ -630,6 +486,8 @@ export const drawGabledRoof = (roofId, canvas) => {
           sortedPoints.push(nextPoint)
         }
       } else {
+        const lastPoint = sortedPoints[sortedPoints.length - 1]
+        console.log('lastPoint', lastPoint)
         const prevPoint = sortedPoints[sortedPoints.length - 2]
         const otherPoints = points.filter((point) => sortedPoints.includes(point) === false)
         const nextPoint = otherPoints.reduce((prev, current) => {
@@ -656,18 +514,14 @@ export const drawGabledRoof = (roofId, canvas) => {
               const height = Math.abs(Math.sqrt(Math.abs(Math.pow(prevPoint.x - lastPoint.x, 2)) + Math.abs(Math.pow(prevPoint.y - lastPoint.y, 2))))
               const adjacentC = Math.abs(Math.sqrt(Math.abs(Math.pow(current.x - lastPoint.x, 2)) + Math.abs(Math.pow(current.y - lastPoint.y, 2))))
               const hypotenuseC = Math.abs(Math.sqrt(Math.abs(Math.pow(current.x - prevPoint.x, 2)) + Math.abs(Math.pow(current.y - prevPoint.y, 2))))
-
               const angleC = Math.round(
                 Math.acos((Math.pow(adjacentC, 2) + Math.pow(height, 2) - Math.pow(hypotenuseC, 2)) / (2 * adjacentC * height)) * (180 / Math.PI),
               )
-
               const adjacentP = Math.abs(Math.sqrt(Math.abs(Math.pow(prev.x - lastPoint.x, 2)) + Math.abs(Math.pow(prev.y - lastPoint.y, 2))))
               const hypotenuseP = Math.abs(Math.sqrt(Math.abs(Math.pow(prev.x - prevPoint.x, 2)) + Math.abs(Math.pow(prev.y - prevPoint.y, 2))))
-
               const angleP = Math.round(
                 Math.acos((Math.pow(adjacentP, 2) + Math.pow(height, 2) - Math.pow(hypotenuseP, 2)) / (2 * adjacentP * height)) * (180 / Math.PI),
               )
-
               if (Math.abs(90 - angleC) < Math.abs(90 - angleP)) {
                 return current
               } else {
@@ -683,10 +537,11 @@ export const drawGabledRoof = (roofId, canvas) => {
         }
       }
     })
+
     if (sortedPoints.length > 0) {
       const roofPolygon = new QPolygon(sortedPoints, {
         fill: 'transparent',
-        stroke: 'blue',
+        stroke: '#1083E3',
         strokeWidth: 2,
         selectable: false,
         fontSize: roof.fontSize,
@@ -717,6 +572,10 @@ export const drawGabledRoof = (roofId, canvas) => {
       canvas.renderAll()
     }
   })
+
+  if (ridges.length > 0) {
+    ridges.forEach((ridge) => roof.innerLines.push(ridge))
+  }
   //기준선 제거
   // ridges.forEach((ridge) => canvas.remove(ridge))
 }
@@ -1049,7 +908,7 @@ const isInnerLine = (prevLine, currentLine, nextLine, line) => {
  * @param line2
  * @returns {boolean}
  */
-const segmentsOverlap = (line1, line2) => {
+export const segmentsOverlap = (line1, line2) => {
   if (line1.y1 === line1.y2 && line2.y1 === line2.y2 && line1.y1 === line2.y1) {
     if ((line1.x1 <= line2.x1 && line1.x2 >= line2.x1) || (line1.x1 <= line2.x2 && line1.x2 >= line2.x2)) {
       return true