From 32509ac9bc7a38ef047b339f473cba1b9d0e04e1 Mon Sep 17 00:00:00 2001
From: Johnson Cherian <johnsonc.dev@gmail.com>
Date: Fri, 15 Dec 2023 15:19:15 +0530
Subject: [PATCH] fix: fixed default layout to match new grid

---
 frontend/src/Editor/ConfigHandle.jsx          |  2 +-
 frontend/src/Editor/DragContainer.jsx         | 20 ++++++++++++++++---
 frontend/src/Editor/DraggableBox.jsx          |  2 ++
 frontend/src/Editor/Editor.jsx                |  3 +++
 frontend/src/Editor/Inspector/Inspector.jsx   |  4 +++-
 .../src/Editor/WidgetManager/widgetConfig.js  |  8 ++++----
 6 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/frontend/src/Editor/ConfigHandle.jsx b/frontend/src/Editor/ConfigHandle.jsx
index f3d4fd5955..66468a74db 100644
--- a/frontend/src/Editor/ConfigHandle.jsx
+++ b/frontend/src/Editor/ConfigHandle.jsx
@@ -19,7 +19,7 @@ export const ConfigHandle = function ConfigHandle({
       className={`config-handle ${customClassName}`}
       ref={dragRef}
       style={{
-        top: position === 'top' ? '-22px' : widgetTop + widgetHeight - 10,
+        top: position === 'top' ? '-18px' : widgetTop + widgetHeight - 10,
       }}
     >
       <span
diff --git a/frontend/src/Editor/DragContainer.jsx b/frontend/src/Editor/DragContainer.jsx
index 24521348ab..e9a6e72a51 100644
--- a/frontend/src/Editor/DragContainer.jsx
+++ b/frontend/src/Editor/DragContainer.jsx
@@ -165,6 +165,8 @@ export default function DragContainer({
     };
   };
 
+  console.log('selectedComponents =>', [...selectedComponents]);
+
   const groupedTargets = [
     ...selectedComponents
       .filter((component) => !component?.component?.parent)
@@ -172,6 +174,14 @@ export default function DragContainer({
   ];
 
   console.log('groupedTargets-->', selectedComponents, groupedTargets);
+  console.log(
+    'groupedTargets-->target',
+    draggedSubContainer || (groupedTargets.length < 2 && selectedComponents.length > 1)
+      ? '.empty-widget'
+      : groupedTargets.length > 1
+      ? [...groupedTargets]
+      : '.widget-target'
+  );
 
   return (
     <div className="root">
@@ -207,7 +217,7 @@ export default function DragContainer({
           flushSync={flushSync}
           target={
             draggedSubContainer || (groupedTargets.length < 2 && selectedComponents.length > 1)
-              ? '.asdadadasdadad'
+              ? '.empty-widget'
               : groupedTargets.length > 1
               ? [...groupedTargets]
               : '.widget-target'
@@ -488,12 +498,16 @@ export default function DragContainer({
         {removeDuplicates(list)
           .filter((i) => !isEmpty(i.parent))
           .map((i) => {
-            const groupedTargets1 = [
+            let groupedTargets1 = [
               ...selectedComponents
                 .filter((component) => component?.component?.parent === i.parent)
                 .map((component) => '.ele-' + component.id),
             ];
-            console.log('groupedTargets1', groupedTargets1);
+            groupedTargets1 = [...new Set(groupedTargets1)];
+            console.log(
+              'groupedTargets-->target ' + i.parent,
+              groupedTargets1.length ? groupedTargets1 : `.target-${i.parent}`
+            );
             return (
               <Moveable
                 key={i.parent}
diff --git a/frontend/src/Editor/DraggableBox.jsx b/frontend/src/Editor/DraggableBox.jsx
index 7e70c8f565..4520b0fe3f 100644
--- a/frontend/src/Editor/DraggableBox.jsx
+++ b/frontend/src/Editor/DraggableBox.jsx
@@ -227,12 +227,14 @@ export const DraggableBox = React.memo(
               'draggable-box-in-editor': mode === 'edit',
             })}
             onMouseEnter={(e) => {
+              console.log('TEST====>');
               if (e.currentTarget.className.includes(`widget-${id}`)) {
                 onComponentHover?.(id);
                 e.stopPropagation();
               }
             }}
             onMouseLeave={() => {
+              console.log('TEST====> mouseleace');
               setHoveredComponent('');
             }}
             style={getStyles(isDragging, isSelectedComponent)}
diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx
index be336c6b53..edcb90382f 100644
--- a/frontend/src/Editor/Editor.jsx
+++ b/frontend/src/Editor/Editor.jsx
@@ -634,6 +634,7 @@ const EditorComponent = (props) => {
   };
 
   const onAreaSelectionEnd = (e) => {
+    console.log('selectedComponents =>onAreaSelectionEnd--->', e);
     setSelectionInProgress(false);
     e.selected.forEach((el, index) => {
       const id = el.getAttribute('widgetid');
@@ -2022,4 +2023,6 @@ const EditorComponent = (props) => {
   );
 };
 
+const getHighestParent = () => {};
+
 export const Editor = withTranslation()(withRouter(EditorComponent));
diff --git a/frontend/src/Editor/Inspector/Inspector.jsx b/frontend/src/Editor/Inspector/Inspector.jsx
index b98ae05050..da3b6feb3c 100644
--- a/frontend/src/Editor/Inspector/Inspector.jsx
+++ b/frontend/src/Editor/Inspector/Inspector.jsx
@@ -87,7 +87,9 @@ export const Inspector = ({
 
   useHotkeys('backspace', () => {
     if (isVersionReleased) return;
-    setWidgetDeleteConfirmation(true);
+    // setWidgetDeleteConfirmation(true);
+    switchSidebarTab(2);
+    removeComponent(component.id);
   });
   useHotkeys('escape', () => switchSidebarTab(2));
 
diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js
index 9d7a246cb7..c35933fe97 100644
--- a/frontend/src/Editor/WidgetManager/widgetConfig.js
+++ b/frontend/src/Editor/WidgetManager/widgetConfig.js
@@ -3799,7 +3799,7 @@ export const widgets = [
     displayName: 'List View',
     description: 'List multiple items',
     defaultSize: {
-      width: 20,
+      width: 30,
       height: 300,
     },
     defaultChildren: [
@@ -3807,7 +3807,7 @@ export const widgets = [
         componentName: 'Image',
         layout: {
           top: 15,
-          left: 6.976744186046512,
+          left: 3,
           height: 100,
         },
         properties: ['source'],
@@ -3817,7 +3817,7 @@ export const widgets = [
         componentName: 'Text',
         layout: {
           top: 50,
-          left: 27,
+          left: 11,
           height: 30,
         },
         properties: ['text'],
@@ -3827,7 +3827,7 @@ export const widgets = [
         componentName: 'Button',
         layout: {
           top: 50,
-          left: 60,
+          left: 26,
           height: 30,
         },
         incrementWidth: 2,