QPolygon 수정

src/components/fabric/QPolygon.js

@@ -126,16 +126,20 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     points.forEach((start, i) => {
       const thisText = this.canvas.getObjects().find((obj) => obj.name === 'lengthText' && obj.parentId === this.id && obj.idx === i)
 
-      if (thisText) {
-        thisText.set({ left: (start.x + points[(i + 1) % points.length].x) / 2, top: (start.y + points[(i + 1) % points.length].y) / 2 })
-        return
-      }
-
       const end = points[(i + 1) % points.length]
       const dx = end.x - start.x
       const dy = end.y - start.y
       const length = Math.sqrt(dx * dx + dy * dy)
 
+      if (thisText) {
+        thisText.set({
+          left: (start.x + points[(i + 1) % points.length].x) / 2,
+          top: (start.y + points[(i + 1) % points.length].y) / 2,
+          text: length.toFixed(0),
+        })
+        return
+      }
+
       const midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2)
 
       // Create new text object if it doesn't exist
@@ -168,38 +172,46 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     this.canvas = canvas
   },
   fillCell(cell = { width: 50, height: 100, padding: 10 }) {
-    const points = this.getCurrentPoints()
+    const points = this.points
-    let bounds
+    const minX = Math.min(...points.map((p) => p.x))
+    const maxX = Math.max(...points.map((p) => p.x))
+    const minY = Math.min(...points.map((p) => p.y))
+    const maxY = Math.max(...points.map((p) => p.y))
 
-    try {
+    const boundingBoxWidth = maxX - minX
-      bounds = fabric.util.makeBoundingBoxFromPoints(points)
+    const boundingBoxHeight = maxY - minY
-    } catch (error) {
-      alert('다각형의 꼭지점이 4개 이상이어야 합니다.')
-      return
-    }
 
-    for (let x = bounds.left; x < bounds.left + bounds.width; x += cell.width + cell.padding) {
+    const rectWidth = cell.width
-      for (let y = bounds.top; y < bounds.top + bounds.height; y += cell.height + cell.padding) {
+    const rectHeight = cell.height
-        const rect = new fabric.Rect({
+
-          left: x,
+    const cols = Math.floor((boundingBoxWidth + cell.padding) / (rectWidth + cell.padding))
-          top: y,
+    const rows = Math.floor((boundingBoxHeight + cell.padding) / (rectHeight + cell.padding))
-          width: cell.width,
+
-          height: cell.height,
+    for (let i = 0; i < cols; i++) {
-          fill: 'transparent',
+      for (let j = 0; j < rows; j++) {
-          stroke: 'black',
+        const rectLeft = minX + i * (rectWidth + cell.padding)
-          selectable: false,
+        const rectTop = minY + j * (rectHeight + cell.padding)
-        })
 
         const rectPoints = [
-          new fabric.Point(rect.left, rect.top),
+          { x: rectLeft, y: rectTop },
-          new fabric.Point(rect.left + rect.width, rect.top),
+          { x: rectLeft + rectWidth, y: rectTop },
-          new fabric.Point(rect.left, rect.top + rect.height),
+          { x: rectLeft, y: rectTop + rectHeight },
-          new fabric.Point(rect.left + rect.width, rect.top + rect.height),
+          { x: rectLeft + rectWidth, y: rectTop + rectHeight },
         ]
 
-        const isInside = rectPoints.every((rectPoint) => this.inPolygon(rectPoint) && this.distanceFromEdge(rectPoint) >= cell.padding)
+        const allPointsInside = rectPoints.every((point) => this.inPolygon(point))
+
+        if (allPointsInside) {
+          const rect = new fabric.Rect({
+            left: rectLeft,
+            top: rectTop,
+            width: rectWidth,
+            height: rectHeight,
+            stroke: 'black', // or any other color
+            fill: 'transparent',
+            selectable: false,
+          })
 
-        if (isInside) {
           this.canvas.add(rect)
         }
       }

src/util/canvas-util.js

@@ -383,7 +383,7 @@ export const sortedPoints = (points) => {
     point.y2 = nextPoint.y
   })
 
-  // copyPoint에서 x1, y1 값을 기준으로 정렬 후 첫번째 값
+  // copyPoint에서 x1, y1 값을 기준으로 시작 인덱스
   const startIndex = getStartIndex(copyPoints)
   const startDirection = getDirectionByPoint(
     { x: copyPoints[startIndex].x1, y: copyPoints[startIndex].y1 },