live preview: Update selection when size of UI changes

Changing the size of a UI will most likely move elements
around. So reselect the current selection when that happens.

This is not a proper solution: It e.g. ignores animations
changing element sizes, etc. but it does handle one
annoying case.

tools/lsp/preview.rs

@@ -93,6 +93,21 @@ pub fn set_contents(url: &VersionedUrl, content: String) {
     }
 }
 
+pub fn reselect_element() {
+    let Some(selected) = PREVIEW_STATE.with(|preview_state| {
+        let mut preview_state = preview_state.borrow_mut();
+        preview_state.selected.take()
+    }) else {
+        return;
+    };
+    let Some(component_instance) = component_instance() else {
+        return;
+    };
+    let positions = component_instance.component_positions(&selected.path, selected.offset);
+
+    set_selected_element(Some(selected), positions, false);
+}
+
 // triggered from the UI, running in UI thread
 fn can_drop_component(_component_name: slint::SharedString, x: f32, y: f32) -> bool {
     drop_location::can_drop_at(x, y)

tools/lsp/preview/ui.rs

@@ -41,6 +41,7 @@ pub fn create_ui(style: String, experimental: bool) -> Result<PreviewUi, Platfor
         super::ask_editor_to_show_document(&file, Range::new(pos, pos))
     });
     ui.on_unselect(super::element_selection::unselect_element);
+    ui.on_reselect(super::reselect_element);
     ui.on_select_at(super::element_selection::select_element_at);
     ui.on_select_behind(super::element_selection::select_element_behind);
     ui.on_can_drop(super::can_drop_component);

tools/lsp/ui/draw-area.slint

@@ -87,6 +87,7 @@ export component DrawArea {
     callback select-at(/* x */ length, /* y */ length, /* enter_component? */ bool);
     callback select-behind(/* x */ length, /* y */ length, /* enter_component? */ bool, /* reverse */ bool);
     callback show-document(/* url */ string, /* line */ int, /* column */ int);
+    callback reselect(); // Reselect element e.g. after changing the window size (which may move the element)
     callback unselect();
     callback selected-element-update-geometry(/* x */ length, /* y */ length, /* width */ length, /* height */ length);
 
@@ -130,6 +131,7 @@ export component DrawArea {
                 update-geometry(_, _, w, h) => {
                     i-preview-area-container.width = clamp(w, i-preview-area-container.min-width, i-preview-area-container.max-width);
                     i-preview-area-container.height = clamp(h, i-preview-area-container.min-height, i-preview-area-container.max-height);
+                    reselect();
                 }
 
                 width: i-preview-area-container.width;

tools/lsp/ui/main.slint

@@ -30,6 +30,7 @@ export component PreviewUi inherits Window {
     callback select-behind(/* x */ length, /* y */ length, /* enter_component* */ bool, /* reverse */ bool);
     callback show-document(/* url */ string, /* line */ int, /* column */ int);
     callback style-changed();
+    callback reselect();
     callback unselect();
 
     property <length> border: 20px;
@@ -120,6 +121,7 @@ export component PreviewUi inherits Window {
                     select-behind(x, y, stay_in_file, reverse) => { root.select-behind(x, y, stay_in_file, reverse); }
                     show-document(url, line, column) => { root.show-document(url, line, column); }
                     unselect() => { root.unselect(); }
+                    reselect() => { root.reselect(); }
                 }
 
                 preferred-width: draw-area.preferred-width + root.side-bar-width /* for left-side-bar */;