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

100% Statements 80/80
100% Branches 0/0
100% Functions 0/0
100% Lines 80/80

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 811x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x  
/**
 * 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'