Implementing the mouse handler.
This commit is contained in:
parent
04c2c12117
commit
2caf590a21
|
@ -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",
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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;
|
|
@ -0,0 +1,5 @@
|
|||
.viewport {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
Loading…
Reference in New Issue