ggEditor给节点增加提示框

2020/02/26 14:16
阅读数 757

参考官方文档:

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 ]
});
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部