Fixed issue where bars would snap back to original position on drag release.
Problem:
- On mouseup/touchend, we cleared draggedPercentage immediately
- Conversions hadn't updated yet (async state updates)
- Bar switched from draggedPercentage to old item.percentage
- Bar visually "snapped back" to original position
Solution: Delay clearing drag state until conversions update
- On drag end: only clear draggingUnit, keep draggedPercentage
- Added useEffect that watches conversions + draggingUnit
- When !draggingUnit && draggedPercentage !== null → drag just ended
- This means conversions have updated, safe to clear visual state
- Now clears draggedPercentage and baseConversionsRef
Flow:
1. User releases mouse/touch
2. handleMouseUp/handleTouchEnd: calls onValueChange(..., false)
3. Sets draggingUnit = null (stops active drag)
4. Keeps draggedPercentage (maintains visual position)
5. MainConverter updates inputValue and selectedUnit
6. Conversions recalculate
7. useEffect detects: !draggingUnit && draggedPercentage
8. Clears draggedPercentage → bar smoothly transitions to calculated position
Result: Bar stays at dragged position and smoothly settles to final value!
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed the draggable bars to show immediate visual feedback!
Problem: Bars didn't resize during drag because:
- Switching source unit kept relative proportions the same (log scale)
- Bar width was using item.percentage which didn't update visually
- No direct visual feedback for the dragged bar
Solution: Use draggedPercentage state for immediate visual updates
- Added draggedPercentage state to track visual position during drag
- Save baseConversionsRef when drag starts (preserves original scale)
- Calculate new value from percentage using BASE scale (not updated scale)
- Use displayPercentage = isDragging ? draggedPercentage : item.percentage
- Bar width and percentage label both use displayPercentage
How it works now:
1. Mouse/touch down: save base conversions and current percentage
2. Mouse/touch move: calculate new percentage from drag delta
3. Set draggedPercentage state immediately (visual update!)
4. Calculate value from percentage using BASE scale
5. Call onValueChange to update conversions
6. Dragged bar shows draggedPercentage, others show calculated percentage
7. On release: clear draggedPercentage, bars settle to calculated positions
Result: The dragged bar now visually follows your cursor in real-time!
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed two critical issues with draggable bars:
1. History now only saves on drag end (not during dragging):
- Added isDragging state to MainConverter
- onValueChange callback now accepts dragging boolean parameter
- History useEffect skips saving when isDragging is true
- On mouseup/touchend, call onValueChange with dragging=false to trigger save
- Prevents hundreds of history entries from a single drag
2. Throttled drag updates for better performance:
- Added lastUpdateTime ref to track update frequency
- Limited updates to 60fps (every 16ms)
- Prevents React from being overwhelmed with rapid state updates
- Smoother, more responsive dragging experience
How it works:
- During drag: onValueChange(value, unit, true) → isDragging=true → history skips
- On drag end: onValueChange(value, unit, false) → isDragging=false → history saves
- Drag move: throttled to max 60 updates per second
This should make bars update smoothly during drag and history
clean with only one entry per drag operation.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed dragging behavior so all bars update when you drag:
Problem:
- Dragging a bar would change values but bars wouldn't visually update
- The bar would reset to original length on release
- Other bars wouldn't change at all
Root cause:
- We were converting the dragged value back to the selected unit
- This kept the source unit the same, so relative percentages didn't change
- The logarithmic scale maintained proportions, preventing visual updates
Solution:
- When dragging a bar, switch to that unit as the new source unit
- Set both inputValue and selectedUnit to the dragged unit's value/name
- This changes the conversion base, making all other bars recalculate
- Removed draggedPercentage state (not needed with this approach)
- All bars now use calculated percentages from conversions
How it works now:
- Drag the "feet" bar → becomes the source unit (selectedUnit = 'ft')
- All conversions recalculate from feet
- All bars update their percentages based on new conversion base
- No transitions during drag for instant visual feedback
- Smooth animation when drag ends
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
The bar length now updates in real-time as you drag!
Problem: When dragging, all conversions recalculate proportionally, causing
relative percentages to stay the same (no visual change in bar length).
Solution: Track draggedPercentage state and display it directly on the bar
being dragged, bypassing the calculated percentage from conversions.
How it works:
- Added draggedPercentage state to track the current drag position
- Updated handleMouseMove/handleTouchMove to set draggedPercentage
- Use draggedPercentage for the dragging bar, calculated percentage for others
- Clear draggedPercentage on drag end (mouseup/touchend)
- Bar width and percentage label both use displayPercentage
Now when you drag a bar, you get instant visual feedback as the bar
resizes to follow your cursor, making the interaction feel responsive
and tactile.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed two issues with draggable bars:
1. Bar length now updates correctly during drag:
- Convert dragged unit value back to the selected unit
- Update input value with converted amount
- Keep selectedUnit unchanged (user still inputting in same unit)
- Disable transitions on ALL bars while ANY bar is dragging
- This makes bars resize smoothly and correctly as you drag
2. Removed duplicate value display from bars:
- Value is already shown above each bar
- Removed redundant value display from inside the colored segment
- Keeps only the percentage indicator inside bars
- Cleaner, less cluttered visual design
The dragging now works intuitively: dragging any bar adjusts the input
value (in the currently selected unit) to match the dragged bar's value.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed issue where dragged bars weren't updating visually because a single
barRef was shared across all bars. Now each bar passes its element reference
to the drag handlers, allowing proper width calculations during drag.
Changes:
- Renamed barRef to activeBarRef for clarity
- Updated handleMouseDown/handleTouchStart to accept bar element parameter
- Pass e.currentTarget as bar element in onMouseDown/onTouchStart handlers
- Clear activeBarRef on drag end (mouseup/touchend)
This fixes the visual feedback - bars now correctly resize as you drag them.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
Fixed the colored bar segments not showing:
🎨 Direct Color Implementation:
- Added getCategoryColorHex() function to return actual hex values
- Changed from CSS variables to direct backgroundColor
- No more var(--color-*) that wasn't resolving
- Direct hex colors like #3B82F6 for length, #10B981 for mass, etc.
✨ Visual Improvements:
- Taller bars (h-8, 32px) for better visibility
- Drop shadow on percentage labels for readability
- White text on bars >30% filled
- Foreground color text on smaller bars
- pointer-events-none on overlay to prevent interaction issues
🔧 Updated Components:
- MainConverter: Import and use getCategoryColorHex()
- VisualComparison: Accept hex color string directly
- lib/units: Added getCategoryColorHex() with all 23 colors
The bars will now definitely show with vibrant colors!
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Completely rebuilt the bar rendering logic for guaranteed visibility:
🔧 Improved Logarithmic Calculation:
- Better handling of edge cases (zero, infinity)
- Minimum 3% bar width for all visible values
- Maximum 100% cap to prevent overflow
- 6 orders of magnitude default range
- Proper log scale normalization
🎨 Simplified Bar Styling:
- Removed complex overlay positioning
- Larger bars (h-6 for better visibility)
- Solid background colors using CSS variables
- Simple border for definition
- White percentage text on colored bars
- Text only shows when bar is >15% wide
- Drop shadow for text readability
✨ Robust Value Handling:
- Handles zero values (2% minimal bar)
- Handles infinite/NaN values gracefully
- Uses Math.abs for negative values
- Proper min/max value detection
- Filters out invalid values before calculation
The bars will now ALWAYS be visible with proper widths,
and the logarithmic scale ensures good visual distribution
across different orders of magnitude.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Enhanced the visual comparison chart for better readability:
📊 Logarithmic Scale:
- Use log10 scale instead of linear for better visualization
- Handles units with vastly different magnitudes (mm vs km)
- Minimum bar width of 5% for visibility
- Normalizes across the full range (minLog to maxLog)
- Prevents tiny bars that are hard to see
✨ Visual Improvements:
- Taller bars (h-3 instead of h-2) for better visibility
- Larger, bolder value display (text-lg font-bold)
- Better spacing (space-y-1.5)
- Percentage indicator on each bar
- White text on bars >50% filled
- Shadow on bars for depth
- Improved typography hierarchy
- Better gap spacing between label and value
🎨 Layout Enhancements:
- Unit name on left, value on right
- Value with unit abbreviation in muted color
- Flex layout with proper wrapping
- Tabular numbers for alignment
- Relative positioning for percentage labels
This makes the chart view much more useful for comparing units
with different orders of magnitude (e.g., nanometers to kilometers).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
