minor improvements

example/layout/license.lua

@@ -1,7 +1,6 @@
 return { style = 'dialog',
     { style = 'dialogHead', text = 'License' },
-    { style = 'dialogBody', text = [[
+    { style = 'dialogBody', text = [[The MIT License (MIT)
-The MIT License (MIT)
 
 Copyright (c) 2015 airstruck
 
@@ -21,8 +20,8 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.]]
-]]  },
+    },
     { style = 'dialogFoot',
         {}, -- spacer
         { style = 'dialogButton', id = 'closeButton', text = 'Close' }

example/layout/main.lua

@@ -1,5 +1,5 @@
-return { id = 'mainWindow', type = 'panel',
+return { id = 'mainWindow',
-    { type = 'menu', id = 'menubar', flow = 'x',
+    { type = 'menu',
         { text = 'File',
             { text = 'Save', id = 'menuSave', key = 'ctrl-s',
                 status = 'Save to disk' },
@@ -27,7 +27,7 @@ return { id = 'mainWindow', type = 'panel',
             { id = 'license', text = 'License', key = 'f3'  },
         },
     },
-    { type = 'panel', id = 'toolbar', style = 'toolbar', flow = 'x',
+    { style = 'toolbar',
         { id = 'newButton', style = 'toolButton', key = 'z',
             icon = 'icon/32px/Blueprint.png',
             status = 'Create a new thing' },
@@ -39,30 +39,36 @@ return { id = 'mainWindow', type = 'panel',
             status = 'Save a thing' },
     },
     { flow = 'x',
-        { id = 'leftSideBox', width = 200, minwidth = 64, scroll = true, type = 'panel',
+        { id = 'leftSideBox', minwidth = 200, width = 200, scroll = true, type = 'panel',
-            { text = 'Hi, I\'m centered middle. ', style = 'listThing',
+            { style = 'listThing', align = 'middle center',
-                align = 'middle center' },
+                text = 'Try the scroll wheel on this area.' },
-            { text = 'Hi, I\'m right bottom.\nAlso two lines, woopdy woop.Hi, I\'m right bottom.\nAlso two lines, woopdy woop.Hi, I\'m right bottom.\nAlso two lines, woopdy woop.', style = 'listThing',
+            { style = 'listThing', align = 'middle center',
-                align = 'bottom right' },
+                text = 'This text is centered, and in the middle vertically.' },
-            { text = 'Hi, I\'m centered top. ', style = 'listThing',
+            { style = 'listThing', align = 'middle left',
-                align = 'top center' },
+                text = 'This text is aligned left, and in the middle vertically.' },
-            { text = 'A man, a plan, a canal: Panama!', style = 'listThing' },
+            { style = 'listThing', align = 'middle right',
+                text = 'This text is aligned right, and in the middle vertically.' },
+            { style = 'listThing', align = 'top center',
+                text = 'This text is centered, and at the top vertically.' },
+            { style = 'listThing', align = 'bottom center',
+                text = 'This text is centered, and at the bottom vertically.' },
         },
         { type = 'sash' },
         { type = 'panel', id = 'mainCanvas' },
         { type = 'sash' },
-        { type = 'panel', id = 'rightSideBox', width = 200, minwidth = 64, scroll = true,
+        { type = 'panel', id = 'rightSideBox', minwidth = 200, width = 200, scroll = true,
-            { id = 'flowTest', height = 'auto', minheight = 128,
+            { id = 'flowTest', height = 'auto',  minheight = 128,
                 {
                     { type = 'label', text = 'Slider' },
                     { type = 'slider', id = 'slidey', width = false },
                 },
                 {
                     { type = 'label', text = 'Stepper' },
-                    { type = 'stepper', id = 'stepper', width = false,
+                    { type = 'stepper', id = 'stepper', width = false, wrap = true,
                         { value = 1, text = 'Thing One' },
                         { value = 2, text = 'Thing Two' },
                         { value = 3, text = 'Thing Three' },
+                        { value = 4, text = 'Thing Four' },
                     },
                 },
                 {
@@ -70,7 +76,7 @@ return { id = 'mainWindow', type = 'panel',
                     { type = 'progress', id = 'progressBar', width = false },
                 },
             },
-            { height = 'auto', 
+            { height = 'auto',
                 { type = 'label', text = 'Flow test' },
                 { type = 'check', text = 'Vertical controls', id = 'flowToggle', },
                 { type = 'label', text = 'Some radio widgets' },
@@ -82,9 +88,12 @@ return { id = 'mainWindow', type = 'panel',
         },
     },
     { type = 'sash' },
-    { type = 'panel', flow = 'x', height = 64,
+    { type = 'panel', height = 'auto',
-        { type = 'text', id = 'aTextField', text = 'Testing «ταБЬℓσ»: 1<2 & 4+1>3, now 20% off!' },
+        { flow = 'x',
-        { type = 'button', width = 90, id = 'aButton', text = 'Press me!' },
+            { type = 'text', id = 'aTextField', text = 'Testing «ταБЬℓσ»: 1<2 & 4+1>3, now 20% off!' },
+            { type = 'button', width = 90, id = 'aButton', text = 'Press me!' }
+        },
+        { type = 'status', id = 'statusbar' },
     },
-    { type = 'status', id = 'statusbar' },
+
 }

example/main.lua

@@ -1,10 +1,12 @@
 local Layout = require 'luigi.layout'
 
-local style = require 'style'
-
 local layout = Layout(require 'layout.main')
+local aboutDialog = Layout(require 'layout.about')
+local licenseDialog = Layout(require 'layout.license')
 
-layout:setStyle(style)
+layout:setStyle(require 'style')
+aboutDialog:setStyle(require 'style')
+licenseDialog:setStyle(require 'style')
 
 layout.slidey:onChange(function (event)
     layout.progressBar.value = event.value
@@ -14,33 +16,19 @@ layout.flowToggle:onChange(function (event)
     layout.slidey.flow = event.value and 'y' or 'x'
     layout.progressBar.flow = event.value and 'y' or 'x'
     layout.stepper.flow = event.value and 'y' or 'x'
+    local height = layout.flowTest:getHeight()
     layout.flowTest.flow = event.value and 'x' or 'y'
+    layout.flowTest.height = height
 end)
 
 layout.newButton:onPress(function (event)
     print('creating a new thing!')
 end)
 
-layout.mainCanvas.font = 'font/DejaVuSansMono.ttf'
-
 layout.mainCanvas.text = [[
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+This program demonstrates some features of the Luigi UI library.
 
-Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Luigi is a widget toolkit that runs under Love or LuaJIT.
-   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-
-Excepteur sint         occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-One
-two
-Three
-four
-
-five
-six
-seven
-eight
 ]]
 
 layout.mainCanvas.align = 'top'
@@ -49,18 +37,9 @@ layout.mainCanvas.wrap = true
 
 -- help dialogs
 
-local aboutDialog = Layout(require 'layout.about')
+layout.about:onPress(function()
-local licenseDialog = Layout(require 'layout.license')
-
-aboutDialog:setStyle(style)
-licenseDialog:setStyle(style)
-
-aboutDialog.closeButton:onPress(function()
-    aboutDialog:hide()
-end)
-
-licenseDialog.closeButton:onPress(function()
     licenseDialog:hide()
+    aboutDialog:show()
 end)
 
 layout.license:onPress(function()
@@ -68,9 +47,12 @@ layout.license:onPress(function()
     licenseDialog:show()
 end)
 
-layout.about:onPress(function()
+aboutDialog.closeButton:onPress(function()
+    aboutDialog:hide()
+end)
+
+licenseDialog.closeButton:onPress(function()
     licenseDialog:hide()
-    aboutDialog:show()
 end)
 
 -- menu/view/theme
@@ -90,12 +72,12 @@ layout.themeDark:onPress(function (event)
 end)
 
 -- menu/file/quit
--- uses Backend for compat with love or ffisdl
+-- uses Backend for compat with Love or LuaJIT/SDL
 local Backend = require 'luigi.backend'
-layout.menuQuit:onPress(function (event) Backend.quit() end)
+layout.menuQuit:onPress(Backend.quit)
 
 -- show the main layout
 layout:show()
 
--- only needed when using ffisdl backend
+-- only needed when using LuaJIT/SDL
 Backend.run()

example/style.lua

@@ -1,9 +1,10 @@
 return {
-    short = {
-        height = 48,
-    },
     toolbar = {
-        style = 'short',
+        type = 'panel',
+        margin = 0,
+        padding = 0,
+        height = 'auto',
+        flow = 'x',
     },
     toolButton = {
         type = 'button',
@@ -21,11 +22,12 @@ return {
         align = 'left middle',
     },
     listThing = {
-        style = 'short',
         align = 'left middle',
-        outline = { 200, 200, 200 },
+        outline = { 128, 128, 128, 128 },
+        background = { 128, 128, 128, 64 },
         height = 120,
         padding = 8,
+        margin = 2,
         icon = 'icon/32px/Box.png',
         wrap = true,
     },
@@ -37,7 +39,7 @@ return {
     },
     dialogHead = {
         align = 'middle center',
-        height = 22,
+        height = 36,
         size = 16,
         type = 'panel',
     },
@@ -51,7 +53,6 @@ return {
         flow = 'x',
         height = 'auto',
         type = 'panel',
-        padding = 4,
     },
     dialogButton = {
         type = 'button',

luigi/attribute.lua

@@ -264,7 +264,9 @@ with this widget.
 Attribute.width = {}
 
 function Attribute.width.set (widget, value)
-    value = value and math.max(value, widget.minwidth or 0)
+    if value ~= 'auto' then
+        value = value and math.max(value, widget.minwidth or 0)
+    end
     widget.attributes.width = value
     if widget.wrap then
         widget.textData = nil
@@ -453,6 +455,8 @@ Should contain `true` for multiline text, or `false` or `nil`
 for a single line. Even text containing line breaks will display
 as a single line when this attribute is not set to `true`.
 
+- This attribute cascades.
+
 @attrib wrap
 --]]--
 Attribute.wrap = {}
@@ -462,6 +466,10 @@ function Attribute.wrap.set (widget, value)
     widget.textData = nil
 end
 
+function Attribute.wrap.get (widget)
+    return widget.attributes.wrap or widget.parent and widget.parent.wrap
+end
+
 --[[--
 Visual Attributes.
 

luigi/backend/ffisdl.lua

@@ -35,6 +35,8 @@ end
 
 ffi.gc(renderer, sdl.destroyRenderer)
 
+sdl.setRenderDrawBlendMode(renderer, sdl.BLENDMODE_BLEND)
+
 local Backend = {}
 
 Backend.sdl = sdl

luigi/multiline.lua

@@ -3,12 +3,14 @@ local Multiline = {}
 function Multiline.wrap (font, text, limit)
     local lines = {{ width = 0 }}
     local advance = 0
+    local lastSpaceAdvance = 0
 
     local function append (word, space)
         local wordAdvance = font:getAdvance(word)
         local spaceAdvance = font:getAdvance(space)
         local words = lines[#lines]
         if advance + wordAdvance > limit then
+            words.width = (words.width or 0) - lastSpaceAdvance
             advance = wordAdvance + spaceAdvance
             lines[#lines + 1] = { width = advance, word, space }
         else
@@ -17,6 +19,7 @@ function Multiline.wrap (font, text, limit)
             words[#words + 1] = word
             words[#words + 1] = space
         end
+        lastSpaceAdvance = spaceAdvance
     end
 
     local function appendFrag (frag, isFirst)

luigi/theme/light.lua

@@ -62,6 +62,16 @@ return function (config)
         return self.parent and self.parent.flow == 'x' and 4
     end
 
+    local function getStepperBeforeIcon (self)
+        return self.parent.flow == 'x' and resources .. 'triangle_left.png'
+            or resources .. 'triangle_up.png'
+    end
+
+    local function getStepperAfterIcon (self)
+        return self.parent.flow == 'x' and resources .. 'triangle_right.png'
+            or resources .. 'triangle_down.png'
+    end
+
     local function getTextSlices (self)
         return self.focused and resources .. 'text_focused.png'
             or resources .. 'text.png'
@@ -73,36 +83,40 @@ return function (config)
             height = getControlHeight,
             width = getControlWidth,
             color = textColor,
-            minheight = 28,
+            minheight = 36,
-            minwidth = 28,
+            minwidth = 36,
             align = 'center middle',
+            margin = 2,
+            color = textColor,
         },
         button = {
             type = 'control',
             padding = 6,
             slices = getButtonSlices,
-            minwidth = 24,
-            minheight = 24,
             focusable = true,
-            color = textColor,
         },
         check = {
             type = 'control',
             focusable = true,
-            color = textColor,
             icon = getCheckOrRadioIcon,
+            margin = 0,
             padding = 4,
             align = 'left middle',
+            minheight = 24,
         },
         label = {
             type = 'control',
-            background = backColor,
-            padding = 4,
             align = 'left bottom',
-            height = 14,
+            margin = 0,
+            padding = 4,
+            minheight = 24,
+            height = 24,
         },
         menu = {
+            flow = 'x',
             height = 24,
+            background = backColor,
+            color = textColor,
         },
         ['menu.expander'] = {
             icon = resources .. 'triangle_right.png',
@@ -110,31 +124,31 @@ return function (config)
         ['menu.item'] = {
             padding = 4,
             align = 'left middle',
-            color = textColor,
             background = getMenuItemBackground,
         },
         panel = {
+            padding = 2,
             background = backColor,
             color = textColor,
         },
         progress = {
             type = 'control',
             slices = resources .. 'button_pressed.png',
-            padding = 0,
         },
         ['progress.bar'] = {
-            type = 'control',
             slices = resources .. 'progress.png',
-            padding = 0,
             minwidth = 12,
+            minheight= 22,
         },
         radio = {
             type = 'control',
             focusable = true,
             color = textColor,
             icon = getCheckOrRadioIcon,
+            margin = 0,
             padding = 4,
             align = 'left middle',
+            minheight = 24,
         },
         sash = {
             background = getSashBackground,
@@ -144,10 +158,17 @@ return function (config)
         slider = {
             type = 'control',
             slices = resources .. 'button_pressed.png',
-            padding = 0,
+        },
+        ['slider.thumb'] = {
+            type = 'button',
+            align = 'middle center',
+            margin = 0,
+            minwidth = 32,
+            minheight = 32,
         },
         status = {
-            type = 'panel',
+            background = backColor,
+            color = textColor,
             align = 'left middle',
             padding = 4,
             height = 22,
@@ -156,17 +177,26 @@ return function (config)
             type = 'control',
             slices = resources .. 'button_pressed.png',
         },
+        ['stepper.after'] = {
+            type = 'button',
+            icon = getStepperAfterIcon,
+            margin = 0,
+            minwidth = 32,
+            minheight = 32,
+        },
+        ['stepper.before'] = {
+            type = 'button',
+            icon = getStepperBeforeIcon,
+            margin = 0,
+            minwidth = 32,
+            minheight = 32,
+        },
         ['stepper.item'] = {
             align = 'center middle',
             color = textColor,
         },
-        ['stepper.left'] = {
+        ['stepper.view'] = {
-            type = 'button',
+            margin = 4,
-            icon = resources .. 'triangle_left.png',
-        },
-        ['stepper.right'] = {
-            type = 'button',
-            icon = resources .. 'triangle_right.png',
         },
         submenu = {
             padding = 10,

luigi/widget.lua

@@ -302,24 +302,31 @@ end
 function Widget:calculateDimension (name)
     checkReshape(self)
 
+    -- If dimensions are already calculated, return them.
     if self.dimensions[name] then
         return self.dimensions[name]
     end
 
+    -- Get minimum width/height from attributes.
     local min = (name == 'width') and (self.minwidth or 0)
         or (self.minheight or 0)
 
+    -- If width/height attribute is found (in widget, style or theme)
     if self[name] then
+        -- and if width/height is "auto" then shrink to fit content
         if self[name] == 'auto' then
             self.dimensions[name] = self:calculateDimensionMinimum(name)
             return self.dimensions[name]
         end
+        -- else width/height should be a number; use that value,
+        -- clamped to minimum.
         self.dimensions[name] = math.max(self[name], min)
         return self.dimensions[name]
     end
 
+    -- If the widget is a layout root (and has no width/height),
+    -- it's the same size as the window.
     local parent = self.parent
-
     if not parent then
         local windowWidth, windowHeight = Backend.getWindowSize()
         local size = name == 'width' and windowWidth or windowHeight
@@ -327,15 +334,24 @@ function Widget:calculateDimension (name)
         return self.dimensions[name]
     end
 
+    -- Widgets expand to fit their parents when no width/height is specified.
     local parentDimension = parent:calculateDimension(name)
     parentDimension = parentDimension - (parent.margin or 0) * 2
     parentDimension = parentDimension - (parent.padding or 0) * 2
+
+    -- If the dimension is in the opposite direction of the parent flow
+    -- (for example if parent.flow is 'x' and the dimension is 'height'),
+    -- then return the parent dimension.
     local parentFlow = parent.flow or 'y'
     if (parentFlow ~= 'x' and name == 'width')
     or (parentFlow == 'x' and name == 'height') then
         self.dimensions[name] = math.max(parentDimension, min)
         return self.dimensions[name]
     end
+
+    -- If the dimension is in the same direction as the parent flow
+    -- (for example if parent.flow is 'x' and the dimension is 'width'),
+    -- then return an equal portion of the unclaimed space in the parent.
     local claimed = 0
     local unsized = 1
     for i, widget in ipairs(self.parent) do
@@ -399,9 +415,7 @@ function Widget:calculatePosition (axis)
             or axis ~= 'x' and (parent.scrollY or 0)
     end
     local parentPos = parent:calculatePosition(axis)
-    local p = parentPos - scroll
+    local p = parentPos - scroll + (parent.margin or 0) + (parent.padding or 0)
-    p = p + (parent.margin or 0)
-    p = p + (parent.padding or 0)
     local parentFlow = parent.flow or 'y'
     for i, widget in ipairs(parent) do
         if widget == self then

luigi/widget/sash.lua

@@ -32,8 +32,12 @@ local function setDimension (widget, name, size)
     local parentDimension = widget.parent:calculateDimension(name)
     local claimed = 0
     for i, sibling in ipairs(widget.parent) do
-        if sibling ~= widget and sibling[name] then
+        local value = sibling[name]
-            claimed = claimed + sibling[name]
+        if sibling ~= widget and value then
+            if value == 'auto' then
+                value = sibling:calculateDimensionMinimum(name)
+            end
+            claimed = claimed + value
         end
     end
     if claimed + size > parentDimension then
@@ -71,11 +75,13 @@ return function (self)
         local prevSize = prevSibling and prevSibling[dimension]
         local nextSize = nextSibling and nextSibling[dimension]
 
-        if prevSize then
+        if prevSize or not nextSize then
             setDimension(prevSibling, dimension,
                 event[axis] - prevSibling:calculatePosition(axis))
-        end
+        elseif nextSize then
-        if nextSize then
+            if nextSize == 'auto' then
+                nextSize = nextSibling:calculateDimensionMinimum(dimension)
+            end
             setDimension(nextSibling, dimension,
                 nextSibling:calculatePosition(axis) + nextSize - event[axis])
         end

luigi/widget/slider.lua

@@ -12,15 +12,13 @@ return function (self)
         return value < 0 and 0 or value > 1 and 1 or value
     end
 
-    self.value = clamp(self.value or 0.5)
+    self.value = clamp(self.value or 0)
     self.step = self.step or 0.01
 
     local spacer = self:addChild()
 
     local thumb = self:addChild {
-        type = 'button',
+        type = 'slider.thumb',
-        align = 'middle center',
-        margin = 0,
     }
 
     local function unpress ()

luigi/widget/stepper.lua

@@ -21,9 +21,9 @@ return function (self)
         self[index] = nil
     end
 
-    local before = self:addChild { type = 'stepper.left' }
+    local before = self:addChild { type = 'stepper.before' }
-    local view = self:addChild()
+    local view = self:addChild { type = 'stepper.view' }
-    local after = self:addChild { type = 'stepper.right' }
+    local after = self:addChild { type = 'stepper.after' }
 
     self:onReshape(function (event)
         if self.flow == 'x' then

luigi/widget/text.lua

@@ -182,7 +182,7 @@ return function (self)
         self.fontData = Backend.Font(self.font, self.size)
     end
 
-    self.value = self.value or self.text or ''
+    self.value = tostring(self.value or self.text or '')
 
     self.text = ''