panic `NoSuchProperty` when changing `commands` in `Path`

[Areopagitics]

When pressing this custom checkbox, the Slint Language Server crashes. It seems like the commands property for the Path component cannot be updated. I'm using Linux with VS Code.

export component BoxFileSelect {
    property <string> state:"none";
    property <string> square:"M 0,0 h6 v6 h-6 z";
    property <string> first-tick:"M 0,6 l6,-6";
    property <string> second-tick:"M 0,0 l6,6";

    TouchArea {
        width: 20px;
        height: 20px;
        clicked => {
            if(state=="all"){
                state="none";
                check.commands=second-tick;
            }else{
                state="all";
                check.commands =first-tick;
            }
        }

    }
    Path {
        width: 20px;
        height: 20px;
        commands: square;
        stroke: black;
        stroke-width: 2px;
    }
    check:=Path {
        width: 20px;
        height: 20px;
        commands: first-tick + second-tick;
        stroke: green;
        stroke-width: 3px;
    }
}

It would be nice to create a three state checkbox (all, some, none) for nested options...maybe by allowing to modify the current default std-widgets checkbox (?): I see there is discussion #5392 . There is the 3 state option on the web.

[ogoffart]

Thanks for filling a bug report.

The bug is because the Path command is a bit of a special property and there seems to be some bug at how it is handled in the compiler.

There are some design problem in the Path API that need to be addressed (cf #1742) I think the easier to solve the panic would probably be to forbid to assign string to Path::commands.

In the mean time, you can use a temporary property:

export component BoxFileSelect {
    property <string> state:"none";
    property <string> square:"M 0,0 h6 v6 h-6 z";
    property <string> first-tick:"M 0,6 l6,-6";
    property <string> second-tick:"M 0,0 l6,6";

    property <string> the-commands: first-tick + second-tick;

    TouchArea {
        width: 20px;
        height: 20px;
        clicked => {
            if(state=="all"){
                state="none";
                the-commands=second-tick;
            }else{
                state="all";
                the-commands =first-tick;
            }
        }

    }
    Path {
        width: 20px;
        height: 20px;
        commands: square;
        stroke: black;
        stroke-width: 2px;
    }
    check:=Path {
        width: 20px;
        height: 20px;
        commands: the-commands;
        stroke: green;
        stroke-width: 3px;
    }
}

[Areopagitics]

Thank you for the quick response! Your solution works.