외벽선 편집, 오프셋 기능 적용 및 정리

src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx

@@ -74,7 +74,7 @@ export default function Offset({ length1Ref, arrow1Ref, currentWallLineRef }) {
               <div className="eaves-keraba-td">
                 <div className="outline-form">
                   <div className="input-grid mr5" style={{ width: '100px' }}>
-                    <input type="text" className="input-origin block" defaultValue={0} ref={length1Ref} />
+                    <input type="text" className="input-origin block" placeholder={0} ref={length1Ref} />
                   </div>
                   <span className="thin">mm</span>
                 </div>

src/components/floor-plan/modal/wallLineOffset/type/WallLine.jsx

@@ -46,7 +46,7 @@ export default forwardRef(function WallLine({ length1Ref, length2Ref, arrow1Ref,
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '100px' }}>
-                      <input type="text" className="input-origin block" defaultValue={0} readOnly={type !== 1} ref={length1Ref} />
+                      <input type="text" className="input-origin block" placeholder={0} readOnly={type !== 1} ref={length1Ref} />
                     </div>
                     <span className="thin">mm</span>
                   </div>
@@ -80,7 +80,7 @@ export default forwardRef(function WallLine({ length1Ref, length2Ref, arrow1Ref,
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '100px' }}>
-                      <input type="text" className="input-origin block" defaultValue={0} readOnly={type !== 2} ref={length2Ref} />
+                      <input type="text" className="input-origin block" placeholder={0} readOnly={type !== 2} ref={length2Ref} />
                     </div>
                     <span className="thin">mm</span>
                   </div>

src/hooks/roofcover/useOuterLineWall.js

@@ -143,7 +143,6 @@ export function useOuterLineWall(id, propertiesId) {
   const mouseDown = (e) => {
     let pointer = getIntersectMousePoint(e)
     pointer = { x: Big(pointer.x).round(1).toNumber(), y: Big(pointer.y).round(1).toNumber() }
-    console.log('mouseDown', pointer, points)
 
     if (points.length === 0) {
       setPoints((prev) => [...prev, pointer])
@@ -151,14 +150,11 @@ export function useOuterLineWall(id, propertiesId) {
       const lastPoint = points[points.length - 1]
       let newPoint = { x: pointer.x, y: pointer.y }
       const length = distanceBetweenPoints(lastPoint, newPoint)
-      console.log('length', length)
       if (verticalHorizontalMode) {
         const vector = {
           x: Big(pointer.x).minus(Big(points[points.length - 1].x)),
           y: Big(pointer.y).minus(Big(points[points.length - 1].y)),
         }
-        // const slope = Math.abs(vector.y / vector.x) // 기울기 계산
-        console.log('vector', vector.x.toNumber(), vector.y.toNumber(), Math.abs(vector.y.toNumber() / vector.x.toNumber()) >= 1)
         const slope = vector.x.eq(0) ? Big(1) : vector.y.div(vector.x).abs() // 기울기 계산
 
         let scaledVector
@@ -167,13 +163,11 @@ export function useOuterLineWall(id, propertiesId) {
           // 기울기가 1 이상이면 x축 방향으로 그림
           scaledVector = {
             x: 0,
-            // y: vector.y >= 0 ? Number(length) : -Number(length),
             y: vector.y.gte(0) ? Big(length).toNumber() : Big(length).neg().toNumber(),
           }
         } else {
           // 기울기가 1 미만이면 y축 방향으로 그림
           scaledVector = {
-            // x: vector.x >= 0 ? Number(length) : -Number(length),
             x: vector.x.gte(0) ? Big(length).toNumber() : Big(length).neg().toNumber(),
             y: 0,
           }
@@ -182,8 +176,6 @@ export function useOuterLineWall(id, propertiesId) {
         const verticalLength = scaledVector.y
         const horizontalLength = scaledVector.x
 
-        console.log('verticalLength', verticalLength, 'horizontalLength', horizontalLength)
-
         newPoint = {
           x: Big(lastPoint.x).plus(horizontalLength).toNumber(),
           y: Big(lastPoint.y).plus(verticalLength).toNumber(),
@@ -876,8 +868,6 @@ export function useOuterLineWall(id, propertiesId) {
 
     const firstPoint = points[0]
 
-    console.log('points 좌표 : ', points)
-
     points.forEach((point, idx) => {
       if (idx === 0 || !isAllRightAngle) {
         return

src/hooks/roofcover/useRoofShapeSetting.js

@@ -63,13 +63,6 @@ export function useRoofShapeSetting(id) {
   }, [jerkinHeadPitch])
 
   useEffect(() => {
-    const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
-    // if (!outerLineFix || outerLines.length === 0) {
-    //   swalFire({ text: '외벽선이 없습니다.' })
-    //   // setShowRoofShapeSettingModal(false)
-    //   closePopup(id)
-    // }
-
     return () => {
       if (!isFixRef.current) {
         return
@@ -77,6 +70,7 @@ export function useRoofShapeSetting(id) {
 
       const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
       const pitchTexts = canvas.getObjects().filter((obj) => obj.name === 'pitchText')
+
       canvas.remove(...pitchTexts)
       outerLines.forEach((line) => {
         let stroke, strokeWidth
@@ -115,14 +109,6 @@ export function useRoofShapeSetting(id) {
       return
     }
 
-    /*const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
-    outerLines.forEach((line) => {
-      line.set({
-        stroke: '#000000',
-        strokeWidth: 4,
-      })
-    })*/
-
     currentObject.set({
       stroke: '#EA10AC',
       strokeWidth: 4,

src/hooks/roofcover/useWallLineOffsetSetting.js

@@ -6,6 +6,8 @@ import { useEvent } from '@/hooks/useEvent'
 import { useLine } from '@/hooks/useLine'
 import { useSwal } from '@/hooks/useSwal'
 import { usePopup } from '@/hooks/usePopup'
+import Big from 'big.js'
+import { outerLineFixState } from '@/store/outerLineAtom'
 
 // 외벽선 편집 및 오프셋
 export function useWallLineOffsetSetting(id) {
@@ -28,6 +30,8 @@ export function useWallLineOffsetSetting(id) {
 
   const [isLoading, setIsLoading] = useState(false)
 
+  const outerLineFix = useRecoilValue(outerLineFixState)
+
   const drawLine = (point1, point2, idx, direction = currentWallLineRef.current.direction) => {
     const line = addLine([point1.x, point1.y, point2.x, point2.y], {
       stroke: 'black',
@@ -59,7 +63,7 @@ export function useWallLineOffsetSetting(id) {
 
   useEffect(() => {
     const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
-    if (outerLines.length === 0) {
+    if (!outerLineFix || outerLines.length === 0) {
       swalFire({ text: '외벽선이 없습니다.' })
       closePopup(id)
       return
@@ -277,7 +281,7 @@ export function useWallLineOffsetSetting(id) {
       }
     }
 
-    rearrangeOuterLine(currentIdx + 1)
+    reArrangeOuterLine(currentIdx + 1)
 
     drawLine(point1, point2, currentIdx)
     drawLine(point2, point3, currentIdx + 1)
@@ -286,229 +290,217 @@ export function useWallLineOffsetSetting(id) {
     canvas.remove(currentWallLineRef.current)
     currentWallLineRef.current = null
     canvas.renderAll()
+
+    canvas
+      .getObjects()
+      .filter((obj) => obj.name === 'outerLine')
+      .forEach((obj) => obj.fire('modified'))
   }
 
-  const rearrangeOuterLine = (idxParam) => {
+  /**
+   * outreLine의 index를 조절한다.
+   * @param idxParam
+   * @param isNegative
+   */
+  const reArrangeOuterLine = (idxParam, isNegative = false) => {
     const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
     outerLines.forEach((outerLine) => {
       if (outerLine.idx >= idxParam) {
-        outerLine.idx = outerLine.idx + 1
+        outerLine.idx = isNegative ? outerLine.idx - 1 : outerLine.idx + 1
       }
     })
   }
 
+  /**
+   * offset 저장
+   */
   const handleOffsetSave = () => {
-    const direction = currentWallLineRef.current.direction
+    if (!currentObject) return
-    let canDirections = direction === 'left' || direction === 'right' ? ['up', 'down'] : ['left', 'right']
+    const currentLine = currentObject
-    const currentIdx = currentWallLineRef.current.idx
+    const currentVector = currentLine.y1 === currentLine.y2 ? 'horizontal' : 'vertical'
+    const canDirections = currentVector === 'horizontal' ? ['up', 'down'] : ['left', 'right']
     if (!canDirections.includes(arrow1Ref.current)) {
       alert('방향을 다시 선택하세요')
       return
     }
-
     const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+    outerLines.sort((a, b) => a.idx - b.idx)
 
-    const idx = currentWallLineRef.current.idx
+    const currentIdx = currentLine.idx
-    const prevIdx = idx - 1 <= 0 ? outerLines.length : idx - 1
+    const prevIdx = currentIdx - 1 <= 0 ? outerLines.length : currentIdx - 1
-    const nextIdx = idx + 1 > outerLines.length ? 1 : idx + 1
+    const nextIdx = currentLine.idx + 1 > outerLines.length ? 1 : currentIdx + 1
 
-    const currentLine = currentWallLineRef.current
     const prevLine = outerLines.find((line) => line.idx === prevIdx)
     const nextLine = outerLines.find((line) => line.idx === nextIdx)
+    const prevVector = prevLine.y1 === prevLine.y2 ? 'horizontal' : 'vertical'
+    const nextVector = nextLine.y1 === nextLine.y2 ? 'horizontal' : 'vertical'
 
-    const length = length1Ref.current.value / 10
+    const offsetLength = Big(Number(length1Ref.current.value)).div(10)
-    const currentLineX = Math.floor(Math.max(currentLine.x1, currentLine.x2))
+    if (offsetLength.eq(0)) return
-    const currentLineY = Math.floor(Math.max(currentLine.y1, currentLine.y2))
-    switch (arrow1Ref.current) {
-      case 'up': {
-        if (prevLine.direction === currentLine.direction) {
-          const newX =
-            currentLine.direction === 'left'
-              ? Math.floor(Math.max(currentLine.x1, currentLine.x2))
-              : Math.floor(Math.min(currentLine.x1, currentLine.x2))
 
-          const newPoint1 = { x: newX, y: currentLineY - length }
+    const currentLineMinX = Big(Math.max(currentLine.x1, currentLine.x2))
-          const newPoint2 = { x: prevLine.x2, y: prevLine.y2 }
+    const currentLineMaxX = Big(Math.max(currentLine.x1, currentLine.x2))
-          rearrangeOuterLine(currentIdx)
+    const currentLineMinY = Big(Math.max(currentLine.y1, currentLine.y2))
-          drawLine(newPoint1, newPoint2, currentIdx, 'top')
+    const currentLineMaxY = Big(Math.max(currentLine.y1, currentLine.y2))
 
-          if (Math.abs(currentLineY - nextLine.y1) < 2) {
+    if (currentVector === 'horizontal') {
-            nextLine.set({ y1: currentLineY - length })
+      const prevX = currentLine.x1 < currentLine.x2 ? Math.min(currentLine.x1, currentLine.x2) : Math.max(currentLine.x1, currentLine.x2)
-          } else {
+      const nextX = currentLine.x1 < currentLine.x2 ? Math.max(currentLine.x1, currentLine.x2) : Math.min(currentLine.x1, currentLine.x2)
-            nextLine.set({ y2: currentLineY - length })
+      if (arrow1Ref.current === 'up') {
-          }
+        currentLine.set({ y1: currentLineMaxY.minus(offsetLength).toNumber(), y2: currentLineMaxY.minus(offsetLength).toNumber() })
-        } else if (nextLine.direction === currentLine.direction) {
+        if (prevVector === currentVector) {
-          const newX =
+          const point1 = { x: prevX, y: prevLine.y2 }
-            currentLine.direction === 'left'
+          const point2 = { x: prevX, y: currentLine.y1 }
-              ? Math.floor(Math.min(currentLine.x1, currentLine.x2))
+          reArrangeOuterLine(currentIdx)
-              : Math.floor(Math.max(currentLine.x1, currentLine.x2))
+          drawLine(point1, point2, currentIdx, arrow1Ref.current)
-
-          const newPoint1 = { x: newX, y: currentLineY - length }
-          const newPoint2 = { x: nextLine.x1, y: nextLine.y1 }
-          rearrangeOuterLine(currentIdx + 1)
-          drawLine(newPoint1, newPoint2, currentIdx + 1, 'top')
-
-          if (Math.abs(currentLineY - prevLine.y1) < 2) {
-            prevLine.set({ y1: currentLineY - length })
-          } else {
-            prevLine.set({ y2: currentLineY - length })
-          }
         } else {
-          if (Math.abs(currentLineY - prevLine.y1) < 2) {
+          if (Big(prevLine.y1).minus(currentLineMinY).abs().lte(Big(prevLine.y2).minus(currentLineMinY).abs())) {
-            prevLine.set({ y1: prevLine.y1 - length })
+            prevLine.set({ y1: currentLine.y1 })
           } else {
-            prevLine.set({ y2: prevLine.y2 - length })
+            prevLine.set({ y2: currentLine.y1 })
           }
-          if (Math.abs(currentLineY - nextLine.y1) < 2) {
+          if (Big(prevLine.y1).minus(Big(prevLine.y2)).eq(0)) {
-            nextLine.set({ y1: nextLine.y1 - length })
+            reArrangeOuterLine(currentIdx - 1, true)
-          } else {
+            canvas.remove(prevLine)
-            nextLine.set({ y2: nextLine.y2 - length })
+          }
+        }
+        if (nextVector === currentVector) {
+          const point1 = { x: nextX, y: nextLine.y2 }
+          const point2 = { x: nextX, y: currentLine.y1 }
+          reArrangeOuterLine(currentIdx + 1)
+          drawLine(point1, point2, currentIdx + 1, arrow1Ref.current)
+        } else {
+          if (Big(nextLine.y1).minus(currentLineMaxY).abs().lte(Big(nextLine.y2).minus(currentLineMaxY).abs())) {
+            nextLine.set({ y1: currentLine.y1 })
+          } else {
+            nextLine.set({ y2: currentLine.y1 })
+          }
+          if (Big(nextLine.y1).minus(Big(nextLine.y2)).eq(0)) {
+            reArrangeOuterLine(currentIdx + 1, true)
+            canvas.remove(nextLine)
           }
         }
-
-        currentLine.set({ y1: currentLine.y1 - length, y2: currentLine.y2 - length })
-
-        break
       }
-      case 'down': {
+      if (arrow1Ref.current === 'down') {
-        if (prevLine.direction === currentLine.direction) {
+        currentLine.set({ y1: currentLineMaxY.plus(offsetLength).toNumber(), y2: currentLineMaxY.plus(offsetLength).toNumber() })
-          const newX =
+        if (prevVector === currentVector) {
-            currentLine.direction === 'left'
+          const point1 = { x: prevX, y: prevLine.y2 }
-              ? Math.floor(Math.max(currentLine.x1, currentLine.x2))
+          const point2 = { x: prevX, y: currentLine.y1 }
-              : Math.floor(Math.min(currentLine.x1, currentLine.x2))
+          reArrangeOuterLine(currentIdx)
-          const newPoint1 = { x: newX, y: currentLineY + length }
+          drawLine(point1, point2, currentIdx, arrow1Ref.current)
-          const newPoint2 = { x: prevLine.x2, y: prevLine.y2 }
-          rearrangeOuterLine(currentIdx)
-          drawLine(newPoint1, newPoint2, currentIdx, 'bottom')
-          if (Math.abs(currentLineY - nextLine.y1) < 2) {
-            nextLine.set({ y1: currentLineY + length })
-          } else {
-            nextLine.set({ y2: currentLineY + length })
-          }
-        } else if (nextLine.direction === currentLine.direction) {
-          const newX =
-            currentLine.direction === 'left'
-              ? Math.floor(Math.min(currentLine.x1, currentLine.x2))
-              : Math.floor(Math.max(currentLine.x1, currentLine.x2))
-          const newPoint1 = { x: newX, y: currentLineY + length }
-          const newPoint2 = { x: nextLine.x1, y: nextLine.y1 }
-          rearrangeOuterLine(currentIdx + 1)
-          drawLine(newPoint1, newPoint2, currentIdx + 1, 'bottom')
-          if (Math.abs(currentLineY - prevLine.y1) < 2) {
-            prevLine.set({ y1: currentLineY + length })
-          } else {
-            prevLine.set({ y2: currentLineY + length })
-          }
         } else {
-          if (Math.abs(currentLineY - prevLine.y1) < 2) {
+          if (Big(prevLine.y1).minus(currentLineMinY).abs().lte(Big(prevLine.y2).minus(currentLineMinY).abs())) {
-            prevLine.set({ y1: prevLine.y1 + length })
+            prevLine.set({ y1: currentLine.y1 })
           } else {
-            prevLine.set({ y2: prevLine.y2 + length })
+            prevLine.set({ y2: currentLine.y1 })
           }
-          if (Math.abs(currentLineY - nextLine.y1) < 2) {
+          if (Big(prevLine.y1).minus(Big(prevLine.y2)).eq(0)) {
-            nextLine.set({ y1: nextLine.y1 + length })
+            reArrangeOuterLine(currentIdx - 1, true)
-          } else {
+            canvas.remove(prevLine)
-            nextLine.set({ y2: nextLine.y2 + length })
+          }
+        }
+        if (nextVector === currentVector) {
+          const point1 = { x: nextX, y: nextLine.y2 }
+          const point2 = { x: nextX, y: currentLine.y1 }
+          reArrangeOuterLine(currentIdx + 1)
+          drawLine(point1, point2, currentIdx + 1, arrow1Ref.current)
+        } else {
+          if (Big(nextLine.y1).minus(currentLineMaxY).abs().lte(Big(nextLine.y2).minus(currentLineMaxY).abs())) {
+            nextLine.set({ y1: currentLine.y1 })
+          } else {
+            nextLine.set({ y2: currentLine.y1 })
+          }
+          if (Big(nextLine.y1).minus(Big(nextLine.y2)).eq(0)) {
+            reArrangeOuterLine(currentIdx + 1, true)
+            canvas.remove(nextLine)
           }
         }
-
-        currentLine.set({ y1: currentLine.y1 + length, y2: currentLine.y2 + length })
-        break
       }
-      case 'left': {
+    } else {
-        if (prevLine.direction === currentLine.direction) {
+      const prevY = currentLine.y1 < currentLine.y2 ? Math.min(currentLine.y1, currentLine.y2) : Math.max(currentLine.y1, currentLine.y2)
-          const newY =
+      const nextY = currentLine.y1 < currentLine.y2 ? Math.max(currentLine.y1, currentLine.y2) : Math.min(currentLine.y1, currentLine.y2)
-            currentLine.direction === 'top'
+      if (arrow1Ref.current === 'left') {
-              ? Math.floor(Math.max(currentLine.y1, currentLine.y2))
+        currentLine.set({ x1: currentLineMaxX.minus(offsetLength).toNumber(), x2: currentLineMaxX.minus(offsetLength).toNumber() })
-              : Math.floor(Math.min(currentLine.y1, currentLine.y2))
-          const newPoint1 = { x: currentLineX - length, y: newY }
-          const newPoint2 = { x: prevLine.x2, y: prevLine.y2 }
-          rearrangeOuterLine(currentIdx)
-          drawLine(newPoint1, newPoint2, currentIdx, 'left')
-          if (Math.abs(currentLineX - nextLine.x1) < 2) {
-            nextLine.set({ x1: currentLineX - length })
-          } else {
-            nextLine.set({ x2: currentLineX - length })
-          }
-        } else if (nextLine.direction === currentLine.direction) {
-          const newY =
-            currentLine.direction === 'top'
-              ? Math.floor(Math.min(currentLine.y1, currentLine.y2))
-              : Math.floor(Math.max(currentLine.y1, currentLine.y2))
-          const newPoint1 = { x: currentLineX - length, y: newY }
-          const newPoint2 = { x: nextLine.x1, y: nextLine.y1 }
-          rearrangeOuterLine(currentIdx + 1)
-          drawLine(newPoint1, newPoint2, currentIdx + 1, 'left')
-          if (Math.abs(currentLineX - prevLine.x1) < 2) {
-            prevLine.set({ x1: currentLineX - length })
-          } else {
-            prevLine.set({ x2: currentLineX - length })
-          }
-        } else {
-          if (Math.abs(currentLineX - prevLine.x1) < 2) {
-            prevLine.set({ x1: prevLine.x1 - length })
-          } else {
-            prevLine.set({ x2: prevLine.x2 - length })
-          }
 
-          if (Math.abs(currentLineX - nextLine.x1) < 2) {
+        if (prevVector === currentVector) {
-            nextLine.set({ x1: nextLine.x1 - length })
+          const point1 = { x: prevLine.x2, y: prevY }
+          const point2 = { x: currentLine.x1, y: prevY }
+          reArrangeOuterLine(currentIdx)
+          drawLine(point1, point2, currentIdx, arrow1Ref.current)
+        } else {
+          if (Big(prevLine.x1).minus(currentLineMinX).abs().lte(Big(prevLine.x2).minus(currentLineMinX).abs())) {
+            prevLine.set({ x1: currentLine.x1 })
           } else {
-            nextLine.set({ x2: nextLine.x2 - length })
+            prevLine.set({ x2: currentLine.x1 })
+          }
+          if (Big(prevLine.x1).minus(Big(prevLine.x2)).eq(0)) {
+            reArrangeOuterLine(currentIdx - 1, true)
+            canvas.remove(prevLine)
+          }
+        }
+        if (nextVector === currentVector) {
+          const point1 = { x: currentLine.x2, y: nextY }
+          const point2 = { x: nextLine.x1, y: nextY }
+          reArrangeOuterLine(currentIdx + 1)
+          drawLine(point1, point2, currentIdx + 1, arrow1Ref.current)
+        } else {
+          if (Big(nextLine.x1).minus(currentLineMaxX).abs().lte(Big(nextLine.x2).minus(currentLineMaxX).abs())) {
+            nextLine.set({ x1: currentLine.x2 })
+          } else {
+            nextLine.set({ x2: currentLine.x2 })
+          }
+          if (Big(nextLine.x1).minus(Big(nextLine.x2)).eq(0)) {
+            reArrangeOuterLine(currentIdx + 1, true)
+            canvas.remove(nextLine)
           }
         }
-
-        currentLine.set({ x1: currentLine.x1 - length, x2: currentLine.x2 - length })
-        break
       }
-      case 'right': {
+      if (arrow1Ref.current === 'right') {
-        if (prevLine.direction === currentLine.direction) {
+        currentLine.set({ x1: currentLineMaxX.plus(offsetLength).toNumber(), x2: currentLineMaxX.plus(offsetLength).toNumber() })
-          const newY =
-            currentLine.direction === 'top'
-              ? Math.floor(Math.max(currentLine.y1, currentLine.y2))
-              : Math.floor(Math.min(currentLine.y1, currentLine.y2))
-          const newPoint1 = { x: currentLineX + length, y: newY }
-          const newPoint2 = { x: prevLine.x2, y: prevLine.y2 }
-          rearrangeOuterLine(currentIdx)
-          drawLine(newPoint1, newPoint2, currentIdx, 'right')
-          if (Math.abs(currentLineX - nextLine.x1) < 2) {
-            nextLine.set({ x1: currentLineX + length })
-          } else {
-            nextLine.set({ x2: currentLineX + length })
-          }
-        } else if (nextLine.direction === currentLine.direction) {
-          const newY =
-            currentLine.direction === 'top'
-              ? Math.floor(Math.min(currentLine.y1, currentLine.y2))
-              : Math.floor(Math.max(currentLine.y1, currentLine.y2))
-          const newPoint1 = { x: currentLineX + length, y: newY }
-          const newPoint2 = { x: nextLine.x1, y: nextLine.y1 }
-          rearrangeOuterLine(currentIdx + 1)
-          drawLine(newPoint1, newPoint2, currentIdx + 1, 'right')
 
-          if (Math.abs(currentLineX - prevLine.x1) < 2) {
+        if (prevVector === currentVector) {
-            prevLine.set({ x1: currentLineX + length })
+          const point1 = { x: prevLine.x2, y: prevY }
-          } else {
+          const point2 = { x: currentLine.x1, y: prevY }
-            prevLine.set({ x2: currentLineX + length })
+          reArrangeOuterLine(currentIdx)
-          }
+          drawLine(point1, point2, currentIdx, arrow1Ref.current)
         } else {
-          if (Math.abs(currentLineX - prevLine.x1) < 2) {
+          if (Big(prevLine.x1).minus(currentLineMinX).abs().lte(Big(prevLine.x2).minus(currentLineMinX).abs())) {
-            prevLine.set({ x1: prevLine.x1 + length })
+            prevLine.set({ x1: currentLine.x1 })
           } else {
-            prevLine.set({ x2: prevLine.x2 + length })
+            prevLine.set({ x2: currentLine.x1 })
           }
-          if (Math.abs(currentLineX - nextLine.x1) < 2) {
+
-            nextLine.set({ x1: nextLine.x1 + length })
+          if (Big(prevLine.x1).minus(Big(prevLine.x2)).eq(0)) {
-          } else {
+            reArrangeOuterLine(currentIdx - 1, true)
-            nextLine.set({ x2: nextLine.x2 + length })
+            canvas.remove(prevLine)
           }
         }
+        if (nextVector === currentVector) {
+          const point1 = { x: currentLine.x2, y: nextY }
+          const point2 = { x: nextLine.x1, y: nextY }
+          reArrangeOuterLine(currentIdx + 1)
+          drawLine(point1, point2, currentIdx + 1, arrow1Ref.current)
+        } else {
+          if (Big(nextLine.x1).minus(currentLineMaxX).abs().lte(Big(nextLine.x2).minus(currentLineMaxX).abs())) {
+            nextLine.set({ x1: currentLine.x2 })
+          } else {
+            nextLine.set({ x2: currentLine.x2 })
+          }
 
-        currentLine.set({ x1: currentLine.x1 + length, x2: currentLine.x2 + length })
+          if (Big(nextLine.x1).minus(Big(nextLine.x2)).eq(0)) {
-
+            reArrangeOuterLine(currentIdx + 1, true)
-        break
+            canvas.remove(nextLine)
+          }
+        }
       }
     }
+
+    const newOuterLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+    newOuterLines.sort((a, b) => a.idx - b.idx)
+    newOuterLines.forEach((line, idx) => {
+      line.fire('modified')
+    })
+
     canvas.renderAll()
   }
 

src/hooks/useMode.js

@@ -33,7 +33,7 @@ import {
 import { QLine } from '@/components/fabric/QLine'
 import { fabric } from 'fabric'
 import { QPolygon } from '@/components/fabric/QPolygon'
-import offsetPolygon from '@/util/qpolygon-utils'
+import offsetPolygon, { calculateAngle } from '@/util/qpolygon-utils'
 import { isObjectNotEmpty } from '@/util/common-utils'
 import * as turf from '@turf/turf'
 import { INPUT_TYPE, LINE_TYPE, Mode, POLYGON_TYPE } from '@/common/common'
@@ -1771,6 +1771,16 @@ export function useMode() {
     wall.lines = afterLine.concat(beforeLine)
 
     //외벽선을 기준으로 polygon을 생성한다. 지붕선의 기준이 됨.
+    const divWallLines = []
+    wall.lines.forEach((currentWall, index) => {
+      const nextWall = wall.lines[(index + 1) % wall.lines.length]
+      const currentAngle = calculateAngle(currentWall.startPoint, currentWall.endPoint)
+      const nextAngle = calculateAngle(nextWall.startPoint, nextWall.endPoint)
+      if (currentAngle === nextAngle) {
+        divWallLines.push({ currentWall: currentWall, nextWall: nextWall, index: index })
+      }
+    })
+
     const polygon = createRoofPolygon(wall.points)
     const originPolygon = new QPolygon(wall.points, { fontSize: 0 })
     originPolygon.setViewLengthText(false)
@@ -1787,6 +1797,45 @@ export function useMode() {
       offsetPolygon = createPaddingPolygon(polygon, wall.lines).vertices
     }
 
+    if (divWallLines.length > 0) {
+      /**
+       * 외벽선을 분기한 횟수를 저장한다. 외벽선은 offset이 같지 않을때 분기한다.
+       */
+      let addPoint = 0
+
+      divWallLines.forEach((line) => {
+        const currentWall = line.currentWall
+        const nextWall = line.nextWall
+        const index = line.index + addPoint
+        const xDiff = Big(currentWall.x1).minus(Big(nextWall.x1))
+        const yDiff = Big(currentWall.y1).minus(Big(nextWall.y1))
+        const offsetCurrentPoint = offsetPolygon[index]
+        let offsetNextPoint = offsetPolygon[(index + 1) % offsetPolygon.length]
+        line.index = index
+
+        if (currentWall.attributes.offset !== nextWall.attributes.offset) {
+          const offsetPoint1 = {
+            x: xDiff.eq(0) ? offsetCurrentPoint.x : nextWall.x1,
+            y: yDiff.eq(0) ? offsetCurrentPoint.y : nextWall.y1,
+          }
+          const diffOffset = Big(nextWall.attributes.offset).minus(Big(currentWall.attributes.offset))
+          const offsetPoint2 = {
+            x: yDiff.eq(0) ? offsetPoint1.x : Big(offsetPoint1.x).plus(diffOffset).toNumber(),
+            y: xDiff.eq(0) ? offsetPoint1.y : Big(offsetPoint1.y).plus(diffOffset).toNumber(),
+          }
+          const offsetPoint3 = {
+            x: yDiff.eq(0) ? offsetNextPoint.x : Big(offsetNextPoint.x).plus(diffOffset).toNumber(),
+            y: xDiff.eq(0) ? offsetNextPoint.y : Big(offsetNextPoint.y).plus(diffOffset).toNumber(),
+          }
+          offsetPolygon.splice(index + 1, 0, offsetPoint1, offsetPoint2)
+          offsetNextPoint = offsetPoint3
+          addPoint++
+        } else {
+          addPoint--
+        }
+      })
+    }
+
     const roof = makePolygon(
       offsetPolygon.map((point) => {
         return { x1: point.x, y1: point.y }
@@ -1806,6 +1855,8 @@ export function useMode() {
     roof.name = POLYGON_TYPE.ROOF
     roof.setWall(wall)
 
+    let roofWallIndex = 0
+
     roof.lines.forEach((line, index) => {
       const x1 = Big(line.x1)
       const x2 = Big(line.x2)
@@ -1816,18 +1867,21 @@ export function useMode() {
         roofId: roof.id,
         planeSize: lineLength,
         actualSize: lineLength,
-        wallLine: wall.lines[index].id,
+        wallLine: wall.lines[roofWallIndex].id,
-        type: wall.lines[index].attributes.type,
+        type: wall.lines[roofWallIndex].attributes.type,
-        offset: wall.lines[index].attributes.offset,
+        offset: wall.lines[roofWallIndex].attributes.offset,
-        width: wall.lines[index].attributes.width,
+        width: wall.lines[roofWallIndex].attributes.width,
-        pitch: wall.lines[index].attributes.pitch,
+        pitch: wall.lines[roofWallIndex].attributes.pitch,
-        sleeve: wall.lines[index].attributes.sleeve || false,
+        sleeve: wall.lines[roofWallIndex].attributes.sleeve || false,
+      }
+
+      const isDivLine = divWallLines.some((divLine) => divLine.index === index)
+      if (!isDivLine) {
+        roofWallIndex++
       }
     })
 
     wall.set({
-      // originX: 'center',
-      // originY: 'center',
       attributes: {
         roofId: roof.id,
       },
@@ -1846,7 +1900,7 @@ export function useMode() {
       const y2 = Big(line.y2)
       const lineLength = x1.minus(x2).abs().pow(2).plus(y1.minus(y2).abs().pow(2)).sqrt().times(10).round().toNumber()
       line.attributes.roofId = roof.id
-      line.attributes.currentRoofId = roof.lines[index].id
+      // line.attributes.currentRoofId = roof.lines[index].id
       line.attributes.planeSize = lineLength
       line.attributes.actualSize = lineLength
 

src/hooks/usePolygon.js

@@ -1,7 +1,7 @@
-import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, fontFamilyState, fontSizeState, pitchTextSelector } from '@/store/canvasAtom'
+import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
 import { useRecoilValue } from 'recoil'
 import { fabric } from 'fabric'
-import { findAndRemoveClosestPoint, getDegreeByChon, getDegreeInOrientation, getDirectionByPoint, isPointOnLine } from '@/util/canvas-util'
+import { findAndRemoveClosestPoint, getDegreeByChon, getDegreeInOrientation, isPointOnLine } from '@/util/canvas-util'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { isSamePoint, removeDuplicatePolygons } from '@/util/qpolygon-utils'
 import { flowDisplaySelector } from '@/store/settingAtom'

src/util/qpolygon-utils.js

@@ -23,11 +23,11 @@ export const defineQPloygon = () => {
  * @returns {number}
  */
 export const calculateAngle = (point1, point2) => {
-  const deltaX = Big(point2?.x !== undefined ? point2.x : 0)
+  const deltaX = Big(point2.x ?? 0)
-    .minus(point1?.x !== undefined ? point1.x : 0)
+    .minus(point1.x ?? 0)
     .toNumber()
-  const deltaY = Big(point2?.y !== undefined ? point2.y : 0)
+  const deltaY = Big(point2.y ?? 0)
-    .minus(point1?.y !== undefined ? point1.y : 0)
+    .minus(point1.y ?? 0)
     .toNumber()
   const angleInRadians = Math.atan2(deltaY, deltaX)
   return angleInRadians * (180 / Math.PI)
@@ -3525,7 +3525,14 @@ export const calcLinePlaneSize = (points) => {
  * @returns number
  */
 export const calcLineActualSize = (points, degree) => {
+  const { x1, y1, x2, y2 } = points
   const planeSize = calcLinePlaneSize(points)
-  const height = Big(Math.tan(Big(degree).times(Math.PI / 180))).times(planeSize)
+  let height = Big(Math.tan(Big(degree).times(Math.PI / 180))).times(planeSize)
+  /**
+   * 대각선일 경우 높이 계산 변경
+   */
+  if (x1 !== x2 && y1 !== y2) {
+    height = Big(Math.tan(Big(degree).times(Math.PI / 180))).times(Big(x1).minus(x2).times(10).round())
+  }
   return Big(planeSize).pow(2).plus(height.pow(2)).sqrt().abs().round().toNumber()
 }