mirrors/Pixel-Composer
1
0
Fork 0
mirror of https://github.com/Ttanasart-pt/Pixel-Composer.git synced 2025-02-20 17:05:40 +01:00
Code Issues Projects Releases Packages Wiki Activity

Timeline rework 2

Browse source
This commit is contained in:
MakhamDev 2023-10-14 18:51:34 +07:00
parent 6afa977b27
commit 7a63c91762
4 changed files with 120 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
PixelComposer.yyp
View file

@ -352,6 +352,7 @@
{"resourceType":"GMIncludedFile","resourceVersion":"1.0","name":"s_filter_24.png","CopyToMask":-1,"filePath":"datafiles/data/themes/default/graphics/icon",},
{"resourceType":"GMIncludedFile","resourceVersion":"1.0","name":"s_filter_type.png","CopyToMask":-1,"filePath":"datafiles/data/themes/default/graphics/icon",},
{"resourceType":"GMIncludedFile","resourceVersion":"1.0","name":"s_fluid_sim.png","CopyToMask":-1,"filePath":"datafiles/data/themes/default/graphics/icon",},
{"resourceType":"GMIncludedFile","resourceVersion":"1.0","name":"s_folder_16.png","CopyToMask":-1,"filePath":"datafiles/data/themes/default/graphics/icon",},
{"resourceType":"GMIncludedFile","resourceVersion":"1.0","name":"s_folder_24.png","CopyToMask":-1,"filePath":"datafiles/data/themes/default/graphics/icon",},
{"resourceType":"GMIncludedFile","resourceVersion":"1.0","name":"s_folder_add_strip2.png","CopyToMask":-1,"filePath":"datafiles/data/themes/default/graphics/icon",},
{"resourceType":"GMIncludedFile","resourceVersion":"1.0","name":"s_folder_content.png","CopyToMask":-1,"filePath":"datafiles/data/themes/default/graphics/icon",},

BIN
datafiles/data/themes/default.zip
View file

Binary file not shown.

62
scripts/panel_animation/panel_animation.gml
View file

@ -41,7 +41,7 @@ function Panel_Animation() : PanelContent() constructor {
dopesheet_dragging = noone;
dopesheet_drag_mx = 0;
dope_sheet_node_padding = ui(2);
dope_sheet_node_padding = ui(0);
#endregion
#region ---- timeline ----
@ -90,7 +90,7 @@ function Panel_Animation() : PanelContent() constructor {
value_focusing = noone;
#endregion
#region ---- display ----
#region ---- display ----
show_node_outside_context = true;
#endregion
@ -288,10 +288,10 @@ function Panel_Animation() : PanelContent() constructor {
for( var i = 0, n = array_length(_clrs); i < n; i++ ) {
_item[i] = [
[ THEME.timeline_color, 0, _clrs[i] ],
[ THEME.timeline_color, i > 0, _clrs[i] ],
function(_data) {
context_selecting_item.item.color = _data.color;
}, "", { color: _clrs[i] }
}, "", { color: i == 0? -1 : _clrs[i] }
];
}
@ -998,12 +998,16 @@ function Panel_Animation() : PanelContent() constructor {
return key_hover;
} #endregion
function drawDopesheetLabelAnimator(_node, animator, msx, msy) { #region
function drawDopesheetLabelAnimator(_item, _node, animator, msx, msy) { #region
var prop = animator.prop;
var aa = _node.group == PANEL_GRAPH.getCurrentContext()? 1 : 0.9;
var tx = tool_width;
var ty = animator.y - 1;
var cc = colorMultiply(_item.item.color_cur, COLORS.panel_animation_dope_key_bg);
draw_set_color(cc);
draw_rectangle(0, ty - ui(10), tx, ty + ui(10), false);
#region keyframe control
tx = tool_width - ui(20 + 16 * 3);
if(buttonInstant(noone, tx - ui(6), ty - ui(6), ui(12), ui(12), [msx, msy], pFOCUS, pHOVER, "", THEME.prop_keyframe, 0, [COLORS._main_icon, COLORS._main_icon_on_inner]) == 2) {
@ -1090,14 +1094,13 @@ function Panel_Animation() : PanelContent() constructor {
} #endregion
function drawDopesheetLabelItem(_item, _x, _y, msx = -1, msy = -1, alpha = 1) { #region
var _shf = ui(12);
var _itx = _x + _item.depth * _shf;
var _itx = _x;
var _ity = _y;
var _itw = tool_width - _item.depth * _shf;
var _itw = tool_width;
var _hov = pHOVER && (msy > 0 && msy < dope_sheet_h);
var _foc = pFOCUS;
var _res = _item.item.drawLabel(_itx, _ity, _itw, msx, msy, _hov, _foc, item_dragging, hovering_folder, node_name_type, alpha);
var _res = _item.item.drawLabel(_item, _itx, _ity, _itw, msx, msy, _hov, _foc, item_dragging, hovering_folder, node_name_type, alpha);
if(_res == 1) {
if(mouse_press(mb_left, _foc)) {
@ -1170,17 +1173,16 @@ function Panel_Animation() : PanelContent() constructor {
hovering_order = last_i;
}
var _itx = -1, _ity, _itw;
for( var i = 0, n = array_length(timeline_contents); i < n; i++ ) {
var _cont = timeline_contents[i];
if(!_cont.show) continue;
if(item_dragging != noone && item_dragging.item == _cont.item) {
draw_set_color(COLORS._main_accent);
var _itx = _cont.depth * ui(20);
var _ity = _cont.y;
var _itw = tool_width - _cont.depth * ui(20);
draw_line_width(_itx, _ity, _itx + _itw, _ity, 2);
_itx = _cont.depth * ui(20);
_ity = _cont.y;
_itw = tool_width - _cont.depth * ui(20);
continue;
}
@ -1188,9 +1190,14 @@ function Panel_Animation() : PanelContent() constructor {
if(_cont.type == "node" && _cont.item.show)
for( var j = 0; j < array_length(_cont.animators); j++ )
drawDopesheetLabelAnimator(_cont.node, _cont.animators[j], msx, msy);
drawDopesheetLabelAnimator(_cont, _cont.node, _cont.animators[j], msx, msy);
} //end node loop
if(_itx != -1) {
draw_set_color(COLORS._main_accent);
draw_line_width(_itx, _ity, _itx + _itw, _ity, 2);
}
if(_item_dragging != noone) {
if(point_distance(msx, msy, item_dragging_mx, item_dragging_my) > 4) {
item_dragging = _item_dragging;
@ -1301,9 +1308,12 @@ function Panel_Animation() : PanelContent() constructor {
_cont.h += dope_sheet_node_padding;
var _ks = key_y;
var cc = colorMultiply(_cont.item.color, COLORS.panel_animation_node_outline);
draw_set_color(cc);
draw_rectangle(0, _ks - 1, bar_show_w, _ks + ui(20), false);
if(_cont.item.color_cur > -1) {
draw_set_color(_cont.item.color_dsp);
draw_rectangle(0, _ks - 1, bar_show_w, _ks + ui(20), false);
cc = colorMultiply(_cont.item.color_cur, COLORS.panel_animation_dope_key_bg);
}
key_y += ui(20) + _expand * ui(10);
_cont.h += ui(20);
@ -1319,7 +1329,7 @@ function Panel_Animation() : PanelContent() constructor {
prop.animators[k].y = key_y;
draw_set_color(c_red);
if(_prop == value_focusing) draw_sprite_stretched_ext(THEME.menu_button_mask, 0, 0, key_y - ui(8), bar_show_w, ui(16), COLORS.panel_animation_graph_select, 1);
else if(_prop == value_hovering) draw_sprite_stretched_ext(THEME.menu_button_mask, 0, 0, key_y - ui(6), bar_show_w, ui(12), COLORS.panel_animation_graph_bg, 1);
@ -1334,10 +1344,10 @@ function Panel_Animation() : PanelContent() constructor {
}
}
draw_set_color(cc);
draw_set_alpha(0.5);
draw_rectangle(0, _ks, bar_show_w, key_y, false);
draw_set_alpha(1);
if(_cont.item.color_cur > -1) {
draw_set_color(cc);
draw_rectangle(0, _ks, bar_show_w, key_y - ui(10), false);
}
}
key_y -= _expand * ui(10);

124
scripts/timeline_data/timeline_data.gml
View file

@ -1,9 +1,13 @@
function timelineItem() constructor {
show = true;
color = CDEF.main_grey;
color = -1;
color_cur = -1;
color_dsp = -1;
parent = noone;
static setColor = function(color) { self.color = color; }
static drawLabel = function(_x, _y, _w, _msx, _msy) {}
static removeSelf = function() { #region
@ -28,56 +32,70 @@ function timelineItem() constructor {
function timelineItemNode(node) : timelineItem() constructor {
self.node = node;
static drawLabel = function(_x, _y, _w, _msx, _msy, hover, focus, itHover, fdHover, nameType, alpha) { #region
_x += ui(2);
_w -= ui(4);
static drawLabel = function(_item, _x, _y, _w, _msx, _msy, hover, focus, itHover, fdHover, nameType, alpha = 1) { #region
var _sel = node == PANEL_INSPECTOR.getInspecting();
var lx = _x + _item.depth * ui(12) + ui(2);
var lw = _w - _item.depth * ui(12) - ui(4);
var lh = ui(20);
var res = 0;
var cc = colorMultiply(color, COLORS.panel_animation_dope_bg);
var col = color;
var cxt = _item.contexts;
if(col == -1)
for( var i = array_length(cxt) - 1; i >= 0; i-- ) {
var _context = cxt[i];
if(_context.item.color == -1) continue;
col = _context.item.color;
break;
}
color_cur = col;
if(col == -1) col = CDEF.main_grey;
if(hover && point_in_rectangle(_msx, _msy, _x + ui(20), _y, _x + _w, _y + lh)) {
cc = colorMultiply(color, COLORS.panel_animation_dope_bg_hover);
var cc = colorMultiply(col, COLORS.panel_animation_dope_bg);
if(hover && point_in_rectangle(_msx, _msy, _x + ui(20), _y, _x + _w, _y + lh - 1)) {
cc = colorMultiply(col, COLORS.panel_animation_dope_bg_hover);
res = 1;
}
draw_sprite_stretched_ext(THEME.timeline_node, 0, _x, _y, _w, lh, cc, alpha);
draw_sprite_stretched_ext(THEME.timeline_node, 1, _x, _y, _w, lh, COLORS.panel_animation_node_outline, 1);
color_dsp = cc;
draw_sprite_stretched_ext(THEME.timeline_folder, 0, _x, _y, _w, lh, cc, alpha);
//draw_sprite_stretched_ext(THEME.timeline_node, 1, _x, _y, _w, lh, COLORS.panel_animation_node_outline, 1);
var tx = _x + _w - ui(10);
if(buttonInstant(THEME.button_hide, tx - ui(10), _y, ui(20), ui(20), [ _msx, _msy ], focus, hover,
__txtx("panel_animation_goto", "Go to node"), THEME.animate_node_go, 0, COLORS._main_icon) == 2)
var tx = lx + lw - ui(7);
if(buttonInstant(THEME.button_hide, tx - ui(9), _y + ui(1), ui(18), ui(18), [ _msx, _msy ], focus, hover,
__txtx("panel_animation_goto", "Go to node"), THEME.animate_node_go, 0, col == -1? CDEF.main_grey : col) == 2)
graphFocusNode(node);
if(node == PANEL_INSPECTOR.getInspecting())
draw_sprite_stretched_ext(THEME.timeline_node, 1, _x, _y, _w, lh, COLORS._main_accent, 1);
if(hover && point_in_rectangle(_msx, _msy, _x, _y, _x + ui(20), _y + lh)) {
draw_sprite_ui_uniform(THEME.arrow, show? 3 : 0, _x + ui(10), _y + lh / 2, 1, COLORS._main_icon_light, 1);
if(_sel)
draw_sprite_stretched_ext(THEME.timeline_node, 1, _x, _y + 1, _w, lh - 2, COLORS._main_accent, 1);
var aa = 0.75;
if(hover && point_in_rectangle(_msx, _msy, lx, _y, lx + ui(20), _y + lh)) {
aa = 1;
if(mouse_press(mb_left, focus)) show = !show;
} else
draw_sprite_ui_uniform(THEME.arrow, show? 3 : 0, _x + ui(10), _y + lh / 2, 1, COLORS._main_icon, 0.75);
}
draw_sprite_ui_uniform(THEME.arrow, show? 3 : 0, lx + ui(10), _y + lh / 2, 1, col == -1? CDEF.main_grey : col, aa);
draw_set_text(f_p3, fa_left, fa_center);
var nodeName = $"[{node.name}] ";
var tw = string_width(nodeName);
draw_set_color(itHover == self? COLORS._main_text_accent : COLORS._main_text);
var txx = _x + ui(20);
var txx = lx + ui(24);
if(nameType == 0 || nameType == 1 || node.display_name == "") {
draw_set_alpha(0.4);
draw_set_alpha(0.6);
draw_text_add(txx, _y + lh / 2 - ui(2), nodeName);
txx += tw;
}
draw_set_font(f_p2);
if(nameType == 0 || nameType == 2) {
draw_set_alpha(0.9);
draw_text_add(txx, _y + lh / 2 - ui(2), node.display_name);
}
draw_set_alpha(1);
if(nameType == 0 || nameType == 2)
draw_text_add(txx, _y + lh / 2 - ui(2), node.display_name);
return res;
} #endregion
@ -108,7 +126,6 @@ function timelineItemGroup() : timelineItem() constructor {
name = "";
renaming = false;
tb_name = new textBox(TEXTBOX_INPUT.text, function(val) { name = val; renaming = false; });
contents = [];
static rename = function() {
@ -117,41 +134,66 @@ function timelineItemGroup() : timelineItem() constructor {
run_in(1, function() { tb_name.activate(); });
}
static drawLabel = function(_x, _y, _w, _msx, _msy, hover, focus, itHover, fdHover, nameType, alpha) { #region
var lx = _x + ui(2);
static drawLabel = function(_item, _x, _y, _w, _msx, _msy, hover, focus, itHover, fdHover, nameType, alpha = 1) { #region
var lx = _x + _item.depth * ui(12) + ui(2);
var lw = _w - _item.depth * ui(12) - ui(4);
var lh = ui(20);
var res = 0;
var cc = colorMultiply(color, COLORS.panel_animation_dope_bg);
var hig = true;
var col = color;
var cxt = _item.contexts;
if(col == -1)
for( var i = array_length(cxt) - 1; i >= 0; i-- ) {
var _context = cxt[i];
if(_context.item.color == -1) continue;
col = _context.item.color;
hig = false;
break;
}
color_cur = col;
if(col == -1) col = CDEF.main_grey;
if(hover && point_in_rectangle(_msx, _msy, _x + ui(20), _y, _x + _w, _y + lh)) {
cc = colorMultiply(color, COLORS.panel_animation_dope_bg_hover);
var bnd = hig? merge_color(c_white, COLORS.panel_animation_dope_bg, 0.8) : COLORS.panel_animation_dope_bg;
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, 0.8) : COLORS.panel_animation_dope_bg_hover;
cc = colorMultiply(col, bnd);
res = 1;
}
color_dsp = cc;
draw_sprite_stretched_ext(THEME.timeline_folder, 0, _x, _y, _w, lh, cc, alpha);
draw_sprite_stretched_ext(THEME.timeline_folder, 1, _x, _y, _w, lh, fdHover == self? COLORS._main_accent : COLORS.panel_animation_node_outline, 1);
if(fdHover == self)
draw_sprite_stretched_ext(THEME.timeline_folder, 1, _x, _y, _w, lh, col == -1? COLORS._main_accent : col, 1);
var aa = 0.75;
if(hover && point_in_rectangle(_msx, _msy, lx, _y, lx + ui(20), _y + lh)) {
draw_sprite_ui_uniform(THEME.arrow, show? 3 : 0, lx + ui(10), _y + lh / 2, 1, COLORS._main_icon_light, 1);
aa = 1;
if(mouse_press(mb_left, focus)) show = !show;
} else
draw_sprite_ui_uniform(THEME.arrow, show? 3 : 0, lx + ui(10), _y + lh / 2, 1, COLORS._main_icon, 0.75);
draw_set_text(f_p3, fa_left, fa_center);
}
draw_sprite_ui_uniform(THEME.folder_16, show, lx + ui(10), _y + lh / 2, 1, col == -1? CDEF.main_grey : col, aa);
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 ]);
tb_name.setFont(f_p3);
tb_name.setFont(f_p2);
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(20), _y + lh / 2 - ui(2), name);
draw_text_add(lx + ui(24), _y + lh / 2 - ui(2), name);
}
return res;
} #endregion
static setColor = function(color) {
self.color = color;
}
static addItem = function(_item) { #region
array_push(contents, _item);
_item.parent = self;