ComfyUI icon indicating copy to clipboard operation
ComfyUI copied to clipboard

[Bug / Feature Request] Input Text & Title Too Long / Need Fade Cutoff

Open aphaits opened this issue 9 months ago • 1 comments

I feel like this issue is one of the most prevalent and oldest GUI issue in ComfyUI nodes, especially considering now people are naming their checkpoints and loras with long names and versions, combined with using subfolders. It is also a much needed quality of life improvements for general usability of the UI workflow.

Note: I'm not a coder/programmer and I am aware that ComfyUI is based on Litegraph.js but unsure if the suggested features are possible or not to implement.


Main issue 1 - Input text too long: Long input text / title spills from node input text boundary

ComfyUI_Suggestion_01_InputTextCutoff

Suggestion:

  • Cutting spilled text to left input boundary
  • Also fading text to left boundary
  • Removing folder path from title
  • Removing file type extension from title
  • Full title info on mouse hover

Main Issue 2 - Node title text too long: Long node title prevents node from being resized to smallest possible size

ComfyUI_Suggestion_02_NodeTitleCutoff

Suggestion:

  • Cutting title with ... indicator with Full title info on mouse hover
  • OR fading title to right boundary with Full title info on mouse hover

Main issue 3 - Group title text too long: Big title text on groups are great but tends to spill right on thin groups, especially when text size is increased for legibility

ComfyUI_Suggestion_03_GroupTitleCutoff

Suggestion:

  • Cutting group title with ... indicator with full title info on mouse hover
  • OR Fading group title to right boundary with full title info on mouse hover

aphaits avatar Apr 25 '24 02:04 aphaits

Unfortunately these requires direct modification of the litegraph library itself. Another thing is we're dealing with canvas since litegraph use that to draw the nodes (not css) so this is tedious to change for achieving such small gain.

For anyone looking to tackle at this, start looking at drawNode and drawNodeWidgets function.

Trung0246 avatar Apr 25 '24 03:04 Trung0246

@Trung0246 I've made small changes to litegraph.core.js to fix things in my local fork. I'm tempted to tackle this one.

I've been directly editing the compiled file like a lunatic, though. If I wanted to contribute an actual fix for Comfy that involved litegraph, how would I go about it?

slezica avatar Aug 19 '24 17:08 slezica

@slezica https://github.com/Comfy-Org/ComfyUI_frontend/issues

Trung0246 avatar Aug 19 '24 17:08 Trung0246

Has been fixed in https://github.com/Comfy-Org/litegraph.js/pull/17

huchenlei avatar Aug 19 '24 18:08 huchenlei