From 1fcfd318c8273169f3896a86c313fdd5fb6cde21 Mon Sep 17 00:00:00 2001
From: Kavin Venkatachalam <kavin.saratha@gmail.com>
Date: Thu, 11 Jan 2024 12:00:34 +0530
Subject: [PATCH] Fixed dragging multiple components with dragHandle

---
 frontend/src/Editor/DragContainer.jsx | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/frontend/src/Editor/DragContainer.jsx b/frontend/src/Editor/DragContainer.jsx
index 0805d1bd06..87ae10b17b 100644
--- a/frontend/src/Editor/DragContainer.jsx
+++ b/frontend/src/Editor/DragContainer.jsx
@@ -15,18 +15,20 @@ const DimensionViewable = {
   name: 'dimensionViewable',
   props: [],
   events: [],
-  render(moveable) {
-    const rect = moveable.getRect();
-
+  render() {
     return (
       <div
         className={'multiple-components-config-handle'}
-        onMouseEnter={() => {
-          useGridStore.getState().actions.setIsGroundHandleHoverd(true);
+        onMouseUpCapture={() => {
+          if (useGridStore.getState().isGroundHandleHoverd) {
+            useGridStore.getState().actions.setIsGroundHandleHoverd(false);
+          }
+        }}
+        onMouseDownCapture={() => {
+          if (!useGridStore.getState().isGroundHandleHoverd) {
+            useGridStore.getState().actions.setIsGroundHandleHoverd(true);
+          }
         }}
-        // onMouseUp={() => {
-        //   useGridStore.getState().actions.setIsGroundHandleHoverd(false);
-        // }}
       >
         <span className="badge handle-content" id="multiple-components-config-handle" style={{ background: '#4d72fa' }}>
           <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -183,10 +185,8 @@ export default function DragContainer({
         return component.id;
       })
     );
-    console.log('here--->', { selectedComponents, boxes, selectedComponentsId });
     const selectedBoxs = boxes.filter((box) => selectedComponentsId.has(box.id));
     const parentId = selectedBoxs.find((comp) => comp.component.parent)?.component?.parent;
-    console.log('here--->', parentId, selectedBoxs);
 
     // Get all elements with the old class name
     var elements = document.getElementsByClassName('selected-component');
@@ -627,7 +627,6 @@ export default function DragContainer({
               }}
               onDragGroupEnd={(e) => {
                 const { events } = e;
-                useGridStore.getState().actions.setIsGroundHandleHoverd(false);
                 onDrag(
                   events.map((ev) => ({
                     id: ev.target.id,