Merge pull request #6 from martinRenou/multi_canvases

Implement MultiCanvas

Author: martinRenou

examples/MultiCanvas.ipynb

@@ -0,0 +1,126 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# MultiCanvas\n",
+    "\n",
+    "A `MultiCanvas` allows you to have multiple canvases one on top of the other. This is very useful when you need multiple layers that don't have the same update frequency (*e.g.* if you make a Tetris game you might only want to render the background image once, and never draw it again)."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from ipycanvas import MultiCanvas"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = MultiCanvas(n_canvases=3, size=(200, 200))"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def draw_square(canvas, pos, width, color):\n",
+    "    canvas.fill_style = color\n",
+    "    canvas.fill_rect(pos, pos, width, width)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "draw_square(m[0], 0, 200, 'orange')"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "draw_square(m[1], 50, 100, 'blue')"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "draw_square(m[2], 75, 50, 'green')"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "draw_square(m[0], 0, 200, 'green')"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m[1].clear()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "draw_square(m[0], 0, 200, 'orange')"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.7.3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

ipycanvas/__init__.py

@@ -4,7 +4,7 @@
 # Copyright (c) Martin Renou.
 # Distributed under the terms of the Modified BSD License.
 
-from .canvas import Canvas, hold_canvas  # noqa
+from .canvas import Canvas, MultiCanvas, hold_canvas  # noqa
 from ._version import __version__, version_info  # noqa
 
 from .nbextension import _jupyter_nbextension_paths  # noqa

ipycanvas/_frontend.py

@@ -9,4 +9,4 @@
 """
 
 module_name = "ipycanvas"
-module_version = "^0.1.0"
+module_version = "^0.2.0"

ipycanvas/canvas.py

@@ -6,9 +6,9 @@
 
 from contextlib import contextmanager
 
-from ipywidgets import Color, DOMWidget
+from traitlets import Float, Instance, List, Tuple, Unicode, observe
 
-from traitlets import Float, Tuple, Unicode, observe
+from ipywidgets import Color, DOMWidget, widget_serialization
 
 from ._frontend import module_name, module_version
 
@@ -39,6 +39,7 @@ class Canvas(DOMWidget):
     direction = Unicode('inherit')
 
     def __init__(self, *args, **kwargs):
+        """Create a Canvas widget."""
         self.caching = kwargs.get('caching', False)
         self._commands_cache = []
 
@@ -168,6 +169,36 @@ def _send_command(self, command):
             self.send(command)
 
 
+class MultiCanvas(DOMWidget):
+    _model_name = Unicode('MultiCanvasModel').tag(sync=True)
+    _model_module = Unicode(module_name).tag(sync=True)
+    _model_module_version = Unicode(module_version).tag(sync=True)
+    _view_name = Unicode('MultiCanvasView').tag(sync=True)
+    _view_module = Unicode(module_name).tag(sync=True)
+    _view_module_version = Unicode(module_version).tag(sync=True)
+
+    size = Tuple((700, 500), help='Size of the Canvas, this is not equal to the size of the view')
+
+    _canvases = List(Instance(Canvas)).tag(sync=True, **widget_serialization)
+
+    def __init__(self, n_canvases=3, *args, **kwargs):
+        """Create a MultiCanvas widget with n_canvases Canvas widgets."""
+        size = kwargs.get('size', (700, 500))
+
+        super(MultiCanvas, self).__init__(*args, _canvases=[Canvas(size=size) for _ in range(n_canvases)], **kwargs)
+        self.layout.width = str(size[0]) + 'px'
+        self.layout.height = str(size[1]) + 'px'
+
+    def __getitem__(self, key):
+        """Access one of the Canvas instances."""
+        return self._canvases[key]
+
+    @observe('size')
+    def _on_size_change(self, change):
+        for canvas in self._canvases:
+            canvas.size = change.new
+
+
 @contextmanager
 def hold_canvas(canvas):
     """Hold any drawing on the canvas, and perform only one draw command at the end."""

src/widget.ts

@@ -2,7 +2,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import {
-  DOMWidgetModel, DOMWidgetView, ISerializers, Dict
+  DOMWidgetModel, DOMWidgetView, ISerializers, Dict, ViewList, unpack_models
 } from '@jupyter-widgets/base';
 
 import {
@@ -20,7 +20,7 @@ class CanvasModel extends DOMWidgetModel {
       _view_name: CanvasModel.view_name,
       _view_module: CanvasModel.view_module,
       _view_module_version: CanvasModel.view_module_version,
-      size: [],
+      size: [700, 500],
     };
   }
 
@@ -136,3 +136,70 @@ class CanvasView extends DOMWidgetView {
 
   model: CanvasModel;
 }
+
+
+export
+class MultiCanvasModel extends DOMWidgetModel {
+  defaults() {
+    return {...super.defaults(),
+      _model_name: MultiCanvasModel.model_name,
+      _model_module: MultiCanvasModel.model_module,
+      _model_module_version: MultiCanvasModel.model_module_version,
+      _view_name: MultiCanvasModel.view_name,
+      _view_module: MultiCanvasModel.view_module,
+      _view_module_version: MultiCanvasModel.view_module_version,
+      _canvases: [],
+    };
+  }
+
+  static serializers: ISerializers = {
+    ...DOMWidgetModel.serializers,
+    _canvases: { deserialize: (unpack_models as any) },
+  }
+
+  static model_name = 'MultiCanvasModel';
+  static model_module = MODULE_NAME;
+  static model_module_version = MODULE_VERSION;
+  static view_name = 'MultiCanvasView';
+  static view_module = MODULE_NAME;
+  static view_module_version = MODULE_VERSION;
+}
+
+
+export
+class MultiCanvasView extends DOMWidgetView {
+  render() {
+    this.container = document.createElement('div');
+    this.container.style.position = 'relative';
+
+    this.el.appendChild(this.container);
+
+    this.canvas_views = new ViewList<CanvasView>(this.createCanvasView, this.removeCanvasView, this);
+    this.updateCanvasViews();
+
+    this.model.on('change:_canvases', this.updateCanvasViews.bind(this));
+  }
+
+  private updateCanvasViews() {
+    this.canvas_views.update(this.model.get('_canvases'));
+  }
+
+  private createCanvasView(canvasModel: CanvasModel, index: number) {
+    // The following ts-ignore is needed due to ipywidgets's implementation
+    // @ts-ignore
+    return this.create_child_view(canvasModel).then((canvasView: CanvasView) => {
+      canvasView.el.style.zIndex = index;
+      canvasView.el.style.position = 'absolute';
+      this.container.appendChild(canvasView.el);
+
+      return canvasView;
+    });
+  }
+
+  private removeCanvasView(canvasView: CanvasView) {
+    this.container.removeChild(canvasView.el);
+  }
+
+  private container: HTMLDivElement;
+  private canvas_views: ViewList<CanvasView>;
+}