Background:

You want to add a click event to a custom node in ANTV G6. After the click, a popover box appears and then add the node to a list

Problem analysis

Only the default tooltip in G6 doesn’t have an operable window like popover, so I decided to go straight to Element’s el-Popover prompt

Implementation steps

If you want to float an action box on a node, can you introduce el-Popover directly, and then how do you keep it in the node position? After reviewing elements, it is found that el-popover generally adopts the form of absolute positioning, so can we set a dynamic top and left? Next, we will try to follow this idea

1. At first, using the default class of El-Popover for DOM retrieval was not feasible

bindEvents() {
      this.graph.on('node:click', (e) => {
        if (item._cfg.model.isCenter === 'Y') {
          this.addtoList(item)
        }
      })
    },
    addtoList(item, clientX, clientY, canvasX, canvasY) {
      // alert(111)
      this.showPo = true
      const oo = item._cfg.model
      const result = document.getElementsByClassName('el-popover')[0]
    }
Copy the code

2. Then I looked at the official documents and found this

El-popover does not support custom styles unless it adds a custom classconst result = document.getElementsByClassName('el-popover popverClass')[0]You can get the correct DOM

<el-row> <div id="graph"> <el-popover V-model ="showPo" popper-class="popverClass" width="160"> <p> Are you sure you want to add nodes to the list? </p> <div style="text-align: right; margin: 0"> <el-button size="mini" type="text" @click="showPo = false">cancel</el-button> <el-button type="primary" size="mini" @click="addtoCon">confirm</el-button> </div> </el-popover> </div> </el-row>Copy the code

Then carries on the top and left the Settings of the g6 relative coordinates to read articles g6. Antv. Vision/useful/docs/man… After analysis, the canvas coordinate can be adopted, because this method can basically synchronize with the coordinate of the node, and the zoom in and out of the window will not affect the position of the floating box, so the final realization:

bindEvents() { this.graph.on('node:click', (e) => { const { clientX, clientY, item, canvasX, canvasY } = e; console.log('iii', item, clientX, clientY, canvasX, canvasY) if (item._cfg.model.isCenter === 'Y') { this.addtoList(item, clientX, clientY, canvasX, canvasY) } }) }, addtoList(item, clientX, clientY, canvasX, CanvasY) {this.showPo = true const oo = item._cfg.model // el-popover to locate relative to canvas const result = document.getElementsByClassName('el-popover popverClass')[0] result.style.left = (canvasX - 50) + 'px' result.style.top = (canvasY + 35) + 'px' this.knowsInfo = oo }Copy the code