모듈 배치면 처마면 인터벌 적용

src/components/floor-plan/modal/basic/step/Placement.jsx

@@ -24,7 +24,6 @@ const Placement = forwardRef((props, refs) => {
 
   //모듈 배치면 생성
   useEffect(() => {
-    makeModuleInstArea()
     if (moduleSelectionData) {
       //1개라도 치도리 불가가 있으면 치도리 불가
       const isChidroriValue = moduleSelectionData.roofConstructions.some((item) => item.construction.plvrYn === 'N')

src/hooks/module/useModuleBasicSetting.js

@@ -1,5 +1,5 @@
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
-import { canvasState, checkedModuleState, isManualModuleSetupState, selectedModuleState } from '@/store/canvasAtom'
+import { canvasSettingState, canvasState, checkedModuleState, isManualModuleSetupState, selectedModuleState } from '@/store/canvasAtom'
 import { rectToPolygon, polygonToTurfPolygon, calculateVisibleModuleHeight, getDegreeByChon } from '@/util/canvas-util'
 import { basicSettingState, roofDisplaySelector } from '@/store/settingAtom'
 import offsetPolygon, { calculateAngle } from '@/util/qpolygon-utils'
@@ -8,9 +8,7 @@ import { moduleSetupSurfaceState, moduleIsSetupState } from '@/store/canvasAtom'
 import { useEvent } from '@/hooks/useEvent'
 import { POLYGON_TYPE, BATCH_TYPE } from '@/common/common'
 import * as turf from '@turf/turf'
-import { v4 as uuidv4 } from 'uuid'
 import { useSwal } from '@/hooks/useSwal'
-import { canvasSettingState } from '@/store/canvasAtom'
 import { compasDegAtom } from '@/store/orientationAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
@@ -24,9 +22,9 @@ export function useModuleBasicSetting() {
   const roofDisplay = useRecoilValue(roofDisplaySelector)
   const [moduleSetupSurface, setModuleSetupSurface] = useRecoilState(moduleSetupSurfaceState)
   const [moduleIsSetup, setModuleIsSetup] = useRecoilState(moduleIsSetupState)
-  const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent, removeMouseEvent } = useEvent()
+  const { addCanvasMouseEventListener, initEvent, removeMouseEvent } = useEvent()
   const { swalFire } = useSwal()
-  const canvasSetting = useRecoilValue(canvasSettingState)
+
   const compasDeg = useRecoilValue(compasDegAtom)
   const { setSurfaceShapePattern } = useRoofFn()
   const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
@@ -34,6 +32,8 @@ export function useModuleBasicSetting() {
   const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
   const setModuleStatistics = useSetRecoilState(moduleStatisticsState)
 
+  const canvasSetting = useRecoilValue(canvasSettingState)
+
   useEffect(() => {
     // console.log('basicSetting', basicSetting)
     if (canvas) {
@@ -46,7 +46,6 @@ export function useModuleBasicSetting() {
   }, [])
 
   // const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useContext(EventContext)
-  let selectedModuleInstSurfaceArray = []
 
   //모듈,회로에서 다른메뉴 -> 배치면으로 갈 경수 초기화
   const restoreModuleInstArea = () => {
@@ -71,149 +70,6 @@ export function useModuleBasicSetting() {
     })
   }
 
-  const makeModuleInstArea = () => {
-    //지붕 객체 반환
-
-    const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof')
-    let offsetLength = canvasSetting.roofSizeSet === 3 ? -90 : -20
-
-    if (!roofs) {
-      return
-    }
-
-    const batchObjects = canvas
-      ?.getObjects()
-      .filter(
-        (obj) =>
-          obj.name === BATCH_TYPE.OPENING ||
-          obj.name === BATCH_TYPE.SHADOW ||
-          obj.name === BATCH_TYPE.TRIANGLE_DORMER ||
-          obj.name === BATCH_TYPE.PENTAGON_DORMER,
-      ) //도머s 객체
-
-    //도머도 외곽을 따야한다
-
-    const batchObjectOptions = {
-      stroke: 'red',
-      fill: 'transparent',
-      strokeDashArray: [10, 4],
-      strokeWidth: 1,
-      lockMovementX: true,
-      lockMovementY: true,
-      lockRotation: true,
-      lockScalingX: true,
-      lockScalingY: true,
-      selectable: true,
-      name: POLYGON_TYPE.OBJECT_SURFACE,
-      originX: 'center',
-      originY: 'center',
-    }
-
-    batchObjects.forEach((obj) => {
-      if (obj.name === BATCH_TYPE.TRIANGLE_DORMER || obj.name === BATCH_TYPE.PENTAGON_DORMER) {
-        const groupPoints = obj.groupPoints
-        const offsetObjects = offsetPolygon(groupPoints, 10)
-        const dormerOffset = new QPolygon(offsetObjects, batchObjectOptions)
-        dormerOffset.setViewLengthText(false)
-        canvas.add(dormerOffset) //모듈설치면 만들기
-      } else {
-        const points = obj.points
-        const offsetObjects = offsetPolygon(points, 10)
-        const offset = new QPolygon(offsetObjects, batchObjectOptions)
-        offset.setViewLengthText(false)
-        canvas.add(offset) //모듈설치면 만들기
-      }
-    })
-
-    roofs.forEach((roof) => {
-      const isExistSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.parentId === roof.id)
-      if (isExistSurface) {
-        return
-      }
-
-      setSurfaceShapePattern(roof, roofDisplay.column, true) //패턴 변경
-      const offsetPoints = offsetPolygon(roof.points, offsetLength) //안쪽 offset
-      //모듈설치영역?? 생성
-
-      const surfaceId = uuidv4()
-
-      let setupSurface = new QPolygon(offsetPoints, {
-        stroke: 'red',
-        fill: 'transparent',
-        strokeDashArray: [10, 4],
-        strokeWidth: 1,
-        lockMovementX: true,
-        lockMovementY: true,
-        lockRotation: true,
-        lockScalingX: true,
-        lockScalingY: true,
-        selectable: true,
-        parentId: roof.id, //가대 폴리곤의 임시 인덱스를 넣어줌
-        name: POLYGON_TYPE.MODULE_SETUP_SURFACE,
-        flowDirection: roof.direction,
-        direction: roof.direction,
-        flipX: roof.flipX,
-        flipY: roof.flipY,
-        surfaceId: surfaceId,
-        originX: 'center',
-        originY: 'center',
-        modules: [],
-        roofMaterial: roof.roofMaterial,
-        // angle: -compasDeg,
-      })
-
-      setupSurface.setViewLengthText(false)
-      canvas.add(setupSurface) //모듈설치면 만들기
-
-      //지붕면 선택 금지
-      roof.set({
-        selectable: false,
-      })
-
-      //모듈설치면 클릭이벤트
-      addTargetMouseEventListener('mousedown', setupSurface, function () {
-        toggleSelection(setupSurface)
-      })
-    })
-  }
-
-  //설치 범위 지정 클릭 이벤트
-  const toggleSelection = (setupSurface) => {
-    const isExist = selectedModuleInstSurfaceArray.some((obj) => obj.parentId === setupSurface.parentId)
-    //최초 선택일때
-    if (!isExist) {
-      //기본 선택이랑 스트로크 굵기가 같으면 선택 안됨으로 봄
-      setupSurface.set({
-        ...setupSurface,
-        strokeWidth: 3,
-        strokeDashArray: [0],
-        fill: 'transparent',
-      })
-      canvas.discardActiveObject() // 객체의 활성 상태 해제
-      //중복으로 들어가는걸 방지하기 위한 코드
-
-      canvas?.renderAll()
-      selectedModuleInstSurfaceArray.push(setupSurface)
-    } else {
-      //선택후 재선택하면 선택안됨으로 변경
-      setupSurface.set({
-        ...setupSurface,
-        fill: 'transparent',
-        strokeDashArray: [10, 4],
-        strokeWidth: 1,
-      })
-      canvas.discardActiveObject() // 객체의 활성 상태 해제
-
-      //폴리곤에 커스텀 인덱스를 가지고 해당 배열 인덱스를 찾아 삭제함
-      const removeIndex = setupSurface.parentId
-      const removeArrayIndex = selectedModuleInstSurfaceArray.findIndex((obj) => obj.parentId === removeIndex)
-      selectedModuleInstSurfaceArray.splice(removeArrayIndex, 1)
-    }
-
-    canvas?.renderAll()
-    setModuleSetupSurface([...selectedModuleInstSurfaceArray])
-  }
-
   /**
    * trestle에서 영역을 가져와 mouse:move 이벤트로 해당 영역에 진입했을때 booleanPointInPolygon 로 진입여부를 확인
    * 확인 후 셀을 이동시킴
@@ -1131,6 +987,8 @@ export function useModuleBasicSetting() {
 
       const flowDirection = moduleSetupSurface.flowDirection
 
+      console.log('moduleSetupSurface', moduleSetupSurface)
+
       let intvHor =
         flowDirection === 'south' || flowDirection === 'north'
           ? moduleSetupSurface.trestleDetail.moduleIntvlHor
@@ -2349,7 +2207,6 @@ export function useModuleBasicSetting() {
   }
 
   return {
-    makeModuleInstArea,
     manualModuleSetup,
     autoModuleSetup,
     restoreModuleInstArea,

src/hooks/module/useModulePlace.js

@@ -1,17 +1,28 @@
 import { useEffect, useState } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
 import { useMasterController } from '@/hooks/common/useMasterController'
-import { canvasState, currentCanvasPlanState } from '@/store/canvasAtom'
+import { canvasSettingState, canvasState, currentCanvasPlanState, moduleSetupSurfaceState } from '@/store/canvasAtom'
+import { POLYGON_TYPE, BATCH_TYPE } from '@/common/common'
+import { useRoofFn } from '@/hooks/common/useRoofFn'
+import { roofDisplaySelector } from '@/store/settingAtom'
+import offsetPolygon from '@/util/qpolygon-utils'
+import { v4 as uuidv4 } from 'uuid'
+import { QPolygon } from '@/components/fabric/QPolygon'
+import { useEvent } from '@/hooks/useEvent'
 
 export function useModulePlace() {
   const canvas = useRecoilValue(canvasState)
   const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
-  const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
   const [trestleDetailParams, setTrestleDetailParams] = useState([])
   const [trestleDetailList, setTrestleDetailList] = useState([])
   const selectedModules = useRecoilValue(selectedModuleState)
   const { getTrestleDetailList } = useMasterController()
+  const canvasSetting = useRecoilValue(canvasSettingState)
+  const { setSurfaceShapePattern } = useRoofFn()
+  const roofDisplay = useRecoilValue(roofDisplaySelector)
+  const { addTargetMouseEventListener } = useEvent()
+  const setModuleSetupSurface = useSetRecoilState(moduleSetupSurfaceState)
 
   useEffect(() => {
     if (moduleSelectionData) {
@@ -40,7 +51,9 @@ export function useModulePlace() {
 
   const getTrestleDetailListData = async () => {
     const trestleDetailList = await getTrestleDetailList(trestleDetailParams)
-    setTrestleDetailList(trestleDetailList)
+    if (trestleDetailList.length > 0) {
+      setTrestleDetailList(trestleDetailList)
+    }
   }
 
   useEffect(() => {
@@ -50,30 +63,168 @@ export function useModulePlace() {
   }, [trestleDetailParams])
 
   useEffect(() => {
-    //지붕을 가져옴
+    if (trestleDetailList.length > 0) {
-    console.log('🚀 ~ trestleDetailList.forEach ~ trestleDetailList:', trestleDetailList)
+      //지붕을 가져옴
-    canvas
+      canvas
-      .getObjects()
+        .getObjects()
-      .filter((roof) => roof.name === 'roof')
+        .filter((roof) => roof.name === 'roof')
-      .forEach((roof) => {
+        .forEach((roof) => {
-        const roofIndex = roof.roofMaterial.index //지붕의 지붕재의 순번
+          const roofIndex = roof.roofMaterial.index //지붕의 지붕재의 순번
-        trestleDetailList.forEach((detail) => {
+          trestleDetailList.forEach((detail) => {
-          if (Number(detail.data.roofIndex) === roofIndex) {
+            if (Number(detail.data.roofIndex) === roofIndex) {
-            //roof에 상세 데이터 추가
+              //roof에 상세 데이터 추가
-            roof.set({ trestleDetail: detail.data })
+              roof.set({ trestleDetail: detail.data })
-
+              //배치면 설치 영역
-            //surface에 상세 데이터 추가
+              makeModuleInstArea(roof, detail.data)
-            canvas
+              //surface에 상세 데이터 추가
-              .getObjects()
+            }
-              .filter((surface) => surface.name === 'moduleSetupSurface' && surface.parentId === roof.id)
+          })
-              .forEach((surface) => {
-                surface.set({ trestleDetail: detail.data, roofMaterial: roof.roofMaterial })
-              })
-          }
         })
-      })
+    }
   }, [trestleDetailList])
 
+  const makeModuleInstArea = (roof, trestleDetail) => {
+    //지붕 객체 반환
+
+    if (!roof) {
+      return
+    }
+
+    const batchObjects = canvas
+      ?.getObjects()
+      .filter(
+        (obj) =>
+          obj.name === BATCH_TYPE.OPENING ||
+          obj.name === BATCH_TYPE.SHADOW ||
+          obj.name === BATCH_TYPE.TRIANGLE_DORMER ||
+          obj.name === BATCH_TYPE.PENTAGON_DORMER,
+      ) //도머s 객체
+
+    //도머도 외곽을 따야한다
+
+    const batchObjectOptions = {
+      stroke: 'red',
+      fill: 'transparent',
+      strokeDashArray: [10, 4],
+      strokeWidth: 1,
+      lockMovementX: true,
+      lockMovementY: true,
+      lockRotation: true,
+      lockScalingX: true,
+      lockScalingY: true,
+      selectable: true,
+      name: POLYGON_TYPE.OBJECT_SURFACE,
+      originX: 'center',
+      originY: 'center',
+    }
+
+    batchObjects.forEach((obj) => {
+      if (obj.name === BATCH_TYPE.TRIANGLE_DORMER || obj.name === BATCH_TYPE.PENTAGON_DORMER) {
+        const groupPoints = obj.groupPoints
+        const offsetObjects = offsetPolygon(groupPoints, 10)
+        const dormerOffset = new QPolygon(offsetObjects, batchObjectOptions)
+        dormerOffset.setViewLengthText(false)
+        canvas.add(dormerOffset) //모듈설치면 만들기
+      } else {
+        const points = obj.points
+        const offsetObjects = offsetPolygon(points, 10)
+        const offset = new QPolygon(offsetObjects, batchObjectOptions)
+        offset.setViewLengthText(false)
+        canvas.add(offset) //모듈설치면 만들기
+      }
+    })
+
+    const isExistSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.parentId === roof.id)
+    if (isExistSurface) {
+      return
+    }
+
+    let offsetLength = canvasSetting.roofSizeSet === 3 ? -90 : (trestleDetail.eaveIntvl / 10) * -1
+    setSurfaceShapePattern(roof, roofDisplay.column, true) //패턴 변경
+    const offsetPoints = offsetPolygon(roof.points, offsetLength) //안쪽 offset
+    //모듈설치영역?? 생성
+
+    const surfaceId = uuidv4()
+
+    let setupSurface = new QPolygon(offsetPoints, {
+      stroke: 'red',
+      fill: 'transparent',
+      strokeDashArray: [10, 4],
+      strokeWidth: 1,
+      lockMovementX: true,
+      lockMovementY: true,
+      lockRotation: true,
+      lockScalingX: true,
+      lockScalingY: true,
+      selectable: true,
+      parentId: roof.id, //가대 폴리곤의 임시 인덱스를 넣어줌
+      name: POLYGON_TYPE.MODULE_SETUP_SURFACE,
+      flowDirection: roof.direction,
+      direction: roof.direction,
+      flipX: roof.flipX,
+      flipY: roof.flipY,
+      surfaceId: surfaceId,
+      originX: 'center',
+      originY: 'center',
+      modules: [],
+      roofMaterial: roof.roofMaterial,
+      trestleDetail: trestleDetail,
+      // angle: -compasDeg,
+    })
+
+    setupSurface.setViewLengthText(false)
+    canvas.add(setupSurface) //모듈설치면 만들기
+
+    //지붕면 선택 금지
+    roof.set({
+      selectable: false,
+    })
+
+    //모듈설치면 클릭이벤트
+    addTargetMouseEventListener('mousedown', setupSurface, function () {
+      toggleSelection(setupSurface)
+    })
+  }
+
+  let selectedModuleInstSurfaceArray = []
+
+  //설치 범위 지정 클릭 이벤트
+  const toggleSelection = (setupSurface) => {
+    const isExist = selectedModuleInstSurfaceArray.some((obj) => obj.parentId === setupSurface.parentId)
+    //최초 선택일때
+    if (!isExist) {
+      //기본 선택이랑 스트로크 굵기가 같으면 선택 안됨으로 봄
+      setupSurface.set({
+        ...setupSurface,
+        strokeWidth: 3,
+        strokeDashArray: [0],
+        fill: 'transparent',
+      })
+      canvas.discardActiveObject() // 객체의 활성 상태 해제
+      //중복으로 들어가는걸 방지하기 위한 코드
+
+      canvas?.renderAll()
+      selectedModuleInstSurfaceArray.push(setupSurface)
+    } else {
+      //선택후 재선택하면 선택안됨으로 변경
+      setupSurface.set({
+        ...setupSurface,
+        fill: 'transparent',
+        strokeDashArray: [10, 4],
+        strokeWidth: 1,
+      })
+      canvas.discardActiveObject() // 객체의 활성 상태 해제
+
+      //폴리곤에 커스텀 인덱스를 가지고 해당 배열 인덱스를 찾아 삭제함
+      const removeIndex = setupSurface.parentId
+      const removeArrayIndex = selectedModuleInstSurfaceArray.findIndex((obj) => obj.parentId === removeIndex)
+      selectedModuleInstSurfaceArray.splice(removeArrayIndex, 1)
+    }
+
+    canvas?.renderAll()
+    setModuleSetupSurface([...selectedModuleInstSurfaceArray])
+  }
+
   return {
     selectedModules,
   }