LowCode-Engine 物料拖入设计器时修改大纲树标题的实现方法

在阿里巴巴开源的LowCode-Engine低代码引擎项目中，开发者经常需要自定义物料拖入设计器时的行为，特别是修改物料在大纲树中显示的标题。本文将详细介绍如何通过引擎提供的API实现这一功能。

理解文档模型与节点添加机制

LowCode-Engine的核心模型之一是文档模型(DocumentModel)，它管理着设计器中所有节点的状态和关系。当用户从物料面板拖拽一个组件到设计器时，引擎会创建一个新的节点并添加到文档模型中。

使用onAddNode钩子函数

引擎提供了onAddNode事件监听器，专门用于处理节点添加时的自定义逻辑。这个钩子函数会在以下时机被触发：

1. 用户从物料面板拖拽组件到设计器
2. 通过API编程方式添加新节点
3. 执行复制粘贴操作时

实现标题修改的代码示例

// 获取文档模型实例
const docModel = editor.get('document');

// 监听节点添加事件
docModel.onAddNode((node) => {
  // 判断节点类型，只处理特定类型的物料
  if (node.componentName === 'YourComponentName') {
    // 修改节点的标题属性
    node.setTitle('自定义标题');
    
    // 或者通过设置propValue来修改
    // node.setPropValue('title', '自定义标题');
  }
});

高级应用场景

1. 动态标题：可以根据当前时间、用户信息等动态生成标题

   node.setTitle(`组件_${new Date().toLocaleTimeString()}`);
   

2. 国际化支持：根据用户语言环境设置不同语言的标题

   node.setTitle(i18n.t('your.component.title'));
   

3. 基于数据的标题：如果组件绑定了数据字段，可以使用数据字段作为标题

   if (node.props.dataBinding) {
     node.setTitle(node.props.dataBinding.field);
   }
   

注意事项

1. 确保在引擎初始化完成后才添加事件监听
2. 对于批量添加操作，考虑性能影响
3. 避免在钩子函数中执行耗时操作
4. 某些特殊组件可能有自己的标题管理逻辑，需要特殊处理

通过合理利用onAddNode钩子，开发者可以灵活控制物料在设计器中的展示方式，提升用户体验和开发效率。LowCode-Engine的这种扩展机制充分体现了其设计的灵活性和可扩展性。