import React, { useEffect, useRef, useCallback } from "react";

const prevent = (e) => e.preventDefault();

// A div that tracks its own dragging and calls its onMove
// callback with preprocessed drag events.
export const DraggableDiv = ({ onMove, onClick, children, ...otherProps }) => {
  const elementRef = useRef();
  const _state = useRef({
    prevMousePos: [0, 0],
    mouseDown: false,
    dragStarted: false,
  }).current;

  useEffect(() => {
    if (!elementRef.current) {
      return;
    }
    elementRef.current.addEventListener("selectstart", prevent);
    return () => {
      elementRef.current.removeEventListener("selectstart", prevent);
    };
  }, [elementRef.current]);

  const $onMouseDown = useCallback((event) => {
    Object.assign(_state, {
      mouseDown: true,
      dragStarted: false,
      prevMousePos: [event.pageX, event.pageY],
    });
  }, []);

  const $onMouseUp = useCallback(() => {
    _state.mouseDown = false;
  }, []);

  const $onMouseMove = useCallback(
    (event) => {
      const s = _state;
      if (!s.mouseDown) {
        return;
      }
      let x = event.pageX;
      let y = event.pageY;
      let dx = x - s.prevMousePos[0];
      let dy = y - s.prevMousePos[1];

      // Mousemove can occur during a legitimate click too.
      // To account for that we let some limited mousemove
      // before considering the gesture as a dragging.

      // If this is a dragging, call the onMove handler
      // and update our pixel tracking.
      if (s.dragStarted) {
        onMove({ dx, dy });
        _state.prevMousePos = [x, y];
      }
      // If the "gesture" is not yet qualified as dragging,
      // see if it already qualifies by looking if the mouse
      // has travalled far enough.
      else {
        if (Math.abs(dx) >= 5 || Math.abs(dy) >= 5) {
          _state.dragStarted = true;
        }
      }
    },
    [onMove]
  );

  const $onClick = useCallback(
    (event) => {
      if (_state.dragStarted) {
        return;
      }
      onClick(event);
    },
    [onClick]
  );

  return (
    <div
      ref={elementRef}
      onMouseDown={$onMouseDown}
      onMouseUp={$onMouseUp}
      onMouseMove={$onMouseMove}
      onMouseLeave={$onMouseUp}
      onClick={$onClick}
      onDragStart={prevent}
      {...otherProps}
    >
      {children}
    </div>
  );
};

@@ -322,17 +322,16 @@
   const 
-_
 state = 
@@ -753,17 +753,16 @@
 .assign(
-_
 state, %7B
@@ -919,25 +919,24 @@
 () =%3E %7B%0A    
-_
 state.mouseD
@@ -1016,32 +1016,8 @@
 %3E %7B%0A
-      const s = _state;%0A
     
@@ -1024,16 +1024,20 @@
   if (!s
+tate
 .mouseDo
@@ -1072,18 +1072,20 @@
 %7D%0A      
-le
+cons
 t x = ev
@@ -1101,18 +1101,20 @@
 ;%0A      
-le
+cons
 t y = ev
@@ -1130,18 +1130,20 @@
 ;%0A      
-le
+cons
 t dx = x
@@ -1142,24 +1142,28 @@
 t dx = x - s
+tate
 .prevMousePo
@@ -1174,18 +1174,20 @@
 ;%0A      
-le
+cons
 t dy = y
@@ -1190,16 +1190,20 @@
  = y - s
+tate
 .prevMou
@@ -1495,16 +1495,20 @@
    if (s
+tate
 .dragSta
@@ -1547,25 +1547,24 @@
 %7D);%0A        
-_
 state.prevMo
@@ -1821,17 +1821,16 @@
         
-_
 state.dr
@@ -1954,9 +1954,8 @@
 if (
-_
 stat

Rename variable