WPF 如何支撑一个灵活的流程图编辑器？
前言
软件开发领域，流程设计与可视化是提升系统可维护性、增强用户体验的重要手段。无论是工作流管理、业务逻辑编排还是算法流程展示，一个灵活、易用的流程节点编辑框架都能极大地提高开发效率与系统灵活性。
本文将推荐一款基于 WPF 的开源流程节点编辑框架，通过对其核心设计与实现逻辑的解析，带领大家从零开始手写一个具备基础功能的 WPF 流程图编辑器，为实际项目中的可视化流程开发提供有价值的参考。
项目介绍
一款基于WPF的图形化流程节点编辑工具，为大家提供一个直观、高效的流程设计与编辑环境。通过拖拽节点、连接线等操作，可以轻松开发复杂的流程图，实现业务逻辑的可视化表达。
项目功能
1、节点创建与编辑
支持多种类型的节点创建，包括但不限于开始节点、结束节点、处理节点、决策节点等。
通过简单的点击或拖拽操作，在画布上添加、删除或修改节点属性，如节点名称、颜色、形状等。
2、连线管理
节点间通过连线表示流程走向，提供灵活的连线创建与编辑功能。
轻松地在节点间绘制直线、曲线或折线，调整连线的起点与终点，甚至设置连线的条件表达式，实现条件分支。
3、布局调整与边界扩展
满足不同场景下的展示需求，支持画布的缩放、平移以及节点的自动布局功能。
根据需要调整画布大小，通过手势或按钮控制画布的显示范围。同时，框架还提供了边界扩展功能，当节点靠近画布边缘时，自动扩展画布大小，确保所有节点都能完整显示。
4、框选与拖动
支持框选多个节点进行批量操作，如移动、删除等。可以通过鼠标拖拽选择框，选中多个节点后进行统一操作。同时，框架还提供节点的拖动功能，用户可以拖动单个或多个节点到指定位置。
5、数据绑定与交互
支持与后端数据的绑定，将流程图中的节点属性与数据库字段或API接口关联，实现数据的动态展示与交互。
另外，框架还提供了事件处理机制，用户可以自定义节点点击、连线双击等事件的处理逻辑，增强流程图的交互性。
项目特点
1、界面友好
WPF的丰富UI控件与动画效果，提供直观、美观的操作界面。无论是节点的拖拽、连线的绘制还是属性的编辑，都能带来流畅的操作体验。
2、扩展性强
设计遵循模块化原则，各个功能模块相对独立，便于开发者根据需求进行二次开发或功能扩展。同时，框架提供丰富的API接口，方便与其他系统进行集成。
3、交互丰富
支持多种交互方式，如框选、拖动、右键菜单等，可以根据需要选择合适的交互方式，提高操作效率。
项目技术
1、MVVM设计模式
为了实现界面与逻辑的分离，提高代码的可维护性与可测试性，框架采用MVVM（Model-View-ViewModel）设计模式。通过数据绑定与命令机制，实现了视图与模型之间的松耦合。
2、自定义控件开发
针对流程节点编辑的特殊需求，开发一系列自定义控件，如节点控件、连线控件等。控件通过继承WPF的基础控件类，实现了特定的功能与行为。
4、事件处理与委托
通过事件处理与委托机制，实现用户交互的响应与处理。无论是节点的点击、连线的双击还是画布的缩放，都能通过事件处理函数实现相应的逻辑。
项目代码
框选拖动
/// <summary>
/// 添加连线更新方法
/// </summary>
/// <param name="selectedControls">选中的控件</param>
/// <param name="Xoffset">连线位置X轴的偏移量</param>
/// <param name="Yoffset">连线位置Y轴的偏移量</param>
private void UpdateConnectionsForNode(List<Control> selectedControls, double Xoffset = 0, double Yoffset = 0)
{
// 当前不存在连线的话直接结束
if (connections.Count == 0) return;
foreach (XNode node in selectedControls)
{
List<Connection> refConns = connections.FindAll(conn => IsChildOf(conn.FromPort, node) || IsChildOf(conn.ToPort, node));
refConns.ForEach(conn =>
{
Point p1 = PointAdd(GetPortCenter(conn.FromPort), new Point(Xoffset, Yoffset));
Point p2 = PointAdd(GetPortCenter(conn.ToPort), new Point(Xoffset, Yoffset));
var geometry = new PathGeometry();
var figure = new PathFigure { StartPoint = p1 };
var segment = CreateSegment("polyline", p1, p2);
figure.Segments.Add(segment);
geometry.Figures.Add(figure);
conn.Path.Data = geometry;
});
}
}
// 点位相加
private Point PointAdd(Point p1, Point p2)
{
return new Point(p1.X + p2.X, p1.Y + p2.Y);
}
private bool IsChildOf(FrameworkElement child, FrameworkElement parent)
{
var current = child;
while (current != null)
{
if (current == parent)
return true;
current = VisualTreeHelper.GetParent(current) as FrameworkElement;
}
return false;
}
线条拖动 | 线条类型切换
private void OutputPort_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (sender is FrameworkElement outputPort)
{
fromPort = outputPort;
startPoint = GetPortCenter(outputPort);
currentPath = new System.Windows.Shapes.Path
{
Stroke = Brushes.MediumPurple,
StrokeThickness = lineThickness,
Data = new PathGeometry()
};
currentPath.MouseLeftButtonDown += Path_MouseLeftButtonDown;
currentPath.MouseEnter += Path_MouseEnter;
currentPath.MouseLeave += Path_MouseLeave;
MainCanvas.Children.Add(currentPath);
isConnecting = true;
e.Handled = true;
}
}
private Point GetPortCenter(FrameworkElement port)
{
var point = new Point(port.Width / 2, port.Height / 2);
// 将当前点相对于port的坐标转换为当前点相对于Canvas的坐标位置,Canvas会先获取point左上角的位置，然后再偏移point.X,point.Y
var position = port.TranslatePoint(point, MainCanvas);
return position;
}
private PathSegment CreateSegment(string type, Point startPoint, Point endPoint)
{
if (string.IsNullOrEmpty(type))
throw new Exception("type 类型不能为空");
PathSegment segment;
if (type == "polyline")
{
if (startPoint.X <= endPoint.X - 40) // 两边距离大于40
{
double centerX = (startPoint.X + endPoint.X) / 2;
var polyline = new PolyLineSegment
{
Points = new PointCollection()
{
new Point(centerX,startPoint.Y),
new Point(centerX,endPoint.Y),
new Point(endPoint.X,endPoint.Y) // 终点
}
};
segment = polyline;
}
else
{
double centerY = (startPoint.Y + endPoint.Y) / 2;
var polyline = new PolyLineSegment
{
Points = new PointCollection()
{
new Point(startPoint.X + 20,startPoint.Y),
new Point(startPoint.X + 20,centerY),
new Point(endPoint.X - 20,centerY),
new Point(endPoint.X - 20,endPoint.Y),
new Point(endPoint.X,endPoint.Y) // 终点
}
};
segment = polyline;
}
}
else
{
var bezier = new BezierSegment
{
Point1 = new Point(startPoint.X + 50, startPoint.Y),
Point2 = new Point(endPoint.X - 50, endPoint.Y),
Point3 = endPoint
};
segment = bezier;
}
return segment;
}
项目效果
框架极大地简化复杂流程的设计与实现过程，为项目的快速迭代与交付提供有力支持。