diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx index b43fd559..4e0a14c0 100644 --- a/src/components/floor-plan/CanvasFrame.jsx +++ b/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') diff --git a/src/hooks/usePolygon.js b/src/hooks/usePolygon.js index 4d59d292..735a85f5 100644 --- a/src/hooks/usePolygon.js +++ b/src/hooks/usePolygon.js @@ -1160,7 +1160,7 @@ export const usePolygon = () => { }) canvas.add(roof) - addLengthText(roof) + // addLengthText(roof) canvas.remove(polygon) canvas.renderAll() }) diff --git a/src/util/canvas-util.js b/src/util/canvas-util.js index 0f0b69dc..3e3f4059 100644 --- a/src/util/canvas-util.js +++ b/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 } diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js index e0175551..3082e682 100644 --- a/src/util/qpolygon-utils.js +++ b/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 }