Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: calculated height displayed in the inspector for Button and Tile #403

Merged
merged 2 commits into from
Nov 14, 2023
Merged

fix: calculated height displayed in the inspector for Button and Tile #403

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2a71630
fix: calculated height displayed in the inspector for Button and Tile
erautenberg Nov 8, 2023
f98dff1
test(Button): update snapshots
erautenberg Nov 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions packages/@lightningjs/ui-components/src/components/Button/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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');
}

Expand Down
2 changes: 1 addition & 1 deletion packages/@lightningjs/ui-components/src/components/Input/__snapshots__/Input.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ exports[`Input renders 1`] = `
"visible": true,
"w": 0,
"x": 30,
"y": 46,
"y": 0,
"zIndex": 2,
},
},
Expand Down
4 changes: 2 additions & 2 deletions ...es/@lightningjs/ui-components/src/components/Keyboard/__snapshots__/Keyboard.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23681,7 +23681,7 @@ exports[`KeyboardInput renders 1`] = `
"visible": true,
"w": 1920,
"x": 0,
"y": 202,
"y": 110,
"zIndex": 0,
},
},
Expand All @@ -23690,7 +23690,7 @@ exports[`KeyboardInput renders 1`] = `
"enabled": true,
"flex": false,
"flexItem": false,
"h": 202,
"h": 110,
"isComponent": undefined,
"mount": 0,
"mountX": 0,
Expand Down
18 changes: 11 additions & 7 deletions packages/@lightningjs/ui-components/src/components/Tile/Tile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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');
Expand Down
14 changes: 7 additions & 7 deletions ...ghtningjs/ui-components/src/mixins/withEditItems/__snapshots__/withEditItems.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ exports[`withEditItems renders 1`] = `
"visible": true,
"w": 0,
"x": 236,
"y": 46,
"y": 0,
"zIndex": 2,
},
},
Expand Down Expand Up @@ -449,7 +449,7 @@ exports[`withEditItems renders 1`] = `
"visible": true,
"w": 0,
"x": 236,
"y": 46,
"y": 0,
"zIndex": 2,
},
},
Expand Down Expand Up @@ -686,7 +686,7 @@ exports[`withEditItems renders 1`] = `
"visible": true,
"w": 0,
"x": 236,
"y": 46,
"y": 0,
"zIndex": 2,
},
},
Expand Down Expand Up @@ -923,7 +923,7 @@ exports[`withEditItems renders 1`] = `
"visible": true,
"w": 0,
"x": 236,
"y": 46,
"y": 0,
"zIndex": 2,
},
},
Expand Down Expand Up @@ -1160,7 +1160,7 @@ exports[`withEditItems renders 1`] = `
"visible": true,
"w": 0,
"x": 236,
"y": 46,
"y": 0,
"zIndex": 2,
},
},
Expand Down Expand Up @@ -1397,7 +1397,7 @@ exports[`withEditItems renders 1`] = `
"visible": true,
"w": 0,
"x": 236,
"y": 46,
"y": 0,
"zIndex": 2,
},
},
Expand Down Expand Up @@ -1437,7 +1437,7 @@ exports[`withEditItems renders 1`] = `
"enabled": true,
"flex": false,
"flexItem": false,
"h": 92,
"h": 0,
"isComponent": undefined,
"mount": 0,
"mountX": 0,
Expand Down
2 changes: 1 addition & 1 deletion packages/@lightningjs/ui-components/src/mixins/withThemeStyles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

/**
Expand Down