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、事故处置惩罚与委托
通过事故处置惩罚与委托机制，实现用户交互的相应与处置惩罚。无论是节点的点击、连线的双击还是画布的缩放，都能通过事故处置惩罚函数实现相应的逻辑。
项目代码

框选拖动

1. /// <summary>
2. /// 添加连线更新方法
3. /// </summary>
4. /// <param name="selectedControls">选中的控件</param>
5. /// <param name="Xoffset">连线位置X轴的偏移量</param>
6. /// <param name="Yoffset">连线位置Y轴的偏移量</param>
7. private void UpdateConnectionsForNode(List<Control> selectedControls, double Xoffset = 0, double Yoffset = 0)
8. {
9.     // 当前不存在连线的话直接结束
10.     if (connections.Count == 0) return;
12.     foreach (XNode node in selectedControls)
13.     {
14.         List<Connection> refConns = connections.FindAll(conn => IsChildOf(conn.FromPort, node) || IsChildOf(conn.ToPort, node));
16.         refConns.ForEach(conn =>
17.         {
18.             Point p1 = PointAdd(GetPortCenter(conn.FromPort), new Point(Xoffset, Yoffset));
19.             Point p2 = PointAdd(GetPortCenter(conn.ToPort), new Point(Xoffset, Yoffset));
21.             var geometry = new PathGeometry();
22.             var figure = new PathFigure { StartPoint = p1 };
23.             var segment = CreateSegment("polyline", p1, p2);
24.             figure.Segments.Add(segment);
25.             geometry.Figures.Add(figure);
26.             conn.Path.Data = geometry;
27.         });
28.     }
29. }
31. // 点位相加
32. private Point PointAdd(Point p1, Point p2)
33. {
34.     return new Point(p1.X + p2.X, p1.Y + p2.Y);
35. }
37. private bool IsChildOf(FrameworkElement child, FrameworkElement parent)
38. {
39.     var current = child;
40.     while (current != null)
41.     {
42.         if (current == parent)
43.             return true;
44.         current = VisualTreeHelper.GetParent(current) as FrameworkElement;
45.     }
46.     return false;
47. }

复制代码

线条拖动 | 线条范例切换

[code]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