BaklavaJS 开源项目教程

娄佳淑Floyd

于 2024-09-26 07:43:59 发布

阅读量588

点赞数 16

本文链接：https://blog.csdn.net/gitblog_00779/article/details/142540696

版权

BaklavaJS 开源项目教程

baklavajs Graph / node editor in the browser using VueJS 项目地址: https://gitcode.com/gh_mirrors/ba/baklavajs

1. 项目介绍

BaklavaJS 是一个基于 VueJS 的图形/节点编辑器，专为 Web 开发设计。它提供了一个易于使用的编辑器，并支持创建自定义节点。BaklavaJS 特别强调可扩展性，因此拥有一个多功能插件系统。整个 BaklavaJS 生态系统是用 TypeScript 编写的，以确保类型安全。

BaklavaJS 的核心功能包含在 @baklavajs/core 包中，其他功能可以通过安装所需的插件来按需添加。主要插件包括：

Engine: 提供运行图形计算的函数。
Interface Types: 为节点接口添加类型，并允许仅在所需类型之间建立连接，还可以自动转换值类型。
Vue Renderer: 使用 VueJS 在浏览器中显示编辑器。
Themes: 提供预构建的主题集合。

2. 项目快速启动

安装

首先，确保你已经安装了 Node.js 和 npm。然后，通过以下命令安装 BaklavaJS：

npm install baklavajs

创建一个简单的节点编辑器

以下是一个简单的示例，展示如何创建一个基本的节点编辑器：

import { Editor } from "@baklavajs/core";
import { VueRenderer } from "@baklavajs/renderer-vue";
import { Engine } from "@baklavajs/engine";

// 创建编辑器实例
const editor = new Editor();

// 创建 Vue 渲染器
const renderer = new VueRenderer(editor);

// 创建引擎
const engine = new Engine(editor);

// 添加一个自定义节点
class MyNode extends editor.NodeBuilder {
    constructor() {
        super("MyNode");
        this.addInputInterface("Input", "NumberOption", 0);
        this.addOutputInterface("Output", "NumberOption");
    }

    calculate() {
        const inputValue = this.getInterface("Input").value;
        this.getInterface("Output").value = inputValue * 2;
    }
}

editor.registerNodeType("MyNode", MyNode);

// 添加节点到编辑器
const node = new MyNode();
editor.addNode(node);

// 渲染编辑器
renderer.render();

// 运行引擎
engine.run();