From 7aa2c0937497547c62ed66c776852860ebb85d92 Mon Sep 17 00:00:00 2001 From: pocmanu Date: Thu, 12 Nov 2015 07:33:50 +0100 Subject: [PATCH 1/5] dirty implementation of dropping a box from outside the grid --- src/NgGrid.ts | 86 ++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 64 insertions(+), 22 deletions(-) diff --git a/src/NgGrid.ts b/src/NgGrid.ts index fcef1d6..5aee89f 100644 --- a/src/NgGrid.ts +++ b/src/NgGrid.ts @@ -12,15 +12,18 @@ import {Component, View, Directive, ElementRef, Renderer, EventEmitter, DynamicC '(touchend)': '_onMouseUp($event)', '(window:resize)': '_onResize($event)', '(document:mousemove)': '_onMouseMove($event)', - '(document:mouseup)': '_onMouseUp($event)' + '(document:mouseup)': '_onMouseUp($event)', + '(dragover)': '_onDragOver($event)', + '(drop)': '_onDrop($event)' }, - outputs: ['dragStart', 'drag', 'dragStop', 'resizeStart', 'resize', 'resizeStop'] + outputs: ['dragStart', 'drag', 'dragStop', 'resizeStart', 'resize', 'resizeStop', 'dragOver'] }) export class NgGrid implements OnInit, DoCheck { // Event Emitters public dragStart: EventEmitter = new EventEmitter(); public drag: EventEmitter = new EventEmitter(); public dragStop: EventEmitter = new EventEmitter(); + public dragOver: EventEmitter = new EventEmitter(); public resizeStart: EventEmitter = new EventEmitter(); public resize: EventEmitter = new EventEmitter(); public resizeStop: EventEmitter = new EventEmitter(); @@ -61,6 +64,8 @@ export class NgGrid implements OnInit, DoCheck { private _fixToGrid: boolean = false; private _autoResize: boolean = false; private _differ: KeyValueDiffer; + private _currentTargetPosition; + private _isDraggingFromOutside = false; // Default config private static CONST_DEFAULT_CONFIG = { @@ -485,11 +490,11 @@ export class NgGrid implements OnInit, DoCheck { if (!this._fixToGrid) this._resizingItem.setDimensions(newW, newH); - var bigGrid = this._maxGridSize(itemPos.left + newW + (2*e.movementX), itemPos.top + newH + (2*e.movementY)); - - if (this._resizeDirection == 'height') bigGrid.x = iGridPos.col + itemSize.x; - if (this._resizeDirection == 'width') bigGrid.y = iGridPos.row + itemSize.y; - + var bigGrid = this._maxGridSize(itemPos.left + newW + (2*e.movementX), itemPos.top + newH + (2*e.movementY)); + + if (this._resizeDirection == 'height') bigGrid.x = iGridPos.col + itemSize.x; + if (this._resizeDirection == 'width') bigGrid.y = iGridPos.row + itemSize.y; + this.resize.next(this._resizingItem); this._resizingItem.resize.next(this._resizingItem.getDimensions()); } @@ -612,7 +617,7 @@ export class NgGrid implements OnInit, DoCheck { switch (this.cascade) { case "up": case "down": - default: + default: if (this._maxRows > 0 && itemPos.row + (itemDims.y - 1) >= this._maxRows) { itemPos.col++; } else { @@ -757,6 +762,10 @@ export class NgGrid implements OnInit, DoCheck { pos.row++; this._updateSize(null, pos.row + dims.y - 1); + + if (this._maxRows > 0 && (pos.row + dims.y - 1) > this._maxRows) { + throw new Error("Unable to calculate grid position"); + } } } @@ -775,9 +784,13 @@ export class NgGrid implements OnInit, DoCheck { for (var j = 0; j < dims.y; j++) { if (this._itemGrid[pos.row + j] == null) this._itemGrid[pos.row + j] = {}; for (var i = 0; i < dims.x; i++) { - this._itemGrid[pos.row + j][pos.col + i] = item; - - this._updateSize(pos.col + dims.x - 1, pos.row + dims.y - 1); + if (this._itemGrid[pos.row + j][pos.col + i] == null) { + this._itemGrid[pos.row + j][pos.col + i] = item; + + this._updateSize(pos.col + dims.x - 1, pos.row + dims.y - 1); + } else { + throw new Error("Cannot add item to grid. Space already taken."); + } } } } @@ -844,7 +857,33 @@ export class NgGrid implements OnInit, DoCheck { Object.keys(me._itemGrid).map(function(v) { maxes.push(Math.max.apply(null, Object.keys(me._itemGrid[v]))); }); return Math.max.apply(null, maxes); } - + private _onDragStart(event) { + let newTargetPos = this.getTargetPosition(event); + this._createPlaceholder(newTargetPos, {x: 1, y:3}); + } + private _onDrop(event) { + this._isDraggingFromOutside = false; + this._placeholderRef.dispose(); + } + private _onDragOver(event) { + event.preventDefault(); + let newTargetPos = this.getTargetPosition(event); + console.log(newTargetPos); + if (!this._currentTargetPosition || this._currentTargetPosition.col != newTargetPos.col || this._currentTargetPosition.row != newTargetPos.row) { + this._currentTargetPosition = newTargetPos; + this.dragOver.next(this._currentTargetPosition); + if (!this._isDraggingFromOutside) { + this._isDraggingFromOutside = true; + this._createPlaceholder(newTargetPos, {x: 1, y:3}); + } else { + this._placeholderRef.instance.setGridPosition(newTargetPos.col, newTargetPos.row); + } + } + } + public getTargetPosition = (event) => { + let mousePos = this._getMousePosition(event); + return this._calculateGridPosition(mousePos.left - 65, mousePos.top - 7); + } private _getMousePosition(e: any): {left: number, top: number} { if (((window).TouchEvent && e instanceof TouchEvent) || (e.touches || e.changedTouches)) { e = e.touches.length > 0 ? e.touches[0] : e.changedTouches[0]; @@ -993,12 +1032,12 @@ 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 - 5 + && mousePos.top < this._elemHeight && mousePos.top > this._elemHeight - 5) { return 'both'; - } else if (mousePos.left < this._elemWidth && mousePos.left > this._elemWidth - 15) { + } else if (mousePos.left < this._elemWidth && mousePos.left > this._elemWidth - 5) { return 'width'; - } else if (mousePos.top < this._elemHeight && mousePos.top > this._elemHeight - 15) { + } else if (mousePos.top < this._elemHeight && mousePos.top > this._elemHeight - 5) { return 'height'; } @@ -1009,16 +1048,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) { + } + if (this._ngGrid.resizeEnable && !this._resizeHandle) { 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 - 5 + && mousePos.top < this._elemHeight && mousePos.top > this._elemHeight - 5) { 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 - 5) { 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 - 5) { 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'); } @@ -1252,4 +1294,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); } -} \ No newline at end of file +} From 2f3a5c17aaa92170f4717633fd7b8dac6284d079 Mon Sep 17 00:00:00 2001 From: pocmanu Date: Thu, 26 Nov 2015 13:30:25 +0100 Subject: [PATCH 2/5] ignore reactivex --- .gitignore | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 35d1de2..a12021d 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,5 @@ dist/ node_modules/ bower_components/ coverage/ -test/*.js \ No newline at end of file +test/*.js +@reactivex/ \ No newline at end of file From d2a3d0ceb8673b686582388d0383fdce0506d87a Mon Sep 17 00:00:00 2001 From: pocmanu Date: Fri, 27 Nov 2015 13:30:50 +0100 Subject: [PATCH 3/5] change resize border / cursor --- src/NgGrid.d.ts | 3 + src/NgGrid.ts | 60 ++++---------- test/grid-item-spec.ts | 181 ++++++++++++++++++++--------------------- 3 files changed, 109 insertions(+), 135 deletions(-) diff --git a/src/NgGrid.d.ts b/src/NgGrid.d.ts index 9cb9bd8..62f58d6 100644 --- a/src/NgGrid.d.ts +++ b/src/NgGrid.d.ts @@ -43,6 +43,8 @@ export declare class NgGrid implements OnInit, DoCheck { private _fixToGrid; private _autoResize; private _differ; + private _currentTargetPosition; + private _isDraggingFromOutside; private static CONST_DEFAULT_CONFIG; private _config; config: any; @@ -125,6 +127,7 @@ export declare class NgGridItem implements OnInit { private _config; private _dragHandle; private _resizeHandle; + private _borderSize; private _elemWidth; private _elemHeight; private _elemLeft; diff --git a/src/NgGrid.ts b/src/NgGrid.ts index 04e340c..25562cb 100644 --- a/src/NgGrid.ts +++ b/src/NgGrid.ts @@ -12,18 +12,15 @@ import {Component, View, Directive, ElementRef, Renderer, EventEmitter, DynamicC '(touchend)': '_onMouseUp($event)', '(window:resize)': '_onResize($event)', '(document:mousemove)': '_onMouseMove($event)', - '(document:mouseup)': '_onMouseUp($event)', - '(dragover)': '_onDragOver($event)', - '(drop)': '_onDrop($event)' + '(document:mouseup)': '_onMouseUp($event)' }, - outputs: ['dragStart', 'drag', 'dragStop', 'resizeStart', 'resize', 'resizeStop', 'dragOver'] + outputs: ['dragStart', 'drag', 'dragStop', 'resizeStart', 'resize', 'resizeStop'] }) export class NgGrid implements OnInit, DoCheck { // Event Emitters public dragStart: EventEmitter = new EventEmitter(); public drag: EventEmitter = new EventEmitter(); public dragStop: EventEmitter = new EventEmitter(); - public dragOver: EventEmitter = new EventEmitter(); public resizeStart: EventEmitter = new EventEmitter(); public resize: EventEmitter = new EventEmitter(); public resizeStop: EventEmitter = new EventEmitter(); @@ -859,33 +856,7 @@ export class NgGrid implements OnInit, DoCheck { Object.keys(me._itemGrid).map(function(v) { maxes.push(Math.max.apply(null, Object.keys(me._itemGrid[v]))); }); return Math.max.apply(null, maxes); } - private _onDragStart(event) { - let newTargetPos = this.getTargetPosition(event); - this._createPlaceholder(newTargetPos, {x: 1, y:3}); - } - private _onDrop(event) { - this._isDraggingFromOutside = false; - this._placeholderRef.dispose(); - } - private _onDragOver(event) { - event.preventDefault(); - let newTargetPos = this.getTargetPosition(event); - console.log(newTargetPos); - if (!this._currentTargetPosition || this._currentTargetPosition.col != newTargetPos.col || this._currentTargetPosition.row != newTargetPos.row) { - this._currentTargetPosition = newTargetPos; - this.dragOver.next(this._currentTargetPosition); - if (!this._isDraggingFromOutside) { - this._isDraggingFromOutside = true; - this._createPlaceholder(newTargetPos, {x: 1, y:3}); - } else { - this._placeholderRef.instance.setGridPosition(newTargetPos.col, newTargetPos.row); - } - } - } - public getTargetPosition = (event) => { - let mousePos = this._getMousePosition(event); - return this._calculateGridPosition(mousePos.left - 65, mousePos.top - 7); - } + private _getMousePosition(e: any): {left: number, top: number} { if (((window).TouchEvent && e instanceof TouchEvent) || (e.touches || e.changedTouches)) { e = e.touches.length > 0 ? e.touches[0] : e.changedTouches[0]; @@ -959,7 +930,7 @@ export class NgGridItem implements OnInit { public resizeStop: EventEmitter = 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, @@ -968,7 +939,8 @@ export class NgGridItem implements OnInit { 'resizeHandle': null, 'fixed': false, 'draggable': true, - 'resizable': true + 'resizable': true, + 'bordersize': 15 } public gridPosition = {'col': 1, 'row': 1} @@ -985,6 +957,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; @@ -1043,13 +1016,13 @@ export class NgGridItem implements OnInit { } var mousePos = this._getMousePosition(e); - - if (mousePos.left < this._elemWidth && mousePos.left > this._elemWidth - 5 - && mousePos.top < this._elemHeight && mousePos.top > this._elemHeight - 5) { + + 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 - 5) { + } else if (mousePos.left < this._elemWidth && mousePos.left > this._elemWidth - this._borderSize) { return 'width'; - } else if (mousePos.top < this._elemHeight && mousePos.top > this._elemHeight - 5) { + } else if (mousePos.top < this._elemHeight && mousePos.top > this._elemHeight - this._borderSize) { return 'height'; } @@ -1064,12 +1037,12 @@ export class NgGridItem implements OnInit { if (this._ngGrid.resizeEnable && !this._resizeHandle && this.isResizable) { var mousePos = this._getMousePosition(e); - if (mousePos.left < this._elemWidth && mousePos.left > this._elemWidth - 5 - && mousePos.top < this._elemHeight && mousePos.top > this._elemHeight - 5) { + 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 - 5) { + } 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 - 5) { + } 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'); @@ -1125,6 +1098,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; diff --git a/test/grid-item-spec.ts b/test/grid-item-spec.ts index b5cad60..7dc3079 100644 --- a/test/grid-item-spec.ts +++ b/test/grid-item-spec.ts @@ -33,7 +33,7 @@ export function main() { spyOn(ngGridItem, '_recalculatePosition'); ngGridItem.onInit(); expect(renderSpy.setElementClass).toHaveBeenCalledWith(ngEl, 'grid-item', true); - expect(renderSpy.setElementStyle).toHaveBeenCalledWith(ngEl,'position', 'absolute'); + expect(renderSpy.setElementStyle).toHaveBeenCalledWith(ngEl, 'position', 'absolute'); expect((ngGridItem)._recalculateDimensions).toHaveBeenCalled(); expect((ngGridItem)._recalculatePosition).toHaveBeenCalled(); }); @@ -48,11 +48,11 @@ export function main() { target.parentElement.querySelector.and.returnValue(target); (ngGridItem)._dragHandle = "#id"; - expect(ngGridItem.canDrag({target: target})).toBe(true); + expect(ngGridItem.canDrag({ target: target })).toBe(true); expect(target.parentElement.querySelector).toHaveBeenCalledWith('#id'); target.parentElement.querySelector.and.returnValue({}); - expect(ngGridItem.canDrag({target: target})).toBe(false); + expect(ngGridItem.canDrag({ target: target })).toBe(false); expect(target.parentElement.querySelector).toHaveBeenCalledWith('#id'); }); @@ -61,84 +61,77 @@ export function main() { parentElement: jasmine.createSpyObj('parentElement', ['querySelector']) }; target.parentElement.querySelector.and.returnValue(target); - var e: any = {target: target}; + var e: any = { target: target }; var ngGridItem: NgGridItem = new NgGridItem(null, null, null); var getMousePositionSpy = spyOn(ngGridItem, '_getMousePosition'); - getMousePositionSpy.and.returnValue({left: 0, top: 0}); + getMousePositionSpy.and.returnValue({ left: 0, top: 0 }); - (ngGridItem)._elemHeight = -150; - expect(ngGridItem.canResize(e)).toBe(null); + for (let size of [5, 10, 15]) { - (ngGridItem)._elemHeight = 0; - expect(ngGridItem.canResize(e)).toBe(null); + (ngGridItem)._borderSize = size; + (ngGridItem)._elemHeight = -150; + expect(ngGridItem.canResize(e)).toBe(null); - (ngGridItem)._elemHeight = 1; - expect(ngGridItem.canResize(e)).toBe('height'); + (ngGridItem)._elemHeight = 0; + expect(ngGridItem.canResize(e)).toBe(null); - (ngGridItem)._elemHeight = 10; - expect(ngGridItem.canResize(e)).toBe('height'); + (ngGridItem)._elemHeight = 1; + expect(ngGridItem.canResize(e)).toBe('height'); - (ngGridItem)._elemHeight = 14; - expect(ngGridItem.canResize(e)).toBe('height'); + (ngGridItem)._elemHeight = size - 1; + expect(ngGridItem.canResize(e)).toBe('height'); - (ngGridItem)._elemHeight = 15; - expect(ngGridItem.canResize(e)).toBe(null); + (ngGridItem)._elemHeight = size; + expect(ngGridItem.canResize(e)).toBe(null); - (ngGridItem)._elemHeight = 150; - expect(ngGridItem.canResize(e)).toBe(null); + (ngGridItem)._elemHeight = 150; + expect(ngGridItem.canResize(e)).toBe(null); - (ngGridItem)._elemWidth = -150; - expect(ngGridItem.canResize(e)).toBe(null); + (ngGridItem)._elemWidth = -150; + expect(ngGridItem.canResize(e)).toBe(null); - (ngGridItem)._elemWidth = 0; - expect(ngGridItem.canResize(e)).toBe(null); - - (ngGridItem)._elemWidth = 1; - expect(ngGridItem.canResize(e)).toBe('width'); - - (ngGridItem)._elemWidth = 10; - expect(ngGridItem.canResize(e)).toBe('width'); + (ngGridItem)._elemWidth = 0; + expect(ngGridItem.canResize(e)).toBe(null); - (ngGridItem)._elemWidth = 14; - expect(ngGridItem.canResize(e)).toBe('width'); + (ngGridItem)._elemWidth = 1; + expect(ngGridItem.canResize(e)).toBe('width'); - (ngGridItem)._elemWidth = 15; - expect(ngGridItem.canResize(e)).toBe(null); - - (ngGridItem)._elemWidth = 150; - expect(ngGridItem.canResize(e)).toBe(null); + (ngGridItem)._elemWidth = size - 1; + expect(ngGridItem.canResize(e)).toBe('width'); + (ngGridItem)._elemWidth = size; + expect(ngGridItem.canResize(e)).toBe(null); - (ngGridItem)._elemWidth = -150; - (ngGridItem)._elemHeight = 150; - expect(ngGridItem.canResize(e)).toBe(null); + (ngGridItem)._elemWidth = 150; + expect(ngGridItem.canResize(e)).toBe(null); - (ngGridItem)._elemWidth = 0; - (ngGridItem)._elemHeight = 0; - expect(ngGridItem.canResize(e)).toBe(null); - (ngGridItem)._elemWidth = 1; - (ngGridItem)._elemHeight = 1; - expect(ngGridItem.canResize(e)).toBe('both'); + (ngGridItem)._elemWidth = -150; + (ngGridItem)._elemHeight = 150; + expect(ngGridItem.canResize(e)).toBe(null); - (ngGridItem)._elemWidth = 10; - (ngGridItem)._elemHeight = 10; - expect(ngGridItem.canResize(e)).toBe('both'); + (ngGridItem)._elemWidth = 0; + (ngGridItem)._elemHeight = 0; + expect(ngGridItem.canResize(e)).toBe(null); - (ngGridItem)._elemWidth = 14; - (ngGridItem)._elemHeight = 14; - expect(ngGridItem.canResize(e)).toBe('both'); + (ngGridItem)._elemWidth = 1; + (ngGridItem)._elemHeight = 1; + expect(ngGridItem.canResize(e)).toBe('both'); - (ngGridItem)._elemWidth = 15; - (ngGridItem)._elemHeight = 15; - expect(ngGridItem.canResize(e)).toBe(null); + (ngGridItem)._elemWidth = size - 1; + (ngGridItem)._elemHeight = size - 1; + expect(ngGridItem.canResize(e)).toBe('both'); - (ngGridItem)._elemWidth = 150; - (ngGridItem)._elemHeight = 150; - expect(ngGridItem.canResize(e)).toBe(null); + (ngGridItem)._elemWidth = size; + (ngGridItem)._elemHeight = size; + expect(ngGridItem.canResize(e)).toBe(null); + (ngGridItem)._elemWidth = 150; + (ngGridItem)._elemHeight = 150; + expect(ngGridItem.canResize(e)).toBe(null); + } (ngGridItem)._resizeHandle = "#id"; expect(ngGridItem.canResize(e)).toBe('both'); @@ -146,7 +139,7 @@ export function main() { target.parentElement.querySelector.and.returnValue({}); expect(ngGridItem.canResize(e)).toBe(null); }); - + it("should update the cursor", () => { var e: any = {}; var ngEl: any = {}; @@ -198,6 +191,7 @@ export function main() { (ngGridItem)._resizeHandle = false; (ngGridItem)._elemWidth = 0; (ngGridItem)._elemHeight = 0; + (ngGridItem)._borderSize = 15; ngGrid.resizeEnable = true; (ngGridItem)._getMousePosition.and.returnValue({}); ngGridItem.onMouseMove(e); @@ -213,8 +207,9 @@ export function main() { (ngGridItem)._resizeHandle = false; (ngGridItem)._elemWidth = 0; (ngGridItem)._elemHeight = 10; + (ngGridItem)._borderSize = 15; ngGrid.resizeEnable = true; - (ngGridItem)._getMousePosition.and.returnValue({left: 0, top: 0}); + (ngGridItem)._getMousePosition.and.returnValue({ left: 0, top: 0 }); ngGridItem.onMouseMove(e); expect(ngGridItem.canDrag).not.toHaveBeenCalled(); expect(ngGridItem.canResize).not.toHaveBeenCalled(); @@ -228,8 +223,9 @@ export function main() { (ngGridItem)._resizeHandle = false; (ngGridItem)._elemWidth = 10; (ngGridItem)._elemHeight = 0; + (ngGridItem)._borderSize = 15; ngGrid.resizeEnable = true; - (ngGridItem)._getMousePosition.and.returnValue({left: 0, top: 0}); + (ngGridItem)._getMousePosition.and.returnValue({ left: 0, top: 0 }); ngGridItem.onMouseMove(e); expect(ngGridItem.canDrag).not.toHaveBeenCalled(); expect(ngGridItem.canResize).not.toHaveBeenCalled(); @@ -243,8 +239,9 @@ export function main() { (ngGridItem)._resizeHandle = false; (ngGridItem)._elemWidth = 10; (ngGridItem)._elemHeight = 10; + (ngGridItem)._borderSize = 15; ngGrid.resizeEnable = true; - (ngGridItem)._getMousePosition.and.returnValue({left: 0, top: 0}); + (ngGridItem)._getMousePosition.and.returnValue({ left: 0, top: 0 }); ngGridItem.onMouseMove(e); expect(ngGridItem.canDrag).not.toHaveBeenCalled(); expect(ngGridItem.canResize).not.toHaveBeenCalled(); @@ -262,7 +259,7 @@ export function main() { ngGridItem.onMouseMove(e); expect(ngGridItem.canDrag).toHaveBeenCalled(); expect(ngGridItem.canResize).not.toHaveBeenCalled(); - expect((ngGridItem)._getMousePosition).not.toHaveBeenCalled(); + expect((ngGridItem)._getMousePosition).toHaveBeenCalled(); expect(renderSpy.setElementStyle).toHaveBeenCalledWith(ngEl, 'cursor', 'move'); (ngGridItem.canDrag).calls.reset(); (ngGridItem.canResize).calls.reset(); @@ -497,17 +494,17 @@ export function main() { (ngGridItem)._recalculateDimensions(); expect((ngGridItem).setDimensions).toHaveBeenCalledWith(39, 111); - + ngGrid.minCols = 7; ngGrid.minRows = 8; - + (ngGridItem)._sizex = 1; (ngGridItem)._sizey = 1; (ngGridItem)._recalculateDimensions(); expect((ngGridItem).setDimensions).toHaveBeenCalledWith(39, 111); }); - + it("should recalculate position and dimensions when recalculating self", () => { spyOn(NgGridItem.prototype, "_recalculateDimensions"); spyOn(NgGridItem.prototype, "_recalculatePosition"); @@ -519,61 +516,61 @@ export function main() { expect((ngGridItem)._recalculatePosition).toHaveBeenCalled(); expect((ngGridItem)._recalculateDimensions).toHaveBeenCalled(); }); - + it("should add moving class and styles on startMoving", () => { var renderSpy = jasmine.createSpyObj('renderSpy', ['setElementStyle', 'setElementClass']); var styleSpy = jasmine.createSpyObj('styleSpy', ['getPropertyValue']); styleSpy.getPropertyValue.and.returnValue(100); var oldGetCompStyle = window.getComputedStyle; (window).getComputedStyle = jasmine.createSpy("getComputedStyle").and.returnValue(styleSpy); - + var ngGrid: any = { 'autoStyle': false }; var elem: any = { 'nativeElement': {} }; - + var ngGridItem: NgGridItem = new NgGridItem(elem, renderSpy, ngGrid); ngGridItem.startMoving(); - + expect(window.getComputedStyle).toHaveBeenCalledWith(elem.nativeElement); expect(renderSpy.setElementClass).toHaveBeenCalledWith(elem, 'moving', true); expect(renderSpy.setElementStyle).not.toHaveBeenCalled(); expect(styleSpy.getPropertyValue).not.toHaveBeenCalled(); - + ngGrid.autoStyle = true; ngGridItem.startMoving(); - + expect(renderSpy.setElementStyle).toHaveBeenCalledWith(elem, 'z-index', '101'); expect(styleSpy.getPropertyValue).toHaveBeenCalledWith('z-index'); - + (window).getComputedStyle = oldGetCompStyle; }); - + it("should remove moving class and styles on stopMoving", () => { var renderSpy = jasmine.createSpyObj('renderSpy', ['setElementStyle', 'setElementClass']); var styleSpy = jasmine.createSpyObj('styleSpy', ['getPropertyValue']); styleSpy.getPropertyValue.and.returnValue(100); var oldGetCompStyle = window.getComputedStyle; (window).getComputedStyle = jasmine.createSpy("getComputedStyle").and.returnValue(styleSpy); - + var ngGrid: any = { 'autoStyle': false }; var elem: any = { 'nativeElement': {} }; - + var ngGridItem: NgGridItem = new NgGridItem(elem, renderSpy, ngGrid); ngGridItem.stopMoving(); - + expect(window.getComputedStyle).toHaveBeenCalledWith(elem.nativeElement); expect(renderSpy.setElementClass).toHaveBeenCalledWith(elem, 'moving', false); expect(renderSpy.setElementStyle).not.toHaveBeenCalled(); expect(styleSpy.getPropertyValue).not.toHaveBeenCalled(); - + ngGrid.autoStyle = true; ngGridItem.stopMoving(); - + expect(renderSpy.setElementStyle).toHaveBeenCalledWith(elem, 'z-index', '99'); expect(styleSpy.getPropertyValue).toHaveBeenCalledWith('z-index'); - + (window).getComputedStyle = oldGetCompStyle; }); - + it("should attempt to calculate the mouse position", () => { var event: any = { clientX: 14234, @@ -588,39 +585,39 @@ export function main() { 'getBoundingClientRect': jasmine.createSpy('elemSpy').and.returnValue({ 'left': 4353, 'top': 3554 }) } } - + var ngGridItem: NgGridItem = new NgGridItem(elem, null, null); - + expect((ngGridItem)._getMousePosition(event)).toEqual({ 'left': 9881, 'top': 20769 }); - + event.originalEvent.touches = []; - event.originalEvent.changedTouches = [{'clientX': 8658, 'clientY': 9757}]; - + event.originalEvent.changedTouches = [{ 'clientX': 8658, 'clientY': 9757 }]; + expect((ngGridItem)._getMousePosition(event)).toEqual({ 'left': 4305, 'top': 6203 }); - + event.originalEvent.touches = [{ 'clientX': 34523, 'clientY': 7898 }]; expect((ngGridItem)._getMousePosition(event)).toEqual({ 'left': 30170, 'top': 4344 }); }); - + it("should add self to ngGrid, store config and recalculate when config is set", () => { spyOn(NgGridItem.prototype, '_recalculatePosition'); spyOn(NgGridItem.prototype, '_recalculateDimensions'); spyOn(NgGridItem.prototype, 'setConfig'); - + var ngGrid: any = jasmine.createSpyObj('NgGridSpy', ['addItem']); var ngGridItem: NgGridItem = new NgGridItem(null, null, ngGrid); - + ngGridItem.config = { 'col': 5, 'row': 2 }; - + expect(ngGridItem.setConfig).toHaveBeenCalled(); expect(ngGrid.addItem).toHaveBeenCalledWith(ngGridItem); expect((ngGridItem)._recalculatePosition).toHaveBeenCalled(); expect((ngGridItem)._recalculateDimensions).toHaveBeenCalled(); expect((ngGridItem)._added).toBe(true); - + ngGrid.addItem.calls.reset(); ngGridItem.config = {}; - + expect(ngGrid.addItem).not.toHaveBeenCalledWith(ngGridItem); }); }); From d1039224ab222f20ad3a26a2e5121fafd83ea08c Mon Sep 17 00:00:00 2001 From: pocmanu Date: Fri, 27 Nov 2015 13:45:00 +0100 Subject: [PATCH 4/5] reverting any NgGrid change + update readme & gitignore --- .gitignore | 4 +--- README.md | 5 +++-- src/NgGrid.ts | 30 ++++++++++-------------------- 3 files changed, 14 insertions(+), 25 deletions(-) diff --git a/.gitignore b/.gitignore index a12021d..e7532e3 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,4 @@ npm-debug.log dist/ node_modules/ bower_components/ -coverage/ -test/*.js -@reactivex/ \ No newline at end of file +coverage/ \ No newline at end of file diff --git a/README.md b/README.md index 793ec74..c807212 100644 --- a/README.md +++ b/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. diff --git a/src/NgGrid.ts b/src/NgGrid.ts index 25562cb..e0b4b3d 100644 --- a/src/NgGrid.ts +++ b/src/NgGrid.ts @@ -61,8 +61,6 @@ export class NgGrid implements OnInit, DoCheck { private _fixToGrid: boolean = false; private _autoResize: boolean = false; private _differ: KeyValueDiffer; - private _currentTargetPosition; - private _isDraggingFromOutside = false; // Default config private static CONST_DEFAULT_CONFIG = { @@ -487,11 +485,11 @@ export class NgGrid implements OnInit, DoCheck { if (!this._fixToGrid) this._resizingItem.setDimensions(newW, newH); - var bigGrid = this._maxGridSize(itemPos.left + newW + (2*e.movementX), itemPos.top + newH + (2*e.movementY)); - - if (this._resizeDirection == 'height') bigGrid.x = iGridPos.col + itemSize.x; - if (this._resizeDirection == 'width') bigGrid.y = iGridPos.row + itemSize.y; - + var bigGrid = this._maxGridSize(itemPos.left + newW + (2*e.movementX), itemPos.top + newH + (2*e.movementY)); + + if (this._resizeDirection == 'height') bigGrid.x = iGridPos.col + itemSize.x; + if (this._resizeDirection == 'width') bigGrid.y = iGridPos.row + itemSize.y; + this.resize.next(this._resizingItem); this._resizingItem.resize.next(this._resizingItem.getDimensions()); } @@ -614,7 +612,7 @@ export class NgGrid implements OnInit, DoCheck { switch (this.cascade) { case "up": case "down": - default: + default: if (this._maxRows > 0 && itemPos.row + (itemDims.y - 1) >= this._maxRows) { itemPos.col++; } else { @@ -761,10 +759,6 @@ export class NgGrid implements OnInit, DoCheck { pos.row++; this._updateSize(null, pos.row + dims.y - 1); - - if (this._maxRows > 0 && (pos.row + dims.y - 1) > this._maxRows) { - throw new Error("Unable to calculate grid position"); - } } } @@ -783,13 +777,9 @@ export class NgGrid implements OnInit, DoCheck { for (var j = 0; j < dims.y; j++) { if (this._itemGrid[pos.row + j] == null) this._itemGrid[pos.row + j] = {}; for (var i = 0; i < dims.x; i++) { - if (this._itemGrid[pos.row + j][pos.col + i] == null) { - this._itemGrid[pos.row + j][pos.col + i] = item; - - this._updateSize(pos.col + dims.x - 1, pos.row + dims.y - 1); - } else { - throw new Error("Cannot add item to grid. Space already taken."); - } + this._itemGrid[pos.row + j][pos.col + i] = item; + + this._updateSize(pos.col + dims.x - 1, pos.row + dims.y - 1); } } } @@ -856,7 +846,7 @@ export class NgGrid implements OnInit, DoCheck { Object.keys(me._itemGrid).map(function(v) { maxes.push(Math.max.apply(null, Object.keys(me._itemGrid[v]))); }); return Math.max.apply(null, maxes); } - + private _getMousePosition(e: any): {left: number, top: number} { if (((window).TouchEvent && e instanceof TouchEvent) || (e.touches || e.changedTouches)) { e = e.touches.length > 0 ? e.touches[0] : e.changedTouches[0]; From 83de49b670e4e5a7e9ec6b1db2e172c550f1e5a7 Mon Sep 17 00:00:00 2001 From: pocmanu Date: Fri, 27 Nov 2015 14:22:30 +0100 Subject: [PATCH 5/5] revert undesired changes --- .gitignore | 3 ++- src/NgGrid.d.ts | 2 -- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/.gitignore b/.gitignore index e7532e3..35d1de2 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,5 @@ npm-debug.log dist/ node_modules/ bower_components/ -coverage/ \ No newline at end of file +coverage/ +test/*.js \ No newline at end of file diff --git a/src/NgGrid.d.ts b/src/NgGrid.d.ts index 62f58d6..cdf355e 100644 --- a/src/NgGrid.d.ts +++ b/src/NgGrid.d.ts @@ -43,8 +43,6 @@ export declare class NgGrid implements OnInit, DoCheck { private _fixToGrid; private _autoResize; private _differ; - private _currentTargetPosition; - private _isDraggingFromOutside; private static CONST_DEFAULT_CONFIG; private _config; config: any;