ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-17 06:38:17 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Time Conductor] Rename TimeConductorController

Browse Source 
Rename TimeConductorController to TimeRangeController, to
reflect that this is intended to serve as a more general
control. Additionally, stop using arrays for inner and
outer bounds and instead use explicit start/end properties,
for clarity. WTD-1515
This commit is contained in:
Victor Woeltjen
2015-09-10 10:54:44 -07:00
parent 4c79c9a1b1
commit 78fae345da
4 changed files with 87 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
platform/commonUI/general/bundle.json
View File

@ -58,8 +58,8 @@
], ],
"controllers": [ "controllers": [
{ {
"key": "TimeConductorController", "key": "TimeRangeController",
"implementation": "controllers/TimeConductorController.js", "implementation": "controllers/TimeRangeController.js",
"depends": [ "$scope", "now" ] "depends": [ "$scope", "now" ]
}, },
{ {

2
platform/commonUI/general/res/templates/controls/time-controller.html
View File

@ -22,7 +22,7 @@ properly on the range left and right bounds.
--> -->
<div class="l-time-controller" ng-controller="TimeConductorController"> <div class="l-time-controller" ng-controller="TimeRangeController">
<div class="l-time-range-inputs-holder"> <div class="l-time-range-inputs-holder">
Start: <input type="textfield" Start: <input type="textfield"
placeholder="YYYY-MM-DD HH:mm:ss" placeholder="YYYY-MM-DD HH:mm:ss"

96
platform/commonUI/general/src/controllers/TimeConductorController.js → platform/commonUI/general/src/controllers/TimeRangeController.js
View File

@ -52,8 +52,8 @@ define(
function updateTicks() { function updateTicks() {
var i, p, ts, start, end, span; var i, p, ts, start, end, span;
end = $scope.ngModel.outer[1]; end = $scope.ngModel.outer.end;
start = $scope.ngModel.outer[0]; start = $scope.ngModel.outer.start;
span = end - start; span = end - start;
$scope.ticks = []; $scope.ticks = [];
for (i = 0; i < tickCount; i += 1) { for (i = 0; i < tickCount; i += 1) {
@ -70,29 +70,41 @@ define(
} }
function updateViewForInnerSpanFromModel(ngModel) { function updateViewForInnerSpanFromModel(ngModel) {
var span = ngModel.outer[1] - ngModel.outer[0]; var span = ngModel.outer.end - ngModel.outer.start;
// Expose readable dates for the knobs // Expose readable dates for the knobs
$scope.startInnerText = formatTimestamp(ngModel.inner[0]); $scope.startInnerText = formatTimestamp(ngModel.inner.start);
$scope.endInnerText = formatTimestamp(ngModel.inner[1]); $scope.endInnerText = formatTimestamp(ngModel.inner.end);
// And positions for the knobs // And positions for the knobs
$scope.startInnerPct = $scope.startInnerPct =
toPercent((ngModel.inner[0] - ngModel.outer[0]) / span); toPercent((ngModel.inner.start - ngModel.outer.start) / span);
$scope.endInnerPct = $scope.endInnerPct =
toPercent((ngModel.outer[1] - ngModel.inner[1]) / span); toPercent((ngModel.outer.end - ngModel.inner.end) / span);
}
function defaultBounds() {
var t = now();
return {
start: t - 24 * 3600 * 1000, // One day
end: t
};
}
function copyBounds(bounds) {
return { start: bounds.start, end: bounds.end };
} }
function updateViewFromModel(ngModel) { function updateViewFromModel(ngModel) {
var t = now(); var t = now();
ngModel = ngModel || {}; ngModel = ngModel || {};
ngModel.outer = ngModel.outer || [ t - 24 * 3600 * 1000, t ]; ngModel.outer = ngModel.outer || defaultBounds();
ngModel.inner = ngModel.inner || [ t - 24 * 3600 * 1000, t ]; ngModel.inner = ngModel.inner || copyBounds(ngModel.outer);
// First, dates for the date pickers for outer bounds // First, dates for the date pickers for outer bounds
$scope.startOuterDate = formatTimestamp(ngModel.outer[0]); $scope.startOuterDate = formatTimestamp(ngModel.outer.start);
$scope.endOuterDate = formatTimestamp(ngModel.outer[1]); $scope.endOuterDate = formatTimestamp(ngModel.outer.end);
// Then various updates for the inner span // Then various updates for the inner span
updateViewForInnerSpanFromModel(ngModel); updateViewForInnerSpanFromModel(ngModel);
@ -104,22 +116,22 @@ define(
} }
function startLeftDrag() { function startLeftDrag() {
initialDragValue = $scope.ngModel.inner[0]; initialDragValue = $scope.ngModel.inner.start;
} }
function startRightDrag() { function startRightDrag() {
initialDragValue = $scope.ngModel.inner[1]; initialDragValue = $scope.ngModel.inner.end;
} }
function startMiddleDrag() { function startMiddleDrag() {
initialDragValue = [ initialDragValue = [
$scope.ngModel.inner[0], $scope.ngModel.inner.start,
$scope.ngModel.inner[1] $scope.ngModel.inner.end
]; ];
} }
function toMillis(pixels) { function toMillis(pixels) {
var span = $scope.ngModel.outer[1] - $scope.ngModel.outer[0]; var span = $scope.ngModel.outer.end - $scope.ngModel.outer.start;
return (pixels / $scope.spanWidth) * span; return (pixels / $scope.spanWidth) * span;
} }
@ -129,57 +141,65 @@ define(
function leftDrag(pixels) { function leftDrag(pixels) {
var delta = toMillis(pixels); var delta = toMillis(pixels);
$scope.ngModel.inner[0] = clamp( $scope.ngModel.inner.start = clamp(
initialDragValue + delta, initialDragValue + delta,
$scope.ngModel.outer[0], $scope.ngModel.outer.start,
$scope.ngModel.inner[1] $scope.ngModel.inner.end
); );
updateViewFromModel($scope.ngModel); updateViewFromModel($scope.ngModel);
} }
function rightDrag(pixels) { function rightDrag(pixels) {
var delta = toMillis(pixels); var delta = toMillis(pixels);
$scope.ngModel.inner[1] = clamp( $scope.ngModel.inner.end = clamp(
initialDragValue + delta, initialDragValue + delta,
$scope.ngModel.inner[0], $scope.ngModel.inner.start,
$scope.ngModel.outer[1] $scope.ngModel.outer.end
); );
updateViewFromModel($scope.ngModel); updateViewFromModel($scope.ngModel);
} }
function middleDrag(pixels) { function middleDrag(pixels) {
var delta = toMillis(pixels), var delta = toMillis(pixels),
index = delta < 0 ? 0 : 1, edge = delta < 0 ? 'start' : 'end',
opposite = Math.abs(1 - index); opposite = delta < 0 ? 'end' : 'start';
// Adjust the position of the edge in the direction of drag // Adjust the position of the edge in the direction of drag
$scope.ngModel.inner[index] = clamp( $scope.ngModel.inner[edge] = clamp(
initialDragValue[index] + delta, initialDragValue[edge] + delta,
$scope.ngModel.outer[0], $scope.ngModel.outer.start,
$scope.ngModel.outer[1] $scope.ngModel.outer.end
); );
// Adjust opposite knob to maintain span // Adjust opposite knob to maintain span
$scope.ngModel.inner[opposite] = $scope.ngModel.inner[index] + $scope.ngModel.inner[opposite] = $scope.ngModel.inner[edge] +
initialDragValue[opposite] - initialDragValue[index]; initialDragValue[opposite] - initialDragValue[edge];
updateViewFromModel($scope.ngModel); updateViewFromModel($scope.ngModel);
} }
function updateOuterStart(text) { function updateOuterStart(text) {
var ngModel = $scope.ngModel; var ngModel = $scope.ngModel;
ngModel.outer[0] = parseTimestamp(text, ngModel.outer[0]); ngModel.outer.start =
ngModel.outer[1] = Math.max(ngModel.outer[0], ngModel.outer[1]); parseTimestamp(text, ngModel.outer.start);
ngModel.inner[0] = Math.max(ngModel.outer[0], ngModel.inner[0]); ngModel.outer.end =
ngModel.inner[1] = Math.max(ngModel.outer[0], ngModel.inner[1]); Math.max(ngModel.outer.start, ngModel.outer.end);
ngModel.inner.start =
Math.max(ngModel.outer.start, ngModel.inner.start);
ngModel.inner.end =
Math.max(ngModel.outer.end, ngModel.inner.end);
updateViewForInnerSpanFromModel(ngModel); updateViewForInnerSpanFromModel(ngModel);
} }
function updateOuterEnd(text) { function updateOuterEnd(text) {
var ngModel = $scope.ngModel; var ngModel = $scope.ngModel;
ngModel.outer[1] = parseTimestamp(text, ngModel.outer[1]); ngModel.outer.end =
ngModel.outer[0] = Math.min(ngModel.outer[1], ngModel.outer[0]); parseTimestamp(text, ngModel.outer.end);
ngModel.inner[0] = Math.min(ngModel.outer[1], ngModel.inner[0]); ngModel.outer.start =
ngModel.inner[1] = Math.min(ngModel.outer[1], ngModel.inner[1]); Math.min(ngModel.outer.end, ngModel.outer.start);
ngModel.inner.start =
Math.min(ngModel.outer.end, ngModel.inner.start);
ngModel.inner.end =
Math.min(ngModel.outer.end, ngModel.inner.end);
updateViewForInnerSpanFromModel(ngModel); updateViewForInnerSpanFromModel(ngModel);
} }

45
platform/features/conductor/src/ConductorRepresenter.js
View File

@ -60,37 +60,44 @@ define(
this.$compile = $compile; this.$compile = $compile;
} }
// Combine start/end times into a single object
function bounds(start, end) {
return { start: start, end: end };
}
// Update the time conductor from the scope // Update the time conductor from the scope
function wireScope(conductor, conductorScope, repScope) { function wireScope(conductor, conductorScope, repScope) {
function updateConductorOuter() { function updateConductorOuter() {
conductor.queryStart(conductorScope.conductor.outer[0]); conductor.queryStart(conductorScope.conductor.outer.start);
conductor.queryEnd(conductorScope.conductor.outer[1]); conductor.queryEnd(conductorScope.conductor.outer.end);
repScope.$broadcast('telemetry:query:bounds', { repScope.$broadcast(
start: conductor.queryStart(), 'telemetry:query:bounds',
end: conductor.queryEnd() bounds(conductor.queryStart(), conductor.queryEnd())
}); );
} }
function updateConductorInner() { function updateConductorInner() {
conductor.displayStart(conductorScope.conductor.inner[0]); conductor.displayStart(conductorScope.conductor.inner.start);
conductor.displayEnd(conductorScope.conductor.inner[1]); conductor.displayEnd(conductorScope.conductor.inner.end);
repScope.$broadcast('telemetry:display:bounds', { repScope.$broadcast(
start: conductor.displayStart(), 'telemetry:display:bounds',
end: conductor.displayEnd() bounds(conductor.displayStart(), conductor.displayEnd())
}); );
} }
conductorScope.conductor = { conductorScope.conductor = {
outer: [ conductor.queryStart(), conductor.queryEnd() ], outer: bounds(conductor.queryStart(), conductor.queryEnd()),
inner: [ conductor.displayStart(), conductor.displayEnd() ] inner: bounds(conductor.displayStart(), conductor.displayEnd())
}; };
conductorScope.$watch('conductor.outer[0]', updateConductorOuter); conductorScope
conductorScope.$watch('conductor.outer[1]', updateConductorOuter); .$watch('conductor.outer.start', updateConductorOuter);
conductorScope.$watch('conductor.inner[0]', updateConductorInner); conductorScope
conductorScope.$watch('conductor.inner[1]', updateConductorInner); .$watch('conductor.outer.end', updateConductorOuter);
conductorScope
.$watch('conductor.inner.start', updateConductorInner);
conductorScope
.$watch('conductor.inner.end', updateConductorInner);
repScope.$on('telemetry:view', updateConductorInner); repScope.$on('telemetry:view', updateConductorInner);
} }