From 6ec4430a46cc1e35e7c3b67edc8ed4e21053bff5 Mon Sep 17 00:00:00 2001 From: Blackbaud-StewartStephens Date: Thu, 19 Apr 2018 11:18:15 -0400 Subject: [PATCH 01/20] add windows demo building instructions --- README.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/README.md b/README.md index 5426ffb..66a0308 100644 --- a/README.md +++ b/README.md @@ -149,6 +149,19 @@ Lunch demo app: npm run serve-demo ``` +Windows: +In CMD run `MKLINK /D .\demo\src\app\gridster D:\Products\git\angular2gridster\src` (make sure the second path is the correct absolute for your environment) +Then run the following +```shell + cd angular2gridster + npm install + cd demo + npm install + cd .. + npm run install-demo + npm run serve-demo +``` + Go to: http://localhost:4200/ ## Compilation problems From ed782a252b0af8d1b8e4fde0ee67b3303f55acca Mon Sep 17 00:00:00 2001 From: Blackbaud-StewartStephens Date: Thu, 19 Apr 2018 15:40:51 -0400 Subject: [PATCH 02/20] variable height basics --- README.md | 5 ++-- demo/src/app/app.component.css | 17 +++++++---- demo/src/app/app.component.html | 13 ++++++++- demo/src/app/app.component.ts | 19 +++++++++---- src/gridList/GridListItem.ts | 28 ++++++++++++++++--- src/gridster-item/gridster-item.component.ts | 24 ++++++++++++++-- .../gridster-item-prototype.directive.ts | 2 ++ 7 files changed, 87 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 66a0308..4af12a6 100644 --- a/README.md +++ b/README.md @@ -150,8 +150,9 @@ Lunch demo app: ``` Windows: -In CMD run `MKLINK /D .\demo\src\app\gridster D:\Products\git\angular2gridster\src` (make sure the second path is the correct absolute for your environment) -Then run the following +In CMD run `MKLINK /D .\demo\src\app\gridster D:\Products\git\angular2gridster\src` (make sure the second path is the correct absolute for your environment). + +Then run the following: ```shell cd angular2gridster npm install diff --git a/demo/src/app/app.component.css b/demo/src/app/app.component.css index 41abc00..50dbd28 100644 --- a/demo/src/app/app.component.css +++ b/demo/src/app/app.component.css @@ -64,7 +64,7 @@ h1 { .panel-body { overflow: auto; padding: 0 10px 10px; - position: absolute; + /* position: absolute; */ top: 37px; bottom: 0; left: 0; @@ -123,11 +123,11 @@ h1 { .gridster-item-inner { position: absolute; background: #fff; - border: 1px solid transparent; - top: 5px; - bottom: 5px; - left: 5px; - right: 5px; + /* border: 1px solid transparent; */ + top: 0; + bottom: 0; + left: 0; + right: 0; -webkit-transition: background 3s; transition: background 3s; border-radius: 3px; @@ -137,4 +137,9 @@ h1 { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24), 0 2px 4px rgba(0, 0, 0, 0.48); top: -3px; bottom: 13px; +} + +.gridster-content-wrapper { + margin: 5px; + border: 1px solid transparent; } \ No newline at end of file diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html index 496a88c..67dc28d 100644 --- a/demo/src/app/app.component.html +++ b/demo/src/app/app.component.html @@ -104,13 +104,14 @@
New widget
[(xLg)]="widget.xLg" [(yLg)]="widget.yLg" [(xXl)]="widget.xXl" [(yXl)]="widget.yXl" [(w)]="widget.w" [(h)]="widget.h" + [variableHeight]="widget.variableHeight" (change)="itemChange($event, gridster1)">
{{ widget.title }}
-
+

{{ widget.title }}
+ @@ -133,6 +137,13 @@
{{ widget.title }}

{{ widget | json }}
+ + + +
+ {{ content }} +
+
diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts index 21cbcc9..15fed3b 100644 --- a/demo/src/app/app.component.ts +++ b/demo/src/app/app.component.ts @@ -91,34 +91,41 @@ export class AppComponent implements OnInit { widgets: Array = [ { x: 0, y: 0, - w: 1, h: 2, + w: 1, h: 1, dragAndDrop: true, resizable: true, - title: 'Basic form inputs 1' + title: 'Basic form inputs 1', + variableHeight: true, + contents: [] }, { x: 1, y: 0, w: 3, h: 1, dragAndDrop: true, resizable: true, - title: 'Basic form inputs 2' + title: 'Basic form inputs 2', + variableHeight: true, + contents: [] }, { x: 1, y: 1, w: 2, h: 1, dragAndDrop: true, resizable: true, - title: 'Basic form inputs 3' + title: 'Basic form inputs 3', + contents: [] }, { x: 3, y: 1, w: 1, h: 2, dragAndDrop: true, resizable: true, - title: 'Basic form inputs 4' + title: 'Basic form inputs 4', + contents: [] }, { w: 1, h: 2, dragAndDrop: true, resizable: true, - title: 'Basic form inputs x' + title: 'Basic form inputs x', + contents: [] } ]; diff --git a/src/gridList/GridListItem.ts b/src/gridList/GridListItem.ts index c107665..e2d2821 100644 --- a/src/gridList/GridListItem.ts +++ b/src/gridList/GridListItem.ts @@ -62,9 +62,11 @@ export class GridListItem { } get h () { - const item = this.getItem(); - - return item.h; + if (!this.variableHeight) { + return this.getItem().h; + } else { + return Math.ceil(this.itemComponent.contentWrapper.nativeElement.offsetHeight / this.itemComponent.gridster.cellHeight); + } } set h (value: number) { this.getItem().h = value; @@ -105,6 +107,16 @@ export class GridListItem { return item.positionY; } + get variableHeight(): boolean { + const item = this.itemComponent || this.itemPrototype; + + if (!item) { + return undefined; + } + + return item.variableHeight; + } + constructor () {} public setFromGridsterItem (item: GridsterItemComponent): GridListItem { @@ -250,9 +262,17 @@ export class GridListItem { height = Math.min(this.h, gridster.options.lanes); } + let pixelHeight; + if (this.variableHeight) { + pixelHeight = this.itemComponent.contentWrapper.nativeElement.offsetHeight; + } else { + pixelHeight = height * gridster.cellHeight; + } + return { width: width * gridster.cellWidth, - height: height * gridster.cellHeight + // height: height * gridster.cellHeight + height: pixelHeight }; } diff --git a/src/gridster-item/gridster-item.component.ts b/src/gridster-item/gridster-item.component.ts index 922ce5b..97b4de6 100644 --- a/src/gridster-item/gridster-item.component.ts +++ b/src/gridster-item/gridster-item.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, ElementRef, Inject, Host, Input, Output, EventEmitter, SimpleChanges, OnChanges, OnDestroy, HostBinding, - ChangeDetectionStrategy, AfterViewInit, NgZone, ViewEncapsulation } from '@angular/core'; + ChangeDetectionStrategy, AfterViewInit, NgZone, ViewEncapsulation, ViewChild } from '@angular/core'; import { Subscription } from 'rxjs/Subscription'; import { GridsterService } from '../gridster.service'; @@ -14,7 +14,9 @@ import {utils} from '../utils/utils'; @Component({ selector: 'gridster-item', template: `
- + + +
@@ -176,6 +178,10 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit, @Input() options: any = {}; + @Input() variableHeight: boolean = false; + + @ViewChild('contentWrapper') contentWrapper: ElementRef; + autoSize: boolean; @HostBinding('class.is-dragging') isDragging = false; @@ -263,6 +269,20 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit, if (this.gridster.options.resizable && this.item.resizable) { this.enableResizable(); } + + if (this.variableHeight) { + let lastH: number; + let observer = new MutationObserver((mutations) => { + let h = this.item.h; + if (h !== lastH) { + this.gridster.gridList.resizeItem(this.item, { w: this.w, h: this.h }); + this.gridster.applyPositionToItems(); + } + lastH = h; + this.item.applySize(this.gridster); + }); + observer.observe(this.$element, { childList: true, subtree: true }); + } } ngOnChanges(changes: SimpleChanges) { diff --git a/src/gridster-prototype/gridster-item-prototype.directive.ts b/src/gridster-prototype/gridster-item-prototype.directive.ts index 7f1518c..b8ac6b8 100644 --- a/src/gridster-prototype/gridster-item-prototype.directive.ts +++ b/src/gridster-prototype/gridster-item-prototype.directive.ts @@ -34,6 +34,8 @@ export class GridsterItemPrototypeDirective implements OnInit, OnDestroy { @Input() w: number; @Input() h: number; + @Input() variableHeight: boolean = false; + positionX: number; positionY: number; From 6007a4d0bb5115bf3174e4795da6cf3ed36230ff Mon Sep 17 00:00:00 2001 From: Blackbaud-StewartStephens Date: Thu, 19 Apr 2018 15:58:26 -0400 Subject: [PATCH 03/20] correct initial variable height stuff --- src/gridster-item/gridster-item.component.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/gridster-item/gridster-item.component.ts b/src/gridster-item/gridster-item.component.ts index 97b4de6..130ede3 100644 --- a/src/gridster-item/gridster-item.component.ts +++ b/src/gridster-item/gridster-item.component.ts @@ -272,16 +272,21 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit, if (this.variableHeight) { let lastH: number; + let lastOffsetHeight: number; let observer = new MutationObserver((mutations) => { let h = this.item.h; + let offsetHeight = this.contentWrapper.nativeElement.offsetHeight; if (h !== lastH) { this.gridster.gridList.resizeItem(this.item, { w: this.w, h: this.h }); this.gridster.applyPositionToItems(); + lastH = h; + } + if (offsetHeight !== lastOffsetHeight) { + this.item.applySize(); + lastOffsetHeight = offsetHeight; } - lastH = h; - this.item.applySize(this.gridster); }); - observer.observe(this.$element, { childList: true, subtree: true }); + observer.observe(this.$element, { childList: true, subtree: true, attributes: true }); } } From f47fb8dc8a396f716ca4cf8fa519076871d82af2 Mon Sep 17 00:00:00 2001 From: Blackbaud-StewartStephens Date: Fri, 20 Apr 2018 10:25:01 -0400 Subject: [PATCH 04/20] variable height modifying via row pixel height poc --- demo/src/app/app.component.html | 1 + demo/src/app/app.component.ts | 2 + src/gridList/GridListItem.ts | 56 +++++++++++++++++-- src/gridList/gridList.ts | 1 - src/gridster-item/gridster-item.component.ts | 51 ++++++++++++----- .../gridster-item-prototype.directive.ts | 1 + src/gridster.service.ts | 30 ++++++++++ 7 files changed, 121 insertions(+), 21 deletions(-) diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html index 67dc28d..9e5031b 100644 --- a/demo/src/app/app.component.html +++ b/demo/src/app/app.component.html @@ -105,6 +105,7 @@
New widget
[(xXl)]="widget.xXl" [(yXl)]="widget.yXl" [(w)]="widget.w" [(h)]="widget.h" [variableHeight]="widget.variableHeight" + [variableHeightContainToRow]="widget.variableHeightContainToRow" (change)="itemChange($event, gridster1)">
diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts index 15fed3b..2d60197 100644 --- a/demo/src/app/app.component.ts +++ b/demo/src/app/app.component.ts @@ -111,6 +111,8 @@ export class AppComponent implements OnInit { dragAndDrop: true, resizable: true, title: 'Basic form inputs 3', + variableHeight: true, + variableHeightContainToRow: true, contents: [] }, { diff --git a/src/gridList/GridListItem.ts b/src/gridList/GridListItem.ts index e2d2821..c009c4d 100644 --- a/src/gridList/GridListItem.ts +++ b/src/gridList/GridListItem.ts @@ -62,10 +62,25 @@ export class GridListItem { } get h () { - if (!this.variableHeight) { + if (this.variableHeight && this.variableHeightContainToRow) { + return 1; + } else if (!this.variableHeight) { return this.getItem().h; } else { - return Math.ceil(this.itemComponent.contentWrapper.nativeElement.offsetHeight / this.itemComponent.gridster.cellHeight); + if (this.itemComponent.gridster.gridList) { + let rowHeights = this.itemComponent.gridster.getRowHeights(); + let offsetHeight = this.itemComponent.contentWrapper.nativeElement.offsetHeight; + let h = 0; + let row = this.y; + while (offsetHeight > 0) { + offsetHeight -= rowHeights[row]; + h++; + row++; + } + return h; + } else { + return 1; + } } } set h (value: number) { @@ -117,6 +132,16 @@ export class GridListItem { return item.variableHeight; } + get variableHeightContainToRow(): boolean { + const item = this.itemComponent || this.itemPrototype; + + if (!item) { + return undefined; + } + + return item.variableHeightContainToRow; + } + constructor () {} public setFromGridsterItem (item: GridsterItemComponent): GridListItem { @@ -233,9 +258,18 @@ export class GridListItem { } gridster = gridster || this.itemComponent.gridster; + let top; + if (gridster.gridList) { + let rowHeights = gridster.getRowHeights(); + let 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 }; } @@ -252,6 +286,12 @@ export class GridListItem { } gridster = gridster || this.itemComponent.gridster; + let rowHeights, rowTops; + if (gridster.gridList) { + rowHeights = gridster.getRowHeights(); + rowTops = gridster.getRowTops(rowHeights); + } + let width = this.w; let height = this.h; @@ -266,12 +306,18 @@ export class GridListItem { if (this.variableHeight) { pixelHeight = this.itemComponent.contentWrapper.nativeElement.offsetHeight; } else { - pixelHeight = height * gridster.cellHeight; + 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 }; } diff --git a/src/gridList/gridList.ts b/src/gridList/gridList.ts index febfc29..6c4622a 100644 --- a/src/gridList/gridList.ts +++ b/src/gridList/gridList.ts @@ -874,7 +874,6 @@ export class GridList { * transformations. */ private getItemPosition(item: any) { - if (this.options.direction === 'horizontal') { return item; } else { diff --git a/src/gridster-item/gridster-item.component.ts b/src/gridster-item/gridster-item.component.ts index 130ede3..fb1070e 100644 --- a/src/gridster-item/gridster-item.component.ts +++ b/src/gridster-item/gridster-item.component.ts @@ -179,6 +179,7 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit, @Input() options: any = {}; @Input() variableHeight: boolean = false; + @Input() variableHeightContainToRow: boolean = false; @ViewChild('contentWrapper') contentWrapper: ElementRef; @@ -271,22 +272,42 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit, } if (this.variableHeight) { - let lastH: number; - let lastOffsetHeight: number; - let observer = new MutationObserver((mutations) => { - let h = this.item.h; - let offsetHeight = this.contentWrapper.nativeElement.offsetHeight; - if (h !== lastH) { - this.gridster.gridList.resizeItem(this.item, { w: this.w, h: this.h }); - this.gridster.applyPositionToItems(); - lastH = h; - } - if (offsetHeight !== lastOffsetHeight) { - this.item.applySize(); + if (this.variableHeightContainToRow) { + let readySubscription = this.gridster.gridsterComponent.ready.subscribe(() => { + this.gridster.gridList.resizeItem(this.item, { w: this.w, h: 1 }); + readySubscription.unsubscribe(); + }); + let lastOffsetHeight: number; + let adjusting = false; + let observer = new MutationObserver((mutations) => { + let offsetHeight = this.contentWrapper.nativeElement.offsetHeight; + if (offsetHeight !== lastOffsetHeight) { + for (let item of this.gridster.items) { + item.applySize(); + item.applyPosition(); + } + } lastOffsetHeight = offsetHeight; - } - }); - observer.observe(this.$element, { childList: true, subtree: true, attributes: true }); + }); + observer.observe(this.$element, { childList: true, subtree: true, attributes: true }); + } else { + let lastH: number; + let lastOffsetHeight: number; + let observer = new MutationObserver((mutations) => { + let h = this.item.h; + let offsetHeight = this.contentWrapper.nativeElement.offsetHeight; + if (h !== lastH) { + this.gridster.gridList.resizeItem(this.item, { w: this.w, h: this.h }); + this.gridster.applyPositionToItems(); + lastH = h; + } + if (offsetHeight !== lastOffsetHeight) { + this.item.applySize(); + lastOffsetHeight = offsetHeight; + } + }); + observer.observe(this.$element, { childList: true, subtree: true, attributes: true }); + } } } diff --git a/src/gridster-prototype/gridster-item-prototype.directive.ts b/src/gridster-prototype/gridster-item-prototype.directive.ts index b8ac6b8..524bd65 100644 --- a/src/gridster-prototype/gridster-item-prototype.directive.ts +++ b/src/gridster-prototype/gridster-item-prototype.directive.ts @@ -35,6 +35,7 @@ export class GridsterItemPrototypeDirective implements OnInit, OnDestroy { @Input() h: number; @Input() variableHeight: boolean = false; + @Input() variableHeightContainToRow: boolean = false; positionX: number; positionY: number; diff --git a/src/gridster.service.ts b/src/gridster.service.ts index e47774b..3da872f 100644 --- a/src/gridster.service.ts +++ b/src/gridster.service.ts @@ -318,6 +318,36 @@ export class GridsterService { } } + getRowHeights(): number[] { + let result = []; + for (let row = 0; row < this.gridList.grid.length; row++) { + result.push(0); + for (let column = 0; column < this.gridList.grid[row].length; column++) { + let item = this.gridList.grid[row][column]; + if (item) { + let height = item.itemComponent.contentWrapper.nativeElement.offsetHeight; + if (item.variableHeight && item.variableHeightContainToRow && height > result[row]) { + result[row] = height; + } + } + } + if (result[row] === 0) { + result[row] = this.cellHeight; + } + } + return result; + } + + getRowTops(rowHeights: number[]): number[] { + let result = []; + let lastHeight = 0; + for (let rowHeight of rowHeights) { + result.push(lastHeight); + lastHeight += rowHeight; + } + return result; + } + refreshLines() { const gridsterContainer = this.gridsterComponent.$element.firstChild; From d8a7483289aada04c235074250deaa3795c0cf6d Mon Sep 17 00:00:00 2001 From: Blackbaud-StewartStephens Date: Thu, 5 Jul 2018 09:47:21 -0400 Subject: [PATCH 05/20] get demo working --- .gitignore | 1 + README.md | 2 +- src/app/app.component.ts | 8 +++----- src/app/app.module.ts | 2 +- tsconfig.json | 6 +++++- 5 files changed, 11 insertions(+), 8 deletions(-) diff --git a/.gitignore b/.gitignore index ee5c9d8..2174627 100644 --- a/.gitignore +++ b/.gitignore @@ -33,6 +33,7 @@ npm-debug.log yarn-error.log testem.log /typings +src/app/angular2gridster # System Files .DS_Store diff --git a/README.md b/README.md index 886a8da..27df42b 100644 --- a/README.md +++ b/README.md @@ -159,7 +159,7 @@ npm start ``` Windows: -In CMD run `MKLINK /D .\demo\src\app\gridster D:\Products\git\angular2gridster\src` (make sure the second path is the correct absolute for your environment). +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 diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 9399401..f43f4f6 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,5 +1,7 @@ import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; -import { GridsterComponent, IGridsterOptions, IGridsterDraggableOptions } from 'angular2gridster'; +import { GridsterComponent } from './angular2gridster/gridster.component'; +import { IGridsterOptions } from './angular2gridster/IGridsterOptions'; +import { IGridsterDraggableOptions } from './angular2gridster/IGridsterDraggableOptions'; @Component({ selector: 'demo-root', @@ -104,15 +106,11 @@ export class AppComponent implements OnInit { widgets: Array = [ { x: 0, y: 0, -<<<<<<< HEAD:demo/src/app/app.component.ts - w: 1, h: 1, -======= w: 1, h: 2, wSm: 1, hSm: 1, wMd: 1, hMd: 2, wLg: 1, hLg: 1, wXl: 2, hXl: 2, ->>>>>>> master:src/app/app.component.ts dragAndDrop: true, resizable: true, title: 'Basic form inputs 1', diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 48e8983..8006a9b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,4 +1,4 @@ -import { GridsterModule } from 'angular2gridster'; +import { GridsterModule } from './angular2gridster/gridster.module'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { NgModule } from '@angular/core'; diff --git a/tsconfig.json b/tsconfig.json index 6a93c58..b7fe8a6 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,5 +21,9 @@ "dist/angular2gridster" ] } - } + }, + "include": [ + "src/**/*", + "projects/**/*" + ] } From 0e61a8479bca48b796c51c7e0f061c4b05c750da Mon Sep 17 00:00:00 2001 From: Blackbaud-StewartStephens Date: Thu, 5 Jul 2018 09:48:17 -0400 Subject: [PATCH 06/20] update readme --- README.md | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/README.md b/README.md index 27df42b..aefa089 100644 --- a/README.md +++ b/README.md @@ -163,13 +163,8 @@ In CMD run `MKLINK /D .\src\app\angular2gridster D:\your\absolute\path\to\angula Then run the following: ```shell - cd angular2gridster npm install - cd demo - npm install - cd .. - npm run install-demo - npm run serve-demo + ng serve ``` Go to: http://localhost:4200/ From 9fcbccac622d8e078785643d5dd8f4029fa45ae9 Mon Sep 17 00:00:00 2001 From: Blackbaud-StewartStephens Date: Thu, 5 Jul 2018 14:52:03 -0400 Subject: [PATCH 07/20] kind of fix demo --- .../src/lib/gridster-item/gridster-item.component.ts | 4 ++-- src/app/app.component.css | 1 - src/app/app.component.html | 2 ++ 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/projects/angular2gridster/src/lib/gridster-item/gridster-item.component.ts b/projects/angular2gridster/src/lib/gridster-item/gridster-item.component.ts index 14b0616..98b3dc9 100644 --- a/projects/angular2gridster/src/lib/gridster-item/gridster-item.component.ts +++ b/projects/angular2gridster/src/lib/gridster-item/gridster-item.component.ts @@ -200,8 +200,8 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit, @Input() options: any = {}; - @Input() variableHeight: boolean = false; - @Input() variableHeightContainToRow: boolean = false; + @Input() variableHeight = false; + @Input() variableHeightContainToRow = false; @ViewChild('contentWrapper') contentWrapper: ElementRef; diff --git a/src/app/app.component.css b/src/app/app.component.css index e109ab0..55af1a5 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -64,7 +64,6 @@ h1 { .panel-body { overflow: auto; padding: 0 10px 10px; - position: absolute; top: 37px; bottom: 0; left: 0; diff --git a/src/app/app.component.html b/src/app/app.component.html index e804d28..0790090 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -115,6 +115,8 @@
New widget
[(wMd)]="widget.wMd" [(hMd)]="widget.hMd" [(wLg)]="widget.wLg" [(hLg)]="widget.hLg" [(wXl)]="widget.wXl" [(hXl)]="widget.hXl" + [variableHeight]="widget.variableHeight" + [variableHeightContainToRow]="widget.variableHeightContainToRow" (change)="itemChange($event, gridster1)">
From 1fada2048ed1ed19ef488b9b66eeeadf64450eb5 Mon Sep 17 00:00:00 2001 From: Blackbaud-StewartStephens Date: Mon, 9 Jul 2018 11:41:05 -0400 Subject: [PATCH 08/20] sort of fix variable height --- .../src/lib/gridList/GridListItem.ts | 29 ++++++--- .../gridster-item/gridster-item.component.ts | 24 +++---- .../src/lib/gridster.service.ts | 17 +++-- src/app/app.component.css | 11 ++++ src/app/app.component.html | 63 ++++++++++--------- src/app/app.component.ts | 6 +- 6 files changed, 92 insertions(+), 58 deletions(-) diff --git a/projects/angular2gridster/src/lib/gridList/GridListItem.ts b/projects/angular2gridster/src/lib/gridList/GridListItem.ts index 87b79c2..a54c380 100644 --- a/projects/angular2gridster/src/lib/gridList/GridListItem.ts +++ b/projects/angular2gridster/src/lib/gridList/GridListItem.ts @@ -80,13 +80,7 @@ export class GridListItem { } get h () { - if (this.variableHeight && this.variableHeightContainToRow) { - return 1; - } else if (!this.variableHeight) { - const item = this.getItem(); - const breakpoint = item.gridster ? item.gridster.options.breakpoint : null; - return this.getValueH(breakpoint); - } else { + if (this.variableHeight && !this.variableHeightStretchRows) { if (this.itemComponent.gridster.gridList) { const rowHeights = this.itemComponent.gridster.getRowHeights(); let offsetHeight = this.itemComponent.contentWrapper.nativeElement.offsetHeight; @@ -101,6 +95,10 @@ export class GridListItem { } else { return 1; } + } else { + const item = this.getItem(); + const breakpoint = item.gridster ? item.gridster.options.breakpoint : null; + return this.getValueH(breakpoint); } } set h (value: number) { @@ -149,8 +147,8 @@ export class GridListItem { return this.getItem().variableHeight; } - get variableHeightContainToRow(): boolean { - return this.getItem().variableHeightContainToRow; + get variableHeightStretchRows(): boolean { + return this.getItem().variableHeightStretchRows; } constructor () {} @@ -334,10 +332,16 @@ export class GridListItem { } gridster = gridster || this.itemComponent.gridster; + console.log('calculating size for ' + this.x + ', ' + this.y); + let rowHeights, rowTops; if (gridster.gridList) { rowHeights = gridster.getRowHeights(); rowTops = gridster.getRowTops(rowHeights); + console.log('row heights'); + console.log(rowHeights); + console.log('row tops'); + console.log(rowTops); } let width = this.w; @@ -352,8 +356,11 @@ export class GridListItem { let pixelHeight; if (this.variableHeight) { - pixelHeight = this.itemComponent.contentWrapper.nativeElement.offsetHeight; + const baseHeight = Math.max(this.itemComponent.contentWrapper.nativeElement.offsetheight || 0, this.$element.firstChild.offsetHeight || 0); + console.log('variable height, using offset height of ' + baseHeight); + pixelHeight = baseHeight; } else { + console.log('not variable height'); if (rowHeights) { pixelHeight = 0; for (let i = this.y; i < this.y + height; i++) { @@ -364,6 +371,8 @@ export class GridListItem { } } + console.log(pixelHeight); + return { width: width * gridster.cellWidth, height: pixelHeight diff --git a/projects/angular2gridster/src/lib/gridster-item/gridster-item.component.ts b/projects/angular2gridster/src/lib/gridster-item/gridster-item.component.ts index 98b3dc9..3988d5b 100644 --- a/projects/angular2gridster/src/lib/gridster-item/gridster-item.component.ts +++ b/projects/angular2gridster/src/lib/gridster-item/gridster-item.component.ts @@ -15,7 +15,7 @@ import {utils} from '../utils/utils'; @Component({ selector: 'ngx-gridster-item', - template: `
+ template: `
@@ -201,7 +201,7 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit, @Input() options: any = {}; @Input() variableHeight = false; - @Input() variableHeightContainToRow = false; + @Input() variableHeightStretchRows = false; @ViewChild('contentWrapper') contentWrapper: ElementRef; @@ -303,17 +303,17 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit, } if (this.variableHeight) { - if (this.variableHeightContainToRow) { - let readySubscription = this.gridster.gridsterComponent.ready.subscribe(() => { + if (this.variableHeightStretchRows) { + const readySubscription = this.gridster.gridsterComponent.ready.subscribe(() => { this.gridster.gridList.resizeItem(this.item, { w: this.w, h: 1 }); readySubscription.unsubscribe(); }); let lastOffsetHeight: number; - let adjusting = false; - let observer = new MutationObserver((mutations) => { - let offsetHeight = this.contentWrapper.nativeElement.offsetHeight; + const observer = new MutationObserver((mutations) => { + console.log('mutation observed'); + const offsetHeight = this.contentWrapper.nativeElement.offsetHeight; if (offsetHeight !== lastOffsetHeight) { - for (let item of this.gridster.items) { + for (const item of this.gridster.items) { item.applySize(); item.applyPosition(); } @@ -321,12 +321,14 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit, lastOffsetHeight = offsetHeight; }); observer.observe(this.$element, { childList: true, subtree: true, attributes: true }); + console.log('attaching mutation observer'); + console.log(this.$element); } else { let lastH: number; let lastOffsetHeight: number; - let observer = new MutationObserver((mutations) => { - let h = this.item.h; - let offsetHeight = this.contentWrapper.nativeElement.offsetHeight; + const observer = new MutationObserver((mutations) => { + const h = this.item.h; + const offsetHeight = this.contentWrapper.nativeElement.offsetHeight; if (h !== lastH) { this.gridster.gridList.resizeItem(this.item, { w: this.w, h: this.h }); this.gridster.applyPositionToItems(); diff --git a/projects/angular2gridster/src/lib/gridster.service.ts b/projects/angular2gridster/src/lib/gridster.service.ts index 93fd1e9..021892e 100644 --- a/projects/angular2gridster/src/lib/gridster.service.ts +++ b/projects/angular2gridster/src/lib/gridster.service.ts @@ -318,20 +318,27 @@ export class GridsterService { } else if (this.gridList.grid.length) { const increaseHeightWith = (increaseGridsterSize) ? this.maxItemHeight : 0; - child.style.height = ((this.gridList.grid.length + increaseHeightWith) * this.cellHeight) + 'px'; + // todo: fix me + const rowHeights = this.getRowHeights(); + const rowTops = this.getRowTops(rowHeights); + child.style.height = (rowTops[rowTops.length - 1] + rowHeights[rowHeights.length - 1]) + 'px'; child.style.width = ''; } } getRowHeights(): number[] { - let result = []; + const result = []; for (let row = 0; row < this.gridList.grid.length; row++) { result.push(0); for (let column = 0; column < this.gridList.grid[row].length; column++) { - let item = this.gridList.grid[row][column]; + const item = this.gridList.grid[row][column]; if (item) { - let height = item.itemComponent.contentWrapper.nativeElement.offsetHeight; - if (item.variableHeight && item.variableHeightContainToRow && height > result[row]) { + const contentHeight = item.itemComponent.contentWrapper.nativeElement.offsetheight || 0; + const childHeight = item.$element.firstChild.offsetHeight || 0; + const baseHeight = Math.max(contentHeight, childHeight); + const height = baseHeight / item.h; + if (item.variableHeight && item.variableHeightStretchRows && height > result[row]) { + console.log('row ' + row + ' has variable height, using value ' + baseHeight + ' from ' + item.x + ', ' + item.y); result[row] = height; } } diff --git a/src/app/app.component.css b/src/app/app.component.css index 55af1a5..fa4dc9c 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -63,12 +63,17 @@ h1 { .panel-body { overflow: auto; + position: absolute; padding: 0 10px 10px; top: 37px; bottom: 0; left: 0; right: 0; } +.variable-height .panel-body { + position: relative; + top: 0; +} .gridster-item-prototype { display: block; @@ -132,6 +137,12 @@ h1 { border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } +.variable-height .gridster-item-inner { + top: 0; + bottom: 0; + left: 0; + right: 0; +} .is-dragging .gridster-item-inner { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24), 0 2px 4px rgba(0, 0, 0, 0.48); top: -3px; diff --git a/src/app/app.component.html b/src/app/app.component.html index 0790090..822ddf0 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -103,6 +103,7 @@
New widget
(optionsChange)="optionsChange($event)" #gridster1 class="dashboard"> New widget [(wLg)]="widget.wLg" [(hLg)]="widget.hLg" [(wXl)]="widget.wXl" [(hXl)]="widget.hXl" [variableHeight]="widget.variableHeight" - [variableHeightContainToRow]="widget.variableHeightContainToRow" + [variableHeightStretchRows]="widget.variableHeightStretchRows" (change)="itemChange($event, gridster1)"> -
-
{{ widget.title }}
+
+
+
{{ widget.title }}
+
+ +
+

+ Position: {{itemComp?.item?.x}} x {{itemComp?.item?.y}}
+ Size: {{itemComp?.item?.w}} x {{itemComp?.item?.h}}
+

+

+ + + + + + +

+

+ +

+

+ +

+ + 
{{ widget | json }}
+ +
- -
-

- Position: {{itemComp?.item?.x}} x {{itemComp?.item?.y}}
- Size: {{itemComp?.item?.w}} x {{itemComp?.item?.h}}
-

-

- - - - - - -

-

- -

- - 
{{ widget | json }}
- -
- diff --git a/src/app/app.component.ts b/src/app/app.component.ts index f43f4f6..32d458e 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -114,7 +114,7 @@ export class AppComponent implements OnInit { dragAndDrop: true, resizable: true, title: 'Basic form inputs 1', - variableHeight: true, + variableHeight: false, contents: [] }, { @@ -127,7 +127,7 @@ export class AppComponent implements OnInit { dragAndDrop: true, resizable: true, title: 'Basic form inputs 2', - variableHeight: true, + variableHeight: false, contents: [] }, { @@ -141,7 +141,7 @@ export class AppComponent implements OnInit { resizable: true, title: 'Basic form inputs 3', variableHeight: true, - variableHeightContainToRow: true, + variableHeightStretchRows: true, contents: [] }, { From 1246978ba925c2e4301c2d2ae0efa89b6da04d15 Mon Sep 17 00:00:00 2001 From: Blackbaud-StewartStephens Date: Tue, 10 Jul 2018 09:17:10 -0400 Subject: [PATCH 09/20] fix up demo some more --- .../src/lib/gridList/GridListItem.ts | 25 +++++------------- .../gridster-item/gridster-item.component.ts | 4 +-- .../src/lib/gridster.service.ts | 8 +++--- src/app/app.component.css | 26 ++++++++++++------- 4 files changed, 30 insertions(+), 33 deletions(-) diff --git a/projects/angular2gridster/src/lib/gridList/GridListItem.ts b/projects/angular2gridster/src/lib/gridList/GridListItem.ts index a54c380..abea458 100644 --- a/projects/angular2gridster/src/lib/gridList/GridListItem.ts +++ b/projects/angular2gridster/src/lib/gridList/GridListItem.ts @@ -332,16 +332,12 @@ export class GridListItem { } gridster = gridster || this.itemComponent.gridster; - console.log('calculating size for ' + this.x + ', ' + this.y); - let rowHeights, rowTops; if (gridster.gridList) { rowHeights = gridster.getRowHeights(); rowTops = gridster.getRowTops(rowHeights); console.log('row heights'); console.log(rowHeights); - console.log('row tops'); - console.log(rowTops); } let width = this.w; @@ -355,23 +351,16 @@ export class GridListItem { } let pixelHeight; - if (this.variableHeight) { - const baseHeight = Math.max(this.itemComponent.contentWrapper.nativeElement.offsetheight || 0, this.$element.firstChild.offsetHeight || 0); - console.log('variable height, using offset height of ' + baseHeight); - pixelHeight = baseHeight; - } else { - console.log('not variable height'); - if (rowHeights) { - pixelHeight = 0; - for (let i = this.y; i < this.y + height; i++) { - pixelHeight += rowHeights[i]; - } - } else { - pixelHeight = height * gridster.cellHeight; + if (rowHeights) { + pixelHeight = 0; + for (let i = this.y; i < this.y + height; i++) { + pixelHeight += rowHeights[i]; } + } else { + pixelHeight = height * gridster.cellHeight; } - console.log(pixelHeight); + console.log('pixel height of x/y' + this.x + ', ' + this.y + ' w/h ' + this.w + ', ' + this.h + ' ' + pixelHeight); return { width: width * gridster.cellWidth, diff --git a/projects/angular2gridster/src/lib/gridster-item/gridster-item.component.ts b/projects/angular2gridster/src/lib/gridster-item/gridster-item.component.ts index 3988d5b..621bede 100644 --- a/projects/angular2gridster/src/lib/gridster-item/gridster-item.component.ts +++ b/projects/angular2gridster/src/lib/gridster-item/gridster-item.component.ts @@ -320,9 +320,9 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit, } lastOffsetHeight = offsetHeight; }); - observer.observe(this.$element, { childList: true, subtree: true, attributes: true }); + observer.observe(this.contentWrapper.nativeElement, { childList: true, subtree: true, attributes: true }); console.log('attaching mutation observer'); - console.log(this.$element); + console.log(this.contentWrapper.nativeElement); } else { let lastH: number; let lastOffsetHeight: number; diff --git a/projects/angular2gridster/src/lib/gridster.service.ts b/projects/angular2gridster/src/lib/gridster.service.ts index 021892e..61cb93e 100644 --- a/projects/angular2gridster/src/lib/gridster.service.ts +++ b/projects/angular2gridster/src/lib/gridster.service.ts @@ -321,7 +321,8 @@ export class GridsterService { // todo: fix me const rowHeights = this.getRowHeights(); const rowTops = this.getRowTops(rowHeights); - child.style.height = (rowTops[rowTops.length - 1] + rowHeights[rowHeights.length - 1]) + 'px'; + const height = rowTops[rowTops.length - 1] + rowHeights[rowHeights.length - 1]; + child.style.height = height + 'px'; child.style.width = ''; } } @@ -338,7 +339,6 @@ export class GridsterService { const baseHeight = Math.max(contentHeight, childHeight); const height = baseHeight / item.h; if (item.variableHeight && item.variableHeightStretchRows && height > result[row]) { - console.log('row ' + row + ' has variable height, using value ' + baseHeight + ' from ' + item.x + ', ' + item.y); result[row] = height; } } @@ -351,9 +351,9 @@ export class GridsterService { } getRowTops(rowHeights: number[]): number[] { - let result = []; + const result = []; let lastHeight = 0; - for (let rowHeight of rowHeights) { + for (const rowHeight of rowHeights) { result.push(lastHeight); lastHeight += rowHeight; } diff --git a/src/app/app.component.css b/src/app/app.component.css index fa4dc9c..4371b18 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -1,8 +1,16 @@ +html { + overflow: unset; +} + +body { + overflow: scroll; +} + app-root { position: absolute; height: 100%; width: 100%; - overflow: hidden; + /* overflow: hidden; */ display: flex; flex-direction: column; } @@ -111,10 +119,10 @@ h1 { .position-highlight .inner { position: absolute; - top: 5px; - bottom: 5px; - left: 5px; - right: 5px; + top: 0; + bottom: 0; + left: 0; + right: 0; background-color: #768294; border: 1px solid transparent; @@ -128,10 +136,10 @@ h1 { position: absolute; background: #fff; border: 1px solid transparent; - top: 5px; - bottom: 5px; - left: 5px; - right: 5px; + top: 0; + bottom: 0; + left: 0; + right: 0; -webkit-transition: background 3s; transition: background 3s; border-radius: 3px; From 550045f66c794dd2c1f616bc6514abda61c76f4f Mon Sep 17 00:00:00 2001 From: Blackbaud-StewartStephens Date: Tue, 10 Jul 2018 09:24:54 -0400 Subject: [PATCH 10/20] fix mutation observer --- .../src/lib/gridList/GridListItem.ts | 8 ++++++-- .../src/lib/gridster-item/gridster-item.component.ts | 12 +++++++----- .../angular2gridster/src/lib/gridster.service.ts | 5 +---- 3 files changed, 14 insertions(+), 11 deletions(-) diff --git a/projects/angular2gridster/src/lib/gridList/GridListItem.ts b/projects/angular2gridster/src/lib/gridList/GridListItem.ts index abea458..6278947 100644 --- a/projects/angular2gridster/src/lib/gridList/GridListItem.ts +++ b/projects/angular2gridster/src/lib/gridList/GridListItem.ts @@ -151,6 +151,12 @@ export class GridListItem { return this.getItem().variableHeightStretchRows; } + 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 { @@ -336,8 +342,6 @@ export class GridListItem { if (gridster.gridList) { rowHeights = gridster.getRowHeights(); rowTops = gridster.getRowTops(rowHeights); - console.log('row heights'); - console.log(rowHeights); } let width = this.w; diff --git a/projects/angular2gridster/src/lib/gridster-item/gridster-item.component.ts b/projects/angular2gridster/src/lib/gridster-item/gridster-item.component.ts index 621bede..9e0e5a6 100644 --- a/projects/angular2gridster/src/lib/gridster-item/gridster-item.component.ts +++ b/projects/angular2gridster/src/lib/gridster-item/gridster-item.component.ts @@ -310,8 +310,7 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit, }); let lastOffsetHeight: number; const observer = new MutationObserver((mutations) => { - console.log('mutation observed'); - const offsetHeight = this.contentWrapper.nativeElement.offsetHeight; + const offsetHeight = this.item.contentHeight; if (offsetHeight !== lastOffsetHeight) { for (const item of this.gridster.items) { item.applySize(); @@ -320,9 +319,12 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit, } lastOffsetHeight = offsetHeight; }); - observer.observe(this.contentWrapper.nativeElement, { childList: true, subtree: true, attributes: true }); - console.log('attaching mutation observer'); - console.log(this.contentWrapper.nativeElement); + observer.observe(this.contentWrapper.nativeElement, { + childList: true, + subtree: true, + attributes: true, + characterData: true + }); } else { let lastH: number; let lastOffsetHeight: number; diff --git a/projects/angular2gridster/src/lib/gridster.service.ts b/projects/angular2gridster/src/lib/gridster.service.ts index 61cb93e..d93c2ba 100644 --- a/projects/angular2gridster/src/lib/gridster.service.ts +++ b/projects/angular2gridster/src/lib/gridster.service.ts @@ -334,10 +334,7 @@ export class GridsterService { for (let column = 0; column < this.gridList.grid[row].length; column++) { const item = this.gridList.grid[row][column]; if (item) { - const contentHeight = item.itemComponent.contentWrapper.nativeElement.offsetheight || 0; - const childHeight = item.$element.firstChild.offsetHeight || 0; - const baseHeight = Math.max(contentHeight, childHeight); - const height = baseHeight / item.h; + const height = item.contentHeight / item.h; if (item.variableHeight && item.variableHeightStretchRows && height > result[row]) { result[row] = height; } From 196b6d94b0e1ffb6d6c729651b9ac1ea402daacf Mon Sep 17 00:00:00 2001 From: Blackbaud-StewartStephens Date: Wed, 11 Jul 2018 15:46:59 -0400 Subject: [PATCH 11/20] sort of fix the grid lines --- .../src/lib/gridster.component.ts | 9 ++++ .../src/lib/gridster.service.ts | 46 ++++++++++++++----- src/app/app.component.css | 4 -- 3 files changed, 44 insertions(+), 15 deletions(-) diff --git a/projects/angular2gridster/src/lib/gridster.component.ts b/projects/angular2gridster/src/lib/gridster.component.ts index e2cc8d7..e8f7d8c 100644 --- a/projects/angular2gridster/src/lib/gridster.component.ts +++ b/projects/angular2gridster/src/lib/gridster.component.ts @@ -18,6 +18,7 @@ import { GridsterOptions } from './GridsterOptions'; @Component({ selector: 'ngx-gridster', template: `
+