Focus Moving API

[dngulin]

I'm working on a project with game pad input (mapped to keyboard events), and I would like to implement focus traversal with arrow keys.

For fixed layouts I can do something like this:

export component Focusable inherits FocusScope {
    key-pressed(event) => {
        if (event.text == Key.UpArrow) {
            mv_focus_up();
            return accept;
        }
        if (event.text == Key.DownArrow) {
            mv_focus_dn();
            return accept;
        }
        reject
    }

    callback mv_focus_up();
    callback mv_focus_dn();
}

export component App inherits Window {
    VerticalLayout {
        a := Focusable {
            mv_focus_dn => { b.focus(); }
        }
        b := Focusable {
            mv_focus_up => { a.focus(); }
            mv_focus_dn => { c.focus(); }
        }
        c := Focusable {
            mv_focus_up => { b.focus(); }
        }
    }
}

But this approach doesn't work if I create items from a model or in a for loop. It also requires to write a lot of boilerplate code.

It would be great to have API to handle focus movement keys in the parent FocusScope:

function focus-child(idx: int);
property<int> focused-child-idx;
property<int> focusable-children-count;

And use it this way:

export component VerticalConatiner inherits FocusScope {
    key-pressed(event) => {
        if (event.text == Key.UpArrow && self.focused-child-idx > 0) {
            self.focus-child(self.focused-child-idx - 1);
            return accept;
        }
        if (event.text == Key.DownArrow && self.focused-child-idx < self.focusable-children-count - 1) {
            self.focus-child(self.focused-child-idx + 1);
            return accept;
        }
        // If we can't move focus inside, it can be handled by a parent element
        reject
    }
}

I think it is implemented in a similar way for Tab/Shift+Tab but internally.

[tronical]

Since we allowed indexed access into a model, I wonder if we should also permit indexed access into the items for a for loop. So for example given this:

VerticalLayout {
    for i in 10: Text {
        text: i;
    }
    Button {
        text: "Click me";
        clicked => {
            // I want to change the text of the 3rd Text item here...
        }
    }
}

perhaps it could look like this:

VerticalLayout {
    text_items := for i in 10: Text {
        text: i;
    }
    Button {
        text: "Click me";
        clicked => {
            text_items[3].text = "Pressed";
        }
    }
}

[dngulin]

I've implemented a simple prototype that provides basic spatial navigation: https://github.com/dngulin/slint-spatial-focus

It uses the i_slint_core crate to implement the item tree traversal logic, uses key-pressed event handlers in a hacky way to identify vertical and horizontal focus groups, and doesn't support grids. But it can be used for some applications.

I'm also considering to use the map_to_window function to implement a more generic spatial navigation algorithm without focus groups.

UPD: See below.

[dngulin]

I'm also considering to use the map_to_window function to implement a more generic spatial navigation algorithm without focus groups

I've implemented a more generalized version that works with all layout types. It works quite well. You can play with the example.

It is still a prototype (e.g. it uses recursion to iterate over the item tree), has some limitations (it uses the downcast function to identify focusable items, doesn't support dynamic trees, relies to the float point Coord representation) and isn't covered with tests.

@tronical @ogoffart Do you guys think it can be integrated into the slint codebase without big refactors and risky changes? (sorry if tagged wrong people)

What changes can be required to the i_slint_core:

• Add ItemRc::is_focusable: the current implementation relies on the downcast::<FocusScope> method and probably miss all native items (unless they are wrapped with a FocusScope internally).
• Add the ControlFlow::Skip option for the visit_descendants visitor function in order to skip some sub-trees.

I also would like to make the tab-focus traversal optional (i don't need it for my gamepad-controlled apps). It would be great to have a Window component property to enable/disable it. I imagine something like this:

export component Foo inherits Window {
    tab-focus-traverse: false; // default: true
    spatial-focus-traverse: true; // default: false
}

I can spend some time to work on these tasks, but it affects slint internals and require some coordination and design decisions from code owners.