快捷導(dǎo)航

Vue中實(shí)現(xiàn)在線畫流程圖的方法

更新時間：2024年07月12日 12:14:49 作者：牛老師講GIS

最近在調(diào)研一些在線文檔的實(shí)現(xiàn),包括文檔編輯器、在線思維導(dǎo)圖、在線流程圖等,本文分享在Vue框架下基于metaeditor-mxgraph實(shí)現(xiàn)在線流程圖,感興趣的朋友一起看看吧

概述

最近在調(diào)研一些在線文檔的實(shí)現(xiàn)，包括文檔編輯器、在線思維導(dǎo)圖、在線流程圖等，前面的文章基于語雀編輯器的在線文檔編輯與查看實(shí)現(xiàn)了文檔編輯器。在本文，分享在Vue框架下基于metaeditor-mxgraph實(shí)現(xiàn)在線流程圖。

實(shí)現(xiàn)效果

實(shí)現(xiàn)

1. 添加依賴

{
   "metaeditor-mxgraph": "^2.0.7"
}

2. 編輯器簡介

metaeditor-mxgraph，圖元編輯器，支持獨(dú)立的流程圖編輯器，以及 DrawIO 嵌入方案。文檔地址為：https://npm.io/package/metaeditor-mxgraph。

3. 編輯器實(shí)現(xiàn)

<template>
  <div class="flow-chart" ref="flowChart"></div>
</template>
<script>
import 'metaeditor-mxgraph/assets/index.scss'
import { MetaEditor } from 'metaeditor-mxgraph'
const { MetaGraphEditor, getLanguage, stringToXml, xmlToString } = MetaEditor
export default {
  props: {
    chartData: {
      type: Object,
      default: () => null,
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  watch: {
    chartData() {
      this.init()
    },
  },
  unmounted() {
    this.destroy()
  },
  methods: {
    destroy() {
      if (window.metaGraphEditor) window.metaGraphEditor.destroy()
      window.metaGraphEditor = null
    },
    init() {
      this.destroy()
      const xml = stringToXml(this.chartData || '<mxGraphModel></mxGraphModel>')
      const dom = this.$refs.flowChart
      const metaGraphEditor = new MetaGraphEditor({
        container: dom,
      })
      const lan = getLanguage('zh')
      metaGraphEditor.init(lan, xml)
      window.metaGraphEditor = metaGraphEditor
    },
  },
}
</script>
<style scoped lang="scss">
.flow-chart {
  width: 100%;
  height: 100%;
}
</style>

需要注意的是，編輯器默認(rèn)是絕對定位的，想要跟隨設(shè)定dom大小，需要設(shè)置其樣式為：

 .metagraph-container {
    position: relative;
    width: 100%;
    height: 100%;
    user-select: none;
}

設(shè)置完樣式后，菜單的位置會出錯，這個還沒修復(fù)，使用時請注意。

4. 文檔預(yù)覽

<template>
  <div class="flow-chart" ref="flowChart"></div>
</template>
<script>
import 'metaeditor-mxgraph/assets/index.scss'
import { MetaEditor } from 'metaeditor-mxgraph'
const { MetaGraphViewer, stringToXml} = MetaEditor
export default {
  props: {
    chartData: {
      type: Object,
      default: () => null,
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  watch: {
    chartData() {
      this.init()
    },
  },
  methods: {
    init() {
      const xml = stringToXml(this.chartData || '<mxGraphModel></mxGraphModel>')
      const dom = this.$refs.flowChart
      const metaGraphEditor = new MetaGraphViewer({
        xml: xml,
      })
      const { offsetWidth, offsetHeight } = dom
      const svg = metaGraphEditor.renderSVGDom(null, 1, 1, {
        width: offsetWidth,
        height: offsetHeight,
      })
      dom.appendChild(svg)
    },
  },
}
</script>
<style scoped lang="scss">
.flow-chart {
  width: 100%;
  height: 100%;
}
</style>

到此這篇關(guān)于Vue中實(shí)現(xiàn)在線畫流程圖實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue畫流程圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: