start

Now we start to implement the canvas function of the flowchart from two aspects, the first is the style of the canvas, including the grid and the background, the second is the operation of the canvas, including panning and zooming. Let’s start by looking at two classic flowchart applications for Drawio and the BPMN Editor.



From the above figure, we can see that there are two different canvases, the one with scroll bar and the one without scroll bar. Both canvases have their own advantages and disadvantages. For example, the canvas with scroll bar can clearly understand the position of the current picture in the whole canvas according to the position of scroll bar, but scroll bar style is not beautiful enough in Windows. Canvas without scrollbars can also achieve the same unlimited drag, zoom and other effects as scrollbars, 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 supports both types of canvases. Here, we still care about the appearance level of the canvases, so we choose the canvases without scrollbars. If you need to implement the canvases with scrollbars, you can refer to this.

implementation

Initialize the

Start with the installation step. If you use it in a project like Vue/React/Angular, you can install it with NPM or yarn. If you import it with script tag, you can install it with 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 on the page to hold the canvas:

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

Next we can initialize a canvas:

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

Grid and background

X6 allows you to configure the grid shape and style globally in GRPAH. For example, the following is a double-line grid with a primary grid size of 10px * 10px, a primary grid line color of #E7E8EA and a width of 1px, a secondary grid line color of #CBCED3 and a width of 1px. The secondary grid lines are separated by four primary grids. You can also configure the background color of the canvas and the background image globally in Graph. If you need to configure it, you can refer to the official website.

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

The canvas is rendered in the following style:

Translation and scaling

Drag and drag translation of canvas and scroll zoom are high frequency operations, which are the basic functions of canvas. First, let’s look at drag, drag and pan, basic usage:

New Graph({// equivalent to panning: true panning: {enabled: true,}})

In this way, you can drag and drop the canvas by pressing the left mouse button and moving the mouse. Some users are used to using the right button or the touchpad to carry out the translation operation of the canvas. X6 also supports it.

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

Configure MouseWheel on Graph to achieve canvas scaling.

New Graph({// equivalent to MouseWheel: true MouseWheel: {enabled: true,}})

Three problems were found after the experiment:

  1. Zoom and zoom conflict. When you scroll the scroll wheel or slide the touchpad, the canvas will zoom and pan
  2. The canvas is always scaled to the center of the canvas; you want to scale to the mouse position
  3. There is no control over the minimum and maximum levels of zoom

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

  1. Set the modifier to Ctrl so that using a two-finger zoom on the trackpad or holding the Ctrl key down and then scrolling the mouse will trigger the canvas zoom, which does not conflict with drag, drag and pan
  2. Set zoomatmousePosition to true so that the canvas is scaled 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 effects are as follows:

New Graph({// MouseWheel: {enabled: true, zoomatMousePosition: true, modifiers: 'Ctrl ', minScale: 0.5, maxScale: 3,})

The last

From the above implementation 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 X6 out of the box characteristics.

  1. Source: Portal
  2. Remember to star the X6 warehouse