Customization of drop positions and styling

[gpetrov]

We really like the sequential workflow designer and it's possibilities but are holded back in usage because of the limited styling and drag and drop UX.

Would it be possible to make the drag and drop more user friendly by not just showing all possible drop areas, which on large actions can be very confusing when you see hundreds of placeholders appearing, to be more consistent like modern drag and drop solutions where a blue line as placeholder appear only when you get in the neighborhood of the element.

So when you hover with your drag on top of step box the blue line appear on top or bottom of the box.

A bit like:

https://spectrum.adobe.com/page/tree-view/#Collapse-and-expand

That will be really a great improvement.

Also styling the connecting lines and giving more options about the besier curves will be great.

And lastly incorporating help or info tooltips per box will be also a great addition to show comments.

[b4rtaz]

Hello @gpetrov!

to be more consistent like modern drag and drop solutions where a blue line as placeholder appear only when you get in the neighborhood of the element.

Now the designer supports basic placeholders and clickable placeholders. Maybe this is a good candidate for the next type for the pro version.

Also styling the connecting lines and giving more options about the besier curves will be great.

Currently, it's possible to change the color and the thickness of curves. What you need more?

And lastly incorporating help or info tooltips per box will be also a great addition to show comments.

I'm not sure if I understand this one correctly. Tooltips in the toolbox, this sounds fine (basically now the designer uses the title="" attribute to show the fullname in the toolbox). But I'm afraid, tooltips on the canvas could hide information. Maybe this should work in this way, when a user started dragging, then tooltips are disabled. 🤔

Or maybe it's better to place explanatory information in other places, like editors. Check this example, here you can find some description at the top of each editor.

---

Currently we have the full queue of incoming features and primary we focus on features that were ordered under the consulting service. If you want to prioritize some changes, please contact us.

[gpetrov]

Now the designer supports basic placeholders and clickable placeholders. Maybe this is a good candidate for the next type for the pro version.

Well the clickable placeholders is a different example but not really the dynamic drop areas that appear only on drag and one at the time

Currently, it's possible to change the color and the thickness of curves. What you need more?

As I said we really like to customize more the curving

I'm not sure if I understand this one correctly. Tooltips in the toolbox, this sounds fine (basically now the designer uses the title="" attribute to show the fullname in the toolbox). But I'm afraid, tooltips on the canvas could hide information. Maybe this should work in this way, when a user started dragging, then tooltips are disabled. 🤔

There are different ways to incorporate comments like surrounding boxes with comment lines or additional comment popovers appearing on hover - much more stylable than simple title tag

[b4rtaz]

Well the clickable placeholders is a different example but not really the dynamic drop areas that appear only on drag and one at the time

Yeah, I know it. Just wanted to show that, the designer supports many modes here. That what you suggested, would be the next one.

As I said we really like to customize more the curving

Probably, I would need some mockup to understand this better.

There are different ways to incorporate comments like surrounding boxes with comment lines or additional comment popovers appearing on hover - much more stylable than simple title tag

That's right.

[gpetrov]

A good styling example is the turbo flow example here:

https://reactflow.dev/docs/examples/styling/turbo-flow/

Also a more unrestricted step boxes positioning might be a good idea and different layout strategies like in the other react flow demos.

[b4rtaz]

A good styling example is the turbo flow example here:

I think maybe we could do it in a similar way. Noticed that, the example contains smoother curves. But this would require a proof of concept.

Also a more unrestricted step boxes positioning

This part is one of the main difference between us and React Flow. The Sequential Workflow Designer forces layout by the design. Users should be focused on creating a flow/an algorithm, not on pixel positioning of steps. This is the fundamental approach.