모듈 남쪽설치 치조시 좌측으로 붙는 오류 수정

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

@@ -37,6 +37,8 @@ const Placement = forwardRef((props, refs) => {
     }
 
     return () => {
+      refs.isChidori.current = 'false'
+      refs.setupLocation.current = 'eaves'
       setIsManualModuleSetup(false)
     }
   }, [])

src/hooks/module/useModuleBasicSetting.js

@@ -2,10 +2,10 @@ import { useState } from 'react'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { canvasSettingState, canvasState, checkedModuleState, currentObjectState, isManualModuleSetupState } from '@/store/canvasAtom'
 import { rectToPolygon, polygonToTurfPolygon, calculateVisibleModuleHeight, getDegreeByChon, toFixedWithoutRounding } from '@/util/canvas-util'
-import { basicSettingState, roofDisplaySelector } from '@/store/settingAtom'
+import { roofDisplaySelector } from '@/store/settingAtom'
 import offsetPolygon, { calculateAngle, createLinesFromPolygon } from '@/util/qpolygon-utils'
 import { QPolygon } from '@/components/fabric/QPolygon'
-import { moduleSetupSurfaceState, moduleIsSetupState } from '@/store/canvasAtom'
+import { moduleSetupSurfaceState } from '@/store/canvasAtom'
 import { useEvent } from '@/hooks/useEvent'
 import { POLYGON_TYPE, BATCH_TYPE, LINE_TYPE } from '@/common/common'
 import * as turf from '@turf/turf'
@@ -15,7 +15,6 @@ import { QLine } from '@/components/fabric/QLine'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
 import { useEffect } from 'react'
 import { useMessage } from '@/hooks/useMessage'
-import { moduleStatisticsState } from '@/store/circuitTrestleAtom'
 import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
 import { useMasterController } from '@/hooks/common/useMasterController'
 import { v4 as uuidv4 } from 'uuid'
@@ -30,12 +29,10 @@ export function useModuleBasicSetting(tabNum) {
   const [moduleSetupSurface, setModuleSetupSurface] = useRecoilState(moduleSetupSurfaceState)
   const { addCanvasMouseEventListener, initEvent, removeMouseEvent, addTargetMouseEventListener } = useEvent()
   const { swalFire } = useSwal()
-
   const compasDeg = useRecoilValue(compasDegAtom)
   const { setSurfaceShapePattern } = useRoofFn()
   const checkedModule = useRecoilValue(checkedModuleState)
   const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
-  const setModuleStatistics = useSetRecoilState(moduleStatisticsState)
 
   const canvasSetting = useRecoilValue(canvasSettingState)
 
@@ -46,19 +43,11 @@ export function useModuleBasicSetting(tabNum) {
   const { getTrestleDetailList } = useMasterController()
   const [saleStoreNorthFlg, setSaleStoreNorthFlg] = useState(false)
 
-  const [currentObject, setCurrentObject] = useRecoilState(currentObjectState)
+  const setCurrentObject = useSetRecoilState(currentObjectState)
   const { setModuleStatisticsData } = useCircuitTrestle()
   const { createRoofPolygon, createMarginPolygon, createPaddingPolygon } = useMode()
 
   useEffect(() => {
-    // console.log('basicSetting', basicSetting)
-
-    if (canvas) {
-      //드래그 여부
-      // canvas.selection = true
-      // canvas.selectionFullyContained = true
-    }
-
     return () => {
       //수동 설치시 초기화
       removeMouseEvent('mouse:up')
@@ -67,8 +56,6 @@ export function useModuleBasicSetting(tabNum) {
     }
   }, [])
 
-  // const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useContext(EventContext)
-
   //모듈 선택에서 선택된 값들 넘어옴
   const makeModuleInitArea = () => {
     if (isObjectNotEmpty(moduleSelectionData) && tabNum === 3) {
@@ -144,10 +131,7 @@ export function useModuleBasicSetting(tabNum) {
                 //roof에 상세 데이터 추가
                 roof.set({ trestleDetail: detail.data })
                 roof.lines.forEach((line) => {
-                  line.attributes = {
+                  line.attributes = { ...line.attributes, offset: getOffset(detail.data, line.attributes.type) }
-                    ...line.attributes,
-                    offset: getOffset(detail.data, line.attributes.type),
-                  }
                 })
                 //배치면 설치 영역
                 makeModuleInstArea(roof, detail.data)
@@ -353,12 +337,7 @@ export function useModuleBasicSetting(tabNum) {
         }
 
         //기본 선택이랑 스트로크 굵기가 같으면 선택 안됨으로 봄
-        setupSurface.set({
+        setupSurface.set({ ...setupSurface, strokeWidth: 3, strokeDashArray: [0], fill: 'rgba(255,255,255,0.1)' })
-          ...setupSurface,
-          strokeWidth: 3,
-          strokeDashArray: [0],
-          fill: 'rgba(255,255,255,0.1)',
-        })
         canvas.discardActiveObject() // 객체의 활성 상태 해제
         //중복으로 들어가는걸 방지하기 위한 코드
 
@@ -368,12 +347,7 @@ export function useModuleBasicSetting(tabNum) {
         setCurrentObject({ name: 'moduleSetupSurface', arrayData: [...selectedModuleInstSurfaceArray] })
       } else {
         //선택후 재선택하면 선택안됨으로 변경
-        setupSurface.set({
+        setupSurface.set({ ...setupSurface, fill: 'rgba(255,255,255,0.1)', strokeDashArray: [10, 4], strokeWidth: 1 })
-          ...setupSurface,
-          fill: 'rgba(255,255,255,0.1)',
-          strokeDashArray: [10, 4],
-          strokeWidth: 1,
-        })
         canvas.discardActiveObject() // 객체의 활성 상태 해제
 
         //폴리곤에 커스텀 인덱스를 가지고 해당 배열 인덱스를 찾아 삭제함
@@ -424,8 +398,6 @@ export function useModuleBasicSetting(tabNum) {
    * 확인 후 셀을 이동시킴
    */
   const manualModuleSetup = (placementRef) => {
-    console.log('isManualModuleSetup', isManualModuleSetup)
-
     const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴
 
     if (isManualModuleSetup) {
@@ -444,10 +416,7 @@ export function useModuleBasicSetting(tabNum) {
       const batchObjects = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.OBJECT_SURFACE) //도머s 객체
       //수동모드 모듈 설치면 선택 잠금
       moduleSetupSurfaces.forEach((obj) => {
-        obj.set({
+        obj.set({ selectable: false, evented: false })
-          selectable: false,
-          evented: false,
-        })
       })
 
       //모듈 기본 옵션
@@ -836,10 +805,7 @@ export function useModuleBasicSetting(tabNum) {
       if (moduleSetupSurfaces) {
         //수동모드 해제시 모듈 설치면 선택 잠금
         moduleSetupSurfaces.forEach((obj) => {
-          obj.set({
+          obj.set({ selectable: true, evented: true })
-            selectable: true,
-            evented: true,
-          })
         })
       }
 
@@ -1027,7 +993,7 @@ export function useModuleBasicSetting(tabNum) {
 
         //근데 양변이 곡선이면 중앙에 맞추기 위해 아래와 위의 길이를 재서 모듈의 길이를 나눠서 들어갈수 있는 갯수가 동일하면 가운데로 정렬 시킨다
         if (flowLines.left.type === 'curve' && flowLines.right.type === 'curve') {
-          startPointX = isChidori ? flowLines.left.x1 + 1 : flowLines.left.x1 + (calcAreaWidth - totalModuleWidthCount * width) / 2
+          startPointX = flowLines.left.x1 + (calcAreaWidth - totalModuleWidthCount * width) / 2
         }
 
         let heightMargin = 0
@@ -1056,7 +1022,7 @@ export function useModuleBasicSetting(tabNum) {
             let moduleX = startPointX + width * j + 1 //5정도 마진을 준다
             widthMargin = j === 0 ? 0 : intvHor * j // 가로 마진값
             chidoriLength = 0 //치도리가 아니여도 기본값을 5정도 준다
-            if (isChidori && !isMaxSetup) {
+            if (isChidori) {
               chidoriLength = installedModuleHeightCount % 2 == 0 ? 0 : width / 2 - intvHor
             }
 
@@ -1728,11 +1694,7 @@ export function useModuleBasicSetting(tabNum) {
       const pointY2 = top
 
       //디버깅
-      const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], {
+      const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], { stroke: 'red', strokeWidth: 1, selectable: true })
-        stroke: 'red',
-        strokeWidth: 1,
-        selectable: true,
-      })
 
       // console.log(`index ${index} : finalLine`, pointX1, pointY1, pointX2, pointY2)
 
@@ -1854,11 +1816,7 @@ export function useModuleBasicSetting(tabNum) {
       const pointY2 = coords[2].y + ((coords[2].x - top) / (coords[2].x - coords[1].x)) * (coords[1].y - coords[2].y)
 
       //디버깅용
-      const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], {
+      const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], { stroke: 'red', strokeWidth: 1, selectable: true })
-        stroke: 'red',
-        strokeWidth: 1,
-        selectable: true,
-      })
       // canvas?.add(finalLine)
       // canvas?.renderAll()
 
@@ -1940,12 +1898,7 @@ export function useModuleBasicSetting(tabNum) {
       { x1: 0, y1: 0, index: -1 }, // 초기값: 무한대와 유효하지 않은 인덱스
     )
 
-    const obj = {
+    const obj = { left: leftFlow, right: rightFlow, top: topFlow, bottom: bottomFlow }
-      left: leftFlow,
-      right: rightFlow,
-      top: topFlow,
-      bottom: bottomFlow,
-    }
 
     return obj
   }
@@ -2240,10 +2193,7 @@ export function useModuleBasicSetting(tabNum) {
             const rectPoints = [
               { x: tempModule.left, y: tempModule.top },
               { x: tempModule.left + tempModule.width * tempModule.scaleX, y: tempModule.top },
-              {
+              { x: tempModule.left + tempModule.width * tempModule.scaleX, y: tempModule.top + tempModule.height * tempModule.scaleY },
-                x: tempModule.left + tempModule.width * tempModule.scaleX,
-                y: tempModule.top + tempModule.height * tempModule.scaleY,
-              },
               { x: tempModule.left, y: tempModule.top + tempModule.height * tempModule.scaleY },
             ]
 
@@ -2298,10 +2248,7 @@ export function useModuleBasicSetting(tabNum) {
       if (moduleSetupSurfaces) {
         //수동모드 해제시 모듈 설치면 선택 잠금
         moduleSetupSurfaces.forEach((obj) => {
-          obj.set({
+          obj.set({ selectable: true, evented: true })
-            selectable: true,
-            evented: true,
-          })
         })
       }