Make multi-selection reliable and add bulk canvas actions

[Fuzzdkk]

Why

I was running into cases where quickly Shift-clicking several assets would replace the current selection or miss a click.

There were two causes:

• React Flow’s modifier and controlled selection state could lag behind back-to-back pointer events, so the next click sometimes saw the previous state.
• Touchpad clicks can move a few pixels, while the default node click tolerance is zero. That movement could be treated as the beginning of a drag instead of a click.

The selection state is now synchronized before React Flow handles the pointer event, and nodes allow a small amount of click movement.

What changed

• Rapid Shift-clicks consistently add or remove assets from the selection
• Holding Shift before selecting the first asset works reliably
• A shared toolbar appears when multiple items are selected
• Right-clicking an asset opens the same actions for single and multiple selections
• Selected eligible assets can be marked compromised or assigned an investigation status together
• Selected non-group assets can be aligned or distributed
• Multiple selected assets can be copied or deleted together
• Copying selected assets preserves the routes between them, including parallel routes, while excluding routes to assets outside the selection
• Bulk status changes, layout changes, copy/paste, and deletion are handled as single undo steps
• Undo and redo preserve the current selection where possible
• Assets, routes, and route detail boxes have clear multi-selection feedback
• A route can be selected by clicking its detail box
• Individual toolbars and resize controls are hidden during multi-selection to avoid overlapping controls
• Temporary selection state is left out of saved canvases, JSON exports, and custom templates

Demo

Shift selection stability

Rapidly adding and removing assets while holding Shift.

shift-selection-stability.mov

Bulk editing toolbar

Using the shared toolbar with a selection containing assets and routes.

bulk-editing-toolbar.mp4

Copying connected assets

Copying and pasting two selected assets while preserving the route and detail box between them.

copy-paste-with-details-node.mov

Testing

I tested:

• Rapid Shift-click selection and deselection
• Holding Shift before the first selection
• Touchpad movement during Shift-clicks
• Single and multiple-selection right-click actions
• Mixed selections containing assets and routes
• Bulk compromised and investigation status changes
• Alignment and distribution with different asset sizes
• Copying connected assets, parallel routes, and excluding external routes
• Bulk deletion and connected-route cleanup
• Selecting locked and unlocked routes
• Selecting and highlighting routes through their detail boxes
• Undo and redo for each bulk operation
• TypeScript checks
• Production build
• Selection layout unit tests
• Browser regression coverage for the selection workflows

Note

I started working on this before the Ctrl-selection change in #6 landed. After updating the branch, I kept that implementation in place and focused this work on Shift-click reliability and the actions available once multiple items are selected.

Control-click is also the native context-menu gesture on macOS, so it does not behave reliably as a selection modifier there. I have left that behavior unchanged. Would you prefer Shift to remain the Mac selection modifier, or should macOS use Command-click while Windows and Linux retain Ctrl?

I needed this for working with larger canvases, but I’m open to splitting parts of it out or handling the interaction differently if that fits the project better.

[Guzzy711]

Jesus man you have been cooking some amazing stuff. Will take a look.