eomsangdonandClaude Opus 5
cd8d14f105
기슭막이 범위(길이·기준측점 전/후)를 B06 횡단도 조정창에서 지정하게 하고, 그 범위가 덮는 옆 측점의 기슭막이를 "연동" 파생물로 다루도록 체계를 세웠다. 값의 원천은 배수관 옵션(pipe_points) 하나다 — 같은 숫자를 B06 정본에 따로 담으면 B05 배수관 카드와 갈려 어느 쪽이 참인지 알 수 없다. ① 집수정 전/후 필드 신설 — inlet_basin_before_m·after_m(기본 각 1m), 길이 2m 유지. 종방향 구간 계산을 revetSpanOfSpec·basinSpanOfSpec 한 곳으로 모아 2D 링크 판정과 3D 스윕이 같은 값을 쓰게 했다. ② B06 조정창에 길이·전·후 행 — 기슭막이(유입·유출)·집수정 모두. 캐시를 고쳐 즉시 보여주고 저장은 조작이 멎으면 한 번만 나간다(세부유역 재계산이 매번 돌지 않게). 길이를 바꾸면 늘어난 몫만 지금 비율대로 나눠 담는다 — 총길이에서 비율로 다시 계산하면 0.1m 반올림이 쌓여 5.0/5.0이 5.6/5.4로 어긋난다. ③ 링크 카드 선택 허용 — "소유 측점 통째 복사"에서 "위치 4축만 물려받고 원지반 접합은 이 측점 지형으로 재계산"으로 바꿨다. 구조물 형식은 언제나 소유 측점 값이다. 손대기 전에도 어긋나지 않게 소유 측점이 실제로 적용한 4축(revetShift)을 명시값으로 물려준다. ④ 연동(측점별)·경사(전체 공통) 토글 — 연동 조작은 소유 측점 키에 실리고 그 연장이 덮는 측점을 함께 다시 그린다. 경사는 3D 전용 스위치다(끄면 스윕 프레임 dz=0). 횡단도까지 -dz로 밀면 노견에서 출발하는 성토선까지 내려가 노견과 벌어진다. ⑤ 가림 구간 선 정리 — 유입부 접속선과 유출부 접지 후 절토선을 2D·3D 모두에서 빼되 기하는 남긴다. 면적·수량 계산은 건드리지 않았다(전면 개편 대상). ⑥ 집수정은 소유 측점 횡단도 하나에만 — 링크 카드에서 집수정·계류측 다단을 뺀다. ⑦ 3D 구간 겹침 정리 — 측점 간격이 구조물 연장보다 좁으면 두 구간 제어점이 번갈아 서서 짧은 쪽(집수정 2m)이 잘려 보였다. 두 소유 측점의 중간에서 끊는다. ⑧ 조정창 정리 — 십자·9키를 맨 아래로, 창을 위쪽 기준 오버레이로(낮은 횡단도에서 제목이 잘리던 문제), 연동·경사를 1행 토글 버튼으로, 스크롤 자리 유지. 파일 분리: B06_Section_UI_Cross_View_Structure.ts(조정창 배선), B06_Section_Api_Culvert_Options.ts(구간값 저장) — 700줄 제한. BUILD_VERSION 14 → 17(저장 코리도 만료). tsc/ruff/prettier 통과, pytest 196 passed(기존 실패 1건 유지). 작업이력·자체검증 기록: docs/raw/PLAN.md §4-9. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
230 lines
5.3 KiB
CSS
230 lines
5.3 KiB
CSS
/* 구조물 위치 조정 오버레이 창. */
|
||
/* 구조물 조정 오버레이 — **위쪽 기준**으로 붙인다(2026-08-24 사용자). 아래를 기준으로
|
||
* 두면 높이가 낮은 횡단도에서 창이 카드 위로 넘쳐 **제목·값 줄이 잘린다**. 카드 안에
|
||
* 넘칠 만큼 길어지면 창 안에서 스크롤한다. z-index는 카드 안 오버레이 중 최상단. */
|
||
.b06-structure-panel {
|
||
position: absolute;
|
||
top: var(--spacing-8);
|
||
left: var(--spacing-8);
|
||
z-index: 20;
|
||
display: flex;
|
||
max-height: calc(100% - 2 * var(--spacing-8));
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
padding: var(--spacing-8);
|
||
border: 1px solid var(--color-danger);
|
||
border-radius: var(--radius-inputs);
|
||
background: color-mix(in srgb, var(--color-surface-raised) 94%, transparent);
|
||
overflow-y: auto;
|
||
overscroll-behavior: contain;
|
||
}
|
||
|
||
/* 연동·경사 — 한 행에 버튼 두 개(2026-08-24 사용자). 켜짐은 채운 색으로 구분한다. */
|
||
.b06-structure-panel__controls.b06-structure-panel__toggles {
|
||
display: flex;
|
||
gap: 2px;
|
||
}
|
||
|
||
.b06-structure-panel__toggle {
|
||
width: auto;
|
||
padding: 0 var(--spacing-8);
|
||
}
|
||
|
||
.b06-structure-panel__toggle.is-on {
|
||
border-color: var(--color-danger);
|
||
background: var(--color-danger);
|
||
color: var(--color-text-inverse, #fff);
|
||
}
|
||
|
||
.b06-structure-panel.is-hidden,
|
||
.b06-structure-panel__value span.is-hidden,
|
||
.b06-structure-panel__btn.is-hidden,
|
||
.b06-structure-panel__buttons.is-hidden,
|
||
.b06-structure-panel__struct.is-hidden {
|
||
display: none;
|
||
}
|
||
|
||
.b06-structure-panel__head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-8);
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.b06-structure-panel__title {
|
||
color: var(--color-danger);
|
||
font-size: var(--text-caption);
|
||
font-weight: var(--font-weight-medium);
|
||
}
|
||
|
||
.b06-structure-panel__value {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1px;
|
||
color: var(--color-text-secondary);
|
||
font-size: var(--text-caption);
|
||
}
|
||
|
||
.b06-structure-panel__controls.b06-structure-panel__buttons {
|
||
display: grid;
|
||
grid-template-areas: ". up ." "left reset right" ". down equal";
|
||
justify-content: center;
|
||
gap: 2px;
|
||
}
|
||
|
||
.b06-structure-panel__btn--up {
|
||
grid-area: up;
|
||
}
|
||
.b06-structure-panel__btn--down {
|
||
grid-area: down;
|
||
}
|
||
.b06-structure-panel__btn--left {
|
||
grid-area: left;
|
||
}
|
||
.b06-structure-panel__btn--right {
|
||
grid-area: right;
|
||
}
|
||
.b06-structure-panel__btn--reset {
|
||
grid-area: reset;
|
||
}
|
||
.b06-structure-panel__btn--equal {
|
||
grid-area: equal;
|
||
}
|
||
|
||
.b06-structure-panel__controls .b06-structure-panel__btn {
|
||
box-sizing: border-box;
|
||
width: 26px;
|
||
height: 22px;
|
||
padding: 0;
|
||
text-align: center;
|
||
line-height: 1;
|
||
}
|
||
|
||
.b06-structure-panel__hval {
|
||
box-sizing: border-box;
|
||
width: 3.5em;
|
||
text-align: center;
|
||
color: var(--color-text-body);
|
||
font-size: var(--text-caption);
|
||
align-self: center;
|
||
}
|
||
|
||
.b06-structure-panel__struct {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 2px;
|
||
color: var(--color-text-secondary);
|
||
font-size: var(--text-caption);
|
||
}
|
||
|
||
.b06-structure-panel__label {
|
||
color: var(--color-text-muted);
|
||
font-size: var(--text-caption);
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.b06-structure-panel__controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
}
|
||
|
||
/* 집수정 조작 = 9키(3×3, 2026-08-22 사용자) — 십자 축 이동 · 모서리 크기 · 중앙 초기화.
|
||
기슭막이 십자와 같은 폭·버튼 크기로 맞춰 행열이 어긋나지 않게 한다. */
|
||
.b06-structure-panel__controls.b06-structure-panel__basin-buttons {
|
||
display: grid;
|
||
grid-template-areas:
|
||
"nw up ne"
|
||
"left reset right"
|
||
"sw down se";
|
||
justify-content: center;
|
||
gap: 2px;
|
||
}
|
||
|
||
.b06-structure-panel__btn--nw {
|
||
grid-area: nw;
|
||
}
|
||
|
||
.b06-structure-panel__btn--ne {
|
||
grid-area: ne;
|
||
}
|
||
|
||
.b06-structure-panel__btn--sw {
|
||
grid-area: sw;
|
||
}
|
||
|
||
.b06-structure-panel__btn--se {
|
||
grid-area: se;
|
||
}
|
||
|
||
.b06-structure-panel__basin-reset {
|
||
margin-left: auto;
|
||
}
|
||
|
||
.b06-structure-panel__select {
|
||
flex: 1;
|
||
padding: 1px var(--spacing-4);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-inputs);
|
||
background: var(--color-surface);
|
||
color: var(--color-text);
|
||
font-size: var(--text-caption);
|
||
}
|
||
|
||
.b06-structure-panel__btn {
|
||
padding: 0 var(--spacing-8);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-inputs);
|
||
background: var(--color-surface);
|
||
color: var(--color-text-secondary);
|
||
cursor: pointer;
|
||
font-size: var(--text-caption);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.b06-structure-panel__btn:hover {
|
||
border-color: var(--color-danger);
|
||
color: var(--color-danger);
|
||
}
|
||
|
||
.b06-structure-panel__close {
|
||
padding: 0 4px;
|
||
border-color: transparent;
|
||
background: transparent;
|
||
}
|
||
|
||
.b06-cross-card__zoom {
|
||
position: absolute;
|
||
top: var(--spacing-4);
|
||
right: var(--spacing-4);
|
||
z-index: 2;
|
||
display: flex;
|
||
overflow: hidden;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-inputs);
|
||
background: color-mix(in srgb, var(--color-surface-raised) 88%, transparent);
|
||
}
|
||
|
||
.b06-cross-card__zoom-btn {
|
||
width: 22px;
|
||
height: 22px;
|
||
padding: 0;
|
||
border: none;
|
||
border-left: 1px solid var(--color-border);
|
||
background: none;
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.8rem;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.b06-cross-card__zoom-btn:first-child {
|
||
border-left: none;
|
||
}
|
||
|
||
.b06-cross-card__zoom-btn:hover {
|
||
color: var(--color-text);
|
||
background: var(--color-surface);
|
||
}
|