@lightningjs/blits 1.9.2 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## v1.10.0
+
+_8 nov 2024_
+
+- Fixed issue with back button not bubbling to App component after last page in router history is popped
+- Added `align-items` attribute to Layout component
+- Fixed issue with watching nested state variables and global state
+- Upgraded to renderer 2.6.2
+- Fixed issue with white background for Elements with falsy src attribute
+- Fixed issue with calling focus on component that already is focussed
+
+
 ## v1.9.2
 
 _5 nov 2024_

package/docs/built-in/layout.md

@@ -37,6 +37,14 @@ In order to align vertically use `<Layout direction="vertical"></Layout>`. And u
 
 By default the Layout-component places each Element directly besides (or below) the previous one. By adding the `gap`-attribute you can control how much space will be added between each Element or Component. The `gap`-attribute accepts a number in pixels.
 
+### Aligning items
+
+The layout component positions its children based on the provided direction (`horizontal` or `vertical`). With the `align-items`-attribute you can specify how to align the children on the opposite axis:
+
+- `start` (the default value) - aligns the children in the _top_ for horizontal layouts, and on the _left_ for vertical layouts
+- `center` - align the children in the center
+- `end` - aligns the children in the _bottom_ for horizontal layouts, and on the _right_ for vertical layouts
+
 ### Dynamic dimensions
 
 For the Layout component to work properly, the direct children all need to have dimensions (i.e `w` and `h` attributes). The exception here being Text elements.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.9.2",
+  "version": "1.10.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@lightningjs/msdf-generator": "^1.1.0",
-    "@lightningjs/renderer": "^2.6.0"
+    "@lightningjs/renderer": "^2.6.2"
   },
   "repository": {
     "type": "git",

package/src/component.js

@@ -176,6 +176,7 @@ const Component = (name = required('name'), config = required('config')) => {
       for (let i = 0; i < watcherkeysLength; i++) {
         let target = this
         let key = watcherkeys[i]
+        const watchKey = key
         // when dot notation used, find the nested target
         if (key.indexOf('.') > -1) {
           const keys = key.split('.')
@@ -190,7 +191,7 @@ const Component = (name = required('name'), config = required('config')) => {
         effect((force = false) => {
           const newValue = target[key]
           if (old !== newValue || force === true) {
-            this[symbols.watchers][key].apply(this, [newValue, old])
+            this[symbols.watchers][watchKey].apply(this, [newValue, old])
             old = newValue
           }
         })

package/src/components/RouterView.js

@@ -60,8 +60,11 @@ export default () =>
       },
     },
     input: {
-      back() {
-        Router.back()
+      back(e) {
+        const navigating = Router.back()
+        if (navigating === false) {
+          this.parent.$focus(e)
+        }
       },
     },
   })

package/src/components/RouterView.orig.js

@@ -44,8 +44,11 @@ export default () =>
       },
     },
     input: {
-      back() {
-        Router.back()
+      back(e) {
+        const navigating = Router.back()
+        if (navigating === false) {
+          this.parent.$focus(e)
+        }
       },
     },
   })

package/src/engines/L3/element.js

@@ -24,9 +24,11 @@ import Settings from '../../settings.js'
 
 const layoutFn = function (config) {
   let offset = 0
-  const xy = config.direction === 'vertical' ? 'y' : 'x'
-  const wh = config.direction === 'vertical' ? 'height' : 'width'
-  const opositeWh = config.direction === 'vertical' ? 'width' : 'height'
+  const position = config.direction === 'vertical' ? 'y' : 'x'
+  const oppositePosition = config.direction === 'vertical' ? 'x' : 'y'
+  const oppositeMount = config.direction === 'vertical' ? 'mountX' : 'mountY'
+  const dimension = config.direction === 'vertical' ? 'height' : 'width'
+  const oppositeDimension = config.direction === 'vertical' ? 'width' : 'height'
 
   const children = this.children
   const childrenLength = children.length
@@ -34,11 +36,11 @@ const layoutFn = function (config) {
   const gap = config.gap || 0
   for (let i = 0; i < childrenLength; i++) {
     const node = children[i]
-    node[xy] = offset
+    node[position] = offset
     // todo: temporary text check, due to 1px width of empty text node
-    if (wh === 'width') {
+    if (dimension === 'width') {
       offset += node.width + (node.width !== ('text' in node ? 1 : 0) ? gap : 0)
-    } else if (wh === 'height') {
+    } else if (dimension === 'height') {
       offset +=
         'text' in node
           ? node.width > 1
@@ -48,11 +50,25 @@ const layoutFn = function (config) {
           ? node.height + gap
           : 0
     }
-    otherDimension = Math.max(otherDimension, node[opositeWh])
+    otherDimension = Math.max(otherDimension, node[oppositeDimension])
   }
   // adjust the size of the layout container
-  this[wh] = offset - gap
-  this[opositeWh] = otherDimension
+  this[dimension] = offset - gap
+  this[oppositeDimension] = otherDimension
+
+  const align = {
+    start: 0,
+    end: 1,
+    center: 0.5,
+  }[config['align-items'] || 'start']
+
+  if (align !== 0) {
+    for (let i = 0; i < childrenLength; i++) {
+      const node = children[i]
+      node[oppositePosition] = otherDimension
+      node[oppositeMount] = align
+    }
+  }
 }
 
 const isTransition = (value) => {
@@ -146,7 +162,7 @@ const propsTransformer = {
   set src(v) {
     this.props['src'] = v
     if (this.raw['color'] === undefined) {
-      this.props['color'] = 0xffffffff
+      this.props['color'] = this.props['src'] ? 0xffffffff : 0x00000000
     }
   },
   set texture(v) {
@@ -225,7 +241,15 @@ const propsTransformer = {
     }
   },
   set show(v) {
-    this.props['alpha'] = v ? 1 : 0
+    if (v) {
+      this.props['alpha'] = 1
+      this.props['width'] = this.raw['w'] || this.raw['width']
+      this.props['height'] = this.raw['h'] || this.raw['height']
+    } else {
+      this.props['alpha'] = 0
+      this.props['width'] = 0
+      this.props['height'] = 0
+    }
   },
   set alpha(v) {
     this.props['alpha'] = v

package/src/focus.js

@@ -38,6 +38,7 @@ export default {
     return focusedComponent
   },
   set(component, event) {
+    if (component === focusedComponent) return
     clearTimeout(setFocusTimeout)
     focusedComponent && focusedComponent !== component.parent && focusedComponent.unfocus()
     focusChain.reverse().forEach((cmp) => cmp.unfocus())