search

Comfy-Org / ComfyUI_frontend

Official front-end implementation of ComfyUI
https://www.comfy.org/
GNU General Public License v3.0
430 stars 52 forks source link

Alternative DOM widget height calculation #280

Open Trung0246 opened 1 month ago

Trung0246 commented 1 month ago

A bit late but since this is relevant to UI stuff I've suggest to take a look of how I implemented alternate DOM widget that can have customizable widget height based on specified ratio. I already "secretly" turned it on whenever someone installed my extension and it seems nothing break so far. Hopefully it can be merged into main repo.

https://github.com/Trung0246/ComfyUI-0246

Amorano commented 1 month ago

A bit late but since this is relevant to UI stuff I've suggest to take a look of how I implemented alternate DOM widget that can have customizable widget height based on specified ratio. I already "secretly" turned it on whenever someone installed my extension and it seems nothing break so far. Hopefully it can be merged into main repo.

https://github.com/Trung0246/ComfyUI-0246

Can I use this snippet right now in my pack? This annoys the hell out of me, along with the Z-order. Obviously I would rather it be core, but until then.

EDIT: Your solution is great but as a standalone piece it's a lot of wiring. Hopefully it gets cleaned up soon in the new frontend.

Trung0246 commented 1 month ago

Go for it then @Amorano. Currently height calculation is being used in my BoxRange and Cloud so you can take a look on it.

mcmonkey4eva commented 4 weeks ago

Can you provide more specifics about what exactly you're doing here? Before/after screenshots, specific links to where in your code the thing you're referring to is? (Right now "somewhere in this very large pack is some form of alternate widget" is pretty vague)

Trung0246 commented 4 weeks ago

Sure, here's the starting point:

addDOMWidget replacement: https://github.com/Trung0246/ComfyUI-0246/blob/fb16466a82553aebdc4d851a483847c2dc0cb953/web/js/widgets.js#L1555

Setting flex value: https://github.com/Trung0246/ComfyUI-0246/blob/fb16466a82553aebdc4d851a483847c2dc0cb953/web/js/widgets.js#L4623

Everything is dynamic so changing flex value of a widget will get reflected immediately.

The basic gist is that the implementation read vallues from flex options and attempt to height fill widget and wholly fit into the specified node height. This is basically the same as css flex since flex allows defining "weight" on node height percent a widget allowed to extend and fill, plus with extra margin for both horizontal and vertical, and with custom anchor point on where the widget origin is (left, center, right).

My 0246.Cloud and 0246.BoxRange node use these extensively. But I will provide simpler examples node on nlhow everything works when I have time.