annotate src/app/visualisations/instants/instants.component.ts @ 383:1241ca979fd9
Refactor based on pattern which emerged when implementing multiple components. Still some very obvious dupe regarding the ElementRef stuff, I don't think ViewChild decorated props are inherited.. but I haven't actually verified that.
author |
Lucas Thompson <dev@lucas.im> |
date |
Wed, 31 May 2017 19:14:46 +0100 |
parents |
b220ed78a250 |
children |
7119d62121f0 |
rev |
line source |
dev@381
|
1 /**
|
dev@381
|
2 * Created by lucast on 31/05/2017.
|
dev@381
|
3 */
|
dev@381
|
4 import {WavesComponent} from '../waves-base.component';
|
dev@381
|
5 import {
|
dev@381
|
6 AfterViewInit,
|
dev@381
|
7 ChangeDetectionStrategy,
|
dev@381
|
8 Component,
|
dev@381
|
9 ElementRef,
|
dev@381
|
10 Input,
|
dev@381
|
11 ViewChild
|
dev@381
|
12 } from '@angular/core';
|
dev@381
|
13 import {Instant} from '../FeatureUtilities';
|
dev@381
|
14 import Waves from 'waves-ui-piper';
|
dev@381
|
15
|
dev@381
|
16 @Component({
|
dev@381
|
17 selector: 'ugly-instants',
|
dev@381
|
18 templateUrl: '../waves-template.html',
|
dev@381
|
19 styleUrls: ['../waves-template.css'],
|
dev@381
|
20 changeDetection: ChangeDetectionStrategy.OnPush
|
dev@381
|
21 })
|
dev@383
|
22 export class InstantsComponent extends WavesComponent<Instant[]> {
|
dev@383
|
23
|
dev@381
|
24 @ViewChild('track') trackDiv: ElementRef;
|
dev@381
|
25
|
dev@381
|
26 @Input() set instants(instants: Instant[]) {
|
dev@383
|
27 this.feature = instants;
|
dev@381
|
28 }
|
dev@381
|
29
|
dev@383
|
30 protected get containerHeight(): number {
|
dev@383
|
31 return this.trackDiv.nativeElement.getBoundingClientRect().height;
|
dev@381
|
32 }
|
dev@381
|
33
|
dev@383
|
34 protected get trackContainer(): ElementRef {
|
dev@383
|
35 return this.trackDiv;
|
dev@381
|
36 }
|
dev@381
|
37
|
dev@383
|
38 protected get featureLayers(): Layer[] {
|
dev@383
|
39 return [
|
dev@381
|
40 new Waves.helpers.TickLayer(
|
dev@383
|
41 this.feature,
|
dev@381
|
42 {
|
dev@381
|
43 height: this.height,
|
dev@381
|
44 color: this.colour,
|
dev@381
|
45 labelPosition: 'bottom',
|
dev@381
|
46 shadeSegments: true
|
dev@381
|
47 }
|
dev@383
|
48 )
|
dev@383
|
49 ];
|
dev@381
|
50 }
|
dev@381
|
51 }
|