fix(NavigationManager): allow itemPosX and itemPosY to animate the Items element and adjust on the update lifecycle

Author: erautenberg

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)
+          )
+        }
+      };
+    }
+  };

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();

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;

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) {