input field component

README.md

@@ -45,7 +45,7 @@ All the parts are then assembled and built into one `.tns` file by [sol-tools](h
 ## Roadmap / TODOs
 
  - [ ] more base components
-   - [ ] input field
+   - [x] input field
    - [ ] list
    - [ ] sublayouts
    - [ ] tabs

app.lua

@@ -13,12 +13,14 @@ App = {
     }
 }
 
+Hooks = {}
+
 function App:AddElement(element)
     table.insert(self._elements, element)
 end
 
 function App:_update()
-    redraw_required = false
+    local redraw_required = false
     for i = 1, #(self._elements) do
         if self._elements[i].Update ~= nil then
             if self._elements[i]:Update() then
@@ -53,5 +55,3 @@ function App:_draw(gc)
         end
     end
 end
-
-Hooks = {}

components/Canvas.lua

@@ -23,7 +23,7 @@ function Components.Base.Canvas:_touches(x, y)
     return false
 end
 
-function Components.Base.Canvas:_draw(gc, focused, focused)
+function Components.Base.Canvas:_draw(gc, focused)
     gc:setColorRGB(unpack(Lib.Colors.Royalblue))
     gc:fillRect(self.PosX, self.PosY, self.Width, self.Height)
     gc:setColorRGB(0, 0, 0)

components/InputField.lua

@@ -0,0 +1,71 @@
+
+Components.Base.InputField = {
+    PosX = 0,
+    PosY = 0,
+    Width = 50,
+    Value = "",
+    Color = {0, 0, 0},
+    _cursor_on = false
+}
+
+function Components.Base.InputField:new(o)
+    o = o or {}
+    setmetatable(o, self)
+    self.__index = self
+    return o
+end
+
+function Components.Base.InputField:_touches(x, y)
+    local w, h = Lib.Gui:GetStringSize(self.Value)
+    if x >= self.PosX and x <= (self.PosX + self.Width) then
+        if y >= self.PosY and y <= (self.PosY + h) then
+            return true
+        end
+    end
+    return false
+end
+
+function Components.Base.InputField:_get_cursor(focused)
+    if not focused then return " " end
+    if self._cursor_on then return "|" end
+    return " "
+end
+
+function Components.Base.InputField:_get_draw_text(focused)
+    local dt = self.Value
+    local w, h = Lib.Gui:GetStringSize(dt .. self:_get_cursor(focused))
+    if w <= self.Width then return dt .. self:_get_cursor(focused) end
+    while w > self.Width do
+        dt = dt:sub(2)
+        w, h = Lib.Gui:GetStringSize("..." .. dt .. self:_get_cursor(focused))
+    end
+    return "..." .. dt .. self:_get_cursor(focused)
+end
+
+function Components.Base.InputField:_draw(gc, focused)
+    self._cursor_on = not self._cursor_on
+    local dt = self:_get_draw_text(focused)
+    local w, h = Lib.Gui:GetStringSize(dt)
+    if not focused then
+        gc:setColorRGB(unpack(Lib.Colors.Silver))
+        gc:fillRect(self.PosX, self.PosY, self.Width, h)
+    end
+    gc:setColorRGB(unpack(self.Color))
+    gc:drawString(dt, self.PosX, self.PosY, "top")
+    if h == 0 then
+        h = 20
+    end
+    gc:drawRect(self.PosX, self.PosY, self.Width, h)
+    gc:setColorRGB(0, 0, 0)
+    if focused then
+        Lib.Gui:DrawFocusBox(self.PosX, self.PosY, self.Width, h, gc)
+    end
+end
+
+function Components.Base.InputField:AcceptChar(c)
+    self.Value = self.Value .. c
+end
+
+function Components.Base.InputField:AcceptBackspace(c)
+    self.Value = self.Value:sub(1, #(self.Value)-1)
+end

components/TextField.lua

@@ -15,7 +15,7 @@ function Components.Base.TextField:new(o)
 end
 
 function Components.Base.TextField:_touches(x, y)
-    w, h = Lib.Gui:GetStringSize(self.Label)
+    local w, h = Lib.Gui:GetStringSize(self.Label)
     if x >= self.PosX and x <= (self.PosX + w) then
         if y >= self.PosY and y <= (self.PosY + h) then
             return true

events.lua

@@ -39,7 +39,7 @@ function on.enterKey()
 end
 
 function on.tabKey()
-    foc = App._focused + 1
+    local foc = App._focused + 1
     for i = 1, #(App._elements) do
         if foc > #(App._elements) then
             foc = 1
@@ -60,6 +60,32 @@ function on.escapeKey()
     platform.window:invalidate()
 end
 
+function on.charIn(c)
+    if App._focused == 0 then
+        if Hooks.CharIn ~= nil then
+            Hooks:CharIn(c)
+        end
+        return
+    end
+    if App._elements[App._focused].AcceptChar ~= nil then
+        App._elements[App._focused]:AcceptChar(c)
+        platform.window:invalidate()
+    end
+end
+
+function on.backspaceKey()
+    if App._focused == 0 then
+        if Hooks.Backspace ~= nil then
+            Hooks:Backspace()
+        end
+        return
+    end
+    if App._elements[App._focused].AcceptBackspace ~= nil then
+        App._elements[App._focused]:AcceptBackspace()
+        platform.window:invalidate()
+    end
+end
+
 function on.timer()
     if App:_update() then
         platform.window:invalidate()

library/gui.lua

@@ -8,7 +8,7 @@ function Lib.Gui:GetStringSize(str)
 end
 
 function Lib.Gui:DrawFocusBox(x, y, w, h, gc)
-    gc:setColorRGB(unpack(Lib.Colors.Darkblue))
+    gc:setColorRGB(unpack(Lib.Colors.Blue))
     gc:drawRect(x, y, w, h)
     gc:setColorRGB(0, 0, 0)
 end