Clarification of "setNodeTypeAlias" Usage

newcat / baklavajs

Graph / node editor in the browser using VueJS

http://baklava.tech

MIT License

1.57k stars 116 forks source link

Clarification of "setNodeTypeAlias" Usage #270

Closed Miserlou closed 1 year ago

Miserlou commented 1 year ago

Hi there!

I'm having an issue with the setNodeTypeAlias function in the Vue plugin. I'm calling it as I expected to, but the nodes in the right click menu still have their explicit name, not the alias.

Suppose I have:

const view = new BaklavaJS.PluginRendererVue.ViewPlugin();
view.setNodeTypeAlias("AwaitModule", "Alias");
editor.use(view);

before I register the node. When I register the node with:

editor.registerNodeType("AwaitModule", node, node_data["category"]);

it still appears in the right click menu as "AwaitModule", not "Alias".

Is this an order of operations issue? Should I be registering at "Alias" and not "AwaitModule"? Should I set the alias after the registration?

A little clarification would go a long way here.

Thanks!

newcat commented 1 year ago

At a first glance, your code looks good. I have created a CodeSandbox which demonstrates the use of setNodeTypeAlias, maybe that helps: https://codesandbox.io/s/baklavajs-nodetypealias-k2cq6v?file=/src/App.vue

Miserlou commented 1 year ago

Thanks so much for your reply. I still don't see anything immediately different than what I've been trying, but I'll keep digging from here. Do you think it could have to do with me using Baklava procedurally, rather than as an assembled Vue app?

newcat commented 1 year ago

Should not make a difference (at least in theory). Just to be safe I tested it with the browser build and it works for me as well:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BaklavaJS Vanilla Example</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/baklavajs/dist/index.css"
    />
  </head>
  <body>
    <div style="width: 90vw; height: 90vh">
      <div id="editor"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/baklavajs/dist/index.js"></script>
    <script>
      const plugin = BaklavaJS.createBaklava(document.getElementById("editor"));
      const editor = plugin.editor;

      const myNode = new BaklavaJS.Core.NodeBuilder("My Node")
        .addInputInterface("My Interface")
        .build();
      editor.registerNodeType("My Node", myNode);

      plugin.setNodeTypeAlias("My Node", "Alias");
    </script>
  </body>
</html>

Miserlou commented 1 year ago

That worked! You're awesome, thank you! Baklava forever!