BPMN Modeler Fix Zoom Location

Developers
1

Hi,

I am using the the modeler in my react application to display and edit files. I have windows that can be modified in size and I need zoom to adjust as a window resizes.

However, the viewport seems to move to the top left corner of the file when I zoom.

How do I center a zoom on the existing view of the SVG? I.E. Stay where I am in the viewer as the window is resizing / zooming?

Thanks in advance

2

I can’t see any questions in yours. What do you want to achieve and what is not working?

3

I have updated my post, thanks

4

Hi,
What version of bpmn-js and diagram-js are you using? I can not replicate the issue with the latest release (bpmn-js@8.8.2).
However, I found a similar issue with a development build yesterday. Does this PR look similar to what you are experiencing?

EDIT: might not be related at all, as the zoom is done via API and not from user interaction. Could you provide an example (codesandbox/gif/…) of what you are experiencing?

5

Yes, that is similar.

What we are doing is adjusting the viewbox dimensions, then adjusting the zoom according to the change in viewbox / container dimensions:

let height = currentY - this.divY;
      let oldHeight = myWindowY.style.height;

      myWindowY.style.height = height+"px";

      canvas = this.modelers[this.windowDragIndex].get('canvas');
      overlays = this.modelers[this.windowDragIndex].get('overlays');

      let cachedViewbox = canvas.viewbox(),
           cachedViewboxWidth = cachedViewbox.width,
           cachedViewboxHeight = cachedViewbox.height;



         canvas.viewbox({
         x: cachedViewboxWidth / 2,
         y: height / 2,
         width: cachedViewboxWidth,
         height: height
       });

       canvas.zoom(height / oldHeight);
6

This here seems odd to me. You are setting x and y relative to (0,0) instead of the current viewbox. You probably want to do something like

x: cachedViewbox.x + cachedViewboxWidth / 2,
y: cachedViewbox.y + height / 2,