Coppied changes from playhead-bug branch

Author: Jackson

src/timeline/index.html

@@ -51,9 +51,11 @@
 				<div class="playhead-line-small"></div>
 			</div>
 			<!-- Ruler extends beyond tracks area at least for a width of vertical scroll bar (or more, like 50px here) -->
-			<canvas tl-ruler id="ruler" width="{{canvasMaxWidth(getTimelineWidth(0) + 6)}}px" height="39"></canvas>
+			<div tl-ruler id="ruler" style="width: {{project.duration * pixelsPerSecond}}px;">
+			</div>
 
 			<!-- MARKERS --> 
+
 			<span class="ruler_marker" id="marker_for_{{marker.id}}">
 				<img ng-repeat="marker in project.markers" id="marker_{{marker.id}}_{{$index}}" ng-right-click="showMarkerMenu(marker.id)" style="position: absolute; bottom: 0px; left: {{(marker.position * pixelsPerSecond) - 6 }}px;" class="marker_icon" ng-src="media/images/markers/{{ marker.icon }}" draggable="false"/>
 			</span>

src/timeline/js/directives/ruler.js

@@ -42,7 +42,6 @@ var scroll_left_pixels = 0;
 App.directive("tlScrollableTracks", function () {
   return {
     restrict: "A",
-
     link: function (scope, element, attrs) {
 
       // Sync ruler to track scrolling
@@ -61,14 +60,18 @@ App.directive("tlScrollableTracks", function () {
         // Send scrollbar position to Qt
         if (scope.Qt) {
            // Calculate scrollbar positions (left and right edge of scrollbar)
-           var timeline_length = Math.min(32767, scope.getTimelineWidth(0));
+           var timeline_length = scope.getTimelineWidth(0);
            var left_scrollbar_edge = scroll_left_pixels / timeline_length;
            var right_scrollbar_edge = (scroll_left_pixels + element.width()) / timeline_length;
 
            // Send normalized scrollbar positions to Qt
            timeline.ScrollbarChanged([left_scrollbar_edge, right_scrollbar_edge, timeline_length, element.width()]);
         }
 
+        scope.$apply( () => {
+          scope.scrollLeft = element[0].scrollLeft;
+        })
+
       });
 
       // Initialize panning when middle mouse is clicked
@@ -99,7 +102,6 @@ App.directive("tlScrollableTracks", function () {
         element.removeClass("drag_cursor");
       });
 
-
     }
   };
 });
@@ -115,7 +117,6 @@ App.directive("tlBody", function () {
         }
       });
 
-
     }
   };
 });
@@ -147,7 +148,6 @@ App.directive("tlRuler", function ($timeout) {
             scope.playhead_animating = false;
           });
         });
-
       });
 
       // Move playhead to new position (if it's not currently being animated)
@@ -160,60 +160,63 @@ App.directive("tlRuler", function ($timeout) {
         }
       });
 
+      drawTicks = () => { 
+        /* Remove all divs in ruler and readraw along the full length 
+         * Only needed when timeline length changes.
+         */
+
+        ruler = $("#ruler");
+        $('#ruler div').remove();
+        width = ruler.width();
+        for (var x = 0; x < width; x+=50) {
+          d = $('<div>');
+          d.addClass('on_ruler');
+          d.addClass( (x % 100 == 0) ? 'ruler_tick_long' : 'ruler_tick');
+          d[0].style = "left: " + x + 'px;';
+          console.log(d[0]);
+          ruler.append(d);
+        }
+      }
+
+      drawTimes = () => {
+        console.log(scope.scrollLeft);
+        ruler = $("#ruler");
+        width = $("body").width();
+        $("#ruler span").remove();
+        start = Math.max(scope.scrollLeft - width, 0);
+        end = Math.min(scope.scrollLeft + (2*width), $('#ruler').width());
+        for (var i = start - (start % 50) ; i < end; i += 100) {
+          s = $('<span>');
+          s.addClass("tick_time");
+          s[0].innerText= "00:00";
+          s[0].style = "left: " + i + "px;";
+          ruler.append(s);
+        }
+      }
+
       //watch the scale value so it will be able to draw the ruler after changes,
       //otherwise the canvas is just reset to blank
-      scope.$watch("project.scale + markers.length + project.duration", function (val) {
+      scope.$watch("project.scale + project.duration", function(val) {
         if (val) {
-
           $timeout(function () {
-            //get all scope variables we need for the ruler
-            var scale = scope.project.scale;
-            var tick_pixels = scope.project.tick_pixels;
-            var each_tick = tick_pixels / 2;
-            // Don't go over the max supported canvas size
-            var pixel_length = Math.min(32767,scope.getTimelineWidth(1024));
-
-            //draw the ruler
-            var ctx = element[0].getContext("2d");
-            //clear the canvas first
-            ctx.clearRect(0, 0, element.width(), element.height());
-            //set number of ticks based 2 for each pixel_length
-            var num_ticks = pixel_length / 50;
-
-            ctx.lineWidth = 1;
-            ctx.strokeStyle = "#c8c8c8";
-            ctx.lineCap = "round";
-
-            //loop em and draw em
-            for (var x = 0; x < num_ticks + 1; x++) {
-              ctx.beginPath();
-
-              //if it's even, make the line longer
-              var line_top = 0;
-              if (x % 2 === 0) {
-                line_top = 18;
-                //if it's not the first line, set the time text
-                if (x !== 0) {
-                  //get time for this tick
-                  var time = (scale * x) / 2;
-                  var time_text = secondsToTime(time, scope.project.fps.num, scope.project.fps.den);
-
-                  //write time on the canvas, centered above long tick
-                  ctx.fillStyle = "#c8c8c8";
-                  ctx.font = "0.9em";
-                  ctx.fillText(time_text["hour"] + ":" + time_text["min"] + ":" + time_text["sec"], x * each_tick - 22, 11);
-                }
-              } else {
-                //shorter line
-                line_top = 28;
-              }
-
-              ctx.moveTo(x * each_tick, 39);
-              ctx.lineTo(x * each_tick, line_top);
-              ctx.stroke();
+            $('#ruler').scrollLeft = $('#scrolling_tracks').scrollLeft;
+            drawTimes();
+            return;
             }
-          }, 0);
-
+          , 0);
+        }
+      });
+      
+      scope.$watch("scrollLeft", function (val) {
+        if (val) {
+          $timeout(function () {
+            // $('#ruler').scrollLeft = $('#scrolling_tracks').scrollLeft;
+            drawTimes();
+            //reposition the spans at every visible multiple of 50 pixels
+            //Plus a screen width before and after for scrolling
+            return;
+            }
+          , 0);
         }
       });
 

src/timeline/media/css/main.css

@@ -43,13 +43,44 @@ img {
 }
 
 /* Ruler */
-#scrolling_ruler { overflow: hidden; position: relative;line-height: 4px; }
+#scrolling_ruler { overflow: hidden; position: relative;line-height: 4px; height:43px;}
 #scrolling_tracks { height: 316px; overflow: scroll; position: relative; }
 #ruler_label { height: 39px; width: 140px; float: left; margin-bottom: 4px; }
-#ruler_ticks { background-color:#000; }
 #ruler_time { font-size: 13pt; color: #c8c8c8; padding-top: 14px; padding-left: 17px; }
 #progress_container {margin-left:140px; overflow: hidden; height: 13px;}
 .drag_cursor { cursor: move; }
+#ruler {
+  position: relative;
+  height: 100%;
+  background-image: url(../images/ruler-tick.svg);
+}
+.on_ruler{
+  position: absolute;
+  color: white;
+  font-size: 0.8em;
+}
+.ruler_tick_long {
+  background-color: white;
+  width: 5px;
+  height: 20px;
+  bottom: 0px;
+  position: absolute;
+  border-radius: 2px;
+}
+.ruler_tick {
+  background-color: white;
+  width: 5px;
+  height: 10px;
+  bottom: 0px;
+  position: absolute;
+  border-radius: 2px;
+}
+.tick_time {
+  color: white;
+  top: 5px;
+  position: absolute;
+  transform: translate(-50%,0);
+}
 
 /* Tracks */
 #track_controls { width: 140px; position: relative; float: left; height: 316px; overflow: hidden;}