Make marker UI metrics configurable

items.lua

@@ -12,6 +12,28 @@ local chunk, gui, skin, audio, maps, markers, map_formspec, settings = ...;
 -- The list of players looking at maps, and the map IDs that they're looking at
 local player_maps = {};
 
+-- Get the position of an element based on grid coordinates and marker ui metrics
+--
+-- x: The x position on the grid
+-- y: The y position on the grid
+--
+-- Returns the transformed x and y coordinates
+local function marker_position(x, y)
+    return x * (skin.marker_metrics.w + skin.marker_metrics.x_margin) + skin.marker_metrics.x_margin,
+           y * (skin.marker_metrics.h + skin.marker_metrics.y_margin) + skin.marker_metrics.y_margin
+end
+
+-- Get the size of an element based on grid coordinates and marker ui metrics
+--
+-- w: The width in grid spaces
+-- h: The height in grid spaces
+--
+-- Returns the transformed width and height
+local function marker_size(w, h)
+    return w * skin.marker_metrics.w + (w - 1) * skin.marker_metrics.x_margin,
+           h * skin.marker_metrics.h + (h - 1) * skin.marker_metrics.y_margin
+end
+
 -- Generate formspec data for the map marker editor
 --
 -- selected_id: The id of the currently selected marker, or nil if no marker is
@@ -23,27 +45,36 @@ local player_maps = {};
 local function marker_formspec(selected_id, detail, page)
     local marker_lookup = markers.get_all();
 
+    local page_size = skin.marker_metrics.rows * skin.marker_metrics.columns
+
+    local x,y = marker_position(0, 0)
+    local w,h = marker_size(2, 1)
     local formspec = {
         gui.button {
-            x = 0.125,
+            x = x,
-            y = 0.125,
+            y = y,
-
+            w = w,
-            w = 1.125,
+            h = h,
-            h = 0.5,
 
             id = "clear_marker",
             text = "Erase",
             tooltip = "Remove the selected marker",
         },
-
-        gui.label {
-            x = 1.375,
-            y = 3.5,
-
-            text = string.format("%d / %d", page, math.ceil(#marker_lookup / 20)),
-        },
     };
 
+    if page_size < #marker_lookup then
+        local _
+        x = (marker_size(skin.marker_metrics.columns, 0) + skin.marker_metrics.x_margin) * 0.5
+        _,y = marker_position(0, skin.marker_metrics.rows + 1.5)
+        table.insert(formspec, gui.label {
+                x = x - 0.2, -- Rough estimate to center-align the text with default font/scale
+                y = y,
+
+                text = string.format("%d / %d", page, math.ceil(#marker_lookup / page_size)),
+                textcolor = skin.marker_button.font_color,
+            })
+    end
+
     if selected_id then
         table.insert(formspec, gui.style {
             selector = "marker-" .. selected_id,
@@ -55,15 +86,17 @@ local function marker_formspec(selected_id, detail, page)
         });
     end
 
-    local starting_id = ((page - 1) * 20) + 1;
+    local starting_id = ((page - 1) * page_size) + 1;
-    for i = starting_id,math.min(#marker_lookup,starting_id + 19),1 do
+    w,h = marker_size(1, 1)
+    for i = starting_id,math.min(#marker_lookup,starting_id + (page_size - 1)),1 do
         local marker = marker_lookup[i];
+        x,y = marker_position((i - starting_id) % skin.marker_metrics.columns,
+                              math.floor((i - starting_id) / skin.marker_metrics.columns) + 1)
         table.insert(formspec, gui.image_button {
-            x = (i - starting_id) % 5 * 0.625 + 0.125,
+            x = x,
-            y = math.floor((i - starting_id) / 5) * 0.625 + 0.75,
+            y = y,
-
+            w = w,
-            w = 0.5,
+            h = h,
-            h = 0.5,
 
             image = marker.textures[math.min(detail, #marker.textures)] .. ".png",
             id = "marker-" .. marker.id,
@@ -71,26 +104,28 @@ local function marker_formspec(selected_id, detail, page)
         });
     end
 
+    x,y = marker_position(0, skin.marker_metrics.rows + 1)
+    w,h = marker_size(1, 1)
     if page > 1 then
         table.insert(formspec, gui.button {
-            x = 0.125,
+            x = x,
-            y = 3.25,
+            y = y,
-
+            w = w,
-            w = 0.5,
+            h = h,
-            h = 0.5,
 
             id = "prev_button",
             text = "<"
         });
     end
 
-    if starting_id + 19 < #marker_lookup then
+    if starting_id + (page_size - 1) < #marker_lookup then
+        x,y = marker_position(skin.marker_metrics.columns - 1, skin.marker_metrics.rows + 1)
+        w,h = marker_size(1, 1)
         table.insert(formspec, gui.button {
-            x = 2.625,
+            x = x,
-            y = 3.25,
+            y = y,
-
+            w = w,
-            w = 0.5,
+            h = h,
-            h = 0.5,
 
             id = "next_button",
             text = ">"
@@ -147,16 +182,16 @@ local function show_map_formspec(map, player_x, player_z, player_name, height_mo
         },
         gui.container {
             x = formspec_width - 0.01,
-            y = 0.125,
+            y = skin.marker_metrics.y_margin,
-            w = 0.75,
+            w = skin.marker_metrics.w + (skin.marker_metrics.x_margin * 2),
-            h = 0.75,
+            h = skin.marker_metrics.h + (skin.marker_metrics.y_margin * 2),
             bg = skin.marker_bg,
 
             gui.image_button {
-                x = 0.125,
+                x = skin.marker_metrics.x_margin,
-                y = 0.125,
+                y = skin.marker_metrics.y_margin,
-                w = 0.5,
+                w = skin.marker_metrics.w,
-                h = 0.5,
+                h = skin.marker_metrics.h,
 
                 id = "height_button",
                 image = height_button_texture,
@@ -166,11 +201,12 @@ local function show_map_formspec(map, player_x, player_z, player_name, height_mo
     };
 
     if markers.count() > 0 then
+        local w,h = marker_size(skin.marker_metrics.columns, skin.marker_metrics.rows + 2)
         table.insert(data, gui.container {
                     x = formspec_width - 0.01,
-                    y = 1,
+                    y = skin.marker_metrics.h + skin.marker_metrics.y_margin * 4,
-                    w = 3.25,
+                    w = w + skin.marker_metrics.x_margin * 2,
-                    h = 3.875,
+                    h = h + skin.marker_metrics.y_margin * 2,
                     bg = skin.marker_bg,
 
                     marker_formspec(map:get_marker(player_x, player_z), map.detail, marker_page or 1)});
@@ -270,6 +306,8 @@ minetest.register_on_player_receive_fields(function(player, name, fields)
             return;
         end
 
+        local page_size = skin.marker_metrics.rows * skin.marker_metrics.columns
+
         for k,_ in pairs(fields) do
             local marker = k:match("marker%-(.+)");
             local pos = player:get_pos();
@@ -283,7 +321,7 @@ minetest.register_on_player_receive_fields(function(player, name, fields)
                 local new_page = math.max(data.page - 1, 1);
                 show_map_formspec(map, pos.x, pos.z, player:get_player_name(), data.height_mode, new_page);
             elseif k == "next_button" then
-                local new_page = math.min(data.page + 1, math.ceil(markers.count() / 20));
+                local new_page = math.min(data.page + 1, math.ceil(markers.count() / page_size));
                 show_map_formspec(map, pos.x, pos.z, player:get_player_name(), data.height_mode, new_page);
             elseif k == "height_button" then
                 show_map_formspec(map, pos.x, pos.z, player:get_player_name(), not data.height_mode, data.page);

skin_api.lua

@@ -184,6 +184,16 @@ return {
         radius = 8,
     },
 
+    -- Standard size / spacing units for the marker UI
+    marker_metrics = {
+        w = 0.5,
+        h = 0.5,
+        x_margin = 0.5 / 4,
+        y_margin = 0.5 / 4,
+        rows = 4,
+        columns = 5,
+    },
+
     -- The texture of the height toggle button when active
     height_button_texture = "cartographer_height_button",