@lightningjs/blits 0.5.0 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+# v0.5.1
+
+_29 nov 2023_
+
+- Fixed issue with unexpected unfocus
+- Added fastforward of transitions on the same property
+- Added functionality to skip focus change on key hold
+
 # v0.5.0
 
 _23 nov 2023_

package/boilerplate/package.json

@@ -31,6 +31,6 @@
     "vite": "^4.0.4"
   },
   "dependencies": {
-    "@lightningjs/blits": "^0.5.0"
+    "@lightningjs/blits": "^0.5.1"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.cjs",
   "exports": {

package/src/application.js

@@ -43,21 +43,34 @@ const Application = (config) => {
 
   config.hooks = config.hooks || {}
 
-  let handler
+  let keyDownHandler
+  let keyUpHandler
+  let holdTimeout
 
   config.hooks[symbols.destroy] = function () {
-    document.removeEventListener('keydown', handler)
+    document.removeEventListener('keydown', keyDownHandler)
+    document.removeEventListener('keyup', keyUpHandler)
   }
 
   config.hooks[symbols.init] = function () {
     const keyMap = { ...defaultKeyMap, ...Settings.get('keymap', {}) }
 
-    handler = (e) => {
+    keyDownHandler = (e) => {
       const key = keyMap[e.key] || keyMap[e.keyCode] || e.key || e.keyCode
       Focus.input(key, e)
+      clearTimeout(holdTimeout)
+      holdTimeout = setTimeout(() => {
+        Focus.hold = true
+      }, 50)
     }
 
-    document.addEventListener('keydown', handler)
+    keyUpHandler = () => {
+      clearTimeout(holdTimeout)
+      Focus.hold = false
+    }
+
+    document.addEventListener('keydown', keyDownHandler)
+    document.addEventListener('keyup', keyUpHandler)
 
     // next tick
     setTimeout(() => Focus.set(this))

package/src/element.js

@@ -248,6 +248,15 @@ const Element = {
     return this.initData.ref || null
   },
   animate(prop, value) {
+    if (this.scheduledTransitions[prop]) {
+      clearTimeout(this.scheduledTransitions[prop].timeout)
+      if (this.scheduledTransitions[prop].f.state === 'running') {
+        this.scheduledTransitions[prop].f.pause()
+        // fastforward to final value
+        this.node[prop] = this.scheduledTransitions[prop].v
+      }
+    }
+
     const props = {}
     props[prop] = transformations.unpackTransition(value)
 
@@ -271,9 +280,16 @@ const Element = {
           typeof value === 'object' ? ('function' in value ? value.function : 'ease') : 'ease',
       })
       return new Promise((resolve) => {
-        value.delay
-          ? setTimeout(() => f.start().waitUntilStopped().then(resolve), value.delay)
-          : f.start().waitUntilStopped().then(resolve)
+        this.scheduledTransitions[prop] = {
+          v: props[prop],
+          f,
+          timeout: setTimeout(() => {
+            f.start()
+              .waitUntilStopped()
+              .then(() => delete this.scheduledTransitions[prop])
+              .then(resolve)
+          }, value.delay || 0),
+        }
       })
     }
   },
@@ -283,6 +299,7 @@ export default (config) =>
   Object.assign(Object.create(Element), {
     node: null,
     setProperties: [],
+    scheduledTransitions: {},
     initData: {},
     config,
   })

package/src/focus.js

@@ -19,33 +19,46 @@ import symbols from './lib/symbols.js'
 import { navigating } from './router/router.js'
 
 let focusedComponent = null
+let focusChain = []
+let setFocusTimeout
 
 export default {
+  _hold: false,
+  set hold(v) {
+    this._hold = v
+  },
+  get hold() {
+    return this._hold
+  },
   get() {
     return focusedComponent
   },
   set(component, event) {
+    clearTimeout(setFocusTimeout)
+    focusedComponent && focusedComponent.unfocus()
+    focusChain.reverse().forEach((cmp) => cmp.unfocus())
     if (component !== focusedComponent) {
-      if (focusedComponent && focusedComponent !== component.parent) {
-        focusedComponent.unfocus()
-      }
-      focusedComponent = component
-      focusedComponent.lifecycle.state = 'focus'
-      if (event instanceof KeyboardEvent) {
-        document.dispatchEvent(new KeyboardEvent('keydown', event))
-      }
+      setFocusTimeout = setTimeout(
+        () => {
+          focusedComponent = component
+          focusedComponent.lifecycle.state = 'focus'
+          if (event instanceof KeyboardEvent) {
+            document.dispatchEvent(new KeyboardEvent('keydown', event))
+          } else {
+            focusChain = []
+          }
+        },
+        // todo: make the hold timeout configurable?
+        this.hold ? 50 : 0
+      )
     }
   },
   input(key, event) {
     if (navigating === true) return
-    const focusChain = walkChain([focusedComponent], key)
+    focusChain = walkChain([focusedComponent], key)
     const componentWithInputEvent = focusChain.shift()
 
     if (componentWithInputEvent) {
-      if (componentWithInputEvent !== focusedComponent) {
-        focusChain.reverse().forEach((component) => component.unfocus())
-        componentWithInputEvent.focus()
-      }
       if (componentWithInputEvent[symbols.inputEvents][key]) {
         componentWithInputEvent[symbols.inputEvents][key].call(componentWithInputEvent, event)
       } else if (componentWithInputEvent[symbols.inputEvents].any) {