// g6图绘制
var graph = null;

function initg6(g6Data) {
  graph = null;
  const warp = document.getElementById('graph-container');
  if(!warp)return;
  const height = warp ? warp.offsetHeight - 40 || 500 : 500;
  const width = warp ? warp.clientWidth || 1000 : 1000;

  // 创建 G6 图实例
  graph = new G6.Graph({
    container: 'graph-container', // String | HTMLElement，必须，指定图画布的容器 id 或容器本身
    // 画布宽高
    height: height, // Number，必须，图的宽度
    width: width, // Number，必须，图的高度
    // fitView : true, // 图是否自适应画布
    // fitViewPadding: 0, // Number | Array；默认：0。图自适应画布时的四周留白像素值。fitView 为 true 时生效
    // fitCenter: true, // 是否平移图使其中心对齐到画布中心
    modes: {
      // 支持的 behavior
      default: [
        'brush-select',
        'drag-canvas',
        'zoom-canvas',
        'drag-node',
        'hover-node',
        'select-node',
        'hover-edge',

        // 'keyboard',
        // 'customer-events',
        'add-menu',
        {
          type: 'tooltip',
          formatText(model) {
            const cfg = model['label']
            return cfg
          },
          shouldUpdate: (e) => {
            if (e.target.cfg.type !== 'circle') return true
          },
        },
      ],
      altSelect: [
        {
          type: 'brush-select',
          trigger: 'drag',
        },
        'drag-node',
      ],
      mulitSelect: ['mulit-select'],
      addEdge: ['add-edge'],
    },
    // 默认情况下全局节点的配置项，包括样式属性和其他属性
    defaultNode: {
      type: 'customNode',
      size: [170, 80], // 节点宽高
    },
    // 默认情况下全局边的配置项，包括样式属性和其他属性
    defaultEdge: {
      type: 'customEdge',
    }
  })
  graph.data(g6Data); // 读取数据源到图上
  graph.render(); // 渲染图

  // 点击时选中，再点击时取消
  graph.on('node:click', (ev) => {
    const node = ev.item;
    graph.setItemState(node, 'selected', !node.hasState('selected')); // 切换选中
  });
  graph.on('node:mouseenter', (ev) => {
    const node = ev.item;
    graph.setItemState(node, 'selected', true);
  });
  graph.on('node:mouseleave', (ev) => {
    const node = ev.item;
    graph.setItemState(node, 'selected', false);
  });
  graph.on('edge:mouseenter', (ev) => {
    const edge = ev.item;
    graph.setItemState(edge, 'selected', true);
  });
  graph.on('edge:mouseleave', (ev) => {
    const edge = ev.item;
    graph.setItemState(edge, 'selected', false);
  });
}