Pre-defined interfaces

All interface types in a single node:

View source

<template>
    <BaklavaEditor :view-model="baklava" />
</template>

<script setup lang="ts">
import { defineNode } from "@baklavajs/core";
import {
    BaklavaEditor,
    useBaklava,
    ButtonInterface,
    CheckboxInterface,
    IntegerInterface,
    NumberInterface,
    SelectInterface,
    SliderInterface,
    TextInputInterface,
    TextInterface,
    TextareaInputInterface,
} from "@baklavajs/renderer-vue";
import "@baklavajs/themes/dist/syrup-dark.css";

const InterfaceShowcaseNode = defineNode({
    type: "InterfaceShowcase",
    title: "All Interface Types",
    inputs: {
        button: () => new ButtonInterface("Button", () => alert("Button clicked!")),
        checkbox: () => new CheckboxInterface("Checkbox", false),
        integer: () => new IntegerInterface("Integer", 5, 0, 10),
        number: () => new NumberInterface("Number", 0.5, 0, 1),
        select: () => new SelectInterface("Select", "Option A", ["Option A", "Option B", "Option C"]).setPort(false),
        slider: () => new SliderInterface("Slider", 0.5, 0, 1),
        textInput: () => new TextInputInterface("Text Input", "Edit me"),
        text: () => new TextInterface("Text (read-only)", "Hello World!"),
        textarea: () => new TextareaInputInterface("Textarea", "Multi-line\ntext input"),
    },
});

const baklava = useBaklava();
baklava.editor.registerNodeType(InterfaceShowcaseNode);
baklava.settings.palette.enabled = false;
baklava.settings.toolbar.enabled = false;

const node = new InterfaceShowcaseNode();
node.position = { x: 200, y: 50 };
node.width = 300;
baklava.editor.graph.addNode(node);
</script>

ButtonInterface

Displays a button and calls the provided callback when the button is clicked.

import { ButtonInterface } from "baklavajs";
new ButtonInterface("Name", () => console.log("Button clicked"));

CheckboxInterface

Displays a checkbox. Expects a boolean value.

import { CheckboxInterface } from "baklavajs";
new CheckboxInterface("Name", true);

IntegerInterface

Displays a numeric input that accepts integers. You can optionally provide minimum and maximum values.

import { IntegerInterface } from "baklavajs";

// without min and max values
new IntegerInterface("Name", 5);

// with min and max values
new IntegerInterface("Name", 5, 0, 10);

NumberInterface

Similar to the IntegerInterface, but also accepts decimal values.

import { NumberInterface } from "baklavajs";

// without min and max values
new NumberInterface("Name", 0.5);

// with min and max values
new NumberInterface("Name", 0.5, 0, 1);

SelectInterface

Displays a dropdown from which a single value can be chosen. Expects a list of possible values as the third parameter. The list of values can either be an array of strings (string[]) or an array of objects with this format:

{
    text: "I will be displayed", // must be a string
    value: 1 // can be any type
}

import { SelectInterface } from "baklavajs";

new SelectInterface("Name", "Add", ["Add", "Subtract"]);

new SelectInterface("Name", 1, [
    { text: "A", value: 1 },
    { text: "B", value: 2 },
    { text: "C", value: 3 },
]);

SliderInterface

Similar to the NumberInterface but displays a slider instead of increase/decrease buttons. Minimum and maximum values are required for this interface.

import { SliderInterface } from "baklavajs";
new SliderInterface("Name", 0.5, 0, 1);

TextInterface

A simple interface that just displays the value as text. Can't be used to edit the value.

WARNING

The name of this interface will likely change in the future.

import { TextInterface } from "baklavajs";
new TextInterface("Name", "Hello World!");

TextInputInterface

This interface displays a text field that the user can type into.

import { TextInputInterface } from "baklavajs";
new TextInputInterface("Name", "Edit me");

TextareaInputInterface

This interface displays a textarea field that the user can type into.

import { TextareaInputInterface } from "baklavajs";
new TextareaInputInterface("Name", "Edit me");