From ac761acd300a535725008a81c8c0cfdb77d11071 Mon Sep 17 00:00:00 2001 From: alexcoder04 Date: Sat, 15 Oct 2022 19:22:46 +0200 Subject: [PATCH] input field component --- README.md | 2 +- app.lua | 6 ++-- components/Canvas.lua | 2 +- components/InputField.lua | 71 +++++++++++++++++++++++++++++++++++++++ components/TextField.lua | 2 +- events.lua | 28 ++++++++++++++- library/gui.lua | 2 +- 7 files changed, 105 insertions(+), 8 deletions(-) create mode 100644 components/InputField.lua diff --git a/README.md b/README.md index 957c0d9..b2e8c37 100644 --- a/README.md +++ b/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 diff --git a/app.lua b/app.lua index 790877f..fcebf05 100644 --- a/app.lua +++ b/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 = {} diff --git a/components/Canvas.lua b/components/Canvas.lua index 5a12ea6..3349b7f 100644 --- a/components/Canvas.lua +++ b/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) diff --git a/components/InputField.lua b/components/InputField.lua new file mode 100644 index 0000000..597e4b7 --- /dev/null +++ b/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 diff --git a/components/TextField.lua b/components/TextField.lua index 260f7f1..ee3c549 100644 --- a/components/TextField.lua +++ b/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 diff --git a/events.lua b/events.lua index 5f1dfe9..2092fdb 100644 --- a/events.lua +++ b/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() diff --git a/library/gui.lua b/library/gui.lua index bf3d70d..b4e90bd 100644 --- a/library/gui.lua +++ b/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