Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 01:18:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: fixed issue that caused mobile view to break

Browse source
This commit is contained in:
Johnson Cherian 2023-10-25 09:35:28 +05:30
parent 707872cd8e
commit 144b632af3
2 changed files with 41 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
frontend/src/Editor/Container.jsx
View file

@ -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);
correctBounds(mobLayouts, { cols: 6 });
setNoOfGrids(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];

27
frontend/src/Editor/DragContainer.jsx
View file

@ -23,10 +23,10 @@ export default function DragContainer({
const moveableRef = useRef();
const boxList = boxes.map((box) => ({
id: box.id,
height: box?.layouts?.desktop?.height,
left: box?.layouts?.desktop?.left,
top: box?.layouts?.desktop?.top,
width: box?.layouts?.desktop?.width,
height: box?.layouts?.[currentLayout]?.height,
left: box?.layouts?.[currentLayout]?.left,
top: box?.layouts?.[currentLayout]?.top,
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]}