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

merge conflic fix

Browse source
This commit is contained in:
Nakul Nagargade 2025-07-01 19:13:26 +05:30
parent 6bb5b8e1c9
commit b88d76a4bb
1 changed files with 37 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
frontend/src/AppBuilder/AppCanvas/useCanvasDropHandler.js
View file

@ -2,7 +2,11 @@ import useStore from '@/AppBuilder/_stores/store';
import { useGridStore } from '@/_stores/gridStore';
import { shallow } from 'zustand/shallow';
import { noop } from 'lodash';
import { addChildrenWidgetsToParent, addNewWidgetToTheEditor } from '../AppCanvas/appCanvasUtils';
import {
addChildrenWidgetsToParent,
addNewWidgetToTheEditor,
addDefaultButtonIdToForm,
} from '../AppCanvas/appCanvasUtils';
import { WIDGETS_WITH_DEFAULT_CHILDREN } from '../AppCanvas/appCanvasConstants';
import { RIGHT_SIDE_BAR_TAB } from '../RightSideBar/rightSidebarConstants';
import { isPDFSupported } from '@/_helpers/appUtils';
@ -21,7 +25,7 @@ export const useCanvasDropHandler = ({ appType }) => {
const currentLayout = useStore((state) => state.currentLayout, shallow);
const setCurrentDragCanvasId = useGridStore((state) => state.actions.setCurrentDragCanvasId);
const { deactivateGhost } = useGhostMoveable();
const handleDrop = ({ componentType: draggedComponentType, component }, monitor, canvasId) => {
const handleDrop = async ({ componentType: draggedComponentType, component }, monitor, canvasId) => {
const realCanvasRef =
!canvasId || canvasId === 'canvas'
? document.getElementById(`real-canvas`)
@ -61,8 +65,10 @@ export const useCanvasDropHandler = ({ appType }) => {
}
: undefined;
let addedComponent;
if (WIDGETS_WITH_DEFAULT_CHILDREN.includes(draggedComponentType)) {
const parentComponent = addNewWidgetToTheEditor(
let parentComponent = addNewWidgetToTheEditor(
draggedComponentType,
monitor,
currentLayout,
@ -71,9 +77,11 @@ export const useCanvasDropHandler = ({ appType }) => {
moduleInfo
);
const childComponents = addChildrenWidgetsToParent(draggedComponentType, parentComponent?.id, currentLayout);
const newComponents = [parentComponent, ...childComponents];
addComponentToCurrentPage(newComponents);
setActiveRightSideBarTab(RIGHT_SIDE_BAR_TAB.CONFIGURATION);
if (draggedComponentType === 'Form') {
parentComponent = addDefaultButtonIdToForm(parentComponent, childComponents);
}
addedComponent = [parentComponent, ...childComponents];
await addComponentToCurrentPage(addedComponent);
} else {
const newComponent = addNewWidgetToTheEditor(
draggedComponentType,
@ -83,8 +91,29 @@ export const useCanvasDropHandler = ({ appType }) => {
canvasId,
moduleInfo
);
addComponentToCurrentPage([newComponent]);
setActiveRightSideBarTab(RIGHT_SIDE_BAR_TAB.CONFIGURATION);
addedComponent = [newComponent];
await addComponentToCurrentPage(addedComponent);
}
setActiveRightSideBarTab(RIGHT_SIDE_BAR_TAB.CONFIGURATION);
const canvas = document.querySelector('.canvas-container');
const sidebar = document.querySelector('.editor-sidebar');
const droppedElem = document.getElementById(addedComponent?.[0]?.id);
if (!canvas || !sidebar || !droppedElem) return;
const droppedRect = droppedElem.getBoundingClientRect();
const sidebarRect = sidebar.getBoundingClientRect();
const isOverlapping = droppedRect.right > sidebarRect.left && droppedRect.left < sidebarRect.right;
if (isOverlapping) {
const overlap = droppedRect.right - sidebarRect.left;
canvas.scrollTo({
left: canvas.scrollLeft + overlap,
behavior: 'smooth',
});
}
// Reset canvas ID when dropping
setCurrentDragCanvasId(null);