Merge pull request #249 from martinRenou/keyboard_events

Add keyboard events

Author: martinRenou

docs/source/events.rst

@@ -10,18 +10,24 @@ Those methods take a callback function as single argument, this callback functio
 
 .. code:: Python
 
+    from ipywidgets import Output
+
+    out = Output()
+
+    @out.capture()
     def handle_mouse_move(x, y):
-        # Do something
-        pass
+        print('Mouse move event:', x, y)
 
     canvas.on_mouse_move(handle_mouse_move)
 
+    @out.capture()
     def handle_mouse_down(x, y):
-        # Do something else
-        pass
+        print('Mouse down event:', x, y)
 
     canvas.on_mouse_down(handle_mouse_down)
 
+    display(out)
+
 Built-in touch events
 ---------------------
 
@@ -41,6 +47,23 @@ Those methods take a callback function as single argument, this callback functio
 .. note::
     Please open an issue or a Pull Request if you want more events to be supported by ipycanvas
 
+Keyboard events
+---------------
+
+.. code:: Python
+
+    from ipywidgets import Output
+
+    out = Output()
+
+    @out.capture()
+    def on_keyboard_event(key, shift_key, ctrl_key, meta_key):
+        print('Keyboard event:', key, shift_key, ctrl_key, meta_key)
+
+    canvas.on_key_down(on_keyboard_event)
+
+    display(out)
+
 ipyevents
 ---------
 

ipycanvas/canvas.py

@@ -531,6 +531,8 @@ class Canvas(_CanvasBase):
     _touch_move_callbacks = Instance(CallbackDispatcher, ())
     _touch_cancel_callbacks = Instance(CallbackDispatcher, ())
 
+    _key_down_callbacks = Instance(CallbackDispatcher, ())
+
     ATTRS = {
         "fill_style": 0,
         "stroke_style": 1,
@@ -1408,6 +1410,10 @@ def on_touch_cancel(self, callback, remove=False):
         """Register a callback that will be called on touch cancel."""
         self._touch_cancel_callbacks.register_callback(callback, remove=remove)
 
+    def on_key_down(self, callback, remove=False):
+        """Register a callback that will be called on keyboard event."""
+        self._key_down_callbacks.register_callback(callback, remove=remove)
+
     def __setattr__(self, name, value):
         super(Canvas, self).__setattr__(name, value)
 
@@ -1464,6 +1470,14 @@ def _handle_frontend_event(self, _, content, buffers):
                 [(touch["x"], touch["y"]) for touch in content["touches"]]
             )
 
+        if content.get("event", "") == "key_down":
+            self._key_down_callbacks(
+                content["key"],
+                content["shift_key"],
+                content["ctrl_key"],
+                content["meta_key"],
+            )
+
     def _draw_polygons_or_linesegments(
         self,
         cmd,
@@ -1636,6 +1650,10 @@ def on_touch_cancel(self, callback, remove=False):
         """Register a callback that will be called on touch cancel."""
         self._canvases[-1].on_touch_cancel(callback, remove=remove)
 
+    def on_key_down(self, callback, remove=False):
+        """Register a callback that will be called on keyboard event."""
+        self._canvases[-1].on_key_down(callback, remove=remove)
+
     def clear(self):
         """Clear the Canvas."""
         for layer in self._canvases:

package.json

@@ -30,7 +30,7 @@
     "url": "https://github.com/martinRenou/ipycanvas"
   },
   "scripts": {
-    "build": "yarn run build:lib && yarn run build:nbextension",
+    "build": "yarn run build:lib && yarn run build:nbextension && yarn run build:labextension",
     "build:lib": "tsc",
     "build:nbextension": "webpack",
     "build:labextension": "jupyter labextension build .",

src/widget.ts

@@ -1036,6 +1036,9 @@ class CanvasView extends DOMWidgetView {
     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.el.addEventListener('keydown', { handleEvent: this.onKeyDown.bind(this) });
+
+    this.el.setAttribute('tabindex', '0');
 
     this.updateCanvas();
   }
@@ -1059,6 +1062,9 @@ class CanvasView extends DOMWidgetView {
   }
 
   private onMouseDown(event: MouseEvent) {
+    // Bring focus to the canvas element, so keyboard events can be triggered
+    this.el.focus();
+
     this.model.send({ event: 'mouse_down', ...this.getCoordinates(event) }, {});
   }
 
@@ -1090,6 +1096,19 @@ class CanvasView extends DOMWidgetView {
     this.model.send({ event: 'touch_cancel', touches: touches.map(this.getCoordinates.bind(this)) }, {});
   }
 
+  private onKeyDown(event: KeyboardEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.model.send({
+      event: 'key_down',
+      key: event.key,
+      shift_key: event.shiftKey,
+      ctrl_key: event.ctrlKey,
+      meta_key: event.metaKey
+    }, {});
+  }
+
   protected getCoordinates(event: MouseEvent | Touch) {
     const rect = this.el.getBoundingClientRect();