comparison 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.

   selector: 'ugly-instants',
   templateUrl: '../waves-template.html',
   styleUrls: ['../waves-template.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class InstantsComponent extends WavesComponent implements AfterViewInit {
+export class InstantsComponent extends WavesComponent<Instant[]> {
+
   @ViewChild('track') trackDiv: ElementRef;
 
-  private mFeature: Instant[];
-  private height: number; // As it stands, height is fixed. Store once onInit.
-
   @Input() set instants(instants: Instant[]) {
-    this.mFeature = instants;
-    this.update();
+    this.feature = instants;
   }
 
-  get instants(): Instant[] {
-    return this.mFeature;
+  protected get containerHeight(): number {
+    return this.trackDiv.nativeElement.getBoundingClientRect().height;
   }
 
-  ngAfterViewInit(): void {
-    this.height = this.trackDiv.nativeElement.getBoundingClientRect().height;
-    this.renderTimeline(this.trackDiv);
-    this.update();
+  protected get trackContainer(): ElementRef {
+    return this.trackDiv;
   }
 
-  update(): void {
-    if (!this.waveTrack || !this.instants) { return; }
-    this.clearTimeline(this.trackDiv);
-
-    this.addLayer(
+  protected get featureLayers(): Layer[] {
+    return [
       new Waves.helpers.TickLayer(
-        this.instants,
+        this.feature,
         {
           height: this.height,
           color: this.colour,
           labelPosition: 'bottom',
           shadeSegments: true
         }
-      ),
-      this.waveTrack,
-      this.timeline.timeContext
-    );
+      )
+    ];
   }
 }