How to center the BPMN graph in the viewer?

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

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

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。

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

2 Likes

image

1 Like

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

Thank you very much. I solved it.

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)”.

test

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

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);
}
2 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.