[0.10.3]GUI: inconsistent padding after changing window size

[Dark]

GUI reacts weirdly to changes in padding after changing game's window size (maximizing, full-screening, etc.).
Padding scale is affected by change of window size until GUI element is recreated.

Setup:
1. There is a custom frame, width/height fixed in styles, uses monolith background, dimensions are 200x200
2. Inside that frame(1) is another frame that uses standard "naked" style - on this frame padding is applied.
3. Inside naked frame (2) is a button with width/height fixed in styles, dimensions are 8x8, scalable=false, monolith.

Goal - position button(3) precisely in the center of frame(1).
Now weird behavior can be observed when changing leftpadding/toppadding of (2) on different window sizes:

1. Start a game, window size is default, padding values for positioning button(3) in the center of frame(1) are (top=95, left=95).
2. Maximize window (on 1080p), padding values for positioning dot in the center of frame(1) becomes (83, 83).
   You need to actually try setting the new padding value to see the inconsistency, nothing visually happens on window size change.
3. Recreate GUI elements while game maximized - padding values of center back to (95, 95).

[kovarex]

Hello, could you please provide the lua code you used to do this?

How did you center the element, I don't see a way to center elements in our gui now, did you specify the paddings manually?

[Dark]

I set paddings manually.
It's not hard to center element assuming two conditions: padding values have fixed step and boundary is fixed.
My final goal is not centering UI but creating sorta compass and it actually works, but it limited to just one dot, don't seem to be possible to add more without insane positioning algo or ability to position elements absolutely, like in html.

The minimal test code would be

Gui style definition:

Code: Select all

data.raw["gui-style"]["default"]["AI_radiobutton"] = 
{
  type = "button_style",
  parent = "button_style",
  width = 17,
  height = 17,
  scalable = true,
  default_graphical_set =
  {
    type = "monolith",
    top_monolith_border = 0,
    right_monolith_border = 0,
    bottom_monolith_border = 0,
    left_monolith_border = 0,
    monolith_image =
    {
      filename = "__core__/graphics/gui.png",
      width = 10,
      height = 10,
      x = 43,
      y = 34
    }
  },
  hovered_graphical_set =
  {
    type = "monolith",
    top_monolith_border = 0,
    right_monolith_border = 0,
    bottom_monolith_border = 0,
    left_monolith_border = 0,
    monolith_image =
    {
      filename = "__core__/graphics/gui.png",
      width = 10,
      height = 10,
      x = 54,
      y = 34
    }  
  },
  clicked_graphical_set =
  {
    type = "monolith",
    top_monolith_border = 0,
    right_monolith_border = 0,
    bottom_monolith_border = 0,
    left_monolith_border = 0,
    monolith_image =
    {
      filename = "__core__/graphics/gui.png",
      width = 10,
      height = 10,
      x = 65,
      y = 34
    }
  },
}

data.raw["gui-style"]["default"]["AI_dot"] = 
{
  type = "button_style",
  parent = "AI_radiobutton",
  width = 8,
  height = 8,
  scalable = false,
  
  default_graphical_set =
  {
    type = "monolith",
    top_monolith_border = 0,
    right_monolith_border = 0,
    bottom_monolith_border = 0,
    left_monolith_border = 0,
    monolith_image =
    {
      filename = "__core__/graphics/gui.png",
      width = 10,
      height = 10,
      x = 54,
      y = 34
    }
  },
}


data.raw["gui-style"]["default"]["AI_compass_frame_style"] =
{
  type = "frame_style",
  scalable = false, -- if changed to true then the bug is triggered immediately after resize, see Note #2
  width = 200,
  height = 200,
  top_padding = 0,
  right_padding = 0,
  bottom_padding = 0,
  left_padding = 0,
  graphical_set =
  {
    type = "monolith",
    top_monolith_border = 0,
    right_monolith_border = 0,
    bottom_monolith_border = 0,
    left_monolith_border = 0,
    monolith_image =
    {
      filename = "__AdvancedIllumination__/graphics/compass.png",
      width = 200,
      height = 200,
      x = 0,
      y = 0
    }
  }
}

Compass.png image


Minimal control code:

Code: Select all

    game.player.gui["left"].direction = 'vertical'
    local frame = game.player.gui["left"].add{type="frame", name="AI_main_frame", style="naked_frame_style", caption = '', direction='vertical'}
    local direction_container = frame.add{type="frame", name="direction_container", caption = '', direction='vertical'}
    local direction_selector = direction_container.add{type="frame", name="direction_selector", caption = '', direction='horizontal', style="naked_frame_style"}
    local radial = direction_selector.add{type="frame", name="radial", caption = '', style="AI_compass_frame_style", direction='vertical'}
    local dot_container = radial.add{type="frame", name="dot_container", caption = '', style="naked_frame_style", direction='horizontal'}
    dot_container.add{type="button", name="ai_dot", caption = '', style="AI_dot"}
    local dot_style = dot_container.style
    dot_style.toppadding = 100
    dot_style.leftpadding = 100

Console code (after resize):

Code: Select all

game.player.gui.left.AI_main_frame.direction_container.direction_selector.radial.dot_container.style.toppadding = 100

Before resize:


After maximizing game's window and manually setting same padding:


Note 1: it seems that fixed "radial" frame overflows it's monolith background in all directions for about 3-5 pixels and that overflow is hidden.
This can be noticed by adding black lines (1-2 pixel) on edges of compass.png, it could be another bug.

Note 2: if scalable is set to true on compass frame style then the bug still exists but it triggered immediately after resize. The padding values for center are also changed for some reason, values are reset after recreating UI elements.

[cube]

related? https://forums.factorio.com/forum/vie ... =48&t=4853

[kovarex]

Is it still happening in 0.11.15 ?