- implemement Scale and virtual screen size for ScreenArea

- fix state management
- WIP

.luarc.json

@@ -6,5 +6,6 @@
     "love.filesystem.load": "loadfile"
   },
   "workspace.ignoreDir": ["dev_utils"],
-  "diagnostics.ignoredFiles": "Disable"
+  "diagnostics.ignoredFiles": "Disable",
+  "hint.enable": true
 }

lib/simple_ui/core/builder.lua

@@ -0,0 +1,114 @@
+--- Объект, который отвечает за работу с элементами интерфейса одного экрана
+--- @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
+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?
+--- @param oldNode UIElement?
+--- @private
+function builder:didChange(newNode, oldNode)
+    if not oldNode or not newNode then
+        return true
+    end
+    if oldNode.type ~= newNode.type then return true end
+    if oldNode.key ~= newNode.key then return true end
+    return false
+end
+
+--- @param element UIElement
+--- @private
+function builder:makeKey(element)
+    if not element.key then return nil end
+    return element.type .. "<" .. tostring(element.key) .. ">"
+end
+
+--- @generic T
+--- @param element StatefulElement<T>
+--- @return T
+function builder:initStateOf(element)
+    return element.initState and element:initState() or {}
+end
+
+--- @generic T
+--- @param element StatefulElement<T>
+--- @return T
+function builder:getStateOf(element)
+    return element.getState and element:getState() or self.states[self:makeKey(element)]
+end
+
+--- @param cur UIElement
+--- @private
+function builder:build_step(cur)
+    -- Самоприсваивания должны вырезаться компилятором, я в это верю
+    cur = cur --[[@as SingleChildElement | StatefulElement | MultiChildElement]]
+
+    local key = self:makeKey(cur)
+    if key then
+        cur = cur --[[@as StatefulElement]]
+        local storedState = self:getStateOf(cur)
+        if not storedState then
+            self.states[key] = self:initStateOf(cur)
+            cur.state = self.states[key]
+        else
+            cur.state = storedState
+        end
+    end
+
+    local buildRes = cur:build()
+    if not buildRes then return end
+
+    if buildRes.type then
+        cur = cur --[[@as SingleChildElement]]
+
+        cur._child_ = buildRes
+        buildRes._parent_ = cur
+
+        self:build_step(cur._child_)
+    else
+        cur = cur --[[@as MultiChildElement]]
+        cur._children_ = buildRes
+        for _, child in ipairs(cur._children_) do
+            child._parent_ = cur
+            self:build_step(child)
+        end
+    end
+end
+
+--- Этот метод раскрывает всех отложенных (через build) детей в дереве и хитро их кэширует, чтобы не перестраивались постоянно
+---
+--- Благодаря этому можно каждый раз создавать новые элементы в верстке, а получать старые :)
+function builder:build()
+    self.elementTree = self:builder()
+    self:build_step(self.elementTree)
+end
+
+function builder:layout()
+    self.elementTree:layout()
+end
+
+function builder:update(dt)
+    self.elementTree:update(dt)
+end
+
+function builder:draw()
+    self.elementTree:draw()
+    if self.debugDraw then
+        self.elementTree:debugDraw()
+    end
+end
+
+return builder.new

lib/simple_ui/core/constraints.lua

@@ -0,0 +1,21 @@
+--- @class Constraints
+--- @field minWidth number
+--- @field maxWidth number
+--- @field minHeight number
+--- @field maxHeight number
+local constraints = {
+    minWidth = 0,
+    maxWidth = math.huge,
+    minHeight = 0,
+    maxHeight = math.huge
+}
+
+constraints.__index = constraints
+
+--- @param from {minWidth: number?, maxWidth: number?, minHeight: number?, maxHeight: number?}
+--- @return Constraints
+local function new(from)
+    return setmetatable(from, constraints)
+end
+
+return new

lib/simple_ui/core/element.lua

@@ -0,0 +1,56 @@
+local Constraints = require "lib.simple_ui.core.constraints"
+local Vec3 = require "lib.utils.vec3"
+
+--- @class UIElement
+--- @field key? any Must be convertible to string
+--- @field type string
+--- @field _parent_? UIElement
+--- @field _constraints_ Constraints
+--- @field _offset_ Vec3 Положение левого верхнего угла элемента в локальных координатах {x, y}. Устанавливается родительским элементом.
+--- @field _size_ Vec3 Размеры элемента {x, y}
+local element = {}
+element.__index = element
+element.type = "Element"
+element._constraints_ = Constraints {}
+element._offset_ = Vec3 {}
+element._size_ = Vec3 {}
+
+--- "Constraints go down. Sizes go up. Parent sets position."
+---
+--- Karl Marx, probably.
+function element:layout() end
+
+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.
+---
+--- Обход заканчивается, если visitor возвращает false, или если родители кончились.
+--- @param visitor fun(element: UIElement): boolean
+function element:traverseUp(visitor)
+    if not self._parent_ then return end
+    if not visitor(self._parent_) then return end
+    return self._parent_:traverseUp(visitor)
+end
+
+--- @param values {[string]: any}
+--- @return UIElement
+function element:new(values)
+    return setmetatable(values, self)
+end
+
+return element

lib/simple_ui/core/multi_child_element.lua

@@ -0,0 +1,50 @@
+local Element = require "lib.simple_ui.core.element"
+
+--- @class MultiChildElement : UIElement
+--- @field children UIElement[]
+--- @field _children_ UIElement[]
+local element = setmetatable({}, require "lib.simple_ui.core.element")
+element.__index = element
+element._children_ = {}
+
+--- @return UIElement[]
+function element:build()
+    return self.children
+end
+
+function element:update(dt)
+    for _, child in ipairs(self._children_) do
+        child:update(dt)
+    end
+end
+
+function element:draw()
+    love.graphics.push("transform")
+    love.graphics.translate(self._offset_.x, self._offset_.y)
+    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)
+
+    for _, child in ipairs(self._children_) do
+        child:debugDraw()
+    end
+
+    Element.debugDraw(self)
+
+    love.graphics.pop()
+end
+
+--- @generic T : MultiChildElement
+--- @param values {children: UIElement[]?, [string]: any}
+--- @return T
+function element:new(values)
+    return Element.new(self, values)
+end
+
+return element

lib/simple_ui/core/rect.lua

@@ -18,7 +18,7 @@ function rect.new(table)
 end
 
 function rect:hasPoint(x, y)
-    return x >= self.x and x < self.x + self.width and y >= self.y and y < self.y + self.height
+    return x >= self.x and x < self.width and y >= self.y and y < self.height
 end
 
 return rect.new

lib/simple_ui/core/single_child_element.lua

@@ -0,0 +1,55 @@
+local Element = require "lib.simple_ui.core.element"
+local Constraints = require "lib.simple_ui.core.constraints"
+
+--- @class SingleChildElement : UIElement
+--- @field child? UIElement
+--- @field _child_? UIElement
+local element = setmetatable({}, require "lib.simple_ui.core.element")
+element.__index = element
+
+--- дефолтное поведение -- просто возвращать переданного ребенка
+function element:build()
+    return self.child
+end
+
+function element:layout()
+    --- передать ребенку ограничения
+    --- получить назад размеры
+    --- разместить ребенка
+    if not self._child_ then return end
+    self._child_._constraints_ = Constraints(self._constraints_)
+    self._child_:layout()
+    self._child_._offset_ = Vec3 {}
+end
+
+function element:update(dt)
+    if self._child_ then self._child_:update(dt) end
+end
+
+function element:draw()
+    love.graphics.push("transform")
+    love.graphics.translate(self._offset_.x, self._offset_.y)
+    if self._child_ then self._child_:draw() end
+    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}
+--- @return T
+function element:new(values)
+    return Element.new(self, values)
+end
+
+return element

lib/simple_ui/core/stateful_element.lua

@@ -0,0 +1,18 @@
+local SingleChildElement = require "lib.simple_ui.core.single_child_element"
+
+--- @generic T : table
+--- @class StatefulElement<T> : SingleChildElement
+--- @field initState? fun(self: StatefulElement<T>): T Создает исходное состояние элемента, когда он попадает в дерево в первый раз.
+--- @field getState? fun(self: StatefulElement<T>): T Возвращает состояние элемента. Можно переопределить, чтобы хранить его где хочется.
+local element = setmetatable({}, SingleChildElement)
+element.__index = element
+element.type = "StatefulElement"
+element.state = {}
+
+--- @return StatefulElement<T>
+--- @param values {key: any, child: UIElement?}
+function element:new(values)
+    return SingleChildElement.new(self, values)
+end
+
+return element

lib/simple_ui/core/types.d.lua

@@ -0,0 +1,3 @@
+--- @alias Axis "horizontal" | "vertical"
+--- @alias MainAxisSize "max" | "min"
+--- @alias MainAxisAlignment "start" | "center" | "end"

lib/simple_ui/element.lua

@@ -1,109 +0,0 @@
-local Rect = require "lib.simple_ui.rect"
-
-local function makeGradientMesh(w, h, topColor, bottomColor)
-    local vertices = {
-        { 0, 0, 0, 0, topColor[1],    topColor[2],    topColor[3],    topColor[4] },    -- левый верх
-        { w, 0, 1, 0, topColor[1],    topColor[2],    topColor[3],    topColor[4] },    -- правый верх
-        { w, h, 1, 1, bottomColor[1], bottomColor[2], bottomColor[3], bottomColor[4] }, -- правый низ
-        { 0, h, 0, 1, bottomColor[1], bottomColor[2], bottomColor[3], bottomColor[4] }, -- левый низ
-    }
-    local mesh = love.graphics.newMesh(vertices, "fan", "static")
-    return mesh
-end
-
---- @class UIElement
---- @field bounds Rect Прямоугольник, в границах которого размещается элемент. Размеры и положение в экранных координатах
---- @field overlayGradientMesh love.Mesh Общий градиент поверх элемента (интерполированный меш)
-local uiElement = {}
-uiElement.bounds = Rect {}
-uiElement.overlayGradientMesh = makeGradientMesh(1, 1, { 0, 0, 0, 0 }, { 0, 0, 0, 0.4 });
-uiElement.__index = uiElement
-
-function uiElement:update(dt) end
-
-function uiElement:draw() end
-
-function uiElement:hitTest(screenX, screenY)
-    return self.bounds:hasPoint(screenX, screenY)
-end
-
---- @generic T : UIElement
---- @param values table
---- @param self T
---- @return T
-function uiElement.new(self, values)
-    values.bounds = values.bounds or Rect {}
-    values.overlayGradientMesh = values.overlayGradientMesh or uiElement.overlayGradientMesh;
-    return setmetatable(values, self)
-end
-
---- Рисует границу вокруг элемента (с псевдо-затенением)
---- @param type "outer" | "inner"
---- @param width? number
-function uiElement:drawBorder(type, width)
-    local w = width or 4
-    love.graphics.setLineWidth(w)
-
-    if type == "inner" then
-        love.graphics.setColor(0.2, 0.2, 0.2)
-        love.graphics.line({
-            self.bounds.x, self.bounds.y + self.bounds.height,
-            self.bounds.x, self.bounds.y,
-            self.bounds.x + self.bounds.width, self.bounds.y,
-        })
-
-        love.graphics.setColor(0.3, 0.3, 0.3)
-        love.graphics.line({
-            self.bounds.x + self.bounds.width, self.bounds.y,
-            self.bounds.x + self.bounds.width, self.bounds.y + self.bounds.height,
-            self.bounds.x, self.bounds.y + self.bounds.height,
-        })
-    else
-        love.graphics.setColor(0.3, 0.3, 0.3)
-        -- love.graphics.line({
-        --     self.bounds.x, self.bounds.y + self.bounds.height,
-        --     self.bounds.x, self.bounds.y,
-        --     self.bounds.x + self.bounds.width, self.bounds.y,
-        -- })
-        love.graphics.line({
-            self.bounds.x, self.bounds.y + self.bounds.height - w,
-            self.bounds.x, self.bounds.y + w,
-        })
-
-        love.graphics.line({
-            self.bounds.x + w, self.bounds.y,
-            self.bounds.x + self.bounds.width - w, self.bounds.y,
-        })
-
-        love.graphics.setColor(0.2, 0.2, 0.2)
-        -- love.graphics.line({
-        --     self.bounds.x + self.bounds.width, self.bounds.y,
-        --     self.bounds.x + self.bounds.width, self.bounds.y + self.bounds.height,
-        --     self.bounds.x, self.bounds.y + self.bounds.height,
-        -- })
-
-        love.graphics.line({
-            self.bounds.x + self.bounds.width, self.bounds.y + w,
-            self.bounds.x + self.bounds.width, self.bounds.y + self.bounds.height - w,
-        })
-
-        love.graphics.line({
-            self.bounds.x + self.bounds.width - w, self.bounds.y + self.bounds.height,
-            self.bounds.x + w, self.bounds.y + self.bounds.height,
-        })
-    end
-
-    love.graphics.setColor(1, 1, 1)
-end
-
---- рисует градиент поверх элемента
-function uiElement:drawGradientOverlay()
-    love.graphics.push()
-    love.graphics.translate(self.bounds.x, self.bounds.y)
-    love.graphics.scale(self.bounds.width, self.bounds.height)
-    love.graphics.setColor(1, 1, 1, 1)
-    love.graphics.draw(self.overlayGradientMesh)
-    love.graphics.pop()
-end
-
-return uiElement

lib/simple_ui/elements/center.lua

@@ -0,0 +1,28 @@
+local Constraints = require "lib.simple_ui.core.constraints"
+local SingleChildElement = require "lib.simple_ui.core.single_child_element"
+
+--- @class Center : SingleChildElement
+local element = setmetatable({}, SingleChildElement)
+element.__index = element
+element.type = "Center"
+
+function element:layout()
+    self._size_ = Vec3 { self._constraints_.maxWidth, self._constraints_.maxHeight }
+
+    if not self._child_ then return end
+    self._child_._constraints_ = Constraints(self._constraints_)
+    self._child_:layout()
+
+    self._child_._offset_ = Vec3 {
+        (self._size_.x - self._child_._size_.x) / 2,
+        (self._size_.y - self._child_._size_.y) / 2,
+    }
+end
+
+--- @return Center
+--- @param values {child: UIElement?}
+function element:new(values)
+    return SingleChildElement.new(self, values)
+end
+
+return element

lib/simple_ui/elements/flex.lua

@@ -0,0 +1,78 @@
+local Constraints = require "lib.simple_ui.core.constraints"
+local MultiChildElement = require "lib.simple_ui.core.multi_child_element"
+
+--- @class Flex : MultiChildElement
+--- @field direction Axis
+--- @field mainAxisSize MainAxisSize
+--- @field mainAxisAlignment MainAxisAlignment
+local element = setmetatable({}, require "lib.simple_ui.core.multi_child_element")
+element.__index = element
+element.type = "Flex"
+element.direction = "horizontal"
+element.mainAxisSize = "max"
+element.mainAxisAlignment = "start"
+
+function element:layout()
+    local mainAxisSize = 0
+    local crossAxisSize = 0
+    if self.direction == "horizontal" then
+        for _, child in ipairs(self._children_) do
+            child._constraints_ = Constraints { maxHeight = self._constraints_.maxHeight }
+            child:layout()
+            if child._size_.y > crossAxisSize then crossAxisSize = child._size_.y end
+            mainAxisSize = mainAxisSize + child._size_.x
+        end
+
+        local start = 0
+        if self.mainAxisAlignment == "center" then
+            start = self._constraints_.maxWidth / 2 - mainAxisSize / 2
+        elseif self.mainAxisAlignment == "end" then
+            start = self._constraints_.maxWidth - mainAxisSize
+        end
+        local shift = 0
+        for _, child in ipairs(self._children_) do
+            child._offset_ = Vec3 { start + shift, 0 }
+            shift = shift + child._size_.x
+        end
+
+        if self.mainAxisSize == "max" then
+            self._size_ = Vec3 { self._constraints_.maxWidth, crossAxisSize }
+        else
+            self._size_ = Vec3 { mainAxisSize, crossAxisSize }
+        end
+    else
+        for _, child in ipairs(self._children_) do
+            child._constraints_ = Constraints { maxWidth = self._constraints_.maxWidth }
+            child:layout()
+            if child._size_.x > crossAxisSize then crossAxisSize = child._size_.x end
+            mainAxisSize = mainAxisSize + child._size_.y
+        end
+
+
+        local start = 0
+        if self.mainAxisAlignment == "center" then
+            start = self._constraints_.maxHeight / 2 - mainAxisSize / 2
+        elseif self.mainAxisAlignment == "end" then
+            start = self._constraints_.maxHeight - mainAxisSize
+        end
+        local shift = 0
+        for _, child in ipairs(self._children_) do
+            child._offset_ = Vec3 { 0, start + shift }
+            shift = shift + child._size_.y
+        end
+
+        if self.mainAxisSize == "max" then
+            self._size_ = Vec3 { crossAxisSize, self._constraints_.maxHeight }
+        else
+            self._size_ = Vec3 { crossAxisSize, mainAxisSize }
+        end
+    end
+end
+
+--- @param values {direction: Axis?, mainAxisSize: MainAxisSize?, mainAxisAlignment: MainAxisAlignment?, children: UIElement[]?}
+--- @return Flex
+function element:new(values)
+    return MultiChildElement.new(self, values)
+end
+
+return element

lib/simple_ui/elements/padding.lua

@@ -0,0 +1,41 @@
+local Constraints = require "lib.simple_ui.core.constraints"
+local SingleChildElement = require "lib.simple_ui.core.single_child_element"
+
+--- @class Padding : SingleChildElement
+--- @field left number
+--- @field right number
+--- @field top number
+--- @field bottom number
+local element = setmetatable({}, SingleChildElement)
+element.__index = element
+element.type = "Padding"
+element.left = 0
+element.right = 0
+element.top = 0
+element.bottom = 0
+
+--- "When passing layout constraints to its child, padding shrinks the constraints by the given padding, causing the child to layout at a smaller size.
+--- Padding then sizes itself to its child's size, inflated by the padding, effectively creating empty space around the child."
+---
+--- as in https://api.flutter.dev/flutter/widgets/Padding-class.html
+function element:layout()
+    if not self._child_ then return end
+    local c = Constraints(self._constraints_)
+    c.maxWidth = c.maxWidth - self.left - self.right
+    c.maxHeight = c.maxHeight - self.top - self.bottom
+    c.maxWidth = c.maxWidth > 0 and c.maxWidth or 0
+    c.maxHeight = c.maxHeight > 0 and c.maxHeight or 0
+    self._child_._constraints_ = c
+
+    self._child_:layout()
+    self._size_ = Vec3 { self._child_._size_.x + self.left + self.right, self._child_._size_.y + self.top + self.bottom }
+    self._child_._offset_ = Vec3 { self.left, self.top }
+end
+
+--- @return Padding
+--- @param values {left: number?, top: number?, right: number?, bottom: number?, child: UIElement?}
+function element:new(values)
+    return SingleChildElement.new(self, values)
+end
+
+return element

lib/simple_ui/elements/placeholder.lua

@@ -0,0 +1,32 @@
+local Constraints = require "lib.simple_ui.core.constraints"
+local SingleChildElement = require "lib.simple_ui.core.single_child_element"
+
+--- @class Placeholder : SingleChildElement
+local element = setmetatable({}, SingleChildElement)
+element.__index = element
+element.type = "Placeholder"
+
+function element:layout()
+    self._size_ = Vec3 { self._constraints_.maxWidth, self._constraints_.maxHeight }
+
+    if not self._child_ then return end
+    self._child_._constraints_ = Constraints(self._constraints_)
+    self._child_:layout()
+end
+
+function element:draw()
+    love.graphics.setLineStyle("rough")
+    love.graphics.rectangle("line", 0, 0, self._size_.x, self._size_.y)
+
+    love.graphics.line(0, 0, self._size_.x, self._size_.y)
+    love.graphics.line(0, self._size_.y, self._size_.x, 0)
+    love.graphics.setLineStyle("smooth")
+end
+
+--- @return Placeholder
+--- @param values {child: UIElement?}
+function element:new(values)
+    return SingleChildElement.new(self, values)
+end
+
+return element

lib/simple_ui/elements/scale.lua

@@ -0,0 +1,26 @@
+local SingleChildElement = require "lib.simple_ui.core.single_child_element"
+
+--- @class Scale : SingleChildElement
+--- @field sx number
+--- @field sy number
+local element = setmetatable({}, SingleChildElement)
+element.__index = element
+element.type = "Scale"
+
+function element:draw()
+    love.graphics.push("transform")
+    love.graphics.translate(self._offset_.x, self._offset_.y)
+    love.graphics.scale(self.sx, self.sy)
+    if self._child_ then self._child_:draw() end
+    love.graphics.pop()
+end
+
+--- @return Scale
+--- @param values {sx: number?, sy: number?, child: UIElement?}
+function element:new(values)
+    values.sx = values.sx or 1
+    values.sy = values.sy or 1
+    return SingleChildElement.new(self, values)
+end
+
+return element

lib/simple_ui/elements/screen_area.lua

@@ -0,0 +1,69 @@
+local Constraints = require "lib.simple_ui.core.constraints"
+local Rect = require "lib.simple_ui.core.rect"
+local StatefulElement = require "lib.simple_ui.core.stateful_element"
+
+
+--- @class ScreenArea : StatefulElement
+--- @field dimensions Rect
+--- @field filter "nearest" | "linear"
+local element = setmetatable({}, StatefulElement)
+element.__index = element
+element.type = "ScreenArea"
+
+function element:build()
+    local cw, ch = self.state.canvas:getDimensions()
+    if cw ~= self.dimensions.width or ch ~= self.dimensions.height then
+        self.state.canvas = self:initState().canvas -- в реальном мире оно не будет пересоздаваться каждый кадр
+    end
+    return self.child
+end
+
+function element:layout()
+    local screenW, screenH = self.state.canvas:getDimensions()
+
+    self._constraints_ = Constraints {
+        maxWidth = screenW,
+        maxHeight = screenH
+    }
+    self._size_ = Vec3 { screenW, screenH }
+
+    if not self._child_ then return end
+    self._child_._constraints_ = Constraints(self._constraints_)
+    self._child_:layout()
+    self._child_._offset_ = Vec3 {}
+end
+
+function element:draw()
+    local oldCanvas = love.graphics.getCanvas()
+
+    love.graphics.push()
+    love.graphics.origin()
+    love.graphics.setCanvas(self.state.canvas)
+    love.graphics.clear()
+    if self._child_ then self._child_:draw() end
+    love.graphics.pop()
+
+    love.graphics.setCanvas(oldCanvas)
+    love.graphics.push("transform")
+    love.graphics.translate(self._offset_.x, self._offset_.y)
+    love.graphics.draw(self.state.canvas)
+    love.graphics.pop()
+end
+
+function element:initState()
+    local canvas = love.graphics.newCanvas(self.dimensions.width, self.dimensions.height)
+    canvas:setFilter(self.filter, self.filter)
+    return {
+        canvas = canvas
+    }
+end
+
+--- @return ScreenArea
+--- @param values {key: any, dimensions: Rect?, filter: "nearest" | "linear" | nil,  child: UIElement?}
+function element:new(values)
+    if not values.dimensions then values.dimensions = Rect { width = love.graphics.getWidth(), height = love.graphics.getHeight() } end
+    if not values.filter then values.filter = "linear" end
+    return StatefulElement.new(self, values)
+end
+
+return element

lib/simple_ui/elements/sized_box.lua

@@ -0,0 +1,29 @@
+local SingleChildElement = require "lib.simple_ui.core.single_child_element"
+
+--- @class SizedBox : SingleChildElement
+local element = setmetatable({}, require "lib.simple_ui.core.single_child_element")
+local Constraints = require("lib.simple_ui.core.constraints")
+element.type = "SizedBox"
+element.__index = element
+element.width = 0
+element.height = 0
+
+function element:layout()
+    self._size_ = Vec3 { self.width, self.height }
+
+    if not self._child_ then return end
+    self._child_._constraints_ = Constraints {
+        maxWidth = self.width,
+        maxHeight = self.height,
+    }
+    self._child_:layout()
+    self._child_._offset_ = Vec3 {}
+end
+
+--- @return SizedBox
+--- @param values {width: number?, height: number?, child: UIElement?}
+function element:new(values)
+    return SingleChildElement.new(self, values)
+end
+
+return element

lib/simple_ui/level/bar.lua

@@ -1,71 +0,0 @@
-local Element = require "lib.simple_ui.element"
-
-
---- @class BarElement : UIElement
---- @field getter fun() : number
---- @field value number
---- @field maxValue number
---- @field color Color
---- @field useDividers boolean
---- @field drawText boolean
-local barElement = setmetatable({}, Element)
-barElement.__index = barElement
-barElement.useDividers = false
-barElement.drawText = false
-
-function barElement:update(dt)
-    local val = self.getter()
-    self.value = val < 0 and 0 or val > self.maxValue and self.maxValue or val
-end
-
-function barElement:draw()
-    local valueWidth = self.bounds.width * self.value / self.maxValue
-    local emptyWidth = self.bounds.width - valueWidth
-
-    --- шум
-    love.graphics.setShader(Tree.assets.files.shaders.soft_uniform_noise)
-    love.graphics.rectangle("fill", self.bounds.x, self.bounds.y, self.bounds.width, self.bounds.height)
-    love.graphics.setShader()
-
-    --- закраска пустой части
-    love.graphics.setColor(0.05, 0.05, 0.05)
-    love.graphics.setBlendMode("multiply", "premultiplied")
-    love.graphics.rectangle("fill", self.bounds.x + valueWidth, self.bounds.y, emptyWidth,
-        self.bounds.height)
-    love.graphics.setBlendMode("alpha")
-
-    --- закраска значимой части её цветом
-    love.graphics.setColor(self.color.r, self.color.g, self.color.b)
-    love.graphics.setBlendMode("multiply", "premultiplied")
-    love.graphics.rectangle("fill", self.bounds.x, self.bounds.y, valueWidth,
-        self.bounds.height)
-    love.graphics.setBlendMode("alpha")
-
-    --- мерки
-    love.graphics.setColor(38 / 255, 50 / 255, 56 / 255)
-    if self.useDividers then
-        local count = self.maxValue - 1
-        local measureWidth = self.bounds.width / self.maxValue
-
-        for i = 1, count, 1 do
-            love.graphics.line(self.bounds.x + i * measureWidth, self.bounds.y, self.bounds.x + i * measureWidth,
-                self.bounds.y + self.bounds.height)
-        end
-    end
-
-
-    love.graphics.setColor(1, 1, 1)
-    --- текст поверх
-    if self.drawText then
-        local font = Tree.fonts:getDefaultTheme():getVariant("small")
-        local t = love.graphics.newText(font, tostring(self.value) .. "/" .. tostring(self.maxValue))
-        love.graphics.draw(t, math.floor(self.bounds.x + self.bounds.width / 2 - t:getWidth() / 2),
-            math.floor(self.bounds.y + self.bounds.height / 2 - t:getHeight() / 2))
-    end
-
-    self:drawBorder("inner")
-
-    self:drawGradientOverlay()
-end
-
-return function(values) return barElement:new(values) end

lib/simple_ui/level/bottom_bars.lua

@@ -1,86 +0,0 @@
-local Element = require "lib.simple_ui.element"
-local Rect = require "lib.simple_ui.rect"
-local Color = require "lib.simple_ui.color"
-local Bar = require "lib.simple_ui.level.bar"
-
---- @class BottomBars : UIElement
---- @field hpBar BarElement
---- @field manaBar BarElement
-local bottomBars = setmetatable({}, Element)
-bottomBars.__index = bottomBars;
-
---- @param cid Id
-function bottomBars.new(cid)
-    local t = setmetatable({}, bottomBars)
-
-    t.hpBar =
-        Bar {
-            getter = function()
-                local char = Tree.level.characters[cid]
-                return char:try(Tree.behaviors.stats, function(stats)
-                    return stats.hp or 0
-                end)
-            end,
-            color = Color { r = 130 / 255, g = 8 / 255, b = 8 / 255 },
-            drawText = true,
-            maxValue = 20
-        }
-
-    t.manaBar =
-        Bar {
-            getter = function()
-                local char = Tree.level.characters[cid]
-                return char:try(Tree.behaviors.stats, function(stats)
-                    return stats.mana or 0
-                end)
-            end,
-            color = Color { r = 51 / 255, g = 105 / 255, b = 30 / 255 },
-            useDividers = true,
-            maxValue = 10
-        }
-
-
-    return t
-end
-
-function bottomBars:update(dt)
-    local height = 16
-    local margin = 2
-
-    self.bounds.height = height
-    self.bounds.y = self.bounds.y - height
-
-    self.hpBar.bounds = Rect {
-        width = -2 * margin + self.bounds.width / 2,
-        height = height - margin,
-        x = self.bounds.x + margin,
-        y = self.bounds.y + margin
-    }
-
-    self.manaBar.bounds = Rect {
-        width = -2 * margin + self.bounds.width / 2,
-        height = height - margin,
-        x = self.bounds.x + margin + self.bounds.width / 2,
-        y = self.bounds.y + margin
-    }
-
-    self.hpBar:update(dt)
-    self.manaBar:update(dt)
-end
-
-function bottomBars:draw()
-    -- шум
-    love.graphics.setShader(Tree.assets.files.shaders.soft_uniform_noise)
-    love.graphics.rectangle("fill", self.bounds.x, self.bounds.y, self.bounds.width, self.bounds.height)
-    love.graphics.setShader()
-
-    love.graphics.setColor(38 / 255, 50 / 255, 56 / 255)
-    love.graphics.setBlendMode("multiply", "premultiplied")
-    love.graphics.rectangle("fill", self.bounds.x, self.bounds.y, self.bounds.width, self.bounds.height)
-    love.graphics.setBlendMode("alpha")
-
-    self.hpBar:draw()
-    self.manaBar:draw()
-end
-
-return bottomBars.new

lib/simple_ui/level/cpanel.lua

@@ -1,108 +0,0 @@
-local task = require "lib.utils.task"
-local easing = require "lib.utils.easing"
-local Element = require "lib.simple_ui.element"
-local Rect = require "lib.simple_ui.rect"
-local SkillRow = require "lib.simple_ui.level.skill_row"
-local Bars = require "lib.simple_ui.level.bottom_bars"
-local EndTurnButton = require "lib.simple_ui.level.end_turn"
-
---- @class CharacterPanel : UIElement
---- @field animationTask Task
---- @field alpha number
---- @field state "show" | "idle" | "hide"
---- @field skillRow SkillRow
---- @field bars BottomBars
---- @field endTurnButton EndTurnButton
-local characterPanel = setmetatable({}, Element)
-characterPanel.__index = characterPanel
-
-function characterPanel.new(characterId)
-    local t = {}
-    t.state = "show"
-    t.skillRow = SkillRow(characterId)
-    t.bars = Bars(characterId)
-    t.endTurnButton = EndTurnButton {}
-    t.alpha = 0 -- starts hidden/animating
-    return setmetatable(t, characterPanel)
-end
-
-function characterPanel:show()
-    self.state = "show"
-    self.animationTask = task.tween(self, { alpha = 1 }, 300, easing.easeOutCubic)
-    self.animationTask(function() self.state = "idle" end)
-end
-
-function characterPanel:hide()
-    self.state = "hide"
-    self.animationTask = task.tween(self, { alpha = 0 }, 300, easing.easeOutCubic)
-end
-
---- @type love.Canvas
-local characterPanelCanvas;
-
-function characterPanel:update(dt)
-    -- Tasks update automatically via task.update(dt) in main.lua
-    self.skillRow:update(dt)
-    self.bars.bounds = Rect {
-        width = self.skillRow.bounds.width,
-        x = self.skillRow.bounds.x,
-        y = self.skillRow.bounds.y
-    }
-    self.bars:update(dt)
-
-    self.bounds = Rect {
-        x = self.bars.bounds.x,
-        y = self.bars.bounds.y,
-        width = self.bars.bounds.width,
-        height = self.bars.bounds.height + self.skillRow.bounds.height
-    }
-
-    self.endTurnButton:layout()
-    self.endTurnButton.bounds.x = self.bounds.x + self.bounds.width + 32
-    self.endTurnButton.bounds.y = self.bounds.y + self.bounds.height / 2 - self.endTurnButton.bounds.height / 2
-
-    self.endTurnButton:update(dt)
-
-    if not characterPanelCanvas then
-        characterPanelCanvas = love.graphics.newCanvas(self.bounds.width, self.bounds.height)
-    end
-
-    --- анимация появления
-    local revealShader = Tree.assets.files.shaders.reveal
-    revealShader:send("t", self.alpha)
-end
-
-function characterPanel:draw()
-    self.skillRow:draw()
-
-    --- @TODO: переписать этот ужас с жонглированием координатами, а то слишком хардкод (skillRow рисуется относительно нуля и не закрывает канвас)
-    love.graphics.push()
-    local canvas = love.graphics.getCanvas()
-    love.graphics.translate(0, self.bars.bounds.height)
-    love.graphics.setCanvas(characterPanelCanvas)
-    love.graphics.clear()
-    love.graphics.draw(canvas)
-    love.graphics.pop()
-
-    love.graphics.push()
-    love.graphics.translate(-self.bounds.x, -self.bounds.y)
-    self.bars:draw()
-    self:drawBorder("outer")
-    love.graphics.pop()
-
-    --- рисуем текстуру шейдером появления
-    love.graphics.setCanvas()
-    love.graphics.setShader(Tree.assets.files.shaders.reveal)
-    love.graphics.setColor(1, 1, 1, 1)
-
-    self.endTurnButton:draw()
-
-    love.graphics.push()
-    love.graphics.translate(self.bounds.x, self.bounds.y)
-    love.graphics.draw(characterPanelCanvas)
-    love.graphics.setColor(1, 1, 1)
-    love.graphics.pop()
-    love.graphics.setShader()
-end
-
-return characterPanel.new

lib/simple_ui/level/end_turn.lua

@@ -1,53 +0,0 @@
-local Element = require "lib.simple_ui.element"
-local task = require "lib.utils.task"
-local easing = require "lib.utils.easing"
-
---- @class EndTurnButton : UIElement
---- @field hovered boolean
---- @field onClick function?
-local endTurnButton = setmetatable({}, Element)
-endTurnButton.__index = endTurnButton
-
-function endTurnButton:update(dt)
-    local mx, my = love.mouse.getPosition()
-    if self:hitTest(mx, my) then
-        self.hovered = true
-        if Tree.controls:isJustPressed("select") then
-            if self.onClick then self.onClick() end
-            Tree.controls:consume("select")
-        end
-    else
-        self.hovered = false
-    end
-end
-
-function endTurnButton:layout()
-    local font = Tree.fonts:getDefaultTheme():getVariant("large")
-    self.text = love.graphics.newText(font, "Завершить ход")
-    self.bounds.width = self.text:getWidth() + 32
-    self.bounds.height = self.text:getHeight() + 16
-end
-
-function endTurnButton:draw()
-    love.graphics.setColor(38 / 255, 50 / 255, 56 / 255, 0.9)
-    love.graphics.rectangle("fill", self.bounds.x, self.bounds.y, self.bounds.width, self.bounds.height)
-
-    if self.hovered then
-        love.graphics.setColor(0.1, 0.1, 0.1)
-        love.graphics.rectangle("fill", self.bounds.x, self.bounds.y, self.bounds.width, self.bounds.height)
-    end
-
-    love.graphics.setColor(0.95, 0.95, 0.95)
-    love.graphics.draw(self.text, self.bounds.x + 16, self.bounds.y + 8)
-
-    self:drawBorder("outer")
-    love.graphics.setColor(1, 1, 1)
-end
-
-function endTurnButton:onClick()
-    Tree.level.turnOrder:next()
-end
-
-return function(values)
-    return endTurnButton:new(values)
-end

lib/simple_ui/level/layout.lua

@@ -1,23 +0,0 @@
-local CPanel = require "lib.simple_ui.level.cpanel"
-
-local build
-
-local layout = {}
-function layout:update(dt)
-    if self.characterPanel then self.characterPanel:update(dt) end
-
-    local cid = Tree.level.selector:selected()
-    if cid then
-        self.characterPanel = CPanel(cid)
-        self.characterPanel:show()
-        self.characterPanel:update(dt)
-    elseif Tree.level.selector:deselected() then
-        self.characterPanel:hide()
-    end
-end
-
-function layout:draw()
-    if self.characterPanel then self.characterPanel:draw() end
-end
-
-return layout

lib/simple_ui/level/scale.lua

@@ -1,2 +0,0 @@
-local UI_SCALE = 0.75 -- выдуманное значение для dependency injection, надо подбирать так, чтобы UI_SCALE * 64 было целым числом
-return UI_SCALE

lib/simple_ui/level/skill_row.lua

@@ -1,213 +0,0 @@
-local icons = require("lib.utils.sprite_atlas").load(Tree.assets.files.dev_icons)
-local Element = require "lib.simple_ui.element"
-local Rect = require "lib.simple_ui.rect"
-
-local UI_SCALE = require "lib.simple_ui.level.scale"
-
---- @class SkillButton : UIElement
---- @field hovered boolean
---- @field selected boolean
---- @field onClick function?
---- @field getCooldown function?
---- @field icon? string
-local skillButton = setmetatable({}, Element)
-skillButton.__index = skillButton
-
-function skillButton:update(dt)
-    if not self.icon then return end
-    local mx, my = love.mouse.getPosition()
-    if self:hitTest(mx, my) then
-        self.hovered = true
-        if Tree.controls:isJustPressed("select") then
-            local cd = self.getCooldown and self.getCooldown() or 0
-            if cd == 0 then
-                if self.onClick then self.onClick() end
-            end
-
-            Tree.controls:consume("select")
-        end
-    else
-        self.hovered = false
-    end
-end
-
-function skillButton:draw()
-    love.graphics.setLineWidth(2)
-
-    local cd = self.getCooldown and self.getCooldown() or 0
-
-    if not self.icon then
-        love.graphics.setColor(0.05, 0.05, 0.05)
-        love.graphics.rectangle("fill", self.bounds.x, self.bounds.y, self.bounds.width, self.bounds.height)
-        self:drawBorder("inner")
-        return
-    end
-
-    local quad = icons:pickQuad(self.icon)
-    love.graphics.push()
-    love.graphics.translate(self.bounds.x, self.bounds.y)
-    love.graphics.scale(self.bounds.width / icons.tileSize, self.bounds.height / icons.tileSize)
-    love.graphics.draw(icons.atlas, quad)
-    love.graphics.pop()
-
-    self:drawBorder("inner")
-
-    if self.selected then
-        love.graphics.setColor(0.3, 1, 0.3, 0.5)
-        love.graphics.rectangle("fill", self.bounds.x, self.bounds.y, self.bounds.width, self.bounds.height)
-    elseif self.hovered then
-        love.graphics.setColor(0.7, 1, 0.7, 0.5)
-        love.graphics.rectangle("fill", self.bounds.x, self.bounds.y, self.bounds.width, self.bounds.height)
-    end
-
-
-    if cd > 0 then
-        love.graphics.setColor(0, 0, 0, 0.5)
-        love.graphics.rectangle("fill", self.bounds.x, self.bounds.y, self.bounds.width, self.bounds.height)
-
-        local font = Tree.fonts:getDefaultTheme():getVariant("headline")
-        love.graphics.setColor(0, 0, 0)
-        local t = love.graphics.newText(font, tostring(cd))
-        love.graphics.draw(t, math.floor(self.bounds.x + 2 + self.bounds.width / 2 - t:getWidth() / 2),
-            math.floor(self.bounds.y + 2 + self.bounds.height / 2 - t:getHeight() / 2))
-
-        love.graphics.setColor(1, 1, 1)
-        love.graphics.draw(t, math.floor(self.bounds.x + self.bounds.width / 2 - t:getWidth() / 2),
-            math.floor(self.bounds.y + self.bounds.height / 2 - t:getHeight() / 2))
-    else
-
-    end
-
-    love.graphics.setColor(1, 1, 1)
-end
-
---------------------------------------------------------------------------------
-
---- @class SkillRow : UIElement
---- @field characterId Id
---- @field selected SkillButton?
---- @field children SkillButton[]
-local skillRow = setmetatable({}, Element)
-skillRow.__index = skillRow
-
---- @param characterId Id
---- @return SkillRow
-function skillRow.new(characterId)
-    local t = {
-        characterId = characterId,
-        children = {}
-    }
-
-    setmetatable(t, skillRow)
-
-    local char = Tree.level.characters[characterId]
-    char:try(Tree.behaviors.spellcaster, function(behavior)
-        for i, spell in ipairs(behavior.spellbook) do
-            local skb = skillButton:new { icon = spell.tag }
-            skb.onClick = function()
-                skb.selected = not skb.selected
-                if t.selected then t.selected.selected = false end
-                t.selected = skb
-
-                if not behavior.cast then
-                    behavior.cast = behavior.spellbook[i]
-                    behavior.state = "casting"
-                    behavior.spellbook[i]:onSelected(char)
-                else
-                    behavior.state = "idle"
-                    behavior.cast = nil
-                end
-            end
-            skb.getCooldown = function()
-                return behavior.cooldowns[spell.tag] or 0
-            end
-            t.children[i] = skb
-        end
-    end)
-
-    for i = #t.children + 1, 7, 1 do
-        t.children[i] = skillButton:new {}
-    end
-
-    return t
-end
-
---- @type love.Canvas
-local c;
-
-function skillRow:update(dt)
-    local iconSize = math.floor(64 * UI_SCALE)
-    local screenW, screenH = love.graphics.getDimensions()
-    local padding, margin = 8, 4
-    local count = #self.children -- слоты под скиллы
-
-    self.bounds = Rect {
-        width = iconSize * count + (count + 1) * margin,
-        height = iconSize + 2 * margin,
-    }
-    self.bounds.y = screenH - self.bounds.height - padding -- отступ снизу
-    self.bounds.x = screenW / 2 - self.bounds.width / 2
-
-    for i, skb in ipairs(self.children) do
-        skb.bounds = Rect { x = self.bounds.x + margin + (i - 1) * (iconSize + margin), -- друг за другом, включая первый отступ от границы
-            y = self.bounds.y + margin, height = iconSize, width = iconSize }
-        skb:update(dt)
-    end
-
-    if not c then
-        c = love.graphics.newCanvas(self.bounds.width, self.bounds.height)
-    end
-end
-
-function skillRow:draw()
-    love.graphics.setCanvas({ c, stencil = true })
-    love.graphics.clear()
-    love.graphics.setColor(1, 1, 1)
-
-    do
-        --- рисуем в локальных координатах текстурки
-        love.graphics.push()
-        love.graphics.translate(-self.bounds.x, -self.bounds.y)
-
-        -- сначала иконки скиллов
-        for _, skb in ipairs(self.children) do
-            skb:draw()
-        end
-
-        -- маска для вырезов под иконки
-        love.graphics.setShader(Tree.assets.files.shaders.alpha_mask)
-        love.graphics.stencil(function()
-            local mask = Tree.assets.files.masks.rrect32
-            local maskSize = mask:getWidth()
-            for _, skb in ipairs(self.children) do
-                love.graphics.draw(mask, skb.bounds.x, skb.bounds.y, 0,
-                    skb.bounds.width / maskSize, skb.bounds.height / maskSize)
-            end
-        end, "replace", 1)
-        love.graphics.setShader()
-
-
-        -- дальше рисуем панель, перекрывая иконки
-        love.graphics.setStencilTest("less", 1)
-        -- шум
-        love.graphics.setShader(Tree.assets.files.shaders.soft_uniform_noise)
-        love.graphics.rectangle("fill", self.bounds.x, self.bounds.y, self.bounds.width, self.bounds.height)
-        love.graphics.setShader()
-
-        -- фон
-        love.graphics.setColor(38 / 255, 50 / 255, 56 / 255)
-        love.graphics.setBlendMode("multiply", "premultiplied")
-        love.graphics.rectangle("fill", self.bounds.x, self.bounds.y, self.bounds.width, self.bounds.height)
-        love.graphics.setBlendMode("alpha")
-
-        love.graphics.setStencilTest()
-
-        --затенение
-        self:drawGradientOverlay()
-        love.graphics.pop()
-    end
-
-    love.graphics.setColor(1, 1, 1)
-end
-
-return skillRow.new

lib/simple_ui/level/test.lua

@@ -0,0 +1,114 @@
+local Rect = require "lib.simple_ui.core.rect"
+local ScreenArea = require "lib.simple_ui.elements.screen_area"
+local Placeholder = require "lib.simple_ui.elements.placeholder"
+local Padding = require "lib.simple_ui.elements.padding"
+local Builder = require "lib.simple_ui.core.builder"
+local Flex = require "lib.simple_ui.elements.flex"
+local Scale = require "lib.simple_ui.elements.scale"
+local SizedBox = require "lib.simple_ui.elements.sized_box"
+local StatefulElement = require "lib.simple_ui.core.stateful_element"
+
+
+local MyWidget = setmetatable({}, StatefulElement)
+MyWidget.__index = MyWidget
+MyWidget.type = "MyWidget"
+
+local Canary = setmetatable({}, StatefulElement)
+Canary.__index = Canary
+Canary.type = "Canary"
+
+function Canary:initState()
+    return { i = self.key == "canary1" and 0 or 100 }
+end
+
+function Canary:build()
+    self.state.i = self.state.i and self.state.i + 1 or 0
+
+    return Placeholder:new {}
+end
+
+--- comment
+--- @return Flex
+function MyWidget:build()
+    return Flex:new {
+        key = "test",
+        direction = "vertical",
+        mainAxisSize = "max",
+        children = {
+            Padding:new {
+                top = 8,
+                child = Flex:new {
+                    mainAxisAlignment = "start",
+                    mainAxisSize = "min",
+                    children = {
+                        SizedBox:new {
+                            width = 100,
+                            height = 100,
+                            child = Placeholder:new {}
+                        },
+                        SizedBox:new {
+                            width = 150,
+                            height = 200,
+                            child = Placeholder:new {}
+                        },
+                        SizedBox:new {
+                            width = 100,
+                            height = 100,
+                            child = Canary:new {
+                                key = "canary1",
+                            }
+                        },
+                        SizedBox:new {
+                            width = 100,
+                            height = 100,
+                            child = Canary:new {
+                                key = "canary2",
+                            }
+                        },
+                    },
+                }
+            },
+            Flex:new {
+                key = "inner_flex2",
+
+                mainAxisAlignment = "end",
+                children = {
+                    SizedBox:new {
+                        width = 100,
+                        height = 100,
+                        child = Placeholder:new {}
+                    },
+                    SizedBox:new {
+                        width = 100,
+                        height = 100,
+                        child = Placeholder:new {}
+                    },
+                    SizedBox:new {
+                        width = 100,
+                        height = 100,
+                        child = Placeholder:new {},
+                    },
+                },
+            },
+        }
+    }
+end
+
+return Builder {
+    -- debugDraw = true,
+    builder = function()
+        return Scale:new {
+            sx = 2,
+            sy = 2,
+            child = ScreenArea:new {
+                key = "screen",
+                dimensions = Rect {
+                    width = love.graphics.getWidth() / 2,
+                    height = love.graphics.getHeight() / 2
+                },
+                filter = "nearest",
+                child = MyWidget:new {}
+            }
+        }
+    end
+}

main.lua

@@ -1,3 +1,4 @@
+--- @diagnostic disable: duplicate-set-field
 -- CameraLoader = require 'lib/camera'
 
 local character = require "lib/character/character"
@@ -11,8 +12,10 @@ end
 
 function love.load()
     love.window.setMode(1280, 720, { resizable = true, msaa = 4, vsync = true })
+    love.graphics.setDefaultFilter("nearest")
+
     require "lib/tree" -- важно это сделать после настройки окна
-    testLayout = require "lib.simple_ui.level.layout"
+    testLayout = require "lib.simple_ui.level.test"
 
     local chars = {
         character.spawn("Foodor")
@@ -83,7 +86,11 @@ function love.update(dt)
     require('lib.utils.task').update(dt)
     Tree.controls:poll()
     Tree.level.camera:update(dt) -- сначала логика камеры, потому что на нее завязан UI
+
+    testLayout:build()
+    testLayout:layout()
     testLayout:update(dt) -- потом UI, потому что нужно перехватить жесты и не пустить их дальше
+
     Tree.panning:update(dt)
     Tree.level:update(dt)
     Tree.audio:update(dt)
@@ -135,8 +142,11 @@ function love.draw()
 end
 
 function love.resize(w, h)
+    --- SDL 2 bug when running on Wayland.
+    --- @see https://github.com/love2d/love/issues/2100
+    local actualW, actualH = love.graphics.getDimensions()
     local render = Tree.level.render
     if not render then return end
     render:free()
-    Tree.level.render = (require "lib.level.render").new { w = w, h = h }
+    Tree.level.render = (require "lib.level.render").new { w = actualW, h = actualH }
 end