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