How to present conditional and looping with flowy? about flowy HOT 4 CLOSED

Currently Flowy doesn't have such features as it's meant to be minimal. Could implement those if I could think of a simple user behaviour to make such connections - would the blocks automatically come with that sort of logic (e.g. the Validate block loop, or in the case of if/else)? Are there only specific scenarios where this would happen or should it be possible to generate connections between blocks as needed?

from flowy.

I discovered this amazing project just 5 minutes ago, and I'm already considering replacing my Elsa Workflow designer (which is based on jsPlumb) with Flowy.

However, as @kafai97 describes, I'm looking for the ability to allow arbitrary connections be made between any two blocks. This enables modeling flowcharts to loop back, fork/join and multiple incoming connections to a given block as depicted here:

From what I've seen so far, Flowy automatically creates a connection when dropping a block from the toolbox onto another block on the canvas.

Perhaps the following UX could help:

1. User drops a block A onto the canvas.
2. User drops another block B onto the canvas (not on block A, but below/besides/arbitrary location).
3. Now the user wants to connect the two blocks manually. They do so by clicking/hovering the source block, after which available endoints (the little blue circles) appear. User grabs one of these endpoints and drags it onto the target block. A new connection is created after releasing the mouse.

It would work a little bit like this demonstration.

In the case of the designer requirements for Elsa Workflows, I would need the designer to allow each block to have an arbitrary number of handles/endpoints from which the user can drag connections to other blocks.

I guess the tricky part might be the automatic layout of blocks that you have currently in place. I noticed that as soon as I drop a block onto another block, a connection is automatically created and the block is automatically given a location on the canvas. I imagine you perform this layout based on blocks and their connections. When you were to allow users to drop blocks without having a connection initially, it would probably be difficult to determine where the block should be located. On the other hand, perhaps it makes sense for disconnected blocks to not be auto-positioned at all, and just let them "float" - until the user connects this block to another one, after which Flowy would perform the automatic layout.

Is this something you would consider implementing?

from flowy.

I discovered this amazing project just 5 minutes ago, and I'm already considering replacing my Elsa Workflow designer (which is based on jsPlumb) with Flowy.

However, as @kafai97 describes, I'm looking for the ability to allow arbitrary connections be made between any two blocks. This enables modeling flowcharts to loop back, fork/join and multiple incoming connections to a given block as depicted here:

From what I've seen so far, Flowy automatically creates a connection when dropping a block from the toolbox onto another block on the canvas.

Perhaps the following UX could help:

1. User drops a block A onto the canvas.
2. User drops another block B onto the canvas (not on block A, but below/besides/arbitrary location).
3. Now the user wants to connect the two blocks manually. They do so by clicking/hovering the source block, after which available endoints (the little blue circles) appear. User grabs one of these endpoints and drags it onto the target block. A new connection is created after releasing the mouse.

It would work a little bit like this demonstration.

In the case of the designer requirements for Elsa Workflows, I would need the designer to allow each block to have an arbitrary number of handles/endpoints from which the user can drag connections to other blocks.

I guess the tricky part might be the automatic layout of blocks that you have currently in place. I noticed that as soon as I drop a block onto another block, a connection is automatically created and the block is automatically given a location on the canvas. I imagine you perform this layout based on blocks and their connections. When you were to allow users to drop blocks without having a connection initially, it would probably be difficult to determine where the block should be located. On the other hand, perhaps it makes sense for disconnected blocks to not be auto-positioned at all, and just let them "float" - until the user connects this block to another one, after which Flowy would perform the automatic layout.

Is this something you would consider implementing?

I understand the need for this sort of functionality in some scenarios, but I just feel like this is not what this library is really about. I created this because all the other flowchart libraries were unnecessarily complicated, made it hard to place blocks which you then had to connect manually, and often required other dependencies like jQuery.

Flowy is just a simple library that allows people to quickly implement flowchart functionality in their projects with basic features, with very few lines of code. People are free to add more functionality to the library depending on their needs, but I like the base being as simple as possible, with only the most important features coming together with it.

What you are proposing is basically just turning this into a complex flowchart library, and having the same functionality that many other Javascript libraries already have - nothing unique about that. I don't really plan to do so, and in any case, it would be something separate from Flowy, most certainly.

from flowy.

I'm closing this issue as it deviates too much from the current library, and I can't think of any possible implementations that would work with it in the current state.

from flowy.