Rectangle Manipulation
Notes, bubbles, session-area, blur rectangles, and other rectangular objects share a common interaction model on the canvas. This page describes what’s actually wired up today.
Selecting
With the Pointer tool active, click an object to select it. Selected objects show their grab handles.
The Eight Grab Handles
Selected rectangles show eight handles:
●─────●─────●
│ │
● ●
│ │
●─────●─────●
- Four corner handles — resize two edges at once. Cursor:
nw-resize,ne-resize,sw-resize,se-resize. - Four edge-midpoint handles — resize a single edge. Cursor:
n-resize,s-resize,e-resize,w-resize.
Click and drag a handle to resize.
The Move Icon
The move icon appears in the top-left area of a selected rectangle. Hover over it and the cursor becomes grab; while dragging, grabbing.
Click and drag the move icon to reposition the entire rectangle. Size stays the same.
Cursors Are the Affordance
Handles and the move icon become visible on hover/selection — they don’t clutter the canvas the rest of the time. The cursor change is what tells you a drag will resize-vs-move.
Minimum Sizes
There’s no universal minimum across all rectangles, but a couple of specific tools clamp:
- Session-area (
session-area) — clamps to a minimum of 20×20 px. - General annotation rectangles — clamp at 2 px during resize, effectively just preventing collapse to nothing.
Deleting
With a rectangle selected, Delete or Backspace removes it. The deletion is undoable like any other operation.
Reordering (Z-Order)
With a rectangle selected:
PageUp— move forward (toward the viewer) in z-orderPageDown— move backward
The change is undoable.
Notes (Comments) Specifically
Notes have an additional interaction beyond the generic rectangle model: double-clicking the focus rectangle re-opens the description textarea for editing. See Comment Workflow for the full Note lifecycle.