Dyomedea
/
sandbox
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Implementing touch events

This commit is contained in:
Eric van der Vlist 2022-09-08 18:42:33 +02:00
parent c409633017
commit bd71552e54
4 changed files with 91 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
background-move/.gitignore vendored
View File

@ -7,6 +7,7 @@
# testing
/coverage
/android
# production
/build

15
background-move/package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "empty-ionic-react",
"version": "0.0.1",
"dependencies": {
"@capacitor/android": "4.1.0",
"@capacitor/app": "4.0.1",
"@capacitor/core": "4.1.0",
"@capacitor/haptics": "4.0.1",
@ -1982,6 +1983,14 @@
"resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
"integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
},
"node_modules/@capacitor/android": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/@capacitor/android/-/android-4.1.0.tgz",
"integrity": "sha512-aYHvpYVlS6WC+bG9jJfwqgHMxTw3e8f3taNnl/y9qCjglmMmtFcZWFAVLlOleVK4Q7olSirqjx37f0ppvxRTLg==",
"peerDependencies": {
"@capacitor/core": "^4.0.0"
}
},
"node_modules/@capacitor/app": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/@capacitor/app/-/app-4.0.1.tgz",
@ -17298,6 +17307,12 @@
"resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
"integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
},
"@capacitor/android": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/@capacitor/android/-/android-4.1.0.tgz",
"integrity": "sha512-aYHvpYVlS6WC+bG9jJfwqgHMxTw3e8f3taNnl/y9qCjglmMmtFcZWFAVLlOleVK4Q7olSirqjx37f0ppvxRTLg==",
"requires": {}
},
"@capacitor/app": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/@capacitor/app/-/app-4.0.1.tgz",

1
background-move/package.json
View File

@ -3,6 +3,7 @@
"version": "0.0.1",
"private": true,
"dependencies": {
"@capacitor/android": "4.1.0",
"@capacitor/app": "4.0.1",
"@capacitor/core": "4.1.0",
"@capacitor/haptics": "4.0.1",

86
background-move/src/components/viewport.tsx
View File

@ -1,4 +1,4 @@
import react, { useCallback, useMemo, useState } from 'react';
import react, { useCallback, useState } from 'react';
import _ from 'lodash';
@ -16,18 +16,40 @@ const Viewport: react.FC<{}> = (props: {}) => {
starting: { x: -1, y: -1 },
};
const [mouseState, setMouseState] = useState(initialMouseState);
const [touchState, setTouchState] = useState(initialMouseState);
console.log('viewport, mouseState: ' + JSON.stringify(mouseState));
console.log('viewport, touchState: ' + JSON.stringify(touchState));
const genericHandler = (event: any) => {
console.log('Log - Event: ' + event.type);
console.log(`Mouse : ${event.pageX}, ${event.pageY}`);
console.log('mouseState: ' + JSON.stringify(mouseState));
if (event.type.startsWith('mouse')) {
console.log(`Mouse : ${event.pageX}, ${event.pageY}`);
console.log('mouseState: ' + JSON.stringify(mouseState));
return;
}
if (event.type.startsWith('touch')) {
if (event.touches.length > 0) {
console.log(
`Touch : ${event.touches.length} touches, ${event.touches[0].pageX}, ${event.touches[0].pageY}`
);
}
console.log('touchState: ' + JSON.stringify(touchState));
return;
}
};
// TODO: implement resize event
// TODO: check boundaries
const mouseLeaveHandler = (event: any) => {
genericHandler(event);
event.preventDefault();
throtteledMouseMoveHandler.cancel();
setMouseState(initialMouseState);
setTouchState(initialMouseState);
};
const mouseDownHandler = (event: any) => {
genericHandler(event);
event.preventDefault();
@ -37,15 +59,6 @@ const Viewport: react.FC<{}> = (props: {}) => {
});
};
const mouseLeaveHandler = (event: any) => {
genericHandler(event);
event.preventDefault();
throtteledMouseMoveHandler.cancel();
setMouseState(initialMouseState);
};
const mouseUpHandler = (event: any) => {
genericHandler(event);
event.preventDefault();
@ -86,6 +99,51 @@ const Viewport: react.FC<{}> = (props: {}) => {
[mouseState.down]
);
// Touch
const touchStartHandler = (event: any) => {
genericHandler(event);
// event.preventDefault();
if (event.touches.length === 1) {
setTouchState({
down: true,
starting: { x: event.touches[0].pageX, y: event.touches[0].pageY },
});
}
};
const touchEndHandler = (event: any) => {
genericHandler(event);
// event.preventDefault();
setTouchState(initialMouseState);
throtteledTouchMoveHandler.cancel()
};
const touchMoveHandler = (event: any) => {
// event.preventDefault();
if (touchState.down) {
if (event.touches.length === 1) {
genericHandler(event);
setShift({
x: shift.x + (touchState.starting.x - event.touches[0].pageX),
y: shift.y + (touchState.starting.y - event.touches[0].pageY),
});
setTouchState({
down: true,
starting: {
x: event.touches[0].pageX,
y: event.touches[0].pageY,
},
});
}
}
};
const throtteledTouchMoveHandler = useCallback(
_.throttle(touchMoveHandler, 50),
[touchState.down]
);
return (
<div
className='viewport'
@ -93,6 +151,10 @@ const Viewport: react.FC<{}> = (props: {}) => {
onMouseMove={throtteledMouseMoveHandler}
onMouseUp={mouseUpHandler}
onMouseLeave={mouseLeaveHandler}
onTouchStart={touchStartHandler}
onTouchMove={throtteledTouchMoveHandler}
onTouchEnd={touchEndHandler}
onTouchCancel={mouseLeaveHandler}
>
<Background shift={shift} />
</div>