最好用的流程编辑器bpmn-js系列之minimap

小地图minimap依赖diagram-js-minimap包

1.安装diagram-js-minimap

npm install --save diagram-js-minimap

2.引入样式

import "diagram-js-minimap/assets/diagram-js-minimap.css";

3.添加minimap并开启

<script>
import BpmnViewer from "bpmn-js/lib/Viewer";
import { xmlStr } from "../mock/xmlStrViewer";
import minimapModule from "diagram-js-minimap";

export default {
  ...
  methods: {
    init() {
      const canvas = this.$refs.canvas;
      this.bpmnViewer = new BpmnViewer({
        container: canvas,
        additionalModules: [minimapModule]
      });

      this.createNewDiagram();
    },
    async createNewDiagram() {
      try {
        const result = await this.bpmnViewer.importXML(xmlStr);
        const { warnings } = result;
        console.log(warnings);

        // 打开小地图
        this.bpmnModeler.get("minimap").open();

        // 屏幕自适应
        const canvas = this.bpmnViewer.get("canvas");
        canvas.zoom("fit-viewport", true);
      } catch (err) {
        console.log(err.message, err.warnings);
      }
    }
  }
};
</script>

---