Lifeisforu.NodeGraph 0.2.1

NodeGraph

WPF control librarty for node graph.

Sample Project : https://github.com/lifeisforu/NodeGraph/raw/master/Documents/NodeGraphSamples.zip

한국분은 An introduction for WPF NodeGraph( Korean ) 를 참고하세요.

This library is inspired by a BlueprintEditor of UnrealEngine4. Below image shows a snapshot of a sample using this library. It makes two integers as array, and print values in top-left corner of screen during loop.

A node can be divided as 3 parts, shown in below image; Node itself, FlowPorts, PropertyPorts.

• A FlowPort is used for specifying a execution flow between two nodes. The connection can be made for a FlowPort with different direction. For example, an input FlowPort can be connected with an output FlowPort.
• A PropertyPort is used for specifying data-transfer between two nodes. The connection can be made for a PropertyPort with differenct direction. For example, an input PropertyPort can be connected with an output PropertyPort.

Features

This provide below features:

• Creating/Destroying FlowChart.
• Creating/Destroying Node.
• Custom Node ViewModel and Styling.
• Creating/Destroying NodeFlowPort.
• Custom NodeFlowPort ViewModel and Styling.
• Supporting PropertyEditor for default types( bool, byte, short, int, long, float, double, string, enum, Media.Color, etc. I will add more type editors in the future and have a plan to support custom editor ).
• Creating/Destroying NodePropertyPort.
• Custom NodePropertyPort ViewModel and Styling.
• Creating/Destroying Connector.
• Custom Connector ViewModel and Styling.
• Supporting Zoom & Pan.
• Supporting miscellaneous selection mode.
• Supporting History( undo/redo ).
• Serialization/Deserialization for XML.

Install

First, in solution explorer, open context menu and select "Manage Nuget Packages...".

And, in filter text box, search "nodegraph" and press a "Install" button.

Then, popup window will be opened. And it shows you that "Lifeisforu.NodeGraph" and "PropertyTools.Wpf" will be installed.

And then assemblies will be added in "References".

Controlling

Connection

• Drag-Drop between ports : Connects.
• Ctrl + Left on port : Disconnects.

Selection

• Left : Select node and deselect all.

• Ctrl + Left : XOR selection.

• Shift + Left : Additive selection.

• Alt + Left : Subtractive selection.

• Ctrl + Left Dragging : XOR selection.

• Shift + Left Dragging : Additive selection.

• Alt + Left Dragging: Subtractive selection.

• Ctrl + "A" : Select all nodes.

Deletion

• "Delete" : Delete selected nodes.

Zoom & Pan

• "F" : Focus selected nodes.
• "A" : Focus all nodes.
• Right Dragging on flowchart : Panning.

Class Diagram

NodeGraph supports MVVM( Model-View-ViewModel ) pattern.

All Model classes have their own attribute. I'll explain it later, all attributes could override ViewModel.

If you don't need special ViewModel or View, you can create node with basic appearances and behaviors just by adding attributes.

Conclusion

Elements of NodeGraph are categorized by Model-View-ViewModel. ALL Model instances are created by NodeGraphManager, it also create ViewModel instances. And ViewModels determine their Views.

Model class specify type of ViewModel, and appearances info is determined statically by attributes or dynamically by calling methods of NodeGraphManager.

If you want to see more details, visit https://github.com/lifeisforu/NodeGraph.