Vue中使用mxGraph（一）

安装

yarn add mxgraph

使用

1. 新建src\mxgraph\index.js文件

import mx from "mxgraph";
const mxgraph = mx({
  mxImageBasePath: "../src/images",
  mxBasePath: "../src",
});

// decode bug https://github.com/jgraph/mxgraph/issues/49
window.mxGraph = mxgraph.mxGraph;
window.mxGraphModel = mxgraph.mxGraphModel;
window.mxEditor = mxgraph.mxEditor;
window.mxGeometry = mxgraph.mxGeometry;
window.mxDefaultKeyHandler = mxgraph.mxDefaultKeyHandler;
window.mxDefaultPopupMenu = mxgraph.mxDefaultPopupMenu;
window.mxStylesheet = mxgraph.mxStylesheet;
window.mxDefaultToolbar = mxgraph.mxDefaultToolbar;

export default mxgraph;

2. 实现一个Hello Word,修改src\App.vue内容为：

<template>
  <div>
    <div id="container" ref="container"></div>
  </div>
</template>

<script>
import mxgraph from "./mxgraph/index.js";
const { mxGraph, mxClient, mxUtils } = mxgraph;
export default {
  mounted() {
    if (!mxClient.isBrowserSupported()) {
      mxUtils.error("Browser is not supported!", 200, false);
    } else {
      let graph = new mxGraph(this.$refs.container);
      var parent = graph.getDefaultParent();

      graph.getModel().beginUpdate();
      try {
        var v1 = graph.insertVertex(parent, null, "Hello,", 20, 20, 80, 30);
        var v2 = graph.insertVertex(parent, null, "World!", 200, 150, 80, 30);
        graph.insertEdge(parent, null, "", v1, v2);
      } finally {
        graph.getModel().endUpdate();
      }
    }
  },
};
</script>

效果