|
10 | 10 | * @returns キーボード制御の状態 |
11 | 11 | */ |
12 | 12 |
|
13 | | -import type mapboxgl from 'mapbox-gl' |
14 | | -import { useEffect } from 'react' |
| 13 | +import type mapboxgl from "mapbox-gl"; |
| 14 | +import { useEffect } from "react"; |
15 | 15 |
|
16 | 16 | export type UseMapKeyboardShortcutsProps = { |
17 | | - /** Mapboxマップインスタンス */ |
18 | | - map: mapboxgl.Map | null |
19 | | - /** デバッグモードの状態 */ |
20 | | - debugMode: boolean |
21 | | - /** デバッグモード切り替えのコールバック */ |
22 | | - onToggleDebugMode: () => void |
23 | | - /** 位置情報再取得のコールバック */ |
24 | | - onGeolocationRetry: () => void |
25 | | - /** 位置情報キャッシュクリア&再取得のコールバック */ |
26 | | - onGeolocationReset: () => void |
27 | | - /** デバッグ時間変更のコールバック */ |
28 | | - onDebugTimeChange: (time: number | null) => void |
29 | | - /** ライティング更新のコールバック */ |
30 | | - onUpdateLighting: () => void |
31 | | -} |
| 17 | + /** Mapboxマップインスタンス */ |
| 18 | + map: mapboxgl.Map | null; |
| 19 | + /** デバッグモードの状態 */ |
| 20 | + debugMode: boolean; |
| 21 | + /** デバッグモード切り替えのコールバック */ |
| 22 | + onToggleDebugMode: () => void; |
| 23 | + /** 位置情報再取得のコールバック */ |
| 24 | + onGeolocationRetry: () => void; |
| 25 | + /** 位置情報キャッシュクリア&再取得のコールバック */ |
| 26 | + onGeolocationReset: () => void; |
| 27 | + /** デバッグ時間変更のコールバック */ |
| 28 | + onDebugTimeChange: (time: number | null) => void; |
| 29 | + /** ライティング更新のコールバック */ |
| 30 | + onUpdateLighting: () => void; |
| 31 | +}; |
32 | 32 |
|
33 | 33 | /** |
34 | 34 | * マップ用キーボードショートカットフック |
35 | 35 | */ |
36 | 36 | export function useMapControls({ |
37 | | - map, |
38 | | - debugMode, |
39 | | - onToggleDebugMode, |
40 | | - onGeolocationRetry, |
41 | | - onGeolocationReset, |
42 | | - onDebugTimeChange, |
43 | | - onUpdateLighting, |
| 37 | + map: _map, |
| 38 | + debugMode, |
| 39 | + onToggleDebugMode, |
| 40 | + onGeolocationRetry, |
| 41 | + onGeolocationReset, |
| 42 | + onDebugTimeChange, |
| 43 | + onUpdateLighting, |
44 | 44 | }: UseMapKeyboardShortcutsProps): void { |
45 | | - useEffect(() => { |
46 | | - const handleKeyDown = (e: KeyboardEvent): void => { |
47 | | - // Shift + D でデバッグモード切り替え |
48 | | - if (e.shiftKey && e.key === 'D') { |
49 | | - onToggleDebugMode() |
50 | | - } |
| 45 | + useEffect(() => { |
| 46 | + const handleKeyDown = (e: KeyboardEvent): void => { |
| 47 | + // Shift + D でデバッグモード切り替え |
| 48 | + if (e.shiftKey && e.key === "D") { |
| 49 | + onToggleDebugMode(); |
| 50 | + } |
51 | 51 |
|
52 | | - // Shift + G で位置情報を再取得 |
53 | | - if (e.shiftKey && e.key === 'G') { |
54 | | - e.preventDefault() |
55 | | - onGeolocationRetry() |
56 | | - } |
| 52 | + // Shift + G で位置情報を再取得 |
| 53 | + if (e.shiftKey && e.key === "G") { |
| 54 | + e.preventDefault(); |
| 55 | + onGeolocationRetry(); |
| 56 | + } |
57 | 57 |
|
58 | | - // Shift + R で位置情報キャッシュをクリアして再取得 |
59 | | - if (e.shiftKey && e.key === 'R') { |
60 | | - e.preventDefault() |
61 | | - onGeolocationReset() |
62 | | - } |
| 58 | + // Shift + R で位置情報キャッシュをクリアして再取得 |
| 59 | + if (e.shiftKey && e.key === "R") { |
| 60 | + e.preventDefault(); |
| 61 | + onGeolocationReset(); |
| 62 | + } |
63 | 63 |
|
64 | | - // デバッグモード時の時間帯変更ショートカット |
65 | | - if (debugMode) { |
66 | | - // Shift + 1-4 で時間帯を変更 |
67 | | - if (e.shiftKey && ['1', '2', '3', '4'].includes(e.key)) { |
68 | | - e.preventDefault() |
69 | | - const timeMap: Record<string, number> = { |
70 | | - '1': 6, // 朝 (dawn) |
71 | | - '2': 12, // 昼 (day) |
72 | | - '3': 18, // 夕方 (dusk) |
73 | | - '4': 22, // 夜 (night) |
74 | | - } |
75 | | - const newTime = timeMap[e.key] |
76 | | - if (newTime !== undefined) { |
77 | | - onDebugTimeChange(newTime) |
78 | | - onUpdateLighting() |
79 | | - } |
80 | | - } |
| 64 | + // デバッグモード時の時間帯変更ショートカット |
| 65 | + if (debugMode) { |
| 66 | + // Shift + 1-4 で時間帯を変更 |
| 67 | + if (e.shiftKey && ["1", "2", "3", "4"].includes(e.key)) { |
| 68 | + e.preventDefault(); |
| 69 | + const timeMap: Record<string, number> = { |
| 70 | + "1": 6, // 朝 (dawn) |
| 71 | + "2": 12, // 昼 (day) |
| 72 | + "3": 18, // 夕方 (dusk) |
| 73 | + "4": 22, // 夜 (night) |
| 74 | + }; |
| 75 | + const newTime = timeMap[e.key]; |
| 76 | + if (newTime !== undefined) { |
| 77 | + onDebugTimeChange(newTime); |
| 78 | + onUpdateLighting(); |
| 79 | + } |
| 80 | + } |
81 | 81 |
|
82 | | - // Shift + 0 でデバッグ時間をリセット |
83 | | - if (e.shiftKey && e.key === '0') { |
84 | | - e.preventDefault() |
85 | | - onDebugTimeChange(null) |
86 | | - onUpdateLighting() |
87 | | - } |
88 | | - } |
89 | | - } |
| 82 | + // Shift + 0 でデバッグ時間をリセット |
| 83 | + if (e.shiftKey && e.key === "0") { |
| 84 | + e.preventDefault(); |
| 85 | + onDebugTimeChange(null); |
| 86 | + onUpdateLighting(); |
| 87 | + } |
| 88 | + } |
| 89 | + }; |
90 | 90 |
|
91 | | - window.addEventListener('keydown', handleKeyDown) |
| 91 | + window.addEventListener("keydown", handleKeyDown); |
92 | 92 |
|
93 | | - return () => { |
94 | | - window.removeEventListener('keydown', handleKeyDown) |
95 | | - } |
96 | | - }, [ |
97 | | - debugMode, |
98 | | - onToggleDebugMode, |
99 | | - onGeolocationRetry, |
100 | | - onGeolocationReset, |
101 | | - onDebugTimeChange, |
102 | | - onUpdateLighting, |
103 | | - ]) |
| 93 | + return () => { |
| 94 | + window.removeEventListener("keydown", handleKeyDown); |
| 95 | + }; |
| 96 | + }, [ |
| 97 | + debugMode, |
| 98 | + onToggleDebugMode, |
| 99 | + onGeolocationRetry, |
| 100 | + onGeolocationReset, |
| 101 | + onDebugTimeChange, |
| 102 | + onUpdateLighting, |
| 103 | + ]); |
104 | 104 | } |
0 commit comments