feat: added keyboard compatibility shim for p5.js v1.x to v2.x

README.md

@@ -7,13 +7,15 @@
 
 Even as p5.js 2.0 becomes more stable, p5.js 1.x will continue to be supported until August, 2026. Between 1.x and 2.0, there are many additions, and some breaking changes. In addition to making p5.js 2.0 available as a library, we are working on preparing several compatibility add-on libraries that would make it possible to keep using 1.x features that are no longer part of 2.0.
 
-We are working on three compatibility add-on libraries which will make these 1.x features available for 2.0:
+We are working on four compatibility add-on libraries which will make these 1.x features available for 2.0:
 
 1. [preload.js](https://github.com/processing/p5.js-compatibility/blob/main/src/preload.js)
 
 2. [shapes.js](https://github.com/processing/p5.js-compatibility/blob/main/src/shapes.js)
 
-3. [data.js](https://github.com/processing/p5.js-compatibility/blob/main/src/data.js)
+3. [events.js](https://github.com/processing/p5.js-compatibility/blob/main/src/events.js)
+
+4. [data.js](https://github.com/processing/p5.js-compatibility/blob/main/src/data.js)
 
 These add-on libraries are available in the **p5.js Editor** in the Settings > Library Management modal:
 
@@ -593,7 +595,7 @@ function draw() {
 </table>
 
 
-## ...using keyCode events:
+## ...using keyCode events (`events.js`):
 
 The sketch below works in both versions, but try to use it while quickly pressing different arrow keys - you will notice that the event handling in p5.js 2.x is smoother:
 

src/events.js

@@ -0,0 +1,78 @@
+function addEvents(p5, fn) {
+  p5.prototype.BACKSPACE = 8;
+  p5.prototype.DELETE = 46;
+  p5.prototype.ENTER = 13;
+  p5.prototype.RETURN = 13;
+  p5.prototype.TAB = 9;
+  p5.prototype.ESCAPE = 27;
+  p5.prototype.SHIFT = 16;
+  p5.prototype.CONTROL = 17;
+  p5.prototype.OPTION = 18;
+  p5.prototype.ALT = 18;
+  p5.prototype.UP_ARROW = 38;
+  p5.prototype.DOWN_ARROW = 40;
+  p5.prototype.LEFT_ARROW = 37;
+  p5.prototype.RIGHT_ARROW = 39;
+
+  const codeToKeyCode = {
+    ArrowUp: 38,
+    ArrowDown: 40,
+    ArrowLeft: 37,
+    ArrowRight: 39,
+    ShiftLeft: 16,
+    ShiftRight: 16,
+    ControlLeft: 17,
+    ControlRight: 17,
+    AltLeft: 18,
+    AltRight: 18,
+    Backspace: 8,
+    Tab: 9,
+    Enter: 13,
+    Escape: 27,
+    Delete: 46,
+  };
+
+  const pressedKeyCodes = new Set();
+  const oldOnKeyDown = fn._onkeydown;
+  const oldOnKeyUp = fn._onkeyup;
+  const oldKeyIsDown = fn.keyIsDown;
+
+  fn._onkeydown = function (e) {
+    const numericCode = e.keyCode || codeToKeyCode[e.code] || 0;
+    this.keyCode = numericCode;
+    if (numericCode !== 0) {
+      pressedKeyCodes.add(numericCode);
+    }
+
+    if (typeof oldOnKeyDown === 'function') {
+      oldOnKeyDown.call(this, e);
+    }
+  };
+
+  fn._onkeyup = function (e) {
+    const numericCode = e.keyCode || codeToKeyCode[e.code] || 0;
+    this.keyCode = numericCode;
+    if (numericCode !== 0) {
+      pressedKeyCodes.delete(numericCode);
+    }
+
+    if (typeof oldOnKeyUp === 'function') {
+      oldOnKeyUp.call(this, e);
+    }
+  };
+
+  fn.keyIsDown = function (code) {
+    if (typeof code === 'number') {
+      return pressedKeyCodes.has(code);
+    }
+
+    if (typeof oldKeyIsDown === 'function') {
+      return oldKeyIsDown.call(this, code);
+    }
+    return false;
+  };
+}
+
+if (typeof p5 !== 'undefined' && typeof p5.registerAddon === 'function') {
+  p5.registerAddon(addEvents);
+}