qpolygon test

src/components/Roof2.jsx

@@ -5,8 +5,8 @@ import { Button } from '@nextui-org/react'
 import QRect from '@/components/fabric/QRect'
 
 import RangeSlider from './ui/RangeSlider'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilState } from 'recoil'
-import { canvasSizeState, fontSizeState, roofState, sortedPolygonArray } from '@/store/canvasAtom'
+import { canvasSizeState, fontSizeState, sortedPolygonArray } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { getCanvasState, insertCanvasState } from '@/lib/canvas'
 import { calculateIntersection } from '@/util/canvas-util'
@@ -253,14 +253,14 @@ export default function Roof2() {
     ]
 
     const diagonalType = [
-      { x: 100, y: 100 },
+      { x: 300, y: 100 },
       { x: 100, y: 600 },
-      { x: 250, y: 600 },
+      // { x: 250, y: 600 },
-      { x: 250, y: 450 },
+      // { x: 250, y: 450 },
-      { x: 400, y: 450 },
+      // { x: 400, y: 450 },
-      { x: 400, y: 600 },
+      // { x: 400, y: 600 },
       { x: 600, y: 600 },
-      { x: 400, y: 100 },
+      { x: 600, y: 100 },
     ]
 
     const triangleType = [
@@ -287,19 +287,19 @@ export default function Roof2() {
 
     const types = [type1, type2, type3, type4, type1A, type1B, eightPoint, eightPoint2, eightPoint3, eightPoint4, twelvePoint]
 
-    const polygon = new QPolygon(type1B, {
+    const polygon = new QPolygon(diagonalType, {
       fill: 'transparent',
-      stroke: 'black',
+      stroke: 'green',
       strokeWidth: 1,
       selectable: true,
       fontSize: fontSize,
       name: 'QPolygon1',
     })
 
-      canvas?.add(polygon)
+    canvas?.add(polygon)
-      drawRoofPolygon(polygon)
+    drawRoofPolygon(polygon)
 
-      // handleOuterlinesTest2(polygon)
+    // handleOuterlinesTest2(polygon)
 
     // const lines = togglePolygonLine(polygon)
     // togglePolygonLine(lines[0])

src/hooks/useMode.js

@@ -1203,21 +1203,11 @@ export function useMode() {
 
       if (prevWall.direction !== nextWall.direction) {
         console.log('if ::::')
+        console.log('currentWall.direction : ', currentWall.direction, currentWall.length)
         if (currentWall.direction === 'top') {
+          console.log('prevWall degree : ', 45)
           if (prevWall.direction === 'right') {
-            //밑변
+            let addLength = getLineOffsetPoint(prevWall, currentWall, offset)
-            let a = Math.abs(currentWall.x1 - prevWall.x1)
-            //빗변
-            let c = Math.sqrt(Math.abs(currentWall.x1 - currentWall.x2) ** 2 + Math.abs(currentWall.y1 - currentWall.y2) ** 2)
-            //밑변과 빗변사이의 각도
-            let alphaDegree = 90 - Math.acos(a / c) * (180 / Math.PI)
-
-            console.log(a, c, alphaDegree)
-
-            let addLength = Math.abs(offset * Math.tan(alphaDegree * (Math.PI / 180)))
-
-            console.log(addLength)
-
             expandedPoints.push({
               x1: currentWall.x1 + offset + addLength,
               y1: currentWall.y1 + offset,
@@ -1234,6 +1224,7 @@ export function useMode() {
         if (currentWall.direction === 'bottom') {
           if (prevWall.direction === 'right') {
             console.log('prevWall degree : ', 45)
+            console.log('angle : ', getDegreeBetweenTwoLines(prevWall, currentWall))
             expandedPoints.push({
               x1: currentWall.x1 + offset,
               y1: currentWall.y1 - offset,
@@ -1241,8 +1232,9 @@ export function useMode() {
           }
           if (prevWall.direction === 'left') {
             console.log('prevWall degree : ', 315)
+            let addLength = getLineOffsetPoint(prevWall, currentWall, offset)
             expandedPoints.push({
-              x1: currentWall.x1 - offset,
+              x1: currentWall.x1 - offset + addLength,
               y1: currentWall.y1 - offset,
             })
           }
@@ -1266,14 +1258,17 @@ export function useMode() {
           if (prevWall.direction === 'bottom') {
             if (isStartPointIn) {
               console.log('prevWall degree : ', 45)
+
               expandedPoints.push({
                 x1: currentWall.x1 + offset,
                 y1: currentWall.y1 - offset,
               })
             } else {
               console.log('prevWall degree : ', 225)
+              let addLength = getLineOffsetPoint(prevWall, currentWall, offset)
+              console.log('addLength : ', addLength)
               expandedPoints.push({
-                x1: currentWall.x1 - offset,
+                x1: currentWall.x1 - offset - addLength,
                 y1: currentWall.y1 + offset,
               })
             }
@@ -1283,28 +1278,19 @@ export function useMode() {
           if (prevWall.direction === 'top') {
             if (isStartPointIn) {
               console.log('prevWall degree : ', 225)
+              let addLength = getLineOffsetPoint(prevWall, currentWall, offset)
+              console.log('addLength : ', addLength)
               expandedPoints.push({
-                x1: currentWall.x1 - offset,
+                x1: currentWall.x1 - offset - addLength,
                 y1: currentWall.y1 + offset,
               })
             } else {
               console.log('prevWall degree : ', 45)
 
-              //밑변
+              let addLength = getLineOffsetPoint(prevWall, currentWall, offset)
-              let a = Math.abs(currentWall.x1 - prevWall.x1)
-              //빗변
-              let c = Math.sqrt(Math.abs(currentWall.x1 - currentWall.x2) ** 2 + Math.abs(currentWall.y1 - currentWall.y2) ** 2)
-              //밑변과 빗변사이의 각도
-              let alphaDegree = 90 - Math.acos(a / c) * (180 / Math.PI)
-
-              console.log(a, c, alphaDegree)
-
-              let addLength = Math.abs(offset * Math.tan(alphaDegree * (Math.PI / 180)))
-
-              console.log(addLength)
 
               expandedPoints.push({
-                x1: currentWall.x1 + offset + addLength,
+                x1: currentWall.x1 + offset - addLength,
                 y1: currentWall.y1 - offset,
               })
             }
@@ -1446,6 +1432,64 @@ export function useMode() {
     const roof = makePolygon(expandedPoints)
     roof.setWall(wall)
     setRoof(roof)
+
+    // roof.drawHelpLine()
+  }
+
+  /**
+   * 구하려는 라인의 x1,y1좌표가 기준
+   * @param line1 이전 라인
+   * @param line2 현재 라인
+   * @param offset
+   * @returns {number}
+   */
+  const getLineOffsetPoint = (line1, line2, offset) => {
+    if (line1.x1 !== line2.x1 && line1.y1 !== line2.y1) {
+    }
+    //밑변
+    let a = Math.abs(line1.x1 - line2.x1)
+    //빗변
+    let c = Math.sqrt(Math.abs(line1.x1 - line2.x2) ** 2 + Math.abs(line1.y1 - line2.y2) ** 2)
+    //밑변과 빗변사이의 각도
+    let alphaDegree = getDegreeBetweenTwoLines(line1, line2)
+    alphaDegree = alphaDegree <= 90 ? alphaDegree : 180 - alphaDegree
+    alphaDegree = 90 - alphaDegree
+
+    return Math.round(offset * Math.tan(alphaDegree * (Math.PI / 180)))
+  }
+
+  /**
+   * 구하려는 라인의 x1,y1좌표가 기준
+   * @param line1 이전 라인
+   * @param line2 현재 라인
+   * @returns {number}
+   */
+  const getDegreeBetweenTwoLines = (line1, line2) => {
+    let x1 = line1.x1,
+      x2 = line2.x1,
+      x3 = line2.x2
+    let y1 = line1.y1,
+      y2 = line2.y1,
+      y3 = line2.y2
+
+    // 각 점 사이의 벡터 계산
+    const vector1 = { x: x1 - x2, y: y1 - y2 }
+    const vector2 = { x: x3 - x2, y: y3 - y2 }
+
+    // 벡터의 길이 계산
+    const magnitude1 = Math.sqrt(vector1.x * vector1.x + vector1.y * vector1.y)
+    const magnitude2 = Math.sqrt(vector2.x * vector2.x + vector2.y * vector2.y)
+
+    // 내적 계산
+    const dotProduct = vector1.x * vector2.x + vector1.y * vector2.y
+
+    // 각도 계산 (라디안에서도 0에서 PI 라디안 사이의 각도로 변환)
+    let angle = Math.acos(dotProduct / (magnitude1 * magnitude2))
+
+    // 라디안에서 도 단위로 변환
+    angle = angle * (180 / Math.PI)
+
+    return angle
   }
 
   const calculateParallelPoint = (x1, y1, x2, y2, distance) => {

src/util/qpolygon-utils.js

@@ -1,6 +1,6 @@
 import { fabric } from 'fabric'
 import { QLine } from '@/components/fabric/QLine'
-import { distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util'
+import { distanceBetweenPoints, findClosestPoint, getRoofHypotenuse } from '@/util/canvas-util'
 
 export const defineQPloygon = () => {
   fabric.QPolygon = fabric.util.createClass(fabric.Group, {})
@@ -382,6 +382,10 @@ const calculateTriangleArea = (point1, point2, point3) => {
   return Math.abs(x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2)) / 2
 }
 
+export const drawHippedRoof = (polygon, chon) => {
+  drawRoofRidge(polygon)
+  drawHips(polygon)
+}
 /*마루 그리기
     외벽의 모양이 돌출된 ㄷ의 형태일때
     현재 라인의 외벽길이가 붙어있는 두외벽의 길이보다 짧거나 같다면
@@ -496,12 +500,12 @@ const drawHips = (polygon) => {
   /*
     마루에서 시작되는 hip을 먼저 그립니다.
    */
-  this.ridges.forEach((ridge) => {
+  polygon.ridges.forEach((ridge) => {
     let leftTop, rightTop, leftBottom, rightBottom
     if (ridge.x1 !== ridge.x2 && ridge.y1 === ridge.y2) {
       // console.log('가로방향 마루')
       //왼쪽 좌표 기준 225, 315도 방향 라인확인
-      leftTop = this.lines
+      leftTop = polygon.lines
         .filter((line) => line.x1 < ridge.x1 && line.y1 < ridge.y1 && Math.abs(line.x1 - ridge.x1) === Math.abs(line.y1 - ridge.y1))
         .reduce((prev, current) => {
           if (prev <= 0) {
@@ -511,7 +515,7 @@ const drawHips = (polygon) => {
           }
         }, [])
 
-      leftBottom = this.lines
+      leftBottom = polygon.lines
         .filter((line) => line.x1 < ridge.x1 && line.y1 > ridge.y1 && Math.abs(line.x1 - ridge.x1) === Math.abs(line.y1 - ridge.y1))
         .reduce((prev, current) => {
           if (prev <= 0) {
@@ -522,7 +526,7 @@ const drawHips = (polygon) => {
         }, [])
 
       //오른쪽 좌표 기준 45, 135도 방향 라인확인
-      rightTop = this.lines
+      rightTop = polygon.lines
         .filter((line) => line.x1 > ridge.x2 && line.y1 < ridge.y2 && Math.abs(line.x1 - ridge.x2) === Math.abs(line.y1 - ridge.y2))
         .reduce((prev, current) => {
           if (prev <= 0) {
@@ -532,7 +536,7 @@ const drawHips = (polygon) => {
           }
         }, [])
 
-      rightBottom = this.lines
+      rightBottom = polygon.lines
         .filter((line) => line.x1 > ridge.x2 && line.y1 > ridge.y2 && Math.abs(line.x1 - ridge.x2) === Math.abs(line.y1 - ridge.y2))
         .reduce((prev, current) => {
           if (prev <= 0) {
@@ -544,7 +548,7 @@ const drawHips = (polygon) => {
 
       if (leftTop.length > 0) {
         const hip = new QLine([leftTop.x1, leftTop.y1, ridge.x1, ridge.y1], {
-          fontSize: this.fontSize,
+          fontSize: polygon.fontSize,
           stroke: 'red',
           strokeWidth: 1,
         })
@@ -554,31 +558,31 @@ const drawHips = (polygon) => {
       }
       if (leftBottom.length > 0) {
         const hip = new QLine([leftBottom.x1, leftBottom.y1, ridge.x1, ridge.y1], {
-          fontSize: this.fontSize,
+          fontSize: polygon.fontSize,
           stroke: 'red',
           strokeWidth: 1,
         })
-        this.addWithUpdate(hip)
+        polygon.canvas.add(hip)
         this.hips.push(hip)
         this.innerLines.push(hip)
       }
       if (rightTop.length > 0) {
         const hip = new QLine([rightTop.x1, rightTop.y1, ridge.x2, ridge.y2], {
-          fontSize: this.fontSize,
+          fontSize: polygon.fontSize,
           stroke: 'red',
           strokeWidth: 1,
         })
-        this.addWithUpdate(hip)
+        polygon.canvas.add(hip)
         this.hips.push(hip)
         this.innerLines.push(hip)
       }
       if (rightBottom.length > 0) {
         const hip = new QLine([rightBottom.x1, rightBottom.y1, ridge.x2, ridge.y2], {
-          fontSize: this.fontSize,
+          fontSize: polygon.fontSize,
           stroke: 'red',
           strokeWidth: 1,
         })
-        this.addWithUpdate(hip)
+        polygon.canvas.add(hip)
         this.hips.push(hip)
         this.innerLines.push(hip)
       }
@@ -586,7 +590,7 @@ const drawHips = (polygon) => {
     if (ridge.y1 !== ridge.y2 && ridge.x1 === ridge.x2) {
       // console.log('세로방향 마루')
       //위쪽 좌표 기준 45, 315도 방향 라인확인
-      leftTop = this.lines
+      leftTop = polygon.lines
         .filter((line) => line.x1 < ridge.x1 && line.y1 < ridge.y1 && Math.abs(line.x1 - ridge.x1) === Math.abs(line.y1 - ridge.y1))
         .reduce((prev, current) => {
           if (prev <= 0) {
@@ -596,7 +600,7 @@ const drawHips = (polygon) => {
           }
         }, [])
 
-      rightTop = this.lines
+      rightTop = polygon.lines
         .filter((line) => line.x1 > ridge.x1 && line.y1 < ridge.y1 && Math.abs(line.x1 - ridge.x1) === Math.abs(line.y1 - ridge.y1))
         .reduce((prev, current) => {
           if (prev <= 0) {
@@ -607,7 +611,7 @@ const drawHips = (polygon) => {
         }, [])
 
       //아래쪽 좌표 기준 135, 225도 방향 라인확인
-      leftBottom = this.lines
+      leftBottom = polygon.lines
         .filter((line) => line.x1 < ridge.x2 && line.y1 > ridge.y2 && Math.abs(line.x1 - ridge.x2) === Math.abs(line.y1 - ridge.y2))
         .reduce((prev, current) => {
           if (prev <= 0) {
@@ -617,7 +621,7 @@ const drawHips = (polygon) => {
           }
         }, [])
 
-      rightBottom = this.lines
+      rightBottom = polygon.lines
         .filter((line) => line.x1 > ridge.x2 && line.y1 > ridge.y2 && Math.abs(line.x1 - ridge.x2) === Math.abs(line.y1 - ridge.y2))
         .reduce((prev, current) => {
           if (prev.length <= 0) {
@@ -629,13 +633,13 @@ const drawHips = (polygon) => {
 
       if (leftTop.length > 0) {
         const hip = new QLine([leftTop.x1, leftTop.y1, ridge.x1, ridge.y1], {
-          fontSize: this.fontSize,
+          fontSize: polygon.fontSize,
           stroke: 'red',
           strokeWidth: 1,
         })
-        this.addWithUpdate(hip)
+        polygon.canvas.add(hip)
-        this.hips.push(hip)
+        polygon.hips.push(hip)
-        this.innerLines.push(hip)
+        polygon.innerLines.push(hip)
       }
       if (rightTop.length > 0) {
         const hip = new QLine([rightTop.x1, rightTop.y1, ridge.x1, ridge.y1], {
@@ -643,58 +647,58 @@ const drawHips = (polygon) => {
           stroke: 'red',
           strokeWidth: 1,
         })
-        this.addWithUpdate(hip)
+        polygon.canvas.add(hip)
-        this.hips.push(hip)
+        polygon.hips.push(hip)
-        this.innerLines.push(hip)
+        polygon.innerLines.push(hip)
       }
       if (leftBottom.length > 0) {
         const hip = new QLine([leftBottom.x1, leftBottom.y1, ridge.x2, ridge.y2], {
-          fontSize: this.fontSize,
+          fontSize: polygon.fontSize,
           stroke: 'red',
           strokeWidth: 1,
         })
-        this.addWithUpdate(hip)
+        polygon.canvas.add(hip)
-        this.hips.push(hip)
+        polygon.hips.push(hip)
-        this.innerLines.push(hip)
+        polygon.innerLines.push(hip)
       }
       if (rightBottom.length > 0) {
         const hip = new QLine([rightBottom.x1, rightBottom.y1, ridge.x2, ridge.y2], {
-          fontSize: this.fontSize,
+          fontSize: polygon.fontSize,
           stroke: 'red',
           strokeWidth: 1,
         })
-        this.addWithUpdate(hip)
+        polygon.canvas.add(hip)
-        this.hips.push(hip)
+        polygon.hips.push(hip)
-        this.innerLines.push(hip)
+        polygon.innerLines.push(hip)
       }
     }
   })
 
   // 가장 가까운 마루를 확인하여 그릴 수 있는 라인이 존재하면 먼저 그린다.
   let prevLine, currentLine, nextLine
-  this.lines.forEach((value, index) => {
+  polygon.lines.forEach((value, index) => {
     if (index === 0) {
-      prevLine = this.lines[this.lines.length - 1]
+      prevLine = polygon.lines[polygon.lines.length - 1]
     } else {
-      prevLine = this.lines[index - 1]
+      prevLine = polygon.lines[index - 1]
     }
-    currentLine = this.lines[index]
+    currentLine = polygon.lines[index]
 
-    if (index === this.lines.length - 1) {
+    if (index === polygon.lines.length - 1) {
-      nextLine = this.lines[0]
+      nextLine = polygon.lines[0]
-    } else if (index === this.lines.length) {
+    } else if (index === polygon.lines.length) {
-      nextLine = this.lines[1]
+      nextLine = polygon.lines[1]
     } else {
-      nextLine = this.lines[index + 1]
+      nextLine = polygon.lines[index + 1]
     }
 
-    if (!this.isAlreadyHip(currentLine)) {
+    if (!isAlreadyHip(polygon, currentLine)) {
-      let dVector = this.getDirectionForDegree(prevLine, currentLine)
+      let dVector = getDirectionForDegree(prevLine, currentLine)
       let nearRidge
 
       switch (dVector) {
         case 45:
-          nearRidge = this.ridges
+          nearRidge = polygon.ridges
             .filter(
               (ridge) =>
                 (currentLine.x1 < ridge.x1 && currentLine.y1 > ridge.y1) ||
@@ -724,7 +728,7 @@ const drawHips = (polygon) => {
             }, undefined)
           break
         case 135:
-          nearRidge = this.ridges
+          nearRidge = polygon.ridges
             .filter(
               (ridge) =>
                 ((currentLine.x1 < ridge.x1 && currentLine.y1 < ridge.y1) || (currentLine.x1 < ridge.x2 && currentLine.y1 < ridge.y2)) &&
@@ -752,7 +756,7 @@ const drawHips = (polygon) => {
             }, undefined)
           break
         case 225:
-          nearRidge = this.ridges
+          nearRidge = polygon.ridges
             .filter(
               (ridge) =>
                 ((currentLine.x1 > ridge.x1 && currentLine.y1 < ridge.y1) || (currentLine.x1 > ridge.x2 && currentLine.y1 < ridge.y2)) &&
@@ -780,7 +784,7 @@ const drawHips = (polygon) => {
             }, undefined)
           break
         case 315:
-          nearRidge = this.ridges
+          nearRidge = polygon.ridges
             .filter(
               (ridge) =>
                 ((currentLine.x1 > ridge.x1 && currentLine.y1 > ridge.y1) || (currentLine.x1 > ridge.x2 && currentLine.y1 > ridge.y2)) &&
@@ -929,21 +933,21 @@ const drawHips = (polygon) => {
           { x: maxX, y: minY },
         ]
 
-        let innerPoint = this.lines.filter((line) => {
+        let innerPoint = polygon.lines.filter((line) => {
-          if (this.getPointInPolygon(lineCoordinate, { x: line.x1, y: line.y1 })) {
+          if (getPointInPolygon(lineCoordinate, { x: line.x1, y: line.y1 })) {
             return line
           }
         })
 
         if (innerPoint <= 0) {
           const hip = new QLine([currentLine.x1, currentLine.y1, endXPoint, endYPoint], {
-            fontSize: this.fontSize,
+            fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
           })
-          this.addWithUpdate(hip)
+          polygon.canvas.add(hip)
-          this.hips.push(hip)
+          polygon.hips.push(hip)
-          this.innerLines.push(hip)
+          polygon.innerLines.push(hip)
         }
       }
     }
@@ -951,26 +955,26 @@ const drawHips = (polygon) => {
 
   // 마루와 연결되지 않은 hip을 그린다.
   console.log('마루와 연결되지 않은 hip')
-  this.lines.forEach((line, index) => {
+  polygon.lines.forEach((line, index) => {
-    if (!this.isAlreadyHip(line)) {
+    if (!isAlreadyHip(polygon, line)) {
       let prevLine, currentLine, nextLine
       if (index === 0) {
-        prevLine = this.lines[this.lines.length - 1]
+        prevLine = polygon.lines[polygon.lines.length - 1]
       } else {
-        prevLine = this.lines[index - 1]
+        prevLine = polygon.lines[index - 1]
       }
-      currentLine = this.lines[index]
+      currentLine = polygon.lines[index]
 
-      if (index === this.lines.length - 1) {
+      if (index === polygon.lines.length - 1) {
-        nextLine = this.lines[0]
+        nextLine = polygon.lines[0]
-      } else if (index === this.lines.length) {
+      } else if (index === polygon.lines.length) {
-        nextLine = this.lines[1]
+        nextLine = polygon.lines[1]
       } else {
-        nextLine = this.lines[index + 1]
+        nextLine = polygon.lines[index + 1]
       }
 
       let endXPoint, endYPoint
-      let dVector = this.getDirectionForDegree(prevLine, currentLine)
+      let dVector = getDirectionForDegree(prevLine, currentLine)
 
       let minX = Math.min(currentLine.x1, currentLine.x2, prevLine.x1, nextLine.x2)
       let maxX = Math.max(currentLine.x1, currentLine.x2, prevLine.x1, nextLine.x2)
@@ -984,10 +988,12 @@ const drawHips = (polygon) => {
         { x: maxX, y: minY },
       ]
 
-      let acrossLine = getAcrossLine(currentLine, dVector)
+      let acrossLine = getAcrossLine(polygon, currentLine, dVector)
       let hypotenuse, adjacent
 
-      if (this.getLineDirection(prevLine) === this.getLineDirection(nextLine)) {
+      console.log(acrossLine)
+
+      if (getLineDirection(prevLine) === getLineDirection(nextLine)) {
         hypotenuse = Math.round(getRoofHypotenuse(Math.abs(currentLine.x1 - acrossLine.x1) / 2))
       } else {
         hypotenuse = Math.min(
@@ -1018,13 +1024,13 @@ const drawHips = (polygon) => {
       }
 
       const hip = new QLine([currentLine.x1, currentLine.y1, endXPoint, endYPoint], {
-        fontSize: this.fontSize,
+        fontSize: polygon.fontSize,
         stroke: 'red',
         strokeWidth: 1,
       })
-      this.addWithUpdate(hip)
+      polygon.canvas.add(hip)
-      this.hips.push(hip)
+      polygon.hips.push(hip)
-      this.innerLines.push(hip)
+      polygon.innerLines.push(hip)
     }
   })
   // this.canvas.renderAll()
@@ -1100,6 +1106,12 @@ const getRoofBaseLine = (polygon, prevLine, currentLine, nextLine, dVector) => {
       }
     }
   }
+
+  return {
+    minLineLength: 0,
+    currentLineLength: currentLine.length,
+    maxLineLength: 0,
+  }
 }
 
 const getPointInPolygon = (polygon, point) => {
@@ -1117,16 +1129,17 @@ const getPointInPolygon = (polygon, point) => {
 
 /**
  * 라인과 마주하는 다른 라인과의 가장 가까운 거리를 구한다.
+ * @param polygon
  * @param currentLine 현재 라인
  * @param dVector 현재 라인의 방향
  * @returns {*[]|null}
  */
-const getAcrossLine = (currentLine, dVector) => {
+const getAcrossLine = (polygon, currentLine, dVector) => {
   let acrossLine
 
   switch (dVector) {
     case 45:
-      acrossLine = this.lines
+      acrossLine = polygon.lines
         .filter((line) => line.x1 > currentLine.x1 && line.y1 <= currentLine.y1)
         .reduce((prev, current) => {
           if (prev.length > 0) {
@@ -1137,7 +1150,7 @@ const getAcrossLine = (currentLine, dVector) => {
         }, [])
       break
     case 135:
-      acrossLine = this.lines
+      acrossLine = polygon.lines
         .filter((line) => line.x1 > currentLine.x1 && line.y1 >= currentLine.y1)
         .reduce((prev, current) => {
           if (prev.length > 0) {
@@ -1148,7 +1161,7 @@ const getAcrossLine = (currentLine, dVector) => {
         }, [])
       break
     case 225:
-      acrossLine = this.lines
+      acrossLine = polygon.lines
         .filter((line) => line.x1 < currentLine.x1 && line.y1 >= currentLine.y1)
         .reduce((prev, current) => {
           if (prev.length > 0) {
@@ -1159,7 +1172,7 @@ const getAcrossLine = (currentLine, dVector) => {
         }, [])
       break
     case 315:
-      acrossLine = this.lines
+      acrossLine = polygon.lines
         .filter((line) => line.x1 < currentLine.x1 && line.y1 <= currentLine.y1)
         .reduce((prev, current) => {
           if (prev.length > 0) {
@@ -1176,9 +1189,9 @@ const getAcrossLine = (currentLine, dVector) => {
 /*
   추녀마루(hip) 중복방지를 위해 마루와 함께 그려진 추녀마루를 확인한다
  */
-const isAlreadyHip = (line) => {
+const isAlreadyHip = (polygon, line) => {
   let isAlreadyHip = false
-  this.hips.forEach((hip) => {
+  polygon.hips.forEach((hip) => {
     if (line.x1 === hip.x1 && line.y1 === hip.y1) {
       isAlreadyHip = true
     }
@@ -1190,7 +1203,7 @@ const isAlreadyHip = (line) => {
   3개 이상 이어지지 않은 라인 포인트 계산
   모임지붕에서 point는 3개 이상의 라인과 접해야 함.
  */
-const connectLinePoint = () => {
+const connectLinePoint = (polygon) => {
   // 연결되지 않은 모든 라인의 포인트를 구한다.
   let missedPoints = []
   //마루
@@ -1256,7 +1269,7 @@ const connectLinePoint = () => {
       stroke: 'green',
       strokeWidth: 1,
     })
-    this.addWithUpdate(line)
+    polygon.canvas.add(line)
     this.innerLines.push(line)
   })
 
@@ -1318,7 +1331,7 @@ const connectLinePoint = () => {
       stroke: 'purple',
       strokeWidth: 1,
     })
-    this.addWithUpdate(line)
+    polygon.canvas.add(line)
     this.innerLines.push(line)
   })
 }