From a4ff1f573d0cc7cecd3438f380adcb0a60efd8f6 Mon Sep 17 00:00:00 2001
From: Joel Martin <github@martintribe.org>
Date: Wed, 6 Jul 2011 16:32:42 -0500
Subject: [PATCH] Fix ordering of tightPNG fills.

This addresses issue #65:
https://github.com/kanaka/noVNC/issues/65

When tightPNG encoded rects were received, any fill types were
immediately drawn to the canvas while images (PNG, JPEGs) were queued
for loading. This can cause screen corruption when things are changing
rapidly due to the misordering of fills vs images.

Also, remove the onload setting in each image on the queue and instead
decrease the tight image queue scanning interval (to 40ms or 25
scans per second).
---
 include/rfb.js | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/include/rfb.js b/include/rfb.js
index b6b50612..feccc160 100644
--- a/include/rfb.js
+++ b/include/rfb.js
@@ -96,7 +96,7 @@ var that           = {},  // Public API methods
     fb_height      = 0,
     fb_name        = "",
 
-    scan_imgQ_rate = 100,
+    scan_imgQ_rate = 40, // 25 times per second or so
     last_req_time  = 0,
     rre_chunk_sz   = 100,
 
@@ -1244,7 +1244,14 @@ encHandlers.TIGHT_PNG = function display_tight_png() {
     case "fill":
         ws.rQshift8(); // shift off ctl
         color = ws.rQshiftBytes(fb_depth);
-        display.fillRect(FBU.x, FBU.y, FBU.width, FBU.height, color);
+        FBU.imgQ.push({
+                'type': 'fill',
+                'img': {'complete': true},
+                'x': FBU.x,
+                'y': FBU.y,
+                'width': FBU.width,
+                'height': FBU.height,
+                'color': color});
         break;
     case "jpeg":
     case "png":
@@ -1256,8 +1263,12 @@ encHandlers.TIGHT_PNG = function display_tight_png() {
         //Util.Debug("   png, ws.rQlen(): " + ws.rQlen() + ", clength[0]: " + clength[0] + ", clength[1]: " + clength[1]);
         ws.rQshiftBytes(1 + clength[0]); // shift off ctl + compact length
         img = new Image();
-        img.onload = scan_tight_imgQ;
-        FBU.imgQ.push([img, FBU.x, FBU.y]);
+        //img.onload = scan_tight_imgQ;
+        FBU.imgQ.push({
+                'type': 'img',
+                'img': img,
+                'x': FBU.x,
+                'y': FBU.y});
         img.src = "data:image/" + cmode +
             extract_data_uri(ws.rQshiftBytes(clength[1]));
         img = null;
@@ -1280,13 +1291,17 @@ extract_data_uri = function(arr) {
 };
 
 scan_tight_imgQ = function() {
-    var img, imgQ, ctx;
+    var data, imgQ, ctx;
     ctx = display.get_context();
     if (rfb_state === 'normal') {
         imgQ = FBU.imgQ;
-        while ((imgQ.length > 0) && (imgQ[0][0].complete)) {
-            img = imgQ.shift();
-            ctx.drawImage(img[0], img[1], img[2]);
+        while ((imgQ.length > 0) && (imgQ[0].img.complete)) {
+            data = imgQ.shift();
+            if (data['type'] === 'fill') {
+                display.fillRect(data.x, data.y, data.width, data.height, data.color);
+            } else {
+                ctx.drawImage(data.img, data.x, data.y);
+            }
         }
         setTimeout(scan_tight_imgQ, scan_imgQ_rate);
     }