mirror of
https://github.com/Insality/druid
synced 2025-06-27 18:37:45 +02:00
Add initial progress on dynamic grid
This commit is contained in:
Insality
parent
6ce14a7a1c
commit
f8731b2640
@ -34,6 +34,7 @@ local DynamicGrid = component.create("dynamic_grid", { const.ON_LAYOUT_CHANGE })
|
||||
-- @tparam node parent The gui node parent, where items will be placed
|
||||
function DynamicGrid:init(parent, side)
|
||||
self.parent = self:get_node(parent)
|
||||
|
||||
self.nodes = {}
|
||||
|
||||
self.offset = vmath.vector3(0)
|
||||
@ -50,24 +51,35 @@ function DynamicGrid:init(parent, side)
|
||||
self.on_clear = Event()
|
||||
self.on_update_positions = Event()
|
||||
|
||||
self.center_pos = vmath.vector3(0)
|
||||
|
||||
self._set_position_function = gui.set_position
|
||||
end
|
||||
|
||||
|
||||
local _temp_pos = vmath.vector3(0)
|
||||
--- Return pos for grid node index
|
||||
-- @function dynamic_grid:get_pos
|
||||
-- @tparam number index The grid element index
|
||||
-- @tparam node node The node to be placed
|
||||
-- @treturn vector3 Node position
|
||||
function DynamicGrid:get_pos(index)
|
||||
local row = math.ceil(index) - 1
|
||||
local col = (index - row) - 1
|
||||
function DynamicGrid:get_pos(index, node)
|
||||
local prev_node = self.nodes[index-1]
|
||||
local next_node = self.nodes[index+1]
|
||||
|
||||
_temp_pos.x = col * (self.node_size.x + self.offset.x) - self.border_offset.x
|
||||
_temp_pos.y = -row * (self.node_size.y + self.offset.y) - self.border_offset.y
|
||||
_temp_pos.z = 0
|
||||
if not prev_node and not next_node then
|
||||
-- TODO: assert no elements in grid now
|
||||
-- should be center of current scroll
|
||||
return self.center_pos -- first element in grid
|
||||
end
|
||||
|
||||
return _temp_pos
|
||||
-- For now it works only by vertical
|
||||
if prev_node then
|
||||
return self:_get_next_node_pos(index - 1, node, vmath.vector3(0, 1, 0))
|
||||
end
|
||||
|
||||
if next_node then
|
||||
return self:_get_next_node_pos(index + 1, node, vmath.vector3(0, -1, 0))
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
@ -125,17 +137,12 @@ function DynamicGrid:add(item, index)
|
||||
end
|
||||
end
|
||||
|
||||
self.nodes[index] = item
|
||||
self:_add_node(item, index)
|
||||
|
||||
gui.set_parent(item, self.parent)
|
||||
|
||||
local pos = self:get_pos(index)
|
||||
-- Add new item instantly in new pos
|
||||
gui.set_position(item, pos)
|
||||
|
||||
for i, _ in pairs(self.nodes) do
|
||||
self:_update_border_offset(self:get_pos(i))
|
||||
end
|
||||
self:_update_borders()
|
||||
-- for i, _ in pairs(self.nodes) do
|
||||
-- self:_update_border_offset(self:get_pos(i))
|
||||
-- end
|
||||
|
||||
self:_update_pos()
|
||||
self:_update_indexes()
|
||||
@ -160,12 +167,11 @@ function DynamicGrid:remove(index, is_shift_nodes)
|
||||
end
|
||||
end
|
||||
|
||||
-- Recalculate borders
|
||||
self.border = vmath.vector4(0)
|
||||
self:_update_border_offset(self:get_pos(1))
|
||||
for i, _ in pairs(self.nodes) do
|
||||
self:_update_border_offset(self:get_pos(i))
|
||||
end
|
||||
self:_update_borders()
|
||||
-- self:_update_border_offset(self:get_pos(1))
|
||||
-- for i, _ in pairs(self.nodes) do
|
||||
-- self:_update_border_offset(self:get_pos(i))
|
||||
-- end
|
||||
|
||||
self:_update_pos()
|
||||
self:_update_indexes()
|
||||
@ -187,18 +193,11 @@ function DynamicGrid:get_size(border)
|
||||
end
|
||||
|
||||
|
||||
--- Return grid size for amount of nodes in this grid
|
||||
-- @function dynamic_grid:get_size_for_elements_count
|
||||
-- @tparam number count The grid content node amount
|
||||
-- @treturn vector3 The grid content size
|
||||
function DynamicGrid:get_size_for_elements_count(count)
|
||||
local border = vmath.vector4(0)
|
||||
for i = 1, count do
|
||||
local pos = self:get_pos(i)
|
||||
self:_update_border(pos, border)
|
||||
end
|
||||
|
||||
return self:get_size(border)
|
||||
function DynamicGrid:get_center_position()
|
||||
return vmath.vector3(
|
||||
(self.border.x + self.border.z)/2,
|
||||
(self.border.y + self.border.w)/2,
|
||||
0)
|
||||
end
|
||||
|
||||
|
||||
@ -228,12 +227,8 @@ end
|
||||
-- If you want to delete GUI nodes, use dynamic_grid.nodes array before grid:clear
|
||||
-- @function dynamic_grid:clear
|
||||
function DynamicGrid:clear()
|
||||
self.border.x = 0
|
||||
self.border.y = 0
|
||||
self.border.w = 0
|
||||
self.border.z = 0
|
||||
|
||||
self:_update_border_offset(self:get_pos(1))
|
||||
self:_update_borders()
|
||||
-- self:_update_border_offset(self:get_pos(1))
|
||||
|
||||
self.nodes = {}
|
||||
self:_update_indexes()
|
||||
@ -262,9 +257,13 @@ function DynamicGrid:_update_indexes()
|
||||
end
|
||||
|
||||
|
||||
function DynamicGrid:_update_border(pos, border)
|
||||
local size = self.node_size
|
||||
local pivot = self.node_pivot
|
||||
function DynamicGrid:_update_borders()
|
||||
local border = vmath.vector4(math.huge, -math.huge, -math.huge, math.huge)
|
||||
|
||||
for index, node in pairs(self.nodes) do
|
||||
local pos = node.pos
|
||||
local size = node.size
|
||||
local pivot = node.pivot
|
||||
|
||||
local left = pos.x - size.x/2 - (size.x * pivot.x) + self.border_offset.x
|
||||
local right = pos.x + size.x/2 - (size.x * pivot.x) + self.border_offset.x
|
||||
@ -275,6 +274,14 @@ function DynamicGrid:_update_border(pos, border)
|
||||
border.y = math.max(border.y, top)
|
||||
border.z = math.max(border.z, right)
|
||||
border.w = math.min(border.w, bottom)
|
||||
end
|
||||
|
||||
self.border = border
|
||||
self.border_offset = vmath.vector3(
|
||||
(border.x + (border.z - border.x) * self.anchor.x),
|
||||
(border.y + (border.w - border.y) * self.anchor.y),
|
||||
0
|
||||
)
|
||||
end
|
||||
|
||||
|
||||
@ -291,11 +298,11 @@ end
|
||||
|
||||
|
||||
function DynamicGrid:_update_pos(is_instant)
|
||||
for i, node in pairs(self.nodes) do
|
||||
for index, node in pairs(self.nodes) do
|
||||
if is_instant then
|
||||
gui.set_position(node, self:get_pos(i))
|
||||
gui.set_position(node.node, node.pos)
|
||||
else
|
||||
self._set_position_function(node, self:get_pos(i))
|
||||
self._set_position_function(node.node, node.pos)
|
||||
end
|
||||
end
|
||||
|
||||
@ -303,4 +310,52 @@ function DynamicGrid:_update_pos(is_instant)
|
||||
end
|
||||
|
||||
|
||||
function DynamicGrid:_get_next_node_pos(origin_node_index, new_node, place_side)
|
||||
local node = self.nodes[origin_node_index]
|
||||
local pos = node.pos
|
||||
local size = node.size
|
||||
local anchor = node.pivot
|
||||
|
||||
local new_node_size = self:_get_node_size(new_node)
|
||||
local new_anchor = const.PIVOTS[gui.get_pivot(new_node)]
|
||||
|
||||
local dist = vmath.vector3(
|
||||
(size.x/2 + new_node_size.x/2) * place_side.x,
|
||||
(size.y/2 + new_node_size.y/2) * place_side.y,
|
||||
0
|
||||
)
|
||||
|
||||
local node_center = vmath.vector3(
|
||||
pos.x + size.x * anchor.x,
|
||||
pos.y - size.y * anchor.y,
|
||||
0
|
||||
)
|
||||
|
||||
return vmath.vector3(
|
||||
node_center.x + dist.x + new_node_size.x * new_anchor.x,
|
||||
node_center.y - dist.y + new_node_size.y * new_anchor.y,
|
||||
0
|
||||
)
|
||||
end
|
||||
|
||||
|
||||
function DynamicGrid:_get_node_size(node)
|
||||
return vmath.mul_per_elem(gui.get_size(node), gui.get_scale(node))
|
||||
end
|
||||
|
||||
|
||||
function DynamicGrid:_add_node(node, index)
|
||||
self.nodes[index] = {
|
||||
node = node,
|
||||
pos = self:get_pos(index, node),
|
||||
size = self:_get_node_size(node),
|
||||
pivot = const.PIVOTS[gui.get_pivot(node)]
|
||||
}
|
||||
|
||||
-- Add new item instantly in new pos
|
||||
gui.set_parent(node, self.parent)
|
||||
gui.set_position(node, self.nodes[index].pos)
|
||||
end
|
||||
|
||||
|
||||
return DynamicGrid
|
||||
|
||||
@ -263,7 +263,6 @@ function StaticGrid:clear()
|
||||
end
|
||||
|
||||
|
||||
|
||||
--- Return the grid nodes table
|
||||
-- @function static_grid:get_nodes
|
||||
-- @treturn table<index, node> The grid nodes
|
||||
|
||||
@ -9713,8 +9713,8 @@ nodes {
|
||||
w: 1.0
|
||||
}
|
||||
size {
|
||||
x: 1.0
|
||||
y: 1.0
|
||||
x: 600.0
|
||||
y: 900.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
@ -9746,12 +9746,67 @@ nodes {
|
||||
clipping_inverted: false
|
||||
alpha: 1.0
|
||||
template_node_child: false
|
||||
size_mode: SIZE_MODE_AUTO
|
||||
size_mode: SIZE_MODE_MANUAL
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: 0.0
|
||||
y: 200.0
|
||||
y: 450.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
rotation {
|
||||
x: 0.0
|
||||
y: 0.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
scale {
|
||||
x: 1.0
|
||||
y: 1.0
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
size {
|
||||
x: 600.0
|
||||
y: 1800.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
color {
|
||||
x: 1.0
|
||||
y: 1.0
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
blend_mode: BLEND_MODE_ALPHA
|
||||
texture: "kenney/empty"
|
||||
id: "grid_page_content"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_N
|
||||
adjust_mode: ADJUST_MODE_FIT
|
||||
parent: "grid_page"
|
||||
layer: ""
|
||||
inherit_alpha: true
|
||||
slice9 {
|
||||
x: 0.0
|
||||
y: 0.0
|
||||
z: 0.0
|
||||
w: 0.0
|
||||
}
|
||||
clipping_mode: CLIPPING_MODE_NONE
|
||||
clipping_visible: true
|
||||
clipping_inverted: false
|
||||
alpha: 1.0
|
||||
template_node_child: false
|
||||
size_mode: SIZE_MODE_MANUAL
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: 0.0
|
||||
y: -190.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
@ -9787,7 +9842,7 @@ nodes {
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_N
|
||||
adjust_mode: ADJUST_MODE_FIT
|
||||
parent: "grid_page"
|
||||
parent: "grid_page_content"
|
||||
layer: ""
|
||||
inherit_alpha: true
|
||||
slice9 {
|
||||
@ -9806,7 +9861,7 @@ nodes {
|
||||
nodes {
|
||||
position {
|
||||
x: -150.0
|
||||
y: 250.0
|
||||
y: -140.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
@ -9836,7 +9891,7 @@ nodes {
|
||||
}
|
||||
type: TYPE_TEMPLATE
|
||||
id: "button_add"
|
||||
parent: "grid_page"
|
||||
parent: "grid_page_content"
|
||||
layer: ""
|
||||
inherit_alpha: true
|
||||
alpha: 1.0
|
||||
@ -9965,7 +10020,7 @@ nodes {
|
||||
nodes {
|
||||
position {
|
||||
x: 0.0
|
||||
y: 250.0
|
||||
y: -140.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
@ -9995,7 +10050,7 @@ nodes {
|
||||
}
|
||||
type: TYPE_TEMPLATE
|
||||
id: "button_remove"
|
||||
parent: "grid_page"
|
||||
parent: "grid_page_content"
|
||||
layer: ""
|
||||
inherit_alpha: true
|
||||
alpha: 1.0
|
||||
@ -10124,7 +10179,7 @@ nodes {
|
||||
nodes {
|
||||
position {
|
||||
x: 150.0
|
||||
y: 250.0
|
||||
y: -140.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
@ -10154,7 +10209,7 @@ nodes {
|
||||
}
|
||||
type: TYPE_TEMPLATE
|
||||
id: "button_clear"
|
||||
parent: "grid_page"
|
||||
parent: "grid_page_content"
|
||||
layer: ""
|
||||
inherit_alpha: true
|
||||
alpha: 1.0
|
||||
@ -10283,7 +10338,7 @@ nodes {
|
||||
nodes {
|
||||
position {
|
||||
x: -160.0
|
||||
y: 160.0
|
||||
y: -230.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
@ -10319,7 +10374,7 @@ nodes {
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_CENTER
|
||||
adjust_mode: ADJUST_MODE_FIT
|
||||
parent: "grid_page"
|
||||
parent: "grid_page_content"
|
||||
layer: ""
|
||||
inherit_alpha: true
|
||||
slice9 {
|
||||
@ -10453,6 +10508,171 @@ nodes {
|
||||
text_leading: 1.0
|
||||
text_tracking: 0.0
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: 0.0
|
||||
y: -650.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
rotation {
|
||||
x: 0.0
|
||||
y: 0.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
scale {
|
||||
x: 1.0
|
||||
y: 1.0
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
size {
|
||||
x: 300.0
|
||||
y: 400.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
color {
|
||||
x: 0.9019608
|
||||
y: 0.9019608
|
||||
z: 0.7019608
|
||||
w: 1.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
blend_mode: BLEND_MODE_ALPHA
|
||||
texture: ""
|
||||
id: "grid_dynamic_nodes"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_N
|
||||
adjust_mode: ADJUST_MODE_FIT
|
||||
parent: "grid_page_content"
|
||||
layer: ""
|
||||
inherit_alpha: true
|
||||
slice9 {
|
||||
x: 0.0
|
||||
y: 0.0
|
||||
z: 0.0
|
||||
w: 0.0
|
||||
}
|
||||
clipping_mode: CLIPPING_MODE_NONE
|
||||
clipping_visible: true
|
||||
clipping_inverted: false
|
||||
alpha: 1.0
|
||||
template_node_child: false
|
||||
size_mode: SIZE_MODE_MANUAL
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: 0.0
|
||||
y: -700.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
rotation {
|
||||
x: 0.0
|
||||
y: 0.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
scale {
|
||||
x: 1.0
|
||||
y: 1.0
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
size {
|
||||
x: 250.0
|
||||
y: 60.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
color {
|
||||
x: 1.0
|
||||
y: 1.0
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
blend_mode: BLEND_MODE_ALPHA
|
||||
texture: "kenney/button_red"
|
||||
id: "grid_dynamic_prefab"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_CENTER
|
||||
adjust_mode: ADJUST_MODE_FIT
|
||||
parent: "grid_page_content"
|
||||
layer: ""
|
||||
inherit_alpha: true
|
||||
slice9 {
|
||||
x: 20.0
|
||||
y: 20.0
|
||||
z: 20.0
|
||||
w: 20.0
|
||||
}
|
||||
clipping_mode: CLIPPING_MODE_NONE
|
||||
clipping_visible: true
|
||||
clipping_inverted: false
|
||||
alpha: 1.0
|
||||
template_node_child: false
|
||||
size_mode: SIZE_MODE_MANUAL
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: 0.0
|
||||
y: -650.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
rotation {
|
||||
x: 0.0
|
||||
y: 0.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
scale {
|
||||
x: 1.0
|
||||
y: 1.0
|
||||
z: 1.0
|
||||
w: 1.0
|
||||
}
|
||||
size {
|
||||
x: 300.0
|
||||
y: 400.0
|
||||
z: 0.0
|
||||
w: 1.0
|
||||
}
|
||||
color {
|
||||
x: 0.5019608
|
||||
y: 0.3019608
|
||||
z: 0.5019608
|
||||
w: 1.0
|
||||
}
|
||||
type: TYPE_BOX
|
||||
blend_mode: BLEND_MODE_ALPHA
|
||||
texture: ""
|
||||
id: "grid_area"
|
||||
xanchor: XANCHOR_NONE
|
||||
yanchor: YANCHOR_NONE
|
||||
pivot: PIVOT_CENTER
|
||||
adjust_mode: ADJUST_MODE_FIT
|
||||
parent: "grid_page_content"
|
||||
layer: ""
|
||||
inherit_alpha: true
|
||||
slice9 {
|
||||
x: 0.0
|
||||
y: 0.0
|
||||
z: 0.0
|
||||
w: 0.0
|
||||
}
|
||||
clipping_mode: CLIPPING_MODE_NONE
|
||||
clipping_visible: true
|
||||
clipping_inverted: false
|
||||
alpha: 0.5
|
||||
template_node_child: false
|
||||
size_mode: SIZE_MODE_MANUAL
|
||||
}
|
||||
nodes {
|
||||
position {
|
||||
x: 0.0
|
||||
|
||||
@ -45,7 +45,7 @@ local function clear_nodes(self)
|
||||
end
|
||||
|
||||
|
||||
function M.setup_page(self)
|
||||
local function init_static_grid(self)
|
||||
self.grid_nodes = self.druid:new_static_grid("grid_nodes", "grid_nodes_prefab", 5)
|
||||
self.grid_nodes:set_position_function(function(node, pos)
|
||||
gui.animate(node, "position", pos, gui.EASING_OUTSINE, 0.2)
|
||||
@ -65,4 +65,37 @@ function M.setup_page(self)
|
||||
end
|
||||
|
||||
|
||||
local function add_node_dynamic(self, index)
|
||||
local node = gui.clone(self.prefab_dynamic)
|
||||
gui.set_enabled(node, true)
|
||||
gui.set_size(node, vmath.vector3(250, math.random(60, 150), 0))
|
||||
self.dynamic_grid:add(node)
|
||||
end
|
||||
|
||||
|
||||
local function init_dynamic_grid(self)
|
||||
self.dynamic_grid = self.druid:new_dynamic_grid("grid_dynamic_nodes", "vertical")
|
||||
|
||||
self.prefab_dynamic = gui.get_node("grid_dynamic_prefab")
|
||||
gui.set_enabled(self.prefab_dynamic, false)
|
||||
|
||||
for i = 1, 15 do
|
||||
add_node_dynamic(self, i)
|
||||
end
|
||||
|
||||
local area = gui.get_node("grid_area")
|
||||
gui.set_size(area, self.dynamic_grid:get_size())
|
||||
gui.set_position(area, self.dynamic_grid:get_center_position())
|
||||
print(self.dynamic_grid:get_center_position())
|
||||
end
|
||||
|
||||
|
||||
function M.setup_page(self)
|
||||
self.grid_page_scroll = self.druid:new_scroll("grid_page", "grid_page_content")
|
||||
|
||||
init_static_grid(self)
|
||||
init_dynamic_grid(self)
|
||||
end
|
||||
|
||||
|
||||
return M
|
||||
|
||||
@ -5,7 +5,7 @@ local function init_scroll_with_grid(self)
|
||||
local prefab = gui.get_node("grid_prefab")
|
||||
|
||||
local grid_scroll = self.druid:new_scroll("scroll_with_grid_size", "grid_content")
|
||||
local grid = self.druid:new_grid("grid_content", "grid_prefab", 20)
|
||||
local grid = self.druid:new_static_grid("grid_content", "grid_prefab", 20)
|
||||
|
||||
for i = 1, 40 do
|
||||
local clone_prefab = gui.clone_tree(prefab)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user