start

Now we start to implement the canvas function of the flowchart from two aspects, the first is the canvas style, including the grid and background, and the second is the canvas operation, including pan and zoom. Let’s start with two classic flowchart applications, Drawio and BPMN Editor.

From the figure above, we can see that there are two different kinds of canvases, those with and without scroll bars. Both kinds of canvases have their own advantages and disadvantages. For example, canvases with scroll bars can clearly understand the position of the current picture in the whole canvas according to the position of scroll bars, but the style of scroll bars is not beautiful in Windows. A canvas without a scroll bar can also achieve the same effects as a scroll bar canvas, such as infinite drag and zoom, but if the graphics on the canvas are scattered, it is easy to lose the field of view, and it is difficult to find. X6 supports both of the above two types of canvas. Here we still care about the appearance level of canvas, so we choose canvas without scroll bar. If you need to implement canvas with scroll bar, you can refer to here.

implementation

Initialize the

If you use it in Vue/React/Angular projects, you can use NPM or YARN to install it. If you use script tags to import it, you can use the CDN address.

# npm
$ npm install @antv/x6 --save

# yarn
$ yarn add @antv/x6

# cdn
# <script href="https://unpkg.com/@antv/x6/dist/x6.js"></script>
Copy the code

We then create a container to hold the canvas on the page:

<div id="container"></div>
Copy the code

Now we can initialize a canvas:

new Graph({
  container: document.getElementById('container'),
  width: 800.height: 800,})Copy the code

Grid and Background

X6 can be configured globally in Grpah grid shape and style, for example, the following configuration of double line grid, the main grid size is 10px by 10px, the main grid line color is #E7E8EA, the width is 1px, the secondary grid line color is #CBCED3, the width is 1px. The sub-grid lines are separated by 4 main grids. You can also configure the background color of the canvas and the background image globally in the Graph.

new Graph({
  grid: {
    size: 10.visible: true.type: 'doubleMesh'.args: [{color: '#E7E8EA'.thickness: 1}, {color: '#CBCED3'.thickness: 1.factor: 4,},],},})Copy the code

The canvas looks like this:

Translation and scaling

Drag-and-drop and translation of canvas and scroll wheel scaling are high-frequency operations, which are the basic functions needed by canvas. First let’s look at drag and translation, basic usage:

new Graph({
  // Equivalent to panning: true
  panning: {
    enabled: true,}})Copy the code

In this way, when pressing the left button of the mouse, you can drag the canvas by moving the mouse. Some users are accustomed to using the right button or the touchpad to carry out the pan operation of the canvas, which is also supported by X6. There is a small difference between the left button and the right button: pressing the left button on the graph will not trigger the pan operation of the canvas, but the right button can.

new Graph({
  panning: {
    enabled: true.eventTypes: ['leftMouseDown'.'rightMouseDown'.'mouseWheel']}})Copy the code

The mouseWheel Graph can be used to scale the canvas.

new Graph({
  // Equivalent to mousewheel: true
  mousewheel: {
    enabled: true,}})Copy the code

Three problems were found after the experiment:

  1. Zooming and panning conflicts. When you scroll the scroll wheel or slide the trackpad, the canvas will scale and pan at the same time
  2. The canvas is always scaled by the center of the canvas, and you want to scale by the mouse position
  3. There is no control over the minimum and maximum levels of scaling

After reading the official website documents, it is found that these problems have been taken into account in X6, which can be solved in the following ways:

  1. Set the Modifier to CTRL so that zooming on the trackpad with two fingers or pressing CTRL and scrolling will trigger canvas zooming so it doesn’t clash with drag and pan
  2. Set zoomAtMousePosition to true so that the canvas is zoomed around the mouse position
  3. Setting minScale and maxScale controls the minimum and maximum level at which the canvas can be scaled

The final configuration and effect are as follows:

new Graph({
  // Equivalent to mousewheel: true
  mousewheel: {
    enabled: true.zoomAtMousePosition: true.modifiers: 'ctrl'.minScale: 0.5.maxScale: 3,}})Copy the code

The last

From the above realization of the process, X6 not only has a complete function, and in each function is considered very carefully, through the combination of some configuration items can complete the basic function, reflects the characteristics of X6 out of the box.

  1. Next article: Implementing flow chart applications from 0 to 1 03- Graphics
  2. Source: portal
  3. Remember to star X6 warehouse