From c2acc24637276b072d3b1e2bb4f228c315006069 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Fri, 6 Dec 2024 17:14:40 +0530
Subject: [PATCH] [feat] : Add support for Component Handle being visible when
 hovered on the boundary of an unselected component

---
 .../AppCanvas/ConfigHandle/ConfigHandle.jsx           |  5 ++---
 .../AppCanvas/ConfigHandle/configHandle.scss          |  4 ++++
 frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx       | 11 +++++------
 frontend/src/AppBuilder/_stores/slices/gridSlice.js   |  3 +++
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
index cdf5c282a3..436c04a430 100644
--- a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
@@ -31,8 +31,8 @@ export const ConfigHandle = ({
   const setComponentToInspect = useStore((state) => state.setComponentToInspect);
 
   const _showHandle = useStore((state) => {
-    const isWidgetHovered = state.getHoveredComponentForGrid() === id;
-    const anyComponentHovered = state.getHoveredComponentForGrid() !== '';
+    const isWidgetHovered = state.getHoveredComponentForGrid() === id || state.hoveredComponentBoundaryId === id;
+    const anyComponentHovered = state.getHoveredComponentForGrid() !== '' || state.hoveredComponentBoundaryId !== '';
     // If one component is hovered and one is selected, show the handle for the hovered component
     return (
       isWidgetHovered ||
@@ -41,7 +41,6 @@ export const ConfigHandle = ({
         !anyComponentHovered)
     );
   }, shallow);
-
   let height = visibility === false ? 10 : widgetHeight;
 
   return (
diff --git a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/configHandle.scss b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/configHandle.scss
index 929d68d1f7..e7322959e5 100644
--- a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/configHandle.scss
+++ b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/configHandle.scss
@@ -8,6 +8,10 @@
     transition: all .15s ease-in-out;
 }
 
+.config-handle-visible {
+  visibility: visible !important;
+}
+
 .multiple-components-config-handle {
   position: absolute;
   left: 54px;
diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
index 6d746477c4..4fab955ef2 100644
--- a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
@@ -354,17 +354,16 @@ export default function Grid({ gridWidth, currentLayout }) {
   );
 
   // Add event listeners for config handle visibility when hovering over widget boundary
+  // This is needed even though we have hovered widget state because when hovered on boundary,
+  // the hovered widget state is empty, hence created a separate state for boundary
   React.useEffect(() => {
     const moveableBox = document.querySelector(`.moveable-control-box`);
     const showConfigHandle = (e) => {
       const targetId = e.target.offsetParent.getAttribute('target-id');
-      const configHandle = document.querySelector(`.config-handle[widget-id="${targetId}"]`);
-      configHandle.classList.add('config-handle-visible');
+      useStore.getState().setHoveredComponentBoundaryId(targetId);
     };
-    const hideConfigHandle = (e) => {
-      const targetId = e.target.offsetParent.getAttribute('target-id');
-      const configHandle = document.querySelector(`.config-handle[widget-id="${targetId}"]`);
-      configHandle.classList.remove('config-handle-visible');
+    const hideConfigHandle = () => {
+      useStore.getState().setHoveredComponentBoundaryId('');
     };
     if (moveableBox) {
       moveableBox.addEventListener('mouseover', showConfigHandle);
diff --git a/frontend/src/AppBuilder/_stores/slices/gridSlice.js b/frontend/src/AppBuilder/_stores/slices/gridSlice.js
index cc80a9dbf7..1958b8bece 100644
--- a/frontend/src/AppBuilder/_stores/slices/gridSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/gridSlice.js
@@ -3,6 +3,7 @@ import { debounce } from 'lodash';
 
 const initialState = {
   hoveredComponentForGrid: '',
+  hoveredComponentBoundaryId: '',
   triggerCanvasUpdater: false,
   lastCanvasIdClick: '',
   lastCanvasClickPosition: null,
@@ -13,6 +14,8 @@ export const createGridSlice = (set, get) => ({
   setHoveredComponentForGrid: (id) =>
     set(() => ({ hoveredComponentForGrid: id }), false, { type: 'setHoveredComponentForGrid', id }),
   getHoveredComponentForGrid: () => get().hoveredComponentForGrid,
+  setHoveredComponentBoundaryId: (id) =>
+    set(() => ({ hoveredComponentBoundaryId: id }), false, { type: 'setHoveredComponentBoundaryId', id }),
   toggleCanvasUpdater: () =>
     set((state) => ({ triggerCanvasUpdater: !state.triggerCanvasUpdater }), false, { type: 'toggleCanvasUpdater' }),
   debouncedToggleCanvasUpdater: debounce(() => {