From 37f1bb05f7207c559c428b65ac10946217f3c470 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Fri, 28 Feb 2025 17:26:50 +0530
Subject: [PATCH] Add support for Only show one handle at a time.

---
 .../AppCanvas/ConfigHandle/ConfigHandle.jsx   | 23 +++++++++++++++----
 .../AppCanvas/ConfigHandle/configHandle.scss  | 10 --------
 .../AppBuilder/AppCanvas/WidgetWrapper.jsx    |  1 +
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
index a40663b0f5..cdf5c282a3 100644
--- a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
@@ -13,6 +13,7 @@ export const ConfigHandle = ({
   customClassName = '',
   showHandle,
   componentType,
+  visibility,
 }) => {
   const shouldFreeze = useStore((state) => state.getShouldFreeze());
   const componentName = useStore((state) => state.getComponentDefinition(id)?.component?.name || '', shallow);
@@ -28,16 +29,28 @@ export const ConfigHandle = ({
   );
 
   const setComponentToInspect = useStore((state) => state.setComponentToInspect);
+
+  const _showHandle = useStore((state) => {
+    const isWidgetHovered = state.getHoveredComponentForGrid() === id;
+    const anyComponentHovered = state.getHoveredComponentForGrid() !== '';
+    // If one component is hovered and one is selected, show the handle for the hovered component
+    return (
+      isWidgetHovered ||
+      (showHandle &&
+        (!isMultipleComponentsSelected || (componentType === 'Modal' && isModalOpen)) &&
+        !anyComponentHovered)
+    );
+  }, shallow);
+
+  let height = visibility === false ? 10 : widgetHeight;
+
   return (
     <div
       className={`config-handle ${customClassName}`}
       widget-id={id}
       style={{
-        top: position === 'top' ? '-20px' : widgetTop + widgetHeight - (widgetTop < 10 ? 15 : 10),
-        visibility:
-          showHandle && (!isMultipleComponentsSelected || (componentType === 'Modal' && isModalOpen))
-            ? 'visible'
-            : 'hidden',
+        top: position === 'top' ? '-20px' : widgetTop + height - (widgetTop < 10 ? 15 : 10),
+        visibility: _showHandle ? 'visible' : 'hidden',
         left: '-1px',
       }}
       onClick={(e) => {
diff --git a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/configHandle.scss b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/configHandle.scss
index 7f20210c10..929d68d1f7 100644
--- a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/configHandle.scss
+++ b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/configHandle.scss
@@ -8,10 +8,6 @@
     transition: all .15s ease-in-out;
 }
 
-.config-handle-visible {
-  visibility: visible !important;
-}
-
 .multiple-components-config-handle {
   position: absolute;
   left: 54px;
@@ -65,9 +61,3 @@
     }
   }
 }
-
-.main-editor-canvas .widget-target:hover > .config-handle {
-  visibility: visible !important;
-}
-
-
diff --git a/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx b/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx
index 34c172292d..f583ebb53a 100644
--- a/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx
@@ -89,6 +89,7 @@ const WidgetWrapper = memo(
               widgetHeight={layoutData.height}
               showHandle={isWidgetActive}
               componentType={componentType}
+              visibility={visibility}
             />
           )}
           <RenderWidget