Understanding Slint's Image Callback Behavior: When and Why Does Re-rendering Occur?

[shock]

Greetings,

I've been learning Slint for almost a month now, and I really like the mechanics of how it works and all of its features. I'm developing an audio application in Rust and creating the UI using Slint. I'm still learning the aspects of how slint's rendering engine works and, in particular, how it deals with images. I've searched the issues and this discussion forum as best I can, and I still need help. The gist of my question is this: "What makes slint decide when to re-render an image when its source is a callback function?" or maybe better put, "How does it decide when to call the callback function?"

In my app, I need to render waveforms as images as part of my UI. I've gotten my waveform image building working nicely using tiny-skia, but it's expensive enough that I can't always render the image in 1/60th of a second, which is my goal for fluid animation. I usually don't need to re-render the waveform image at all unless a parameter has changed, so it's acceptable if there is a bit of lag when I do. However, I always need to re-render it when the window size changes.

After reading this helpful discussion and @tronical's answer, I am able to force re-rendering of the image when its dynamic layout size changes. However, I'm running into unexpected issues. Specifically, when I update other elements in the UI that have nothing to do with the image, the image source callback is getting called unexpectedly, even though the only two parameters for its callback are the image's width and height. My understanding was that the callback would only be called if either the width or height changed, so this is unexpected behavior for me, and I'm trying to understand what the expected behavior is.

Here's a minimal example that illustrates my problem:

use std::time::Duration;
use slint::{Image, Timer, TimerMode};

slint::slint! {
    import { LineEdit, HorizontalBox, Slider, VerticalBox, CheckBox, SpinBox, TextEdit } from "std-widgets.slint";

    export global Shared {
        pure callback build_image(length, length) -> image;
        in-out property <int> counter: 0;
        in-out property <int> image_calls: 0;
    }

    export component MainWindow inherits Window {
        pure function build_image(width: length, height: length) -> image {
            debug("build image: " + width/1px + "x" + height/1px);
            return Shared.build_image(width, height);
        }

        VerticalBox {
            HorizontalBox {
                max-height: 40px;
                Text {
                    text: "C: " + Shared.counter;
                    min-width: 100px; min-height: 30px;
                    vertical-alignment: center;
                }
                // TextEdit {
                //     text: "C: " + Shared.counter;
                //     min-width: 100px; min-height: 30px;
                // }
            }
            Rectangle{
                preferred-width: 400px;
                preferred-height: 300px;
                min-width: 0px; min-height: 0px;

                Image {
                    x: 0; y: 0;
                    width: 100%; height: 100%;
                    source: build_image(self.width, self.height);
                }
            }
        }
    }
}

fn main() {
    let app = MainWindow::new().unwrap();

    let backend = app.global::<Shared>();
    backend.on_build_image({
        let app_weak = app.as_weak();
        move |width, height| {
            let app = app_weak.unwrap();
            let width = width as u32;
            let height = height as u32;
            let mut image_calls = app.global::<Shared>().get_image_calls();
            image_calls += 1;
            app.global::<Shared>().set_image_calls(image_calls);
            println!("\nimage_calls: {}", image_calls);
            println!("width: {}, height: {}", width, height);
            Image::default()
        }
    });

    let timer = Timer::default();
    let app_weak = app.as_weak();

    // create events once a second to trigger property changes
    let interval = Duration::from_secs(1);
    timer.start(TimerMode::Repeated, interval, {
        let app = app_weak.upgrade().unwrap();
        move || {
            let counter = app.global::<Shared>().get_counter() + 1;
            app.global::<Shared>().set_counter(counter);
        }
    });

    app.run().unwrap();
}

If you run this, you'll see that the Text element is updated with the incremented counter, which is expected. However, the callback to generate the image is called each time as well, which I do not expect. What's stranger, if you swap out the Text element with the commented out TextEdit element, then the counter is still visibly incremented, but the image callback is not called, which is consistent with my expectations. In that case, the image callback is only called when the window is shown, and when it is resized, which is what I want.

Going a step further, and where things get a little weirder for me, if you add a LineEdit anywhere in the layout with no connection to any global properties, and start typing in it, it triggers the image callback on each keystroke.

I have created a more comprehensive demo of the issues I'm having here. It contains a set of test cases that you can run one at a time, by uncommenting the appropriate line of code. The comments should be self-explanatory. There are examples of other behaviors that I find peculiar, including a checkbox that causes the image callback to be called twice when checked and once when unchecked.

Bottom line for me, as much as I like Slint, I don't think I'll be able to use it for my application, unless I can figure out how to avoid the un-intended image source callbacks. Any pointers or workarounds would be greatly appreciated.

Thanks!

PS. I tried to create a slint-only demo of the problem, but I couldn't find a way to view debug statement output in SlintPad or Slint Preview.

---

Slint v1.8.0
Rust 2021
MacOS 14.4.1

[ogoffart]

I haven't looked in details, but what I think is happening is that the Text changing invalidates the layout, making properties like width and height dirty.
because the image source property depends on the width and height, it will also be marked as dirty and re-computed.

I couldn't find a way to view debug statement output in SlintPad or Slint Preview.

On Slintpad you can see the debug statement in the browser javascript console.
On the preview, there is an output tab in the editor somewhere where it can be seen.

[shock]

Thank you, @ogoffart. I wonder why TextEdit doesn't suffer from the same problem. Perhaps because its bounding rectangle is "fixed"? If dynamic changes to Text-based elements (besides TextEdit) invalidate the surrounding layout, is there a straight-forward way to potentially isolate them from the broader flexible layout by encapsulating them in a fixed dimension layout nested within the broader flexible layout? I've had difficulty doing this without making the surrounding layout non-resizable in one dimension or the other.

In the meantime, I will play around with SlintPad now that I know where to look for debug statements and see if I can create the most minimal examples with the fewest dependencies that demonstrate the issue(s).