component focus and tabbing

README.md

@@ -54,7 +54,7 @@ All the parts are then assembled and built into one `.tns` file by [sol-tools](h
    - [ ] 2D-editor using nspire's built-in editor
  - [x] colorful components
  - [x] click events
- - [ ] component focus (tabbing, highlighting selected)
+ - [x] component focus (tabbing, highlighting selected)
  - [x] menu api
  - [x] paint hook, use raw `gc` functions
  - [x] persistent data storage

app.lua

@@ -1,6 +1,7 @@
 
 App = {
     _elements = {},
+    _focused = 0,
     Name = "undefined",
     Author = "unknown",
     License = "unknown",
@@ -28,7 +29,7 @@ function App:_update()
     return redraw_required
 end
 
-function App:_onClick(x, y)
+function App:_onMouseClick(x, y)
     for i = 1, #(self._elements) do
         if self._elements[i]:_touches(x, y) and (not self._elements[i].Hidden) then
             if self._elements[i].OnClick ~= nil then
@@ -38,10 +39,17 @@ function App:_onClick(x, y)
     end
 end
 
+function App:_onElementClick()
+    if self._focused == 0 then return end
+    if self._elements[self._focused].OnClick ~= nil then
+        self._elements[self._focused]:OnClick()
+    end
+end
+
 function App:_draw(gc)
     for i = 1, #(self._elements) do
         if not self._elements[i].Hidden then
-            self._elements[i]:_draw(gc)
+            self._elements[i]:_draw(gc, self._focused == i)
         end
     end
 end

components/Canvas.lua

@@ -23,11 +23,14 @@ function Components.Base.Canvas:_touches(x, y)
     return false
 end
 
-function Components.Base.Canvas:_draw(gc)
-    gc:setColorRGB(Lib.Colors.Royalblue)
-    gc:drawRect(self.PosX, self.PosY, self.Width, self.Height)
-    self:Draw(gc)
+function Components.Base.Canvas:_draw(gc, focused, focused)
+    gc:setColorRGB(unpack(Lib.Colors.Royalblue))
+    gc:fillRect(self.PosX, self.PosY, self.Width, self.Height)
     gc:setColorRGB(0, 0, 0)
+    self:Draw(gc)
+    if focused then
+        Lib.Gui:DrawFocusBox(self.PosX, self.PosY, self.Width, self.Height, gc)
+    end
 end
 
 function Components.Base.Canvas:Draw(gc)

components/Rectangle.lua

@@ -24,12 +24,15 @@ function Components.Base.Rectangle:_touches(x, y)
     return false
 end
 
-function Components.Base.Rectangle:_draw(gc)
+function Components.Base.Rectangle:_draw(gc, focused)
     gc:setColorRGB(unpack(self.Color))
     if self.Fill then
         gc:fillRect(self.PosX, self.PosY, self.Width, self.Height)
     else
         gc:drawRect(self.PosX, self.PosY, self.Width, self.Height)
     end
     gc:setColorRGB(0, 0, 0)
+    if focused then
+        Lib.Gui:DrawFocusBox(self.PosX, self.PosY, self.Width, self.Height, gc)
+    end
 end

components/TextField.lua

@@ -24,12 +24,15 @@ function Components.Base.TextField:_touches(x, y)
     return false
 end
 
-function Components.Base.TextField:_draw(gc)
+function Components.Base.TextField:_draw(gc, focused)
     gc:setColorRGB(unpack(self.Color))
     gc:drawString(self.Label, self.PosX, self.PosY, "top")
+    local w, h = Lib.Gui:GetStringSize(self.Label)
     if self.Border then
-        w, h = Lib.Gui:GetStringSize(self.Label)
         gc:drawRect(self.PosX, self.PosY, w, h)
     end
     gc:setColorRGB(0, 0, 0)
+    if focused then
+        Lib.Gui:DrawFocusBox(self.PosX, self.PosY, w, h, gc)
+    end
 end

events.lua

@@ -29,7 +29,34 @@ function on.paint(gc)
 end
 
 function on.mouseDown(x, y)
-    App:_onClick(x, y)
+    App:_onMouseClick(x, y)
+    platform.window:invalidate()
+end
+
+function on.enterKey()
+    App:_onElementClick()
+    platform.window:invalidate()
+end
+
+function on.tabKey()
+    foc = App._focused + 1
+    for i = 1, #(App._elements) do
+        if foc > #(App._elements) then
+            foc = 1
+        end
+        if not App._elements[foc].Hidden then
+            App._focused = foc
+            platform.window:invalidate()
+            return
+        end
+        foc = foc + 1
+    end
+    App._focused = 0
+    platform.window:invalidate()
+end
+
+function on.escapeKey()
+    App._focused = 0
     platform.window:invalidate()
 end
 

library/gui.lua

@@ -6,3 +6,9 @@ end
 function Lib.Gui:GetStringSize(str)
     return platform.withGC(_getStringSize, str)
 end
+
+function Lib.Gui:DrawFocusBox(x, y, w, h, gc)
+    gc:setColorRGB(unpack(Lib.Colors.Darkblue))
+    gc:drawRect(x, y, w, h)
+    gc:setColorRGB(0, 0, 0)
+end