Improve mouse tracking (#1061)

* Improve mouse tracking

* Fix lint

* Fix regression on Filters

* Fix according to review

front/src/modules/ui/utilities/pointer-event/hooks/useTrackPointer.ts

@@ -0,0 +1,67 @@
+import { useCallback, useEffect } from 'react';
+
+type MouseListener = (positionX: number, positionY: number) => void;
+
+export function useTrackPointer({
+  shouldTrackPointer = true,
+  onMouseMove,
+  onMouseDown,
+  onMouseUp,
+}: {
+  shouldTrackPointer?: boolean;
+  onMouseMove?: MouseListener;
+  onMouseDown?: MouseListener;
+  onMouseUp?: MouseListener;
+}) {
+  const extractPosition = useCallback((event: MouseEvent | TouchEvent) => {
+    const clientX =
+      'clientX' in event ? event.clientX : event.changedTouches[0].clientX;
+    const clientY =
+      'clientY' in event ? event.clientY : event.changedTouches[0].clientY;
+
+    return { clientX, clientY };
+  }, []);
+
+  const onInternalMouseMove = useCallback(
+    (event: MouseEvent | TouchEvent) => {
+      const { clientX, clientY } = extractPosition(event);
+      onMouseMove?.(clientX, clientY);
+    },
+    [onMouseMove, extractPosition],
+  );
+
+  const onInternalMouseDown = useCallback(
+    (event: MouseEvent | TouchEvent) => {
+      const { clientX, clientY } = extractPosition(event);
+      onMouseDown?.(clientX, clientY);
+    },
+    [onMouseDown, extractPosition],
+  );
+
+  const onInternalMouseUp = useCallback(
+    (event: MouseEvent | TouchEvent) => {
+      const { clientX, clientY } = extractPosition(event);
+      onMouseUp?.(clientX, clientY);
+    },
+    [onMouseUp, extractPosition],
+  );
+
+  useEffect(() => {
+    if (shouldTrackPointer) {
+      document.addEventListener('mousemove', onInternalMouseMove);
+      document.addEventListener('mousedown', onInternalMouseDown);
+      document.addEventListener('mouseup', onInternalMouseUp);
+
+      return () => {
+        document.removeEventListener('mousemove', onInternalMouseMove);
+        document.removeEventListener('mousedown', onInternalMouseDown);
+        document.removeEventListener('mouseup', onInternalMouseUp);
+      };
+    }
+  }, [
+    shouldTrackPointer,
+    onInternalMouseMove,
+    onInternalMouseDown,
+    onInternalMouseUp,
+  ]);
+}