From 9b67e3ed9631c39b6db7fb3110f569653831e34a Mon Sep 17 00:00:00 2001 From: Michiel van der Geest Date: Wed, 18 Dec 2024 14:21:40 +0100 Subject: [PATCH 1/3] Added method to dynamically set the width and height of a component holder node. --- index.d.ts | 18 ++++++++++++++++-- src/component/base/utils.js | 9 +++++++++ 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/index.d.ts b/index.d.ts index 931f41c0..dab2db41 100644 --- a/index.d.ts +++ b/index.d.ts @@ -153,7 +153,9 @@ declare module '@lightningjs/blits' { export type ComponentBase = { /** - * Check if a component has focus + * Indicates whether the component currently has focus + * + * @returns Boolean */ hasFocus: boolean, @@ -244,11 +246,23 @@ declare module '@lightningjs/blits' { * Deprecated: use `this.$trigger()` instead */ trigger: (key: string) => void - /** * Router instance */ $router: Router + /** + * Dynamically set the size of a component holder node + */ + $size: (dimensions: { + /** + * Component width + */ + w: number, + /** + * Component height + */ + h: number + }) => void } /** diff --git a/src/component/base/utils.js b/src/component/base/utils.js index 298efbfb..6437a2e3 100644 --- a/src/component/base/utils.js +++ b/src/component/base/utils.js @@ -20,6 +20,15 @@ import symbols from '../../lib/symbols.js' import { renderer } from '../../launch.js' export default { + $size: { + value: function (dimensions = { w: 0, h: 0 }) { + this[symbols.holder].set('w', dimensions.w || 0) + this[symbols.holder].set('height', dimensions.h || 0) + }, + writable: false, + enumerable: true, + configurable: false, + }, [symbols.renderer]: { value: () => renderer, writable: false, From a198aae70e9a4e39ed9046a68aea27898aeae829 Mon Sep 17 00:00:00 2001 From: Michiel van der Geest Date: Mon, 6 Jan 2025 13:55:52 +0100 Subject: [PATCH 2/3] Changed name of prop from height to h. --- src/component/base/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/base/utils.js b/src/component/base/utils.js index 6437a2e3..a3999048 100644 --- a/src/component/base/utils.js +++ b/src/component/base/utils.js @@ -23,7 +23,7 @@ export default { $size: { value: function (dimensions = { w: 0, h: 0 }) { this[symbols.holder].set('w', dimensions.w || 0) - this[symbols.holder].set('height', dimensions.h || 0) + this[symbols.holder].set('h', dimensions.h || 0) }, writable: false, enumerable: true, From 8fcb08c32f33c5994f8b13d38ae68bb56c36f6ce Mon Sep 17 00:00:00 2001 From: Michiel van der Geest Date: Mon, 6 Jan 2025 15:18:45 +0100 Subject: [PATCH 3/3] Added documentation about setting size of components in a layout tag. --- docs/built-in/layout.md | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/docs/built-in/layout.md b/docs/built-in/layout.md index 73259fce..36ad6e8e 100644 --- a/docs/built-in/layout.md +++ b/docs/built-in/layout.md @@ -55,6 +55,38 @@ The Layout component also uses this event, to execute its calculation and positi When the children of the Layout-component have _reactive_ dimensions (i.e. `), the Layout component ensures that all child elements are properly re-positioned whenever a dimension changes. +### Components inside a Layout + +It is also possible to place Components inside of a Layout, but there is a small _gotcha_ there. By default a Component does not have any dimensions - it has a width and height of `0`, regardless of the contents of the Component. Normally, when using absolute positioning, this isn't a problem. But in the context of a Layout, each child needs to have dimensions. + +If the Component has fixed dimensions, you can just add a `w` and a `h` attribute to the Component tag (i.e. ``). This is the most performant way to supply dimensions to a Component and should be used whenever possible. + +If the Component has dynamic dimensions that are not known upfront, you can dynamically update the dimensions from inside the Component by calling the `this.$size()`-method. This method accepts an object as its argument with a `w` property for setting the _width_ and a `h` property for setting the _height_. + +```js +export default Blits.Component('MyButton', { + template: ``, + props: ['type'], + hooks: { + ready() { + if(this.type === 'large') { + this.$size({ + w: 200, + h: 80 + }) + } else { + this.$size({ + w: 100, + h: 40 + }) + } + + } + } +}) +``` +At this moment Blits does not have support for automatically growing the dimensions of a Component based on it's contents, because of the performance impact that this functionality has. + ### Nesting Layouts It's also possible to nest layouts. Simply place a new ``-tag, with it's own children in between the children of another Layout-component. The Layout-component itself will grow automatically with the dimensions of it's children. In other words, it's not required to specify a width (`w`) or height (`h`) on the ``-tag itself.