New feature: Distance-to-guide (perpendicular measurement)

[pgivel]

Summary

When guides (#10) are placed on screen, allow measuring the perpendicular distance from the cursor (or a snapped point) to the nearest guide.

Use case

"How far is this element from the left margin?" — place a vertical guide on the margin edge, then point at the element to see the perpendicular distance. Essential for validating padding, margins, and offsets against a spec.

Interaction

This is not a separate mode — it augments any measurement mode when guides are present:

• When the cursor is near a guide, a perpendicular distance indicator automatically appears:
  • A short connector line from the snapped cursor position to the nearest guide, perpendicular to the guide.
  • A label showing the distance in px.
• If multiple guides exist, show distance to the nearest guide (or the nearest guide on each axis).
• (Optional: hold a modifier key like Alt to see distances to all guides at once.)

Display

• Thin connector line (dashed or dotted) from cursor/snap point perpendicular to the guide.
• Distance label at the midpoint of the connector.
• Color matches the guide it connects to.

Implementation notes

• For a vertical guide at x = G and cursor at (cx, cy): distance is |cx - G|, connector is horizontal.
• For a horizontal guide at y = G: distance is |cy - G|, connector is vertical.
• This is a pure QML/JS computation — no backend call needed.
• Could be computed in the existing poll() update cycle or reactively when cursor position changes.
• Requires guides (New mode: Orthogonal guides #10) to be implemented first.

Depends on

• New mode: Orthogonal guides #10 (Orthogonal guides)