Implementing the mouse handler.

This commit is contained in:
Eric van der Vlist 2022-09-07 23:19:42 +02:00
parent 04c2c12117
commit 2caf590a21
6 changed files with 104 additions and 4 deletions

View File

@ -25,6 +25,7 @@
"@types/react-router": "^5.1.11",
"@types/react-router-dom": "^5.1.7",
"ionicons": "^6.0.3",
"lodash": "^4.17.21",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^5.2.0",
@ -46,7 +47,8 @@
"workbox-streams": "^5.1.4"
},
"devDependencies": {
"@capacitor/cli": "4.1.0"
"@capacitor/cli": "4.1.0",
"@types/lodash": "^4.14.184"
}
},
"node_modules/@adobe/css-tools": {
@ -3775,6 +3777,12 @@
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
},
"node_modules/@types/lodash": {
"version": "4.14.184",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.184.tgz",
"integrity": "sha512-RoZphVtHbxPZizt4IcILciSWiC6dcn+eZ8oX9IWEYfDMcocdd42f7NPI6fQj+6zI8y4E0L7gu2pcZKLGTRaV9Q==",
"dev": true
},
"node_modules/@types/mime": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@ -18560,6 +18568,12 @@
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
},
"@types/lodash": {
"version": "4.14.184",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.184.tgz",
"integrity": "sha512-RoZphVtHbxPZizt4IcILciSWiC6dcn+eZ8oX9IWEYfDMcocdd42f7NPI6fQj+6zI8y4E0L7gu2pcZKLGTRaV9Q==",
"dev": true
},
"@types/mime": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",

View File

@ -20,6 +20,7 @@
"@types/react-router": "^5.1.11",
"@types/react-router-dom": "^5.1.7",
"ionicons": "^6.0.3",
"lodash": "^4.17.21",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^5.2.0",
@ -65,7 +66,8 @@
]
},
"devDependencies": {
"@capacitor/cli": "4.1.0"
"@capacitor/cli": "4.1.0",
"@types/lodash": "^4.14.184"
},
"description": "An Ionic project"
}

View File

@ -19,13 +19,13 @@ import '@ionic/react/css/display.css';
/* Theme variables */
import './theme/variables.css';
import Background from './components/background';
import Viewport from './components/viewport';
setupIonicReact();
const App: React.FC = () => (
<IonApp>
<Background shift={{ x: 1000, y: 1000 }} />
<Viewport />
</IonApp>
);

View File

@ -5,6 +5,8 @@ import '../theme/background.css';
const Background: react.FC<{ shift: { x: number; y: number } }> = (props: {
shift: { x: number; y: number };
}) => {
console.log('rendering background');
return (
<div
className='background'

View File

@ -0,0 +1,77 @@
import react, { useMemo, useState } from 'react';
import _ from 'lodash';
import Background from './background';
import '../theme/viewport.css';
const Viewport: react.FC<{}> = (props: {}) => {
console.log('rendering viewport');
const [shift, setShift] = useState({ x: 1000, y: 1000 });
const initialMouseState = {
down: false,
starting: { x: -1, y: -1 },
};
const [mouseState, setMouseState] = useState(initialMouseState);
console.log('mouseState: ' + JSON.stringify(mouseState));
const genericHandler = (event: any) => {
console.log('Log - Event: ' + event.type);
};
const mouseDownHandler = (event: any) => {
event.preventDefault();
setMouseState({
down: true,
starting: { x: event.pageX, y: event.pageY },
});
genericHandler(event);
};
const mouseUpHandler = (event: any) => {
event.preventDefault();
console.log('Log - Up, now do something ! ');
setMouseState(initialMouseState);
genericHandler(event);
};
const mouseMoveHandler = (event: any) => {
event.preventDefault();
if (mouseState.down) {
console.log('Log - Moving...' + event.pageX);
genericHandler(event);
setShift((shift) => ({
x: shift.x + (mouseState.starting.x - event.pageX),
y: shift.y + (mouseState.starting.y - event.pageY),
}));
setMouseState((mouseState) => ({
down: true,
starting: {
x: event.pageX,
y: event.pageY,
},
}));
}
};
const throtteledMouseMoveHandler = useMemo(
() => _.throttle(mouseMoveHandler, 100),
undefined
);
return (
<div
className='viewport'
onMouseDown={mouseDownHandler}
onMouseMove={throtteledMouseMoveHandler}
onMouseUp={mouseUpHandler}
>
<Background shift={shift} />
</div>
);
};
export default Viewport;

View File

@ -0,0 +1,5 @@
.viewport {
position: fixed;
width: 100%;
height: 100%;
}