Add Input element

Author: TheHorscht

EZGUI.lua

@@ -48,7 +48,7 @@ local function make_observable(t, key, prev_keys)
       end
       path = path .. key
 
-      print(path .. " changed!")
+      -- print(path .. " changed!")
     end
   })
 end
@@ -65,12 +65,13 @@ return {
         ("%sparsing_functions.lua"):format(self_path),
         ("%sstring_buffer.lua"):format(self_path),
         ("%sutils.lua"):format(self_path),
-        ("%selements/Button.lua"):format(self_path),
         ("%selements/DOMElement.lua"):format(self_path),
-        ("%selements/Image.lua"):format(self_path),
         ("%selements/Layout.lua"):format(self_path),
-        ("%selements/Slider.lua"):format(self_path),
         ("%selements/Text.lua"):format(self_path),
+        ("%selements/Input.lua"):format(self_path),
+        ("%selements/Button.lua"):format(self_path),
+        ("%selements/Image.lua"):format(self_path),
+        ("%selements/Slider.lua"):format(self_path),
       }
       for i, filepath in ipairs(files) do
         local content = ModTextFileGetContent(filepath)
@@ -88,6 +89,7 @@ return {
     local pretty = dofile_once(self_path .. "lib/pretty.lua")
     local Layout = dofile_once(self_path .. "elements/Layout.lua")
     local Text = dofile_once(self_path .. "elements/Text.lua")
+    local Input = dofile_once(self_path .. "elements/Input.lua")
     local Button = dofile_once(self_path .. "elements/Button.lua")
     local Image = dofile_once(self_path .. "elements/Image.lua")
     local Slider = dofile_once(self_path .. "elements/Slider.lua")
@@ -102,6 +104,7 @@ return {
       Button = Button,
       Image = Image,
       Slider = Slider,
+      Input = Input,
     }
 
     local dom_cache = {}

README.md

@@ -64,6 +64,12 @@ Render a slider.
 ## Text
 Render some text. Example `<Text>Hello</Text>`
 
+## Input
+For getting user input. Example `<Input bind="name"></Input>`
+
+### Properties:
+- `bind` - The data context variable to bind to
+
 All element support the `padding`, `margin` properties.
 
 # Styling / Pseudo-CSS

build.lua

@@ -32,6 +32,7 @@ local files_to_bundle = {
   "lib/pretty.lua",
   "lib/nxml.lua",
   "elements/Button.lua",
+  "elements/Input.lua",
   "elements/DOMElement.lua",
   "elements/Image.lua",
   "elements/Layout.lua",

elements/Input.lua

@@ -0,0 +1,57 @@
+dofile_once("%PATH%oop.lua")
+local parser = dofile_once("%PATH%parsing_functions.lua")
+local utils = dofile_once("%PATH%utils.lua")
+local DOMElement = dofile_once("%PATH%elements/DOMElement.lua")
+
+local Input = new_class("Input", function(self, xml_element, data_context)
+  super(xml_element, data_context)
+  if not xml_element.attr.bind then
+    error("'bind' attribute is required on Input field", 4)
+  end
+  self.binding_target = { type = "binding", target_chain = parser.read_binding_target(xml_element.attr.bind) }
+  self.min_width = 30
+end, DOMElement)
+
+Input.default_style = {
+  width = 100,
+}
+
+function Input:GetInnerAndOuterDimensions(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 inner_width, inner_height = math.max(self.min_width, self.style.width), 11
+  local outer_width = inner_width + self.style.padding_left + self.style.padding_right
+  local outer_height = inner_height + self.style.padding_top + self.style.padding_bottom
+  outer_width = math.max(outer_width, self.min_width, self.style.width or 0)
+  outer_height = math.max(outer_height, self.style.height or 0)
+  return inner_width, inner_height, outer_width, outer_height
+end
+
+function Input: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 width, height = self:GetDimensions(gui, data_context)
+  local value = get_value_from_chain_or_not(data_context, self.binding_target)
+  local x, y = self.style.margin_left, self.style.margin_top
+  if layout then
+    x, y = layout:GetPositionForWidget(gui, data_context, self, width, height)
+  end
+  local z
+  if layout then
+    z = layout:GetZ()
+  else
+    z = self:GetZ()
+  end
+  GuiZSetForNextWidget(gui, z)
+  local new_text = GuiTextInput(gui, new_id(), x + self.style.padding_left, y + self.style.padding_top, value, width, 50)
+  if new_text ~= value then
+    -- TODO: Refactor this
+    local context = data_context
+    for i=1, #self.binding_target.target_chain-1 do
+      context = context[self.binding_target.target_chain[i]]
+    end
+    context[self.binding_target.target_chain[#self.binding_target.target_chain]] = new_text
+  end
+end
+
+return Input

env.lua

@@ -51,6 +51,7 @@ function GuiGetTextDimensions(gui, text) return #text * 6, 10 end
 function GuiGetImageDimensions(gui, image_path) return 10, 10 end
 function GuiLayoutEnd() end
 function GuiSlider() return 1 end
+function GuiTextInput() return "" end
 function GuiBeginScrollContainer() end
 function GuiEndScrollContainer() end
 function GuiOptionsAddForNextWidget() end

parsing_functions.lua

@@ -2,7 +2,7 @@ local utils = dofile_once("%PATH%utils.lua")
 local string_buffer = dofile_once("%PATH%string_buffer.lua")
 
 local dom_element_names = {
-  "Button", "Image", "Layout", "Slider", "Text", "*"
+  "Layout", "Text", "Input", "Button", "Image", "Slider", "*"
 }
 
 local function _throw_error(str, msg, pos, level)

xxx.lua

@@ -7,6 +7,8 @@ local data = {
   },
   align_items_horizontal = "center",
   align_items_vertical = "top",
+  align_self_horizontal = "center",
+  align_self_vertical = "top",
   direction = "vertical",
   pleft = {
     val = 22
@@ -17,6 +19,11 @@ local data = {
   margin_bottom = 0,
   padding_left = 0,
   padding_top = 0,
+  padding = 0,
+  margin = 0,
+  width = 0,
+  height = 0,
+  color = { r = 1, g = 1, b = 1, a = 1 },
   padding_right = 0,
   padding_bottom = 0,
   increase_counter = function(data, element, amount)
@@ -48,4 +55,4 @@ local parser = dofile_once("parsing_functions.lua")
 local pretty = dofile_once("lib/pretty.lua")
 local css = dofile_once("css.lua")
 
-local a = d(0, 0, "../../gui.xml", data)
+local a = d(0, 0, "../../gui2.xml", data)