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

Commit bf327d0

Browse files
BTMortonBTMorton
committed
Add prefer_new flag to favor new items over existing. Update NgItem events to make them more usable. Closes #68 
1 parent db7d5a4 commit bf327d0

File tree

5 files changed

+95
-12
lines changed

5 files changed

+95
-12
lines changed

‎README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ To configure the grid with your own options, it is as easy as adding them as the
5454
'auto_style': true, // Automatically add required element styles at run-time
5555
'auto_resize': false, // Automatically set col_width/row_height so that max_cols/max_rows fills the screen. Only has effect is max_cols or max_rows is set
5656
'maintain_ratio': false, // Attempts to maintain aspect ratio based on the colWidth/rowHeight values set in the config
57+
'prefer_new': false, // When adding new items, will use that items position ahead of existing items
5758
}
5859
```
5960

@@ -96,9 +97,15 @@ The individual items will also throw the following events:
9697
dragStart() // When the item starts being dragged.
9798
drag() // When the item moves while dragging.
9899
dragStop() // When the item stops being dragged.
100+
dragAny() // When the item starts/stops/is being dragged.
99101
resizeStart() // When the item starts being resized.
100102
resize() // When the item is resized.
101103
resizeStop() // When the item stops being resized.
104+
resizeAny() // When the item starts/stops/is being resized.
105+
changeStart() // When the item starts being dragged or resized.
106+
change() // When the item is dragged or resized.
107+
changeStop() // When the item stops being dragged or resized.
108+
changeAny() // When the item starts/stops/is being dragged or resized.
102109
itemChange() // When either the item's grid size or position is changed.
103110
```
104111

‎src/NgGrid.d.ts‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ export interface NgGridConfig {
1717
fix_to_grid?: boolean;
1818
auto_style?: boolean;
1919
auto_resize?: boolean;
20-
maintain_ratio: boolean;
20+
maintain_ratio?: boolean;
21+
prefer_new?: boolean;
2122
}
2223
export declare class NgGrid implements OnInit, DoCheck, OnDestroy {
2324
private _differs;
@@ -69,6 +70,7 @@ export declare class NgGrid implements OnInit, DoCheck, OnDestroy {
6970
private _destroyed;
7071
private _maintainRatio;
7172
private _aspectRatio;
73+
private _preferNew;
7274
private static CONST_DEFAULT_CONFIG;
7375
private _config;
7476
config: NgGridConfig;
@@ -160,9 +162,15 @@ export declare class NgGridItem implements OnInit, OnDestroy {
160162
dragStart: EventEmitter<NgGridItemEvent>;
161163
drag: EventEmitter<NgGridItemEvent>;
162164
dragStop: EventEmitter<NgGridItemEvent>;
165+
dragAny: EventEmitter<NgGridItemEvent>;
163166
resizeStart: EventEmitter<NgGridItemEvent>;
164167
resize: EventEmitter<NgGridItemEvent>;
165168
resizeStop: EventEmitter<NgGridItemEvent>;
169+
resizeAny: EventEmitter<NgGridItemEvent>;
170+
changeStart: EventEmitter<NgGridItemEvent>;
171+
change: EventEmitter<NgGridItemEvent>;
172+
changeStop: EventEmitter<NgGridItemEvent>;
173+
changeAny: EventEmitter<NgGridItemEvent>;
166174
private static CONST_DEFAULT_CONFIG;
167175
gridPosition: {
168176
'col': number;
@@ -190,6 +198,12 @@ export declare class NgGridItem implements OnInit, OnDestroy {
190198
private _added;
191199
config: NgGridItemConfig;
192200
constructor(_ngEl: ElementRef, _renderer: Renderer, _ngGrid: NgGrid);
201+
onResizeStart(): void;
202+
onResize(): void;
203+
onResizeStop(): void;
204+
onDragStart(): void;
205+
onDrag(): void;
206+
onDragStop(): void;
193207
ngOnInit(): void;
194208
canDrag(e: any): boolean;
195209
canResize(e: any): string;

‎src/NgGrid.ts‎

Lines changed: 64 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ export interface NgGridConfig {
1919
fix_to_grid?: boolean;
2020
auto_style?: boolean;
2121
auto_resize?: boolean;
22-
maintain_ratio: boolean;
22+
maintain_ratio?: boolean;
23+
prefer_new?: boolean;
2324
}
2425

2526
@Directive({
@@ -89,6 +90,7 @@ export class NgGrid implements OnInit, DoCheck, OnDestroy {
8990
private _destroyed: boolean = false;
9091
private _maintainRatio: boolean = false;
9192
private _aspectRatio: number;
93+
private _preferNew: boolean = false;
9294

9395
// Default config
9496
private static CONST_DEFAULT_CONFIG:NgGridConfig = {
@@ -107,7 +109,8 @@ export class NgGrid implements OnInit, DoCheck, OnDestroy {
107109
fix_to_grid: false,
108110
auto_style: true,
109111
auto_resize: false,
110-
maintain_ratio: false
112+
maintain_ratio: false,
113+
prefer_new: false
111114
};
112115
private _config = NgGrid.CONST_DEFAULT_CONFIG;
113116

@@ -202,6 +205,9 @@ export class NgGrid implements OnInit, DoCheck, OnDestroy {
202205
case 'maintain_ratio':
203206
this._maintainRatio = val ? true : false;
204207
break;
208+
case 'prefer_new':
209+
this._preferNew = val ? true : false;
210+
break;
205211
}
206212
}
207213

@@ -358,7 +364,7 @@ export class NgGrid implements OnInit, DoCheck, OnDestroy {
358364
this._updateSize();
359365
}
360366

361-
public triggerCascade() {
367+
public triggerCascade(): void {
362368
this._cascadeGrid();
363369
}
364370

@@ -456,7 +462,7 @@ export class NgGrid implements OnInit, DoCheck, OnDestroy {
456462
this.isResizing = true;
457463

458464
this.resizeStart.emit(item);
459-
item.resizeStart.emit(item.getEventOutput());
465+
item.onResizeStart();
460466
}
461467
}
462468

@@ -475,7 +481,7 @@ export class NgGrid implements OnInit, DoCheck, OnDestroy {
475481
this.isDragging = true;
476482

477483
this.dragStart.emit(item);
478-
item.dragStart.emit(item.getEventOutput());
484+
item.onDragStart();
479485
}
480486
}
481487

@@ -528,7 +534,7 @@ export class NgGrid implements OnInit, DoCheck, OnDestroy {
528534
}
529535

530536
this.drag.emit(this._draggingItem);
531-
this._draggingItem.drag.emit(this._draggingItem.getEventOutput());
537+
this._draggingItem.onDrag();
532538
}
533539
}
534540

@@ -574,7 +580,7 @@ export class NgGrid implements OnInit, DoCheck, OnDestroy {
574580
if (this._resizeDirection == 'width') bigGrid.y = iGridPos.row + itemSize.y;
575581

576582
this.resize.emit(this._resizingItem);
577-
this._resizingItem.resize.emit(this._resizingItem.getEventOutput());
583+
this._resizingItem.onResize();
578584
}
579585
}
580586

@@ -602,7 +608,7 @@ export class NgGrid implements OnInit, DoCheck, OnDestroy {
602608
this._cascadeGrid();
603609

604610
this._draggingItem.stopMoving();
605-
this._draggingItem.dragStop.emit(this._draggingItem.getEventOutput());
611+
this._draggingItem.onDragStop();
606612
this.dragStop.emit(this._draggingItem);
607613
this._draggingItem = null;
608614
this._posOffset = null;
@@ -624,7 +630,7 @@ export class NgGrid implements OnInit, DoCheck, OnDestroy {
624630
this._cascadeGrid();
625631

626632
this._resizingItem.stopMoving();
627-
this._resizingItem.resizeStop.emit(this._resizingItem.getEventOutput());
633+
this._resizingItem.onResizeStop();
628634
this.resizeStop.emit(this._resizingItem);
629635
this._resizingItem = null;
630636
this._resizeDirection = null;
@@ -1049,9 +1055,15 @@ export class NgGridItem implements OnInit, OnDestroy {
10491055
public dragStart: EventEmitter<NgGridItemEvent> = new EventEmitter();
10501056
public drag: EventEmitter<NgGridItemEvent> = new EventEmitter();
10511057
public dragStop: EventEmitter<NgGridItemEvent> = new EventEmitter();
1058+
public dragAny: EventEmitter<NgGridItemEvent> = new EventEmitter();
10521059
public resizeStart: EventEmitter<NgGridItemEvent> = new EventEmitter();
10531060
public resize: EventEmitter<NgGridItemEvent> = new EventEmitter();
10541061
public resizeStop: EventEmitter<NgGridItemEvent> = new EventEmitter();
1062+
public resizeAny: EventEmitter<NgGridItemEvent> = new EventEmitter();
1063+
public changeStart: EventEmitter<NgGridItemEvent> = new EventEmitter();
1064+
public change: EventEmitter<NgGridItemEvent> = new EventEmitter();
1065+
public changeStop: EventEmitter<NgGridItemEvent> = new EventEmitter();
1066+
public changeAny: EventEmitter<NgGridItemEvent> = new EventEmitter();
10551067

10561068
// Default config
10571069
private static CONST_DEFAULT_CONFIG:NgGridItemConfig = {
@@ -1110,6 +1122,49 @@ export class NgGridItem implements OnInit, OnDestroy {
11101122
// Constructor
11111123
constructor(private _ngEl: ElementRef, private _renderer: Renderer, private _ngGrid: NgGrid) { }
11121124

1125+
public onResizeStart(): void {
1126+
var event = this.getEventOutput();
1127+
this.resizeStart.emit(event);
1128+
this.resizeAny.emit(event);
1129+
this.changeStart.emit(event);
1130+
this.changeAny.emit(event);
1131+
}
1132+
public onResize(): void {
1133+
var event = this.getEventOutput();
1134+
this.resize.emit(event);
1135+
this.resizeAny.emit(event);
1136+
this.change.emit(event);
1137+
this.changeAny.emit(event);
1138+
}
1139+
public onResizeStop(): void {
1140+
var event = this.getEventOutput();
1141+
this.resizeStop.emit(event);
1142+
this.resizeAny.emit(event);
1143+
this.changeStop.emit(event);
1144+
this.changeAny.emit(event);
1145+
}
1146+
public onDragStart(): void {
1147+
var event = this.getEventOutput();
1148+
this.dragStart.emit(event);
1149+
this.dragAny.emit(event);
1150+
this.changeStart.emit(event);
1151+
this.changeAny.emit(event);
1152+
}
1153+
public onDrag(): void {
1154+
var event = this.getEventOutput();
1155+
this.drag.emit(event);
1156+
this.dragAny.emit(event);
1157+
this.change.emit(event);
1158+
this.changeAny.emit(event);
1159+
}
1160+
public onDragStop(): void {
1161+
var event = this.getEventOutput();
1162+
this.dragStop.emit(event);
1163+
this.dragAny.emit(event);
1164+
this.changeStop.emit(event);
1165+
this.changeAny.emit(event);
1166+
}
1167+
11131168
public ngOnInit(): void {
11141169
this._renderer.setElementClass(this._ngEl.nativeElement, 'grid-item', true);
11151170
if (this._ngGrid.autoStyle) this._renderer.setElementStyle(this._ngEl.nativeElement, 'position', 'absolute');

‎src/app.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,12 @@ <h1>Angular 2 Grid Demo</h1>
111111
<input type="checkbox" class="form-control" name="maintain_ratio" ngControl="maintain_ratio" [(ngModel)]="gridConfig.maintain_ratio" [disabled]="ratioDisabled" />
112112
</label>
113113
</div>
114+
<div class="form-group">
115+
<label>
116+
Prefer New Items
117+
<input type="checkbox" class="form-control" name="prefer_new" ngControl="prefer_new" [(ngModel)]="gridConfig.prefer_new" />
118+
</label>
119+
</div>
114120
</div>
115121
<div class="form-inline">
116122
<div class="form-group">
@@ -142,7 +148,7 @@ <h1>Angular 2 Grid Demo</h1>
142148
</div>
143149
</div>
144150
<div [ngGrid]="gridConfig">
145-
<div *ngFor="#box of boxes; #i = index" [ngGridItem]="{'dragHandle': '.handle'}" (itemChange)="updateItem(i, $event)" (resize)="onResize(i, $event)" (drag)="onDrag(i, $event)">
151+
<div *ngFor="#box of boxes; #i = index" [ngGridItem]="{'dragHandle': '.handle', 'col': 1, 'row': 1, 'sizex': 1, 'sizey': 1}" (itemChange)="updateItem(i, $event)" (resize)="onResize(i, $event)" (drag)="onDrag(i, $event)">
146152
<div class="handle"></div>
147153
{{box}}
148154
</div>

‎src/app.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ class MyAppComponent {
3434
'fix_to_grid': false,
3535
'auto_style': true,
3636
'auto_resize': true,
37-
'maintain_ratio': false
37+
'maintain_ratio': false,
38+
'prefer_new': false
3839
};
3940
private curItem = {
4041
'col': 0,

0 commit comments

Comments
 (0)