Flyde项目深度解析：如何创建自定义节点扩展可视化编程能力-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00608/article/details/148890146

Flyde项目深度解析：如何创建自定义节点扩展可视化编程能力

flyde Flyde is an open-source, visual programming language. It runs in the IDE, integrates with existing TypeScript code, both browser and Node.js. 项目地址: https://gitcode.com/gh_mirrors/fl/flyde

前言

在可视化编程领域，Flyde项目提供了一种创新的方式来构建和扩展节点系统。本文将深入探讨Flyde中三种自定义节点的创建方法，帮助开发者理解如何扩展Flyde的核心功能，实现更复杂的业务逻辑和可视化编程体验。

自定义节点概述

Flyde的自定义节点系统是其核心扩展机制，允许开发者通过三种方式扩展功能：

代码节点：最基础的构建块，通过纯代码定义节点行为
可视化节点：将多个节点组合成一个可复用的功能单元
宏节点：支持运行时配置的高级节点类型

这三种类型覆盖了从简单到复杂的所有扩展场景，为开发者提供了灵活的扩展能力。

代码节点详解

代码节点是Flyde中最基础的扩展方式，适合实现简单的原子性功能。

基本结构

一个典型的代码节点包含两部分：

元数据：定义节点的外观和行为描述
执行逻辑：实现节点功能的核心代码

创建示例

以下是一个加法节点的完整实现：

import { InternalCodeNode } from "@flyde/core";

export const Add: InternalCodeNode = {
  id: "Add",
  description: "计算两个数字的和",
  inputs: {
    n1: { description: "第一个加数" },
    n2: { description: "第二个加数" },
  },
  outputs: { sum: { description: "两个数字的和" } },
  run: ({ n1, n2 }, { sum }) => sum.next(n1 + n2),
};

关键技术点

输入输出定义：明确声明节点需要哪些输入参数，会产生哪些输出
执行函数：run方法是节点功能的核心，接收输入值并产生输出
响应式输出：通过RxJS的Subject对象发送输出值，但开发者无需深入理解RxJS

状态管理

对于需要保持状态的节点，Flyde提供了简单的状态管理机制：

export const Average: InternalCodeNode = {
  // ...其他元数据
  run: ({ n }, { average }, { state }) => {
    const numbers = state.get("numbers") ?? [];
    numbers.push(n);
    state.set("numbers", numbers);
    average.next(numbers.reduce((a, b) => a + b, 0) / numbers.length);
  },
};

这种状态管理方式简单直接，适合大多数需要记忆功能的场景。