From 30f1956ca61fe8a4030bcf197dec495513a6182f Mon Sep 17 00:00:00 2001 From: htlee Date: Tue, 31 Mar 2026 10:01:15 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8D=B8=20=EC=A4=91=EC=8B=AC?= =?UTF-8?q?=EC=A0=90=EC=97=90=20=EB=AA=A8=EB=8D=B8=EB=AA=85=20=EB=9D=BC?= =?UTF-8?q?=EB=B2=A8=20=ED=91=9C=EC=8B=9C=20(showLabels=20=EC=97=B0?= =?UTF-8?q?=EB=8F=99)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 이름 토글 ON 시 각 모델 폴리곤 중심점 위에 모델명 TextLayer 표시 모델 색상 + 검정 배경, 중심점 위 12px offset Co-Authored-By: Claude Opus 4.6 (1M context) --- frontend/src/hooks/useGearReplayLayers.ts | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/frontend/src/hooks/useGearReplayLayers.ts b/frontend/src/hooks/useGearReplayLayers.ts index ea3c816..1ad21bf 100644 --- a/frontend/src/hooks/useGearReplayLayers.ts +++ b/frontend/src/hooks/useGearReplayLayers.ts @@ -543,11 +543,12 @@ export function useGearReplayLayers( const cx = trail.path[lo][0] + (trail.path[hi][0] - trail.path[lo][0]) * ratio; const cy = trail.path[lo][1] + (trail.path[hi][1] - trail.path[lo][1]) * ratio; + const centerData = [{ position: [cx, cy] as [number, number] }]; layers.push(new ScatterplotLayer({ id: `replay-model-center-${trail.modelName}`, - data: [{ position: [cx, cy] as [number, number] }], + data: centerData, getPosition: (d: { position: [number, number] }) => d.position, - getFillColor: [r, g, b, 255], // 고채도 + getFillColor: [r, g, b, 255], getRadius: 150, radiusUnits: 'meters', radiusMinPixels: 5, @@ -555,6 +556,21 @@ export function useGearReplayLayers( getLineColor: [255, 255, 255, 200], lineWidthMinPixels: 1.5, })); + if (showLabels) { + layers.push(new TextLayer({ + id: `replay-model-center-label-${trail.modelName}`, + data: centerData, + getPosition: (d: { position: [number, number] }) => d.position, + getText: () => trail.modelName, + getColor: [r, g, b, 255], + getSize: 9, + getPixelOffset: [0, -12], + background: true, + getBackgroundColor: [0, 0, 0, 200], + backgroundPadding: [3, 1], + fontFamily: '"Fira Code Variable", monospace', + })); + } } }