Ruler Visual Guide
What It Looks Like
Here’s a visual representation of the component editor with rulers:
┌───┬─────────────────────────────────────────────────────────┐
│ │ -20 -10 0 10 20 30 40 mm │ ← Horizontal ruler
│░░░│ ▼ │ with cursor indicator
├───┼─────────────────────────────────────────────────────────┤
│ │ ┌─────────────────────────────────────────────────┐ │
│ 4 │ │ │ │
│ 0 │ │ │ │
│ │ │ │ │
│ 3 │ │ │ │
│ 0 │ │ YOUR IMAGE HERE │ │
│ ◄ │ │ with interface lines │ │
│ 2 │ │ │ │
│ 0 │ │ │ │
│ │ │ │ │
│ 1 │ │ │ │
│ 0 │ │ │ │
│ │ │ │ │
│ 0 │ │ • (0,0) at center │ │
│ │ │ │ │
│-1 │ │ │ │
│ 0 │ │ │ │
│ │ │ │ │
│-2 │ │ │ │
│ 0 │ │ │ │
│ │ └─────────────────────────────────────────────────┘ │
│ m │ │
│ m │ │
│ │ │
└───┴─────────────────────────────────────────────────────────┘
↑
Vertical ruler with cursor indicator
Key Features Illustrated
1. Ruler Position Indicators
The red triangular indicators follow your cursor:
Horizontal Ruler (top):
▼ ← Red triangle points DOWN to show X position
-10 0 10
Vertical Ruler (left):
20 ◄ ← Red triangle points RIGHT to show Y position
10
0
-10
2. Measurement Markings
Major Ticks (with labels):
| | |
-10 0 10 mm
Minor Ticks (no labels):
| . . . . | . . . . |
-10 -5 0 5 mm
3. Coordinate System
The rulers use a centered coordinate system:
Y+ (up)
|
|
|
X- ─────────(0,0)───────── X+ (right)
(left) |
|
|
Y- (down)
4. Real-World Example
When you hover at position (15.2 mm, 8.5 mm):
┌───┬─────────────────────────────────────────────┐
│ │ -20 -10 0 10 20▼30 40 mm │ ← Triangle at X = 15.2
├───┼─────────────────────────────────────────────┤
│ │ ┌─────────────────────────────────────┐ │
│ 40│ │ │ │
│ 30│ │ │ │
│ 20│ │ │ │
│ 10◄ │ │ ╳ (15.2, 8.5) │ │ ← Triangle at Y = 8.5
│ 0│ │ • (0, 0) │ │
│-10│ │ │ │
│-20│ │ │ │
│ mm│ └─────────────────────────────────────┘ │
└───┴─────────────────────────────────────────────┘
The red triangles on both rulers point to exactly where your cursor is!
Visual Design Details
Colors
- Ruler Background: Light gray (
#E8E8E8)░░░░░░░░░░░ ← This shade - Tick Marks: Dark gray (
#333333)|||||||||||| ← This shade - Cursor Indicator: Red (
#FF4444fill,#CC0000outline)▼◄ ← This color - Corner Widget: Medium gray (
#D0D0D0)░░ ← Top-left corner
Dimensions
Ruler height/width: 25px
│← 25px →│
┌────────────┐
│ Ruler │
└────────────┘
Major tick: 20px
│
├──── ← 20px long
│
│
Minor tick: 5px
│
├─ ← 5px long
│
│
Cursor triangle:
▼ ← 10px wide
╱ ╲ 7px tall
╱ ╲
Interactive Behavior
Mouse Movement
User moves mouse over canvas:
Step 1: Mouse at (-10, 5)
┌───┬─────────────────────────┐
│ │ ▼ │
├───┼─────────────────────────┤
│ 5◄│ ╳ │
│ 0 │ • │
└───┴─────────────────────────┘
Step 2: Mouse at (0, 0) - center
┌───┬─────────────────────────┐
│ │ ▼ │
├───┼─────────────────────────┤
│ 5 │ │
│ 0◄│ ╳ │
└───┴─────────────────────────┘
Step 3: Mouse at (15, -10)
┌───┬─────────────────────────┐
│ │ ▼ │
├───┼─────────────────────────┤
│ 0 │ │
│-5 │ │
│-10◄ ╳ │
└───┴─────────────────────────┘
Mouse Leave
When the mouse leaves the canvas, indicators disappear:
Mouse on canvas: Mouse off canvas:
┌───┬───────────┐ ┌───┬───────────┐
│ │ ▼ │ │ │ │ ← No triangle
├───┼───────────┤ ├───┼───────────┤
│ 0◄│ ╳ │ │ 0 │ │ ← No triangle
└───┴───────────┘ └───┴───────────┘
Zoom Behavior
The rulers automatically adjust tick spacing when zooming:
Zoomed Out (small scale)
┌───┬─────────────────────────────────────────┐
│ │ -50 0 50 100 mm │ ← 50mm intervals
├───┼─────────────────────────────────────────┤
│ │ ┌─────────────────────────────────┐ │
│ 50│ │ │ │
│ 0│ │ Zoomed out view │ │
│-50│ │ │ │
│ mm│ └─────────────────────────────────┘ │
└───┴─────────────────────────────────────────┘
Zoomed In (large scale)
┌───┬─────────────────────────────────────────┐
│ │ -2 -1 0 1 2 mm │ ← 1mm intervals
├───┼─────────────────────────────────────────┤
│ │ ┌─────────────────────────────────┐ │
│ 2│ │ │ │
│ 1│ │ Zoomed in view │ │
│ 0│ │ │ │
│ -1│ │ │ │
│ -2│ └─────────────────────────────────┘ │
│ mm│ │
└───┴─────────────────────────────────────────┘
Comparison to Photoshop
This implementation closely matches Photoshop’s ruler system:
Similarities ✓
- Rulers at top and left edges
- Triangular position indicators
- Real-time cursor tracking
- Centered coordinate system option
- Automatic tick spacing
- Clean, minimal design
Differences
- Units: Photoshop uses pixels by default, we use mm
- Origin: Photoshop can place origin anywhere, we use center
- Grid: Photoshop has optional grid overlay (future enhancement)
Usage Tips
For Precise Positioning
- Watch the Rulers: The triangles show your exact position
- Use Major Ticks: Align to major tick marks (labeled values)
- Read the Labels: Shows exact coordinate values in mm
For Measuring
- Note Start Position: Move to first point, read rulers
- Note End Position: Move to second point, read rulers
- Calculate Distance: Subtract coordinates
Example:
Start: X = -10 mm, Y = 5 mm
End: X = 15 mm, Y = -3 mm
Distance:
ΔX = 15 - (-10) = 25 mm
ΔY = -3 - 5 = -8 mm
Total = √(25² + 8²) = √(625 + 64) = √689 ≈ 26.2 mm
ASCII Art Comparison
Before (no rulers):
┌─────────────────────────────────────┐
│ │
│ │
│ Component Canvas │
│ (no position info) │
│ │
│ │
└─────────────────────────────────────┘
After (with rulers):
┌───┬─────────────────────────────────┐
│░░░│ -10 ▼0 10 mm │ ← Position info!
├───┼─────────────────────────────────┤
│ │ ┌─────────────────────────┐ │
│10◄│ │ │ │ ← Position info!
│ 0 │ │ Component Canvas │ │
│-10│ │ (with position info) │ │
│mm │ └─────────────────────────┘ │
└───┴─────────────────────────────────┘
Much better! Now you know exactly where you are at all times! 🎯
Tip: The red triangular indicators are the stars of the show - they make it super easy to see your exact position at a glance, just like in Photoshop!