【bpmn.js 使用总结】一、基础使用

最新推荐文章于 2024-08-22 11:26:57 发布

_pengliang

最新推荐文章于 2024-08-22 11:26:57 发布

阅读量5.3k

点赞数 4

分类专栏： bpmn.js vue 文章标签： bpmn vue

本文链接：https://blog.csdn.net/qq_39211165/article/details/109152644

版权

vue 同时被 2 个专栏收录

22 篇文章 6 订阅

订阅专栏

bpmn.js

11 篇文章 37 订阅

订阅专栏

基础使用

Viewer BPMN 图表查看器
NavigatedViewer 包含鼠标导航工具的图表查看器
Modeler BPMN 图表建模器

Viewer 功能最简单，仅用来展示

NavigatedViewer 在 Viewer 上扩展了导航和缩放功能

Modeler 融合了 Viewer 和 NavigatedViewer,并拥有工具栏、属性面板等，实现建模能力

快速上手(Vue)

安装依赖

npm install bpmn-js -S

html

<div ref="canvas" class="canves"></div>

css

.canves {
  width: 100%;
  height: 100vh;
}

Viewer

Viewer 用于展示

import Modeler from 'bpmn-js/lib/Viewer'
import { xmlStr } from './xmlData.js'
export default {
  data() {
    return {
      bpmnViewer: null
    }
  },
  async mounted() {
    this.bpmnViewer = new Modeler({
      container: this.$refs.canvas
    })

    try {
      const { warnings } = await this.bpmnViewer.importXML(xmlStr)
      // 调整在正中间
      this.bpmnViewer.get('canvas').zoom('fit-viewport', 'auto')
      console.log('rendered')
    } catch (err) {
      console.log('error rendering', err)
    }
  }
}

xmlStr

NavigatedViewer

NavigatedViewer 显示和导航 BPMN 图

在 Viewer 的基础上，小小的修改

import Modeler from 'bpmn-js/lib/Viewer'

改为 👇

import Modeler from 'bpmn-js/lib/NavigatedViewer'

Modeler

import Modeler from 'bpmn-js/lib/Modeler'
import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import { xmlStr } from './xmlData.js'
export default {
  data() {
    return {
      bpmnModeler: null
    }
  },
  async mounted() {
    this.bpmnModeler = new Modeler({
      container: this.$refs.canvas
    })

    try {
      const { warnings } = await this.bpmnModeler.importXML(xmlStr)
      // 调整在正中间
      this.bpmnModeler.get('canvas').zoom('fit-viewport', 'auto')
      console.log('rendered')
    } catch (err) {
      console.log('error rendering', err)
    }
  }
}