hotkey button highlighting

This commit is contained in:
jacob 2025-11-09 01:44:19 -06:00
parent 992e8762ae
commit 0bfefe064f
8 changed files with 67 additions and 40 deletions

View File

@ -36,7 +36,7 @@ String StringFromButton(Button button)
[Button_F22] = CompLit("F22"),
[Button_F23] = CompLit("F23"),
[Button_F24] = CompLit("F24"),
[Button_GraveAccent] = CompLit("~"),
[Button_GraveAccent] = CompLit("Tilde"),
[Button_0] = CompLit("0"),
[Button_1] = CompLit("1"),
[Button_2] = CompLit("2"),
@ -91,12 +91,12 @@ String StringFromButton(Button button)
[Button_PageDown] = CompLit("PageDown"),
[Button_Home] = CompLit("Home"),
[Button_End] = CompLit("End"),
[Button_ForwardSlash] = CompLit("ForwardSlash"),
[Button_ForwardSlash] = CompLit("Slash"),
[Button_Period] = CompLit("Period"),
[Button_Comma] = CompLit("Comma"),
[Button_Quote] = CompLit("Quote"),
[Button_LeftBracket] = CompLit("LeftBracket"),
[Button_RightBracket] = CompLit("RightBracket"),
[Button_LeftBracket] = CompLit("Left Bracket"),
[Button_RightBracket] = CompLit("Right Bracket"),
[Button_Insert] = CompLit("Insert"),
[Button_Semicolon] = CompLit("Semicolon"),
};

View File

@ -209,6 +209,11 @@ JobDef(PP_VisWorker, sig, job_id)
PP_WidgetTheme theme = PP_GetWidgetTheme();
PP_PushWidgetThemeStyles(theme);
UI_Push(ChildLayoutAxis, Axis_Y);
UI_Push(Width, UI_GROW(1, 0));
UI_Push(Height, UI_GROW(1, 0));
UI_Push(Parent, UI_BuildColumnEx(UI_KeyF("AAH")));
//////////////////////////////
//- Process controller events vis cmds

View File

@ -8,7 +8,7 @@ PP_WidgetTheme PP_GetWidgetTheme(void)
theme.window_background_color = Rgb32(0xff1a1d1e);
theme.window_border_color = Rgb32(0xff343a3b);
theme.window_border = 1;
theme.window_width = 1000;
theme.window_width = 600;
theme.window_padding = theme.window_border - 1;
theme.divider_color = theme.window_border_color;
@ -167,26 +167,27 @@ void PP_EndCommandsWidget(PP_CommandsWidget *widget)
UI_Key btn_key = item->key;
UI_Report btn_rep = UI_ReportFromKey(btn_key);
Vec4 btn_color = theme.window_background_color;
Vec4 btn_border_color = ZI;
{
Vec4 hovered_color = Rgb32(0x103c4c);
Vec4 pressed_color = hovered_color;
pressed_color.w = 0.2;
f32 hot = btn_rep.hot;
f32 active = btn_rep.active;
f32 hovered = btn_rep.hovered;
Vec4 color = theme.window_background_color;
Vec4 border_color = ZI;
color = BlendSrgb(color, hovered_color, hot);
color = BlendSrgb(color, pressed_color, active * hovered);
border_color = BlendSrgb(border_color, Rgb32(0x0078a6), hot);
f32 btn_hot = btn_rep.hot;
f32 btn_active = btn_rep.active;
f32 btn_hovered = btn_rep.hovered;
btn_color = BlendSrgb(btn_color, hovered_color, btn_hot);
btn_color = BlendSrgb(btn_color, pressed_color, btn_active * btn_hovered);
btn_border_color = BlendSrgb(btn_border_color, Rgb32(0x0078a6), btn_hot);
}
UI_SetNext(Rounding, 0);
UI_SetNext(Tint, 0);
UI_PushCP(UI_BuildRow());
{
UI_SetNext(BorderColor, border_color);
UI_SetNext(BackgroundColor, color);
UI_SetNext(BorderColor, btn_border_color);
UI_SetNext(BackgroundColor, btn_color);
UI_SetNext(Rounding, UI_RPIX(5));
UI_SetNext(Width, UI_GROW(1, 0));
UI_SetNext(Height, UI_FNT(1.5, 1));
@ -194,6 +195,8 @@ void PP_EndCommandsWidget(PP_CommandsWidget *widget)
UI_SetNext(Flags, UI_BoxFlag_DrawText | UI_BoxFlag_Interactable);
UI_PushCP(UI_BuildRowEx(btn_key));
{
UI_Push(Tag, btn_key.hash);
/* Begin spacer */
UI_BuildSpacer(UI_PIX(20, 1), Axis_X);
@ -206,6 +209,23 @@ void PP_EndCommandsWidget(PP_CommandsWidget *widget)
/* Command hotkey buttons */
for (u64 i = 0; i < countof(item->desc.hotkeys); ++i)
{
UI_Key hotkey_key = UI_KeyF("hotkey%F", FmtUint(i));
UI_Report hotkey_rep = UI_ReportFromKey(hotkey_key);
Vec4 hotkey_color = ZI;
Vec4 hotkey_border_color = ZI;
{
Vec4 hovered_color = Rgb32(0x103c4c);
Vec4 pressed_color = hovered_color;
pressed_color.w = 0.2;
f32 hotkey_hot = hotkey_rep.hot;
f32 hotkey_active = hotkey_rep.active;
f32 hotkey_hovered = hotkey_rep.hovered;
hotkey_color = BlendSrgb(hotkey_color, hovered_color, hotkey_hot);
hotkey_color = BlendSrgb(hotkey_color, pressed_color, hotkey_active * hotkey_hovered);
hotkey_border_color = BlendSrgb(hotkey_border_color, Rgb32(0x0078a6), hotkey_hot);
}
PP_Hotkey hotkey = item->desc.hotkeys[i];
if (hotkey.button == Button_None)
{
@ -214,15 +234,18 @@ void PP_EndCommandsWidget(PP_CommandsWidget *widget)
else
{
String hotkey_name = PP_StringFromHotkey(UI_FrameArena(), hotkey);
UI_SetNext(BackgroundColor, hotkey_color);
UI_SetNext(BorderColor, hotkey_border_color);
UI_SetNext(Text, hotkey_name);
UI_SetNext(Width, UI_SHRINK(theme.text_padding_x + 5, 1));
// UI_SetNext(Width, UI_SHRINK(0, 1));
UI_SetNext(Height, UI_GROW(1, 0));
UI_SetNext(Rounding, UI_RGROW(1));
UI_SetNext(Rounding, UI_RPIX(5));
UI_SetNext(Border, 1);
// UI_SetNext(BackgroundColor, Color_Cyan);
UI_SetNext(ChildAlignment, UI_Alignment_Center);
UI_SetNext(Flags, UI_BoxFlag_DrawText | UI_BoxFlag_Interactable);
UI_PushCP(UI_BuildRow());
UI_PushCP(UI_BuildRowEx(hotkey_key));
{
}

View File

@ -7,6 +7,7 @@ UI_Key UI_BuildLabel(String text)
ResourceKey font = UI_UseTop(Font);
f32 font_size = UI_UseTop(FontSize);
Vec4 tint = UI_UseTop(Tint);
UI_Alignment alignment = UI_UseTop(ChildAlignment);
UI_Key key = ZI;
UI_PushCP(UI_NilKey);
@ -19,6 +20,7 @@ UI_Key UI_BuildLabel(String text)
UI_SetNext(Width, UI_SHRINK(0, 1));
UI_SetNext(Height, UI_SHRINK(0, 1));
UI_SetNext(Text, text);
UI_SetNext(ChildAlignment, alignment);
UI_SetNext(Flags, UI_BoxFlag_DrawText);
key = UI_BuildBox();
}

View File

@ -14,8 +14,8 @@ UI_Key UI_BuildDivider(UI_Size size, Vec4 color, Axis axis);
////////////////////////////////////////////////////////////
//~ Layout helpers
UI_Key UI_BuildColumnEx(UI_Key key);
UI_Key UI_BuildRowEx(UI_Key key);
UI_Key UI_BuildColumnEx(UI_Key key);
#define UI_BuildColumn() UI_BuildColumnEx(UI_TransKey())
#define UI_BuildRow() UI_BuildRowEx(UI_TransKey())
#define UI_BuildColumn() UI_BuildColumnEx(UI_TransKey())

View File

@ -586,6 +586,8 @@ UI_Frame UI_BeginFrame(UI_FrameFlag frame_flags)
result.window_frame = g->bframe.window_frame;
result.cursor_pos = g->bframe.cursor_pos;
result.hovered_box = g->bframe.hovered_box;
result.active_box = g->bframe.hovered_box;
return result;
}
@ -1316,7 +1318,6 @@ i64 UI_EndFrame(UI_Frame frame)
}
baseline = CeilVec2(baseline);
/* Push text rects */
for (u64 i = 0; i < run.count; ++i)
{

View File

@ -290,6 +290,8 @@ Struct(UI_Frame)
{
WND_Frame window_frame;
Vec2 cursor_pos;
UI_Key hovered_box;
UI_Key active_box;
};
////////////////////////////////////////////////////////////

View File

@ -56,8 +56,6 @@ UI_RectPS_Output PSDef(UI_RectPS, UI_RectPS_Input input)
Vec2 p0 = rect.p0;
Vec2 p1 = rect.p1;
b32 aa_enabled = 0;
/* Calculate rect sdf (negative means pixel is inside of rect) */
f32 rect_dist = min(min(p.x - p0.x, p1.x - p.x), min(p.y - p0.y, p1.y - p.y));
{
@ -69,10 +67,10 @@ UI_RectPS_Output PSDef(UI_RectPS, UI_RectPS_Input input)
Vec2 tr = Vec2(p1.x - tr_radius, p0.y + tr_radius);
Vec2 br = Vec2(p1.x - br_radius, p1.y - br_radius);
Vec2 bl = Vec2(p0.x + bl_radius, p1.y - bl_radius);
if (p.x < tl.x && p.y < tl.y) { rect_dist = min(rect_dist, tl_radius - length(tl - p)); aa_enabled = 1; }
if (p.x > tr.x && p.y < tr.y) { rect_dist = min(rect_dist, tr_radius - length(tr - p)); aa_enabled = 1; }
if (p.x > br.x && p.y > br.y) { rect_dist = min(rect_dist, br_radius - length(br - p)); aa_enabled = 1; }
if (p.x < bl.x && p.y > bl.y) { rect_dist = min(rect_dist, bl_radius - length(bl - p)); aa_enabled = 1; }
if (p.x < tl.x && p.y < tl.y) { rect_dist = min(rect_dist, tl_radius - length(tl - p)); }
if (p.x > tr.x && p.y < tr.y) { rect_dist = min(rect_dist, tr_radius - length(tr - p)); }
if (p.x > br.x && p.y > br.y) { rect_dist = min(rect_dist, br_radius - length(br - p)); }
if (p.x < bl.x && p.y > bl.y) { rect_dist = min(rect_dist, bl_radius - length(bl - p)); }
}
rect_dist = -rect_dist;
@ -98,20 +96,16 @@ UI_RectPS_Output PSDef(UI_RectPS, UI_RectPS_Input input)
}
}
/* Calculate border blend from derivitive */
f32 border_dist_fwidth = fwidth(border_dist);
f32 border_blend = saturate(0.5 - border_dist / border_dist_fwidth);
if (!aa_enabled)
{
border_blend = border_dist <= 0;
}
/* Background color */
Vec4 background_color = 0;
{
if (rect_dist <= 0)
{
if (rect.flags & UI_RectFlag_DrawTexture)
if (border_dist <= 0)
{
background_color = border_color;
}
else if (rect.flags & UI_RectFlag_DrawTexture)
{
SamplerState sampler = UniformSamplerFromRid(sig.sampler);
Texture2D<Vec4> tex = NonUniformResourceFromRid(rect.tex);
@ -125,7 +119,7 @@ UI_RectPS_Output PSDef(UI_RectPS, UI_RectPS_Input input)
}
/* Final color */
Vec4 final_color = lerp(background_color, border_color, border_blend);
Vec4 final_color = background_color;
final_color *= input.tint_lin;
/* Debug color */