From 022e554812a73c933df9652538909e5e85a57de3 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <133095394+nakulnagargade@users.noreply.github.com>
Date: Wed, 4 Dec 2024 13:49:06 +0530
Subject: [PATCH] [feat] : Add support for clicking anywhere on the edge should
 select the component (#11425)

---
 .../AppCanvas/ConfigHandle/configHandle.scss  |  6 +----
 .../src/AppBuilder/AppCanvas/Grid/Grid.jsx    | 24 +++++++++++++------
 frontend/src/AppBuilder/AppCanvas/Selecto.jsx |  3 +--
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/configHandle.scss b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/configHandle.scss
index 4298cb9439..1f88e79baa 100644
--- a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/configHandle.scss
+++ b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/configHandle.scss
@@ -78,10 +78,6 @@
   visibility: visible !important;
 }
 
-.main-editor-canvas .widget-target:hover .widget-target:hover > .config-handle {
-  visibility: visible !important;
-}
-
 .main-editor-canvas .widget-target:hover .widget-target:hover > .widget-target > .config-handle {
   visibility: hidden !important;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
index a8a10caf55..baff04861c 100644
--- a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
@@ -353,6 +353,7 @@ export default function Grid({ gridWidth, currentLayout }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [boxList, currentLayout, gridWidth]
   );
+
   if (mode !== 'edit') return null;
 
   return (
@@ -425,6 +426,22 @@ export default function Grid({ gridWidth, currentLayout }) {
             document.getElementById('resize-ghost-widget').style.height = `${e.target.clientHeight}px`;
           }
         }}
+        onResizeStart={(e) => {
+          if (
+            e.target.id &&
+            useGridStore.getState().resizingComponentId !== e.target.id &&
+            !e.target.classList.contains('delete-icon')
+          ) {
+            // When clicked on widget boundary/resizer, select the component
+            setSelectedComponents([e.target.id]);
+          }
+
+          if (!isComponentVisible(e.target.id)) {
+            return false;
+          }
+          useGridStore.getState().actions.setResizingComponentId(e.target.id);
+          e.setMin([gridWidth, 10]);
+        }}
         onResizeEnd={(e) => {
           try {
             useGridStore.getState().actions.setResizingComponentId(null);
@@ -491,13 +508,6 @@ export default function Grid({ gridWidth, currentLayout }) {
           useGridStore.getState().actions.setDragTarget();
           toggleCanvasUpdater();
         }}
-        onResizeStart={(e) => {
-          if (!isComponentVisible(e.target.id)) {
-            return false;
-          }
-          useGridStore.getState().actions.setResizingComponentId(e.target.id);
-          e.setMin([gridWidth, 10]);
-        }}
         onResizeGroupStart={({ events }) => {
           const parentElm = events[0].target.closest('.real-canvas');
           parentElm.classList.add('show-grid');
diff --git a/frontend/src/AppBuilder/AppCanvas/Selecto.jsx b/frontend/src/AppBuilder/AppCanvas/Selecto.jsx
index 6fcc85ea67..dae6fed99a 100644
--- a/frontend/src/AppBuilder/AppCanvas/Selecto.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Selecto.jsx
@@ -61,9 +61,8 @@ export const EditorSelecto = () => {
       if (selection) {
         selection.removeAllRanges();
       }
-
       const target = e.inputEvent.target;
-      // This condition is to ensure selection happens only on main app canvas and not on child containers
+      // This condition is to ensure selection happens only on main app canvas and not on subcontainers
       if (target.getAttribute('component-id') === 'canvas') {
         return true;
       }