Franknoirot/debug rerendering (#387)

* Refactor: let Stream handle control drag status

* Fix: prevent app rerender on mouse move
By not setting the highlight range unless things
actually need to change. Setting the highlight range
still causes an app rerender, though.

Signed-off-by: Frank Noirot <frank@kittycad.io>

---------

Signed-off-by: Frank Noirot <frank@kittycad.io>

src/App.tsx

@@ -78,6 +78,7 @@ export function App() {
     setArtifactMap,
     engineCommandManager,
     setEngineCommandManager,
+    highlightRange,
     setHighlightRange,
     setCursor2,
     sourceRangeMap,
@@ -91,7 +92,6 @@ export function App() {
     openPanes,
     setOpenPanes,
     didDragInStream,
-    setDidDragInStream,
     setStreamDimensions,
     streamDimensions,
   } = useStore((s) => ({
@@ -112,6 +112,7 @@ export function App() {
     setArtifactMap: s.setArtifactNSourceRangeMaps,
     engineCommandManager: s.engineCommandManager,
     setEngineCommandManager: s.setEngineCommandManager,
+    highlightRange: s.highlightRange,
     setHighlightRange: s.setHighlightRange,
     isShiftDown: s.isShiftDown,
     setCursor: s.setCursor,
@@ -128,7 +129,6 @@ export function App() {
     openPanes: s.openPanes,
     setOpenPanes: s.setOpenPanes,
     didDragInStream: s.didDragInStream,
-    setDidDragInStream: s.setDidDragInStream,
     setStreamDimensions: s.setStreamDimensions,
     streamDimensions: s.streamDimensions,
   }))
@@ -332,11 +332,14 @@ export function App() {
         const unSubHover = engineCommandManager.subscribeToUnreliable({
           event: 'highlight_set_entity',
           callback: ({ data }) => {
-            if (!data?.entity_id) {
-              setHighlightRange([0, 0])
-            } else {
+            if (data?.entity_id) {
               const sourceRange = sourceRangeMap[data.entity_id]
               setHighlightRange(sourceRange)
+            } else if (
+              !highlightRange ||
+              (highlightRange[0] !== 0 && highlightRange[1] !== 0)
+            ) {
+              setHighlightRange([0, 0])
             }
           },
         })
@@ -385,9 +388,6 @@ export function App() {
     nativeEvent,
   }) => {
     nativeEvent.preventDefault()
-    if (isMouseDownInStream) {
-      setDidDragInStream(true)
-    }
 
     const { x, y } = getNormalisedCoordinates({
       clientX,

src/components/Stream.tsx

@@ -12,6 +12,7 @@ import Loading from './Loading'
 
 export const Stream = ({ className = '' }) => {
   const [isLoading, setIsLoading] = useState(true)
+  const [clickCoords, setClickCoords] = useState<{ x: number; y: number }>()
   const videoRef = useRef<HTMLVideoElement>(null)
   const {
     mediaStream,
@@ -71,6 +72,7 @@ export const Stream = ({ className = '' }) => {
     })
 
     setIsMouseDownInStream(true)
+    setClickCoords({ x, y })
   }
 
   const handleScroll: WheelEventHandler<HTMLVideoElement> = (e) => {
@@ -124,6 +126,19 @@ export const Stream = ({ className = '' }) => {
       })
     }
     setDidDragInStream(false)
+    setClickCoords(undefined)
+  }
+
+  const handleMouseMove: MouseEventHandler<HTMLVideoElement> = (e) => {
+    if (!clickCoords) return
+
+    const delta =
+      ((clickCoords.x - e.clientX) ** 2 + (clickCoords.y - e.clientY) ** 2) **
+      0.5
+
+    if (delta > 5 && !didDragInStream) {
+      setDidDragInStream(true)
+    }
   }
 
   return (
@@ -139,6 +154,7 @@ export const Stream = ({ className = '' }) => {
         onContextMenuCapture={(e) => e.preventDefault()}
         onWheel={handleScroll}
         onPlay={() => setIsLoading(false)}
+        onMouseMoveCapture={handleMouseMove}
         className="w-full h-full"
       />
       {isLoading && (