search

jerosoler / Drawflow

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

Labeled inputs/outputs #785

Open chirstius opened 7 months ago

chirstius commented 7 months ago

Is there an existing method to provide "named" inputs/outputs similar to ComfyUI? And if not, can this be added?

https://github.com/comfyanonymous/ComfyUI/blob/master/comfyui_screenshot.png

jerosoler commented 7 months ago

View this comment:

Or view this:

chirstius commented 7 months ago

Thank you, that's exactly how I am solving it actually (::before/::after pseudo tags on ins/outs), but it was nice to see that's your recommendation. However I am curious if you have any suggestions for how to make additional content within the node "respect" the boundaries of the input/output labels?

image

On the left I have explicitly adjusted the position of the select element to be "below" the labels, the the right everything is just the "default" and the labels will overlap with anything added to the node.

Is there an easy way to have "internal" content respect the dimensions of the input/output nodes and have it automatically compensate for multiple inputs/outputs? if there's a simple CSS hack to be applied to a certain element to make that happen I have not found it yet in the quick experimentation I have done, but maybe you know the best place for such a thing? I assumed the .inputs and .outputs divs would be the right places but I couldn't get what I wanted to have happen there. Ideally I'd like a clear "section" at the top of the node for ins/outs and then all other content to appear below whatever "container" the ins/outs are held in.

Thanks!

jerosoler commented 7 months ago

You can position the elements wherever you want.

Otherwise, with this method you can organize a node element:

chirstius commented 7 months ago

Thanks for the ideas. I was able to construct CSS to allow for proper spacing of INs/OUTs and then dynamically adjusting the margins to keep the main node content below all items in the I/O section of the node. It's not pretty but works.

image

Feel free to close this issue

celevra commented 3 months ago

@chirstius would be nice if you could post your used used CSS, i try to exactly design a node like your Script node in the screenshot That means a header before input and outputs and an fixed button under the in and outputs