How to make coordinates adaptive

Developers
1

bpmn1
Open the flow chart through bpmnviewer, how to adapt the X, y coordinates to the current node, and avoid the situation that the flow chart is hidden,

Thanks

2

Not quite sure what you want to achieve, maybe you can describe a little more in detail?

Do you mean how to fit the canvas scroll to the viewport?

3

Generally speaking you may turn to the canvas component to fit your diagram to the current viewport (visible area):

bpmnJS.get('canvas').zoom('fit-viewport');

See also our viewer example that uses this approach.

4

I did, but it seemed not work
I refer to this link : Scale viewer(s) to match canvas size
here is my code:

const currentViewbox = this.bpmnViewer.get('canvas').viewbox()      
const widthWindow = window.outerWidth;      
const heightWindow = window.outerHeight;      
const elementMid = {        
x: widthWindow / 2,        
y: heightWindow / 2      
}     
 this.bpmnViewer.get('canvas').viewbox({       
 x: elementMid.x - currentViewbox.width / 2,       
 y: elementMid.y - currentViewbox.height / 2,       
 width: currentViewbox.width,        
height: currentViewbox.height     
 })      
const width = document.getElementById('canvas').offsetWidth      this.bpmnViewer.get('canvas').zoom(width / this.width)

I want to know why it doesn’t work

5

For further assistance, please share a CodeSandbox that reproduces your issue in a way that we can inspect it.