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

Commit

Permalink
Update to work with beta 1 & 2. Remove form as it breaks things
Browse files Browse the repository at this point in the history
  • Loading branch information
@BTMorton
BTMorton committed Jan 31, 2016
1 parent d9a26eb commit 688b049
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 80 deletions.
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,10 @@
"dist/NgGrid.*"
],
"peerDependencies": {
"angular2": "2.0.0-beta.0"
"angular2": "^2.0.0-beta.1"
},
"devDependencies": {
"angular2": "2.0.0-beta.0",
"angular2": "^2.0.0-beta.1",
"del": "^1.2.1",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
Expand Down
100 changes: 49 additions & 51 deletions src/NgGrid.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,8 +96,8 @@ export class NgGrid implements OnInit, DoCheck {

// Public methods
public ngOnInit(): void {
this._renderer.setElementClass(this._ngEl, 'grid', true);
if (this.autoStyle) this._renderer.setElementStyle(this._ngEl, 'position', 'relative');
this._renderer.setElementClass(this._ngEl.nativeElement, 'grid', true);
if (this.autoStyle) this._renderer.setElementStyle(this._ngEl.nativeElement, 'position', 'relative');
this.setConfig(this._config);
}

Expand Down Expand Up @@ -790,7 +790,6 @@ export class NgGrid implements OnInit, DoCheck {
pos.col = 1;
}
}
console.log(this._hasGridCollision(pos, dims), this._isWithinBounds(pos, dims), pos, dims);
return pos;
}

Expand Down Expand Up @@ -839,8 +838,8 @@ export class NgGrid implements OnInit, DoCheck {
var maxRow = Math.max(this._getMaxRow(), row);
var maxCol = Math.max(this._getMaxCol(), col);

this._renderer.setElementStyle(this._ngEl, 'width', "100%");//(maxCol * (this.colWidth + this.marginLeft + this.marginRight))+"px");
this._renderer.setElementStyle(this._ngEl, 'height', (maxRow * (this.rowHeight + this.marginTop + this.marginBottom)) + "px");
this._renderer.setElementStyle(this._ngEl.nativeElement, 'width', "100%");//(maxCol * (this.colWidth + this.marginLeft + this.marginRight))+"px");
this._renderer.setElementStyle(this._ngEl.nativeElement, 'height', (maxRow * (this.rowHeight + this.marginTop + this.marginBottom)) + "px");
}

private _filterGrid(): void {
Expand Down Expand Up @@ -932,8 +931,7 @@ export class NgGrid implements OnInit, DoCheck {

private _createPlaceholder(pos: {col: number, row:number}, dims: {x: number, y: number}) {
var me = this;

this._loader.loadNextToLocation((<Type>NgGridPlaceholder), (<any>this._ngEl).parentView._view.elementRefs[(<any>this._ngEl).boundElementIndex + 1]).then(componentRef => {
this._loader.loadNextToLocation((<Type>NgGridPlaceholder), (<any>this._ngEl).internalElement.parentView.appElements[(<any>this._ngEl).internalElement.proto.index + 1].ref).then(componentRef => {
me._placeholderRef = componentRef;
var placeholder = componentRef.instance;
// me._placeholder.setGrid(me);
Expand Down Expand Up @@ -983,7 +981,7 @@ export class NgGridItem implements OnInit, OnDestroy {
private _row: number = 1;
private _sizex: number = 1;
private _sizey: number = 1;
private _config: any;
private _config = NgGridItem.CONST_DEFAULT_CONFIG;
private _dragHandle: string;
private _resizeHandle: string;
private _borderSize: number;
Expand Down Expand Up @@ -1016,8 +1014,8 @@ export class NgGridItem implements OnInit, OnDestroy {
constructor(private _ngEl: ElementRef, private _renderer: Renderer, private _ngGrid: NgGrid) { }

public ngOnInit(): void {
this._renderer.setElementClass(this._ngEl, 'grid-item', true);
if (this._ngGrid.autoStyle) this._renderer.setElementStyle(this._ngEl, 'position', 'absolute');
this._renderer.setElementClass(this._ngEl.nativeElement, 'grid-item', true);
if (this._ngGrid.autoStyle) this._renderer.setElementStyle(this._ngEl.nativeElement, 'position', 'absolute');
this._recalculateDimensions();
this._recalculatePosition();

Expand Down Expand Up @@ -1066,24 +1064,24 @@ export class NgGridItem implements OnInit, OnDestroy {
public onMouseMove(e: any): void {
if (this._ngGrid.autoStyle) {
if (this._ngGrid.dragEnable && this.canDrag(e)) {
this._renderer.setElementStyle(this._ngEl, 'cursor', 'move');
this._renderer.setElementStyle(this._ngEl.nativeElement, 'cursor', 'move');
} else if (this._ngGrid.resizeEnable && !this._resizeHandle && this.isResizable) {
var mousePos = this._getMousePosition(e);

if (mousePos.left < this._elemWidth && mousePos.left > this._elemWidth - this._borderSize
&& mousePos.top < this._elemHeight && mousePos.top > this._elemHeight - this._borderSize) {
this._renderer.setElementStyle(this._ngEl, 'cursor', 'nwse-resize');
this._renderer.setElementStyle(this._ngEl.nativeElement, 'cursor', 'nwse-resize');
} else if (mousePos.left < this._elemWidth && mousePos.left > this._elemWidth - this._borderSize) {
this._renderer.setElementStyle(this._ngEl, 'cursor', 'ew-resize');
this._renderer.setElementStyle(this._ngEl.nativeElement, 'cursor', 'ew-resize');
} else if (mousePos.top < this._elemHeight && mousePos.top > this._elemHeight - this._borderSize) {
this._renderer.setElementStyle(this._ngEl, 'cursor', 'ns-resize');
this._renderer.setElementStyle(this._ngEl.nativeElement, 'cursor', 'ns-resize');
} else {
this._renderer.setElementStyle(this._ngEl, 'cursor', 'default');
this._renderer.setElementStyle(this._ngEl.nativeElement, 'cursor', 'default');
}
} else if (this._ngGrid.resizeEnable && this.canResize(e)) {
this._renderer.setElementStyle(this._ngEl, 'cursor', 'nwse-resize');
this._renderer.setElementStyle(this._ngEl.nativeElement, 'cursor', 'nwse-resize');
} else {
this._renderer.setElementStyle(this._ngEl, 'cursor', 'default');
this._renderer.setElementStyle(this._ngEl.nativeElement, 'cursor', 'default');
}
}
}
Expand Down Expand Up @@ -1175,45 +1173,45 @@ export class NgGridItem implements OnInit, OnDestroy {
case 'up':
case 'left':
default:
this._renderer.setElementStyle(this._ngEl, 'left', x+"px");
this._renderer.setElementStyle(this._ngEl, 'top', y+"px");
this._renderer.setElementStyle(this._ngEl, 'right', null);
this._renderer.setElementStyle(this._ngEl, 'bottom', null);
this._renderer.setElementStyle(this._ngEl.nativeElement, 'left', x+"px");
this._renderer.setElementStyle(this._ngEl.nativeElement, 'top', y+"px");
this._renderer.setElementStyle(this._ngEl.nativeElement, 'right', null);
this._renderer.setElementStyle(this._ngEl.nativeElement, 'bottom', null);
break;
case 'right':
this._renderer.setElementStyle(this._ngEl, 'right', x+"px");
this._renderer.setElementStyle(this._ngEl, 'top', y+"px");
this._renderer.setElementStyle(this._ngEl, 'left', null);
this._renderer.setElementStyle(this._ngEl, 'bottom', null);
this._renderer.setElementStyle(this._ngEl.nativeElement, 'right', x+"px");
this._renderer.setElementStyle(this._ngEl.nativeElement, 'top', y+"px");
this._renderer.setElementStyle(this._ngEl.nativeElement, 'left', null);
this._renderer.setElementStyle(this._ngEl.nativeElement, 'bottom', null);
break;
case 'down':
this._renderer.setElementStyle(this._ngEl, 'left', x+"px");
this._renderer.setElementStyle(this._ngEl, 'bottom', y+"px");
this._renderer.setElementStyle(this._ngEl, 'right', null);
this._renderer.setElementStyle(this._ngEl, 'top', null);
this._renderer.setElementStyle(this._ngEl.nativeElement, 'left', x+"px");
this._renderer.setElementStyle(this._ngEl.nativeElement, 'bottom', y+"px");
this._renderer.setElementStyle(this._ngEl.nativeElement, 'right', null);
this._renderer.setElementStyle(this._ngEl.nativeElement, 'top', null);
break;
}
this._elemLeft = x;
this._elemTop = y;
}

public setDimensions(w: number, h: number): void {
this._renderer.setElementStyle(this._ngEl, 'width', w+"px");
this._renderer.setElementStyle(this._ngEl, 'height', h+"px");
this._renderer.setElementStyle(this._ngEl.nativeElement, 'width', w+"px");
this._renderer.setElementStyle(this._ngEl.nativeElement, 'height', h+"px");
this._elemWidth = w;
this._elemHeight = h;
}

public startMoving(): void {
this._renderer.setElementClass(this._ngEl, 'moving', true);
this._renderer.setElementClass(this._ngEl.nativeElement, 'moving', true);
var style = window.getComputedStyle(this._ngEl.nativeElement);
if (this._ngGrid.autoStyle) this._renderer.setElementStyle(this._ngEl, 'z-index', (parseInt(style.getPropertyValue('z-index')) + 1).toString());
if (this._ngGrid.autoStyle) this._renderer.setElementStyle(this._ngEl.nativeElement, 'z-index', (parseInt(style.getPropertyValue('z-index')) + 1).toString());
}

public stopMoving(): void {
this._renderer.setElementClass(this._ngEl, 'moving', false);
this._renderer.setElementClass(this._ngEl.nativeElement, 'moving', false);
var style = window.getComputedStyle(this._ngEl.nativeElement);
if (this._ngGrid.autoStyle) this._renderer.setElementStyle(this._ngEl, 'z-index', (parseInt(style.getPropertyValue('z-index')) - 1).toString());
if (this._ngGrid.autoStyle) this._renderer.setElementStyle(this._ngEl.nativeElement, 'z-index', (parseInt(style.getPropertyValue('z-index')) - 1).toString());
}

public recalculateSelf(): void {
Expand Down Expand Up @@ -1269,8 +1267,8 @@ export class NgGridPlaceholder implements OnInit {
constructor (private _ngEl: ElementRef, private _renderer: Renderer, private _ngGrid: NgGrid) {}

public ngOnInit(): void {
this._renderer.setElementClass(this._ngEl, 'grid-placeholder', true);
if (this._ngGrid.autoStyle) this._renderer.setElementStyle(this._ngEl, 'position', 'absolute');
this._renderer.setElementClass(this._ngEl.nativeElement, 'grid-placeholder', true);
if (this._ngGrid.autoStyle) this._renderer.setElementStyle(this._ngEl.nativeElement, 'position', 'absolute');
}

public setSize(x: number, y: number): void {
Expand All @@ -1290,29 +1288,29 @@ export class NgGridPlaceholder implements OnInit {
case 'up':
case 'left':
default:
this._renderer.setElementStyle(this._ngEl, 'left', x+"px");
this._renderer.setElementStyle(this._ngEl, 'top', y+"px");
this._renderer.setElementStyle(this._ngEl, 'right', null);
this._renderer.setElementStyle(this._ngEl, 'bottom', null);
this._renderer.setElementStyle(this._ngEl.nativeElement, 'left', x+"px");
this._renderer.setElementStyle(this._ngEl.nativeElement, 'top', y+"px");
this._renderer.setElementStyle(this._ngEl.nativeElement, 'right', null);
this._renderer.setElementStyle(this._ngEl.nativeElement, 'bottom', null);
break;
case 'right':
this._renderer.setElementStyle(this._ngEl, 'right', x+"px");
this._renderer.setElementStyle(this._ngEl, 'top', y+"px");
this._renderer.setElementStyle(this._ngEl, 'left', null);
this._renderer.setElementStyle(this._ngEl, 'bottom', null);
this._renderer.setElementStyle(this._ngEl.nativeElement, 'right', x+"px");
this._renderer.setElementStyle(this._ngEl.nativeElement, 'top', y+"px");
this._renderer.setElementStyle(this._ngEl.nativeElement, 'left', null);
this._renderer.setElementStyle(this._ngEl.nativeElement, 'bottom', null);
break;
case 'down':
this._renderer.setElementStyle(this._ngEl, 'left', x+"px");
this._renderer.setElementStyle(this._ngEl, 'bottom', y+"px");
this._renderer.setElementStyle(this._ngEl, 'right', null);
this._renderer.setElementStyle(this._ngEl, 'top', null);
this._renderer.setElementStyle(this._ngEl.nativeElement, 'left', x+"px");
this._renderer.setElementStyle(this._ngEl.nativeElement, 'bottom', y+"px");
this._renderer.setElementStyle(this._ngEl.nativeElement, 'right', null);
this._renderer.setElementStyle(this._ngEl.nativeElement, 'top', null);
break;
}
}

private _setDimensions(w: number, h: number): void {
this._renderer.setElementStyle(this._ngEl, 'width', w+"px");
this._renderer.setElementStyle(this._ngEl, 'height', h+"px");
this._renderer.setElementStyle(this._ngEl.nativeElement, 'width', w+"px");
this._renderer.setElementStyle(this._ngEl.nativeElement, 'height', h+"px");
}

// Private methods
Expand Down
50 changes: 25 additions & 25 deletions src/app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,119 +3,119 @@
<h1>Angular 2 Grid Demo</h1>
<p>This is a simple demo used for creation/testing of <a href="https://github.com/BTMorton/angular2-grid">angular2-grid</a>, a grid-based drag/drop/resize plugin directive for <a href="http://angular.io">Angular 2</a>. It makes use of angular directives so that in order to include it, all you need to do is add an "[ngGrid]" attribute to your container and an "[ngGridItem]" to each of your grid items. It even works with the ngFor directive to add boxes on the fly!</p>
<br />
<form>
<!-- <form>
<div class="form-inline">
<div class="form-group">
<label>
Fix to Grid
<input type="checkbox" name="fix_to_grid" />
</label>
<input type="checkbox" name="fix_to_grid" ngControl="fix_to_grid" [(ngModel)]="gridConfig.fix_to_grid" />
</div>
<div class="form-group">
<label>
Draggable
<input type="checkbox" name="draggable" />
</label>
<input type="checkbox" name="draggable" ngControl="draggable" [(ngModel)]="gridConfig.draggable" />
</div>
<div class="form-group">
<label>
Resizable
<input type="checkbox" name="resizable" />
</label>
<input type="checkbox" name="resizable" ngControl="resizable" [(ngModel)]="gridConfig.resizable" />
</div>
<div class="form-group">
<label>
Auto-Resize Rows/Columns
<input type="checkbox" name="auto_resize" />
</label>
<input type="checkbox" name="auto_resize" ngControl="auto_resize" [(ngModel)]="gridConfig.auto_resize" />
</div>
<div class="form-group">
<label>
Cascade Direction
<select class="form-control" name="cascade">
<!-- <option value="">Off</option>
<option value="up">Up</option>
<option value="down">Down</option>
<option value="left">Left</option>
<option value="right">Right</option> --
</select>
</label>
<select name="cascade" ngControl="cascade" [(ngModel)]="gridConfig.cascade">
<option value="">Off</option>
<option value="up">Up</option>
<option value="down">Down</option>
<option value="left">Left</option>
<option value="right">Right</option>
</select>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label>
Column Width
<input type="number" class="form-control" name="col_width" ngControl="col_width" [(ngModel)]="gridConfig.col_width" />
<input type="number" class="form-control" name="col_width" />
</label>
</div>
<div class="form-group">
<label>
Row Height
<input type="number" class="form-control" name="row_height" ngControl="row_height" [(ngModel)]="gridConfig.row_height" />
<input type="number" class="form-control" name="row_height" />
</label>
</div>
<div class="form-group">
<label>
Margins
<input type="number" class="form-control" name="margins" ngControl="margins" [(ngModel)]="gridConfig.margins[0]" />
<input type="number" class="form-control" name="margins" />
</label>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label>
Minimum Column Width
<input type="number" class="form-control" name="min_width" ngControl="min_width" [(ngModel)]="gridConfig.min_width" />
<input type="number" class="form-control" name="min_width" />
</label>
</div>
<div class="form-group">
<label>
Minimum Row Height
<input type="number" class="form-control" name="min_height" ngControl="min_height" [(ngModel)]="gridConfig.min_height" />
<input type="number" class="form-control" name="min_height" />
</label>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label>
Max Columns
<input type="number" class="form-control" name="max_cols" ngControl="max_cols" [(ngModel)]="gridConfig.max_cols" [disabled]="gridConfig.max_rows > 0" />
<input type="number" class="form-control" name="max_cols" [attr.disabled]="gridConfig.max_rows > 0" />
</label>
</div>
<div class="form-group">
<label>
Max Rows
<input type="number" class="form-control" name="max_rows" ngControl="max_rows" [(ngModel)]="gridConfig.max_rows" [disabled]="gridConfig.max_cols > 0" />
<input type="number" class="form-control" name="max_rows" [attr.disabled]="gridConfig.max_cols > 0" />
</label>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label>
Min Columns
<input type="number" class="form-control" name="min_cols" ngControl="min_cols" [(ngModel)]="gridConfig.min_cols" />
<input type="number" class="form-control" name="min_cols" />
</label>
</div>
<div class="form-group">
<label>
Min Rows
<input type="number" class="form-control" name="min_rows" ngControl="min_rows" [(ngModel)]="gridConfig.min_rows" />
<input type="number" class="form-control" name="min_rows" />
</label>
</div>
</div>
<div class="form-inline">
<label>
Get Item Position &amp; Size
<select name="itemCheck" class="form-control" ngControl="item_check" [(ngModel)]="itemCheck">
<option *ngFor="#box of boxes; #i = index" [attr.value]="i">{{box}}</option>
<select name="itemCheck" class="form-control">
<!-- <option *ngFor="#box of boxes; #i = index" [attr.value]="i">{{box}}</option> --
</select>
</label>
Col: {{ curItem.col }}, Row: {{ curItem.row }}, Size X: {{ curItem.sizex }}, Size Y: {{ curItem.sizey }}
<a (click)="removeBox()" class="btn btn-primary">Remove Box</a>
</div>
</form>
</form> -->
<a (click)="addBox()" class="btn btn-primary pull-right">Add Box</a>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/app.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Component, View, ViewEncapsulation, enableProdMode } from 'angular2/core';
import { CORE_DIRECTIVES, NgStyle, FORM_DIRECTIVES } from 'angular2/common';
import { CORE_DIRECTIVES, FORM_DIRECTIVES } from 'angular2/common';
import { bootstrap } from 'angular2/platform/browser';
import { NgGrid, NgGridItem } from "./NgGrid";

Expand All @@ -10,7 +10,7 @@ import { NgGrid, NgGridItem } from "./NgGrid";
@View({
templateUrl: 'app.html',
styleUrls: ['app.css', 'NgGrid.css'],
directives: [CORE_DIRECTIVES, NgStyle, NgGrid, NgGridItem, FORM_DIRECTIVES],
directives: [CORE_DIRECTIVES, NgGrid, NgGridItem, FORM_DIRECTIVES],
encapsulation: ViewEncapsulation.None
})
// Component controller
Expand Down

0 comments on commit 688b049

Please sign in to comment.