diff --git a/E03_StabSection/E03_StabSection_UI_Section.ts b/E03_StabSection/E03_StabSection_UI_Section.ts index 7a50b1f15..8bbd73618 100644 --- a/E03_StabSection/E03_StabSection_UI_Section.ts +++ b/E03_StabSection/E03_StabSection_UI_Section.ts @@ -305,7 +305,14 @@ export function createSectionCanvas(onPick: (index: number | null) => void): Sec labels.append( svgEl( "text", - { x: ax + 8, y: ay - 10, class: "e03-label e03-label--fs", "data-role": "fs-label" }, + { + x: ax, + y: ay, + dx: "0.6em", + dy: "-0.7em", + class: "e03-label e03-label--fs", + "data-role": "fs-label", + }, `Fs = ${fmt(critical.fs)}`, ), ); @@ -313,7 +320,7 @@ export function createSectionCanvas(onPick: (index: number | null) => void): Sec labels.append( svgEl( "text", - { x: ax + 8, y: ay + 6, class: "e03-label" }, + { x: ax, y: ay, dx: "0.7em", dy: "0.5em", class: "e03-label" }, `Xc ${fmt(critical.center[0], 2)} · Zc ${fmt(critical.center[1], 2)} · R ${fmt(critical.radius, 2)} m`, ), ); @@ -351,7 +358,10 @@ export function createSectionCanvas(onPick: (index: number | null) => void): Sec maxScale: MAX_SCALE, home: focusHome(fit, view, analysis, width, height, MAX_SCALE), initial: zoom, - onChange: (state) => (zoom = state), + onChange: (state) => { + zoom = state; + labels.style.setProperty("--e03-label-k", String(1 / state.scale)); // 글자는 확대 안 함 + }, }); }; diff --git a/E03_StabSection/E03_StabSection_UI_Style.css b/E03_StabSection/E03_StabSection_UI_Style.css index 63c515748..c7bbb4419 100644 --- a/E03_StabSection/E03_StabSection_UI_Style.css +++ b/E03_StabSection/E03_StabSection_UI_Style.css @@ -420,14 +420,14 @@ .e03-label { fill: var(--color-text); - font-size: 12px; + font-size: calc(12px * var(--e03-label-k, 1)); paint-order: stroke; stroke: var(--e03-plot); - stroke-width: 3px; + stroke-width: calc(3px * var(--e03-label-k, 1)); } .e03-label--fs { - font-size: 14px; + font-size: calc(14px * var(--e03-label-k, 1)); font-weight: 700; }