Need help for Resizable UI

I am currently working on a Screen GUI that consists of two frames, namely ‘Main’ and ‘Top.’ In the design, I have implemented a UISizeConstraint with a Max Y value set to 16 for the ‘Top’ frame. My goal is to resize the entire GUI dynamically with mouse while ensuring that the ‘Top’ frame maintains its specified Y size constraint.

Is there any way to do it?




ResizableNotepad1

This is what happened now

Module I current use

local TweenService = game:GetService('TweenService')
local ReplicatedStorage = game:GetService('ReplicatedStorage')
local UserInputService = game:GetService('UserInputService')
local Players = game:GetService('Players')

local Player = Players.LocalPlayer

local SmartCreate = require(ReplicatedStorage.Packages.SmartCreate)

local module = {}

local mouse = Player:GetMouse()

local DRAGGER_SIZE = 20
local DRAGGER_TRANSPARENCY = .5

local dragging = false

function module.makeResizable(obj:GuiObject, minSize)
	assert(obj ~= nil, 'You need to put object')
	local resizer = SmartCreate.Clone(script.resizer, {
		Size = UDim2.fromOffset(DRAGGER_SIZE, DRAGGER_SIZE),
		Position = UDim2.new(1, -DRAGGER_SIZE, 1, -DRAGGER_SIZE),
		Parent = obj
	})
	
	local dragger = resizer.dragger
	
	local duic = dragger.UICorner
	minSize = minSize or Vector2.new(160, 90)
	
	local startDrag, startSize
	local gui = obj:FindFirstAncestorWhichIsA("ScreenGui")

	local function finishResize(tr)
		dragger.Position = UDim2.new(0,0,0,0)
		dragger.Size = UDim2.new(2,0,2,0)
		dragger.Parent = resizer
		dragger.BackgroundTransparency = tr
		duic.Parent = dragger
		startDrag = nil
	end
	dragger.MouseButton1Down:Connect(function()
		if not startDrag then
			startSize = obj.AbsoluteSize			
			startDrag = Vector2.new(mouse.X, mouse.Y)
			dragger.BackgroundTransparency = 1
			dragger.Size = UDim2.fromOffset(gui.AbsoluteSize.X, gui.AbsoluteSize.Y)
			dragger.Position = UDim2.new(0,0,0,0)
			duic.Parent = nil
			dragger.Parent = gui
		end
	end)	
	dragger.MouseMoved:Connect(function()
		if startDrag then		
			local m = Vector2.new(mouse.X, mouse.Y)
			local mouseMoved = Vector2.new(m.X - startDrag.X, m.Y - startDrag.Y)
			
			local s = startSize + mouseMoved
			local sx = math.max(minSize.X, s.X) 
			local sy = math.max(minSize.Y, s.Y)
			
			obj.Size = UDim2.fromOffset(sx, sy)
		end
	end)
	dragger.MouseEnter:Connect(function()
		finishResize(DRAGGER_TRANSPARENCY)				
	end)
	dragger.MouseLeave:Connect(function()
		finishResize(1)
	end)		
	dragger.MouseButton1Up:Connect(function()
		finishResize(DRAGGER_TRANSPARENCY)
	end)	
end

return module
1 Like

Maybe try anchor points, or you could try some of the UILayouts that roblox offers and they may be able to keep the gui’s set in position.

Do you mean like UIListLayout?

You should size them up all instead of just the ancestry. You will need to play around with it too so the position doesn’t mess up.

Any good module reference that I can use?