From b344ffe60e733878a4a0f91b4e4619c976b1fa9d Mon Sep 17 00:00:00 2001 From: umsangdon Date: Sun, 23 Aug 2026 18:32:06 +0900 Subject: [PATCH] =?UTF-8?q?fix(B06):=20=EC=9B=90=EB=B0=B0=EC=9C=A8?= =?UTF-8?q?=EC=97=90=EC=84=9C=EB=8F=84=20=EC=BA=90=EC=8B=9C=20=EB=B2=94?= =?UTF-8?q?=EC=9C=84=20=ED=8C=AC=20=ED=97=88=EC=9A=A9=20+=20=EB=A9=B4?= =?UTF-8?q?=EC=A0=81=ED=91=9C=20=EC=A2=8C=EC=B8=A1=20=EC=83=81=EB=8B=A8=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 팬 한계를 배율과 무관하게 그려진 범위(캐시 보유분)까지 연다. 확대해야만 움직여 "팬이 안 된다"고 보고됐다(2026-08-23). 캐시가 표시 폭과 같으면 종전처럼 이동 0. - 절·성토 면적표를 그래프 가운데 상단 → **좌측 상단**(축선 안쪽 58px)으로. 세로 자리는 그대로. 화면 검증(공용 브라우저): 원배율 가운데 드래그로 translate 0→100.3px, X 눈금 -10~10 → -5~15로 캐시 구간 노출. 면적표 좌측 오프셋 58px·상단 8px 확인. Co-Authored-By: Claude Opus 5 (1M context) --- B06_Section/B06_Section_UI_Cross_View_Zoom.ts | 22 ++++++++++--------- .../B06_Section_UI_Style_Cross_Areas.css | 10 +++++---- 2 files changed, 18 insertions(+), 14 deletions(-) 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);