logicflow自定义节点

### LogicFlow 中实现自定义节点 LogicFlow 是一款强大的流程图编辑框架，支持多种高级功能，其中包括自定义节点的功能。以下是关于如何在 LogicFlow 中实现自定义节点的详细介绍。 #### 使用 Vue 组件实现自定义节点 为了使复杂的逻辑更加清晰易懂，可以通过 Vue 组件来创建自定义节点[^2]。这种方式尤其适合于需要动态交互或者复杂 UI 的场景。下面是一个简单的示例： ```javascript // 定义一个 Vue 组件作为自定义节点 const CustomNodeComponent = { template: ` <div class="custom-node"> <span>{{ data.label }}</span> <!-- 可以在这里添加更多 HTML 结构 --> </div> `, props: ['data'], // 接收来自 LogicFlow 的数据对象 }; export default { mounted() { const lf = new LogicFlow({ container: document.querySelector('#container'), width: 800, height: 600, }); // 注册自定义节点 lf.register({ type: 'custom-vue-node', view: () => { return `<div class="lf-custom-node"></div>`; }, model: () => { return { extend: 'rect', // 基础形状为矩形 text: '', // 文本为空 }; }, }); // 将 Vue 组件挂载到指定位置 lf.hook.getNodeViewMiddleware((model) => { if (model.type === 'custom-vue-node') { const vueInstance = new Vue({ el: model.viewDom, render(h) { return h(CustomNodeComponent, { props: { data: this.model } }); }, }); return true; } return false; }); // 初始化图形数据 lf.render({ nodes: [ { id: 'node1', type: 'custom-vue-node', x: 100, y: 100, properties: {} }, ], edges: [], }); }, }; ``` 上述代码展示了如何通过 Vue 组件注册一个新的节点类型 `custom-vue-node` 并将其渲染到页面中。 --- #### 自定义节点的核心概念 在 LogicFlow 中，自定义节点主要涉及以下几个部分： 1. **模型（Model）**: 描述节点的数据结构及其行为。 2. **视图（View）**: 控制节点的实际外观。 3. **中间件（Middleware）**: 提供扩展能力，在特定阶段插入自定义逻辑。 ##### 模型配置 模型用于存储节点的相关属性和元信息。例如，可以设置默认大小、颜色或其他样式参数[^1]。 ```javascript model: () => { return { extend: 'circle', // 扩展基础圆形节点 size: { width: 50, height: 50 }, // 设置尺寸 style: { fill: '#f0ad4e' }, // 配置填充色 }; }, ``` ##### 视图配置 视图决定了节点最终呈现的样子。通常情况下可以直接使用 SVG 或者 DOM 元素构建。 ```javascript view: () => { return '<svg><circle cx="25" cy="25" r="20"/></svg>'; }, ``` --- #### 边连接规则验证 如果希望对某些类型的节点施加额外约束，则可以在 `validate` 方法中编写相应的校验逻辑[^3]。例如，仅允许特定种类的节点之间建立连线： ```javascript lf.setValidateConnection(() => { return function(sourceNodeId, targetNodeId) { const sourceNode = lf.getNodeById(sourceNodeId); const targetNode = lf.getNodeById(targetNodeId); // 判断源节点是否为 custom-vue-node 类型 if (sourceNode && sourceNode.type !== 'custom-vue-node') { return false; // 不允许其他类型节点发起连接 } // 判断目标节点是否满足条件 if (targetNode && targetNode.type !== 'rect') { return false; // 仅允许连接至 rect 类型节点 } return true; // 否则允许连接 }; }); ``` 当尝试违反这些规则时，LogicFlow 会触发 `connection:not-allowed` 事件，并提供错误消息以便调试。 --- #### 总结 以上介绍了基于 LogicFlow 实现自定义节点的方法，涵盖了从基本原理到具体实践的内容。无论是简单调整还是深入定制，都可以借助其灵活的 API 来完成需求。