@lightningjs/blits 1.4.3 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## v1.5.0
+
+_1 oct 2024_
+
+- Fixed issue with interupting running / scheduled transitions with a new transition on the same prop
+- Fixed issue with (incompatible) SDF text renderer being loaded when `renderMode` is set to convas
+- Added support for handling key release (i.e `keyup`) events
+
 ## v1.4.3
 
 _26 sept 2024_

package/docs/components/user_input.md

@@ -1,7 +1,6 @@
 # Handling User Input
 
-In order to allow users to interact with your app, you will want to capture and handle _user input_. If you are developing a TV based app this will
-often be key input via a remote control.
+In order to allow users to interact with your app, you will want to capture and handle _user input_. If you are developing a TV based app this will often be key input via a remote control.
 
 Blits offers an intuitive and straightforward interface to handle key input in Components.
 
@@ -73,6 +72,53 @@ When a component handles a key press by having a corresponding function specifie
 }
 ```
 
+## Key-up handling
+
+The functions specified in the `input` configuration are invoked when a key is _pressed down_ (i.e. the `keydown` event listener). But sometimes you may also want to execute some logic when a key is _released_ (i.e. the `keyup` event listener).
+
+Instead of introducing a separate key on the Component configuration object for key release callbacks, Blits relies on the concept that a `keyup` event is always preceeded by a `keydown` event.
+
+Following this logic, whenever you return a function in an input (key down) handler, this function will be executed upon release (i.e. the `keyup` event) of that key .
+
+When an input key is being a hold down, it will execute the key down handler multipe times. Upon key release, only the last returned key up callback function will be executed.
+
+
+```javascript
+Blits.Component('MyComponemnt', {
+  //
+  input: {
+    enter() {
+      // execute logic on key down
+      this.pressedEnter = true
+      return () => {
+        // execute logic on key up
+        this.pressedEnter = false
+      }
+    },
+    space(e) {
+      // not logic on key down
+      return () => {
+        // only execute logic on key up
+        console.log('Space key released')
+      }
+    },
+    left() {
+      // some logic on key down here ..
+      this.leftHold = true
+      // return a reference to a Component method
+      // (instead of creating a new function on the fly)
+      return this.leftKeyUp
+    }
+  },
+  methods: {
+    leftKeyUp() {
+      console.log('Left key up')
+      this.leftHold = false
+    }
+  }
+}
+```
+
 ## Custom Keycode mapping
 
 Blits comes with a default keycode mapping. This mapping is a sensible default that works in your desktop browser and with most RDK based devices.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@lightningjs/msdf-generator": "^1.0.2",
-    "@lightningjs/renderer": "^2.2.0",
+    "@lightningjs/renderer": "^2.3.0",
     "execa": "^8.0.1",
     "kolorist": "^1.8.0",
     "ora": "^7.0.1",

package/src/application.js

@@ -16,7 +16,7 @@
  */
 
 import Component from './component.js'
-import Focus from './focus.js'
+import { default as Focus, keyUpCallbacks } from './focus.js'
 import Settings from './settings.js'
 
 import symbols from './lib/symbols.js'
@@ -65,7 +65,12 @@ const Application = (config) => {
       }, Settings.get('holdTimeout', DEFAULT_HOLD_TIMEOUT_MS))
     }
 
-    keyUpHandler = () => {
+    keyUpHandler = (e) => {
+      const cb = keyUpCallbacks.get(e.code)
+      if (cb !== undefined && typeof cb === 'function') {
+        keyUpCallbacks.delete(e.code)
+        cb()
+      }
       clearTimeout(holdTimeout)
       Focus.hold = false
     }

package/src/engines/L3/element.js

@@ -344,16 +344,17 @@ const Element = {
     // }
   },
   animate(prop, value, transition) {
+    // check if a transition is already scheduled to run on the same prop
+    // and cancels it if it does
+    if (
+      this.scheduledTransitions[prop] !== undefined &&
+      this.scheduledTransitions[prop].f.state === 'scheduled'
+    ) {
+      this.scheduledTransitions[prop].f.stop()
+    }
+
     // if current value is the same as the value to animate to, instantly resolve
     if (this.node[prop] === value) return
-    // check if a transition is already scheduled or running on the same prop
-    if (this.scheduledTransitions[prop]) {
-      if (this.scheduledTransitions[prop].f.state === 'running') {
-        // fastforward to final value
-        this.node[prop] = this.scheduledTransitions[prop].v
-        // this.scheduledTransitions[prop].f.stop()
-      }
-    }
 
     const props = {}
     props[prop] = value
@@ -382,7 +383,6 @@ const Element = {
     // removed if another transition for the same prop starts in the mean time
     this.scheduledTransitions[prop] = {
       v: props[prop],
-      cancel: false,
       f,
     }
 
@@ -395,7 +395,7 @@ const Element = {
 
     f.once('stopped', () => {
       // remove the prop from scheduled transitions
-      this.scheduledTransitions[prop] = null
+      this.scheduledTransitions[prop] = undefined
       // fire transition end callback when animation ends (if specified)
       if (transition.end && typeof transition.end === 'function') {
         transition.end.call(this.component, this, prop, this.node[prop])

package/src/engines/L3/launch.js

@@ -35,6 +35,13 @@ const renderEngine = (settings) => {
   if (renderMode === 'canvas') return CanvasCoreRenderer
 }
 
+const textRenderEngines = (settings) => {
+  const renderMode = 'renderMode' in settings ? settings.renderMode : 'webgl'
+
+  if (renderMode === 'webgl') return [SdfTextRenderer, CanvasTextRenderer]
+  if (renderMode === 'canvas') return [CanvasTextRenderer]
+}
+
 export default (App, target, settings = {}) => {
   renderer = new RendererMain(
     {
@@ -57,7 +64,7 @@ export default (App, target, settings = {}) => {
       txMemByteThreshold:
         'gpuMemoryLimit' in settings ? settings.gpuMemoryLimit * 1024 * 1024 : 200 * 1024 * 1024,
       renderEngine: renderEngine(settings),
-      fontEngines: [SdfTextRenderer, CanvasTextRenderer],
+      fontEngines: textRenderEngines(settings),
     },
     target
   )

package/src/focus.js

@@ -24,6 +24,8 @@ let focusedComponent = null
 let focusChain = []
 let setFocusTimeout
 
+export const keyUpCallbacks = new Map()
+
 export default {
   _hold: false,
   set hold(v) {
@@ -60,10 +62,14 @@ export default {
     const componentWithInputEvent = focusChain.shift()
 
     if (componentWithInputEvent) {
+      let cb
       if (componentWithInputEvent[symbols.inputEvents][key]) {
-        componentWithInputEvent[symbols.inputEvents][key].call(componentWithInputEvent, event)
+        cb = componentWithInputEvent[symbols.inputEvents][key].call(componentWithInputEvent, event)
       } else if (componentWithInputEvent[symbols.inputEvents].any) {
-        componentWithInputEvent[symbols.inputEvents].any.call(componentWithInputEvent, event)
+        cb = componentWithInputEvent[symbols.inputEvents].any.call(componentWithInputEvent, event)
+      }
+      if (cb !== undefined) {
+        keyUpCallbacks.set(event.code, cb)
       }
     }
   },