Vue3中Bpmn.io自定义属性面板字段不显示问题求助

我在Vue3中尝试使用Bpmn.io Modeler及属性面板，完全按照Bpmn.io官方示例操作，但在Vue环境中无法正常工作（推测是Vue导致）。目前能看到自定义属性组，但组内完全为空。

以下是我的代码：

main.js #

import { createApp } from 'vue'
import App from './App.vue'

import '../node_modules/bpmn-js/dist/assets/bpmn-js.css'
import '../node_modules/bpmn-js/dist/assets/diagram-js.css'
import '../node_modules/bpmn-js/dist/assets/diagram-js.css'
import '../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import '../node_modules/bpmn-js-properties-panel/dist/assets/properties-panel.css'

createApp(App).mount('#app')

App.vue #

<template>
  <div>
    <div id="js-canvas"></div>
    <div id="js-properties-panel"></div>
  </div>
</template>

<script>
import BpmnModeler from "bpmn-js/lib/Modeler";
import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
} from "bpmn-js-properties-panel";
import magicPropertiesProviderModule from "./provider/magic/";
import magicModdleDescriptor from "./descriptors/magic";

export default {
  mounted() {
    const diagram = `
    <?xml version="1.0" encoding="UTF-8"?>
    <bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn">
      <bpmn2:process id="Process_1" isExecutable="false">
        <bpmn2:startEvent id="StartEvent_1"/>
      </bpmn2:process>
      <bpmndi:BPMNDiagram id="BPMNDiagram_1">
        <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
          <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
            <dc:Bounds height="36.0" width="36.0" x="412.0" y="240.0"/>
          </bpmndi:BPMNShape>
        </bpmndi:BPMNPlane>
      </bpmndi:BPMNDiagram>
    </bpmn2:definitions>
    `;
    const bpmnModeler = new BpmnModeler({
      container: "#js-canvas",
      propertiesPanel: {
        parent: "#js-properties-panel",
      },
      additionalModules: [
        BpmnPropertiesPanelModule,
        BpmnPropertiesProviderModule,
        magicPropertiesProviderModule,
      ],
      moddleExtensions: {
        magic: magicModdleDescriptor,
      },
    });

    bpmnModeler.importXML(diagram);
  },
};
</script>

出现自定义属性组为空的情况，大概率是以下几个原因导致：

• 自定义属性提供者模块未正确导出
  检查./provider/magic/index.js是否按规范导出模块，官方示例中需导出包含propertiesProvider的对象：

  import MagicPropertiesProvider from './MagicPropertiesProvider';
  
  export default {
    __init__: [ 'propertiesProvider' ],
    propertiesProvider: [ 'type', MagicPropertiesProvider ]
  };
  

• 属性组未关联目标BPMN元素
  确认MagicPropertiesProvider中定义的字段是否指定了适用的元素类型，比如针对StartEvent配置：

  groups: [
    {
      id: 'magic',
      label: 'Magic',
      component: MagicPropertiesGroup,
      entries: [
        {
          id: 'magic-spell',
          label: 'Spell',
          modelProperty: 'spell',
          moddleElement: 'magic:Spell',
          elementTypes: [
            'bpmn:StartEvent',
            'bpmn:Task'
          ]
        }
      ]
    }
  ]
  

• Moddle描述符定义不完整
  检查./descriptors/magic.json是否正确定义扩展属性结构：

  {
    "name": "Magic",
    "prefix": "magic",
    "uri": "http://magic.io/bpmn",
    "xml": {
      "tagAlias": "lowerCase"
    },
    "associations": [],
    "types": [
      {
        "name": "Spell",
        "extends": [ "bpmn:BaseElement" ],
        "properties": [
          {
            "name": "spell",
            "isAttr": true,
            "type": "String"
          }
        ]
      }
    ]
  }
  

• Vue DOM挂载时机问题
  可通过nextTick确保容器元素渲染完成后再初始化Modeler：

  import { nextTick } from 'vue';
  
  export default {
    async mounted() {
      await nextTick();
      // 初始化bpmnModeler的代码放在这里
    }
  };
  

• 依赖版本不兼容
  检查bpmn-js与bpmn-js-properties-panel版本是否匹配，建议使用官方示例指定的版本组合，避免版本冲突导致模块加载异常。

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