Merge pull request #35 from tiberiuzuld/grid

Grid

README.md

@@ -164,7 +164,8 @@ export const GridsterConfigService: GridsterConfig = {
     // Arguments: item, gridsterItem, event
   },
   swap: true, // allow items to switch position if drop on top of another
-  pushItems: false // push items when resizing and dragging
+  pushItems: false, // push items when resizing and dragging
+  displayGrid: 'onDrag&Resize' // display background grid of rows and columns
 };
 ```
 

dist/gridster.component.d.ts

@@ -1,6 +1,7 @@
 import { OnInit, ElementRef, OnDestroy, Renderer2, DoCheck } from '@angular/core';
 import { GridsterConfig } from './gridsterConfig.interface';
 import { GridsterItemComponent } from './gridsterItem.component';
+import { GridsterGridComponent } from './gridsterGrid.component';
 export declare class GridsterComponent implements OnInit, OnDestroy, DoCheck {
     renderer: Renderer2;
     options: GridsterConfig;
@@ -20,6 +21,7 @@ export declare class GridsterComponent implements OnInit, OnDestroy, DoCheck {
     curColWidth: number;
     curRowHeight: number;
     windowResize: Function;
+    gridLines: GridsterGridComponent;
     private cleanCallback;
     constructor(el: ElementRef, renderer: Renderer2);
     ngOnInit(): void;

dist/gridster.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":3,"metadata":{"GridsterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gridster","template":"<ng-content></ng-content><gridster-preview></gridster-preview>","styles":[":host {   position: relative;   display: flex;   overflow: auto;   flex: 1 auto;   background: grey;   width: 100%;   height: 100%; }  :host(.fit) {   overflow-x: hidden;   overflow-y: hidden; }  :host(.scrollVertical) {   overflow-x: hidden;   overflow-y: auto; }  :host(.scrollHorizontal) {   overflow-x: auto;   overflow-y: hidden; }  :host(.fixed) {   overflow: auto; }  :host(.mobile) {   overflow-x: hidden;   overflow-y: auto;   display: block; }  :host(.mobile) /deep/ gridster-item {   position: relative; }  :host gridster-preview {   background: rgba(0, 0, 0, 0.15);   position: absolute; }"]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"optionsChanged":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method"}],"checkIfToResize":[{"__symbolic":"method"}],"setGridSize":[{"__symbolic":"method"}],"setGridDimensions":[{"__symbolic":"method"}],"calculateLayout":[{"__symbolic":"method"}],"addItem":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"checkCollision":[{"__symbolic":"method"}],"findItemWithItem":[{"__symbolic":"method"}],"autoPositionItem":[{"__symbolic":"method"}],"pixelsToPosition":[{"__symbolic":"method"}],"positionXToPixels":[{"__symbolic":"method"}],"positionYToPixels":[{"__symbolic":"method"}],"checkCompactUp":[{"__symbolic":"method"}],"moveUpTillCollision":[{"__symbolic":"method"}],"checkCompactLeft":[{"__symbolic":"method"}],"moveLeftTillCollision":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GridsterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gridster","template":"<ng-content></ng-content><gridster-preview></gridster-preview>","styles":[":host {   position: relative;   display: flex;   overflow: auto;   flex: 1 auto;   background: grey;   width: 100%;   height: 100%; }  :host(.fit) {   overflow-x: hidden;   overflow-y: hidden; }  :host(.scrollVertical) {   overflow-x: hidden;   overflow-y: auto; }  :host(.scrollHorizontal) {   overflow-x: auto;   overflow-y: hidden; }  :host(.fixed) {   overflow: auto; }  :host(.mobile) {   overflow-x: hidden;   overflow-y: auto;   display: block; }  :host(.mobile) /deep/ gridster-item {   position: relative; }  :host gridster-preview {   background: rgba(0, 0, 0, 0.15);   position: absolute; }"]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"optionsChanged":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method"}],"checkIfToResize":[{"__symbolic":"method"}],"setGridSize":[{"__symbolic":"method"}],"setGridDimensions":[{"__symbolic":"method"}],"calculateLayout":[{"__symbolic":"method"}],"addItem":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"checkCollision":[{"__symbolic":"method"}],"findItemWithItem":[{"__symbolic":"method"}],"autoPositionItem":[{"__symbolic":"method"}],"pixelsToPosition":[{"__symbolic":"method"}],"positionXToPixels":[{"__symbolic":"method"}],"positionYToPixels":[{"__symbolic":"method"}],"checkCompactUp":[{"__symbolic":"method"}],"moveUpTillCollision":[{"__symbolic":"method"}],"checkCompactLeft":[{"__symbolic":"method"}],"moveLeftTillCollision":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"GridsterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gridster","template":"<gridster-grid></gridster-grid> <ng-content></ng-content> <gridster-preview></gridster-preview>","styles":[":host {   position: relative;   display: flex;   overflow: auto;   flex: 1 auto;   background: grey;   width: 100%;   height: 100%; }  :host(.fit) {   overflow-x: hidden;   overflow-y: hidden; }  :host(.scrollVertical) {   overflow-x: hidden;   overflow-y: auto; }  :host(.scrollHorizontal) {   overflow-x: auto;   overflow-y: hidden; }  :host(.fixed) {   overflow: auto; }  :host(.mobile) {   overflow-x: hidden;   overflow-y: auto;   display: block; }  :host(.mobile) /deep/ gridster-item {   position: relative; }  :host gridster-preview {   background: rgba(0, 0, 0, 0.15);   position: absolute; }"]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"optionsChanged":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method"}],"checkIfToResize":[{"__symbolic":"method"}],"setGridSize":[{"__symbolic":"method"}],"setGridDimensions":[{"__symbolic":"method"}],"calculateLayout":[{"__symbolic":"method"}],"addItem":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"checkCollision":[{"__symbolic":"method"}],"findItemWithItem":[{"__symbolic":"method"}],"autoPositionItem":[{"__symbolic":"method"}],"pixelsToPosition":[{"__symbolic":"method"}],"positionXToPixels":[{"__symbolic":"method"}],"positionYToPixels":[{"__symbolic":"method"}],"checkCompactUp":[{"__symbolic":"method"}],"moveUpTillCollision":[{"__symbolic":"method"}],"checkCompactLeft":[{"__symbolic":"method"}],"moveLeftTillCollision":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GridsterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gridster","template":"<gridster-grid></gridster-grid> <ng-content></ng-content> <gridster-preview></gridster-preview>","styles":[":host {   position: relative;   display: flex;   overflow: auto;   flex: 1 auto;   background: grey;   width: 100%;   height: 100%; }  :host(.fit) {   overflow-x: hidden;   overflow-y: hidden; }  :host(.scrollVertical) {   overflow-x: hidden;   overflow-y: auto; }  :host(.scrollHorizontal) {   overflow-x: auto;   overflow-y: hidden; }  :host(.fixed) {   overflow: auto; }  :host(.mobile) {   overflow-x: hidden;   overflow-y: auto;   display: block; }  :host(.mobile) /deep/ gridster-item {   position: relative; }  :host gridster-preview {   background: rgba(0, 0, 0, 0.15);   position: absolute; }"]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"optionsChanged":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method"}],"checkIfToResize":[{"__symbolic":"method"}],"setGridSize":[{"__symbolic":"method"}],"setGridDimensions":[{"__symbolic":"method"}],"calculateLayout":[{"__symbolic":"method"}],"addItem":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"checkCollision":[{"__symbolic":"method"}],"findItemWithItem":[{"__symbolic":"method"}],"autoPositionItem":[{"__symbolic":"method"}],"pixelsToPosition":[{"__symbolic":"method"}],"positionXToPixels":[{"__symbolic":"method"}],"positionYToPixels":[{"__symbolic":"method"}],"checkCompactUp":[{"__symbolic":"method"}],"moveUpTillCollision":[{"__symbolic":"method"}],"checkCompactLeft":[{"__symbolic":"method"}],"moveLeftTillCollision":[{"__symbolic":"method"}]}}}}]

dist/gridster.module.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":3,"metadata":{"GridsterModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"},{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"},{"__symbolic":"reference","module":"./gridsterPreview.component","name":"GridsterPreviewComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"exports":[{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"},{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"}],"providers":[],"bootstrap":[]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"GridsterModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"},{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"},{"__symbolic":"reference","module":"./gridsterPreview.component","name":"GridsterPreviewComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"exports":[{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"},{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"}],"providers":[],"bootstrap":[]}]}]}}}]
+[{"__symbolic":"module","version":3,"metadata":{"GridsterModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"},{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"},{"__symbolic":"reference","module":"./gridsterGrid.component","name":"GridsterGridComponent"},{"__symbolic":"reference","module":"./gridsterPreview.component","name":"GridsterPreviewComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"exports":[{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"},{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"}],"providers":[],"bootstrap":[]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"GridsterModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"},{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"},{"__symbolic":"reference","module":"./gridsterGrid.component","name":"GridsterGridComponent"},{"__symbolic":"reference","module":"./gridsterPreview.component","name":"GridsterPreviewComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"exports":[{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"},{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"}],"providers":[],"bootstrap":[]}]}]}}}]