src/hooks/roofcover/useOuterLineWall.js

@@ -252,6 +252,7 @@ export function useOuterLineWall(id, propertiesId) {
         canvas?.renderAll()
         setOuterLineFix(true)
         closePopup(id)
+        ccwCheck()
         addPopup(propertiesId, 1, <RoofShapeSetting id={propertiesId} pos={{ x: 50, y: 230 }} />)
       }
 
@@ -905,6 +906,51 @@ export function useOuterLineWall(id, propertiesId) {
     }
   }
 
+  // 시계방향으로 그려진 경우 반시게방향으로 변경
+  const ccwCheck = () => {
+    let outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+
+    if (outerLines.length < 2) {
+      swalFire({ text: getMessage('wall.line.not.found') })
+      return
+    }
+
+    /**
+     * 외벽선이 시계방향인지 시계반대 방향인지 확인
+     */
+    const outerLinePoints = outerLines.map((line) => ({ x: line.x1, y: line.y1 }))
+    let counterClockwise = true
+    let signedArea = 0
+
+    outerLinePoints.forEach((point, index) => {
+      const nextPoint = outerLinePoints[(index + 1) % outerLinePoints.length]
+      signedArea += point.x * nextPoint.y - point.y * nextPoint.x
+    })
+
+    if (signedArea > 0) {
+      counterClockwise = false
+    }
+    /** 시계 방향일 경우 외벽선 reverse*/
+    if (!counterClockwise) {
+      outerLines.reverse().forEach((line, index) => {
+        addLine([line.x2, line.y2, line.x1, line.y1], {
+          stroke: line.stroke,
+          strokeWidth: line.strokeWidth,
+          idx: index,
+          selectable: line.selectable,
+          name: 'outerLine',
+          x1: line.x2,
+          y1: line.y2,
+          x2: line.x1,
+          y2: line.y1,
+          visible: line.visible,
+        })
+        canvas.remove(line)
+      })
+      canvas.renderAll()
+    }
+  }
+
   return {
     points,
     setPoints,

src/hooks/roofcover/useRoofShapeSetting.js

@@ -179,46 +179,6 @@ export function useRoofShapeSetting(id) {
     let outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
     let direction
 
-    if (outerLines.length < 2) {
-      swalFire({ text: getMessage('wall.line.not.found') })
-      return
-    }
-
-    /**
-     * 외벽선이 시계방향인지 시계반대 방향인지 확인
-     */
-    const outerLinePoints = outerLines.map((line) => ({ x: line.x1, y: line.y1 }))
-    let counterClockwise = true
-    let signedArea = 0
-
-    outerLinePoints.forEach((point, index) => {
-      const nextPoint = outerLinePoints[(index + 1) % outerLinePoints.length]
-      signedArea += point.x * nextPoint.y - point.y * nextPoint.x
-    })
-
-    if (signedArea > 0) {
-      counterClockwise = false
-    }
-    /** 시계 방향일 경우 외벽선 reverse*/
-    if (!counterClockwise) {
-      outerLines.reverse().forEach((line, index) => {
-        addLine([line.x2, line.y2, line.x1, line.y1], {
-          stroke: line.stroke,
-          strokeWidth: line.strokeWidth,
-          idx: index,
-          selectable: line.selectable,
-          name: 'outerLine',
-          x1: line.x2,
-          y1: line.y2,
-          x2: line.x1,
-          y2: line.y1,
-          visible: line.visible,
-        })
-        canvas.remove(line)
-      })
-      canvas.renderAll()
-    }
-
     if ([1, 2, 3, 5, 6, 7, 8].includes(shapeNum)) {
       // 변별로 설정이 아닌 경우 경사를 지붕재에 적용해주어야함
       setRoofPitch()
@@ -507,7 +467,7 @@ export function useRoofShapeSetting(id) {
       originX: 'center',
       originY: 'center',
     })
-    polygon.setViewLengthText(false)
+    // polygon.setViewLengthText(false)
     polygon.lines = [...outerLines]
 
     addPitchTextsByOuterLines()