wieslawsoltes/nodeeditor

A node editor control for Avalonia.

NodeEditor

A node editor control for Avalonia.

About

The node editor is an Avalonia control for editing and rendering nodes and connectors. Node contents can be defined from xaml. Node controls, connectors and pins can be retemplated from xaml or used with the provided default theme. The contents of the nodes are rendered based on provided view models. The default implementation of the view models is done using ReactiveUI, users can create their own view models based on core model interfaces. The node contents are resolved using the provided object type by view locator.

Building NodeEditor

First, clone the repository or download the latest zip.

git clone https://github.com/wieslawsoltes/NodeEditor.git

Build on Windows using script

• .NET Core.

Open up a command-prompt and execute the commands:

.\build.ps1

Build on Linux using script

• .NET Core.

Open up a terminal prompt and execute the commands:

./build.sh

Build on OSX using script

• .NET Core.

Open up a terminal prompt and execute the commands:

./build.sh

Web

git clone https://github.com/wieslawsoltes/NodeEditor.git
dotnet workload install wasm-tools
dotnet run --project ./samples/NodeEditor.Web/NodeEditor.Web.csproj -c Release

NuGet

NodeEditor is delivered as a NuGet package.

You can find the packages here NuGet and install the package like this:

Install-Package NodeEditorAvalonia

Available Packages

• NodeEditorAvalonia - The main package with Avalonia controls and default theme.
• NodeEditorAvalonia.Model - The base interfaces used in controls and view models.
• NodeEditorAvalonia.MVVM - The MVVM view models with default implementation.

Package Sources

• https://api.nuget.org/v3/index.json
• https://www.myget.org/F/avalonia-ci/api/v2

Resources

• GitHub source code repository.

License

NodeEditor is licensed under the MIT license.

nodeeditor's Issues

how fix this

Some feedback on making this general purpose graph control

This is amazing, was able to create very quickly a good-looking graph-based window for my project (image below).
I think can made into a package as a graph control by letting the user set the content of each Node and Connector and customize them.
Few things I noticed when combining it with my implementation -

1. Check whether the node was moved and if so handle the event in NodeDragBehavior

2. Allow setting content of a node, possibly by having DataTemplates in DrawingNodeView or just add content property in the node object (not sure about this).

Not sure what are your plans with this, if you'd like I can make these changes as I already work on them in my project.

Thanks!

Allow only one connection mode for Pin

Enable to disallow multiple connections on pin.

Support for zoom in/out

Add support for zooming in/out of the editor, using TouchPad or Ctrl+Scroll.

Allow undo/redo

Support undoing the last change or redoing the last undo.
Either through API or hotkeys - Ctrl+Z, Ctrl+Y

Add Mechanism to be used as visual programming

Add mechanism to build a syntax tree from the nodes to execute directly or compile to a binary

Drop nodes on mouse position

I have resized my canvas to 10000x7500, when I drop nodes on it the nodes are hided in the lower right corner. So it would be a great improvement to drop the node where the mouse position is

Node resizing

Resize is noted as "todo". Can this be added at some point? Thanks

Grouping nodes together

Enable to group nodes together and add a comment

Allow dynamic size of nodes

Currently (from my understanding) you need to set static height/width for each node and their Pins.
This is OK for the start but, at least in my scenario each node will have different size depending on user input.
I am sure I can just change these properties as I get user input, but it would be less optimal.
Thanks!

Automatic canvas resizing

Add automatic canvas resizing when node is outside the white canvas

Canvas jumps to center if zooming

Enable resizing of nodes

Material Design theme

Hey I love this project!

Would you consider making a theme for material design instead of fluent?

setters on interfaces

Most (all?) of the properties on the interfaces in NodeEditorAvalonia.Model have public setters.

Would it be possible to remove those setters, unless it is required for NodeEditor's operation?

For example:

• I want my implementations of INodeTemplate to be immutable; it doesn't make sense to change the "Line" tool's name to "Circle"
• I don't want public consumers of my IEditor to be able to add templates. I may, in my own internal model, have a method to add templates, but I don't want anyone to be able to do it.

I can implement the interface explicitly, and throw a NotSupportedException if someone calls the setters - but I would rather not do this.

How to save the page to Xaml

How to save the page to Xaml

How to compile and run Web version locally?

Hi @wieslawsoltes,

First of all, thank you so much for this reference code to learn how to compile an Avalonia app for WebAssemly.

I'm trying to execute the Web version locally. I cloned the repo and I'm trying to execute it locally. I tried the following:

\samples\NodeEditor.Web>dotnet build
\samples\NodeEditor.Web>dotnet run

Then, I'm able to connect to http://localhost:5000, but I'm getting the following:

Am I missing something? Thank you!

Add Non Removable Nodes

Like for example to ensure that Exit/Entry nodes are present enable to prevent from deleting it

When two Nodes overlap, one of the Nodes cannot be selected for movement

When two Nodes overlap, one of the Nodes cannot be selected for movement

20221122001344.mp4

I want to drag the mouse on the four corners to change the size of the Node

I want to drag the mouse on the four corners to change the size of the Node

plase help

Can't connect nodes if they added with code

If I add standard nodes on load I cannot connect these nodes to other nodes

How to add the zoom feature of the existing node in a project

How to add the zoom feature of the existing node in a project

PerspectiveDemo-Resizing.zip

Does this cull nodes that are outside view port?

Allow moving nodes without edit mode on

Add selection support

(Jetbrains Rider) Unable to cast object of type RectangleViewModel to type INode

How to reproduce:

1. Download/clone repo
2. Open NodeEditor.sln with Jetbrains Rider (with Visual Studio not reproducible)
3. Run Debug NodeEditor.Desktop

I can't figure out what the difference is between Rider and VS. I am currently in the process of researching the issue.

It throws exception on public static void Main, class Program.cs, line 10

System.InvalidCastException: Unable to cast object of type 'NodeEditorDemo.ViewModels.Nodes.RectangleViewModel' to type 'NodeEditor.Model.INode'.
at CompiledAvaloniaXaml.XamlIlHelpers.NodeEditor.Model.INode,NodeEditorAvalonia.Model.Content!Getter(Object)
at Avalonia.Data.Core.ClrPropertyInfo.Get(Object target) in //src/Avalonia.Base/Data/Core/ClrPropertyInfo.cs:line 27
at Avalonia.Markup.Xaml.MarkupExtensions.CompiledBindings.InpcPropertyAccessor.get_Value() in //src/Markup/Avalonia.Markup.Xaml/MarkupExtensions/CompiledBindings/PropertyInfoAccessorFactory.cs:line 88
at Avalonia.Markup.Xaml.MarkupExtensions.CompiledBindings.InpcPropertyAccessor.SendCurrentValue() in /_/src/Markup/Avalonia.Markup.Xaml/MarkupExtensions/CompiledBindings/PropertyInfoAccessorFactory.cs:line 132

Add Ability To Show Pin name over connection

Hanging up in WASM/mobile builds?

We tried adding the node editor into a new Avalonia template but it keeps stalling/hanging before the splash screen & page load. And I figured this is likely due to some kind of mismatch or incompatibility of versions. Anyone else had this issue or know how to point us in the right direction? We were using the last 11.0.0 preview

Add Name property for pins

Add Names as Tooltips to Pins to identify for user and later for execution

There is a problem extracting the project to its image

There is a problem extracting the project to its image

When extracting the project into an extension
The image appears black

Add a check for dependencies in windows build script

Description

When running the build script on windows, the restore and compile tasks fail if wasm-tools or any other dependency isn't already installed because there is no check for that.

To Reproduce:

1. Dont have wasm-tools installed on the machine
2. Run build.cmd/build.ps1

How to resolve

Include a check for dependencies in the build script.