Some fixed for timeline ruler (fix timecode sometimes stopping in the middle of timeline)

src/timeline2/view/qml/Ruler.qml

@@ -46,6 +46,7 @@ Item {
         }
         rulerRoot.labelMod = Math.max(1, Math.ceil((rulerRoot.labelSize + root.fontUnit) / rulerRoot.tickSpacing))
         //console.log('LABELMOD: ', Math.ceil((rulerRoot.labelSize + root.fontUnit) / rulerRoot.tickSpacing)))
+        tickRepeater.model = Math.ceil(scrollView.width / rulerRoot.tickSpacing) + 2
     }
 
     function adjustFormat() {
@@ -57,7 +58,7 @@ Item {
     function repaintRuler() {
         // Enforce repaint
         tickRepeater.model = 0
-        tickRepeater.model = scrollView.width / rulerRoot.tickSpacing + 2
+        tickRepeater.model = Math.ceil(scrollView.width / rulerRoot.tickSpacing) + 2
     }
 
     // Timeline preview stuff
@@ -94,33 +95,10 @@ Item {
         visible: rulerRoot.workingPreview > -1
     }
     
-    // Effect zone
-    RulerZone {
-        id: effectZone
-        Binding {
-            target: effectZone
-            property: "frameIn"
-            value: timeline.effectZone.x
-        }
-        Binding {
-            target: effectZone
-            property: "frameOut"
-            value: timeline.effectZone.y
-        }
-        color: 'yellow'
-        opacity: 0.4
-        anchors.bottom: parent.bottom
-        height: parent.height
-        function updateZone(start, end, update)
-        {
-            timeline.updateEffectZone(start, end, update)
-        }
-    }
-
     // Ruler marks
     Repeater {
         id: tickRepeater
-        model: scrollView.width / rulerRoot.tickSpacing + 2
+        model: Math.ceil(scrollView.width / rulerRoot.tickSpacing) + 2
         property int offset: Math.floor(scrollView.contentX /rulerRoot.tickSpacing)
         Item {
             property int realPos: (tickRepeater.offset + index) * rulerRoot.tickSpacing / timeline.scaleFactor
@@ -129,6 +107,7 @@ Item {
             property bool showText: (tickRepeater.offset + index)%rulerRoot.labelMod == 0
             Rectangle {
                 anchors.bottom: parent.bottom
+                anchors.bottomMargin: root.baseUnit / 2
                 height: parent.showText ? 8 : 4
                 width: 1
                 color: activePalette.windowText
@@ -137,7 +116,7 @@ Item {
             Label {
                 visible: parent.showText
                 anchors.top: parent.top
-                anchors.topMargin: 2
+                //anchors.topMargin: 2
                 text: timeline.timecode(parent.realPos)
                 font: miniFont
                 color: activePalette.windowText
@@ -146,6 +125,19 @@ Item {
     }
 
     // monitor zone
+    Rectangle {
+        width: rulerRoot.width
+        height: 1
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: root.baseUnit / 2
+        color: activePalette.shadow
+        Rectangle {
+            width: rulerRoot.width
+            height: 1
+            anchors.top: parent.bottom
+            color: activePalette.light
+        }
+    }
     RulerZone {
         id: zone
         Binding {
@@ -158,14 +150,36 @@ Item {
             property: "frameOut"
             value: timeline.zoneOut
         }
-        color: useTimelineRuler ? Qt.rgba(activePalette.highlight.r,activePalette.highlight.g,activePalette.highlight.b,0.5) :
-        Qt.rgba(activePalette.highlight.r,activePalette.highlight.g,activePalette.highlight.b,0.25)
+        color: useTimelineRuler ? Qt.rgba(activePalette.highlight.r,activePalette.highlight.g,activePalette.highlight.b,0.9) :
+        Qt.rgba(activePalette.highlight.r,activePalette.highlight.g,activePalette.highlight.b,0.5)
         anchors.bottom: parent.bottom
-        height: parent.height / 3
+        height: root.baseUnit / 2
         function updateZone(start, end, update)
         {
             timeline.updateZone(start, end, update)
         }
     }
+    // Effect zone
+    RulerZone {
+        id: effectZone
+        Binding {
+            target: effectZone
+            property: "frameIn"
+            value: timeline.effectZone.x
+        }
+        Binding {
+            target: effectZone
+            property: "frameOut"
+            value: timeline.effectZone.y
+        }
+        color: 'yellow'
+        opacity: 0.9
+        anchors.bottom: parent.bottom
+        height: root.baseUnit / 2
+        function updateZone(start, end, update)
+        {
+            timeline.updateEffectZone(start, end, update)
+        }
+    }
 }
 

src/timeline2/view/qml/RulerZone.qml

@@ -76,7 +76,7 @@ Rectangle {
         visible: trimInMouseArea.drag.active || trimInMouseArea.containsMouse
         width: inLabel.contentWidth
         height: inLabel.contentHeight
-        anchors.bottom: rzone.top
+        anchors.top: rzone.bottom
         color: activePalette.highlight
         Label {
             id: inLabel
@@ -90,7 +90,7 @@ Rectangle {
         visible: trimOutMouseArea.drag.active || trimOutMouseArea.containsMouse
         width: outLabel.contentWidth
         height: outLabel.contentHeight
-        anchors.bottom: rzone.top
+        anchors.top: rzone.bottom
         color: activePalette.highlight
         x: rzone.width - outLabel.contentWidth
         Label {
@@ -103,7 +103,7 @@ Rectangle {
     }
     Rectangle {
         id: durationRect
-        anchors.bottom: rzone.top
+        anchors.top: rzone.bottom
         visible: (!useTimelineRuler && moveMouseArea.containsMouse) || ((useTimelineRuler || trimInMouseArea.drag.active || trimOutMouseArea.drag.active) && showZoneLabels && parent.width > 3 * width) || (useTimelineRuler && !trimInMouseArea.drag.active && !trimOutMouseArea.drag.active) || moveMouseArea.drag.active
         anchors.horizontalCenter: parent.horizontalCenter
         width: durationLabel.contentWidth + 4

src/timeline2/view/qml/timeline.qml

@@ -817,8 +817,7 @@ Rectangle {
                     height: trackHeaders.height + subtitleTrackHeader.height
                     acceptedButtons: Qt.NoButton
                     onWheel: {
-                        var newScroll = Math.min(scrollView.contentY - wheel.angleDelta.y, height - tracksArea.height + scrollView.ScrollBar.horizontal.height + ruler.height)
-                        scrollView.contentY = Math.max(newScroll, 0)
+                        zoomByWheel(wheel)
                     }
                 }
                 Rectangle {
@@ -1084,6 +1083,16 @@ Rectangle {
                     } else {
                         timeline.triggerAction('monitor_seek_snap_forward')
                     }
+                } else if (wheel.modifiers & Qt.ControlModifier) {
+                    root.wheelAccumulatedDelta += wheel.angleDelta.y;
+                    // Zoom
+                    if (root.wheelAccumulatedDelta >= defaultDeltasPerStep) {
+                        root.zoomIn(true);
+                        root.wheelAccumulatedDelta = 0;
+                    } else if (root.wheelAccumulatedDelta <= -defaultDeltasPerStep) {
+                        root.zoomOut(true);
+                        root.wheelAccumulatedDelta = 0;
+                    }
                 } else {
                     var delta = wheel.modifiers & Qt.ShiftModifier ? timeline.fps() : 1
                     proxy.position = wheel.angleDelta.y > 0 ? Math.max(root.consumerPosition - delta, 0) : Math.min(root.consumerPosition + delta, timeline.fullDuration - 1)
@@ -1330,7 +1339,7 @@ Rectangle {
                     // Non-slider scroll area for the Ruler.
                     id: rulercontainer
                     width: root.width - headerWidth
-                    height: root.baseUnit * 2
+                    height: root.baseUnit * 2.5
                     contentX: scrollView.contentX
                     contentWidth: Math.max(parent.width, timeline.fullDuration * timeScale)
                     interactive: false
@@ -1339,15 +1348,6 @@ Rectangle {
                         id: ruler
                         width: rulercontainer.contentWidth
                         height: parent.height
-                        /*Rectangle {
-                            id: seekCursor
-                            visible: proxy.seekPosition > -1
-                            color: activePalette.highlight
-                            width: 4
-                            height: ruler.height
-                            opacity: 0.5
-                            x: proxy.seekPosition * timeline.scaleFactor
-                        }*/
                         TimelinePlayhead {
                             id: playhead
                             height: root.baseUnit * .8

src/timeline2/view/timelinewidget.cpp

@@ -197,6 +197,8 @@ void TimelineWidget::setModel(const std::shared_ptr<TimelineItemModel> &model, M
     setVisible(true);
     loading = false;
     m_proxy->checkDuration();
+    // Ensure timeline timecode get correctly painted
+    m_proxy->frameFormatChanged();
 }
 
 void TimelineWidget::mousePressEvent(QMouseEvent *event)