antvis / S2

⚡️ A practical visualization library for tabular analysis.
https://s2.antv.antgroup.com
MIT License
1.46k stars 193 forks source link

🐛表格滚动条没有触发hover #2837

Open xuefeibai opened 1 month ago

xuefeibai commented 1 month ago

🏷 Version

Package Version
@antv/s2 1.49.1
@antv/s2-react
@antv/s2-vue

Sheet Type

🖋 Description

dom容器宽高和表格宽高一样, 表格渲染后, 设置滚动条隐藏, 然后给dom容器添加mouseenter和mouseleave事件, 鼠标移入显示滚动条, 鼠标移出隐藏滚动条. 且表格滚动条hoverSize设为10px 现在垂直滚动条位于表格右侧, 鼠标缓慢从右侧移入表格滚动条所在位置, 滚动条显示了, 但没有hover

⌨️ Code Snapshots

初步定位问题 滚动条先显示后移入, 能正常hover. 滚动条先隐藏, 后移入(自动触发显示), 不能正常hover 这两种情况对比跟踪, 原因是

EventController.propotype._emitMouseoverEvents = function (event, pointInfo, fromShape, toShape) {
  var el = this.canvas.get('el);
  if (fromShape !== toShape) {
    if (fromShape) {
      // 触发fromShape的mouseout和mouseleave
    }
    if (toShape) {
      // 触发toShape的mouseover和mouseenter
    }
  }
}

如上代码所示, toShape是EventController._triggerEvent根据pointInfo调用EventController._getShape取到的滚动条thumbLine, fromShape是EventController.currentShape也是滚动条thumbLine, 因此_emitMouseoverEvents没有触发滚动条的mouseover和mouseenter事件, 所以滚动条不知道该事件

🔗 Reproduce Link

沙盒示例

🤔 Steps to Reproduce

😊 Expected Behavior

触发滚动条的onTrackMouseOver事件, 使滚动条正常处理hoverSize 如果不在当前版本修复, 请提供一下修复方案

😅 Current Behavior

没有触发滚动条的onTrackMouseOver事件

💻 System information

Environment Info
System
Browser