ImNodes源码解析从Slot机制到Canvas状态管理的实现原理【免费下载链接】ImNodesNode graph implementation for Dear ImGui. Used in https://github.com/rokups/rbfx项目地址: https://gitcode.com/gh_mirrors/imn/ImNodesImNodes 是一个基于 Dear ImGui 的轻量级节点图实现库它为开发者提供了构建可视化节点编辑器所需的核心功能。 本文将深入解析 ImNodes 的源码实现从 Slot 机制到 Canvas 状态管理帮助你全面理解这个优秀的节点图库的设计思想。什么是 ImNodesImNodes 是一个独立的 Dear ImGui 节点图实现专门用于创建可视化编程界面、流程图编辑器、材质编辑器等需要节点连接功能的应用程序。它提供了节点创建、连接管理、拖拽交互等核心功能同时保持与 Dear ImGui 的无缝集成。核心架构设计Canvas 状态管理系统在ImNodes.h中定义的CanvasState结构是整个系统的核心状态容器struct IMGUI_API CanvasState { float Zoom 1.0; // 当前画布缩放 ImVec2 Offset; // 当前滚动偏移 ImColor Colors[StyleColor::ColMax]; // 样式颜色 struct CanvasStyle // 样式参数 { float CurveThickness 5.0f; // 连接曲线粗细 float ConnectionIndent 1.0f; // 连接缩进 float GridSpacing 64.0f; // 网格间距 float CurveStrength 100.0f; // 曲线强度 float NodeRounding 5.0f; // 节点圆角 ImVec2 NodeSpacing{4.0f, 4.0f}; // 节点间距 } Style; _CanvasStateImpl* _Impl nullptr; // 实现细节 };真正的状态管理隐藏在_CanvasStateImpl内部实现中这种设计分离了公共接口和私有实现保持了 API 的简洁性。Slot 机制的巧妙设计Slot 类型识别系统ImNodes 使用巧妙的类型标识系统来区分输入和输出 Slot// 将 kind id 转换为输入类型 inline int InputSlotKind(int kind) { return kind 0 ? -kind : kind; } // 将 kind id 转换为输出类型 inline int OutputSlotKind(int kind) { return kind 0 ? -kind : kind; } // 判断是否为输入 Slot inline bool IsInputSlotKind(int kind) { return kind 0; } // 判断是否为输出 Slot inline bool IsOutputSlotKind(int kind) { return kind 0; }这个系统通过正负号来区分输入输出零值被保留避免了类型冲突。Slot 数据存储机制在ImNodes.cpp中Slot 位置信息通过哈希系统进行存储和检索ImU32 MakeSlotDataID(const char* data, const char* slot_title, void* node_id, bool input_slot) { ImU32 slot_id ImHashStr(slot_title, 0, ImHashData(node_id, sizeof(node_id))); if (input_slot) { // 确保相同名称的输入输出 Slot 有不同的 ID slot_id ^ ~0U; } return ImHashStr(data, 0, slot_id); }这个函数为每个 Slot 的每个属性如 x、y 坐标生成唯一的 ID确保数据存储的精确性。连接系统的实现原理连接创建流程连接创建是 ImNodes 最核心的功能之一。当用户开始拖拽连接时系统会创建_DragConnectionPayloadstruct _DragConnectionPayload { void* NodeId nullptr; // 连接起始的节点 ID const char* SlotTitle nullptr; // 源 Slot 名称 int SlotKind 0; // 源 Slot 类型 };在EndCanvas()函数中系统会检查是否有待处理的连接if (const ImGuiPayload* payload ImGui::GetDragDropPayload()) { char data_type_fragment[] new-node-connection-; if (strncmp(payload-DataType, data_type_fragment, sizeof(data_type_fragment) - 1) 0) { // 渲染待处理的连接 auto* drag_data (_DragConnectionPayload*)payload-Data; // ... 计算连接位置并渲染 } }连接渲染算法连接曲线使用贝塞尔曲线进行渲染提供了平滑的视觉效果bool RenderConnection(const ImVec2 input_pos, const ImVec2 output_pos, float thickness) { ImDrawList* draw_list ImGui::GetWindowDrawList(); CanvasState* canvas gCanvas; thickness * canvas-Zoom; ImVec2 p2 input_pos - ImVec2{canvas-Style.CurveStrength * canvas-Zoom, 0}; ImVec2 p3 output_pos ImVec2{canvas-Style.CurveStrength * canvas-Zoom, 0}; // 计算鼠标位置到曲线的最短距离 ImVec2 closest_pt ImBezierCubicClosestPointCasteljau( input_pos, p2, p3, output_pos, ImGui::GetMousePos(), style.CurveTessellationTol); float min_square_distance ImFabs(ImLengthSqr(ImGui::GetMousePos() - closest_pt)); bool is_close min_square_distance thickness * thickness; // 根据悬停状态选择颜色 draw_list-AddBezierCubic(input_pos, p2, p3, output_pos, is_close ? canvas-Colors[ColConnectionActive] : canvas-Colors[ColConnection], thickness, 0); return is_close; }节点交互状态管理节点选择系统ImNodes 实现了复杂的节点选择逻辑支持单选、多选和框选// 在 EndNode() 函数中的选择逻辑 switch (impl-State) { case State_None: // 节点悬停检测 if (ImGui::IsItemHovered()) impl-PendingHoveredNodeId node_item_id; // 节点选择行为 if (impl-DoSelectionsFrame ImGui::GetCurrentContext()-FrameCount) { // 当某个节点被左键点击时取消选择其他节点 if (impl-SingleSelectedNode node_id) { // 切换选择状态 if (impl-PrevSelectCount (node_selected ? 1 : 0)) node_selected true; else node_selected ^ true; } else node_selected false; } break; }拖拽状态管理节点拖拽支持单个节点拖拽和多个选中节点一起拖拽case State_Drag: { if (ImGui::IsMouseDown(0)) { // 节点拖拽行为 if ((ImGui::IsItemActive() || (impl-DragNode impl-DragNodeSelected node_selected))) node_pos ImGui::GetIO().MouseDelta / canvas-Zoom; } break; }画布视图控制缩放和平移实现在BeginCanvas()函数中ImNodes 实现了完整的画布视图控制if (!ImGui::IsMouseDown(0) ImGui::IsWindowHovered()) { if (ImGui::IsMouseDragging(2)) canvas-Offset io.MouseDelta; // 中键拖拽平移 if (!io.KeyShift io.KeyCtrl) { if (io.MouseWheel ! 0) { // 基于鼠标位置的智能缩放 ImVec2 mouseRel ImVec2{ ImGui::GetMousePos().x - ImGui::GetWindowPos().x, ImGui::GetMousePos().y - ImGui::GetWindowPos().y }; float prevZoom canvas-Zoom; canvas-Zoom ImClamp(canvas-Zoom io.MouseWheel * canvas-Zoom / 16.f, 0.3f, 3.f); float zoomFactor (prevZoom - canvas-Zoom) / prevZoom; canvas-Offset (mouseRel - canvas-Offset) * zoomFactor; } } }网格渲染画布背景网格的渲染考虑了缩放和偏移const float grid canvas-Style.GridSpacing * canvas-Zoom; ImU32 grid_color ImColor(canvas-Colors[ColCanvasLines]); for (float x fmodf(canvas-Offset.x, grid); x size.x;) { draw_list-AddLine(ImVec2(x, 0) pos, ImVec2(x, size.y) pos, grid_color); x grid; }高级特性Ez 命名空间ImNodes 还提供了一个更简单的Ez命名空间让节点创建更加便捷namespace ImNodes { namespace Ez { struct SlotInfo { const char* title; // Slot 标题 int kind; // Slot 类型 }; // 简化的节点创建接口 IMGUI_API bool BeginNode(void* node_id, const char* title, ImVec2* pos, bool* selected); IMGUI_API void EndNode(); IMGUI_API void InputSlots(const SlotInfo* slots, int slot_count); IMGUI_API void OutputSlots(const SlotInfo* slots, int slot_count); } }性能优化技巧通道分离渲染ImNodes 使用了 Dear ImGui 的通道系统来优化渲染性能// 在 BeginNode() 中 draw_list-ChannelsSplit(2); // 通道0: 节点矩形和曲线通道1: 节点内容 // 渲染节点内容时 draw_list-ChannelsSetCurrent(1); // 渲染节点框架时 draw_list-ChannelsSetCurrent(0); // 在 EndNode() 中合并通道 draw_list-ChannelsMerge();这种分离确保了节点内容不会干扰连接曲线的渲染提高了渲染效率。智能缓存系统ImNodes 使用ImGuiStorage来缓存各种节点和 Slot 的属性struct _CanvasStateImpl { ImGuiStorage CachedData{}; // 各种内部节点/Slot 属性的存储 // ... 其他成员 };这个缓存系统避免了重复计算特别是在处理大量节点时显著提升了性能。实际应用示例在sample.cpp中可以看到一个完整的使用示例// 定义节点结构 struct MyNode { const char* Title nullptr; bool Selected false; ImVec2 Pos{}; std::vectorConnection Connections{}; std::vectorImNodes::Ez::SlotInfo InputSlots{}; std::vectorImNodes::Ez::SlotInfo OutputSlots{}; }; // 在渲染循环中 ImNodes::BeginCanvas(canvas); for (auto node : nodes) { if (ImNodes::Ez::BeginNode(node, Node Title, node.pos, node.selected)) { ImNodes::Ez::InputSlots(node.inputs, 1); ImNodes::Ez::OutputSlots(node.outputs, 1); ImNodes::Ez::EndNode(); } } ImNodes::EndCanvas();总结与最佳实践ImNodes 的设计体现了几个重要的软件工程原则关注点分离Canvas 状态、节点逻辑、渲染逻辑清晰分离性能优先通过通道分离和智能缓存优化渲染性能扩展性通过 Slot 类型系统和连接机制支持复杂的节点图需求用户体验智能的缩放、拖拽和选择逻辑提供了流畅的交互体验对于想要在自己的项目中集成节点图功能的开发者ImNodes 提供了一个强大而灵活的基础。通过理解其源码实现你可以更好地定制和扩展功能创建出符合特定需求的节点编辑器。无论你是构建可视化编程工具、流程图编辑器还是复杂的材质系统ImNodes 的 Slot 机制和 Canvas 状态管理都能为你提供坚实的基础。【免费下载链接】ImNodesNode graph implementation for Dear ImGui. Used in https://github.com/rokups/rbfx项目地址: https://gitcode.com/gh_mirrors/imn/ImNodes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
ImNodes源码解析：从Slot机制到Canvas状态管理的实现原理
ImNodes源码解析从Slot机制到Canvas状态管理的实现原理【免费下载链接】ImNodesNode graph implementation for Dear ImGui. Used in https://github.com/rokups/rbfx项目地址: https://gitcode.com/gh_mirrors/imn/ImNodesImNodes 是一个基于 Dear ImGui 的轻量级节点图实现库它为开发者提供了构建可视化节点编辑器所需的核心功能。 本文将深入解析 ImNodes 的源码实现从 Slot 机制到 Canvas 状态管理帮助你全面理解这个优秀的节点图库的设计思想。什么是 ImNodesImNodes 是一个独立的 Dear ImGui 节点图实现专门用于创建可视化编程界面、流程图编辑器、材质编辑器等需要节点连接功能的应用程序。它提供了节点创建、连接管理、拖拽交互等核心功能同时保持与 Dear ImGui 的无缝集成。核心架构设计Canvas 状态管理系统在ImNodes.h中定义的CanvasState结构是整个系统的核心状态容器struct IMGUI_API CanvasState { float Zoom 1.0; // 当前画布缩放 ImVec2 Offset; // 当前滚动偏移 ImColor Colors[StyleColor::ColMax]; // 样式颜色 struct CanvasStyle // 样式参数 { float CurveThickness 5.0f; // 连接曲线粗细 float ConnectionIndent 1.0f; // 连接缩进 float GridSpacing 64.0f; // 网格间距 float CurveStrength 100.0f; // 曲线强度 float NodeRounding 5.0f; // 节点圆角 ImVec2 NodeSpacing{4.0f, 4.0f}; // 节点间距 } Style; _CanvasStateImpl* _Impl nullptr; // 实现细节 };真正的状态管理隐藏在_CanvasStateImpl内部实现中这种设计分离了公共接口和私有实现保持了 API 的简洁性。Slot 机制的巧妙设计Slot 类型识别系统ImNodes 使用巧妙的类型标识系统来区分输入和输出 Slot// 将 kind id 转换为输入类型 inline int InputSlotKind(int kind) { return kind 0 ? -kind : kind; } // 将 kind id 转换为输出类型 inline int OutputSlotKind(int kind) { return kind 0 ? -kind : kind; } // 判断是否为输入 Slot inline bool IsInputSlotKind(int kind) { return kind 0; } // 判断是否为输出 Slot inline bool IsOutputSlotKind(int kind) { return kind 0; }这个系统通过正负号来区分输入输出零值被保留避免了类型冲突。Slot 数据存储机制在ImNodes.cpp中Slot 位置信息通过哈希系统进行存储和检索ImU32 MakeSlotDataID(const char* data, const char* slot_title, void* node_id, bool input_slot) { ImU32 slot_id ImHashStr(slot_title, 0, ImHashData(node_id, sizeof(node_id))); if (input_slot) { // 确保相同名称的输入输出 Slot 有不同的 ID slot_id ^ ~0U; } return ImHashStr(data, 0, slot_id); }这个函数为每个 Slot 的每个属性如 x、y 坐标生成唯一的 ID确保数据存储的精确性。连接系统的实现原理连接创建流程连接创建是 ImNodes 最核心的功能之一。当用户开始拖拽连接时系统会创建_DragConnectionPayloadstruct _DragConnectionPayload { void* NodeId nullptr; // 连接起始的节点 ID const char* SlotTitle nullptr; // 源 Slot 名称 int SlotKind 0; // 源 Slot 类型 };在EndCanvas()函数中系统会检查是否有待处理的连接if (const ImGuiPayload* payload ImGui::GetDragDropPayload()) { char data_type_fragment[] new-node-connection-; if (strncmp(payload-DataType, data_type_fragment, sizeof(data_type_fragment) - 1) 0) { // 渲染待处理的连接 auto* drag_data (_DragConnectionPayload*)payload-Data; // ... 计算连接位置并渲染 } }连接渲染算法连接曲线使用贝塞尔曲线进行渲染提供了平滑的视觉效果bool RenderConnection(const ImVec2 input_pos, const ImVec2 output_pos, float thickness) { ImDrawList* draw_list ImGui::GetWindowDrawList(); CanvasState* canvas gCanvas; thickness * canvas-Zoom; ImVec2 p2 input_pos - ImVec2{canvas-Style.CurveStrength * canvas-Zoom, 0}; ImVec2 p3 output_pos ImVec2{canvas-Style.CurveStrength * canvas-Zoom, 0}; // 计算鼠标位置到曲线的最短距离 ImVec2 closest_pt ImBezierCubicClosestPointCasteljau( input_pos, p2, p3, output_pos, ImGui::GetMousePos(), style.CurveTessellationTol); float min_square_distance ImFabs(ImLengthSqr(ImGui::GetMousePos() - closest_pt)); bool is_close min_square_distance thickness * thickness; // 根据悬停状态选择颜色 draw_list-AddBezierCubic(input_pos, p2, p3, output_pos, is_close ? canvas-Colors[ColConnectionActive] : canvas-Colors[ColConnection], thickness, 0); return is_close; }节点交互状态管理节点选择系统ImNodes 实现了复杂的节点选择逻辑支持单选、多选和框选// 在 EndNode() 函数中的选择逻辑 switch (impl-State) { case State_None: // 节点悬停检测 if (ImGui::IsItemHovered()) impl-PendingHoveredNodeId node_item_id; // 节点选择行为 if (impl-DoSelectionsFrame ImGui::GetCurrentContext()-FrameCount) { // 当某个节点被左键点击时取消选择其他节点 if (impl-SingleSelectedNode node_id) { // 切换选择状态 if (impl-PrevSelectCount (node_selected ? 1 : 0)) node_selected true; else node_selected ^ true; } else node_selected false; } break; }拖拽状态管理节点拖拽支持单个节点拖拽和多个选中节点一起拖拽case State_Drag: { if (ImGui::IsMouseDown(0)) { // 节点拖拽行为 if ((ImGui::IsItemActive() || (impl-DragNode impl-DragNodeSelected node_selected))) node_pos ImGui::GetIO().MouseDelta / canvas-Zoom; } break; }画布视图控制缩放和平移实现在BeginCanvas()函数中ImNodes 实现了完整的画布视图控制if (!ImGui::IsMouseDown(0) ImGui::IsWindowHovered()) { if (ImGui::IsMouseDragging(2)) canvas-Offset io.MouseDelta; // 中键拖拽平移 if (!io.KeyShift io.KeyCtrl) { if (io.MouseWheel ! 0) { // 基于鼠标位置的智能缩放 ImVec2 mouseRel ImVec2{ ImGui::GetMousePos().x - ImGui::GetWindowPos().x, ImGui::GetMousePos().y - ImGui::GetWindowPos().y }; float prevZoom canvas-Zoom; canvas-Zoom ImClamp(canvas-Zoom io.MouseWheel * canvas-Zoom / 16.f, 0.3f, 3.f); float zoomFactor (prevZoom - canvas-Zoom) / prevZoom; canvas-Offset (mouseRel - canvas-Offset) * zoomFactor; } } }网格渲染画布背景网格的渲染考虑了缩放和偏移const float grid canvas-Style.GridSpacing * canvas-Zoom; ImU32 grid_color ImColor(canvas-Colors[ColCanvasLines]); for (float x fmodf(canvas-Offset.x, grid); x size.x;) { draw_list-AddLine(ImVec2(x, 0) pos, ImVec2(x, size.y) pos, grid_color); x grid; }高级特性Ez 命名空间ImNodes 还提供了一个更简单的Ez命名空间让节点创建更加便捷namespace ImNodes { namespace Ez { struct SlotInfo { const char* title; // Slot 标题 int kind; // Slot 类型 }; // 简化的节点创建接口 IMGUI_API bool BeginNode(void* node_id, const char* title, ImVec2* pos, bool* selected); IMGUI_API void EndNode(); IMGUI_API void InputSlots(const SlotInfo* slots, int slot_count); IMGUI_API void OutputSlots(const SlotInfo* slots, int slot_count); } }性能优化技巧通道分离渲染ImNodes 使用了 Dear ImGui 的通道系统来优化渲染性能// 在 BeginNode() 中 draw_list-ChannelsSplit(2); // 通道0: 节点矩形和曲线通道1: 节点内容 // 渲染节点内容时 draw_list-ChannelsSetCurrent(1); // 渲染节点框架时 draw_list-ChannelsSetCurrent(0); // 在 EndNode() 中合并通道 draw_list-ChannelsMerge();这种分离确保了节点内容不会干扰连接曲线的渲染提高了渲染效率。智能缓存系统ImNodes 使用ImGuiStorage来缓存各种节点和 Slot 的属性struct _CanvasStateImpl { ImGuiStorage CachedData{}; // 各种内部节点/Slot 属性的存储 // ... 其他成员 };这个缓存系统避免了重复计算特别是在处理大量节点时显著提升了性能。实际应用示例在sample.cpp中可以看到一个完整的使用示例// 定义节点结构 struct MyNode { const char* Title nullptr; bool Selected false; ImVec2 Pos{}; std::vectorConnection Connections{}; std::vectorImNodes::Ez::SlotInfo InputSlots{}; std::vectorImNodes::Ez::SlotInfo OutputSlots{}; }; // 在渲染循环中 ImNodes::BeginCanvas(canvas); for (auto node : nodes) { if (ImNodes::Ez::BeginNode(node, Node Title, node.pos, node.selected)) { ImNodes::Ez::InputSlots(node.inputs, 1); ImNodes::Ez::OutputSlots(node.outputs, 1); ImNodes::Ez::EndNode(); } } ImNodes::EndCanvas();总结与最佳实践ImNodes 的设计体现了几个重要的软件工程原则关注点分离Canvas 状态、节点逻辑、渲染逻辑清晰分离性能优先通过通道分离和智能缓存优化渲染性能扩展性通过 Slot 类型系统和连接机制支持复杂的节点图需求用户体验智能的缩放、拖拽和选择逻辑提供了流畅的交互体验对于想要在自己的项目中集成节点图功能的开发者ImNodes 提供了一个强大而灵活的基础。通过理解其源码实现你可以更好地定制和扩展功能创建出符合特定需求的节点编辑器。无论你是构建可视化编程工具、流程图编辑器还是复杂的材质系统ImNodes 的 Slot 机制和 Canvas 状态管理都能为你提供坚实的基础。【免费下载链接】ImNodesNode graph implementation for Dear ImGui. Used in https://github.com/rokups/rbfx项目地址: https://gitcode.com/gh_mirrors/imn/ImNodes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
