对于使用data中node的stateStyles管理状态时出现的问题 #4644

问题描述

group.addShape('image', {
    name: 'entity-edit',
    attrs: {
        x: x + 100,
        y: y + 8,
        width: 10,
        height: 10,
        img: editIconSvg,
        cursor: 'pointer',
        opacity: 0
    }
});

stateStyles: {
    hover: {
        'big-rect': {
            opacity: 1
        },
        'entity-edit': {
            opacity: 1
        }
    },
    active: {
        'big-rect': {
            opacity: 1
        },
        'entity-edit': {
            opacity: 0
        }
    },
    selected: {
        'big-rect': {
            opacity: 0
        },
        'border-rect': {
            lineWidth: 2
        },
        'entity-edit': {
            opacity: 1
        }
    },
    inactive: {
        'big-rect': {
            opacity: 0
        },
        'border-rect': {
            opacity: 0.3
        },
        'entity-name': {
            opacity: 0.3
        },
        'entity-image': {
            opacity: 0.3
        },
        'entity-edit': {
            opacity: 0
        }
    }
}

// mouseenter节点
graph.on('node:mouseenter', (e) => {
    const { item } = e;
    if (item?.hasState('active')) {
        return;
    }
    if (item?.hasState('inactive')) {
        return;
    }
    if (item?.hasState('selected')) {
        return;
    }
    graph.setItemState(item!, 'hover', true);
});

// mouseleave节点
graph.on('node:mouseleave', (e) => {
    const { item } = e;
    if (item?.hasState('active')) {
        return;
    }
    if (item?.hasState('inactive')) {
        return;
    }
    graph.setItemState(item!, 'hover', false);
});

如果我把image改为图形，如rect，效果正常，即hover时才出现name为entity-edit的图形,鼠标移开后消失 但若是image，hover后，鼠标移开后 image竟然不会消失！

重现链接

https://g6.antv.antgroup.com/examples/item/customNode/#card

重现步骤

如上

我发现示例里面使用的是setState与attr方法直接操作

预期行为

期望效果hover时出现image，鼠标移开后消失，而不是image还存在

平台

• 操作系统: [macOS]
• 网页浏览器: [Google Chrome]
• G6 版本: [4.5.1 ... ]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response