Sebastian Krüger 2c621f2c8e feat: add draggable bars for interactive value adjustment ...

Implement innovative drag-to-adjust interaction in visual comparison view:

Visual feedback:
- Cursor changes to grab/grabbing when draggable
- Active bar scales up and shows ring focus indicator
- Hover overlay displays "Drag to adjust" hint
- Smooth transitions when not dragging, instant updates while dragging

Drag mechanics:
- Mouse drag support for desktop
- Touch drag support for mobile devices
- Logarithmic scale conversion preserves intuitive feel
- Clamped percentage range (3-100%) prevents invalid values
- Dragging updates input value and selected unit in real-time

Technical implementation:
- Added onValueChange callback to VisualComparison component
- Reverse logarithmic calculation converts drag position to value
- Global event listeners for smooth drag-outside-element tracking
- Prevents scrolling during touch drag on mobile
- MainConverter integrates drag callback to update state

This creates a highly tactile, visual way to adjust conversion values
by directly manipulating the bar chart representation.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-11-08 10:40:30 +01:00

9.1 KiB

Raw Blame History

View Raw