tab_materials.ts 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389
  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: image_t = ui_SCALE(ui) > 1 ? project_materials[i].image : project_materials[i].image_icon;
  70. let img_full: image_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. ///if arm_opengl
  90. ui.image_invert_y = project_materials[i].preview_ready;
  91. ///end
  92. // Draw material icon
  93. let uix: f32 = ui._x;
  94. let uiy: f32 = ui._y;
  95. let tile: i32 = ui_SCALE(ui) > 1 ? 100 : 50;
  96. let imgh: f32 = mini ? ui_base_default_sidebar_mini_w * 0.85 * ui_SCALE(ui) : -1.0;
  97. let state: ui_state_t = project_materials[i].preview_ready ?
  98. _ui_image(img, 0xffffffff, imgh) :
  99. _ui_image(resource_get("icons.k"), 0xffffffff, -1.0, tile, tile, tile, tile);
  100. // Draw material numbers when selecting a material via keyboard shortcut
  101. let is_typing: bool = ui.is_typing || ui_view2d_ui.is_typing || ui_nodes_ui.is_typing;
  102. if (!is_typing) {
  103. if (i < 9 && operator_shortcut(map_get(config_keymap, "select_material"), shortcut_type_t.DOWN)) {
  104. let number: string = i32_to_string(i + 1);
  105. let width: i32 = g2_font_width(ui.ops.font, ui.font_size, number) + 10;
  106. let height: i32 = g2_font_height(ui.ops.font, ui.font_size);
  107. g2_set_color(ui.ops.theme.TEXT_COL);
  108. g2_fill_rect(uix, uiy, width, height);
  109. g2_set_color(ui.ops.theme.BUTTON_COL);
  110. g2_draw_string(number, uix + 5, uiy);
  111. }
  112. }
  113. // Select material
  114. if (state == ui_state_t.STARTED && ui.input_y > ui._window_y) {
  115. if (context_raw.material != project_materials[i]) {
  116. context_select_material(i);
  117. ///if is_paint
  118. if (context_raw.tool == workspace_tool_t.MATERIAL) {
  119. app_notify_on_init(layers_update_fill_layers);
  120. }
  121. ///end
  122. }
  123. base_drag_off_x = -(mouse_x - uix - ui._window_x - 3);
  124. base_drag_off_y = -(mouse_y - uiy - ui._window_y + 1);
  125. base_drag_material = context_raw.material;
  126. // Double click to show nodes
  127. if (time_time() - context_raw.select_time < 0.25) {
  128. ui_base_show_material_nodes();
  129. base_drag_material = null;
  130. base_is_dragging = false;
  131. }
  132. context_raw.select_time = time_time();
  133. }
  134. // Context menu
  135. if (ui.is_hovered && ui.input_released_r) {
  136. context_select_material(i);
  137. _tab_materials_draw_slots = i;
  138. ui_menu_draw(function (ui: ui_t) {
  139. let i: i32 = _tab_materials_draw_slots;
  140. let m: slot_material_t = project_materials[i];
  141. if (ui_menu_button(ui, tr("To Fill Layer"))) {
  142. context_select_material(i);
  143. layers_create_fill_layer();
  144. }
  145. if (ui_menu_button(ui, tr("Export"))) {
  146. context_select_material(i);
  147. box_export_show_material();
  148. }
  149. ///if is_paint
  150. if (ui_menu_button(ui, tr("Bake"))) {
  151. context_select_material(i);
  152. box_export_show_bake_material();
  153. }
  154. ///end
  155. if (ui_menu_button(ui, tr("Duplicate"))) {
  156. app_notify_on_init(function () {
  157. let i: i32 = _tab_materials_draw_slots;
  158. context_raw.material = slot_material_create(project_materials[0].data);
  159. array_push(project_materials, context_raw.material);
  160. let cloned: ui_node_canvas_t = util_clone_canvas(project_materials[i].canvas);
  161. context_raw.material.canvas = cloned;
  162. tab_materials_update_material();
  163. history_duplicate_material();
  164. });
  165. }
  166. if (project_materials.length > 1 && ui_menu_button(ui, tr("Delete"), "delete")) {
  167. tab_materials_delete_material(m);
  168. }
  169. let base_handle: ui_handle_t = ui_nest(ui_handle(__ID__), m.id);
  170. if (base_handle.init) {
  171. base_handle.selected = m.paint_base;
  172. }
  173. let opac_handle: ui_handle_t = ui_nest(ui_handle(__ID__), m.id);
  174. if (opac_handle.init) {
  175. opac_handle.selected = m.paint_opac;
  176. }
  177. let nor_handle: ui_handle_t = ui_nest(ui_handle(__ID__), m.id);
  178. if (nor_handle.init) {
  179. nor_handle.selected = m.paint_nor;
  180. }
  181. let occ_handle: ui_handle_t = ui_nest(ui_handle(__ID__), m.id);
  182. if (occ_handle.init) {
  183. occ_handle.selected = m.paint_occ;
  184. }
  185. let rough_handle: ui_handle_t = ui_nest(ui_handle(__ID__), m.id);
  186. if (rough_handle.init) {
  187. rough_handle.selected = m.paint_rough;
  188. }
  189. let met_handle: ui_handle_t = ui_nest(ui_handle(__ID__), m.id);
  190. if (met_handle.init) {
  191. met_handle.selected = m.paint_met;
  192. }
  193. let height_handle: ui_handle_t = ui_nest(ui_handle(__ID__), m.id);
  194. if (height_handle.init) {
  195. height_handle.selected = m.paint_height;
  196. }
  197. let emis_handle: ui_handle_t = ui_nest(ui_handle(__ID__), m.id);
  198. if (emis_handle.init) {
  199. emis_handle.selected = m.paint_emis;
  200. }
  201. let subs_handle: ui_handle_t = ui_nest(ui_handle(__ID__), m.id);
  202. if (subs_handle.init) {
  203. subs_handle.selected = m.paint_subs;
  204. }
  205. m.paint_base = ui_check(base_handle, tr("Base Color"));
  206. m.paint_opac = ui_check(opac_handle, tr("Opacity"));
  207. m.paint_nor = ui_check(nor_handle, tr("Normal"));
  208. m.paint_occ = ui_check(occ_handle, tr("Occlusion"));
  209. m.paint_rough = ui_check(rough_handle, tr("Roughness"));
  210. m.paint_met = ui_check(met_handle, tr("Metallic"));
  211. m.paint_height = ui_check(height_handle, tr("Height"));
  212. m.paint_emis = ui_check(emis_handle, tr("Emission"));
  213. m.paint_subs = ui_check(subs_handle, tr("Subsurface"));
  214. if (base_handle.changed ||
  215. opac_handle.changed ||
  216. nor_handle.changed ||
  217. occ_handle.changed ||
  218. rough_handle.changed ||
  219. met_handle.changed ||
  220. height_handle.changed ||
  221. emis_handle.changed ||
  222. subs_handle.changed) {
  223. make_material_parse_paint_material();
  224. ui_menu_keep_open = true;
  225. }
  226. });
  227. }
  228. if (ui.is_hovered) {
  229. _ui_tooltip_image(img_full);
  230. if (i < 9) {
  231. let i1: i32 = i + 1;
  232. ui_tooltip(project_materials[i].canvas.name + " - (" + map_get(config_keymap, "select_material") + " " + i1 + ")");
  233. }
  234. else {
  235. ui_tooltip(project_materials[i].canvas.name);
  236. }
  237. }
  238. if (config_raw.show_asset_names) {
  239. ui._x = uix;
  240. ui._y += slotw * 0.9;
  241. ui_text(project_materials[i].canvas.name, ui_align_t.CENTER);
  242. if (ui.is_hovered) {
  243. if (i < 9) {
  244. let i1: i32 = i + 1;
  245. ui_tooltip(project_materials[i].canvas.name + " - (" + map_get(config_keymap, "select_material") + " " + i1 + ")");
  246. }
  247. else {
  248. ui_tooltip(project_materials[i].canvas.name);
  249. }
  250. }
  251. ui._y -= slotw * 0.9;
  252. if (i == project_materials.length - 1) {
  253. ui._y += j == num - 1 ? imgw : imgw + ui_ELEMENT_H(ui) + ui_ELEMENT_OFFSET(ui);
  254. }
  255. }
  256. }
  257. ui._y += mini ? 0 : 6;
  258. ///if arm_opengl
  259. ui.image_invert_y = false; // Material preview
  260. ///end
  261. }
  262. let in_focus: bool = ui.input_x > ui._window_x && ui.input_x < ui._window_x + ui._window_w &&
  263. ui.input_y > ui._window_y && ui.input_y < ui._window_y + ui._window_h;
  264. if (in_focus && ui.is_delete_down && project_materials.length > 1) {
  265. ui.is_delete_down = false;
  266. tab_materials_delete_material(context_raw.material);
  267. }
  268. }
  269. function tab_materials_button_new(text: string) {
  270. if (ui_button(text)) {
  271. app_notify_on_init(function() {
  272. context_raw.material = slot_material_create(project_materials[0].data);
  273. array_push(project_materials, context_raw.material);
  274. tab_materials_update_material();
  275. history_new_material();
  276. });
  277. }
  278. }
  279. function tab_materials_update_material() {
  280. ui_header_handle.redraws = 2;
  281. ui_nodes_hwnd.redraws = 2;
  282. ui_nodes_group_stack = [];
  283. make_material_parse_paint_material();
  284. util_render_make_material_preview();
  285. let decal: bool = context_is_decal();
  286. if (decal) {
  287. util_render_make_decal_preview();
  288. }
  289. }
  290. function tab_materials_update_material_pointers(nodes: ui_node_t[], i: i32) {
  291. for (let i: i32 = 0; i < nodes.length; ++i) {
  292. let n: ui_node_t = nodes[i];
  293. if (n.type == "MATERIAL") {
  294. if (n.buttons[0].default_value[0] == i) {
  295. n.buttons[0].default_value[0] = 9999; // Material deleted
  296. }
  297. else if (n.buttons[0].default_value[0] > i) {
  298. n.buttons[0].default_value[0]--; // Offset by deleted material
  299. }
  300. }
  301. }
  302. }
  303. function tab_materials_accept_swatch_drag(swatch: swatch_color_t) {
  304. context_raw.material = slot_material_create(project_materials[0].data);
  305. for (let i: i32 = 0; i < context_raw.material.canvas.nodes.length; ++i) {
  306. let node: ui_node_t = context_raw.material.canvas.nodes[i];
  307. if (node.type == "RGB" ) {
  308. node.outputs[0].default_value = f32_array_create_xyzw(
  309. color_get_rb(swatch.base) / 255,
  310. color_get_gb(swatch.base) / 255,
  311. color_get_bb(swatch.base) / 255,
  312. color_get_ab(swatch.base) / 255
  313. );
  314. }
  315. else if (node.type == "OUTPUT_MATERIAL_PBR") {
  316. node.inputs[1].default_value[0] = swatch.opacity;
  317. node.inputs[2].default_value[0] = swatch.occlusion;
  318. node.inputs[3].default_value[0] = swatch.roughness;
  319. node.inputs[4].default_value[0] = swatch.metallic;
  320. node.inputs[7].default_value[0] = swatch.height;
  321. }
  322. }
  323. array_push(project_materials, context_raw.material);
  324. tab_materials_update_material();
  325. history_new_material();
  326. }
  327. function tab_materials_delete_material(m: slot_material_t) {
  328. let i: i32 = array_index_of(project_materials, m);
  329. for (let i: i32 = 0; i < project_layers.length; ++i) {
  330. let l: slot_layer_t = project_layers[i];
  331. if (l.fill_layer == m) {
  332. l.fill_layer = null;
  333. }
  334. }
  335. history_delete_material();
  336. context_select_material(i == project_materials.length - 1 ? i - 1 : i + 1);
  337. array_splice(project_materials, i, 1);
  338. ui_base_hwnds[1].redraws = 2;
  339. for (let i: i32 = 0; i < project_materials.length; ++i) {
  340. let m: slot_material_t = project_materials[i];
  341. tab_materials_update_material_pointers(m.canvas.nodes, i);
  342. }
  343. }