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] Is it possible to draw connections ontop the GroupingNode BG, but still behind normal Nodes? #107

Closed hendrikp closed 3 months ago

hendrikp commented 3 months ago

Setting on Comment/Grouping Nodes ZIndex to -2 does not have an effect on draw order. I verifed the property to be correct on the ItemContainer Parent Border. (there is a passthrough of ZIndex in the grouping node template apply function, which correctly sets the zindex)

It seems to be related to that all Nodes are grouped in the canvas behind the Connections in the VisualTree.

This setup makes it impossible to click/hover over connections inside of Grouping Nodes, except if all connections are drawn ontop all nodes (including grouping).

Is there a workaround maybe or would it require a new feature/rework?

miroiu commented 3 months ago

Hi, this has been answered here: #71. I don't know if it is possible unless we draw the connections inside the nodes panel (which is not a good idea because the NodifyCanvas panel is meant to be fast and also calculates the extent of the nodes).

hendrikp commented 3 months ago

Hm, maybe at least a click/hover through should be possible - ill do some experiments (i have some adjustments that make connections selectable, but as external code not in Nodify module).

Another workaround would be to draw grouping nodes in their own container before connections,

miroiu commented 3 months ago

Having a separate panel may require a significant effort because there are quite a few dependencies on the NodifyEditor.ItemsHost panel. The logic for selecting and dragging is an example.

hendrikp commented 3 months ago

The following adjustment allows hovering/clicking connections while also making it possible to still resize/select the GroupingNode. (if you think its useful - you can use it upstream)

GroupingNode.cs#L50

                            <Grid Grid.Row="1">
                                <Grid IsHitTestVisible="False"
                                      Background="{TemplateBinding Background}">
                                    <ContentPresenter x:Name="PART_Content"
                                                      ContentSource="Content" />
                                </Grid>

                                <Thumb x:Name="PART_ResizeThumb"
                                       IsHitTestVisible="True"
miroiu commented 3 months ago

This looks like a good idea. Would you like to create a PR?

miroiu commented 3 months ago

Well, it looks like the Operation Graph from the Calculator app is not working properly with these changes because it's using a GroupingNode