Some refactoring

projects/common-map/package-lock.json

@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "@farmmaps/common": {
-      "version": "0.0.1-prerelease.51",
+      "version": "0.0.1-prerelease.56",
-      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.51.tgz",
+      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.56.tgz",
-      "integrity": "sha512-1E7BDQVQ34N+dFiipHHUj9X50fpU3c8UqTLqwb9UpE+PpfLp+njN4rg2MXYwglbB8chlz/glaPPurYwjzDadxQ==",
+      "integrity": "sha512-m9KxWsLkTSz2JI074gIJH1kDR0PCLsFAug8oBjtlU/QxgBySrvqHCRiODpNmNWnFyNTZHqKHJQefn3Q9iAil4g==",
       "requires": {
         "angular-oauth2-oidc": "^5.0.2",
         "ngx-uploadx": "^3.1.3",

projects/common-map/package.json

@@ -5,7 +5,7 @@
     "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
   },
   "dependencies": {
-    "@farmmaps/common": "0.0.1-prerelease.51",
+    "@farmmaps/common": "0.0.1-prerelease.56",
     "ngx-openlayers": "1.0.0-next.9",
     "ol": "^5.3.3"
   },
@@ -15,6 +15,7 @@
     "@ngrx/effects": "^7.2",
     "@ngrx/router-store": "^7.2",
     "@ngrx/store": "^7.2",
-    "tassign": "^1.0.0"
+    "tassign": "^1.0.0",
+    "@farmmaps/common": "^0.0.1"
   }
 }

projects/common-map/src/fm-map/common-map.module.ts

@@ -12,9 +12,17 @@ import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
 import { AppCommonModule } from '@farmmaps/common';
 
 import { MODULE_NAME } from './module-name';
-import * as mapReducer from './reducers/map.reducer';
+import * as mapReducers from './reducers/map.reducer';
+import * as mapActions from './actions/map.actions';
 import * as mapEffects from './effects/map.effects';
 
+import { IMapState} from './models';
+import { ISelectedFeatures } from './models';
+import { IItemLayer } from './models';
+import { ItemLayer} from './models';
+import { IQueryState } from './models';
+import { IPeriodState } from './models';
+
 // components
 import { GpsLocation} from './components/aol/gps-location/gps-location.component';
 //import {Switch2D3DComponent } from './components/aol/switch2d3d/switch2d3d.component';
@@ -58,7 +66,8 @@ import { WidgetStatusComponent } from './components/widget-status/widget-status.
 
 export {
   mapEffects,
-  mapReducer,
+  mapReducers,
+  mapActions,
   ZoomToExtentComponent,
   ItemVectorSourceComponent,
   ItemFeaturesSourceComponent,
@@ -99,7 +108,13 @@ export {
   AbstractItemListItemComponent,
   AbstractItemListComponent,
   StateSerializerService,
-  GeolocationService
+  GeolocationService,
+  IMapState,
+  ISelectedFeatures,
+  IItemLayer,
+  ItemLayer,
+  IQueryState,
+  IPeriodState
 }
 
 @NgModule({  
@@ -107,7 +122,7 @@ export {
     CommonModule,
     AngularOpenlayersModule,
     MapRoutingModule,
-    StoreModule.forFeature(MODULE_NAME, mapReducer.reducer),
+    StoreModule.forFeature(MODULE_NAME, mapReducers.reducer),
     EffectsModule.forFeature([mapEffects.MapEffects]),
     NgbModule,
     FormsModule,

projects/common-map/src/fm-map/components/map/map.component.html

@@ -46,51 +46,11 @@
   <div class="container-fluid">
     <div class="body">
       <div class="logo">
-        <span><img src="/images/farmmapslogo.png" /></span>
+        <router-outlet name="side-panel-logo"></router-outlet>
         <span><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fa fa-times" aria-hidden="true"></i></button></span>
       </div>
-
+      <router-outlet name="side-panel-menu"></router-outlet>          
-      <div class="card menu-card">
+  </div>
-        <div class="d-flex flex-row flex-wrap">
-          <div class="shortcut-icon" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.croppingscheme'})">
-            <div class="icon rounded-circle farm-icon"><i class="fm fm-farm" aria-hidden="true"></i></div>
-            <div class="caption" i18n>Farms</div>
-          </div>
-          <div class="shortcut-icon" (click)="handleTrijntjeClick($event,{itemType:'vnd.farmmaps.itemtype.trijntje'})">
-            <div class="icon rounded-circle trijntje-icon"><i class="fa fa-tint" aria-hidden="true"></i></div>
-            <div class="caption" i18n>Trijntje</div>
-          </div>
-        </div>
-      </div>
-      <div class="card menu-card">
-        <ul class="navbar-nav">
-          <li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/explorer/folder/my_drive']" class="nav-link"><span i18n><i class="fa fa-folder" aria-hidden="true"></i> My Drive</span></a></li>
-          <li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/explorer/folder/map_uploads']" class="nav-link"><span i18n><i class="fa fa-cloud-upload" aria-hidden="true"></i> Map uploads</span></a></li>
-        </ul>
-      </div>
-      <div class="card menu-card">
-        <ul class="navbar-nav">
-          <li class="nav-item py-0">
-            <a class="nav-link" href="#" (click)="handleToggleBaseLayers($event)" i18n><i class="fa fa-map" aria-hidden="true"></i> Base maps <i class="fa" [ngClass]="{'fa-caret-down':baseLayersCollapsed,'fa-caret-up':!baseLayersCollapsed}" aria-hidden="true"></i></a>
-            <div [ngbCollapse]="baseLayersCollapsed" class="mb-4">
-              <fm-map-layer-list [baseLayers]="true" [itemLayers]="baseLayers|async" [selectedLayer]="selectedBaseLayer|async" (onSelectLayer)="handleSelectBaseLayer($event)"></fm-map-layer-list>
-            </div>
-          </li>
-          <li class="nav-item py-0">
-            <a class="nav-link" href="#" (click)="handleToggleOverlayLayers($event)" i18n><i class="fa fa-map" aria-hidden="true"></i> Overlays <i class="fa" [ngClass]="{'fa-caret-down':overlayLayersCollapsed,'fa-caret-up':!overlayLayersCollapsed}" aria-hidden="true"></i></a>
-            <div [ngbCollapse]="overlayLayersCollapsed" class="mb-4">
-              <fm-map-layer-list [itemLayers]="overlayLayers|async" [selectedLayer]="selectedOverlayLayer|async" (onDelete)="handleOnDelete($event)" (onToggleVisibility)="handleOnToggleVisibility($event)" (onSetOpacity)="handleOnSetOpacity($event)" (onZoomToExtent)="handleZoomToExtent($event)" (onSelectLayer)="handleSelectOverlayLayer($event)"></fm-map-layer-list>
-            </div>
-          </li>
-        </ul>
-      </div>
-      <!--<div class="card menu-card">
-        <ul class="navbar-nav">
-          <li class="nav-item py-0"><a class="nav-link" href="#" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.croppingscheme'})"><span i18n>Farms</span></a></li>
-          <li class="nav-item py-0"><a class="nav-link" href="#" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.layer'})"><span i18n>Layers</span></a></li>
-        </ul>
-      </div>-->
-    </div>
   </div>
 </fm-side-panel>
 

projects/common-map/src/fm-map/components/map/map.component.scss

@@ -91,11 +91,6 @@ div.logo {
   margin-bottom:1em;
 }
 
-div.logo img {
-  width:100%;
-  align-self:center;
-}
-
 div.logo button {
   margin-left:1em;
 }

projects/common/src/fm/common.module.ts

@@ -1,5 +1,5 @@
 // angular modules
-import { NgModule, APP_INITIALIZER, ModuleWithProviders, Injector } from '@angular/core';
+import { NgModule, APP_INITIALIZER, ModuleWithProviders, Injector,Optional,SkipSelf } from '@angular/core';
 import { CommonModule, DatePipe } from '@angular/common';
 import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { FormsModule } from '@angular/forms';
@@ -137,6 +137,12 @@ export {FolderService,
     ]
 })
 export class AppCommonModule {
+  constructor (@Optional() @SkipSelf() parentModule: AppCommonModule) {
+    if (parentModule) {
+      throw new Error(
+        'AppCommonModule is already loaded. Import it in the AppModule only');
+    }
+  }
   static forRoot(): ModuleWithProviders {
     return {
       ngModule: AppCommonModule,
@@ -152,19 +158,7 @@ export class AppCommonModule {
           provide: HTTP_INTERCEPTORS,
           useClass: AccessTokenInterceptor,
           multi: true
-        },
+        }
-        ResumableFileUploadService,
-        EventService,
-        FolderService,
-        UserService,
-        ItemService,
-        TypeaheadService,
-        AuthCallbackGuard,
-        AuthGuard,
-        NavBarGuard,
-        FullScreenGuard,
-        TimespanService,
-        ItemTypeService
       ]
     };
   }

projects/common/src/fm/services/auth-guard.service.ts

@@ -13,7 +13,9 @@ import * as appCommonReducer from '../reducers/app-common.reducer'
 import * as appCommonActions from '../actions/app-common.actions';
 
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class AuthGuard implements CanActivate, CanLoad, CanActivateChild  { 
  
   private loginDispatched = false;

projects/common/src/fm/services/date-adapter.service.ts

@@ -1,7 +1,9 @@
 import { Component, Injectable } from '@angular/core';
 import { NgbDateAdapter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class NgbDateNativeAdapter extends NgbDateAdapter<Date> {
 
   fromModel(date: Date): NgbDateStruct {

projects/common/src/fm/services/event.service.ts

@@ -6,7 +6,9 @@ import { HubConnection, HubConnectionBuilder, LogLevel ,HttpTransportType} from
 import { AppConfig } from "../shared/app.config";
 
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class EventService {
 
   public event:Subject <IEventMessage> = new Subject<IEventMessage>();

projects/common/src/fm/services/folder.service.ts

@@ -6,7 +6,9 @@ import { IItem } from '../models/item';
 import { HttpClient } from "@angular/common/http";
 import { AppConfig } from "../shared/app.config";
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class FolderService {
 
   constructor(public httpClient: HttpClient, public appConfig: AppConfig) {

projects/common/src/fm/services/full-screen-guard.service.ts

@@ -7,7 +7,9 @@ import * as appCommonReducer from '../reducers/app-common.reducer'
 import * as appCommonActions from '../actions/app-common.actions';
 
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class FullScreenGuard implements CanActivate { 
  
   private loginDispatched = false;

projects/common/src/fm/services/item.service.ts

@@ -7,7 +7,9 @@ import { IItemTask } from '../models/itemTask';
 import { HttpClient, HttpParams } from "@angular/common/http";
 import { AppConfig } from "../shared/app.config";
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class ItemService {
   constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
   }

projects/common/src/fm/services/itemtype.service.ts

@@ -4,7 +4,9 @@ import * as appCommonReducer from '../reducers/app-common.reducer'
 import {IItemTypes} from '../models/item.types'
 import {IItem} from '../models/item'
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class ItemTypeService {
     public itemTypes: IItemTypes;
 

projects/common/src/fm/services/nav-bar-guard.service.ts

@@ -7,7 +7,9 @@ import * as appCommonReducer from '../reducers/app-common.reducer'
 import * as appCommonActions from '../actions/app-common.actions';
 
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class NavBarGuard implements CanActivate {
 
   private loginDispatched = false;

projects/common/src/fm/services/timespan.service.ts

@@ -3,7 +3,9 @@ import { DatePipe } from '@angular/common';
 import { Observable ,  Observer } from 'rxjs';
 import { ITypeaheadItem } from '../models/typeahead.item';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class TimespanService {
   constructor(private datePipe: DatePipe) {
   }

projects/common/src/fm/services/typeahead.service.ts

@@ -4,7 +4,9 @@ import { ITypeaheadItem } from '../models/typeahead.item';
 import { HttpClient, HttpParams  } from "@angular/common/http";
 import { AppConfig } from "../shared/app.config";
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class TypeaheadService {
   constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
   }

projects/common/src/fm/services/user.service.ts

@@ -4,7 +4,9 @@ import { IUser } from '../models/user';
 import { HttpClient } from "@angular/common/http";
 import { AppConfig } from "../shared/app.config";
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class UserService {
   constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
   }

projects/common/src/fm/shared/app.config.ts

@@ -20,7 +20,6 @@ export class AppConfig {
     return this.config[key];
   }
 
-
   public load(): Promise<any> {
     return this.httpClient.get('/configuration.json')
       .toPromise()

src/app/app-routing.module.ts

@@ -3,6 +3,8 @@ import { RouterModule } from '@angular/router';
 
 import { AuthGuard,FullScreenGuard } from '@farmmaps/common';
 import { MapComponent } from '@farmmaps/common-map';
+import { LogoComponent } from './logo/logo.component';
+import { MenuComponent } from './menu/menu.component';
 
 const routes = [
   {
@@ -17,7 +19,19 @@ const routes = [
     },
     {
         path: ':xCenter/:yCenter/:zoom/:rotation/:baseLayer/:queryState',
-        component: MapComponent
+        component: MapComponent,
+        children:[
+          {
+            path: '',
+            component: LogoComponent,
+            outlet: 'side-panel-logo'
+          },
+          {
+            path: '',
+            component: MenuComponent,
+            outlet: 'side-panel-menu'
+          }
+        ]
     }
    ]},  
 ];

src/app/app.component.html

@@ -1,3 +0,0 @@
-<fm-app></fm-app>
-
-

src/app/app.component.ts

@@ -2,9 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  template:'<fm-app></fm-app>'
-  styleUrls: ['./app.component.scss']
 })
 export class AppRootComponent {
-  title = 'farmmaps-lib-app';
+  title = 'FarmMaps';
 }

src/app/app.module.ts

@@ -16,6 +16,8 @@ import {EffectsModule, EffectSources} from '@ngrx/effects';
 import { StoreRouterConnectingModule} from '@ngrx/router-store';
 
 import {AppRoutingModule} from './app-routing.module';
+import { LogoComponent } from './logo/logo.component';
+import { MenuComponent } from './menu/menu.component';
 
 export const BOOTSTRAP_EFFECTS = new InjectionToken('Bootstrap Effects');
 
@@ -44,7 +46,9 @@ export function provideBootstrapEffects(effects: Type<any>[]) {
 
 @NgModule({
   declarations: [
-    AppRootComponent
+    AppRootComponent,
+    LogoComponent,
+    MenuComponent
   ],
   imports: [
     AppRoutingModule,

src/app/logo/logo.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LogoComponent } from './logo.component';
+
+describe('LogoComponent', () => {
+  let component: LogoComponent;
+  let fixture: ComponentFixture<LogoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LogoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LogoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/logo/logo.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-logo',
+  template: '<span><img src="/images/farmmapslogo.png" /></span>',
+  styles:['img {width:100%;align-self:center;}']
+})
+export class LogoComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/menu/menu.component.html

@@ -0,0 +1,32 @@
+<div>
+    <div class="card menu-card">
+        <div class="d-flex flex-row flex-wrap">
+          <div class="shortcut-icon" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.croppingscheme'})">
+            <div class="icon rounded-circle farm-icon"><i class="fm fm-farm" aria-hidden="true"></i></div>
+            <div class="caption" i18n>Farms</div>
+          </div>      
+        </div>
+    </div>  
+    <div class="card menu-card">
+        <ul class="navbar-nav">
+          <li class="nav-item py-0">
+            <a class="nav-link" href="#" (click)="handleToggleBaseLayers($event)" i18n><i class="fa fa-map" aria-hidden="true"></i> Base maps <i class="fa" [ngClass]="{'fa-caret-down':baseLayersCollapsed,'fa-caret-up':!baseLayersCollapsed}" aria-hidden="true"></i></a>
+            <div [ngbCollapse]="baseLayersCollapsed" class="mb-4">
+              <fm-map-layer-list [baseLayers]="true" [itemLayers]="baseLayers|async" [selectedLayer]="selectedBaseLayer|async" (onSelectLayer)="handleSelectBaseLayer($event)"></fm-map-layer-list>
+            </div>
+          </li>
+          <li class="nav-item py-0">
+            <a class="nav-link" href="#" (click)="handleToggleOverlayLayers($event)" i18n><i class="fa fa-map" aria-hidden="true"></i> Overlays <i class="fa" [ngClass]="{'fa-caret-down':overlayLayersCollapsed,'fa-caret-up':!overlayLayersCollapsed}" aria-hidden="true"></i></a>
+            <div [ngbCollapse]="overlayLayersCollapsed" class="mb-4">
+              <fm-map-layer-list [itemLayers]="overlayLayers|async" [selectedLayer]="selectedOverlayLayer|async" (onDelete)="handleOnDelete($event)" (onToggleVisibility)="handleOnToggleVisibility($event)" (onSetOpacity)="handleOnSetOpacity($event)" (onZoomToExtent)="handleZoomToExtent($event)" (onSelectLayer)="handleSelectOverlayLayer($event)"></fm-map-layer-list>
+            </div>
+          </li>
+        </ul>
+    </div>
+       <!--<div class="card menu-card">
+            <ul class="navbar-nav">
+              <li class="nav-item py-0"><a class="nav-link" href="#" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.croppingscheme'})"><span i18n>Farms</span></a></li>
+              <li class="nav-item py-0"><a class="nav-link" href="#" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.layer'})"><span i18n>Layers</span></a></li>
+            </ul>
+          </div>-->
+</div>

src/app/menu/menu.component.scss

@@ -0,0 +1,41 @@
+.menu-card {
+    margin-left:-7px;
+    padding-left:7px;
+    margin-right:-7px;
+    padding-right:7px;
+    margin-bottom:7px;
+  }
+
+  .shortcut-icon {
+    display: inline-block;
+    text-align: center;
+    margin: 0.5rem;
+    cursor:pointer;
+  }
+  
+  .shortcut-icon > .icon {
+    width: 3rem;
+    height: 3rem;
+    background-color: #731e64;
+    display: inline-block;
+    text-align: center;
+    line-height: 3rem;
+    color: #ffffff;
+    font-size: 2rem;
+  }
+  
+  .shortcut-icon > .caption {
+    text-align: center;
+    width: 4rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: theme-color();
+  }
+  
+  .shortcut-icon > .farm-icon {
+    background-color: #731E64;
+  }
+  
+  .shortcut-icon > .trijntje-icon {
+    background-color: #FAA33F;
+  }

src/app/menu/menu.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuComponent } from './menu.component';
+
+describe('MenuComponent', () => {
+  let component: MenuComponent;
+  let fixture: ComponentFixture<MenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MenuComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/menu/menu.component.ts

@@ -0,0 +1,77 @@
+import { Component, OnInit } from '@angular/core';
+import { commonReducers, } from '@farmmaps/common';
+import {  } from '@farmmaps/common-map';
+import {mapReducers,mapActions,IItemLayer} from '@farmmaps/common-map';
+import { Store } from '@ngrx/store';
+import { tassign } from 'tassign';
+import { Observable } from 'rxjs';
+import {createEmpty,extend } from 'ol/extent';
+
+@Component({
+  selector: 'app-menu',
+  templateUrl: './menu.component.html',
+  styleUrls: ['./menu.component.scss']
+})
+export class MenuComponent implements OnInit {
+  public baseLayersCollapsed:boolean = true;
+  public overlayLayersCollapsed: boolean = true;
+  public overlayLayers: Observable<Array<IItemLayer>>;
+  public selectedOverlayLayer: Observable<IItemLayer>;
+  public baseLayers: Observable<Array<IItemLayer>>;
+  public selectedBaseLayer: Observable<IItemLayer>;
+  
+
+  constructor( private store: Store<mapReducers.State | commonReducers.State> ) { }
+
+  ngOnInit() {
+    this.overlayLayers = this.store.select(mapReducers.selectGetOverlayLayers);
+    this.selectedOverlayLayer = this.store.select(mapReducers.selectGetSelectedOverlayLayer);
+    this.baseLayers = this.store.select(mapReducers.selectGetBaseLayers);
+    this.selectedBaseLayer = this.store.select(mapReducers.selectGetSelectedBaseLayer);
+  }
+
+  handleToggleBaseLayers(event:MouseEvent) {
+    this.baseLayersCollapsed = !this.baseLayersCollapsed;
+    event.preventDefault();
+  }
+
+  handleToggleOverlayLayers(event: MouseEvent) {
+    this.overlayLayersCollapsed = !this.overlayLayersCollapsed;
+    event.preventDefault();
+  }
+
+  handlePredefinedQuery(event: MouseEvent, query: any) {
+    event.preventDefault();
+    var queryState = tassign(mapReducers.initialQueryState, query);
+    this.store.dispatch(new mapActions.DoQuery(queryState));
+  }
+
+  handleOnToggleVisibility(itemLayer: IItemLayer) {
+    this.store.dispatch(new mapActions.SetVisibility(itemLayer,!itemLayer.visible));
+  }
+
+  handleOnSetOpacity(event:{ layer: IItemLayer,opacity:number }) {
+    this.store.dispatch(new mapActions.SetOpacity(event.layer, event.opacity));
+  }
+
+  handleOnDelete(itemLayer: IItemLayer) {
+    this.store.dispatch(new mapActions.RemoveLayer(itemLayer));
+  }
+
+  handleZoomToExtent(itemLayer: IItemLayer) {
+    var extent =  createEmpty();
+    extend(extent, itemLayer.layer.getExtent());
+    if (extent) {
+      this.store.dispatch(new mapActions.SetExtent(extent));
+    }    
+  }
+
+  handleSelectOverlayLayer(itemLayer: IItemLayer) {
+    this.store.dispatch(new mapActions.SelectOverlayLayer(itemLayer));
+  }
+
+  handleSelectBaseLayer(itemLayer: IItemLayer) {
+    this.store.dispatch(new mapActions.SelectBaseLayer(itemLayer));
+  }
+
+}