@acorex/components 20.3.46 → 20.3.48

package/fesm2022/acorex-components-grid-layout-builder.mjs

@@ -172,6 +172,19 @@ class AXGridLayoutWidgetComponent {
             ? removeUndefinedKeys(convertGridStackNodeToAXGridLayoutNode(gridstackNode))
             : { ...this.options(), element: this.elementRef.nativeElement };
     }
+    /**
+     * Returns the widget options from the Angular input binding (stored/desired positions),
+     * bypassing the live gridstackNode which may have been auto-reflowed.
+     * Used by the container to load correct per-breakpoint layouts after column changes.
+     *
+     * @returns AXGridLayoutNode - The widget options from the input signal.
+     */
+    getInputOptions() {
+        const opts = this.options();
+        return opts
+            ? { ...opts, element: this.elementRef.nativeElement }
+            : { element: this.elementRef.nativeElement };
+    }
     /**
      * Returns the native DOM element of the widget.
      *
@@ -244,9 +257,12 @@ class AXGridLayoutContainerComponent extends NXComponent {
                 untracked(() => {
                     this.ngZone.runOutsideAngular(() => {
                         const gridStackOptions = removeUndefinedKeys(convertAXGridLayoutOptionsToGridStackOptions(newOptions));
-                        // Apply each option individually
+                        // Detect whether the column count is changing — requires loading from stored input positions
+                        const isColumnChange = gridStackOptions.column !== undefined && gridStackOptions.column !== this.grid?.opts?.column;
+                        // Use 'none' layout mode to prevent GridStack from auto-reflowing widget positions.
+                        // The correct per-breakpoint positions will be loaded explicitly via updateAll(true).
                         if (gridStackOptions.column !== undefined) {
-                            this.grid?.column(gridStackOptions.column);
+                            this.grid?.column(gridStackOptions.column, 'none');
                         }
                         if (gridStackOptions.cellHeight !== undefined) {
                             this.grid?.cellHeight(gridStackOptions.cellHeight);
@@ -266,8 +282,10 @@ class AXGridLayoutContainerComponent extends NXComponent {
                         if (gridStackOptions.animate !== undefined) {
                             this.grid?.setAnimation(gridStackOptions.animate);
                         }
-                        // Update the layout after options have been applied
-                        this.updateAll();
+                        // When column count changes, read from Angular inputs (stored per-breakpoint positions)
+                        // to avoid using stale gridstackNode positions from the old column layout.
+                        // For non-column changes, read from gridstackNode to preserve live drag/resize state.
+                        this.updateAll(isColumnChange);
                     });
                 });
             }
@@ -285,11 +303,17 @@ class AXGridLayoutContainerComponent extends NXComponent {
     }
     //#endregion
     //#region Internal Methods
-    updateAll() {
+    /**
+     * Synchronizes the grid layout with the current widget list.
+     *
+     * @param useInputValues - When true, reads positions from Angular input bindings
+     * (stored per-breakpoint positions). When false, reads from live gridstackNode
+     * (preserving user drag/resize state). Use true after column/breakpoint changes.
+     */
+    updateAll(useInputValues = false) {
         if (!this.grid)
             return;
         const arrays = this.gridstackItems?.toArray() ?? [];
-        // If there are no items, remove all widgets first
         if (arrays.length === 0) {
             this.grid.removeAll(true);
             this.checkEmpty();
@@ -297,13 +321,11 @@ class AXGridLayoutContainerComponent extends NXComponent {
         }
         const layout = [];
         arrays.forEach((item) => {
-            const widgetOptions = item.getOptions();
+            const widgetOptions = useInputValues ? item.getInputOptions() : item.getOptions();
             if (widgetOptions) {
                 layout.push(removeUndefinedKeys(convertAXGridLayoutNodeToGridStackNode(widgetOptions)));
             }
         });
-        // Clear existing widgets before loading new ones
-        //this.grid.removeAll(false);//TODO COMMENTED FOR PERFORMANCE
         this.grid.load(layout);
         this.checkEmpty();
     }