bpmn io vue 3 集成问题

Question

Im currently trying to embed bpmn io in a vue 3 application. Im able to load the diagram using the raw loader in webpack. Unfortunately there are some other issues.

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 (file where bpmn magic resides)

<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 (file where i register my bpmn components for general use app-wide)

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

I was able to solve this. The problem was that i was using the ref=container on the template and then passing it to the canvas options. When i used `document.getElementById("container") to refer to the element i was able to get it to work.