Merge pull request #237 from lightning-js/dev

Release 1.13.0

CHANGELOG.md

@@ -1,7 +1,22 @@
 # Changelog
 
+## v1.13.0
+
+_5 dec 2024_
+
+- Added `padding` attribute to Layout component
+- Added logging of Blits and Renderer version used in App
+- Fixed show attribute for elements without predefined width and height
+- Added automatic proxy fallback (when no browser support) for reactivity
+- Fixed and added tests related to Blits Element
+- Fixed memory issue with effects used in for-loop
+- Fixed memory issue when changing props in dynamic shader effects
+- Updated renderer to v2.8.0
+
 ## v1.12.0
 
+_26 nov 2024_
+
 - Fixed `$hasFocus` state variable not being set when navigating back to a page with `keepAlive` enabled
 - Added `@updated`-event to Layout component
 - Fixed issue with simple config for Theme plugin

docs/built-in/layout.md

@@ -61,6 +61,30 @@ It's also possible to nest layouts. Simply place a new `<Layout>`-tag, with it's
 
 And of course you can nest _vertical_ Layouts inside a _horizontal_ one - and vice versa.
 
+### Padding
+
+By default a `<Layout />`-tag will be resized to the exact dimensions as the content it is containing. The `padding`-attribute can be used to add spacing between the content and the edges of the Layout Component.
+
+The `padding`-attribute accepts a `number` or an `object`. When passed a number, that padding will be applied equally to all sides. With an object value, the padding can be controlled for each side individually.
+
+Valid keys in the _padding-object_ are: `top`, `bottom`, `left`, `right`, `x` and `y`. The `x` and `y` keys can be used to define the same values for `top` and `bottom`, and `left` and `right` in one go. When a value is not specified for a side, it will default to `0`.
+
+```xml
+<Layout color="silver" padding="10" >
+  <Element w="40" h="40" color="red" />
+  <Element w="80" h="40" color="blue" />
+  <Element w="40" h="40" color="green" />
+</Layout>
+```
+
+```xml
+<Layout color="silver" padding="{x: 20, top: 30, bottom: 10}">
+  <Element w="40" h="40" color="red" />
+  <Element w="80" h="40" color="blue" />
+  <Element w="40" h="40" color="green" />
+</Layout>
+```
+
 ### Transitioning layouts
 
 The `<Layout>`-component can also take into account when dimensions of children change with a transition applied to it (i.e. `<Element :w.transition="$myWidth">`). The component will recalculate the position of its children as the transition progresses, making sure that elements are always perfectly positioned relative to one another.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.12.0",
+  "version": "1.13.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.7.1"
+    "@lightningjs/renderer": "^2.8.0"
   },
   "repository": {
     "type": "git",

src/component/base/methods.js

@@ -64,6 +64,14 @@ export default {
     enumerable: true,
     configurable: false,
   },
+  [symbols.removeGlobalEffects]: {
+    value: function (effects = []) {
+      removeGlobalEffects(effects)
+    },
+    writable: false,
+    enumerable: false,
+    configurable: false,
+  },
   select: {
     value: function (ref) {
       Log.warn('this.select is deprecated, use this.$select instead')

src/engines/L3/element.js

@@ -22,13 +22,57 @@ import { Log } from '../../lib/log.js'
 import symbols from '../../lib/symbols.js'
 import Settings from '../../settings.js'
 
+const createPaddingObject = (padding, direction) => {
+  if (padding === undefined) {
+    return { start: 0, end: 0, oppositeStart: 0, oppositeEnd: 0 }
+  }
+
+  if (typeof padding === 'number') {
+    return { start: padding, end: padding, oppositeStart: padding, oppositeEnd: padding }
+  }
+
+  // todo: do we need to do this runtime every time? or can we optimize this?
+  if (isObjectString(padding) === true) {
+    padding = parseToObject(padding)
+  }
+
+  if (typeof padding === 'object') {
+    const {
+      top = undefined,
+      right = undefined,
+      bottom = undefined,
+      left = undefined,
+      x = 0,
+      y = 0,
+    } = padding
+
+    // use specific values if provided, otherwise fall back to x or y
+    return direction === 'vertical'
+      ? {
+          start: top !== undefined ? top : y,
+          end: bottom !== undefined ? bottom : y,
+          oppositeStart: left !== undefined ? left : x,
+          oppositeEnd: right !== undefined ? right : x,
+        }
+      : {
+          start: left !== undefined ? left : x,
+          end: right !== undefined ? right : x,
+          oppositeStart: top !== undefined ? top : y,
+          oppositeEnd: bottom !== undefined ? bottom : y,
+        }
+  }
+  return { start: 0, end: 0, oppositeStart: 0, oppositeEnd: 0 }
+}
+
 const layoutFn = function (config) {
-  let offset = 0
   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 padding = createPaddingObject(config.padding, config.direction)
+
+  let offset = padding.start
 
   const children = this.node.children
   const childrenLength = children.length
@@ -37,10 +81,11 @@ const layoutFn = function (config) {
   for (let i = 0; i < childrenLength; i++) {
     const node = children[i]
     node[position] = offset
+    node[oppositePosition] = padding.oppositeStart
     // todo: temporary text check, due to 1px width of empty text node
     if (dimension === 'width') {
       offset += node.width + (node.width !== ('text' in node ? 1 : 0) ? gap : 0)
-    } else if (dimension === 'height') {
+    } else {
       offset +=
         'text' in node
           ? node.width > 1
@@ -50,10 +95,13 @@ const layoutFn = function (config) {
           ? node.height + gap
           : 0
     }
-    otherDimension = Math.max(otherDimension, node[oppositeDimension])
+    otherDimension = Math.max(
+      otherDimension,
+      node[oppositeDimension] + padding.oppositeStart + padding.oppositeEnd
+    )
   }
   // adjust the size of the layout container
-  this.node[dimension] = offset - gap
+  this.node[dimension] = offset - gap + padding.end
   this.node[oppositeDimension] = otherDimension
 
   const align = {
@@ -248,8 +296,8 @@ const propsTransformer = {
   set show(v) {
     if (v) {
       this.props['alpha'] = 1
-      this.props['width'] = this.raw['w'] || this.raw['width']
-      this.props['height'] = this.raw['h'] || this.raw['height']
+      this.props['width'] = this.raw['w'] || this.raw['width'] || 0
+      this.props['height'] = this.raw['h'] || this.raw['height'] || 0
     } else {
       this.props['alpha'] = 0
       this.props['width'] = 0
@@ -272,9 +320,23 @@ const propsTransformer = {
         v[i].props.color = colors.normalize(v[i].props.color)
       }
     }
-    this.props['shader'] = renderer.createShader('DynamicShader', {
-      effects: v,
-    })
+
+    if (this.element.node === undefined) {
+      this.props['shader'] = renderer.createShader('DynamicShader', {
+        effects: v.map((effect) => {
+          return renderer.createEffect(effect.type, effect.props, effect.type)
+        }),
+      })
+    } else {
+      for (let i = 0; i < v.length; i++) {
+        const target = this.element.node.shader.props[v[i].type]
+        const props = Object.keys(v[i].props)
+
+        for (let j = 0; j < props.length; j++) {
+          target[props[j]] = v[i].props[props[j]]
+        }
+      }
+    }
   },
   set clipping(v) {
     this.props['clipping'] = v