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
I can’t see any questions in yours. What do you want to achieve and what is not working?
I have updated my post, thanks
What version of bpmn-js and diagram-js are you using? I can not replicate the issue with the latest release (email@example.com).
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?
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;
x: cachedViewboxWidth / 2,
y: height / 2,
canvas.zoom(height / oldHeight);
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,