[Feature Request] A few UI and UX suggestions

[DivinoAG]

I've been using this for a little short while and I'm super impressed with how stable and capable this UI is, thank you for creating it. I have a few suggestions to improve the general usability of ComfyUI, and hopefully make it even better.

1. Use the middle mouse button for panning

Right now the left mouse button serves two conflicting purposes: the action button, used to interact with nodes, move them around, connect them, etc, but also the panning button, used to move the canvas inside the viewport. That leads to a lot of issues with users having to carefully avoid clicking on nodes so they can move around the canvas.

This can be easily solved by separating these two actions. The middle mouse button is currently unused, and that's a common button used on other node-based UIs for panning (for example: Blender's shader and geometry nodes, and Unreal Engine's Blueprints).

This change would also allow changing the Select with Area functionality to used without the CTRL button modifier. Since the left mouse button wouldn't have any navigation functionality anymore, the Select with Area could be simply done with clicking and dragging the left mouse button, making it even easier to find for new users.

2. Unify the New Node menu, and the Node Search box

The New Node menu (right mouse click) and the Node Search box (left mouse double-click) both serve the same purpose: add the nodes to the canvas. There is not really any usability benefit from having them be separate. Ideally these should be part of the same UI element. My suggestion would be to add a search box to the top of the New Node menu and give it focus on open, so that the user can right-click and just start typing to find a specific node, or choose to browse through the list to find their desired node. This would free the left mouse double-click for any other future need.

This functionality almost exists when dragging a connector from an existing input or output, but it displays the search as another menu item that needs to be selected before it can be used, which is an unnecessary extra step, and should exist when creating a new node from scratch as well; there is no real benefit from having different behaviours when creating a new node from a connector or not. See for example how this is done in the Unreal Engine Blueprints system:

3. Select the contents of editable fields when opening

When one clicks on something like the Seed field in the KSampler settings, it's inevitably to paste a completely different seed value. Same thing with a field like the Width or Height in a EmptyLatentImage or ImageScale node, they will likely type a completely new value. It's tiny issue, but it compounds over time, that if you click on that and just type a new value, it will not replace the old value because the original wasn't selected when the text field was displayed so instead of replacing the width of 512 with 768, you may end up with a width of 512768 by mistake. The expected behavior when editing fields is that the old value will appear selected and be replaced if the user just starts typing.

For numerical fields, it can also be helpful to allow using the up and down arrow keys on the keyboard to increase or decrease values, instead of moving the text cursor. Typically after every change using the arrow keys the contents should also be selected again, even if they were not selected, allowing the user to start typing a new value to replace the entire content of the field.

4. Clean up file names for display

File names displayed by nodes like CheckpointLoader, LoraLoader, and VAELoader can look way too long and cover the corresponding label, which makes them hard to read and simply looks bad:

This can be improved with a few different measures:

• Hide file extensions: with files using extensions like .safetensors, displaying this info just adds unnecessary information. This should not be displayed.
• Hide folder paths: while helpful for those that make use of folders for file organization on the selection dropdown, displaying the path in the node itself on the canvas is not necessary. Remove these so only the file name is displayed on the node.
• Trim file names to the width of field: even these measures might still not be enough to prevent files with long names causing issues. To prevent that, the text block should display the file name up to the visual size of the field, trimming the remaining characters and displaying an elipsis character (…)

So with these measures, instead of the existing example in the image above, with some added stuff for the sake of demonstration, covering the label on the left: 1.x Mixes\wyvernmix_v7_this-is-an-example.safetensors

... it would display something more focused and helpful, such as: wyvernmix_v7_this-is-an-ex…