Want to apply multiple layouts

GoJS
1

I am applying multiple layouts to a GoJS diagram using the context menu.

  • When applying ForceDirectedLayout and expanding a group node, overlapping occurs with the group node. In some cases, non-child nodes appear inside the boundary of the group node.

Question:
How can I achieve the desired behavior with ForceDirectedLayout—ensuring that group nodes do not overlap with other nodes and that only child nodes are contained within the group boundaries?

2

In general there is no way to guarantee that any ForceDirectedLayout’s results will avoid any node overlaps. That’s because if there are a lot of nodes densely connected by links, there might not be enough room to allow every node to be moved far enough apart to avoid any overlaps.

But in simpler cases that shouldn’t be a problem. Consider: Radial & ForceDirected Layout with nested Groups
That has the links connecting to the member nodes of each group.

Or consider: Radial & ForceDirected Layout That doesn’t have any groups, but you can toggle the size of each node as if it were a group. That sample has the links connecting with the expanding/collapsing nodes.

3

Do you have any code samples for the following?

4

All of our samples and extras are self-contained single page apps with the complete code right there in the page. (Well, extensions have their source code in a separate file.) Invoke your browser’s View Page Source command to see everything.

5

I applied a radial layout to the context menu button. I want to avoid overlapping issues with the nodes. I have attached the code and UI for your reference.

Code:

class RadialForceDirectedLayout extends go.ForceDirectedLayout {
  radial: RadialLayout;
  constructor() {
    super();
    this.radial = new RadialLayout();
    this.radial.layerThickness = 100;
  }
}

let radialLayout = (e: any, obj: any) => {
const layout1 = new RadialForceDirectedLayout();
const layout2 = new RadialForceDirectedLayout();

    [this.myDiagram, this.myLocalDiagram].forEach((diagram, index) => {
      diagram.startTransaction("Radial Layout");
      diagram.layout = index === 0 ? layout1 : layout2;

      diagram.nodes.each((node: go.Node) => {
        if (node instanceof go.Group && node.isSubGraphExpanded && node.category === "PACKAGE") {
          if (!(node.layout instanceof RadialForceDirectedLayout)) {
            const groupLayout = new RadialForceDirectedLayout();
            node.layout = groupLayout;
          }
        }
      });

      diagram.layout.invalidateLayout();
      diagram.commitTransaction("Radial Layout");
    });
  }

UI

image
image740×280 36.4 KB

6

Try increasing the electrical charge for nodes, perticularly for those that are large (i.e. groups). Override ForceDirectedLayout.electricalCharge. I haven’t tried this, but maybe something like:

electricalCharge(v) {
  const c = super.electricalCharge(v);
  if (v.node instanceof go.Group) return c*4;
  return c;
}

Fiddle with the actual charge values used until you get the results that you like.

Remember, as I said above, there’s never a guarantee that there won’t be any overlapping nodes.

7

Electrical charge works for normal nodes, but when a group node is expanded, overlaps still occur between child, parent, and normal nodes in large diagrams.

image
image548×385 19 KB

8

Did you try experimenting with the values returned by that override?