diff --git a/druid/base/dynamic_grid.lua b/druid/base/dynamic_grid.lua index 422b48f..314dd51 100644 --- a/druid/base/dynamic_grid.lua +++ b/druid/base/dynamic_grid.lua @@ -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,19 +257,31 @@ 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) - 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 - local top = pos.y + size.y/2 - (size.y * pivot.y) + self.border_offset.y - local bottom = pos.y - size.y/2 - (size.y * pivot.y) + self.border_offset.y + for index, node in pairs(self.nodes) do + local pos = node.pos + local size = node.size + local pivot = node.pivot - border.x = math.min(border.x, left) - border.y = math.max(border.y, top) - border.z = math.max(border.z, right) - border.w = math.min(border.w, bottom) + 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 + local top = pos.y + size.y/2 - (size.y * pivot.y) + self.border_offset.y + local bottom = pos.y - size.y/2 - (size.y * pivot.y) + self.border_offset.y + + border.x = math.min(border.x, left) + 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 diff --git a/druid/base/static_grid.lua b/druid/base/static_grid.lua index c64fb66..095dc49 100644 --- a/druid/base/static_grid.lua +++ b/druid/base/static_grid.lua @@ -263,7 +263,6 @@ function StaticGrid:clear() end - --- Return the grid nodes table -- @function static_grid:get_nodes -- @treturn table The grid nodes diff --git a/example/gui/main/main.gui b/example/gui/main/main.gui index c019288..465c22d 100644 --- a/example/gui/main/main.gui +++ b/example/gui/main/main.gui @@ -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 diff --git a/example/page/grid_page.lua b/example/page/grid_page.lua index 216b7ed..76c0372 100644 --- a/example/page/grid_page.lua +++ b/example/page/grid_page.lua @@ -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 diff --git a/example/page/scroll_page.lua b/example/page/scroll_page.lua index 1478b11..522fe51 100644 --- a/example/page/scroll_page.lua +++ b/example/page/scroll_page.lua @@ -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)