fix(B06): 유토곡선 패널 리사이저가 잡히지 않던 문제 + 상한·눈금 보정
헤드리스 브라우저로 실화면을 확인하다 드래그가 전혀 먹지 않는 것을 발견했다. 손잡이 중심의 hit-test가 손잡이가 아니라 패널을 돌려주고 있었다. - 손잡이 위치: 패널이 `overflow: hidden`이라 경계에 걸치게 둔 `bottom: -3px`는 아래 절반이 잘려 나가 클릭 영역이 3px도 남지 않았다. `bottom: 0` + 높이 8px로 안쪽에 붙여 전체가 잡히게 했다. - 높이 상한: 부모 `.b06-profile__main`은 횡단 카드까지 담은 스크롤 콘텐츠라 clientHeight가 5809px였고, 상한이 4647px로 잡혀 사실상 무제한이었다. 이 패널은 화면 위에 sticky로 붙으므로 상한을 화면 높이 기준으로 바꿨다. - Y축 눈금: 패널을 줄이면 유토곡선 그래프 몫이 60px대까지 내려가 눈금 5개의 라벨이 서로 겹쳤다. 그래프가 낮을 때는 3개만 그린다. 실화면 검증(프로젝트 테스트1, route 48, 측점 24개 / 설계 23개): - 기본 496px → SVG [220, 190] - 아래로 드래그 694px → SVG [220, 378] (종단도 고정, 유토곡선이 늘어난 몫 흡수) - 위로 드래그 392px → SVG [170, 147] (기본값 대비 비율만큼 둘 다 축소) - 접기 35px / 펼치기 복원 - 종단도와 유토곡선의 첫 측점 x=62, 마지막 측점 x=1454로 세 높이 모두에서 일치 - 요약: 절토(자연) 216.1㎥ (토사 14.9 / 리핑암 201.2 / 발파암 0.0), 절토(다짐환산) 244.8㎥, 성토 321.4㎥, 토취 76.6㎥ → 14.9×0.90 + 201.2×1.15 = 244.79, 244.8 − 321.4 = −76.6 으로 수식과 일치 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -78,7 +78,9 @@ export function createMassHaulChart(
|
||||
const span = Math.max(max - min, 1e-6);
|
||||
const y = (volume: number) => LONG_PAD.top + ((max - volume) / span) * plotHeight;
|
||||
|
||||
for (const ratio of [0, 0.25, 0.5, 0.75, 1]) {
|
||||
// 패널을 줄이면 그래프 몫이 60px대까지 내려간다 — 눈금 5개를 그대로 두면 라벨이 서로 겹친다.
|
||||
const tickRatios = plotHeight < 110 ? [0, 0.5, 1] : [0, 0.25, 0.5, 0.75, 1];
|
||||
for (const ratio of tickRatios) {
|
||||
const gridY = LONG_PAD.top + ratio * plotHeight;
|
||||
const value = max - ratio * span;
|
||||
svg.append(
|
||||
|
||||
@@ -165,7 +165,9 @@ export function createSectionView(
|
||||
// 손잡이가 패널 아래쪽에 있으므로 아래로 끌면 커진다.
|
||||
direction: 1,
|
||||
min: MIN_PANEL_HEIGHT,
|
||||
max: () => (root.parentElement?.clientHeight ?? window.innerHeight) * MAX_PANEL_HEIGHT_RATIO,
|
||||
// 부모(`.b06-profile__main`)는 횡단 카드까지 담은 스크롤 콘텐츠라 높이가 수천 px다.
|
||||
// 이 패널은 화면 위에 sticky로 붙어 있으니 상한은 화면 높이 기준이어야 한다.
|
||||
max: () => window.innerHeight * MAX_PANEL_HEIGHT_RATIO,
|
||||
storageKey: PANEL_HEIGHT_KEY,
|
||||
onResize: () => {
|
||||
// 끄는 동안 매 프레임 SVG를 다시 그리면 손이 늦게 따라온다 — 멈춘 뒤 한 번만 그린다.
|
||||
|
||||
@@ -45,10 +45,13 @@
|
||||
}
|
||||
|
||||
/* 공용 리사이저는 손잡이를 패널 위쪽 경계에 두지만(B05 하단 패널 기준),
|
||||
이 패널은 화면 위에 붙어 있으므로 아래쪽 경계로 옮긴다(아래로 끌면 커짐). */
|
||||
이 패널은 화면 위에 붙어 있으므로 아래쪽 경계로 옮긴다(아래로 끌면 커짐).
|
||||
패널이 `overflow: hidden`이라 경계에 걸치게 두면(bottom: -3px) 손잡이 아래 절반이
|
||||
잘려 나가 잡히지 않는다 — 안쪽에 붙여 전체가 클릭 영역으로 남게 한다. */
|
||||
.b06-section__panel > .ui-resizer--vertical {
|
||||
top: auto;
|
||||
bottom: -3px;
|
||||
bottom: 0;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.b06-section__panel-body {
|
||||
|
||||
Reference in New Issue
Block a user