8d132ce070
* fix(vue): keep the command palette open when a command opens a step CommandPaletteRoot emitted select for every item, including one that only opens its children, so a host that closes on select closed the palette instead of showing the step. useCommandPalette.select now reports whether a command ran, and the root emits only then. Disabled items were marked only with Reka's data-disabled; expose aria-disabled so assistive technology announces them. * feat(app): jump between pages from the command palette The palette had no way to reach a page. It now lists the pages visited recently in the tab, offers a Go to page step with every page, and finds any page by name. Recent pages are tracked per editor session from page changes and reset when the document is replaced. Palette items can be search-only, so pages beyond the recent ones appear only when the query matches them. The divider-page rule moves out of PageListRoot so the palette skips dividers the same way, and useCommandPalette is exported from the package root. * feat(canvas): draw agents' cursors as outlined sparkles Editor state's remoteCursors becomes presenceCursors with a kind, since the list now includes local agents. People keep the filled arrow; an agent is a sparkle outlined in its owner's color, with an outlined name pill, so whose agent it is reads from the outline. Cursor drawing moves out of the pen overlay into canvas/overlays/presence.ts. * feat(app): publish AI agent presence to collaborators The built-in chat now appears as an agent with a callsign while it replies, at the nodes its tools touch on the run's page, and goes idle (off the canvas) when the reply ends. Agents live in a per-document presence registry and are published in their owner's awareness state, so collaborators see each other's agents in the owner's color; the payload is metadata only. Peer awareness was cast without checks. It is now validated with Valibot, invalid fields are dropped rather than the peer, and names, selections, and agent counts are bounded. * feat(app): follow agents and list them in the share panel Following lived in collab and only knew people. It moves into the presence registry with a person-or-agent target, so you can follow anyone's agent, including your own outside a room: the view goes to the agent's page and keeps its cursor centered, stays attached while it idles between replies, and lets go when it leaves. A new editor action, centerOn, replaces reading the canvas size from the DOM. Peer cursors keep their zoom so following a person still matches it. The share panel lists everyone in the room with their agents, each with its status, page, and a follow toggle, and your own agents can be renamed inline. CollabPanel moves to collab-panel, and the two-browser relay helpers move out of the collab spec into tests/helpers/collab. * feat(app): show who works on each page Agents now publish the page they work on, set when a reply starts on its pinned page and moved by switch_page, so a page is marked before the agent's first edit. presenceByPage groups people and working agents by page. The Pages panel marks those pages with people's dots and agents' outlined sparkles in their owner colors, the command palette names who is on each page, and the chat says which page a reply is working on, with Go to page, while you view another one. * docs(collaboration): list the agent model among shared presence * test(app): stories for page presence markers and the chat's run location The run location notice reads app state, so it moves into useChatRunLocation and the component takes the agent and page as props. * test(vue): a canvas story for presence cursors Storybook now serves CanvasKit, so a story can render the real canvas: people's arrows and agents' outlined sparkles, with controls for names, colors, and zoom. * feat(canvas): mark agents with a sparkle label instead of a sparkle cursor A sparkle on its own did not read as a pointer. Agents now point with the same filled arrow as people, in their owner's color, and their outlined label starts with a sparkle. * refactor(app): split the collaboration theme by component One 18-slot theme served five components that each used a few slots, with variants that applied to one slot. Avatars, the share button, the presence list, page markers, and the mobile presence popover now have their own themes, exported as tv() like the rest of src/theme. * fix(app): truncate an agent's status before its name in the presence list In a narrow share panel the status kept its width and the callsign shrank to its first letter. * feat(app): right-align page badges in a trailing area of the page row Presence markers followed the page name. The row now has a trailing area, right-aligned with its own spacing, where markers and later page badges go. * fix(app): key page markers by person or agent, not by name Two people with the same name on a page, such as two Anonymous peers, gave page markers duplicate keys. Entries now carry a stable id.
3.9 KiB
| title | description |
|---|---|
| Canvas Navigation | Panning, zooming, ruler guides, snapping, and distance measurements in OpenPencil. |
Canvas Navigation
The canvas is your infinite workspace. You can pan and zoom freely to navigate your design.
Panning
Move the visible area of the canvas without affecting any objects.
- Space + drag — hold Space and drag anywhere on the canvas
- Middle mouse drag — press and drag the middle mouse button
- Two-finger trackpad — swipe with two fingers on a trackpad
- Shift + mouse wheel — pan horizontally
Hand Tool
Press H to activate the hand tool for continuous panning. Any drag on the canvas pans the viewport without needing to hold Space. Switch to another tool (e.g., V for Select) to deactivate.
Zooming
Zoom in and out centered on your cursor position.
- Ctrl + scroll (or ⌘ + scroll on Mac) — scroll up to zoom in, scroll down to zoom out
- Pinch gesture — pinch on a trackpad to zoom in/out
- Keyboard shortcuts — see table below
Pinch-to-zoom on UI panels (layers, properties) is prevented so it doesn't accidentally change the browser zoom level.
Keyboard Shortcuts
| Action | Mac | Windows / Linux |
|---|---|---|
| Pan | Space + drag | Space + drag |
| Hand tool | H | H |
| Zoom in | ⌘+ | Ctrl + + |
| Zoom out | ⌘− | Ctrl + − |
| Zoom to 100% | ⌘0 | Ctrl + 0 |
Ruler Guides
Enable View → Rulers, then drag from the top ruler for a horizontal guide or the left ruler for a vertical guide. Drop onto the page for a canvas guide, or onto a frame for a guide in that frame's coordinates.
- Click a guide to select it; drag it to reposition it or transfer it between the page and a frame.
- Hold Option / Alt while dragging an existing guide to duplicate it.
- Drag a guide back onto a ruler to remove it, or use its context menu's Remove guide action.
- Guide changes support undo/redo and are preserved in
.figfiles.
Snapping
Under View → Preferences, toggle Snap to Geometry, Snap to Objects, and Snap to Pixel Grid independently. Preferences are saved between sessions.
Geometry and object snapping help align vector points, moved layers, and resized edges with nearby geometry, objects, guides, and frame bounds. Alignment lines appear for those targets; pixel-grid rounding does not draw an alignment line for every pixel.
Hold Control during a layer drag to temporarily bypass object and pixel snapping, including on macOS where this is Control, not Command.
Distance Measurements
Select a layer, hold Option on macOS or Alt on Windows/Linux, and hover another layer to see temporary distance measurements. Releasing the modifier clears the overlay; it does not add guides or change the document.
Command Palette
Press ⌘K on macOS or Ctrl + K on Windows/Linux to search editor and application actions. Select a result to run it; unavailable actions remain subject to the current selection and document state.
The palette also moves between pages. Before you type, it lists the pages you visited recently in this tab, most recent first, and Go to page… opens a list of every page. Typing a page name finds it too. Pages where collaborators or AI agents are working list their names; the Pages panel marks the same pages with their colors.
Tips
- Zooming always targets the cursor position, so point at what you want to see closer.
- The hand tool is useful when you need to pan frequently — it stays active until you switch tools.
- See Selection & Manipulation for how to work with objects on the canvas.