Fix middle click drag, and ruler jitter

Author: JacksonRG

src/timeline/js/directives/ruler.js

@@ -80,10 +80,11 @@ App.directive("tlScrollableTracks", function () {
         if (is_scrolling) {
           // Calculate difference from last position
           var difference = {x: starting_mouse_position.x - e.pageX, y: starting_mouse_position.y - e.pageY};
+          var newPos = { x: starting_scrollbar.x + difference.x, y: starting_scrollbar.y + difference.y};
 
           // Scroll the tracks div
-          element.scrollLeft(starting_scrollbar.x + difference.x);
-          element.scrollTop(starting_scrollbar.y + difference.y);
+          element.scrollLeft(newPos.x);
+          element.scrollTop(newPos.y);
         }
       });
 
@@ -119,7 +120,7 @@ App.directive("tlBody", function () {
         if (e.which === 2) { // middle button
           e.preventDefault();
           is_scrolling = true;
-          starting_scrollbar = {x: element.scrollLeft(), y: element.scrollTop()};
+          starting_scrollbar = {x: $('#scrolling_tracks').scrollLeft(), y: $('#scrolling_tracks').scrollTop()};
           starting_mouse_position = {x: e.pageX, y: e.pageY};
           element.addClass("drag_cursor");
         }
@@ -198,24 +199,30 @@ App.directive("tlRuler", function ($timeout) {
 
         startPos = scope.scrollLeft;
         endPos = scope.scrollLeft + $("body").width();
-
+        fpt = framesPerTick(scope.pixelsPerSecond, scope.project.fps.num ,scope.project.fps.den);
         fps = scope.project.fps.num / scope.project.fps.den;
         time = [ startPos / scope.pixelsPerSecond, endPos / scope.pixelsPerSecond];
-        time[0] -= time[0]%2;
+
+        if (fpt > fps) {
+          // Make sure seconds don't change when scrolling right and left
+          time[0] -= time[0]%(fpt/Math.round(fps));
+        }
+        else {
+          time[0] -= time[0]%2;
+        }
         time[1] -= time[1]%1 - 1;
 
         startFrame = time[0] * Math.round(fps);
         endFrame = time[1] * Math.round(fps);
 
-        fpt = framesPerTick(scope.pixelsPerSecond, scope.project.fps.num ,scope.project.fps.den);
         frame = startFrame;
         while ( frame <= endFrame){
           t = frame / fps;
           pos = t * scope.pixelsPerSecond;
           tickSpan = $('<span style="left:'+pos+'px;"></span>');
           tickSpan.addClass("tick_mark");
 
-          if ((frame - startFrame) % (fpt * 2) == 0) {
+          if ((frame) % (fpt * 2) == 0) {
             // Alternating long marks with times marked
             timeSpan = $('<span style="left:'+pos+'px;"></span>');
             timeSpan.addClass("ruler_time");