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

Commit d563751

Browse files
BTMortonBTMorton
committed
Add support for cascading downwards. Closes #4 
1 parent 0809473 commit d563751

File tree

3 files changed

+72
-41
lines changed

3 files changed

+72
-41
lines changed

‎NgGrid.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export declare class NgGrid {
2222
autoStyle: boolean;
2323
resizeEnable: boolean;
2424
dragEnable: boolean;
25+
cascade: string;
2526
private _items;
2627
private _draggingItem;
2728
private _resizingItem;
@@ -37,7 +38,6 @@ export declare class NgGrid {
3738
private _setHeight;
3839
private _posOffset;
3940
private _adding;
40-
private _cascade;
4141
private _placeholderRef;
4242
private _fixToGrid;
4343
private _autoResize;

‎NgGrid.ts‎

Lines changed: 60 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export class NgGrid {
4040
public autoStyle: boolean = true;
4141
public resizeEnable: boolean = true;
4242
public dragEnable: boolean = true;
43+
public cascade: string = 'up';
4344

4445
// Private variables
4546
private _items: List<NgGridItem> = [];
@@ -57,7 +58,6 @@ export class NgGrid {
5758
private _setHeight: number = 250;
5859
private _posOffset:{left: number, top: number} = null;
5960
private _adding: boolean = false;
60-
private _cascade: string = 'up';
6161
private _placeholderRef: ComponentRef = null;
6262
private _fixToGrid: boolean = false;
6363
private _autoResize: boolean = false;
@@ -146,7 +146,7 @@ export class NgGrid {
146146
this.colWidth = Math.max(this._setWidth, this._minWidth);
147147
break;
148148
case 'cascade':
149-
this._cascade = val;
149+
this.cascade = val;
150150
break;
151151
case 'fix_to_grid':
152152
this._fixToGrid = val ? true : false;
@@ -156,7 +156,7 @@ export class NgGrid {
156156

157157
if (maxColRowChanged) {
158158
if (this._maxCols > 0 && this._maxRows > 0) { // Can't have both, prioritise on cascade
159-
switch (this._cascade) {
159+
switch (this.cascade) {
160160
case "left":
161161
case "right":
162162
this._maxCols = 0;
@@ -559,52 +559,25 @@ export class NgGrid {
559559
var itemPos = collisions[0].getGridPosition();
560560
var itemDims = collisions[0].getSize();
561561

562-
switch (this._cascade) {
562+
switch (this.cascade) {
563563
case "up":
564+
case "down":
564565
if (this._maxRows > 0 && itemPos.row + (itemDims.y - 1) >= this._maxRows) {
565566
itemPos.col++;
566567
} else {
567568
itemPos.row++;
568569
}
569570

570-
collisions[0].setGridPosition(itemPos.col, itemPos.row);
571-
break;
572-
case "down": // Needs to be fixed once cascade is done
573-
// if (itemPos.row == 1) {
574-
// if (itemPos.col + itemDims.x > this._maxCols) {
575-
// itemPos.col = 1;
576-
// itemPos.row = this._getMaxRow();
577-
// } else {
578-
// itemPos.col++;
579-
// }
580-
// } else {
581-
// itemPos.row--;
582-
// }
583-
throw new Error("Not implemented");
584571
collisions[0].setGridPosition(itemPos.col, itemPos.row);
585572
break;
586573
case "left":
574+
case "right":
587575
if (this._maxCols > 0 && itemPos.col + (itemDims.x - 1) >= this._maxCols) {
588576
itemPos.row++;
589577
} else {
590578
itemPos.col++;
591579
}
592580

593-
collisions[0].setGridPosition(itemPos.col, itemPos.row);
594-
break;
595-
case "right": // Needs to be fixed once cascade is done
596-
// if (itemPos.col == 1) {
597-
// itemPos.row++;
598-
599-
// if (this._maxRows > 0 && itemPos.row + itemDims.y >= this._maxRows) {
600-
// itemPos.row = 1;
601-
// itemPos.col = this._getMaxCol();
602-
// }
603-
// } else {
604-
// itemPos.col--;
605-
// }
606-
607-
throw new Error("Not implemented");
608581
collisions[0].setGridPosition(itemPos.col, itemPos.row);
609582
break;
610583
}
@@ -618,8 +591,9 @@ export class NgGrid {
618591
private _cascadeGrid(pos?: {col: number, row: number}, dims?: {x: number, y: number}): void {
619592
if (pos && !dims) throw new Error("Cannot cascade with only position and not dimensions");
620593

621-
switch (this._cascade) {
594+
switch (this.cascade) {
622595
case "up":
596+
case "down":
623597
var lowRow: Array<number> = [0];
624598

625599
for (var i:number = 1; i <= this._getMaxCol(); i++)
@@ -785,9 +759,15 @@ export class NgGrid {
785759

786760
var refPos = this._ngEl.nativeElement.getBoundingClientRect();
787761

762+
var left = e.clientX - refPos.left;
763+
var top = e.clientY - refPos.top;
764+
765+
if (this.cascade == "down") top = refPos.top + refPos.height - e.clientY;
766+
if (this.cascade == "right") top = refPos.left + refPos.width - e.clientX;
767+
788768
return {
789-
left: e.clientX - refPos.left,
790-
top: e.clientY - refPos.top
769+
left: left,
770+
top: top
791771
};
792772
}
793773

@@ -1032,8 +1012,28 @@ export class NgGridItem {
10321012
}
10331013

10341014
public setPosition(x: number, y: number): void {
1035-
this._renderer.setElementStyle(this._ngEl, 'left', x+"px");
1036-
this._renderer.setElementStyle(this._ngEl, 'top', y+"px");
1015+
switch (this._ngGrid.cascade) {
1016+
case 'up':
1017+
case 'left':
1018+
default:
1019+
this._renderer.setElementStyle(this._ngEl, 'left', x+"px");
1020+
this._renderer.setElementStyle(this._ngEl, 'top', y+"px");
1021+
this._renderer.setElementStyle(this._ngEl, 'right', null);
1022+
this._renderer.setElementStyle(this._ngEl, 'bottom', null);
1023+
break;
1024+
case 'right':
1025+
this._renderer.setElementStyle(this._ngEl, 'right', x+"px");
1026+
this._renderer.setElementStyle(this._ngEl, 'top', y+"px");
1027+
this._renderer.setElementStyle(this._ngEl, 'left', null);
1028+
this._renderer.setElementStyle(this._ngEl, 'bottom', null);
1029+
break;
1030+
case 'down':
1031+
this._renderer.setElementStyle(this._ngEl, 'left', x+"px");
1032+
this._renderer.setElementStyle(this._ngEl, 'bottom', y+"px");
1033+
this._renderer.setElementStyle(this._ngEl, 'right', null);
1034+
this._renderer.setElementStyle(this._ngEl, 'top', null);
1035+
break;
1036+
}
10371037
this._elemLeft = x;
10381038
this._elemTop = y;
10391039
}
@@ -1123,8 +1123,28 @@ class NgGridPlaceholder {
11231123
}
11241124

11251125
private _setPosition(x: number, y: number): void {
1126-
this._renderer.setElementStyle(this._ngEl, 'left', x+"px");
1127-
this._renderer.setElementStyle(this._ngEl, 'top', y+"px");
1126+
switch (this._ngGrid.cascade) {
1127+
case 'up':
1128+
case 'left':
1129+
default:
1130+
this._renderer.setElementStyle(this._ngEl, 'left', x+"px");
1131+
this._renderer.setElementStyle(this._ngEl, 'top', y+"px");
1132+
this._renderer.setElementStyle(this._ngEl, 'right', null);
1133+
this._renderer.setElementStyle(this._ngEl, 'bottom', null);
1134+
break;
1135+
case 'right':
1136+
this._renderer.setElementStyle(this._ngEl, 'right', x+"px");
1137+
this._renderer.setElementStyle(this._ngEl, 'top', y+"px");
1138+
this._renderer.setElementStyle(this._ngEl, 'left', null);
1139+
this._renderer.setElementStyle(this._ngEl, 'bottom', null);
1140+
break;
1141+
case 'down':
1142+
this._renderer.setElementStyle(this._ngEl, 'left', x+"px");
1143+
this._renderer.setElementStyle(this._ngEl, 'bottom', y+"px");
1144+
this._renderer.setElementStyle(this._ngEl, 'right', null);
1145+
this._renderer.setElementStyle(this._ngEl, 'top', null);
1146+
break;
1147+
}
11281148
}
11291149

11301150
private _setDimensions(w: number, h: number): void {

‎app.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,17 @@ <h1>Angular 2 Grid Demo</h1>
2929
</label>
3030
<input type="checkbox" name="auto_resize" ng-control="auto_resize" [(ng-model)]="gridConfig.auto_resize" />
3131
</div>
32+
<div class="form-group">
33+
<label>
34+
Cascade Direction
35+
</label>
36+
<select name="cascade" ng-control="cascade" [(ng-model)]="gridConfig.cascade">
37+
<option value="up">Up</option>
38+
<option value="down">Down</option>
39+
<!-- <option value="left">Left</option>
40+
<option value="right">Right</option> -->
41+
</select>
42+
</div>
3243
</div>
3344
<div class="form-inline">
3445
<div class="form-group">

0 commit comments

Comments
 (0)