Add properties/edit panel to demo?

[gotwig]

I would realy appreciate it if the demo would include a complete example on how to realize something like the panel in webglstudio or mui3d nodeeditor that appears when you select a node and you can change the values/properties of each node and more

Thank you for this awesome library (Y)!

[jagenjo]

I guess you mean a sidebar with the properties of the selected node. I wanted to do that but because I want to keep the library lightweight I would do it in the litegraph-editor.js only. Every editor implements the inspectors in their way.

btw, good luck adding litegraph to babylon.js :D

[gotwig]

thank you! :) I would really appreciate it if you would add it to the demo :)

[thetooth]

Seconding this as a really useful feature. Something that doesn't even edit the node or just very simple debug output would be nice just to see some common ways of getting individual node data in and out of the graph in an adhoc way.

I am evaluating this as a tool for writing dialogue and behaviour trees for a simple game engine, only two missing features are the properties panel(since you can't really edit a wall of text in a widget :P) and dynamically adding outputs(for example in a dialogue choice node the choices are 1->N, so I'm going to play with the custom shapes node and make a +/- button to append outputs). Otherwise this is probably the best implementation I've seen so far!

[Iodine-]

+1 to this - while I understand separating the editor layer form the graph layer; I think the node editing functionality should likely be in the graph. modifying the properties of a node is something that all flow editors need to do at some point if working with nodes beyond the most basic. I appreciate not wanting to be prescriptive as to how to visually present the interface, but a starting point would be helpful.

Afterall, it is one of the clear features I feel set litegraph ahead of something like rete.js, where everything is configured on the node itself! boiling down that functionality into something simple would help imo

[jagenjo]

I added a panel to the LGraphEditor, you can open it if you double click: https://tamats.com/projects/litegraph/demo/

I will try to improve it over time.

[clarkmcc]

@jagenjo I'm trying to get the sidebar working, right now it just shows up as unstyled content below the canvas (https://codepen.io/clarkmcc/pen/dyrYjay). I see that you've added the panel to the LGraphEditor, but per your comment here the editor is apparently only for demoing, and therefore is not a part of the NPM package.

Are there plans to include it in the NPM package, given that critical functionality like the properties editor are now included but only as part of the editor?

[jagenjo]

It is included: https://github.com/jagenjo/litegraph.js/blob/master/src/litegraph.js#L12524 Are you included the right CSS?

[clarkmcc]

I don't see the litegraph-editor.css in the NPM module, or on the CDN. I will manually copy to my repo for now.

[clarkmcc]

Okay, interesting so it looks like I don't need the litegraph-editor.css since the classes for the sidebar are part of the standard CSS file. I am using the latest CSS I believe and it does show the classes that are required by the properties panel. I even added the

<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/litegraph.css" type="text/css" />

[atlasan]

Hi @clarkmcc. I've seen your codepen, the canvas seems working. Do you want to add some controls around it? You can check the html and js file of the editor included in this repository https://github.com/jagenjo/litegraph.js/blob/master/editor/index.html https://github.com/jagenjo/litegraph.js/blob/master/src/litegraph-editor.js It's actually the js that builds up the editor.

[clarkmcc]

@atlasan as I mentioned, I'm trying to get the sidebar/properties editor working which (as I understand it) is supposed to be included as part of the core litegraph.js. You can see the properties editor is unstyled and shows below the canvas, even though I'm including the litegraph.css file which has what I believe are the appropriate CSS classes.

[jagenjo]

@clarkmcc I realized the dialog is in the original litegraph.css, the problem is that the container that holds the canvas must have the litegraph class assigned and also the style position:absolute (I know I should fix it and make it automatic), otherwise it will appear out of place. Let me know if that works.

Check here: https://tamats.com/projects/litegraph/editor/

[clarkmcc]

@jagenjo thank you for the quick response! That solved it

<div class="litegraph litegraph-editor">
    <canvas id="canvas" width="720" height="580"></canvas>
</div>