tsparticles / tsparticles

tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
https://particles.js.org
MIT License
7.12k stars 794 forks source link

Improve Touch events support #4965

Open matteobruni opened 1 year ago

matteobruni commented 1 year ago

The touch events code is far from perfect, it doesn't support the multitouch and the tap detection is a mess. This could be a way to fix multiple issues (#4839 and #4951) in a single change. Every touch has an identifier and it must be used to track it to see if it's a tap, long tap or a movement. I think the tap can be under 300ms, otherwise it's a long tap that behaves like a movement. The multitouch support could be difficult, but it can be at least prepared for future implementations

Checklist - [X] `engine/src/Core/Utils/EventListeners.ts` ✅ Commit [`dcae1ab`](https://github.com/tsparticles/tsparticles/commit/dcae1abc7bfeaef40067bd7d1e2c6489b494026d)
• Rewrite the '_touchStart' function to store each touch event in a Map using its identifier as the key. Store the current time as the value. • Rewrite the '_touchEnd' function to calculate the duration of the touch event by subtracting the stored start time from the current time. Use this duration to determine whether the touch event was a tap (less than 300ms), long tap (more than 300ms), or movement. • Rewrite the '_mouseTouchMove' function to handle multiple simultaneous touch events. This will likely involve iterating over all active touch events and updating their positions individually. • Add a new function '_handleMultiTouch' to handle multitouch events. This function should iterate over all active touch events and apply the appropriate interaction for each one. • Update the '_mouseTouchClick' and '_mouseTouchFinish' functions to use the new '_handleMultiTouch' function.
Sandbox Execution Logs
trunk init 1/16 ✓
⡿ Downloading Trunk 1.15.0...
⡿ Downloading Trunk 1.15.0...
⢿ Downloading Trunk 1.15.0...
⣻ Downloading Trunk 1.15.0...
⣽ Downloading Trunk 1.15.0...
⣾ Downloading Trunk 1.15.0...
⣷ Downloading Trunk 1.15.0...
✔ Downloading Trunk 1.15.0... done
⡿ Verifying Trunk sha256...
✔ Verifying Trunk sha256... done
⡿ Unpacking Trunk...
✔ Unpacking Trunk... done

✔ 14 linters were enabled (.trunk/trunk.yaml)
  actionlint 1.6.25 (5 github-workflow files)
  checkov 2.4.9 (759 json, 15 yaml files)
  git-diff-check (2429 files)
  markdownlint 0.36.0 (221 markdown files) (created .markdownlint.yaml)
  osv-scanner 1.4.0 (1 lockfile file)
  oxipng 8.0.0 (35 png files)
  prettier 3.0.3 (4 html, 178 javascript, 759 json, 221 markdown, 1 prettier_supported_configs, 2 sass, 864 typescript, 14 yaml files)
  renovate 36.93.7 (2 renovate-config files)
  shellcheck 0.9.0 (1 shell file) (created .shellcheckrc)
  shfmt 3.6.0 (1 shell file)
  svgo 3.0.2 (11 svg files) (created svgo.config.js)
  trivy 0.45.0 (1 lockfile, 14 yaml files)
  trufflehog 3.56.0 (2430 files)
  yamllint 1.32.0 (14 yaml files) (created .yamllint.yaml)
Next Steps
 1. Read documentation
    Our documentation can be found at https://docs.trunk.io
 2. Get help and give feedback
    Join the Trunk community at https://slack.trunk.io
trunk fmt engine/src/Core/Utils/EventListeners.ts 2/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/2q59V.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 3/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/9g5kY.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 4/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/tzYVm.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 5/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/ohLDK.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 6/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/DfzOg.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 7/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/SjPtk.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 8/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/PRFc3.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 9/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/7UWZT.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 10/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/UnIe2.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 11/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/0yexs.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 12/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/S950s.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 13/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/5EcqJ.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 14/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/FpF7a.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 15/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/DXdId.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 16/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/M5lst.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
sweep-ai[bot] commented 8 months ago

Here's the PR! https://github.com/tsparticles/tsparticles/pull/5209.

⚡ Sweep Free Trial: I used GPT-4 to create this ticket. You have 2 GPT-4 tickets left for the month and 0 for the day. For more GPT-4 tickets, visit our payment portal.


Actions (click)


Step 1: 🔎 Searching

I found the following snippets in your repository. I will now analyze these snippets and come up with a plan.

Some code snippets I looked at (click to expand). If some file is missing from here, you can mention the path in the ticket description. https://github.com/tsparticles/tsparticles/blob/dcae1abc7bfeaef40067bd7d1e2c6489b494026d/markdown/Options/ManualParticles.md#L1-L11 https://github.com/tsparticles/tsparticles/blob/dcae1abc7bfeaef40067bd7d1e2c6489b494026d/engine/src/Options/Interfaces/IOptions.ts#L1-L142 https://github.com/tsparticles/tsparticles/blob/dcae1abc7bfeaef40067bd7d1e2c6489b494026d/markdown/Options/FullScreen.md#L1-L16 https://github.com/tsparticles/tsparticles/blob/dcae1abc7bfeaef40067bd7d1e2c6489b494026d/engine/src/Core/Utils/EventListeners.ts#L332-L544 https://github.com/tsparticles/tsparticles/blob/dcae1abc7bfeaef40067bd7d1e2c6489b494026d/engine/src/Options/Classes/Interactivity/Events/DivEvent.ts#L1-L117

Step 2: ⌨️ Coding

trunk init 1/16 ✓
⡿ Downloading Trunk 1.15.0...
⡿ Downloading Trunk 1.15.0...
⢿ Downloading Trunk 1.15.0...
⣻ Downloading Trunk 1.15.0...
⣽ Downloading Trunk 1.15.0...
⣾ Downloading Trunk 1.15.0...
⣷ Downloading Trunk 1.15.0...
✔ Downloading Trunk 1.15.0... done
⡿ Verifying Trunk sha256...
✔ Verifying Trunk sha256... done
⡿ Unpacking Trunk...
✔ Unpacking Trunk... done

✔ 14 linters were enabled (.trunk/trunk.yaml)
  actionlint 1.6.25 (5 github-workflow files)
  checkov 2.4.9 (759 json, 15 yaml files)
  git-diff-check (2429 files)
  markdownlint 0.36.0 (221 markdown files) (created .markdownlint.yaml)
  osv-scanner 1.4.0 (1 lockfile file)
  oxipng 8.0.0 (35 png files)
  prettier 3.0.3 (4 html, 178 javascript, 759 json, 221 markdown, 1 prettier_supported_configs, 2 sass, 864 typescript, 14 yaml files)
  renovate 36.93.7 (2 renovate-config files)
  shellcheck 0.9.0 (1 shell file) (created .shellcheckrc)
  shfmt 3.6.0 (1 shell file)
  svgo 3.0.2 (11 svg files) (created svgo.config.js)
  trivy 0.45.0 (1 lockfile, 14 yaml files)
  trufflehog 3.56.0 (2430 files)
  yamllint 1.32.0 (14 yaml files) (created .yamllint.yaml)
Next Steps
 1. Read documentation
    Our documentation can be found at https://docs.trunk.io
 2. Get help and give feedback
    Join the Trunk community at https://slack.trunk.io
trunk fmt engine/src/Core/Utils/EventListeners.ts 2/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/2q59V.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 3/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/9g5kY.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 4/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/tzYVm.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 5/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/ohLDK.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 6/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/DfzOg.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 7/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/SjPtk.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 8/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/PRFc3.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 9/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/7UWZT.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 10/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/UnIe2.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 11/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/0yexs.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 12/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/S950s.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 13/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/5EcqJ.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 14/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/FpF7a.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 15/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/DXdId.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Core/Utils/EventListeners.ts 16/16 ❌ (`1`)

  FAILURES  
 prettier  engine/src/Core/Utils/EventListeners.ts  .trunk/out/M5lst.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure


Step 3: 🔁 Code Review

Here are my self-reviews of my changes at sweep/improve-touch-events.

Here is the 1st review

The changes made in the file `engine/src/Core/Utils/EventListeners.ts` are mostly correct and align with the issue's requirements. However, there is one area that needs to be addressed: - The `_handleMultiTouch` function (lines 80-84) is currently not fully implemented. It's supposed to iterate over all active touch events and apply the appropriate interaction for each one. Please complete this function to ensure proper handling of multitouch events. Once this change is made, the code should fully address the issue.

I finished incorporating these changes.


🎉 Latest improvements to Sweep:


💡 To recreate the pull request edit the issue title or description. To tweak the pull request, leave a comment on the pull request. Join Our Discord