Baklava v2 Beta

[newcat]

After years of announcing but not delivering, Baklava version 2 is now in beta 🥳

You can try it out by npm i baklavajs@next or yarn add baklavajs@next.

The documentation is here: https://v2.baklava.tech/

For a list of changes, visit https://v2.baklava.tech/migration.html

Please report any issues you find, either here or by creating a new issue.

Thank you for testing ❤️

[lexoring]

Hello. You have a great script. Now I'm studying version 2 and according to the documentation on the page https://v2.baklava.tech/visual-editor/toolbar.html for some reason the information is missing, the page is empty or just not added yet. Thanks

[newcat]

Sorry, forgot to answer: The toolbar is still WIP and I don't fully know what the API will look like, so I haven't written any documentation yet. Will do it as soon as the functionality is implemented.

[lexoring]

on the page https://v2.baklava.tech/nodes/interface-types.html#engine is also an empty value where the code is entered

[newcat]

Thanks, I removed it since it was already replaced by another part, just forgot to delete it.

[hthomas92]

Hi,
I really like this V2 version of BaklaJS, it has a great feature set.

I'd like to implement a basic load/save functionality and bumped into some issues related to the documentation:

• https://v2.baklava.tech/visual-editor/toolbar.html is missing (like posted above)
• V1 documentation had a small section about saving and loading nodes (https://newcat.github.io/baklavajs/#/editor?id=saving--export), this is missing from the V2 doc.
• the API reference which seems to be missing from the V2 docs

It would be nice to see a small tutorial about how to add toolbar buttons and how to implement save/load in V2.

[newcat]

• Yeah, the toolbar is something that I still need to work on so I also haven't written any documentation for it yet
• Good point, I have added it to the backlog
• The API reference is still there but the button moved to the top right corner 😉

[Juli-FlowD]

Hi @newcat ,

The new update looks nice, I especially like the dynamic nodes approach.

Atm I use baklavajs in a project of mine in which I need to create a number of nodes based on a data set I pull from a different data source. Until now I use the NodeBuilder for that purpose because it is pretty easy with it (only 10 LoC). Is this kind of use-case still doable with the class-based or declaration-based approach?

Best

[newcat]

The declaration-based approach should be at least as capable as the NodeBuilder. So without knowing your exact use-case my guess it that it is still possible.

[hthomas92]

Hi,
I've noticed an oddity when using Interface Types with allowMultipleConnections.

So let's say I'd like my custom interface to receive strings, so I use new NodeInterfaceType<string>("custom").
Then I set this type and allow multiple connections:
new NodeInterface<string[]>("Input", []).use(allowMultipleConnections).use(setType, customType)

Then I'll have a typescript error about the mismatch between 'string' and 'string[]':
Argument of type 'NodeInterfaceType<string>' is not assignable to parameter of type 'NodeInterfaceType<string[]>'.ts(2345)

I could change my type to NodeInterfaceType<string[]>, but then, if I wanted an output node of the same 'custom' type, that will also be 'string[]' instead of 'string' which seems wrong.

What's the recommended way to do this? Am I supposed to put the [] into the interface definition?

[newcat]

I see, good point. That is something I didn't think about when implementing multiple connections. I'll try to figure out a good solution

[nrage2]

I've been trying unsuccessfully to get v2 to work in the browser only mode. I've tried the code in the docs to do so but it cannot find the files on cdn.jsdelivr.net.
Failed to load resource: the server responded with a status of 404 ()
https://cdn.jsdelivr.net/npm/baklavajs@2.0.2-alpha.8/dist/index.js

I've tried different version of the library: 2.02-beta.3, other but no luck.

Can someone please tell me what I may be doing wrong or show a working example of a basic editor.

Thank You!

[newcat]

Ah yes, the name of the bundle has changed but I forgot to update it in the documentation. The current links are:

• https://cdn.jsdelivr.net/npm/baklavajs@2.0.2-beta.3/dist/bundle.js
• https://cdn.jsdelivr.net/npm/@baklavajs/themes@2.0.2-beta.3/dist/syrup-dark.css

The documentation will be updated together with the next release

[pzl]

looked at converting a tool using baklava v1 to v2. Is there a supported way to maintain the v1-like visual interface, without the node-palette, or top toolbar? I'd like to keep the area very sparse since this is just one window in a gridded interface.

Remaking the Add Node contextmenu seems like it might be fine to build on our own, but wasn't sure about a stripped-down interface

[newcat]

I will likely re-add the context menu in v2 anyway, so you wouldn't need to implement it. The top toolbar is also not needed, you can either not offer the functionality to the user or provide a custom user interface somewhere else and trigger the commands programmatically.

[KaKi87]

Also, would it be possible to open said context menu by clicking on an output port, so that the new node would automatically be linked to the old one, without requiring the user to link these manually ? Thanks

[newcat]

Similar to this? #253
The only difficult part is: if the new node has multiple (compatible) inputs, which input should be automatically connected?

[KaKi87]

Similar to this? #253

Yes.

The only difficult part is: if the new node has multiple (compatible) inputs, which input should be automatically connected?

How about, in that specific case, not connecting, but still creating the connector, waiting for the user to click the input on which to release it ?

[KaKi87]

Hello,

Will v1 continue to receive bugfixes, features and support once v2 is stable ?

Thanks

[newcat]

Bugfixes and support yes (at least for a year or so), but I probably won't have time to add features to v1 while also developing and maintaining v2.

[Josvanegmond]

Hey, great work so far!

Is it possible to detect and control what node is selected? I've tried the ref='editor' method coined up for v1 (im not familiar with the previous iteration) but that does not seem to work.

Setting the zoom level in editor settings in an easy way would also be nice. Any possibilities there?

[Josvanegmond]

Of course I find the answer 10 minutes later:

<EditorComponent ref="editor" :view-model="baklava">
  <template #node="nodeProps">
    <div @click="activateNode(nodeProps)">
      <BaklavaNode :key="'key-' + nodeProps.node.id" v-bind="nodeProps" />
    </div>
  </template>
</EditorComponent>