import { Component , ElementRef , OnDestroy , OnInit , ViewChild , ViewEncapsulation } from '@angular/core' ; import { HistoryState , HistoryStateContainer , StateHistoryService } from './state-history.service' ; import { EventManager } from '@angular/platform-browser' ; import { Helper } from '../phaser/helper' ; import { NavigationStart , Router } from '@angular/router' ; @ Component ( { selector : 'app-history' , templateUrl : './history.component.html' , styleUrls : [ './history.component.scss' ] , encapsulation : ViewEncapsulation . None } ) export class HistoryComponent implements OnInit , OnDestroy { @ ViewChild ( 'listContainer' , { static : false } ) list ? : ElementRef ; private eventHandler ? : Function ; states : HistoryState [ ] = [ ] ; selected ? : HistoryStateContainer ; selectedIndex = 0 ; hide = false ; constructor ( private stateHistory , private eventManager , router ) { stateHistory . states . subscribe ( states => { this . states = states ; this . updateSelected ( this . selected ) ; setTimeout ( ( ) => { if ( ! this . list ) { return ; } const el = this . list . nativeElement ; el . scrollTop = el . scrollHeight * 2 ; } , 0 ) ; } ) ; stateHistory . selectedState . subscribe ( container => { this . updateSelected ( container ) ; } ) ; router . events . subscribe ( event => { if ( event instanceof NavigationStart ) { this . hide = event . url === '/3d' ; } } ) ; } ngOnInit ( ) { this . eventHandler = this . eventManager . addEventListener ( document as any , 'keydown' , ( event ) => { if ( Helper . isInputFocused ( ) ) { return ; } if ( event . ctrlKey && event . key . toLowerCase ( ) === 'z' ) { event . preventDefault ( ) ; if ( event . shiftKey ) { this . redo ( ) ; } else { this . undo ( ) ; } } } ) ; } ngOnDestroy ( ) { if ( this . eventHandler ) { this . eventHandler ( ) ; this . eventHandler = undefined ; } } updateSelected ( container ? ) { if ( ! container ) { return ; } this . selected = container ; this . selectedIndex = this . states . indexOf ( container . state ! ) ; } undo ( ) { this . stateHistory . undo ( ) ; } redo ( ) { this . stateHistory . redo ( ) ; } selectState ( state ) { this . stateHistory . selectedState . next ( { state : state } ) ; } }