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

Refactoring before hadndling two fingers touch actions.

This commit is contained in:
Eric van der Vlist 2022-09-08 21:09:55 +02:00
parent bd71552e54
commit 2124a0024d
1 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,8 +15,17 @@ const Viewport: react.FC<{}> = (props: {}) => {
down: false,
starting: { x: -1, y: -1 },
};
const initialTouchState = {
state: 'up',
touches: [
{ x: -1, y: -1 },
{ x: -1, y: -1 },
],
};
const [mouseState, setMouseState] = useState(initialMouseState);
const [touchState, setTouchState] = useState(initialMouseState);
const [touchState, setTouchState] = useState(initialTouchState);
console.log('viewport, mouseState: ' + JSON.stringify(mouseState));
console.log('viewport, touchState: ' + JSON.stringify(touchState));
@ -46,8 +55,9 @@ const Viewport: react.FC<{}> = (props: {}) => {
genericHandler(event);
event.preventDefault();
throtteledMouseMoveHandler.cancel();
throtteledTouchMoveHandler.cancel();
setMouseState(initialMouseState);
setTouchState(initialMouseState);
setTouchState(initialTouchState);
};
const mouseDownHandler = (event: any) => {
@ -106,8 +116,8 @@ const Viewport: react.FC<{}> = (props: {}) => {
// event.preventDefault();
if (event.touches.length === 1) {
setTouchState({
down: true,
starting: { x: event.touches[0].pageX, y: event.touches[0].pageY },
state: 'pointer',
touches: [{ x: event.touches[0].pageX, y: event.touches[0].pageY }],
});
}
};
@ -115,25 +125,27 @@ const Viewport: react.FC<{}> = (props: {}) => {
const touchEndHandler = (event: any) => {
genericHandler(event);
// event.preventDefault();
setTouchState(initialMouseState);
throtteledTouchMoveHandler.cancel()
setTouchState(initialTouchState);
throtteledTouchMoveHandler.cancel();
};
const touchMoveHandler = (event: any) => {
// event.preventDefault();
if (touchState.down) {
if (touchState.state === 'pointer') {
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),
x: shift.x + (touchState.touches[0].x - event.touches[0].pageX),
y: shift.y + (touchState.touches[0].y - event.touches[0].pageY),
});
setTouchState({
down: true,
starting: {
x: event.touches[0].pageX,
y: event.touches[0].pageY,
},
state: 'pointer',
touches: [
{
x: event.touches[0].pageX,
y: event.touches[0].pageY,
},
],
});
}
}
@ -141,7 +153,7 @@ const Viewport: react.FC<{}> = (props: {}) => {
const throtteledTouchMoveHandler = useCallback(
_.throttle(touchMoveHandler, 50),
[touchState.down]
[touchState.state]
);
return (