From a2b4fd119b125a89dd76e49fa2b010864e702d03 Mon Sep 17 00:00:00 2001
From: Cooldude2606 <25043174+Cooldude2606@users.noreply.github.com>
Date: Sun, 26 Jan 2025 21:35:15 +0000
Subject: [PATCH] Convert player list, data, module, and vlayer

---
 exp_gui/module/core_elements.lua              |   7 +
 exp_gui/module/elements.lua                   |   4 +-
 exp_gui/module/prototype.lua                  |   2 +-
 exp_legacy/module/config/_file_loader.lua     |  10 +-
 .../module/config/gui/player_list_actions.lua |  45 +++--
 exp_legacy/module/modules/gui/module.lua      |  42 ++--
 exp_legacy/module/modules/gui/player-list.lua | 113 ++++++-----
 exp_legacy/module/modules/gui/playerdata.lua  |  63 +++---
 exp_legacy/module/modules/gui/task-list.lua   |   3 +-
 exp_legacy/module/modules/gui/vlayer.lua      | 183 +++++++++--------
 exp_legacy/module/modules/gui/warp-list.lua   | 191 +++++++++---------
 11 files changed, 363 insertions(+), 300 deletions(-)

diff --git a/exp_gui/module/core_elements.lua b/exp_gui/module/core_elements.lua
index 1ffcd319..a1879036 100644
--- a/exp_gui/module/core_elements.lua
+++ b/exp_gui/module/core_elements.lua
@@ -38,6 +38,13 @@ function ExpGui.set_toolbar_button_style(element, state)
     return state
 end
 
+--- Get the state of a toolbar button
+--- @param element LuaGuiElement
+--- @return boolean
+function ExpGui.get_toolbar_button_state(element)
+    return element.style.name == toolbar_button_active_style
+end
+
 --- Set the visible state of the top flow for a player
 --- @param player LuaPlayer
 --- @param state boolean?
diff --git a/exp_gui/module/elements.lua b/exp_gui/module/elements.lua
index 4360fc3f..6d2ef628 100644
--- a/exp_gui/module/elements.lua
+++ b/exp_gui/module/elements.lua
@@ -168,7 +168,7 @@ elements.header = ExpGui.element("container_header")
             }
         end
 
-        return elements.aligned_flow(subframe, { name = "flow" })
+        return opts.no_flow and subframe or elements.aligned_flow(subframe, { name = "flow" })
     end)
 
 --- A footer frame within a container
@@ -187,7 +187,7 @@ elements.footer = ExpGui.element("container_footer")
             }
         end
 
-        return elements.aligned_flow(subframe, { name = "flow" })
+        return opts.no_flow and subframe or elements.aligned_flow(subframe, { name = "flow" })
     end)
 
 return elements
diff --git a/exp_gui/module/prototype.lua b/exp_gui/module/prototype.lua
index 661583dc..32dddf3a 100644
--- a/exp_gui/module/prototype.lua
+++ b/exp_gui/module/prototype.lua
@@ -6,7 +6,7 @@ local GuiIter = require("modules/exp_gui/iter")
 
 --- @class ExpGui_ExpElement
 local ExpElement = {
-    _elements = {}, --- @type table<string, LuaGuiElement>
+    _elements = {}, --- @type table<string, ExpElement>
 }
 
 ExpElement.events = {}
diff --git a/exp_legacy/module/config/_file_loader.lua b/exp_legacy/module/config/_file_loader.lua
index 02dc1d98..90d07169 100644
--- a/exp_legacy/module/config/_file_loader.lua
+++ b/exp_legacy/module/config/_file_loader.lua
@@ -48,17 +48,17 @@ return {
     "modules.gui.science-info",
     "modules.gui.autofill",
     "modules.gui.task-list",
-    --"modules.gui.warp-list",
-    --"modules.gui.player-list",
+    "modules.gui.warp-list",
+    "modules.gui.player-list",
     "modules.gui.server-ups",
     "modules.gui.bonus",
-    --"modules.gui.vlayer",
+    "modules.gui.vlayer",
     "modules.gui.research",
-    --"modules.gui.module",
+    "modules.gui.module",
     "modules.gui.landfill",
     "modules.gui.tool",
     "modules.gui.production",
-    --"modules.gui.playerdata",
+    "modules.gui.playerdata",
     "modules.gui.surveillance",
     --"modules.gui.toolbar", -- must be loaded last to register toolbar handlers
     
diff --git a/exp_legacy/module/config/gui/player_list_actions.lua b/exp_legacy/module/config/gui/player_list_actions.lua
index 962907a5..443ab727 100644
--- a/exp_legacy/module/config/gui/player_list_actions.lua
+++ b/exp_legacy/module/config/gui/player_list_actions.lua
@@ -6,7 +6,7 @@
 -- @config Player-List
 
 local ExpUtil = require("modules/exp_util")
-local Gui = require("modules.exp_legacy.expcore.gui") --- @dep expcore.gui
+local Gui = require("modules/exp_gui")
 local Roles = require("modules.exp_legacy.expcore.roles") --- @dep expcore.roles
 local Reports = require("modules.exp_legacy.modules.control.reports") --- @dep modules.control.reports
 local Warnings = require("modules.exp_legacy.modules.control.warnings") --- @dep modules.control.warnings
@@ -47,22 +47,25 @@ local function teleport(from_player, to_player)
 end
 
 local function new_button(sprite, tooltip)
-    return Gui.element{
-        type = "sprite-button",
-        style = "tool_button",
-        sprite = sprite,
-        tooltip = tooltip,
-    }:style{
-        padding = -1,
-        height = 28,
-        width = 28,
-    }
+    return Gui.element(tooltip[1])
+        :draw{
+            type = "sprite-button",
+            style = "tool_button",
+            sprite = sprite,
+            tooltip = tooltip,
+        }
+        :style{
+            padding = -1,
+            height = 28,
+            width = 28,
+        }
 end
 
 --- Teleports the user to the action player
 -- @element goto_player
 local goto_player = new_button("utility/export", { "player-list.goto-player" })
-    :on_click(function(player)
+    :on_click(function(def, event, element)
+        local player = Gui.get_player(event)
         local selected_player_name = get_action_player_name(player)
         local selected_player = game.players[selected_player_name]
         if not player.character or not selected_player.character then
@@ -75,7 +78,8 @@ local goto_player = new_button("utility/export", { "player-list.goto-player" })
 --- Teleports the action player to the user
 -- @element bring_player
 local bring_player = new_button("utility/import", { "player-list.bring-player" })
-    :on_click(function(player)
+    :on_click(function(def, event, element)
+        local player = Gui.get_player(event)
         local selected_player_name = get_action_player_name(player)
         local selected_player = game.players[selected_player_name]
         if not player.character or not selected_player.character then
@@ -88,7 +92,8 @@ local bring_player = new_button("utility/import", { "player-list.bring-player" }
 --- Reports the action player, requires a reason to be given
 -- @element report_player
 local report_player = new_button("utility/spawn_flag", { "player-list.report-player" })
-    :on_click(function(player)
+    :on_click(function(def, event, element)
+        local player = Gui.get_player(event)
         local selected_player_name = get_action_player_name(player)
         if Reports.is_reported(selected_player_name, player.name) then
             player.print({ "exp-commands_report.already-reported" }, Colors.orange_red)
@@ -108,7 +113,8 @@ end
 --- Gives the action player a warning, requires a reason
 -- @element warn_player
 local warn_player = new_button("utility/spawn_flag", { "player-list.warn-player" })
-    :on_click(function(player)
+    :on_click(function(def, event, element)
+        local player = Gui.get_player(event)
         SelectedAction:set(player, "command/give-warning")
     end)
 
@@ -122,7 +128,8 @@ end
 --- Jails the action player, requires a reason
 -- @element jail_player
 local jail_player = new_button("utility/multiplayer_waiting_icon", { "player-list.jail-player" })
-    :on_click(function(player)
+    :on_click(function(def, event, element)
+        local player = Gui.get_player(event)
         local selected_player_name, selected_player_color = get_action_player_name(player)
         if Jail.is_jailed(selected_player_name) then
             player.print({ "exp-commands_jail.already-jailed", selected_player_color }, Colors.orange_red)
@@ -141,7 +148,8 @@ end
 --- Kicks the action player, requires a reason
 -- @element kick_player
 local kick_player = new_button("utility/warning_icon", { "player-list.kick-player" })
-    :on_click(function(player)
+    :on_click(function(def, event, element)
+        local player = Gui.get_player(event)
         SelectedAction:set(player, "command/kick")
     end)
 
@@ -153,7 +161,8 @@ end
 --- Bans the action player, requires a reason
 -- @element ban_player
 local ban_player = new_button("utility/danger_icon", { "player-list.ban-player" })
-    :on_click(function(player)
+    :on_click(function(def, event, element)
+        local player = Gui.get_player(event)
         SelectedAction:set(player, "command/ban")
     end)
 
diff --git a/exp_legacy/module/modules/gui/module.lua b/exp_legacy/module/modules/gui/module.lua
index 5b7e3300..a7fd0e51 100644
--- a/exp_legacy/module/modules/gui/module.lua
+++ b/exp_legacy/module/modules/gui/module.lua
@@ -1,8 +1,8 @@
 ---- module inserter
 -- @gui Module
 
+local Gui = require("modules/exp_gui")
 local AABB = require("modules/exp_util/aabb")
-local Gui = require("modules.exp_legacy.expcore.gui") --- @dep expcore.gui
 local Event = require("modules/exp_legacy/utils/event") --- @dep utils.event
 local Roles = require("modules.exp_legacy.expcore.roles") --- @dep expcore.roles
 local config = require("modules.exp_legacy.config.module") --- @dep config.module
@@ -93,8 +93,8 @@ end
 Selection.on_selection(SelectionModuleArea, function(event)
     local area = AABB.expand(event.area)
     local player = game.players[event.player_index]
-    local frame = Gui.get_left_element(player, module_container) --- @type LuaGuiElement
-    local scroll_table = frame.container.scroll.table
+    local container = Gui.get_left_element(module_container, player)
+    local scroll_table = container.frame.scroll.table
 
     -- Create an inventory with three upgrade planners
     local inventory = game.create_inventory(3)
@@ -205,8 +205,8 @@ end)
 --- @param player LuaPlayer
 --- @param element_name string
 local function row_set(player, element_name)
-    local frame = Gui.get_left_element(player, module_container) --[[ @as LuaGuiElement ]]
-    local scroll_table = frame.container.scroll.table
+    local container = Gui.get_left_element(module_container, player)
+    local scroll_table = container.frame.scroll.table
     local machine_name = scroll_table[element_name .. "0"].elem_value --[[ @as string ]]
 
     if machine_name then
@@ -247,8 +247,8 @@ local function row_set(player, element_name)
     end
 end
 
-local button_apply =
-    Gui.element{
+local button_apply = Gui.element("button_apply")
+    :draw{
         type = "button",
         caption = { "module.apply" },
         style = "button",
@@ -260,13 +260,15 @@ local button_apply =
         end
     end)
 
-module_container =
-    Gui.element(function(definition, parent)
-        local container = Gui.container(parent, definition.name, (config.module_slots_per_row + 2) * 36)
-        Gui.header(container, "Module Inserter", "", true)
+module_container = Gui.element("module_container")
+    :draw(function(definition, parent)
+        local container = Gui.elements.container(parent, (config.module_slots_per_row + 2) * 36)
+        Gui.elements.header(container, {
+            caption = "Module Inserter",
+        })
 
         local slots_per_row = config.module_slots_per_row + 1
-        local scroll_table = Gui.scroll_table(container, (config.module_slots_per_row + 2) * 36, slots_per_row)
+        local scroll_table = Gui.elements.scroll_table(container, (config.module_slots_per_row + 2) * 36, slots_per_row)
 
         for i = 1, config.default_module_row_count do
             scroll_table.add{
@@ -301,12 +303,18 @@ module_container =
 
         return container.parent
     end)
-    :static_name(Gui.unique_static_name)
-    :add_to_left_flow()
 
-Gui.left_toolbar_button("item/productivity-module-3", { "module.main-tooltip" }, module_container, function(player)
-    return Roles.player_allowed(player, "gui/module")
-end)
+--- Add the element to the left flow with a toolbar button
+Gui.add_left_element(module_container, false)
+Gui.create_toolbar_button{
+    name = "module_toggle",
+    left_element = module_container,
+    sprite = "item/productivity-module-3",
+    tooltip = { "module.main-tooltip" },
+    visible = function(player, element)
+        return Roles.player_allowed(player, "gui/module")
+    end
+}
 
 --- @param event EventData.on_gui_elem_changed
 Event.add(defines.events.on_gui_elem_changed, function(event)
diff --git a/exp_legacy/module/modules/gui/player-list.lua b/exp_legacy/module/modules/gui/player-list.lua
index cc08db56..0fb2858a 100644
--- a/exp_legacy/module/modules/gui/player-list.lua
+++ b/exp_legacy/module/modules/gui/player-list.lua
@@ -6,7 +6,7 @@
 
 -- luacheck:ignore 211/Colors
 local ExpUtil = require("modules/exp_util")
-local Gui = require("modules.exp_legacy.expcore.gui") --- @dep expcore.gui
+local Gui = require("modules/exp_gui")
 local Roles = require("modules.exp_legacy.expcore.roles") --- @dep expcore.roles
 local Datastore = require("modules.exp_legacy.expcore.datastore") --- @dep expcore.datastore
 local Event = require("modules/exp_legacy/utils/event") --- @dep utils.event
@@ -23,20 +23,21 @@ config.set_datastores(SelectedPlayer, SelectedAction)
 
 --- Button used to open the action bar
 -- @element open_action_bar
-local open_action_bar =
-    Gui.element{
+local open_action_bar = Gui.element("open_action_bar")
+    :draw{
         type = "sprite-button",
         sprite = "utility/expand_dots",
         tooltip = { "player-list.open-action-bar" },
         style = "frame_button",
-        name = Gui.unique_static_name,
+        name = Gui.property_from_name,
     }
     :style{
         padding = -2,
         width = 8,
         height = 14,
     }
-    :on_click(function(player, element, _)
+    :on_click(function(def, event, element)
+        local player = Gui.get_player(event)
         local selected_player_name = element.parent.name
         local old_selected_player_name = SelectedPlayer:get(player)
         if selected_player_name == old_selected_player_name then
@@ -48,30 +49,42 @@ local open_action_bar =
 
 --- Button used to close the action bar
 -- @element close_action_bar
-local close_action_bar =
-    Gui.element{
+local close_action_bar = Gui.element("close_action_bar")
+    :draw{
         type = "sprite-button",
         sprite = "utility/close_black",
         tooltip = { "player-list.close-action-bar" },
         style = "slot_sized_button_red",
     }
-    :style(Gui.sprite_style(30, -1, { top_margin = -1, right_margin = -1 }))
-    :on_click(function(player, _)
+    :style(Gui.styles.sprite{
+        size = 20,
+        padding = -1,
+        top_margin = -1,
+        right_margin = -1,
+    })
+    :on_click(function(def, event, element)
+        local player = Gui.get_player(event)
         SelectedPlayer:remove(player)
         SelectedAction:remove(player)
     end)
 
 --- Button used to confirm a reason
 -- @element reason_confirm
-local reason_confirm =
-    Gui.element{
+local reason_confirm = Gui.element("reason_confirm")
+    :draw{
         type = "sprite-button",
         sprite = "utility/confirm_slot",
         tooltip = { "player-list.reason-confirm" },
         style = "slot_sized_button_green",
     }
-    :style(Gui.sprite_style(30, -1, { left_margin = -2, right_margin = -1 }))
-    :on_click(function(player, element)
+    :style(Gui.styles.sprite{
+        size = 30,
+        padding = -1,
+        left_margin = -2,
+        right_margin = -1,
+    })
+    :on_click(function(def, event, element)
+        local player = Gui.get_player(event)
         local reason = element.parent.entry.text
         local action_name = SelectedAction:get(player)
         local reason_callback = config.buttons[action_name].reason_callback
@@ -84,8 +97,8 @@ local reason_confirm =
 
 --- Set of elements that are used to make up a row of the player table
 -- @element add_player_base
-local add_player_base =
-    Gui.element(function(_, parent, player_data)
+local add_player_base = Gui.element("add_player_base")
+    :draw(function(_, parent, player_data)
         -- Add the button to open the action bar
         local toggle_action_bar_flow = parent.add{ type = "flow", name = player_data.name }
         open_action_bar(toggle_action_bar_flow)
@@ -101,7 +114,7 @@ local add_player_base =
         player_name.style.font_color = player_data.chat_color
 
         -- Add the time played label
-        local alignment = Gui.alignment(parent, "player-time-" .. player_data.index)
+        local alignment = Gui.elements.aligned_flow(parent, { name = "player-time-" .. player_data.index })
         local time_label = alignment.add{
             name = "label",
             type = "label",
@@ -112,13 +125,17 @@ local add_player_base =
 
         return player_name
     end)
-    :on_click(function(player, element, event)
+    :on_click(function(def, event, element)
+        local player = Gui.get_player(event)
         local selected_player_name = element.caption
         local selected_player = game.players[selected_player_name]
         if event.button == defines.mouse_button_type.left then
             -- LMB will open the map to the selected player
-            local position = selected_player.physical_position
-            event.player.set_controller{ type = defines.controllers.remote, position = selected_player.physical_position, surface = selected_player.physical_surface }
+            player.set_controller{
+                type = defines.controllers.remote,
+                position = selected_player.physical_position,
+                surface = selected_player.physical_surface
+            }
         else
             -- RMB will toggle the settings
             local old_selected_player_name = SelectedPlayer:get(player)
@@ -149,8 +166,8 @@ end
 
 --- Adds all the buttons and flows that make up the action bar
 -- @element add_action_bar
-local add_action_bar_buttons =
-    Gui.element(function(_, parent)
+local add_action_bar_buttons = Gui.element("add_action_bar_buttons")
+    :draw(function(_, parent)
         close_action_bar(parent)
         -- Loop over all the buttons in the config
         for action_name, button_data in pairs(config.buttons) do
@@ -168,7 +185,7 @@ local add_action_bar_buttons =
 
 --- Updates the visible state of the action bar buttons
 local function update_action_bar(element)
-    local player = Gui.get_player_from_element(element)
+    local player = Gui.get_player(element)
     local selected_player_name = SelectedPlayer:get(player)
 
     if not selected_player_name then
@@ -197,20 +214,20 @@ end
 
 --- Main player list container for the left flow
 -- @element player_list_container
-local player_list_container =
-    Gui.element(function(definition, parent)
+local player_list_container = Gui.element("player_list_container")
+    :draw(function(definition, parent)
         -- Draw the internal container
-        local container = Gui.container(parent, definition.name, 200)
+        local container = Gui.elements.container(parent, 200)
 
         -- Draw the scroll table for the players
-        local scroll_table = Gui.scroll_table(container, 184, 3)
+        local scroll_table = Gui.elements.scroll_table(container, 184, 3, "scroll")
 
         -- Change the style of the scroll table
         local scroll_table_style = scroll_table.style
         scroll_table_style.padding = { 1, 0, 1, 2 }
 
         -- Add the action bar
-        local action_bar = Gui.footer(container, nil, nil, false, "action_bar")
+        local action_bar = Gui.elements.footer(container, { name = "action_bar", no_flow = true })
 
         -- Change the style of the action bar
         local action_bar_style = action_bar.style
@@ -222,7 +239,7 @@ local player_list_container =
         add_action_bar_buttons(action_bar)
 
         -- Add the reason bar
-        local reason_bar = Gui.footer(container, nil, nil, false, "reason_bar")
+        local reason_bar = Gui.elements.footer(container, { name = "reason_bar", no_flow = true })
 
         -- Change the style of the reason bar
         local reason_bar_style = reason_bar.style
@@ -251,14 +268,18 @@ local player_list_container =
         -- Return the exteral container
         return container.parent
     end)
-    :static_name(Gui.unique_static_name)
-    :add_to_left_flow(true)
 
---- Button on the top flow used to toggle the player list container
--- @element toggle_player_list
-Gui.left_toolbar_button("entity/character", { "player-list.main-tooltip" }, player_list_container, function(player)
-    return Roles.player_allowed(player, "gui/player-list")
-end)
+--- Add the element to the left flow with a toolbar button
+Gui.add_left_element(player_list_container, true)
+Gui.create_toolbar_button{
+    name = "player_list_toggle",
+    left_element = player_list_container,
+    sprite = "entity/character",
+    tooltip = { "player-list.main-tooltip" },
+    visible = function(player, element)
+        return Roles.player_allowed(player, "gui/player-list")
+    end
+}
 
 local online_time_format = ExpUtil.format_time_factory_locale{ format = "short", hours = true, minutes = true }
 local afk_time_format = ExpUtil.format_time_factory_locale{ format = "long", minutes = true }
@@ -348,8 +369,8 @@ end
 Event.on_nth_tick(1800, function()
     local player_times = get_player_times()
     for _, player in pairs(game.connected_players) do
-        local frame = Gui.get_left_element(player, player_list_container)
-        local scroll_table = frame.container.scroll.table
+        local container = Gui.get_left_element(player_list_container, player)
+        local scroll_table = container.frame.scroll.table
         for _, player_time in pairs(player_times) do
             update_player_base(scroll_table, player_time)
         end
@@ -360,8 +381,8 @@ end)
 Event.add(defines.events.on_player_left_game, function(event)
     local remove_player = game.players[event.player_index]
     for _, player in pairs(game.connected_players) do
-        local frame = Gui.get_left_element(player, player_list_container)
-        local scroll_table = frame.container.scroll.table
+        local container = Gui.get_left_element(player_list_container, player)
+        local scroll_table = container.frame.scroll.table
         remove_player_base(scroll_table, remove_player)
 
         local selected_player_name = SelectedPlayer:get(player)
@@ -376,8 +397,8 @@ end)
 local function redraw_player_list()
     local player_list_order = get_player_list_order()
     for _, player in pairs(game.connected_players) do
-        local frame = Gui.get_left_element(player, player_list_container)
-        local scroll_table = frame.container.scroll.table
+        local container = Gui.get_left_element(player_list_container, player)
+        local scroll_table = container.frame.scroll.table
         scroll_table.clear()
         for _, next_player_data in ipairs(player_list_order) do
             add_player_base(scroll_table, next_player_data)
@@ -392,9 +413,9 @@ Event.add(Roles.events.on_role_unassigned, redraw_player_list)
 --- When the action player is changed the action bar will update
 SelectedPlayer:on_update(function(player_name, selected_player)
     local player = game.players[player_name]
-    local frame = Gui.get_left_element(player, player_list_container)
-    local scroll_table = frame.container.scroll.table
-    update_action_bar(frame.container.action_bar)
+    local container = Gui.get_left_element(player_list_container, player)
+    local scroll_table = container.frame.scroll.table
+    update_action_bar(container.frame.action_bar)
     for _, next_player in pairs(game.connected_players) do
         local element = scroll_table[next_player.name][open_action_bar.name]
         local style = "frame_button"
@@ -412,8 +433,8 @@ end)
 --- When the action name is changed the reason input will update
 SelectedAction:on_update(function(player_name, selected_action)
     local player = game.players[player_name]
-    local frame = Gui.get_left_element(player, player_list_container)
-    local element = frame.container.reason_bar
+    local container = Gui.get_left_element(player_list_container, player)
+    local element = container.frame.reason_bar
     if selected_action then
         -- if there is a new value then check the player is still online
         local selected_player_name = SelectedPlayer:get(player_name)
diff --git a/exp_legacy/module/modules/gui/playerdata.lua b/exp_legacy/module/modules/gui/playerdata.lua
index d1e5baa2..13c47fc4 100644
--- a/exp_legacy/module/modules/gui/playerdata.lua
+++ b/exp_legacy/module/modules/gui/playerdata.lua
@@ -2,7 +2,7 @@
 -- @gui PlayerData
 
 local ExpUtil = require("modules/exp_util")
-local Gui = require("modules.exp_legacy.expcore.gui") --- @dep expcore.gui
+local Gui = require("modules/exp_gui")
 local Roles = require("modules.exp_legacy.expcore.roles") --- @dep expcore.roles
 local Event = require("modules/exp_legacy/utils/event") --- @dep utils.event
 local PlayerData = require("modules.exp_legacy.expcore.player_data") --- @dep expcore.player_data
@@ -74,8 +74,8 @@ local computed_stats = {
     },
 }
 
-local label =
-    Gui.element(function(_, parent, width, caption, tooltip, name)
+local label = Gui.element("label")
+    :draw(function(_, parent, width, caption, tooltip, name)
         local new_label = parent.add{
             type = "label",
             caption = caption,
@@ -88,10 +88,10 @@ local label =
         return new_label
     end)
 
-local pd_data_set =
-    Gui.element(function(_, parent, name)
+local pd_data_set = Gui.element("pd_data_set")
+    :draw(function(_, parent, name)
         local pd_data_set = parent.add{ type = "flow", direction = "vertical", name = name }
-        local disp = Gui.scroll_table(pd_data_set, label_width["total"], 4, "disp")
+        local disp = Gui.elements.scroll_table(pd_data_set, label_width["total"], 4, "disp")
 
         for _, stat_name in pairs(PlayerData.Statistics.metadata.display_order) do
             local child = PlayerData.Statistics[stat_name]
@@ -129,32 +129,31 @@ local function pd_update(table, player_name)
     end
 end
 
-local pd_username_player =
-    Gui.element(function(definition, parent, player_list)
+local pd_username_player = Gui.element("pd_username_player")
+    :draw(function(def, parent, player_list)
         return parent.add{
-            name = definition.name,
+            name = def.name,
             type = "drop-down",
             items = player_list,
-            selected_index = #player_list > 0 and 1,
+            selected_index = #player_list > 0 and 1 or nil,
         }
     end)
     :style{
         horizontally_stretchable = true,
-    }:on_selection_changed(function(_, element, _)
+    }:on_selection_state_changed(function(def, event, element)
         local player_name = game.connected_players[element.selected_index]
         local table = element.parent.parent.parent.parent["pd_st_2"].disp.table
         pd_update(table, player_name)
     end)
-    :static_name(Gui.unique_static_name)
 
-local pd_username_update =
-    Gui.element{
+local pd_username_update = Gui.element("pd_username_update")
+    :draw{
         type = "button",
-        name = Gui.unique_static_name,
+        name = Gui.property_from_name,
         caption = "update",
     }:style{
         width = 128,
-    }:on_click(function(_, element, _)
+    }:on_click(function(def, event, element)
         local player_index = element.parent[pd_username_player.name].selected_index
 
         if player_index > 0 then
@@ -164,10 +163,10 @@ local pd_username_update =
         end
     end)
 
-local pd_username_set =
-    Gui.element(function(_, parent, name, player_list)
+local pd_username_set = Gui.element("pd_username_set")
+    :draw(function(_, parent, name, player_list)
         local pd_username_set = parent.add{ type = "flow", direction = "vertical", name = name }
-        local disp = Gui.scroll_table(pd_username_set, label_width["total"], 2, "disp")
+        local disp = Gui.elements.scroll_table(pd_username_set, label_width["total"], 2, "disp")
 
         pd_username_player(disp, player_list)
         pd_username_update(disp)
@@ -175,9 +174,9 @@ local pd_username_set =
         return pd_username_set
     end)
 
-pd_container =
-    Gui.element(function(definition, parent)
-        local container = Gui.container(parent, definition.name, label_width["total"])
+pd_container = Gui.element("pd_container")
+    :draw(function(def, parent)
+        local container = Gui.elements.container(parent, label_width["total"])
         local player_list = {}
 
         for _, player in pairs(game.connected_players) do
@@ -189,12 +188,18 @@ pd_container =
 
         return container.parent
     end)
-    :static_name(Gui.unique_static_name)
-    :add_to_left_flow()
 
-Gui.left_toolbar_button("item/power-armor-mk2", "Player Data GUI", pd_container, function(player)
-    return Roles.player_allowed(player, "gui/playerdata")
-end)
+--- Add the element to the left flow with a toolbar button
+Gui.add_left_element(pd_container, false)
+Gui.create_toolbar_button{
+    name = "player_data_toggle",
+    left_element = pd_container,
+    sprite = "item/power-armor-mk2",
+    tooltip = "Player Data GUI",
+    visible = function(player, element)
+        return Roles.player_allowed(player, "gui/playerdata")
+    end
+}
 
 local function gui_player_list_update()
     local player_list = {}
@@ -204,8 +209,8 @@ local function gui_player_list_update()
     end
 
     for _, player in pairs(game.connected_players) do
-        local frame = Gui.get_left_element(player, pd_container)
-        frame.container["pd_st_1"].disp.table[pd_username_player.name].items = player_list
+        local container = Gui.get_left_element(pd_container, player)
+        container.frame["pd_st_1"].disp.table[pd_username_player.name].items = player_list
     end
 end
 
diff --git a/exp_legacy/module/modules/gui/task-list.lua b/exp_legacy/module/modules/gui/task-list.lua
index d92167f9..15fad44f 100644
--- a/exp_legacy/module/modules/gui/task-list.lua
+++ b/exp_legacy/module/modules/gui/task-list.lua
@@ -524,6 +524,7 @@ local task_list_container = Gui.element("task_list_container")
 
             -- Draw the header
             local header = Gui.elements.header(container, {
+                name = "header",
                 caption = { "task-list.main-caption" },
                 tooltip = { "task-list.sub-tooltip" },
             })
@@ -771,7 +772,7 @@ local function role_update_event(event)
 
     -- Update the new task button and create footer in case the user can now add them
     local has_permission = check_player_permissions(player)
-    local add_new_task_element = frame.header.alignment[add_new_task.name]
+    local add_new_task_element = frame.header.flow[add_new_task.name]
     add_new_task_element.visible = has_permission
     local is_creating = PlayerIsCreating:get(player)
     if is_creating and not has_permission then
diff --git a/exp_legacy/module/modules/gui/vlayer.lua b/exp_legacy/module/modules/gui/vlayer.lua
index 15e6af02..fec2ab7c 100644
--- a/exp_legacy/module/modules/gui/vlayer.lua
+++ b/exp_legacy/module/modules/gui/vlayer.lua
@@ -4,7 +4,7 @@
     @alias vlayer_container
 ]]
 
-local Gui = require("modules.exp_legacy.expcore.gui") --- @dep expcore.gui
+local Gui = require("modules/exp_gui")
 local Roles = require("modules.exp_legacy.expcore.roles") --- @dep expcore.roles
 local Event = require("modules/exp_legacy/utils/event") --- @dep utils.event
 local format_number = require("util").format_number --- @dep util
@@ -81,8 +81,8 @@ Selection.on_selection(SelectionConvertArea, function(event)
         return nil
     end
 
-    local frame = Gui.get_left_element(player, vlayer_container)
-    local disp = frame.container["vlayer_st_2"].disp.table
+    local container = Gui.get_left_element(vlayer_container, player)
+    local disp = container.frame["vlayer_st_2"].disp.table
     local target = vlayer_control_type_list[disp[vlayer_gui_control_type.name].selected_index]
     local entities
 
@@ -138,20 +138,20 @@ end)
 
 --- Display label for the number of solar panels
 -- @element vlayer_gui_display_item_solar_name
-local vlayer_gui_display_item_solar_name =
-    Gui.element{
+local vlayer_gui_display_item_solar_name = Gui.element("vlayer_gui_display_item_solar_name")
+    :draw{
         type = "label",
-        name = "vlayer_display_item_solar_name",
+        name = Gui.property_from_name,
         caption = { "vlayer.display-item-solar" },
         style = "heading_2_label",
     }:style{
         width = 200,
     }
 
-local vlayer_gui_display_item_solar_count =
-    Gui.element{
+local vlayer_gui_display_item_solar_count = Gui.element("vlayer_gui_display_item_solar_count")
+    :draw{
         type = "progressbar",
-        name = "vlayer_display_item_solar_count",
+        name = Gui.property_from_name,
         caption = "",
         value = 0,
         style = "electric_satisfaction_statistics_progressbar",
@@ -162,20 +162,20 @@ local vlayer_gui_display_item_solar_count =
 
 --- Display label for the number of accumulators
 -- @element vlayer_gui_display_item_accumulator_name
-local vlayer_gui_display_item_accumulator_name =
-    Gui.element{
+local vlayer_gui_display_item_accumulator_name = Gui.element("vlayer_gui_display_item_accumulator_name")
+    :draw{
         type = "label",
-        name = "vlayer_display_item_accumulator_name",
+        name = Gui.property_from_name,
         caption = { "vlayer.display-item-accumulator" },
         style = "heading_2_label",
     }:style{
         width = 200,
     }
 
-local vlayer_gui_display_item_accumulator_count =
-    Gui.element{
+local vlayer_gui_display_item_accumulator_count = Gui.element("vlayer_gui_display_item_accumulator_count")
+    :draw{
         type = "progressbar",
-        name = "vlayer_display_item_accumulator_count",
+        name = Gui.property_from_name,
         caption = "",
         value = 0,
         style = "electric_satisfaction_statistics_progressbar",
@@ -186,10 +186,10 @@ local vlayer_gui_display_item_accumulator_count =
 
 --- Display label for the surface area
 -- @element vlayer_gui_display_signal_surface_area_name
-local vlayer_gui_display_signal_surface_area_name =
-    Gui.element{
+local vlayer_gui_display_signal_surface_area_name = Gui.element("vlayer_gui_display_signal_surface_area_name")
+    :draw{
         type = "label",
-        name = "vlayer_display_signal_remaining_surface_area_name",
+        name = Gui.property_from_name,
         caption = { "vlayer.display-remaining-surface-area" },
         tooltip = { "vlayer.display-remaining-surface-area-tooltip" },
         style = "heading_2_label",
@@ -197,10 +197,10 @@ local vlayer_gui_display_signal_surface_area_name =
         width = 200,
     }
 
-local vlayer_gui_display_signal_surface_area_count =
-    Gui.element{
+local vlayer_gui_display_signal_surface_area_count = Gui.element("vlayer_gui_display_signal_surface_area_count")
+    :draw{
         type = "progressbar",
-        name = "vlayer_display_signal_surface_area_count",
+        name = Gui.property_from_name,
         caption = "",
         value = 0,
         style = "electric_satisfaction_statistics_progressbar",
@@ -211,10 +211,10 @@ local vlayer_gui_display_signal_surface_area_count =
 
 --- Display label for the sustained energy production
 -- @element vlayer_gui_display_signal_sustained_name
-local vlayer_gui_display_signal_sustained_name =
-    Gui.element{
+local vlayer_gui_display_signal_sustained_name = Gui.element("vlayer_gui_display_signal_sustained_name")
+    :draw{
         type = "label",
-        name = "vlayer_display_signal_sustained_name",
+        name = Gui.property_from_name,
         caption = { "vlayer.display-sustained-production" },
         tooltip = { "vlayer.display-sustained-production-tooltip" },
         style = "heading_2_label",
@@ -222,10 +222,10 @@ local vlayer_gui_display_signal_sustained_name =
         width = 200,
     }
 
-local vlayer_gui_display_signal_sustained_count =
-    Gui.element{
+local vlayer_gui_display_signal_sustained_count = Gui.element("vlayer_gui_display_signal_sustained_count")
+    :draw{
         type = "progressbar",
-        name = "vlayer_display_signal_sustained_count",
+        name = Gui.property_from_name,
         caption = "",
         value = 0,
         style = "electric_satisfaction_statistics_progressbar",
@@ -236,10 +236,10 @@ local vlayer_gui_display_signal_sustained_count =
 
 --- Display label for the current energy production
 -- @element vlayer_gui_display_signal_production_name
-local vlayer_gui_display_signal_production_name =
-    Gui.element{
+local vlayer_gui_display_signal_production_name = Gui.element("vlayer_gui_display_signal_production_name")
+    :draw{
         type = "label",
-        name = "vlayer_display_signal_production_name",
+        name = Gui.property_from_name,
         caption = { "vlayer.display-current-production" },
         tooltip = { "vlayer.display-current-production-tooltip" },
         style = "heading_2_label",
@@ -247,10 +247,10 @@ local vlayer_gui_display_signal_production_name =
         width = 200,
     }
 
-local vlayer_gui_display_signal_production_count =
-    Gui.element{
+local vlayer_gui_display_signal_production_count = Gui.element("vlayer_gui_display_signal_production_count")
+    :draw{
         type = "progressbar",
-        name = "vlayer_display_signal_production_count",
+        name = Gui.property_from_name,
         caption = "",
         value = 0,
         style = "electric_satisfaction_statistics_progressbar",
@@ -261,10 +261,10 @@ local vlayer_gui_display_signal_production_count =
 
 --- Display label for the sustained energy capacity
 -- @element vlayer_gui_display_signal_capacity_name
-local vlayer_gui_display_signal_capacity_name =
-    Gui.element{
+local vlayer_gui_display_signal_capacity_name = Gui.element("vlayer_gui_display_signal_capacity_name")
+    :draw{
         type = "label",
-        name = "vlayer_display_signal_capacity_name",
+        name = Gui.property_from_name,
         caption = { "vlayer.display-current-capacity" },
         tooltip = { "vlayer.display-current-capacity-tooltip" },
         style = "heading_2_label",
@@ -272,10 +272,10 @@ local vlayer_gui_display_signal_capacity_name =
         width = 200,
     }
 
-local vlayer_gui_display_signal_capacity_count =
-    Gui.element{
+local vlayer_gui_display_signal_capacity_count = Gui.element("vlayer_gui_display_signal_capacity_count")
+    :draw{
         type = "progressbar",
-        name = "vlayer_display_signal_capacity_count",
+        name = Gui.property_from_name,
         caption = "",
         value = 0,
         style = "electric_satisfaction_statistics_progressbar",
@@ -286,10 +286,10 @@ local vlayer_gui_display_signal_capacity_count =
 
 --- A vertical flow containing all the displays labels and their counts
 -- @element vlayer_display_set
-local vlayer_display_set =
-    Gui.element(function(_, parent, name)
+local vlayer_display_set = Gui.element("vlayer_display_set")
+    :draw(function(_, parent, name)
         local vlayer_set = parent.add{ type = "flow", direction = "vertical", name = name }
-        local disp = Gui.scroll_table(vlayer_set, 400, 2, "disp")
+        local disp = Gui.elements.scroll_table(vlayer_set, 400, 2, "disp")
 
         vlayer_gui_display_item_solar_name(disp)
         vlayer_gui_display_item_solar_count(disp)
@@ -308,8 +308,8 @@ local vlayer_display_set =
     end)
 
 local function vlayer_gui_list_refresh(player)
-    local frame = Gui.get_left_element(player, vlayer_container)
-    local disp = frame.container["vlayer_st_2"].disp.table
+    local container = Gui.get_left_element(vlayer_container, player)
+    local disp = container.frame["vlayer_st_2"].disp.table
     local target = disp[vlayer_gui_control_type.name].selected_index
     local full_list = {}
 
@@ -326,58 +326,59 @@ end
 
 --- A drop down list filter by this type
 -- @element vlayer_gui_control_type
-vlayer_gui_control_type =
-    Gui.element{
+vlayer_gui_control_type = Gui.element("vlayer_gui_control_type")
+    :draw{
         type = "drop-down",
-        name = Gui.unique_static_name,
+        name = Gui.property_from_name,
         items = { { "vlayer.control-type-energy" }, { "vlayer.control-type-circuit" }, { "vlayer.control-type-storage-input" }, { "vlayer.control-type-storage-output" } },
         selected_index = 1,
     }:style{
         width = 200,
-    }:on_selection_changed(function(player, _, _)
-        vlayer_gui_list_refresh(player)
+    }:on_selection_state_changed(function(def, event, element)
+        vlayer_gui_list_refresh(Gui.get_player(event))
     end)
 
 --- A drop down list to see the exact item to remove
 -- @element vlayer_gui_control_list
-vlayer_gui_control_list =
-    Gui.element{
+vlayer_gui_control_list = Gui.element("vlayer_gui_control_list")
+    :draw{
         type = "drop-down",
-        name = Gui.unique_static_name,
+        name = Gui.property_from_name,
     }:style{
         width = 200,
     }
 
 --- A button to refresh the remove list
 -- @element vlayer_gui_control_refresh
-local vlayer_gui_control_refresh =
-    Gui.element{
+local vlayer_gui_control_refresh = Gui.element("vlayer_gui_control_refresh")
+    :draw{
         type = "button",
-        name = Gui.unique_static_name,
+        name = Gui.property_from_name,
         caption = { "vlayer.control-refresh" },
     }:style{
         width = 200,
-    }:on_click(function(player, _, _)
-        vlayer_gui_list_refresh(player)
+    }:on_click(function(def, event, element)
+        vlayer_gui_list_refresh(Gui.get_player(event))
     end)
 
 --- A button to check if the item is the one wanted to remove
 -- @element vlayer_gui_control_see
-local vlayer_gui_control_see =
-    Gui.element{
+local vlayer_gui_control_see = Gui.element("vlayer_gui_control_see")
+    :draw{
         type = "button",
-        name = Gui.unique_static_name,
+        name = Gui.property_from_name,
         caption = { "vlayer.control-see" },
     }:style{
         width = 200,
-    }:on_click(function(player, element, _)
+    }:on_click(function(def, event, element)
         local target = element.parent[vlayer_gui_control_type.name].selected_index
         local n = element.parent[vlayer_gui_control_list.name].selected_index
-
+        
         if target and vlayer_control_type_list[target] and n > 0 then
             local i = vlayer.get_interfaces()
             local entity = i[vlayer_control_type_list[target]][n]
             if entity and entity.valid then
+                local player = Gui.get_player(event)
                 player.set_controller{ type = defines.controllers.remote, position = entity.position, surface = entity.surface }
                 player.print{ "vlayer.result-interface-location", { "vlayer.control-type-" .. vlayer_control_type_list[target]:gsub("_", "-") }, pos_to_gps_string(entity.position, entity.surface.name) }
             end
@@ -386,14 +387,15 @@ local vlayer_gui_control_see =
 
 --- A button used to build the vlayer interface
 -- @element vlayer_gui_control_build
-local vlayer_gui_control_build =
-    Gui.element{
+local vlayer_gui_control_build = Gui.element("vlayer_gui_control_build")
+    :draw{
         type = "button",
-        name = Gui.unique_static_name,
+        name = Gui.property_from_name,
         caption = { "vlayer.control-build" },
     }:style{
         width = 200,
-    }:on_click(function(player, _, _)
+    }:on_click(function(def, event, element)
+        local player = Gui.get_player(event)
         if Selection.is_selecting(player, SelectionConvertArea) then
             Selection.stop(player)
             player.print{ "vlayer.exit" }
@@ -407,14 +409,15 @@ local vlayer_gui_control_build =
 
 --- A button used to remove the vlayer interface
 -- @element vlayer_gui_control_remove
-local vlayer_gui_control_remove =
-    Gui.element{
+local vlayer_gui_control_remove = Gui.element("vlayer_gui_control_remove")
+    :draw{
         type = "button",
-        name = Gui.unique_static_name,
+        name = Gui.property_from_name,
         caption = { "vlayer.control-remove" },
     }:style{
         width = 200,
-    }:on_click(function(player, element, _)
+    }:on_click(function(def, event, element)
+        local player = Gui.get_player(event)
         local target = element.parent[vlayer_gui_control_type.name].selected_index
         local n = element.parent[vlayer_gui_control_list.name].selected_index
 
@@ -435,10 +438,10 @@ local vlayer_gui_control_remove =
 
 --- A vertical flow containing all the control buttons
 -- @element vlayer_control_set
-local vlayer_control_set =
-    Gui.element(function(_, parent, name)
+local vlayer_control_set = Gui.element("vlayer_control_set")
+    :draw(function(_, parent, name)
         local vlayer_set = parent.add{ type = "flow", direction = "vertical", name = name }
-        local disp = Gui.scroll_table(vlayer_set, 400, 2, "disp")
+        local disp = Gui.elements.scroll_table(vlayer_set, 400, 2, "disp")
 
         vlayer_gui_control_type(disp)
         vlayer_gui_control_list(disp)
@@ -452,10 +455,10 @@ local vlayer_control_set =
 
 --- The main container for the vlayer gui
 -- @element vlayer_container
-vlayer_container =
-    Gui.element(function(definition, parent)
-        local player = Gui.get_player_from_element(parent)
-        local container = Gui.container(parent, definition.name, 400)
+vlayer_container = Gui.element("vlayer_container")
+    :draw(function(definition, parent)
+        local player = Gui.get_player(parent)
+        local container = Gui.elements.container(parent, 400)
 
         vlayer_display_set(container, "vlayer_st_1")
         local control_set = vlayer_control_set(container, "vlayer_st_2")
@@ -463,21 +466,25 @@ vlayer_container =
 
         return container.parent
     end)
-    :static_name(Gui.unique_static_name)
-    :add_to_left_flow()
 
---- Button on the top flow used to toggle the task list container
--- @element toggle_left_element
-Gui.left_toolbar_button("entity/solar-panel", { "vlayer.main-tooltip" }, vlayer_container, function(player)
-    return Roles.player_allowed(player, "gui/vlayer")
-end)
+--- Add the element to the left flow with a toolbar button
+Gui.add_left_element(vlayer_container, false)
+Gui.create_toolbar_button{
+    name = "vlayer_toggle",
+    left_element = vlayer_container,
+    sprite = "entity/solar-panel",
+    tooltip = { "vlayer.main-tooltip" },
+    visible = function(player, element)
+        return Roles.player_allowed(player, "gui/vlayer")
+    end
+}
 
 --- Update the visibly of the buttons based on a players roles
 local function role_update_event(event)
     local player = game.players[event.player_index]
     local visible = Roles.player_allowed(player, "gui/vlayer-edit")
-    local frame = Gui.get_left_element(player, vlayer_container)
-    frame.container["vlayer_st_2"].visible = visible
+    local container = Gui.get_left_element(vlayer_container, player)
+    container.frame["vlayer_st_2"].visible = visible
 end
 
 Event.add(Roles.events.on_role_assigned, role_update_event)
@@ -516,8 +523,8 @@ Event.on_nth_tick(config.update_tick_gui, function(_)
     }
 
     for _, player in pairs(game.connected_players) do
-        local frame = Gui.get_left_element(player, vlayer_container)
-        local disp = frame.container["vlayer_st_1"].disp.table
+        local container = Gui.get_left_element(vlayer_container, player)
+        local disp = container.frame["vlayer_st_1"].disp.table
 
         for k, v in pairs(vlayer_display) do
             disp[k].caption = v.cap
diff --git a/exp_legacy/module/modules/gui/warp-list.lua b/exp_legacy/module/modules/gui/warp-list.lua
index e96de051..376612f7 100644
--- a/exp_legacy/module/modules/gui/warp-list.lua
+++ b/exp_legacy/module/modules/gui/warp-list.lua
@@ -5,7 +5,7 @@
 ]]
 
 local ExpUtil = require("modules/exp_util")
-local Gui = require("modules.exp_legacy.expcore.gui") --- @dep expcore.gui
+local Gui = require("modules/exp_gui")
 local Datastore = require("modules.exp_legacy.expcore.datastore") --- @dep expcore.datastore
 local Storage = require("modules/exp_util/storage")
 local Event = require("modules/exp_legacy/utils/event") --- @dep utils.event
@@ -78,18 +78,19 @@ end
 
 --- Will add a new warp to the list, checks if the player is too close to an existing one
 -- @element add_new_warp
-local add_new_warp =
-    Gui.element{
+local add_new_warp = Gui.element("add_new_warp")
+    :draw{
         type = "sprite-button",
         sprite = "utility/add",
         tooltip = { "warp-list.add-tooltip" },
         style = "shortcut_bar_button",
-        name = Gui.unique_static_name,
+        name = Gui.property_from_name,
     }
     :style(Styles.sprite22)
-    :on_click(function(player, _)
-        -- Add the new warp
+    :on_click(function(def, event, element)
+        local player = Gui.get_player(event)
         if player.controller_type ~= defines.controllers.character then return end
+        -- Add the new warp
         local force_name = player.force.name
         local surface = player.physical_surface
         local position = player.physical_position
@@ -158,8 +159,8 @@ local add_new_warp =
 
 --- Warp icon button, this will trigger a warp when the player is able to
 -- @element warp_icon_button
-local warp_icon_button =
-    Gui.element(function(definition, parent, warp)
+local warp_icon_button = Gui.element("warp_icon_button")
+    :draw(function(def, parent, warp)
         local warp_position = warp.position
 
         -- The SpritePath type is not the same as the SignalID type
@@ -172,15 +173,15 @@ local warp_icon_button =
         return parent.add{
             type = "sprite-button",
             sprite = sprite,
-            name = definition.name,
+            name = def.name,
             tooltip = { "warp-list.goto-tooltip", warp_position.x, warp_position.y },
             style = "slot_button",
         }
     end)
     :style(Styles.sprite32)
-    :static_name(Gui.unique_static_name)
-    :on_click(function(player, element, _)
+    :on_click(function(def, event, element)
         if element.type == "choose-elem-button" then return end
+        local player = Gui.get_player(event)
         local warp_id = element.parent.caption
         Warps.teleport_player(warp_id, player)
 
@@ -194,23 +195,22 @@ local warp_icon_button =
 
 --- The button that is visible when the warp is in edit state
 -- @element warp_icon_editing
-local warp_icon_editing =
-    Gui.element(function(definition, parent, warp)
+local warp_icon_editing = Gui.element("warp_icon_editing")
+    :draw(function(def, parent, warp)
         return parent.add{
-            name = definition.name,
+            name = def.name,
             type = "choose-elem-button",
             elem_type = "signal",
             signal = { type = warp.icon.type, name = warp.icon.name },
             tooltip = { "warp-list.goto-edit" },
         }
     end)
-    :static_name(Gui.unique_static_name)
     :style(Styles.sprite32)
 
 --- Warp label, visible if the player is not in edit state
 -- @element warp_label
-local warp_label =
-    Gui.element(function(definition, parent, warp)
+local warp_label = Gui.element("warp_label")
+    :draw(function(def, parent, warp)
         local last_edit_name = warp.last_edit_name
         local last_edit_time = warp.last_edit_time
         -- Draw the element
@@ -218,7 +218,7 @@ local warp_label =
             type = "label",
             caption = warp.name,
             tooltip = { "warp-list.last-edit", last_edit_name, format_time(last_edit_time) },
-            name = definition.name,
+            name = def.name,
         }
     end)
     :style{
@@ -227,21 +227,21 @@ local warp_label =
         right_padding = 2,
         horizontally_stretchable = true,
     }
-    :on_click(function(player, element, _)
+    :on_click(function(def, event, element)
+        local player = Gui.get_player(event)
         local warp_id = element.parent.caption
         local warp = Warps.get_warp(warp_id)
         player.set_controller{ type = defines.controllers.remote, position = warp.position, surface = warp.surface }
     end)
-    :static_name(Gui.unique_static_name)
 
 --- Warp status, visible if the player is not in edit state
 --- This will show if the warp is connected or not
 -- @element warp_status
-local warp_status =
-    Gui.element{
+local warp_status = Gui.element("warp_status")
+    :draw{
         type = "label",
         caption = "[img=utility/electricity_icon_unplugged]", -- Temporary icon
-        name = Gui.unique_static_name,
+        name = Gui.property_from_name,
     }
     :style{
         -- When editing mode because textbox is larger the icon would move up.
@@ -251,14 +251,14 @@ local warp_status =
 
 --- Warp textfield, visible if the player is in edit state
 -- @element warp_textfield
-local warp_textfield =
-    Gui.element(function(definition, parent, warp)
+local warp_textfield = Gui.element("warp_textfield")
+    :draw(function(def, parent, warp)
         -- Draw the element
         return parent.add{
             type = "textfield",
             text = warp.name,
             clear_and_focus_on_right_click = true,
-            name = definition.name,
+            name = def.name,
         }
     end)
     :style{
@@ -273,46 +273,50 @@ local warp_textfield =
         left_margin = 2,
         right_margin = 2,
     }
-    :on_confirmed(function(player, element, _)
+    :on_confirmed(function(def, event, element)
+        local player = Gui.get_player(event)
         local warp_id = element.parent.caption
         local warp_name = element.text
-        local warp_icon = element.parent.parent["icon-" .. warp_id][warp_icon_editing.name].elem_value
+        local warp_icon = element.parent.parent["icon-" .. warp_id][warp_icon_editing.name].elem_value --[[ @as SignalID ]]
+        if warp_icon.type == nil then warp_icon.type = "item" end
         Warps.set_editing(warp_id, player.name)
         Warps.update_warp(warp_id, warp_name, warp_icon, player.name)
     end)
-    :static_name(Gui.unique_static_name)
 
 --- Confirms the edit to name or icon of the warp
 -- @element confirm_edit_button
-local confirm_edit_button =
-    Gui.element{
+local confirm_edit_button = Gui.element("confirm_edit_button")
+    :draw{
         type = "sprite-button",
         sprite = "utility/confirm_slot",
         tooltip = { "warp-list.confirm-tooltip" },
         style = "shortcut_bar_button_green",
-        name = Gui.unique_static_name,
+        name = Gui.property_from_name,
     }
     :style(Styles.sprite22)
-    :on_click(function(player, element)
+    :on_click(function(def, event, element)
+        local player = Gui.get_player(event)
         local warp_id = element.parent.caption
         local warp_name = element.parent.parent["name-" .. warp_id][warp_textfield.name].text
-        local warp_icon = element.parent.parent["icon-" .. warp_id][warp_icon_editing.name].elem_value
+        local warp_icon = element.parent.parent["icon-" .. warp_id][warp_icon_editing.name].elem_value --[[ @as SignalID ]]
+        if warp_icon.type == nil then warp_icon.type = "item" end
         Warps.set_editing(warp_id, player.name)
         Warps.update_warp(warp_id, warp_name, warp_icon, player.name)
     end)
 
 --- Cancels the editing changes of the selected warp name or icon
 -- @element cancel_edit_button
-local cancel_edit_button =
-    Gui.element{
+local cancel_edit_button = Gui.element("cancel_edit_button")
+    :draw{
         type = "sprite-button",
         sprite = "utility/close_black",
         tooltip = { "warp-list.cancel-tooltip" },
         style = "shortcut_bar_button_red",
-        name = Gui.unique_static_name,
+        name = Gui.property_from_name,
     }
     :style(Styles.sprite22)
-    :on_click(function(player, element)
+    :on_click(function(def, event, element)
+        local player = Gui.get_player(event)
         local warp_id = element.parent.caption
         -- Check if this is the first edit, if so remove the warp.
         local warp = Warps.get_warp(warp_id)
@@ -325,32 +329,33 @@ local cancel_edit_button =
 
 --- Removes a warp from the list, including the physical area and map tag
 -- @element remove_warp_button
-local remove_warp_button =
-    Gui.element{
+local remove_warp_button = Gui.element("remove_warp_button")
+    :draw{
         type = "sprite-button",
         sprite = "utility/trash",
         tooltip = { "warp-list.remove-tooltip" },
         style = "shortcut_bar_button_red",
-        name = Gui.unique_static_name,
+        name = Gui.property_from_name,
     }
     :style(Styles.sprite22)
-    :on_click(function(_, element)
+    :on_click(function(def, event, element)
         local warp_id = element.parent.caption
         Warps.remove_warp(warp_id)
     end)
 
 --- Opens edit mode for the warp
 -- @element edit_warp_button
-local edit_warp_button =
-    Gui.element{
+local edit_warp_button = Gui.element("edit_warp_button")
+    :draw{
         type = "sprite-button",
         sprite = "utility/rename_icon",
         tooltip = { "warp-list.edit-tooltip-none" },
         style = "shortcut_bar_button",
-        name = Gui.unique_static_name,
+        name = Gui.property_from_name,
     }
     :style(Styles.sprite22)
-    :on_click(function(player, element)
+    :on_click(function(def, event, element)
+        local player = Gui.get_player(event)
         local warp_id = element.parent.caption
         Warps.set_editing(warp_id, player.name, true)
     end)
@@ -358,8 +363,8 @@ local edit_warp_button =
 local update_all_warp_elements
 --- Set of three elements which make up each row of the warp table
 -- @element add_warp_elements
-local add_warp_elements =
-    Gui.element(function(_, parent, warp)
+local add_warp_elements = Gui.element("add_warp_elements")
+    :draw(function(_, parent, warp)
         -- Add icon flow, this will contain the warp button and warp icon edit button
         local icon_flow = parent.add{
             name = "icon-" .. warp.warp_id,
@@ -398,9 +403,6 @@ local add_warp_elements =
         cancel_edit_button(button_flow)
         edit_warp_button(button_flow)
         remove_warp_button(button_flow)
-
-        -- Return the warp flow elements
-        return { icon_flow, name_flow, button_flow }
     end)
 
 -- Removes the three elements that are added as part of the warp base
@@ -412,10 +414,10 @@ end
 
 --- This timer controls when a player is able to warp, eg every 60 seconds
 -- @element warp_timer
-local warp_timer =
-    Gui.element{
+local warp_timer = Gui.element("warp_timer")
+    :draw{
         type = "progressbar",
-        name = Gui.unique_static_name,
+        name = Gui.property_from_name,
         tooltip = { "warp-list.timer-tooltip-zero", config.cooldown_duration },
         minimum_value = 0,
         maximum_value = config.cooldown_duration * config.update_smoothing,
@@ -499,10 +501,10 @@ end
 --- Update the warp buttons for a player
 function update_all_warp_elements(player, timer, warp_id)
     -- Get the warp table
-    local frame = Gui.get_left_element(player, warp_list_container)
-    local scroll_table = frame.container.scroll.table
+    local container = Gui.get_left_element(warp_list_container, player)
+    local scroll_table = container.frame.scroll.table
 
-    -- Check if the player is currenty on cooldown
+    -- Check if the player is currently on cooldown
     timer = timer or PlayerCooldown:get(player)
     local on_cooldown = timer > 0
     -- Get the warp the player is on
@@ -627,8 +629,8 @@ end
 local function update_all_warp_force(force)
     local warp_ids = Warps.get_force_warp_ids(force.name)
     for _, player in pairs(force.connected_players) do
-        local frame = Gui.get_left_element(player, warp_list_container)
-        local warp_table = frame.container.scroll.table
+        local container = Gui.get_left_element(warp_list_container, player)
+        local warp_table = container.frame.scroll.table
 
         warp_table.clear() -- Needed to re-sort the warps
         for _, warp_id in ipairs(warp_ids) do
@@ -639,20 +641,20 @@ end
 
 --- Main warp list container for the left flow
 -- @element warp_list_container
-warp_list_container =
-    Gui.element(function(definition, parent)
-        local player = Gui.get_player_from_element(parent)
+warp_list_container = Gui.element("warp_list_container")
+    :draw(function(def, parent)
+        local player = Gui.get_player(parent)
         -- Check if user has permission to add warps
         local allow_add_warp = check_player_permissions(player, "allow_add_warp")
 
         -- Draw the internal container
-        local container = Gui.container(parent, definition.name, allow_add_warp and 268 or 220)
+        local container = Gui.elements.container(parent, allow_add_warp and 268 or 220)
 
         -- Draw the header
-        local header = Gui.header(
-            container,
-            { "warp-list.main-caption" },
-            {
+        local header = Gui.elements.header(container, {
+            name = "header",
+            caption = { "warp-list.main-caption" },
+            tooltip = {
                 "warp-list.sub-tooltip",
                 config.cooldown_duration,
                 config.standard_proximity_radius,
@@ -663,15 +665,14 @@ warp_list_container =
                 { "warp-list.sub-tooltip-not_available", warp_status_icons.not_available },
                 { "warp-list.sub-tooltip-bypass", warp_status_icons.bypass },
             },
-            true
-        )
+        })
 
         -- Draw the new warp button
         local add_new_warp_element = add_new_warp(header)
         add_new_warp_element.visible = allow_add_warp
 
         -- Draw the scroll table for the warps
-        local scroll_table = Gui.scroll_table(container, 250, 3)
+        local scroll_table = Gui.elements.scroll_table(container, 250, 3, "scroll")
         -- Set the scroll panel to always show the scrollbar (not doing this will result in a changing gui size)
         scroll_table.parent.vertical_scroll_policy = "always"
 
@@ -699,18 +700,22 @@ warp_list_container =
         -- Return the external container
         return container.parent
     end)
-    :static_name(Gui.unique_static_name)
-    :add_to_left_flow()
 
---- Button on the top flow used to toggle the warp list container
--- @element toggle_warp_list
-Gui.left_toolbar_button(config.default_icon.type .. "/" .. config.default_icon.name, { "warp-list.main-tooltip" }, warp_list_container, function(player)
-    return Roles.player_allowed(player, "gui/warp-list")
+--- Add the element to the left flow with a toolbar button
+Gui.add_left_element(warp_list_container, false)
+Gui.create_toolbar_button{
+    name = "warp_list_toggle",
+    left_element = warp_list_container,
+    sprite = config.default_icon.type .. "/" .. config.default_icon.name,
+    tooltip = { "warp-list.main-tooltip" },
+    visible = function(player, element)
+        return Roles.player_allowed(player, "gui/warp-list")
+    end
+}:on_click(function(def, event, element)
+    -- Set gui keep open state for player that clicked the button: true if visible, false if invisible
+    local player = Gui.get_player(event)
+    keep_gui_open[player.name] = Gui.get_toolbar_button_state(element)
 end)
-    :on_event(Gui.events.on_visibility_changed_by_click, function(player, _, event)
-        -- Set gui keep open state for player that clicked the button: true if visible, false if invisible
-        keep_gui_open[player.name] = event.state
-    end)
 
 --- When the name of a warp is updated this is triggered
 Warps.on_update(function(_, warp, old_warp)
@@ -728,7 +733,7 @@ PlayerInRange:on_update(function(player_name, warp_id)
 
     -- Change if the frame is visible based on if the player is in range
     if not keep_gui_open[player.name] then
-        Gui.toggle_left_element(player, warp_list_container, warp_id ~= nil)
+        Gui.set_left_element_visible(warp_list_container, player, warp_id ~= nil)
     end
 
     update_all_warp_elements(player, nil, warp_id)
@@ -738,8 +743,8 @@ end)
 PlayerCooldown:on_update(function(player_name, player_cooldown)
     -- Get the progress bar element
     local player = game.players[player_name]
-    local frame = Gui.get_left_element(player, warp_list_container)
-    local warp_timer_element = frame.container[warp_timer.name]
+    local container = Gui.get_left_element(warp_list_container, player)
+    local warp_timer_element = container.frame[warp_timer.name]
 
     -- Set the progress
     if player_cooldown and player_cooldown > 0 then
@@ -818,8 +823,8 @@ Event.on_nth_tick(math.floor(60 / config.update_smoothing), function()
             end
 
             -- Change the enabled state of the add warp button
-            local frame = Gui.get_left_element(player, warp_list_container)
-            local add_warp_element = frame.container.header.alignment[add_new_warp.name]
+            local container = Gui.get_left_element(warp_list_container, player)
+            local add_warp_element = container.frame.header.flow[add_new_warp.name]
             local old_closest_warp_name = add_warp_element.tooltip[2] or closest_warp and closest_warp.name
             local was_able_to_make_warp = add_warp_element.enabled
             local can_make_warp = closest_distance == nil or closest_distance > mr2
@@ -858,27 +863,27 @@ end)
 --- Update the warps when the player joins
 Event.add(defines.events.on_player_joined_game, function(event)
     local player = game.players[event.player_index]
-    local frame = Gui.get_left_element(player, warp_list_container)
-    local scroll_table = frame.container.scroll.table
+    local container = Gui.get_left_element(warp_list_container, player)
+    local scroll_table = container.frame.scroll.table
     update_all_warps(player, scroll_table)
 end)
 
 --- Makes sure the right buttons are present when roles change
 local function role_update_event(event)
     local player = game.players[event.player_index]
-    local container = Gui.get_left_element(player, warp_list_container).container
+    local frame = Gui.get_left_element(warp_list_container, player).frame
 
     -- Check if user has permission to add warps
     local allow_add_warp = check_player_permissions(player, "allow_add_warp")
     -- Update container size depending on whether the player is allowed to add warps
-    container.parent.style.width = allow_add_warp and 268 or 220
+    frame.parent.style.width = allow_add_warp and 268 or 220
 
-    -- Update the warps, incase the user can now edit them
-    local scroll_table = container.scroll.table
+    -- Update the warps, in case the user can now edit them
+    local scroll_table = frame.scroll.table
     update_all_warps(player, scroll_table)
 
-    -- Update the new warp button incase the user can now add them
-    local add_new_warp_element = container.header.alignment[add_new_warp.name]
+    -- Update the new warp button in case the user can now add them
+    local add_new_warp_element = frame.header.flow[add_new_warp.name]
     add_new_warp_element.visible = allow_add_warp
 end