hoarcekat icon indicating copy to clipboard operation
hoarcekat copied to clipboard

Doesn't work with UIListLayout Flex Features [Beta]

Open Shadercloud opened this issue 1 year ago • 1 comments

I have a created a test story using which utilizes the new UIListLayout Flex Feature but Hoarcekat does not display it correctly.

If you create this same setup in Roblox studio StarterGUI it will display normally with the YellowTest frame being the same size as it's parent GreenFill.

But in Hoarcekat window view it shows the YellowTest overflowing.

If you click the "UI" display it displays it incorrectly again (Yellow has disappeared). And then if you click "UI" again to bring it back to window preview the layout is different again (and still incorrect).

local ReplicatedStorage = game:GetService("ReplicatedStorage") 
local React = require(ReplicatedStorage:WaitForChild("Packages"):WaitForChild("react"))
local ReactRoblox = require(ReplicatedStorage:WaitForChild("Packages"):WaitForChild("react-roblox"))

return function(target)
    local app = React.createElement("Frame", {
        Size = UDim2.fromScale(0.5, 0.5),
        AnchorPoint = Vector2.new(0.5, 0.5),
        Position = UDim2.fromScale(0.5,0.5),
    }, {
        UIListLayout = React.createElement("UIListLayout", {
            SortOrder = Enum.SortOrder.LayoutOrder
        }),
        RedTop = React.createElement("Frame", {
            Size = UDim2.fromScale(1,1),
            BackgroundColor3 = Color3.new(1,0,0),
            BackgroundTransparency = 0.2,
            LayoutOrder = 1
        }, {
            UIAspectRatioConstraint = React.createElement("UIAspectRatioConstraint", {
                AspectRatio = 4
            })
        }),
        GreenFill = React.createElement("Frame", {
            Size = UDim2.fromScale(1,1),
            BackgroundColor3 = Color3.new(0,1,0),
            BackgroundTransparency = 0.2,
            LayoutOrder = 2
        }, {
            UIFlexItem = React.createElement("UIFlexItem", {
                FlexMode = Enum.UIFlexMode.Fill,
            }),
            YellowTest = React.createElement("Frame", {
                Size = UDim2.fromScale(1,1),
                BackgroundColor3 = Color3.new(1, 1, 0),
                BackgroundTransparency = 0.5
            })
        }),
        BlueTop = React.createElement("Frame", {
            Size = UDim2.fromScale(1,1),
            BackgroundColor3 = Color3.new(0,0,2),
            BackgroundTransparency = 0.2,
            LayoutOrder = 3
        }, {
            UIAspectRatioConstraint = React.createElement("UIAspectRatioConstraint", {
                AspectRatio = 4
            })
        }),
    })

    local rootInstance = Instance.new("Folder")
    rootInstance.Name = "Preview"
    rootInstance.Parent = target

    local gui = ReactRoblox.createBlockingRoot(rootInstance)
    gui:render(app)
    return function()
        gui:unmount()
    end
end

Shadercloud avatar Jan 17 '24 11:01 Shadercloud

I don't know anything about the flex layout stuff but this sounds like a Roblox bug and not Hoarcekat?

Kampfkarren avatar Jan 20 '24 20:01 Kampfkarren