Merge branch 'main' of https://github.com/DebugST/DotNet_WinForm_NodeEditor
This commit is contained in:
DebugST
commit
1f2fa9637c
149
README.md
149
README.md
@ -1,114 +1,77 @@
|
||||
## STNodeEditor
|
||||
# STNodeEditor
|
||||
|
||||
`STNodeEditor` 是一个很不错的节点编辑器 使用方式非常简洁 提供了丰富的属性以及事件 可以非常方便的完成节点之间数据的交互及通知 大量的重载函数供开发者使用具有很高的自由性
|
||||
STNodeEditor 是一个轻量且功能强大的节点编辑器 纯`GDI`实现无任何依赖库仅仅`100+Kb` 使用方式非常简洁 提供了丰富的属性以及事件可以非常方便的完成节点之间数据的交互及通知 大量的虚函数可供开发者重写具有很高的自由性
|
||||
|
||||
编译环境: `VS 2010 (.Net 3.5)`
|
||||
Environment: VS2010(.NET 3.5)
|
||||
|
||||
|
||||
|
||||
|
||||
此控件采用 [`MIT`](https://opensource.org/licenses/mit-license.php) 开源协议开源 使开发者能够拥有更大的自由度更少的限制
|
||||
项目主页 (Project home): [DebugST.github.io/DotNet_WinForm_NodeEditor](https://DebugST.github.io/DotNet_WinForm_NodeEditor) (简体中文, English)
|
||||
|
||||
`STNodeEditor` 拥有非常方便的UI自定义能力 提供的 `STNodeControl` 基类 可以让开发者能够像自定义 `WinForm` 控件一样去定义 节点需要的控件
|
||||
教程文档: [DebugST.github.io/DotNet_WinForm_NodeEditor/doc_cn.html](https://DebugST.github.io/DotNet_WinForm_NodeEditor/doc_cn.html)
|
||||
|
||||
|
||||
Tutorials and API: [DebugST.github.io/DotNet_WinForm_NodeEditor/doc_en.html](https://DebugST.github.io/DotNet_WinForm_NodeEditor/doc_en.html)
|
||||
|
||||
## 简要说明
|
||||
* 画布
|
||||
* 移动 `鼠标中键` 拖动 Mac用户可二指拖动 `触控板`
|
||||
* 缩放 按下 `Control` + `鼠标滚轮`
|
||||
* 画布中的节点内容以及连线关系可通过 `STNodeEditor.Load/SaveCanvas()` 加载或者保存
|
||||
* 删除连线
|
||||
* 悬停到连线上 `鼠标右键`
|
||||
* 移动节点
|
||||
* `鼠标左键` 拖动 `节点标题`
|
||||
* 之所以是拖动标题而不是节点任意位置 是因为作者的设计思路是将节点视为一个 `窗体` 窗体的客户区域留给开发者自定义
|
||||
* STNode
|
||||
* 如同 `System.Windows.Forms.TreeView` 一样 所有的节点都保存在 `STNodeEditor.Nodes` 中 其数据类型为 `STNode`
|
||||
* `STNode` 为抽象类被 `abstract` 修饰 需要开发者自己继承向节点中添加选项
|
||||
* `STNode` 有三个重要属性 `InputOptions` `OutputOptions` `Controls`
|
||||
Mail: (2212233137@qq.com)
|
||||
|
||||
## 示例
|
||||
```cs
|
||||
public class DemoNode : STNode
|
||||
{
|
||||
protected override void OnCreate() {
|
||||
//在创建节点时候向其添加需要的选项
|
||||
base.OnCreate();
|
||||
this.InputOptions.Add(new STNodeOption("Input", typeof(string), false));
|
||||
this.InputOptions.Add(new STNodeOption("SingleNode", typeof(System.Drawing.Image), true));
|
||||
this.InputOptions.Add(new STNodeOption("SingleNode", typeof(object), true));
|
||||
# STNodeEditor
|
||||
|
||||
this.OutputOptions.Add(new STNodeOption("output", typeof(string), false));
|
||||
this.OutputOptions.Add(new STNodeOption("Single", typeof(System.Drawing.Icon), true));
|
||||
this.OutputOptions.Add(new STNodeOption("Single", typeof(object), true));
|
||||
|
||||
|
||||
this.Title = "Demo_Node";
|
||||
}
|
||||
}
|
||||
//stNodeEditor1.SetTypeColor(type, color);此方法会自动替换已存在值
|
||||
stNodeEditor1.TypeColor.Add(typeof(string), Color.Yellow);
|
||||
stNodeEditor1.TypeColor.Add(typeof(Image), Color.Red);
|
||||
stNodeEditor1.Nodes.Add(new DemoNode());
|
||||
```
|
||||
上述代码的 `DemoNode` 被添加到节点编辑器中的效果为
|
||||
`STNodeEditor`拥有非常强大的功能 支持画布的移动和缩放 可以对节点位置以及连线进行锁定 连线时候会自动检测数据类型是否兼容 以及连线是否重复或者构成环形线路等问题
|
||||
|
||||
|
||||
* 拖动标题移动节点
|
||||
* 右击标题弹出菜单 (需要设置`ContextMenuStrip`)
|
||||
* 拖动连接点进行连线
|
||||
* 右击连线断开连接
|
||||
* 中键拖动移动画布 (若笔记本触摸板支持 可二指拖动)
|
||||
* CTRL+鼠标滚轮 缩放画布
|
||||
|
||||
由此可见 开发者要自定义一个节点相当便捷 当然上述代码并没有包含事件处理 上述代码仅仅是在演示 `STNodeOption` 的效果 下列代码则是一个包含了计算两个整数和的功能
|
||||
```cs
|
||||
public class NodeNumberAdd : STNode
|
||||
{
|
||||
private STNodeOption m_in_num1;
|
||||
private STNodeOption m_in_num2;
|
||||
private STNodeOption m_out_num;
|
||||
private int m_nNum1, m_nNum2;
|
||||
__注:节点Body区域进行的操作编辑器不会响应 因为在节点客户区内部的操作将被转换为节点的事件__
|
||||
|
||||
protected override void OnCreate() {
|
||||
base.OnCreate();
|
||||
this.Title = "NumberAdd";
|
||||
m_in_num1 = new STNodeOption("num1", typeof(int), true);//只能有一个连线
|
||||
m_in_num2 = new STNodeOption("num2", typeof(int), true);//只能有一个连线
|
||||
m_out_num = new STNodeOption("result", typeof(int), false);//可以多个连线
|
||||
this.InputOptions.Add(m_in_num1);
|
||||
this.InputOptions.Add(m_in_num2);
|
||||
this.OutputOptions.Add(m_out_num);
|
||||
m_in_num1.DataTransfer += new STNodeOptionEventHandler(m_in_num_DataTransfer);
|
||||
m_in_num2.DataTransfer += new STNodeOptionEventHandler(m_in_num_DataTransfer);
|
||||
}
|
||||
//当有数据传入时
|
||||
void m_in_num_DataTransfer(object sender, STNodeOptionEventArgs e) {
|
||||
//判断连线是否是连接状态(建立连线 断开连线 都会触发该事件)
|
||||
if (e.Status == ConnectionStatus.Connected) {
|
||||
if (sender == m_in_num1)
|
||||
m_nNum1 = (int)e.TargetOption.Data;//TargetOption为触发此事件的Option
|
||||
else
|
||||
m_nNum2 = (int)e.TargetOption.Data;
|
||||
} else {
|
||||
if (sender == m_in_num1) m_nNum1 = 0; else m_nNum2 = 0;
|
||||
}
|
||||
//向输出选项上的所有连线传输数据 输出选项上的所有连线都会触发 DataTransfer 事件
|
||||
m_out_num.TransferData(m_nNum1 + m_nNum2); //m_out_num.Data 将被自动设置
|
||||
}
|
||||
__因为作者将一个节点视为一个`Form` 而编辑器容器则为`Desktop` 开发者可以像开发`WinForm`程序一样去开发一个节点__
|
||||
|
||||
protected override void OnOwnerChanged() {
|
||||
//通常刚被添加到节点编辑器时触发 如是以插件方式提供的节点 应当向编辑器提交数据类型颜色
|
||||
base.OnOwnerChanged();
|
||||
if (this.Owner == null) return; //或者通过m_in_num1.DotColor = Color.Red;进行设置
|
||||
this.Owner.SetTypeColor(typeof(int),Color.Red);
|
||||
}
|
||||
}
|
||||
```
|
||||
效果为
|
||||
# STNodeHub
|
||||
|
||||
|
||||
|
||||
|
||||
更多细节请参考文档
|
||||
`STNodeHub`是一个内置的节点 其主要作用分线 可以将一个输出分散到多个输入或多个输出集中到一个输入点上以避免重复布线 也可在节点布线复杂时用于绕线
|
||||
|
||||
项目主页: [DebugST.github.io/DotNet_WinForm_NodeEditor](https://DebugST.github.io/DotNet_WinForm_NodeEditor)
|
||||
HUB的输入输出默认为`object`类型 当一个连接被连入时候将会自动更换数据类型并增加新行
|
||||
|
||||
开发文档: [DebugST.github.io/DotNet_WinForm_NodeEditor/doc.html](https://DebugST.github.io/DotNet_WinForm_NodeEditor/doc.html)
|
||||
__注:仅`STNodeHub`可以修改连接点的数据类型 因为相应字段被`internal`标记 而作为第三方扩展的STNode中是无法修改已添加连接点的数据类型的__
|
||||
|
||||
## 关于作者
|
||||
* Github: [DebugST](https://DebugST.github.io)
|
||||
# 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
|
||||
|
||||
|
||||
|
||||
`STNodeEditorPannel`是`STNodeEditor` `STNodeTreeView` `STNodePropertyGrid`的一套组合控件
|
||||
|
||||
可以通过拖动手柄控制布局
|
||||
|
||||
# 关于作者
|
||||
* Github: [DebugST](https://github.com/DebugST/)
|
||||
* Blog: [Crystal_lz](http://st233.com)
|
||||
* Mail: (2212233137@qq.com)
|
||||
|
||||
@ -64,7 +64,7 @@
|
||||
<div id="div_top_left"><img src="./images/page_top.png"/></div>
|
||||
<div id="div_top_right">
|
||||
<h1 id="h1_title">STNodeEditor</h1>
|
||||
<p style="margin-top:2rem;text-align:left;">STNodeEditor 是一个轻量且功能强大的节点编辑器 使用方式非常简洁 提供了丰富的属性以及事件可以非常方便的完成节点之间数据的交互及通知 大量的重载函数供开发者使用具有很高的自由性</p>
|
||||
<p style="margin-top:2rem;text-align:left;">STNodeEditor 是一个轻量且功能强大的节点编辑器 使用方式非常简洁 提供了丰富的属性以及事件可以非常方便的完成节点之间数据的交互及通知 大量的虚函数可供开发者重写具有很高的自由性</p>
|
||||
<center>
|
||||
<a id="a_btn_down" href="https://github.com/DebugST/DotNet_WinForm_NodeEditor/releases">下载 STNodeEditor</a><br/>
|
||||
<a class="a_icon" attr_text="Github" style="background-image:url('./images/github.png'") href="https://github.com/DebugST/DotNet_WinForm_NodeEditor"></a>
|
||||
@ -215,4 +215,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user