bpmn.io error: <g class="viewport" transform="matrix(NaN NaN NaN NaN NaN NaN)">

Question

I am trying to embed the bpmn modeler in an angular application. When the page loads, the modeler is missing, but the properties panel is visible.

When I make a gentle scroll on the page, the BPMN modeler suddenly shows up and an error is shown in the console:

Error: <g> attribute transform: Expected number, "matrix(1.79769313486231…".

Upon further inspection, this error is because the transform matrix is initialised with NaN like so

<g class="viewport" transform="matrix(NaN NaN NaN NaN NaN NaN)">

and when we scroll, it is filled with correct values and the modeler is shown.

This is how I have initiatialised the BPMN in my ts:

private bpmnJS: any = new BpmnModeler({
        additionalModules: [
            BpmnPropertiesPanelModule,
            BpmnPropertiesProviderModule,
            CloudElementTemplatesPropertiesProviderModule,
            ZeebePropertiesProviderModule,
            TemplateIconRendererModule,
            ZeebeBehaviorModule,
            CreateAppendAnythingModule,
            CreateAppendElementTemplatesModule,
            ElementTemplateChooserModule,
            BpmnColorPickerModule
        ],
        exporter: {
          name: 'connectors',
          version: '0.0.0'
        },
        keyboard: {
          bindTo: document
        },
        moddleExtensions: {
          zeebe: ZeebeModdle
        }
      });

---

this.bpmnJS.attachTo('#canvas')
const propertiesPanel = this.bpmnJS.get('propertiesPanel');
propertiesPanel.attachTo('#properties');

---

<div class="canvas-parent" >
    <div class="canvas" id="canvas"></div>
    <div class="properties" id="properties"></div>
</div>

---

"@bpmn-io/element-templates-icons-renderer": "^0.3.0",
"@bpmn-io/properties-panel": "^1.1.1",
"bpmn-js": "^11.1.1",
"bpmn-js-color-picker": "^0.5.0",
"bpmn-js-create-append-anything": "^0.1.0",
"bpmn-js-properties-panel": "^1.15.0",
"camunda-bpmn-js-behaviors": "^0.4.0",
"zeebe-bpmn-moddle": "^0.17.0"

any ideas?

Answer 1

I was able to fix the issue by commenting out this line:

 this.bpmnJS.on('import.done', ({ error }) => {
            if (!error) {
                // this.bpmnJS.get('canvas').zoom('fit-viewport'); <- this line is commented out to fix the issue
            }
        });