Rete.js框架中自定义Angular下拉控件的实现方法

在基于Rete.js和Angular构建可视化编程环境时，开发者经常需要创建自定义的输入控件来满足特定需求。本文将详细介绍如何在Rete.js中实现一个自定义的下拉选择控件。

问题背景

在使用Rete.js框架开发节点编辑器时，内置的控件可能无法满足所有业务场景。例如，当需要一个下拉选择器(Select/Dropdown)控件时，开发者需要了解如何正确扩展Rete.js的控件系统。

解决方案

1. 创建自定义控件类

首先需要定义一个继承自ClassicPreset.Control的控件类，用于存储下拉选项数据：

import { ClassicPreset } from 'rete';

export class CustomDropdownControl extends ClassicPreset.Control {
  constructor(public enumValues: string[]) {
    super();
  }

  trackFn(index: number, item: string): string {
    return item;
  }
}

这个类不仅继承了基础控件功能，还添加了enumValues属性来存储下拉选项，以及trackFn方法用于Angular的追踪优化。

2. 实现Angular组件

接下来创建对应的Angular组件来渲染这个下拉控件：

<!-- 组件模板 -->
<mat-form-field>
    <mat-label>enum</mat-label>
    <select matNativeControl required>
        <option *ngFor="let e of data.enumValues; trackBy: data.trackFn" [value]="e">{{e}}</option>
    </select>
</mat-form-field>

// 组件类
import { Component, Input } from '@angular/core';
import { CustomDropdownControl } from './custom-dropdown-control';

@Component({
  selector: 'app-custom-dropdown',
  templateUrl: './custom-dropdown.component.html',
  styleUrls: ['./custom-dropdown.component.css']
})
export class CustomDropdownComponent {
  @Input() data!: CustomDropdownControl;
}

这里使用了Angular Material的mat-form-field和matNativeControl来实现美观的下拉样式。

3. 在节点中使用控件

在定义节点时，可以添加这个自定义控件：

import { ClassicPreset as Classic } from "rete";
import { CustomDropdownControl } from "./custom-dropdown-control";

export class ActionNode extends Classic.Node {
    constructor(name: string) {
        super(name);
        this.addControl('enum', new CustomDropdownControl(["one", "two", "three"]));
    }
}

4. 关键配置步骤

最重要的步骤是在Rete.js的Angular渲染器中注册这个自定义控件：

angularRender.addPreset(
    AngularPresets.classic.setup({
      customize: {
        control(data) {
          if (data.payload instanceof CustomDropdownControl) {
            return CustomDropdownComponent;
          }
          return ControlComponent;
        }
      },
    })
);

这段代码做了以下工作：

1. 使用addPreset方法添加经典预设
2. 在customize.control回调中检查控件类型
3. 如果是自定义下拉控件，返回对应的Angular组件
4. 否则返回默认的控件组件

实现原理

Rete.js的控件系统通过以下方式工作：

1. 控件识别：当节点添加控件时，Rete.js会存储控件实例
2. 渲染匹配：在渲染阶段，框架会根据控件类型决定使用哪个组件
3. 数据绑定：控件实例会作为输入数据传递给Angular组件

扩展建议

开发者可以基于此模式实现更多类型的自定义控件：

1. 多选下拉：扩展控件类支持多选功能
2. 带搜索的下拉：添加搜索过滤功能
3. 动态选项下拉：支持选项的动态加载
4. 主题定制：通过CSS自定义控件外观

总结

在Rete.js中实现自定义控件需要理解框架的控件渲染机制。关键步骤包括创建控件类、实现Angular组件、在节点中使用控件，以及正确配置渲染器。这种模式不仅适用于下拉控件，也可以推广到其他类型的自定义UI组件开发中。