Editing several nodes, and the format painter

The Reportforge designer can change several nodes at once: their properties in the inspector, and their style and classes in the Style panel. The format painter copies one node's look onto others.

Selecting several nodes

Shift+click boxes on the canvas or rows in the outline to add them to the selection. In the outline, Shift+Up and Shift+Down add the next row. The node clicked last is the primary one, and the inspector lists it first.

The selection is kept in the page's address (sel=), so a link to the designer, or a reload, opens it with the same nodes selected. The status pill below the pages names the primary node and says how many are selected.

The inspector

With several nodes selected, the inspector shows the fields they all have, whatever their kinds. A text, a heading and an image all have Show if, Class, their style properties, their language and their notes and locks, so those are shown. An image's Asset isn't, because the text and the heading don't have one.

• Mixed. A field whose value differs between the nodes is empty and says "Mixed". A field set on some nodes and not on others is mixed too. A mixed checkbox shows a dash, and a mixed list says "Mixed".
• A change applies to each node. Type a value and press Enter, pick a choice, or clear a field with ×: every selected node gets it, in one step, so one Undo puts them all back. A mixed field left empty doesn't change anything.
• Locked nodes are left alone. A node that locks the property (in its notes and locks) keeps its value, and a notice above the pages says how many were left and which, for example "Left 1 of 3 as it was: title locks width." When every selected node locks a property, its field is read-only.
• One at a time. Text content, lists of items (a table's columns, a chart's series), maps, child nodes, the id, the JSON and the element sections (chart, matrix, columns, actions) are edited one node at a time. "Inspect … on its own" under the heading selects one of the nodes.

The Style panel

With several nodes selected, the Style panel shows:

• Their own style. Every property any of them declares in its own style, or a part's style, with its value when they all agree and "Mixed" when they don't. "Set on 2 of 3" says how many declare it. Type a value to set it on all of them, or press × to clear it from all of them. The form under the list sets a new property on all of them.
• Classes, as chips marked "on all" or "on some". × removes a class from every node that has it, + adds a class that is on some of them to the rest, and typing a class name adds it to all of them.
• Parts that all of the selected element types have, to style their part blocks together.

Each change is one undo step. Nodes that lock their style (or their classes) are left as they were, and a notice above the pages says how many. Computed values with their sources, "Save as class" and conditional rules are for one node at a time.

The format painter

The format painter copies a node's own format: its class list, its style and its conditional rules. A part's style (a table's header cells, say) goes only to a node that has that part too; the target keeps its style for parts the source's kind doesn't have. Nothing the source only inherits is copied: classes, defaults and the theme already apply wherever they apply. Nor is where a positioned box sits (its top, right, bottom and left in a frame, background or overlay): a painted box keeps its place, so painting one stamp onto another doesn't stack them. Pasting replaces the target's class list, style and rules, so a node with no style of its own clears the target's.

• The brush. Select the node to copy from, then press Paint format in the Style panel and click the node to paint, on the canvas or in the outline. The brush is put down after one node. Double-click Paint format to keep it on: each node you click is painted, until you press Escape or press the button again. While it is on, the pointer shows a copy cursor over the pages and the outline, and a notice above the pages says whose format is being painted.
• The keys. Ctrl+Alt+C copies the selected node's format, and Ctrl+Alt+V pastes it onto the selected nodes, all of them in one step.
• The menus. The canvas and outline menus have Copy style, Paste style and Paint format.

Each paste is one undo step. A property the target locks (its class, style or rules) is left as it was, and a notice above the pages says so.

Key	Does
Ctrl+Alt+C	Copy the selected node's style
Ctrl+Alt+V	Paste the style onto the selected nodes
Escape	Put the format painter's brush down (when it is on; otherwise, select nothing)

On macOS these are ⌘⌥C and ⌘⌥V.

For developers

• Selection. formatSelection and parseSelection (web/packages/designer/src/selection.ts) write node,other,other:part@instance. Ids can't contain a comma, so the other ids are read up to the part or the instance key.
• Inspector. web/packages/inspector/src/multi.ts: sharedFields and sharedForm (the fields every form has, matched by path and editor), sharedState (a field's value across targets, mixed, and how many lock it) and setSharedField (one EditCommand with a set or unset per target that changes, leaving those that lock it). Inspector.commit and Inspector.apply take one target or several. useInspector exposes targets and shared; InspectorField takes targets.
• Style panel. web/packages/style/src/multi.ts: sharedDeclarations, sharedClasses, setStyleOfAll, addClassToAll and removeClassFromAll. The panel passes only the targets that don't lock the property.
• Format painter. web/packages/style/src/painter.ts: copyFormat, paintedFormat, formatOps and paintFormat. The designer's side is web/apps/designer/src/painter.ts (the copied format, the brush, and usePainter, which paints the selection a click on the canvas or the outline makes) and the commands in commands/format.ts (format.copy, format.paste, format.paint, format.paintMany, format.stopPainting), with the menus' style group.