fix(B05): 측점 하이라이트가 표 값을 가리던 문제 + 계획고 추가 강조 제거

하이라이트 열이 덮는 자리의 규칙 측점 값 셀을 통째로 숨겨(hideCoveredCells),
비정규 측점을 고를 때마다 좌우 최대 2개 열의 값이 사라졌다. 표는 그대로 두고
선택된 값만 위에 얹도록 그 함수와 .is-covered 규칙을 걷어냈다.

하이라이트 열에서 계획고만 자주색 테두리·글자색으로 따로 강조되던 것도 없앴다.
평상시에는 다른 셀과 같은 모습이고, 고칠 수 있다는 표시는 hover·focus에서만
나타난다. 직접 입력 기능은 그대로다.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-02 01:07:14 +09:00
co-authored by Claude Opus 5
parent a0e6289e8f
commit b3ab6028cd
2 changed files with 14 additions and 40 deletions
@@ -505,15 +505,13 @@ export function createProfileTable(options: ProfileTableOptions): HTMLElement {
? alignment.stations.findIndex((row) => row.station_id === options.selectedStationId)
: -1;
if (selectedIrregular) {
const centerX = x(selectedIrregular.chainage_m);
// 비정규 측점은 측점 격자와 무관한 위치라 오버레이가 좌우 이웃 셀을 반씩 덮어 값이 잘려
// 보인다. 겹치는 규칙 측점 셀을 숨겨 하이라이트 창이 깨끗한 자리에 뜨게 한다.
hideCoveredCells(table, centers, centerX, cellWidth);
// 표는 그대로 두고 선택된 값만 위에 얹는다 — 이웃 셀을 숨기면 고를 때마다 표가 비어
// 보인다(2026-08-02 사용자 지시).
table.append(
buildSelectedColumn(
selectedIrregular.chainage_m,
alignment,
centerX,
x(selectedIrregular.chainage_m),
cellWidth,
stationInterval,
display,
@@ -537,27 +535,3 @@ export function createProfileTable(options: ProfileTableOptions): HTMLElement {
}
return table;
}
/**
* 하이라이트 열이 덮는 자리의 규칙 측점 값 셀을 숨긴다.
* 셀과 하이라이트 열 모두 폭 `cellWidth`를 중심 정렬로 쓰므로, 중심 간 거리가 `cellWidth`
* 미만이면 두 사각형이 겹친다. 겹치는 측점은 어차피 값이 잘려 읽을 수 없으므로 통째로 숨긴다.
*/
function hideCoveredCells(
table: HTMLElement,
centers: readonly number[],
columnCenter: number,
cellWidth: number,
): void {
const covered = new Set<number>();
centers.forEach((center, index) => {
if (Math.abs(center - columnCenter) < cellWidth) covered.add(index);
});
if (covered.size === 0) return;
table.querySelectorAll<HTMLElement>(".b05-profile-table__row").forEach((row) => {
const cells = row.querySelectorAll<HTMLElement>(
".b05-profile-table__cell, .b05-profile-table__curve",
);
covered.forEach((index) => cells[index]?.classList.add("is-covered"));
});
}
+11 -11
View File
@@ -749,13 +749,6 @@
0 4px 12px rgb(0 0 0 / 28%);
}
/* 하이라이트 창이 덮은 자리의 규칙 측점 값 셀 — 값이 잘려 읽을 수 없으므로 숨긴다.
자리(레이아웃)는 유지해야 세로 구분선 격자가 끊기지 않으므로 visibility로 감춘다. */
.b05-profile-table__cell.is-covered,
.b05-profile-table__curve.is-covered {
visibility: hidden;
}
.b05-profile-table__irregular-col-cell {
display: flex;
flex: 1 1 0;
@@ -809,16 +802,23 @@
width: 92%;
height: 88%;
padding: 0;
border: 1px solid var(--color-royal-amethyst, rgb(109 40 217));
/* 계획고만 테두리·색으로 따로 강조하지 않는다 — 같은 열의 다른 값과 같아 보여야 한다
(2026-08-02 사용자 지시). 고칠 수 있다는 표시는 커서와 포커스 테두리로 충분하다. */
border: 1px solid transparent;
border-radius: 2px;
background: var(--color-surface);
color: var(--color-royal-amethyst, rgb(109 40 217));
background: transparent;
color: inherit;
font: inherit;
font-weight: var(--font-weight-medium);
text-align: center;
pointer-events: auto;
}
.b05-profile-table__irregular-input:focus,
.b05-profile-table__irregular-input:hover {
border-color: var(--color-royal-amethyst, rgb(109 40 217));
background: var(--color-surface);
}
/* ─── 계획고 편집 버튼 (크기 유지·상시 표시·밝은 글자) ───────────────────── */
.b05-profile-edit {
position: absolute;