Merge branch 'master' into develop

deployer_build_stats.csv

@@ -5,3 +5,5 @@ date,sha,version,build_size,build_time,platform,mode,is_cache_using,commits_coun
 2022-02-28T19:19:46Z,3b329f9c25c9672e4030edb039b0225fa46f7ce1,0.8.521,4356,11,armv7-android,debug,true,521
 2022-02-28T19:22:51Z,3b329f9c25c9672e4030edb039b0225fa46f7ce1,0.8.521,4356,11,armv7-android,debug,true,521
 2022-03-12T10:01:30Z,d0f3d6641a08b0d6b719b13017aa85907d1667e5,0.8.564,2200,44,js-web,release,true,564
+2022-08-29T18:27:58Z,b2643ebd268b15884363efd17724e689279946f1,0.9.589,2316,45,js-web,release,true,589
+2022-08-29T18:46:47Z,13003e472169cbd261e703eca7b133adf64a24f7,0.9.592,2316,40,js-web,release,true,592

docs/druid/archive/archive_files.json

@@ -1 +1 @@
-{"content":[{"name":"game.projectc","size":3808,"pieces":[{"name":"game.projectc0","offset":0}]},{"name":"game.arci","size":17168,"pieces":[{"name":"game.arci0","offset":0}]},{"name":"game.arcd","size":417873,"pieces":[{"name":"game.arcd0","offset":0}]},{"name":"game.dmanifest","size":17838,"pieces":[{"name":"game.dmanifest0","offset":0}]},{"name":"game.public.der","size":162,"pieces":[{"name":"game.public.der0","offset":0}]}]}
+{"content":[{"name":"game.projectc","size":3808,"pieces":[{"name":"game.projectc0","offset":0}]},{"name":"game.arci","size":17728,"pieces":[{"name":"game.arci0","offset":0}]},{"name":"game.arcd","size":421233,"pieces":[{"name":"game.arcd0","offset":0}]},{"name":"game.dmanifest","size":18513,"pieces":[{"name":"game.dmanifest0","offset":0}]},{"name":"game.public.der","size":162,"pieces":[{"name":"game.public.der0","offset":0}]}]}

docs/druid/archive/game.projectc0

@@ -1,12 +1,12 @@
 [project]
 title = druid
-version = 0.8.564
+version = 0.9.592
 write_log = 0
 compress_archive = 1
 publisher = Insality
 developer = Insality
-commit_sha = d0f3d6641a08b0d6b719b13017aa85907d1667e5
+commit_sha = 13003e472169cbd261e703eca7b133adf64a24f7
-build_date = 2022-03-12T10:01:30Z
+build_date = 2022-08-29T18:46:47Z
 title_as_file_name = druid
 
 [display]
@@ -120,7 +120,7 @@ default_language = en
 localizations = en
 
 [android]
-version_code = 564
+version_code = 592
 minimum_sdk_version = 16
 target_sdk_version = 30
 package = com.insality.druid

docs/druid/index.html

@@ -7,7 +7,7 @@
 	<meta name="apple-mobile-web-app-capable" content="yes">
 	<!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->
 
-	<title>druid 0.8.564</title>
+	<title>druid 0.9.592</title>
 	<style type='text/css'>
 	/* Disable user selection to avoid strange bug in Chrome on Windows:
 	* Selecting a text outside the canvas, then clicking+draging would

docs/modules/DataList.html

@@ -86,6 +86,18 @@
 	<td class="summary">Clear the DataList and refresh visuals</td>
 	</tr>
 	<tr>
+	<td class="name" nowrap><a href="#get_created_components">get_created_components(self)</a></td>
+	<td class="summary">Return all currenly created components in DataList</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#get_created_nodes">get_created_nodes(self)</a></td>
+	<td class="summary">Return all currenly created nodes in DataList</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#get_data">get_data(self)</a></td>
+	<td class="summary">Return current data from DataList component</td>
+	</tr>
+	<tr>
 	<td class="name" nowrap><a href="#get_first_index">get_first_index(self)</a></td>
 	<td class="summary">Return first index from data.</td>
 	</tr>
@@ -129,6 +141,14 @@
 	<td class="summary">The current visual last data index</td>
 	</tr>
 	<tr>
+	<td class="name" nowrap><a href="#on_element_add">on_element_add</a></td>
+	<td class="summary">On DataList visual element created Event callback(self, index, node, instance)</td>
+	</tr>
+	<tr>
+	<td class="name" nowrap><a href="#on_element_remove">on_element_remove</a></td>
+	<td class="summary">On DataList visual element created Event callback(self, index)</td>
+	</tr>
+	<tr>
 	<td class="name" nowrap><a href="#on_scroll_progress_change">on_scroll_progress_change</a></td>
 	<td class="summary">Event triggered when scroll progress is changed; event(self, progress_value)</td>
 	</tr>
@@ -173,6 +193,87 @@
 
 
 
+</dd>
+    <dt>
+    <a name = "get_created_components"></a>
+    <strong>get_created_components(self)</strong>
+    </dt>
+    <dd>
+    Return all currenly created components in DataList
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">self</span>
+            <span class="types"><span class="type">DataList</span></span>
+         <a href="../modules/DataList.html#">DataList</a>
+        </li>
+    </ul>
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">druid.base_component[]</span></span>
+        List of created nodes
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "get_created_nodes"></a>
+    <strong>get_created_nodes(self)</strong>
+    </dt>
+    <dd>
+    Return all currenly created nodes in DataList
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">self</span>
+            <span class="types"><span class="type">DataList</span></span>
+         <a href="../modules/DataList.html#">DataList</a>
+        </li>
+    </ul>
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><span class="type">Node[]</span></span>
+        List of created nodes
+    </ol>
+
+
+
+
+</dd>
+    <dt>
+    <a name = "get_data"></a>
+    <strong>get_data(self)</strong>
+    </dt>
+    <dd>
+    Return current data from DataList component
+
+
+    <h3>Parameters:</h3>
+    <ul>
+        <li><span class="parameter">self</span>
+            <span class="types"><span class="type">DataList</span></span>
+         <a href="../modules/DataList.html#">DataList</a>
+        </li>
+    </ul>
+
+    <h3>Returns:</h3>
+    <ol>
+
+           <span class="types"><a class="type" href="https://www.lua.org/manual/5.1/manual.html#5.5">table</a></span>
+        The current data array
+    </ol>
+
+
+
+
 </dd>
     <dt>
     <a name = "get_first_index"></a>
@@ -415,6 +516,46 @@
 
 
 
+</dd>
+    <dt>
+    <a name = "on_element_add"></a>
+    <strong>on_element_add</strong>
+    </dt>
+    <dd>
+    On DataList visual element created Event callback(self, index, node, instance)
+
+
+    <ul>
+        <li><span class="parameter">on_element_add</span>
+            <span class="types"><span class="type">DruidEvent</span></span>
+         <a href="../modules/DruidEvent.html#">DruidEvent</a>
+        </li>
+    </ul>
+
+
+
+
+
+</dd>
+    <dt>
+    <a name = "on_element_remove"></a>
+    <strong>on_element_remove</strong>
+    </dt>
+    <dd>
+    On DataList visual element created Event callback(self, index)
+
+
+    <ul>
+        <li><span class="parameter">on_element_remove</span>
+            <span class="types"><span class="type">DruidEvent</span></span>
+         <a href="../modules/DruidEvent.html#">DruidEvent</a>
+        </li>
+    </ul>
+
+
+
+
+
 </dd>
     <dt>
     <a name = "on_scroll_progress_change"></a>

druid/annotations.lua

@@ -332,6 +332,8 @@ function druid__checkbox_group.set_state(self, indexes, is_instant) end
 ---@class druid.data_list : druid.base_component
 ---@field grid druid.static_grid|druid.dynamic_grid The Druid Grid component
 ---@field last_index number The current visual last data index
+---@field on_element_add druid.event On DataList visual element created Event callback(self, index, node, instance)
+---@field on_element_remove druid.event On DataList visual element created Event callback(self, index)
 ---@field on_scroll_progress_change druid.event Event triggered when scroll progress is changed; event(self, progress_value)
 ---@field scroll druid.scroll The Druid scroll component
 ---@field scroll_progress number The current progress of scroll posititon
@@ -342,6 +344,21 @@ local druid__data_list = {}
 ---@param self druid.data_list @{DataList}
 function druid__data_list.clear(self) end
 
+--- Return all currenly created components in DataList
+---@param self druid.data_list @{DataList}
+---@return druid.base_component[] List of created nodes
+function druid__data_list.get_created_components(self) end
+
+--- Return all currenly created nodes in DataList
+---@param self druid.data_list @{DataList}
+---@return Node[] List of created nodes
+function druid__data_list.get_created_nodes(self) end
+
+--- Return current data from DataList component
+---@param self druid.data_list @{DataList}
+---@return table The current data array
+function druid__data_list.get_data(self) end
+
 --- Return first index from data.
 --- It not always equals to 1
 ---@param self druid.data_list @{DataList}

druid/base/scroll.lua

@@ -560,13 +560,13 @@ end
 
 function Scroll._set_scroll_position(self, position)
 	local available_extra = self.available_pos_extra
-	position.x = helper.clamp(position.x, available_extra.x, available_extra.z)
+	local position_x = helper.clamp(position.x, available_extra.x, available_extra.z)
-	position.y = helper.clamp(position.y, available_extra.w, available_extra.y)
+	local position_y = helper.clamp(position.y, available_extra.w, available_extra.y)
 
-	if self.position.x ~= position.x or self.position.y ~= position.y then
+	if self.position.x ~= position_x or self.position.y ~= position_y then
-		self.position.x = position.x
+		self.position.x = position_x
-		self.position.y = position.y
+		self.position.y = position_y
-		gui.set_position(self.content_node, position)
+		gui.set_position(self.content_node, self.position)
 
 		self.on_scroll:trigger(self:get_context(), self.position)
 	end
@@ -708,17 +708,13 @@ function Scroll._update_size(self)
 	local content_border_extra = helper.get_border(self.content_node)
 	local stretch_size = self.style.EXTRA_STRETCH_SIZE
 
-	if self.drag.can_x then
+	local sign_x = content_size.x > self.view_size.x and 1 or -1
-		local sign = content_size.x > self.view_size.x and 1 or -1
+	content_border_extra.x = content_border_extra.x - stretch_size * sign_x
-		content_border_extra.x = content_border_extra.x - stretch_size * sign
+	content_border_extra.z = content_border_extra.z + stretch_size * sign_x
-		content_border_extra.z = content_border_extra.z + stretch_size * sign
-	end
 
-	if self.drag.can_y then
+	local sign_y = content_size.y > self.view_size.y and 1 or -1
-		local sign = content_size.y > self.view_size.y and 1 or -1
+	content_border_extra.y = content_border_extra.y + stretch_size * sign_y
-		content_border_extra.y = content_border_extra.y + stretch_size * sign
+	content_border_extra.w = content_border_extra.w - stretch_size * sign_y
-		content_border_extra.w = content_border_extra.w - stretch_size * sign
-	end
 
 	if not self.style.SMALL_CONTENT_SCROLL then
 		self.drag.can_x = content_size.x > self.view_size.x

druid/extended/data_list.lua

@@ -25,6 +25,12 @@
 --- Event triggered when scroll progress is changed; event(self, progress_value)
 -- @tfield DruidEvent on_scroll_progress_change @{DruidEvent}
 
+---On DataList visual element created Event callback(self, index, node, instance)
+-- @tfield DruidEvent on_element_add @{DruidEvent}
+
+---On DataList visual element created Event callback(self, index)
+-- @tfield DruidEvent on_element_remove @{DruidEvent}
+
 ---
 
 local const = require("druid.const")
@@ -64,6 +70,8 @@ function DataList.init(self, scroll, grid, create_function)
 	self.scroll.on_scroll:subscribe(self._check_elements, self)
 
 	self.on_scroll_progress_change = Event()
+	self.on_element_add = Event()
+	self.on_element_remove = Event()
 
 	self:set_data()
 end
@@ -89,6 +97,14 @@ function DataList.set_data(self, data)
 end
 
 
+--- Return current data from DataList component
+-- @tparam DataList self @{DataList}
+-- @treturn table The current data array
+function DataList.get_data(self)
+	return self._data
+end
+
+
 --- Add element to DataList. Currenly untested
 -- @tparam DataList self @{DataList}
 -- @tparam table data
@@ -189,6 +205,34 @@ function DataList.get_index(self, data)
 end
 
 
+--- Return all currenly created nodes in DataList
+-- @tparam DataList self @{DataList}
+-- @treturn Node[] List of created nodes
+function DataList.get_created_nodes(self)
+	local nodes = {}
+
+	for index, data in pairs(self._data_visual) do
+		nodes[index] = data.node
+	end
+
+	return nodes
+end
+
+
+--- Return all currenly created components in DataList
+-- @tparam DataList self @{DataList}
+-- @treturn druid.base_component[] List of created nodes
+function DataList.get_created_components(self)
+	local components = {}
+
+	for index, data in pairs(self._data_visual) do
+		components[index] = data.component
+	end
+
+	return components
+end
+
+
 --- Instant scroll to element with passed index
 -- @tparam DataList self @{DataList}
 -- @tparam number index
@@ -220,6 +264,7 @@ function DataList._add_at(self, index)
 	}
 
 	self:log_message("Add element at", { index = index })
+	self.on_element_add:trigger(self:get_context(), index, node, instance)
 end
 
 
@@ -233,12 +278,14 @@ function DataList._remove_at(self, index)
 	local node = self._data_visual[index].node
 	gui.delete_node(node)
 
-	if self._data_visual[index].component then
+	local instance = self._data_visual[index].component
-		self.druid:remove(self._data_visual[index].component)
+	if instance then
+		self.druid:remove(instance)
 	end
 	self._data_visual[index] = nil
 
 	self:log_message("Remove element at", { index = index })
+	self.on_element_remove:trigger(self:get_context(), index)
 end
 
 

example/example.collection

@@ -1814,3 +1814,66 @@ embedded_instances {
     z: 1.0
   }
 }
+embedded_instances {
+  id: "data_list_with_component"
+  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: \"data_list_with_component\"\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/data_list/with_component/with_component.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/example.gui_script

@@ -32,6 +32,7 @@ end
 local function show_scene(self, scene_name, text_header)
 	print("Show scene:", scene_name)
 
+	self.current_script_url = self.scene_urls[scene_name]
 	monarch.show(scene_name)
 	gui.set_enabled(gui.get_node("C_Anchor"), false)
 	gui.set_enabled(self.button_menu.node, true)
@@ -88,9 +89,9 @@ local function get_button(self, text, scene_name, script_url)
 	gui.set_enabled(root, true)
 
 	self.scene_names[scene_name] = text
+	self.scene_urls[scene_name] = script_url
 
 	self.druid:new_button(root, function()
-		self.current_script_url = script_url
 		show_scene(self, scene_name, text)
 	end):set_click_zone(self.lobby_scroll.view_node)
 
@@ -115,6 +116,7 @@ end
 local function init_lobby(self)
 	gui.set_enabled(gui.get_node("prefabs"), false)
 	self.scene_names = {}
+	self.scene_urls = {}
 
 	self.lobby_scroll = self.druid:new_scroll("lobby_view", "lobby_content")
 	self.lobby_grid = self.druid:new_dynamic_grid("lobby_content")
@@ -158,6 +160,7 @@ local function init_lobby(self)
 	self.lobby_grid:add(get_button_disabled(self, "Add/remove elements", "data_list_add_remove_nodes"))
 	self.lobby_grid:add(get_button(self, "Navigate over elements", "data_list_navigate", "/data_list/navigate/navigate.gui_script"))
 	self.lobby_grid:add(get_button(self, "Reinit data", "data_list_reinit_data", "/data_list/reinit_data/reinit_data.gui_script"))
+	self.lobby_grid:add(get_button(self, "With component", "data_list_with_component", "/data_list/with_component/with_component.gui_script"))
 
 	self.lobby_grid:add(get_title(self, "Custom components"))
 	self.lobby_grid:add(get_button(self, "Rich Input", "custom_rich_input", "/custom/rich_input/rich_input.gui_script"))

example/examples/data_list/with_component/button_component/button_component.gui

@@ -0,0 +1,249 @@
+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: 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: 450.0
+    y: 80.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: "root"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 20.0
+    y: 20.0
+    z: 20.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
+  custom_type: 0
+}
+nodes {
+  position {
+    x: -50.0
+    y: 8.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: 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: "Record: 1"
+  font: "game"
+  id: "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: 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: 0.0
+  shadow_alpha: 0.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+  custom_type: 0
+}
+nodes {
+  position {
+    x: 175.0
+    y: 6.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: 49.0
+    y: 49.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/back_green"
+  id: "icon"
+  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
+  custom_type: 0
+}
+nodes {
+  position {
+    x: 0.0
+    y: 2.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: 21.0
+    y: 20.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/checkmark"
+  id: "checkbox"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "icon"
+  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
+  custom_type: 0
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT
+max_nodes: 512

example/examples/data_list/with_component/button_component/button_component.lua

@@ -0,0 +1,76 @@
+--- For component interest functions
+--- see https://github.com/Insality/druid/blob/develop/docs_md/02-creating_custom_components.md
+--- Require this component in you gui file:
+--- local ButtonComponent = require("example.examples.data_list.with_component.button_component.button_component")
+--- And create this component via:
+--- self.button_component = self.druid:new(ButtonComponent, template, nodes)
+
+local Event = require("druid.event")
+local component = require("druid.component")
+
+---@class button_component: druid.base_component
+---@field root node
+---@field text druid.text
+---@field druid druid_instance
+local ButtonComponent = component.create("button_component")
+
+local SCHEME = {
+	ROOT = "root",
+	TEXT = "text",
+	ICON = "icon",
+	CHECKBOX = "checkbox"
+}
+
+
+---@param template string
+---@param nodes table<hash, node>
+function ButtonComponent:init(template, nodes)
+	self:set_template(template)
+	self:set_nodes(nodes)
+	self.druid = self:get_druid()
+
+	self.root = self:get_node(SCHEME.ROOT)
+	self.text = self.druid:new_text(SCHEME.TEXT)
+	self.checkbox = self:get_node(SCHEME.CHECKBOX)
+
+	self.button = self.druid:new_button(self.root, self._on_click)
+
+	self.on_click = Event()
+end
+
+
+function ButtonComponent:set_data(data)
+	self._data = data
+	self.text:set_to("Element: " .. data.value)
+	self:set_checked(self._data.is_checked)
+end
+
+
+function ButtonComponent:get_data()
+	return self._data
+end
+
+
+function ButtonComponent:set_checked(state)
+	self._data.is_checked = state
+	gui.set_enabled(self.checkbox, state)
+end
+
+
+function ButtonComponent:set_click_zone(node)
+	self.button:set_click_zone(node)
+end
+
+
+function ButtonComponent:on_remove()
+	self.on_click:clear()
+end
+
+
+function ButtonComponent:_on_click()
+	self.on_click:trigger(self)
+end
+
+
+
+return ButtonComponent

example/examples/data_list/with_component/with_component.collection

@@ -0,0 +1,37 @@
+name: "data_list_with_component"
+scale_along_z: 0
+embedded_instances {
+  id: "go"
+  data: "components {\n"
+  "  id: \"data_list_with_component\"\n"
+  "  component: \"/example/examples/data_list/with_component/with_component.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/data_list/with_component/with_component.gui

@@ -0,0 +1,528 @@
+script: "/example/examples/data_list/with_component/with_component.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: 415.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: 830.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
+  custom_type: 0
+}
+nodes {
+  position {
+    x: 0.0
+    y: 370.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: "Click to select component in DataList"
+  font: "game"
+  id: "text_hint_horizontal"
+  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
+  custom_type: 0
+}
+nodes {
+  position {
+    x: 0.0
+    y: 200.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: 450.0
+    y: 400.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_view"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_N
+  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_STENCIL
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_MANUAL
+  custom_type: 0
+}
+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: 450.0
+    y: 400.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 0.6
+    z: 0.4
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "data_list_content"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_N
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "data_list_view"
+  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
+  custom_type: 0
+}
+nodes {
+  position {
+    x: 0.0
+    y: 157.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_component"
+  parent: "root"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  template: "/example/examples/data_list/with_component/button_component/button_component.gui"
+  template_node_child: false
+  custom_type: 0
+}
+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: 450.0
+    y: 80.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_component/root"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "button_component"
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 20.0
+    y: 20.0
+    z: 20.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: true
+  size_mode: SIZE_MODE_MANUAL
+  custom_type: 0
+}
+nodes {
+  position {
+    x: -50.0
+    y: 8.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: 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: "Record: 1"
+  font: "game"
+  id: "button_component/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: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "button_component/root"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 0.0
+  shadow_alpha: 0.0
+  template_node_child: true
+  text_leading: 1.0
+  text_tracking: 0.0
+  custom_type: 0
+}
+nodes {
+  position {
+    x: 175.0
+    y: 6.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: 49.0
+    y: 49.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/back_green"
+  id: "button_component/icon"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "button_component/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: true
+  size_mode: SIZE_MODE_AUTO
+  custom_type: 0
+}
+nodes {
+  position {
+    x: 0.0
+    y: 2.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: 21.0
+    y: 20.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/checkmark"
+  id: "button_component/checkbox"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "button_component/icon"
+  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: true
+  size_mode: SIZE_MODE_AUTO
+  custom_type: 0
+}
+layers {
+  name: "image"
+}
+layers {
+  name: "text"
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT
+max_nodes: 512

example/examples/data_list/with_component/with_component.gui_script

@@ -0,0 +1,89 @@
+local druid = require("druid.druid")
+
+local ButtonComponent = require("example.examples.data_list.with_component.button_component.button_component")
+
+
+local function on_element_add(self, index, node, instance)
+	print("Add element from DataList at index", index, node)
+end
+
+
+local function on_element_remove(self, index)
+	print("Remove element from DataList at index", index)
+end
+
+
+local function on_button_click(self, button)
+	-- Since we change data of other records, we need to change raw data and change state of
+	-- created components
+	local data = self.data_list:get_data()
+	for _, entry in pairs(data) do
+		entry.is_checked = false
+	end
+
+	-- This is way to access all current created DataList components
+	local components = self.data_list:get_created_components()
+	for _, component in pairs(components) do
+		component:set_checked(component == button)
+	end
+end
+
+
+local function create_element(self, data)
+	local nodes = gui.clone_tree(self.prefab)
+	-- Create custom component to pass it to DataList
+	local button = self.druid:new(ButtonComponent, "button_component", nodes)
+	-- Prefab is disabled, so need to enable it for new component
+	gui.set_enabled(button.root, true)
+	button:set_data(data)
+	button:set_click_zone(self.scroll.view_node)
+	button.on_click:subscribe(on_button_click, self)
+
+	return button.root, button
+end
+
+
+function init(self)
+	self.druid = druid.new(self)
+
+	self.prefab = gui.get_node("button_component/root")
+	gui.set_enabled(self.prefab, false)
+
+	self.scroll = self.druid:new_scroll("data_list_view", "data_list_content")
+	self.scroll:set_horizontal_scroll(false)
+	self.grid = self.druid:new_static_grid("data_list_content", self.prefab, 1)
+	self.data_list = self.druid:new_data_list(self.scroll, self.grid, create_element)
+
+	self.data = {}
+	for i = 1, 100 do
+		table.insert(self.data, {
+			is_checked = false,
+			value = i
+		})
+	end
+
+	self.data_list:set_data(self.data)
+	-- Custom callbacks for more management in DataList
+	self.data_list.on_element_add:subscribe(on_element_add)
+	self.data_list.on_element_remove:subscribe(on_element_remove)
+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