How can I make sure the visible of a component before I do the screenshot?

[luckychacha]

I am working with a user interface that incorporates a Circle within a TouchArea. As the mouse moves, the on_mouse_move function is called, which results in the circle following the mouse. This circle then displays a screenshot at the location of the mouse. The circle itself has a border and an Image within it. My current approach involves capturing a small screenshot around the cursor's position, saving it to an ImageBuffer, and then using a SharedPixelBuffer to display it.

I've tried to execute the process in three steps, which loop continuously until the mouse stops moving:

• Hide the circle by setting is-capturing to true, which makes it invisible.
• Capture a small screenshot around the cursor and place it inside the circle.
• Show the circle by setting is-capturing to false, which makes it visible again.

Code as follows:

    {
        let weak_window = main_window.as_weak();
        main_window.on_mouse_move(move |circle_position| {
            let window = weak_window.unwrap();
            
            // hide circle and prepare to capture a small screenshot
            window.set_is_capturing(true);

            let pos: Vec<f32> = circle_position
                .as_str()
                .split(",")
                .map(|e| e.parse::<f32>().unwrap())
                .collect();
            let circle_position_x = pos[0] - window.get_picker_circle_radius() as f32;
            let circle_position_y = pos[1] - window.get_picker_circle_radius() as f32;
            let screens = Screen::all().unwrap();
            if let Some(image_buffer) = screens
                .get(0)
                .and_then(|f| {
                    if !window.get_has_image() {
                        // capture a small screenshot
                        f.capture_area(pos[0] as i32, pos[1] as i32, 30, 30).ok()
                    } else {
                        None
                    }
                })
           {
                let image_buffer = imageops::resize(&image_buffer, 90, 90, imageops::FilterType::Nearest);
                let buffer = SharedPixelBuffer::<Rgba8Pixel>::clone_from_slice(
                    image_buffer.as_raw(),
                    image_buffer.width(),
                    image_buffer.height(),
                );
                window.set_cursor_around_screenshot(Image::from_rgba8(buffer));

                window.set_circle_position_x(circle_position_x);
                window.set_circle_position_y(circle_position_y);
                
                // show circle again
                window.set_is_capturing(false);
           }
           "".into()
    }

However, I've encountered an issue where the circle does not hide immediately after I set its visibility to false. I'm unsure how to guarantee that the circle is truly hidden before proceeding with the screenshot.

From the video we could found that circle is also captured in the screenshot:

Screen.Capture.2023-11-07.10.25.49.mov

Here is a snippet of my Slint code for reference:

  in-out property <float> circle_position_x: 1.0;
  in-out property <float> circle_position_y: 1.0;
  in-out property <bool> is-capturing;
  in-out property <image> cursor-around-screenshot;

  i-touch-area := TouchArea {
      width: 100%;
      height: 100%;

      visible: picking-color-on-screen;
      mouse-cursor: none;
      clicked => {
          if (picking-color-on-screen) {
              root.picking-color-on-screen = false;
              root.stop-pick-screen-color();
          }
      }
  }
  
  Circle {
      width: root.picker-circle-radius * 2 * 1px;
      height: root.picker-circle-radius * 2 * 1px;
      border-width: 0.1px;
      background: transparent;
      border-color: black;
      x: root.circle_position_x * 1px;
      y: root.circle_position_y * 1px;
      clip: true;
      visible: !is-capturing;
      Image {
          visible: !is-capturing;
          source: root.cursor-around-screenshot;
      }
  }
  Text {
      visible: false;
      text: {
          root.mouse-move(i-touch-area.mouse-x / 1px + "," + i-touch-area.mouse-y / 1px);
      }
  }

[ogoffart]

It'd be specific to the window manager, i guess.
Maybe you can wait for an iteration of the event loop, with slint::invoke_from_event_loop or slint::Timer::single_shot