Split Text content into multiple lines

Author: TheHorscht

EZGUI.lua

@@ -1,5 +1,5 @@
 --[[ 
-  EZGUI v0.1.0
+  EZGUI v0.1.1
 ]]
 
 local _ModTextFileGetContent = ModTextFileGetContent

changelog.txt

@@ -1,2 +1,9 @@
+v0.1.1:
+- FIX: Layout background rendering z-index
+- FIX: Attribute binding didn't work (e.g. :debug="var")
+- FIX: CSS property defaults were not being applied correctly
+- Rework <Text> multiline/newline rendering
+- Use images from data/ to render debug visualizations
+
 v0.1.0:
 - First preview release

elements/Text.lua

@@ -1,5 +1,6 @@
 dofile_once("%PATH%/oop.lua")
 local parsers = dofile_once("%PATH%/parsing_functions.lua")
+local utils = dofile_once("%PATH%/utils.lua")
 local DOMElement = dofile_once("%PATH%/elements/DOMElement.lua")
 
 -- trim7 from http://lua-users.org/wiki/StringTrim
@@ -9,14 +10,23 @@ end
 
 local Text = new_class("Text", function(self, xml_element, data_context)
   super(xml_element, data_context)
+  local text = trim(xml_element:text())
   self.value = parsers.parse_text(trim(xml_element:text()))
 end, DOMElement)
 
 function Text:GetDimensions(gui, data_context)
   if not gui then error("Required parameter #1: GuiObject", 2) end
   if not data_context then error("Required parameter #2: data_context:table", 2) end
   local text = inflate(self.value, data_context)
-  local width, height = GuiGetTextDimensions(gui, text)
+  -- split text into lines
+  local lines = utils.split_lines(text)
+  local width, height = 0, 0
+  for i, line in ipairs(lines) do
+    line = trim(line)
+    local w, h = GuiGetTextDimensions(gui, line)
+    width = math.max(width, w)
+    height = height + h
+  end
   width = width + self.style.padding_left + self.style.padding_right
   height = height + self.style.padding_top + self.style.padding_bottom
   return width, height
@@ -26,7 +36,9 @@ function Text:Render(gui, new_id, data_context, layout)
   if not gui then error("Required parameter #1: GuiObject", 2) end
   if not data_context then error("Required parameter #2: data_context", 2) end
   local text = inflate(self.value, data_context)
+  local lines = utils.split_lines(text)
   local width, height = self:GetDimensions(gui, data_context)
+  local line_height = (height - self.style.padding_top - self.style.padding_bottom) / #lines
   local x, y = self.style.margin_left, self.style.margin_top
   if layout then
     x, y = layout:GetPositionForWidget(self, width, height)
@@ -37,8 +49,11 @@ function Text:Render(gui, new_id, data_context, layout)
   else
     z = self:GetZ()
   end
-  GuiZSetForNextWidget(gui, z)
-  GuiText(gui, x + self.style.padding_left, y + self.style.padding_top, text)
+  for i, line in ipairs(lines) do
+    line = trim(line)
+    GuiZSetForNextWidget(gui, z)
+    GuiText(gui, x + self.style.padding_left, y + self.style.padding_top + (i-1) * line_height, line)
+  end
 
   if self.attr.debug then
     -- Debug rendering

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ezgui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "You make an XML file that contains your GUI definition, just like single file components in Vue.js.\r A root Layout element is mandatory.\r ```xml\r <Layout>\r   <Button @click=\"a_method('with a string arg')\">Click me!</Button>\r   <Text forEach=\"element in collection\">{{ element }}</Text>\r </Layout>\r <Style>\r Layout {\r   direction: vertical;\r   padding: 2;\r }\r Layout > Button {\r   margin: [button_margin]; // Can also databind to CSS properties!\r }\r </Style>\r ```\r Then in your init.lua you can render this GUI:\r ```lua\r -- Dofiling EZGUI.lua returns a table with an init function that you need to call and pass in the path to the library, which in turn will return a render function you can call to render a GUI\r local render_gui = dofile_once(\"mods/your_mod_id/lib/EZGUI/EZGUI.lua\").init(\"mods/your_mod_id/lib/EZGUI\")\r -- This is the data context table, here lives your data that you can bind to\r local data = {\r   collection = { \"Bloo\", \"Blaa\", \"Blee\" },\r   button_margin = 5,\r   -- Methods defined here can be used in @click, arg1 is the data_context itself, arg2 the element that was clicked, arg3 the first custom arg\r   a_method = function(data, element, arg1)\r     print(arg1)\r   end,\r }",
   "main": "build.js",
   "directories": {

utils.lua

@@ -65,6 +65,7 @@ local function get_data_from_binding_chain(data_context, binding_target_chain)
 end
 
 return {
+  split_lines = split_lines,
   throw_error = throw_error,
   get_line_by_pos = get_line_by_pos,
   get_data_from_binding_chain = get_data_from_binding_chain