How to use the @antv/g6.Util function in @antv/g6

const Base = require('../base');
const Util = require('@antv/g6').Util;
const Numeric = require('numericjs');

class Mds extends Base {
  getDefaultCfgs() {
    return {
      maxIteration: null,         // 停止迭代的最大迭代数
      center: [ 0, 0 ],           // 布局中心
      linkDistance: 50,           // 默认边长度
      onLayoutEnd() {},           // 布局完成回调
      onTick() {}                 // 每一迭代布局回调
    };
  }
  init() {
    const graph = this.get('graph');
    const onTick = this.get('onTick');
    const tick = () => {

if (distance > maxWidth) {
          width = maxWidth
        }
        // 计算输入框位置
        if (sourceAnchorPoint.x < targetAnchorPoint.x) {
          left = sourceAnchorPoint.x + distance / 2 - width / 2 + 'px'
        } else {
          left = targetAnchorPoint.x + distance / 2 - width / 2 + 'px'
        }
        if (sourceAnchorPoint.y < targetAnchorPoint.y) {
          top = sourceAnchorPoint.y + Math.abs(targetAnchorPoint.y - sourceAnchorPoint.y) / 2 - height / 2 + 'px'
        } else {
          top = targetAnchorPoint.y + Math.abs(targetAnchorPoint.y - sourceAnchorPoint.y) / 2 - height / 2 + 'px'
        }
        const el = canvas.get('el')
        const html = G6.Util.createDom(`<input value="${label}" class="edge-label" id="${id}">`)
        if (html) {
          // 插入输入框dom
          el.parentNode.appendChild(html)
          if (html.focus) {
            html.focus()
          }
          // 更新输入框样式
          G6.Util.modifyCSS(html, {
            display: 'inline-block',
            position: 'absolute',
            left: left,
            top: top,
            width: width + 'px',
            height: height + 'px',
            lineHeight: height + 'px',
            textAlign: 'center',

start (event) {
        let _t = this
        let sourceAnchor
        let startModel = _t.info.node.getModel()
        // 锚点数据
        let anchorPoints = _t.info.node.getAnchorPoints()
        // 处理线条目标点
        if (anchorPoints && anchorPoints.length) {
          // 获取距离指定坐标最近的一个锚点
          sourceAnchor = _t.info.node.getLinkPoint({ x: event.x, y: event.y })
        }
        _t.drawLine.currentLine = _t.graph.addItem('edge', {
          id: G6.Util.uniqueId(),
          // 起始节点
          source: startModel.id,
          sourceAnchor: sourceAnchor ? sourceAnchor.anchorIndex : '',
          // 终止节点/位置
          target: {
            x: event.x,
            y: event.y
          },
          // FIXME label 需支持双击编辑
          label: '',
          labelCfg: {
            position: 'center',
            style: {
              fontSize: 16,
              stroke: '#000000'
            }

start: function (event) {
        let _t = this
        let sourceAnchor
        let startModel = _t.info.node.getModel()
        // 锚点数据
        let anchorPoints = _t.info.node.getAnchorPoints()
        // 处理线条目标点
        if (anchorPoints && anchorPoints.length) {
          // 获取距离指定坐标最近的一个锚点
          sourceAnchor = _t.info.node.getLinkPoint({ x: event.x, y: event.y })
        }
        _t.drawLine.currentLine = _t.graph.addItem('edge', {
          id: G6.Util.uniqueId(),
          // 起始节点
          source: startModel.id,
          sourceAnchor: sourceAnchor ? sourceAnchor.anchorIndex : '',
          // 终止节点/位置
          target: {
            x: event.x,
            y: event.y
          },
          // FIXME label 需支持双击编辑
          label: '',
          attrs: {},
          style: {
            stroke: _t.graph.$X.lineColor,
            lineWidth: _t.graph.$X.lineWidth,
            ...config.line.type[_t.graph.$X.lineStyle]
          },

/**
 * @fileOverview text display
 * @author shiwu.wyy@antfin.com
 */

const G6 = require('@antv/g6');
const Util = G6.Util;

class Plugin {
  constructor(options) {
    Util.mix(this, {
      ratio: 2
    }, options);
  }
  init() {
    this.graph.on('afterchange', () => {
      this.textDisplay();
    });
    this.graph.on('afterviewportchange', () => {
      this.textDisplay();
    });
    this.graph.on('afterzoom', () => {
      this.textDisplay();

/**
 * @fileOverview grid
 * @author huangtonger@aliyun.com
 */

const G6 = require('@antv/g6');
const Util = G6.Util;

class Plugin {
  constructor(options) {
    Util.mix(this, {
      /**
       * grid cell
       * @type {number}
       */
      cell: 16,

      /**
       * grid line style
       * @type {object}
       */
      line: {
        stroke: '#A3B1BF',

/**
 * @fileOverview fisheye zoom
 * @author shiwu.wyy@antfin.com
 */

const G6 = require('@antv/g6');
const Util = G6.Util;

function getMaskRect(graph) {
  const width = graph.getWidth();
  const height = graph.getHeight();
  const tl = graph.getPointByDom({
    x: 0,
    y: 0
  });
  const br = graph.getPointByDom({
    x: width,
    y: height
  });
  return {
    x: tl.x,
    y: tl.y,
    width: br.x - tl.x,

import G6 from '@antv/g6';
const Util = G6.Util;
/**
 * by Shiwu
 */
let showNodes = [];
let showEdges = [];
let curShowNodes = [];
let curShowEdges = [];
let nodes = [];
let edges = [];
let nodeMap = new Map();
let edgesMap = new Map();
let curShowNodesMap = new Map();
let highlighting = false;
let currentFocus;
const width = document.getElementById('container').scrollWidth;
const height = document.getElementById('container').scrollHeight || 500;

/**
 * @fileOverview fisheye tool
 * @author shiwu.wyy@antfin.com
 */
const G6 = require('@antv/g6');
const Util = G6.Util;

class Tool {
  constructor(options) {
    Util.mix(this, {
      /**
       * radius
       * @type  {number}
       */
      radius: 200,

      /**
       * defualt zoom center
       * @type  {array}
       */
      center: [ 0, 0 ],

.then(data => {
    G6.Util.traverseTree(data, function(item) {
      item.id = item.name;
    });
    graph.data(data);
    graph.render();
    graph.fitView();
  });