From 2a71630360a302311b1e2f3a0fb48b9cbfacc807 Mon Sep 17 00:00:00 2001 From: Emily Rautenberg Date: Wed, 8 Nov 2023 18:24:59 -0500 Subject: [PATCH 1/2] fix: calculated height displayed in the inspector for Button and Tile --- .../src/components/Button/Button.js | 18 +++++++++--------- .../ui-components/src/components/Tile/Tile.js | 18 +++++++++++------- .../src/mixins/withThemeStyles/index.js | 2 +- 3 files changed, 21 insertions(+), 17 deletions(-) diff --git a/packages/@lightningjs/ui-components/src/components/Button/Button.js b/packages/@lightningjs/ui-components/src/components/Button/Button.js index 66555c49d..7e4c3fcf1 100644 --- a/packages/@lightningjs/ui-components/src/components/Button/Button.js +++ b/packages/@lightningjs/ui-components/src/components/Button/Button.js @@ -241,14 +241,6 @@ export default class Button extends Surface { this._Content.patch(this._contentProps); } - set h(v) { - super.h = v; - } - - get h() { - return super.h || this.style.textStyle.lineHeight + this.style.paddingY * 2; - } - _updateSurfaceDimensions() { let newWidth = this.w; if (this.fixed) { @@ -269,7 +261,15 @@ export default class Button extends Surface { this.w = newWidth; } - // TODO breaks row resizing if this is wrapped in the above conditional + // In order to ensure the "hSetByUser" flag is not set to true, + // skip over "set h" by directly updating "_h" + // Using the "get h" return statement does not force an update to the inspector, + // whereas this will ensure the "height" attribute is updated + if (!this._hSetByUser && !this.style.h) { + this._h = this.style.textStyle.lineHeight + this.style.paddingY * 2; + } + + // TODO breaks row resizing if this is wrapped in the width conditional above this.fireAncestors('$itemChanged'); } diff --git a/packages/@lightningjs/ui-components/src/components/Tile/Tile.js b/packages/@lightningjs/ui-components/src/components/Tile/Tile.js index ea426e09b..aac156093 100644 --- a/packages/@lightningjs/ui-components/src/components/Tile/Tile.js +++ b/packages/@lightningjs/ui-components/src/components/Tile/Tile.js @@ -130,14 +130,13 @@ export default class Tile extends Surface { /* ------------------------------ Tile ------------------------------ */ - set h(v) { - super.h = v; - } - - get h() { + _getRenderHeight() { + // if there is Metadata below the Tile, override _getRenderHeight + // in order to return the fully calculated height, + // not the height stored in "_h" for just the tile image return !this._isInsetMetadata - ? super.h + ((this._Metadata && this._Metadata.h) || 0) - : super.h; + ? this._h + (this._Metadata?.h + this.style.paddingY || 0) + : super._getRenderHeight(); } get innerH() { @@ -624,6 +623,11 @@ export default class Tile extends Surface { _metadataLoaded() { this._animateMetadata(); this._updateLogo(); + + // if the metadata height has changed, the height of the entire Tile has changed + // and the inspector must be updated via _getRenderHeight() + this._updateDimensions(); + // Send event to columns/rows that the height has been updated since metadata will be displayed below the Tile if (!this._isInsetMetadata) { this.fireAncestors('$itemChanged'); diff --git a/packages/@lightningjs/ui-components/src/mixins/withThemeStyles/index.js b/packages/@lightningjs/ui-components/src/mixins/withThemeStyles/index.js index 1ce922bce..f2de58ca4 100644 --- a/packages/@lightningjs/ui-components/src/mixins/withThemeStyles/index.js +++ b/packages/@lightningjs/ui-components/src/mixins/withThemeStyles/index.js @@ -337,7 +337,7 @@ export default function withThemeStyles(Base, mixinStyle = {}) { * @return {number} */ get h() { - return (this._hSetByUser && this._h) || this.style?.h || 0; + return (this._hSetByUser && this._h) || this.style?.h || this._h || 0; } /** From f98dff175e8cbbacf7485811ec4f9eb35616d4ac Mon Sep 17 00:00:00 2001 From: Emily Rautenberg Date: Tue, 14 Nov 2023 13:51:23 -0500 Subject: [PATCH 2/2] test(Button): update snapshots --- .../Input/__snapshots__/Input.test.js.snap | 2 +- .../Keyboard/__snapshots__/Keyboard.test.js.snap | 4 ++-- .../__snapshots__/withEditItems.test.js.snap | 14 +++++++------- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/@lightningjs/ui-components/src/components/Input/__snapshots__/Input.test.js.snap b/packages/@lightningjs/ui-components/src/components/Input/__snapshots__/Input.test.js.snap index dfc2eec3f..9312aab12 100644 --- a/packages/@lightningjs/ui-components/src/components/Input/__snapshots__/Input.test.js.snap +++ b/packages/@lightningjs/ui-components/src/components/Input/__snapshots__/Input.test.js.snap @@ -186,7 +186,7 @@ exports[`Input renders 1`] = ` "visible": true, "w": 0, "x": 30, - "y": 46, + "y": 0, "zIndex": 2, }, }, diff --git a/packages/@lightningjs/ui-components/src/components/Keyboard/__snapshots__/Keyboard.test.js.snap b/packages/@lightningjs/ui-components/src/components/Keyboard/__snapshots__/Keyboard.test.js.snap index 2b9298ca0..7685de0dc 100644 --- a/packages/@lightningjs/ui-components/src/components/Keyboard/__snapshots__/Keyboard.test.js.snap +++ b/packages/@lightningjs/ui-components/src/components/Keyboard/__snapshots__/Keyboard.test.js.snap @@ -23681,7 +23681,7 @@ exports[`KeyboardInput renders 1`] = ` "visible": true, "w": 1920, "x": 0, - "y": 202, + "y": 110, "zIndex": 0, }, }, @@ -23690,7 +23690,7 @@ exports[`KeyboardInput renders 1`] = ` "enabled": true, "flex": false, "flexItem": false, - "h": 202, + "h": 110, "isComponent": undefined, "mount": 0, "mountX": 0, diff --git a/packages/@lightningjs/ui-components/src/mixins/withEditItems/__snapshots__/withEditItems.test.js.snap b/packages/@lightningjs/ui-components/src/mixins/withEditItems/__snapshots__/withEditItems.test.js.snap index 4c421a255..a6e103019 100644 --- a/packages/@lightningjs/ui-components/src/mixins/withEditItems/__snapshots__/withEditItems.test.js.snap +++ b/packages/@lightningjs/ui-components/src/mixins/withEditItems/__snapshots__/withEditItems.test.js.snap @@ -212,7 +212,7 @@ exports[`withEditItems renders 1`] = ` "visible": true, "w": 0, "x": 236, - "y": 46, + "y": 0, "zIndex": 2, }, }, @@ -449,7 +449,7 @@ exports[`withEditItems renders 1`] = ` "visible": true, "w": 0, "x": 236, - "y": 46, + "y": 0, "zIndex": 2, }, }, @@ -686,7 +686,7 @@ exports[`withEditItems renders 1`] = ` "visible": true, "w": 0, "x": 236, - "y": 46, + "y": 0, "zIndex": 2, }, }, @@ -923,7 +923,7 @@ exports[`withEditItems renders 1`] = ` "visible": true, "w": 0, "x": 236, - "y": 46, + "y": 0, "zIndex": 2, }, }, @@ -1160,7 +1160,7 @@ exports[`withEditItems renders 1`] = ` "visible": true, "w": 0, "x": 236, - "y": 46, + "y": 0, "zIndex": 2, }, }, @@ -1397,7 +1397,7 @@ exports[`withEditItems renders 1`] = ` "visible": true, "w": 0, "x": 236, - "y": 46, + "y": 0, "zIndex": 2, }, }, @@ -1437,7 +1437,7 @@ exports[`withEditItems renders 1`] = ` "enabled": true, "flex": false, "flexItem": false, - "h": 92, + "h": 0, "isComponent": undefined, "mount": 0, "mountX": 0,