changeset 381:b220ed78a250

Rig up instants and add dynamic colour selection to feature components. Structure of a derived WaveComponent is now pretty clear, some refactoring is in order.

--- a/src/app/analysis-item/analysis-item.component.html	Wed May 31 15:15:55 2017 +0100
+++ b/src/app/analysis-item/analysis-item.component.html	Wed May 31 17:09:36 2017 +0100
@@ -34,6 +34,7 @@
             <div [ngSwitch]="shape" class="content">
               <ugly-curve
                 *ngSwitchCase="'vector'"
+                [colour]="getNextColour()"
                 [timeline]="timeline"
                 [width]="contentWidth"
                 [onSeek]="onSeek"
@@ -41,6 +42,7 @@
               ></ugly-curve>
               <ugly-tracks
                 *ngSwitchCase="'tracks'"
+                [colour]="getNextColour()"
                 [timeline]="timeline"
                 [width]="contentWidth"
                 [onSeek]="onSeek"
@@ -48,12 +50,20 @@
               ></ugly-tracks>
               <ugly-notes
                 *ngSwitchCase="'notes'"
+                [colour]="getNextColour()"
                 [timeline]="timeline"
                 [width]="contentWidth"
                 [onSeek]="onSeek"
                 [notes]="item.collected"
               ></ugly-notes>
-
+              <ugly-instants
+                *ngSwitchCase="'instants'"
+                [colour]="getNextColour()"
+                [timeline]="timeline"
+                [width]="contentWidth"
+                [onSeek]="onSeek"
+                [instants]="item.collected"
+              ></ugly-instants>
               <div *ngSwitchDefault>Feature cannot be visualised.</div>
             </div>
           </div>

--- a/src/app/analysis-item/analysis-item.component.ts	Wed May 31 15:15:55 2017 +0100
+++ b/src/app/analysis-item/analysis-item.component.ts	Wed May 31 17:09:36 2017 +0100
@@ -10,6 +10,7 @@
 import {naivePagingMapper} from '../visualisations/WavesJunk';
 import {OnSeekHandler, TimePixelMapper} from '../playhead/PlayHeadHelpers';
 import {
+  defaultColourGenerator,
   HigherLevelFeatureShape,
   KnownShapedFeature
 } from '../visualisations/FeatureUtilities';
@@ -109,4 +110,8 @@
     return !isPendingRootAudioItem(this.item) &&
     isAnalysisItem(this.item) ? this.item.shape : null;
   }
+
+  getNextColour(): string {
+    return defaultColourGenerator.next().value;
+  }
 }

--- a/src/app/app.module.ts	Wed May 31 15:15:55 2017 +0100
+++ b/src/app/app.module.ts	Wed May 31 17:09:36 2017 +0100
@@ -34,6 +34,7 @@
 import {CurveComponent} from './visualisations/curve/curve.component';
 import {TracksComponent} from './visualisations/tracks/tracks.components';
 import {NotesComponent} from './visualisations/notes/notes.component';
+import {InstantsComponent} from './visualisations/instants/instants.component';
 
 export function createAudioContext(): AudioContext {
   return new (
@@ -124,7 +125,8 @@
     LivePlayHeadComponent,
     CurveComponent,
     TracksComponent,
-    NotesComponent
+    NotesComponent,
+    InstantsComponent
   ],
   imports: [
     BrowserModule,

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/visualisations/instants/instants.component.ts	Wed May 31 17:09:36 2017 +0100
@@ -0,0 +1,61 @@
+/**
+ * Created by lucast on 31/05/2017.
+ */
+import {WavesComponent} from '../waves-base.component';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  ViewChild
+} from '@angular/core';
+import {Instant} from '../FeatureUtilities';
+import Waves from 'waves-ui-piper';
+
+@Component({
+  selector: 'ugly-instants',
+  templateUrl: '../waves-template.html',
+  styleUrls: ['../waves-template.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class InstantsComponent extends WavesComponent implements AfterViewInit {
+  @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();
+  }
+
+  get instants(): Instant[] {
+    return this.mFeature;
+  }
+
+  ngAfterViewInit(): void {
+    this.height = this.trackDiv.nativeElement.getBoundingClientRect().height;
+    this.renderTimeline(this.trackDiv);
+    this.update();
+  }
+
+  update(): void {
+    if (!this.waveTrack || !this.instants) { return; }
+    this.clearTimeline(this.trackDiv);
+
+    this.addLayer(
+      new Waves.helpers.TickLayer(
+        this.instants,
+        {
+          height: this.height,
+          color: this.colour,
+          labelPosition: 'bottom',
+          shadeSegments: true
+        }
+      ),
+      this.waveTrack,
+      this.timeline.timeContext
+    );
+  }
+}