Recently, I received the requirement of making flow chart editor, so I got to know the relevant information about @ANTv/G6. I learned that it has changed many versions, now it is version 3.6, and API of each version has great changes. Since the current requirements are not very strict, I chose version 1.x, and let’s have a look at the effect:

The introduction of the g6

1. X does not support NPM installation, so you need to use a browser to import NPM

< script SRC = "https://gw.alipayobjects.com/os/antv/assets/g6/1.2.8/g6.min.js" > < / script >Copy the code

The browser import mode will affect the first screen loading. If you want to import on demand, you can dynamically create labels in the current directory:

(() => { const script = document.createElement('script') script.src = '/ / gw.alipayobjects.com/os/antv/assets/g6/1.2.8/g6.min.js const s = document. GetElementsByTagName (' script') [0] s.parentNode.insertBefore(script, s) })()Copy the code

Initialize the G6 container

First we need a container to hold our G6

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

After the page is mounted, call initG6 to initialize it:

initG6 () { const self = this self.Util = G6.Util let grid if (self.checked) { grid = { forceAlign: Flowsheet; flowsheet; flowsheet; self.net = new flowChart ({id: 'flowChart', // Container id mode: flowsheet; 'edit', the grid, the grid, height: 700 / / canvas high}) / * * * * click on margin/self.net.on (' click '(ev) = > {the if (! Self.util.isnull (ev.item)) {self.isblank = false} else {self.isblank = true self.infoTitle = 'canvas'}}) /** * Click the node or edge */ self.net.on('itemclick', Function (ev) {self.isNode = self.util.isNode (ev.item) {/* Self.activation = ev.item if (self.isnode) {/* $nextTick(() => {self.$refs.inputFocus.$el.querySelector('input').focus()}) self.infoTitle = Self.name = ev.item.get('model').label self.func = ev.item.get('model').func self.account = ev.item.get('model').account || [] self.workflow = ev.item.get('model').workflow self.nodeType = ev.item.get('model').nodeType } else { self.$nextTick(() => { self.$refs.textInput.$el.querySelector('input').focus() }) Self.infotitle = 'edge' self.text = ev.item.get('model').label self.action = ev.item.get('model').action} self.color = Self.net.on (' itemMouseEnter ', Ev => {const item = ev.item self.oldcolor = item.get('model'). '#108EE9' }) self.net.refresh() }) self.net.on('itemmouseleave', ev => { const item = ev.item self.net.update(item, { color: Self.net.edge (). Tooltip ((obj) => {return [self.net.edge()); ['label', obj.label || 'null'], ['color', obj.color] ] }) self.net.node().tooltip((obj) => { return [ ['label', Obj. Label], [' color ', obj. Color]]}) render / * * * * / self.net.render ()}Copy the code

We can see that there are two types of G6: Node nodes and edge, which are nodes and edges

Node has the following shapes:

  • Circle the round
  • html html
  • The rect rectangle
  • Image picture
  • Rhombus diamond
  • The text text
  • Tree – node tree node

Edge has the following types:

  • The line straight
  • Smooth curve
  • SmoothArrow Arrow curve
  • Arrow arrow
  • .

There are also a number of HandlerEvents that we need to look through the documentation to add response events to the requirements

Render/update/save

Click on the left image to render the defined image with the beginAdd event

This.net.beginAdd ('node', {shape: 'circle', nodeType: 1, label: 'Start', color: '#ff9d00', size: [74, 74]})Copy the code

Monitor data changes, trigger the update method, you can achieve real-time update

update () {
  if (this.activation.get('type') === 'node') {
    this.net.update(this.activation, {
      label: this.name,
      func: this.func,
      account: this.account,
      workflow: this.workflow,
      nodeType: this.nodeType,
      color: this.color
    })
  } else {
    this.net.update(this.activation, {
      label: this.text,
      color: this.color,
      action: this.action
    })
  }
}
Copy the code

The canvas needs to be destroyed before switching the grid

Const _saveData = this.net.save() this.net.destroy() // this.initg6 () this.net.read(_saveData) this.render ()Copy the code

To save, simply call the G6.Net().save() method

console.log(this.net.save().source)
Copy the code

In this way, a simple flow chart components are completed, of course, the charm of G6 is far more than these, quickly try it!