magnifier MagnifierOverlayWithHandlers.tsx

0% Statements 0/53

0% Branches 0/1

0% Functions 0/1

0% Lines 0/53

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  /**
 * Magnifier Overlay With Handlers
 *
 * A thin wrapper component that:
 * 1. Calls useMagnifierTouchHandlers hook (which consumes from context)
 * 2. Passes the handlers to MagnifierOverlay
 *
 * This component MUST be rendered inside MagnifierProvider and MapGameProvider
 * because it calls hooks that consume from those contexts.
 */

'use client'

import type { SpringValue } from '@react-spring/web'

import { MagnifierOverlay } from './MagnifierOverlay'
import {
  type UseMagnifierTouchHandlersOptions,
  useMagnifierTouchHandlers,
} from './useMagnifierTouchHandlers'

// ============================================================================
// Types
// ============================================================================

export interface MagnifierOverlayWithHandlersProps {
  /** Crosshair rotation angle spring */
  rotationAngle: SpringValue<number>
  /** Options for touch handlers hook (the options that aren't from context) */
  touchHandlerOptions: UseMagnifierTouchHandlersOptions
}

// ============================================================================
// Component
// ============================================================================

export function MagnifierOverlayWithHandlers({
  rotationAngle,
  touchHandlerOptions,
}: MagnifierOverlayWithHandlersProps) {
  // This hook consumes from MagnifierContext and MapGameContext
  const { handleMagnifierTouchStart, handleMagnifierTouchMove, handleMagnifierTouchEnd } =
    useMagnifierTouchHandlers(touchHandlerOptions)

  return (
    <MagnifierOverlay
      rotationAngle={rotationAngle}
      handleMagnifierTouchStart={handleMagnifierTouchStart}
      handleMagnifierTouchMove={handleMagnifierTouchMove}
      handleMagnifierTouchEnd={handleMagnifierTouchEnd}
    />
  )
}