pages-multi-select

Summary

In Edit, several elements you drew are picked at once and changed together, as in Figma. ⇧-click adds an element to the selection or takes it out; dragging on empty canvas draws a box that picks every drawn element it touches; ⌘A picks everything drawn on the page. Esc lets go.

Raw wireframe

• .context/designs/web/pages-edit/pages-multi-select.html

Why it is drawn this way

One box around the selection. Each element keeps a thin outline, and one box with eight handles goes round all of them, labelled with how many and how big. Dragging any of them moves all of them; the arrows nudge all of them; the handles resize the box, and every element in it scales with it.

The inspector says what is picked, once. "3 selected" in the header; a Selected list, where a row opens that element alone; Place, where X and Y move the whole selection and W and H are the box's size; Style, where a value the elements share is shown and a value they do not share reads Mixed. Setting either sets it on all of them. Duplicate (⌘D) and Delete (⌫) act on all of them, and so do Copy, Paste, ] and [.

Drawn elements only, for now. A captured element is where the product put it, so it cannot be moved with the rest. ⇧-click on a captured element picks it alone. Restyling several captured elements at once is a later step.

Each change is one step in the draft and in Undo, however many elements it touches, and shows in the frame at once, as a single element's change does. Every drawing call takes a list (elementIds, or moves for a move); the elements must be on one page or variant. Brought to front or sent to back together, they keep their order among themselves (arrangeAll); one inside a frame also picked goes with the frame and is not moved or copied twice (outermost).

Not yet: the right-click menu acts on one element; a box drawn over captured elements picks only what was drawn.

Related

• pages-edit
• shortcuts

Sources

• .context/designs/web/pages-edit/pages-multi-select.html