치도리 배치 기능

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

@@ -35,6 +35,12 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
     }
   }, [])
 
+  const placementRef = {
+    isChidori: useRef('true'),
+    setupLocation: useRef(null),
+    isMaxSetup: useRef('false'),
+  }
+
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lx-2`}>
@@ -55,7 +61,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
           {tabNum === 1 && <Orientation ref={orientationRef} tabNum={tabNum} setTabNum={setTabNum} />}
           {/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
           {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && tabNum === 2 && <Module setTabNum={setTabNum} />}
-          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && tabNum === 3 && <Placement setTabNum={setTabNum} />}
+          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && tabNum === 3 && <Placement setTabNum={setTabNum} ref={placementRef} />}
 
           {/*배치면 초기설정 - 입력방법: 육지붕*/}
           {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == 3 && tabNum === 2 && <PitchModule setTabNum={setTabNum} />}
@@ -78,7 +84,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
                 <button className="btn-frame modal mr5" onClick={manualModuleSetup}>
                   {getMessage('modal.module.basic.setting.passivity.placement')}
                 </button>
-                <button className="btn-frame modal act" onClick={autoModuleSetup}>
+                <button className="btn-frame modal act" onClick={() => autoModuleSetup(placementRef)}>
                   {getMessage('modal.module.basic.setting.auto.placement')}
                 </button>
               </>

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

@@ -1,7 +1,12 @@
 import { useMessage } from '@/hooks/useMessage'
+import { forwardRef, useState } from 'react'
 
-export default function Placement() {
+const Placement = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
+  const [isChidori, setIsChidori] = useState('true')
+
+  console.log(refs)
+
   const moduleData = {
     header: [
       { type: 'check', name: '', prop: 'check', width: 70 },
@@ -24,6 +29,12 @@ export default function Placement() {
       },
     ],
   }
+
+  const handleChangeChidori = (e) => {
+    setIsChidori(e.target.value)
+    refs.isChidori.current = e.target.value
+  }
+
   return (
     <>
       <div className="module-table-flex-wrap mb10">
@@ -96,12 +107,20 @@ export default function Placement() {
                 <div className="self-item-td">
                   <div className="pop-form-radio">
                     <div className="d-check-radio pop">
-                      <input type="radio" name="radio01" id="ra01" />
+                      <input
+                        type="radio"
+                        name="radio01"
+                        id="ra01"
+                        defaultChecked
+                        checked={isChidori === 'true'}
+                        value={'true'}
+                        onChange={handleChangeChidori}
+                      />
                       <label htmlFor="ra01">{getMessage('modal.module.basic.setting.module.placement.do')}</label>
                     </div>
                     <div className="d-check-radio pop">
-                      <input type="radio" name="radio01" id="ra02" />
+                      <input type="radio" name="radio02" id="ra02" value={'false'} checked={isChidori === 'false'} onChange={handleChangeChidori} />
-                      <label htmlFor="ra01">{getMessage('modal.module.basic.setting.module.placement.do.not')}</label>
+                      <label htmlFor="ra02">{getMessage('modal.module.basic.setting.module.placement.do.not')}</label>
                     </div>
                   </div>
                 </div>
@@ -137,4 +156,6 @@ export default function Placement() {
       </div>
     </>
   )
-}
+})
+
+export default Placement

src/hooks/module/useModuleBasicSetting.js

@@ -31,7 +31,7 @@ export function useModuleBasicSetting() {
       setSurfaceShapePattern(roof, roofDisplay.column, true) //패턴 변경
       const offsetPoints = offsetPolygon(roof.points, -20) //안쪽 offset
       //모듈설치영역?? 생성
-      const setupSurface = new QPolygon(offsetPoints, {
+      let setupSurface = new QPolygon(offsetPoints, {
         stroke: 'red',
         fill: 'transparent',
         strokeDashArray: [10, 4],
@@ -45,6 +45,8 @@ export function useModuleBasicSetting() {
         parentId: roof.id, //가대 폴리곤의 임시 인덱스를 넣어줌
         name: POLYGON_TYPE.MODULE_SETUP_SURFACE,
         flowDirection: roof.direction,
+        flipX: roof.flipX,
+        flipY: roof.flipY,
       })
 
       setupSurface.setViewLengthText(false)
@@ -65,7 +67,6 @@ export function useModuleBasicSetting() {
   //설치 범위 지정 클릭 이벤트
   const toggleSelection = (setupSurface) => {
     console.log('setupSurface', setupSurface)
-
     const isExist = selectedModuleInstSurfaceArray.some((obj) => obj.parentId === setupSurface.parentId)
     //최초 선택일때
     if (!isExist) {
@@ -380,7 +381,9 @@ export function useModuleBasicSetting() {
   }
 
   //자동 모듈 설치(그리드 방식)
-  const autoModuleSetup = () => {
+  const autoModuleSetup = (placementRef) => {
+    const isChidori = placementRef.isChidori.current
+
     initEvent()
     const moduleSetupSurfaces = moduleSetupSurface //선택 설치면
 
@@ -405,6 +408,9 @@ export function useModuleBasicSetting() {
 
     if (moduleIsSetup.length > 0) {
       alert('기존 모듈은 제거됩니다.')
+      moduleIsSetup.forEach((module) => {
+        canvas?.remove(module)
+      })
     }
 
     notSelectedTrestlePolygons.forEach((obj) => {
@@ -484,16 +490,11 @@ export function useModuleBasicSetting() {
         width = moduleSetupSurface.flowDirection === 'south' || moduleSetupSurface.flowDirection === 'north' ? 172.2 : 113.4
         height = moduleSetupSurface.flowDirection === 'south' || moduleSetupSurface.flowDirection === 'north' ? 113.4 : 172.2
       }
-      const cols = Math.floor((bbox[2] - bbox[0]) / width)
+      let cols = Math.floor((bbox[2] - bbox[0]) / width)
-      const rows = Math.floor((bbox[3] - bbox[1]) / height)
+      let rows = Math.floor((bbox[3] - bbox[1]) / height)
+
+      // cols = cols * 2
 
-      let startCoords = { x: 0, y: 0 }
-      if (moduleSetupSurface.flowDirection === 'south') {
-        startCoords = {
-          x: surfaceBbox.minX,
-          y: surfaceBbox.maxY,
-        }
-      }
       for (let col = 0; col <= cols; col++) {
         for (let row = 0; row <= rows; row++) {
           let x = 0,
@@ -530,13 +531,43 @@ export function useModuleBasicSetting() {
             x = bbox[0] + col * width
             y = bbox[1] + row * height
           }
-          square = [
+
-            [x, y],
+          if (isChidori === 'true') {
-            [x + width, y],
+            if (row % 2 !== 0) {
-            [x + width, y + height],
+              square = [
-            [x, y + height],
+                [x, y],
-            [x, y],
+                [x + width, y],
-          ]
+                [x + width, y + height],
+                [x, y + height],
+                [x, y],
+              ]
+            } else {
+              square = [
+                [x - width / 2, y],
+                [x - width / 2 + width, y],
+                [x - width / 2 + width, y + height],
+                [x - width / 2, y + height],
+                [x - width / 2, y],
+              ]
+            }
+          } else {
+            square = [
+              [x, y],
+              [x + width, y],
+              [x + width, y + height],
+              [x, y + height],
+              [x, y],
+            ]
+          }
+
+          // square = [
+          //   [x - width / 2, y],
+          //   [x - width / 2 + width, y],
+          //   [x - width / 2 + width, y + height],
+          //   [x - width / 2, y + height],
+          //   [x - width / 2, y],
+          // ]
+
           const squarePolygon = turf.polygon([square])
           const disjointFromTrestle =
             turf.booleanContains(turfModuleSetupSurface, squarePolygon) || turf.booleanWithin(squarePolygon, turfModuleSetupSurface)
@@ -720,7 +751,7 @@ export function useModuleBasicSetting() {
     )
   }
 
-  function batchObjectGroupToTurfPolygon(group) {
+  const batchObjectGroupToTurfPolygon = (group) => {
     const polygons = group.getObjects().filter((obj) => obj.type === 'QPolygon')
     let allPoints = []
 
@@ -732,32 +763,76 @@ export function useModuleBasicSetting() {
     return hull
   }
 
-  //도형의 내각을 구하는 로직
+  function calculatePerpendicularLine(hypotenuseStart, hypotenuseEnd, height) {
-  function calculateInteriorAngles(polygon) {
+    const { x: x1, y: y1 } = hypotenuseStart
-    const points = polygon.get('points')
+    const { x: x2, y: y2 } = hypotenuseEnd
-    const angles = []
 
-    for (let i = 0; i < points.length; i++) {
+    // 1. 빗변의 기울기 계산
-      // 현재 점과 이전 및 다음 점 정의
+    const slope = (y2 - y1) / (x2 - x1)
-      const current = points[i]
-      const prev = points[(i - 1 + points.length) % points.length]
-      const next = points[(i + 1) % points.length]
 
-      // 벡터 계산
+    // 2. 중점 계산
-      const vecA = { x: prev.x - current.x, y: prev.y - current.y }
+    const xC = (x1 + x2) / 2
-      const vecB = { x: next.x - current.x, y: next.y - current.y }
+    const yC = (y1 + y2) / 2
 
-      // 두 벡터 간 각도 계산
+    // 3. 수직 기울기의 정규화 인자 계산
-      const dotProduct = vecA.x * vecB.x + vecA.y * vecB.y
+    const norm = Math.sqrt(1 + Math.pow(slope, 2))
-      const magA = Math.sqrt(vecA.x * vecA.x + vecA.y * vecA.y)
-      const magB = Math.sqrt(vecB.x * vecB.x + vecB.y * vecB.y)
-      const angleRad = Math.acos(dotProduct / (magA * magB))
-      const angleDeg = (angleRad * 180) / Math.PI
 
-      // 내부 각도 저장
+    // 4. 수직선의 끝점 계산
-      angles.push(180 - angleDeg)
+    const xOffset = -height / norm
+    const yOffset = (height * slope) / norm
+
+    const point1 = { x: xC + xOffset, y: yC + yOffset }
+    const point2 = { x: xC - xOffset, y: yC - yOffset }
+
+    return { point1, point2 }
+  }
+
+  // 예제 사용
+  const hypotenuseStart = { x: 2, y: 3 }
+  const hypotenuseEnd = { x: 8, y: 9 }
+  const height = 4
+
+  const result = calculatePerpendicularLine(hypotenuseStart, hypotenuseEnd, height)
+  console.log(result)
+
+  const calcMinXByHeightDistance = (surface) => {
+    let minXIndex = surface.lines.reduce((minIdx, current, index, arr) => {
+      console.log('reduce', minIdx, current, index, arr)
+
+      return current.x1 < arr[minIdx].x1 ? index : minIdx
+    }, surface.lines[0].x1)
+
+    console.log('minXIndex', minXIndex)
+
+    function calculateIntersection(diagonalA, lineB) {
+      // Diagonal A coordinates
+      const { x1: ax1, y1: ay1, x2: ax2, y2: ay2 } = diagonalA
+
+      // Line B coordinates
+      const { x2: bx2, y2: by2 } = lineB
+
+      // Calculate slope (m) and intercept (c) for diagonal A
+      const slopeA = (ay2 - ay1) / (ax2 - ax1)
+      const interceptA = ay1 - slopeA * ax1
+
+      // Use fixed y (from lineB's y2)
+      const yFixed = by2
+
+      // Calculate x on diagonal A where y = yFixed
+      const xFixed = (yFixed - interceptA) / slopeA
+
+      // Return the intersection point
+      return { x: xFixed, y: yFixed }
     }
-    return angles
+
+    console.log('line', line)
+
+    // Example usage:
+    const diagonalA = { x1: 490.4, y1: 94.7, x2: 303.7, y2: 654.7 }
+    const lineB = { x1: 303.7, y1: 654.7, x2: 303.7, y2: 541.3 }
+
+    const intersection = calculateIntersection(diagonalA, lineB)
+    console.log(`Intersection point: x = ${intersection.x}, y = ${intersection.y}`)
   }
 
   return {

src/hooks/surface/useSurfaceShapeBatch.js

@@ -102,6 +102,15 @@ export function useSurfaceShapeBatch() {
 
         canvas?.add(obj)
 
+        canvas?.renderAll()
+        closePopup(id)
+      })
+
+      addCanvasMouseEventListener('mouse:down', (e) => {
+        isDrawing = false
+
+        canvas?.remove(obj)
+
         //각도 추가
         let originAngle = 0 //기본 남쪽
         let direction = 'south'
@@ -119,21 +128,31 @@ export function useSurfaceShapeBatch() {
           direction = 'north'
         }
 
-        obj.set({ direction: direction })
+        //회전, flip등이 먹은 기준으로 새로생성
-        obj.set({ originAngle: originAngle })
+        const batchSurface = new QPolygon(obj.getCurrentPoints(), {
-
+          fill: 'transparent',
-        canvas?.renderAll()
+          stroke: 'red',
+          strokeWidth: 1,
+          strokeDasharray: [10, 4],
+          fontSize: 12,
+          selectable: true,
+          lockMovementX: true, // X 축 이동 잠금
+          lockMovementY: true, // Y 축 이동 잠금
+          lockRotation: true, // 회전 잠금
+          lockScalingX: true, // X 축 크기 조정 잠금
+          lockScalingY: true, // Y 축 크기 조정 잠금
+          name: POLYGON_TYPE.ROOF,
+          originX: 'center',
+          originY: 'center',
+          pitch: globalPitch,
+          surfaceId: surfaceId,
+          direction: direction,
+        })
+        canvas?.add(batchSurface)
+        setSurfaceShapePattern(batchSurface, roofDisplay.column)
+        drawDirectionArrow(batchSurface)
         closePopup(id)
-      })
-
-      addCanvasMouseEventListener('mouse:down', (e) => {
-        isDrawing = false
-        obj.set('name', POLYGON_TYPE.ROOF)
-        obj.set('surfaceId', surfaceId)
         initEvent()
-        setSurfaceShapePattern(obj, roofDisplay.column)
-        closePopup(id)
-        drawDirectionArrow(obj)
       })
     }
   }
@@ -880,12 +899,45 @@ export function useSurfaceShapeBatch() {
     canvas?.renderAll()
   }
 
-  const changeSurfaceFlowDirection = (roof, direction, orientation) => {
+  const updateFlippedPoints = (polygon) => {
-    roof.set({
+    if (!(polygon instanceof fabric.Polygon)) {
-      direction: direction,
+      console.error('The object is not a Polygon.')
+      return
+    }
+
+    const { flipX, flipY, width, height, points, left, top, scaleX, scaleY } = polygon
+
+    // 현재 points의 사본 가져오기
+    const newPoints = points.map((point) => {
+      let x = point.x
+      let y = point.y
+
+      // flipX 적용
+      if (flipX) {
+        x = width - x
+      }
+
+      // flipY 적용
+      if (flipY) {
+        y = height - y
+      }
+
+      // 스케일 및 전역 좌표 고려
+      x = (x - width / 2) * scaleX + width / 2
+      y = (y - height / 2) * scaleY + height / 2
+
+      return { x, y }
     })
-    drawDirectionArrow(roof)
+
-    canvas?.renderAll()
+    // flipX, flipY를 초기화
+    polygon.flipX = false
+    polygon.flipY = false
+
+    // points 업데이트
+    polygon.set({ points: newPoints })
+    polygon.setCoords()
+
+    return polygon
   }
 
   return {

src/hooks/useContextMenu.js

@@ -285,8 +285,6 @@ export function useContextMenu() {
   }, [currentContextMenu])
 
   useEffect(() => {
-    console.log(currentObject)
-
     if (currentObject?.name) {
       console.log('object', currentObject)
       switch (currentObject.name) {