Resize

Author: martinRenou

examples/introduction.ipynb

@@ -50,7 +50,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "c = ipycanvas.Canvas(stroke_style='red')\n",
+    "c = ipycanvas.Canvas(stroke_style='red', size=(700, 200))\n",
     "c.layout.height = '200px'\n",
     "\n",
     "c"
@@ -81,7 +81,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "c = ipycanvas.Canvas()\n",
+    "c = ipycanvas.Canvas(size=(700, 200))\n",
     "c.layout.height = '200px'\n",
     "\n",
     "c"
@@ -111,7 +111,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "c = ipycanvas.Canvas()\n",
+    "c = ipycanvas.Canvas(size=(700, 200))\n",
     "c.layout.height = '200px'\n",
     "\n",
     "c"

ipycanvas/canvas.py

@@ -4,9 +4,9 @@
 # Copyright (c) Martin Renou.
 # Distributed under the terms of the Modified BSD License.
 
-from ipywidgets import DOMWidget, Color
+from ipywidgets import Color, DOMWidget
 
-from traitlets import Unicode
+from traitlets import Tuple, Unicode
 
 from ._frontend import module_name, module_version
 
@@ -19,6 +19,8 @@ class Canvas(DOMWidget):
     _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').tag(sync=True)
+
     fill_style = Color('black').tag(sync=True)
     stroke_style = Color('black').tag(sync=True)
 

src/widget.ts

@@ -22,6 +22,7 @@ class CanvasModel extends DOMWidgetModel {
       _view_name: CanvasModel.view_name,
       _view_module: CanvasModel.view_module,
       _view_module_version: CanvasModel.view_module_version,
+      size: [],
       fill_style: 'black',
       stroke_style: 'black'
     };
@@ -55,8 +56,6 @@ class CanvasView extends DOMWidgetView {
     this.resize_canvas();
 
     this.model_events();
-
-    window.addEventListener('resize', () => { this.resize_canvas(); });
   }
 
   model_events() {
@@ -66,24 +65,15 @@ class CanvasView extends DOMWidgetView {
 
       this.ctx[event.msg](...event.args);
     });
-  }
 
-  processPhosphorMessage(msg: any) {
-    super.processPhosphorMessage(msg);
-
-    switch (msg.type) {
-    case 'resize':
-      this.resize_canvas();
-      break;
-    }
+    this.model.on('change;size', () => { this.resize_canvas(); });
   }
 
   resize_canvas() {
-    // TODO replay all drawings after resize?
+    const size = this.model.get('size');
 
-    const rect = this.el.getBoundingClientRect();
-    this.canvas.setAttribute('width', rect.width);
-    this.canvas.setAttribute('height', rect.height);
+    this.canvas.setAttribute('width', size[0]);
+    this.canvas.setAttribute('height', size[1]);
   }
 
   canvas: any;