Fix #123332: VSE strip transform handles look tweaks

Current look of VSE timeline view strip transformation handles makes them
somewhat "too narrow", especially after recent changes that made them
more narrow than before (handle tweaking feature) and a strip visual change
that made strip outline not go outside of strip bounds. They are now just
2px wide, effectively.

This changes their look as outlined in #123332 design task:
- The inset dark line is no longer over the handles, but rather "inside"
  of them (except when handles are semitransparent, i.e. for strips that
  are not selected).
- The handles themselves have rounded corners.

Pull Request: https://projects.blender.org/blender/blender/pulls/123391
This commit is contained in:
Aras Pranckevicius 2024-06-19 11:49:20 +02:00 committed by Aras Pranckevicius
parent 50bb98fba5
commit 7e61f14a88
3 changed files with 71 additions and 44 deletions

@ -1435,33 +1435,24 @@ static void draw_strips_foreground(TimelineDrawContext *timeline_ctx,
/* Handles on left/right side. */
if (!locked && ED_sequencer_can_select_handle(scene, strip.seq, timeline_ctx->v2d)) {
data.flags |= GPU_SEQ_FLAG_HANDLES;
const bool selected_l = ED_sequencer_handle_is_selected(strip.seq, SEQ_HANDLE_LEFT);
const bool selected_r = ED_sequencer_handle_is_selected(strip.seq, SEQ_HANDLE_RIGHT);
const bool show_l = show_handles || (selected && selected_l);
const bool show_r = show_handles || (selected && selected_r);
/* Left handle color. */
col[0] = col[1] = col[2] = 0;
col[3] = 50;
if (selected && selected_l) {
UI_GetThemeColor4ubv(active ? TH_SEQ_ACTIVE : TH_SEQ_SELECTED, col);
const bool selected_l = selected &&
ED_sequencer_handle_is_selected(strip.seq, SEQ_HANDLE_LEFT);
const bool selected_r = selected &&
ED_sequencer_handle_is_selected(strip.seq, SEQ_HANDLE_RIGHT);
const bool show_l = show_handles || selected_l;
const bool show_r = show_handles || selected_r;
if (show_l) {
data.flags |= GPU_SEQ_FLAG_DRAW_LH;
}
if (!show_l) {
col[3] = 0;
if (show_r) {
data.flags |= GPU_SEQ_FLAG_DRAW_RH;
}
data.col_handle_left = color_pack(col);
/* Right handle color. */
col[0] = col[1] = col[2] = 0;
col[3] = 50;
if (selected && selected_r) {
UI_GetThemeColor4ubv(active ? TH_SEQ_ACTIVE : TH_SEQ_SELECTED, col);
if (selected_l) {
data.flags |= GPU_SEQ_FLAG_SELECTED_LH;
}
if (!show_r) {
col[3] = 0;
if (selected_r) {
data.flags |= GPU_SEQ_FLAG_SELECTED_RH;
}
data.col_handle_right = color_pack(col);
}
}
strips_batch.flush_batch();

@ -103,8 +103,14 @@ enum eGPUSeqFlags : uint32_t {
GPU_SEQ_FLAG_SELECTED = (1u << 7u),
GPU_SEQ_FLAG_ACTIVE = (1u << 8u),
GPU_SEQ_FLAG_HIGHLIGHT = (1u << 9u),
GPU_SEQ_FLAG_HANDLES = (1u << 10u),
GPU_SEQ_FLAG_BORDER = (1u << 11u),
GPU_SEQ_FLAG_BORDER = (1u << 10u),
GPU_SEQ_FLAG_SELECTED_LH = (1u << 11u),
GPU_SEQ_FLAG_SELECTED_RH = (1u << 12u),
GPU_SEQ_FLAG_DRAW_LH = (1u << 13u),
GPU_SEQ_FLAG_DRAW_RH = (1u << 14u),
GPU_SEQ_FLAG_ANY_HANDLE = GPU_SEQ_FLAG_SELECTED_LH | GPU_SEQ_FLAG_SELECTED_RH |
GPU_SEQ_FLAG_DRAW_LH | GPU_SEQ_FLAG_DRAW_RH
};
/* VSE per-strip data for timeline rendering. */
@ -124,7 +130,7 @@ struct SeqStripDrawData {
uint col_outline;
uint col_color_band;
uint col_transition_in, col_transition_out;
uint col_handle_left, col_handle_right;
float _pad0, _pad1;
};
BLI_STATIC_ASSERT_ALIGN(SeqStripDrawData, 16)
BLI_STATIC_ASSERT(sizeof(SeqStripDrawData) * GPU_SEQ_STRIP_DRAW_DATA_LEN <= 16384,

@ -64,8 +64,33 @@ void main()
radius = 0.0;
}
bool border = (strip.flags & GPU_SEQ_FLAG_BORDER) != 0;
bool selected = (strip.flags & GPU_SEQ_FLAG_SELECTED) != 0;
float outline_width = selected ? 2.0 : 1.0;
/* Distance to whole strip shape. */
float sdf = sdf_rounded_box(pos - center, size, radius);
/* Distance to inner part when handles are taken into account. */
float sdf_inner = sdf;
if ((strip.flags & GPU_SEQ_FLAG_ANY_HANDLE) != 0) {
float handle_width = strip.handle_width * view_to_pixel.x;
/* Take left/right handle from horizontal sides. */
if ((strip.flags & GPU_SEQ_FLAG_DRAW_LH) != 0) {
pos1.x += handle_width;
}
if ((strip.flags & GPU_SEQ_FLAG_DRAW_RH) != 0) {
pos2.x -= handle_width;
}
/* Reduce vertical size by outline width. */
pos1.y += context_data.pixelsize * outline_width;
pos2.y -= context_data.pixelsize * outline_width;
size = (pos2 - pos1) * 0.5;
center = (pos1 + pos2) * 0.5;
sdf_inner = sdf_rounded_box(pos - center, size, radius);
}
vec4 col = vec4(0.0);
/* Background. */
@ -134,34 +159,39 @@ void main()
}
/* Handles. */
if ((strip.flags & GPU_SEQ_FLAG_HANDLES) != 0) {
float handle_width = strip.handle_width * view_to_pixel.x;
if (pos.x >= pos1.x && pos.x < pos1.x + handle_width) {
col = blend_color(col, unpackUnorm4x8(strip.col_handle_left));
vec4 col_outline = unpackUnorm4x8(strip.col_outline);
if ((strip.flags & GPU_SEQ_FLAG_ANY_HANDLE) != 0) {
bool left_side = pos.x < center.x;
uint handle_flag = left_side ? GPU_SEQ_FLAG_SELECTED_LH : GPU_SEQ_FLAG_SELECTED_RH;
bool selected_handle = (strip.flags & handle_flag) != 0;
/* Blend in handle color in between strip shape and inner handle shape. */
if (sdf <= 0.0 && sdf_inner >= 0.0) {
vec4 hcol = selected_handle ? col_outline : vec4(0, 0, 0, 0.2);
hcol.a *= clamp(sdf_inner, 0.0, 1.0);
col = blend_color(col, hcol);
}
if (pos.x > pos2.x - handle_width && pos.x <= pos2.x) {
col = blend_color(col, unpackUnorm4x8(strip.col_handle_right));
/* For an unselected handle, no longer take it into account
* for the "inner" distance. */
if (!selected_handle) {
sdf_inner = sdf;
}
}
/* Inset 1px line with background color. */
if (border && selected) {
/* Inset line should be inside regular border or inside the handles. */
float d = max(sdf_inner - 2.0 * context_data.pixelsize, sdf);
col = add_outline(d, 2.0, 3.0, col, unpackUnorm4x8(context_data.col_back));
}
/* Outside of strip rounded rectangle? */
if (sdf > 0.0) {
col = vec4(0.0);
}
/* Outline / border. */
if ((strip.flags & GPU_SEQ_FLAG_BORDER) != 0) {
bool selected = (strip.flags & GPU_SEQ_FLAG_SELECTED) != 0;
vec4 col_outline = unpackUnorm4x8(strip.col_outline);
if (selected) {
/* Inset 1px line with background color. */
col = add_outline(sdf, 2.0, 3.0, col, unpackUnorm4x8(context_data.col_back));
/* 2px wide outline. */
col = add_outline(sdf, 0.0, 2.0, col, col_outline);
}
else {
col = add_outline(sdf, 0.0, 1.0, col, col_outline);
}
if (border) {
col = add_outline(sdf, 0.0, outline_width, col, col_outline);
}
fragColor = col;