Group layout seems to be ignoring Layout properties

@lankaapura wrote:

Hi Walter,

I have a graph with LayeredDigraphLayout. And I have set parent of each leaf node to isGroup = true and group of each leaf node to leaf’s parent key. because I’m trying to set TreeLayout to all the leaf nodes. This is all works fine but I wasn’t able to set the aligment of the TreeLayout to AlignmentBottomRightBus. It’s just doesn’t work.

Is it possible to do like that? Or do I need to write a custom layout for that?

node data model:

{ "NodeId": 1, "NodeKey": "A1AEQ001", "Caption": "test", "Tooltip": "test", }

edge data model:
{ "EdgeId": 1, "ParentNodeId": 52, "ChildNodeId": 1, "Caption": "test", "Tooltip": "test", "ParentNodeKey": "I1BAL001", "ChildNodeKey": "A1AEQ001" }

code:

`    function init() {

  var $ = go.GraphObject.make;  // for conciseness in defining templates

  myDiagram = $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
    {
      layout: $(go.LayeredDigraphLayout,
        {
          direction: 90,
          layerSpacing: 25,
          columnSpacing: 5,
          setsPortSpots: false,
          cycleRemoveOption: go.LayeredDigraphLayout.CycleDepthFirst,
          initializeOption: go.LayeredDigraphLayout.LayerOptimalLinkLength,
          aggressiveOption: go.LayeredDigraphLayout.InitDepthFirstOut,
          packOption: 7,
          setsPortSpots: true
        })
    });

  // define a simple Node template
  myDiagram.nodeTemplate =
    $(go.Node, "Auto",  
      $(go.Shape, "RoundedRectangle", { strokeWidth: 0, fill: "white" },
        new go.Binding("fill", "BackgroundColour")),
      $(go.TextBlock,
        { margin: 8, font: "bold 14px sans-serif", stroke: '#333' },
        new go.Binding("text", "NodeKey"))
    );

  myDiagram.groupTemplate =
    $(go.Group, "Auto", 
      {
      //layout: $(OffsetLayout)
        layout: $(go.TreeLayout,
               { angle: 90, nodeSpacing: 110, layerSpacing: 130, alignment: go.TreeLayout.AlignmentBottomRightBus })
      },
      $(go.Shape, "RoundedRectangle", { strokeWidth: 0, fill: "white" },
        new go.Binding("fill", "BackgroundColour")),
      $(go.TextBlock,
        { margin: 8, font: "bold 14px sans-serif", stroke: '#333' }, 
        new go.Binding("text", "NodeKey"))
    );

  let groups = [];
  data.Nodes.forEach((x) => {

    if (!data.Edges.some(y => y.ParentNodeKey === x.NodeKey)) {
      x.Group = data.Edges.filter(y => y.ChildNodeKey === x.NodeKey)[0].ParentNodeKey;
      groups.push(x.Group);
    }
  });

  groups.forEach((x) => {

    data.Nodes.filter(y => y.NodeKey === x)[0]["isGroup"] = true;
  });


  myDiagram.model =
    $(go.GraphLinksModel,
      {
        nodeKeyProperty: "NodeKey",
        linkKeyProperty: "NodeKey",
        linkFromKeyProperty: "ParentNodeKey",
        linkToKeyProperty: "ChildNodeKey",
        nodeGroupKeyProperty: "Group",
        nodeDataArray: data.Nodes,
        linkDataArray: data.Edges,

      });

}`

output:

expected output for leaf nodes:

image.png214×574 11.6 KB

I was following the below thread to implement it.

Thanks in advance!

Posts: 1

Participants: 1

Read full topic