From 349b27b7646e270e79cec69af3c6aec91f4b73d2 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 13 Jun 2024 14:11:48 -0500
Subject: [PATCH] Draggable grid fixes (#11944)

* Use globals on grid for resizing/dragging flags

* remove unneeded useeffect
---
 web/src/views/live/DraggableGridLayout.tsx | 26 ++++------------------
 1 file changed, 4 insertions(+), 22 deletions(-)

diff --git a/web/src/views/live/DraggableGridLayout.tsx b/web/src/views/live/DraggableGridLayout.tsx
index 0aa9459b6..053adaff2 100644
--- a/web/src/views/live/DraggableGridLayout.tsx
+++ b/web/src/views/live/DraggableGridLayout.tsx
@@ -97,8 +97,9 @@ export default function DraggableGridLayout({
   const [showCircles, setShowCircles] = useState(true);
 
   useEffect(() => {
+    setIsEditMode(false);
     setEditGroup(false);
-  }, [cameraGroup]);
+  }, [cameraGroup, setIsEditMode]);
 
   // camera state
 
@@ -185,8 +186,6 @@ export default function DraggableGridLayout({
         y: 0, // don't set y, grid does automatically
         w: width,
         h: height,
-        isDraggable: isEditMode,
-        isResizable: isEditMode,
       };
 
       optionsMap.push(options);
@@ -195,31 +194,12 @@ export default function DraggableGridLayout({
     return optionsMap;
   }, [
     cameras,
-    isEditMode,
     isGridLayoutLoaded,
     currentGridLayout,
     includeBirdseye,
     birdseyeConfig,
   ]);
 
-  useEffect(() => {
-    if (currentGridLayout) {
-      const updatedGridLayout = currentGridLayout.map((layout) => ({
-        ...layout,
-        isDraggable: isEditMode,
-        isResizable: isEditMode,
-      }));
-      if (isEditMode) {
-        setGridLayout(updatedGridLayout);
-        setCurrentGridLayout(updatedGridLayout);
-      } else {
-        setGridLayout(updatedGridLayout);
-      }
-    }
-    // we know that these deps are correct
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isEditMode, setGridLayout]);
-
   useEffect(() => {
     if (isGridLayoutLoaded) {
       if (gridLayout) {
@@ -406,6 +386,8 @@ export default function DraggableGridLayout({
             onResize={handleResize}
             onResizeStart={() => setShowCircles(false)}
             onResizeStop={handleLayoutChange}
+            isDraggable={isEditMode}
+            isResizable={isEditMode}
           >
             {includeBirdseye && birdseyeConfig?.enabled && (
               <BirdseyeLivePlayerGridItem