Hello,

we use the LayeredLayout to display a Corporate Structure Diagram. The basics are working great but I have some questions:

1. How can I order nodes horizontaly in a level?

2. How can I have all the links that have the same destination overlay each other? If multiple nodes have a link to the same node the links should overlay each other.

3. How can I get the triangle to contain it's text? Either have the text break or the triangle to be bigger.

export class AppComponent {
  @ViewChild(DiagramView) diagramViewControl!: DiagramView;
  diagram!: Diagramming.Diagram;

  public ngOnInit() {
    this.diagram = new Diagramming.Diagram();
    this.diagram.bounds = new Drawing.Rect(0, 0, 1000, 1000);
    this.diagram.linkRouter = new Diagramming.GridRouter();
  }

  onLoadClick(): void {
    this.diagram.clearAll();
    this.buildDiagram2(companies);
  }

  buildDiagram2(graph: any): void {
    this.diagram.showGrid = true;

    var nodeMap = [];

    const entities = graph.entities.sort((a: any, b: any) => {
      if (a.tier != b.tier) return a.tier - b.tier;
      return a.order - b.order;
    });

    for (var entity of entities) {

      const node = new Diagramming.ShapeNode(this.diagram);
      nodeMap[entity.id] = node;
      node.text = entity.name;
      node.id = entity.id;
      node.tag = entity.tier;
      node.bounds = new Rect(0, 0, 30, 30);
      node.anchorPattern = Diagramming.AnchorPattern.topInBottomOut;

      if (entity.shape == "oval") {
        node.shape = "Ellipse";
        node.brush = entity.isMain ? "#0070a8" : "#f3fafe";
        node.pen = "#0070a8"
        node.bounds = new Rect(0, 0, 53, 26)
      } else if (entity.shape == "triangle") {
        node.shape = "Triangle";
        node.brush = "#ccc";
        node.bounds = new Rect(0, 0, 53, 33);
      } else {
        node.shape = "RoundRect";
        node.brush = entity.isMain ? "#0070a8" : "#f3fafe";
        node.pen = "#0070a8"
        node.bounds = new Rect(0, 0, 30, 26);
      }
      //node.resizeToFitText(Diagramming.FitSize.KeepRatio);
      this.diagram.addItem(node);
    }

    const links = graph.relationships;
    for (const link of links) {
      const l = new Diagramming.DiagramLink(this.diagram, nodeMap[link.from], nodeMap[link.to]);
      l.headShape = Diagramming.ArrowHeads.None();
      l.segmentCount = 2;
      this.diagram.addItem(l);
    }
	const layout = new Graphs.LayeredLayout();
	layout.direction = Graphs.LayoutDirection.TopToBottom;
	layout.siftingRounds = 0;
	layout.nodeDistance = 8;
	layout.layerDistance = 12;
	layout.anchoring = Graphs.Anchoring.Reassign;

	this.diagram.arrange(layout);
  }
} 

Yes I mean a specifying a custom order or just order in the order the're added would be fine too.

The diagram looks like a tree but a node can have none, one or multiple parents and the same for children.

The router.avoidOverlaps didn't change the behavior.

I added a Screenshot of how it should loo, hope that helps

On older versions, you could adjust links' controlPoints coordinates after routing, to make sure horizontal segments' points are on same Y when they have same target node.

Regards,
Slavcho
Mindfusion

Thank you very much for the answers

At the moment we use the latest version of mindfusion since we're just testing I downloaded the dagram-starter-angular project and modified that. In the package.json we have: "@mindfusion/diagramming-angular": "latest".

The idea with changing the text-padding worked and I also changed the Shape to "Alternative".

But the ordering still doesn't work I changed the example to be smaller.

Regarding the TreeLayout, I tought it couldn't handle multiple parents?

const node = new Diagramming.ShapeNode(this.diagram);
nodeMap[entity.id] = node;
node.text = entity.name;
node.id = entity.id;
node.tag = `${entity.tier}-${entity.order ?? 1}`;


const l = new Diagramming.DiagramLink(this.diagram, nodeMap[link.from], nodeMap[link.to]);
l.headShape = Diagramming.ArrowHeads.None();
l.tag = li;
li++;
this.diagram.addItem(l);


const layout = new Graphs.LayeredLayout();
layout.direction = Graphs.LayoutDirection.TopToBottom;
layout.siftingRounds = 0;
layout.nodeDistance = 8;
layout.layerDistance = 12;
layout.anchoring = Graphs.Anchoring.Reassign;

this.diagram.arrange(layout);

this.diagram.nodes.sort((a:any, b:any) => {
const aP = a.tag.split("-");
const bP = b.tag.split("-");

if (aP[0] != bP[0]) return aP[0] - bP[0];
return aP[1] - bP[1];
});

this.diagram.links.sort((a:any, b:any) => {
return a.tag - b.tag;
}); 

{      "entities": [            {                  "id": "if_a",                  "order": 4,                  "name": "Investment Fund A",                  "jurisdiction": "Ontario",                  "shape": "triangle",                  "tier": 5            },            {                  "id": "h_b",                  "name": "Holding B",                  "order": 2,                  "jurisdiction": "Luxembourg",                  "shape": "oval",                  "highlight": true,                  "tier": 6,                  "isMain": true            },            {                  "id": "h_a",                  "name": "Holding A",                  "order": 1,                  "jurisdiction": "Spain",                  "shape": "oval",                  "tier": 6            },            {                  "id": "h_c",                  "name": "Holding C",                  "order": 3,                  "jurisdiction": "Spain",                  "shape": "oval",                  "tier": 6            },            {                  "id": "c_aa",                  "name": "Company AA",                  "order": 5,                  "jurisdiction": "Spain",                  "shape": "rectangle",                  "tier": 7            },            {                  "id": "c_bb",                  "name": "Company BB",                  "order": 6,                  "jurisdiction": "Spain",                  "shape": "rectangle",                  "tier": 8            },            {                  "id": "c_a",                  "name": "Company A",                  "order": 7,                  "jurisdiction": "Spain",                  "shape": "rectangle",                  "tax_group_spain": true,                  "tier": 9            },            {                  "id": "c_b",                  "name": "Company B",                  "order": 8,                  "jurisdiction": "Spain",                  "shape": "rectangle",                  "tax_group_spain": true,                  "tier": 9            },            {                  "id": "c_c",                  "name": "Company C",                  "order": 9,                  "jurisdiction": "Spain",                  "shape": "rectangle",                  "tax_group_spain": true,                  "tier": 9            },            {                  "id": "c_d",                  "name": "Company D",                  "order": 10,                  "jurisdiction": "Spain",                  "shape": "rectangle",                  "tax_group_spain": true,                  "tier": 9            }      ],      "relationships": [            {                  "from": "if_a",                  "to": "h_b",                  "type": "ownership",                  "stake_pct": 100            },            {                  "from": "h_b",                  "to": "c_aa",                  "type": "ownership",                  "stake_pct": 64.78            },            {                  "from": "h_a",                  "to": "c_aa",                  "type": "ownership",                  "stake_pct": 5.0            },            {                  "from": "h_c",                  "to": "c_aa",                  "type": "ownership",                  "stake_pct": 5.0            },            {                  "from": "c_aa",                  "to": "c_bb",                  "type": "ownership",                  "stake_pct": 100            },            {                  "from": "c_bb",                  "to": "c_a",                  "type": "ownership",                  "stake_pct": 99.9            },            {                  "from": "c_bb",                  "to": "c_b",                  "type": "ownership",                  "stake_pct": 89.82            },            {                  "from": "c_bb",                  "to": "c_c",                  "type": "ownership",                  "stake_pct": 89.82            },            {                  "from": "c_bb",                  "to": "c_d",                  "type": "ownership",                  "stake_pct": 89.82            }      ] }

Right, there's some first-in-first-out queueing involved starting from the start node and following link connectivity, and for second layer it would first queue the Holding B node. So the sorting idea would work only for nodes under same parent (when links are sorted) and for nodes without parent.

We could add some support for sorting layers using a custom comparer for next release if that's very important. Until then, you could also try sorting the graph layers yourself by replacing LayeredLayout.prototype.assignLayers with your own function that calls the original and sorts each layer. The original assignLayers ends with this code:

for (const [node, layer] of layering)
{
    node.layer = layer;
    this.layers[layer].push(node);
} 

So after calling the original, your replacement could loop over the this.layers arrays and sort each one. The layer arrays contain Vertex objects, whose Vertex.owner field points to respective DiagramNode. Something like this assuming you have layer-wide order and not just when under same parent:

// untested code
const originalAssignLayers = Graphs.LayeredLayout.prototype.assignLayers;

Graphs.LayeredLayout.prototype.assignLayers = function () {

    // call the original method first
    originalAssignLayers.call(this);

    // sort each layer afterwards
    for (let i = 0; i < this.layers.length; i++) {
        const layer = this.layers[i];

        layer.sort(function (v1, v2) {
            // v1 and v2 are Vertex objects
            const n1 = v1.owner; // DiagramNode
            const n2 = v2.owner; // DiagramNode

            // compareNodes should return -1 / 0 / 1
            return compareNodes(n1, n2);
        });
    }
};

// implements this according to your order fields
function compareNodes(nodeA, nodeB) {
    ...
} 

Regards,
Slavcho
Mindfusion

You'd still need to run this with siftingRounds = 0, as the node-swapping iterations run after that assignLayers call.

Regards,
Slavcho
Mindfusion

LayeredLayout.arrange looks like this, and siftingRounds is actually only used in the swapPairs function, but minimizeCrossings changes node order too:

this.assignLayers();

// set initial grid positions
...

// reduce crossings
this.minimizeCrossings();

// further reduce crossings through pair swap
this.swapPairs();
 

You could try replacing minimizeCrossings() call with a no-op by setting it to an empty function in prototype. However that's also where longer links are processed too (ones connecting nodes from non-adjacent layers), so you might see such links remaining unsorted at the end of layers if your diagrams have them (seems not in screenshots above).

Regards,
Slavcho
Mindfusion

Hi,

Try removing GridRouter and setting avoidOverlaps = false on default one. If that does not help, you could loop over links to adjust control points:

const distance = 10;

for (var link of diagram.links)
{
    let cps = link.controlPoints;
    if (cps.length == 4)
    {
        // check if the middle segment of the link is horizontal
        if (cps[1].y == cps[2].y)
        {
            // origin above destination
            if (link.origin.bounds.y < link.destination.bounds.y)
            {
                let newY = link.destination.bounds.y - distance;
                cps[1].y = newY;
                cps[2].y = newY;
            }
            else
            {
                let newY = link.origin.bounds.y - distance;
                cps[1].y = newY;
                cps[2].y = newY;
            }
            link.updateFromPoints();
        }
    }
} 

Regards,
Slavcho
Mindfusion