[Time Conductor] Added Zoom

platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss

@@ -223,13 +223,13 @@
         .l-time-conductor-zoom-w {
             @include justify-content(flex-end);
             .time-conductor-zoom {
-                display: none; // TEMP per request from Andrew 8/1/16
+                //display: none; // TEMP per request from Andrew 8/1/16
                 height: $r3H;
                 min-width: 100px;
                 width: 20%;
             }
             .time-conductor-zoom-current-range {
-                display: none; // TEMP per request from Andrew 8/1/16
+                //display: none; // TEMP per request from Andrew 8/1/16
                 color: $colorTick;
             }
         }

platform/features/conductor-v2/conductor/res/templates/time-conductor.html

@@ -116,7 +116,13 @@
             <!-- Zoom control -->
             <div class="l-time-conductor-zoom-w grows flex-elem l-flex-row">
                 <span class="time-conductor-zoom-current-range flex-elem flex-fixed holder"></span>
-                <input class="time-conductor-zoom flex-elem" type="range" />
+                <input class="time-conductor-zoom flex-elem" type="range"
+                       ng-model="currentZoom"
+                       ng-mouseUp="tcController.zoomStop(currentZoom)"
+                       ng-change="tcController.zoom(currentZoom)"
+                       min="0.01"
+                       step="0.01"
+                       max="0.99" />
             </div>
         </div>
 

platform/features/conductor-v2/conductor/src/timeSystems/TimeSystem.js

@@ -73,8 +73,20 @@ define([], function () {
         throw new Error('Not implemented');
     };
 
-    /**
+    /***
      *
+     * @typedef {object} TimeConductorZoom
+     * @property {number} min The largest time span that the time
+     * conductor can display in this time system
+     * @property {number} max The smallest time span that the time
+     * conductor can display in this time system
+     *
+     * @typedef {object} TimeSystemDefault
+     * @property {TimeConductorDeltas} deltas The deltas to apply by default
+     * when this time system is active. Applies to real-time modes only
+     * @property {TimeConductorBounds} bounds The bounds to apply by default
+     * when this time system is active
+     * @property {TimeConductorZoom} zoom Default min and max zoom levels
      * @returns {TimeSystemDefault[]} At least one set of default values for
      * this time system.
      */

platform/features/conductor-v2/conductor/src/ui/ConductorAxisController.js

@@ -135,6 +135,10 @@ define(
             //Respond to changes in conductor
             this.conductor.on("timeSystem", this.changeTimeSystem);
             this.conductor.on("bounds", this.changeBounds);
+
+            scope.$on("zoom", function (evt, bounds){
+                this.changeBounds(bounds);
+            }.bind(this));
         };
 
         ConductorAxisController.prototype.panEnd = function () {

platform/features/conductor-v2/conductor/src/ui/TimeConductorController.js

@@ -123,6 +123,8 @@ define(
         TimeConductorController.prototype.setFormFromBounds = function (bounds) {
             this.$scope.boundsModel.start = bounds.start;
             this.$scope.boundsModel.end = bounds.end;
+            //this.$scope.currentZoom = bounds.end - bounds.start;
+            this.$scope.currentZoom = this.toSliderValue(bounds.end - bounds.start);
             if (!this.pendingUpdate) {
                 this.pendingUpdate = true;
                 this.$window.requestAnimationFrame(function () {
@@ -157,9 +159,12 @@ define(
          * @private
          */
         TimeConductorController.prototype.setFormFromTimeSystem = function (timeSystem) {
-            this.$scope.timeSystemModel.selected = timeSystem;
+            var timeSystemModel = this.$scope.timeSystemModel;
-            this.$scope.timeSystemModel.format = timeSystem.formats()[0];
+            timeSystemModel.selected = timeSystem;
-            this.$scope.timeSystemModel.deltaFormat = timeSystem.deltaFormat();
+            timeSystemModel.format = timeSystem.formats()[0];
+            timeSystemModel.deltaFormat = timeSystem.deltaFormat();
+            timeSystemModel.minZoom = timeSystem.defaults().zoom.min;
+            timeSystemModel.maxZoom = timeSystem.defaults().zoom.max;
         };
 
 
@@ -246,6 +251,35 @@ define(
             }
         };
 
+        TimeConductorController.prototype.toSliderValue = function (timeSpan) {
+            var timeSystem = this.conductor.timeSystem();
+            if (timeSystem) {
+                var zoomDefaults = this.conductor.timeSystem().defaults().zoom;
+                var perc = timeSpan / (zoomDefaults.min - zoomDefaults.max);
+                return 1 - Math.pow(perc, 1 / 4);
+            }
+        };
+
+        TimeConductorController.prototype.toTimeSpan = function (sliderValue) {
+            var center = this.$scope.boundsModel.start +
+                ((this.$scope.boundsModel.end - this.$scope.boundsModel.start) / 2);
+            var zoomDefaults = this.conductor.timeSystem().defaults().zoom;
+            var timeSpan = Math.pow((1 - sliderValue), 4) * (zoomDefaults.min - zoomDefaults.max);
+            return {start: center - timeSpan / 2, end: center + timeSpan / 2};
+        };
+
+        TimeConductorController.prototype.zoom = function(sliderValue) {
+            var bounds = this.toTimeSpan(sliderValue);
+            this.setFormFromBounds(bounds);
+
+            this.$scope.$broadcast("zoom", bounds);
+        };
+
+        TimeConductorController.prototype.zoomStop = function (sliderValue) {
+            var bounds = this.toTimeSpan(sliderValue);
+            this.conductor.bounds(bounds);
+        };
+
         return TimeConductorController;
     }
 );

platform/features/conductor-v2/utcTimeSystem/src/UTCTimeSystem.js

@@ -64,13 +64,17 @@ define([
         return this.sources;
     };
 
-    UTCTimeSystem.prototype.defaults = function (key) {
+    UTCTimeSystem.prototype.defaults = function () {
         var now = Math.ceil(Date.now() / 1000) * 1000;
+        var ONE_MINUTE = 60 * 1 * 1000;
+        var FIFTY_YEARS = 50 * 365 * 24 * 60 * 60 * 1000;
+
         return {
             key: 'utc-default',
             name: 'UTC time system defaults',
             deltas: {start: FIFTEEN_MINUTES, end: 0},
-            bounds: {start: now - FIFTEEN_MINUTES, end: now}
+            bounds: {start: now - FIFTEEN_MINUTES, end: now},
+            zoom: {min: FIFTY_YEARS, max: ONE_MINUTE}
         };
     };