Implementing a usePinch Hook in React for Zooming and Panning

This challenge asks you to implement a custom React hook, usePinch, that allows users to zoom and pan an element using pinch-to-zoom gestures on touch devices. This is a common requirement in applications dealing with maps, images, or any content where interactive zooming and panning are desired. The hook should manage the necessary state and event listeners to detect and respond to pinch and pan gestures.

Problem Description

You need to create a usePinch hook that takes a ref to a DOM element as input and returns an object containing the current zoom level and pan offset (x, y). The hook should:

1. Detect Pinch Gestures: Listen for touchstart, touchmove, and touchend events on the provided DOM element. Calculate the zoom level based on the distance between two fingers.
2. Detect Pan Gestures: Calculate the pan offset based on the movement of the fingers during the touchmove event.
3. Maintain State: Store the current zoom level and pan offset in React state.
4. Apply Transformations: The hook should not directly manipulate the DOM. Instead, it should return the zoom level and pan offset, allowing the component using the hook to apply these values to the element's transform style property.
5. Handle Edge Cases: Consider scenarios where only one finger is detected, or where the touch event is canceled. Prevent zoom levels from going below 1 (or a defined minimum) and handle potential division by zero errors.

Expected Behavior:

• Pinching two fingers together should decrease the zoom level.
• Pinching two fingers apart should increase the zoom level.
• Moving two fingers should pan the element.
• The zoom level and pan offset should be updated in real-time as the user performs gestures.
• The hook should not throw errors in edge cases (e.g., only one finger detected).

Examples

Example 1:

Input: A <div> element with ref="container" and initial zoom 1, pan (0, 0)
User performs a pinch-to-zoom gesture, increasing the zoom level to 2.
Output: { zoom: 2, pan: { x: 0, y: 0 } }
Explanation: The hook detects the pinch gesture and updates the zoom level accordingly. The pan offset remains unchanged.

Example 2:

Input: A <div> element with ref="container" and initial zoom 1, pan (0, 0)
User moves two fingers across the element.
Output: { zoom: 1, pan: { x: 10, y: -5 } }
Explanation: The hook detects the pan gesture and updates the pan offset. The zoom level remains unchanged.

Example 3: (Edge Case - Single Finger)

Input: A <div> element with ref="container" and initial zoom 1, pan (0, 0)
User touches the screen with only one finger and moves it.
Output: { zoom: 1, pan: { x: 0, y: 0 } }
Explanation: The hook ignores the touch event as it requires at least two fingers for pinch or pan detection.

Constraints

• The hook must be written in TypeScript.
• The hook should only use standard React APIs and DOM events. No external libraries are allowed.
• The zoom level should be a number representing a scaling factor (e.g., 1 for no zoom, 2 for double zoom).
• The pan offset should be an object with x and y properties, representing the horizontal and vertical offset in pixels.
• The hook should be performant and avoid unnecessary re-renders. Debouncing or throttling might be beneficial for the touchmove event.
• The initial zoom level should default to 1.

Notes

• Consider using useRef to store the previous touch positions for calculating the pan offset.
• The transform style property should be applied by the component using the hook, not within the hook itself. The hook should only return the zoom and pan values.
• Think about how to handle the initial touch event and prevent it from triggering unintended actions.
• You can assume the element has a defined width and height. The component using the hook is responsible for setting these dimensions.
• Error handling is important. Gracefully handle cases where the touch event is canceled or where there are not enough fingers detected.