jerosoler / Drawflow

Simple flow library 🖥️🖱️
https://jerosoler.github.io/Drawflow/
MIT License
4.7k stars 728 forks source link

Connection Orientations #725

Closed rogereyes86 closed 1 year ago

rogereyes86 commented 1 year ago

I see that the connections between nodes are made from Left to Right or vise versa, how can I make these connections example from Top to bottom Etc?

Example:

In the below image, the left side is our plugin, and on the right is another plugin from another author but far from the power of ours:

image

rogereyes86 commented 1 year ago

I manipulated the Top, Left position in the Css and Set the Position and kind of does the trick:

.drawflow .drawflow-node { display: flex; align-items: center; justify-content: center; flex-direction: column; position: absolute; min-height: 40px; border-radius: 4px; z-index: 2; padding: 15px; text-align-last: center; } .drawflow .drawflow-node .input { Position: relative; top: -26px; left: -10px; margin: auto; } .drawflow .drawflow-node .output { Position: relative; top: 26px; left: -10px; margin: auto; }

image

But still have issues with the connection line always trying to go right:

image

jerosoler commented 1 year ago

View

rogereyes86 commented 1 year ago

It worked, thanks