This is just the beginning

At the beginning, this article is the first in a series on how to develop a gesture library in typescript for PC and mobile any-Touch, and how to get 100% test coverage with Jest.

Past directory

Developing a TypeScript Gesture Library – (2) What are common Gestures for Web development?

Developing gesture libraries in TypeScript – (3) Unify Mouse and Touch events

With less than 30 lines, implement a drawer with any-touch

We’re not going to write code today

In today’s article we will not talk about the code, we will talk about the gestures and the logic of gestures, understand the logic and then write code is easy.

Thank you must come first

  1. Thanks to open source Hammer. Js, I learned a lot about gestures.

  2. Thanks also to the author of this article, the address of the article, which details the calculation of rotation and zoom gesture changes.

So what are some common gestures?

Back to the subject, common gestures are: Tap, press, pan, swipe, pinch, rotate, All the gestures are on the mobile end through different trigger and distinguish the touch events (PC is mouseup/mousemove/mousedown, about how to identify with the mouse gestures, the back of the article will be a separate chapter).

Here’s a demo where I’ve put all the gesture recognition.

The tap (click)

As we all know, click on mobile has a 300ms delay (the browser has a 300ms delay in order to recognize the double click operation, because the mobile browser defaults to double click to scale the page). To avoid “clickthrough”, we created a TAP event, PreventDefault also prevents click from happening via preventDefault.

  1. Trigger a TouchStart and touchEnd.
  2. The distance between the touchStart and TouchEnd coordinates should not be more than 2px.
  3. After touchStart is triggered, touchEnd must be triggered within 250ms, otherwise it will be identified as Press.

Doubletap (double)

Two consecutive taps trigger a double tap. The double tap works as follows: Tap will not be triggered after each tap, but wait for 300ms to see if there is a double tap trigger, if there is not a double tap trigger, otherwise the double tap will be triggered, and the single click will not trigger.

  1. The interval between two clicks cannot exceed 300ms.
  2. The distance between two clicks should not be more than 9px.

Press (by)

Press time is triggered. Press time is triggered. After press is triggered, press event is triggered.

  1. The distance between touchStart and TouchMove should not be more than 9px.
  2. Press will be triggered after 251ms even if the contact does not leave the screen. This 251ms corresponds to Tap requirement 3.

Pan (drag)

(1 or more) Holding the screen down will trigger pan every time you move it. Here are a few examples:

  1. The drag and drop action is called pan.
  2. Drag and drop of the Draw component shows more content.
  3. The tabs component is dragged to show more tabs. Pan is the most common gesture used in component development.

Swipe (cross)

Swipe (1 or more fingers) Press and hold the screen and swipe quickly, triggering swipe when the finger leaves the screen. The necessary conditions are as follows:

  1. Slide over a certain distance (e.g. 10px).
  2. Swipe fast enough (greater than 0.3px/ms). Swipe is the word for “move to the next scene” for the casting component.

Pinch (mesh)

Hold down the screen with 2 or more fingers to change the distance between the two fingers. Pinch shows when the distance changes. Common in gallery components, used to zoom in/out of images.

The rotate (rotation)

Rotate. Hold down the screen with 2 or more fingers and trigger rotate by changing the Angle between the two fingers and the X-axis of the coordinate system. Often used in image processing to rotate images.

The source code

The specific logic of gesture recognition above can be seen in my warehouse, address: github.com/any86/any-t…

To be continued

This time to talk about so much, the back of the article specifically to talk about what to see everyone’s reply to listen to what, look forward to everyone’s reply, I love the front end, but the ability is limited, there is wrong to talk about please give advice.

Explanation of related concepts

Click through

When the upper and lower z axes of A/B overlap, the upper A disappears or moves away, and the B element itself has A default click event (such as the A tag) or is bound to the click event. In this case, clicking on the overlap of A/B will result in dot penetration.