clipping for transistions + tab ordering via index + more examples

sys/apps/Tasks.lua

@@ -24,15 +24,24 @@ local page = UI.Page {
 		values = kernel.routines,
 		sortColumn = 'uid',
 		autospace = true,
+		getDisplayValues = function(_, row)
+			local elapsed = os.clock()-row.timestamp
+			return {
+				uid = row.uid,
+				title = row.title,
+				status = row.isDead and 'error' or coroutine.status(row.co),
+				timestamp = elapsed < 60 and
+					string.format("%ds", math.floor(elapsed)) or
+					string.format("%sm", math.floor(elapsed/6)/10),
+			}
+		end
 	},
 	accelerators = {
 		[ 'control-q' ] = 'quit',
 		space = 'activate',
 		t = 'terminate',
 	},
-}
+	eventHandler = function (self, event)
-
-function page:eventHandler(event)
 		local t = self.grid:getSelected()
 		if t then
 			if event.type == 'activate' or event.type == 'grid_select' then
@@ -45,19 +54,8 @@ function page:eventHandler(event)
 			Event.exitPullEvents()
 		end
 		UI.Page.eventHandler(self, event)
-end
+	end
-
+}
-function page.grid:getDisplayValues(row)
-	local elapsed = os.clock()-row.timestamp
-	return {
-		uid = row.uid,
-		title = row.title,
-		status = row.isDead and 'error' or coroutine.status(row.co),
-		timestamp = elapsed < 60 and
-			string.format("%ds", math.floor(elapsed)) or
-			string.format("%sm", math.floor(elapsed/6)/10),
-	}
-end
 
 Event.onInterval(1, function()
 	page.grid:update()

sys/apps/inspect.lua

@@ -63,6 +63,7 @@ page = UI.Page {
 			},
 		},
 		methodsTab = UI.Tab {
+			index = 2,
 			tabTitle = 'Methods',
 			grid = UI.ScrollingGrid {
 				headerBackgroundColor = colors.red,
@@ -73,11 +74,12 @@ page = UI.Page {
 			},
 		},
 		events = UI.Tab {
+			index = 1,
 			tabTitle = 'Events',
 			UI.MenuBar {
 				y = -1,
 				buttons = {
-					{ text = 'Clear', event = 'event_clear' },
+					{ text = 'Clear' },
 				}
 			},
 			grid = UI.ScrollingGrid {
@@ -89,10 +91,21 @@ page = UI.Page {
 					{ heading = 'type', key = 'type' },
 					{ heading = 'value', key = 'value',  }
 				},
-				accelerators = {
-					grid_select = 'event_inspect',
 			},
-			}
+			eventHandler = function (self, event)
+				if event.type == 'button_press' then
+					Util.clear(self.grid.values)
+					self.grid:update()
+					self.grid:draw()
+
+				elseif event.type == 'grid_select' then
+					multishell.openTab({
+						path = 'sys/apps/Lua.lua',
+						args = { event.selected.raw },
+						focused = true,
+					})
+				end
+			end
 		}
 	},
 	editor = UI.SlideOut {
@@ -134,18 +147,6 @@ page = UI.Page {
 			self.tabs.methodsTab.grid:update()
 			self.tabs.methodsTab.grid:draw()
 
-		elseif event.type == 'event_clear' then
-			Util.clear(self.tabs.events.grid.values)
-			self.tabs.events.grid:update()
-			self.tabs.events.grid:draw()
-
-		elseif event.type == 'event_inspect' then
-			multishell.openTab({
-				path = 'sys/apps/Lua.lua',
-				args = { event.selected.raw },
-				focused = true,
-			})
-
 		elseif event.type == 'edit_property' then
 			self.editor.entry.value = event.selected.value
 			self.editor:show()

sys/autorun/complete.lua

@@ -1,3 +1,5 @@
+local fs = _G.fs
+
 local function completeMultipleChoice(sText, tOptions, bAddSpaces)
 	local tResults = { }
 	for n = 1,#tOptions do
@@ -20,3 +22,14 @@ _ENV.shell.setCompletionFunction("sys/apps/package.lua",
 			return completeMultipleChoice(text, { "install ", "update ", "uninstall ", "updateall ", "refresh" })
 		end
 	end)
+
+_ENV.shell.setCompletionFunction("sys/apps/inspect.lua",
+	function(_, index, text)
+		if index == 1 then
+			local components = { }
+			for _, f in pairs(fs.list('sys/modules/opus/ui/components')) do
+				table.insert(components, (f:gsub("%.lua$", "")))
+			end
+			return completeMultipleChoice(text, components)
+		end
+	end)

sys/modules/opus/ui/canvas.lua

@@ -353,6 +353,12 @@ function Canvas:__renderLayers(device, offset)
 end
 
 function Canvas:__blitClipped(device, offset)
+	if self.parent then
+		-- contain the rendered region in the parent's region
+		local p = Region.new(1, 1, self.parent.width, self.parent.height)
+		self.regions:andRegion(p)
+	end
+
 	for _,region in ipairs(self.regions.region) do
 		self:__blitRect(device,
 			{ x = region[1] - offset.x,

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

@@ -139,7 +139,7 @@ function UI.Form.example()
 	return UI.Form {
 		x = 2, ex = -2, y = 2,
 		ptype = UI.Chooser {
-			formLabel = 'Type', formKey = 'type',
+			formLabel = 'Type', formKey = 'type', formIndex = 1,
 			width = 10,
 			choices = {
 				{ name = 'Modem', value = 'wireless_modem' },
@@ -147,7 +147,7 @@ function UI.Form.example()
 			},
 		},
 		drive_id = UI.TextEntry {
-			formLabel = 'Drive', formKey = 'drive_id',
+			formLabel = 'Drive', formKey = 'drive_id', formIndex = 2,
 			required = true,
 			width = 5,
 			transform = 'number',

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

@@ -59,3 +59,14 @@ function UI.Menu:eventHandler(event)
 	end
 	return UI.Grid.eventHandler(self, event)
 end
+
+function UI.Menu.example()
+	return UI.Menu {
+		x = 2, y = 2, height = 3,
+		menuItems = {
+			{ prompt = 'Start',    event = 'start' },
+			{ prompt = 'Continue', event = 'continue' },
+			{ prompt = 'Quit',     event = 'quit' }
+		}
+	}
+end

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

@@ -34,6 +34,15 @@ function UI.MenuBar:addButtons(buttons)
 		self.children = { }
 	end
 
+	for _,button in pairs(buttons) do
+		if button.index then -- don't sort unless needed
+			table.sort(buttons, function(a, b)
+				return (a.index or 999) < (b.index or 999)
+			end)
+			break
+		end
+	end
+
 	for _,button in pairs(buttons) do
 		if button.UIElement then
 			table.insert(self.children, button)

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

@@ -26,3 +26,19 @@ function UI.ProgressBar:draw()
 		self:write(1, i, progress, self.progressColor)
 	end
 end
+
+function UI.ProgressBar.example()
+	local Event = require('opus.event')
+	return UI.ProgressBar {
+		x = 2, ex = -2, y = 2,
+		focus = function() end,
+		enable = function(self)
+			Event.onInterval(.25, function()
+				self.value = self.value == 100 and 0 or self.value + 5
+				self:draw()
+				self:sync()
+			end)
+			return UI.ProgressBar.enable(self)
+		end
+	}
+end

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

@@ -19,6 +19,14 @@ end
 function UI.SlideOut:enable()
 end
 
+function UI.SlideOut:toggle()
+	if self.enabled then
+		self:hide()
+	else
+		self:show()
+	end
+end
+
 function UI.SlideOut:show(...)
 	self:addTransition('expandUp')
 	self.canvas:raise()
@@ -52,7 +60,9 @@ function UI.SlideOut:eventHandler(event)
 end
 
 function UI.SlideOut.example()
-	return UI.Window {
+	-- for the transistion to work properly, the parent must have a canvas
+	return UI.ActiveLayer {
+		backgroundColor = colors.cyan,
 		button = UI.Button {
 			x = 2, y = 2,
 			text = 'show',
@@ -67,11 +77,8 @@ function UI.SlideOut.example()
 		},
 		eventHandler = function (self, event)
 			if event.type == 'button_press' then
-				if self.slideOut.enabled then
+				self.slideOut.canvas.xxx = true
-					self.slideOut:hide()
+				self.slideOut:toggle()
-				else
-					self.slideOut:show()
-				end
 			end
 		end,
 	}

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

@@ -16,6 +16,7 @@ function UI.Tabs:add(children)
 		if type(child) == 'table' and child.UIElement and child.tabTitle then
 			child.y = 2
 			table.insert(buttons, {
+				index = child.index,
 				text = child.tabTitle,
 				event = 'tab_select',
 				tabUid = child.uid,
@@ -32,7 +33,7 @@ function UI.Tabs:add(children)
 	end
 
 	if self.parent then
-		return UI.Window.add(self, children)
+		UI.Window.add(self, children)
 	end
 end
 
@@ -57,7 +58,7 @@ function UI.Tabs:enable()
 
 	local menuItem = Util.find(self.tabBar.children, 'selected', true)
 
-	for _,child in pairs(self.children) do
+	for _,child in pairs(self.children or { }) do
 		if child.uid == menuItem.tabUid then
 			child:enable()
 			self:emit({ type = 'tab_activate', activated = child })
@@ -90,16 +91,19 @@ end
 
 function UI.Tabs.example()
 	return UI.Tabs {
-		[1] = UI.Tab {
+		tab1 = UI.Tab {
+			index = 1,
 			tabTitle = 'tab1',
 			entry = UI.TextEntry { y = 3, shadowText = 'text' },
 		},
-		[2] = UI.Tab {
+		tab2 = UI.Tab {
+			index = 2,
 			tabTitle = 'tab2',
 			button = UI.Button { y = 3 },
 		},
-		[3] = UI.Tab {
+		tab3 = UI.Tab {
+			index = 3,
 			tabTitle = 'tab3',
-		}
+		},
 	}
 end

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

@@ -16,3 +16,19 @@ function UI.VerticalMeter:draw()
 	self:clear()
 	self:clearArea(1, height + 1, self.width, self.height, self.meterColor)
 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()
+				self.value = self.value == 100 and 0 or self.value + 5
+				self:draw()
+				self:sync()
+			end)
+			return UI.VerticalMeter.enable(self)
+		end
+	}
+end