();
+ queue.Enqueue(startNode);
+
+ while (queue.Count > 0)
+ {
+ var currentNode = queue.Dequeue();
+ if (currentNode == endNode)
+ {
+ return true;
+ }
+
+ visited.Add(currentNode);
+
+ var children = GetChildren(currentNode);
+ foreach (var child in children)
+ {
+ if (!visited.Contains(child))
+ {
+ queue.Enqueue(child);
+ }
+ }
+ }
+
+ return false;
+ }
+ #endregion
+ }
+}
diff --git a/WpfNodeEdittorDemo/STNodeHub.cs b/WpfNodeEdittorDemo/STNodeHub.cs
new file mode 100644
index 0000000..70ff160
--- /dev/null
+++ b/WpfNodeEdittorDemo/STNodeHub.cs
@@ -0,0 +1,32 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+
+using ST.Library.UI.NodeEditor;
+
+namespace WinNodeEditorDemo
+{
+ ///
+ /// 类库自带的STNodeHub并未被STNodeAttribute标记 无法被STNodeTreeView显示 所以需要扩展
+ ///
+ [STNode("/", "Crystal_lz", "2212233137@qq.com", "st233.com", "This is single Hub")]
+ public class STNodeHubSingle : STNodeHub
+ {
+ public STNodeHubSingle()
+ : base(true) {
+ this.Title = "S_HUB";
+ }
+ }
+ ///
+ /// 类库自带的STNodeHub并未被STNodeAttribute标记 无法被STNodeTreeView显示 所以需要扩展
+ ///
+ [STNode("/", "Crystal_lz", "2212233137@qq.com", "st233.com", "This multi is Hub")]
+ public class STNodeHubMulti : STNodeHub
+ {
+ public STNodeHubMulti()
+ : base(false) {
+ this.Title = "M_HUB";
+ }
+ }
+}
diff --git a/WpfNodeEdittorDemo/WpfNodeEdittorDemo.csproj b/WpfNodeEdittorDemo/WpfNodeEdittorDemo.csproj
new file mode 100644
index 0000000..39c7fa8
--- /dev/null
+++ b/WpfNodeEdittorDemo/WpfNodeEdittorDemo.csproj
@@ -0,0 +1,23 @@
+
+
+
+ WinExe
+ net8.0-windows
+ enable
+ disable
+ true
+ True
+
+
+
+
+
+
+
+
+
+ Form
+
+
+
+
diff --git a/docs/css/stdoc.css b/docs/css/stdoc.css
index 3e60ba2..77125b3 100644
--- a/docs/css/stdoc.css
+++ b/docs/css/stdoc.css
@@ -23,7 +23,8 @@ hr{
body{
margin:0px;
position:relative;
- font-size:14px;
+ font-size:0.85rem;
+ line-height:1rem;
background-color:#343434;
}
a{
@@ -196,12 +197,16 @@ td{
color:white;
font-size: 12px;
border-radius: 2px;
- background-color: gray;
+ background-color: rgba(125,125,125,.5);
padding: 1px 4px;
margin:0px 4px;
}
.p_hightlight{
- color:hotpink;
+ color: dimgray;
+ background-color: goldenrod;
+ padding: 5px;
+ border-radius: 5px;
+}
}
.div_table{
overflow:auto;
@@ -215,6 +220,7 @@ td{
display:inline-block;
max-width:100%;
margin-bottom:10px;
+ line-height:0px;
}
.span_code_title{
display: inline-block;
@@ -224,13 +230,14 @@ td{
}
.pre_code{
background-color: #1a1a1a;
- font-size: 12px;
+ font-size: 0.75rem;
overflow: auto;
padding:10px 10px 10px 35px;
display:inline-block;
margin:0px;
min-width:680px;
position:relative;
+ line-height:1rem;
}
.pre_code:before{
content: ' ';
diff --git a/docs/index.html b/docs/index.html
index 61719d3..14439f7 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -64,10 +64,10 @@
STNodeEditor
-
STNodeEditor 是一个轻量且功能强大的节点编辑器 使用方式非常简洁 提供了丰富的属性以及事件可以非常方便的完成节点之间数据的交互及通知 大量的重载函数供开发者使用具有很高的自由性
+
STNodeEditor 是一个轻量且功能强大的节点编辑器 使用方式非常简洁 提供了丰富的属性以及事件可以非常方便的完成节点之间数据的交互及通知 大量的虚函数可供开发者重写具有很高的自由性
下载 STNodeEditor
-
+
@@ -215,4 +215,4 @@
STNodeEditor
-
STNodeEditor is a lightweight and powerful node editor, very simple to use. Provides a wealth of properties and events, which can easily complete the data interaction and notification between nodes. A large number of overloaded functions are available for developers to use. It is very free.
+
STNodeEditor is a lightweight and powerful node editor, very simple to use. Provides a wealth of properties and events, which can easily complete the data interaction and notification between nodes. A large number of vitual functions are available for developers to use. It is very free.
Download STNodeEditor
-
+
@@ -176,4 +176,4 @@
-
It was a spring season, and I don"t know why the whole world has changed after the Chinese New Year. Everyone was forced to stay at home. The extremely boring author learned Blender. That was the second time the author used the node editor.
+
-> What? Excuse me... What's this?.. What the hell is this?...
+
It was a spring season, and I don't know why the whole world has changed after the Chinese New Year. Everyone was forced to stay at home. The extremely boring author learned Blender. That was the second time the author used the node editor.
-> Wo...It turns out that this one is really convenient to use.
-
So some ideas gradually emerged in the author"s mind, making the author want to make one.
+
So some ideas gradually emerged in the author's mind, making the author want to make one.
It was a summer, I don’t know why the author started to learn Davinci again. That was the third time the author used the node editor. The use of this time has doubled the author"s favor with the node editor. The author instantly felt that as long as it is a program that can be modularized and streamlined, everything can be nodeized.
So STNodeEditor appeared.
@@ -196,8 +196,8 @@
[Basic]STNode
}
-In multi-connection mode, an option can be connected by multiple options of the same data type (rectangle)
-In single-connection mode, an option can only be connected by one option of the same data type (circle)
+In multi-connection mode, an option can be connected by multiple options of the same data type (rectangle)
+In single-connection mode, an option can only be connected by one option of the same data type (circle)
STNodeOption.Empty
@@ -534,8 +534,8 @@ [basic]STNodeControl
}
-clickthe Open Image button, you can select an image and display it in the node. After the ImageSizeNode is connected, the size of the image will be display.
-The code of the ImageChannel node is not given here. The code is used in the WinNodeEditorDemo project to extract the RGB channel of an image. For ImageShowNode, it just provides the data source and displays it. For the ImageSizeNode and ImageChannel nodes, they don"t know what node will be connected. They just complete their functions and package the results to the output option, waiting to be connected by the next node
+click the Open Image button, you can select an image and display it in the node. After the ImageSizeNode is connected, the size of the image will be display.
+The code of the ImageChannel node is not given here. The code is used in the WinNodeEditorDemo project to extract the RGB channel of an image. For ImageShowNode, it just provides the data source and displays it. For the ImageSizeNode and ImageChannel nodes, they don't know what node will be connected. They just complete their functions and package the results to the output option, waiting to be connected by the next node
The execution logic is completely connected by the user to connect their functions together. During the development, there is no interaction between nodes and nodes. The only thing that ties them together is an Image data type, so that nodes and nodes There is no coupling relationship between them. High class poly low coupling.
[basic]STNodeEditor
STNodeEditor as a container of STNode also provides a large number of properties and events for developers to use. For more detailed API list of STNodeEditor, please refer to API document
+
+可以看到它的使用方式和 `Form` 确实很像 其实目前还暂时没有提供所见即所得的UI设计器 而且一个 `STNode` 它同样有它的控件集合且数据类型为 `STNodeControl`
+
+`STNodeControl` 作为 `STNode` 控件的基类 它拥有着和 `System.Windows.Forms.Control` 许多同名的属性和事件 一切的初衷都只为与 `WinForm` 靠近
+
+
+**注意：在目前的版本中(2.0) STNodeEditor仅仅提供了STNodeControl基类 并未提供任何一个可用控件 当然在附随的Demo工程中包含了部分示例演示如何自定义一个控件 由于这属于自定义控件的范畴 所以演示并未太多 若需了解关于自定义控件如何开发可参考作者：[自定义控件开发](http://st233.com/blog.php?group=1) 系列文章 当然在后续的版本中 作者将提供部分常用控件 虽说作者想把使用方式往WinForm上靠 单仅仅是把它当作WinForm使用并不是作者的初衷**
+
+上面的演示仅仅是为了让大家感到亲切感 毕竟 `WinForm` 可能是大家熟悉的一个东西 但是如果仅仅是把它当作 `WinForm` 使用毫无意义 对于一个节点来说 最重要的属性当然是数据的输入和输出
+
+``` cs
+public class MyNode : STNode
+{
+ protected override void OnCreate() {//等同 [public MyNode(){}]
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));
+ this.Title = "TestNode";
+ //可以得到添加的索引位置
+ int nIndex = this.InputOptions.Add(new STNodeOption("IN_1", typeof(string), false));
+ //可以得到添加的 STNodeOption
+ STNodeOption op = this.InputOptions.Add("IN_2", typeof(int), true);
+ this.OutputOptions.Add("OUT", typeof(string), false);
+ }
+ //当所有者发生改变(即：在NodeEditor中被添加或移除)
+ //应当像容器提交自己拥有数据类型的连接点 所期望显示的颜色
+ //颜色主要用于区分不同的数据类型
+ protected override void OnOwnerChanged() {
+ base.OnOwnerChanged();
+ if (this.Owner == null) return;
+ this.Owner.SetTypeColor(typeof(string), Color.Yellow);
+ //当前容器中已有的颜色会被替换
+ this.Owner.SetTypeColor(typeof(int), Color.DodgerBlue, true);
+ //下面的代码将忽略容器中已有的颜色
+ //this.SetOptionDotColor(op, Color.Red); //无需在OnOwnerChanged()中设置
+ }
+}
+```
+
+
- 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));
+通过上面的案例你可以看到 `STNode` 有两个重要的属性 `InputOptions` 和 `OutputOptions` 其数据类型为 `STNodeOption` 而 `STNodeOption` 有两种连接模式 `single-connection` 和 `multi-connection`
- this.Title = "Demo_Node";
+* single-connection
+ * 单连接模式 在单连接模式下一个连接点同时 只能被一个 同数据类型点的连接
+* multi-connection
+ * 多连接模式 在多连接模式下一个连接点同时 可以被多个 同数据类型点连接
+
+``` cs
+public class MyNode : STNode {
+ protected override void OnCreate() {
+ base.OnCreate();
+ this.Title = "MyNode";
+ this.TitleColor = Color.FromArgb(200, Color.Goldenrod);
+ //multi-connection
+ this.InputOptions.Add("Single", typeof(string), true);
+ //single-connection
+ this.OutputOptions.Add("Multi", typeof(string), false);
}
}
-//stNodeEditor1.SetTypeColor(type, color);此方法会自动替换已存在值
-stNodeEditor1.TypeColor.Add(typeof(string), Color.Yellow);
-stNodeEditor1.TypeColor.Add(typeof(Image), Color.Red);
-stNodeEditor1.Nodes.Add(new DemoNode());
```
-上述代码的 `DemoNode` 被添加到节点编辑器中的效果为
+
-
+---
-由此可见 开发者要自定义一个节点相当便捷 当然上述代码并没有包含事件处理 上述代码仅仅是在演示 `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;
+# 如何进行数据交互？
+
+在上面的案例中仅仅是做了一个可以被连接的选项点 并不包含任何的功能
+
+* STNodeOption可以通过绑定DataTransfer事件获取到传入该选项的所有数据
+* STNodeOption可以通过TransferData(object obj)向该选项上所有连接的选项进行数据投递
+下面通过一个案例进行演示 创建两个节点 一个节点用于每秒输出一次当前系统事件 另一个节点用于接收一个事件并显示
+
+``` cs
+public class ClockNode : STNode
+{
+ private Thread m_thread;
+ private STNodeOption m_op_out_time;
+
+ protected override void OnCreate() {
+ base.OnCreate();
+ this.Title = "ClockNode";
+ m_op_out_time = this.OutputOptions.Add("Time", typeof(DateTime), false);
+ }
+ //当被添加或者移除
+ protected override void OnOwnerChanged() {
+ base.OnOwnerChanged();
+ if (this.Owner == null) { //如果是被移除 停止线程
+ if (m_thread != null) m_thread.Abort();
+ return;
+ }
+ this.Owner.SetTypeColor(typeof(DateTime), Color.DarkCyan);
+ m_thread = new Thread(() => {
+ while (true) {
+ Thread.Sleep(1000);
+ //STNodeOption.TransferData(object)会自动设置STNodeOption.Data
+ //然后自动向所有连接的选项进行数据传递
+ m_op_out_time.TransferData(DateTime.Now);
+ //如果你需要一些耗时操作STNode同样提供了Begin/Invoke()操作
+ //this.BeginInvoke(new MethodInvoker(() => {
+ // m_op_out_time.TransferData(DateTime.Now);
+ //}));
+ }
+ }) { IsBackground = true };
+ m_thread.Start();
+ }
+}
+```
+当然上面可以直线将时间显示出来 不过这里为了演示数据的传递 所以还需要一个接收节点
+``` cs
+public class ShowClockNode : STNode {
+ private STNodeOption m_op_time_in;
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;
+ this.Title = "ShowTime";
+ //采用 "single-connection" 模式
+ m_op_time_in = this.InputOptions.Add("--", typeof(DateTime), true);
+ //当有数据时会自动触发此事件
+ m_op_time_in.DataTransfer += new STNodeOptionEventHandler(op_DataTransfer);
+ }
+
+ void op_DataTransfer(object sender, STNodeOptionEventArgs e) {
+ //当连接的建立与断开都会触发此事件 所以需要判断连接状态
+ if (e.Status != ConnectionStatus.Connected || e.TargetOption.Data == null) {
+ //当 STNode.AutoSize=true 并不建议使用STNode.SetOptionText
+ //因为当文本发生改变时候会重新计算布局 正确的做法是自定义一个如Lable控件
+ //作为时间的显示 当然这里为了演示方式采用此方案
+ this.SetOptionText(m_op_time_in, "--");
} else {
- if (sender == m_in_num1) m_nNum1 = 0; else m_nNum2 = 0;
+ this.SetOptionText(m_op_time_in, ((DateTime)e.TargetOption.Data).ToString());
}
- //向输出选项上的所有连线传输数据 输出选项上的所有连线都会触发 DataTransfer 事件
- m_out_num.TransferData(m_nNum1 + m_nNum2); //m_out_num.Data 将被自动设置
}
+}
+```
+
- protected override void OnOwnerChanged() {
- //通常刚被添加到节点编辑器时触发 如是以插件方式提供的节点 应当向编辑器提交数据类型颜色
- base.OnOwnerChanged();
- if (this.Owner == null) return; //或者通过m_in_num1.DotColor = Color.Red;进行设置
- this.Owner.SetTypeColor(typeof(int),Color.Red);
+可以看到当连接被建立时 `ShowTime` 节点每秒都在刷新 下面是一个更加复杂一点的案例 但是这里并没有给出代码请参考附随工程的 `Demo`
+
+
+
+点击 `Open Image` 按钮可打开并显示一张图片在 `ImageShowNode` 中并将图片作为输出数据 `ImageChanel` 则负责接收一张图像并处理输出图像的RGB图像及原图 `ImageSize` 则负责接收并显示一张图像的尺寸信息
+
+对于上面的节点在开发期间它们并不知道会被什么样的节点连接 也并不知道会被连接到什么节点上 开发者仅仅是完成了自己的功能处理接收到的数据并将结果打包给 `STNodeOption` 无需关系最终会被谁把结果拿走并处理 使得节点之间与节点之间的耦合关系大大降低 唯一将它们联系在一起的是一个 `Image` 数据类型 最终执行的逻辑交给用户自己拖拽节点组合他们自己想要的流程 使得功能的执行流程变得可视化 这也是作者的初衷
+
+**关于更多的教程和文档请参考：[https://debugst.github.io/STNodeEditor/doc_cn.html](https://debugst.github.io/STNodeEditor/doc_cn.html) 在下载的调用库压缩包里面同样包含离线版文档**
+
+---
+
+# 关于下个版本
+
+其实目前这个版本还有很多需要完善的代码 如上面提到的提供一些基础控件 而且目前提供的东西还很原始 一些应用场景目前需要开发者自己写代码完成
+
+
+
+上图为作者的最初构思以及第一个 `Demo` 演示版本 在上图中可以看到有 `启动` 按钮 某些应用场景下可能需要用户点击执行按钮以后才开始执行用户所部署的逻辑 而之前上面的案例数据交互都是更具用户的布线实时的 当然在目前的版本中想实现也是可以的 只是需要开发者自己写部分代码 由于这部分的代码作者暂时还没有构思好很多细节处理 所以还有下一个版本的话很多功能都将出现
+
+上图的构想是 开发者无需关系架构执行逻辑什么的 而开发者只需要关系功能点本省只需要开发出包含 `STNode` 的 `DLL` 文件 而程序启动 `TreeView` 会自动加载目录下的 `DLL` 文件并装载 `STNode` 到 `TreeView` 中 然后让用户拖拽执行 对于上一段话中作者提到的需要通过 启动 按钮执行如何在当前版本的实现 作者这里给出一些思路
+
+``` cs
+//首先定义一个基类 包含Start和Stop方法
+public abstract class BaseNode : STNode
+{
+ public abstract void Start();
+ public abstract void Stop();
+}
+//===================================================================
+//然后再基于基类在定义3个类型
+//InputNode 将作为开始节点 作为数据执行的入口节点 类似与Main函数一样
+public abstract class InputNode : BaseNode { }
+//OutputNode 将作为最终数据的处理节点 如文件保存 数据库保存等
+public abstract class OutputNode : BaseNode { }
+//更具自己需求定义一些其他执行功能的节点
+public abstract class ExecNode : BaseNode { }
+//===================================================================
+//创建一个 TestInputNode 提供一个字符串输入 并作为开始节点
+public class TestInputNode : InputNode
+{
+ //使用"STNodeProperty"特性则此属性会在"STNodePropertyGrid"中显示
+ [STNodeProperty("希望显示的属性名字", "属性秒速")]
+ public string TestText { get; set; }
+
+ private STNodeOption m_op_out;
+
+ protected override void OnCreate() {
+ base.OnCreate();
+ this.Title = "StringInput";
+ m_op_out = this.OutputOptions.Add("OutputString", typeof(string), false);
+ }
+
+ public override void Start() {
+ //当执行开始的时候才向连接的选项进行数据的传递
+ m_op_out.TransferData(this.TestText);
+ this.LockOption = true;//开始后锁定选项
+ }
+
+ public override void Stop() {
+ this.LockOption = false;//结束后解锁选项
+ }
+}
+//===================================================================
+//创建一个 TextFileOutputNode 用于文本文件保存收到的字符串
+public class TextFileOutputNode : OutputNode
+{
+ [STNodeProperty("属性显示名称", "属性描述")]
+ public string FileName { get; set; }
+
+ private StreamWriter m_writer;
+
+ protected override void OnCreate() {
+ base.OnCreate();
+ this.InputOptions.Add("Text", typeof(string), false)
+ .DataTransfer += new STNodeOptionEventHandler(op_DataTransfer);
+ }
+
+ void op_DataTransfer(object sender, STNodeOptionEventArgs e) {
+ if (e.Status != ConnectionStatus.Connected) return;
+ if (e.TargetOption.Data == null) return;
+ if (m_writer == null) return;
+ //当收到一个数据时候 写入文本
+ lock (m_writer) m_writer.WriteLine(e.TargetOption.Data.ToString());
+ }
+
+ public override void Start() {
+ //开始的时候初始化文件
+ m_writer = new StreamWriter(this.FileName, false, Encoding.UTF8);
+ this.LockOption = true;
+ }
+
+ public override void Stop() {
+ this.LockOption = false;
+ if (m_writer == null) return;
+ m_writer.Close();
+ m_writer = null;
}
}
```
-效果为
-
+上面的代码演示了一个 `输入` 和 `输出` 类型的节点 至于其他需求自行举一反三 当用户点下 `启动` 按钮时候
-更多细节请参考文档
+``` cs
+public void OnClickStart() {
+ List