From 5db669218d881bafb770008b1d57e9452c07ac50 Mon Sep 17 00:00:00 2001 From: Insality Date: Sun, 27 Sep 2020 22:13:34 +0300 Subject: [PATCH] Add dynamic grid horizontal example. Add control buttons for gris --- example/gui/main/main.gui | 640 ++++++++++++++++++++++++++++++++++++- example/page/grid_page.lua | 58 +++- 2 files changed, 689 insertions(+), 9 deletions(-) diff --git a/example/gui/main/main.gui b/example/gui/main/main.gui index e16c890..0e7519a 100644 --- a/example/gui/main/main.gui +++ b/example/gui/main/main.gui @@ -10731,7 +10731,7 @@ nodes { nodes { position { x: -250.0 - y: -1236.0 + y: -1300.0 z: 0.0 w: 1.0 } @@ -10841,7 +10841,7 @@ nodes { nodes { position { x: 0.0 - y: -1232.0 + y: -1309.0 z: 0.0 w: 1.0 } @@ -10893,6 +10893,642 @@ nodes { template_node_child: false size_mode: SIZE_MODE_MANUAL } +nodes { + position { + x: -60.0 + y: -620.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.75 + y: 0.75 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button_add_start_dynamic" + parent: "grid_page_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button.gui" + template_node_child: false +} +nodes { + position { + x: 0.0 + y: 0.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: 130.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_blue" + id: "button_add_start_dynamic/button" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button_add_start_dynamic" + layer: "image" + inherit_alpha: true + slice9 { + x: 15.0 + y: 15.0 + z: 15.0 + w: 15.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL +} +nodes { + position { + x: 0.0 + y: 7.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.7 + y: 0.7 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Add Start" + font: "game" + id: "button_add_start_dynamic/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 0.101960786 + y: 0.2 + z: 0.6 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "button_add_start_dynamic/button" + layer: "text" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.78 + overridden_fields: 8 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 +} +nodes { + position { + x: 60.0 + y: -620.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.75 + y: 0.75 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button_add_end_dynamic" + parent: "grid_page_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button.gui" + template_node_child: false +} +nodes { + position { + x: 0.0 + y: 0.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: 130.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_blue" + id: "button_add_end_dynamic/button" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button_add_end_dynamic" + layer: "image" + inherit_alpha: true + slice9 { + x: 15.0 + y: 15.0 + z: 15.0 + w: 15.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL +} +nodes { + position { + x: 0.0 + y: 7.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.7 + y: 0.7 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Add End" + font: "game" + id: "button_add_end_dynamic/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 0.101960786 + y: 0.2 + z: 0.6 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "button_add_end_dynamic/button" + layer: "text" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.78 + overridden_fields: 8 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 +} +nodes { + position { + x: -60.0 + y: -1211.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.75 + y: 0.75 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button_add_start_dynamic_hor" + parent: "grid_page_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button.gui" + template_node_child: false +} +nodes { + position { + x: 0.0 + y: 0.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: 130.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_blue" + id: "button_add_start_dynamic_hor/button" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button_add_start_dynamic_hor" + layer: "image" + inherit_alpha: true + slice9 { + x: 15.0 + y: 15.0 + z: 15.0 + w: 15.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL +} +nodes { + position { + x: 0.0 + y: 7.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.7 + y: 0.7 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Add Start" + font: "game" + id: "button_add_start_dynamic_hor/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 0.101960786 + y: 0.2 + z: 0.6 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "button_add_start_dynamic_hor/button" + layer: "text" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.78 + overridden_fields: 8 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 +} +nodes { + position { + x: 60.0 + y: -1211.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.75 + y: 0.75 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button_add_end_dynamic_hor" + parent: "grid_page_content" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button.gui" + template_node_child: false +} +nodes { + position { + x: 0.0 + y: 0.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: 130.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_blue" + id: "button_add_end_dynamic_hor/button" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button_add_end_dynamic_hor" + layer: "image" + inherit_alpha: true + slice9 { + x: 15.0 + y: 15.0 + z: 15.0 + w: 15.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + template_node_child: true + size_mode: SIZE_MODE_MANUAL +} +nodes { + position { + x: 0.0 + y: 7.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.7 + y: 0.7 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Add End" + font: "game" + id: "button_add_end_dynamic_hor/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 0.101960786 + y: 0.2 + z: 0.6 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "button_add_end_dynamic_hor/button" + layer: "text" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.78 + overridden_fields: 8 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 +} nodes { position { x: 0.0 diff --git a/example/page/grid_page.lua b/example/page/grid_page.lua index 2b23f7d..74f4b7a 100644 --- a/example/page/grid_page.lua +++ b/example/page/grid_page.lua @@ -30,6 +30,7 @@ local function add_node(self, index) button.on_long_click:subscribe(function() remove_node(self, button) end) + button:set_click_zone(self.grid_static_scroll.view_node) table.insert(self.grid_node_buttons, button) @@ -74,11 +75,35 @@ local function init_static_grid(self) end -local function add_node_dynamic(self, index) +local function remove_dynamic_node(self, button) + gui.delete_node(button.node) + + self.druid:remove(button) + local index = self.dynamic_grid:get_index_by_node(button.node) + self.dynamic_grid:remove(index, true) + for i = 1, #self.dynamic_node_buttons do + if self.dynamic_node_buttons[i] == button then + table.remove(self.dynamic_node_buttons, i) + self.grid_dynamic_scroll:set_size(self.dynamic_grid:get_size()) + break + end + end +end + + +local function add_node_dynamic(self, index, is_shift_left) 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) + self.dynamic_grid:add(node, index, is_shift_left) + + local button = self.druid:new_button(node, function(_, params, button) + remove_dynamic_node(self, button, true) + end) + button:set_click_zone(self.grid_dynamic_scroll.view_node) + self.grid_dynamic_scroll:set_size(self.dynamic_grid:get_size()) + self.grid_dynamic_scroll:set_scroll_offset(self.dynamic_grid:get_zero_offset()) + table.insert(self.dynamic_node_buttons, button) end @@ -86,12 +111,19 @@ local function add_node_dynamic_hor(self, index) local node = gui.clone(self.prefab_hor_dynamic) gui.set_enabled(node, true) gui.set_size(node, vmath.vector3(80 + math.random(0, 80), 80, 0)) - self.dynamic_hor_grid:add(node) + self.dynamic_hor_grid:add(node, index) + self.grid_dynamic_hor_scroll:set_size(self.dynamic_hor_grid:get_size()) + self.grid_dynamic_hor_scroll:set_scroll_offset(self.dynamic_hor_grid:get_zero_offset()) end local function init_dynamic_grid(self) + -- Vertical horizontal grid + self.dynamic_node_buttons = {} self.dynamic_grid = self.druid:new_dynamic_grid("grid_dynamic_nodes") + self.dynamic_grid:set_position_function(function(node, pos) + gui.animate(node, gui.PROP_POSITION, pos, gui.EASING_OUTSINE, 0.2) + end) self.prefab_dynamic = gui.get_node("grid_dynamic_prefab") gui.set_enabled(self.prefab_dynamic, false) @@ -99,12 +131,19 @@ local function init_dynamic_grid(self) for i = 1, 10 do add_node_dynamic(self, i) end - - self.grid_dynamic_scroll:set_size(self.dynamic_grid:get_size()) + self.druid:new_button("button_add_start_dynamic/button", function() + add_node_dynamic(self, 3, true) + end) + self.druid:new_button("button_add_end_dynamic/button", function() + add_node_dynamic(self) + end) + -- Horizontal dynamic grid self.dynamic_hor_grid = self.druid:new_dynamic_grid("grid_dynamic_hor_nodes") - + self.dynamic_hor_grid:set_position_function(function(node, pos) + gui.animate(node, gui.PROP_POSITION, pos, gui.EASING_OUTSINE, 0.2) + end) self.prefab_hor_dynamic = gui.get_node("grid_dynamic_hor_prefab") gui.set_enabled(self.prefab_hor_dynamic, false) @@ -112,7 +151,12 @@ local function init_dynamic_grid(self) add_node_dynamic_hor(self, i) end - self.grid_dynamic_hor_scroll:set_size(self.dynamic_hor_grid:get_size()) + self.druid:new_button("button_add_start_dynamic_hor/button", function() + add_node_dynamic_hor(self, 1) + end) + self.druid:new_button("button_add_end_dynamic_hor/button", function() + add_node_dynamic_hor(self) + end) end