Start rework examples system

druid/extended/data_list.lua

@@ -26,10 +26,11 @@ local DataList = component.create("data_list")
 
 
 --- Data list constructor
--- @tparam Scroll self
+-- @tparam DataList self
--- @tparam node view_node GUI view scroll node
+-- @tparam druid.scroll The Scroll instance for Data List component
--- @tparam node content_node GUI content scroll node
+-- @tparam druid.grid The Grid instance for Data List component
-function DataList.init(self, data, scroll, grid, create_function)
+-- @tparam function create_function The create function callback(data, index). Function should return (node, [component])
+function DataList.init(self, scroll, grid, create_function)
 	self.druid = self:get_druid()
 	self.scroll = scroll
 	self.grid = grid
@@ -47,8 +48,6 @@ function DataList.init(self, data, scroll, grid, create_function)
 	self._data_visual = {}
 
 	self.scroll.on_scroll:subscribe(self._check_elements, self)
-
-	self:set_data(data)
 end
 
 
@@ -62,10 +61,13 @@ end
 --- Set new data set for DataList component
 -- @tparam DataList self
 -- @tparam table data The new data array
+-- @treturn druid.data_list Current DataList instance
 function DataList.set_data(self, data)
-	self._data = data
+	self._data = data or {}
 	self:_update_data_info()
 	self:_refresh()
+
+	return self
 end
 
 

example/example.collection

@@ -1,4 +1,4 @@
-name: "kenney"
+name: "example"
 scale_along_z: 0
 embedded_instances {
   id: "gui"
@@ -113,3 +113,66 @@ embedded_instances {
     z: 1.0
   }
 }
+embedded_instances {
+  id: "general_overview"
+  data: "components {\n"
+  "  id: \"screen_factory\"\n"
+  "  component: \"/monarch/screen_factory.script\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"screen_id\"\n"
+  "    value: \"general_overview\"\n"
+  "    type: PROPERTY_TYPE_HASH\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"popup\"\n"
+  "    value: \"true\"\n"
+  "    type: PROPERTY_TYPE_BOOLEAN\n"
+  "  }\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"collectionfactory\"\n"
+  "  type: \"collectionfactory\"\n"
+  "  data: \"prototype: \\\"/example/examples/general/overview/overview.collection\\\"\\n"
+  "load_dynamically: false\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}

example/examples/general/overview/overview.collection

@@ -0,0 +1,37 @@
+name: "overview"
+scale_along_z: 0
+embedded_instances {
+  id: "go"
+  data: "components {\n"
+  "  id: \"overview\"\n"
+  "  component: \"/example/examples/general/overview/overview.gui\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}

example/examples/general/overview/overview.gui

@@ -0,0 +1,198 @@
+script: "/example/examples/general/overview/overview.gui_script"
+fonts {
+  name: "game"
+  font: "/example/assets/fonts/game.font"
+}
+textures {
+  name: "kenney"
+  texture: "/example/assets/images/kenney.atlas"
+}
+background_color {
+  x: 0.0
+  y: 0.0
+  z: 0.0
+  w: 0.0
+}
+nodes {
+  position {
+    x: 300.0
+    y: 400.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: 800.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: "root"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  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: 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: 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: "Hello!"
+  font: "game"
+  id: "text_hint"
+  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: "root"
+  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: 0.0
+    y: 404.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_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "Hello!"
+  font: "game"
+  id: "text_hint1"
+  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: "root"
+  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
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT
+max_nodes: 512

example/examples/general/overview/overview.gui_script

@@ -0,0 +1,25 @@
+local druid = require("druid.druid")
+
+function init(self)
+	self.druid = druid.new(self)
+end
+
+
+function final(self)
+	self.druid:final()
+end
+
+
+function update(self, dt)
+	self.druid:update(dt)
+end
+
+
+function on_message(self, message_id, message, sender)
+	self.druid:on_message(message_id, message, sender)
+end
+
+
+function on_input(self, action_id, action)
+	return self.druid:on_input(action_id, action)
+end

example/examples/general/template/template.collection

@@ -0,0 +1,37 @@
+name: "template"
+scale_along_z: 0
+embedded_instances {
+  id: "go"
+  data: "components {\n"
+  "  id: \"overview\"\n"
+  "  component: \"/example/examples/general/template/template.gui\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}

example/examples/general/template/template.gui

@@ -0,0 +1,135 @@
+script: "/example/examples/general/template/template.gui_script"
+fonts {
+  name: "game"
+  font: "/example/assets/fonts/game.font"
+}
+textures {
+  name: "kenney"
+  texture: "/example/assets/images/kenney.atlas"
+}
+background_color {
+  x: 0.0
+  y: 0.0
+  z: 0.0
+  w: 0.0
+}
+nodes {
+  position {
+    x: 300.0
+    y: 400.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: 800.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: "root"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  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: 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: 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: "Hello!"
+  font: "game"
+  id: "text_hint"
+  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: "root"
+  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
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT
+max_nodes: 512

example/examples/general/template/template.gui_script

@@ -0,0 +1,25 @@
+local druid = require("druid.druid")
+
+function init(self)
+	self.druid = druid.new(self)
+end
+
+
+function final(self)
+	self.druid:final()
+end
+
+
+function update(self, dt)
+	self.druid:update(dt)
+end
+
+
+function on_message(self, message_id, message, sender)
+	self.druid:on_message(message_id, message, sender)
+end
+
+
+function on_input(self, action_id, action)
+	return self.druid:on_input(action_id, action)
+end

example/gui/main/main.gui_script

@@ -1,5 +1,6 @@
 ---@type druid
 local druid = require("druid.druid")
+local monarch = require("monarch.monarch")
 
 local empty_style = require("druid.styles.empty.style")
 local default_style = require("druid.styles.default.style")
@@ -13,49 +14,35 @@ local input_page = require("example.page.input_page")
 local grid_page = require("example.page.grid_page")
 local infinity_page = require("example.page.infinity_page")
 
-local pages = {
-	"main_page",
-	"texts_page",
-	"button_page",
-	"scroll_page",
-	"slider_page",
-	"input_page",
-	"grid_page",
-	"infinity_page",
-}
 
-local function on_control_button(self, delta)
-	self.page = self.page + delta
-	self.page = math.max(1, self.page)
-	self.page = math.min(self.page, #pages)
 
-	self.header:translate(pages[self.page])
+local function back_to_lobby(self)
-	local node = gui.get_node("C_Anchor")
+	monarch.back()
-
+	gui.set_enabled(gui.get_node("C_Anchor"), true)
-	for i = 1, #pages do
+	gui.set_enabled(self.button_menu.node, false)
-		gui.set_enabled(gui.get_node(pages[i]), i == self.page)
-	end
-	gui.animate(node, "position.x", (self.page-1) * -600, gui.EASING_OUTSINE, 0.2)
 end
 
+local function show_scene(self, scene_name, text_header)
+	monarch.show(scene_name)
+
+	self.text_header:set_to(text_header)
+	gui.set_enabled(gui.get_node("C_Anchor"), false)
+	gui.set_enabled(self.button_menu.node, true)
+end
 
 local function init_top_panel(self)
 	self.druid:new_blocker("panel_top")
-	self.druid:new_button("button_left/button", on_control_button, -1)
-	self.druid:new_button("button_right/button", on_control_button, 1)
-	self.header = self.druid:new_lang_text("text_header", "main_page")
-end
 
-
+	self.button_menu = self.druid:new_button("button_menu/button", function()
-local function init_swipe_control(self)
+		back_to_lobby(self)
-	self.druid:new_swipe("root", function(_, side)
-		if side == "left" then
-			on_control_button(self, 1)
-		end
-		if side == "right" then
-			on_control_button(self, -1)
-		end
 	end)
+	gui.set_enabled(self.button_menu.node, false)
+
+	self.button_api = self.druid:new_button("button_api/button", function()
+		sys.open_url("https://insality.github.io/druid/")
+	end)
+
+	self.text_header = self.druid:new_text("text_header")
 end
 
 
@@ -64,28 +51,81 @@ local function on_window_callback(self, event, data)
 end
 
 
+local function get_title(self, text)
+	local prefab = gui.get_node("prefab_header")
+	local nodes = gui.clone_tree(prefab)
+	local root = nodes["prefab_header"]
+	gui.set_enabled(root, true)
+	gui.set_text(nodes["prefab_text"], text)
+	return root
+end
+
+
+local function get_button(self, text, scene_name)
+	local prefab = gui.get_node("prefab_button")
+	local nodes = gui.clone_tree(prefab)
+	local root = nodes["prefab_button"]
+	gui.set_enabled(root, true)
+	self.druid:new_button(root, function()
+		show_scene(self, scene_name, text)
+	end)
+		:set_click_zone(self.lobby_scroll.view_node)
+	gui.set_text(nodes["text_button_lobby"], text)
+
+	return root
+end
+
+
+local function init_lobby(self)
+	gui.set_enabled(gui.get_node("prefabs"), false)
+
+	self.lobby_scroll = self.druid:new_scroll("lobby_view", "lobby_content")
+	self.lobby_grid = self.druid:new_dynamic_grid("lobby_content")
+	self.lobby_scroll:bind_grid(self.lobby_grid)
+
+	self.lobby_grid:add(get_title(self, "General examples"))
+	self.lobby_grid:add(get_button(self, "Overview", "general_overview"))
+	self.lobby_grid:add(get_button(self, "Buttons", "scene_name"))
+	self.lobby_grid:add(get_button(self, "Texts", "scene_name"))
+	self.lobby_grid:add(get_button(self, "Lang Text", "scene_name"))
+	self.lobby_grid:add(get_button(self, "Sliders", "scene_name"))
+	self.lobby_grid:add(get_button(self, "Scrolls", "scene_name"))
+	self.lobby_grid:add(get_button(self, "Grids", "scene_name"))
+	self.lobby_grid:add(get_button(self, "Progress Bar", "scene_name"))
+	self.lobby_grid:add(get_button(self, "Data List", "scene_name"))
+	self.lobby_grid:add(get_button(self, "Checkboxes", "scene_name"))
+	self.lobby_grid:add(get_button(self, "Input text", "scene_name"))
+	self.lobby_grid:add(get_button(self, "Swipe", "scene_name"))
+	self.lobby_grid:add(get_button(self, "Drag", "scene_name"))
+
+	self.lobby_grid:add(get_title(self, "Scrolls"))
+	self.lobby_grid:add(get_button(self, "Nested scrolls", "scroll_scene"))
+	self.lobby_grid:add(get_button(self, "With points of interest", "scroll_scene"))
+	self.lobby_grid:add(get_button(self, "Without inertion", "scroll_scene"))
+
+	self.lobby_grid:add(get_title(self, "Grids"))
+	self.lobby_grid:add(get_button(self, "Static grid", "scroll_scene"))
+	self.lobby_grid:add(get_button(self, "Dynamic grid", "scroll_scene"))
+	self.lobby_grid:add(get_button(self, "Scroll binding", "scroll_scene"))
+
+	self.lobby_grid:add(get_title(self, "Data list / Infinity scroll"))
+	self.lobby_grid:add(get_button(self, "With static grid", "scroll_scene"))
+	self.lobby_grid:add(get_button(self, "With dynamic grid", "scroll_scene"))
+	self.lobby_grid:add(get_button(self, "Add/remove elements", "scroll_scene"))
+	self.lobby_grid:add(get_button(self, "Navigate over elements", "scroll_scene"))
+end
+
+
 function init(self)
+	-- Main lobby have more render priority (top panel)
+	gui.set_render_order(10)
+
+	window.set_listener(on_window_callback)
 	druid.set_default_style(default_style)
 	self.druid = druid.new(self)
 
-	window.set_listener(on_window_callback)
-
-	init_swipe_control(self)
-
-	self.page = 1
-	main_page.setup_page(self)
-	text_page.setup_page(self)
-	button_page.setup_page(self)
-	scroll_page.setup_page(self)
-	slider_page.setup_page(self)
-	input_page.setup_page(self)
-	grid_page.setup_page(self)
-	infinity_page.setup_page(self)
-
 	init_top_panel(self)
-
+	init_lobby(self)
-	-- Refresh state
-	on_control_button(self, 0)
 end
 
 

example/init.script

@@ -4,7 +4,7 @@ local lang = require("example.lang")
 
 local function setup_druid()
 	druid.set_sound_function(function(name)
-		sound.play("kenney:/sound#" .. name)
+		sound.play("example:/sound#" .. name)
 	end)
 
 	druid.set_text_function(function(lang_id, ...)

example/page/infinity_page.lua

@@ -86,19 +86,19 @@ local function setup_infinity_list(self)
 		table.insert(data, i)
 	end
 
-	self.infinity_list = self.druid:new_data_list(data, self.infinity_scroll, self.infinity_grid, function(record, index)
+	self.infinity_list = self.druid:new_data_list(self.infinity_scroll, self.infinity_grid, function(record, index)
 		-- function should return gui_node, [druid_component]
 		local root, button = create_infinity_instance(self, record, index)
 		button:set_click_zone(self.infinity_scroll.view_node)
 		return root, button
-	end)
+	end):set_data(data)
 
-	self.infinity_list_hor = self.druid:new_data_list(data, self.infinity_scroll_hor, self.infinity_grid_hor, function(record, index)
+	self.infinity_list_hor = self.druid:new_data_list(self.infinity_scroll_hor, self.infinity_grid_hor, function(record, index)
 		-- function should return gui_node, [druid_component]
 		local root, button = create_infinity_instance_hor(self, record, index)
 		button:set_click_zone(self.infinity_scroll_hor.view_node)
 		return root, button
-	end)
+	end):set_data(data)
 
 	-- scroll to some index
 	-- local pos = self.infinity_grid:get_pos(25)
@@ -108,24 +108,24 @@ local function setup_infinity_list(self)
 	end)
 
 
-	self.infinity_list_small = self.druid:new_data_list(data, self.infinity_scroll_3, self.infinity_grid_3, function(record, index)
+	self.infinity_list_small = self.druid:new_data_list(self.infinity_scroll_3, self.infinity_grid_3, function(record, index)
 		-- function should return gui_node, [druid_component]
 		return create_infinity_instance_small(self, record, index)
-	end)
+	end):set_data(data)
 
-	self.infinity_list_dynamic = self.druid:new_data_list(data, self.infinity_scroll_dynamic, self.infinity_grid_dynamic, function(record, index)
+	self.infinity_list_dynamic = self.druid:new_data_list(self.infinity_scroll_dynamic, self.infinity_grid_dynamic, function(record, index)
 		-- function should return gui_node, [druid_component]
 		return create_infinity_instance_dynamic(self, record, index)
-	end)
+	end):set_data(data)
 
 	timer.delay(1, false, function()
 		self.infinity_list_dynamic:scroll_to_index(25)
 	end)
 
-	self.infinity_list_dynamic_hor = self.druid:new_data_list(data, self.infinity_scroll_dynamic_hor, self.infinity_grid_dynamic_hor, function(record, index)
+	self.infinity_list_dynamic_hor = self.druid:new_data_list(self.infinity_scroll_dynamic_hor, self.infinity_grid_dynamic_hor, function(record, index)
 		-- function should return gui_node, [druid_component]
 		return create_infinity_instance_dynamic_hor(self, record, index)
-	end)
+	end):set_data(data)
 end
 
 

game.project

@@ -1,5 +1,5 @@
 [bootstrap]
-main_collection = /example/kenney.collectionc
+main_collection = /example/example.collectionc
 
 [script]
 shared_state = 1
@@ -11,7 +11,7 @@ height = 900
 [project]
 title = druid
 version = 0.5.0
-dependencies = https://github.com/insalitygames/deftest/archive/master.zip
+dependencies = https://github.com/insalitygames/deftest/archive/master.zip,https://github.com/britzl/monarch/archive/refs/tags/3.3.0.zip
 
 [library]
 include_dirs = druid