fix(B06): 세월교 관 위 성토 채움 삭제

채움 색이 --color-chart-0(파랑 rgb 91,141,239)이라 관 선 색(rgb 79,142,247)과
겹쳐 관 일부처럼 읽혔다. 사용자 확정에 따라 면 자체를 지운다 — 배수관 세트와
같이 관 위는 비워 둔다.

- FordLayout.fill·FordSideLayout.roadFace와 전용 보조 함수 제거
- .b06-chart__ford-fill 스타일 삭제

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-25 12:12:55 +09:00
co-authored by Claude Opus 5
parent 81bb505cc4
commit 98380056cc
3 changed files with 4 additions and 47 deletions
+2 -5
View File
@@ -6,7 +6,7 @@
* 여기서는 계산 결과(`FordLayout`)를 SVG 도형으로 옮기기만 한다 — 치수 결정 금지.
*
* 그리는 순서 = 시공 순서: ① 바닥판 → ② 측벽(ㄴ형 집수정 재사용) → ③ 관 →
* ④ 성토(노체) 채움 → ⑤ 계류측 성토부선·절토선.
* ④ 계류측 성토부선·절토선. 관 위 성토 채움은 그리지 않는다(2026-08-25 사용자).
* ========================================================================== */
import type { FordLayout, FordWallRole } from "./B06_Section_UI_Cross_Ford_Geom";
@@ -124,10 +124,7 @@ export function appendFordOverlay(
polygon(layout.pipe.inner, "b06-chart__culvert-pipe", layout.label.text),
);
// ④ 성토(노체) 채움 — 관 위 ~ 노면 아래, 두 측벽 도로측 면 사이.
layer.append(polygon(layout.fill, "b06-chart__ford-fill", "세월교 관 위 성토(노체) 채움"));
// ⑤ 계류측 마감선 — 구조물이 원지반 위면 성토부선, 안이면 절토선(집수정과 같은 체계).
// ④ 계류측 마감선 — 구조물이 원지반 위면 성토부선, 안이면 절토선(집수정과 같은 체계).
for (const side of layout.sides) {
const role = side.role === "inlet" ? "유입" : "유출";
for (const segment of side.fillSegments) {
@@ -68,8 +68,6 @@ export interface FordSideLayout {
slabTopElevation: number;
/** 관 끝점(벽 바깥면 × 바닥판 상면). */
pipeEnd: OffsetPoint;
/** 벽 도로측 면(하단 → 상단) — 성토 채움의 옆면. */
roadFace: [OffsetPoint, OffsetPoint];
/** 바닥판 안쪽 변(위·아래) — 두 측벽 사이를 잇는 판이 여기서 시작한다. */
slabInner: [OffsetPoint, OffsetPoint];
/** 구조물 계류측 끝이 원지반 위일 때의 성토부선(집수정과 같은 체계). */
@@ -89,8 +87,6 @@ export interface FordLayout {
slabLengthM: number;
/** 관 외곽·내경 사각형(양 끝은 각 측 바닥판 상면). */
pipe: { outer: OffsetPoint[]; inner: OffsetPoint[] };
/** 관 위 성토(노체) 채움 폴리곤. */
fill: OffsetPoint[];
label: { at: OffsetPoint; text: string };
designTrim: CulvertDesignTrim;
adjust: FordAdjust;
@@ -117,14 +113,6 @@ function roadTopFactory(
};
}
/** 폴리라인에서 표고 하나에 대응하는 offset(선형 보간). */
function offsetAtElevation(from: OffsetPoint, to: OffsetPoint, elevation: number): number {
const span = to.elevation - from.elevation;
if (Math.abs(span) < 1e-9) return from.offset;
const t = (elevation - from.elevation) / span;
return from.offset + (to.offset - from.offset) * t;
}
/**
* 세월교 구체 기하. 제원·설계선·지반이 부족하면 null (그리기와 분리 — 설계선 트림이
* 먼저 쓴다).
@@ -213,8 +201,6 @@ export function computeFordLayout(
heightM,
slabTopElevation: built.pipeEnd.elevation,
pipeEnd: built.pipeEnd,
// 벽 폴리곤 꼭짓점 = [도로측 하단, 도로측 상단, 계류측 상단, 계류측 하단].
roadFace: [wall.points[0], wall.points[1]],
slabInner: [floor.points[0], floor.points[3]],
fillSegments: extras.segments,
cutLine: built.basin.cutLine,
@@ -268,24 +254,6 @@ export function computeFordLayout(
],
};
// 성토(노체) 채움 — 두 측벽 도로측 면 사이, 관 윗면 ~ 노면.
const faceAt = (side: FordSideLayout, elevation: number): number =>
offsetAtElevation(side.roadFace[0], side.roadFace[1], elevation);
const leftTopElev = rise(leftInvert, ford.diameter_m).elevation;
const rightTopElev = rise(rightInvert, ford.diameter_m).elevation;
const crown: OffsetPoint[] = [];
const crownFrom = faceAt(right, rightTopElev);
const crownTo = faceAt(left, leftTopElev);
for (let offset = crownFrom; offset < crownTo; offset += 0.5) {
crown.push({ offset, elevation: roadTopAt(offset) });
}
crown.push({ offset: crownTo, elevation: roadTopAt(crownTo) });
const fill: OffsetPoint[] = [
{ offset: crownFrom, elevation: rightTopElev },
{ offset: crownTo, elevation: leftTopElev },
...crown.slice().reverse(),
];
const countText = ford.pipe_count > 1 ? ` ${ford.pipe_count}` : "";
return {
ford,
@@ -293,7 +261,6 @@ export function computeFordLayout(
slabBridge,
slabLengthM,
pipe,
fill,
label: {
at: {
offset: (leftInvert.offset + rightInvert.offset) / 2,
@@ -301,18 +301,11 @@
cursor: help;
}
/* 세월교 구체(2026-08-25) — 바닥판은 콘크리트, 채움은 노체 성토. 측벽은 ㄴ형 집수정
형상을 그대로 쓰므로 `.b06-chart__culvert-basin` 색을 공유한다. */
/* 세월교 구체(2026-08-25) — 바닥판은 콘크리트. 측벽은 ㄴ형 집수정 형상을 그대로
쓰므로 `.b06-chart__culvert-basin` 색을 공유한다. */
.b06-chart__ford-slab {
fill: color-mix(in srgb, var(--color-text-secondary) 30%, transparent);
stroke: var(--color-text-secondary);
stroke-width: 1.2;
stroke-linejoin: round;
}
.b06-chart__ford-fill {
fill: color-mix(in srgb, var(--color-chart-0) 22%, transparent);
stroke: var(--color-chart-0);
stroke-width: 1;
stroke-linejoin: round;
}