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

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

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