Remove endpoints and allow Stencil Elements to create flows

[PenelopeFudd]

I can create threats, and drag and drop stencils. The thing I can't figure out is how to connect the stencils with lines. If a person has to read the documentation to figure that out, it may be that the UI needs some more refinement.

[PenelopeFudd]

Aha. The animated gif made it clear; the solid circles on the edges of stencils are targets, the empty circles are sources. Could you make the empty circles into arrow heads, or somehow indicate that they're something to drag to make arrows?

[Glavin001]

Have you taken a look at https://github.com/mozilla/seasponge/wiki/Usage ?

/cc @Frozenfire92

[PenelopeFudd]

Yes, the animated gif on the Usage page made it clear, thanks. I'm just saying that the best programs I've seen didn't need (external) documentation for their basic functions. Also, UI design is hard. Also^2, seeing what difficulties absolutely new users encounter is the key to getting the UI perfect.

Thanks for a great program!

[Glavin001]

Absolutely agree. The goal is that the usage documentation is not even necessary, and we thought that had been achieved. However, I can understand how it may be confusing and we do want to make those endpoints more obvious that they are draggable. This UI / usage is common with jsPlumb however it may be unexpected for new users, and we can no longer be unbiased since we've developed this UI.

Another idea is that we get rid of the endpoints entirely and make the stencil element itself like an endpoint that you can just create and connect to. See http://www.jsplumb.org/demo/sourcesAndTargets/dom.html for example.

/cc @Frozenfire92 what are your thoughts on getting rid of the endpoints in favour of something like http://www.jsplumb.org/demo/sourcesAndTargets/dom.html ?

[Glavin001]

I think removing the anchor/endpoints and making the stencil elements themselves have the drag-n-drop flows, would be easiest to understand and intuitive.

Thoughts?

[Frozenfire92]

what are your thoughts on getting rid of the endpoints in favour of something like http://www.jsplumb.org/demo/sourcesAndTargets/dom.html ?

I think this is an interesting idea, however I'm not sure on this solving the underlying problem of knowing which way the data flows. For example that one you can only go blue to green, but the way our app works you can go any element to any element. What signifies that direction?

[Glavin001]

jsPlumb supports having arrow overlays to signify direction.

• Docs: https://jsplumbtoolkit.com/doc/overlays.html
• Demo: http://www.freedevelopertutorials.com/jsplumb-tutorial/examples/jsplumb-connection-arrow-example/

This will also mean we do not have to mess around with the anchor positioning. Also we should look into the filter connections option for stencils.