moduleSetupSurfaces 별 계산 작업중

src/hooks/module/useModuleBasicSetting.js

@@ -953,36 +953,28 @@ export function useModuleBasicSetting() {
       // })
       // setModuleIsSetup(moduleArray)
     })
-    console.log(calculateForApi())
+    calculateForApi()
   }
 
   const calculateForApi = () => {
-    // TODO : 현재는 남쪽기준. 동,서,북 분기처리 필요
-
     const moduleSufaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
+
     const results = []
 
     moduleSufaces.forEach((moduleSurface) => {
       const centerPoints = []
+      const direction = moduleSurface.direction
       const modules = moduleSurface.modules
 
       modules.forEach((module, index) => {
         module.tempIndex = index
         const { x, y } = module.getCenterPoint()
         const { width, height } = module
-        centerPoints.push({ x, y, width: Math.abs(width), height: Math.abs(height), index })
+        centerPoints.push({ x, y, width: Math.floor(width), height: Math.floor(height), index })
-        const circle = new fabric.Circle({
-          radius: 5,
-          fill: 'red',
-          name: 'redCircle',
-          left: x - 5,
-          top: y - 5,
-          index: index,
-          selectable: false,
-        })
-        // canvas.add(circle)
       })
 
+      if (centerPoints.length === 0) return
+
       //완전 노출 하면
       let exposedBottom = 0
       // 반 노출 하면
@@ -999,28 +991,48 @@ export function useModuleBasicSetting() {
       centerPoints.forEach((centerPoint, index) => {
         const { x, y, width, height } = centerPoint
         // centerPoints중에 현재 centerPoint와 x값이 같고, y값이 y-height값과 같은 centerPoint가 있는지 확인
-        const bottomCell = centerPoints.filter((centerPoint) => Math.abs(centerPoint.x - x) < 2 && Math.abs(centerPoint.y - (y + height)) < 2)
+        let bottomCell
-        if (bottomCell.length === 1) {
+        let bottomLeftPoint
-          touchDimension++
+        let bottomRightPoint
-          return
+        let leftBottomCnt
+        let rightBottomCnt
+
+        switch (direction) {
+          case 'south':
+            bottomCell = centerPoints.filter((centerPoint) => Math.abs(centerPoint.x - x) < 2 && Math.abs(centerPoint.y - (y + height)) < 2)
+            bottomLeftPoint = { x: x - width / 2, y: y + height }
+            bottomRightPoint = { x: x + width / 2, y: y + height }
+            break
+          case 'north':
+            bottomCell = centerPoints.filter((centerPoint) => Math.abs(centerPoint.x - x) < 2 && Math.abs(centerPoint.y - (y - height)) < 2)
+            bottomLeftPoint = { x: x + width / 2, y: y - height }
+            bottomRightPoint = { x: x - width / 2, y: y - height }
+            break
+          case 'east':
+            bottomCell = centerPoints.filter((centerPoint) => Math.abs(centerPoint.x - (x - width)) < 2 && Math.abs(centerPoint.y - y) < 2)
+            bottomLeftPoint = { x: x + width, y: y + height / 2 }
+            bottomRightPoint = { x: x + width, y: y - height / 2 }
+            break
+          case 'west':
+            bottomCell = centerPoints.filter((centerPoint) => Math.abs(centerPoint.x - (x + width)) < 2 && Math.abs(centerPoint.y - y) < 2)
+            bottomLeftPoint = { x: x - width, y: y - height / 2 }
+            bottomRightPoint = { x: x - width, y: y + height / 2 }
+            break
         }
 
-        const bottomLeftPoint = { x: x - width / 2, y: y + height }
+        if (bottomCell.length === 1) {
-        const bottomRightPoint = { x: x + width / 2, y: y + height }
+          return
+        }
 
         // 바로 아래에 셀이 없는 경우 물떼세 배치가 왼쪽 되어있는 셀을 찾는다.
-        const leftBottomCnt = centerPoints.filter(
+        leftBottomCnt = centerPoints.filter(
           (centerPoint) => Math.abs(centerPoint.x - bottomLeftPoint.x) < 2 && Math.abs(centerPoint.y - bottomLeftPoint.y) < 2,
         ).length
-        const rightBottomCnt = centerPoints.filter(
+        rightBottomCnt = centerPoints.filter(
           (centerPoint) => Math.abs(centerPoint.x - bottomRightPoint.x) < 2 && Math.abs(centerPoint.y - bottomRightPoint.y) < 2,
         ).length
-        if (leftBottomCnt + rightBottomCnt === 2) {
+
-          touchDimension++
-          return
-        }
         if (leftBottomCnt + rightBottomCnt === 1) {
-          halfTouchDimension++
           exposedHalfBottom++
           return
         }
@@ -1029,23 +1041,56 @@ export function useModuleBasicSetting() {
 
       centerPoints.forEach((centerPoint, index) => {
         const { x, y, width, height } = centerPoint
-        const topCell = centerPoints.filter((centerPoint) => Math.abs(centerPoint.x - x) < 2 && Math.abs(centerPoint.y - (y - height)) < 2)
+
+        let topCell
+        let topLeftPoint
+        let topRightPoint
+        let leftTopCnt
+        let rightTopCnt
+
+        switch (direction) {
+          case 'south':
+            topCell = centerPoints.filter((centerPoint) => Math.abs(centerPoint.x - x) < 2 && Math.abs(centerPoint.y - (y - height)) < 2)
+            topLeftPoint = { x: x - width / 2, y: y - height }
+            topRightPoint = { x: x + width / 2, y: y - height }
+            break
+          case 'north':
+            topCell = centerPoints.filter((centerPoint) => Math.abs(centerPoint.x - x) < 2 && Math.abs(centerPoint.y - (y + height)) < 2)
+            topLeftPoint = { x: x + width / 2, y: y + height }
+            topRightPoint = { x: x - width / 2, y: y + height }
+            break
+          case 'east':
+            topCell = centerPoints.filter((centerPoint) => Math.abs(centerPoint.x - (x - width)) < 2 && Math.abs(centerPoint.y - y) < 2)
+            topLeftPoint = { x: x - width, y: y + height / 2 }
+            topRightPoint = { x: x - width, y: y - height / 2 }
+            break
+          case 'west':
+            topCell = centerPoints.filter((centerPoint) => Math.abs(centerPoint.x - (x + width)) < 2 && Math.abs(centerPoint.y - y) < 2)
+            topLeftPoint = { x: x + width, y: y - height / 2 }
+            topRightPoint = { x: x + width, y: y + height / 2 }
+            break
+        }
+
         if (topCell.length === 1) {
+          touchDimension++
           return
         }
 
-        const topLeftPoint = { x: x - width / 2, y: y - height }
+        leftTopCnt = centerPoints.filter(
-        const topRightPoint = { x: x + width / 2, y: y - height }
-
-        const leftTopCnt = centerPoints.filter(
           (centerPoint) => Math.abs(centerPoint.x - topLeftPoint.x) < 2 && Math.abs(centerPoint.y - topRightPoint.y) < 2,
         ).length
-        const rightTopCnt = centerPoints.filter(
+        rightTopCnt = centerPoints.filter(
           (centerPoint) => Math.abs(centerPoint.x - topRightPoint.x) < 2 && Math.abs(centerPoint.y - topRightPoint.y) < 2,
         ).length
 
+        if (leftTopCnt + rightTopCnt === 2) {
+          touchDimension++
+          return
+        }
+
         if (leftTopCnt + rightTopCnt === 1) {
           exposedHalfTop++
+          halfTouchDimension++
           return
         }
         if (leftTopCnt + rightTopCnt === 0) {
@@ -1059,14 +1104,33 @@ export function useModuleBasicSetting() {
       const points = cells.map((cell) => {
         return cell.getCenterPoint()
       })*/
-      const groupPoints = groupCoordinates(centerPoints, modules[0])
+      const groupPoints = groupCoordinates(centerPoints, modules[0], direction)
-      console.log('groupPoints', groupPoints)
+
       groupPoints.forEach((group) => {
-        // 각 그룹에서 y값이 큰 값을 찾는다.
+        let maxY = group.reduce((acc, cur) => (acc.y > cur.y ? acc : cur)).y
-        // 그리고 그 y값과 같은 값을 가지는 centerPoint를 찾는다.
+        let minY = group.reduce((acc, cur) => (acc.y < cur.y ? acc : cur)).y
-        const maxY = group.reduce((acc, cur) => (acc.y > cur.y ? acc : cur)).y
+        let maxX = group.reduce((acc, cur) => (acc.x > cur.x ? acc : cur)).x
-        const maxYCenterPoint = group.filter((centerPoint) => Math.abs(centerPoint.y - maxY) < 2)
+        let minX = group.reduce((acc, cur) => (acc.x < cur.x ? acc : cur)).x
-        exposedBottom += maxYCenterPoint.length
+
+        let maxYCenterPoint = group.filter((centerPoint) => Math.abs(centerPoint.y - maxY) < 2)
+        let minYCenterPoint = group.filter((centerPoint) => Math.abs(centerPoint.y - minY) < 2)
+        let maxXCenterPoint = group.filter((centerPoint) => Math.abs(centerPoint.x - maxX) < 2)
+        let minXCenterPoint = group.filter((centerPoint) => Math.abs(centerPoint.x - minX) < 2)
+
+        switch (direction) {
+          case 'south':
+            exposedBottom += maxYCenterPoint.length
+            break
+          case 'north':
+            exposedBottom += minYCenterPoint.length
+            break
+          case 'east':
+            exposedBottom += maxXCenterPoint.length
+            break
+          case 'west':
+            exposedBottom += minXCenterPoint.length
+            break
+        }
       })
 
       results.push({
@@ -1077,13 +1141,22 @@ export function useModuleBasicSetting() {
         touchDimension,
         halfTouchDimension,
       })
+      console.log({
+        direction,
+        exposedBottom,
+        exposedHalfBottom,
+        exposedTop,
+        exposedHalfTop,
+        touchDimension,
+        halfTouchDimension,
+      })
     })
 
     return results
   }
 
   // polygon 내부 cell들의 centerPoint 배열을 그룹화 해서 반환
-  const groupCoordinates = (points, moduleExample) => {
+  const groupCoordinates = (points, moduleExample, direction) => {
     const groups = []
     const visited = new Set()
     const width = Math.floor(moduleExample.width)