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

Fix ghost not coming when resizing

Browse source
This commit is contained in:
Nakul Nagargade 2025-07-07 19:02:51 +05:30
parent 7198427ff9
commit a77c54c736
4 changed files with 30 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -23,7 +23,7 @@ import {
computeScrollDelta,
computeScrollDeltaOnDrag,
getDraggingWidgetWidth,
positionDragGhostWidget,
positionGhostElement,
findNewParentIdFromMousePosition,
} from './gridUtils';
import { dragContextBuilder, getAdjustedDropPosition } from './helpers/dragEnd';
@ -536,9 +536,8 @@ export default function Grid({ gridWidth, currentLayout }) {
const _top = originalBox.top;
// Apply transform to return to original position
ev.target.style.transform = `translate(${Math.round(_left / _gridWidth) * _gridWidth}px, ${
Math.round(_top / GRID_HEIGHT) * GRID_HEIGHT
}px)`;
ev.target.style.transform = `translate(${Math.round(_left / _gridWidth) * _gridWidth}px, ${Math.round(_top / GRID_HEIGHT) * GRID_HEIGHT
}px)`;
}
});
@ -648,12 +647,8 @@ export default function Grid({ gridWidth, currentLayout }) {
let _gridWidth = useGridStore.getState().subContainerWidths[currentWidget.component?.parent] || gridWidth;
// Show grid during resize
if (currentWidget.component?.parent) {
document.getElementById('canvas-' + currentWidget.component?.parent)?.classList.add('show-grid');
setDragParentId(currentWidget.component?.parent);
} else {
document.getElementById('real-canvas').classList.add('show-grid');
}
showGridLines();
handleActivateTargets(currentWidget.component?.parent);
const currentWidth = currentWidget.width * _gridWidth;
@ -697,6 +692,7 @@ export default function Grid({ gridWidth, currentLayout }) {
e.target.style.transform = `translate(${transformX}px, ${transformY}px)`;
if (e.width > 0) e.target.style.width = `${e.width}px`;
if (e.height > 0) e.target.style.height = `${e.height}px`;
positionGhostElement(e.target, 'resize-ghost-widget');
}}
onResizeStart={(e) => {
if (
@ -752,9 +748,8 @@ export default function Grid({ gridWidth, currentLayout }) {
const roundedTransformY = Math.round(transformY / GRID_HEIGHT) * GRID_HEIGHT;
transformY = transformY % GRID_HEIGHT === 5 ? roundedTransformY - GRID_HEIGHT : roundedTransformY;
e.target.style.transform = `translate(${Math.round(transformX / _gridWidth) * _gridWidth}px, ${
Math.round(transformY / GRID_HEIGHT) * GRID_HEIGHT
}px)`;
e.target.style.transform = `translate(${Math.round(transformX / _gridWidth) * _gridWidth}px, ${Math.round(transformY / GRID_HEIGHT) * GRID_HEIGHT
}px)`;
if (!maxWidthHit || e.width < e.target.clientWidth) {
e.target.style.width = `${Math.round(e.lastEvent.width / _gridWidth) * _gridWidth}px`;
}
@ -1094,7 +1089,7 @@ export default function Grid({ gridWidth, currentLayout }) {
`translate: ${e.translate[0]} | Round: ${Math.round(e.translate[0] / gridWidth) * gridWidth} | ${gridWidth}`
);
positionDragGhostWidget(e.target);
positionGhostElement(e.target, 'moveable-drag-ghost');
}}
onDragGroup={(ev) => {
const { events } = ev;
@ -1179,8 +1174,8 @@ export default function Grid({ gridWidth, currentLayout }) {
}}
// snapGridAll={true}
scrollable={true}
// snapContainer={snapContainer}
// snapGridWidth={100}
// snapContainer={snapContainer}
// snapGridWidth={100}
/>
</>
);

24
frontend/src/AppBuilder/AppCanvas/Grid/gridUtils.js
View file

@ -530,28 +530,36 @@ export const getDraggingWidgetWidth = (canvasParentId, widgetWidth) => {
return draggingWidgetWidth;
};
export const positionDragGhostWidget = (draggedElement) => {
const ghostElement = document.getElementById('moveable-drag-ghost');
/**
* Positions a ghost/feedback element relative to the main canvas
* @param {HTMLElement} targetElement - The element being dragged/resized
* @param {string} ghostElementId - The ID of the ghost element to position
* @param {Object} options - Additional positioning options
* @param {boolean} options.includeSize - Whether to update width/height of ghost element
*/
export const positionGhostElement = (targetElement, ghostElementId) => {
const ghostElement = document.getElementById(ghostElementId);
if (!ghostElement || !draggedElement) return;
if (!ghostElement || !targetElement) return;
const mainCanvas = document.getElementById('real-canvas');
if (!mainCanvas) return;
const mainCanvasRect = mainCanvas.getBoundingClientRect();
const draggedRect = draggedElement.getBoundingClientRect();
const targetRect = targetElement.getBoundingClientRect();
// Calculate position relative to main canvas
const relativeLeft = draggedRect.left - mainCanvasRect.left;
const relativeTop = draggedRect.top - mainCanvasRect.top;
const relativeLeft = targetRect.left - mainCanvasRect.left;
const relativeTop = targetRect.top - mainCanvasRect.top;
// Apply the position
ghostElement.style.left = `${relativeLeft}px`;
ghostElement.style.top = `${relativeTop}px`;
ghostElement.style.width = `${draggedRect.width}px`;
ghostElement.style.height = `${draggedRect.height}px`;
ghostElement.style.width = `${targetRect.width}px`;
ghostElement.style.height = `${targetRect.height}px`;
};
/**
* Finds the new parent ID based on the current mouse position during drag operations
* @param {number} clientX - The X coordinate of the mouse position

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

@ -1,9 +1,8 @@
import React, { memo } from 'react';
import useStore from '@/AppBuilder/_stores/store';
import { shallow } from 'zustand/shallow';
import { DragGhostWidget, ResizeGhostWidget } from './GhostWidgets';
import { ResizeGhostWidget } from './GhostWidgets';
import { ConfigHandle } from './ConfigHandle/ConfigHandle';
import { useGridStore } from '@/_stores/gridStore';
import cx from 'classnames';
import RenderWidget from './RenderWidget';
import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
@ -35,7 +34,7 @@ const WidgetWrapper = memo(
const temporaryLayouts = useStore((state) => state.temporaryLayouts?.[id], shallow);
const isWidgetActive = useStore((state) => state.selectedComponents.find((sc) => sc === id) && !readOnly, shallow);
const isDragging = useStore((state) => state.draggingComponentId === id);
const isResizing = useGridStore((state) => state.resizingComponentId === id);
const isResizing = useStore((state) => state.resizingComponentId === id);
const componentType = useStore(
(state) => state.getComponentDefinition(id, moduleId)?.component?.component,
shallow

2
server/ee

@ -1 +1 @@
Subproject commit 3bd72a7575446d120a3b548e8819be271072407a
Subproject commit cc864000dd03cc345e53ae9fc43821d3174f4c64