comparison src/app/visualisations/vertical-scale.component.ts @ 488:64ed45a0bad3

Introduce PlayheadRenderer, implement in the waves base. Make VerticallyBounded and VerticalScaleRenderer generic and remove bin equivalents. Forward calls for a PlayheadRenderer from VerticalScaleComponent on to its children. Also update other components accordingly.

 /**
  * Created by lucas on 01/06/2017.
  */
-import {VerticalScaleRenderer} from './waves-base.component';
+import {
+  PlayheadManager,
+  PlayheadRenderer,
+  VerticalScaleRenderer
+} from './waves-base.component';
 import {
   ChangeDetectionStrategy,
   Component,
   ContentChildren,
   QueryList,

 } from '@angular/core';
 
 @Component({
   selector: 'ugly-vertical-scale',
   template: '<ng-content></ng-content>',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {provide: PlayheadRenderer, useExisting: VerticalScaleComponent }
+  ]
 })
-export class VerticalScaleComponent implements AfterViewInit {
+export class VerticalScaleComponent implements AfterViewInit, PlayheadRenderer {
 
   @ContentChildren(
     VerticalScaleRenderer
-  ) bounded: QueryList<VerticalScaleRenderer>;
-  protected cachedRange: [number, number];
+  ) bounded: QueryList<VerticalScaleRenderer<any>>;
+  @ContentChildren(
+    PlayheadRenderer
+  ) seekable: QueryList<PlayheadRenderer>;
+  protected cachedRange: any;
 
   ngAfterViewInit(): void {
     this.bounded.forEach(component => {
       this.cachedRange = component.range;
       if (this.cachedRange) {
         component.renderScale(this.cachedRange);
       }
     });
   }
+
+  renderPlayhead(initialTime: number, colour: string): PlayheadManager {
+    const rendered = this.seekable
+      .filter(x => x !== this) // why does QueryList consider itself as a child?
+      .map(component => component.renderPlayhead(initialTime, colour));
+    return {
+      update: (time: number) => {
+        rendered.forEach(component => component.update(time));
+      },
+      remove: () => rendered.map(component => component.remove)
+    };
+  }
 }