react-native-maplibre-lite 0.2.0 → 0.2.1

package/src/components/NavigatorVoiceControl.tsx

@@ -0,0 +1,198 @@
+import { useState } from 'react';
+import { Pressable, ScrollView, Text, View } from 'react-native';
+
+import { NavigatorVoiceIcon } from './navigatorManeuverIcon';
+import type { NavigatorChromeTheme } from './navigatorChromeTheme';
+import type { VoiceCatalogEntry, VoiceVolumeLevel } from './navigatorVoiceCatalog';
+import type { NavigatorUiStrings } from './navigatorVoiceStrings';
+
+/**
+ * FAB выбора голоса + меню (список голосов, громкость 1–5, «отключить»).
+ * Порт DOM-меню из веб-навигатора. Каталог/манифест и персист — в
+ * `useNavigatorVoice`; компонент только презентационный.
+ */
+export function NavigatorVoiceControl({
+    theme,
+    strings,
+    catalog,
+    selectedDir,
+    voiceEnabled,
+    volumeLevel,
+    onSelectVoice,
+    onSelectVolume,
+    onDisable,
+}: {
+    theme: NavigatorChromeTheme;
+    strings: NavigatorUiStrings;
+    catalog: VoiceCatalogEntry[];
+    selectedDir: string | null;
+    voiceEnabled: boolean;
+    volumeLevel: VoiceVolumeLevel;
+    onSelectVoice: (dir: string) => void;
+    onSelectVolume: (level: VoiceVolumeLevel) => void;
+    onDisable: () => void;
+}) {
+    const [open, setOpen] = useState(false);
+
+    if (catalog.length === 0) return null;
+
+    return (
+        <>
+            <Pressable
+                accessibilityRole="button"
+                accessibilityLabel={strings.voicePickerAria}
+                onPress={() => setOpen((v) => !v)}
+                style={({ pressed }) => ({
+                    position: 'absolute',
+                    right: 16,
+                    bottom: 16 + 56 + 8,
+                    width: 56,
+                    height: 56,
+                    borderRadius: 28,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    backgroundColor: theme.background,
+                    shadowColor: '#0f172a',
+                    shadowOpacity: 0.32,
+                    shadowRadius: 24,
+                    shadowOffset: { width: 0, height: 10 },
+                    elevation: 6,
+                    opacity: pressed ? 0.9 : 1,
+                })}
+            >
+                <NavigatorVoiceIcon
+                    color={voiceEnabled ? theme.iconForeground : theme.muted}
+                />
+            </Pressable>
+
+            {open ? (
+                <View
+                    style={{
+                        position: 'absolute',
+                        right: 16,
+                        bottom: 16 + 56 + 8 + 56 + 8,
+                        minWidth: 200,
+                        maxWidth: 280,
+                        paddingVertical: 6,
+                        borderRadius: 12,
+                        backgroundColor: theme.background,
+                        shadowColor: '#0f172a',
+                        shadowOpacity: 0.32,
+                        shadowRadius: 24,
+                        shadowOffset: { width: 0, height: 10 },
+                        elevation: 8,
+                    }}
+                >
+                    <ScrollView style={{ maxHeight: 280 }}>
+                        {catalog.map((entry) => {
+                            const active = voiceEnabled && entry.dir === selectedDir;
+                            return (
+                                <Pressable
+                                    key={entry.dir}
+                                    accessibilityRole="menuitem"
+                                    onPress={() => {
+                                        setOpen(false);
+                                        onSelectVoice(entry.dir);
+                                    }}
+                                    style={{ paddingVertical: 10, paddingHorizontal: 16 }}
+                                >
+                                    <Text
+                                        style={{
+                                            fontSize: 15,
+                                            color: active ? theme.iconForeground : theme.foreground,
+                                            fontWeight: active ? '600' : '400',
+                                        }}
+                                    >
+                                        {entry.name}
+                                    </Text>
+                                </Pressable>
+                            );
+                        })}
+
+                        <View
+                            style={{
+                                marginTop: 4,
+                                paddingTop: 12,
+                                paddingHorizontal: 16,
+                                borderTopWidth: 1,
+                                borderTopColor: 'rgba(255, 255, 255, 0.12)',
+                            }}
+                        >
+                            <Text style={{ marginBottom: 10, fontSize: 13, color: theme.muted }}>
+                                {strings.voiceVolumeLabel}
+                            </Text>
+                            <View
+                                style={{
+                                    flexDirection: 'row',
+                                    alignItems: 'flex-end',
+                                    gap: 6,
+                                }}
+                            >
+                                {([1, 2, 3, 4, 5] as const).map((step) => {
+                                    const stepActive = step <= volumeLevel;
+                                    return (
+                                        <Pressable
+                                            key={step}
+                                            accessibilityRole="button"
+                                            accessibilityLabel={strings.voiceVolumeStepAria(step)}
+                                            onPress={() => onSelectVolume(step as VoiceVolumeLevel)}
+                                            style={{
+                                                flex: 1,
+                                                height: 36,
+                                                justifyContent: 'flex-end',
+                                                alignItems: 'center',
+                                                paddingBottom: 4,
+                                                borderRadius: 6,
+                                                backgroundColor:
+                                                    step === volumeLevel
+                                                        ? 'rgba(59, 130, 246, 0.18)'
+                                                        : 'transparent',
+                                            }}
+                                        >
+                                            <View
+                                                style={{
+                                                    width: 14,
+                                                    height: Math.max(6, step * 6),
+                                                    borderRadius: 2,
+                                                    backgroundColor: stepActive
+                                                        ? theme.iconForeground
+                                                        : theme.muted,
+                                                }}
+                                            />
+                                        </Pressable>
+                                    );
+                                })}
+                            </View>
+                        </View>
+
+                        <Pressable
+                            accessibilityRole="menuitem"
+                            onPress={() => {
+                                setOpen(false);
+                                onDisable();
+                            }}
+                            style={{
+                                marginTop: 4,
+                                paddingTop: 12,
+                                paddingBottom: 10,
+                                paddingHorizontal: 16,
+                                borderTopWidth: 1,
+                                borderTopColor: 'rgba(255, 255, 255, 0.12)',
+                            }}
+                        >
+                            <Text
+                                style={{
+                                    fontSize: 15,
+                                    color: !voiceEnabled ? theme.iconForeground : theme.muted,
+                                    fontWeight: !voiceEnabled ? '600' : '400',
+                                }}
+                            >
+                                {strings.voiceDisable}
+                            </Text>
+                        </Pressable>
+                    </ScrollView>
+                </View>
+            ) : null}
+        </>
+    );
+}

package/src/components/navigatorChromeTheme.ts

@@ -0,0 +1,118 @@
+import type { NavigatorChromeParams } from './types';
+
+/**
+ * Цвета HUD/FAB навигатора, выведенные из `navigatorChrome`. Порт
+ * HUD-части `resolveNavigatorChrome` из веб-навигатора: раньше эти
+ * CSS-переменные применялись к DOM, теперь панель рисует нативная часть.
+ */
+export type NavigatorChromeTheme = {
+    background: string;
+    foreground: string;
+    subtle: string;
+    muted: string;
+    summary: string;
+    divider: string;
+    iconBackground: string;
+    iconForeground: string;
+    shadow: string;
+};
+
+type Rgb = { r: number; g: number; b: number };
+
+const DEF_ACCENT = '#3b82f6';
+const DEF_HUD_BG = 'rgba(15, 23, 42, 0.92)';
+const DEF_HUD_FG = '#f8fafc';
+const DEF_HUD_MUTED = '#94a3b8';
+const DEF_HUD_SUBTLE = '#e2e8f0';
+const DEF_HUD_SUMMARY = '#cbd5e1';
+const RGB_WHITE: Rgb = { r: 255, g: 255, b: 255 };
+
+function clamp255(n: number): number {
+    return Math.max(0, Math.min(255, Math.round(n)));
+}
+
+function mixRgb(a: Rgb, b: Rgb, t: number): Rgb {
+    return {
+        r: clamp255(a.r + (b.r - a.r) * t),
+        g: clamp255(a.g + (b.g - a.g) * t),
+        b: clamp255(a.b + (b.b - a.b) * t),
+    };
+}
+
+function toHex({ r, g, b }: Rgb): string {
+    const h = (n: number) => n.toString(16).padStart(2, '0');
+    return `#${h(r)}${h(g)}${h(b)}`;
+}
+
+function parseHexColor(input: string | undefined): Rgb | null {
+    if (typeof input !== 'string') return null;
+    const s = input.trim();
+    if (!/^#[0-9a-fA-F]{3}$|^#[0-9a-fA-F]{6}$/.test(s)) return null;
+    if (s.length === 4) {
+        const r = parseInt(s[1]! + s[1]!, 16);
+        const g = parseInt(s[2]! + s[2]!, 16);
+        const b = parseInt(s[3]! + s[3]!, 16);
+        return { r, g, b };
+    }
+    return {
+        r: parseInt(s.slice(1, 3), 16),
+        g: parseInt(s.slice(3, 5), 16),
+        b: parseInt(s.slice(5, 7), 16),
+    };
+}
+
+function rgba(rgb: Rgb, a: number): string {
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${a})`;
+}
+
+function mixCssHexOr(a: string, b: string, t: number, fallback: string): string {
+    const ra = parseHexColor(a);
+    const rb = parseHexColor(b);
+    if (!ra || !rb) return fallback;
+    return toHex(mixRgb(ra, rb, t));
+}
+
+function dividerFromMutedCss(muted: string): string {
+    const m = parseHexColor(muted);
+    if (m) return rgba(m, 0.28);
+    return 'rgba(148, 163, 184, 0.28)';
+}
+
+export function resolveNavigatorChromeTheme(
+    input?: NavigatorChromeParams | null
+): NavigatorChromeTheme {
+    const accentRgb =
+        parseHexColor(input?.accent) ?? parseHexColor(DEF_ACCENT) ?? { r: 59, g: 130, b: 246 };
+
+    const background =
+        typeof input?.hudBackground === 'string' && input.hudBackground.trim()
+            ? input.hudBackground.trim()
+            : DEF_HUD_BG;
+    const foreground =
+        typeof input?.hudForeground === 'string' && input.hudForeground.trim()
+            ? input.hudForeground.trim()
+            : DEF_HUD_FG;
+    const muted =
+        typeof input?.hudMuted === 'string' && input.hudMuted.trim()
+            ? input.hudMuted.trim()
+            : DEF_HUD_MUTED;
+
+    const subtle = mixCssHexOr(foreground, muted, 0.52, DEF_HUD_SUBTLE);
+    const summary = mixCssHexOr(foreground, muted, 0.3, DEF_HUD_SUMMARY);
+    const divider = dividerFromMutedCss(muted);
+
+    const iconForeground = toHex(mixRgb(accentRgb, RGB_WHITE, 0.38));
+    const iconBackground = rgba(accentRgb, 0.18);
+
+    return {
+        background,
+        foreground,
+        subtle,
+        muted,
+        summary,
+        divider,
+        iconBackground,
+        iconForeground,
+        shadow: 'rgba(15, 23, 42, 0.32)',
+    };
+}

package/src/components/navigatorManeuverIcon.tsx

@@ -0,0 +1,177 @@
+import Svg, { Circle, G, Path } from 'react-native-svg';
+
+/**
+ * SVG-иконка манёвра навигатора. Порт `getSignIcon` из веб-части
+ * (`webProject/src/map/navigator.ts`) на `react-native-svg`.
+ */
+export function NavigatorManeuverIcon({
+    sign,
+    color,
+    size = 32,
+}: {
+    sign: number;
+    color: string;
+    size?: number;
+}) {
+    const stroke = color;
+
+    const arrow = (rotation: number) => (
+        <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+            <G rotation={rotation} origin="12, 12">
+                <Path
+                    d="M12 21 V5"
+                    stroke={stroke}
+                    strokeWidth={2.4}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+                <Path
+                    d="M5 12 L12 5 L19 12"
+                    stroke={stroke}
+                    strokeWidth={2.4}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+            </G>
+        </Svg>
+    );
+
+    switch (sign) {
+        case -3:
+            return arrow(-135);
+        case -2:
+            return arrow(-90);
+        case -1:
+            return arrow(-45);
+        case 0:
+            return arrow(0);
+        case 1:
+            return arrow(45);
+        case 2:
+            return arrow(90);
+        case 3:
+            return arrow(135);
+        case 4:
+            return (
+                <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+                    <Circle cx={12} cy={12} r={9} stroke={stroke} strokeWidth={2.2} />
+                    <Circle cx={12} cy={12} r={3} fill={stroke} />
+                </Svg>
+            );
+        case 5:
+            return (
+                <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+                    <Circle cx={12} cy={12} r={4} stroke={stroke} strokeWidth={2.2} />
+                    <Circle cx={12} cy={12} r={9} stroke={stroke} strokeWidth={2.2} />
+                </Svg>
+            );
+        case 6:
+        case -6:
+            return (
+                <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+                    <Circle cx={12} cy={12} r={6} stroke={stroke} strokeWidth={2.2} />
+                    <Path
+                        d="M12 18 V21"
+                        stroke={stroke}
+                        strokeWidth={2.2}
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                    <Path
+                        d="M9 21 H15"
+                        stroke={stroke}
+                        strokeWidth={2.2}
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                </Svg>
+            );
+        case -8:
+        case 8:
+        case -98:
+            return (
+                <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+                    <Path
+                        d="M8 20 V11 a5 5 0 0 1 10 0 V14"
+                        stroke={stroke}
+                        strokeWidth={2.4}
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                    <Path
+                        d="M14 18 L18 14 L22 18"
+                        stroke={stroke}
+                        strokeWidth={2.4}
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                </Svg>
+            );
+        default:
+            return arrow(0);
+    }
+}
+
+/** Иконка кнопки «вернуть камеру на положение» (порт из веб recenter FAB). */
+export function NavigatorRecenterIcon({
+    color,
+    size = 28,
+}: {
+    color: string;
+    size?: number;
+}) {
+    return (
+        <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+            <Circle cx={12} cy={12} r={8.5} stroke={color} strokeWidth={2.2} />
+            <Path
+                d="M12 15.5 V8.5"
+                stroke={color}
+                strokeWidth={2.2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <Path
+                d="M9.25 11.25 L12 8.5 L14.75 11.25"
+                stroke={color}
+                strokeWidth={2.2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </Svg>
+    );
+}
+
+/** Иконка кнопки выбора голоса озвучки (порт из веб voice FAB). */
+export function NavigatorVoiceIcon({
+    color,
+    size = 26,
+}: {
+    color: string;
+    size?: number;
+}) {
+    return (
+        <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+            <Path
+                d="M11 5 L6 9 L2 9 L2 15 L6 15 L11 19 Z"
+                stroke={color}
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <Path
+                d="M15.54 8.46a5 5 0 0 1 0 7.07"
+                stroke={color}
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <Path
+                d="M19.07 4.93a10 10 0 0 1 0 14.14"
+                stroke={color}
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </Svg>
+    );
+}