Link routes after grouping

GoXam
1

Hi,
I have two issues about grouping nodes:

  1. Without grouping, I receive the following diagram (which looks good):
    goodGroup2.PNG1579×561 33.2 KB

But when I add nodes to groups (and additional nodes which plays a roll of group, without showing them on graph on first run), my links route are drawn diffrently:

bugGroup.PNG1588×610 38.4 KB

Furthmore, the diagram with groups doesn’t starts from left side of panel, but with space of several columns afterwards.
Why adding groups changes links routes?

2)Another question: before I group my nodes the looks as following:

But when I group them (by clicking the “minus” button), the route became as following:

I would like them to look like following:

Xaml:

<DataTemplate x:Key="linkTemplate1">
                <go:LinkPanel>
                    <go:Link.Route>
                        <go:Route  Routing="AvoidsNodes"    FromSpot="MiddleRight"   ToSpot="MiddleLeft" />
                    </go:Link.Route>
                    <go:LinkShape  Stroke="Black" StrokeThickness="1" />
                    <Path Fill="Black" />
                </go:LinkPanel>
            </DataTemplate>
      <DataTemplate x:Key="GroupTemplate1">
       <StackPanel  go:Part.Visible="{Binding Path=Group.IsExpandedSubGraph,
                            Converter={StaticResource theButtonConverter}}" 
                go:Node.LocationSpot="Center" >
        <Button Click="Expand_Click" Width="12" Height="12"
       Background="Transparent" BorderBrush="LightGray"
       Padding="0" Margin="0" VerticalAlignment="Center" x:Name="groupButton"
      Visibility="Hidden">
            <Grid>
                <Path x:Name="MinusShape" Data="M0 4 L8 4" Width="8" Height="8"
      Stroke="Black" StrokeThickness="1" Visibility="Collapsed" />
                <Path x:Name="PlusShape" Data="M0 4 L8 4 M4 0 L4 8" Width="8" Height="8"
      Stroke="Black" StrokeThickness="1" Visibility="Collapsed" />
                <go:GroupPanel x:Name="myGroupPanel" />
            </Grid>
        </Button>
           </StackPanel>
      </DataTemplate>
                    <layout:LayoutGroup  Orientation="Vertical"      layout:DockLayoutControl.UseDesiredHeightAsMaxHeight="False"  layout:DockLayoutControl.Dock="Client"                       MinHeight="200">
            <go:Diagram x:Name="myDiagram"   Margin="10" AllowCopy="True" AllowDelete="True"                                                  UnloadingClearsPartManager="False"  
    Grid.Row="0" Background="White"    DragSelectingTool="{x:Null}"
                SelectedNode ="{Binding SelectedNode,Mode=TwoWay}"
                HorizontalContentAlignment="Left"
                VerticalContentAlignment="Center"        
                
                InitialPanelSpot="Center"
                InitialDiagramBoundsSpot="Center"
                InitialScale="1.0"                                        
                AllowMove="False" AllowUndo="False"
                GroupTemplate="{DynamicResource GroupTemplate1}"
                NodeTemplateDictionary="{DynamicResource  NodeTemplates}"
                LinkTemplate="{DynamicResource  linkTemplate1}">
                <go:Diagram.PrintManager>
                    <go:PrintManager Scale="NaN" />
                </go:Diagram.PrintManager>
                <ContextMenuService.ContextMenu>
                    <ContextMenu>
                        <MenuItem Header="Collapse all nodes"   HorizontalAlignment="Stretch" Height="24"     
    Command="{Binding Path=ExpandDiagramCommand,Mode=TwoWay}" CommandParameter="false" >
                        </MenuItem>
                         <MenuItem Header="Expand all nodes"   HorizontalAlignment="Stretch" Height="24"     
    Command="{Binding Path=ExpandDiagramCommand,Mode=TwoWay}" CommandParameter="true" > 
                        </MenuItem>

                    </ContextMenu>
                </ContextMenuService.ContextMenu>
                <go:Diagram.Layout>
                    <go:TreeLayout  Alignment="CenterSubtrees" TreeStyle="LastParents"  Compaction="None" >
                        
                    </go:TreeLayout>
                                    </go:Diagram.Layout>
                <go:Diagram.LayoutManager>
                    <go:LayoutManager Animated="False"    />
                </go:Diagram.LayoutManager>
                <go:Diagram.DraggingTool>
                    <go:DraggingTool DropOntoEnabled="True" />
                </go:Diagram.DraggingTool>

            </go:Diagram>
        </layout:LayoutGroup>

Thanks you very much for you time

2

Did you want to have the layout as if the Groups didn’t exist? If so, set Group.Layout to null in your Group DataTemplate: go:Group.Layout="{x:Null}"

3

Same result:

<DataTemplate x:Key="GroupTemplate1" >
 <StackPanel  go:Group.Layout="{x:Null}"> 
 </StackPanel>
</DataTemplate>
4

Sorry, I think you also need to set go:Part.LayoutId="None".
Otherwise the LayeredDigraphLayout will try to position those Groups anyway.

(Setting Group.Layout = null only causes the Group not to lay out its member Nodes and Links.)

5

Hi,
I would like to add real example in order to demonstrate issue. How can i do it ???

6

I just tried modifying a sample so that Group.Layout = null and Part.LayoutId = “None”. Sure enough, the diagram was laid out as if the Groups did not exist.

I did have to make sure that the model had no links connecting with groups – only links connecting with simple nodes.