Fixed playhead and ruler dragging to be global (i.e. you can drag outside the timeline without interrupting the drag operation).

Author: jonoomph

src/timeline/js/directives/playhead.js

@@ -37,26 +37,24 @@ App.directive("tlPlayhead", function () {
     link: function (scope, element, attrs) {
       // get the default top position so we can lock it in place vertically
       playhead_y_max = element.position().top;
+      var isDragging = false;
 
       element.on("mousedown", function (e) {
         // Set bounding box for the playhead
         setBoundingBox(scope, $("#playhead"), "playhead");
-        if (scope.Qt) {
-            // Disable caching thread during scrubbing
-            timeline.DisableCacheThread();
-        }
-      });
 
-      element.on("contextmenu", function (e) {
+        // Start dragging
+        isDragging = true;
+
         if (scope.Qt) {
-            // Enable caching thread after scrubbing
-            timeline.EnableCacheThread();
+          // Disable caching thread during scrubbing
+          timeline.DisableCacheThread();
         }
       });
 
-      // Move playhead to new position (if it's not currently being animated)
-      element.on("mousemove", function (e) {
-        if (e.which === 1 && !scope.playhead_animating && !scope.getDragging()) { // left button
+      // Global mousemove listener
+      $(document).on("mousemove", function (e) {
+        if (isDragging && e.which === 1 && !scope.playhead_animating && !scope.getDragging()) { // left button is held
           // Calculate the playhead bounding box movement and apply snapping rules
           let cursor_position = e.pageX - $("#ruler").offset().left;
           let results = moveBoundingBox(scope, bounding_box.left, bounding_box.top,
@@ -71,11 +69,23 @@ App.directive("tlPlayhead", function () {
 
           // Move playhead
           let playhead_seconds = snapToFPSGridTime(scope, pixelToTime(scope, new_position));
+          playhead_seconds = Math.min(Math.max(0.0, playhead_seconds), scope.project.duration);
           scope.movePlayhead(playhead_seconds);
           scope.previewFrame(playhead_seconds);
         }
       });
 
+      // Global mouseup listener to stop dragging
+      $(document).on("mouseup", function (e) {
+        if (isDragging) {
+          isDragging = false;
+
+          if (scope.Qt) {
+            // Enable caching thread after scrubbing
+            timeline.EnableCacheThread();
+          }
+        }
+      });
     }
   };
 });

src/timeline/js/directives/ruler.js

@@ -27,7 +27,7 @@
  */
 
 
-/*global setSelections, setBoundingBox, moveBoundingBox, bounding_box */
+/*global App, timeline, secondsToTime, setSelections, setBoundingBox, moveBoundingBox, bounding_box */
 // Variables for panning by middle click
 var is_scrolling = false;
 var starting_scrollbar = {x: 0, y: 0};
@@ -39,7 +39,6 @@ var scroll_left_pixels = 0;
 
 // This container allows for tracks to be scrolled (with synced ruler)
 // and allows for panning of the timeline with the middle mouse button
-/*global App, timeline, secondsToTime*/
 App.directive("tlScrollableTracks", function () {
   return {
     restrict: "A",
@@ -154,11 +153,24 @@ App.directive("tlRuler", function ($timeout) {
   return {
     restrict: "A",
     link: function (scope, element, attrs) {
-      //on click of the ruler canvas, jump playhead to the clicked spot
+      var isDragging = false;
+
+      // Start dragging when mousedown on the ruler
       element.on("mousedown", function (e) {
+        // Set bounding box for the playhead position
+        setBoundingBox(scope, $("#playhead"), "playhead");
+        isDragging = true;
+
+        if (scope.Qt) {
+            // Disable caching thread during scrubbing
+            timeline.DisableCacheThread();
+        }
+
         // Get playhead position
         var playhead_left = e.pageX - element.offset().left;
         var playhead_seconds = snapToFPSGridTime(scope, pixelToTime(scope, playhead_left));
+        playhead_seconds = Math.min(Math.max(0.0, playhead_seconds), scope.project.duration);
+        var playhead_snapped_target = playhead_seconds * scope.pixelsPerSecond;
 
         // Immediately preview frame (don't wait for animated playhead)
         scope.previewFrame(playhead_seconds);
@@ -170,8 +182,8 @@ App.directive("tlRuler", function ($timeout) {
 
         // Animate to new position (and then update scope)
         scope.playhead_animating = true;
-        $(".playhead-line").animate({left: playhead_left}, 200);
-        $(".playhead-top").animate({left: playhead_left}, 200, function () {
+        $(".playhead-line").animate({left: playhead_snapped_target}, 150);
+        $(".playhead-top").animate({left: playhead_snapped_target}, 150, function () {
           // Update playhead
           scope.movePlayhead(playhead_seconds);
 
@@ -182,30 +194,14 @@ App.directive("tlRuler", function ($timeout) {
         });
       });
 
-      element.on("mousedown", function (e) {
-        // Set bounding box for the playhead position
-        setBoundingBox(scope, $("#playhead"), "playhead");
-        if (scope.Qt) {
-            // Disable caching thread during scrubbing
-            timeline.DisableCacheThread();
-        }
-      });
-
-      element.on("contextmenu", function (e) {
-        if (scope.Qt) {
-            // Enable caching thread after scrubbing
-            timeline.EnableCacheThread();
-        }
-      });
-
-      // Move playhead to new position (if it's not currently being animated)
-      element.on("mousemove", function (e) {
-        if (e.which === 1 && !scope.playhead_animating && !scope.getDragging()) { // left button
+      // Global mousemove listener
+      $(document).on("mousemove", function (e) {
+        if (isDragging && e.which === 1 && !scope.playhead_animating && !scope.getDragging()) { // left button is held
           // Calculate the playhead bounding box movement
           let cursor_position = e.pageX - $("#ruler").offset().left;
           let new_position = cursor_position;
           if (e.shiftKey) {
-            // Only apply playhead shapping when SHIFT is pressed
+            // Only apply playhead snapping when SHIFT is pressed
             let results = moveBoundingBox(scope, bounding_box.left, bounding_box.top,
               cursor_position - bounding_box.left, cursor_position - bounding_box.top,
               cursor_position, cursor_position, "playhead");
@@ -216,11 +212,24 @@ App.directive("tlRuler", function ($timeout) {
 
           // Move playhead
           let playhead_seconds = new_position / scope.pixelsPerSecond;
+          playhead_seconds = Math.min(Math.max(0.0, playhead_seconds), scope.project.duration);
           scope.movePlayhead(playhead_seconds);
           scope.previewFrame(playhead_seconds);
         }
       });
 
+      // Global mouseup listener to stop dragging
+      $(document).on("mouseup", function (e) {
+        if (isDragging) {
+          isDragging = false;
+
+          if (scope.Qt) {
+            // Enable caching thread after scrubbing
+            timeline.EnableCacheThread();
+          }
+        }
+      });
+
       /**
        * Draw frame precision alternating banding on each track (when zoomed in)
        */