Re-implementing the mouse handlers.

2022-10-18 10:10:23 +02:00 · 2022-10-18 10:10:23 +02:00 · da50441abc
parent 16097c1e2e
commit da50441abc
3 changed files with 121 additions and 0 deletions
--- a/src/components/map/Handlers.test.tsx
+++ 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(<Handlers transformMap={transformMap} />);
+    // screen.debug();
+    expect(baseElement).toMatchInlineSnapshot(`
+<body>
+  <div>
+    <div
+      class="handler"
+    />
+  </div>
+</body>
+`);
+  });
+});
--- a/src/components/map/Handlers.tsx
+++ 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<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;
--- a/src/components/map/config.ts
+++ 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,
+}