Cut, Copy, and Paste Example

Description

Add familiar cut, copy, and paste interactions to a node editor while keeping IDs, offsets, and connections consistent. This pattern matters once users need to duplicate or reorganize larger graph fragments quickly.

Example

[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/advanced/copy-paste/copy-paste.html [component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/advanced/copy-paste/copy-paste.ts [component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/advanced/copy-paste/copy-paste.scss [common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss

What this example shows

Copy selected nodes and the connections that stay valid inside the copied fragment.
Cut nodes by copying them and then removing them from the diagram.
Paste clipboard content with regenerated IDs and a slight position offset.
Rebuild connections only when both source and target nodes exist in the pasted selection.

Clipboard content is stored in local state, and new IDs are generated during paste so the graph remains valid.

When to use it

Users expect desktop-like editing shortcuts.
The editor needs fast duplication of nodes and their connections.
Teams frequently reorganize parts of a workflow by reusing existing graph fragments.