[Question] A Strategy to Deal with Blocking Issue?

[chaojian-zhang]

Sometimes when nodes are created "before" other nodes and moved "in front of" other nodes, they appear behind.

This is expected due to draw order.

However, this becomes especially troublesome with grouping:

In this case, a new group is created - bigger than the smaller one, and it becomes very hard to select the group behind. The fact is, you can still select the group behind but it's not possible to move it around. So far my workaround (from the user side, since my program is not re-inserting things) has been: 1. Plan ahead, which is really hard, 2. Resize the outer group and use it as child, and use the earlier group as the bigger box....

I wonder are there strategies in dealing with this situation?

Here is an ideal situation: whenever a node is selected, it's automatically brought to front.

[miroiu]

This is the default behavior in the playground app - the selected nodes are brought to front. Add a trigger in the ItemContainerStyle that sets the ZIndex property when IsSelected is true:

<nodify:NodifyEditor.ItemContainerStyle>
    <Style TargetType="{x:Type nodify:ItemContainer}"
           BasedOn="{StaticResource {x:Type nodify:ItemContainer}}">
        <Style.Triggers>
            <Trigger Property="IsSelected"
                     Value="True">
                <Setter Property="Panel.ZIndex"
                        Value="1" />
            </Trigger>
        </Style.Triggers>
    </Style>
</nodify:NodifyEditor.ItemContainerStyle>

However, for the GroupingNode there's no standard way of doing this. I will think of possible solutions.

Related: #107

[miroiu]

Here's a solution for the GroupingNode:

1. Set the default ZIndex to 1 in the ItemContainerStyle
2. Add a trigger that sets the ZIndex to 2 when the ItemContainer is selected

<Style x:Key="ItemContainerStyle"
       TargetType="{x:Type nodify:ItemContainer}"
       BasedOn="{StaticResource {x:Type nodify:ItemContainer}}">
    <Setter Property="Panel.ZIndex"
            Value="1" />
    <Style.Triggers>
        <Trigger Property="IsSelected"
                 Value="True">
            <Setter Property="Panel.ZIndex"
                    Value="2" />
        </Trigger>
    </Style.Triggers>
</Style>

3. Add a trigger for the GroupingNode that sets the ZIndex to 0 when the ItemContainer is selected

<nodify:GroupingNode>
    <nodify:GroupingNode.Style>
        <Style TargetType="nodify:GroupingNode" BasedOn="{StaticResource {x:Type nodify:GroupingNode}}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=nodify:ItemContainer}}"
                             Value="True">
                    <Setter Property="Panel.ZIndex"
                            Value="0" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </nodify:GroupingNode.Style>
</nodify:GroupingNode>

[miroiu]

I created a new PR with a few improvements #270 and updated the calculator example with the changes discussed here.

Set IsContentHitTestVisible to false if you want to be able to click and drag grouping nodes that are behind other grouping nodes.

[chaojian-zhang]

Thanks, will give it a try and see how it goes!

[miroiu]

Related #57