diff --git a/README.md b/README.md index 1e55b8d9..a6c0c015 100644 --- a/README.md +++ b/README.md @@ -10,16 +10,15 @@ A UI component framework for Roblox Front-End development with the goal of compi # To-Do - component/search/filled - component/search/text +- component/slider +- component/tooltip +- component/dropdown - component/menu/row/tabs - component/menu/row/bar/navigation - component/menu/column/rail - component/menu/column/drawer - component/menu/column/popup - -- component/slider -- component/dropdown -- component/tooltip - component/card - component/carousel - component/progress-indicator/linear diff --git a/src/Component/ProgressIndicator/Circular/cfusion-theme.story.luau b/src/Component/ProgressIndicator/Circular/cfusion-theme.story.luau index a3cc4882..bd5c922d 100644 --- a/src/Component/ProgressIndicator/Circular/cfusion-theme.story.luau +++ b/src/Component/ProgressIndicator/Circular/cfusion-theme.story.luau @@ -57,8 +57,8 @@ return function(frame: Frame) -- Color3.fromHSV(0, 0.25, 0.8), -- Color3.fromHSV(0, 0.9, 0.5), Color3.fromHSV(0.6, 0.9, 0.7), - Color3.fromHSV(0.35, 0.9, 0.7), - Color3.fromHSV(0.1, 0.9, 0.7), + -- Color3.fromHSV(0.35, 0.9, 0.7), + -- Color3.fromHSV(0.1, 0.9, 0.7), } for i, color in ipairs(COLORS) do diff --git a/src/Component/ProgressIndicator/Circular/cfusion.story.luau b/src/Component/ProgressIndicator/Circular/cfusion.story.luau index 28e9d87e..49480ba4 100644 --- a/src/Component/ProgressIndicator/Circular/cfusion.story.luau +++ b/src/Component/ProgressIndicator/Circular/cfusion.story.luau @@ -39,7 +39,7 @@ return function(frame: Frame) local function makeHalfFrame(isDarkMode: boolean, color: Color3): Frame local style = Style.new( - 1.5, + 1, "Source Sans", if isDarkMode then Enums.SchemeType.Dark else Enums.SchemeType.Light, color @@ -79,8 +79,8 @@ return function(frame: Frame) -- Color3.fromHSV(0, 0.25, 0.8), -- Color3.fromHSV(0, 0.9, 0.5), Color3.fromHSV(0.6, 0.9, 0.7), - Color3.fromHSV(0.35, 0.9, 0.7), - Color3.fromHSV(0.1, 0.9, 0.7), + -- Color3.fromHSV(0.35, 0.9, 0.7), + -- Color3.fromHSV(0.1, 0.9, 0.7), } for i, color in ipairs(COLORS) do @@ -99,7 +99,7 @@ return function(frame: Frame) end for i = 1, 1000 do - task.wait(6) + task.wait(4) if isDead then break end @@ -108,6 +108,7 @@ return function(frame: Frame) else frame:SetAttribute(KEY, math.random()) end + -- frame:SetAttribute(KEY, nil) end end) diff --git a/src/Component/ProgressIndicator/Circular/init.luau b/src/Component/ProgressIndicator/Circular/init.luau index 51aef134..4aec7572 100644 --- a/src/Component/ProgressIndicator/Circular/init.luau +++ b/src/Component/ProgressIndicator/Circular/init.luau @@ -28,11 +28,13 @@ type ButtonData = Types.ButtonData type Style = Style.Style -- Constants -local DIAMETER_DP = 48 +local DIAMETER_DP = 36 --48 local RING_ASSET_URL = "rbxassetid://3587367081" local ROTATION_OFFSET = 180 local BUFFER = 10 local USE_EDITABLE_IMAGE = RunService:IsStudio() +local EDIT_IMG_WIDTH = 48 +local DEBUG_ENABLED = false -- Variables -- References -- Private Functions @@ -331,15 +333,21 @@ function Interface.ColdFusion.new( end)) local editableImage = maid:GiveTask(Instance.new("EditableImage")) - local imageLabel = _new("ImageLabel")({ - Size = UDim2.fromScale(1, 1), - AnchorPoint = Vector2.new(0.5, 0.5), - Position = UDim2.fromScale(0.5, 0.5), - BackgroundTransparency = 1, - Children = { - editableImage - } - }) :: GuiObject + local imageLabel: GuiObject? + + if USE_EDITABLE_IMAGE then + + imageLabel = _new("ImageLabel")({ + Size = UDim2.fromScale(1, 1), + AnchorPoint = Vector2.new(0.5, 0.5), + Position = UDim2.fromScale(0.5, 0.5), + BackgroundTransparency = 1, + Children = { + editableImage + } + }) :: GuiObject + + end local out = _new("Frame")({ Size = _Computed(function(s: Style): UDim2 @@ -371,33 +379,64 @@ function Interface.ColdFusion.new( }, }) :: GuiObject + if DEBUG_ENABLED then + _new("TextLabel")({ + Text = _Computed(function(inputProgress: number?): string + return if inputProgress then tostring(math.round(inputProgress*100)) else "?" + end, inputProgressState), + TextSize = 16, + TextColor3 = fillColorState, + Parent = out, + BackgroundTransparency = 1, + Size = UDim2.fromScale(1,1), + }) + end + if USE_EDITABLE_IMAGE then + assert(imageLabel) + + maid:GiveTask(RunService.RenderStepped:Connect(function(deltaTime: number) - editableImage.Size = imageLabel.AbsoluteSize - local outerRadius = editableImage.Size.X * 0.5 - local innerRadius = outerRadius * 0.5 + editableImage.Size = Vector2.new( + EDIT_IMG_WIDTH, --math.round(imageLabel.AbsoluteSize.X * 0.5), + EDIT_IMG_WIDTH --math.round(imageLabel.AbsoluteSize.Y * 0.5) + ) + local outerRadius = math.ceil(editableImage.Size.X * 0.5 - 1) + local innerRadius = math.ceil(outerRadius * 0.5) local center = editableImage.Size/2 local fCol = fillColorState:Get() local eCol = emptyColorState:Get() local trans = transparencyState:Get() editableImage:DrawRectangle(Vector2.zero, editableImage.Size-Vector2.one, eCol, 1) + + local startAngle = progressStartState:Get()--+BUFFER + local widthAngle = progressWidthState:Get() + local midAngle = startAngle + widthAngle * 0.5 + local finishAngle = startAngle + widthAngle---BUFFER + + local fillCount = 0 + + local function getIfFilled(angle: number): boolean + return (angle >= startAngle and angle < (if midAngle > 360 or finishAngle > 360 then 360 else midAngle)) + or (angle >= (if midAngle > 360 or finishAngle > 360 then 0 else midAngle) and angle < finishAngle%360) + end + for y=0, editableImage.Size.Y-1 do for x=0, editableImage.Size.X-1 do - local offset = (Vector2.new(x,y)-center)*Vector2.new(1,-1) + local offset = (Vector2.new(x,y)-center)*Vector2.new(1,1) local dist = offset.Magnitude if dist > innerRadius and dist < outerRadius then - local startAngle = progressStartState:Get()+BUFFER - local widthAngle = progressWidthState:Get() - local finishAngle = startAngle + widthAngle-BUFFER - local angle = math.deg(math.atan2(offset.Y, offset.X)) + local angle = math.deg(math.atan2(offset.Y, offset.X)+math.rad(90)) if angle < 0 then - angle = math.deg(360)-angle + angle = 360 + angle end - local isFilled = angle > startAngle and angle < finishAngle + + local isFilled = getIfFilled(angle) if isFilled then + fillCount += 1 editableImage:DrawRectangle( Vector2.new(x,y), Vector2.one, @@ -415,6 +454,8 @@ function Interface.ColdFusion.new( end end end + -- print(`{math.round(startAngle)}->{math.round(finishAngle)}={fillCount}`) + end)) end diff --git a/src/Component/Search/Base.luau b/src/Component/Search/Base.luau index 3c176902..b2762a79 100644 --- a/src/Component/Search/Base.luau +++ b/src/Component/Search/Base.luau @@ -79,7 +79,6 @@ function newPanel( return s:GetElevatedColor(tC, e) end, styleState, textColorState, elevationState) - local textBox = _new("TextBox")({ LayoutOrder = 2, AutomaticSize = Enum.AutomaticSize.None, @@ -108,6 +107,14 @@ function newPanel( }) :: TextBox textBox.TextTruncate = Enum.TextTruncate.None + + local currentText = _Value(textBox.Text) + maid:GiveTask(textBox:GetPropertyChangedSignal("Text"):Connect(function(txt: string) + currentText:Set(textBox.Text) + end)) + + currentText:Destroy() + maid:GiveTask(textBox.FocusLost:Connect(function() onBack(textBox.Text) end)) diff --git a/src/Component/Search/Filled/init.luau b/src/Component/Search/Filled/init.luau index d4f9dd4a..1d32e1c7 100644 --- a/src/Component/Search/Filled/init.luau +++ b/src/Component/Search/Filled/init.luau @@ -28,14 +28,8 @@ type Method = () -> () type OptionConstructor = Base.OptionConstructor -- Constants -local PADDING_DP = 8 -local CORNER_DP = 4 - -local TEXT_FONT_TYPE = Enums.FontType.LabelLarge -- Variables -- References -local Icons = MaterialIcons.default.dp_48.scale_1 - -- Private Functions -- Class diff --git a/synthetic.rbxl.lock b/synthetic.rbxl.lock index 5be5d686..9a59f651 100644 --- a/synthetic.rbxl.lock +++ b/synthetic.rbxl.lock @@ -1,4 +1,4 @@ -10460 +22068 RobloxStudioBeta DESKTOP-UIAPQFM faf3918c-cd67-4e9b-95e8-76107b83bc31