배치면 라인 타입 팝업 삭제 및 로직 수정

src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx

@@ -7,6 +7,7 @@ import { useMessage } from '@/hooks/useMessage'
 import { usePopup } from '@/hooks/usePopup'
 import { canvasState } from '@/store/canvasAtom'
 import { usePolygon } from '@/hooks/usePolygon'
+import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
 
 const FLOW_DIRECTION_TYPE = {
   EIGHT_AZIMUTH: 'eightAzimuth',
@@ -19,6 +20,8 @@ export default function FlowDirectionSetting(props) {
   const canvas = useRecoilValue(canvasState)
   const { getMessage } = useMessage()
 
+  const { changeSurfaceLineType } = useSurfaceShapeBatch({})
+
   useEffect(() => {
     return () => {
       canvas?.discardActiveObject()
@@ -53,6 +56,7 @@ export default function FlowDirectionSetting(props) {
     })
     drawDirectionArrow(roof)
     canvas?.renderAll()
+    changeSurfaceLineType(roof)
     closePopup(id)
   }
 

src/hooks/surface/usePlacementShapeDrawing.js

@@ -32,6 +32,7 @@ import {
 import { usePolygon } from '@/hooks/usePolygon'
 import { POLYGON_TYPE } from '@/common/common'
 import { usePopup } from '@/hooks/usePopup'
+import { useSurfaceShapeBatch } from './useSurfaceShapeBatch'
 
 import { roofDisplaySelector } from '@/store/settingAtom'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
@@ -50,6 +51,8 @@ export function usePlacementShapeDrawing(id) {
   const { addPolygonByLines, drawDirectionArrow } = usePolygon()
   const { tempGridMode } = useTempGrid()
   const { setSurfaceShapePattern } = useRoofFn()
+  const { changeSurfaceLineType } = useSurfaceShapeBatch({})
+
   const canvasSetting = useRecoilValue(canvasSettingState)
   const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
   const adsorptionPointAddMode = useRecoilValue(adsorptionPointAddModeState)
@@ -253,11 +256,14 @@ export function usePlacementShapeDrawing(id) {
         setPoints([])
         canvas?.renderAll()
 
-        if (+canvasSetting?.roofSizeSet === 3) {
+        // if (+canvasSetting?.roofSizeSet === 3) {
+        //   closePopup(id)
+        //   return
+        // }
+        // addPopup(id, 1, <PlacementSurfaceLineProperty id={id} roof={roof} />, false)
+
+        changeSurfaceLineType(roof)
         closePopup(id)
-          return
-        }
-        addPopup(id, 1, <PlacementSurfaceLineProperty id={id} roof={roof} />, false)
       }
 
       if (points.length < 3) {

src/hooks/surface/useSurfaceShapeBatch.js

@@ -3,7 +3,7 @@
 import { useEffect } from 'react'
 import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
 import { canvasSettingState, canvasState, currentCanvasPlanState, globalPitchState } from '@/store/canvasAtom'
-import { MENU, POLYGON_TYPE } from '@/common/common'
+import { MENU, POLYGON_TYPE, LINE_TYPE } from '@/common/common'
 import { getIntersectionPoint, toFixedWithoutRounding } from '@/util/canvas-util'
 import { degreesToRadians } from '@turf/turf'
 import { QPolygon } from '@/components/fabric/QPolygon'
@@ -111,7 +111,7 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
           lockScalingX: true, // X 축 크기 조정 잠금
           lockScalingY: true, // Y 축 크기 조정 잠금
           name: MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH_TEMP,
-          flipX: xInversion !== yInversion,
+          // flipX: xInversion !== yInversion,
           // angle: xInversion && yInversion ? Math.abs((rotate + 180) % 360) : Math.abs(rotate),
           // angle: rotate,
           originX: 'center',
@@ -120,6 +120,7 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
         }
 
         obj = new QPolygon(points, options)
+
         let imageRotate = 0
         if (xInversion && !yInversion) {
           if (rotate % 180 === 0 || rotate < 0) {
@@ -148,7 +149,7 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
         } else {
           imageRotate = (rotate + 360) % 360
         }
-        obj.set({ angle: imageRotate })
+        obj.set({ angle: imageRotate, flipX: xInversion !== yInversion })
         obj.setCoords() //좌표 변경 적용
 
         canvas?.add(obj)
@@ -201,13 +202,15 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
         setSurfaceShapePattern(batchSurface, roofDisplay.column)
         drawDirectionArrow(batchSurface)
 
-        // if (setIsHidden) setIsHidden(false)
-
         // closePopup(id)
         initEvent()
-        if (+canvasSetting?.roofSizeSet === 3) return
-        const popupId = uuidv4()
-        addPopup(popupId, 2, <PlacementSurfaceLineProperty roof={batchSurface} id={popupId} setIsHidden={setIsHidden} />)
+        // if (+canvasSetting?.roofSizeSet === 3) return
+        // const popupId = uuidv4()
+        // addPopup(popupId, 2, <PlacementSurfaceLineProperty roof={batchSurface} id={popupId} setIsHidden={setIsHidden} />)
+
+        changeSurfaceLineType(batchSurface)
+
+        if (setIsHidden) setIsHidden(false)
       })
     } else {
       if (setIsHidden) setIsHidden(false)
@@ -1066,6 +1069,60 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
     canvas?.renderAll()
   }
 
+  const changeSurfaceLineType = (polygon) => {
+    polygon.lines.forEach((line) => {
+      line.attributes.type = LINE_TYPE.WALLLINE.GABLE
+    })
+
+    const directionConfig = {
+      south: { evaesDirection: 'right', ridgeDirection: 'left', coord1: 'y1', coord2: 'y2' },
+      north: { evaesDirection: 'left', ridgeDirection: 'right', coord1: 'y1', coord2: 'y2' },
+      east: { evaesDirection: 'top', ridgeDirection: 'bottom', coord1: 'x1', coord2: 'x2' },
+      west: { evaesDirection: 'bottom', ridgeDirection: 'top', coord1: 'x1', coord2: 'x2' },
+    }
+
+    const { evaesDirection, ridgeDirection, coord1, coord2 } = directionConfig[polygon.direction] || directionConfig.west
+
+    polygon.lines.forEach((line) => {
+      if (line[coord1] === line[coord2]) {
+        if (line.direction === evaesDirection) {
+          line.attributes.type = LINE_TYPE.WALLLINE.EAVES
+          line.stroke = 'rgb(47, 0, 255)'
+        } else if (line.direction === ridgeDirection) {
+          line.attributes.type = LINE_TYPE.SUBLINE.RIDGE
+          line.stroke = 'rgb(44, 255, 2)'
+        }
+      }
+    })
+
+    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]
+
+    console.log(maxLine)
+
+    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.lines.forEach((line) => {
+          if (line.attributes.type === LINE_TYPE.WALLLINE.EAVES) {
+            line.attributes.type = LINE_TYPE.SUBLINE.RIDGE
+          } else if (line.attributes.type === LINE_TYPE.SUBLINE.RIDGE) {
+            line.attributes.type = LINE_TYPE.WALLLINE.EAVES
+          }
+        })
+      }
+    }
+  }
+
   const updateFlippedPoints = (polygon) => {
     if (!(polygon instanceof fabric.Polygon)) {
       console.error('The object is not a Polygon.')
@@ -1115,5 +1172,6 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
     changeSurfaceLinePropertyEvent,
     changeSurfaceLineProperty,
     changeSurfaceLinePropertyReset,
+    changeSurfaceLineType,
   }
 }