From 0 to 1 to realize the flow chart 02-Canvas

begin

Below we start to implement the canvas function of the flowchart, starting from two aspects, the first is the style of the canvas, including grid and background, and the second is the operation of the canvas, including panning and zooming. First, let's take a look at two classic flowchart applications Drawio and BPMN editor .

From the above picture, we can see two different canvases, one with scroll bar and one without scroll bar. Both types of canvas have their own advantages and disadvantages. For example, the canvas with scroll bar can clearly understand the current situation according to the position of the scroll bar. The screen is in the position of the entire canvas, but the scroll bar is not beautiful enough under windows. The canvas without scroll bar can also achieve the same infinite drag, zoom and other effects as the scroll bar canvas, but if the graphics on the canvas are scattered, it is easy to lose the field of view, and it is more difficult to find.
X6 canvas, so we choose the one without scroll bar. If you need to implement a canvas with scroll bar, you can refer to here .

achieve

initialization

First enter the installation step. If you use it in projects such as Vue/React/Angular, you can use npm or yarn to install. If you use the script tag to import, 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>

Then we create a container to hold the canvas on the page:

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

Next we can initialize a canvas:

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

Grid and background

X6 can configure the grid shape and style globally in Grpah. For example, the double-line grid is configured below, the main grid size is 10px * 10px, the main grid line color is #E7E8EA, the width is 1px, and the secondary grid line color It is #CBCED3, the width is 1px, and the sub-grid lines are separated by 4 major grids. You can also configure the background color and background image of the canvas globally in Graph. If you need to configure it, please refer to official website .

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

The style of canvas rendering is as follows:

Pan and zoom

The drag and pan of the canvas and the zoom of the scroll wheel are high-frequency operations, and are the basic functions that the canvas needs to have. Let's first look at drag and pan, the basic usage:

new Graph({
  // 等价于 panning: true
  panning: {
    enabled: true,
  }
})

In this way, you can drag the canvas when you press the left button of the mouse and move the mouse. Some users are accustomed to using the right button or touchpad to pan the canvas. X6 is also supported, and there is a slight difference between the left button and the right button: Pressing the left button on the graph will not trigger the canvas to pan, but the right button does.

new Graph({
  panning: {
    enabled: true,
    eventTypes: ['leftMouseDown', 'rightMouseDown', 'mouseWheel']
  }
})

Configure mousewheel on Graph to realize canvas zoom function, basic usage:

new Graph({
  // 等价于 mousewheel: true
  mousewheel: {
    enabled: true,
  }
})

Three problems were found after the experiment:

1. Zooming and panning conflict. When scrolling the wheel or sliding the touchpad, the canvas will zoom and pan at the same time
2. The canvas is always scaled according to the center of the canvas, what I want is to scale according to the mouse position
3. Can't control the minimum and maximum levels of zoom

After reading official website document , I found that these problems have been taken into account in X6 and can be solved in the following ways:

1. Set the modifier key modifiers to ctrl, so that using two-finger zoom on the touchpad or pressing the Ctrl key and then scrolling the mouse will trigger the canvas zoom, and it will not conflict with dragging and panning.
2. Set zoomAtMousePosition to true, so that the canvas will be zoomed with the mouse position as the center point
3. Set minScale and maxScale to control the minimum and maximum level of the canvas can be zoomed

The final configuration and effects are as follows:

new Graph({
  // 等价于 mousewheel: true
  mousewheel: {
    enabled: true,
    zoomAtMousePosition: true,
    modifiers: 'ctrl',
    minScale: 0.5,
    maxScale: 3,
  }
})

At last

Judging from the above implementation process, X6 not only has complete functions, but also carefully considered each function. By combining some configuration items, the basic functions can be completed, which reflects the X6 out of the box. Features.

1. Source code: Portal
2. Remember to X6 warehouse