cluaupp 0.1.0

package/runtime/TopbarPlus/Features/Overflow.lua

@@ -0,0 +1,360 @@
+-- When designing your game for many devices and screen sizes, icons may occasionally
+-- particularly for smaller devices like phones, overlap with other icons or the bounds
+-- of the screen. The overflow handler solves this challenge by moving the out-of-bounds
+-- icon into an overflow menu (with a limited scrolling canvas) preventing overlaps occuring
+
+
+
+-- LOCAL
+local Overflow = {}
+local holders = {}
+local orderedAvailableIcons = {}
+local iconsDict
+local currentCamera = workspace.CurrentCamera
+local overflowIcons = {}
+local overflowIconUIDs = {}
+local Utility = require(script.Parent.Parent.Utility)
+local beginCheckingCenterIcons = false
+local beganSecondaryCenterCheck = false
+local Icon
+
+
+
+-- FUNCTIONS
+-- This is called upon the Icon initializing
+function Overflow.start(incomingIcon)
+	Icon = incomingIcon
+	iconsDict = Icon.iconsDictionary
+	local primaryScreenGui
+	for _, screenGui in pairs(Icon.container) do
+		if primaryScreenGui == nil and screenGui.ScreenInsets == Enum.ScreenInsets.TopbarSafeInsets then
+			primaryScreenGui = screenGui
+		end
+		for _, holder in pairs(screenGui.Holders:GetChildren()) do
+			if holder:GetAttribute("IsAHolder") then
+				holders[holder.Name] = holder
+			end
+		end
+	end
+
+	-- We listen for changes in icons (such as them being added, removed,
+	-- the setting of a different alignment, the widget size changing, etc)
+	local beginOverflow = false
+	local updateBoundaries = Utility.createStagger(0.1, function(ignoreAvailable)
+		if not beginOverflow then
+			return
+		end
+		if not ignoreAvailable then
+			Overflow.updateAvailableIcons("Center")
+		end
+		Overflow.updateBoundary("Left")
+		Overflow.updateBoundary("Right")
+	end)
+	task.delay(0.5, function()
+		beginOverflow = true
+		updateBoundaries()
+	end)
+	task.delay(2, function()
+		-- This is essential to prevent central icons begin added
+		-- left or right due to incomplete UIListLayout calculations
+		-- within the first few frames
+		beginCheckingCenterIcons = true
+		updateBoundaries()
+	end)
+	Icon.iconAdded:Connect(updateBoundaries)
+	Icon.iconRemoved:Connect(updateBoundaries)
+	Icon.iconChanged:Connect(updateBoundaries)
+	currentCamera:GetPropertyChangedSignal("ViewportSize"):Connect(function()
+		updateBoundaries(true)
+	end)
+	primaryScreenGui:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
+		updateBoundaries(true)
+	end)
+end
+
+function Overflow.getWidth(icon, getMaxWidth)
+	local widget = icon.widget
+	return widget:GetAttribute("TargetWidth") or widget.AbsoluteSize.X
+end
+
+function Overflow.getAvailableIcons(alignment)
+	local ourOrderedIcons = orderedAvailableIcons[alignment]
+	if not ourOrderedIcons then
+		ourOrderedIcons = Overflow.updateAvailableIcons(alignment)
+	end
+	return ourOrderedIcons
+end
+
+function Overflow.updateAvailableIcons(alignment)
+
+	-- We only track items that are directly on the topbar (i.e. not within a parent icon)
+	local ourTotal = 0
+	local ourOrderedIcons = {}
+	for _, icon in pairs(iconsDict) do
+		local parentUID = icon.parentIconUID
+		local isDirectlyOnTopbar = not parentUID or overflowIconUIDs[parentUID]
+		local isOverflow = overflowIconUIDs[icon.UID]
+		if isDirectlyOnTopbar and icon.alignment == alignment and not isOverflow and icon.isEnabled then
+			table.insert(ourOrderedIcons, icon)
+			ourTotal += 1
+		end
+	end
+
+	-- Ignore if no icons are available
+	if ourTotal <= 0 then
+		return {}
+	end
+
+	-- This sorts these icons by smallest order, or if equal, left-most position
+	-- (even for the right alignment because all icons are sorted left-to-right)
+	table.sort(ourOrderedIcons, function(iconA, iconB)
+		local orderA = iconA.widget.LayoutOrder
+		local orderB = iconB.widget.LayoutOrder
+		local hasParentA = iconA.parentIconUID
+		local hasParentB = iconB.parentIconUID
+		if hasParentA == hasParentB then
+			if orderA < orderB then
+				return true
+			end
+			if orderA > orderB then
+				return false
+			end
+			return iconA.widget.AbsolutePosition.X < iconB.widget.AbsolutePosition.X
+		elseif hasParentB then
+			return false
+		elseif hasParentA then
+			return true
+		end
+		return nil
+	end)
+
+	-- Finish up
+	orderedAvailableIcons[alignment] = ourOrderedIcons
+	return ourOrderedIcons
+
+end
+
+function Overflow.getRealXPositions(alignment, orderedIcons)
+	-- We calculate the the absolute position of icons instead of reading
+	-- directly to determine where they would be if not within an overflow
+	local isLeft = alignment == "Left"
+	local holder = holders[alignment]
+	local holderXPos = holder.AbsolutePosition.X
+	local holderXSize = holder.AbsoluteSize.X
+	local holderUIList = holder.UIListLayout
+	local topbarInset = holderUIList.Padding.Offset
+	local absoluteX = (isLeft and holderXPos) or holderXPos + holderXSize
+	local realXPositions = {}
+	if isLeft then
+		Utility.reverseTable(orderedIcons)
+	end
+	for i = #orderedIcons, 1, -1 do
+		local icon = orderedIcons[i]
+		local sizeX = Overflow.getWidth(icon)
+		if not isLeft then
+			absoluteX -= sizeX
+		end
+		realXPositions[icon.UID] = absoluteX
+		if isLeft then
+			absoluteX += sizeX
+		end
+		absoluteX += (isLeft and topbarInset) or -topbarInset
+	end
+	return realXPositions
+end
+
+function Overflow.updateBoundary(alignment)
+
+	-- We only track items that are directly on the topbar (i.e. not within a parent icon) or within an overflow
+	local holder = holders[alignment]
+	local holderUIList = holder.UIListLayout
+	local holderXPos = holder.AbsolutePosition.X
+	local holderXSize = holder.AbsoluteSize.X
+	local topbarInset = holderUIList.Padding.Offset
+	local topbarPadding = holderUIList.Padding.Offset
+	local BOUNDARY_GAP = topbarInset
+	local ourOrderedIcons = Overflow.updateAvailableIcons(alignment)
+	local boundWidth = 0
+	local ourTotal = 0
+	for _, icon in pairs(ourOrderedIcons) do
+		boundWidth += Overflow.getWidth(icon) + topbarPadding
+		ourTotal += 1
+	end
+	if ourTotal <= 0 then
+		return
+	end
+	
+	-- These are the icons with menus which icons will be moved into
+	-- when overflowing
+	local isCentral = alignment == "Center"
+	local isLeft = alignment == "Left"
+	local isRight = not isLeft
+	local overflowIcon = overflowIcons[alignment]
+	if not overflowIcon and not isCentral and #ourOrderedIcons > 0 then
+		local order = (isLeft and -9999999) or 9999999
+		overflowIcon = Icon.new()--:setLabel(`{alignment}`)
+		overflowIcon:setImage(6069276526, "Deselected")
+		overflowIcon:setName("Overflow"..alignment)
+		overflowIcon:setOrder(order)
+		overflowIcon:setAlignment(alignment)
+		overflowIcon:autoDeselect(false)
+		overflowIcon.isAnOverflow = true
+		--overflowIcon:freezeMenu()
+		overflowIcon:select("OverflowStart", overflowIcon)
+		overflowIcon:setEnabled(false)
+		overflowIcons[alignment] = overflowIcon
+		overflowIconUIDs[overflowIcon.UID] = true
+		if not Icon.closeableOverflowMenus then
+			local iconSpot = overflowIcon:getInstance("IconSpot")
+			iconSpot.Visible = false
+		end
+	end
+
+	-- The default boundary is the point where both the left-most-right-icon
+	-- and left-most-right-icon meet OR the opposite side of the screen
+	local oppositeAlignment = (alignment == "Left" and "Right") or "Left"
+	local oppositeOrderedIcons = Overflow.updateAvailableIcons(oppositeAlignment)
+	local nearestOppositeIcon = (isLeft and oppositeOrderedIcons[1]) or (isRight and oppositeOrderedIcons[#oppositeOrderedIcons])
+	local oppositeOverflowIcon = overflowIcons[oppositeAlignment]
+	local boundary = (isLeft and holderXPos + holderXSize) or holderXPos
+	if nearestOppositeIcon then
+		local oppositeRealXPositions = Overflow.getRealXPositions(oppositeAlignment, oppositeOrderedIcons)
+		local oppositeX = oppositeRealXPositions[nearestOppositeIcon.UID]
+		local oppositeXSize = Overflow.getWidth(nearestOppositeIcon)
+		boundary = (isLeft and oppositeX - BOUNDARY_GAP) or oppositeX + oppositeXSize + BOUNDARY_GAP
+	end
+	
+	-- We get the left-most icon (if left alignment) or right-most-icon (if
+	-- right alignment) of the central icons group to see if we need to change
+	-- the boundary (if the central icon boundary is smaller than the alignment
+	-- boundary then we use the central)
+	local totalChecks = 0
+	local usingNearestCenter = false
+	local function checkToShiftCentralIcon()
+		local centerOrderedIcons = Overflow.getAvailableIcons("Center")
+		local centerPos = (isLeft and 1) or #centerOrderedIcons
+		local nearestCenterIcon = centerOrderedIcons[centerPos]
+		local function secondaryCheck()
+			if not beganSecondaryCenterCheck then
+				beganSecondaryCenterCheck = true
+				task.delay(3, Overflow.updateBoundary, alignment)
+			end
+		end
+		if nearestCenterIcon and not nearestCenterIcon.hasRelocatedInOverflow then
+			local ourNearestIcon = (isLeft and ourOrderedIcons[#ourOrderedIcons]) or (isRight and ourOrderedIcons[1])
+			local centralNearestXPos = nearestCenterIcon.widget.AbsolutePosition.X
+			local ourNearestXPos = ourNearestIcon.widget.AbsolutePosition.X
+			local ourNearestXSize = Overflow.getWidth(ourNearestIcon)
+			local centerBoundary = (isLeft and centralNearestXPos-BOUNDARY_GAP) or centralNearestXPos + Overflow.getWidth(nearestCenterIcon) + BOUNDARY_GAP
+			local removeBoundary = (isLeft and ourNearestXPos + ourNearestXSize) or ourNearestXPos
+			local hasShifted = false
+			if isLeft then
+				if centerBoundary < removeBoundary then
+					if not beginCheckingCenterIcons then
+						secondaryCheck()
+						return
+					end
+					nearestCenterIcon:align("Left")
+					nearestCenterIcon.hasRelocatedInOverflow = true
+					hasShifted = true
+				end
+			elseif isRight then
+				if centerBoundary > removeBoundary then
+					if not beginCheckingCenterIcons or removeBoundary < 0 then
+						secondaryCheck()
+						return
+					end
+					nearestCenterIcon:align("Right")
+					nearestCenterIcon.hasRelocatedInOverflow = true
+					hasShifted = true
+				end
+			end
+			if hasShifted then
+				totalChecks += 1
+				if totalChecks <= 4 then
+					Overflow.updateAvailableIcons("Center")
+					checkToShiftCentralIcon()
+				end
+			end
+		end
+	end
+	checkToShiftCentralIcon()
+	
+	--[[
+	This updates the maximum size of the overflow menus
+	The menu determines its bounds from the smallest of either:
+	 	1. The closest center-aligned icon (i.e. the boundary)
+	 	2. The edge of the opposite overflow menu UNLESS...
+	 	3. ... the edge exceeds more than half the screenGui
+	--]]
+	if overflowIcon then
+		local menuBoundary = boundary
+		local menu = overflowIcon:getInstance("Menu")
+		local holderXEndPos = holderXPos + holderXSize
+		local menuWidth = holderXSize
+		if menu and oppositeOverflowIcon then
+			local oppositeWidget = oppositeOverflowIcon.widget
+			local oppositeXPos = oppositeWidget.AbsolutePosition.X
+			local oppositeXSize = Overflow.getWidth(oppositeOverflowIcon)
+			local oppositeBoundary = (isLeft and oppositeXPos - BOUNDARY_GAP) or oppositeXPos + oppositeXSize + BOUNDARY_GAP
+			local oppositeMenu = oppositeOverflowIcon:getInstance("Menu")
+			local isDominant = menu.AbsoluteCanvasSize.X >= oppositeMenu.AbsoluteCanvasSize.X
+			if not usingNearestCenter then
+				local halfwayXPos = holderXPos + holderXSize/2
+				local halfwayBoundary = (isLeft and halfwayXPos - BOUNDARY_GAP/2) or halfwayXPos + BOUNDARY_GAP/2
+				menuBoundary = halfwayBoundary
+				if isDominant then
+					menuBoundary = oppositeBoundary
+				end
+			end
+			menuWidth = (isLeft and menuBoundary - holderXPos) or (holderXEndPos - menuBoundary)
+		end
+		local currentMaxWidth = menu and menu:GetAttribute("MaxWidth")
+		menuWidth = Utility.round(menuWidth)
+		if menu and currentMaxWidth ~= menuWidth then
+			menu:SetAttribute("MaxWidth", menuWidth)
+		end
+	end
+
+	-- Parent ALL icons of that alignment into the overflow if at least on
+	-- sibling exceeds the bounds.
+	-- We calculate the the absolute position of icons instead of reading
+	-- directly to determine where they would be if not within an overflow
+	local joinOverflow = false
+	local realXPositions = Overflow.getRealXPositions(alignment, ourOrderedIcons)
+	for i = #ourOrderedIcons, 1, -1 do
+		local icon = ourOrderedIcons[i]
+		local widgetX = Overflow.getWidth(icon)
+		local xPos = realXPositions[icon.UID]
+		if (isLeft and xPos + widgetX >= boundary) or (isRight and xPos <= boundary) then
+			joinOverflow = true
+		end
+	end
+	for i = #ourOrderedIcons, 1, -1 do
+		local icon = ourOrderedIcons[i]
+		local isOverflow = overflowIconUIDs[icon.UID]
+		if not isOverflow then
+			if joinOverflow and not icon.parentIconUID then
+				icon:joinMenu(overflowIcon)
+			elseif not joinOverflow and icon.parentIconUID then
+				icon:leave()
+			end
+		end
+	end
+	
+	-- Hide the overflows when not in use
+	if overflowIcon.isEnabled ~= joinOverflow then
+		overflowIcon:setEnabled(joinOverflow)
+	end
+	
+	-- Have the menus auto selected
+	if overflowIcon.isEnabled and not overflowIcon.overflowAlreadyOpened then
+		overflowIcon.overflowAlreadyOpened = true
+		overflowIcon:select()
+	end
+
+end
+
+
+
+return Overflow

package/runtime/TopbarPlus/Features/Themes/Classic.lua

@@ -0,0 +1,27 @@
+-- This is to provide backwards compatability with the old Roblox
+-- topbar while experiences transition over to the new topbar
+-- You don't need to apply this yourself, topbarplus automatically
+-- applies it if the old roblox topbar is detected
+
+
+return {
+	{"Selection", "Size", UDim2.new(1, -6, 1, -5)},
+	{"Selection", "Position", UDim2.new(0, 3, 0, 3)},
+	
+	{"Widget", "MinimumWidth", 32, "Deselected"},
+	{"Widget", "MinimumHeight", 32, "Deselected"},
+	{"Widget", "BorderSize", 0, "Deselected"},
+	{"IconCorners", "CornerRadius", UDim.new(0, 9), "Deselected"},
+	{"IconButton", "BackgroundTransparency", 0.5, "Deselected"},
+	{"IconLabel", "TextSize", 14, "Deselected"},
+	{"Dropdown", "BackgroundTransparency", 0.5, "Deselected"},
+	{"Notice", "Position", UDim2.new(1, -12, 0, -3), "Deselected"},
+	{"Notice", "Size", UDim2.new(0, 15, 0, 15), "Deselected"},
+	{"NoticeLabel", "TextSize", 11, "Deselected"},
+	
+	{"IconSpot", "BackgroundColor3", Color3.fromRGB(0, 0, 0), "Selected"},
+	{"IconSpot", "BackgroundTransparency", 0.702, "Selected"},
+	{"IconSpotGradient", "Enabled", false, "Selected"},
+	{"IconOverlay", "BackgroundTransparency", 0.97, "Selected"},
+	
+}

package/runtime/TopbarPlus/Features/Themes/Default.lua

@@ -0,0 +1,75 @@
+-- Themes in v3 work simply by applying the value (agument[3])
+-- to the property (agument[2]) of an instance within the icon which
+-- matches the name of argument[1]. Argument[1] can also be used to
+-- specify a collection of instances with a corresponding 'collective'
+-- value. A colletive is simply an attribute applied to some instances
+-- within the icon to group them together (such as "IconCorners").
+-- If the property (argument[2]) does not exist within the instance,
+-- it will instead be applied as an attribute on the instance:
+-- (i.e. ``instance:SetAttribute(argument[2], [argument[3])``)
+-- Use argument[4] to specify a state: "Deselected", "Selected"
+-- or "Viewing". If argument[4] is empty the state will default
+-- to "Deselected".
+-- I've designed themes this way so you have full control over
+-- the appearance of the widget and its descendants
+
+
+return {
+	
+	-- When no state is specified the modification is applied to *all* states (Deselected, Selected and Viewing)
+	{"IconCorners", "CornerRadius", UDim.new(1, 0)},
+	{"Selection", "RotationSpeed", 1},
+	{"Selection", "Size", UDim2.new(1, 0, 1, 1)},
+	{"Selection", "Position", UDim2.new(0, 0, 0, 0)},
+	{"SelectionGradient", "Color", ColorSequence.new({
+		ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 255, 255)),
+		ColorSequenceKeypoint.new(1, Color3.fromRGB(86, 86, 86)),
+	})},
+	
+	-- When the icon is deselected
+	{"IconImage", "Image", "", "Deselected"},
+	{"IconLabel", "Text", "", "Deselected"},
+	{"IconLabel", "Position", UDim2.fromOffset(0, 0), "Deselected"}, -- 0, -1
+	{"Widget", "DesiredWidth", 44, "Deselected"},
+	{"Widget", "MinimumWidth", 44, "Deselected"},
+	{"Widget", "MinimumHeight", 44, "Deselected"},
+	{"Widget", "BorderSize", 4, "Deselected"},
+  	{"IconButton", "BackgroundColor3", Color3.fromRGB(18, 18, 21), "Deselected"},
+	{"IconButton", "BackgroundTransparency", 0.08, "Deselected"},
+	{"IconImageScale", "Value", 0.5, "Deselected"},
+	{"IconImageCorner", "CornerRadius", UDim.new(0, 0), "Deselected"},
+	{"IconImage", "ImageColor3", Color3.fromRGB(255, 255, 255), "Deselected"},
+	{"IconImage", "ImageTransparency", 0, "Deselected"},
+	{"IconImageRatio", "AspectRatio", 1, "Deselected"},
+	{"IconLabel", "FontFace", Font.new("rbxasset://fonts/families/BuilderSans.json", Enum.FontWeight.Bold, Enum.FontStyle.Normal), "Deselected"},
+	{"IconLabel", "TextSize", 16, "Deselected"},
+	{"IconSpot", "BackgroundTransparency", 1, "Deselected"},
+	{"IconOverlay", "BackgroundTransparency", 0.85, "Deselected"},
+	{"IconSpotGradient", "Enabled", false, "Deselected"},
+	{"IconGradient", "Enabled", false, "Deselected"},
+	{"ClickRegion", "Active", true, "Deselected"},  -- This is set to false within scrollers to ensure scroller can be dragged on mobile
+	{"Menu", "Active", false, "Deselected"},
+	{"ContentsList", "HorizontalAlignment", Enum.HorizontalAlignment.Center, "Deselected"},
+  	{"Dropdown", "BackgroundColor3", Color3.fromRGB(18, 18, 21), "Deselected"},
+	{"Dropdown", "BackgroundTransparency", 0.08, "Deselected"},
+	{"Dropdown", "MaxIcons", 4.5, "Deselected"},
+	{"Menu", "MaxIcons", 4, "Deselected"},
+	{"Notice", "Position", UDim2.new(1, -12, 0, -1), "Deselected"},
+	{"Notice", "Size", UDim2.new(0, 20, 0, 20), "Deselected"},
+	{"NoticeLabel", "TextSize", 13, "Deselected"},
+	{"PaddingLeft", "Size", UDim2.new(0, 9, 1, 0), "Deselected"},
+	{"PaddingRight", "Size", UDim2.new(0, 11, 1, 0), "Deselected"},
+	
+	-- When the icon is selected
+	-- Selected also inherits everything from Deselected if nothing is set
+	{"IconSpot", "BackgroundTransparency", 0.7, "Selected"},
+	{"IconSpot", "BackgroundColor3", Color3.fromRGB(255, 255, 255), "Selected"},
+	{"IconSpotGradient", "Enabled", true, "Selected"},
+	{"IconSpotGradient", "Rotation", 45, "Selected"},
+	{"IconSpotGradient", "Color", ColorSequence.new(Color3.fromRGB(96, 98, 100), Color3.fromRGB(77, 78, 80)), "Selected"},
+	
+	
+	-- When a cursor is hovering above, a controller highlighting, or touchpad (mobile) pressing (but not released)
+	--{"IconSpot", "BackgroundTransparency", 0.75, "Viewing"},
+	
+}