Greetings
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.
- The side bar on the left is not appearing
- The
canvas.zoomis 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')
thanks for the help in advance