LogicFlow 自定义动态分组节点开发指南

动态分组节点基础概念

LogicFlow 是一个流程图编辑框架，其中的动态分组(DynamicGroup)节点是一种特殊类型的节点，它可以包含其他子节点并支持折叠/展开功能。这种节点在复杂流程图中非常有用，能够帮助用户更好地组织和管理流程图结构。

常见错误与解决方案

在自定义DynamicGroup节点时，开发者经常会遇到"Cannot read properties of undefined (reading 'gridSize')"的错误。这通常是由于以下两个原因导致的：

1. 视图与模型定义反置：在注册自定义节点时，错误地将视图(View)和模型(Model)类的位置放反了。正确的注册方式应该是：

export default {
  type: "CustomGroup",
  view: CustomGroupView,  // 视图类
  model: CustomGroupModel // 模型类
};

2. 锚点样式问题：DynamicGroup节点默认的锚点是透明的，如果需要显示锚点，需要重写getAnchorStyle方法。

完整实现方案

1. 定义自定义分组节点

import { dynamicGroup } from "@logicflow/extension";

// 自定义视图
class CustomGroupView extends dynamicGroup.view {
  // 可在此处添加自定义渲染逻辑
}

// 自定义模型
class CustomGroupModel extends dynamicGroup.model {
  // 设置节点样式
  getNodeStyle() {
    const style = super.getNodeStyle();
    style.stroke = "#AEAFAE";
    style.strokeDasharray = "3 3";
    style.strokeWidth = 1;
    return style;
  }
  
  // 设置锚点样式（使其可见）
  getAnchorStyle() {
    return {
      fill: "#FFFFFF",
      stroke: "#000000",
      r: 3,
      strokeWidth: 1
    };
  }
}

export default {
  type: "CustomGroup",
  view: CustomGroupView,
  model: CustomGroupModel
};

2. 初始化LogicFlow实例

import LogicFlow from "@logicflow/core";
import { DynamicGroup } from "@logicflow/extension";

const lf = new LogicFlow({
  container: document.getElementById("container"),
  grid: true,
  plugins: [DynamicGroup]
});

// 注册自定义分组节点
lf.register(CustomGroup);

// 渲染流程图
lf.render({
  nodes: [
    {
      id: "dynamic-group_1",
      type: "CustomGroup",
      x: 500,
      y: 140,
      text: "Group Node",
      properties: {
        resizable: true,
        collapsible: true,
        width: 420,
        height: 250,
        isCollapsed: false
      }
    }
  ]
});

高级功能实现

1. 支持作为起始节点

要使DynamicGroup节点能够作为流程的起始节点，需要确保：

1. 正确配置锚点样式（如上所示）
2. 在模型类中添加适当的连接规则

class CustomGroupModel extends dynamicGroup.model {
  // ...其他代码
  
  getConnectedTargetRules() {
    const rules = super.getConnectedTargetRules();
    // 添加自定义连接规则
    return rules;
  }
  
  getConnectedSourceRules() {
    const rules = super.getConnectedSourceRules();
    // 添加自定义连接规则
    return rules;
  }
}

2. 响应式调整

DynamicGroup节点支持响应式调整大小，可以通过以下属性控制：

properties: {
  resizable: true,  // 是否可调整大小
  collapsible: true, // 是否可折叠
  width: 420,       // 初始宽度
  height: 250,      // 初始高度
  isCollapsed: false // 初始是否折叠
}

最佳实践建议

1. 样式一致性：保持分组节点样式与整体流程图风格一致
2. 性能考虑：当包含大量子节点时，折叠功能可以显著提升性能
3. 交互设计：为分组节点添加清晰的视觉反馈，如悬停效果
4. 文档注释：为自定义节点添加详细注释，方便团队协作

通过以上方法，开发者可以充分利用LogicFlow的DynamicGroup节点功能，创建出更加灵活和强大的流程图应用。