Added aspect ratio support.

Author: ryanlua

src/SignsInternal/PluginGui/AspectRatio.lua

@@ -0,0 +1,13 @@
+local choices = {
+	{ Id = "1", Value = 0.5, Text = "1:2" },
+	{ Id = "2", Value = 0.563, Text = "9:16" },
+	{ Id = "3", Value = 0.625, Text = "10:16" },
+	{ Id = "4", Value = 0.75, Text = "3:4" },
+	{ Id = "5", Value = 1, Text = "1:1" },
+	{ Id = "6", Value = 1.333, Text = "4:3" },
+	{ Id = "7", Value = 1.6, Text = "16:10" },
+	{ Id = "8", Value = 1.7, Text = "16:9" },
+	{ Id = "9", Value = 2, Text = "2:1" },
+}
+
+return choices

src/SignsInternal/PluginGui/GuiObjectPart.lua

@@ -13,18 +13,20 @@ local Selection = game:GetService("Selection")
 GuiObjectPart = {}
 GuiObjectPart.__index = GuiObjectPart
 
-function GuiObjectPart.new(label: GuiObject, autoLocalize: boolean?, lightInfluence: number?, alwaysOnTop: boolean?)
+function GuiObjectPart.new(label: GuiObject, autoLocalize: boolean?, lightInfluence: number?, alwaysOnTop: boolean?, size: Vector2)
 	local self = {}
 	setmetatable(self, GuiObjectPart)
 
 	local camera = workspace.CurrentCamera or Instance.new("Camera")
 
+	local partSizeX = label.AbsoluteSize.X / 50
+	local partSizeY = label.AbsoluteSize.Y / 50
 	local part = Instance.new("Part")
 	part.Name = "SignPart"
 	part.Anchored = true
 	part.Parent = workspace
 	part.Transparency = 1
-	part.Size = Vector3.new(4, 4, 0)
+	part.Size = Vector3.new(partSizeX, partSizeY, 0)
 	part.Position = (camera.CFrame + camera.CFrame.LookVector * 10).Position
 	local yCameraRotation = camera.CFrame.Rotation.Y
 	local yRotation = math.floor(yCameraRotation/90 + 0.5) * 90
@@ -33,7 +35,8 @@ function GuiObjectPart.new(label: GuiObject, autoLocalize: boolean?, lightInflue
 	CollectionService:AddTag(part, "_Sign")
 
 	local surfaceGui = Instance.new("SurfaceGui")
-	surfaceGui.SizingMode = Enum.SurfaceGuiSizingMode.PixelsPerStud
+	-- surfaceGui.SizingMode = Enum.SurfaceGuiSizingMode.PixelsPerStud
+	surfaceGui.CanvasSize = size or Vector2.new(200, 200)
 	surfaceGui.LightInfluence = lightInfluence or 0
 	surfaceGui.AlwaysOnTop = alwaysOnTop or false
 	surfaceGui.AutoLocalize = autoLocalize or true

src/SignsInternal/PluginGui/init.lua

@@ -15,6 +15,7 @@ local Color = require(script.Color)
 local FontFace = require(script.FontFace)
 local GuiObjectPart = require(script.GuiObjectPart)
 local LineJoinMode = require(script.LineJoinMode)
+local AspectRatio = require(script.AspectRatio)
 local TextXAlignment = require(script.TextXAlignment)
 local TextYAlignment = require(script.TextYAlignment)
 
@@ -246,6 +247,23 @@ function PluginGui:newPluginGui(widgetGui)
 	end
 	colorStrokeChoice:GetFrame().Parent = strokeCollapse:GetContentsFrame()
 
+	local sizeCollapse = CollapsibleTitledSection.new( -- Fonts collapse
+		"SizeCollapse", -- name suffix of the gui object
+		"Size", -- the text displayed beside the collapsible arrow
+		true, -- have the content frame auto-update its size?
+		true, -- minimizable?
+		true -- minimized by default?
+	)
+	listFrame:AddChild(sizeCollapse:GetSectionFrame()) -- add child to expanding VerticallyScalingListFrame
+
+	local ratioChoice = LabeledMultiChoice.new(
+		"RatioChoice", -- name suffix of gui object
+		"Aspect Ratio", -- title text of the multi choice
+		AspectRatio, -- choices array
+		5 -- the starting index of the selection
+	)
+	ratioChoice:GetFrame().Parent = sizeCollapse:GetContentsFrame()
+
 	local backgroundCollapse = CollapsibleTitledSection.new( -- Fonts collapse
 		"BackgroundCollapse", -- name suffix of the gui object
 		"Background", -- the text displayed beside the collapsible arrow
@@ -318,7 +336,8 @@ function PluginGui:newPluginGui(widgetGui)
 		local influence = ((influenceSlider:GetValue() - 1) / 4)
 		local top = topCheckbox:GetValue()
 		local localize = localizeCheckbox:GetValue()
-		GuiObjectPart.new(label, localize, influence, top)
+		local size = CustomTextLabel:GetLabel().AbsoluteSize
+		GuiObjectPart.new(label, localize, influence, top, size)
 	end)
 
 	textInput:SetValueChangedFunction(function(newValue)
@@ -415,6 +434,11 @@ function PluginGui:newPluginGui(widgetGui)
 		local newValue = Color[newIndex].Color
 		CustomTextLabel:UpdateBackgroundColor3(newValue)
 	end)
+
+	ratioChoice:SetValueChangedFunction(function(newIndex)
+		local newValue = AspectRatio[newIndex].Value
+		CustomTextLabel:UpdateAspectRatio(newValue)
+	end)
 end
 
 function PluginGui:destoryPluginGui(widgetGui)

src/SignsInternal/StudioWidgets/CustomTextLabel.lua

@@ -14,12 +14,24 @@ function CustomTextLabelClass.new(nameSuffix, height)
 	local self = {}
 	setmetatable(self, CustomTextLabelClass)
 
-	local frame = GuiUtilities.MakeFixedHeightFrame("TextLabel " .. nameSuffix, height)
+	local background = GuiUtilities.MakeFixedHeightFrame("TextLabel " .. nameSuffix, height)
+	background.Size = UDim2.new(1, 0, 0, height)
+	background.BackgroundTransparency = 1
+	self._background = background
+
+	local frame = Instance.new("Frame")
 	frame.BorderSizePixel = 1
-	frame.Size = UDim2.new(1, 0, 0, height)
+	frame.Size = UDim2.new(0, height, 0, height)
+	frame.AnchorPoint = Vector2.new(0.5, 0.5)
+	frame.Position = UDim2.new(0.5, 0, 0.5, 0)
+	frame.Parent = background
 	GuiUtilities.syncGuiElementShadowColor(frame)
+	GuiUtilities.syncGuiElementScrollBarBackgroundColor(frame)
 	self._frame = frame
 
+	local aspectRatio = Instance.new("UIAspectRatioConstraint")
+	aspectRatio.Parent = frame
+
 	local label = Instance.new("TextLabel")
 	label.Text = "Preview"
 	label.BackgroundColor3 = Color3.fromRGB(255, 255, 255)
@@ -43,6 +55,10 @@ function CustomTextLabelClass.new(nameSuffix, height)
 	end
 	self._stroke = stroke
 
+	function CustomTextLabelClass:UpdateAspectRatio(newValue: number)
+		aspectRatio.AspectRatio = newValue
+	end
+
 	function CustomTextLabelClass:UpdateTextRotation(newValue: number)
 		label.Rotation = newValue
 	end
@@ -160,7 +176,7 @@ function CustomTextLabelClass.new(nameSuffix, height)
 	end
 
 	function CustomTextLabelClass:GetFrame()
-		return frame
+		return background
 	end
 
 	return self