armory3d.armortools/paint/sources/ui_view2d.ts

let ui_view2d_pipe: gpu_pipeline_t;
let ui_view2d_channel_loc: i32;
let ui_view2d_text_input_hover: bool           = false;
let ui_view2d_uvmap_show: bool                 = false;
let ui_view2d_tex_type: paint_tex_t            = paint_tex_t.BASE;
let ui_view2d_layer_mode: view_2d_layer_mode_t = view_2d_layer_mode_t.SELECTED;
let ui_view2d_type: view_2d_type_t             = view_2d_type_t.LAYER;
let ui_view2d_show: bool                       = false;
let ui_view2d_wx: i32;
let ui_view2d_wy: i32;
let ui_view2d_ww: i32;
let ui_view2d_wh: i32;
let ui_view2d_hwnd: ui_handle_t   = ui_handle_create();
let ui_view2d_pan_x: f32          = 0.0;
let ui_view2d_pan_y: f32          = 0.0;
let ui_view2d_pan_scale: f32      = 1.0;
let ui_view2d_tiled_show: bool    = false;
let ui_view2d_controls_down: bool = false;
let _ui_view2d_render_tex: gpu_texture_t;
let _ui_view2d_render_x: f32;
let _ui_view2d_render_y: f32;
let _ui_view2d_render_tw: f32;
let _ui_view2d_render_th: f32;
let ui_view2d_grid: gpu_texture_t = null;
let ui_view2d_grid_redraw: bool   = true;
let ui_view2d_htab: ui_handle_t   = ui_handle_create();

function ui_view2d_init() {
	ui_view2d_pipe                 = gpu_create_pipeline();
	ui_view2d_pipe.vertex_shader   = sys_get_shader("layer_view.vert");
	ui_view2d_pipe.fragment_shader = sys_get_shader("layer_view.frag");
	let vs: gpu_vertex_structure_t = {};
	gpu_vertex_struct_add(vs, "pos", gpu_vertex_data_t.F32_2X);
	ui_view2d_pipe.input_layout                            = vs;
	ui_view2d_pipe.blend_source                            = gpu_blend_t.ONE;
	ui_view2d_pipe.blend_destination                       = gpu_blend_t.ZERO;
	ARRAY_ACCESS(ui_view2d_pipe.color_write_mask_alpha, 0) = false;
	gpu_pipeline_compile(ui_view2d_pipe);
	pipes_offset = 0;
	pipes_get_constant_location("float4");
	pipes_get_constant_location("float4");
	pipes_get_constant_location("float4");
	ui_view2d_channel_loc = pipes_get_constant_location("int");
}

function ui_view2d_draw_image(image: gpu_texture_t, dx: f32, dy: f32, dw: f32, dh: f32, channel: i32) {
	if (ui_view2d_type == view_2d_type_t.LAYER) {
		gpu_set_int(ui_view2d_channel_loc, channel);
	}
	draw_scaled_image(image, dx, dy, dw, dh);
}

function ui_view2d_render() {
	ui_view2d_ww = config_raw.layout[layout_size_t.NODES_W];
	ui_view2d_wx = math_floor(sys_w()) + ui_toolbar_w(true);
	ui_view2d_wy = 0;

	if (!ui_base_show) {
		ui_view2d_ww += config_raw.layout[layout_size_t.SIDEBAR_W] + ui_toolbar_w(true);
		ui_view2d_wx -= ui_toolbar_w(true);
	}
	if (!base_view3d_show) {
		ui_view2d_ww += base_view3d_w();
	}

	if (!ui_view2d_show) {
		return;
	}

	if (context_raw.pdirty >= 0) {
		ui_view2d_hwnd.redraws = 2; // Paint was active
	}

	// Cache grid
	if (ui_view2d_grid_redraw) {
		if (ui_view2d_grid != null) {
			gpu_delete_texture(ui_view2d_grid);
		}
		ui_view2d_grid        = ui_nodes_draw_grid(ui_view2d_pan_scale);
		ui_view2d_grid_redraw = false;
	}

	// Ensure UV map is drawn
	if (ui_view2d_uvmap_show) {
		util_uv_cache_uv_map();
	}

	// Ensure font image is drawn
	if (context_raw.font.image == null) {
		util_render_make_font_preview();
	}

	ui_begin(ui);

	let headerh: i32 = config_raw.layout[layout_size_t.HEADER] == 1 ? ui_header_h * 2 : ui_header_h;
	let apph: i32    = iron_window_height() - config_raw.layout[layout_size_t.STATUS_H] + headerh;
	if (!base_view3d_show) {
		apph = base_h();
	}
	ui_view2d_wh = iron_window_height() - config_raw.layout[layout_size_t.STATUS_H];

	if (ui_nodes_show) {
		ui_view2d_wh -= config_raw.layout[layout_size_t.NODES_H];
		if (config_raw.touch_ui) {
			ui_view2d_wh += ui_header_h;
		}
	}

	if (!base_view3d_show && ui_nodes_show) {
		ui_view2d_wx = 0;
		ui_view2d_ww = base_view3d_w();
		ui_view2d_wh = iron_window_height() - config_raw.layout[layout_size_t.STATUS_H];
	}

	if (ui_window(ui_view2d_hwnd, ui_view2d_wx, ui_view2d_wy, ui_view2d_ww, ui_view2d_wh)) {

		let expand: bool = !base_view3d_show && !ui_nodes_show && config_raw.layout[layout_size_t.SIDEBAR_W] == 0;
		ui_tab(ui_view2d_htab, expand ? tr("2D View") + "          " : tr("2D View"), false, -1, !base_view3d_show);

		if (ui_tab(ui_view2d_htab, tr("+"))) {
			ui_view2d_htab.i = 0;
		}

		// Grid
		// draw_set_color(0xffffffff);
		// let step: f32 = ui_nodes_grid_cell_w * ui_view2d_pan_scale;
		// let x: f32    = math_fmod(ui_view2d_pan_x, step) - step;
		// let y: f32    = math_fmod(ui_view2d_pan_y, step) - step;
		// draw_image(ui_view2d_grid, x, y);
		draw_set_color(ui.ops.theme.SEPARATOR_COL + 0x00020202);
		draw_filled_rect(0, 0, ui_view2d_ww, ui_view2d_wh);
		draw_set_color(0xffffffff);

		// Texture
		let tex: gpu_texture_t = null;
		let l: slot_layer_t    = context_raw.layer;
		let channel: i32       = 0;

		let tw: f32 = ui_view2d_ww * 0.95 * ui_view2d_pan_scale;
		let tx: f32 = ui_view2d_ww / 2 - tw / 2 + ui_view2d_pan_x;
		let ty: f32 = apph / 2 - tw / 2 + ui_view2d_pan_y;

		if (ui_view2d_type == view_2d_type_t.ASSET) {
			tex = project_get_image(context_raw.texture);
		}
		else if (ui_view2d_type == view_2d_type_t.NODE) {
			let nodes: ui_nodes_t   = ui_nodes_get_nodes();
			let c: ui_node_canvas_t = ui_nodes_get_canvas(true);
			if (nodes.nodes_selected_id.length > 0) {
				let sel: ui_node_t     = ui_get_node(c.nodes, nodes.nodes_selected_id[0]);
				let img: gpu_texture_t = ui_nodes_get_node_preview_image(sel);
				if (img != null) {
					tex = ui_nodes_get_node_preview_image(sel);
				}
			}
		}
		else if (ui_view2d_type == view_2d_type_t.LAYER) {
			let layer: slot_layer_t = l;

			if (config_raw.brush_live && render_path_paint_live_layer_drawn > 0) {
				layer = render_path_paint_live_layer;
			}

			if (context_raw.tool == tool_type_t.MATERIAL) {
				layer = render_path_paint_live_layer;
			}

			if (ui_view2d_layer_mode == view_2d_layer_mode_t.VISIBLE) {
				let current: gpu_texture_t = _draw_current;
				let in_use: bool           = gpu_in_use;
				if (in_use)
					draw_end();
				layer = layers_flatten();
				if (in_use)
					draw_begin(current);
			}
			else if (slot_layer_is_group(layer)) {
				let current: gpu_texture_t = _draw_current;
				let in_use: bool           = gpu_in_use;
				if (in_use)
					draw_end();
				layer = layers_flatten(false, slot_layer_get_children(layer));
				if (in_use)
					draw_begin(current);
			}

			tex = slot_layer_is_mask(context_raw.layer)       ? layer.texpaint
			      : ui_view2d_tex_type == paint_tex_t.BASE    ? layer.texpaint
			      : ui_view2d_tex_type == paint_tex_t.OPACITY ? layer.texpaint
			      : ui_view2d_tex_type == paint_tex_t.NORMAL  ? layer.texpaint_nor
			                                                  : layer.texpaint_pack;

			channel = slot_layer_is_mask(context_raw.layer)         ? 1
			          : ui_view2d_tex_type == paint_tex_t.OCCLUSION ? 1
			          : ui_view2d_tex_type == paint_tex_t.ROUGHNESS ? 2
			          : ui_view2d_tex_type == paint_tex_t.METALLIC  ? 3
			          : ui_view2d_tex_type == paint_tex_t.OPACITY   ? 4
			          : ui_view2d_tex_type == paint_tex_t.HEIGHT    ? 4
			          : ui_view2d_tex_type == paint_tex_t.NORMAL    ? 5
			                                                        : 0;
		}
		else if (ui_view2d_type == view_2d_type_t.FONT) {
			tex = context_raw.font.image;
		}

		let th: f32 = tw;
		if (tex != null) {
			th = tw * (tex.height / tex.width);
			ty = apph / 2 - th / 2 + ui_view2d_pan_y;
			if (ui_view2d_type == view_2d_type_t.LAYER) {
				draw_set_pipeline(ui_view2d_pipe);
			}

			ui_view2d_draw_image(tex, tx, ty, tw, th, channel);
			if (ui_view2d_tiled_show) {
				ui_view2d_draw_image(tex, tx - tw, ty, tw, th, channel);
				ui_view2d_draw_image(tex, tx - tw, ty - th, tw, th, channel);
				ui_view2d_draw_image(tex, tx - tw, ty + th, tw, th, channel);
				ui_view2d_draw_image(tex, tx + tw, ty, tw, th, channel);
				ui_view2d_draw_image(tex, tx + tw, ty - th, tw, th, channel);
				ui_view2d_draw_image(tex, tx + tw, ty + th, tw, th, channel);
				ui_view2d_draw_image(tex, tx, ty - th, tw, th, channel);
				ui_view2d_draw_image(tex, tx, ty + th, tw, th, channel);
			}

			if (ui_view2d_type == view_2d_type_t.LAYER) {
				draw_set_pipeline(null);
			}

			// Texture and node preview color picking
			if ((context_in_2d_view(view_2d_type_t.ASSET) || context_in_2d_view(view_2d_type_t.NODE)) && context_raw.tool == tool_type_t.PICKER &&
			    ui.input_down) {
				_ui_view2d_render_tex = tex;
				_ui_view2d_render_x   = ui.input_x - tx - ui_view2d_wx;
				;
				_ui_view2d_render_y  = ui.input_y - ty - ui_view2d_wy;
				_ui_view2d_render_tw = tw;
				_ui_view2d_render_th = th;

				sys_notify_on_next_frame(function() {
					let rt: render_target_t            = map_get(render_path_render_targets, "texpaint_picker");
					let texpaint_picker: gpu_texture_t = rt._image;
					draw_begin(texpaint_picker);
					draw_scaled_image(_ui_view2d_render_tex, -_ui_view2d_render_x, -_ui_view2d_render_y, _ui_view2d_render_tw, _ui_view2d_render_th);
					draw_end();
					let a: buffer_t = gpu_get_texture_pixels(texpaint_picker);
					/// if IRON_BGRA
					let i0: i32 = 2;
					let i1: i32 = 1;
					let i2: i32 = 0;
					/// else
					let i0: i32 = 0;
					let i1: i32 = 1;
					let i2: i32 = 2;
					/// end

					context_raw.picked_color.base = color_set_rb(context_raw.picked_color.base, buffer_get_u8(a, i0));
					context_raw.picked_color.base = color_set_gb(context_raw.picked_color.base, buffer_get_u8(a, i1));
					context_raw.picked_color.base = color_set_bb(context_raw.picked_color.base, buffer_get_u8(a, i2));
					ui_header_handle.redraws      = 2;

					if (context_raw.color_picker_callback != null) {
						context_raw.color_picker_callback(context_raw.picked_color);
					}
				});
			}
		}

		// UV map
		if (ui_view2d_type == view_2d_type_t.LAYER && ui_view2d_uvmap_show) {
			draw_scaled_image(util_uv_uvmap, tx, ty, tw, th);
		}

		// Menu
		let ew: i32 = math_floor(UI_ELEMENT_W());
		draw_set_color(ui.ops.theme.WINDOW_BG_COL);
		draw_filled_rect(0, UI_ELEMENT_H(), ui_view2d_ww, UI_ELEMENT_H() + UI_ELEMENT_OFFSET() * 2);
		draw_set_color(0xffffffff);

		let start_y: f32 = UI_ELEMENT_H() + UI_ELEMENT_OFFSET();
		ui._x            = 2;
		ui._y            = 2 + start_y;
		ui._w            = ew;

		// Editable layer name
		let h: ui_handle_t = ui_handle(__ID__);
		let text: string   = ui_view2d_type == view_2d_type_t.NODE ? context_raw.node_preview_name : h.text;

		ui._w = math_floor(math_min(draw_string_width(ui.ops.font, ui.font_size, text) + 15 * UI_SCALE(), 100 * UI_SCALE()));

		if (ui_view2d_type == view_2d_type_t.ASSET) {
			let asset: asset_t = context_raw.texture;
			if (asset != null) {
				let asset_names: string[] = project_asset_names;
				let i: i32                = array_index_of(asset_names, asset.name);
				h.text                    = asset.name;
				asset.name                = ui_text_input(h, "");
				asset_names[i]            = asset.name;
			}
		}
		else if (ui_view2d_type == view_2d_type_t.NODE) {
			ui_text(context_raw.node_preview_name);
		}
		else if (ui_view2d_type == view_2d_type_t.LAYER) {
			h.text                     = l.name;
			l.name                     = ui_text_input(h, "");
			ui_view2d_text_input_hover = ui.is_hovered;
		}
		else if (ui_view2d_type == view_2d_type_t.FONT) {
			h.text                = context_raw.font.name;
			context_raw.font.name = ui_text_input(h, "");
		}

		if (h.changed) {
			ui_base_hwnds[0].redraws = 2;
		}
		ui._x += ui._w + 3;
		ui._y = 2 + start_y;
		ui._w = ew;

		if (ui_view2d_type == view_2d_type_t.LAYER) {
			let h_layer_mode: ui_handle_t = ui_handle(__ID__);
			if (h_layer_mode.init) {
				h_layer_mode.i = ui_view2d_layer_mode;
			}
			let layer_mode_combo: string[] = [ tr("Visible"), tr("Selected") ];
			ui_view2d_layer_mode           = ui_combo(h_layer_mode, layer_mode_combo, tr("Layers"));
			ui._x += ew + 3;
			ui._y = 2 + start_y;

			if (!slot_layer_is_mask(context_raw.layer)) {
				let h_tex_type: ui_handle_t = ui_handle(__ID__);
				if (h_tex_type.init) {
					h_tex_type.i = ui_view2d_tex_type;
				}
				let tex_type_combo: string[] = [
					tr("Base Color"),
					tr("Normal Map"),
					tr("Occlusion"),
					tr("Roughness"),
					tr("Metallic"),
					tr("Opacity"),
					tr("Height"),
				];
				ui_view2d_tex_type = ui_combo(h_tex_type, tex_type_combo, tr("Texture"));
				ui._x += ew + 3;
				ui._y = 2 + start_y;
			}

			ui._w                         = math_floor(ew * 0.7 + 3);
			let h_uvmap_show: ui_handle_t = ui_handle(__ID__);
			if (h_uvmap_show.init) {
				h_uvmap_show.b = ui_view2d_uvmap_show;
			}
			ui_view2d_uvmap_show = ui_check(h_uvmap_show, tr("UV Map"));
			ui._x += ew * 0.7 + 3;
			ui._y = 2 + start_y;
		}

		ui._w                         = math_floor(ew * 0.7 + 3);
		let h_tiled_show: ui_handle_t = ui_handle(__ID__);
		if (h_tiled_show.init) {
			h_tiled_show.b = ui_view2d_tiled_show;
		}
		ui_view2d_tiled_show = ui_check(h_tiled_show, tr("Tiled"));
		ui._x += ew * 0.6 + 3;
		ui._y = 2 + start_y;

		if (tex != null) {
			ui._w                  = math_floor(ew * 0.5 + 3);
			let scale_percent: i32 = math_round((tw / tex.width) * 100);
			if (ui_text(scale_percent + "%") == ui_state_t.STARTED) {
				ui_view2d_pan_scale = tex.width / (ui_view2d_ww * 0.95);
			}
			ui._x += ew * 0.5 + 3;
			ui._y = 2 + start_y;
		}

		ui.enabled = false;

		if ((ui_view2d_type == view_2d_type_t.ASSET || ui_view2d_type == view_2d_type_t.NODE) && tex != null) { // Texture resolution
			ui._w = math_floor(ew * 0.7 + 3);
			ui_text(tex.width + "x" + tex.height);
			ui._x += ew * 0.7 + 3;
			ui._y = 2 + start_y;
		}

		let view_type: string = ui_view2d_type == view_2d_type_t.ASSET  ? "Asset"
		                        : ui_view2d_type == view_2d_type_t.NODE ? "Node"
		                        : ui_view2d_type == view_2d_type_t.FONT ? "Font"
		                                                                : "Layer";
		ui._w                 = math_floor(ew * 0.5 + 3);
		ui_text(view_type);
		ui._x += ew * 0.5 + 3;
		ui._y = 2 + start_y;

		ui.enabled = true;

		// Picked position
		if (context_raw.tool == tool_type_t.PICKER && (ui_view2d_type == view_2d_type_t.LAYER || ui_view2d_type == view_2d_type_t.ASSET)) {
			let cursor_img: gpu_texture_t = resource_get("cursor.k");
			let hsize: f32                = 16 * UI_SCALE();
			let size: f32                 = hsize * 2;
			draw_scaled_image(cursor_img, tx + tw * context_raw.uvx_picked - hsize, ty + th * context_raw.uvy_picked - hsize, size, size);
		}
	}
	ui_end();
}

function ui_view2d_update() {
	let headerh: f32 = UI_ELEMENT_H() * 1.4;

	context_raw.paint2d = false;

	if (!base_ui_enabled || !ui_view2d_show || mouse_x < ui_view2d_wx || mouse_x > ui_view2d_wx + ui_view2d_ww || mouse_y < ui_view2d_wy + headerh ||
	    mouse_y > ui_view2d_wy + ui_view2d_wh) {
		if (ui_view2d_controls_down) {
			let control: ui_canvas_control_t = ui_nodes_get_canvas_control(ui_view2d_controls_down);
			ui_view2d_controls_down          = control.controls_down;
		}
		return;
	}

	let control: ui_canvas_control_t = ui_nodes_get_canvas_control(ui_view2d_controls_down);
	ui_view2d_pan_x += control.pan_x;
	ui_view2d_pan_y += control.pan_y;
	ui_view2d_controls_down = control.controls_down;
	if (control.zoom != 0.0) {
		let _pan_x: f32 = ui_view2d_pan_x / ui_view2d_pan_scale;
		let _pan_y: f32 = ui_view2d_pan_y / ui_view2d_pan_scale;
		ui_view2d_pan_scale += control.zoom;
		if (ui_view2d_pan_scale < 0.1) {
			ui_view2d_pan_scale = 0.1;
		}
		if (ui_view2d_pan_scale > 6.0) {
			ui_view2d_pan_scale = 6.0;
		}
		ui_view2d_pan_x = _pan_x * ui_view2d_pan_scale;
		ui_view2d_pan_y = _pan_y * ui_view2d_pan_scale;

		if (ui_touch_scroll) {
			// Zoom to finger location
			ui_view2d_pan_x -= (ui.input_x - ui._window_x - ui._window_w / 2) * control.zoom;
			ui_view2d_pan_y -= (ui.input_y - ui._window_y - ui._window_h / 2) * control.zoom;
		}
		ui_view2d_grid_redraw = true;
	}

	let decal_mask: bool = context_is_decal_mask_paint();
	let set_clone_source: bool =
	    context_raw.tool == tool_type_t.CLONE &&
	    operator_shortcut(map_get(config_keymap, "set_clone_source") + "+" + map_get(config_keymap, "action_paint"), shortcut_type_t.DOWN);
	let bake: bool = context_raw.tool == tool_type_t.BAKE;

	if (ui_view2d_type == view_2d_type_t.LAYER && !ui_view2d_text_input_hover && !bake &&
	    (operator_shortcut(map_get(config_keymap, "action_paint"), shortcut_type_t.DOWN) ||
	     operator_shortcut(map_get(config_keymap, "brush_ruler") + "+" + map_get(config_keymap, "action_paint"), shortcut_type_t.DOWN) || decal_mask ||
	     set_clone_source || config_raw.brush_live)) {

		// Same mapping for paint and rotate (predefined in touch keymap)
		let paint_key: string  = map_get(config_keymap, "action_paint");
		let rotate_key: string = map_get(config_keymap, "action_rotate");
		if (paint_key == rotate_key) {
			// Paint only when clicking on the layer rect
			let layer: slot_layer_t = context_raw.layer;
			let tex: gpu_texture_t  = layer.texpaint;
			let ratio: f32          = tex.height / tex.width;
			let tw: f32             = ui_view2d_ww * 0.95 * ui_view2d_pan_scale;
			let th: f32             = tw * ratio;
			let tx: f32             = ui_view2d_ww / 2 - tw / 2 + ui_view2d_pan_x;
			let headerh: i32        = config_raw.layout[layout_size_t.HEADER] == 1 ? ui_header_h * 2 : ui_header_h;
			let apph: i32           = iron_window_height() - config_raw.layout[layout_size_t.STATUS_H] + headerh;
			let ty: f32             = apph / 2 - th / 2 + ui_view2d_pan_y;
			let mx: f32             = mouse_x - ui_view2d_wx;
			let my: f32             = mouse_y - ui_view2d_wy;
			if (mx > tx && mx < tx + tw && my > ty && my < ty + th) {
				context_raw.paint2d = true;
			}
		}
		else {
			context_raw.paint2d = true;
		}
	}

	if (ui.is_typing) {
		return;
	}

	if (keyboard_started("left")) {
		ui_view2d_pan_x -= 5;
	}
	else if (keyboard_started("right")) {
		ui_view2d_pan_x += 5;
	}
	if (keyboard_started("up")) {
		ui_view2d_pan_y -= 5;
	}
	else if (keyboard_started("down")) {
		ui_view2d_pan_y += 5;
	}

	// Limit panning to keep texture in viewport
	let border: i32 = 32;
	let tw: f32     = ui_view2d_ww * 0.95 * ui_view2d_pan_scale;
	let tx: f32     = ui_view2d_ww / 2 - tw / 2 + ui_view2d_pan_x;
	let hh: f32     = sys_h();
	let ty: f32     = hh / 2 - tw / 2 + ui_view2d_pan_y;

	if (tx + border > ui_view2d_ww) {
		ui_view2d_pan_x = ui_view2d_ww / 2 + tw / 2 - border;
	}
	else if (tx - border < -tw) {
		ui_view2d_pan_x = -tw / 2 - ui_view2d_ww / 2 + border;
	}
	if (ty + border > hh) {
		ui_view2d_pan_y = hh / 2 + tw / 2 - border;
	}
	else if (ty - border < -tw) {
		ui_view2d_pan_y = -tw / 2 - hh / 2 + border;
	}

	if (operator_shortcut(map_get(config_keymap, "view_reset"))) {
		ui_view2d_pan_x     = 0.0;
		ui_view2d_pan_y     = 0.0;
		ui_view2d_pan_scale = 1.0;
	}
}