cell 그리기 추가

src/components/Roof2.jsx

@@ -72,15 +72,17 @@ export default function Roof2() {
           fill: 'transparent',
           stroke: 'black',
           strokeWidth: 2,
+
           viewLengthText: true, // 이 속성이 true로 설정되면, 다각형의 각 변의 길이를 표시하는 텍스트가 생성됩니다.
-          selectable: false,
+          selectable: true,
         },
       )
 
       canvas?.add(polygon)
-      console.log(polygon.polygon)
 
-      setTimeout(() => polygon.delete(), 500)
+      setTimeout(() => {
+        polygon.fillCell({ width: 10, height: 20 })
+      }, 500)
     }
   }
 
@@ -88,6 +90,12 @@ export default function Roof2() {
     <>
       {canvas && (
         <div className="flex justify-center my-8">
+          <button
+            className={`w-30 mx-2 p-2 rounded ${mode === Mode.DEFAULT ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
+            onClick={() => changeMode(canvas, Mode.DEFAULT)}
+          >
+            모드 DEFAULT
+          </button>
           <button
             className={`w-30 mx-2 p-2 rounded ${mode === Mode.DRAW_LINE ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
             onClick={() => changeMode(canvas, Mode.DRAW_LINE)}

src/components/fabric/QLine.js

@@ -23,6 +23,7 @@ export default class QLine extends fabric.Line {
     const group = new fabric.Group(groupItems, {
       selectable: false,
       type: 'QRect',
+      group: this.selectable,
       canvas: this.canvas,
     })
 
@@ -48,4 +49,8 @@ export default class QLine extends fabric.Line {
 
     this.#makeGroupItem([this, text])
   }
+
+  getInfo() {
+    return this
+  }
 }

src/components/fabric/QPolygon.js

@@ -18,7 +18,7 @@ export default class QPolygon extends fabric.Polygon {
 
   #makeGroupItem(groupItems) {
     const group = new fabric.Group(groupItems, {
-      selectable: false,
+      selectable: this.selectable,
       type: 'QRect',
       canvas: this.canvas,
     })
@@ -58,9 +58,11 @@ export default class QPolygon extends fabric.Polygon {
   }
 
   fillCell(cell = { width: 50, height: 100 }) {
-    // QPolygon의 경계를 구합니다.
-    const bounds = this.group.getBoundingRect()
+    // QPolygon의 점들을 가져옵니다.
+    const points = this.getPoints()
 
+    // 점들을 사용하여 QPolygon의 경계를 정의합니다.
+    const bounds = fabric.util.makeBoundingBoxFromPoints(points)
     // 경계 내에서 cell의 크기에 맞게 반복합니다.
     for (let x = bounds.left; x < bounds.left + bounds.width; x += cell.width) {
       for (
@@ -69,10 +71,9 @@ export default class QPolygon extends fabric.Polygon {
         y += cell.height
       ) {
         // 각 위치에 cell을 생성합니다.
-        const rect = new QRect({
+        const rect = new fabric.Rect({
           left: x,
           top: y,
-          viewLengthText: true,
           width: cell.width,
           height: cell.height,
           fill: 'transparent',
@@ -88,9 +89,11 @@ export default class QPolygon extends fabric.Polygon {
           new fabric.Point(rect.left + rect.width, rect.top + rect.height),
         ]
 
+        console.log(rectPoints)
+
         // 모든 꼭지점이 사다리꼴 내부에 있는지 확인합니다.
         const isInside = rectPoints.every((rectPoint) =>
-          this.group.containsPoint(rectPoint),
+          this.inPolygon(rectPoint),
         )
 
         // 모든 꼭지점이 사다리꼴 내부에 있을 경우에만 사각형을 그립니다.
@@ -103,4 +106,46 @@ export default class QPolygon extends fabric.Polygon {
     // 캔버스를 다시 그립니다.
     this.group.canvas.renderAll()
   }
+
+  getPoints() {
+    return this.points
+  }
+
+  getInfo() {
+    return this
+  }
+
+  inPolygon(point) {
+    const vertices = this.getPoints()
+    let intersects = 0
+
+    for (let i = 0; i < vertices.length; i++) {
+      let vertex1 = vertices[i]
+      let vertex2 = vertices[(i + 1) % vertices.length]
+
+      if (vertex1.y > vertex2.y) {
+        let tmp = vertex1
+        vertex1 = vertex2
+        vertex2 = tmp
+      }
+
+      if (point.y === vertex1.y || point.y === vertex2.y) {
+        point.y += 0.01
+      }
+
+      if (point.y <= vertex1.y || point.y > vertex2.y) {
+        continue
+      }
+
+      let xInt =
+        ((point.y - vertex1.y) * (vertex2.x - vertex1.x)) /
+          (vertex2.y - vertex1.y) +
+        vertex1.x
+      if (xInt < point.x) {
+        intersects++
+      }
+    }
+
+    return intersects % 2 === 1
+  }
 }

src/components/fabric/QRect.js

@@ -19,7 +19,7 @@ export default class QRect extends fabric.Rect {
 
   #makeGroupItem(groupItems) {
     const group = new fabric.Group(groupItems, {
-      selectable: false,
+      selectable: this.selectable,
       type: 'QRect',
       canvas: this.canvas,
     })
@@ -61,4 +61,8 @@ export default class QRect extends fabric.Rect {
 
     this.#makeGroupItem(groupItems)
   }
+
+  getInfo() {
+    return this
+  }
 }

src/hooks/useMode.js

@@ -9,6 +9,7 @@ export const Mode = {
   TEMPLATE: 'template',
   TEXTBOX: 'textbox',
   DRAW_RECT: 'drawRect',
+  DEFAULT: 'default',
 }
 
 export function useMode() {
@@ -21,6 +22,9 @@ export function useMode() {
 
   const addEvent = (mode) => {
     switch (mode) {
+      case 'default':
+        canvas?.off('mouse:down')
+        break
       case 'drawLine':
         drawLineMode()
         break
@@ -349,12 +353,14 @@ export function useMode() {
       stroke: 'black',
       fill: 'transparent',
       viewLengthText: true,
-      selectable: false,
+      selectable: true,
     })
 
     // 새로운 다각형 객체를 캔버스에 추가합니다.
     canvas.add(polygon)
 
+    console.log(polygon.getPoints())
+
     polygon.fillCell()
   }