htlee
650888adb7
- 나침반/줌 컨트롤 분리, 기어 버튼으로 설정 패널 토글 - 설정 항목: 레이블 언어, 육지/물/수심 색상, 수심 폰트 크기/색상 - 런타임 map.setPaintProperty/setLayoutProperty로 즉시 적용 - 수심 색상 범례 (좌하단 그라데이션 바 + 눈금) - 초기화 버튼으로 디폴트 복원 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
34 lines
970 B
TypeScript
34 lines
970 B
TypeScript
import { useMemo } from 'react';
|
|
import type { DepthColorStop } from '../../features/mapSettings/types';
|
|
|
|
interface DepthLegendProps {
|
|
depthStops: DepthColorStop[];
|
|
}
|
|
|
|
export function DepthLegend({ depthStops }: DepthLegendProps) {
|
|
const sorted = useMemo(
|
|
() => [...depthStops].sort((a, b) => a.depth - b.depth),
|
|
[depthStops],
|
|
);
|
|
|
|
const gradient = useMemo(() => {
|
|
if (sorted.length === 0) return 'transparent';
|
|
const stops = sorted.map((s, i) => {
|
|
const pct = (i / (sorted.length - 1)) * 100;
|
|
return `${s.color} ${pct.toFixed(0)}%`;
|
|
});
|
|
return `linear-gradient(to bottom, ${stops.join(', ')})`;
|
|
}, [sorted]);
|
|
|
|
return (
|
|
<div className="depth-legend">
|
|
<div className="depth-legend__bar" style={{ background: gradient }} />
|
|
<div className="depth-legend__ticks">
|
|
{sorted.map((s) => (
|
|
<span key={s.depth}>{Math.abs(s.depth).toLocaleString()}m</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|