Merge pull request #4318 from OpenShot/ruler-fixes

Fix middle click drag, and ruler jitter
OpenShot · Aug 18, 2021 · 235bef1 · 235bef1
2 parents cde191a + d997079
commit 235bef1
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 37 deletions.
diff --git a/src/timeline/js/directives/ruler.js b/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");
         }
@@ -196,47 +197,53 @@ App.directive("tlRuler", function ($timeout) {
         ruler = $('#ruler');
         $("#ruler span").remove();
 
-        startPos = scope.scrollLeft;
-        endPos = scope.scrollLeft + $("body").width();
+        let startPos = scope.scrollLeft;
+        let endPos = scope.scrollLeft + $("body").width();
+        let fpt = framesPerTick(scope.pixelsPerSecond, scope.project.fps.num ,scope.project.fps.den);
+        let fps = scope.project.fps.num / scope.project.fps.den;
+        let time = [ startPos / scope.pixelsPerSecond, endPos / scope.pixelsPerSecond];
 
-        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);
+        let startFrame = time[0] * Math.round(fps);
+        let endFrame = time[1] * Math.round(fps);
 
-        fpt = framesPerTick(scope.pixelsPerSecond, scope.project.fps.num ,scope.project.fps.den);
-        frame = startFrame;
+        let frame = startFrame;
         while ( frame <= endFrame){
-          t = frame / fps;
-          pos = t * scope.pixelsPerSecond;
-          tickSpan = $('<span style="left:'+pos+'px;"></span>');
+          let t = frame / fps;
+          let pos = t * scope.pixelsPerSecond;
+          let 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>');
+            let timeSpan = $('<span style="left:'+pos+'px;"></span>');
             timeSpan.addClass("ruler_time");
-            timeText = secondsToTime(t, scope.project.fps.num, scope.project.fps.den);
+            let timeText = secondsToTime(t, scope.project.fps.num, scope.project.fps.den);
             timeSpan[0].innerText = timeText['hour'] + ':' +
               timeText['min'] + ':' +
               timeText['sec'];
             if (fpt < Math.round(fps)) {
               timeSpan[0].innerText += ',' + timeText['frame'];
             }
             tickSpan[0].style['height'] = '20px';
+            ruler.append(timeSpan);
           }
-          ruler.append(timeSpan);
           ruler.append(tickSpan);
 
           frame += fpt;
         }
         return;
       };
 
-      scope.$watch("project.scale + project.duration + scrollLeft", function (val) {
+      scope.$watch("project.scale + project.duration + scrollLeft + element.width()", function (val) {
         if (val) {
           $timeout(function () {
             drawTimes();

diff --git a/src/timeline/js/functions.js b/src/timeline/js/functions.js
@@ -166,7 +166,7 @@ function secondsToTime(secs, fps_num, fps_den) {
   var week = Math.floor(day / 7);
   day = day % 7;
 
-  var frame = Math.floor((milli / 1000.0) * (fps_num / fps_den)) + 1;
+  var frame = Math.round((milli / 1000.0) * (fps_num / fps_den)) + 1;
   return {
     "week": padNumber(week, 2),
     "day": padNumber(day, 2),

diff --git a/src/windows/views/webview_backend/webkit.py b/src/windows/views/webview_backend/webkit.py
@@ -123,19 +123,3 @@ def keyPressEvent(self, event):
         else:
             # Ignore most keypresses
             event.ignore()
-
-    def wheelEvent(self, event):
-        """ Mousewheel scrolling """
-        if event.modifiers() & Qt.ShiftModifier:
-            event.accept()
-            frame = self.page().mainFrame()
-            # Compute scroll offset from wheel motion
-            tick_scale = 120
-            steps = int(event.angleDelta().y() / tick_scale)
-            delta = -(steps * 100)
-            log.debug("Scrolling horizontally by %d pixels", delta)
-            # Update the scroll position using AngularJS
-            js = "$('body').scope().scrollLeft({});".format(delta)
-            frame.evaluateJavaScript(js)
-        else:
-            super().wheelEvent(event)