From c2c0018eb73e31e1bf7216c171f1cc2febebdac3 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Tue, 4 Feb 2025 16:12:47 +0530
Subject: [PATCH 01/11] Fix page handle being wrong when fetching from exposed
 values in Viewer on initial reload

---
 frontend/src/AppBuilder/_hooks/useAppData.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/AppBuilder/_hooks/useAppData.js b/frontend/src/AppBuilder/_hooks/useAppData.js
index a8fac45c48..1b664cfa21 100644
--- a/frontend/src/AppBuilder/_hooks/useAppData.js
+++ b/frontend/src/AppBuilder/_hooks/useAppData.js
@@ -329,6 +329,11 @@ const useAppData = (appId, moduleId, darkMode, mode = 'edit', { environmentId, v
       setCurrentPageHandle(startingPage.handle);
       updateFeatureAccess();
       setCurrentPageId(startingPage.id, moduleId);
+      setResolvedPageConstants({
+        id: startingPage?.id,
+        handle: startingPage?.handle,
+        name: startingPage?.name,
+      });
       setComponentNameIdMapping(moduleId);
       updateEventsField('events', appData.events);
       setCurrentVersionId(appData.editing_version?.id || appData.current_version_id);

From 20f03d6e1142a2fa3c7c021ad457ee7cece13c25 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Wed, 5 Feb 2025 19:21:15 +0530
Subject: [PATCH 02/11] Fix alignment issues arising due to label width setting
 for input components

---
 .../WidgetManager/widgets/listview.js         |  8 ++-
 .../Editor/WidgetManager/configs/listview.js  |  8 ++-
 frontend/src/_styles/table-component.scss     | 55 ++++++++++++++++++-
 .../apps/services/widget-config/listview.js   |  2 +-
 4 files changed, 67 insertions(+), 6 deletions(-)

diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/listview.js b/frontend/src/AppBuilder/WidgetManager/widgets/listview.js
index a813bb5a0b..fec2e812b4 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/listview.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/listview.js
@@ -48,8 +48,12 @@ export const listviewConfig = {
     data: {
       type: 'code',
       displayName: 'List data',
-      validation: {
-        schema: { type: 'array', element: { type: 'object' } },
+      schema: {
+        type: 'union',
+        schemas: [
+          { type: 'array', element: { type: 'object' } },
+          { type: 'array', element: { type: 'string' } },
+        ],
         defaultValue: "[{text: 'Sample text 1'}]",
       },
     },
diff --git a/frontend/src/Editor/WidgetManager/configs/listview.js b/frontend/src/Editor/WidgetManager/configs/listview.js
index a813bb5a0b..25da8f73c6 100644
--- a/frontend/src/Editor/WidgetManager/configs/listview.js
+++ b/frontend/src/Editor/WidgetManager/configs/listview.js
@@ -49,7 +49,13 @@ export const listviewConfig = {
       type: 'code',
       displayName: 'List data',
       validation: {
-        schema: { type: 'array', element: { type: 'object' } },
+        schema: {
+          type: 'union',
+          schemas: [
+            { type: 'array', element: { type: 'object' } },
+            { type: 'array', element: { type: 'string' } },
+          ],
+        },
         defaultValue: "[{text: 'Sample text 1'}]",
       },
     },
diff --git a/frontend/src/_styles/table-component.scss b/frontend/src/_styles/table-component.scss
index 5e0edd5aff..100cb450cc 100644
--- a/frontend/src/_styles/table-component.scss
+++ b/frontend/src/_styles/table-component.scss
@@ -1467,5 +1467,56 @@
 }
 
 .tj-table-tag-col-readonly {
-  margin-left: -2px !important; //this -ve margin offset for the margin given to each tags in overall column width
-}
\ No newline at end of file
+  margin-left: -2px !important;  //this -ve margin offset for the margin given to each tags in overall column width
+}
+
+.jet-data-table {
+  .table-bordered {
+    th,
+    td {
+      border-bottom: 1px solid var(--interactive-overlay-border-pressed) !important;
+      border-right: 1px solid var(--interactive-overlay-border-pressed) !important;
+
+      &:first-child {
+        border-left: none !important;
+      }
+
+      &:last-child {
+        border-right: none !important;
+      }
+    }
+
+    thead th {
+      border-top: none !important;
+      
+      &:first-child {
+        border-left: none !important;
+      }
+      
+      &:last-child {
+        border-right: none !important;
+      }
+    }
+  }
+
+  .table-striped {
+    tbody {
+      div[data-index]:nth-child(odd) {
+        background-color: transparent !important;
+      }
+
+      div[data-index]:nth-child(even) {
+        background-color: var(--slate2) !important;
+      }
+    }
+  }
+}
+
+// hide scrollbar on touch devices
+  @media (hover: none) and (pointer: coarse) {
+    .jet-data-table::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+      background: transparent;
+    }
+  }
diff --git a/server/src/modules/apps/services/widget-config/listview.js b/server/src/modules/apps/services/widget-config/listview.js
index a813bb5a0b..d710babbf0 100644
--- a/server/src/modules/apps/services/widget-config/listview.js
+++ b/server/src/modules/apps/services/widget-config/listview.js
@@ -49,7 +49,7 @@ export const listviewConfig = {
       type: 'code',
       displayName: 'List data',
       validation: {
-        schema: { type: 'array', element: { type: 'object' } },
+        schema: { type: 'union', schemas: [{ type: 'array', element: { type: 'object' } },{ type: 'array', element: { type: 'string' } }] },
         defaultValue: "[{text: 'Sample text 1'}]",
       },
     },

From cbfe197a28b1f4d545325ad8d91b1fcd5fe962d7 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Thu, 6 Feb 2025 11:03:51 +0530
Subject: [PATCH 03/11] fi

---
 frontend/src/AppBuilder/Widgets/Container.jsx | 5 +----
 frontend/src/_styles/components.scss          | 9 +++++++++
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/AppBuilder/Widgets/Container.jsx b/frontend/src/AppBuilder/Widgets/Container.jsx
index 3ccedd869b..16623280a5 100644
--- a/frontend/src/AppBuilder/Widgets/Container.jsx
+++ b/frontend/src/AppBuilder/Widgets/Container.jsx
@@ -45,7 +45,6 @@ export const Container = ({
     border: `1px solid ${borderColor}`,
     height,
     display: isVisible ? 'flex' : 'none',
-    overflow: 'hidden auto',
     position: 'relative',
     boxShadow,
   };
@@ -66,9 +65,7 @@ export const Container = ({
 
   return (
     <div
-      className={`jet-container tw-flex tw-flex-col ${isLoading && 'jet-container-loading'} ${
-        properties.showHeader && 'jet-container--with-header'
-      }`}
+      className={`jet-container widget-type-container ${properties.loadingState && 'jet-container-loading'}`}
       id={id}
       data-disabled={isDisabled}
       style={computedStyles}
diff --git a/frontend/src/_styles/components.scss b/frontend/src/_styles/components.scss
index 5f742b2153..e84756dca7 100644
--- a/frontend/src/_styles/components.scss
+++ b/frontend/src/_styles/components.scss
@@ -493,4 +493,13 @@ $btn-dark-color: #FFFFFF;
       }
     }
   }
+}
+
+//[Container-widget]Show scrollbar only on hover
+.widget-type-container {
+  overflow: hidden auto;
+  scrollbar-width: none;
+  &:hover {
+    scrollbar-width: auto;
+  }
 }
\ No newline at end of file

From 861e8904a868a946a56ab73d10ded6925c3237d1 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Thu, 6 Feb 2025 13:52:04 +0530
Subject: [PATCH 04/11] fix

---
 .../_stores/slices/componentsSlice.js           |  5 ++++-
 frontend/src/_styles/table-component.scss       | 17 ++++++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/frontend/src/AppBuilder/_stores/slices/componentsSlice.js b/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
index 1f6ce18405..702bb8dfcc 100644
--- a/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
@@ -1742,7 +1742,10 @@ export const createComponentsSlice = (set, get) => ({
   getCustomResolvableReference: (value, parentId, moduleId) => {
     const { getParentComponentType } = get();
     const parentComponentType = getParentComponentType(parentId, moduleId);
-    if (parentComponentType === 'Listview' && value.includes('listItem') && checkSubstringRegex(value, 'listItem')) {
+    if (
+      (parentComponentType === 'Listview' && value.includes('listItem') && checkSubstringRegex(value, 'listItem')) ||
+      value === '{{listItem}}'
+    ) {
       return { entityType: 'components', entityNameOrId: parentId, entityKey: 'listItem' };
     } else if (
       parentComponentType === 'Kanban' &&
diff --git a/frontend/src/_styles/table-component.scss b/frontend/src/_styles/table-component.scss
index 100cb450cc..82f6b3de71 100644
--- a/frontend/src/_styles/table-component.scss
+++ b/frontend/src/_styles/table-component.scss
@@ -1512,11 +1512,14 @@
   }
 }
 
-// hide scrollbar on touch devices
-  @media (hover: none) and (pointer: coarse) {
-    .jet-data-table::-webkit-scrollbar {
-      width: 0;
-      height: 0;
-      background: transparent;
-    }
+@media (hover: none) and (pointer: coarse) {
+  .jet-data-table {
+    overflow: auto;
   }
+  // hide scrollbar on touch devices
+  .jet-data-table::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    background: transparent;
+  }
+}

From 92fa80b249c3f5799015d27df8ef3848cd1e45ad Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Wed, 5 Mar 2025 11:31:44 +0530
Subject: [PATCH 05/11] Fix alignment issues arising due to label width setting
 for input components

---
 frontend/src/_ui/Label.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/_ui/Label.jsx b/frontend/src/_ui/Label.jsx
index 3cd7f886cb..721ac05203 100644
--- a/frontend/src/_ui/Label.jsx
+++ b/frontend/src/_ui/Label.jsx
@@ -13,6 +13,7 @@ function Label({ label, width, labelRef, color, defaultAlignment, direction, aut
             justifyContent: direction == 'right' ? 'flex-end' : 'flex-start',
             fontSize: '12px',
             height: defaultAlignment === 'top' && '20px',
+            overflow: 'hidden',
           }}
         >
           <p

From 89a8fafea04aa3a52cd926bc3e6957c0cc570202 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Thu, 30 Jan 2025 16:12:56 +0530
Subject: [PATCH 06/11] Fix intermittently default option when selected not
 being saved correctly

---
 .../RightSideBar/Inspector/Components/Select.jsx |  4 +---
 .../WidgetManager/widgets/dropdownV2.js          |  1 -
 .../Editor/Components/DropdownV2/DropdownV2.jsx  | 16 +++-------------
 .../Editor/WidgetManager/configs/dropdownV2.js   |  1 -
 .../apps/services/widget-config/dropdownV2.js    |  1 -
 5 files changed, 4 insertions(+), 19 deletions(-)

diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx
index a57c879121..db52205467 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx
@@ -37,7 +37,6 @@ export function Select({ componentMeta, darkMode, ...restProps }) {
     if (!Array.isArray(optionsValue)) {
       optionsValue = Object.values(optionsValue);
     }
-    const valuesToResolve = ['label', 'value'];
     let options = [];
 
     if (isDynamicOptionsEnabled || typeof optionsValue === 'string') {
@@ -202,9 +201,8 @@ export function Select({ componentMeta, darkMode, ...restProps }) {
         }
       });
       setOptions(_options);
-      updateAllOptionsParams(_options);
       setMarkedAsDefault(_value);
-      paramUpdated({ name: 'value' }, 'value', _value, 'properties');
+      updateAllOptionsParams(_options);
     }
   };
 
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js
index 247af3ccef..de90dbd0bf 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js
@@ -299,7 +299,6 @@ export const dropdownV2Config = {
         ],
       },
       label: { value: 'Select' },
-      value: { value: '{{"2"}}' },
       optionsLoadingState: { value: '{{false}}' },
       placeholder: { value: 'Select an option' },
       visibility: { value: '{{true}}' },
diff --git a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
index ae976e54ea..72e2b39664 100644
--- a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
+++ b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
@@ -61,7 +61,6 @@ export const DropdownV2 = ({
 }) => {
   const {
     label,
-    value,
     advanced,
     schema,
     placeholder,
@@ -89,7 +88,7 @@ export const DropdownV2 = ({
     padding,
   } = styles;
   const isInitialRender = useRef(true);
-  const [currentValue, setCurrentValue] = useState(() => (advanced ? findDefaultItem(schema) : value));
+  const [currentValue, setCurrentValue] = useState(() => findDefaultItem(schema));
   const isMandatory = validation?.mandatory ?? false;
   const options = properties?.options;
   const [validationStatus, setValidationStatus] = useState(validate(currentValue));
@@ -168,18 +167,9 @@ export const DropdownV2 = ({
   };
 
   useEffect(() => {
-    if (advanced) {
-      setInputValue(findDefaultItem(schema));
-    }
+    setInputValue(findDefaultItem(advanced ? schema : options));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [advanced, JSON.stringify(schema)]);
-
-  useEffect(() => {
-    if (!advanced) {
-      setInputValue(value);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [advanced, value]);
+  }, [advanced, JSON.stringify(schema), JSON.stringify(options)]);
 
   useEffect(() => {
     if (visibility !== properties.visibility) setVisibility(properties.visibility);
diff --git a/frontend/src/Editor/WidgetManager/configs/dropdownV2.js b/frontend/src/Editor/WidgetManager/configs/dropdownV2.js
index 247af3ccef..de90dbd0bf 100644
--- a/frontend/src/Editor/WidgetManager/configs/dropdownV2.js
+++ b/frontend/src/Editor/WidgetManager/configs/dropdownV2.js
@@ -299,7 +299,6 @@ export const dropdownV2Config = {
         ],
       },
       label: { value: 'Select' },
-      value: { value: '{{"2"}}' },
       optionsLoadingState: { value: '{{false}}' },
       placeholder: { value: 'Select an option' },
       visibility: { value: '{{true}}' },
diff --git a/server/src/modules/apps/services/widget-config/dropdownV2.js b/server/src/modules/apps/services/widget-config/dropdownV2.js
index 247af3ccef..de90dbd0bf 100644
--- a/server/src/modules/apps/services/widget-config/dropdownV2.js
+++ b/server/src/modules/apps/services/widget-config/dropdownV2.js
@@ -299,7 +299,6 @@ export const dropdownV2Config = {
         ],
       },
       label: { value: 'Select' },
-      value: { value: '{{"2"}}' },
       optionsLoadingState: { value: '{{false}}' },
       placeholder: { value: 'Select an option' },
       visibility: { value: '{{true}}' },

From 37f1bb05f7207c559c428b65ac10946217f3c470 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Fri, 28 Feb 2025 17:26:50 +0530
Subject: [PATCH 07/11] Add support for Only show one handle at a time.

---
 .../AppCanvas/ConfigHandle/ConfigHandle.jsx   | 23 +++++++++++++++----
 .../AppCanvas/ConfigHandle/configHandle.scss  | 10 --------
 .../AppBuilder/AppCanvas/WidgetWrapper.jsx    |  1 +
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
index a40663b0f5..cdf5c282a3 100644
--- a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
@@ -13,6 +13,7 @@ export const ConfigHandle = ({
   customClassName = '',
   showHandle,
   componentType,
+  visibility,
 }) => {
   const shouldFreeze = useStore((state) => state.getShouldFreeze());
   const componentName = useStore((state) => state.getComponentDefinition(id)?.component?.name || '', shallow);
@@ -28,16 +29,28 @@ export const ConfigHandle = ({
   );
 
   const setComponentToInspect = useStore((state) => state.setComponentToInspect);
+
+  const _showHandle = useStore((state) => {
+    const isWidgetHovered = state.getHoveredComponentForGrid() === id;
+    const anyComponentHovered = state.getHoveredComponentForGrid() !== '';
+    // If one component is hovered and one is selected, show the handle for the hovered component
+    return (
+      isWidgetHovered ||
+      (showHandle &&
+        (!isMultipleComponentsSelected || (componentType === 'Modal' && isModalOpen)) &&
+        !anyComponentHovered)
+    );
+  }, shallow);
+
+  let height = visibility === false ? 10 : widgetHeight;
+
   return (
     <div
       className={`config-handle ${customClassName}`}
       widget-id={id}
       style={{
-        top: position === 'top' ? '-20px' : widgetTop + widgetHeight - (widgetTop < 10 ? 15 : 10),
-        visibility:
-          showHandle && (!isMultipleComponentsSelected || (componentType === 'Modal' && isModalOpen))
-            ? 'visible'
-            : 'hidden',
+        top: position === 'top' ? '-20px' : widgetTop + height - (widgetTop < 10 ? 15 : 10),
+        visibility: _showHandle ? 'visible' : 'hidden',
         left: '-1px',
       }}
       onClick={(e) => {
diff --git a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/configHandle.scss b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/configHandle.scss
index 7f20210c10..929d68d1f7 100644
--- a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/configHandle.scss
+++ b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/configHandle.scss
@@ -8,10 +8,6 @@
     transition: all .15s ease-in-out;
 }
 
-.config-handle-visible {
-  visibility: visible !important;
-}
-
 .multiple-components-config-handle {
   position: absolute;
   left: 54px;
@@ -65,9 +61,3 @@
     }
   }
 }
-
-.main-editor-canvas .widget-target:hover > .config-handle {
-  visibility: visible !important;
-}
-
-
diff --git a/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx b/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx
index 34c172292d..f583ebb53a 100644
--- a/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx
@@ -89,6 +89,7 @@ const WidgetWrapper = memo(
               widgetHeight={layoutData.height}
               showHandle={isWidgetActive}
               componentType={componentType}
+              visibility={visibility}
             />
           )}
           <RenderWidget

From c2acc24637276b072d3b1e2bb4f228c315006069 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Fri, 6 Dec 2024 17:14:40 +0530
Subject: [PATCH 08/11] [feat] : Add support for Component Handle being visible
 when hovered on the boundary of an unselected component

---
 .../AppCanvas/ConfigHandle/ConfigHandle.jsx           |  5 ++---
 .../AppCanvas/ConfigHandle/configHandle.scss          |  4 ++++
 frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx       | 11 +++++------
 frontend/src/AppBuilder/_stores/slices/gridSlice.js   |  3 +++
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
index cdf5c282a3..436c04a430 100644
--- a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
@@ -31,8 +31,8 @@ export const ConfigHandle = ({
   const setComponentToInspect = useStore((state) => state.setComponentToInspect);
 
   const _showHandle = useStore((state) => {
-    const isWidgetHovered = state.getHoveredComponentForGrid() === id;
-    const anyComponentHovered = state.getHoveredComponentForGrid() !== '';
+    const isWidgetHovered = state.getHoveredComponentForGrid() === id || state.hoveredComponentBoundaryId === id;
+    const anyComponentHovered = state.getHoveredComponentForGrid() !== '' || state.hoveredComponentBoundaryId !== '';
     // If one component is hovered and one is selected, show the handle for the hovered component
     return (
       isWidgetHovered ||
@@ -41,7 +41,6 @@ export const ConfigHandle = ({
         !anyComponentHovered)
     );
   }, shallow);
-
   let height = visibility === false ? 10 : widgetHeight;
 
   return (
diff --git a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/configHandle.scss b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/configHandle.scss
index 929d68d1f7..e7322959e5 100644
--- a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/configHandle.scss
+++ b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/configHandle.scss
@@ -8,6 +8,10 @@
     transition: all .15s ease-in-out;
 }
 
+.config-handle-visible {
+  visibility: visible !important;
+}
+
 .multiple-components-config-handle {
   position: absolute;
   left: 54px;
diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
index 6d746477c4..4fab955ef2 100644
--- a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
@@ -354,17 +354,16 @@ export default function Grid({ gridWidth, currentLayout }) {
   );
 
   // Add event listeners for config handle visibility when hovering over widget boundary
+  // This is needed even though we have hovered widget state because when hovered on boundary,
+  // the hovered widget state is empty, hence created a separate state for boundary
   React.useEffect(() => {
     const moveableBox = document.querySelector(`.moveable-control-box`);
     const showConfigHandle = (e) => {
       const targetId = e.target.offsetParent.getAttribute('target-id');
-      const configHandle = document.querySelector(`.config-handle[widget-id="${targetId}"]`);
-      configHandle.classList.add('config-handle-visible');
+      useStore.getState().setHoveredComponentBoundaryId(targetId);
     };
-    const hideConfigHandle = (e) => {
-      const targetId = e.target.offsetParent.getAttribute('target-id');
-      const configHandle = document.querySelector(`.config-handle[widget-id="${targetId}"]`);
-      configHandle.classList.remove('config-handle-visible');
+    const hideConfigHandle = () => {
+      useStore.getState().setHoveredComponentBoundaryId('');
     };
     if (moveableBox) {
       moveableBox.addEventListener('mouseover', showConfigHandle);
diff --git a/frontend/src/AppBuilder/_stores/slices/gridSlice.js b/frontend/src/AppBuilder/_stores/slices/gridSlice.js
index cc80a9dbf7..1958b8bece 100644
--- a/frontend/src/AppBuilder/_stores/slices/gridSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/gridSlice.js
@@ -3,6 +3,7 @@ import { debounce } from 'lodash';
 
 const initialState = {
   hoveredComponentForGrid: '',
+  hoveredComponentBoundaryId: '',
   triggerCanvasUpdater: false,
   lastCanvasIdClick: '',
   lastCanvasClickPosition: null,
@@ -13,6 +14,8 @@ export const createGridSlice = (set, get) => ({
   setHoveredComponentForGrid: (id) =>
     set(() => ({ hoveredComponentForGrid: id }), false, { type: 'setHoveredComponentForGrid', id }),
   getHoveredComponentForGrid: () => get().hoveredComponentForGrid,
+  setHoveredComponentBoundaryId: (id) =>
+    set(() => ({ hoveredComponentBoundaryId: id }), false, { type: 'setHoveredComponentBoundaryId', id }),
   toggleCanvasUpdater: () =>
     set((state) => ({ triggerCanvasUpdater: !state.triggerCanvasUpdater }), false, { type: 'toggleCanvasUpdater' }),
   debouncedToggleCanvasUpdater: debounce(() => {

From 7e1d9d37d629569d207e218682cfee6d2a31b8a4 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Thu, 20 Feb 2025 19:18:08 +0530
Subject: [PATCH 09/11] Add support for copying and pasting in header and
 footer

---
 frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
index 04ae6aa896..2c4259c22f 100644
--- a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
+++ b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
@@ -249,7 +249,6 @@ export const copyComponents = ({ isCut = false, isCloning = false }) => {
     const parentComponentId = isChildOfTabsOrCalendar(selectedComponent, allComponents)
       ? selectedComponent.component.parent.split('-').slice(0, -1).join('-')
       : selectedComponent?.component?.parent;
-
     if (parentComponentId) {
       // Check if the parent component is also selected
       const isParentSelected = selectedComponents.some((comp) => comp.id === parentComponentId);
@@ -483,11 +482,14 @@ export function pasteComponents(targetParentId, copiedComponentObj) {
   // Prevent pasting if the parent subcontainer was deleted during a cut operation
   if (
     targetParentId &&
+    // Check if targetParentId is deleted from the components
     !Object.keys(components).find(
       (key) =>
         targetParentId === key ||
         (components?.[key]?.component.component === 'Tabs' &&
-          targetParentId?.split('-')?.slice(0, -1)?.join('-') === key)
+          targetParentId?.split('-')?.slice(0, -1)?.join('-') === key) ||
+        (['Container', 'Form', 'Modal'].includes(components?.[key]?.component.component) &&
+          ['header', 'footer'].some((section) => targetParentId.includes(section)))
     )
   ) {
     return;

From deb86c25eaf96160fa0f7202c94cb5c7abcbec16 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Thu, 6 Mar 2025 18:22:57 +0530
Subject: [PATCH 10/11] Add snap to grid

---
 .../src/AppBuilder/AppCanvas/Container.jsx    |  14 +-
 .../src/AppBuilder/AppCanvas/Grid/Grid.css    |  25 +-
 .../src/AppBuilder/AppCanvas/Grid/Grid.jsx    | 269 ++++++++++++------
 .../AppBuilder/AppCanvas/Grid/gridUtils.js    |  22 ++
 .../ComponentsManagerTab/DragLayer.jsx        |  28 +-
 5 files changed, 249 insertions(+), 109 deletions(-)

diff --git a/frontend/src/AppBuilder/AppCanvas/Container.jsx b/frontend/src/AppBuilder/AppCanvas/Container.jsx
index fed1a3db34..fc163939f6 100644
--- a/frontend/src/AppBuilder/AppCanvas/Container.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Container.jsx
@@ -56,6 +56,11 @@ export const Container = React.memo(
 
     const [{ isOverCurrent }, drop] = useDrop({
       accept: 'box',
+      hover: (item) => {
+        item.canvasRef = realCanvasRef?.current;
+        item.canvasId = id;
+        item.canvasWidth = getContainerCanvasWidth();
+      },
       drop: async ({ componentType }, monitor) => {
         const didDrop = monitor.didDrop();
         if (didDrop) return;
@@ -89,14 +94,15 @@ export const Container = React.memo(
     function getContainerCanvasWidth() {
       if (canvasWidth !== undefined) {
         if (componentType === 'Listview' && listViewMode == 'grid') return canvasWidth / columns - 2;
-        return canvasWidth;
+        if (id === 'canvas') return canvasWidth;
+        return canvasWidth - 2;
       }
       return realCanvasRef?.current?.offsetWidth;
     }
     const gridWidth = getContainerCanvasWidth() / NO_OF_GRIDS;
 
     useEffect(() => {
-      useGridStore.getState().actions.setSubContainerWidths(id, (getContainerCanvasWidth() - 2) / NO_OF_GRIDS);
+      useGridStore.getState().actions.setSubContainerWidths(id, getContainerCanvasWidth() / NO_OF_GRIDS);
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [canvasWidth, listViewMode, columns]);
 
@@ -137,8 +143,7 @@ export const Container = React.memo(
         }}
         style={{
           height: id === 'canvas' ? `${canvasHeight}` : '100%',
-          // backgroundSize: '25.3953px 10px',
-          backgroundSize: `${gridWidth}px 10px`,
+          backgroundSize: `${gridWidth}px ${10}px`,
           backgroundColor:
             currentMode === 'view'
               ? computeViewerBackgroundColor(darkMode, canvasBgColor)
@@ -169,6 +174,7 @@ export const Container = React.memo(
         data-parentId={id}
         canvas-height={canvasHeight}
         onClick={handleCanvasClick}
+        component-type={componentType}
       >
         <div
           className={cx('container-fluid rm-container p-0', {
diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.css b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.css
index ee7b1607e6..5abcc430d4 100644
--- a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.css
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.css
@@ -186,5 +186,28 @@
     display: none;
 }
 
+.moveable-guideline {
+    background: #97AEFC !important;
+    opacity: 0.8;
+    z-index: 9999;
+}
 
-/*  */
\ No newline at end of file
+.moveable-guideline.moveable-horizontal {
+    height: 1px !important;
+    width: 100% !important;
+    background: #97AEFC !important;
+    left: 0 !important;
+
+}
+
+.moveable-guideline.moveable-vertical {
+    width: 1px !important;
+    height: 100% !important;
+    background: #97AEFC !important;
+    top: 0 !important;
+
+}
+
+.moveable-guideline-group {
+    z-index: 9999;
+}
\ No newline at end of file
diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
index 4fab955ef2..fd7316fe0f 100644
--- a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
@@ -17,6 +17,8 @@ import {
   hasParentWithClass,
   getPositionForGroupDrag,
   adjustWidth,
+  hideGridLines,
+  showGridLines,
 } from './gridUtils';
 import { useAppVersionStore } from '@/_stores/appVersionStore';
 import { resolveWidgetFieldValue } from '@/_helpers/utils';
@@ -29,6 +31,7 @@ const RESIZABLE_CONFIG = {
   edge: ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'],
   renderDirections: ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'],
 };
+export const GRID_HEIGHT = 10;
 
 export default function Grid({ gridWidth, currentLayout }) {
   const lastDraggedEventsRef = useRef(null);
@@ -51,6 +54,48 @@ export default function Grid({ gridWidth, currentLayout }) {
   const canvasWidth = NO_OF_GRIDS * gridWidth;
   const getHoveredComponentForGrid = useStore((state) => state.getHoveredComponentForGrid, shallow);
   const getResolvedComponent = useStore((state) => state.getResolvedComponent, shallow);
+  const draggingComponentId = useGridStore((state) => state.draggingComponentId, shallow);
+  const resizingComponentId = useGridStore((state) => state.resizingComponentId, shallow);
+  const [dragParentId, setDragParentId] = useState(null);
+  const [elementGuidelines, setElementGuidelines] = useState([]);
+  const componentsSnappedTo = useRef(null);
+  const prevDragParentId = useRef(null);
+  const newDragParentId = useRef(null);
+  const [isGroupDragging, setIsGroupDragging] = useState(false);
+
+  useEffect(() => {
+    const selectedSet = new Set(selectedComponents);
+    const draggingOrResizingId = draggingComponentId || resizingComponentId;
+    const isGrouped = findHighestLevelofSelection().length > 1;
+    const firstSelectedParent =
+      selectedComponents.length > 0 ? boxList.find((b) => b.id === selectedComponents[0])?.parent : null;
+    const selectedParent = dragParentId || firstSelectedParent;
+
+    const guidelines = boxList
+      .filter((box) => {
+        const isVisible =
+          getResolvedValue(box?.component?.definition?.properties?.visibility?.value) ||
+          getResolvedValue(box?.component?.definition?.styles?.visibility?.value);
+
+        // Early return for non-visible elements
+        if (!isVisible) return false;
+
+        if (isGrouped) {
+          // If component is selected, don't show its guidelines
+          if (selectedSet.has(box.id)) return false;
+          return selectedParent ? box.parent === selectedParent : !box.parent;
+        }
+
+        if (draggingOrResizingId) {
+          if (box.id === draggingOrResizingId) return false;
+          return dragParentId ? box.parent === dragParentId : !box.parent;
+        }
+
+        return true;
+      })
+      .map((box) => `.ele-${box.id}`);
+    setElementGuidelines(guidelines);
+  }, [boxList, dragParentId, draggingComponentId, resizingComponentId, selectedComponents, getResolvedValue]);
 
   useEffect(() => {
     setBoxList(
@@ -94,7 +139,7 @@ export default function Grid({ gridWidth, currentLayout }) {
       boxList.forEach(({ id, height, width, x, y, gw }) => {
         const _canvasWidth = gw ? gw * NO_OF_GRIDS : canvasWidth;
         let newWidth = Math.round((width * NO_OF_GRIDS) / _canvasWidth);
-        y = Math.round(y / 10) * 10;
+        y = Math.round(y / GRID_HEIGHT) * GRID_HEIGHT;
         gw = gw ? gw : gridWidth;
 
         const parent = transformedBoxes[id]?.component?.parent;
@@ -117,7 +162,7 @@ export default function Grid({ gridWidth, currentLayout }) {
         }
         setComponentLayout({
           [id]: {
-            height: height ? height : 10,
+            height: height ? height : GRID_HEIGHT,
             width: newWidth ? newWidth : 1,
             top: y,
             left: Math.round(x / gw),
@@ -319,7 +364,7 @@ export default function Grid({ gridWidth, currentLayout }) {
         }
 
         // Round y position
-        y = Math.max(0, Math.round(y / 10) * 10);
+        y = Math.max(0, Math.round(y / GRID_HEIGHT) * GRID_HEIGHT);
         // Adjust height for certain parent components
         if (parent) {
           const parentElem = document.getElementById(`canvas-${parent}`);
@@ -375,49 +420,10 @@ export default function Grid({ gridWidth, currentLayout }) {
     };
   }, []);
 
-  const handleDragGridLinesVisibility = (e, events = []) => {
-    const { clientX, clientY } = e;
-    if (!document.elementFromPoint(clientX, clientY)) return;
-
-    const targetElems = document.elementsFromPoint(clientX, clientY);
-    const draggedOverElements = targetElems.filter(
-      (ele) =>
-        !events.some((event) => event.target.id === ele.id) &&
-        (ele.classList.contains('target') || ele.classList.contains('real-canvas'))
-    );
-    const draggedOverElem = draggedOverElements.find((ele) => ele.classList.contains('target'));
-    const draggedOverContainer = draggedOverElements.find((ele) => ele.classList.contains('real-canvas'));
-    const appCanvas = document.getElementById('real-canvas');
-
-    // Show grid line for main canvas
-    draggedOverContainer?.classList.remove('hide-grid');
-    draggedOverContainer?.classList.add('show-grid');
-
-    // Remove 'show-grid' class from all sub-canvases
-    const canvasElms = document.getElementsByClassName('sub-canvas');
-    Array.from(canvasElms).forEach((element) => {
-      element.classList.remove('show-grid');
-      element.classList.add('hide-grid');
-    });
-
-    // Determine the potential new parent
-    const parentId = draggedOverContainer?.getAttribute('data-parentId') || draggedOverElem?.id;
-
-    // Show grid for the appropriate canvas
-    if (parentId) {
-      const newParentCanvas = document.getElementById('canvas-' + parentId);
-      if (newParentCanvas) {
-        appCanvas?.classList?.remove('show-grid');
-        newParentCanvas?.classList.remove('hide-grid');
-        newParentCanvas?.classList.add('show-grid');
-      }
-    }
-
-    useGridStore.getState().actions.setDragTarget(parentId);
-  };
-
   const handleDragGroupEnd = (e) => {
     try {
+      hideGridLines();
+      setIsGroupDragging(false);
       const { events, clientX, clientY } = e;
       const initialParent = events[0].target.closest('.real-canvas');
       // Get potential new parent using same logic as onDragEnd
@@ -476,7 +482,7 @@ export default function Grid({ gridWidth, currentLayout }) {
 
             // Apply transform to return to original position
             ev.target.style.transform = `translate(${Math.round(_left / _gridWidth) * _gridWidth}px, ${
-              Math.round(_top / 10) * 10
+              Math.round(_top / GRID_HEIGHT) * GRID_HEIGHT
             }px)`;
           }
         });
@@ -513,7 +519,7 @@ export default function Grid({ gridWidth, currentLayout }) {
 
             // Apply grid snapping and bounds
             const snappedX = Math.round(posX / _gridWidth) * _gridWidth;
-            const snappedY = Math.round(posY / 10) * 10;
+            const snappedY = Math.round(posY / GRID_HEIGHT) * GRID_HEIGHT;
 
             ev.target.style.transform = `translate(${snappedX}px, ${snappedY}px)`;
             return {
@@ -530,6 +536,18 @@ export default function Grid({ gridWidth, currentLayout }) {
     }
   };
 
+  React.useEffect(() => {
+    const components = Array.from(document.querySelectorAll('.active-target')).filter(
+      (component) => !selectedComponents.includes(component.getAttribute('widgetid'))
+    );
+    const draggingOrResizing = draggingComponentId || resizingComponentId;
+    if (!draggingOrResizing && components.length > 0) {
+      for (const component of components) {
+        component?.classList?.remove('active-target');
+      }
+    }
+  }, [draggingComponentId, resizingComponentId, isGroupDragging, selectedComponents]);
+
   if (mode !== 'edit') return null;
 
   return (
@@ -556,7 +574,7 @@ export default function Grid({ gridWidth, currentLayout }) {
           let _gridWidth = useGridStore.getState().subContainerWidths[currentWidget.component?.parent] || gridWidth;
           if (currentWidget.component?.parent) {
             document.getElementById('canvas-' + currentWidget.component?.parent)?.classList.add('show-grid');
-            useGridStore.getState().actions.setDragTarget(currentWidget.component?.parent);
+            setDragParentId(currentWidget.component?.parent);
           } else {
             document.getElementById('real-canvas').classList.add('show-grid');
           }
@@ -611,12 +629,12 @@ 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;
           }
           useGridStore.getState().actions.setResizingComponentId(e.target.id);
-          e.setMin([gridWidth, 10]);
+          e.setMin([gridWidth, GRID_HEIGHT]);
         }}
         onResizeEnd={(e) => {
           try {
@@ -628,7 +646,7 @@ export default function Grid({ gridWidth, currentLayout }) {
             document.getElementById('canvas-' + currentWidget.component?.parent)?.classList.remove('show-grid');
             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 / 10) * 10;
+            const height = Math.round(e?.lastEvent?.height / GRID_HEIGHT) * GRID_HEIGHT;
 
             const currentWidth = currentWidget.width * _gridWidth;
             const diffWidth = e.lastEvent?.width - currentWidth;
@@ -656,16 +674,16 @@ export default function Grid({ gridWidth, currentLayout }) {
             transformY = transformY < 0 ? 0 : transformY > maxY ? maxY : transformY;
             transformX = transformX < 0 ? 0 : transformX > maxLeft ? maxLeft : transformX;
 
-            const roundedTransformY = Math.round(transformY / 10) * 10;
-            transformY = transformY % 10 === 5 ? roundedTransformY - 10 : roundedTransformY;
+            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 / 10) * 10
+              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`;
             }
             if (!maxHeightHit || e.height < e.target.clientHeight) {
-              e.target.style.height = `${Math.round(e.lastEvent.height / 10) * 10}px`;
+              e.target.style.height = `${Math.round(e.lastEvent.height / GRID_HEIGHT) * GRID_HEIGHT}px`;
             }
             const resizeData = {
               id: e.target.id,
@@ -681,12 +699,11 @@ export default function Grid({ gridWidth, currentLayout }) {
           } catch (error) {
             console.error('ResizeEnd error ->', error);
           }
-          useGridStore.getState().actions.setDragTarget();
+          setDragParentId(null);
           toggleCanvasUpdater();
         }}
         onResizeGroupStart={({ events }) => {
-          const parentElm = events[0].target.closest('.real-canvas');
-          parentElm.classList.add('show-grid');
+          showGridLines();
         }}
         onResizeGroup={({ events }) => {
           const parentElm = events[0].target.closest('.real-canvas');
@@ -709,8 +726,7 @@ export default function Grid({ gridWidth, currentLayout }) {
             const { events } = e;
             const newBoxs = [];
 
-            const parentElm = events[0].target.closest('.real-canvas');
-            parentElm.classList.remove('show-grid');
+            hideGridLines();
 
             // TODO: Logic needs to be relooked post go live P2
             groupResizeDataRef.current.forEach((ev) => {
@@ -721,9 +737,9 @@ export default function Grid({ gridWidth, currentLayout }) {
               let width = Math.round(ev.width / _gridWidth) * _gridWidth;
               width = width < _gridWidth ? _gridWidth : width;
               let posX = Math.round(ev.drag.translate[0] / _gridWidth) * _gridWidth;
-              let posY = Math.round(ev.drag.translate[1] / 10) * 10;
-              let height = Math.round(ev.height / 10) * 10;
-              height = height < 10 ? 10 : height;
+              let posY = Math.round(ev.drag.translate[1] / GRID_HEIGHT) * GRID_HEIGHT;
+              let height = Math.round(ev.height / GRID_HEIGHT) * GRID_HEIGHT;
+              height = height < GRID_HEIGHT ? GRID_HEIGHT : height;
 
               ev.target.style.width = `${width}px`;
               ev.target.style.height = `${height}px`;
@@ -751,7 +767,7 @@ export default function Grid({ gridWidth, currentLayout }) {
                 let posX = currentWidget?.layouts[currentLayout].left * _gridWidth;
                 let posY = currentWidget?.layouts[currentLayout].top;
                 let height = currentWidget?.layouts[currentLayout].height;
-                height = height < 10 ? 10 : height;
+                height = height < GRID_HEIGHT ? GRID_HEIGHT : height;
                 ev.target.style.width = `${width}px`;
                 ev.target.style.height = `${height}px`;
                 ev.target.style.transform = `translate(${posX}px, ${posY}px)`;
@@ -766,6 +782,11 @@ export default function Grid({ gridWidth, currentLayout }) {
         }}
         checkInput
         onDragStart={(e) => {
+          // This is to prevent parent component from being dragged and the stop the propagation of the event
+          if (getHoveredComponentForGrid() !== e.target.id) {
+            return false;
+          }
+          newDragParentId.current = boxList.find((box) => box.id === e.target.id)?.parent;
           e?.moveable?.controlBox?.removeAttribute('data-off-screen');
           const box = boxList.find((box) => box.id === e.target.id);
           // Prevent drag if shift is pressed for SUBCONTAINER_WIDGETS
@@ -808,10 +829,6 @@ export default function Grid({ gridWidth, currentLayout }) {
               return false;
             }
           }
-          // This is to prevent parent component from being dragged and the stop the propagation of the event
-          if (getHoveredComponentForGrid() !== e.target.id) {
-            return false;
-          }
         }}
         onDragEnd={(e) => {
           try {
@@ -819,6 +836,9 @@ export default function Grid({ gridWidth, currentLayout }) {
               useGridStore.getState().actions.setDraggingComponentId(null);
               isDraggingRef.current = false;
             }
+            prevDragParentId.current = null;
+            newDragParentId.current = null;
+            setDragParentId(null);
 
             if (!e.lastEvent) {
               return;
@@ -905,14 +925,14 @@ export default function Grid({ gridWidth, currentLayout }) {
             }
 
             e.target.style.transform = `translate(${Math.round(left / _gridWidth) * _gridWidth}px, ${
-              Math.round(top / 10) * 10
+              Math.round(top / GRID_HEIGHT) * GRID_HEIGHT
             }px)`;
             if (draggedOverElemId === currentParentId || isParentChangeAllowed) {
               handleDragEnd([
                 {
                   id: e.target.id,
                   x: left,
-                  y: Math.round(top / 10) * 10,
+                  y: Math.round(top / GRID_HEIGHT) * GRID_HEIGHT,
                   parent: isParentChangeAllowed ? draggedOverElemId : undefined,
                 },
               ]);
@@ -923,28 +943,34 @@ export default function Grid({ gridWidth, currentLayout }) {
           } catch (error) {
             console.log('draggedOverElemId->error', error);
           }
-          // Hide all sub-canvases
-          var canvasElms = document.getElementsByClassName('sub-canvas');
-          var elementsArray = Array.from(canvasElms);
-          elementsArray.forEach(function (element) {
-            element.classList.remove('show-grid');
-            element.classList.add('hide-grid');
-          });
-          document.getElementById('real-canvas')?.classList.remove('show-grid');
+          hideGridLines();
           toggleCanvasUpdater();
         }}
         onDrag={(e) => {
           // Since onDrag is called multiple times when dragging, hence we are using isDraggingRef to prevent setting state again and again
           if (!isDraggingRef.current) {
             useGridStore.getState().actions.setDraggingComponentId(e.target.id);
+            showGridLines();
             isDraggingRef.current = true;
           }
-          const parentComponent = boxList.find((box) => box.id === boxList.find((b) => b.id === e.target.id)?.parent);
+          const currentWidget = boxList.find((box) => box.id === e.target.id);
+          const currentParentId =
+            currentWidget?.component?.parent === null ? 'canvas' : currentWidget?.component?.parent;
+          const _gridWidth = useGridStore.getState().subContainerWidths[dragParentId] || gridWidth;
+          const _dragParentId = newDragParentId.current === null ? 'canvas' : newDragParentId.current;
 
-          let top = e.translate[1];
-          let left = e.translate[0];
+          // Snap to grid
+          let left = Math.round(e.translate[0] / _gridWidth) * _gridWidth;
+          let top = Math.round(e.translate[1] / GRID_HEIGHT) * GRID_HEIGHT;
+
+          // This logic is to handle the case when the dragged element is over a new canvas
+          if (_dragParentId !== currentParentId) {
+            left = e.translate[0];
+            top = e.translate[1];
+          }
 
           // Special case for Modal
+          const parentComponent = boxList.find((box) => box.id === boxList.find((b) => b.id === e.target.id)?.parent);
           if (parentComponent?.component?.component === 'Modal') {
             const elemContainer = e.target.closest('.real-canvas');
             const containerHeight = elemContainer.clientHeight;
@@ -962,8 +988,32 @@ export default function Grid({ gridWidth, currentLayout }) {
             `translate: ${e.translate[0]} | Round: ${Math.round(e.translate[0] / gridWidth) * gridWidth} | ${gridWidth}`
           );
 
-          handleDragGridLinesVisibility(e, [{ target: e.target }]);
+          // This block is to show grid lines on the canvas when the dragged element is over a new canvas
+          if (document.elementFromPoint(e.clientX, e.clientY)) {
+            const targetElems = document.elementsFromPoint(e.clientX, e.clientY);
+            const draggedOverElements = targetElems.filter(
+              (ele) =>
+                (ele.id !== e.target.id && ele.classList.contains('target')) || ele.classList.contains('real-canvas')
+            );
+            const draggedOverElem = draggedOverElements.find((ele) => ele.classList.contains('target'));
+            const draggedOverContainer = draggedOverElements.find((ele) => ele.classList.contains('real-canvas'));
 
+            // Determine potential new parent
+            let newParentId = draggedOverContainer?.getAttribute('data-parentId') || draggedOverElem?.id;
+
+            if (newParentId === e.target.id) {
+              newParentId = boxList.find((box) => box.id === e.target.id)?.component?.parent;
+            } else if (parentComponent?.component?.component === 'Modal') {
+              // Never update parentId for Modal
+              newParentId = parentComponent?.id;
+            }
+
+            if (newParentId !== prevDragParentId.current) {
+              setDragParentId(newParentId === 'canvas' ? null : newParentId);
+              newDragParentId.current = newParentId === 'canvas' ? null : newParentId;
+              prevDragParentId.current = newParentId;
+            }
+          }
           // Postion ghost element exactly as same at dragged element
           if (document.getElementById(`moveable-drag-ghost`)) {
             document.getElementById(`moveable-drag-ghost`).style.transform = `translate(${left}px, ${top}px)`;
@@ -978,31 +1028,26 @@ export default function Grid({ gridWidth, currentLayout }) {
             parentElm?.classList?.add('show-grid');
           }
 
-          handleDragGridLinesVisibility(ev, events);
-
           events.forEach((ev) => {
-            let left = ev.translate[0];
-            let top = ev.translate[1];
+            const currentWidget = boxList.find(({ id }) => id === ev.target.id);
+            const _gridWidth =
+              useGridStore.getState().subContainerWidths?.[currentWidget?.component?.parent] || gridWidth;
+
+            let left = Math.round(ev.translate[0] / _gridWidth) * _gridWidth;
+            let top = Math.round(ev.translate[1] / GRID_HEIGHT) * GRID_HEIGHT;
 
             ev.target.style.transform = `translate(${left}px, ${top}px)`;
           });
           updateNewPosition(events);
         }}
         onDragGroupStart={({ events }) => {
-          const parentElm = events[0]?.target?.closest('.real-canvas');
-          parentElm?.classList?.add('show-grid');
+          showGridLines();
+          setIsGroupDragging(true);
         }}
         onDragGroupEnd={(e) => {
           handleDragGroupEnd(e);
           toggleCanvasUpdater();
         }}
-        //snap settgins
-        snappable={true}
-        snapThreshold={10}
-        isDisplaySnapDigit={false}
-        bounds={CANVAS_BOUNDS}
-        displayAroundControls={true}
-        controlPadding={20}
         onClickGroup={(e) => {
           const targetId =
             e.inputEvent.target.id || e.inputEvent.target.closest('.moveable-box')?.getAttribute('widgetid');
@@ -1018,6 +1063,42 @@ export default function Grid({ gridWidth, currentLayout }) {
             }
           }
         }}
+        //snap settgins
+        snappable={true}
+        snapGap={false}
+        isDisplaySnapDigit={false}
+        snapThreshold={GRID_HEIGHT}
+        // Guidelines configuration
+        elementGuidelines={elementGuidelines}
+        snapDirections={{
+          top: true,
+          right: true,
+          bottom: true,
+          left: true,
+          center: false,
+          middle: false,
+        }}
+        elementSnapDirections={{
+          top: true,
+          left: true,
+          bottom: true,
+          right: true,
+          center: false,
+          middle: false,
+        }}
+        onSnap={(e) => {
+          const components = e.elements;
+          if (isArray(componentsSnappedTo.current)) {
+            for (const component of componentsSnappedTo.current) {
+              component?.element?.classList?.remove('active-target');
+            }
+          }
+          componentsSnappedTo.current = components;
+          for (const component of components) {
+            component.element.classList.add('active-target');
+          }
+        }}
+        snapGridAll={true}
       />
     </>
   );
diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/gridUtils.js b/frontend/src/AppBuilder/AppCanvas/Grid/gridUtils.js
index 817f9a5ca9..4bfd030a3c 100644
--- a/frontend/src/AppBuilder/AppCanvas/Grid/gridUtils.js
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/gridUtils.js
@@ -391,3 +391,25 @@ export function hasParentWithClass(child, className) {
 
   return false;
 }
+
+export function showGridLines() {
+  var canvasElms = document.getElementsByClassName('sub-canvas');
+  var elementsArray = Array.from(canvasElms);
+  elementsArray.forEach(function (element) {
+    element.classList.remove('hide-grid');
+    element.classList.add('show-grid');
+  });
+  document.getElementById('real-canvas')?.classList.remove('hide-grid');
+  document.getElementById('real-canvas')?.classList.add('show-grid');
+}
+
+export function hideGridLines() {
+  var canvasElms = document.getElementsByClassName('sub-canvas');
+  var elementsArray = Array.from(canvasElms);
+  elementsArray.forEach(function (element) {
+    element.classList.remove('show-grid');
+    element.classList.add('hide-grid');
+  });
+  document.getElementById('real-canvas')?.classList.remove('show-grid');
+  document.getElementById('real-canvas')?.classList.add('hide-grid');
+}
diff --git a/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/DragLayer.jsx b/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/DragLayer.jsx
index 7450011b93..77274cd658 100644
--- a/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/DragLayer.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/DragLayer.jsx
@@ -2,12 +2,14 @@ import React, { useEffect } from 'react';
 import { WidgetBox } from '../WidgetBox';
 import { useDrag, useDragLayer } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
+import { snapToGrid } from '@/AppBuilder/AppCanvas/appCanvasUtils';
+import { NO_OF_GRIDS } from '@/AppBuilder/AppCanvas/appCanvasConstants';
 
 export const DragLayer = ({ index, component }) => {
   const [{ isDragging }, drag, preview] = useDrag(
     () => ({
       type: 'box',
-      item: { componentType: component.component },
+      item: { componentType: component.component, component },
       collect: (monitor) => ({ isDragging: monitor.isDragging() }),
     }),
     [component.component]
@@ -18,7 +20,6 @@ export const DragLayer = ({ index, component }) => {
   }, []);
 
   const size = component.defaultSize || { width: 30, height: 40 };
-
   return (
     <>
       {isDragging && <CustomDragLayer size={size} />}
@@ -30,32 +31,39 @@ export const DragLayer = ({ index, component }) => {
 };
 
 const CustomDragLayer = ({ size }) => {
-  const { currentOffset } = useDragLayer((monitor) => ({
+  const { currentOffset, item } = useDragLayer((monitor) => ({
     currentOffset: monitor.getSourceClientOffset(),
+    item: monitor.getItem(),
   }));
 
   if (!currentOffset) return null;
 
-  const canvasWidth = document.getElementsByClassName('real-canvas')[0]?.getBoundingClientRect()?.width;
-
+  const canvasWidth = item?.canvasWidth;
+  const canvasBounds = item?.canvasRef?.getBoundingClientRect();
   const height = size.height;
-  const width = (canvasWidth * size.width) / 43;
 
+  const width = (canvasWidth * 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);
+
+  const [x, y] = snapToGrid(canvasWidth, left, top);
   return (
     <div
       style={{
         position: 'fixed',
         pointerEvents: 'none',
-        zIndex: -1,
-        left: 0,
-        top: 0,
+        zIndex: 1000,
+        left: canvasBounds?.left || 0,
+        top: canvasBounds?.top || 0,
         height: `${height}px`,
         width: `${width}px`,
       }}
     >
       <div
         style={{
-          transform: `translate(${currentOffset.x}px, ${currentOffset.y}px)`,
+          transform: `translate(${x}px, ${y}px)`,
           background: '#D9E2FC',
           opacity: '0.7',
           height: '100%',

From fc54479e8fdd5c54036544910a1ae89e4eeb0080 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Thu, 27 Feb 2025 23:05:13 +0530
Subject: [PATCH 11/11] [Bugfix] : Fix difficult to resize large components
 inside container

---
 frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
index fd7316fe0f..d27a66b0ec 100644
--- a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
@@ -601,9 +601,6 @@ export default function Grid({ gridWidth, currentLayout }) {
           const maxLeft = containerWidth - e.target.clientWidth;
           const maxWidthHit = transformX < 0 || transformX >= maxLeft;
           const maxHeightHit = transformY < 0 || transformY >= maxY;
-          transformY = transformY < 0 ? 0 : transformY > maxY ? maxY : transformY;
-          transformX = transformX < 0 ? 0 : transformX > maxLeft ? maxLeft : transformX;
-
           if (!maxWidthHit || e.width < e.target.clientWidth) {
             e.target.style.width = `${e.width}px`;
           }
@@ -671,8 +668,6 @@ export default function Grid({ gridWidth, currentLayout }) {
             const maxLeft = containerWidth - e.target.clientWidth;
             const maxWidthHit = transformX < 0 || transformX >= maxLeft;
             const maxHeightHit = transformY < 0 || transformY >= maxY;
-            transformY = transformY < 0 ? 0 : transformY > maxY ? maxY : transformY;
-            transformX = transformX < 0 ? 0 : transformX > maxLeft ? maxLeft : transformX;
 
             const roundedTransformY = Math.round(transformY / GRID_HEIGHT) * GRID_HEIGHT;
             transformY = transformY % GRID_HEIGHT === 5 ? roundedTransformY - GRID_HEIGHT : roundedTransformY;