From 1578899d2473bad9794bfe61ca46295faa3183e5 Mon Sep 17 00:00:00 2001 From: Emily Rautenberg Date: Mon, 11 Mar 2024 11:56:11 -0400 Subject: [PATCH 1/6] fix(NavigationManager): allow itemPosX and itemPosY to animate the Items element and adjust on the update lifecycle --- .../src/components/Column/Column.stories.js | 34 +++++++++++++++++++ .../components/FocusManager/FocusManager.js | 26 +++++++------- .../NavigationManager/NavigationManager.js | 7 ++++ .../src/components/TitleRow/TitleRow.js | 9 ++--- 4 files changed, 59 insertions(+), 17 deletions(-) diff --git a/packages/@lightningjs/ui-components/src/components/Column/Column.stories.js b/packages/@lightningjs/ui-components/src/components/Column/Column.stories.js index 3d657b7dc..8b109348a 100644 --- a/packages/@lightningjs/ui-components/src/components/Column/Column.stories.js +++ b/packages/@lightningjs/ui-components/src/components/Column/Column.stories.js @@ -20,6 +20,7 @@ import lng from '@lightningjs/core'; import { context } from '../../globals'; import { flatten, getWidthByUpCount } from '../../utils'; import Row from '../Row'; +import TitleRow from '../TitleRow'; import Tile from '../Tile'; import Button from '../Button'; import { default as ColumnComponent } from '.'; @@ -36,6 +37,19 @@ const columnHeight = context.theme.layout.screenH - 2 * (context.theme.layout.marginY + context.theme.layout.gutterY); +const createRows = (rowType, length, style, items) => { + return Array.from({ length }).map((_, i) => { + return { + type: rowType, + title: `Row ${i}`, + autoResizeHeight: true, + w: getWidthByUpCount(context.theme, 1), + items, + style + }; + }); +}; + // creates an array of buttons to be used in Stories const createItems = (buttonType, length, isVariedHeight, isDynamicWidth) => { return Array.from({ length }).map((_, i) => { @@ -770,3 +784,23 @@ RemovingItems.parameters = { storyDetails: 'The third button in this column is configured to invoke removeItemAt to remove that button. Focus on that button and press Enter to invoke that method and remove the button from the column.' }; + +export const ShiftingItemPos = () => + class ShiftingItemPos extends lng.Component { + static _template() { + return { + Column: { + type: ColumnComponent, + h: + context.theme.layout.screenH - + 2 * (context.theme.layout.marginY + context.theme.layout.gutterY), + items: createRows( + TitleRow, + 10, + { mode: { focused: { titleMarginBottom: 100 } } }, + createItems(Button, 10) + ) + } + }; + } + }; diff --git a/packages/@lightningjs/ui-components/src/components/FocusManager/FocusManager.js b/packages/@lightningjs/ui-components/src/components/FocusManager/FocusManager.js index 0f2601b43..2cac5ae6c 100644 --- a/packages/@lightningjs/ui-components/src/components/FocusManager/FocusManager.js +++ b/packages/@lightningjs/ui-components/src/components/FocusManager/FocusManager.js @@ -39,7 +39,7 @@ export default class FocusManager extends Base { } static get properties() { - return ['direction', 'wrapSelected']; + return ['direction', 'wrapSelected', 'itemPosX', 'itemPosY']; } _construct() { @@ -89,21 +89,21 @@ export default class FocusManager extends Base { this._checkSkipFocus(); } - set itemPosX(x) { - this.Items.x = this._itemPosX = x; - } + // set itemPosX(x) { + // this.Items.x = this._itemPosX = x; + // } - get itemPosX() { - return this._itemPosX; - } + // get itemPosX() { + // return this._itemPosX; + // } - set itemPosY(y) { - this.Items.y = this._itemPosY = y; - } + // set itemPosY(y) { + // this.Items.y = this._itemPosY = y; + // } - get itemPosY() { - return this._itemPosY; - } + // get itemPosY() { + // return this._itemPosY; + // } _resetItems() { this.Items.childList.clear(); diff --git a/packages/@lightningjs/ui-components/src/components/NavigationManager/NavigationManager.js b/packages/@lightningjs/ui-components/src/components/NavigationManager/NavigationManager.js index 676e21d59..286f6cffd 100644 --- a/packages/@lightningjs/ui-components/src/components/NavigationManager/NavigationManager.js +++ b/packages/@lightningjs/ui-components/src/components/NavigationManager/NavigationManager.js @@ -104,9 +104,16 @@ export default class NavigationManager extends FocusManager { } _update() { + super._update(); + this._updateDefaultItemPos(); this._updateLayout(); } + _updateDefaultItemPos() { + const itemPos = this._isRow ? { y: this.itemPosY } : { x: this.itemPosX }; + this.applySmooth(this.Items, itemPos); + } + _updateLayout() { const { lengthDimension, crossDimension, crossAxis, innerCrossDimension } = this._directionPropNames; diff --git a/packages/@lightningjs/ui-components/src/components/TitleRow/TitleRow.js b/packages/@lightningjs/ui-components/src/components/TitleRow/TitleRow.js index de7909019..688b7ca20 100644 --- a/packages/@lightningjs/ui-components/src/components/TitleRow/TitleRow.js +++ b/packages/@lightningjs/ui-components/src/components/TitleRow/TitleRow.js @@ -52,9 +52,9 @@ export default class TitleRow extends Row { } _update() { + this._updateRow(); super._update(); this._updateTitle(); - this._updateRow(); } _autoResize() { @@ -94,9 +94,10 @@ export default class TitleRow extends Row { } _updateRow() { - this.applySmooth(this.Items, { - y: this.title ? this._Title.finalH + this.style.titleMarginBottom : 0 - }); + this.itemPosY = + this.title && this._Title + ? this._Title.finalH + this.style.titleMarginBottom + : 0; } set announce(announce) { From 4b4bc01dccfefdfcae65737a0f1d56939e00afe8 Mon Sep 17 00:00:00 2001 From: Emily Rautenberg Date: Wed, 13 Mar 2024 10:46:05 -0400 Subject: [PATCH 2/6] test: update snapshots --- .../ControlRow/__snapshots__/ControlRow.test.js.snap | 8 ++++---- .../Shadow/__snapshots__/Shadow.test.js.snap | 10 +++++----- .../TitleRow/__snapshots__/TitleRow.test.js.snap | 2 +- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/@lightningjs/ui-components/src/components/ControlRow/__snapshots__/ControlRow.test.js.snap b/packages/@lightningjs/ui-components/src/components/ControlRow/__snapshots__/ControlRow.test.js.snap index 8ce6ba083..b37f0dbeb 100644 --- a/packages/@lightningjs/ui-components/src/components/ControlRow/__snapshots__/ControlRow.test.js.snap +++ b/packages/@lightningjs/ui-components/src/components/ControlRow/__snapshots__/ControlRow.test.js.snap @@ -283,9 +283,9 @@ exports[`ControlRow renders 1`] = ` "ref": null, "renderOfScreen": undefined, "renderToTexture": false, - "scale": 1.2, - "scaleX": 1.2, - "scaleY": 1.2, + "scale": 1, + "scaleX": 1, + "scaleY": 1, "state": "", "tag": [Function], "type": "Tile", @@ -609,7 +609,7 @@ exports[`ControlRow renders 1`] = ` "visible": true, "w": 880, "x": -40, - "y": 68, + "y": 0, "zIndex": 0, }, "Title": { diff --git a/packages/@lightningjs/ui-components/src/components/Shadow/__snapshots__/Shadow.test.js.snap b/packages/@lightningjs/ui-components/src/components/Shadow/__snapshots__/Shadow.test.js.snap index 70cdfccc9..c6456ae91 100644 --- a/packages/@lightningjs/ui-components/src/components/Shadow/__snapshots__/Shadow.test.js.snap +++ b/packages/@lightningjs/ui-components/src/components/Shadow/__snapshots__/Shadow.test.js.snap @@ -208,7 +208,7 @@ exports[`Shadow updates the shadow size 1`] = ` "visible": true, "w": 0, "x": 0, - "y": 0, + "y": 2.560000057665497, "zIndex": 0, }, }, @@ -217,7 +217,7 @@ exports[`Shadow updates the shadow size 1`] = ` "enabled": true, "flex": false, "flexItem": false, - "h": 530, + "h": 344, "isComponent": undefined, "mount": 0.5, "mountX": 0.5, @@ -237,9 +237,9 @@ exports[`Shadow updates the shadow size 1`] = ` "Frame", ], "visible": true, - "w": 480, - "x": 200, - "y": 225, + "w": 312, + "x": 100, + "y": 116, "zIndex": 0, }, }, diff --git a/packages/@lightningjs/ui-components/src/components/TitleRow/__snapshots__/TitleRow.test.js.snap b/packages/@lightningjs/ui-components/src/components/TitleRow/__snapshots__/TitleRow.test.js.snap index e9adaa727..bc9837bfb 100644 --- a/packages/@lightningjs/ui-components/src/components/TitleRow/__snapshots__/TitleRow.test.js.snap +++ b/packages/@lightningjs/ui-components/src/components/TitleRow/__snapshots__/TitleRow.test.js.snap @@ -282,7 +282,7 @@ exports[`TitleRow renders 1`] = ` "visible": true, "w": 2220, "x": 0, - "y": 68, + "y": 0, "zIndex": 0, }, "Title": { From aa7079f7aed77ecc0db2f6ef51c54e4e4a678427 Mon Sep 17 00:00:00 2001 From: Emily Rautenberg Date: Thu, 14 Mar 2024 15:48:14 -0400 Subject: [PATCH 3/6] fix(TitleRow): set itemPosY on autoResize --- .../src/components/FocusManager/FocusManager.js | 16 ---------------- .../src/components/TitleRow/TitleRow.js | 4 ++-- 2 files changed, 2 insertions(+), 18 deletions(-) diff --git a/packages/@lightningjs/ui-components/src/components/FocusManager/FocusManager.js b/packages/@lightningjs/ui-components/src/components/FocusManager/FocusManager.js index 2cac5ae6c..a9fc4db8d 100644 --- a/packages/@lightningjs/ui-components/src/components/FocusManager/FocusManager.js +++ b/packages/@lightningjs/ui-components/src/components/FocusManager/FocusManager.js @@ -89,22 +89,6 @@ export default class FocusManager extends Base { this._checkSkipFocus(); } - // set itemPosX(x) { - // this.Items.x = this._itemPosX = x; - // } - - // get itemPosX() { - // return this._itemPosX; - // } - - // set itemPosY(y) { - // this.Items.y = this._itemPosY = y; - // } - - // get itemPosY() { - // return this._itemPosY; - // } - _resetItems() { this.Items.childList.clear(); this.Items.patch({ diff --git a/packages/@lightningjs/ui-components/src/components/TitleRow/TitleRow.js b/packages/@lightningjs/ui-components/src/components/TitleRow/TitleRow.js index 688b7ca20..cbe15f458 100644 --- a/packages/@lightningjs/ui-components/src/components/TitleRow/TitleRow.js +++ b/packages/@lightningjs/ui-components/src/components/TitleRow/TitleRow.js @@ -52,14 +52,14 @@ export default class TitleRow extends Row { } _update() { + this._updateTitle(); this._updateRow(); super._update(); - this._updateTitle(); } _autoResize() { this.w = this.w || this.style.w; - this.h = this.autoResizeHeight ? this.Items.y + this.Items.h : this.h; + this.h = this.autoResizeHeight ? this.itemPosY + this.Items.h : this.h; } _updateTitle() { From f3457941a0053463863dfb7b69edbf6cccf216c4 Mon Sep 17 00:00:00 2001 From: Emily Rautenberg Date: Thu, 14 Mar 2024 15:49:39 -0400 Subject: [PATCH 4/6] test(TitleRow): update snapshots --- .../components/ControlRow/__snapshots__/ControlRow.test.js.snap | 2 +- .../src/components/TitleRow/__snapshots__/TitleRow.test.js.snap | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@lightningjs/ui-components/src/components/ControlRow/__snapshots__/ControlRow.test.js.snap b/packages/@lightningjs/ui-components/src/components/ControlRow/__snapshots__/ControlRow.test.js.snap index b37f0dbeb..3de017ce3 100644 --- a/packages/@lightningjs/ui-components/src/components/ControlRow/__snapshots__/ControlRow.test.js.snap +++ b/packages/@lightningjs/ui-components/src/components/ControlRow/__snapshots__/ControlRow.test.js.snap @@ -609,7 +609,7 @@ exports[`ControlRow renders 1`] = ` "visible": true, "w": 880, "x": -40, - "y": 0, + "y": 20, "zIndex": 0, }, "Title": { diff --git a/packages/@lightningjs/ui-components/src/components/TitleRow/__snapshots__/TitleRow.test.js.snap b/packages/@lightningjs/ui-components/src/components/TitleRow/__snapshots__/TitleRow.test.js.snap index bc9837bfb..13885e62a 100644 --- a/packages/@lightningjs/ui-components/src/components/TitleRow/__snapshots__/TitleRow.test.js.snap +++ b/packages/@lightningjs/ui-components/src/components/TitleRow/__snapshots__/TitleRow.test.js.snap @@ -282,7 +282,7 @@ exports[`TitleRow renders 1`] = ` "visible": true, "w": 2220, "x": 0, - "y": 0, + "y": 20, "zIndex": 0, }, "Title": { From b353e5ef704783d58eb9301d3da873666199ba22 Mon Sep 17 00:00:00 2001 From: Emily Rautenberg Date: Mon, 18 Mar 2024 10:29:01 -0400 Subject: [PATCH 5/6] test: update snapshots --- .../ControlRow/__snapshots__/ControlRow.test.js.snap | 6 +++--- .../Shadow/__snapshots__/Shadow.test.js.snap | 10 +++++----- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/@lightningjs/ui-components/src/components/ControlRow/__snapshots__/ControlRow.test.js.snap b/packages/@lightningjs/ui-components/src/components/ControlRow/__snapshots__/ControlRow.test.js.snap index 3de017ce3..472307252 100644 --- a/packages/@lightningjs/ui-components/src/components/ControlRow/__snapshots__/ControlRow.test.js.snap +++ b/packages/@lightningjs/ui-components/src/components/ControlRow/__snapshots__/ControlRow.test.js.snap @@ -283,9 +283,9 @@ exports[`ControlRow renders 1`] = ` "ref": null, "renderOfScreen": undefined, "renderToTexture": false, - "scale": 1, - "scaleX": 1, - "scaleY": 1, + "scale": 1.2, + "scaleX": 1.2, + "scaleY": 1.2, "state": "", "tag": [Function], "type": "Tile", diff --git a/packages/@lightningjs/ui-components/src/components/Shadow/__snapshots__/Shadow.test.js.snap b/packages/@lightningjs/ui-components/src/components/Shadow/__snapshots__/Shadow.test.js.snap index c6456ae91..70cdfccc9 100644 --- a/packages/@lightningjs/ui-components/src/components/Shadow/__snapshots__/Shadow.test.js.snap +++ b/packages/@lightningjs/ui-components/src/components/Shadow/__snapshots__/Shadow.test.js.snap @@ -208,7 +208,7 @@ exports[`Shadow updates the shadow size 1`] = ` "visible": true, "w": 0, "x": 0, - "y": 2.560000057665497, + "y": 0, "zIndex": 0, }, }, @@ -217,7 +217,7 @@ exports[`Shadow updates the shadow size 1`] = ` "enabled": true, "flex": false, "flexItem": false, - "h": 344, + "h": 530, "isComponent": undefined, "mount": 0.5, "mountX": 0.5, @@ -237,9 +237,9 @@ exports[`Shadow updates the shadow size 1`] = ` "Frame", ], "visible": true, - "w": 312, - "x": 100, - "y": 116, + "w": 480, + "x": 200, + "y": 225, "zIndex": 0, }, }, From 7ac02e81c54af0df8002528654b712a144b75aa3 Mon Sep 17 00:00:00 2001 From: "David Richards, Jr" Date: Mon, 18 Mar 2024 16:43:25 -0400 Subject: [PATCH 6/6] fix(TitleRow): update test condition --- .../ui-components/src/components/TitleRow/TitleRow.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@lightningjs/ui-components/src/components/TitleRow/TitleRow.test.js b/packages/@lightningjs/ui-components/src/components/TitleRow/TitleRow.test.js index 5a029929e..7629288c0 100644 --- a/packages/@lightningjs/ui-components/src/components/TitleRow/TitleRow.test.js +++ b/packages/@lightningjs/ui-components/src/components/TitleRow/TitleRow.test.js @@ -96,12 +96,12 @@ describe('TitleRow', () => { items }, { - spyOnMethods: ['_titleLoaded'] + spyOnMethods: ['_update'] } ); expect(titleRow._Items.y).toBe(titleRow.style.titleMarginBottom); - await titleRow.__titleLoadedSpyPromise; + await titleRow.__updateSpyPromise; expect(titleRow._Items.y).toBe( titleRow._Title.finalH + titleRow.style.titleMarginBottom