Skip to content

Commit

Permalink
[Time Conductor] Added pan to Time Conductor
Browse files Browse the repository at this point in the history
  • Loading branch information
akhenry committed Sep 15, 2016
1 parent a1331b7 commit 92a80c3
Show file tree
Hide file tree
Showing 6 changed files with 289 additions and 164 deletions.
12 changes: 11 additions & 1 deletion platform/features/conductor-v2/conductor/bundle.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -69,6 +71,14 @@ define([
"timeConductorViewService",
"timeSystems[]"
]
},
{
"key": "ConductorAxisController",
"implementation": ConductorAxisController,
"depends": [
"timeConductor",
"formatService"
]
}
],
"directives": [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand All @@ -159,6 +160,9 @@
content: 'End';
}
}
.l-time-conductor-inputs {
pointer-events: auto;
}
input[type="text"] {
@include trans-prop-nice(padding, 250ms);
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -13,63 +25,67 @@
<form class="l-time-conductor-inputs-holder"
ng-submit="tcController.updateBoundsFromForm(boundsModel)">
<span class="l-time-range-w start-w">
<span class="l-time-range-input-w start-date">
<span class="title"></span>
<mct-control key="'datetime-field'"
structure="{
format: timeSystemModel.format,
validate: tcController.validation.validateStart
}"
ng-model="boundsModel"
ng-blur="tcController.updateBoundsFromForm(boundsModel)"
field="'start'"
class="time-range-input">
</mct-control>
</span>
<span class="l-time-range-input-w time-delta start-delta"
ng-class="{'hide':(modeModel.selectedKey === 'fixed')}">
-
<mct-control key="'datetime-field'"
structure="{
format: timeSystemModel.deltaFormat,
validate: tcController.validation.validateStartDelta
}"
ng-model="boundsModel"
ng-blur="tcController.updateDeltasFromForm(boundsModel)"
field="'startDelta'"
class="hrs-min-input">
</mct-control>
<span class="l-time-conductor-inputs">
<span class="l-time-range-input-w start-date">
<span class="title"></span>
<mct-control key="'datetime-field'"
structure="{
format: timeSystemModel.format,
validate: tcController.validation.validateStart
}"
ng-model="boundsModel"
ng-blur="tcController.updateBoundsFromForm(boundsModel)"
field="'start'"
class="time-range-input">
</mct-control>
</span>
<span class="l-time-range-input-w time-delta start-delta"
ng-class="{'hide':(modeModel.selectedKey === 'fixed')}">
-
<mct-control key="'datetime-field'"
structure="{
format: timeSystemModel.deltaFormat,
validate: tcController.validation.validateStartDelta
}"
ng-model="boundsModel"
ng-blur="tcController.updateDeltasFromForm(boundsModel)"
field="'startDelta'"
class="hrs-min-input">
</mct-control>
</span>
</span>
</span>
<span class="l-time-range-w end-w">
<span class="l-time-range-input-w end-date"
ng-controller="ToggleController as t2">
<span class="title"></span>
<mct-control key="'datetime-field'"
structure="{
format: timeSystemModel.format,
validate: tcController.validation.validateEnd
}"
ng-model="boundsModel"
ng-blur="tcController.updateBoundsFromForm(boundsModel)"
ng-disabled="modeModel.selectedKey !== 'fixed'"
field="'end'"
class="time-range-input">
</mct-control>
</span>
<span class="l-time-range-input-w time-delta end-delta"
ng-class="{'hide':(modeModel.selectedKey === 'fixed')}">
+
<mct-control key="'datetime-field'"
structure="{
format: timeSystemModel.deltaFormat,
validate: tcController.validation.validateEndDelta
}"
ng-model="boundsModel"
ng-blur="tcController.updateDeltasFromForm(boundsModel)"
field="'endDelta'"
class="hrs-min-input">
</mct-control>
<span class="l-time-conductor-inputs">
<span class="l-time-range-input-w end-date"
ng-controller="ToggleController as t2">
<span class="title"></span>
<mct-control key="'datetime-field'"
structure="{
format: timeSystemModel.format,
validate: tcController.validation.validateEnd
}"
ng-model="boundsModel"
ng-blur="tcController.updateBoundsFromForm(boundsModel)"
ng-disabled="modeModel.selectedKey !== 'fixed'"
field="'end'"
class="time-range-input">
</mct-control>
</span>
<span class="l-time-range-input-w time-delta end-delta"
ng-class="{'hide':(modeModel.selectedKey === 'fixed')}">
+
<mct-control key="'datetime-field'"
structure="{
format: timeSystemModel.deltaFormat,
validate: tcController.validation.validateEndDelta
}"
ng-model="boundsModel"
ng-blur="tcController.updateDeltasFromForm(boundsModel)"
field="'endDelta'"
class="hrs-min-input">
</mct-control>
</span>
</span>
</span>

Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
);
Loading

0 comments on commit 92a80c3

Please sign in to comment.