diff --git a/.env.development b/.env.development index ec409311..1f7a8aea 100644 --- a/.env.development +++ b/.env.development @@ -13,8 +13,8 @@ SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y=" NEXT_PUBLIC_CONVERTER_DWG_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_a0FLEK6M2oTpXInK" NEXT_PUBLIC_CONVERTER_DXF_API_URL="https://v2.convertapi.com/convert/dxf/to/png?Secret=secret_a0FLEK6M2oTpXInK" -NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="http://q-order-stg.q-cells.jp:8120/eos/login/autoLogin" -NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="http://q-musubi-stg.q-cells.jp:8120/qm/login/autoLogin" +NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="http://q-order-dev.q-cells.jp:8120/eos/login/autoLogin" +NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="http://q-musubi-dev.q-cells.jp:8120/qm/login/autoLogin" # 테스트용 # AWS_REGION="ap-northeast-2" diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js index d014b25f..a94ca909 100644 --- a/src/hooks/useMode.js +++ b/src/hooks/useMode.js @@ -1718,14 +1718,22 @@ export function useMode() { for (let i = 0; i < n; i++) { const next = (i + 1) % n - // 인접한 두 edge가 같은 방향이면 겹치는 선 + // 인접한 두 edge가 같은 방향이면 두 edge 를 하나로 합칠 수 있다. + // 이 때 제거해야 하는 정점은 두 edge 사이의 "junction" 정점 = vertex[next]. + // (vertex[i] 는 edge[i-1] 의 끝이자 edge[i] 의 시작으로, 실제 코너일 수 있으므로 제거하면 안 됨.) if (isSameDirection(edges[i].angle, edges[next].angle)) { - // 짧은 쪽을 제거 대상으로 표시 - if (edges[i].length <= edges[next].length) { - removeIndices.add(i) - } else { - removeIndices.add(next) - } + removeIndices.add(next) + } + } + + // 절대 길이가 너무 짧은 edge 는 inset offset (~20) 대비 불안정하므로 제거. + // edge[i] 가 tiny 이면 시작 정점 vertex[i] 를 제거해 앞쪽 edge 와 병합한다. + // 이렇게 하면 남는 cleaned edge 의 line 매핑(cleanedLines[k]=lines[kept[k]]) 이 + // edge[i+1] (실제 긴 edge) 의 line 을 쓰게 되므로 offset 계산이 안정해진다. + const TINY_EDGE_THRESHOLD = 30 + for (let i = 0; i < n; i++) { + if (edges[i].length < TINY_EDGE_THRESHOLD) { + removeIndices.add(i) } } @@ -1747,6 +1755,25 @@ export function useMode() { } function createMarginPolygon(polygon, lines, arcSegments = 0, bevelJoin = false) { + // 폴리곤의 winding 방향 보정: inwardEdgeNormal 이 CW (signedArea > 0) 가정이므로 + // CCW 폴리곤은 vertex/lines 순서를 뒤집어 다시 createRoofPolygon 한 뒤 진행한다. + const rawSignedArea = polygon.edges.reduce( + (sum, edge) => sum + (edge.vertex1.x * edge.vertex2.y - edge.vertex2.x * edge.vertex1.y), + 0, + ) + if (rawSignedArea < 0) { + const reversedVertices = [...polygon.vertices].reverse() + const reversedLines = [] + const n = lines.length + // lines[i] 는 edge i (vertex[i] → vertex[i+1]) 에 해당. reverse 후의 edge j 는 + // 원본 edge (n - 1 - j) 와 같은 선분이므로 lines 배열도 동일 매핑으로 재정렬. + for (let j = 0; j < n; j++) { + reversedLines.push(lines[(n - 1 - j) % n]) + } + polygon = createRoofPolygon(reversedVertices) + lines = reversedLines + } + const offsetEdges = [] polygon.edges.forEach((edge, i) => { @@ -1756,37 +1783,16 @@ export function useMode() { offsetEdges.push(createOffsetEdge(edge, dx, dy)) }) - // 폴리곤의 감김 방향(signed area)을 구한다 - const signedArea = bevelJoin - ? polygon.edges.reduce((sum, edge) => sum + (edge.vertex1.x * edge.vertex2.y - edge.vertex2.x * edge.vertex1.y), 0) - : 0 - const vertices = [] offsetEdges.forEach((thisEdge, i) => { const prevEdge = offsetEdges[(i + offsetEdges.length - 1) % offsetEdges.length] const vertex = edgesIntersection(prevEdge, thisEdge) if (vertex) { - if (!vertex.isIntersectionOutside || !bevelJoin) { - vertices.push({ x: vertex.x, y: vertex.y }) - } else { - // 꼭짓점의 볼록/오목 판별 (cross product와 signed area 비교) - const origPrev = polygon.edges[(i + polygon.edges.length - 1) % polygon.edges.length] - const origThis = polygon.edges[i] - const cross = - (origPrev.vertex2.x - origPrev.vertex1.x) * (origThis.vertex2.y - origThis.vertex1.y) - - (origPrev.vertex2.y - origPrev.vertex1.y) * (origThis.vertex2.x - origThis.vertex1.x) - const isConvex = cross * signedArea > 0 - - if (isConvex) { - // 볼록 꼭짓점: bevel 적용 (offset edge 끝점 사용) - vertices.push({ x: prevEdge.vertex2.x, y: prevEdge.vertex2.y }) - vertices.push({ x: thisEdge.vertex1.x, y: thisEdge.vertex1.y }) - } else { - // 오목 꼭짓점: 교차점 사용 (90도 유지) - vertices.push({ x: vertex.x, y: vertex.y }) - } - } + // 볼록/오목 관계없이 두 offset edge 의 무한 직선 교점이 올바른 inset 꼭지점. + // isIntersectionOutside 는 offset "선분" 기준 flag 일 뿐이고, self-intersection(스파이크) + // 은 이후 cleanSelfIntersectingPolygon 과 clipOffsetToOriginal 에서 처리한다. + vertices.push({ x: vertex.x, y: vertex.y }) } }) @@ -1803,6 +1809,23 @@ export function useMode() { * @returns {{vertices, edges: *[], minX: *, minY: *, maxX: *, maxY: *}} */ function createPaddingPolygon(polygon, lines, arcSegments = 0, bevelJoin = false) { + // 폴리곤의 winding 방향 보정: inwardEdgeNormal 이 CW (signedArea > 0) 가정이므로 + // CCW 폴리곤은 vertex/lines 순서를 뒤집어 다시 createRoofPolygon 한 뒤 진행한다. + const rawSignedArea = polygon.edges.reduce( + (sum, edge) => sum + (edge.vertex1.x * edge.vertex2.y - edge.vertex2.x * edge.vertex1.y), + 0, + ) + if (rawSignedArea < 0) { + const reversedVertices = [...polygon.vertices].reverse() + const reversedLines = [] + const n = lines.length + for (let j = 0; j < n; j++) { + reversedLines.push(lines[(n - 1 - j) % n]) + } + polygon = createRoofPolygon(reversedVertices) + lines = reversedLines + } + const offsetEdges = [] polygon.edges.forEach((edge, i) => { @@ -1813,37 +1836,16 @@ export function useMode() { offsetEdges.push(createOffsetEdge(edge, dx, dy)) }) - // 폴리곤의 감김 방향(signed area)을 구한다 - const signedArea = bevelJoin - ? polygon.edges.reduce((sum, edge) => sum + (edge.vertex1.x * edge.vertex2.y - edge.vertex2.x * edge.vertex1.y), 0) - : 0 - const vertices = [] offsetEdges.forEach((thisEdge, i) => { const prevEdge = offsetEdges[(i + offsetEdges.length - 1) % offsetEdges.length] const vertex = edgesIntersection(prevEdge, thisEdge) if (vertex) { - if (!vertex.isIntersectionOutside || !bevelJoin) { - vertices.push({ x: vertex.x, y: vertex.y }) - } else { - // 꼭짓점의 볼록/오목 판별 (cross product와 signed area 비교) - const origPrev = polygon.edges[(i + polygon.edges.length - 1) % polygon.edges.length] - const origThis = polygon.edges[i] - const cross = - (origPrev.vertex2.x - origPrev.vertex1.x) * (origThis.vertex2.y - origThis.vertex1.y) - - (origPrev.vertex2.y - origPrev.vertex1.y) * (origThis.vertex2.x - origThis.vertex1.x) - const isConvex = cross * signedArea > 0 - - if (isConvex) { - // 볼록 꼭짓점: bevel 적용 (offset edge 끝점 사용) - vertices.push({ x: prevEdge.vertex2.x, y: prevEdge.vertex2.y }) - vertices.push({ x: thisEdge.vertex1.x, y: thisEdge.vertex1.y }) - } else { - // 오목 꼭짓점: 교차점 사용 (90도 유지) - vertices.push({ x: vertex.x, y: vertex.y }) - } - } + // 볼록/오목 관계없이 두 offset edge 의 무한 직선 교점이 올바른 inset 꼭지점. + // isIntersectionOutside 는 offset "선분" 기준 flag 일 뿐이고, self-intersection(스파이크) + // 은 이후 cleanSelfIntersectingPolygon 과 clipOffsetToOriginal 에서 처리한다. + vertices.push({ x: vertex.x, y: vertex.y }) } }) diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js index adee3ff3..c01feb2e 100644 --- a/src/util/qpolygon-utils.js +++ b/src/util/qpolygon-utils.js @@ -256,8 +256,11 @@ function createPaddingPolygon(polygon, offset, arcSegments = 0) { * @returns {Array} 정리된 점 배열 */ /** - * offset 폴리곤의 꼭짓점 중 원본 폴리곤 바깥에 나간 점을 - * 원본 폴리곤 경계 위의 가장 가까운 점으로 투영한다. + * offset 폴리곤을 원본 폴리곤 경계 안으로 클리핑한다. + * 삼각형/예각 꼭짓점 등에서 bevel 때문에 offset 꼭짓점이 원본 바깥으로 + * 튀어나가는 경우, 점별 투영이 아니라 turf.intersect 로 면 단위 클리핑을 수행한다. + * 점별 투영은 여러 점이 원본 바깥으로 나가면 각 점이 제각각 가까운 변으로 + * 스냅되어 폴리곤이 직사각형처럼 찌그러지는 문제가 있었음. * @param {Array} offsetVertices - offset된 점 배열 [{x, y}, ...] * @param {Array} originalVertices - 원본 폴리곤 점 배열 [{x, y}, ...] * @returns {Array} 클리핑된 점 배열 @@ -266,14 +269,15 @@ export function clipOffsetToOriginal(offsetVertices, originalVertices) { if (!offsetVertices || offsetVertices.length < 3) return offsetVertices if (!originalVertices || originalVertices.length < 3) return offsetVertices - // 점이 폴리곤 내부에 있는지 판단 (ray casting) - function pointInPolygon(point, polygon) { + // 점이 폴리곤 내부(또는 경계)에 있는지 판단 (ray casting) + const _pointInPolygon = (point, polygon) => { let inside = false for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) { - const xi = polygon[i].x, yi = polygon[i].y - const xj = polygon[j].x, yj = polygon[j].y - if (((yi > point.y) !== (yj > point.y)) && - (point.x < (xj - xi) * (point.y - yi) / (yj - yi) + xi)) { + const xi = polygon[i].x, + yi = polygon[i].y + const xj = polygon[j].x, + yj = polygon[j].y + if (yi > point.y !== yj > point.y && point.x < ((xj - xi) * (point.y - yi)) / (yj - yi) + xi) { inside = !inside } } @@ -281,7 +285,7 @@ export function clipOffsetToOriginal(offsetVertices, originalVertices) { } // 점을 선분 위의 가장 가까운 점으로 투영 - function projectOnSegment(p, a, b) { + const _projectOnSegment = (p, a, b) => { const dx = b.x - a.x const dy = b.y - a.y const lenSq = dx * dx + dy * dy @@ -291,24 +295,79 @@ export function clipOffsetToOriginal(offsetVertices, originalVertices) { return { x: a.x + t * dx, y: a.y + t * dy } } - return offsetVertices.map((p) => { - if (pointInPolygon(p, originalVertices)) return p + // 최종 결과 정점을 원본 폴리곤 경계 안으로 스냅하는 post-process. + // 부동소수점 누적/tiny edge 때문에 아주 미세하게 바깥에 있는 점만 복원한다. + const _snapToBoundary = (verts) => { + return verts.map((p) => { + if (_pointInPolygon(p, originalVertices)) return p + let minDist = Infinity + let nearest = p + for (let i = 0; i < originalVertices.length; i++) { + const a = originalVertices[i] + const b = originalVertices[(i + 1) % originalVertices.length] + const proj = _projectOnSegment(p, a, b) + const dd = (proj.x - p.x) * (proj.x - p.x) + (proj.y - p.y) * (proj.y - p.y) + if (dd < minDist) { + minDist = dd + nearest = proj + } + } + return nearest + }) + } - // 바깥에 있으면 원본 폴리곤의 가장 가까운 변 위의 점으로 이동 - let minDist = Infinity - let nearest = p - for (let i = 0; i < originalVertices.length; i++) { - const a = originalVertices[i] - const b = originalVertices[(i + 1) % originalVertices.length] - const proj = projectOnSegment(p, a, b) - const dist = (proj.x - p.x) * (proj.x - p.x) + (proj.y - p.y) * (proj.y - p.y) - if (dist < minDist) { - minDist = dist - nearest = proj + try { + const offsetCoords = offsetVertices.map((p) => [p.x, p.y]) + offsetCoords.push([offsetVertices[0].x, offsetVertices[0].y]) + + const origCoords = originalVertices.map((p) => [p.x, p.y]) + origCoords.push([originalVertices[0].x, originalVertices[0].y]) + + // 자기교차가 있으면 intersect 가 실패하므로 먼저 unkink + let offsetPoly = turf.polygon([offsetCoords]) + const kinked = turf.kinks(offsetPoly) + if (kinked.features.length > 0) { + const unkinked = turf.unkinkPolygon(offsetPoly) + if (unkinked.features.length > 0) { + offsetPoly = unkinked.features.reduce((max, f) => (turf.area(f) > turf.area(max) ? f : max)) } } - return nearest - }) + + const origPoly = turf.polygon([origCoords]) + + const clipped = turf.intersect(turf.featureCollection([offsetPoly, origPoly])) + + if (clipped) { + // MultiPolygon 인 경우 가장 큰 폴리곤 선택 + let coords + if (clipped.geometry.type === 'MultiPolygon') { + let maxArea = -Infinity + let bestRing = null + clipped.geometry.coordinates.forEach((poly) => { + const ring = poly[0] + const feat = turf.polygon([ring]) + const area = turf.area(feat) + if (area > maxArea) { + maxArea = area + bestRing = ring + } + }) + coords = bestRing + } else { + coords = clipped.geometry.coordinates[0] + } + if (coords && coords.length > 0) { + const result = coords.slice(0, -1).map((c) => ({ x: c[0], y: c[1] })) + // 부동소수점 오차로 미세하게 경계 밖에 있는 점만 경계로 스냅 + return _snapToBoundary(result) + } + } + } catch (e) { + console.warn('Failed to clip offset polygon to original:', e) + } + + // turf 실패 fallback: 바깥으로 나간 점만 원본 경계로 스냅 + return _snapToBoundary(offsetVertices) } export function cleanSelfIntersectingPolygon(vertices) {