Writing documentation in widgets.md, will deploy doxygen API reference tomorrow.
This commit is contained in:
136
docs/widgets.md
136
docs/widgets.md
@@ -1,12 +1,81 @@
|
||||
<details>
|
||||
<summary>Widget</summary>
|
||||
This is some information about the Widget class.
|
||||
## JUI Widget Directory
|
||||
Updated on 2025-06-25 / Release-6.4 [^1]
|
||||
|
||||
See also:
|
||||
|
||||
[Animation](animation.md) <br/>
|
||||
[Layout](layout.md) <br/>
|
||||
[Overview](overview.md) <br/>
|
||||
[Styling](styling.md) <br/>
|
||||
[Full API Reference](https://doc.redacted.cc/jui) <br/>
|
||||
[Repository](https://git.redacted.cc/josh/ReJUI)
|
||||
|
||||
<details><summary>Widget</summary>
|
||||
|
||||
* The [Widget](doc.redacted.cc/jui/) is the basis of all GUI elements in JUI.
|
||||
* It is an abstract class, and you should not directly instantiate `Widget` for use in your UI.
|
||||
* Instead, create its concrete derived types (`Button`, `Text`, `Slider`) or your own custom derivation.
|
||||
* `class Widget` serves as the starting point for creating custom widgets.
|
||||
* Widgets are organized in a tree-like hierarchy, where each widget can have multiple **children** and a single **parent**.
|
||||
* This structure dictates rendering order, event propagation, and coordinate systems.
|
||||
* Operations like updating, drawing, and event dispatching typically traverse this hierarchy **recursively**.
|
||||
* A Widget's on-screen position is always relative to its parent. This simplifies layout management, as moving a parent automatically moves all its children. Sizing is also handled in relation to the parent.
|
||||
* Widgets can be given a custom string identifier which can be used to search for it in the hierarchy later.
|
||||
* ```Widget::Name("unique_element_4");```
|
||||
|
||||
```cpp
|
||||
// Dispatch a "MouseMovement" event until a widget indicates that it has "observed" the event.
|
||||
for (auto* widget : my_element->GetChildren()) {
|
||||
if (widget->ObserveMouseMovement({420, 420}) return;
|
||||
}
|
||||
|
||||
// Listens for an event of a child widget being added.
|
||||
// These event-hooks are provided to make customization easier without requiring you to derive the class.
|
||||
my_element->ChildAdded += [] (Widget* child) {
|
||||
child->Name("New Child Element!");
|
||||
};
|
||||
```
|
||||
</details>
|
||||
|
||||
<details><summary>Scene</summary>
|
||||
|
||||
|
||||
* The [Scene]() widget acts as the **root container** for all your JUI elements within a window or application.
|
||||
* It's the top-level `Widget` that manages the entire hierarchy of your UI.
|
||||
* You'll typically have one `Scene` per window, serving as the canvas upon which all other widgets are placed and rendered.
|
||||
* Every JUI application or window requires a `Scene` to host its user interface.
|
||||
* All other widgets become descendants of the `Scene`.
|
||||
* A scene is a **mandatory** component for a JUI application. You cannot display widgets without placing them in a `Scene`.
|
||||
* Unlike other `Widget` types, a `Scene` does not have a parent itself. It's the **root** of the hierarchy.
|
||||
* Event Sink - Events from the OS / Framework (mouse clicks, key presses) are first received by the `Scene`, which then initiates the recursive dispatch process down its tree.
|
||||
* Z-Ordering: While individual widgets use Z-Index for sibling ordering, the `Scene` ensures that its entire content is rendered correctly, typically on top of the OpenGL scene if applicable.
|
||||
* A scene's viewport (aka canvas size) can be set to the window viewport, or an arbitrary value.
|
||||
* The scene provides a GlobalUIScale property, that can be used to scale an entire GUI uniformly.
|
||||
|
||||
```cpp
|
||||
auto* scene = new JUI::Scene();
|
||||
|
||||
auto* text = new JUI::Text(scene);
|
||||
text->Content("Hello, World!");
|
||||
|
||||
void app_key_press(Key key) {
|
||||
// Returns whether any widget should have "consumed" the event.
|
||||
bool sunk = scene->ObserveKeyInput(key, true);
|
||||
}
|
||||
|
||||
void app_key_release(Key key) {
|
||||
// Returns whether any widget should have "consumed" the event.
|
||||
bool sunk = scene->ObserveKeyInput(key, false);
|
||||
}
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>BindMenu</summary>
|
||||
This is some information about the Widget class.
|
||||
|
||||
### The BindMenu Widget is a work-in-progress. Check back in Prerelease 7.
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
@@ -16,12 +85,29 @@ This is some information about the Widget class.
|
||||
|
||||
|
||||
<details><summary>Checkbox</summary>
|
||||
This is some information about the Widget class.
|
||||
|
||||
* The `Checkbox` widget provides a simple binary toggle input, allowing users to select or deselect an option.
|
||||
* Typically Consists of a small square box
|
||||
* Also see LabeledCheckbox for a Checkbox with integrated text.
|
||||
</details>
|
||||
|
||||
|
||||
<details><summary>Collapsible</summary>
|
||||
This is some information about the Widget class.
|
||||
|
||||
* The `Collapsible` widget provides a way to **show or hide** a section of UI content with a single click, typically on a header or title bar.
|
||||
* It's a space-saving component that allows users to expand details when needed and collapse them to reduce visual clutter.
|
||||
* It's ideal for settings panels, property inspectors, or long lists of categorized information.
|
||||
* Usages:
|
||||
* Settings Panel - Group related settings that can be expanded individually.
|
||||
* Accordions - Create a series of Collapsibles where only one can be open at a time, by combining them with custom logic on the open/close events.
|
||||
* Property Inspectors - Display object properties that can be shown or hidden.
|
||||
* Information Hiding - Presenting advanced options or less frequently used details that don't need to be visible by default.
|
||||
* Debug Overlays - Containing logs or diagnostic tools that can be toggled open.
|
||||
* Notes
|
||||
* Content Container
|
||||
* Toggle Mechanism
|
||||
* Layout Impact
|
||||
* Initial State
|
||||
</details>
|
||||
|
||||
<details><summary>ColorPicker</summary>
|
||||
@@ -116,9 +202,7 @@ This is some information about the Widget class.
|
||||
This is some information about the Widget class.
|
||||
</details>
|
||||
|
||||
<details><summary>Scene</summary>
|
||||
This is some information about the Widget class.
|
||||
</details>
|
||||
|
||||
|
||||
<details><summary>ScrollingRect</summary>
|
||||
This is some information about the Widget class.
|
||||
@@ -129,7 +213,39 @@ This is some information about the Widget class.
|
||||
</details>
|
||||
|
||||
<details><summary>Slider</summary>
|
||||
This is some information about the Widget class.
|
||||
|
||||
* The `Slider` Widget allows users to select a value from a continuous or discrete range by moving a **scrubber** (or thumb, dragger, etc.) along a **track**.
|
||||
* `Slider` is a specialization of the `Rect` widget.
|
||||
* Usages:
|
||||
* Volume Control
|
||||
* Brightess/Contrast
|
||||
* Color Picker (JUI actually has [one](ColorPicker) built-in that uses `Sliders`!)
|
||||
* Progress Indicator (Just kidding, use a `ProgressBar` for this!);
|
||||
* Game Settings
|
||||
* Field-of-view.
|
||||
* Sensitivity
|
||||
* Spell power, physics parameters.
|
||||
* Numerical Input (Range-Bound): An alternative to a text input field when the allowed values are within a known, limited range.
|
||||
* Notes:
|
||||
* Orientation: ===Currently, JUI does not **yet** have vertical sliders.===
|
||||
* Range and Step: You can define a minimum and maximum value for the slider;
|
||||
* As well as a "step" quantity, forcing the slider to snap to discrete increments (ie. multiples of 5, or increments of 0.25)
|
||||
* Event-Driven - The "value changed" event fires when the user moves the scrubber or the value is set programmatically.
|
||||
|
||||
```cpp
|
||||
|
||||
auto* sfx_volume_slider = new JUI::Slider(my_scene);
|
||||
|
||||
sfx_volume_slider->Minimum(0);
|
||||
sfx_volume_slider->Maximum(100);
|
||||
sfx_volume_slider->Interval(1);
|
||||
sfx_volume_slider->CurrentValue(50);
|
||||
sfx_volume_slider->ValueChanged += [](float value) {
|
||||
// set audio engine SFX volume.
|
||||
};
|
||||
|
||||
```
|
||||
* Also see `LabeledSlider` for a slider with text.
|
||||
</details>
|
||||
|
||||
<details><summary>Table</summary>
|
||||
|
@@ -6,14 +6,13 @@ void JUI::Tooltip::Update(float delta) {
|
||||
{
|
||||
auto coords = InputService::GetMousePosition();
|
||||
|
||||
|
||||
auto rel_pos = parent->GetAbsolutePosition();
|
||||
|
||||
auto rel_udim = UDim2::FromPixels(rel_pos.x, rel_pos.y);
|
||||
|
||||
auto anchor = AnchorPoint();
|
||||
|
||||
Position(UDim2::FromPixels(coords.x - rel_pos.x, coords.y - rel_pos.y));
|
||||
Position(UDim2::FromPixels(coords.x - rel_pos.x, coords.y - rel_pos.y - GetAbsoluteSize().y));
|
||||
Visible(true);
|
||||
} else
|
||||
Visible(false);
|
||||
|
Reference in New Issue
Block a user