Merge branch 'dev' into feature/qcast-229

src/hooks/module/useModuleBasicSetting.js

@@ -9,9 +9,9 @@ import { QLine } from '@/components/fabric/QLine'
 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 { EventContext } from '@/app/floor-plan/EventProvider'
+import { v4 as uuidv4 } from 'uuid'
 
 export function useModuleBasicSetting() {
   const canvas = useRecoilValue(canvasState)
@@ -20,7 +20,6 @@ export function useModuleBasicSetting() {
   const [moduleIsSetup, setModuleIsSetup] = useRecoilState(moduleIsSetupState)
   const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useEvent()
   // const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useContext(EventContext)
-  const [flowModuleLine, setFlowModuleLine] = useState({})
   let selectedModuleInstSurfaceArray = []
 
   const makeModuleInstArea = () => {
@@ -35,6 +34,9 @@ export function useModuleBasicSetting() {
       setSurfaceShapePattern(roof, roofDisplay.column, true) //패턴 변경
       const offsetPoints = offsetPolygon(roof.points, -20) //안쪽 offset
       //모듈설치영역?? 생성
+
+      const surfaceId = uuidv4()
+
       let setupSurface = new QPolygon(offsetPoints, {
         stroke: 'red',
         fill: 'transparent',
@@ -51,16 +53,20 @@ export function useModuleBasicSetting() {
         flowDirection: roof.direction,
         flipX: roof.flipX,
         flipY: roof.flipY,
+        surfaceId: surfaceId,
       })
 
       setupSurface.setViewLengthText(false)
-
+      canvas.add(setupSurface) //모듈설치면 만들기
-      canvas.add(setupSurface)
 
       if (setupSurface.flowDirection === 'south' || setupSurface.flowDirection === 'north') {
-        setFlowModuleLine(bottomTopFlowLine(setupSurface))
+        setupSurface.set({
+          flowLines: bottomTopFlowLine(setupSurface),
+        })
       } else {
-        setFlowModuleLine(leftRightFlowLine(setupSurface))
+        setupSurface.set({
+          flowLines: leftRightFlowLine(setupSurface),
+        })
       }
 
       //지붕면 선택 금지
@@ -392,11 +398,10 @@ export function useModuleBasicSetting() {
 
   //자동 모듈 설치(그리드 방식)
   const autoModuleSetup = (placementRef) => {
-    const isChidori = placementRef.isChidori.current
+    const isChidori = placementRef.isChidori.current === 'true' ? true : false
     const setupLocation = placementRef.setupLocation.current
     const isMaxSetup = placementRef.isMaxSetup.current
 
-    initEvent()
     const moduleSetupSurfaces = moduleSetupSurface //선택 설치면
 
     const notSelectedTrestlePolygons = canvas
@@ -425,6 +430,13 @@ export function useModuleBasicSetting() {
       })
     }
 
+    //어짜피 자동으로 누르면 선택안된데도 다 날아간다
+    canvas.getObjects().forEach((obj) => {
+      if (obj.name === 'module') {
+        canvas.remove(obj)
+      }
+    })
+
     notSelectedTrestlePolygons.forEach((obj) => {
       if (obj.modules) {
         obj.modules.forEach((module) => {
@@ -434,19 +446,27 @@ export function useModuleBasicSetting() {
       }
     })
 
-    const moduleSetupArray = []
+    const moduleOptions = {
-    moduleSetupSurfaces.forEach((moduleSetupSurface, index) => {
+      fill: '#BFFD9F',
-      moduleSetupSurface.fire('mousedown')
+      stroke: 'black',
+      strokeWidth: 0.1,
+      selectable: false, // 선택 가능하게 설정
+      lockMovementX: true, // X 축 이동 잠금
+      lockMovementY: true, // Y 축 이동 잠금
+      lockRotation: true, // 회전 잠금
+      lockScalingX: true, // X 축 크기 조정 잠금
+      lockScalingY: true, // Y 축 크기 조정 잠금
+      opacity: 0.8,
+      parentId: moduleSetupSurface.parentId,
+      name: 'module',
+    }
 
-      const surfaceMaxLines = findSetupSurfaceMaxLines(moduleSetupSurface)
+    let leftMargin, bottomMargin, square, chidoriLength
 
-      let maxLengthLine = moduleSetupSurface.lines.reduce((acc, cur) => {
+    //선택된 지붕안에 오브젝트(도머, 개구등)이 있는지 확인하는 로직 포함되면 배열 반환
-        return acc.length > cur.length ? acc : cur
+    const objectsIncludeSurface = (turfModuleSetupSurface) => {
-      })
+      let containsBatchObjects = []
-
+      containsBatchObjects = batchObjects.filter((batchObject) => {
-      const turfModuleSetupSurface = polygonToTurfPolygon(moduleSetupSurface) //폴리곤을 turf 객체로 변환
-
-      const containsBatchObjects = batchObjects.filter((batchObject) => {
         let convertBatchObject
 
         if (batchObject.type === 'group') {
@@ -454,9 +474,7 @@ export function useModuleBasicSetting() {
           convertBatchObject = batchObjectGroupToTurfPolygon(batchObject)
         } else {
           //개구, 그림자
-          batchObject.set({
+          batchObject.set({ points: rectToPolygon(batchObject) })
-            points: rectToPolygon(batchObject),
-          })
           canvas?.renderAll() // set된걸 바로 적용하기 위해
           convertBatchObject = polygonToTurfPolygon(batchObject) //rect를 폴리곤으로 변환 -> turf 폴리곤으로 변환
         }
@@ -465,20 +483,227 @@ export function useModuleBasicSetting() {
         return turf.booleanContains(turfModuleSetupSurface, convertBatchObject) || turf.booleanWithin(convertBatchObject, turfModuleSetupSurface)
       })
 
-      let difference = turfModuleSetupSurface //기본 객체(면형상)
+      return containsBatchObjects
+    }
+
+    /**
+     * 도머나 개구가 모듈에 걸치는지 확인하는 로직
+     * @param {*} squarePolygon
+     * @param {*} containsBatchObjects
+     * @returns
+     */
+    const checkModuleDisjointObjects = (squarePolygon, containsBatchObjects) => {
+      let isDisjoint = false
 
       if (containsBatchObjects.length > 0) {
-        //turf로 도머를 제외시키는 로직
-        for (let i = 0; i < containsBatchObjects.length; i++) {
         let convertBatchObject
-          if (containsBatchObjects[i].type === 'group') {
+        //도머가 있으면 적용되는 로직
-            convertBatchObject = batchObjectGroupToTurfPolygon(containsBatchObjects[i])
+        isDisjoint = containsBatchObjects.every((batchObject) => {
+          if (batchObject.type === 'group') {
+            convertBatchObject = batchObjectGroupToTurfPolygon(batchObject)
           } else {
-            convertBatchObject = polygonToTurfPolygon(containsBatchObjects[i])
+            convertBatchObject = polygonToTurfPolygon(batchObject)
+          }
+          /**
+           * 도머가 여러개일수있으므로 겹치는게 있다면...
+           * 안겹치는지 확인하는 로직이라 안겹치면 true를 반환
+           */
+          return turf.booleanDisjoint(squarePolygon, convertBatchObject)
+        })
+      } else {
+        isDisjoint = true
+      }
+      return isDisjoint
+    }
+
+    /**
+     * 배치면 안에 있는지 확인
+     * @param {*} squarePolygon
+     * @param {*} turfModuleSetupSurface
+     * @returns
+     */
+    const checkModuleDisjointSurface = (squarePolygon, turfModuleSetupSurface) => {
+      return turf.booleanContains(turfModuleSetupSurface, squarePolygon) || turf.booleanWithin(squarePolygon, turfModuleSetupSurface)
+    }
+
+    const downFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine) => {
+      const maxLeftEndPoint = surfaceMaxLines.left.x1 //최 좌측
+      const maxRightEndPoint = surfaceMaxLines.right.x1 //최 우측
+      const maxTopEndPoint = surfaceMaxLines.top.y1 //최 상단
+
+      let startPoint = flowModuleLine.find((obj) => obj.target === 'bottom')
+
+      let totalLeftEndPoint = maxLeftEndPoint - startPoint.x1
+      let totalTopEndPoint = maxTopEndPoint - startPoint.y1
+      let totalWidth = Math.ceil(Math.abs(maxRightEndPoint - maxLeftEndPoint) / width)
+      let diffLeftEndPoint = Math.abs(totalLeftEndPoint / width)
+      let diffTopEndPoint = Math.abs(totalTopEndPoint / height)
+      let startColPoint = Math.abs(width * Math.ceil(diffLeftEndPoint) - startPoint.x1)
+
+      for (let j = 0; j < diffTopEndPoint; j++) {
+        bottomMargin = j === 0 ? 1 : 0
+        for (let i = 0; i <= totalWidth; i++) {
+          leftMargin = i === 0 ? 1 : 0 //숫자가 0이면 0, 1이면 1로 바꾸기
+          chidoriLength = 0
+          if (isChidori) {
+            chidoriLength = j % 2 === 0 ? 0 : width / 2
+          }
+
+          square = [
+            [startColPoint + width * i - chidoriLength, startPoint.y1 - height * j - bottomMargin],
+            [startColPoint + width * i + width - chidoriLength, startPoint.y1 - height * j - bottomMargin],
+            [startColPoint + width * i + width - chidoriLength, startPoint.y1 - height * j - height - bottomMargin],
+            [startColPoint + width * i - chidoriLength, startPoint.y1 - height * j - height - bottomMargin],
+            [startColPoint + width * i - chidoriLength, startPoint.y1 - height * j - bottomMargin],
+          ]
+
+          let squarePolygon = turf.polygon([square])
+          let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
+          let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
+
+          // if (disjointFromTrestle && isDisjoint) {
+          let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
+          canvas?.add(tempModule)
+          moduleSetupArray.push(tempModule)
         }
       }
     }
 
+    const leftFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine) => {
+      let startPoint = flowModuleLine.find((obj) => obj.target === 'left')
+
+      const maxRightEndPoint = surfaceMaxLines.right.x1 //최 우측
+      const maxTopEndPoint = surfaceMaxLines.top.y1 //최 상단
+      const maxBottomEndPoint = surfaceMaxLines.bottom.y1 //최하단
+      let totalTopEndPoint = Math.abs(maxTopEndPoint - startPoint.y1) //전체 높이에서 현재 높이를 뺌
+      let diffTopEndPoint = Math.abs(totalTopEndPoint / height)
+      let totalHeight = Math.ceil(Math.abs(maxBottomEndPoint - maxTopEndPoint) / height)
+      let totalWidth = Math.abs(startPoint.x1 - maxRightEndPoint) / width
+      let startRowPoint = startPoint.y1 - height * Math.ceil(diffTopEndPoint)
+
+      for (let j = 0; j < totalHeight; j++) {
+        bottomMargin = j === 0 ? 1 : 0
+        for (let i = 0; i <= totalWidth; i++) {
+          leftMargin = 1
+          chidoriLength = 0
+          if (isChidori) {
+            chidoriLength = i % 2 === 0 ? 0 : height / 2
+          }
+
+          square = [
+            [startPoint.x1 + width * i + leftMargin, startRowPoint + height * j + bottomMargin - chidoriLength],
+            [startPoint.x1 + width * i + width + leftMargin, startRowPoint + height * j + bottomMargin - chidoriLength],
+            [startPoint.x1 + width * i + width + leftMargin, startRowPoint + height * j + height + bottomMargin - chidoriLength],
+            [startPoint.x1 + width * i + leftMargin, startRowPoint + height * j + height + bottomMargin - chidoriLength],
+            [startPoint.x1 + width * i + leftMargin, startRowPoint + height * j + bottomMargin - chidoriLength],
+          ]
+
+          console.log('square', square)
+
+          let squarePolygon = turf.polygon([square])
+          let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
+          let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
+
+          // if (disjointFromTrestle && isDisjoint) {
+          let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
+          canvas?.add(tempModule)
+          moduleSetupArray.push(tempModule)
+        }
+      }
+    }
+
+    const topFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine) => {
+      let startPoint = flowModuleLine.find((obj) => obj.target === 'top')
+      const maxLeftEndPoint = surfaceMaxLines.left.x1 //최 좌측
+      const maxRightEndPoint = surfaceMaxLines.right.x1 //최 우측
+
+      const maxBottomEndPoint = surfaceMaxLines.bottom.y1 //최하단
+      let totalLeftEndPoint = maxLeftEndPoint - startPoint.x1
+      let totalRightEndPoint = maxLeftEndPoint - maxRightEndPoint
+      let totalBottomEndPoint = maxBottomEndPoint - startPoint.y1
+      let diffLeftEndPoint = Math.abs(totalLeftEndPoint / width)
+      let diffRightEndPoint = Math.abs(totalRightEndPoint / width)
+      let diffBottomEndPoint = Math.abs(totalBottomEndPoint / height)
+      let startColPoint = Math.abs(width * Math.ceil(diffLeftEndPoint) - startPoint.x1)
+
+      for (let j = 0; j < diffBottomEndPoint; j++) {
+        for (let i = 0; i < diffRightEndPoint; i++) {
+          chidoriLength = 0
+          if (isChidori) {
+            chidoriLength = j % 2 === 0 ? 0 : width / 2
+          }
+          square = [
+            [startColPoint + width * i + chidoriLength, startPoint.y1 + height * j + 1],
+            [startColPoint + width * i + chidoriLength, startPoint.y1 + height * j + height + 1],
+            [startColPoint + width * i + width + chidoriLength, startPoint.y1 + height * j + height + 1],
+            [startColPoint + width * i + width + chidoriLength, startPoint.y1 + height * j + 1],
+            [startColPoint + width * i + chidoriLength, startPoint.y1 + height * j + 1],
+          ]
+
+          let squarePolygon = turf.polygon([square])
+          let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
+          let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
+
+          // if (disjointFromTrestle && isDisjoint) {
+          let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
+          canvas?.add(tempModule)
+          moduleSetupArray.push(tempModule)
+        }
+      }
+    }
+
+    const rightFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine) => {
+      let startPoint = flowModuleLine.find((obj) => obj.target === 'right')
+      const maxLeftEndPoint = surfaceMaxLines.left.x1 //최 좌측
+
+      const maxTopEndPoint = surfaceMaxLines.top.y1 //최 상단
+      const maxBottomEndPoint = surfaceMaxLines.bottom.y1 //최하단
+      let totalTopEndPoint = Math.abs(maxTopEndPoint - startPoint.y1) //전체 높이에서 현재 높이를 뺌
+      let diffTopEndPoint = Math.abs(totalTopEndPoint / height)
+      let totalHeight = Math.ceil(Math.abs(maxBottomEndPoint - maxTopEndPoint) / height)
+      let totalWidth = Math.abs(startPoint.x1 - maxLeftEndPoint) / width
+      let startRowPoint = startPoint.y1 - height * Math.ceil(diffTopEndPoint)
+
+      for (let j = 0; j < totalHeight; j++) {
+        bottomMargin = j === 0 ? 1 : 0
+        for (let i = 0; i <= totalWidth; i++) {
+          leftMargin = 1
+          chidoriLength = 0
+          if (isChidori) {
+            chidoriLength = i % 2 === 0 ? 0 : height / 2
+          }
+
+          square = [
+            [startPoint.x1 - width * i - leftMargin, startRowPoint + height * j + bottomMargin + chidoriLength],
+            [startPoint.x1 - width * i - width - leftMargin, startRowPoint + height * j + bottomMargin + chidoriLength],
+            [startPoint.x1 - width * i - width - leftMargin, startRowPoint + height * j + height + bottomMargin + chidoriLength],
+            [startPoint.x1 - width * i - leftMargin, startRowPoint + height * j + height + bottomMargin + chidoriLength],
+            [startPoint.x1 - width * i - leftMargin, startRowPoint + height * j + bottomMargin + chidoriLength],
+          ]
+
+          let squarePolygon = turf.polygon([square])
+          let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
+          let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
+
+          // if (disjointFromTrestle && isDisjoint) {
+          let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
+          canvas?.add(tempModule)
+          moduleSetupArray.push(tempModule)
+        }
+      }
+    }
+
+    moduleSetupSurfaces.forEach((moduleSetupSurface, index) => {
+      moduleSetupSurface.fire('mousedown')
+      const moduleSetupArray = []
+
+      let maxLengthLine = moduleSetupSurface.lines.reduce((acc, cur) => {
+        return acc.length > cur.length ? acc : cur
+      })
+
+      const turfModuleSetupSurface = polygonToTurfPolygon(moduleSetupSurface) //폴리곤을 turf 객체로 변환
+      const containsBatchObjects = objectsIncludeSurface(turfModuleSetupSurface) //배치면에 오브젝트(도머, 개구등)이 있는지 확인하는 로직
+
       let width = maxLengthLine.flowDirection === 'east' || maxLengthLine.flowDirection === 'west' ? 172.2 : 113.4
       let height = maxLengthLine.flowDirection === 'east' || maxLengthLine.flowDirection === 'west' ? 113.4 : 172.2
 
@@ -488,102 +713,56 @@ export function useModuleBasicSetting() {
         height = moduleSetupSurface.flowDirection === 'south' || moduleSetupSurface.flowDirection === 'north' ? 113.4 : 172.2
       }
 
-      let square
+      const surfaceMaxLines = findSetupSurfaceMaxLines(moduleSetupSurface)
-      let startPoint, endPoint
 
+      //처마면 배치
       if (setupLocation === 'eaves') {
+        // 흐름방향이 남쪽일때
         if (moduleSetupSurface.flowDirection === 'south') {
-          startPoint = flowModuleLine.find((obj) => obj.target === 'bottom')
+          downFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
-          endPoint = flowModuleLine.find((obj) => obj.target === 'top')
-          const totalHeight = endPoint.y1 - startPoint.y1
-          const diffHeight = Math.abs(totalHeight / height)
-          let leftMargin = 0
-          let bottomMargin = 0
-
-          for (let i = 0; i < diffHeight; i++) {
-            leftMargin = i === 0 ? 1 : 0
-            bottomMargin = i === 0 ? 0 : 1
-
-            square = [
-              [startPoint.x1 + leftMargin, startPoint.y1 - height - bottomMargin],
-              [startPoint.x1 + leftMargin, startPoint.y1 - bottomMargin],
-              [startPoint.x1 + leftMargin + width, startPoint.y1 - bottomMargin],
-              [startPoint.x1 + leftMargin + width, startPoint.y1 - height - bottomMargin],
-              [startPoint.x1 + leftMargin, startPoint.y1 - height - bottomMargin],
-            ]
-
-            const squarePolygon = turf.polygon([square])
-
-            //설치면 안에 있는지 확인
-            const disjointFromTrestle =
-              turf.booleanContains(turfModuleSetupSurface, squarePolygon) || turf.booleanWithin(squarePolygon, turfModuleSetupSurface)
-
-            if (disjointFromTrestle) {
-              let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
-              const points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
-
-              if (containsBatchObjects.length > 0) {
-                let convertBatchObject
-                //도머가 있으면 적용되는 로직
-                const isDisjoint = containsBatchObjects.every((batchObject) => {
-                  if (batchObject.type === 'group') {
-                    convertBatchObject = batchObjectGroupToTurfPolygon(batchObject)
-                  } else {
-                    convertBatchObject = polygonToTurfPolygon(batchObject)
         }
-                  return turf.booleanDisjoint(squarePolygon, convertBatchObject) //도머가 여러개일수있으므로 겹치는게 있다면...
+        if (moduleSetupSurface.flowDirection === 'west') {
-                })
+          leftFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
-                if (isDisjoint) {
-                  const tempModule = new QPolygon(points, {
-                    fill: '#BFFD9F',
-                    stroke: 'black',
-                    strokeWidth: 0.1,
-                    selectable: true, // 선택 가능하게 설정
-                    lockMovementX: false, // X 축 이동 잠금
-                    lockMovementY: false, // Y 축 이동 잠금
-                    lockRotation: false, // 회전 잠금
-                    lockScalingX: false, // X 축 크기 조정 잠금
-                    lockScalingY: false, // Y 축 크기 조정 잠금
-                    opacity: 0.8,
-                    parentId: moduleSetupSurface.parentId,
-                    name: 'module',
-                  })
-                  tempModule.setViewLengthText(false)
-                  canvas?.add(tempModule)
-                  moduleSetupArray.push(tempModule)
-                }
-              } else {
-                //도머가 없을땐 그냥 그림
-                const tempModule = new QPolygon(points, {
-                  fill: '#BFFD9F',
-                  stroke: 'black',
-                  selectable: true, // 선택 가능하게 설정
-                  lockMovementX: true, // X 축 이동 잠금
-                  lockMovementY: true, // Y 축 이동 잠금
-                  lockRotation: true, // 회전 잠금
-                  lockScalingX: true, // X 축 크기 조정 잠금
-                  lockScalingY: true, // Y 축 크기 조정 잠금
-                  opacity: 0.8,
-                  parentId: moduleSetupSurface.parentId,
-                  name: 'module',
-                })
-                canvas?.add(tempModule)
-                moduleSetupArray.push(tempModule)
-              }
-              startPoint = { x1: points[0].x, y1: points[0].y, x2: points[3].x, y2: points[3].y }
         }
+        if (moduleSetupSurface.flowDirection === 'east') {
+          rightFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
         }
+        if (moduleSetupSurface.flowDirection === 'north') {
+          topFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
         }
       } else if (setupLocation === 'ridge') {
+        if (moduleSetupSurface.flowDirection === 'south') {
+          topFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
+        }
+        if (moduleSetupSurface.flowDirection === 'west') {
+          rightFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
+        }
+        if (moduleSetupSurface.flowDirection === 'east') {
+          leftFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
+        }
+        if (moduleSetupSurface.flowDirection === 'north') {
+          downFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
+        }
       } else {
       }
 
-      moduleSetupSurface.set({ modules: moduleSetupArray })
+      const setupedModules = moduleSetupArray.filter((module) => {
+        let disjointFromTrestle = checkModuleDisjointSurface(module.turfPoints, turfModuleSetupSurface)
+        let isDisjoint = checkModuleDisjointObjects(module.turfPoints, containsBatchObjects)
+
+        if (!(disjointFromTrestle && isDisjoint)) {
+          // canvas?.remove(module)
+          module.set({ fill: 'rgba(255,190,41, 0.4)', stroke: 'black', strokeWidth: 1 })
+          return false
+        } else {
+          return module
+        }
+      })
+      moduleSetupSurface.set({ modules: setupedModules })
+      setModuleIsSetup(moduleSetupArray)
     })
 
-    setModuleIsSetup(moduleSetupArray)
+    // console.log(calculateForApi(moduleSetupArray))
-
-    console.log(calculateForApi(moduleSetupArray))
   }
 
   const calculateForApi = (moduleSetupArray) => {
@@ -744,9 +923,8 @@ export function useModuleBasicSetting() {
     )
     flowArray.push(topFlow)
 
-    let idx = 0
     let rtnObjArray = []
-    flowArray.forEach((center) => {
+    flowArray.forEach((center, index) => {
       const linesArray = new Array()
 
       surface.lines.filter((line) => {
@@ -785,12 +963,6 @@ export function useModuleBasicSetting() {
       const h = beta * Math.sin((angle1 * Math.PI) / 180) // 높이
       const sign = Math.sign(coords[0].y - coords[1].y) // 진행방향
       const top = coords[1].y + sign * h // 변경되는 높이 좌표 값
-      // const line3 = new QLine([coords[1].x, coords[1].y, coords[1].x, top], {
-      //   stroke: 'blue',
-      //   strokeWidth: 1,
-      //   selectable: true,
-      // })
-      // // canvas?.add(line3)
 
       const pointX1 = coords[0].x + ((coords[0].y - top) / (coords[0].y - coords[1].y)) * (coords[1].x - coords[0].x)
       const pointY1 = top
@@ -805,9 +977,39 @@ export function useModuleBasicSetting() {
       canvas?.add(finalLine)
       canvas?.renderAll()
 
-      const rtnObj = { target: idx === 0 ? 'bottom' : 'top', x1: pointX1, y1: pointY1, x2: pointX2, y2: pointY2 }
+      let rtnObj
+      //평평하면
+      if (alpha === 0 || beta === 0 || h === 0 || sign === 0) {
+        //꼭지점이 없고 평평할때 ex) 네모
+        let standardLine
+        if (index === 0) {
+          //bottom
+          standardLine = surface.lines.reduce((acc, line, index) => {
+            if (line.y1 > acc.y1 || (line.y1 === acc.y1 && line.y2 > acc.y2)) {
+              return { x1: line.x1, y1: line.y1, index: index }
+            }
+            return acc
+          })
+        } else {
+          standardLine = surface.lines.reduce((acc, line, index) => {
+            if (line.y1 < acc.y1 || (line.y1 === acc.y1 && line.y2 < acc.y2)) {
+              return { x1: line.x1, y1: line.y1, index: index }
+            }
+            return acc
+          })
+        }
+        rtnObj = {
+          target: index === 0 ? 'bottom' : 'top',
+          x1: standardLine.x1,
+          y1: standardLine.y1,
+          x2: standardLine.x1 + charlie,
+          y2: standardLine.y1,
+        }
+      } else {
+        rtnObj = { target: index === 0 ? 'bottom' : 'top', x1: pointX1, y1: pointY1, x2: pointX2, y2: pointY2 }
+      }
+
       rtnObjArray.push(rtnObj)
-      ++idx
     })
 
     return rtnObjArray
@@ -839,7 +1041,7 @@ export function useModuleBasicSetting() {
 
     let idx = 0
     let rtnObjArray = []
-    flowArray.forEach((center) => {
+    flowArray.forEach((center, index) => {
       const linesArray = surface.lines.filter((line) => {
         if ((center.x1 === line.x1 && center.y1 === line.y1) || (center.x1 === line.x2 && center.y1 === line.y2)) {
           return line
@@ -898,10 +1100,40 @@ export function useModuleBasicSetting() {
       canvas?.add(finalLine)
       canvas?.renderAll()
 
-      const rtnObj = { target: idx === 0 ? 'left' : 'right', x1: pointX1, y1: pointY1, x2: pointX2, y2: pointY2 }
+      let rtnObj
-      rtnObjArray.push(rtnObj)
+      //평평하면
-      ++idx
+      if (alpha === 0 || beta === 0 || h === 0 || sign === 0) {
+        //꼭지점이 없고 평평할때 ex) 네모
+        let standardLine
+        if (index === 0) {
+          //bottom
+          standardLine = surface.lines.reduce((acc, line, index) => {
+            if (line.x1 < acc.x1 || (line.x1 === acc.x1 && line.y1 < acc.y1)) {
+              return { x1: line.x1, y1: line.y1, index: index }
+            }
+            return acc
           })
+        } else {
+          standardLine = surface.lines.reduce((acc, line, index) => {
+            if (line.x1 > acc.x1 || (line.x1 === acc.x1 && line.y1 > acc.y1)) {
+              return { x1: line.x1, y1: line.y1, index: index }
+            }
+            return acc
+          })
+        }
+        rtnObj = {
+          target: index === 0 ? 'left' : 'right',
+          x1: standardLine.x1,
+          y1: standardLine.y1,
+          x2: standardLine.x1,
+          y2: standardLine.y1 + charlie,
+        }
+      } else {
+        rtnObj = { target: idx === 0 ? 'left' : 'right', x1: pointX1, y1: pointY1, x2: pointX2, y2: pointY2 }
+      }
+      rtnObjArray.push(rtnObj)
+    })
+    return rtnObjArray
   }
 
   const findSetupSurfaceMaxLines = (surface) => {