changeset 372:bc2680f0736b

Move curve logic to a tracks component, and use that component to create a curve component.

--- a/src/app/analysis-item/analysis-item.component.html	Tue May 30 23:21:13 2017 +0100
+++ b/src/app/analysis-item/analysis-item.component.html	Wed May 31 02:42:45 2017 +0100
@@ -34,19 +34,19 @@
               <ugly-curve
                 *ngSwitchCase="'vector'"
                 [timeline]="timeline"
-                [trackIdPrefix]="item.id"
+                [id]="item.id"
                 [width]="contentWidth"
                 [onSeek]="onSeek"
-                [feature]="[item.collected]"
+                [curve]="item.collected"
               ></ugly-curve>
-              <ugly-curve
+              <ugly-tracks
                 *ngSwitchCase="'tracks'"
                 [timeline]="timeline"
                 [trackIdPrefix]="item.id"
                 [width]="contentWidth"
                 [onSeek]="onSeek"
-                [feature]="item.collected"
-              ></ugly-curve>
+                [tracks]="item.collected"
+              ></ugly-tracks>
 
               <div *ngSwitchDefault>Feature cannot be visualised.</div>
             </div>

--- a/src/app/app.module.ts	Tue May 30 23:21:13 2017 +0100
+++ b/src/app/app.module.ts	Wed May 31 02:42:45 2017 +0100
@@ -32,6 +32,7 @@
 import {PlayHeadComponent} from './playhead/playhead.component';
 import {LivePlayHeadComponent} from './playhead/live-play-head.component';
 import {CurveComponent} from "./visualisations/curve/curve.component";
+import {TracksComponent} from "./visualisations/tracks/tracks.components";
 
 export function createAudioContext(): AudioContext {
   return new (
@@ -120,7 +121,8 @@
     ProgressBarComponent,
     PlayHeadComponent,
     LivePlayHeadComponent,
-    CurveComponent
+    CurveComponent,
+    TracksComponent
   ],
   imports: [
     BrowserModule,

--- a/src/app/visualisations/curve/curve.component.ts	Tue May 30 23:21:13 2017 +0100
+++ b/src/app/visualisations/curve/curve.component.ts	Wed May 31 02:42:45 2017 +0100
@@ -1,71 +1,32 @@
 /**
  * Created by lucas on 30/05/2017.
  */
-import {WavesComponent} from "../waves-base.component";
 import {
-  AfterViewInit,
   ChangeDetectionStrategy,
   Component,
-  ElementRef,
-  Input,
-  ViewChild
+  Input
 } from "@angular/core";
+import {OnSeekHandler} from "../../playhead/PlayHeadHelpers";
 import {VectorFeature} from "piper/HigherLevelUtilities";
-import Waves from 'waves-ui-piper';
-import {generatePlotData, PlotLayerData} from "../FeatureUtilities";
 
 @Component({
   selector: 'ugly-curve',
-  templateUrl: '../waves-template.html',
+  template: `<ugly-tracks
+    [timeline]="timeline"
+    [trackIdPrefix]="id"
+    [width]="width"
+    [onSeek]="onSeek"
+    [colour]="colour"
+    [tracks]="[curve]"
+  ></ugly-tracks>`,
   styleUrls: ['../waves-template.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CurveComponent extends WavesComponent implements AfterViewInit {
-
-  @ViewChild('track') trackDiv: ElementRef;
-
-  private mFeature: VectorFeature[];
-  private currentState: PlotLayerData[];
-  private height: number; // As it stands, height is fixed. Store once onInit.
-
-  @Input() set feature(input: VectorFeature[]) {
-    this.mFeature = input;
-    this.currentState = generatePlotData(input);
-    this.update();
-  }
+export class CurveComponent {
+  @Input() id: string; // TODO refactor WaveComponents to have own Timeline, sharing a TimeContext
+  @Input() timeline: Timeline; // TODO as above
+  @Input() onSeek: OnSeekHandler;
+  @Input() width: number;
+  @Input() curve: VectorFeature;
   @Input() colour: string;
-
-  get feature(): VectorFeature[] {
-    return this.mFeature;
-  }
-
-  ngAfterViewInit(): void {
-    this.height = this.trackDiv.nativeElement.getBoundingClientRect().height;
-    this.renderTimeline(this.trackDiv);
-    this.update();
-  }
-
-  update(): void {
-    if (this.waveTrack) {
-      this.clearTimeline(this.trackDiv);
-      for (const feature of this.currentState) {
-        const lineLayer = new Waves.helpers.LineLayer(feature.data, {
-          color: this.colour,
-          height: this.height,
-          yDomain: feature.yDomain
-        });
-        this.addLayer(
-          lineLayer,
-          this.waveTrack,
-          this.timeline.timeContext
-        );
-
-        // Set start and duration so that the highlight layer can use
-        // them to determine which line to draw values from
-        lineLayer.start = feature.startTime;
-        lineLayer.duration = feature.duration;
-        lineLayer.update(); // TODO probably better to update after all added
-      }
-    }
-  }
 }

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/visualisations/tracks/tracks.components.ts	Wed May 31 02:42:45 2017 +0100
@@ -0,0 +1,71 @@
+/**
+ * Created by lucas on 30/05/2017.
+ */
+import {WavesComponent} from "../waves-base.component";
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  ViewChild
+} from "@angular/core";
+import {TracksFeature} from "piper/HigherLevelUtilities";
+import Waves from 'waves-ui-piper';
+import {generatePlotData, PlotLayerData} from "../FeatureUtilities";
+
+@Component({
+  selector: 'ugly-tracks',
+  templateUrl: '../waves-template.html',
+  styleUrls: ['../waves-template.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TracksComponent extends WavesComponent implements AfterViewInit {
+
+  @ViewChild('track') trackDiv: ElementRef;
+
+  private mFeature: TracksFeature;
+  private currentState: PlotLayerData[];
+  private height: number; // As it stands, height is fixed. Store once onInit.
+
+  @Input() set tracks(input: TracksFeature) {
+    this.mFeature = input;
+    this.currentState = generatePlotData(input);
+    this.update();
+  }
+  @Input() colour: string;
+
+  get tracks(): TracksFeature {
+    return this.mFeature;
+  }
+
+  ngAfterViewInit(): void {
+    this.height = this.trackDiv.nativeElement.getBoundingClientRect().height;
+    this.renderTimeline(this.trackDiv);
+    this.update();
+  }
+
+  update(): void {
+    if (this.waveTrack) {
+      this.clearTimeline(this.trackDiv);
+      for (const feature of this.currentState) {
+        const lineLayer = new Waves.helpers.LineLayer(feature.data, {
+          color: this.colour,
+          height: this.height,
+          yDomain: feature.yDomain
+        });
+        this.addLayer(
+          lineLayer,
+          this.waveTrack,
+          this.timeline.timeContext
+        );
+
+        // Set start and duration so that the highlight layer can use
+        // them to determine which line to draw values from
+        lineLayer.start = feature.startTime;
+        lineLayer.duration = feature.duration;
+        lineLayer.update(); // TODO probably better to update after all added
+      }
+    }
+  }
+}