unrooot / draw-visualizer

draw-visualizer

⚠️ THIS PROJECT IS A WIP! EXPECT BUGS! ⚠️

Roblox UI debugging plugin inspired by the osu!framework draw visualizer. This is a plugin that aims to enable speedy traversal of your UI hierarchy and modification of properties without having to use the default Explorer and Properties windows.

recent demo (less buggy!):

CleanShot.2024-05-18.at.05.54.32.mp4

UI is written in Blend (included in Quenty's NevermoreEngine)

todo:

current tasks:

• when you move up a parent, the entire tree is re-constructed
• open properties window
• copy command palette ui into properties
• more visible highlights + highlighting on the selected group in the hierarchy view
• space to toggle highlighted group
• improve selection UX (tab/shift+tab)
• when looking at the absolutesize of a guiobject in the hierarchy, the number is currently rounded up or down - when you hover over it it should show the accurate/non-rounded number
• GuiObjects that are Visible false need a specific visual state
• fix flashing hovered instances in the hierarchy
• if a group has a UIListLayout/UIGridLayout in it, the subsequent entries/groups should be sorted using the same SortOrder & LayoutOrder
• in play solo the selection position is inaccurate (topbar)
• modes to visualize global ui states
  • all visible GuiButtons
  • AutoLocalize preview mode
• hierarchy view needs to be virtualized
• need to handle new/removed instances in the list
• design & program properties ui
• polish command palette
• add functionality to command palette
  • custom input fields
  • property editing

custom input fields:

• text input (string, number)
• checkbox (boolean)
• type input (udim, udim2, vector2, vector3, rect)
• color selection (brickcolor, color3)
• dropdown (font, enum)