diff --git a/B06_Section/B06_Section_UI_Cross_View_Zoom.ts b/B06_Section/B06_Section_UI_Cross_View_Zoom.ts index ad1da03a..8d18cd1d 100644 --- a/B06_Section/B06_Section_UI_Cross_View_Zoom.ts +++ b/B06_Section/B06_Section_UI_Cross_View_Zoom.ts @@ -92,16 +92,18 @@ export function attachZoomPan( Math.max(start + size - scale * to, start - scale * from), ); const clampPan = (): void => { - // 원배율이거나 도형 범위를 모르면 플롯 영역 자신이 한계다(기존 규칙). - const bounds = - content && scale > 1 + 1e-6 - ? { - x: Math.min(content.x, plot.x), - y: Math.min(content.y, plot.y), - right: Math.max(content.x + content.width, plot.x + plot.width), - bottom: Math.max(content.y + content.height, plot.y + plot.height), - } - : { x: plot.x, y: plot.y, right: plot.x + plot.width, bottom: plot.y + plot.height }; + // 도형 범위를 모르면 플롯 영역 자신이 한계다(기존 규칙). 알면 **원배율에서도** 그 + // 범위까지 열어 둔다 — 캐시 보유분이 표시 반폭보다 넓으면 1배에서도 끌어다 봐야 한다 + // (2026-08-23 사용자 재보고: 확대해야만 움직이는 줄 모르고 안 된다고 판단). + // 캐시가 표시 폭과 같으면 범위가 플롯과 같아져 종전처럼 이동량 0으로 묶인다. + const bounds = content + ? { + x: Math.min(content.x, plot.x), + y: Math.min(content.y, plot.y), + right: Math.max(content.x + content.width, plot.x + plot.width), + bottom: Math.max(content.y + content.height, plot.y + plot.height), + } + : { x: plot.x, y: plot.y, right: plot.x + plot.width, bottom: plot.y + plot.height }; tx = clampAxis(tx, plot.x, plot.width, bounds.x, bounds.right); ty = clampAxis(ty, plot.y, plot.height, bounds.y, bounds.bottom); }; diff --git a/B06_Section/B06_Section_UI_Style_Cross_Areas.css b/B06_Section/B06_Section_UI_Style_Cross_Areas.css index 07e11f77..d5e3c76b 100644 --- a/B06_Section/B06_Section_UI_Style_Cross_Areas.css +++ b/B06_Section/B06_Section_UI_Style_Cross_Areas.css @@ -7,13 +7,15 @@ * 그 위에 얹는 면적 표기 계열을 갈랐다. 색은 모두 theme.css 토큰만 쓴다. * ========================================================================== */ -/* 절·성토 면적 오버레이(E-4) — 그래프 중상단, 배경색으로 그래프 선과 겹쳐도 가독. - 절토/성토 × EA·RR·BR·계 표라서 칩을 늘어놓을 때보다 가로 폭을 덜 먹는다. */ +/* 절·성토 면적 오버레이(E-4) — 그래프 **좌측 상단**(축선 바로 안쪽), 배경색으로 그래프 + 선과 겹쳐도 가독. 절토/성토 × EA·RR·BR·계 표라서 칩을 늘어놓을 때보다 가로 폭을 덜 먹는다. + 가운데(left:50%)에 두던 것을 좌측으로만 옮겼다 — 세로 자리는 그대로(2026-08-23 사용자 지시). + 58px = CROSS_PAD.left(Y축 눈금 띠 폭) — 표가 플롯 왼쪽 끝에 맞춰 선다. */ .b06-cross-card__areas { position: absolute; top: var(--spacing-8); - left: 50%; - transform: translateX(-50%); + left: 58px; + transform: none; padding: 2px 6px; border-radius: var(--radius-inputs); background: color-mix(in srgb, var(--color-surface) 88%, transparent);