Rich Text example progress

druid/custom/rich_text/rich_text.gui

@@ -72,7 +72,7 @@ nodes {
 }
 nodes {
   position {
-    x: 0.0
+    x: -200.0
     y: 0.0
     z: 0.0
     w: 1.0
@@ -108,7 +108,7 @@ nodes {
   id: "text_prefab"
   xanchor: XANCHOR_NONE
   yanchor: YANCHOR_NONE
-  pivot: PIVOT_CENTER
+  pivot: PIVOT_W
   outline {
     x: 0.0
     y: 0.0
@@ -138,7 +138,7 @@ nodes {
 }
 nodes {
   position {
-    x: 110.0
+    x: 0.0
     y: 0.0
     z: 0.0
     w: 1.0

druid/custom/rich_text/rich_text.lua

@@ -73,6 +73,7 @@ function RichText:_get_settings()
 		size = gui.get_scale(self.text_prefab).x,
 		image_scale = gui.get_scale(self.icon_prefab),
 		default_animation = gui.get_flipbook(self.icon_prefab),
+		--combine_words = true,
 	}
 end
 

druid/custom/rich_text/rich_text/richtext.lua

@@ -62,21 +62,6 @@ local V3_ZERO = vmath.vector3(0)
 ---@field text_prefab Node
 
 
-local function deepcopy(orig)
-	local orig_type = type(orig)
-	local copy
-	if orig_type == 'table' then
-		copy = {}
-		for orig_key, orig_value in next, orig, nil do
-			copy[deepcopy(orig_key)] = deepcopy(orig_value)
-		end
-	else -- number, string, boolean, etc
-		copy = orig
-	end
-	return copy
-end
-
-
 -- Trim spaces on string start
 local function ltrim(text)
 	return text:match('^%s*(.*)')
@@ -161,11 +146,15 @@ local function get_text_metrics(word, previous_word, settings)
 			local previous_word_metrics = resource.get_text_metrics(font_resource, previous_word.text)
 			local union_metrics = resource.get_text_metrics(font_resource, previous_word.text .. text)
 
+			print("prev word metrics", previous_word_metrics.width, previous_word.text)
+			print("union", union_metrics.width, previous_word.text .. text)
+			print("current width", metrics.width, text)
 			local without_previous_width = metrics.width
 			metrics.width = (union_metrics.width - previous_word_metrics.width) * word_scale_x
 			-- Since the several characters can be ajusted to fit the space between the previous word and this word
 			-- For example: chars: [.,?!]
 			metrics.offset_x = metrics.width - without_previous_width
+			print("with prev word offset", metrics.offset_x, previous_word.text, text)
 		end
 	end
 
@@ -650,7 +639,7 @@ function M.characters(word)
 
 	-- exit early if word is a single character or empty
 	if word_length <= 1 then
-		local char = deepcopy(word)
+		local char = helper.deepcopy(word)
 		char.node, char.metrics = create_node(char, parent, font)
 		gui.set_pivot(char.node, pivot)
 		gui.set_position(char.node, gui.get_position(word.node))
@@ -664,7 +653,7 @@ function M.characters(word)
 	local position_x = position.x
 
 	for i = 1, word_length do
-		local char = deepcopy(word)
+		local char = helper.deepcopy(word)
 		chars[#chars + 1] = char
 		char.text = utf8.sub(word.text, i, i)
 		char.node, char.metrics = create_node(char, parent, font)

druid/helper.lua

@@ -173,6 +173,21 @@ function M.contains(t, value)
 end
 
 
+function M.deepcopy(orig_table)
+	local orig_type = type(orig_table)
+	local copy
+	if orig_type == 'table' then
+		copy = {}
+		for orig_key, orig_value in next, orig_table, nil do
+			copy[M.deepcopy(orig_key)] = M.deepcopy(orig_value)
+		end
+	else -- number, string, boolean, etc
+		copy = orig_table
+	end
+	return copy
+end
+
+
 --- Get text metric from gui node. Replacement of previous gui.get_text_metrics_from_node function
 -- @tparam Node text_node
 -- @treturn table {width, height, max_ascent, max_descent}

example/examples/custom/rich_text/rich_text.gui_script

@@ -1,21 +1,66 @@
 local druid = require("druid.druid")
+local helper = require("druid.helper")
 
 local RichText = require("druid.custom.rich_text.rich_text")
 
 
+local function highlight_nodes(words)
+	for index = 1, #words do
+		local node = words[index].node
+		local cloned = gui.clone(gui.get_node("highlight"))
+		gui.set_color(cloned, vmath.vector4(math.random(), math.random(), math.random(), 0.4))
+		gui.set_screen_position(cloned, gui.get_screen_position(node))
+		gui.set_size(cloned, gui.get_size(node))
+		gui.set_scale(cloned, gui.get_scale(node))
+		gui.set_pivot(cloned, gui.get_pivot(node))
+		gui.animate(cloned, "color.w", 0, gui.EASING_INOUTSINE, 3, 0, nil, gui.PLAYBACK_LOOP_PINGPONG)
+		if words[index].text then
+			local text_metrics = helper.get_text_metrics_from_node(node)
+			gui.set_size(cloned, vmath.vector3(text_metrics.width, text_metrics.height, 0))
+		end
+	end
+end
+
+
 function init(self)
 	self.druid = druid.new(self)
 
+	self.druid:new_scroll("scroll_view", "scroll_content")
+
 	self.rich_text = self.druid:new(RichText, "rich_text_1")
-	self.rich_text:set_text("Lorem long text with differrent placeholder <img=checkmark,32/>here to check")
+	self.rich_text:set_text("Here is basic Rich Text without any text settings")
 	-- self.rich_text:set_text("Lorem long text with differrent placeholder or just text without any sense here to check multiline without long words")
 	--self.rich_text:set_text("Some text with image <img=logo,32/> in the middle")
 	--self.rich_text:set_text("Some text with image <img=slider_move,32/> in the middle")
+
 	self.rich_text_2 = self.druid:new(RichText, "rich_text_2")
-	self.rich_text_2:set_text("<color=#C2CACC>Energy</color> is full to restore")
+	self.rich_text_2:set_text("Here is example to compare Rich Text posing with usual GUI Text Node.")
+	local rich_text_2_root = self.rich_text_2.root
+	gui.animate(rich_text_2_root, "color.w", 0, gui.EASING_LINEAR, 4, 0, nil, gui.PLAYBACK_LOOP_PINGPONG)
+	gui.animate(gui.get_node("text_case_2"), "color.w", 1, gui.EASING_LINEAR, 4, 0, nil, gui.PLAYBACK_LOOP_PINGPONG)
+	--highlight_nodes(words2)
 
 	self.rich_text_3 = self.druid:new(RichText, "rich_text_3")
-	self.rich_text_3:set_text("Energy is full to restore")
+	local words3 = self.rich_text_3:set_text("This example highlight every text node in Rich Text")
+	highlight_nodes(words3)
+
+	self.druid:new(RichText, "rich_text_4_1"):set_text("Text with image <img=logo,48/>at center")
+	self.druid:new(RichText, "rich_text_4_2"):set_text("Text with image <img=logo,48/>scaled in GUI")
+	self.druid:new(RichText, "rich_text_4_3"):set_text("Text with image <img=logo,48,48/>with fixed height")
+
+	self.druid:new(RichText, "rich_text_5_NW"):set_text("Example text for pivots <img=logo,24/>")
+	self.druid:new(RichText, "rich_text_5_N"):set_text("Example text for pivots <img=logo,24/>")
+	self.druid:new(RichText, "rich_text_5_NE"):set_text("Example text for pivots <img=logo,24/>")
+	self.druid:new(RichText, "rich_text_5_W"):set_text("Example text for pivots <img=logo,24/>")
+	self.druid:new(RichText, "rich_text_5_C"):set_text("Example text for pivots <img=logo,24/>")
+	self.druid:new(RichText, "rich_text_5_E"):set_text("Example text for pivots <img=logo,24/>")
+	self.druid:new(RichText, "rich_text_5_SW"):set_text("Example text for pivots <img=logo,24/>")
+	self.druid:new(RichText, "rich_text_5_S"):set_text("Example text for pivots <img=logo,24/>")
+	self.druid:new(RichText, "rich_text_5_SE"):set_text("Example text for pivots <img=logo,24/>")
+
+	--self.rich_text_3 = self.druid:new(RichText, "rich_text_3")
+	--local words3 = self.rich_text_3:set_text("Energy is full. To restore")
+	--highlight_nodes(words3)
 end