How do I use this library?

[Dylan190774]

Maybe this is a very stupid question, but I can't figure out how this library is supposed to be used.

I'm creating an image manipulator app where colors, pixel sizes, transparancy, etc. can depend on several settings. Other settings can also influence the outcome of another setting. For example, when the 'red' value of a pixel is more then 128, the size of a pixel could be bigger. And when the size of a pixel is bigger than 2, the 'blue' component is doubled.

I figured that a nodes-editor, like I see in Blender and Unity, could be a nice way to configure these settings and I stumbled on Baklava.js, which seems to be perfect, since I also use Vue3 with Typescript for my app.

However from the example I have no idea how to use it, since this only shows the editor itself, and not how the editor can be integrated in a working app, based on real variables, etc.
From the docs I understand how to define all individual nodes, and display the nodes-editor but then what? How can I use the logic of the editor in my program?

Are there more examples available on how to use this library inside an app?

[Doltario]

Hi,

Since Newcat seems busy for a while I'll try to answer.

Firstly, you got to see every baklava's items as object. If you're not familiar with oop, maybe you can read about it. (https://javascript.info/classes covers the basis of it)

Assuming you're ok with oop, you can access you node like so node1.inputs.[inputName].value = … with inputName the name you gave in the component definition.

When you're done editing you can call node.save() that is a baklava method (https://v2.baklava.tech/editor/saving-loading.html) that returns an up-to-date object that you can store wherever you want.

Do not hesitate to roam in https://v2.baklava.tech/api/ to get the possibility of every baklava's classes.

Finally, I personnaly overrode every baklavaClasses, so that I can override/decorate the UI or the logic of every methods.

Even though you have some readings, I hope this helps.

[Dylan190774]

Thank you. I'm using classes as well, so that's not a problem.
Still a bit confused though :)

The example doesn't explain how to setup an engine to be used with data that comes from other Vue-components. I now understand I need to set these manually? So every time a value changes in a component I need to update the inputs of the Baklava instance. Or can this be setup automatically somehow?

And how can I use the output of the Baklava instance with these inputs then in another component?

[Doltario]

Hi again :)

Mmh yes kind of : you can load a state into your editor : https://v2.baklava.tech/editor/saving-loading.html. But it has to match an EditorState data structure.

An classic data-flow you be to load the initial state (either a brand you one you made if you're creating a new state, or one you got from your database) with Editor.load() (https://v2.baklava.tech/editor/saving-loading.html). Then edit it in the editor (This part is handled completely by Baklava) and then once your are done, trigger the Editor.save() (https://v2.baklava.tech/editor/saving-loading.html#saving)

If you need real time state update, there are some events you can subscribe to, but I didn't use those hooks since I didn't need reactivity, I don't think I can help that much on this point, sorry :/

(But there is some documentation on it : https://v2.baklava.tech/event-system.html, maybe it could help you)