ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-19 07:38:15 +00:00
Code Issues Actions 5 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
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"> <div style="overflow: hidden; position: absolute; left: 0; top: 0; right: 0; height: 30px;" mct-scroll-x="scroll.x">
<mct-include key="'timeline-ticks'" <mct-include key="'timeline-ticks'"
parameters="{ parameters="{
fullWidth: timelineController.width(zoomController), fullWidth: zoomController.width(timelineController.end()),
start: scroll.x, start: scroll.x,
width: scroll.width, width: scroll.width,
step: zoomController.toPixels(zoomController.zoom()), step: zoomController.toPixels(zoomController.zoom()),
@ -141,7 +141,7 @@
mct-scroll-x="scroll.x" mct-scroll-x="scroll.x"
mct-scroll-y="scroll.y"> mct-scroll-y="scroll.y">
<div class="l-width-control" <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" <div class="t-swimlane s-swimlane l-swimlane"
ng-repeat="swimlane in timelineController.swimlanes()" ng-repeat="swimlane in timelineController.swimlanes()"
ng-class="{ ng-class="{
@ -197,7 +197,7 @@
<div mct-scroll-x="scroll.x" <div mct-scroll-x="scroll.x"
class="t-pane-r-scroll-h-control l-scroll-control s-scroll-control"> class="t-pane-r-scroll-h-control l-scroll-control s-scroll-control">
<div class="l-width-control" <div class="l-width-control"
ng-style="{ width: timelineController.width(zoomController) + 'px' }"> ng-style="{ width: zoomController.width(timelineController.end()) + 'px' }">
</div> </div>
</div> </div>
</div> </div>

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

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