Help me! UI connecting bug

[wiizzzzzzzaaaaard]

I’m making UI connecting system.
Watch this video then you can understand all

It’s working successfully when connecting to x direction but when try to connect Y direction then it makes bug.

code:

local OConnection = script.Parent.OConnection
local Main = script.Parent.Parent.Parent
local UserInputService = game:GetService("UserInputService")
local ConnectionModel
local RunService = game:GetService("RunService")
local Run

OConnection.InputBegan:Connect(function(Input)
	if Input.UserInputType == Enum.UserInputType.MouseButton1 then
		local ConnectVector = nil
		task.wait()
		local Connection = game.ReplicatedStorage.Connection:Clone()
		Connection.Parent = Main
		--Connection.Position = OConnection.Position
		ConnectionModel = Connection
		local OCP = OConnection.AbsolutePosition
		local MP = Main.AbsolutePosition
		local RelativePosition =  OCP-MP
		Connection.Position = UDim2.new(0,RelativePosition.X+20,0,RelativePosition.Y+5) 
		Run = RunService.RenderStepped:Connect(function()
			local Mouse = UserInputService:GetMouseLocation()
			--Connection.Size = UDim2.new((Connection.Position.X.Scale-Mouse.X),0,0,0)
			local MouseDisatnce = (UDim2.fromOffset(Mouse.X,Mouse.Y)-Connection.Position)
			--	print(MouseDisatnce
			if not ConnectVector then
				if MouseDisatnce.Y.Offset>=20 or MouseDisatnce.Y.Offset<=-20 then
					ConnectVector = "Y"
					Connection.Rotation+=90
					print("Y")
				elseif MouseDisatnce.X.Offset>=20 or MouseDisatnce.X.Offset<=-20 then
					ConnectVector = "X"
					print("X")
				end
			end
			if ConnectVector == "X" then
				print(MouseDisatnce.X,Connection.Size.Y)
				Connection.Size = UDim2.new(MouseDisatnce.X,Connection.Size.Y)
			elseif ConnectVector == "Y" then
				print(MouseDisatnce.Y,Connection.Size.Y)
				Connection.Size = UDim2.new(MouseDisatnce.Y,Connection.Size.Y)		
			end
		end)
		UserInputService.InputEnded:Connect(function(Input)
			if ConnectionModel then
				if Input.UserInputType == Enum.UserInputType.MouseButton1 then
					Run:Disconnect()
					ConnectionModel = nil
				end
			end
		end)
	end
end)

Fixed by Inventor

Final Code:

local OConnection = script.Parent.OConnection
local Main = script.Parent.Parent.Parent
local UserInputService = game:GetService("UserInputService")
local ConnectionModel
local RunService = game:GetService("RunService")
local Run

OConnection.InputBegan:Connect(function(Input)
	if Input.UserInputType == Enum.UserInputType.MouseButton1 then
		task.wait()
		local Connection = game.ReplicatedStorage.Connection:Clone()
		Connection.Parent = Main
		ConnectionModel = Connection
		local RelativePosition = OConnection.AbsolutePosition-Main.AbsolutePosition
		local StartPosition = Vector2.new(RelativePosition.X+10,RelativePosition.Y+10)
		Run = RunService.RenderStepped:Connect(function()
			local Mouse = UserInputService:GetMouseLocation()
			local EndPosition = Vector2.new(Mouse.X,Mouse.Y)
			local Direction = EndPosition-StartPosition
			local axis = (math.abs(Direction.X)>math.abs(Direction.Y)) and  Vector2.new(1,0) or Vector2.new(0,1)
			Direction = axis*Direction:Dot(axis)		
			Connection.Size = UDim2.new(0,Direction.Magnitude,0.014,0)
			Connection.Rotation = math.deg(math.atan2(Direction.Y,Direction.X))
			Connection.Position = UDim2.new(0,StartPosition.X+Direction.X/2,0,StartPosition.Y+Direction.Y/2)
		end)
		UserInputService.InputEnded:Connect(function(Input)
			if ConnectionModel then
				if Input.UserInputType == Enum.UserInputType.MouseButton1 then
					Run:Disconnect()
					ConnectionModel = nil
				end
			end
		end)
	end
end)

[SeargentAUS (Seargent)]

I believe the issue is on line 40, namely

Connection.Size = UDim2.new(MouseDisatnce.Y,Connection.Size.Y)	

I suspect that you meant to have it as

Connection.Size = UDim2.new(Connection.Size.X,MouseDisatnce.Y)	

[0ffxInventor (Inventor)]

here’s the right way of doing it

local function update_line_segment(frame, inital_pos, end_pos)
	local direction = end_pos - inital_pos
	-- get the length, we will use direction.Magnitude for this
	frame.Size = UDim2.new(0, direction.Magnitude, 0, 5)
	-- now we find the rotation
	frame.Rotation = math.deg(math.atan2(direction.Y, direction.X))
	frame.Position = UDim2.new(0, inital_pos.X + direction.X / 2, 0, inital_pos.Y + direction.Y / 2)
end

[0ffxInventor (Inventor)]

line_drawing.rbxl (47.6 KB)
place file for anyone in the future

[wiizzzzzzzaaaaard]

It’s working successfully. but as game design I want it can connect to in a straight line. 90 or 180 degree only.
I tried to make it but it makes bug like first one.

[0ffxInventor (Inventor)]

try this

local function update_line_segment(frame, initial_pos, end_pos)
	local direction = end_pos - initial_pos
	local axis = (math.abs(direction.X) > math.abs(direction.Y)) and Vector2.new(1, 0) or Vector2.new(0, 1)
	direction = axis * direction:Dot(axis)

	frame.Size = UDim2.new(0, direction.Magnitude, 0, 5)
	frame.Rotation = math.deg(math.atan2(direction.Y, direction.X))
	frame.Position = UDim2.new(0, initial_pos.X + direction.X / 2, 0, initial_pos.Y + direction.Y / 2)
end

[wiizzzzzzzaaaaard]

Thank you. this is really what I wanted.
btw Do you know how to convert this to scale and make it work on all device?

[0ffxInventor (Inventor)]

mess around with the scale & offset values.

scale is the [0, 1] ratio of the screen scale, so 0.5 scale is going be always a size half the screen scale. offset is just the pixel size.

using scale ensures that the size ratio is similar on all screens (good for big screens) and offset is barely noticeable on large devices, but on small devices like mobile it will make a big difference in how big the gui will be. this way you don’t get big gui on mobile and small gui on pc. hopefully that helps you with not only this, but other stuff too in the future

anways this size combo seems to work pretty well:
frame.Size = UDim2.new(0, direction.Magnitude, 0.005, 2)