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

Re-implementing the mouse handlers.

This commit is contained in:
Eric van der Vlist 2022-10-18 10:10:23 +02:00
parent 16097c1e2e
commit da50441abc
3 changed files with 121 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/map/Handlers.test.tsx Normal file
View File

@ -0,0 +1,23 @@
import { render, screen } from '@testing-library/react';
import { Handlers } from './Handlers';
import { Point } from './types';
describe('The Handlers component ', () => {
test('Is just an empty div', () => {
const transformMap = (
deltaShift: Point | null,
deltaZoom: number | null,
zoomCenter: Point | null
) => {};
const { baseElement } = render(<Handlers transformMap={transformMap} />);
// screen.debug();
expect(baseElement).toMatchInlineSnapshot(`
<body>
<div>
<div
class="handler"
/>
</div>
</body>
`);
});
});

93
src/components/map/Handlers.tsx Normal file
View File

@ -0,0 +1,93 @@
import react, { useState } from 'react';
import { throttle } from 'lodash';
import { Point } from './types';
import { handlersConfig } from './config';
export interface HandlersProperties {
/**Transform the map:
* * Shift the map by a number of pixel
* * Multiply the zoom by deltaZoom around the zoomCenter
* */
transformMap: (
deltaShift: Point | null,
deltaZoom: number | null,
zoomCenter: Point | null
) => void;
}
/**
*
* @param props
* @returns A div with handlers
*/
export const Handlers: react.FC<HandlersProperties> = (
props: HandlersProperties
) => {
const genericHandler = (event: any) => {
// console.log(`Log - Event: ${event.type}`);
// if (event.pageX !== undefined) {
// console.log(
// `Mouse : ${event.pageX}, ${event.pageY}, target: ${event.target}`
// );
// console.log(
// `mouseState: ' ${JSON.stringify(mouseState)} (+${
// Date.now() - mouseState.timestamp
// }ms) `
// );
// return;
//}
};
const initialMouseState = {
down: false,
starting: { x: -1, y: -1 },
};
const mouseLeaveHandler = (event: any) => {
genericHandler(event);
setMouseState(initialMouseState);
};
const mouseDownHandler = (event: any) => {
genericHandler(event);
setMouseState({
down: true,
starting: { x: event.pageX, y: event.pageY },
});
};
const mouseUpHandler = (event: any) => {
genericHandler(event);
setMouseState(initialMouseState);
};
const mouseMoveHandler = throttle((event: any) => {
genericHandler(event);
props.transformMap(
{
x: event.pageX - mouseState.starting.x,
y: event.pageY - mouseState.starting.y,
},
null,
null
);
setMouseState({
down: true,
starting: {
x: event.pageX,
y: event.pageY,
},
});
}, handlersConfig.mouseMoveThrottleDelay);
const [mouseState, setMouseState] = useState(initialMouseState);
return (
<div
className='handler'
onMouseDown={mouseDownHandler}
onMouseMove={mouseMoveHandler}
onMouseUp={mouseUpHandler}
onMouseLeave={mouseLeaveHandler}
/>
);
};
export default Handlers;

5
src/components/map/config.ts Normal file
View File

@ -0,0 +1,5 @@
/**The handlers configuration */
export const handlersConfig = {
/**Controls the activity of the mouse mouse event */
mouseMoveThrottleDelay: 100,
}