모듈 최대배치, 중앙배치 작업중

src/hooks/module/useModuleBasicSetting.js

@@ -52,6 +52,7 @@ export function useModuleBasicSetting() {
         parentId: roof.id, //가대 폴리곤의 임시 인덱스를 넣어줌
         name: POLYGON_TYPE.MODULE_SETUP_SURFACE,
         flowDirection: roof.direction,
+        direction: roof.direction,
         flipX: roof.flipX,
         flipY: roof.flipY,
         surfaceId: surfaceId,
@@ -60,16 +61,15 @@ export function useModuleBasicSetting() {
       setupSurface.setViewLengthText(false)
       canvas.add(setupSurface) //모듈설치면 만들기
 
-      if (setupSurface.flowDirection === 'south' || setupSurface.flowDirection === 'north') {
+      const flowLines = {
-        setupSurface.set({
+        bottom: bottomTopFlowLine(setupSurface).find((obj) => obj.target === 'bottom'),
-          flowLines: bottomTopFlowLine(setupSurface),
+        top: bottomTopFlowLine(setupSurface).find((obj) => obj.target === 'top'),
-        })
+        left: leftRightFlowLine(setupSurface).find((obj) => obj.target === 'left'),
-      } else {
+        right: leftRightFlowLine(setupSurface).find((obj) => obj.target === 'right'),
-        setupSurface.set({
-          flowLines: leftRightFlowLine(setupSurface),
-        })
       }
 
+      setupSurface.set({ flowLines: flowLines })
+
       //지붕면 선택 금지
       roof.set({
         selectable: false,
@@ -527,13 +527,40 @@ export function useModuleBasicSetting() {
       return turf.booleanContains(turfModuleSetupSurface, squarePolygon) || turf.booleanWithin(squarePolygon, turfModuleSetupSurface)
     }
 
-    const downFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine) => {
+    const downFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine, isCenter = false) => {
+      let startPoint = flowModuleLine.bottom
+
+      if (isCenter) {
+        //중앙배치일 경우에는 계산한다
+
+        if (flowModuleLine.bottom.type === 'flat' && flowModuleLine.left.type === 'flat' && flowModuleLine.right.type === 'flat') {
+          //하단 기준으로 양면이 직선이면 하단 방면으로 가운데로 배치
+          const halfWidthLength = Math.abs(startPoint.x1 + startPoint.x2) / 2 //밑에 길이에서 반을 가른다
+          const halfModuleWidthLength = width / 2
+          startPoint = { ...startPoint, x1: halfWidthLength - halfModuleWidthLength }
+
+          if (flowModuleLine.top.type === 'flat') {
+            //상단까지 평면이면 직사각,정사각이라 가정하고 상자의 중심으로 계산
+            const heightLength = Math.abs(flowModuleLine.left.y1 - flowModuleLine.left.y2) //옆에에 길이에서 반을 가른다
+            const heightMargin = Math.abs(heightLength - height * Math.floor(heightLength / height)) / 2
+            startPoint = { ...startPoint, y1: startPoint.y1 - heightMargin }
+          }
+        }
+      }
+      // else {
+      //   //중앙배치가 아닐때도 흐름 방향 기준면으로 양면이 직선이면 가운데 배치
+      //   if (flowModuleLine.bottom.type === 'flat' && flowModuleLine.left.type === 'flat' && flowModuleLine.right.type === 'flat') {
+      //     //하단 기준으로 양면이 직선이면 하단 방면으로 가운데로 배치
+      //     const halfWidthLength = Math.abs(startPoint.x1 + startPoint.x2) / 2 //밑에 길이에서 반을 가른다
+      //     const halfModuleWidthLength = width / 2
+      //     startPoint = { ...startPoint, x1: halfWidthLength - halfModuleWidthLength }
+      //   }
+      // }
+
       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)
@@ -552,10 +579,6 @@ export function useModuleBasicSetting() {
             chidoriLength = j % 2 === 0 ? 0 : width / 2
           }
 
-          let squarePolygon
-          let turfCoordnates
-          let points
-
           square = [
             [startColPoint + tempMaxWidth * i - chidoriLength, startPoint.y1 - height * j - bottomMargin],
             [startColPoint + tempMaxWidth * i + width - chidoriLength, startPoint.y1 - height * j - bottomMargin],
@@ -564,9 +587,9 @@ export function useModuleBasicSetting() {
             [startColPoint + tempMaxWidth * i - chidoriLength, startPoint.y1 - height * j - bottomMargin],
           ]
 
-          squarePolygon = turf.polygon([square])
+          let squarePolygon = turf.polygon([square])
-          turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
+          let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
-          points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
+          let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
 
           let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
           canvas?.add(tempModule)
@@ -575,12 +598,29 @@ export function useModuleBasicSetting() {
       }
     }
 
-    const leftFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine) => {
+    const leftFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine, isCenter = false) => {
-      let startPoint = flowModuleLine.find((obj) => obj.target === 'left')
+      let startPoint = flowModuleLine.left
+
+      //중앙배치일 경우에는 계산한다
+      if (isCenter) {
+        if (flowModuleLine.left.type === 'flat' && flowModuleLine.bottom.type === 'flat' && flowModuleLine.top.type === 'flat') {
+          //좌측 기준으로 양면이 직선이면 하단 방면으로 가운데로 배치
+          const halfWidthLength = Math.abs(startPoint.y1 + startPoint.y2) / 2 //밑에 길이에서 반을 가른다
+          const halfModuleWidthLength = height / 2
+          startPoint = { ...startPoint, y1: halfWidthLength - halfModuleWidthLength }
+          if (flowModuleLine.right.type === 'flat') {
+            //우측까지 평면이면 직사각,정사각이라 가정하고 상자의 중심으로 계산
+            const widthLength = Math.abs(flowModuleLine.top.x1 - flowModuleLine.top.x2) //옆에에 길이에서 반을 가른다
+            const widthMargin = Math.abs(widthLength - width * Math.floor(widthLength / width)) / 2
+            startPoint = { ...startPoint, x1: startPoint.x1 + widthMargin }
+          }
+        }
+      }
 
       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)
@@ -596,7 +636,7 @@ export function useModuleBasicSetting() {
           leftMargin = i === 0 ? 0 : 0.5 * i
           chidoriLength = 0
           if (isChidori) {
-            chidoriLength = j % 2 === 0 ? 0 : height / 2
+            chidoriLength = i % 2 === 0 ? 0 : height / 2
           }
 
           square = [
@@ -619,12 +659,39 @@ export function useModuleBasicSetting() {
       }
     }
 
-    const topFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine) => {
+    const topFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine, isCenter = false) => {
-      let startPoint = flowModuleLine.find((obj) => obj.target === 'top')
+      let startPoint = flowModuleLine.top
+
+      if (isCenter) {
+        //중앙배치일 경우에는 계산한다
+        if (flowModuleLine.top.type === 'flat' && flowModuleLine.left.type === 'flat' && flowModuleLine.right.type === 'flat') {
+          //하단 기준으로 양면이 직선이면 하단 방면으로 가운데로 배치
+          const halfWidthLength = Math.abs(startPoint.x1 + startPoint.x2) / 2 //밑에 길이에서 반을 가른다
+          const halfModuleWidthLength = width / 2
+          startPoint = { ...startPoint, x1: halfWidthLength - halfModuleWidthLength }
+
+          if (flowModuleLine.bottom.type === 'flat') {
+            //상단까지 평면이면 직사각,정사각이라 가정하고 상자의 중심으로 계산
+            const heightLength = Math.abs(flowModuleLine.left.y1 - flowModuleLine.left.y2) //옆에에 길이에서 반을 가른다
+            const heightMargin = Math.abs(heightLength - height * Math.floor(heightLength / height)) / 2
+            startPoint = { ...startPoint, x1: halfWidthLength - halfModuleWidthLength, y1: startPoint.y1 - heightMargin }
+          }
+        }
+      }
+      // else {
+      // //중앙배치가 아닐때도 흐름 방향 기준면으로 양면이 직선이면 가운데 배치
+      // if (flowModuleLine.bottom.type === 'flat' && flowModuleLine.left.type === 'flat' && flowModuleLine.right.type === 'flat') {
+      //   //하단 기준으로 양면이 직선이면 하단 방면으로 가운데로 배치
+      //   const halfWidthLength = Math.abs(startPoint.x1 + startPoint.x2) / 2 //밑에 길이에서 반을 가른다
+      //   const halfModuleWidthLength = width / 2
+      //   startPoint = { ...startPoint, x1: halfWidthLength - halfModuleWidthLength }
+      // }
+      // }
+
       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
@@ -661,12 +728,29 @@ export function useModuleBasicSetting() {
       }
     }
 
-    const rightFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine) => {
+    const rightFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine, isCenter = false) => {
-      let startPoint = flowModuleLine.find((obj) => obj.target === 'right')
+      let startPoint = flowModuleLine.right
-      const maxLeftEndPoint = surfaceMaxLines.left.x1 //최 좌측
 
+      if (isCenter) {
+        if (flowModuleLine.left.type === 'flat' && flowModuleLine.bottom.type === 'flat' && flowModuleLine.top.type === 'flat') {
+          //좌측 기준으로 양면이 직선이면 하단 방면으로 가운데로 배치
+          const halfWidthLength = Math.abs(startPoint.y1 + startPoint.y2) / 2 //밑에 길이에서 반을 가른다
+          const halfModuleWidthLength = height / 2
+          startPoint = { ...startPoint, y1: halfWidthLength + halfModuleWidthLength }
+
+          if (flowModuleLine.right.type === 'flat') {
+            //우측까지 평면이면 직사각,정사각이라 가정하고 상자의 중심으로 계산
+            const widthLength = Math.abs(flowModuleLine.top.x1 - flowModuleLine.top.x2) //옆에에 길이에서 반을 가른다
+            const widthMargin = Math.abs(widthLength - width * Math.floor(widthLength / width)) / 2
+            startPoint = { ...startPoint, x1: startPoint.x1 - widthMargin }
+          }
+        }
+      }
+
+      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)
@@ -743,6 +827,7 @@ export function useModuleBasicSetting() {
           topFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
         }
       } else if (setupLocation === 'ridge') {
+        //용마루
         if (moduleSetupSurface.flowDirection === 'south') {
           topFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
         }
@@ -755,6 +840,20 @@ export function useModuleBasicSetting() {
         if (moduleSetupSurface.flowDirection === 'north') {
           downFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
         }
+      } else if (setupLocation === 'center') {
+        //중가면
+        if (moduleSetupSurface.flowDirection === 'south') {
+          downFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines, true)
+        }
+        if (moduleSetupSurface.flowDirection === 'west') {
+          leftFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines, true)
+        }
+        if (moduleSetupSurface.flowDirection === 'east') {
+          rightFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines, true)
+        }
+        if (moduleSetupSurface.flowDirection === 'north') {
+          topFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines, true)
+        }
       }
 
       const setupedModules = moduleSetupArray.filter((module, index) => {
@@ -762,28 +861,26 @@ export function useModuleBasicSetting() {
         let isDisjoint = checkModuleDisjointObjects(module.turfPoints, containsBatchObjects)
 
         if (!(disjointFromTrestle && isDisjoint)) {
-          // canvas?.remove(module)
+          canvas?.remove(module)
-          module.set({ fill: 'rgba(255,190,41, 0.4)', stroke: 'black', strokeWidth: 1 })
+          // module.set({ fill: 'rgba(255,190,41, 0.4)', stroke: 'black', strokeWidth: 1 })
           return false
         } else {
           return module
         }
       })
 
-      console.log('setupedModules.length', setupedModules.length)
       //나간애들 제외하고 설치된 애들로 겹친애들 삭제 하기
       setupedModules.forEach((module, index) => {
         if (isMaxSetup && index > 0) {
           const isOverlap = turf.booleanOverlap(polygonToTurfPolygon(setupedModules[index - 1]), polygonToTurfPolygon(module))
-          console.log(isOverlap)
+
           //겹치는지 확인
           if (isOverlap) {
             //겹쳐있으면 삭제
-            // canvas?.remove(module)
+            canvas?.remove(module)
             // module.set({ fill: 'rgba(72, 161, 250, 0.4)', stroke: 'black', strokeWidth: 0.1 })
             canvas.renderAll()
             setupedModules.splice(index, 1)
-
             return false
           }
         }
@@ -1054,13 +1151,13 @@ export function useModuleBasicSetting() {
       const pointX2 = coords[2].x + ((coords[2].y - top) / (coords[2].y - coords[1].y)) * (coords[1].x - coords[2].x)
       const pointY2 = top
 
-      const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], {
+      // const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], {
-        stroke: 'red',
+      //   stroke: 'red',
-        strokeWidth: 1,
+      //   strokeWidth: 1,
-        selectable: true,
+      //   selectable: true,
-      })
+      // })
-      canvas?.add(finalLine)
+      // canvas?.add(finalLine)
-      canvas?.renderAll()
+      // canvas?.renderAll()
 
       let rtnObj
       //평평하면
@@ -1071,14 +1168,14 @@ export function useModuleBasicSetting() {
           //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 { x1: line.x1, y1: line.y1, x2: line.x2, y2: line.y2, 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 { x1: line.x1, y1: line.y1, x2: line.x2, y2: line.y2, index: index }
             }
             return acc
           })
@@ -1087,11 +1184,12 @@ export function useModuleBasicSetting() {
           target: index === 0 ? 'bottom' : 'top',
           x1: standardLine.x1,
           y1: standardLine.y1,
-          x2: standardLine.x1 + charlie,
+          x2: standardLine.x2,
-          y2: standardLine.y1,
+          y2: standardLine.y2,
+          type: 'flat',
         }
       } else {
-        rtnObj = { target: index === 0 ? 'bottom' : 'top', x1: pointX1, y1: pointY1, x2: pointX2, y2: pointY2 }
+        rtnObj = { target: index === 0 ? 'bottom' : 'top', x1: pointX1, y1: pointY1, x2: pointX2, y2: pointY2, type: 'curve' }
       }
 
       rtnObjArray.push(rtnObj)
@@ -1124,7 +1222,6 @@ export function useModuleBasicSetting() {
     )
     flowArray.push(rightFlow)
 
-    let idx = 0
     let rtnObjArray = []
     flowArray.forEach((center, index) => {
       const linesArray = surface.lines.filter((line) => {
@@ -1177,13 +1274,13 @@ export function useModuleBasicSetting() {
       const pointX2 = top
       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',
+      //   stroke: 'red',
-        strokeWidth: 1,
+      //   strokeWidth: 1,
-        selectable: true,
+      //   selectable: true,
-      })
+      // })
-      canvas?.add(finalLine)
+      // canvas?.add(finalLine)
-      canvas?.renderAll()
+      // canvas?.renderAll()
 
       let rtnObj
       //평평하면
@@ -1194,14 +1291,14 @@ export function useModuleBasicSetting() {
           //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 { x1: line.x1, y1: line.y1, x2: line.x2, y2: line.y2, 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 { x1: line.x1, y1: line.y1, x2: line.x2, y2: line.y2, index: index }
             }
             return acc
           })
@@ -1210,11 +1307,12 @@ export function useModuleBasicSetting() {
           target: index === 0 ? 'left' : 'right',
           x1: standardLine.x1,
           y1: standardLine.y1,
-          x2: standardLine.x1,
+          x2: standardLine.x2,
-          y2: standardLine.y1 + charlie,
+          y2: standardLine.y2,
+          type: 'flat',
         }
       } else {
-        rtnObj = { target: index === 0 ? 'left' : 'right', x1: pointX1, y1: pointY1, x2: pointX2, y2: pointY2 }
+        rtnObj = { target: index === 0 ? 'left' : 'right', x1: pointX1, y1: pointY1, x2: pointX2, y2: pointY2, type: 'curve' }
       }
       rtnObjArray.push(rtnObj)
     })