Skip to content

Commit 47f72ee

Browse files
surunzisurunzi
committed
feat: emulateTouchFromMouseEvent
1 parent 079fe9b commit 47f72ee

File tree

3 files changed

+150
-5
lines changed

3 files changed

+150
-5
lines changed

‎devtools/target.html‎

Lines changed: 51 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,68 @@
99
.motto {
1010
display: inline-block;
1111
}
12+
.scroll {
13+
margin-top: 15px;
14+
border: 1px solid black;
15+
width: 400px;
16+
height: 200px;
17+
overflow: auto;
18+
}
19+
.big {
20+
width: 300px;
21+
height: 300px;
22+
margin-top: 15px;
23+
background-color: red;
24+
}
25+
.small {
26+
width: 100px;
27+
height: 100px;
28+
margin-top: 15px;
29+
background-color: blue;
30+
}
1231
</style>
1332
<script src="chobitsu.js"></script>
1433
</head>
1534
<body>
1635
<div class="motto">Hello Chii!</div>
17-
<button onclick="reload()">Reload</button>
36+
<button id="reload">Reload</button>
37+
<button id="click">Click</button>
38+
<button id="touch">Touch</button>
39+
<script>
40+
document.getElementById('reload').addEventListener('click', function () {
41+
location.reload()
42+
})
43+
document.getElementById('click').addEventListener('click', function () {
44+
console.log('click')
45+
})
46+
document
47+
.getElementById('touch')
48+
.addEventListener('touchstart', function () {
49+
console.log('touch')
50+
})
51+
</script>
52+
<div class="scroll">
53+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
54+
Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies
55+
sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a,
56+
semper congue, euismod non, mi. Proin porttitor, orci nec nonummy
57+
molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
58+
Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a,
59+
enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor.
60+
Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent
61+
blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales.
62+
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
63+
cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque
64+
fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
65+
</div>
66+
<div class="big"></div>
67+
<div class="small"></div>
1868
<script>
1969
console.log('Page loaded!')
2070
setTimeout(function () {
2171
console.log('Hello Chii')
2272
fetch(location.href)
2373
}, 1000)
24-
window.reload = function () {
25-
location.reload()
26-
}
2774
</script>
2875
<script>
2976
function testWs() {

‎src/domains/Input.ts‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import isUndef from 'licia/isUndef'
2+
import toBool from 'licia/toBool'
3+
import Protocol from 'devtools-protocol'
4+
import Input = Protocol.Input
5+
6+
let isClick = false
7+
8+
export function emulateTouchFromMouseEvent(
9+
params: Input.EmulateTouchFromMouseEventRequest
10+
) {
11+
const { type, x, y, deltaX, deltaY } = params
12+
13+
const el = document.elementFromPoint(x, y) || document.documentElement
14+
15+
switch (type) {
16+
case 'mousePressed':
17+
isClick = true
18+
triggerTouchEvent('touchstart', el, x, y)
19+
break
20+
case 'mouseMoved':
21+
isClick = false
22+
triggerTouchEvent('touchmove', el, x, y)
23+
break
24+
case 'mouseReleased':
25+
triggerTouchEvent('touchend', el, x, y)
26+
if (isClick) {
27+
el.dispatchEvent(
28+
new MouseEvent('click', {
29+
bubbles: true,
30+
cancelable: true,
31+
view: window,
32+
})
33+
)
34+
}
35+
isClick = false
36+
break
37+
case 'mouseWheel':
38+
if (!isUndef(deltaX) && !isUndef(deltaY)) {
39+
triggerScroll(el, deltaX, deltaY)
40+
}
41+
break
42+
}
43+
}
44+
45+
function triggerTouchEvent(type: string, el: Element, x: number, y: number) {
46+
const touch = new Touch({
47+
identifier: 0,
48+
target: el,
49+
clientX: x,
50+
clientY: y,
51+
force: 1,
52+
})
53+
54+
el.dispatchEvent(
55+
new TouchEvent(type, {
56+
bubbles: true,
57+
touches: [touch],
58+
changedTouches: [touch],
59+
targetTouches: [touch],
60+
})
61+
)
62+
}
63+
64+
function triggerScroll(el: Element, deltaX: number, deltaY: number) {
65+
el = findScrollableEl(el, deltaX, deltaY)
66+
el.scrollLeft -= deltaX
67+
el.scrollTop -= deltaY
68+
}
69+
70+
function findScrollableEl(el: Element | null, deltaX: number, deltaY: number) {
71+
while (el) {
72+
if (toBool(deltaX) && isScrollable(el, 'x')) {
73+
return el
74+
}
75+
if (toBool(deltaY) && isScrollable(el, 'y')) {
76+
return el
77+
}
78+
79+
el = el.parentElement
80+
}
81+
82+
return el || document.documentElement
83+
}
84+
85+
function isScrollable(el: Element, direction: 'x' | 'y') {
86+
const computedStyle = getComputedStyle(el)
87+
88+
if (direction === 'x') {
89+
return (
90+
el.scrollWidth > el.clientWidth && computedStyle.overflowX !== 'hidden'
91+
)
92+
}
93+
94+
return (
95+
el.scrollHeight > el.clientHeight && computedStyle.overflowY !== 'hidden'
96+
)
97+
}

‎src/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import * as Debugger from './domains/Debugger'
1515
import * as Storage from './domains/Storage'
1616
import * as CacheStorage from './domains/CacheStorage'
1717
import * as IndexedDB from './domains/IndexedDB'
18+
import * as Input from './domains/Input'
1819

1920
const chobitsu = new Chobitsu()
2021
chobitsu.register('Network', {
@@ -136,7 +137,7 @@ chobitsu.register('HeapProfiler', {
136137
enable: noop,
137138
})
138139
chobitsu.register('Input', {
139-
emulateTouchFromMouseEvent: noop,
140+
...Input,
140141
})
141142

142143
export default chobitsu

0 commit comments

Comments
 (0)