Join multiple nodes to one

[kkyon]

It is great project. I want to use in a open source project , but It can't join/link multiple nodes/flows to one . it seem quick hard to enhance for a backend developer. Any help would be appreciated 。

[chaitanyya]

This according to me is a must have feature for the flowchart. I'll go through the code and see if I can create a pull request for the same.

[alyssaxuu]

I understand how this could be useful, but I just don't see how this could be implemented without rewriting Flowy entirely. I want to keep it simple, with automatic snapping and the blocks being properly aligned.

I suppose if you have an idea on how this could be done, from a UX perspective, I would be definitely interested and might actually implement it if I think it would fit with the library.

[kkyon]

The amazing part of Flowy is connecting node is more natural and elegant, comparing to drawing link . I hope we can stay current operation 。 My idea is ： Firstly drag block to canvas . it will connect to first parent node . And There are two possible options to connect more parent nodes :

1. By dragging node to overlay intended parent block . Currently dragging linked node will loss link and delete node . I hope that "dragging node to others nodes" will connect additional parent node. And deleting node and link by selecting and pressing button/key . Beacuase we may drag nodes carelessly ，and it is horrible loss many nodes by a tiny drag.
2. Connect more nodes by "Select a node, hold shift and select another node." . I found the idea from project "https://github.com/mariusbrataas/flowpoints.js". And deleting node like option 1.

I prefer option 1.

Alignment Algorithm:

1. Vertical position is next layers to lowest parent node. it is same to current version.
2. Horizontal position is kind difficult to resolved . I have some ideas . a) Treat node as child of the lowest parent node like current version.
   b) Align the block horizontally to middle position of the multiple parent nodes. If there are many noodes in same layer. It will need to rebalance the position. This algorithm makes graph looks elegant when having few nodes , thinking about diamond shape.

[alyssaxuu]

The amazing part of Flowy is connecting node is more natural and elegant, comparing to drawing link . I hope we can stay current operation 。 My idea is ： Firstly drag block to canvas . it will connect to first parent node . And There are two possible options to connect more parent nodes :

1. By dragging node to overlay intended parent block . Currently dragging linked node will loss link and delete node . I hope that "dragging node to others nodes" will connect additional parent node. And deleting node and link by selecting and pressing button/key . Beacuase we may drag nodes carelessly ，and it is horrible loss many nodes by a tiny drag.
2. Connect more nodes by "Select a node, hold shift and select another node." . I found the idea from project "https://github.com/mariusbrataas/flowpoints.js". And deleting node like option 1.

I prefer option 1.

Alignment Algorithm:

1. Vertical position is next layers to lowest parent node. it is same to current version.
2. Horizontal position is kind difficult to resolved . I have some ideas . a) Treat node as child of the lowest parent node like current version. b) Align the block horizontally to middle position of the multiple parent nodes. If there are many noodes in same layer. It will need to rebalance the position. This algorithm makes graph looks elegant when having few nodes , thinking about diamond shape.

Not really keen on dragging nodes myself (as the arrows are automatically generated & spaced accordingly, wouldn't be very intuitive from a user perspective as you couldn't "draw" them or drag to connect). So both options don't really seem that great to me to use in the library, personally. I would have to think about it I suppose, the only option that I could consider is to allow the joining of nodes to one for all last blocks in a flowchart (so having the option to create blocks that have this special behaviour, when dragged all the last blocks would automatically attach to it, and you could then continue attaching blocks if you wanted below this one).

The idea is that I want to ensure all blocks connect when you drop them on the canvas, so I don't want to have users place a block and then manually connect the nodes. Maybe a possibility I could also consider is to hold shift/press control key while dragging a block over a potential parent (with the blue indicator showing), and then being able to drag said block under other blocks and "locking" those (the indicator would still be visible). Just an idea, let me know what you think ^^