Automatic nodes relocation is not working

GoJS
1

This is my diagram and nodes.

image
image862×378 27.7 KB

and sharing the node template for this diagram.

$$(go.Panel, 'Spot',
  $$(go.Panel, "Horizontal",
    $$(go.Panel, 'Spot',
      $$(go.Panel, 'Vertical', {
          name: 'hexagon_panel'
        },
        $$(go.Panel, 'Spot',
          $$(go.Shape, 'Hexagon', {
              name: 'hexagon_shape',
              width: 45,
              height: 45,
              alignment: go.Spot.BottomCenter,
              alignmentFocus: go.Spot.BottomCenter,
              portId: 'hexagon_shape_port',
              fromLinkable: true,
              fromSpot: go.Spot.BottomCenter,
            }
          )
        ),
        $$(go.Panel, 'Spot', {
            name: 'hexagon_text_panel'
          },
          $$(go.TextBlock, {
              name: 'hexagon_text',
              verticalAlignment: go.Spot.Center,
              width: 100,
              textAlign: 'center',
              shadowVisible: false,
              wrap: go.TextBlock.WrapFit
            }
          ),
          new go.Binding('visible', 'abc')
        )
      ),
      $$(go.Panel, 'Spot'),
      new go.Binding('visible', 'xyz')
    ),
    $$(go.Panel, 'Spot', {
        alignment: go.Spot.Top
      },
      $$(go.Shape, 'RoundedRectangle', {
          name: 'rect_primary',
          portId: 'default_port',
          fromLinkable: true,
          toLinkable: true,
          toLinkableDuplicates: true,
          fromLinkableDuplicates: true,
          pickable: true,
          isActionable: true
        }
      )
    )
  )
)

Now, I have this code that automatically relocates all the nodes.

myDiagram.layout = $(go.LayeredDigraphLayout, {
  setsPortSpots: false,
  layerSpacing: 200, // spacing between parent and child [Horizontal]
  columnSpacing: 70, // spacing between siblings [Vertical]

  // to fix the placement of setup node which is not connected to the main tree
  layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource
})

this code works perfectly in the above case.

but when hexagon_text_panel is visible, then this automatic relocation overlaps the links.
Converting this:

image
image862×378 30.4 KB

to this:

image
image862×378 30.6 KB

I am not sure, why these links cross only when the text panel is visible.

2

If a node changes size, by default the layout will be invalidated and then performed again. But I cannot tell what it is that you changed between the last two screenshots to get that layout. That red hexagon shape is visible both before and after.

It might be easier if you renamed “default_port” to the empty string, “”. That way you won’t have to specify that port identifier everywhere – the empty string is the default port identifier.

Do you get different results if you set LayeredDigraphLayout.alignOption, as we now recommend?

Separate comment: each “Spot” (or “Auto”) Panel should have at least two elements. It appears that you have a lot of unneeded “Spot” Panels, some with just one element, and one with zero elements. Remove them from your node template. That will make your template easier to understand and your diagram smaller and faster too.

3

If a node changes size, by default the layout will be invalidated and then performed again. But I cannot tell what it is that you changed between the last two screenshots to get that layout. That red hexagon shape is visible both before and after.

I have a function that relocates all the nodes. and it contains this code.

myDiagram.layout = $(go.LayeredDigraphLayout, {
  setsPortSpots: false,
  layerSpacing: 200, // spacing between parent and child [Horizontal]
  columnSpacing: 70, // spacing between siblings [Vertical]

  // to fix the placement of setup node which is not connected to the main tree
  layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource
})

In the second last screenshot, I dragged the nodes and created this diagram.
In the last screenshot, I ran the above code. and the links started crossing.

It might be easier if you renamed “default_port” to the empty string, “”. That way you won’t have to specify that port identifier everywhere – the empty string is the default port identifier.

Thanks for the suggestion. We have different portIds, and because of the complex structure and to maintain readability, we have “default_port”.

Do you get different results if you set LayeredDigraphLayout.alignOption, as we now recommend?

Yes, I tried those options.

4

Thanks for the additional information. I can reproduce the problem, which seems to be that LayeredDigraphLayout isn’t recognizing the relative positions of the ports correctly in order to reduce the number of link crossings. We’ll investigate, but I’m unsure how long it might take.

[EDIT] Ah, I bet it’s because the two ports that you have on your node have centers that have the same Y point in document coordinates. LayeredDigraphLayout is comparing centers instead of the appropriate edges, which is often better because the link point might vary depending on the shape or the Spot value.

So a work-around is to shift the hexagon shape down a tiny bit so that its center Y value is greater than that of the default_port.