Add a new selection box to the component list panel view

app/gui/view/component-browser/component-group/src/set.rs

@@ -231,7 +231,8 @@ impl Wrapper {
     }
 
     /// Start managing a new group. If there is already managed group under given id, the old group
-    /// is no longer managed, and it's returned.
+    /// is no longer managed, and it's returned. Returned [`GroupId`] is non-unique, it might be
+    /// reused by new groups if this one removed by calling [`Self::remove`].
     pub fn add(&self, id: GroupId, group: Group) -> Option<Group> {
         let events = PropagatedEvents::new();
         self.events.attach(&events);
@@ -240,7 +241,12 @@ impl Wrapper {
         old.map(|(group, _)| group)
     }
 
-    /// Stop managing of a group.
+    /// Get a group by a [`GroupId`].
+    pub fn get(&self, id: &GroupId) -> Option<Group> {
+        self.groups.borrow().get(id).map(|(group, _)| group).map(CloneRef::clone_ref)
+    }
+
+    /// Stop managing of a group. A freed [`GroupId`] might be reused by new groups later.
     pub fn remove(&self, group_id: GroupId) {
         self.groups.borrow_mut().remove(&group_id);
     }
@@ -274,7 +280,8 @@ impl Wrapper {
                     (selected_entry, move |e| e.map(|e| (id, e))),
                     (suggestion_accepted, move |e| (id, *e)),
                     (expression_accepted, move |e| (id, *e)),
-                    (selection_position_target, move |p| (id, *p))
+                    (selection_position_target, move |p| (id, *p)),
+                    (selection_size, move |p| (id, *p))
                 }
             }
         }

app/gui/view/component-browser/component-group/src/wide.rs

@@ -171,7 +171,10 @@ impl<const COLUMNS: usize> component::Frp<Model<COLUMNS>> for Frp {
             eval size((size) model.background.size.set(*size));
             eval size((size) model.selection_background.size.set(*size));
             out.size <+ size;
-            out.selection_size <+ background_width.map(|&width| Vector2(width / 3.0,list_view::entry::HEIGHT));
+            out.selection_size <+ background_width.all_with(
+                &out.focused,
+                |&width, _| Vector2 (width / 3.0,list_view::entry::HEIGHT)
+            );
 
             // === "No items" label ===
 

app/gui/view/component-browser/searcher-list-panel/src/lib.rs

@@ -50,6 +50,7 @@ use ensogl_core::display::shape::*;
 use ensogl_core::prelude::*;
 
 use enso_frp as frp;
+use ensogl_core::animation::physics::inertia;
 use ensogl_core::application::frp::API;
 use ensogl_core::application::Application;
 use ensogl_core::data::bounding_box::BoundingBox;
@@ -61,6 +62,7 @@ use ensogl_core::display::object::ObjectOps;
 use ensogl_core::display::scene::Layer;
 use ensogl_core::display::shape::StyleWatchFrp;
 use ensogl_core::display::style;
+use ensogl_core::Animation;
 use ensogl_gui_component::component;
 use ensogl_hardcoded_theme::application::component_browser::searcher as searcher_theme;
 use ensogl_list_view as list_view;
@@ -75,6 +77,16 @@ use ide_view_component_group::Layers as GroupLayers;
 use searcher_theme::list_panel as list_panel_theme;
 
 
+
+// =================
+// === Constants ===
+// =================
+
+/// The selection animation is faster than the default one because of the increased spring force.
+const SELECTION_ANIMATION_SPRING_FORCE_MULTIPLIER: f32 = 1.5;
+
+
+
 // ==============
 // === Layers ===
 // ==============
@@ -403,6 +415,7 @@ pub struct Model {
     layers:              Layers,
     groups_wrapper:      component_group::set::Wrapper,
     navigator:           Rc<RefCell<Option<Navigator>>>,
+    selection:           component_group::selection_box::View,
 }
 
 impl Model {
@@ -434,10 +447,13 @@ impl Model {
 
         let scroll_area = ScrollArea::new(&app);
         display_object.add_child(&scroll_area);
-
         let layers = Layers::new(&app, &scroll_area);
         layers.base.add_exclusive(&scroll_area);
 
+        let selection = component_group::selection_box::View::new(&app.logger);
+        display_object.add_child(&selection);
+        layers.selection_mask.add_exclusive(&selection);
+
         favourites_section.set_parent(scroll_area.content());
         local_scope_section.set_parent(scroll_area.content());
         sub_modules_section.set_parent(scroll_area.content());
@@ -460,6 +476,7 @@ impl Model {
             logger,
             groups_wrapper,
             navigator,
+            selection,
         }
     }
 
@@ -548,6 +565,16 @@ impl Model {
         viewport.contains(pos)
     }
 
+    /// Clamp the Y-coordinate of [`pos`] inside the boundaries of the scroll area.
+    fn clamp_y(&self, pos: Vector2) -> Vector2 {
+        let top_y = self.scroll_area.position().y;
+        let height = self.scroll_area.scroll_area_height.value();
+        let selection_height = self.selection.size.get().y;
+        let half_selection_height = selection_height / 2.0;
+        let y = pos.y.clamp(top_y - height + half_selection_height, top_y - half_selection_height);
+        Vector2(pos.x, y)
+    }
+
     fn on_hover(&self) {
         if let Some(navigator) = self.navigator.borrow().as_ref() {
             navigator.disable()
@@ -798,6 +825,25 @@ impl component::Frp<Model> for Frp {
         let (layout_update, init_layout) = Style::from_theme(network, style);
         let output = &frp_api.output;
         let groups = &model.groups_wrapper;
+        let selection = &model.selection;
+
+        let selection_animation = Animation::<Vector2>::new(&network);
+        let selection_size_animation = Animation::<Vector2>::new(&network);
+        let spring = inertia::Spring::default() * SELECTION_ANIMATION_SPRING_FORCE_MULTIPLIER;
+        selection_animation.set_spring.emit(spring);
+        fn selection_position(model: &Model, id: GroupId, group_local_pos: Vector2) -> Vector2 {
+            let scroll_area = &model.scroll_area;
+            let scroll_area_pos = scroll_area.position() + scroll_area.content().position();
+            let section_pos = match id.section {
+                SectionId::Favorites => model.favourites_section.content.position(),
+                SectionId::LocalScope => default(),
+                SectionId::SubModules => model.sub_modules_section.content.position(),
+            };
+            let group_pos = model.groups_wrapper.get(&id).map(|g| g.position()).unwrap_or_default();
+            let pos = (scroll_area_pos + section_pos + group_pos).xy() + group_local_pos;
+            model.clamp_y(pos)
+        }
+
         frp::extend! { network
             model.favourites_section.content.set_content <+ frp_api.input.set_favourites_section;
             model.local_scope_section.content.set_entries <+ frp_api.input.set_local_scope_section;
@@ -826,8 +872,18 @@ impl component::Frp<Model> for Frp {
             output.header_accepted <+ groups.header_accepted;
 
             output.size <+ layout_update.map(|style| style.size_inner());
+
+            selection_size_animation.target <+ groups.selection_size._1();
+            selection_animation.target <+ groups.selection_position_target.all_with(
+                &model.scroll_area.scroll_position_y,
+                f!([model]((id, pos), _) selection_position(&model,*id, *pos))
+            );
+            eval selection_animation.value ((pos) selection.set_position_xy(*pos));
+            eval selection_size_animation.value ((pos) selection.size.set(*pos));
+            eval_ model.scroll_area.scroll_position_y(selection_animation.skip.emit(()));
         }
-        init_layout.emit(())
+        init_layout.emit(());
+        selection_animation.skip.emit(());
     }
 }