changeset 403:40ea40ebc2b3

Have animation controlled by a prop, clearing up animation tasks when set to false. Wire up accordingly.

--- a/src/app/analysis-item/analysis-item.component.html	Fri Jun 02 19:10:47 2017 +0100
+++ b/src/app/analysis-item/analysis-item.component.html	Fri Jun 02 19:12:38 2017 +0100
@@ -32,18 +32,23 @@
           <div class="content"
             *ngIf="getFeatureShape() as shape; else showSpinner">
             <div [ngSwitch]="shape" class="content">
-              <ugly-curve
+              <ugly-cross-hair-inspector
                 *ngSwitchCase="'vector'"
-                [colour]="getNextColour()"
-                [timeline]="timeline"
-                [width]="contentWidth"
-                [onSeek]="onSeek"
-                [curve]="item.collected"
                 [unit]="item.unit"
-              ></ugly-curve>
+                [isAnimated]="isActive"
+              >
+                <ugly-curve
+                  [colour]="getNextColour()"
+                  [timeline]="timeline"
+                  [width]="contentWidth"
+                  [onSeek]="onSeek"
+                  [curve]="item.collected"
+                ></ugly-curve>
+              </ugly-cross-hair-inspector>
               <ugly-cross-hair-inspector
                 *ngSwitchCase="'tracks'"
                 [unit]="item.unit"
+                [isAnimated]="isActive"
               >
                 <ugly-tracks
                   [colour]="getNextColour()"
@@ -56,6 +61,7 @@
               <ugly-cross-hair-inspector
                 *ngSwitchCase="'notes'"
                 [unit]="item.unit"
+                [isAnimated]="isActive"
               >
                 <ugly-notes
                   [colour]="getNextColour()"

--- a/src/app/visualisations/cross-hair-inspector.component.ts	Fri Jun 02 19:10:47 2017 +0100
+++ b/src/app/visualisations/cross-hair-inspector.component.ts	Fri Jun 02 19:12:38 2017 +0100
@@ -13,7 +13,10 @@
   VerticalValueInspectorRenderer
 } from './waves-base.component';
 import {VerticalScaleComponent} from './vertical-scale.component';
-import {RenderLoopService} from '../services/render-loop/render-loop.service';
+import {
+  RenderLoopService,
+  TaskRemover
+} from '../services/render-loop/render-loop.service';
 
 @Component({
   selector: 'ugly-cross-hair-inspector',
@@ -26,16 +29,40 @@
     VerticalValueInspectorRenderer
   ) inspectorRenderers: QueryList<VerticalValueInspectorRenderer>;
   @Input() unit: string;
+  @Input() set isAnimated(isAnimated: boolean) {
+    this.mIsAnimated = isAnimated;
+    if (this.removers.length) {
+      this.removers.forEach(remove => remove());
+      this.removers = [];
+    }
+    if (isAnimated) {
+      this.addTasks();
+    }
+  }
+
+  private removers: TaskRemover[];
+  private mIsAnimated: boolean;
 
   constructor(private renderLoop: RenderLoopService) {
     super();
+    this.removers = [];
   }
 
   ngAfterViewInit(): void {
     super.ngAfterViewInit();
     this.inspectorRenderers.forEach(renderer => {
-      this.renderLoop.addPlayingTask(renderer.updatePosition);
-      renderer.renderInspector(this.cachedRanged, this.unit);
+      renderer.renderInspector(this.cachedRange, this.unit);
     });
+    this.addTasks();
+  }
+
+  private addTasks(): void {
+    if (this.inspectorRenderers && this.mIsAnimated) {
+      this.inspectorRenderers.forEach(renderer => {
+        this.removers.push(
+          this.renderLoop.addPlayingTask(renderer.updatePosition)
+        );
+      });
+    }
   }
 }

--- a/src/app/visualisations/vertical-scale.component.ts	Fri Jun 02 19:10:47 2017 +0100
+++ b/src/app/visualisations/vertical-scale.component.ts	Fri Jun 02 19:12:38 2017 +0100
@@ -20,13 +20,13 @@
   @ContentChildren(
     VerticalScaleRenderer
   ) bounded: QueryList<VerticalScaleRenderer>;
-  protected cachedRanged: [number, number];
+  protected cachedRange: [number, number];
 
   ngAfterViewInit(): void {
     this.bounded.forEach(component => {
-      this.cachedRanged = component.range;
-      if (this.cachedRanged) {
-        component.renderScale(this.cachedRanged);
+      this.cachedRange = component.range;
+      if (this.cachedRange) {
+        component.renderScale(this.cachedRange);
       }
     });
   }