From da50441abc396aa2e21a21a55ea2a45428a48ca9 Mon Sep 17 00:00:00 2001 From: evlist Date: Tue, 18 Oct 2022 10:10:23 +0200 Subject: [PATCH] Re-implementing the mouse handlers. --- src/components/map/Handlers.test.tsx | 23 +++++++ src/components/map/Handlers.tsx | 93 ++++++++++++++++++++++++++++ src/components/map/config.ts | 5 ++ 3 files changed, 121 insertions(+) create mode 100644 src/components/map/Handlers.test.tsx create mode 100644 src/components/map/Handlers.tsx create mode 100644 src/components/map/config.ts diff --git a/src/components/map/Handlers.test.tsx b/src/components/map/Handlers.test.tsx new file mode 100644 index 0000000..0d0a31e --- /dev/null +++ b/src/components/map/Handlers.test.tsx @@ -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(); + // screen.debug(); + expect(baseElement).toMatchInlineSnapshot(` + +
+
+
+ +`); + }); +}); diff --git a/src/components/map/Handlers.tsx b/src/components/map/Handlers.tsx new file mode 100644 index 0000000..ec6a7de --- /dev/null +++ b/src/components/map/Handlers.tsx @@ -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 = ( + 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 ( +
+ ); +}; + +export default Handlers; diff --git a/src/components/map/config.ts b/src/components/map/config.ts new file mode 100644 index 0000000..d545133 --- /dev/null +++ b/src/components/map/config.ts @@ -0,0 +1,5 @@ +/**The handlers configuration */ +export const handlersConfig = { + /**Controls the activity of the mouse mouse event */ + mouseMoveThrottleDelay: 100, +} \ No newline at end of file