Cache commands

Author: martinRenou

examples/introduction.ipynb

@@ -50,15 +50,7 @@
    "outputs": [],
    "source": [
     "c = ipycanvas.Canvas(stroke_style='red', size=(200, 200))\n",
-    "c"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
+    "\n",
     "# Draw smiley face\n",
     "c.begin_path()\n",
     "c.arc(75, 75, 50, 0, pi * 2, True) # Outer circle\n",
@@ -68,7 +60,9 @@
     "c.arc(60, 65, 5, 0, pi * 2, True) # Left eye\n",
     "c.move_to(95, 65)\n",
     "c.arc(90, 65, 5, 0, pi * 2, True) # Right eye\n",
-    "c.stroke()"
+    "c.stroke()\n",
+    "\n",
+    "c"
    ]
   },
   {
@@ -77,8 +71,6 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "c = ipycanvas.Canvas(size=(200, 200))\n",
-    "\n",
     "c"
    ]
   },
@@ -88,6 +80,8 @@
    "metadata": {},
    "outputs": [],
    "source": [
+    "c = ipycanvas.Canvas(size=(200, 200))\n",
+    "\n",
     "# Draw bubble\n",
     "c.begin_path()\n",
     "c.move_to(75, 25)\n",
@@ -97,16 +91,7 @@
     "c.quadratic_curve_to(60, 120, 65, 100)\n",
     "c.quadratic_curve_to(125, 100, 125, 62.5)\n",
     "c.quadratic_curve_to(125, 25, 75, 25)\n",
-    "c.stroke()"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "c = ipycanvas.Canvas(size=(150, 150))\n",
+    "c.stroke()\n",
     "\n",
     "c"
    ]
@@ -137,6 +122,8 @@
    "metadata": {},
    "outputs": [],
    "source": [
+    "c = ipycanvas.Canvas(size=(150, 150))\n",
+    "\n",
     "rounded_rect(c, 12, 12, 150, 150, 15)\n",
     "rounded_rect(c, 19, 19, 150, 150, 9)\n",
     "rounded_rect(c, 53, 53, 49, 33, 10)\n",
@@ -193,16 +180,7 @@
     "\n",
     "c.begin_path()\n",
     "c.arc(89, 102, 2, 0, pi * 2, True)\n",
-    "c.fill()"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "c = ipycanvas.Canvas(size=(150, 150))\n",
+    "c.fill()\n",
     "\n",
     "c"
    ]
@@ -213,6 +191,8 @@
    "metadata": {},
    "outputs": [],
    "source": [
+    "c = ipycanvas.Canvas(size=(150, 150))\n",
+    "\n",
     "# Draw background\n",
     "c.fill_style = '#FD0'\n",
     "c.fill_rect(0, 0, 75, 75)\n",
@@ -231,7 +211,9 @@
     "for i in range(7):\n",
     "    c.begin_path();\n",
     "    c.arc(75, 75, 10 + 10 * i, 0, pi * 2, True);\n",
-    "    c.fill();"
+    "    c.fill();\n",
+    "\n",
+    "c"
    ]
   }
  ],

ipycanvas/canvas.py

@@ -33,50 +33,50 @@ def __init__(self, *args, **kwargs):
     # Rectangles methods
     def fill_rect(self, x, y, width, height):
         """Draw a filled rectangle."""
-        self._send_canvas_msg('fillRect', x, y, width, height)
+        self._send_canvas_command('fillRect', x, y, width, height)
 
     def stroke_rect(self, x, y, width, height):
         """Draw a rectangular outline."""
-        self._send_canvas_msg('strokeRect', x, y, width, height)
+        self._send_canvas_command('strokeRect', x, y, width, height)
 
     def clear_rect(self, x, y, width, height):
         """Clear the specified rectangular area, making it fully transparent."""
-        self._send_canvas_msg('clearRect', x, y, width, height)
+        self._send_canvas_command('clearRect', x, y, width, height)
 
     def rect(self, x, y, width, height):
         """Draw a rectangle whose top-left corner is specified by (x, y) with the specified width and height."""
-        self._send_canvas_msg('rect', x, y, width, height)
+        self._send_canvas_command('rect', x, y, width, height)
 
     # Paths methods
     def begin_path(self):
-        self._send_canvas_msg('beginPath')
+        self._send_canvas_command('beginPath')
 
     def close_path(self):
-        self._send_canvas_msg('closePath')
+        self._send_canvas_command('closePath')
 
     def stroke(self):
-        self._send_canvas_msg('stroke')
+        self._send_canvas_command('stroke')
 
     def fill(self):
-        self._send_canvas_msg('fill')
+        self._send_canvas_command('fill')
 
     def move_to(self, x, y):
-        self._send_canvas_msg('moveTo', x, y)
+        self._send_canvas_command('moveTo', x, y)
 
     def line_to(self, x, y):
-        self._send_canvas_msg('lineTo', x, y)
+        self._send_canvas_command('lineTo', x, y)
 
     def arc(self, x, y, radius, start_angle, end_angle, anticlockwise):
-        self._send_canvas_msg('arc', x, y, radius, start_angle, end_angle, anticlockwise)
+        self._send_canvas_command('arc', x, y, radius, start_angle, end_angle, anticlockwise)
 
     def arc_to(self, x1, y1, x2, y2, radius):
-        self._send_canvas_msg('arcTo', x1, y1, x2, y2, radius)
+        self._send_canvas_command('arcTo', x1, y1, x2, y2, radius)
 
     def quadratic_curve_to(self, cp1x, cp1y, x, y):
-        self._send_canvas_msg('quadraticCurveTo', cp1x, cp1y, x, y)
+        self._send_canvas_command('quadraticCurveTo', cp1x, cp1y, x, y)
 
     def bezier_curve_to(self, cp1x, cp1y, cp2x, cp2y, x, y):
-        self._send_canvas_msg('bezierCurveTo', cp1x, cp1y, cp2x, cp2y, x, y)
+        self._send_canvas_command('bezierCurveTo', cp1x, cp1y, cp2x, cp2y, x, y)
 
-    def _send_canvas_msg(self, msg_name, *args):
-        self.send({'msg': msg_name, 'args': args})
+    def _send_canvas_command(self, name, *args):
+        self.send({'name': name, 'args': args})

src/widget.ts

@@ -29,16 +29,42 @@ class CanvasModel extends DOMWidgetModel {
   }
 
   static serializers: ISerializers = {
-      ...DOMWidgetModel.serializers,
-      // Add any extra serializers here
-    }
+    ...DOMWidgetModel.serializers,
+    // Add any extra serializers here
+  }
+
+  initialize(attributes: any, options: any) {
+    super.initialize(attributes, options);
+
+    this.commands_cache = [];
+
+    this.cache_set_command('fill_style', 'fillStyle');
+    this.cache_set_command('stroke_style', 'strokeStyle');
+    this.cache_set_command('global_alpha', 'globalAlpha');
+
+    this.on('msg:custom', (command) => { this.commands_cache.push(command); });
+
+    this.on('change:fill_style', () => { this.cache_set_command('fill_style', 'fillStyle'); });
+    this.on('change:stroke_style', () => { this.cache_set_command('stroke_style', 'strokeStyle'); });
+    this.on('change:global_alpha', () => { this.cache_set_command('global_alpha', 'globalAlpha'); });
+  }
+
+  cache_set_command(python_name: string, ts_name: string) {
+    this.commands_cache.push({
+      name: 'set',
+      attr: ts_name,
+      value: this.get(python_name)
+    });
+  }
 
   static model_name = 'CanvasModel';
   static model_module = MODULE_NAME;
   static model_module_version = MODULE_VERSION;
   static view_name = 'CanvasView';
   static view_module = MODULE_NAME;
   static view_module_version = MODULE_VERSION;
+
+  commands_cache: any;
 }
 
 
@@ -53,22 +79,33 @@ class CanvasView extends DOMWidgetView {
 
     this.ctx = this.canvas.getContext('2d');
 
-    this.ctx.globalAlpha = this.model.get('global_alpha');
-
     this.resize_canvas();
 
+    this.first_draw();
+
     this.model_events();
   }
 
-  model_events() {
-    this.model.on('msg:custom', (event) => {
-      this.ctx.fillStyle = this.model.get('fill_style');
-      this.ctx.strokeStyle = this.model.get('stroke_style');
+  first_draw() {
+    // Replay all the commands that were received until this view was created
+    for (const command of (this.model as CanvasModel).commands_cache) {
+      if (command.name == 'set') {
+        this.ctx[command.attr] = command.value;
+      } else {
+        this.ctx[command.name](...command.args);
+      }
+    }
+  }
 
-      this.ctx[event.msg](...event.args);
+  model_events() {
+    this.model.on('msg:custom', (command) => {
+      this.ctx[command.name](...command.args);
     });
 
     this.model.on('change:size', () => { this.resize_canvas(); });
+
+    this.model.on('change:fill_style', () => { this.ctx.fillStyle = this.model.get('fill_style'); });
+    this.model.on('change:stroke_style', () => { this.ctx.strokeStyle = this.model.get('stroke_style'); });
     this.model.on('change:global_alpha', () => { this.ctx.globalAlpha = this.model.get('global_alpha'); });
   }