@vived/app 2.12.0 → 2.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,9 +1,15 @@
|
|
|
1
|
+
import { Vector2 } from "../ValueObjects";
|
|
2
|
+
export interface MouseInputEvent {
|
|
3
|
+
position: Vector2;
|
|
4
|
+
button: number;
|
|
5
|
+
event: MouseEvent;
|
|
6
|
+
}
|
|
1
7
|
export interface MouseController {
|
|
2
|
-
onClick?: (e:
|
|
3
|
-
onDown?: (e:
|
|
4
|
-
onUp?: (e:
|
|
5
|
-
onMove?: (e:
|
|
6
|
-
onWheel?: (e:
|
|
8
|
+
onClick?: (e: MouseInputEvent) => void;
|
|
9
|
+
onDown?: (e: MouseInputEvent) => void;
|
|
10
|
+
onUp?: (e: MouseInputEvent) => void;
|
|
11
|
+
onMove?: (e: MouseInputEvent) => void;
|
|
12
|
+
onWheel?: (e: MouseInputEvent) => void;
|
|
7
13
|
}
|
|
8
14
|
export interface MouseInput {
|
|
9
15
|
eventElement: HTMLElement | undefined;
|
|
@@ -43,9 +43,10 @@ class MouseInputImp {
|
|
|
43
43
|
};
|
|
44
44
|
this.onMouseDown = (e) => {
|
|
45
45
|
e.preventDefault();
|
|
46
|
+
const inputEvt = this.makeMouseInputEvent(e);
|
|
46
47
|
this.controllers.forEach((c) => {
|
|
47
48
|
if (c.onDown) {
|
|
48
|
-
c.onDown(
|
|
49
|
+
c.onDown(inputEvt);
|
|
49
50
|
}
|
|
50
51
|
});
|
|
51
52
|
this.isPressed = true;
|
|
@@ -53,9 +54,10 @@ class MouseInputImp {
|
|
|
53
54
|
};
|
|
54
55
|
this.onMouseUp = (e) => {
|
|
55
56
|
e.preventDefault();
|
|
57
|
+
const inputEvt = this.makeMouseInputEvent(e);
|
|
56
58
|
this.controllers.forEach((c) => {
|
|
57
59
|
if (c.onUp) {
|
|
58
|
-
c.onUp(
|
|
60
|
+
c.onUp(inputEvt);
|
|
59
61
|
}
|
|
60
62
|
});
|
|
61
63
|
this.isPressed = false;
|
|
@@ -67,7 +69,7 @@ class MouseInputImp {
|
|
|
67
69
|
if (delta.magnitued < this.maxClickMovement) {
|
|
68
70
|
this.controllers.forEach((c) => {
|
|
69
71
|
if (c.onClick) {
|
|
70
|
-
c.onClick(
|
|
72
|
+
c.onClick(inputEvt);
|
|
71
73
|
}
|
|
72
74
|
});
|
|
73
75
|
}
|
|
@@ -75,9 +77,10 @@ class MouseInputImp {
|
|
|
75
77
|
};
|
|
76
78
|
this.onMouseMove = (e) => {
|
|
77
79
|
e.preventDefault();
|
|
80
|
+
const inputEvt = this.makeMouseInputEvent(e);
|
|
78
81
|
this.controllers.forEach((c) => {
|
|
79
82
|
if (c.onMove) {
|
|
80
|
-
c.onMove(
|
|
83
|
+
c.onMove(inputEvt);
|
|
81
84
|
}
|
|
82
85
|
});
|
|
83
86
|
if (!this.pressEvent)
|
|
@@ -93,9 +96,10 @@ class MouseInputImp {
|
|
|
93
96
|
e.preventDefault();
|
|
94
97
|
if (!this.isPressed)
|
|
95
98
|
return;
|
|
99
|
+
const inputEvt = this.makeMouseInputEvent(e);
|
|
96
100
|
this.controllers.forEach((c) => {
|
|
97
101
|
if (c.onUp) {
|
|
98
|
-
c.onUp(
|
|
102
|
+
c.onUp(inputEvt);
|
|
99
103
|
}
|
|
100
104
|
});
|
|
101
105
|
this.pressEvent = undefined;
|
|
@@ -103,9 +107,10 @@ class MouseInputImp {
|
|
|
103
107
|
};
|
|
104
108
|
this.onWheel = (e) => {
|
|
105
109
|
e.preventDefault();
|
|
110
|
+
const inputEvt = this.makeMouseInputEvent(e);
|
|
106
111
|
this.controllers.forEach((c) => {
|
|
107
112
|
if (c.onWheel) {
|
|
108
|
-
c.onWheel(
|
|
113
|
+
c.onWheel(inputEvt);
|
|
109
114
|
}
|
|
110
115
|
});
|
|
111
116
|
};
|
|
@@ -113,4 +118,14 @@ class MouseInputImp {
|
|
|
113
118
|
get eventElement() {
|
|
114
119
|
return this._eventElement;
|
|
115
120
|
}
|
|
121
|
+
makeMouseInputEvent(event) {
|
|
122
|
+
const px = event.offsetX;
|
|
123
|
+
const py = event.offsetY;
|
|
124
|
+
const button = event.button;
|
|
125
|
+
return {
|
|
126
|
+
position: new ValueObjects_1.Vector2(px, py),
|
|
127
|
+
button,
|
|
128
|
+
event,
|
|
129
|
+
};
|
|
130
|
+
}
|
|
116
131
|
}
|
|
@@ -1,9 +1,20 @@
|
|
|
1
1
|
import { Vector2 } from "../ValueObjects";
|
|
2
|
+
export interface TouchInputEvent {
|
|
3
|
+
touchCount: number;
|
|
4
|
+
touchCenter: Vector2;
|
|
5
|
+
touches: TouchData[];
|
|
6
|
+
event: TouchEvent;
|
|
7
|
+
}
|
|
8
|
+
export interface TouchData {
|
|
9
|
+
id: number;
|
|
10
|
+
position: Vector2;
|
|
11
|
+
touch?: Touch;
|
|
12
|
+
}
|
|
2
13
|
export interface TouchController {
|
|
3
|
-
onTouchStart?: (e:
|
|
4
|
-
onTouchMove?: (e:
|
|
5
|
-
onTouchEnd?: (e:
|
|
6
|
-
onTouchCancel?: (e:
|
|
14
|
+
onTouchStart?: (e: TouchInputEvent) => void;
|
|
15
|
+
onTouchMove?: (e: TouchInputEvent) => void;
|
|
16
|
+
onTouchEnd?: (e: TouchInputEvent) => void;
|
|
17
|
+
onTouchCancel?: (e: TouchInputEvent) => void;
|
|
7
18
|
}
|
|
8
19
|
export interface TouchInput {
|
|
9
20
|
eventElement: HTMLElement | undefined;
|
|
@@ -11,9 +22,6 @@ export interface TouchInput {
|
|
|
11
22
|
setEventElement: (eventElement: HTMLElement) => void;
|
|
12
23
|
clearInputElement: () => void;
|
|
13
24
|
updateInputElementBounds: () => void;
|
|
14
|
-
getTouchOffsetPosition: (touch: Touch) => Vector2;
|
|
15
|
-
getDistatnceBetweenTouches: (touch1: Touch, touch2: Touch) => number;
|
|
16
|
-
getTouchsCenter: (touches: TouchList) => Vector2;
|
|
17
25
|
registerController: (controller: TouchController) => void;
|
|
18
26
|
removeController: (controller: TouchController) => void;
|
|
19
27
|
}
|
|
@@ -24,26 +24,6 @@ class TouchInputImp {
|
|
|
24
24
|
const y = touch.clientY - this.eventElementBounds.y;
|
|
25
25
|
return new ValueObjects_1.Vector2(x, y);
|
|
26
26
|
};
|
|
27
|
-
this.getDistatnceBetweenTouches = (touch1, touch2) => {
|
|
28
|
-
const t1 = this.getTouchOffsetPosition(touch1);
|
|
29
|
-
const t2 = this.getTouchOffsetPosition(touch2);
|
|
30
|
-
const delta = ValueObjects_1.Vector2.subtract(t2, t2);
|
|
31
|
-
return delta.magnitued;
|
|
32
|
-
};
|
|
33
|
-
this.getTouchsCenter = (touches) => {
|
|
34
|
-
const touchCount = touches.length;
|
|
35
|
-
if (touchCount === 0)
|
|
36
|
-
return ValueObjects_1.Vector2.zero();
|
|
37
|
-
let sumX = 0;
|
|
38
|
-
let sumY = 0;
|
|
39
|
-
for (let i = 0; i < touchCount; i++) {
|
|
40
|
-
const touch = touches[i];
|
|
41
|
-
const touchPos = this.getTouchOffsetPosition(touch);
|
|
42
|
-
sumX += touchPos.x;
|
|
43
|
-
sumY += touchPos.y;
|
|
44
|
-
}
|
|
45
|
-
return new ValueObjects_1.Vector2(sumX / touches.length, sumY / touches.length);
|
|
46
|
-
};
|
|
47
27
|
this.setEventElement = (eventElement) => {
|
|
48
28
|
if (this._eventElement)
|
|
49
29
|
this.clearInputElement();
|
|
@@ -56,33 +36,37 @@ class TouchInputImp {
|
|
|
56
36
|
};
|
|
57
37
|
this.onTouchStart = (e) => {
|
|
58
38
|
e.preventDefault();
|
|
39
|
+
const touchInput = this.createTouchInputEvent(e);
|
|
59
40
|
this.controllers.forEach((c) => {
|
|
60
41
|
if (c.onTouchStart) {
|
|
61
|
-
c.onTouchStart(
|
|
42
|
+
c.onTouchStart(touchInput);
|
|
62
43
|
}
|
|
63
44
|
});
|
|
64
45
|
};
|
|
65
46
|
this.onTouchMove = (e) => {
|
|
66
47
|
e.preventDefault();
|
|
48
|
+
const touchInput = this.createTouchInputEvent(e);
|
|
67
49
|
this.controllers.forEach((c) => {
|
|
68
50
|
if (c.onTouchMove) {
|
|
69
|
-
c.onTouchMove(
|
|
51
|
+
c.onTouchMove(touchInput);
|
|
70
52
|
}
|
|
71
53
|
});
|
|
72
54
|
};
|
|
73
55
|
this.onTouchEnd = (e) => {
|
|
74
56
|
e.preventDefault();
|
|
57
|
+
const touchInput = this.createTouchInputEvent(e);
|
|
75
58
|
this.controllers.forEach((c) => {
|
|
76
59
|
if (c.onTouchEnd) {
|
|
77
|
-
c.onTouchEnd(
|
|
60
|
+
c.onTouchEnd(touchInput);
|
|
78
61
|
}
|
|
79
62
|
});
|
|
80
63
|
};
|
|
81
64
|
this.onTouchCancel = (e) => {
|
|
82
65
|
e.preventDefault();
|
|
66
|
+
const touchInput = this.createTouchInputEvent(e);
|
|
83
67
|
this.controllers.forEach((c) => {
|
|
84
68
|
if (c.onTouchCancel) {
|
|
85
|
-
c.onTouchCancel(
|
|
69
|
+
c.onTouchCancel(touchInput);
|
|
86
70
|
}
|
|
87
71
|
});
|
|
88
72
|
};
|
|
@@ -108,4 +92,49 @@ class TouchInputImp {
|
|
|
108
92
|
get eventElement() {
|
|
109
93
|
return this._eventElement;
|
|
110
94
|
}
|
|
95
|
+
createTouchInputEvent(event) {
|
|
96
|
+
const touches = [];
|
|
97
|
+
const touchCount = event.touches.length;
|
|
98
|
+
let minX = 0;
|
|
99
|
+
let maxX = 0;
|
|
100
|
+
let minY = 0;
|
|
101
|
+
let maxY = 0;
|
|
102
|
+
for (let i = 0; i < touchCount; i++) {
|
|
103
|
+
const touch = event.touches[i];
|
|
104
|
+
const position = this.getTouchOffsetPosition(touch);
|
|
105
|
+
touches.push({
|
|
106
|
+
id: touch.identifier,
|
|
107
|
+
touch,
|
|
108
|
+
position,
|
|
109
|
+
});
|
|
110
|
+
if (i === 0) {
|
|
111
|
+
minX = position.x;
|
|
112
|
+
maxX = position.x;
|
|
113
|
+
minY = position.y;
|
|
114
|
+
maxY = position.y;
|
|
115
|
+
}
|
|
116
|
+
else {
|
|
117
|
+
minX = Math.min(minX, position.x);
|
|
118
|
+
maxX = Math.max(maxX, position.x);
|
|
119
|
+
minY = Math.min(minY, position.y);
|
|
120
|
+
maxY = Math.max(maxY, position.y);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
let cntX = 0;
|
|
124
|
+
let cntY = 0;
|
|
125
|
+
if (touchCount === 1) {
|
|
126
|
+
cntX = maxX;
|
|
127
|
+
cntY = maxY;
|
|
128
|
+
}
|
|
129
|
+
else {
|
|
130
|
+
cntX = minX + (maxX - minX) / 2;
|
|
131
|
+
cntY = minY + (maxY - minY) / 2;
|
|
132
|
+
}
|
|
133
|
+
return {
|
|
134
|
+
touchCenter: new ValueObjects_1.Vector2(cntX, cntY),
|
|
135
|
+
touchCount,
|
|
136
|
+
touches,
|
|
137
|
+
event,
|
|
138
|
+
};
|
|
139
|
+
}
|
|
111
140
|
}
|