# TouchInputComponent Touch input component

# Overview

TouchInputComponent provides the ability to monitor and handle touch events.

# Notice

It is generally recommended to use the UIButton component to achieve button functions. But if you need to implement custom touch capabilities, you can refer to this document.

# How to use

const comp = entity.addComponent(engine.TouchInputComponent);

# Touch callback


const comp = entity.getComponent(engine.KeyboardInputComponent);

comp.onTouchStart.add(function (comp, event) {
  console.log(nodeName, "TOUCH_START", event);
});
comp.onTouchEnd.add(function (comp, event) {
  console.log(nodeName, "TOUCH_END", event);
});
comp.onTouchMove.add(function (comp, event) {
  console.log(nodeName, "TOUCH_MOVE", event);
});
comp.onTouchCancel.add(function (comp, event) {
  console.log(nodeName, "TOUCH_CANCEL", event);
});
comp.onTouchEnter.add(function (comp, event) {
  console.log(nodeName, "TOUCH_ENTER", event);
});
comp.onTouchLeave.add(function (comp, event) {
  console.log(nodeName, "TOUCH_LEAVE", event);
});
comp.onTouchOver.add(function (comp, event) {
  console.log(nodeName, "TOUCH_OVER", event);
});
comp.onClick.add(function (comp, event) {
  console.log(nodeName, "CLICK", event);
});

# Attributes

Property name	Type	Default value	Description
touchThrough	boolean	true	Whether to allow touch events to penetrate
hitArea	engine.Rect	null	The touch event response area, with transform as the origin, y-axis up and x-axis to the right When the value is null, trasform.anchor is the origin and trasform.size is the rectangle size The area is the touch event response area
clickMovementThreshold	number	Infinity	When the user starts to touch and moves a certain distance before releasing, then a threshold is needed to determine whether to trigger a click event.

# TouchInputEvent

Property name	Type	Default value	Description
touches	TouchPoint[]	[]	Touch information, each TouchPoint contains an identifier attribute of type number to mark the touch index, `readonly position: DeepImmutable<Vector2>`,`readonly worldPosition: DeepImmutable<Vector2>`,`readonly startWorldPosition: DeepImmutable<Vector2>`The three attributes mark some coordinate information of the event contact in the game world. Users no longer need to maintain the state or calculate the value by themselves, which can save a lot of overhead.
allowThrough	boolean		Read only, whether it can penetrate
originalEvent	TouchEvent		Client original event

# TouchInputEvent.prototype.stopTouchThrough

Used to prevent the event from continuing to penetrate. This method can prevent the event from continuing to penetrate when the touchThrough property is true.

# Priority and contact merge

There may be many different types of events on an object, and they will be triggered in order of priority: TOUCH_START <TOUCH_MOVE <TOUCH_ENTER <TOUCH_LEAVE <TOUCH_END <CLICK <TOUCH_CANCEL

If multiple contacts of the same type are triggered at the same time, multiple events of the same type will not be generated, but only one event, and all the contact information is in the touches list property of the event.