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

[Timeline] Expose width from ZoomController

Browse Source 
...and ensure that the width exposed is not excessively
large; fixes #981
This commit is contained in:
Victor Woeltjen 2016-05-31 16:12:49 -07:00
parent 35d7d9b380
commit 787f3815df
2 changed files with 12 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -128,7 +128,7 @@
<div style="overflow: hidden; position: absolute; left: 0; top: 0; right: 0; height: 30px;" mct-scroll-x="scroll.x">
<mct-include key="'timeline-ticks'"
parameters="{
fullWidth: timelineController.width(zoomController),
fullWidth: zoomController.width(timelineController.end()),
start: scroll.x,
width: scroll.width,
step: zoomController.toPixels(zoomController.zoom()),
@ -141,7 +141,7 @@
mct-scroll-x="scroll.x"
mct-scroll-y="scroll.y">
<div class="l-width-control"
ng-style="{ width: timelineController.width(zoomController) + 'px' }">
ng-style="{ width: zoomController.width(timelineController.end()) + 'px' }">
<div class="t-swimlane s-swimlane l-swimlane"
ng-repeat="swimlane in timelineController.swimlanes()"
ng-class="{
@ -197,7 +197,7 @@
<div mct-scroll-x="scroll.x"
class="t-pane-r-scroll-h-control l-scroll-control s-scroll-control">
<div class="l-width-control"
ng-style="{ width: timelineController.width(zoomController) + 'px' }">
ng-style="{ width: zoomController.width(timelineController.end()) + 'px' }">
</div>
</div>
</div>

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

@ -22,6 +22,7 @@
define(
[],
function () {
var PADDING = 0.25;
/**
* Controls the pan-zoom state of a timeline view.
@ -32,17 +33,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
function roundDuration(value) {
// Ensure there's always an extra day or so
var tickCount = bounds.width / tickWidth,
sz = zoomLevels[zoomLevels.length - 1] * tickCount;
value *= 1.25; // Add 25% padding to start
return Math.ceil(value / sz) * sz;
}
bounds = { x: 0, width: tickWidth }; // Default duration in view
function toMillis(pixels) {
return (pixels / tickWidth) * zoomLevels[zoomIndex];
@ -124,16 +115,14 @@ define(
*/
toMillis: toMillis,
/**
* Get or set the current displayed duration. If used as a
* setter, this will typically be rounded up to ensure extra
* space is available at the right.
* @returns {number} duration, in milliseconds
* Get the pixel width necessary to fit the specified
* timestamp, expressed as an offset in milliseconds from
* the start of the timeline.
* @param {number} timestamp the time to display
*/
duration: function (value) {
if (arguments.length > 0) {
duration = roundDuration(value);
}
return duration;
width: function (timestamp) {
var pixels = Math.ceil(toPixels(timestamp * (1 + PADDING)));
return Math.max(bounds.width, pixels)
}
};
}