resize grid while dragging and resizing a component in the canvas

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, resizeToGrid } from './snapToGrid';
+import { snapToGrid as doSnapToGrid } 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,13 +46,6 @@ 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]);
@@ -217,7 +210,8 @@ export const Container = ({
     width = width + deltaWidth;
     height = height + deltaHeight;
 
-    const resized = resizeToGrid(width, height)
+    [width, height] = doSnapToGrid(width, height)
+
     let newBoxes = {
       ...boxes,
       [id]: {
@@ -226,7 +220,7 @@ export const Container = ({
           ...boxes[id]['layouts'],
           [currentLayout]: {
             ...boxes[id]['layouts'][currentLayout],
-            width: resized.snappedX, height: resized.snappedY, top, left
+            width: width, height: height, top, left
           }
         }
       }

frontend/src/Editor/snapToGrid.js

@@ -1,12 +1,5 @@
 export function snapToGrid(x, y) {
   const snappedX = Math.round(x / 30) * 30;
-  const snappedY = Math.round(y / 30) * 30;
+  const snappedY = Math.round(y / 10) * 10;
   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}
-}

frontend/src/_styles/theme.scss

@@ -289,7 +289,7 @@ body {
       align-items: center;
 
       .show-grid {
-        background-size: 30px 30px;
+        background-size: 30px 10px;
         background-image: linear-gradient(to right, rgba(194, 191, 191, 0.2) 1px, transparent 1px),
           linear-gradient(to bottom, rgba(194, 191, 191, 0.2) 1px, transparent 1px);
       }