From 872295036383e4190f39dca243c4c51cd6cf50be Mon Sep 17 00:00:00 2001
From: Johnson Cherian <johnsonc.dev@gmail.com>
Date: Fri, 27 Oct 2023 11:07:39 +0530
Subject: [PATCH] fix: correct component width optimization for mobile screens

---
 frontend/src/Editor/DragContainer.jsx | 97 ++++++++++++++-------------
 frontend/src/Editor/gridUtils.js      |  2 +-
 2 files changed, 52 insertions(+), 47 deletions(-)

diff --git a/frontend/src/Editor/DragContainer.jsx b/frontend/src/Editor/DragContainer.jsx
index 7d1b6fbfe5..5b65cfc8ca 100644
--- a/frontend/src/Editor/DragContainer.jsx
+++ b/frontend/src/Editor/DragContainer.jsx
@@ -131,6 +131,7 @@ export default function DragContainer({
             }
           }}
           onResize={(e) => {
+            console.log('onResize', e);
             const width = Math.round(e.width / gridWidth) * gridWidth;
 
             const currentLayout = list.find(({ id }) => id === e.target.id);
@@ -171,57 +172,61 @@ export default function DragContainer({
             // ]);
           }}
           onResizeEnd={(e) => {
-            console.log('onResizeEnd>>>>>>>>>>>>>>', e);
-            // const width = Math.round(e.lastEvent.width / gridWidth) * gridWidth;
-            // e.target.style.width = `${width}px`;
-            // e.target.style.height = `${e.lastEvent.height}px`;
-            // e.target.style.transform = e.lastEvent.drag.transform;
-            // onResizeStop([
-            //   {
-            //     id: e.target.id,
-            //     height: e.lastEvent.height,
-            //     width: width,
-            //     x: e.lastEvent.drag.translate[0],
-            //     y: e.lastEvent.drag.translate[1],
-            //   },
-            // ]);
+            try {
+              console.log('onResizeEnd>>>>>>>>>>>>>>', e);
+              // const width = Math.round(e.lastEvent.width / gridWidth) * gridWidth;
+              // e.target.style.width = `${width}px`;
+              // e.target.style.height = `${e.lastEvent.height}px`;
+              // e.target.style.transform = e.lastEvent.drag.transform;
+              // onResizeStop([
+              //   {
+              //     id: e.target.id,
+              //     height: e.lastEvent.height,
+              //     width: width,
+              //     x: e.lastEvent.drag.translate[0],
+              //     y: e.lastEvent.drag.translate[1],
+              //   },
+              // ]);
 
-            const width = Math.round(e.lastEvent.width / gridWidth) * gridWidth;
-            const height = Math.round(e.lastEvent.height / 10) * 10;
+              const width = Math.round(e.lastEvent.width / gridWidth) * gridWidth;
+              const height = Math.round(e.lastEvent.height / 10) * 10;
 
-            const currentLayout = list.find(({ id }) => id === e.target.id);
-            const currentWidth = currentLayout.width * gridWidth;
-            const diffWidth = e.lastEvent.width - currentWidth;
-            const diffHeight = e.lastEvent.height - currentLayout.height;
-            console.log('onResizeEnd data', currentWidth, e.width, diffWidth, e.direction, diffHeight);
-            const isLeftChanged = e.lastEvent.direction[0] === -1;
-            const isTopChanged = e.lastEvent.direction[1] === -1;
+              const currentLayout = list.find(({ id }) => id === e.target.id);
+              const currentWidth = currentLayout.width * gridWidth;
+              const diffWidth = e.lastEvent.width - currentWidth;
+              const diffHeight = e.lastEvent.height - currentLayout.height;
+              console.log('onResizeEnd data', currentWidth, e.width, diffWidth, e.direction, diffHeight);
+              const isLeftChanged = e.lastEvent.direction[0] === -1;
+              const isTopChanged = e.lastEvent.direction[1] === -1;
 
-            console.log(
-              'onResizeEnd => currentLayout transform',
-              `translate(${currentLayout.left * gridWidth}px, ${currentLayout.top}px)`,
-              `translate(${currentLayout.left * gridWidth - diffWidth}px, ${currentLayout.top}px)`
-            );
+              console.log(
+                'onResizeEnd => currentLayout transform',
+                `translate(${currentLayout.left * gridWidth}px, ${currentLayout.top}px)`,
+                `translate(${currentLayout.left * gridWidth - diffWidth}px, ${currentLayout.top}px)`
+              );
 
-            let transformX = currentLayout.left * gridWidth;
-            let transformY = currentLayout.top;
-            if (isLeftChanged) {
-              transformX = currentLayout.left * gridWidth - diffWidth;
+              let transformX = currentLayout.left * gridWidth;
+              let transformY = currentLayout.top;
+              if (isLeftChanged) {
+                transformX = currentLayout.left * gridWidth - diffWidth;
+              }
+              if (isTopChanged) {
+                transformY = currentLayout.top - diffHeight;
+              }
+
+              // e.target.style.transform = e.drag.transform;
+              onResizeStop([
+                {
+                  id: e.target.id,
+                  height: height,
+                  width: width,
+                  x: transformX,
+                  y: transformY,
+                },
+              ]);
+            } catch (error) {
+              console.error('ResizeEnd error ->', error);
             }
-            if (isTopChanged) {
-              transformY = currentLayout.top - diffHeight;
-            }
-
-            // e.target.style.transform = e.drag.transform;
-            onResizeStop([
-              {
-                id: e.target.id,
-                height: height,
-                width: width,
-                x: transformX,
-                y: transformY,
-              },
-            ]);
           }}
           onResizeGroup={({ events }) => {
             const newBoxs = [];
diff --git a/frontend/src/Editor/gridUtils.js b/frontend/src/Editor/gridUtils.js
index aae90d3804..bfdf2a2a8c 100644
--- a/frontend/src/Editor/gridUtils.js
+++ b/frontend/src/Editor/gridUtils.js
@@ -228,6 +228,6 @@ function sortLayoutItemsByRowCol(layout) {
 function scaleLayouts(layouts, cols = 6) {
   return layouts.map((layout) => ({
     ...layout,
-    width: layout.width <= 4 ? 2 : layout.width,
+    width: layout.width <= 4 ? 2 : layout.width <= 8 ? 3 : layout.width,
   }));
 }