The skin engine is working really well so far! there's now a skin cache per widget too so a single map lookup for the stateProperty if the skin hasn't changed or the widget's class path. The following is a basic example with a mouse hover event:
Code: Select all
Global NewMap layoutmap.s()
#ProGUI_UseDll = 0;#True
CompilerIf Not #PB_Compiler_Thread
MessageRequester("ProGUI", "Please enable threadsafe executable", #PB_MessageRequester_Ok)
End
CompilerEndIf
CompilerIf #PB_Compiler_DPIAware
MessageRequester("ProGUI", "Please disable DPI aware executable, ProGUI handles per-monitor DPI", #PB_MessageRequester_Ok)
End
CompilerEndIf
CompilerIf #ProGUI_UseDll
IncludeFile "ProGUI_PB.pbi"
CompilerElse
IncludeFile "ProGUI.pbi"
CompilerEndIf
driver = #PG_RenderDirect2D
;driver = #PG_RenderVector
;driver = #PG_RenderCairo
StartProGUI(driver)
Procedure draw(window, EventType, *eventData.PG_EventDraw)
;DrawClear(0, 0)
DrawClear(RGB(240, 240, 240), 1)
EndProcedure
Procedure drawTestWidget(Widget, EventType, *eventData.PG_EventDraw)
WidgetGetSkinColor(Widget, "background-color", @color.l, @opacity.f)
DrawBox(0, 0, *eventData\width, *eventData\height, color, opacity)
EndProcedure
Procedure testWidgetMouse(Widget, EventType, *eventData.PG_EventMouse)
Select EventType
Case #PG_Event_MouseEnter
WidgetSetSkinState(Widget, "hover")
Case #PG_Event_MouseLeave
WidgetSetSkinState(Widget)
EndSelect
EndProcedure
Procedure CreateTestWidget()
*widget = CreateWidget(0, 0, 350, 0, 0, #PG_Widget_LayoutFlex)
WidgetSetClass(*widget, "testContainer")
AddEventHandler(*widget, #PG_Event_Draw, @drawTestWidget())
AddEventHandler(*widget, #PG_Event_MouseEnter, @testWidgetMouse())
AddEventHandler(*widget, #PG_Event_MouseLeave, @testWidgetMouse())
LayoutFlexSetDirection(0, #PG_Flex_Direction_Row)
LayoutFlexSetWrap(0, #PG_Flex_Wrap_Enabled)
ProcedureReturn *widget
EndProcedure
Procedure CreateTestWidget2()
LayoutPush()
*widget = CreateWidget(0, 0, 200, 200, 0, #PG_Widget_LayoutFlex)
WidgetSetClass(*widget, "testContainer2")
AddEventHandler(*widget, #PG_Event_Draw, @drawTestWidget())
LayoutFlexSetDirection(0, #PG_Flex_Direction_Row)
LayoutFlexSetWrap(0, #PG_Flex_Wrap_Enabled)
*widget = CreateWidget(0, 0, 100, 100, 0)
WidgetSetClass(*widget, "testWidget2")
AddEventHandler(*widget, #PG_Event_Draw, @drawTestWidget())
AddEventHandler(*widget, #PG_Event_MouseEnter, @testWidgetMouse())
AddEventHandler(*widget, #PG_Event_MouseLeave, @testWidgetMouse())
LayoutPop()
ProcedureReturn *widget
EndProcedure
Global SignalQuit
Procedure WindowCloseEventHandler(Window, EventType, *eventData, *userData)
SignalQuit = #True
EndProcedure
OpenConsole()
window = CreateWindow(0, 0, 800, 600, "Test", #PG_Window_MinimizeWidget | #PG_Window_MaximizeWidget | #PG_Window_Sizeable)
;window = CreateWindow(0, 0, 800, 600, "Test", #PG_Window_BorderLess | #PG_Window_Sizeable, 0)
SkinSetValue("testContainer", "background-color", "orange")
SkinSetValue("testContainer", "hover.background-color", "darkorange")
SkinSetValue("dark:testContainer", "background-color", "gray")
SkinSetValue("testContainer.testWidget", "background-color", "red")
SkinSetValue("testContainer.testWidget", "hover.background-color", "purple")
SkinSetValue("testWidget", "background-color", "green")
SkinSetValue("testContainer2", "background-color", "blue")
SkinSetValue("testContainer2.testWidget2", "background-color", "yellow")
SkinSetValue("testContainer2.testWidget2", "hover.background-color", "purple")
;SkinSetValue("testContainer.testContainer2", "background-color", "grey")
;SkinSetValue("testContainer.testContainer2.testWidget2", "background-color", "brown")
layout = LayoutGetCurrent()
LayoutSetType(layout, #PG_Layout_Type_Flex)
LayoutFlexSetDirection(layout, #PG_Flex_Direction_Row)
LayoutSetPadding(layout, 20)
;LayoutSetPaddingLeft(layout, 0)
;LayoutSetPaddingRight(layout, 0)
;LayoutSetPaddingTop(layout, 0)
;LayoutSetPaddingBottom(layout, 0)
;LayoutFlexSetJustify(layout, #PG_Flex_Justify_Center)
;LayoutFlexSetAlignItems(layout, #PG_Flex_AlignItems_End)
;LayoutFlexSetWrap(layout, #PG_Flex_Wrap_Enabled)
;LayoutFlexSetAlignContent(layout, #PG_Flex_AlignContent_SpaceBetween)
itemMargin = 0
widget = CreateWidget(50, 50, 150, 150)
WidgetSetMinWidth(widget, 100)
WidgetSetMinHeight(widget, 50)
WidgetSetMargin(widget, itemMargin)
CreateTestWidget2()
widget2 = CreateWidget(160, 50, 150, 150)
WidgetSetClass(widget2, "testWidget")
AddEventHandler(widget2, #PG_Event_Draw, @drawTestWidget())
WidgetSetMargin(widget2, itemMargin)
widget3 = CreateWidget(270, 50, 150, 150)
WidgetSetMargin(widget3, itemMargin)
widget5 = CreateWidget(380, 50, 150, 150)
WidgetSetMargin(widget5, itemMargin)
testWidget = CreateTestWidget()
WidgetSetSkin(testWidget, testSkin)
WidgetSetMinWidth(testWidget, 100)
WidgetSetHeight(testWidget, #PG_Widget_FitContent)
WidgetSetMargin(testWidget, itemMargin)
layout2 = LayoutGetCurrent()
LayoutSetCurrent(layout)
widget6 = CreateWidget(50, 50, 150, 100)
WidgetSetMinWidth(widget6, 80)
WidgetSetMargin(widget6, itemMargin)
widget7 = CreateWidget(160, 50, 0, 0)
WidgetSetMinWidth(widget7, 200)
WidgetSetMargin(widget7, itemMargin)
WidgetSetMinHeight(widget7, 50)
widget8 = CreateWidget(380, 50, 150, 100)
WidgetSetMinWidth(widget8, 50)
WidgetSetMargin(widget8, itemMargin)
LayoutSetCurrent(layout2)
For n = 1 To 10;000
widget = CreateWidget(380, 50, Random(250), 0)
WidgetSetClass(widget, "testWidget")
AddEventHandler(widget, #PG_Event_Draw, @drawTestWidget())
WidgetSetMinWidth(widget, 50)
WidgetSetMinHeight(widget, 50)
WidgetSetMargin(widget, 5)
Next
CreateTestWidget2()
AddEventHandler(window, #PG_Event_Draw, @draw())
AddEventHandler(window, #PG_Event_WindowClose, @WindowCloseEventHandler())
WindowShow(window)
Repeat
Event = WaitWindowEvent()
Until Event = #PB_Event_CloseWindow Or Event = #PB_Event_RightClick Or SignalQuit
StopProGUI()
)
I'm currently refactoring the code to handle sub properties more efficiently for example: border, border-radius, border-top-left-radius with 'border' being the base property.