Foblex / f-flow

Foblex Flow - is an Angular library designed to simplify the creation and manipulation of dynamic flow. Provides components for flows, nodes, and connections, automating node manipulation and inter-node connections.
https://flow.foblex.com/
MIT License
96 stars 19 forks source link

Snap connections #40

Closed raducostea closed 2 months ago

raducostea commented 2 months ago

Description

It will be a nice feature to have the ability to snap connections into place. Have some sort of threshold value and search for the closest fNodeInput to snap into.

Additional Context

No response

siarheihuzarevich commented 2 months ago

@raducostea Hello, could you please describe in more detail what you mean?

raducostea commented 2 months ago

Hello,

Sure. When you connect to nodes, you have to hover exactly over the fNodeInput and release to create the connections. What will be great that lets about 20px near the node, the "arrow" will snap and connect to the node.

For example https://resources.jointjs.com/demos/rappid/apps/Chatbot/index.html

When you drag a connection, it snaps to a node if you are near it.

This will be useful when using small connection points.

siarheihuzarevich commented 2 months ago

@raducostea Thanks for the clarification. I think I can implement something like this in 2 - 3 weeks

siarheihuzarevich commented 2 months ago

@raducostea Done. Snap connection documentation Also you can see the use of f-snap-connection in this example: Foblex Flow DB Management Example

raducostea commented 2 months ago

@raducostea Done. Snap connection documentation Also you can see the use of f-snap-connection in this example: Foblex Flow DB Management Example

Nice!!! Appreciate it