Mxgraph is an excellent SVG graphics engine and graphics editor, but the documentation provided by the official framework is too academic and of low practical value. There was also little discussion of MxGraph in the community, making it extremely expensive to get the framework started. I plan to release the tutorial of mxGraph from time to time in the coming year. If you are interested, please pay attention, learn and grow together.

1. Introduction

The first version of MxGraph was delivered in 2012, when front-end engineering was still in its infancy and toolchains were missing so badly that it’s hard to look at MxGraph today. But the framework architecture design is very elegant, even in the current front-end hundreds of environment is still good enough, as a model, study mxGraph source code can learn:

  1. Common design patterns in editor development and editor implementation
  2. Graphic layout algorithm
  3. How does a graphics engine manage a large number of graphics elements
  4. How do I abstract graphics to support custom extensions
  5. , etc.

This article will serve as a starting point for a series of tutorials on how to get started using MxGraph.

2. Use local files

The simplest, but through the git clone [email protected]: jgraph/mxgraph git to download the library files to the local, in the page using scripts to introduce such as:

<! -- Use local file -->
<script src="./libs/mxgraph/mxClient.min.js"></script>
Copy the code

Clone command will warehouse all clones, and the only mxgraph/javascript/SRC/mxClient. Min. Js or mxgraph/javascript/SRC/mxClient js can satisfy the application requirements, other documents can be ignored.

With the introduction of mxclient.min. js, a number of mx-prefix attributes will be added to the global object window:

You can then use these global variables to build your application, for example:


      
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>mxgraph Demo</title>
	</head>
	<body>
		<div id="root"></div>

		<script type="text/javascript" src=".. /mxClient.min.js"></script>
		<script type="text/javascript">
			// Mxgraph is exposed under window, so it can be called directly
			const graph = new mxgraph(document.getElementById('root'));
			const parent = graph.getDefaultParent();

			// Start an update session
			graph.getModel().beginUpdate();
			try {
				// Insert a rectangle
				const v1 = graph.insertVertex(parent, null.'Hello,'.20.20.80.30);
				// Insert second rectangle
				const v2 = graph.insertVertex(parent, null.'World! '.200.150.80.30);
				// Connect two rectangles
				graph.insertEdge(parent, null.' ', v1, v2);
			} finally {
				// End the update session
				graph.getModel().endUpdate();
			}
		</script>
	</body>
</html>
Copy the code

Example effects:

3. Use the CDN

Using the mxclient.min. js file directly has two major disadvantages. One is that the library file needs to be downloaded and put into the project, which is not friendly for subsequent version management. Second, the backward construction method of Mxclient.min. js will expose many variables to the global space and cause pollution. In this case, if you still want to use 

<script src="/ / cdn.jsdelivr.net/npm/[email protected]/javascript/dist/build.min.js"></script>
Copy the code

Note that the build.min.js file is used, which, unlike mxclient.min.js, wraps the MxGraph code in the factory function to solve the global space pollution problem:

(function (root, factory) {
	if (typeof define === 'function' && define.amd) {
		define([], factory);
	} else if (typeof module= = ='object' && module.exports) {
		module.exports = factory();
	} else {
		root.mxgraph = factory();
	}
})(this.function () {
	return function (opts) {
		for (var name in opts) {
			this[name] = opts[name];
		}
		var __mxOutput = {};
		/* Insert mxgraph code here */
		return __mxOutput;
	};
});
Copy the code

Build.min.js exposes a factory function that is used in a slightly different way than in the example above, requiring the factory function to initialize the mxgraph namespace, as shown in this example:

4

      
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>mxgraph Demo</title>
	</head>
	<body>
		<div id="root"></div>
		<script src="/ / cdn.jsdelivr.net/npm/[email protected]/javascript/dist/build.js"></script>
		<script>
			// Initialize the namespace
			// Mxgraph here is the factory function exposed by 'build.min.js'
			const ns = mxgraph({
				mxBasePath: '/ / cdn.jsdelivr.net/npm/[email protected]/javascript/src'});const graph = new ns.mxgraph(document.getElementById('root'));
			const parent = graph.getDefaultParent();

			// Start an update session
			graph.getModel().beginUpdate();
			try {
				const v1 = graph.insertVertex(parent, null.'Hello,'.20.20.80.30);
				const v2 = graph.insertVertex(parent, null.'World! '.200.150.80.30);
				graph.insertEdge(parent, null.' ', v1, v2);
			} finally {
				// End the update session
				graph.getModel().endUpdate();
			}
		</script>
	</body>
</html>
Copy the code

Tip:

This code renders Hello World! “, but the console will report many errors, also because of the build method caused by the bug, in this example please directly ignore.

3. Use webpack and other modular solutions to introduce

As of version 3.7.2, MxGraph began to package libraries and distribute them to NPM, which developers can install using YARN Add MxGraph. The main entry file to the mxGraph package is build.min.js, which imports factory functions by default as described in the previous example:

const ns = require('mxgraph')) ({});// Import syntax
// import mxgraphFactory from 'mxgraph';
// const ns = mxgraphFactory({});
const graph = new ns.mxgraph(this.$refs.main);

const parent = graph.getDefaultParent();

graph.getModel().beginUpdate();
try {
	const v1 = graph.insertVertex(parent, null.'Hello,'.20.20.80.30);
	const v2 = graph.insertVertex(parent, null.'World! '.200.150.80.30);
	const e1 = graph.insertEdge(parent, null.' ', v1, v2);
} finally {
	graph.getModel().endUpdate();
}
Copy the code

Tip:

Why spend so much time introducing Script when you can install it via NPM? This is mainly because the MxGraph documentation is extremely imperfect, and the most useful examples are the official examples, all of which use

In addition, mxGraph does not yet have a good typescript type definition library for use in ts environments.

Next day forecast

The mxGraph engineering scheme is messy, and the repository contains a lot of irrelevant code and trickery. The next section will briefly discuss the role of the various important files in the MxGraph repository to prepare for subsequent understanding of the source code.