eomsangdonandClaude Opus 5
6c90c26eef
절·성토 균형은 종단 시공계획고로 정해지고 사토장 위치도 계획고를 다시 끌어야 정리되므로, 계획용 유토곡선과 부지 선정을 B05로 옮겼다. B06은 실측 단면적으로 낸 정식 곡선과 확정·B08 인계를 맡는다. B05 계획 유토곡선 - _UI_Profile_MassHaul.ts: 종단면 패널 안 2차 하단 슬라이드. 펼치면 12행 도면 테이블 자리를 곡선이 대신 차지한다. 곡선 SVG를 종단 그래프와 같은 가로 스크롤러 안 형제로 넣고 MassHaulAxis에 LONG_PAD + originOffset을 넘겨 X축을 종단 chainageMapper와 일치시켰다. - computeLongitudinalMassHaul(): 횡단 설계가 없는 계획 단계용 개략 엔진. 표준횡단 노반폭을 전 구간 공통으로 물린다. 종단 기반 토량은 국내 기준상 노선계획 개산용 이므로(2026-08-03 조사) 표준단면까지 씌워 정밀화하지 않는다. 사토장·토취장 자동 선정 - B05_wf2_Route_Engine_Disposal.py + POST /route/disposal-sites: 노선 corridor DEM 격자를 훑어 후보 부지를 추리고 옵션별 점수로 정렬한다. 기준 4가지 — 비용(최단거리+하향 운반), 지형안정성(완경사·계곡 이격), 계곡부(계곡 축 매립), 임내 공간(라이다 수고 기반 공터). 기준값 정의처는 DISPOSAL_SITE_CRITERIA. - _UI_Profile_Disposal.ts: 범례 줄의 [토량 분배]와 [도형 위치 초기화] 사이에 구분기호와 함께 라디오 토글 4개. 부지 카드에 위치·용량·운반거리와 기준별 근거값, 측점·용량 사용자 정의 편집과 복원. 후보 부족으로 남은 토량은 경고로 알린다. - 확정 시 종단 정본의 disposal_sites에 심는다(기준 미선택이면 저장분 삭제). B06 연동 - common_util_mass_haul_sites.ts: 저장된 부지를 정식 곡선의 잔량 위치 기준으로 운반거리를 다시 재 표시하고 mass_haul.disposal_sites로 B08에 넘긴다. 미구현(계획서에 남김): 토취장 토질 판정(지반유형이 B06 산출물), 계곡부 암거 연장. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
370 lines
12 KiB
CSS
370 lines
12 KiB
CSS
/* =============================================================================
|
|
* B06_wf3_ProfileCross_UI_Style_MassHaul.css
|
|
* 유토곡선(Mass Haul Diagram) 스타일 — 곡선·오버레이 범례·요약줄.
|
|
* 700줄 제한 대응으로 _UI_Style_Cross.css에서 분리(종·횡단 도면 본체는 원본 유지).
|
|
*
|
|
* 곡선이 여러 개라 읽는 규칙을 둘로 나눈다:
|
|
* 색 = 산출 기준 (횡단 = 브랜드 보라 / 종단 = 성공색 초록)
|
|
* 선모양 = 환산 방식 (실선 = 지반유형별 / 파선 = 토사 단일 / 점선 = 환산 없음)
|
|
* 색상은 theme.css 변수만 쓴다. 횡단 기준의 보라는 참고 도면의 자주색에 대응한다.
|
|
* ========================================================================== */
|
|
|
|
/* 범례는 유토곡선 **우측 상단에 겹친다**. 단 가로 스크롤 컨테이너 **밖**에서 절대 위치로
|
|
띄운다 — 안에 넣으면 컨테이너 폭 계산에 끼어들어 종단면도와 측점 세로선이 어긋난다.
|
|
세로 위치(top)는 종단면도 높이에 맞춰 렌더러가 인라인으로 넣는다. */
|
|
.b06-masshaul__legend {
|
|
position: absolute;
|
|
right: var(--spacing-8);
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.b06-masshaul__legend-item {
|
|
display: inline-flex;
|
|
flex: none;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
padding: var(--spacing-4) var(--spacing-8);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-pills);
|
|
background: var(--color-surface-raised);
|
|
color: var(--color-text-body);
|
|
font-size: var(--text-caption);
|
|
line-height: 1.2;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 도형 위치 초기화 — 곡선 토글이 아니라 동작 버튼이라 스와치를 두지 않는다. */
|
|
.b06-masshaul__legend-item--reset {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.b06-masshaul__legend-item.is-off {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* 스와치는 곡선을 그대로 축소한 것 — 색과 선모양이 그래프와 같아야 범례 구실을 한다. */
|
|
.b06-masshaul__legend-swatch {
|
|
width: 18px;
|
|
height: 0;
|
|
border-top: 2px solid var(--color-royal-amethyst);
|
|
}
|
|
|
|
.b06-masshaul__legend-item--longitudinal .b06-masshaul__legend-swatch {
|
|
border-top-color: var(--color-success);
|
|
}
|
|
|
|
.b06-masshaul__legend-item--soil_only .b06-masshaul__legend-swatch {
|
|
border-top-style: dashed;
|
|
}
|
|
|
|
.b06-masshaul__legend-item--natural .b06-masshaul__legend-swatch {
|
|
border-top-style: dotted;
|
|
}
|
|
|
|
.b06-masshaul__legend-item.is-off .b06-masshaul__legend-swatch {
|
|
border-top-color: var(--color-smoke);
|
|
}
|
|
|
|
.b06-masshaul__curve {
|
|
fill: none;
|
|
stroke: var(--color-royal-amethyst);
|
|
stroke-width: 2;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.b06-masshaul__curve--longitudinal {
|
|
stroke: var(--color-success);
|
|
}
|
|
|
|
/* 곡선과 0선 사이 — 절토 우세/성토 우세 구간을 한눈에 가르는 옅은 면.
|
|
여러 곡선에 겹쳐 칠하면 서로 가리므로 렌더러가 맨 앞 곡선 하나에만 붙인다. */
|
|
.b06-masshaul__band {
|
|
fill: var(--color-royal-amethyst);
|
|
opacity: 0.12;
|
|
stroke: none;
|
|
}
|
|
|
|
.b06-masshaul__band--longitudinal {
|
|
fill: var(--color-success);
|
|
}
|
|
|
|
/* 0선: 절토 우세와 성토 우세의 경계라 격자보다 진하게. 어떤 노선에서도 반드시 보인다.
|
|
**실선**이다(2026-08-02 사용자 지시) — 도면에서 파선은 장비 경계현의 몫이라,
|
|
0선까지 파선이면 둘이 구분되지 않는다. */
|
|
.b06-masshaul__zero {
|
|
stroke: var(--color-text-secondary);
|
|
stroke-width: 1.2;
|
|
}
|
|
|
|
.b06-masshaul__zero-tick {
|
|
fill: var(--color-text-secondary);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
/* 그래프 이름표 배경 — 이름이 곡선 위에 놓이므로 불투명하게 깐다. */
|
|
.b06-masshaul__name-plate {
|
|
fill: var(--color-surface);
|
|
stroke: none;
|
|
}
|
|
|
|
.b06-masshaul__summary {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--spacing-8) var(--spacing-16);
|
|
padding: var(--spacing-8) var(--spacing-16);
|
|
border-top: 1px solid var(--color-border);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-caption);
|
|
}
|
|
|
|
.b06-masshaul__chip {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b06-masshaul__chip em {
|
|
font-style: normal;
|
|
}
|
|
|
|
.b06-masshaul__chip strong {
|
|
color: var(--color-text-body);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* 요약 수치가 어느 곡선의 것인지 밝히는 꼬리표. */
|
|
.b06-masshaul__basis {
|
|
margin-inline-start: auto;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* 선택 측점이 곡선의 어디인지 찍는 점 — 말풍선과 시선을 잇는다. */
|
|
.b06-masshaul__focus {
|
|
fill: var(--color-royal-amethyst);
|
|
stroke: var(--color-surface);
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
/* 선택 측점 구간 물량 말풍선. 렌더러가 곡선이 지나지 않는 자리를 골라 놓지만, 배치가
|
|
빡빡한 화면에서도 곡선이 비쳐 보이도록 배경을 완전 불투명으로 두지 않는다. */
|
|
.b06-masshaul__callout > rect {
|
|
fill: color-mix(in srgb, var(--color-surface-raised) 94%, transparent);
|
|
stroke: var(--color-royal-amethyst);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.b06-masshaul__callout-tail {
|
|
fill: color-mix(in srgb, var(--color-surface-raised) 94%, transparent);
|
|
stroke: var(--color-royal-amethyst);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.b06-masshaul__callout-leader {
|
|
stroke: var(--color-royal-amethyst);
|
|
stroke-width: 1;
|
|
stroke-dasharray: 3 2;
|
|
}
|
|
|
|
.b06-masshaul__callout-text {
|
|
fill: var(--color-text-body);
|
|
font-size: 11px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* =============================================================================
|
|
* 토량 분배(평형선) 레이어
|
|
*
|
|
* 곡선(보라)과 구분되도록 계열을 통째로 바꾼다: 평형선·운반 표시는 경고색(황토),
|
|
* 사토는 위험색, 토취는 성공색. 곡선 위에 겹치므로 선을 얇게 두고 balloon만 불투명하다.
|
|
* ========================================================================== */
|
|
|
|
/* 평형선(기선) — 블록마다 수평. **실선**이 기선의 표식이다(도면 A–A′). */
|
|
.b06-balance__line {
|
|
stroke: var(--color-warning);
|
|
stroke-width: 1.6;
|
|
}
|
|
|
|
/* 장비 경계현 — 그 현의 길이가 장비 경계거리와 같아지는 높이(도면 B–B′ / C–C′).
|
|
기선과 구분되도록 **파선**으로 둔다. 선타입이 곧 의미다. */
|
|
.b06-balance__chord {
|
|
stroke: var(--color-warning);
|
|
stroke-width: 1.2;
|
|
stroke-dasharray: 6 4;
|
|
}
|
|
|
|
/* 장비 띠 면 — 평소엔 클릭 대상으로만 남고, 눌렀을 때만 옅게 칠해진다. */
|
|
.b06-balance__band-face {
|
|
fill: transparent;
|
|
stroke: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.b06-balance__band.is-active > .b06-balance__band-face {
|
|
fill: color-mix(in srgb, var(--color-warning) 22%, transparent);
|
|
}
|
|
|
|
/* balloon은 끌어 옮길 수 있다(더블클릭이면 자동 배치로 복귀) — 커서로 그 사실을 알린다. */
|
|
.b06-balance__balloon {
|
|
cursor: move;
|
|
}
|
|
|
|
.b06-balance__balloon.is-dragging {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.b06-balance__balloon.is-dragging > .b06-balance__balloon-shape {
|
|
stroke-width: 2;
|
|
}
|
|
|
|
/* 눌린 띠의 balloon은 테두리를 굵혀 어느 띠의 값인지 바로 짚이게 한다. */
|
|
.b06-balance__balloon.is-active > .b06-balance__balloon-shape {
|
|
fill: color-mix(in srgb, var(--color-warning) 20%, var(--color-surface-raised));
|
|
stroke-width: 2;
|
|
}
|
|
|
|
/* 계단의 수직 연결선 — 사토·토취가 나는 자리라 파선으로 "옮겨 갔음"을 드러낸다. */
|
|
.b06-balance__riser {
|
|
stroke: var(--color-warning);
|
|
stroke-width: 1.2;
|
|
stroke-dasharray: 3 2;
|
|
}
|
|
|
|
/* 평균운반거리 = 띠 중간 높이의 현. 경계현(파선)과 헷갈리지 않게 **점선**으로 가늘게.
|
|
화살촉이 운반 방향이다(산 = 좌→우, 골 = 우→좌). */
|
|
.b06-balance__haul {
|
|
stroke: var(--color-warning);
|
|
stroke-width: 1;
|
|
stroke-dasharray: 2 3;
|
|
}
|
|
|
|
.b06-balance__haul-arrow {
|
|
fill: var(--color-warning);
|
|
stroke: none;
|
|
}
|
|
|
|
.b06-balance__leader {
|
|
stroke: var(--color-warning);
|
|
stroke-width: 1;
|
|
stroke-dasharray: 3 2;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* balloon 도형 = 운반수단(종무대 육각 / 도쟈 원 / 덤프 사각). 곡선 위에 놓이므로
|
|
배경을 거의 불투명하게 깐다. 도형별로 색을 나누지 않는다 — 모양이 이미 구분자다. */
|
|
.b06-balance__balloon-shape {
|
|
fill: color-mix(in srgb, var(--color-surface-raised) 94%, transparent);
|
|
stroke: var(--color-warning);
|
|
stroke-width: 1.2;
|
|
}
|
|
|
|
.b06-balance__balloon-text {
|
|
fill: var(--color-text-body);
|
|
font-size: 9px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* 장거리 운반선 — 한 산의 현이 아니라 떨어진 두 지역을 잇는 선이라 **1점쇄선**으로 구분한다
|
|
(기선 실선 / 경계현 파선 / 평균운반거리 점선과 겹치지 않는 네 번째 선타입). */
|
|
.b06-balance__transfer-line {
|
|
stroke: var(--color-accent);
|
|
stroke-width: 1.4;
|
|
stroke-dasharray: 9 3 2 3;
|
|
}
|
|
|
|
.b06-balance__transfer-head {
|
|
fill: var(--color-accent);
|
|
stroke: none;
|
|
}
|
|
|
|
.b06-balance__transfer-text {
|
|
fill: var(--color-accent);
|
|
font-size: 9px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* 사토·토취 단차. 남는 흙(사토)과 모자란 흙(토취)을 색으로 갈라 둔다. */
|
|
.b06-balance__step-arrow {
|
|
stroke-width: 1.4;
|
|
}
|
|
|
|
/* 색은 **선에는 stroke, 글자에는 fill**로만 준다 — 글자의 stroke는 아래 가독성 테두리
|
|
전용이라, 여기서 함께 칠하면 글자가 제 색으로 굵게 번진다. */
|
|
.b06-balance__residual--spoil .b06-balance__step-arrow {
|
|
stroke: var(--color-danger);
|
|
}
|
|
|
|
.b06-balance__residual--spoil .b06-balance__residual-text {
|
|
fill: var(--color-danger);
|
|
}
|
|
|
|
/* 토취는 **주황**이다(2026-08-02 사용자 확정: D안). 초록은 "정상"으로 읽혀,
|
|
흙이 모자라 사와야 한다는 경고 성격과 맞지 않았다. */
|
|
.b06-balance__residual--borrow .b06-balance__step-arrow {
|
|
stroke: var(--color-chart-2);
|
|
}
|
|
|
|
.b06-balance__residual--borrow .b06-balance__residual-text {
|
|
fill: var(--color-chart-2);
|
|
}
|
|
|
|
.b06-balance__residual--spoil .b06-balance__step-head {
|
|
fill: var(--color-danger);
|
|
stroke: none;
|
|
}
|
|
|
|
.b06-balance__residual--borrow .b06-balance__step-head {
|
|
fill: var(--color-chart-2);
|
|
stroke: none;
|
|
}
|
|
|
|
/* 사토·토취 라벨도 balloon과 같이 끌어 옮길 수 있다(도형은 두르지 않고 언더바만).
|
|
도형 배경이 없으므로 글자에 표면색 테두리를 둘러 곡선 위에서도 읽히게 한다. */
|
|
.b06-balance__residual.b06-balance__balloon {
|
|
cursor: move;
|
|
}
|
|
|
|
.b06-balance__residual-text {
|
|
paint-order: stroke;
|
|
stroke: var(--color-surface-raised);
|
|
stroke-width: 3;
|
|
stroke-linejoin: round;
|
|
font-size: 9px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* 사토·토취는 도형 없이 언더바만 두른다(2026-08-02 사용자 지시). */
|
|
.b06-balance__residual--spoil .b06-balance__residual-underline {
|
|
stroke: var(--color-danger);
|
|
stroke-width: 1.2;
|
|
}
|
|
|
|
.b06-balance__residual--borrow .b06-balance__residual-underline {
|
|
stroke: var(--color-chart-2);
|
|
stroke-width: 1.2;
|
|
}
|
|
|
|
/* 범례에서 분배 레이어는 곡선이 아니라 평형선 계열임을 스와치로 알린다. */
|
|
.b06-masshaul__legend-item--balance .b06-masshaul__legend-swatch {
|
|
border-top-color: var(--color-warning);
|
|
border-top-style: dashed;
|
|
}
|
|
|
|
/* 범례 줄 안에서 컨트롤 묶음을 가르는 세로 구분기호(사토장·토취장 토글 양옆). */
|
|
.b06-masshaul__legend-divider {
|
|
width: 1px;
|
|
height: 16px;
|
|
flex: none;
|
|
background: var(--color-border);
|
|
}
|
|
|
|
/* 사토장·토취장 줄 — 요약 줄과 같은 양식이되 위 줄과 이어 붙은 것으로 읽히게 경계를 지운다. */
|
|
.b06-masshaul__summary--sites {
|
|
border-top: none;
|
|
padding-top: 0;
|
|
}
|