fix(B05): 측점 하이라이트가 표 값을 가리던 문제 + 계획고 추가 강조 제거
하이라이트 열이 덮는 자리의 규칙 측점 값 셀을 통째로 숨겨(hideCoveredCells), 비정규 측점을 고를 때마다 좌우 최대 2개 열의 값이 사라졌다. 표는 그대로 두고 선택된 값만 위에 얹도록 그 함수와 .is-covered 규칙을 걷어냈다. 하이라이트 열에서 계획고만 자주색 테두리·글자색으로 따로 강조되던 것도 없앴다. 평상시에는 다른 셀과 같은 모습이고, 고칠 수 있다는 표시는 hover·focus에서만 나타난다. 직접 입력 기능은 그대로다. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -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"));
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user