LogicFlow DynamicGroup 连线限制机制disallowEdgeConnectToGroup严格模式的设计与实现【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlowDynamicGroup 是 LogicFlow 内置的分组容器节点。分组作为容器的语义天然不应当被当作普通流程边的端点但历史版本默认允许手动将边连到/从分组节点本身。本文基于 2026-06-16 连线限制设计文档完整讲解 LogicFlow 如何以默认零成本、严格模式可选、节点级可覆盖的三层策略解决这一语义矛盾并深入源码验证连接规则求值、锚点控制与折叠虚拟边不受影响这三条实现路径。读完你将掌握disallowEdgeConnectToGroup的配置方式、properties.allowEdgeConnect的覆盖优先级以及如何通过测试用例验证分组连线限制行为。背景分组作为容器为何不允许被连线dynamic-group节点继承自RectNodeModel见 model.ts展开态下保留 4 个透明但可交互的锚点。在默认行为下用户可以做两件与容器语义相悖的操作将外部节点连线到分组节点本身从分组节点拖出连线连到普通节点。这与分组作为容器的语义不一致也容易与折叠时虚拟边挂到分组边界的行为产生混淆。主流竞品如 draw.io、BPMN Group、React Flow 默认 group普遍不在展开态把分组当作 Sequence Flow 端点。但设计文档同时强调升级成本大量存量项目已经依赖允许连到分组的默认行为因此不能在 minor 版本中静默修改默认值。最终决策是默认保持允许与现网一致提供插件级 opt-in 严格模式。决策要点一览项决策范围仅dynamic-group不改Pool/Lane默认行为维持允许手动连到/从分组升级零成本严格模式插件级 opt-indisallowEdgeConnectToGroup: true节点覆盖properties.allowEdgeConnect可覆盖插件级配置折叠虚拟边不受影响仍走addEdge不经过连接规则校验锚点保留 4 个锚点严格模式下edgeAddable: false版本Minor 新能力非 breakingCHANGELOG 标记为新增 strict 选项行为定义是否允许手动连分组的求值规则设计文档给出了明确的优先级规则若 properties.allowEdgeConnect 已显式设置true/false → 以节点 property 为准 否则 → allow !plugin.disallowEdgeConnectToGroup对应真值表plugin.disallowEdgeConnectToGroupproperties.allowEdgeConnect手动连到/从分组false默认未设置✅ 允许现状falsefalse❌ 禁止falsetrue✅ 允许true未设置❌ 禁止truetrue✅ 允许truefalse❌ 禁止源码中的求值实现这段求值逻辑在DynamicGroupNodeModel.isManualEdgeConnectAllowed()中原样实现model.tsisManualEdgeConnectAllowed(): boolean { const { allowEdgeConnect } this.properties ?? {} if (allowEdgeConnect ! undefined) { return allowEdgeConnect } const plugin this.graphModel.dynamicGroup as | DynamicGroupPluginApi | undefined return !plugin?.disallowEdgeConnectToGroup }可见节点级 property 拥有最高优先级未显式设置时回退到插件选项。插件通过graphModel.dynamicGroup暴露配置该实例在DynamicGroup.init()中通过graphModel.dynamicGroup this挂载见 index.ts。不受影响的场景以下场景明确不经过上述规则折叠时由createVirtualEdge/graphModel.addEdge创建、指向分组的虚拟边lf.render()/addEdge载入的、端点已经是分组的历史边只读展示若用户手动 adjust 端点至分组则走上述规则组内节点 ↔ 外部节点、组内 ↔ 组内 的连线本需求不限制。实现机制组合方案规则 锚点严格模式的实现采用双保险组合连接规则拦截外部连入锚点edgeAddable禁止从分组拖出。1. 连接规则getConnectedTargetRules/getConnectedSourceRules在DynamicGroupNodeModel中重写了两个规则方法model.tsgetConnectedTargetRules() { const rules super.getConnectedTargetRules() rules.push({ message: 分组节点不允许作为边的终点, validate: () this.isManualEdgeConnectAllowed(), }) return rules } getConnectedSourceRules() { const rules super.getConnectedSourceRules() rules.push({ message: 分组节点不允许作为边的起点, validate: () this.isManualEdgeConnectAllowed(), }) return rules }在核心层这些规则由BaseNodeModel.isAllowConnectedAsTarget/isAllowConnectedAsSource遍历调用任一规则validate返回false即中断最终返回{ isAllPass, msg }见 BaseNodeModel.ts。因此严格模式下外部节点连线到分组或从分组拖出连线都会收到分组节点不允许作为边的终点/起点的校验失败消息。2. 锚点控制getDefaultAnchor为禁止从分组拖出连线严格模式下锚点被标记为不可连出model.tsgetDefaultAnchor() { const anchors super.getDefaultAnchor() if (this.isManualEdgeConnectAllowed()) { return anchors } return anchors.map((anchor) ({ ...anchor, edgeAddable: false, })) }锚点本身仍保留数量不变只是edgeAddable: false。这与折叠虚拟边需依赖分组锚点的设计保持一致——折叠时插件仍会通过分组锚点创建虚拟边因此文档特别提示请勿将分组锚点数量设为 0。API插件选项与节点 property插件选项通过pluginsOptions.dynamicGroup传入键名与DynamicGroup.pluginName即dynamicGroup一致const lf new LogicFlow({ container: document.querySelector(#container), plugins: [DynamicGroup], pluginsOptions: { dynamicGroup: { disallowEdgeConnectToGroup: true, // 推荐新业务开启默认 false }, }, })对应的类型定义index.tsexport type DynamicGroupOptions Partial{ isCollapsed: boolean /** 为 true 时禁止手动将边连到/从分组节点默认 false */ disallowEdgeConnectToGroup: boolean /** 删除分组时是否级联删除成员默认 true */ cascadeDeleteChildren: boolean /** 拖拽节点进入分组时的感应外框样式 */ sensorOutline: SensorOutlineOptions }插件构造函数通过assign(this, options)将选项写入实例见 index.tsdisallowEdgeConnectToGroup默认值为false。节点级 property单个分组节点可通过properties.allowEdgeConnect覆盖插件级配置{ type: dynamic-group, x: 300, y: 300, properties: { // 插件已开启 disallowEdgeConnectToGroup 时仅此分组仍允许手动连线 allowEdgeConnect: true, }, }该字段已加入IGroupNodeProperties类型model.ts/** * 是否允许手动将边连到/从本分组节点。 * 显式设置时优先于插件选项 disallowEdgeConnectToGroup。 */ allowEdgeConnect?: boolean测试用例行为被完整验证设计文档规划的测试落在 connect-rules.test.ts测试夹具由 fixtures.ts 提供通过pluginsOptions.dynamicGroup注入选项、渲染dynamic-group节点与一个circle外部节点ID场景断言C1默认插件无 options分组可作为 target/sourceisAllowConnectedAsTarget/AsSource(...).isAllPass trueC2disallowEdgeConnectToGroup: true分组不可作为 target/sourceisAllPass falseC3strict allowEdgeConnect: true该分组可连C4非 strict allowEdgeConnect: false该分组不可连C5strict 下锚点锚点数量 0且每个锚点edgeAddable falseC6回归collapse-edge.test.tsE1/E7/E8全部仍绿折叠相关回归用例E1折叠 → 删虚拟边 → 展开 → 边不复活、E7Gateway 双分支折叠生成两条虚拟边、E8折叠 → 拖分组 → 展开 → 边端点仍在锚点上位于 collapse-edge.test.ts验证了严格模式不会破坏折叠虚拟边的既有行为。用户通知与升级策略非 breaking设计文档明确了变更的落地渠道渠道内容packages/extension/CHANGELOG.mdMinor / Feature新增disallowEdgeConnectToGroup默认行为不变dynamic-group.zh.md重写 FAQ默认允许推荐新业务开启 strict节点级 override 示例update.zh.md可选短段新业务推荐配置 snippetdynamic-group-regression增加 strict 场景说明或子示例明确不做运行时 console 告警、Major 版本、默认 flip。CHANGELOG 中已记录该能力见 packages/extension/CHANGELOG.mdfeat(dynamic-group): 新增插件选项disallowEdgeConnectToGroup默认false行为与历史版本一致。设为true时禁止手动将边连到/从分组节点节点properties.allowEdgeConnect可覆盖。自定义分组的扩展路径若未使用插件选项、需要更细粒度的控制仍可按核心层 连接规则 的机制在继承DynamicGroupNodeModel的子类中重写getConnectedTargetRules/getConnectedSourceRules/getDefaultAnchor。例如class CustomGroupModel extends dynamicGroup.model { getConnectedTargetRules() { const rules super.getConnectedTargetRules() // 自定义更严格的规则如仅允许特定节点类型连入 return rules } }主要改动文件清单packages/extension/src/dynamic-group/index.ts —disallowEdgeConnectToGroup选项与DynamicGroupOptions类型packages/extension/src/dynamic-group/model.ts — 连接规则、getDefaultAnchor、isManualEdgeConnectAllowed、allowEdgeConnect属性packages/extension/test/dynamic-group/connect-rules.test.ts — 新增测试packages/extension/test/dynamic-group/collapse-edge.test.ts — 回归用例sites/docs/docs/tutorial/extension/dynamic-group.zh.md — 官方插件文档packages/extension/CHANGELOG.md — 变更记录examples/dynamic-group-regression/README.md — 回归示例说明可选非目标与后续方向本设计明确排除了以下内容Pool / Lane 连线策略不影响泳道语义Core 层默认规则3.0 版本默认 flip 为 strict可留待后续 major 版本再议。验收清单设计文档给出的最终验收标准如下不传插件 options 时行为与改前一致C1disallowEdgeConnectToGroup: true禁止手动连分组C2–C5折叠虚拟边回归通过C6文档与 CHANGELOG 已更新DynamicGroupOptions类型导出可用实践建议新业务初始化时直接开启disallowEdgeConnectToGroup: true作为默认策略引导用户连线到组内业务节点而非分组框存量项目保持默认值即可实现零成本升级个别需要把分组当端点的场景用properties.allowEdgeConnect: true按节点放行。这样既保证了容器语义的正确性又完整保留了历史兼容与灵活性。【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 LogicFlow DynamicGroup 连线限制机制：`disallowEdgeConnectToGroup` 严格模式的设计与实现
LogicFlow DynamicGroup 连线限制机制disallowEdgeConnectToGroup严格模式的设计与实现【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlowDynamicGroup 是 LogicFlow 内置的分组容器节点。分组作为容器的语义天然不应当被当作普通流程边的端点但历史版本默认允许手动将边连到/从分组节点本身。本文基于 2026-06-16 连线限制设计文档完整讲解 LogicFlow 如何以默认零成本、严格模式可选、节点级可覆盖的三层策略解决这一语义矛盾并深入源码验证连接规则求值、锚点控制与折叠虚拟边不受影响这三条实现路径。读完你将掌握disallowEdgeConnectToGroup的配置方式、properties.allowEdgeConnect的覆盖优先级以及如何通过测试用例验证分组连线限制行为。背景分组作为容器为何不允许被连线dynamic-group节点继承自RectNodeModel见 model.ts展开态下保留 4 个透明但可交互的锚点。在默认行为下用户可以做两件与容器语义相悖的操作将外部节点连线到分组节点本身从分组节点拖出连线连到普通节点。这与分组作为容器的语义不一致也容易与折叠时虚拟边挂到分组边界的行为产生混淆。主流竞品如 draw.io、BPMN Group、React Flow 默认 group普遍不在展开态把分组当作 Sequence Flow 端点。但设计文档同时强调升级成本大量存量项目已经依赖允许连到分组的默认行为因此不能在 minor 版本中静默修改默认值。最终决策是默认保持允许与现网一致提供插件级 opt-in 严格模式。决策要点一览项决策范围仅dynamic-group不改Pool/Lane默认行为维持允许手动连到/从分组升级零成本严格模式插件级 opt-indisallowEdgeConnectToGroup: true节点覆盖properties.allowEdgeConnect可覆盖插件级配置折叠虚拟边不受影响仍走addEdge不经过连接规则校验锚点保留 4 个锚点严格模式下edgeAddable: false版本Minor 新能力非 breakingCHANGELOG 标记为新增 strict 选项行为定义是否允许手动连分组的求值规则设计文档给出了明确的优先级规则若 properties.allowEdgeConnect 已显式设置true/false → 以节点 property 为准 否则 → allow !plugin.disallowEdgeConnectToGroup对应真值表plugin.disallowEdgeConnectToGroupproperties.allowEdgeConnect手动连到/从分组false默认未设置✅ 允许现状falsefalse❌ 禁止falsetrue✅ 允许true未设置❌ 禁止truetrue✅ 允许truefalse❌ 禁止源码中的求值实现这段求值逻辑在DynamicGroupNodeModel.isManualEdgeConnectAllowed()中原样实现model.tsisManualEdgeConnectAllowed(): boolean { const { allowEdgeConnect } this.properties ?? {} if (allowEdgeConnect ! undefined) { return allowEdgeConnect } const plugin this.graphModel.dynamicGroup as | DynamicGroupPluginApi | undefined return !plugin?.disallowEdgeConnectToGroup }可见节点级 property 拥有最高优先级未显式设置时回退到插件选项。插件通过graphModel.dynamicGroup暴露配置该实例在DynamicGroup.init()中通过graphModel.dynamicGroup this挂载见 index.ts。不受影响的场景以下场景明确不经过上述规则折叠时由createVirtualEdge/graphModel.addEdge创建、指向分组的虚拟边lf.render()/addEdge载入的、端点已经是分组的历史边只读展示若用户手动 adjust 端点至分组则走上述规则组内节点 ↔ 外部节点、组内 ↔ 组内 的连线本需求不限制。实现机制组合方案规则 锚点严格模式的实现采用双保险组合连接规则拦截外部连入锚点edgeAddable禁止从分组拖出。1. 连接规则getConnectedTargetRules/getConnectedSourceRules在DynamicGroupNodeModel中重写了两个规则方法model.tsgetConnectedTargetRules() { const rules super.getConnectedTargetRules() rules.push({ message: 分组节点不允许作为边的终点, validate: () this.isManualEdgeConnectAllowed(), }) return rules } getConnectedSourceRules() { const rules super.getConnectedSourceRules() rules.push({ message: 分组节点不允许作为边的起点, validate: () this.isManualEdgeConnectAllowed(), }) return rules }在核心层这些规则由BaseNodeModel.isAllowConnectedAsTarget/isAllowConnectedAsSource遍历调用任一规则validate返回false即中断最终返回{ isAllPass, msg }见 BaseNodeModel.ts。因此严格模式下外部节点连线到分组或从分组拖出连线都会收到分组节点不允许作为边的终点/起点的校验失败消息。2. 锚点控制getDefaultAnchor为禁止从分组拖出连线严格模式下锚点被标记为不可连出model.tsgetDefaultAnchor() { const anchors super.getDefaultAnchor() if (this.isManualEdgeConnectAllowed()) { return anchors } return anchors.map((anchor) ({ ...anchor, edgeAddable: false, })) }锚点本身仍保留数量不变只是edgeAddable: false。这与折叠虚拟边需依赖分组锚点的设计保持一致——折叠时插件仍会通过分组锚点创建虚拟边因此文档特别提示请勿将分组锚点数量设为 0。API插件选项与节点 property插件选项通过pluginsOptions.dynamicGroup传入键名与DynamicGroup.pluginName即dynamicGroup一致const lf new LogicFlow({ container: document.querySelector(#container), plugins: [DynamicGroup], pluginsOptions: { dynamicGroup: { disallowEdgeConnectToGroup: true, // 推荐新业务开启默认 false }, }, })对应的类型定义index.tsexport type DynamicGroupOptions Partial{ isCollapsed: boolean /** 为 true 时禁止手动将边连到/从分组节点默认 false */ disallowEdgeConnectToGroup: boolean /** 删除分组时是否级联删除成员默认 true */ cascadeDeleteChildren: boolean /** 拖拽节点进入分组时的感应外框样式 */ sensorOutline: SensorOutlineOptions }插件构造函数通过assign(this, options)将选项写入实例见 index.tsdisallowEdgeConnectToGroup默认值为false。节点级 property单个分组节点可通过properties.allowEdgeConnect覆盖插件级配置{ type: dynamic-group, x: 300, y: 300, properties: { // 插件已开启 disallowEdgeConnectToGroup 时仅此分组仍允许手动连线 allowEdgeConnect: true, }, }该字段已加入IGroupNodeProperties类型model.ts/** * 是否允许手动将边连到/从本分组节点。 * 显式设置时优先于插件选项 disallowEdgeConnectToGroup。 */ allowEdgeConnect?: boolean测试用例行为被完整验证设计文档规划的测试落在 connect-rules.test.ts测试夹具由 fixtures.ts 提供通过pluginsOptions.dynamicGroup注入选项、渲染dynamic-group节点与一个circle外部节点ID场景断言C1默认插件无 options分组可作为 target/sourceisAllowConnectedAsTarget/AsSource(...).isAllPass trueC2disallowEdgeConnectToGroup: true分组不可作为 target/sourceisAllPass falseC3strict allowEdgeConnect: true该分组可连C4非 strict allowEdgeConnect: false该分组不可连C5strict 下锚点锚点数量 0且每个锚点edgeAddable falseC6回归collapse-edge.test.tsE1/E7/E8全部仍绿折叠相关回归用例E1折叠 → 删虚拟边 → 展开 → 边不复活、E7Gateway 双分支折叠生成两条虚拟边、E8折叠 → 拖分组 → 展开 → 边端点仍在锚点上位于 collapse-edge.test.ts验证了严格模式不会破坏折叠虚拟边的既有行为。用户通知与升级策略非 breaking设计文档明确了变更的落地渠道渠道内容packages/extension/CHANGELOG.mdMinor / Feature新增disallowEdgeConnectToGroup默认行为不变dynamic-group.zh.md重写 FAQ默认允许推荐新业务开启 strict节点级 override 示例update.zh.md可选短段新业务推荐配置 snippetdynamic-group-regression增加 strict 场景说明或子示例明确不做运行时 console 告警、Major 版本、默认 flip。CHANGELOG 中已记录该能力见 packages/extension/CHANGELOG.mdfeat(dynamic-group): 新增插件选项disallowEdgeConnectToGroup默认false行为与历史版本一致。设为true时禁止手动将边连到/从分组节点节点properties.allowEdgeConnect可覆盖。自定义分组的扩展路径若未使用插件选项、需要更细粒度的控制仍可按核心层 连接规则 的机制在继承DynamicGroupNodeModel的子类中重写getConnectedTargetRules/getConnectedSourceRules/getDefaultAnchor。例如class CustomGroupModel extends dynamicGroup.model { getConnectedTargetRules() { const rules super.getConnectedTargetRules() // 自定义更严格的规则如仅允许特定节点类型连入 return rules } }主要改动文件清单packages/extension/src/dynamic-group/index.ts —disallowEdgeConnectToGroup选项与DynamicGroupOptions类型packages/extension/src/dynamic-group/model.ts — 连接规则、getDefaultAnchor、isManualEdgeConnectAllowed、allowEdgeConnect属性packages/extension/test/dynamic-group/connect-rules.test.ts — 新增测试packages/extension/test/dynamic-group/collapse-edge.test.ts — 回归用例sites/docs/docs/tutorial/extension/dynamic-group.zh.md — 官方插件文档packages/extension/CHANGELOG.md — 变更记录examples/dynamic-group-regression/README.md — 回归示例说明可选非目标与后续方向本设计明确排除了以下内容Pool / Lane 连线策略不影响泳道语义Core 层默认规则3.0 版本默认 flip 为 strict可留待后续 major 版本再议。验收清单设计文档给出的最终验收标准如下不传插件 options 时行为与改前一致C1disallowEdgeConnectToGroup: true禁止手动连分组C2–C5折叠虚拟边回归通过C6文档与 CHANGELOG 已更新DynamicGroupOptions类型导出可用实践建议新业务初始化时直接开启disallowEdgeConnectToGroup: true作为默认策略引导用户连线到组内业务节点而非分组框存量项目保持默认值即可实现零成本升级个别需要把分组当端点的场景用properties.allowEdgeConnect: true按节点放行。这样既保证了容器语义的正确性又完整保留了历史兼容与灵活性。【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考