# HG changeset patch
# User Lucas Thompson <dev@lucas.im>
# Date 1496307991 -3600
# Node ID 26ca17e673642c29327bedbf951c8f29f325f5ea
# Parent  29b817e49a2228a1649b4a4d3667e7be4e8edce7
Implement VerticallyBoundedWavesComponent for tracks, notes. Wrap curves in a vertical-scale component, and use scales by default for supported components dynamically instantiated in analysis-item.

diff -r 29b817e49a22 -r 26ca17e67364 src/app/analysis-item/analysis-item.component.html
--- a/src/app/analysis-item/analysis-item.component.html	Thu Jun 01 10:04:41 2017 +0100
+++ b/src/app/analysis-item/analysis-item.component.html	Thu Jun 01 10:06:31 2017 +0100
@@ -40,22 +40,24 @@
                 [onSeek]="onSeek"
                 [curve]="item.collected"
               ></ugly-curve>
-              <ugly-tracks
-                *ngSwitchCase="'tracks'"
-                [colour]="getNextColour()"
-                [timeline]="timeline"
-                [width]="contentWidth"
-                [onSeek]="onSeek"
-                [tracks]="item.collected"
-              ></ugly-tracks>
-              <ugly-notes
-                *ngSwitchCase="'notes'"
-                [colour]="getNextColour()"
-                [timeline]="timeline"
-                [width]="contentWidth"
-                [onSeek]="onSeek"
-                [notes]="item.collected"
-              ></ugly-notes>
+              <ugly-vertical-scale *ngSwitchCase="'tracks'">
+                <ugly-tracks
+                  [colour]="getNextColour()"
+                  [timeline]="timeline"
+                  [width]="contentWidth"
+                  [onSeek]="onSeek"
+                  [tracks]="item.collected"
+                ></ugly-tracks>
+              </ugly-vertical-scale>
+              <ugly-vertical-scale *ngSwitchCase="'notes'">
+                <ugly-notes
+                  [colour]="getNextColour()"
+                  [timeline]="timeline"
+                  [width]="contentWidth"
+                  [onSeek]="onSeek"
+                  [notes]="item.collected"
+                ></ugly-notes>
+              </ugly-vertical-scale>
               <ugly-instants
                 *ngSwitchCase="'instants'"
                 [colour]="getNextColour()"
diff -r 29b817e49a22 -r 26ca17e67364 src/app/visualisations/curve/curve.component.ts
--- a/src/app/visualisations/curve/curve.component.ts	Thu Jun 01 10:04:41 2017 +0100
+++ b/src/app/visualisations/curve/curve.component.ts	Thu Jun 01 10:06:31 2017 +0100
@@ -11,13 +11,15 @@
 
 @Component({
   selector: 'ugly-curve',
-  template: `<ugly-tracks
-    [timeline]="timeline"
-    [width]="width"
-    [onSeek]="onSeek"
-    [colour]="colour"
-    [tracks]="[curve]"
-  ></ugly-tracks>`,
+  template: `<ugly-vertical-scale>
+    <ugly-tracks
+      [timeline]="timeline"
+      [width]="width"
+      [onSeek]="onSeek"
+      [colour]="colour"
+      [tracks]="[curve]"
+    ></ugly-tracks>
+  </ugly-vertical-scale>`,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CurveComponent {
diff -r 29b817e49a22 -r 26ca17e67364 src/app/visualisations/notes/notes.component.ts
--- a/src/app/visualisations/notes/notes.component.ts	Thu Jun 01 10:04:41 2017 +0100
+++ b/src/app/visualisations/notes/notes.component.ts	Thu Jun 01 10:06:31 2017 +0100
@@ -1,7 +1,10 @@
 /**
  * Created by lucast on 31/05/2017.
  */
-import {WavesComponent} from '../waves-base.component';
+import {
+  VerticallyBounded,
+  VerticallyBoundedWavesComponent
+} from '../waves-base.component';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -14,22 +17,29 @@
   selector: 'ugly-notes',
   templateUrl: '../waves-template.html',
   styleUrls: ['../waves-template.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{ provide: VerticallyBounded, useExisting: NotesComponent }]
 })
-export class NotesComponent extends WavesComponent<Note[]> {
+export class NotesComponent extends VerticallyBoundedWavesComponent<Note[]> {
+  private currentVerticalRange: [number, number];
+
+  get range(): [number, number] {
+    return this.currentVerticalRange;
+  }
 
   @Input() set notes(notes: Note[]) {
     this.feature = notes;
   }
 
   protected get featureLayers(): Layer[] {
+    this.currentVerticalRange = findVerticalRange(this.feature);
     return [
       new Waves.helpers.PianoRollLayer(
         this.feature,
         {
           height: this.height,
           color: this.colour,
-          yDomain: findVerticalRange(this.feature)
+          yDomain: this.currentVerticalRange
         }
       )
     ];
diff -r 29b817e49a22 -r 26ca17e67364 src/app/visualisations/tracks/tracks.components.ts
--- a/src/app/visualisations/tracks/tracks.components.ts	Thu Jun 01 10:04:41 2017 +0100
+++ b/src/app/visualisations/tracks/tracks.components.ts	Thu Jun 01 10:06:31 2017 +0100
@@ -1,7 +1,10 @@
 /**
  * Created by lucas on 30/05/2017.
  */
-import {WavesComponent} from '../waves-base.component';
+import {
+  VerticallyBounded,
+  VerticallyBoundedWavesComponent,
+} from '../waves-base.component';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -15,15 +18,23 @@
   selector: 'ugly-tracks',
   templateUrl: '../waves-template.html',
   styleUrls: ['../waves-template.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{ provide: VerticallyBounded, useExisting: TracksComponent }]
 })
-export class TracksComponent extends WavesComponent<TracksFeature> {
+export class TracksComponent
+  extends VerticallyBoundedWavesComponent<TracksFeature> {
+
   private currentState: PlotLayerData[];
 
   @Input() set tracks(input: TracksFeature) {
     this.feature = input;
   }
 
+  get range(): [number, number] {
+    return this.currentState && this.currentState.length > 0 ?
+      this.currentState[0].yDomain : null;
+  }
+
   protected get featureLayers(): Layer[] {
     this.currentState = generatePlotData(this.feature);
     return this.currentState.map(feature => new Waves.helpers.LineLayer(