Key Concepts

Understanding these core concepts will help you get the most out of DrawMotive.

Canvas and Viewport

The DrawMotive canvas is an infinite drawing surface. What you see on screen is a viewport — a window into that surface. You control the viewport by panning (moving the view), zooming (changing the scale), and rotating.

Internally, the canvas uses a mathematical coordinate system with the origin at the center and Y pointing up (like a math graph). The editor handles the conversion between this system and screen coordinates automatically.

Shapes and Graphics Items

Every object on the canvas is a graphics item. DrawMotive supports several types:

Item	Description
Line	A straight line segment between two endpoints
Rectangle	A four-sided shape defined by position and dimensions
Circle	A circle defined by center point and radius
Ellipse	An ellipse defined by center, width, and height
Text	A text label with configurable font, size, and alignment
Connector	A line that attaches to other shapes and reroutes when they move

Each item has properties (position, size, color, stroke) that you can modify through the editor or by dragging grip handles.

Layers

The canvas renders content in four layers, drawn from bottom to top:

1. Background — The grid, guides, and any reference images. This layer provides visual context but doesn't contain your drawing content.
2. Graphics — Your actual drawing objects. This is where shapes, lines, and text live.
3. Transient — Temporary visual feedback during interactions, like the selection rectangle or a shape preview while drawing.
4. Grip — Interactive handles that appear on selected objects, allowing you to resize, rotate, or connect shapes.

This layered system means grip handles always appear on top of your shapes, and selection rectangles never obscure the content underneath.

Constraints

Constraints are relationships between shapes that the editor enforces automatically. They bring CAD-like precision to diagramming.

Geometric Constraints

• Coincident — Two points occupy the same location
• Parallel — Two lines maintain the same angle
• Perpendicular — Two lines stay at 90 degrees
• Horizontal — A line stays parallel to the X-axis
• Vertical — A line stays parallel to the Y-axis
• Concentric — Two circles share the same center
• Equal — Two shapes maintain the same dimension (length, radius, etc.)

Dimensional Constraints

• Line Length — A line maintains a specific length
• Diameter — A circle maintains a specific diameter
• Angle — Two lines maintain a specific angle between them
• Distance — Two points maintain a specific distance apart

When you move a constrained shape, the constraint solver adjusts all connected shapes to satisfy every active constraint simultaneously.

CRDT and Collaboration

DrawMotive uses Conflict-free Replicated Data Types (CRDTs) to enable real-time collaboration. Here's what that means in practice:

• Every edit is local first. When you draw a line, it appears on your screen immediately. No server round-trip required.
• Changes sync in the background. Your edits are packaged into transactions and sent to other users through the server.
• Conflicts resolve automatically. If two people edit the same property at the same time, the system uses last-write-wins (LWW) with timestamps to pick a winner. Both users converge to the same result.
• Vector clocks track causality. The system understands which edits happened before others, so it can apply changes in the correct order.

Offline-First

DrawMotive is designed to work without a network connection:

• All edits are saved to IndexedDB in your browser immediately
• A sync queue tracks which changes need to be sent to the server
• When the network returns, the queue drains automatically
• The server is a relay, not a requirement — your drawing exists locally

This means you can work on an airplane, in a coffee shop with spotty Wi-Fi, or anywhere else. Your work is never lost.

Transactions

Every change in DrawMotive is recorded as a transaction — a group of operations that happen together. A transaction might contain:

• An AddItemOperation (you drew a new shape)
• An UpdatePropertyOperation (you changed a color or moved an endpoint)
• A RemoveItemOperation (you deleted a shape)

Transactions are the unit of synchronization. They're stored locally, sent to the server, and applied on other clients. They're also the basis for undo/redo — pressing Ctrl+Z reverses the most recent transaction.