How to align the jointjs graph to the center / middle of the paper horizontally with the flow direction from top to bottom?

Question

I have a graph generated using JointJs and it uses Dagre Layout provided by jointjs. Currently, the graph gets aligned from Top To Bottom which is the correct way but then the complete graph gets aligned to the left of the paper.

I need the graph to be aligned in the middle of the Paper Horizontally.

Current configuration used is this:

joint.layout.DirectedGraph.layout(graph,
  {
    rankDir: "TB",
    marginX: 30,
    marginY: 30,
    clusterPadding: {
      top: 10,
      left: 10,
      right: 10,
      bottom: 10
    }
  }

I see that the option to make graph flow from Top to bottom is given rankDir: "TB" . Is there any similar option which can align it horizontally to the middle instead of left which is by default? or any other way which can do so.

Answer 1

After calling directedGraph.layout you can then use Paper class to center the diagram.

const paper = new joint.dia.Paper({
      height: 1000,
      width: 1000,
      ...
});

const paperArea = paper.getArea();
const contentArea = paper.getContentArea();

paper.translate((paperArea.width - contentArea.width) / 2, (paperArea.height - contentArea.height) / 2);

This will effectively center the diagram, although care should be taken to avoid the content being larger than the paper size.