From 57a947eaef6a0841231614decfa8ff6afe41361d Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Wed, 2 Sep 2015 17:19:20 -0700
Subject: [PATCH] [Time Conductor] Accept drag gestures

WTD-1515
---
 .../templates/controls/time-controller.html   | 12 ++-
 .../controllers/TimeConductorController.js    | 75 ++++++++++++++++++-
 2 files changed, 82 insertions(+), 5 deletions(-)

diff --git a/platform/commonUI/general/res/templates/controls/time-controller.html b/platform/commonUI/general/res/templates/controls/time-controller.html
index 97638bfbd7..90e9510865 100644
--- a/platform/commonUI/general/res/templates/controls/time-controller.html
+++ b/platform/commonUI/general/res/templates/controls/time-controller.html
@@ -34,13 +34,21 @@ properly on the range left and right bounds.
                  mct-resize="spanWidth = bounds.width">
                 <div class="slot range-holder">
                     <div class="range"
+                         mct-drag-down="startMiddleDrag()"
+                         mct-drag="middleDrag(delta[0])"
                          ng-style="{ left: startInnerPct, right: endInnerPct}">
                     </div>
                 </div>
-                <div class="knob knob-l" ng-style="{ left: startInnerPct }">
+                <div class="knob knob-l"
+                     mct-drag-down="startLeftDrag()"
+                     mct-drag="leftDrag(delta[0])"
+                     ng-style="{ left: startInnerPct }">
                     <div class="range-value">{{startInnerText}}</div>
                 </div>
-                <div class="knob knob-r" ng-style="{ right: endInnerPct }">
+                <div class="knob knob-r"
+                     mct-drag-down="startRightDrag()"
+                     mct-drag="rightDrag(delta[0])"
+                     ng-style="{ right: endInnerPct }">
                     <div class="range-value">{{endInnerText}}</div>
                 </div>
             </div>
diff --git a/platform/commonUI/general/src/controllers/TimeConductorController.js b/platform/commonUI/general/src/controllers/TimeConductorController.js
index d87a844336..17a4298577 100644
--- a/platform/commonUI/general/src/controllers/TimeConductorController.js
+++ b/platform/commonUI/general/src/controllers/TimeConductorController.js
@@ -33,10 +33,10 @@ define(
          * @constructor
          */
         function TimeConductorController($scope, now) {
-            var tickCount = 2;
+            var tickCount = 2,
+                initialDragValue;
+
 
-            $scope.state = false;
-            $scope.ticks = [];
 
             function formatTimestamp(ts) {
                 return moment.utc(ts).format(DATE_FORMAT);
@@ -95,6 +95,75 @@ define(
                 updateTicks();
             }
 
+            function startLeftDrag() {
+                initialDragValue = $scope.ngModel.inner[0];
+            }
+
+            function startRightDrag() {
+                initialDragValue = $scope.ngModel.inner[1];
+            }
+
+            function startMiddleDrag() {
+                initialDragValue = [
+                    $scope.ngModel.inner[0],
+                    $scope.ngModel.inner[0]
+                ];
+            }
+
+            function toMillis(pixels) {
+                var span = $scope.ngModel.outer[1] - $scope.ngModel.outer[0];
+                return (pixels / $scope.spanWidth) * span;
+            }
+
+            function clamp(value, low, high) {
+                return Math.max(low, Math.min(high, value));
+            }
+
+            function leftDrag(pixels) {
+                var delta = toMillis(pixels);
+                $scope.ngModel.inner[0] = clamp(
+                    initialDragValue + delta,
+                    $scope.ngModel.outer[0],
+                    $scope.ngModel.inner[1]
+                );
+                updateFromParameters($scope.ngModel);
+            }
+
+            function rightDrag(pixels) {
+                var delta = toMillis(pixels);
+                $scope.ngModel.inner[1] = clamp(
+                    initialDragValue + delta,
+                    $scope.ngModel.inner[0],
+                    $scope.ngModel.outer[1]
+                );
+                updateFromParameters($scope.ngModel);
+            }
+
+            function middleDrag(pixels) {
+                var delta = toMillis(pixels),
+                    index = delta < 0 ? 0 : 1,
+                    opposite = (index === 0) ? 1 : 0,
+                    span = initialDragValue[opposite] - initialDragValue[index];
+
+                $scope.ngModel.inner[index] = clamp(
+                    initialDragValue[index] + delta,
+                    $scope.ngModel.outer[0],
+                    $scope.ngModel.outer[1]
+                );
+                $scope.ngModel.inner[opposite] =
+                    $scope.ngModel.inner[index] + span;
+            }
+
+            $scope.startLeftDrag = startLeftDrag;
+            $scope.startRightDrag = startRightDrag;
+            //$scope.startMiddleDrag = startMiddleDrag;
+            $scope.leftDrag = leftDrag;
+            $scope.rightDrag = rightDrag;
+            //$scope.middleDrag = middleDrag;
+
+            $scope.state = false;
+            $scope.ticks = [];
+
             // Initialize scope to defaults
             updateFromParameters();