Tooltip plugin: In one custom node, crossing different shape cant execute the 'getContent' function

[qunzi0214]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://github.com/qunzi0214/g6-issue-demo.git

Steps to reproduce

1. git clone https://github.com/qunzi0214/g6-issue-demo.git
2. git checkout issue2
3. npm install
4. npm run serve

Environment	Info
g6	3.8.0
System	-
Browser	-

---

Here is my needs:

In one custom node, different shape will show different tips.

A thought：

It seems the getContent function just execute once by event 'mouseenter'.

Is there any possible to notify the execution of 'getContent' by 'shouldBegin'？

[Yanyan-Wang]

Thanks, it should be supported by next mid-version

[TLYTLX]

另外可否不要求getcontent必须有返回内容 有些shape不需要悬浮提示

[qunzi0214]

另外可否不要求getcontent必须有返回内容 有些shape不需要悬浮提示

不需要悬浮提示的shape可以考虑用shouldBegin禁止掉

[TLYTLX]

shouldBegin

好 就是我觉得直接getcontent里面做判断更方便点哈哈哈哈 没有就不显示的那种 不过可能这个函数名字本身就是content 作用和名字还是要统一 我用shouldbegin 谢谢你

[qunzi0214]

我理解文档的意思 shouldBegin 应该是优于 getContent 的，但是目前表现很奇怪：

• getContent只会在enter节点的时候触发一次，且不受shouldBegin影响。
• 但是在不同shape上切换的时候，shouldBegin 会触发，getContent 不会再触发。

导致两个问题：

• 如果从一个 shouldBegin 为 false 的shape上进入（且未设置 getContent 返回值），你拿到的tips 是 undefined；但是进入一个设置了shouldBegin 为 true的shape，由于getContent不触发，所以展示的tips还是undefined
• 穿过不同图形，不会切换tips

[TLYTLX]

我理解文档的意思 shouldBegin 应该是优于 getContent 的，但是目前表现很奇怪：

• getContent只会在enter节点的时候触发一次，且不受shouldBegin影响。
• 但是在不同shape上切换的时候，shouldBegin 会触发，getContent 不会再触发。

导致两个问题：

• 如果从一个 shouldBegin 为 false 的shape上进入（且未设置 getContent 返回值），你拿到的tips 是 undefined；但是进入一个设置了shouldBegin 为 true的shape，由于getContent不触发，所以展示的tips还是undefined
• 穿过不同图形，不会切换tips

你第一个好像说得有点问题，getcontent在shouldbegin的情况下不会触发的，从一个shape到另一个shape是因为mousemove只触发了updateposition，所以getcontent不会重新获取

[qunzi0214]

我测试的结果是 getcontent 并不受 shouldbegin 控制，导致从 shouldbegin 为 false 的 shape 进入节点，拿到 undefined 后 tips始终显示 undefined（不论在节点内部如何移动）

[TLYTLX]

我测试的结果是 getcontent 并不受 shouldbegin 控制，导致从 shouldbegin 为 false 的 shape 进入节点，拿到 undefined 后 tips始终显示 undefined（不论在节点内部如何移动）

不应该呀 mouseenter和mousemove都是最先判断shouldbegin，一旦false，不会触发后续的获取内容或者移动位置什么的

[qunzi0214]

我建了一个分支复现我的测试结果：

https://github.com/qunzi0214/g6-issue-demo/tree/issue3

主要代码：

customNode.js

export default {
  draw(cfg, group) {
    const mainId = `rect${Date.now()}`;

    const keyShape = group.addShape('rect', {
      name: 'base-shape',
      draggable: true,
      attrs: {
        id: mainId,
        x: -100,
        y: -20,
        width: 200,
        height: 40,
        stroke: '#eee',
        fill: '#fff',
        radius: 4,
        cursor: 'move',

        isKeyShape: true,
        tips: 'this is key shape tips'
      },
    });

    group.addShape('rect', {
      name: 'rect',
      draggable: true,
      attrs: {
        x: -25,
        y: 5,
        width: 50,
        height: 50,
        fill: '#666',
        parent: mainId,
        cursor: 'move',

        isSonShape: true,
        // tips: 'this is son shape tips'
      },
    });

    return keyShape;
  },
};

App.vue

const tooltip = new G6.Tooltip({
      offsetX: -20,
      offsetY: 30,
      getContent(e) {
        console.log('getContent execute', e.target.attr('tips'));
        return `
          <p style="width: 180px; padding: 8px 16px">${e.target.attr('tips')}</p>
        `;
      },
      shouldBegin(e) {
        if(e.target.attr('tips')) {
          console.log('shouldBegin execute');
          return true;
        }
        
        return false;
      },
      itemTypes: ['node'],
    });

测试结果：

[TLYTLX]

我建了一个分支复现我的测试结果：

https://github.com/qunzi0214/g6-issue-demo/tree/issue3

主要代码：

customNode.js

export default {
  draw(cfg, group) {
    const mainId = `rect${Date.now()}`;

    const keyShape = group.addShape('rect', {
      name: 'base-shape',
      draggable: true,
      attrs: {
        id: mainId,
        x: -100,
        y: -20,
        width: 200,
        height: 40,
        stroke: '#eee',
        fill: '#fff',
        radius: 4,
        cursor: 'move',

        isKeyShape: true,
        tips: 'this is key shape tips'
      },
    });

    group.addShape('rect', {
      name: 'rect',
      draggable: true,
      attrs: {
        x: -25,
        y: 5,
        width: 50,
        height: 50,
        fill: '#666',
        parent: mainId,
        cursor: 'move',

        isSonShape: true,
        // tips: 'this is son shape tips'
      },
    });

    return keyShape;
  },
};

App.vue

const tooltip = new G6.Tooltip({
      offsetX: -20,
      offsetY: 30,
      getContent(e) {
        console.log('getContent execute', e.target.attr('tips'));
        return `
          <p style="width: 180px; padding: 8px 16px">${e.target.attr('tips')}</p>
        `;
      },
      shouldBegin(e) {
        if(e.target.attr('tips')) {
          console.log('shouldBegin execute');
          return true;
        }
        
        return false;
      },
      itemTypes: ['node'],
    });

测试结果：

你是正确的 我们版本不一样 哈哈哈 他们应该改了实现方案了 之前设计的是shouldbegin优先级最高 mouseenter和mousemove都先判断它