Change to use gulp as the build system, rather than including static files. Change the file structure to make it work smoother. Update the README also

Author: BTMorton

.gitignore

@@ -1,4 +1,4 @@
-*.js
-*.js.map
 typings
 npm-debug.log
+dist/
+node_modules/

README.md

@@ -11,20 +11,20 @@ The demo included in this repo follows the [Angular 2 quick start](https://angul
 #### Setup
 ----------
 
-First you'll need to install [Node](http://nodejs.org). Then run:
+To use the Angular 2 Grid system, simply run `npm install angular2-grid` and then include NgGrid.ts into your typescript compilation. No more work needed!
+
+If you want to help with development or try the demo, it's less simple, but not hard. First you'll need to install [Node](http://nodejs.org) and check out a copy of the repo. Then run:
 
 ```shell
-$ npm install -g tsd typescript
-$ tsd install angular2/
-$ tsc -m commonjs -t es5 -d --sourcemap --emitDecoratorMetadata --experimentalDecorators
+$ npm install --dev
+$ gulp build
 ```
 
-This will give you a fully compiled version of the demo that you can run using the HTTP server of your choice. Currently, it points to the following locations to get the required angular files:
-```
-- https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js
-- https://jspm.io/[email protected]
-- https://code.angularjs.org/2.0.0-alpha.34/angular2.dev.js
-```
+This will give you a fully compiled version of the demo that you can run using the HTTP server of your choice.
+
+You can also use `gulp watch` to compile the demo and have gulp watch for any changes.
+
+NOTE: By default Angular 2 and System.js are not listed as actual dependencies, but as peer dependencies, so that npm doesn't install them on systems that just require the install file. If they are not installed, this could cause gulp to break. To fix this, run `npm install angular2 systemjs` and rerun the build command.
 
 #### Config
 -----------

app.d.ts

@@ -22,8 +22,8 @@
   "license": "MIT",
   "ignore": [
     "*",
-    "!NgGrid.ts",
-    "!NgGrid.css"
+    "!src/NgGrid.ts",
+    "!src/NgGrid.css"
   ],
   "repository": {
     "type": "git",

bower.json

@@ -0,0 +1,71 @@
+var gulp = require('gulp');
+var typescript = require('gulp-typescript');
+var merge = require('merge2');
+
+var tsProject = typescript.createProject({
+	declarationFiles: true,
+	module: 'system',
+	target: 'ES5',
+	emitDecoratorMetadata: true,
+	experimentalDecorators: true
+});
+
+var PATHS = {
+	src: {
+		ts: 'src/*.ts',
+		html: 'src/*.html',
+		css: 'src/*.css',
+	},
+	lib: [
+		'node_modules/angular2/node_modules/traceur/bin/traceur-runtime.js',
+		'node_modules/angular2/bundles/angular2.js',
+		'node_modules/systemjs/dist/system-csp-production.js'
+	],
+	typings: 'node_modules/angular2/bundles/typings/angular2/angular2.d.ts'
+};
+
+gulp.task('clean', function (done) {
+	var del = require('del');
+	del(['dist'], done);
+});
+
+gulp.task('ts', function () {
+	
+	var tsResult = gulp.src([PATHS.src.ts, PATHS.typings])
+		.pipe(typescript(tsProject));
+
+	return merge([
+		tsResult.js.pipe(gulp.dest('dist')),
+		tsResult.dts.pipe(gulp.dest('src'))
+	]);
+});
+
+gulp.task('html', function () {
+	return gulp.src(PATHS.src.html).pipe(gulp.dest('dist'));
+});
+
+gulp.task('css', function () {
+	return gulp.src(PATHS.src.css).pipe(gulp.dest('dist'));
+});
+
+gulp.task('libs', function () {
+	return gulp.src(PATHS.lib).pipe(gulp.dest('dist/lib'));
+});
+
+gulp.task('build', function() {
+	gulp.start('libs', 'html', 'css', 'ts');
+});
+
+gulp.task('rebuild', ['clean'], function() {
+	gulp.start('build');
+});
+
+gulp.task('watch', ['build'], function () {
+	gulp.watch(PATHS.src.ts, ['ts']);
+	gulp.watch(PATHS.src.html, ['html']);
+	gulp.watch(PATHS.src.css, ['css']);
+});
+
+gulp.task('default', function() {
+	gulp.start('build');
+});

gulpfile.js

@@ -22,10 +22,18 @@
   },
   "homepage": "https://github.com/BTMorton/angular2-grid",
   "peerDependencies": {
-    "angular2": "2.0.0-alpha.35"
+    "angular2": "2.0.0-alpha.35",
+    "systemjs": "^0.18.17"
   },
   "files": [
-    "NgGrid.ts",
-    "NgGrid.css"
-  ]
+    "src/NgGrid.ts",
+    "src/NgGrid.css"
+  ],
+  "devDependencies": {
+    "del": "^1.2.1",
+    "gulp": "^3.9.0",
+    "gulp-typescript": "^2.8.1",
+    "merge2": "^0.3.6",
+    "typescript": "^1.5.3"
+  }
 }

index.html

@@ -1,4 +1,3 @@
-/// <reference path="typings/angular2/angular2.d.ts" />
 import { ElementRef, Renderer, EventEmitter, DynamicComponentLoader, KeyValueDiffers } from 'angular2/angular2';
 export declare class NgGrid {
     private _differs;
@@ -56,7 +55,7 @@ export declare class NgGrid {
         y: number;
     };
     onCheck(): void;
-    setMargins(margins: any): void;
+    setMargins(margins: Array<string>): void;
     enableDrag(): void;
     disableDrag(): void;
     enableResize(): void;

package.json

@@ -1,5 +1,3 @@
-/// <reference path="typings/angular2/angular2.d.ts" />
-
 import {Component, View, Directive, ElementRef, Renderer, EventEmitter, DynamicComponentLoader, Host, ViewEncapsulation, Type, ComponentRef, LifecycleEvent, KeyValueDiffer, KeyValueDiffers} from 'angular2/angular2';
 
 @Directive({
@@ -46,7 +44,7 @@ export class NgGrid {
 	private _draggingItem: NgGridItem = null;
 	private _resizingItem: NgGridItem = null;
 	private _resizeDirection: string = null;
-	private _itemGrid = {1: {1: null}};
+	private _itemGrid: Map<number, Map<number, NgGridItem>> = {1: {1: null}};
 	private _containerWidth: number;
 	private _containerHeight: number;
 	private _maxCols:number = 0;
@@ -81,7 +79,7 @@ export class NgGrid {
 	private _config = NgGrid.CONST_DEFAULT_CONFIG;
 
 	//	[ng-grid] attribute handler
-	set config(v) {
+	set config(v: any) {
 		this._config = v;
 
 		if (this._differ == null && v != null) {
@@ -99,7 +97,7 @@ export class NgGrid {
 	}
 
 	//	Public methods
-	public setConfig(config): void {
+	public setConfig(config: any): void {
 		var maxColRowChanged = false;
 		for (var x in config) {
 			var val = config[x];
@@ -171,13 +169,13 @@ export class NgGrid {
 				}
 			}
 
-			for (var r = 1; r <= this._getMaxRow(); r++) {
+			for (var r: number = 1; r <= this._getMaxRow(); r++) {
 				if (this._itemGrid[r] != null) {
-					for (var c = 1; c <= this._getMaxCol(); c++) {
+					for (var c: number = 1; c <= this._getMaxCol(); c++) {
 						if (this._itemGrid[r] != null && this._itemGrid[r][c] != null) {
-							var item = this._itemGrid[r][c];
-							var pos = item.getGridPosition();
-							var dims = item.getSize();
+							var item: NgGridItem = this._itemGrid[r][c];
+							var pos: {'col': number, 'row': number} = item.getGridPosition();
+							var dims: {'x': number, 'y': number} = item.getSize();
 
 							if ((this._maxCols > 0 && (pos.col + dims.x - 1) > this._maxCols) || (this._maxRows > 0 && (pos.row + dims.y - 1) > this._maxRows)) {
 								this._removeFromGrid(item);
@@ -209,15 +207,15 @@ export class NgGrid {
 		}
 
 		if (this._autoResize && this._maxCols > 0) {
-			var maxWidth = this._ngEl.nativeElement.parentElement.getBoundingClientRect().width;
+			var maxWidth: number = this._ngEl.nativeElement.parentElement.getBoundingClientRect().width;
 
-			var colWidth = Math.floor(maxWidth / this._maxCols);
+			var colWidth: number = Math.floor(maxWidth / this._maxCols);
 			colWidth -= (this.marginLeft + this.marginRight);
 			this.colWidth = colWidth;
 		} else if (this._autoResize && this._maxRows > 0) {
-			var maxHeight = window.innerHeight;
+			var maxHeight: number = window.innerHeight;
 
-			var rowHeight = Math.floor(maxHeight / this._maxRows);
+			var rowHeight: number = Math.floor(maxHeight / this._maxRows);
 			rowHeight -= (this.marginTop + this.marginBottom);
 			this.rowHeight = rowHeight;
 		}
@@ -246,7 +244,7 @@ export class NgGrid {
 		}
 	}
 
-	public setMargins(margins): void {
+	public setMargins(margins: Array<string>): void {
 		this.marginTop = parseInt(margins[0]);
 		this.marginRight = margins.length >= 2 ? parseInt(margins[1]) : this.marginTop;
 		this.marginBottom = margins.length >= 3 ? parseInt(margins[2]) : this.marginTop;
@@ -283,7 +281,7 @@ export class NgGrid {
 	}
 
 	//	Private methods
-	private _onResize(e) {
+	private _onResize(e: any): void {
 		if (this._autoResize && this._maxCols > 0) {
 			var maxWidth = this._ngEl.nativeElement.parentElement.getBoundingClientRect().width;
 
@@ -306,9 +304,9 @@ export class NgGrid {
 	}
 
 	private _applyChanges(changes: any): void {
-		changes.forEachAddedItem((record) => { this._config[record.key] = record.currentValue; });
-		changes.forEachChangedItem((record) => { this._config[record.key] = record.currentValue; });
-		changes.forEachRemovedItem((record) => { delete this._config[record.key]; });
+		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]; });
 		this.setConfig(this._config);
 	}
 
@@ -481,7 +479,7 @@ export class NgGrid {
 
 			this._draggingItem.setGridPosition(itemPos.col, itemPos.row);
 			this._addToGrid(this._draggingItem);
-			console.log("STOP", itemPos);
+			
 			this._cascadeGrid();
 
 			this._draggingItem.stopMoving();
@@ -519,7 +517,7 @@ export class NgGrid {
 		return { 'x': sizex, 'y': sizey };
 	}
 
-	private _calculateGridSize(width, height): {x: number, y: number} {
+	private _calculateGridSize(width: number, height: number): {x: number, y: number} {
         width += this.marginLeft + this.marginRight;
         height += this.marginTop + this.marginBottom;
 
@@ -670,7 +668,6 @@ export class NgGrid {
 					for (var c:number = 1; c <= this._getMaxCol(); c++) {
 						if (this._itemGrid[r] == undefined) break;
 						if (c < lowCol[r]) continue;
-							console.log(r, c, lowCol);
 
 						if (this._itemGrid[r][c] != null) {
 							var item = this._itemGrid[r][c];
@@ -891,7 +888,7 @@ export class NgGridItem {
 	public resizeStop: EventEmitter = new EventEmitter();
 
 	//	Default config
-	private static CONST_DEFAULT_CONFIG = {
+	private static CONST_DEFAULT_CONFIG: { 'col': number, 'row': number, 'sizex': number, 'sizey': number, 'dragHandle': string, 'resizeHandle': string } = {
 		'col': 1,
 		'row': 1,
 		'sizex': 1,
@@ -918,7 +915,7 @@ export class NgGridItem {
 	private _added: boolean = false;
 
 	//	[ng-grid-item] handler
-	set config(v) {
+	set config(v: any) {
 		var defaults = NgGridItem.CONST_DEFAULT_CONFIG;
 
 		for (var x in defaults)
@@ -947,11 +944,11 @@ export class NgGridItem {
 	//	Public methods
 	public canDrag(e: any): boolean {
 		if (this._dragHandle) {
-			var foundHandle;
-			var paths = e.path;
+			var foundHandle: boolean;
+			var paths: Array<any> = e.path;
 			paths.pop();    //    Get rid of #document
 
-			var last = null;
+			var last: any = null;
 
 			for (var x in paths) {
 				if (last !== null) {
@@ -972,11 +969,11 @@ export class NgGridItem {
 
 	public canResize(e: any): string {
 		if (this._resizeHandle) {
-			var foundHandle;
-			var paths = e.path;
+			var foundHandle: boolean;
+			var paths: Array<any> = e.path;
 			paths.pop();    //    Get rid of #document
 
-			var last = null;
+			var last: any = null;
 
 			for (var x in paths) {
 				if (last !== null) {
@@ -1032,7 +1029,7 @@ export class NgGridItem {
 		}
 	}
 
-	public onDestroy() {
+	public onDestroy(): void {
 		if (this._added) this._ngGrid.removeItem(this);
 	}
 
@@ -1066,7 +1063,7 @@ export class NgGridItem {
 	}
 
 	//	Setters
-	public setConfig(config): void {
+	public setConfig(config: any): void {
 		this._col = config.col;
 		this._row = config.row;
 		this._sizex = config.sizex;
@@ -1091,7 +1088,7 @@ export class NgGridItem {
 		this._col = col;
 		this._row = row;
 		this.gridPosition = {'col': this._col, 'row': this._row};
-		console.log(this.gridPosition);
+		
 		this._recalculatePosition();
 
 		this.itemChange.next({'col': this._col, 'row': this._row, 'sizex': this._sizex, 'sizey': this._sizey});