From ca5f535aba1e217581a1c8d3359ae25c705cf497 Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Wed, 12 Mar 2025 11:52:05 +0530 Subject: [PATCH 1/8] fix copy paste not working in new modal --- frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js index 8dae9e001c..42343a9711 100644 --- a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js +++ b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js @@ -498,7 +498,7 @@ export function pasteComponents(targetParentId, copiedComponentObj) { targetParentId === key || (components?.[key]?.component.component === 'Tabs' && targetParentId?.split('-')?.slice(0, -1)?.join('-') === key) || - (['Container', 'Form', 'Modal'].includes(components?.[key]?.component.component) && + (['Container', 'Form', 'ModalV2'].includes(components?.[key]?.component.component) && ['header', 'footer'].some((section) => targetParentId.includes(section))) ) ) { From 89a4756f422945733555ce6fa407621908ec8a29 Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Thu, 13 Mar 2025 11:20:34 +0530 Subject: [PATCH 2/8] fixes --- .../src/AppBuilder/AppCanvas/GhostWidgets.jsx | 1 + .../src/AppBuilder/AppCanvas/Grid/Grid.jsx | 5 +++-- .../AppBuilder/AppCanvas/appCanvasUtils.js | 21 +++++++++++++++++-- .../ComponentsManagerTab/DragLayer.jsx | 3 ++- 4 files changed, 25 insertions(+), 5 deletions(-) diff --git a/frontend/src/AppBuilder/AppCanvas/GhostWidgets.jsx b/frontend/src/AppBuilder/AppCanvas/GhostWidgets.jsx index 1061521a66..8fdf36d54e 100644 --- a/frontend/src/AppBuilder/AppCanvas/GhostWidgets.jsx +++ b/frontend/src/AppBuilder/AppCanvas/GhostWidgets.jsx @@ -1,6 +1,7 @@ import React from 'react'; export const DragGhostWidget = ({ isDragging }) => { + console.log('frog'); if (!isDragging) return ''; return (
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; diff --git a/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/DragLayer.jsx b/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/DragLayer.jsx index 77274cd658..158d87787d 100644 --- a/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/DragLayer.jsx +++ b/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/DragLayer.jsx @@ -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); From 54afb15fb6fa51bc60b37b4dc105255d0fab7c77 Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Thu, 13 Mar 2025 12:25:37 +0530 Subject: [PATCH 3/8] remove console --- frontend/src/AppBuilder/AppCanvas/GhostWidgets.jsx | 1 - frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx | 2 -- 2 files changed, 3 deletions(-) diff --git a/frontend/src/AppBuilder/AppCanvas/GhostWidgets.jsx b/frontend/src/AppBuilder/AppCanvas/GhostWidgets.jsx index 8fdf36d54e..1061521a66 100644 --- a/frontend/src/AppBuilder/AppCanvas/GhostWidgets.jsx +++ b/frontend/src/AppBuilder/AppCanvas/GhostWidgets.jsx @@ -1,7 +1,6 @@ import React from 'react'; export const DragGhostWidget = ({ isDragging }) => { - console.log('frog'); if (!isDragging) return ''; return (
Date: Mon, 17 Mar 2025 12:12:05 +0530 Subject: [PATCH 4/8] Fix visibility off using CSA, widget height not updating --- .../AppCanvas/ConfigHandle/ConfigHandle.jsx | 3 +-- frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx | 3 ++- .../src/AppBuilder/AppCanvas/WidgetWrapper.jsx | 8 +++++--- frontend/src/AppBuilder/AppCanvas/selecto.scss | 2 +- .../src/AppBuilder/_stores/slices/gridSlice.js | 16 ++++++++++++++++ 5 files changed, 25 insertions(+), 7 deletions(-) diff --git a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx index 4c558f3cc2..d877a3233f 100644 --- a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx +++ b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx @@ -45,7 +45,6 @@ export const ConfigHandle = ({ ); }, shallow); let height = visibility === false ? 10 : widgetHeight; - return (
{ diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx index 1b4d1265dc..bbc10562a7 100644 --- a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx +++ b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx @@ -65,6 +65,7 @@ export default function Grid({ gridWidth, currentLayout }) { const prevDragParentId = useRef(null); const newDragParentId = useRef(null); const [isGroupDragging, setIsGroupDragging] = useState(false); + const checkIfAnyWidgetVisibilityChanged = useStore((state) => state.checkIfAnyWidgetVisibilityChanged(), shallow); useEffect(() => { const selectedSet = new Set(selectedComponents); @@ -316,7 +317,7 @@ export default function Grid({ gridWidth, currentLayout }) { useEffect(() => { reloadGrid(); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [selectedComponents, openModalWidgetId, boxList, currentLayout]); + }, [selectedComponents, openModalWidgetId, boxList, currentLayout, checkIfAnyWidgetVisibilityChanged]); const updateNewPosition = (events, parent = null) => { const posWithParent = { diff --git a/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx b/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx index 0f1cb3359f..17add18947 100644 --- a/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx +++ b/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx @@ -37,6 +37,8 @@ const WidgetWrapper = memo( }); const visibility = useStore((state) => { const component = state.getResolvedComponent(id, subContainerIndex); + const componentExposedVisibility = state.getExposedValueOfComponent(id)?.isVisible; + if (componentExposedVisibility === false) return false; if (component?.properties?.visibility === false || component?.styles?.visibility === false) return false; return true; }); @@ -60,9 +62,9 @@ const WidgetWrapper = memo( <>
({ setLastCanvasClickPosition: (position) => { set({ lastCanvasClickPosition: position }); }, + checkIfAnyWidgetVisibilityChanged: () => { + // This is required to reload the grid if visibility is turned off using CSA + const { getExposedValueOfComponent, getCurrentPageComponents } = get(); + const currentPageComponents = getCurrentPageComponents(); + + const visibilityState = {}; + + Object.keys(currentPageComponents).forEach((componentId) => { + const componentExposedVisibility = getExposedValueOfComponent(componentId)?.isVisible; + + // Determine if component is visible + visibilityState[componentId] = !(componentExposedVisibility === false); + }); + + return visibilityState; + }, }); From 227970a1d0122c87456335afacbe69ff454a0750 Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Wed, 19 Mar 2025 15:30:47 +0530 Subject: [PATCH 5/8] show visibility border only for viewer --- frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx b/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx index 17add18947..3fe5bd9806 100644 --- a/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx +++ b/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx @@ -54,7 +54,7 @@ const WidgetWrapper = memo( height: visibility === false ? '10px' : `${height}px`, transform: `translate(${layoutData.left * gridWidth}px, ${layoutData.top}px)`, WebkitFontSmoothing: 'antialiased', - border: visibility === false ? `1px solid var(--border-default)` : 'none', + border: visibility === false && mode === 'edit' ? `1px solid var(--border-default)` : 'none', }; if (!componentType) return null; From 4b3f0ed65dd16e0e85c5dc4429b07e23ef9fabd1 Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Fri, 21 Mar 2025 00:25:06 +0530 Subject: [PATCH 6/8] Fix hidden component not being draggable if visibility changed using CSA --- frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx | 5 ++++- frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx | 1 + frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx | 6 +++--- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx index bbc10562a7..93144b500a 100644 --- a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx +++ b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx @@ -66,6 +66,7 @@ export default function Grid({ gridWidth, currentLayout }) { const newDragParentId = useRef(null); const [isGroupDragging, setIsGroupDragging] = useState(false); const checkIfAnyWidgetVisibilityChanged = useStore((state) => state.checkIfAnyWidgetVisibilityChanged(), shallow); + const getExposedValueOfComponent = useStore((state) => state.getExposedValueOfComponent, shallow); useEffect(() => { const selectedSet = new Set(selectedComponents); @@ -329,6 +330,8 @@ export default function Grid({ gridWidth, currentLayout }) { const isComponentVisible = (id) => { const component = getResolvedComponent(id); + const componentExposedVisibility = getExposedValueOfComponent(id)?.isVisible; + if (componentExposedVisibility === false) return false; let visibility; if (isArray(component)) { visibility = component?.[0]?.properties?.visibility ?? component?.[0]?.styles?.visibility ?? null; @@ -630,13 +633,13 @@ export default function Grid({ gridWidth, currentLayout }) { // When clicked on widget boundary/resizer, select the component setSelectedComponents([e.target.id]); } - showGridLines(); if (!isComponentVisible(e.target.id)) { return false; } handleActivateNonDraggingComponents(); useGridStore.getState().actions.setResizingComponentId(e.target.id); e.setMin([gridWidth, GRID_HEIGHT]); + showGridLines(); }} onResizeEnd={(e) => { try { diff --git a/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx b/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx index b26586dc08..ad866e0b77 100644 --- a/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx +++ b/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx @@ -7,6 +7,7 @@ import { renderTooltip } from '@/_helpers/appUtils'; import { useTranslation } from 'react-i18next'; import ErrorBoundary from '@/_ui/ErrorBoundary'; import { BOX_PADDING } from './appCanvasConstants'; + const shouldAddBoxShadowAndVisibility = [ 'Table', 'TextInput', diff --git a/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx b/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx index 3fe5bd9806..5f6fc748ad 100644 --- a/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx +++ b/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx @@ -62,9 +62,9 @@ const WidgetWrapper = memo( <>
Date: Fri, 21 Mar 2025 01:44:42 +0530 Subject: [PATCH 7/8] fix --- .../RightSideBar/ComponentsManagerTab/DragLayer.jsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/DragLayer.jsx b/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/DragLayer.jsx index 158d87787d..9589ac145b 100644 --- a/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/DragLayer.jsx +++ b/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/DragLayer.jsx @@ -44,11 +44,16 @@ const CustomDragLayer = ({ size }) => { const mainCanvasWidth = document.getElementById('real-canvas')?.offsetWidth || 0; - const width = (mainCanvasWidth * size.width) / NO_OF_GRIDS; + let 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); + // Adjust position and width if exceeding grid bounds + if (width >= canvasWidth) { + width = canvasWidth; + } + const [x, y] = snapToGrid(canvasWidth, left, top); return (
Date: Fri, 21 Mar 2025 01:59:57 +0530 Subject: [PATCH 8/8] fix duplicate not working --- frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js index 3c072e9d43..978f9fc74f 100644 --- a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js +++ b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js @@ -41,7 +41,7 @@ export const addNewWidgetToTheEditor = (componentType, eventMonitorObject, curre // Adjust widget width based on the dropping canvas width const mainCanvasWidth = useGridStore.getState().subContainerWidths['canvas']; let width = Math.round((defaultWidth * mainCanvasWidth) / gridWidth); - console.log(width, gridWidth, 'width'); + // Ensure minimum width width = Math.max(width, 1); @@ -518,6 +518,7 @@ export function pasteComponents(targetParentId, copiedComponentObj) { } pastedComponents.forEach((component) => { + component = deepClone(component); const newComponentId = isCut ? component.id : uuidv4(); const componentName = computeComponentName(component.component.component, { ...components, @@ -575,7 +576,11 @@ export function pasteComponents(targetParentId, copiedComponentObj) { } } - component.layouts[currentLayout].width = width; + component.layouts[currentLayout] = { + ...component.layouts[currentLayout], + width, + }; + const newComponent = { component: { ...componentData,