Merge pull request #982 from nasa/timeline-scroll-981

[Timeline] Use reasonable width for scroll area

platform/features/timeline/res/templates/timeline.html

@@ -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>

platform/features/timeline/src/controllers/TimelineController.js

@@ -79,15 +79,6 @@ define(
                 graphPopulator.populate(swimlanePopulator.get());
             }
 
-            // Get pixel width for right pane, using zoom controller
-            function width(zoomController) {
-                var start = swimlanePopulator.start(),
-                    end = swimlanePopulator.end();
-                return zoomController.toPixels(zoomController.duration(
-                    Math.max(end - start, MINIMUM_DURATION)
-                ));
-            }
-
             // Refresh resource graphs
             function refresh() {
                 if (graphPopulator) {
@@ -121,10 +112,10 @@ define(
             // Expose active set of swimlanes
             return {
                 /**
-                 * Get the width, in pixels, of the timeline area
+                 * Get the end of the displayed timeline, in milliseconds.
-                 * @returns {number} width, in pixels
+                 * @returns {number} the end of the displayed timeline
                  */
-                width: width,
+                end: swimlanePopulator.end.bind(swimlanePopulator),
                 /**
                  * Get the swimlanes which should currently be displayed.
                  * @returns {TimelineSwimlane[]} the swimlanes

platform/features/timeline/src/controllers/TimelineZoomController.js

@@ -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 },
+                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) {
                 return (pixels / tickWidth) * zoomLevels[zoomIndex];
@@ -124,16 +115,14 @@ define(
                  */
                 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;
                 }
             };
         }

platform/features/timeline/test/controllers/TimelineControllerSpec.js

@@ -214,23 +214,6 @@ define(
 
             });
 
-            it("reports full scrollable width using zoom controller", function () {
-                var mockZoom = jasmine.createSpyObj('zoom', ['toPixels', 'duration']);
-                mockZoom.toPixels.andReturn(54321);
-                mockZoom.duration.andReturn(12345);
-
-                // Initially populate
-                fireWatch('domainObject', mockDomainObject);
-
-                expect(controller.width(mockZoom)).toEqual(54321);
-                // Verify interactions; we took zoom's duration for our start/end,
-                // and converted it to pixels.
-                // First, check that we used the start/end (from above)
-                expect(mockZoom.duration).toHaveBeenCalledWith(12321 - 42);
-                // Next, verify that the result was passed to toPixels
-                expect(mockZoom.toPixels).toHaveBeenCalledWith(12345);
-            });
-
             it("provides drag handles", function () {
                 // TimelineDragPopulator et al are tested for these,
                 // so just verify that handles are indeed exposed.

platform/features/timeline/test/controllers/TimelineZoomControllerSpec.js

@@ -47,12 +47,6 @@ define(
                 expect(controller.zoom()).toEqual(2000);
             });
 
-            it("allows duration to be changed", function () {
-                var initial = controller.duration();
-                controller.duration(initial * 3.33);
-                expect(controller.duration() > initial).toBeTruthy();
-            });
-
             it("handles time-to-pixel conversions", function () {
                 var zoomLevel = controller.zoom();
                 expect(controller.toPixels(zoomLevel)).toEqual(12321);
@@ -125,6 +119,27 @@ define(
                     expect(Math.round(controller.toMillis(x2)))
                         .toBeGreaterThan(testEnd);
                 });
+
+                it("provides a width which is not less than scroll area width", function () {
+                    var testPixel = mockScope.scroll.width / 4,
+                        testMillis = controller.toMillis(testPixel);
+                    expect(controller.width(testMillis))
+                        .toEqual(mockScope.scroll.width);
+                });
+
+                it("provides a width with some margin past timestamp", function () {
+                    var testPixel = mockScope.scroll.width * 4,
+                        testMillis = controller.toMillis(testPixel);
+                    expect(controller.width(testMillis))
+                        .toBeGreaterThan(controller.toPixels(testMillis));
+                });
+
+                it("provides a width which does not greatly exceed timestamp", function () {
+                    var testPixel = mockScope.scroll.width * 4,
+                        testMillis = controller.toMillis(testPixel);
+                    expect(controller.width(testMillis))
+                        .toBeLessThan(controller.toPixels(testMillis * 2));
+                });
             });
 
         });