1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
import * as React from 'react';
import { action } from 'mobx';
import { InteractionUtils } from '../util/InteractionUtils';
export abstract class Touchable<T = {}> extends React.Component<T> {
protected _touchDrag: boolean = false;
protected prevPoints: Map<number, React.Touch> = new Map<number, React.Touch>();
public FirstX: number = 0;
public FirstY: number = 0;
public SecondX: number = 0;
public SecondY: number = 0;
/**
* When a touch even starts, we keep track of each touch that is associated with that event
*/
@action
protected onTouchStart = (e: React.TouchEvent): void => {
for (let i = 0; i < e.targetTouches.length; i++) {
const pt: any = e.targetTouches.item(i);
// pen is also a touch, but with a radius of 0.5 (at least with the surface pens). i doubt anyone's fingers are 2 pixels wide,
// and this seems to be the only way of differentiating pen and touch on touch events
if (pt.radiusX > 2 && pt.radiusY > 2) {
this.prevPoints.set(pt.identifier, pt);
}
}
if (this.prevPoints.size) {
switch (e.targetTouches.length) {
case 1:
this.handle1PointerDown(e);
break;
case 2:
this.handle2PointersDown(e);
}
document.removeEventListener("touchmove", this.onTouch);
document.addEventListener("touchmove", this.onTouch);
document.removeEventListener("touchend", this.onTouchEnd);
document.addEventListener("touchend", this.onTouchEnd);
}
}
/**
* Handle touch move event
*/
@action
protected onTouch = (e: TouchEvent): void => {
// if we're not actually moving a lot, don't consider it as dragging yet
// if (!InteractionUtils.IsDragging(this.prevPoints, e.targetTouches, 5) && !this._touchDrag) return;
this._touchDrag = true;
switch (e.targetTouches.length) {
case 1:
this.handle1PointerMove(e);
break;
case 2:
this.handle2PointersMove(e);
break;
}
for (let i = 0; i < e.targetTouches.length; i++) {
const pt = e.targetTouches.item(i);
if (pt) {
if (this.prevPoints.has(pt.identifier)) {
this.prevPoints.set(pt.identifier, pt);
}
else {
this.prevPoints.set(pt.identifier, pt);
}
}
}
}
@action
protected onTouchEnd = (e: TouchEvent): void => {
this._touchDrag = false;
e.stopPropagation();
// remove all the touches associated with the event
for (let i = 0; i < e.targetTouches.length; i++) {
const pt = e.targetTouches.item(i);
if (pt) {
if (this.prevPoints.has(pt.identifier)) {
this.prevPoints.delete(pt.identifier);
}
}
}
if (e.targetTouches.length === 0) {
this.prevPoints.clear();
}
this.cleanUpInteractions();
}
cleanUpInteractions = (): void => {
document.removeEventListener("touchmove", this.onTouch);
document.removeEventListener("touchend", this.onTouchEnd);
}
handle1PointerMove = (e: TouchEvent): any => {
e.stopPropagation();
e.preventDefault();
}
handle2PointersMove = (e: TouchEvent): any => {
e.stopPropagation();
e.preventDefault();
}
handle1PointerDown = (e: React.TouchEvent): any => { };
handle2PointersDown = (e: React.TouchEvent): any => { };
}
|
