From 855844da2a9316d5cd94adb731c3a1adb640f138 Mon Sep 17 00:00:00 2001
From: Sean Parsons <git@futurenotfound.com>
Date: Thu, 20 Jun 2024 12:40:48 +0100
Subject: [PATCH] feature(editor) Clear Highlights On Other Panels - Added an
 `onMouseEnter` handler to `GridPanelInner` which clears   the highlights.

---
 editor/src/components/canvas/grid-panel.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/editor/src/components/canvas/grid-panel.tsx b/editor/src/components/canvas/grid-panel.tsx
index cc067e054fcc..91fa44f55be4 100644
--- a/editor/src/components/canvas/grid-panel.tsx
+++ b/editor/src/components/canvas/grid-panel.tsx
@@ -9,6 +9,8 @@ import {
   GridPanelHorizontalGapHalf,
   GridPanelVerticalGapHalf,
 } from './stored-layout'
+import { useDispatch } from '../editor/store/dispatch-context'
+import { clearHighlightedViews } from '../editor/actions/action-creators'
 
 interface GridPanelProps {
   onDrop: (itemToMove: StoredPanel, newPosition: LayoutUpdate) => void
@@ -84,6 +86,12 @@ const GridPanelInner = React.memo<GridPanelProps>((props) => {
     }
   })()
 
+  const dispatch = useDispatch()
+
+  const onMouseEnter = React.useCallback(() => {
+    dispatch([clearHighlightedViews()], 'everyone')
+  }, [dispatch])
+
   return (
     <div
       style={{
@@ -99,6 +107,7 @@ const GridPanelInner = React.memo<GridPanelProps>((props) => {
         paddingTop: GridPanelVerticalGapHalf,
         paddingBottom: GridPanelVerticalGapHalf,
       }}
+      onMouseEnter={onMouseEnter}
     >
       {draggablePanelComponent}
       <div