Link-rendering bug when group is expanded

GoJS
1

i had reported a link-rendering bug when groups were being collapsed (Links to nodes in collapsed groups rendering improperly). testing with the new 1.7.21 version it seems there are still problems - this time occurring when a group is expanded. the stack of links should be connected to the Router (8) group at the top.

image.png888×854 93.4 KB

when collapsed the links are connected correctly:

image.png852×442 60.2 KB

2

i’m discovering more problems - not even with group templates but node templates too. in my cloud node template i am specifying fromSpot as go.Spot.RightSide yet when opening groups the link position changes to bizarre places on the node. this is with link fromSpot and toSpot explicitly defined to leftSide and rightSide as well.

image.png706×772 46.5 KB 

diagram.nodeTemplateMap.add("cloud",
	$(go.Node, "Auto", {
			selectable: false,
			isShadowed: true,
			shadowOffset: new go.Point(0,1),
			shadowBlur: 3,
			shadowColor: "rgba(0,0,0,0.34)",
			cursor: "pointer",
			doubleClick: function (e, tb)
			{
				FireEvent(tb.data.key, "doubleclick");
			}
		},

		$(go.Shape, "Circle", {
				fill: "white",
				strokeWidth: 0,
				fromSpot: go.Spot.RightSide,
				toSpot: go.Spot.LeftSide,
				portId: "",
				name: "SHAPE"},
				new go.Binding("fill", "expanded", function(expanded)
				{
					return expanded ? DISPLAY.hoverColor : "white";
				})),

		$(go.Picture, {
			source: "images/cloud.svg",
			scale: 2.5})
	)
);
3

If you temporarily replace all uses of LayeredDigraphLayout with another layout, such as TreeLayout, do you still have these problems? Of course nodes won’t be where you expect them to be positioned, but otherwise I’m hoping that it’s a problem with LayeredDigraphLayout and not with link routing.

Use something like $(go.TreeLayout, { isRouting: false }). Or maybe just try setting Layout.isRouting to false on your LayeredDigraphLayout.

4

actually we recently switched to a tree layout so this is happening with that. i tried isRouting: false with no improvements.

5

it looks like it keeps defaulting to top center or bottom center. is there something about tree view that is forcing this?

6

Yes, try setting TreeLayout.setsPortSpot and TreeLayout.setsChildPortSpot to false.

Similarly, there is the LayeredDigraphLayout.setsPortSpots property.

7

already set to false:

this.diagram.layout = $(go.TreeLayout,
{
	layerStyle: go.TreeLayout.LayerUniform,
	treeStyle: go.TreeLayout.StyleRootOnly,
	nodeSpacing: 5,
	alternateNodeSpacing: 5,
	layerSpacing: 100,
	alternateLayerSpacing: 50,
	alignment: go.TreeLayout.AlignmentCenterSubtrees,
	alternateAlignment: go.TreeLayout.AlignmentCenterSubtrees,
	setsChildPortSpot: false,
	alternateSetsChildPortSpot: false,
	setsPortSpot: false,
	alternateSetsPortSpot: false
});
8

Anyway, we can reproduce at least one of the problems, so we can work on this. Thanks for your patience.

9

it all seems related to group expanding / collapsing. it’s after performing those actions that the problems all happen.

10

Could you try the beta library that is at GoJS - Build Interactive Diagrams for the Web ? One way of doing so is to load the library from https://gojs.net/beta/release/go-debug.js. Thanks.

11

i just tried the beta (1.7.22). i’m not sure if anything has improved. the 2 problems i’ve encountered appear to still be there:

image.png970×374 46.4 KB

12

OK, we need some help in reproducing these problems.

13

email me

i will provide templates and a model that will hopefully reproduce the issues.