Hi 👋
miroiu / nodify Goto Github PK
View Code? Open in Web Editor NEWHighly performant and modular controls for node-based editors designed for data-binding and MVVM.
Home Page: https://miroiu.github.io/nodify
License: MIT License
Highly performant and modular controls for node-based editors designed for data-binding and MVVM.
Home Page: https://miroiu.github.io/nodify
License: MIT License
Hi 👋
Describe the bug
It is possible to connect nodes to child graphs, which is not intended and will result in bad Anchor calculations.
To Reproduce
Add an operation graph in the calculator example and connect a node from the root graph to another node inside the operation graph.
Expected behavior
I should not be able to create connections across graphs.
Screenshots
In this example, the output of the Add node is connected to the input of the Output parameters nodes inside the Operations graph.
Hi, i want to implement undo resize when GroupingNode resize completed. It looks like i need to add an event? or is there any other solution? Thank you.
Could you make an AvaloniaUI Port to use it on different platforms?
=> just saw Group Node after suggesting this.
Describe the solution you'd like
When the number of nodes getting too many, it would make sense to group them into groups each represented by a SINGLE Group Node BUT same size has single Non-group node. When click on it, it expands OR a side window appears, showing the nodes layout of the nodes within the clicked module.
Excellent work!!!
Hello I am using this project to generate a node graph of function calls in a C# project. Being that all the code is generated and not manually created by the user I was wondering if there is a simple way to sort / organise the nodes like in a Code Map where you can align everything from Left -> Right or Top -> Bottom etc.
What is the best way to save all current node state?
I'm a beginner in programming, and your project is really helpful to me.
I think you already have in mind,
What's the best way to save and reload all of the current node state?
If you already have a solution, please let me know.
Thank you very much.
I am writing an Avalonia application, is there any chance of getting this to work with that in the future?
Describe the bug
Say I have an add node, and in the top input I have pi connected. If I have another node, lets say a subtract node, and drag from the subtract output to the top input on add, then logically it replaces the pi node being input (all values now represent the subtract node entering at top input), however the pi node is visually also still connected to that same top input
To Reproduce
Drag 3 nodes out. Connect one node to another, and then with the third connect that output to the already used input on one of the other 2 nodes
Expected behavior
Visually, the old input gets disconnected
Screenshots
Additional context
Saw this project from Discord, Will be using it as soon as my base project template is sorted, have a few more things to do. Have an old project in dire need of a V2, and this is perfect for it.
Describe the solution you'd like
The BaseConnection
can display an arrowhead at the end of the line if ArrowSize
is valid. I would like to be able to specify at which end of the line the arrow should be displayed. (possible values for ArrowHeadEnds: None, Start, End, Both).
Don't forget to add the new setting to the Playground app.
Optional: Customize the shape of the arrowhead: Arrow (default), Ellipse, Rectangle
Hi miroiu.
The current node will be sized according to the number of Connectors and the length of the Content, can I customize its length and width?
And can I impose more styles for nodes? For example, modify the border, modify the background color of the node?
I plan to use this for a circuit schematic display, so it would be nice to be able to replace the node Content with a graphic.
If there is a good way please tell me, thank you.
Code in Nodify.Calculator, add SelectionChanged="Editor_SelectionChanged"
xaml code:
<nodify:NodifyEditor DataContext="{Binding Current}"
ItemsSource="{Binding Operations}"
Connections="{Binding Connections}"
SelectedItems="{Binding SelectedOperations}"
ConnectionCompletedCommand="{Binding CreateConnectionCommand}"
DisconnectConnectorCommand="{Binding DisconnectConnectorCommand}"
Background="{StaticResource SmallGridLinesDrawingBrush}"
GridCellSize="15"
SelectionChanged="Editor_SelectionChanged"
x:Name="Editor">
xaml.cs code:
private void Editor_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
Debug.WriteLine("Editor_SelectionChanged");
}
Is there a beter way to trigger selection changed event? Thank you.
Is there a possibility that a connector is a destination for one input and the source for many connections at the same time?
Hi! I have some trouble with trying to implement OperationsMenuView in mulitiple instance of nodify editor, the EventManager.RegisterClassHandler not acting right, like this.
and here is my code.
WpfApp2.zip
Is your feature request related to a problem? Please describe.
It's possible but very hard to override the default keybindings for panning, selecting, etc.
Describe the solution you'd like
I would like to have the possibility to change the default keybindings.
Additional context
WolvenKit
Is your feature request related to a problem? Please describe.
I would like to open a context menu from a pending connection.
Describe the solution you'd like
When dropping a pending connection onto the editor's surface, a context menu should open showing all available nodes. When a node is selected, a new connection to that node should be created.
Additional context
Something similar to the context menu from UE4's Blueprint editor.
hi ,
i read this https://docs.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/wpf?view=aspnetcore-6.0,
so will this work in blazor -server app ?
Hello. I was wondering if it is possible to make the selection rectangle snap to the/a grid? Doing an image editor currently, and I'm trying to get it to snap to the pixels but it seems like it is not possible currently? Not that experienced with WPF yet. :)
Also, is it possible to use the selection as a dependencyobject? I'm trying to do marching ants on the selection as well.
Describe the bug
I created a ConnectorViewModel with ContextMenu, and try to bind to ContextMenu of nodify:NodeInput in EditorView, but it can't be open.
To Reproduce
EditorView.xaml
<!--...-->
<nodify:Node.InputConnectorTemplate>
<DataTemplate DataType="{x:Type localConnectors:IConnectorViewModel`1}">
<nodify:NodeInput
...
ContextMenu="{Binding ConnectorContextMenu}"
...
>
<!--...-->
ConnectorViewModel.cs
using System.Windows.Controls
using CommunityToolkit.Mvvm.ComponentModel;
public interface IConnectorViewModel : IObservableObject
{
//...
ContextMenu? ConnectorContextMenu { get; set; }
//...
}
public class ConnectorViewModel : ObservableRecipient, IConnectorViewModel
{
//...
protected ContextMenu? connectorContextMenu = new();
public virtual ContextMenu? ConnectorContextMenu { get => this.connectorContextMenu;
set => SetProperty(ref this.connectorContextMenu, value); }
protected ObservableCollection<object> connectorContextMenuItems
= new ObservableCollection<object>();
public virtual ObservableCollection<object> ConnectorContextMenuItems {
get => this.connectorContextMenuItems;
set => SetProperty(ref this.connectorContextMenuItems, value); }
//...
public ConnectorViewModel()
{
var menuItem = new MenuItem() {
Header = "TheMenuItem",
Name = "TheMenuItem" };
this.ConnectorContextMenuItems.Add(menuItem);
this.ConnectorContextMenu = new() { ItemsSource = this.ConnectorContextMenuItems };
}
//...
}
public interface IConnectorViewModel<T> : IConnectorViewModel
{
//...
}
public class ConnectorViewModel<T> : ConnectorViewModel
, IConnectorViewModel<T>
{
//...
}
Expected behavior
You can create a NodeViewModel and add a ContextMenu and a ContextMenuItems, and bind to the nodify:Node in EditorView.
Is your feature request related to a problem? Please describe.
Related to #6
Describe the solution you'd like
Use GroupingNode
It would be nice to showcase projects that are using Nodify whether they are public or private applications.
Please include:
It would be nice if i can host the app on a server so few of my friends edit the graphs collaboratively. And it would also be nice if the app has some sort of tree view showing packages and the graphs within the server.
Firstly, thank you immensely for the project, this library will be used as part of an internal tool that produces Lua scripts from a node graph. It has many of my colleagues quite excited!
Describe the bug
The connection lines fail to render / update their positions correctly when the NodifyEditor is parented by a TabControl.
To Reproduce
My scenario is relatively complicated as I'm using a fork of the Avalon Dock but I have managed to reproduce it in a simpler manner.
<TabControl>
<TabItem Header="Tab 1">
<nodify:NodifyEditor ... />
</TabItem>
<TabItem Header="Tab 2">
<nodify:NodifyEditor ... />
</TabItem>
</TabControl>
Expected behavior
The connections should continue to render / update when switching tabs.
Please let me know if there's any additional information I could provide to help reproduce the issue. Thanks again!
Is your feature request related to a problem? Please describe.
Adding new entries to the Playground's settings panel is error-prone and it's really hard to change their order.
Describe the solution you'd like
The settings panel could be generated based on a view model that has a list of available settings.
Saving / Loading node graphs would be hugely beneficial, will there be any support out of the box, or will it be up to a user to implement their own save system?
Hi @miroiu. I am trying to restrict a connector to having only one outgoing connection by checking if it is already connected and returning a false from CanExecute.
StartConnectionCommand = new RelayCommand<ConnectorViewModel>(source => PendingConnection.Source = source!, model => !model.IsConnected);
But this is not working. Am I doing it the correct way?
Describe the issue
Find a way to generate API Reference from XML comments in the build pipeline (GitHub action) and upload it to the wiki.
Please make sure that documentation is generated only for types inside Nodify.dll and that links to WPF classes are pointing to the Microsoft documentation (e.g. references to FrameworkElement will point to this https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-6.0)
Additional context
The API Reference was previously generated manually with a custom tool and uploaded to the website but that tool had multiple issues and it could not be used in a pipeline.
Hi!
First of all: Thanks for Sharing this Awesome Node Editor!!!
Now to the question:
Somehow i Cant get the Connection to be above a Group-node.
As soon as i add a Group i Cant hover over a connection to disconnect it with ALT+Click.
This behavior is in the Playground example by grouping some nodes together and connecting them.
I know, there is an option to display all Connections on Top, but then the Connections are above every Node,
which can look weird in some cases.
Is there a way to get the connection "between" the Grouping nodes and the other nodes?
Can you make some examples of minimal use of nodify, the current three examples are a bit too hard to understand for beginners. Thanks.
My solution:
https://gist.github.com/Yokosama/723b0465a669c9207b69b77e9cec653d
I have some question:
How to get ItemContainer's width and height use binding? the result I got was Nan.
The ItemContainer's location are not updated until the drag is completed, how to update minimap's node items location in realtime when drag node item?
So, is there a better solution, thank you very much.
Describe the bug
"Input Parameters" node does not remove connections when pins are removed.
To Reproduce
Create a Calculator node, open it, press the "+" button in the generated "Input Parameters" node, connect the new pin to another node and press the "-" button to remove the pin.
Expected behavior
Connection is removed when the pin is removed.
Screenshots
Hi ,
Is it possible to insert text on the connecting lines between nodes?
I didn't see any preview of this feature in the demos that have been showcased.
Would it be too difficult to implement this, if its not implemented yet, could you let me know what part of the code needs to be modified to implement this feature?
Is your feature request related to a problem? Please describe.
I plan to renew my feeder for vJoy and release this as open source. vJoy is a virtual gaming device which is controlled by a so called feeder. For Example there is Joystick Gremlin
I allready have my own, fully working feeder which i did not release because of the complex configuration i have done. Joystick Gremlin is till now easier :)
NodeRed like virtual programming seems a good solution for such a configuration task.
While seaching for a NodeRed like programming interface for c# i come to nodify, which is by the way a very cool project.
The only thing what is missing to me is to use different shaped and colored connectors.
Let me explain why:
I want that the user can only connect bool outputs to bool inputs, POV outputs to POV inputs and Axis outputs to Axis inputs. Converting between them should be done in different nodes.
So the user should see which connectors can be connected on the shape (or the color) of the connector.
Describe the solution you'd like
For me it would be enought to have the circle shape, a recangle shape and a triangle shape for an connector and only allow connections with the same type.
But i know this is only my need. So i would suggest to implement a system which can be used by other programmers.
For example an property in the connector which is defining its shape and another property whis is defining its color. But this will be override theming. I know :( Any solutions in mind for that?
Also i suggest another property in the connector which define to which other connector it can be connected. For example: the output connector has an int property with the value 2. The input connector in this example has this property set to 3. A bitwise AND is bigger then zero so this two connectors can be connected.
Second example: output connector property is 2 and input connector is 1. Bitwise AND is 0, so this two connectors can not match.
The color of a connection of two matching connectors should be the color the output connector.
Describe alternatives you've considered
I hope i made it clear in my solution. If not ask.
Additional context
I don't have any exaple pictures yet
NuGet package not installing for NETFramework
Describe the issue
It might be useful to consider using a tool to generate API docs from XML comments.
This way it is possible to generate an API reference like Microsoft.
By including the generated xml file in the NuGet the XML comment will also be available for intellisense.
The main 'problem' I see right now is how to integrate it with the current documentation.
Screenshots
n/a
Additional context
n/a
I don't know how to use MVVM properly and was curious on how to do this, the examples aren't really simple to understand either for a beginner (when I looked into the examples I got crushed to be honest, I don't understand one bit of the implementation).
For example, I'd begin by adding children to the NodeEditor, say my first child is "Add", this "Add" is a class that has two properties called "x" and "y" with an output property called "z", then when I add this node to the NodeEditor (by using the right click context menu) it would display a simple Node with two entry points and one exit point, this exit point then being able to be fetched with a simple "MessageBox.Show(AddNode.z);".
Can it be that simple or is the entire framework based upon MVVM principles?
Hi @miroiu
I am not sure weather it is possible or not, but I wanted to hide content of pending connection until it's hover to invalid connection.
What I want is, I don't want to display the pending connection content "Drop on connector",
If it's hover to invalid connector it should display the content as shown below.
Any thoughts how to achieve this?
Thanks Again
Have a wonderfull day
The BaseConnection
can display an arrowhead in the specified position by ArrowEnds
if ArrowSize
is valid. I would like to be able to customize the shape of the arrowhead. (possible values for ArrowHeadShape: Arrow, Ellipse, Rectangle).
Don't forget to add the new setting to the Playground app and to the changelog.
Describe the bug
If BorderThickness is changed to a value not equal to 1, it will cause an abnormal display when the node is selected. If it is selected, the node will move slightly
Modifying BorderBrush will cause SelectedBrush to be modified together and the SelectedBrush modifications to be invalid
It is also not possible to change the Selected BorderThickness
To Reproduce
change ItemContainer style
Expected behavior
No displacement
Additional context
Add any other context about the problem here.
Hello! First of all, thank you for your amazing job with Nodify! Wanted to ask what is the best possible way of limiting panning to actual contents of the editor? I am building an application that suggests placing nodes in ordered columns with user having an option to add more columns and further add nodes in these new columns. Therefore from the start user workspace will be limited to visible screen area and zooming is disabled by design for the whole app. It would be great to be able to have horizontal and vertical scrollbars so that user would interact with the working area in the canvas-style way (horizontal and vertical scroll with scrolling stopping when we reach the end of canvas). Canvas can expand when user adds sufficient number of nodes in a column (vertical expansion) or columns (horizontal expansion).
Hi. Is it possible to bring the selected node on top? Currently the last added node comes on top of all other nodes and if you select others they are behind the last added one.
Describe the bug
When I try to build the examples, using the nuget package -- rather than a local build of the nodify csproj -- I get many xaml namespace errors. Reading the change log this appears to be from the repository having been updated since the last nuget package release to provide the namespace support.
Requested Fix
I'd like to ask for a new nuget package release. Thank-you!
Is your feature request related to a problem? Please describe.
It would be good to have an example of how to use multiple editors in an application.
Describe the solution you'd like
Use a tab control with a 'plus' button like in Chrome to create a new tab. The new tab will contain an empty editor instance.
Optional
Add a way to close the tabs. Suggestions:
Hi miroiu
The devs of WolvenKit are exploring implementing Nodify as a node based component for the open sourced application.
It’s a modding application for Cyberpunk 2077 and similar RED engine based games.
While the user base for this application is in the several 1000s, and very active, the devs are all volunteers. Keen to reach out and see if you could advise/support us?
See https://github.com/WolvenKit
Describe the bug
When I modify the theme by modifying the dictionary theme path, some controls cannot be changed
Light to Dark
Dark to Light
To Reproduce
Collection<ResourceDictionary> applicationDictionaries = Application
.Current
.Resources
.MergedDictionaries;
if (applicationDictionaries.Count == 0)
{
return;
}
for (var i = 0; i < applicationDictionaries.Count; i++)
{
string sourceUri;
if (applicationDictionaries[i]?.Source != null)
{
sourceUri = applicationDictionaries[i].Source.ToString().ToLower().Trim();
if (sourceUri.Contains("pack://application:,,,/nodify;component"))
{
switch (theme)
{
case ApplicationTheme.Dark:
applicationDictionaries[i] = new()
{
Source = new Uri("pack://application:,,,/Nodify;component/Themes/Dark.xaml",
UriKind.Absolute)
};
break;
case ApplicationTheme.Light:
applicationDictionaries[i] = new()
{
Source = new Uri("pack://application:,,,/Nodify;component/Themes/light.xaml",
UriKind.Absolute)
};
break;
}
break;
}
}
}
Expected behavior
A clear and concise description of what you expected to happen.
to
Screenshots
If applicable, add screenshots to help explain your problem.
Additional context
Add any other context about the problem here.
Describe the bug
In the calculator application, the connected pins update even after they are disconnected.
To Reproduce
Connect and disconnect two pins, then recompute the output pin's value and the input pin will get updated.
Expected behavior
Pins should not update if disconnected.
Hi,
Having some issues with lag when adding a large amount of nodes (10+)
Only present with nodes that have UI elements in the port (textbox, combobox, etc.). With or without bindings. It appears to only effect the camera panning which you can see in the attached video. The rest of the UI is lag free.
Version 1.7
hi there
i started using this library and when i started to read wiki(docs) i dont get very much about this library.
i mean the docs dont say much about where you should write the code and has not much explanation about this library.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.