Add two or more items in the same line (add a custom HTML element or vue component))

Hi, i was looking for a best node graph editor, and i found this repository, but i am having a hard time to find the information, i couldn’t understand the documentation, i think if i had more examples will be perfect.

My questions are… Is it possible to add a custom HTML element (or vue component) between the inputs? Like a title and dividers? and… my other question, is it possible insert more than one item in the same line, like a Checkbox list, i think this two options is very usefull for a better design in somes cases.

i made this example in browser…

export class MoveNode extends Node {
    twoColumn = true;
    width = 245;

    axisList = ["X", "Y", "Z"];

    constructor() {
        super();
        this.type = "MoveNode";
        this.name = "Movimento";
        this.addInputInterface("Entrada", "", 0, { type: "object" });

        this.addOption(
            "Hardware",
            "SelectOption",
            "Selecione uma Placa",
            undefined,
            {
                items: ["Arduino Nano", "Octopus V1.1"]
            }
        );
        this.axisList.forEach(axis => { this.addOption(axis, "CheckboxOption") });

        this.events.update.addListener(this, event => {

            console.log(this.interfaces.entries()); 
            console.log(this.options.entries()); 
            const item = this.axisList.find(axis => axis == event.name)
        if (event.name === item) {
            if (this.getOptionValue(item)) {
                this.addInputInterface(item + " ", "NumberOption", 0);
            } else {
                this.removeInterface(item + " ");
            }
        }
    });
    this.addInputInterface("Velocidade", "NumberOption", 10000);

        this.addOutputInterface("Saida", { type: "object" });


    }

calculate() {

    this.getInterface("Saida").value = this.getOptionValue("Hardware");
}
}

[newcat]

Documentation is indeed not my strong suit 😉 but PRs improving it are always welcome. I don’t think I’ll put the effort into improving the Baklava V1 documentation too much, since Baklava V2 is almost done. But I’ll certainly try to make the documentation for Baklava V2 more “guide”-like.

[rodrigogomesantos]

Guys, I understood! I have built an “Option” component, I will try to document this right for other people in the future as it is so simple to do!

You just need to create a Option element

in my case is ImgOption.vue

<template>
    <div class="warpper">
        <h4>{{ value }}</h4>
        <img src="https://zudesign.com.br/images/logo.svg" alt="alternative" />
        <p>{{ beautifulJson(option) }}</p>
        <p>{{ node.id }}</p>
    </div>
</template>

<script>
export default {
    data: () => ({
        nodeCopy: null,
        valueCopy: null
    }),
    props: ["option", "node", "value"],

    methods: {
        beautifulJson(jsonString) {
            let beautifulJsonString = JSON.stringify(
                jsonString,
                null,
                2
            );
            console.log(beautifulJsonString);
            return beautifulJsonString;
        }
};
</script>

<style lang="scss" scoped>
.warpper {
    img {
        width: 100%;
    }
}
</style>

then register this component in the same location as the others. for example i use:

App.vue

    <div style="height: 100%; width: 100vw">
        <baklava-editor :plugin="viewPlugin" />
    </div>
</template>

<script>

import { Editor } from "@baklavajs/core";
import { ViewPlugin } from "@baklavajs/plugin-renderer-vue";
import { OptionPlugin } from "@baklavajs/plugin-options-vue";
import { Engine } from "@baklavajs/plugin-engine";
import { MoveNode } from "./nodes/MoveNode";
import ImgOption from "./nodes/ImgOption";

export default {
    data() {
        return {
            editor: new Editor(),
            viewPlugin: new ViewPlugin(),
            engine: new Engine(true)
        };
    },
    created() {
        // Register the plugins
        // The view plugin is used for rendering the nodes
        this.editor.use(this.viewPlugin);
        // The option plugin provides some default option UI elements
        this.editor.use(new OptionPlugin());
        // The engine plugin calculates the nodes in the graph in the
        // correct order using the "calculate" methods of the nodes
        this.editor.use(this.engine);

        // Show a minimap in the top right corner
        this.viewPlugin.enableMinimap = true;

        // register the nodes we have defined, so they can be
        // added by the user as well as saved & loaded.
        this.editor.registerNodeType("MoveNode", MoveNode);
        this.viewPlugin.registerOption("ImgOption", ImgOption);

    },
};
</script>

now, we can use this option when creating nodes. When adding this option the third argument passed will be received inside the “ImgOption.vue” in the “prop” value.

Move.js

import { Node } from "@baklavajs/core";

export class MoveNode extends Node {
    constructor() {
        super();
        this.type = "MoveNode";
        this.name = "Movimento";
        this.addInputInterface("X", "NumberOption", 1);
        this.addInputInterface("Y", "NumberOption", 10);
        this.addInputInterface("Z", "NumberOption", 10);
        
        // to add the same way like others
        this.addOption("settings", "ImgOption", "H3 Element");
        this.addOption("Operation", "SelectOption", "Add", undefined, {
            items: ["Add", "Subtract"]
        });
        this.addOutputInterface("Result");
    }

    calculate() {
        const n1 = this.getInterface("X").value;
        const n2 = this.getInterface("Y").value;
        const n3 = this.getInterface("Z").value;
        const operation = this.getOptionValue("Operation");
        let result;
        if (operation === "Add") {
            result = n1 + n2 + n3;
        } else if (operation === "Subtract") {
            result = n1 - n2 - n3;
        }
        this.getInterface("Result").value = result;
    }
}

This code is just a didactic example, I hope it can help someone and thank you very much I think the problem has been solved, to see more advanced things I recommend seeing the @LukasLoeffler project exemple link project