@lightningjs/blits 0.4.2 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # 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_
+
+- Introduced `wordwrap` and `maxlines` attributes on the Text-component, replacing the previous `w` and `h` attributes (breaking change!)
+
 # v0.4.2
 
 _22 nov 2023_

package/boilerplate/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.4.2",
+  "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/components/Text.js

@@ -31,8 +31,8 @@ export default () =>
         letterSpacing="$letterspacing"
         stretch="$stretch"
         contain="$_contain"
-        :w="$w"
-        :h="$h"
+        :wordWrap="$wordwrap"
+        :maxLines="$maxlines"
         :textAlign="$align"
         @loaded="$@loaded"
         @error="$@error"
@@ -54,15 +54,18 @@ export default () =>
       'letterspacing',
       'stretch',
       'align',
-      'w',
-      'h',
+      'wordwrap',
+      'maxlines',
       'contain',
       '@loaded',
       '@error',
     ],
     computed: {
       _contain() {
-        return this.contain || (this.w && this.h ? 'both' : this.w ? 'width' : 'none')
+        return (
+          this.contain ||
+          (this.wordwrap && this.maxlines ? 'both' : this.wordwrap ? 'width' : 'none')
+        )
       },
     },
   })

package/src/element.js

@@ -54,6 +54,8 @@ const transformations = {
     delete props.h
     'z' in props && (props.zIndex = props.z)
     delete props.z
+    'wordWrap' in props && (props.width = props.wordWrap)
+    delete props.wordWrap
   },
   parent(props) {
     if (props.parent === 'root') {
@@ -161,6 +163,12 @@ const transformations = {
   texture(props, setProperties) {
     this.src(props, setProperties)
   },
+  maxLines(props, setProperties, element) {
+    if (props.maxLines) {
+      props.height = props.maxLines * element.node.fontSize
+    }
+    delete props.maxLines
+  },
 }
 
 const Element = {
@@ -217,7 +225,7 @@ const Element = {
 
       transformations.remap(props)
       if (transformations[prop]) {
-        transformations[prop](props, this.setProperties)
+        transformations[prop](props, this.setProperties, this)
       }
 
       Object.keys(props).forEach((prop) => {
@@ -240,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)
 
@@ -263,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),
+        }
       })
     }
   },
@@ -275,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) {