Arrange nodes vertically or horizontally in groups based on dynamic nodearray JSON

GoJS
1

Here is my group layout code.

myDiagram.groupTemplate =
$(go.Group, “Auto”,

  new go.Binding("layout", "lyt"),

  $(go.Panel, "Auto",

    $(go.Shape, "Rectangle",  // surrounds the Placeholder
      { 
        fill: "rgba(128,128,128,0.33)" 
      },
      new go.Binding("desiredSize", "size", go.Size.parse),
      ),
    $(go.Placeholder,
    {alignment: go.Spot.Center})  // with some extra padding around them

  ),
 {contextMenu:nodeMenu},
 {
      contextMenu:
        $(go.Adornment, "Vertical",
          new go.Binding("itemArray", "commands"),
          {
            itemTemplate:
              $("ContextMenuButton",
                $(go.TextBlock, new go.Binding("text")),
                {
                  click: function(e, button) {
                    var cmd = button.data;
                    var nodedata = button.part.adornedPart.data;
                    console.log("On " + cmd.text + ": " + cmd.action);
                  }
                }
              )
          }
        )
    }
 
);

here is my nodearray

“nodeDataArray”: [
{
“key”: “main”,
“name”: “MainShelf”,
“size”: “600 600”,
“lyt”:$(go.GridLayout, { alignment: go.GridLayout.Position }),
“isGroup”: true
},
{
“key”: “slot1”,
“name”: “Slot1”,
“lyt”:$(go.GridLayout, { wrappingColumn: 1, alignment: go.GridLayout.Position}),
“size”: “120 250”,
“cellwidth”:150,
“cellheight”:450,
“color”:“lightgrey”,
“isGroup”: true,
“group”: “main”,
“commands”: [
{ “text”: “Add Card”, “action”: “addCard”},
{ “text”: “Add Slot”, “action”: “add Slot”}
]
},
{
“key”: “slot2”,
“name”: “Slot2”,
“size”: “120 250”,
“lyt”:$(go.GridLayout, { wrappingColumn: 1, alignment: go.GridLayout.Position}),
“color”:“lightgrey”,
“cellwidth”:200,
“cellheight”:450,
“isGroup”: true,
“group”: “main”,
“commands”: [
{ “text”: “Add Card”, “action”: “addCard” },
{ “text”: “Add Port”, “action”: “addPort” }
]
},
{
“key”: “card2”,
“size”: “100 100”,
“color”: “lightgrey”,
“group”: “slot1”,
“lyt”:$(go.GridLayout, { wrappingColumn: 1 }),
“name”:“Card2”,
“isGroup”:true,
“commands”: [
{ “text”: “Add Port”, “action”: “addPort” },
{ “text”: “Add Link”, “action”: “addLink” }
]
},
{
“key”: “card3”,
“size”: “100 100”,
“color”: “lightgrey”,
“group”: “slot1”,
“lyt”:$(go.GridLayout, { wrappingColumn: 1 }),
“name”:“Card3”,
“isGroup”:true,
“commands”: [
{ “text”: “Add Port”, “action”: “addPort” },
{ “text”: “Add Link”, “action”: “addLink” }
]
},
{
“key”: “innerslot”,
“name”: “InnerSlot1”,
“size”: “30 30”,
“isGroup”: true,
“group”: “card3”
},
{
“key”: “innerslot2”,
“name”: “InnerSlot3”,
“size”: “30 30”,
“isGroup”: true,
“group”: “card3”
},

I am passing complete layout from node array to make it dynamic.

2

I am new bee in GoJs. Trying to understand layouts and alignment. Basically I want to display a network diagram of varying nodes and changing orientation.

3

That could work. But one significant downside from using:

    new go.Binding("layout", "lyt"),

is that the value of data.lyt must be an instance of Layout. Such objects cannot be serialized/deserialized to/from JSON-formatted text. At least, not without a lot of work. If you don’t need to serialize your Model to text (whether GoJS-schema JSON, or some other JSON, or even XML), or if you are prepared to do all that extra work, that’s OK.

But if you do want to call Model.toJson and Model.fromJson, you will need to change the value of data.lyt to be some simple object with a few simple properties. Then your Binding can use a conversion function the creates and returns a new layout given that simple description of the layout parameters that are stored in the value of data.lyt.
https://gojs.net/latest/intro/dataBinding.html#ConversionFunctions

4

Nice clarification. I have a question, In data.lyt I will pass simple Object with Properties like (arrangementHorizontal or arrangementVertical).

I know TreeLayout can solve my problem with its arrangement property but problem is I can’t use direct binding from node data in TreeLayout.

So what I am thinking is from conversion function I will return TreeLayout based on arrangment passed from simple Object. Is my approach correct?

5

Yes, that is right – only GraphObject (and thus its subclasses) and RowColumnDefinition support data binding.

Since one cannot bind properties such as PathFigure.startX or Brush.colorStops or TreeLayout.arrangement, you have to depend on a binding converter to generate what you need.

6

Yeah, It should work. Let me give a try.

7

It worked as expected. Thanks a lot.

8

6 posts were split to a new topic: Which layout should I use in a group?