src/hooks/surface/useSurfaceShapeBatch.js

@@ -1071,12 +1071,9 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
 
   /**
    * 면형상 작도시 라인 속성 넣는 로직
-   * 폴리곤으로 보면 직선방향에 따라 아래쪽인지 윗쪽인지 판단이 가능하다고 생각하여
+   *
-   * south -> 밑면은 무조건 right direction이라 가정하고 작업함 좌우반전시 반대로 그려지는 경우도 생기지만 그럴땐 흐름방향에 따라 최대값(최소값)을 찾아
-   * 해당 하는 흐름에 맞게 변경함
    * @param { } polygon
    */
-
   const changeSurfaceLineType = (polygon) => {
     polygon.lines.forEach((line) => {
       line.attributes.type = LINE_TYPE.WALLLINE.GABLE
@@ -1103,26 +1100,20 @@ 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] -
-    const maxLine = polygon.lines.filter((line) => line[coord1] === line[coord2])
+          (polygon.direction === 'south' || polygon.direction === 'east' ? a : b)[coord1],
-
+      )[0]
-    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' && maxLineSorted.direction === 'left') ||
+        (polygon.direction === 'south' && maxLine.direction === 'left') ||
-        (polygon.direction === 'north' && maxLineSorted.direction === 'right') ||
+        (polygon.direction === 'north' && maxLine.direction === 'right') ||
-        (polygon.direction === 'east' && maxLineSorted.direction === 'bottom') ||
+        (polygon.direction === 'east' && maxLine.direction === 'bottom') ||
-        (polygon.direction === 'west' && maxLineSorted.direction === 'top')
+        (polygon.direction === 'west' && maxLine.direction === 'top')
       ) {
         polygon.lines.forEach((line) => {
           if (line.attributes.type === LINE_TYPE.WALLLINE.EAVES) {
@@ -1132,38 +1123,71 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
           }
         })
       }
+    }
 
-      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
+    const maxLineCoord = polygon.lines.sort(
-            : a
+      (a, b) =>
-        })
+        (polygon.direction === 'south' || polygon.direction === 'east' ? b : a)[coord1] -
+        (polygon.direction === 'south' || polygon.direction === 'east' ? a : b)[coord1],
+    )[0]
 
     const isRealEavesLine = polygon.lines.find((line) => line.attributes.type === LINE_TYPE.WALLLINE.EAVES)
     if (isRealEavesLine) {
       if (polygon.direction === 'south' || polygon.direction === 'north') {
-            const targetCoord =
+        if (maxLineCoord.y1 !== isRealEavesLine.y1) {
-              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)
+        if (maxLineCoord.x1 !== isRealEavesLine.x1) {
-            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 {