import { Component } from '@angular/core' ; import { Store } from '@ngrx/store' ; import Map from 'ol/Map' ; import { Observable } from 'rxjs' ; import { take } from 'rxjs/operators' ; import { MangolControllersZoomOptions } from '../../../interfaces/config-map-controllers.interface' ; import * as fromMangol from '../../../store/mangol.reducers' ; import { shownStateTrigger } from '../controllers.animations' ; @ Component ( { selector : 'mangol-zoom-buttons' , templateUrl : './zoom-buttons.component.html' , styleUrls : [ './zoom-buttons.component.scss' ] , animations : [ shownStateTrigger ] } ) export class ZoomButtonsComponent { animationDuration = 500 ; zoom$ : Observable < MangolControllersZoomOptions > ; constructor ( private store ) { this . zoom$ = this . store . select ( ( state ) => state . controllers . zoom ) ; } zoomIn ( ) { this . store . select ( ( state ) => state . map . map ) . pipe ( take ( 1 ) ) . subscribe ( ( m ) => { m . getView ( ) . animate ( { zoom : m . getView ( ) . getZoom ( ) + 1 , duration : this . animationDuration } ) ; } ) ; } zoomOut ( ) { this . store . select ( ( state ) => state . map . map ) . pipe ( take ( 1 ) ) . subscribe ( ( m ) => { m . getView ( ) . animate ( { zoom : m . getView ( ) . getZoom ( ) - 1 , duration : this . animationDuration } ) ; } ) ; } }