Menus and Menu Bars

* New and completed widgets: Menu, MenuButton and MenuBar.
* MenuButton is a kind of Button that opens a popup Menu when clicked.
* MenuBar is a container of buttons designed to be attached to the top
  of an application window ("File, Edit, View, Help")
* Supervisor manages the popup menus with its new concept of a Modal
  Widget. Modal widgets take exclusive event priority for all mouse and
  key events. The pop-up menu is a modal window, which means you must
  click an option inside the menu OR clicking outside the menu will
  close it and eat your click event (widgets outside the modal don't
  receive events, but the modal itself gets an event that you've done
  this).

Author: kirsle

README.md

@@ -138,25 +138,21 @@ most complex.
     (drag it by its title bar, Close button, window focus, multiple overlapping
     windows, and so on).
 * [x] **Tooltip**: a mouse hover label attached to a widget.
+* [x] **MenuButton**: a button that opens a modal pop-up menu on click.
+* [x] **MenuBar**: a specialized Frame that groups a bunch of MenuButtons and
+  provides a simple API to add menus and items to it.
+* [x] **Menu**: a frame full of clickable links and separators. Usually used as
+  a modal pop-up by the MenuButton and MenuBar.
 
 **Work in progress widgets:**
 
-* [x] **Menu**: a frame with clickable menu items.
-  * To be a base widget behind right-click context menus, pull-down menus
-    from a MenuBar, options from a SelectBox and so on.
-  * Powered by Frame and Button but with a nice API for composing menu
-    actions.
-  * Partially implemented so far.
-* [ ] **MenuButton**: a Button that opens a Menu when clicked.
-* [ ] **MenuBar**: a Frame that houses many MenuButtons, intended for the
-  main menu at the top of a UI window (File, Edit, Help, etc.).
 * [ ] **Scrollbar**: a Frame including a trough, scroll buttons and a
   draggable slider.
+* [ ] **SelectBox:** a kind of MenuButton that lets the user choose a value
+  from a list of possible values, bound to a string variable.
 
 **Wish list for the longer-term future:**
 
-* [ ] **SelectBox:** a kind of MenuButton that lets the user choose a value
-  from a list of possible values, bound to a string variable.
 * [ ] **TextBox:** an editable text field that the user can focus and type
   a value into.
   * Would depend on the WindowManager to manage focus for the widgets.

debug.go

@@ -5,6 +5,14 @@ import (
 	"strings"
 )
 
+// PrintWidgetTree prints a widget tree to console.
+func PrintWidgetTree(root Widget) {
+	fmt.Printf("--- Widget Tree of %s ---\n", root)
+	for _, row := range WidgetTree(root) {
+		fmt.Println(row)
+	}
+}
+
 // WidgetTree returns a string representing the tree of widgets starting
 // at a given widget.
 func WidgetTree(root Widget) []string {

docs/menus-1.png

@@ -0,0 +1,10 @@
+# Examples for go/ui
+
+* [Hello, World!](hello-world/): a basic UI demo.
+* [Frame Place()](frame-place/): demonstrates using the Place() layout management
+  option for Frame widgets.]
+* [Window Manager](windows/): demonstrates the Window widget and window
+  management features of the Supervisor.
+* [Tooltip](tooltip/): demonstrates the Tooltip widget on a variety of buttons
+  scattered around the window.
+* [Menus](menus/): demonstrates various Menu Buttons and a Menu Bar.

docs/menus-2.png

@@ -0,0 +1,11 @@
+.PHONY: run
+run:
+	go run main.go
+
+.PHONY: wasm
+wasm:
+	GOOS=js GOARCH=wasm go build -v -o windows.wasm main_wasm.go
+
+.PHONY: wasm-serve
+wasm-serve: wasm
+	../wasm-common/serve.sh

eg/README.md

@@ -0,0 +1,19 @@
+# Menu Example
+
+This example shows off the Menu, MenuButton, and MenuBar widgets.
+
+* MenuButton is your basic button that pops up a Menu when clicked.
+* MenuBar is a specialized Frame that attaches to the top of the parent
+  (usually the window) and provides a simple API to add menus and items.
+* Menu is the underlying "pop-up and select an item" widget.
+
+## Running It
+
+From your terminal, just type `go run main.go` or `make run` from this
+example's directory.
+
+## Screenshots
+
+![Screenshot 1](../../docs/menus-1.png)
+
+![Screenshot 2](../../docs/menus-2.png)

eg/menus/Makefile

@@ -0,0 +1,208 @@
+package main
+
+import (
+	"fmt"
+	"os"
+
+	"git.kirsle.net/go/render"
+	"git.kirsle.net/go/render/event"
+	"git.kirsle.net/go/render/sdl"
+	"git.kirsle.net/go/ui"
+)
+
+// Program globals.
+var (
+	// Size of the MainWindow.
+	Width  = 640
+	Height = 480
+
+	BGColor = render.White
+)
+
+func init() {
+	sdl.DefaultFontFilename = "../DejaVuSans.ttf"
+}
+
+func main() {
+	mw, err := ui.NewMainWindow("Menu Demo", Width, Height)
+	if err != nil {
+		panic(err)
+	}
+
+	setupMainMenu(mw)
+
+	// Menu button in middle of window.
+	{
+		btn := ui.NewMenuButton("MenuBtn", ui.NewLabel(ui.Label{
+			Text: "Click me!",
+		}))
+		btn.Supervise(mw.Supervisor())
+		mw.Place(btn, ui.Place{
+			Center: true,
+			Middle: true,
+		})
+
+		for _, label := range []string{
+			"MenuButtons open menus",
+			"when clicked. MenuBar is ",
+			"a Frame of MenuButtons",
+			"attached to the top of the",
+			"window.",
+			"",
+			"They all provide a nice API",
+			"to insert menus and items.",
+		} {
+			label := label
+			if label == "" {
+				btn.AddSeparator()
+				continue
+			}
+			btn.AddItem(label, func() {
+				fmt.Printf("Button '%s' clicked!\n", label)
+			})
+		}
+
+	}
+
+	// Menu button on the bottom right of screen.
+	{
+		btn := ui.NewMenuButton("BrBtn", ui.NewLabel(ui.Label{
+			Text: "Fruits",
+		}))
+		btn.Supervise(mw.Supervisor())
+		mw.Place(btn, ui.Place{
+			Right:  20,
+			Bottom: 20,
+		})
+
+		btn.AddItem("Apples", func() {})
+		btn.AddItem("Oranges", func() {})
+		btn.AddItem("Bananas", func() {})
+		btn.AddItem("Pears", func() {})
+	}
+
+	// Menu button on the bottom left of screen.
+	{
+		btn := ui.NewMenuButton("BlBtn", ui.NewLabel(ui.Label{
+			Text: "Set Window Color",
+		}))
+		btn.Supervise(mw.Supervisor())
+		mw.Place(btn, ui.Place{
+			Left:   20,
+			Bottom: 20,
+		})
+
+		setBg := func(color render.Color) func() {
+			return func() {
+				BGColor = color
+			}
+		}
+
+		// Really fancy buttons.
+		var colors = []struct {
+			label string
+			hex   string
+			color render.Color
+		}{
+			{"Black", "#000", render.Black},
+			{"Red", "#F00", render.Red},
+			{"Yellow", "#FF0", render.Yellow},
+			{"Green", "#0F0", render.Green},
+			{"Cyan", "#0FF", render.Cyan},
+			{"Blue", "#00F", render.Blue},
+			{"Magenta", "#F0F", render.Magenta},
+			{"White", "#FFF", render.White},
+		}
+		for _, opt := range colors {
+			item := btn.AddItemAccel(opt.label, opt.hex, setBg(opt.color))
+			item.SetBackground(opt.color.Lighten(128))
+		}
+
+		// btn.AddItemAccel("Black", "#000", setBg(render.White))
+		// btn.AddItemAccel("Red", "#F00", setBg(render.Red))
+		// btn.AddItemAccel("Yellow", "#FF0", setBg(render.Yellow))
+		// btn.AddItemAccel("Green", "#0F0", setBg(render.Green))
+		// btn.AddItemAccel("Cyan", "#0FF", setBg(render.Cyan))
+		// btn.AddItemAccel("Blue", "#00F", setBg(render.Blue))
+		// btn.AddItemAccel("Magenta", "#F0F", setBg(render.Magenta))
+		// btn.AddItemAccel("White", "#FFF", setBg(render.White))
+	}
+
+	// The "Long Menu" on the middle left side
+	{
+		btn := ui.NewMenuButton("BlBtn", ui.NewLabel(ui.Label{
+			Text: "Tall Growing Menu",
+		}))
+		btn.Supervise(mw.Supervisor())
+		mw.Place(btn, ui.Place{
+			Left:   20,
+			Middle: true,
+		})
+
+		var id int
+		btn.AddItem("Add New Option", func() {
+			id++
+			id := id
+			btn.AddItem(fmt.Sprintf("Menu Item #%d", id), func() {
+				fmt.Printf("Chosen menu item %d\n", id)
+			})
+		})
+
+		btn.AddSeparator()
+	}
+
+	mw.OnLoop(func(e *event.State) {
+		mw.SetBackground(BGColor)
+		if e.Up {
+			fmt.Println("Supervised widgets:")
+			for widg := range mw.Supervisor().Widgets() {
+				fmt.Printf("%+v\n", widg)
+			}
+		}
+		if e.Escape {
+			os.Exit(0)
+		}
+	})
+
+	mw.MainLoop()
+}
+
+func setupMainMenu(mw *ui.MainWindow) {
+	bar := ui.NewMenuBar("Main Menu")
+
+	fileMenu := bar.AddMenu("File")
+	fileMenu.AddItemAccel("New", "Ctrl-N", func() {
+		fmt.Println("Chose File->New")
+	})
+	fileMenu.AddItemAccel("Open", "Ctrl-O", func() {
+		fmt.Println("Chose File->Open")
+	})
+	fileMenu.AddSeparator()
+	fileMenu.AddItemAccel("Exit", "Alt-F4", func() {
+		fmt.Println("Chose File->Exit")
+		os.Exit(0)
+	})
+
+	editMenu := bar.AddMenu("Edit")
+	editMenu.AddItemAccel("Undo", "Ctrl-Z", func() {})
+	editMenu.AddItemAccel("Redo", "Shift-Ctrl-Z", func() {})
+	editMenu.AddSeparator()
+	editMenu.AddItemAccel("Cut", "Ctrl-X", func() {})
+	editMenu.AddItemAccel("Copy", "Ctrl-C", func() {})
+	editMenu.AddItemAccel("Paste", "Ctrl-V", func() {})
+	editMenu.AddSeparator()
+	editMenu.AddItem("Settings...", func() {})
+
+	viewMenu := bar.AddMenu("View")
+	viewMenu.AddItemAccel("Toggle Full Screen", "F11", func() {})
+
+	helpMenu := bar.AddMenu("Help")
+	helpMenu.AddItemAccel("Contents", "F1", func() {})
+	helpMenu.AddItem("About", func() {})
+
+	bar.Supervise(mw.Supervisor())
+	bar.Compute(mw.Engine)
+	mw.Pack(bar, bar.PackTop())
+
+	fmt.Printf("Setup MenuBar: %s\n", bar.Size())
+}