Handle async loading of image data

1 files changed, 92 insertions, 61 deletions

diff --git a/client.html b/client.html
index 64f51fd..001afb2 100644
--- a/client.html
+++ b/client.html
@@ -67,22 +67,23 @@ var current_color =" #000000";
 var current_context = 0;
 var current_surface_id = 0;
 var surfaces = {};
+var outstanding_commands = new Array();
 
-function handleLoad(event)
+function handleCommands(cmd_obj)
 {
-  cmd = event.target.responseText;
+  var cmd = cmd_obj.data;
+  var i = cmd_obj.pos;
 
-  i = 0;
   while (i < cmd.length) {
     var command = cmd[i++];
     switch (command) {
       /* create new surface */
       case 's':
-        id = base64_16(cmd, i);
+        var id = base64_16(cmd, i);
         i = i + 3;
-        w = base64_16(cmd, i);
+        var w = base64_16(cmd, i);
         i = i + 3;
-        h = base64_16(cmd, i);
+        var h = base64_16(cmd, i);
         i = i + 3;
         var surface = document.createElement("canvas");
 	surface.width = w;
@@ -93,9 +94,9 @@ function handleLoad(event)
 
       /* select current surface */
       case 'a':
-        id = base64_16(cmd, i);
+        var id = base64_16(cmd, i);
         i = i + 3;
-	surface = surfaces[id];
+	var surface = surfaces[id];
 	current_context = surface.getContext("2d");
         initContext(current_context);
 
@@ -103,7 +104,7 @@ function handleLoad(event)
 
       /* delete surface */
       case 'd':
-        id = base64_16(cmd, i);
+        var id = base64_16(cmd, i);
         i = i + 3;
 	delete surfaces[id]
 
@@ -111,33 +112,39 @@ function handleLoad(event)
 
       /* put image data surface */
       case 'i':
-        x = base64_16(cmd, i);
+        var x = base64_16(cmd, i);
         i = i + 3;
-        y = base64_16(cmd, i);
+        var y = base64_16(cmd, i);
         i = i + 3;
-        size = base64_32(cmd, i);
+        var size = base64_32(cmd, i);
         i = i + 6;
-	url = cmd.slice(i, i + size);
+	var url = cmd.slice(i, i + size);
 	i = i + size;
         var img = new Image();
 	img.src = url
-        current_context.drawImage(img, x, y);
+	if (img.complete) {
+          current_context.drawImage(img, x, y);
+	} else {
+	  cmd_obj.pos = i;
+	  img.onload = function() { current_context.drawImage(img, x, y); handleOutstanding(); }
+	  return false
+	}
 
         break;
 
       /* copy rect */
       case 'b':
-        sx = base64_16(cmd, i);
+        var sx = base64_16(cmd, i);
         i = i + 3;
-        sy = base64_16(cmd, i);
+        var sy = base64_16(cmd, i);
         i = i + 3;
-        w = base64_16(cmd, i);
+        var w = base64_16(cmd, i);
         i = i + 3;
-        h = base64_16(cmd, i);
+        var h = base64_16(cmd, i);
         i = i + 3;
-        dx = base64_16(cmd, i);
+        var dx = base64_16(cmd, i);
         i = i + 3;
-        dy = base64_16(cmd, i);
+        var dy = base64_16(cmd, i);
         i = i + 3;
         current_context.drawImage(current_context.canvas, sx, sy, w, h, dx, dy, w, h);
 
@@ -145,19 +152,19 @@ function handleLoad(event)
 
       /* copy from surface */
       case 'B':
-	source_id = base64_16(cmd, i);
+	var source_id = base64_16(cmd, i);
 	i = i + 3;
-        sx = base64_16(cmd, i);
+        var sx = base64_16(cmd, i);
         i = i + 3;
-        sy = base64_16(cmd, i);
+        var sy = base64_16(cmd, i);
         i = i + 3;
-        w = base64_16(cmd, i);
+        var w = base64_16(cmd, i);
         i = i + 3;
-        h = base64_16(cmd, i);
+        var h = base64_16(cmd, i);
         i = i + 3;
-        dx = base64_16(cmd, i);
+        var dx = base64_16(cmd, i);
         i = i + 3;
-        dy = base64_16(cmd, i);
+        var dy = base64_16(cmd, i);
         i = i + 3;
         current_context.drawImage(surfaces[source_id], sx, sy, w, h, dx, dy, w, h);
 
@@ -165,19 +172,19 @@ function handleLoad(event)
 
       /* blend from surface */
       case 'e':
-	source_id = base64_16(cmd, i);
+	var source_id = base64_16(cmd, i);
 	i = i + 3;
-        sx = base64_16(cmd, i);
+        var sx = base64_16(cmd, i);
         i = i + 3;
-        sy = base64_16(cmd, i);
+        var sy = base64_16(cmd, i);
         i = i + 3;
-        w = base64_16(cmd, i);
+        var w = base64_16(cmd, i);
         i = i + 3;
-        h = base64_16(cmd, i);
+        var h = base64_16(cmd, i);
         i = i + 3;
-        dx = base64_16(cmd, i);
+        var dx = base64_16(cmd, i);
         i = i + 3;
-        dy = base64_16(cmd, i);
+        var dy = base64_16(cmd, i);
         i = i + 3;
 	current_context.globalCompositeOperation = "source-over"
         current_context.drawImage(surfaces[source_id], sx, sy, w, h, dx, dy, w, h);
@@ -187,21 +194,21 @@ function handleLoad(event)
 
       /* blend from surface w/ overall alpha */
       case 'E':
-	source_id = base64_16(cmd, i);
+	var source_id = base64_16(cmd, i);
 	i = i + 3;
-        sx = base64_16(cmd, i);
+        var sx = base64_16(cmd, i);
         i = i + 3;
-        sy = base64_16(cmd, i);
+        var sy = base64_16(cmd, i);
         i = i + 3;
-        w = base64_16(cmd, i);
+        var w = base64_16(cmd, i);
         i = i + 3;
-        h = base64_16(cmd, i);
+        var h = base64_16(cmd, i);
         i = i + 3;
-        dx = base64_16(cmd, i);
+        var dx = base64_16(cmd, i);
         i = i + 3;
-        dy = base64_16(cmd, i);
+        var dy = base64_16(cmd, i);
         i = i + 3;
-        alpha = base64_8(cmd, i);
+        var alpha = base64_8(cmd, i);
         i = i + 2;
 	current_context.globalAlpha = alpha / 255.0;
 	current_context.globalCompositeOperation = "source-over"
@@ -213,19 +220,19 @@ function handleLoad(event)
 
       /* mask from surface */
       case 'm':
-	source_id = base64_16(cmd, i);
+	var source_id = base64_16(cmd, i);
 	i = i + 3;
-        sx = base64_16(cmd, i);
+        var sx = base64_16(cmd, i);
         i = i + 3;
-        sy = base64_16(cmd, i);
+        var sy = base64_16(cmd, i);
         i = i + 3;
-        w = base64_16(cmd, i);
+        var w = base64_16(cmd, i);
         i = i + 3;
-        h = base64_16(cmd, i);
+        var h = base64_16(cmd, i);
         i = i + 3;
-        dx = base64_16(cmd, i);
+        var dx = base64_16(cmd, i);
         i = i + 3;
-        dy = base64_16(cmd, i);
+        var dy = base64_16(cmd, i);
         i = i + 3;
 
         var tmp = document.createElement("canvas");
@@ -246,13 +253,13 @@ function handleLoad(event)
 
       /* fill rect */
       case 'r':
-        x = base64_16(cmd, i);
+        var x = base64_16(cmd, i);
         i = i + 3;
-        y = base64_16(cmd, i);
+        var y = base64_16(cmd, i);
         i = i + 3;
-        w = base64_16(cmd, i);
+        var w = base64_16(cmd, i);
         i = i + 3;
-        h = base64_16(cmd, i);
+        var h = base64_16(cmd, i);
         i = i + 3;
         current_context.fillRect(x, y, w, h);
 
@@ -260,10 +267,10 @@ function handleLoad(event)
 
       /* set current color rgb */
       case 'c':
-        c = base64_24(cmd, i);
+        var c = base64_24(cmd, i);
         i = i + 4;
 
-	hex = c.toString(16)
+	var hex = c.toString(16)
 	while (hex.length < 6) {
             hex = "0" + hex;
         }
@@ -275,13 +282,13 @@ function handleLoad(event)
 
       /* set current color rgba */
       case 'C':
-        c = base64_32(cmd, i);
+        var c = base64_32(cmd, i);
         i = i + 6;
 
-	r = ((c >> 16) & 0xff);
-        g = ((c >> 8) & 0xff);
-        b = (c & 0xff);
-        alpha = ((c >> 24) & 0xff);
+	var r = ((c >> 16) & 0xff);
+        var g = ((c >> 8) & 0xff);
+        var b = (c & 0xff);
+        var alpha = ((c >> 24) & 0xff);
         current_color = 'rgba(' + r + "," + g + "," + b + "," + (alpha / 255.0) + ')'
         current_context.fillStyle = current_color;
 
@@ -291,6 +298,30 @@ function handleLoad(event)
         alert("Unknown op " + command);
     }
   }
+  return true;
+}
+
+function handleOutstanding()
+{
+  while (outstanding_commands.length > 0) {
+    var cmd = outstanding_commands.shift();
+    if (!handleCommands(cmd)) {
+      outstanding_commands.unshift(cmd);
+      return;
+    }
+  }
+}
+
+function handleLoad(event)
+{
+  var cmd_obj = {};
+  cmd_obj.data = event.target.responseText;
+  cmd_obj.pos = 0;
+
+  outstanding_commands.push(cmd_obj);
+  if (outstanding_commands.length == 1) {
+    handleOutstanding()
+  }
 }
 
 function connect()
@@ -318,7 +349,7 @@ function initContext(context)
 
 window.onload = function ()
 {
-  canvas = document.getElementById("display");
+  var canvas = document.getElementById("display");
   surfaces[0] = canvas;
   current_context = canvas.getContext("2d");
   initContext(current_context);