Changing a property of the layout of a node

GoJS
1

Hi, I have a problem, I want to modify the GridLayout’s wrappingColumn property of a Node meniante a ternary, whose variable is changing in a click method. But it doesn’t seem to take the change. Any ideas? Thanks in advance.

     layout:
            $(go.GridLayout,
              {
                wrappingColumn: changeDirection ? Infinity : 1, alignment: go.GridLayout.Position,
                cellSize: new go.Size(1, 1), spacing: new go.Size(8, 8)
              })
2

What is your click function doing?

3

Just change the value of the variable

  const changeFirstSubGroupStyles = (e, obj) => { 
      changeDirection = !changeDirection
      console.log(changeDirection)
    }
4

What is changeDirection? If it is just a JavaScript variable, changing that variable will not have any effect on the GridLayout instance that is your Diagram.layout. Try evaluating myDiagram.layout.wrappingColumn to see that it hasn’t changed. And if nothing has changed, there is no reason for the layout to be performed again.

You need to actually change a real property of the layout.

5

Yes, changeDirection is a javascript variable. I will check the myDiagram.layout.wrappingColumn, but then, in what way could I update that wrappingColumn? To make it dynamic in each event click.

6

Set the property whenever you need to change its value.

7

But, to access that property, I use my variable diagram? What happens is that I can’t find a way to get to it to modify it.

8

You can’t get to your Diagram from your click handler?

If you aren’t talking about a GraphObject.click event handler, I can’t help you.

But if you are, then the first argument to the event handler is the InputEvent, and the e.diagram will give you the Diagram.

9

Yes, I use the GraphObject.click event handler, and in the function (the one above, the one that says changeFirstSubGroupStyles ) I receive the argument e. And yes, I can access e.diagram, but my doubt is how to modify the template layout from there, using that e.diagram

10 
  {
    click: function(e, obj) {
      var group = obj.part;
      e.diagram.commit(function (d) {
         group.layout.wrappingColumn = ...;
      });
    }
  }
11

Great, that works for me, but I have another question. If in that click event I wanted to modify the layout of the child groups that have that main group, would there be a way to do that? I mean, when you click, you modify the layout of both the main group and the interns.

12

Sure, you can do that.

13

I’ve been testing it this way, and it doesn’t find the wrapping column property of the subgroups…

const changeSubGroupColumn = (e, obj) => {
    this.diagram.commit(d => {

        let contextmenu = obj.part;
        let mainGroup = contextmenu.data; 
        let subGroups = [];

        d.model.nodeDataArray.forEach(group => {
          if(mainGroup.key == group.group) {
            subGroups.push(group);
          }
        });

        subGroups.forEach(group => {
          if(group.layout.wrappingColumn == 1) {
            group.layout.wrappingColumn = Infinity;
          } else {
            group.layout.wrappingColumn = 1;
          }
        })

      });
    }
14

You might want to check that all of the group members that you find are actually Groups, not regular Nodes, and that they actually have Group.layouts that are instances of GridLayout.

It appears that you are working with model data rather than with diagram nodes. Call Diagram.findNodeForData. Or just operate on Nodes rather than model data objects.

15

I use the findNodeForData to get them and modify the properties and it worked perfectly. Thanks Walter