feat: improve zoom tool (#1794)

refactor: use global mouse event listener instead of component mouse listener 

close: #1783

src/component/EventsTrackers/BrushTracker.tsx

@@ -69,6 +69,28 @@ export function BrushTracker({
 
         setMouseDownTime(event.timeStamp);
       }
+
+      function moveCallback(event) {
+        dispatch({
+          type: 'MOVE',
+          screenX: event.screenX,
+          screenY: event.screenY,
+          clientX: event.clientX,
+          clientY: event.clientY,
+        });
+      }
+
+      function mouseUpCallback() {
+        dispatch({
+          type: 'UP',
+        });
+        window.removeEventListener('mousemove', moveCallback);
+        window.removeEventListener('mouseup', mouseUpCallback);
+      }
+
+      window.addEventListener('mousemove', moveCallback);
+      window.addEventListener('mouseup', mouseUpCallback);
+
       return false;
     },
     [noPropagation],
@@ -130,33 +152,12 @@ export function BrushTracker({
     }
   }, [onBrush, state]);
 
-  const moveCallback = useCallback((event) => {
-    dispatch({
-      type: 'MOVE',
-      screenX: event.screenX,
-      screenY: event.screenY,
-      clientX: event.clientX,
-      clientY: event.clientY,
-    });
-  }, []);
-
-  const upCallback = useCallback((event) => {
-    dispatch({
-      type: 'UP',
-      clientX: event.clientX,
-      clientY: event.clientY,
-    });
-    return false;
-  }, []);
-
   return (
     <BrushContext.Provider value={state}>
       <div
         className={className}
         style={style}
         onMouseDown={mouseDownHandler}
-        onMouseUp={upCallback}
-        onMouseMove={moveCallback}
         onClick={clickHandler}
         onWheel={handleMouseWheel}
       >
@@ -170,13 +171,8 @@ function reducer(state, action) {
   switch (action.type) {
     case 'UP':
       if (state.step === 'brushing' || state.step === 'start') {
-        const { clientX, clientY } = action;
-
         return {
           ...state,
-          endX: clientX - state.boundingRect.x,
-          endY: clientY - state.boundingRect.y,
-
           step: state.step === 'start' ? 'initial' : 'end',
         };
       }
@@ -194,7 +190,6 @@ function reducer(state, action) {
         } = action;
         const x = clientX - boundingRect.x;
         const y = clientY - boundingRect.y;
-
         return {
           ...state,
           shiftKey,