1# Combined Gestures
2
3Continuous recognition, parallel recognition, and exclusive recognition are supported for a group of gestures.
4
5>  **NOTE**
6>
7>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8
9## APIs
10
11GestureGroup(mode: GestureMode, ...gesture: GestureType[])
12
13**Atomic service API**: This API can be used in atomic services since API version 11.
14
15**Parameters**
16
17| Name | Type                                                    | Mandatory| Description                                                    |
18| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
19| mode    | [GestureMode](#gesturemode)                          | Yes  | Recognition mode of combined gestures.<br>Default value: **GestureMode.Sequence**     |
20| gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br>\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)<br>\| [PanGesture](ts-basic-gestures-pangesture.md)<br>\| [PinchGesture](ts-basic-gestures-pinchgesture.md)<br>\| [RotationGesture](ts-basic-gestures-rotationgesture.md)<br>\| [SwipeGesture](ts-basic-gestures-swipegesture.md)<br>\| [GestureGroup](#combined-gestures) | No  | One or more basic gestures to be recognized simultaneously. If this parameter is left empty, simultaneous recognition will not take effect.<br>**NOTE**<br>To add both tap and double-tap gestures for a component, add two TapGestures, with the tap gesture added after the double-tap gesture.|
21
22## GestureMode
23
24**Atomic service API**: This API can be used in atomic services since API version 11.
25
26| Name       | Description                                      |
27| --------- | ---------------------------------------- |
28| Sequence  | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. Once one gesture fails to be recognized, all subsequent gestures fail to be recognized.<br>Only the last gesture in the sequential recognition gesture group can respond to **onActionEnd**.|
29| Parallel  | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other.    |
30| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends.      |
31
32
33## Events
34
35| Name                                      | Description                                |
36| ---------------------------------------- | ------------------------------------ |
37| onCancel(event: () =&gt; void) | Callback for the GestureMode.Sequence cancellation event.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
38
39
40## Example
41
42This example demonstrates the sequential recognition of combined gestures, specifically long press and pan gestures, using **GestureGroup**.
43
44```ts
45// xxx.ets
46@Entry
47@Component
48struct GestureGroupExample {
49  @State count: number = 0
50  @State offsetX: number = 0
51  @State offsetY: number = 0
52  @State positionX: number = 0
53  @State positionY: number = 0
54  @State borderStyles: BorderStyle = BorderStyle.Solid
55
56  build() {
57    Column() {
58      Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
59        .fontSize(15)
60    }
61    .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
62    .height(150)
63    .width(200)
64    .padding(20)
65    .margin(20)
66    .border({ width: 3, style: this.borderStyles })
67    .gesture(
68      // The following combined gestures are recognized in sequential recognition mode. If the long press gesture event is not triggered correctly, the drag gesture event will not be triggered.
69      GestureGroup(GestureMode.Sequence,
70        LongPressGesture({ repeat: true })
71          .onAction((event?: GestureEvent) => {
72            if (event && event.repeat) {
73              this.count++
74            }
75            console.info('LongPress onAction')
76          }),
77        PanGesture()
78          .onActionStart(() => {
79            this.borderStyles = BorderStyle.Dashed
80            console.info('pan start')
81          })
82          .onActionUpdate((event?: GestureEvent) => {
83            if (event) {
84              this.offsetX = this.positionX + event.offsetX
85              this.offsetY = this.positionY + event.offsetY
86            }
87            console.info('pan update')
88          })
89          .onActionEnd(() => {
90            this.positionX = this.offsetX
91            this.positionY = this.offsetY
92            this.borderStyles = BorderStyle.Solid
93            console.info('pan end')
94          })
95      )
96        .onCancel(() => {
97          console.info('sequence gesture canceled')
98        })
99    )
100  }
101}
102```
103
104Diagram:
105
106In sequence recognition mode the long press gesture event is triggered first.
107
108![en-us_image_0000001174104384](figures/en-us_image_0000001174104384.png)
109
110After the long press gesture is recognized, the drag gesture event is triggered.
111
112 ![en-us_image1_0000001174104384](figures/en-us_image1_0000001174104384.png)
113