diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx index b7582c0792..ce1d8ac966 100644 --- a/frontend/src/Editor/Container.jsx +++ b/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 } } } diff --git a/frontend/src/Editor/snapToGrid.js b/frontend/src/Editor/snapToGrid.js index 848c47eb51..01ec0e75ed 100644 --- a/frontend/src/Editor/snapToGrid.js +++ b/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} -} \ No newline at end of file diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss index 013cca7e92..9f5c72f6bb 100644 --- a/frontend/src/_styles/theme.scss +++ b/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); }