#Makepad Flow

https://github.com/mofa-org/makepad-flow

基于 Makepad 的可视化数据流图形库与查看器。用于创建、可视化并交互式操作基于节点的数据流图。

#特性

• FlowCanvas 组件：用于渲染节点图的 GPU 加速画布
• 交互式编辑：拖拽节点、创建连接、缩放与平移
• 可定制节点：多种形状（圆角、菱形、圆形），按分类着色
• 连线样式：实线、虚线、点线并带流动粒子动画
• YAML 导入：从 YAML 文件加载数据流定义
• 过滤：搜索、分类过滤、启用/禁用节点与端口

#快速开始

1# Clone the repository
2git clone https://github.com/mofa-org/makepad-flow.git
3cd makepad-flow
4
5# Run the DORA Viewer demo
6cargo run --bin dora-viewer

#渲染效果

#项目结构

#DORA Viewer

DORA Viewer 是一个用于可视化 DORA 数据流定义的完整应用。

#运行

1cargo run --bin dora-viewer

#功能

#画布导航

#启用/禁用系统

查看器支持启用或禁用节点与端口，以过滤数据流展示。

#Ctrl+Click 切换

在左侧树形面板中，使用 Ctrl+Click 切换任何条目的启用状态：

• Ctrl+Click 节点：切换该节点以及其所有端口
• Ctrl+Click 端口：仅切换该端口

#启用状态

#可视化提示

• 启用项：树形面板中正常文本颜色
• 禁用项：树形面板中灰化显示
• 隐藏连接：连接到禁用端口的边在画布中不显示
• 隐藏节点：节点所有连接禁用后自动从画布消失

#批量操作

#示例流程

1. 在搜索框输入 "control"
2. 点击 Toggle Match → 所有包含 "control" 的端口被禁用
3. 仅含 "control" 连接的节点从画布消失
4. 再次点击 Toggle Match → 端口重新启用，节点重新出现

#控制汇总

#FlowCanvas 库

核心 makepad-flow crate 提供 FlowCanvas 组件，用于构建自定义数据流应用。

#基础用法

1use makepad_flow::flow_canvas::*;
2
3live_design! {
4    use link::theme::*;
5    use link::widgets::*;
6    use makepad_flow::flow_canvas::FlowCanvas;
7
8    App = {{App}} {
9        ui: <Window> {
10            body = <FlowCanvas> {}
11        }
12    }
13}

#添加节点

1// 以编程方式添加节点
2let canvas = self.ui.flow_canvas(id!(body));
3canvas.add_node(cx, NodeType::Processor);

#节点分类

节点可以设置分类用于颜色编码：

#YAML 数据流格式

1nodes:
2  - id: node-name
3    path: executable/path
4    inputs:
5      input-port: source-node/output-port
6    outputs:
7      - output-port-name

#示例

1nodes:
2  - id: camera
3    path: camera-capture
4    outputs:
5      - image
6      - metadata
7
8  - id: detector
9    path: object-detector
10    inputs:
11      frame: camera/image
12    outputs:
13      - detections
14      - confidence
15
16  - id: tracker
17    path: object-tracker
18    inputs:
19      detections: detector/detections
20      frame: camera/image
21    outputs:
22      - tracks

#文档

• DORA Viewer Usage - 详细使用指南
• API Gaps - 已知限制
• Roadmap - 未来开发计划

#要求

• Rust（最新稳定版）
• Makepad 框架