Pixel-Composer/scripts/curveBox/curveBox.gml

function curveBox(_onModify) : widget() constructor {
	onModify   = _onModify;
	curr_data  = [];
	anc_mirror = [];
	h = 200;
	
	curve_surface = surface_create(1, 1);
	node_dragging = -1;
	node_drag_typ = -1;
	node_drag_break = false;
	
	height_drag   = false;
	height_my     = 0;
	height_ss     = 0;
	show_coord    = false;
	
	minx = 0; maxx = 1;
	miny = 0; maxy = 1;
	
	dragging = 0;
	drag_m   = 0;
	drag_s   = 0;
	drag_h   = 0;
	progress_draw = -1;
	
	display_pos_x = 0;
	display_pos_y = 0;
	display_sel   = 0;
	
	grid_snap = false;
	grid_step = 0.10;
	grid_show = true;
	
	scale_control = true;
	control_zoom  = 64;
	
	selecting   = noone;
	select_type = 0;
	
	cw = 0;
	ch = 0;
	
	tb_shift = new textBox(TEXTBOX_INPUT.number, function(val) { var _data = array_clone(curr_data); _data[0] = val; onModify(_data); });
	tb_scale = new textBox(TEXTBOX_INPUT.number, function(val) { var _data = array_clone(curr_data); _data[1] = val; onModify(_data); });
	
	tb_shift.label = "Shift";
	tb_scale.label = "Scale";
	
	static get_x = function(val) { return cw *      (val - minx) / (maxx - minx) ; }
	static get_y = function(val) { return ch * (1 - (val - miny) / (maxy - miny)); }
	
	static setInteract = function(interactable = noone) {
		self.interactable = interactable;
		
		tb_shift.setInteract(interactable);
		tb_scale.setInteract(interactable);
	}
	
	static register = function(parent = noone) {
		self.parent = parent;
		tb_shift.register(parent);
		tb_scale.register(parent);
	}
	
	static isHovering = function() { 
		if(tb_shift.isHovering()) return true;
		if(tb_scale.isHovering()) return true;
		
		return hovering;
	}
	
	static drawParam = function(params) {
		rx = params.rx;
		ry = params.ry;
		tb_shift.setParam(params);
		tb_scale.setParam(params);
		
		return draw(params.x, params.y, params.w, params.data, params.m);
	}
	
	static draw = function(_x, _y, _w, _data, _m) {
		x = _x; 
		y = _y;
		w = _w; 
		
		if(!is_array(_data) || array_length(_data) == 0) return 0;
		if(is_array(_data[0])) return 0;
		
		var _h = h - ui(4);
		
		var _amo = array_length(_data);
		    _shf = _amo % 6;
		var points = (_amo - _shf) / 6;
		
		var _shift = 0;
		var _scale = 1;
		
		var zoom_size = ui(12);
		var zoom_padd = zoom_size + ui(8);
		
		var tbh = line_get_height(font) + ui(4);
		
		cw = _w - zoom_padd;
		ch = _h - zoom_padd - (tbh + ui(4)) * bool(_shf);
		
		hovering  = false;
		curr_data = _data;
			 if(_shf == 1) { _shift = _data[0]; } 
		else if(_shf == 2) { _shift = _data[0]; _scale = _data[1]; }
		
		display_pos_x = lerp(minx, maxx,     (_m[0] - _x) / cw);
		display_pos_y = lerp(miny, maxy, 1 - (_m[1] - _y) / ch);
		display_sel   = false;
		
		curve_surface = surface_verify(curve_surface, cw, ch);
		
		if(node_dragging != -1) { // editing
			show_coord = true;
			_data = array_clone(_data);
			
			if(node_drag_typ == 0) { //anchor
				
				var _mx = (_m[0] - _x) / cw;
					_mx = clamp(_mx * (maxx - minx) + minx, 0, 1);
						
				var _my = 1 - (_m[1] - _y) / ch;
					_my = clamp(_my * (maxy - miny) + miny, 0, 1);
					
				var node_point = (node_dragging - _shf - 2) / 6;
				if(node_point > 0 && node_point < points - 1) {
					
					if(key_mod_press(CTRL) || grid_snap)
						_mx = value_snap(_mx, grid_step);
					
					var bfx = _data[node_dragging - 6];
					var afx = _data[node_dragging + 6];
					
					if(_mx > bfx && _mx < afx) _data[node_dragging + 0] = _mx;
				}
				
				if(key_mod_press(CTRL) || grid_snap) 
					_my = value_snap(_my, grid_step);
				_data[node_dragging + 1] = _my;
				
				display_pos_x = _data[node_dragging + 0];
				display_pos_y = _data[node_dragging + 1];
				display_sel   = 1;
				
				if(onModify(_data))
					UNDO_HOLDING = true;
					
			} else { //control
			
				var _px = _data[node_dragging + 0];
				var _py = _data[node_dragging + 1];
				
				var _mx = (_m[0] - _x) / cw;
					_mx = clamp(lerp(minx, maxx, _mx), 0, 1);
					
				var _my = 1 - (_m[1] - _y) / ch;
					_my = lerp(miny, maxy, _my);
				
				var _scax = scale_control? (node_drag_typ > 0? _data[node_dragging + 6] - _px : _px - _data[node_dragging - 6]) : control_zoom / cw;
				var _scay = scale_control? _scax : control_zoom / ch;
				
				if(key_mod_press(CTRL) || grid_snap) _mx = value_snap(_mx, grid_step);
				if(key_mod_press(CTRL) || grid_snap) _my = value_snap(_my, grid_step);
					
				if(node_drag_break) {
					if(node_drag_typ == 1) {
						_data[node_dragging + 2] = (_mx - _px) * node_drag_typ / _scax;
						_data[node_dragging + 3] = clamp(_my - _py, -1, 1) * node_drag_typ / _scay;	
						
					} else {
						_data[node_dragging - 2] = (_px - _mx) * node_drag_typ / _scax;
						_data[node_dragging - 1] = clamp(_py - _my, -1, 1) * node_drag_typ / _scay;
						
					}
					
				} else {
					_data[node_dragging - 2] = (_px - _mx) * node_drag_typ / _scax;
					_data[node_dragging + 2] = (_mx - _px) * node_drag_typ / _scax;
					
					_data[node_dragging - 1] = clamp(_py - _my, -1, 1) * node_drag_typ / _scay;
					_data[node_dragging + 3] = clamp(_my - _py, -1, 1) * node_drag_typ / _scay;
				}
				
				display_pos_x = node_drag_typ? _data[node_dragging - 2] : _data[node_dragging + 2];
				display_pos_y = node_drag_typ? _data[node_dragging - 1] : _data[node_dragging + 3];
				display_sel   = 2;
				
				if(onModify(_data))
					UNDO_HOLDING = true;
			} 
			
			if(mouse_release(mb_left)) {
				node_dragging = -1;
				node_drag_typ = -1;
				
				UNDO_HOLDING = false;
			}
		}
		
		var node_hovering  = -1;
		var node_hover_typ = -1;
		var point_insert   = 1;
		var _x1 = 0;
		
		var msx = _m[0] - _x;
		var msy = _m[1] - _y;
		
		#region ==== draw curve ====
			surface_set_target(curve_surface);
				DRAW_CLEAR
				
				draw_set_color(COLORS.widget_curve_line);
				draw_set_alpha(0.5);
				
				if(grid_show) {
					var st = max(grid_step, 0.02);
					
					for( var i = st; i < 1; i += st ) {
						var y0 = ch * (1 - (i - miny) / (maxy - miny));
						draw_line(0, y0, cw, y0);
						
						var x0 = cw * (i - minx) / (maxx - minx);
						draw_line(x0, get_y(0), x0, get_y(1));
					}
				}
				
				var y0 = ch - ch * (0 - miny) / (maxy - miny);
				var y1 = ch - ch * (1 - miny) / (maxy - miny);
				
				draw_set_alpha(0.9);
				draw_line(0, y0, cw, y0);
				draw_line(0, y1, cw, y1);
				draw_set_alpha(1);
				
				if(progress_draw > -1) {
					var _prg = clamp(progress_draw, 0, 1);
					var _px  = get_x(cw * _prg);
					
					draw_set_color(COLORS.widget_curve_line);
					draw_line(_px, 0, _px, ch);
				}
				
				if(_shf) {
					draw_set_color(merge_color(COLORS._main_icon, COLORS._main_icon_dark, 0.5));
					draw_curve(0, 0, cw, ch, _data, minx, maxx, miny, maxy, _shift, _scale);
				}
				
				for( var i = 0; i < points; i++ ) {
					var ind = _shf + i * 6;
					var _x0 = _data[ind + 2];
					var _y0 = _data[ind + 3];
					
					var _sca_bx = scale_control? (i > 0?          _x0 - _data[ind - 6 + 2] : 1) : control_zoom / cw;
					var _sca_by = scale_control? _sca_bx : control_zoom / ch;
					
					var _sca_ax = scale_control? (i < points - 1? _data[ind + 6 + 2] - _x0 : 1) : control_zoom / cw;
					var _sca_ay = scale_control? _sca_ax : control_zoom / ch;
					
					var bx0 = _x0 + _data[ind + 0] * _sca_bx;
					var by0 = _y0 + _data[ind + 1] * _sca_by;
					var ax0 = _x0 + _data[ind + 4] * _sca_ax;
					var ay0 = _y0 + _data[ind + 5] * _sca_ay;
					
					// print($"{_x0}, {_y0} | {_data[ind + 0]}, {_data[ind + 1]} | {_data[ind + 4]}, {_data[ind + 5]}");
					
					bx0 = get_x(bx0);
					by0 = get_y(by0);
					_x0 = get_x(_x0);
					_y0 = get_y(_y0);
					ax0 = get_x(ax0);
					ay0 = get_y(ay0);
				
					draw_set_color(COLORS.widget_curve_line);
					if(i > 0) { //draw pre line
						draw_line(bx0, by0, _x0, _y0);
					
						draw_circle_prec(bx0, by0, 3, false);
						if(hover && point_in_circle(msx, msy, bx0, by0, 10)) {
							draw_circle_prec(bx0, by0, 5, false);
							node_hovering = ind + 2;
							node_hover_typ = -1;
							
							display_pos_x = _data[ind + 0];
							display_pos_y = _data[ind + 1];
							display_sel   = 2;
						}
					}
			
					if(i < points - 1) { //draw post line
						draw_line(ax0, ay0, _x0, _y0);
				
						draw_circle_prec(ax0, ay0, 3, false);
						if(hover && point_in_circle(msx, msy, ax0, ay0, 10)) {
							draw_circle_prec(ax0, ay0, 5, false);
							node_hovering = ind + 2;
							node_hover_typ = 1;
							
							display_pos_x = _data[ind + 4];
							display_pos_y = _data[ind + 5];
							display_sel   = 2;
						}
					}
			
					draw_set_color(COLORS._main_accent);
					draw_circle_prec(_x0, _y0, 3, false);
					if(hover && point_in_circle(msx, msy, _x0, _y0, 10)) {
						draw_circle_prec(_x0, _y0, 5, false);
						node_hovering = ind + 2;
						node_hover_typ = 0;
							
						display_pos_x = _data[ind + 2];
						display_pos_y = _data[ind + 3];
						display_sel   = 1;
					}
			
					if(msx >= _x1 && msy <= _x0)
						point_insert = i;
					_x1 = _x0;
				}
		
				draw_set_color(COLORS._main_accent);
				draw_curve(0, 0, cw, ch, _data, minx, maxx, miny, maxy);
			
			surface_reset_target();
		#endregion
		
		#region ==== view controls ====
			
			var hov = 0;
			var bs  = zoom_size;
			
			var zminy = 0 - 1;
			var zmaxy = 1 + 1;
			
			var byH = ch;
			
			var bx  = _x + w - bs;
			var by  = _y;
			var zy0 = by + bs / 2 + (byH - bs) * (1 - (miny - zminy) / (zmaxy - zminy));
			var zy1 = by + bs / 2 + (byH - bs) * (1 - (maxy - zminy) / (zmaxy - zminy));
			
			if(dragging) {
				var _mdy = (drag_m[1] - _m[1]) / (byH - bs) * 2;
				
				if(dragging == 1 || dragging == 3) miny = clamp(drag_s[0] + _mdy, zminy, min(maxy - 0.1, zmaxy));
				if(dragging == 2 || dragging == 3) maxy = clamp(drag_s[1] + _mdy, max(miny + 0.1, zminy), zmaxy);
				
				if(mouse_release(mb_left))
					dragging = false;
			} 
			
				 if(point_in_rectangle(_m[0], _m[1], bx, zy0 - bs / 2, bx + bs, zy0 + bs / 2))
				hov = 1;
			else if(point_in_rectangle(_m[0], _m[1], bx, zy1 - bs / 2, bx + bs, zy1 + bs / 2))
				hov = 2;
			else if(point_in_rectangle(_m[0], _m[1], bx, zy1 - bs / 2, bx + bs, zy0 + bs / 2))
				hov = 3;
				
			draw_sprite_stretched_ext(THEME.s_box_r2, 0, bx, by, bs, byH, CDEF.main_black, 1);
			draw_sprite_stretched_ext(THEME.s_box_r2, 0, bx, zy1, bs, zy0 - zy1, drag_h == 3? merge_color(CDEF.main_dkgrey, CDEF.main_grey, 0.4) : CDEF.main_dkgrey, 1);
			
			draw_sprite_stretched_ext(THEME.s_box_r2, 0, bx, zy0 - bs / 2, bs, bs, drag_h == 1? COLORS._main_icon_light : COLORS._main_icon, 1);
			draw_sprite_stretched_ext(THEME.s_box_r2, 0, bx, zy1 - bs / 2, bs, bs, drag_h == 2? COLORS._main_icon_light : COLORS._main_icon, 1);
			
			var zminx = 0;
			var zmaxx = 1;
			
			var bxW = _w - zoom_padd;
			var bx  = _x;
			var by  = _y + _h - bs - (tbh + ui(4)) * bool(_shf);
			
			var zx0 = bx + bs / 2 + (bxW - bs) * (minx - zminx) / (zmaxx - zminx);
			var zx1 = bx + bs / 2 + (bxW - bs) * (maxx - zminx) / (zmaxx - zminx);
			
			if(dragging) {
				var _mdx = (_m[0] - drag_m[0]) / (bxW - bs);
				
				if(dragging == 4 || dragging == 6) minx = clamp(drag_s[2] + _mdx, zminx, min(maxx - 0.1, zmaxx));
				if(dragging == 5 || dragging == 6) maxx = clamp(drag_s[3] + _mdx, max(minx + 0.1, zminx), zmaxx);
				
				if(mouse_release(mb_left))
					dragging = false;
			} 
			
				 if(point_in_rectangle(_m[0], _m[1], zx0 - bs / 2, by, zx0 + bs / 2, by + bs))
				hov = 4;
			else if(point_in_rectangle(_m[0], _m[1], zx1 - bs / 2, by, zx1 + bs / 2, by + bs))
				hov = 5;
			else if(point_in_rectangle(_m[0], _m[1], zx0 - bs / 2, by, zx1 + bs / 2, by + bs))
				hov = 6;
				
			draw_sprite_stretched_ext(THEME.s_box_r2, 0, bx, by, bxW, bs, CDEF.main_black, 1);
			draw_sprite_stretched_ext(THEME.s_box_r2, 0, zx0, by, zx1 - zx0, bs, drag_h == 6? merge_color(CDEF.main_dkgrey, CDEF.main_grey, 0.4) : CDEF.main_dkgrey, 1);
			
			draw_sprite_stretched_ext(THEME.s_box_r2, 0, zx0 - bs / 2, by, bs, bs, drag_h == 4? COLORS._main_icon_light : COLORS._main_icon, 1);
			draw_sprite_stretched_ext(THEME.s_box_r2, 0, zx1 - bs / 2, by, bs, bs, drag_h == 5? COLORS._main_icon_light : COLORS._main_icon, 1);
			
			drag_h = hov;
			if(mouse_press(mb_left, hov && active)) {
				dragging = hov;
				drag_m   = [ _m[0], _m[1] ];
				drag_s   = [ miny, maxy, minx, maxx ];
			}
			
			if(dragging == 10) {
				var _mdx = (_m[0] - drag_m[0]) / (bxW - bs);
				var _mdy = (drag_m[1] - _m[1]) / (byH - bs) * 2;
				
				var zw = drag_s[3] - drag_s[2];
				var zh = drag_s[1] - drag_s[0];
				
				var cx = clamp((drag_s[3] + drag_s[2]) / 2 - _mdx, zminx + zw / 2, zmaxx - zw / 2);
				var cy = clamp((drag_s[1] + drag_s[0]) / 2 - _mdy, zminy + zh / 2, zmaxy - zh / 2);
				
				minx = cx - zw / 2;
				maxx = cx + zw / 2;
				
				miny = cy - zh / 2;
				maxy = cy + zh / 2;
				
				if(mouse_release(mb_middle))
					dragging = false;
			}
					
			if(point_in_rectangle(_m[0], _m[1], _x, _y, _x + cw, _y + ch) && mouse_press(mb_middle, active)) {
				dragging = 10;
				drag_m   = [ _m[0], _m[1] ];
				drag_s   = [ miny, maxy, minx, maxx ];
			}
			
			var _bhx = _x + _w - bs;
			var _bhy = _y + _h - bs - (tbh + ui(4)) * bool(_shf);
			var _hov = false;
			
			if(point_in_rectangle(_m[0], _m[1], _bhx, _bhy, _bhx + bs, _bhy + bs)) {
				_hov = true;
				if(mouse_press(mb_left, active)) {
					dragging = hov;
					
					height_drag = true;
					height_my   = _m[1];
					height_ss   = h;
				}
				
			}
			draw_sprite_stretched_ext(THEME.s_box_r2, 0, _bhx, _bhy, bs, bs, _hov? COLORS._main_icon : CDEF.main_dkgrey, 1);
			
			if(height_drag) {
				h = height_ss + _m[1] - height_my;
				h = max(100, h);
				
				if(mouse_release(mb_left))
					height_drag = false;
			}
		#endregion
		
		if(hover && point_in_rectangle(_m[0], _m[1], _x, _y, _x + cw, _y + ch)) {
			show_coord = true;
			hovering   = true;
			
			if(mouse_press(mb_left, active)) {
				if(node_hovering == -1) {
					var _ind = _shf + point_insert * 6;
					var _px =     (_m[0] - _x) / cw;
					var _py = 1 - (_m[1] - _y) / ch;
					
					array_insert(_data, _ind + 0, -1 / 3);
					array_insert(_data, _ind + 1, 0);
					array_insert(_data, _ind + 2, _px);
					array_insert(_data, _ind + 3, _py);
					array_insert(_data, _ind + 4, 1 / 3);
					array_insert(_data, _ind + 5, 0);
					
					if(onModify(_data))
						UNDO_HOLDING = true;
					
					node_dragging = _ind + 2;
					node_drag_typ = 0;
					
				} else {
					node_dragging = node_hovering;
					node_drag_typ = node_hover_typ;
					
					if(node_hover_typ != 0) {
						var _cax = _data[node_dragging - 2];
						var _cay = _data[node_dragging - 1];
						var _cbx = _data[node_dragging + 2];
						var _cby = _data[node_dragging + 3];
						
						node_drag_break = key_mod_press(SHIFT);
						
						if(_cax != -_cbx || _cay != -_cby)
							node_drag_break = true;
					}
				}
				
			} else if(mouse_press(mb_right, active)) {
				// var node_point = (node_hovering - _shf - 2) / 6;
				// if(node_hover_typ == 0 && node_point > 0 && node_point < points - 1) {
				// 	array_delete(_data, _shf + node_point * 6, 6);
				// 	if(onModify(_data)) UNDO_HOLDING = true;
				// }
			}
			
			if(mouse_press(mb_right, active)) {
				var rmx = rx + _m[0];
				var rmy = ry + _m[1];
				
				if(node_hovering == -1 || node_hover_typ != 0) {
					menuCall("widget_curve", [
						menuItemGroup(__txt("Presets"), [ 
							[ [THEME.curve_presets, 0], function() /*=>*/ { onModify(CURVE_DEF_00); } ],
							[ [THEME.curve_presets, 1], function() /*=>*/ { onModify(CURVE_DEF_11); } ],
							[ [THEME.curve_presets, 2], function() /*=>*/ { onModify(CURVE_DEF_01); } ],
							[ [THEME.curve_presets, 3], function() /*=>*/ { onModify(CURVE_DEF_10); } ],
						]),
						-1,
						menuItem(__txt("Reset View"), function() /*=>*/ { 
							minx = 0; maxx = 1;
							miny = 0; maxy = 1;
						}),
						menuItem(__txt("Grid"),         function() /*=>*/ { grid_show = !grid_show; }, noone, noone, function() /*=>*/ {return grid_show}),
						menuItem(__txt("Snap to grid"), function() /*=>*/ { grid_snap = !grid_snap; }, noone, noone, function() /*=>*/ {return grid_snap}),
						menuItemGroup(__txt("Grid size"), [
							[ "1%",  function() /*=>*/ { grid_step = 0.01; } ],
							[ "5%",  function() /*=>*/ { grid_step = 0.05; } ],
							[ "10%", function() /*=>*/ { grid_step = 0.10; } ],
							[ "25%", function() /*=>*/ { grid_step = 0.25; } ],
						]),
						menuItem(__txt("Scale Controls"), function() /*=>*/ { scale_control = !scale_control; }, noone, noone, function() /*=>*/ {return scale_control} ),
					], rmx, rmy);
					
				} else {
					selecting   = node_hovering;
					select_type = node_hover_typ;
					select_data = _data;
					
					var node_point = (selecting - _shf - 2) / 6;
					var _menu = [];
					
					array_push(_menu, menuItem(__txt("Reset Controls"), function() /*=>*/ { 
						var node_point = (selecting - _shf - 2) / 6;
						var _ind  = _shf + node_point * 6;
						
						select_data[@ _ind + 0] = -1 / 3;
						select_data[@ _ind + 1] = 0;
						select_data[@ _ind + 4] = 1 / 3;
						select_data[@ _ind + 5] = 0;
						onModify(select_data);
					}));
					
					if(node_point > 0 && node_point < points - 1) {
						array_push(_menu, menuItem(__txt("Delete Anchor"), function() /*=>*/ { 
							var node_point = (selecting - _shf - 2) / 6;
							array_delete(select_data, _shf + node_point * 6, 6);
							onModify(select_data);
						}, THEME.cross));
					}
					
					menuCall("widget_curve", _menu, rmx, rmy);
				}
			}
		}
			
		draw_surface(curve_surface, _x, _y);
		
		draw_set_color(COLORS.widget_curve_outline);
		draw_rectangle(_x, _y, _x + cw, _y + ch, true);
		
		if(show_coord) {
			var tx = _x + cw - ui(6);
			var ty = _y + ch - ui(6);
			
			draw_set_text(f_p2, fa_right, fa_bottom, display_sel? COLORS._main_text: COLORS._main_text_sub);
			draw_text_add(tx, ty, $"{display_sel == 2? "dy" : "y"}: {string_format(display_pos_y * 100, -1, 2)}%");
			
			ty -= line_get_height();
			draw_text_add(tx, ty, $"{display_sel == 2? "dx" : "x"}: {string_format(display_pos_x * 100, -1, 2)}%");
		}
		
		show_coord = false;
		
		if(_shf) {
			var tby = _y + h - tbh;
			var tbw = _w / 2;
			
			tb_shift.setFocusHover(active, hover);
			tb_scale.setFocusHover(active, hover);
			
			tb_shift.hide = true;
			tb_scale.hide = true;
				
			draw_sprite_stretched_ext(THEME.textbox, 3, _x, tby, _w, tbh, c_white, 1);
			draw_sprite_stretched_ext(THEME.textbox, 0, _x, tby, _w, tbh, c_white, 0.5 + 0.5 * interactable);	
			
			tb_shift.draw(_x,       tby, tbw, tbh, _data[0], _m);
			tb_scale.draw(_x + tbw, tby, tbw, tbh, _data[1], _m);
		}
		
		resetFocus();
		
		return h;
	}
	
	static clone = function() {
		var cln = new curveBox(onModify);
		return cln;
	}
}