- [Animation Panel] Add timeline preview for Canvas, Animation, GIF, and array to anim nodes.

PixelComposer.resource_order

@@ -9,7 +9,7 @@
     {"name":"GMD3D11","order":2,"path":"folders/_extensions/GMD3D11.yy",},
     {"name":"MAC","order":3,"path":"folders/_extensions/MAC.yy",},
     {"name":"patreon","order":4,"path":"folders/_extensions/patreon.yy",},
-    {"name":"SNAP","order":18,"path":"folders/_extensions/SNAP.yy",},
+    {"name":"SNAP","order":17,"path":"folders/_extensions/SNAP.yy",},
     {"name":"XML","order":1,"path":"folders/_extensions/SNAP/XML.yy",},
     {"name":"WinMan","order":5,"path":"folders/_extensions/WinMan.yy",},
     {"name":"camera","order":7,"path":"folders/functions/3d/camera.yy",},
@@ -193,26 +193,26 @@
   "ResourceOrderSettings":[
     {"name":"ac_disappear","order":2,"path":"animcurves/ac_disappear/ac_disappear.yy",},
     {"name":"ac_ripple","order":1,"path":"animcurves/ac_ripple/ac_ripple.yy",},
-    {"name":"Apollo","order":8,"path":"extensions/Apollo/Apollo.yy",},
+    {"name":"Apollo","order":7,"path":"extensions/Apollo/Apollo.yy",},
-    {"name":"clipboard","order":10,"path":"extensions/clipboard/clipboard.yy",},
+    {"name":"clipboard","order":9,"path":"extensions/clipboard/clipboard.yy",},
-    {"name":"discordBridge","order":11,"path":"extensions/discordBridge/discordBridge.yy",},
+    {"name":"discordBridge","order":10,"path":"extensions/discordBridge/discordBridge.yy",},
     {"name":"display_measure","order":1,"path":"extensions/display_measure/display_measure.yy",},
     {"name":"display_screenshot","order":4,"path":"extensions/display_screenshot/display_screenshot.yy",},
-    {"name":"dllTest","order":19,"path":"extensions/dllTest/dllTest.yy",},
+    {"name":"dllTest","order":18,"path":"extensions/dllTest/dllTest.yy",},
-    {"name":"file_dropper","order":6,"path":"extensions/file_dropper/file_dropper.yy",},
+    {"name":"file_dropper","order":19,"path":"extensions/file_dropper/file_dropper.yy",},
-    {"name":"FLIP","order":17,"path":"extensions/FLIP/FLIP.yy",},
+    {"name":"FLIP","order":16,"path":"extensions/FLIP/FLIP.yy",},
     {"name":"gameframe_native","order":2,"path":"extensions/gameframe_native/gameframe_native.yy",},
-    {"name":"GMSSimpleMIDI","order":15,"path":"extensions/GMSSimpleMIDI/GMSSimpleMIDI.yy",},
+    {"name":"GMSSimpleMIDI","order":14,"path":"extensions/GMSSimpleMIDI/GMSSimpleMIDI.yy",},
     {"name":"libborderless","order":1,"path":"extensions/libborderless/libborderless.yy",},
-    {"name":"libdlgmodule","order":13,"path":"extensions/libdlgmodule/libdlgmodule.yy",},
+    {"name":"libdlgmodule","order":12,"path":"extensions/libdlgmodule/libdlgmodule.yy",},
-    {"name":"libfilesystem","order":12,"path":"extensions/libfilesystem/libfilesystem.yy",},
+    {"name":"libfilesystem","order":11,"path":"extensions/libfilesystem/libfilesystem.yy",},
-    {"name":"libxprocess","order":7,"path":"extensions/libxprocess/libxprocess.yy",},
+    {"name":"libxprocess","order":6,"path":"extensions/libxprocess/libxprocess.yy",},
     {"name":"macMinimize","order":2,"path":"extensions/macMinimize/macMinimize.yy",},
     {"name":"patreon_key","order":1,"path":"extensions/patreon_key/patreon_key.yy",},
-    {"name":"Regex","order":9,"path":"extensions/Regex/Regex.yy",},
+    {"name":"Regex","order":8,"path":"extensions/Regex/Regex.yy",},
-    {"name":"Spout","order":14,"path":"extensions/Spout/Spout.yy",},
+    {"name":"Spout","order":13,"path":"extensions/Spout/Spout.yy",},
     {"name":"Steamworks","order":2,"path":"extensions/Steamworks/Steamworks.yy",},
-    {"name":"TabletStuff","order":16,"path":"extensions/TabletStuff/TabletStuff.yy",},
+    {"name":"TabletStuff","order":15,"path":"extensions/TabletStuff/TabletStuff.yy",},
     {"name":"YYFirebaseFirestore","order":1,"path":"extensions/YYFirebaseFirestore/YYFirebaseFirestore.yy",},
     {"name":"_f_code","order":9,"path":"fonts/_f_code/_f_code.yy",},
     {"name":"_f_h1","order":11,"path":"fonts/_f_h1/_f_h1.yy",},

objects/o_dialog_splash/Create_0.gml

@@ -191,13 +191,15 @@ event_inherited();
 				
 				var spr = _project.getSpr();
 				if(spr) {
-					var gw = grid_width - ui(8);
+					var gw = grid_width - ui(4);
-					var gh = grid_heigh - ui(8);
+					var gh = grid_heigh - ui(4);
+					// print($"{gw}, {gh}");
 					
 					var sw = sprite_get_width(spr);
 					var sh = sprite_get_height(spr);
 					
 					var s = min(gw / sw, gh / sh);
+					if(abs(s - 1) < 0.1) s = 1;
 					
 					var ox = (sprite_get_xoffset(spr) - sw / 2) * s;
 					var oy = (sprite_get_yoffset(spr) - sh / 2) * s;

scripts/__node/__node.gml

@@ -24,11 +24,12 @@ function __Node_Base(x, y) constructor {
 	#region ---- timeline ----
 		timeline_item    = new timelineItemNode(self);
 		anim_priority    = 0;
+		anim_timeline    = false;
 		is_anim_timeline = false;
 		
-		static refreshTimeline = function() { #region
+		static refreshTimeline = function() {
 			var _pre_anim = is_anim_timeline;
-			var _cur_anim = false;
+			var _cur_anim = anim_timeline;
 		
 			for( var i = 0, n = ds_list_size(inputs); i < n; i++ ) {
 				var _inp = inputs[| i];
@@ -37,15 +38,25 @@ function __Node_Base(x, y) constructor {
 					break;
 				}
 			}
-			
-			if(_pre_anim && !_cur_anim)
-				timeline_item.removeSelf();
-			else if(!_pre_anim && _cur_anim)
-				PROJECT.timelines.addItem(timeline_item);
-			
 			is_anim_timeline = _cur_anim;
-		} #endregion
+			if(_pre_anim == _cur_anim) return;
-	
+			
+			if(_cur_anim) PROJECT.timelines.addItem(timeline_item);
+			else          timeline_item.removeSelf();
+		}
+		
+		static setAlwaysTimeline = function(item = timeline_item) {
+			attributes.show_timeline = true;
+			array_push(attributeEditors, [ "Show In Timeline", function() { return attributes.show_timeline; }, new checkBox(function() { 
+				attributes.show_timeline = !attributes.show_timeline; 
+				anim_timeline = attributes.show_timeline;
+				refreshTimeline();
+			}) ]);
+			
+			timeline_item   = item;
+			anim_timeline   = true; 
+			refreshTimeline();
+		}
 	#endregion
 	
 	static step   = function() {}

scripts/node_canvas/node_canvas.gml

@@ -1,6 +1,7 @@
 function Node_Canvas(_x, _y, _group = noone) : Node(_x, _y, _group) constructor {
 	name	= "Canvas";
 	color	= COLORS.node_blend_canvas;
+	setAlwaysTimeline(new timelineItemNode_Canvas(self));
 	
 	inputs[|  0] = nodeValue("Dimension", self, JUNCTION_CONNECT.input, VALUE_TYPE.integer, DEF_SURF )
 		.setDisplay(VALUE_DISPLAY.vector);
@@ -1096,4 +1097,42 @@ function Node_Canvas(_x, _y, _group = noone) : Node(_x, _y, _group) constructor
 	
 		return self;
 	} #endregion 
+}
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+function timelineItemNode_Canvas(node) : timelineItemNode(node) constructor {
+	
+	static drawDopesheet = function(_x, _y, _s, _msx, _msy) {
+		if(!is_instanceof(node, Node_Canvas)) return;
+		if(!node.attributes.show_timeline) return;
+		
+		var _surfs = node.output_surface;
+		var _surf, _rx, _ry;
+		
+		for (var i = 0, n = array_length(_surfs); i < n; i++) {
+			_surf = _surfs[i];
+			if(!surface_exists(_surf)) continue;
+			
+			_rx = _x + (i + 1) * _s;
+			_ry = h / 2 + _y;
+			
+			var _sw = surface_get_width_safe(_surf);
+			var _sh = surface_get_height_safe(_surf);
+			var _ss = h / max(_sw, _sh);
+			
+			draw_surface_ext(_surf, _rx - _sw * _ss / 2, _ry - _sh * _ss / 2, _ss, _ss, 0, c_white, .5);
+		}
+	}
+	
+	static drawDopesheetOver = function(_x, _y, _s, _msx, _msy) {
+		if(!is_instanceof(node, Node_Canvas)) return;
+		if(!node.attributes.show_timeline) return;
+		
+		drawDopesheetOutput(_x, _y, _s, _msx, _msy);
+	}
+	
+	static onSerialize = function(_map) {
+		_map.type = "timelineItemNode_Canvas";
+	}
 }

scripts/node_data/node_data.gml

@@ -2047,6 +2047,8 @@ function Node(_x, _y, _group = noone) : __Node_Base(_x, _y) constructor {
 			
 			triggerRender();
 		}
+		
+		if(anim_timeline && attributes.show_timeline) refreshTimeline();
 	} #endregion
 	
 	static inputBalance = function() { #region //Cross version compatibility for dynamic input nodes

scripts/node_image_animated/node_image_animated.gml

@@ -34,6 +34,7 @@ function Node_Image_Animated(_x, _y, _group = noone) : Node(_x, _y, _group) cons
 	name  = "Animation";
 	spr   = [];
 	color = COLORS.node_blend_input;
+	setAlwaysTimeline(new timelineItemNode_Image_Animated(self));
 	
 	update_on_frame = true;
 	
@@ -251,4 +252,42 @@ function Node_Image_Animated(_x, _y, _group = noone) : Node(_x, _y, _group) cons
 			if(_drw) draw_sprite(spr[_frame], 0, curr_x, curr_y);
 		surface_reset_shader();
 	} #endregion
+}
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+function timelineItemNode_Image_Animated(node) : timelineItemNode(node) constructor {
+	
+	static drawDopesheet = function(_x, _y, _s, _msx, _msy) {
+		if(!is_instanceof(node, Node_Image_Animated)) return;
+		if(!node.attributes.show_timeline) return;
+		
+		var _sprs = node.spr;
+		var _spr, _rx, _ry;
+		
+		for (var i = 0, n = array_length(_sprs); i < n; i++) {
+			_spr = _sprs[i];
+			if(!sprite_exists(_spr)) continue;
+			
+			_rx = _x + (i + 1) * _s;
+			_ry = h / 2 + _y;
+			
+			var _sw = sprite_get_width(_spr);
+			var _sh = sprite_get_height(_spr);
+			var _ss = h / max(_sw, _sh);
+			
+			draw_sprite_ext(_spr, 0, _rx - _sw * _ss / 2, _ry - _sh * _ss / 2, _ss, _ss, 0, c_white, .5);
+		}
+	}
+	
+	static drawDopesheetOver = function(_x, _y, _s, _msx, _msy) {
+		if(!is_instanceof(node, Node_Image_Animated)) return;
+		if(!node.attributes.show_timeline) return;
+		
+		drawDopesheetOutput(_x, _y, _s, _msx, _msy);
+	}
+	
+	static onSerialize = function(_map) {
+		_map.type = "timelineItemNode_Image_Animated";
+	}
 }

scripts/node_image_gif/node_image_gif.gml

@@ -27,6 +27,7 @@ function Node_Image_gif(_x, _y, _group = noone) : Node(_x, _y, _group) construct
 	name			= "Image GIF";
 	color			= COLORS.node_blend_input;
 	update_on_frame = true;
+	setAlwaysTimeline(new timelineItemNode_Image_gif(self));
 	
 	inputs[| 0] = nodeValue("Path", self, JUNCTION_CONNECT.input, VALUE_TYPE.path, "")
 		.setDisplay(VALUE_DISPLAY.path_load, { filter: "Animated gif|*.gif" });
@@ -231,4 +232,40 @@ function Node_Image_gif(_x, _y, _group = noone) : Node(_x, _y, _group) construct
 	static onDestroy = function() { #region
 		if(sprite_exists(spr)) sprite_flush(spr);
 	} #endregion
+}
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+function timelineItemNode_Image_gif(node) : timelineItemNode(node) constructor {
+	
+	static drawDopesheet = function(_x, _y, _s, _msx, _msy) {
+		if(!is_instanceof(node, Node_Image_gif)) return;
+		if(!node.attributes.show_timeline) return;
+		
+		var _spr = node.spr;
+		if(!sprite_exists(_spr)) return;
+		
+		var _rx, _ry;
+		var _sw = sprite_get_width(_spr);
+		var _sh = sprite_get_height(_spr);
+		var _ss = h / max(_sw, _sh);
+		
+		for (var i = 0, n = sprite_get_number(_spr); i < n; i++) {
+			_rx = _x + (i + 1) * _s;
+			_ry = h / 2 + _y;
+			
+			draw_sprite_ext(_spr, i, _rx - _sw * _ss / 2, _ry - _sh * _ss / 2, _ss, _ss, 0, c_white, .5);
+		}
+	}
+	
+	static drawDopesheetOver = function(_x, _y, _s, _msx, _msy) {
+		if(!is_instanceof(node, Node_Image_gif)) return;
+		if(!node.attributes.show_timeline) return;
+		
+		drawDopesheetOutput(_x, _y, _s, _msx, _msy);
+	}
+	
+	static onSerialize = function(_map) {
+		_map.type = "timelineItemNode_Image_gif";
+	}
 }

scripts/node_sequence_anim/node_sequence_anim.gml

@@ -1,6 +1,7 @@
 function Node_Sequence_Anim(_x, _y, _group = noone) : Node(_x, _y, _group) constructor {
 	name = "Array to Anim";
 	update_on_frame = true;
+	setAlwaysTimeline(new timelineItemNode_Sequence_Anim(self));
 	
 	inputs[| 0] = nodeValue("Surface in", self, JUNCTION_CONNECT.input, VALUE_TYPE.surface, [])
 		.setArrayDepth(1);
@@ -31,24 +32,27 @@ function Node_Sequence_Anim(_x, _y, _group = noone) : Node(_x, _y, _group) const
 				_ord[i] = i;
 		}
 		
+		draw_sprite_stretched_ext(THEME.ui_panel_bg, 1, _x, _y, _w, _h, COLORS.node_composite_bg_blend, 1);
+		
 		if(_hover && point_in_rectangle(_m[0], _m[1], _x, _y, _x + _w, _y + _h) && inputs[| 2].value_from == noone) {
-			draw_sprite_stretched(THEME.button_def, mouse_click(mb_left, _focus)? 2 : 1, _x, _y, _w, _h);
+			draw_sprite_stretched_add(THEME.ui_panel_fg, 1, _x, _y, _w, _h, c_white, 0.2);
+			
 			if(mouse_press(mb_left, _focus)) 
 				dialogPanelCall(new Panel_Array_Sequence(self));
-		} else
+		}
-			draw_sprite_stretched(THEME.button_def, 0, _x, _y, _w, _h);
 		
-		var x0 = _x + ui(4);
+		var pd = ui(2);
-		var y0 = _y + ui(4);
+		var x0 = _x + pd;
-		var x1 = _x + _w - ui(4 + 32);
+		var y0 = _y + pd;
-		var y1 = _y + _h - ui(4);
+		var x1 = _x + _w - pd - ui(32);
+		var y1 = _y + _h - pd;
 		var sw = x1 - x0;
 		var sh = y1 - y0;
 		var nn = sh;
 		
-		draw_sprite_stretched(THEME.ui_panel_bg, 1, x0, y0, sw, sh);
+		// draw_sprite_stretched(THEME.ui_panel_bg, 1, x0, y0, sw, sh);
 		
-		sequence_surface = surface_verify(sequence_surface, sw, sh - ui(8));
+		sequence_surface = surface_verify(sequence_surface, sw, sh - pd * 2);
 		surface_set_target(sequence_surface);
 			DRAW_CLEAR
 			for( var i = 0, n = array_length(_ord); i < n; i++ ) {
@@ -62,19 +66,15 @@ function Node_Sequence_Anim(_x, _y, _group = noone) : Node(_x, _y, _group) const
 				
 				var _sw = surface_get_width_safe(s);
 				var _sh = surface_get_height_safe(s);
-				var _ss = (nn - ui(4)) / max(_sw, _sh);
+				var _ss = nn / max(_sw, _sh);
 				var _sx = xx + nn / 2 - _sw * _ss / 2;
 				var _sy =      nn / 2 - _sh * _ss / 2;
 				
 				draw_surface_ext_safe(s, _sx, _sy, _ss, _ss);
-				
-				//draw_set_color(COLORS.panel_toolbar_outline);
-				//draw_rectangle(xx, 0, xx + nn, nn, true);
 			}
 		surface_reset_target();
 		
-		draw_surface_safe(sequence_surface, x0, y0 + ui(4));
+		draw_surface_safe(sequence_surface, x0, y0 + pd);
-		
 		draw_sprite_ui(THEME.gear, 0, x1 + ui(16), _y + _h / 2,,,, COLORS._main_icon);
 		
 		return _h;
@@ -127,4 +127,50 @@ function Node_Sequence_Anim(_x, _y, _group = noone) : Node(_x, _y, _group) const
 		
 		outputs[| 0].setValue(array_safe_get_fast(_sur, ind));
 	}
+}
+
+function timelineItemNode_Sequence_Anim(node) : timelineItemNode(node) constructor {
+	
+	static drawDopesheet = function(_x, _y, _s, _msx, _msy) {
+		if(!is_instanceof(node, Node_Sequence_Anim)) return;
+		if(!node.attributes.show_timeline) return;
+		
+		var _surfs = node.getInputData(0);
+		var _seq   = node.getInputData(2);
+		var _useq  = !array_empty(_seq);
+		var _arr   = _useq? _seq : _surfs;
+		var _surf, _rx;
+		
+		var _h  = h - 2;
+		var _ry = h / 2 + _y;
+		
+		for (var i = 0, n = array_length(_arr); i < n; i++) {
+			_surf = _arr[i];
+			if(_useq) {
+				if(_surf < 0) continue;
+				_surf = _surfs[_surf];
+			}
+			
+			if(!surface_exists(_surf)) continue;
+			
+			_rx = _x + (i + 1) * _s;
+			
+			var _sw = surface_get_width_safe(_surf);
+			var _sh = surface_get_height_safe(_surf);
+			var _ss = _h / max(_sw, _sh);
+			
+			draw_surface_ext(_surf, _rx - _sw * _ss / 2, _ry - _sh * _ss / 2, _ss, _ss, 0, c_white, .5);
+		}
+	}
+	
+	static drawDopesheetOver = function(_x, _y, _s, _msx, _msy) {
+		if(!is_instanceof(node, Node_Sequence_Anim)) return;
+		if(!node.attributes.show_timeline) return;
+		
+		drawDopesheetOutput(_x, _y, _s, _msx, _msy);
+	}
+	
+	static onSerialize = function(_map) {
+		_map.type = "timelineItemNode_Sequence_Anim";
+	}
 }

scripts/panel_animation/panel_animation.gml

@@ -652,7 +652,7 @@ function Panel_Animation() : PanelContent() constructor {
 			var cc = PROJECT.animator.is_playing? COLORS._main_value_positive : COLORS._main_accent;
 			draw_set_color(cc);
 			draw_line(bar_line_x, ui(15), bar_line_x, bar_h - PANEL_PAD);
-					
+			
 			draw_set_text(f_p2, fa_center, fa_bottom, cc);
 			draw_text_add(bar_line_x, ui(16), string(CURRENT_FRAME + 1));
 		#endregion
@@ -1618,7 +1618,7 @@ function Panel_Animation() : PanelContent() constructor {
 		#endregion
 				
 		surface_set_target(dope_sheet_surface);	
-		draw_clear_alpha(COLORS.panel_bg_clear, 0);
+		draw_clear_alpha(COLORS.panel_bg_clear, 1);
 		var msx = mx - bar_x;
 		var msy = my - ui(8);
 				
@@ -1630,11 +1630,13 @@ function Panel_Animation() : PanelContent() constructor {
 			
 			dope_sheet_y_max = 0;
 			var key_y = ui(22) + dope_sheet_y;
+			var c0, c1;
 			
 			for( var i = 0, n = array_length(timeline_contents); i < n; i++ ) {
 				var _cont = timeline_contents[i];
 				_cont.y   = key_y;
 				_cont.h   = 0;
+				_cont.item.drawDopesheet(timeline_shift, _cont.y, timeline_scale, msx, msy);
 				
 				if(!_cont.show)
 					continue;
@@ -1650,8 +1652,11 @@ function Panel_Animation() : PanelContent() constructor {
 				}
 				
 				if(_cont.item.color_cur > -1) {
-					var c0 = colorMultiply(_cont.item.color_cur, COLORS.panel_animation_dope_key_bg);
+					c0 = colorMultiply(_cont.item.color_cur, COLORS.panel_animation_dope_key_bg);
-					var c1 = colorMultiply(_cont.item.color_cur, COLORS.panel_animation_dope_key_bg_hover);
+					c1 = colorMultiply(_cont.item.color_cur, COLORS.panel_animation_dope_key_bg_hover);
+				} else {
+					c0 = COLORS.panel_animation_dope_key_bg;
+					c1 = COLORS.panel_animation_dope_key_bg_hover;
 				}
 				
 				key_y	+= ui(20) * show_nodes + _expand * ui(10);
@@ -1671,8 +1676,8 @@ function Panel_Animation() : PanelContent() constructor {
 								draw_set_color(c0);
 								draw_rectangle(0, key_y - ui(10), bar_show_w, key_y + ui(10), false);
 								
-								if(_prop == value_focusing)			draw_sprite_stretched_ext(THEME.menu_button_mask, 0, 0, key_y - ui(8), bar_show_w, ui(16), c1, 1);
+								     if(_prop == value_focusing) draw_sprite_stretched_ext(THEME.menu_button_mask, 0, 0, key_y - ui(8), bar_show_w, ui(16), c1);
-								//else if(_prop == value_hovering)	draw_sprite_stretched_ext(THEME.menu_button_mask, 0, 0, key_y - ui(2), bar_show_w, ui( 4), c1, 1);
+								else if(_prop == value_hovering) draw_sprite_stretched_ext(THEME.menu_button_mask, 0, 0, key_y - ui(8), bar_show_w, ui(16), c1, .9);
 							}
 							
 							key_y	+= ui(18);
@@ -1842,8 +1847,6 @@ function Panel_Animation() : PanelContent() constructor {
 				if(!_cont.show)			 continue;
 				if(_cont.type != "node") continue;
 				
-				var _node = _cont.node;
-				
 				if(_cont.item.show)
 				for( var j = 0, m = array_length(_cont.props); j < m; j++ ) {
 					var prop  = _cont.props[j];
@@ -1873,11 +1876,8 @@ function Panel_Animation() : PanelContent() constructor {
 		#region ======= draw keys =======
 			for( var i = 0, n = array_length(timeline_contents); i < n; i++ ) {
 				var _cont = timeline_contents[i];
-				
 				if(_cont.type != "node") continue;
 				
-				var _node = _cont.node;
-				
 				for( var j = 0, m = array_length(_cont.animators); j < m; j++ ) {
 					var _anim = _cont.animators[j];
 					
@@ -1950,8 +1950,8 @@ function Panel_Animation() : PanelContent() constructor {
 				draw_set_color(COLORS.panel_animation_frame_divider);
 				draw_line(bar_line_x, 0, bar_line_x, hh);
 				
-				draw_set_text(f_p2, fa_right, fa_top, COLORS._main_text_sub);
+				draw_set_text(f_p2, fa_center, fa_top, COLORS._main_text_sub);
-				draw_text_add(bar_line_x - ui(2), PANEL_PAD, i);
+				draw_text_add(bar_line_x, PANEL_PAD, i);
 			}
 			
 			draw_set_alpha(1);
@@ -2027,14 +2027,19 @@ function Panel_Animation() : PanelContent() constructor {
 			
 			var cf = string(CURRENT_FRAME + 1);
 			var tx = string_width(cf) + ui(4);
-			draw_rectangle(bar_line_x - tx, PANEL_PAD, bar_line_x, hh, false);
+			draw_rectangle(bar_line_x - tx / 2, PANEL_PAD, bar_line_x + tx / 2, hh, false);
 			
-			draw_set_text(f_p2, fa_right, fa_top, COLORS._main_text_on_accent);
+			draw_set_text(f_p2, fa_center, fa_top, COLORS._main_text_on_accent);
-			draw_text_add(bar_line_x - ui(2), PANEL_PAD, cf);
+			draw_text_add(bar_line_x, PANEL_PAD, cf);
+			
+			for( var i = 0, n = array_length(timeline_contents); i < n; i++ ) {
+				var _cont = timeline_contents[i];
+				_cont.item.drawDopesheetOver(timeline_shift, _cont.y, timeline_scale, msx, msy);
+			}
 		#endregion
 		
 		#region stretch
-			var stx = timeline_shift + bar_total_w + ui(16);
+			var stx = timeline_shift + bar_total_w + ui(24);
 			var sty = ui(10);
 			
 			if(timeline_stretch == 1) {

scripts/panel_array_sequence/panel_array_sequence.gml

@@ -84,7 +84,7 @@ function Panel_Array_Sequence(node) : PanelContent() constructor {
 		surface_set_target(sequence_surface);
 			DRAW_CLEAR
 			
-			draw_sprite_stretched(THEME.ui_panel_bg, 1, sequence_x, 0, len * _ns, ph);
+			draw_sprite_stretched_ext(THEME.ui_panel_bg, 1, sequence_x, 0, len * _ns, ph, COLORS._main_icon_light);
 			
 			var ax = sequence_x + len * _ns + ui(12);
 			var ay = ui(24) + _ns / 2;
@@ -101,7 +101,7 @@ function Panel_Array_Sequence(node) : PanelContent() constructor {
 				
 				draw_set_color(COLORS._main_text_sub);
 				draw_set_alpha(0.5);
-				draw_line(_sx, ui(24), _sx, ph);
+				draw_line(_sx, ui(24), _sx, ph - ui(2));
 				draw_set_alpha(1);
 				
 				draw_set_text(f_p2, fa_center, fa_top, COLORS._main_text_sub);

scripts/timeline_data/timeline_data.gml

@@ -1,4 +1,6 @@
 function timelineItem() constructor { 
+	h = ui(20);
+	
 	show   = true;
 	active = true;
 	
@@ -10,31 +12,39 @@ function timelineItem() constructor {
 	static setColor = function(color) { self.color = color; }
 	static getColor = function()      { return color; }
 	
-	static drawLabel = function(_x, _y, _w, _msx, _msy) {}
+	static drawLabel         = function(_x, _y, _w, _msx, _msy) {}
+	static drawDopesheet     = function(_x, _y, _s, _msx, _msy) {}
+	static drawDopesheetOver = function(_x, _y, _s, _msx, _msy) {}
 	
-	static removeSelf = function() { #region
+	static removeSelf = function() {
 		if(parent == noone) return;
 		array_remove(parent.contents, self);
 		
 		return self;
-	} #endregion
+	}
 	
 	static serialize = function() {}
 	
-	static deserialize = function(_map) { #region
+	static deserialize = function(_map) {
+		
 		switch(_map.type) {
+			case "Folder" : return new timelineItemGroup().deserialize(_map);
 			case "Node"   : return new timelineItemNode(noone).deserialize(_map);
-			case "Folder" : return new timelineItemGroup(noone).deserialize(_map);
+			
+			case "timelineItemNode_Canvas" :			return new timelineItemNode_Canvas(noone).deserialize(_map);
+			case "timelineItemNode_Image_Animated" :	return new timelineItemNode_Image_Animated(noone).deserialize(_map);
+			case "timelineItemNode_Sequence_Anim" : 	return new timelineItemNode_Sequence_Anim(noone).deserialize(_map);
+			case "timelineItemNode_Image_gif" : 		return new timelineItemNode_Image_gif(noone).deserialize(_map);
 		}
 		
 		return self;
-	} #endregion
+	}
 }
 
 function timelineItemNode(node) : timelineItem() constructor {
 	self.node = node;
 	
-	static drawLabel = function(_item, _x, _y, _w, _msx, _msy, hover, focus, itHover, fdHover, nameType, alpha = 1) { #region
+	static drawLabel = function(_item, _x, _y, _w, _msx, _msy, hover, focus, itHover, fdHover, nameType, alpha = 1) {
 		var _sel = node == PANEL_INSPECTOR.getInspecting();
 		
 		var lx = _x + _item.depth * ui(12) + ui(2);
@@ -99,22 +109,43 @@ function timelineItemNode(node) : timelineItem() constructor {
 			draw_text_add(txx, _y + lh / 2 - ui(2), node.display_name);
 		
 		return res;
-	} #endregion
+	}
+	
+	static drawDopesheetOutput = function(_x, _y, _s, _msx, _msy) {
+		var _surf = node.outputs[| 0].getValue();
+		if(!is_surface(_surf)) return;
+		
+		var _h  = h - 2;
+		var _rx = _x + (CURRENT_FRAME + 1) * _s;
+		var _ry = h / 2 + _y;
+		
+		var _sw = surface_get_width_safe(_surf);
+		var _sh = surface_get_height_safe(_surf);
+		var _ss = _h / max(_sw, _sh);
+		
+		// draw_sprite_stretched_ext(THEME.menu_button_mask, 0, _rx - h / 2, _ry - h / 2, h, h, CDEF.main_dkblack);
+		draw_surface_ext(_surf, _rx - _sw * _ss / 2, _ry - _sh * _ss / 2, _ss, _ss, 0, c_white, 1);
+		
+		// draw_sprite_stretched_ext(THEME.menu_button_mask, 1, _rx - h / 2, _ry - h / 2, h, h, CDEF.main_dkgrey);
+	}
 	
 	static setColor = function(color) { node.attributes.color = color; }
 	static getColor = function()      { return node.attributes.color; }
 	
-	static serialize = function() { #region
+	static onSerialize = function(_map) {}
+	static serialize   = function() {
 		var _map = {};
 		
 		_map.type    = "Node";
 		_map.show    = show;
 		_map.node_id = is_struct(node)? node.node_id : -4;
+		onSerialize(_map);
 		
 		return _map;
-	} #endregion
+	}
 	
-	static deserialize = function(_map) { #region
+	static onDeserialize = function(_map) {}
+	static deserialize   = function(_map) {
 		show  = struct_try_get(_map, "show", true);
 		
 		var _node_id = _map.node_id;
@@ -126,8 +157,9 @@ function timelineItemNode(node) : timelineItem() constructor {
 			node.timeline_item = self;
 		}
 		
+		onDeserialize(_map);
 		return self;
-	} #endregion
+	}
 }
 
 function timelineItemGroup() : timelineItem() constructor {
@@ -145,7 +177,7 @@ function timelineItemGroup() : timelineItem() constructor {
 		});
 	} #endregion
 	
-	static drawLabel = function(_item, _x, _y, _w, _msx, _msy, hover, focus, itHover, fdHover, nameType, alpha = 1) { #region
+	static drawLabel = function(_item, _x, _y, _w, _msx, _msy, hover, focus, itHover, fdHover, nameType, alpha = 1) {
 		var lx = _x + _item.depth * ui(12) + ui(2);
 		var lw = _w - _item.depth * ui(12) - ui(4);
 		
@@ -199,16 +231,16 @@ function timelineItemGroup() : timelineItem() constructor {
 		}
 		
 		return res;
-	} #endregion
+	}
 	
-	static addItem = function(_item) { #region
+	static addItem = function(_item) {
 		array_push(contents, _item);
 		_item.parent = self;
 		
 		return self;
-	} #endregion
+	}
 	
-	static destroy = function() { #region
+	static destroy = function() {
 		var ind = array_find(parent.contents, self);
 		array_delete(parent.contents, ind, 1);
 		
@@ -216,9 +248,9 @@ function timelineItemGroup() : timelineItem() constructor {
 			array_insert(parent.contents, ind++, contents[i]);
 			contents[i].parent = parent;
 		}
-	} #endregion
+	}
 	
-	static serialize = function() { #region
+	static serialize = function() {
 		var _map = {};
 		
 		_map.type  = "Folder";
@@ -232,9 +264,9 @@ function timelineItemGroup() : timelineItem() constructor {
 		_map.contents = _content;
 		
 		return _map;
-	} #endregion
+	}
 	
-	static deserialize = function(_map) { #region
+	static deserialize = function(_map) {
 		color = _map.color;
 		name  = struct_try_get(_map, "name", "");
 		show  = struct_try_get(_map, "show", true);
@@ -246,5 +278,5 @@ function timelineItemGroup() : timelineItem() constructor {
 		}
 			
 		return self;
-	} #endregion
+	}
 }