Merge branch 'master' of github.com:BTMorton/angular2-grid

README.md

@@ -62,8 +62,9 @@ The defaults for the grid item are:
     'sizex': 1,             //  The start width in terms of columns for the item
     'sizey': 1,             //  The start height in terms of rows for the item
     'dragHandle': null,     //  The selector to be used for the drag handle. If null, uses the whole item
-    'resizeHandle': null,   //  The selector to be used for the resize handle. If null, uses 15 pixels from the right for horizontal resize, 
-                            //    15 pixels from the bottom for vertical, and the square in the corner bottom-right for both
+    'resizeHandle': null,   //  The selector to be used for the resize handle. If null, uses 'borderSize' pixels from the right for horizontal resize, 
+                            //    'borderSize' pixels from the bottom for vertical, and the square in the corner bottom-right for both
+    'borderSize': 15,
     'fixed': false,         //  If the grid item should be cascaded or not. If yes, manual movement is required
     'draggable': true,      //  If the grid item can be dragged. If this or the global setting is set to false, the item cannot be dragged.
     'resizable': true       //  If the grid item can be resized. If this or the global setting is set to false, the item cannot be resized.

src/NgGrid.d.ts

@@ -125,6 +125,7 @@ export declare class NgGridItem implements OnInit {
     private _config;
     private _dragHandle;
     private _resizeHandle;
+    private _borderSize;
     private _elemWidth;
     private _elemHeight;
     private _elemLeft;

src/NgGrid.ts

@@ -920,7 +920,7 @@ export class NgGridItem implements OnInit {
 	public resizeStop: EventEmitter<any> = new EventEmitter();
 
 	//	Default config
-	private static CONST_DEFAULT_CONFIG: { 'col': number, 'row': number, 'sizex': number, 'sizey': number, 'dragHandle': string, 'resizeHandle': string, 'fixed': boolean, 'draggable': boolean, 'resizable': boolean } = {
+	private static CONST_DEFAULT_CONFIG: { 'col': number, 'row': number, 'sizex': number, 'sizey': number, 'dragHandle': string, 'resizeHandle': string, 'fixed': boolean, 'draggable': boolean, 'resizable': boolean, 'bordersize': number } = {
 		'col': 1,
 		'row': 1,
 		'sizex': 1,
@@ -929,7 +929,8 @@ export class NgGridItem implements OnInit {
 		'resizeHandle': null,
 		'fixed': false,
 		'draggable': true,
-		'resizable': true
+		'resizable': true,
+		'bordersize': 15
 	}
 
 	public gridPosition = {'col': 1, 'row': 1}
@@ -946,6 +947,7 @@ export class NgGridItem implements OnInit {
 	private _config: any;
 	private _dragHandle: string;
 	private _resizeHandle: string;
+	private _borderSize: number;
 	private _elemWidth: number;
 	private _elemHeight: number;
 	private _elemLeft: number;
@@ -1004,13 +1006,13 @@ export class NgGridItem implements OnInit {
 		}
 
 		var mousePos = this._getMousePosition(e);
-		
-		if (mousePos.left < this._elemWidth && mousePos.left > this._elemWidth - 15
-			&& mousePos.top < this._elemHeight && mousePos.top > this._elemHeight - 15) {
+
+		if (mousePos.left < this._elemWidth && mousePos.left > this._elemWidth - this._borderSize
+			&& mousePos.top < this._elemHeight && mousePos.top > this._elemHeight - this._borderSize) {
 			return 'both';
-		} else if (mousePos.left < this._elemWidth && mousePos.left > this._elemWidth - 15) {
+		} else if (mousePos.left < this._elemWidth && mousePos.left > this._elemWidth - this._borderSize) {
 			return 'width';
-		} else if (mousePos.top < this._elemHeight && mousePos.top > this._elemHeight - 15) {
+		} else if (mousePos.top < this._elemHeight && mousePos.top > this._elemHeight - this._borderSize) {
 			return 'height';
 		}
 
@@ -1021,16 +1023,19 @@ export class NgGridItem implements OnInit {
 		if (this._ngGrid.autoStyle) {
 			if (this._ngGrid.dragEnable && this.canDrag(e)) {
 				this._renderer.setElementStyle(this._ngEl, 'cursor', 'move');
-			} else if (this._ngGrid.resizeEnable && !this._resizeHandle && this.isResizable) {
+			} 
+			if (this._ngGrid.resizeEnable && !this._resizeHandle && this.isResizable) {
 				var mousePos = this._getMousePosition(e);
 
-				if (mousePos.left < this._elemWidth && mousePos.left > this._elemWidth - 15
-					&& mousePos.top < this._elemHeight && mousePos.top > this._elemHeight - 15) {
+				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');
-				} else if (mousePos.left < this._elemWidth && mousePos.left > this._elemWidth - 15) {
+				} else if (mousePos.left < this._elemWidth && mousePos.left > this._elemWidth - this._borderSize) {
 					this._renderer.setElementStyle(this._ngEl, 'cursor', 'ew-resize');
-				} else if (mousePos.top < this._elemHeight && mousePos.top > this._elemHeight - 15) {
+				} else if (mousePos.top < this._elemHeight && mousePos.top > this._elemHeight - this._borderSize) {
 					this._renderer.setElementStyle(this._ngEl, 'cursor', 'ns-resize');
+				} else if (this._ngGrid.dragEnable && this.canDrag(e)) {
+					this._renderer.setElementStyle(this._ngEl, 'cursor', 'move');
 				} else {
 					this._renderer.setElementStyle(this._ngEl, 'cursor', 'default');
 				}
@@ -1083,6 +1088,7 @@ export class NgGridItem implements OnInit {
 		this._sizey = config.sizey;
 		this._dragHandle = config.dragHandle;
 		this._resizeHandle = config.resizeHandle;
+		this._borderSize = config.borderSize;
 		this.isDraggable = config.draggable ? true : false;
 		this.isResizable = config.resizable ? true : false;
 		this.isFixed = config.fixed ? true : false;
@@ -1267,4 +1273,4 @@ export class NgGridPlaceholder implements OnInit {
 		var h = (this._ngGrid.rowHeight * this._sizey) + ((this._ngGrid.marginTop + this._ngGrid.marginBottom) * (this._sizey - 1));
 		this._setDimensions(w, h);
 	}
-}
+}