ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-20 21:53:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Time Conductor] Added pan to Time Conductor

Browse Source
This commit is contained in:
Henry 2016-09-12 16:53:48 -07:00
parent d77922d66c
commit 7fcafb6b58
6 changed files with 285 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
platform/features/conductor-v2/conductor/bundle.js
View File

@ -24,16 +24,18 @@ define([
"./src/ui/TimeConductorViewService",
"./src/ui/TimeConductorController",
"./src/TimeConductor",
"./src/ui/ConductorAxisController",
"./src/ui/MctConductorAxis",
"./src/ui/NumberFormat",
"text!./res/templates/time-conductor.html",
"text!./res/templates/mode-selector/mode-selector.html",
"text!./res/templates/mode-selector/mode-menu.html",
'legacyRegistry'
"legacyRegistry"
], function (
TimeConductorViewService,
TimeConductorController,
TimeConductor,
ConductorAxisController,
MCTConductorAxis,
NumberFormat,
timeConductorTemplate,
@ -69,6 +71,14 @@ define([
"timeConductorViewService",
"timeSystems[]"
]
},
{
"key": "ConductorAxisController",
"implementation": ConductorAxisController,
"depends": [
"timeConductor",
"formatService"
]
}
],
"directives": [

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

@ -136,6 +136,7 @@
bottom: 0;
left: 0;
z-index: 1;
pointer-events: none;
.l-time-range-w {
// Wraps a datetime text input field
height: 100%;
@ -159,6 +160,9 @@
content: 'End';
}
}
.l-time-conductor-inputs {
pointer-events: auto;
}
input[type="text"] {
@include trans-prop-nice(padding, 250ms);
}

18
platform/features/conductor-v2/conductor/res/templates/time-conductor.html
View File

@ -1,6 +1,18 @@
<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
<style>
.fixed-mode .l-axis-holder {
cursor: grab;
cursor: -webkit-grab;
}
.fixed-mode .l-axis-holder:active {
cursor: grabbing;
cursor: -webkit-grabbing;
}
</style>
<div ng-controller="TimeConductorController as tcController"
class="holder grows flex-elem l-flex-row l-time-conductor {{modeModel.selectedKey}}-mode {{timeSystemModel.selected.metadata.key}}-time-system">
class="holder grows flex-elem l-flex-row l-time-conductor {{modeModel.selectedKey}}-mode {{timeSystemModel.selected.metadata.key}}-time-system"
ng-class="{'status-panning': panning}">
<div class="flex-elem holder time-conductor-icon">
<div class="hand-little"></div>
@ -13,6 +25,7 @@
<form class="l-time-conductor-inputs-holder"
ng-submit="tcController.updateBoundsFromForm(boundsModel)">
<span class="l-time-range-w start-w">
<span class="l-time-conductor-inputs">
<span class="l-time-range-input-w start-date">
<span class="title"></span>
<mct-control key="'datetime-field'"
@ -41,7 +54,9 @@
</mct-control>
</span>
</span>
</span>
<span class="l-time-range-w end-w">
<span class="l-time-conductor-inputs">
<span class="l-time-range-input-w end-date"
ng-controller="ToggleController as t2">
<span class="title"></span>
@ -72,6 +87,7 @@
</mct-control>
</span>
</span>
</span>
<input type="submit" class="hidden">
</form>

169
platform/features/conductor-v2/conductor/src/ui/ConductorAxisController.js Normal file
View File

@ -0,0 +1,169 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT Web includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
define(
[
"d3"
],
function (d3) {
var PADDING = 1;
/**
* The mct-conductor-axis renders a horizontal axis with regular
* labelled 'ticks'. It requires 'start' and 'end' integer values to
* be specified as attributes.
*/
function ConductorAxisController(conductor, formatService) {
// Dependencies
this.d3 = d3;
this.formatService = formatService;
this.conductor = conductor;
// Runtime properties (set by 'link' function)
this.target = undefined;
this.xScale = undefined;
this.xAxis = undefined;
this.axisElement = undefined;
this.initialized = false;
this.msPerPixel = undefined;
this.setScale = this.setScale.bind(this);
this.changeBounds = this.changeBounds.bind(this);
this.changeTimeSystem = this.changeTimeSystem.bind(this);
this.bounds = conductor.bounds();
this.timeSystem = conductor.timeSystem();
}
ConductorAxisController.prototype.changeBounds = function (bounds) {
this.bounds = bounds;
if (this.initialized) {
this.setScale();
}
};
ConductorAxisController.prototype.setScale = function () {
var width = this.target.offsetWidth;
var timeSystem = this.conductor.timeSystem();
var bounds = this.bounds;
if (timeSystem.isUTCBased()) {
this.xScale = this.xScale || this.d3.scaleUtc();
this.xScale.domain([new Date(bounds.start), new Date(bounds.end)]);
} else {
this.xScale = this.xScale || this.d3.scaleLinear();
this.xScale.domain([bounds.start, bounds.end]);
}
this.xScale.range([PADDING, width - PADDING * 2]);
this.axisElement.call(this.xAxis);
this.msPerPixel = (bounds.end - bounds.start) / width;
};
ConductorAxisController.prototype.changeTimeSystem = function (timeSystem) {
this.timeSystem = timeSystem;
var key = timeSystem.formats()[0];
if (this.initialized && key !== undefined) {
var format = this.formatService.getFormat(key);
var bounds = this.conductor.bounds();
if (timeSystem.isUTCBased()) {
this.xScale = this.d3.scaleUtc();
} else {
this.xScale = this.d3.scaleLinear();
}
this.xAxis.scale(this.xScale);
//Define a custom format function
this.xAxis.tickFormat(function (tickValue) {
// Normalize date representations to numbers
if (tickValue instanceof Date) {
tickValue = tickValue.getTime();
}
return format.format(tickValue, {
min: bounds.start,
max: bounds.end
});
});
this.axisElement.call(this.xAxis);
}
};
ConductorAxisController.prototype.link = function (scope, element) {
this.target = element[0].firstChild;
this.scope = scope;
var height = this.target.offsetHeight;
var vis = this.d3.select(this.target)
.append("svg:svg")
.attr("width", "100%")
.attr("height", height);
this.xAxis = this.d3.axisTop();
// draw x axis with labels and move to the bottom of the chart area
this.axisElement = vis.append("g")
.attr("transform", "translate(0," + (height - PADDING) + ")");
this.initialized = true;
if (this.timeSystem !== undefined) {
this.changeTimeSystem(this.timeSystem);
this.setScale(this.bounds);
}
//Respond to changes in conductor
this.conductor.on("timeSystem", this.changeTimeSystem);
this.conductor.on("bounds", this.changeBounds);
};
ConductorAxisController.prototype.panEnd = function () {
//resync view bounds with time conductor bounds
this.conductor.bounds(this.bounds);
this.scope.$emit("pan-stop");
};
ConductorAxisController.prototype.pan = function (delta) {
if (!this.conductor.follow()) {
var deltaInMs = delta[0] * this.msPerPixel;
var bounds = this.conductor.bounds();
var start = Math.floor((bounds.start - deltaInMs) / 1000) * 1000;
var end = Math.floor((bounds.end - deltaInMs) / 1000) * 1000;
this.bounds = {
start: start,
end: end
};
this.setScale();
this.scope.$emit("pan", this.bounds);
}
};
ConductorAxisController.prototype.resize = function () {
if (this.initialized) {
this.setScale();
}
};
return ConductorAxisController;
}
);

128
platform/features/conductor-v2/conductor/src/ui/MctConductorAxis.js
View File

@ -20,127 +20,33 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
define(
[
"d3"
],
function (d3) {
var PADDING = 1;
define([], function () {
function MctConductorAxis() {
/**
* The mct-conductor-axis renders a horizontal axis with regular
* labelled 'ticks'. It requires 'start' and 'end' integer values to
* be specified as attributes.
*/
function MCTConductorAxis(conductor, formatService) {
// Dependencies
this.d3 = d3;
this.conductor = conductor;
this.formatService = formatService;
// Runtime properties (set by 'link' function)
this.target = undefined;
this.xScale = undefined;
this.xAxis = undefined;
this.axisElement = undefined;
return {
controller: 'ConductorAxisController',
controllerAs: 'axis',
link: function(scope, element, attrs, controller){
controller.link(scope, element);
},
// Angular Directive interface
this.link = this.link.bind(this);
this.restrict = "E";
this.template =
"<div class=\"l-axis-holder\" mct-resize=\"resize()\"></div>";
this.priority = 1000;
restrict: 'E',
priority: 1000,
//Bind all class functions to 'this'
Object.keys(MCTConductorAxis.prototype).filter(function (key) {
return typeof MCTConductorAxis.prototype[key] === 'function';
}).forEach(function (key) {
this[key] = this[key].bind(this);
}.bind(this));
template: '<div class="l-axis-holder" ' +
' mct-drag-down="axis.panStart()"' +
' mct-drag-up="axis.panEnd(delta)"' +
' mct-drag="axis.pan(delta)"' +
' mct-resize="axis.resize()"></div>'
}
}
MCTConductorAxis.prototype.setScale = function () {
var width = this.target.offsetWidth;
var timeSystem = this.conductor.timeSystem();
var bounds = this.conductor.bounds();
if (timeSystem.isUTCBased()) {
this.xScale = this.xScale || this.d3.scaleUtc();
this.xScale.domain([new Date(bounds.start), new Date(bounds.end)]);
} else {
this.xScale = this.xScale || this.d3.scaleLinear();
this.xScale.domain([bounds.start, bounds.end]);
}
this.xScale.range([PADDING, width - PADDING * 2]);
this.axisElement.call(this.xAxis);
};
MCTConductorAxis.prototype.changeTimeSystem = function (timeSystem) {
var key = timeSystem.formats()[0];
if (key !== undefined) {
var format = this.formatService.getFormat(key);
var bounds = this.conductor.bounds();
if (timeSystem.isUTCBased()) {
this.xScale = this.d3.scaleUtc();
} else {
this.xScale = this.d3.scaleLinear();
}
this.xAxis.scale(this.xScale);
//Define a custom format function
this.xAxis.tickFormat(function (tickValue) {
// Normalize date representations to numbers
if (tickValue instanceof Date) {
tickValue = tickValue.getTime();
}
return format.format(tickValue, {
min: bounds.start,
max: bounds.end
});
});
this.axisElement.call(this.xAxis);
}
};
MCTConductorAxis.prototype.destroy = function () {
this.conductor.off('timeSystem', this.changeTimeSystem);
this.conductor.off('bounds', this.setScale);
};
MCTConductorAxis.prototype.link = function (scope, element) {
var conductor = this.conductor;
this.target = element[0].firstChild;
var height = this.target.offsetHeight;
var vis = this.d3.select(this.target)
.append('svg:svg')
.attr('width', '100%')
.attr('height', height);
this.xAxis = this.d3.axisTop();
// draw x axis with labels and move to the bottom of the chart area
this.axisElement = vis.append("g")
.attr("transform", "translate(0," + (height - PADDING) + ")");
scope.resize = this.setScale;
conductor.on('timeSystem', this.changeTimeSystem);
//On conductor bounds changes, redraw ticks
conductor.on('bounds', this.setScale);
scope.$on("$destroy", this.destroy);
if (conductor.timeSystem() !== undefined) {
this.changeTimeSystem(conductor.timeSystem());
this.setScale();
}
};
return function (conductor, formatService) {
return new MCTConductorAxis(conductor, formatService);
};
return MctConductorAxis;
}
);

8
platform/features/conductor-v2/conductor/src/ui/TimeConductorController.js
View File

@ -97,6 +97,14 @@ define(
// Watch scope for selection of mode or time system by user
this.$scope.$watch('modeModel.selectedKey', this.setMode);
this.$scope.$on('pan', function (e, bounds) {
this.$scope.panning = true;
this.setFormFromBounds(bounds);
}.bind(this));
this.$scope.$on('pan-stop', function () {
this.$scope.panning = false;
}.bind(this));
this.$scope.$on('$destroy', this.destroy);
};