ネットワークトポロジマップの迅速な構築とカスタマイズのためのWPFオープンソースプロジェクト-Node Network

こんにちは、私は砂漠の果ての狼です。今日はWPFオープンソースプロジェクトNode Networkを紹介します。これは、ネットワークトポロジマップをすばやく構築してカスタマイズするのに役立ちます。

I.序文

現代のソフトウェア開発では、データビジュアライゼーションとインタラクティブ性が注目されています。これを実現するためには、通常、さまざまなチャート、テーブル、ネットワークトポロジ図などの制御が必要です。しかし、これらのコントロールがニーズを満たさない特殊なシナリオでは、データを表示して処理するためのカスタム方法が必要になります。Node Networkは、C#WPFベースのオープンソースプロジェクトで、ネットワークトポロジマップをすばやく構築してカスタマイズするのに役立ちます。

NodeNetworkのコードはGitHubでホストされており、オランダの開発者Wouterdekによって作成され保守されている。この記事では、Node Networkの紹介と分析を行い、読者がNode Networkのコアコンセプト、アプリケーションシナリオ、使用方法を理解し、Node Networkを開発するためのヒントと経験を習得することを願っています。

倉庫のアドレスhttps//github.com/Wouterdek/NodeNetwork

倉庫のスクリーンショット：

仓库截图

倉庫のソース構造：

仓库源码结构

II.実例

1. 計算機の例

この例では、ノードエディタNode Editorを使用して数式を作成できます。ノードを修正すると、結果値が自動的に計算され、更新されます。このアプリケーションには、ノード検证、カスタムノードサブクラス、値入力/出力、カスタム入力エディタ、ノードリスト、..

下面是计算器示例应用程序的演示：

计算器示例应用程序的演示

2. コードジェネレータの例

この例では、LUAコードを作成できます。アンリアルエンジンのブループリントと同様に、エディタには実行フローとデータフローがあります。カスタム入出力ポート、ノードエディタは、より直感的な操作を提供します。

下面是代码生成器应用程序的截图：

代码生成器应用程序的截图

3. シェーダエディタShader Editorのサンプル

このライブラリのより実用的な例は、シェーダエディタShader Editorです。

下面是使用 NodeNetwork 制作的着色器编辑器示例的演示：

着色器编辑器示例的演示

这些示例应用程序可在此处下载，其源代码包含在存储库中，库的二进制版本在 NuGet 上可用。

III.特性

NET Framework 4.7.2および. NET Core 3.1以降用に構築された。
开放、宽松的许可证-Apache-2.0 license。
最新のリアクティブMVVMコードを使用して構築されたインタラクティブで信頼性の高いコントロール。
滑らかなパン、ズームコントロール。
自動レイアウトシステム。
高度にカスタマイズ可能ですが、デフォルトでは使いやすいです。
ノードおよび接続認証の強力なサポート。
多数の単体テストがサポートされます。
...

Node Networkの基本概念

以下内容可参考仓库组件说明页。

1. ノードNode

ノードはNode Networkの最も基本的な要素であり、任意のデータソースや処理ユニットを表すことができます。各ノードは、ノードが受信し出力するデータをそれぞれ表す1つ以上の入力ポートおよび出力ポートを含むことができます。Node Networkには、定数ノード、計算ノード、入出力ノードなど、いくつかの一般的なノードタイプが組み込まれており、カスタムノードタイプもサポートしています。

2. コネクション

コネクションはノード間のデータ転送関係を表すNode Networkのコアコンセプトです。各接続にはソースポートと宛先ポートがあり、ソースポートはデータのソースを表し、宛先ポートはデータの宛先を表します。接続は、色、線の太さなど、接続を記述する追加情報の一部を使用するメタデータmetadataも運ぶことができます。

3. ポート

ポートは、他のノードとの接続に使用されるノードの入力または出力エンドポイントです。各ポートには、そのポートが受信または出力できるデータの種類を示す型があります。ポートには、ポートの機能と役割を記述するラベル、説明などの他のプロパティもあります。

4. グラフィカル·インタフェースGUI

NodeNetworkはWPFフレームワークに基づいて実装されているため、強力なグラフィカルインタフェース（GUI）システムを備えています。Node Networkでは、各ノードと接続をグラフィカルな要素として表示でき、ユーザーはドラッグアンドドロップ、ズームなどで操作できます。

5. レイアウトLayout

レイアウトはノードと接続の位置とサイズを制御するNode Networkのもう一つの重要な概念です。Node Networkは、フリーレイアウト、グリッドレイアウト、フォース指向レイアウトなど、さまざまなレイアウト方法を提供しています。ユーザーは特定のニーズに応じて異なるレイアウト方法を選択でき、コードまたはグラフィカルインターフェイスを介してレイアウトをカスタマイズおよび調整できます。

6. 直列化とデ直列化Serialization and Deserialization

実際のアプリケーションでは、ノードと接続をファイルやデータベースに保存するか、ファイルやデータベースからノードと接続を読み込む必要があります。これを実現するために、Node Networkはシリアル化とデシリアル化機能を提供します。シリアライズはノードと接続をデータストリームに変換するプロセスであり、デシリアライズはデータストリームをノードと接続に変換するプロセスです。Node Networkは、XML、JSON、バイナリなどのさまざまなシリアル化フォーマットをサポートしており、ユーザーは特定のニーズに応じて異なるフォーマットを選択できます。

Node Networkの適用状況

Node Networkには幅広いアプリケーションシナリオがあり、以下にいくつか紹介します。

1. データ処理と分析

Node Networkは、データ処理と分析のためのツールをすばやく構築するのに役立ちます。たとえば、異なるデータ処理ノードを接続して、データの前処理、変換、分析を可能にするグラフィカルなワークフローを作成することができます。

2. グラフィカルエディタ

Node Networkはグラフィカルなエディタをすばやく構築できます。例えば、ノードやコネクションを介して相互作用して渡すことができる特定のパラメータやオプションを編集および設定するためのグラフィカルなインターフェイスを作成することができます。

3. 視覚化とインタラクティブなプレゼンテーション

Node Networkは、ビジュアルでインタラクティブなプレゼンテーションツールをすばやく構築するのに役立ちます。たとえば、特定のデバイスやシステムの接続関係や状態を示すネットワークトポロジ図を作成できます。ユーザーは、ノードや接続を追加、削除、変更するなど、ノードや接続を操作して制御できます。

Node Networkの利用方法

NodeNetwork的使用方法非常简单，下面介绍其中的几个步骤(参考不到30行代码的Hello world)。

首先，使用 Dotnet 8创建WPF项目，项目命名为NodeNetworkTest，您可以使用 .NET Framework 4.7.2 以上或 .NET CORE 3.x 以上，站长使用 .NET 8只是8预览版2刚出来试试而已。

1. Node Networkの設定

NodeNetworkはNuGetパッケージマネージャからインストールできます。Visual Studioで、パッケージマネージャコンソールを開き、次のコマンドを入力してNode Networkをインストールします。

Install-Package NodeNetwork

2. NodeNetworkビューの登録

MVVM在整个NodeNetwork库中都在贯彻使用。有关MVVM的介绍请点击这里查看。使用库中的元素，您需要创建合适的视图，并为其提供相应的ViewModel实例。

在使用库之前，请在App.xaml.cs文件的OnStartup方法内使用NNViewRegistrar.RegisterSplat()方法将NodeNetwork的视图和相应的ViewModel进行注册关联。

using System.Windows;
using NodeNetwork;

namespace NodeNetworkTest;

public partial class App : Application
{
    protected override void OnStartup(StartupEventArgs e)
    {
        base.OnStartup(e);
        NNViewRegistrar.RegisterSplat();
    }
}

3. ビューの作成

打开MainWindow.xaml，添加NodeNetwork命名空间xmlns:nodenetwork="clr-namespace:NodeNetwork.Views;assembly=NodeNetwork"，并添加NetworkView视图<nodenetwork:NetworkView x:Name="networkView" />，NetworkView表示整个网络拓扑图：

<Window x:Class="NodeNetworkTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:nodenetwork="clr-namespace:NodeNetwork.Views;assembly=NodeNetwork"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <nodenetwork:NetworkView x:Name="networkView" />
    </Grid>
</Window>

4. ノードとコネクションの作成

Node Networkでは、ノードの作成と接続は非常に簡単です。まず、Network ViewビューのViewModelであるNetwork ViewModelを作成する必要があります。これは次のコードで作成できます。

var network = new NetworkViewModel();
networkView.ViewModel = network;

次に、次のコードで最初のノードを作成します。

var node1 = new NodeViewModel();
node1.Name = "节点1";
network.Nodes.Add(node1);

最初のノードの入力ポートを作成します：

var node1Input = new NodeInputViewModel();
node1Input.Name = "节点1输入";
node1.Inputs.Add(node1Input);

2番目のノードを作成し、同じ方法でこのノードの出力ポートを作成します。

var node2 = new NodeViewModel();
node2.Name = "节点2";
network.Nodes.Add(node2);

var node2Output = new NodeOutputViewModel();
node2Output.Name = "节点2输出";
node2.Outputs.Add(node2Output);

最後に、次のコードでノード1の入力ポートとノード2の出力ポートを接続できます。

var connection = new ConnectionViewModel(network, node1Input, node2Output);
network.Connections.Add(connection);

完全なコードは以下の通り。

using DynamicData;
using NodeNetwork.ViewModels;
using System.Windows;

namespace NodeNetworkTest;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        // 创建NetworkView视图的ViewModel实例
        var network = new NetworkViewModel();

        // 给视图(networkView)赋值viewmodel(network)
        networkView.ViewModel = network;

        // 创建第一个节点ViewModel，设置它的名称并将此节点加入到network
        var node1 = new NodeViewModel();
        node1.Name = "节点1";
        network.Nodes.Add(node1);

        // 创建第一个节点的输入端口ViewModel，设置它的名称并加入第一个节点
        var node1Input = new NodeInputViewModel();
        node1Input.Name = "节点1输入";
        node1.Inputs.Add(node1Input);

        // 创建第二个节点ViewModel，设置它的名称并将此节点加入到network, 并以同样的方式给此节点添加一个输出Create the second node viewmodel, set its name, add it to the network and add an output in a similar fashion.
        var node2 = new NodeViewModel();
        node2.Name = "节点2";
        network.Nodes.Add(node2);

        var node2Output = new NodeOutputViewModel();
        node2Output.Name = "节点2输出";
        node2.Outputs.Add(node2Output);

        // 将节点1的输入端口和节点2的输出端口连接到一起
        var connection = new ConnectionViewModel(network, node1Input, node2Output);
        network.Connections.Add(connection);
    }
}

手順の効果：

示例代码已经全部给了，你也可以戳这克隆。

5. レイアウト·レイアウト

Node Networkでは、レイアウトは非常に柔軟で自由です。コードまたはグラフィカルインターフェースでレイアウトできます。例えば、以下のコードで指定した場所にノードを配置できます。

node.Position = new Point(100, 100);

通过以下代码调整整个网络拓扑图的布局(参考布局文档)：

ForceDirectedLayouter layouter = new ForceDirectedLayouter();
var config = new Configuration
{
    Network = yourNetwork,
};
layouter.Layout(config, 10000);

6. 直列化とデ直列化

Node Networkでは、シリアル化とデシリアル化は非常に簡単です。ノードと接続をXML形式にシリアライズするには、次のコードを使用します。

var serializer = new XmlSerializer(typeof(NodeNetworkViewModel));
var writer = new StringWriter();
serializer.Serialize(writer, nodeNetwork);

次に、XML文字列をファイルまたはデータベースに保存できます。デシリアライゼーションも非常に簡単です。次のコードを使用して、XML文字列からノードと接続をデシリアライズできます。

var serializer = new XmlSerializer(typeof(NodeNetworkViewModel));
var reader = new StringReader(xmlString);
var nodeNetwork = (NodeNetworkViewModel)serializer.Deserialize(reader);

VII.概要

Node Networkは非常に実用的で柔軟なC#WPFオープンソースプロジェクトで、ノードと接続の相互作用と配信のためのネットワークトポロジのグラフィカルなマップをすばやく構築するのに役立ちます。Node Networkは、ノードと接続のカスタマイズ、レイアウトと調整、シリアル化とデシリアル化など、さまざまなアプリケーション要件を満たす豊富な機能と機能を提供します。Node Networkのユースケースは、データ処理と分析、グラフィカルエディタ、ビジュアライゼーションとインタラクティブなプレゼンテーションなど、非常に広範です。Node Networkの使い方は非常に簡単です。Node Networkのインストール、ノードと接続の作成、レイアウトと調整、シリアライズとデシリアライズだけです。

入門書ガイド

有关使用此库的简单快速入门指南，请参阅此页面上的说明书章节。该文档包括设置信息、说明书章节、示例和 API 参考。

ライセンスは

该库在 Apache 许可证 2.0 下获得许可。（见 choosealicense.com/licenses/apache-2.0 简要介绍）此许可证的副本包含在 LICENSE 下的存储库中。

ファイルのアーカイブ

文档可在此处获得。如果要对文档进行更改，可以通过向 gh-pages 分支发出拉取请求来实现。

貢献度は

バグ報告、パッチ、機能リクエスト、プルリクエストなど、GitHubページでは非常に人気のあるアクションがあります。

微信技術交流グループ：微信（codewf）コメント“グループに入る”を追加
QQ技術交流グループ：77 199230 0。