All files / web/src/arcade-games/know-your-world/features/precision index.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * Precision Mode Feature Module
 *
 * Provides precision mode functionality for fine-grained cursor control
 * at high magnification levels. When the screen pixel ratio exceeds a
 * threshold, precision mode allows the user to click and activate
 * pointer lock for accurate region selection.
 *
 * ## Key Concepts
 *
 * - **Screen Pixel Ratio**: How many screen pixels the magnifier "jumps"
 *   when the mouse moves one pixel on the main map. High ratios make
 *   selection difficult without precision mode.
 *
 * - **Threshold**: When screen pixel ratio >= 20, precision mode is
 *   recommended. The magnifier shows a gold scrim and "Click to activate
 *   precision mode" message.
 *
 * - **Pointer Lock**: Browser API that hides the cursor and captures
 *   relative mouse movements. This allows the cursor position to be
 *   interpolated for smooth, precise control.
 *
 * ## Usage
 *
 * ```tsx
 * import {
 *   usePrecisionMode,
 *   PrecisionModeScrim,
 *   getPrecisionModeFilter,
 * } from '../features/precision'
 *
 * function MagnifierOverlay() {
 *   const precision = usePrecisionMode({
 *     containerRef,
 *     svgRef,
 *     viewBox,
 *     currentZoom,
 *   })
 *
 *   return (
 *     <div
 *       style={{ filter: getPrecisionModeFilter(precision) }}
 *       onClick={precision.requestPrecisionMode}
 *     >
 *       <MapContent />
 *       <PrecisionModeScrim
 *         show={precision.isAtThreshold && !precision.pointerLocked}
 *       />
 *     </div>
 *   )
 * }
 * ```
 */

// Types
export type {
  PrecisionModeFilterProps,
  PrecisionModeScrimProps,
  PrecisionModeStatusLabelOptions,
} from './PrecisionModeIndicator'
// Components
// Utilities
export {
  getPrecisionModeFilter,
  getPrecisionModeStatusLabel,
  PrecisionModeScrim,
} from './PrecisionModeIndicator'
export type {
  PrecisionModeIndicatorProps,
  ThresholdStatus,
  UsePrecisionModeOptions,
  UsePrecisionModeReturn,
} from './types'
export {
  type UsePrecisionCalculationsOptions,
  type UsePrecisionCalculationsReturn,
  usePrecisionCalculations,
} from './usePrecisionCalculations'
// Hooks
export { usePrecisionMode } from './usePrecisionMode'