# HG changeset patch
# User Lucas Thompson <dev@lucas.im>
# Date 1496254862 -3600
# Node ID 7119d62121f0a716ee4016b298d73ae8a69044a7
# Parent  1241ca979fd97d8cf2963ee65e5a66ead4bbfc0f
ViewChild properties are, of course, inherited (why wouldn't they be?!). So, further de-duping.

diff -r 1241ca979fd9 -r 7119d62121f0 src/app/visualisations/grid/grid.component.ts
--- a/src/app/visualisations/grid/grid.component.ts	Wed May 31 19:14:46 2017 +0100
+++ b/src/app/visualisations/grid/grid.component.ts	Wed May 31 19:21:02 2017 +0100
@@ -23,20 +23,10 @@
 })
 export class GridComponent extends WavesComponent<MatrixFeature> {
 
-  @ViewChild('track') trackDiv: ElementRef;
-
   @Input() set grid(grid: MatrixFeature) {
     this.feature = grid;
   }
 
-  protected get containerHeight(): number {
-    return this.trackDiv.nativeElement.getBoundingClientRect().height;
-  }
-
-  protected get trackContainer(): ElementRef {
-    return this.trackDiv;
-  }
-
   protected get featureLayers(): Layer[] {
     const startTime = this.feature.startTime; // !!! + make use of
     const stepDuration = this.feature.stepDuration;
diff -r 1241ca979fd9 -r 7119d62121f0 src/app/visualisations/instants/instants.component.ts
--- a/src/app/visualisations/instants/instants.component.ts	Wed May 31 19:14:46 2017 +0100
+++ b/src/app/visualisations/instants/instants.component.ts	Wed May 31 19:21:02 2017 +0100
@@ -20,21 +20,10 @@
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class InstantsComponent extends WavesComponent<Instant[]> {
-
-  @ViewChild('track') trackDiv: ElementRef;
-
   @Input() set instants(instants: Instant[]) {
     this.feature = instants;
   }
 
-  protected get containerHeight(): number {
-    return this.trackDiv.nativeElement.getBoundingClientRect().height;
-  }
-
-  protected get trackContainer(): ElementRef {
-    return this.trackDiv;
-  }
-
   protected get featureLayers(): Layer[] {
     return [
       new Waves.helpers.TickLayer(
diff -r 1241ca979fd9 -r 7119d62121f0 src/app/visualisations/notes/notes.component.ts
--- a/src/app/visualisations/notes/notes.component.ts	Wed May 31 19:14:46 2017 +0100
+++ b/src/app/visualisations/notes/notes.component.ts	Wed May 31 19:21:02 2017 +0100
@@ -20,20 +20,11 @@
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class NotesComponent extends WavesComponent<Note[]> {
-  @ViewChild('track') trackDiv: ElementRef;
 
   @Input() set notes(notes: Note[]) {
     this.feature = notes;
   }
 
-  protected get containerHeight(): number {
-    return this.trackDiv.nativeElement.getBoundingClientRect().height;
-  }
-
-  protected get trackContainer(): ElementRef {
-    return this.trackDiv;
-  }
-
   protected get featureLayers(): Layer[] {
     return [
       new Waves.helpers.PianoRollLayer(
diff -r 1241ca979fd9 -r 7119d62121f0 src/app/visualisations/tracks/tracks.components.ts
--- a/src/app/visualisations/tracks/tracks.components.ts	Wed May 31 19:14:46 2017 +0100
+++ b/src/app/visualisations/tracks/tracks.components.ts	Wed May 31 19:21:02 2017 +0100
@@ -21,23 +21,12 @@
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TracksComponent extends WavesComponent<TracksFeature> {
-
-  @ViewChild('track') trackDiv: ElementRef;
-
   private currentState: PlotLayerData[];
 
   @Input() set tracks(input: TracksFeature) {
     this.feature = input;
   }
 
-  protected get containerHeight(): number {
-    return this.trackDiv.nativeElement.getBoundingClientRect().height;
-  }
-
-  protected get trackContainer(): ElementRef {
-    return this.trackDiv;
-  }
-
   protected get featureLayers(): Layer[] {
     this.currentState = generatePlotData(this.feature);
     return this.currentState.map(feature => new Waves.helpers.LineLayer(
diff -r 1241ca979fd9 -r 7119d62121f0 src/app/visualisations/waveform/waveform.component.ts
--- a/src/app/visualisations/waveform/waveform.component.ts	Wed May 31 19:14:46 2017 +0100
+++ b/src/app/visualisations/waveform/waveform.component.ts	Wed May 31 19:21:02 2017 +0100
@@ -16,22 +16,12 @@
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class WaveformComponent extends WavesComponent<AudioBuffer> {
-
-  @ViewChild('track') trackDiv: ElementRef;
   @Input() set audioBuffer(buffer: AudioBuffer) {
     this.duration = buffer.duration;
     this.timeline.pixelsPerSecond = this.timeline.visibleWidth / buffer.duration;
     this.feature = buffer;
   }
 
-  protected get containerHeight(): number {
-    return this.trackDiv.nativeElement.getBoundingClientRect().height;
-  }
-
-  protected get trackContainer(): ElementRef {
-    return this.trackDiv;
-  }
-
   protected get featureLayers(): Layer[] {
     const nChannels = this.feature.numberOfChannels;
     const totalWaveHeight = this.height * 0.9;
diff -r 1241ca979fd9 -r 7119d62121f0 src/app/visualisations/waves-base.component.ts
--- a/src/app/visualisations/waves-base.component.ts	Wed May 31 19:14:46 2017 +0100
+++ b/src/app/visualisations/waves-base.component.ts	Wed May 31 19:21:02 2017 +0100
@@ -1,7 +1,7 @@
 /**
  * Created by lucast on 26/05/2017.
  */
-import {AfterViewInit, ElementRef, Input} from '@angular/core';
+import {AfterViewInit, ElementRef, Input, ViewChild} from '@angular/core';
 import {OnSeekHandler} from '../playhead/PlayHeadHelpers';
 import {attachTouchHandlerBodges} from './WavesJunk';
 import Waves from 'waves-ui-piper';
@@ -12,7 +12,7 @@
 
 export abstract class WavesComponent<T extends ShapedFeatureData | AudioBuffer>
   implements AfterViewInit {
-
+  @ViewChild('track') trackContainer: ElementRef;
   @Input() set width(width: number) {
     if (this.timeline) {
       requestAnimationFrame(() => {
@@ -37,8 +37,6 @@
   protected zoomOnMouseDown: number;
   protected offsetOnMouseDown: number;
   protected waveTrack: Track;
-  protected abstract get containerHeight(): number;
-  protected abstract get trackContainer(): ElementRef;
   protected abstract get featureLayers(): Layer[];
   protected postAddMap: (value: Layer, index: number, array: Layer[]) => void;
   protected height: number;
@@ -52,7 +50,8 @@
   }
 
   ngAfterViewInit(): void {
-    this.height = this.containerHeight;
+    this.height =
+      this.trackContainer.nativeElement.getBoundingClientRect().height;
     this.renderTimeline(this.trackContainer);
     this.update();
   }
@@ -121,7 +120,7 @@
   private resetTimelineState(): void {
     // time axis
     const timeAxis = new Waves.helpers.TimeAxisLayer({
-      height: this.containerHeight,
+      height: this.height,
       color: '#b0b0b0'
     });
     this.addLayer(timeAxis, this.waveTrack, this.timeline.timeContext, true);