Skip to content

UI suite: a convenient background entry and reactive layout containers (ME-84, ME-85) #634

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Exoridus merged 2 commits into from
Aug 28, 2026
Merged

UI suite: a convenient background entry and reactive layout containers (ME-84, ME-85) #634

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fdae86b
feat(ui): state a widget background the way you have it
Aug 28, 2026
afe8a46
feat(ui): make layout containers react to what they lay out
Aug 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 24 additions & 2 deletions examples/guides/ui-and-widgets/widgets.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Button, Keyboard, Label, Panel, ProgressBar, Scene, ScrollContainer, Stack, Tooltip } from '@codexo/exojs';
import { Button, DockContainer, Keyboard, Label, Panel, ProgressBar, Scene, ScrollContainer, Stack, Tooltip } from '@codexo/exojs';

// #region guide:anchoring
class HudScene extends Scene {
Expand Down Expand Up @@ -31,6 +31,28 @@ class MenuScene extends Scene {
}
// #endregion guide:stack

// #region guide:dock
class DockedHudScene extends Scene {
override init(): void {
const hud = new DockContainer({ width: this.ui.screenWidth, height: this.ui.screenHeight });

const topBar = new Stack({ direction: 'row', spacing: 12, padding: 8, align: 'center' });
topBar.addChild(new Label('Score: 0', { fontSize: 20 }), new ProgressBar({ width: 180, height: 12, value: 1 }));

const sidebar = new Stack({ direction: 'column', spacing: 8, padding: 8 });
sidebar.setSize(200, 0);
sidebar.addChild(new Button({ label: 'Map' }), new Button({ label: 'Quests' }));

hud.dock(topBar, 'top');
hud.dock(sidebar, 'right');
hud.dock(new Panel(), 'center');

this.ui.addChild(hud);
this.ui.onResize.add((width, height) => hud.setSize(width, height));
}
}
// #endregion guide:dock

// #region guide:scrolling
class InventoryScene extends Scene {
override init(): void {
Expand Down Expand Up @@ -83,4 +105,4 @@ class ShopScene extends Scene {
}
// #endregion guide:tooltip

export { FormScene, HudScene, InventoryScene, MenuScene, ShopScene };
export { DockedHudScene, FormScene, HudScene, InventoryScene, MenuScene, ShopScene };
201 changes: 199 additions & 2 deletions site/src/content/api/button-options.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@
"subsystem": "ui",
"importPath": "@codexo/exojs",
"tier": "stable",
"memberCount": 10,
"memberCount": 15,
"counts": {
"constructors": 0,
"methods": 0,
"properties": 10,
"properties": 15,
"events": 0
},
"sections": [
Expand All @@ -26,6 +26,51 @@
"id": "properties",
"title": "Properties",
"members": [
{
"name": "border",
"signature": "border?: Partial<NineSliceInsets> | number",
"signatureTokens": [
{
"text": "border",
"kind": "name"
},
{
"text": "?",
"kind": "punctuation"
},
{
"text": ": ",
"kind": "punctuation"
},
{
"text": "Partial",
"kind": "type"
},
{
"text": "<",
"kind": "punctuation"
},
{
"text": "NineSliceInsets",
"kind": "type"
},
{
"text": ">",
"kind": "punctuation"
},
{
"text": " | ",
"kind": "punctuation"
},
{
"text": "number",
"kind": "keyword"
}
],
"params": [],
"returnType": null,
"description": "Destination border widths for every textured skin entry; defaults to slices."
},
{
"name": "color",
"signature": "color?: Color",
Expand Down Expand Up @@ -101,6 +146,31 @@
"returnType": null,
"description": ""
},
{
"name": "fit",
"signature": "fit?: UISpriteFit",
"signatureTokens": [
{
"text": "fit",
"kind": "name"
},
{
"text": "?",
"kind": "punctuation"
},
{
"text": ": ",
"kind": "punctuation"
},
{
"text": "UISpriteFit",
"kind": "type"
}
],
"params": [],
"returnType": null,
"description": "Paint textured skin entries flat with this fit instead of slicing them."
},
{
"name": "fontSize",
"signature": "fontSize?: number",
Expand Down Expand Up @@ -201,6 +271,31 @@
"returnType": null,
"description": ""
},
{
"name": "modes",
"signature": "modes?: NineSliceModes",
"signatureTokens": [
{
"text": "modes",
"kind": "name"
},
{
"text": "?",
"kind": "punctuation"
},
{
"text": ": ",
"kind": "punctuation"
},
{
"text": "NineSliceModes",
"kind": "type"
}
],
"params": [],
"returnType": null,
"description": ""
},
{
"name": "pressedColor",
"signature": "pressedColor?: Color",
Expand All @@ -226,6 +321,108 @@
"returnType": null,
"description": ""
},
{
"name": "skin",
"signature": "skin?: Partial<Record<ButtonState, UIBackgroundInput>>",
"signatureTokens": [
{
"text": "skin",
"kind": "name"
},
{
"text": "?",
"kind": "punctuation"
},
{
"text": ": ",
"kind": "punctuation"
},
{
"text": "Partial",
"kind": "type"
},
{
"text": "<",
"kind": "punctuation"
},
{
"text": "Record",
"kind": "type"
},
{
"text": "<",
"kind": "punctuation"
},
{
"text": "ButtonState",
"kind": "type"
},
{
"text": ", ",
"kind": "punctuation"
},
{
"text": "UIBackgroundInput",
"kind": "type"
},
{
"text": ">",
"kind": "punctuation"
},
{
"text": ">",
"kind": "punctuation"
}
],
"params": [],
"returnType": null,
"description": "The background per state, each stated as a colour, a texture, a region or a full descriptor. States left out fall back to the theme's button skin."
},
{
"name": "slices",
"signature": "slices?: Partial<NineSliceInsets> | number",
"signatureTokens": [
{
"text": "slices",
"kind": "name"
},
{
"text": "?",
"kind": "punctuation"
},
{
"text": ": ",
"kind": "punctuation"
},
{
"text": "Partial",
"kind": "type"
},
{
"text": "<",
"kind": "punctuation"
},
{
"text": "NineSliceInsets",
"kind": "type"
},
{
"text": ">",
"kind": "punctuation"
},
{
"text": " | ",
"kind": "punctuation"
},
{
"text": "number",
"kind": "keyword"
}
],
"params": [],
"returnType": null,
"description": "Source-texture slice widths for every textured skin entry; defaults to a third per axis."
},
{
"name": "textColor",
"signature": "textColor?: Color",
Expand Down
Loading
Loading