Canvas zoom throws exception on firefox

Developers Modeler
1

Hi,
I am using bpmn-js (v 7.4.1)
I am using this code to fit diagram zoom
this.modeler.get("canvas").zoom("fit-viewport");
This works correctly on Chrome, but throws this exception on Firefox

Uncaught TypeError: SVGMatrix.scale: Argument 1 is not a finite floating-point value.
    viewbox Canvas.js:825
    _changeViewbox Canvas.js:713
    viewbox Canvas.js:821
    _fitViewport Canvas.js:949
    zoom Canvas.js:883
    registerModelerEventListeners workflow-editor.component.ts:288
    loadDiagram workflow-editor.component.ts:232
    configureWidget workflow-editor.component.ts:188

Any idea how can I fix this error on Firefox ?

2

It’s hard to help you without knowing the context. For further assistance, please share a CodeSandbox that reproduces your issue in a way that we can inspect it.

3

Have you attached this bpmn-js instance to the DOM? If not, this is the error you get.

4

Please clarify more what you mean ?

5

Are you using some kind of UI library like React? When creating a bpmn-js instance make sure it’s actually attached to the DOM before using any of its functionality. If you’re just creating it attached to a DOM element that you created but didn’t actually append to the DOM things won’t work.

6

I am using Angular actually, this is my source code (summarized) and it works correctly with Chrome but on Firefox it throws the exception

this.modeler = new BpmnModeler(....);
this.modeler.attachTo(this.canvas.nativeElement);
this.modeler.importXML(....);
this.modeler.get("canvas").zoom("fit-viewport");
7

importXML is asynchronous. You need to wait for the import to finish to call zoom:

await this.modeler.importXML(...);

// We're ready
this.modeler.get("canvas").zoom("fit-viewport");
1 Like
8

I used
this.modeler.importXML(..).then(() => this.modeler.get("canvas").zoom("fit-viewport"))
and make other code ordering and this could solve the problem
Thank you