VisActor / VisActor/VRender

[Bug] tap event will be triggered when swipe

Open
#1,524 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
263
Forks
50
Avg merge
1d 8h
Merged PRs (30d)
16

Description

Version

no

Link to Minimal Reproduction

no

Steps to Reproduce
import { default as VChart } from '../../../src/index';
const spec = {
  type: 'line',
  data: {
    values: [
      {
        time: '2:00',
        value: 8
      },
      {
        time: '4:00',
        value: 9
      },
      {
        time: '6:00',
        value: 11
      },
      {
        time: '8:00',
        value: 14
      },
      {
        time: '10:00',
        value: 16
      },
      {
        time: '12:00',
        value: 17
      },
      {
        time: '14:00',
        value: 17
      },
      {
        time: '16:00',
        value: 16
      },
      {
        time: '18:00',
        value: 15
      }
    ]
  },
  xField: 'time',
  yField: 'value'
};

const chartContainer = document.getElementById('chart');

new Array(10).fill(0).forEach((entry, index) => {
  const dom = document.createElement('div');
  dom.style.width = '100%';
  dom.style.height = '400px';
  dom.style.background = 'pink';
  dom.style.marginBottom = '10px';
  dom.style.position = 'relative';

  chartContainer?.appendChild(dom);
  const textContainer = document.createElement('div');
  textContainer.style.position = 'absolute';
  textContainer.style.top = '100px';
  textContainer.style.left = '80px';
  textContainer.style.fontSize = '12px';
  textContainer.style.color = 'red';
  textContainer.style.pointerEvents = 'none';
  textContainer.style.maxHeight = '200px';
  textContainer.innerText = '这是一个空的内容';

  dom.appendChild(textContainer);
  const vchart1 = new VChart(
    {
      ...spec,
      title: {
        text: `chart-${index}`
      }
    },
    { dom: dom, mode: 'mobile-browser', supportsTouchEvents: false }
  );
  vchart1.renderSync();

  vchart1.on('tap', e => {
    console.log('tap event', e, `chart ${index}`);
    textContainer.innerText = (textContainer.innerText || '') + `\ntap 事件触发${index}`;
  });

  vchart1.on('pointerdown', e => {
    console.log('pointerdown event', e, `chart ${index}`);
    textContainer.innerText = (textContainer.innerText || '') + `\npointerdown 事件触发${index}`;
  });

  vchart1.on('pointerup', e => {
    console.log('pointerup event', e, `chart ${index}`);
    textContainer.innerText = (textContainer.innerText || '') + `\npointerup 事件触发${index}`;
  });

  vchart1.on('click', e => {
    console.log('click event', e, `chart ${index}`);
    textContainer.innerText = (textContainer.innerText || '') + `\nclick 事件触发${index}`;
  });

  vchart1.on('press', e => {
    console.log('press event', e, `chart ${index}`);
    textContainer.innerText = (textContainer.innerText || '') + `\npress 事件触发${index}`;
  });

  vchart1.on('touchend', e => {
    console.log('touchend event', e, `chart ${index}`);
    textContainer.innerText = (textContainer.innerText || '') + `\ntouchend 事件触发${index}`;
  });

  // dom.addEventListener('tap', e => {
  //   console.log('tap event', e, `chart ${index}`);
  //   textContainer.innerText = (textContainer.innerText || '') + `\ntap 事件触发${index}`;
  // });

  // dom.addEventListener('pointerdown', e => {
  //   console.log('pointerdown event', e, `chart ${index}`);
  //   textContainer.innerText = (textContainer.innerText || '') + `\npointerdown 事件触发${index}`;
  // });

  // dom.addEventListener('pointerup', e => {
  //   console.log('pointerup event', e, `chart ${index}`);
  //   textContainer.innerText = (textContainer.innerText || '') + `\npointerup 事件触发${index}`;
  // });

  // dom.addEventListener('click', e => {
  //   console.log('click event', e, `chart ${index}`);
  //   textContainer.innerText = (textContainer.innerText || '') + `\nclick 事件触发${index}`;
  // });

  // dom.addEventListener('press', e => {
  //   console.log('press event', e, `chart ${index}`);
  //   textContainer.innerText = (textContainer.innerText || '') + `\npress 事件触发${index}`;
  // });

  // dom.addEventListener('touchend', e => {
  //   console.log('touchend event', e, `chart ${index}`);
  //   textContainer.innerText = (textContainer.innerText || '') + `\ntouchend 事件触发${index}`;
  // });
});

Current Behavior

按压图表区域的时候,快速左右扫动

img_v3_02g4_e09cf072-8185-4f01-b8bc-5b0f092fff5g

问题1:

  1. 上诉交互不应该触发tap事件
  2. 现在 packages/vrender-core/src/event/event-manager.tspackages/vrender-kits/src/event/extension/gesture.ts 都会抛 tap 事件命名冲突了
Expected Behavior

不触发tap

Environment
- OS:
- Browser:
- Framework:
Any additional comments?

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the swipe interaction from the issue example in mobile-browser mode. Read packages/vrender-core/src/event/event-manager.ts and packages/vrender-kits/src/event/extension/gesture.ts to trace the tap handling and naming overlap. Done means a quick horizontal swipe over the chart does not emit a tap event.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.