Update examples

README.md

@@ -277,6 +277,6 @@ If you have any issues, questions or suggestions please [create an issue](https:
 
 ## ❤️ Support project ❤️
 
-Please support me if you like this project! It will help me keep engaged to update **Druid** and make it even better!
+Your donation helps me stay engaged in creating valuable projects for **Defold**. If you appreciate what I'm doing, please consider supporting me!
 
 [![Github-sponsors](https://img.shields.io/badge/sponsor-30363D?style=for-the-badge&logo=GitHub-Sponsors&logoColor=#EA4AAA)](https://github.com/sponsors/insality) [![Ko-Fi](https://img.shields.io/badge/Ko--fi-F16061?style=for-the-badge&logo=ko-fi&logoColor=white)](https://ko-fi.com/insality) [![BuyMeACoffee](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-ffdd00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black)](https://www.buymeacoffee.com/insality)

druid/base/static_grid.lua

@@ -188,23 +188,9 @@ end
 -- @tparam[opt=SHIFT.RIGHT] number shift_policy How shift nodes, if required. See const.SHIFT
 -- @tparam[opt=false] boolean is_instant If true, update node positions instantly
 function StaticGrid.add(self, item, index, shift_policy, is_instant)
-	shift_policy = shift_policy or const.SHIFT.RIGHT
 	index = index or ((self.last_index or 0) + 1)
 
-	if self.nodes[index] then
+	helper.insert_with_shift(self.nodes, item, index, shift_policy)
-		if shift_policy == const.SHIFT.RIGHT then
-			for i = self.last_index, index, -1 do
-				self.nodes[i + 1] = self.nodes[i]
-			end
-		end
-		if shift_policy == const.SHIFT.LEFT then
-			for i = self.first_index, index do
-				self.nodes[i - 1] = self.nodes[i]
-			end
-		end
-	end
-
-	self.nodes[index] = item
 	gui.set_parent(item, self.parent)
 
 	-- Add new item instantly in new pos. Break update function for correct positioning
@@ -227,22 +213,10 @@ end
 -- @tparam[opt=false] boolean is_instant If true, update node positions instantly
 -- @treturn Node The deleted gui node from grid
 function StaticGrid.remove(self, index, shift_policy, is_instant)
-	shift_policy = shift_policy or const.SHIFT.RIGHT
 	assert(self.nodes[index], "No grid item at given index " .. index)
 
 	local remove_node = self.nodes[index]
-	self.nodes[index] = nil
+	helper.remove_with_shift(self.nodes, index, shift_policy)
-
-	if shift_policy == const.SHIFT.RIGHT then
-		for i = index, self.last_index do
-			self.nodes[i] = self.nodes[i + 1]
-		end
-	end
-	if shift_policy == const.SHIFT.LEFT then
-		for i = index, self.first_index, -1 do
-			self.nodes[i] = self.nodes[i - 1]
-		end
-	end
 
 	self:_update(is_instant)
 

druid/custom/rich_text/module/rt.lua

@@ -3,7 +3,7 @@
 -- Modified by: Insality
 
 local helper = require("druid.helper")
-local parser = require("druid.custom.rich_text.rich_text.parse")
+local parser = require("druid.custom.rich_text.module.rt_parse")
 local utf8_lua = require("druid.system.utf8")
 local utf8 = utf8 or utf8_lua
 
@@ -462,6 +462,7 @@ function M._update_nodes(lines, settings)
 				gui.set_shadow(node, word.shadow)
 				gui.set_text(node, word.text)
 				gui.set_color(node, word.color or word.text_color)
+				gui.set_font(node, word.font or settings.font)
 			end
 			word.node = node
 			gui.set_enabled(node, true)

druid/custom/rich_text/module/rt_parse.lua

@@ -2,7 +2,7 @@
 -- Author: Britzl
 -- Modified by: Insality
 
-local tags = require("druid.custom.rich_text.rich_text.tags")
+local tags = require("druid.custom.rich_text.module.rt_tags")
 local utf8_lua = require("druid.system.utf8")
 local utf8 = utf8 or utf8_lua
 

druid/custom/rich_text/module/rt_tags.lua

@@ -2,7 +2,7 @@
 -- Author: Britzl
 -- Modified by: Insality
 
-local color = require("druid.custom.rich_text.rich_text.color")
+local color = require("druid.custom.rich_text.module.rt_color")
 
 local M = {}
 
@@ -41,6 +41,9 @@ local function split(s, token)
 end
 
 
+-- Format: <color=[#]{HEX_VALUE}>{Text}</color>
+-- Format: <color={COLOR_NAME}>{Text}</color>
+-- Example: <color=FF0000>Rich Text</color>
 M.register("color", function(params, settings)
 	settings.color = color.parse(params)
 end)
@@ -71,16 +74,22 @@ M.register("a", function(params, settings)
 end)
 
 
+-- Example: </br>
 M.register("br", function(params, settings)
 	settings.br = true
 end)
 
 
+-- Example: <nobr></nobr>
 M.register("nobr", function(params, settings)
 	settings.nobr = true
 end)
 
 
+-- Format: <img={animation_id},[width],[height]/>
+-- Example: <img=logo/>
+-- Example: <img=logo,48/>
+-- Example: <img=logo,48,48/>
 M.register("img", function(params, settings)
 	local texture_and_anim, params = split(params, ",")
 	local width, height

druid/custom/rich_text/rich_text.lua

@@ -1,5 +1,5 @@
 local component = require("druid.component")
-local rich_text = require("druid.custom.rich_text.rich_text.richtext")
+local rich_text = require("druid.custom.rich_text.module.rt")
 
 ---@class druid.rich_text
 local RichText = component.create("rich_text")
@@ -28,6 +28,7 @@ function RichText:init(template, nodes)
 end
 
 
+---@param text string
 ---@return rich_text.word[], rich_text.lines_metrics
 function RichText:set_text(text)
 	self:clean()
@@ -64,6 +65,7 @@ end
 
 function RichText:_get_settings()
 	return {
+		-- General settings
 		adjust_scale = 1,
 		parent = self.root,
 		width = self.root_size.x,
@@ -71,6 +73,7 @@ function RichText:_get_settings()
 		text_prefab = self.text_prefab,
 		node_prefab = self.icon_prefab,
 
+		-- Text Settings
 		size = gui.get_scale(self.text_prefab).x,
 		shadow = gui.get_shadow(self.text_prefab),
 		outline = gui.get_outline(self.text_prefab),
@@ -78,6 +81,7 @@ function RichText:_get_settings()
 		text_leading = gui.get_leading(self.text_prefab),
 		is_multiline = gui.get_line_break(self.text_prefab),
 
+		-- Image settings
 		combine_words = false,
 		image_pixel_grid_snap = false,
 		node_scale = gui.get_scale(self.icon_prefab),
@@ -88,12 +92,10 @@ end
 
 
 function RichText:clean()
-	if not self._words then
+	if self._words then
-		return
-	end
-
 		rich_text.remove(self._words)
 		self._words = nil
+	end
 end
 
 

druid/extended/data_list.lua

@@ -115,19 +115,7 @@ function DataList.add(self, data, index, shift_policy)
 	index = index or self._data_last_index + 1
 	shift_policy = shift_policy or const.SHIFT.RIGHT
 
-	if self._data[index] then
+	helper.insert_with_shift(self._data, data, index, shift_policy)
-		if shift_policy == const.SHIFT.RIGHT then
-			for i = self._data_last_index, index, -1 do
-				self._data[i + 1] = self._data[i]
-			end
-		end
-		if shift_policy == const.SHIFT.LEFT then
-			for i = self._data_first_index, index do
-				self._data[i - 1] = self._data[i]
-			end
-		end
-	end
-	self._data[index] = data
 	self:_update_data_info()
 	self:_check_elements()
 
@@ -141,8 +129,10 @@ end
 -- @tparam number shift_policy The constant from const.SHIFT.*
 -- @local
 function DataList.remove(self, index, shift_policy)
-	table.remove(self._data, index)
+	--self:_refresh()
-	self:_refresh()
+
+	helper.remove_with_shift(self._data, index, shift_policy)
+	self:_update_data_info()
 
 	self:log_message("Remove element", { index = index })
 end
@@ -156,7 +146,8 @@ end
 function DataList.remove_by_data(self, data, shift_policy)
 	local index = helper.contains(self._data, data)
 	if index then
-		table.remove(self._data, index)
+		helper.remove_with_shift(self._data, index, shift_policy)
+		self:_update_data_info()
 		self:_refresh()
 	end
 end
@@ -166,6 +157,7 @@ end
 -- @tparam DataList self @{DataList}
 function DataList.clear(self)
 	self._data = {}
+	self:_update_data_info()
 	self:_refresh()
 end
 
@@ -289,7 +281,7 @@ function DataList._remove_at(self, index)
 end
 
 
---- Fully refresh all DataList elements
+--- Refresh all elements in DataList
 -- @tparam DataList self @{DataList}
 -- @local
 function DataList._refresh(self)
@@ -389,8 +381,8 @@ function DataList._update_data_info(self)
 	end
 
 	if self._data_length == 0 then
-		self._data_first_index = 1
+		self._data_first_index = 0
-		self._data_last_index = 1
+		self._data_last_index = 0
 	end
 end
 

druid/helper.lua

@@ -354,6 +354,53 @@ function M.get_text_metrics_from_node(text_node)
 end
 
 
+function M.insert_with_shift(array, item, index, shift_policy)
+	shift_policy = shift_policy or const.SHIFT.RIGHT
+
+	local len = #array
+	index = index or len + 1
+
+	if array[index] and shift_policy ~= const.SHIFT.NO_SHIFT then
+		local check_index = index
+		local next_element = array[check_index]
+		while next_element or (check_index >= 1 and check_index <= len) do
+			check_index = check_index + shift_policy
+			local check_element = array[check_index]
+			array[check_index] = next_element
+			next_element = check_element
+		end
+	end
+
+	array[index] = item
+
+	return item
+end
+
+
+function M.remove_with_shift(array, index, shift_policy)
+	shift_policy = shift_policy or const.SHIFT.RIGHT
+
+	local len = #array
+	index = index or len
+
+	local item = array[index]
+	array[index] = nil
+
+	if shift_policy ~= const.SHIFT.NO_SHIFT then
+		local check_index = index + shift_policy
+		local next_element = array[check_index]
+		while next_element or (check_index >= 0 and check_index <= len + 1) do
+			array[check_index - shift_policy] = next_element
+			array[check_index] = nil
+			check_index = check_index + shift_policy
+			next_element = array[check_index]
+		end
+	end
+
+	return item
+end
+
+
 --- Show deprecated message. Once time per message
 -- @function helper.deprecated
 -- @tparam string message The deprecated message

example/assets/fonts/another_font.font

@@ -0,0 +1,17 @@
+font: "/builtins/fonts/vera_mo_bd.ttf"
+material: "/builtins/fonts/font-df.material"
+size: 40
+antialias: 1
+alpha: 1.0
+outline_alpha: 0.0
+outline_width: 0.0
+shadow_alpha: 0.0
+shadow_blur: 0
+shadow_x: 0.0
+shadow_y: 0.0
+extra_characters: ""
+output_format: TYPE_DISTANCE_FIELD
+all_chars: false
+cache_width: 0
+cache_height: 0
+render_mode: MODE_MULTI_LAYER

example/example.collection

@@ -150,7 +150,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/general/overview/overview.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -215,7 +216,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/general/buttons/buttons.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -280,7 +282,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/texts/texts_general/texts_general.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -345,7 +348,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/general/sliders/sliders.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -410,7 +414,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/general/grid/grid.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -475,7 +480,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/general/input/input.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -540,7 +546,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/general/scroll/scroll.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -605,7 +612,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/general/data_list/data_list.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -670,7 +678,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/data_list/static_grid/static_grid.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -735,7 +744,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/data_list/dynamic_grid/dynamic_grid.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -800,7 +810,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/data_list/navigate/navigate.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -865,7 +876,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/data_list/add_remove_nodes/add_remove_nodes.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -930,7 +942,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/grid/static_grid/static_grid.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -995,7 +1008,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/grid/grid_animations/grid_animations.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -1060,7 +1074,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/grid/static_grid_dynamic_pos/static_grid_dynamic_pos.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -1125,7 +1140,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/system/whitelist_blacklist/whitelist_blacklist.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -1190,7 +1206,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/texts/texts_adjust/texts_adjust.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -1255,7 +1272,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/system/message_input/message_input.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -1320,7 +1338,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/custom/rich_input/rich_input.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -1385,7 +1404,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/custom/pin_knob/pin_knob.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -1450,7 +1470,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/system/inner_templates/inner_templates.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -1515,7 +1536,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/general/swipe/swipe.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -1580,7 +1602,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/general/drag/drag.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -1645,7 +1668,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/general/checkboxes/checkboxes.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -1710,7 +1734,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/data_list/reinit_data/reinit_data.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -1775,7 +1800,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/general/layout/layout.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -1840,7 +1866,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/general/hotkey/hotkey.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -1905,7 +1932,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/data_list/with_component/with_component.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -1970,7 +1998,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/layout/layout_fit/layout_fit.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -2035,7 +2064,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/general/progress_bar/progress_bar.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -2100,7 +2130,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/system/late_init_check/late_init_check.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -2165,7 +2196,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/general/hover/hover.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -2230,7 +2262,8 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/texts/lang_text/lang_text.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -2295,7 +2328,140 @@ embedded_instances {
   "  id: \"collectionfactory\"\n"
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/example/examples/custom/rich_text/rich_text.collection\\\"\\n"
-  "load_dynamically: false\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: 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
+  }
+}
+embedded_instances {
+  id: "data_list_manage_data"
+  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_manage_data\"\n"
+  "    type: PROPERTY_TYPE_HASH\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"popup\"\n"
+  "    value: \"true\"\n"
+  "    type: PROPERTY_TYPE_BOOLEAN\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"collectionfactory\"\n"
+  "  type: \"collectionfactory\"\n"
+  "  data: \"prototype: \\\"/example/examples/data_list/manage_data/manage_data.collection\\\"\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: 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
+  }
+}
+embedded_instances {
+  id: "rich_text_texts"
+  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: \"rich_text_texts\"\n"
+  "    type: PROPERTY_TYPE_HASH\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"popup\"\n"
+  "    value: \"true\"\n"
+  "    type: PROPERTY_TYPE_BOOLEAN\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"collectionfactory\"\n"
+  "  type: \"collectionfactory\"\n"
+  "  data: \"prototype: \\\"/example/examples/rich_text/rich_text_texts/rich_text_texts.collection\\\"\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"

example/example.gui

@@ -67,6 +67,8 @@ nodes {
   template_node_child: false
   size_mode: SIZE_MODE_MANUAL
   custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
@@ -88,8 +90,8 @@ nodes {
     w: 1.0
   }
   size {
-    x: 1.0
+    x: 200.0
-    y: 1.0
+    y: 100.0
     z: 0.0
     w: 1.0
   }
@@ -123,6 +125,8 @@ nodes {
   template_node_child: false
   size_mode: SIZE_MODE_AUTO
   custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
@@ -144,8 +148,8 @@ nodes {
     w: 1.0
   }
   size {
-    x: 1.0
+    x: 200.0
-    y: 1.0
+    y: 100.0
     z: 0.0
     w: 1.0
   }
@@ -179,6 +183,8 @@ nodes {
   template_node_child: false
   size_mode: SIZE_MODE_AUTO
   custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
@@ -235,6 +241,8 @@ nodes {
   template_node_child: false
   size_mode: SIZE_MODE_MANUAL
   custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
@@ -291,6 +299,8 @@ nodes {
   template_node_child: false
   size_mode: SIZE_MODE_MANUAL
   custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
@@ -312,8 +322,8 @@ nodes {
     w: 1.0
   }
   size {
-    x: 1.0
+    x: 200.0
-    y: 1.0
+    y: 100.0
     z: 0.0
     w: 1.0
   }
@@ -347,6 +357,8 @@ nodes {
   template_node_child: false
   size_mode: SIZE_MODE_AUTO
   custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
@@ -403,11 +415,13 @@ nodes {
   template_node_child: false
   size_mode: SIZE_MODE_MANUAL
   custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
     x: 0.0
-    y: 0.0
+    y: -13.0
     z: 0.0
     w: 1.0
   }
@@ -461,12 +475,14 @@ nodes {
   layer: ""
   inherit_alpha: true
   alpha: 1.0
-  outline_alpha: 1.0
+  outline_alpha: 0.75
   shadow_alpha: 0.0
   template_node_child: false
   text_leading: 1.0
   text_tracking: 0.0
   custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
@@ -523,6 +539,8 @@ nodes {
   template_node_child: false
   size_mode: SIZE_MODE_MANUAL
   custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
@@ -579,6 +597,8 @@ nodes {
   template_node_child: false
   size_mode: SIZE_MODE_MANUAL
   custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
@@ -637,12 +657,14 @@ nodes {
   layer: ""
   inherit_alpha: true
   alpha: 1.0
-  outline_alpha: 1.0
+  outline_alpha: 0.75
   shadow_alpha: 0.0
   template_node_child: false
   text_leading: 1.0
   text_tracking: 0.0
   custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
@@ -664,8 +686,8 @@ nodes {
     w: 1.0
   }
   size {
-    x: 1.0
+    x: 200.0
-    y: 1.0
+    y: 100.0
     z: 0.0
     w: 1.0
   }
@@ -699,6 +721,8 @@ nodes {
   template_node_child: false
   size_mode: SIZE_MODE_AUTO
   custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
@@ -755,6 +779,8 @@ nodes {
   template_node_child: false
   size_mode: SIZE_MODE_MANUAL
   custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
@@ -796,6 +822,7 @@ nodes {
   template: "/example/templates/button.gui"
   template_node_child: false
   custom_type: 0
+  enabled: true
 }
 nodes {
   position {
@@ -854,6 +881,8 @@ nodes {
   template_node_child: true
   size_mode: SIZE_MODE_MANUAL
   custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
@@ -923,6 +952,8 @@ nodes {
   text_leading: 1.0
   text_tracking: 0.0
   custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
@@ -964,6 +995,7 @@ nodes {
   template: "/example/templates/button.gui"
   template_node_child: false
   custom_type: 0
+  enabled: true
 }
 nodes {
   position {
@@ -1022,6 +1054,8 @@ nodes {
   template_node_child: true
   size_mode: SIZE_MODE_MANUAL
   custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
@@ -1091,6 +1125,8 @@ nodes {
   text_leading: 1.0
   text_tracking: 0.0
   custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
@@ -1132,6 +1168,7 @@ nodes {
   template: "/example/templates/button.gui"
   template_node_child: false
   custom_type: 0
+  enabled: true
 }
 nodes {
   position {
@@ -1190,6 +1227,8 @@ nodes {
   template_node_child: true
   size_mode: SIZE_MODE_MANUAL
   custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
@@ -1259,6 +1298,8 @@ nodes {
   text_leading: 1.0
   text_tracking: 0.0
   custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
@@ -1323,6 +1364,8 @@ nodes {
   text_leading: 1.0
   text_tracking: 0.0
   custom_type: 0
+  enabled: true
+  visible: true
 }
 layers {
   name: "image"

example/example.gui_script

@@ -187,12 +187,12 @@ local function init_lobby(self)
 	self.lobby_grid:add(get_button_disabled(self, "Scroll binding", "scroll_scene"))
 	self.lobby_grid:add(get_button(self, "Add/Remove animations", "grid_animations", "/grid/grid_animations/grid_animations.gui_script"))
 
-	self.lobby_grid:add(get_title(self, "Data list / Infinity scroll"))
+	self.lobby_grid:add(get_title(self, "Data list | Infinity scroll"))
 	self.lobby_grid:add(get_button(self, "With static grid", "data_list_static_grid", "/data_list/static_grid/static_grid.gui_script"))
 	self.lobby_grid:add(get_button(self, "With dynamic grid", "data_list_dynamic_grid", "/data_list/dynamic_grid/dynamic_grid.gui_script"))
-	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, "Add / remove data", "data_list_manage_data", "/data_list/manage_data/manage_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, "Layouts"))
@@ -203,6 +203,9 @@ local function init_lobby(self)
 	self.lobby_grid:add(get_button(self, "Pin Knob", "custom_pin_knob", "/custom/pin_knob/pin_knob.gui_script"))
 	self.lobby_grid:add(get_button(self, "Rich Text", "custom_rich_text", "/custom/rich_text/rich_text.gui_script"))
 
+	self.lobby_grid:add(get_title(self, "Rich Texts"))
+	self.lobby_grid:add(get_button(self, "Rich Text Texts", "rich_text_texts", "/custom/rich_text_texts/rich_text_texts.gui_script"))
+
 	self.lobby_grid:add(get_title(self, "System"))
 	self.lobby_grid:add(get_button_disabled(self, "Styles"))
 	self.lobby_grid:add(get_button(self, "Whitelist / Blacklist", "system_whitelist_blacklist", "/system/whitelist_blacklist/whitelist_blacklist.gui_script"))

example/examples/custom/rich_text/rich_text.gui

@@ -212,9 +212,9 @@ nodes {
     w: 1.0
   }
   color {
-    x: 0.8
+    x: 0.9490196
-    y: 1.0
+    y: 0.9490196
-    z: 1.0
+    z: 0.9490196
     w: 1.0
   }
   type: TYPE_TEXT
@@ -226,15 +226,15 @@ nodes {
   yanchor: YANCHOR_NONE
   pivot: PIVOT_N
   outline {
-    x: 0.0
+    x: 0.2
-    y: 0.2
+    y: 0.0
     z: 0.2
     w: 1.0
   }
   shadow {
-    x: 0.101960786
+    x: 0.2
-    y: 0.3019608
+    y: 0.2
-    z: 0.3019608
+    z: 0.2
     w: 1.0
   }
   adjust_mode: ADJUST_MODE_FIT
@@ -243,8 +243,8 @@ nodes {
   layer: ""
   inherit_alpha: true
   alpha: 1.0
-  outline_alpha: 0.5
+  outline_alpha: 0.75
-  shadow_alpha: 0.1
+  shadow_alpha: 0.25
   template_node_child: false
   text_leading: 1.0
   text_tracking: 0.0
@@ -564,9 +564,9 @@ nodes {
     w: 1.0
   }
   color {
-    x: 0.8
+    x: 0.9490196
-    y: 1.0
+    y: 0.9490196
-    z: 1.0
+    z: 0.9490196
     w: 1.0
   }
   type: TYPE_TEXT
@@ -578,15 +578,15 @@ nodes {
   yanchor: YANCHOR_NONE
   pivot: PIVOT_N
   outline {
-    x: 0.0
+    x: 0.2
-    y: 0.2
+    y: 0.0
     z: 0.2
     w: 1.0
   }
   shadow {
-    x: 0.101960786
+    x: 0.2
-    y: 0.3019608
+    y: 0.2
-    z: 0.3019608
+    z: 0.2
     w: 1.0
   }
   adjust_mode: ADJUST_MODE_FIT
@@ -595,8 +595,8 @@ nodes {
   layer: ""
   inherit_alpha: true
   alpha: 1.0
-  outline_alpha: 0.5
+  outline_alpha: 0.75
-  shadow_alpha: 0.1
+  shadow_alpha: 0.25
   template_node_child: false
   text_leading: 1.0
   text_tracking: 0.0
@@ -989,9 +989,9 @@ nodes {
     w: 1.0
   }
   color {
-    x: 0.8
+    x: 0.9490196
-    y: 1.0
+    y: 0.9490196
-    z: 1.0
+    z: 0.9490196
     w: 1.0
   }
   type: TYPE_TEXT
@@ -1003,15 +1003,15 @@ nodes {
   yanchor: YANCHOR_NONE
   pivot: PIVOT_N
   outline {
-    x: 0.0
+    x: 0.2
-    y: 0.2
+    y: 0.0
     z: 0.2
     w: 1.0
   }
   shadow {
-    x: 0.101960786
+    x: 0.2
-    y: 0.3019608
+    y: 0.2
-    z: 0.3019608
+    z: 0.2
     w: 1.0
   }
   adjust_mode: ADJUST_MODE_FIT
@@ -1020,8 +1020,8 @@ nodes {
   layer: ""
   inherit_alpha: true
   alpha: 1.0
-  outline_alpha: 0.5
+  outline_alpha: 0.75
-  shadow_alpha: 0.1
+  shadow_alpha: 0.25
   template_node_child: false
   text_leading: 1.0
   text_tracking: 0.0
@@ -1347,9 +1347,9 @@ nodes {
     w: 1.0
   }
   color {
-    x: 0.8
+    x: 0.9490196
-    y: 1.0
+    y: 0.9490196
-    z: 1.0
+    z: 0.9490196
     w: 1.0
   }
   type: TYPE_TEXT
@@ -1361,15 +1361,15 @@ nodes {
   yanchor: YANCHOR_NONE
   pivot: PIVOT_N
   outline {
-    x: 0.0
+    x: 0.2
-    y: 0.2
+    y: 0.0
     z: 0.2
     w: 1.0
   }
   shadow {
-    x: 0.101960786
+    x: 0.2
-    y: 0.3019608
+    y: 0.2
-    z: 0.3019608
+    z: 0.2
     w: 1.0
   }
   adjust_mode: ADJUST_MODE_FIT
@@ -1378,8 +1378,8 @@ nodes {
   layer: ""
   inherit_alpha: true
   alpha: 1.0
-  outline_alpha: 0.5
+  outline_alpha: 0.75
-  shadow_alpha: 0.1
+  shadow_alpha: 0.25
   template_node_child: false
   text_leading: 1.0
   text_tracking: 0.0
@@ -2287,9 +2287,9 @@ nodes {
     w: 1.0
   }
   color {
-    x: 0.8
+    x: 0.9490196
-    y: 1.0
+    y: 0.9490196
-    z: 1.0
+    z: 0.9490196
     w: 1.0
   }
   type: TYPE_TEXT
@@ -2301,15 +2301,15 @@ nodes {
   yanchor: YANCHOR_NONE
   pivot: PIVOT_N
   outline {
-    x: 0.0
+    x: 0.2
-    y: 0.2
+    y: 0.0
     z: 0.2
     w: 1.0
   }
   shadow {
-    x: 0.101960786
+    x: 0.2
-    y: 0.3019608
+    y: 0.2
-    z: 0.3019608
+    z: 0.2
     w: 1.0
   }
   adjust_mode: ADJUST_MODE_FIT
@@ -2318,8 +2318,8 @@ nodes {
   layer: ""
   inherit_alpha: true
   alpha: 1.0
-  outline_alpha: 0.5
+  outline_alpha: 0.75
-  shadow_alpha: 0.1
+  shadow_alpha: 0.25
   template_node_child: false
   text_leading: 1.0
   text_tracking: 0.0
@@ -5062,9 +5062,9 @@ nodes {
     w: 1.0
   }
   color {
-    x: 0.8
+    x: 0.9490196
-    y: 1.0
+    y: 0.9490196
-    z: 1.0
+    z: 0.9490196
     w: 1.0
   }
   type: TYPE_TEXT
@@ -5076,15 +5076,15 @@ nodes {
   yanchor: YANCHOR_NONE
   pivot: PIVOT_N
   outline {
-    x: 0.0
+    x: 0.2
-    y: 0.2
+    y: 0.0
     z: 0.2
     w: 1.0
   }
   shadow {
-    x: 0.101960786
+    x: 0.2
-    y: 0.3019608
+    y: 0.2
-    z: 0.3019608
+    z: 0.2
     w: 1.0
   }
   adjust_mode: ADJUST_MODE_FIT
@@ -5093,8 +5093,8 @@ nodes {
   layer: ""
   inherit_alpha: true
   alpha: 1.0
-  outline_alpha: 0.5
+  outline_alpha: 0.75
-  shadow_alpha: 0.1
+  shadow_alpha: 0.25
   template_node_child: false
   text_leading: 1.0
   text_tracking: 0.0

example/examples/data_list/manage_data/manage_data.collection

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

@@ -0,0 +1,774 @@
+script: "/example/examples/data_list/manage_data/manage_data.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
+  enabled: true
+  visible: true
+}
+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: "Add nodes and remove it by click on them"
+  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: true
+  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
+  enabled: true
+  visible: true
+}
+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: 300.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
+  enabled: true
+  visible: true
+}
+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: 300.0
+    y: 400.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_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
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: -110.0
+    y: 270.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_add_first"
+  parent: "root"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  template: "/example/templates/button.gui"
+  template_node_child: false
+  custom_type: 0
+  enabled: true
+}
+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: 150.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_first/button"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "button_add_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
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+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: "Add First"
+  font: "game"
+  id: "button_add_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_add_first/button"
+  layer: "text"
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 0.0
+  shadow_alpha: 0.78
+  overridden_fields: 4
+  overridden_fields: 8
+  overridden_fields: 36
+  template_node_child: true
+  text_leading: 0.8
+  text_tracking: 0.0
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: 110.0
+    y: 270.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_add_last"
+  parent: "root"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  template: "/example/templates/button.gui"
+  template_node_child: false
+  custom_type: 0
+  enabled: true
+}
+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: 150.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_last/button"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "button_add_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
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+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: "Add Last"
+  font: "game"
+  id: "button_add_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_add_last/button"
+  layer: "text"
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 0.0
+  shadow_alpha: 0.78
+  overridden_fields: 4
+  overridden_fields: 8
+  overridden_fields: 36
+  template_node_child: true
+  text_leading: 0.8
+  text_tracking: 0.0
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: 385.0
+    y: 139.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_prefab"
+  parent: "root"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  template: "/example/templates/button.gui"
+  template_node_child: false
+  custom_type: 0
+  enabled: true
+}
+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: 140.0
+    y: 140.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_prefab/button"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "button_prefab"
+  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
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+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: 150.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: "Element"
+  font: "game"
+  id: "button_prefab/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: true
+  parent: "button_prefab/button"
+  layer: "text"
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 0.0
+  shadow_alpha: 0.78
+  overridden_fields: 4
+  overridden_fields: 8
+  overridden_fields: 18
+  overridden_fields: 36
+  template_node_child: true
+  text_leading: 0.8
+  text_tracking: 0.0
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+layers {
+  name: "image"
+}
+layers {
+  name: "text"
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT
+max_nodes: 512

example/examples/data_list/manage_data/manage_data.gui_script

@@ -0,0 +1,79 @@
+local druid = require("druid.druid")
+
+
+---@class script_manage_data
+---@field data_list druid.data_list
+---@field grid druid.static_grid
+
+---@param self script_manage_data
+local function create_element(self, data)
+	local nodes = gui.clone_tree(self.prefab)
+	local root = nodes["button_prefab/button"]
+	gui.set_text(nodes["button_prefab/text"], "Element " .. data)
+	gui.set_enabled(root, true)
+
+	local button = self.druid:new_button(root, function()
+		self.data_list:remove_by_data(data)
+	end)
+	button:set_click_zone(self.scroll.view_node)
+	return root, button
+end
+
+
+local index = 0
+---@param self script_manage_data
+local function on_add_first(self)
+	--index = index + 1
+	--self.data_list:add(index, 1)
+end
+
+
+---@param self script_manage_data
+local function on_add_last(self)
+	index = index + 1
+	self.data_list:add(index)
+end
+
+
+---@param self script_manage_data
+function init(self)
+	self.druid = druid.new(self)
+
+	self.prefab = gui.get_node("button_prefab/button")
+	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, 2)
+	self.grid:set_position_function(function(node, position)
+		gui.animate(node, "position", position, gui.EASING_OUTSINE, 0.6)
+	end)
+	self.data_list = self.druid:new_data_list(self.scroll, self.grid, create_element)
+	self.data_list:set_debug(true)
+
+	self.druid:new_button("button_add_first/button", on_add_first)
+	local button = self.druid:new_button("button_add_last/button", on_add_last)
+	button:set_html5_user_interaction(true)
+end
+
+
+---@param self script_manage_data
+function final(self)
+	self.druid:final()
+end
+
+
+---@param self script_manage_data
+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/rich_text/rich_text_texts/prefab_example_rich_text.gui

@@ -0,0 +1,429 @@
+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: 600.0
+    y: 200.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_N
+  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
+  enabled: true
+  visible: 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: 0.8
+    y: 0.8
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 750.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 0.9411765
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "Here is simple example with text"
+  font: "game"
+  id: "hint"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_N
+  outline {
+    x: 0.101960786
+    y: 0.101960786
+    z: 0.101960786
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: true
+  parent: "root"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 0.7
+  shadow_alpha: 0.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: 0.0
+    y: -60.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: 130.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 0.9411765
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "area"
+  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_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_MANUAL
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: 0.0
+    y: -65.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: "rich_text"
+  parent: "area"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  template: "/druid/custom/rich_text/rich_text.gui"
+  template_node_child: false
+  custom_type: 0
+  enabled: true
+}
+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: 500.0
+    y: 130.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: ""
+  id: "rich_text/root"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "rich_text"
+  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
+  overridden_fields: 4
+  template_node_child: true
+  size_mode: SIZE_MODE_MANUAL
+  custom_type: 0
+  enabled: true
+  visible: 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: 300.0
+    y: 60.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.2
+    y: 0.2
+    z: 0.2
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "Rich text"
+  font: "game"
+  id: "rich_text/text_prefab"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  shadow {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: true
+  parent: "rich_text/root"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 0.0
+  shadow_alpha: 0.0
+  overridden_fields: 1
+  overridden_fields: 4
+  overridden_fields: 5
+  overridden_fields: 14
+  overridden_fields: 18
+  template_node_child: true
+  text_leading: 1.0
+  text_tracking: 0.0
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+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_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: "items/checkmark"
+  id: "rich_text/icon_prefab"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "rich_text/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
+  enabled: true
+  visible: true
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT
+max_nodes: 512

example/examples/rich_text/rich_text_texts/rich_text_texts.collection

@@ -0,0 +1,39 @@
+name: "rich_text_texts"
+scale_along_z: 0
+embedded_instances {
+  id: "go"
+  data: "components {\n"
+  "  id: \"rich_text_texts\"\n"
+  "  component: \"/example/examples/rich_text/rich_text_texts/rich_text_texts.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"
+  "  property_decls {\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/rich_text/rich_text_texts/rich_text_texts.gui_script

@@ -0,0 +1,38 @@
+local druid = require("druid.druid")
+
+local RichText = require("druid.custom.rich_text.rich_text")
+
+
+function init(self)
+	self.druid = druid.new(self)
+	self.druid:new_scroll("root", "content")
+
+	self.rich_text_1 = self.druid:new(RichText, "case1/rich_text")
+	self.rich_text_1:set_text("Here is basic Rich Text without any text settings")
+
+	self.rich_text_2 = self.druid:new(RichText, "case2/rich_text")
+	self.rich_text_2:set_text("Here is color example for <color=0.4,0.6,0.25,1>Rich Text</color>. You can adjust the <color=0000ff>color</color>, <shadow=#FF0000>shadow</shadow> or <outline=00000055>outline</outline>")
+
+	self.rich_text_3 = self.druid:new(RichText, "case3/rich_text")
+	self.rich_text_3:set_text("Here <font=another_font>font change</font> example. Can be used<font=another_font>for bold and italic fonts or other one</font>")
+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