오브젝트 배치 => 개구배치 작업중

src/common/common.js

@@ -21,3 +21,13 @@ export const LineType = {
   EAVES: 'eaves', // 처마
   RIDGE: 'ridge', // 용마루....
 }
+
+export const BATCH_TYPE = {
+  OPENING: 'opening',
+  SHADOW: 'shadow',
+}
+
+export const INPUT_TYPE = {
+  FREE: 'free',
+  DIMENSION: 'dimension',
+}

src/components/ui/ObjectPlacement.jsx

@@ -5,16 +5,7 @@ import { modalState } from '@/store/modalAtom'
 import { fabric } from 'fabric'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { modeState, objectPlacementModeState } from '@/store/canvasAtom'
-
-const BATCH_TYPE = {
-  OPENING: 'opening',
-  SHADOW: 'shadow',
-}
-
-const INPUT_TYPE = {
-  FREE: 'free',
-  DIMENSION: 'dimension',
-}
+import { BATCH_TYPE, INPUT_TYPE } from '@/common/common'
 
 const ObjectPlacement = ({ canvas }) => {
   const [open, setOpen] = useRecoilState(modalState)

src/components/ui/SurfaceShape.jsx

@@ -13,7 +13,7 @@ import { getIntersectionPoint } from '@/util/canvas-util'
  * @constructor
  */
 export const SurfaceShapeModal = ({ canvas }) => {
-  const [type, setType] = useState(0)
+  const [type, setType] = useState(1)
   const setOpen = useSetRecoilState(modalState)
   const fontSize = useRecoilValue(fontSizeState)
   //지붕재

src/hooks/useMode.js

@@ -35,7 +35,7 @@ import { QPolygon } from '@/components/fabric/QPolygon'
 import offsetPolygon, { inPolygon } from '@/util/qpolygon-utils'
 import { isObjectNotEmpty } from '@/util/common-utils'
 import * as turf from '@turf/turf'
-import { Mode } from '@/common/common'
+import { INPUT_TYPE, Mode } from '@/common/common'
 
 export function useMode() {
   const [mode, setMode] = useRecoilState(modeState)
@@ -1078,24 +1078,38 @@ export function useMode() {
           alert('지붕 내부에만 생성 가능합니다.')
           return
         }
-        mouseEvent.openingMode.isDown = true
-
         mouseEvent.openingMode.origX = pointer.x
         mouseEvent.openingMode.origY = pointer.y
-        mouseEvent.openingMode.rect = new fabric.Rect({
-          fill: 'white',
-          stroke: 'black',
-          strokeWidth: 1,
-          left: mouseEvent.openingMode.origX,
-          top: mouseEvent.openingMode.origY,
-          originX: 'left',
-          originY: 'top',
-          width: pointer.x - mouseEvent.openingMode.origX,
-          height: pointer.y - mouseEvent.openingMode.origY,
-          angle: 0,
-          transparentCorners: false,
-        })
-        canvas.add(mouseEvent.openingMode.rect)
+        if (objectPlacementMode.inputType === INPUT_TYPE.FREE) {
+          mouseEvent.openingMode.isDown = true
+
+          mouseEvent.openingMode.rect = new fabric.Rect({
+            fill: 'white',
+            stroke: 'black',
+            strokeWidth: 1,
+            left: mouseEvent.openingMode.origX,
+            top: mouseEvent.openingMode.origY,
+            originX: 'left',
+            originY: 'top',
+            width: pointer.x - mouseEvent.openingMode.origX,
+            height: pointer.y - mouseEvent.openingMode.origY,
+          })
+          canvas.add(mouseEvent.openingMode.rect)
+        } else if (objectPlacementMode.inputType === INPUT_TYPE.DIMENSION) {
+          mouseEvent.openingMode.rect = new fabric.Rect({
+            fill: 'white',
+            stroke: 'black',
+            strokeWidth: 1,
+            left: mouseEvent.openingMode.origX,
+            top: mouseEvent.openingMode.origY,
+            originX: 'left',
+            originY: 'top',
+            width: Number(objectPlacementMode.width),
+            height: Number(objectPlacementMode.height),
+          })
+          canvas.add(mouseEvent.openingMode.rect)
+          canvas.off('mouse:move')
+        }
       },
       move: (e) => {
         if (!mouseEvent.openingMode.isDown) return
@@ -1130,6 +1144,7 @@ export function useMode() {
         }
 
         mouseEvent.openingMode.rect.set({ name: 'opening' })
+        setMode(Mode.DEFAULT)
       },
     },
   }
@@ -1147,7 +1162,17 @@ export function useMode() {
       { x: rect.left + rect.width, y: rect.top },
     ]
 
+    const rect1Corners = {
+      minX: Math.min(...rectPoints.map((point) => point.x)),
+      maxX: Math.max(...rectPoints.map((point) => point.x)),
+      minY: Math.min(...rectPoints.map((point) => point.y)),
+      maxY: Math.max(...rectPoints.map((point) => point.y)),
+    }
+    let isCross = true
     for (let i = 0; i < openings.length; i++) {
+      if (i !== 0 && isCross) {
+        break
+      }
       const rect2 = openings[i]
       const rect2Points = [
         { x: rect2.left, y: rect2.top },
@@ -1155,9 +1180,30 @@ export function useMode() {
         { x: rect2.left + rect2.width, y: rect2.top + rect2.height },
         { x: rect2.left + rect2.width, y: rect2.top },
       ]
+
+      const rect2Corners = {
+        minX: Math.min(...rect2Points.map((point) => point.x)),
+        maxX: Math.max(...rect2Points.map((point) => point.x)),
+        minY: Math.min(...rect2Points.map((point) => point.y)),
+        maxY: Math.max(...rect2Points.map((point) => point.y)),
+      }
+
+      // Check if one rectangle is to the left of the other
+      if (
+        rect1Corners.maxX < rect2Corners.minX ||
+        rect2Corners.maxX < rect1Corners.minX ||
+        rect1Corners.maxY < rect2Corners.minY ||
+        rect2Corners.maxY < rect1Corners.minY
+      ) {
+        isCross = false
+        continue
+      } else {
+        isCross = true
+        break
+      }
     }
 
-    return false
+    return isCross
   }
 
   const checkInsideRoof = (rect) => {