gio-compose

Gio Compose

Gio UI Component solution inspired by Jetpack Compose and React Hooks

Why?

Gio UI is cool cross-platform GUI in Golang. However, with some Component solution, as ui developer used to be with, we could do more things.

Workflow

sequenceDiagram
    participant user as User

    box GUI
        participant vnode as VNode
        participant widget_node as Widget Node
        participant renderer as GPU
    end

    activate vnode
    vnode ->> vnode: Diff & Patch
    vnode ->> widget_node: Commit Changes
    deactivate vnode
    activate widget_node
    widget_node ->> renderer: Layout & Paint
    deactivate widget_node
    user -->> widget_node: Pointer & Input
    widget_node -->> vnode: notify to handler
    activate vnode
    vnode ->> vnode: Update if some stage chanaged
    vnode ->> vnode: Diff & Patch
    vnode ->> widget_node: Commit Changes
    deactivate vnode
    activate widget_node
    widget_node ->> renderer: Layout & Paint
    deactivate widget_node

Example

Components

package main

import (
	"fmt"

	"github.com/octohelm/gio-compose/pkg/compose/gesture"
	"github.com/octohelm/gio-compose/pkg/compose/modifier"
	"golang.org/x/image/colornames"

	. "github.com/octohelm/gio-compose/pkg/compose"
)


type Counter struct {
}

func (Counter) Build(b BuildContext) VNode {
	state := UseState(b, 0)

	//showTooltip := UseState(b, false)

	v :=
		Row(
			modifier.FillMaxHeight(),
			modifier.FillMaxSize(),
			modifier.PaddingAll(20),
			modifier.Align(alignment.Center),
		).Children(
			H(CounterButton{
				OnTap: func() {
					state.UpdateFunc(func(prev int) int {
						return prev + 1
					})
				},
			}).Children(
				Text(fmt.Sprint(state.Value()), modifier.TextAlign(text.Middle)),
			),
		)
	return v
}

type CounterButton struct {
	OnTap func()
}

func (b CounterButton) Build(c BuildContext) VNode {
	return Row(
		modifier.DetectGesture(
			gesture.OnTap(b.OnTap),
		),
		modifier.Height(80),
		modifier.FillMaxWidth(),
		modifier.RoundedAll(10),
		modifier.BackgroundColor(color.White),
		modifier.Shadow(2),
		modifier.Align(alignment.Center),
	).Children(
		c.ChildVNodes()...,
	)
}

App Main

package main

import (
	"context"
	"os"
	"log"

	"gioui.org/unit"
	"gioui.org/app"

	. "github.com/octohelm/gio-compose/pkg/compose"
	"github.com/octohelm/gio-compose/pkg/compose/renderer"
)

func main() {
	w := app.NewWindow(
		app.MinSize(unit.Dp(1280), unit.Dp(768)),
	)

	r := renderer.CreateRoot(w)

	// could inject singletons in to context
	ctx := context.Background()

	r.Render(ctx, H(Counter{}))

	go func() {
		if err := r.Loop(); err != nil {
			log.Fatal(err)
		}
		os.Exit(0)
	}()

	app.Main()
}

See more https://github.com/octohelm/gio-compose/tree/main/cmd/example