동선이동 작업 완료

src/components/fabric/QPolygon.js

@@ -188,7 +188,6 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
   // 보조선 그리기
   drawHelpLine() {
-    // drawHelpLineInHexagon(this, pitch)
     const types = []
     this.lines.forEach((line) => types.push(line.attributes.type))
 

src/hooks/roofcover/useMovementSetting.js

@@ -5,6 +5,7 @@ import { useMessage } from '@/hooks/useMessage'
 import { useEffect, useRef, useState } from 'react'
 import { useEvent } from '@/hooks/useEvent'
 import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
+import { getDegreeByChon } from '@/util/canvas-util'
 
 //동선이동 형 올림 내림
 export function useMovementSetting(id) {
@@ -227,6 +228,20 @@ export function useMovementSetting(id) {
             }
           })
           polygon.set({ points: newPoints })
+          polygon.setCoords()
+          polygon.addLengthText()
+          polygon.initLines()
+          const slope = (line) => (line.x2 - line.x1 === 0 ? Infinity : (line.y2 - line.y1) / (line.x2 - line.x1))
+          const currentDegree = polygon.attributes.pitch > 0 ? getDegreeByChon(polygon.attributes.pitch) : polygon.attributes.degree
+          polygon.lines.forEach((line) => {
+            line.attributes.planeSize = Math.round(Math.sqrt(Math.pow(line.x2 - line.x1, 2) + Math.pow(line.y2 - line.y1, 2)) * 10)
+            if (currentDegree > 0 && slope(line) !== slope(currentObject)) {
+              const height = Math.tan(currentDegree * (Math.PI / 180)) * line.attributes.planeSize
+              line.attributes.actualSize = Math.round(Math.sqrt(Math.pow(line.attributes.planeSize, 2) + Math.pow(height, 2)))
+            } else {
+              line.attributes.actualSize = line.attributes.planeSize
+            }
+          })
         })
     } else {
       roof.innerLines
@@ -239,7 +254,7 @@ export function useMovementSetting(id) {
             (line.x2 === currentX2 && line.y2 === currentY2),
         )
         .forEach((line) => {
-          console.log('line : ', line)
+          const lineDegree = 90 - Math.asin(line.attributes.planeSize / line.attributes.actualSize) * (180 / Math.PI)
           if (line.x1 === currentX1 && line.y1 === currentY1) {
             line.set({ x1: newPoint[0], y1: newPoint[1] })
           } else if (line.x2 === currentX1 && line.y2 === currentY1) {
@@ -250,20 +265,18 @@ export function useMovementSetting(id) {
             line.set({ x2: newPoint[2], y2: newPoint[3] })
           }
           line.setCoords()
+          line.attributes.planeSize = Math.round(Math.sqrt(Math.pow(line.x2 - line.x1, 2) + Math.pow(line.y2 - line.y1, 2)) * 10)
+          line.attributes.actualSize = Math.round(
+            Math.sqrt(Math.pow(line.attributes.planeSize, 2) + Math.pow(line.attributes.planeSize * Math.tan(lineDegree * (Math.PI / 180)), 2)),
+          )
         })
     }
 
     currentObject.set({ x1: cloned.x1, y1: cloned.y1, x2: cloned.x2, y2: cloned.y2 })
     currentObject.setCoords()
 
-    console.log('currentObject : ', currentObject.x1, currentObject.y1, currentObject.x2, currentObject.y2)
-
     canvas.renderAll()
     canvas.discardActiveObject()
-
-    if (roof.separatePolygon.length > 0) {
-      console.log('roof.separatePolygon : ', roof.separatePolygon)
-    }
   }
 
   //형 올림내림 마우스 클릭 이벤트

src/util/qpolygon-utils.js

@@ -1109,7 +1109,6 @@ const drawHips = (roof, canvas) => {
       const vectorX2 = ridgeCoordinate.x1 - currentRoof.x2
       const vectorY2 = ridgeCoordinate.y1 - currentRoof.y2
       const angle2 = Math.atan2(vectorY2, vectorX2) * (180 / Math.PI)
-      console.log('angle2', Math.abs(Math.round(angle2)) % 45)
       if (Math.abs(Math.round(angle2)) % 45 === 0) {
         const hip2 = new QLine([currentRoof.x2, currentRoof.y2, ridgeCoordinate.x1, ridgeCoordinate.y1], {
           fontSize: roof.fontSize,