eomsangdonandClaude Fable 5
0d5fba4400
B05에서 배치한 배수관 측점의 B06 횡단도에 배관·기슭막이(또는 집수정)·보호공을 분리 도형으로 그린다. 기존 도형(지반선·면적 밴드·포장·암 경계)은 손대지 않고, 계획선 표시 규칙만 세트와 정합을 맞춰 함께 정비했다. - 백엔드: pipe_points.json 정본(facility=="pipe")에 레지스트리 기본값을 채워 chainage ±0.02m로 맞는 횡단에 culvert 키를 얹는다(Engine_Culvert 신규, Router의 상세조회·재생성 두 경로에서 호출). 횡단 dict는 자유형이라 Pydantic 변경 없음. - 배관: 유입 invert = min(노견 아래 원지반, 노면고 − 관경 − 토피 0.5), 유출 앵커는 성토사면이 지반과 만나는 사면 끝(성토사면 길이 5m 한계 — 별표2 Ⅰ.2.차.(3)). 역경사는 수평 클램프, 길이는 m 단위 올림. 단면은 축 법선 방향 직사각형이고 외경선(실선)+내경선(점선) 2겹으로 관벽 두께를 보인다(파형강관 2.7T — KS D 3590). 끝단면은 구조물의 계류측 변을 복사해 자른다. - 기슭막이: 배면 수직 사다리꼴 + 전면 평행사변형 띠(1:0.3, t=0.45 — 실무 L3=45)의 합성 단면. 높이는 이음선 상단점이 성토 사면선과 만나는 접점까지, 하한 관경+0.45, 상한은 형태별 한계(찰 3.0/메 2.0 — 교본 7-3). 근입 0.5m(실무 기초콘크리트 H=0.5). 돌 해칭은 벽 폴리곤 clipPath 안에만 그려 어떤 높이에서도 벽 밖으로 새지 않는다. - 집수정: 절토측 유입이거나 원지반이 관 단면의 30% 이상을 막으면 자동 전환. I형(벽)·ㄴ형(+바닥)·ㄷ형(+반대측 막음), 기본 ㄴ형·내공 1.0m. 구조물이 원지반 안쪽에 박히면 절토선을 공사 계획선(보라 실선)으로 긋는다. 라벨은 I형 벽 하단. - 보호공: 시작 윗점 = 관 하단 꼭짓점, 시작 변은 기슭막이 전면과 같은 경사. 성토경사를 따라 원지반까지 내려간 뒤, 최소 길이(낙차고×2)를 채울 때까지 원지반을 따라 더 간다. - 계획선 표시: 원지반과 차이 없는 구간은 그리지 않되(보라 점선 폐지), 노면·노견· 측구부터 사면 1차 접점까지는 항상 그린다. 측구는 노견 바깥에 붙으므로 보호 범위를 측구 폭만큼 넓히고 접점 탐색도 그 바깥에서 시작한다. 배수관 측점은 벽 접점에서 트림. - B05: 배수관 측점 계획고를 지반고 + 관경 + 토피 0.5m 아래로 내리지 못하게 막고 경고 토스트를 띄운다. - 700줄 제한: 오버레이 파일이 919줄이 되어 기하(_Geom 678줄)와 그리기(247줄)로 분리했다. import 경로는 재수출로 유지해 B05·Cross_View는 건드리지 않았다. 근거 미확정(코드 주석·툴팁에 명시): 토피 0.5m(별표2 교량·암거 복토 50㎝ 교차 참조), 기슭막이 근입 0.5m(실무값), 흄관·VR관 관벽 두께(관경÷12 — KS F 4403 미확보). 검증: tsc, ruff, pytest 148 passed(신규 test_b06_culvert_set.py 6건), 헤드 브라우저 — 4+4.3·13+15.7 세트 표시, 보호공 시작점과 관 하단 꼭짓점 간격 0.6px 이내·시작 변 기울기 실측 0.223(= 0.3·H/(H+0.5) 이론값과 일치)·최소 길이 5.0m 확보, 계획선 세그먼트 연결 틈 0개(8·9·10·12·4+4.3). ⚠ 13+15.7 성토사면 5.03m로 법정 5m를 0.03m 초과 — 툴팁에 표기하고 접점 보간 여부는 사용자 판단 대기. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
275 lines
8.5 KiB
CSS
275 lines
8.5 KiB
CSS
/* =============================================================================
|
|
* B06_Section_UI_Style_Cross_Areas.css
|
|
* 횡단 카드의 **면적 오버레이 계열** 스타일 — 절·성토 면적 표, 면적 강조 밴드,
|
|
* 설계선·암 경계선·포장층, 암 경계선 제어 버튼.
|
|
*
|
|
* `_UI_Style_Cross.css`가 700줄을 넘겨, 도면 뼈대(섹션·카드·차트·줌/팬)와
|
|
* 그 위에 얹는 면적 표기 계열을 갈랐다. 색은 모두 theme.css 토큰만 쓴다.
|
|
* ========================================================================== */
|
|
|
|
/* 절·성토 면적 오버레이(E-4) — 그래프 중상단, 배경색으로 그래프 선과 겹쳐도 가독.
|
|
절토/성토 × EA·RR·BR·계 표라서 칩을 늘어놓을 때보다 가로 폭을 덜 먹는다. */
|
|
.b06-cross-card__areas {
|
|
position: absolute;
|
|
top: var(--spacing-8);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 2px 6px;
|
|
border-radius: var(--radius-inputs);
|
|
background: color-mix(in srgb, var(--color-surface) 88%, transparent);
|
|
font-size: 0.72rem;
|
|
font-family: var(--font-mono);
|
|
white-space: nowrap;
|
|
border-collapse: collapse;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.b06-cross-card__areas th,
|
|
.b06-cross-card__areas td {
|
|
padding: 0 5px;
|
|
text-align: center;
|
|
font-weight: var(--font-weight-regular);
|
|
}
|
|
|
|
/* 열 제목은 가운데 맞춤 — 값은 우측 정렬이라 자릿수가 흔들려도 머리글은 열 중앙에 선다. */
|
|
.b06-cross-card__areas thead th {
|
|
text-align: center;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* 행 이름(절토/성토)은 왼쪽 정렬 — 숫자 열과 구분된다. */
|
|
.b06-cross-card__areas tbody th {
|
|
text-align: left;
|
|
}
|
|
|
|
/* 면적 표기 색은 **테마 토큰만** 쓴다. 고정 RGB를 박으면 다크 테마에서 글자가 배경에
|
|
묻힌다(발파암에 쓰던 검정이 그랬다). 차트 팔레트는 밝기가 두 테마 모두에 맞춰져 있다. */
|
|
.b06-design__area--cut,
|
|
.b06-design__area--cut_total {
|
|
color: var(--color-danger);
|
|
}
|
|
|
|
/* 절토 내역 — 토사(EA), 리핑암(RR), 발파암(BR)을 색으로 갈라 둔다. */
|
|
.b06-design__area--cut_soil {
|
|
color: var(--color-chart-2);
|
|
}
|
|
|
|
/* RR은 `--color-slate`를 쓰면 안 된다 — 그 토큰이 곧 `--color-text-secondary`라
|
|
라이트 테마에서 회색 글자가 "비활성"으로 읽히고, 28% 밴드는 흰 배경에 묻힌다.
|
|
`--color-warning`도 못 쓴다(암 경계선 점선이 이미 그 색이라 밴드가 제 경계선과 섞인다). */
|
|
.b06-design__area--cut_rr {
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.b06-design__area--cut_br {
|
|
color: var(--color-chart-3);
|
|
}
|
|
|
|
.b06-design__area--fill {
|
|
color: var(--color-chart-0);
|
|
}
|
|
|
|
.b06-design__area--unset {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* 선택된 카드에서만 값 칸이 버튼이 된다 — 부모가 pointer-events: none이라 여기서 되살린다. */
|
|
.b06-cross-card__areas button {
|
|
padding: 0 2px;
|
|
border: none;
|
|
border-radius: var(--radius-inputs);
|
|
background: none;
|
|
color: inherit;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
cursor: pointer;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* 켠 칸은 글자색을 유지한 채 같은 색으로 옅게 칠하고 테두리를 둘러 대비를 살린다. */
|
|
.b06-cross-card__areas button.is-active {
|
|
background: color-mix(in srgb, currentcolor 18%, transparent);
|
|
box-shadow: inset 0 0 0 1px currentcolor;
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
/* 면적 강조 밴드 — 평소엔 클릭 대상으로만 남고, 켜질 때만 채워진다. */
|
|
.b06-chart__area > polygon {
|
|
fill: transparent;
|
|
stroke: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 밴드 색은 위 면적표 글자색과 짝을 맞춘다 — 어느 숫자를 켰는지 색으로 바로 읽히게. */
|
|
.b06-chart__area--cut_soil.is-active > polygon {
|
|
fill: color-mix(in srgb, var(--color-chart-2) 28%, transparent);
|
|
stroke: var(--color-chart-2);
|
|
stroke-width: 1.2;
|
|
}
|
|
|
|
/* 암반 밴드는 하나지만 색은 암종을 따라간다 — 표의 RR/BR 글자색과 같아야 짝이 읽힌다. */
|
|
.b06-chart__area--cut_rr.is-active > polygon {
|
|
fill: color-mix(in srgb, var(--color-success) 28%, transparent);
|
|
stroke: var(--color-success);
|
|
stroke-width: 1.2;
|
|
}
|
|
|
|
.b06-chart__area--cut_br.is-active > polygon {
|
|
fill: color-mix(in srgb, var(--color-chart-3) 28%, transparent);
|
|
stroke: var(--color-chart-3);
|
|
stroke-width: 1.2;
|
|
}
|
|
|
|
.b06-chart__area--fill.is-active > polygon {
|
|
fill: color-mix(in srgb, var(--color-chart-0) 28%, transparent);
|
|
stroke: var(--color-chart-0);
|
|
stroke-width: 1.2;
|
|
}
|
|
|
|
/* 횡단 표준단면 설계선 오버레이. 기본은 실선. */
|
|
.b06-chart__design-cross {
|
|
fill: none;
|
|
stroke: var(--color-royal-amethyst);
|
|
stroke-width: 1.8;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
/* 지면선과 겹치는 구간만 점선(dash:gap = 1:1)으로 그려 뒤 지표선이 빈 칸으로 비쳐 보이게 한다. */
|
|
.b06-chart__design-cross--overlap {
|
|
stroke-dasharray: 4 4;
|
|
}
|
|
|
|
/* 차도·노견 경계 짧은 수직 틱(N-4-2) — 설계선과 같은 계열, 얇게. */
|
|
.b06-chart__carriageway-tick {
|
|
stroke: var(--color-royal-amethyst);
|
|
stroke-width: 1.2;
|
|
}
|
|
|
|
/* 암 경계선(설계선 복사 + 오프셋): 리핑암·발파암 구간 점선 */
|
|
.b06-chart__rock-boundary {
|
|
fill: none;
|
|
stroke: var(--color-warning);
|
|
stroke-width: 1.6;
|
|
stroke-dasharray: 6 4;
|
|
stroke-linejoin: round;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* 포장층 박스: 노면 양 끝점 기준 두께만큼 하향 채움 */
|
|
.b06-chart__pavement {
|
|
fill: color-mix(in srgb, var(--color-text-secondary) 30%, transparent);
|
|
stroke: var(--color-text-secondary);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
/* 배수관 세트(2026-08-19): 배관·기슭막이·돌붙임 — 분리 도형 3종 + 집수정 라벨 */
|
|
/* 관은 실무 도면처럼 점선 윤곽 2줄 느낌 — 채움은 식별용으로만 아주 옅게. */
|
|
.b06-chart__culvert-pipe {
|
|
fill: color-mix(in srgb, #4f8ef7 10%, transparent); /* B05 배수관 레지스트리 색 계열 */
|
|
stroke: #4f8ef7;
|
|
stroke-width: 1.4;
|
|
stroke-dasharray: 6 3;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
/* 관 외경선 — 관벽 두께만큼 바깥. 채움 없이 윤곽만(내경선과 두 줄로 보인다). */
|
|
.b06-chart__culvert-pipe--outer {
|
|
fill: none;
|
|
stroke-dasharray: none;
|
|
stroke-width: 1.1;
|
|
}
|
|
|
|
.b06-chart__culvert-revet {
|
|
fill: color-mix(in srgb, #8a7a5c 35%, transparent); /* 돌쌓기 석재 계열 */
|
|
stroke: #6f6248;
|
|
stroke-width: 1.2;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.b06-chart__culvert-apron {
|
|
fill: color-mix(in srgb, var(--color-text-secondary) 22%, transparent);
|
|
stroke: var(--color-text-secondary);
|
|
stroke-width: 1;
|
|
stroke-dasharray: 3 2; /* 지반 아래 매설부 — 점선으로 구분 */
|
|
}
|
|
|
|
.b06-chart__culvert-label {
|
|
font-size: 9px;
|
|
font-weight: var(--font-weight-medium);
|
|
fill: var(--color-text-secondary);
|
|
}
|
|
|
|
/* 유입 보호공 공간 확보 절토선 — 말단에서 표준단면 절토경사로 지반까지 */
|
|
.b06-chart__culvert-cut {
|
|
stroke: var(--color-warning);
|
|
stroke-width: 1.4;
|
|
stroke-dasharray: 5 3;
|
|
}
|
|
|
|
/* 기슭막이 돌 해칭 — 기운 띠 안에 한 줄로 쌓인 큰 돌(실무 도면 형상) */
|
|
.b06-chart__culvert-stone {
|
|
fill: none;
|
|
stroke: #6f6248;
|
|
stroke-width: 1;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* 유입 집수정(ㄴ형) — 절토측 또는 원지반 30% 폐색 시 자동 반영되는 박스 단면 */
|
|
.b06-chart__culvert-basin {
|
|
fill: color-mix(in srgb, #8a7a5c 32%, transparent);
|
|
stroke: #6f6248;
|
|
stroke-width: 1.2;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
/* 유출부 돌붙임 — 성토사면을 따라 원지반까지 덮는 돌붙임 띠(실무 도면의 돌 연쇄) */
|
|
.b06-chart__culvert-pitching {
|
|
fill: color-mix(in srgb, #3fa34d 18%, transparent);
|
|
stroke: #3fa34d;
|
|
stroke-width: 1.2;
|
|
stroke-dasharray: 4 2;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
/* 암 경계선 상/하/리셋 제어 (B05 측점 선 제어 ▲/▼/↺ 버튼 패턴 재활용) */
|
|
.b06-design__rockb-btn {
|
|
width: 22px;
|
|
height: 22px;
|
|
padding: 0;
|
|
font-size: 0.7rem;
|
|
line-height: 1;
|
|
color: var(--color-text-secondary);
|
|
background: var(--color-surface);
|
|
border: none;
|
|
border-left: 1px solid var(--color-border);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.b06-design__rockb-btn:first-child {
|
|
border-left: none;
|
|
}
|
|
|
|
.b06-design__rockb-btn:hover {
|
|
color: var(--color-text);
|
|
background: var(--color-surface-raised);
|
|
}
|
|
|
|
.b06-design__rockb-btn.is-reset {
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
.b06-design__rockb-readout {
|
|
padding: 0 var(--spacing-8);
|
|
font-size: 0.72rem;
|
|
font-family: var(--font-mono);
|
|
color: var(--color-warning);
|
|
align-self: center;
|
|
}
|
|
|
|
/* 포장 제안 배지: B05 법정 경사 분석이 포장을 권장한 측점 표시 */
|
|
.b06-design__paved-badge {
|
|
font-size: 0.72rem;
|
|
color: var(--color-warning);
|
|
cursor: help;
|
|
}
|