canvas skew

PixelComposer.resource_order

@@ -413,6 +413,7 @@
     {"name":"canvas_tool_selection_magic","order":9,"path":"scripts/canvas_tool_selection_magic/canvas_tool_selection_magic.yy",},
     {"name":"canvas_tool_selection_shape","order":6,"path":"scripts/canvas_tool_selection_shape/canvas_tool_selection_shape.yy",},
     {"name":"canvas_tool_selection","order":7,"path":"scripts/canvas_tool_selection/canvas_tool_selection.yy",},
+    {"name":"canvas_tool_skew","order":6,"path":"scripts/canvas_tool_skew/canvas_tool_skew.yy",},
     {"name":"canvas_tool_with_selector","order":5,"path":"scripts/canvas_tool_with_selector/canvas_tool_with_selector.yy",},
     {"name":"checkboxActive","order":11,"path":"scripts/checkboxActive/checkboxActive.yy",},
     {"name":"checkboxGroup","order":6,"path":"scripts/checkboxGroup/checkboxGroup.yy",},
@@ -1329,6 +1330,7 @@
     {"name":"sh_canvas_apply_draw","order":3,"path":"shaders/sh_canvas_apply_draw/sh_canvas_apply_draw.yy",},
     {"name":"sh_canvas_extrude","order":1,"path":"shaders/sh_canvas_extrude/sh_canvas_extrude.yy",},
     {"name":"sh_canvas_inset","order":2,"path":"shaders/sh_canvas_inset/sh_canvas_inset.yy",},
+    {"name":"sh_canvas_skew","order":4,"path":"shaders/sh_canvas_skew/sh_canvas_skew.yy",},
     {"name":"sh_cell_noise_crystal","order":1,"path":"shaders/sh_cell_noise_crystal/sh_cell_noise_crystal.yy",},
     {"name":"sh_cell_noise_edge","order":2,"path":"shaders/sh_cell_noise_edge/sh_cell_noise_edge.yy",},
     {"name":"sh_cell_noise_random","order":3,"path":"shaders/sh_cell_noise_random/sh_cell_noise_random.yy",},

PixelComposer.yyp

@@ -754,6 +754,7 @@
     {"id":{"name":"canvas_tool_selection_magic","path":"scripts/canvas_tool_selection_magic/canvas_tool_selection_magic.yy",},},
     {"id":{"name":"canvas_tool_selection_shape","path":"scripts/canvas_tool_selection_shape/canvas_tool_selection_shape.yy",},},
     {"id":{"name":"canvas_tool_selection","path":"scripts/canvas_tool_selection/canvas_tool_selection.yy",},},
+    {"id":{"name":"canvas_tool_skew","path":"scripts/canvas_tool_skew/canvas_tool_skew.yy",},},
     {"id":{"name":"canvas_tool_with_selector","path":"scripts/canvas_tool_with_selector/canvas_tool_with_selector.yy",},},
     {"id":{"name":"checkbox","path":"scripts/checkbox/checkbox.yy",},},
     {"id":{"name":"checkboxActive","path":"scripts/checkboxActive/checkboxActive.yy",},},
@@ -1817,6 +1818,7 @@
     {"id":{"name":"sh_canvas_extrude","path":"shaders/sh_canvas_extrude/sh_canvas_extrude.yy",},},
     {"id":{"name":"sh_canvas_inset","path":"shaders/sh_canvas_inset/sh_canvas_inset.yy",},},
     {"id":{"name":"sh_canvas_mask","path":"shaders/sh_canvas_mask/sh_canvas_mask.yy",},},
+    {"id":{"name":"sh_canvas_skew","path":"shaders/sh_canvas_skew/sh_canvas_skew.yy",},},
     {"id":{"name":"sh_cell_noise_crystal","path":"shaders/sh_cell_noise_crystal/sh_cell_noise_crystal.yy",},},
     {"id":{"name":"sh_cell_noise_edge","path":"shaders/sh_cell_noise_edge/sh_cell_noise_edge.yy",},},
     {"id":{"name":"sh_cell_noise_random","path":"shaders/sh_cell_noise_random/sh_cell_noise_random.yy",},},

scripts/__canvas_tool_shader/__canvas_tool_shader.gml

@@ -16,6 +16,9 @@ function canvas_tool_shader() : canvas_tool() constructor {
 	function stepEffect(hover, active, _x, _y, _s, _mx, _my, _snx, _sny) {}
 	function stepMaskEffect(hover, active, _x, _y, _s, _mx, _my, _snx, _sny) {}
 	
+	doForceStep = false;
+	function forceStep(hover, active, _x, _y, _s, _mx, _my, _snx, _sny) {}
+	
 	function step(hover, active, _x, _y, _s, _mx, _my, _snx, _sny) {
 		if(mouse_press(mb_right)) {
 			PANEL_PREVIEW.tool_current = noone;
@@ -46,6 +49,11 @@ function canvas_tool_shader() : canvas_tool() constructor {
 			draw_surface(_surf, _pos[0], _pos[1]);
 		surface_reset_shader();
 		
+		if(doForceStep) {
+			forceStep(hover, active, _x, _y, _s, _mx, _my, _snx, _sny);
+			return;
+		}
+		
 		if(mask) {
 			stepMaskEffect(hover, active, _x, _y, _s, _mx, _my, _snx, _sny);
 			

scripts/canvas_tool_brush/canvas_tool_brush.gml

@@ -100,25 +100,27 @@ function canvas_tool_brush(brush, eraser = false) : canvas_tool() constructor {
 	}
 	
 	function drawPostOverlay(hover, active, _x, _y, _s, _mx, _my, _snx, _sny) {
+		if(!mouse_line_drawing) return;
+		if(brush.brush_sizing)  return;
+		if(!node.attributes.show_slope_check)  return;
 		
-		if(mouse_line_drawing && !brush.brush_sizing && node.attributes.show_slope_check) {
+		var _x0 = _x + mouse_line_x0 * _s;
-			var _x0 = _x + mouse_line_x0 * _s;
+		var _y0 = _y + mouse_line_y0 * _s;
-			var _y0 = _y + mouse_line_y0 * _s;
+		var _x1 = _x + mouse_line_x1 * _s;
-			var _x1 = _x + mouse_line_x1 * _s;
+		var _y1 = _y + mouse_line_y1 * _s;
-			var _y1 = _y + mouse_line_y1 * _s;
 		
-			var _w  = mouse_line_x1 - mouse_line_x0;
+		var _w  = mouse_line_x1 - mouse_line_x0;
-			var _h  = mouse_line_y1 - mouse_line_y0;
+		var _h  = mouse_line_y1 - mouse_line_y0;
-			var _as = max(_w, _h) % min(_w, _h) == 0;
+		var _as = max(_w, _h) % min(_w, _h) == 0;
 		
-			draw_set_color(_as? COLORS._main_value_positive : COLORS._main_accent);
+		draw_set_color(_as? COLORS._main_value_positive : COLORS._main_accent);
-			draw_rectangle(_x0, _y0, _x1, _y1, true);
+		draw_rectangle(_x0, _y0, _x1, _y1, true);
 		
-			draw_set_text(f_p3, fa_center, fa_top);
+		draw_set_text(f_p3, fa_center, fa_top);
-			draw_text((_x0 + _x1) / 2, _y1 + 8, _w);
+		draw_text((_x0 + _x1) / 2, _y1 + 8, _w);
+		
+		draw_set_text(f_p3, fa_left, fa_center);
+		draw_text(_x1 + 8, (_y0 + _y1) / 2, _h);
 		
-			draw_set_text(f_p3, fa_left, fa_center);
-			draw_text(_x1 + 8, (_y0 + _y1) / 2, _h);
-		}
 	}
 }

scripts/canvas_tool_brush_shape/canvas_tool_brush_shape.gml

@@ -71,4 +71,33 @@ function canvas_tool_shape(brush, shape) : canvas_tool() constructor {
 			canvas_draw_ellp_brush(brush, mouse_pre_x, mouse_pre_y, mouse_cur_x, mouse_cur_y, subtool); 
 	}
 	
+	function drawPostOverlay(hover, active, _x, _y, _s, _mx, _my, _snx, _sny) {
+		if(!mouse_holding)      return;
+		if(brush.brush_sizing)  return;
+		if(!node.attributes.show_slope_check)  return;
+		
+		var mx0 = min(mouse_cur_x, mouse_pre_x);
+		var mx1 = max(mouse_cur_x, mouse_pre_x) + 1;
+		var my0 = min(mouse_cur_y, mouse_pre_y);
+		var my1 = max(mouse_cur_y, mouse_pre_y) + 1;
+		
+		var _w  = mx1 - mx0;
+		var _h  = my1 - my0;
+		
+		var _x0 = _x + mx0 * _s;
+		var _y0 = _y + my0 * _s;
+		var _x1 = _x + mx1 * _s;
+		var _y1 = _y + my1 * _s;
+		
+		var _as = max(_w, _h) % min(_w, _h) == 0;
+		
+		draw_set_color(_as? COLORS._main_value_positive : COLORS._main_accent);
+		draw_rectangle(_x0, _y0, _x1, _y1, true);
+		
+		draw_set_text(f_p3, fa_center, fa_top);
+		draw_text((_x0 + _x1) / 2, _y1 + 8, _w);
+		
+		draw_set_text(f_p3, fa_left, fa_center);
+		draw_text(_x1 + 8, (_y0 + _y1) / 2, _h);
+	}
 }

scripts/canvas_tool_selection/canvas_tool_selection.gml

@@ -250,7 +250,16 @@ function canvas_tool_selection(selector = noone) : canvas_tool() constructor {
 	} #endregion
 	
 	function drawOverlay(hover, active, _x, _y, _s, _mx, _my, _snx, _sny) { #region
-		if(!is_selected) return;
+		if(!is_selected) {
+			if(!is_selecting) {
+				var x0 = _x + mouse_cur_x * _s;
+				var y0 = _y + mouse_cur_y * _s;
+				
+				draw_set_color(c_white);
+				draw_rectangle(x0, y0, x0 + _s, y0 + _s, true);
+			}
+			return;
+		}
 		
 		var pos_x = _x + selection_position[0] * _s;
 		var pos_y = _y + selection_position[1] * _s;

scripts/canvas_tool_selection_freeform/canvas_tool_selection_freeform.gml

@@ -86,7 +86,4 @@ function canvas_tool_selection_freeform(selector, brush) : canvas_tool_selection
 		}
 	}
 	
-	function drawPreview(hover, active, _x, _y, _s, _mx, _my, _snx, _sny) {
-		canvas_draw_point_brush(brush, mouse_cur_x, mouse_cur_y);
-	}
 }

scripts/canvas_tool_selection_magic/canvas_tool_selection_magic.gml

@@ -65,7 +65,4 @@ function canvas_tool_selection_magic(selector, toolAttr) : canvas_tool_selection
 		}
 	}
 	
-	function drawPreview(hover, active, _x, _y, _s, _mx, _my, _snx, _sny) {
-		canvas_draw_point_brush(brush, mouse_cur_x, mouse_cur_y);
-	}
 }

scripts/canvas_tool_selection_shape/canvas_tool_selection_shape.gml

@@ -53,7 +53,4 @@ function canvas_tool_selection_shape(selector, shape) : canvas_tool_selection(se
 		}
 	}
 	
-	function drawPreview(hover, active, _x, _y, _s, _mx, _my, _snx, _sny) {
-		canvas_draw_point_brush(brush, mouse_cur_x, mouse_cur_y);
-	}
 }

scripts/canvas_tool_skew/canvas_tool_skew.gml

@@ -0,0 +1,118 @@
+function canvas_tool_skew() : canvas_tool_shader() constructor {
+	
+	mouse_sx = 0;
+	mouse_sy = 0;
+	
+	skew_bbox = [ 0, 0, 0, 0 ];
+	skew_ax  = 0;
+	skew_inv = 0;
+	skew_x   = 0;
+	skew_y   = 0;
+	skew_w   = 1;
+	skew_h   = 1;
+	
+	__overlay_hover = [ 0, 0, 0, 0 ];
+	
+	function init() { mouse_init = true; }
+	
+	function onInit(hover, active, _x, _y, _s, _mx, _my, _snx, _sny) {
+		var _sel = node.tool_selection;
+		if(!_sel.is_selected) {
+			PANEL_PREVIEW.tool_current = noone;
+			return;
+		}
+		
+		skew_bbox = [
+			_sel.selection_position[0],
+			_sel.selection_position[1],
+			_sel.selection_position[0] + _sel.selection_size[0],
+			_sel.selection_position[1] + _sel.selection_size[1],	
+		];
+		
+		skew_w   = _sel.selection_size[0];
+		skew_h   = _sel.selection_size[1];
+		
+		doForceStep = true;
+	}
+	
+	function forceStep(hover, active, _x, _y, _s, _mx, _my, _snx, _sny) {
+		
+		var x0 = _x + skew_bbox[0] * _s;
+		var y0 = _y + skew_bbox[1] * _s;
+		var x1 = _x + skew_bbox[2] * _s;
+		var y1 = _y + skew_bbox[3] * _s;
+		
+		var xc = (x0 + x1) / 2;
+		var yc = (y0 + y1) / 2;
+		
+		draw_surface_ext(preview_surface[0], _x, _y, _s, _s, 0, c_white, 1);
+		
+		draw_set_color(COLORS._main_accent);
+		draw_rectangle_border(x0, y0, x1, y1, 1);
+		
+		var _hov_ax = noone;
+		
+		if(hover) {
+				 if(distance_to_line(_mx, _my, x0, y0, x1, y0) < 16) _hov_ax = 0;
+			else if(distance_to_line(_mx, _my, x0, y1, x1, y1) < 16) _hov_ax = 1;
+			else if(distance_to_line(_mx, _my, x0, y0, x0, y1) < 16) _hov_ax = 2;
+			else if(distance_to_line(_mx, _my, x1, y0, x1, y1) < 16) _hov_ax = 3;
+		}
+		
+		switch(_hov_ax) {
+			case 0 : draw_line_width(x0, y0, x1, y0, 4); break;
+			case 1 : draw_line_width(x0, y1, x1, y1, 4); break;
+			case 2 : draw_line_width(x0, y0, x0, y1, 4); break;
+			case 3 : draw_line_width(x1, y0, x1, y1, 4); break;
+		}
+		
+		for(var i = 0; i < 4; i++) __overlay_hover[i] = lerp_float(__overlay_hover[i], i == _hov_ax, 3);
+		
+		draw_anchor_line(__overlay_hover[0], xc, y0, 16,  0);
+		draw_anchor_line(__overlay_hover[1], xc, y1, 16,  0);
+		draw_anchor_line(__overlay_hover[2], x0, yc, 16, 90);
+		draw_anchor_line(__overlay_hover[3], x1, yc, 16, 90);
+		
+		if(_hov_ax != noone && mouse_press(mb_left, active)) {
+			doForceStep = false;
+			
+			mouse_sx  = _mx;
+			mouse_sy  = _my;
+			skew_inv  = 0;
+			skew_x    = 0;
+			skew_y    = 0;
+			
+			switch(_hov_ax) {
+				case 0 : skew_ax = 0; skew_y = skew_bbox[3]; skew_inv = 1; break;
+				case 1 : skew_ax = 0; skew_y = skew_bbox[1]; skew_inv = 0; break;
+				case 2 : skew_ax = 1; skew_x = skew_bbox[2]; skew_inv = 1; break;
+				case 3 : skew_ax = 1; skew_x = skew_bbox[0]; skew_inv = 0; break;
+			}
+		}
+	}
+	
+	function stepEffect(hover, active, _x, _y, _s, _mx, _my, _snx, _sny) {
+		var _dim  = node.attributes.dimension;
+		
+		var _dx  = (_mx - mouse_sx) / _s;
+		var _dy  = (_my - mouse_sy) / _s;
+		var _amo = skew_ax? _dy / skew_h : _dx / skew_w;
+		
+		if(abs(_amo) > 1)  _amo = round(_amo);
+		else if(_amo != 0) _amo = 1 / ceil(1 / abs(_amo)) * sign(_amo);
+		if(skew_inv) _amo = -_amo;
+		
+		surface_set_shader(preview_surface[1], sh_canvas_skew);
+			
+			shader_set_f("dimension", _dim);
+			shader_set_f("origin",    skew_x, skew_y);
+			shader_set_i("axis",      skew_ax);
+			shader_set_f("amount",    _amo);
+			
+			shader_set_color("color", CURRENT_COLOR);
+			
+			draw_surface(preview_surface[0], 0, 0);
+		surface_reset_shader();
+		
+	}
+}

scripts/canvas_tool_skew/canvas_tool_skew.yy

@@ -0,0 +1,13 @@
+{
+  "$GMScript":"",
+  "%Name":"canvas_tool_skew",
+  "isCompatibility":false,
+  "isDnD":false,
+  "name":"canvas_tool_skew",
+  "parent":{
+    "name":"actions",
+    "path":"folders/nodes/data/canvas/actions.yy",
+  },
+  "resourceType":"GMScript",
+  "resourceVersion":"2.0",
+}

scripts/draw_connect_elbow/draw_connect_elbow.gml

@@ -1,4 +1,5 @@
 function draw_line_elbow_color(x0, y0, x1, y1, cx = noone, cy = noone, _s = 1, thick = 1, col1 = c_white, col2 = c_white, corner = 0, indexIn = 1, indexOut = 1, type = LINE_STYLE.solid) { #region
+	corner = min(corner, abs(x0 - x1) / 2, abs(y0 - y1) / 2);
 	var sample = corner / 4;
 	sample = clamp(sample, 1, 8);
 	

scripts/node_canvas/node_canvas.gml

@@ -203,7 +203,7 @@ function Node_Canvas(_x, _y, _group = noone) : Node(_x, _y, _group) constructor
 		
 		attributes.show_slope_check = true;
 		array_push(attributeEditors, "Display");
-		array_push(attributeEditors, [ "Slope Check", function() { return attributes.show_slope_check; }, new checkBox(function() { attributes.show_slope_check = !attributes.show_slope_check; }) ]);
+		array_push(attributeEditors, [ "Draw Guide", function() { return attributes.show_slope_check; }, new checkBox(function() { attributes.show_slope_check = !attributes.show_slope_check; }) ]);
 	#endregion
 	
 	#region ++++ tool object ++++
@@ -355,12 +355,13 @@ function Node_Canvas(_x, _y, _group = noone) : Node(_x, _y, _group) constructor
 		];
 		
 		rightTools_selection = [ 
-			-1,
+			/*  0 */ -1,
-			new NodeTool( "Make/Reset Brush", THEME.canvas_tools_pencil ).setToolFn( __action_make_brush ),
+			/*  1 */ new NodeTool( "Make/Reset Brush", THEME.canvas_tools_pencil ).setToolFn( __action_make_brush ),
-			-1,
+			/*  2 */ -1,
-			new NodeTool( "Outline", THEME.canvas_tools_outline ).setToolObject( new canvas_tool_outline() ),
+			/*  3 */ new NodeTool( "Outline", THEME.canvas_tools_outline ).setToolObject( new canvas_tool_outline() ),
-			new NodeTool( "Extrude", THEME.canvas_tools_extrude ).setToolObject( new canvas_tool_extrude() ),
+			/*  4 */ new NodeTool( "Extrude", THEME.canvas_tools_extrude ).setToolObject( new canvas_tool_extrude() ),
-			new NodeTool( "Inset",   THEME.canvas_tools_inset   ).setToolObject( new canvas_tool_inset()   ),
+			/*  5 */ new NodeTool( "Inset",   THEME.canvas_tools_inset   ).setToolObject( new canvas_tool_inset()   ),
+			/*  6 */ new NodeTool( "Skew",    THEME.canvas_tools_skew    ).setToolObject( new canvas_tool_skew()   ),
 		];
 		
 		rightTools_not_selection = [ 
@@ -368,6 +369,7 @@ function Node_Canvas(_x, _y, _group = noone) : Node(_x, _y, _group) constructor
 			new NodeTool( "Outline", THEME.canvas_tools_outline, self ).setToolObject( new canvas_tool_with_selector(rightTools_selection[3]) ),
 			new NodeTool( "Extrude", THEME.canvas_tools_extrude, self ).setToolObject( new canvas_tool_with_selector(rightTools_selection[4]) ),
 			new NodeTool( "Inset",   THEME.canvas_tools_inset,   self ).setToolObject( new canvas_tool_with_selector(rightTools_selection[5]) ),
+			new NodeTool( "Skew",    THEME.canvas_tools_skew,    self ).setToolObject( new canvas_tool_with_selector(rightTools_selection[6]) ),
 		];
 		
 		rightTools_brush = [ 

scripts/node_canvas_group/node_canvas_group.gml

@@ -1,6 +1,7 @@
 function Node_Canvas_Group(_x, _y, _group) : Node_Collection(_x, _y, _group) constructor {
 	name  = "Canvas Group";
 	color = COLORS.node_blend_canvas;
+	icon  = THEME.icon_canvas;
 	
 	timeline_item_group = new timelineItemGroup_Canvas(self);
 	PROJECT.timelines.addItem(timeline_item_group);
@@ -12,6 +13,10 @@ function Node_Canvas_Group(_x, _y, _group) : Node_Collection(_x, _y, _group) con
 	
 	custom_input_index = ds_list_size(inputs);
 	
+	attributes.show_slope_check = true;
+	array_push(attributeEditors, "Display");
+	array_push(attributeEditors, [ "Draw Guide", function() { return attributes.show_slope_check; }, new checkBox(function() { attributes.show_slope_check = !attributes.show_slope_check; }) ]);
+	
 	layers     = {};
 	canvases   = [];
 	composite  = noone;
@@ -255,7 +260,6 @@ function Node_Canvas_Group(_x, _y, _group) : Node_Collection(_x, _y, _group) con
 		canvas_sel = noone;
 		
 		if(composite == noone) return;
-		composite.deleteLayer = deleteLayer;
 		
 		if(composite.getInputAmount()) {
 			var _ind = composite.surface_selecting;
@@ -279,6 +283,10 @@ function Node_Canvas_Group(_x, _y, _group) : Node_Collection(_x, _y, _group) con
 			timeline_item_group.name  = getDisplayName();
 			timeline_item_group.color = getColor();
 		}
+		
+		for (var i = 0, n = array_length(canvases); i < n; i++) {
+			canvases[i].attributes.show_slope_check = attributes.show_slope_check;
+		}
 	}
 	
 	static update = function() {
@@ -288,7 +296,6 @@ function Node_Canvas_Group(_x, _y, _group) : Node_Collection(_x, _y, _group) con
 	static getPreviewValues = function() { return composite == noone? noone : composite.getPreviewValues(); }
 	
 	static postDeserialize = function() {
-		refreshMember();
 		refreshNodes();
 	}
 

scripts/node_composite/node_composite.gml

@@ -361,6 +361,11 @@ function Node_Composite(_x, _y, _group = noone) : Node_Processor(_x, _y, _group)
 		layer_height     = max(ui(16), _h);
 		layer_renderer.h = layer_height;
 		
+		if(layer_remove > -1) {
+			deleteLayer(layer_remove);
+			layer_remove = -1;
+		}
+		
 		return layer_height;
 	}); #endregion
 	
@@ -375,6 +380,26 @@ function Node_Composite(_x, _y, _group = noone) : Node_Processor(_x, _y, _group)
 	function deleteLayer(index) { #region
 		var idx = input_fix_len + index * data_length;
 		
+		if(canvas_group) {
+			var _inp   = inputs[| idx];
+			var _nodes = [];
+			
+			while(_inp != noone) {
+				var _n = _inp.value_from.node;
+				array_push_unique(_nodes, _n);
+				
+				_inp = noone;
+				for(var i = 0; i < ds_list_size(_n.inputs); i++) {
+					if(_n.inputs[| i].value_from != noone)
+						_inp = _n.inputs[| i];
+				}
+			}
+			
+			for (var i = 0, n = array_length(_nodes); i < n; i++)
+				_nodes[i].destroy();
+			return;
+		} 
+		
 		for( var i = 0; i < data_length; i++ )
 			ds_list_delete(inputs, idx);
 		
@@ -721,10 +746,6 @@ function Node_Composite(_x, _y, _group = noone) : Node_Processor(_x, _y, _group)
 			}
 		}
 		
-		if(layer_remove > -1) {
-			deleteLayer(layer_remove);
-			layer_remove = -1;
-		}
 	} #endregion
 	
 	static step = function() { #region

scripts/textBox/textBox.gml

@@ -12,6 +12,7 @@ function textBox(_input, _onModify) : textInput(_input, _onModify) constructor {
 	boxColor  = c_white;
 	format    = TEXT_AREA_FORMAT._default;
 	precision = 5;
+	padding   = ui(8);
 	
 	suffix = "";
 	
@@ -32,6 +33,8 @@ function textBox(_input, _onModify) : textInput(_input, _onModify) constructor {
 	slider_cur_val = 0;
 	
 	label = "";
+	highlight_color = -1; 
+	highlight_alpha = 1;
 	
 	starting_char = 1;
 	
@@ -454,19 +457,19 @@ function textBox(_input, _onModify) : textInput(_input, _onModify) constructor {
 		_text         = string_real(_text);
 		_current_text = _text;
 		
-		var tb_surf_x = _x + ui(8);
+		var tb_surf_x = _x + padding;
 		var tb_surf_y = _y;
 		
 		var tx = _x;
 		switch(align) {
-			case fa_left   : tx = _x + ui(8);      break;
+			case fa_left   : tx = _x + padding;      break;
 			case fa_center : tx = _x + _w / 2;     break;
-			case fa_right  : tx = _x + _w - ui(8); break;
+			case fa_right  : tx = _x + _w - padding; break;
 		}
 		
 		if(drawText) {
-			var _update = !surface_valid(text_surface, _w - ui(16), _h);
+			var _update = !surface_valid(text_surface, _w - padding * 2, _h);
-			if(_update) text_surface = surface_verify(text_surface, _w - ui(16), _h);
+			if(_update) text_surface = surface_verify(text_surface, _w - padding * 2, _h);
 		}
 		
 		if(!hide) {
@@ -501,7 +504,7 @@ function textBox(_input, _onModify) : textInput(_input, _onModify) constructor {
 				draw_set_text(font, fa_left, fa_center, COLORS._main_text_sub);
 				
 				draw_set_alpha(0.5);
-				draw_text_add(_x + ui(8), _y + _h / 2, label);
+				draw_text_add(_x + padding, _y + _h / 2, label);
 				draw_set_alpha(1);
 			}
 		}
@@ -586,8 +589,10 @@ function textBox(_input, _onModify) : textInput(_input, _onModify) constructor {
 		} #endregion
 		
 		if(selecting) { 
-			if(sprite_index == -1) draw_sprite_stretched_ext(THEME.textbox, 2, _x, _y, _w, _h, COLORS._main_accent, 1);
+			if(hide < 2) {
-			else                   draw_sprite_stretched(THEME.textbox, sprite_index, _x, _y, _w, _h);
+				if(sprite_index == -1) draw_sprite_stretched_ext(THEME.textbox, 2, _x, _y, _w, _h, COLORS._main_accent, 1);
+				else                   draw_sprite_stretched(THEME.textbox, sprite_index, _x, _y, _w, _h);
+			}
 			
 			editText();
 			
@@ -644,20 +649,24 @@ function textBox(_input, _onModify) : textInput(_input, _onModify) constructor {
 				
 				cursor_pos_to	= disp_x + tx + c_w;
 				if(cursor_pos_to < _x)  
-					disp_x_to += _w - ui(16);
+					disp_x_to += _w - padding * 2;
-				if(cursor_pos_to > _x + _w - ui(16))  
+				if(cursor_pos_to > _x + _w - padding * 2)  
-					disp_x_to -= _w - ui(16);
+					disp_x_to -= _w - padding * 2;
 				
 				cursor_pos_y = c_y0;
 				cursor_pos   = cursor_pos == 0? cursor_pos_to : lerp_float(cursor_pos, cursor_pos_to, 1);
 				
 				if(cursor_select > -1) { //draw highlight
-					draw_set_color(COLORS.widget_text_highlight);
+					if(highlight_color == -1) highlight_color = COLORS.widget_text_highlight;
+					draw_set_color(highlight_color);
+					draw_set_alpha(highlight_alpha);
+					
 					var c_x1 = tx + disp_x + string_width(string_copy(txt, 1, cursor_select));
 					var _rx0 = clamp(min(cursor_pos, c_x1), tx, tx + _w);
 					var _rx1 = clamp(max(cursor_pos, c_x1), tx, tx + _w);
 					
 					draw_roundrect_ext(_rx0, c_y0, _rx1, c_y1, THEME_VALUE.highlight_corner_radius, THEME_VALUE.highlight_corner_radius, 0);
+					draw_set_alpha(1);
 				}
 				
 				var _mx = -1;

scripts/timeline_data/timeline_data.gml

@@ -169,7 +169,11 @@ function timelineItemNode(node) : timelineItem() constructor {
 function timelineItemGroup() : timelineItem() constructor {
 	name     = "";
 	renaming = false;
+	
 	tb_name  = new textBox(TEXTBOX_INPUT.text, function(val) { name = val; renaming = false; });
+	tb_name.padding = ui(4);
+	tb_name.hide    = 2;
+	
 	contents = [];
 	
 	static rename = function() { #region
@@ -201,18 +205,15 @@ function timelineItemGroup() : timelineItem() constructor {
 		if(col == -1) col = CDEF.main_grey;
 		color_cur = col;
 		
-		var bnd = hig? merge_color(c_white, COLORS.panel_animation_dope_bg, .9) : COLORS.panel_animation_dope_bg;
+		var bnd = hig? merge_color(c_white, COLORS.panel_animation_dope_bg, .9) : COLORS.panel_animation_dope_bg_hover;
 		var cc  = colorMultiply(col, bnd);
-		
-		if(hover && point_in_rectangle(_msx, _msy, _x + ui(20), _y, _x + _w, _y + lh - 1)) {
-			bnd = hig? merge_color(c_white, COLORS.panel_animation_dope_bg_hover, .9) : COLORS.panel_animation_dope_bg_hover;
-			cc  = colorMultiply(col, bnd);
-			res = 1;
-		}
-		
 		color_dsp = cc;
 		draw_sprite_stretched_ext(THEME.menu_button_mask, 0, _x, _y, _w, lh, cc, alpha);
-		// draw_sprite_stretched_add(THEME.menu_button_mask, 1, _x, _y, _w, lh, c_white, 0.1);
+		
+		if(hover && point_in_rectangle(_msx, _msy, _x + ui(20), _y, _x + _w, _y + lh - 1)) {
+			draw_sprite_stretched_add(THEME.menu_button_mask, 1, _x, _y, _w, lh, c_white, 0.1);
+			res = 1;
+		}
 		
 		if(fdHover == self)
 			draw_sprite_stretched_ext(THEME.menu_button_mask, 1, _x, _y + 1, _w, lh - 2, col == -1? COLORS._main_accent : col, 1);
@@ -226,13 +227,17 @@ function timelineItemGroup() : timelineItem() constructor {
 		
 		draw_set_text(f_p2, fa_left, fa_center);
 		if(renaming) {
-			var _param = new widgetParam(lx + ui(20), _y + ui(2), _w - ui(24), lh - ui(4), name,, [ _msx, _msy ]);
+			var _param = new widgetParam(lx + ui(20), _y + 1, _w - ui(24), lh - ui(4), name,, [ _msx, _msy ]);
-			tb_name.setFont(f_p2);
+			    _param.font = f_p2;
+			
+			tb_name.highlight_color = cc;
+			tb_name.highlight_alpha = .5;
+			
 			tb_name.setFocusHover(focus, hover);
 			tb_name.drawParam(_param);
 		} else {
 			draw_set_color(itHover == self? COLORS._main_text_accent : COLORS._main_text);
-			draw_text_add(lx + ui(24), _y + lh / 2 - ui(2), name);
+			draw_text_add(lx + ui(24), _y + lh / 2, name);
 		}
 		
 		return res;

shaders/sh_canvas_skew/sh_canvas_skew.fsh

@@ -0,0 +1,20 @@
+varying vec2 v_vTexcoord;
+varying vec4 v_vColour;
+
+uniform vec2  dimension;
+
+uniform int   axis;
+uniform vec2  origin;
+uniform float amount;
+
+float round(float x) { return x >= 0.? floor(x) : floor(x) + 1.; }
+
+void main() {
+	vec2 px = v_vTexcoord * dimension;
+	vec2 amo;
+	
+		 if(axis == 0) amo = vec2(round(amount * (px.y - origin.y)), 0.);
+	else if(axis == 1) amo = vec2(0., round(amount * (px.x - origin.x)));
+	
+	gl_FragColor = texture2D( gm_BaseTexture, v_vTexcoord - amo / dimension);
+}

shaders/sh_canvas_skew/sh_canvas_skew.vsh

@@ -0,0 +1,19 @@
+//
+// Simple passthrough vertex shader
+//
+attribute vec3 in_Position;                  // (x,y,z)
+//attribute vec3 in_Normal;                  // (x,y,z)     unused in this shader.
+attribute vec4 in_Colour;                    // (r,g,b,a)
+attribute vec2 in_TextureCoord;              // (u,v)
+
+varying vec2 v_vTexcoord;
+varying vec4 v_vColour;
+
+void main()
+{
+    vec4 object_space_pos = vec4( in_Position.x, in_Position.y, in_Position.z, 1.0);
+    gl_Position = gm_Matrices[MATRIX_WORLD_VIEW_PROJECTION] * object_space_pos;
+    
+    v_vColour = in_Colour;
+    v_vTexcoord = in_TextureCoord;
+}

shaders/sh_canvas_skew/sh_canvas_skew.yy

@@ -0,0 +1,12 @@
+{
+  "$GMShader":"",
+  "%Name":"sh_canvas_skew",
+  "name":"sh_canvas_skew",
+  "parent":{
+    "name":"shader",
+    "path":"folders/nodes/data/canvas/shader.yy",
+  },
+  "resourceType":"GMShader",
+  "resourceVersion":"2.0",
+  "type":1,
+}