screen update

README.md

@@ -1,6 +1,11 @@
-<h1 style="text-align:center;"><img src="assets/osui.png" width="170px"></img></h1>
+<div style="text-align: center;">
-<h1 style="text-align:center;"></img>A Component-based TUI library written in go</h1>
+    <img src="assets/osui.png" width="170px" />
-<p style="text-align:center;"><img src="assets/osui.gif"></img></p>
+    <h1>A Component-based TUI library written in Go</h1>
+    <img src="assets/osui.gif" />
+</div>
+
+
+
 
 
 # Hello World

example/main.go

@@ -3,7 +3,7 @@ package main
 import (
 	"github.com/orus-dev/osui"
 	"github.com/orus-dev/osui/colors"
-	. "github.com/orus-dev/osui/ui"
+	"github.com/orus-dev/osui/ui"
 )
 
 func main() {
@@ -11,44 +11,52 @@ func main() {
 	screen.Run()
 }
 
-func App() *PaginatorComponent {
+func App() *ui.PaginatorComponent {
 	w, h := osui.GetTerminalSize()
-	return Paginator(
+
+	var keybindings ui.Class[*ui.TextComponent]
+	keybindings.SetProperties(func(tc *ui.TextComponent) *ui.TextComponent {
+		tc.Text = colors.Blue + tc.Text
+		tc.Data.Y = h - 3
+		return tc
+	})
+
+	return ui.Paginator(
 		// Page 1
-		Div(
+		ui.Div(
-			Text("Welcome to the example! The blue text on the bottom show the keybindings"),
+			ui.Text("Welcome to the example! The blue text on the bottom show the keybindings"),
-			WithPosition(0, h-2, Text(colors.Blue+"Next Page: Tab. Previous Page: shift + tab")),
+			keybindings.Class(ui.Text("Next Page: Tab. Previous Page: shift + tab")),
 		),
 
 		// Page 2
-		Div(
+		ui.Div(
-			WithPosition(0, 0, Text("This blue square is a div. A div stores multiple components into one")),
+			ui.WithPosition(0, 0, ui.Text("This blue square is a div. A div stores multiple components into one")),
-			WithPosition((w-30)/2, (h-4)/2,
+			ui.WithPosition((w-30)/2, (h-4)/2,
-				WithSize(30, 5,
+				ui.WithSize(32, 7,
-					Div(WithPosition(4, 1, Button("Hello, World!").Params(BtnParams{Width: 19}))).Params(DivParams{Style: DivStyle{Outline: colors.Blue}}),
+					ui.Div(ui.WithPosition(2, 2, ui.Text("This text is inside a div!"))).Params(ui.DivParams{Style: ui.DivStyle{Outline: colors.Blue, Foreground: colors.Red}}),
 				)),
-			WithPosition(0, h-2, Text(colors.Blue+"Navigate: Ctrl+(W/A/S/D)")),
+			keybindings.Class(ui.Text("Navigate: Ctrl+(W/A/S/D)")),
 		),
 
 		// Page 3
-		Div(
+		ui.Div(
-			WithPosition(0, 0, Text("This is a InputBox. It takes user input just like a GUI. "+colors.Red+colors.Bold+"NOTE: This InputBox is inside a div")),
+			ui.WithPosition(0, 0, ui.Text("This is a InputBox. It takes user input just like a GUI. "+colors.Red+colors.Bold+"NOTE: This InputBox is inside a div")),
-			WithPosition((w-32)/2, (h-3)/2, InputBox(30)),
+			ui.WithPosition((w-32)/2, (h-3)/2, ui.InputBox(30)),
-			WithPosition(0, h-2, Text(colors.Blue+"Navigate: W/S. Select: Enter. Exit Menu: Q. ")),
+			keybindings.Class(ui.Text("Navigate: Ctrl+(W/A/S/D). Finish: Enter.")),
 		),
 
 		// Page 4
-		Div(
+		ui.Div(
-			WithPosition(0, 0, Text("This is a Button. To click it press Enter. "+colors.Red+colors.Bold+"NOTE: This Button is inside a div")),
+			ui.WithPosition(0, 0, ui.Text("This is a Button. To click it press Enter. "+colors.Red+colors.Bold+"NOTE: This Button is inside a div")),
-			WithPosition((w-20)/2, (h-3)/2, Button("This is a button")),
+			ui.WithPosition((w-20)/2, (h-3)/2, ui.Button("This is a button")),
-			WithPosition(0, h-2, Text(colors.Blue+"Navigate: Ctrl+(W/A/S/D). Click Button: Enter")),
+			keybindings.Class(ui.Text("Navigate: Ctrl+(W/A/S/D). Click Button: Enter")),
 		),
 
 		// Page 5
-		Div(
+		ui.Div(
-			WithPosition(0, 0, Text("This is a Menu. It prompts you to select a item. "+colors.Red+colors.Bold+"NOTE: This Menu is inside a div")),
+			ui.WithPosition(0, 0, ui.Text("This is a Menu. It prompts you to select an item. "+colors.Red+colors.Bold+"NOTE: This Menu is inside a div")),
-			WithPosition(0, 2, Menu("Item 1", "Item 2", "Item 3", "Item 4", "Item 5").Params(MenuParams{})),
+			ui.WithPosition(0, 2, ui.Menu("Item 1", "Item 2", "Item 3", "Item 4", "Item 5").Params(ui.MenuParams{OnSelected: func(mc *ui.MenuComponent, b bool) {}})),
-			WithPosition(0, h-2, Text(colors.Blue+"Navigate: Ctrl+(W/A/S/D). Navigate Menu: W/S. Select: Enter. Exit Menu: Q. ")),
+			keybindings.Class(ui.Text("Navigate: Ctrl+(W/A/S/D). Navigate Menu: W/S. Select: Enter. Exit Menu: Q. ")),
 		),
 	)
 }

go.mod

@@ -5,6 +5,6 @@ go 1.23.1
 require golang.org/x/term v0.24.0 // direct
 
 require (
-	github.com/nathan-fiscaletti/consolesize-go v0.0.0-20220204101620-317176b6684d // indirect
+	github.com/nathan-fiscaletti/consolesize-go v0.0.0-20220204101620-317176b6684d
 	golang.org/x/sys v0.25.0 // indirect
 )

osui.go

@@ -2,9 +2,11 @@ package osui
 
 import (
 	"fmt"
+	"os"
 	"strings"
 
 	"github.com/orus-dev/osui/colors"
+	"golang.org/x/term"
 )
 
 type ComponentData struct {
@@ -24,20 +26,19 @@ type Component interface {
 }
 
 type Screen struct {
-	component Component
+	Component Component
 }
 
 func NewScreen(c Component) *Screen {
 	HideCursor()
-	s := &Screen{component: c}
+	s := &Screen{Component: c}
 	return s
 }
 
 func (s *Screen) Render() {
-	Clear()
 	width, height := GetTerminalSize()
 	frame := NewFrame(width, height)
-	data := s.component.GetComponentData()
+	data := s.Component.GetComponentData()
 	if data.Height == 0 {
 		data.Height = height
 	}
@@ -47,17 +48,23 @@ func (s *Screen) Render() {
 	data.Screen = s
 	data.IsActive = true
 	data.DefaultColor = colors.Reset
-	RenderOnFrame(s.component, &frame)
+	RenderOnFrame(s.Component, &frame)
-	fmt.Print(strings.Join(frame, "\n"))
+	Clear()
+	fmt.Print(strings.Join(frame, ""))
 }
 
 func (s *Screen) Run() {
-	data := s.component.GetComponentData()
+	oldState, err := term.MakeRaw(int(os.Stdin.Fd()))
+	if err != nil {
+		panic(err)
+	}
+	defer term.Restore(int(os.Stdin.Fd()), oldState)
+	data := s.Component.GetComponentData()
 	data.Screen = s
 	for {
 		s.Render()
 		k, _ := ReadKey()
-		if s.component.Update(k) {
+		if s.Component.Update(k) {
 			ShowCursor()
 			return
 		}

ui/button.go

@@ -10,7 +10,7 @@ import (
 	"github.com/orus-dev/osui/isKey"
 )
 
-type BtnParams struct {
+type ButtonParams struct {
 	Style   ButtonStyle
 	Toggle  bool
 	OnClick func(*ButtonComponent) bool
@@ -45,30 +45,30 @@ func (b *ButtonComponent) Render() string {
 
 	if b.Clicked {
 		return fmt.Sprintf(" %s\n%s│%s│%s\n %s",
-			colors.Reset+b.Style.ClickedOutline+strings.Repeat("_", b.Data.Width)+colors.Reset+b.Data.DefaultColor,
+			colors.Reset+b.Style.ClickedOutline+strings.Repeat("_", b.Data.Width-2)+colors.Reset+b.Data.DefaultColor,
 			colors.Reset+b.Style.ClickedOutline,
-			colors.Reset+colors.Combine(b.Style.ClickedBackground, b.Style.ClickedForeground)+centerText(b.Text, b.Data.Width)+colors.Reset+b.Style.ClickedOutline,
+			colors.Reset+colors.Combine(b.Style.ClickedBackground, b.Style.ClickedForeground)+centerText(b.Text, b.Data.Width-2)+colors.Reset+b.Style.ClickedOutline,
 			colors.Reset+b.Data.DefaultColor,
-			colors.Reset+b.Style.ClickedOutline+strings.Repeat("‾", b.Data.Width)+colors.Reset+b.Data.DefaultColor,
+			colors.Reset+b.Style.ClickedOutline+strings.Repeat("‾", b.Data.Width-2)+colors.Reset+b.Data.DefaultColor,
 		)
 	}
 
 	if b.Data.IsActive {
 		return fmt.Sprintf(" %s\n%s│%s│%s\n %s",
-			colors.Reset+b.Style.ActiveOutline+strings.Repeat("_", b.Data.Width)+colors.Reset+b.Data.DefaultColor,
+			colors.Reset+b.Style.ActiveOutline+strings.Repeat("_", b.Data.Width-2)+colors.Reset+b.Data.DefaultColor,
 			colors.Reset+b.Style.ActiveOutline,
-			colors.Reset+colors.Combine(b.Style.ActiveBackground, b.Style.ActiveForeground)+centerText(b.Text, b.Data.Width)+colors.Reset+b.Style.ActiveOutline,
+			colors.Reset+colors.Combine(b.Style.ActiveBackground, b.Style.ActiveForeground)+centerText(b.Text, b.Data.Width-2)+colors.Reset+b.Style.ActiveOutline,
 			colors.Reset+b.Data.DefaultColor,
-			colors.Reset+b.Style.ActiveOutline+strings.Repeat("‾", b.Data.Width)+colors.Reset+b.Data.DefaultColor,
+			colors.Reset+b.Style.ActiveOutline+strings.Repeat("‾", b.Data.Width-2)+colors.Reset+b.Data.DefaultColor,
 		)
 	}
 
 	return fmt.Sprintf(" %s\n%s│%s│%s\n %s",
-		colors.Reset+b.Style.Outline+strings.Repeat("_", b.Data.Width)+colors.Reset+b.Data.DefaultColor,
+		colors.Reset+b.Style.Outline+strings.Repeat("_", b.Data.Width-2)+colors.Reset+b.Data.DefaultColor,
 		colors.Reset+b.Style.Outline,
-		colors.Reset+colors.Combine(b.Style.Background, b.Style.Foreground)+centerText(b.Text, b.Data.Width)+colors.Reset+b.Style.Outline,
+		colors.Reset+colors.Combine(b.Style.Background, b.Style.Foreground)+centerText(b.Text, b.Data.Width-2)+colors.Reset+b.Style.Outline,
 		colors.Reset+b.Data.DefaultColor,
-		colors.Reset+b.Style.Outline+strings.Repeat("‾", b.Data.Width)+colors.Reset+b.Data.DefaultColor,
+		colors.Reset+b.Style.Outline+strings.Repeat("‾", b.Data.Width-2)+colors.Reset+b.Data.DefaultColor,
 	)
 }
 
@@ -92,7 +92,7 @@ func (b *ButtonComponent) GetComponentData() *osui.ComponentData {
 	return &b.Data
 }
 
-func (b *ButtonComponent) Params(param BtnParams) *ButtonComponent {
+func (b *ButtonComponent) Params(param ButtonParams) *ButtonComponent {
 	b.Style = osui.SetDefaults(&param.Style).(*ButtonStyle)
 	if param.OnClick != nil {
 		b.on_click = param.OnClick

ui/div.go

@@ -33,7 +33,7 @@ func (d *DivComponent) GetComponentData() *osui.ComponentData {
 
 func (d *DivComponent) Render() string {
 	osui.UseStyle(d.Style)
-	frame := osui.NewFrame(d.Data.Width, d.Data.Height)
+	frame := osui.NewFrame(d.Data.Width-2, d.Data.Height-2)
 	for i, c := range d.Components {
 		data := c.GetComponentData()
 		if i == d.ActiveComponent {
@@ -42,10 +42,10 @@ func (d *DivComponent) Render() string {
 			data.IsActive = false
 		}
 		if data.Width == 0 {
-			data.Width = d.Data.Width
+			data.Width = d.Data.Width - 2
 		}
 		if data.Height == 0 {
-			data.Height = d.Data.Height
+			data.Height = d.Data.Height - 2
 		}
 		data.DefaultColor = colors.Combine(d.Style.Background, d.Style.Foreground)
 		data.Screen = d.Data.Screen
@@ -58,10 +58,10 @@ func (d *DivComponent) Render() string {
 		return strings.Join(frame, "\n")
 	} else {
 		for i, f := range frame {
-			frame[i] = d.Style.Outline + "│" + colors.Combine(d.Style.Foreground, d.Style.Background) + f + colors.Reset + d.Style.Outline + "│" + colors.Reset
+			frame[i] = d.Style.Outline + "│" + colors.Reset + colors.Combine(d.Style.Foreground, d.Style.Background) + f + colors.Reset + d.Style.Outline + "│" + colors.Reset
 		}
 	}
-	return " " + d.Style.Outline + strings.Repeat("_", d.Data.Width) + colors.Reset + "\n" + strings.Join(frame, "\n") + "\n " + d.Style.Outline + strings.Repeat("‾", d.Data.Width) + colors.Reset
+	return " " + d.Style.Outline + strings.Repeat("_", d.Data.Width-2) + colors.Reset + "\n" + strings.Join(frame, "\n") + "\n " + d.Style.Outline + strings.Repeat("‾", d.Data.Width-2) + colors.Reset
 }
 
 func (d *DivComponent) Update(key string) bool {

ui/menu.go

@@ -27,7 +27,7 @@ type MenuComponent struct {
 	Style        *MenuStyle
 	Items        []string
 	SelectedItem int
-	onSelected   func(*MenuComponent, bool)
+	OnSelected   func(*MenuComponent, bool)
 }
 
 func (m *MenuComponent) GetComponentData() *osui.ComponentData {
@@ -42,7 +42,7 @@ func (m *MenuComponent) Render() string {
 	if !m.Data.IsActive {
 		cursor = m.Style.CursorInactive
 	}
-	d, _ := osui.CompressString(m.Style.Cursor, "")
+	d, _ := osui.CompressString(m.Style.Cursor)
 	empty := strings.Repeat(" ", len(d))
 
 	for i, item := range m.Items {
@@ -70,10 +70,10 @@ func (m *MenuComponent) Update(key string) bool {
 			m.SelectedItem = len(m.Items) - 1
 		}
 	} else if isKey.Enter(key) {
-		m.onSelected(m, true)
+		m.OnSelected(m, true)
 		return true
 	} else if isKey.Char(key, "q") {
-		m.onSelected(m, false)
+		m.OnSelected(m, false)
 		return true
 	}
 	return false
@@ -81,6 +81,7 @@ func (m *MenuComponent) Update(key string) bool {
 
 func (b *MenuComponent) Params(param MenuParams) *MenuComponent {
 	b.Style = osui.SetDefaults(&param.Style).(*MenuStyle)
+	b.OnSelected = param.OnSelected
 	return b
 }
 

ui/utils.go

@@ -81,3 +81,35 @@ func findClosestComponent(a []osui.Component, i int, d string) int {
 
 	return closestIndex
 }
+
+type Id[T osui.Component] struct {
+	changer   func(T) T
+	Component T
+}
+
+func (i *Id[T]) Id(c T) T {
+	i.Component = c
+	if i.changer != nil {
+		return i.changer(i.Component)
+	}
+	return i.Component
+}
+
+func (i *Id[T]) SetProperties(c func(T) T) {
+	i.changer = c
+}
+
+type Class[T osui.Component] struct {
+	changer func(T) T
+}
+
+func (c *Class[T]) Class(co T) T {
+	if c.changer != nil {
+		return c.changer(co)
+	}
+	return co
+}
+
+func (c *Class[T]) SetProperties(ch func(T) T) {
+	c.changer = ch
+}

utils.go

@@ -11,69 +11,65 @@ import (
 
 	"github.com/nathan-fiscaletti/consolesize-go"
 	"github.com/orus-dev/osui/colors"
-	"golang.org/x/term"
 )
 
-func renderLine(frameLine, line_ string, x int) string {
+var re = regexp.MustCompile(`(\x1b\[([0-9;]*)[a-zA-Z])+`)
-	frame := []rune(frameLine)
+
+func RenderLine(frame_, line_ string, x int, fm, lm map[int]string) string {
+	var res strings.Builder
+	frame := []rune(frame_)
 	line := []rune(line_)
 
+	flen, llen := len(frame), len(line)
+	for i := 0; i < flen; i++ {
+		if i >= x && i-x < llen {
+			if v, ok := lm[i-x]; ok {
+				res.WriteString(v)
+			}
+			res.WriteRune(line[i-x])
+		} else {
+			if v, ok := fm[i]; ok {
+				res.WriteString(v)
+			}
+			res.WriteRune(frame[i])
+		}
+	}
+	return res.String()
+}
+
+func CompressString(input string) (string, map[int]string) {
+	matchesMap := make(map[int]string)
+	res := []rune{}
+
 	i := 0
-	v := 0
+	for i < len([]rune(input)) {
-	for j, c := range frame {
+		loc := re.FindStringIndex(string([]rune(input)[i:]))
-		if i+j >= x && v < len(line) {
+
-			if c != '\b' && line[v] == '\t' {
+		if loc != nil && loc[0] == 0 {
-				frame = append(frame[:i+j], append([]rune{' '}, frame[i+j:]...)...)
+			ansiSeq := re.FindString(string([]rune(input)[i:]))
-			}
+			matchesMap[len(res)] = ansiSeq
-			frame[i+j] = line[v]
+			i += len([]rune(ansiSeq))
-			v++
+		} else {
-		}
+			res = append(res, []rune(input)[i])
-		if c == '\b' {
 			i++
 		}
 	}
 
-	return string(frame)
+	return string(res), matchesMap
 }
 
 func RenderOnFrame(c Component, frame *[]string) {
 	componentData := c.GetComponentData()
-	for i, lo := range strings.Split(c.Render(), "\n") {
+	for i, line := range strings.Split(c.Render(), "\n") {
 		if int(componentData.Y)+i < len(*frame) {
-			fo := (*frame)[int(componentData.Y)+i]
+			fo, fm := CompressString((*frame)[int(componentData.Y)+i])
-			f, fa := CompressString(fo, "\b")
+			lo, lm := CompressString(line)
-			line, la := CompressString(lo, "\t")
+			(*frame)[int(componentData.Y)+i] = RenderLine(fo, lo, componentData.X, fm, lm)
-			r := renderLine(f, line, int(componentData.X))
-			(*frame)[int(componentData.Y)+i] = DecompressString(DecompressString(r, la, "\t"), fa, "\b")
 		}
 	}
 }
 
-func CompressString(input, repl string) (string, []string) {
-	pattern := `\x1b\[([0-9;]*)[a-zA-Z]`
-	re := regexp.MustCompile(pattern)
-	matches := re.FindAllString(input, -1)
-	return re.ReplaceAllString(input, repl), matches
-}
-
-func DecompressString(modified string, outputArray []string, c string) string {
-	parts := strings.Split(modified, c)
-	reconstructed := ""
-	for i, part := range parts {
-		reconstructed += part
-		if i < len(outputArray) {
-			reconstructed += outputArray[i]
-		}
-	}
-	return reconstructed
-}
-
 func ReadKey() (string, error) {
-	oldState, err := term.MakeRaw(int(os.Stdin.Fd()))
-	if err != nil {
-		return "", err
-	}
-	defer term.Restore(int(os.Stdin.Fd()), oldState)
 	var b [3]byte
 	n, err := os.Stdin.Read(b[:])
 	if err != nil {
@@ -174,6 +170,7 @@ func LogicValueInt(b bool, _if, _else int) int {
 	return _else
 }
 
+// Get the terminal size
 func GetTerminalSize() (int, int) {
 	return consolesize.GetConsoleSize()
 }