Menubar Support

README.md

@@ -47,6 +47,7 @@ You can find more examples in `./examples/` folder.
     * Selectbox
     * Table
     * Graphs
+    * Menubar
     * Screen Reader Support (Experimental)
 * Dialogs
     * Messagebox
@@ -61,7 +62,7 @@ You can find more examples in `./examples/` folder.
 ## To-Do List
 
 - [x] Line Graph
-- [ ] Menubar Support
+- [x] Menubar Support
 - [ ] Tabs
 - [ ] Treeview
 - [ ] Textfield

about.v

@@ -0,0 +1,5 @@
+module mui
+
+fn about_dialog(event_details EventDetails, mut app &Window, app_data voidptr){
+	messagebox("MUI","MUI -  1.0.0\n* TinyFileDialogs: 3.8.8","ok","info")
+}

anchor.v

@@ -1,20 +1,18 @@
 module mui
 
-import gg
-
-fn calc_get_percent(window_size &gg.Size, percent string) int {
+fn calc_get_percent(window_size []int, percent string) int {
 	mut x:=0
 	match percent.split("%")[1]{
 		"x"{
-			x=window_size.width
+			x=window_size[0]
 		} "y"{
-			x=window_size.height
+			x=window_size[1]
 		} else {}
 	}
 	return percent.split("%")[0].int()*x/100
 }
 
-fn calc_size(window_size &gg.Size, w int|string, h int|string) (int, int){
+fn calc_size(window_size []int, w int|string, h int|string) (int, int){
 	mut data:=[]int{}
 	for x in [w,h]{
 		match x{
@@ -41,7 +39,7 @@ fn calc_size(window_size &gg.Size, w int|string, h int|string) (int, int){
 	return data[0], data[1]
 }
 
-fn calc_x_y(window_size &gg.Size, x int|string, y int|string, size []int) (int, int){
+fn calc_x_y(window_size []int, x int|string, y int|string, size []int) (int, int){
 	mut data:=[]int{}
 	for w, q in [x,y].clone(){
 		match q{
@@ -50,7 +48,7 @@ fn calc_x_y(window_size &gg.Size, x int|string, y int|string, size []int) (int,
 			} string {
 				if q.starts_with("#"){
 					params:=q.replace("# ","").split(" ")
-					offset:=if w==0{window_size.width} else {window_size.height}-size[w]
+					offset:=if w==0{window_size[0]} else {window_size[1]}-size[w]
 					match params.len{
 						1 {
 							if params[0].split("%").len==1{
@@ -86,7 +84,7 @@ fn calc_x_y(window_size &gg.Size, x int|string, y int|string, size []int) (int,
 	return data[0], data[1]
 }
 
-fn calc_points(window_size &gg.Size, x int|string, y int|string, w int|string, h int|string) []int{
+fn calc_points(window_size []int, x int|string, y int|string, w int|string, h int|string) []int{
 	calc_width,calc_height:=calc_size(window_size, w, h)
 	x_,y_:=calc_x_y(window_size, x, y, [calc_width, calc_height])
 	return [x_,y_,calc_width, calc_height]

examples/demo_with_menubar.v

@@ -0,0 +1,59 @@
+import malisipi.mui as m
+
+const (
+	countries=["United States","Canada","United Kingdom", "Australia"]
+)
+
+[unsafe]
+fn add_user(event_details m.EventDetails, mut app &m.Window, app_data voidptr){
+	unsafe{
+		if app.get_object_by_id("progress")[0]["perc"].num<100{
+			app.get_object_by_id("table")[0]["h_raw"].str=(app.get_object_by_id("table")[0]["h_raw"].str.int()+30).str()
+			app.get_object_by_id("progress")[0]["perc"].num=app.get_object_by_id("progress")[0]["perc"].num+10
+			app.get_object_by_id("table")[0]["table"].tbl << [
+				app.get_object_by_id("name")[0]["text"].str,
+				app.get_object_by_id("last_name")[0]["text"].str,
+				app.get_object_by_id("age")[0]["text"].str,
+				countries[app.get_object_by_id("country")[0]["s"].num],
+			]
+			m.messagebox("MUI Demo","Successfully Completed.","ok","info")
+			app.clear_values(["name","last_name","age","password","online_reg","subscribe","country"])
+		} else {
+			m.messagebox("MUI Demo","Reached Max User Count","ok","warning")
+		}
+	}
+}
+
+fn about_dialog(event_details m.EventDetails, mut app &m.Window, app_data voidptr){
+	m.messagebox("MUI Demo","A User System Created for MUI Examples","ok","info")
+}
+
+mut app:=m.create(m.WindowConfig{ title:"MUI Demo",
+	menubar: [
+		{"text":m.WindowData{str:"Edit"}, "items":m.WindowData{lst:[
+			{"text":m.WindowData{str:"Add User"}, "fn": m.WindowData{fun:add_user}}
+		]}},
+		{"text":m.WindowData{str:"About"}, "items":m.WindowData{lst:[
+			{"text":m.WindowData{str:"About"}, "fn": m.WindowData{fun:about_dialog}},
+			{"text":m.WindowData{str:"About MUI"}, "fn": m.WindowData{fun:m.about_dialog}}
+		]}},
+	] })
+
+app.rect(m.Widget{ id:"back", x:"# 0", y:"# 0", width:"100%x -300", height:"100%y", background:app.color_scheme[1] })
+
+app.textbox(m.Widget{ id:"name", placeholder:"First Name", x:30, y:30, width: 240})
+app.textbox(m.Widget{ id:"last_name", placeholder:"Last Name", x:30, y:60, width: 240})
+app.textbox(m.Widget{ id:"age", placeholder:"Age", x:30, y:90, width: 240})
+app.password(m.Widget{ id:"password", placeholder:"Password", x:30, y:120, width: 240})
+app.checkbox(m.Widget{ id:"online_reg", x:30, y:150, text:"Online registration"})
+app.checkbox(m.Widget{ id:"subscribe", x:30, y:180, text:"Subscribe to the newsletter"})
+app.group(m.Widget{ id:"country_group", x:20, y:210, height:140, width:240, text:"Country" })
+app.radio(m.Widget{ id:"country", x:40, y:235, height:20, list:countries})
+app.button(m.Widget{ id:"button", x: 30, y:"# 60", text:"Add User" onclick:add_user})
+app.progress(m.Widget{ id:"progress", x:30, y:"# 30", width: 240, percent:20 })
+
+app.table(m.Widget{ id:"table", table:[["Sam","Johnson","29","United States"],["Kate","Williams","26","Canada"]] x:"330", y:"30", width:"100%x -360", height:"60" })
+
+app.image(m.Widget{ id:"vlogo", x: "# 0", y:"# 0", path:"v-logo.png", width:128, height:128})
+
+m.run(mut app)

focus.v

@@ -4,8 +4,10 @@ module mui
 fn draw_focus(mut app Window){
     if app.focus!="" {
         unsafe{
-            mut object:=app.get_object_by_id(app.focus)[0]
-            app.gg.draw_rect_empty(object["x"].num, object["y"].num, object["w"].num+1, object["h"].num+1,app.color_scheme[3])
+            if !app.focus.starts_with("@menubar#"){
+                mut object:=app.get_object_by_id(app.focus)[0]
+                app.gg.draw_rect_empty(object["x"].num, object["y"].num, object["w"].num+1, object["h"].num+1,app.color_scheme[3])
+            }
         }
     }
 }

menubar.v

@@ -0,0 +1,49 @@
+module mui
+
+import gg
+import gx
+
+const (
+    menubar_width=80
+    menubar_height=25
+    menubar_sub_width=menubar_width*2
+)
+
+[unsafe]
+fn draw_menubar(mut app &Window, size &gg.Size){
+	unsafe{
+        mut clicked_item:=-1
+        if app.focus.starts_with("@menubar#"){
+            clicked_item=app.focus.replace("@menubar#","").int()
+        }
+
+        app.gg.draw_rect_filled(0,0,size.width,menubar_height,app.color_scheme[1])
+        for which_item,items in app.menubar{
+
+            app.gg.draw_rect_empty(menubar_width*which_item,0,menubar_width,menubar_height,app.color_scheme[0])
+
+            app.gg.draw_text(menubar_width*which_item+menubar_width/2,menubar_height/2,items["text"].str, gx.TextCfg{
+                color: app.color_scheme[3]
+                size: 20
+                align: .center
+                vertical_align: .middle
+            })
+
+            if clicked_item==which_item {
+                for which_sub_item, sub_item in items["items"].lst{
+
+                    app.gg.draw_rect_filled(menubar_width*which_item,menubar_height*(which_sub_item+1),menubar_sub_width,menubar_height,app.color_scheme[1])
+                    app.gg.draw_rect_empty(menubar_width*which_item,menubar_height*(which_sub_item+1),menubar_sub_width,menubar_height,app.color_scheme[0])
+
+                    app.gg.draw_text(menubar_width*which_item+4,menubar_height*(which_sub_item+1)+menubar_height/2, sub_item["text"].str, gx.TextCfg{
+                        color: app.color_scheme[3]
+                        size: 20
+                        align: .left
+                        vertical_align: .middle
+                    })
+                }
+            }
+
+        }
+	}
+}

mui.v

@@ -10,6 +10,9 @@ pub fn create(args &WindowConfig)	 &Window{
         focus: ""
         color_scheme: create_gx_color_from_color_scheme()
         gg: 0
+        menubar: args.menubar
+        x_offset: 0
+        y_offset: if args.menubar!=[]map["string"]WindowData{} { menubar_height } else { 0 }
         app_data: args.app_data
         screen_reader: if args.screen_reader { check_screen_reader() } else { false }
     }
@@ -39,13 +42,15 @@ fn frame_fn(app &Window) {
 		app.gg.begin()
 		mut objects:=app.objects.clone()
 		if app.focus!="" { objects << get_object_by_id(app, app.focus) }
-		window_size:=app.gg.window_size()
+		real_size:=app.gg.window_size()
+		window_size:=[real_size.width,real_size.height-app.y_offset]
 		for object in objects{
 			if !object["hi"].bol && object["type"].str!="hidden"{
 				points:=calc_points(window_size,object["x_raw"].str,object["y_raw"].str,object["w_raw"].str,object["h_raw"].str)
-				for w,attr in ["x","y","w","h"]{
-					object[attr]=WindowData{num:points[w]}
-				}
+				object["x"]=WindowData{num:points[0]}
+				object["y"]=WindowData{num:points[1]+app.y_offset}
+				object["w"]=WindowData{num:points[2]}
+				object["h"]=WindowData{num:points[3]}
 				match object["type"].str{
 					"rect"{
 						draw_rect(app, object)
@@ -82,6 +87,9 @@ fn frame_fn(app &Window) {
 			}
 		}
 		draw_focus(mut app)
+		if app.menubar!=[]map["string"]WindowData{} {
+			draw_menubar(mut app, real_size)
+		}
 		app.gg.end()
 	}
 }
@@ -90,9 +98,9 @@ fn frame_fn(app &Window) {
 fn click_fn(x f32, y f32, mb gg.MouseButton, mut app &Window) {
 	unsafe{
 		if app.focus!="" {
-			mut old_focused_object:=get_object_by_id(app, app.focus)
-			app.focus=""
-			if old_focused_object["type"].str=="selectbox" {
+			if get_object_by_id(app, app.focus)["type"].str=="selectbox" {
+				mut old_focused_object:=get_object_by_id(app, app.focus)
+				app.focus=""
 				total_items:=old_focused_object["list"].str.split("\0").len
 				list_x:=old_focused_object["x"].num
 				list_y:=old_focused_object["y"].num+old_focused_object["h"].num
@@ -106,9 +114,27 @@ fn click_fn(x f32, y f32, mb gg.MouseButton, mut app &Window) {
 						return
 					}
 				}
+			}else if app.focus.starts_with("@menubar#") {
+				selected_item:=app.focus.replace("@menubar#","").int()
+				if x>=menubar_width*selected_item && x<=menubar_width*selected_item+menubar_sub_width {
+					menubar_sub_items_len:=app.menubar[selected_item]["items"].lst.len
+					if y>=menubar_height && y<=menubar_height*(menubar_sub_items_len+1){
+						app.menubar[selected_item]["items"].lst[int(y-menubar_height)/menubar_height]["fn"].fun(EventDetails{event:"click",trigger:"mouse_left",value:"true",target_type:"menubar",target_id:"menubar"},mut app, mut app.app_data)
+					}
+				}
+				app.focus=""
+				return
+			}
+
+		}
+		app.focus=""
+
+		if y<=menubar_height && app.menubar!=[]map["string"]WindowData{}{
+			menu_items:=app.menubar.len
+			if x<menu_items*menubar_width{
+				app.focus="@menubar#"+(x/menubar_width).str()
+				return
 			}
-		} else {
-			app.focus=""
 		}
 
 		if mb==gg.MouseButton.left{

types.v

@@ -23,16 +23,20 @@ pub mut:
 	dat [][]int
 	lcr []gx.Color
 	vmp ValueMap
+	lst []map[string]WindowData
 }
 
 pub struct WindowConfig {
 pub mut:
-	title			string		//= ""
-	width			int			= 800
-	height			int			= 600
-	font			string		= font.default()
+	title			string							//= ""
+	width			int								= 800
+	height			int								= 600
+	font			string							= font.default()
     app_data		voidptr
-    screen_reader	bool		= true
+    screen_reader	bool							= true
+    menubar			[]map[string]WindowData			= []map[string]WindowData{}
+    x_offset		int								// 0
+	y_offset		int								//=0
 }
 
 pub struct EventDetails{
@@ -52,6 +56,9 @@ pub mut:
     app_data		voidptr
     gg          	&gg.Context
     screen_reader	bool
+    menubar			[]map[string]WindowData
+    x_offset		int
+	y_offset		int
 }
 
 pub struct Widget {