How can i horizontally and vertically center JointJS content within a full height/width Paper?

Question

I would like to know if its possible to ensure that any content within the Graph can remain centered, equivalent to the way flexbox handles it in css

.flex-container {
display: flex;
align-items: center;
justify-content: center;
}

As you can see in this example, when the Paper is full height and width I'm struggling to keep content centered automatically.

The number of items in the graph isn't pre-known, so if anyone knows how to achieve a flex like centered layout I'd love to know...

Answer 1

If you dont need to drag/interact with the elements/nodes, you could try this:

const paperArea = paper.getArea(); const contentArea = paper.getContentArea(); paper.translate((paperArea.width - contentArea.width) / 2, (paperArea.height - contentArea.height) / 2);