@@ -6,7 +6,7 @@ import { coerceNumberProperty, NumberInput } from './coercion/number-property';
6
6
import { KtdGridItemComponent } from './grid-item/grid-item.component' ;
7
7
import { combineLatest , merge , NEVER , Observable , Observer , of , Subscription } from 'rxjs' ;
8
8
import { exhaustMap , map , startWith , switchMap , takeUntil } from 'rxjs/operators' ;
9
- import { ktdGridItemDragging , ktdGridItemLayoutItemAreEqual , ktdGridItemResizing } from './utils/grid.utils' ;
9
+ import { ktdGetGridItemRowHeight , ktdGridItemDragging , ktdGridItemLayoutItemAreEqual , ktdGridItemResizing } from './utils/grid.utils' ;
10
10
import { compact } from './utils/react-grid-layout.utils' ;
11
11
import {
12
12
GRID_ITEM_GET_RENDER_DATA_TOKEN , KtdGridCfg , KtdGridCompactType , KtdGridItemRenderData , KtdGridLayout , KtdGridLayoutItem
@@ -49,16 +49,17 @@ function getDragResizeEventData(gridItem: KtdGridItemComponent, layout: KtdGridL
49
49
50
50
function layoutToRenderItems ( config : KtdGridCfg , width : number , height : number ) : KtdDictionary < KtdGridItemRenderData < number > > {
51
51
const { cols, rowHeight, layout, gap} = config ;
52
- const widthExcludinggap = width - Math . max ( ( gap * ( cols - 1 ) ) , 0 ) ;
53
- const itemWidthPerColumn = ( widthExcludinggap / cols ) ;
52
+ const rowHeightInPixels = rowHeight === 'fit' ? ktdGetGridItemRowHeight ( layout , height , gap ) : rowHeight ;
53
+ const widthExcludingGap = width - Math . max ( ( gap * ( cols - 1 ) ) , 0 ) ;
54
+ const itemWidthPerColumn = ( widthExcludingGap / cols ) ;
54
55
const renderItems : KtdDictionary < KtdGridItemRenderData < number > > = { } ;
55
56
for ( const item of layout ) {
56
57
renderItems [ item . id ] = {
57
58
id : item . id ,
58
- top : item . y * rowHeight + gap * item . y ,
59
+ top : item . y * rowHeightInPixels + gap * item . y ,
59
60
left : item . x * itemWidthPerColumn + gap * item . x ,
60
61
width : item . w * itemWidthPerColumn + gap * Math . max ( item . w - 1 , 0 ) ,
61
- height : item . h * rowHeight + gap * Math . max ( item . h - 1 , 0 ) ,
62
+ height : item . h * rowHeightInPixels + gap * Math . max ( item . h - 1 , 0 ) ,
62
63
} ;
63
64
}
64
65
return renderItems ;
@@ -179,13 +180,13 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
179
180
180
181
/** Row height in css pixels */
181
182
@Input ( )
182
- get rowHeight ( ) : number { return this . _rowHeight ; }
183
+ get rowHeight ( ) : number | 'fit' { return this . _rowHeight ; }
183
184
184
- set rowHeight ( val : number ) {
185
- this . _rowHeight = Math . max ( 1 , Math . round ( coerceNumberProperty ( val ) ) ) ;
185
+ set rowHeight ( val : number | 'fit' ) {
186
+ this . _rowHeight = val === 'fit' ? val : Math . max ( 1 , Math . round ( coerceNumberProperty ( val ) ) ) ;
186
187
}
187
188
188
- private _rowHeight : number = 100 ;
189
+ private _rowHeight : number | 'fit' = 100 ;
189
190
190
191
/** Number of columns */
191
192
@Input ( )
@@ -228,10 +229,24 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
228
229
229
230
private _gap : number = 0 ;
230
231
232
+ @Input ( )
233
+ get height ( ) : number | null {
234
+ return this . _height ;
235
+ }
236
+
237
+ set height ( val : number | null ) {
238
+ this . _height = typeof val === 'number' ? Math . max ( val , 0 ) : null ;
239
+ }
240
+
241
+ /** Total height of the grid */
242
+ private _height : number | null = null ;
243
+ private gridCurrentHeight : number ;
244
+
231
245
get config ( ) : KtdGridCfg {
232
246
return {
233
247
cols : this . cols ,
234
248
rowHeight : this . rowHeight ,
249
+ height : this . height ,
235
250
layout : this . layout ,
236
251
preventCollision : this . preventCollision ,
237
252
gap : this . gap ,
@@ -244,8 +259,6 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
244
259
/** Element that is rendered as placeholder when a grid item is being dragged */
245
260
private placeholder : HTMLElement | null ;
246
261
247
- /** Total height of the grid */
248
- private _height : number ;
249
262
private _gridItemsRenderData : KtdDictionary < KtdGridItemRenderData < number > > ;
250
263
private subscriptions : Subscription [ ] ;
251
264
@@ -258,6 +271,11 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
258
271
}
259
272
260
273
ngOnChanges ( changes : SimpleChanges ) {
274
+
275
+ if ( this . rowHeight === 'fit' && this . height == null ) {
276
+ console . warn ( `KtdGridComponent: The @Input() height should not be null when using rowHeight 'fit'` ) ;
277
+ }
278
+
261
279
let needsCompactLayout = false ;
262
280
let needsRecalculateRenderData = false ;
263
281
@@ -268,7 +286,7 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
268
286
}
269
287
270
288
// Check if wee need to recalculate rendering data.
271
- if ( needsCompactLayout || changes . rowHeight || changes . gap ) {
289
+ if ( needsCompactLayout || changes . rowHeight || changes . height || changes . gap ) {
272
290
needsRecalculateRenderData = true ;
273
291
}
274
292
@@ -315,12 +333,12 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
315
333
316
334
calculateRenderData ( ) {
317
335
const clientRect = ( this . elementRef . nativeElement as HTMLElement ) . getBoundingClientRect ( ) ;
318
- this . _gridItemsRenderData = layoutToRenderItems ( this . config , clientRect . width , clientRect . height ) ;
319
- this . _height = getGridHeight ( this . layout , this . rowHeight , this . gap ) ;
336
+ this . gridCurrentHeight = this . height ?? ( this . rowHeight === 'fit' ? clientRect . height : getGridHeight ( this . layout , this . rowHeight , this . gap ) ) ;
337
+ this . _gridItemsRenderData = layoutToRenderItems ( this . config , clientRect . width , this . gridCurrentHeight ) ;
320
338
}
321
339
322
340
render ( ) {
323
- this . renderer . setStyle ( this . elementRef . nativeElement , 'height' , `${ this . _height } px` ) ;
341
+ this . renderer . setStyle ( this . elementRef . nativeElement , 'height' , `${ this . gridCurrentHeight } px` ) ;
324
342
this . updateGridItemsStyles ( ) ;
325
343
}
326
344
@@ -439,6 +457,7 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
439
457
const { layout, draggedItemPos} = calcNewStateFunc ( gridItem , {
440
458
layout : currentLayout ,
441
459
rowHeight : this . rowHeight ,
460
+ height : this . height ,
442
461
cols : this . cols ,
443
462
preventCollision : this . preventCollision ,
444
463
gap : this . gap ,
@@ -451,11 +470,12 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
451
470
} ) ;
452
471
newLayout = layout ;
453
472
454
- this . _height = getGridHeight ( newLayout , this . rowHeight , this . gap ) ;
473
+ this . gridCurrentHeight = this . height ?? ( this . rowHeight === 'fit' ? gridElemClientRect . height : getGridHeight ( newLayout , this . rowHeight , this . gap ) )
455
474
456
475
this . _gridItemsRenderData = layoutToRenderItems ( {
457
476
cols : this . cols ,
458
477
rowHeight : this . rowHeight ,
478
+ height : this . height ,
459
479
layout : newLayout ,
460
480
preventCollision : this . preventCollision ,
461
481
gap : this . gap ,
0 commit comments