From 8616f167579383f4f2f853a95ae6f51f17d1d467 Mon Sep 17 00:00:00 2001 From: Charles-Antoine Giroux Date: Thu, 18 Jun 2026 11:13:25 -0400 Subject: [PATCH 1/2] update elementNode.ts to take no width or height when display is flex --- src/core/elementNode.ts | 73 +++++++++++++++++++---------------------- 1 file changed, 33 insertions(+), 40 deletions(-) diff --git a/src/core/elementNode.ts b/src/core/elementNode.ts index 5408753..019b86f 100644 --- a/src/core/elementNode.ts +++ b/src/core/elementNode.ts @@ -1,58 +1,55 @@ import { renderer } from './lightningInit.js'; import { + AddColorString, + type AnimationEventHandler, + type AnimationEvents, + type AnimationSettings, type BorderRadius, type BorderStyle, - type StyleEffects, - type AnimationSettings, + type DollarString, type ElementText, - type Styles, - type AnimationEvents, - type AnimationEventHandler, - AddColorString, - TextProps, - type OnEvent, NewOmit, + type OnEvent, SingleBorderStyle, - type DollarString, + type StyleEffects, + type Styles, + TextProps, } from './intrinsicTypes.js'; import States, { type NodeStates } from './states.js'; import calculateFlexOld from './flex.js'; import calculateFlexNew from './flexLayout.js'; - -const calculateFlex = import.meta.env?.VITE_USE_NEW_FLEX - ? calculateFlexNew - : calculateFlexOld; import { - log, isArray, - keyExists, - isINode, isElementNode, isElementText, - logRenderTree, isFunction, + isINode, + isTextNode, + keyExists, + log, + logRenderTree, spliceItem, } from './utils.js'; import { isDev, SHADERS_ENABLED } from './env.js'; import { Config, isDomRendererActive } from './config.js'; import type { - RendererMain, + CoreShaderNode, + IAnimationController, INode, INodeAnimateProps, - IAnimationController, + INodeProps, + ITextNodeProps, LinearGradientProps, RadialGradientProps, + RendererMain, ShadowProps, - CoreShaderNode, - ITextNodeProps, - INodeProps, } from '@solidtv/renderer'; import { assertTruthy } from '@solidtv/renderer/utils'; import { NodeType, TextNode } from './nodeTypes.js'; import { + FocusNode, ForwardFocusHandler, setActiveElementCore, - FocusNode, } from './focusManager.js'; import { initClickInspector } from './clickInspector.js'; @@ -65,6 +62,10 @@ import { IRendererTextNodeProps, } from './dom-renderer/domRendererTypes.js'; +const calculateFlex = import.meta.env?.VITE_USE_NEW_FLEX + ? calculateFlexNew + : calculateFlexOld; + // Unified post-mutation scheduler. // // Three phases run in one microtask (or one renderer-tick callback): @@ -1640,27 +1641,19 @@ export class ElementNode { if (!props.texture) { // Set width and height to parent less offset if (isNaN(props.w as number)) { - // A flex container that sizes its width to its children (contain on the - // main axis) should default to 1 rather than filling its parent, so it - // shrinks to fit content once layout runs. - let flexFitsWidth = false; - if (node.display === 'flex') { - const flexDirection = node.flexDirection || 'row'; - const isFlexRow = - flexDirection === 'row' || flexDirection === 'row-reverse'; - flexFitsWidth = isFlexRow && node.flexBoundary !== 'fixed'; - } - - if (node.flexGrow || flexFitsWidth) { - props.w = 0; - } else { - props.w = parentWidth - props.x; - } + const defaultWidth = + this.display === 'flex' && this.flexDirection === 'row' + ? 0 + : parentWidth - props.x; + props.w = node.flexGrow ? 0 : defaultWidth; node._calcWidth = true; } if (isNaN(props.h as number)) { - props.h = parentHeight - props.y; + props.h = + this.display === 'flex' && this.flexDirection === 'column' + ? 0 + : parentHeight - props.y; node._calcHeight = true; } From 033a84a2d9b711cd42f10620fe6ef6a500133345 Mon Sep 17 00:00:00 2001 From: Charles-Antoine Giroux Date: Thu, 18 Jun 2026 12:58:51 -0400 Subject: [PATCH 2/2] add util method for _isFlexRow() and _isFlexColumn() --- src/core/elementNode.ts | 31 +++++++++++++++++++++---------- 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/src/core/elementNode.ts b/src/core/elementNode.ts index 019b86f..47a2829 100644 --- a/src/core/elementNode.ts +++ b/src/core/elementNode.ts @@ -1407,6 +1407,23 @@ export class ElementNode { } } + _isFlexRow() { + // default flexDirection is row if not specified + return ( + this.display === 'flex' && + this.flexDirection !== 'column' && + this.flexDirection !== 'column-reverse' + ); + } + + _isFlexColumn() { + return ( + this.display === 'flex' && + this.flexDirection !== 'column' && + this.flexDirection !== 'column-reverse' + ); + } + _stateChanged() { if (isDev) log('State Changed: ', this, this.states); @@ -1637,23 +1654,17 @@ export class ElementNode { } } } else { - // If its not an image or texture apply some defaults + // If it's not an image or texture apply some defaults if (!props.texture) { - // Set width and height to parent less offset + // Set width and height to parent less offset. If it's a flex, we let the flexLayout handle the calculations if (isNaN(props.w as number)) { - const defaultWidth = - this.display === 'flex' && this.flexDirection === 'row' - ? 0 - : parentWidth - props.x; + const defaultWidth = this._isFlexRow() ? 0 : parentWidth - props.x; props.w = node.flexGrow ? 0 : defaultWidth; node._calcWidth = true; } if (isNaN(props.h as number)) { - props.h = - this.display === 'flex' && this.flexDirection === 'column' - ? 0 - : parentHeight - props.y; + props.h = this._isFlexColumn() ? 0 : parentHeight - props.y; node._calcHeight = true; }