Add data_list_matrix_basic example

example/druid.gui

@@ -2863,6 +2863,49 @@ nodes {
   parent: "data_list_cache_with_component/button_component/root"
   template_node_child: true
 }
+nodes {
+  type: TYPE_TEMPLATE
+  id: "data_list_matrix_basic"
+  parent: "data_list"
+  inherit_alpha: true
+  template: "/example/examples/data_list/basic/data_list_matrix_basic.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "data_list_matrix_basic/root"
+  parent: "data_list_matrix_basic"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "data_list_matrix_basic/view"
+  parent: "data_list_matrix_basic/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "data_list_matrix_basic/content"
+  parent: "data_list_matrix_basic/view"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "data_list_matrix_basic/prefab"
+  parent: "data_list_matrix_basic/content"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "data_list_matrix_basic/panel"
+  parent: "data_list_matrix_basic/prefab"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "data_list_matrix_basic/text"
+  parent: "data_list_matrix_basic/prefab"
+  template_node_child: true
+}
 nodes {
   type: TYPE_BOX
   texture: "druid_example/empty"

example/examples/data_list/basic/data_list_matrix_basic.gui

@@ -0,0 +1,117 @@
+fonts {
+  name: "text_bold"
+  font: "/example/assets/fonts/text_bold.font"
+}
+textures {
+  name: "druid_example"
+  texture: "/example/assets/druid_example.atlas"
+}
+nodes {
+  type: TYPE_BOX
+  texture: "druid_example/empty"
+  id: "root"
+  inherit_alpha: true
+  size_mode: SIZE_MODE_AUTO
+  visible: false
+}
+nodes {
+  position {
+    y: 350.0
+  }
+  size {
+    x: 400.0
+    y: 700.0
+  }
+  color {
+    x: 0.173
+    y: 0.184
+    z: 0.204
+  }
+  type: TYPE_BOX
+  texture: "druid_example/pixel"
+  id: "view"
+  pivot: PIVOT_N
+  parent: "root"
+  inherit_alpha: true
+  clipping_mode: CLIPPING_MODE_STENCIL
+}
+nodes {
+  size {
+    x: 400.0
+    y: 700.0
+  }
+  type: TYPE_BOX
+  texture: "druid_example/empty"
+  id: "content"
+  pivot: PIVOT_N
+  parent: "view"
+  inherit_alpha: true
+  visible: false
+}
+nodes {
+  position {
+    y: -350.0
+  }
+  size {
+    x: 100.0
+    y: 100.0
+  }
+  type: TYPE_BOX
+  id: "prefab"
+  parent: "content"
+  inherit_alpha: true
+  visible: false
+}
+nodes {
+  size {
+    x: 90.0
+    y: 90.0
+  }
+  color {
+    x: 0.631
+    y: 0.843
+    z: 0.961
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_32"
+  id: "panel"
+  parent: "prefab"
+  inherit_alpha: true
+  slice9 {
+    x: 16.0
+    y: 16.0
+    z: 16.0
+    w: 16.0
+  }
+}
+nodes {
+  size {
+    x: 50.0
+    y: 50.0
+  }
+  color {
+    x: 0.31
+    y: 0.318
+    z: 0.322
+  }
+  type: TYPE_TEXT
+  text: "1"
+  font: "text_bold"
+  id: "text"
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+  parent: "prefab"
+  inherit_alpha: true
+  outline_alpha: 0.0
+  shadow_alpha: 0.0
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT

example/examples/data_list/basic/data_list_matrix_basic.lua

@@ -0,0 +1,95 @@
+local event = require("event.event")
+
+---@class examples.data_list_matrix_basic: druid.widget
+---@field prefab node
+---@field scroll druid.scroll
+---@field grid druid.grid
+---@field data_list druid.data_list
+---@field on_item_click event
+local M = {}
+
+
+function M:init()
+	self.prefab = self:get_node("prefab")
+	gui.set_enabled(self.prefab, false)
+
+	self.scroll = self.druid:new_scroll("view", "content")
+	self.grid = self.druid:new_grid("content", self.prefab, 4)
+	self.data_list = self.druid:new_data_list(self.scroll, self.grid, self.create_item_callback) --[[@as druid.data_list]]
+
+	local data = {}
+	for index = 1, 1000 do
+		table.insert(data, {})
+	end
+	self.data_list:set_data(data)
+
+	self.on_item_click = event.create()
+end
+
+
+---@param item_data table
+---@param index number
+---@return node, druid.component
+function M:create_item_callback(item_data, index)
+	local nodes = gui.clone_tree(self.prefab)
+
+	local root = nodes[self:get_template() .. "/prefab"]
+	local text = nodes[self:get_template() .. "/text"]
+	gui.set_enabled(root, true)
+	gui.set_text(text, tostring(index))
+
+	local button = self.druid:new_button(root, self.on_button_click, index)
+	return root, button
+end
+
+
+function M:on_button_click(index)
+	self.on_item_click:trigger(index)
+end
+
+
+---@param output_list output_list
+function M:on_example_created(output_list)
+	self.on_item_click:subscribe(function(index)
+		output_list:add_log_text("Item clicked: " .. index)
+	end)
+end
+
+
+---@param properties_panel properties_panel
+function M:properties_control(properties_panel)
+	local view_node = self.scroll.view_node
+	local is_stencil = gui.get_clipping_mode(view_node) == gui.CLIPPING_MODE_STENCIL
+
+	properties_panel:add_checkbox("ui_clipping", is_stencil, function(value)
+		gui.set_clipping_mode(view_node, value and gui.CLIPPING_MODE_STENCIL or gui.CLIPPING_MODE_NONE)
+	end)
+
+	properties_panel:add_slider("ui_scroll", 0, function(value)
+		self.scroll:scroll_to_percent(vmath.vector3(0, 1 - value, 0), true)
+	end)
+end
+
+
+---@return string
+function M:get_debug_info()
+	local data_list = self.data_list
+
+	local data = data_list:get_data()
+	local info = ""
+	info = info .. "Data length: " .. #data .. "\n"
+	info = info .. "First Visual Index: " .. data_list.top_index .. "\n"
+	info = info .. "Last Visual Index: " .. data_list.last_index .. "\n"
+
+	local s = self.scroll
+	info = info .. "\n"
+	info = info .. "View Size Y: " .. gui.get(s.view_node, "size.y") .. "\n"
+	info = info .. "Content Size Y: " .. gui.get(s.content_node, "size.y") .. "\n"
+	info = info .. "Content position Y: " .. math.ceil(s.position.y) .. "\n"
+	info = info .. "Content Range Y: " .. s.available_pos.y .. " - " .. s.available_pos.w .. "\n"
+
+	return info
+end
+
+
+return M

example/examples/data_list/examples_list.lua

@@ -21,6 +21,15 @@ function M.get_examples()
 			widget_class = require("example.examples.data_list.basic.data_list_horizontal_basic"),
 		},
 
+		{
+			name_id = "ui_example_data_list_matrix_basic",
+			information_text_id = "ui_example_data_list_matrix_basic_description",
+			template = "data_list_matrix_basic",
+			root = "data_list_matrix_basic/root",
+			code_url = "example/examples/data_list/basic/data_list_matrix_basic.lua",
+			widget_class = require("example.examples.data_list.basic.data_list_matrix_basic"),
+		},
+
 		{
 			name_id = "ui_example_data_list_add_remove_clear",
 			information_text_id = "ui_example_data_list_add_remove_clear_description",

example/locales/en.json

@@ -147,6 +147,9 @@
 	"ui_example_data_list_horizontal_basic": "Data List Horizontal Basic",
 	"ui_example_data_list_horizontal_basic_description": "How to make a horizontal data list",
 
+	"ui_example_data_list_matrix_basic": "Data List Matrix Basic",
+	"ui_example_data_list_matrix_basic_description": "How to make a matrix data list",
+
 	"ui_example_data_list_add_remove_clear": "Data List Add Remove Clear",
 	"ui_example_data_list_add_remove_clear_description": "How the add, remove and clear functions work in the data list",