From 426c6f563f39b1fea072947bcc537374e3ed6fb7 Mon Sep 17 00:00:00 2001
From: Almar Klein <almar@almarklein.org>
Date: Wed, 18 Mar 2026 15:33:20 +0100
Subject: [PATCH 1/2] Rename event_type -> type, pixel_ratio -> pixelratio

---
 src/renderview.js | 86 +++++++++++++++++++++++------------------------
 src/spec.md       | 28 +++++++--------
 src/tester.html   |  4 +--
 3 files changed, 59 insertions(+), 59 deletions(-)

diff --git a/src/renderview.js b/src/renderview.js
index 61b2808..3d1dc24 100644
--- a/src/renderview.js
+++ b/src/renderview.js
@@ -50,7 +50,7 @@ const MOUSE_BUTTON_MAP = {
   4: 5 // forwards
 }
 
-function getButtons (ev) {
+function getButtons(ev) {
   // Note that ev.button has a historic awkward mapping, but ev.buttons is in the order that we want
   const button = MOUSE_BUTTON_MAP[ev.button] || 0
   const buttons = []
@@ -62,17 +62,17 @@ function getButtons (ev) {
   return [button, buttons]
 }
 
-function getModifiers (ev) {
+function getModifiers(ev) {
   return Object.entries(KEY_MOD_MAP)
     .filter(([k]) => ev[k])
     .map(([, v]) => v)
 }
 
-function getTimestamp () {
+function getTimestamp() {
   return performance.now() / 1000
 }
 
-function arraysEqual (a, b) {
+function arraysEqual(a, b) {
   return a.length === b.length && a.every((val, i) => val === b[i])
 }
 
@@ -104,7 +104,7 @@ class BaseRenderView {
    * @param {HTMLElement} viewElement - The element (e.g. canvas or img) used for rendering.
    * @param {HTMLElement} wrapperElement - The wrapper element (optional; can be null).
    */
-  constructor (viewElement, wrapperElement) {
+  constructor(viewElement, wrapperElement) {
     // Check given element
     if (viewElement === undefined || !(viewElement instanceof Element)) {
       throw new Error('BaseRenderView: viewElement must be an Element.')
@@ -153,7 +153,7 @@ class BaseRenderView {
    * Close the view, disconnecting observers and clearing callbacks.
    * This does not remove the the element from the DOM; that's up to the caller.
    */
-  close () {
+  close() {
     if (this._focusElement) {
       this._focusElement.remove()
       this._focusElement = null
@@ -185,7 +185,7 @@ class BaseRenderView {
    * @param {string} width - The requested width.
    * @param {string} height - The requested height.
    */
-  setLogicalSize (width, height) {
+  setLogicalSize(width, height) {
     this.sizeElement.style.maxWidth = ''
     this.sizeElement.style.maxHeight = ''
     this.sizeElement.style.width = width + 'px'
@@ -197,7 +197,7 @@ class BaseRenderView {
    *
    * @param {string} cssWidth - The requested width as a css string, e.g. '640px' or '90%' or 'calc(100% - 10px)'.
    */
-  setCssWidth (cssWidth) {
+  setCssWidth(cssWidth) {
     this.sizeElement.style.maxWidth = ''
     this.sizeElement.style.width = cssWidth
   }
@@ -207,7 +207,7 @@ class BaseRenderView {
    *
    * @param {string} cssHeight - The requested height as a css string, e.g. '480px' or '40vh'.
    */
-  setCssHeight (cssHeight) {
+  setCssHeight(cssHeight) {
     this.sizeElement.style.maxHeight = ''
     this.sizeElement.style.height = cssHeight
   }
@@ -218,7 +218,7 @@ class BaseRenderView {
    *
    * @param {boolean} resizable - Whether to make it resizable or not.
    */
-  setResizable (resizable) {
+  setResizable(resizable) {
     if (this.wrapperElement) {
       if (resizable) {
         this.wrapperElement.classList.add('is-resizable')
@@ -234,7 +234,7 @@ class BaseRenderView {
    *
    * @param {boolean} titlebar - Whether to show the titlebar or not.
    */
-  showTitlebar (titlebar) {
+  showTitlebar(titlebar) {
     if (this.wrapperElement) {
       if (titlebar) {
         this.wrapperElement.classList.add('has-titlebar')
@@ -252,7 +252,7 @@ class BaseRenderView {
    *
    * @param {string} title - The title to set.
    */
-  setTitle (title) {
+  setTitle(title) {
     if (this.titleElement) {
       this.titleElement.innerText = title
     }
@@ -263,7 +263,7 @@ class BaseRenderView {
    *
    * @param {string} cursor - A valid string for CSS cursor.
    */
-  setCursor (cursor) {
+  setCursor(cursor) {
     this.viewElement.style.cursor = cursor
   }
 
@@ -272,7 +272,7 @@ class BaseRenderView {
    *
    * @param {number} throttle - The timeout (in ms) to wait before sending a move/wheel event.
    */
-  setThrottle (throttle) {
+  setThrottle(throttle) {
     this._wheelThrottle = throttle
     this._moveThrottle = throttle
   }
@@ -282,12 +282,12 @@ class BaseRenderView {
    *
    * @param {object} event - The event object as a 'dictionary', following the spec.
    */
-  onEvent (event) { }
+  onEvent(event) { }
 
   /**
    * Internal method to initialize the view's helper elements.
    */
-  _initElements () {
+  _initElements() {
     const signal = this._abortController.signal
 
     // Obtain container to put our hidden focus element.
@@ -353,7 +353,7 @@ class BaseRenderView {
           resizeElement.setPointerCapture(ev.pointerId)
         }
       },
-      { signal }
+        { signal }
       )
       resizeElement.addEventListener('pointermove', (ev) => {
         if (resizeInfo !== null) {
@@ -363,12 +363,12 @@ class BaseRenderView {
           this.sizeElement.style.height = resizeInfo.h + (ev.clientY - resizeInfo.y) + 'px'
         }
       },
-      { signal }
+        { signal }
       )
       resizeElement.addEventListener('lostpointercapture', (ev) => {
         resizeInfo = null
       },
-      { signal }
+        { signal }
       )
     } // wrapperElement !== null
   }
@@ -376,7 +376,7 @@ class BaseRenderView {
   /**
    * Internal method to setup listeners and register callbacks.
    */
-  _registerEvents () {
+  _registerEvents() {
     // Register events
 
     const viewElement = this.viewElement
@@ -394,7 +394,7 @@ class BaseRenderView {
       if (isVisible !== this._isVisible) {
         this._isVisible = isVisible
         const event = {
-          event_type: isVisible ? 'show' : 'hide',
+          type: isVisible ? 'show' : 'hide',
           t: getTimestamp()
         }
         this.onEvent(event)
@@ -456,12 +456,12 @@ class BaseRenderView {
       this._lsize = [logicalWidth, logicalHeight]
 
       const event = {
-        event_type: 'resize',
+        type: 'resize',
         width: logicalWidth,
         height: logicalHeight,
         pwidth: physicalWidth,
         pheight: physicalHeight,
-        pixel_ratio: ratio,
+        pixelratio: ratio,
         timestamp: getTimestamp()
       }
       this.onEvent(event)
@@ -501,7 +501,7 @@ class BaseRenderView {
       lastButtons = buttons
 
       const event = {
-        event_type: 'pointer_down',
+        type: 'pointer_down',
         x: ev.offsetX,
         y: ev.offsetY,
         button,
@@ -513,7 +513,7 @@ class BaseRenderView {
       }
       this.onEvent(event)
     },
-    { signal }
+      { signal }
     )
 
     let pendingMoveEvent = null
@@ -552,7 +552,7 @@ class BaseRenderView {
         pendingMoveEvent.y = ev.offsetY
       } else {
         const event = {
-          event_type: 'pointer_move',
+          type: 'pointer_move',
           x: ev.offsetX,
           y: ev.offsetY,
           button,
@@ -571,7 +571,7 @@ class BaseRenderView {
         }
       }
     },
-    { signal }
+      { signal }
     )
 
     viewElement.addEventListener('lostpointercapture', (ev) => {
@@ -587,7 +587,7 @@ class BaseRenderView {
       lastButtons = buttons
 
       const event = {
-        event_type: 'pointer_up',
+        type: 'pointer_up',
         x: ev.offsetX,
         y: ev.offsetY,
         button,
@@ -599,7 +599,7 @@ class BaseRenderView {
       }
       this.onEvent(event)
     },
-    { signal }
+      { signal }
     )
 
     viewElement.addEventListener('pointerenter', (ev) => {
@@ -616,7 +616,7 @@ class BaseRenderView {
       button = 0
 
       const event = {
-        event_type: 'pointer_enter',
+        type: 'pointer_enter',
         x: ev.offsetX,
         y: ev.offsetY,
         button,
@@ -628,7 +628,7 @@ class BaseRenderView {
       }
       this.onEvent(event)
     },
-    { signal }
+      { signal }
     )
 
     viewElement.addEventListener('pointerleave', (ev) => {
@@ -645,7 +645,7 @@ class BaseRenderView {
       button = 0
 
       const event = {
-        event_type: 'pointer_leave',
+        type: 'pointer_leave',
         x: ev.offsetX,
         y: ev.offsetY,
         button,
@@ -657,7 +657,7 @@ class BaseRenderView {
       }
       this.onEvent(event)
     },
-    { signal }
+      { signal }
     )
 
     // ----- click ---------------
@@ -675,7 +675,7 @@ class BaseRenderView {
       const modifiers = getModifiers(ev)
 
       const event = {
-        event_type: 'double_click',
+        type: 'double_click',
         x: ev.offsetX,
         y: ev.offsetY,
         button,
@@ -686,7 +686,7 @@ class BaseRenderView {
       }
       this.onEvent(event)
     },
-    { signal }
+      { signal }
     )
 
     // ----- wheel ---------------
@@ -729,7 +729,7 @@ class BaseRenderView {
         pendingWheelEvent.dy += ev.deltaY * scale
       } else {
         const event = {
-          event_type: 'wheel',
+          type: 'wheel',
           x: ev.offsetX,
           y: ev.offsetY,
           dx: ev.deltaX * scale,
@@ -747,7 +747,7 @@ class BaseRenderView {
         }
       }
     },
-    { signal }
+      { signal }
     )
 
     // ----- key ---------------
@@ -766,14 +766,14 @@ class BaseRenderView {
       const modifiers = getModifiers(ev)
 
       const event = {
-        event_type: 'key_down',
+        type: 'key_down',
         key: KEY_MAP[ev.key] || ev.key,
         modifiers,
         timestamp: getTimestamp()
       }
       this.onEvent(event)
     },
-    { signal }
+      { signal }
     )
 
     this._focusElement.addEventListener('keyup', (ev) => {
@@ -784,14 +784,14 @@ class BaseRenderView {
       const modifiers = getModifiers(ev)
 
       const event = {
-        event_type: 'key_up',
+        type: 'key_up',
         key: KEY_MAP[ev.key] || ev.key,
         modifiers,
         timestamp: getTimestamp()
       }
       this.onEvent(event)
     },
-    { signal }
+      { signal }
     )
 
     this._focusElement.addEventListener('input', (ev) => {
@@ -805,7 +805,7 @@ class BaseRenderView {
       }
 
       const event = {
-        event_type: 'char',
+        type: 'char',
         data: ev.data,
         is_composing: ev.isComposing,
         input_type: ev.inputType,
@@ -814,7 +814,7 @@ class BaseRenderView {
       }
       this.onEvent(event)
     },
-    { signal }
+      { signal }
     )
   }
 }
diff --git a/src/spec.md b/src/spec.md
index e014db7..52ad3ef 100644
--- a/src/spec.md
+++ b/src/spec.md
@@ -65,12 +65,12 @@ This event is emitted when the canvas changes size.
 
 Fields:
 
-* `event_type`: 'resize'
+* `type`: 'resize'
 * `width`: The width in logical pixels.
 * `height`: The height in logical pixels.
 * `pwidth`: The width in physical pixels.
 * `pheight`: The height in physical pixels.
-* `pixel_ratio`: The pixel ratio between logical and physical pixels.
+* `pixelratio`: The pixel ratio between logical and physical pixels.
 * `timestamp`: A timestamp in seconds.
 
 
@@ -80,7 +80,7 @@ This event is emitted when the canvas is closed (i.e. destroyed).
 
 Fields:
 
-* `event_type`: 'close'
+* `type`: 'close'
 * `timestamp`: A timestamp in seconds.
 
 
@@ -92,7 +92,7 @@ shown. If this is not the case, the implementation should emit a 'hide' event.
 
 Fields:
 
-* `event_type`: 'show'
+* `type`: 'show'
 * `timestamp`: A timestamp in seconds.
 
 
@@ -102,7 +102,7 @@ This event is emitted when the canvas is hidden. It can e.g. be minimized or scr
 
 Fields:
 
-* `event_type`: 'hide'
+* `type`: 'hide'
 * `timestamp`: A timestamp in seconds.
 
 
@@ -112,7 +112,7 @@ This event is emitted when the user interacts with mouse, touch or other pointer
 
 Fields:
 
-* `event_type`: 'pointer_down'
+* `type`: 'pointer_down'
 * `x`: The horizontal position of the pointer within the canvas.
 * `y`: The vertical position of the pointer within the canvas.
 * `button`: The button to which this event applies.
@@ -139,7 +139,7 @@ This event is emitted when the user releases a pointer.
 
 Fields:
 
-* `event_type`: 'pointer_up'
+* `type`: 'pointer_up'
 * ... the other fields are the same as the pointer_down event.
 
 
@@ -151,7 +151,7 @@ In remote contexts it is recommended to throttle this event to avoid spamming th
 
 Fields:
 
-* `event_type`: 'pointer_move'
+* `type`: 'pointer_move'
 * ... the other fields are the same as the pointer_down event.
 
 
@@ -161,7 +161,7 @@ This event is emitted when the user moves a pointer into the boundary of the can
 
 Fields:
 
-* `event_type`: 'pointer_enter'
+* `type`: 'pointer_enter'
 * `timestamp`: A timestamp in seconds.
 
 
@@ -171,7 +171,7 @@ This event is emitted when the user moves a pointer out of the boundary of the c
 
 Fields:
 
-* `event_type`: 'pointer_enter'
+* `type`: 'pointer_enter'
 * `timestamp`: A timestamp in seconds.
 
 
@@ -181,7 +181,7 @@ This event is emitted on a double-click.
 
 Fields:
 
-* `event_type`: 'pointer_down'
+* `type`: 'pointer_down'
 * `x`: The horizontal position of the pointer within the canvas.
 * `y`: The vertical position of the pointer within the canvas.
 * `button`: The button to which this event applies.
@@ -198,7 +198,7 @@ In remote contexts it is recommended to throttle this event to avoid spamming th
 
 Fields:
 
-* `event_type`: 'wheel'
+* `type`: 'wheel'
 * `dx`: The horizontal scroll delta (positive means scroll right).
 * `dy`: The vertical scroll delta (positive means scroll down or zoom out).
 * `x`: The mouse horizontal position during the scroll.
@@ -227,7 +227,7 @@ This event is emitted when a key is pressed down.
 
 Fields:
 
-* `event_type`: 'key_down'
+* `type`: 'key_down'
 * `key`: The key being pressed as a string.
 * `modifiers`: A tuple of modifier keys being pressed down.
 * `timestamp`: A timestamp in seconds.
@@ -244,7 +244,7 @@ The key names follow the [browser spec](https://developer.mozilla.org/en-US/docs
 
 This event is emitted when a key is released.
 
-* `event_type`: 'key_up'
+* `type`: 'key_up'
 * `key`: The key being released as a string.
 * `modifiers`: A tuple of modifier keys being pressed down.
 * `timestamp`: A timestamp in seconds.
diff --git a/src/tester.html b/src/tester.html
index 7e940ad..4feaa22 100644
--- a/src/tester.html
+++ b/src/tester.html
@@ -31,14 +31,14 @@
                 const events = this._events
                 this._eventCount += 1
 
-                if (events.length > 0 && events[0].event_type == event.event_type) {
+                if (events.length > 0 && events[0].type == event.type) {
                     events[0] = event
                 } else {
                     events.unshift(event)
                     this._events = this._events.slice(0, 32)
                 }
 
-                if (event.event_type == 'resize') {
+                if (event.type == 'resize') {
                     this.viewElement.width = event.pwidth
                     this.viewElement.height = event.pheight
                 }

From 19ac437adcd2504eb2c615a1cf8cddf8a9ad3499 Mon Sep 17 00:00:00 2001
From: Almar Klein <almar@almarklein.org>
Date: Wed, 18 Mar 2026 15:33:50 +0100
Subject: [PATCH 2/2] standard

---
 src/renderview.js | 60 +++++++++++++++++++++++------------------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/renderview.js b/src/renderview.js
index 3d1dc24..c90e18e 100644
--- a/src/renderview.js
+++ b/src/renderview.js
@@ -50,7 +50,7 @@ const MOUSE_BUTTON_MAP = {
   4: 5 // forwards
 }
 
-function getButtons(ev) {
+function getButtons (ev) {
   // Note that ev.button has a historic awkward mapping, but ev.buttons is in the order that we want
   const button = MOUSE_BUTTON_MAP[ev.button] || 0
   const buttons = []
@@ -62,17 +62,17 @@ function getButtons(ev) {
   return [button, buttons]
 }
 
-function getModifiers(ev) {
+function getModifiers (ev) {
   return Object.entries(KEY_MOD_MAP)
     .filter(([k]) => ev[k])
     .map(([, v]) => v)
 }
 
-function getTimestamp() {
+function getTimestamp () {
   return performance.now() / 1000
 }
 
-function arraysEqual(a, b) {
+function arraysEqual (a, b) {
   return a.length === b.length && a.every((val, i) => val === b[i])
 }
 
@@ -104,7 +104,7 @@ class BaseRenderView {
    * @param {HTMLElement} viewElement - The element (e.g. canvas or img) used for rendering.
    * @param {HTMLElement} wrapperElement - The wrapper element (optional; can be null).
    */
-  constructor(viewElement, wrapperElement) {
+  constructor (viewElement, wrapperElement) {
     // Check given element
     if (viewElement === undefined || !(viewElement instanceof Element)) {
       throw new Error('BaseRenderView: viewElement must be an Element.')
@@ -153,7 +153,7 @@ class BaseRenderView {
    * Close the view, disconnecting observers and clearing callbacks.
    * This does not remove the the element from the DOM; that's up to the caller.
    */
-  close() {
+  close () {
     if (this._focusElement) {
       this._focusElement.remove()
       this._focusElement = null
@@ -185,7 +185,7 @@ class BaseRenderView {
    * @param {string} width - The requested width.
    * @param {string} height - The requested height.
    */
-  setLogicalSize(width, height) {
+  setLogicalSize (width, height) {
     this.sizeElement.style.maxWidth = ''
     this.sizeElement.style.maxHeight = ''
     this.sizeElement.style.width = width + 'px'
@@ -197,7 +197,7 @@ class BaseRenderView {
    *
    * @param {string} cssWidth - The requested width as a css string, e.g. '640px' or '90%' or 'calc(100% - 10px)'.
    */
-  setCssWidth(cssWidth) {
+  setCssWidth (cssWidth) {
     this.sizeElement.style.maxWidth = ''
     this.sizeElement.style.width = cssWidth
   }
@@ -207,7 +207,7 @@ class BaseRenderView {
    *
    * @param {string} cssHeight - The requested height as a css string, e.g. '480px' or '40vh'.
    */
-  setCssHeight(cssHeight) {
+  setCssHeight (cssHeight) {
     this.sizeElement.style.maxHeight = ''
     this.sizeElement.style.height = cssHeight
   }
@@ -218,7 +218,7 @@ class BaseRenderView {
    *
    * @param {boolean} resizable - Whether to make it resizable or not.
    */
-  setResizable(resizable) {
+  setResizable (resizable) {
     if (this.wrapperElement) {
       if (resizable) {
         this.wrapperElement.classList.add('is-resizable')
@@ -234,7 +234,7 @@ class BaseRenderView {
    *
    * @param {boolean} titlebar - Whether to show the titlebar or not.
    */
-  showTitlebar(titlebar) {
+  showTitlebar (titlebar) {
     if (this.wrapperElement) {
       if (titlebar) {
         this.wrapperElement.classList.add('has-titlebar')
@@ -252,7 +252,7 @@ class BaseRenderView {
    *
    * @param {string} title - The title to set.
    */
-  setTitle(title) {
+  setTitle (title) {
     if (this.titleElement) {
       this.titleElement.innerText = title
     }
@@ -263,7 +263,7 @@ class BaseRenderView {
    *
    * @param {string} cursor - A valid string for CSS cursor.
    */
-  setCursor(cursor) {
+  setCursor (cursor) {
     this.viewElement.style.cursor = cursor
   }
 
@@ -272,7 +272,7 @@ class BaseRenderView {
    *
    * @param {number} throttle - The timeout (in ms) to wait before sending a move/wheel event.
    */
-  setThrottle(throttle) {
+  setThrottle (throttle) {
     this._wheelThrottle = throttle
     this._moveThrottle = throttle
   }
@@ -282,12 +282,12 @@ class BaseRenderView {
    *
    * @param {object} event - The event object as a 'dictionary', following the spec.
    */
-  onEvent(event) { }
+  onEvent (event) { }
 
   /**
    * Internal method to initialize the view's helper elements.
    */
-  _initElements() {
+  _initElements () {
     const signal = this._abortController.signal
 
     // Obtain container to put our hidden focus element.
@@ -353,7 +353,7 @@ class BaseRenderView {
           resizeElement.setPointerCapture(ev.pointerId)
         }
       },
-        { signal }
+      { signal }
       )
       resizeElement.addEventListener('pointermove', (ev) => {
         if (resizeInfo !== null) {
@@ -363,12 +363,12 @@ class BaseRenderView {
           this.sizeElement.style.height = resizeInfo.h + (ev.clientY - resizeInfo.y) + 'px'
         }
       },
-        { signal }
+      { signal }
       )
       resizeElement.addEventListener('lostpointercapture', (ev) => {
         resizeInfo = null
       },
-        { signal }
+      { signal }
       )
     } // wrapperElement !== null
   }
@@ -376,7 +376,7 @@ class BaseRenderView {
   /**
    * Internal method to setup listeners and register callbacks.
    */
-  _registerEvents() {
+  _registerEvents () {
     // Register events
 
     const viewElement = this.viewElement
@@ -513,7 +513,7 @@ class BaseRenderView {
       }
       this.onEvent(event)
     },
-      { signal }
+    { signal }
     )
 
     let pendingMoveEvent = null
@@ -571,7 +571,7 @@ class BaseRenderView {
         }
       }
     },
-      { signal }
+    { signal }
     )
 
     viewElement.addEventListener('lostpointercapture', (ev) => {
@@ -599,7 +599,7 @@ class BaseRenderView {
       }
       this.onEvent(event)
     },
-      { signal }
+    { signal }
     )
 
     viewElement.addEventListener('pointerenter', (ev) => {
@@ -628,7 +628,7 @@ class BaseRenderView {
       }
       this.onEvent(event)
     },
-      { signal }
+    { signal }
     )
 
     viewElement.addEventListener('pointerleave', (ev) => {
@@ -657,7 +657,7 @@ class BaseRenderView {
       }
       this.onEvent(event)
     },
-      { signal }
+    { signal }
     )
 
     // ----- click ---------------
@@ -686,7 +686,7 @@ class BaseRenderView {
       }
       this.onEvent(event)
     },
-      { signal }
+    { signal }
     )
 
     // ----- wheel ---------------
@@ -747,7 +747,7 @@ class BaseRenderView {
         }
       }
     },
-      { signal }
+    { signal }
     )
 
     // ----- key ---------------
@@ -773,7 +773,7 @@ class BaseRenderView {
       }
       this.onEvent(event)
     },
-      { signal }
+    { signal }
     )
 
     this._focusElement.addEventListener('keyup', (ev) => {
@@ -791,7 +791,7 @@ class BaseRenderView {
       }
       this.onEvent(event)
     },
-      { signal }
+    { signal }
     )
 
     this._focusElement.addEventListener('input', (ev) => {
@@ -814,7 +814,7 @@ class BaseRenderView {
       }
       this.onEvent(event)
     },
-      { signal }
+    { signal }
     )
   }
 }