수동모듈 이동시 언마운트, 도머 방향 오류 수정

src/common/common.js

@@ -188,6 +188,7 @@ export const SAVE_KEY = [
   'onlyOffset',
   'isChidory',
   'textVisible',
+  'groupPoints',
 ]
 
 export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype]

src/components/floor-plan/modal/basic/BasicSetting.jsx

@@ -115,11 +115,6 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
 
   //팝업 닫기 버튼 이벤트
   const handleClosePopup = (id) => {
-    if (tabNum == 3) {
-      if (isManualModuleSetup) {
-        setIsManualModuleSetup(false)
-      }
-    }
     setIsClosePopup({ close: true, id: id })
   }
 

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

@@ -1,7 +1,7 @@
 import { forwardRef, useEffect, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
-import { checkedModuleState, currentCanvasPlanState } from '@/store/canvasAtom'
+import { checkedModuleState, currentCanvasPlanState, isManualModuleSetupState } from '@/store/canvasAtom'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
 import { isObjectNotEmpty } from '@/util/common-utils'
@@ -23,6 +23,8 @@ const Placement = forwardRef((props, refs) => {
 
   const [isMultiModule, setIsMultiModule] = useState(false)
 
+  const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
+
   //모듈 배치면 생성
   useEffect(() => {
     if (moduleSelectionData) {
@@ -33,6 +35,10 @@ const Placement = forwardRef((props, refs) => {
       }
       makeModuleInitArea(moduleSelectionData)
     }
+
+    return () => {
+      setIsManualModuleSetup(false)
+    }
   }, [])
 
   //최초 지입시 체크

src/hooks/module/useModuleBasicSetting.js

@@ -22,14 +22,13 @@ import { v4 as uuidv4 } from 'uuid'
 // import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
 import { isObjectNotEmpty } from '@/util/common-utils'
 import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
-import { useMode } from '../useMode'
+import { useMode } from '@/hooks/useMode'
 
 export function useModuleBasicSetting(tabNum) {
   const canvas = useRecoilValue(canvasState)
   const { getMessage } = useMessage()
   const roofDisplay = useRecoilValue(roofDisplaySelector)
   const [moduleSetupSurface, setModuleSetupSurface] = useRecoilState(moduleSetupSurfaceState)
-  const [moduleIsSetup, setModuleIsSetup] = useRecoilState(moduleIsSetupState)
   const { addCanvasMouseEventListener, initEvent, removeMouseEvent, addTargetMouseEventListener } = useEvent()
   // const { setModuleStatisticsData } = useCircuitTrestle()
   const { swalFire } = useSwal()

src/hooks/object/useObjectBatch.js

@@ -298,6 +298,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
     if (buttonAct === 3) {
       const bottomLength = height / (pitch * 0.25)
       const bottomOffsetLength = (height + offsetRef) / (pitch * 0.25)
+      let groupDormerPoints = [] //나중에 offset을 위한 포인트 저장용
 
       addCanvasMouseEventListener('mouse:move', (e) => {
         isDown = true
@@ -403,9 +404,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
             direction = 'north'
           }
 
-          const groupPoints = offsetRef > 0 ? triangleToPolygon(dormerOffset) : triangleToPolygon(dormer)
+          let { leftPoints, rightPoints, groupPoints } =
-
+            offsetRef > 0 ? splitDormerTriangle(dormerOffset, directionRef) : splitDormerTriangle(dormer, directionRef)
-          let splitedTriangle = offsetRef > 0 ? splitDormerTriangle(dormerOffset, directionRef) : splitDormerTriangle(dormer, directionRef)
           canvas?.remove(offsetRef > 0 ? dormerOffset : dormer)
 
           if (offsetRef > 0)
@@ -416,7 +416,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
               strokeDashArray: [0],
             }) //오프셋이 있을땐 같이 도머로 만든다
 
-          const leftTriangle = new QPolygon(splitedTriangle[0], {
+          const leftTriangle = new QPolygon(leftPoints, {
             fill: 'white',
             stroke: 'black',
             strokeWidth: 1,
@@ -435,7 +435,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
             fontWeight: lengthTextFont.fontWeight.value,
           })
 
-          const rightTriangle = new QPolygon(splitedTriangle[1], {
+          const rightTriangle = new QPolygon(rightPoints, {
             fill: 'white',
             stroke: 'black',
             strokeWidth: 1,
@@ -467,6 +467,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
 
           let offsetPolygon
 
+          groupDormerPoints = groupPoints
+
           if (offsetRef > 0) {
             canvas?.remove(dormer)
 
@@ -499,7 +501,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
             parentId: selectedSurface.id,
             originX: 'center',
             originY: 'center',
-            groupPoints: groupPoints,
+            groupPoints: groupDormerPoints,
           })
           canvas?.add(objectGroup)
 
@@ -526,6 +528,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
       //(동의길이 깊이)+출폭(깊이)-[(입력한 폭값)/2+출폭(폭)]*(0.25*입력한 寸)
       const heightOffsetLength = height + offsetRef - (width / 2 + offsetWidthRef) * (pitch * 0.25)
 
+      let groupDormerPoints = []
+
       addCanvasMouseEventListener('mouse:move', (e) => {
         isDown = true
         if (!isDown) return
@@ -639,7 +643,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
           }
 
           const offsetMode = offsetRef > 0 || offsetWidthRef > 0 ? 'offset' : 'normal'
-          let splitedPentagon =
+          let { leftPoints, rightPoints, groupPoints } =
             offsetRef > 0 || offsetWidthRef > 0
               ? splitDormerPentagon(dormerOffset, directionRef, offsetMode)
               : splitDormerPentagon(dormer, directionRef, offsetMode)
@@ -653,7 +657,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
               strokeDashArray: [0],
             }) //오프셋이 있을땐 같이 도머로 만든다
 
-          const leftPentagon = new QPolygon(splitedPentagon[0], {
+          const leftPentagon = new QPolygon(leftPoints, {
             fill: 'transparent',
             stroke: 'red',
             strokeWidth: 1,
@@ -670,7 +674,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
             pitch: pitch,
           })
 
-          const rightPentagon = new QPolygon(splitedPentagon[1], {
+          const rightPentagon = new QPolygon(rightPoints, {
             fill: 'transparent',
             stroke: 'red',
             strokeWidth: 1,
@@ -699,6 +703,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
 
           let offsetPolygon
 
+          groupDormerPoints = groupPoints
+
           if (offsetRef > 0) {
             canvas?.remove(dormer)
 
@@ -723,7 +729,6 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
           }
 
           const groupPolygon = offsetPolygon ? [leftPentagon, rightPentagon, offsetPolygon] : [leftPentagon, rightPentagon]
-          const groupPoints = offsetRef > 0 ? pentagonOffsetPoints : pentagonPoints
 
           const objectGroup = new fabric.Group(groupPolygon, {
             subTargetCheck: true,
@@ -733,7 +738,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
             groupYn: true,
             originX: 'center',
             originY: 'center',
-            groupPoints: groupPoints,
+            groupPoints: groupDormerPoints,
           })
           canvas?.add(objectGroup)
 
@@ -774,6 +779,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
 
     let leftPoints = []
     let rightPoints = []
+    let groupPoints = []
 
     if (direction === 'down') {
       leftPoints = [
@@ -787,6 +793,12 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
         { x: triangle.left, y: triangle.top + triangle.height },
         { x: triangle.left + halfWidth, y: triangle.top + triangle.height },
       ]
+
+      groupPoints = [
+        { x: triangle.left, y: triangle.top },
+        { x: triangle.left - halfWidth, y: triangle.top + triangle.height },
+        { x: triangle.left + halfWidth, y: triangle.top + triangle.height },
+      ]
     } else if (direction === 'up') {
       leftPoints = [
         { x: triangle.left, y: triangle.top },
@@ -799,6 +811,12 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
         { x: triangle.left, y: triangle.top - triangle.height },
         { x: triangle.left + halfWidth, y: triangle.top - triangle.height },
       ]
+
+      groupPoints = [
+        { x: triangle.left, y: triangle.top },
+        { x: triangle.left - halfWidth, y: triangle.top - triangle.height },
+        { x: triangle.left + halfWidth, y: triangle.top - triangle.height },
+      ]
     } else if (direction === 'left') {
       leftPoints = [
         { x: triangle.left, y: triangle.top },
@@ -811,6 +829,12 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
         { x: triangle.left - triangle.height, y: triangle.top },
         { x: triangle.left - triangle.height, y: triangle.top + halfWidth },
       ]
+
+      groupPoints = [
+        { x: triangle.left, y: triangle.top },
+        { x: triangle.left - triangle.height, y: triangle.top - halfWidth },
+        { x: triangle.left - triangle.height, y: triangle.top + halfWidth },
+      ]
     } else if (direction === 'right') {
       leftPoints = [
         { x: triangle.left, y: triangle.top },
@@ -820,11 +844,17 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
 
       rightPoints = [
         { x: triangle.left, y: triangle.top },
-        { x: triangle.left + triangle.height, y: triangle.top },
+        { x: triangle.left + triangle.height, y: triangle.top + triangle.height },
+        { x: triangle.left + triangle.height, y: triangle.top - triangle.height },
+      ]
+
+      groupPoints = [
+        { x: triangle.left, y: triangle.top },
+        { x: triangle.left + triangle.height, y: triangle.top + triangle.height },
         { x: triangle.left + triangle.height, y: triangle.top - triangle.height },
       ]
     }
-    return [leftPoints, rightPoints]
+    return { leftPoints, rightPoints, groupPoints }
   }
 
   const splitDormerPentagon = (pentagon, direction, offsetMode) => {
@@ -832,6 +862,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
 
     let leftPoints = []
     let rightPoints = []
+    let groupPoints = []
 
     if (direction === 'down') {
       leftPoints = [
@@ -847,6 +878,14 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
         { x: points[3].x, y: points[3].y },
         { x: points[4].x, y: points[4].y },
       ]
+
+      groupPoints = [
+        { x: points[0].x, y: points[0].y },
+        { x: points[1].x, y: points[1].y },
+        { x: points[2].x, y: points[3].y },
+        { x: points[3].x, y: points[3].y },
+        { x: points[4].x, y: points[4].y },
+      ]
     } else if (direction === 'up') {
       leftPoints = [
         { x: points[0].x, y: points[0].y },
@@ -861,6 +900,14 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
         { x: points[3].x, y: points[0].y - (points[2].y - points[0].y) },
         { x: points[0].x, y: points[0].y - (points[2].y - points[0].y) },
       ]
+
+      groupPoints = [
+        { x: points[0].x, y: points[0].y }, // 기준점
+        { x: points[1].x, y: points[0].y - (points[1].y - points[0].y) },
+        { x: points[2].x, y: points[0].y - (points[2].y - points[0].y) },
+        { x: points[3].x, y: points[0].y - (points[2].y - points[0].y) },
+        { x: points[3].x, y: points[0].y - (points[1].y - points[0].y) },
+      ]
     } else if (direction === 'left') {
       leftPoints = [
         { x: points[0].x, y: points[0].y },
@@ -881,6 +928,20 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
         },
         { x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y },
       ]
+
+      groupPoints = [
+        { x: points[0].x, y: points[0].y },
+        { x: points[0].x - (points[1].y - points[0].y), y: points[0].y - (points[0].x - points[1].x) },
+        {
+          x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y),
+          y: points[0].y - (points[0].x - points[1].x),
+        },
+        {
+          x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y),
+          y: points[0].y + (points[0].x - points[1].x),
+        },
+        { x: points[0].x - (points[1].y - points[0].y), y: points[0].y + (points[0].x - points[1].x) },
+      ]
     } else if (direction === 'right') {
       leftPoints = [
         { x: points[0].x, y: points[0].y },
@@ -901,9 +962,23 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
         },
         { x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y },
       ]
+
+      groupPoints = [
+        { x: points[0].x, y: points[0].y },
+        { x: points[0].x + (points[1].y - points[0].y), y: points[0].y + (points[0].x - points[1].x) },
+        {
+          x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y),
+          y: points[0].y + (points[0].x - points[1].x),
+        },
+        {
+          x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y),
+          y: points[0].y - (points[0].x - points[1].x),
+        },
+        { x: points[0].x + (points[1].y - points[0].y), y: points[0].y - (points[0].x - points[1].x) },
+      ]
     }
 
-    return [leftPoints, rightPoints]
+    return { leftPoints, rightPoints, groupPoints }
   }
 
   const resizeObjectBatch = (side, target, width, height) => {