ui_box.ts 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. let ui_box_show: bool = false;
  2. let ui_box_draggable: bool = true;
  3. let ui_box_hwnd: zui_handle_t = zui_handle_create();
  4. let ui_box_title: string = "";
  5. let ui_box_text: string = "";
  6. let ui_box_commands: (ui: zui_t)=>void = null;
  7. let ui_box_click_to_hide: bool = true;
  8. let ui_box_modalw: i32 = 400;
  9. let ui_box_modalh: i32 = 170;
  10. let ui_box_modal_on_hide: ()=>void = null;
  11. let ui_box_draws: i32 = 0;
  12. let ui_box_copyable: bool = false;
  13. ///if (krom_android || krom_ios)
  14. let ui_box_tween_alpha: f32 = 0.0;
  15. ///end
  16. function ui_box_init() {
  17. ui_box_hwnd.redraws = 2;
  18. ui_box_hwnd.drag_x = 0;
  19. ui_box_hwnd.drag_y = 0;
  20. ui_box_show = true;
  21. ui_box_draws = 0;
  22. ui_box_click_to_hide = true;
  23. }
  24. function ui_box_render() {
  25. if (!ui_menu_show) {
  26. let ui: zui_t = base_ui_box;
  27. let in_use: bool = ui.combo_selected_handle_ptr != 0;
  28. let is_escape: bool = keyboard_started("escape");
  29. if (ui_box_draws > 2 && (ui.input_released || is_escape) && !in_use && !ui.is_typing) {
  30. let appw: i32 = sys_width();
  31. let apph: i32 = sys_height();
  32. let mw: i32 = math_floor(ui_box_modalw * zui_SCALE(ui));
  33. let mh: i32 = math_floor(ui_box_modalh * zui_SCALE(ui));
  34. let left: f32 = (appw / 2 - mw / 2) + ui_box_hwnd.drag_x;
  35. let right: f32 = (appw / 2 + mw / 2) + ui_box_hwnd.drag_x;
  36. let top: f32 = (apph / 2 - mh / 2) + ui_box_hwnd.drag_y;
  37. let bottom: f32 = (apph / 2 + mh / 2) + ui_box_hwnd.drag_y;
  38. let mx: i32 = mouse_x;
  39. let my: i32 = mouse_y;
  40. if ((ui_box_click_to_hide && (mx < left || mx > right || my < top || my > bottom)) || is_escape) {
  41. ui_box_hide();
  42. }
  43. }
  44. }
  45. if (config_raw.touch_ui) { // Darken bg
  46. ///if (krom_android || krom_ios)
  47. g2_set_color(color_from_floats(0, 0, 0, ui_box_tween_alpha));
  48. ///else
  49. g2_set_color(color_from_floats(0, 0, 0, 0.5));
  50. ///end
  51. g2_fill_rect(0, 0, sys_width(), sys_height());
  52. }
  53. g2_end();
  54. let ui: zui_t = base_ui_box;
  55. let appw: i32 = sys_width();
  56. let apph: i32 = sys_height();
  57. let mw: i32 = math_floor(ui_box_modalw * zui_SCALE(ui));
  58. let mh: i32 = math_floor(ui_box_modalh * zui_SCALE(ui));
  59. if (mw > appw) {
  60. mw = appw;
  61. }
  62. if (mh > apph) {
  63. mh = apph;
  64. }
  65. let left: i32 = math_floor(appw / 2 - mw / 2);
  66. let top: i32 = math_floor(apph / 2 - mh / 2);
  67. if (ui_box_commands == null) {
  68. zui_begin(ui);
  69. if (zui_window(ui_box_hwnd, left, top, mw, mh, ui_box_draggable)) {
  70. ui._y += 10;
  71. let tab_vertical: bool = config_raw.touch_ui;
  72. if (zui_tab(zui_handle(__ID__), ui_box_title, tab_vertical)) {
  73. let htext: zui_handle_t = zui_handle(__ID__);
  74. htext.text = ui_box_text;
  75. ui_box_copyable ?
  76. zui_text_area(htext, zui_align_t.LEFT, false) :
  77. zui_text(ui_box_text);
  78. zui_end_element();
  79. ///if (krom_windows || krom_linux || krom_darwin)
  80. if (ui_box_copyable) {
  81. let row: f32[] = [1 / 3, 1 / 3, 1 / 3];
  82. zui_row(row);
  83. }
  84. else {
  85. let row: f32[] = [2 / 3, 1 / 3];
  86. zui_row(row);
  87. }
  88. ///else
  89. let row: f32[] = [2 / 3, 1 / 3];
  90. zui_row(row);
  91. ///end
  92. zui_end_element();
  93. ///if (krom_windows || krom_linux || krom_darwin)
  94. if (ui_box_copyable && zui_button(tr("Copy"))) {
  95. krom_copy_to_clipboard(ui_box_text);
  96. }
  97. ///end
  98. if (zui_button(tr("OK"))) {
  99. ui_box_hide();
  100. }
  101. }
  102. ui_box_window_border(ui);
  103. }
  104. zui_end();
  105. }
  106. else {
  107. zui_begin(ui);
  108. if (zui_window(ui_box_hwnd, left, top, mw, mh, ui_box_draggable)) {
  109. ui._y += 10;
  110. ui_box_commands(ui);
  111. ui_box_window_border(ui);
  112. }
  113. zui_end();
  114. }
  115. g2_begin(null);
  116. ui_box_draws++;
  117. }
  118. function ui_box_show_message(title: string, text: string, copyable: bool = false) {
  119. ui_box_init();
  120. ui_box_modalw = 400;
  121. ui_box_modalh = 210;
  122. ui_box_title = title;
  123. ui_box_text = text;
  124. ui_box_commands = null;
  125. ui_box_copyable = copyable;
  126. ui_box_draggable = true;
  127. ///if (krom_android || krom_ios)
  128. ui_box_tween_in();
  129. ///end
  130. }
  131. function ui_box_show_custom(commands: (ui: zui_t)=>void = null, mw: i32 = 400, mh: i32 = 200, on_hide: ()=>void = null, draggable: bool = true) {
  132. ui_box_init();
  133. ui_box_modalw = mw;
  134. ui_box_modalh = mh;
  135. ui_box_modal_on_hide = on_hide;
  136. ui_box_commands = commands;
  137. ui_box_draggable = draggable;
  138. ///if (krom_android || krom_ios)
  139. ui_box_tween_in();
  140. ///end
  141. }
  142. function ui_box_hide() {
  143. ///if (krom_android || krom_ios)
  144. ui_box_tween_out();
  145. ///else
  146. ui_box_hide_internal();
  147. ///end
  148. }
  149. function ui_box_hide_internal() {
  150. if (ui_box_modal_on_hide != null) {
  151. ui_box_modal_on_hide();
  152. }
  153. ui_box_show = false;
  154. base_redraw_ui();
  155. }
  156. ///if (krom_android || krom_ios)
  157. function ui_box_tween_in() {
  158. // tween_reset();
  159. // tween_to({target: UIBox, props: { ui_box_tween_alpha: 0.5 }, duration: 0.2, ease: ease_t.EXPO_OUT});
  160. // ui_box_hwnd.drag_y = math_floor(sys_height() / 2);
  161. // tween_to({target: ui_box_hwnd, props: { dragY: 0 }, duration: 0.2, ease: ease_t.EXPO_OUT, tick: function () { base_redraw_ui(); }});
  162. }
  163. function ui_box_tween_out() {
  164. // tween_to({target: UIBox, props: { ui_box_tween_alpha: 0.0 }, duration: 0.2, ease: ease_t.EXPO_IN, done: ui_box_hide_internal});
  165. // tween_to({target: ui_box_hwnd, props: { dragY: sys_height() / 2 }, duration: 0.2, ease: ease_t.EXPO_IN});
  166. }
  167. ///end
  168. function ui_box_window_border(ui: zui_t) {
  169. if (ui.scissor) {
  170. ui.scissor = false;
  171. g2_disable_scissor();
  172. }
  173. // Border
  174. g2_set_color(ui.ops.theme.SEPARATOR_COL);
  175. g2_fill_rect(0, 0, 1, ui._window_h);
  176. g2_fill_rect(0 + ui._window_w - 1, 0, 1, ui._window_h);
  177. g2_fill_rect(0, 0 + ui._window_h - 1, ui._window_w, 1);
  178. }