src/components/floor-plan/CanvasFrame.jsx

@@ -36,28 +36,31 @@ import { useMasterController } from '@/hooks/common/useMasterController'
 export default function CanvasFrame() {
   const [roofMaterials, setRoofMaterials] = useRecoilState(roofMaterialsAtom)
   const { getRoofMaterialList } = useMasterController()
-  useEffect(async () => {
-    if (roofMaterials.length !== 0) {
-      return
-    }
-    const { data } = await getRoofMaterialList()
+  useEffect(() => {
+    async function initRoofMaterial() {
+      if (roofMaterials.length !== 0) {
+        return
+      }
+      const { data } = await getRoofMaterialList()
 
-    const roofLists = data.map((item, idx) => ({
-      ...item,
-      id: item.roofMatlCd,
-      name: item.roofMatlNm,
-      selected: idx === 0,
-      index: idx,
-      nameJp: item.roofMatlNmJp,
-      length: item.lenBase && parseInt(item.lenBase),
-      width: item.widBase && parseInt(item.widBase),
-      raft: item.raftBase && parseInt(item.raftBase),
-      layout: ['ROOF_ID_SLATE', 'ROOF_ID_SINGLE'].includes(item.roofMatlCd) ? ROOF_MATERIAL_LAYOUT.STAIRS : ROOF_MATERIAL_LAYOUT.PARALLEL,
-      hajebichi: item.roofPchBase && parseInt(item.roofPchBase),
-      pitch: item.pitch ? parseInt(item.pitch) : 4,
-      angle: item.angle ? parseInt(item.angle) : 21.8,
-    }))
-    setRoofMaterials(roofLists)
+      const roofLists = data.map((item, idx) => ({
+        ...item,
+        id: item.roofMatlCd,
+        name: item.roofMatlNm,
+        selected: idx === 0,
+        index: idx,
+        nameJp: item.roofMatlNmJp,
+        length: item.lenBase && parseInt(item.lenBase),
+        width: item.widBase && parseInt(item.widBase),
+        raft: item.raftBase && parseInt(item.raftBase),
+        layout: ['ROOF_ID_SLATE', 'ROOF_ID_SINGLE'].includes(item.roofMatlCd) ? ROOF_MATERIAL_LAYOUT.STAIRS : ROOF_MATERIAL_LAYOUT.PARALLEL,
+        hajebichi: item.roofPchBase && parseInt(item.roofPchBase),
+        pitch: item.pitch ? parseInt(item.pitch) : 4,
+        angle: item.angle ? parseInt(item.angle) : 21.8,
+      }))
+      setRoofMaterials(roofLists)
+    }
+    initRoofMaterial()
   }, [])
   const canvasRef = useRef(null)
   const { canvas } = useCanvas('canvas')

src/hooks/usePolygon.js

@@ -1160,7 +1160,7 @@ export const usePolygon = () => {
       })
 
       canvas.add(roof)
-      addLengthText(roof)
+      // addLengthText(roof)
       canvas.remove(polygon)
       canvas.renderAll()
     })

src/util/canvas-util.js

@@ -360,16 +360,16 @@ export const calculateIntersection = (line1, line2) => {
 
   // Check if the intersection X and Y are within the range of both lines
   if (
-    result[0] >= line1MinX &&
-    result[0] <= line1MaxX &&
-    result[0] >= line2MinX &&
-    result[0] <= line2MaxX &&
-    result[1] >= line1MinY &&
-    result[1] <= line1MaxY &&
-    result[1] >= line2MinY &&
-    result[1] <= line2MaxY
+    result[0] >= line1MinX - 1 &&
+    result[0] <= line1MaxX + 1 &&
+    result[0] >= line2MinX - 1 &&
+    result[0] <= line2MaxX + 1 &&
+    result[1] >= line1MinY - 1 &&
+    result[1] <= line1MaxY + 1 &&
+    result[1] >= line2MinY - 1 &&
+    result[1] <= line2MaxY + 1
   ) {
-    return { x: Math.round(result[0]), y: Math.round(result[1]) }
+    return { x: result[0], y: result[1] }
   } else {
     return null // Intersection is out of range
   }
@@ -535,9 +535,21 @@ export function isPointOnLine({ x1, y1, x2, y2 }, { x, y }, epsilon = 2) {
   const crossProduct = (y - y1) * (x2 - x1) - (x - x1) * (y2 - y1)
   if (Math.abs(crossProduct) > 1000) return false // 작은 오차 허용
 
+  const isSameX = Math.abs(x1 - x2) < 2
+  const isSameY = Math.abs(y1 - y2) < 2
+
   // 점이 선분의 범위 내에 있는지 확인
-  const withinXRange = Math.abs(Math.min(x1, x2) - x) <= 2 || 2 <= Math.abs(Math.max(x1, x2) - x)
-  const withinYRange = Math.abs(Math.min(y1, y2) - y) <= 2 || 2 <= Math.abs(Math.max(y1, y2) - y)
+  let withinXRange = Math.min(x1, x2) - x <= 2
+  if (!isSameX) {
+    withinXRange = withinXRange && 2 <= Math.max(x1, x2) - x
+  }
+
+  let withinYRange = Math.min(y1, y2) - y <= 2
+  if (!isSameY) {
+    withinYRange = withinYRange && 2 <= Math.max(y1, y2) - y
+  }
+
+  console.log(Math.min(x1, x2) - x, Math.max(x1, x2) - x)
 
   return withinXRange && withinYRange
 }

src/util/qpolygon-utils.js

@@ -311,30 +311,45 @@ export function removeDuplicatePolygons(polygons) {
   return uniquePolygons
 }
 
-// 현재 point의 x와 이전 포인트의 x와 같을경우, 다음 포인트의 x와 달라야 함.
-// 현재 point의 y와 이전 포인트의 y와 같을경우, 다음 포인트의 y와 달라야 함.
+// 같은 직선상에 있는지 확인 같은 직선이라면 polygon을 생성할 수 없으므로 false
 const isValidPoints = (points) => {
-  for (let i = 1; i < points.length; i++) {
-    let prev = points[i - 1]
-    let curr = points[i]
-    let next = points[i + 1]
+  function isColinear(p1, p2, p3) {
+    return (p2.x - p1.x) * (p3.y - p1.y) === (p3.x - p1.x) * (p2.y - p1.y)
+  }
 
-    if (i === points.length - 1) {
-      prev = points[i - 1]
-      curr = points[i]
-      next = points[0]
-    }
-
-    // 현재와 이전의 x가 같다면 다음의 x는 달라야 함
-    if (Math.abs(curr.x - prev.x) < 1 && Math.abs(curr.x - next.x) < 1) {
+  function segmentsOverlap(a1, a2, b1, b2) {
+    // 같은 직선 상에 있는가?
+    if (!isColinear(a1, a2, b1) || !isColinear(a1, a2, b2)) {
       return false
     }
 
-    // 현재와 이전의 y가 같다면 다음의 y는 달라야 함
-    if (Math.abs(curr.y - prev.y) < 1 && Math.abs(curr.y - next.y) < 1) {
+    const isHorizontal = a1.y === a2.y
+    if (isHorizontal) {
+      const aMin = Math.min(a1.x, a2.x),
+        aMax = Math.max(a1.x, a2.x)
+      const bMin = Math.min(b1.x, b2.x),
+        bMax = Math.max(b1.x, b2.x)
+      return Math.max(aMin, bMin) < Math.min(aMax, bMax)
+    } else {
+      const aMin = Math.min(a1.y, a2.y),
+        aMax = Math.max(a1.y, a2.y)
+      const bMin = Math.min(b1.y, b2.y),
+        bMax = Math.max(b1.y, b2.y)
+      return Math.max(aMin, bMin) < Math.min(aMax, bMax)
+    }
+  }
+
+  for (let i = 0; i < points.length - 2; i++) {
+    const a1 = points[i]
+    const a2 = points[i + 1]
+    const b1 = points[i + 1] // 연속되는 점
+    const b2 = points[i + 2]
+
+    if (segmentsOverlap(a1, a2, b1, b2)) {
       return false
     }
   }
+
   return true
 }