How to use MxGraph for visualization in a VUE project

Recently, the company needs to use MxGraph to develop flow charts. Since it is the first time FOR me to come into contact with this library, THERE are still a lot of pits. There are few materials about this library on the Internet, and its documents are still in English. So it’s a bit of a pain to develop. Let’s look at the following requirements:This is the flow chart PM asked me to make. I will share some functions with you here. Including new graph, delete node graph, response to right-click menu event…. Since mxGraph is very fixed, once you GET these parts and combine them with the document, there should be no problem.

Create a project through vue-CLI, which I won’t go into here…. This is the project directory that I generated. I have a project directory modification, you can also refer to it. Vue. Config. Js configuration

module.exports = {
  publicPath: '/'.outputDir: 'dist'.lintOnSave: true.chainWebpack: (config) = > {
    config.module
      .rule(' ')
      .test(/mxClient\.js$/)
      .use('exports-loader')
      .loader('exports-loader? mxClient,mxToolbar,mxConnectionHandler,mxEllipse,mxConnectionConstraint,mxWindow,' +
        'mxObjectCodec,mxGraphModel,mxActor,mxPopupMenu,mxShape,mxEventObject,mxGraph,mxPopupMenuHandler,mxPrintPreview,' +
        'mxEventSource,mxRectangle,mxVertexHandler,mxMouseEvent,mxGraphView,mxCodecRegistry,mxImage,mxGeometry,' +
        'mxRubberband,mxConstraintHandler,mxKeyHandler,mxDragSource,mxGraphModel,mxEvent,mxUtils,mxEvent,mxCodec,mxCell,' +
        'mxConstants,mxPoint,mxGraphHandler,mxCylinder,mxCellRenderer,mxEvent,mxUndoManager')
      .end()
  }
}
Copy the code

2. Data driven graphics generation

In the process of project development, I used mxGraph to step on a lot of holes, one of the big holes was the graph echo problem. At the beginning, I used the official recommended XML form, which basically means that the foreground generates a bunch of XML, and then the background returns it. What’s the problem here? It’s a lot of work for people in the background, who have to extract fields from a bunch of random XML and write them to the database. So, I changed the data format to JSON, which I personally think is one of the most important things about working with mxGraph.

First of all, let’s agree on a good data format

graphData: [
        { id: "5".value: "Start".styleOptions: { shape: "rectangle".strokeColor: "#662B2B".dashed: "0".strokeWidth: 1 }, x: 100.y: 100.width: 100.height: 100.to: [{id: "Seven".style: { strokeColor: "red".edgeStyle: "orthogonalEdgeStyle".rounded: 0.orthogonalLoop: 1 }, edgeOptions: { id: "25".value: "8888"}}, {id: "9".edgeOptions: { id: "35".value: "9999"}}].options: { name: "add".type: "start"}}, {id: "Seven".value: "The end of the 1".styleOptions: {shape: "cylinder"}, x: 500.y: 400.width: 100.height: 100.to: [].options: { name: "add".type: "rounded"}}, {id: "9".value: "The end of the 2".styleOptions: {shape: "cylinder".strokeWidth: 2.fillColor: "#ffffff".strokeColor: "black".backgroundOutline: 1.size: 15.rounded: 1}, x: 600.y: 500.width: 100.height: 100.to: [].options: { name: "add".type: "ellipse"}}].Copy the code

Let me make a quick statement for each item in graphData:

Each item’s TO is an array associated with a node below it

The way to use it can refer to the address

3. Customize connection rules

In the actual project, we need to determine which graphics can be connected or not, so we need to manipulate each graph. We add the corresponding type attribute in the options object of each graph. In fact, the options object is specially customized for us.

In addition, the custom check function is rules,

// Customize the connection rule
    rules (source, target) {
      return true;
    }
Copy the code

The function returns two arguments, the source and the destination, and you can use those two types to determine whether they are concatenated or not.

4. Current functions

The current functional points are as follows:

1. Data driven to generate graphics
2. Remove the graphics
3. Forward and backward graphics
4. Custom verification function
5. Custom graph

Future features: 1. Export function (picture) 2. Zoom in and out…….

5. Component links

The github component links to the mxGraph component

Preview the address

Effect: