import { Component , EventEmitter , Input , OnDestroy , Output , ChangeDetectionStrategy } from '@angular/core' ; import { Store } from '@ngrx/store' ; import { KeyAction , Macro } from 'uhk-common' ; import { Subscription } from 'rxjs' ; import { SvgKeyboardKey } from '../keys' ; import { SvgKeyCaptureEvent , SvgKeyClickEvent , SvgModuleCaptureEvent , SvgModuleKeyClickEvent } from '../../../models/svg-key-events' ; import { AppState , getMacroMap } from '../../../store' ; @ Component ( { selector : 'g[svg-module]' , templateUrl : './svg-module.component.html' , styleUrls : [ './svg-module.component.scss' ] , changeDetection : ChangeDetectionStrategy . OnPush } ) export class SvgModuleComponent implements OnDestroy { @ Input ( ) coverages : any [ ] ; @ Input ( ) circles : any [ ] ; @ Input ( ) keyboardKeys : SvgKeyboardKey [ ] ; @ Input ( ) keyActions : KeyAction [ ] ; @ Input ( ) selectedKey : { layerId : number ; moduleId : number ; keyId : number ; } ; @ Input ( ) selected : boolean ; @ Input ( ) capturingEnabled : boolean ; @ Input ( ) lastEdited : boolean ; @ Input ( ) lastEditedKeyId : string ; @ Output ( ) keyClick = new EventEmitter < SvgModuleKeyClickEvent > ( ) ; @ Output ( ) keyHover = new EventEmitter ( ) ; @ Output ( ) capture = new EventEmitter < SvgModuleCaptureEvent > ( ) ; private macroMap : Map < number , Macro > ; private macroMapSubscription : Subscription ; constructor ( private store ) { this . keyboardKeys = [ ] ; this . macroMapSubscription = store . select ( getMacroMap ) . subscribe ( map => this . macroMap = map ) ; } ngOnDestroy ( ) { this . macroMapSubscription . unsubscribe ( ) ; } onKeyClick ( keyId , event ) { this . keyClick . emit ( { ... event , keyId } ) ; } onKeyHover ( index , event , over ) { this . keyHover . emit ( { index , event , over } ) ; } onCapture ( keyId , event ) { this . capture . emit ( { ... event , keyId } ) ; } keyboardKeysTrackBy ( index , key ) { return `${ index }` ; } calcTransform ( key ) { let transform ; if ( key . x && key . y ) { transform = `translate(${ key . x } ${ key . y })` ; } if ( key . transform ) { if ( transform ) { transform = `${ key . transform } ${ transform }` ; } else { transform = `${ key . transform }` ; } } return transform ; } }