implement UIElement.debugDraw

lib/simple_ui/core/builder.lua

@@ -1,18 +1,20 @@
-local Element = require "lib.simple_ui.core.element"
-
 --- Объект, который отвечает за работу с элементами интерфейса одного экрана
 --- @class UIBuilder
 --- @field builder fun(): UIElement
+--- @field debugDraw boolean
 --- @field private states {string: table}
 --- @field private elementTree UIElement
 local builder = {}
 builder.__index = builder
 
+--- @param cfg {debugDraw: boolean?, builder: (fun(): UIElement)}
 --- @return UIBuilder
-local function new(from)
-    from.states = {}
-    setmetatable(from, builder)
-    return from
+function builder.new(cfg)
+    local t = setmetatable(cfg, builder)
+    t.states = {}
+    t.builder = cfg.builder
+    t.debugDraw = cfg.debugDraw or false
+    return cfg
 end
 
 --- @param newNode UIElement?
@@ -103,6 +105,9 @@ end
 
 function builder:draw()
     self.elementTree:draw()
+    if self.debugDraw then
+        self.elementTree:debugDraw()
+    end
 end
 
-return new
+return builder.new

lib/simple_ui/core/element.lua

@@ -24,6 +24,17 @@ function element:update(dt) end
 
 function element:draw() end
 
+function element:debugDraw()
+    love.graphics.setColor(1, 0, 0)
+    love.graphics.line(0, 0, self._size_.x, 0)
+    love.graphics.line(0, 0, 0, self._size_.y)
+    love.graphics.line(self._size_.x, 0, self._size_.x,
+        self._size_.y)
+    love.graphics.line(0, self._size_.y, self._size_.x,
+        self._size_.y)
+    love.graphics.setColor(1, 1, 1)
+end
+
 --- Рекурсивно обходит дерево элементов вверх, начиная с первого родителя.
 ---
 --- К каждому посещенному элементу применяет функцию visitor.

lib/simple_ui/core/multi_child_element.lua

@@ -24,17 +24,18 @@ function element:draw()
     for _, child in ipairs(self._children_) do
         child:draw()
     end
+    love.graphics.pop()
+end
 
+function element:debugDraw()
+    love.graphics.push("transform")
+    love.graphics.translate(self._offset_.x, self._offset_.y)
 
-    --- @TODO: сделать дебажный метод для отрисовки границ
-    love.graphics.setColor(1, 0, 0)
-    love.graphics.line(0, 0, self._size_.x, 0)
-    love.graphics.line(0, 0, 0, self._size_.y)
-    love.graphics.line(self._size_.x, 0, self._size_.x,
-        self._size_.y)
-    love.graphics.line(0, self._size_.y, self._size_.x,
-        self._size_.y)
-    love.graphics.setColor(1, 1, 1)
+    for _, child in ipairs(self._children_) do
+        child:debugDraw()
+    end
+
+    Element.debugDraw(self)
 
     love.graphics.pop()
 end

lib/simple_ui/core/single_child_element.lua

@@ -33,6 +33,17 @@ function element:draw()
     love.graphics.pop()
 end
 
+function element:debugDraw()
+    love.graphics.push("transform")
+    love.graphics.translate(self._offset_.x, self._offset_.y)
+
+    if self._child_ then self._child_:debugDraw() end
+
+    Element.debugDraw(self)
+
+    love.graphics.pop()
+end
+
 --- @generic T : SingleChildElement
 --- @param self T
 --- @param values {child: UIElement?, [string]: any}

lib/simple_ui/level/test.lua

@@ -22,7 +22,6 @@ end
 
 function Canary:build()
     self.state.i = self.state.i and self.state.i + 1 or 0
-    print(self.state.i)
 
     return Placeholder:new {}
 end
@@ -97,6 +96,7 @@ function MyWidget:build()
 end
 
 return Builder {
+    debugDraw = true,
     builder = function()
         return ScreenArea:new {
             child = MyWidget:new {}