Qt编程：QNodeEditor 工程代码简介

本文链接：https://blog.csdn.net/WaitingHereFor/article/details/149276505

【链接】https://github.com/Qv2ray/QNodeEditor

QNodeEditor 是一个基于 Qt 的节点编辑器框架，用于创建可视化的节点图应用程序。下面将从工程结构和核心组件两个方面进行详细解析。

工程结构

1. 头文件目录 (include/)

头文件目录包含了框架的所有公共接口定义：

核心组件

Node.hpp - 节点基础类
NodeDataModel.hpp - 节点数据模型抽象接口
Connection.hpp - 连接线基础类
FlowScene.hpp - 节点场景管理
FlowView.hpp - 节点视图组件

数据结构

NodeData.hpp - 节点数据基类
DataModelRegistry.hpp - 节点数据模型注册表
TypeConverter.hpp - 数据类型转换器

图形元素

NodeGeometry.hpp - 节点几何计算
NodeGraphicsObject.hpp - 节点图形对象
ConnectionGeometry.hpp - 连接线几何计算
ConnectionGraphicsObject.hpp - 连接线图形对象

样式系统

NodeStyle.hpp - 节点样式定义
ConnectionStyle.hpp - 连接线样式定义
FlowViewStyle.hpp - 视图样式定义
Style.hpp - 基础样式定义
StyleCollection.hpp - 样式集合管理

辅助功能

Serializable.hpp - 序列化接口
Compiler.hpp - 编译器相关工具
OperatingSystem.hpp - 操作系统相关工具

2. 源文件目录

源文件实现了头文件中定义的接口：

节点相关

Node.cpp - 节点实现
NodeDataModel.cpp - 节点数据模型基础实现
NodeGeometry.cpp - 节点几何计算实现
NodeGraphicsObject.cpp - 节点图形对象实现
NodePainter.cpp/.hpp - 节点绘制逻辑
NodeState.cpp - 节点状态管理

连接线相关

Connection.cpp - 连接线实现
ConnectionGeometry.cpp - 连接线几何计算
ConnectionGraphicsObject.cpp - 连接线图形对象
ConnectionPainter.cpp/.hpp - 连接线绘制逻辑
ConnectionState.cpp - 连接线状态管理
ConnectionStyle.cpp - 连接线样式实现

场景管理

FlowScene.cpp - 节点场景实现
FlowView.cpp - 节点视图实现
NodeConnectionInteraction.cpp/.hpp - 节点与连接线交互逻辑

样式系统

StyleCollection.cpp - 样式集合实现
NodeStyle.cpp - 节点样式实现
FlowViewStyle.cpp - 视图样式实现

其他

DataModelRegistry.cpp - 数据模型注册表实现
Properties.cpp/.hpp - 属性系统

核心组件详解

1. 节点系统 (Node)

NodeDataModel (抽象基类)

定义节点的数据模型接口
负责：
- 节点标题/名称
- 端口定义(数量、类型、连接策略)
- 数据处理逻辑
- 嵌入式小部件
- 序列化/反序列化

Node 类

组合了：
- NodeGraphicsObject (图形表示)
- NodeGeometry (几何计算)
- NodeDataModel (数据模型)
- NodeState (状态管理)
负责节点在场景中的生命周期

NodeGraphicsObject

继承自 QGraphicsObject
处理：
- 鼠标事件(拖动、选择等)
- 绘制请求转发
- 位置变化通知

NodeGeometry

计算：
- 节点尺寸
- 端口位置
- 标题区域
- 小部件区域

2. 连接系统 (Connection)

Connection 类

组合了：
- ConnectionGraphicsObject (图形表示)
- ConnectionGeometry (几何计算)
- ConnectionState (状态管理)
管理两个端口间的数据流

ConnectionGraphicsObject

继承自 QGraphicsObject
处理：
- 鼠标交互
- 绘制请求
- 位置更新

ConnectionGeometry

计算：
- 控制点(用于贝塞尔曲线)
- 边界框
- 与端口的交点

3. 场景管理 (FlowScene/FlowView)

FlowScene

继承自 QGraphicsScene
管理：
- 所有节点和连接
- 节点创建/删除
- 连接创建/删除
- 序列化/反序列化整个图

FlowView

继承自 QGraphicsView
提供：
- 视图缩放/平移
- 背景绘制
- 用户交互入口点

4. 样式系统

StyleCollection

集中管理所有样式对象
提供默认样式
允许全局样式覆盖

样式类 (NodeStyle/ConnectionStyle/FlowViewStyle)

定义各种可视化属性：
- 颜色
- 线宽
- 字体
- 边距/间距

5. 数据模型注册表 (DataModelRegistry)

维护 NodeDataModel 工厂函数的映射
允许按类型名称创建节点
支持数据类型兼容性检查

关键设计特点

模型-视图分离：
- 数据模型(NodeDataModel)与图形表示(NodeGraphicsObject)严格分离
- 通过信号槽通信
灵活的样式系统：
- 支持全局样式覆盖
- 允许单个元素自定义样式
可扩展的架构：
- 通过继承 NodeDataModel 创建自定义节点
- 通过 DataModelRegistry 注册新节点类型
完善的交互支持：
- 内置节点拖动、连接创建、选择等交互
- 提供交互事件钩子
序列化支持：
- 整个图可以保存/加载
- 自定义节点可以扩展序列化数据

典型使用流程

创建自定义节点：
class MyNodeModel : public NodeDataModel {
  // 实现必要接口...
};
注册节点类型：
registry->registerModel<MyNodeModel>("My Node Type");
创建场景和视图：
FlowScene scene;
FlowView view(&scene);
通过工厂创建节点：
auto& node = scene.createNode(registry->create("My Node Type"));
处理节点连接和数据流：

框架自动处理连接可视化

在 setInData()/outData() 中实现数据逻辑