allow init/getState injection into StatefulElement

lib/simple_ui/core/builder.lua

@@ -2,34 +2,19 @@ local Element = require "lib.simple_ui.core.element"
 
 --- Объект, который отвечает за работу с элементами интерфейса одного экрана
 --- @class UIBuilder
---- @field private _cache UIElement[]
+--- @field builder fun(): UIElement
---- @field elementTree UIElement
+--- @field private states {string: table}
---- @field private shadowTree UIElement
+--- @field private elementTree UIElement
 local builder = {}
 builder.__index = builder
 
 --- @return UIBuilder
 local function new(from)
-    from._cache = {}
+    from.states = {}
-    from.shadowTree = Element:new {}
     setmetatable(from, builder)
     return from
 end
 
--- --- @param element? UIElement
--- --- @private
--- function builder:_get(element)
---     if not element then return nil end
---     local key = builder:_makeKey(element)
---     if not key then return element end
-
---     local cached = self._cache[key]
---     if cached then return cached end
-
---     self._cache[key] = element
---     return element
--- end
-
 --- @param newNode UIElement?
 --- @param oldNode UIElement?
 --- @private
@@ -44,29 +29,57 @@ end
 
 --- @param element UIElement
 --- @private
-function builder:_makeKey(element)
+function builder:makeKey(element)
-    --if not element.key then return nil end
+    if not element.key then return nil end
-    if type(element.key) == "string" then return element.key end
+    return element.type .. "<" .. tostring(element.key) .. ">"
-    element.key = element.type .. "<" .. tostring(element.key) .. ">"
-    return 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)
-    if cur.build then
+    -- Самоприсваивания должны вырезаться компилятором, я в это верю
-        local orphan = cur:build()
+    cur = cur --[[@as SingleChildElement | StatefulElement | MultiChildElement]]
-        local child = cur.child
-        child = orphan
-        if not child then return end
 
-        child._parent_ = cur
+    local key = self:makeKey(cur)
-        cur.child = child
+    if key then
+        cur = cur --[[@as StatefulElement]]
+        local storedState = self:getStateOf(cur)
+        if not storedState then
+            self.states[key] = self:initStateOf(cur)
+        else
+            cur.state = storedState
+        end
+    end
 
-        self:build_step(cur.child)
+    local buildRes = cur:build()
-    elseif cur.children then
+    if not buildRes then return end
-        for _, child in ipairs(cur.children) do
+
+    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
@@ -76,8 +89,8 @@ end
 ---
 --- Благодаря этому можно каждый раз создавать новые элементы в верстке, а получать старые :)
 function builder:build()
-    local root = self.elementTree
+    self.elementTree = self:builder()
-    self:build_step(root)
+    self:build_step(self.elementTree)
 end
 
 function builder:layout()

lib/simple_ui/core/element.lua

@@ -8,7 +8,6 @@ local Vec3 = require "lib.utils.vec3"
 --- @field _constraints_ Constraints
 --- @field _offset_ Vec3 Положение левого верхнего угла элемента в локальных координатах {x, y}. Устанавливается родительским элементом.
 --- @field _size_ Vec3 Размеры элемента {x, y}
---- @field build? fun(self, ctx: UIElement): UIElement
 local element = {}
 element.__index = element
 element.type = "Element"
@@ -25,12 +24,6 @@ function element:update(dt) end
 
 function element:draw() end
 
---- @param values {[string]: any}
---- @return UIElement
-function element:new(values)
-    return setmetatable(values, self)
-end
-
 --- Рекурсивно обходит дерево элементов вверх, начиная с первого родителя.
 ---
 --- К каждому посещенному элементу применяет функцию visitor.
@@ -43,4 +36,10 @@ function element:traverseUp(visitor)
     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

@@ -2,12 +2,18 @@ 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 = {}
+element._children_ = {}
+
+--- @return UIElement[]
+function element:build()
+    return self.children
+end
 
 function element:update(dt)
-    for _, child in ipairs(self.children) do
+    for _, child in ipairs(self._children_) do
         child:update(dt)
     end
 end
@@ -15,19 +21,19 @@ end
 function element:draw()
     love.graphics.push("transform")
     love.graphics.translate(self._offset_.x, self._offset_.y)
-    for _, child in ipairs(self.children) do
+    for _, child in ipairs(self._children_) do
         child:draw()
     end
 
 
     --- @TODO: сделать дебажный метод для отрисовки границ
     love.graphics.setColor(1, 0, 0)
-    love.graphics.line(0, 0, 0 + self._size_.x, 0)
+    love.graphics.line(0, 0, self._size_.x, 0)
-    love.graphics.line(0, 0, 0, self._offset_.y + 0)
+    love.graphics.line(0, 0, 0, self._size_.y)
-    love.graphics.line(0 + self._size_.x, self._offset_.y, 0 + self._size_.x,
+    love.graphics.line(self._size_.x, 0, self._size_.x,
-        0 + self._size_.y)
+        self._size_.y)
-    love.graphics.line(0, 0 + self._size_.y, 0 + self._size_.x,
+    love.graphics.line(0, self._size_.y, self._size_.x,
-        0 + self._size_.y)
+        self._size_.y)
     love.graphics.setColor(1, 1, 1)
 
     love.graphics.pop()

lib/simple_ui/core/single_child_element.lua

@@ -3,10 +3,11 @@ 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
@@ -15,20 +16,20 @@ function element:layout()
     --- передать ребенку ограничения
     --- получить назад размеры
     --- разместить ребенка
-    if not self.child then return end
+    if not self._child_ then return end
-    self.child._constraints_ = Constraints(self._constraints_)
+    self._child_._constraints_ = Constraints(self._constraints_)
-    self.child:layout()
+    self._child_:layout()
-    self.child._offset_ = Vec3 {}
+    self._child_._offset_ = Vec3 {}
 end
 
 function element:update(dt)
-    if self.child then self.child:update(dt) end
+    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
+    if self._child_ then self._child_:draw() end
     love.graphics.pop()
 end
 

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/elements/center.lua

@@ -9,13 +9,13 @@ element.type = "Center"
 function element:layout()
     self._size_ = Vec3 { self._constraints_.maxWidth, self._constraints_.maxHeight }
 
-    if not self.child then return end
+    if not self._child_ then return end
-    self.child._constraints_ = Constraints(self._constraints_)
+    self._child_._constraints_ = Constraints(self._constraints_)
-    self.child:layout()
+    self._child_:layout()
 
-    self.child._offset_ = Vec3 {
+    self._child_._offset_ = Vec3 {
-        (self._size_.x - self.child._size_.x) / 2,
+        (self._size_.x - self._child_._size_.x) / 2,
-        (self._size_.y - self.child._size_.y) / 2,
+        (self._size_.y - self._child_._size_.y) / 2,
     }
 end
 

lib/simple_ui/elements/flex.lua

@@ -16,7 +16,7 @@ function element:layout()
     local mainAxisSize = 0
     local crossAxisSize = 0
     if self.direction == "horizontal" then
-        for _, child in ipairs(self.children) do
+        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
@@ -30,8 +30,8 @@ function element:layout()
             start = self._constraints_.maxWidth - mainAxisSize
         end
         local shift = 0
-        for _, child in ipairs(self.children) do
+        for _, child in ipairs(self._children_) do
-            child._offset_ = Vec3 { self._offset_.x + start + shift, self._offset_.y }
+            child._offset_ = Vec3 { start + shift, 0 }
             shift = shift + child._size_.x
         end
 
@@ -41,7 +41,7 @@ function element:layout()
             self._size_ = Vec3 { mainAxisSize, crossAxisSize }
         end
     else
-        for _, child in ipairs(self.children) do
+        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
@@ -56,8 +56,8 @@ function element:layout()
             start = self._constraints_.maxHeight - mainAxisSize
         end
         local shift = 0
-        for _, child in ipairs(self.children) do
+        for _, child in ipairs(self._children_) do
-            child._offset_ = Vec3 { self._offset_.x, self._offset_.y + start + shift }
+            child._offset_ = Vec3 { 0, start + shift }
             shift = shift + child._size_.y
         end
 

lib/simple_ui/elements/padding.lua

@@ -19,17 +19,17 @@ element.bottom = 0
 ---
 --- as in https://api.flutter.dev/flutter/widgets/Padding-class.html
 function element:layout()
-    if not self.child then return end
+    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_._constraints_ = c
 
-    self.child:layout()
+    self._child_:layout()
-    self._size_ = Vec3 { self.child._size_.x + self.left + self.right, self.child._size_.y + self.top + self.bottom }
+    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 }
+    self._child_._offset_ = Vec3 { self.left, self.top }
 end
 
 --- @return Padding

lib/simple_ui/elements/placeholder.lua

@@ -9,17 +9,17 @@ element.type = "Placeholder"
 function element:layout()
     self._size_ = Vec3 { self._constraints_.maxWidth, self._constraints_.maxHeight }
 
-    if not self.child then return end
+    if not self._child_ then return end
-    self.child._constraints_ = Constraints(self._constraints_)
+    self._child_._constraints_ = Constraints(self._constraints_)
-    self.child:layout()
+    self._child_:layout()
 end
 
 function element:draw()
     love.graphics.rectangle("line", self._offset_.x, self._offset_.y, self._size_.x, self._size_.y)
     love.graphics.line(self._offset_.x, self._offset_.y, self._offset_.x + self._size_.x, self._offset_.y + self._size_
-    .y)
+        .y)
     love.graphics.line(self._offset_.x, self._offset_.y + self._size_.y, self._offset_.x + self._size_.x, self._offset_
-    .y)
+        .y)
 end
 
 --- @return Placeholder

lib/simple_ui/elements/screen_area.lua

@@ -14,10 +14,10 @@ function element:layout()
     }
     self._size_ = Vec3 { screenW, screenH }
 
-    if not self.child then return end
+    if not self._child_ then return end
-    self.child._constraints_ = Constraints(self._constraints_)
+    self._child_._constraints_ = Constraints(self._constraints_)
-    self.child:layout()
+    self._child_:layout()
-    self.child._offset_ = Vec3 {}
+    self._child_._offset_ = Vec3 {}
 end
 
 --- @return ScreenArea

lib/simple_ui/elements/sized_box.lua

@@ -11,13 +11,13 @@ element.height = 0
 function element:layout()
     self._size_ = Vec3 { self.width, self.height }
 
-    if not self.child then return end
+    if not self._child_ then return end
-    self.child._constraints_ = Constraints {
+    self._child_._constraints_ = Constraints {
         maxWidth = self.width,
         maxHeight = self.height,
     }
-    self.child:layout()
+    self._child_:layout()
-    self.child._offset_ = Vec3 {}
+    self._child_._offset_ = Vec3 {}
 end
 
 --- @return SizedBox

lib/simple_ui/level/test.lua

@@ -5,28 +5,24 @@ local Builder = require "lib.simple_ui.core.builder"
 local Flex = require "lib.simple_ui.elements.flex"
 local Center = require "lib.simple_ui.elements.center"
 local SizedBox = require "lib.simple_ui.elements.sized_box"
-local SingleChildElement = require "lib.simple_ui.core.single_child_element"
+local StatefulElement = require "lib.simple_ui.core.stateful_element"
 
 
-local MyWidget = setmetatable({}, SingleChildElement)
+local MyWidget = setmetatable({}, StatefulElement)
 MyWidget.__index = MyWidget
 MyWidget.type = "MyWidget"
 
-local Canary = setmetatable({}, SingleChildElement)
+local Canary = setmetatable({}, StatefulElement)
 Canary.__index = Canary
 Canary.type = "Canary"
 
-local reported = false
+function Canary:initState()
+    return { i = self.key == "canary1" and 0 or 100 }
+end
+
 function Canary:build()
-    -- self.i = self.i and self.i + 1 or 0
+    self.state.i = self.state.i and self.state.i + 1 or 0
-    -- print(self.i)
+    print(self.state.i)
-    -- if not reported then
-    --     self:traverseUp(function(element)
-    --         print(element.type)
-    --         return true
-    --     end)
-    --     reported = true
-    -- end
 
     return Placeholder:new {}
 end
@@ -35,7 +31,7 @@ end
 --- @return Flex
 function MyWidget:build()
     return Flex:new {
-        key = "my_flex",
+        key = "test",
         direction = "vertical",
         mainAxisSize = "max",
         children = {
@@ -56,11 +52,17 @@ function MyWidget:build()
                             child = Placeholder:new {}
                         },
                         SizedBox:new {
-                            key = "mybox",
                             width = 100,
                             height = 100,
                             child = Canary:new {
-                                i = 10
+                                key = "canary1",
+                            }
+                        },
+                        SizedBox:new {
+                            width = 100,
+                            height = 100,
+                            child = Canary:new {
+                                key = "canary2",
                             }
                         },
                     },
@@ -68,7 +70,8 @@ function MyWidget:build()
             },
             Flex:new {
                 key = "inner_flex2",
-                mainAxisAlignment = "center",
+
+                mainAxisAlignment = "end",
                 children = {
                     SizedBox:new {
                         width = 100,
@@ -81,6 +84,11 @@ function MyWidget:build()
                         height = 100,
                         child = Placeholder:new {}
                     },
+                    SizedBox:new {
+                        width = 100,
+                        height = 100,
+                        child = Placeholder:new {}
+                    },
                 },
 
             },
@@ -88,37 +96,10 @@ function MyWidget:build()
     }
 end
 
---
--- --- comment
--- --- @return Flex
--- function MyWidget:build()
---     return 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 {
---                     i = 10
---                 }
---             },
---         },
---     }
--- end
-
 return Builder {
-    elementTree = ScreenArea:new {
+    builder = function()
-        child = MyWidget:new {}
+        return ScreenArea:new {
-    }
+            child = MyWidget:new {}
+        }
+    end
 }