Did some styling updates to the ui, added a range slider and a toggle

This commit is contained in:
PS 2020-11-14 23:30:24 -08:00
parent 30123e47a2
commit e5ab90fcb1
4 changed files with 242 additions and 90 deletions

View File

@ -89,25 +89,8 @@ Editor_Update(app_state* State, context* Context, input_queue InputQueue)
}
internal void
Editor_DrawWidget(app_state* State, context* Context, render_command_buffer* RenderBuffer, ui_widget Widget)
Editor_DrawWidgetString(app_state* State, context* Context, render_command_buffer* RenderBuffer, ui_widget Widget, v4 Color)
{
if (ui_WidgetIsFlagSet(Widget, UIWidgetFlag_DrawBackground))
{
v4 Color = State->Interface.Style.ButtonColor_Inactive;
if (ui_WidgetIdsEqual(Widget.Id, State->Interface.HotWidget))
{
Color = State->Interface.Style.ButtonColor_Active;
}
if (ui_WidgetIdsEqual(Widget.Id, State->Interface.ActiveWidget))
{
Color = State->Interface.Style.ButtonColor_Selected;
}
PushRenderQuad2D(RenderBuffer, Widget.Bounds.Min, Widget.Bounds.Max, Color);
}
if (ui_WidgetIsFlagSet(Widget, UIWidgetFlag_DrawString) && Widget.String.Length > 0)
{
v4 Color = State->Interface.Style.TextColor;
render_quad_batch_constructor BatchConstructor = PushRenderTexture2DBatch(RenderBuffer,
Widget.String.Length,
State->Interface.Style.Font->BitmapMemory,
@ -135,6 +118,59 @@ Editor_DrawWidget(app_state* State, context* Context, render_command_buffer* Ren
}
}
internal void
Editor_DrawWidget(app_state* State, context* Context, render_command_buffer* RenderBuffer, ui_widget Widget)
{
if (ui_WidgetIsFlagSet(Widget, UIWidgetFlag_DrawBackground))
{
v4 Color = State->Interface.Style.ButtonColor_Inactive;
if (ui_WidgetIdsEqual(Widget.Id, State->Interface.HotWidget))
{
Color = State->Interface.Style.ButtonColor_Active;
}
if (ui_WidgetIdsEqual(Widget.Id, State->Interface.ActiveWidget))
{
Color = State->Interface.Style.ButtonColor_Selected;
}
PushRenderQuad2D(RenderBuffer, Widget.Bounds.Min, Widget.Bounds.Max, Color);
}
if (ui_WidgetIsFlagSet(Widget, UIWidgetFlag_DrawString) && Widget.String.Length > 0)
{
v4 Color = State->Interface.Style.TextColor;
Editor_DrawWidgetString(State, Context, RenderBuffer, Widget, Color);
}
if (ui_WidgetIsFlagSet(Widget, UIWidgetFlag_DrawHorizontalFill))
{
v4 Color = PinkV4; //State->Interface.Style.ButtonColor_Active;
if (ui_WidgetIdsEqual(Widget.Id, State->Interface.HotWidget))
{
Color = GreenV4; //State->Interface.Style.ButtonColor_Selected;
}
if (ui_WidgetIdsEqual(Widget.Id, State->Interface.ActiveWidget))
{
Color = TealV4; //State->Interface.Style.ButtonColor_Selected;
}
rect2 HFillBounds = {};
HFillBounds.Min = Widget.Bounds.Min;
HFillBounds.Max = {
LerpR32(Widget.HorizontalFillPercent, Widget.Bounds.Min.x, Widget.Bounds.Max.x),
Widget.Bounds.Max.y
};
PushRenderQuad2D(RenderBuffer, HFillBounds.Min, HFillBounds.Max, Color);
if (ui_WidgetIsFlagSet(Widget, UIWidgetFlag_DrawString) && Widget.String.Length > 0)
{
// TODO(pjs): Mask this text by the horizontal fill
// TODO(pjs): add this color to the style
v4 TextColor = BlackV4;
Editor_DrawWidgetString(State, Context, RenderBuffer, Widget, TextColor);
}
}
if (ui_WidgetIsFlagSet(Widget, UIWidgetFlag_DrawOutline))
{
// TODO(pjs): replace these with values from the style
@ -154,6 +190,11 @@ Editor_DrawWidget(app_state* State, context* Context, render_command_buffer* Ren
}
}
global r32 TestSlider_Value = 5;
global r32 TestSlider_Min = 0;
global r32 TestSlider_Max = 10;
global bool TestToggle = true;
internal void
TestRender(app_state* State, context* Context, render_command_buffer* RenderBuffer)
{
@ -183,6 +224,11 @@ TestRender(app_state* State, context* Context, render_command_buffer* RenderBuff
ui_EndDropdown(&State->Interface);
}
ui_EndRow(&State->Interface);
TestSlider_Value = ui_RangeSlider(&State->Interface, MakeString("Test Slider"), TestSlider_Value, TestSlider_Min, TestSlider_Max);
TestToggle = ui_Toggle(&State->Interface, MakeString("test toggle"), TestToggle);
ui_Button(&State->Interface, MakeString("Hello"));
ui_PopLayout(&State->Interface);
@ -195,7 +241,7 @@ Editor_Render(app_state* State, context* Context, render_command_buffer* RenderB
PushRenderOrthographic(RenderBuffer, State->WindowBounds);
PushRenderClearScreen(RenderBuffer);
#if 0
#if 1
TestRender(State, Context, RenderBuffer);
//ui_widget_id IdTwo = TestRender(State, Context, RenderBuffer);
//Assert(ui_WidgetIdsEqual(IdOne, IdTwo));

View File

@ -5,14 +5,6 @@
//
#ifndef INTERFACE_H
// Widget Capabilities
// - string
// - background
// - outline
// - active (mouse is interacting)
// - hot (mouse could be about to interact)
// - retained state - if a toggle is active, or a drop down is open
enum gs_string_alignment
{
Align_Left,
@ -188,15 +180,13 @@ DrawStringWithCursor (render_command_buffer* RenderBuffer, gs_string String, s32
return LowerRight;
}
// TODO(pjs): remove the need for htis (go thru and remove code that's in the #else block of #ifdef EXTERNAL_RENDERER s
#define EXTERNAL_RENDERER
enum ui_widget_flag
{
UIWidgetFlag_DrawBackground,
UIWidgetFlag_DrawString,
UIWidgetFlag_DrawOutline,
UIWidgetFlag_Clickable,
UIWidgetFlag_DrawHorizontalFill,
};
struct ui_widget_id
@ -223,6 +213,9 @@ struct ui_widget
ui_widget* Next;
// Slider
r32 HorizontalFillPercent;
// Layout
ui_widget* Parent;
@ -250,6 +243,8 @@ struct ui_widget
struct ui_eval_result
{
bool Clicked;
bool Held;
v2 DragDelta;
};
struct interface_config
@ -276,6 +271,7 @@ struct ui_widget_retained_state
{
ui_widget_id Id;
bool Value;
r32 InitialValueR32;
u32 FramesSinceAccess;
};
@ -414,7 +410,7 @@ static ui_widget*
ui_PushLayout(ui_interface* Interface, rect2 Bounds, ui_layout_direction FillDir, gs_string Name)
{
ui_widget* Result = ui_CreateWidget(Interface, Name);
ui_WidgetSetFlag(Result, UIWidgetFlag_DrawOutline);
//ui_WidgetSetFlag(Result, UIWidgetFlag_DrawOutline);
Result->Bounds = Bounds;
Result->Margin = Interface->Style.Margin;
@ -425,12 +421,12 @@ ui_PushLayout(ui_interface* Interface, rect2 Bounds, ui_layout_direction FillDir
{
case LayoutDirection_BottomUp:
{
Result->RowYAt = Bounds.Min.y;
Result->RowYAt = Bounds.Min.y + Result->Margin.y;
}break;
case LayoutDirection_TopDown:
{
Result->RowYAt = Bounds.Max.y - Result->RowHeight;
Result->RowYAt = Bounds.Max.y - (Result->RowHeight + Result->Margin.y);
}break;
}
@ -447,13 +443,10 @@ ui_PushLayout(ui_interface* Interface, rect2 Bounds, ui_layout_direction FillDir
return Result;
}
internal ui_eval_result ui_EvaluateWidget(ui_interface* Interface, ui_widget* Widget, rect2 Bounds);
static void
ui_PopLayout(ui_interface* Interface)
{
Assert(Interface->ActiveLayout != 0);
//ui_EvaluateWidget(Interface, Interface->ActiveLayout, Interface->ActiveLayout->Bounds);
Interface->ActiveLayout = Interface->ActiveLayout->Parent;
}
@ -480,7 +473,7 @@ ui_EndRow(ui_interface* Interface)
{
Interface->ActiveLayout->DrawHorizontal = false;
Interface->ActiveLayout->ColumnWidths = 0;
Interface->ActiveLayout->RowYAt -= Interface->ActiveLayout->RowHeight;
Interface->ActiveLayout->RowYAt -= (Interface->ActiveLayout->RowHeight + Interface->ActiveLayout->Margin.y);
}
static b32
@ -489,19 +482,20 @@ ui_TryReserveElementBounds(ui_widget* Widget, rect2* Bounds)
b32 Result = true;
if (!Widget->DrawHorizontal)
{
Bounds->Min = { Widget->Bounds.Min.x, Widget->RowYAt };
Bounds->Max = { Widget->Bounds.Max.x, Bounds->Min.y + Widget->RowHeight };
Bounds->Min = { Widget->Bounds.Min.x + Widget->Margin.x, Widget->RowYAt };
Bounds->Max = { Widget->Bounds.Max.x - Widget->Margin.x, Bounds->Min.y + Widget->RowHeight };
r32 RowOffset = Widget->RowHeight + Widget->Margin.y;
switch (Widget->FillDirection)
{
case LayoutDirection_BottomUp:
{
Widget->RowYAt += Widget->RowHeight;
Widget->RowYAt += RowOffset;
}break;
case LayoutDirection_TopDown:
{
Widget->RowYAt -= Widget->RowHeight;
Widget->RowYAt -= RowOffset;
}break;
InvalidDefaultCase;
@ -514,13 +508,19 @@ ui_TryReserveElementBounds(ui_widget* Widget, rect2* Bounds)
Assert(Widget->ColumnsCount < Widget->ColumnsMax);
if (Widget->ColumnWidths != 0)
{
v2 Min = { Widget->Bounds.Min.x, Widget->RowYAt };
v2 Min = {
Widget->Bounds.Min.x + Widget->Margin.x,
Widget->RowYAt
};
for (u32 i = 0; i < Widget->ColumnsCount; i++)
{
Min.x += Widget->ColumnWidths[i];
}
Bounds->Min = Min;
Bounds->Max = Bounds->Min + v2{ Widget->ColumnWidths[Widget->ColumnsCount], Widget->RowHeight };
Bounds->Max = Bounds->Min + v2{
Widget->ColumnWidths[Widget->ColumnsCount] - Widget->Margin.x,
Widget->RowHeight
};
}
else
{
@ -530,7 +530,7 @@ ui_TryReserveElementBounds(ui_widget* Widget, rect2* Bounds)
Widget->RowYAt
};
Bounds->Max = {
Bounds->Min.x + ElementWidth - Widget->Margin.x,
Bounds->Min.x + ElementWidth - (Widget->Margin.x * 2),
Bounds->Min.y + Widget->RowHeight
};
}
@ -584,9 +584,20 @@ ui_EvaluateWidget(ui_interface* Interface, ui_widget* Widget, rect2 Bounds)
{
if (ui_WidgetIdsEqual(Interface->HotWidget, Widget->Id) && MouseButtonTransitionedDown(Interface->Mouse.LeftButtonState))
{
Assert(!ui_WidgetIdsEqual(Interface->ActiveWidget, Widget->Id));
Result.Clicked = true;
Interface->ActiveWidget = Widget->Id;
}
Interface->HotWidget = Widget->Id;
}
if (MouseButtonHeldDown(Interface->Mouse.LeftButtonState) &&
PointIsInRect(Widget->Bounds, Interface->Mouse.DownPos))
{
Result.Held = true;
Result.DragDelta = Interface->Mouse.Pos - Interface->Mouse.DownPos;
}
if (ui_WidgetIdsEqual(Interface->ActiveWidget, Widget->Id) &&
MouseButtonTransitionedUp(Interface->Mouse.LeftButtonState))
@ -594,8 +605,6 @@ ui_EvaluateWidget(ui_interface* Interface, ui_widget* Widget, rect2 Bounds)
Interface->ActiveWidget = {};
}
Interface->HotWidget = Widget->Id;
}
}
return Result;
@ -655,24 +664,29 @@ ui_DrawString(ui_interface* Interface, gs_string String, gs_string_alignment Ali
ui_EvaluateWidget(Interface, Widget);
}
static b32
ui_Button(ui_interface* Interface, gs_string Text)
internal ui_widget*
ui_CreateButtonWidget(ui_interface* Interface, gs_string Text)
{
ui_widget* Widget = ui_CreateWidget(Interface, Text);
ui_WidgetSetFlag(Widget, UIWidgetFlag_Clickable);
ui_WidgetSetFlag(Widget, UIWidgetFlag_DrawBackground);
ui_WidgetSetFlag(Widget, UIWidgetFlag_DrawString);
ui_WidgetSetFlag(Widget, UIWidgetFlag_DrawOutline);
return Widget;
}
internal b32
ui_Button(ui_interface* Interface, gs_string Text)
{
ui_widget* Widget = ui_CreateButtonWidget(Interface, Text);
ui_eval_result Result = ui_EvaluateWidget(Interface, Widget);
return Result.Clicked;
}
static b32
internal b32
ui_Button(ui_interface* Interface, gs_string Text, rect2 Bounds)
{
ui_widget* Widget = ui_CreateWidget(Interface, Text);
ui_WidgetSetFlag(Widget, UIWidgetFlag_Clickable);
ui_WidgetSetFlag(Widget, UIWidgetFlag_DrawBackground);
ui_WidgetSetFlag(Widget, UIWidgetFlag_DrawString);
ui_widget* Widget = ui_CreateButtonWidget(Interface, Text);
ui_eval_result Result = ui_EvaluateWidget(Interface, Widget, Bounds);
return Result.Clicked;
}
@ -762,6 +776,7 @@ ui_EvaluateDropdown(ui_interface* Interface, ui_widget* Widget, ui_eval_result E
}
ui_widget* Layout = ui_PushLayout(Interface, MenuBounds, Direction, MakeString("WidgetLayout"));
Layout->Margin.y = 0;
Layout->WidgetReference = Widget->Id;
}
@ -775,6 +790,7 @@ ui_BeginDropdown(ui_interface* Interface, gs_string Text, rect2 Bounds)
ui_WidgetSetFlag(Widget, UIWidgetFlag_Clickable);
ui_WidgetSetFlag(Widget, UIWidgetFlag_DrawBackground);
ui_WidgetSetFlag(Widget, UIWidgetFlag_DrawString);
ui_WidgetSetFlag(Widget, UIWidgetFlag_DrawOutline);
ui_eval_result Result = ui_EvaluateWidget(Interface, Widget, Bounds);
return ui_EvaluateDropdown(Interface, Widget, Result);
}
@ -786,6 +802,7 @@ ui_BeginDropdown(ui_interface* Interface, gs_string Text)
ui_WidgetSetFlag(Widget, UIWidgetFlag_Clickable);
ui_WidgetSetFlag(Widget, UIWidgetFlag_DrawBackground);
ui_WidgetSetFlag(Widget, UIWidgetFlag_DrawString);
ui_WidgetSetFlag(Widget, UIWidgetFlag_DrawOutline);
ui_eval_result Result = ui_EvaluateWidget(Interface, Widget);
return ui_EvaluateDropdown(Interface, Widget, Result);
}
@ -804,6 +821,79 @@ ui_EndDropdown(ui_interface* Interface)
}
}
internal r32
ui_EvaluateRangeSlider(ui_interface* Interface, ui_widget* Widget, ui_eval_result EvalResult, r32 Value, r32 MinValue, r32 MaxValue)
{
r32 NewValue = Value;
ui_widget_retained_state* State = ui_GetRetainedState(Interface, Widget->Id);
if (!State)
{
State = ui_CreateRetainedState(Interface, Widget);
}
if (EvalResult.Clicked)
{
State->InitialValueR32 = Value;
}
if (EvalResult.Held)
{
r32 Percent = (Interface->Mouse.Pos.x - Widget->Bounds.Min.x) / Rect2Width(Widget->Bounds);
NewValue = LerpR32(Percent, MinValue, MaxValue);
}
NewValue = Clamp(MinValue, NewValue, MaxValue);
Widget->HorizontalFillPercent = RemapR32(NewValue, MinValue, MaxValue, 0, 1);
return NewValue;
}
internal ui_widget*
ui_CreateRangeSliderWidget(ui_interface* Interface, gs_string Text, r32 Value)
{
ui_widget* Widget = ui_CreateWidget(Interface, Text);
ui_WidgetSetFlag(Widget, UIWidgetFlag_Clickable);
ui_WidgetSetFlag(Widget, UIWidgetFlag_DrawBackground);
ui_WidgetSetFlag(Widget, UIWidgetFlag_DrawString);
ui_WidgetSetFlag(Widget, UIWidgetFlag_DrawHorizontalFill);
ui_WidgetSetFlag(Widget, UIWidgetFlag_DrawOutline);
Widget->String = PushStringF(Interface->PerFrameMemory, 128, "%f", Value);
return Widget;
}
internal r32
ui_RangeSlider(ui_interface* Interface, gs_string Text, r32 Value, r32 ValueMin, r32 ValueMax)
{
ui_widget* Widget = ui_CreateRangeSliderWidget(Interface, Text, Value);
ui_eval_result Result = ui_EvaluateWidget(Interface, Widget);
return ui_EvaluateRangeSlider(Interface, Widget, Result, Value, ValueMin, ValueMax);
}
internal r32
ui_RangeSlider(ui_interface* Interface, gs_string Text, rect2 Bounds, r32 Value, r32 ValueMin, r32 ValueMax)
{
ui_widget* Widget = ui_CreateRangeSliderWidget(Interface, Text, Value);
ui_eval_result Result = ui_EvaluateWidget(Interface, Widget, Bounds);
return ui_EvaluateRangeSlider(Interface, Widget, Result, Value, ValueMin, ValueMax);
}
internal bool
ui_Toggle(ui_interface* Interface, gs_string Text, bool Value)
{
ui_widget* Widget = ui_CreateWidget(Interface, Text);
ui_WidgetSetFlag(Widget, UIWidgetFlag_Clickable);
ui_WidgetSetFlag(Widget, UIWidgetFlag_DrawBackground);
ui_WidgetSetFlag(Widget, UIWidgetFlag_DrawHorizontalFill);
ui_WidgetSetFlag(Widget, UIWidgetFlag_DrawOutline);
ui_eval_result Eval = ui_EvaluateWidget(Interface, Widget);
bool Result = Eval.Clicked ? !Value : Value;
Widget->HorizontalFillPercent = Result ? 1.0f : 0.0f;
return Result;
}
//
// OLD
//

View File

@ -187,7 +187,7 @@ HandleWindowMessage (MSG Message, window* Window, input_queue* InputQueue, mouse
AddInputEventEntry(InputQueue, KeyCode_MouseLeftButton, false, true,
ShiftDown, AltDown, CtrlDown, false);
Mouse->LeftButtonState = KeyState_IsDown & ~KeyState_WasDown;
Mouse->LeftButtonState |= KeyState_IsDown;
Mouse->DownPos = Mouse->Pos;
// :Win32MouseEventCapture
@ -237,7 +237,7 @@ HandleWindowMessage (MSG Message, window* Window, input_queue* InputQueue, mouse
AddInputEventEntry(InputQueue, KeyCode_MouseLeftButton, true, false,
ShiftDown, AltDown, CtrlDown, false);
Mouse->LeftButtonState = ~KeyState_IsDown & KeyState_WasDown;
Mouse->LeftButtonState &= ~KeyState_IsDown;
// :Win32MouseEventCapture
ReleaseCapture();
@ -593,7 +593,7 @@ WinMain (
AddressedDataBufferList_Clear(&OutputData);
{ // Mouse Position
{ // Mouse
POINT MousePos;
GetCursorPos (&MousePos);
ScreenToClient(MainWindow.Handle, &MousePos);
@ -602,6 +602,15 @@ WinMain (
Context.Mouse.OldPos = Context.Mouse.Pos;
Context.Mouse.Pos = v2{(r32)MousePos.x, (r32)MainWindow.Height - MousePos.y};
Context.Mouse.DeltaPos = Context.Mouse.Pos - Context.Mouse.OldPos;
if (KeyIsDown(Context.Mouse.LeftButtonState))
{
SetKeyWasDown(Context.Mouse.LeftButtonState);
}
else
{
SetKeyWasUp(Context.Mouse.LeftButtonState);
}
}
MSG Message;
@ -687,7 +696,7 @@ WinMain (
LastFrameEnd = GetWallClock();
OutputDebugStringA("-- Frame END -- \n");
//OutputDebugStringA("-- Frame END -- \n");
}

View File

@ -227,6 +227,11 @@ enum key_state_flags
#define KeyWasDown(event) ((event & KeyState_WasDown) > 0)
#define KeyIsDown(event) ((event & KeyState_IsDown) > 0)
#define SetKeyDown(key) (key |= KeyState_IsDown)
#define SetKeyWasDown(key) (key |= KeyState_WasDown)
#define SetKeyUp(key) (key &= ~KeyState_IsDown)
#define SetKeyWasUp(key) (key &= ~KeyState_WasDown)
struct input_entry
{
key_code Key;
@ -266,6 +271,8 @@ struct mouse_state
b32 MiddleButtonState;
b32 RightButtonState;
cursor_type CursorType;
};