Foblex Flow
Assign Node to Connection on Drop
Description
This example shows how to drop a node onto an existing connection and insert that node into the graph. Instead of forcing users to delete an edge and reconnect everything by hand, the editor treats the connection itself as a valid drop target.
That pattern is useful in workflow builders, AI pipeline editors, ETL tools, and internal low-code products where users frequently add a new step between two already connected nodes.
The important part is not just the visual effect. A good implementation updates the graph structure, preserves a predictable drag-and-drop flow, and makes "insert between steps" feel like a first-class action.
Example
[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/assign-node-to-connection-on-drop/assign-node-to-connection-on-drop.component.html [component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/assign-node-to-connection-on-drop/assign-node-to-connection-on-drop.component.ts [component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/assign-node-to-connection-on-drop/assign-node-to-connection-on-drop.component.scss [common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss
When to use it
- Insert approval, transform, or retry steps into an existing chain.
- Let users enrich a workflow without rebuilding the entire edge path.
- Support palette-driven editing in denser diagrams.
This example focuses on edge hit-testing during drop, connection reassignment, and a smoother editing UX for real node-based interfaces.