Use bpmn-flow chart preview in vue project

Recap

　　The above has achieved forward, backward, and import of node operations. Export and other operations, today to achieve "flow chart preview", and zoom in and out of the view

　　Premise: The project has installed bpmn , the installation can be seen in the previous article

Implementation points

　　bpmn provides two artifacts: Modeler and Viewer. Modeler has a node bar on the left and a property bar on the right. Click on the node to perform the corresponding operation. Viewer is "view" and the node cannot be changed. The two are independent of each other and can be based on actual needs. Introduce on demand

　　Drawing a flowchart: import BpmnModeler from 'bpmn-js / lib / Modeler';

　　Preview flowchart: import BpmnViewer from 'bpmn-js / lib / Viewer';

　　Code directly:

<template>
    <div class="container">
        <el-button type="primary" @click="previewTemp">预览</el-button>
        <el-button type="success" @click="handleZoom(1)">放大</el-button>
        <el-button type="warning" @click="handleZoom(-1)">缩小</el-button>
        <div class="chart-preview">
            <div style="clear: both;"></div>
            <div class="view-canvas">
                <div id="container"
                     v-bind:style="{width: 100 * scale + '%',height: 100 * scale + '%'}"
                ></div>
            </div>
        </div>
    </div>
</template>
<script>
  import jquery from 'jquery';
  import BpmnViewer from 'bpmn-js/lib/Viewer';


  export default {
    data() {
      return {
        containerEl: null,
        bpmnModeler: null ,
        scale: 1 ,
        // This variable is the data of the preview xml file. Because there are too many lines, it is attached to the attachment. When using it, you can reset the entire value of the attachment to currentCanvasXml. 
        currentCanvasXml: ''
      };
    },
    methods: {
      handleZoom(flag) {
        if (flag < 0 && this.scale <= 1) {
          return;
        }
        this.scale += flag;
        this.$nextTick(() => {
          this.bpmnModeler.get('canvas').zoom('fit-viewport');
        });
      },
      previewTemp() {
        this .containerEl = document.getElementById ('container' );
         // Avoid cache, clear 
        this every time this .bpmnModeler && this .bpmnModeler.destroy ();
         this .scale = 1 ;
         this .bpmnModeler = new BpmnViewer ({container: this .containerEl});
        const viewer = this.bpmnModeler;
        this.bpmnModeler.importXML(this.currentCanvasXml, (err) => {
          if (err) {
            console.error(err);
          } else {
             // Only realize the preview, the following two sentences of the core code are enough 
            const canvas = viewer.get ('canvas' );
            canvas.zoom ( 'fit-viewport' );
             // The following code is: Register the mouse hover event for the node 
            const eventBus = this .bpmnModeler.get ('eventBus' );
            const overlays = this.bpmnModeler.get('overlays');
            eventBus.on('element.hover', (e) => {
              const $overlayHtml = jquery(` <div class="tipBox">
                    Hello, I am the content in the suspension box
                    </div>`);
              overlays.add(e.element.id, {
                position: {top: e.element.height, left: 0},
                html: $overlayHtml
              });
            });
            eventBus.on('element.out', () => {
              overlays.clear();
            });
          //   End of registration suspension event 
          }
        });
      }
    }
  };
</script>
<style lang="scss">
    .container {
        .tipBox {
            width: 200px;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #ebeef5;
            padding: 12px;
        }
    }
</style>

View Code

tips

　　The currentCanvasXml  is the preview xml file data. Because there are too many lines, it is attached to the attachment (click me! click me!) . When using it, assign the entire value to currentCanvasXml before the code can run, otherwise an error will be reported! !