style system overhaul

example/main.lua

@@ -35,19 +35,19 @@ local style = {
 local mainForm = { id = 'mainWindow', type = 'panel',
     { type = 'menu', id = 'menubar', flow = 'x',
         { text = 'File', id = 'menuFile',
-            { text = 'Save', id = 'menuFileSave', },
-            { text = 'Quit' },
+            { text = 'Save', id = 'menuFileSave', key = 'ctrl-s' },
+            { text = 'Quit', id = 'menuQuit', key = 'escape' },
         },
         { text = 'Edit',
-            { text = 'Cut' },
-            { text = 'Copy' },
-            { text = 'Paste' },
+            { text = 'Cut', key = 'ctrl-c' },
+            { text = 'Copy', key = 'ctrl-x' },
+            { text = 'Paste', key = 'ctrl-v' },
             { type = 'slider' },
         },
         { text = 'View',
             { text = 'Theme',
-                { text = 'Light' },
-                { text = 'Dark' },
+                { text = 'Light', key = 'ctrl-l' },
+                { text = 'Dark', key = 'ctrl-d' },
             },
             { text = 'Style',
                 { text = 'Default' },
@@ -161,4 +161,12 @@ erge rg eg erg er ergs erg er ge rh erh rth]]
 
 layout.mainCanvas.align = 'top'
 
+print(layout.menuQuit)
+--[[
+Layout.menuQuit:onPress(function (event)
+    love.event.quit()
+end)
+]]
+
+
 layout:show()

luigi/layout.lua

@@ -39,6 +39,7 @@ A tree of widget data.
 A Layout instance.
 --]]--
 function Layout:constructor (data)
+    data = data or {}
     self.accelerators = {}
     self:addDefaultHandlers()
     self:setStyle()
@@ -46,8 +47,8 @@ function Layout:constructor (data)
 
     self.isShown = false
     self.hooks = {}
-    self.root = data or {}
-    Widget(self, self.root)
+    self.root = data
+    Widget(self, data)
 end
 
 --[[--

luigi/style.lua

@@ -9,73 +9,43 @@ function Style:constructor (rules, lookupNames)
     self.lookupNames = lookupNames
 end
 
-function Style:getProperty (object, property)
-    local ownProperty = rawget(object, property)
-    if ownProperty ~= nil then return ownProperty end
-    for styleDef in self:each(object) do
-        local result = self:getProperty(styleDef, property)
-        if result ~= nil then return result end
-    end
-end
+function Style:getProperty (object, property, original)
+    local value = rawget(object, property)
+    if value ~= nil then return value end
 
-function Style:each (object)
-    local rules = self.rules
-    local nextStyleName = self:eachName(object)
-    return function ()
-        local styleName = nextStyleName()
-        while styleName do
-            local styleDef = rules[styleName]
-            if styleDef then return styleDef end
-            styleName = nextStyleName()
-        end
-    end
-end
+    original = original or object
 
-function Style:eachName (object)
-    local lookupNames = self.lookupNames
-    local lookupNameIndex = 0
-    local lookupPropIndex = 0
-    local lookupProp
-
-    local returnedSpecialName = {}
-
-    local function checkLookupProp()
-        if type(lookupProp) == 'table' and lookupPropIndex >= #lookupProp then
-            lookupProp = nil
-        end
-        while not lookupProp do
-            returnedSpecialName = {}
-            lookupPropIndex = 0
-            lookupNameIndex = lookupNameIndex + 1
-            if lookupNameIndex > #lookupNames then return end
-            lookupProp = rawget(object, lookupNames[lookupNameIndex])
-            if type(lookupProp) == 'string' then
-                lookupProp = { lookupProp }
+    for _, lookupName in ipairs(self.lookupNames) do
+        local lookup = rawget(object, lookupName)
+        if lookup then
+            if type(lookup) ~= 'table' then
+                lookup = { lookup }
             end
-        end
-        return true
-    end
-    local function getSpecialName (names)
-        for k, name in ipairs(names) do
-            if not returnedSpecialName[name] then
-                returnedSpecialName[name] = true
-                if rawget(object, name) then
-                    return lookupProp[lookupPropIndex + 1] .. '_' .. name
-                else
-                    return lookupProp[lookupPropIndex + 1] .. '_not_' .. name
+            for _, lookupValue in ipairs(lookup) do
+                for _, rule in ipairs(self:getRules(original, lookupValue)) do
+                    local value = self:getProperty(rule, property, original)
+                    if value ~= nil then return value end
                 end
-            end
+            end -- lookup values
+        end -- if lookup
+    end -- lookup names
+end
+
+function Style:getRules (object, lookupValue)
+    local rules = self.rules
+    local result = {}
+
+    for _, flag in ipairs { 'pressed', 'focused', 'hovered', 'active' } do
+        if rawget(object, flag) then
+            result[#result + 1] = rules[lookupValue .. '_' .. flag]
+        else
+            result[#result + 1] = rules[lookupValue .. '_not_' .. flag]
         end
     end
-    return function ()
-        if not checkLookupProp() then return end
-        local specialName = getSpecialName {
-            'pressed', 'focused', 'hovered', 'active',
-        }
-        if specialName then return specialName end
-        lookupPropIndex = lookupPropIndex + 1
-        return lookupProp[lookupPropIndex]
-    end
+
+    result[#result + 1] = rules[lookupValue]
+
+    return result
 end
 
 return Style

luigi/theme/light.lua

@@ -25,16 +25,32 @@ return function (config)
         button_pressed = {
             slices = RESOURCE .. 'button_pressed.png',
         },
+
+        ['stepper.left'] = {
+            type = 'button',
+            icon = RESOURCE .. 'triangle_left.png',
+        },
+
+        ['stepper.right'] = {
+            type = 'button',
+            icon = RESOURCE .. 'triangle_right.png',
+        },
+
+
         menu = {
             height = 24,
         },
         ['menu.item'] = {
             padding = 4,
             align = 'left middle',
+            textColor = { 0, 0, 0 }
         },
         ['menu.item_active'] = {
             background = highlight,
         },
+        ['menu.expander'] = {
+            icon = RESOURCE .. 'triangle_right.png',
+        },
         submenu = {
             padding = 10,
             margin = -10,

luigi/widget/menu/item.lua

@@ -13,10 +13,11 @@ local function deactivateSiblings (target)
     end
 
     while sibling do
-        local layout = sibling.menuLayout
 
         sibling.active = nil
 
+        local layout = sibling.menuLayout
+
         if layout and layout.isShown then
             wasSiblingOpen = true
             layout:hide()
@@ -109,9 +110,12 @@ show = function (self)
     menuLayout:onPressStart(function (event)
         if not event.hit then
             menuLayout:hide()
-            deactivateSiblings(self.rootMenu[1])
+            if self.parentMenu == self.rootMenu then
+                deactivateSiblings(self.rootMenu[1])
+            end
+        else
+            activate(event)
         end
-        activate(event)
     end)
 
     menuLayout:onEnter(activate)
@@ -144,12 +148,22 @@ return function (self)
     end
 
     if isSubmenu then
-        key = #self.items > 0 and '>' or key
+        local tc = self.textColor or { 0, 0, 0 }
+        local keyColor = { tc[1], tc[2], tc[3], 0x90 }
+        local edgeType
+        if #self.items > 0 then
+            key = ' '
+            edgeType = 'menu.expander'
+        else
+            key = key:gsub('%f[%w].', string.upper)
+        end
         self.height = self.fontData:getLineHeight() + pad * 2
         self.flow = 'x'
         self:addChild({ icon = icon, width = self.height })
         self:addChild({ text = text, width = textWidth })
-        self:addChild({ text = key, align = 'right', minwidth = self.height })
+        self:addChild({ text = key, align = 'middle right',
+            minwidth = self.height,
+            textColor = keyColor, type = edgeType })
 
         self.icon = nil
         self.text = nil

luigi/widget/stepper.lua

@@ -4,10 +4,7 @@ return function (self)
     self.flow = 'x' -- TODO: support vertical stepper
 
     local decrement = self:addChild {
-        type = 'button',
-        text = '<',
-        align = 'middle center',
-        margin = 0,
+        type = 'stepper.left',
     }
 
     local view = self:addChild {
@@ -18,10 +15,7 @@ return function (self)
     }
 
     local increment = self:addChild {
-        type = 'button',
-        text = '>',
-        align = 'middle center',
-        margin = 0,
+        type = 'stepper.right',
     }
 
     self:onReshape(function (event)