1 files changed, 41 insertions, 13 deletions

diff --git a/src/proxyClient.js b/src/proxyClient.js
index 8f4ad7a6..2d1c76fe 100644
--- a/src/proxyClient.js
+++ b/src/proxyClient.js
@@ -3,9 +3,39 @@
 
 Module.ctx = Module.canvas.getContext('2d');
 
+// render
+
+var renderFrameData = null;
+
+function renderFrame() {
+  var dst = Module.canvasData.data;
+  if (dst.set) {
+    dst.set(renderFrameData);
+  } else {
+    for (var i = 0; i < renderFrameData.length; i++) {
+      dst[i] = renderFrameData[i];
+    }
+  }
+  Module.ctx.putImageData(Module.canvasData, 0, 0);
+  renderFrameData = null;
+}
+
+window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                               window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
+                               renderFrame;
+
+// end render
+
 var worker = new Worker('{{{ filename }}}.js');
 
+var workerResponded = false;
+
 worker.onmessage = function worker_onmessage(event) {
+  if (!workerResponded) {
+    workerResponded = true;
+    if (Module.setStatus) Module.setStatus('');
+  }
+
   var data = event.data;
   switch (data.target) {
     case 'stdout': {
@@ -26,20 +56,18 @@ worker.onmessage = function worker_onmessage(event) {
           Module.canvas.width = data.width;
           Module.canvas.height = data.height;
           Module.canvasData = Module.ctx.getImageData(0, 0, data.width, data.height);
-          postMessage({ target: 'canvas', boundingClientRect: Module.canvas.getBoundingClientRect() });
+          worker.postMessage({ target: 'canvas', boundingClientRect: cloneObject(Module.canvas.getBoundingClientRect()) });
           break;
         }
         case 'render': {
-          var src = data.image.data;
-          var dst = Module.canvasData.data;
-          if (dst.set) {
-            dst.set(src);
+          if (renderFrameData) {
+            // previous image was not rendered yet, just update image
+            renderFrameData = data.image.data;
           } else {
-            for (var i = 0; i < src.length; i++) {
-              dst[i] = src[i];
-            }
+            // previous image was rendered so update image and request another frame
+            renderFrameData = data.image.data;
+            window.requestAnimationFrame(renderFrame);
           }
-          Module.ctx.putImageData(Module.canvasData, 0, 0);
           break;
         }
         default: throw 'eh?';
@@ -50,7 +78,7 @@ worker.onmessage = function worker_onmessage(event) {
   }
 };
 
-function cloneEvent(event) {
+function cloneObject(event) {
   var ret = {};
   for (var x in event) {
     if (x == x.toUpperCase()) continue;
@@ -62,20 +90,20 @@ function cloneEvent(event) {
 
 ['keydown', 'keyup', 'keypress', 'blur', 'visibilitychange'].forEach(function(event) {
   document.addEventListener(event, function(event) {
-    worker.postMessage({ target: 'document', event: cloneEvent(event) });
+    worker.postMessage({ target: 'document', event: cloneObject(event) });
     event.preventDefault();
   });
 });
 
 ['unload'].forEach(function(event) {
   window.addEventListener(event, function(event) {
-    worker.postMessage({ target: 'window', event: cloneEvent(event) });
+    worker.postMessage({ target: 'window', event: cloneObject(event) });
   });
 });
 
 ['mousedown', 'mouseup', 'mousemove', 'DOMMouseScroll', 'mousewheel', 'mouseout'].forEach(function(event) {
   Module.canvas.addEventListener(event, function(event) {
-    worker.postMessage({ target: 'canvas', event: cloneEvent(event) });
+    worker.postMessage({ target: 'canvas', event: cloneObject(event) });
     event.preventDefault();
   }, true);
 });