UI inspector

sys/apps/inspect.lua

@@ -0,0 +1,154 @@
+local Event = require('opus.event')
+local UI    = require('opus.ui')
+
+local colors     = _G.colors
+local multishell = _ENV.multishell
+
+local args = { ... }
+local name = args[1] or error('Syntax: inspect COMPONENT')
+local events = { }
+local page
+
+local function isRelevant(el)
+	return page.testContainer == el or el.parent and isRelevant(el.parent)
+end
+
+local emitter = UI.Window.emit
+function UI.Window:emit(event)
+	if not event.recorded and isRelevant(self) then
+		event.recorded = true
+		local t = { }
+		for k,v in pairs(event) do
+			if k ~= 'type' and k ~= 'recorded' then
+				table.insert(t, k .. ':' .. (type(v) == 'table' and (v.UIElement and v.uid or 'tbl') or tostring(v)))
+			end
+		end
+		table.insert(events, 1, { type = event.type, value = table.concat(t, ' '), raw = event })
+		while #events > 10 do
+			table.remove(events)
+		end
+	end
+	return emitter(self, event)
+end
+
+page = UI.Page {
+	testContainer = UI.Window {
+		ey = 10,
+	},
+	tabs = UI.Tabs {
+		y = 11,
+		properties = UI.Tab {
+			backgroundColor = colors.red,
+			tabTitle = 'Properties',
+			grid = UI.ScrollingGrid {
+				headerBackgroundColor = colors.red,
+				sortColumn = 'key',
+				columns = {
+					{ heading = 'key', key = 'key' },
+					{ heading = 'value', key = 'value',  }
+				},
+				accelerators = {
+					grid_select = 'edit_property',
+				},
+			},
+		},
+		methodsTab = UI.Tab {
+			backgroundColor = colors.red,
+			tabTitle = 'Methods',
+			grid = UI.ScrollingGrid {
+				headerBackgroundColor = colors.red,
+				sortColumn = 'key',
+				columns = {
+					{ heading = 'key', key = 'key' },
+				},
+			},
+		},
+		events = UI.Tab {
+			backgroundColor = colors.red,
+			tabTitle = 'Events',
+			grid = UI.ScrollingGrid {
+				headerBackgroundColor = colors.red,
+				values = events,
+				autospace = true,
+				columns = {
+					{ heading = 'type', key = 'type' },
+					{ heading = 'value', key = 'value',  }
+				},
+			}
+		}
+	},
+	editor = UI.SlideOut {
+		y = -4, height = 4,
+		backgroundColor = colors.green,
+		titleBar = UI.TitleBar {
+			event = 'editor_cancel',
+			title = 'Enter value',
+		},
+		entry = UI.TextEntry {
+			y = 3, x = 2, ex = 10,
+			accelerators = {
+				enter = 'editor_apply',
+			},
+		},
+	},
+	eventHandler = function (self, event)
+		if event.type == 'focus_change' and isRelevant(event.focused) then
+			local t = { }
+			for k,v in pairs(event.focused) do
+				table.insert(t, {
+					key = k,
+					value = tostring(v),
+				})
+			end
+			self.tabs.properties.grid:setValues(t)
+			self.tabs.properties.grid:update()
+			self.tabs.properties.grid:draw()
+
+			t = { }
+			for k,v in pairs(getmetatable(event.focused)) do
+				if type(v) == 'function' then
+					table.insert(t, {
+						key = k,
+					})
+				end
+			end
+			self.tabs.methodsTab.grid:setValues(t)
+			self.tabs.methodsTab.grid:update()
+			self.tabs.methodsTab.grid:draw()
+
+		elseif event.type == 'grid_select' and event.element == self.tabs.events.grid then
+			event.selected.raw.recorded = nil
+			multishell.openTab({
+				path = 'sys/apps/Lua.lua',
+				args = { event.selected.raw },
+				focused = true,
+			})
+
+		elseif event.type == 'grid_select' and event.element == self.tabs.properties.grid then
+			self.editor.entry.value = event.selected.value
+			self.editor:show()
+
+		elseif event.type == 'editor_cancel' then
+			self.editor:hide()
+
+		elseif event.type == 'editor_apply' then
+			self.editor:hide()
+		end
+
+		return UI.Page.eventHandler(self, event)
+	end
+}
+
+Event.onInterval(1, function()
+	page.tabs.events.grid:update()
+	page.tabs.events.grid:draw()
+	page.tabs.events.grid:sync()
+end)
+
+local component = UI[name]()
+local testing = component.example()
+
+page.testContainer:add({ test = testing })
+
+UI:setPage(page)
+UI:pullEvents()