canvas grid resized when resizing a component and component snaps to the new next grid size

frontend/src/Editor/Container.jsx

@@ -2,7 +2,7 @@ import React, { useCallback, useState, useEffect } from 'react';
 import { useDrop, useDragLayer } from 'react-dnd';
 import { ItemTypes } from './ItemTypes';
 import { DraggableBox } from './DraggableBox';
-import { snapToGrid as doSnapToGrid } from './snapToGrid';
+import { snapToGrid as doSnapToGrid, resizeToGrid } from './snapToGrid';
 import update from 'immutability-helper';
 import { componentTypes } from './Components/components';
 import { computeComponentName } from '@/_helpers/utils';
@@ -34,11 +34,11 @@ export const Container = ({
   darkMode
 }) => {
 
-  const styles = {
-    width: currentLayout === 'mobile' ? deviceWindowWidth : 1292,
-    height: 2400,
-    position: 'absolute'
-  };
+  // const styles = {
+  //   width: currentLayout === 'mobile' ? deviceWindowWidth : 1292,
+  //   height: 2400,
+  //   position: 'absolute'
+  // };
 
   const components = appDefinition.components;
 
@@ -46,6 +46,13 @@ export const Container = ({
   const [isDragging, setIsDragging] = useState(false);
   const [isResizing, setIsResizing] = useState(false);
 
+  const styles = {
+    width: currentLayout === 'mobile' ? deviceWindowWidth : 1292,
+    height: 2400,
+    position: 'absolute',
+    backgroundSize: `${isResizing ? '30px 10px' : '30px 30px'}`
+  };
+
   useEffect(() => {
     setBoxes(components);
   }, [components]);
@@ -210,6 +217,7 @@ export const Container = ({
     width = width + deltaWidth;
     height = height + deltaHeight;
 
+    const resized = resizeToGrid(width, height)
     let newBoxes = {
       ...boxes,
       [id]: {
@@ -218,7 +226,7 @@ export const Container = ({
           ...boxes[id]['layouts'],
           [currentLayout]: {
             ...boxes[id]['layouts'][currentLayout],
-            width, height, top, left
+            width: resized.snappedX, height: resized.snappedY, top, left
           }
         }
       }
@@ -251,7 +259,7 @@ export const Container = ({
   }
 
   return (
-    <div ref={drop} style={styles} className={`real-canvas ${isDragging || isResizing ? ' show-grid' : ''}`}>
+    <div ref={drop} style={styles} className={`real-canvas ${isDragging || isResizing ? 'show-grid' : ''}`}>
       {Object.keys(boxes).map((key) => {
 
         const box = boxes[key];

frontend/src/Editor/DraggableBox.jsx

@@ -184,6 +184,7 @@ export const DraggableBox = function DraggableBox({
         >
           <Rnd
             style={{ ...style }}
+            resizeGrid={[30,10]}
             size={{
               width: scaleWidth(currentLayoutOptions.width, scaleValue) + 6,
               height: currentLayoutOptions.height + 6,
@@ -194,7 +195,7 @@ export const DraggableBox = function DraggableBox({
             }}
             defaultSize={{}}
             className={`resizer ${isSelectedComponent && !mouseOver ? 'resizer-selected' : ''} ${
-              mouseOver ? 'resizer-active' : ''
+              mouseOver || isResizing ? 'resizer-active' : ''
             } `}
             onResize={() => setResizing(true)}
             resizeHandleClasses={mouseOver ? resizerClasses : {}}

frontend/src/Editor/snapToGrid.js

@@ -3,3 +3,10 @@ export function snapToGrid(x, y) {
   const snappedY = Math.round(y / 30) * 30;
   return [snappedX, snappedY];
 }
+
+export function resizeToGrid(x, y) {
+  const snappedX = Math.round(x / 30) * 30;
+  const snappedY = Math.round(y / 10) * 10;
+
+  return {snappedX: snappedX, snappedY: snappedY}
+}