import { Injectable } from '@angular/core' ; import { GridsterConfig , GridsterItem } from 'angular-gridster2' ; import { UUID } from 'angular2-uuid' ; export interface IComponent { id : string ; componentRef : string ; } @ Injectable ( { providedIn : 'root' } ) export class LayoutService { public options : GridsterConfig = { draggable : { enabled : true } , pushItems : true , resizable : { enabled : true } } ; public layout : GridsterItem [ ] = [ ] ; public components : IComponent [ ] = [ ] ; dropId : string ; constructor ( ) { } addItem ( ) { this . layout . push ( { cols : 5 , id : UUID . UUID ( ) , rows : 5 , x : 0 , y : 0 } ) ; } deleteItem ( id ) { const item = this . layout . find ( d => d . id === id ) ; this . layout . splice ( this . layout . indexOf ( item ) , 1 ) ; const comp = this . components . find ( c => c . id === id ) ; this . components . splice ( this . components . indexOf ( comp ) , 1 ) ; } setDropId ( dropId ) { this . dropId = dropId ; } dropItem ( dragId ) { const { components } = this ; const comp = components . find ( c => c . id === this . dropId ) ; const updateIdx = comp ? components . indexOf ( comp ) : components . length ; const componentItem = { id : this . dropId , componentRef : dragId } ; this . components = Object . assign ( [ ] , this . components , { [ updateIdx ] : componentItem } ) ; } getComponentRef ( id ) { const comp = this . components . find ( c => c . id === id ) ; return comp ? comp . componentRef : null ; } }