Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Adding touch handlers.

This commit is contained in:
Eric van der Vlist 2022-10-18 18:47:40 +02:00
parent f1ad35a479
commit 4f069ad63f
4 changed files with 157 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "dyomedea",
"version": "0.0.1",
"dependencies": {
"@capacitor/android": "4.3.0",
"@capacitor/app": "4.0.1",
"@capacitor/core": "4.3.0",
"@capacitor/haptics": "4.0.1",
@ -1965,6 +1966,14 @@
"resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
"integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
},
"node_modules/@capacitor/android": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@capacitor/android/-/android-4.3.0.tgz",
"integrity": "sha512-JnyQsxq44wLFPQ1sN1sMISNbVuNVHXdUdseil1mNsag3JOKu1BkLCyC3aqI4ioce63fK6VtoUIvzR4YzqBn1yg==",
"peerDependencies": {
"@capacitor/core": "^4.2.0"
}
},
"node_modules/@capacitor/app": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/@capacitor/app/-/app-4.0.1.tgz",
@ -18426,6 +18435,12 @@
"resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
"integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
},
"@capacitor/android": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@capacitor/android/-/android-4.3.0.tgz",
"integrity": "sha512-JnyQsxq44wLFPQ1sN1sMISNbVuNVHXdUdseil1mNsag3JOKu1BkLCyC3aqI4ioce63fK6VtoUIvzR4YzqBn1yg==",
"requires": {}
},
"@capacitor/app": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/@capacitor/app/-/app-4.0.1.tgz",

1
package.json
View File

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

137
src/components/map/Handlers.tsx
View File

@ -145,6 +145,139 @@ export const Handlers: react.FC<HandlersProperties> = (
}
};
/**
*
* Touch handlers
*
*/
interface TouchState {
state: 'up' | 'pointer' | 'double';
touches: Point[];
distance: number;
timestamp: number;
}
const initialTouchState: TouchState = {
state: 'up',
touches: [],
distance: -1,
timestamp: 0,
};
const touchState = useRef<TouchState>(initialTouchState);
const touchCancelHandler = (event: any) => {
genericHandler(event);
touchState.current = initialTouchState;
};
const touchEndHandler = touchCancelHandler;
const touchStartHandler = (event: any) => {
genericHandler(event);
if (event.touches.length === 2) {
touchState.current = {
state: 'double',
touches: [
{ x: event.touches[0].screenX, y: event.touches[0].screenY },
{ x: event.touches[1].screenX, y: event.touches[1].screenY },
],
distance: Math.sqrt(
(event.touches[0].screenX - event.touches[1].screenX) ** 2 +
(event.touches[0].screenY - event.touches[1].screenY) ** 2
),
timestamp: Date.now(),
};
} else if (event.touches.length === 1) {
touchState.current = {
state: 'pointer',
touches: [{ x: event.touches[0].screenX, y: event.touches[0].screenY }],
timestamp: Date.now(),
distance: -1,
};
}
};
const touchMoveHandler = (event: any) => {
if (
touchState.current.state === 'double' &&
Date.now() - touchState.current.timestamp >
handlersConfig.doubleTouchMoveThrottleDelay
) {
if (event.touches.length === 2) {
genericHandler(event);
const newDistance = Math.sqrt(
(event.touches[0].screenX - event.touches[1].screenX) ** 2 +
(event.touches[0].screenY - event.touches[1].screenY) ** 2
);
const factor = newDistance / touchState.current.distance;
// console.log(`+++++++++ ZOOM Factor is ${factor} ++++++++++`);
touchState.current = {
state: 'double',
touches: [
{ x: event.touches[0].screenX, y: event.touches[0].screenY },
{ x: event.touches[1].screenX, y: event.touches[1].screenY },
],
distance: newDistance,
timestamp: Date.now(),
};
const previousCenter = {
x:
(touchState.current.touches[0].x +
touchState.current.touches[1].x) /
2,
y:
(touchState.current.touches[0].y +
touchState.current.touches[1].y) /
2,
};
const currentCenter = {
x: (event.touches[0].screenX + event.touches[1].screenX) / 2,
y: (event.touches[0].screenY + event.touches[1].screenY) / 2,
};
props.transformMap(
{
x: currentCenter.x - previousCenter.x,
y: currentCenter.y - previousCenter.y,
},
factor,
{
x: currentCenter.x - previousCenter.x,
y: currentCenter.y - previousCenter.y,
}
);
}
} else if (
touchState.current.state === 'pointer' &&
Date.now() - touchState.current.timestamp >
handlersConfig.singleTouchMoveThrottleDelay
) {
if (event.touches.length === 1) {
genericHandler(event);
props.transformMap(
{
x: event.touches[0].screenX - touchState.current.touches[0].x,
y: event.touches[0].screenY - touchState.current.touches[0].y,
},
null,
null
);
touchState.current = {
state: 'pointer',
touches: [
{
x: event.touches[0].screenX,
y: event.touches[0].screenY,
},
],
timestamp: Date.now(),
distance: -1,
};
}
}
};
return (
<div
className='handler'
@ -155,6 +288,10 @@ export const Handlers: react.FC<HandlersProperties> = (
onMouseLeave={mouseLeaveHandler}
onDoubleClick={doubleClickHandler}
onWheel={wheelEventHandler}
onTouchEnd={touchEndHandler}
onTouchCancel={touchCancelHandler}
onTouchStart={touchStartHandler}
onTouchMove={touchMoveHandler}
/>
);
};

4
src/components/map/config.ts
View File

@ -4,4 +4,8 @@ export const handlersConfig = {
mouseMoveThrottleDelay: 50,
/**Controls the activity of the wheel event */
wheelThrottleDelay: 100,
/** Controls the activity of the single touch move event */
singleTouchMoveThrottleDelay: 50,
/** Controls the activity of the double touch move event */
doubleTouchMoveThrottleDelay: 100,
};