Bpmn 3集成问题

Question

我目前正在尝试将bpmn嵌入到vue 3应用程序中。我可以用webpack中的原始装载机加载图表。不幸的是，还有其他一些问题。

1. The side bar on the left is not appearing
2. The canvas.zoom is not working. Diagram occupies only a small portion of the screen width and height.

MainPage.vue ( bpmn魔术驻留的文件)

<template>
  <div ref="container" id="canvas" style="height: 100%"/>
</template>

<script>
import pizzaDiagram from '../assets/pizza-diagram.bpmn';

export default {
  name: 'main-page',
  mounted() {
    this.$nextTick(() => {
      const container = this.$refs.container;
      let modeler = this.$bpmnModeler;
      modeler.attachTo(container)

      modeler.options = {
        container,
        height: "100%",
        width: "100%"
      }

      modeler.importXML(pizzaDiagram).then((result) => {
        const {warnings} = result;
        console.log('success !', warnings);
        const canvas = modeler.get('canvas');
        canvas.zoom('fit-viewport')
      }).catch((err) => {
        const {warnings, message} = err;

        console.trace('something went wrong. what went wrong :', warnings, message)
      })
    })
  },

  data() {
    return {}
  }


}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
#canvas{
  height: 100%;
  width: 100%;
}
</style>

main.js (在该文件中，我在整个应用程序中注册了bpmn组件)

import { createApp } from 'vue'
import App from './App.vue'
import BpmnJS from 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js'
import BpmnModeler from "bpmn-js";
import BpmnViewer from "bpmn-js";

const app = createApp(App);
app.config.globalProperties.$bpmnViewer = new BpmnViewer();
app.config.globalProperties.$bpmnModeler = new BpmnModeler();
app.config.globalProperties.$bpmnInstance = new BpmnJS();


app.mount('#app')

Answer 1

我解决了这个问题。问题是，我在模板上使用了ref=container，然后将它传递给画布选项。当我使用`document.getElementById(“容器”)引用元素时，我能够让它正常工作。