Missing draw_rectangle in experimental TargetPixelBuffer with VerticalLayout and HorizontalLayout

[ninjasource]

Bug Description

• What is the bug

draw_rectangle is not called for every rectangle that needs to be drawn in the scene

• What behavior did you expect, and what happened instead?

I have been implementing DMA2D support for STM32 micro controllers and came across some strange but reproducible behavior that appears to be a bug. In the two Slint code examples below, clicking the yellow square for the second time results in the 20x20px red rectangle not being drawn on the render pass in the "problematic" example but works correctly in the "no problems with rendering" example. If you implement TargetPixelBuffer and simply log the instructions and return false so that the SoftwareRenderer takes over you will notice this rectangle not being drawn. This has big implications for rendering on more complex guis but this is the simplest example I could come up with. Somewhat confusingly the logging behavior can be seen in both examples BUT the second example still renders correctly so the software renderer must be doing something extra behind the scenes I recon.

Some of my theories about what is going on:
I assume that it has something to do with the combination of VerticalLayout and HorizontalLayout along with how things are positioned. And it appears to be a problem with Rectangle because if you inherit from Window the issue goes away.

• Steps to reproduce the issue

Run the two Slint code snippets. One shows the bug and the other shows it working correctly.

• Any error messages or logs, if available.

0.001297 [INFO ] fill_background_region: Rectangle { x: 0, y: 0, width: 800, height: 480 }
0.001432 [INFO ] fill_rect colour: r 255 g 255 b 255 a 255 alpha 255 clip2: Rectangle { x: 0, y: 0, width: 800, height: 480 }
0.004204 [INFO ] image: 0 9 10 15 clip 0 9 10 15
0.006826 [INFO ] fill_rect colour: r 255 g 000 b 000 a 255 alpha 255 clip2: Rectangle { x: 70, y: 10, width: 20, height: 20 }
0.006901 [INFO ] fill_rect colour: r 255 g 255 b 000 a 255 alpha 255 clip2: Rectangle { x: 0, y: 40, width: 100, height: 50 }
0.006969 [INFO ] frame rendered

[user clicks yellow square]

10.445149 [INFO ] fill_background_region: Rectangle { x: 0, y: 0, width: 800, height: 480 }
10.445256 [INFO ] fill_rect colour: r 255 g 255 b 255 a 255 alpha 255 clip2: Rectangle { x: 0, y: 0, width: 800, height: 480 }
10.448155 [INFO ] image: 0 9 10 15 clip 0 9 10 15
10.450737 [INFO ] image: 9 9 10 10 clip 9 9 10 10
10.450876 [INFO ] fill_rect colour: r 255 g 000 b 000 a 255 alpha 255 clip2: Rectangle { x: 70, y: 10, width: 20, height: 20 }
10.450952 [INFO ] fill_rect colour: r 255 g 255 b 000 a 255 alpha 255 clip2: Rectangle { x: 0, y: 40, width: 100, height: 50 }
10.451017 [INFO ] frame rendered

[user clicks yellow square]

19.294291 [INFO ] fill_background_region: Rectangle { x: 0, y: 0, width: 60, height: 40 }
19.294314 [INFO ] fill_background_region: Rectangle { x: 0, y: 40, width: 100, height: 50 }
19.294415 [INFO ] fill_rect colour: r 255 g 255 b 255 a 255 alpha 255 clip2: Rectangle { x: 0, y: 0, width: 100, height: 90 }
19.294650 [INFO ] image: 0 9 10 15 clip 0 9 10 15
19.294706 [INFO ] image: 9 9 10 10 clip 9 9 10 10
19.294760 [INFO ] image: 19 9 10 10 clip 19 9 10 10
19.294933 [INFO ] fill_rect colour: r 255 g 255 b 000 a 255 alpha 255 clip2: Rectangle { x: 0, y: 40, width: 100, height: 50 }
19.294999 [INFO ] frame rendered

Reproducible Code (if applicable)

// problematic
export component MainWindow inherits Rectangle {
    width: 800px;
    height: 480px;
    background: white;

    VerticalLayout {
        HorizontalLayout {
            t := Text {
                width: 60px;
                font-size: 18px;
                text: "y";
            }

            Rectangle {
                width: 40px;
                height: 40px;
                Rectangle {
                    background: red;
                    width: 20px;
                    height: 20px;
                }
            }
        }

        Rectangle {
            x: 0px;
            height: 50px;
            width: 100px;
            background: yellow;

            TouchArea {
                clicked => {
                    t.text = t.text + "x";
                }
            }
        }
    }
}

// no problems with rendering
export component MainWindow inherits Rectangle {
    width: 800px;
    height: 480px;
    background: white;

    t := Text {
        x: 0;
        y: 0;
        width: 60px;
        font-size: 18px;
        text: "y";
    }

    Rectangle {
        x: 60px;
        y: 0px;
        width: 40px;
        height: 40px;
        Rectangle {
            background: red;
            width: 20px;
            height: 20px;
        }
    }

    Rectangle {
        x: 0px;
        y: 40px;
        height: 50px;
        width: 100px;
        background: yellow;

        TouchArea {
            clicked => {
                t.text = t.text + "x";
            }
        }
    }
}

Environment Details

• Slint Version: 1.13.0
• Platform/OS: None (no_std)
• Programming Language: Rust
• Backend/Renderer: Software Renderer

Product Impact

• What are you building with Slint?

Embedded touchscreen display

• How critical is this issue for your product

Blocker. I need to get the frame rate above 10fps to make the system usable. Therefore, I need to be able to implement DMA2D support.

[ogoffart]

I tried to investigate this, but i don't see the bug.
Most likely you are using the partial renderer, and the region covered by the red rectangle is not getting dirty when the text change. (They yellow one is because it is part of the layout and the height depends on the text)

[ogoffart]

If you could have a concrete application i could try that would help.

[ogoffart]

Is this bug still valid?

[ninjasource]

Hi, my apologies for dropping the ball on this one. I spent a couple of hours scratching around with this again and came up with the following example:

https://github.com/ninjasource/slint_draw_rect

just cargo run and then click the yellow square twice and watch the red square disappear.

I see that the experimental feature has been removed from Slint so I could not use the latest version. Instead, I picked a revision close to when I opened this issue. I hope that helps. This may also mean that this issue is no longer relevant if such functionality is no longer supported so feel free to close it if that is the case.

[ogoffart]

Thanks for the example. I see what's going on.
I transformed this issue into a discussion because this is not a bug as far as i can tell.

The Problem is that your code ignores the clipping when drawing rectangle, and draw the background on the bounding rect.
The region is composed of two rectangle that are dirty.
The yellow one (because of the layout change) and the text, but the red rectangle is not considered as dirty and is not part of the region to be redrawn.
But since you use the bounding box to render the background instead of iterating over the clip rectangles, the background is painted over the red rectangle.

Would it help you if there was a way to configure the dirty region to have only one plain rectangle?

I see that the experimental feature has been removed from Slint so I could not use the latest version

The experimental feature has been moved to the i-slint-renderer-software crate. Just adapt your Cargo.toml to use that instead of i-slint-core

[ninjasource]

Thanks, I will upgrade the example to the latest and try to replicate what you mentioned above. Much appreciated.