Add dynamic grid to navigate example

This commit is contained in:
Insality 2021-04-05 23:16:52 +03:00
parent 63d9d0260f
commit 015564f5b3
4 changed files with 944 additions and 29 deletions

View File

@ -257,6 +257,12 @@ function DataList._check_elements(self)
local middle_index = (self.last_index + self.top_index) / 2
local progress = (middle_index - self._data_first_index) / (self._data_last_index - self._data_first_index)
progress = helper.clamp(progress, 0, 1)
if self.last_index == self:get_last_index() then
progress = 1
end
if self.top_index == self:get_first_index() then
progress = 0
end
if self.scroll_progress ~= progress then
self.scroll_progress = progress

View File

@ -70,7 +70,62 @@ nodes {
nodes {
position {
x: 0.0
y: 387.0
y: 359.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: 1.0
y: 1.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: "info_static"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
adjust_mode: ADJUST_MODE_FIT
parent: "root"
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_AUTO
}
nodes {
position {
x: 0.0
y: 4.0
z: 0.0
w: 1.0
}
@ -120,7 +175,7 @@ nodes {
}
adjust_mode: ADJUST_MODE_FIT
line_break: false
parent: "root"
parent: "info_static"
layer: ""
inherit_alpha: true
alpha: 1.0
@ -133,7 +188,7 @@ nodes {
nodes {
position {
x: -2.0
y: 280.0
y: -103.0
z: 0.0
w: 1.0
}
@ -169,7 +224,7 @@ nodes {
yanchor: YANCHOR_NONE
pivot: PIVOT_N
adjust_mode: ADJUST_MODE_FIT
parent: "root"
parent: "info_static"
layer: ""
inherit_alpha: true
slice9 {
@ -243,7 +298,7 @@ nodes {
nodes {
position {
x: 450.0
y: 300.0
y: -83.0
z: 0.0
w: 1.0
}
@ -279,7 +334,7 @@ nodes {
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
adjust_mode: ADJUST_MODE_FIT
parent: "root"
parent: "info_static"
layer: "image"
inherit_alpha: true
slice9 {
@ -361,7 +416,7 @@ nodes {
nodes {
position {
x: -110.0
y: 320.0
y: -63.0
z: 0.0
w: 1.0
}
@ -391,7 +446,7 @@ nodes {
}
type: TYPE_TEMPLATE
id: "button_simple_first"
parent: "root"
parent: "info_static"
layer: ""
inherit_alpha: true
alpha: 1.0
@ -522,7 +577,7 @@ nodes {
nodes {
position {
x: 0.0
y: 320.0
y: -63.0
z: 0.0
w: 1.0
}
@ -552,7 +607,7 @@ nodes {
}
type: TYPE_TEMPLATE
id: "button_simple_hundred"
parent: "root"
parent: "info_static"
layer: ""
inherit_alpha: true
alpha: 1.0
@ -683,7 +738,7 @@ nodes {
nodes {
position {
x: 110.0
y: 320.0
y: -63.0
z: 0.0
w: 1.0
}
@ -713,7 +768,7 @@ nodes {
}
type: TYPE_TEMPLATE
id: "button_simple_last"
parent: "root"
parent: "info_static"
layer: ""
inherit_alpha: true
alpha: 1.0
@ -844,7 +899,7 @@ nodes {
nodes {
position {
x: 0.0
y: 164.0
y: -219.0
z: 0.0
w: 1.0
}
@ -880,7 +935,7 @@ nodes {
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
adjust_mode: ADJUST_MODE_FIT
parent: "root"
parent: "info_static"
layer: "image"
inherit_alpha: true
slice9 {
@ -951,6 +1006,827 @@ nodes {
template_node_child: false
size_mode: SIZE_MODE_AUTO
}
nodes {
position {
x: 0.0
y: -50.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: 1.0
y: 1.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: "info_dynamic"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
adjust_mode: ADJUST_MODE_FIT
parent: "root"
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_AUTO
}
nodes {
position {
x: 0.0
y: 4.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: 700.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_TEXT
blend_mode: BLEND_MODE_ALPHA
text: "Simple navigate with DynamicGrid"
font: "game"
id: "text_hint_dynamic"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
outline {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
shadow {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
adjust_mode: ADJUST_MODE_FIT
line_break: false
parent: "info_dynamic"
layer: ""
inherit_alpha: true
alpha: 1.0
outline_alpha: 1.0
shadow_alpha: 0.0
template_node_child: false
text_leading: 1.0
text_tracking: 0.0
}
nodes {
position {
x: -2.0
y: -103.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: 400.0
y: 100.0
z: 0.0
w: 1.0
}
color {
x: 0.8
y: 1.0
z: 1.0
w: 1.0
}
type: TYPE_BOX
blend_mode: BLEND_MODE_ALPHA
texture: ""
id: "data_list_dynamic"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_N
adjust_mode: ADJUST_MODE_FIT
parent: "info_dynamic"
layer: ""
inherit_alpha: true
slice9 {
x: 0.0
y: 0.0
z: 0.0
w: 0.0
}
clipping_mode: CLIPPING_MODE_STENCIL
clipping_visible: true
clipping_inverted: false
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
}
nodes {
position {
x: -200.0
y: -50.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: 400.0
y: 100.0
z: 0.0
w: 1.0
}
color {
x: 0.8
y: 1.0
z: 0.8
w: 1.0
}
type: TYPE_BOX
blend_mode: BLEND_MODE_ALPHA
texture: ""
id: "data_list_dynamic_content"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_W
adjust_mode: ADJUST_MODE_FIT
parent: "data_list_dynamic"
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: -110.0
y: -63.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: 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_dynamic_first"
parent: "info_dynamic"
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: 90.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_dynamic_first/button"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
adjust_mode: ADJUST_MODE_FIT
parent: "button_dynamic_first"
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
overridden_fields: 4
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: 100.0
y: 50.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: "First"
font: "game"
id: "button_dynamic_first/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_dynamic_first/button"
layer: "text"
inherit_alpha: true
alpha: 1.0
outline_alpha: 0.0
shadow_alpha: 0.78
overridden_fields: 4
overridden_fields: 8
template_node_child: true
text_leading: 1.0
text_tracking: 0.0
}
nodes {
position {
x: 0.0
y: -63.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: 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_dynamic_hundred"
parent: "info_dynamic"
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: 90.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_dynamic_hundred/button"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
adjust_mode: ADJUST_MODE_FIT
parent: "button_dynamic_hundred"
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
overridden_fields: 4
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: 5.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: "100"
font: "game"
id: "button_dynamic_hundred/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_dynamic_hundred/button"
layer: "text"
inherit_alpha: true
alpha: 1.0
outline_alpha: 0.0
shadow_alpha: 0.78
overridden_fields: 4
overridden_fields: 8
template_node_child: true
text_leading: 1.0
text_tracking: 0.0
}
nodes {
position {
x: 110.0
y: -63.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: 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_dynamic_last"
parent: "info_dynamic"
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: 90.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_dynamic_last/button"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
adjust_mode: ADJUST_MODE_FIT
parent: "button_dynamic_last"
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
overridden_fields: 4
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: 100.0
y: 50.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: "Last"
font: "game"
id: "button_dynamic_last/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_dynamic_last/button"
layer: "text"
inherit_alpha: true
alpha: 1.0
outline_alpha: 0.0
shadow_alpha: 0.78
overridden_fields: 4
overridden_fields: 8
template_node_child: true
text_leading: 1.0
text_tracking: 0.0
}
nodes {
position {
x: 0.0
y: -219.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: 400.0
y: 4.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/slider_back"
id: "dynamic_slider"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
adjust_mode: ADJUST_MODE_FIT
parent: "info_dynamic"
layer: "image"
inherit_alpha: true
slice9 {
x: 10.0
y: 0.0
z: 10.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: -200.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: 0.7
y: 0.7
z: 1.0
w: 1.0
}
size {
x: 36.0
y: 36.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/slider_move"
id: "grid_scroll_dynamic_pin"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
adjust_mode: ADJUST_MODE_FIT
parent: "dynamic_slider"
layer: "image"
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_AUTO
}
layers {
name: "image"
}

View File

@ -1,7 +1,7 @@
local druid = require("druid.druid")
local function create_simple_element(self, data, index, data_list)
local function create_element(self, data, index, data_list)
-- Here we will create elements without druid components, just nodes
local instance = gui.clone_tree(self.prefab_square)
gui.set_enabled(instance["prefab_square"], true)
@ -10,25 +10,14 @@ local function create_simple_element(self, data, index, data_list)
end
function init(self)
self.druid = druid.new(self)
self.data_set = {}
for i = 1, 999 do
table.insert(self.data_set, i)
end
self.prefab_square = gui.get_node("prefab_square")
gui.set_enabled(self.prefab_square, false)
local function init_data_list_with_static_grid(self)
local scroll_simple = self.druid:new_scroll("data_list_simple", "data_list_simple_content")
:set_vertical_scroll(false)
--- The 999999 number in row - is kind of hack for single line static grid
local grid_simple = self.druid:new_static_grid("data_list_simple_content", "prefab_square", 999999)
self.data_list_simple = self.druid:new_data_list(scroll_simple, grid_simple, create_simple_element)
self.data_list_simple = self.druid:new_data_list(scroll_simple, grid_simple, create_element)
self.data_list_simple:set_data(self.data_set)
self.slider_simple = self.druid:new_slider("grid_scroll_pin", vmath.vector3(200, 0, 0))
@ -50,6 +39,51 @@ function init(self)
end
local function init_data_list_with_dynamic_grid(self)
local scroll_dynamic = self.druid:new_scroll("data_list_dynamic", "data_list_dynamic_content")
:set_vertical_scroll(false)
local grid_dynamic = self.druid:new_dynamic_grid("data_list_dynamic_content")
self.data_list_dynamic = self.druid:new_data_list(scroll_dynamic, grid_dynamic, create_element)
self.data_list_dynamic:set_data(self.data_set)
self.slider_dynamic = self.druid:new_slider("grid_scroll_dynamic_pin", vmath.vector3(200, 0, 0))
-- Disable slider input, now we can not use slider with data list
self.slider_dynamic:set_input_enabled(false)
self.data_list_dynamic.on_scroll_progress_change:subscribe(function(_, progress)
self.slider_dynamic:set(progress, true)
end)
self.druid:new_button("button_dynamic_first/button", function()
self.data_list_dynamic:scroll_to_index(1)
end)
self.druid:new_button("button_dynamic_hundred/button", function()
self.data_list_dynamic:scroll_to_index(100)
end)
self.druid:new_button("button_dynamic_last/button", function()
self.data_list_dynamic:scroll_to_index(#self.data_set)
end)
end
function init(self)
self.druid = druid.new(self)
self.data_set = {}
for i = 1, 999 do
table.insert(self.data_set, i)
end
self.prefab_square = gui.get_node("prefab_square")
gui.set_enabled(self.prefab_square, false)
init_data_list_with_static_grid(self)
init_data_list_with_dynamic_grid(self)
end
function final(self)
self.druid:final()
end

View File

@ -17,7 +17,6 @@ end
local function setup_button(self)
local b = self.druid:new_button("button_simple", lang.toggle_locale, "button_param")
self.druid:new_button("button_template/button", function()
msg.post("@system:", "toggle_profile")
print(b:is_enabled())
b:set_enabled(not b:is_enabled())
end, "button_param")