ggEditor給節點增加提示框

參考官方文檔：

https://www.yuque.com/antv/g6/plugin.tool.tooltip

在react-ggEditor使用方法：

import React from 'react';
import { Col } from 'antd';
import { Flow } from 'gg-editor';
import { withPropsAPI } from 'gg-editor';
import CustomNode from '../EditorCustomNode';
import CustomDocNode from '../EditorCustomNode/CustomDocNode';
import '@antv/g6/build/plugin.tool.tooltip';
import G6 from '@antv/g6'

const FlowMap = (props) => {
      const tooltip = new G6.Plugins['tool.tooltip']({
        dx:10,
        dy:10,
        getTooltip({item}) {
          if(item){
            const model = item.getModel();
            return `<div class="g6-tooltip">
              <b>${model.fileName}</b>
            </div>`
          }
        }
      });
      return (
        <Col span={21} className='editorContent'>
              <Flow 
                graph={{
                  plugins: [ tooltip ]
                }}
                className='flow' 
                data={props.data} />
              <CustomNode />
              <CustomDocNode />
        </Col>
      );
};

export default withPropsAPI(FlowMap);

更多的graph配置參考地址：

https://www.yuque.com/antv/g6/graph

 

提示信息 tool.tooltip

鼠標提示信息。

安裝

在 HTML 中引用文件： 

<script src="https://unpkg.com/@antv/g6/build/plugin.tool.tooltip.js"></script>

在 npm 中引用：

import '@antv/g6/build/plugin.tool.tooltip';

參數

參數	說明	類型	可選值	默認值
getTooltip	自定義 tooltip 內容回調	function		Link
dx	水平偏移	number	正數	10
dy	豎直偏移	number	正數	10

使用

使用方式一：默認

實例化插件對象：

 const tooltip = new G6.Plugins['tool.tooltip']();

在實例化 Graph 時作為插件插入：

const graph = new G6.Graph({
  container: 'mountNode',
  plugins: [ tooltip ]
});
graph.node({
  tooltip(model) {
    return [
      ['id', model.id]
    ]
  }
});

 

使用方式二：自定義 

實例化插件對象：

const tooltip = new G6.Plugins['tool.tooltip']({
  getTooltip({item}) {
    const model = item.getModel();
    return '<div>this is ' + model.id + '</div>';
  }
});

在實例化 Graph 時作為插件插入：

const graph = new G6.Graph({
  container: 'mountNode',
  plugins: [ tooltip ]
});