Context Menu Widget

[Andy90]

I think a context menu widget is an realy helpfull widget for gui's. I created a script to create one. I will post it in case some needs it

1. Context Menu Script

Script.itemHeight = 22 --Height of the menu entry
Script.hovered = false --Is hovered variable
Script.menuItems = {} --The menu items as table
Script.padding = 2 --The padding between the menu entrys

--Shows the context menu
function Script:ShowContextMenu(x, y)
	self:HideContextMenu()
	local sz = self.widget:GetSize(true)
	local height = self:CalculateHeight()
	self.widget:SetLayout(x, y, sz.width, height)
	self.widget:Show()
	self.widget:Redraw()
end

--Hides the context menu
function Script:HideContextMenu()
	self.widget:Hide()
	self.widget:GetParent():Redraw()
end

--Sets new context menu items
function Script:SetContextMenuItems(contextMenuItems)
	self.menuItems = contextMenuItems
	self.widget:Redraw()
end

--Calculates the height of the context menu
function Script:CalculateHeight()
	return (#self.menuItems * self.itemHeight) + (#self.menuItems * self.padding) + self.padding
end

--Renders the context menu
function Script:Draw(x, y, width, height)
	local gui = self.widget:GetGUI()
	local pos = self.widget:GetPosition(true)
	local sz = self.widget:GetSize(true)
	local fontHeight = gui:GetFontHeight()
	local height = self:CalculateHeight()

	local iX = pos.x + self.padding
	local iY = pos.y + self.padding
	local iWidth = sz.width - (self.padding * 2)

	gui:SetColor(0.145, 0.145, 0.145)
	gui:DrawRect(pos.x, pos.y, sz.width, height, 0)
	gui:SetColor(0, 0, 0)
	gui:DrawRect(pos.x, pos.y, sz.width, height, 1)

	for _, item in ipairs(self.menuItems) do
		local centerX = (iX + sz.width) / 2
		local textX = centerX - (gui:GetTextWidth(item.Text) / 2)
		local textY = (iY + (self.itemHeight / 2)) - ((gui:GetFontHeight() / 2) - self.padding)

		if self:IsItemHovered(iX, iY, iWidth, self.itemHeight) then
			gui:SetColor(0.075, 0.075, 0.075)
			item.Hovered = true
		else
			gui:SetColor(0.175, 0.175, 0.175)
			item.Hovered = false
		end
		gui:DrawRect(iX, iY, iWidth, self.itemHeight, 0)
		gui:SetColor(1, 1, 1)
		gui:DrawText(item.Text, iX + self.padding, textY, iWidth, self.itemHeight)
		iY = iY + self.itemHeight + self.padding
	end
end


--Returns the hovered item
function Script:GetHoveredItem()
	for _, item in ipairs(self.menuItems) do
		if item.Hovered then
			return item
		end
	end
	return nil
end

--On mouse enter event
function Script:MouseEnter(x, y)
	self.hovered = true
	self.widget:Redraw()
end

--On mouse leave event
function Script:MouseLeave(x, y)
	self.hovered = false
	self.widget:Redraw()
end

--On mouse down event
function Script:MouseDown(button, x, y)
	if button == Mouse.Left then
		self.widget:Redraw()
	end
end

--On mouse up event
function Script:MouseUp(button, x, y)
	if button == Mouse.Left then
		if self.hovered then
			EventQueue:Emit(Event.WidgetAction, self.widget)
			local selectedItem = self:GetHoveredItem()
			if selectedItem ~= nil then
				selectedItem.OnClick(selectedItem)
			end
			self:HideContextMenu()
		end
		self.widget:Redraw()
	end
end

--On mouse move event
function Script:MouseMove(x, y)
	self.widget:Redraw()
end

--Check if a item is hovered
function Script:IsItemHovered(x, y, width, height)
	if self.hovered then
		local mousePos = Window:GetCurrent():GetMousePosition()
		if mousePos.x > x and mousePos.y > y and mousePos.x < x + width and mousePos.y < y + height then
			return true
		end
	end
	return false
end

2. Intial the widget

	self.contextMenu = Widget:Create("", 15, 15, 150, 64, base, "Scripts/Own/GUI/ContextMenu.lua")
	local menuItems = {
		{
			Text = "Unequip",
			OnClick = function() 
				System:Print("Unequip Item")
				self.ivEquipItem3.script:ClearItem()
				self.Tool = nil
			end
		}, 
		{
			Text = "Repair Item",
			OnClick = function() 
				System:Print("Repair Item")
			end
		}
	}
	self.contextMenu.script:SetContextMenuItems(menuItems)
	self.contextMenu.script:HideContextMenu()	

3. Open the context menu widget

function IvEquipItem3Click(event, parent)
	local mousePos = window:GetMousePosition()
	parent.contextMenu.script:ShowContextMenu(mousePos.x,mousePos.y)
end

 

[WazMeister]

Just found this! Amazing to read and ref the Leadwerks documentation to understand and improve my experience.

Wish there was more of this stuff shared.  Thanks so much!

 

Will use this and rather than copy and paste, will read line by line, ref the documentation and ensure I understand it all and gain knowledge.

 

GREAT!

[Andy90]

Thanks for your feedback  Its nice to see that it actualy helped someone.