Swipe Origin Display

Build a React component that displays the starting coordinates of swipe gestures.

Requirements

Component Structure

Create a component with:

• A swipeable area (minimum 300x300 pixels)
• A text display showing the starting coordinates of the most recent swipe
• A visual marker (dot or circle) positioned at the swipe start location

Gesture Tracking

• Capture the starting position when a swipe begins
• Update both the text and marker position when a new swipe starts
• Support both touch and mouse input for swipe detection
• Display coordinates relative to the swipeable area

Display Format

• Text format: "Start: X: [x-value], Y: [y-value]"
• Marker: A visible element positioned at the exact starting coordinates
• Initial state: Display "No swipe yet" or similar message before the first swipe

Test Cases

• When a user swipes from coordinates (100, 200), the display shows "Start: X: 100, Y: 200" and a marker appears at that position @test
• When a new swipe starts at (300, 150), the previous marker is replaced with a new marker at (300, 150) and the text updates @test
• The component tracks mouse-based swipes as well as touch swipes @test

Implementation

@generates

API

export function SwipeOriginDisplay(): JSX.Element;

Dependencies { .dependencies }

react-swipeable { .dependency }

Provides swipe gesture detection and tracking capabilities.