다각형 모임지붕 계산 중 1차 정리

src/components/Roof2.jsx

@@ -214,6 +214,17 @@ export default function Roof2() {
       { x: 1100, y: 200 },
     ]
 
+    const eightPoint5 = [
+      { x: 140, y: 101 },
+      { x: 140, y: 601 },
+      { x: 440, y: 601 },
+      { x: 440, y: 801 },
+      { x: 840, y: 801 },
+      { x: 840, y: 601 },
+      { x: 1140, y: 601 },
+      { x: 1140, y: 101 },
+    ]
+
     const twelvePoint = [
       { x: 195, y: 166 },
       { x: 195, y: 466 },
@@ -229,6 +240,21 @@ export default function Roof2() {
       { x: 995, y: 166 },
     ]
 
+    const twelvePoint2 = [
+      { x: 165, y: 81 },
+      { x: 165, y: 1081 },
+      { x: 465, y: 1081 },
+      { x: 465, y: 781 },
+      { x: 765, y: 781 },
+      { x: 765, y: 1081 },
+      { x: 1065, y: 1081 },
+      { x: 1065, y: 581 },
+      { x: 765, y: 581 },
+      { x: 765, y: 281 },
+      { x: 1065, y: 281 },
+      { x: 1065, y: 81 },
+    ]
+
     const complicatedType = [
       { x: 100, y: 100 },
       { x: 100, y: 1100 },

src/util/qpolygon-utils.js

@@ -1,6 +1,13 @@
 import { fabric } from 'fabric'
 import { QLine } from '@/components/fabric/QLine'
-import { calculateIntersection, distanceBetweenPoints, findClosestPoint, getDirectionByPoint } from '@/util/canvas-util'
+import {
+  calculateIntersection,
+  distanceBetweenPoints,
+  findClosestPoint,
+  getAdjacent,
+  getDirectionByPoint,
+  getRoofHypotenuse,
+} from '@/util/canvas-util'
 import { QPolygon } from '@/components/fabric/QPolygon'
 
 const TWO_PI = Math.PI * 2
@@ -958,7 +965,7 @@ export default function offsetPolygon(vertices, offset) {
 export const drawHippedRoof = (polygon, chon) => {
   drawRoofRidge(polygon)
   drawHips(polygon)
-  // connectLinePoint(polygon)
+  connectLinePoint(polygon)
 }
 /*마루 그리기
     외벽의 모양이 돌출된 ㄷ의 형태일때
@@ -969,6 +976,7 @@ export const drawHippedRoof = (polygon, chon) => {
 */
 const drawRoofRidge = (polygon) => {
   const lines = polygon.wall.lines
+  console.log('polygon.wall.points : ', polygon.wall.points)
   polygon.lines.forEach((value, index) => {
     let currentLine, prevWall, currentWall, nextWall
     let startXPoint, startYPoint, endXPoint, endYPoint
@@ -1031,11 +1039,42 @@ const drawRoofRidge = (polygon) => {
           }
         }, undefined)
 
+      console.log('여기 확인 ===== currentWall : ', currentWall)
       let acrossLine = lines
         .filter((line) => {
+          /*let minAcrossX, maxAcrossX, minAcrossY, maxAcrossY
+          if (currentWall.direction === 'top' || currentWall.direction === 'bottom') {
+            minAcrossX = Math.min(currentWall.x1, line.x1)
+            maxAcrossX = Math.max(currentWall.x1, line.x1)
+            minAcrossY = Math.min(currentWall.y1, currentWall.y2)
+            maxAcrossY = Math.max(currentWall.y1, currentWall.y2)
+          }
+          if (currentWall.direction === 'left' || currentWall.direction === 'right') {
+            minAcrossX = Math.min(currentWall.x1, currentWall.x2)
+            maxAcrossX = Math.max(currentWall.x1, currentWall.x2)
+            minAcrossY = Math.min(currentWall.y1, line.y1)
+            maxAcrossY = Math.max(currentWall.y1, line.y1)
+          }
+          let coordinate = [
+            { x: minAcrossX, y: minAcrossY },
+            { x: minAcrossX, y: maxAcrossY },
+            { x: maxAcrossX, y: maxAcrossY },
+            { x: maxAcrossX, y: minAcrossY },
+          ]
+          console.log('coordinate : ', coordinate)
+          let isPointInLine = false
+          lines.forEach((l) => {
+            if (getPointInPolygon(coordinate, { x: l.x1, y: l.y1 }, true)) {
+              isPointInLine = true
+            }
+          })
+          console.log('line : ', line)
+          console.log('isPointInLine : ', isPointInLine)*/
+          // if (!isPointInLine && (currentWall.direction === 'top' || currentWall.direction === 'bottom')) {
           if (currentWall.direction === 'top' || currentWall.direction === 'bottom') {
             return line.direction === 'top' || line.direction === 'bottom'
           }
+          // if (!isPointInLine && (currentWall.direction === 'left' || currentWall.direction === 'right')) {
           if (currentWall.direction === 'left' || currentWall.direction === 'right') {
             return line.direction === 'left' || line.direction === 'right'
           }
@@ -1081,14 +1120,14 @@ const drawRoofRidge = (polygon) => {
 
       let ridgeLengthToWall, ridgeBaseLength, ridgeLengthToAcrossLine, ridgeMaxLength
 
-      console.log('currentWall : ', currentWall.length)
+      // console.log('currentWall : ', currentWall.length)
-      console.log('innerPointLine : ', innerPointLine)
+      // console.log('innerPointLine : ', innerPointLine)
       if (innerPointLine !== undefined) {
         if (currentWall.direction === 'top' || currentWall.direction === 'bottom') {
-          console.log('currentWall : ', currentWall)
+          // console.log('currentWall : ', currentWall)
-          console.log('acrossLine : ', acrossLine)
+          // console.log('acrossLine : ', acrossLine)
           if (innerPointLine.y1 === innerPointLine.y2) {
-            console.log('innerPointLine : ', innerPointLine)
+            // console.log('innerPointLine : ', innerPointLine)
             ridgeBaseLength = Math.abs(currentWall.y1 - innerPointLine.y1)
             ridgeLengthToWall = Math.max(prevWall.length, nextWall.length, Math.abs(currentWall.x1 - acrossLine.x1)) - ridgeBaseLength
             ridgeLengthToWall = Math.min(
@@ -1111,7 +1150,7 @@ const drawRoofRidge = (polygon) => {
             ridgeLengthToAcrossLine = Math.abs(acrossLine.x1 - innerPointLine.x1)
             ridgeMaxLength = Math.max(prevWall.length, nextWall.length, Math.abs(currentWall.x1 - acrossLine.x1))
           }
-          console.log(
+          /*console.log(
             'ridgeBaseLength : ',
             ridgeBaseLength,
             ' ridgeLengthToWall : ',
@@ -1120,7 +1159,7 @@ const drawRoofRidge = (polygon) => {
             ridgeLengthToAcrossLine,
             'ridgeMaxLength : ',
             ridgeMaxLength,
-          )
+          )*/
           if (ridgeBaseLength > 0) {
             if (ridgeLengthToWall <= ridgeLengthToAcrossLine) {
               if (nextWall.direction === 'right') {
@@ -1152,7 +1191,7 @@ const drawRoofRidge = (polygon) => {
           }
         }
         if (currentWall.direction === 'right' || currentWall.direction === 'left') {
-          console.log('currentWall.length : ', currentWall.length)
+          // console.log('currentWall.length : ', currentWall.length)
           if (innerPointLine.x1 === innerPointLine.x2) {
             ridgeBaseLength = Math.abs(currentWall.x1 - innerPointLine.x1)
             ridgeLengthToWall = Math.max(prevWall.length, nextWall.length, Math.abs(currentWall.x1 - acrossLine.x1)) - ridgeBaseLength
@@ -1176,14 +1215,14 @@ const drawRoofRidge = (polygon) => {
             ridgeLengthToAcrossLine = Math.abs(acrossLine.y1 - innerPointLine.y1)
             ridgeMaxLength = Math.max(prevWall.length, nextWall.length, Math.abs(currentWall.y1 - acrossLine.y1))
           }
-          console.log(
+          /*console.log(
             'ridgeBaseLength : ',
             ridgeBaseLength,
             ' ridgeLengthToWall : ',
             ridgeLengthToWall,
             ' ridgeLengthToAcrossLine : ',
             ridgeLengthToAcrossLine,
-          )
+          )*/
           if (ridgeBaseLength > 0) {
             if (ridgeLengthToWall <= ridgeLengthToAcrossLine) {
               if (nextWall.direction === 'top') {
@@ -1215,11 +1254,15 @@ const drawRoofRidge = (polygon) => {
           }
         }
       } else {
+        // console.log('여기부터 확인 currentWall : ', currentWall.length)
+        // console.log('acrossLine : ', acrossLine)
         ridgeBaseLength = currentWall.length
         ridgeLengthToWall = Math.min(prevWall.length, nextWall.length)
         ridgeMaxLength = Math.max(prevWall.length, nextWall.length)
+        // console.log('ridgeBaseLength : ', ridgeBaseLength, ' ridgeLengthToWall : ', ridgeLengthToWall, ' ridgeMaxLength : ', ridgeMaxLength)
         if (currentWall.direction === 'top' || currentWall.direction === 'bottom') {
           ridgeLengthToAcrossLine = Math.abs(acrossLine.x1 - currentWall.x1) - ridgeBaseLength
+          ridgeMaxLength = Math.max(ridgeMaxLength, Math.abs(acrossLine.x1 - currentWall.x1))
           if (ridgeLengthToWall <= ridgeLengthToAcrossLine) {
             if (nextWall.direction === 'right') {
               startXPoint = currentWall.x1 + ridgeBaseLength / 2
@@ -1250,6 +1293,7 @@ const drawRoofRidge = (polygon) => {
         }
         if (currentWall.direction === 'left' || currentWall.direction === 'right') {
           ridgeLengthToAcrossLine = Math.abs(acrossLine.y1 - currentWall.y1) - ridgeBaseLength
+          ridgeMaxLength = Math.max(ridgeMaxLength, Math.abs(acrossLine.x1 - currentWall.x1))
           if (ridgeLengthToWall <= ridgeLengthToAcrossLine) {
             if (nextWall.direction === 'top') {
               startYPoint = currentWall.y1 - ridgeBaseLength / 2
@@ -1279,7 +1323,8 @@ const drawRoofRidge = (polygon) => {
           }
         }
       }
-      console.log(startXPoint, startYPoint, endXPoint, endYPoint)
+      // console.log('ridgeLengthToAcrossLine : ', ridgeLengthToAcrossLine)
+      // console.log(startXPoint, startYPoint, endXPoint, endYPoint)
       if (
         // polygon.ridges.length < getMaxRidge(lines.length) &&
         ridgeBaseLength <= ridgeMaxLength &&
@@ -1304,7 +1349,7 @@ const drawRoofRidge = (polygon) => {
   })
   //중복 제거
   polygon.ridges = polygon.ridges.filter((ridge, index, self) => index === self.findIndex((t) => t.x1 === ridge.x1 && t.y1 === ridge.y1))
-  console.log('polygon.ridges', polygon.ridges)
+  // console.log('polygon.ridges', polygon.ridges)
 }
 const drawHips = (polygon) => {
   /*
@@ -1358,44 +1403,120 @@ const drawHips = (polygon) => {
           }
         }, undefined)
       if (leftTop !== undefined) {
-        const hip = new QLine([leftTop.x1, leftTop.y1, ridge.x1, ridge.y1], {
+        let isRidgePointOnLine = false
-          fontSize: polygon.fontSize,
+        polygon.ridges.forEach((r) => {
-          stroke: 'red',
+          if (
-          strokeWidth: 1,
+            r.x1 < ridge.x1 &&
+            r.y1 < ridge.y1 &&
+            (r.y1 - rightTop.y1) * (ridge.x1 - rightTop.x1) === (r.x1 - rightTop.x1) * (ridge.y1 - rightTop.y1)
+          ) {
+            isRidgePointOnLine = true
+          }
+          if (
+            r.x2 < ridge.x1 &&
+            r.y2 < ridge.y1 &&
+            (r.y2 - rightTop.y1) * (ridge.x1 - rightTop.x1) === (r.x2 - rightTop.x1) * (ridge.y1 - rightTop.y1)
+          ) {
+            isRidgePointOnLine = true
+          }
         })
-        polygon.canvas.add(hip)
+        if (!isRidgePointOnLine) {
-        polygon.hips.push(hip)
+          const hip = new QLine([leftTop.x1, leftTop.y1, ridge.x1, ridge.y1], {
-        polygon.innerLines.push(hip)
+            fontSize: polygon.fontSize,
+            stroke: 'red',
+            strokeWidth: 1,
+          })
+          polygon.canvas.add(hip)
+          polygon.hips.push(hip)
+          polygon.innerLines.push(hip)
+        }
       }
       if (leftBottom !== undefined) {
-        const hip = new QLine([leftBottom.x1, leftBottom.y1, ridge.x1, ridge.y1], {
+        let isRidgePointOnLine = false
-          fontSize: polygon.fontSize,
+        polygon.ridges.forEach((r) => {
-          stroke: 'red',
+          if (
-          strokeWidth: 1,
+            r.x1 < ridge.x1 &&
+            r.y1 > ridge.y1 &&
+            (r.y1 - rightTop.y1) * (ridge.x1 - rightTop.x1) === (r.x1 - rightTop.x1) * (ridge.y1 - rightTop.y1)
+          ) {
+            isRidgePointOnLine = true
+          }
+          if (
+            r.x2 < ridge.x1 &&
+            r.y2 > ridge.y1 &&
+            (r.y2 - rightTop.y1) * (ridge.x1 - rightTop.x1) === (r.x2 - rightTop.x1) * (ridge.y1 - rightTop.y1)
+          ) {
+            isRidgePointOnLine = true
+          }
         })
-        polygon.canvas.add(hip)
+        if (!isRidgePointOnLine) {
-        polygon.hips.push(hip)
+          const hip = new QLine([leftBottom.x1, leftBottom.y1, ridge.x1, ridge.y1], {
-        polygon.innerLines.push(hip)
+            fontSize: polygon.fontSize,
+            stroke: 'red',
+            strokeWidth: 1,
+          })
+          polygon.canvas.add(hip)
+          polygon.hips.push(hip)
+          polygon.innerLines.push(hip)
+        }
       }
       if (rightTop !== undefined) {
-        const hip = new QLine([rightTop.x1, rightTop.y1, ridge.x2, ridge.y2], {
+        let isRidgePointOnLine = false
-          fontSize: polygon.fontSize,
+        polygon.ridges.forEach((r) => {
-          stroke: 'red',
+          if (
-          strokeWidth: 1,
+            r.x1 > ridge.x2 &&
+            r.y1 < ridge.y2 &&
+            (r.y1 - rightTop.y1) * (ridge.x2 - rightTop.x1) === (r.x1 - rightTop.x1) * (ridge.y2 - rightTop.y1)
+          ) {
+            isRidgePointOnLine = true
+          }
+          if (
+            r.x2 > ridge.x2 &&
+            r.y2 < ridge.y2 &&
+            (r.y2 - rightTop.y1) * (ridge.x2 - rightTop.x1) === (r.x2 - rightTop.x1) * (ridge.y2 - rightTop.y1)
+          ) {
+            isRidgePointOnLine = true
+          }
         })
-        polygon.canvas.add(hip)
+        if (!isRidgePointOnLine) {
-        polygon.hips.push(hip)
+          const hip = new QLine([rightTop.x1, rightTop.y1, ridge.x2, ridge.y2], {
-        polygon.innerLines.push(hip)
+            fontSize: polygon.fontSize,
+            stroke: 'red',
+            strokeWidth: 1,
+          })
+          polygon.canvas.add(hip)
+          polygon.hips.push(hip)
+          polygon.innerLines.push(hip)
+        }
       }
       if (rightBottom !== undefined) {
-        const hip = new QLine([rightBottom.x1, rightBottom.y1, ridge.x2, ridge.y2], {
+        let isRidgePointOnLine = false
-          fontSize: polygon.fontSize,
+        polygon.ridges.forEach((r) => {
-          stroke: 'red',
+          if (
-          strokeWidth: 1,
+            r.x1 > ridge.x2 &&
+            r.y1 > ridge.y2 &&
+            (r.y1 - rightBottom.y1) * (ridge.x2 - rightBottom.x1) === (r.x1 - rightBottom.x1) * (ridge.y2 - rightBottom.y1)
+          ) {
+            isRidgePointOnLine = true
+          }
+          if (
+            r.x2 > ridge.x2 &&
+            r.y2 > ridge.y2 &&
+            (r.y2 - rightBottom.y1) * (ridge.x2 - rightBottom.x1) === (r.x2 - rightBottom.x1) * (ridge.y2 - rightBottom.y1)
+          ) {
+            isRidgePointOnLine = true
+          }
         })
-        polygon.canvas.add(hip)
+        if (!isRidgePointOnLine) {
-        polygon.hips.push(hip)
+          const hip = new QLine([rightBottom.x1, rightBottom.y1, ridge.x2, ridge.y2], {
-        polygon.innerLines.push(hip)
+            fontSize: polygon.fontSize,
+            stroke: 'red',
+            strokeWidth: 1,
+          })
+          polygon.canvas.add(hip)
+          polygon.hips.push(hip)
+          polygon.innerLines.push(hip)
+        }
       }
     }
     if (ridge.x1 === ridge.x2) {
@@ -1443,63 +1564,119 @@ const drawHips = (polygon) => {
         }, undefined)
 
       if (leftTop !== undefined) {
-        const hip = new QLine([leftTop.x1, leftTop.y1, ridge.x1, ridge.y1], {
+        let isRidgePointOnLine = false
-          fontSize: polygon.fontSize,
+        polygon.ridges.forEach((r) => {
-          stroke: 'red',
+          if (r.x1 < ridge.x1 && r.y1 < ridge.y1) {
-          strokeWidth: 1,
+            if ((r.y1 - leftTop.y1) * (ridge.x1 - leftTop.x1) === (r.x1 - leftTop.x1) * (ridge.y1 - leftTop.y1)) {
+              isRidgePointOnLine = true
+            }
+          }
+          if (r.x2 < ridge.x1 && r.y2 < ridge.y1) {
+            if ((r.y2 - leftTop.y1) * (ridge.x1 - leftTop.x1) === (r.x2 - leftTop.x1) * (ridge.y1 - leftTop.y1)) {
+              isRidgePointOnLine = true
+            }
+          }
         })
-        polygon.canvas.add(hip)
+        if (!isRidgePointOnLine) {
-        polygon.hips.push(hip)
+          const hip = new QLine([leftTop.x1, leftTop.y1, ridge.x1, ridge.y1], {
-        polygon.innerLines.push(hip)
+            fontSize: polygon.fontSize,
+            stroke: 'red',
+            strokeWidth: 1,
+          })
+          polygon.canvas.add(hip)
+          polygon.hips.push(hip)
+          polygon.innerLines.push(hip)
+        }
       }
       if (rightTop !== undefined) {
-        console.log('rightTop : ', rightTop)
+        let isRidgePointOnLine = false
         polygon.ridges.forEach((r) => {
           if (r.x1 > ridge.x1 && r.y1 < ridge.y1) {
-            console.log('ridge : ', r)
+            if ((r.y1 - rightTop.y1) * (ridge.x1 - rightTop.x1) === (r.x1 - rightTop.x1) * (ridge.y1 - rightTop.y1)) {
-            console.log((r.y1 - rightTop.y1) * (ridge.x1 - rightTop.x1) === (r.x1 - rightTop.x1) * (ridge.y1 - rightTop.y1))
+              isRidgePointOnLine = true
+            }
           }
           if (r.x2 > ridge.x1 && r.y2 < ridge.y1) {
-            console.log('ridge : ', r)
+            if ((r.y2 - rightTop.y1) * (ridge.x1 - rightTop.x1) === (r.x2 - rightTop.x1) * (ridge.y1 - rightTop.y1)) {
-            console.log((r.y2 - rightTop.y1) * (ridge.x1 - rightTop.x1) === (r.x2 - rightTop.x1) * (ridge.y1 - rightTop.y1))
+              isRidgePointOnLine = true
+            }
           }
         })
-        const hip = new QLine([rightTop.x1, rightTop.y1, ridge.x1, ridge.y1], {
+        if (!isRidgePointOnLine) {
-          fontSize: polygon.fontSize,
+          const hip = new QLine([rightTop.x1, rightTop.y1, ridge.x1, ridge.y1], {
-          stroke: 'red',
+            fontSize: polygon.fontSize,
-          strokeWidth: 1,
+            stroke: 'red',
-        })
+            strokeWidth: 1,
-        polygon.canvas.add(hip)
+          })
-        polygon.hips.push(hip)
+          polygon.canvas.add(hip)
-        polygon.innerLines.push(hip)
+          polygon.hips.push(hip)
+          polygon.innerLines.push(hip)
+        }
       }
       if (leftBottom !== undefined) {
-        const hip = new QLine([leftBottom.x1, leftBottom.y1, ridge.x2, ridge.y2], {
+        let isRidgePointOnLine = false
-          fontSize: polygon.fontSize,
+        polygon.ridges.forEach((r) => {
-          stroke: 'red',
+          if (
-          strokeWidth: 1,
+            r.x1 < ridge.x2 &&
+            r.y1 > ridge.y2 &&
+            (r.y1 - leftBottom.y1) * (ridge.x2 - leftBottom.x1) === (r.x1 - leftBottom.x1) * (ridge.y2 - leftBottom.y1)
+          ) {
+            isRidgePointOnLine = true
+          }
+          if (
+            r.x2 < ridge.x2 &&
+            r.y2 > ridge.y2 &&
+            (r.y2 - leftBottom.y1) * (ridge.x2 - leftBottom.x1) === (r.x2 - leftBottom.x1) * (ridge.y2 - leftBottom.y1)
+          ) {
+            isRidgePointOnLine = true
+          }
         })
-        polygon.canvas.add(hip)
+        console.log('leftBottom isRidgePointOnLine : ', isRidgePointOnLine)
-        polygon.hips.push(hip)
+        if (!isRidgePointOnLine) {
-        polygon.innerLines.push(hip)
+          const hip = new QLine([leftBottom.x1, leftBottom.y1, ridge.x2, ridge.y2], {
+            fontSize: polygon.fontSize,
+            stroke: 'red',
+            strokeWidth: 1,
+          })
+          polygon.canvas.add(hip)
+          polygon.hips.push(hip)
+          polygon.innerLines.push(hip)
+        }
       }
       if (rightBottom !== undefined) {
-        const hip = new QLine([rightBottom.x1, rightBottom.y1, ridge.x2, ridge.y2], {
+        let isRidgePointOnLine = false
-          fontSize: polygon.fontSize,
+        polygon.ridges.forEach((r) => {
-          stroke: 'red',
+          if (
-          strokeWidth: 1,
+            r.x1 < ridge.x2 &&
+            r.y1 > ridge.y2 &&
+            (r.y1 - rightBottom.y1) * (ridge.x2 - rightBottom.x1) === (r.x1 - rightBottom.x1) * (ridge.y2 - rightBottom.y1)
+          ) {
+            isRidgePointOnLine = true
+          }
+          if (
+            r.x2 < ridge.x2 &&
+            r.y2 > ridge.y2 &&
+            (r.y2 - rightBottom.y1) * (ridge.x2 - rightBottom.x1) === (r.x2 - rightBottom.x1) * (ridge.y2 - rightBottom.y1)
+          ) {
+            isRidgePointOnLine = true
+          }
         })
-        polygon.canvas.add(hip)
+        if (!isRidgePointOnLine) {
-        polygon.hips.push(hip)
+          const hip = new QLine([rightBottom.x1, rightBottom.y1, ridge.x2, ridge.y2], {
-        polygon.innerLines.push(hip)
+            fontSize: polygon.fontSize,
+            stroke: 'red',
+            strokeWidth: 1,
+          })
+          polygon.canvas.add(hip)
+          polygon.hips.push(hip)
+          polygon.innerLines.push(hip)
+        }
       }
     }
   })
 
-  console.log('polygon.hips : ', polygon.hips)
-
   // 가장 가까운 마루를 확인하여 그릴 수 있는 라인이 존재하면 먼저 그린다.
-  /*let prevLine, currentLine, nextLine
+  let prevLine, currentLine, nextLine
   polygon.lines.forEach((value, index) => {
     if (index === 0) {
       prevLine = polygon.lines[polygon.lines.length - 1]
@@ -1525,26 +1702,50 @@ const drawHips = (polygon) => {
           nearRidge = polygon.ridges
             .filter(
               (ridge) =>
-                (currentLine.x1 < ridge.x1 && currentLine.y1 > ridge.y1) ||
+                ((currentLine.x1 < ridge.x1 && currentLine.y1 > ridge.y1) || (currentLine.x1 < ridge.x2 && currentLine.y1 > ridge.y2)) &&
-                (currentLine.x1 < ridge.x2 &&
+                (Math.abs(currentLine.x1 - ridge.x1) === Math.abs(currentLine.y1 - ridge.y1) ||
-                  currentLine.y1 > ridge.y2 &&
+                  Math.abs(currentLine.x1 - ridge.x2) === Math.abs(currentLine.y1 - ridge.y2)),
-                  (Math.abs(currentLine.x1 - ridge.x1) === Math.abs(currentLine.y1 - ridge.y1) ||
-                    Math.abs(currentLine.x1 - ridge.x2) === Math.abs(currentLine.y1 - ridge.y2))),
             )
             .reduce((prev, current) => {
               if (prev !== undefined) {
-                if (Math.abs(currentLine.x1 - current.x1) === Math.abs(currentLine.y1 - current.y1)) {
+                if (
-                  return Math.min(Math.abs(current.x1 - currentLine.x1)) < Math.min(Math.abs(prev.x1 - currentLine.x1)) ? current : prev
+                  currentLine.x1 < current.x1 &&
-                } else if (Math.abs(currentLine.x1 - current.x2) === Math.abs(currentLine.y1 - current.y2)) {
+                  currentLine.y1 > current.y1 &&
-                  return Math.min(Math.abs(current.x1 - currentLine.x1)) < Math.min(Math.abs(prev.x1 - currentLine.x1)) ? current : prev
+                  Math.abs(currentLine.x1 - current.x1) === Math.abs(currentLine.y1 - current.y1)
+                ) {
+                  return Math.min(Math.abs(current.x1 - currentLine.x1)) < Math.min(Math.abs(prev.x - currentLine.x1))
+                    ? {
+                        x: current.x1,
+                        y: current.y1,
+                      }
+                    : prev
+                } else if (
+                  currentLine.x1 < current.x2 &&
+                  currentLine.y1 > current.y2 &&
+                  Math.abs(currentLine.x1 - current.x2) === Math.abs(currentLine.y1 - current.y2)
+                ) {
+                  return Math.min(Math.abs(current.x2 - currentLine.x1)) < Math.min(Math.abs(prev.x - currentLine.x1))
+                    ? {
+                        x: current.x2,
+                        y: current.y2,
+                      }
+                    : prev
                 } else {
                   return prev
                 }
               } else {
-                if (Math.abs(currentLine.x1 - current.x1) === Math.abs(currentLine.y1 - current.y1)) {
+                if (
-                  return current
+                  currentLine.x1 < current.x1 &&
-                } else if (Math.abs(currentLine.x1 - current.x2) === Math.abs(currentLine.y1 - current.y2)) {
+                  currentLine.y1 > current.y1 &&
-                  return current
+                  Math.abs(currentLine.x1 - current.x1) === Math.abs(currentLine.y1 - current.y1)
+                ) {
+                  return { x: current.x1, y: current.y1 }
+                } else if (
+                  currentLine.x1 < current.x2 &&
+                  currentLine.y1 > current.y2 &&
+                  Math.abs(currentLine.x1 - current.x2) === Math.abs(currentLine.y1 - current.y2)
+                ) {
+                  return { x: current.x2, y: current.y2 }
                 } else {
                   return undefined
                 }
@@ -1561,18 +1762,44 @@ const drawHips = (polygon) => {
             )
             .reduce((prev, current) => {
               if (prev !== undefined) {
-                if (Math.abs(currentLine.x1 - current.x1) === Math.abs(currentLine.y1 - current.y1)) {
+                if (
-                  return Math.min(Math.abs(current.x1 - currentLine.x1)) < Math.min(Math.abs(prev.x1 - currentLine.x1)) ? current : prev
+                  currentLine.x1 < current.x1 &&
-                } else if (Math.abs(currentLine.x1 - current.x2) === Math.abs(currentLine.y1 - current.y2)) {
+                  currentLine.y1 < current.y1 &&
-                  return Math.min(Math.abs(current.x1 - currentLine.x1)) < Math.min(Math.abs(prev.x1 - currentLine.x1)) ? current : prev
+                  Math.abs(currentLine.x1 - current.x1) === Math.abs(currentLine.y1 - current.y1)
+                ) {
+                  return Math.min(Math.abs(current.x1 - currentLine.x1)) < Math.min(Math.abs(prev.x - currentLine.x1))
+                    ? {
+                        x: current.x1,
+                        y: current.y1,
+                      }
+                    : prev
+                } else if (
+                  currentLine.x1 < current.x2 &&
+                  currentLine.y1 < current.y2 &&
+                  Math.abs(currentLine.x1 - current.x2) === Math.abs(currentLine.y1 - current.y2)
+                ) {
+                  return Math.min(Math.abs(current.x1 - currentLine.x1)) < Math.min(Math.abs(prev.x - currentLine.x1))
+                    ? {
+                        x: current.x2,
+                        y: current.y2,
+                      }
+                    : prev
                 } else {
                   return prev
                 }
               } else {
-                if (Math.abs(currentLine.x1 - current.x1) === Math.abs(currentLine.y1 - current.y1)) {
+                if (
-                  return current
+                  currentLine.x1 < current.x1 &&
-                } else if (Math.abs(currentLine.x1 - current.x2) === Math.abs(currentLine.y1 - current.y2)) {
+                  currentLine.y1 < current.y1 &&
-                  return current
+                  Math.abs(currentLine.x1 - current.x1) === Math.abs(currentLine.y1 - current.y1)
+                ) {
+                  return { x: current.x1, y: current.y1 }
+                } else if (
+                  currentLine.x1 < current.x2 &&
+                  currentLine.y1 < current.y2 &&
+                  Math.abs(currentLine.x1 - current.x2) === Math.abs(currentLine.y1 - current.y2)
+                ) {
+                  return { x: current.x2, y: current.y2 }
                 } else {
                   return undefined
                 }
@@ -1589,18 +1816,44 @@ const drawHips = (polygon) => {
             )
             .reduce((prev, current) => {
               if (prev !== undefined) {
-                if (Math.abs(currentLine.x1 - current.x1) === Math.abs(currentLine.y1 - current.y1)) {
+                if (
-                  return Math.min(Math.abs(current.x1 - currentLine.x1)) < Math.min(Math.abs(prev.x1 - currentLine.x1)) ? current : prev
+                  currentLine.x1 > current.x1 &&
-                } else if (Math.abs(currentLine.x1 - current.x2) === Math.abs(currentLine.y1 - current.y2)) {
+                  currentLine.y1 < current.y1 &&
-                  return Math.min(Math.abs(current.x1 - currentLine.x1)) < Math.min(Math.abs(prev.x1 - currentLine.x1)) ? current : prev
+                  Math.abs(currentLine.x1 - current.x1) === Math.abs(currentLine.y1 - current.y1)
+                ) {
+                  return Math.min(Math.abs(current.x1 - currentLine.x1)) < Math.min(Math.abs(prev.x - currentLine.x1))
+                    ? {
+                        x: current.x1,
+                        y: current.y1,
+                      }
+                    : prev
+                } else if (
+                  currentLine.x1 > current.x2 &&
+                  currentLine.y1 < current.y2 &&
+                  Math.abs(currentLine.x1 - current.x2) === Math.abs(currentLine.y1 - current.y2)
+                ) {
+                  return Math.min(Math.abs(current.x1 - currentLine.x1)) < Math.min(Math.abs(prev.x - currentLine.x1))
+                    ? {
+                        x: current.x2,
+                        y: current.y2,
+                      }
+                    : prev
                 } else {
                   return prev
                 }
               } else {
-                if (Math.abs(currentLine.x1 - current.x1) === Math.abs(currentLine.y1 - current.y1)) {
+                if (
-                  return current
+                  currentLine.x1 > current.x1 &&
-                } else if (Math.abs(currentLine.x1 - current.x2) === Math.abs(currentLine.y1 - current.y2)) {
+                  currentLine.y1 < current.y1 &&
-                  return current
+                  Math.abs(currentLine.x1 - current.x1) === Math.abs(currentLine.y1 - current.y1)
+                ) {
+                  return { x: current.x1, y: current.y1 }
+                } else if (
+                  currentLine.x1 > current.x2 &&
+                  currentLine.y1 < current.y2 &&
+                  Math.abs(currentLine.x1 - current.x2) === Math.abs(currentLine.y1 - current.y2)
+                ) {
+                  return { x: current.x2, y: current.y2 }
                 } else {
                   return undefined
                 }
@@ -1617,18 +1870,44 @@ const drawHips = (polygon) => {
             )
             .reduce((prev, current) => {
               if (prev !== undefined) {
-                if (Math.abs(currentLine.x1 - current.x1) === Math.abs(currentLine.y1 - current.y1)) {
+                if (
-                  return Math.min(Math.abs(current.x1 - currentLine.x1)) < Math.min(Math.abs(prev.x1 - currentLine.x1)) ? current : prev
+                  currentLine.x1 > current.x1 &&
-                } else if (Math.abs(currentLine.x1 - current.x2) === Math.abs(currentLine.y1 - current.y2)) {
+                  currentLine.y1 > current.y1 &&
-                  return Math.min(Math.abs(current.x1 - currentLine.x1)) < Math.min(Math.abs(prev.x1 - currentLine.x1)) ? current : prev
+                  Math.abs(currentLine.x1 - current.x1) === Math.abs(currentLine.y1 - current.y1)
+                ) {
+                  return Math.min(Math.abs(current.x1 - currentLine.x1)) < Math.min(Math.abs(prev.x - currentLine.x1))
+                    ? {
+                        x: current.x1,
+                        y: current.y1,
+                      }
+                    : prev
+                } else if (
+                  currentLine.x1 > current.x2 &&
+                  currentLine.y1 > current.y2 &&
+                  Math.abs(currentLine.x1 - current.x2) === Math.abs(currentLine.y1 - current.y2)
+                ) {
+                  return Math.min(Math.abs(current.x1 - currentLine.x1)) < Math.min(Math.abs(prev.x - currentLine.x1))
+                    ? {
+                        x: current.x2,
+                        y: current.y2,
+                      }
+                    : prev
                 } else {
                   return prev
                 }
               } else {
-                if (Math.abs(currentLine.x1 - current.x1) === Math.abs(currentLine.y1 - current.y1)) {
+                if (
-                  return current
+                  currentLine.x1 > current.x1 &&
-                } else if (Math.abs(currentLine.x1 - current.x2) === Math.abs(currentLine.y1 - current.y2)) {
+                  currentLine.y1 > current.y1 &&
-                  return current
+                  Math.abs(currentLine.x1 - current.x1) === Math.abs(currentLine.y1 - current.y1)
+                ) {
+                  return { x: current.x1, y: current.y1 }
+                } else if (
+                  currentLine.x1 > current.x2 &&
+                  currentLine.y1 > current.y2 &&
+                  Math.abs(currentLine.x1 - current.x2) === Math.abs(currentLine.y1 - current.y2)
+                ) {
+                  return { x: current.x2, y: current.y2 }
                 } else {
                   return undefined
                 }
@@ -1637,116 +1916,44 @@ const drawHips = (polygon) => {
           break
       }
 
-      // console.log('nearRidge : ', nearRidge)
+      console.log('nearRidge : ', nearRidge)
 
-      if (nearRidge !== undefined && nearRidge.length > 0) {
+      if (nearRidge !== undefined) {
         let endXPoint, endYPoint
         let minX, maxX, minY, maxY
 
         switch (dVector) {
           case 45:
-            if (
+            endXPoint = nearRidge.x
-              currentLine.x1 < nearRidge.x1 &&
+            endYPoint = nearRidge.y
-              currentLine.y1 > nearRidge.y1 &&
+            minX = Math.min(currentLine.x1, nearRidge.x)
-              Math.abs(currentLine.x1 - nearRidge.x1) === Math.abs(currentLine.y1 - nearRidge.y1)
+            minY = Math.min(currentLine.y1, nearRidge.y)
-            ) {
+            maxX = Math.max(currentLine.x1, nearRidge.x)
-              endXPoint = nearRidge.x1
+            maxY = Math.max(currentLine.y1, nearRidge.y)
-              endYPoint = nearRidge.y1
-              minX = Math.min(currentLine.x1, nearRidge.x1)
-              minY = Math.min(currentLine.y1, nearRidge.y1)
-              maxX = Math.max(currentLine.x1, nearRidge.x1)
-              maxY = Math.max(currentLine.y1, nearRidge.y1)
-            }
-            if (
-              currentLine.x1 < nearRidge.x2 &&
-              currentLine.y1 > nearRidge.y2 &&
-              Math.abs(currentLine.x1 - nearRidge.x2) === Math.abs(currentLine.y1 - nearRidge.y2)
-            ) {
-              endXPoint = nearRidge.x2
-              endYPoint = nearRidge.y2
-              minX = Math.min(currentLine.x1, nearRidge.x2)
-              minY = Math.min(currentLine.y1, nearRidge.y2)
-              maxX = Math.max(currentLine.x1, nearRidge.x2)
-              maxY = Math.max(currentLine.y1, nearRidge.y2)
-            }
             break
           case 135:
-            if (
+            endXPoint = nearRidge.x
-              currentLine.x1 < nearRidge.x1 &&
+            endYPoint = nearRidge.y
-              currentLine.y1 < nearRidge.y1 &&
+            minX = Math.min(currentLine.x1, nearRidge.x)
-              Math.abs(currentLine.x1 - nearRidge.x1) === Math.abs(currentLine.y1 - nearRidge.y1)
+            minY = Math.min(currentLine.y1, nearRidge.y)
-            ) {
+            maxX = Math.max(currentLine.x1, nearRidge.x)
-              endXPoint = nearRidge.x1
+            maxY = Math.max(currentLine.y1, nearRidge.y)
-              endYPoint = nearRidge.y1
-              minX = Math.min(currentLine.x1, nearRidge.x1)
-              minY = Math.min(currentLine.y1, nearRidge.y1)
-              maxX = Math.max(currentLine.x1, nearRidge.x1)
-              maxY = Math.max(currentLine.y1, nearRidge.y1)
-            }
-            if (
-              currentLine.x1 < nearRidge.x2 &&
-              currentLine.y1 < nearRidge.y2 &&
-              Math.abs(currentLine.x1 - nearRidge.x2) === Math.abs(currentLine.y1 - nearRidge.y2)
-            ) {
-              endXPoint = nearRidge.x2
-              endYPoint = nearRidge.y2
-              minX = Math.min(currentLine.x1, nearRidge.x2)
-              minY = Math.min(currentLine.y1, nearRidge.y2)
-              maxX = Math.max(currentLine.x1, nearRidge.x2)
-              maxY = Math.max(currentLine.y1, nearRidge.y2)
-            }
             break
           case 225:
-            if (
+            endXPoint = nearRidge.x
-              currentLine.x1 > nearRidge.x1 &&
+            endYPoint = nearRidge.y
-              currentLine.y1 < nearRidge.y1 &&
+            minX = Math.min(currentLine.x1, nearRidge.x)
-              Math.abs(currentLine.x1 - nearRidge.x1) === Math.abs(currentLine.y1 - nearRidge.y1)
+            minY = Math.min(currentLine.y1, nearRidge.y)
-            ) {
+            maxX = Math.max(currentLine.x1, nearRidge.x)
-              endXPoint = nearRidge.x1
+            maxY = Math.max(currentLine.y1, nearRidge.y)
-              endYPoint = nearRidge.y1
-              minX = Math.min(currentLine.x1, nearRidge.x1)
-              minY = Math.min(currentLine.y1, nearRidge.y1)
-              maxX = Math.max(currentLine.x1, nearRidge.x1)
-              maxY = Math.max(currentLine.y1, nearRidge.y1)
-            }
-            if (
-              currentLine.x1 > nearRidge.x2 &&
-              currentLine.y1 < nearRidge.y2 &&
-              Math.abs(currentLine.x1 - nearRidge.x2) === Math.abs(currentLine.y1 - nearRidge.y2)
-            ) {
-              endXPoint = nearRidge.x2
-              endYPoint = nearRidge.y2
-              minX = Math.min(currentLine.x1, nearRidge.x2)
-              minY = Math.min(currentLine.y1, nearRidge.y2)
-              maxX = Math.max(currentLine.x1, nearRidge.x2)
-              maxY = Math.max(currentLine.y1, nearRidge.y2)
-            }
             break
           case 315:
-            if (
+            endXPoint = nearRidge.x
-              currentLine.x1 > nearRidge.x1 &&
+            endYPoint = nearRidge.y
-              currentLine.y1 > nearRidge.y1 &&
+            minX = Math.min(currentLine.x1, nearRidge.x)
-              Math.abs(currentLine.x1 - nearRidge.x1) === Math.abs(currentLine.y1 - nearRidge.y1)
+            minY = Math.min(currentLine.y1, nearRidge.y)
-            ) {
+            maxX = Math.max(currentLine.x1, nearRidge.x)
-              endXPoint = nearRidge.x1
+            maxY = Math.max(currentLine.y1, nearRidge.y)
-              endYPoint = nearRidge.y1
-              minX = Math.min(currentLine.x1, nearRidge.x1)
-              minY = Math.min(currentLine.y1, nearRidge.y1)
-              maxX = Math.max(currentLine.x1, nearRidge.x1)
-              maxY = Math.max(currentLine.y1, nearRidge.y1)
-            }
-            if (
-              currentLine.x1 > nearRidge.x2 &&
-              currentLine.y1 > nearRidge.y2 &&
-              Math.abs(currentLine.x1 - nearRidge.x2) === Math.abs(currentLine.y1 - nearRidge.y2)
-            ) {
-              endXPoint = nearRidge.x2
-              endYPoint = nearRidge.y2
-              minX = Math.min(currentLine.x1, nearRidge.x2)
-              minY = Math.min(currentLine.y1, nearRidge.y2)
-              maxX = Math.max(currentLine.x1, nearRidge.x2)
-              maxY = Math.max(currentLine.y1, nearRidge.y2)
-            }
             break
         }
 
@@ -1858,27 +2065,21 @@ const drawHips = (polygon) => {
       polygon.hips.push(hip)
       polygon.innerLines.push(hip)
     }
-  })*/
+  })
   // this.canvas.renderAll()
 }
 
-const isRidgePointOnLine = (polygon, x1, y1, x2, y2) => {
+const getPointInPolygon = (polygon, point, isInclude = false) => {
-  let isRidgePointOnLine = false
-
-  polygon.ridges.forEach((ridge) => {
-    console.log((ridge.y1 - rightTop.y1) * (ridge.x1 - rightTop.x1) === (ridge.x1 - rightTop.x1) * (ridge.y1 - rightTop.y1))
-    console.log((ridge.y2 - rightTop.y1) * (ridge.x1 - rightTop.x1) === (ridge.x2 - rightTop.x1) * (ridge.y1 - rightTop.y1))
-  })
-}
-
-const getPointInPolygon = (polygon, point) => {
   let inside = false
   let minX = Math.min(polygon[0].x, polygon[1].x, polygon[2].x, polygon[3].x),
     maxX = Math.max(polygon[0].x, polygon[1].x, polygon[2].x, polygon[3].x),
     minY = Math.min(polygon[0].y, polygon[1].y, polygon[2].y, polygon[3].y),
     maxY = Math.max(polygon[0].y, polygon[1].y, polygon[2].y, polygon[3].y)
 
-  if (minX < point.x && point.x < maxX && minY < point.y && point.y < maxY) {
+  if (!isInclude && minX < point.x && point.x < maxX && minY < point.y && point.y < maxY) {
+    inside = true
+  }
+  if (isInclude && minX <= point.x && point.x <= maxX && minY <= point.y && point.y <= maxY) {
     inside = true
   }
   return inside