add section about global key handling

This commit is contained in:
sawka
2024-11-15 14:01:19 -08:00
parent 8833e24277
commit b8c5d67094
+75 -1
View File
@@ -173,7 +173,8 @@ Helper functions:
- `vdom.Filter[T any](items []T, fn func(T) bool) []T` - Filters items based on condition
- `vdom.FilterIdx[T any](items []T, fn func(T, int) bool) []T` - Filters items with index access
The same If/IfElse functions are used for both conditional rendering and conditional classes, always following the pattern of condition first, then value(s).
- The same If/IfElse functions are used for both conditional rendering and conditional classes, always following the pattern of condition first, then value(s).
- Remember to use vdom.IfElse if you need a true ternary condition. vdom.If will return nil on false and does not allow a 3rd argument.
## Style Handling
@@ -555,6 +556,79 @@ Key points for state management:
- Call `SendAsyncInitiation()` after state changes in goroutines (consider round trip performance, so don't call at very high speeds)
- Use atomic operations if globals are modified from multiple goroutines (or locks)
## Global Keyboard Handling
The WaveApp system provides two approaches for handling keyboard events:
1. Standard DOM event handling on elements:
```go
vdom.H("div", map[string]any{
"onKeyDown": func(e vdom.VDomEvent) {
// Handle key event
},
})
```
2. Global keyboard event handling:
```go
var AppClient = waveapp.MakeClient(waveapp.AppOpts{
CloseOnCtrlC: true,
GlobalKeyboardEvents: true, // Enable global keyboard events
GlobalStyles: styleCSS,
})
// In main() or an effect:
AppClient.SetGlobalEventHandler(func(client *waveapp.Client, event vdom.VDomEvent) {
if event.EventType != "onKeyDown" || event.KeyData == nil {
return
}
switch event.KeyData.Key {
case "ArrowUp":
// Handle up arrow
case "ArrowDown":
// Handle down arrow
}
})
```
The global handler approach is particularly useful when:
- You need to handle keyboard events regardless of focus state
- Building terminal-like applications that need consistent keyboard control
- Implementing application-wide keyboard shortcuts
- Managing navigation in full-screen applications
Key differences:
- Standard DOM events require the element to have focus
- Global events work regardless of focus state
- Global events can be used alongside regular DOM event handlers
- Global handler receives all keyboard events for the application
The event handler receives a VDomEvent with KeyData for keyboard events:
```go
type VDomEvent struct {
EventType string // e.g., "onKeyDown"
KeyData *WaveKeyboardEvent `json:"keydata,omitempty"`
// ... other fields
}
type WaveKeyboardEvent struct {
Type string // "keydown", "keyup", "keypress"
Key string // The key value (e.g., "ArrowUp")
Code string // Physical key code
Shift bool // Modifier states
Control bool
Alt bool
Meta bool
Cmd bool // Meta on Mac, Alt on Windows/Linux
Option bool // Alt on Mac, Meta on Windows/Linux
}
```
When using global keyboard events, remember to:
1. Enable GlobalKeyboardEvents in AppOpts
2. Set up the handler in a place where you have access to necessary state updates
## File Handling
The WaveApp system can serve files to components. Any URL starting with `vdom://` will be handled by the registered handlers: