The issue has been closed

节点移入移出方法无法触发 #4494

avrinfly posted onGitHub

问题描述

参考高亮相邻节点的功能，实现节点移入移出的自定义行为时，发现mouseenter、mouseout、mouseleave 触发结果有问题

重现链接

暂无

重现步骤

如图，使用mouseenter和mouseout配合时，首次移入移出节点，没问题，但移出后，再次移入相同节点，mouseenter不触发只有再移入其他节点或边，才会触发

第二种情况：如果是mouseenter和mouseleave配合时，移入一个节点移出时，mouseleave不生效，再移入另一个节点或边时，会先触发上一个节点的mouseleave方法，再触发该节点的mouseenter方法

预期行为

不论哪种方式，可正常移入移出，达到高亮相邻节点的效果即可

平台

操作系统: [macOS, Windows, Linux, React Native ...]
网页浏览器: [Google Chrome, Safari, Firefox]
G6 版本: [4.5.1 ... ]

屏幕截图或视频（可选）

No response 移入移出代码如下：

补充说明（可选）

使用了自定义节点 `G6.registerNode('once-node', { labelPosition: 'top', draggable: true, draw: (cfg, group) => { const isCenter = !!cfg.isRoot; const color = '#80B1FF'; const size = cfg.size || 40; const samllRadius = size / 2 * .75; const bigRadius = size / 2; const hlRadius = size / 2 * 1.5; const stroke = cfg.style ? cfg.style.stroke || color : color; const fill = cfg.style ? cfg.style.fill || color : color; const fz = cfg?.style?.fontSize || cfg?.labelCfg?.style?.fontSize;

// big circle
const keyShape = group.addShape('circle', {
  attrs: {
    x: 0,
    y: 0,
    r: bigRadius,
    fillOpacity: 0,
    stroke: stroke,
    lineWidth: size * 2 / 30
  },
  name: 'big-circle',
  className: 'big-circle'
});

// small circle
group.addShape('circle', {
  attrs: {
    x: 0,
    y: 0,
    r: samllRadius,
    fill: fill
  },
  name: 'small-circle',
  className: 'small-circle'
});

// highlight circle
group.addShape('circle', {
  attrs: {
    x: 0,
    y: 0,
    r: hlRadius,
    fillOpacity: isCenter ? .08 : 0,
    strokeOpacity: isCenter ? .2 : 0,
    // fill: 'rgba(255,255,255,.08)',
    // stroke: 'rgba(255,255,255,.2)',
    fill: '#FFF',
    stroke: '#FFF',
    lineWidth: size * 2 / 30
  },
  name: 'highlight-circle',
  className: 'highlight-circle'
})

const labelPosition = cfg?.style?.position || cfg?.labelCfg?.position || 'center';
const labelStyle = getLableStyleByPosition(labelPosition, cfg); // 修改label位置

const label = group.addShape('text', {
  attrs: {
    x: 0, // 居中
    y: 0,
    textAlign: 'center',
    textBaseline: 'middle',
    text: cfg.label,
    fill: cfg?.labelCfg?.style?.color || '#fff',
    fontSize: fz,
    ...labelStyle
  },
  labelRelated: true,
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'text-shape',
  className: 'text-shape'
})

// 返回 keyshape
return keyShape;

}, update(cfg, node) { const group = node.getContainer(); const textShape = group.get('children')[3]; const labelPosition = cfg?.style?.position || cfg?.labelCfg?.position || 'center'; const labelStyle = getLableStyleByPosition(labelPosition, cfg); textShape.attr(labelStyle); } }, 'circle');` No response