Layout of links to nodes inside a collapsed group


I have links between nodes that each node belongs to a different group (similar the example in this thread). Works great when the groups are expanded.

When the group is collapsed the links use the wrong port - top instead of left, although they have the ports with the same Id as ports in the nodes. here is the group port’s XAML:

How do I set the ports on the collapsed group node to be used by those links?

The routing of links assumes that when the connected nodes are not visible inside a collapsed group that they pretend to connect instead to the default port of that containing (visible) group.

It explicitly assumes that the same port is used for all such links, because it cannot assume that the port identifiers/parameters will have exactly the same meaning for a completely different node.

Is there a default port (where the PortId="", the empty string) in your Group?
Have you set the ToSpot and the FromSpot on that element?

OK. I’v added a default port, and the links of the collapsed nodes goes to it - good. However, I’m setting the ToSpot and FromSpot in the element, but seems to have no effect on those links, as they still appear on the right side of the rectangle used as the default port of the node.
Here is my GroupTemplate (foreshortened version):

<go:SpotPanel go:Node.LocationElementName="myGroupPanel" go:Node.SelectionElementName="myGroupPanel" go:Node.Movable="{Binding Data.AllowMove}" go:Node.Copyable="{Binding Data.AllowMove}" go:Node.FromSpot="LeftSide" go:Node.ToSpot="LeftSide" go:Node.Location="{Binding Path=Data.ItemLocation, Mode=OneWayToSource}" go:Group.Layout="{StaticResource FlowCanvasDiagramLayout}" go:Group.IsSubGraphExpanded="False"> ...

Update: when the animation is turned off, it seems to work ok. Could it be a bug?

Is it still possible to use two ports in the group node for the collapsed-nodes-links? because I have two logical types of links (input/output), and I’d like the option to seperate them into two ports. Is it doable?

You haven’t specified the FromSpot and ToSpot attached property values for any of the ports – i.e. the FrameworkElements that you have declared as ports by setting the PortId attached property.

But it’s odd that it would work without layout animation. Maybe that’s a coincidence?

Did it, still no go… :(

<Rectangle go:SpotPanel.Spot=“0 0.5” go:Node.FromSpot=“LeftSide” go:Node.ToSpot=“LeftSide”

It just occurred to me that you haven’t specified a Width and a Height to any of the Rectangles – so it will be zero-sized by default. But maybe you have styled them, if this is WPF.

But for the default port, I wouldn’t create a separate element for it.
I would just use the root element, the SpotPanel.

Another problem I just noticed: you cannot share a layout by multiple Groups, or with the whole Diagram. So you should not use the StaticResource reference. Instead, define the layout inside the Group’s DataTemplate.

About the rectangles - I’ve tried either with or without styling…
When I just use the root element the ToSpot and FromSpot behave always “FromTop”, no matter what value I set. That is why I’ve tried using a seperated element… what can be the cause of that?

Regarding the group layout, I use the very useful x:Shared=“false” in the layout resource in order to use the same layout as the diagram:
<Layout:TreeLayout x:Key=“FlowCanvasDiagramLayout” Conditions=“All” Angle=“90” LayerSpacing=“35” TreeStyle=“Layered” x:Shared=“False”/>

Ah – links have their own Route.FromSpot and .ToSpot properties that take precedence over the spots that are on the ports. (This makes it easy to have one link connect differently at a port than other links at the same port.)

You may want to set TreeLayout.SetsPortSpot and .SetsChildPortSpot to false. The defaults are true so that tree layouts look good involving nodes with spots == “None” (the default).

I’m out of luck today… did what you offered:

<go:LinkPanel go:Part.Reshapable=“False” go:Part.Movable=“False” go:Node.Copyable=“False”
go:Part.LayoutId=“None” go:Node.LayerName=“DataFlow”>
<go:Route FromSpot=“LeftSide” ToSpot=“LeftSide”
Curve=“Bezier” Routing=“Normal”
ToShortLength=“5” FromShortLength=“1”>

<go:LinkShape x:Name=“arrowStroke” StrokeThickness=“1.5”
Stroke="{Binding Path=Link.IsSelected, Converter={StaticResource theSelectedBrushConverter}}"
ToolTip="{Binding Path=Data.Text}"/>

It still uses the top and buttom spots:

(All I need is the gray arrows to use the left side of the group)

Thanks again for all the help

Sorry, I guess I wasn’t clear.

I saw your definition of TreeLayout and noticed that you hadn’t set TreeLayout.SetsPortSpot and SetsChildPortSpot to false.

You don’t need to specify the Route.FromSpot and ToSpot.
As long as TreeLayout.SetsPortSpot and SetsChildPortSpot are true, those values will just get re-set to what makes sense given the tree layout direction.

I guess I wasn’t clear myself - I did try to set TreeLayout.SetsPortSpot and SetsChildPortSpot to false as you suggested, but the result is the same.

I’m wondering if there’s a problem with using Spots that are “Sides”.

Try setting the Group’s default port’s ToSpot=“TopLeft” and FromSpot=“BottomLeft”. Or other specific Spot values that seems suitable for your intended usage.

I guess i’m doing somthing else wrong. Tried several specific spots - seems to have no effect.

I tried my own example using both specific spots and “sides” such as “LeftSide” or “BottomSide” for the default port of a Group DataTemplate.

All worked as I expected, and as I think you would expect.

I’m still puzzled why everything works OK for you when layout animation is turned off.

If you disable automatic layout, requiring an explicit layout by calling Diagram.LayoutDiagram() from a Button or other command, does it route as you would expect?

It works OK with the animation turned of only when I have an explicit element as a default port. When using the node’s root element as the default port, both animation states are not working the same.

When I disable the auto-layout and call LayoutDiagram(), it routs unexpectedly:

After I expand/collapse the group - it routs the same as before.

Have you tried having the gray links not participate in the layout? Try setting their go:Part.LayoutId=“None”.

Yes I did try that…

Are you developing for WPF or for Silverlight?
What four-part version number of the GoWPF or GoSilverlight DLL are you using?

I’m using WPF version