feat: added Grid support for min and max sizes on grid items

Added support to set minW, minH, maxW and maxH on layout grid items.

Co-Authored-By: Rishabh Mahajan <rishabh@statusbrew.com>
Co-Authored-By: rajan-chavda <60097693+rajan-chavda@users.noreply.github.com>

Author: 3 people

README.md

@@ -70,8 +70,8 @@ rowHeight: number = 100;
 layout: KtdGridLayout = [
     {id: '0', x: 0, y: 0, w: 3, h: 3},
     {id: '1', x: 3, y: 0, w: 3, h: 3},
-    {id: '2', x: 0, y: 3, w: 3, h: 3},
-    {id: '3', x: 3, y: 3, w: 3, h: 3},
+    {id: '2', x: 0, y: 3, w: 3, h: 3, minW: 2, minH: 3},
+    {id: '3', x: 3, y: 3, w: 3, h: 3, minW: 2, maxW: 3, minH: 2, maxH: 5},
 ];
 trackById = ktdTrackById
 ```
@@ -152,10 +152,10 @@ Here is listed the basic API of both KtdGridComponent and KtdGridItemComponent.
 - [x] Add Real life example with charts and grid items with some kind of controls.
 - [x] Add dragStartThreshold option to grid items.
 - [x] Auto Scroll vertical/horizontal if container is scrollable when dragging a grid item. ([commit](https://github.com/katoid/angular-grid-layout/commit/d137d0e3f40cafdb5fdfd7b2bce4286670200c5d)).
+- [x] Grid support for minWidth/maxWidth and minHeight/maxHeight on grid items.
 - [ ] Add grid gap feature.
 - [ ] rowHeight to support also 'fit' as value instead of only CSS pixels ([issue](https://github.com/katoid/angular-grid-layout/issues/1)).
 - [ ] Grid support for static grid items.
-- [ ] Grid support for minWidth and minHeight on grid items.
 - [ ] Customizable drag placeholder.
 - [ ] Check grid compact horizontal algorithm, estrange behaviour when overflowing, also in react-grid-layout.
 - [ ] Add all other resize options (now is only available 'se-resize').

projects/angular-grid-layout/src/lib/grid.component.ts

@@ -459,13 +459,18 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
                             this.renderer.removeChild(this.elementRef.nativeElement, placeholderElement);
 
                             if (newLayout) {
+                                // TODO: newLayout should already be pruned. If not, it should have type Layout, not KtdGridLayout as it is now.
                                 // Prune react-grid-layout compact extra properties.
                                 observer.next(newLayout.map(item => ({
                                     id: item.id,
                                     x: item.x,
                                     y: item.y,
                                     w: item.w,
-                                    h: item.h
+                                    h: item.h,
+                                    minW: item.minW,
+                                    minH: item.minH,
+                                    maxW: item.maxW,
+                                    maxH: item.maxH,
                                 })) as KtdGridLayout);
                             } else {
                                 // TODO: Need we really to emit if there is no layout change but drag started and ended?

projects/angular-grid-layout/src/lib/grid.definitions.ts

@@ -7,6 +7,10 @@ export interface KtdGridLayoutItem {
     y: number;
     w: number;
     h: number;
+    minW?: number;
+    minH?: number;
+    maxW?: number;
+    maxH?: number;
 }
 
 export type KtdGridCompactType = CompactType;

projects/angular-grid-layout/src/lib/utils/grid.utils.ts

@@ -17,7 +17,7 @@ export function ktdTrackById(index: number, item: {id: string}) {
 export function ktdGridCompact(layout: KtdGridLayout, compactType: KtdGridCompactType, cols: number): KtdGridLayout {
     return compact(layout, compactType, cols)
         // Prune react-grid-layout compact extra properties.
-        .map(item => ({id: item.id, x: item.x, y: item.y, w: item.w, h: item.h}));
+        .map(item => ({ id: item.id, x: item.x, y: item.y, w: item.w, h: item.h, minW: item.minW, minH: item.minH, maxW: item.maxW, maxH: item.maxH }));
 }
 
 function screenXPosToGridValue(screenXPos: number, cols: number, width: number): number {
@@ -147,8 +147,9 @@ export function ktdGridItemResizing(gridItemId: string, config: KtdGridCfg, comp
         h: screenYPosToGridValue(height, config.rowHeight, gridElemClientRect.height)
     };
 
-    layoutItem.w = Math.max(1, layoutItem.w);
-    layoutItem.h = Math.max(1, layoutItem.h);
+    layoutItem.w = limitNumberWithinRange(layoutItem.w, layoutItem.minW, layoutItem.maxW);
+    layoutItem.h = limitNumberWithinRange(layoutItem.h, layoutItem.minH, layoutItem.maxH);
+
     if (layoutItem.x + layoutItem.w > config.cols) {
         layoutItem.w = Math.max(1, config.cols - layoutItem.x);
     }
@@ -216,3 +217,13 @@ function getDimensionToShrink(layoutItem, lastShrunk): 'w' | 'h' {
 
     return lastShrunk === 'w' ? 'h' : 'w';
 }
+
+/**
+ * Given the current number and min/max values, returns the number within the range
+ * @param number can be any numeric value
+ * @param min minimum value of range
+ * @param max maximum value of range
+ */
+function limitNumberWithinRange(num: number, min: number = 1, max: number = Infinity) {
+    return Math.min(Math.max(num, min < 1 ? 1 : min), max);
+}

projects/demo-app/src/app/real-life-example/real-life-example.component.ts

@@ -19,13 +19,13 @@ export class KtdRealLifeExampleComponent implements OnInit, OnDestroy {
     cols = 12;
     rowHeight = 50;
     compactType: 'vertical' | 'horizontal' | null = 'vertical';
-    layout = [
-        {id: '0', x: 0, y: 5, w: 4, h: 10},
-        {id: '1', x: 4, y: 5, w: 4, h: 10},
-        {id: '2', x: 2, y: 0, w: 6, h: 5},
-        {id: '5', x: 8, y: 0, w: 4, h: 5},
-        {id: '3', x: 0, y: 0, w: 2, h: 5},
-        {id: '4', x: 8, y: 5, w: 4, h: 10}
+    layout: KtdGridLayout = [
+        {id: '0', x: 0, y: 5, w: 4, h: 10, minW: 2, minH: 5},
+        {id: '1', x: 4, y: 5, w: 4, h: 10, minW: 2, minH: 5},
+        {id: '2', x: 2, y: 0, w: 6, h: 5, minW: 4, minH: 4, maxW: 8, maxH: 14},
+        {id: '5', x: 8, y: 0, w: 4, h: 5, minW: 2, minH: 3},
+        {id: '3', x: 0, y: 0, w: 2, h: 5, minH: 3},
+        {id: '4', x: 8, y: 5, w: 4, h: 10, minH: 5, maxH: 12}
     ];
 
     layoutSizes: {[id: string]: [number, number]} = {};