From 2c096aa885a646ff24ed15ae99ecc137179e6c5f Mon Sep 17 00:00:00 2001
From: Tobias Hunger <tobias.hunger@slint.dev>
Date: Tue, 20 Feb 2024 11:42:20 +0100
Subject: [PATCH] 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         | 15 +++++++++++++++
 tools/lsp/preview/ui.rs      |  1 +
 tools/lsp/ui/draw-area.slint |  2 ++
 tools/lsp/ui/main.slint      |  2 ++
 4 files changed, 20 insertions(+)

diff --git a/tools/lsp/preview.rs b/tools/lsp/preview.rs
index ecb201f2e0f..be19b35d0dc 100644
--- a/tools/lsp/preview.rs
+++ b/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)
diff --git a/tools/lsp/preview/ui.rs b/tools/lsp/preview/ui.rs
index 25acab4c7ed..cb6002cd0e0 100644
--- a/tools/lsp/preview/ui.rs
+++ b/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);
diff --git a/tools/lsp/ui/draw-area.slint b/tools/lsp/ui/draw-area.slint
index d25028939c3..49c1c682f4e 100644
--- a/tools/lsp/ui/draw-area.slint
+++ b/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;
diff --git a/tools/lsp/ui/main.slint b/tools/lsp/ui/main.slint
index 8a6b59e5f7c..a568efd556d 100644
--- a/tools/lsp/ui/main.slint
+++ b/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 */;