ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-03-10 22:43:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Timeline] Add zoom-to-fit button

Browse Source
This commit is contained in:
Victor Woeltjen 2016-05-23 16:06:10 -07:00
parent 0818a7cda0
commit 9a5209f7c2
2 changed files with 46 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
platform/features/timeline/res/templates/timeline.html
View File

@ -103,6 +103,13 @@
<!-- TOP PANE GANTT BARS -->
<div class="split-pane-component l-timeline-pane t-pane-h l-pane-top t-timeline-gantt l-timeline-gantt s-timeline-gantt">
<div class="l-hover-btns-holder s-hover-btns-holder t-btns-zoom">
<a class="t-btn l-btn s-btn"
ng-click="zoomController.fit()"
ng-show="true"
title="Zoom to fit">
<span class="ui-symbol icon zoom-in">I</span>
</a>
<a class="t-btn l-btn s-btn"
ng-click="zoomController.zoom(-1, scroll)"
ng-show="true"

46
platform/features/timeline/src/controllers/TimelineZoomController.js
View File

@ -32,6 +32,7 @@ define(
var zoomLevels = ZOOM_CONFIGURATION.levels || [1000],
zoomIndex = Math.floor(zoomLevels.length / 2),
tickWidth = ZOOM_CONFIGURATION.width || 200,
bounds = { x: 0, width: tickWidth },
duration = 86400000; // Default duration in view
// Round a duration to a larger value, to ensure space for editing
@ -42,6 +43,14 @@ define(
return Math.ceil(value / sz) * sz;
}
function toMillis(pixels) {
return (pixels / tickWidth) * zoomLevels[zoomIndex];
}
function toPixels(millis) {
return tickWidth * millis / zoomLevels[zoomIndex];
}
// Get/set zoom level
function setZoomLevel(level) {
if (!isNaN(level)) {
@ -66,6 +75,27 @@ define(
}
}
function initializeZoomFromTimespan(timespan) {
var duration = timespan.getDuration();
zoomIndex = 0;
while (toMillis(bounds.width) < duration &&
zoomIndex < zoomLevels.length) {
zoomIndex += 1;
}
bounds.x = toPixels(timespan.getStart());
}
function initializeZoom(domainObject) {
if (domainObject) {
domainObject.useCapability('timespan')
.then(initializeZoomFromTimespan);
}
}
$scope.$watch("scroll", function (scroll) {
bounds = scroll;
});
$scope.$watch("domainObject", initializeZoom);
$scope.$watch("configuration.zoomLevel", setZoomLevel);
return {
@ -80,7 +110,7 @@ define(
* @returns {number} current zoom level (as the size of a
* major tick mark, in pixels)
*/
zoom: function (amount, bounds) {
zoom: function (amount) {
// Update the zoom level if called with an argument
if (arguments.length > 0 && !isNaN(amount)) {
var center = this.toMillis(bounds.x + bounds.width / 2);
@ -90,22 +120,24 @@ define(
}
return zoomLevels[zoomIndex];
},
fit: function () {
if ($scope.domainObject) {
initializeZoom($scope.domainObject);
storeZoom();
}
},
/**
* Get the width, in pixels, of a specific time duration at
* the current zoom level.
* @returns {number} the number of pixels
*/
toPixels: function (millis) {
return tickWidth * millis / zoomLevels[zoomIndex];
},
toPixels: toPixels,
/**
* Get the time duration, in milliseconds, occupied by the
* width (specified in pixels) at the current zoom level.
* @returns {number} the number of pixels
*/
toMillis: function (pixels) {
return (pixels / tickWidth) * zoomLevels[zoomIndex];
},
toMillis: toMillis,
/**
* Get or set the current displayed duration. If used as a
* setter, this will typically be rounded up to ensure extra