Do not automatically flush layers. Add flush() function. Flush automatically on sync.

guacamole-common-js/src/main/resources/guacamole.js

@@ -377,6 +377,7 @@ Guacamole.Client = function(tunnel) {
     // Create cursor layer
     var cursor = new Guacamole.Client.LayerContainer(0, 0);
     cursor.getLayer().setChannelMask(Guacamole.Layer.SRC);
+    cursor.getLayer().autoflush = true;
 
     // Position cursor layer
     var cursor_element = cursor.getElement();
@@ -593,6 +594,7 @@ Guacamole.Client = function(tunnel) {
         // Create buffer if necessary
         if (buffer == null) {
             buffer = new Guacamole.Layer(0, 0);
+            buffer.autoflush = 1;
             buffer.autosize = 1;
             buffers[index] = buffer;
         }
@@ -1173,9 +1175,17 @@ Guacamole.Client = function(tunnel) {
             for (var i=0; i<layers.length; i++) {
 
                 var layer = layers[i].getLayer();
-                if (layer && !layer.isReady()) {
+                if (layer) {
-                    layersToSync++;
+
-                    layer.sync(syncLayer);
+                    // Flush layer
+                    layer.flush();
+
+                    // If still not ready, sync later
+                    if (!layer.isReady()) {
+                        layersToSync++;
+                        layer.sync(syncLayer);
+                    }
+
                 }
 
             }

guacamole-common-js/src/main/resources/layer.js

@@ -258,7 +258,11 @@ Guacamole.Layer = function(width, height) {
         this.unblock = function() {
             if (task.blocked) {
                 task.blocked = false;
-                handlePendingTasks();
+
+                // Flush automatically if enabled
+                if (layer.autoflush || !flushComplete)
+                    layer.flush();
+
             }
         }
 
@@ -279,7 +283,7 @@ Guacamole.Layer = function(width, height) {
     function scheduleTask(handler, blocked) {
         
         // If no pending tasks, just call (if available) and exit
-        if (layer.isReady() && !blocked) {
+        if (layer.autoflush && layer.isReady() && !blocked) {
             if (handler) handler();
             return null;
         }
@@ -292,19 +296,34 @@ Guacamole.Layer = function(width, height) {
         
     }
 
+    /**
+     * Whether all previous calls to flush() have completed. If a task was
+     * waiting in the queue when flush() was called but still blocked, the
+     * queue will continue to flush outside the original flush() call until
+     * the queue is empty.
+     * 
+     * @private
+     */
+    var flushComplete = true;
+
+    /**
+     * Whether tasks are currently being actively flushed. As flush() is not
+     * reentrant, this flag prevents calls of flush() from overlapping.
+     * @private
+     */
     var tasksInProgress = false;
 
     /**
      * Run any Tasks which were pending but are now ready to run and are not
      * blocked by other Tasks.
-     * @private
      */
-    function handlePendingTasks() {
+    this.flush = function() {
 
         if (tasksInProgress)
             return;
 
         tasksInProgress = true;
+        flushComplete = false;
 
         // Draw all pending tasks.
         var task;
@@ -313,9 +332,13 @@ Guacamole.Layer = function(width, height) {
             if (task.handler) task.handler();
         }
 
+        // If all pending draws have been flushed
+        if (layer.isReady())
+            flushComplete = true;
+
         tasksInProgress = false;
 
-    }
+    };
 
     /**
      * Schedules a task within the current layer just as scheduleTast() does,
@@ -401,6 +424,16 @@ Guacamole.Layer = function(width, height) {
      */
     this.autosize = false;
 
+    /**
+     * Set to true to allow operations to flush automatically, instantly
+     * affecting the layer. By default, operations are buffered and only
+     * drawn when flush() is called.
+     * 
+     * @type Boolean
+     * @default false
+     */
+    this.autoflush = false;
+
     /**
      * Returns the canvas element backing this Layer.
      * @returns {Element} The canvas element backing this Layer.