Flexible item size - request for feedback

.gitignore

@@ -33,6 +33,7 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
+src/app/angular2gridster
 
 # System Files
 .DS_Store

README.md

@@ -158,6 +158,15 @@ npm i
 npm start
 ```
 
+Windows:
+In CMD run `MKLINK /D .\src\app\angular2gridster D:\your\absolute\path\to\angular2gridster\projects\angular2gridster\src\lib` (make sure the second path is the correct absolute for your environment).
+
+Then run the following:
+```shell
+    npm install
+    ng serve
+```
+
 Go to: http://localhost:4200/
 
 ## Compilation problems

package.json

@@ -40,25 +40,25 @@
   },
   "homepage": "https://github.com/swiety85/angular2gridster#readme",
   "dependencies": {
-    "@angular/common": "^6.0.3",
-    "@angular/core": "^6.0.3",
-    "@angular/compiler": "^6.0.3",
-    "@angular/animations": "^6.0.3",
-    "@angular/forms": "^6.0.3",
-    "@angular/http": "^6.0.3",
-    "@angular/platform-browser": "^6.0.3",
-    "@angular/platform-browser-dynamic": "^6.0.3",
-    "@angular/router": "^6.0.3",
+    "@angular/common": "4.3.6",
+    "@angular/core": "4.3.6",
+    "@angular/compiler": "4.3.6",
+    "@angular/animations": "4.3.6",
+    "@angular/forms": "4.3.6",
+    "@angular/http": "4.3.6",
+    "@angular/platform-browser": "4.3.6",
+    "@angular/platform-browser-dynamic": "4.3.6",
+    "@angular/router": "4.3.6",
     "core-js": "^2.5.4",
-    "rxjs": "^6.0.0",
+    "rxjs": "^5.4.3",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.6.5",
     "@angular-devkit/build-ng-packagr": "~0.6.5",
-    "@angular/cli": "~6.0.7",
-    "@angular/compiler-cli": "^6.0.3",
-    "@angular/language-service": "^6.0.3",
+    "@angular/cli": "~1.7.4",
+    "@angular/compiler-cli": "4.3.6",
+    "@angular/language-service": "4.3.6",
     "@types/jasmine": "~2.8.6",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",

projects/angular2gridster/src/lib/GridsterOptions.ts

@@ -1,4 +1,4 @@
-import { Observable, of, fromEvent, pipe, merge } from 'rxjs';
+import { Observable } from 'rxjs';
 import { debounceTime, map, distinctUntilChanged } from 'rxjs/operators';
 
 import { IGridsterOptions } from './IGridsterOptions';
@@ -35,7 +35,7 @@ export class GridsterOptions {
     responsiveOptions: Array<IGridsterOptions> = [];
     basicOptions: IGridsterOptions;
 
-    breakpointsMap = {
+    breakpointsMap: {[index: string]: number} = {
         sm: 576, // Small devices
         md: 768, // Medium devices
         lg: 992, // Large devices
@@ -47,9 +47,9 @@ export class GridsterOptions {
 
         this.responsiveOptions = this.extendResponsiveOptions(config.responsiveOptions || []);
 
-        this.change = merge(
-                of(this.getOptionsByWidth(document.documentElement.clientWidth)),
-                fromEvent(window, 'resize').pipe(
+        this.change = Observable.merge(
+                Observable.of(this.getOptionsByWidth(document.documentElement.clientWidth)),
+                Observable.fromEvent(window, 'resize').pipe(
                     debounceTime(config.responsiveDebounce || 0),
                     map((event: Event) => this.getOptionsByWidth(document.documentElement.clientWidth))
                 )

projects/angular2gridster/src/lib/gridList/GridListItem.ts

@@ -82,7 +82,6 @@ export class GridListItem {
     get h () {
         const item = this.getItem();
         const breakpoint = item.gridster ? item.gridster.options.breakpoint : null;
-
         return this.getValueH(breakpoint);
     }
     set h (value: number) {
@@ -127,6 +126,18 @@ export class GridListItem {
         return item.positionY;
     }
 
+    get variableHeight(): boolean {
+        return this.getItem().variableHeight;
+    }
+
+    get contentHeight(): number {
+        const contentHeight = this.itemComponent.contentWrapper.nativeElement.offsetheight || 0;
+        const childHeight = this.$element.firstChild.offsetHeight || 0;
+        return Math.max(contentHeight, childHeight);
+    }
+
+    constructor () {}
+
     public setFromGridsterItem (item: GridsterItemComponent): GridListItem {
         if (this.isItemSet()) {
             throw new Error('GridListItem is already set.');
@@ -166,7 +177,7 @@ export class GridListItem {
         });
     }
 
-    public copyForBreakpoint(breakpoint?) {
+    public copyForBreakpoint(breakpoint?: string) {
         const itemCopy = new GridListItem();
 
         return itemCopy.setFromObjectLiteral({
@@ -181,83 +192,83 @@ export class GridListItem {
         });
     }
 
-    public getValueX(breakpoint?) {
+    public getValueX(breakpoint?: string) {
         const item = this.getItem();
 
         return item[this.getXProperty(breakpoint)];
     }
 
-    public getValueY(breakpoint?) {
+    public getValueY(breakpoint?: string) {
         const item = this.getItem();
 
         return item[this.getYProperty(breakpoint)];
     }
 
-    public getValueW(breakpoint?) {
+    public getValueW(breakpoint?: string) {
         const item = this.getItem();
 
         return item[this.getWProperty(breakpoint)] || 1;
     }
 
-    public getValueH(breakpoint?) {
+    public getValueH(breakpoint?: string) {
         const item = this.getItem();
 
         return item[this.getHProperty(breakpoint)] || 1;
     }
 
-    public setValueX(value: number, breakpoint?) {
+    public setValueX(value: number, breakpoint?: string) {
         const item = this.getItem();
 
         item[this.getXProperty(breakpoint)] = value;
     }
 
-    public setValueY(value: number, breakpoint?) {
+    public setValueY(value: number, breakpoint?: string) {
         const item = this.getItem();
 
         item[this.getYProperty(breakpoint)] = value;
     }
 
-    public setValueW(value: number, breakpoint?) {
+    public setValueW(value: number, breakpoint?: string) {
         const item = this.getItem();
 
         item[this.getWProperty(breakpoint)] = value;
     }
 
-    public setValueH(value: number, breakpoint?) {
+    public setValueH(value: number, breakpoint?: string) {
         const item = this.getItem();
 
         item[this.getHProperty(breakpoint)] = value;
     }
 
-    public triggerChangeX(breakpoint?) {
+    public triggerChangeX(breakpoint?: string) {
         const item = this.itemComponent;
         if (item) {
-            item[this.getXProperty(breakpoint) + 'Change'].emit(this.getValueX(breakpoint));
+            (<any>item)[this.getXProperty(breakpoint) + 'Change'].emit(this.getValueX(breakpoint));
         }
     }
 
-    public triggerChangeY(breakpoint?) {
+    public triggerChangeY(breakpoint?: string) {
         const item = this.itemComponent;
         if (item) {
-            item[this.getYProperty(breakpoint) + 'Change'].emit(this.getValueY(breakpoint));
+            (<any>item)[this.getYProperty(breakpoint) + 'Change'].emit(this.getValueY(breakpoint));
         }
     }
 
-    public triggerChangeW(breakpoint?) {
+    public triggerChangeW(breakpoint?: string) {
         const item = this.itemComponent;
         if (item) {
-            item[this.getWProperty(breakpoint) + 'Change'].emit(this.getValueW(breakpoint));
+            (<any>item)[this.getWProperty(breakpoint) + 'Change'].emit(this.getValueW(breakpoint));
         }
     }
 
-    public triggerChangeH(breakpoint?) {
+    public triggerChangeH(breakpoint?: string) {
         const item = this.itemComponent;
         if (item) {
-            item[this.getHProperty(breakpoint) + 'Change'].emit(this.getValueH(breakpoint));
+            (<any>item)[this.getHProperty(breakpoint) + 'Change'].emit(this.getValueH(breakpoint));
         }
     }
 
-    public hasPositions(breakpoint?) {
+    public hasPositions(breakpoint?: string) {
         const x = this.getValueX(breakpoint);
         const y = this.getValueY(breakpoint);
 
@@ -278,9 +289,18 @@ export class GridListItem {
         }
         gridster = gridster || this.itemComponent.gridster;
 
+        let top;
+        if (gridster.gridList) {
+            const rowHeights = gridster.getRowHeights();
+            const rowTops = gridster.getRowTops(rowHeights);
+            top = rowTops[this.y];
+        } else {
+            top = this.y * gridster.cellHeight;
+        }
+
         return {
             left: this.x * gridster.cellWidth,
-            top: this.y * gridster.cellHeight
+            top: top
         };
     }
 
@@ -297,8 +317,14 @@ export class GridListItem {
         }
         gridster = gridster || this.itemComponent.gridster;
 
-        let width = this.getValueW(gridster.options.breakpoint);
-        let height = this.getValueH(gridster.options.breakpoint);
+        let rowHeights, rowTops;
+        if (gridster.gridList) {
+            rowHeights = gridster.getRowHeights();
+            rowTops = gridster.getRowTops(rowHeights);
+        }
+
+        let width = this.w;
+        let height = this.h;
 
         if (gridster.options.direction === 'vertical') {
             width = Math.min(width, gridster.options.lanes);
@@ -307,9 +333,19 @@ export class GridListItem {
             height = Math.min(height, gridster.options.lanes);
         }
 
+        let pixelHeight;
+        if (rowHeights) {
+            pixelHeight = 0;
+            for (let i = this.y; i < this.y + height; i++) {
+                pixelHeight += rowHeights[i];
+            }
+        } else {
+            pixelHeight = height * gridster.cellHeight;
+        }
+
         return {
             width: width * gridster.cellWidth,
-            height: height * gridster.cellHeight
+            height: pixelHeight
         };
     }
 
@@ -333,7 +369,7 @@ export class GridListItem {
 
     private getWProperty(breakpoint?: string) {
         if (this.itemPrototype) {
-            return this.itemPrototype[GridListItem.W_PROPERTY_MAP[breakpoint]] ?
+            return (<any>this.itemPrototype)[GridListItem.W_PROPERTY_MAP[breakpoint]] ?
                 GridListItem.W_PROPERTY_MAP[breakpoint] : 'w';
         }
 
@@ -349,7 +385,7 @@ export class GridListItem {
 
     private getHProperty(breakpoint?: string) {
         if (this.itemPrototype) {
-            return this.itemPrototype[GridListItem.H_PROPERTY_MAP[breakpoint]] ?
+            return (<any>this.itemPrototype)[GridListItem.H_PROPERTY_MAP[breakpoint]] ?
                 GridListItem.H_PROPERTY_MAP[breakpoint] : 'w';
         }