Merge branch 'dev' into feature/yj-layoutSetup

# Conflicts:
#	src/hooks/module/useModuleBasicSetting.js

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

@@ -45,6 +45,8 @@ const Placement = forwardRef((props, refs) => {
     }
 
     return () => {
+      refs.isChidori.current = 'false'
+      refs.setupLocation.current = 'eaves'
       setIsManualModuleSetup(false)
       setIsManualModuleLayoutSetup(false)
       setManualSetupMode('off')

src/components/floor-plan/modal/module/PanelEdit.jsx

@@ -38,6 +38,11 @@ export default function PanelEdit(props) {
       const isSetupModules = canvas.getObjects().filter((obj) => obj.name === 'module') // selectedObj에 없는 객체만 필터링
       isSetupModules.forEach((obj) => obj.set({ lockMovementX: false, lockMovementY: false }))
     }
+
+    //팝업 닫을때 선택 해제
+    return () => {
+      canvas?.discardActiveObject() //선택해제
+    }
   }, [])
 
   //모듈 이동 적용
@@ -87,7 +92,7 @@ export default function PanelEdit(props) {
         moduleMultiCopy('row', length, direction)
         break
     }
-    closePopup(id)
+    // closePopup(id)
   }
 
   return (

src/hooks/common/useCanvasMenu.js

@@ -7,8 +7,6 @@ import { POLYGON_TYPE } from '@/common/common'
 
 export const useCanvasMenu = () => {
   const [selectedMenu, setSelectedMenu] = useRecoilState(selectedMenuState)
-  const canvas = useRecoilValue(canvasState)
-  const { drawDirectionArrow } = usePolygon()
 
   return {
     selectedMenu,

src/hooks/module/useModule.js

@@ -54,7 +54,7 @@ export function useModule() {
       })
       return
     }
-    canvas.discardActiveObject() //선택해제
+    // canvas.discardActiveObject() //선택해제
 
     const isSetupModules = getOtherModules(selectedObj)
     const selectedModules = canvas.getObjects().filter((obj) => selectedIds.includes(obj.id) && obj.name === 'module') //선택했던 객체들만 가져옴

src/hooks/module/useModuleBasicSetting.js

@@ -13,10 +13,10 @@ import {
 } 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'
@@ -26,7 +26,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'
@@ -42,16 +41,12 @@ 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 [isManualModuleLayoutSetup, setIsManualModuleLayoutSetup] = useRecoilState(isManualModuleLayoutSetupState)
-  const setModuleStatistics = useSetRecoilState(moduleStatisticsState)
-
   const canvasSetting = useRecoilValue(canvasSettingState)
-
   const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
   const [trestleDetailParams, setTrestleDetailParams] = useState([])
   const [trestleDetailList, setTrestleDetailList] = useState([])
@@ -59,7 +54,7 @@ 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()
 
@@ -68,14 +63,6 @@ export function useModuleBasicSetting(tabNum) {
   const setManualSetupMode = useSetRecoilState(toggleManualSetupModeState)
 
   useEffect(() => {
-    // console.log('basicSetting', basicSetting)
-
-    if (canvas) {
-      //드래그 여부
-      // canvas.selection = true
-      // canvas.selectionFullyContained = true
-    }
-
     return () => {
       //수동 설치시 초기화
       removeMouseEvent('mouse:up')
@@ -92,8 +79,6 @@ export function useModuleBasicSetting(tabNum) {
     }
   }, [])
 
-  // const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useContext(EventContext)
-
   //모듈 선택에서 선택된 값들 넘어옴
   const makeModuleInitArea = () => {
     if (isObjectNotEmpty(moduleSelectionData) && tabNum === 3) {
@@ -173,10 +158,7 @@ export function useModuleBasicSetting(tabNum) {
                   strokeWidth: 7,
                 })
                 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)
@@ -387,12 +369,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() // 객체의 활성 상태 해제
         //중복으로 들어가는걸 방지하기 위한 코드
 
@@ -402,12 +379,7 @@ export function useModuleBasicSetting(tabNum) {
         setCurrentObject({ name: POLYGON_TYPE.MODULE_SETUP_SURFACE, 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() // 객체의 활성 상태 해제
 
         //폴리곤에 커스텀 인덱스를 가지고 해당 배열 인덱스를 찾아 삭제함
@@ -485,10 +457,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,
-        })
       })
 
       //모듈 기본 옵션
@@ -894,10 +863,7 @@ export function useModuleBasicSetting(tabNum) {
       if (moduleSetupSurfaces) {
         //수동모드 해제시 모듈 설치면 선택 잠금
         moduleSetupSurfaces.forEach((obj) => {
-          obj.set({
+          obj.set({ selectable: true, evented: true })
-            selectable: true,
-            evented: true,
-          })
         })
       }
 
@@ -1894,7 +1860,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
@@ -1923,7 +1889,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
             }
 
@@ -2572,11 +2538,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)
 
@@ -2698,11 +2660,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()
 
@@ -2784,12 +2742,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
   }
@@ -3116,10 +3069,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 },
             ]
 
@@ -3174,10 +3124,7 @@ export function useModuleBasicSetting(tabNum) {
       if (moduleSetupSurfaces) {
         //수동모드 해제시 모듈 설치면 선택 잠금
         moduleSetupSurfaces.forEach((obj) => {
-          obj.set({
+          obj.set({ selectable: true, evented: true })
-            selectable: true,
-            evented: true,
-          })
         })
       }