shadow properties

luigi/layout.lua

@@ -11,15 +11,15 @@ local Layout = Base:extend()
 
 function Layout:constructor (data)
     self.accelerators = {}
+    self:addDefaultHandlers()
     self:setStyle()
     self:setTheme(require(ROOT .. 'theme.light'))
 
     self.isMousePressed = false
     self.isManagingInput = false
     self.hooks = {}
-    self.root = Widget(self, data)
-
-    self:addDefaultHandlers()
+    self.root = data or {}
+    Widget(self, self.root)
 end
 
 -- focus a widget if it's focusable, and return success

luigi/widget.lua

@@ -1,6 +1,7 @@
 local ROOT = (...):gsub('[^.]*$', '')
 
 local Event = require(ROOT .. 'event')
+local Font = require(ROOT .. 'font')
 
 local Widget = {}
 
@@ -23,30 +24,49 @@ end
 
 local function new (Widget, layout, self)
     self = self or {}
-    self.type = self.type or 'generic'
     self.layout = layout
     self.children = {}
     self.position = { x = nil, y = nil }
     self.dimensions = { width = nil, height = nil }
+    self.shadowProperties = {}
+
+    for _, property in ipairs { 'font', 'fontSize', 'textColor' } do
+        self.shadowProperties[property] = self[property]
+        self[property] = nil
+    end
 
     local meta = setmetatable(self, {
         __index = function (self, property)
+            local value = self.shadowProperties[property]
+            if value ~= nil then return value end
+
             local value = Widget[property]
             if value ~= nil then return value end
+
             local style = self.layout.style
             value = style and style:getProperty(self, property)
             if value ~= nil and value ~= 'defer' then return value end
+
             local theme = self.layout.theme
             return theme and theme:getProperty(self, property)
+        end,
+        __newindex = function (self, property, value)
+            if property == 'font'
+            or property == 'fontSize'
+            or property == 'textColor' then
+                rawset(self.shadowProperties, property, value)
+                self.fontData = Font(self.font, self.fontSize, self.textColor)
+                return
+            end
+
+            rawset(self, property, value)
         end
     })
 
-    layout:addWidget(self)
+    self.type = self.type or 'generic'
+    self.fontData = Font(self.font, self.fontSize, self.textColor)
 
-    for k, v in ipairs(self) do
-        self.children[k] = v.isWidget and v or new(Widget, self.layout, v)
-        self.children[k].parent = self
-    end
+    layout:addWidget(self)
 
     local decorate = Widget.typeDecorators[self.type]
 
@@ -54,6 +74,11 @@ local function new (Widget, layout, self)
         decorate(self)
     end
 
+    for k, v in ipairs(self) do
+        self.children[k] = v.isWidget and v or new(Widget, self.layout, v)
+        self.children[k].parent = self
+    end
+
     return self
 end
 
@@ -116,7 +141,8 @@ function Widget:calculateDimension (name)
     local min = (name == 'width') and (self.minimumWidth or 0)
         or (self.minimumHeight or 0)
 
-    local max = self.layout.root[name]
+    local max = name == 'width' and love.graphics.getWidth()
+        or love.graphics.getHeight()
 
     if self[name] then
         self.dimensions[name] = clamp(self[name], min, max)

luigi/widget/progress.lua

@@ -1,5 +1,4 @@
 return function (self)
-
     self.value = 0
     self.flow = 'x' -- TODO: support vertical progress?
 
@@ -8,8 +7,14 @@ return function (self)
         width = 0,
     }
 
-    self:onReshape(function (event)
+    self:onChange(function ()
+        self:reshape()
+    end)
+
+    self:onReshape(function ()
         local x1, y1, x2, y2 = self:getRectangle(true, true)
-        bar.width = self.value * (x2 - x1)
+        local min = bar.minimumWidth
+        x1 = x1 + min
+        bar.width = self.value * (x2 - x1) + min
     end)
 end

luigi/widget/slider.lua

@@ -29,10 +29,8 @@ return function (self)
         local key = event.key
         if key == 'left' or key == 'down' then
             self:setValue(clamp(self.value - self.step))
-            self:reshape()
         elseif event.key == 'right' or key == 'up' then
             self:setValue(clamp(self.value + self.step))
-            self:reshape()
         end
     end)
 
@@ -41,7 +39,6 @@ return function (self)
         local halfThumb = thumb:getWidth() / 2
         x1, x2 = x1 + halfThumb, x2 - halfThumb
         self:setValue(clamp((event.x - x1) / (x2 - x1)))
-        self:reshape()
         self.layout:tryFocus(thumb)
     end
 
@@ -56,6 +53,10 @@ return function (self)
         thumb.hovered = false
     end)
 
+    self:onChange(function (event)
+        self:reshape()
+    end)
+
     self:onReshape(function (event)
         local x1, y1, x2, y2 = self:getRectangle(true, true)
         local halfThumb = thumb:getWidth() / 2

luigi/widget/text.lua

@@ -3,12 +3,6 @@ local utf8 = require 'utf8'
 local blendMultiply = love._version_minor < 10 and 'multiplicative'
     or 'multiply'
 
-local function getCaretPosition (self, text)
-    local font = self.fontData.font
-    local x1, y1, x2, y2 = self:getRectangle(true, true)
-    return #text, font:getWidth(text) + x1 - self.scrollX
-end
-
 local function scrollToCaret (self)
     local x1, y1, x2, y2 = self:getRectangle(true, true)
     local oldX = self.endX
@@ -28,8 +22,14 @@ local function scrollToCaret (self)
     end
 end
 
-local function setCaretPosition (self, text, mode)
-    local index, x = getCaretPosition(self, text)
+local function findCaretFromText (self, text)
+    local font = self.fontData.font
+    local x1, y1, x2, y2 = self:getRectangle(true, true)
+    return #text, font:getWidth(text) + x1 - self.scrollX
+end
+
+local function setCaretFromText (self, text, mode)
+    local index, x = findCaretFromText(self, text)
 
     if mode == 'start' or not mode then
         self.startIndex, self.startX = index, x
@@ -42,7 +42,7 @@ local function setCaretPosition (self, text, mode)
 end
 
 -- return caret index and x position
-local function getCaretFromPoint (self, x, y)
+local function findCaretFromPoint (self, x, y)
     local x1, y1, x2, y2 = self:getRectangle(true, true)
 
     local font = self.fontData.font
@@ -77,7 +77,7 @@ local function moveCaretLeft (self, alterRange)
     local mode = alterRange and 'end'
     local offset = utf8.offset(text, -1, endIndex) or 0
 
-    setCaretPosition(self, text:sub(1, offset), mode)
+    setCaretFromText(self, text:sub(1, offset), mode)
 end
 
 -- move the caret one character to the right
@@ -94,7 +94,7 @@ local function moveCaretRight (self, alterRange)
         or utf8.offset(text, 2, endIndex) or #text
 
     -- move right
-    setCaretPosition(self, text:sub(1, offset), mode)
+    setCaretFromText(self, text:sub(1, offset), mode)
 end
 
 local function getRange (self)
@@ -114,7 +114,7 @@ local function deleteRange (self)
         local left = text:sub(1, first)
         text = left .. text:sub(last + 1)
         self:setValue(text)
-        setCaretPosition(self, left)
+        setCaretFromText(self, left)
         return true
     end
 end
@@ -133,7 +133,7 @@ local function deleteCharacterLeft (self)
     local left = text:sub(1, offset)
     text = left .. text:sub(first + 1)
     self:setValue(text)
-    setCaretPosition(self, left)
+    setCaretFromText(self, left)
 end
 
 local function copyRangeToClipboard (self)
@@ -151,7 +151,7 @@ local function pasteFromClipboard (self)
     local left = text:sub(1, first) .. pasted
     text = left .. text:sub(last + 1)
     self:setValue(text)
-    setCaretPosition(self, left)
+    setCaretFromText(self, left)
 end
 
 local function insertText (self, newText)
@@ -161,23 +161,24 @@ local function insertText (self, newText)
 
     self.value = left .. text:sub(last + 1)
     self:setValue(self.value)
-    setCaretPosition(self, left)
+    setCaretFromText(self, left)
 end
 
 return function (self)
-    self.value = self.value or self.text or ''
+    self:setValue(self.value or self.text or '')
     self.text = ''
-    self:setValue(self.value)
     self.highlight = self.highlight or { 0x80, 0x80, 0x80 }
-    self.scrollX = 32
+    self.scrollX = 0
+
+    setCaretFromText(self, self.value)
 
     self:onPressStart(function (event)
-        self.startIndex, self.startX = getCaretFromPoint(self, event.x)
+        self.startIndex, self.startX = findCaretFromPoint(self, event.x)
         self.endIndex, self.endX = self.startIndex, self.startX
     end)
 
     self:onPressDrag(function (event)
-        self.endIndex, self.endX = getCaretFromPoint(self, event.x)
+        self.endIndex, self.endX = findCaretFromPoint(self, event.x)
         scrollToCaret(self)
     end)
 
@@ -235,6 +236,7 @@ return function (self)
             love.graphics.pop()
             return
         end
+         -- TODO: expose highlight blend mode for dark themes
         love.graphics.setBlendMode(blendMultiply)
         love.graphics.setColor(self.highlight)
         love.graphics.rectangle('fill', startX, y1, width, height)