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..f62e9b7f6 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": 68, + "y": 52, "zIndex": 0, }, "Title": { @@ -671,7 +671,7 @@ exports[`ControlRow renders 1`] = ` "enabled": true, "flex": false, "flexItem": false, - "h": 48, + "h": 32, "hasFinalFocus": false, "hasFocus": false, "isComponent": true, diff --git a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js index 771b00eaa..a2013c4d6 100644 --- a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js +++ b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js @@ -139,7 +139,10 @@ export default class InlineContent extends Base { _notifyAncestors() { this.fireAncestors('$loadedInlineContent', this); - this.signal('loadedInlineContent', this.finalW, this.multiLineHeight); + this.signal('loadedInlineContent', { + w: this.finalW, + h: this.multiLineHeight + }); } _contentLoaded() { diff --git a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.test.js b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.test.js index a75d63fa4..50ad2dbed 100644 --- a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.test.js +++ b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.test.js @@ -371,11 +371,10 @@ describe('InlineContent', () => { '$loadedInlineContent', inlineContent ); - expect(inlineContent.signal).toHaveBeenCalledWith( - 'loadedInlineContent', - inlineContent.finalW, - inlineContent.multiLineHeight - ); + expect(inlineContent.signal).toHaveBeenCalledWith('loadedInlineContent', { + w: inlineContent.finalW, + h: inlineContent.multiLineHeight + }); }); it('should truncate content that exceeds the defined max lines', async () => { diff --git a/packages/@lightningjs/ui-components/src/components/ScrollWrapper/__snapshots__/ScrollWrapper.test.js.snap b/packages/@lightningjs/ui-components/src/components/ScrollWrapper/__snapshots__/ScrollWrapper.test.js.snap index ae9d7e06a..e601fec89 100644 --- a/packages/@lightningjs/ui-components/src/components/ScrollWrapper/__snapshots__/ScrollWrapper.test.js.snap +++ b/packages/@lightningjs/ui-components/src/components/ScrollWrapper/__snapshots__/ScrollWrapper.test.js.snap @@ -497,10 +497,11 @@ exports[`ScrollWrapper renders 1`] = ` "textColor": 4294506490, "type": "TextTexture", "verticalAlign": "middle", + "w": 24, "wordWrapWidth": 48, }, "visible": true, - "w": 0, + "w": 24, "x": 0, "y": 2, "zIndex": 0, @@ -511,7 +512,7 @@ exports[`ScrollWrapper renders 1`] = ` "enabled": true, "flex": false, "flexItem": true, - "h": 513, + "h": 342, "hasFinalFocus": false, "hasFocus": false, "isComponent": true, @@ -534,7 +535,7 @@ exports[`ScrollWrapper renders 1`] = ` ], "type": "TextBox", "visible": true, - "w": 46.5, + "w": 36, "x": 0, "y": 0, "zIndex": 0, @@ -545,7 +546,7 @@ exports[`ScrollWrapper renders 1`] = ` "enabled": true, "flex": true, "flexItem": true, - "h": 513, + "h": 342, "isComponent": undefined, "mount": 0, "mountX": 0, @@ -666,10 +667,11 @@ exports[`ScrollWrapper renders a content array 1`] = ` "textColor": 4294506490, "type": "TextTexture", "verticalAlign": "middle", + "w": 48, "wordWrapWidth": 48, }, "visible": true, - "w": 0, + "w": 48, "x": 0, "y": 2, "zIndex": 0, @@ -680,7 +682,7 @@ exports[`ScrollWrapper renders a content array 1`] = ` "enabled": true, "flex": false, "flexItem": true, - "h": 33, + "h": 22, "hasFinalFocus": false, "hasFocus": false, "isComponent": true, @@ -703,7 +705,7 @@ exports[`ScrollWrapper renders a content array 1`] = ` ], "type": "TextBox", "visible": true, - "w": 12, + "w": 72, "x": 0, "y": 0, "zIndex": 0, @@ -754,10 +756,11 @@ exports[`ScrollWrapper renders a content array 1`] = ` "textColor": 4294506490, "type": "TextTexture", "verticalAlign": "middle", + "w": 48, "wordWrapWidth": 48, }, "visible": true, - "w": 0, + "w": 48, "x": 0, "y": 2, "zIndex": 0, @@ -768,7 +771,7 @@ exports[`ScrollWrapper renders a content array 1`] = ` "enabled": true, "flex": false, "flexItem": true, - "h": 513, + "h": 342, "hasFinalFocus": false, "hasFocus": false, "isComponent": true, @@ -791,7 +794,7 @@ exports[`ScrollWrapper renders a content array 1`] = ` ], "type": "TextBox", "visible": true, - "w": 46.5, + "w": 72, "x": 0, "y": 0, "zIndex": 0, @@ -1318,10 +1321,11 @@ exports[`ScrollWrapper renders a content string 1`] = ` "textColor": 4294506490, "type": "TextTexture", "verticalAlign": "middle", + "w": 24, "wordWrapWidth": 48, }, "visible": true, - "w": 0, + "w": 24, "x": 0, "y": 2, "zIndex": 0, @@ -1332,7 +1336,7 @@ exports[`ScrollWrapper renders a content string 1`] = ` "enabled": true, "flex": false, "flexItem": true, - "h": 513, + "h": 342, "hasFinalFocus": false, "hasFocus": false, "isComponent": true, @@ -1355,7 +1359,7 @@ exports[`ScrollWrapper renders a content string 1`] = ` ], "type": "TextBox", "visible": true, - "w": 46.5, + "w": 36, "x": 0, "y": 0, "zIndex": 0, @@ -1366,7 +1370,7 @@ exports[`ScrollWrapper renders a content string 1`] = ` "enabled": true, "flex": true, "flexItem": true, - "h": 513, + "h": 342, "isComponent": undefined, "mount": 0, "mountX": 0, diff --git a/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.js b/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.js index 111533463..d453f787b 100644 --- a/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.js +++ b/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.js @@ -71,7 +71,10 @@ export default class TextBox extends Base { ]; } - _setDimensions(w, h) { + _setDimensions({ w, h }) { + // This is where dimensions are looping and causing the component to stretch infinitely. + !this._isInlineContent && console.trace(w, h); + let width = w; let height = h; if (!this._isInlineContent) { @@ -82,7 +85,8 @@ export default class TextBox extends Base { const sizeChanged = this.w !== width || this.h !== height; if (width && height && sizeChanged) { - this.h = height; + this.h = + height * (this._isInlineContent ? 1 : this.stage.getRenderPrecision()); if (!this.fixed) { this.w = width; } @@ -197,14 +201,30 @@ export default class TextBox extends Base { const fontStyle = this._textStyleSet; if (this._Text) { - this._Text.patch({ + let patchObj = { + w: w => w, y: this.style.offsetY, - x: this.style.offsetX, - text: { - ...lightningTextDefaults, // order matters this should always be first - ...fontStyle - } + x: this.style.offsetX + }; + + const textString = JSON.stringify({ + ...lightningTextDefaults, // order matters this should always be first + ...fontStyle }); + + if (textString !== this._textString) { + patchObj = { + ...patchObj, + + text: { + ...lightningTextDefaults, // order matters this should always be first + ...fontStyle + } + }; + this._textString = textString; + } + + this._Text.patch(patchObj); } } 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..b86d98b09 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": 52, "zIndex": 0, }, "Title": { @@ -344,7 +344,7 @@ exports[`TitleRow renders 1`] = ` "enabled": true, "flex": false, "flexItem": false, - "h": 48, + "h": 32, "hasFinalFocus": false, "hasFocus": false, "isComponent": true, diff --git a/packages/@lightningjs/ui-components/src/components/Tooltip/__snapshots__/Tooltip.test.js.snap b/packages/@lightningjs/ui-components/src/components/Tooltip/__snapshots__/Tooltip.test.js.snap index ebe9e2164..e55121a44 100644 --- a/packages/@lightningjs/ui-components/src/components/Tooltip/__snapshots__/Tooltip.test.js.snap +++ b/packages/@lightningjs/ui-components/src/components/Tooltip/__snapshots__/Tooltip.test.js.snap @@ -25,7 +25,7 @@ exports[`Tooltip renders 1`] = ` "enabled": true, "flex": false, "flexItem": false, - "h": 0, + "h": 33, "isComponent": undefined, "mount": 0, "mountX": 0, @@ -48,6 +48,7 @@ exports[`Tooltip renders 1`] = ` "fontFace": "Arial", "fontSize": 20, "fontStyle": "300", + "h": 33, "lineHeight": 32, "precision": 0.6666666666666666, "text": "Tooltip", @@ -55,9 +56,10 @@ exports[`Tooltip renders 1`] = ` "textColor": 4279769113, "type": "TextTexture", "verticalAlign": "middle", + "w": 605.48291015625, }, "visible": true, - "w": 0, + "w": 605.48291015625, "x": 0, "y": 2, "zIndex": 0, @@ -91,8 +93,8 @@ exports[`Tooltip renders 1`] = ` ], "type": "TextBox", "visible": true, - "w": 10.5, - "x": 25.25, + "w": 908.224365234375, + "x": 474.1121826171875, "y": 26.5, "zIndex": 0, }, @@ -124,10 +126,10 @@ exports[`Tooltip renders 1`] = ` "texture": { "h": 73, "type": "Bubble", - "w": 50.5, + "w": 948.224365234375, }, "visible": true, - "w": 50.5, + "w": 948.224365234375, "x": 0, "y": 0, "zIndex": 0,