From a77c54c73646ef01a436880b583b9803ebf62465 Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Mon, 7 Jul 2025 19:02:51 +0530 Subject: [PATCH] Fix ghost not coming when resizing --- .../src/AppBuilder/AppCanvas/Grid/Grid.jsx | 27 ++++++++----------- .../AppBuilder/AppCanvas/Grid/gridUtils.js | 24 +++++++++++------ .../AppBuilder/AppCanvas/WidgetWrapper.jsx | 5 ++-- server/ee | 2 +- 4 files changed, 30 insertions(+), 28 deletions(-) diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx index d58cd1ed39..8afd3c303c 100644 --- a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx +++ b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx @@ -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} /> ); diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/gridUtils.js b/frontend/src/AppBuilder/AppCanvas/Grid/gridUtils.js index ba42d4152f..1a3bc36b64 100644 --- a/frontend/src/AppBuilder/AppCanvas/Grid/gridUtils.js +++ b/frontend/src/AppBuilder/AppCanvas/Grid/gridUtils.js @@ -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 diff --git a/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx b/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx index 057781f8ec..954be5607a 100644 --- a/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx +++ b/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx @@ -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 diff --git a/server/ee b/server/ee index 3bd72a7575..cc864000dd 160000 --- a/server/ee +++ b/server/ee @@ -1 +1 @@ -Subproject commit 3bd72a7575446d120a3b548e8819be271072407a +Subproject commit cc864000dd03cc345e53ae9fc43821d3174f4c64