Edge measurements
I designed this measuring interaction for Blueprints to keep each measurement attached to the edges it describes. You can try the reconstruction on a frozen Timer Live Activity.
Measuring the design
An expanded Timer sits on a gray grid. Outline shows its shape; Fill restores its original colors. Switching views keeps the blue bounds, white handles, layout, and measurements in place.
Arlan’s vector editor provides a reference for the frame treatment. The lines, caps, and compact value labels use Blueprints’ measurement styles. Values sit on the measurement line inside the Timer. Outside it, a tailed badge floats clear of the measurement.
Choosing an edge
A small pink dot settles on the nearest edge as the pointer approaches. A narrow area around the line makes it easier to select while keeping the measurement anchored to the edge.
The measurement follows the pointer as you drag between edges. Once placed, drag its value to move the line without changing the measured distance. Earlier measurements stay visible while another is added.
Editing a measurement
Select a measurement to change its color or toggle its hatched background. The background starts off, and the tail follows the measurement’s position automatically. The hatch covers the measured space where the two elements overlap.
Releasing near a destination edge keeps the measurement. A click without a drag leaves the canvas ready. Escape or an interrupted drag cancels the current change. Taps and keyboard selection also connect two edges; arrow keys move a focused measurement. Backspace or Delete removes the selected measurement. Its styles appear while it is selected; clicking away or moving focus outside dismisses them.