Fix cosmetic issues

[kvndrsslr]

Rendered nodes look scrambled up - find a clean way to display them Also please have a look at general CSS / looks.

[pskLana]

I looked at the issue with overlapped symbols and it turned out that the problem is in the library 'litegraph.js' itself, because even their demo has this problem.

First of all, all styles inside canvas based on Canvas2D rendering context and it does nothing with CSS. The whole library based on drawing these inputs and forms on canvas, like with a pen, so it is impossible just to change the length or style of fields by using CSS.

After looking at the library code, I found the place where the title string is always undefined. They call the function to count the width of the title, but it always returns 0 when it is undefined.

I have no idea what is wrong with their library, but what we can do:

• either we change library code, so far we can hardcode the width of the title like "var title_width = 70"
• or we shouldn't put the value that was entered by user in this field at all (as far as I saw today you have additional fields on the right to change these values)

What do you think? @kvndrsslr, let me know, please.

[kvndrsslr]

Hey @pskLana thanks for the report!

Would you be able to change the rendering code in the library such that inside the nodes we show a static description, i.e. some text that describes the purpose of the node, instead of all the inputs?

If so, we could do that in our own fork of the library first and then eventually try to get a PR upstream.

Otherwise, if this is not possible or you feel that would be too much work we can also just get rid of all the inputs in the rendered view as you suggested.

[pskLana]

Would you be able to change the rendering code in the library such that inside the nodes we show a static description, i.e. some text that describes the purpose of the node, instead of all the inputs? -> @kvndrsslr, yes, it is possible, even without changing the code in the library, there is a callback function that allows us to change the content of the node (like now the content consists of Widgets that are part of the library, I can remove them and write text instead of them). We can easily write text because it is supported by canvas. It can look as follows:

[kvndrsslr]

Thats very, very nice. The content of this description will be provided by the backend in the future!

PS: Is it also possible to use links in there? 🤔

[pskLana]

Canvas doesn't give an opportunity to add links there. The only way to add them is to calculate their position manually and other parameters like height and width and add the eventListener for mousedown.

[pskLana]

The sample of the node looks as follows:

[kvndrsslr]

Please make the canvas auto-resize with the browser window.

[kvndrsslr]

From what I saw today the demo looks fine. I'll reopen if something comes up once we have the demo tested.