라인 위에 있는지 확인 함수 수정

지붕재 할당 시 오류 수정

src/hooks/common/useRoofFn.js

@@ -23,102 +23,65 @@ export function useRoofFn() {
 
   //면형상 선택 클릭시 지붕 패턴 입히기
   function setSurfaceShapePattern(polygon, mode = 'onlyBorder', trestleMode = false, roofMaterial, isForceChange = false, isDisplay = false) {
-    if (!polygon) {
+    try {
-      return
+      if (!polygon) {
-    }
+        return
-    if (polygon.points.length < 3) {
+      }
-      return
+      if (polygon.points.length < 3) {
-    }
+        return
-    if (isForceChange && !isDisplay) {
+      }
-      /*if (polygon.roofMaterial) {
+      if (isForceChange && !isDisplay) {
+        /*if (polygon.roofMaterial) {
         polygon.roofMaterial = null
       }*/
-    }
-    if (!roofMaterial) {
-      roofMaterial = polygon.roofMaterial ?? selectedRoofMaterial
-    }
-
-    const ratio = window.devicePixelRatio || 1
-    const layout = roofMaterial.layout
-
-    let width = (roofMaterial.width || 226) / 10
-    let height = (roofMaterial.length || 158) / 10
-    const index = roofMaterial.index ?? 0
-    let roofStyle = 2
-    const inputPatternSize = { width: width, height: height } //임시 사이즈
-    const patternSize = { ...inputPatternSize } // 입력된 값을 뒤집기 위해
-
-    if (polygon.direction === 'east' || polygon.direction === 'west') {
-      //세로형이면 width height를 바꿈
-      ;[patternSize.width, patternSize.height] = [inputPatternSize.height, patternSize.width]
-    }
-
-    // 패턴 소스를 위한 임시 캔버스 생성
-    const patternSourceCanvas = document.createElement('canvas')
-    patternSourceCanvas.width = polygon.width * ratio
-    patternSourceCanvas.height = polygon.height * ratio
-    const ctx = patternSourceCanvas.getContext('2d')
-    let offset = roofStyle === 1 ? 0 : patternSize.width / 2
-
-    const rows = Math.floor(patternSourceCanvas.height / patternSize.height)
-    const cols = Math.floor(patternSourceCanvas.width / patternSize.width)
-
-    ctx.strokeStyle = mode === 'allPainted' ? 'black' : ROOF_COLOR[index]
-    ctx.lineWidth = 2
-    ctx.fillStyle = mode === 'allPainted' ? 'rgba(0, 159, 64, 0.7)' : 'white'
-
-    if (trestleMode) {
-      ctx.strokeStyle = 'black'
-      ctx.lineWidth = 0.2
-      ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'
-    } else {
-      ctx.fillStyle = 'rgba(255, 255, 255, 1)'
-    }
-
-    if (polygon.direction === 'east' || polygon.direction === 'west') {
-      offset = roofStyle === 1 ? 0 : patternSize.height / 2
-      for (let col = 0; col <= cols; col++) {
-        const x = col * patternSize.width
-        const yStart = 0
-        const yEnd = patternSourceCanvas.height
-        ctx.beginPath()
-        ctx.moveTo(x, yStart) // 선 시작점
-        ctx.lineTo(x, yEnd) // 선 끝점
-        ctx.stroke()
-        if (mode === 'allPainted' || trestleMode) {
-          ctx.fillRect(x, yStart, patternSize.width, yEnd - yStart)
-        }
-
-        for (let row = 0; row <= rows; row++) {
-          const y = layout === ROOF_MATERIAL_LAYOUT.STAIRS ? row * patternSize.height + (col % 2 === 0 ? 0 : offset) : row * patternSize.height
-          const xStart = col * patternSize.width
-          const xEnd = xStart + patternSize.width
-          ctx.beginPath()
-          ctx.moveTo(xStart, y) // 선 시작점
-          ctx.lineTo(xEnd, y) // 선 끝점
-          ctx.stroke()
-          if (mode === 'allPainted' || trestleMode) {
-            ctx.fillRect(xStart, y, xEnd - xStart, patternSize.height)
-          }
-        }
       }
-    } else {
+      if (!roofMaterial) {
-      for (let row = 0; row <= rows; row++) {
+        roofMaterial = polygon.roofMaterial ?? selectedRoofMaterial
-        const y = row * patternSize.height
+      }
 
-        ctx.beginPath()
+      const ratio = window.devicePixelRatio || 1
-        ctx.moveTo(0, y) // 선 시작점
+      const layout = roofMaterial.layout
-        ctx.lineTo(patternSourceCanvas.width, y) // 선 끝점
-        ctx.stroke()
-        if (mode === 'allPainted' || trestleMode) {
-          ctx.fillRect(0, y, patternSourceCanvas.width, patternSize.height)
-        }
 
+      let width = (roofMaterial.width || 226) / 10
+      let height = (roofMaterial.length || 158) / 10
+      const index = roofMaterial.index ?? 0
+      let roofStyle = 2
+      const inputPatternSize = { width: width, height: height } //임시 사이즈
+      const patternSize = { ...inputPatternSize } // 입력된 값을 뒤집기 위해
+
+      if (polygon.direction === 'east' || polygon.direction === 'west') {
+        //세로형이면 width height를 바꿈
+        ;[patternSize.width, patternSize.height] = [inputPatternSize.height, patternSize.width]
+      }
+
+      // 패턴 소스를 위한 임시 캔버스 생성
+      const patternSourceCanvas = document.createElement('canvas')
+      patternSourceCanvas.width = polygon.width * ratio
+      patternSourceCanvas.height = polygon.height * ratio
+      const ctx = patternSourceCanvas.getContext('2d')
+      let offset = roofStyle === 1 ? 0 : patternSize.width / 2
+
+      const rows = Math.floor(patternSourceCanvas.height / patternSize.height)
+      const cols = Math.floor(patternSourceCanvas.width / patternSize.width)
+
+      ctx.strokeStyle = mode === 'allPainted' ? 'black' : ROOF_COLOR[index]
+      ctx.lineWidth = 2
+      ctx.fillStyle = mode === 'allPainted' ? 'rgba(0, 159, 64, 0.7)' : 'white'
+
+      if (trestleMode) {
+        ctx.strokeStyle = 'black'
+        ctx.lineWidth = 0.2
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'
+      } else {
+        ctx.fillStyle = 'rgba(255, 255, 255, 1)'
+      }
+
+      if (polygon.direction === 'east' || polygon.direction === 'west') {
+        offset = roofStyle === 1 ? 0 : patternSize.height / 2
         for (let col = 0; col <= cols; col++) {
-          const x = layout === ROOF_MATERIAL_LAYOUT.STAIRS ? col * patternSize.width + (row % 2 === 0 ? 0 : offset) : col * patternSize.width
+          const x = col * patternSize.width
-          const yStart = row * patternSize.height
+          const yStart = 0
-          const yEnd = yStart + patternSize.height
+          const yEnd = patternSourceCanvas.height
-
           ctx.beginPath()
           ctx.moveTo(x, yStart) // 선 시작점
           ctx.lineTo(x, yEnd) // 선 끝점
@@ -126,49 +89,90 @@ export function useRoofFn() {
           if (mode === 'allPainted' || trestleMode) {
             ctx.fillRect(x, yStart, patternSize.width, yEnd - yStart)
           }
+
+          for (let row = 0; row <= rows; row++) {
+            const y = layout === ROOF_MATERIAL_LAYOUT.STAIRS ? row * patternSize.height + (col % 2 === 0 ? 0 : offset) : row * patternSize.height
+            const xStart = col * patternSize.width
+            const xEnd = xStart + patternSize.width
+            ctx.beginPath()
+            ctx.moveTo(xStart, y) // 선 시작점
+            ctx.lineTo(xEnd, y) // 선 끝점
+            ctx.stroke()
+            if (mode === 'allPainted' || trestleMode) {
+              ctx.fillRect(xStart, y, xEnd - xStart, patternSize.height)
+            }
+          }
+        }
+      } else {
+        for (let row = 0; row <= rows; row++) {
+          const y = row * patternSize.height
+
+          ctx.beginPath()
+          ctx.moveTo(0, y) // 선 시작점
+          ctx.lineTo(patternSourceCanvas.width, y) // 선 끝점
+          ctx.stroke()
+          if (mode === 'allPainted' || trestleMode) {
+            ctx.fillRect(0, y, patternSourceCanvas.width, patternSize.height)
+          }
+
+          for (let col = 0; col <= cols; col++) {
+            const x = layout === ROOF_MATERIAL_LAYOUT.STAIRS ? col * patternSize.width + (row % 2 === 0 ? 0 : offset) : col * patternSize.width
+            const yStart = row * patternSize.height
+            const yEnd = yStart + patternSize.height
+
+            ctx.beginPath()
+            ctx.moveTo(x, yStart) // 선 시작점
+            ctx.lineTo(x, yEnd) // 선 끝점
+            ctx.stroke()
+            if (mode === 'allPainted' || trestleMode) {
+              ctx.fillRect(x, yStart, patternSize.width, yEnd - yStart)
+            }
+          }
         }
       }
-    }
 
-    const hachingPatternSourceCanvas = document.createElement('canvas')
+      const hachingPatternSourceCanvas = document.createElement('canvas')
 
-    if (mode === 'lineHatch') {
+      if (mode === 'lineHatch') {
-      hachingPatternSourceCanvas.width = polygon.width * ratio
+        hachingPatternSourceCanvas.width = polygon.width * ratio
-      hachingPatternSourceCanvas.height = polygon.height * ratio
+        hachingPatternSourceCanvas.height = polygon.height * ratio
 
-      const ctx1 = hachingPatternSourceCanvas.getContext('2d')
+        const ctx1 = hachingPatternSourceCanvas.getContext('2d')
 
-      const gap = 10
+        const gap = 10
 
-      ctx1.strokeStyle = 'green' // 선 색상
+        ctx1.strokeStyle = 'green' // 선 색상
-      ctx1.lineWidth = 0.3 // 선 두께
+        ctx1.lineWidth = 0.3 // 선 두께
 
-      for (let x = 0; x < hachingPatternSourceCanvas.width + hachingPatternSourceCanvas.height; x += gap) {
+        for (let x = 0; x < hachingPatternSourceCanvas.width + hachingPatternSourceCanvas.height; x += gap) {
-        ctx1.beginPath()
+          ctx1.beginPath()
-        ctx1.moveTo(x, 0) // 선 시작점
+          ctx1.moveTo(x, 0) // 선 시작점
-        ctx1.lineTo(0, x) // 선 끝점
+          ctx1.lineTo(0, x) // 선 끝점
-        ctx1.stroke()
+          ctx1.stroke()
+        }
       }
+
+      const combinedPatternCanvas = document.createElement('canvas')
+      combinedPatternCanvas.width = polygon.width * ratio
+      combinedPatternCanvas.height = polygon.height * ratio
+      const combinedCtx = combinedPatternCanvas.getContext('2d')
+      // 첫 번째 패턴을 그린 후 두 번째 패턴을 덧입힘
+      combinedCtx.drawImage(patternSourceCanvas, 0, 0)
+      combinedCtx.drawImage(hachingPatternSourceCanvas, 0, 0)
+
+      // 패턴 생성
+      const pattern = new fabric.Pattern({
+        source: combinedPatternCanvas,
+        repeat: 'repeat',
+      })
+
+      polygon.set('fill', null)
+      polygon.set('fill', pattern)
+      polygon.roofMaterial = roofMaterial
+      polygon.canvas?.renderAll()
+    } catch (e) {
+      console.log(e)
     }
-
-    const combinedPatternCanvas = document.createElement('canvas')
-    combinedPatternCanvas.width = polygon.width * ratio
-    combinedPatternCanvas.height = polygon.height * ratio
-    const combinedCtx = combinedPatternCanvas.getContext('2d')
-    // 첫 번째 패턴을 그린 후 두 번째 패턴을 덧입힘
-    combinedCtx.drawImage(patternSourceCanvas, 0, 0)
-    combinedCtx.drawImage(hachingPatternSourceCanvas, 0, 0)
-
-    // 패턴 생성
-    const pattern = new fabric.Pattern({
-      source: combinedPatternCanvas,
-      repeat: 'repeat',
-    })
-
-    polygon.set('fill', null)
-    polygon.set('fill', pattern)
-    polygon.roofMaterial = roofMaterial
-    polygon.canvas?.renderAll()
   }
 
   function removeRoofMaterial(roof = currentObject) {

src/hooks/usePolygon.js

@@ -1234,13 +1234,13 @@ export const usePolygon = () => {
     function getPath(start, end, graph, epsilon = 1) {
       if (isDirectlyConnected(start, end, graph, epsilon)) {
         console.log('직선 연결 있음. 무시.')
-        return null
+        return []
       }
 
       const path = findShortestPath(start, end, graph, epsilon)
       if (!path || path.length < 3) {
         console.log('경로 존재하나 3개 미만 좌표. 무시.')
-        return null
+        return []
       }
 
       return path

src/util/canvas-util.js

@@ -520,17 +520,17 @@ export const sortedPointLessEightPoint = (points) => {
 // 직선의 방정식.
 // 방정식은 ax + by + c = 0이며, 점의 좌표를 대입하여 계산된 값은 직선과 점 사이의 관계를 나타낸다.
 export function isPointOnLine({ x1, y1, x2, y2 }, { x, y }, epsilon = 2) {
-  const a = y2 - y1
+  /*const a = y2 - y1
   const b = x1 - x2
   const c = x2 * y1 - x1 * y2
-  return Math.abs(a * x + b * y + c) < 1000
+  return Math.abs(a * x + b * y + c) < 1000*/
   /*/!*const a = line.y2 - line.y1
   const b = line.x1 - line.x2
   const c = line.x2 * line.y1 - line.x1 * line.y2
   const result = Math.abs(a * point.x + b * point.y + c) / 100
 
   // 점이 선 위에 있는지 확인
-  return result <= 10*!/
+  return result <= 10*!*/
   // 직선 방정식 만족 여부 확인
   const crossProduct = (y - y1) * (x2 - x1) - (x - x1) * (y2 - y1)
   if (Math.abs(crossProduct) > 10) return false // 작은 오차 허용
@@ -539,7 +539,7 @@ export function isPointOnLine({ x1, y1, x2, y2 }, { x, y }, epsilon = 2) {
   const withinXRange = Math.min(x1, x2) <= x && x <= Math.max(x1, x2)
   const withinYRange = Math.min(y1, y2) <= y && y <= Math.max(y1, y2)
 
-  return withinXRange && withinYRange*/
+  return withinXRange && withinYRange
 }
 /**
  * 점과 가까운 line 찾기