Add keyboard event listeners

desktop/sources/scripts/ronin.js

@@ -88,6 +88,24 @@ function Ronin () {
     this.surface.drawGuide(shape)
   }
 
+  this.onKeyPress = (e, id = 'key-press') => {
+    if (this.bindings[id]) {
+      this.bindings[id](e)
+    }
+  }
+
+  this.onKeyUp = (e, id = 'key-up') => {
+    if (this.bindings[id]) {
+      this.bindings[id](e)
+    }
+  }
+
+  this.onKeyDown = (e, id = 'key-down') => {
+    if (this.bindings[id]) {
+      this.bindings[id](e)
+    }
+  }
+
   this.onMouseMove = (e, id = 'mouse-move') => {
     const pos = { x: e.offsetX * ronin.surface.ratio, y: e.offsetY * ronin.surface.ratio }
     const shape = this.mouseShape(pos, id)

desktop/sources/scripts/surface.js

@@ -3,6 +3,7 @@ function Surface (ronin) {
   this.el.id = 'surface'
   this._guide = document.createElement('canvas')
   this._guide.id = 'guide'
+  this._guide.setAttribute('tabindex', '1'); // focus is necessary to capture keyboard events
   this.ratio = window.devicePixelRatio
   // Contexts
   this.context = this.el.getContext('2d')
@@ -17,6 +18,9 @@ function Surface (ronin) {
     this._guide.addEventListener('mouseup', ronin.onMouseUp, false)
     this._guide.addEventListener('mouseover', ronin.onMouseOver, false)
     this._guide.addEventListener('mouseout', ronin.onMouseOut, false)
+    this._guide.addEventListener('keydown', ronin.onKeyDown, false)
+    this._guide.addEventListener('keyup', ronin.onKeyUp, false)
+    this._guide.addEventListener('keypress', ronin.onKeyPress, false)
   }
 
   this.start = function () {

examples/events/on-key.lisp

@@ -0,0 +1,22 @@
+; this demo shows how to use the key events.
+;
+(clear)
+;
+(defn draw-title 
+  () 
+  (fill 
+    (text 30 80 50 "press key") "grey" 2))
+;
+(defn show-letter 
+  (e) 
+  (a
+    (clear) 
+    (draw-title)
+    (fill 
+      (text 30 170 50 (concat e:key " — " e:type)) "orange" 2)))
+;
+(draw-title)
+;
+(on "key-down" show-letter)
+(on "key-up" show-letter)
+(on "key-press" show-letter)