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

fixes

Browse source
This commit is contained in:
Nakul Nagargade 2025-03-13 11:20:34 +05:30
parent ca5f535aba
commit 89a4756f42
4 changed files with 25 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/AppBuilder/AppCanvas/GhostWidgets.jsx
View file

@ -1,6 +1,7 @@
import React from 'react';
export const DragGhostWidget = ({ isDragging }) => {
console.log('frog');
if (!isDragging) return '';
return (
<div

5
frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
View file

@ -646,10 +646,12 @@ export default function Grid({ gridWidth, currentLayout }) {
return id === e.target.id;
});
hideGridLines();
if (!e.lastEvent) {
return;
}
let _gridWidth = useGridStore.getState().subContainerWidths[currentWidget.component?.parent] || gridWidth;
let width = Math.round(e?.lastEvent?.width / _gridWidth) * _gridWidth;
const height = Math.round(e?.lastEvent?.height / GRID_HEIGHT) * GRID_HEIGHT;
const currentWidth = currentWidget.width * _gridWidth;
const diffWidth = e.lastEvent?.width - currentWidth;
const diffHeight = e.lastEvent?.height - currentWidget?.height;
@ -872,7 +874,6 @@ export default function Grid({ gridWidth, currentLayout }) {
left = dragged.left * sourcegridWidth;
top = dragged.top;
!isModalToCanvas ??
toast.error(`${dragged.widgetType} is not compatible as a child component of ${target.widgetType}`);
}

21
frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
View file

@ -40,8 +40,16 @@ export const addNewWidgetToTheEditor = (componentType, eventMonitorObject, curre
left = Math.round(left / gridWidth);
// Adjust widget width based on the dropping canvas width
const mainCanvasWidth = useGridStore.getState().subContainerWidths['canvas'];
const width = Math.round((defaultWidth * mainCanvasWidth) / gridWidth);
let width = Math.round((defaultWidth * mainCanvasWidth) / gridWidth);
console.log(width, gridWidth, 'width');
// Ensure minimum width
width = Math.max(width, 1);
// Adjust position and width if exceeding grid bounds
if (width + left > NO_OF_GRIDS) {
left = Math.max(0, NO_OF_GRIDS - width);
width = Math.min(width, NO_OF_GRIDS);
}
if (currentLayout === 'mobile') {
componentData.definition.others.showOnDesktop.value = `{{false}}`;
componentData.definition.others.showOnMobile.value = `{{true}}`;
@ -550,12 +558,21 @@ export function pasteComponents(targetParentId, copiedComponentObj) {
componentData.definition.others.showOnMobile.value = currentLayout === 'mobile' ? `{{true}}` : `{{false}}`;
// Adjust width if parent changed
let width = component.layouts.desktop.width;
let width = component.layouts[currentLayout].width;
if (targetParentId !== component.component?.parent) {
const containerWidth = useGridStore.getState().subContainerWidths[targetParentId || 'canvas'];
const oldContainerWidth = useGridStore.getState().subContainerWidths[component?.component?.parent || 'canvas'];
width = Math.round((width * oldContainerWidth) / containerWidth);
// Ensure minimum width
width = Math.max(width, 1);
// Adjust position and width if exceeding grid bounds
if (width + component.layouts[currentLayout].left > NO_OF_GRIDS) {
component.layouts[currentLayout].left = Math.max(0, NO_OF_GRIDS - width);
width = Math.min(width, NO_OF_GRIDS);
}
}
component.layouts[currentLayout].width = width;

3
frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/DragLayer.jsx
View file

@ -42,8 +42,9 @@ const CustomDragLayer = ({ size }) => {
const canvasBounds = item?.canvasRef?.getBoundingClientRect();
const height = size.height;
const width = (canvasWidth * size.width) / NO_OF_GRIDS;
const mainCanvasWidth = document.getElementById('real-canvas')?.offsetWidth || 0;
const width = (mainCanvasWidth * size.width) / NO_OF_GRIDS;
// Calculate position relative to the current canvas (parent or child)
const left = currentOffset.x - (canvasBounds?.left || 0);
const top = currentOffset.y - (canvasBounds?.top || 0);