수정

src/hooks/surface/useSurfaceShapeBatch.js

@@ -1071,9 +1071,12 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
 
   /**
    * 면형상 작도시 라인 속성 넣는 로직
-   *
+   * 폴리곤으로 보면 직선방향에 따라 아래쪽인지 윗쪽인지 판단이 가능하다고 생각하여
+   * south -> 밑면은 무조건 right direction이라 가정하고 작업함 좌우반전시 반대로 그려지는 경우도 생기지만 그럴땐 흐름방향에 따라 최대값(최소값)을 찾아
+   * 해당 하는 흐름에 맞게 변경함
    * @param { } polygon
    */
+
   const changeSurfaceLineType = (polygon) => {
     polygon.lines.forEach((line) => {
       line.attributes.type = LINE_TYPE.WALLLINE.GABLE
@@ -1100,20 +1103,26 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
       }
     })
 
-    const maxLine = polygon.lines
-      .filter((line) => line[coord1] === line[coord2])
-      .sort(
-        (a, b) =>
-          (polygon.direction === 'south' || polygon.direction === 'east' ? b : a)[coord1] -
-          (polygon.direction === 'south' || polygon.direction === 'east' ? a : b)[coord1],
-      )[0]
+    /**
+     * 진짜 처마 라인인지 확인하는 로직 -> 특정 모양에 따라 처마가 없는 경우가 있는데 위에 로직으로는
+     * 용마루도 처마로 만들어서 재보정
+     */
+    //직선 찾는 로직
+    const maxLine = polygon.lines.filter((line) => line[coord1] === line[coord2])
+
+    if (maxLine.length > 0) {
+      const maxLineSorted = maxLine.reduce((a, b) => {
+        return (polygon.direction === 'south' || polygon.direction === 'east' ? b : a)[coord1] >
+          (polygon.direction === 'south' || polygon.direction === 'east' ? a : b)[coord1]
+          ? b
+          : a
+      })
 
-    if (maxLine) {
       if (
-        (polygon.direction === 'south' && maxLine.direction === 'left') ||
-        (polygon.direction === 'north' && maxLine.direction === 'right') ||
-        (polygon.direction === 'east' && maxLine.direction === 'bottom') ||
-        (polygon.direction === 'west' && maxLine.direction === 'top')
+        (polygon.direction === 'south' && maxLineSorted.direction === 'left') ||
+        (polygon.direction === 'north' && maxLineSorted.direction === 'right') ||
+        (polygon.direction === 'east' && maxLineSorted.direction === 'bottom') ||
+        (polygon.direction === 'west' && maxLineSorted.direction === 'top')
       ) {
         polygon.lines.forEach((line) => {
           if (line.attributes.type === LINE_TYPE.WALLLINE.EAVES) {
@@ -1123,73 +1132,40 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
           }
         })
       }
-    }
 
-    /**
-     * 진짜 처마 라인인지 확인하는 로직 -> 특정 모양에 따라 처마가 없는 경우가 있는데 위에 로직으로는
-     * 용마루도 처마로 만들어서 재보정
-     */
-    const maxLineCoord = polygon.lines.sort(
-      (a, b) =>
-        (polygon.direction === 'south' || polygon.direction === 'east' ? b : a)[coord1] -
-        (polygon.direction === 'south' || polygon.direction === 'east' ? a : b)[coord1],
-    )[0]
+      if (maxLine.length === 1) {
+        const maxLineCoord = polygon.lines.reduce((a, b) => {
+          return (polygon.direction === 'south' || polygon.direction === 'east' ? b : a)[coord1] >
+            (polygon.direction === 'south' || polygon.direction === 'east' ? a : b)[coord1]
+            ? b
+            : a
+        })
 
-    const isRealEavesLine = polygon.lines.find((line) => line.attributes.type === LINE_TYPE.WALLLINE.EAVES)
-    if (isRealEavesLine) {
-      if (polygon.direction === 'south' || polygon.direction === 'north') {
-        if (maxLineCoord.y1 !== isRealEavesLine.y1) {
-          isRealEavesLine.attributes.type = LINE_TYPE.SUBLINE.RIDGE
-        }
-      } else if (polygon.direction === 'east' || polygon.direction === 'west') {
-        if (maxLineCoord.x1 !== isRealEavesLine.x1) {
-          isRealEavesLine.attributes.type = LINE_TYPE.SUBLINE.RIDGE
+        const isRealEavesLine = polygon.lines.find((line) => line.attributes.type === LINE_TYPE.WALLLINE.EAVES)
+        if (isRealEavesLine) {
+          if (polygon.direction === 'south' || polygon.direction === 'north') {
+            const targetCoord =
+              polygon.direction === 'south' ? Math.max(maxLineCoord.y1, maxLineCoord.y2) : Math.min(maxLineCoord.y1, maxLineCoord.y2)
+            const realLineCoord =
+              polygon.direction === 'south' ? Math.max(isRealEavesLine.y1, isRealEavesLine.y2) : Math.min(isRealEavesLine.y1, isRealEavesLine.y2)
+
+            if (targetCoord !== realLineCoord) {
+              isRealEavesLine.attributes.type = LINE_TYPE.SUBLINE.RIDGE
+            }
+          } else if (polygon.direction === 'east' || polygon.direction === 'west') {
+            const targetCoord = polygon.direction === 'east' ? Math.max(maxLineCoord.x1, maxLineCoord.x2) : Math.min(maxLineCoord.x1, maxLineCoord.x2)
+            const realLineCoord =
+              polygon.direction === 'east' ? Math.max(isRealEavesLine.x1, isRealEavesLine.x2) : Math.min(isRealEavesLine.x1, isRealEavesLine.x2)
+
+            if (targetCoord !== realLineCoord) {
+              isRealEavesLine.attributes.type = LINE_TYPE.SUBLINE.RIDGE
+            }
+          }
         }
       }
     }
   }
 
-  const updateFlippedPoints = (polygon) => {
-    if (!(polygon instanceof fabric.Polygon)) {
-      console.error('The object is not a Polygon.')
-      return
-    }
-
-    const { flipX, flipY, width, height, points, left, top, scaleX, scaleY } = polygon
-
-    // 현재 points의 사본 가져오기
-    const newPoints = points.map((point) => {
-      let x = point.x
-      let y = point.y
-
-      // flipX 적용
-      if (flipX) {
-        x = width - x
-      }
-
-      // flipY 적용
-      if (flipY) {
-        y = height - y
-      }
-
-      // 스케일 및 전역 좌표 고려
-      x = (x - width / 2) * scaleX + width / 2
-      y = (y - height / 2) * scaleY + height / 2
-
-      return { x, y }
-    })
-
-    // flipX, flipY를 초기화
-    polygon.flipX = false
-    polygon.flipY = false
-
-    // points 업데이트
-    polygon.set({ points: newPoints })
-    polygon.setCoords()
-
-    return polygon
-  }
-
   return {
     applySurfaceShape,
     deleteAllSurfacesAndObjects,