clipping for transistions + tab ordering via index + more examples

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:hide()
-				else
-					self.slideOut:show()
-				end
+				self.slideOut.canvas.xxx = true
+				self.slideOut:toggle()
 			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