vue3.0 bpmn-js + TS simple tutorial

foreword

bpmn.js is a BPMN2.0 rendering toolkit and web modeler, which enables the function of drawing flow charts to be completed at the front end.
Here I mainly record my process in developing bpmn.
Refer to the documentation of LinDaiDai_林呆早

combat

• install bpmn

npm install --save bpmn-js

• HTML

<template>
  <div class="designer-container">
    <div id="container" class="containerBox"></div> // 画布
    <div id="js-properties-panel" class="panel"></div> // 右边面板
  </div>
</template>

• JS

<script setup name="useProTableDetail">
import {
    
     markRaw, onMounted, ref } from "vue";
import BpmnModeler from "bpmn-js/lib/Modeler";
import {
    
    
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule
  // CamundaPlatformPropertiesProviderModule // 右边多余的属性
} from "bpmn-js-properties-panel";
import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda";

let containerEl = ref(null);
let bpmnModeler = ref(null);
onMounted(async () => {
    
    
  init();
});

/**
 * 初始化流程图
 */
let init = () => {
    
    
  containerEl.value = document.getElementById("container");
  // 加markRaw去除双向绑定作用域
  bpmnModeler.value = markRaw(
    new BpmnModeler({
    
    
      container: containerEl.value,
      //添加控制板
      propertiesPanel: {
    
    
        parent: "#js-properties-panel"
      },
      additionalModules: [
        // 右边的属性栏
        BpmnPropertiesPanelModule,
        BpmnPropertiesProviderModule,
      ],
      moddleExtensions: {
    
    
        camunda: camundaModdleDescriptor
      }
    })
  );
  bpmnModeler.value.createDiagram(() => {
    
     // 自适应大小
    bpmnModeler.value.get("canvas").zoom("fit-viewport");
  });
};
</script>

• CSS

<style lang="scss">
@import "./styleCss.scss";
@import "bpmn-js/dist/assets/diagram-js.css";
@import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
@import "bpmn-js-properties-panel/dist/assets/properties-panel.css"; // 右边工具栏样式
</style>

• styleCss.scss This is a style file written by myself

.processDrawBody {
    
    
  height: 100%;
  text-align: left;
}
.containerBox {
    
    
  width: 100%;
  flex: 1;
  overflow: hidden;
  display: flex;
}
.containerBox #container {
    
    
  height: 100%;
  border: 1px solid rgb(121, 121, 121);
}
.bpp-properties-panel [type="text"] {
    
    
  box-sizing: border-box;
}
.panel {
    
    
  width: 400px;
  position: absolute;
  top: 1px;
  right: 1px;
  height: 100%;
  overflow: auto;
}
/* 右下角logo */
.bjs-powered-by {
    
    
  display: none;
}
.designer-container {
    
    
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

The above is the vue3.0 bpmn-js + TS simple tutorial. Thank you for reading.
If you encounter other problems, you can discuss and study with me in private.
If it is helpful to you, please 点赞bookmark it. Thank you~!
Pay attention to favorite bloggers and will continue to update...