Circuitry Logo
Circuitry
Open Circuitry

The Selection Toolbar

Select something, and the interface comes to you. The moment you select anything — a pen sketch, an image, a node, a design element — a row of pill-shaped action buttons appears at the top-center of the canvas with exactly the actions that make sense for that selection. No hunting through menus, no memorising where things live: the toolbar reads what you've picked and offers the next move.

It's the same toolbar everywhere. On the whiteboard, in workflows, and in the Designer, selecting something summons the same row in the same place — so the muscle memory you build on one surface carries to all of them. And because every action is a real button, it's how touch and pencil users reach everything the right-click menu offers. On an iPad, this row is the context menu.

A few behaviours worth knowing up front:

  • Buttons with a small triangle in the corner are flyouts. Tap one and the row is replaced by its sub-actions plus a ← Back button; Esc or a tap elsewhere collapses it.
  • Some buttons are state-dependent. Lock becomes Unlock, Group becomes Ungroup — the same button swaps its face in place to match your selection.
  • The ⋯ More button opens the full context menu directly below itself, so the long tail of actions is never more than two taps away.
  • Hover any button (mouse or pencil) for a tooltip naming it. In settings you can show text labels instead of icons, and pick a button size.
  • Copy flashes green for a second when it succeeds — instant confirmation without a popup.

When you select drawing objects

Select ink, shapes, text, or images on the whiteboard, a workflow canvas, or the Designer and you get the full drawing action row:

  • Vision — flyout of on-device image edits for selected images: Remove Background , Auto Enhance , and a nested Filters set — Sepia Tone , Black & White , Noir , Vintage , Blur , Sharpen , Vibrance . Runs on supported Apple hardware; the edits are enabled when the selection is images only.
  • AI Generate — regenerate a single selected image with AI.
  • Explode — break a selected vector image or untouched library icon into individually editable shapes.
  • Sketch to AI — generate a finished AI image from your selected sketch; on an image you generated earlier, it re-opens the wizard so you can refine the prompt.
  • OCR — flyout of text-recognition actions for any selection: Convert to Text replaces handwriting with an editable text object, and Copy Text recognises the writing and puts the text on your clipboard.
  • 2vec — convert a selected image into clean, editable vectors.
  • Z-Order — flyout for stacking: Bring to Front , Move Forward , Move Back , Send to Back .
  • Copy — copy the selection to the drawing clipboard.
  • Copy as Image — copy the selection rasterised as an image.
  • Paste — paste the drawing clipboard. This button only exists while the clipboard actually has content — no dead Paste button, ever.
  • Duplicate — duplicate the selection in place.
  • Clip+ — save the selection as a reusable clip.
  • Lock — lock the selected objects so they can't be moved or edited. When everything selected is already locked, the same button becomes an amber Unlock — one glance tells you the state.
  • G — Group / Ungroup. Select two or more objects and the bold G groups them; select a group (or any member of one) and the same button, highlighted, ungroups it.
  • To Node — the whiteboard-to-workflow bridge: converts labelled sketch blocks, text, and even raw handwriting into real flow nodes, wiring your drawn arrows into live connections. Appears in the workflow editor when the selection has something convertible. See Sketch to Diagram.
  • Delete — delete the selection.

If a node is selected at the same time as drawing objects, the node's actions take priority — the toolbar always shows one coherent set, never a mixture.

When you select a node

Select a single node in a workflow and the row becomes node-centric:

  • Rename — rename the node; first in the row for quick access.
  • Convert to — for sketch-style flow nodes, opens the node picker to convert it into a real node type.
  • Run from Here — run the workflow starting at this node.
  • Run This Only — run just this one node. (Both run buttons step aside on pure diagramming nodes, where there's nothing to execute.)
  • Configure — open the node's configuration panel.
  • Open Editor — for nodes with a full editor behind them (code, agent, chat, data grid, 3D, web), open that editor.
  • Edit Database — on database nodes; vector-store nodes show Edit Store instead. Jumps straight into the data editor without expanding the node.
  • Expand Inline — when a node's detail view normally opens in the side panel, this expands it inline on the canvas instead.
  • Duplicate — duplicate the node.
  • Delete — delete the node.
  • More — open the node's full context menu right below the button: View Output, Copy, Cut, detail-view modes, and type-specific actions.

When you select several nodes

Multi-select and the row switches to arrangement tools:

  • Align — flyout: Align Left, Center, Right, Top, Middle, Bottom.
  • Distribute — flyout that spaces three or more selected nodes evenly, horizontally or vertically. (It appears once your selection reaches three.)
  • Auto Layout — flyout that lays the selected nodes out automatically, horizontally or vertically.
  • Duplicate — duplicate everything selected.
  • Delete — delete everything selected.
  • More — the full multi-node menu (Open in CodeBook, Copy, Cut, and more) opens below the button.

When you select design elements

The Designer adds selection rows of its own:

A selected HTML component (in Design or HTML mode):

  • Edit — step inside the component to edit its individual elements.
  • Edit Strokes — revert the component back to the editable drawing it was made from.
  • To Primitives — convert the component into drawing primitives.
  • Copy, Duplicate, Delete — the essentials, same as everywhere else.

An element inside a component (while editing it): a focused row of Copy, Paste, Duplicate, and Delete at the element level.

Drawings in HTML mode get a conversion-focused row: Edit Strokes for already-converted drawings, or a Convert flyout — To HTML , To SVG , To Image — plus Delete.

When nothing is selected

If your drawing clipboard has content, a lone Paste pill appears so pasting never requires a menu. In drawing mode, when Paste would be the only button, it moves up into the drawing toolbar instead of floating alone over your canvas.

Some tools also put their live controls here: with the icon stamp tool active, Zoom Speed and Rotation Speed buttons join the row, each opening a slider panel beneath it.

Keyboard

The toolbar is deliberately pointer-first — every action is a visible button rather than a hidden shortcut. One key matters:

KeysAction
EscClose an open flyout or control panel

Works with the rest of the studio