changeset 393:a02e6ec4a9d2

cross-hair-inspector component, much the same technique used for the vertical-scale. Change curve to use it. Doesn't currently animate.

--- a/src/app/app.module.ts	Thu Jun 01 16:25:48 2017 +0100
+++ b/src/app/app.module.ts	Thu Jun 01 16:26:52 2017 +0100
@@ -36,7 +36,8 @@
 import {NotesComponent} from './visualisations/notes/notes.component';
 import {InstantsComponent} from './visualisations/instants/instants.component';
 import {GridComponent} from './visualisations/grid/grid.component';
-import {VerticalScaleComponent} from "./visualisations/vertical-scale.component";
+import {VerticalScaleComponent} from './visualisations/vertical-scale.component';
+import {CrossHairInspectorComponent} from './visualisations/cross-hair-inspector.component';
 
 export function createAudioContext(): AudioContext {
   return new (
@@ -130,7 +131,8 @@
     NotesComponent,
     InstantsComponent,
     GridComponent,
-    VerticalScaleComponent
+    VerticalScaleComponent,
+    CrossHairInspectorComponent
   ],
   imports: [
     BrowserModule,

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/visualisations/cross-hair-inspector.component.ts	Thu Jun 01 16:26:52 2017 +0100
@@ -0,0 +1,33 @@
+/**
+ * Created by lucast on 01/06/2017.
+ */
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ContentChildren,
+  QueryList
+} from '@angular/core';
+import {
+  VerticalValueInspectorRenderer
+} from './waves-base.component';
+import {VerticalScaleComponent} from './vertical-scale.component';
+
+@Component({
+  selector: 'ugly-cross-hair-inspector',
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CrossHairInspectorComponent extends VerticalScaleComponent
+  implements AfterViewInit {
+  @ContentChildren(
+    VerticalValueInspectorRenderer
+  ) inspectorRenderers: QueryList<VerticalValueInspectorRenderer>;
+
+  ngAfterViewInit(): void {
+    super.ngAfterViewInit();
+    this.inspectorRenderers.forEach(renderer => {
+      renderer.renderInspector(this.cachedRanged);
+    });
+  }
+}

--- a/src/app/visualisations/curve/curve.component.ts	Thu Jun 01 16:25:48 2017 +0100
+++ b/src/app/visualisations/curve/curve.component.ts	Thu Jun 01 16:26:52 2017 +0100
@@ -11,7 +11,7 @@
 
 @Component({
   selector: 'ugly-curve',
-  template: `<ugly-vertical-scale>
+  template: `<ugly-cross-hair-inspector>
     <ugly-tracks
       [timeline]="timeline"
       [width]="width"
@@ -19,7 +19,7 @@
       [colour]="colour"
       [tracks]="[curve]"
     ></ugly-tracks>
-  </ugly-vertical-scale>`,
+  </ugly-cross-hair-inspector>`,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CurveComponent {

--- a/src/app/visualisations/vertical-scale.component.ts	Thu Jun 01 16:25:48 2017 +0100
+++ b/src/app/visualisations/vertical-scale.component.ts	Thu Jun 01 16:26:52 2017 +0100
@@ -1,14 +1,14 @@
 /**
  * Created by lucas on 01/06/2017.
  */
-import {VerticallyBounded} from "./waves-base.component";
+import {VerticalScaleRenderer} from './waves-base.component';
 import {
   ChangeDetectionStrategy,
   Component,
   ContentChildren,
   QueryList,
   AfterViewInit
-} from "@angular/core";
+} from '@angular/core';
 
 @Component({
   selector: 'ugly-vertical-scale',
@@ -17,13 +17,16 @@
 })
 export class VerticalScaleComponent implements AfterViewInit {
 
-  @ContentChildren(VerticallyBounded) bounded: QueryList<VerticallyBounded>;
+  @ContentChildren(
+    VerticalScaleRenderer
+  ) bounded: QueryList<VerticalScaleRenderer>;
+  protected cachedRanged: [number, number];
 
   ngAfterViewInit(): void {
     this.bounded.forEach(component => {
-      const range = component.range;
-      if (range) {
-        component.renderScale(range);
+      this.cachedRanged = component.range;
+      if (this.cachedRanged) {
+        component.renderScale(this.cachedRanged);
       }
     });
   }