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" placeholder={0} ref={length1Ref} />
+                    <input type="text" className="input-origin block" defaultValue={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" placeholder={0} readOnly={type !== 1} ref={length1Ref} />
+                      <input type="text" className="input-origin block" defaultValue={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" placeholder={0} readOnly={type !== 2} ref={length2Ref} />
+                      <input type="text" className="input-origin block" defaultValue={0} readOnly={type !== 2} ref={length2Ref} />
                     </div>
                     <span className="thin">mm</span>
                   </div>

src/hooks/roofcover/useOuterLineWall.js

@@ -143,6 +143,7 @@ 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])
@@ -150,11 +151,14 @@ 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
@@ -163,11 +167,13 @@ 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,
           }
@@ -176,6 +182,8 @@ 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(),
@@ -868,6 +876,8 @@ 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

@@ -79,6 +79,13 @@ 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
@@ -86,7 +93,6 @@ 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
@@ -125,6 +131,14 @@ 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,8 +6,6 @@ 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) {
@@ -30,8 +28,6 @@ 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',
@@ -63,7 +59,7 @@ export function useWallLineOffsetSetting(id) {
 
   useEffect(() => {
     const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
-    if (!outerLineFix || outerLines.length === 0) {
+    if (outerLines.length === 0) {
       swalFire({ text: '외벽선이 없습니다.' })
       closePopup(id)
       return
@@ -281,7 +277,7 @@ export function useWallLineOffsetSetting(id) {
       }
     }
 
-    reArrangeOuterLine(currentIdx + 1)
+    rearrangeOuterLine(currentIdx + 1)
 
     drawLine(point1, point2, currentIdx)
     drawLine(point2, point3, currentIdx + 1)
@@ -290,217 +286,229 @@ 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 = isNegative ? outerLine.idx - 1 : outerLine.idx + 1
+        outerLine.idx = outerLine.idx + 1
       }
     })
   }
 
-  /**
-   * offset 저장
-   */
   const handleOffsetSave = () => {
-    if (!currentObject) return
+    const direction = currentWallLineRef.current.direction
-    const currentLine = currentObject
+    let canDirections = direction === 'left' || direction === 'right' ? ['up', 'down'] : ['left', 'right']
-    const currentVector = currentLine.y1 === currentLine.y2 ? 'horizontal' : 'vertical'
+    const currentIdx = currentWallLineRef.current.idx
-    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 currentIdx = currentLine.idx
+    const idx = currentWallLineRef.current.idx
-    const prevIdx = currentIdx - 1 <= 0 ? outerLines.length : currentIdx - 1
+    const prevIdx = idx - 1 <= 0 ? outerLines.length : idx - 1
-    const nextIdx = currentLine.idx + 1 > outerLines.length ? 1 : currentIdx + 1
+    const nextIdx = idx + 1 > outerLines.length ? 1 : idx + 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 offsetLength = Big(Number(length1Ref.current.value)).div(10)
+    const length = length1Ref.current.value / 10
-    if (offsetLength.eq(0)) return
+    const currentLineX = Math.floor(Math.max(currentLine.x1, currentLine.x2))
+    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 currentLineMinX = Big(Math.max(currentLine.x1, currentLine.x2))
+          const newPoint1 = { x: newX, y: currentLineY - length }
-    const currentLineMaxX = Big(Math.max(currentLine.x1, currentLine.x2))
+          const newPoint2 = { x: prevLine.x2, y: prevLine.y2 }
-    const currentLineMinY = Big(Math.max(currentLine.y1, currentLine.y2))
+          rearrangeOuterLine(currentIdx)
-    const currentLineMaxY = Big(Math.max(currentLine.y1, currentLine.y2))
+          drawLine(newPoint1, newPoint2, currentIdx, 'top')
 
-    if (currentVector === 'horizontal') {
+          if (Math.abs(currentLineY - nextLine.y1) < 2) {
-      const prevX = currentLine.x1 < currentLine.x2 ? Math.min(currentLine.x1, currentLine.x2) : Math.max(currentLine.x1, currentLine.x2)
+            nextLine.set({ y1: currentLineY - length })
-      const nextX = currentLine.x1 < currentLine.x2 ? Math.max(currentLine.x1, currentLine.x2) : Math.min(currentLine.x1, currentLine.x2)
-      if (arrow1Ref.current === 'up') {
-        currentLine.set({ y1: currentLineMaxY.minus(offsetLength).toNumber(), y2: currentLineMaxY.minus(offsetLength).toNumber() })
-        if (prevVector === currentVector) {
-          const point1 = { x: prevX, y: prevLine.y2 }
-          const point2 = { x: prevX, y: currentLine.y1 }
-          reArrangeOuterLine(currentIdx)
-          drawLine(point1, point2, currentIdx, arrow1Ref.current)
           } else {
-          if (Big(prevLine.y1).minus(currentLineMinY).abs().lte(Big(prevLine.y2).minus(currentLineMinY).abs())) {
+            nextLine.set({ y2: currentLineY - length })
-            prevLine.set({ y1: currentLine.y1 })
-          } else {
-            prevLine.set({ y2: currentLine.y1 })
           }
-          if (Big(prevLine.y1).minus(Big(prevLine.y2)).eq(0)) {
+        } else if (nextLine.direction === currentLine.direction) {
-            reArrangeOuterLine(currentIdx - 1, true)
+          const newX =
-            canvas.remove(prevLine)
+            currentLine.direction === 'left'
-          }
+              ? Math.floor(Math.min(currentLine.x1, currentLine.x2))
-        }
+              : Math.floor(Math.max(currentLine.x1, currentLine.x2))
-        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)
-          }
-        }
-      }
-      if (arrow1Ref.current === 'down') {
-        currentLine.set({ y1: currentLineMaxY.plus(offsetLength).toNumber(), y2: currentLineMaxY.plus(offsetLength).toNumber() })
-        if (prevVector === currentVector) {
-          const point1 = { x: prevX, y: prevLine.y2 }
-          const point2 = { x: prevX, y: currentLine.y1 }
-          reArrangeOuterLine(currentIdx)
-          drawLine(point1, point2, currentIdx, arrow1Ref.current)
-        } else {
-          if (Big(prevLine.y1).minus(currentLineMinY).abs().lte(Big(prevLine.y2).minus(currentLineMinY).abs())) {
-            prevLine.set({ y1: currentLine.y1 })
-          } else {
-            prevLine.set({ y2: currentLine.y1 })
-          }
-          if (Big(prevLine.y1).minus(Big(prevLine.y2)).eq(0)) {
-            reArrangeOuterLine(currentIdx - 1, true)
-            canvas.remove(prevLine)
-          }
-        }
-        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)
-          }
-        }
-      }
-    } else {
-      const prevY = currentLine.y1 < currentLine.y2 ? Math.min(currentLine.y1, currentLine.y2) : Math.max(currentLine.y1, currentLine.y2)
-      const nextY = currentLine.y1 < currentLine.y2 ? Math.max(currentLine.y1, currentLine.y2) : Math.min(currentLine.y1, currentLine.y2)
-      if (arrow1Ref.current === 'left') {
-        currentLine.set({ x1: currentLineMaxX.minus(offsetLength).toNumber(), x2: currentLineMaxX.minus(offsetLength).toNumber() })
 
-        if (prevVector === currentVector) {
+          const newPoint1 = { x: newX, y: currentLineY - length }
-          const point1 = { x: prevLine.x2, y: prevY }
+          const newPoint2 = { x: nextLine.x1, y: nextLine.y1 }
-          const point2 = { x: currentLine.x1, y: prevY }
+          rearrangeOuterLine(currentIdx + 1)
-          reArrangeOuterLine(currentIdx)
+          drawLine(newPoint1, newPoint2, currentIdx + 1, 'top')
-          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 {
-            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)
-          }
-        }
-      }
-      if (arrow1Ref.current === 'right') {
-        currentLine.set({ x1: currentLineMaxX.plus(offsetLength).toNumber(), x2: currentLineMaxX.plus(offsetLength).toNumber() })
 
-        if (prevVector === currentVector) {
+          if (Math.abs(currentLineY - prevLine.y1) < 2) {
-          const point1 = { x: prevLine.x2, y: prevY }
+            prevLine.set({ y1: currentLineY - length })
-          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({ y2: currentLineY - length })
-            prevLine.set({ x1: currentLine.x1 })
+          }
         } else {
-            prevLine.set({ x2: currentLine.x1 })
+          if (Math.abs(currentLineY - prevLine.y1) < 2) {
-          }
+            prevLine.set({ y1: prevLine.y1 - length })
-
-          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())) {
+            prevLine.set({ y2: prevLine.y2 - length })
-            nextLine.set({ x1: currentLine.x2 })
+          }
+          if (Math.abs(currentLineY - nextLine.y1) < 2) {
+            nextLine.set({ y1: nextLine.y1 - length })
           } else {
-            nextLine.set({ x2: currentLine.x2 })
+            nextLine.set({ y2: nextLine.y2 - length })
-          }
-
-          if (Big(nextLine.x1).minus(Big(nextLine.x2)).eq(0)) {
-            reArrangeOuterLine(currentIdx + 1, true)
-            canvas.remove(nextLine)
-          }
-        }
           }
         }
 
-    const newOuterLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+        currentLine.set({ y1: currentLine.y1 - length, y2: currentLine.y2 - length })
-    newOuterLines.sort((a, b) => a.idx - b.idx)
-    newOuterLines.forEach((line, idx) => {
-      line.fire('modified')
-    })
 
+        break
+      }
+      case 'down': {
+        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 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) {
+            prevLine.set({ y1: prevLine.y1 + length })
+          } else {
+            prevLine.set({ y2: prevLine.y2 + length })
+          }
+          if (Math.abs(currentLineY - nextLine.y1) < 2) {
+            nextLine.set({ y1: nextLine.y1 + length })
+          } else {
+            nextLine.set({ y2: nextLine.y2 + length })
+          }
+        }
+
+        currentLine.set({ y1: currentLine.y1 + length, y2: currentLine.y2 + length })
+        break
+      }
+      case 'left': {
+        if (prevLine.direction === currentLine.direction) {
+          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, '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) {
+            nextLine.set({ x1: nextLine.x1 - length })
+          } else {
+            nextLine.set({ x2: nextLine.x2 - length })
+          }
+        }
+
+        currentLine.set({ x1: currentLine.x1 - length, x2: currentLine.x2 - length })
+        break
+      }
+      case 'right': {
+        if (prevLine.direction === currentLine.direction) {
+          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) {
+            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) {
+            nextLine.set({ x1: nextLine.x1 + length })
+          } else {
+            nextLine.set({ x2: nextLine.x2 + length })
+          }
+        }
+
+        currentLine.set({ x1: currentLine.x1 + length, x2: currentLine.x2 + length })
+
+        break
+      }
+    }
     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, { calculateAngle } from '@/util/qpolygon-utils'
+import offsetPolygon 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'
@@ -1679,11 +1679,10 @@ export function useMode() {
     const offsetEdges = []
 
     polygon.edges.forEach((edge, i) => {
-      /* const offset =
+      const offset =
         lines[i % lines.length].attributes.offset === undefined || lines[i % lines.length].attributes.offset === 0
           ? 0.1
-          : lines[i % lines.length].attributes.offset*/
+          : lines[i % lines.length].attributes.offset
-      const offset = lines[i % lines.length].attributes.offset
       const dx = edge.outwardNormal.x * offset
       const dy = edge.outwardNormal.y * offset
       offsetEdges.push(createOffsetEdge(edge, dx, dy))
@@ -1718,12 +1717,10 @@ export function useMode() {
     const offsetEdges = []
 
     polygon.edges.forEach((edge, i) => {
-      /*const offset =
+      const offset =
         lines[i % lines.length].attributes.offset === undefined || lines[i % lines.length].attributes.offset === 0
           ? 0.1
-          : lines[i % lines.length].attributes.offset*/
+          : lines[i % lines.length].attributes.offset
-      const offset = lines[i % lines.length].attributes.offset
-
       const dx = edge.inwardNormal.x * offset
       const dy = edge.inwardNormal.y * offset
       offsetEdges.push(createOffsetEdge(edge, dx, dy))
@@ -1772,20 +1769,8 @@ export function useMode() {
     })
 
     wall.lines = afterLine.concat(beforeLine)
-    wall.baseLines = wall.lines
-    wall.colorLines = []
 
     //외벽선을 기준으로 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)
@@ -1802,45 +1787,6 @@ 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 }
@@ -1860,8 +1806,6 @@ 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)
@@ -1872,21 +1816,18 @@ export function useMode() {
         roofId: roof.id,
         planeSize: lineLength,
         actualSize: lineLength,
-        wallLine: wall.lines[roofWallIndex].id,
+        wallLine: wall.lines[index].id,
-        type: wall.lines[roofWallIndex].attributes.type,
+        type: wall.lines[index].attributes.type,
-        offset: wall.lines[roofWallIndex].attributes.offset,
+        offset: wall.lines[index].attributes.offset,
-        width: wall.lines[roofWallIndex].attributes.width,
+        width: wall.lines[index].attributes.width,
-        pitch: wall.lines[roofWallIndex].attributes.pitch,
+        pitch: wall.lines[index].attributes.pitch,
-        sleeve: wall.lines[roofWallIndex].attributes.sleeve || false,
+        sleeve: wall.lines[index].attributes.sleeve || false,
-      }
-
-      const isDivLine = divWallLines.some((divLine) => divLine.index === index)
-      if (!isDivLine) {
-        roofWallIndex++
       }
     })
 
     wall.set({
+      // originX: 'center',
+      // originY: 'center',
       attributes: {
         roofId: roof.id,
       },
@@ -1905,7 +1846,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
 
@@ -1952,7 +1893,6 @@ export function useMode() {
         strokeWidth: wallStrokeWidth,
         selectable: false,
       })
-      wall.colorLines.push(wallLine)
       canvas.add(wallLine)
     })
 

src/locales/ja.json

@@ -178,7 +178,7 @@
   "modal.roof.alloc.select.parallel": "筋配置",
   "modal.roof.alloc.select.stairs": "千鳥配置",
   "modal.roof.alloc.apply": "選択した屋根材として割り当て",
-  "plan.menu.estimate.docDown": "見積書出力",
+  "plan.menu.estimate.docDown": "各種資料ダウンロード",
   "plan.menu.estimate.save": "保存",
   "plan.menu.estimate.reset": "初期化",
   "plan.menu.estimate.copy": "見積書のコピー",
@@ -886,7 +886,7 @@
   "estimate.detail.drawingEstimateCreateDate": "登録日",
   "estimate.detail.lastEditDatetime": "変更日時",
   "estimate.detail.saleStoreId": "一次販売店名",
-  "estimate.detail.estimateDate": "見積作成日",
+  "estimate.detail.estimateDate": "見積日",
   "estimate.detail.otherSaleStoreId": "二次販売店名",
   "estimate.detail.noOtherSaleStoreId": "二次店なし",
   "estimate.detail.receiveUser": "担当者",

src/locales/ko.json

@@ -886,7 +886,7 @@
   "estimate.detail.drawingEstimateCreateDate": "등록일",
   "estimate.detail.lastEditDatetime": "변경일시",
   "estimate.detail.saleStoreId": "1차 판매점명",
-  "estimate.detail.estimateDate": "견적작성일",
+  "estimate.detail.estimateDate": "견적일",
   "estimate.detail.otherSaleStoreId": "2차 판매점명",
   "estimate.detail.noOtherSaleStoreId": "2차점 없음",
   "estimate.detail.receiveUser": "담당자",