Merge pull request #111 from martinRenou/sizing_logic

CanvasView: Make the canvas the main element

Author: martinRenou

examples/drag_and_drop_example.ipynb

@@ -2,24 +2,9 @@
  "cells": [
   {
    "cell_type": "code",
-   "execution_count": 96,
+   "execution_count": null,
    "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "00466ac5fda94b54807244ade58dd848",
-       "version_major": 2,
-       "version_minor": 0
-      },
-      "text/plain": [
-       "Canvas(height=600, width=600)"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    }
-   ],
+   "outputs": [],
    "source": [
     "from ipycanvas import Canvas, hold_canvas\n",
     "\n",
@@ -120,13 +105,6 @@
     "\n",
     "canvas"
    ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": []
   }
  ],
  "metadata": {
@@ -145,7 +123,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.7.3"
+   "version": "3.8.3"
   }
  },
  "nbformat": 4,

src/widget.ts

@@ -331,28 +331,25 @@ class CanvasModel extends DOMWidgetModel {
 export
 class CanvasView extends DOMWidgetView {
   render() {
-    this.canvas = document.createElement('canvas');
-
-    this.el.appendChild(this.canvas);
-    this.ctx = getContext(this.canvas);
+    this.ctx = getContext(this.el);
 
     this.resizeCanvas();
     this.model.on_some_change(['width', 'height'], this.resizeCanvas, this);
 
-    this.canvas.addEventListener('mousemove', { handleEvent: this.onMouseMove.bind(this) });
-    this.canvas.addEventListener('mousedown', { handleEvent: this.onMouseDown.bind(this) });
-    this.canvas.addEventListener('mouseup', { handleEvent: this.onMouseUp.bind(this) });
-    this.canvas.addEventListener('mouseout', { handleEvent: this.onMouseOut.bind(this) });
-    this.canvas.addEventListener('touchstart', { handleEvent: this.onTouchStart.bind(this) });
-    this.canvas.addEventListener('touchend', { handleEvent: this.onTouchEnd.bind(this) });
-    this.canvas.addEventListener('touchmove', { handleEvent: this.onTouchMove.bind(this) });
-    this.canvas.addEventListener('touchcancel', { handleEvent: this.onTouchCancel.bind(this) });
+    this.el.addEventListener('mousemove', { handleEvent: this.onMouseMove.bind(this) });
+    this.el.addEventListener('mousedown', { handleEvent: this.onMouseDown.bind(this) });
+    this.el.addEventListener('mouseup', { handleEvent: this.onMouseUp.bind(this) });
+    this.el.addEventListener('mouseout', { handleEvent: this.onMouseOut.bind(this) });
+    this.el.addEventListener('touchstart', { handleEvent: this.onTouchStart.bind(this) });
+    this.el.addEventListener('touchend', { handleEvent: this.onTouchEnd.bind(this) });
+    this.el.addEventListener('touchmove', { handleEvent: this.onTouchMove.bind(this) });
+    this.el.addEventListener('touchcancel', { handleEvent: this.onTouchCancel.bind(this) });
 
     this.updateCanvas();
   }
 
   clear() {
-    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.ctx.clearRect(0, 0, this.el.width, this.el.height);
   }
 
   updateCanvas() {
@@ -361,8 +358,8 @@ class CanvasView extends DOMWidgetView {
   }
 
   protected resizeCanvas() {
-    this.canvas.setAttribute('width', this.model.get('width'));
-    this.canvas.setAttribute('height', this.model.get('height'));
+    this.el.setAttribute('width', this.model.get('width'));
+    this.el.setAttribute('height', this.model.get('height'));
   }
 
   private onMouseMove(event: MouseEvent) {
@@ -402,14 +399,19 @@ class CanvasView extends DOMWidgetView {
   }
 
   protected getCoordinates(event: MouseEvent | Touch) {
-    const rect = this.canvas.getBoundingClientRect();
-    const x = event.clientX - rect.left;
-    const y = event.clientY - rect.top;
+    const rect = this.el.getBoundingClientRect();
+
+    const x = this.el.width * (event.clientX - rect.left) / rect.width;
+    const y = this.el.height * (event.clientY - rect.top) / rect.height;
 
     return { x, y };
   }
 
-  canvas: HTMLCanvasElement;
+  get tagName(): string {
+    return 'canvas';
+  }
+
+  el: HTMLCanvasElement;
   ctx: CanvasRenderingContext2D;
 
   model: CanvasModel;
@@ -513,17 +515,20 @@ class MultiCanvasView extends DOMWidgetView {
     // 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;
+      const canvasContainer = document.createElement('div');
+
+      canvasContainer.style.zIndex = index.toString();
 
       if (index == 0) {
         // This will enforce the container to respect the children size.
-        canvasView.el.style.position = 'relative';
-        canvasView.el.style.float = 'left';
+        canvasContainer.style.position = 'relative';
+        canvasContainer.style.float = 'left';
       } else {
-        canvasView.el.style.position = 'absolute';
+        canvasContainer.style.position = 'absolute';
       }
 
-      this.container.appendChild(canvasView.el);
+      canvasContainer.appendChild(canvasView.el);
+      this.container.appendChild(canvasContainer);
 
       return canvasView;
     });