Enable keyboard control for 3d canvases

app/javascript/src/preview.ts

@@ -33,16 +33,16 @@ class ObjectPreview {
  window.addEventListener('resize', this.onResize.bind(this))
  this.onResize()
  // Handle interaction events
- const eventHandlers = [
-  'pointerdown',
- 'pointermove',
-  'pointerup',
-  'wheel',
-  'keydown',
- 'keyup',
-  'contextmenu'
- ]
- eventHandlers.forEach((eventName) => {
+ const pointerEvents = ['pointerdown', 'pointermove', 'pointerup']
+ pointerEvents.forEach((eventName) => {
+ this.canvas.addEventListener(eventName, this.onPointerEvent.bind(this))
+ })
+ const keyEvents = ['keydown', 'keyup']
+ keyEvents.forEach((eventName) => {
+ this.canvas.addEventListener(eventName, this.onKeyEvent.bind(this))
+ })
+ const otherEvents = ['wheel', 'contextmenu']
+ otherEvents.forEach((eventName) => {
  this.canvas.addEventListener(eventName, this.onEvent.bind(this))
  })
  // Monitor visibility
@@ -61,11 +61,29 @@ class ObjectPreview {
  }
  }
 
- onEvent (event): void {
- event.preventDefault()
+ onPointerEvent (event): void {
  if (event.type === 'pointerdown') {
+ this.canvas.focus()
  this.canvas.setPointerCapture(event.pointerId)
  }
+ this.onEvent(event)
+ }
+
+ onKeyEvent (event): void {
+ if ([
+ 'ArrowUp',
+ 'ArrowDown',
+ 'ArrowLeft',
+ 'ArrowRight',
+ 'Minus',
+ 'Equal'
+ ].includes(event.code)) {
+ this.onEvent(event)
+ }
+ }
+
+ onEvent (event): void {
+ event.preventDefault()
  this.renderer.handleEvent(event)
  }
 

app/views/application/_object_preview.html.erb

@@ -1,6 +1,6 @@
 <% if renderable?(file.extension) %>
  <div class="position-relative">
- <canvas id="preview-file-<%= file.id %>" class="object-preview position-relative" data-preview
+ <canvas id="preview-file-<%= file.id %>" class="object-preview position-relative" tabindex="0" data-preview
  data-preview-url="<%= library_model_model_file_path(library, model, file, file.extension.to_sym) %>"
  data-worker-url="<%= javascript_path "offscreen_renderer.js" %>"
  data-format="<%= file.extension %>"