Ui enhancements 2.0 (#31)

* canvas overhaul

* minor tweaks

* list mode for overview

* bugfixes + tweaks for editor 2.0

* minor tweaks

* more editor work

* refactor + new transitions

* use layout() where appropriate and cleanup

* mouse triple click + textEntry scroll ind

* cleanup

* cleanup + theme editor

* color rework + cleanup

* changes for deprecated ui methods

* can now use named colors

sys/modules/opus/ui/components/ActiveLayer.lua

@@ -1,32 +0,0 @@
-local class = require('opus.class')
-local UI    = require('opus.ui')
-
-UI.ActiveLayer = class(UI.Window)
-UI.ActiveLayer.defaults = {
-	UIElement = 'ActiveLayer',
-}
-function UI.ActiveLayer:layout()
-	UI.Window.layout(self)
-	if not self.canvas then
-		self.canvas = self:addLayer()
-	else
-		self.canvas:resize(self.width, self.height)
-	end
-end
-
-function UI.ActiveLayer:enable(...)
-	self.canvas:raise()
-	self.canvas:setVisible(true)
-	UI.Window.enable(self, ...)
-	if self.parent.transitionHint then
-		self:addTransition(self.parent.transitionHint)
-	end
-	self:focusFirst()
-end
-
-function UI.ActiveLayer:disable()
-	if self.canvas then
-		self.canvas:setVisible(false)
-	end
-	UI.Window.disable(self)
-end

sys/modules/opus/ui/components/Button.lua

@@ -2,32 +2,30 @@ local class = require('opus.class')
 local UI    = require('opus.ui')
 local Util  = require('opus.util')
 
-local colors = _G.colors
-
 UI.Button = class(UI.Window)
 UI.Button.defaults = {
 	UIElement = 'Button',
 	text = 'button',
-	backgroundColor = colors.lightGray,
-	backgroundFocusColor = colors.gray,
-	textFocusColor = colors.white,
-	textInactiveColor = colors.gray,
-	textColor = colors.black,
+	backgroundColor = 'lightGray',
+	backgroundFocusColor = 'gray',
+	textFocusColor = 'white',
+	textInactiveColor = 'gray',
+	textColor = 'black',
 	centered = true,
 	height = 1,
 	focusIndicator = ' ',
 	event = 'button_press',
 	accelerators = {
-		space = 'button_activate',
+		[ ' ' ] = 'button_activate',
 		enter = 'button_activate',
 		mouse_click = 'button_activate',
 	}
 }
-function UI.Button:setParent()
+function UI.Button:layout()
 	if not self.width and not self.ex then
-		self.width = #self.text + 2
+		self.width = self.noPadding and #self.text or #self.text + 2
 	end
-	UI.Window.setParent(self)
+	UI.Window.layout(self)
 end
 
 function UI.Button:draw()
@@ -35,13 +33,13 @@ function UI.Button:draw()
 	local bg = self.backgroundColor
 	local ind = ' '
 	if self.focused then
-		bg = self.backgroundFocusColor
-		fg = self.textFocusColor
+		bg = self:getProperty('backgroundFocusColor')
+		fg = self:getProperty('textFocusColor')
 		ind = self.focusIndicator
 	elseif self.inactive then
-		fg = self.textInactiveColor
+		fg = self:getProperty('textInactiveColor')
 	end
-	local text = ind .. self.text .. ' '
+	local text = self.noPadding and self.text or ind .. self.text .. ' '
 	if self.centered then
 		self:clear(bg)
 		self:centeredWrite(1 + math.floor(self.height / 2), text, bg, fg)
@@ -59,7 +57,7 @@ end
 
 function UI.Button:eventHandler(event)
 	if event.type == 'button_activate' then
-		self:emit({ type = self.event, button = self })
+		self:emit({ type = self.event, button = self, element = self })
 		return true
 	end
 	return false
@@ -73,7 +71,7 @@ function UI.Button.example()
 		},
 		button2 = UI.Button {
 			x = 2, y = 4,
-			backgroundColor = colors.green,
+			backgroundColor = 'green',
 			event = 'custom_event',
 		},
 		button3 = UI.Button {

sys/modules/opus/ui/components/Checkbox.lua

@@ -1,8 +1,6 @@
 local class = require('opus.class')
 local UI    = require('opus.ui')
 
-local colors = _G.colors
-
 UI.Checkbox = class(UI.Window)
 UI.Checkbox.defaults = {
 	UIElement = 'Checkbox',
@@ -11,9 +9,9 @@ UI.Checkbox.defaults = {
 	leftMarker = UI.extChars and '\124' or '[',
 	rightMarker = UI.extChars and '\124' or ']',
 	value = false,
-	textColor = colors.white,
-	backgroundColor = colors.black,
-	backgroundFocusColor = colors.lightGray,
+	textColor = 'white',
+	backgroundColor = 'black',
+	backgroundFocusColor = 'lightGray',
 	height = 1,
 	width = 3,
 	accelerators = {
@@ -21,11 +19,9 @@ UI.Checkbox.defaults = {
 		mouse_click = 'checkbox_toggle',
 	}
 }
-UI.Checkbox.inherits = {
-	labelBackgroundColor = 'backgroundColor',
-}
-function UI.Checkbox:postInit()
+function UI.Checkbox:layout()
 	self.width = self.label and #self.label + 4 or 3
+	UI.Window.layout(self)
 end
 
 function UI.Checkbox:draw()

sys/modules/opus/ui/components/Chooser.lua

@@ -11,8 +11,8 @@ UI.Chooser.defaults = {
 	nochoice = 'Select',
 	backgroundFocusColor = colors.lightGray,
 	textInactiveColor = colors.gray,
-	leftIndicator = UI.extChars and '\17' or '<',
-	rightIndicator = UI.extChars and '\16' or '>',
+	leftIndicator = UI.extChars and '\171' or '<',
+	rightIndicator = UI.extChars and '\187' or '>',
 	height = 1,
 	accelerators = {
 		space = 'choice_next',
@@ -20,7 +20,7 @@ UI.Chooser.defaults = {
 		left  = 'choice_prev',
 	}
 }
-function UI.Chooser:setParent()
+function UI.Chooser:layout()
 	if not self.width and not self.ex then
 		self.width = 1
 		for _,v in pairs(self.choices) do
@@ -30,7 +30,7 @@ function UI.Chooser:setParent()
 		end
 		self.width = self.width + 4
 	end
-	UI.Window.setParent(self)
+	UI.Window.layout(self)
 end
 
 function UI.Chooser:draw()

sys/modules/opus/ui/components/Dialog.lua

@@ -1,15 +1,11 @@
-local Canvas = require('opus.ui.canvas')
 local class  = require('opus.class')
 local UI     = require('opus.ui')
 
-local colors = _G.colors
-
 UI.Dialog = class(UI.SlideOut)
 UI.Dialog.defaults = {
 	UIElement = 'Dialog',
 	height = 7,
-	textColor = colors.black,
-	backgroundColor = colors.white,
+	noFill = true,
 	okEvent ='dialog_ok',
 	cancelEvent = 'dialog_cancel',
 }
@@ -18,22 +14,36 @@ function UI.Dialog:postInit()
 	self.titleBar = UI.TitleBar({ event = self.cancelEvent, title = self.title })
 end
 
-function UI.Dialog:show(...)
-	local canvas = self.parent:getCanvas()
-	self.oldPalette = canvas.palette
-	canvas:applyPalette(Canvas.darkPalette)
-	UI.SlideOut.show(self, ...)
-end
-
-function UI.Dialog:hide(...)
-	self.parent:getCanvas().palette = self.oldPalette
-	UI.SlideOut.hide(self, ...)
-	self.parent:draw()
-end
-
 function UI.Dialog:eventHandler(event)
 	if event.type == 'dialog_cancel' then
 		self:hide()
 	end
 	return UI.SlideOut.eventHandler(self, event)
 end
+
+function UI.Dialog.example()
+	return UI.Dialog {
+		title = 'Enter Starting Level',
+		height = 7,
+		form = UI.Form {
+			y = 3, x = 2, height = 4,
+			event = 'setStartLevel',
+			cancelEvent = 'slide_hide',
+			text = UI.Text {
+				x = 5, y = 1, width = 20,
+				textColor = 'gray',
+			},
+			textEntry = UI.TextEntry {
+				formKey = 'level',
+				x = 15, y = 1, width = 7,
+			},
+		},
+		statusBar = UI.StatusBar(),
+		enable = function(self)
+			require('opus.event').onTimeout(0, function()
+				self:show()
+				self:sync()
+			end)
+		end,
+	}
+end

sys/modules/opus/ui/components/DropMenu.lua

@@ -2,12 +2,10 @@ local class = require('opus.class')
 local UI    = require('opus.ui')
 local Util  = require('opus.util')
 
-local colors = _G.colors
-
 UI.DropMenu = class(UI.MenuBar)
 UI.DropMenu.defaults = {
 	UIElement = 'DropMenu',
-	backgroundColor = colors.white,
+	backgroundColor = 'white',
 	buttonClass = 'DropMenuItem',
 }
 function UI.DropMenu:layout()
@@ -32,42 +30,53 @@ function UI.DropMenu:layout()
 	self.height = #self.children + 1
 	self.width = maxWidth + 2
 
-	if not self.canvas then
-		self.canvas = self:addLayer()
-	else
-		self.canvas:resize(self.width, self.height)
+	if self.x + self.width > self.parent.width then
+		self.x = self.parent.width - self.width + 1
 	end
+
+	self:reposition(self.x, self.y, self.width, self.height)
 end
 
 function UI.DropMenu:enable()
-end
+	local menuBar = self.parent:find(self.menuUid)
+	local hasActive
 
-function UI.DropMenu:show(x, y)
-	self.x, self.y = x, y
-	self.canvas:move(x, y)
-	self.canvas:setVisible(true)
+	for _,c in pairs(self.children) do
+		if not c.spacer and menuBar then
+			c.inactive = not menuBar:getActive(c)
+		end
+		if not c.inactive then
+			hasActive = true
+		end
+	end
+
+	-- jump through a lot of hoops if all selections are inactive
+	-- there's gotta be a better way
+	-- lots of exception code just to handle drop menus
+	self.focus = not hasActive and function() end
 
 	UI.Window.enable(self)
-
+	if self.focus then
+		self:setFocus(self)
+	else
+		self:focusFirst()
+	end
 	self:draw()
-	self:capture(self)
-	self:focusFirst()
 end
 
-function UI.DropMenu:hide()
-	self:disable()
-	self.canvas:setVisible(false)
-	self:release(self)
+function UI.DropMenu:disable()
+	UI.Window.disable(self)
+	self:remove()
 end
 
 function UI.DropMenu:eventHandler(event)
 	if event.type == 'focus_lost' and self.enabled then
-		if not Util.contains(self.children, event.focused) then
-			self:hide()
+		if not (Util.contains(self.children, event.focused) or event.focused == self) then
+			self:disable()
 		end
 	elseif event.type == 'mouse_out' and self.enabled then
-		self:hide()
-		self:refocus()
+		self:disable()
+		self:setFocus(self.parent:find(self.lastFocus))
 	else
 		return UI.MenuBar.eventHandler(self, event)
 	end
@@ -83,6 +92,15 @@ function UI.DropMenu.example()
 					{ spacer = true },
 					{ text = 'Quit        ^q', event = 'quit'   },
 			} },
+			{ text = 'Edit', dropdown = {
+				{ text = 'Copy',           event = 'run' },
+				{ text = 'Paste        s', event = 'shell'  },
+			} },
+			{ text = '\187',
+				x = -3,
+				dropdown = {
+					{ text = 'Associations', event = 'associate' },
+			} },
 		}
 	}
 end

sys/modules/opus/ui/components/DropMenuItem.lua

@@ -1,20 +1,18 @@
 local class = require('opus.class')
 local UI    = require('opus.ui')
 
-local colors = _G.colors
-
 UI.DropMenuItem = class(UI.Button)
 UI.DropMenuItem.defaults = {
 	UIElement = 'DropMenuItem',
-	textColor = colors.black,
-	backgroundColor = colors.white,
-	textFocusColor = colors.white,
-	textInactiveColor = colors.lightGray,
-	backgroundFocusColor = colors.lightGray,
+	textColor = 'black',
+	backgroundColor = 'white',
+	textFocusColor = 'white',
+	textInactiveColor = 'lightGray',
+	backgroundFocusColor = 'lightGray',
 }
 function UI.DropMenuItem:eventHandler(event)
 	if event.type == 'button_activate' then
-		self.parent:hide()
+		self.parent:disable()
 	end
 	return UI.Button.eventHandler(self, event)
 end

sys/modules/opus/ui/components/Embedded.lua

@@ -1,62 +1,63 @@
 local class    = require('opus.class')
+local Event    = require('opus.event')
 local Terminal = require('opus.terminal')
 local UI       = require('opus.ui')
 
-local colors = _G.colors
-
 UI.Embedded = class(UI.Window)
 UI.Embedded.defaults = {
 	UIElement = 'Embedded',
-	backgroundColor = colors.black,
-	textColor = colors.white,
+	backgroundColor = 'black',
+	textColor = 'white',
 	maxScroll = 100,
 	accelerators = {
 		up = 'scroll_up',
 		down = 'scroll_down',
 	}
 }
-function UI.Embedded:setParent()
-	UI.Window.setParent(self)
-
-	self.win = Terminal.window(UI.term.device, self.x, self.y, self.width, self.height, false)
-	self.win.setMaxScroll(self.maxScroll)
-
-	local canvas = self:getCanvas()
-	self.win.getCanvas().parent = canvas
-	table.insert(canvas.layers, self.win.getCanvas())
-	self.canvas = self.win.getCanvas()
-
-	self.win.setCursorPos(1, 1)
-	self.win.setBackgroundColor(self.backgroundColor)
-	self.win.setTextColor(self.textColor)
-	self.win.clear()
-end
-
 function UI.Embedded:layout()
 	UI.Window.layout(self)
-	if self.win then
-		self.win.reposition(self.x, self.y, self.width, self.height)
+
+	if not self.win then
+		local t
+		function self.render()
+			if not t then
+				t = Event.onTimeout(0, function()
+					t = nil
+					if self.focused then
+						self:setCursorPos(self.win.getCursorPos())
+					end
+					self:sync()
+				end)
+			end
+		end
+		self.win = Terminal.window(UI.term.device, self.x, self.y, self.width, self.height, false)
+		self.win.canvas = self
+		self.win.setMaxScroll(self.maxScroll)
+		self.win.setCursorPos(1, 1)
+		self.win.setBackgroundColor(self.backgroundColor)
+		self.win.setTextColor(self.textColor)
+		self.win.clear()
 	end
 end
 
 function UI.Embedded:draw()
-	self.canvas:dirty()
+	self:dirty()
+end
+
+function UI.Embedded:focus()
+	-- allow scrolling
+	if self.focused then
+		self:setCursorBlink(self.win.getCursorBlink())
+	end
 end
 
 function UI.Embedded:enable()
-	self.canvas:setVisible(true)
-	self.canvas:raise()
-	if self.visible then
-		-- the window will automatically update on changes
-		-- the canvas does not need to be rendereed
-		self.win.setVisible(true)
-	end
 	UI.Window.enable(self)
-	self.canvas:dirty()
+	self.win.setVisible(true)
+	self:dirty()
 end
 
 function UI.Embedded:disable()
-	self.canvas:setVisible(false)
 	self.win.setVisible(false)
 	UI.Window.disable(self)
 end
@@ -71,17 +72,12 @@ function UI.Embedded:eventHandler(event)
 	end
 end
 
-function UI.Embedded:focus()
-	-- allow scrolling
-end
-
 function UI.Embedded.example()
-	local Event = require('opus.event')
 	local Util  = require('opus.util')
 	local term  = _G.term
 
 	return UI.Embedded {
-		visible = true,
+		y = 2, x = 2, ex = -2, ey = -2,
 		enable = function (self)
 			UI.Embedded.enable(self)
 			Event.addRoutine(function()
@@ -90,10 +86,11 @@ function UI.Embedded.example()
 				term.redirect(oterm)
 			end)
 		end,
-		eventHandler = function(_, event)
+		eventHandler = function(self, event)
 			if event.type == 'key' then
 				return true
 			end
+			return UI.Embedded.eventHandler(self, event)
 		end
 	}
 end

sys/modules/opus/ui/components/FileSelect.lua

@@ -0,0 +1,118 @@
+local class = require('opus.class')
+local UI   = require('opus.ui')
+local Util = require('opus.util')
+
+local colors = _G.colors
+local fs     = _G.fs
+
+UI.FileSelect = class(UI.Window)
+UI.FileSelect.defaults = {
+	UIElement = 'FileSelect',
+}
+function UI.FileSelect:postInit()
+    self.grid = UI.ScrollingGrid {
+        x = 2, y = 2, ex = -2, ey = -4,
+        dir = '/',
+        sortColumn = 'name',
+        columns = {
+            { heading = 'Name', key = 'name' },
+            { heading = 'Size', key = 'size', width = 5 }
+        },
+        getDisplayValues = function(_, row)
+            if row.size then
+                row = Util.shallowCopy(row)
+                row.size = Util.toBytes(row.size)
+            end
+            return row
+        end,
+        getRowTextColor = function(_, file)
+            if file.isDir then
+                return colors.cyan
+            end
+            if file.isReadOnly then
+                return colors.pink
+            end
+            return colors.white
+        end,
+        sortCompare = function(self, a, b)
+            if self.sortColumn == 'size' then
+                return a.size < b.size
+            end
+            if a.isDir == b.isDir then
+                return a.name:lower() < b.name:lower()
+            end
+            return a.isDir
+        end,
+        draw = function(self)
+            local files = fs.listEx(self.dir)
+            if #self.dir > 0 then
+                table.insert(files, {
+                    name = '..',
+                    isDir = true,
+                })
+            end
+            self:setValues(files)
+            self:setIndex(1)
+            UI.Grid.draw(self)
+        end,
+    }
+    self.path = UI.TextEntry {
+        x  =  2,
+        y  = -2,
+        ex = -11,
+        limit = 256,
+        accelerators = {
+            enter = 'path_enter',
+        }
+    }
+    self.cancel = UI.Button {
+        text = 'Cancel',
+        x = -9,
+        y = -2,
+        event = 'select_cancel',
+    }
+end
+
+function UI.FileSelect:draw()
+    self:fillArea(1, 1, self.width, self.height, string.rep('\127', self.width), colors.black, colors.gray)
+    self:drawChildren()
+end
+
+function UI.FileSelect:enable(path)
+    self:setPath(path or '')
+    UI.Window.enable(self)
+end
+
+function UI.FileSelect:setPath(path)
+	self.grid.dir = path
+	while not fs.isDir(self.grid.dir) do
+		self.grid.dir = fs.getDir(self.grid.dir)
+	end
+	self.path.value = self.grid.dir
+end
+
+function UI.FileSelect:eventHandler(event)
+	if event.type == 'grid_select' then
+		self.grid.dir = fs.combine(self.grid.dir, event.selected.name)
+		self.path.value = self.grid.dir
+		if event.selected.isDir then
+			self.grid:draw()
+			self.path:draw()
+        else
+            self:emit({ type = 'select_file', file = '/' .. self.path.value, element = self })
+        end
+        return true
+
+    elseif event.type == 'path_enter' then
+        if self.path.value then
+            if fs.isDir(self.path.value) then
+                self:setPath(self.path.value)
+                self.grid:draw()
+                self.path:draw()
+            else
+                self:emit({ type = 'select_file', file = '/' .. self.path.value, element = self })
+            end
+        end
+        return true
+	end
+end

sys/modules/opus/ui/components/FlatButton.lua

@@ -0,0 +1,16 @@
+local class = require('opus.class')
+local UI    = require('opus.ui')
+
+UI.FlatButton = class(UI.Button)
+UI.FlatButton.defaults = {
+	UIElement = 'FlatButton',
+	textColor = 'black',
+	textFocusColor = 'white',
+	noPadding = true,
+}
+function UI.FlatButton:setParent()
+	self.backgroundColor = self.parent:getProperty('backgroundColor')
+	self.backgroundFocusColor = self.backgroundColor
+
+	UI.Button.setParent(self)
+end

sys/modules/opus/ui/components/Form.lua

@@ -2,8 +2,6 @@ local class = require('opus.class')
 local Sound = require('opus.sound')
 local UI    = require('opus.ui')
 
-local colors = _G.colors
-
 UI.Form = class(UI.Window)
 UI.Form.defaults = {
 	UIElement = 'Form',
@@ -68,7 +66,7 @@ function UI.Form:createForm()
 				table.insert(self.children, UI.Text {
 					x = self.margin,
 					y = child.y,
-					textColor = colors.black,
+					textColor = 'black',
 					width = #child.formLabel,
 					value = child.formLabel,
 				})

sys/modules/opus/ui/components/Grid.lua

@@ -2,10 +2,8 @@ local class = require('opus.class')
 local UI    = require('opus.ui')
 local Util  = require('opus.util')
 
-local colors = _G.colors
 local os     = _G.os
 local _rep   = string.rep
-local _sub   = string.sub
 
 local function safeValue(v)
 	local t = type(v)
@@ -23,18 +21,7 @@ function Writer:init(element, y)
 end
 
 function Writer:write(s, width, align, bg, fg)
-	local len = #tostring(s or '')
-	if len > width then
-		s = _sub(s, 1, width)
-	end
-	local padding = len < width and _rep(' ', width - len)
-	if padding then
-		if align == 'right' then
-			s = padding .. s
-		else
-			s = s .. padding
-		end
-	end
+	s = Util.widthify(s, width, align)
 	self.element:write(self.x, self.y, s, bg, fg)
 	self.x = self.x + width
 end
@@ -56,16 +43,16 @@ UI.Grid.defaults = {
 	disableHeader = false,
 	headerHeight = 1,
 	marginRight = 0,
-	textColor = colors.white,
-	textSelectedColor = colors.white,
-	backgroundColor = colors.black,
-	backgroundSelectedColor = colors.gray,
-	headerBackgroundColor = colors.cyan,
-	headerTextColor = colors.white,
-	headerSortColor = colors.yellow,
-	unfocusedTextSelectedColor = colors.white,
-	unfocusedBackgroundSelectedColor = colors.gray,
-	focusIndicator = UI.extChars and '\183' or '>',
+	textColor = 'white',
+	textSelectedColor = 'white',
+	backgroundColor = 'black',
+	backgroundSelectedColor = 'gray',
+	headerBackgroundColor = 'primary',
+	headerTextColor = 'white',
+	headerSortColor = 'yellow',
+	unfocusedTextSelectedColor = 'white',
+	unfocusedBackgroundSelectedColor = 'gray',
+	focusIndicator = UI.extChars and '\26' or '>',
 	sortIndicator = ' ',
 	inverseSortIndicator = UI.extChars and '\24' or '^',
 	values = { },
@@ -83,8 +70,8 @@ UI.Grid.defaults = {
 		[ 'control-f' ] = 'scroll_pageDown',
 	},
 }
-function UI.Grid:setParent()
-	UI.Window.setParent(self)
+function UI.Grid:layout()
+	UI.Window.layout(self)
 
 	for _,c in pairs(self.columns) do
 		c.cw = c.width
@@ -522,7 +509,7 @@ function UI.Grid.example()
 			values = values,
 			columns = {
 				{ heading = 'key', key = 'key', width = 6,  },
-				{ heading = 'value', key = 'value', textColor = colors.yellow },
+				{ heading = 'value', key = 'value', textColor = 'yellow' },
 			},
 		},
 		autospace = UI.Grid {

sys/modules/opus/ui/components/Image.lua

@@ -1,19 +1,28 @@
 local class = require('opus.class')
 local UI    = require('opus.ui')
+local Util  = require('opus.util')
 
+local lookup = '0123456789abcdef'
+
+-- handle files produced by Paint
 UI.Image = class(UI.Window)
 UI.Image.defaults = {
 	UIElement = 'Image',
 	event = 'button_press',
 }
-function UI.Image:setParent()
-	if self.image then
+function UI.Image:postInit()
+	if self.filename then
+		self.image = Util.readLines(self.filename)
+	end
+
+	if self.image and not (self.height or self.ey) then
 		self.height = #self.image
 	end
-	if self.image and not self.width then
-		self.width = #self.image[1]
+	if self.image and not (self.width or self.ex) then
+		for i = 1, self.height do
+			self.width = math.max(self.width or 0, #self.image[i])
+		end
 	end
-	UI.Window.setParent(self)
 end
 
 function UI.Image:draw()
@@ -22,19 +31,22 @@ function UI.Image:draw()
 		for y = 1, #self.image do
 			local line = self.image[y]
 			for x = 1, #line do
-				local ch = line[x]
-				if type(ch) == 'number' then
-					if ch > 0 then
-						self:write(x, y, ' ', ch)
-					end
-				else
-					self:write(x, y, ch)
+				local ch = lookup:find(line:sub(x, x))
+				if ch then
+					self:write(x, y, ' ', 2 ^ (ch -1))
 				end
 			end
 		end
 	end
+	self:drawChildren()
 end
 
 function UI.Image:setImage(image)
 	self.image = image
 end
+
+function UI.Image.example()
+	return UI.Image {
+		filename = 'test.paint',
+	}
+end

sys/modules/opus/ui/components/Menu.lua

@@ -13,8 +13,7 @@ function UI.Menu:postInit()
 	self.pageSize = #self.menuItems
 end
 
-function UI.Menu:setParent()
-	UI.Grid.setParent(self)
+function UI.Menu:layout()
 	self.itemWidth = 1
 	for _,v in pairs(self.values) do
 		if #v.prompt > self.itemWidth then
@@ -28,6 +27,7 @@ function UI.Menu:setParent()
 	else
 		self.width = self.itemWidth + 2
 	end
+	UI.Grid.layout(self)
 end
 
 function UI.Menu:center()

sys/modules/opus/ui/components/MenuBar.lua

@@ -1,28 +1,15 @@
 local class = require('opus.class')
 local UI    = require('opus.ui')
 
-local colors = _G.colors
-
-local function getPosition(element)
-	local x, y = 1, 1
-	repeat
-		x = element.x + x - 1
-		y = element.y + y - 1
-		element = element.parent
-	until not element
-	return x, y
-end
-
 UI.MenuBar = class(UI.Window)
 UI.MenuBar.defaults = {
 	UIElement = 'MenuBar',
 	buttons = { },
 	height = 1,
-	backgroundColor = colors.lightGray,
-	textColor = colors.black,
+	backgroundColor = 'secondary',
+	textColor = 'black',
 	spacing = 2,
 	lastx = 1,
-	showBackButton = false,
 	buttonClass = 'MenuItem',
 }
 function UI.MenuBar:postInit()
@@ -62,10 +49,6 @@ function UI.MenuBar:addButtons(buttons)
 			else
 				table.insert(self.children, button)
 			end
-
-			if button.dropdown then
-				button.dropmenu = UI.DropMenu { buttons = button.dropdown }
-			end
 		end
 	end
 	if self.parent then
@@ -78,23 +61,28 @@ function UI.MenuBar:getActive(menuItem)
 end
 
 function UI.MenuBar:eventHandler(event)
-	if event.type == 'button_press' and event.button.dropmenu then
-		if event.button.dropmenu.enabled then
-			event.button.dropmenu:hide()
-			self:refocus()
-			return true
-		else
-			local x, y = getPosition(event.button)
-			if x + event.button.dropmenu.width > self.width then
-				x = self.width - event.button.dropmenu.width + 1
-			end
-			for _,c in pairs(event.button.dropmenu.children) do
-				if not c.spacer then
-					c.inactive = not self:getActive(c)
-				end
-			end
-			event.button.dropmenu:show(x, y + 1)
+	if event.type == 'button_press' and event.button.dropdown then
+		local function getPosition(element)
+			local x, y = 1, 1
+			repeat
+				x = element.x + x - 1
+				y = element.y + y - 1
+				element = element.parent
+			until not element
+			return x, y
 		end
+
+		local x, y = getPosition(event.button)
+
+		local menu = UI.DropMenu {
+			buttons = event.button.dropdown,
+			x = x,
+			y = y + 1,
+			lastFocus = event.button.uid,
+			menuUid = self.uid,
+		}
+		self.parent:add({ dropmenu = menu })
+
 		return true
 	end
 end
@@ -103,7 +91,8 @@ function UI.MenuBar.example()
 	return UI.MenuBar {
 		buttons = {
 			{ text = 'Choice1', event = 'event1' },
-			{ text = 'Choice2', event = 'event2' },
+			{ text = 'Choice2', event = 'event2', inactive = true },
+			{ text = 'Choice3', event = 'event3' },
 		}
 	}
 end

sys/modules/opus/ui/components/MenuItem.lua

@@ -1,13 +1,9 @@
 local class = require('opus.class')
 local UI    = require('opus.ui')
 
-local colors = _G.colors
-
-UI.MenuItem = class(UI.Button)
+UI.MenuItem = class(UI.FlatButton)
 UI.MenuItem.defaults = {
 	UIElement = 'MenuItem',
-	textColor = colors.black,
-	backgroundColor = colors.lightGray,
-	textFocusColor = colors.white,
-	backgroundFocusColor = colors.lightGray,
+	noPadding = false,
+	textInactiveColor = 'gray',
 }

sys/modules/opus/ui/components/MiniSlideOut.lua

@@ -0,0 +1,31 @@
+local class = require('opus.class')
+local UI    = require('opus.ui')
+
+UI.MiniSlideOut = class(UI.SlideOut)
+UI.MiniSlideOut.defaults = {
+	UIElement = 'MiniSlideOut',
+    noFill = true,
+    backgroundColor = 'primary',
+    height = 1,
+}
+function UI.MiniSlideOut:postInit()
+    self.close_button = UI.Button {
+        x = -1,
+        backgroundColor = self.backgroundColor,
+        backgroundFocusColor = self.backgroundColor,
+        text = 'x',
+        event = 'slide_hide',
+        noPadding = true,
+    }
+    if self.label then
+        self.label_text = UI.Text {
+            x = 2,
+            value = self.label,
+        }
+    end
+end
+
+function UI.MiniSlideOut:show(...)
+    UI.SlideOut.show(self, ...)
+    self:addTransition('slideLeft', { easing = 'outBounce' })
+end

sys/modules/opus/ui/components/NftImage.lua

@@ -5,17 +5,18 @@ UI.NftImage = class(UI.Window)
 UI.NftImage.defaults = {
 	UIElement = 'NftImage',
 }
-function UI.NftImage:setParent()
-	if self.image then
+function UI.NftImage:postInit()
+	if self.image and not (self.ey or self.height) then
 		self.height = self.image.height
 	end
-	if self.image and not self.width then
+	if self.image and not (self.ex or self.width) then
 		self.width = self.image.width
 	end
-	UI.Window.setParent(self)
 end
 
 function UI.NftImage:draw()
+	self:clear()
+
 	if self.image then
 		-- due to blittle, the background and foreground transparent
 		-- color is the same as the background color
@@ -25,8 +26,6 @@ function UI.NftImage:draw()
 				self:write(x, y, self.image.text[y][x], self.image.bg[y][x], self.image.fg[y][x] or bg)
 			end
 		end
-	else
-		self:clear()
 	end
 end
 

sys/modules/opus/ui/components/Notification.lua

@@ -4,36 +4,34 @@ local Sound = require('opus.sound')
 local UI    = require('opus.ui')
 local Util  = require('opus.util')
 
-local colors = _G.colors
-
 UI.Notification = class(UI.Window)
 UI.Notification.defaults = {
 	UIElement = 'Notification',
-	backgroundColor = colors.gray,
+	backgroundColor = 'gray',
 	closeInd = UI.extChars and '\215' or '*',
 	height = 3,
 	timeout = 3,
 	anchor = 'bottom',
 }
-function UI.Notification:draw()
+function UI.Notification.draw()
 end
 
-function UI.Notification:enable()
+function UI.Notification.enable()
 end
 
 function UI.Notification:error(value, timeout)
-	self.backgroundColor = colors.red
+	self.backgroundColor = 'red'
 	Sound.play('entity.villager.no', .5)
 	self:display(value, timeout)
 end
 
 function UI.Notification:info(value, timeout)
-	self.backgroundColor = colors.lightGray
+	self.backgroundColor = 'lightGray'
 	self:display(value, timeout)
 end
 
 function UI.Notification:success(value, timeout)
-	self.backgroundColor = colors.green
+	self.backgroundColor = 'green'
 	self:display(value, timeout)
 end
 
@@ -43,32 +41,34 @@ function UI.Notification:cancel()
 		self.timer = nil
 	end
 
-	if self.canvas then
-		self.enabled = false
-		self.canvas:removeLayer()
-		self.canvas = nil
-	end
+	self:disable()
 end
 
 function UI.Notification:display(value, timeout)
-	self:cancel()
-	self.enabled = true
 	local lines = Util.wordWrap(value, self.width - 3)
+
+	self.enabled = true
 	self.height = #lines
 
 	if self.anchor == 'bottom' then
 		self.y = self.parent.height - self.height + 1
-		self.canvas = self:addLayer(self.backgroundColor, self.textColor)
 		self:addTransition('expandUp', { ticks = self.height })
 	else
-		self.canvas = self:addLayer(self.backgroundColor, self.textColor)
 		self.y = 1
 	end
-	self.canvas:setVisible(true)
+
+	self:reposition(self.x, self.y, self.width, self.height)
+	self:raise()
 	self:clear()
 	for k,v in pairs(lines) do
 		self:write(2, k, v)
 	end
+	self:write(self.width, 1, self.closeInd)
+
+	if self.timer then
+		Event.off(self.timer)
+		self.timer = nil
+	end
 
 	timeout = timeout or self.timeout
 	if timeout > 0 then
@@ -77,7 +77,6 @@ function UI.Notification:display(value, timeout)
 			self:sync()
 		end)
 	else
-		self:write(self.width, 1, self.closeInd)
 		self:sync()
 	end
 end
@@ -92,7 +91,7 @@ function UI.Notification:eventHandler(event)
 end
 
 function UI.Notification.example()
-	return UI.ActiveLayer {
+	return UI.Window {
 		notify1 = UI.Notification {
 			anchor = 'top',
 		},
@@ -111,7 +110,9 @@ function UI.Notification.example()
 			if event.type == 'test_success' then
 				self.notify1:success('Example text')
 			elseif event.type == 'test_error' then
-				self.notify2:error('Example text', 0)
+				self.notify2:error([[Example text test test
+test test test test test
+test test test]], 0)
 			end
 		end,
 	}

sys/modules/opus/ui/components/Page.lua

@@ -1,60 +1,31 @@
-local Canvas = require('opus.ui.canvas')
 local class  = require('opus.class')
 local UI     = require('opus.ui')
 local Util   = require('opus.util')
 
-local colors = _G.colors
-
--- need to add offsets to this test
-local function getPosition(element)
-	local x, y = 1, 1
-	repeat
-		x = element.x + x - 1
-		y = element.y + y - 1
-		element = element.parent
-	until not element
-	return x, y
-end
-
 UI.Page = class(UI.Window)
 UI.Page.defaults = {
 	UIElement = 'Page',
 	accelerators = {
 		down = 'focus_next',
+		scroll_down = 'focus_next',
 		enter = 'focus_next',
 		tab = 'focus_next',
 		['shift-tab' ] = 'focus_prev',
 		up = 'focus_prev',
+		scroll_up = 'focus_prev',
 	},
-	backgroundColor = colors.cyan,
-	textColor = colors.white,
+	backgroundColor = 'primary',
+	textColor = 'white',
 }
 function UI.Page:postInit()
-	self.parent = self.parent or UI.defaultDevice
+	self.parent = self.parent or UI.term
 	self.__target = self
-	self.canvas = Canvas({
-		x = 1, y = 1, width = self.parent.width, height = self.parent.height,
-		isColor = self.parent.isColor,
-	})
-	self.canvas:clear(self.backgroundColor, self.textColor)
-end
-
-function UI.Page:enable()
-	self.canvas.visible = true
-	UI.Window.enable(self)
-
-	if not self.focused or not self.focused.enabled then
-		self:focusFirst()
-	end
-end
-
-function UI.Page:disable()
-	self.canvas.visible = false
-	UI.Window.disable(self)
 end
 
 function UI.Page:sync()
 	if self.enabled then
+		self:checkFocus()
+		self.parent:setCursorBlink(self.focused and self.focused.cursorBlink)
 		self.parent:sync()
 	end
 end
@@ -73,22 +44,23 @@ function UI.Page:pointToChild(x, y)
 	if self.__target == self then
 		return UI.Window.pointToChild(self, x, y)
 	end
-	x = x + self.offx - self.x + 1
-	y = y + self.offy - self.y + 1
---[[
-	-- this is supposed to fix when there are multiple sub canvases
-	local absX, absY = getPosition(self.__target)
-	if self.__target.canvas then
-		x = x - (self.__target.canvas.x - self.__target.x)
-		y = y - (self.__target.canvas.y - self.__target.y)
-		_syslog({'raw', self.__target.canvas.y, self.__target.y})
+
+	local function getPosition(element)
+		local x, y = 1, 1
+		repeat
+			x = element.x + x - 1
+			y = element.y + y - 1
+			element = element.parent
+		until not element
+		return x, y
 	end
-	]]
-	return self.__target:pointToChild(x, y)
+
+	local absX, absY = getPosition(self.__target)
+	return self.__target:pointToChild(x - absX + self.__target.x, y - absY + self.__target.y)
 end
 
 function UI.Page:getFocusables()
-	if self.__target == self or self.__target.pageType ~= 'modal' then
+	if self.__target == self or not self.__target.modal then
 		return UI.Window.getFocusables(self)
 	end
 	return self.__target:getFocusables()
@@ -149,12 +121,17 @@ function UI.Page:setFocus(child)
 	if not child.focused then
 		child.focused = true
 		child:emit({ type = 'focus_change', focused = child })
-		--self:emit({ type = 'focus_change', focused = child })
 	end
 
 	child:focus()
 end
 
+function UI.Page:checkFocus()
+	if not self.focused or not self.focused.enabled then
+		self.__target:focusFirst()
+	end
+end
+
 function UI.Page:eventHandler(event)
 	if self.focused then
 		if event.type == 'focus_next' then

sys/modules/opus/ui/components/ProgressBar.lua

@@ -1,39 +1,31 @@
 local class = require('opus.class')
 local UI    = require('opus.ui')
 
-local colors = _G.colors
-
 UI.ProgressBar = class(UI.Window)
 UI.ProgressBar.defaults = {
 	UIElement = 'ProgressBar',
-	backgroundColor = colors.gray,
+	backgroundColor = 'gray',
 	height = 1,
-	progressColor = colors.lime,
+	progressColor = 'lime',
 	progressChar = UI.extChars and '\153' or ' ',
 	fillChar = ' ',
-	fillColor = colors.gray,
-	textColor = colors.green,
+	fillColor = 'gray',
+	textColor = 'green',
 	value = 0,
 }
 function UI.ProgressBar:draw()
 	local width = math.ceil(self.value / 100 * self.width)
 
-	local filler = string.rep(self.fillChar, self.width)
-	local progress = string.rep(self.progressChar, width)
-
-	for i = 1, self.height do
-		self:write(1, i, filler, nil, self.fillColor)
-		self:write(1, i, progress, self.progressColor)
-	end
+	self:fillArea(width + 1, 1, self.width - width, self.height, self.fillChar, nil, self.fillColor)
+	self:fillArea(1, 1, width, self.height, self.progressChar, self.progressColor)
 end
 
 function UI.ProgressBar.example()
-	local Event = require('opus.event')
 	return UI.ProgressBar {
-		x = 2, ex = -2, y = 2,
+		x = 2, ex = -2, y = 2, height = 2,
 		focus = function() end,
 		enable = function(self)
-			Event.onInterval(.25, function()
+			require('opus.event').onInterval(.25, function()
 				self.value = self.value == 100 and 0 or self.value + 5
 				self:draw()
 				self:sync()

sys/modules/opus/ui/components/Question.lua

@@ -0,0 +1,27 @@
+local class = require('opus.class')
+local UI    = require('opus.ui')
+
+UI.Question = class(UI.MiniSlideOut)
+UI.Question.defaults = {
+    UIElement = 'Question',
+    accelerators = {
+        y = 'question_yes',
+        n = 'question_no',
+    }
+}
+function UI.Question:postInit()
+    local x = self.label and #self.label + 3 or 1
+
+    self.yes_button = UI.Button {
+        x = x,
+        text = 'Yes',
+        backgroundColor = 'primary',
+        event = 'question_yes',
+    }
+    self.no_button = UI.Button {
+        x = x + 5,
+        text = 'No',
+        backgroundColor = 'primary',
+        event = 'question_no',
+    }
+end

sys/modules/opus/ui/components/ScrollBar.lua

@@ -17,7 +17,13 @@ UI.ScrollBar.defaults = {
 	ey = -1,
 }
 function UI.ScrollBar:draw()
-	local view = self.parent:getViewArea()
+	local parent = self.target or self.parent --self:find(self.target)
+	local view = parent:getViewArea()
+
+	self:clear()
+
+	-- ...
+	self:write(1, 1, ' ', view.fill)
 
 	if view.totalHeight > view.height then
 		local maxScroll = view.totalHeight - view.height
@@ -27,7 +33,7 @@ function UI.ScrollBar:draw()
 
 		local row = view.y
 		if not view.static then  -- does the container scroll ?
-			self.height = view.totalHeight
+			self:reposition(self.x, self.y, self.width, view.totalHeight)
 		end
 
 		for i = 1, view.height - 2 do
@@ -56,16 +62,17 @@ end
 function UI.ScrollBar:eventHandler(event)
 	if event.type == 'mouse_click' or event.type == 'mouse_doubleclick' then
 		if event.x == 1 then
-			local view = self.parent:getViewArea()
+			local parent = self.target or self.parent --self:find(self.target)
+			local view = parent:getViewArea()
 			if view.totalHeight > view.height then
 				if event.y == view.y then
-					self:emit({ type = 'scroll_up'})
+					parent:emit({ type = 'scroll_up'})
 				elseif event.y == view.y + view.height - 1 then
-					self:emit({ type = 'scroll_down'})
+					parent:emit({ type = 'scroll_down'})
 				else
 					local percent = (event.y - view.y) / (view.height - 2)
 					local y = math.floor((view.totalHeight - view.height) * percent)
-					self:emit({ type = 'scroll_to', offset = y })
+					parent :emit({ type = 'scroll_to', offset = y })
 				end
 			end
 			return true

sys/modules/opus/ui/components/ScrollingGrid.lua

@@ -29,6 +29,7 @@ function UI.ScrollingGrid:getViewArea()
 		height      = self.pageSize,           -- viewable height
 		totalHeight = Util.size(self.values),  -- total height
 		offsetY     = self.scrollOffset,       -- scroll offset
+		fill        = not self.disableHeader and self.headerBackgroundColor,
 	}
 end
 
@@ -57,3 +58,21 @@ function UI.ScrollingGrid:setIndex(index)
 	end
 	UI.Grid.setIndex(self, index)
 end
+
+function UI.ScrollingGrid.example()
+	local values = { }
+	for i = 1, 20 do
+		table.insert(values, { key = 'key' .. i, value = 'value' .. i })
+	end
+	return UI.ScrollingGrid {
+		values = values,
+		sortColumn = 'key',
+		columns = {
+			{ heading = 'key', key = 'key' },
+			{ heading = 'value', key = 'value' },
+		},
+		accelerators = {
+			grid_select = 'custom_select',
+		}
+	}
+end

sys/modules/opus/ui/components/SlideOut.lua

@@ -4,17 +4,9 @@ local UI    = require('opus.ui')
 UI.SlideOut = class(UI.Window)
 UI.SlideOut.defaults = {
 	UIElement = 'SlideOut',
-	pageType = 'modal',
+	transitionHint = 'expandUp',
+	modal = true,
 }
-function UI.SlideOut:layout()
-	UI.Window.layout(self)
-	if not self.canvas then
-		self.canvas = self:addLayer()
-	else
-		self.canvas:resize(self.width, self.height)
-	end
-end
-
 function UI.SlideOut:enable()
 end
 
@@ -27,24 +19,20 @@ function UI.SlideOut:toggle()
 end
 
 function UI.SlideOut:show(...)
-	self:addTransition('expandUp')
-	self.canvas:raise()
-	self.canvas:setVisible(true)
 	UI.Window.enable(self, ...)
 	self:draw()
-	self:capture(self)
 	self:focusFirst()
 end
 
-function UI.SlideOut:disable()
-	self.canvas:setVisible(false)
-	UI.Window.disable(self)
-end
-
 function UI.SlideOut:hide()
 	self:disable()
-	self:release(self)
-	self:refocus()
+end
+
+function UI.SlideOut:draw()
+	if not self.noFill then
+		self:fillArea(1, 1, self.width, self.height, string.rep('\127', self.width), 'black', 'gray')
+	end
+	self:drawChildren()
 end
 
 function UI.SlideOut:eventHandler(event)
@@ -59,24 +47,27 @@ function UI.SlideOut:eventHandler(event)
 end
 
 function UI.SlideOut.example()
-	-- for the transistion to work properly, the parent must have a canvas
-	return UI.ActiveLayer {
-		y = 2,
+	return UI.Window {
+		y = 3,
+		backgroundColor = 2048,
 		button = UI.Button {
 			x = 2, y = 5,
 			text = 'show',
 		},
 		slideOut = UI.SlideOut {
-			backgroundColor = _G.colors.yellow,
-			y = -4, height = 4, x = 3, ex = -3,
+			backgroundColor = 16,
+			y = -7, height = 4, x = 3, ex = -3,
+			titleBar = UI.TitleBar {
+				title = 'test',
+			},
 			button = UI.Button {
 				x = 2, y = 2,
 				text = 'hide',
+				--visualize = true,
 			},
 		},
 		eventHandler = function (self, event)
 			if event.type == 'button_press' then
-				self.slideOut.canvas.xxx = true
 				self.slideOut:toggle()
 			end
 		end,

sys/modules/opus/ui/components/Slider.lua

@@ -2,17 +2,15 @@ local class  = require('opus.class')
 local UI     = require('opus.ui')
 local Util   = require('opus.util')
 
-local colors = _G.colors
-
 UI.Slider = class(UI.Window)
 UI.Slider.defaults = {
 	UIElement = 'Slider',
 	height = 1,
 	barChar = UI.extChars and '\140' or '-',
-	barColor = colors.gray,
+	barColor = 'gray',
 	sliderChar = UI.extChars and '\143' or '\124',
-	sliderColor = colors.blue,
-	sliderFocusColor = colors.lightBlue,
+	sliderColor = 'blue',
+	sliderFocusColor = 'lightBlue',
 	leftBorder = UI.extChars and '\141' or '\124',
 	rightBorder = UI.extChars and '\142' or '\124',
 	value = 0,
@@ -57,8 +55,16 @@ end
 
 function UI.Slider:eventHandler(event)
 	if event.type == "mouse_down" or event.type == "mouse_drag" then
+
+		local pos = event.x - 1
+		if event.type == 'mouse_down' then
+			self.anchor = event.x - 1
+		else
+			pos = self.anchor + event.dx
+		end
+
 		local range = self.max - self.min
-		local i = (event.x - 1) / (self.width - 1)
+		local i = pos / (self.width - 1)
 		self.value = self.min + (i * range)
 		self:emit({ type = self.event, value = self.value, element = self })
 		self:draw()

sys/modules/opus/ui/components/StatusBar.lua

@@ -3,17 +3,16 @@ local Event = require('opus.event')
 local UI    = require('opus.ui')
 local Util  = require('opus.util')
 
-local colors = _G.colors
-
 UI.StatusBar = class(UI.Window)
 UI.StatusBar.defaults = {
 	UIElement = 'StatusBar',
-	backgroundColor = colors.lightGray,
-	textColor = colors.gray,
+	backgroundColor = 'lightGray',
+	textColor = 'gray',
 	height = 1,
 	ey = -1,
 }
-function UI.StatusBar:adjustWidth()
+function UI.StatusBar:layout()
+	UI.Window.layout(self)
 	-- Can only have 1 adjustable width
 	if self.columns then
 		local w = self.width - #self.columns - 1
@@ -31,16 +30,6 @@ function UI.StatusBar:adjustWidth()
 	end
 end
 
-function UI.StatusBar:resize()
-	UI.Window.resize(self)
-	self:adjustWidth()
-end
-
-function UI.StatusBar:setParent()
-	UI.Window.setParent(self)
-	self:adjustWidth()
-end
-
 function UI.StatusBar:setStatus(status)
 	if self.values ~= status then
 		self.values = status
@@ -63,7 +52,7 @@ end
 
 function UI.StatusBar:timedStatus(status, timeout)
 	self:write(2, 1, Util.widthify(status, self.width-2), self.backgroundColor)
-	Event.on(timeout or 3, function()
+	Event.onTimeout(timeout or 3, function()
 		if self.enabled then
 			self:draw()
 			self:sync()
@@ -89,11 +78,13 @@ function UI.StatusBar:draw()
 	elseif type(self.values) == 'string' then
 		self:write(1, 1, Util.widthify(' ' .. self.values, self.width))
 	else
-		local s = ''
+		local x = 2
+		self:clear()
 		for _,c in ipairs(self.columns) do
-			s = s .. ' ' .. Util.widthify(tostring(self.values[c.key] or ''), c.cw)
+			local s = Util.widthify(tostring(self.values[c.key] or ''), c.cw)
+			self:write(x, 1, s, c.bg, c.fg)
+			x = x + c.cw + 1
 		end
-		self:write(1, 1, Util.widthify(s, self.width))
 	end
 end
 

sys/modules/opus/ui/components/Tab.lua

@@ -1,9 +1,16 @@
 local class = require('opus.class')
 local UI    = require('opus.ui')
 
-UI.Tab = class(UI.ActiveLayer)
+UI.Tab = class(UI.Window)
 UI.Tab.defaults = {
 	UIElement = 'Tab',
 	tabTitle = 'tab',
 	y = 2,
 }
+
+function UI.Tab:draw()
+	if not self.noFill then
+		self:fillArea(1, 1, self.width, self.height, string.rep('\127', self.width), colors.black, colors.gray)
+	end
+	self:drawChildren()
+end

sys/modules/opus/ui/components/TabBar.lua

@@ -6,9 +6,9 @@ UI.TabBar = class(UI.MenuBar)
 UI.TabBar.defaults = {
 	UIElement = 'TabBar',
 	buttonClass = 'TabBarMenuItem',
-}
-UI.TabBar.inherits = {
-	selectedBackgroundColor = 'backgroundColor',
+	backgroundColor = 'black',
+	selectedBackgroundColor = 'primary',
+	unselectedBackgroundColor = 'tertiary',
 }
 function UI.TabBar:enable()
 	UI.MenuBar.enable(self)
@@ -32,7 +32,7 @@ function UI.TabBar:eventHandler(event)
 				self:emit({ type = 'tab_change', current = si, last = pi, tab = selected })
 			end
 		end
-		UI.MenuBar.draw(self)
+		self:draw(self)
 	end
 	return UI.MenuBar.eventHandler(self, event)
 end

sys/modules/opus/ui/components/TabBarMenuItem.lua

@@ -1,27 +1,19 @@
 local class = require('opus.class')
 local UI    = require('opus.ui')
 
-local colors = _G.colors
-
 UI.TabBarMenuItem = class(UI.Button)
 UI.TabBarMenuItem.defaults = {
 	UIElement = 'TabBarMenuItem',
 	event = 'tab_select',
-	textColor = colors.black,
-	selectedBackgroundColor = colors.cyan,
-	unselectedBackgroundColor = colors.lightGray,
-	backgroundColor = colors.lightGray,
-}
-UI.TabBarMenuItem.inherits = {
-	selectedBackgroundColor = 'selectedBackgroundColor',
+	textInactiveColor = 'lightGray',
 }
 function UI.TabBarMenuItem:draw()
 	if self.selected then
-		self.backgroundColor = self.selectedBackgroundColor
-		self.backgroundFocusColor = self.selectedBackgroundColor
+		self.backgroundColor = self:getProperty('selectedBackgroundColor')
+		self.backgroundFocusColor = self.backgroundColor
 	else
-		self.backgroundColor = self.unselectedBackgroundColor
-		self.backgroundFocusColor = self.unselectedBackgroundColor
+		self.backgroundColor = self:getProperty('unselectedBackgroundColor')
+		self.backgroundFocusColor = self.backgroundColor
 	end
 	UI.Button.draw(self)
 end

sys/modules/opus/ui/components/Tabs.lua

@@ -56,12 +56,12 @@ end
 
 function UI.Tabs:enable()
 	self.enabled = true
-	self.transitionHint = nil
 	self.tabBar:enable()
 
 	local menuItem = Util.find(self.tabBar.children, 'selected', true)
 
-	for _,child in pairs(self.children or { }) do
+	for child in self:eachChild() do
+		child.transitionHint = nil
 		if child.uid == menuItem.tabUid then
 			child:enable()
 			self:emit({ type = 'tab_activate', activated = child })
@@ -74,14 +74,11 @@ end
 function UI.Tabs:eventHandler(event)
 	if event.type == 'tab_change' then
 		local tab = self:find(event.tab.tabUid)
-		if event.current > event.last then
-			self.transitionHint = 'slideLeft'
-		else
-			self.transitionHint = 'slideRight'
-		end
+		local hint = event.current > event.last and 'slideLeft' or 'slideRight'
 
-		for _,child in pairs(self.children) do
+		for child in self:eachChild() do
 			if child.uid == event.tab.tabUid then
+				child.transitionHint = hint
 				child:enable()
 			elseif child.tabTitle then
 				child:disable()
@@ -89,6 +86,7 @@ function UI.Tabs:eventHandler(event)
 		end
 		self:emit({ type = 'tab_activate', activated = tab })
 		tab:draw()
+		return true
 	end
 end
 
@@ -102,11 +100,26 @@ function UI.Tabs.example()
 		tab2 = UI.Tab {
 			index = 2,
 			tabTitle = 'tab2',
-			button = UI.Button { y = 3 },
+			subtabs = UI.Tabs {
+				x = 3, y = 2, ex = -3, ey = -2,
+				tab1 = UI.Tab {
+					index = 1,
+					tabTitle = 'tab4',
+					entry = UI.TextEntry { y = 3, shadowText = 'text' },
+				},
+				tab3 = UI.Tab {
+					index = 2,
+					tabTitle = 'tab5',
+				},
+			},
 		},
 		tab3 = UI.Tab {
 			index = 3,
 			tabTitle = 'tab3',
 		},
+		enable = function(self)
+			UI.Tabs.enable(self)
+			self:setActive(self.tab3, false)
+		end,
 	}
 end

sys/modules/opus/ui/components/Text.lua

@@ -8,11 +8,11 @@ UI.Text.defaults = {
 	value = '',
 	height = 1,
 }
-function UI.Text:setParent()
+function UI.Text:layout()
 	if not self.width and not self.ex then
 		self.width = #tostring(self.value)
 	end
-	UI.Window.setParent(self)
+	UI.Window.layout(self)
 end
 
 function UI.Text:draw()

sys/modules/opus/ui/components/TextArea.lua

@@ -6,36 +6,44 @@ UI.TextArea.defaults = {
 	UIElement = 'TextArea',
 	marginRight = 2,
 	value = '',
+	showScrollBar = true,
 }
-function UI.TextArea:postInit()
-	self.scrollBar = UI.ScrollBar()
-end
-
 function UI.TextArea:setText(text)
 	self:reset()
 	self.value = text
 	self:draw()
 end
 
-function UI.TextArea:focus()
+function UI.TextArea.focus()
 	-- allow keyboard scrolling
 end
 
 function UI.TextArea:draw()
 	self:clear()
---  self:setCursorPos(1, 1)
-	self.cursorX, self.cursorY = 1, 1
 	self:print(self.value)
-
-	for _,child in pairs(self.children) do
-		if child.enabled then
-			child:draw()
-		end
-	end
+	self:drawChildren()
 end
 
 function UI.TextArea.example()
-	return UI.TextArea {
-		value = 'sample text\nabc'
+	local Ansi = require('opus.ansi')
+	return UI.Window {
+		backgroundColor = 2048,
+		t1 = UI.TextArea {
+			ey = 3,
+			value = 'sample text\nabc'
+		},
+		t2 = UI.TextArea {
+			y = 5,
+			backgroundColor = 'green',
+			value = string.format([[now %%is the %stime %sfor%s all good men to come to the aid of their country.
+1
+2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
+3
+4
+5
+6
+7
+8]], Ansi.yellow, Ansi.onred, Ansi.reset),
+		}
 	}
 end

sys/modules/opus/ui/components/TextEntry.lua

@@ -3,7 +3,6 @@ local entry = require('opus.entry')
 local UI    = require('opus.ui')
 local Util  = require('opus.util')
 
-local colors = _G.colors
 local _rep   = string.rep
 
 local function transform(directive)
@@ -19,15 +18,16 @@ UI.TextEntry = class(UI.Window)
 UI.TextEntry.docs = { }
 UI.TextEntry.defaults = {
 	UIElement = 'TextEntry',
-	--value = '',
 	shadowText = '',
 	focused = false,
-	textColor = colors.white,
-	shadowTextColor = colors.gray,
-	backgroundColor = colors.black, -- colors.lightGray,
-	backgroundFocusColor = colors.black, --lightGray,
+	textColor = 'white',
+	shadowTextColor = 'gray',
+	markBackgroundColor = 'gray',
+	backgroundColor = 'black',
+	backgroundFocusColor = 'black',
 	height = 1,
 	limit = 6,
+	cursorBlink = true,
 	accelerators = {
 		[ 'control-c' ] = 'copy',
 	}
@@ -74,7 +74,9 @@ function UI.TextEntry:draw()
 		text = self.shadowText
 	end
 
-	self:write(1, 1, ' ' .. Util.widthify(text, self.width - 2) .. ' ', bg, tc)
+	local ss = self.entry.scroll > 0 and '\183' or ' '
+	self:write(2, 1, Util.widthify(text, self.width - 2) .. ' ', bg, tc)
+	self:write(1, 1, ss, bg, self.shadowTextColor)
 
 	if self.entry.mark.active then
 		local tx = math.max(self.entry.mark.x - self.entry.scroll, 0)
@@ -85,7 +87,7 @@ function UI.TextEntry:draw()
 		end
 
 		if tx ~= tex then
-			self:write(tx + 2, 1, text:sub(tx + 1, tex), colors.gray, tc)
+			self:write(tx + 2, 1, text:sub(tx + 1, tex), self.markBackgroundColor, tc)
 		end
 	end
 	if self.focused then
@@ -106,13 +108,12 @@ function UI.TextEntry:updateCursor()
 	self:setCursorPos(self.entry.pos - self.entry.scroll + 2, 1)
 end
 
+function UI.TextEntry:markAll()
+	self.entry:markAll()
+end
+
 function UI.TextEntry:focus()
 	self:draw()
-	if self.focused then
-		self:setCursorBlink(true)
-	else
-		self:setCursorBlink(false)
-	end
 end
 
 function UI.TextEntry:eventHandler(event)

sys/modules/opus/ui/components/Throttle.lua

@@ -20,24 +20,15 @@ UI.Throttle.defaults = {
 		'  //)    (O ). @  \\-d )      (@ '
 	}
 }
-function UI.Throttle:setParent()
+function UI.Throttle:layout()
 	self.x = math.ceil((self.parent.width - self.width) / 2)
 	self.y = math.ceil((self.parent.height - self.height) / 2)
-	UI.Window.setParent(self)
+	self:reposition(self.x, self.y, self.width, self.height)
 end
 
 function UI.Throttle:enable()
 	self.c = os.clock()
-	self.enabled = false
-end
-
-function UI.Throttle:disable()
-	if self.canvas then
-		self.enabled = false
-		self.canvas:removeLayer()
-		self.canvas = nil
-		self.ctr = 0
-	end
+	self.ctr = 0
 end
 
 function UI.Throttle:update()
@@ -46,11 +37,7 @@ function UI.Throttle:update()
 		os.sleep(0)
 		self.c = os.clock()
 		self.enabled = true
-		if not self.canvas then
-			self.canvas = self:addLayer(self.backgroundColor, self.borderColor)
-			self.canvas:setVisible(true)
-			self:clear(self.borderColor)
-		end
+		self:clear(self.borderColor)
 		local image = self.image[self.ctr + 1]
 		local width = self.width - 2
 		for i = 0, #self.image do
@@ -63,3 +50,25 @@ function UI.Throttle:update()
 		self:sync()
 	end
 end
+
+function UI.Throttle.example()
+	return UI.Window {
+		button1 = UI.Button {
+			x = 2, y = 2,
+			text = 'Test',
+		},
+		throttle = UI.Throttle {
+			textColor = colors.yellow,
+			borderColor = colors.green,
+		},
+		eventHandler = function (self, event)
+			if event.type == 'button_press' then
+				for _ = 1, 40 do
+					self.throttle:update()
+					os.sleep(.05)
+				end
+				self.throttle:disable()
+			end
+		end,
+	}
+end

sys/modules/opus/ui/components/TitleBar.lua

@@ -1,59 +1,20 @@
 local class = require('opus.class')
 local UI    = require('opus.ui')
 
-local colors = _G.colors
-local _rep   = string.rep
-local _sub   = string.sub
-
--- For manipulating text in a fixed width string
-local SB = class()
-function SB:init(width)
-	self.width = width
-	self.buf = _rep(' ', width)
-end
-function SB:insert(x, str, width)
-	if x < 1 then
-		x = self.width + x + 1
-	end
-	width = width or #str
-	if x + width - 1 > self.width then
-		width = self.width - x
-	end
-	if width > 0 then
-		self.buf = _sub(self.buf, 1, x - 1) .. _sub(str, 1, width) .. _sub(self.buf, x + width)
-	end
-end
-function SB:fill(x, ch, width)
-	width = width or self.width - x + 1
-	self:insert(x, _rep(ch, width))
-end
-function SB:center(str)
-	self:insert(math.max(1, math.ceil((self.width - #str + 1) / 2)), str)
-end
-function SB:get()
-	return self.buf
-end
-
 UI.TitleBar = class(UI.Window)
 UI.TitleBar.defaults = {
 	UIElement = 'TitleBar',
 	height = 1,
-	textColor = colors.white,
-	backgroundColor = colors.cyan,
 	title = '',
 	frameChar = UI.extChars and '\140' or '-',
 	closeInd = UI.extChars and '\215' or '*',
 }
 function UI.TitleBar:draw()
-	local sb = SB(self.width)
-	sb:fill(2, self.frameChar, sb.width - 3)
-	sb:center(string.format(' %s ', self.title))
+	self:fillArea(2, 1, self.width - 2, 1, self.frameChar)
+	self:centeredWrite(1, string.format(' %s ', self.title))
 	if self.previousPage or self.event then
-		sb:insert(-1, self.closeInd)
-	else
-		sb:insert(-2, self.frameChar)
+		self:write(self.width - 1, 1, ' ' .. self.closeInd)
 	end
-	self:write(1, 1, sb:get())
 end
 
 function UI.TitleBar:eventHandler(event)
@@ -69,5 +30,74 @@ function UI.TitleBar:eventHandler(event)
 			end
 			return true
 		end
+
+	elseif event.type == 'mouse_down' then
+		self.anchor = { x = event.x, y = event.y, ox = self.parent.x, oy = self.parent.y, h = self.parent.height }
+
+	elseif event.type == 'mouse_drag' then
+		if self.expand == 'height' then
+			local d = event.dy
+			if self.anchor.h - d > 0 and self.anchor.oy + d > 0 then
+				self.parent:reposition(self.parent.x, self.anchor.oy + event.dy, self.width, self.anchor.h - d)
+			end
+
+		elseif self.moveable then
+			local d = event.dy
+			if self.anchor.oy + d > 0 and self.anchor.oy + d <= self.parent.parent.height then
+				self.parent:move(self.anchor.ox + event.dx, self.anchor.oy + event.dy)
+			end
+		end
 	end
 end
+
+function UI.TitleBar.example()
+	return UI.Window {
+		win1 = UI.Window {
+			x = 9, y = 2, ex = -7, ey = -3,
+			backgroundColor = 'green',
+			titleBar = UI.TitleBar {
+				title = 'A really, really, really long title',  moveable = true,
+			},
+			button1 = UI.Button {
+				x = 2, y = 3,
+				text = 'Press',
+			},
+			focus = function (self)
+				self:raise()
+			end,
+		},
+		win2 = UI.Window {
+			x = 7, y = 3, ex = -9, ey = -2,
+			backgroundColor = 'orange',
+			titleBar = UI.TitleBar {
+				title = 'test', moveable = true,
+				event = 'none',
+			},
+			button1 = UI.Button {
+				x = 2, y = 3,
+				text = 'Press',
+			},
+			focus = function (self)
+				self:raise()
+			end,
+		},
+		draw = function(self, isBG)
+			for i = 1, self.height do
+				self:write(1, i, self.filler or '')
+			end
+			if not isBG then
+				for _,v in pairs(self.children) do
+					v:draw()
+				end
+			end
+		end,
+		enable = function (self)
+			require('opus.event').onInterval(.5, function()
+				self.filler = string.rep(string.char(math.random(33, 126)), self.width)
+				self:draw(true)
+				self:sync()
+			end)
+			UI.Window.enable(self)
+		end
+	}
+end

sys/modules/opus/ui/components/VerticalMeter.lua

@@ -1,13 +1,11 @@
 local class = require('opus.class')
 local UI    = require('opus.ui')
 
-local colors = _G.colors
-
 UI.VerticalMeter = class(UI.Window)
 UI.VerticalMeter.defaults = {
 	UIElement = 'VerticalMeter',
-	backgroundColor = colors.gray,
-	meterColor = colors.lime,
+	backgroundColor = 'gray',
+	meterColor = 'lime',
 	width = 1,
 	value = 0,
 }
@@ -18,12 +16,11 @@ function UI.VerticalMeter:draw()
 end
 
 function UI.VerticalMeter.example()
-	local Event = require('opus.event')
 	return UI.VerticalMeter {
 		x = 2, width = 3, y = 2, ey = -2,
 		focus = function() end,
 		enable = function(self)
-			Event.onInterval(.25, function()
+			require('opus.event').onInterval(.25, function()
 				self.value = self.value == 100 and 0 or self.value + 5
 				self:draw()
 				self:sync()
@@ -31,4 +28,4 @@ function UI.VerticalMeter.example()
 			return UI.VerticalMeter.enable(self)
 		end
 	}
-end
+end

sys/modules/opus/ui/components/Viewport.lua

@@ -1,16 +1,15 @@
 local class = require('opus.class')
 local UI    = require('opus.ui')
 
-local colors = _G.colors
-
 UI.Viewport = class(UI.Window)
 UI.Viewport.defaults = {
 	UIElement = 'Viewport',
-	backgroundColor = colors.cyan,
 	accelerators = {
 		down            = 'scroll_down',
 		up              = 'scroll_up',
 		home            = 'scroll_top',
+		left            = 'scroll_left',
+		right           = 'scroll_right',
 		[ 'end' ]       = 'scroll_bottom',
 		pageUp          = 'scroll_pageUp',
 		[ 'control-b' ] = 'scroll_pageUp',
@@ -18,53 +17,60 @@ UI.Viewport.defaults = {
 		[ 'control-f' ] = 'scroll_pageDown',
 	},
 }
-function UI.Viewport:layout()
-	UI.Window.layout(self)
-	if not self.canvas then
-		self.canvas = self:addLayer()
-	else
-		self.canvas:resize(self.width, self.height)
+function UI.Viewport:postInit()
+	if self.showScrollBar then
+		self.scrollBar = UI.ScrollBar()
 	end
 end
 
-function UI.Viewport:enable()
-	UI.Window.enable(self)
-	self.canvas:setVisible(true)
-end
-
-function UI.Viewport:disable()
-	UI.Window.disable(self)
-	self.canvas:setVisible(false)
-end
-
-function UI.Viewport:setScrollPosition(offset)
-	local oldOffset = self.offy
-	self.offy = math.max(offset, 0)
-	self.offy = math.min(self.offy, math.max(#self.canvas.lines, self.height) - self.height)
-	if self.offy ~= oldOffset then
+function UI.Viewport:setScrollPosition(offy, offx) -- argh - reverse
+	local oldOffy = self.offy
+	self.offy = math.max(offy, 0)
+	self.offy = math.min(self.offy, math.max(#self.lines, self.height) - self.height)
+	if self.offy ~= oldOffy then
 		if self.scrollBar then
 			self.scrollBar:draw()
 		end
-		self.canvas.offy = offset
-		self.canvas:dirty()
+		self.offy = offy
+		self:dirty(true)
+	end
+
+	local oldOffx = self.offx
+	self.offx = math.max(offx or 0, 0)
+	self.offx = math.min(self.offx, math.max(#self.lines[1], self.width) - self.width)
+	if self.offx ~= oldOffx then
+		if self.scrollBar then
+			--self.scrollBar:draw()
+		end
+		self.offx = offx or 0
+		self:dirty(true)
 	end
 end
 
-function UI.Viewport:write(x, y, text, bg, tc)
-	if y > #self.canvas.lines then
-		for i = #self.canvas.lines, y do
-			self.canvas.lines[i + 1] = { }
-			self.canvas:clearLine(i + 1, self.backgroundColor, self.textColor)
-		end
+function UI.Viewport:blit(x, y, text, bg, fg)
+	if y > #self.lines then
+		self:resizeBuffer(self.width, y)
+	end
+	return UI.Window.blit(self, x, y, text, bg, fg)
+end
+
+function UI.Viewport:write(x, y, text, bg, fg)
+	if y > #self.lines then
+		self:resizeBuffer(self.width, y)
+	end
+	return UI.Window.write(self, x, y, text, bg, fg)
+end
+
+function UI.Viewport:setViewHeight(h)
+	if h > #self.lines then
+		self:resizeBuffer(self.width, h)
 	end
-	return UI.Window.write(self, x, y, text, bg, tc)
 end
 
 function UI.Viewport:reset()
 	self.offy = 0
-	self.canvas.offy = 0
-	for i = self.height + 1, #self.canvas.lines do
-		self.canvas.lines[i] = nil
+	for i = self.height + 1, #self.lines do
+		self.lines[i] = nil
 	end
 end
 
@@ -72,26 +78,33 @@ function UI.Viewport:getViewArea()
 	return {
 		y           = (self.offy or 0) + 1,
 		height      = self.height,
-		totalHeight = #self.canvas.lines,
+		totalHeight = #self.lines,
 		offsetY     = self.offy or 0,
 	}
 end
 
 function UI.Viewport:eventHandler(event)
+	if #self.lines <= self.height then
+		return
+	end
 	if event.type == 'scroll_down' then
-		self:setScrollPosition(self.offy + 1)
+		self:setScrollPosition(self.offy + 1, self.offx)
 	elseif event.type == 'scroll_up' then
-		self:setScrollPosition(self.offy - 1)
+		self:setScrollPosition(self.offy - 1, self.offx)
+	elseif event.type == 'scroll_left' then
+		self:setScrollPosition(self.offy, self.offx - 1)
+	elseif event.type == 'scroll_right' then
+		self:setScrollPosition(self.offy, self.offx + 1)
 	elseif event.type == 'scroll_top' then
-		self:setScrollPosition(0)
+		self:setScrollPosition(0, 0)
 	elseif event.type == 'scroll_bottom' then
-		self:setScrollPosition(10000000)
+		self:setScrollPosition(10000000, 0)
 	elseif event.type == 'scroll_pageUp' then
-		self:setScrollPosition(self.offy - self.height)
+		self:setScrollPosition(self.offy - self.height, self.offx)
 	elseif event.type == 'scroll_pageDown' then
-		self:setScrollPosition(self.offy + self.height)
+		self:setScrollPosition(self.offy + self.height, self.offx)
 	elseif event.type == 'scroll_to' then
-		self:setScrollPosition(event.offset)
+		self:setScrollPosition(event.offset, 0)
 	else
 		return false
 	end

sys/modules/opus/ui/components/Wizard.lua

@@ -25,9 +25,6 @@ function UI.Wizard:postInit()
 	}
 
 	Util.merge(self, self.pages)
-	--for _, child in pairs(self.pages) do
-	--	child.ey = -2
-	--end
 end
 
 function UI.Wizard:add(pages)
@@ -50,9 +47,8 @@ end
 function UI.Wizard:enable(...)
 	self.enabled = true
 	self.index = 1
-	self.transitionHint = nil
 	local initial = self:getPage(1)
-	for _,child in pairs(self.children) do
+	for child in self:eachChild() do
 		if child == initial or not child.index then
 			child:enable(...)
 		else
@@ -93,12 +89,13 @@ function UI.Wizard:eventHandler(event)
 	elseif event.type == 'enable_view' then
 		local current = event.next or event.prev
 		if not current then error('property "index" is required on wizard pages') end
+		local hint
 
 		if event.current then
 			if event.next then
-				self.transitionHint = 'slideLeft'
+				hint = 'slideLeft'
 			elseif event.prev then
-				self.transitionHint = 'slideRight'
+				hint = 'slideRight'
 			end
 			event.current:disable()
 		end
@@ -117,6 +114,7 @@ function UI.Wizard:eventHandler(event)
 			self.nextButton.event = 'wizard_complete'
 		end
 		-- a new current view
+		current.transitionHint = hint
 		current:enable()
 		current:emit({ type = 'view_enabled', view = current })
 		self:draw()

sys/modules/opus/ui/components/WizardPage.lua

@@ -1,11 +1,8 @@
 local class = require('opus.class')
 local UI    = require('opus.ui')
 
-local colors = _G.colors
-
-UI.WizardPage = class(UI.ActiveLayer)
+UI.WizardPage = class(UI.Window)
 UI.WizardPage.defaults = {
 	UIElement = 'WizardPage',
-	backgroundColor = colors.cyan,
 	ey = -2,
 }