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: recalculate widget dimensions on layout change

Browse source
This commit is contained in:
Johnson Cherian 2023-10-26 11:05:44 +05:30
parent 144b632af3
commit a23757d668
2 changed files with 26 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -30,7 +30,6 @@ export default function DragContainer({
parent: box?.component?.parent,
}));
const [list, setList] = useState(boxList);
console.log('>>>>>>>>>>>>>> Rerender');
const hoveredComponent = useEditorStore((state) => state?.hoveredComponent, shallow);
@ -40,9 +39,12 @@ export default function DragContainer({
}, [selectedComponents.length, JSON.stringify(boxes)]);
useEffect(() => {
moveableRef.current.updateRect();
moveableRef.current.updateTarget();
moveableRef.current.updateSelectors();
setList(boxList);
setTimeout(() => {
moveableRef.current.updateRect();
moveableRef.current.updateTarget();
moveableRef.current.updateSelectors();
}, 100);
}, [currentLayout]);
useEffect(() => {
@ -54,7 +56,6 @@ export default function DragContainer({
const getDimensions = (id) => {
const box = boxes.find((b) => b.id === id);
const layoutData = box?.layouts?.[currentLayout];
console.log('layoutData -->', layoutData);
if (isEmpty(layoutData)) {
return {};
}
@ -69,21 +70,15 @@ export default function DragContainer({
};
const groupedTargets = [...selectedComponents.map((component) => '.ele-' + component.id)];
console.log('selectedComponents', selectedComponents);
const movableTargets = [groupedTargets];
console.log('selectedComponents movableTargets', movableTargets);
console.log('selectedComponents hoveredComponent', hoveredComponent);
if (hoveredComponent && groupedTargets?.length <= 1) {
movableTargets.push('.ele-' + hoveredComponent);
}
console.log('selectedComponents draggedTarget', draggedTarget);
if (draggedTarget && !movableTargets.includes(`.ele-${draggedTarget}`)) {
movableTargets.push('.ele-' + draggedTarget);
}
console.log('selectedComponents movableTargets', movableTargets, isChildDragged);
// console.log("movableTargets", movableTargets, hoveredComponent);
return (

21
frontend/src/Editor/gridUtils.js
View file

@ -1,4 +1,5 @@
export function correctBounds(layout, bounds) {
layout = scaleLayouts(layout);
const collidesWith = [];
for (let i = 0, len = layout.length; i < len; i++) {
const l = layout[i];
@ -18,7 +19,18 @@ export function correctBounds(layout, bounds) {
}
}
}
return layout;
return removePaddingLeft(layout);
}
function removePaddingLeft(layouts) {
return layouts.map((layout) => {
if (layout.left == 1) {
if (!layouts.find((l) => l.top > layout.top && l.top < layout.top + layout.height && l.left < 1)) {
return { ...layout, left: 0 };
}
}
return { ...layout };
});
}
function collides(l1, l2) {
@ -212,3 +224,10 @@ function sortLayoutItemsByRowCol(layout) {
return -1;
});
}
function scaleLayouts(layouts, cols = 6) {
return layouts.map((layout) => ({
...layout,
width: layout.width <= 4 ? 2 : layout.width,
}));
}