tab_materials.ts 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381
  1. let _tab_materials_draw_slots: i32;
  2. function tab_materials_draw(htab: ui_handle_t) {
  3. let mini: bool = config_raw.layout[layout_size_t.SIDEBAR_W] <= ui_base_sidebar_mini_w;
  4. mini ? tab_materials_draw_mini(htab) : tab_materials_draw_full(htab);
  5. }
  6. function tab_materials_draw_mini(htab: ui_handle_t) {
  7. ui_set_hovered_tab_name(tr("Materials"));
  8. ui_begin_sticky();
  9. ui_separator(5);
  10. tab_materials_button_nodes();
  11. tab_materials_button_new("+");
  12. ui_end_sticky();
  13. ui_separator(3, false);
  14. tab_materials_draw_slots(true);
  15. }
  16. function tab_materials_draw_full(htab: ui_handle_t) {
  17. if (ui_tab(htab, tr("Materials"))) {
  18. ui_begin_sticky();
  19. let row: f32[] = [1 / 4, 1 / 4, 1 / 4];
  20. ui_row(row);
  21. tab_materials_button_new(tr("New"));
  22. if (ui_button(tr("Import"))) {
  23. project_import_material();
  24. }
  25. tab_materials_button_nodes();
  26. ui_end_sticky();
  27. ui_separator(3, false);
  28. tab_materials_draw_slots(false);
  29. }
  30. }
  31. function tab_materials_button_nodes() {
  32. let ui: ui_t = ui_base_ui;
  33. if (ui_button(tr("Nodes"))) {
  34. ui_base_show_material_nodes();
  35. }
  36. else if (ui.is_hovered) {
  37. ui_tooltip(tr("Show Node Editor") + " (" + map_get(config_keymap, "toggle_node_editor") + ")");
  38. }
  39. }
  40. function tab_materials_draw_slots(mini: bool) {
  41. let ui: ui_t = ui_base_ui;
  42. let slotw: i32 = math_floor(51 * ui_SCALE(ui));
  43. let num: i32 = math_floor(config_raw.layout[layout_size_t.SIDEBAR_W] / slotw);
  44. if (num == 0) {
  45. return;
  46. }
  47. for (let row: i32 = 0; row < math_floor(math_ceil(project_materials.length / num)); ++row) {
  48. let mult: i32 = config_raw.show_asset_names ? 2 : 1;
  49. let ar: f32[] = [];
  50. for (let i: i32 = 0; i < num * mult; ++i) {
  51. array_push(ar, 1 / num);
  52. }
  53. ui_row(ar);
  54. ui._x += 2;
  55. let off: f32 = config_raw.show_asset_names ? ui_ELEMENT_OFFSET(ui) * 10.0 : 6;
  56. if (row > 0) {
  57. ui._y += off;
  58. }
  59. for (let j: i32 = 0; j < num; ++j) {
  60. let imgw: i32 = math_floor(50 * ui_SCALE(ui));
  61. let i: i32 = j + row * num;
  62. if (i >= project_materials.length) {
  63. _ui_end_element(imgw);
  64. if (config_raw.show_asset_names) {
  65. _ui_end_element(0);
  66. }
  67. continue;
  68. }
  69. let img: gpu_texture_t = ui_SCALE(ui) > 1 ? project_materials[i].image : project_materials[i].image_icon;
  70. let img_full: gpu_texture_t = project_materials[i].image;
  71. // Highligh selected
  72. if (context_raw.material == project_materials[i]) {
  73. if (mini) {
  74. let w: f32 = ui._w / ui_SCALE(ui);
  75. ui_rect(0, -2, w - 2, w - 4, ui.ops.theme.HIGHLIGHT_COL, 3);
  76. }
  77. else {
  78. let off: i32 = row % 2 == 1 ? 1 : 0;
  79. let w: i32 = 50;
  80. if (config_raw.window_scale > 1) {
  81. w += math_floor(config_raw.window_scale * 2);
  82. }
  83. ui_fill(-1, -2, w + 3, 2, ui.ops.theme.HIGHLIGHT_COL);
  84. ui_fill(-1, w - off, w + 3, 2 + off, ui.ops.theme.HIGHLIGHT_COL);
  85. ui_fill(-1, -2, 2, w + 3, ui.ops.theme.HIGHLIGHT_COL);
  86. ui_fill(w + 1, -2, 2, w + 4, ui.ops.theme.HIGHLIGHT_COL);
  87. }
  88. }
  89. // Draw material icon
  90. let uix: f32 = ui._x;
  91. let uiy: f32 = ui._y;
  92. let tile: i32 = ui_SCALE(ui) > 1 ? 100 : 50;
  93. let imgh: f32 = mini ? ui_base_default_sidebar_mini_w * 0.85 * ui_SCALE(ui) : -1.0;
  94. let state: ui_state_t = project_materials[i].preview_ready ?
  95. ui_image(img, 0xffffffff, imgh) :
  96. ui_sub_image(resource_get("icons.k"), 0xffffffff, -1.0, tile, tile, tile, tile);
  97. // Draw material numbers when selecting a material via keyboard shortcut
  98. let is_typing: bool = ui.is_typing || ui_view2d_ui.is_typing || ui_nodes_ui.is_typing;
  99. if (!is_typing) {
  100. if (i < 9 && operator_shortcut(map_get(config_keymap, "select_material"), shortcut_type_t.DOWN)) {
  101. let number: string = i32_to_string(i + 1);
  102. let width: i32 = draw_string_width(ui.ops.font, ui.font_size, number) + 10;
  103. let height: i32 = draw_font_height(ui.ops.font, ui.font_size);
  104. draw_set_color(ui.ops.theme.TEXT_COL);
  105. draw_filled_rect(uix, uiy, width, height);
  106. draw_set_color(ui.ops.theme.BUTTON_COL);
  107. draw_string(number, uix + 5, uiy);
  108. }
  109. }
  110. // Select material
  111. if (state == ui_state_t.STARTED && ui.input_y > ui._window_y) {
  112. if (context_raw.material != project_materials[i]) {
  113. context_select_material(i);
  114. ///if is_paint
  115. if (context_raw.tool == workspace_tool_t.MATERIAL) {
  116. sys_notify_on_init(layers_update_fill_layers);
  117. }
  118. ///end
  119. }
  120. base_drag_off_x = -(mouse_x - uix - ui._window_x - 3);
  121. base_drag_off_y = -(mouse_y - uiy - ui._window_y + 1);
  122. base_drag_material = context_raw.material;
  123. // Double click to show nodes
  124. if (sys_time() - context_raw.select_time < 0.25) {
  125. ui_base_show_material_nodes();
  126. base_drag_material = null;
  127. base_is_dragging = false;
  128. }
  129. context_raw.select_time = sys_time();
  130. }
  131. // Context menu
  132. if (ui.is_hovered && ui.input_released_r) {
  133. context_select_material(i);
  134. _tab_materials_draw_slots = i;
  135. ui_menu_draw(function (ui: ui_t) {
  136. let i: i32 = _tab_materials_draw_slots;
  137. let m: slot_material_t = project_materials[i];
  138. if (ui_menu_button(tr("To Fill Layer"))) {
  139. context_select_material(i);
  140. layers_create_fill_layer();
  141. }
  142. if (ui_menu_button(tr("Export"))) {
  143. context_select_material(i);
  144. box_export_show_material();
  145. }
  146. ///if is_paint
  147. if (ui_menu_button(tr("Bake"))) {
  148. context_select_material(i);
  149. box_export_show_bake_material();
  150. }
  151. ///end
  152. if (ui_menu_button(tr("Duplicate"))) {
  153. sys_notify_on_init(function () {
  154. let i: i32 = _tab_materials_draw_slots;
  155. context_raw.material = slot_material_create(project_materials[0].data);
  156. array_push(project_materials, context_raw.material);
  157. let cloned: ui_node_canvas_t = util_clone_canvas(project_materials[i].canvas);
  158. context_raw.material.canvas = cloned;
  159. tab_materials_update_material();
  160. history_duplicate_material();
  161. });
  162. }
  163. if (project_materials.length > 1 && ui_menu_button(tr("Delete"), "delete")) {
  164. tab_materials_delete_material(m);
  165. }
  166. let base_handle: ui_handle_t = ui_nest(ui_handle(__ID__), m.id);
  167. if (base_handle.init) {
  168. base_handle.selected = m.paint_base;
  169. }
  170. let opac_handle: ui_handle_t = ui_nest(ui_handle(__ID__), m.id);
  171. if (opac_handle.init) {
  172. opac_handle.selected = m.paint_opac;
  173. }
  174. let nor_handle: ui_handle_t = ui_nest(ui_handle(__ID__), m.id);
  175. if (nor_handle.init) {
  176. nor_handle.selected = m.paint_nor;
  177. }
  178. let occ_handle: ui_handle_t = ui_nest(ui_handle(__ID__), m.id);
  179. if (occ_handle.init) {
  180. occ_handle.selected = m.paint_occ;
  181. }
  182. let rough_handle: ui_handle_t = ui_nest(ui_handle(__ID__), m.id);
  183. if (rough_handle.init) {
  184. rough_handle.selected = m.paint_rough;
  185. }
  186. let met_handle: ui_handle_t = ui_nest(ui_handle(__ID__), m.id);
  187. if (met_handle.init) {
  188. met_handle.selected = m.paint_met;
  189. }
  190. let height_handle: ui_handle_t = ui_nest(ui_handle(__ID__), m.id);
  191. if (height_handle.init) {
  192. height_handle.selected = m.paint_height;
  193. }
  194. let emis_handle: ui_handle_t = ui_nest(ui_handle(__ID__), m.id);
  195. if (emis_handle.init) {
  196. emis_handle.selected = m.paint_emis;
  197. }
  198. let subs_handle: ui_handle_t = ui_nest(ui_handle(__ID__), m.id);
  199. if (subs_handle.init) {
  200. subs_handle.selected = m.paint_subs;
  201. }
  202. m.paint_base = ui_check(base_handle, tr("Base Color"));
  203. m.paint_opac = ui_check(opac_handle, tr("Opacity"));
  204. m.paint_nor = ui_check(nor_handle, tr("Normal"));
  205. m.paint_occ = ui_check(occ_handle, tr("Occlusion"));
  206. m.paint_rough = ui_check(rough_handle, tr("Roughness"));
  207. m.paint_met = ui_check(met_handle, tr("Metallic"));
  208. m.paint_height = ui_check(height_handle, tr("Height"));
  209. m.paint_emis = ui_check(emis_handle, tr("Emission"));
  210. m.paint_subs = ui_check(subs_handle, tr("Subsurface"));
  211. if (base_handle.changed ||
  212. opac_handle.changed ||
  213. nor_handle.changed ||
  214. occ_handle.changed ||
  215. rough_handle.changed ||
  216. met_handle.changed ||
  217. height_handle.changed ||
  218. emis_handle.changed ||
  219. subs_handle.changed) {
  220. make_material_parse_paint_material();
  221. ui_menu_keep_open = true;
  222. }
  223. });
  224. }
  225. if (ui.is_hovered) {
  226. ui_tooltip_image(img_full);
  227. if (i < 9) {
  228. let i1: i32 = i + 1;
  229. ui_tooltip(project_materials[i].canvas.name + " - (" + map_get(config_keymap, "select_material") + " " + i1 + ")");
  230. }
  231. else {
  232. ui_tooltip(project_materials[i].canvas.name);
  233. }
  234. }
  235. if (config_raw.show_asset_names) {
  236. ui._x = uix;
  237. ui._y += slotw * 0.9;
  238. ui_text(project_materials[i].canvas.name, ui_align_t.CENTER);
  239. if (ui.is_hovered) {
  240. if (i < 9) {
  241. let i1: i32 = i + 1;
  242. ui_tooltip(project_materials[i].canvas.name + " - (" + map_get(config_keymap, "select_material") + " " + i1 + ")");
  243. }
  244. else {
  245. ui_tooltip(project_materials[i].canvas.name);
  246. }
  247. }
  248. ui._y -= slotw * 0.9;
  249. if (i == project_materials.length - 1) {
  250. ui._y += j == num - 1 ? imgw : imgw + ui_ELEMENT_H(ui) + ui_ELEMENT_OFFSET(ui);
  251. }
  252. }
  253. }
  254. ui._y += mini ? 0 : 6;
  255. }
  256. let in_focus: bool = ui.input_x > ui._window_x && ui.input_x < ui._window_x + ui._window_w &&
  257. ui.input_y > ui._window_y && ui.input_y < ui._window_y + ui._window_h;
  258. if (in_focus && ui.is_delete_down && project_materials.length > 1) {
  259. ui.is_delete_down = false;
  260. tab_materials_delete_material(context_raw.material);
  261. }
  262. }
  263. function tab_materials_button_new(text: string) {
  264. if (ui_button(text)) {
  265. sys_notify_on_init(function() {
  266. context_raw.material = slot_material_create(project_materials[0].data);
  267. array_push(project_materials, context_raw.material);
  268. tab_materials_update_material();
  269. history_new_material();
  270. });
  271. }
  272. }
  273. function tab_materials_update_material() {
  274. ui_header_handle.redraws = 2;
  275. ui_nodes_hwnd.redraws = 2;
  276. ui_nodes_group_stack = [];
  277. make_material_parse_paint_material();
  278. util_render_make_material_preview();
  279. let decal: bool = context_is_decal();
  280. if (decal) {
  281. util_render_make_decal_preview();
  282. }
  283. }
  284. function tab_materials_update_material_pointers(nodes: ui_node_t[], i: i32) {
  285. for (let i: i32 = 0; i < nodes.length; ++i) {
  286. let n: ui_node_t = nodes[i];
  287. if (n.type == "MATERIAL") {
  288. if (n.buttons[0].default_value[0] == i) {
  289. n.buttons[0].default_value[0] = 9999; // Material deleted
  290. }
  291. else if (n.buttons[0].default_value[0] > i) {
  292. n.buttons[0].default_value[0]--; // Offset by deleted material
  293. }
  294. }
  295. }
  296. }
  297. function tab_materials_accept_swatch_drag(swatch: swatch_color_t) {
  298. context_raw.material = slot_material_create(project_materials[0].data);
  299. for (let i: i32 = 0; i < context_raw.material.canvas.nodes.length; ++i) {
  300. let node: ui_node_t = context_raw.material.canvas.nodes[i];
  301. if (node.type == "RGB" ) {
  302. node.outputs[0].default_value = f32_array_create_xyzw(
  303. color_get_rb(swatch.base) / 255,
  304. color_get_gb(swatch.base) / 255,
  305. color_get_bb(swatch.base) / 255,
  306. color_get_ab(swatch.base) / 255
  307. );
  308. }
  309. else if (node.type == "OUTPUT_MATERIAL_PBR") {
  310. node.inputs[1].default_value[0] = swatch.opacity;
  311. node.inputs[2].default_value[0] = swatch.occlusion;
  312. node.inputs[3].default_value[0] = swatch.roughness;
  313. node.inputs[4].default_value[0] = swatch.metallic;
  314. node.inputs[7].default_value[0] = swatch.height;
  315. }
  316. }
  317. array_push(project_materials, context_raw.material);
  318. tab_materials_update_material();
  319. history_new_material();
  320. }
  321. function tab_materials_delete_material(m: slot_material_t) {
  322. let i: i32 = array_index_of(project_materials, m);
  323. for (let i: i32 = 0; i < project_layers.length; ++i) {
  324. let l: slot_layer_t = project_layers[i];
  325. if (l.fill_layer == m) {
  326. l.fill_layer = null;
  327. }
  328. }
  329. history_delete_material();
  330. context_select_material(i == project_materials.length - 1 ? i - 1 : i + 1);
  331. array_splice(project_materials, i, 1);
  332. ui_base_hwnds[1].redraws = 2;
  333. for (let i: i32 = 0; i < project_materials.length; ++i) {
  334. let m: slot_material_t = project_materials[i];
  335. tab_materials_update_material_pointers(m.canvas.nodes, i);
  336. }
  337. }