How to center the BPMN graph in the viewer？

[buzhanhua]

Hello, there are some problems with my BPMN after using the following methods.

viewer.get(‘canvas’).zoom(‘fit-viewport’);

In this way, the BPMN diagram can indeed be rendered entirely in the container.
But the BPMN is too far to the left. How can we make the BPMN diagram in the container center left and right?

I haven’t found a way for a long time. I really need help. Thank you very much.

Answer

We created a codesandbox which contains a solution. Check it out at center-and-fitviewport - CodeSandbox

[philippfromme]

But the BPMN is too far to the left.

How far is too far? Screenshots would help a lot.

[buzhanhua]

It’s not a matter of how far.What matters is how I can center the BPMN diagram.I mean the left-right one.t’s not like this：
viewer.get(‘canvas’).zoom(‘fit-viewport’);
Thank you for your reply。

[cjdxx]

this.modeler.get(‘canvas’).zoom(‘fit-viewport’, ‘auto’);

[cjdxx]

[cjdxx]

node_module/diagram-js/lib/core/Canvas.js 860 lines

[buzhanhua]

Thank you very much. I solved it.

[Mr_Bac0n]

How did you solve it? The solution above is not working for me.
In the picture you see that the viewport is “matrix(1 0 0 1 0 0)”, but it should be “matrix(1,0,0,1,51,-51)”.

[Niklas_Kiefer]

Please do not necrobump old topics. Instead link to this thread from new topic

[barmac]

Hi,

as this thread gets multiple visitors and it seems no right answer has been provided, I created a codesandbox with a robust solution to the problem. This uses canvas.viewbox and canvas.zoom APIs:

/**
 * Center and fit viewbox around diagram.
 * 
 * @param { import('bpmn-js/lib/Modeler') } modeler
 */
function centerAndFitViewport(modeler) {
  const canvas = modeler.get("canvas");

  const { inner } = canvas.viewbox();

  const center = {
    x: inner.x + inner.width / 2,
    y: inner.y + inner.height / 2
  };

  canvas.zoom("fit-viewport", center);
}