@lightningjs/blits 1.14.1 → 1.16.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## v1.16.0
+
+_16 jan 2025_
+
+- Fixed issue with component scope in Slots
+- Fixed issue with sprites (regression since v1.14.0)
+- Changed reactive state to only make plain objects reactive, and return custom Classes, Blits components, Renderer texture etc in raw form
+
+## v1.15.0
+
+_14 jan 2025_
+
+- Added `placement`-attribute for easily aligning Elements to predefined locations (i.e. `center`, `right`, `middle`, `bottom`)
+- Removed automatic injection of `index` variable into forloop-scope to prevent unexpected naming collisions
+
+
 ## v1.14.1
 
 _8 jan 2025_

package/docs/essentials/element_attributes.md

@@ -36,6 +36,38 @@ Besides using values in pixels (i.e. `w="100" h="300"`), you can also specify _p
 The percentage value specified for `w` and `x` will be calculated as the percentage of the _width_ (`w`) of the parent element.
 And the percentage specified for `h` and `y` will use the _height_ (`h`) of the parent element as the base of the percentage calculation.
 
+### Predefined placement options
+
+In addition to the absolute positions that Blits and Lightning use, there are a few predefined placement options available. By adding the `placement`-attribute to an Element we can easily align it to the _center_, _left_, _right_, _top_, _bottom_, or even a combination like `{y: 'middle', x: 'left'}`, without having to calculate the positions yourself.
+
+
+On the `x`-axis the following _placement_ options can be used: `left` (default), `center` and `right`. On the `y`-axis the _placement_ attribute accepts `top` (default), `middle` and `bottom`.
+
+The _placement_ attribute also accepts and object with an `x` and a `y` key, to specify a placement for both axes.
+
+The placement of an Element is calculated based on the dimensions of it's direct parent. This means that the containing Element _must_ have it's own dimensions (i.e. a `w` and a `h` attribute).
+
+```xml
+<Element w="300" h="300">
+  <!-- x placement -->
+  <Element w="40" h="40" placement="left" color="#818cf8" />
+  <Element w="40" h="40" placement="center" color="#2563eb" />
+  <Element w="40" h="40" placement="right" color="#1e40af" />
+
+  <!-- y placement -->
+  <Element w="40" h="40" x="54" placement="top" color="#f472b6" />
+  <Element w="40" h="40" x="54" placement="middle" color="#db2777" />
+  <Element w="40" h="40" x="54" placement="bottom" color="#be185d" />
+
+  <!-- x/y placement -->
+  <Element w="40" h="40" placement="{x: 'center', y: 'bottom'}" color="#a3e635" />
+  <Element w="40" h="40" placement="{x: 'right', y: 'middle'}" color="#65a30d" />
+  <Element w="40" h="40" placement="{x: 'center', y: 'middle'}" color="#4d7c0f" />
+</Element>
+```
+
+> note: the `x` or `y` attributes on the Element are ignored for those axes defined in the `placement`-attribute
+
 ## Colors
 
 By default, Elements have a transparent background color. The `color` attribute can be used to give an Element a color.

package/package.json

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

package/src/components/Circle.js

@@ -26,15 +26,26 @@ export default () =>
         let componentType
         const rootComponent = component
         let propData
+        let slotComponent
+        let inSlot = false
+        let slotChildCounter = 0
         const elementConfig0 = {}
 
-        elms[0] = this.element({ parent: parent || 'root' }, component)
+        elms[0] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig0['color'] = component.color
         elementConfig0['w'] = component.size
         elementConfig0['h'] = component.size
         elementConfig0['effects'] = [component.shader('radius', { radius: component.radius })]
         elms[0].populate(elementConfig0)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         return elms
       },
       effects: [