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] Most Nodify way to have additional vertical connection flow? #98

Closed hendrikp closed 4 months ago

hendrikp commented 4 months ago

I have a question in regard what would be the best approach to have an additional connector in the header/footer which are symbolizing (Start/End, In/Out). It works well to add an port inside header/footer, my question aims more to the port/connection flow visuals. (as they still flow atm to the side, also arrow orientation). I'm aware of the state sample, but the whole Node being a connector doesn't fit my usage. Also it'd like to continue to use the default connection line mode (bezier style).

image

My aim was mostly to avoid modifying the Nodify/Nodify.Shared projects as little as possible.

hendrikp commented 4 months ago

I experimented a bit and it seems to require an extension of two properties on the BaseConnection, IsTargetVertical and IsSourceVertical, as well as Vertical property on the Ports. The flow/direction then does not need extension, however the arrow-drawing and line-drawing ones do (additional parameters). The offset is rotated by switching x/y in case the port is vertical.

Looks promising, i adjusted the default bezier one in a way where a horizontal port can flow into a vertical one and so one.

Let me know if this sounds useful maybe i have a chance todo a PR or if you'd do it differently.

miroiu commented 4 months ago

Hi, the first thing I'd try is to create a new class that extends BaseConnection and overrides the DrawLineGeometry and DrawDefaultArrowhead methods. The new properties you mentioned would go into this new class (this can be done without having access to the source code). Having them in the BaseConnection implies that all the existing connection types should be updated to work with these new properties.

I also added support for vertical connections in Nodify itself in this PR: #99 . I wonder what would be the effort to allow a horizontal port to flow into a vertical one like you did and if I can support your use case better through class inheritance and virtual methods (note that I added the orientation as a parameter to each Draw*Arrowhead virtual method).

Also, it's worth mentioning that you are not limited to using BaseConnection. You can create your own connection types in C# or directly in XAML.

hendrikp commented 4 months ago

thanks for the reply, yes i pretty much came to the same conclusion and decided to extend the baseconnection. As written in the PR i can contribute the mixed vertical<->horizontal flow. (The decision of orientation i have on the view model ports (to e.g. Input.Orientation and Output.Orientation, bound through xaml so as you did with the dependy property orientation). Thanks for the confirmation and feature integation ill submit some extension in your PR on monday.