#ui #bevy-ui #widgets #reactive #ui-framework #bevy

nightly bevy_quill_obsidian

An opinionated set of editor-focused widgets built on Bevy and Quill

3 releases

0.1.3 Jul 31, 2024
0.1.1 Jul 25, 2024
0.1.0 Jul 10, 2024

#2062 in Game dev

Download history 144/week @ 2024-07-22 218/week @ 2024-07-29 23/week @ 2024-08-05 20/week @ 2024-08-12 6/week @ 2024-08-19 13/week @ 2024-08-26 7/week @ 2024-09-02 15/week @ 2024-09-09 9/week @ 2024-09-16 18/week @ 2024-09-23 29/week @ 2024-09-30 16/week @ 2024-10-07 24/week @ 2024-10-14 11/week @ 2024-10-21 6/week @ 2024-10-28 31/week @ 2024-11-04

74 downloads per month
Used in 3 crates (2 directly)

MIT/Apache

4MB
10K SLoC

bevy_quill_obsidian

Obsidian is an opinionated widget library written for Bevy+Quill. The widgets are intended for use in constructing editors, and their color scheme and visual design is based on the mocks found here: https://amytimed.github.io/bevy_editor_mockup/

Controls

  • Button and IconButton
  • Checkbox
  • ColorEdit
  • Dialog
  • DisclosureToggle
  • Slider and GradientSlider
  • Spin
  • ListView
  • MenuButton and MenuPopup
  • ScrollView
  • Swatch and SwatchGrid
  • Splitter
  • ToolPalette and ToolButton

Hooks

  • create_bistable_transition - timer-based transitions for widgets that have an enter/exit animation.
  • use_element_rect - returns the logical screen bounds of a UI entity.
  • is_focused, is_focus_within, is_focus_visible, is_focus_within_visible - hooks that return true if the element (or one of it's children) have keyboard focus.
  • is_hovered - hook that returns true if the pointer is hovering over the entity.

Animations

Animation components that can be inserted into a UI node:

  • AnimatedBackgroundColor
  • AnimatedBorderColor
  • AnimatedPxWidth
  • AnimatedPxHeight
  • AnimatedScale
  • AnimatedRotation
  • AnimatedTranslation

Focus handling and tab navigation

Obsidian implements tab navigation using the bevy_a11y Focus resource.

  • TabIndex - insert this into a UI node to indicate that it can have keyboard focus.
  • TabGroup - insert this at the root of your UI hierarchy to enable tab navigation. You can also have additional "modal" tab groups to allow "tab trapping".
  • KeyCharEvent - event which is dispatched to the current focus element (using bevy_eventlistener) when a character is typed.
  • KeyPressEvent - event which is dispatched to the current focus element (using bevy_eventlistener) when a key is pressed.
  • DefaultKeyListener - entity that receives keyboard events when no element has focus.

In general, you should avoid using the built-in Bevy keyboard events for things like global shortcuts. The reason is because this doesn't allow the current focus widget to cancel the key event. For example, if you hit backspace while editing a string in a text input widget, you probably want it to just delete a character, and not also delete whatever object you had currently selected.

Keyboard events are always dispatched to the current focused element and bubble upward from there. If no element has focus, then the key event is dispatched to the first entity that has a DefaultKeyListener component.

Standard styles and colors

  • colors - the standard editor color theme.
  • typography - the standard editor text styles (currently using OpenSans, which is included).

Dependencies

~45–82MB
~1.5M SLoC