feat: added support for rowHeight = 'fit', also added Input() height

closes: katoid#1, katoid#51, katoid#58

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

@@ -6,7 +6,7 @@ import { coerceNumberProperty, NumberInput } from './coercion/number-property';
 import { KtdGridItemComponent } from './grid-item/grid-item.component';
 import { combineLatest, merge, NEVER, Observable, Observer, of, Subscription } from 'rxjs';
 import { exhaustMap, map, startWith, switchMap, takeUntil } from 'rxjs/operators';
-import { ktdGridItemDragging, ktdGridItemLayoutItemAreEqual, ktdGridItemResizing } from './utils/grid.utils';
+import { ktdGetGridItemRowHeight, ktdGridItemDragging, ktdGridItemLayoutItemAreEqual, ktdGridItemResizing } from './utils/grid.utils';
 import { compact } from './utils/react-grid-layout.utils';
 import {
     GRID_ITEM_GET_RENDER_DATA_TOKEN, KtdGridCfg, KtdGridCompactType, KtdGridItemRenderData, KtdGridLayout, KtdGridLayoutItem
@@ -49,16 +49,17 @@ function getDragResizeEventData(gridItem: KtdGridItemComponent, layout: KtdGridL
 
 function layoutToRenderItems(config: KtdGridCfg, width: number, height: number): KtdDictionary<KtdGridItemRenderData<number>> {
     const {cols, rowHeight, layout, gap} = config;
-    const widthExcludinggap = width - Math.max((gap * (cols - 1)), 0);
-    const itemWidthPerColumn = (widthExcludinggap / cols);
+    const rowHeightInPixels = rowHeight === 'fit' ? ktdGetGridItemRowHeight(layout, height, gap) : rowHeight;
+    const widthExcludingGap = width - Math.max((gap * (cols - 1)), 0);
+    const itemWidthPerColumn = (widthExcludingGap / cols);
     const renderItems: KtdDictionary<KtdGridItemRenderData<number>> = {};
     for (const item of layout) {
         renderItems[item.id] = {
             id: item.id,
-            top: item.y * rowHeight + gap * item.y,
+            top: item.y * rowHeightInPixels + gap * item.y,
             left: item.x * itemWidthPerColumn + gap * item.x,
             width: item.w * itemWidthPerColumn + gap * Math.max(item.w - 1, 0),
-            height: item.h * rowHeight + gap * Math.max(item.h - 1, 0),
+            height: item.h * rowHeightInPixels + gap * Math.max(item.h - 1, 0),
         };
     }
     return renderItems;
@@ -179,13 +180,13 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
 
     /** Row height in css pixels */
     @Input()
-    get rowHeight(): number { return this._rowHeight; }
+    get rowHeight(): number | 'fit' { return this._rowHeight; }
 
-    set rowHeight(val: number) {
-        this._rowHeight = Math.max(1, Math.round(coerceNumberProperty(val)));
+    set rowHeight(val: number | 'fit') {
+        this._rowHeight = val === 'fit' ? val : Math.max(1, Math.round(coerceNumberProperty(val)));
     }
 
-    private _rowHeight: number = 100;
+    private _rowHeight: number | 'fit' = 100;
 
     /** Number of columns  */
     @Input()
@@ -228,10 +229,24 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
 
     private _gap: number = 0;
 
+    @Input()
+    get height(): number | null {
+        return this._height;
+    }
+
+    set height(val: number | null) {
+        this._height = typeof val === 'number' ? Math.max(val, 0) : null;
+    }
+
+    /** Total height of the grid */
+    private _height: number | null = null;
+    private gridCurrentHeight: number;
+
     get config(): KtdGridCfg {
         return {
             cols: this.cols,
             rowHeight: this.rowHeight,
+            height: this.height,
             layout: this.layout,
             preventCollision: this.preventCollision,
             gap: this.gap,
@@ -244,8 +259,6 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
     /** Element that is rendered as placeholder when a grid item is being dragged */
     private placeholder: HTMLElement | null;
 
-    /** Total height of the grid */
-    private _height: number;
     private _gridItemsRenderData: KtdDictionary<KtdGridItemRenderData<number>>;
     private subscriptions: Subscription[];
 
@@ -258,6 +271,11 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
     }
 
     ngOnChanges(changes: SimpleChanges) {
+
+        if (this.rowHeight === 'fit' && this.height == null) {
+            console.warn(`KtdGridComponent: The @Input() height should not be null when using rowHeight 'fit'`);
+        }
+
         let needsCompactLayout = false;
         let needsRecalculateRenderData = false;
 
@@ -268,7 +286,7 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
         }
 
         // Check if wee need to recalculate rendering data.
-        if (needsCompactLayout || changes.rowHeight || changes.gap) {
+        if (needsCompactLayout || changes.rowHeight || changes.height || changes.gap) {
             needsRecalculateRenderData = true;
         }
 
@@ -315,12 +333,12 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
 
     calculateRenderData() {
         const clientRect = (this.elementRef.nativeElement as HTMLElement).getBoundingClientRect();
-        this._gridItemsRenderData = layoutToRenderItems(this.config, clientRect.width, clientRect.height);
-        this._height = getGridHeight(this.layout, this.rowHeight, this.gap);
+        this.gridCurrentHeight = this.height ?? (this.rowHeight === 'fit' ? clientRect.height : getGridHeight(this.layout, this.rowHeight, this.gap));
+        this._gridItemsRenderData = layoutToRenderItems(this.config, clientRect.width, this.gridCurrentHeight);
     }
 
     render() {
-        this.renderer.setStyle(this.elementRef.nativeElement, 'height', `${this._height}px`);
+        this.renderer.setStyle(this.elementRef.nativeElement, 'height', `${this.gridCurrentHeight}px`);
         this.updateGridItemsStyles();
     }
 
@@ -439,6 +457,7 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
                         const {layout, draggedItemPos} = calcNewStateFunc(gridItem, {
                             layout: currentLayout,
                             rowHeight: this.rowHeight,
+                            height: this.height,
                             cols: this.cols,
                             preventCollision: this.preventCollision,
                             gap: this.gap,
@@ -451,11 +470,12 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
                         });
                         newLayout = layout;
 
-                        this._height = getGridHeight(newLayout, this.rowHeight, this.gap);
+                        this.gridCurrentHeight = this.height ?? (this.rowHeight === 'fit' ? gridElemClientRect.height : getGridHeight(newLayout, this.rowHeight, this.gap))
 
                         this._gridItemsRenderData = layoutToRenderItems({
                             cols: this.cols,
                             rowHeight: this.rowHeight,
+                            height: this.height,
                             layout: newLayout,
                             preventCollision: this.preventCollision,
                             gap: this.gap,

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

@@ -18,7 +18,8 @@ export type KtdGridCompactType = CompactType;
 
 export interface KtdGridCfg {
     cols: number;
-    rowHeight: number; // row height in pixels
+    rowHeight: number | 'fit'; // row height in pixels
+    height: number | null;
     layout: KtdGridLayoutItem[];
     preventCollision: boolean;
     gap: number;

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

@@ -11,6 +11,14 @@ export function ktdTrackById(index: number, item: {id: string}) {
     return item.id;
 }
 
+/** Given a layout, the gridHeight and the gap return the resulting rowHeight */
+export function ktdGetGridItemRowHeight(layout: KtdGridLayout, gridHeight: number, gap: number): number {
+    const numberOfRows = layout.reduce((acc, cur) => Math.max(acc, Math.max(cur.y + cur.h, 0)), 0);
+    const gapTotalHeight = (numberOfRows - 1) * gap;
+    const gridHeightMinusGap = gridHeight - gapTotalHeight;
+    return gridHeightMinusGap / numberOfRows;
+}
+
 /**
  * Call react-grid-layout utils 'compact()' function and return the compacted layout.
  * @param layout to be compacted.
@@ -95,11 +103,15 @@ export function ktdGridItemDragging(gridItem: KtdGridItemComponent, config: KtdG
     const gridRelXPos = clientX - gridElementLeftPosition - offsetX;
     const gridRelYPos = clientY - gridElementTopPosition - offsetY;
 
+    const rowHeightInPixels = config.rowHeight === 'fit'
+        ? ktdGetGridItemRowHeight(config.layout, config.height ?? gridElemClientRect.height, config.gap)
+        : config.rowHeight;
+
     // Get layout item position
     const layoutItem: KtdGridLayoutItem = {
         ...draggingElemPrevItem,
         x: screenXToGridX(gridRelXPos , config.cols, gridElemClientRect.width, config.gap),
-        y: screenYToGridY(gridRelYPos, config.rowHeight, gridElemClientRect.height, config.gap)
+        y: screenYToGridY(gridRelYPos, rowHeightInPixels, gridElemClientRect.height, config.gap)
     };
 
     // Correct the values if they overflow, since 'moveElement' function doesn't do it
@@ -161,11 +173,15 @@ export function ktdGridItemResizing(gridItem: KtdGridItemComponent, config: KtdG
     const width = clientX + resizeElemOffsetX - (dragElemClientRect.left + scrollDifference.left);
     const height = clientY + resizeElemOffsetY - (dragElemClientRect.top + scrollDifference.top);
 
+    const rowHeightInPixels = config.rowHeight === 'fit'
+        ? ktdGetGridItemRowHeight(config.layout, config.height ?? gridElemClientRect.height, config.gap)
+        : config.rowHeight;
+
     // Get layout item grid position
     const layoutItem: KtdGridLayoutItem = {
         ...draggingElemPrevItem,
         w: screenWidthToGridWidth(width, config.cols, gridElemClientRect.width, config.gap),
-        h: screenHeightToGridHeight(height, config.rowHeight, gridElemClientRect.height, config.gap)
+        h: screenHeightToGridHeight(height, rowHeightInPixels, gridElemClientRect.height, config.gap)
     };
 
     layoutItem.w = limitNumberWithinRange(layoutItem.w, gridItem.minW ?? layoutItem.minW, gridItem.maxW ?? layoutItem.maxW);

projects/demo-app/src/app/app-routing.module.ts

@@ -26,6 +26,11 @@ const routes: Routes = [
         redirectTo: 'scroll-test',
         pathMatch: 'full'
     },
+    {
+        path: 'row-height-fit',
+        loadComponent: () => import('./row-height-fit/row-height-fit.component').then(m => m.KtdRowHeightFitComponent),
+        data: {title: 'Angular Grid Layout - Row Height Fit'}
+    },
     {
         path: '**',
         redirectTo: 'playground'

projects/demo-app/src/app/app.component.scss

@@ -1,5 +1,6 @@
 :host {
     width: 100%;
+    height: 100%;
     display: block;
     background-color: var(--ktd-background-color-step-50);
     box-sizing: border-box;

projects/demo-app/src/app/custom-handles/custom-handles.component.html

@@ -25,4 +25,5 @@ <h2 style="margin-top: 16px">Other examples: </h2>
     <a [routerLink]="['/playground']">Playground</a>
     <a [routerLink]="['/real-life-example']">Real life example</a>
     <a [routerLink]="['/scroll-test']">Scroll test</a>
+    <a [routerLink]="['/row-height-fit']">Row Height Fit</a>
 </div>

projects/demo-app/src/app/playground/playground.component.html

@@ -16,9 +16,14 @@
             <mat-label>Columns</mat-label>
             <input matInput type="number" [value]="cols + ''" (input)="onColsChange($event)">
         </mat-form-field>
-        <mat-form-field color="accent" style="width: 64px">
+        <mat-form-field color="accent" style="width: 120px">
             <mat-label>Row height</mat-label>
-            <input matInput type="number" [value]="rowHeight + ''" (input)="onRowHeightChange($event)">
+            <input matInput type="number" [value]="rowHeight + ''" style="width: 60%;" [disabled]="rowHeightFit" (input)="onRowHeightChange($event)">
+            <mat-checkbox style="position: absolute; right: 4px; bottom: 4px;" (change)="onRowHeightFitChange($event)">Fit</mat-checkbox>
+        </mat-form-field>
+        <mat-form-field color="accent" style="width: 94px">
+            <mat-label>Grid height</mat-label>
+            <input matInput type="number" [value]="gridHeight === null ? null : gridHeight + ''" [disabled]="!rowHeightFit" (input)="onGridHeightChange($event)">
         </mat-form-field>
         <mat-form-field color="accent" style="width: 128px">
             <mat-label>Drag Threshold</mat-label>
@@ -80,7 +85,8 @@
 
     <div class="grid-container">
         <ktd-grid [cols]="cols"
-                  [rowHeight]="rowHeight"
+                  [height]="rowHeightFit && gridHeight ? gridHeight : null"
+                  [rowHeight]="rowHeightFit ? 'fit' : rowHeight"
                   [layout]="layout"
                   [compactType]="compactType"
                   [preventCollision]="preventCollision"
@@ -118,4 +124,5 @@ <h2 style="margin-top: 16px">Other examples: </h2>
     <a [routerLink]="['/custom-handles']">Custom handles</a>
     <a [routerLink]="['/real-life-example']">Real life example</a>
     <a [routerLink]="['/scroll-test']">Scroll test</a>
+    <a [routerLink]="['/row-height-fit']">Row Height Fit</a>
 </div>

projects/demo-app/src/app/playground/playground.component.ts

@@ -8,6 +8,7 @@ import {
 import { ktdArrayRemoveItem } from '../utils';
 import { DOCUMENT } from '@angular/common';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
+import { MatCheckboxChange } from '@angular/material/checkbox';
 
 @Component({
     selector: 'ktd-playground',
@@ -20,6 +21,8 @@ export class KtdPlaygroundComponent implements OnInit, OnDestroy {
 
     cols = 12;
     rowHeight = 50;
+    rowHeightFit = false;
+    gridHeight: null | number = null;
     compactType: 'vertical' | 'horizontal' | null = 'vertical';
     layout: KtdGridLayout = [
         {id: '0', x: 5, y: 0, w: 2, h: 3},
@@ -154,6 +157,14 @@ export class KtdPlaygroundComponent implements OnInit, OnDestroy {
         this.rowHeight = coerceNumberProperty((event.target as HTMLInputElement).value);
     }
 
+    onRowHeightFitChange(change: MatCheckboxChange) {
+        this.rowHeightFit = change.checked;
+    }
+
+    onGridHeightChange(event: Event) {
+        this.gridHeight = coerceNumberProperty((event.target as HTMLInputElement).value);
+    }
+
     onDragStartThresholdChange(event: Event) {
         this.dragStartThreshold = coerceNumberProperty((event.target as HTMLInputElement).value);
     }

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

@@ -154,6 +154,7 @@ <h2 style="margin-top: 16px">Other examples: </h2>
     <a [routerLink]="['/playground']">Playground</a>
     <a [routerLink]="['/custom-handles']">Custom handles</a>
     <a [routerLink]="['/scroll-test']">Scroll test</a>
+    <a [routerLink]="['/row-height-fit']">Row Height Fit</a>
 </div>
 
 

projects/demo-app/src/app/row-height-fit/row-height-fit.component.html

@@ -0,0 +1,31 @@
+<div class="grid-container" #gridContainer>
+    <ktd-grid [cols]="cols"
+              [height]="gridHeight"
+              [rowHeight]="'fit'"
+              [layout]="layout"
+              [compactType]="compactType"
+              [preventCollision]="preventCollision"
+              [gap]="gap">
+        <ktd-grid-item *ngFor="let item of layout; trackBy:trackById"
+                       [id]="item.id"
+                       [draggable]="!disableDrag"
+                       [resizable]="!disableResize">
+            <div class="grid-item-content">{{item.id}}</div>
+            <div class="grid-item-remove-handle"
+                 *ngIf="!disableRemove"
+                 (mousedown)="stopEventPropagation($event)"
+                 (click)="removeItem(item.id)">
+            </div>
+        </ktd-grid-item>
+    </ktd-grid>
+</div>
+
+<div class="footer-container">
+    <h2 style="margin-top: 16px">Other examples: </h2>
+    <div style="display: flex; flex-direction: column">
+        <a [routerLink]="['/playground']">Playground</a>
+        <a [routerLink]="['/custom-handles']">Custom handles</a>
+        <a [routerLink]="['/real-life-example']">Real life example</a>
+        <a [routerLink]="['/scroll-test']">Scroll test</a>
+    </div>
+</div>

projects/demo-app/src/app/row-height-fit/row-height-fit.component.scss

@@ -0,0 +1,67 @@
+:host {
+    width: 100%;
+    height: calc(100% - 65px);
+    padding: 12px 12px;
+    box-sizing: border-box;
+
+    display: flex;
+    flex-direction: column;
+
+
+    .grid-container {
+        flex: 1;
+        min-height: 0; // Let it shrink
+        box-sizing: border-box;
+        border: 1px solid var(--ktd-border-color);
+        background-color: var(--ktd-background-color);
+        border-radius: 2px;
+    }
+
+    ktd-grid-item {
+        color: #121212;
+    }
+
+    ktd-grid {
+        transition: height 500ms ease;
+    }
+
+    .grid-item-content {
+        box-sizing: border-box;
+        background: #ccc;
+        border: 1px solid;
+        width: 100%;
+        height: 100%;
+        user-select: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .grid-item-remove-handle {
+        position: absolute;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        top: 0;
+        right: 0;
+
+        &::after {
+            content: 'x';
+            color: #121212;
+            font-size: 16px;
+            font-weight: 300;
+            font-family: Arial, sans-serif;
+        }
+    }
+
+    // Add custom drag mouse styles
+    ktd-grid-item {
+        cursor: grab;
+
+        &.ktd-grid-item-dragging {
+            cursor: grabbing;
+        }
+    }
+}