fix: fixed issue that caused mobile view to break

frontend/src/Editor/Container.jsx

@@ -19,13 +19,13 @@ import { useCurrentState } from '@/_stores/currentStateStore';
 import { useAppVersionStore } from '@/_stores/appVersionStore';
 import { useEditorStore } from '@/_stores/editorStore';
 import { shallow } from 'zustand/shallow';
-import _ from 'lodash';
+import _, { cloneDeep } from 'lodash';
 // eslint-disable-next-line import/no-unresolved
 import { diff } from 'deep-object-diff';
 import DragContainer from './DragContainer';
-import { correctBounds } from './gridUtils';
+import { compact, correctBounds } from './gridUtils';
 
-const NO_OF_GRIDS = 24;
+// const noOfGrids = 24;
 
 export const Container = ({
   canvasWidth,
@@ -52,6 +52,7 @@ export const Container = ({
   // Dont update first time to skip
   // redundant save on app definition load
   const firstUpdate = useRef(true);
+  const [noOfGrids, setNoOfGrids] = useState(24);
   const [subContainerWidths, setSubContainerWidths] = useState({});
 
   const { showComments, currentLayout, selectedComponents } = useEditorStore(
@@ -63,7 +64,7 @@ export const Container = ({
     shallow
   );
 
-  const gridWidth = canvasWidth / NO_OF_GRIDS;
+  const gridWidth = canvasWidth / noOfGrids;
   const styles = {
     width: currentLayout === 'mobile' ? deviceWindowWidth : '100%',
     maxWidth: `${canvasWidth}px`,
@@ -96,8 +97,21 @@ export const Container = ({
 
   useEffect(() => {
     if (currentLayout === 'mobile') {
-      const mobLayouts = boxes.map((box) => box?.layout?.mobile);
+      setNoOfGrids(6);
-      correctBounds(mobLayouts, { cols: 6 });
+      const mobLayouts = Object.keys(boxes).map((key) => {
+        return { ...cloneDeep(boxes[key]?.layouts?.desktop), i: key };
+      });
+      const updatedBoxes = cloneDeep(boxes);
+      let newmMobLayouts = correctBounds(mobLayouts, { cols: 6 });
+      newmMobLayouts = compact(newmMobLayouts, 'vertical', 6);
+      Object.keys(boxes).forEach((id) => {
+        const mobLayout = newmMobLayouts.find((layout) => layout.i === id);
+        updatedBoxes[id].layouts.mobile = mobLayout;
+      });
+      setBoxes({ ...updatedBoxes });
+      // console.log('currentLayout', data);
+    } else {
+      setNoOfGrids(24);
     }
   }, [currentLayout]);
 
@@ -360,7 +374,7 @@ export const Container = ({
 
   const onResizeStop2 = (boxList, id, height, width, x, y) => {
     const newBoxes = boxList.reduce((newBoxList, { id, height, width, x, y }) => {
-      const newWidth = (width * NO_OF_GRIDS) / canvasWidth;
+      const newWidth = (width * noOfGrids) / canvasWidth;
       return {
         ...newBoxList,
         [id]: {
@@ -460,10 +474,10 @@ export const Container = ({
       const canvasWidth = boundingRect?.width;
 
       //round the width to nearest multiple of gridwidth before converting to %
-      const currentWidth = (canvasWidth * width) / NO_OF_GRIDS;
+      const currentWidth = (canvasWidth * width) / noOfGrids;
       let newWidth = currentWidth + deltaWidth;
       newWidth = Math.round(newWidth / gridWidth) * gridWidth;
-      width = (newWidth * NO_OF_GRIDS) / canvasWidth;
+      width = (newWidth * noOfGrids) / canvasWidth;
 
       height = height + deltaHeight;
 
@@ -809,7 +823,7 @@ export const Container = ({
         gridWidth={gridWidth}
         selectedComponents={selectedComponents}
         setIsDragging={setIsDragging}
-        currentLayout
+        currentLayout={currentLayout}
       />
       {/* {Object.keys(boxes).map((key) => {
         const box = boxes[key];

frontend/src/Editor/DragContainer.jsx

@@ -23,10 +23,10 @@ export default function DragContainer({
   const moveableRef = useRef();
   const boxList = boxes.map((box) => ({
     id: box.id,
-    height: box?.layouts?.desktop?.height,
+    height: box?.layouts?.[currentLayout]?.height,
-    left: box?.layouts?.desktop?.left,
+    left: box?.layouts?.[currentLayout]?.left,
-    top: box?.layouts?.desktop?.top,
+    top: box?.layouts?.[currentLayout]?.top,
-    width: box?.layouts?.desktop?.width,
+    width: box?.layouts?.[currentLayout]?.width,
     parent: box?.component?.parent,
   }));
   const [list, setList] = useState(boxList);
@@ -37,7 +37,13 @@ export default function DragContainer({
   useEffect(() => {
     moveableRef.current.updateRect();
     setTimeout(() => moveableRef.current.updateRect(), 100);
-  }, [selectedComponents.length, JSON.stringify(boxes), currentLayout]);
+  }, [selectedComponents.length, JSON.stringify(boxes)]);
+
+  useEffect(() => {
+    moveableRef.current.updateRect();
+    moveableRef.current.updateTarget();
+    moveableRef.current.updateSelectors();
+  }, [currentLayout]);
 
   useEffect(() => {
     setList(boxList);
@@ -47,11 +53,13 @@ export default function DragContainer({
 
   const getDimensions = (id) => {
     const box = boxes.find((b) => b.id === id);
-    const layoutData = box?.layouts?.desktop;
+    const layoutData = box?.layouts?.[currentLayout];
+    console.log('layoutData -->', layoutData);
     if (isEmpty(layoutData)) {
       return {};
     }
-    const width = (canvasWidth * layoutData.width) / NO_OF_GRIDS;
+    // const width = (canvasWidth * layoutData.width) / NO_OF_GRIDS;
+    const width = gridWidth * layoutData.width;
 
     return {
       width: width + 'px',
@@ -90,7 +98,7 @@ export default function DragContainer({
               key={i.id}
               id={i.id}
               widgetid={i.id}
-              widget-pos={JSON.stringify(boxes.find((b) => b.id === i.id)?.layouts?.desktop)}
+              widget-pos={JSON.stringify(boxes.find((b) => b.id === i.id)?.layouts?.[currentLayout])}
               style={{ transform: `translate(332px, -134px)`, ...getDimensions(i.id) }}
             >
               {/* Target {i.id} */}
@@ -128,7 +136,6 @@ export default function DragContainer({
             }
           }}
           onResize={(e) => {
-            // console.log('Resize >>>>>>>>>>>>>>', e);
             const width = Math.round(e.width / gridWidth) * gridWidth;
 
             const currentLayout = list.find(({ id }) => id === e.target.id);
@@ -341,7 +348,7 @@ export default function DragContainer({
           snapThreshold={5}
           elementGuidelines={list.map((l) => ({ element: `.ele-${l.id}` }))}
           isDisplaySnapDigit={false}
-          snapGridWidth={gridWidth * 2}
+          snapGridWidth={gridWidth}
           // snapGridHeight={10}
           // verticalGuidelines={[50, 150, 250, 450, 550]}
           // horizontalGuidelines={[0, 100, 200, 400, 500]}