Fix large canvas rendering (at closest zoom levels), with WebEngine (#3711)

* Timeline: Constrain ruler canvas width to 32Kpixels
* Timeline: Add canvasMaxWidth() constraint function
- Apply it to the progress, waveform, and ruler canvases
- Also check max width in canvas redrawing code

Author: ferdnyc

src/timeline/index.html

@@ -48,7 +48,7 @@
 				<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="{{getTimelineWidth(1024) + 50}}" height="39"></canvas>
+			<canvas tl-ruler id="ruler" width="{{canvasMaxWidth(getTimelineWidth(1024) + 50)}}px" height="39"></canvas>
 
 			<!-- MARKERS --> 
 			<span class="ruler_marker" id="marker_for_{{marker.id}}">
@@ -57,7 +57,7 @@
 			<br class="cleared">
 
 			<!-- PROGRESS BAR -->
-			<canvas id="progress" width="{{project.duration * pixelsPerSecond}}px" height="3px"></canvas>
+			<canvas id="progress" width="{{canvasMaxWidth(project.duration * pixelsPerSecond)}}px" height="3px"></canvas>
  		</div>
  		<div class="cleared"></div>
 
@@ -102,7 +102,7 @@
 						<img class="thumb thumb-start" ng-show="getThumbPath(clip)" ng-src="{{ getThumbPath(clip) }}"/>
 					</div>
 					<div ng-show="clip.show_audio" class="audio-container">
-						<canvas tl-audio height="46px" width="{{ (clip.end - clip.start) * pixelsPerSecond}}px" class="audio"></canvas>
+						<canvas tl-audio height="46px" width="{{canvasMaxWidth((clip.end - clip.start) * pixelsPerSecond)}}px" class="audio"></canvas>
 					</div>
 				</div>
 
@@ -178,5 +178,3 @@
 		<!-- END DEBUG SECTION -->
 </body>
 </html>
-
-

src/timeline/js/controllers.js

@@ -466,11 +466,13 @@ App.controller("TimelineCtrl", function ($scope) {
       var start_second = parseFloat(progress[p]["start"]) / fps;
       var stop_second = parseFloat(progress[p]["end"]) / fps;
 
-      //figure out the actual pixel position
-      var start_pixel = start_second * $scope.pixelsPerSecond;
-      var stop_pixel = stop_second * $scope.pixelsPerSecond;
+      //figure out the actual pixel position, constrained by max width
+      var start_pixel = $scope.canvasMaxWidth(start_second * $scope.pixelsPerSecond);
+      var stop_pixel = $scope.canvasMaxWidth(stop_second * $scope.pixelsPerSecond);
       var rect_length = stop_pixel - start_pixel;
-
+      if (rect_length < 1) {
+        break;
+      }
       //get the element and draw the rects
       ctx.beginPath();
       ctx.rect(start_pixel, 0, rect_length, 5);
@@ -642,6 +644,11 @@ App.controller("TimelineCtrl", function ($scope) {
     }
   };
 
+  // Constrain canvas width values to under 32Kpixels
+  $scope.canvasMaxWidth = function (desired_width) {
+    return Math.min(32767, desired_width);
+  };
+
 // Find the furthest right edge on the timeline (and resize it if too small)
   $scope.resizeTimeline = function () {
     // Unselect all clips

src/timeline/js/directives/ruler.js

@@ -154,7 +154,8 @@ App.directive("tlRuler", function ($timeout) {
             var scale = scope.project.scale;
             var tick_pixels = scope.project.tick_pixels;
             var each_tick = tick_pixels / 2;
-            var pixel_length = scope.getTimelineWidth(1024);
+            // 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");

src/timeline/js/functions.js

@@ -103,9 +103,20 @@ function drawAudio(scope, clip_id) {
       max = 0.0,
       last_x = 0;
 
+    // Ensure that the waveform canvas doesn't exceed its max
+    // dimensions, even if it means we can't draw the full audio.
+    // (If we try to go over the max width, the whole canvas disappears)
+    var final_sample = end_sample;
+    var audio_width = (end_sample - start_sample) / sample_divisor;
+    var usable_width = scope.canvasMaxWidth(audio_width);
+    if (audio_width > usable_width) {
+      // Just go as far as we can, then cut off the remaining waveform
+      final_sample = (usable_width * sample_divisor) - 1;
+    }
+
     // Go through all of the (reduced) samples
     // And whenever enough are "collected", draw a block
-    for (var i = start_sample; i < end_sample; i++) {
+    for (var i = start_sample; i < final_sample; i++) {
       // Flip negative values up
       sample = Math.abs(clip.audio_data[i]);
       // X-Position of *next* sample
@@ -115,7 +126,7 @@ function drawAudio(scope, clip_id) {
       avg_cnt++;
       max = Math.max(max, sample);
 
-      if (x >= last_x + block_width || i === end_sample - 1) {
+      if (x >= last_x + block_width || i === final_sample - 1) {
         // Block wide enough or last block -> draw it
 
         // Draw the slightly transparent max-bar