节点编辑器STNodeEditor快速入门,流程图编程

STNodeEditor

STNodeEditor 是一个轻量且功能强大的节点编辑器 纯GDI实现无任何依赖库仅仅100+Kb 使用方式非常简洁 提供了丰富的属性以及事件可以非常方便的完成节点之间数据的交互及通知 大量的虚函数可供开发者重写具有很高的自由性

Environment: VS2010(.NET 3.5)


项目主页 (Project home): DebugST.github.io/STNodeEditor (简体中文, English)

教程文档: DebugST.github.io/STNodeEditor/doc_cn.html

Tutorials and API: DebugST.github.io/STNodeEditor/doc_en.html

Mail: (2212233137@qq.com)

NuGet: https://www.nuget.org/packages/ST.Library.UI/

复制代码
PM> Install-Package ST.Library.UI -Version 2.0.0

STNodeEditor

STNodeEditor拥有非常强大的功能 支持画布的移动和缩放 可以对节点位置以及连线进行锁定 连线时候会自动检测数据类型是否兼容 以及连线是否重复或者构成环形线路等问题

  • 拖动标题移动节点
  • 右击标题弹出菜单 (需要设置ContextMenuStrip)
  • 拖动连接点进行连线
  • 右击连线断开连接
  • 中键拖动移动画布 (若笔记本触摸板支持 可二指拖动)
  • CTRL+鼠标滚轮 缩放画布

注:节点Body区域进行的操作编辑器不会响应 因为在节点客户区内部的操作将被转换为节点的事件

因为作者将一个节点视为一个Form 而编辑器容器则为Desktop 开发者可以像开发WinForm程序一样去开发一个节点

STNodeHub

STNodeHub是一个内置的节点 其主要作用分线 可以将一个输出分散到多个输入或多个输出集中到一个输入点上以避免重复布线 也可在节点布线复杂时用于绕线

HUB的输入输出默认为object类型 当一个连接被连入时候将会自动更换数据类型并增加新行

注:仅STNodeHub可以修改连接点的数据类型 因为相应字段被internal标记 而作为第三方扩展的STNode中是无法修改已添加连接点的数据类型的

STNodeTreeView

STNodeTreeView可与STNodeEditor结合使用STNodeTreeView中的节点可直接拖拽进STNodeEditor中 并且提供预览和检索功能

STNodeTreeView的使用简单 无需像System.Windows.Forms.TreeView需要自行去构造树

通过使用STNodeAttribute标记继承的STNode可直接设置需要在STNodeTreeView中显示的路径 以及希望在STNodePropertyGrid中显示的信息

注:若希望节点能够在STNodeTreeView中显示 必须使用STNodeAttribute标记STNode子类

STNodePropertyGrid

STNode中的属性被STNodePropertyAttribute标记则会在STNodePropertyGrid中显示 默认情况下支持int,float,double,bool,string,enum以及上述数据类型的Array 若希望显示的属性数据类型不被支持 可以对DescriptorType进行扩展重写 详细请参考DEMO

可以看到在STNodePropertyGrid的面板中可以显示节点的一些信息 作者认为提供给大家的是一套框架 大家可以基于这套框架打造一套自己的框架

而为框架编写节点的Coder应该有权利选择是否留下个人信息

STNodeEditorPannel

STNodeEditorPannelSTNodeEditor STNodeTreeView STNodePropertyGrid的一套组合控件

可以通过拖动手柄控制布局

关于作者

相关推荐
山峰哥6 天前
吃透 SQL 优化:告别慢查询,解锁数据库高性能
服务器·数据库·sql·oracle·性能优化·编辑器
holeer6 天前
【V1.0】Typora 中的 HTML 支持|软件文档自翻译
前端·编辑器·html·typora·web·markdown·文档
硬汉嵌入式6 天前
Vim 9.2版本正式发布
编辑器·vim
吹牛不交税6 天前
关于vscode左侧资源管理器目录层级疑似异常的问题
ide·vscode·编辑器
No8g攻城狮6 天前
【Linux】Linux nano 编辑器全攻略:从入门到精通
linux·运维·编辑器·nano
PD我是你的真爱粉7 天前
Vue 3 生命周期完全指南:从流程图到最佳实践
前端·vue.js·流程图
你怎么知道我是队长7 天前
VsCode插件推荐---Todo Tree
ide·vscode·编辑器
becatjd7 天前
VScode的claude code插件报错command ‘claude-vscode.editor.openLast‘ not found
ide·vscode·编辑器·claude·anthropic·claude code
BIBI20497 天前
下载指定历史版本 VSCode 或 VSCode Insider
ide·vscode·编辑器
CORNERSTONE3657 天前
生产质量管理体系全过程流程图
流程图·质量管理·管理流程·生产质量