refactor: pruned react-grid-layout properties, added minH etc on real…

… life examples (katoid#1)
llorenspujol · Jan 1, 2022 · 8dcc613 · 8dcc613
1 parent cf8d70e
commit 8dcc613
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 10 deletions.
diff --git a/projects/angular-grid-layout/src/index.ts b/projects/angular-grid-layout/src/index.ts
diff --git a/projects/angular-grid-layout/src/lib/grid.component.ts b/projects/angular-grid-layout/src/lib/grid.component.ts
@@ -459,7 +459,19 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
                             this.renderer.removeChild(this.elementRef.nativeElement, placeholderElement);
 
                             if (newLayout) {
-                                observer.next(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,
+                                    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?
                                 observer.next(this.layout);

diff --git a/projects/angular-grid-layout/src/lib/grid.definitions.ts b/projects/angular-grid-layout/src/lib/grid.definitions.ts
@@ -1,7 +1,17 @@
 import { InjectionToken } from '@angular/core';
-import { CompactType, LayoutItem } from './utils/react-grid-layout.utils';
+import { CompactType } from './utils/react-grid-layout.utils';
 
-export type KtdGridLayoutItem = LayoutItem;
+export interface KtdGridLayoutItem {
+    id: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    minW?: number;
+    minH?: number;
+    maxW?: number;
+    maxH?: number;
+}
 
 export type KtdGridCompactType = CompactType;
 

diff --git a/projects/demo-app/src/app/real-life-example/real-life-example.component.ts b/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]} = {};