color sel ux

This commit is contained in:
Tanasart 2024-05-25 15:07:11 +07:00
parent c20e2ef21d
commit 394549d490
12 changed files with 344 additions and 71 deletions

Binary file not shown.

View file

@ -7,8 +7,9 @@ event_inherited();
title_height = 52;
name = __txtx("gradient_editor_title", "Gradient editor");
gradient = noone;
interactable = true;
gradient = noone;
interactable = true;
drop_target = noone;
key_selecting = noone;
key_dragging = noone;

View file

@ -141,11 +141,11 @@ if(!ready) exit;
draw_sprite_ui_uniform(THEME.arrow, 0, dialog_x + dialog_w - ui(20), yy + hght / 2, 1, COLORS._main_icon);
} else if(_menuItem.hotkey != noone) {
var _key = find_hotkey(_menuItem.hotkey[0], _menuItem.hotkey[1]);
if(_key) {
draw_set_text(f_p1, fa_right, fa_center, COLORS._main_text_sub);
draw_set_alpha(_menuItem.active * 0.75 + 0.25);
draw_text(dialog_x + dialog_w - ui(16), yy + hght / 2, key_get_name(_key.key, _key.modi));
draw_set_alpha(1);
var _hx = dialog_x + dialog_w - ui(16);
var _hy = yy + hght / 2 + ui(2);
hotkey_draw(key_get_name(_key.key, _key.modi), _hx, _hy);
}
}
}

View file

@ -13,6 +13,7 @@ event_inherited();
index_selecting = 0;
index_dragging = -1;
interactable = true;
drop_target = noone;
index_drag_x = 0; index_drag_x_to = 0;
index_drag_y = 0; index_drag_y_to = 0;

View file

@ -4,6 +4,9 @@ function buttonColor(_onApply, dialog = noone) : widget() constructor {
current_value = 0;
triggered = false;
hover_hex = 0;
hover_wid = ui(24);
onColorPick = function() {
var dialog = dialogCall(o_dialog_color_selector, WIN_W / 2, WIN_H / 2);
dialog.selector.dropper_active = true;
@ -99,51 +102,88 @@ function buttonColor(_onApply, dialog = noone) : widget() constructor {
_cw -= ui(8);
}
var hoverRect = point_in_rectangle(_m[0], _m[1], _x, _y, _x + _cw, _y + _h);
var _bx = _x + ui(2);
var _by = _y + ui(2);
var _bw = _cw - ui(4);
var _bh = _h - ui(4);
var _bww = _bw - hover_hex * hover_wid;
var click = false;
if(ihover && hoverRect) {
var hoverRect = ihover && point_in_rectangle(_m[0], _m[1], _x, _y, _x + _bww, _y + _h);
if(hoverRect) {
draw_sprite_stretched(THEME.button_def, 1, _x, _y, _cw, _h);
if(mouse_press(mb_left, iactive)) {
if(mouse_press(mb_left, iactive))
trigger();
click = true;
}
if(mouse_click(mb_left, iactive)) {
draw_sprite_stretched(THEME.button_def, 2, _x, _y, _cw, _h);
draw_sprite_stretched_ext(THEME.button_def, 3, _x, _y, _w, _h, COLORS._main_accent, 1);
draw_sprite_stretched_ext(THEME.button_def, 3, _x, _y, _cw, _h, COLORS._main_accent, 1);
}
} else {
draw_sprite_stretched(THEME.button_def, 0, _x, _y, _cw, _h);
if(mouse_press(mb_left)) deactivate();
}
var _bx = _x + ui(2);
var _by = _y + ui(2);
var _bw = _cw - ui(4);
var _bh = _h - ui(4);
if(is_array(current_color))
drawPalette(current_color, _bx, _by, _bw, _bh);
else if(is_real(current_color))
draw_sprite_stretched_ext(THEME.palette_mask, 1, _bx, _by, _bw, _bh, current_color, 1);
else if(is_numeric(current_color)) {
var _hvb = ihover && point_in_rectangle(_m[0], _m[1], _x, _y, _x + _cw, _y + _h);
hover_hex = lerp_float(hover_hex, _hvb, 4);
var _bcx = _bx + _bw - ui(12);
var _bcy = _by + _bh / 2;
var _baa = 0.5;
var _htg = ui(12);
var _bcc = COLORS._main_icon;
if(ihover && hover_hex > 0) {
var _dis = false;
if(ihover && point_in_rectangle(_m[0], _m[1], _bx + _bww, _y, _bx + _bw, _y + _h)) {
_htg = _bw - _bh;
_dis = true;
}
if(_dis && point_in_rectangle(_m[0], _m[1], _bx + _bw - ui(24), _y, _bx + _bw, _y + _h)) {
_baa = 1.;
if(mouse_press(mb_left, iactive)) {
if(interactable && key_mod_press(SHIFT)) {
var _hx = clipboard_get_text();
var _cc = color_from_rgb(_hx);
if(_cc >= 0) onApply(_cc);
} else
clipboard_set_text(color_get_hex(current_color));
}
if(mouse_click(mb_left, iactive))
_bcc = COLORS._main_icon_light;
}
}
hover_wid = lerp_float(hover_wid, _htg, 5);
if(hover_hex > 0) {
draw_set_text(f_p1, fa_right, fa_center, COLORS._main_text_sub);
draw_text_add(_bx + _bw - ui(28), _y + _h / 2 + ui(1), color_get_hex(current_color));
draw_sprite_ext(interactable && key_mod_press(SHIFT)? THEME.paste_20 : THEME.copy_20, 0, _bcx, _bcy, 1, 1, 0, _bcc, _baa);
}
else if(is_int64(current_color)) {
var _a = _color_get_alpha(current_color);
if(_a == 1) {
draw_sprite_stretched_ext(THEME.palette_mask, 1, _bx, _by, _bw, _bh, current_color, 1);
draw_sprite_stretched_ext(THEME.palette_mask, 1, _bx, _by, _bww, _bh, current_color, 1);
} else {
draw_sprite_stretched_ext(THEME.palette_mask, 1, _bx, _by, _bw, _bh - ui(8), current_color, 1);
draw_sprite_stretched_ext(THEME.palette_mask, 1, _bx, _by, _bww, _bh - ui(8), current_color, 1);
draw_sprite_stretched_ext(THEME.palette_mask, 1, _bx, _by + _bh - ui(6), _bw, ui(6), c_black, 1);
draw_sprite_stretched_ext(THEME.palette_mask, 1, _bx, _by + _bh - ui(6), _bw * _a, ui(6), c_white, 1);
draw_sprite_stretched_ext(THEME.palette_mask, 1, _bx, _by + _bh - ui(6), _bww, ui(6), c_black, 1);
draw_sprite_stretched_ext(THEME.palette_mask, 1, _bx, _by + _bh - ui(6), _bww * _a, ui(6), c_white, 1);
}
}
if(WIDGET_CURRENT == self)
draw_sprite_stretched_ext(THEME.widget_selecting, 0, _x - ui(3), _y - ui(3), _w + ui(6), _h + ui(6), COLORS._main_accent, 1);
if(WIDGET_CURRENT == self || (instance_exists(o_dialog_color_selector) && o_dialog_color_selector.drop_target == self))
draw_sprite_stretched_ext(THEME.widget_selecting, 0, _x, _y, _cw, _h, COLORS._main_accent, 1);
if(DRAGGING && DRAGGING.type == "Color" && hover && hoverRect) {
draw_sprite_stretched_ext(THEME.ui_panel_active, 0, _x, _y, _cw, _h, COLORS._main_value_positive, 1);

View file

@ -5,6 +5,12 @@ function buttonGradient(_onApply, dialog = noone) : widget() constructor {
current_gradient = noone;
side_button = noone;
expanded = false;
drag_color_index = -1;
edit_color_index = -1;
edit_color_mx = 0;
edit_color_sx = 0;
function apply(value) { #region
if(!interactable) return;
onApply(value);
@ -13,13 +19,31 @@ function buttonGradient(_onApply, dialog = noone) : widget() constructor {
static trigger = function() { #region
var dialog = dialogCall(o_dialog_gradient, WIN_W / 2, WIN_H / 2);
dialog.setDefault(current_gradient.clone());
dialog.onApply = apply;
dialog.onApply = apply;
dialog.interactable = interactable;
dialog.drop_target = self;
if(parentDialog)
parentDialog.addChildren(dialog);
} #endregion
static triggerSingle = function(_index) { #region
edit_color_index = _index;
var dialog = dialogCall(o_dialog_color_selector, WIN_W / 2, WIN_H / 2);
dialog.setDefault(edit_color_index.value);
dialog.selector.onApply = editColor;
dialog.onApply = editColor;
dialog.interactable = interactable;
} #endregion
function editColor(col) { #region
if(edit_color_index == -1) return;
edit_color_index.value = col;
apply(current_gradient);
} #endregion
static drawParam = function(params) { return draw(params.x, params.y, params.w, params.h, params.data, params.m); }
static draw = function(_x, _y, _w, _h, _gradient, _m) { #region
@ -44,7 +68,7 @@ function buttonGradient(_onApply, dialog = noone) : widget() constructor {
if(is_array(_gradient)) {
if(array_length(_gradient) == 0) return 0;
h = ui(8) + array_length(_gradient) * _gh;
h = ui(4) + array_length(_gradient) * _gh;
current_gradient = _gradient[0];
} else {
h = _h;
@ -53,14 +77,20 @@ function buttonGradient(_onApply, dialog = noone) : widget() constructor {
if(!is_instanceof(current_gradient, gradientObject))
return 0;
var click = false;
var hoverRect = point_in_rectangle(_m[0], _m[1], _x, _y, _x + _w, _y + h);
if(ihover && hoverRect) {
var _drawSingle = !is_array(_gradient) && is_instanceof(_gradient, gradientObject);
var _ggw = _drawSingle? _gw - ui(24) : _w;
var _ggx = _drawSingle? _x + ui(2) + ui(24) : _x;
var hoverRect = ihover && point_in_rectangle(_m[0], _m[1], _ggx, _y, _ggx + _ggw, _y + h);
if(_drawSingle && expanded)
h = _h + ui(22);
if(hoverRect) {
draw_sprite_stretched(THEME.button_def, 1, _x, _y, _w, h);
if(mouse_press(mb_left, iactive)) {
if(mouse_press(mb_left, iactive))
trigger();
click = true;
}
if(mouse_click(mb_left, iactive)) {
draw_sprite_stretched(THEME.button_def, 2, _x, _y, _w, h);
draw_sprite_stretched_ext(THEME.button_def, 3, _x, _y, _w, h, COLORS._main_accent, 1);
@ -70,19 +100,111 @@ function buttonGradient(_onApply, dialog = noone) : widget() constructor {
if(mouse_press(mb_left)) deactivate();
}
if(!is_array(_gradient)) _gradient = [ _gradient ];
if(_drawSingle) {
var _ggh = _gh;
var _ggy = _y + ui(2);
for( var i = 0, n = array_length(_gradient); i < n; i++ ) {
var _grad = _gradient[i];
var _gx = _x + ui(2);
var _gy = _y + ui(2) + i * _gh;
var _bbx = _x + ui(12);
var _bby = _y + _ggh / 2 + ui(2);
if(is_instanceof(_grad, gradientObject))
_grad.draw(_gx, _gy, _gw, _gh);
var _bba = 0.5;
var _bbc = COLORS._main_icon;
if(hover && point_in_rectangle(_m[0], _m[1], _x, _y, _x + ui(24), _y + _ggh)) {
_bba = 1;
if(mouse_press(mb_left))
expanded = !expanded;
if(mouse_click(mb_left))
_bbc = COLORS._main_icon_light;
}
draw_sprite_ext(THEME.arrow, expanded? 3 : 0, _bbx, _bby + ui(expanded), 1, 1, 0, _bbc, _bba);
_gradient.draw(_ggx, _ggy, _ggw, _ggh);
if(expanded) {
var _cx = _x + ui(2);
var _cy = _y + _ggh + ui(4);
var _cw = _w - ui(4);
var _ch = h - _ggh - ui(4 + 2);
var _ks = ui(16);
draw_sprite_stretched_ext(THEME.menu_button_mask, 0, _ggx, _cy, _ggw, _ch, CDEF.main_mdblack, 1);
for (var i = 0, n = array_length(_gradient.keys); i < n; i++) {
var _k = _gradient.keys[i];
var _kx = _ggx + _k.time * _ggw;
var _ky = _ggy + _ggh + _ks - ui(4);
if(drag_color_index == _k || edit_color_index == _k) {
draw_set_color(COLORS._main_accent);
} else {
draw_set_color(c_white);
draw_set_alpha(0.5);
}
draw_line_round(_kx, _ggy + _ggh - ui(8), _kx, _ky, 1);
draw_set_alpha(1);
_kx = clamp(_kx, _ggx + _ks / 2, _ggx + _ggw - _ks / 2);
draw_sprite_stretched_ext(THEME.menu_button_mask, 0, _kx - _ks / 2, _ky - _ks / 2, _ks, _ks, _k.value, 1);
var _ka = 0.3;
if(hover && point_in_rectangle(_m[0], _m[1], _kx - _ks / 2, _ky - _ks / 2, _kx + _ks / 2, _ky + _ks / 2)) {
_ka = 1;
if(mouse_press(mb_left, active)) {
drag_color_index = _k;
edit_color_mx = _m[0];
edit_color_sx = _k.time;
}
if(DOUBLE_CLICK)
triggerSingle(_k);
}
if(drag_color_index == _k || edit_color_index == _k) {
draw_sprite_stretched_ext(THEME.menu_button_mask, 1, _kx - _ks / 2, _ky - _ks / 2, _ks, _ks, COLORS._main_accent, 1);
} else {
BLEND_ADD
draw_sprite_stretched_ext(THEME.menu_button_mask, 1, _kx - _ks / 2, _ky - _ks / 2, _ks, _ks, c_white, _ka);
BLEND_NORMAL
}
}
}
if(drag_color_index != -1) {
var _val = edit_color_sx + (_m[0] - edit_color_mx) / _ggw;
_val = clamp(_val, 0, 1);
if(drag_color_index.time != _val) {
drag_color_index.time = _val;
_gradient.refresh();
}
if(mouse_release(mb_left)) {
drag_color_index = -1;
_gradient.refresh();
apply(_gradient);
}
}
} else {
for( var i = 0, n = array_length(_gradient); i < n; i++ ) {
var _grad = _gradient[i];
var _gx = _x + ui(2);
var _gy = _y + ui(2) + i * _gh;
if(is_instanceof(_grad, gradientObject))
_grad.draw(_gx, _gy, _gw, _gh);
}
}
if(WIDGET_CURRENT == self)
draw_sprite_stretched_ext(THEME.widget_selecting, 0, _x - ui(3), _y - ui(3), _w + ui(6), h + ui(6), COLORS._main_accent, 1);
if(WIDGET_CURRENT == self || (instance_exists(o_dialog_gradient) && o_dialog_gradient.drop_target == self))
draw_sprite_stretched_ext(THEME.widget_selecting, 0, _x, _y, _w, h, COLORS._main_accent, 1);
if(DRAGGING && DRAGGING.type == "Gradient" && hover && hoverRect) {
draw_sprite_stretched_ext(THEME.ui_panel_active, 0, _x, _y, _w, h, COLORS._main_value_positive, 1);

View file

@ -5,6 +5,9 @@ function buttonPalette(_onApply, dialog = noone) : widget() constructor {
current_palette = [];
side_button = noone;
expanded = false;
edit_color_index = -1;
function apply(value) { #region
if(!interactable) return;
onApply(value);
@ -13,13 +16,31 @@ function buttonPalette(_onApply, dialog = noone) : widget() constructor {
static trigger = function() { #region
var dialog = dialogCall(o_dialog_palette, WIN_W / 2, WIN_H / 2);
dialog.setDefault(current_palette);
dialog.onApply = apply;
dialog.onApply = apply;
dialog.interactable = interactable;
dialog.drop_target = self;
if(parentDialog)
parentDialog.addChildren(dialog);
} #endregion
static triggerSingle = function(_index) { #region
edit_color_index = _index;
current_palette = array_clone(current_palette);
var dialog = dialogCall(o_dialog_color_selector, WIN_W / 2, WIN_H / 2);
dialog.setDefault(current_palette[edit_color_index]);
dialog.selector.onApply = editColor;
dialog.onApply = editColor;
dialog.interactable = interactable;
} #endregion
function editColor(col) { #region
if(edit_color_index == -1) return;
current_palette[edit_color_index] = col;
apply(current_palette);
} #endregion
static drawParam = function(params) { return draw(params.x, params.y, params.w, params.h, params.data, params.m); }
static draw = function(_x, _y, _w, _h, _color, _m) { #region
@ -45,7 +66,7 @@ function buttonPalette(_onApply, dialog = noone) : widget() constructor {
if(array_length(_color) > 0 && is_array(_color[0])) {
if(array_length(_color[0]) == 0) return 0;
h = ui(8) + array_length(_color) * _ph;
h = ui(4) + array_length(_color) * _ph;
current_palette = _color[0];
} else {
h = _h;
@ -54,8 +75,17 @@ function buttonPalette(_onApply, dialog = noone) : widget() constructor {
if(!is_array(current_palette) || array_empty(current_palette) || is_array(current_palette[0]))
return 0;
var hoverRect = point_in_rectangle(_m[0], _m[1], _x, _y, _x + _w, _y + h);
if(ihover && hoverRect) {
var _colr_h = ui(16);
var _drawSingle = !is_array(_color[0]);
var _ppw = _drawSingle? _pw - ui(24) : _w;
var _ppx = _drawSingle? _x + ui(2) + ui(24) : _x;
var hoverRect = ihover && point_in_rectangle(_m[0], _m[1], _ppx, _y, _ppx + _ppw, _y + h);
if(_drawSingle && expanded)
h = _h + array_length(_color) * _colr_h + ui(2);
if(hoverRect) {
draw_sprite_stretched(THEME.button_def, 1, _x, _y, _w, h);
if(mouse_press(mb_left, iactive))
trigger();
@ -69,18 +99,71 @@ function buttonPalette(_onApply, dialog = noone) : widget() constructor {
if(mouse_press(mb_left)) deactivate();
}
if(!is_array(_color[0])) _color = [ _color ];
if(_drawSingle) {
var _pph = _ph;
var _ppy = _y + ui(2);
for( var i = 0, n = array_length(_color); i < n; i++ ) {
var _pal = _color[i];
var _px = _x + ui(2);
var _py = _y + ui(2) + i * _ph;
var _bbx = _x + ui(12);
var _bby = _y + _pph / 2 + ui(2);
if(is_array(_pal)) drawPalette(_pal, _px, _py, _pw, _ph);
var _bba = 0.5;
var _bbc = COLORS._main_icon;
if(hover && point_in_rectangle(_m[0], _m[1], _x, _y, _x + ui(24), _y + _pph)) {
_bba = 1;
if(mouse_press(mb_left))
expanded = !expanded;
if(mouse_click(mb_left))
_bbc = COLORS._main_icon_light;
}
draw_sprite_ext(THEME.arrow, expanded? 3 : 0, _bbx, _bby + ui(expanded), 1, 1, 0, _bbc, _bba);
if(expanded) {
var _cx = _x + ui(2);
var _cy = _y + _pph + ui(4);
var _cw = _w - ui(4);
var _ch = h - _pph - ui(4 + 2);
draw_sprite_stretched_ext(THEME.menu_button_mask, 0, _cx, _cy, _cw, _ch, CDEF.main_mdblack, 1);
for (var i = 0, n = array_length(_color); i < n; i++) {
var _c = _color[i];
var _ccx = _cx;
var _ccy = _cy + i * _colr_h;
var _ccw = _cw;
var _cch = _colr_h;
draw_sprite_stretched_ext(THEME.palette_mask, 1, _ccx + ui(2), _ccy + ui(2), _ccw - ui(4), _cch - ui(4), _c, 1);
if(hover && point_in_rectangle(_m[0], _m[1], _ccx, _ccy, _ccx + _ccw, _ccy + _cch - 1)) {
BLEND_ADD
draw_sprite_stretched_ext(THEME.menu_button_mask, 1, _ccx + ui(2), _ccy + ui(2), _ccw - ui(4), _cch - ui(4), c_white, .3);
BLEND_NORMAL
if(mouse_press(mb_left, active))
triggerSingle(i);
}
}
}
drawPalette(_color, _ppx, _ppy, _ppw, _pph);
} else {
expanded = false;
for( var i = 0, n = array_length(_color); i < n; i++ ) {
var _pal = _color[i];
var _px = _x + ui(2);
var _py = _y + ui(2) + i * _ph;
if(is_array(_pal)) drawPalette(_pal, _px, _py, _pw, _ph);
}
}
if(WIDGET_CURRENT == self)
draw_sprite_stretched_ext(THEME.widget_selecting, 0, _x - ui(3), _y - ui(3), _w + ui(6), h + ui(6), COLORS._main_accent, 1);
if(WIDGET_CURRENT == self || (instance_exists(o_dialog_palette) && o_dialog_palette.drop_target == self))
draw_sprite_stretched_ext(THEME.widget_selecting, 0, _x, _y, _w, h, COLORS._main_accent, 1);
if(DRAGGING && DRAGGING.type == "Palette" && hover && hoverRect) {
draw_sprite_stretched_ext(THEME.ui_panel_active, 0, _x, _y, _w, h, COLORS._main_value_positive, 1);

View file

@ -6,6 +6,8 @@ enum GRADIENT_INTER {
srgb
}
global.gradient_sort_list = ds_priority_create();
function gradientKey(time, value) constructor { #region
self.time = time;
self.value = value;
@ -26,6 +28,17 @@ function gradientObject(color = c_black) constructor { #region
caches = array_create(cacheRes);
keyLength = 0;
static refresh = function() {
ds_priority_clear(global.gradient_sort_list);
for (var i = 0, n = array_length(keys); i < n; i++)
ds_priority_add(global.gradient_sort_list, keys[i], keys[i].time);
for (var i = 0, n = array_length(keys); i < n; i++)
keys[i] = ds_priority_delete_min(global.gradient_sort_list);
cache();
}
static clone = function() { #region
var g = new gradientObject();
for( var i = 0, n = array_length(keys); i < n; i++ )

View file

@ -131,4 +131,15 @@
return HOTKEYS[? _context][| j];
}
} #endregion
#endregion
#endregion
function hotkey_draw(keyStr, _x, _y) {
if(keyStr == "") return;
draw_set_text(f_p1, fa_right, fa_center, COLORS._main_text_sub);
var _tw = string_width( keyStr);
var _th = string_height(keyStr);
draw_sprite_stretched_ext(THEME.ui_panel_fg, 1, _x - _tw - ui(4), _y - _th / 2 - ui(3), _tw + ui(8), _th + ui(3), COLORS._main_text_sub, 0.5);
draw_text(_x, _y, keyStr);
}

View file

@ -11,12 +11,12 @@
var ind = -1;
switch(query) {
case "square" : ind = 0; break;
case "circle" : ind = 1; break;
case "triangle" : ind = 2; node.inputs[| 4].setValue(3); break;
case "pentagon" : ind = 2; node.inputs[| 4].setValue(5); break;
case "hexagon" : ind = 2; node.inputs[| 4].setValue(6); break;
case "ring" : ind = 9; break;
case "square" : ind = array_find_string(node.shape_types, "rectangle"); break;
case "circle" : ind = array_find_string(node.shape_types, "ellipse"); break;
case "ring" : ind = array_find_string(node.shape_types, "donut"); break;
case "triangle" : ind = array_find_string(node.shape_types, "regular polygon"); node.inputs[| 4].setValue(3); break;
case "pentagon" : ind = array_find_string(node.shape_types, "regular polygon"); node.inputs[| 4].setValue(5); break;
case "hexagon" : ind = array_find_string(node.shape_types, "regular polygon"); node.inputs[| 4].setValue(6); break;
default : ind = array_find_string(node.shape_types, query);
}

View file

@ -43,10 +43,17 @@ function color_get_hex(color, alpha = true) {
}
function color_from_rgb(str) {
if(string_length(str) < 6) return -1;
var _r = string_hexadecimal(string_copy(str, 1, 2));
var _g = string_hexadecimal(string_copy(str, 3, 2));
var _b = string_hexadecimal(string_copy(str, 5, 2));
if(string_length(str) == 8) {
var _a = string_hexadecimal(string_copy(str, 7, 2));
return make_color_rgba(_r, _g, _b, _a);
}
return make_color_rgb(_r, _g, _b);
}

View file

@ -26,13 +26,8 @@ function tooltipHotkey(text, context = "", name = "") constructor {
draw_set_color(COLORS._main_text);
draw_text_line(mx + ui(8), my + ui(8), text, -1, tw);
draw_set_text(f_p1, fa_right, fa_center, COLORS._main_text_sub);
var _tw = string_width( keyStr);
var _th = string_height(keyStr);
var _hx = mx + tw + ui(6);
var _hy = my + th / 2 + ui(10);
draw_sprite_stretched_ext(THEME.ui_panel_fg, 1, _hx - _tw - ui(4), _hy - _th / 2 - ui(3), _tw + ui(8), _th + ui(3), COLORS._main_text_sub, 0.5);
draw_text(_hx, _hy, keyStr);
hotkey_draw(keyStr, _hx, _hy);
}
}