Textarea scroll support (only vertical)

events.v

@@ -125,7 +125,7 @@ fn click_fn(x f32, y f32, mb gg.MouseButton, mut app &Window) {
 									the_text:=object["text"].str.replace("\0","")
 									if the_text.len>0{
 										rows:=the_text.split("\n")
-										which_row:=int(math.min(math.max(y-object["y"].num-4,0)/20,rows.len-1))
+										which_row:=int(math.min(math.max(y+object["schsl"].num-object["y"].num-4,0)/20,rows.len-1))
 										row_text:=the_text.split("\n")[which_row]
 										mut edited_row:="\0"
 										if row_text.len>0{

examples/notepad.v

@@ -71,6 +71,7 @@ app.button(m.Widget{ id:"save", x:"!& 30", y:"!& 25" width:25, height:25, text:s
 app.switch(m.Widget{ id:"codefield", x:"!& 60", y:"!& 30" width:30, height:15, text:"Codefield", onchange:change_codefield})
 app.slider(m.Widget{ id:"text_size", x:"!& 180", y:"!& 30" width:80, height:15, value_min:8, value_max:40, value:20, onclick:change_text_size, onchange:change_text_size, onunclick:change_text_size})
 
-app.textarea(m.Widget{ id:"textarea", x:0, y:0, width:"100%x", height:"100%y", placeholder:"Open/Drop a file to edit\nOr create a new file"})
+app.textarea(m.Widget{ id:"textarea", x:0, y:0, width:"100%x -20", height:"100%y", placeholder:"Open/Drop a file to edit\nOr create a new file"})
+app.scrollbar(id:"textarea_scrollbar", x:"# 0", y:"# 0", width: 20, height:"100%y", vertical:true, connected_widget:app.get_object_by_id("textarea")[0], value_min:0, value_max:250, value:0)
 
 app.run()

examples/scrollable_widgets.v

@@ -0,0 +1,8 @@
+import malisipi.mui as m
+
+mut app:=m.create(title:"MUI", scrollbar:true, width:800, height: 600 view_area:[1000,1000])
+
+app.textarea(id:"textarea", x:20, y:20, width:160, height:200, text:"1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20")
+app.scrollbar(id:"textarea_scrollbar", x:180, y:20, width: 20, height:200, vertical:true, connected_widget:app.get_object_by_id("textarea")[0])
+
+app.run()

scrollbar.v

@@ -21,7 +21,7 @@ fn update_scroll_ver(event_details EventDetails, mut app &Window, mut app_data v
     }
 }
 
-pub fn add_scrollbar(mut app &Window, val int, min int, max int, step int, sthum int, id string, x IntOrString, y IntOrString, w IntOrString, h IntOrString, vert bool, hi bool, bg gx.Color,  bfg gx.Color, fg gx.Color, fnclk OnEvent, fnchg OnEvent, fnucl OnEvent, frame string, zindex int){
+pub fn add_scrollbar(mut app &Window, val int, min int, max int, step int, sthum int, id string, x IntOrString, y IntOrString, w IntOrString, h IntOrString, vert bool, hi bool, bg gx.Color,  bfg gx.Color, fg gx.Color, fnclk OnEvent, fnchg OnEvent, fnucl OnEvent, frame string, zindex int, connected_object map[string]WindowData){
     app.objects << {
         "type": WindowData{str:"scrollbar"},
         "id":   WindowData{str:id},
@@ -46,12 +46,23 @@ pub fn add_scrollbar(mut app &Window, val int, min int, max int, step int, sthum
         "bfg":  WindowData{clr:bfg},
         "fg":   WindowData{clr:fg},
         "click":WindowData{bol:false},
-        "fnclk":WindowData{fun:fnclk},
-        "fnchg":WindowData{fun:fnchg},
-        "fnucl":WindowData{fun:fnucl}
+        "fnclk":WindowData{fun:if connected_object==null_object{fnclk} else {empty_fn} },
+        "fnchg":WindowData{fun:if connected_object==null_object{fnchg} else {change_connected_object_viewarea}},
+        "fnucl":WindowData{fun:if connected_object==null_object{fnucl} else {empty_fn}},
+        "cnObj":WindowData{lst:[connected_object]}
     }
 }
 
+[unsafe]
+fn change_connected_object_viewarea(event_details EventDetails, mut window &Window, mut app_data voidptr){
+	unsafe {
+		// TODO: check "vert"
+		mut scrollbar:= window.get_object_by_id(event_details.target_id)[0]
+		scrollbar["cnObj"].lst[0]["schmx"].num = scrollbar["val"].num - scrollbar["vlMin"].num
+		scrollbar["cnObj"].lst[0]["schvl"].num = scrollbar["vlMax"].num - scrollbar["vlMin"].num
+	}
+}
+
 [unsafe]
 fn draw_scrollbar(app &Window, object map[string]WindowData){
 	unsafe{

textarea.v

@@ -7,57 +7,72 @@ pub fn add_textarea(mut app &Window, text string, id string, placeholder string,
     app.objects << {
         "type": WindowData{str:"textarea"},
         "id":   WindowData{str:id},
-		"in":   WindowData{str:frame},
+	"in":   WindowData{str:frame},
         "z_ind":WindowData{num:zindex},
         "text": WindowData{str:text+"\0"},
-		"ph":	WindowData{str:placeholder},
-		"phsa": WindowData{bol:phsa},
+	"ph":	WindowData{str:placeholder},
+	"phsa": WindowData{bol:phsa},
         "x":    WindowData{num:0},
         "y":    WindowData{num:0},
         "w":    WindowData{num:0},
         "h":    WindowData{num:0},
-		"x_raw":WindowData{str: match x{ int{ x.str() } string{ x } } },
-		"y_raw":WindowData{str: match y{ int{ y.str() } string{ y } } },
-		"w_raw":WindowData{str: match w{ int{ w.str() } string{ w } } },
-		"h_raw":WindowData{str: match h{ int{ h.str() } string{ h } } },
+	"x_raw":WindowData{str: match x{ int{ x.str() } string{ x } } },
+	"y_raw":WindowData{str: match y{ int{ y.str() } string{ y } } },
+	"w_raw":WindowData{str: match w{ int{ w.str() } string{ w } } },
+	"h_raw":WindowData{str: match h{ int{ h.str() } string{ h } } },
         "bg":   WindowData{clr:bg},
         "bfg":  WindowData{clr:bfg},
         "fg":   WindowData{clr:fg},
         "hi":	WindowData{bol:hi},
         "fnchg":WindowData{fun:fnchg},
-		"code": WindowData{bol:codefield},
-        "tSize":WindowData{num:tSize}
+	"code": WindowData{bol:codefield},
+        "tSize":WindowData{num:tSize},
+        "schmx":WindowData{num:0},
+        "schvl":WindowData{num:0},
+        "schsl":WindowData{num:0}
     }
 }
 
 [unsafe]
 fn draw_textarea(app &Window, object map[string]WindowData){
 	unsafe{
+		line_count := object["text"].str.count("\n")
+		max_height := line_count * object["tSize"].num
+		view_height := object["h"].num - 16 - line_count * 4 / 3
+		mut scrolled_height := 0
+		if max_height > view_height && object["schvl"].num > 0{
+			scrolled_height = (max_height - view_height) * object["schmx"].num / object["schvl"].num
+			object["schsl"].num = scrolled_height
+		}
 		app.gg.draw_rect_filled(object["x"].num, object["y"].num, object["w"].num, object["h"].num, object["bg"].clr)
 		app.gg.draw_rect_filled(object["x"].num+2, object["y"].num+2, object["w"].num-4, object["h"].num-4, object["bfg"].clr)
 		if app.focus!=object["id"].str{
 			mut the_text:=object["text"].str.replace("\0","")
 			if object["phsa"].bol {
 				the_text=object["ph"].str
 			}
-			for w,split_text in the_text.split("\n"){
-				app.gg.draw_text(object["x"].num+4, object["y"].num+4+w*object["tSize"].num, split_text, gx.TextCfg{
-					color: object["fg"].clr
-					mono: object["code"].bol
-					size: object["tSize"].num
-					align: .left
-					vertical_align: .top
-				})
+			for w,split_text in the_text.replace("\t","    ").split("\n"){
+				if 4+w*object["tSize"].num - scrolled_height > 0 && 4+w*object["tSize"].num - scrolled_height < object["h"].num {
+					app.gg.draw_text(object["x"].num+4, object["y"].num+4+w*object["tSize"].num - scrolled_height, split_text, gx.TextCfg{
+						color: object["fg"].clr
+						mono: object["code"].bol
+						size: object["tSize"].num
+						align: .left
+						vertical_align: .top
+					})
+				}
 			}
 		} else {
-			for w,split_text in object["text"].str.replace("\0",text_cursor).split("\n"){
-				app.gg.draw_text(object["x"].num+4, object["y"].num+4+w*object["tSize"].num, split_text, gx.TextCfg{
-					color: object["fg"].clr
-					mono: object["code"].bol
-					size: object["tSize"].num
-					align: .left
-					vertical_align: .top
-				})
+			for w,split_text in object["text"].str.replace("\t","    ").replace("\0",text_cursor).split("\n"){
+				if 4+w*object["tSize"].num - scrolled_height > 0 && 4+w*object["tSize"].num - scrolled_height < object["h"].num{
+					app.gg.draw_text(object["x"].num+4, object["y"].num+4+w*object["tSize"].num - scrolled_height, split_text, gx.TextCfg{
+						color: object["fg"].clr
+						mono: object["code"].bol
+						size: object["tSize"].num
+						align: .left
+						vertical_align: .top
+					})
+				}
 			}
 		}
 

types.v

@@ -21,12 +21,12 @@ pub fn empty_custom_widget_event(x f32, y f32, mut object map[string]WindowData,
 pub union WindowData {
 pub mut:
 	num int
-    str string
-    clr gx.Color
-    bol bool
-    fun OnEvent
-    img gg.Image
-    tbl [][]string
+	str string
+	clr gx.Color
+	bol bool
+	fun OnEvent
+	img gg.Image
+	tbl [][]string
 	dat [][]int
 	lcr []gx.Color
 	vmp ValueMap
@@ -35,11 +35,11 @@ pub mut:
 
 pub struct CustomWidget {
 pub mut:
-	typ			string
-    draw_fn		CustomWidgetDraw	= empty_custom_widget_draw
-    click_fn	CustomWidgetEvent	= empty_custom_widget_event
-    move_fn		CustomWidgetEvent	= empty_custom_widget_event
-    unclick_fn	CustomWidgetEvent	= empty_custom_widget_event
+	typ		string
+	draw_fn		CustomWidgetDraw	= empty_custom_widget_draw
+	click_fn	CustomWidgetEvent	= empty_custom_widget_event
+	move_fn		CustomWidgetEvent	= empty_custom_widget_event
+	unclick_fn	CustomWidgetEvent	= empty_custom_widget_event
 }
 
 pub struct WindowConfig {
@@ -58,13 +58,13 @@ pub mut:
 	color			[]int							= [-1,-1,-1]
 	scrollbar		bool							//= false
 	view_area		[]int							= [-1,-1]
-	file_handler	OnEvent								= empty_fn
+	file_handler		OnEvent							= empty_fn
 	ask_quit		bool							//= false
 	quit_fn			OnEvent							= empty_fn
 	init_fn			OnEvent							= empty_fn
 	resized_fn		OnEvent							= empty_fn
 	background		[]int							= [-1,-1,-1]
-	menubar_config	MenubarConfig
+	menubar_config		MenubarConfig
 }
 
 pub struct EventDetails{
@@ -76,6 +76,7 @@ pub mut:
 	target_id		string		//= ""
 }
 
+[heap]
 pub struct Window {
 pub mut:
 	objects     			[]map[string]WindowData
@@ -99,7 +100,7 @@ pub mut:
 	init_fn				OnEvent
 	resized_fn			OnEvent
 	active_dialog			string			//= "" //messagebox, input, password, progress, color, date, notification, openfile, savefile, openfolder, custom
-	dialog_answer			string					= dialogs_null_answer
+	dialog_answer			string			= dialogs_null_answer
 	dialog_objects			[]map[string]WindowData // for dialogs
 	custom_widgets			[]CustomWidget
 	keybindings			map[string]WindowData 	= map[string]WindowData{}
@@ -124,55 +125,56 @@ pub mut:
 	placeholder		string			//= ""										//ph
 	ph_as_text		bool			//= 0										//phsa //show placeholder as text
 	table			[][]string		= [[""]]									//table
-	tabs			[][]string		= [["Test Tab","test_tab"]]					//tabs
+	tabs			[][]string		= [["Test Tab","test_tab"]]							//tabs
 	active_tab		string			//= ""										//acttb
-	id				string			//= ""										//id
+	id			string			//= ""										//id
 	link			string			//= ""										//link
-	percent			int				//= 0										//perc
-	value			int				//= 0										//val
-	value_max		int				= 10										//vlMax
-	value_min		int				//= 0										//vlMin
-	size_thumb		int				= 6											//sThum
+	percent			int			//= 0										//perc
+	value			int			//= 0										//val
+	value_max		int			= 10										//vlMax
+	value_min		int			//= 0										//vlMin
+	size_thumb		int			= 6										//sThum
 	checked			bool			//= false									//c
-	step			int				= 1											//vStep
+	step			int			= 1										//vStep
 	hider_char		string			= "*"										//hc
-	selected		int				//= 0										//s
+	selected		int			//= 0										//s
 	list			[]string		= [""]										//list
-	x				IntOrString		= "0"										//x_raw
-	y				IntOrString		= "0"										//y_raw
+	x			IntOrString		= "0"										//x_raw
+	y			IntOrString		= "0"										//y_raw
 	width			IntOrString		= "125"										//w_raw
 	height			IntOrString		= "20"										//h_raw
 	onchange		OnEvent			= empty_fn									//onchg
 	onclick			OnEvent			= empty_fn									//onclk
 	onunclick		OnEvent			= empty_fn									//onucl
-	link_underline	bool			= true										//unlin
+	link_underline		bool			= true										//unlin
 	graph_title		string			= "Graph"									//g_tit
-	graph_label		[]string		= ["","",""]								//g_lbl
+	graph_label		[]string		= ["","",""]									//g_lbl
 	graph_data		[][]int			= [[0,0,0]]									//g_dat
 	graph_names		[]string		= [""]										//g_nam
-	graph_color		[]gx.Color		= [gx.Color{r: 255, g: 255, b: 255}]		//g_clr
-	background		gx.Color		= gx.Color{r: 127, g: 127, b: 127}			//bg
+	graph_color		[]gx.Color		= [gx.Color{r: 255, g: 255, b: 255}]						//g_clr
+	background		gx.Color		= gx.Color{r: 127, g: 127, b: 127}						//bg
 	value_map		ValueMap		= no_map									//vlMap
-	latitude		f64				= 48.856613									//- => image
-	longitude		f64				= 2.352222									//- => image
-	zoom			int				= 10										//- => image
+	latitude		f64			= 48.856613									//- => image
+	longitude		f64			= 2.352222									//- => image
+	zoom			int			= 10										//- => image
 	vertical		bool			//= false									//vert
 	icon			bool			//= false									//icon
 	codefield		bool			//= false									//code
 	dialog			bool			//= false									//- => app.objects || app.dialog_objects
-	text_size		int				= 20										//tSize
-	text_align		int				= 1											//tAlin
-	text_multiline	bool			//= false									//tMult
+	text_size		int			= 20										//tSize
+	text_align		int			= 1										//tAlin
+	text_multiline		bool			//= false									//tMult
 	frame			string			//= ""										//in
-	z_index			int				//= 0										//z_ind
+	z_index			int			//= 0										//z_ind
+	connected_widget	map[string]WindowData	= null_object									//cnObj
 }
 
 pub struct Modal {
 	title			string		= "MUI"
 	message			string		//= ""
-	typ				string		= "messagebox"
+	typ			string		= "messagebox"
 	file_ext		string		= "*"
-	default_entry	string		//= ""
+	default_entry		string		//= ""
 }
 
 pub fn empty_fn(event_details EventDetails, mut app &Window, mut app_data voidptr){}

widgets.v

@@ -85,7 +85,7 @@ pub fn (mut app Window) slider ( args Widget ){
 }
 
 pub fn (mut app Window) scrollbar ( args Widget ){ //dialog support not done
-	add_scrollbar(mut app, args.value, args.value_min, args.value_max, args.step, args.size_thumb, args.id, args.x, args.y, args.width, args.height, args.vertical, args.hidden, app.color_scheme[1], app.color_scheme[2], app.color_scheme[3], args.onclick, args.onchange, args.onunclick, args.frame, args.z_index)
+	add_scrollbar(mut app, args.value, args.value_min, args.value_max, args.step, args.size_thumb, args.id, args.x, args.y, args.width, args.height, args.vertical, args.hidden, app.color_scheme[1], app.color_scheme[2], app.color_scheme[3], args.onclick, args.onchange, args.onunclick, args.frame, args.z_index, args.connected_widget)
 }
 
 pub fn (mut app Window) link ( args Widget ){ //dialog support not done