Skip to content
This repository has been archived by the owner on Mar 5, 2024. It is now read-only.

Commit

Permalink
Fix some issues with change detection of user configs.
Browse files Browse the repository at this point in the history 
Add a delay before cascading when adding/removing/updating items #268
  • Loading branch information
@BTMorton
BTMorton committed Oct 22, 2017
1 parent 9d6ea1e commit 0c7ec0b
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 42 deletions.
5 changes: 4 additions & 1 deletion rollup.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,8 @@ export default {
'rxjs/add/operator/mergeMap': 'Rx.Observable.prototype',
'rxjs/add/observable/fromEvent': 'Rx.Observable',
'rxjs/add/observable/of': 'Rx.Observable'
}
},
external: [
"@angular/core",
]
}
55 changes: 40 additions & 15 deletions src/directives/NgGrid.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ export class NgGrid implements OnInit, DoCheck, OnDestroy {
private _elementBasedDynamicRowHeight: boolean = false;
private _itemFixDirection: NgConfigFixDirection = "cascade";
private _collisionFixDirection: NgConfigFixDirection = "cascade";
private _cascadePromise: Promise<void>;

// Default config
private static CONST_DEFAULT_CONFIG: NgGridConfig = {
Expand Down Expand Up @@ -118,6 +119,8 @@ export class NgGrid implements OnInit, DoCheck, OnDestroy {
if (this._differ == null && v != null) {
this._differ = this._differs.find(this._config).create(null);
}

this._differ.diff(this._config);
}

// Constructor
Expand Down Expand Up @@ -382,10 +385,13 @@ export class NgGrid implements OnInit, DoCheck, OnDestroy {

this._updateSize();

ngItem.recalculateSelf();
ngItem.onCascadeEvent();
this.triggerCascade().then(() => {
ngItem.recalculateSelf();
ngItem.onCascadeEvent();

this._emitOnItemChange();
});

this._emitOnItemChange();
}

public removeItem(ngItem: NgGridItem): void {
Expand All @@ -395,22 +401,35 @@ export class NgGrid implements OnInit, DoCheck, OnDestroy {

if (this._destroyed) return;

this._cascadeGrid();
this._updateSize();
this._items.forEach((item: NgGridItem) => item.recalculateSelf());
this._emitOnItemChange();
this.triggerCascade().then(() => {
this._updateSize();
this._items.forEach((item: NgGridItem) => item.recalculateSelf());
this._emitOnItemChange();
});
}

public updateItem(ngItem: NgGridItem): void {
this._removeFromGrid(ngItem);
this._addToGrid(ngItem);
this._cascadeGrid();
this._updateSize();
ngItem.onCascadeEvent();

this.triggerCascade().then(() => {
this._updateSize();
ngItem.onCascadeEvent();
});
}

public triggerCascade(): void {
this._cascadeGrid(null, null);
public triggerCascade(): Promise<void> {
if (!this._cascadePromise) {
this._cascadePromise = new Promise((resolve: Function) => {
setTimeout(() => {
this._cascadePromise = null;
this._cascadeGrid(null, null);
resolve();
}, 0);
});
}

return this._cascadePromise;
}

public triggerResize(): void {
Expand Down Expand Up @@ -1046,14 +1065,20 @@ export class NgGrid implements OnInit, DoCheck, OnDestroy {
const collisions: NgGridItem[] = this._getCollisions(pos, dims);

if (this._itemFixDirection === "vertical") {
pos.row = Math.max.apply(null, collisions.map((collision: NgGridItem) => collision.row + collision.sizey));

pos = {
col: pos.col,
row: Math.max.apply(null, collisions.map((collision: NgGridItem) => collision.row + collision.sizey)),
};

if (!this._isWithinBoundsY(pos, dims)) {
pos.col = Math.max.apply(null, collisions.map((collision: NgGridItem) => collision.col + collision.sizex));
pos.row = 1;
}
} else if (this._itemFixDirection === "horizontal") {
pos.col = Math.max.apply(null, collisions.map((collision: NgGridItem) => collision.col + collision.sizex));
pos = {
col: Math.max.apply(null, collisions.map((collision: NgGridItem) => collision.col + collision.sizex)),
row: pos.row,
};

if (!this._isWithinBoundsX(pos, dims)) {
pos.col = 1;
Expand Down
69 changes: 43 additions & 26 deletions src/directives/NgGridItem.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export class NgGridItem implements OnInit, OnDestroy {
private _currentPosition: NgGridItemPosition = { col: 1, row: 1 };
private _size: NgGridItemSize = { x: 1, y: 1 };
private _config = NgGridItem.CONST_DEFAULT_CONFIG;
private _userConfig = null;
private _dragHandle: string;
private _resizeHandle: string;
private _borderSize: number;
Expand All @@ -68,17 +69,21 @@ export class NgGridItem implements OnInit, OnDestroy {
// [ng-grid-item] handler
set config(v: NgGridItemConfig) {
const defaults = NgGridItem.CONST_DEFAULT_CONFIG;
this._userConfig = v;

const configObject = Object.assign({}, v);
for (let x in defaults)
if (v[x] == null)
v[x] = defaults[x];
if (configObject[x] == null)
configObject[x] = defaults[x];

this.setConfig(v);
this.setConfig(configObject);

if (this._differ == null && v != null) {
this._differ = this._differs.find(this._config).create(null);
if (this._differ == null && configObject != null) {
this._differ = this._differs.find(this._userConfig).create(null);
}

this._differ.diff(this._userConfig);

if (!this._added) {
this._added = true;
this._ngGrid.addItem(this);
Expand Down Expand Up @@ -136,9 +141,9 @@ export class NgGridItem implements OnInit, OnDestroy {
this.onChangeStop.emit(event);
this.onChangeAny.emit(event);

this._config.sizex = this._size.x;
this._config.sizey = this._size.y;
this.ngGridItemChange.emit(this._config);
this._config.sizex = this._userConfig.sizex = this._size.x;
this._config.sizey = this._userConfig.sizey = this._size.y;
this.ngGridItemChange.emit(this._userConfig);
}
public onDragStartEvent(): void {
const event: NgGridItemEvent = this.getEventOutput();
Expand All @@ -161,16 +166,16 @@ export class NgGridItem implements OnInit, OnDestroy {
this.onChangeStop.emit(event);
this.onChangeAny.emit(event);

this._config.col = this._currentPosition.col;
this._config.row = this._currentPosition.row;
this.ngGridItemChange.emit(this._config);
this._config.col = this._userConfig.col = this._currentPosition.col;
this._config.row = this._userConfig.row = this._currentPosition.row;
this.ngGridItemChange.emit(this._userConfig);
}
public onCascadeEvent(): void {
this._config.sizex = this._size.x;
this._config.sizey = this._size.y;
this._config.col = this._currentPosition.col;
this._config.row = this._currentPosition.row;
this.ngGridItemChange.emit(this._config);
this._config.sizex = this._userConfig.sizex = this._size.x;
this._config.sizey = this._userConfig.sizey = this._size.y;
this._config.col = this._userConfig.col = this._currentPosition.col;
this._config.row = this._userConfig.row = this._currentPosition.row;
this.ngGridItemChange.emit(this._userConfig);
}

public ngOnInit(): void {
Expand All @@ -179,7 +184,7 @@ export class NgGridItem implements OnInit, OnDestroy {
this._recalculateDimensions();
this._recalculatePosition();

if (!this._added) {
if (!this._added && this._userConfig != null) {
this._added = true;
this._ngGrid.addItem(this);
}
Expand Down Expand Up @@ -332,12 +337,10 @@ export class NgGridItem implements OnInit, OnDestroy {

public ngDoCheck(): boolean {
if (this._differ != null) {
const changes: any = this._differ.diff(this._config);
const changes: any = this._differ.diff(this._userConfig);

if (changes != null) {
this._applyChanges(changes);

return true;
return this._applyChanges(changes);
}
}

Expand Down Expand Up @@ -520,11 +523,25 @@ export class NgGridItem implements OnInit, OnDestroy {
};
}

private _applyChanges(changes: any): void {
changes.forEachAddedItem((record: any) => { this._config[record.key] = record.currentValue; });
changes.forEachChangedItem((record: any) => { this._config[record.key] = record.currentValue; });
changes.forEachRemovedItem((record: any) => { delete this._config[record.key]; });
private _applyChanges(changes: any): boolean {
let changed: boolean = false;
const changeCheck = (record: any) => {
if (this._config[record.key] !== record.currentValue) {
this._config[record.key] = record.currentValue;
changed = true;
}
};
changes.forEachAddedItem(changeCheck);
changes.forEachChangedItem(changeCheck);
changes.forEachRemovedItem((record: any) => {
changed = true;
delete this._config[record.key];
});

if (changed) {
this.setConfig(this._config);
}

this.setConfig(this._config);
return changed;
}
}

0 comments on commit 0c7ec0b

Please sign in to comment.