24db186ac8
* feat: select layers at Figma's click depth Checked against Figma desktop 126 with the same pointer input in both editors. A click walks from the page down to the deepest layer under the cursor and stops at the first layer that is not open: top-level frames (on the page or in a section) and sections that hold layers, component sets, and every ancestor of the selection are open. So a click inside a top-level frame selects its direct child, the empty part of a top-level frame or section selects nothing, and a selected layer's siblings and cousins are one click away. Double-click goes one level deeper and Cmd/Ctrl-click reaches the deepest layer. A marquee started inside a top-level frame or section selects that container's layers; from the page, a frame or section holding layers is selected only when fully enclosed. * fix(vue): compare marquee hits by canvas bounds A marquee scoped to a rotated frame mapped only two corners into its space, and page-level enclosure used a frame's unrotated rectangle. Both now compare each layer's axis-aligned canvas bounds with the marquee, so rotated frames and their children are selected by what is drawn.
5.3 KiB
| title | description |
|---|---|
| Selection & Manipulation | Selecting, moving, resizing, rotating, duplicating, and organizing nodes in OpenPencil. |
Selection & Manipulation
Select objects to move, resize, rotate, duplicate, and organize them on the canvas.
Selecting
- Click a node to select it (deselects everything else). As in Figma, a click inside a top-level frame selects that frame's direct child, such as a nested frame or a group, rather than the deepest layer; click a top-level frame by its title, or anywhere when it is empty
- Double-click to go one level deeper; once a layer is selected, clicks reach its siblings and cousins directly
- ⌘ + click (Ctrl + click on Windows and Linux) selects the deepest layer under the cursor
- Shift + click to add or remove a node from the current selection
- Marquee drag — drag on empty canvas to draw a selection rectangle; intersecting nodes are selected on release. Started inside a top-level frame or section, it selects that container's layers; from the page, a frame or section that holds layers is selected only when fully enclosed
- ⌘A — select all nodes on the current page
- Click empty canvas — deselect all
Moving
- Drag a selected node to move it (all selected nodes move together)
- Arrow keys — nudge selected nodes by 1 px
- Shift + arrow keys — nudge by 10 px
Resizing
Selected nodes show 8 resize handles (4 corners + 4 edge midpoints). Drag any handle to resize.
- Shift + drag a corner handle to constrain proportions
Moving into and out of frames
A dragged node lands in the frame under the cursor when you release it, however little of it is inside, and leaves its frame as soon as the cursor does. Groups and locked frames never take dropped nodes, and a component set takes back only its own variants; a node inside a group stays in it unless you drop it on a different frame, and the group resizes to fit what it holds. A group whose last node leaves is removed. Pressing inside a selected frame, group, or component set drags it rather than the node under the cursor.
- Shift + drag — lock the move to one axis
- Hold Space while dragging — keep the nodes in their current parents
- ⌃ + drag (Ctrl + drag on Windows and Linux) — turn off snapping; dropped into an auto-layout frame, the node is positioned absolutely
Locked nodes in a selection stay where they are when the rest of it moves.
Rotating
Hover just outside a corner handle to see the rotation cursor. Drag to rotate.
- Shift + drag snaps rotation to 15° increments
Duplicating
- Alt + drag (⌥ + drag on Mac) — duplicate the selected node and move the copy
- ⌘D — duplicate in place; a lone top-level frame's copy, on the page or in a section, goes into the first free space to its right
Duplicates keep their names. Duplicating a main component this way creates an instance of it.
Pasting
⌘V keeps the copied position. Pasted into a selected frame, nodes keep their offset from the frame they were copied from, and are centered along any axis where they don't fit; nodes that would land out of view are centered in it. Use Paste here in the context menu to paste at the cursor.
Deleting
Press Backspace or Delete to remove all selected nodes.
Z-Order
Change the stacking order of nodes within their parent:
- ] — bring to front (top of sibling list)
- [ — send to back (bottom of sibling list)
Visibility & Lock
- ⇧⌘H — toggle visibility. Hidden nodes don't render but stay in the layers panel.
- ⇧⌘L — toggle lock. Locked nodes can't be selected or moved on canvas.
Move to Page
Move selected nodes to a different page via the context menu. The nodes are reparented under the target page's canvas.
Sections
A section takes in the sibling nodes it fully covers when you draw it, move it, or resize it over them.
Keyboard Shortcuts
| Action | Mac | Windows / Linux |
|---|---|---|
| Select all | ⌘A | Ctrl + A |
| Duplicate | ⌘D | Ctrl + D |
| Duplicate + move | ⌥ + drag | Alt + drag |
| Move along one axis | ⇧ + drag | Shift + drag |
| Keep current parent | Space while dragging | Space while dragging |
| Move without snapping | ⌃ + drag | Ctrl + drag |
| Delete | ⌫ / Delete | Backspace / Delete |
| Nudge 1 px | Arrow keys | Arrow keys |
| Nudge 10 px | ⇧ + Arrow keys | Shift + Arrow keys |
| Bring to front | ] | ] |
| Send to back | [ | [ |
| Toggle visibility | ⇧⌘H | Shift + Ctrl + H |
| Toggle lock | ⇧⌘L | Shift + Ctrl + L |
Tips
- Use the Layers & Pages panel to see and reorder nodes when they overlap.
- See Context Menu for additional actions like grouping and component creation.