Angular嵌入BPMN Modeler加载异常：滚动后才显示问题求助

问题现象 #

• 页面加载完成后，BPMN模型器未显示，但属性面板正常可见
• 轻微滚动页面后，模型器突然显示，同时控制台抛出错误：

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

排查结果 #

初始化时模型器的viewport元素transform矩阵被设置为NaN值：

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

滚动页面后矩阵被更新为正确值，模型器随之正常显示。

相关代码 #

TypeScript初始化代码 #

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');

HTML结构 #

<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"

解决思路 #

1. 确保容器尺寸有效：Angular中若容器是动态渲染（如ngIf控制显示、路由切换后加载），初始化时容器宽高可能为0，导致BPMN计算transform矩阵出现NaN。可在ngAfterViewInit钩子中延迟执行初始化，或使用MutationObserver监听容器尺寸变化，确认尺寸稳定后再挂载模型器。
2. 手动触发视图校准：初始化完成后手动调用BPMN的视图适配方法，强制更新矩阵：

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

也可触发全局resize事件，触发模型器重新计算：

window.dispatchEvent(new Event('resize'));

3. 修正容器样式：给.canvas容器设置明确的宽高样式，比如：

.canvas {
  width: 100%;
  height: calc(100vh - 80px);
  min-height: 600px;
}

避免容器初始尺寸为0导致计算异常。
4. 延迟初始化时机：将模型器初始化逻辑从ngOnInit移至ngAfterViewInit，并添加几百毫秒延迟，确保DOM完全渲染：

ngAfterViewInit() {
  setTimeout(() => {
    this.bpmnJS.attachTo('#canvas');
    // 挂载属性面板...
  }, 300);
}

5. 排查模块冲突：逐步移除additionalModules中的第三方模块（如颜色选择器、模板相关模块），验证是否是特定模块导致的初始化计算错误。

内容的提问来源于stack exchange，提问作者Sandeep