From 719e8d68035876134c8f8c033b1f51207f0513ce Mon Sep 17 00:00:00 2001 From: Suresh Kumar Gangumalla Date: Wed, 30 Oct 2024 18:31:34 +0530 Subject: [PATCH 01/12] Bubbling back event to App.js from Router If there are no routes to navigate on back keyboard/remote press then bubbling the 'back' event to parent App.js to handle back event. Signed-off-by: Suresh Kumar Gangumalla --- src/components/RouterView.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/RouterView.js b/src/components/RouterView.js index 99ab07ce..7a234e65 100644 --- a/src/components/RouterView.js +++ b/src/components/RouterView.js @@ -44,8 +44,11 @@ export default () => }, }, input: { - back() { - Router.back() + back(e) { + const navigating = Router.back() + if (navigating === false) { + this.parent.$focus(e) + } }, }, }) From fe4558e5255280be260ec06fc54d3391919c8cd5 Mon Sep 17 00:00:00 2001 From: sandeep-vedam Date: Wed, 6 Nov 2024 19:03:03 +0530 Subject: [PATCH 02/12] Added support for fav icon in browser --- .../common/public/assets/favicon.svg | 32 +++++++++++++++++++ .../boilerplate/js/default/index.html | 1 + .../boilerplate/ts/default/index.html | 1 + 3 files changed, 34 insertions(+) create mode 100644 packages/create-blits/boilerplate/common/public/assets/favicon.svg diff --git a/packages/create-blits/boilerplate/common/public/assets/favicon.svg b/packages/create-blits/boilerplate/common/public/assets/favicon.svg new file mode 100644 index 00000000..fc925644 --- /dev/null +++ b/packages/create-blits/boilerplate/common/public/assets/favicon.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/create-blits/boilerplate/js/default/index.html b/packages/create-blits/boilerplate/js/default/index.html index 614c2fa9..c48b4e63 100644 --- a/packages/create-blits/boilerplate/js/default/index.html +++ b/packages/create-blits/boilerplate/js/default/index.html @@ -3,6 +3,7 @@ +
diff --git a/packages/create-blits/boilerplate/ts/default/index.html b/packages/create-blits/boilerplate/ts/default/index.html index a0b69dcd..2dd758e0 100644 --- a/packages/create-blits/boilerplate/ts/default/index.html +++ b/packages/create-blits/boilerplate/ts/default/index.html @@ -3,6 +3,7 @@ +
From 12d1d7d7ca5cefd0fa25292e2ff1712d22a3d574 Mon Sep 17 00:00:00 2001 From: Michiel van der Geest Date: Thu, 7 Nov 2024 09:08:55 +0100 Subject: [PATCH 03/12] Added align-items attribute to Layout component. --- docs/built-in/layout.md | 8 ++++++++ src/engines/L3/element.js | 41 +++++++++++++++++++++++++++++---------- 2 files changed, 39 insertions(+), 10 deletions(-) diff --git a/docs/built-in/layout.md b/docs/built-in/layout.md index e3c7867d..a9892400 100644 --- a/docs/built-in/layout.md +++ b/docs/built-in/layout.md @@ -37,6 +37,14 @@ In order to align vertically use ``. 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. diff --git a/src/engines/L3/element.js b/src/engines/L3/element.js index fd7333a2..727dfe51 100644 --- a/src/engines/L3/element.js +++ b/src/engines/L3/element.js @@ -24,9 +24,10 @@ 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 dimension = config.direction === 'vertical' ? 'height' : 'width' + const oppositeDimension = config.direction === 'vertical' ? 'width' : 'height' const children = this.children const childrenLength = children.length @@ -34,11 +35,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 +49,31 @@ 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']] + + if (align !== 0) { + for (let i = 0; i < childrenLength; i++) { + const node = children[i] + if (align === 1) { + node[oppositePosition] = otherDimension - node[oppositeDimension] + continue + } + if (align === 0.5) { + node[oppositePosition] = otherDimension - node[oppositeDimension] / 2 + continue + } + } + } } const isTransition = (value) => { @@ -283,7 +304,7 @@ const propsTransformer = { this.props['lineHeight'] = v }, set align(v) { - this.props['textAlign'] = v + if (this.__textnode === true) this.props['textAlign'] = v }, set content(v) { this.props['text'] = '' + v From 8e70b5f16edb0cb1eec9705d86457e8cf1d71720 Mon Sep 17 00:00:00 2001 From: Michiel van der Geest Date: Thu, 7 Nov 2024 09:42:35 +0100 Subject: [PATCH 04/12] Added setting dimension to 0 when using show attribute. --- src/engines/L3/element.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/engines/L3/element.js b/src/engines/L3/element.js index 727dfe51..3b1e6a57 100644 --- a/src/engines/L3/element.js +++ b/src/engines/L3/element.js @@ -246,7 +246,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 From d0aec21b9cfea7b0bb712d51a76112d6bec92ff7 Mon Sep 17 00:00:00 2001 From: Michiel van der Geest Date: Thu, 7 Nov 2024 11:37:30 +0100 Subject: [PATCH 05/12] Refactored align-items to use mount. --- src/engines/L3/element.js | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/src/engines/L3/element.js b/src/engines/L3/element.js index 3b1e6a57..f96657cd 100644 --- a/src/engines/L3/element.js +++ b/src/engines/L3/element.js @@ -26,6 +26,7 @@ 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' @@ -59,19 +60,13 @@ const layoutFn = function (config) { start: 0, end: 1, center: 0.5, - }[config['align-items']] + }[config['align-items'] || 'start'] if (align !== 0) { for (let i = 0; i < childrenLength; i++) { const node = children[i] - if (align === 1) { - node[oppositePosition] = otherDimension - node[oppositeDimension] - continue - } - if (align === 0.5) { - node[oppositePosition] = otherDimension - node[oppositeDimension] / 2 - continue - } + node[oppositePosition] = otherDimension + node[oppositeMount] = align } } } From 3a8af4f91b996fd75ba1cd81c69ac028f83d50f4 Mon Sep 17 00:00:00 2001 From: Suresh Kumar Gangumalla Date: Thu, 7 Nov 2024 16:21:48 +0530 Subject: [PATCH 06/12] Fix watching nested prop Signed-off-by: Suresh Kumar Gangumalla --- src/component.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/component.js b/src/component.js index d99e4dbd..79309fdd 100644 --- a/src/component.js +++ b/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 } }) From 22731a38fa4e904ebb9c88fe13b0c632b26c402e Mon Sep 17 00:00:00 2001 From: Michiel van der Geest Date: Thu, 7 Nov 2024 21:56:45 +0100 Subject: [PATCH 07/12] Upgraded to version 2.6.2 of the renderer. --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index ad526e5e..00d1fea0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "Apache-2.0", "dependencies": { "@lightningjs/msdf-generator": "^1.1.0", - "@lightningjs/renderer": "^2.6.0" + "@lightningjs/renderer": "^2.6.2" }, "bin": { "blits": "bin/index.js" @@ -787,9 +787,9 @@ } }, "node_modules/@lightningjs/renderer": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/@lightningjs/renderer/-/renderer-2.6.0.tgz", - "integrity": "sha512-JDIeDLKN3tA1LGZgZovcbrL8I9sSvQotFROALVq1OXtSYM9FECkVi7dQMeyQ2s/tjZ74QDh6UPS9blgVsCq0Sw==", + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/@lightningjs/renderer/-/renderer-2.6.2.tgz", + "integrity": "sha512-agu9jV8hhbF/Ld8BJSogOJIQZBoSUzow+3BtP4NptqC3l1aV6RQr1rwpXQF12ITYjUi3CrfA7eV76GIiLAkOAA==", "hasInstallScript": true, "engines": { "node": ">= 20.9.0", diff --git a/package.json b/package.json index f6bffd13..02b4f410 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ }, "dependencies": { "@lightningjs/msdf-generator": "^1.1.0", - "@lightningjs/renderer": "^2.6.0" + "@lightningjs/renderer": "^2.6.2" }, "repository": { "type": "git", From c1ad257d8d608b5683feb3192d02404427c476a8 Mon Sep 17 00:00:00 2001 From: Michiel van der Geest Date: Thu, 7 Nov 2024 21:58:07 +0100 Subject: [PATCH 08/12] Fixed issue with white background for falsy src attributes. --- src/engines/L3/element.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/engines/L3/element.js b/src/engines/L3/element.js index f96657cd..7793c45b 100644 --- a/src/engines/L3/element.js +++ b/src/engines/L3/element.js @@ -162,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) { From e15ef2b24ad251021bf550fba95ed69b95738d76 Mon Sep 17 00:00:00 2001 From: Michiel van der Geest Date: Fri, 8 Nov 2024 09:32:15 +0100 Subject: [PATCH 09/12] Bumped boilerplate package and updated changelog. --- packages/create-blits/CHANGELOG.md | 6 ++++++ packages/create-blits/package-lock.json | 4 ++-- packages/create-blits/package.json | 2 +- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/create-blits/CHANGELOG.md b/packages/create-blits/CHANGELOG.md index 87ea85f1..9ef65cdb 100644 --- a/packages/create-blits/CHANGELOG.md +++ b/packages/create-blits/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## v1.3.0 + +_08 Nov 2024_ + +- Added favicon to boilerplate project + ## v1.2.0 _22 Oct 2024_ diff --git a/packages/create-blits/package-lock.json b/packages/create-blits/package-lock.json index 952bb50d..d0129a5b 100644 --- a/packages/create-blits/package-lock.json +++ b/packages/create-blits/package-lock.json @@ -1,12 +1,12 @@ { "name": "@lightningjs/create-blits", - "version": "1.2.0", + "version": "1.3.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@lightningjs/create-blits", - "version": "1.1.0", + "version": "1.3.0", "license": "Apache-2.0", "dependencies": { "execa": "^8.0.1", diff --git a/packages/create-blits/package.json b/packages/create-blits/package.json index e5cd199c..c7adaf35 100644 --- a/packages/create-blits/package.json +++ b/packages/create-blits/package.json @@ -1,6 +1,6 @@ { "name": "@lightningjs/create-blits", - "version": "1.2.0", + "version": "1.3.0", "description": "Create a new Lightning 3 Blits App", "bin": "bin/index.js", "scripts": { From 598900dfbbc2b13e81da816af592ad9f3d75ea02 Mon Sep 17 00:00:00 2001 From: Suresh Kumar Gangumalla Date: Fri, 8 Nov 2024 14:07:40 +0530 Subject: [PATCH 10/12] Fix re focussing same component issue Addressess issue with accindental re-foucsing same component again Signed-off-by: Suresh Kumar Gangumalla --- src/focus.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/focus.js b/src/focus.js index 2feb877c..62ae4ae2 100644 --- a/src/focus.js +++ b/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()) From 40a5164b8291ca07e496274dcb722c1fa184e648 Mon Sep 17 00:00:00 2001 From: Michiel van der Geest Date: Fri, 8 Nov 2024 09:51:41 +0100 Subject: [PATCH 11/12] Bumped version to 1.10.0 and updated changelog. --- CHANGELOG.md | 12 ++++++++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6e981c15..6ceaad9c 100644 --- a/CHANGELOG.md +++ b/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_ diff --git a/package-lock.json b/package-lock.json index 00d1fea0..66f0cd7f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@lightningjs/blits", - "version": "1.9.2", + "version": "1.10.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@lightningjs/blits", - "version": "1.9.2", + "version": "1.10.0", "license": "Apache-2.0", "dependencies": { "@lightningjs/msdf-generator": "^1.1.0", diff --git a/package.json b/package.json index 02b4f410..cfbdc2ac 100644 --- a/package.json +++ b/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": { From 93d6ab96306da8b77cbc10eaafa06d22d84292a6 Mon Sep 17 00:00:00 2001 From: Michiel van der Geest Date: Fri, 8 Nov 2024 11:27:59 +0100 Subject: [PATCH 12/12] Fixed issue with text align not working anymore. --- src/engines/L3/element.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/engines/L3/element.js b/src/engines/L3/element.js index 7793c45b..688677cf 100644 --- a/src/engines/L3/element.js +++ b/src/engines/L3/element.js @@ -307,7 +307,7 @@ const propsTransformer = { this.props['lineHeight'] = v }, set align(v) { - if (this.__textnode === true) this.props['textAlign'] = v + this.props['textAlign'] = v }, set content(v) { this.props['text'] = '' + v