Scale viewer(s) to match canvas size

[kubica]

I finally found a solution (or more like a workaround):

(1) Center the view to the middle of the diagram (solution retrieved from Centering/zooming view to a specific element). this.width holds the width of the diagram and this.height the height of it:

const currentViewbox = bpmnViewer.get('canvas').viewbox()

const elementMid = {
    x: this.width / 2,
    y: this.height / 2
}

bpmnViewer.get('canvas').viewbox({
    x: elementMid.x - currentViewbox.width / 2,
    y: elementMid.y - currentViewbox.height / 2,
    width: currentViewbox.width,
    height: currentViewbox.height
})

(2) Zoom diagram to match the container using the solution (2) from above:

// "width" holds the width of the canvas element
// "this.width" holds the width the imported bpmn-diagram
const width = document.getElementById(id).offsetWidth
bpmnViewer.get('canvas').zoom(width / this.width)

Due to centering the diagram in the first step, it will still be centered afterwards, resulting in the desired behavior: