rust

How to make macroquad text input box bigger

I am making a simple tabular data application with macroquad. I want to have an editor at the top to edit the cells. However I can not find any function or method to change the size of the text input. Ideally I want to make it as wide as the screen width.

pub async fn start(&mut self) {
        request_new_screen_size(INITIAL_WINDOW_WIDTH, INITIAL_WINDOW_HEIGHT);

        loop {
            clear_background(BACKGROUND_COLOR);

            self.draw_editor();
            self.draw_cells(
                (0.0, EDITOR_HEIGHT + EDITOR_TOP_MARGIN),
                (screen_width(), screen_height()),
            );

            next_frame().await
        }
    }

    fn draw_editor(&mut self) {
        let window_id = hash!();
        root_ui().window(
            window_id,
            vec2(0.0, EDITOR_TOP_MARGIN),
            vec2(screen_width(), EDITOR_HEIGHT),
            |ui| {
                let input_text_id = hash!();
                ui.input_text(input_text_id, "", &mut self.editor_content);

                // Focus the editor when a cell is selected
                if self.selected_cell.is_some() {
                    ui.set_input_focus(input_text_id);
                } else {
                    ui.set_input_focus(hash!());
                }

                if is_key_pressed(KeyCode::Enter) {
                    self.commit_editor();
                    self.selected_cell = None;
                    self.editor_content.clear();
                }
            },
        );
    }

This is what the UI looks like currently. There is an area that is left for the editor/text input area but I cannot use it because I cannot change the size of it. Screen shot

Solution

  • You will have to use InputText directly.

    InputText provides a size function that can be used to set the size.

    Since a MRE sadly was not provided, I made one myself based on the code snippet provided in the question:

    use macroquad::{
    prelude::*,
    ui::{hash, root_ui, widgets::InputText},
    window::request_new_screen_size,
};

const EDITOR_TOP_MARGIN: f32 = 10.0;
const EDITOR_HEIGHT: f32 = 40.0;

const INITIAL_WINDOW_WIDTH: f32 = 600.0;
const INITIAL_WINDOW_HEIGHT: f32 = 400.0;

const BACKGROUND_COLOR: Color = color_u8!(255, 0, 0, 255);

#[macroquad::main("Test")]
pub async fn main() {
    request_new_screen_size(INITIAL_WINDOW_WIDTH, INITIAL_WINDOW_HEIGHT);

    loop {
        clear_background(BACKGROUND_COLOR);
        draw_editor();
        next_frame().await
    }
}

fn draw_editor() {
    let mut data = String::new();

    let window_id = hash!();
    root_ui().window(
        window_id,
        vec2(0.0, EDITOR_TOP_MARGIN),
        vec2(screen_width(), EDITOR_HEIGHT),
        |ui| {
            let input_text_id = hash!();
            InputText::new(input_text_id)
                .label("")
                .size(vec2(screen_width() - 4.0, EDITOR_HEIGHT - 4.0))
                .ui(ui, &mut data);
        },
    );
}

    Which will result in: Screenshot of MRE