perf(B05): 종단 세로 맞춤을 다시 그리기에서 변환으로 — 스크롤 중 실시간
사용자 지시(2026-09-04) — 「화면을 리프레시하는 느낌. 가장 강한 지연은 멈춘 뒤 끊김. 실시간처럼 되려면 근본적으로 표현을 바꿔야 하지 않나」. 확정: 변환 방식. 원인 — 세로 위치가 선 하나하나의 좌표에 박혀 있어, 세로 창이 바뀌면 그래프를 통째로 다시 만들 수밖에 없었음(SVG 요소 457개, 실측 34ms = 60Hz 두 프레임 누락). - 세로에 딸린 도형(눈금선·절성토 음영·지반선·계획선)을 `b06-chart__ywindow` 한 겹으로 묶고, 세로 창을 `translate`+`scale` 한 줄로 표현. 두 창의 대응이 1차식이라 정확히 겹침. - 자를 영역(clip)은 변환 밖, 글자는 변환 밖에서 자리만 옮김(늘어남 방지). 글자 내림 4px 은 변환 뒤에 더함 — 배율과 함께 커지면 선에서 떨어짐(실측 6.4px). - 선 굵기·점선 간격은 `vector-effect: non-scaling-stroke`(변환이 걸렸을 때만 적용해 B06 은 예전 그대로). - 눈금 간격이 어긋나면(배율 0.8~1.25 밖) **눈금층만** 다시 만듦(요소 20개 안팎). 눈금은 그릴 때의 좌표계에 놓아 같은 변환이 그대로 먹음. - 눈금 계산을 `yWindowTickValues` 로 빼 그리는 쪽과 갱신 쪽이 같은 눈금을 씀. - 패널은 스크롤마다 변환 갱신만 부름. 전체 재구성은 눈금으로도 못 살릴 때만 남김. 자체검증(공용 브라우저 임시 탭, 휠 20칸 4,800px): ① 전체 재구성 **0회**(고침 전 다회) ② 최대 프레임 **59.9 → 20.0ms**, 20ms 초과 0건 ③ 눈금 글자와 눈금선 간격 6.4 → **0.5px** ④ 지반선의 한 점을 변환으로 놓은 자리와 눈금이 말하는 자리가 **0.000px** 일치(배율 2.715 상태) ⑤ B06 종단은 변환 겹 3개 모두 변환 없음(항등) — 화면 불변 ⑥ 전체 시험 381 통과·17 건너뜀. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -47,6 +47,7 @@ import {
|
||||
createMassHaulSummary,
|
||||
MASS_HAUL_MIN_HEIGHT,
|
||||
} from "@util/common_util_mass_haul_view";
|
||||
import { Y_WINDOW_BAKED_ATTR } from "../B06_Section/B06_Section_UI_Longitudinal";
|
||||
import { createWorkflowPanelHandle } from "@ui/ui_template_overlay";
|
||||
import { createPanelResizer } from "@ui/ui_template_resizer";
|
||||
import "@util/common_util_mass_haul.css";
|
||||
@@ -102,6 +103,9 @@ export function buildStickyYAxis(
|
||||
const tick = document.createElement("span");
|
||||
tick.className = "b05-profile__yaxis-tick";
|
||||
tick.style.top = `${y}px`;
|
||||
// 종단 그래프의 세로 창 변환이 이 눈금도 같이 옮긴다 — 그릴 때의 y를 남겨 둔다
|
||||
// (`_UI_Profile_YWindow`, 2026-09-04). 유토곡선 축에는 갱신이 오지 않아 무해하다.
|
||||
tick.setAttribute(Y_WINDOW_BAKED_ATTR, String(y));
|
||||
tick.textContent = label;
|
||||
inner.append(tick);
|
||||
});
|
||||
|
||||
@@ -98,6 +98,7 @@ const CROSS_PREVIEW_DEBOUNCE_MS = 60;
|
||||
* 동작하도록 여기서 다시 내보낸다(2026-09-04). */
|
||||
import type { RouteProfilePanelCallbacks } from "./B05_Profile_UI_Profile_Panel_Types";
|
||||
import { attachWheelHorizontalScroll } from "./B05_Profile_UI_Profile_Wheel";
|
||||
import { needsFullRedraw, type ElevationWindowResult } from "./B05_Profile_UI_Profile_YWindow";
|
||||
export type { RouteProfilePanelCallbacks } from "./B05_Profile_UI_Profile_Panel_Types";
|
||||
|
||||
export function createRouteProfilePanel(
|
||||
@@ -342,6 +343,8 @@ export function createRouteProfilePanel(
|
||||
|
||||
/** 세로 자동 맞춤이 지금 쓰는 Y 창. 계획고를 끄는 동안에는 이 값을 붙잡는다. */
|
||||
let elevationWindow: { min: number; max: number } | undefined;
|
||||
/** 세로 창을 **다시 그리지 않고** 옮기는 갱신기 — 그릴 때마다 렌더러가 새로 준다. */
|
||||
let updateElevationWindow: (() => ElevationWindowResult | null) | null = null;
|
||||
/** 계획고 편집 버튼(▲▼)을 누르고 있는 중인가 — 그동안 Y 축을 고정한다. */
|
||||
let heightEditing = false;
|
||||
const holdElevationRange = (
|
||||
@@ -506,19 +509,25 @@ export function createRouteProfilePanel(
|
||||
selectedRuns: () => tools.selectedRuns(),
|
||||
stationIdAtStructure,
|
||||
redraw: draw,
|
||||
setElevationWindowUpdater: (update) => {
|
||||
updateElevationWindow = update;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/** 가로 스크롤이 이만큼 멈춰 있으면 보이는 구간이 정해진 것으로 보고 세로를 다시 맞춘다.
|
||||
* 재구성이 실측 50ms 미만이라 160 → 80ms 로 줄였다 — 멈춘 뒤 따라오는 시간을 반으로
|
||||
* (2026-09-04 사용자 지시: 「응답이 늦게 쫓아온다」). */
|
||||
/** 그래프를 통째로 다시 만들 때까지 기다리는 시간(ms) — 눈금 갱신으로도 못 살릴 때만. */
|
||||
const SCROLL_SETTLE_MS = 80;
|
||||
/** 마지막으로 세로를 맞춘 가로 위치 — 같은 자리면 다시 그리지 않는다(재구성 되먹임 차단). */
|
||||
/** 마지막으로 통째로 다시 만든 가로 위치 — 같은 자리면 다시 그리지 않는다. */
|
||||
let settledScrollLeft = 0;
|
||||
let scrollSettleTimer = 0;
|
||||
// 스크롤하는 내내 축이 출렁이면 어지럽다 — 멈춘 뒤에 한 번만 다시 맞춘다(2026-09-04).
|
||||
// 세로 맞춤은 **그리기가 아니라 변환**이다(2026-09-04 사용자 확정) — 스크롤마다 겹 하나의
|
||||
// 변환만 갈아 끼우므로 실시간으로 따라온다. 눈금 간격이 어긋나면 눈금층(요소 20개 안팎)만
|
||||
// 새로 만든다. 그래프를 통째로 다시 만드는 34ms 짜리 재구성은 그래도 안 될 때만 남는다.
|
||||
body.addEventListener("scroll", () => {
|
||||
if (heightEditing) return;
|
||||
const fitted = updateElevationWindow?.() ?? null;
|
||||
window.clearTimeout(scrollSettleTimer);
|
||||
if (!needsFullRedraw(fitted)) return;
|
||||
scrollSettleTimer = window.setTimeout(() => {
|
||||
if (heightEditing || Math.abs(body.scrollLeft - settledScrollLeft) < 1) return;
|
||||
settledScrollLeft = body.scrollLeft;
|
||||
|
||||
@@ -28,6 +28,7 @@ import {
|
||||
} from "./B05_Profile_UI_Profile_Alignment";
|
||||
import { createEditOverlay } from "./B05_Profile_UI_Profile_Edit";
|
||||
import { createRunHighlight } from "./B05_Profile_UI_Profile_RunHighlight";
|
||||
import { applyElevationWindow, type ElevationWindowResult } from "./B05_Profile_UI_Profile_YWindow";
|
||||
import type { StraightRun } from "./B05_Profile_UI_Profile_Straighten";
|
||||
import type { MinCoverPoint } from "./B05_Profile_UI_Profile_MinCover";
|
||||
import { buildStickyYAxis, type RouteMassHaulDrawParams } from "./B05_Profile_UI_Profile_MassHaul";
|
||||
@@ -104,6 +105,9 @@ export interface ProfileRenderContext {
|
||||
stationIdAtStructure: (structureId: string | null) => string | null;
|
||||
/** 알약을 골랐을 때처럼 그리는 도중 다시 그려야 하는 자리. */
|
||||
redraw: () => void;
|
||||
/** 세로 창을 **다시 그리지 않고** 옮기는 갱신기를 패널에 넘긴다(2026-09-04).
|
||||
* 가로 스크롤마다 이것만 부르면 그래프 재구성(실측 34ms)이 사라진다. */
|
||||
setElevationWindowUpdater: (update: (() => ElevationWindowResult | null) | null) => void;
|
||||
}
|
||||
|
||||
/** 본문을 통째로 다시 그린다. 상세가 없거나 본문이 아직 0크기면 아무것도 하지 않는다. */
|
||||
@@ -323,6 +327,21 @@ export function renderProfile(ctx: ProfileRenderContext): void {
|
||||
},
|
||||
onMove: (structureId, toChainage) => callbacks?.onStructureMarkMove?.(structureId, toChainage),
|
||||
});
|
||||
// 세로 창 갱신기 — 가로로 스크롤할 때마다 패널이 이것을 부른다. 도형은 그대로 두고
|
||||
// 겹 하나의 변환만 갈아 끼우므로 매 프레임 불러도 된다(2026-09-04 사용자 확정).
|
||||
ctx.setElevationWindowUpdater(() => {
|
||||
const from = Math.max(0, toChainage(body.scrollLeft));
|
||||
const to = Math.min(maxChainageM, toChainage(body.scrollLeft + body.clientWidth));
|
||||
const next = ctx.holdElevationRange(
|
||||
windowElevationRange(
|
||||
[graphLongitudinal.samples, ...designProfiles.map((profile) => profile.samples)],
|
||||
from,
|
||||
to,
|
||||
) ?? null,
|
||||
);
|
||||
return applyElevationWindow(chartWrap, next);
|
||||
});
|
||||
|
||||
// 가로 스크롤에도 고정되는 sticky Y축 오버레이(SVG와 같은 눈금·불투명 배경으로 값 누출 차단).
|
||||
// 앵커(0크기 sticky)는 **첫 자식**이어야 한다 — SVG 뒤에 붙이면 흐름 위치가 차트
|
||||
// 아래로 밀려 스크롤 시 축이 화면에 안 보인다(2026-08-04 확인, B06과 같은 규칙).
|
||||
|
||||
@@ -0,0 +1,176 @@
|
||||
/* =============================================================================
|
||||
* B05_Profile_UI_Profile_YWindow.ts
|
||||
* 종단 그래프의 **세로 창을 변환으로 갈아 끼운다** — 다시 그리지 않는다(2026-09-04 확정).
|
||||
*
|
||||
* 예전에는 스크롤을 멈출 때마다 그래프를 통째로 새로 만들었다(SVG 요소 457개, 실측
|
||||
* 34ms = 60Hz 두 프레임 누락). 사용자에게는 「화면을 리프레시하는 느낌」으로 왔다.
|
||||
*
|
||||
* 세로 매핑은 1차식이라(`y = zero − (표고 − center) × pxPerM`) 옛 창과 새 창의 관계도
|
||||
* 1차식이다. 그래서 도형을 건드리지 않고 겹 하나에 `translate`+`scale` 만 걸면 정확히
|
||||
* 겹친다. 글자는 늘어나므로 변환에 넣지 않고 자리만 옮긴다(눈금 10개 안팎).
|
||||
*
|
||||
* 창이 많이 벌어져 눈금 간격이 원래 의도(1·2·5 계열)와 어긋나면 **눈금만** 다시 만든다.
|
||||
* 그때도 눈금은 **그릴 때의 좌표계**에 놓아 같은 변환이 그대로 먹게 한다.
|
||||
* ========================================================================== */
|
||||
|
||||
import {
|
||||
Y_GRID_CLASS,
|
||||
Y_TICK_CLASS,
|
||||
Y_WINDOW_ATTRS,
|
||||
Y_WINDOW_BAKED_ATTR,
|
||||
Y_WINDOW_CLASS,
|
||||
Y_WINDOW_SPAN_PAD,
|
||||
yWindowTickValues,
|
||||
} from "../B06_Section/B06_Section_UI_Longitudinal";
|
||||
|
||||
/** 눈금을 다시 만드는 문턱 — 그릴 때 대비 세로 배율이 이 밖으로 나가면 간격이 어긋난다. */
|
||||
const TICK_KEEP_MIN = 0.8;
|
||||
const TICK_KEEP_MAX = 1.25;
|
||||
/** 플롯 안에 남아야 하는 최소 눈금 수. */
|
||||
const TICK_KEEP_MIN_COUNT = 4;
|
||||
/** 눈금 글자는 선보다 이만큼 아래에 앉는다(그리는 쪽과 같은 값). */
|
||||
const TICK_TEXT_DROP_PX = 4;
|
||||
|
||||
interface Baked {
|
||||
svg: SVGSVGElement;
|
||||
center: number;
|
||||
pxPerM: number;
|
||||
zero: number;
|
||||
top: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
export interface ElevationWindowResult {
|
||||
/** 그릴 때 대비 세로 배율(1이면 그릴 때와 같은 창). */
|
||||
scale: number;
|
||||
/** 플롯 안에 남아 있는 눈금 수. */
|
||||
visibleTicks: number;
|
||||
/** 이번 호출에서 눈금을 다시 만들었는가. */
|
||||
rebuiltTicks: boolean;
|
||||
}
|
||||
|
||||
function readBaked(root: ParentNode): Baked | null {
|
||||
const svg = root.querySelector<SVGSVGElement>(`svg[${Y_WINDOW_ATTRS.auto}="1"]`);
|
||||
if (!svg) return null;
|
||||
const read = (name: string): number => Number(svg.getAttribute(name));
|
||||
const baked: Baked = {
|
||||
svg,
|
||||
center: read(Y_WINDOW_ATTRS.center),
|
||||
pxPerM: read(Y_WINDOW_ATTRS.pxPerM),
|
||||
zero: read(Y_WINDOW_ATTRS.zero),
|
||||
top: read(Y_WINDOW_ATTRS.top),
|
||||
height: read(Y_WINDOW_ATTRS.height),
|
||||
};
|
||||
const numbers = [baked.center, baked.pxPerM, baked.zero, baked.top, baked.height];
|
||||
if (!numbers.every(Number.isFinite) || baked.pxPerM <= 0 || baked.height <= 0) return null;
|
||||
return baked;
|
||||
}
|
||||
|
||||
/** 눈금선·눈금 글자·좌측 고정 축을 새 창의 눈금값으로 다시 만든다(그래프는 건드리지 않는다).
|
||||
*
|
||||
* 자리는 **그릴 때의 좌표계**로 잡는다 — 그래야 아래 변환이 눈금에도 그대로 먹는다. */
|
||||
function rebuildTicks(baked: Baked, root: ParentNode, center: number, span: number): boolean {
|
||||
const grid = baked.svg.querySelector<SVGGElement>(`.${Y_GRID_CLASS}`);
|
||||
const labels = baked.svg.querySelector<SVGGElement>(`.${Y_TICK_CLASS}`);
|
||||
if (!grid || !labels) return false;
|
||||
const sampleLine = grid.querySelector("line");
|
||||
const sampleText = labels.querySelector("text");
|
||||
if (!sampleLine || !sampleText) return false;
|
||||
const x1 = sampleLine.getAttribute("x1") ?? "0";
|
||||
const x2 = sampleLine.getAttribute("x2") ?? "0";
|
||||
const lineClass = sampleLine.getAttribute("class") ?? "";
|
||||
const textX = sampleText.getAttribute("x") ?? "0";
|
||||
const textClass = sampleText.getAttribute("class") ?? "";
|
||||
const axis = root.querySelector<HTMLElement>(".b05-profile__yaxis-inner");
|
||||
|
||||
const ns = "http://www.w3.org/2000/svg";
|
||||
const lines: SVGLineElement[] = [];
|
||||
const texts: SVGTextElement[] = [];
|
||||
const spans: HTMLElement[] = [];
|
||||
for (const { value, label } of yWindowTickValues(center, span, baked.height)) {
|
||||
const y = baked.zero - (value - baked.center) * baked.pxPerM;
|
||||
const line = document.createElementNS(ns, "line");
|
||||
line.setAttribute("x1", x1);
|
||||
line.setAttribute("x2", x2);
|
||||
line.setAttribute("y1", String(y));
|
||||
line.setAttribute("y2", String(y));
|
||||
line.setAttribute("class", lineClass);
|
||||
lines.push(line);
|
||||
const text = document.createElementNS(ns, "text");
|
||||
text.setAttribute("x", textX);
|
||||
text.setAttribute("y", String(y + TICK_TEXT_DROP_PX));
|
||||
text.setAttribute("text-anchor", "end");
|
||||
text.setAttribute("class", textClass);
|
||||
text.setAttribute(Y_WINDOW_BAKED_ATTR, String(y));
|
||||
text.textContent = label;
|
||||
texts.push(text);
|
||||
if (axis) {
|
||||
const span = document.createElement("span");
|
||||
span.className = "b05-profile__yaxis-tick";
|
||||
span.style.top = `${y}px`;
|
||||
span.setAttribute(Y_WINDOW_BAKED_ATTR, String(y));
|
||||
span.textContent = label;
|
||||
spans.push(span);
|
||||
}
|
||||
}
|
||||
grid.replaceChildren(...lines);
|
||||
labels.replaceChildren(...texts);
|
||||
if (axis) axis.replaceChildren(...spans);
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 종단 그래프의 세로 창을 옮긴다. 대상 그래프가 없거나(고정 배율 B06) 창이 없으면 null.
|
||||
* 좌측 고정 축(`b05-profile__yaxis-tick`)도 같은 식으로 따라 옮긴다.
|
||||
*/
|
||||
export function applyElevationWindow(
|
||||
root: ParentNode,
|
||||
range: { min: number; max: number } | undefined,
|
||||
): ElevationWindowResult | null {
|
||||
const baked = readBaked(root);
|
||||
if (!baked || !range) return null;
|
||||
|
||||
// 새 창 — 그리는 쪽과 **같은 규칙**으로 만든다(같은 상수를 같이 쓴다).
|
||||
const span = Math.max(range.max - range.min, 1) * Y_WINDOW_SPAN_PAD;
|
||||
const center = (range.min + range.max) / 2;
|
||||
const pxPerM = baked.height / span;
|
||||
const scale = pxPerM / baked.pxPerM;
|
||||
|
||||
// 배율이 크게 벌어지면 눈금 간격이 원래 의도와 어긋난다 — 눈금만 새로 만든다(요소 20개
|
||||
// 안팎). 그래프 전체를 다시 만들던 예전 방식이 34ms 끊김의 원인이었다.
|
||||
let rebuiltTicks = false;
|
||||
if (scale < TICK_KEEP_MIN || scale > TICK_KEEP_MAX) {
|
||||
rebuiltTicks = rebuildTicks(baked, root, center, span);
|
||||
}
|
||||
|
||||
const offset = baked.zero * (1 - scale) + (center - baked.center) * pxPerM;
|
||||
const transform = `translate(0 ${offset}) scale(1 ${scale})`;
|
||||
baked.svg.querySelectorAll<SVGGElement>(`.${Y_WINDOW_CLASS}`).forEach((layer) => {
|
||||
layer.setAttribute("transform", transform);
|
||||
});
|
||||
|
||||
const place = (bakedY: number): number => scale * bakedY + offset;
|
||||
const inside = (y: number): boolean => y >= baked.top && y <= baked.top + baked.height;
|
||||
let visibleTicks = 0;
|
||||
baked.svg.querySelectorAll<SVGTextElement>(`text[${Y_WINDOW_BAKED_ATTR}]`).forEach((label) => {
|
||||
const moved = place(Number(label.getAttribute(Y_WINDOW_BAKED_ATTR)));
|
||||
// 글자를 내리는 몫은 **변환 뒤에** 더한다 — 배율과 함께 커지면 선에서 떨어져 보인다.
|
||||
label.setAttribute("y", String(moved + TICK_TEXT_DROP_PX));
|
||||
// 플롯 밖으로 나간 눈금 글자는 감춘다 — 축 라벨·측점 띠 위로 흘러나오면 안 된다.
|
||||
label.style.display = inside(moved) ? "" : "none";
|
||||
if (inside(moved)) visibleTicks += 1;
|
||||
});
|
||||
root
|
||||
.querySelectorAll<HTMLElement>(`.b05-profile__yaxis-tick[${Y_WINDOW_BAKED_ATTR}]`)
|
||||
.forEach((tick) => {
|
||||
const moved = place(Number(tick.getAttribute(Y_WINDOW_BAKED_ATTR)));
|
||||
tick.style.top = `${moved}px`;
|
||||
tick.style.display = inside(moved) ? "" : "none";
|
||||
});
|
||||
return { scale, visibleTicks, rebuiltTicks };
|
||||
}
|
||||
|
||||
/** 눈금이 더는 쓸 만하지 않은가 — 패널이 그래프 전체를 다시 만들지 판단하는 기준. */
|
||||
export function needsFullRedraw(result: ElevationWindowResult | null): boolean {
|
||||
return !result || (result.visibleTicks < TICK_KEEP_MIN_COUNT && !result.rebuiltTicks);
|
||||
}
|
||||
Reference in New Issue
Block a user