Change layout Direction Dynamically - GoJS 3.0

GoJS
1

How can I dynamically change the direction of the layout? I have an angular application and I used your sample application for goJS 3.0, which uses immer to update the chart. Here is my diagram:

// initialize diagram / templates
public initDiagram(): go.Diagram {
let myRouter = new AvoidsLinksRouter();
myRouter.epsilonDistance = 2; // increase

const $ = go.GraphObject.make;
this.dia = $(go.Diagram, {
  'clickCreatingTool.archetypeNodeData': { text: 'new node', color: 'lightblue' },
  'linkingTool.archetypeLinkData': { text: 'percent?', color: 'red', show: true, routing: go.Link.Orthogonal },
  // have mouse wheel events zoom in and out instead of scroll up and down
  "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
  "undoManager.isEnabled": true,
  layout:
    $(GenogramLayout,
      { direction: this.SOMEPROPERTY, layerSpacing: 30, columnSpacing: 10 }),
  model: $(go.GraphLinksModel,
    {
      nodeKeyProperty: 'key',
      linkToPortIdProperty: 'toPort',
      linkFromPortIdProperty: 'fromPort',
      linkKeyProperty: 'key' // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel
    }
  )
});
this.dia.routers.push(myRouter);
this.dia.commandHandler.archetypeGroupData = { key: 'group', isGroup: true, text: 'new Group' };

const makePort = (id: string, spot: go.Spot) => {
  return $(go.Shape, 'Circle',
    {
      opacity: .5,
      fill: 'gray', strokeWidth: 0, desiredSize: new go.Size(8, 8),
      portId: id, alignment: spot,
      fromLinkable: true, toLinkable: true
    }
  );
}

// define the Node template
this.dia.nodeTemplate =
  $(go.Node, 'Spot',
    {
      contextMenu:
        $('ContextMenu',
          $('ContextMenuButton',
            $(go.TextBlock, 'Group'),
            { click: (e, obj) => { e.diagram.commandHandler.groupSelection(); } },
            new go.Binding('visible', '',
              (o: any) => {
                return o.diagram.selection?.count > 1;
              }).ofObject())
        )
    },
    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
    $(go.Panel, 'Auto',
      $(go.Shape, { stroke: "black" },
        new go.Binding('fill', 'color', (c, panel) => {
          return c;
        }),
        new go.Binding("figure", 'shape', (c, panel) => {
          return c;
        }),

      ),
      $(go.TextBlock, {
        margin: 8, editable: true, maxSize: new go.Size(130, 60),
        maxLines: 4, overflow: go.TextBlock.OverflowEllipsis,
      },
        new go.Binding('text').makeTwoWay())
    ),
    // Ports
    makePort('t', go.Spot.TopCenter),
    makePort('l', go.Spot.Left),
    makePort('r', go.Spot.Right),
    makePort('b', go.Spot.BottomCenter)
  );

this.dia.linkTemplate =
  $(go.Link,
    {
      contextMenu:
        $('ContextMenu',
          $('ContextMenuButton',
            $(go.TextBlock, 'View Details'),
            {
              click: (e, obj) => {
                const contextmenu = obj.part;
                const linkData = contextmenu.data;
                this.state = produce(this.state, draft => {
                  draft.currentPanelType = PanelTypes.LinkDetails;
                  draft.linkData = linkData;
                  draft.skipsDiagramUpdate = true;
                });
              }
            }, new go.Binding('visible', '',
              (o: any) => {
                return o.diagram.selection?.count === 1;
              }).ofObject()
          ))
    },
    {
      routing: go.Routing.AvoidsNodes,
      curve: go.Curve.JumpOver, corner: 5,
      toShortLength: 4,
      relinkableFrom: true,
      relinkableTo: true,
      reshapable: true,
      resegmentable: true,
    },
    $(go.Shape,
      new go.Binding('stroke', 'color', (c, panel) => {
        return c;
      }),
      new go.Binding('strokeDashArray', 'strokeDashArray', (c, panel) => {
        return c;
      }),
      new go.Binding('visible', 'show', (show, panel) => {
        return show;
      })
    ),
    $(go.Shape,  // the arrowhead
      new go.Binding("toArrow", "direction", (dir: string) => {
        return dir === "up" ? "Standard" : "";
      }),
      new go.Binding('fill', 'color', (c, panel) => {
        return c;
      })
    ),
    $(go.Shape,  // the arrowhead
      new go.Binding("fromArrow", "direction", (dir: string) => {
        return dir === "down" ? "Backward" : "";
      }),
      new go.Binding('fill', 'color', (c, panel) => {
        return c;
      })
    ),
    $(go.TextBlock,
      new go.Binding("text", "text"),
      new go.Binding('visible', 'show', (show, panel) => {
        return show;
      })),
  );

this.dia.groupTemplate =
  $(go.Group, "Spot",
    { ungroupable: true },
    $(go.Panel, "Auto",

      $(go.Placeholder,    // represents the area of member parts
        { padding: 20 })
    ),
    $(go.TextBlock,
      {
        alignment: go.Spot.Top,  // place the text at the top
        font: "Bold 12pt Sans-Serif",
        isMultiline: true,  // don't allow newlines in text
        editable: true,  // allow in-place editing by user,
        margin: 20
      },
      new go.Binding("text").makeTwoWay()  // bind TextBlock.text to Group.data.name
    ),
  );
return this.dia;

}

2

There are two obvious choices. Either choice requires making the change(s) within a transaction – either calling startTransaction and commitTransaction or just calling a function passed to commit.

You can either replace the Diagram.layout with a new GenogramLayout that has the properties that you want, or you can just set the properties that you want on the existing value of Diagram.layout. So perhaps something like:

myDiagram.commit(diag => diag.layout.direction = this.SOMEPROPERTY);

where I assume the value of SOMEPROPERTY has changed.