QPolygon 기본 속성 추가(isMultipleOf45) - polygon이 이루는 모든 각도가 45도의 배수인지 확인하는 컬럼

src/components/fabric/QPolygon.js

@@ -210,8 +210,26 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
       line.startPoint = point
       line.endPoint = nextPoint
       this.lines.push(line)
+      this.calculateDegree()
     })
   },
+  calculateDegree() {
+    const degrees = []
+    // polygon.lines를 순회하며 각도를 구해 출력
+    this.lines.forEach((line, idx) => {
+      const dx = line.x2 - line.x1
+      const dy = line.y2 - line.y1
+      const rad = Math.atan2(dy, dx)
+      const degree = (rad * 180) / Math.PI
+      degrees.push(degree)
+    })
+
+    function isMultipleOf45(degree, epsilon = 1) {
+      return Math.abs(degree % 45) <= epsilon || Math.abs((degree % 45) - 45) <= epsilon
+    }
+
+    this.isMultipleOf45 = degrees.every((degree) => isMultipleOf45(degree))
+  },
 
   /**
    * 보조선 그리기

src/hooks/usePolygon.js

@@ -1162,8 +1162,6 @@ export const usePolygon = () => {
         pitch: pitch,
       })
 
-      roof.isMultipleOf45 = calculateDegree(roof)
-
       //allLines중 생성된 roof와 관련있는 line을 찾는다.
 
       const roofLines = [...polygonLines, ...polygon.innerLines].filter((line) => {
@@ -1210,24 +1208,6 @@ export const usePolygon = () => {
     canvas.discardActiveObject()
   }
 
-  const calculateDegree = (polygon) => {
-    const degrees = []
-    // polygon.lines를 순회하며 각도를 구해 출력
-    polygon.lines.forEach((line, idx) => {
-      const dx = line.x2 - line.x1
-      const dy = line.y2 - line.y1
-      const rad = Math.atan2(dy, dx)
-      const degree = (rad * 180) / Math.PI
-      degrees.push(degree)
-    })
-
-    function isMultipleOf45(degree, epsilon = 1) {
-      return Math.abs(degree % 45) <= epsilon || Math.abs((degree % 45) - 45) <= epsilon
-    }
-
-    return degrees.every((degree) => isMultipleOf45(degree))
-  }
-
   const getSplitRoofsPoints = (allLines) => {
     // ==== Utility functions ====