Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

【v5】图例上 hover 一下后,style cursor 就失效了 #5533

Closed
Deathsteps opened this issue Sep 12, 2023 · 3 comments · Fixed by #5553
Closed

【v5】图例上 hover 一下后,style cursor 就失效了 #5533

Deathsteps opened this issue Sep 12, 2023 · 3 comments · Fixed by #5553
Labels

Comments

@Deathsteps
Copy link
Contributor

问题描述

没法截图,手动交互一下,比较明显

.style('cursor', 'pointer') 手形在,hover 图例区后,再 hover 在柱子上,就不出手形了

image

期望结果

图例不影响 style cursor 效果

如何重现

官方代码修改

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart
  .interval()
  .data([
    { name: 'MODIFY', value: 138, washaway: 0.21014492753623193 },
    { name: 'PRERELEASE', value: 109, washaway: 0.5596330275229358 },
    { name: 'RELEASING', value: 48, washaway: 0 },
  ])
  .encode('x', 'name')
  .encode('y', 'value')
  .encode('color', 'name')
  .encode('size', 80)
  .style('radiusTopLeft', 10)
  .style('radiusTopRight', 20)
  .style('radiusBottomRight', 30)
  .style('radiusBottomLeft', 40)
  .style('cursor', 'pointer');

chart.render();

额外信息

  • G2 5.1.1 版本
@pearmini
Copy link
Member

这个原因应该是 cursor 是一个 canvas 的全局属性,移除图例会设置为默认的 cusor,更好的做法是还原之前的 cusor。

@pearmini
Copy link
Member

感兴趣来修复一下这个 bug 吗?大概就是修改一下 src/interaction/utils.ts 里面的 setCursorrestoreCursor。一种思路如下:

function useCursor() {
  // ...
  const originCursor = dom.style.cursor;
 // ...
  const setCursor = () => {};
  const restoreCursor = () => {dom.style.cursor = originCursor};
  return [setCursor, restoreCursor];
}

@Deathsteps
Copy link
Contributor Author

感兴趣来修复一下这个 bug 吗?大概就是修改一下 src/interaction/utils.ts 里面的 setCursorrestoreCursor。一种思路如下:

function useCursor() {
  // ...
  const originCursor = dom.style.cursor;
 // ...
  const setCursor = () => {};
  const restoreCursor = () => {dom.style.cursor = originCursor};
  return [setCursor, restoreCursor];
}

这两天我试试?:sweat_smile:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants