Drafting Cursor

Ink of the crosshair, rulers, guides and pin notes, and the fill of the ink chip. The default inherits the surrounding text colour, so it follows light and dark themes.

Colour of the marker, the ruler notches, pins and the measuring line. Chip text picks black or white automatically for contrast.

Hairline thickness in CSS pixels. Lines snap to whole device pixels so they stay sharp on every screen.

Stroke of the crosshair. Dashes are anchored to the page, so they never crawl as the cursor moves.

Opacity of the crosshair, from 0 to 1. The measuring guides scale with it.

Clear radius in pixels around the exact point, where the lines stop. It tightens while a button is held.

Fades the crosshair out towards the edges of the component, from 0 (none) to 1 (long fade).

Shape drawn at the exact point. Over links and buttons a thin ring opens around it.

Diameter of the marker in pixels.

Show the live coordinate readout beside the point.

Text shown at the start of the readout chip, for example "Aim". With coordinates off, the chip shows only the label.

Units of the readout, the pin notes and the ruler labels.

Where zero sits. Center and bottom-left count Y upwards, like a drawing; top-left counts down, like the screen.

Fill of the readout chip: solid ink, the accent colour, or a faint raised tint of the ink.

Font of the readout, ruler labels and notes. A monospaced font keeps the readout from changing width.

Edge rulers along the top and left. On hover they unfold with the crosshair; always keeps them on the page with a one-time sweep in.

Depth of the rulers in pixels.

Pixels between minor ruler ticks in px units. Every fifth tick is longer and every tenth is labelled.

Grid pitch in pixels. Above zero, a small patch of grid crosses appears around the cursor and snapping uses this pitch.

Snap the point to the grid, or to the ruler ticks when there is no grid. The crosshair glides between detents.

Follow lag from 0 (exact, like a native cursor) to 1 (soft and floaty).

Press and drag to measure: a dimension line with its run, rise, angle and length. Hold Shift to lock to 45° steps, press Escape to cancel. Turn it off if visitors need to select text inside.

Seconds a finished measurement stays before it fades. Pass Infinity to keep it until the next one.

Click without dragging to stamp a pin with its coordinates. Clicks on links, buttons and fields never pin.

Pins kept at once. The oldest fades out when a new one lands.

Seconds a pin stays before it fades. 0 keeps pins until they are pushed out.

Unfold the crosshair from the point to the edges when it appears, and fold it back when it leaves.

Seconds the first unfold takes. Later entries run a little faster.

While the pointer is away, a ghost operator glides around, takes measurements and drops pins. It hands over to the real pointer the moment it enters.

Speed multiplier for the autoplay operator.

Seconds after the pointer leaves before autoplay resumes.

Hide the native cursor inside the component. Text fields keep their caret, and the crosshair steps aside over them.

Follow the visitor's pointer. Turn it off to show only autoplay or scripted measurements.

Hide the crosshair and ignore all input.

Custom readout text. Receives the coordinates after units and origin are applied.

Called when a measuring drag ends, with x1, y1, x2, y2, dx, dy, length and angle in pixels and degrees.

Called when a click drops a pin, with its position in pixels from the top-left corner.

Script it: measure(x1, y1, x2, y2) draws a measurement, pin(x, y) stamps a pin, clearPins() fades them all, replay() unfolds the crosshair again.

Put it on any element inside to show that text in the chip while the pointer is over it.

Keep the native cursor over an element, the same way text fields do.

Content the crosshair draws over.

Classes for the root element. It fills its parent and is at least 240px tall.