miroiu / nodify

Highly performant and modular controls for node-based editors designed for data-binding and MVVM.
https://miroiu.github.io/nodify
MIT License
1.27k stars 205 forks source link

[Question] Drag&Drop from Toolbox #81

Closed jpk6789 closed 7 months ago

jpk6789 commented 7 months ago

Hi, first of all thank you for this amazing node editor and all your work :)

I recently started to reimplement an existing XNA based node editor in WPF using nodify. However, we currently have a toolbox with applicable nodes in it and can drag&drop those nodes to the editor. I wonder how to realize such a drag&drop action of nodes with nodify. Is it possible and if yes how?

miroiu commented 7 months ago

Hi! It should be pretty straight forward to implement using the DragDrop API provided by WPF.

The only issue I see is that the NodifyEditor.MouseLocation - which could be used to position the dropped node - may stop updating due to MouseMove events not firing anymore while dragging. To workaround this, create a subclass of NodifyEditor which exposes a method to get the coordinates inside the editor (graph) space and use it in the drop event handler to position the node (assuming you use the nuget package and don't have access to the source code, otherwise you can add this method to the NodifyEditor itself).

internal class CustomEditor : NodifyEditor
{
    /// <summary>
    /// Translates the event location to graph space coordinates (relative to the <see cref="ItemsHost" />).
    /// </summary>
    /// <param name="args">The drag event.</param>
    /// <returns>A location inside the graph</returns>
    public Point GetLocationInsideEditor(DragEventArgs args)
        => args.GetPosition(ItemsHost);
}

Depending on your requirements, you can also show a preview of the node you drag using the DragOver event.

I'll create a simple example and link it to this issue. Do you have any progress on this, any specific questions?

miroiu commented 7 months ago

I created the PR. Relevant files are (EditorView.xaml, EditorView.xaml.cs, NodifyEditor.cs).

Please let me know if this helps.

drag-drop

jpk6789 commented 7 months ago

Thank you very much for your quick response and for the PR. I looked into it and I think I understand it and can adapt it to my case. I will also try to use the DragOver event but this seems to be straightforward. I will update you with the progress.

P.S.: Yes, I use the NuGet package and have no direct access to the source code. This was the reason for my question.

jpk6789 commented 6 months ago

Hi, as said, here is the update: It works :) I also have implemented the DtagOver preview and everything with control of the respective viewmodels. Thanks again for this awesome library and your support.

grafik

miroiu commented 6 months ago

Hi, thanks for the kind words and for the update. It's really cool that you also implemented the drag over preview. 🙂

redlotus2908 commented 1 month ago

Hi @miroiu, I love your library and use it in my work. I have some trouble with this drag-and-drop function.So I cannot change the name of the OnDragNode method. If it is, isn't it better to note somewhere that it is enforced by code and you cannot change that name, which could lead to an error if tried?

miroiu commented 1 month ago

Hi, the code does not enforce the names of the Drag and Drop callbacks. Verify that your method's name is the same in XAML and C#.

redlotus2908 commented 1 month ago

Yes, it turns out that maybe I created a user component and tried to host it in the form of a winforms application which may be the reason for this issue. Sorry for creating new issue.