Fixed Element's x and y position offset by their containers margin_left and/or margin_top, fixed containers 'inheriting' their parents and/or grandparents margin_left/top causing them to have an outer_height greater than it should be (needs a little more work.)

lib/cyberarm_engine/ui/border_canvas.rb

@@ -62,32 +62,32 @@ module CyberarmEngine
 
     def update
       # TOP
-      @top.x = @element.x + @element.styled(:border_thickness_left)
-      @top.y = @element.y
+      @top.x = @element.x + @element.styled(:margin_left) + @element.styled(:border_thickness_left)
+      @top.y = @element.y + @element.styled(:margin_top)
       @top.z = @element.z
 
       @top.width  = @element.width - @element.styled(:border_thickness_left)
       @top.height = @element.styled(:border_thickness_top)
 
       # RIGHT
-      @right.x = @element.x + @element.width
-      @right.y = @element.y + @element.styled(:border_thickness_top)
+      @right.x = @element.x + @element.styled(:margin_left) + @element.width
+      @right.y = @element.y + @element.styled(:margin_top) + @element.styled(:border_thickness_top)
       @right.z = @element.z
 
       @right.width  = -@element.styled(:border_thickness_right)
       @right.height = @element.height - @element.styled(:border_thickness_top)
 
       # BOTTOM
-      @bottom.x = @element.x
-      @bottom.y = @element.y + @element.height
+      @bottom.x = @element.x + @element.styled(:margin_left)
+      @bottom.y = @element.y + @element.styled(:margin_top) + @element.height
       @bottom.z = @element.z
 
       @bottom.width  = @element.width - @element.styled(:border_thickness_right)
       @bottom.height = -@element.styled(:border_thickness_bottom)
 
       # LEFT
-      @left.x = @element.x
-      @left.y = @element.y
+      @left.x = @element.x + @element.styled(:margin_left)
+      @left.y = @element.y + @element.styled(:margin_top)
       @left.z = @element.z
 
       @left.width  = @element.styled(:border_thickness_left)

lib/cyberarm_engine/ui/element.rb

@@ -18,6 +18,7 @@ module CyberarmEngine
       @visible = !@options.key?(:visible) ? true  : @options[:visible]
       @tip     = @options[:tip] || ""
 
+      @debug = @options[:debug]
       @debug_color = @options[:debug_color].nil? ? Gosu::Color::RED : @options[:debug_color]
 
       @style = Style.new(options)
@@ -124,8 +125,8 @@ module CyberarmEngine
 
       @background_nine_slice_canvas.image = img
 
-      @background_nine_slice_canvas.x = @x
-      @background_nine_slice_canvas.y = @y
+      @background_nine_slice_canvas.x = @x + styled(:margin_left)
+      @background_nine_slice_canvas.y = @y + styled(:margin_top)
       @background_nine_slice_canvas.z = @z
       @background_nine_slice_canvas.width = width
       @background_nine_slice_canvas.height = height
@@ -324,9 +325,12 @@ module CyberarmEngine
       @border_canvas&.draw
 
       render
+
+      debug_draw if @debug
     end
 
     def debug_draw
+      return if @debug == false # allow elements to opt out of debug drawing, makes debugging some things easier.
       return if CyberarmEngine.const_defined?("GUI_DEBUG_ONLY_ELEMENT") && self.class == GUI_DEBUG_ONLY_ELEMENT
 
       Gosu.draw_line(
@@ -374,8 +378,8 @@ module CyberarmEngine
     end
 
     def hit?(x, y)
-      x.between?(@x, @x + width) &&
-        y.between?(@y, @y + height)
+      x.between?(@x + styled(:margin_left), @x + styled(:margin_left) + width) &&
+        y.between?(@y + styled(:margin_top), @y + styled(:margin_top) + height)
     end
 
     def width
@@ -516,8 +520,8 @@ module CyberarmEngine
     end
 
     def update_background
-      @background_canvas&.x = @x
-      @background_canvas&.y = @y
+      @background_canvas&.x = @x + styled(:margin_left)
+      @background_canvas&.y = @y + styled(:margin_top)
       @background_canvas&.z = @z
       @background_canvas&.width  = width
       @background_canvas&.height = height
@@ -545,8 +549,8 @@ module CyberarmEngine
     def update_background_image
       return unless @background_image_canvas
 
-      @background_image_canvas.x = @x
-      @background_image_canvas.y = @y
+      @background_image_canvas.x = @x + styled(:margin_left)
+      @background_image_canvas.y = @y + styled(:margin_top)
       @background_image_canvas.z = @z
       @background_image_canvas.width = width
       @background_image_canvas.height = height

lib/cyberarm_engine/ui/elements/container.rb

@@ -79,16 +79,16 @@ module CyberarmEngine
       end
 
       def render
-        Gosu.clip_to(
-          @x + styled(:border_thickness_left) + styled(:padding_left),
-          @y + styled(:border_thickness_top) + styled(:padding_top),
-          content_width + 1,
-          content_height + 1
-        ) do
+        # Gosu.clip_to(
+        #   @x - 1 + styled(:margin_left) + styled(:border_thickness_left) + styled(:padding_left),
+        #   @y - 1 + styled(:margin_top) + styled(:border_thickness_top) + styled(:padding_top),
+        #   content_width + 1,
+        #   content_height + 1
+        # ) do
           Gosu.translate(@scroll_position.x, @scroll_position.y) do
             @children.each(&:draw)
           end
-        end
+        # end
       end
 
       def debug_draw
@@ -126,8 +126,8 @@ module CyberarmEngine
       end
 
       def update_child_element_visibity(child)
-        child.element_visible = child.x >= (@x - @scroll_position.x) - child.width && child.x <= (@x - @scroll_position.x) + width &&
-                                child.y >= (@y - @scroll_position.y) - child.height && child.y <= (@y - @scroll_position.y) + height
+        child.element_visible = child.x >= ((styled(:margin_left) + @x) - @scroll_position.x) - child.width && child.x <= ((styled(:margin_left) + @x) - @scroll_position.x) + width &&
+                                child.y >= ((styled(:margin_top) + @y) - @scroll_position.y) - child.height && child.y <= ((styled(:margin_top) + @y) - @scroll_position.y) + height
       end
 
       def update_scroll
@@ -182,8 +182,20 @@ module CyberarmEngine
           _width = dimensional_size(@style.width, :width)
           _height = dimensional_size(@style.height, :height)
 
-          @width  = _width  || (@children.map { |c| c.x + c.outer_width }.max || 0).floor
-          @height = _height || (@children.map { |c| c.y + c.outer_height }.max || 0).floor
+          width_correction = 0
+          height_correction = 0
+          o = self
+          while (par = o&.parent)
+            if o.is_a?(Container)
+              width_correction += o.styled(:margin_left) + o.styled(:padding_left)
+              height_correction += o.styled(:margin_top) + o.styled(:padding_top)
+            end
+
+            o = par.parent
+          end
+
+          @width  = _width  || (@children.map { |c| c.x + c.outer_width }.max.to_f - width_correction).floor
+          @height = _height || (@children.map { |c| c.y + c.outer_height }.max.to_f - height_correction).floor
         end
 
         # FIXME: Correctly handle alignment when element has siblings
@@ -213,8 +225,8 @@ module CyberarmEngine
         # t = Gosu.milliseconds
         # Move children to parent after positioning
         @children.each do |child|
-          child.x += (@x + styled(:border_thickness_left)) - styled(:margin_left)
-          child.y += (@y + styled(:border_thickness_top)) - styled(:margin_top)
+          child.x += (@x + styled(:border_thickness_left))
+          child.y += (@y + styled(:border_thickness_top))
 
           child.stylize
           child.recalculate
@@ -258,8 +270,8 @@ module CyberarmEngine
       end
 
       def position_on_current_line(element) # Flow
-        element.x = element.styled(:margin_left) + @current_position.x
-        element.y = element.styled(:margin_top)  + @current_position.y
+        element.x = @current_position.x
+        element.y = @current_position.y
 
         @current_position.x += element.outer_width
       end
@@ -275,18 +287,18 @@ module CyberarmEngine
       end
 
       def position_on_next_line(element) # Flow
-        @current_position.x = styled(:margin_left) + styled(:padding_left)
+        @current_position.x = 0
         @current_position.y += tallest_neighbor(element, @current_position.y).outer_height
 
-        element.x = element.styled(:margin_left) + @current_position.x
-        element.y = element.styled(:margin_top)  + @current_position.y
+        element.x = @current_position.x
+        element.y = @current_position.y
 
         @current_position.x += element.outer_width
       end
 
       def move_to_next_line(element) # Stack
-        element.x = element.styled(:margin_left) + @current_position.x
-        element.y = element.styled(:margin_top)  + @current_position.y
+        element.x = @current_position.x
+        element.y = @current_position.y
 
         @current_position.y += element.outer_height
       end

lib/cyberarm_engine/ui/elements/slider.rb

@@ -62,10 +62,10 @@ module CyberarmEngine
       end
 
       def position_handle
-        @handle.x = @x + @handle.styled(:margin_left) + styled(:padding_left) + styled(:border_thickness_left) +
+        @handle.x = styled(:margin_left) + @x + @handle.styled(:margin_left) + styled(:padding_left) + styled(:border_thickness_left) +
                     ((content_width - @handle.outer_width) * (@value - @range.min) / (@range.max - @range.min).to_f)
 
-        @handle.y = @y + @handle.styled(:margin_top) + styled(:border_thickness_top) + styled(:padding_top)
+        @handle.y = styled(:margin_top) + @y + @handle.styled(:margin_top) + styled(:border_thickness_top) + styled(:padding_top)
       end
 
       def draw

lib/cyberarm_engine/ui/elements/text_block.rb

@@ -62,21 +62,21 @@ module CyberarmEngine
         @width  = _width  || @text_width.floor
         @height = _height || @text_height.floor
 
-        @text.y = styled(:border_thickness_top) + styled(:padding_top) + @y
+        @text.y = styled(:margin_top) + styled(:border_thickness_top) + styled(:padding_top) + @y
         @text.z = @z + 3
 
         if (text_alignment = @options[:text_align] || @options[:text_h_align])
           case text_alignment
           when :left
-            @text.x = styled(:border_thickness_left) + styled(:padding_left) + @x
+            @text.x = styled(:margin_left) + styled(:border_thickness_left) + styled(:padding_left) + @x
           when :center
             @text.x = if @text_width <= width
-                        @x + width / 2 - @text_width / 2
+                        @x + styled(:margin_left) + width / 2 - @text_width / 2
                       else # Act as left aligned
-                        styled(:border_thickness_left) + styled(:padding_left) + @x
+                        styled(:margin_left) + styled(:border_thickness_left) + styled(:padding_left) + @x
                       end
           when :right
-            @text.x = @x + outer_width - (@text_width + styled(:border_thickness_right) + styled(:padding_right))
+            @text.x = @x + styled(:margin_left) + outer_width - (@text_width + styled(:border_thickness_right) + styled(:padding_right))
           end
         end
 
@@ -84,12 +84,12 @@ module CyberarmEngine
           case vertical_alignment
           when :center
             @text.y = if @text_height <= height
-                        @y + height / 2 - @text_height / 2
+                        @y + styled(:margin_top) + height / 2 - @text_height / 2
                       else
-                        styled(:border_thickness_top) + styled(:padding_top) + @y
+                        styled(:margin_top) + styled(:border_thickness_top) + styled(:padding_top) + @y
                       end
           when :bottom
-            @text.y = @y + outer_height - (@text_height + styled(:border_thickness_bottom) + styled(:padding_bottom))
+            @text.y = @y + styled(:margin_top) + outer_height - (@text_height + styled(:border_thickness_bottom) + styled(:padding_bottom))
           end
         end
 

lib/cyberarm_engine/ui/style.rb

@@ -31,6 +31,7 @@ module CyberarmEngine
       border_thickness border_thickness_left border_thickness_right border_thickness_top border_thickness_bottom
       padding padding_left padding_right padding_top padding_bottom
       margin margin_left margin_right margin_top margin_bottom
+      aspect_ratio
 
       fraction_background scroll fill text_wrap v_align h_align delay tag font text_size
       image_width image_height