2D Drawing Tools

2D Drawing Tools

The drawing toolbox is the foundation of every project. It lets you sketch real-world geometry directly on the canvas with millimetre-accurate dimensions, an alignable grid, and powerful snapping.

Feature line from the README: 🖊️ Accurate 2D drawing with real dimensions, grid, and snapping.

At a glance

• Vector drawing on an infinite, pannable, zoomable canvas (Konva stage).
• Every coordinate is stored in millimetres; on-screen units are derived from the current viewport scale.
• A configurable grid layer with snap-to-grid and snap-to-feature.
• An "ortho measure" overlay shows live X/Y distances from the cursor to every nearby edge while a tool is active.
• All drawing actions go through the command system, so every shape is fully undoable (Ctrl+Z / Ctrl+Shift+Z).

The toolbox

The left-hand Tool Rail exposes one tool at a time. Each tool has a single-letter keyboard shortcut.

Shortcut	Tool	Purpose
V	Select	Pick, marquee, move, resize and reshape entities.
L	Line	Draw straight segments; chain them into a polyline.
R	Rectangle	Drag an axis-aligned rectangle from corner to corner.
P	Polygon	Click vertices and close the shape on the first point.
D	Dimension	Add a measured dimension line with an offset leader.
T	Label	Drop free-form text annotations.
M	Meter	Drop a measurement line that also shows live X/Y distances to surrounding shapes.
K	Cut	Insert a reference point along an existing edge.
F	Surface	Promote a closed shape into a named surface (see Surfaces).
O	Opening	Subtract a hole from a parent surface (see Surfaces).
C	Connection	Link two surface edges (see Surfaces).
X	Split surface	Cut one surface into two along a line (see Surfaces).

Pressing the shortcut of a tool that isn't currently allowed (for example, Opening without a selected surface) is silently ignored — the Tool Rail shows the same disabled state.

Real-world dimensions

• All numeric inputs accept values with units (1200, 1.2 m, 4 ft). The shared parseLength parser converts everything to millimetres and rejects malformed input with descriptive errors.
• Length editors persist in millimetres internally; rendering decides how to display them (mm, cm or m) based on the current "unit" setting per document.
• Live dimensions appear next to in-progress lines, rectangles and polygons while you draw, making it easy to enter exact sizes via the keyboard.

Grid and snapping

The Editor Toolbar has a toggle for each:

• Show / hide grid (G) — overlays the grid layer.
• Enable / disable snap (S) — controls snap-to-grid for new points.
• Drawing aids — turns on the ortho measure overlay and "drawing mode" outlines that highlight relevant geometry while a draft tool is active.

When snap is enabled, the cursor is rounded to the nearest grid intersection in world coordinates before a point is committed. Snap-to-feature also considers existing vertices and midpoints, so chains of segments line up even when the grid is sparse.

Modifier keys

• Shift — constrain the segment to 0° / 45° / 90° while drawing a line, or force a square while dragging a rectangle. With the Meter tool, Shift snaps a point onto the nearest existing edge.
• Alt — when held while dragging a rectangle, the rectangle is drawn from its center outward.
• Esc — cancels the in-progress draft for any drawing tool.
• Enter — commits a polygon by closing on the first vertex.
• Backspace — removes the last vertex while drawing a polygon.

Selection and editing

The Select tool is the default workhorse:

• Click an entity to select it; drag in empty space to marquee-select.
• Hold Shift or Ctrl while clicking to add / toggle entities.
• Drag a selected line, rectangle, polygon, surface or opening to move the current selection together.
• Drag edge or vertex handles on a selected shape to resize or reshape it.
• Ctrl+C copies the current selection into the editor clipboard.
• Ctrl+V pastes that clipboard 10 mm down and right, selects the pasted content, and immediately leaves it ready to move again.
• Ctrl+D duplicates the selection 10 mm to the lower right.
• Ctrl+A selects every selectable entity.
• Delete / Backspace removes the selection.

The same Copy and Paste actions are also available from the File menu. They enable only when the action makes sense:

• Copy is enabled when the current selection contains copyable drawing content.
• Paste is enabled after something has already been copied during the current editor session.

All edits flow through commands, which means Ctrl+Z always restores the previous state — including the active selection at the time of the edit.

Where this lives in the codebase

• Tools — src/features/drawingTools/
• Canvas, grid and viewport — src/features/editor/CanvasStage.tsx, src/features/editor/canvas/
• Length parsing — src/domain/units/
• Keyboard shortcuts — src/features/editor/useKeyboardShortcuts.ts
• Per-tool help cards — src/features/info/infoEntries.ts

Related pages

• Surfaces, Openings and Connections
• Background Image Calibration
• Placement Patterns