Fix comms processing order

Author: martinRenou

src/widget.ts

@@ -137,7 +137,11 @@ export class CanvasManagerModel extends WidgetModel {
   initialize(attributes: any, options: any) {
     super.initialize(attributes, options);
 
-    this.on('msg:custom', this.onCommand.bind(this));
+    this.on('msg:custom', (command: any, buffers: any) => {
+      this.currentProcessing = this.currentProcessing.then(async () => {
+        await this.onCommand(command, buffers);
+      });
+    });
   }
 
   private async onCommand(command: any, buffers: any) {
@@ -359,6 +363,7 @@ export class CanvasManagerModel extends WidgetModel {
   }
 
   private currentCanvas: CanvasModel;
+  private currentProcessing: Promise<void> = Promise.resolve();
   private canvasesToUpdate: CanvasModel[] = [];
 
   static model_name = 'CanvasManagerModel';

ui-tests/tests/notebooks/ipycanvas.ipynb

@@ -908,14 +908,13 @@
     "canvas = Canvas(width=300, height=300)\n",
     "canvas2 = Canvas(width=600, height=300)\n",
     "\n",
-    "with hold_canvas():\n",
-    "    canvas.fill_style = '#a9cafc'\n",
-    "    canvas.fill_rect(0, 0, 300, 300)\n",
+    "canvas.fill_style = '#a9cafc'\n",
+    "canvas.fill_rect(0, 0, 300, 300)\n",
     "\n",
-    "    canvas.draw_image(sprite1, 50, 50)\n",
-    "    canvas.draw_image(sprite2, 100, 100)\n",
-    "    canvas2.draw_image(canvas, 0, 0)\n",
-    "    canvas2.draw_image(canvas, 300, 0)\n",
+    "canvas.draw_image(sprite1, 50, 50)\n",
+    "canvas.draw_image(sprite2, 100, 100)\n",
+    "canvas2.draw_image(canvas, 0, 0)\n",
+    "canvas2.draw_image(canvas, 300, 0)\n",
     "\n",
     "canvas2"
    ]